diff --git a/apps/cms/scripts/migrate.ts b/apps/cms/scripts/migrate.ts
index 5d3a12c11e7..f0b0d17c9d6 100644
--- a/apps/cms/scripts/migrate.ts
+++ b/apps/cms/scripts/migrate.ts
@@ -1,4 +1,5 @@
 import payload from 'payload'
+
 // Use a minimal config for migrations to avoid importing the full app graph during build
 import payloadConfig from '../src/payload.migrate.config.ts'
 
diff --git a/apps/cms/src/access/isAdmin.ts b/apps/cms/src/access/isAdmin.ts
index 5e1261e26fb..cb8123e95fb 100644
--- a/apps/cms/src/access/isAdmin.ts
+++ b/apps/cms/src/access/isAdmin.ts
@@ -1,4 +1,5 @@
 import type { AccessArgs, FieldAccess } from 'payload'
+
 import type { User } from '../payload-types'
 
 type isAdmin = (args: AccessArgs<User>) => boolean
diff --git a/apps/cms/src/blocks/Banner/Component.tsx b/apps/cms/src/blocks/Banner/Component.tsx
index c395d687801..ec5fd59dcac 100644
--- a/apps/cms/src/blocks/Banner/Component.tsx
+++ b/apps/cms/src/blocks/Banner/Component.tsx
@@ -1,8 +1,8 @@
-import type { BannerBlock as BannerBlockProps } from '@/payload-types'
-
-import { cn } from '@/utilities/ui'
 import React from 'react'
+
 import RichText from '@/components/RichText'
+import type { BannerBlock as BannerBlockProps } from '@/payload-types'
+import { cn } from '@/utilities/ui'
 
 type Props = {
   className?: string
diff --git a/apps/cms/src/blocks/Banner/config.ts b/apps/cms/src/blocks/Banner/config.ts
index 53e46b5cbc4..5bfdc1aa1a3 100644
--- a/apps/cms/src/blocks/Banner/config.ts
+++ b/apps/cms/src/blocks/Banner/config.ts
@@ -1,10 +1,9 @@
-import type { Block } from 'payload'
-
 import {
   FixedToolbarFeature,
   InlineToolbarFeature,
   lexicalEditor,
 } from '@payloadcms/richtext-lexical'
+import type { Block } from 'payload'
 
 export const Banner: Block = {
   slug: 'banner',
diff --git a/apps/cms/src/blocks/Code/Component.client.tsx b/apps/cms/src/blocks/Code/Component.client.tsx
index fc8fb62545a..93901f52206 100644
--- a/apps/cms/src/blocks/Code/Component.client.tsx
+++ b/apps/cms/src/blocks/Code/Component.client.tsx
@@ -1,6 +1,8 @@
 'use client'
+
 import { Highlight, themes } from 'prism-react-renderer'
 import React from 'react'
+
 import { CopyButton } from './CopyButton'
 
 type Props = {
diff --git a/apps/cms/src/blocks/Code/CopyButton.tsx b/apps/cms/src/blocks/Code/CopyButton.tsx
index 546148fa740..3af833cb68d 100644
--- a/apps/cms/src/blocks/Code/CopyButton.tsx
+++ b/apps/cms/src/blocks/Code/CopyButton.tsx
@@ -1,8 +1,10 @@
 'use client'
-import { Button } from '@/components/ui/button'
+
 import { CopyIcon } from '@payloadcms/ui/icons/Copy'
 import { useState } from 'react'
 
+import { Button } from '@/components/ui/button'
+
 export function CopyButton({ code }: { code: string }) {
   const [text, setText] = useState('Copy')
 
diff --git a/apps/cms/src/blocks/MediaBlock/Component.tsx b/apps/cms/src/blocks/MediaBlock/Component.tsx
index 013fd87f849..21ed856bd2d 100644
--- a/apps/cms/src/blocks/MediaBlock/Component.tsx
+++ b/apps/cms/src/blocks/MediaBlock/Component.tsx
@@ -1,12 +1,10 @@
 import type { StaticImageData } from 'next/image'
-
-import { cn } from '@/utilities/ui'
 import React from 'react'
-import RichText from '@/components/RichText'
-
-import type { MediaBlock as MediaBlockProps } from '@/payload-types'
 
 import { Media } from '../../components/Media'
+import RichText from '@/components/RichText'
+import type { MediaBlock as MediaBlockProps } from '@/payload-types'
+import { cn } from '@/utilities/ui'
 
 type Props = MediaBlockProps & {
   breakout?: boolean
diff --git a/apps/cms/src/blocks/Quote/Component.tsx b/apps/cms/src/blocks/Quote/Component.tsx
index 1689a82a535..0bf925e9518 100644
--- a/apps/cms/src/blocks/Quote/Component.tsx
+++ b/apps/cms/src/blocks/Quote/Component.tsx
@@ -1,7 +1,7 @@
-import type { QuoteBlock as QuoteBlockProps } from '@/payload-types'
-
 import React from 'react'
 
+import type { QuoteBlock as QuoteBlockProps } from '@/payload-types'
+
 type Props = {
   className?: string
 } & QuoteBlockProps
diff --git a/apps/cms/src/blocks/YouTube/Component.tsx b/apps/cms/src/blocks/YouTube/Component.tsx
index 2d903a2a6ca..f0c389bc39d 100644
--- a/apps/cms/src/blocks/YouTube/Component.tsx
+++ b/apps/cms/src/blocks/YouTube/Component.tsx
@@ -1,8 +1,8 @@
-import type { YouTubeBlock as YouTubeBlockProps } from '@/payload-types'
-
-import { cn } from '@/utilities/ui'
 import React from 'react'
 
+import type { YouTubeBlock as YouTubeBlockProps } from '@/payload-types'
+import { cn } from '@/utilities/ui'
+
 type Props = {
   className?: string
 } & YouTubeBlockProps
diff --git a/apps/cms/src/collections/Categories.ts b/apps/cms/src/collections/Categories.ts
index d5b20b6d0e3..e9dbfc9d382 100644
--- a/apps/cms/src/collections/Categories.ts
+++ b/apps/cms/src/collections/Categories.ts
@@ -1,4 +1,5 @@
 import type { CollectionConfig } from 'payload'
+
 import { isAdmin } from '../access/isAdmin'
 
 export const Categories: CollectionConfig = {
diff --git a/apps/cms/src/collections/Customers/index.ts b/apps/cms/src/collections/Customers/index.ts
index 56bf14bf318..9e1f2e47abf 100644
--- a/apps/cms/src/collections/Customers/index.ts
+++ b/apps/cms/src/collections/Customers/index.ts
@@ -1,5 +1,10 @@
-import type { CollectionConfig } from 'payload'
-
+import {
+  MetaDescriptionField,
+  MetaImageField,
+  MetaTitleField,
+  OverviewField,
+  PreviewField,
+} from '@payloadcms/plugin-seo/fields'
 import {
   BlocksFeature,
   FixedToolbarFeature,
@@ -8,26 +13,18 @@ import {
   InlineToolbarFeature,
   lexicalEditor,
 } from '@payloadcms/richtext-lexical'
+import type { CollectionConfig } from 'payload'
 
 import { isAnyone } from '../../access/isAnyone.ts'
 import { isAuthenticated } from '../../access/isAuthenticated.ts'
-
 import { Banner } from '../../blocks/Banner/config.ts'
 import { Code } from '../../blocks/Code/config.ts'
 import { MediaBlock } from '../../blocks/MediaBlock/config.ts'
 import { Quote } from '../../blocks/Quote/config.ts'
 import { YouTube } from '../../blocks/YouTube/config.ts'
-import { revalidateDelete, revalidateCustomer } from './hooks/revalidateCustomer.ts'
-
-import {
-  MetaDescriptionField,
-  MetaImageField,
-  MetaTitleField,
-  OverviewField,
-  PreviewField,
-} from '@payloadcms/plugin-seo/fields'
 import { slugField } from '../../fields/slug/index.ts'
 import { WWW_SITE_ORIGIN } from '../../utilities/constants.ts'
+import { revalidateCustomer, revalidateDelete } from './hooks/revalidateCustomer.ts'
 
 const industryOptions = [
   { label: 'Healthcare', value: 'healthcare' },
diff --git a/apps/cms/src/collections/Events/index.ts b/apps/cms/src/collections/Events/index.ts
index de909c08e8c..1f3896b5e3a 100644
--- a/apps/cms/src/collections/Events/index.ts
+++ b/apps/cms/src/collections/Events/index.ts
@@ -1,5 +1,10 @@
-import type { CollectionConfig } from 'payload'
-
+import {
+  MetaDescriptionField,
+  MetaImageField,
+  MetaTitleField,
+  OverviewField,
+  PreviewField,
+} from '@payloadcms/plugin-seo/fields'
 import {
   BlocksFeature,
   FixedToolbarFeature,
@@ -8,27 +13,19 @@ import {
   InlineToolbarFeature,
   lexicalEditor,
 } from '@payloadcms/richtext-lexical'
+import type { CollectionConfig } from 'payload'
 
 import { isAnyone } from '../../access/isAnyone.ts'
 import { isAuthenticated } from '../../access/isAuthenticated.ts'
-
 import { Banner } from '../../blocks/Banner/config.ts'
 import { Code } from '../../blocks/Code/config.ts'
 import { MediaBlock } from '../../blocks/MediaBlock/config.ts'
 import { Quote } from '../../blocks/Quote/config.ts'
 import { YouTube } from '../../blocks/YouTube/config.ts'
-import { revalidateDelete, revalidateEvent } from './hooks/revalidateEvent.ts'
-
-import {
-  MetaDescriptionField,
-  MetaImageField,
-  MetaTitleField,
-  OverviewField,
-  PreviewField,
-} from '@payloadcms/plugin-seo/fields'
 import { slugField } from '../../fields/slug/index.ts'
-import { timezoneOptions } from '../../utilities/timezones.ts'
 import { WWW_SITE_ORIGIN } from '../../utilities/constants.ts'
+import { timezoneOptions } from '../../utilities/timezones.ts'
+import { revalidateDelete, revalidateEvent } from './hooks/revalidateEvent.ts'
 
 const eventTypeOptions = [
   { label: 'Conference', value: 'conference' },
diff --git a/apps/cms/src/collections/Media.ts b/apps/cms/src/collections/Media.ts
index 9b8f9c70ae8..2d29b0ac2a4 100644
--- a/apps/cms/src/collections/Media.ts
+++ b/apps/cms/src/collections/Media.ts
@@ -1,9 +1,9 @@
-import type { CollectionConfig } from 'payload'
 import {
   FixedToolbarFeature,
   InlineToolbarFeature,
   lexicalEditor,
 } from '@payloadcms/richtext-lexical'
+import type { CollectionConfig } from 'payload'
 
 import { isAnyone } from '../access/isAnyone.ts'
 import { isAuthenticated } from '../access/isAuthenticated.ts'
diff --git a/apps/cms/src/collections/Posts/hooks/populateAuthors.ts b/apps/cms/src/collections/Posts/hooks/populateAuthors.ts
index 6a57e36534a..8d854d65d26 100644
--- a/apps/cms/src/collections/Posts/hooks/populateAuthors.ts
+++ b/apps/cms/src/collections/Posts/hooks/populateAuthors.ts
@@ -1,4 +1,5 @@
 import type { CollectionAfterReadHook } from 'payload'
+
 import type { Author } from '../../../payload-types'
 
 export const populateAuthors: CollectionAfterReadHook = async ({ doc, req: { payload } }) => {
diff --git a/apps/cms/src/collections/Posts/index.ts b/apps/cms/src/collections/Posts/index.ts
index 72e8830bb39..51fc3534420 100644
--- a/apps/cms/src/collections/Posts/index.ts
+++ b/apps/cms/src/collections/Posts/index.ts
@@ -1,5 +1,10 @@
-import type { CollectionConfig } from 'payload'
-
+import {
+  MetaDescriptionField,
+  MetaImageField,
+  MetaTitleField,
+  OverviewField,
+  PreviewField,
+} from '@payloadcms/plugin-seo/fields'
 import {
   BlocksFeature,
   FixedToolbarFeature,
@@ -8,27 +13,19 @@ import {
   InlineToolbarFeature,
   lexicalEditor,
 } from '@payloadcms/richtext-lexical'
+import type { CollectionConfig } from 'payload'
 
 import { isAnyone } from '../../access/isAnyone.ts'
 import { isAuthenticated } from '../../access/isAuthenticated.ts'
-
 import { Banner } from '../../blocks/Banner/config.ts'
 import { Code } from '../../blocks/Code/config.ts'
 import { MediaBlock } from '../../blocks/MediaBlock/config.ts'
 import { Quote } from '../../blocks/Quote/config.ts'
 import { YouTube } from '../../blocks/YouTube/config.ts'
-import { populateAuthors } from './hooks/populateAuthors.ts'
-import { revalidateDelete, revalidatePost } from './hooks/revalidatePost.ts'
-
-import {
-  MetaDescriptionField,
-  MetaImageField,
-  MetaTitleField,
-  OverviewField,
-  PreviewField,
-} from '@payloadcms/plugin-seo/fields'
 import { slugField } from '../../fields/slug/index.ts'
 import { WWW_SITE_ORIGIN } from '../../utilities/constants.ts'
+import { populateAuthors } from './hooks/populateAuthors.ts'
+import { revalidateDelete, revalidatePost } from './hooks/revalidatePost.ts'
 
 const launchweekOptions = [
   { label: '6', value: '6' },
diff --git a/apps/cms/src/collections/Users.ts b/apps/cms/src/collections/Users.ts
index de665459f8e..e7d8db53cbf 100644
--- a/apps/cms/src/collections/Users.ts
+++ b/apps/cms/src/collections/Users.ts
@@ -1,4 +1,5 @@
 import type { CollectionConfig } from 'payload'
+
 import { isAdmin, isAdminFieldLevel } from '../access/isAdmin.ts'
 import { isAdminOrSelf } from '../access/isAdminOrSelf.ts'
 
diff --git a/apps/cms/src/components/AdminBar/index.tsx b/apps/cms/src/components/AdminBar/index.tsx
index 08c5c6c2e9d..f2d320a5f61 100644
--- a/apps/cms/src/components/AdminBar/index.tsx
+++ b/apps/cms/src/components/AdminBar/index.tsx
@@ -1,12 +1,11 @@
 'use client'
 
 import type { PayloadAdminBarProps, PayloadMeUser } from '@payloadcms/admin-bar'
+import { PayloadAdminBar } from '@payloadcms/admin-bar'
+import { useRouter, useSelectedLayoutSegments } from 'next/navigation'
+import React, { useState } from 'react'
 
 import { cn } from '@/utilities/ui'
-import { useSelectedLayoutSegments } from 'next/navigation'
-import { PayloadAdminBar } from '@payloadcms/admin-bar'
-import React, { useState } from 'react'
-import { useRouter } from 'next/navigation'
 
 import './index.scss'
 
diff --git a/apps/cms/src/components/Card/index.tsx b/apps/cms/src/components/Card/index.tsx
index 72c44d27f72..23f5aa30afb 100644
--- a/apps/cms/src/components/Card/index.tsx
+++ b/apps/cms/src/components/Card/index.tsx
@@ -1,12 +1,12 @@
 'use client'
-import { cn } from '@/utilities/ui'
-import useClickableCard from '@/utilities/useClickableCard'
+
 import Link from 'next/link'
 import React, { Fragment } from 'react'
 
-import type { Post } from '@/payload-types'
-
 import { Media } from '@/components/Media'
+import type { Post } from '@/payload-types'
+import { cn } from '@/utilities/ui'
+import useClickableCard from '@/utilities/useClickableCard'
 
 export type CardPostData = Pick<Post, 'slug' | 'categories' | 'meta' | 'title'>
 
diff --git a/apps/cms/src/components/CollectionArchive/index.tsx b/apps/cms/src/components/CollectionArchive/index.tsx
index b0a2a1c4935..c88528f365c 100644
--- a/apps/cms/src/components/CollectionArchive/index.tsx
+++ b/apps/cms/src/components/CollectionArchive/index.tsx
@@ -1,7 +1,7 @@
-import { cn } from '@/utilities/ui'
 import React from 'react'
 
 import { Card, CardPostData } from '@/components/Card'
+import { cn } from '@/utilities/ui'
 
 export type Props = {
   posts: CardPostData[]
diff --git a/apps/cms/src/components/Link/index.tsx b/apps/cms/src/components/Link/index.tsx
index ed9f7be0b23..39a429b40cc 100644
--- a/apps/cms/src/components/Link/index.tsx
+++ b/apps/cms/src/components/Link/index.tsx
@@ -1,9 +1,9 @@
-import { Button, type ButtonProps } from '@/components/ui/button'
-import { cn } from '@/utilities/ui'
 import Link from 'next/link'
 import React from 'react'
 
+import { Button, type ButtonProps } from '@/components/ui/button'
 import type { Post } from '@/payload-types'
+import { cn } from '@/utilities/ui'
 
 type CMSLinkType = {
   appearance?: 'inline' | ButtonProps['variant']
diff --git a/apps/cms/src/components/LivePreviewListener/index.tsx b/apps/cms/src/components/LivePreviewListener/index.tsx
index 8b40675e7fa..856d773acd4 100644
--- a/apps/cms/src/components/LivePreviewListener/index.tsx
+++ b/apps/cms/src/components/LivePreviewListener/index.tsx
@@ -1,9 +1,11 @@
 'use client'
-import { getClientSideURL } from '@/utilities/getURL'
+
 import { RefreshRouteOnSave as PayloadLivePreview } from '@payloadcms/live-preview-react'
 import { useRouter } from 'next/navigation'
 import React from 'react'
 
+import { getClientSideURL } from '@/utilities/getURL'
+
 export const LivePreviewListener: React.FC = () => {
   const router = useRouter()
   return <PayloadLivePreview refresh={router.refresh} serverURL={getClientSideURL()} />
diff --git a/apps/cms/src/components/Media/ImageMedia/index.tsx b/apps/cms/src/components/Media/ImageMedia/index.tsx
index c472254da6c..5cd28b8e23d 100644
--- a/apps/cms/src/components/Media/ImageMedia/index.tsx
+++ b/apps/cms/src/components/Media/ImageMedia/index.tsx
@@ -1,15 +1,13 @@
 'use client'
 
 import type { StaticImageData } from 'next/image'
-
-import { cn } from '@/utilities/ui'
 import NextImage from 'next/image'
 import React from 'react'
 
 import type { Props as MediaProps } from '../types'
-
 import { cssVariables } from '@/cssVariables'
 import { getClientSideURL } from '@/utilities/getURL'
+import { cn } from '@/utilities/ui'
 
 const { breakpoints } = cssVariables
 
diff --git a/apps/cms/src/components/Media/VideoMedia/index.tsx b/apps/cms/src/components/Media/VideoMedia/index.tsx
index 873eaacda51..93632475505 100644
--- a/apps/cms/src/components/Media/VideoMedia/index.tsx
+++ b/apps/cms/src/components/Media/VideoMedia/index.tsx
@@ -1,11 +1,10 @@
 'use client'
 
-import { cn } from '@/utilities/ui'
 import React, { useEffect, useRef } from 'react'
 
 import type { Props as MediaProps } from '../types'
-
 import { getClientSideURL } from '@/utilities/getURL'
+import { cn } from '@/utilities/ui'
 
 export const VideoMedia: React.FC<MediaProps> = (props) => {
   const { onClick, resource, videoClassName } = props
diff --git a/apps/cms/src/components/Media/index.tsx b/apps/cms/src/components/Media/index.tsx
index a4e2b9d0ef3..56bf75d872e 100644
--- a/apps/cms/src/components/Media/index.tsx
+++ b/apps/cms/src/components/Media/index.tsx
@@ -1,8 +1,7 @@
 import React, { Fragment } from 'react'
 
-import type { Props } from './types'
-
 import { ImageMedia } from './ImageMedia'
+import type { Props } from './types'
 import { VideoMedia } from './VideoMedia'
 
 export const Media: React.FC<Props> = (props) => {
diff --git a/apps/cms/src/components/Pagination/index.tsx b/apps/cms/src/components/Pagination/index.tsx
index 448b301df2d..bac01a968c4 100644
--- a/apps/cms/src/components/Pagination/index.tsx
+++ b/apps/cms/src/components/Pagination/index.tsx
@@ -1,4 +1,8 @@
 'use client'
+
+import { useRouter } from 'next/navigation'
+import React from 'react'
+
 import {
   Pagination as PaginationComponent,
   PaginationContent,
@@ -9,8 +13,6 @@ import {
   PaginationPrevious,
 } from '@/components/ui/pagination'
 import { cn } from '@/utilities/ui'
-import { useRouter } from 'next/navigation'
-import React from 'react'
 
 export const Pagination: React.FC<{
   className?: string
diff --git a/apps/cms/src/components/RichText/index.tsx b/apps/cms/src/components/RichText/index.tsx
index 727236737d4..50a48615ffb 100644
--- a/apps/cms/src/components/RichText/index.tsx
+++ b/apps/cms/src/components/RichText/index.tsx
@@ -1,4 +1,3 @@
-import { MediaBlock } from '@/blocks/MediaBlock/Component'
 import {
   DefaultNodeTypes,
   SerializedBlockNode,
@@ -6,22 +5,22 @@ import {
   type DefaultTypedEditorState,
 } from '@payloadcms/richtext-lexical'
 import {
+  RichText as ConvertRichText,
   JSXConvertersFunction,
   LinkJSXConverter,
-  RichText as ConvertRichText,
 } from '@payloadcms/richtext-lexical/react'
 
+import { BannerBlock } from '@/blocks/Banner/Component'
 import { CodeBlock, CodeBlockProps } from '@/blocks/Code/Component'
-
+import { MediaBlock } from '@/blocks/MediaBlock/Component'
+import { QuoteBlock } from '@/blocks/Quote/Component'
+import { YouTubeBlock } from '@/blocks/YouTube/Component'
 import type {
   BannerBlock as BannerBlockProps,
   MediaBlock as MediaBlockProps,
   QuoteBlock as QuoteBlockProps,
   YouTubeBlock as YouTubeBlockProps,
 } from '@/payload-types'
-import { BannerBlock } from '@/blocks/Banner/Component'
-import { QuoteBlock } from '@/blocks/Quote/Component'
-import { YouTubeBlock } from '@/blocks/YouTube/Component'
 import { cn } from '@/utilities/ui'
 
 type NodeTypes =
diff --git a/apps/cms/src/components/ui/button.tsx b/apps/cms/src/components/ui/button.tsx
index 9cb36846b2e..34e2a4435fa 100644
--- a/apps/cms/src/components/ui/button.tsx
+++ b/apps/cms/src/components/ui/button.tsx
@@ -1,8 +1,9 @@
-import { cn } from '@/utilities/ui'
 import { Slot } from '@radix-ui/react-slot'
-import { type VariantProps, cva } from 'class-variance-authority'
+import { cva, type VariantProps } from 'class-variance-authority'
 import * as React from 'react'
 
+import { cn } from '@/utilities/ui'
+
 const buttonVariants = cva(
   'inline-flex items-center justify-center whitespace-nowrap rounded text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
   {
diff --git a/apps/cms/src/components/ui/card.tsx b/apps/cms/src/components/ui/card.tsx
index 54b8b442d00..7a37960d69f 100644
--- a/apps/cms/src/components/ui/card.tsx
+++ b/apps/cms/src/components/ui/card.tsx
@@ -1,6 +1,7 @@
-import { cn } from '@/utilities/ui'
 import * as React from 'react'
 
+import { cn } from '@/utilities/ui'
+
 const Card: React.FC<
   { ref?: React.Ref<HTMLDivElement> } & React.HTMLAttributes<HTMLDivElement>
 > = ({ className, ref, ...props }) => (
diff --git a/apps/cms/src/components/ui/checkbox.tsx b/apps/cms/src/components/ui/checkbox.tsx
index 1f91c2ec9b9..0a83952d88e 100644
--- a/apps/cms/src/components/ui/checkbox.tsx
+++ b/apps/cms/src/components/ui/checkbox.tsx
@@ -1,10 +1,11 @@
 'use client'
 
-import { cn } from '@/utilities/ui'
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
 import { Check } from 'lucide-react'
 import * as React from 'react'
 
+import { cn } from '@/utilities/ui'
+
 const Checkbox: React.FC<
   {
     ref?: React.Ref<HTMLButtonElement>
diff --git a/apps/cms/src/components/ui/input.tsx b/apps/cms/src/components/ui/input.tsx
index 3a2208f2471..b8a2213b694 100644
--- a/apps/cms/src/components/ui/input.tsx
+++ b/apps/cms/src/components/ui/input.tsx
@@ -1,6 +1,7 @@
-import { cn } from '@/utilities/ui'
 import * as React from 'react'
 
+import { cn } from '@/utilities/ui'
+
 const Input: React.FC<
   {
     ref?: React.Ref<HTMLInputElement>
diff --git a/apps/cms/src/components/ui/label.tsx b/apps/cms/src/components/ui/label.tsx
index ff6a510afad..270f65df45f 100644
--- a/apps/cms/src/components/ui/label.tsx
+++ b/apps/cms/src/components/ui/label.tsx
@@ -1,10 +1,11 @@
 'use client'
 
-import { cn } from '@/utilities/ui'
 import * as LabelPrimitive from '@radix-ui/react-label'
-import { type VariantProps, cva } from 'class-variance-authority'
+import { cva, type VariantProps } from 'class-variance-authority'
 import * as React from 'react'
 
+import { cn } from '@/utilities/ui'
+
 const labelVariants = cva(
   'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
 )
diff --git a/apps/cms/src/components/ui/pagination.tsx b/apps/cms/src/components/ui/pagination.tsx
index 12d4f1dfb40..37f29bf5ac3 100644
--- a/apps/cms/src/components/ui/pagination.tsx
+++ b/apps/cms/src/components/ui/pagination.tsx
@@ -1,10 +1,10 @@
-import type { ButtonProps } from '@/components/ui/button'
-
-import { buttonVariants } from '@/components/ui/button'
-import { cn } from '@/utilities/ui'
 import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react'
 import * as React from 'react'
 
+import type { ButtonProps } from '@/components/ui/button'
+import { buttonVariants } from '@/components/ui/button'
+import { cn } from '@/utilities/ui'
+
 const Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => (
   <nav
     aria-label="pagination"
diff --git a/apps/cms/src/components/ui/select.tsx b/apps/cms/src/components/ui/select.tsx
index a823db21bf3..08ed592cbb2 100644
--- a/apps/cms/src/components/ui/select.tsx
+++ b/apps/cms/src/components/ui/select.tsx
@@ -1,10 +1,11 @@
 'use client'
 
-import { cn } from '@/utilities/ui'
 import * as SelectPrimitive from '@radix-ui/react-select'
 import { Check, ChevronDown, ChevronUp } from 'lucide-react'
 import * as React from 'react'
 
+import { cn } from '@/utilities/ui'
+
 const Select = SelectPrimitive.Root
 
 const SelectGroup = SelectPrimitive.Group
diff --git a/apps/cms/src/components/ui/textarea.tsx b/apps/cms/src/components/ui/textarea.tsx
index ab2b5568985..d20af6f0950 100644
--- a/apps/cms/src/components/ui/textarea.tsx
+++ b/apps/cms/src/components/ui/textarea.tsx
@@ -1,6 +1,7 @@
-import { cn } from '@/utilities/ui'
 import * as React from 'react'
 
+import { cn } from '@/utilities/ui'
+
 const Textarea: React.FC<
   {
     ref?: React.Ref<HTMLTextAreaElement>
diff --git a/apps/cms/src/fields/defaultLexical.ts b/apps/cms/src/fields/defaultLexical.ts
index 02a09cba254..eab19e6a35e 100644
--- a/apps/cms/src/fields/defaultLexical.ts
+++ b/apps/cms/src/fields/defaultLexical.ts
@@ -1,13 +1,13 @@
-import type { TextFieldSingleValidation } from 'payload'
 import {
   BoldFeature,
   ItalicFeature,
+  lexicalEditor,
   LinkFeature,
   ParagraphFeature,
-  lexicalEditor,
   UnderlineFeature,
   type LinkFields,
 } from '@payloadcms/richtext-lexical'
+import type { TextFieldSingleValidation } from 'payload'
 
 export const defaultLexical = lexicalEditor({
   features: [
diff --git a/apps/cms/src/fields/linkGroup.ts b/apps/cms/src/fields/linkGroup.ts
index 72e58a0cfae..248d977d3e5 100644
--- a/apps/cms/src/fields/linkGroup.ts
+++ b/apps/cms/src/fields/linkGroup.ts
@@ -1,8 +1,7 @@
 import type { ArrayField, Field } from 'payload'
 
-import type { LinkAppearances } from './link.ts'
-
 import deepMerge from '../utilities/deepMerge.ts'
+import type { LinkAppearances } from './link.ts'
 import { link } from './link.ts'
 
 type LinkGroupType = (options?: {
diff --git a/apps/cms/src/fields/slug/SlugComponent.tsx b/apps/cms/src/fields/slug/SlugComponent.tsx
index fa962550fda..d247a59ec39 100644
--- a/apps/cms/src/fields/slug/SlugComponent.tsx
+++ b/apps/cms/src/fields/slug/SlugComponent.tsx
@@ -1,10 +1,11 @@
 'use client'
-import React, { useCallback, useEffect } from 'react'
-import { TextFieldClientProps } from 'payload'
 
-import { useField, Button, TextInput, FieldLabel, useFormFields, useForm } from '@payloadcms/ui'
+import { Button, FieldLabel, TextInput, useField, useForm, useFormFields } from '@payloadcms/ui'
+import { TextFieldClientProps } from 'payload'
+import React, { useCallback, useEffect } from 'react'
 
 import { formatSlug } from './formatSlug'
+
 import './index.scss'
 
 type SlugComponentProps = {
diff --git a/apps/cms/src/hooks/revalidateRedirects.ts b/apps/cms/src/hooks/revalidateRedirects.ts
index b5cc3ae4c05..f1bcc977c5f 100644
--- a/apps/cms/src/hooks/revalidateRedirects.ts
+++ b/apps/cms/src/hooks/revalidateRedirects.ts
@@ -1,6 +1,5 @@
-import type { CollectionAfterChangeHook } from 'payload'
-
 import { revalidateTag } from 'next/cache'
+import type { CollectionAfterChangeHook } from 'payload'
 
 export const revalidateRedirects: CollectionAfterChangeHook = ({ doc, req: { payload } }) => {
   payload.logger.info(`Revalidating redirects`)
diff --git a/apps/cms/src/payload.config.ts b/apps/cms/src/payload.config.ts
index 8e7a31c40d2..676fcb3cefe 100644
--- a/apps/cms/src/payload.config.ts
+++ b/apps/cms/src/payload.config.ts
@@ -1,18 +1,13 @@
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
-import sharp from 'sharp'
 import { postgresAdapter } from '@payloadcms/db-postgres'
 import { payloadCloudPlugin } from '@payloadcms/payload-cloud'
 import { nestedDocsPlugin } from '@payloadcms/plugin-nested-docs'
 import { seoPlugin } from '@payloadcms/plugin-seo'
+import type { GenerateTitle, GenerateURL } from '@payloadcms/plugin-seo/types'
 import { s3Storage } from '@payloadcms/storage-s3'
 import { buildConfig, type Plugin } from 'payload'
-import { defaultLexical } from './fields/defaultLexical.ts'
-import { getServerSideURL } from './utilities/getURL.ts'
-import { WWW_SITE_ORIGIN } from './utilities/constants.ts'
-
-import type { GenerateTitle, GenerateURL } from '@payloadcms/plugin-seo/types'
-import type { Customer, Event, Post } from './payload-types'
+import sharp from 'sharp'
 
 import { Authors } from './collections/Authors.ts'
 import { Categories } from './collections/Categories.ts'
@@ -22,6 +17,10 @@ import { Media } from './collections/Media.ts'
 import { Posts } from './collections/Posts/index.ts'
 import { Tags } from './collections/Tags.ts'
 import { Users } from './collections/Users.ts'
+import { defaultLexical } from './fields/defaultLexical.ts'
+import type { Customer, Event, Post } from './payload-types'
+import { WWW_SITE_ORIGIN } from './utilities/constants.ts'
+import { getServerSideURL } from './utilities/getURL.ts'
 
 const filename = fileURLToPath(import.meta.url)
 const dirname = path.dirname(filename)
diff --git a/apps/cms/src/providers/HeaderTheme/index.tsx b/apps/cms/src/providers/HeaderTheme/index.tsx
index bf88fc5a71a..5e303c1f8d4 100644
--- a/apps/cms/src/providers/HeaderTheme/index.tsx
+++ b/apps/cms/src/providers/HeaderTheme/index.tsx
@@ -1,9 +1,8 @@
 'use client'
 
+import React, { createContext, use, useCallback, useState } from 'react'
+
 import type { Theme } from '@/providers/Theme/types'
-
-import React, { createContext, useCallback, use, useState } from 'react'
-
 import canUseDOM from '@/utilities/canUseDOM'
 
 export interface ContextType {
diff --git a/apps/cms/src/providers/Theme/ThemeSelector/index.tsx b/apps/cms/src/providers/Theme/ThemeSelector/index.tsx
index af8f95b0061..480a4e44193 100644
--- a/apps/cms/src/providers/Theme/ThemeSelector/index.tsx
+++ b/apps/cms/src/providers/Theme/ThemeSelector/index.tsx
@@ -1,5 +1,10 @@
 'use client'
 
+import { useTheme } from '..'
+import React, { useState } from 'react'
+
+import type { Theme } from './types'
+import { themeLocalStorageKey } from './types'
 import {
   Select,
   SelectContent,
@@ -7,12 +12,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select'
-import React, { useState } from 'react'
-
-import type { Theme } from './types'
-
-import { useTheme } from '..'
-import { themeLocalStorageKey } from './types'
 
 export const ThemeSelector: React.FC = () => {
   const { setTheme } = useTheme()
diff --git a/apps/cms/src/providers/Theme/index.tsx b/apps/cms/src/providers/Theme/index.tsx
index 060abbac766..af9f152d098 100644
--- a/apps/cms/src/providers/Theme/index.tsx
+++ b/apps/cms/src/providers/Theme/index.tsx
@@ -1,12 +1,11 @@
 'use client'
 
-import React, { createContext, useCallback, use, useEffect, useState } from 'react'
+import React, { createContext, use, useCallback, useEffect, useState } from 'react'
 
-import type { Theme, ThemeContextType } from './types'
-
-import canUseDOM from '@/utilities/canUseDOM'
 import { defaultTheme, getImplicitPreference, themeLocalStorageKey } from './shared'
+import type { Theme, ThemeContextType } from './types'
 import { themeIsValid } from './types'
+import canUseDOM from '@/utilities/canUseDOM'
 
 const initialContext: ThemeContextType = {
   setTheme: () => null,
diff --git a/apps/cms/src/utilities/generateMeta.ts b/apps/cms/src/utilities/generateMeta.ts
index bde0b59da52..09125cca175 100644
--- a/apps/cms/src/utilities/generateMeta.ts
+++ b/apps/cms/src/utilities/generateMeta.ts
@@ -1,9 +1,8 @@
 import type { Metadata } from 'next'
 
-import type { Media, Post, Config } from '../payload-types'
-
-import { mergeOpenGraph } from './mergeOpenGraph.ts'
+import type { Config, Media, Post } from '../payload-types'
 import { getServerSideURL } from './getURL.ts'
+import { mergeOpenGraph } from './mergeOpenGraph.ts'
 
 const getImageURL = (image?: Media | Config['db']['defaultIDType'] | null) => {
   const serverUrl = getServerSideURL()
diff --git a/apps/cms/src/utilities/generatePreviewPath.ts b/apps/cms/src/utilities/generatePreviewPath.ts
index bd39e63b13c..88450b50a98 100644
--- a/apps/cms/src/utilities/generatePreviewPath.ts
+++ b/apps/cms/src/utilities/generatePreviewPath.ts
@@ -1,4 +1,5 @@
-import { PayloadRequest, CollectionSlug } from 'payload'
+import { CollectionSlug, PayloadRequest } from 'payload'
+
 import { WWW_SITE_ORIGIN } from './constants'
 
 const collectionPrefixMap: Partial<Record<CollectionSlug, string>> = {
diff --git a/apps/cms/src/utilities/getDocument.ts b/apps/cms/src/utilities/getDocument.ts
index f63a9c8db66..026260f40ed 100644
--- a/apps/cms/src/utilities/getDocument.ts
+++ b/apps/cms/src/utilities/getDocument.ts
@@ -1,7 +1,8 @@
-import type { Config } from '@/payload-types'
-
 import configPromise from '@payload-config'
 import { getPayload } from 'payload'
+
+import type { Config } from '@/payload-types'
+
 // Do not import next/cache at module scope to keep migrate step Node-compatible
 
 type Collection = keyof Config['collections']
diff --git a/apps/cms/src/utilities/getGlobals.ts b/apps/cms/src/utilities/getGlobals.ts
index aaae4c15f0b..08594485e72 100644
--- a/apps/cms/src/utilities/getGlobals.ts
+++ b/apps/cms/src/utilities/getGlobals.ts
@@ -1,7 +1,8 @@
-import type { Config } from '@/payload-types'
-
 import configPromise from '@payload-config'
 import { getPayload } from 'payload'
+
+import type { Config } from '@/payload-types'
+
 // Do not import next/cache at module scope to keep migrate step Node-compatible
 
 type Global = keyof Config['globals']
diff --git a/apps/cms/src/utilities/mergeOpenGraph.ts b/apps/cms/src/utilities/mergeOpenGraph.ts
index 0ec43bb8d1b..ef1eeaab642 100644
--- a/apps/cms/src/utilities/mergeOpenGraph.ts
+++ b/apps/cms/src/utilities/mergeOpenGraph.ts
@@ -1,4 +1,5 @@
 import type { Metadata } from 'next'
+
 import { getServerSideURL } from './getURL.ts'
 
 const defaultOpenGraph: Metadata['openGraph'] = {
diff --git a/apps/cms/src/utilities/ui.ts b/apps/cms/src/utilities/ui.ts
index fc08f6ee995..1607416e52f 100644
--- a/apps/cms/src/utilities/ui.ts
+++ b/apps/cms/src/utilities/ui.ts
@@ -3,8 +3,7 @@
  *
  * Other functions may be exported from here in the future or by installing other shadcn components.
  */
-
-import { type ClassValue, clsx } from 'clsx'
+import { clsx, type ClassValue } from 'clsx'
 import { twMerge } from 'tailwind-merge'
 
 export function cn(...inputs: ClassValue[]) {
diff --git a/apps/cms/src/utilities/useClickableCard.ts b/apps/cms/src/utilities/useClickableCard.ts
index cca6aa62347..742ffa72345 100644
--- a/apps/cms/src/utilities/useClickableCard.ts
+++ b/apps/cms/src/utilities/useClickableCard.ts
@@ -1,7 +1,7 @@
 'use client'
-import type { RefObject } from 'react'
 
 import { useRouter } from 'next/navigation'
+import type { RefObject } from 'react'
 import { useCallback, useEffect, useRef } from 'react'
 
 type UseClickableCardType<T extends HTMLElement> = {
diff --git a/apps/cms/src/utilities/useDebounce.ts b/apps/cms/src/utilities/useDebounce.ts
index db97afd15aa..3c84dc99d5c 100644
--- a/apps/cms/src/utilities/useDebounce.ts
+++ b/apps/cms/src/utilities/useDebounce.ts
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useEffect, useState } from 'react'
 
 export function useDebounce<T>(value: T, delay = 200): T {
   const [debouncedValue, setDebouncedValue] = useState<T>(value)
diff --git a/apps/design-system/app/(app)/docs/[[...slug]]/page.tsx b/apps/design-system/app/(app)/docs/[[...slug]]/page.tsx
index 9454a245b8a..f4e4c6694d9 100644
--- a/apps/design-system/app/(app)/docs/[[...slug]]/page.tsx
+++ b/apps/design-system/app/(app)/docs/[[...slug]]/page.tsx
@@ -5,8 +5,10 @@ import { DashboardTableOfContents } from '@/components/toc'
 import { siteConfig } from '@/config/site'
 import { getTableOfContents } from '@/lib/toc'
 import { absoluteUrl } from '@/lib/utils'
+
 import '@/styles/code-block-variables.css'
 import '@/styles/mdx.css'
+
 import { allDocs } from 'contentlayer/generated'
 import { ChevronRight } from 'lucide-react'
 import type { Metadata } from 'next'
diff --git a/apps/design-system/app/(app)/layout.tsx b/apps/design-system/app/(app)/layout.tsx
index 775f444ff4f..00fa29d5030 100644
--- a/apps/design-system/app/(app)/layout.tsx
+++ b/apps/design-system/app/(app)/layout.tsx
@@ -1,8 +1,9 @@
+import { ScrollArea } from 'ui'
+
+import { MobileSidebarSheet } from '@/components/mobile-sidebar-sheet'
 import { SideNavigation } from '@/components/side-navigation'
 import { SiteFooter } from '@/components/site-footer'
 import { TopNavigation } from '@/components/top-navigation'
-import { MobileSidebarSheet } from '@/components/mobile-sidebar-sheet'
-import { ScrollArea } from 'ui'
 
 interface AppLayoutProps {
   children: React.ReactNode
diff --git a/apps/design-system/app/(app)/page.tsx b/apps/design-system/app/(app)/page.tsx
index 377ca6bdd09..14b69506f78 100644
--- a/apps/design-system/app/(app)/page.tsx
+++ b/apps/design-system/app/(app)/page.tsx
@@ -1,8 +1,9 @@
-import { HomepageSvgHandler } from '@/components/homepage-svg-handler'
 import { Auth, Database, Realtime } from 'icons/src/icons'
 import { Paintbrush } from 'lucide-react'
 import Link from 'next/link'
 
+import { HomepageSvgHandler } from '@/components/homepage-svg-handler'
+
 export default function Home() {
   return (
     <div className="relative gap-4 px-6 py-6 lg:py-8">
diff --git a/apps/design-system/app/Providers.tsx b/apps/design-system/app/Providers.tsx
index d2ace2cd703..a7fe031c76b 100644
--- a/apps/design-system/app/Providers.tsx
+++ b/apps/design-system/app/Providers.tsx
@@ -3,8 +3,8 @@
 import { Provider as JotaiProvider } from 'jotai'
 import { ThemeProvider as NextThemesProvider } from 'next-themes'
 import { ThemeProviderProps } from 'next-themes/dist/types'
-
 import { TooltipProvider } from 'ui'
+
 import { MobileSidebarProvider } from '@/context/mobile-sidebar-context'
 
 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
diff --git a/apps/design-system/app/SonnerToast.tsx b/apps/design-system/app/SonnerToast.tsx
index 819a8890e9d..28a013f1dbc 100644
--- a/apps/design-system/app/SonnerToast.tsx
+++ b/apps/design-system/app/SonnerToast.tsx
@@ -1,8 +1,9 @@
 'use client'
 
-import { useConfig } from '@/hooks/use-config'
 import { SonnerToaster as Toaster } from 'ui'
 
+import { useConfig } from '@/hooks/use-config'
+
 export function SonnerToaster() {
   const [config] = useConfig()
   return <Toaster position={config.sonnerPosition} expand={config.sonnerExpand} />
diff --git a/apps/design-system/app/layout.tsx b/apps/design-system/app/layout.tsx
index 3346cae6376..55f6ec8893f 100644
--- a/apps/design-system/app/layout.tsx
+++ b/apps/design-system/app/layout.tsx
@@ -3,9 +3,9 @@ import '../../studio/styles/typography.scss'
 
 import type { Metadata, Viewport } from 'next'
 
+import { customFont, sourceCodePro } from './fonts'
 import { ThemeProvider } from './Providers'
 import { SonnerToaster } from './SonnerToast'
-import { customFont, sourceCodePro } from './fonts'
 
 const className = `${customFont.variable} ${sourceCodePro.variable}`
 
diff --git a/apps/design-system/components/code-block-wrapper.tsx b/apps/design-system/components/code-block-wrapper.tsx
index c3474006711..2a6c81ce03e 100644
--- a/apps/design-system/components/code-block-wrapper.tsx
+++ b/apps/design-system/components/code-block-wrapper.tsx
@@ -1,10 +1,9 @@
 'use client'
 
 import * as React from 'react'
-
-import { cn } from 'ui'
-import { Button } from 'ui'
 import {
+  Button,
+  cn,
   Collapsible_Shadcn_ as Collapsible,
   CollapsibleContent_Shadcn_ as CollapsibleContent,
   CollapsibleTrigger_Shadcn_ as CollapsibleTrigger,
diff --git a/apps/design-system/components/code-fragment.tsx b/apps/design-system/components/code-fragment.tsx
index afe821331d3..4e688bf9c28 100644
--- a/apps/design-system/components/code-fragment.tsx
+++ b/apps/design-system/components/code-fragment.tsx
@@ -1,11 +1,10 @@
 'use client'
 
-import { Index } from '@/__registry__'
 import * as React from 'react'
-
-import { useConfig } from '@/hooks/use-config'
 import { cn } from 'ui'
 
+import { Index } from '@/__registry__'
+import { useConfig } from '@/hooks/use-config'
 import { styles } from '@/registry/styles'
 
 interface ComponentPreviewProps extends React.HTMLAttributes<HTMLDivElement> {
diff --git a/apps/design-system/components/colors.tsx b/apps/design-system/components/colors.tsx
index 830581aebae..d7ba3a364c6 100644
--- a/apps/design-system/components/colors.tsx
+++ b/apps/design-system/components/colors.tsx
@@ -1,7 +1,8 @@
-import { cn } from 'ui/src/lib/utils/cn'
-import color from 'ui/src/lib/tailwind-demo-classes'
-import { Grid, GridItem } from './grid'
 import { useState } from 'react'
+import { cn } from 'ui'
+import color from 'ui/src/lib/tailwind-demo-classes'
+
+import { Grid, GridItem } from './grid'
 
 const Colors = ({
   definition,
diff --git a/apps/design-system/components/command-menu.tsx b/apps/design-system/components/command-menu.tsx
index 5a2f558b385..a2dd7b3de58 100644
--- a/apps/design-system/components/command-menu.tsx
+++ b/apps/design-system/components/command-menu.tsx
@@ -1,12 +1,9 @@
 'use client'
 
-import { CircleIcon, LaptopIcon, MoonIcon, SunIcon, Search } from 'lucide-react'
+import { CircleIcon, LaptopIcon, MoonIcon, Search, SunIcon } from 'lucide-react'
 import { useTheme } from 'next-themes'
 import { useRouter } from 'next/navigation'
 import * as React from 'react'
-
-import { docsConfig } from '@/config/docs'
-import { cn } from '@/lib/utils'
 import {
   Button,
   CommandDialog,
@@ -20,6 +17,9 @@ import {
   DialogTitle,
 } from 'ui'
 
+import { docsConfig } from '@/config/docs'
+import { cn } from '@/lib/utils'
+
 export function CommandMenu({ ...props }: DialogProps) {
   const router = useRouter()
   const [open, setOpen] = React.useState(false)
diff --git a/apps/design-system/components/component-example.tsx b/apps/design-system/components/component-example.tsx
index 4a4ae25ff36..44f046f6434 100644
--- a/apps/design-system/components/component-example.tsx
+++ b/apps/design-system/components/component-example.tsx
@@ -1,19 +1,19 @@
 'use client'
 
 import * as React from 'react'
-
-import { cn } from 'ui'
-import {
-  // CopyButton,
-  CopyWithClassNames,
-} from '@/components/copy-button'
 import {
+  cn,
   Tabs_Shadcn_ as Tabs,
   TabsContent_Shadcn_ as TabsContent,
   TabsList_Shadcn_ as TabsList,
   TabsTrigger_Shadcn_ as TabsTrigger,
 } from 'ui'
 
+import {
+  // CopyButton,
+  CopyWithClassNames,
+} from '@/components/copy-button'
+
 interface ComponentExampleProps extends React.HTMLAttributes<HTMLDivElement> {
   extractClassname?: boolean
   extractedClassNames?: string
diff --git a/apps/design-system/components/component-preview.tsx b/apps/design-system/components/component-preview.tsx
index a16b7377c0c..b6c5005fcb1 100644
--- a/apps/design-system/components/component-preview.tsx
+++ b/apps/design-system/components/component-preview.tsx
@@ -1,19 +1,19 @@
 'use client'
 
-import { Index } from '@/__registry__'
-import * as React from 'react'
-
-import { useConfig } from '@/hooks/use-config'
-import { styles } from '@/registry/styles'
 import { ChevronRight, Expand } from 'lucide-react'
+import * as React from 'react'
 import {
   Button,
+  cn,
+  Collapsible_Shadcn_,
   CollapsibleContent_Shadcn_,
   CollapsibleTrigger_Shadcn_,
-  Collapsible_Shadcn_,
-  cn,
 } from 'ui'
 
+import { Index } from '@/__registry__'
+import { useConfig } from '@/hooks/use-config'
+import { styles } from '@/registry/styles'
+
 interface ComponentPreviewProps extends React.HTMLAttributes<HTMLDivElement> {
   name: string
   extractClassname?: boolean
diff --git a/apps/design-system/components/component-source.tsx b/apps/design-system/components/component-source.tsx
index c63d4e49313..d65bbabb769 100644
--- a/apps/design-system/components/component-source.tsx
+++ b/apps/design-system/components/component-source.tsx
@@ -1,8 +1,8 @@
 'use client'
 
 import * as React from 'react'
-
 import { cn } from 'ui'
+
 import { CodeBlockWrapper } from '@/components/code-block-wrapper'
 
 interface ComponentSourceProps extends React.HTMLAttributes<HTMLDivElement> {
diff --git a/apps/design-system/components/copy-button.tsx b/apps/design-system/components/copy-button.tsx
index f8b5f76020d..c54c37a97ad 100644
--- a/apps/design-system/components/copy-button.tsx
+++ b/apps/design-system/components/copy-button.tsx
@@ -1,11 +1,10 @@
 'use client'
 
-import * as React from 'react'
-
 // import { NpmCommands } from 'types/unist'
 
 // import { Event, trackEvent } from '@/lib/events'
 import { Check, Copy } from 'lucide-react'
+import * as React from 'react'
 import {
   Button,
   cn,
diff --git a/apps/design-system/components/homepage-svg-handler.tsx b/apps/design-system/components/homepage-svg-handler.tsx
index 8a565c86f4e..fef1ad5c3f4 100644
--- a/apps/design-system/components/homepage-svg-handler.tsx
+++ b/apps/design-system/components/homepage-svg-handler.tsx
@@ -1,7 +1,7 @@
 'use client'
 
-import SVG from 'react-inlinesvg'
 import { useTheme } from 'next-themes'
+import SVG from 'react-inlinesvg'
 import { cn } from 'ui'
 
 const HomepageSvgHandler = ({ name, className }: { name: string; className?: string }) => {
diff --git a/apps/design-system/components/icons.tsx b/apps/design-system/components/icons.tsx
index e61c80fb466..8ade9cbabdd 100644
--- a/apps/design-system/components/icons.tsx
+++ b/apps/design-system/components/icons.tsx
@@ -7,6 +7,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from 'ui'
+
 import { Grid, GridItem } from './grid'
 
 function Icons() {
diff --git a/apps/design-system/components/mdx-components.tsx b/apps/design-system/components/mdx-components.tsx
index 8074b7aebb1..5e44875ed9e 100644
--- a/apps/design-system/components/mdx-components.tsx
+++ b/apps/design-system/components/mdx-components.tsx
@@ -1,15 +1,37 @@
 'use client'
 
-import * as React from 'react'
+import { useMDXComponent } from 'next-contentlayer2/hooks'
 import Image from 'next/image'
 import Link from 'next/link'
-import { useMDXComponent } from 'next-contentlayer2/hooks'
+import * as React from 'react'
 // import { NpmCommands } from 'types/unist'
 // import { Event } from '@/lib/events'
-import { cn } from 'ui'
-import { useConfig } from '@/hooks/use-config'
+import {
+  Accordion_Shadcn_ as Accordion,
+  AccordionContent_Shadcn_ as AccordionContent,
+  AccordionItem_Shadcn_ as AccordionItem,
+  AccordionTrigger_Shadcn_ as AccordionTrigger,
+  Alert_Shadcn_ as Alert,
+  AlertDescription_Shadcn_ as AlertDescription,
+  AlertTitle_Shadcn_ as AlertTitle,
+  AspectRatio,
+  cn,
+  Tabs_Shadcn_ as Tabs,
+  TabsContent_Shadcn_ as TabsContent,
+  TabsList_Shadcn_ as TabsList,
+  TabsTrigger_Shadcn_ as TabsTrigger,
+} from 'ui'
+import { Admonition } from 'ui-patterns/admonition'
+
+import { ComponentProps } from './component-props'
+import { SonnerExpandConfig } from './sonner-expand-config'
+import { SonnerPositionConfig } from './sonner-expand-position'
+// import { FrameworkDocs } from '@/components/framework-docs'
+import { StyleWrapper } from './style-wrapper'
 import { Callout } from '@/components/callout'
 import { CodeBlockWrapper } from '@/components/code-block-wrapper'
+import { CodeFragment } from '@/components/code-fragment'
+import { Colors } from '@/components/colors'
 import { ComponentExample } from '@/components/component-example'
 import { ComponentPreview } from '@/components/component-preview'
 import { ComponentSource } from '@/components/component-source'
@@ -17,35 +39,10 @@ import {
   CopyButton,
   // CopyNpmCommandButton
 } from '@/components/copy-button'
-// import { FrameworkDocs } from '@/components/framework-docs'
-import { StyleWrapper } from './style-wrapper'
-import {
-  Accordion_Shadcn_ as Accordion,
-  AccordionContent_Shadcn_ as AccordionContent,
-  AccordionItem_Shadcn_ as AccordionItem,
-  AccordionTrigger_Shadcn_ as AccordionTrigger,
-} from 'ui'
-import {
-  Alert_Shadcn_ as Alert,
-  AlertDescription_Shadcn_ as AlertDescription,
-  AlertTitle_Shadcn_ as AlertTitle,
-} from 'ui'
-import { AspectRatio } from 'ui'
-import {
-  Tabs_Shadcn_ as Tabs,
-  TabsContent_Shadcn_ as TabsContent,
-  TabsList_Shadcn_ as TabsList,
-  TabsTrigger_Shadcn_ as TabsTrigger,
-} from 'ui'
-import { ComponentProps } from './component-props'
-import { Style } from '@/registry/styles'
-import { Colors } from '@/components/colors'
 import { Icons } from '@/components/icons'
 import { ThemeSettings } from '@/components/theme-settings'
-import { CodeFragment } from '@/components/code-fragment'
-import { Admonition } from 'ui-patterns/admonition'
-import { SonnerExpandConfig } from './sonner-expand-config'
-import { SonnerPositionConfig } from './sonner-expand-position'
+import { useConfig } from '@/hooks/use-config'
+import { Style } from '@/registry/styles'
 
 const components = {
   Accordion,
diff --git a/apps/design-system/components/mobile-sidebar-sheet.tsx b/apps/design-system/components/mobile-sidebar-sheet.tsx
index 3642611f3f5..642ff2c62ac 100644
--- a/apps/design-system/components/mobile-sidebar-sheet.tsx
+++ b/apps/design-system/components/mobile-sidebar-sheet.tsx
@@ -1,8 +1,9 @@
 'use client'
 
+import { ScrollArea, Sheet, SheetContent, SheetTitle } from 'ui'
+
 import { SideNavigation } from '@/components/side-navigation'
 import { useMobileSidebar } from '@/hooks/use-mobile-sidebar'
-import { Sheet, SheetContent, SheetTitle, ScrollArea } from 'ui'
 
 export function MobileSidebarSheet() {
   const { open, setOpen } = useMobileSidebar()
diff --git a/apps/design-system/components/pager.tsx b/apps/design-system/components/pager.tsx
index 9ec84bf7611..b5c6eb39a0d 100644
--- a/apps/design-system/components/pager.tsx
+++ b/apps/design-system/components/pager.tsx
@@ -1,10 +1,10 @@
-import Link from 'next/link'
 import { Doc } from 'contentlayer/generated'
-import { NavItem, NavItemWithChildren } from '@/types/nav'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+import Link from 'next/link'
 
 import { docsConfig } from '@/config/docs'
 import { cn } from '@/lib/utils'
-import { ChevronLeft, ChevronRight } from 'lucide-react'
+import { NavItem, NavItemWithChildren } from '@/types/nav'
 
 interface DocsPagerProps {
   doc: Doc
diff --git a/apps/design-system/components/side-navigation-item.tsx b/apps/design-system/components/side-navigation-item.tsx
index 7fa61900e48..c0932c8e575 100644
--- a/apps/design-system/components/side-navigation-item.tsx
+++ b/apps/design-system/components/side-navigation-item.tsx
@@ -1,11 +1,12 @@
 'use client'
 
-import { SidebarNavItem } from '@/types/nav'
-import { cn } from 'ui/src/lib/utils/cn'
-import { usePathname } from 'next/navigation'
 import Link from 'next/link'
+import { usePathname } from 'next/navigation'
 import React from 'react'
+import { cn } from 'ui'
+
 import { useMobileSidebar } from '@/hooks/use-mobile-sidebar'
+import { SidebarNavItem } from '@/types/nav'
 
 export const NavigationItem: React.FC<{ item: SidebarNavItem }> = React.memo(({ item }) => {
   const pathname = usePathname()
diff --git a/apps/design-system/components/sonner-expand-config.tsx b/apps/design-system/components/sonner-expand-config.tsx
index 43f2295c298..5c2432c6fff 100644
--- a/apps/design-system/components/sonner-expand-config.tsx
+++ b/apps/design-system/components/sonner-expand-config.tsx
@@ -1,7 +1,8 @@
-import { useConfig } from '@/hooks/use-config'
 import { Switch } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 
+import { useConfig } from '@/hooks/use-config'
+
 function SonnerExpandConfig() {
   const [config, setConfig] = useConfig()
 
diff --git a/apps/design-system/components/sonner-expand-position.tsx b/apps/design-system/components/sonner-expand-position.tsx
index 82510e03394..db1b6d026a6 100644
--- a/apps/design-system/components/sonner-expand-position.tsx
+++ b/apps/design-system/components/sonner-expand-position.tsx
@@ -1,17 +1,18 @@
-import { useConfig } from '@/hooks/use-config'
 import { ComponentProps } from 'react'
 import {
+  Select_Shadcn_,
   SelectContent_Shadcn_,
   SelectGroup_Shadcn_,
   SelectItem_Shadcn_,
   SelectLabel_Shadcn_,
   SelectTrigger_Shadcn_,
   SelectValue_Shadcn_,
-  Select_Shadcn_,
   SonnerToaster,
 } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 
+import { useConfig } from '@/hooks/use-config'
+
 function SonnerPositionConfig() {
   const [config, setConfig] = useConfig()
 
diff --git a/apps/design-system/components/source-panel.tsx b/apps/design-system/components/source-panel.tsx
index 9bcaa0edf9c..91fdc6c6f1e 100644
--- a/apps/design-system/components/source-panel.tsx
+++ b/apps/design-system/components/source-panel.tsx
@@ -1,11 +1,10 @@
-import { Doc } from '@/.contentlayer/generated'
-import Link from 'next/link'
-import { forwardRef } from 'react'
-
 import { ExternalLink } from 'lucide-react'
 import Image from 'next/image'
-import { Button } from 'ui'
-import { cn } from 'ui/src/lib/utils/cn'
+import Link from 'next/link'
+import { forwardRef } from 'react'
+import { Button, cn } from 'ui'
+
+import { Doc } from '@/.contentlayer/generated'
 
 const SourcePanel = forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement> & { doc: Doc }>(
   ({ doc, children, ...props }, ref) => {
diff --git a/apps/design-system/components/theme-settings.tsx b/apps/design-system/components/theme-settings.tsx
index 0d06e68b372..bb074b6546c 100644
--- a/apps/design-system/components/theme-settings.tsx
+++ b/apps/design-system/components/theme-settings.tsx
@@ -2,9 +2,8 @@
 
 import { useTheme } from 'next-themes'
 import { useEffect, useState } from 'react'
-
 import SVG from 'react-inlinesvg'
-import { RadioGroupLargeItem_Shadcn_, RadioGroup_Shadcn_, Theme, singleThemes } from 'ui'
+import { RadioGroup_Shadcn_, RadioGroupLargeItem_Shadcn_, singleThemes, Theme } from 'ui'
 
 const ThemeSettings = () => {
   const [mounted, setMounted] = useState(false)
diff --git a/apps/design-system/components/theme-switcher-dropdown.tsx b/apps/design-system/components/theme-switcher-dropdown.tsx
index c2df0f267f1..ffd0e320075 100644
--- a/apps/design-system/components/theme-switcher-dropdown.tsx
+++ b/apps/design-system/components/theme-switcher-dropdown.tsx
@@ -12,8 +12,8 @@ import {
   DropdownMenuRadioItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-  Theme,
   singleThemes,
+  Theme,
 } from 'ui'
 
 const ThemeSwitcherDropdown = () => {
diff --git a/apps/design-system/components/toc.tsx b/apps/design-system/components/toc.tsx
index d796b845180..b4958ab1ab2 100644
--- a/apps/design-system/components/toc.tsx
+++ b/apps/design-system/components/toc.tsx
@@ -3,9 +3,9 @@
 
 import * as React from 'react'
 
+import { useMounted } from '@/hooks/use-mounted'
 import { TableOfContents } from '@/lib/toc'
 import { cn } from '@/lib/utils'
-import { useMounted } from '@/hooks/use-mounted'
 
 interface TocProps {
   toc: TableOfContents
diff --git a/apps/design-system/components/top-navigation.tsx b/apps/design-system/components/top-navigation.tsx
index 5e9c85dff48..0af6b28d06b 100644
--- a/apps/design-system/components/top-navigation.tsx
+++ b/apps/design-system/components/top-navigation.tsx
@@ -1,8 +1,9 @@
 'use client'
 
-import Link from 'next/link'
 import { Menu } from 'lucide-react'
+import Link from 'next/link'
 import { Button } from 'ui'
+
 import { CommandMenu } from './command-menu'
 import { HomepageSvgHandler } from './homepage-svg-handler'
 import { ThemeSwitcherDropdown } from './theme-switcher-dropdown'
diff --git a/apps/design-system/content/docs/components/combobox.mdx b/apps/design-system/content/docs/components/combobox.mdx
index f5e8bad1d84..21d55d94ae8 100644
--- a/apps/design-system/content/docs/components/combobox.mdx
+++ b/apps/design-system/content/docs/components/combobox.mdx
@@ -19,10 +19,9 @@ See installation instructions for the [Popover](/docs/components/popover#install
 ```tsx
 'use client'
 
-import * as React from 'react'
 import { Check, ChevronsUpDown } from 'lucide-react'
+import * as React from 'react'
 
-import { cn } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
 import {
   Command,
@@ -32,6 +31,7 @@ import {
   CommandItem,
 } from '@/components/ui/command'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { cn } from '@/lib/utils'
 
 const frameworks = [
   {
diff --git a/apps/design-system/content/docs/components/date-picker.mdx b/apps/design-system/content/docs/components/date-picker.mdx
index 0848ee3bdbd..43040dff22c 100644
--- a/apps/design-system/content/docs/components/date-picker.mdx
+++ b/apps/design-system/content/docs/components/date-picker.mdx
@@ -19,14 +19,14 @@ See installation instructions for the [Popover](/docs/components/popover#install
 ```tsx
 'use client'
 
-import * as React from 'react'
 import { format } from 'date-fns'
 import { Calendar as CalendarIcon } from 'lucide-react'
+import * as React from 'react'
 
-import { cn } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
 import { Calendar } from '@/components/ui/calendar'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { cn } from '@/lib/utils'
 
 export function DatePickerDemo() {
   const [date, setDate] = React.useState<Date>()
diff --git a/apps/design-system/content/docs/components/sidebar.mdx b/apps/design-system/content/docs/components/sidebar.mdx
index f8706d0f4ae..b04b4630f13 100644
--- a/apps/design-system/content/docs/components/sidebar.mdx
+++ b/apps/design-system/content/docs/components/sidebar.mdx
@@ -177,8 +177,8 @@ A `Sidebar` component is composed of the following parts:
 ## Usage
 
 ```tsx showLineNumbers title="app/layout.tsx"
-import { SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar'
 import { AppSidebar } from '@/components/app-sidebar'
+import { SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar'
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
@@ -225,8 +225,8 @@ Let's start with the most basic sidebar. A collapsible sidebar with a menu.
 <Step>Add a `SidebarProvider` and `SidebarTrigger` at the root of your application.</Step>
 
 ```tsx showLineNumbers title="app/layout.tsx"
-import { SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar'
 import { AppSidebar } from '@/components/app-sidebar'
+import { SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar'
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
@@ -411,8 +411,8 @@ To persist sidebar state in Next.js, set up your `SidebarProvider` in `app/layou
 ```tsx showLineNumbers title="app/layout.tsx"
 import { cookies } from 'next/headers'
 
-import { SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar'
 import { AppSidebar } from '@/components/app-sidebar'
+import { SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar'
 
 export async function Layout({ children }: { children: React.ReactNode }) {
   const cookieStore = await cookies()
diff --git a/apps/design-system/content/docs/components/tree-view.mdx b/apps/design-system/content/docs/components/tree-view.mdx
index afd4b2b65c5..cddc543ae74 100644
--- a/apps/design-system/content/docs/components/tree-view.mdx
+++ b/apps/design-system/content/docs/components/tree-view.mdx
@@ -14,8 +14,8 @@ source:
 ## Usage
 
 ```tsx
-import { TreeView, TreeViewItem } from 'ui'
 import { flattenTree } from 'react-accessible-treeview'
+import { TreeView, TreeViewItem } from 'ui'
 ```
 
 ```tsx
diff --git a/apps/design-system/content/docs/fragments/inner-side-menu.mdx b/apps/design-system/content/docs/fragments/inner-side-menu.mdx
index 41f82d9dee3..3850cea469e 100644
--- a/apps/design-system/content/docs/fragments/inner-side-menu.mdx
+++ b/apps/design-system/content/docs/fragments/inner-side-menu.mdx
@@ -20,8 +20,8 @@ This is a wrapper component around the `<Collapsible />` component.
 ```jsx {10-12,16-17}
 import {
   InnerSideMenuCollapsible,
-  InnerSideMenuCollapsibleTrigger,
   InnerSideMenuCollapsibleContent,
+  InnerSideMenuCollapsibleTrigger,
   InnerSideMenuItem,
 } from 'ui-patterns/InnerSideMenu'
 
diff --git a/apps/design-system/content/docs/fragments/multi-select.mdx b/apps/design-system/content/docs/fragments/multi-select.mdx
index 1c3d40faf46..eabe31ce3de 100644
--- a/apps/design-system/content/docs/fragments/multi-select.mdx
+++ b/apps/design-system/content/docs/fragments/multi-select.mdx
@@ -12,9 +12,9 @@ fragment: true
 ```tsx
 import {
   MultiSelector,
-  MultiSelectorTrigger,
   MultiSelectorContent,
   MultiSelectorItem,
+  MultiSelectorTrigger,
 } from 'ui-patterns/multi-select'
 ```
 
diff --git a/apps/design-system/content/docs/icons.mdx b/apps/design-system/content/docs/icons.mdx
index e0d0925e237..29f7943f3cd 100644
--- a/apps/design-system/content/docs/icons.mdx
+++ b/apps/design-system/content/docs/icons.mdx
@@ -32,7 +32,7 @@ Create and use custom icons when Lucide doesn’t have the icon you need. Tap on
 ### Usage
 
 ```jsx
-import { ReplaceCode, InsertCode, BucketAdd } from 'icons'
+import { BucketAdd, InsertCode, ReplaceCode } from 'icons'
 
 function app() {
   return (
@@ -69,6 +69,7 @@ Leave attributes like `stroke-width` as they are. The conversion to camel-case f
 
 ```tsx
 import { MyNewIcon } from 'icons'
+
 ;<MyNewIcon size={16} strokeWidth={1} />
 ```
 
diff --git a/apps/design-system/context/mobile-sidebar-context.tsx b/apps/design-system/context/mobile-sidebar-context.tsx
index d746a355b36..b0d5d890b26 100644
--- a/apps/design-system/context/mobile-sidebar-context.tsx
+++ b/apps/design-system/context/mobile-sidebar-context.tsx
@@ -1,6 +1,7 @@
 'use client'
 
-import React, { ReactNode, useState, useCallback } from 'react'
+import React, { ReactNode, useCallback, useState } from 'react'
+
 import { MobileSidebarContext, MobileSidebarContextType } from '@/hooks/use-mobile-sidebar'
 
 interface MobileSidebarProviderProps {
diff --git a/apps/design-system/hooks/use-config.ts b/apps/design-system/hooks/use-config.ts
index 7177c77890b..31f7c9f71a2 100644
--- a/apps/design-system/hooks/use-config.ts
+++ b/apps/design-system/hooks/use-config.ts
@@ -1,9 +1,11 @@
-import { Style } from '@/registry/styles'
-import { Theme } from '@/registry/themes'
 import { useAtom } from 'jotai'
 import { atomWithStorage } from 'jotai/utils'
 import { ComponentProps } from 'react'
 import { SonnerToaster } from 'ui'
+
+import { Style } from '@/registry/styles'
+import { Theme } from '@/registry/themes'
+
 // import { BackendProvider } from '@/registry/backend-provider'
 
 type Config = {
diff --git a/apps/design-system/lib/rehype-component.ts b/apps/design-system/lib/rehype-component.ts
index 9efbc93cc93..e1307f7ac9c 100644
--- a/apps/design-system/lib/rehype-component.ts
+++ b/apps/design-system/lib/rehype-component.ts
@@ -1,14 +1,15 @@
 import fs from 'fs'
 import path from 'path'
-import { UnistNode, UnistTree } from '@/types/unist'
+// import { Column, IColumnProps } from './sample-component'
+import React from 'react'
 import { u } from 'unist-builder'
 import { visit } from 'unist-util-visit'
 
 import { Index } from '../__registry__'
 import { styles } from '../registry/styles'
+import { UnistNode, UnistTree } from '@/types/unist'
 
-// import { Column, IColumnProps } from './sample-component'
-import React from 'react' // ComponentType
+// ComponentType
 
 function inspectComponentProps<T>(component: React.ComponentType<T>): void {
   // Assert the component's props type
diff --git a/apps/design-system/lib/rehype-npm-command.ts b/apps/design-system/lib/rehype-npm-command.ts
index 7b50e4ee696..7f8960b577d 100644
--- a/apps/design-system/lib/rehype-npm-command.ts
+++ b/apps/design-system/lib/rehype-npm-command.ts
@@ -1,6 +1,7 @@
-import { UnistNode, UnistTree } from '@/types/unist'
 import { visit } from 'unist-util-visit'
 
+import { UnistNode, UnistTree } from '@/types/unist'
+
 export function rehypeNpmCommand() {
   return (tree: UnistTree) => {
     visit(tree, (node: UnistNode) => {
diff --git a/apps/design-system/lib/toc.ts b/apps/design-system/lib/toc.ts
index c11d0b83031..951f553dbe1 100644
--- a/apps/design-system/lib/toc.ts
+++ b/apps/design-system/lib/toc.ts
@@ -1,6 +1,5 @@
 // @ts-nocheck
 // TODO: I'll fix this later.
-
 import { toc } from 'mdast-util-toc'
 import { remark } from 'remark'
 import { visit } from 'unist-util-visit'
diff --git a/apps/design-system/registry/default/block/chart-bar-interactive.tsx b/apps/design-system/registry/default/block/chart-bar-interactive.tsx
index 34374419f59..655787cda64 100644
--- a/apps/design-system/registry/default/block/chart-bar-interactive.tsx
+++ b/apps/design-system/registry/default/block/chart-bar-interactive.tsx
@@ -2,9 +2,17 @@
 
 import * as React from 'react'
 import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'
-
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from 'ui'
-import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from 'ui'
 
 export const description = 'An interactive bar chart'
 
diff --git a/apps/design-system/registry/default/block/chart-composed-actions.tsx b/apps/design-system/registry/default/block/chart-composed-actions.tsx
index f6eac7312b2..ee4212e416e 100644
--- a/apps/design-system/registry/default/block/chart-composed-actions.tsx
+++ b/apps/design-system/registry/default/block/chart-composed-actions.tsx
@@ -1,19 +1,19 @@
 'use client'
 
+import { BarChart2, ExternalLink, LineChart } from 'lucide-react'
+import { useEffect, useState } from 'react'
 import {
   Chart,
   ChartActions,
+  ChartBar,
   ChartCard,
   ChartContent,
-  ChartHeader,
-  ChartTitle,
   ChartEmptyState,
-  ChartLoadingState,
-  ChartBar,
+  ChartHeader,
   ChartLine,
+  ChartLoadingState,
+  ChartTitle,
 } from 'ui-patterns/Chart'
-import { BarChart2, ExternalLink, LineChart } from 'lucide-react'
-import { useState, useEffect } from 'react'
 
 export default function ChartComposedActions() {
   const [isLoading, setIsLoading] = useState(true)
diff --git a/apps/design-system/registry/default/block/chart-composed-basic.tsx b/apps/design-system/registry/default/block/chart-composed-basic.tsx
index d9457c3d308..607363710eb 100644
--- a/apps/design-system/registry/default/block/chart-composed-basic.tsx
+++ b/apps/design-system/registry/default/block/chart-composed-basic.tsx
@@ -1,19 +1,19 @@
 'use client'
 
+import { BarChart2, ExternalLink } from 'lucide-react'
+import { useEffect, useState } from 'react'
 import {
   Chart,
   ChartActions,
+  ChartBar,
   ChartCard,
   ChartContent,
-  ChartHeader,
-  ChartTitle,
   ChartEmptyState,
-  ChartLoadingState,
-  ChartBar,
+  ChartHeader,
   ChartLine,
+  ChartLoadingState,
+  ChartTitle,
 } from 'ui-patterns/Chart'
-import { BarChart2, ExternalLink } from 'lucide-react'
-import { useState, useEffect } from 'react'
 
 export default function ComposedChartBasic() {
   const [isLoading, setIsLoading] = useState(true)
diff --git a/apps/design-system/registry/default/block/chart-composed-demo.tsx b/apps/design-system/registry/default/block/chart-composed-demo.tsx
index c734900d395..88b131af925 100644
--- a/apps/design-system/registry/default/block/chart-composed-demo.tsx
+++ b/apps/design-system/registry/default/block/chart-composed-demo.tsx
@@ -1,17 +1,17 @@
 'use client'
 
+import { BarChart2 } from 'lucide-react'
+import { useEffect, useState } from 'react'
 import {
   Chart,
   ChartCard,
   ChartContent,
-  ChartHeader,
   ChartEmptyState,
+  ChartHeader,
   ChartLoadingState,
   ChartMetric,
 } from 'ui-patterns/Chart'
-import { BarChart2 } from 'lucide-react'
 import { LogsBarChart } from 'ui-patterns/LogsBarChart'
-import { useState, useEffect } from 'react'
 
 export default function ComposedChartDemo() {
   const [isLoading, setIsLoading] = useState(true)
diff --git a/apps/design-system/registry/default/block/chart-composed-metrics.tsx b/apps/design-system/registry/default/block/chart-composed-metrics.tsx
index 0c876d7e589..361c35a9a45 100644
--- a/apps/design-system/registry/default/block/chart-composed-metrics.tsx
+++ b/apps/design-system/registry/default/block/chart-composed-metrics.tsx
@@ -1,17 +1,17 @@
 'use client'
 
+import { ExternalLink } from 'lucide-react'
+import { useEffect, useState } from 'react'
+import { Skeleton } from 'ui'
 import {
   Chart,
-  ChartCard,
-  ChartHeader,
   ChartActions,
+  ChartCard,
   ChartContent,
+  ChartHeader,
   ChartMetric,
   ChartSparkline,
 } from 'ui-patterns/Chart'
-import { ExternalLink } from 'lucide-react'
-import { useState, useEffect } from 'react'
-import { Skeleton } from 'ui'
 
 export default function ChartComposedMetrics() {
   const [data, setData] = useState<Array<{ value: number; timestamp: string }>>([])
diff --git a/apps/design-system/registry/default/block/chart-composed-states.tsx b/apps/design-system/registry/default/block/chart-composed-states.tsx
index 4e5aa5d8bd5..c4e25d545c2 100644
--- a/apps/design-system/registry/default/block/chart-composed-states.tsx
+++ b/apps/design-system/registry/default/block/chart-composed-states.tsx
@@ -1,18 +1,18 @@
 'use client'
 
 import { BarChart2, ExternalLink } from 'lucide-react'
+import { Badge } from 'ui'
 import {
   Chart,
-  ChartCard,
-  ChartHeader,
-  ChartTitle,
   ChartActions,
+  ChartCard,
   ChartContent,
-  ChartEmptyState,
-  ChartLoadingState,
   ChartDisabledState,
+  ChartEmptyState,
+  ChartHeader,
+  ChartLoadingState,
+  ChartTitle,
 } from 'ui-patterns/Chart'
-import { Badge } from 'ui'
 
 export default function ChartComposedStates() {
   const actions = [
diff --git a/apps/design-system/registry/default/block/chart-composed-table.tsx b/apps/design-system/registry/default/block/chart-composed-table.tsx
index 303114447e9..a8089ed1f57 100644
--- a/apps/design-system/registry/default/block/chart-composed-table.tsx
+++ b/apps/design-system/registry/default/block/chart-composed-table.tsx
@@ -1,21 +1,21 @@
 'use client'
 
+import { format } from 'date-fns'
+import { BarChart2, ExternalLink } from 'lucide-react'
+import { useEffect, useState } from 'react'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from 'ui'
 import {
   Chart,
   ChartActions,
+  ChartBar,
   ChartCard,
   ChartContent,
-  ChartHeader,
-  ChartTitle,
   ChartEmptyState,
-  ChartLoadingState,
-  ChartBar,
   ChartFooter,
+  ChartHeader,
+  ChartLoadingState,
+  ChartTitle,
 } from 'ui-patterns/Chart'
-import { BarChart2, ExternalLink } from 'lucide-react'
-import { useState, useEffect } from 'react'
-import { Table, TableHead, TableBody, TableRow, TableCell, TableHeader } from 'ui'
-import { format } from 'date-fns'
 
 export default function ChartComposedTable() {
   const [isLoading, setIsLoading] = useState(true)
diff --git a/apps/design-system/registry/default/example/aspect-ratio-demo.tsx b/apps/design-system/registry/default/example/aspect-ratio-demo.tsx
index d1d681c65f5..49c4afc1d6f 100644
--- a/apps/design-system/registry/default/example/aspect-ratio-demo.tsx
+++ b/apps/design-system/registry/default/example/aspect-ratio-demo.tsx
@@ -1,5 +1,4 @@
 import Image from 'next/image'
-
 import { AspectRatio } from 'ui'
 
 export default function AspectRatioDemo() {
diff --git a/apps/design-system/registry/default/example/button-as-child.tsx b/apps/design-system/registry/default/example/button-as-child.tsx
index aa8c3e0259a..4a7cdfcdb07 100644
--- a/apps/design-system/registry/default/example/button-as-child.tsx
+++ b/apps/design-system/registry/default/example/button-as-child.tsx
@@ -1,5 +1,4 @@
 import Link from 'next/link'
-
 import { Button } from 'ui'
 
 export default function ButtonAsChild() {
diff --git a/apps/design-system/registry/default/example/button-icon.tsx b/apps/design-system/registry/default/example/button-icon.tsx
index a48c8f0e3af..f140520b763 100644
--- a/apps/design-system/registry/default/example/button-icon.tsx
+++ b/apps/design-system/registry/default/example/button-icon.tsx
@@ -1,5 +1,4 @@
 import { ChevronRight } from 'lucide-react'
-
 import { Button } from 'ui'
 
 export default function ButtonIcon() {
diff --git a/apps/design-system/registry/default/example/button-with-icon.tsx b/apps/design-system/registry/default/example/button-with-icon.tsx
index 207f6749f15..70d24d18310 100644
--- a/apps/design-system/registry/default/example/button-with-icon.tsx
+++ b/apps/design-system/registry/default/example/button-with-icon.tsx
@@ -1,5 +1,4 @@
 import { Mail } from 'lucide-react'
-
 import { Button } from 'ui'
 
 export default function ButtonWithIcon() {
diff --git a/apps/design-system/registry/default/example/calendar-demo.tsx b/apps/design-system/registry/default/example/calendar-demo.tsx
index b635acc6583..517a070a3ed 100644
--- a/apps/design-system/registry/default/example/calendar-demo.tsx
+++ b/apps/design-system/registry/default/example/calendar-demo.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import * as React from 'react'
-
 import { Calendar } from 'ui'
 
 export default function CalendarDemo() {
diff --git a/apps/design-system/registry/default/example/calendar-form.tsx b/apps/design-system/registry/default/example/calendar-form.tsx
index e598a485034..4e88bb391c8 100644
--- a/apps/design-system/registry/default/example/calendar-form.tsx
+++ b/apps/design-system/registry/default/example/calendar-form.tsx
@@ -5,9 +5,6 @@ import { format } from 'date-fns'
 import { CalendarIcon } from 'lucide-react'
 import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
-import { z } from 'zod'
-
-import { cn } from '@/lib/utils'
 import {
   Button,
   Calendar,
@@ -22,6 +19,9 @@ import {
   PopoverContent_Shadcn_,
   PopoverTrigger_Shadcn_,
 } from 'ui'
+import { z } from 'zod'
+
+import { cn } from '@/lib/utils'
 
 const FormSchema = z.object({
   dob: z.date({
diff --git a/apps/design-system/registry/default/example/calendar-react-hook-form.tsx b/apps/design-system/registry/default/example/calendar-react-hook-form.tsx
index 9f889005280..c5f155210b4 100644
--- a/apps/design-system/registry/default/example/calendar-react-hook-form.tsx
+++ b/apps/design-system/registry/default/example/calendar-react-hook-form.tsx
@@ -5,9 +5,6 @@ import { format } from 'date-fns'
 import { CalendarIcon } from 'lucide-react'
 import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
-import { z } from 'zod'
-
-import { cn } from '@/lib/utils'
 import {
   Button,
   Calendar,
@@ -22,6 +19,9 @@ import {
   PopoverContent_Shadcn_,
   PopoverTrigger_Shadcn_,
 } from 'ui'
+import { z } from 'zod'
+
+import { cn } from '@/lib/utils'
 
 const FormSchema = z.object({
   dob: z.date({
diff --git a/apps/design-system/registry/default/example/chart-bar-demo-legend.tsx b/apps/design-system/registry/default/example/chart-bar-demo-legend.tsx
index c18c880c725..f6c4b8a1a06 100644
--- a/apps/design-system/registry/default/example/chart-bar-demo-legend.tsx
+++ b/apps/design-system/registry/default/example/chart-bar-demo-legend.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'
-
 import {
   ChartConfig,
   ChartContainer,
diff --git a/apps/design-system/registry/default/example/chart-bar-demo-tooltip.tsx b/apps/design-system/registry/default/example/chart-bar-demo-tooltip.tsx
index 2d5cdf9b76f..d8c5234f19b 100644
--- a/apps/design-system/registry/default/example/chart-bar-demo-tooltip.tsx
+++ b/apps/design-system/registry/default/example/chart-bar-demo-tooltip.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'
-
 import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
 
 const chartData = [
diff --git a/apps/design-system/registry/default/example/chart-bar-demo.tsx b/apps/design-system/registry/default/example/chart-bar-demo.tsx
index 646d11730fb..c7f202cdb36 100644
--- a/apps/design-system/registry/default/example/chart-bar-demo.tsx
+++ b/apps/design-system/registry/default/example/chart-bar-demo.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import { Bar, BarChart } from 'recharts'
-
 import { ChartConfig, ChartContainer } from 'ui'
 
 const chartData = [
diff --git a/apps/design-system/registry/default/example/checkbox-form-multiple.tsx b/apps/design-system/registry/default/example/checkbox-form-multiple.tsx
index 3dfe784db0d..e2667e7364d 100644
--- a/apps/design-system/registry/default/example/checkbox-form-multiple.tsx
+++ b/apps/design-system/registry/default/example/checkbox-form-multiple.tsx
@@ -3,8 +3,6 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
-import { z } from 'zod'
-
 import {
   Button,
   Checkbox_Shadcn_,
@@ -16,6 +14,7 @@ import {
   FormLabel_Shadcn_,
   FormMessage_Shadcn_,
 } from 'ui'
+import { z } from 'zod'
 
 const items = [
   {
diff --git a/apps/design-system/registry/default/example/checkbox-form-single.tsx b/apps/design-system/registry/default/example/checkbox-form-single.tsx
index 68a90d95d63..928c4b29e52 100644
--- a/apps/design-system/registry/default/example/checkbox-form-single.tsx
+++ b/apps/design-system/registry/default/example/checkbox-form-single.tsx
@@ -4,8 +4,6 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import Link from 'next/link'
 import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
-import { z } from 'zod'
-
 import {
   Button,
   Checkbox_Shadcn_,
@@ -16,6 +14,7 @@ import {
   FormItem_Shadcn_,
   FormLabel_Shadcn_,
 } from 'ui'
+import { z } from 'zod'
 
 const FormSchema = z.object({
   mobile: z.boolean().default(false).optional(),
diff --git a/apps/design-system/registry/default/example/collapsible-demo.tsx b/apps/design-system/registry/default/example/collapsible-demo.tsx
index 4c4bd31b02c..5e569b1a35f 100644
--- a/apps/design-system/registry/default/example/collapsible-demo.tsx
+++ b/apps/design-system/registry/default/example/collapsible-demo.tsx
@@ -1,10 +1,13 @@
 'use client'
 
-import * as React from 'react'
 import { ChevronsUpDown, Plus, X } from 'lucide-react'
-
-import { Button } from 'ui'
-import { Collapsible_Shadcn_, CollapsibleContent_Shadcn_, CollapsibleTrigger_Shadcn_ } from 'ui'
+import * as React from 'react'
+import {
+  Button,
+  Collapsible_Shadcn_,
+  CollapsibleContent_Shadcn_,
+  CollapsibleTrigger_Shadcn_,
+} from 'ui'
 
 export default function CollapsibleDemo() {
   const [isOpen, setIsOpen] = React.useState(false)
diff --git a/apps/design-system/registry/default/example/color-usage-surface-studio-frame.tsx b/apps/design-system/registry/default/example/color-usage-surface-studio-frame.tsx
index a4bb84e77d9..462364c4d4b 100644
--- a/apps/design-system/registry/default/example/color-usage-surface-studio-frame.tsx
+++ b/apps/design-system/registry/default/example/color-usage-surface-studio-frame.tsx
@@ -1,6 +1,7 @@
+import * as React from 'react'
+
 import { ClassLabel } from '@/components/class-label'
 import { ExampleLabel } from '@/components/example-label'
-import * as React from 'react'
 
 export default function Demo() {
   return (
diff --git a/apps/design-system/registry/default/example/color-usage-surface-studio.tsx b/apps/design-system/registry/default/example/color-usage-surface-studio.tsx
index 893abbd1893..dd509e68a03 100644
--- a/apps/design-system/registry/default/example/color-usage-surface-studio.tsx
+++ b/apps/design-system/registry/default/example/color-usage-surface-studio.tsx
@@ -1,6 +1,7 @@
+import * as React from 'react'
+
 import { ClassLabel } from '@/components/class-label'
 import { ExampleLabel } from '@/components/example-label'
-import * as React from 'react'
 
 export default function Demo() {
   return (
diff --git a/apps/design-system/registry/default/example/color-usage-surface-www-and-docs.tsx b/apps/design-system/registry/default/example/color-usage-surface-www-and-docs.tsx
index 29c4eba1e11..e3e1d5fd6ef 100644
--- a/apps/design-system/registry/default/example/color-usage-surface-www-and-docs.tsx
+++ b/apps/design-system/registry/default/example/color-usage-surface-www-and-docs.tsx
@@ -1,6 +1,7 @@
+import * as React from 'react'
+
 import { ClassLabel } from '@/components/class-label'
 import { ExampleLabel } from '@/components/example-label'
-import * as React from 'react'
 
 export default function Demo() {
   return (
diff --git a/apps/design-system/registry/default/example/combobox-demo.tsx b/apps/design-system/registry/default/example/combobox-demo.tsx
index 011464b8eab..eccdefbc137 100644
--- a/apps/design-system/registry/default/example/combobox-demo.tsx
+++ b/apps/design-system/registry/default/example/combobox-demo.tsx
@@ -2,8 +2,6 @@
 
 import { Check, ChevronsUpDown } from 'lucide-react'
 import * as React from 'react'
-
-import { cn } from '@/lib/utils'
 import {
   Button,
   Command_Shadcn_,
@@ -17,6 +15,8 @@ import {
   PopoverTrigger_Shadcn_,
 } from 'ui'
 
+import { cn } from '@/lib/utils'
+
 const frameworks = [
   {
     value: 'next.js',
diff --git a/apps/design-system/registry/default/example/combobox-dropdown-menu.tsx b/apps/design-system/registry/default/example/combobox-dropdown-menu.tsx
index b1c29126099..ae866941efa 100644
--- a/apps/design-system/registry/default/example/combobox-dropdown-menu.tsx
+++ b/apps/design-system/registry/default/example/combobox-dropdown-menu.tsx
@@ -1,17 +1,15 @@
 'use client'
 
-import * as React from 'react'
 import { Calendar, MoreHorizontal, Tags, Trash, User } from 'lucide-react'
-
-import { Button, CommandList_Shadcn_, ScrollArea } from 'ui'
+import * as React from 'react'
 import {
+  Button,
   Command_Shadcn_,
   CommandEmpty_Shadcn_,
   CommandGroup_Shadcn_,
   CommandInput_Shadcn_,
   CommandItem_Shadcn_,
-} from 'ui'
-import {
+  CommandList_Shadcn_,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuGroup,
@@ -23,6 +21,7 @@ import {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
+  ScrollArea,
 } from 'ui'
 
 const labels = [
diff --git a/apps/design-system/registry/default/example/combobox-form.tsx b/apps/design-system/registry/default/example/combobox-form.tsx
index 5c4e7d16208..4a9670fb438 100644
--- a/apps/design-system/registry/default/example/combobox-form.tsx
+++ b/apps/design-system/registry/default/example/combobox-form.tsx
@@ -4,9 +4,6 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { Check, ChevronsUpDown } from 'lucide-react'
 import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
-import { z } from 'zod'
-
-import { cn } from '@/lib/utils'
 import {
   Button,
   Command_Shadcn_,
@@ -15,8 +12,6 @@ import {
   CommandInput_Shadcn_,
   CommandItem_Shadcn_,
   CommandList_Shadcn_,
-} from 'ui'
-import {
   Form_Shadcn_,
   FormControl_Shadcn_,
   FormDescription_Shadcn_,
@@ -28,6 +23,9 @@ import {
   PopoverContent_Shadcn_,
   PopoverTrigger_Shadcn_,
 } from 'ui'
+import { z } from 'zod'
+
+import { cn } from '@/lib/utils'
 
 const languages = [
   { label: 'English', value: 'en' },
diff --git a/apps/design-system/registry/default/example/combobox-popover.tsx b/apps/design-system/registry/default/example/combobox-popover.tsx
index 4976381d518..904e55f1bc0 100644
--- a/apps/design-system/registry/default/example/combobox-popover.tsx
+++ b/apps/design-system/registry/default/example/combobox-popover.tsx
@@ -1,6 +1,5 @@
 'use client'
 
-import * as React from 'react'
 import {
   ArrowUpCircle,
   CheckCircle2,
@@ -10,17 +9,21 @@ import {
   Plus,
   XCircle,
 } from 'lucide-react'
-
-import { cn } from '@/lib/utils'
-import { Button, CommandList_Shadcn_ } from 'ui'
+import * as React from 'react'
 import {
+  Button,
   Command_Shadcn_,
   CommandEmpty_Shadcn_,
   CommandGroup_Shadcn_,
   CommandInput_Shadcn_,
   CommandItem_Shadcn_,
+  CommandList_Shadcn_,
+  Popover_Shadcn_,
+  PopoverContent_Shadcn_,
+  PopoverTrigger_Shadcn_,
 } from 'ui'
-import { Popover_Shadcn_, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_ } from 'ui'
+
+import { cn } from '@/lib/utils'
 
 type Status = {
   value: string
diff --git a/apps/design-system/registry/default/example/combobox-responsive.tsx b/apps/design-system/registry/default/example/combobox-responsive.tsx
index 997faf87937..85b412dff9d 100644
--- a/apps/design-system/registry/default/example/combobox-responsive.tsx
+++ b/apps/design-system/registry/default/example/combobox-responsive.tsx
@@ -1,19 +1,24 @@
 'use client'
 
+import { Plus } from 'lucide-react'
 import * as React from 'react'
-
-import { useMediaQuery } from '@/hooks/use-media-query'
-import { Button, CommandList_Shadcn_ } from 'ui'
 import {
+  Button,
   Command_Shadcn_,
   CommandEmpty_Shadcn_,
   CommandGroup_Shadcn_,
   CommandInput_Shadcn_,
   CommandItem_Shadcn_,
+  CommandList_Shadcn_,
+  Drawer,
+  DrawerContent,
+  DrawerTrigger,
+  Popover_Shadcn_,
+  PopoverContent_Shadcn_,
+  PopoverTrigger_Shadcn_,
 } from 'ui'
-import { Popover_Shadcn_, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_ } from 'ui'
-import { Drawer, DrawerContent, DrawerTrigger } from 'ui'
-import { Plus } from 'lucide-react'
+
+import { useMediaQuery } from '@/hooks/use-media-query'
 
 type Status = {
   value: string
diff --git a/apps/design-system/registry/default/example/command-demo.tsx b/apps/design-system/registry/default/example/command-demo.tsx
index c758fcaef28..8589373f51d 100644
--- a/apps/design-system/registry/default/example/command-demo.tsx
+++ b/apps/design-system/registry/default/example/command-demo.tsx
@@ -1,5 +1,4 @@
 import { Calculator, Calendar, CreditCard, Settings, Smile, User } from 'lucide-react'
-
 import {
   Command_Shadcn_,
   CommandEmpty_Shadcn_,
diff --git a/apps/design-system/registry/default/example/command-dialog.tsx b/apps/design-system/registry/default/example/command-dialog.tsx
index a3989e95e62..f3211462ece 100644
--- a/apps/design-system/registry/default/example/command-dialog.tsx
+++ b/apps/design-system/registry/default/example/command-dialog.tsx
@@ -1,8 +1,7 @@
 'use client'
 
-import * as React from 'react'
 import { Calculator, Calendar, CreditCard, Settings, Smile, User } from 'lucide-react'
-
+import * as React from 'react'
 import {
   CommandDialog,
   CommandEmpty_Shadcn_,
diff --git a/apps/design-system/registry/default/example/copy-confirmations.tsx b/apps/design-system/registry/default/example/copy-confirmations.tsx
index ce9406cbfc9..a60d869ab1b 100644
--- a/apps/design-system/registry/default/example/copy-confirmations.tsx
+++ b/apps/design-system/registry/default/example/copy-confirmations.tsx
@@ -1,7 +1,7 @@
 'use client'
 
-import { Button } from 'ui'
 import { AlertTriangle } from 'lucide-react'
+import { Button } from 'ui'
 
 export default function CopyConfirmations() {
   return (
diff --git a/apps/design-system/registry/default/example/copy-empty-states.tsx b/apps/design-system/registry/default/example/copy-empty-states.tsx
index 1315f8e42b6..cf0415f5c28 100644
--- a/apps/design-system/registry/default/example/copy-empty-states.tsx
+++ b/apps/design-system/registry/default/example/copy-empty-states.tsx
@@ -1,8 +1,8 @@
 'use client'
 
+import { Key } from 'lucide-react'
 import { Button } from 'ui'
 import { EmptyStatePresentational } from 'ui-patterns'
-import { Key } from 'lucide-react'
 
 export default function CopyEmptyStates() {
   return (
diff --git a/apps/design-system/registry/default/example/copy-tooltips.tsx b/apps/design-system/registry/default/example/copy-tooltips.tsx
index 594c5622533..2e564e5c813 100644
--- a/apps/design-system/registry/default/example/copy-tooltips.tsx
+++ b/apps/design-system/registry/default/example/copy-tooltips.tsx
@@ -1,7 +1,7 @@
 'use client'
 
-import { Button, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from 'ui'
 import { Info } from 'lucide-react'
+import { Button, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from 'ui'
 
 export default function CopyTooltips() {
   return (
diff --git a/apps/design-system/registry/default/example/data-grid-demo.tsx b/apps/design-system/registry/default/example/data-grid-demo.tsx
index b2a1906e287..461d63e5406 100644
--- a/apps/design-system/registry/default/example/data-grid-demo.tsx
+++ b/apps/design-system/registry/default/example/data-grid-demo.tsx
@@ -1,6 +1,8 @@
 import { useState } from 'react'
 import DataGrid, { Column, useRowSelection } from 'react-data-grid'
+
 import 'react-data-grid/lib/styles.css'
+
 import { Checkbox_Shadcn_, cn } from 'ui'
 
 type User = {
diff --git a/apps/design-system/registry/default/example/data-grid-empty-state.tsx b/apps/design-system/registry/default/example/data-grid-empty-state.tsx
index 048385d5d12..b30460dbfe7 100644
--- a/apps/design-system/registry/default/example/data-grid-empty-state.tsx
+++ b/apps/design-system/registry/default/example/data-grid-empty-state.tsx
@@ -1,6 +1,8 @@
 import { Users } from 'lucide-react'
 import DataGrid, { Column } from 'react-data-grid'
+
 import 'react-data-grid/lib/styles.css'
+
 import { cn } from 'ui'
 
 /**
diff --git a/apps/design-system/registry/default/example/data-table-demo.tsx b/apps/design-system/registry/default/example/data-table-demo.tsx
index 926ecd3db7e..409bf184363 100644
--- a/apps/design-system/registry/default/example/data-table-demo.tsx
+++ b/apps/design-system/registry/default/example/data-table-demo.tsx
@@ -14,7 +14,6 @@ import {
 } from '@tanstack/react-table'
 import { ChevronDown, MoreVertical } from 'lucide-react'
 import * as React from 'react'
-
 import {
   Button,
   Card,
diff --git a/apps/design-system/registry/default/example/date-picker-demo.tsx b/apps/design-system/registry/default/example/date-picker-demo.tsx
index ebe91815100..841b6316fcd 100644
--- a/apps/design-system/registry/default/example/date-picker-demo.tsx
+++ b/apps/design-system/registry/default/example/date-picker-demo.tsx
@@ -3,8 +3,6 @@
 import { format } from 'date-fns'
 import { Calendar as CalendarIcon } from 'lucide-react'
 import * as React from 'react'
-
-import { cn } from '@/lib/utils'
 import {
   Button,
   Calendar,
@@ -13,6 +11,8 @@ import {
   PopoverTrigger_Shadcn_,
 } from 'ui'
 
+import { cn } from '@/lib/utils'
+
 export default function DatePickerDemo() {
   const [date, setDate] = React.useState<Date>()
 
diff --git a/apps/design-system/registry/default/example/date-picker-form.tsx b/apps/design-system/registry/default/example/date-picker-form.tsx
index 53e7ebc1293..94c59f6997e 100644
--- a/apps/design-system/registry/default/example/date-picker-form.tsx
+++ b/apps/design-system/registry/default/example/date-picker-form.tsx
@@ -5,9 +5,6 @@ import { format } from 'date-fns'
 import { CalendarIcon } from 'lucide-react'
 import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
-import { z } from 'zod'
-
-import { cn } from '@/lib/utils'
 import {
   Button,
   Calendar,
@@ -22,6 +19,9 @@ import {
   PopoverContent_Shadcn_,
   PopoverTrigger_Shadcn_,
 } from 'ui'
+import { z } from 'zod'
+
+import { cn } from '@/lib/utils'
 
 const FormSchema = z.object({
   dob: z.date({
diff --git a/apps/design-system/registry/default/example/date-picker-with-presets.tsx b/apps/design-system/registry/default/example/date-picker-with-presets.tsx
index d9ff1090e26..be271ab5fdc 100644
--- a/apps/design-system/registry/default/example/date-picker-with-presets.tsx
+++ b/apps/design-system/registry/default/example/date-picker-with-presets.tsx
@@ -3,8 +3,6 @@
 import { addDays, format } from 'date-fns'
 import { Calendar as CalendarIcon } from 'lucide-react'
 import * as React from 'react'
-
-import { cn } from '@/lib/utils'
 import {
   Button,
   Calendar,
@@ -18,6 +16,8 @@ import {
   SelectValue_Shadcn_,
 } from 'ui'
 
+import { cn } from '@/lib/utils'
+
 export default function DatePickerWithPresets() {
   const [date, setDate] = React.useState<Date>()
 
diff --git a/apps/design-system/registry/default/example/date-picker-with-range.tsx b/apps/design-system/registry/default/example/date-picker-with-range.tsx
index 9cbde727e3c..94fedd237cf 100644
--- a/apps/design-system/registry/default/example/date-picker-with-range.tsx
+++ b/apps/design-system/registry/default/example/date-picker-with-range.tsx
@@ -4,8 +4,6 @@ import { addDays, format } from 'date-fns'
 import { Calendar as CalendarIcon } from 'lucide-react'
 import * as React from 'react'
 import { DateRange } from 'react-day-picker'
-
-import { cn } from '@/lib/utils'
 import {
   Button,
   Calendar,
@@ -14,6 +12,8 @@ import {
   PopoverTrigger_Shadcn_,
 } from 'ui'
 
+import { cn } from '@/lib/utils'
+
 export default function DatePickerWithRange({ className }: React.HTMLAttributes<HTMLDivElement>) {
   const [date, setDate] = React.useState<DateRange | undefined>({
     from: new Date(2022, 0, 20),
diff --git a/apps/design-system/registry/default/example/dialog-close-button.tsx b/apps/design-system/registry/default/example/dialog-close-button.tsx
index 1194933899b..3f6ab6ef78f 100644
--- a/apps/design-system/registry/default/example/dialog-close-button.tsx
+++ b/apps/design-system/registry/default/example/dialog-close-button.tsx
@@ -1,5 +1,4 @@
 import { Copy } from 'lucide-react'
-
 import {
   Button,
   Dialog,
diff --git a/apps/design-system/registry/default/example/drawer-demo.tsx b/apps/design-system/registry/default/example/drawer-demo.tsx
index 84be48ef2c2..c1fd6d08a64 100644
--- a/apps/design-system/registry/default/example/drawer-demo.tsx
+++ b/apps/design-system/registry/default/example/drawer-demo.tsx
@@ -1,11 +1,10 @@
 'use client'
 
-import * as React from 'react'
 import { Minus, Plus } from 'lucide-react'
+import * as React from 'react'
 import { Bar, BarChart, ResponsiveContainer } from 'recharts'
-
-import { Button } from 'ui'
 import {
+  Button,
   Drawer,
   DrawerClose,
   DrawerContent,
diff --git a/apps/design-system/registry/default/example/drawer-dialog.tsx b/apps/design-system/registry/default/example/drawer-dialog.tsx
index 599cd5bd8b0..86ff1e05a95 100644
--- a/apps/design-system/registry/default/example/drawer-dialog.tsx
+++ b/apps/design-system/registry/default/example/drawer-dialog.tsx
@@ -1,9 +1,6 @@
 'use client'
 
 import * as React from 'react'
-
-import { useMediaQuery } from '@/hooks/use-media-query'
-import { cn } from '@/lib/utils'
 import {
   Button,
   Dialog,
@@ -24,6 +21,9 @@ import {
   Label_Shadcn_,
 } from 'ui'
 
+import { useMediaQuery } from '@/hooks/use-media-query'
+import { cn } from '@/lib/utils'
+
 export default function DrawerDialogDemo() {
   const [open, setOpen] = React.useState(false)
   const isDesktop = useMediaQuery('(min-width: 768px)')
diff --git a/apps/design-system/registry/default/example/dropdown-menu-checkboxes.tsx b/apps/design-system/registry/default/example/dropdown-menu-checkboxes.tsx
index 788b3de460b..900ebe6903b 100644
--- a/apps/design-system/registry/default/example/dropdown-menu-checkboxes.tsx
+++ b/apps/design-system/registry/default/example/dropdown-menu-checkboxes.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import * as React from 'react'
-
 import {
   Button,
   DropdownMenu,
diff --git a/apps/design-system/registry/default/example/dropdown-menu-demo.tsx b/apps/design-system/registry/default/example/dropdown-menu-demo.tsx
index 4be7a68a5e8..56829f81456 100644
--- a/apps/design-system/registry/default/example/dropdown-menu-demo.tsx
+++ b/apps/design-system/registry/default/example/dropdown-menu-demo.tsx
@@ -14,9 +14,8 @@ import {
   UserPlus,
   Users,
 } from 'lucide-react'
-
-import { Button } from 'ui'
 import {
+  Button,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuGroup,
diff --git a/apps/design-system/registry/default/example/dropdown-menu-radio-group.tsx b/apps/design-system/registry/default/example/dropdown-menu-radio-group.tsx
index 7f339382b00..c9b7ab86b89 100644
--- a/apps/design-system/registry/default/example/dropdown-menu-radio-group.tsx
+++ b/apps/design-system/registry/default/example/dropdown-menu-radio-group.tsx
@@ -1,9 +1,8 @@
 'use client'
 
 import * as React from 'react'
-
-import { Button } from 'ui'
 import {
+  Button,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuLabel,
diff --git a/apps/design-system/registry/default/example/empty-state-presentational-buttons.tsx b/apps/design-system/registry/default/example/empty-state-presentational-buttons.tsx
index 45eef4ae0a7..e69553a9e26 100644
--- a/apps/design-system/registry/default/example/empty-state-presentational-buttons.tsx
+++ b/apps/design-system/registry/default/example/empty-state-presentational-buttons.tsx
@@ -1,7 +1,6 @@
 import { Plus } from 'lucide-react'
 import { Button } from 'ui'
 import { EmptyStatePresentational } from 'ui-patterns'
-
 import {
   PageSection,
   PageSectionAside,
diff --git a/apps/design-system/registry/default/example/field-choice-card.tsx b/apps/design-system/registry/default/example/field-choice-card.tsx
index c4b0d6dd8c5..26cf6af26ed 100644
--- a/apps/design-system/registry/default/example/field-choice-card.tsx
+++ b/apps/design-system/registry/default/example/field-choice-card.tsx
@@ -1,10 +1,10 @@
 import {
-  FieldSet,
-  FieldLabel,
-  FieldDescription,
   Field,
   FieldContent,
+  FieldDescription,
   FieldGroup,
+  FieldLabel,
+  FieldSet,
   FieldTitle,
 } from 'ui/src/components/shadcn/ui/field'
 import { RadioGroup, RadioGroupItem } from 'ui/src/components/shadcn/ui/radio-group'
diff --git a/apps/design-system/registry/default/example/field-demo.tsx b/apps/design-system/registry/default/example/field-demo.tsx
index c97bfbc677b..bf8d426b221 100644
--- a/apps/design-system/registry/default/example/field-demo.tsx
+++ b/apps/design-system/registry/default/example/field-demo.tsx
@@ -1,19 +1,19 @@
-import { Input, Checkbox_Shadcn_ as Checkbox, Textarea, Button } from 'ui'
+import { Button, Checkbox_Shadcn_ as Checkbox, Input, Textarea } from 'ui'
 import {
-  FieldSet,
-  FieldLegend,
-  FieldDescription,
   Field,
-  FieldLabel,
+  FieldDescription,
   FieldGroup,
+  FieldLabel,
+  FieldLegend,
   FieldSeparator,
+  FieldSet,
 } from 'ui/src/components/shadcn/ui/field'
 import {
   Select,
-  SelectTrigger,
-  SelectValue,
   SelectContent,
   SelectItem,
+  SelectTrigger,
+  SelectValue,
 } from 'ui/src/components/shadcn/ui/select'
 
 export default function FieldDemo() {
diff --git a/apps/design-system/registry/default/example/field-fieldset.tsx b/apps/design-system/registry/default/example/field-fieldset.tsx
index 6303ab2ff12..a91c1d4d86e 100644
--- a/apps/design-system/registry/default/example/field-fieldset.tsx
+++ b/apps/design-system/registry/default/example/field-fieldset.tsx
@@ -1,11 +1,11 @@
 import { Input } from 'ui'
 import {
-  FieldSet,
-  FieldLegend,
-  FieldDescription,
   Field,
-  FieldLabel,
+  FieldDescription,
   FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSet,
 } from 'ui/src/components/shadcn/ui/field'
 
 export default function FieldFieldset() {
diff --git a/apps/design-system/registry/default/example/field-group.tsx b/apps/design-system/registry/default/example/field-group.tsx
index 7ead055fc7b..082bb0fbaa9 100644
--- a/apps/design-system/registry/default/example/field-group.tsx
+++ b/apps/design-system/registry/default/example/field-group.tsx
@@ -1,11 +1,11 @@
 import { Checkbox_Shadcn_ as Checkbox } from 'ui'
 import {
-  FieldGroup,
-  FieldSet,
-  FieldLabel,
-  FieldDescription,
   Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
   FieldSeparator,
+  FieldSet,
 } from 'ui/src/components/shadcn/ui/field'
 
 export default function FieldGroupExample() {
diff --git a/apps/design-system/registry/default/example/field-hear.tsx b/apps/design-system/registry/default/example/field-hear.tsx
index ff1678d48c7..be4014b4a98 100644
--- a/apps/design-system/registry/default/example/field-hear.tsx
+++ b/apps/design-system/registry/default/example/field-hear.tsx
@@ -1,11 +1,11 @@
 import { Card, CardContent, Checkbox_Shadcn_ as Checkbox } from 'ui'
 import {
-  FieldSet,
-  FieldLegend,
-  FieldDescription,
-  FieldLabel,
-  FieldGroup,
   Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSet,
   FieldTitle,
 } from 'ui/src/components/shadcn/ui/field'
 
diff --git a/apps/design-system/registry/default/example/field-input.tsx b/apps/design-system/registry/default/example/field-input.tsx
index 78753acfe8c..17eee8e9b2b 100644
--- a/apps/design-system/registry/default/example/field-input.tsx
+++ b/apps/design-system/registry/default/example/field-input.tsx
@@ -1,10 +1,10 @@
 import { Input } from 'ui'
 import {
-  FieldSet,
   Field,
-  FieldLabel,
   FieldDescription,
   FieldGroup,
+  FieldLabel,
+  FieldSet,
 } from 'ui/src/components/shadcn/ui/field'
 
 export default function FieldInput() {
diff --git a/apps/design-system/registry/default/example/field-radio.tsx b/apps/design-system/registry/default/example/field-radio.tsx
index 2c1c9a76ff1..59d703a015d 100644
--- a/apps/design-system/registry/default/example/field-radio.tsx
+++ b/apps/design-system/registry/default/example/field-radio.tsx
@@ -1,4 +1,4 @@
-import { FieldSet, FieldLabel, FieldDescription, Field } from 'ui/src/components/shadcn/ui/field'
+import { Field, FieldDescription, FieldLabel, FieldSet } from 'ui/src/components/shadcn/ui/field'
 import { RadioGroup, RadioGroupItem } from 'ui/src/components/shadcn/ui/radio-group'
 
 export default function FieldRadio() {
diff --git a/apps/design-system/registry/default/example/field-responsive.tsx b/apps/design-system/registry/default/example/field-responsive.tsx
index 382b8773212..1f00b1a2835 100644
--- a/apps/design-system/registry/default/example/field-responsive.tsx
+++ b/apps/design-system/registry/default/example/field-responsive.tsx
@@ -1,13 +1,13 @@
-import { Input, Textarea, Button } from 'ui'
+import { Button, Input, Textarea } from 'ui'
 import {
-  FieldSet,
-  FieldLegend,
-  FieldDescription,
-  FieldSeparator,
   Field,
   FieldContent,
-  FieldLabel,
+  FieldDescription,
   FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
 } from 'ui/src/components/shadcn/ui/field'
 
 export default function FieldResponsive() {
diff --git a/apps/design-system/registry/default/example/field-select.tsx b/apps/design-system/registry/default/example/field-select.tsx
index 39e2c177cf2..be6996b554c 100644
--- a/apps/design-system/registry/default/example/field-select.tsx
+++ b/apps/design-system/registry/default/example/field-select.tsx
@@ -1,10 +1,10 @@
-import { Field, FieldLabel, FieldDescription } from 'ui/src/components/shadcn/ui/field'
+import { Field, FieldDescription, FieldLabel } from 'ui/src/components/shadcn/ui/field'
 import {
   Select,
-  SelectTrigger,
-  SelectValue,
   SelectContent,
   SelectItem,
+  SelectTrigger,
+  SelectValue,
 } from 'ui/src/components/shadcn/ui/select'
 
 export default function FieldSelect() {
diff --git a/apps/design-system/registry/default/example/field-slider.tsx b/apps/design-system/registry/default/example/field-slider.tsx
index 05b8d95fe8b..6f7fb54d7ab 100644
--- a/apps/design-system/registry/default/example/field-slider.tsx
+++ b/apps/design-system/registry/default/example/field-slider.tsx
@@ -2,7 +2,7 @@
 
 import { useState } from 'react'
 import { Slider } from 'ui'
-import { Field, FieldTitle, FieldDescription } from 'ui/src/components/shadcn/ui/field'
+import { Field, FieldDescription, FieldTitle } from 'ui/src/components/shadcn/ui/field'
 
 export default function FieldSlider() {
   const [value, setValue] = useState([200, 800])
diff --git a/apps/design-system/registry/default/example/field-switch.tsx b/apps/design-system/registry/default/example/field-switch.tsx
index 6ebd246f922..ba08cec8f4d 100644
--- a/apps/design-system/registry/default/example/field-switch.tsx
+++ b/apps/design-system/registry/default/example/field-switch.tsx
@@ -2,8 +2,8 @@ import { Switch } from 'ui'
 import {
   Field,
   FieldContent,
-  FieldLabel,
   FieldDescription,
+  FieldLabel,
 } from 'ui/src/components/shadcn/ui/field'
 
 export default function FieldSwitch() {
diff --git a/apps/design-system/registry/default/example/field-textarea.tsx b/apps/design-system/registry/default/example/field-textarea.tsx
index 97ded16aebe..91980c1d3fd 100644
--- a/apps/design-system/registry/default/example/field-textarea.tsx
+++ b/apps/design-system/registry/default/example/field-textarea.tsx
@@ -1,10 +1,10 @@
 import { Textarea } from 'ui'
 import {
-  FieldSet,
   Field,
-  FieldLabel,
   FieldDescription,
   FieldGroup,
+  FieldLabel,
+  FieldSet,
 } from 'ui/src/components/shadcn/ui/field'
 
 export default function FieldTextarea() {
diff --git a/apps/design-system/registry/default/example/form-item-layout-after-label.tsx b/apps/design-system/registry/default/example/form-item-layout-after-label.tsx
index 2bd5cae8e89..f0993f2cc60 100644
--- a/apps/design-system/registry/default/example/form-item-layout-after-label.tsx
+++ b/apps/design-system/registry/default/example/form-item-layout-after-label.tsx
@@ -2,8 +2,8 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
 import { Button, Form_Shadcn_, FormControl_Shadcn_, FormField_Shadcn_, Switch } from 'ui'
 import { Input } from 'ui-patterns/DataInputs/Input'
-import { InfoTooltip } from 'ui-patterns/info-tooltip'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
+import { InfoTooltip } from 'ui-patterns/info-tooltip'
 import { z } from 'zod'
 
 const FormSchema = z.object({
diff --git a/apps/design-system/registry/default/example/form-item-layout-before-label.tsx b/apps/design-system/registry/default/example/form-item-layout-before-label.tsx
index 84afb3a31c6..ee4487f147c 100644
--- a/apps/design-system/registry/default/example/form-item-layout-before-label.tsx
+++ b/apps/design-system/registry/default/example/form-item-layout-before-label.tsx
@@ -2,8 +2,8 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
 import { Button, Form_Shadcn_, FormControl_Shadcn_, FormField_Shadcn_, Switch } from 'ui'
 import { Input } from 'ui-patterns/DataInputs/Input'
-import { InfoTooltip } from 'ui-patterns/info-tooltip'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
+import { InfoTooltip } from 'ui-patterns/info-tooltip'
 import { z } from 'zod'
 
 const FormSchema = z.object({
diff --git a/apps/design-system/registry/default/example/form-item-layout-demo.tsx b/apps/design-system/registry/default/example/form-item-layout-demo.tsx
index 4d31cc3df60..ba35f52e28b 100644
--- a/apps/design-system/registry/default/example/form-item-layout-demo.tsx
+++ b/apps/design-system/registry/default/example/form-item-layout-demo.tsx
@@ -1,9 +1,9 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
 import { Button, Form_Shadcn_, FormControl_Shadcn_, FormField_Shadcn_ } from 'ui'
-import { z } from 'zod'
 import { Input } from 'ui-patterns/DataInputs/Input'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
+import { z } from 'zod'
 
 const formSchema = z.object({
   username: z.string().min(2, {
diff --git a/apps/design-system/registry/default/example/form-item-layout-with-horizontal.tsx b/apps/design-system/registry/default/example/form-item-layout-with-horizontal.tsx
index 7b0a0a53b54..9d0471d8b86 100644
--- a/apps/design-system/registry/default/example/form-item-layout-with-horizontal.tsx
+++ b/apps/design-system/registry/default/example/form-item-layout-with-horizontal.tsx
@@ -1,9 +1,9 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
 import { Button, Form_Shadcn_, FormControl_Shadcn_, FormField_Shadcn_, Separator } from 'ui'
-import { z } from 'zod'
 import { Input } from 'ui-patterns/DataInputs/Input'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
+import { z } from 'zod'
 
 const formSchema = z.object({
   username: z.string().min(2, {
diff --git a/apps/design-system/registry/default/example/form-patterns-pagelayout.tsx b/apps/design-system/registry/default/example/form-patterns-pagelayout.tsx
index 1dead4a7f73..078a36d49af 100644
--- a/apps/design-system/registry/default/example/form-patterns-pagelayout.tsx
+++ b/apps/design-system/registry/default/example/form-patterns-pagelayout.tsx
@@ -3,8 +3,6 @@ import { format } from 'date-fns'
 import { CalendarIcon, ExternalLink, Plus, Trash2, Upload } from 'lucide-react'
 import { useRef, useState } from 'react'
 import { useFieldArray, useForm } from 'react-hook-form'
-import * as z from 'zod'
-
 import {
   Button,
   Calendar,
@@ -12,14 +10,14 @@ import {
   CardContent,
   CardFooter,
   Checkbox_Shadcn_,
+  Form_Shadcn_,
   FormControl_Shadcn_,
   FormField_Shadcn_,
-  Form_Shadcn_,
   Input_Shadcn_,
-  PrePostTab,
   Popover_Shadcn_,
   PopoverContent_Shadcn_,
   PopoverTrigger_Shadcn_,
+  PrePostTab,
   RadioGroupStacked,
   RadioGroupStackedItem,
   Select_Shadcn_,
@@ -30,8 +28,8 @@ import {
   Switch,
   Textarea,
 } from 'ui'
-import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import { Input } from 'ui-patterns/DataInputs/Input'
+import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import {
   MultiSelector,
   MultiSelectorContent,
@@ -46,6 +44,7 @@ import {
   PageSectionSummary,
   PageSectionTitle,
 } from 'ui-patterns/PageSection'
+import * as z from 'zod'
 
 const formSchema = z.object({
   name: z.string().min(1, 'Name is required'),
diff --git a/apps/design-system/registry/default/example/form-patterns-sidepanel.tsx b/apps/design-system/registry/default/example/form-patterns-sidepanel.tsx
index c1bc84f8790..13e57b01167 100644
--- a/apps/design-system/registry/default/example/form-patterns-sidepanel.tsx
+++ b/apps/design-system/registry/default/example/form-patterns-sidepanel.tsx
@@ -3,19 +3,18 @@ import { format } from 'date-fns'
 import { CalendarIcon, ExternalLink, Plus, Trash2, Upload } from 'lucide-react'
 import { useRef, useState } from 'react'
 import { useFieldArray, useForm } from 'react-hook-form'
-import * as z from 'zod'
-
 import {
   Button,
   Calendar,
   Checkbox_Shadcn_,
+  Form_Shadcn_,
   FormControl_Shadcn_,
   FormField_Shadcn_,
-  Form_Shadcn_,
   Input_Shadcn_,
   Popover_Shadcn_,
   PopoverContent_Shadcn_,
   PopoverTrigger_Shadcn_,
+  PrePostTab,
   RadioGroupStacked,
   RadioGroupStackedItem,
   Select_Shadcn_,
@@ -32,10 +31,9 @@ import {
   SheetTitle,
   Switch,
   Textarea,
-  PrePostTab,
 } from 'ui'
-import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import { Input } from 'ui-patterns/DataInputs/Input'
+import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import {
   MultiSelector,
   MultiSelectorContent,
@@ -43,6 +41,7 @@ import {
   MultiSelectorList,
   MultiSelectorTrigger,
 } from 'ui-patterns/multi-select'
+import * as z from 'zod'
 
 const formSchema = z.object({
   name: z.string().min(1, 'Name is required'),
diff --git a/apps/design-system/registry/default/example/hover-card-demo.tsx b/apps/design-system/registry/default/example/hover-card-demo.tsx
index 95ae07e2f43..4ca109b84af 100644
--- a/apps/design-system/registry/default/example/hover-card-demo.tsx
+++ b/apps/design-system/registry/default/example/hover-card-demo.tsx
@@ -1,8 +1,13 @@
 import { CalendarDays } from 'lucide-react'
-
-import { Avatar, AvatarFallback, AvatarImage } from 'ui'
-import { Button } from 'ui'
-import { HoverCard_Shadcn_, HoverCardContent_Shadcn_, HoverCardTrigger_Shadcn_ } from 'ui'
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Button,
+  HoverCard_Shadcn_,
+  HoverCardContent_Shadcn_,
+  HoverCardTrigger_Shadcn_,
+} from 'ui'
 
 export default function HoverCardDemo() {
   return (
diff --git a/apps/design-system/registry/default/example/inner-side-menu-demo.tsx b/apps/design-system/registry/default/example/inner-side-menu-demo.tsx
index f8a12c28e29..f14e86cfadc 100644
--- a/apps/design-system/registry/default/example/inner-side-menu-demo.tsx
+++ b/apps/design-system/registry/default/example/inner-side-menu-demo.tsx
@@ -2,8 +2,8 @@ import React from 'react'
 import { Card } from 'ui'
 import {
   InnerSideMenuCollapsible,
-  InnerSideMenuCollapsibleTrigger,
   InnerSideMenuCollapsibleContent,
+  InnerSideMenuCollapsibleTrigger,
   InnerSideMenuItem,
   InnerSideMenuSeparator,
 } from 'ui-patterns/InnerSideMenu'
diff --git a/apps/design-system/registry/default/example/inner-side-menu-empty.tsx b/apps/design-system/registry/default/example/inner-side-menu-empty.tsx
index b9abf8bf2d1..3333b5e6555 100644
--- a/apps/design-system/registry/default/example/inner-side-menu-empty.tsx
+++ b/apps/design-system/registry/default/example/inner-side-menu-empty.tsx
@@ -1,15 +1,15 @@
+import { Heart, Pointer } from 'lucide-react'
 import React from 'react'
+import { Button, Card } from 'ui'
 import {
-  InnerSideMenuCollapsible,
-  InnerSideMenuCollapsibleTrigger,
-  InnerSideMenuCollapsibleContent,
-  InnerSideBarShimmeringLoaders,
   InnerSideBarEmptyPanel,
+  InnerSideBarShimmeringLoaders,
+  InnerSideMenuCollapsible,
+  InnerSideMenuCollapsibleContent,
+  InnerSideMenuCollapsibleTrigger,
   InnerSideMenuItem,
   InnerSideMenuSeparator,
 } from 'ui-patterns/InnerSideMenu'
-import { Button, Card } from 'ui'
-import { Heart, Pointer } from 'lucide-react'
 
 export default function InnerSideMenuEmpty() {
   const [isLoading, setIsLoading] = React.useState(true)
diff --git a/apps/design-system/registry/default/example/inner-side-menu-multiple-sections.tsx b/apps/design-system/registry/default/example/inner-side-menu-multiple-sections.tsx
index c31c62c0b78..7fd6d9c27e8 100644
--- a/apps/design-system/registry/default/example/inner-side-menu-multiple-sections.tsx
+++ b/apps/design-system/registry/default/example/inner-side-menu-multiple-sections.tsx
@@ -1,8 +1,8 @@
 import React from 'react'
 import {
   InnerSideMenuCollapsible,
-  InnerSideMenuCollapsibleTrigger,
   InnerSideMenuCollapsibleContent,
+  InnerSideMenuCollapsibleTrigger,
   InnerSideMenuItem,
   InnerSideMenuSeparator,
 } from 'ui-patterns/InnerSideMenu'
diff --git a/apps/design-system/registry/default/example/inner-side-menu-static-titles.tsx b/apps/design-system/registry/default/example/inner-side-menu-static-titles.tsx
index 12df6a102e2..c3c6cb321bf 100644
--- a/apps/design-system/registry/default/example/inner-side-menu-static-titles.tsx
+++ b/apps/design-system/registry/default/example/inner-side-menu-static-titles.tsx
@@ -1,12 +1,12 @@
 import React from 'react'
 import { Card } from 'ui'
 import {
+  InnerSideBarTitle,
   InnerSideMenuCollapsible,
-  InnerSideMenuCollapsibleTrigger,
   InnerSideMenuCollapsibleContent,
+  InnerSideMenuCollapsibleTrigger,
   InnerSideMenuItem,
   InnerSideMenuSeparator,
-  InnerSideBarTitle,
 } from 'ui-patterns/InnerSideMenu'
 
 export default function InnerSideMenuBasic() {
diff --git a/apps/design-system/registry/default/example/inner-side-menu-with-search.tsx b/apps/design-system/registry/default/example/inner-side-menu-with-search.tsx
index 1fdbac66c4f..62612d20ff5 100644
--- a/apps/design-system/registry/default/example/inner-side-menu-with-search.tsx
+++ b/apps/design-system/registry/default/example/inner-side-menu-with-search.tsx
@@ -1,15 +1,15 @@
-import React, { useState, useMemo } from 'react'
+import React, { useMemo, useState } from 'react'
 import { Card } from 'ui'
 import {
-  InnerSideMenuCollapsible,
-  InnerSideMenuCollapsibleTrigger,
-  InnerSideMenuCollapsibleContent,
-  InnerSideMenuItem,
+  InnerSideBarEmptyPanel,
   InnerSideBarFilters,
   InnerSideBarFilterSearchInput,
   InnerSideBarFilterSortDropdown,
   InnerSideBarFilterSortDropdownItem,
-  InnerSideBarEmptyPanel,
+  InnerSideMenuCollapsible,
+  InnerSideMenuCollapsibleContent,
+  InnerSideMenuCollapsibleTrigger,
+  InnerSideMenuItem,
 } from 'ui-patterns/InnerSideMenu'
 
 export default function InnerSideMenuWithSearch() {
diff --git a/apps/design-system/registry/default/example/input-form.tsx b/apps/design-system/registry/default/example/input-form.tsx
index ea9db189256..f3619b6dc22 100644
--- a/apps/design-system/registry/default/example/input-form.tsx
+++ b/apps/design-system/registry/default/example/input-form.tsx
@@ -3,8 +3,6 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
-import { z } from 'zod'
-
 import {
   Button,
   Form_Shadcn_,
@@ -16,6 +14,7 @@ import {
   FormMessage_Shadcn_,
   Input,
 } from 'ui'
+import { z } from 'zod'
 
 const FormSchema = z.object({
   username: z.string().min(2, {
diff --git a/apps/design-system/registry/default/example/input-otp-controlled.tsx b/apps/design-system/registry/default/example/input-otp-controlled.tsx
index f6d9a6c5572..423dbe001bc 100644
--- a/apps/design-system/registry/default/example/input-otp-controlled.tsx
+++ b/apps/design-system/registry/default/example/input-otp-controlled.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import * as React from 'react'
-
 import { InputOTP, InputOTPGroup, InputOTPSlot } from 'ui'
 
 export default function InputOTPControlled() {
diff --git a/apps/design-system/registry/default/example/input-otp-form.tsx b/apps/design-system/registry/default/example/input-otp-form.tsx
index bccd4423c69..0adc0dbe293 100644
--- a/apps/design-system/registry/default/example/input-otp-form.tsx
+++ b/apps/design-system/registry/default/example/input-otp-form.tsx
@@ -3,8 +3,6 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
-import { z } from 'zod'
-
 import {
   Button,
   Form_Shadcn_,
@@ -18,6 +16,7 @@ import {
   InputOTPGroup,
   InputOTPSlot,
 } from 'ui'
+import { z } from 'zod'
 
 const FormSchema = z.object({
   pin: z.string().min(6, {
diff --git a/apps/design-system/registry/default/example/input-otp-separator.tsx b/apps/design-system/registry/default/example/input-otp-separator.tsx
index a6b162d8cf5..ca2bd3b1689 100644
--- a/apps/design-system/registry/default/example/input-otp-separator.tsx
+++ b/apps/design-system/registry/default/example/input-otp-separator.tsx
@@ -1,5 +1,4 @@
 import React from 'react'
-
 import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from 'ui'
 
 export default function InputOTPWithSeparator() {
diff --git a/apps/design-system/registry/default/example/input-with-button.tsx b/apps/design-system/registry/default/example/input-with-button.tsx
index ba7f3df71f0..376eca1de3f 100644
--- a/apps/design-system/registry/default/example/input-with-button.tsx
+++ b/apps/design-system/registry/default/example/input-with-button.tsx
@@ -1,5 +1,4 @@
-import { Button } from 'ui'
-import { Input_Shadcn_ } from 'ui'
+import { Button, Input_Shadcn_ } from 'ui'
 
 export default function InputWithButton() {
   return (
diff --git a/apps/design-system/registry/default/example/metric-card-minimal-horizontal.tsx b/apps/design-system/registry/default/example/metric-card-minimal-horizontal.tsx
index cbb1452fcd5..d8636bcf2d4 100644
--- a/apps/design-system/registry/default/example/metric-card-minimal-horizontal.tsx
+++ b/apps/design-system/registry/default/example/metric-card-minimal-horizontal.tsx
@@ -3,11 +3,11 @@
 import { useEffect, useState } from 'react'
 import {
   MetricCard,
+  MetricCardContent,
+  MetricCardDifferential,
   MetricCardHeader,
   MetricCardLabel,
-  MetricCardContent,
   MetricCardValue,
-  MetricCardDifferential,
 } from 'ui-patterns/MetricCard'
 
 export default function MetricsCardDemo() {
diff --git a/apps/design-system/registry/default/example/metric-card-minimal.tsx b/apps/design-system/registry/default/example/metric-card-minimal.tsx
index 0d38fb9ae94..3706687cbd4 100644
--- a/apps/design-system/registry/default/example/metric-card-minimal.tsx
+++ b/apps/design-system/registry/default/example/metric-card-minimal.tsx
@@ -3,11 +3,11 @@
 import { useEffect, useState } from 'react'
 import {
   MetricCard,
+  MetricCardContent,
+  MetricCardDifferential,
   MetricCardHeader,
   MetricCardLabel,
-  MetricCardContent,
   MetricCardValue,
-  MetricCardDifferential,
 } from 'ui-patterns/MetricCard'
 
 export default function MetricsCardDemo() {
diff --git a/apps/design-system/registry/default/example/metric-card-with-icon-link-tooltip.tsx b/apps/design-system/registry/default/example/metric-card-with-icon-link-tooltip.tsx
index 072db7c70bd..8aee8b5562c 100644
--- a/apps/design-system/registry/default/example/metric-card-with-icon-link-tooltip.tsx
+++ b/apps/design-system/registry/default/example/metric-card-with-icon-link-tooltip.tsx
@@ -1,17 +1,17 @@
 'use client'
 
+import { User2 } from 'lucide-react'
 import { useEffect, useState } from 'react'
 import {
   MetricCard,
+  MetricCardContent,
+  MetricCardDifferential,
   MetricCardHeader,
   MetricCardIcon,
   MetricCardLabel,
-  MetricCardContent,
-  MetricCardValue,
-  MetricCardDifferential,
   MetricCardSparkline,
+  MetricCardValue,
 } from 'ui-patterns/MetricCard'
-import { User2 } from 'lucide-react'
 
 export default function MetricsCardDemo() {
   const [data, setData] = useState<Array<{ value: number; timestamp: string }>>([])
diff --git a/apps/design-system/registry/default/example/metric-card.tsx b/apps/design-system/registry/default/example/metric-card.tsx
index fca2d8f7818..cab24ca5dd1 100644
--- a/apps/design-system/registry/default/example/metric-card.tsx
+++ b/apps/design-system/registry/default/example/metric-card.tsx
@@ -3,12 +3,12 @@
 import { useEffect, useState } from 'react'
 import {
   MetricCard,
+  MetricCardContent,
+  MetricCardDifferential,
   MetricCardHeader,
   MetricCardLabel,
-  MetricCardContent,
-  MetricCardValue,
-  MetricCardDifferential,
   MetricCardSparkline,
+  MetricCardValue,
 } from 'ui-patterns/MetricCard'
 
 export default function MetricsCardDemo() {
diff --git a/apps/design-system/registry/default/example/mode-toggle.tsx b/apps/design-system/registry/default/example/mode-toggle.tsx
index fa179ce6dda..1cd699891d4 100644
--- a/apps/design-system/registry/default/example/mode-toggle.tsx
+++ b/apps/design-system/registry/default/example/mode-toggle.tsx
@@ -1,11 +1,15 @@
 'use client'
 
-import * as React from 'react'
 import { Moon, Sun } from 'lucide-react'
 import { useTheme } from 'next-themes'
-
-import { Button } from 'ui'
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from 'ui'
+import * as React from 'react'
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from 'ui'
 
 export default function ModeToggle() {
   const { setTheme } = useTheme()
diff --git a/apps/design-system/registry/default/example/nav-menu-icons.tsx b/apps/design-system/registry/default/example/nav-menu-icons.tsx
index 86ef4549ac4..82717f9d481 100644
--- a/apps/design-system/registry/default/example/nav-menu-icons.tsx
+++ b/apps/design-system/registry/default/example/nav-menu-icons.tsx
@@ -1,5 +1,5 @@
+import { ArchiveIcon, SettingsIcon, ShieldIcon } from 'lucide-react'
 import Link from 'next/link'
-import { ArchiveIcon, ShieldIcon, SettingsIcon } from 'lucide-react'
 import { Badge, NavMenu, NavMenuItem } from 'ui'
 
 export default function NavMenuWithIcons() {
diff --git a/apps/design-system/registry/default/example/navigation-menu-demo.tsx b/apps/design-system/registry/default/example/navigation-menu-demo.tsx
index 5d0ceb4bdae..eedae42b073 100644
--- a/apps/design-system/registry/default/example/navigation-menu-demo.tsx
+++ b/apps/design-system/registry/default/example/navigation-menu-demo.tsx
@@ -1,10 +1,10 @@
 'use client'
 
-import * as React from 'react'
 import Link from 'next/link'
-
-import { buttonVariants, cn } from 'ui'
+import * as React from 'react'
 import {
+  buttonVariants,
+  cn,
   NavigationMenu,
   NavigationMenuContent,
   NavigationMenuItem,
diff --git a/apps/design-system/registry/default/example/navigation-menu-responsive.tsx b/apps/design-system/registry/default/example/navigation-menu-responsive.tsx
index 4d56c2d5a50..317d478ebdd 100644
--- a/apps/design-system/registry/default/example/navigation-menu-responsive.tsx
+++ b/apps/design-system/registry/default/example/navigation-menu-responsive.tsx
@@ -1,11 +1,11 @@
 'use client'
 
-import * as React from 'react'
 import Link from 'next/link'
-
-import { NavigationMenuViewport, ScrollArea, ScrollBar, buttonVariants, cn } from 'ui'
+import * as React from 'react'
 // import { Icons } from '@/components/icons'
 import {
+  buttonVariants,
+  cn,
   NavigationMenu,
   NavigationMenuContent,
   NavigationMenuItem,
@@ -13,6 +13,9 @@ import {
   NavigationMenuList,
   NavigationMenuTrigger,
   navigationMenuTriggerStyle,
+  NavigationMenuViewport,
+  ScrollArea,
+  ScrollBar,
 } from 'ui'
 
 const components: { title: string; href: string; description: string }[] = [
diff --git a/apps/design-system/registry/default/example/page-layout-list-simple.tsx b/apps/design-system/registry/default/example/page-layout-list-simple.tsx
index 6cac16a922b..ed40901bac0 100644
--- a/apps/design-system/registry/default/example/page-layout-list-simple.tsx
+++ b/apps/design-system/registry/default/example/page-layout-list-simple.tsx
@@ -1,13 +1,3 @@
-import { PageContainer } from 'ui-patterns/PageContainer'
-import {
-  PageHeader,
-  PageHeaderMeta,
-  PageHeaderSummary,
-  PageHeaderTitle,
-  PageHeaderDescription,
-  PageHeaderAside,
-} from 'ui-patterns/PageHeader'
-import { PageSection, PageSectionContent } from 'ui-patterns/PageSection'
 import {
   Button,
   Card,
@@ -23,6 +13,16 @@ import {
   TableHeader,
   TableRow,
 } from 'ui'
+import { PageContainer } from 'ui-patterns/PageContainer'
+import {
+  PageHeader,
+  PageHeaderAside,
+  PageHeaderDescription,
+  PageHeaderMeta,
+  PageHeaderSummary,
+  PageHeaderTitle,
+} from 'ui-patterns/PageHeader'
+import { PageSection, PageSectionContent } from 'ui-patterns/PageSection'
 
 export default function PageLayoutListSimple() {
   const items = [
diff --git a/apps/design-system/registry/default/example/page-layout-settings.tsx b/apps/design-system/registry/default/example/page-layout-settings.tsx
index 779035d590a..79c4c46e348 100644
--- a/apps/design-system/registry/default/example/page-layout-settings.tsx
+++ b/apps/design-system/registry/default/example/page-layout-settings.tsx
@@ -5,9 +5,9 @@ import {
   Card,
   CardContent,
   CardFooter,
+  Form_Shadcn_,
   FormControl_Shadcn_,
   FormField_Shadcn_,
-  Form_Shadcn_,
   Input_Shadcn_,
   PrePostTab,
   Switch,
diff --git a/apps/design-system/registry/default/example/page-section-demo.tsx b/apps/design-system/registry/default/example/page-section-demo.tsx
index 7b93892deff..ec9e9a71a22 100644
--- a/apps/design-system/registry/default/example/page-section-demo.tsx
+++ b/apps/design-system/registry/default/example/page-section-demo.tsx
@@ -1,13 +1,13 @@
+import { Button, Card, CardContent } from 'ui'
 import {
   PageSection,
+  PageSectionAside,
+  PageSectionContent,
+  PageSectionDescription,
   PageSectionMeta,
   PageSectionSummary,
   PageSectionTitle,
-  PageSectionDescription,
-  PageSectionAside,
-  PageSectionContent,
 } from 'ui-patterns/PageSection'
-import { Button, Card, CardContent } from 'ui'
 
 export default function PageSectionDemo() {
   return (
diff --git a/apps/design-system/registry/default/example/page-section-horizontal.tsx b/apps/design-system/registry/default/example/page-section-horizontal.tsx
index 43a2e850956..caa9107dce0 100644
--- a/apps/design-system/registry/default/example/page-section-horizontal.tsx
+++ b/apps/design-system/registry/default/example/page-section-horizontal.tsx
@@ -1,12 +1,12 @@
+import { Card, CardContent } from 'ui'
 import {
   PageSection,
+  PageSectionContent,
+  PageSectionDescription,
   PageSectionMeta,
   PageSectionSummary,
   PageSectionTitle,
-  PageSectionDescription,
-  PageSectionContent,
 } from 'ui-patterns/PageSection'
-import { Card, CardContent } from 'ui'
 
 export default function PageSectionHorizontal() {
   return (
diff --git a/apps/design-system/registry/default/example/page-section-with-aside.tsx b/apps/design-system/registry/default/example/page-section-with-aside.tsx
index 0ce3c8fb7c0..98e32f8ac9c 100644
--- a/apps/design-system/registry/default/example/page-section-with-aside.tsx
+++ b/apps/design-system/registry/default/example/page-section-with-aside.tsx
@@ -1,13 +1,13 @@
+import { Button, Card, CardContent } from 'ui'
 import {
   PageSection,
+  PageSectionAside,
+  PageSectionContent,
+  PageSectionDescription,
   PageSectionMeta,
   PageSectionSummary,
   PageSectionTitle,
-  PageSectionDescription,
-  PageSectionAside,
-  PageSectionContent,
 } from 'ui-patterns/PageSection'
-import { Button, Card, CardContent } from 'ui'
 
 export default function PageSectionWithAside() {
   return (
diff --git a/apps/design-system/registry/default/example/popover-demo.tsx b/apps/design-system/registry/default/example/popover-demo.tsx
index 225aaad9099..ac0e3615728 100644
--- a/apps/design-system/registry/default/example/popover-demo.tsx
+++ b/apps/design-system/registry/default/example/popover-demo.tsx
@@ -1,7 +1,11 @@
-import { Button } from 'ui'
-import { Input_Shadcn_ } from 'ui'
-import { Label_Shadcn_ } from 'ui'
-import { Popover_Shadcn_, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_ } from 'ui'
+import {
+  Button,
+  Input_Shadcn_,
+  Label_Shadcn_,
+  Popover_Shadcn_,
+  PopoverContent_Shadcn_,
+  PopoverTrigger_Shadcn_,
+} from 'ui'
 
 export default function PopoverDemo() {
   return (
diff --git a/apps/design-system/registry/default/example/progress-demo.tsx b/apps/design-system/registry/default/example/progress-demo.tsx
index b91404c1384..7366cd84392 100644
--- a/apps/design-system/registry/default/example/progress-demo.tsx
+++ b/apps/design-system/registry/default/example/progress-demo.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import * as React from 'react'
-
 import { Progress } from 'ui'
 
 export default function ProgressDemo() {
diff --git a/apps/design-system/registry/default/example/radio-group-card-form.tsx b/apps/design-system/registry/default/example/radio-group-card-form.tsx
index 447b92a071e..bc914a7c91b 100644
--- a/apps/design-system/registry/default/example/radio-group-card-form.tsx
+++ b/apps/design-system/registry/default/example/radio-group-card-form.tsx
@@ -3,8 +3,6 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
-import { z } from 'zod'
-
 import {
   Button,
   Form_Shadcn_,
@@ -16,6 +14,7 @@ import {
   RadioGroupCard,
   RadioGroupCardItem,
 } from 'ui'
+import { z } from 'zod'
 
 const FormSchema = z.object({
   type: z.enum(['all', 'mentions', 'none'], {
diff --git a/apps/design-system/registry/default/example/radio-group-card-with-children.tsx b/apps/design-system/registry/default/example/radio-group-card-with-children.tsx
index c234a73896d..bb33298a610 100644
--- a/apps/design-system/registry/default/example/radio-group-card-with-children.tsx
+++ b/apps/design-system/registry/default/example/radio-group-card-with-children.tsx
@@ -1,5 +1,5 @@
-import { RadioGroupCard, RadioGroupCardItem } from 'ui'
 import SVG from 'react-inlinesvg'
+import { RadioGroupCard, RadioGroupCardItem } from 'ui'
 
 export default function RadioGroupDemo() {
   const singleThemes = [
diff --git a/apps/design-system/registry/default/example/radio-group-demo.tsx b/apps/design-system/registry/default/example/radio-group-demo.tsx
index 49a49f63742..efaf921d468 100644
--- a/apps/design-system/registry/default/example/radio-group-demo.tsx
+++ b/apps/design-system/registry/default/example/radio-group-demo.tsx
@@ -1,5 +1,4 @@
-import { Label_Shadcn_ } from 'ui'
-import { RadioGroup_Shadcn_, RadioGroupItem_Shadcn_ } from 'ui'
+import { Label_Shadcn_, RadioGroup_Shadcn_, RadioGroupItem_Shadcn_ } from 'ui'
 
 export default function RadioGroupDemo() {
   return (
diff --git a/apps/design-system/registry/default/example/radio-group-form.tsx b/apps/design-system/registry/default/example/radio-group-form.tsx
index e9315da6141..fe9bf3b84db 100644
--- a/apps/design-system/registry/default/example/radio-group-form.tsx
+++ b/apps/design-system/registry/default/example/radio-group-form.tsx
@@ -3,8 +3,6 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
-import { z } from 'zod'
-
 import {
   Button,
   Form_Shadcn_,
@@ -16,6 +14,7 @@ import {
   RadioGroup_Shadcn_,
   RadioGroupItem_Shadcn_,
 } from 'ui'
+import { z } from 'zod'
 
 const FormSchema = z.object({
   type: z.enum(['all', 'mentions', 'none'], {
diff --git a/apps/design-system/registry/default/example/radio-group-stacked-form.tsx b/apps/design-system/registry/default/example/radio-group-stacked-form.tsx
index 54aa17610e8..57eab837c78 100644
--- a/apps/design-system/registry/default/example/radio-group-stacked-form.tsx
+++ b/apps/design-system/registry/default/example/radio-group-stacked-form.tsx
@@ -3,8 +3,6 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
-import { z } from 'zod'
-
 import {
   Button,
   Form_Shadcn_,
@@ -16,6 +14,7 @@ import {
   RadioGroupStacked,
   RadioGroupStackedItem,
 } from 'ui'
+import { z } from 'zod'
 
 const FormSchema = z.object({
   type: z.enum(['all', 'mentions', 'none'], {
diff --git a/apps/design-system/registry/default/example/scroll-area-demo.tsx b/apps/design-system/registry/default/example/scroll-area-demo.tsx
index b2212a40d0b..f7b6b3f889e 100644
--- a/apps/design-system/registry/default/example/scroll-area-demo.tsx
+++ b/apps/design-system/registry/default/example/scroll-area-demo.tsx
@@ -1,7 +1,5 @@
 import * as React from 'react'
-
-import { ScrollArea } from 'ui'
-import { Separator } from 'ui'
+import { ScrollArea, Separator } from 'ui'
 
 const tags = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`)
 
diff --git a/apps/design-system/registry/default/example/scroll-area-horizontal-demo.tsx b/apps/design-system/registry/default/example/scroll-area-horizontal-demo.tsx
index 3c23a84c4e5..9a029ff3654 100644
--- a/apps/design-system/registry/default/example/scroll-area-horizontal-demo.tsx
+++ b/apps/design-system/registry/default/example/scroll-area-horizontal-demo.tsx
@@ -1,6 +1,5 @@
-import * as React from 'react'
 import Image from 'next/image'
-
+import * as React from 'react'
 import { ScrollArea, ScrollBar } from 'ui'
 
 export interface Artwork {
diff --git a/apps/design-system/registry/default/example/select-demo.tsx b/apps/design-system/registry/default/example/select-demo.tsx
index 08b76b2cdc3..1792e32151f 100644
--- a/apps/design-system/registry/default/example/select-demo.tsx
+++ b/apps/design-system/registry/default/example/select-demo.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react'
-
 import {
   Select_Shadcn_,
   SelectContent_Shadcn_,
diff --git a/apps/design-system/registry/default/example/select-form.tsx b/apps/design-system/registry/default/example/select-form.tsx
index 0f4a31e7689..3fed870c7fd 100644
--- a/apps/design-system/registry/default/example/select-form.tsx
+++ b/apps/design-system/registry/default/example/select-form.tsx
@@ -4,8 +4,6 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import Link from 'next/link'
 import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
-import { z } from 'zod'
-
 import {
   Button,
   Form_Shadcn_,
@@ -21,6 +19,7 @@ import {
   SelectTrigger_Shadcn_,
   SelectValue_Shadcn_,
 } from 'ui'
+import { z } from 'zod'
 
 const FormSchema = z.object({
   email: z
diff --git a/apps/design-system/registry/default/example/slider-demo.tsx b/apps/design-system/registry/default/example/slider-demo.tsx
index 3ea312958d9..46c9d671685 100644
--- a/apps/design-system/registry/default/example/slider-demo.tsx
+++ b/apps/design-system/registry/default/example/slider-demo.tsx
@@ -1,6 +1,7 @@
-import { cn } from '@/lib/utils'
 import { Slider } from 'ui'
 
+import { cn } from '@/lib/utils'
+
 type SliderProps = React.ComponentProps<typeof Slider>
 
 export default function SliderDemo({ className, ...props }: SliderProps) {
diff --git a/apps/design-system/registry/default/example/slider-minMax-range.tsx b/apps/design-system/registry/default/example/slider-minMax-range.tsx
index 01f280013b0..90339d335e6 100644
--- a/apps/design-system/registry/default/example/slider-minMax-range.tsx
+++ b/apps/design-system/registry/default/example/slider-minMax-range.tsx
@@ -1,6 +1,7 @@
-import { cn } from '@/lib/utils'
 import { Slider } from 'ui'
 
+import { cn } from '@/lib/utils'
+
 type SliderProps = React.ComponentProps<typeof Slider>
 
 export default function SliderDemo({ className, ...props }: SliderProps) {
diff --git a/apps/design-system/registry/default/example/switch-demo.tsx b/apps/design-system/registry/default/example/switch-demo.tsx
index ab7f4c10319..265191523e0 100644
--- a/apps/design-system/registry/default/example/switch-demo.tsx
+++ b/apps/design-system/registry/default/example/switch-demo.tsx
@@ -1,5 +1,4 @@
-import { Switch } from 'ui'
-import { Label_Shadcn_ } from 'ui'
+import { Label_Shadcn_, Switch } from 'ui'
 
 export default function SwitchDemo() {
   return (
diff --git a/apps/design-system/registry/default/example/switch-form.tsx b/apps/design-system/registry/default/example/switch-form.tsx
index 197c7359157..41ebeb069b4 100644
--- a/apps/design-system/registry/default/example/switch-form.tsx
+++ b/apps/design-system/registry/default/example/switch-form.tsx
@@ -3,8 +3,6 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
-import { z } from 'zod'
-
 import {
   Button,
   Form_Shadcn_,
@@ -15,6 +13,7 @@ import {
   FormLabel_Shadcn_,
   Switch,
 } from 'ui'
+import { z } from 'zod'
 
 const FormSchema = z.object({
   marketing_emails: z.boolean().default(false).optional(),
diff --git a/apps/design-system/registry/default/example/table-sort.tsx b/apps/design-system/registry/default/example/table-sort.tsx
index 4a29d1f0230..14b923328c3 100644
--- a/apps/design-system/registry/default/example/table-sort.tsx
+++ b/apps/design-system/registry/default/example/table-sort.tsx
@@ -1,13 +1,12 @@
 import { useMemo, useState } from 'react'
-
 import {
   Card,
   Table,
   TableBody,
   TableCell,
   TableHead,
-  TableHeadSort,
   TableHeader,
+  TableHeadSort,
   TableRow,
 } from 'ui'
 
diff --git a/apps/design-system/registry/default/example/tabs-demo.tsx b/apps/design-system/registry/default/example/tabs-demo.tsx
index 69dcbbacb4e..cd443b6c96f 100644
--- a/apps/design-system/registry/default/example/tabs-demo.tsx
+++ b/apps/design-system/registry/default/example/tabs-demo.tsx
@@ -1,8 +1,18 @@
-import { Button } from 'ui'
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
-import { Input_Shadcn_ } from 'ui'
-import { Label_Shadcn_ } from 'ui'
-import { Tabs_Shadcn_, TabsContent_Shadcn_, TabsList_Shadcn_, TabsTrigger_Shadcn_ } from 'ui'
+import {
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Input_Shadcn_,
+  Label_Shadcn_,
+  Tabs_Shadcn_,
+  TabsContent_Shadcn_,
+  TabsList_Shadcn_,
+  TabsTrigger_Shadcn_,
+} from 'ui'
 
 export default function TabsDemo() {
   return (
diff --git a/apps/design-system/registry/default/example/text-confirm-dialog-with-cancel-button.tsx b/apps/design-system/registry/default/example/text-confirm-dialog-with-cancel-button.tsx
index e629f3e7901..e61c211dbcd 100644
--- a/apps/design-system/registry/default/example/text-confirm-dialog-with-cancel-button.tsx
+++ b/apps/design-system/registry/default/example/text-confirm-dialog-with-cancel-button.tsx
@@ -2,7 +2,6 @@
 
 import { useState } from 'react'
 import { toast } from 'sonner'
-
 import { Button } from 'ui'
 import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 
diff --git a/apps/design-system/registry/default/example/text-confirm-dialog-with-children.tsx b/apps/design-system/registry/default/example/text-confirm-dialog-with-children.tsx
index d9d053a6366..d4d8e644ae5 100644
--- a/apps/design-system/registry/default/example/text-confirm-dialog-with-children.tsx
+++ b/apps/design-system/registry/default/example/text-confirm-dialog-with-children.tsx
@@ -3,7 +3,6 @@
 import { UserPlus } from 'lucide-react'
 import { useState } from 'react'
 import { toast } from 'sonner'
-
 import { Button } from 'ui'
 import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 
diff --git a/apps/design-system/registry/default/example/text-confirm-dialog-with-size.tsx b/apps/design-system/registry/default/example/text-confirm-dialog-with-size.tsx
index e0772b02821..54603c6234a 100644
--- a/apps/design-system/registry/default/example/text-confirm-dialog-with-size.tsx
+++ b/apps/design-system/registry/default/example/text-confirm-dialog-with-size.tsx
@@ -2,7 +2,6 @@
 
 import { useState } from 'react'
 import { toast } from 'sonner'
-
 import { Button } from 'ui'
 import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 
diff --git a/apps/design-system/registry/default/example/textarea-form.tsx b/apps/design-system/registry/default/example/textarea-form.tsx
index 1ddb34d5718..4f4c8909534 100644
--- a/apps/design-system/registry/default/example/textarea-form.tsx
+++ b/apps/design-system/registry/default/example/textarea-form.tsx
@@ -3,8 +3,6 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
-import { z } from 'zod'
-
 import {
   Button,
   Form_Shadcn_,
@@ -16,6 +14,7 @@ import {
   FormMessage_Shadcn_,
   Textarea,
 } from 'ui'
+import { z } from 'zod'
 
 const FormSchema = z.object({
   bio: z
diff --git a/apps/design-system/registry/default/example/textarea-with-button.tsx b/apps/design-system/registry/default/example/textarea-with-button.tsx
index 29244301212..05f3200e6c2 100644
--- a/apps/design-system/registry/default/example/textarea-with-button.tsx
+++ b/apps/design-system/registry/default/example/textarea-with-button.tsx
@@ -1,5 +1,4 @@
-import { Button } from 'ui'
-import { Textarea } from 'ui'
+import { Button, Textarea } from 'ui'
 
 export default function TextareaWithButton() {
   return (
diff --git a/apps/design-system/registry/default/example/textarea-with-label.tsx b/apps/design-system/registry/default/example/textarea-with-label.tsx
index 000cada2acb..72ca7ace2f5 100644
--- a/apps/design-system/registry/default/example/textarea-with-label.tsx
+++ b/apps/design-system/registry/default/example/textarea-with-label.tsx
@@ -1,5 +1,4 @@
-import { Label_Shadcn_ } from 'ui'
-import { Textarea } from 'ui'
+import { Label_Shadcn_, Textarea } from 'ui'
 
 export default function TextareaWithLabel() {
   return (
diff --git a/apps/design-system/registry/default/example/textarea-with-text.tsx b/apps/design-system/registry/default/example/textarea-with-text.tsx
index fe9940fe9b3..aa0ed043200 100644
--- a/apps/design-system/registry/default/example/textarea-with-text.tsx
+++ b/apps/design-system/registry/default/example/textarea-with-text.tsx
@@ -1,5 +1,4 @@
-import { Textarea } from 'ui'
-import { Label_Shadcn_ } from 'ui'
+import { Label_Shadcn_, Textarea } from 'ui'
 
 export default function TextareaWithText() {
   return (
diff --git a/apps/design-system/registry/default/example/toc-demo.tsx b/apps/design-system/registry/default/example/toc-demo.tsx
index 86c2d700664..a4dfcf6ded2 100644
--- a/apps/design-system/registry/default/example/toc-demo.tsx
+++ b/apps/design-system/registry/default/example/toc-demo.tsx
@@ -1,6 +1,7 @@
 'use client'
+
 import { createContext, PropsWithChildren, useContext, useEffect, useState } from 'react'
-import { Toc, TOCItems, TOCScrollArea } from 'ui-patterns'
+import { AnchorProvider, Toc, TOCItems, TOCScrollArea, type AnchorProviderProps } from 'ui-patterns'
 
 export default function MultiSelectDemo() {
   return (
@@ -155,8 +156,6 @@ const TocComponent = () => {
   )
 }
 
-import { type AnchorProviderProps, AnchorProvider } from 'ui-patterns'
-
 interface TOCHeader {
   id?: string
   text: string
diff --git a/apps/design-system/registry/default/example/toc-single-demo.tsx b/apps/design-system/registry/default/example/toc-single-demo.tsx
index d5f24f153b0..d1df877703f 100644
--- a/apps/design-system/registry/default/example/toc-single-demo.tsx
+++ b/apps/design-system/registry/default/example/toc-single-demo.tsx
@@ -1,6 +1,7 @@
 'use client'
+
 import { createContext, PropsWithChildren, useContext, useEffect, useState } from 'react'
-import { Toc, TOCItems, TOCScrollArea } from 'ui-patterns'
+import { AnchorProvider, Toc, TOCItems, TOCScrollArea, type AnchorProviderProps } from 'ui-patterns'
 
 export default function MultiSelectDemo() {
   return (
@@ -155,8 +156,6 @@ const TocComponent = () => {
   )
 }
 
-import { type AnchorProviderProps, AnchorProvider } from 'ui-patterns'
-
 interface TOCHeader {
   id?: string
   text: string
diff --git a/apps/design-system/registry/default/example/toggle-demo.tsx b/apps/design-system/registry/default/example/toggle-demo.tsx
index 2a951280678..0d742d8c3ca 100644
--- a/apps/design-system/registry/default/example/toggle-demo.tsx
+++ b/apps/design-system/registry/default/example/toggle-demo.tsx
@@ -1,5 +1,4 @@
 import { Bold } from 'lucide-react'
-
 import { Toggle_Shadcn_ } from 'ui'
 
 export default function ToggleDemo() {
diff --git a/apps/design-system/registry/default/example/toggle-disabled.tsx b/apps/design-system/registry/default/example/toggle-disabled.tsx
index 002f83c8f0c..8378655063b 100644
--- a/apps/design-system/registry/default/example/toggle-disabled.tsx
+++ b/apps/design-system/registry/default/example/toggle-disabled.tsx
@@ -1,5 +1,4 @@
 import { Underline } from 'lucide-react'
-
 import { Toggle_Shadcn_ } from 'ui'
 
 export default function ToggleDisabled() {
diff --git a/apps/design-system/registry/default/example/toggle-group-demo.tsx b/apps/design-system/registry/default/example/toggle-group-demo.tsx
index 88b915bf846..d74cf1cbe34 100644
--- a/apps/design-system/registry/default/example/toggle-group-demo.tsx
+++ b/apps/design-system/registry/default/example/toggle-group-demo.tsx
@@ -1,5 +1,4 @@
 import { Bold, Italic, Underline } from 'lucide-react'
-
 import { ToggleGroup, ToggleGroupItem } from 'ui'
 
 export default function ToggleGroupDemo() {
diff --git a/apps/design-system/registry/default/example/toggle-group-disabled.tsx b/apps/design-system/registry/default/example/toggle-group-disabled.tsx
index 8dcf6c022f0..3a0cf10a1f1 100644
--- a/apps/design-system/registry/default/example/toggle-group-disabled.tsx
+++ b/apps/design-system/registry/default/example/toggle-group-disabled.tsx
@@ -1,5 +1,4 @@
 import { Bold, Italic, Underline } from 'lucide-react'
-
 import { ToggleGroup, ToggleGroupItem } from 'ui'
 
 export default function ToggleGroupDemo() {
diff --git a/apps/design-system/registry/default/example/toggle-group-lg.tsx b/apps/design-system/registry/default/example/toggle-group-lg.tsx
index 1e9b7418f20..81ec4a53a97 100644
--- a/apps/design-system/registry/default/example/toggle-group-lg.tsx
+++ b/apps/design-system/registry/default/example/toggle-group-lg.tsx
@@ -1,5 +1,4 @@
 import { Bold, Italic, Underline } from 'lucide-react'
-
 import { ToggleGroup, ToggleGroupItem } from 'ui'
 
 export default function ToggleGroupDemo() {
diff --git a/apps/design-system/registry/default/example/toggle-group-outline.tsx b/apps/design-system/registry/default/example/toggle-group-outline.tsx
index 708e517c2a2..c9270a6755c 100644
--- a/apps/design-system/registry/default/example/toggle-group-outline.tsx
+++ b/apps/design-system/registry/default/example/toggle-group-outline.tsx
@@ -1,5 +1,4 @@
 import { Bold, Italic, Underline } from 'lucide-react'
-
 import { ToggleGroup, ToggleGroupItem } from 'ui'
 
 export default function ToggleGroupDemo() {
diff --git a/apps/design-system/registry/default/example/toggle-group-single.tsx b/apps/design-system/registry/default/example/toggle-group-single.tsx
index 556318f3f1a..c1354fc3bc0 100644
--- a/apps/design-system/registry/default/example/toggle-group-single.tsx
+++ b/apps/design-system/registry/default/example/toggle-group-single.tsx
@@ -1,5 +1,4 @@
 import { Bold, Italic, Underline } from 'lucide-react'
-
 import { ToggleGroup, ToggleGroupItem } from 'ui'
 
 export default function ToggleGroupDemo() {
diff --git a/apps/design-system/registry/default/example/toggle-group-sm.tsx b/apps/design-system/registry/default/example/toggle-group-sm.tsx
index 1bd98d30fe3..5838a301751 100644
--- a/apps/design-system/registry/default/example/toggle-group-sm.tsx
+++ b/apps/design-system/registry/default/example/toggle-group-sm.tsx
@@ -1,5 +1,4 @@
 import { Bold, Italic, Underline } from 'lucide-react'
-
 import { ToggleGroup, ToggleGroupItem } from 'ui'
 
 export default function ToggleGroupDemo() {
diff --git a/apps/design-system/registry/default/example/toggle-lg.tsx b/apps/design-system/registry/default/example/toggle-lg.tsx
index bcdd33d625a..4989f684bef 100644
--- a/apps/design-system/registry/default/example/toggle-lg.tsx
+++ b/apps/design-system/registry/default/example/toggle-lg.tsx
@@ -1,5 +1,4 @@
 import { Italic } from 'lucide-react'
-
 import { Toggle_Shadcn_ } from 'ui'
 
 export default function ToggleLg() {
diff --git a/apps/design-system/registry/default/example/toggle-sm.tsx b/apps/design-system/registry/default/example/toggle-sm.tsx
index 56767c0a169..9eb7acaa29a 100644
--- a/apps/design-system/registry/default/example/toggle-sm.tsx
+++ b/apps/design-system/registry/default/example/toggle-sm.tsx
@@ -1,5 +1,4 @@
 import { Italic } from 'lucide-react'
-
 import { Toggle_Shadcn_ } from 'ui'
 
 export default function ToggleSm() {
diff --git a/apps/design-system/registry/default/example/toggle-with-text.tsx b/apps/design-system/registry/default/example/toggle-with-text.tsx
index e293d5617e7..40471675aa1 100644
--- a/apps/design-system/registry/default/example/toggle-with-text.tsx
+++ b/apps/design-system/registry/default/example/toggle-with-text.tsx
@@ -1,5 +1,4 @@
 import { Italic } from 'lucide-react'
-
 import { Toggle_Shadcn_ } from 'ui'
 
 export default function ToggleWithText() {
diff --git a/apps/design-system/registry/default/example/tree-view-demo.tsx b/apps/design-system/registry/default/example/tree-view-demo.tsx
index 2ffaabcb47a..699041158c5 100644
--- a/apps/design-system/registry/default/example/tree-view-demo.tsx
+++ b/apps/design-system/registry/default/example/tree-view-demo.tsx
@@ -1,4 +1,4 @@
-import { TreeView, TreeViewItem, flattenTree } from 'ui'
+import { flattenTree, TreeView, TreeViewItem } from 'ui'
 
 export default function TreeViewDemo() {
   const data = {
diff --git a/apps/design-system/registry/default/example/tree-view-directories.tsx b/apps/design-system/registry/default/example/tree-view-directories.tsx
index 10a9df52da7..8e2d271400d 100644
--- a/apps/design-system/registry/default/example/tree-view-directories.tsx
+++ b/apps/design-system/registry/default/example/tree-view-directories.tsx
@@ -1,4 +1,4 @@
-import { TreeView, TreeViewItem, flattenTree } from 'ui'
+import { flattenTree, TreeView, TreeViewItem } from 'ui'
 
 export default function TreeViewDemo() {
   const data = {
diff --git a/apps/design-system/registry/registry.ts b/apps/design-system/registry/registry.ts
index 27f60ea8459..63d7f47cc74 100644
--- a/apps/design-system/registry/registry.ts
+++ b/apps/design-system/registry/registry.ts
@@ -1,7 +1,7 @@
-import { Registry } from '@/registry/schema'
 import { examples } from '@/registry//examples'
-import { fragments } from '@/registry/fragments'
 import { charts } from '@/registry/charts'
 import { copyWriting } from '@/registry/copy-writing'
+import { fragments } from '@/registry/fragments'
+import { Registry } from '@/registry/schema'
 
 export const registry: Registry = [...fragments, ...examples, ...charts, ...copyWriting]
diff --git a/apps/ui-library/app/(app)/docs/[[...slug]]/page.tsx b/apps/ui-library/app/(app)/docs/[[...slug]]/page.tsx
index 9bc362e67a4..aae43476baf 100644
--- a/apps/ui-library/app/(app)/docs/[[...slug]]/page.tsx
+++ b/apps/ui-library/app/(app)/docs/[[...slug]]/page.tsx
@@ -1,3 +1,13 @@
+import '@/styles/code-block-variables.css'
+import '@/styles/mdx.css'
+
+import { allDocs } from 'contentlayer/generated'
+import { ChevronRight } from 'lucide-react'
+import type { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+import Balancer from 'react-wrap-balancer'
+import { ScrollArea } from 'ui'
+
 import { metadata as mainMetadata } from '@/app/layout'
 import { FrameworkSelector } from '@/components/framework-selector'
 import { Mdx } from '@/components/mdx-components'
@@ -5,14 +15,6 @@ import { SourcePanel } from '@/components/source-panel'
 import { DashboardTableOfContents } from '@/components/toc'
 import { getTableOfContents } from '@/lib/toc'
 import { absoluteUrl, cn } from '@/lib/utils'
-import '@/styles/code-block-variables.css'
-import '@/styles/mdx.css'
-import { allDocs } from 'contentlayer/generated'
-import { ChevronRight } from 'lucide-react'
-import type { Metadata } from 'next'
-import { notFound } from 'next/navigation'
-import Balancer from 'react-wrap-balancer'
-import { ScrollArea } from 'ui'
 
 interface DocPageProps {
   params: Promise<{
diff --git a/apps/ui-library/app/(app)/layout.tsx b/apps/ui-library/app/(app)/layout.tsx
index e4706682165..57ef5793b4d 100644
--- a/apps/ui-library/app/(app)/layout.tsx
+++ b/apps/ui-library/app/(app)/layout.tsx
@@ -1,6 +1,6 @@
+import { TelemetryWrapper } from './telemetry-wrapper'
 import { Sidebar } from '@/components/sidebar'
 import { SiteFooter } from '@/components/site-footer'
-import { TelemetryWrapper } from './telemetry-wrapper'
 
 interface AppLayoutProps {
   children: React.ReactNode
diff --git a/apps/ui-library/app/(app)/page.tsx b/apps/ui-library/app/(app)/page.tsx
index dc0579832ae..e993da7e4cd 100644
--- a/apps/ui-library/app/(app)/page.tsx
+++ b/apps/ui-library/app/(app)/page.tsx
@@ -1,8 +1,9 @@
-import { BlockPreview } from '@/components/block-preview'
-import { ComponentPreview } from '@/components/component-preview'
 import Link from 'next/link'
 import { Button_Shadcn_ } from 'ui'
 
+import { BlockPreview } from '@/components/block-preview'
+import { ComponentPreview } from '@/components/component-preview'
+
 // Horizontal grid line component
 const HorizontalGridLine = () => <div className="col-span-12 h-px bg-border/30" />
 
diff --git a/apps/ui-library/app/(app)/telemetry-wrapper.tsx b/apps/ui-library/app/(app)/telemetry-wrapper.tsx
index 124d9c5477a..3081ca63d62 100644
--- a/apps/ui-library/app/(app)/telemetry-wrapper.tsx
+++ b/apps/ui-library/app/(app)/telemetry-wrapper.tsx
@@ -1,9 +1,10 @@
 'use client'
 
-import { API_URL } from '@/lib/constants'
 import { IS_PLATFORM, PageTelemetry } from 'common'
 import { useConsentToast } from 'ui-patterns/consent'
 
+import { API_URL } from '@/lib/constants'
+
 export const TelemetryWrapper = () => {
   const { hasAcceptedConsent } = useConsentToast()
   return (
diff --git a/apps/ui-library/app/Providers.tsx b/apps/ui-library/app/Providers.tsx
index 24d7eac1223..bec0be4ea9c 100644
--- a/apps/ui-library/app/Providers.tsx
+++ b/apps/ui-library/app/Providers.tsx
@@ -1,13 +1,13 @@
 'use client'
 
+import { AuthProvider } from 'common'
 import { Provider as JotaiProvider } from 'jotai'
 import { ThemeProvider as NextThemesProvider } from 'next-themes'
 import { ThemeProviderProps } from 'next-themes/dist/types'
+import { TooltipProvider } from 'ui'
 
 import { FrameworkProvider } from '@/context/framework-context'
 import { MobileMenuProvider } from '@/context/mobile-menu-context'
-import { AuthProvider } from 'common'
-import { TooltipProvider } from 'ui'
 
 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
   return (
diff --git a/apps/ui-library/app/SonnerToast.tsx b/apps/ui-library/app/SonnerToast.tsx
index 819a8890e9d..28a013f1dbc 100644
--- a/apps/ui-library/app/SonnerToast.tsx
+++ b/apps/ui-library/app/SonnerToast.tsx
@@ -1,8 +1,9 @@
 'use client'
 
-import { useConfig } from '@/hooks/use-config'
 import { SonnerToaster as Toaster } from 'ui'
 
+import { useConfig } from '@/hooks/use-config'
+
 export function SonnerToaster() {
   const [config] = useConfig()
   return <Toaster position={config.sonnerPosition} expand={config.sonnerExpand} />
diff --git a/apps/ui-library/app/example/infinite-list-demo/layout.tsx b/apps/ui-library/app/example/infinite-list-demo/layout.tsx
index 11935f8d256..2a8bc579e57 100644
--- a/apps/ui-library/app/example/infinite-list-demo/layout.tsx
+++ b/apps/ui-library/app/example/infinite-list-demo/layout.tsx
@@ -1,4 +1,5 @@
 import type { Metadata } from 'next'
+
 import { BaseInjector } from './../base-injector'
 
 export const metadata: Metadata = {
diff --git a/apps/ui-library/app/example/password-based-auth/layout.tsx b/apps/ui-library/app/example/password-based-auth/layout.tsx
index 5d46323e83a..b7961dc6190 100644
--- a/apps/ui-library/app/example/password-based-auth/layout.tsx
+++ b/apps/ui-library/app/example/password-based-auth/layout.tsx
@@ -1,4 +1,5 @@
 import { Metadata } from 'next'
+
 import { BaseInjector } from './../base-injector'
 import { ThemeProvider } from '@/app/Providers'
 
diff --git a/apps/ui-library/app/example/password-based-auth/protected/page.tsx b/apps/ui-library/app/example/password-based-auth/protected/page.tsx
index 204123552db..e711c3a3d21 100644
--- a/apps/ui-library/app/example/password-based-auth/protected/page.tsx
+++ b/apps/ui-library/app/example/password-based-auth/protected/page.tsx
@@ -1,6 +1,7 @@
+import { redirect } from 'next/navigation'
+
 import { LogoutButton } from '@/registry/default/blocks/password-based-auth-nextjs/components/logout-button'
 import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/server'
-import { redirect } from 'next/navigation'
 
 export default async function ProtectedPage() {
   const supabase = await createClient()
diff --git a/apps/ui-library/app/example/realtime-avatar-stack-demo/layout.tsx b/apps/ui-library/app/example/realtime-avatar-stack-demo/layout.tsx
index 2e352bd3d6a..1c93a27332d 100644
--- a/apps/ui-library/app/example/realtime-avatar-stack-demo/layout.tsx
+++ b/apps/ui-library/app/example/realtime-avatar-stack-demo/layout.tsx
@@ -1,4 +1,5 @@
 import { Metadata } from 'next'
+
 import { BaseInjector } from './../base-injector'
 
 export const metadata: Metadata = {
diff --git a/apps/ui-library/app/example/realtime-chat-demo/layout.tsx b/apps/ui-library/app/example/realtime-chat-demo/layout.tsx
index f4413161db8..e727ab05992 100644
--- a/apps/ui-library/app/example/realtime-chat-demo/layout.tsx
+++ b/apps/ui-library/app/example/realtime-chat-demo/layout.tsx
@@ -1,4 +1,5 @@
 import { Metadata } from 'next'
+
 import { BaseInjector } from './../base-injector'
 
 export const metadata: Metadata = {
diff --git a/apps/ui-library/app/example/realtime-cursor-demo/layout.tsx b/apps/ui-library/app/example/realtime-cursor-demo/layout.tsx
index 1d0f507c854..15a86d95969 100644
--- a/apps/ui-library/app/example/realtime-cursor-demo/layout.tsx
+++ b/apps/ui-library/app/example/realtime-cursor-demo/layout.tsx
@@ -1,4 +1,5 @@
 import { Metadata } from 'next'
+
 import { BaseInjector } from './../base-injector'
 
 export const metadata: Metadata = {
diff --git a/apps/ui-library/app/example/social-auth/layout.tsx b/apps/ui-library/app/example/social-auth/layout.tsx
index 301a5ced999..bcafa18935d 100644
--- a/apps/ui-library/app/example/social-auth/layout.tsx
+++ b/apps/ui-library/app/example/social-auth/layout.tsx
@@ -1,6 +1,7 @@
-import { ThemeProvider } from '@/app/Providers'
 import { Metadata } from 'next'
+
 import { BaseInjector } from './../base-injector'
+import { ThemeProvider } from '@/app/Providers'
 
 export const metadata: Metadata = {
   title: 'Social Auth Example',
diff --git a/apps/ui-library/app/layout.tsx b/apps/ui-library/app/layout.tsx
index ca4c57c1904..f82bfc3d378 100644
--- a/apps/ui-library/app/layout.tsx
+++ b/apps/ui-library/app/layout.tsx
@@ -1,12 +1,14 @@
 import type { Metadata } from 'next'
 
 import '@/styles/globals.css'
-import { API_URL } from '@/lib/constants'
+
 import { FeatureFlagProvider, TelemetryTagManager } from 'common'
 import { genFaviconData } from 'common/MetaFavicons/app-router'
 import { Inter } from 'next/font/google'
+
 import { ThemeProvider } from './Providers'
 import { SonnerToaster } from './SonnerToast'
+import { API_URL } from '@/lib/constants'
 
 const inter = Inter({ subsets: ['latin'] })
 
diff --git a/apps/ui-library/components/block-item-code.tsx b/apps/ui-library/components/block-item-code.tsx
index 2236f273283..3ace544f82e 100644
--- a/apps/ui-library/components/block-item-code.tsx
+++ b/apps/ui-library/components/block-item-code.tsx
@@ -1,9 +1,10 @@
 'use client'
 
-import { RegistryNode } from '@/lib/process-registry'
 import { File } from 'lucide-react'
 import { useState } from 'react'
-import { CodeBlock, TreeView, TreeViewItem, flattenTree } from 'ui'
+import { CodeBlock, flattenTree, TreeView, TreeViewItem } from 'ui'
+
+import { RegistryNode } from '@/lib/process-registry'
 
 interface BlockItemCodeProps {
   files: RegistryNode[]
diff --git a/apps/ui-library/components/block-item.tsx b/apps/ui-library/components/block-item.tsx
index 4d386f4bed4..4285aea9e7f 100644
--- a/apps/ui-library/components/block-item.tsx
+++ b/apps/ui-library/components/block-item.tsx
@@ -1,9 +1,9 @@
 'use client'
 
-import { OpenInV0Button } from '@/components/open-in-v0-button'
-
 import dynamic from 'next/dynamic'
 
+import { OpenInV0Button } from '@/components/open-in-v0-button'
+
 //The dynamic import is to prevent the command component from being rendered on the server and cause hydration errors
 const Command = dynamic(() => import('./command').then((mod) => mod.Command), { ssr: false })
 
diff --git a/apps/ui-library/components/command-copy-button.tsx b/apps/ui-library/components/command-copy-button.tsx
index 369695c8c53..a4db52f0a9f 100644
--- a/apps/ui-library/components/command-copy-button.tsx
+++ b/apps/ui-library/components/command-copy-button.tsx
@@ -2,9 +2,9 @@
 
 import { Check, Copy } from 'lucide-react'
 import { useEffect, useState } from 'react'
+import { Button_Shadcn_ } from 'ui'
 
 import { useSendTelemetryEvent } from '@/lib/telemetry'
-import { Button_Shadcn_ } from 'ui'
 
 export function CommandCopyButton({ command }: { command: string }) {
   const [copied, setCopied] = useState(false)
diff --git a/apps/ui-library/components/command-menu.tsx b/apps/ui-library/components/command-menu.tsx
index be36bc95574..358be4e7089 100644
--- a/apps/ui-library/components/command-menu.tsx
+++ b/apps/ui-library/components/command-menu.tsx
@@ -4,9 +4,6 @@ import { CircleIcon, LaptopIcon, MoonIcon, SunIcon } from 'lucide-react'
 import { useTheme } from 'next-themes'
 import { useRouter } from 'next/navigation'
 import * as React from 'react'
-
-import { COMMAND_ITEMS } from '@/config/docs'
-import { cn } from '@/lib/utils'
 import {
   Button,
   CommandDialog,
@@ -19,6 +16,9 @@ import {
   DialogProps,
 } from 'ui'
 
+import { COMMAND_ITEMS } from '@/config/docs'
+import { cn } from '@/lib/utils'
+
 export function CommandMenu({ ...props }: DialogProps) {
   const router = useRouter()
   const [open, setOpen] = React.useState(false)
diff --git a/apps/ui-library/components/command.tsx b/apps/ui-library/components/command.tsx
index c3c5ce6240d..d5af84c97d1 100644
--- a/apps/ui-library/components/command.tsx
+++ b/apps/ui-library/components/command.tsx
@@ -2,6 +2,7 @@
 
 import { motion } from 'framer-motion'
 import { Tabs_Shadcn_, TabsContent_Shadcn_, TabsList_Shadcn_, TabsTrigger_Shadcn_ } from 'ui'
+
 import { CommandCopyButton } from './command-copy-button'
 import { useLocalStorage } from './use-local-storage'
 
diff --git a/apps/ui-library/components/component-preview.tsx b/apps/ui-library/components/component-preview.tsx
index c3406c4ade0..6338a5edc45 100644
--- a/apps/ui-library/components/component-preview.tsx
+++ b/apps/ui-library/components/component-preview.tsx
@@ -1,13 +1,12 @@
 'use client'
 
-import { Index } from '@/__registry__'
-import * as React from 'react'
-
-import { useConfig } from '@/hooks/use-config'
-import { CollapsibleContent_Shadcn_, CollapsibleTrigger_Shadcn_, Collapsible_Shadcn_, cn } from 'ui'
-
-import { styles } from '@/registry/styles'
 import { ChevronRight } from 'lucide-react'
+import * as React from 'react'
+import { cn, Collapsible_Shadcn_, CollapsibleContent_Shadcn_, CollapsibleTrigger_Shadcn_ } from 'ui'
+
+import { Index } from '@/__registry__'
+import { useConfig } from '@/hooks/use-config'
+import { styles } from '@/registry/styles'
 
 interface ComponentPreviewProps extends React.HTMLAttributes<HTMLDivElement> {
   name: keyof (typeof Index)['default']
diff --git a/apps/ui-library/components/copy-button.tsx b/apps/ui-library/components/copy-button.tsx
index f2e84e2429e..134b59ea3ac 100644
--- a/apps/ui-library/components/copy-button.tsx
+++ b/apps/ui-library/components/copy-button.tsx
@@ -2,7 +2,6 @@
 
 import { Check, Copy } from 'lucide-react'
 import * as React from 'react'
-
 import { Button, cn, copyToClipboard } from 'ui'
 
 interface CopyButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
diff --git a/apps/ui-library/components/framework-selector.tsx b/apps/ui-library/components/framework-selector.tsx
index 62a78fe2ae3..b67897c3ee6 100644
--- a/apps/ui-library/components/framework-selector.tsx
+++ b/apps/ui-library/components/framework-selector.tsx
@@ -1,9 +1,6 @@
 'use client'
 
 import { usePathname, useRouter } from 'next/navigation'
-
-import { componentPages, frameworkTitles } from '@/config/docs'
-import { useFramework } from '@/context/framework-context'
 import {
   Select_Shadcn_,
   SelectContent_Shadcn_,
@@ -13,6 +10,9 @@ import {
   SelectValue_Shadcn_,
 } from 'ui'
 
+import { componentPages, frameworkTitles } from '@/config/docs'
+import { useFramework } from '@/context/framework-context'
+
 const frameworks = Object.keys(frameworkTitles)
 
 export function FrameworkSelector() {
diff --git a/apps/ui-library/components/mdx-components.tsx b/apps/ui-library/components/mdx-components.tsx
index 40bd29ad716..a735f7892cd 100644
--- a/apps/ui-library/components/mdx-components.tsx
+++ b/apps/ui-library/components/mdx-components.tsx
@@ -1,7 +1,5 @@
 import { useMDXComponent } from 'next-contentlayer2/hooks'
 import Link from 'next/link'
-
-import type { Style } from '@/registry/styles'
 import {
   Accordion_Shadcn_ as Accordion,
   AccordionContent_Shadcn_ as AccordionContent,
@@ -9,6 +7,7 @@ import {
   AccordionTrigger_Shadcn_ as AccordionTrigger,
   cn,
 } from 'ui'
+
 import { BlockItem } from './block-item'
 import { BlockPreview } from './block-preview'
 import { Callout } from './callout'
@@ -18,6 +17,7 @@ import { DualRealtimeChat } from './dual-realtime-chat'
 import { RegistryBlock } from './registry-block'
 import { StyleWrapper } from './style-wrapper'
 import TanStackBeta from './tanstack-beta'
+import type { Style } from '@/registry/styles'
 
 const components = {
   RegistryBlock,
diff --git a/apps/ui-library/components/mobile-menu-sheet.tsx b/apps/ui-library/components/mobile-menu-sheet.tsx
index 4e7c3cc0190..b748cac88eb 100644
--- a/apps/ui-library/components/mobile-menu-sheet.tsx
+++ b/apps/ui-library/components/mobile-menu-sheet.tsx
@@ -1,8 +1,9 @@
 'use client'
 
-import { useMobileMenu } from '@/hooks/use-mobile-menu'
 import { Sheet } from 'ui'
 
+import { useMobileMenu } from '@/hooks/use-mobile-menu'
+
 interface MobileMenuSheetProps {
   children: React.ReactNode
 }
diff --git a/apps/ui-library/components/open-in-v0-button.tsx b/apps/ui-library/components/open-in-v0-button.tsx
index 103ca882d30..a9d6f439145 100644
--- a/apps/ui-library/components/open-in-v0-button.tsx
+++ b/apps/ui-library/components/open-in-v0-button.tsx
@@ -1,6 +1,7 @@
-import { cn } from '@/lib/utils'
 import { Button_Shadcn_ } from 'ui'
 
+import { cn } from '@/lib/utils'
+
 export function OpenInV0Button({
   name,
   className,
diff --git a/apps/ui-library/components/registry-block.tsx b/apps/ui-library/components/registry-block.tsx
index 9da49d30139..78a448456f5 100644
--- a/apps/ui-library/components/registry-block.tsx
+++ b/apps/ui-library/components/registry-block.tsx
@@ -1,8 +1,9 @@
 'use server'
 
-import { generateRegistryTree } from '@/lib/process-registry'
 import path from 'path'
+
 import { BlockItemCode } from './block-item-code'
+import { generateRegistryTree } from '@/lib/process-registry'
 
 export async function RegistryBlock({ itemName }: { itemName: string }) {
   const registryPath = path.join(process.cwd(), 'public', 'r', `${itemName}.json`)
diff --git a/apps/ui-library/components/side-navigation-item.tsx b/apps/ui-library/components/side-navigation-item.tsx
index 74c8b636cd7..f1259c10886 100644
--- a/apps/ui-library/components/side-navigation-item.tsx
+++ b/apps/ui-library/components/side-navigation-item.tsx
@@ -3,11 +3,11 @@
 import Link, { LinkProps } from 'next/link'
 import { usePathname } from 'next/navigation'
 import React from 'react'
+import { Badge, cn } from 'ui'
 
 import { useFramework } from '@/context/framework-context'
 import { useMobileMenu } from '@/hooks/use-mobile-menu'
 import { SidebarNavItem } from '@/types/nav'
-import { Badge, cn } from 'ui'
 
 // We extend:
 // 1. LinkProps - for Next.js Link component props (prefetch, etc)
diff --git a/apps/ui-library/components/side-navigation.tsx b/apps/ui-library/components/side-navigation.tsx
index ec58a9c4da5..66e397f69b9 100644
--- a/apps/ui-library/components/side-navigation.tsx
+++ b/apps/ui-library/components/side-navigation.tsx
@@ -1,9 +1,9 @@
 import Link from 'next/link'
 
-import NavigationItem from '@/components/side-navigation-item'
-import { aiEditorsRules, componentPages, gettingStarted, platformBlocks } from '@/config/docs'
 import { CommandMenu } from './command-menu'
 import { ThemeSwitcherDropdown } from './theme-switcher-dropdown'
+import NavigationItem from '@/components/side-navigation-item'
+import { aiEditorsRules, componentPages, gettingStarted, platformBlocks } from '@/config/docs'
 
 function SideNavigation() {
   return (
diff --git a/apps/ui-library/components/sidebar.tsx b/apps/ui-library/components/sidebar.tsx
index eeadd02aec1..e6f836297ce 100644
--- a/apps/ui-library/components/sidebar.tsx
+++ b/apps/ui-library/components/sidebar.tsx
@@ -1,9 +1,9 @@
 import { Menu } from 'lucide-react'
-
-import SideNavigation from '@/components/side-navigation'
 import { Button, ScrollArea, SheetContent, SheetTrigger } from 'ui'
+
 import { MobileMenuSheet } from './mobile-menu-sheet'
 import { ThemeSwitcherDropdown } from './theme-switcher-dropdown'
+import SideNavigation from '@/components/side-navigation'
 
 export function Sidebar() {
   return (
diff --git a/apps/ui-library/components/source-panel.tsx b/apps/ui-library/components/source-panel.tsx
index fccaf5f0566..66a30eadb79 100644
--- a/apps/ui-library/components/source-panel.tsx
+++ b/apps/ui-library/components/source-panel.tsx
@@ -1,11 +1,11 @@
-import { Doc } from '@/.contentlayer/generated'
-import Link from 'next/link'
-import { forwardRef } from 'react'
-
 import { ExternalLink } from 'lucide-react'
 import Image from 'next/image'
+import Link from 'next/link'
+import { forwardRef } from 'react'
 import { Button, cn } from 'ui'
 
+import { Doc } from '@/.contentlayer/generated'
+
 const SourcePanel = forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement> & { doc: Doc }>(
   ({ doc, children, ...props }, ref) => {
     const ShadcnPanel = () => {
diff --git a/apps/ui-library/components/tanstack-beta.tsx b/apps/ui-library/components/tanstack-beta.tsx
index 84c68949adb..70cc58f951d 100644
--- a/apps/ui-library/components/tanstack-beta.tsx
+++ b/apps/ui-library/components/tanstack-beta.tsx
@@ -1,4 +1,5 @@
 import { TriangleAlert } from 'lucide-react'
+
 import { Callout } from './callout'
 
 export default function TanStackBeta() {
diff --git a/apps/ui-library/components/theme-switcher-dropdown.tsx b/apps/ui-library/components/theme-switcher-dropdown.tsx
index e52a515d143..bfc17547259 100644
--- a/apps/ui-library/components/theme-switcher-dropdown.tsx
+++ b/apps/ui-library/components/theme-switcher-dropdown.tsx
@@ -3,7 +3,6 @@
 import { Moon, Sun } from 'lucide-react'
 import { useTheme } from 'next-themes'
 import { useEffect, useState } from 'react'
-
 import {
   Button,
   DropdownMenu,
@@ -14,8 +13,8 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
   RadioGroup_Shadcn_,
-  Theme,
   singleThemes,
+  Theme,
 } from 'ui'
 
 const ThemeSwitcherDropdown = () => {
diff --git a/apps/ui-library/components/toc.tsx b/apps/ui-library/components/toc.tsx
index d796b845180..b4958ab1ab2 100644
--- a/apps/ui-library/components/toc.tsx
+++ b/apps/ui-library/components/toc.tsx
@@ -3,9 +3,9 @@
 
 import * as React from 'react'
 
+import { useMounted } from '@/hooks/use-mounted'
 import { TableOfContents } from '@/lib/toc'
 import { cn } from '@/lib/utils'
-import { useMounted } from '@/hooks/use-mounted'
 
 interface TocProps {
   toc: TableOfContents
diff --git a/apps/ui-library/components/use-local-storage.tsx b/apps/ui-library/components/use-local-storage.tsx
index 0ef31e76346..e08258b4aff 100644
--- a/apps/ui-library/components/use-local-storage.tsx
+++ b/apps/ui-library/components/use-local-storage.tsx
@@ -1,5 +1,4 @@
 // Reference: https://usehooks.com/useLocalStorage/
-
 import { useCallback, useState } from 'react'
 
 export function useLocalStorage<T>(key: string, initialValue: T) {
diff --git a/apps/ui-library/content/docs/infinite-query-hook.mdx b/apps/ui-library/content/docs/infinite-query-hook.mdx
index 579c1429e92..2955d27b83e 100644
--- a/apps/ui-library/content/docs/infinite-query-hook.mdx
+++ b/apps/ui-library/content/docs/infinite-query-hook.mdx
@@ -116,14 +116,15 @@ The following component abstracts the hook into a component. It includes few uti
 ```tsx
 'use client'
 
-import { cn } from '@/lib/utils'
+import * as React from 'react'
+
 import {
   SupabaseQueryHandler,
   SupabaseTableData,
   SupabaseTableName,
   useInfiniteQuery,
 } from '@/hooks/use-infinite-query'
-import * as React from 'react'
+import { cn } from '@/lib/utils'
 
 interface InfiniteListProps<TableName extends SupabaseTableName> {
   tableName: TableName
@@ -229,8 +230,8 @@ Ensure the [Checkbox](https://ui.shadcn.com/docs/components/checkbox) component
 ```tsx
 'use client'
 
-import { Checkbox } from '@/components/ui/checkbox'
 import { InfiniteList } from './infinite-component'
+import { Checkbox } from '@/components/ui/checkbox'
 import { SupabaseQueryHandler } from '@/hooks/use-infinite-query'
 import { Database } from '@/lib/supabase.types'
 
diff --git a/apps/ui-library/content/docs/nextjs/realtime-cursor.mdx b/apps/ui-library/content/docs/nextjs/realtime-cursor.mdx
index fa717898286..64d3544940a 100644
--- a/apps/ui-library/content/docs/nextjs/realtime-cursor.mdx
+++ b/apps/ui-library/content/docs/nextjs/realtime-cursor.mdx
@@ -37,6 +37,7 @@ The Realtime Cursor component is designed to be used in a room. It can be used t
 
 ```tsx
 'use client'
+
 import { RealtimeCursors } from '@/components/realtime-cursors'
 
 export default function Page() {
diff --git a/apps/ui-library/content/docs/nuxtjs/dropzone.mdx b/apps/ui-library/content/docs/nuxtjs/dropzone.mdx
index d960c6f7f13..4aa09603079 100644
--- a/apps/ui-library/content/docs/nuxtjs/dropzone.mdx
+++ b/apps/ui-library/content/docs/nuxtjs/dropzone.mdx
@@ -44,7 +44,7 @@ The File Upload component makes it easy to add file uploads to your app, with bu
 
 ```html
 <script setup>
-  import { Dropzone, DropzoneEmptyState, DropzoneContent } from '@/components/dropzone'
+  import { Dropzone, DropzoneContent, DropzoneEmptyState } from '@/components/dropzone'
   import { useSupabaseUpload } from '@/composables/use-supabase-upload'
 
   const upload = useSupabaseUpload({
diff --git a/apps/ui-library/content/docs/platform/platform-kit.mdx b/apps/ui-library/content/docs/platform/platform-kit.mdx
index 9e9ff343ea9..f20925ee311 100644
--- a/apps/ui-library/content/docs/platform/platform-kit.mdx
+++ b/apps/ui-library/content/docs/platform/platform-kit.mdx
@@ -44,9 +44,10 @@ Embed the manager dialog in your app and manage its state:
 
 ```tsx
 import { useState } from 'react'
-import { useMobile } from '@/hooks/use-mobile'
-import { Button } from '@/components/ui/button'
+
 import SupabaseManagerDialog from '@/components/supabase-manager'
+import { Button } from '@/components/ui/button'
+import { useMobile } from '@/hooks/use-mobile'
 
 export default function Example() {
   const [open, setOpen] = useState(false)
diff --git a/apps/ui-library/content/docs/vue/client.mdx b/apps/ui-library/content/docs/vue/client.mdx
index 89b3e0131c2..c56d6b87aeb 100644
--- a/apps/ui-library/content/docs/vue/client.mdx
+++ b/apps/ui-library/content/docs/vue/client.mdx
@@ -35,6 +35,7 @@ You can use the client in your Vue component like following:
 ```vue
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
+
 import { createClient } from './lib/supabase/client'
 
 const profile = ref(null)
diff --git a/apps/ui-library/content/docs/vue/dropzone.mdx b/apps/ui-library/content/docs/vue/dropzone.mdx
index f3eb934391b..b8fbae786cf 100644
--- a/apps/ui-library/content/docs/vue/dropzone.mdx
+++ b/apps/ui-library/content/docs/vue/dropzone.mdx
@@ -44,7 +44,7 @@ The File Upload component makes it easy to add file uploads to your app, with bu
 
 ```html
 <script setup>
-  import { Dropzone, DropzoneEmptyState, DropzoneContent } from '@/components/dropzone'
+  import { Dropzone, DropzoneContent, DropzoneEmptyState } from '@/components/dropzone'
   import { useSupabaseUpload } from '@/composables/use-supabase-upload'
 
   const upload = useSupabaseUpload({
diff --git a/apps/ui-library/content/docs/vue/password-based-auth.mdx b/apps/ui-library/content/docs/vue/password-based-auth.mdx
index fc9094e8d24..d52fe66b058 100644
--- a/apps/ui-library/content/docs/vue/password-based-auth.mdx
+++ b/apps/ui-library/content/docs/vue/password-based-auth.mdx
@@ -46,6 +46,7 @@ VITE_SUPABASE_PUBLISHABLE_OR_ANON_KEY=
 ```vue
 <script setup lang="ts">
 import { onMounted } from 'vue'
+
 import { createClient } from '@/lib/supabase/client'
 
 onMounted(async () => {
diff --git a/apps/ui-library/contentlayer.config.js b/apps/ui-library/contentlayer.config.js
index 970780a7548..cac37ed1a58 100644
--- a/apps/ui-library/contentlayer.config.js
+++ b/apps/ui-library/contentlayer.config.js
@@ -1,6 +1,6 @@
+import path from 'path'
 import { getHighlighter, loadTheme } from '@shikijs/compat'
 import { defineDocumentType, defineNestedType, makeSource } from 'contentlayer2/source-files'
-import path from 'path'
 import rehypeAutolinkHeadings from 'rehype-autolink-headings'
 import rehypePrettyCode from 'rehype-pretty-code'
 import rehypeSlug from 'rehype-slug'
diff --git a/apps/ui-library/context/framework-context.tsx b/apps/ui-library/context/framework-context.tsx
index 6e3071aee5d..b1b34fca59a 100644
--- a/apps/ui-library/context/framework-context.tsx
+++ b/apps/ui-library/context/framework-context.tsx
@@ -1,8 +1,9 @@
 'use client'
 
-import { frameworkTitles } from '@/config/docs'
 import { createContext, useContext, useEffect, useState } from 'react'
 
+import { frameworkTitles } from '@/config/docs'
+
 type Framework = keyof typeof frameworkTitles
 type FrameworkContextType = {
   framework: Framework
diff --git a/apps/ui-library/context/mobile-menu-context.tsx b/apps/ui-library/context/mobile-menu-context.tsx
index f584ee3f80b..615da364da9 100644
--- a/apps/ui-library/context/mobile-menu-context.tsx
+++ b/apps/ui-library/context/mobile-menu-context.tsx
@@ -1,6 +1,7 @@
 'use client'
 
-import React, { ReactNode, useState, useCallback } from 'react'
+import React, { ReactNode, useCallback, useState } from 'react'
+
 import { MobileMenuContext, MobileMenuContextType } from '@/hooks/use-mobile-menu'
 
 interface MobileMenuProviderProps {
diff --git a/apps/ui-library/hooks/use-config.ts b/apps/ui-library/hooks/use-config.ts
index 993a081c898..771060e7ec0 100644
--- a/apps/ui-library/hooks/use-config.ts
+++ b/apps/ui-library/hooks/use-config.ts
@@ -1,10 +1,11 @@
-import { Style } from '@/registry/styles'
 // import { Theme } from '@/registry/themes'
 import { useAtom } from 'jotai'
 import { atomWithStorage } from 'jotai/utils'
 import { ComponentProps } from 'react'
 import { SonnerToaster } from 'ui'
 
+import { Style } from '@/registry/styles'
+
 type Config = {
   style: Style['name']
   radius: number
diff --git a/apps/ui-library/lib/telemetry.ts b/apps/ui-library/lib/telemetry.ts
index 07b7fd6e012..bfc2171af49 100644
--- a/apps/ui-library/lib/telemetry.ts
+++ b/apps/ui-library/lib/telemetry.ts
@@ -1,10 +1,10 @@
 'use client'
 
-import { usePathname } from 'next/navigation'
-import { useCallback } from 'react'
-
 import { sendTelemetryEvent } from 'common'
 import { TelemetryEvent } from 'common/telemetry-constants'
+import { usePathname } from 'next/navigation'
+import { useCallback } from 'react'
+
 import { API_URL } from '@/lib/constants'
 
 export function useSendTelemetryEvent() {
diff --git a/apps/ui-library/lib/toc.ts b/apps/ui-library/lib/toc.ts
index c11d0b83031..951f553dbe1 100644
--- a/apps/ui-library/lib/toc.ts
+++ b/apps/ui-library/lib/toc.ts
@@ -1,6 +1,5 @@
 // @ts-nocheck
 // TODO: I'll fix this later.
-
 import { toc } from 'mdast-util-toc'
 import { remark } from 'remark'
 import { visit } from 'unist-util-visit'
diff --git a/apps/ui-library/public/r/current-user-avatar-nextjs.json b/apps/ui-library/public/r/current-user-avatar-nextjs.json
index f02a20e9f3f..f6f6749e243 100644
--- a/apps/ui-library/public/r/current-user-avatar-nextjs.json
+++ b/apps/ui-library/public/r/current-user-avatar-nextjs.json
@@ -19,12 +19,12 @@
     },
     {
       "path": "registry/default/blocks/current-user-avatar/hooks/use-current-user-name.ts",
-      "content": "import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\nimport { useEffect, useState } from 'react'\n\nexport const useCurrentUserName = () => {\n  const [name, setName] = useState<string | null>(null)\n\n  useEffect(() => {\n    const fetchProfileName = async () => {\n      const { data, error } = await createClient().auth.getSession()\n      if (error) {\n        console.error(error)\n      }\n\n      setName(data.session?.user.user_metadata.full_name ?? '?')\n    }\n\n    fetchProfileName()\n  }, [])\n\n  return name || '?'\n}\n",
+      "content": "import { useEffect, useState } from 'react'\n\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\n\nexport const useCurrentUserName = () => {\n  const [name, setName] = useState<string | null>(null)\n\n  useEffect(() => {\n    const fetchProfileName = async () => {\n      const { data, error } = await createClient().auth.getSession()\n      if (error) {\n        console.error(error)\n      }\n\n      setName(data.session?.user.user_metadata.full_name ?? '?')\n    }\n\n    fetchProfileName()\n  }, [])\n\n  return name || '?'\n}\n",
       "type": "registry:hook"
     },
     {
       "path": "registry/default/blocks/current-user-avatar/hooks/use-current-user-image.ts",
-      "content": "import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\nimport { useEffect, useState } from 'react'\n\nexport const useCurrentUserImage = () => {\n  const [image, setImage] = useState<string | null>(null)\n\n  useEffect(() => {\n    const fetchUserImage = async () => {\n      const { data, error } = await createClient().auth.getSession()\n      if (error) {\n        console.error(error)\n      }\n\n      setImage(data.session?.user.user_metadata.avatar_url ?? null)\n    }\n    fetchUserImage()\n  }, [])\n\n  return image\n}\n",
+      "content": "import { useEffect, useState } from 'react'\n\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\n\nexport const useCurrentUserImage = () => {\n  const [image, setImage] = useState<string | null>(null)\n\n  useEffect(() => {\n    const fetchUserImage = async () => {\n      const { data, error } = await createClient().auth.getSession()\n      if (error) {\n        console.error(error)\n      }\n\n      setImage(data.session?.user.user_metadata.avatar_url ?? null)\n    }\n    fetchUserImage()\n  }, [])\n\n  return image\n}\n",
       "type": "registry:hook"
     },
     {
diff --git a/apps/ui-library/public/r/current-user-avatar-react-router.json b/apps/ui-library/public/r/current-user-avatar-react-router.json
index 896e80355e6..cd0b1884583 100644
--- a/apps/ui-library/public/r/current-user-avatar-react-router.json
+++ b/apps/ui-library/public/r/current-user-avatar-react-router.json
@@ -19,12 +19,12 @@
     },
     {
       "path": "registry/default/blocks/current-user-avatar/hooks/use-current-user-name.ts",
-      "content": "import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\nimport { useEffect, useState } from 'react'\n\nexport const useCurrentUserName = () => {\n  const [name, setName] = useState<string | null>(null)\n\n  useEffect(() => {\n    const fetchProfileName = async () => {\n      const { data, error } = await createClient().auth.getSession()\n      if (error) {\n        console.error(error)\n      }\n\n      setName(data.session?.user.user_metadata.full_name ?? '?')\n    }\n\n    fetchProfileName()\n  }, [])\n\n  return name || '?'\n}\n",
+      "content": "import { useEffect, useState } from 'react'\n\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\n\nexport const useCurrentUserName = () => {\n  const [name, setName] = useState<string | null>(null)\n\n  useEffect(() => {\n    const fetchProfileName = async () => {\n      const { data, error } = await createClient().auth.getSession()\n      if (error) {\n        console.error(error)\n      }\n\n      setName(data.session?.user.user_metadata.full_name ?? '?')\n    }\n\n    fetchProfileName()\n  }, [])\n\n  return name || '?'\n}\n",
       "type": "registry:hook"
     },
     {
       "path": "registry/default/blocks/current-user-avatar/hooks/use-current-user-image.ts",
-      "content": "import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\nimport { useEffect, useState } from 'react'\n\nexport const useCurrentUserImage = () => {\n  const [image, setImage] = useState<string | null>(null)\n\n  useEffect(() => {\n    const fetchUserImage = async () => {\n      const { data, error } = await createClient().auth.getSession()\n      if (error) {\n        console.error(error)\n      }\n\n      setImage(data.session?.user.user_metadata.avatar_url ?? null)\n    }\n    fetchUserImage()\n  }, [])\n\n  return image\n}\n",
+      "content": "import { useEffect, useState } from 'react'\n\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\n\nexport const useCurrentUserImage = () => {\n  const [image, setImage] = useState<string | null>(null)\n\n  useEffect(() => {\n    const fetchUserImage = async () => {\n      const { data, error } = await createClient().auth.getSession()\n      if (error) {\n        console.error(error)\n      }\n\n      setImage(data.session?.user.user_metadata.avatar_url ?? null)\n    }\n    fetchUserImage()\n  }, [])\n\n  return image\n}\n",
       "type": "registry:hook"
     },
     {
diff --git a/apps/ui-library/public/r/current-user-avatar-react.json b/apps/ui-library/public/r/current-user-avatar-react.json
index 72b36ef6e06..d9211798232 100644
--- a/apps/ui-library/public/r/current-user-avatar-react.json
+++ b/apps/ui-library/public/r/current-user-avatar-react.json
@@ -18,12 +18,12 @@
     },
     {
       "path": "registry/default/blocks/current-user-avatar/hooks/use-current-user-name.ts",
-      "content": "import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\nimport { useEffect, useState } from 'react'\n\nexport const useCurrentUserName = () => {\n  const [name, setName] = useState<string | null>(null)\n\n  useEffect(() => {\n    const fetchProfileName = async () => {\n      const { data, error } = await createClient().auth.getSession()\n      if (error) {\n        console.error(error)\n      }\n\n      setName(data.session?.user.user_metadata.full_name ?? '?')\n    }\n\n    fetchProfileName()\n  }, [])\n\n  return name || '?'\n}\n",
+      "content": "import { useEffect, useState } from 'react'\n\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\n\nexport const useCurrentUserName = () => {\n  const [name, setName] = useState<string | null>(null)\n\n  useEffect(() => {\n    const fetchProfileName = async () => {\n      const { data, error } = await createClient().auth.getSession()\n      if (error) {\n        console.error(error)\n      }\n\n      setName(data.session?.user.user_metadata.full_name ?? '?')\n    }\n\n    fetchProfileName()\n  }, [])\n\n  return name || '?'\n}\n",
       "type": "registry:hook"
     },
     {
       "path": "registry/default/blocks/current-user-avatar/hooks/use-current-user-image.ts",
-      "content": "import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\nimport { useEffect, useState } from 'react'\n\nexport const useCurrentUserImage = () => {\n  const [image, setImage] = useState<string | null>(null)\n\n  useEffect(() => {\n    const fetchUserImage = async () => {\n      const { data, error } = await createClient().auth.getSession()\n      if (error) {\n        console.error(error)\n      }\n\n      setImage(data.session?.user.user_metadata.avatar_url ?? null)\n    }\n    fetchUserImage()\n  }, [])\n\n  return image\n}\n",
+      "content": "import { useEffect, useState } from 'react'\n\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\n\nexport const useCurrentUserImage = () => {\n  const [image, setImage] = useState<string | null>(null)\n\n  useEffect(() => {\n    const fetchUserImage = async () => {\n      const { data, error } = await createClient().auth.getSession()\n      if (error) {\n        console.error(error)\n      }\n\n      setImage(data.session?.user.user_metadata.avatar_url ?? null)\n    }\n    fetchUserImage()\n  }, [])\n\n  return image\n}\n",
       "type": "registry:hook"
     },
     {
diff --git a/apps/ui-library/public/r/current-user-avatar-tanstack.json b/apps/ui-library/public/r/current-user-avatar-tanstack.json
index 87709f96d8e..aaf8394013c 100644
--- a/apps/ui-library/public/r/current-user-avatar-tanstack.json
+++ b/apps/ui-library/public/r/current-user-avatar-tanstack.json
@@ -19,12 +19,12 @@
     },
     {
       "path": "registry/default/blocks/current-user-avatar/hooks/use-current-user-name.ts",
-      "content": "import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\nimport { useEffect, useState } from 'react'\n\nexport const useCurrentUserName = () => {\n  const [name, setName] = useState<string | null>(null)\n\n  useEffect(() => {\n    const fetchProfileName = async () => {\n      const { data, error } = await createClient().auth.getSession()\n      if (error) {\n        console.error(error)\n      }\n\n      setName(data.session?.user.user_metadata.full_name ?? '?')\n    }\n\n    fetchProfileName()\n  }, [])\n\n  return name || '?'\n}\n",
+      "content": "import { useEffect, useState } from 'react'\n\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\n\nexport const useCurrentUserName = () => {\n  const [name, setName] = useState<string | null>(null)\n\n  useEffect(() => {\n    const fetchProfileName = async () => {\n      const { data, error } = await createClient().auth.getSession()\n      if (error) {\n        console.error(error)\n      }\n\n      setName(data.session?.user.user_metadata.full_name ?? '?')\n    }\n\n    fetchProfileName()\n  }, [])\n\n  return name || '?'\n}\n",
       "type": "registry:hook"
     },
     {
       "path": "registry/default/blocks/current-user-avatar/hooks/use-current-user-image.ts",
-      "content": "import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\nimport { useEffect, useState } from 'react'\n\nexport const useCurrentUserImage = () => {\n  const [image, setImage] = useState<string | null>(null)\n\n  useEffect(() => {\n    const fetchUserImage = async () => {\n      const { data, error } = await createClient().auth.getSession()\n      if (error) {\n        console.error(error)\n      }\n\n      setImage(data.session?.user.user_metadata.avatar_url ?? null)\n    }\n    fetchUserImage()\n  }, [])\n\n  return image\n}\n",
+      "content": "import { useEffect, useState } from 'react'\n\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\n\nexport const useCurrentUserImage = () => {\n  const [image, setImage] = useState<string | null>(null)\n\n  useEffect(() => {\n    const fetchUserImage = async () => {\n      const { data, error } = await createClient().auth.getSession()\n      if (error) {\n        console.error(error)\n      }\n\n      setImage(data.session?.user.user_metadata.avatar_url ?? null)\n    }\n    fetchUserImage()\n  }, [])\n\n  return image\n}\n",
       "type": "registry:hook"
     },
     {
diff --git a/apps/ui-library/public/r/dropzone-nextjs.json b/apps/ui-library/public/r/dropzone-nextjs.json
index fc941070c3f..fd8580d9d59 100644
--- a/apps/ui-library/public/r/dropzone-nextjs.json
+++ b/apps/ui-library/public/r/dropzone-nextjs.json
@@ -16,12 +16,12 @@
   "files": [
     {
       "path": "registry/default/blocks/dropzone/components/dropzone.tsx",
-      "content": "'use client'\n\nimport { cn } from '@/lib/utils'\nimport { type UseSupabaseUploadReturn } from '@/registry/default/blocks/dropzone/hooks/use-supabase-upload'\nimport { Button } from '@/registry/default/components/ui/button'\nimport { CheckCircle, File, Loader2, Upload, X } from 'lucide-react'\nimport { createContext, type PropsWithChildren, useCallback, useContext } from 'react'\n\nexport const formatBytes = (\n  bytes: number,\n  decimals = 2,\n  size?: 'bytes' | 'KB' | 'MB' | 'GB' | 'TB' | 'PB' | 'EB' | 'ZB' | 'YB'\n) => {\n  const k = 1000\n  const dm = decimals < 0 ? 0 : decimals\n  const sizes = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']\n\n  if (bytes === 0 || bytes === undefined) return size !== undefined ? `0 ${size}` : '0 bytes'\n  const i = size !== undefined ? sizes.indexOf(size) : Math.floor(Math.log(bytes) / Math.log(k))\n  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]\n}\n\ntype DropzoneContextType = Omit<UseSupabaseUploadReturn, 'getRootProps' | 'getInputProps'>\n\nconst DropzoneContext = createContext<DropzoneContextType | undefined>(undefined)\n\ntype DropzoneProps = UseSupabaseUploadReturn & {\n  className?: string\n}\n\nconst Dropzone = ({\n  className,\n  children,\n  getRootProps,\n  getInputProps,\n  ...restProps\n}: PropsWithChildren<DropzoneProps>) => {\n  const isSuccess = restProps.isSuccess\n  const isActive = restProps.isDragActive\n  const isInvalid =\n    (restProps.isDragActive && restProps.isDragReject) ||\n    (restProps.errors.length > 0 && !restProps.isSuccess) ||\n    restProps.files.some((file) => file.errors.length !== 0)\n\n  return (\n    <DropzoneContext.Provider value={{ ...restProps }}>\n      <div\n        {...getRootProps({\n          className: cn(\n            'border-2 border-gray-300 rounded-lg p-6 text-center bg-card transition-colors duration-300 text-foreground',\n            className,\n            isSuccess ? 'border-solid' : 'border-dashed',\n            isActive && 'border-primary bg-primary/10',\n            isInvalid && 'border-destructive bg-destructive/10'\n          ),\n        })}\n      >\n        <input {...getInputProps()} />\n        {children}\n      </div>\n    </DropzoneContext.Provider>\n  )\n}\nconst DropzoneContent = ({ className }: { className?: string }) => {\n  const {\n    files,\n    setFiles,\n    onUpload,\n    loading,\n    successes,\n    errors,\n    maxFileSize,\n    maxFiles,\n    isSuccess,\n  } = useDropzoneContext()\n\n  const exceedMaxFiles = files.length > maxFiles\n\n  const handleRemoveFile = useCallback(\n    (fileName: string) => {\n      setFiles(files.filter((file) => file.name !== fileName))\n    },\n    [files, setFiles]\n  )\n\n  if (isSuccess) {\n    return (\n      <div className={cn('flex flex-row items-center gap-x-2 justify-center', className)}>\n        <CheckCircle size={16} className=\"text-primary\" />\n        <p className=\"text-primary text-sm\">\n          Successfully uploaded {files.length} file{files.length > 1 ? 's' : ''}\n        </p>\n      </div>\n    )\n  }\n\n  return (\n    <div className={cn('flex flex-col', className)}>\n      {files.map((file, idx) => {\n        const fileError = errors.find((e) => e.name === file.name)\n        const isSuccessfullyUploaded = !!successes.find((e) => e === file.name)\n\n        return (\n          <div\n            key={`${file.name}-${idx}`}\n            className=\"flex items-center gap-x-4 border-b py-2 first:mt-4 last:mb-4 \"\n          >\n            {file.type.startsWith('image/') ? (\n              <div className=\"h-10 w-10 rounded border overflow-hidden shrink-0 bg-muted flex items-center justify-center\">\n                <img src={file.preview} alt={file.name} className=\"object-cover\" />\n              </div>\n            ) : (\n              <div className=\"h-10 w-10 rounded border bg-muted flex items-center justify-center\">\n                <File size={18} />\n              </div>\n            )}\n\n            <div className=\"shrink grow flex flex-col items-start truncate\">\n              <p title={file.name} className=\"text-sm truncate max-w-full\">\n                {file.name}\n              </p>\n              {file.errors.length > 0 ? (\n                <p className=\"text-xs text-destructive\">\n                  {file.errors\n                    .map((e) =>\n                      e.message.startsWith('File is larger than')\n                        ? `File is larger than ${formatBytes(maxFileSize, 2)} (Size: ${formatBytes(file.size, 2)})`\n                        : e.message\n                    )\n                    .join(', ')}\n                </p>\n              ) : loading && !isSuccessfullyUploaded ? (\n                <p className=\"text-xs text-muted-foreground\">Uploading file...</p>\n              ) : !!fileError ? (\n                <p className=\"text-xs text-destructive\">Failed to upload: {fileError.message}</p>\n              ) : isSuccessfullyUploaded ? (\n                <p className=\"text-xs text-primary\">Successfully uploaded file</p>\n              ) : (\n                <p className=\"text-xs text-muted-foreground\">{formatBytes(file.size, 2)}</p>\n              )}\n            </div>\n\n            {!loading && !isSuccessfullyUploaded && (\n              <Button\n                size=\"icon\"\n                variant=\"link\"\n                className=\"shrink-0 justify-self-end text-muted-foreground hover:text-foreground\"\n                onClick={() => handleRemoveFile(file.name)}\n              >\n                <X />\n              </Button>\n            )}\n          </div>\n        )\n      })}\n      {exceedMaxFiles && (\n        <p className=\"text-sm text-left mt-2 text-destructive\">\n          You may upload only up to {maxFiles} files, please remove {files.length - maxFiles} file\n          {files.length - maxFiles > 1 ? 's' : ''}.\n        </p>\n      )}\n      {files.length > 0 && !exceedMaxFiles && (\n        <div className=\"mt-2\">\n          <Button\n            variant=\"outline\"\n            onClick={onUpload}\n            disabled={files.some((file) => file.errors.length !== 0) || loading}\n          >\n            {loading ? (\n              <>\n                <Loader2 className=\"mr-2 h-4 w-4 animate-spin\" />\n                Uploading...\n              </>\n            ) : (\n              <>Upload files</>\n            )}\n          </Button>\n        </div>\n      )}\n    </div>\n  )\n}\n\nconst DropzoneEmptyState = ({ className }: { className?: string }) => {\n  const { maxFiles, maxFileSize, inputRef, isSuccess } = useDropzoneContext()\n\n  if (isSuccess) {\n    return null\n  }\n\n  return (\n    <div className={cn('flex flex-col items-center gap-y-2', className)}>\n      <Upload size={20} className=\"text-muted-foreground\" />\n      <p className=\"text-sm\">\n        Upload{!!maxFiles && maxFiles > 1 ? ` ${maxFiles}` : ''} file\n        {!maxFiles || maxFiles > 1 ? 's' : ''}\n      </p>\n      <div className=\"flex flex-col items-center gap-y-1\">\n        <p className=\"text-xs text-muted-foreground\">\n          Drag and drop or{' '}\n          <a\n            onClick={() => inputRef.current?.click()}\n            className=\"underline cursor-pointer transition hover:text-foreground\"\n          >\n            select {maxFiles === 1 ? `file` : 'files'}\n          </a>{' '}\n          to upload\n        </p>\n        {maxFileSize !== Number.POSITIVE_INFINITY && (\n          <p className=\"text-xs text-muted-foreground\">\n            Maximum file size: {formatBytes(maxFileSize, 2)}\n          </p>\n        )}\n      </div>\n    </div>\n  )\n}\n\nconst useDropzoneContext = () => {\n  const context = useContext(DropzoneContext)\n\n  if (!context) {\n    throw new Error('useDropzoneContext must be used within a Dropzone')\n  }\n\n  return context\n}\n\nexport { Dropzone, DropzoneContent, DropzoneEmptyState, useDropzoneContext }\n",
+      "content": "'use client'\n\nimport { CheckCircle, File, Loader2, Upload, X } from 'lucide-react'\nimport { createContext, useCallback, useContext, type PropsWithChildren } from 'react'\n\nimport { cn } from '@/lib/utils'\nimport { type UseSupabaseUploadReturn } from '@/registry/default/blocks/dropzone/hooks/use-supabase-upload'\nimport { Button } from '@/registry/default/components/ui/button'\n\nexport const formatBytes = (\n  bytes: number,\n  decimals = 2,\n  size?: 'bytes' | 'KB' | 'MB' | 'GB' | 'TB' | 'PB' | 'EB' | 'ZB' | 'YB'\n) => {\n  const k = 1000\n  const dm = decimals < 0 ? 0 : decimals\n  const sizes = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']\n\n  if (bytes === 0 || bytes === undefined) return size !== undefined ? `0 ${size}` : '0 bytes'\n  const i = size !== undefined ? sizes.indexOf(size) : Math.floor(Math.log(bytes) / Math.log(k))\n  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]\n}\n\ntype DropzoneContextType = Omit<UseSupabaseUploadReturn, 'getRootProps' | 'getInputProps'>\n\nconst DropzoneContext = createContext<DropzoneContextType | undefined>(undefined)\n\ntype DropzoneProps = UseSupabaseUploadReturn & {\n  className?: string\n}\n\nconst Dropzone = ({\n  className,\n  children,\n  getRootProps,\n  getInputProps,\n  ...restProps\n}: PropsWithChildren<DropzoneProps>) => {\n  const isSuccess = restProps.isSuccess\n  const isActive = restProps.isDragActive\n  const isInvalid =\n    (restProps.isDragActive && restProps.isDragReject) ||\n    (restProps.errors.length > 0 && !restProps.isSuccess) ||\n    restProps.files.some((file) => file.errors.length !== 0)\n\n  return (\n    <DropzoneContext.Provider value={{ ...restProps }}>\n      <div\n        {...getRootProps({\n          className: cn(\n            'border-2 border-gray-300 rounded-lg p-6 text-center bg-card transition-colors duration-300 text-foreground',\n            className,\n            isSuccess ? 'border-solid' : 'border-dashed',\n            isActive && 'border-primary bg-primary/10',\n            isInvalid && 'border-destructive bg-destructive/10'\n          ),\n        })}\n      >\n        <input {...getInputProps()} />\n        {children}\n      </div>\n    </DropzoneContext.Provider>\n  )\n}\nconst DropzoneContent = ({ className }: { className?: string }) => {\n  const {\n    files,\n    setFiles,\n    onUpload,\n    loading,\n    successes,\n    errors,\n    maxFileSize,\n    maxFiles,\n    isSuccess,\n  } = useDropzoneContext()\n\n  const exceedMaxFiles = files.length > maxFiles\n\n  const handleRemoveFile = useCallback(\n    (fileName: string) => {\n      setFiles(files.filter((file) => file.name !== fileName))\n    },\n    [files, setFiles]\n  )\n\n  if (isSuccess) {\n    return (\n      <div className={cn('flex flex-row items-center gap-x-2 justify-center', className)}>\n        <CheckCircle size={16} className=\"text-primary\" />\n        <p className=\"text-primary text-sm\">\n          Successfully uploaded {files.length} file{files.length > 1 ? 's' : ''}\n        </p>\n      </div>\n    )\n  }\n\n  return (\n    <div className={cn('flex flex-col', className)}>\n      {files.map((file, idx) => {\n        const fileError = errors.find((e) => e.name === file.name)\n        const isSuccessfullyUploaded = !!successes.find((e) => e === file.name)\n\n        return (\n          <div\n            key={`${file.name}-${idx}`}\n            className=\"flex items-center gap-x-4 border-b py-2 first:mt-4 last:mb-4 \"\n          >\n            {file.type.startsWith('image/') ? (\n              <div className=\"h-10 w-10 rounded border overflow-hidden shrink-0 bg-muted flex items-center justify-center\">\n                <img src={file.preview} alt={file.name} className=\"object-cover\" />\n              </div>\n            ) : (\n              <div className=\"h-10 w-10 rounded border bg-muted flex items-center justify-center\">\n                <File size={18} />\n              </div>\n            )}\n\n            <div className=\"shrink grow flex flex-col items-start truncate\">\n              <p title={file.name} className=\"text-sm truncate max-w-full\">\n                {file.name}\n              </p>\n              {file.errors.length > 0 ? (\n                <p className=\"text-xs text-destructive\">\n                  {file.errors\n                    .map((e) =>\n                      e.message.startsWith('File is larger than')\n                        ? `File is larger than ${formatBytes(maxFileSize, 2)} (Size: ${formatBytes(file.size, 2)})`\n                        : e.message\n                    )\n                    .join(', ')}\n                </p>\n              ) : loading && !isSuccessfullyUploaded ? (\n                <p className=\"text-xs text-muted-foreground\">Uploading file...</p>\n              ) : !!fileError ? (\n                <p className=\"text-xs text-destructive\">Failed to upload: {fileError.message}</p>\n              ) : isSuccessfullyUploaded ? (\n                <p className=\"text-xs text-primary\">Successfully uploaded file</p>\n              ) : (\n                <p className=\"text-xs text-muted-foreground\">{formatBytes(file.size, 2)}</p>\n              )}\n            </div>\n\n            {!loading && !isSuccessfullyUploaded && (\n              <Button\n                size=\"icon\"\n                variant=\"link\"\n                className=\"shrink-0 justify-self-end text-muted-foreground hover:text-foreground\"\n                onClick={() => handleRemoveFile(file.name)}\n              >\n                <X />\n              </Button>\n            )}\n          </div>\n        )\n      })}\n      {exceedMaxFiles && (\n        <p className=\"text-sm text-left mt-2 text-destructive\">\n          You may upload only up to {maxFiles} files, please remove {files.length - maxFiles} file\n          {files.length - maxFiles > 1 ? 's' : ''}.\n        </p>\n      )}\n      {files.length > 0 && !exceedMaxFiles && (\n        <div className=\"mt-2\">\n          <Button\n            variant=\"outline\"\n            onClick={onUpload}\n            disabled={files.some((file) => file.errors.length !== 0) || loading}\n          >\n            {loading ? (\n              <>\n                <Loader2 className=\"mr-2 h-4 w-4 animate-spin\" />\n                Uploading...\n              </>\n            ) : (\n              <>Upload files</>\n            )}\n          </Button>\n        </div>\n      )}\n    </div>\n  )\n}\n\nconst DropzoneEmptyState = ({ className }: { className?: string }) => {\n  const { maxFiles, maxFileSize, inputRef, isSuccess } = useDropzoneContext()\n\n  if (isSuccess) {\n    return null\n  }\n\n  return (\n    <div className={cn('flex flex-col items-center gap-y-2', className)}>\n      <Upload size={20} className=\"text-muted-foreground\" />\n      <p className=\"text-sm\">\n        Upload{!!maxFiles && maxFiles > 1 ? ` ${maxFiles}` : ''} file\n        {!maxFiles || maxFiles > 1 ? 's' : ''}\n      </p>\n      <div className=\"flex flex-col items-center gap-y-1\">\n        <p className=\"text-xs text-muted-foreground\">\n          Drag and drop or{' '}\n          <a\n            onClick={() => inputRef.current?.click()}\n            className=\"underline cursor-pointer transition hover:text-foreground\"\n          >\n            select {maxFiles === 1 ? `file` : 'files'}\n          </a>{' '}\n          to upload\n        </p>\n        {maxFileSize !== Number.POSITIVE_INFINITY && (\n          <p className=\"text-xs text-muted-foreground\">\n            Maximum file size: {formatBytes(maxFileSize, 2)}\n          </p>\n        )}\n      </div>\n    </div>\n  )\n}\n\nconst useDropzoneContext = () => {\n  const context = useContext(DropzoneContext)\n\n  if (!context) {\n    throw new Error('useDropzoneContext must be used within a Dropzone')\n  }\n\n  return context\n}\n\nexport { Dropzone, DropzoneContent, DropzoneEmptyState, useDropzoneContext }\n",
       "type": "registry:component"
     },
     {
       "path": "registry/default/blocks/dropzone/hooks/use-supabase-upload.ts",
-      "content": "import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\nimport { type FileError, type FileRejection, useDropzone } from 'react-dropzone'\n\nconst supabase = createClient()\n\ninterface FileWithPreview extends File {\n  preview?: string\n  errors: readonly FileError[]\n}\n\ntype UseSupabaseUploadOptions = {\n  /**\n   * Name of bucket to upload files to in your Supabase project\n   */\n  bucketName: string\n  /**\n   * Folder to upload files to in the specified bucket within your Supabase project.\n   *\n   * Defaults to uploading files to the root of the bucket\n   *\n   * e.g If specified path is `test`, your file will be uploaded as `test/file_name`\n   */\n  path?: string\n  /**\n   * Allowed MIME types for each file upload (e.g `image/png`, `text/html`, etc). Wildcards are also supported (e.g `image/*`).\n   *\n   * Defaults to allowing uploading of all MIME types.\n   */\n  allowedMimeTypes?: string[]\n  /**\n   * Maximum upload size of each file allowed in bytes. (e.g 1000 bytes = 1 KB)\n   */\n  maxFileSize?: number\n  /**\n   * Maximum number of files allowed per upload.\n   */\n  maxFiles?: number\n  /**\n   * The number of seconds the asset is cached in the browser and in the Supabase CDN.\n   *\n   * This is set in the Cache-Control: max-age=<seconds> header. Defaults to 3600 seconds.\n   */\n  cacheControl?: number\n  /**\n   * When set to true, the file is overwritten if it exists.\n   *\n   * When set to false, an error is thrown if the object already exists. Defaults to `false`\n   */\n  upsert?: boolean\n}\n\ntype UseSupabaseUploadReturn = ReturnType<typeof useSupabaseUpload>\n\nconst useSupabaseUpload = (options: UseSupabaseUploadOptions) => {\n  const {\n    bucketName,\n    path,\n    allowedMimeTypes = [],\n    maxFileSize = Number.POSITIVE_INFINITY,\n    maxFiles = 1,\n    cacheControl = 3600,\n    upsert = false,\n  } = options\n\n  const [files, setFiles] = useState<FileWithPreview[]>([])\n  const [loading, setLoading] = useState<boolean>(false)\n  const [errors, setErrors] = useState<{ name: string; message: string }[]>([])\n  const [successes, setSuccesses] = useState<string[]>([])\n\n  const isSuccess = useMemo(() => {\n    if (errors.length === 0 && successes.length === 0) {\n      return false\n    }\n    if (errors.length === 0 && successes.length === files.length) {\n      return true\n    }\n    return false\n  }, [errors.length, successes.length, files.length])\n\n  const onDrop = useCallback(\n    (acceptedFiles: File[], fileRejections: FileRejection[]) => {\n      const validFiles = acceptedFiles\n        .filter((file) => !files.find((x) => x.name === file.name))\n        .map((file) => {\n          ;(file as FileWithPreview).preview = URL.createObjectURL(file)\n          ;(file as FileWithPreview).errors = []\n          return file as FileWithPreview\n        })\n\n      const invalidFiles = fileRejections.map(({ file, errors }) => {\n        ;(file as FileWithPreview).preview = URL.createObjectURL(file)\n        ;(file as FileWithPreview).errors = errors\n        return file as FileWithPreview\n      })\n\n      const newFiles = [...files, ...validFiles, ...invalidFiles]\n\n      setFiles(newFiles)\n    },\n    [files, setFiles]\n  )\n\n  const dropzoneProps = useDropzone({\n    onDrop,\n    noClick: true,\n    accept: allowedMimeTypes.reduce((acc, type) => ({ ...acc, [type]: [] }), {}),\n    maxSize: maxFileSize,\n    maxFiles: maxFiles,\n    multiple: maxFiles !== 1,\n  })\n\n  const onUpload = useCallback(async () => {\n    setLoading(true)\n\n    // [Joshen] This is to support handling partial successes\n    // If any files didn't upload for any reason, hitting \"Upload\" again will only upload the files that had errors\n    const filesWithErrors = errors.map((x) => x.name)\n    const filesToUpload =\n      filesWithErrors.length > 0\n        ? [\n            ...files.filter((f) => filesWithErrors.includes(f.name)),\n            ...files.filter((f) => !successes.includes(f.name)),\n          ]\n        : files\n\n    const responses = await Promise.all(\n      filesToUpload.map(async (file) => {\n        const { error } = await supabase.storage\n          .from(bucketName)\n          .upload(!!path ? `${path}/${file.name}` : file.name, file, {\n            cacheControl: cacheControl.toString(),\n            upsert,\n          })\n        if (error) {\n          return { name: file.name, message: error.message }\n        } else {\n          return { name: file.name, message: undefined }\n        }\n      })\n    )\n\n    const responseErrors = responses.filter((x) => x.message !== undefined)\n    // if there were errors previously, this function tried to upload the files again so we should clear/overwrite the existing errors.\n    setErrors(responseErrors)\n\n    const responseSuccesses = responses.filter((x) => x.message === undefined)\n    const newSuccesses = Array.from(\n      new Set([...successes, ...responseSuccesses.map((x) => x.name)])\n    )\n    setSuccesses(newSuccesses)\n\n    setLoading(false)\n  }, [files, path, bucketName, errors, successes])\n\n  useEffect(() => {\n    if (files.length === 0) {\n      setErrors([])\n    }\n\n    // If the number of files doesn't exceed the maxFiles parameter, remove the error 'Too many files' from each file\n    if (files.length <= maxFiles) {\n      let changed = false\n      const newFiles = files.map((file) => {\n        if (file.errors.some((e) => e.code === 'too-many-files')) {\n          file.errors = file.errors.filter((e) => e.code !== 'too-many-files')\n          changed = true\n        }\n        return file\n      })\n      if (changed) {\n        setFiles(newFiles)\n      }\n    }\n  }, [files.length, setFiles, maxFiles])\n\n  return {\n    files,\n    setFiles,\n    successes,\n    isSuccess,\n    loading,\n    errors,\n    setErrors,\n    onUpload,\n    maxFileSize: maxFileSize,\n    maxFiles: maxFiles,\n    allowedMimeTypes,\n    ...dropzoneProps,\n  }\n}\n\nexport { useSupabaseUpload, type UseSupabaseUploadOptions, type UseSupabaseUploadReturn }\n",
+      "content": "import { useCallback, useEffect, useMemo, useState } from 'react'\nimport { useDropzone, type FileError, type FileRejection } from 'react-dropzone'\n\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\n\nconst supabase = createClient()\n\ninterface FileWithPreview extends File {\n  preview?: string\n  errors: readonly FileError[]\n}\n\ntype UseSupabaseUploadOptions = {\n  /**\n   * Name of bucket to upload files to in your Supabase project\n   */\n  bucketName: string\n  /**\n   * Folder to upload files to in the specified bucket within your Supabase project.\n   *\n   * Defaults to uploading files to the root of the bucket\n   *\n   * e.g If specified path is `test`, your file will be uploaded as `test/file_name`\n   */\n  path?: string\n  /**\n   * Allowed MIME types for each file upload (e.g `image/png`, `text/html`, etc). Wildcards are also supported (e.g `image/*`).\n   *\n   * Defaults to allowing uploading of all MIME types.\n   */\n  allowedMimeTypes?: string[]\n  /**\n   * Maximum upload size of each file allowed in bytes. (e.g 1000 bytes = 1 KB)\n   */\n  maxFileSize?: number\n  /**\n   * Maximum number of files allowed per upload.\n   */\n  maxFiles?: number\n  /**\n   * The number of seconds the asset is cached in the browser and in the Supabase CDN.\n   *\n   * This is set in the Cache-Control: max-age=<seconds> header. Defaults to 3600 seconds.\n   */\n  cacheControl?: number\n  /**\n   * When set to true, the file is overwritten if it exists.\n   *\n   * When set to false, an error is thrown if the object already exists. Defaults to `false`\n   */\n  upsert?: boolean\n}\n\ntype UseSupabaseUploadReturn = ReturnType<typeof useSupabaseUpload>\n\nconst useSupabaseUpload = (options: UseSupabaseUploadOptions) => {\n  const {\n    bucketName,\n    path,\n    allowedMimeTypes = [],\n    maxFileSize = Number.POSITIVE_INFINITY,\n    maxFiles = 1,\n    cacheControl = 3600,\n    upsert = false,\n  } = options\n\n  const [files, setFiles] = useState<FileWithPreview[]>([])\n  const [loading, setLoading] = useState<boolean>(false)\n  const [errors, setErrors] = useState<{ name: string; message: string }[]>([])\n  const [successes, setSuccesses] = useState<string[]>([])\n\n  const isSuccess = useMemo(() => {\n    if (errors.length === 0 && successes.length === 0) {\n      return false\n    }\n    if (errors.length === 0 && successes.length === files.length) {\n      return true\n    }\n    return false\n  }, [errors.length, successes.length, files.length])\n\n  const onDrop = useCallback(\n    (acceptedFiles: File[], fileRejections: FileRejection[]) => {\n      const validFiles = acceptedFiles\n        .filter((file) => !files.find((x) => x.name === file.name))\n        .map((file) => {\n          ;(file as FileWithPreview).preview = URL.createObjectURL(file)\n          ;(file as FileWithPreview).errors = []\n          return file as FileWithPreview\n        })\n\n      const invalidFiles = fileRejections.map(({ file, errors }) => {\n        ;(file as FileWithPreview).preview = URL.createObjectURL(file)\n        ;(file as FileWithPreview).errors = errors\n        return file as FileWithPreview\n      })\n\n      const newFiles = [...files, ...validFiles, ...invalidFiles]\n\n      setFiles(newFiles)\n    },\n    [files, setFiles]\n  )\n\n  const dropzoneProps = useDropzone({\n    onDrop,\n    noClick: true,\n    accept: allowedMimeTypes.reduce((acc, type) => ({ ...acc, [type]: [] }), {}),\n    maxSize: maxFileSize,\n    maxFiles: maxFiles,\n    multiple: maxFiles !== 1,\n  })\n\n  const onUpload = useCallback(async () => {\n    setLoading(true)\n\n    // [Joshen] This is to support handling partial successes\n    // If any files didn't upload for any reason, hitting \"Upload\" again will only upload the files that had errors\n    const filesWithErrors = errors.map((x) => x.name)\n    const filesToUpload =\n      filesWithErrors.length > 0\n        ? [\n            ...files.filter((f) => filesWithErrors.includes(f.name)),\n            ...files.filter((f) => !successes.includes(f.name)),\n          ]\n        : files\n\n    const responses = await Promise.all(\n      filesToUpload.map(async (file) => {\n        const { error } = await supabase.storage\n          .from(bucketName)\n          .upload(!!path ? `${path}/${file.name}` : file.name, file, {\n            cacheControl: cacheControl.toString(),\n            upsert,\n          })\n        if (error) {\n          return { name: file.name, message: error.message }\n        } else {\n          return { name: file.name, message: undefined }\n        }\n      })\n    )\n\n    const responseErrors = responses.filter((x) => x.message !== undefined)\n    // if there were errors previously, this function tried to upload the files again so we should clear/overwrite the existing errors.\n    setErrors(responseErrors)\n\n    const responseSuccesses = responses.filter((x) => x.message === undefined)\n    const newSuccesses = Array.from(\n      new Set([...successes, ...responseSuccesses.map((x) => x.name)])\n    )\n    setSuccesses(newSuccesses)\n\n    setLoading(false)\n  }, [files, path, bucketName, errors, successes])\n\n  useEffect(() => {\n    if (files.length === 0) {\n      setErrors([])\n    }\n\n    // If the number of files doesn't exceed the maxFiles parameter, remove the error 'Too many files' from each file\n    if (files.length <= maxFiles) {\n      let changed = false\n      const newFiles = files.map((file) => {\n        if (file.errors.some((e) => e.code === 'too-many-files')) {\n          file.errors = file.errors.filter((e) => e.code !== 'too-many-files')\n          changed = true\n        }\n        return file\n      })\n      if (changed) {\n        setFiles(newFiles)\n      }\n    }\n  }, [files.length, setFiles, maxFiles])\n\n  return {\n    files,\n    setFiles,\n    successes,\n    isSuccess,\n    loading,\n    errors,\n    setErrors,\n    onUpload,\n    maxFileSize: maxFileSize,\n    maxFiles: maxFiles,\n    allowedMimeTypes,\n    ...dropzoneProps,\n  }\n}\n\nexport { useSupabaseUpload, type UseSupabaseUploadOptions, type UseSupabaseUploadReturn }\n",
       "type": "registry:hook"
     },
     {
diff --git a/apps/ui-library/public/r/dropzone-nuxtjs.json b/apps/ui-library/public/r/dropzone-nuxtjs.json
index 75767efe597..91f4668894c 100644
--- a/apps/ui-library/public/r/dropzone-nuxtjs.json
+++ b/apps/ui-library/public/r/dropzone-nuxtjs.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/default/dropzone/nuxtjs/app/components/dropzone.vue",
-      "content": "<script setup lang=\"ts\">\nimport { provide, inject } from 'vue'\nimport { cn } from \"@/lib/utils\"\n\ninterface File {\n  name: string\n  errors: Array<{ message: string }>\n  size: number\n  lastModified?: number\n  type?: string\n  preview?: string\n}\n\nexport interface DropzoneProps {\n  className?: string\n  isDragActive?: boolean\n  isDragReject?: boolean\n  isSuccess?: boolean\n  maxFiles?: number\n  maxFileSize?: number\n  inputRef?: HTMLInputElement | null\n  setFiles: (files: File[]) => void\n  onUpload: () => Promise<void>\n  loading?: boolean\n  successes: string[]\n  errors: Array<{ name: string; message: string }>\n  files: File[]\n  getRootProps: (options?: Record<string, unknown>) => Record<string, unknown>\n  getInputProps: () => Record<string, unknown>\n}\n\nexport const formatBytes = (\n  bytes: number,\n  decimals = 2,\n  size?: 'bytes' | 'KB' | 'MB' | 'GB' | 'TB' | 'PB' | 'EB' | 'ZB' | 'YB'\n) => {\n  const k = 1000\n  const dm = decimals < 0 ? 0 : decimals\n  const sizes = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']\n\n  if (!bytes || bytes < 0) return size ? `0 ${size}` : '0 bytes'\n\n  const i = size\n    ? Math.max(0, sizes.indexOf(size))\n    : Math.max(0, Math.min(sizes.length - 1, Math.floor(Math.log(bytes) / Math.log(k))))\n\n  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]\n}\n\n\nconst DropzoneContext = Symbol('DropzoneContext')\n\nexport function useDropzoneContext() {\n  const ctx = inject<DropzoneProps>(DropzoneContext)\n  if (!ctx) throw new Error('useDropzoneContext must be used within <Dropzone>')\n  return ctx\n}\n\nconst props = defineProps<DropzoneProps>()\n\nprovide(DropzoneContext, props)\n</script>\n\n<template>\n  <div\n    v-bind=\"props.getRootProps({\n      class: cn(\n        'border-2 border-gray-300 rounded-lg p-6 text-center bg-card transition-colors duration-300 text-foreground',\n        props.className,\n        props.isSuccess ? 'border-solid' : 'border-dashed',\n        props.isDragActive && 'border-primary bg-primary/10',\n        ((props.isDragActive && props.isDragReject) ||\n          (props.errors.length > 0 && !props.isSuccess) ||\n          props.files.some(f => f.errors.length !== 0))\n          && 'border-destructive bg-destructive/10'\n      )\n    })\"\n  >\n    <input v-bind=\"props.getInputProps()\" />\n    <slot />\n  </div>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { provide, inject } from 'vue'\nimport { cn } from '@/lib/utils'\n\ninterface File {\n  name: string\n  errors: Array<{ message: string }>\n  size: number\n  lastModified?: number\n  type?: string\n  preview?: string\n}\n\nexport interface DropzoneProps {\n  className?: string\n  isDragActive?: boolean\n  isDragReject?: boolean\n  isSuccess?: boolean\n  maxFiles?: number\n  maxFileSize?: number\n  inputRef?: HTMLInputElement | null\n  setFiles: (files: File[]) => void\n  onUpload: () => Promise<void>\n  loading?: boolean\n  successes: string[]\n  errors: Array<{ name: string; message: string }>\n  files: File[]\n  getRootProps: (options?: Record<string, unknown>) => Record<string, unknown>\n  getInputProps: () => Record<string, unknown>\n}\n\nexport const formatBytes = (\n  bytes: number,\n  decimals = 2,\n  size?: 'bytes' | 'KB' | 'MB' | 'GB' | 'TB' | 'PB' | 'EB' | 'ZB' | 'YB'\n) => {\n  const k = 1000\n  const dm = decimals < 0 ? 0 : decimals\n  const sizes = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']\n\n  if (!bytes || bytes < 0) return size ? `0 ${size}` : '0 bytes'\n\n  const i = size\n    ? Math.max(0, sizes.indexOf(size))\n    : Math.max(0, Math.min(sizes.length - 1, Math.floor(Math.log(bytes) / Math.log(k))))\n\n  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]\n}\n\nconst DropzoneContext = Symbol('DropzoneContext')\n\nexport function useDropzoneContext() {\n  const ctx = inject<DropzoneProps>(DropzoneContext)\n  if (!ctx) throw new Error('useDropzoneContext must be used within <Dropzone>')\n  return ctx\n}\n\nconst props = defineProps<DropzoneProps>()\n\nprovide(DropzoneContext, props)\n</script>\n\n<template>\n  <div\n    v-bind=\"\n      props.getRootProps({\n        class: cn(\n          'border-2 border-gray-300 rounded-lg p-6 text-center bg-card transition-colors duration-300 text-foreground',\n          props.className,\n          props.isSuccess ? 'border-solid' : 'border-dashed',\n          props.isDragActive && 'border-primary bg-primary/10',\n          ((props.isDragActive && props.isDragReject) ||\n            (props.errors.length > 0 && !props.isSuccess) ||\n            props.files.some((f) => f.errors.length !== 0)) &&\n            'border-destructive bg-destructive/10'\n        ),\n      })\n    \"\n  >\n    <input v-bind=\"props.getInputProps()\" />\n    <slot />\n  </div>\n</template>\n",
       "type": "registry:component",
       "target": "app/components/dropzone.vue"
     },
@@ -33,7 +33,7 @@
     },
     {
       "path": "registry/default/dropzone/nuxtjs/app/composables/useSupabaseUpload.ts",
-      "content": "import { ref, computed, watch, onUnmounted } from 'vue'\nimport { useDropZone } from '@vueuse/core'\nimport { createClient } from \"@/lib/supabase/client\"\n\nconst supabase = createClient()\n\nexport interface FileWithPreview extends File {\n  preview?: string\n  errors: { code: string; message: string }[]\n}\n\nexport type UseSupabaseUploadOptions = {\n  bucketName: string\n  path?: string\n  allowedMimeTypes?: string[]\n  maxFileSize?: number\n  maxFiles?: number\n  cacheControl?: number\n  upsert?: boolean\n}\n\nfunction validateFileType(file: File, allowedTypes: string[]) {\n  if (!allowedTypes.length) return []\n  const isValid = allowedTypes.some(t =>\n    t.endsWith('/*')\n      ? file.type.startsWith(t.replace('/*', ''))\n      : file.type === t\n  )\n  return isValid\n    ? []\n    : [{ code: 'invalid-type', message: 'Invalid file type' }]\n}\n\nfunction validateFileSize(file: File, maxSize: number) {\n  return file.size > maxSize\n    ? [{ code: 'file-too-large', message: `File is larger than allowed size` }]\n    : []\n}\n\nexport function useSupabaseUpload(options: UseSupabaseUploadOptions) {\n  const {\n    bucketName,\n    path,\n    allowedMimeTypes = [],\n    maxFileSize = Number.POSITIVE_INFINITY,\n    maxFiles = 1,\n    cacheControl = 3600,\n    upsert = false,\n  } = options\n\n  const files = ref<FileWithPreview[]>([])\n  const loading = ref(false)\n  const errors = ref<{ name: string; message: string }[]>([])\n  const successes = ref<string[]>([])\n\n  const isSuccess = computed(() => {\n    if (!errors.value.length && !successes.value.length) return false\n    return !errors.value.length && successes.value.length === files.value.length\n  })\n\n  const dropZoneRef = ref<HTMLElement | null>(null)\n\n  const { isOverDropZone } = useDropZone(dropZoneRef, {\n    onDrop(droppedFiles: FileWithPreview[]) {\n      if (!droppedFiles) return\n\n      const newFiles: FileWithPreview[] = droppedFiles.map(file => ({\n        ...(file as FileWithPreview),\n        preview: URL.createObjectURL(file),\n        errors: [\n          ...validateFileType(file, allowedMimeTypes),\n          ...validateFileSize(file, maxFileSize),\n        ],\n      }))\n\n      files.value = [...files.value, ...newFiles]\n    },\n  })\n\n  const onUpload = async () => {\n    loading.value = true\n\n    try {\n      const filesWithErrors = errors.value.map(e => e.name)\n\n      const filesToUpload =\n        filesWithErrors.length > 0\n          ? files.value.filter(\n              f =>\n                filesWithErrors.includes(f.name) ||\n                !successes.value.includes(f.name)\n            )\n          : files.value\n\n      const responses = await Promise.all(\n        filesToUpload.map(async file => {\n          const { error } = await supabase.storage\n            .from(bucketName)\n            .upload(path ? `${path}/${file.name}` : file.name, file, {\n              cacheControl: cacheControl.toString(),\n              upsert,\n            })\n\n          return error\n            ? { name: file.name, message: error.message }\n            : { name: file.name, message: undefined }\n        })\n      )\n\n      errors.value = responses.filter((r): r is { name: string; message: string } => r.message !== undefined)\n\n      const successful = responses\n        .filter(r => !r.message)\n        .map(r => r.name)\n\n      successes.value = Array.from(\n        new Set([...successes.value, ...successful])\n      )\n    } catch (err) {\n      console.error('Upload failed unexpectedly:', err)\n\n      errors.value.push({\n        name: 'upload',\n        message: 'An unexpected error occurred during upload.',\n      })\n    } finally {\n      loading.value = false\n    }\n  }\n\n\n  watch(\n    () => files.value.length,\n    () => {\n      if (!files.value.length) {\n        errors.value = []\n        successes.value = []\n      }\n\n      if (files.value.length > maxFiles) {\n        errors.value.push({\n          name: 'files',\n          message: `You may upload up to ${maxFiles} files`,\n        })\n      }\n    }\n  )\n\n  watch(\n    files,\n    (newFiles, oldFiles) => {\n      const newPreviews = new Set(newFiles.map(f => f.preview))\n      oldFiles.forEach(file => {\n        if (file.preview && !newPreviews.has(file.preview)) {\n          URL.revokeObjectURL(file.preview)\n        }\n      })\n    },\n    { deep: true }\n  )\n\n  onUnmounted(() => {\n    files.value.forEach(file => {\n      if (file.preview) {\n        URL.revokeObjectURL(file.preview)\n      }\n    })\n  })\n\n  return {\n    dropZoneRef,\n    isOverDropZone,\n\n    files,\n    setFiles: (v: FileWithPreview[]) => (files.value = v),\n\n    errors,\n    setErrors: (v: { name: string; message: string }[]) => (errors.value = v),\n\n    successes,\n    isSuccess,\n    loading,\n    onUpload,\n\n    maxFileSize,\n    maxFiles,\n    allowedMimeTypes,\n  }\n}\n",
+      "content": "import { ref, computed, watch, onUnmounted } from 'vue'\nimport { useDropZone } from '@vueuse/core'\n// @ts-ignore\nimport { createClient } from \"@/lib/supabase/client\"\n\nconst supabase = createClient()\n\nexport interface FileWithPreview extends File {\n  preview?: string\n  errors: { code: string; message: string }[]\n}\n\nexport type UseSupabaseUploadOptions = {\n  bucketName: string\n  path?: string\n  allowedMimeTypes?: string[]\n  maxFileSize?: number\n  maxFiles?: number\n  cacheControl?: number\n  upsert?: boolean\n}\n\nfunction validateFileType(file: File, allowedTypes: string[]) {\n  if (!allowedTypes.length) return []\n  const isValid = allowedTypes.some(t =>\n    t.endsWith('/*')\n      ? file.type.startsWith(t.replace('/*', ''))\n      : file.type === t\n  )\n  return isValid\n    ? []\n    : [{ code: 'invalid-type', message: 'Invalid file type' }]\n}\n\nfunction validateFileSize(file: File, maxSize: number) {\n  return file.size > maxSize\n    ? [{ code: 'file-too-large', message: `File is larger than allowed size` }]\n    : []\n}\n\nexport function useSupabaseUpload(options: UseSupabaseUploadOptions) {\n  const {\n    bucketName,\n    path,\n    allowedMimeTypes = [],\n    maxFileSize = Number.POSITIVE_INFINITY,\n    maxFiles = 1,\n    cacheControl = 3600,\n    upsert = false,\n  } = options\n\n  const files = ref<FileWithPreview[]>([])\n  const loading = ref(false)\n  const errors = ref<{ name: string; message: string }[]>([])\n  const successes = ref<string[]>([])\n\n  const isSuccess = computed(() => {\n    if (!errors.value.length && !successes.value.length) return false\n    return !errors.value.length && successes.value.length === files.value.length\n  })\n\n  const dropZoneRef = ref<HTMLElement | null>(null)\n\n  const { isOverDropZone } = useDropZone(dropZoneRef, {\n    onDrop(droppedFiles: File[] | null) {\n      if (!droppedFiles) return\n\n      const newFiles: FileWithPreview[] = droppedFiles.map(file => ({\n        ...(file as FileWithPreview),\n        preview: URL.createObjectURL(file),\n        errors: [\n          ...validateFileType(file, allowedMimeTypes),\n          ...validateFileSize(file, maxFileSize),\n        ],\n      }))\n\n      files.value = [...files.value, ...newFiles]\n    },\n  })\n\n  const onUpload = async () => {\n    loading.value = true\n\n    try {\n      const filesWithErrors = errors.value.map(e => e.name)\n\n      const filesToUpload =\n        filesWithErrors.length > 0\n          ? files.value.filter(\n              f =>\n                filesWithErrors.includes(f.name) ||\n                !successes.value.includes(f.name)\n            )\n          : files.value\n\n      const responses = await Promise.all(\n        filesToUpload.map(async file => {\n          const { error } = await supabase.storage\n            .from(bucketName)\n            .upload(path ? `${path}/${file.name}` : file.name, file, {\n              cacheControl: cacheControl.toString(),\n              upsert,\n            })\n\n          return error\n            ? { name: file.name, message: error.message }\n            : { name: file.name, message: undefined }\n        })\n      )\n\n      errors.value = responses.filter((r): r is { name: string; message: string } => r.message !== undefined)\n\n      const successful = responses\n        .filter(r => !r.message)\n        .map(r => r.name)\n\n      successes.value = Array.from(\n        new Set([...successes.value, ...successful])\n      )\n    } catch (err) {\n      console.error('Upload failed unexpectedly:', err)\n\n      errors.value.push({\n        name: 'upload',\n        message: 'An unexpected error occurred during upload.',\n      })\n    } finally {\n      loading.value = false\n    }\n  }\n\n\n  watch(\n    () => files.value.length,\n    () => {\n      if (!files.value.length) {\n        errors.value = []\n        successes.value = []\n      }\n\n      if (files.value.length > maxFiles) {\n        errors.value.push({\n          name: 'files',\n          message: `You may upload up to ${maxFiles} files`,\n        })\n      }\n    }\n  )\n\n  watch(\n    files,\n    (newFiles, oldFiles) => {\n      const newPreviews = new Set(newFiles.map(f => f.preview))\n      oldFiles.forEach(file => {\n        if (file.preview && !newPreviews.has(file.preview)) {\n          URL.revokeObjectURL(file.preview)\n        }\n      })\n    },\n    { deep: true }\n  )\n\n  onUnmounted(() => {\n    files.value.forEach(file => {\n      if (file.preview) {\n        URL.revokeObjectURL(file.preview)\n      }\n    })\n  })\n\n  return {\n    dropZoneRef,\n    isOverDropZone,\n\n    files,\n    setFiles: (v: FileWithPreview[]) => (files.value = v),\n\n    errors,\n    setErrors: (v: { name: string; message: string }[]) => (errors.value = v),\n\n    successes,\n    isSuccess,\n    loading,\n    onUpload,\n\n    maxFileSize,\n    maxFiles,\n    allowedMimeTypes,\n  }\n}\n",
       "type": "registry:component",
       "target": "app/composables/useSupabaseUpload.ts"
     }
diff --git a/apps/ui-library/public/r/dropzone-react-router.json b/apps/ui-library/public/r/dropzone-react-router.json
index 5ae33b305e2..60d6a973af5 100644
--- a/apps/ui-library/public/r/dropzone-react-router.json
+++ b/apps/ui-library/public/r/dropzone-react-router.json
@@ -16,12 +16,12 @@
   "files": [
     {
       "path": "registry/default/blocks/dropzone/components/dropzone.tsx",
-      "content": "'use client'\n\nimport { cn } from '@/lib/utils'\nimport { type UseSupabaseUploadReturn } from '@/registry/default/blocks/dropzone/hooks/use-supabase-upload'\nimport { Button } from '@/registry/default/components/ui/button'\nimport { CheckCircle, File, Loader2, Upload, X } from 'lucide-react'\nimport { createContext, type PropsWithChildren, useCallback, useContext } from 'react'\n\nexport const formatBytes = (\n  bytes: number,\n  decimals = 2,\n  size?: 'bytes' | 'KB' | 'MB' | 'GB' | 'TB' | 'PB' | 'EB' | 'ZB' | 'YB'\n) => {\n  const k = 1000\n  const dm = decimals < 0 ? 0 : decimals\n  const sizes = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']\n\n  if (bytes === 0 || bytes === undefined) return size !== undefined ? `0 ${size}` : '0 bytes'\n  const i = size !== undefined ? sizes.indexOf(size) : Math.floor(Math.log(bytes) / Math.log(k))\n  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]\n}\n\ntype DropzoneContextType = Omit<UseSupabaseUploadReturn, 'getRootProps' | 'getInputProps'>\n\nconst DropzoneContext = createContext<DropzoneContextType | undefined>(undefined)\n\ntype DropzoneProps = UseSupabaseUploadReturn & {\n  className?: string\n}\n\nconst Dropzone = ({\n  className,\n  children,\n  getRootProps,\n  getInputProps,\n  ...restProps\n}: PropsWithChildren<DropzoneProps>) => {\n  const isSuccess = restProps.isSuccess\n  const isActive = restProps.isDragActive\n  const isInvalid =\n    (restProps.isDragActive && restProps.isDragReject) ||\n    (restProps.errors.length > 0 && !restProps.isSuccess) ||\n    restProps.files.some((file) => file.errors.length !== 0)\n\n  return (\n    <DropzoneContext.Provider value={{ ...restProps }}>\n      <div\n        {...getRootProps({\n          className: cn(\n            'border-2 border-gray-300 rounded-lg p-6 text-center bg-card transition-colors duration-300 text-foreground',\n            className,\n            isSuccess ? 'border-solid' : 'border-dashed',\n            isActive && 'border-primary bg-primary/10',\n            isInvalid && 'border-destructive bg-destructive/10'\n          ),\n        })}\n      >\n        <input {...getInputProps()} />\n        {children}\n      </div>\n    </DropzoneContext.Provider>\n  )\n}\nconst DropzoneContent = ({ className }: { className?: string }) => {\n  const {\n    files,\n    setFiles,\n    onUpload,\n    loading,\n    successes,\n    errors,\n    maxFileSize,\n    maxFiles,\n    isSuccess,\n  } = useDropzoneContext()\n\n  const exceedMaxFiles = files.length > maxFiles\n\n  const handleRemoveFile = useCallback(\n    (fileName: string) => {\n      setFiles(files.filter((file) => file.name !== fileName))\n    },\n    [files, setFiles]\n  )\n\n  if (isSuccess) {\n    return (\n      <div className={cn('flex flex-row items-center gap-x-2 justify-center', className)}>\n        <CheckCircle size={16} className=\"text-primary\" />\n        <p className=\"text-primary text-sm\">\n          Successfully uploaded {files.length} file{files.length > 1 ? 's' : ''}\n        </p>\n      </div>\n    )\n  }\n\n  return (\n    <div className={cn('flex flex-col', className)}>\n      {files.map((file, idx) => {\n        const fileError = errors.find((e) => e.name === file.name)\n        const isSuccessfullyUploaded = !!successes.find((e) => e === file.name)\n\n        return (\n          <div\n            key={`${file.name}-${idx}`}\n            className=\"flex items-center gap-x-4 border-b py-2 first:mt-4 last:mb-4 \"\n          >\n            {file.type.startsWith('image/') ? (\n              <div className=\"h-10 w-10 rounded border overflow-hidden shrink-0 bg-muted flex items-center justify-center\">\n                <img src={file.preview} alt={file.name} className=\"object-cover\" />\n              </div>\n            ) : (\n              <div className=\"h-10 w-10 rounded border bg-muted flex items-center justify-center\">\n                <File size={18} />\n              </div>\n            )}\n\n            <div className=\"shrink grow flex flex-col items-start truncate\">\n              <p title={file.name} className=\"text-sm truncate max-w-full\">\n                {file.name}\n              </p>\n              {file.errors.length > 0 ? (\n                <p className=\"text-xs text-destructive\">\n                  {file.errors\n                    .map((e) =>\n                      e.message.startsWith('File is larger than')\n                        ? `File is larger than ${formatBytes(maxFileSize, 2)} (Size: ${formatBytes(file.size, 2)})`\n                        : e.message\n                    )\n                    .join(', ')}\n                </p>\n              ) : loading && !isSuccessfullyUploaded ? (\n                <p className=\"text-xs text-muted-foreground\">Uploading file...</p>\n              ) : !!fileError ? (\n                <p className=\"text-xs text-destructive\">Failed to upload: {fileError.message}</p>\n              ) : isSuccessfullyUploaded ? (\n                <p className=\"text-xs text-primary\">Successfully uploaded file</p>\n              ) : (\n                <p className=\"text-xs text-muted-foreground\">{formatBytes(file.size, 2)}</p>\n              )}\n            </div>\n\n            {!loading && !isSuccessfullyUploaded && (\n              <Button\n                size=\"icon\"\n                variant=\"link\"\n                className=\"shrink-0 justify-self-end text-muted-foreground hover:text-foreground\"\n                onClick={() => handleRemoveFile(file.name)}\n              >\n                <X />\n              </Button>\n            )}\n          </div>\n        )\n      })}\n      {exceedMaxFiles && (\n        <p className=\"text-sm text-left mt-2 text-destructive\">\n          You may upload only up to {maxFiles} files, please remove {files.length - maxFiles} file\n          {files.length - maxFiles > 1 ? 's' : ''}.\n        </p>\n      )}\n      {files.length > 0 && !exceedMaxFiles && (\n        <div className=\"mt-2\">\n          <Button\n            variant=\"outline\"\n            onClick={onUpload}\n            disabled={files.some((file) => file.errors.length !== 0) || loading}\n          >\n            {loading ? (\n              <>\n                <Loader2 className=\"mr-2 h-4 w-4 animate-spin\" />\n                Uploading...\n              </>\n            ) : (\n              <>Upload files</>\n            )}\n          </Button>\n        </div>\n      )}\n    </div>\n  )\n}\n\nconst DropzoneEmptyState = ({ className }: { className?: string }) => {\n  const { maxFiles, maxFileSize, inputRef, isSuccess } = useDropzoneContext()\n\n  if (isSuccess) {\n    return null\n  }\n\n  return (\n    <div className={cn('flex flex-col items-center gap-y-2', className)}>\n      <Upload size={20} className=\"text-muted-foreground\" />\n      <p className=\"text-sm\">\n        Upload{!!maxFiles && maxFiles > 1 ? ` ${maxFiles}` : ''} file\n        {!maxFiles || maxFiles > 1 ? 's' : ''}\n      </p>\n      <div className=\"flex flex-col items-center gap-y-1\">\n        <p className=\"text-xs text-muted-foreground\">\n          Drag and drop or{' '}\n          <a\n            onClick={() => inputRef.current?.click()}\n            className=\"underline cursor-pointer transition hover:text-foreground\"\n          >\n            select {maxFiles === 1 ? `file` : 'files'}\n          </a>{' '}\n          to upload\n        </p>\n        {maxFileSize !== Number.POSITIVE_INFINITY && (\n          <p className=\"text-xs text-muted-foreground\">\n            Maximum file size: {formatBytes(maxFileSize, 2)}\n          </p>\n        )}\n      </div>\n    </div>\n  )\n}\n\nconst useDropzoneContext = () => {\n  const context = useContext(DropzoneContext)\n\n  if (!context) {\n    throw new Error('useDropzoneContext must be used within a Dropzone')\n  }\n\n  return context\n}\n\nexport { Dropzone, DropzoneContent, DropzoneEmptyState, useDropzoneContext }\n",
+      "content": "'use client'\n\nimport { CheckCircle, File, Loader2, Upload, X } from 'lucide-react'\nimport { createContext, useCallback, useContext, type PropsWithChildren } from 'react'\n\nimport { cn } from '@/lib/utils'\nimport { type UseSupabaseUploadReturn } from '@/registry/default/blocks/dropzone/hooks/use-supabase-upload'\nimport { Button } from '@/registry/default/components/ui/button'\n\nexport const formatBytes = (\n  bytes: number,\n  decimals = 2,\n  size?: 'bytes' | 'KB' | 'MB' | 'GB' | 'TB' | 'PB' | 'EB' | 'ZB' | 'YB'\n) => {\n  const k = 1000\n  const dm = decimals < 0 ? 0 : decimals\n  const sizes = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']\n\n  if (bytes === 0 || bytes === undefined) return size !== undefined ? `0 ${size}` : '0 bytes'\n  const i = size !== undefined ? sizes.indexOf(size) : Math.floor(Math.log(bytes) / Math.log(k))\n  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]\n}\n\ntype DropzoneContextType = Omit<UseSupabaseUploadReturn, 'getRootProps' | 'getInputProps'>\n\nconst DropzoneContext = createContext<DropzoneContextType | undefined>(undefined)\n\ntype DropzoneProps = UseSupabaseUploadReturn & {\n  className?: string\n}\n\nconst Dropzone = ({\n  className,\n  children,\n  getRootProps,\n  getInputProps,\n  ...restProps\n}: PropsWithChildren<DropzoneProps>) => {\n  const isSuccess = restProps.isSuccess\n  const isActive = restProps.isDragActive\n  const isInvalid =\n    (restProps.isDragActive && restProps.isDragReject) ||\n    (restProps.errors.length > 0 && !restProps.isSuccess) ||\n    restProps.files.some((file) => file.errors.length !== 0)\n\n  return (\n    <DropzoneContext.Provider value={{ ...restProps }}>\n      <div\n        {...getRootProps({\n          className: cn(\n            'border-2 border-gray-300 rounded-lg p-6 text-center bg-card transition-colors duration-300 text-foreground',\n            className,\n            isSuccess ? 'border-solid' : 'border-dashed',\n            isActive && 'border-primary bg-primary/10',\n            isInvalid && 'border-destructive bg-destructive/10'\n          ),\n        })}\n      >\n        <input {...getInputProps()} />\n        {children}\n      </div>\n    </DropzoneContext.Provider>\n  )\n}\nconst DropzoneContent = ({ className }: { className?: string }) => {\n  const {\n    files,\n    setFiles,\n    onUpload,\n    loading,\n    successes,\n    errors,\n    maxFileSize,\n    maxFiles,\n    isSuccess,\n  } = useDropzoneContext()\n\n  const exceedMaxFiles = files.length > maxFiles\n\n  const handleRemoveFile = useCallback(\n    (fileName: string) => {\n      setFiles(files.filter((file) => file.name !== fileName))\n    },\n    [files, setFiles]\n  )\n\n  if (isSuccess) {\n    return (\n      <div className={cn('flex flex-row items-center gap-x-2 justify-center', className)}>\n        <CheckCircle size={16} className=\"text-primary\" />\n        <p className=\"text-primary text-sm\">\n          Successfully uploaded {files.length} file{files.length > 1 ? 's' : ''}\n        </p>\n      </div>\n    )\n  }\n\n  return (\n    <div className={cn('flex flex-col', className)}>\n      {files.map((file, idx) => {\n        const fileError = errors.find((e) => e.name === file.name)\n        const isSuccessfullyUploaded = !!successes.find((e) => e === file.name)\n\n        return (\n          <div\n            key={`${file.name}-${idx}`}\n            className=\"flex items-center gap-x-4 border-b py-2 first:mt-4 last:mb-4 \"\n          >\n            {file.type.startsWith('image/') ? (\n              <div className=\"h-10 w-10 rounded border overflow-hidden shrink-0 bg-muted flex items-center justify-center\">\n                <img src={file.preview} alt={file.name} className=\"object-cover\" />\n              </div>\n            ) : (\n              <div className=\"h-10 w-10 rounded border bg-muted flex items-center justify-center\">\n                <File size={18} />\n              </div>\n            )}\n\n            <div className=\"shrink grow flex flex-col items-start truncate\">\n              <p title={file.name} className=\"text-sm truncate max-w-full\">\n                {file.name}\n              </p>\n              {file.errors.length > 0 ? (\n                <p className=\"text-xs text-destructive\">\n                  {file.errors\n                    .map((e) =>\n                      e.message.startsWith('File is larger than')\n                        ? `File is larger than ${formatBytes(maxFileSize, 2)} (Size: ${formatBytes(file.size, 2)})`\n                        : e.message\n                    )\n                    .join(', ')}\n                </p>\n              ) : loading && !isSuccessfullyUploaded ? (\n                <p className=\"text-xs text-muted-foreground\">Uploading file...</p>\n              ) : !!fileError ? (\n                <p className=\"text-xs text-destructive\">Failed to upload: {fileError.message}</p>\n              ) : isSuccessfullyUploaded ? (\n                <p className=\"text-xs text-primary\">Successfully uploaded file</p>\n              ) : (\n                <p className=\"text-xs text-muted-foreground\">{formatBytes(file.size, 2)}</p>\n              )}\n            </div>\n\n            {!loading && !isSuccessfullyUploaded && (\n              <Button\n                size=\"icon\"\n                variant=\"link\"\n                className=\"shrink-0 justify-self-end text-muted-foreground hover:text-foreground\"\n                onClick={() => handleRemoveFile(file.name)}\n              >\n                <X />\n              </Button>\n            )}\n          </div>\n        )\n      })}\n      {exceedMaxFiles && (\n        <p className=\"text-sm text-left mt-2 text-destructive\">\n          You may upload only up to {maxFiles} files, please remove {files.length - maxFiles} file\n          {files.length - maxFiles > 1 ? 's' : ''}.\n        </p>\n      )}\n      {files.length > 0 && !exceedMaxFiles && (\n        <div className=\"mt-2\">\n          <Button\n            variant=\"outline\"\n            onClick={onUpload}\n            disabled={files.some((file) => file.errors.length !== 0) || loading}\n          >\n            {loading ? (\n              <>\n                <Loader2 className=\"mr-2 h-4 w-4 animate-spin\" />\n                Uploading...\n              </>\n            ) : (\n              <>Upload files</>\n            )}\n          </Button>\n        </div>\n      )}\n    </div>\n  )\n}\n\nconst DropzoneEmptyState = ({ className }: { className?: string }) => {\n  const { maxFiles, maxFileSize, inputRef, isSuccess } = useDropzoneContext()\n\n  if (isSuccess) {\n    return null\n  }\n\n  return (\n    <div className={cn('flex flex-col items-center gap-y-2', className)}>\n      <Upload size={20} className=\"text-muted-foreground\" />\n      <p className=\"text-sm\">\n        Upload{!!maxFiles && maxFiles > 1 ? ` ${maxFiles}` : ''} file\n        {!maxFiles || maxFiles > 1 ? 's' : ''}\n      </p>\n      <div className=\"flex flex-col items-center gap-y-1\">\n        <p className=\"text-xs text-muted-foreground\">\n          Drag and drop or{' '}\n          <a\n            onClick={() => inputRef.current?.click()}\n            className=\"underline cursor-pointer transition hover:text-foreground\"\n          >\n            select {maxFiles === 1 ? `file` : 'files'}\n          </a>{' '}\n          to upload\n        </p>\n        {maxFileSize !== Number.POSITIVE_INFINITY && (\n          <p className=\"text-xs text-muted-foreground\">\n            Maximum file size: {formatBytes(maxFileSize, 2)}\n          </p>\n        )}\n      </div>\n    </div>\n  )\n}\n\nconst useDropzoneContext = () => {\n  const context = useContext(DropzoneContext)\n\n  if (!context) {\n    throw new Error('useDropzoneContext must be used within a Dropzone')\n  }\n\n  return context\n}\n\nexport { Dropzone, DropzoneContent, DropzoneEmptyState, useDropzoneContext }\n",
       "type": "registry:component"
     },
     {
       "path": "registry/default/blocks/dropzone/hooks/use-supabase-upload.ts",
-      "content": "import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\nimport { type FileError, type FileRejection, useDropzone } from 'react-dropzone'\n\nconst supabase = createClient()\n\ninterface FileWithPreview extends File {\n  preview?: string\n  errors: readonly FileError[]\n}\n\ntype UseSupabaseUploadOptions = {\n  /**\n   * Name of bucket to upload files to in your Supabase project\n   */\n  bucketName: string\n  /**\n   * Folder to upload files to in the specified bucket within your Supabase project.\n   *\n   * Defaults to uploading files to the root of the bucket\n   *\n   * e.g If specified path is `test`, your file will be uploaded as `test/file_name`\n   */\n  path?: string\n  /**\n   * Allowed MIME types for each file upload (e.g `image/png`, `text/html`, etc). Wildcards are also supported (e.g `image/*`).\n   *\n   * Defaults to allowing uploading of all MIME types.\n   */\n  allowedMimeTypes?: string[]\n  /**\n   * Maximum upload size of each file allowed in bytes. (e.g 1000 bytes = 1 KB)\n   */\n  maxFileSize?: number\n  /**\n   * Maximum number of files allowed per upload.\n   */\n  maxFiles?: number\n  /**\n   * The number of seconds the asset is cached in the browser and in the Supabase CDN.\n   *\n   * This is set in the Cache-Control: max-age=<seconds> header. Defaults to 3600 seconds.\n   */\n  cacheControl?: number\n  /**\n   * When set to true, the file is overwritten if it exists.\n   *\n   * When set to false, an error is thrown if the object already exists. Defaults to `false`\n   */\n  upsert?: boolean\n}\n\ntype UseSupabaseUploadReturn = ReturnType<typeof useSupabaseUpload>\n\nconst useSupabaseUpload = (options: UseSupabaseUploadOptions) => {\n  const {\n    bucketName,\n    path,\n    allowedMimeTypes = [],\n    maxFileSize = Number.POSITIVE_INFINITY,\n    maxFiles = 1,\n    cacheControl = 3600,\n    upsert = false,\n  } = options\n\n  const [files, setFiles] = useState<FileWithPreview[]>([])\n  const [loading, setLoading] = useState<boolean>(false)\n  const [errors, setErrors] = useState<{ name: string; message: string }[]>([])\n  const [successes, setSuccesses] = useState<string[]>([])\n\n  const isSuccess = useMemo(() => {\n    if (errors.length === 0 && successes.length === 0) {\n      return false\n    }\n    if (errors.length === 0 && successes.length === files.length) {\n      return true\n    }\n    return false\n  }, [errors.length, successes.length, files.length])\n\n  const onDrop = useCallback(\n    (acceptedFiles: File[], fileRejections: FileRejection[]) => {\n      const validFiles = acceptedFiles\n        .filter((file) => !files.find((x) => x.name === file.name))\n        .map((file) => {\n          ;(file as FileWithPreview).preview = URL.createObjectURL(file)\n          ;(file as FileWithPreview).errors = []\n          return file as FileWithPreview\n        })\n\n      const invalidFiles = fileRejections.map(({ file, errors }) => {\n        ;(file as FileWithPreview).preview = URL.createObjectURL(file)\n        ;(file as FileWithPreview).errors = errors\n        return file as FileWithPreview\n      })\n\n      const newFiles = [...files, ...validFiles, ...invalidFiles]\n\n      setFiles(newFiles)\n    },\n    [files, setFiles]\n  )\n\n  const dropzoneProps = useDropzone({\n    onDrop,\n    noClick: true,\n    accept: allowedMimeTypes.reduce((acc, type) => ({ ...acc, [type]: [] }), {}),\n    maxSize: maxFileSize,\n    maxFiles: maxFiles,\n    multiple: maxFiles !== 1,\n  })\n\n  const onUpload = useCallback(async () => {\n    setLoading(true)\n\n    // [Joshen] This is to support handling partial successes\n    // If any files didn't upload for any reason, hitting \"Upload\" again will only upload the files that had errors\n    const filesWithErrors = errors.map((x) => x.name)\n    const filesToUpload =\n      filesWithErrors.length > 0\n        ? [\n            ...files.filter((f) => filesWithErrors.includes(f.name)),\n            ...files.filter((f) => !successes.includes(f.name)),\n          ]\n        : files\n\n    const responses = await Promise.all(\n      filesToUpload.map(async (file) => {\n        const { error } = await supabase.storage\n          .from(bucketName)\n          .upload(!!path ? `${path}/${file.name}` : file.name, file, {\n            cacheControl: cacheControl.toString(),\n            upsert,\n          })\n        if (error) {\n          return { name: file.name, message: error.message }\n        } else {\n          return { name: file.name, message: undefined }\n        }\n      })\n    )\n\n    const responseErrors = responses.filter((x) => x.message !== undefined)\n    // if there were errors previously, this function tried to upload the files again so we should clear/overwrite the existing errors.\n    setErrors(responseErrors)\n\n    const responseSuccesses = responses.filter((x) => x.message === undefined)\n    const newSuccesses = Array.from(\n      new Set([...successes, ...responseSuccesses.map((x) => x.name)])\n    )\n    setSuccesses(newSuccesses)\n\n    setLoading(false)\n  }, [files, path, bucketName, errors, successes])\n\n  useEffect(() => {\n    if (files.length === 0) {\n      setErrors([])\n    }\n\n    // If the number of files doesn't exceed the maxFiles parameter, remove the error 'Too many files' from each file\n    if (files.length <= maxFiles) {\n      let changed = false\n      const newFiles = files.map((file) => {\n        if (file.errors.some((e) => e.code === 'too-many-files')) {\n          file.errors = file.errors.filter((e) => e.code !== 'too-many-files')\n          changed = true\n        }\n        return file\n      })\n      if (changed) {\n        setFiles(newFiles)\n      }\n    }\n  }, [files.length, setFiles, maxFiles])\n\n  return {\n    files,\n    setFiles,\n    successes,\n    isSuccess,\n    loading,\n    errors,\n    setErrors,\n    onUpload,\n    maxFileSize: maxFileSize,\n    maxFiles: maxFiles,\n    allowedMimeTypes,\n    ...dropzoneProps,\n  }\n}\n\nexport { useSupabaseUpload, type UseSupabaseUploadOptions, type UseSupabaseUploadReturn }\n",
+      "content": "import { useCallback, useEffect, useMemo, useState } from 'react'\nimport { useDropzone, type FileError, type FileRejection } from 'react-dropzone'\n\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\n\nconst supabase = createClient()\n\ninterface FileWithPreview extends File {\n  preview?: string\n  errors: readonly FileError[]\n}\n\ntype UseSupabaseUploadOptions = {\n  /**\n   * Name of bucket to upload files to in your Supabase project\n   */\n  bucketName: string\n  /**\n   * Folder to upload files to in the specified bucket within your Supabase project.\n   *\n   * Defaults to uploading files to the root of the bucket\n   *\n   * e.g If specified path is `test`, your file will be uploaded as `test/file_name`\n   */\n  path?: string\n  /**\n   * Allowed MIME types for each file upload (e.g `image/png`, `text/html`, etc). Wildcards are also supported (e.g `image/*`).\n   *\n   * Defaults to allowing uploading of all MIME types.\n   */\n  allowedMimeTypes?: string[]\n  /**\n   * Maximum upload size of each file allowed in bytes. (e.g 1000 bytes = 1 KB)\n   */\n  maxFileSize?: number\n  /**\n   * Maximum number of files allowed per upload.\n   */\n  maxFiles?: number\n  /**\n   * The number of seconds the asset is cached in the browser and in the Supabase CDN.\n   *\n   * This is set in the Cache-Control: max-age=<seconds> header. Defaults to 3600 seconds.\n   */\n  cacheControl?: number\n  /**\n   * When set to true, the file is overwritten if it exists.\n   *\n   * When set to false, an error is thrown if the object already exists. Defaults to `false`\n   */\n  upsert?: boolean\n}\n\ntype UseSupabaseUploadReturn = ReturnType<typeof useSupabaseUpload>\n\nconst useSupabaseUpload = (options: UseSupabaseUploadOptions) => {\n  const {\n    bucketName,\n    path,\n    allowedMimeTypes = [],\n    maxFileSize = Number.POSITIVE_INFINITY,\n    maxFiles = 1,\n    cacheControl = 3600,\n    upsert = false,\n  } = options\n\n  const [files, setFiles] = useState<FileWithPreview[]>([])\n  const [loading, setLoading] = useState<boolean>(false)\n  const [errors, setErrors] = useState<{ name: string; message: string }[]>([])\n  const [successes, setSuccesses] = useState<string[]>([])\n\n  const isSuccess = useMemo(() => {\n    if (errors.length === 0 && successes.length === 0) {\n      return false\n    }\n    if (errors.length === 0 && successes.length === files.length) {\n      return true\n    }\n    return false\n  }, [errors.length, successes.length, files.length])\n\n  const onDrop = useCallback(\n    (acceptedFiles: File[], fileRejections: FileRejection[]) => {\n      const validFiles = acceptedFiles\n        .filter((file) => !files.find((x) => x.name === file.name))\n        .map((file) => {\n          ;(file as FileWithPreview).preview = URL.createObjectURL(file)\n          ;(file as FileWithPreview).errors = []\n          return file as FileWithPreview\n        })\n\n      const invalidFiles = fileRejections.map(({ file, errors }) => {\n        ;(file as FileWithPreview).preview = URL.createObjectURL(file)\n        ;(file as FileWithPreview).errors = errors\n        return file as FileWithPreview\n      })\n\n      const newFiles = [...files, ...validFiles, ...invalidFiles]\n\n      setFiles(newFiles)\n    },\n    [files, setFiles]\n  )\n\n  const dropzoneProps = useDropzone({\n    onDrop,\n    noClick: true,\n    accept: allowedMimeTypes.reduce((acc, type) => ({ ...acc, [type]: [] }), {}),\n    maxSize: maxFileSize,\n    maxFiles: maxFiles,\n    multiple: maxFiles !== 1,\n  })\n\n  const onUpload = useCallback(async () => {\n    setLoading(true)\n\n    // [Joshen] This is to support handling partial successes\n    // If any files didn't upload for any reason, hitting \"Upload\" again will only upload the files that had errors\n    const filesWithErrors = errors.map((x) => x.name)\n    const filesToUpload =\n      filesWithErrors.length > 0\n        ? [\n            ...files.filter((f) => filesWithErrors.includes(f.name)),\n            ...files.filter((f) => !successes.includes(f.name)),\n          ]\n        : files\n\n    const responses = await Promise.all(\n      filesToUpload.map(async (file) => {\n        const { error } = await supabase.storage\n          .from(bucketName)\n          .upload(!!path ? `${path}/${file.name}` : file.name, file, {\n            cacheControl: cacheControl.toString(),\n            upsert,\n          })\n        if (error) {\n          return { name: file.name, message: error.message }\n        } else {\n          return { name: file.name, message: undefined }\n        }\n      })\n    )\n\n    const responseErrors = responses.filter((x) => x.message !== undefined)\n    // if there were errors previously, this function tried to upload the files again so we should clear/overwrite the existing errors.\n    setErrors(responseErrors)\n\n    const responseSuccesses = responses.filter((x) => x.message === undefined)\n    const newSuccesses = Array.from(\n      new Set([...successes, ...responseSuccesses.map((x) => x.name)])\n    )\n    setSuccesses(newSuccesses)\n\n    setLoading(false)\n  }, [files, path, bucketName, errors, successes])\n\n  useEffect(() => {\n    if (files.length === 0) {\n      setErrors([])\n    }\n\n    // If the number of files doesn't exceed the maxFiles parameter, remove the error 'Too many files' from each file\n    if (files.length <= maxFiles) {\n      let changed = false\n      const newFiles = files.map((file) => {\n        if (file.errors.some((e) => e.code === 'too-many-files')) {\n          file.errors = file.errors.filter((e) => e.code !== 'too-many-files')\n          changed = true\n        }\n        return file\n      })\n      if (changed) {\n        setFiles(newFiles)\n      }\n    }\n  }, [files.length, setFiles, maxFiles])\n\n  return {\n    files,\n    setFiles,\n    successes,\n    isSuccess,\n    loading,\n    errors,\n    setErrors,\n    onUpload,\n    maxFileSize: maxFileSize,\n    maxFiles: maxFiles,\n    allowedMimeTypes,\n    ...dropzoneProps,\n  }\n}\n\nexport { useSupabaseUpload, type UseSupabaseUploadOptions, type UseSupabaseUploadReturn }\n",
       "type": "registry:hook"
     },
     {
diff --git a/apps/ui-library/public/r/dropzone-react.json b/apps/ui-library/public/r/dropzone-react.json
index 90c6882d4ae..946f4cb911f 100644
--- a/apps/ui-library/public/r/dropzone-react.json
+++ b/apps/ui-library/public/r/dropzone-react.json
@@ -15,12 +15,12 @@
   "files": [
     {
       "path": "registry/default/blocks/dropzone/components/dropzone.tsx",
-      "content": "'use client'\n\nimport { cn } from '@/lib/utils'\nimport { type UseSupabaseUploadReturn } from '@/registry/default/blocks/dropzone/hooks/use-supabase-upload'\nimport { Button } from '@/registry/default/components/ui/button'\nimport { CheckCircle, File, Loader2, Upload, X } from 'lucide-react'\nimport { createContext, type PropsWithChildren, useCallback, useContext } from 'react'\n\nexport const formatBytes = (\n  bytes: number,\n  decimals = 2,\n  size?: 'bytes' | 'KB' | 'MB' | 'GB' | 'TB' | 'PB' | 'EB' | 'ZB' | 'YB'\n) => {\n  const k = 1000\n  const dm = decimals < 0 ? 0 : decimals\n  const sizes = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']\n\n  if (bytes === 0 || bytes === undefined) return size !== undefined ? `0 ${size}` : '0 bytes'\n  const i = size !== undefined ? sizes.indexOf(size) : Math.floor(Math.log(bytes) / Math.log(k))\n  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]\n}\n\ntype DropzoneContextType = Omit<UseSupabaseUploadReturn, 'getRootProps' | 'getInputProps'>\n\nconst DropzoneContext = createContext<DropzoneContextType | undefined>(undefined)\n\ntype DropzoneProps = UseSupabaseUploadReturn & {\n  className?: string\n}\n\nconst Dropzone = ({\n  className,\n  children,\n  getRootProps,\n  getInputProps,\n  ...restProps\n}: PropsWithChildren<DropzoneProps>) => {\n  const isSuccess = restProps.isSuccess\n  const isActive = restProps.isDragActive\n  const isInvalid =\n    (restProps.isDragActive && restProps.isDragReject) ||\n    (restProps.errors.length > 0 && !restProps.isSuccess) ||\n    restProps.files.some((file) => file.errors.length !== 0)\n\n  return (\n    <DropzoneContext.Provider value={{ ...restProps }}>\n      <div\n        {...getRootProps({\n          className: cn(\n            'border-2 border-gray-300 rounded-lg p-6 text-center bg-card transition-colors duration-300 text-foreground',\n            className,\n            isSuccess ? 'border-solid' : 'border-dashed',\n            isActive && 'border-primary bg-primary/10',\n            isInvalid && 'border-destructive bg-destructive/10'\n          ),\n        })}\n      >\n        <input {...getInputProps()} />\n        {children}\n      </div>\n    </DropzoneContext.Provider>\n  )\n}\nconst DropzoneContent = ({ className }: { className?: string }) => {\n  const {\n    files,\n    setFiles,\n    onUpload,\n    loading,\n    successes,\n    errors,\n    maxFileSize,\n    maxFiles,\n    isSuccess,\n  } = useDropzoneContext()\n\n  const exceedMaxFiles = files.length > maxFiles\n\n  const handleRemoveFile = useCallback(\n    (fileName: string) => {\n      setFiles(files.filter((file) => file.name !== fileName))\n    },\n    [files, setFiles]\n  )\n\n  if (isSuccess) {\n    return (\n      <div className={cn('flex flex-row items-center gap-x-2 justify-center', className)}>\n        <CheckCircle size={16} className=\"text-primary\" />\n        <p className=\"text-primary text-sm\">\n          Successfully uploaded {files.length} file{files.length > 1 ? 's' : ''}\n        </p>\n      </div>\n    )\n  }\n\n  return (\n    <div className={cn('flex flex-col', className)}>\n      {files.map((file, idx) => {\n        const fileError = errors.find((e) => e.name === file.name)\n        const isSuccessfullyUploaded = !!successes.find((e) => e === file.name)\n\n        return (\n          <div\n            key={`${file.name}-${idx}`}\n            className=\"flex items-center gap-x-4 border-b py-2 first:mt-4 last:mb-4 \"\n          >\n            {file.type.startsWith('image/') ? (\n              <div className=\"h-10 w-10 rounded border overflow-hidden shrink-0 bg-muted flex items-center justify-center\">\n                <img src={file.preview} alt={file.name} className=\"object-cover\" />\n              </div>\n            ) : (\n              <div className=\"h-10 w-10 rounded border bg-muted flex items-center justify-center\">\n                <File size={18} />\n              </div>\n            )}\n\n            <div className=\"shrink grow flex flex-col items-start truncate\">\n              <p title={file.name} className=\"text-sm truncate max-w-full\">\n                {file.name}\n              </p>\n              {file.errors.length > 0 ? (\n                <p className=\"text-xs text-destructive\">\n                  {file.errors\n                    .map((e) =>\n                      e.message.startsWith('File is larger than')\n                        ? `File is larger than ${formatBytes(maxFileSize, 2)} (Size: ${formatBytes(file.size, 2)})`\n                        : e.message\n                    )\n                    .join(', ')}\n                </p>\n              ) : loading && !isSuccessfullyUploaded ? (\n                <p className=\"text-xs text-muted-foreground\">Uploading file...</p>\n              ) : !!fileError ? (\n                <p className=\"text-xs text-destructive\">Failed to upload: {fileError.message}</p>\n              ) : isSuccessfullyUploaded ? (\n                <p className=\"text-xs text-primary\">Successfully uploaded file</p>\n              ) : (\n                <p className=\"text-xs text-muted-foreground\">{formatBytes(file.size, 2)}</p>\n              )}\n            </div>\n\n            {!loading && !isSuccessfullyUploaded && (\n              <Button\n                size=\"icon\"\n                variant=\"link\"\n                className=\"shrink-0 justify-self-end text-muted-foreground hover:text-foreground\"\n                onClick={() => handleRemoveFile(file.name)}\n              >\n                <X />\n              </Button>\n            )}\n          </div>\n        )\n      })}\n      {exceedMaxFiles && (\n        <p className=\"text-sm text-left mt-2 text-destructive\">\n          You may upload only up to {maxFiles} files, please remove {files.length - maxFiles} file\n          {files.length - maxFiles > 1 ? 's' : ''}.\n        </p>\n      )}\n      {files.length > 0 && !exceedMaxFiles && (\n        <div className=\"mt-2\">\n          <Button\n            variant=\"outline\"\n            onClick={onUpload}\n            disabled={files.some((file) => file.errors.length !== 0) || loading}\n          >\n            {loading ? (\n              <>\n                <Loader2 className=\"mr-2 h-4 w-4 animate-spin\" />\n                Uploading...\n              </>\n            ) : (\n              <>Upload files</>\n            )}\n          </Button>\n        </div>\n      )}\n    </div>\n  )\n}\n\nconst DropzoneEmptyState = ({ className }: { className?: string }) => {\n  const { maxFiles, maxFileSize, inputRef, isSuccess } = useDropzoneContext()\n\n  if (isSuccess) {\n    return null\n  }\n\n  return (\n    <div className={cn('flex flex-col items-center gap-y-2', className)}>\n      <Upload size={20} className=\"text-muted-foreground\" />\n      <p className=\"text-sm\">\n        Upload{!!maxFiles && maxFiles > 1 ? ` ${maxFiles}` : ''} file\n        {!maxFiles || maxFiles > 1 ? 's' : ''}\n      </p>\n      <div className=\"flex flex-col items-center gap-y-1\">\n        <p className=\"text-xs text-muted-foreground\">\n          Drag and drop or{' '}\n          <a\n            onClick={() => inputRef.current?.click()}\n            className=\"underline cursor-pointer transition hover:text-foreground\"\n          >\n            select {maxFiles === 1 ? `file` : 'files'}\n          </a>{' '}\n          to upload\n        </p>\n        {maxFileSize !== Number.POSITIVE_INFINITY && (\n          <p className=\"text-xs text-muted-foreground\">\n            Maximum file size: {formatBytes(maxFileSize, 2)}\n          </p>\n        )}\n      </div>\n    </div>\n  )\n}\n\nconst useDropzoneContext = () => {\n  const context = useContext(DropzoneContext)\n\n  if (!context) {\n    throw new Error('useDropzoneContext must be used within a Dropzone')\n  }\n\n  return context\n}\n\nexport { Dropzone, DropzoneContent, DropzoneEmptyState, useDropzoneContext }\n",
+      "content": "'use client'\n\nimport { CheckCircle, File, Loader2, Upload, X } from 'lucide-react'\nimport { createContext, useCallback, useContext, type PropsWithChildren } from 'react'\n\nimport { cn } from '@/lib/utils'\nimport { type UseSupabaseUploadReturn } from '@/registry/default/blocks/dropzone/hooks/use-supabase-upload'\nimport { Button } from '@/registry/default/components/ui/button'\n\nexport const formatBytes = (\n  bytes: number,\n  decimals = 2,\n  size?: 'bytes' | 'KB' | 'MB' | 'GB' | 'TB' | 'PB' | 'EB' | 'ZB' | 'YB'\n) => {\n  const k = 1000\n  const dm = decimals < 0 ? 0 : decimals\n  const sizes = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']\n\n  if (bytes === 0 || bytes === undefined) return size !== undefined ? `0 ${size}` : '0 bytes'\n  const i = size !== undefined ? sizes.indexOf(size) : Math.floor(Math.log(bytes) / Math.log(k))\n  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]\n}\n\ntype DropzoneContextType = Omit<UseSupabaseUploadReturn, 'getRootProps' | 'getInputProps'>\n\nconst DropzoneContext = createContext<DropzoneContextType | undefined>(undefined)\n\ntype DropzoneProps = UseSupabaseUploadReturn & {\n  className?: string\n}\n\nconst Dropzone = ({\n  className,\n  children,\n  getRootProps,\n  getInputProps,\n  ...restProps\n}: PropsWithChildren<DropzoneProps>) => {\n  const isSuccess = restProps.isSuccess\n  const isActive = restProps.isDragActive\n  const isInvalid =\n    (restProps.isDragActive && restProps.isDragReject) ||\n    (restProps.errors.length > 0 && !restProps.isSuccess) ||\n    restProps.files.some((file) => file.errors.length !== 0)\n\n  return (\n    <DropzoneContext.Provider value={{ ...restProps }}>\n      <div\n        {...getRootProps({\n          className: cn(\n            'border-2 border-gray-300 rounded-lg p-6 text-center bg-card transition-colors duration-300 text-foreground',\n            className,\n            isSuccess ? 'border-solid' : 'border-dashed',\n            isActive && 'border-primary bg-primary/10',\n            isInvalid && 'border-destructive bg-destructive/10'\n          ),\n        })}\n      >\n        <input {...getInputProps()} />\n        {children}\n      </div>\n    </DropzoneContext.Provider>\n  )\n}\nconst DropzoneContent = ({ className }: { className?: string }) => {\n  const {\n    files,\n    setFiles,\n    onUpload,\n    loading,\n    successes,\n    errors,\n    maxFileSize,\n    maxFiles,\n    isSuccess,\n  } = useDropzoneContext()\n\n  const exceedMaxFiles = files.length > maxFiles\n\n  const handleRemoveFile = useCallback(\n    (fileName: string) => {\n      setFiles(files.filter((file) => file.name !== fileName))\n    },\n    [files, setFiles]\n  )\n\n  if (isSuccess) {\n    return (\n      <div className={cn('flex flex-row items-center gap-x-2 justify-center', className)}>\n        <CheckCircle size={16} className=\"text-primary\" />\n        <p className=\"text-primary text-sm\">\n          Successfully uploaded {files.length} file{files.length > 1 ? 's' : ''}\n        </p>\n      </div>\n    )\n  }\n\n  return (\n    <div className={cn('flex flex-col', className)}>\n      {files.map((file, idx) => {\n        const fileError = errors.find((e) => e.name === file.name)\n        const isSuccessfullyUploaded = !!successes.find((e) => e === file.name)\n\n        return (\n          <div\n            key={`${file.name}-${idx}`}\n            className=\"flex items-center gap-x-4 border-b py-2 first:mt-4 last:mb-4 \"\n          >\n            {file.type.startsWith('image/') ? (\n              <div className=\"h-10 w-10 rounded border overflow-hidden shrink-0 bg-muted flex items-center justify-center\">\n                <img src={file.preview} alt={file.name} className=\"object-cover\" />\n              </div>\n            ) : (\n              <div className=\"h-10 w-10 rounded border bg-muted flex items-center justify-center\">\n                <File size={18} />\n              </div>\n            )}\n\n            <div className=\"shrink grow flex flex-col items-start truncate\">\n              <p title={file.name} className=\"text-sm truncate max-w-full\">\n                {file.name}\n              </p>\n              {file.errors.length > 0 ? (\n                <p className=\"text-xs text-destructive\">\n                  {file.errors\n                    .map((e) =>\n                      e.message.startsWith('File is larger than')\n                        ? `File is larger than ${formatBytes(maxFileSize, 2)} (Size: ${formatBytes(file.size, 2)})`\n                        : e.message\n                    )\n                    .join(', ')}\n                </p>\n              ) : loading && !isSuccessfullyUploaded ? (\n                <p className=\"text-xs text-muted-foreground\">Uploading file...</p>\n              ) : !!fileError ? (\n                <p className=\"text-xs text-destructive\">Failed to upload: {fileError.message}</p>\n              ) : isSuccessfullyUploaded ? (\n                <p className=\"text-xs text-primary\">Successfully uploaded file</p>\n              ) : (\n                <p className=\"text-xs text-muted-foreground\">{formatBytes(file.size, 2)}</p>\n              )}\n            </div>\n\n            {!loading && !isSuccessfullyUploaded && (\n              <Button\n                size=\"icon\"\n                variant=\"link\"\n                className=\"shrink-0 justify-self-end text-muted-foreground hover:text-foreground\"\n                onClick={() => handleRemoveFile(file.name)}\n              >\n                <X />\n              </Button>\n            )}\n          </div>\n        )\n      })}\n      {exceedMaxFiles && (\n        <p className=\"text-sm text-left mt-2 text-destructive\">\n          You may upload only up to {maxFiles} files, please remove {files.length - maxFiles} file\n          {files.length - maxFiles > 1 ? 's' : ''}.\n        </p>\n      )}\n      {files.length > 0 && !exceedMaxFiles && (\n        <div className=\"mt-2\">\n          <Button\n            variant=\"outline\"\n            onClick={onUpload}\n            disabled={files.some((file) => file.errors.length !== 0) || loading}\n          >\n            {loading ? (\n              <>\n                <Loader2 className=\"mr-2 h-4 w-4 animate-spin\" />\n                Uploading...\n              </>\n            ) : (\n              <>Upload files</>\n            )}\n          </Button>\n        </div>\n      )}\n    </div>\n  )\n}\n\nconst DropzoneEmptyState = ({ className }: { className?: string }) => {\n  const { maxFiles, maxFileSize, inputRef, isSuccess } = useDropzoneContext()\n\n  if (isSuccess) {\n    return null\n  }\n\n  return (\n    <div className={cn('flex flex-col items-center gap-y-2', className)}>\n      <Upload size={20} className=\"text-muted-foreground\" />\n      <p className=\"text-sm\">\n        Upload{!!maxFiles && maxFiles > 1 ? ` ${maxFiles}` : ''} file\n        {!maxFiles || maxFiles > 1 ? 's' : ''}\n      </p>\n      <div className=\"flex flex-col items-center gap-y-1\">\n        <p className=\"text-xs text-muted-foreground\">\n          Drag and drop or{' '}\n          <a\n            onClick={() => inputRef.current?.click()}\n            className=\"underline cursor-pointer transition hover:text-foreground\"\n          >\n            select {maxFiles === 1 ? `file` : 'files'}\n          </a>{' '}\n          to upload\n        </p>\n        {maxFileSize !== Number.POSITIVE_INFINITY && (\n          <p className=\"text-xs text-muted-foreground\">\n            Maximum file size: {formatBytes(maxFileSize, 2)}\n          </p>\n        )}\n      </div>\n    </div>\n  )\n}\n\nconst useDropzoneContext = () => {\n  const context = useContext(DropzoneContext)\n\n  if (!context) {\n    throw new Error('useDropzoneContext must be used within a Dropzone')\n  }\n\n  return context\n}\n\nexport { Dropzone, DropzoneContent, DropzoneEmptyState, useDropzoneContext }\n",
       "type": "registry:component"
     },
     {
       "path": "registry/default/blocks/dropzone/hooks/use-supabase-upload.ts",
-      "content": "import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\nimport { type FileError, type FileRejection, useDropzone } from 'react-dropzone'\n\nconst supabase = createClient()\n\ninterface FileWithPreview extends File {\n  preview?: string\n  errors: readonly FileError[]\n}\n\ntype UseSupabaseUploadOptions = {\n  /**\n   * Name of bucket to upload files to in your Supabase project\n   */\n  bucketName: string\n  /**\n   * Folder to upload files to in the specified bucket within your Supabase project.\n   *\n   * Defaults to uploading files to the root of the bucket\n   *\n   * e.g If specified path is `test`, your file will be uploaded as `test/file_name`\n   */\n  path?: string\n  /**\n   * Allowed MIME types for each file upload (e.g `image/png`, `text/html`, etc). Wildcards are also supported (e.g `image/*`).\n   *\n   * Defaults to allowing uploading of all MIME types.\n   */\n  allowedMimeTypes?: string[]\n  /**\n   * Maximum upload size of each file allowed in bytes. (e.g 1000 bytes = 1 KB)\n   */\n  maxFileSize?: number\n  /**\n   * Maximum number of files allowed per upload.\n   */\n  maxFiles?: number\n  /**\n   * The number of seconds the asset is cached in the browser and in the Supabase CDN.\n   *\n   * This is set in the Cache-Control: max-age=<seconds> header. Defaults to 3600 seconds.\n   */\n  cacheControl?: number\n  /**\n   * When set to true, the file is overwritten if it exists.\n   *\n   * When set to false, an error is thrown if the object already exists. Defaults to `false`\n   */\n  upsert?: boolean\n}\n\ntype UseSupabaseUploadReturn = ReturnType<typeof useSupabaseUpload>\n\nconst useSupabaseUpload = (options: UseSupabaseUploadOptions) => {\n  const {\n    bucketName,\n    path,\n    allowedMimeTypes = [],\n    maxFileSize = Number.POSITIVE_INFINITY,\n    maxFiles = 1,\n    cacheControl = 3600,\n    upsert = false,\n  } = options\n\n  const [files, setFiles] = useState<FileWithPreview[]>([])\n  const [loading, setLoading] = useState<boolean>(false)\n  const [errors, setErrors] = useState<{ name: string; message: string }[]>([])\n  const [successes, setSuccesses] = useState<string[]>([])\n\n  const isSuccess = useMemo(() => {\n    if (errors.length === 0 && successes.length === 0) {\n      return false\n    }\n    if (errors.length === 0 && successes.length === files.length) {\n      return true\n    }\n    return false\n  }, [errors.length, successes.length, files.length])\n\n  const onDrop = useCallback(\n    (acceptedFiles: File[], fileRejections: FileRejection[]) => {\n      const validFiles = acceptedFiles\n        .filter((file) => !files.find((x) => x.name === file.name))\n        .map((file) => {\n          ;(file as FileWithPreview).preview = URL.createObjectURL(file)\n          ;(file as FileWithPreview).errors = []\n          return file as FileWithPreview\n        })\n\n      const invalidFiles = fileRejections.map(({ file, errors }) => {\n        ;(file as FileWithPreview).preview = URL.createObjectURL(file)\n        ;(file as FileWithPreview).errors = errors\n        return file as FileWithPreview\n      })\n\n      const newFiles = [...files, ...validFiles, ...invalidFiles]\n\n      setFiles(newFiles)\n    },\n    [files, setFiles]\n  )\n\n  const dropzoneProps = useDropzone({\n    onDrop,\n    noClick: true,\n    accept: allowedMimeTypes.reduce((acc, type) => ({ ...acc, [type]: [] }), {}),\n    maxSize: maxFileSize,\n    maxFiles: maxFiles,\n    multiple: maxFiles !== 1,\n  })\n\n  const onUpload = useCallback(async () => {\n    setLoading(true)\n\n    // [Joshen] This is to support handling partial successes\n    // If any files didn't upload for any reason, hitting \"Upload\" again will only upload the files that had errors\n    const filesWithErrors = errors.map((x) => x.name)\n    const filesToUpload =\n      filesWithErrors.length > 0\n        ? [\n            ...files.filter((f) => filesWithErrors.includes(f.name)),\n            ...files.filter((f) => !successes.includes(f.name)),\n          ]\n        : files\n\n    const responses = await Promise.all(\n      filesToUpload.map(async (file) => {\n        const { error } = await supabase.storage\n          .from(bucketName)\n          .upload(!!path ? `${path}/${file.name}` : file.name, file, {\n            cacheControl: cacheControl.toString(),\n            upsert,\n          })\n        if (error) {\n          return { name: file.name, message: error.message }\n        } else {\n          return { name: file.name, message: undefined }\n        }\n      })\n    )\n\n    const responseErrors = responses.filter((x) => x.message !== undefined)\n    // if there were errors previously, this function tried to upload the files again so we should clear/overwrite the existing errors.\n    setErrors(responseErrors)\n\n    const responseSuccesses = responses.filter((x) => x.message === undefined)\n    const newSuccesses = Array.from(\n      new Set([...successes, ...responseSuccesses.map((x) => x.name)])\n    )\n    setSuccesses(newSuccesses)\n\n    setLoading(false)\n  }, [files, path, bucketName, errors, successes])\n\n  useEffect(() => {\n    if (files.length === 0) {\n      setErrors([])\n    }\n\n    // If the number of files doesn't exceed the maxFiles parameter, remove the error 'Too many files' from each file\n    if (files.length <= maxFiles) {\n      let changed = false\n      const newFiles = files.map((file) => {\n        if (file.errors.some((e) => e.code === 'too-many-files')) {\n          file.errors = file.errors.filter((e) => e.code !== 'too-many-files')\n          changed = true\n        }\n        return file\n      })\n      if (changed) {\n        setFiles(newFiles)\n      }\n    }\n  }, [files.length, setFiles, maxFiles])\n\n  return {\n    files,\n    setFiles,\n    successes,\n    isSuccess,\n    loading,\n    errors,\n    setErrors,\n    onUpload,\n    maxFileSize: maxFileSize,\n    maxFiles: maxFiles,\n    allowedMimeTypes,\n    ...dropzoneProps,\n  }\n}\n\nexport { useSupabaseUpload, type UseSupabaseUploadOptions, type UseSupabaseUploadReturn }\n",
+      "content": "import { useCallback, useEffect, useMemo, useState } from 'react'\nimport { useDropzone, type FileError, type FileRejection } from 'react-dropzone'\n\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\n\nconst supabase = createClient()\n\ninterface FileWithPreview extends File {\n  preview?: string\n  errors: readonly FileError[]\n}\n\ntype UseSupabaseUploadOptions = {\n  /**\n   * Name of bucket to upload files to in your Supabase project\n   */\n  bucketName: string\n  /**\n   * Folder to upload files to in the specified bucket within your Supabase project.\n   *\n   * Defaults to uploading files to the root of the bucket\n   *\n   * e.g If specified path is `test`, your file will be uploaded as `test/file_name`\n   */\n  path?: string\n  /**\n   * Allowed MIME types for each file upload (e.g `image/png`, `text/html`, etc). Wildcards are also supported (e.g `image/*`).\n   *\n   * Defaults to allowing uploading of all MIME types.\n   */\n  allowedMimeTypes?: string[]\n  /**\n   * Maximum upload size of each file allowed in bytes. (e.g 1000 bytes = 1 KB)\n   */\n  maxFileSize?: number\n  /**\n   * Maximum number of files allowed per upload.\n   */\n  maxFiles?: number\n  /**\n   * The number of seconds the asset is cached in the browser and in the Supabase CDN.\n   *\n   * This is set in the Cache-Control: max-age=<seconds> header. Defaults to 3600 seconds.\n   */\n  cacheControl?: number\n  /**\n   * When set to true, the file is overwritten if it exists.\n   *\n   * When set to false, an error is thrown if the object already exists. Defaults to `false`\n   */\n  upsert?: boolean\n}\n\ntype UseSupabaseUploadReturn = ReturnType<typeof useSupabaseUpload>\n\nconst useSupabaseUpload = (options: UseSupabaseUploadOptions) => {\n  const {\n    bucketName,\n    path,\n    allowedMimeTypes = [],\n    maxFileSize = Number.POSITIVE_INFINITY,\n    maxFiles = 1,\n    cacheControl = 3600,\n    upsert = false,\n  } = options\n\n  const [files, setFiles] = useState<FileWithPreview[]>([])\n  const [loading, setLoading] = useState<boolean>(false)\n  const [errors, setErrors] = useState<{ name: string; message: string }[]>([])\n  const [successes, setSuccesses] = useState<string[]>([])\n\n  const isSuccess = useMemo(() => {\n    if (errors.length === 0 && successes.length === 0) {\n      return false\n    }\n    if (errors.length === 0 && successes.length === files.length) {\n      return true\n    }\n    return false\n  }, [errors.length, successes.length, files.length])\n\n  const onDrop = useCallback(\n    (acceptedFiles: File[], fileRejections: FileRejection[]) => {\n      const validFiles = acceptedFiles\n        .filter((file) => !files.find((x) => x.name === file.name))\n        .map((file) => {\n          ;(file as FileWithPreview).preview = URL.createObjectURL(file)\n          ;(file as FileWithPreview).errors = []\n          return file as FileWithPreview\n        })\n\n      const invalidFiles = fileRejections.map(({ file, errors }) => {\n        ;(file as FileWithPreview).preview = URL.createObjectURL(file)\n        ;(file as FileWithPreview).errors = errors\n        return file as FileWithPreview\n      })\n\n      const newFiles = [...files, ...validFiles, ...invalidFiles]\n\n      setFiles(newFiles)\n    },\n    [files, setFiles]\n  )\n\n  const dropzoneProps = useDropzone({\n    onDrop,\n    noClick: true,\n    accept: allowedMimeTypes.reduce((acc, type) => ({ ...acc, [type]: [] }), {}),\n    maxSize: maxFileSize,\n    maxFiles: maxFiles,\n    multiple: maxFiles !== 1,\n  })\n\n  const onUpload = useCallback(async () => {\n    setLoading(true)\n\n    // [Joshen] This is to support handling partial successes\n    // If any files didn't upload for any reason, hitting \"Upload\" again will only upload the files that had errors\n    const filesWithErrors = errors.map((x) => x.name)\n    const filesToUpload =\n      filesWithErrors.length > 0\n        ? [\n            ...files.filter((f) => filesWithErrors.includes(f.name)),\n            ...files.filter((f) => !successes.includes(f.name)),\n          ]\n        : files\n\n    const responses = await Promise.all(\n      filesToUpload.map(async (file) => {\n        const { error } = await supabase.storage\n          .from(bucketName)\n          .upload(!!path ? `${path}/${file.name}` : file.name, file, {\n            cacheControl: cacheControl.toString(),\n            upsert,\n          })\n        if (error) {\n          return { name: file.name, message: error.message }\n        } else {\n          return { name: file.name, message: undefined }\n        }\n      })\n    )\n\n    const responseErrors = responses.filter((x) => x.message !== undefined)\n    // if there were errors previously, this function tried to upload the files again so we should clear/overwrite the existing errors.\n    setErrors(responseErrors)\n\n    const responseSuccesses = responses.filter((x) => x.message === undefined)\n    const newSuccesses = Array.from(\n      new Set([...successes, ...responseSuccesses.map((x) => x.name)])\n    )\n    setSuccesses(newSuccesses)\n\n    setLoading(false)\n  }, [files, path, bucketName, errors, successes])\n\n  useEffect(() => {\n    if (files.length === 0) {\n      setErrors([])\n    }\n\n    // If the number of files doesn't exceed the maxFiles parameter, remove the error 'Too many files' from each file\n    if (files.length <= maxFiles) {\n      let changed = false\n      const newFiles = files.map((file) => {\n        if (file.errors.some((e) => e.code === 'too-many-files')) {\n          file.errors = file.errors.filter((e) => e.code !== 'too-many-files')\n          changed = true\n        }\n        return file\n      })\n      if (changed) {\n        setFiles(newFiles)\n      }\n    }\n  }, [files.length, setFiles, maxFiles])\n\n  return {\n    files,\n    setFiles,\n    successes,\n    isSuccess,\n    loading,\n    errors,\n    setErrors,\n    onUpload,\n    maxFileSize: maxFileSize,\n    maxFiles: maxFiles,\n    allowedMimeTypes,\n    ...dropzoneProps,\n  }\n}\n\nexport { useSupabaseUpload, type UseSupabaseUploadOptions, type UseSupabaseUploadReturn }\n",
       "type": "registry:hook"
     },
     {
diff --git a/apps/ui-library/public/r/dropzone-tanstack.json b/apps/ui-library/public/r/dropzone-tanstack.json
index 42a97708f3a..0d455eb7848 100644
--- a/apps/ui-library/public/r/dropzone-tanstack.json
+++ b/apps/ui-library/public/r/dropzone-tanstack.json
@@ -16,12 +16,12 @@
   "files": [
     {
       "path": "registry/default/blocks/dropzone/components/dropzone.tsx",
-      "content": "'use client'\n\nimport { cn } from '@/lib/utils'\nimport { type UseSupabaseUploadReturn } from '@/registry/default/blocks/dropzone/hooks/use-supabase-upload'\nimport { Button } from '@/registry/default/components/ui/button'\nimport { CheckCircle, File, Loader2, Upload, X } from 'lucide-react'\nimport { createContext, type PropsWithChildren, useCallback, useContext } from 'react'\n\nexport const formatBytes = (\n  bytes: number,\n  decimals = 2,\n  size?: 'bytes' | 'KB' | 'MB' | 'GB' | 'TB' | 'PB' | 'EB' | 'ZB' | 'YB'\n) => {\n  const k = 1000\n  const dm = decimals < 0 ? 0 : decimals\n  const sizes = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']\n\n  if (bytes === 0 || bytes === undefined) return size !== undefined ? `0 ${size}` : '0 bytes'\n  const i = size !== undefined ? sizes.indexOf(size) : Math.floor(Math.log(bytes) / Math.log(k))\n  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]\n}\n\ntype DropzoneContextType = Omit<UseSupabaseUploadReturn, 'getRootProps' | 'getInputProps'>\n\nconst DropzoneContext = createContext<DropzoneContextType | undefined>(undefined)\n\ntype DropzoneProps = UseSupabaseUploadReturn & {\n  className?: string\n}\n\nconst Dropzone = ({\n  className,\n  children,\n  getRootProps,\n  getInputProps,\n  ...restProps\n}: PropsWithChildren<DropzoneProps>) => {\n  const isSuccess = restProps.isSuccess\n  const isActive = restProps.isDragActive\n  const isInvalid =\n    (restProps.isDragActive && restProps.isDragReject) ||\n    (restProps.errors.length > 0 && !restProps.isSuccess) ||\n    restProps.files.some((file) => file.errors.length !== 0)\n\n  return (\n    <DropzoneContext.Provider value={{ ...restProps }}>\n      <div\n        {...getRootProps({\n          className: cn(\n            'border-2 border-gray-300 rounded-lg p-6 text-center bg-card transition-colors duration-300 text-foreground',\n            className,\n            isSuccess ? 'border-solid' : 'border-dashed',\n            isActive && 'border-primary bg-primary/10',\n            isInvalid && 'border-destructive bg-destructive/10'\n          ),\n        })}\n      >\n        <input {...getInputProps()} />\n        {children}\n      </div>\n    </DropzoneContext.Provider>\n  )\n}\nconst DropzoneContent = ({ className }: { className?: string }) => {\n  const {\n    files,\n    setFiles,\n    onUpload,\n    loading,\n    successes,\n    errors,\n    maxFileSize,\n    maxFiles,\n    isSuccess,\n  } = useDropzoneContext()\n\n  const exceedMaxFiles = files.length > maxFiles\n\n  const handleRemoveFile = useCallback(\n    (fileName: string) => {\n      setFiles(files.filter((file) => file.name !== fileName))\n    },\n    [files, setFiles]\n  )\n\n  if (isSuccess) {\n    return (\n      <div className={cn('flex flex-row items-center gap-x-2 justify-center', className)}>\n        <CheckCircle size={16} className=\"text-primary\" />\n        <p className=\"text-primary text-sm\">\n          Successfully uploaded {files.length} file{files.length > 1 ? 's' : ''}\n        </p>\n      </div>\n    )\n  }\n\n  return (\n    <div className={cn('flex flex-col', className)}>\n      {files.map((file, idx) => {\n        const fileError = errors.find((e) => e.name === file.name)\n        const isSuccessfullyUploaded = !!successes.find((e) => e === file.name)\n\n        return (\n          <div\n            key={`${file.name}-${idx}`}\n            className=\"flex items-center gap-x-4 border-b py-2 first:mt-4 last:mb-4 \"\n          >\n            {file.type.startsWith('image/') ? (\n              <div className=\"h-10 w-10 rounded border overflow-hidden shrink-0 bg-muted flex items-center justify-center\">\n                <img src={file.preview} alt={file.name} className=\"object-cover\" />\n              </div>\n            ) : (\n              <div className=\"h-10 w-10 rounded border bg-muted flex items-center justify-center\">\n                <File size={18} />\n              </div>\n            )}\n\n            <div className=\"shrink grow flex flex-col items-start truncate\">\n              <p title={file.name} className=\"text-sm truncate max-w-full\">\n                {file.name}\n              </p>\n              {file.errors.length > 0 ? (\n                <p className=\"text-xs text-destructive\">\n                  {file.errors\n                    .map((e) =>\n                      e.message.startsWith('File is larger than')\n                        ? `File is larger than ${formatBytes(maxFileSize, 2)} (Size: ${formatBytes(file.size, 2)})`\n                        : e.message\n                    )\n                    .join(', ')}\n                </p>\n              ) : loading && !isSuccessfullyUploaded ? (\n                <p className=\"text-xs text-muted-foreground\">Uploading file...</p>\n              ) : !!fileError ? (\n                <p className=\"text-xs text-destructive\">Failed to upload: {fileError.message}</p>\n              ) : isSuccessfullyUploaded ? (\n                <p className=\"text-xs text-primary\">Successfully uploaded file</p>\n              ) : (\n                <p className=\"text-xs text-muted-foreground\">{formatBytes(file.size, 2)}</p>\n              )}\n            </div>\n\n            {!loading && !isSuccessfullyUploaded && (\n              <Button\n                size=\"icon\"\n                variant=\"link\"\n                className=\"shrink-0 justify-self-end text-muted-foreground hover:text-foreground\"\n                onClick={() => handleRemoveFile(file.name)}\n              >\n                <X />\n              </Button>\n            )}\n          </div>\n        )\n      })}\n      {exceedMaxFiles && (\n        <p className=\"text-sm text-left mt-2 text-destructive\">\n          You may upload only up to {maxFiles} files, please remove {files.length - maxFiles} file\n          {files.length - maxFiles > 1 ? 's' : ''}.\n        </p>\n      )}\n      {files.length > 0 && !exceedMaxFiles && (\n        <div className=\"mt-2\">\n          <Button\n            variant=\"outline\"\n            onClick={onUpload}\n            disabled={files.some((file) => file.errors.length !== 0) || loading}\n          >\n            {loading ? (\n              <>\n                <Loader2 className=\"mr-2 h-4 w-4 animate-spin\" />\n                Uploading...\n              </>\n            ) : (\n              <>Upload files</>\n            )}\n          </Button>\n        </div>\n      )}\n    </div>\n  )\n}\n\nconst DropzoneEmptyState = ({ className }: { className?: string }) => {\n  const { maxFiles, maxFileSize, inputRef, isSuccess } = useDropzoneContext()\n\n  if (isSuccess) {\n    return null\n  }\n\n  return (\n    <div className={cn('flex flex-col items-center gap-y-2', className)}>\n      <Upload size={20} className=\"text-muted-foreground\" />\n      <p className=\"text-sm\">\n        Upload{!!maxFiles && maxFiles > 1 ? ` ${maxFiles}` : ''} file\n        {!maxFiles || maxFiles > 1 ? 's' : ''}\n      </p>\n      <div className=\"flex flex-col items-center gap-y-1\">\n        <p className=\"text-xs text-muted-foreground\">\n          Drag and drop or{' '}\n          <a\n            onClick={() => inputRef.current?.click()}\n            className=\"underline cursor-pointer transition hover:text-foreground\"\n          >\n            select {maxFiles === 1 ? `file` : 'files'}\n          </a>{' '}\n          to upload\n        </p>\n        {maxFileSize !== Number.POSITIVE_INFINITY && (\n          <p className=\"text-xs text-muted-foreground\">\n            Maximum file size: {formatBytes(maxFileSize, 2)}\n          </p>\n        )}\n      </div>\n    </div>\n  )\n}\n\nconst useDropzoneContext = () => {\n  const context = useContext(DropzoneContext)\n\n  if (!context) {\n    throw new Error('useDropzoneContext must be used within a Dropzone')\n  }\n\n  return context\n}\n\nexport { Dropzone, DropzoneContent, DropzoneEmptyState, useDropzoneContext }\n",
+      "content": "'use client'\n\nimport { CheckCircle, File, Loader2, Upload, X } from 'lucide-react'\nimport { createContext, useCallback, useContext, type PropsWithChildren } from 'react'\n\nimport { cn } from '@/lib/utils'\nimport { type UseSupabaseUploadReturn } from '@/registry/default/blocks/dropzone/hooks/use-supabase-upload'\nimport { Button } from '@/registry/default/components/ui/button'\n\nexport const formatBytes = (\n  bytes: number,\n  decimals = 2,\n  size?: 'bytes' | 'KB' | 'MB' | 'GB' | 'TB' | 'PB' | 'EB' | 'ZB' | 'YB'\n) => {\n  const k = 1000\n  const dm = decimals < 0 ? 0 : decimals\n  const sizes = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']\n\n  if (bytes === 0 || bytes === undefined) return size !== undefined ? `0 ${size}` : '0 bytes'\n  const i = size !== undefined ? sizes.indexOf(size) : Math.floor(Math.log(bytes) / Math.log(k))\n  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]\n}\n\ntype DropzoneContextType = Omit<UseSupabaseUploadReturn, 'getRootProps' | 'getInputProps'>\n\nconst DropzoneContext = createContext<DropzoneContextType | undefined>(undefined)\n\ntype DropzoneProps = UseSupabaseUploadReturn & {\n  className?: string\n}\n\nconst Dropzone = ({\n  className,\n  children,\n  getRootProps,\n  getInputProps,\n  ...restProps\n}: PropsWithChildren<DropzoneProps>) => {\n  const isSuccess = restProps.isSuccess\n  const isActive = restProps.isDragActive\n  const isInvalid =\n    (restProps.isDragActive && restProps.isDragReject) ||\n    (restProps.errors.length > 0 && !restProps.isSuccess) ||\n    restProps.files.some((file) => file.errors.length !== 0)\n\n  return (\n    <DropzoneContext.Provider value={{ ...restProps }}>\n      <div\n        {...getRootProps({\n          className: cn(\n            'border-2 border-gray-300 rounded-lg p-6 text-center bg-card transition-colors duration-300 text-foreground',\n            className,\n            isSuccess ? 'border-solid' : 'border-dashed',\n            isActive && 'border-primary bg-primary/10',\n            isInvalid && 'border-destructive bg-destructive/10'\n          ),\n        })}\n      >\n        <input {...getInputProps()} />\n        {children}\n      </div>\n    </DropzoneContext.Provider>\n  )\n}\nconst DropzoneContent = ({ className }: { className?: string }) => {\n  const {\n    files,\n    setFiles,\n    onUpload,\n    loading,\n    successes,\n    errors,\n    maxFileSize,\n    maxFiles,\n    isSuccess,\n  } = useDropzoneContext()\n\n  const exceedMaxFiles = files.length > maxFiles\n\n  const handleRemoveFile = useCallback(\n    (fileName: string) => {\n      setFiles(files.filter((file) => file.name !== fileName))\n    },\n    [files, setFiles]\n  )\n\n  if (isSuccess) {\n    return (\n      <div className={cn('flex flex-row items-center gap-x-2 justify-center', className)}>\n        <CheckCircle size={16} className=\"text-primary\" />\n        <p className=\"text-primary text-sm\">\n          Successfully uploaded {files.length} file{files.length > 1 ? 's' : ''}\n        </p>\n      </div>\n    )\n  }\n\n  return (\n    <div className={cn('flex flex-col', className)}>\n      {files.map((file, idx) => {\n        const fileError = errors.find((e) => e.name === file.name)\n        const isSuccessfullyUploaded = !!successes.find((e) => e === file.name)\n\n        return (\n          <div\n            key={`${file.name}-${idx}`}\n            className=\"flex items-center gap-x-4 border-b py-2 first:mt-4 last:mb-4 \"\n          >\n            {file.type.startsWith('image/') ? (\n              <div className=\"h-10 w-10 rounded border overflow-hidden shrink-0 bg-muted flex items-center justify-center\">\n                <img src={file.preview} alt={file.name} className=\"object-cover\" />\n              </div>\n            ) : (\n              <div className=\"h-10 w-10 rounded border bg-muted flex items-center justify-center\">\n                <File size={18} />\n              </div>\n            )}\n\n            <div className=\"shrink grow flex flex-col items-start truncate\">\n              <p title={file.name} className=\"text-sm truncate max-w-full\">\n                {file.name}\n              </p>\n              {file.errors.length > 0 ? (\n                <p className=\"text-xs text-destructive\">\n                  {file.errors\n                    .map((e) =>\n                      e.message.startsWith('File is larger than')\n                        ? `File is larger than ${formatBytes(maxFileSize, 2)} (Size: ${formatBytes(file.size, 2)})`\n                        : e.message\n                    )\n                    .join(', ')}\n                </p>\n              ) : loading && !isSuccessfullyUploaded ? (\n                <p className=\"text-xs text-muted-foreground\">Uploading file...</p>\n              ) : !!fileError ? (\n                <p className=\"text-xs text-destructive\">Failed to upload: {fileError.message}</p>\n              ) : isSuccessfullyUploaded ? (\n                <p className=\"text-xs text-primary\">Successfully uploaded file</p>\n              ) : (\n                <p className=\"text-xs text-muted-foreground\">{formatBytes(file.size, 2)}</p>\n              )}\n            </div>\n\n            {!loading && !isSuccessfullyUploaded && (\n              <Button\n                size=\"icon\"\n                variant=\"link\"\n                className=\"shrink-0 justify-self-end text-muted-foreground hover:text-foreground\"\n                onClick={() => handleRemoveFile(file.name)}\n              >\n                <X />\n              </Button>\n            )}\n          </div>\n        )\n      })}\n      {exceedMaxFiles && (\n        <p className=\"text-sm text-left mt-2 text-destructive\">\n          You may upload only up to {maxFiles} files, please remove {files.length - maxFiles} file\n          {files.length - maxFiles > 1 ? 's' : ''}.\n        </p>\n      )}\n      {files.length > 0 && !exceedMaxFiles && (\n        <div className=\"mt-2\">\n          <Button\n            variant=\"outline\"\n            onClick={onUpload}\n            disabled={files.some((file) => file.errors.length !== 0) || loading}\n          >\n            {loading ? (\n              <>\n                <Loader2 className=\"mr-2 h-4 w-4 animate-spin\" />\n                Uploading...\n              </>\n            ) : (\n              <>Upload files</>\n            )}\n          </Button>\n        </div>\n      )}\n    </div>\n  )\n}\n\nconst DropzoneEmptyState = ({ className }: { className?: string }) => {\n  const { maxFiles, maxFileSize, inputRef, isSuccess } = useDropzoneContext()\n\n  if (isSuccess) {\n    return null\n  }\n\n  return (\n    <div className={cn('flex flex-col items-center gap-y-2', className)}>\n      <Upload size={20} className=\"text-muted-foreground\" />\n      <p className=\"text-sm\">\n        Upload{!!maxFiles && maxFiles > 1 ? ` ${maxFiles}` : ''} file\n        {!maxFiles || maxFiles > 1 ? 's' : ''}\n      </p>\n      <div className=\"flex flex-col items-center gap-y-1\">\n        <p className=\"text-xs text-muted-foreground\">\n          Drag and drop or{' '}\n          <a\n            onClick={() => inputRef.current?.click()}\n            className=\"underline cursor-pointer transition hover:text-foreground\"\n          >\n            select {maxFiles === 1 ? `file` : 'files'}\n          </a>{' '}\n          to upload\n        </p>\n        {maxFileSize !== Number.POSITIVE_INFINITY && (\n          <p className=\"text-xs text-muted-foreground\">\n            Maximum file size: {formatBytes(maxFileSize, 2)}\n          </p>\n        )}\n      </div>\n    </div>\n  )\n}\n\nconst useDropzoneContext = () => {\n  const context = useContext(DropzoneContext)\n\n  if (!context) {\n    throw new Error('useDropzoneContext must be used within a Dropzone')\n  }\n\n  return context\n}\n\nexport { Dropzone, DropzoneContent, DropzoneEmptyState, useDropzoneContext }\n",
       "type": "registry:component"
     },
     {
       "path": "registry/default/blocks/dropzone/hooks/use-supabase-upload.ts",
-      "content": "import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\nimport { type FileError, type FileRejection, useDropzone } from 'react-dropzone'\n\nconst supabase = createClient()\n\ninterface FileWithPreview extends File {\n  preview?: string\n  errors: readonly FileError[]\n}\n\ntype UseSupabaseUploadOptions = {\n  /**\n   * Name of bucket to upload files to in your Supabase project\n   */\n  bucketName: string\n  /**\n   * Folder to upload files to in the specified bucket within your Supabase project.\n   *\n   * Defaults to uploading files to the root of the bucket\n   *\n   * e.g If specified path is `test`, your file will be uploaded as `test/file_name`\n   */\n  path?: string\n  /**\n   * Allowed MIME types for each file upload (e.g `image/png`, `text/html`, etc). Wildcards are also supported (e.g `image/*`).\n   *\n   * Defaults to allowing uploading of all MIME types.\n   */\n  allowedMimeTypes?: string[]\n  /**\n   * Maximum upload size of each file allowed in bytes. (e.g 1000 bytes = 1 KB)\n   */\n  maxFileSize?: number\n  /**\n   * Maximum number of files allowed per upload.\n   */\n  maxFiles?: number\n  /**\n   * The number of seconds the asset is cached in the browser and in the Supabase CDN.\n   *\n   * This is set in the Cache-Control: max-age=<seconds> header. Defaults to 3600 seconds.\n   */\n  cacheControl?: number\n  /**\n   * When set to true, the file is overwritten if it exists.\n   *\n   * When set to false, an error is thrown if the object already exists. Defaults to `false`\n   */\n  upsert?: boolean\n}\n\ntype UseSupabaseUploadReturn = ReturnType<typeof useSupabaseUpload>\n\nconst useSupabaseUpload = (options: UseSupabaseUploadOptions) => {\n  const {\n    bucketName,\n    path,\n    allowedMimeTypes = [],\n    maxFileSize = Number.POSITIVE_INFINITY,\n    maxFiles = 1,\n    cacheControl = 3600,\n    upsert = false,\n  } = options\n\n  const [files, setFiles] = useState<FileWithPreview[]>([])\n  const [loading, setLoading] = useState<boolean>(false)\n  const [errors, setErrors] = useState<{ name: string; message: string }[]>([])\n  const [successes, setSuccesses] = useState<string[]>([])\n\n  const isSuccess = useMemo(() => {\n    if (errors.length === 0 && successes.length === 0) {\n      return false\n    }\n    if (errors.length === 0 && successes.length === files.length) {\n      return true\n    }\n    return false\n  }, [errors.length, successes.length, files.length])\n\n  const onDrop = useCallback(\n    (acceptedFiles: File[], fileRejections: FileRejection[]) => {\n      const validFiles = acceptedFiles\n        .filter((file) => !files.find((x) => x.name === file.name))\n        .map((file) => {\n          ;(file as FileWithPreview).preview = URL.createObjectURL(file)\n          ;(file as FileWithPreview).errors = []\n          return file as FileWithPreview\n        })\n\n      const invalidFiles = fileRejections.map(({ file, errors }) => {\n        ;(file as FileWithPreview).preview = URL.createObjectURL(file)\n        ;(file as FileWithPreview).errors = errors\n        return file as FileWithPreview\n      })\n\n      const newFiles = [...files, ...validFiles, ...invalidFiles]\n\n      setFiles(newFiles)\n    },\n    [files, setFiles]\n  )\n\n  const dropzoneProps = useDropzone({\n    onDrop,\n    noClick: true,\n    accept: allowedMimeTypes.reduce((acc, type) => ({ ...acc, [type]: [] }), {}),\n    maxSize: maxFileSize,\n    maxFiles: maxFiles,\n    multiple: maxFiles !== 1,\n  })\n\n  const onUpload = useCallback(async () => {\n    setLoading(true)\n\n    // [Joshen] This is to support handling partial successes\n    // If any files didn't upload for any reason, hitting \"Upload\" again will only upload the files that had errors\n    const filesWithErrors = errors.map((x) => x.name)\n    const filesToUpload =\n      filesWithErrors.length > 0\n        ? [\n            ...files.filter((f) => filesWithErrors.includes(f.name)),\n            ...files.filter((f) => !successes.includes(f.name)),\n          ]\n        : files\n\n    const responses = await Promise.all(\n      filesToUpload.map(async (file) => {\n        const { error } = await supabase.storage\n          .from(bucketName)\n          .upload(!!path ? `${path}/${file.name}` : file.name, file, {\n            cacheControl: cacheControl.toString(),\n            upsert,\n          })\n        if (error) {\n          return { name: file.name, message: error.message }\n        } else {\n          return { name: file.name, message: undefined }\n        }\n      })\n    )\n\n    const responseErrors = responses.filter((x) => x.message !== undefined)\n    // if there were errors previously, this function tried to upload the files again so we should clear/overwrite the existing errors.\n    setErrors(responseErrors)\n\n    const responseSuccesses = responses.filter((x) => x.message === undefined)\n    const newSuccesses = Array.from(\n      new Set([...successes, ...responseSuccesses.map((x) => x.name)])\n    )\n    setSuccesses(newSuccesses)\n\n    setLoading(false)\n  }, [files, path, bucketName, errors, successes])\n\n  useEffect(() => {\n    if (files.length === 0) {\n      setErrors([])\n    }\n\n    // If the number of files doesn't exceed the maxFiles parameter, remove the error 'Too many files' from each file\n    if (files.length <= maxFiles) {\n      let changed = false\n      const newFiles = files.map((file) => {\n        if (file.errors.some((e) => e.code === 'too-many-files')) {\n          file.errors = file.errors.filter((e) => e.code !== 'too-many-files')\n          changed = true\n        }\n        return file\n      })\n      if (changed) {\n        setFiles(newFiles)\n      }\n    }\n  }, [files.length, setFiles, maxFiles])\n\n  return {\n    files,\n    setFiles,\n    successes,\n    isSuccess,\n    loading,\n    errors,\n    setErrors,\n    onUpload,\n    maxFileSize: maxFileSize,\n    maxFiles: maxFiles,\n    allowedMimeTypes,\n    ...dropzoneProps,\n  }\n}\n\nexport { useSupabaseUpload, type UseSupabaseUploadOptions, type UseSupabaseUploadReturn }\n",
+      "content": "import { useCallback, useEffect, useMemo, useState } from 'react'\nimport { useDropzone, type FileError, type FileRejection } from 'react-dropzone'\n\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\n\nconst supabase = createClient()\n\ninterface FileWithPreview extends File {\n  preview?: string\n  errors: readonly FileError[]\n}\n\ntype UseSupabaseUploadOptions = {\n  /**\n   * Name of bucket to upload files to in your Supabase project\n   */\n  bucketName: string\n  /**\n   * Folder to upload files to in the specified bucket within your Supabase project.\n   *\n   * Defaults to uploading files to the root of the bucket\n   *\n   * e.g If specified path is `test`, your file will be uploaded as `test/file_name`\n   */\n  path?: string\n  /**\n   * Allowed MIME types for each file upload (e.g `image/png`, `text/html`, etc). Wildcards are also supported (e.g `image/*`).\n   *\n   * Defaults to allowing uploading of all MIME types.\n   */\n  allowedMimeTypes?: string[]\n  /**\n   * Maximum upload size of each file allowed in bytes. (e.g 1000 bytes = 1 KB)\n   */\n  maxFileSize?: number\n  /**\n   * Maximum number of files allowed per upload.\n   */\n  maxFiles?: number\n  /**\n   * The number of seconds the asset is cached in the browser and in the Supabase CDN.\n   *\n   * This is set in the Cache-Control: max-age=<seconds> header. Defaults to 3600 seconds.\n   */\n  cacheControl?: number\n  /**\n   * When set to true, the file is overwritten if it exists.\n   *\n   * When set to false, an error is thrown if the object already exists. Defaults to `false`\n   */\n  upsert?: boolean\n}\n\ntype UseSupabaseUploadReturn = ReturnType<typeof useSupabaseUpload>\n\nconst useSupabaseUpload = (options: UseSupabaseUploadOptions) => {\n  const {\n    bucketName,\n    path,\n    allowedMimeTypes = [],\n    maxFileSize = Number.POSITIVE_INFINITY,\n    maxFiles = 1,\n    cacheControl = 3600,\n    upsert = false,\n  } = options\n\n  const [files, setFiles] = useState<FileWithPreview[]>([])\n  const [loading, setLoading] = useState<boolean>(false)\n  const [errors, setErrors] = useState<{ name: string; message: string }[]>([])\n  const [successes, setSuccesses] = useState<string[]>([])\n\n  const isSuccess = useMemo(() => {\n    if (errors.length === 0 && successes.length === 0) {\n      return false\n    }\n    if (errors.length === 0 && successes.length === files.length) {\n      return true\n    }\n    return false\n  }, [errors.length, successes.length, files.length])\n\n  const onDrop = useCallback(\n    (acceptedFiles: File[], fileRejections: FileRejection[]) => {\n      const validFiles = acceptedFiles\n        .filter((file) => !files.find((x) => x.name === file.name))\n        .map((file) => {\n          ;(file as FileWithPreview).preview = URL.createObjectURL(file)\n          ;(file as FileWithPreview).errors = []\n          return file as FileWithPreview\n        })\n\n      const invalidFiles = fileRejections.map(({ file, errors }) => {\n        ;(file as FileWithPreview).preview = URL.createObjectURL(file)\n        ;(file as FileWithPreview).errors = errors\n        return file as FileWithPreview\n      })\n\n      const newFiles = [...files, ...validFiles, ...invalidFiles]\n\n      setFiles(newFiles)\n    },\n    [files, setFiles]\n  )\n\n  const dropzoneProps = useDropzone({\n    onDrop,\n    noClick: true,\n    accept: allowedMimeTypes.reduce((acc, type) => ({ ...acc, [type]: [] }), {}),\n    maxSize: maxFileSize,\n    maxFiles: maxFiles,\n    multiple: maxFiles !== 1,\n  })\n\n  const onUpload = useCallback(async () => {\n    setLoading(true)\n\n    // [Joshen] This is to support handling partial successes\n    // If any files didn't upload for any reason, hitting \"Upload\" again will only upload the files that had errors\n    const filesWithErrors = errors.map((x) => x.name)\n    const filesToUpload =\n      filesWithErrors.length > 0\n        ? [\n            ...files.filter((f) => filesWithErrors.includes(f.name)),\n            ...files.filter((f) => !successes.includes(f.name)),\n          ]\n        : files\n\n    const responses = await Promise.all(\n      filesToUpload.map(async (file) => {\n        const { error } = await supabase.storage\n          .from(bucketName)\n          .upload(!!path ? `${path}/${file.name}` : file.name, file, {\n            cacheControl: cacheControl.toString(),\n            upsert,\n          })\n        if (error) {\n          return { name: file.name, message: error.message }\n        } else {\n          return { name: file.name, message: undefined }\n        }\n      })\n    )\n\n    const responseErrors = responses.filter((x) => x.message !== undefined)\n    // if there were errors previously, this function tried to upload the files again so we should clear/overwrite the existing errors.\n    setErrors(responseErrors)\n\n    const responseSuccesses = responses.filter((x) => x.message === undefined)\n    const newSuccesses = Array.from(\n      new Set([...successes, ...responseSuccesses.map((x) => x.name)])\n    )\n    setSuccesses(newSuccesses)\n\n    setLoading(false)\n  }, [files, path, bucketName, errors, successes])\n\n  useEffect(() => {\n    if (files.length === 0) {\n      setErrors([])\n    }\n\n    // If the number of files doesn't exceed the maxFiles parameter, remove the error 'Too many files' from each file\n    if (files.length <= maxFiles) {\n      let changed = false\n      const newFiles = files.map((file) => {\n        if (file.errors.some((e) => e.code === 'too-many-files')) {\n          file.errors = file.errors.filter((e) => e.code !== 'too-many-files')\n          changed = true\n        }\n        return file\n      })\n      if (changed) {\n        setFiles(newFiles)\n      }\n    }\n  }, [files.length, setFiles, maxFiles])\n\n  return {\n    files,\n    setFiles,\n    successes,\n    isSuccess,\n    loading,\n    errors,\n    setErrors,\n    onUpload,\n    maxFileSize: maxFileSize,\n    maxFiles: maxFiles,\n    allowedMimeTypes,\n    ...dropzoneProps,\n  }\n}\n\nexport { useSupabaseUpload, type UseSupabaseUploadOptions, type UseSupabaseUploadReturn }\n",
       "type": "registry:hook"
     },
     {
diff --git a/apps/ui-library/public/r/dropzone-vue.json b/apps/ui-library/public/r/dropzone-vue.json
index 596e2fb612f..1c5e1947b62 100644
--- a/apps/ui-library/public/r/dropzone-vue.json
+++ b/apps/ui-library/public/r/dropzone-vue.json
@@ -33,7 +33,7 @@
     },
     {
       "path": "registry/default/dropzone/vue/composables/useSupabaseUpload.ts",
-      "content": "import { ref, computed, watch, onUnmounted } from 'vue'\nimport { useDropZone } from '@vueuse/core'\nimport { createClient } from \"@/lib/supabase/client\"\n\nconst supabase = createClient()\n\nexport interface FileWithPreview extends File {\n  preview?: string\n  errors: { code: string; message: string }[]\n}\n\nexport type UseSupabaseUploadOptions = {\n  bucketName: string\n  path?: string\n  allowedMimeTypes?: string[]\n  maxFileSize?: number\n  maxFiles?: number\n  cacheControl?: number\n  upsert?: boolean\n}\n\nfunction validateFileType(file: File, allowedTypes: string[]) {\n  if (!allowedTypes.length) return []\n  const isValid = allowedTypes.some(t =>\n    t.endsWith('/*')\n      ? file.type.startsWith(t.replace('/*', ''))\n      : file.type === t\n  )\n  return isValid\n    ? []\n    : [{ code: 'invalid-type', message: 'Invalid file type' }]\n}\n\nfunction validateFileSize(file: File, maxSize: number) {\n  return file.size > maxSize\n    ? [{ code: 'file-too-large', message: `File is larger than allowed size` }]\n    : []\n}\n\nexport function useSupabaseUpload(options: UseSupabaseUploadOptions) {\n  const {\n    bucketName,\n    path,\n    allowedMimeTypes = [],\n    maxFileSize = Number.POSITIVE_INFINITY,\n    maxFiles = 1,\n    cacheControl = 3600,\n    upsert = false,\n  } = options\n\n  const files = ref<FileWithPreview[]>([])\n  const loading = ref(false)\n  const errors = ref<{ name: string; message: string }[]>([])\n  const successes = ref<string[]>([])\n\n  const isSuccess = computed(() => {\n    if (!errors.value.length && !successes.value.length) return false\n    return !errors.value.length && successes.value.length === files.value.length\n  })\n\n  const dropZoneRef = ref<HTMLElement | null>(null)\n\n  const { isOverDropZone } = useDropZone(dropZoneRef, {\n    onDrop(droppedFiles: FileWithPreview[]) {\n      if (!droppedFiles) return\n\n      const newFiles: FileWithPreview[] = droppedFiles.map(file => ({\n        ...(file as FileWithPreview),\n        preview: URL.createObjectURL(file),\n        errors: [\n          ...validateFileType(file, allowedMimeTypes),\n          ...validateFileSize(file, maxFileSize),\n        ],\n      }))\n\n      files.value = [...files.value, ...newFiles]\n    },\n  })\n\n  const onUpload = async () => {\n    loading.value = true\n\n    try {\n      const filesWithErrors = errors.value.map(e => e.name)\n\n      const filesToUpload =\n        filesWithErrors.length > 0\n          ? files.value.filter(\n              f =>\n                filesWithErrors.includes(f.name) ||\n                !successes.value.includes(f.name)\n            )\n          : files.value\n\n      const responses = await Promise.all(\n        filesToUpload.map(async file => {\n          const { error } = await supabase.storage\n            .from(bucketName)\n            .upload(path ? `${path}/${file.name}` : file.name, file, {\n              cacheControl: cacheControl.toString(),\n              upsert,\n            })\n\n          return error\n            ? { name: file.name, message: error.message }\n            : { name: file.name, message: undefined }\n        })\n      )\n\n      errors.value = responses.filter((r): r is { name: string; message: string } => r.message !== undefined)\n\n      const successful = responses\n        .filter(r => !r.message)\n        .map(r => r.name)\n\n      successes.value = Array.from(\n        new Set([...successes.value, ...successful])\n      )\n    } catch (err) {\n      console.error('Upload failed unexpectedly:', err)\n\n      errors.value.push({\n        name: 'upload',\n        message: 'An unexpected error occurred during upload.',\n      })\n    } finally {\n      loading.value = false\n    }\n  }\n\n\n  watch(\n    () => files.value.length,\n    () => {\n      if (!files.value.length) {\n        errors.value = []\n        successes.value = []\n      }\n\n      if (files.value.length > maxFiles) {\n        errors.value.push({\n          name: 'files',\n          message: `You may upload up to ${maxFiles} files`,\n        })\n      }\n    }\n  )\n\n  watch(\n    files,\n    (newFiles, oldFiles) => {\n      const newPreviews = new Set(newFiles.map(f => f.preview))\n      oldFiles.forEach(file => {\n        if (file.preview && !newPreviews.has(file.preview)) {\n          URL.revokeObjectURL(file.preview)\n        }\n      })\n    },\n    { deep: true }\n  )\n\n  onUnmounted(() => {\n    files.value.forEach(file => {\n      if (file.preview) {\n        URL.revokeObjectURL(file.preview)\n      }\n    })\n  })\n\n  return {\n    dropZoneRef,\n    isOverDropZone,\n\n    files,\n    setFiles: (v: FileWithPreview[]) => (files.value = v),\n\n    errors,\n    setErrors: (v: { name: string; message: string }[]) => (errors.value = v),\n\n    successes,\n    isSuccess,\n    loading,\n    onUpload,\n\n    maxFileSize,\n    maxFiles,\n    allowedMimeTypes,\n  }\n}\n",
+      "content": "import { ref, computed, watch, onUnmounted } from 'vue'\nimport { useDropZone } from '@vueuse/core'\n// @ts-ignore\nimport { createClient } from \"@/lib/supabase/client\"\n\nconst supabase = createClient()\n\nexport interface FileWithPreview extends File {\n  preview?: string\n  errors: { code: string; message: string }[]\n}\n\nexport type UseSupabaseUploadOptions = {\n  bucketName: string\n  path?: string\n  allowedMimeTypes?: string[]\n  maxFileSize?: number\n  maxFiles?: number\n  cacheControl?: number\n  upsert?: boolean\n}\n\nfunction validateFileType(file: File, allowedTypes: string[]) {\n  if (!allowedTypes.length) return []\n  const isValid = allowedTypes.some(t =>\n    t.endsWith('/*')\n      ? file.type.startsWith(t.replace('/*', ''))\n      : file.type === t\n  )\n  return isValid\n    ? []\n    : [{ code: 'invalid-type', message: 'Invalid file type' }]\n}\n\nfunction validateFileSize(file: File, maxSize: number) {\n  return file.size > maxSize\n    ? [{ code: 'file-too-large', message: `File is larger than allowed size` }]\n    : []\n}\n\nexport function useSupabaseUpload(options: UseSupabaseUploadOptions) {\n  const {\n    bucketName,\n    path,\n    allowedMimeTypes = [],\n    maxFileSize = Number.POSITIVE_INFINITY,\n    maxFiles = 1,\n    cacheControl = 3600,\n    upsert = false,\n  } = options\n\n  const files = ref<FileWithPreview[]>([])\n  const loading = ref(false)\n  const errors = ref<{ name: string; message: string }[]>([])\n  const successes = ref<string[]>([])\n\n  const isSuccess = computed(() => {\n    if (!errors.value.length && !successes.value.length) return false\n    return !errors.value.length && successes.value.length === files.value.length\n  })\n\n  const dropZoneRef = ref<HTMLElement | null>(null)\n\n  const { isOverDropZone } = useDropZone(dropZoneRef, {\n    onDrop(droppedFiles: File[] | null) {\n      if (!droppedFiles) return\n\n      const newFiles: FileWithPreview[] = droppedFiles.map(file => ({\n        ...(file as FileWithPreview),\n        preview: URL.createObjectURL(file),\n        errors: [\n          ...validateFileType(file, allowedMimeTypes),\n          ...validateFileSize(file, maxFileSize),\n        ],\n      }))\n\n      files.value = [...files.value, ...newFiles]\n    },\n  })\n\n  const onUpload = async () => {\n    loading.value = true\n\n    try {\n      const filesWithErrors = errors.value.map(e => e.name)\n\n      const filesToUpload =\n        filesWithErrors.length > 0\n          ? files.value.filter(\n              f =>\n                filesWithErrors.includes(f.name) ||\n                !successes.value.includes(f.name)\n            )\n          : files.value\n\n      const responses = await Promise.all(\n        filesToUpload.map(async file => {\n          const { error } = await supabase.storage\n            .from(bucketName)\n            .upload(path ? `${path}/${file.name}` : file.name, file, {\n              cacheControl: cacheControl.toString(),\n              upsert,\n            })\n\n          return error\n            ? { name: file.name, message: error.message }\n            : { name: file.name, message: undefined }\n        })\n      )\n\n      errors.value = responses.filter((r): r is { name: string; message: string } => r.message !== undefined)\n\n      const successful = responses\n        .filter(r => !r.message)\n        .map(r => r.name)\n\n      successes.value = Array.from(\n        new Set([...successes.value, ...successful])\n      )\n    } catch (err) {\n      console.error('Upload failed unexpectedly:', err)\n\n      errors.value.push({\n        name: 'upload',\n        message: 'An unexpected error occurred during upload.',\n      })\n    } finally {\n      loading.value = false\n    }\n  }\n\n\n  watch(\n    () => files.value.length,\n    () => {\n      if (!files.value.length) {\n        errors.value = []\n        successes.value = []\n      }\n\n      if (files.value.length > maxFiles) {\n        errors.value.push({\n          name: 'files',\n          message: `You may upload up to ${maxFiles} files`,\n        })\n      }\n    }\n  )\n\n  watch(\n    files,\n    (newFiles, oldFiles) => {\n      const newPreviews = new Set(newFiles.map(f => f.preview))\n      oldFiles.forEach(file => {\n        if (file.preview && !newPreviews.has(file.preview)) {\n          URL.revokeObjectURL(file.preview)\n        }\n      })\n    },\n    { deep: true }\n  )\n\n  onUnmounted(() => {\n    files.value.forEach(file => {\n      if (file.preview) {\n        URL.revokeObjectURL(file.preview)\n      }\n    })\n  })\n\n  return {\n    dropZoneRef,\n    isOverDropZone,\n\n    files,\n    setFiles: (v: FileWithPreview[]) => (files.value = v),\n\n    errors,\n    setErrors: (v: { name: string; message: string }[]) => (errors.value = v),\n\n    successes,\n    isSuccess,\n    loading,\n    onUpload,\n\n    maxFileSize,\n    maxFiles,\n    allowedMimeTypes,\n  }\n}\n",
       "type": "registry:component",
       "target": "composables/useSupabaseUpload.ts"
     }
diff --git a/apps/ui-library/public/r/infinite-query-hook.json b/apps/ui-library/public/r/infinite-query-hook.json
index 5ed44d9e635..bd4c59f4976 100644
--- a/apps/ui-library/public/r/infinite-query-hook.json
+++ b/apps/ui-library/public/r/infinite-query-hook.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/default/blocks/infinite-query-hook/hooks/use-infinite-query.ts",
-      "content": "'use client'\n\nimport { createClient } from '@/registry/default/fixtures/lib/supabase/client'\nimport { PostgrestQueryBuilder, type PostgrestClientOptions } from '@supabase/postgrest-js'\nimport { type SupabaseClient } from '@supabase/supabase-js'\nimport { useEffect, useRef, useSyncExternalStore } from 'react'\n\nconst supabase = createClient()\n\n// The following types are used to make the hook type-safe. It extracts the database type from the supabase client.\ntype SupabaseClientType = typeof supabase\n\n// Utility type to check if the type is any\ntype IfAny<T, Y, N> = 0 extends 1 & T ? Y : N\n\n// Extracts the database type from the supabase client. If the supabase client doesn't have a type, it will fallback properly.\ntype Database =\n  SupabaseClientType extends SupabaseClient<infer U>\n    ? IfAny<\n        U,\n        {\n          public: {\n            Tables: Record<string, any>\n            Views: Record<string, any>\n            Functions: Record<string, any>\n          }\n        },\n        U\n      >\n    : {\n        public: {\n          Tables: Record<string, any>\n          Views: Record<string, any>\n          Functions: Record<string, any>\n        }\n      }\n\n// Change this to the database schema you want to use\ntype DatabaseSchema = Database['public']\n\n// Extracts the table names from the database type\ntype SupabaseTableName = keyof DatabaseSchema['Tables']\n\n// Extracts the table definition from the database type\ntype SupabaseTableData<T extends SupabaseTableName> = DatabaseSchema['Tables'][T]['Row']\n\n// Default client options for PostgrestQueryBuilder\ntype DefaultClientOptions = PostgrestClientOptions\n\ntype SupabaseSelectBuilder<T extends SupabaseTableName> = ReturnType<\n  PostgrestQueryBuilder<\n    DefaultClientOptions,\n    DatabaseSchema,\n    DatabaseSchema['Tables'][T],\n    T\n  >['select']\n>\n\n// A function that modifies the query. Can be used to sort, filter, etc. If .range is used, it will be overwritten.\ntype SupabaseQueryHandler<T extends SupabaseTableName> = (\n  query: SupabaseSelectBuilder<T>\n) => SupabaseSelectBuilder<T>\n\ninterface UseInfiniteQueryProps<T extends SupabaseTableName, Query extends string = '*'> {\n  // The table name to query\n  tableName: T\n  // The columns to select, defaults to `*`\n  columns?: string\n  // The number of items to fetch per page, defaults to `20`\n  pageSize?: number\n  // A function that modifies the query. Can be used to sort, filter, etc. If .range is used, it will be overwritten.\n  trailingQuery?: SupabaseQueryHandler<T>\n}\n\ninterface StoreState<TData> {\n  data: TData[]\n  count: number\n  isSuccess: boolean\n  isLoading: boolean\n  isFetching: boolean\n  error: Error | null\n  hasInitialFetch: boolean\n}\n\ntype Listener = () => void\n\nfunction createStore<TData extends SupabaseTableData<T>, T extends SupabaseTableName>(\n  props: UseInfiniteQueryProps<T>\n) {\n  const { tableName, columns = '*', pageSize = 20, trailingQuery } = props\n\n  let state: StoreState<TData> = {\n    data: [],\n    count: 0,\n    isSuccess: false,\n    isLoading: false,\n    isFetching: false,\n    error: null,\n    hasInitialFetch: false,\n  }\n\n  const listeners = new Set<Listener>()\n\n  const notify = () => {\n    listeners.forEach((listener) => listener())\n  }\n\n  const setState = (newState: Partial<StoreState<TData>>) => {\n    state = { ...state, ...newState }\n    notify()\n  }\n\n  const fetchPage = async (skip: number) => {\n    if (state.hasInitialFetch && (state.isFetching || state.count <= state.data.length)) return\n\n    setState({ isFetching: true })\n\n    let query = supabase\n      .from(tableName)\n      .select(columns, { count: 'exact' }) as unknown as SupabaseSelectBuilder<T>\n\n    if (trailingQuery) {\n      query = trailingQuery(query)\n    }\n    const { data: newData, count, error } = await query.range(skip, skip + pageSize - 1)\n\n    if (error) {\n      console.error('An unexpected error occurred:', error)\n      setState({ error })\n    } else {\n      setState({\n        data: [...state.data, ...(newData as TData[])],\n        count: count || 0,\n        isSuccess: true,\n        error: null,\n      })\n    }\n    setState({ isFetching: false })\n  }\n\n  const fetchNextPage = async () => {\n    if (state.isFetching) return\n    await fetchPage(state.data.length)\n  }\n\n  const initialize = async () => {\n    setState({ isLoading: true, isSuccess: false, data: [] })\n    await fetchNextPage()\n    setState({ isLoading: false, hasInitialFetch: true })\n  }\n\n  return {\n    getState: () => state,\n    subscribe: (listener: Listener) => {\n      listeners.add(listener)\n      return () => listeners.delete(listener)\n    },\n    fetchNextPage,\n    initialize,\n  }\n}\n\n// Empty initial state to avoid hydration errors.\nconst initialState: any = {\n  data: [],\n  count: 0,\n  isSuccess: false,\n  isLoading: false,\n  isFetching: false,\n  error: null,\n  hasInitialFetch: false,\n}\n\nfunction useInfiniteQuery<\n  TData extends SupabaseTableData<T>,\n  T extends SupabaseTableName = SupabaseTableName,\n>(props: UseInfiniteQueryProps<T>) {\n  const storeRef = useRef(createStore<TData, T>(props))\n\n  const state = useSyncExternalStore(\n    storeRef.current.subscribe,\n    () => storeRef.current.getState(),\n    () => initialState as StoreState<TData>\n  )\n\n  useEffect(() => {\n    // Recreate store if props change\n    if (\n      storeRef.current.getState().hasInitialFetch &&\n      (props.tableName !== props.tableName ||\n        props.columns !== props.columns ||\n        props.pageSize !== props.pageSize)\n    ) {\n      storeRef.current = createStore<TData, T>(props)\n    }\n\n    if (!state.hasInitialFetch && typeof window !== 'undefined') {\n      storeRef.current.initialize()\n    }\n  }, [props.tableName, props.columns, props.pageSize, state.hasInitialFetch])\n\n  return {\n    data: state.data,\n    count: state.count,\n    isSuccess: state.isSuccess,\n    isLoading: state.isLoading,\n    isFetching: state.isFetching,\n    error: state.error,\n    hasMore: state.count > state.data.length,\n    fetchNextPage: storeRef.current.fetchNextPage,\n  }\n}\n\nexport {\n  useInfiniteQuery,\n  type SupabaseQueryHandler,\n  type SupabaseTableData,\n  type SupabaseTableName,\n  type UseInfiniteQueryProps,\n}\n",
+      "content": "'use client'\n\nimport { PostgrestQueryBuilder, type PostgrestClientOptions } from '@supabase/postgrest-js'\nimport { type SupabaseClient } from '@supabase/supabase-js'\nimport { useEffect, useRef, useSyncExternalStore } from 'react'\n\nimport { createClient } from '@/registry/default/fixtures/lib/supabase/client'\n\nconst supabase = createClient()\n\n// The following types are used to make the hook type-safe. It extracts the database type from the supabase client.\ntype SupabaseClientType = typeof supabase\n\n// Utility type to check if the type is any\ntype IfAny<T, Y, N> = 0 extends 1 & T ? Y : N\n\n// Extracts the database type from the supabase client. If the supabase client doesn't have a type, it will fallback properly.\ntype Database =\n  SupabaseClientType extends SupabaseClient<infer U>\n    ? IfAny<\n        U,\n        {\n          public: {\n            Tables: Record<string, any>\n            Views: Record<string, any>\n            Functions: Record<string, any>\n          }\n        },\n        U\n      >\n    : {\n        public: {\n          Tables: Record<string, any>\n          Views: Record<string, any>\n          Functions: Record<string, any>\n        }\n      }\n\n// Change this to the database schema you want to use\ntype DatabaseSchema = Database['public']\n\n// Extracts the table names from the database type\ntype SupabaseTableName = keyof DatabaseSchema['Tables']\n\n// Extracts the table definition from the database type\ntype SupabaseTableData<T extends SupabaseTableName> = DatabaseSchema['Tables'][T]['Row']\n\n// Default client options for PostgrestQueryBuilder\ntype DefaultClientOptions = PostgrestClientOptions\n\ntype SupabaseSelectBuilder<T extends SupabaseTableName> = ReturnType<\n  PostgrestQueryBuilder<\n    DefaultClientOptions,\n    DatabaseSchema,\n    DatabaseSchema['Tables'][T],\n    T\n  >['select']\n>\n\n// A function that modifies the query. Can be used to sort, filter, etc. If .range is used, it will be overwritten.\ntype SupabaseQueryHandler<T extends SupabaseTableName> = (\n  query: SupabaseSelectBuilder<T>\n) => SupabaseSelectBuilder<T>\n\ninterface UseInfiniteQueryProps<T extends SupabaseTableName, Query extends string = '*'> {\n  // The table name to query\n  tableName: T\n  // The columns to select, defaults to `*`\n  columns?: string\n  // The number of items to fetch per page, defaults to `20`\n  pageSize?: number\n  // A function that modifies the query. Can be used to sort, filter, etc. If .range is used, it will be overwritten.\n  trailingQuery?: SupabaseQueryHandler<T>\n}\n\ninterface StoreState<TData> {\n  data: TData[]\n  count: number\n  isSuccess: boolean\n  isLoading: boolean\n  isFetching: boolean\n  error: Error | null\n  hasInitialFetch: boolean\n}\n\ntype Listener = () => void\n\nfunction createStore<TData extends SupabaseTableData<T>, T extends SupabaseTableName>(\n  props: UseInfiniteQueryProps<T>\n) {\n  const { tableName, columns = '*', pageSize = 20, trailingQuery } = props\n\n  let state: StoreState<TData> = {\n    data: [],\n    count: 0,\n    isSuccess: false,\n    isLoading: false,\n    isFetching: false,\n    error: null,\n    hasInitialFetch: false,\n  }\n\n  const listeners = new Set<Listener>()\n\n  const notify = () => {\n    listeners.forEach((listener) => listener())\n  }\n\n  const setState = (newState: Partial<StoreState<TData>>) => {\n    state = { ...state, ...newState }\n    notify()\n  }\n\n  const fetchPage = async (skip: number) => {\n    if (state.hasInitialFetch && (state.isFetching || state.count <= state.data.length)) return\n\n    setState({ isFetching: true })\n\n    let query = supabase\n      .from(tableName)\n      .select(columns, { count: 'exact' }) as unknown as SupabaseSelectBuilder<T>\n\n    if (trailingQuery) {\n      query = trailingQuery(query)\n    }\n    const { data: newData, count, error } = await query.range(skip, skip + pageSize - 1)\n\n    if (error) {\n      console.error('An unexpected error occurred:', error)\n      setState({ error })\n    } else {\n      setState({\n        data: [...state.data, ...(newData as TData[])],\n        count: count || 0,\n        isSuccess: true,\n        error: null,\n      })\n    }\n    setState({ isFetching: false })\n  }\n\n  const fetchNextPage = async () => {\n    if (state.isFetching) return\n    await fetchPage(state.data.length)\n  }\n\n  const initialize = async () => {\n    setState({ isLoading: true, isSuccess: false, data: [] })\n    await fetchNextPage()\n    setState({ isLoading: false, hasInitialFetch: true })\n  }\n\n  return {\n    getState: () => state,\n    subscribe: (listener: Listener) => {\n      listeners.add(listener)\n      return () => listeners.delete(listener)\n    },\n    fetchNextPage,\n    initialize,\n  }\n}\n\n// Empty initial state to avoid hydration errors.\nconst initialState: any = {\n  data: [],\n  count: 0,\n  isSuccess: false,\n  isLoading: false,\n  isFetching: false,\n  error: null,\n  hasInitialFetch: false,\n}\n\nfunction useInfiniteQuery<\n  TData extends SupabaseTableData<T>,\n  T extends SupabaseTableName = SupabaseTableName,\n>(props: UseInfiniteQueryProps<T>) {\n  const storeRef = useRef(createStore<TData, T>(props))\n\n  const state = useSyncExternalStore(\n    storeRef.current.subscribe,\n    () => storeRef.current.getState(),\n    () => initialState as StoreState<TData>\n  )\n\n  useEffect(() => {\n    // Recreate store if props change\n    if (\n      storeRef.current.getState().hasInitialFetch &&\n      (props.tableName !== props.tableName ||\n        props.columns !== props.columns ||\n        props.pageSize !== props.pageSize)\n    ) {\n      storeRef.current = createStore<TData, T>(props)\n    }\n\n    if (!state.hasInitialFetch && typeof window !== 'undefined') {\n      storeRef.current.initialize()\n    }\n  }, [props.tableName, props.columns, props.pageSize, state.hasInitialFetch])\n\n  return {\n    data: state.data,\n    count: state.count,\n    isSuccess: state.isSuccess,\n    isLoading: state.isLoading,\n    isFetching: state.isFetching,\n    error: state.error,\n    hasMore: state.count > state.data.length,\n    fetchNextPage: storeRef.current.fetchNextPage,\n  }\n}\n\nexport {\n  useInfiniteQuery,\n  type SupabaseQueryHandler,\n  type SupabaseTableData,\n  type SupabaseTableName,\n  type UseInfiniteQueryProps,\n}\n",
       "type": "registry:hook"
     }
   ]
diff --git a/apps/ui-library/public/r/password-based-auth-nextjs.json b/apps/ui-library/public/r/password-based-auth-nextjs.json
index f5c48585d09..8e983697f48 100644
--- a/apps/ui-library/public/r/password-based-auth-nextjs.json
+++ b/apps/ui-library/public/r/password-based-auth-nextjs.json
@@ -35,18 +35,18 @@
     },
     {
       "path": "registry/default/blocks/password-based-auth-nextjs/app/auth/confirm/route.ts",
-      "content": "import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/server'\nimport { type EmailOtpType } from '@supabase/supabase-js'\nimport { redirect } from 'next/navigation'\nimport { type NextRequest } from 'next/server'\n\nexport async function GET(request: NextRequest) {\n  const { searchParams } = new URL(request.url)\n  const token_hash = searchParams.get('token_hash')\n  const type = searchParams.get('type') as EmailOtpType | null\n  const _next = searchParams.get('next')\n  const next = _next?.startsWith('/') ? _next : '/'\n\n  if (token_hash && type) {\n    const supabase = await createClient()\n\n    const { error } = await supabase.auth.verifyOtp({\n      type,\n      token_hash,\n    })\n    if (!error) {\n      // redirect user to specified redirect URL or root of app\n      redirect(next)\n    } else {\n      // redirect the user to an error page with some instructions\n      redirect(`/auth/error?error=${error?.message}`)\n    }\n  }\n\n  // redirect the user to an error page with some instructions\n  redirect(`/auth/error?error=No token hash or type`)\n}\n",
+      "content": "import { type EmailOtpType } from '@supabase/supabase-js'\nimport { redirect } from 'next/navigation'\nimport { type NextRequest } from 'next/server'\n\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/server'\n\nexport async function GET(request: NextRequest) {\n  const { searchParams } = new URL(request.url)\n  const token_hash = searchParams.get('token_hash')\n  const type = searchParams.get('type') as EmailOtpType | null\n  const _next = searchParams.get('next')\n  const next = _next?.startsWith('/') ? _next : '/'\n\n  if (token_hash && type) {\n    const supabase = await createClient()\n\n    const { error } = await supabase.auth.verifyOtp({\n      type,\n      token_hash,\n    })\n    if (!error) {\n      // redirect user to specified redirect URL or root of app\n      redirect(next)\n    } else {\n      // redirect the user to an error page with some instructions\n      redirect(`/auth/error?error=${error?.message}`)\n    }\n  }\n\n  // redirect the user to an error page with some instructions\n  redirect(`/auth/error?error=No token hash or type`)\n}\n",
       "type": "registry:page",
       "target": "app/auth/confirm/route.ts"
     },
     {
       "path": "registry/default/blocks/password-based-auth-nextjs/components/login-form.tsx",
-      "content": "'use client'\n\nimport { cn } from '@/lib/utils'\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Label } from '@/registry/default/components/ui/label'\nimport Link from 'next/link'\nimport { useRouter } from 'next/navigation'\nimport { useState } from 'react'\n\nexport function LoginForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {\n  const [email, setEmail] = useState('')\n  const [password, setPassword] = useState('')\n  const [error, setError] = useState<string | null>(null)\n  const [isLoading, setIsLoading] = useState(false)\n  const router = useRouter()\n\n  const handleLogin = async (e: React.FormEvent) => {\n    e.preventDefault()\n    const supabase = createClient()\n    setIsLoading(true)\n    setError(null)\n\n    try {\n      const { error } = await supabase.auth.signInWithPassword({\n        email,\n        password,\n      })\n      if (error) throw error\n      // Update this route to redirect to an authenticated route. The user already has an active session.\n      router.push('/protected')\n    } catch (error: unknown) {\n      setError(error instanceof Error ? error.message : 'An error occurred')\n    } finally {\n      setIsLoading(false)\n    }\n  }\n\n  return (\n    <div className={cn('flex flex-col gap-6', className)} {...props}>\n      <Card>\n        <CardHeader>\n          <CardTitle className=\"text-2xl\">Login</CardTitle>\n          <CardDescription>Enter your email below to login to your account</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form onSubmit={handleLogin}>\n            <div className=\"flex flex-col gap-6\">\n              <div className=\"grid gap-2\">\n                <Label htmlFor=\"email\">Email</Label>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                  value={email}\n                  onChange={(e) => setEmail(e.target.value)}\n                />\n              </div>\n              <div className=\"grid gap-2\">\n                <div className=\"flex items-center\">\n                  <Label htmlFor=\"password\">Password</Label>\n                  <Link\n                    href=\"/auth/forgot-password\"\n                    className=\"ml-auto inline-block text-sm underline-offset-4 hover:underline\"\n                  >\n                    Forgot your password?\n                  </Link>\n                </div>\n                <Input\n                  id=\"password\"\n                  type=\"password\"\n                  required\n                  value={password}\n                  onChange={(e) => setPassword(e.target.value)}\n                />\n              </div>\n              {error && <p className=\"text-sm text-red-500\">{error}</p>}\n              <Button type=\"submit\" className=\"w-full\" disabled={isLoading}>\n                {isLoading ? 'Logging in...' : 'Login'}\n              </Button>\n            </div>\n            <div className=\"mt-4 text-center text-sm\">\n              Don&apos;t have an account?{' '}\n              <Link href=\"/auth/sign-up\" className=\"underline underline-offset-4\">\n                Sign up\n              </Link>\n            </div>\n          </form>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n",
+      "content": "'use client'\n\nimport { useRouter } from 'next/navigation'\nimport { useState } from 'react'\n\nimport { cn } from '@/lib/utils'\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Label } from '@/registry/default/components/ui/label'\nimport Link from 'next/link'\n\nexport function LoginForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {\n  const [email, setEmail] = useState('')\n  const [password, setPassword] = useState('')\n  const [error, setError] = useState<string | null>(null)\n  const [isLoading, setIsLoading] = useState(false)\n  const router = useRouter()\n\n  const handleLogin = async (e: React.FormEvent) => {\n    e.preventDefault()\n    const supabase = createClient()\n    setIsLoading(true)\n    setError(null)\n\n    try {\n      const { error } = await supabase.auth.signInWithPassword({\n        email,\n        password,\n      })\n      if (error) throw error\n      // Update this route to redirect to an authenticated route. The user already has an active session.\n      router.push('/protected')\n    } catch (error: unknown) {\n      setError(error instanceof Error ? error.message : 'An error occurred')\n    } finally {\n      setIsLoading(false)\n    }\n  }\n\n  return (\n    <div className={cn('flex flex-col gap-6', className)} {...props}>\n      <Card>\n        <CardHeader>\n          <CardTitle className=\"text-2xl\">Login</CardTitle>\n          <CardDescription>Enter your email below to login to your account</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form onSubmit={handleLogin}>\n            <div className=\"flex flex-col gap-6\">\n              <div className=\"grid gap-2\">\n                <Label htmlFor=\"email\">Email</Label>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                  value={email}\n                  onChange={(e) => setEmail(e.target.value)}\n                />\n              </div>\n              <div className=\"grid gap-2\">\n                <div className=\"flex items-center\">\n                  <Label htmlFor=\"password\">Password</Label>\n                  <Link\n                    href=\"/auth/forgot-password\"\n                    className=\"ml-auto inline-block text-sm underline-offset-4 hover:underline\"\n                  >\n                    Forgot your password?\n                  </Link>\n                </div>\n                <Input\n                  id=\"password\"\n                  type=\"password\"\n                  required\n                  value={password}\n                  onChange={(e) => setPassword(e.target.value)}\n                />\n              </div>\n              {error && <p className=\"text-sm text-red-500\">{error}</p>}\n              <Button type=\"submit\" className=\"w-full\" disabled={isLoading}>\n                {isLoading ? 'Logging in...' : 'Login'}\n              </Button>\n            </div>\n            <div className=\"mt-4 text-center text-sm\">\n              Don&apos;t have an account?{' '}\n              <Link href=\"/auth/sign-up\" className=\"underline underline-offset-4\">\n                Sign up\n              </Link>\n            </div>\n          </form>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/default/blocks/password-based-auth-nextjs/middleware.ts",
-      "content": "import { updateSession } from '@/registry/default/clients/nextjs/lib/supabase/middleware'\nimport { type NextRequest } from 'next/server'\n\nexport async function middleware(request: NextRequest) {\n  return await updateSession(request)\n}\n\nexport const config = {\n  matcher: [\n    /*\n     * Match all request paths except:\n     * - _next/static (static files)\n     * - _next/image (image optimization files)\n     * - favicon.ico (favicon file)\n     * - images - .svg, .png, .jpg, .jpeg, .gif, .webp\n     * Feel free to modify this pattern to include more paths.\n     */\n    '/((?!_next/static|_next/image|favicon.ico|.*\\\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)',\n  ],\n}\n",
+      "content": "import { type NextRequest } from 'next/server'\n\nimport { updateSession } from '@/registry/default/clients/nextjs/lib/supabase/middleware'\n\nexport async function middleware(request: NextRequest) {\n  return await updateSession(request)\n}\n\nexport const config = {\n  matcher: [\n    /*\n     * Match all request paths except:\n     * - _next/static (static files)\n     * - _next/image (image optimization files)\n     * - favicon.ico (favicon file)\n     * - images - .svg, .png, .jpg, .jpeg, .gif, .webp\n     * Feel free to modify this pattern to include more paths.\n     */\n    '/((?!_next/static|_next/image|favicon.ico|.*\\\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)',\n  ],\n}\n",
       "type": "registry:file",
       "target": "middleware.ts"
     },
@@ -64,7 +64,7 @@
     },
     {
       "path": "registry/default/blocks/password-based-auth-nextjs/components/sign-up-form.tsx",
-      "content": "'use client'\n\nimport { cn } from '@/lib/utils'\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Label } from '@/registry/default/components/ui/label'\nimport Link from 'next/link'\nimport { useRouter } from 'next/navigation'\nimport { useState } from 'react'\n\nexport function SignUpForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {\n  const [email, setEmail] = useState('')\n  const [password, setPassword] = useState('')\n  const [repeatPassword, setRepeatPassword] = useState('')\n  const [error, setError] = useState<string | null>(null)\n  const [isLoading, setIsLoading] = useState(false)\n  const router = useRouter()\n\n  const handleSignUp = async (e: React.FormEvent) => {\n    e.preventDefault()\n    const supabase = createClient()\n    setIsLoading(true)\n    setError(null)\n\n    if (password !== repeatPassword) {\n      setError('Passwords do not match')\n      setIsLoading(false)\n      return\n    }\n\n    try {\n      const { error } = await supabase.auth.signUp({\n        email,\n        password,\n        options: {\n          emailRedirectTo: `${window.location.origin}/protected`,\n        },\n      })\n      if (error) throw error\n      router.push('/auth/sign-up-success')\n    } catch (error: unknown) {\n      setError(error instanceof Error ? error.message : 'An error occurred')\n    } finally {\n      setIsLoading(false)\n    }\n  }\n\n  return (\n    <div className={cn('flex flex-col gap-6', className)} {...props}>\n      <Card>\n        <CardHeader>\n          <CardTitle className=\"text-2xl\">Sign up</CardTitle>\n          <CardDescription>Create a new account</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form onSubmit={handleSignUp}>\n            <div className=\"flex flex-col gap-6\">\n              <div className=\"grid gap-2\">\n                <Label htmlFor=\"email\">Email</Label>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                  value={email}\n                  onChange={(e) => setEmail(e.target.value)}\n                />\n              </div>\n              <div className=\"grid gap-2\">\n                <div className=\"flex items-center\">\n                  <Label htmlFor=\"password\">Password</Label>\n                </div>\n                <Input\n                  id=\"password\"\n                  type=\"password\"\n                  required\n                  value={password}\n                  onChange={(e) => setPassword(e.target.value)}\n                />\n              </div>\n              <div className=\"grid gap-2\">\n                <div className=\"flex items-center\">\n                  <Label htmlFor=\"repeat-password\">Repeat Password</Label>\n                </div>\n                <Input\n                  id=\"repeat-password\"\n                  type=\"password\"\n                  required\n                  value={repeatPassword}\n                  onChange={(e) => setRepeatPassword(e.target.value)}\n                />\n              </div>\n              {error && <p className=\"text-sm text-red-500\">{error}</p>}\n              <Button type=\"submit\" className=\"w-full\" disabled={isLoading}>\n                {isLoading ? 'Creating an account...' : 'Sign up'}\n              </Button>\n            </div>\n            <div className=\"mt-4 text-center text-sm\">\n              Already have an account?{' '}\n              <Link href=\"/auth/login\" className=\"underline underline-offset-4\">\n                Login\n              </Link>\n            </div>\n          </form>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n",
+      "content": "'use client'\n\nimport { useRouter } from 'next/navigation'\nimport { useState } from 'react'\n\nimport { cn } from '@/lib/utils'\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Label } from '@/registry/default/components/ui/label'\nimport Link from 'next/link'\n\nexport function SignUpForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {\n  const [email, setEmail] = useState('')\n  const [password, setPassword] = useState('')\n  const [repeatPassword, setRepeatPassword] = useState('')\n  const [error, setError] = useState<string | null>(null)\n  const [isLoading, setIsLoading] = useState(false)\n  const router = useRouter()\n\n  const handleSignUp = async (e: React.FormEvent) => {\n    e.preventDefault()\n    const supabase = createClient()\n    setIsLoading(true)\n    setError(null)\n\n    if (password !== repeatPassword) {\n      setError('Passwords do not match')\n      setIsLoading(false)\n      return\n    }\n\n    try {\n      const { error } = await supabase.auth.signUp({\n        email,\n        password,\n        options: {\n          emailRedirectTo: `${window.location.origin}/protected`,\n        },\n      })\n      if (error) throw error\n      router.push('/auth/sign-up-success')\n    } catch (error: unknown) {\n      setError(error instanceof Error ? error.message : 'An error occurred')\n    } finally {\n      setIsLoading(false)\n    }\n  }\n\n  return (\n    <div className={cn('flex flex-col gap-6', className)} {...props}>\n      <Card>\n        <CardHeader>\n          <CardTitle className=\"text-2xl\">Sign up</CardTitle>\n          <CardDescription>Create a new account</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form onSubmit={handleSignUp}>\n            <div className=\"flex flex-col gap-6\">\n              <div className=\"grid gap-2\">\n                <Label htmlFor=\"email\">Email</Label>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                  value={email}\n                  onChange={(e) => setEmail(e.target.value)}\n                />\n              </div>\n              <div className=\"grid gap-2\">\n                <div className=\"flex items-center\">\n                  <Label htmlFor=\"password\">Password</Label>\n                </div>\n                <Input\n                  id=\"password\"\n                  type=\"password\"\n                  required\n                  value={password}\n                  onChange={(e) => setPassword(e.target.value)}\n                />\n              </div>\n              <div className=\"grid gap-2\">\n                <div className=\"flex items-center\">\n                  <Label htmlFor=\"repeat-password\">Repeat Password</Label>\n                </div>\n                <Input\n                  id=\"repeat-password\"\n                  type=\"password\"\n                  required\n                  value={repeatPassword}\n                  onChange={(e) => setRepeatPassword(e.target.value)}\n                />\n              </div>\n              {error && <p className=\"text-sm text-red-500\">{error}</p>}\n              <Button type=\"submit\" className=\"w-full\" disabled={isLoading}>\n                {isLoading ? 'Creating an account...' : 'Sign up'}\n              </Button>\n            </div>\n            <div className=\"mt-4 text-center text-sm\">\n              Already have an account?{' '}\n              <Link href=\"/auth/login\" className=\"underline underline-offset-4\">\n                Login\n              </Link>\n            </div>\n          </form>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -81,17 +81,17 @@
     },
     {
       "path": "registry/default/blocks/password-based-auth-nextjs/components/forgot-password-form.tsx",
-      "content": "'use client'\n\nimport { cn } from '@/lib/utils'\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Label } from '@/registry/default/components/ui/label'\nimport Link from 'next/link'\nimport { useState } from 'react'\n\nexport function ForgotPasswordForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {\n  const [email, setEmail] = useState('')\n  const [error, setError] = useState<string | null>(null)\n  const [success, setSuccess] = useState(false)\n  const [isLoading, setIsLoading] = useState(false)\n\n  const handleForgotPassword = async (e: React.FormEvent) => {\n    e.preventDefault()\n    const supabase = createClient()\n    setIsLoading(true)\n    setError(null)\n\n    try {\n      // The url which will be included in the email. This URL needs to be configured in your redirect URLs in the Supabase dashboard at https://supabase.com/dashboard/project/_/auth/url-configuration\n      const { error } = await supabase.auth.resetPasswordForEmail(email, {\n        redirectTo: `${window.location.origin}/auth/update-password`,\n      })\n      if (error) throw error\n      setSuccess(true)\n    } catch (error: unknown) {\n      setError(error instanceof Error ? error.message : 'An error occurred')\n    } finally {\n      setIsLoading(false)\n    }\n  }\n\n  return (\n    <div className={cn('flex flex-col gap-6', className)} {...props}>\n      {success ? (\n        <Card>\n          <CardHeader>\n            <CardTitle className=\"text-2xl\">Check Your Email</CardTitle>\n            <CardDescription>Password reset instructions sent</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <p className=\"text-sm text-muted-foreground\">\n              If you registered using your email and password, you will receive a password reset\n              email.\n            </p>\n          </CardContent>\n        </Card>\n      ) : (\n        <Card>\n          <CardHeader>\n            <CardTitle className=\"text-2xl\">Reset Your Password</CardTitle>\n            <CardDescription>\n              Type in your email and we&apos;ll send you a link to reset your password\n            </CardDescription>\n          </CardHeader>\n          <CardContent>\n            <form onSubmit={handleForgotPassword}>\n              <div className=\"flex flex-col gap-6\">\n                <div className=\"grid gap-2\">\n                  <Label htmlFor=\"email\">Email</Label>\n                  <Input\n                    id=\"email\"\n                    type=\"email\"\n                    placeholder=\"m@example.com\"\n                    required\n                    value={email}\n                    onChange={(e) => setEmail(e.target.value)}\n                  />\n                </div>\n                {error && <p className=\"text-sm text-red-500\">{error}</p>}\n                <Button type=\"submit\" className=\"w-full\" disabled={isLoading}>\n                  {isLoading ? 'Sending...' : 'Send reset email'}\n                </Button>\n              </div>\n              <div className=\"mt-4 text-center text-sm\">\n                Already have an account?{' '}\n                <Link href=\"/auth/login\" className=\"underline underline-offset-4\">\n                  Login\n                </Link>\n              </div>\n            </form>\n          </CardContent>\n        </Card>\n      )}\n    </div>\n  )\n}\n",
+      "content": "'use client'\n\nimport { useState } from 'react'\n\nimport { cn } from '@/lib/utils'\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Label } from '@/registry/default/components/ui/label'\nimport Link from 'next/link'\n\nexport function ForgotPasswordForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {\n  const [email, setEmail] = useState('')\n  const [error, setError] = useState<string | null>(null)\n  const [success, setSuccess] = useState(false)\n  const [isLoading, setIsLoading] = useState(false)\n\n  const handleForgotPassword = async (e: React.FormEvent) => {\n    e.preventDefault()\n    const supabase = createClient()\n    setIsLoading(true)\n    setError(null)\n\n    try {\n      // The url which will be included in the email. This URL needs to be configured in your redirect URLs in the Supabase dashboard at https://supabase.com/dashboard/project/_/auth/url-configuration\n      const { error } = await supabase.auth.resetPasswordForEmail(email, {\n        redirectTo: `${window.location.origin}/auth/update-password`,\n      })\n      if (error) throw error\n      setSuccess(true)\n    } catch (error: unknown) {\n      setError(error instanceof Error ? error.message : 'An error occurred')\n    } finally {\n      setIsLoading(false)\n    }\n  }\n\n  return (\n    <div className={cn('flex flex-col gap-6', className)} {...props}>\n      {success ? (\n        <Card>\n          <CardHeader>\n            <CardTitle className=\"text-2xl\">Check Your Email</CardTitle>\n            <CardDescription>Password reset instructions sent</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <p className=\"text-sm text-muted-foreground\">\n              If you registered using your email and password, you will receive a password reset\n              email.\n            </p>\n          </CardContent>\n        </Card>\n      ) : (\n        <Card>\n          <CardHeader>\n            <CardTitle className=\"text-2xl\">Reset Your Password</CardTitle>\n            <CardDescription>\n              Type in your email and we&apos;ll send you a link to reset your password\n            </CardDescription>\n          </CardHeader>\n          <CardContent>\n            <form onSubmit={handleForgotPassword}>\n              <div className=\"flex flex-col gap-6\">\n                <div className=\"grid gap-2\">\n                  <Label htmlFor=\"email\">Email</Label>\n                  <Input\n                    id=\"email\"\n                    type=\"email\"\n                    placeholder=\"m@example.com\"\n                    required\n                    value={email}\n                    onChange={(e) => setEmail(e.target.value)}\n                  />\n                </div>\n                {error && <p className=\"text-sm text-red-500\">{error}</p>}\n                <Button type=\"submit\" className=\"w-full\" disabled={isLoading}>\n                  {isLoading ? 'Sending...' : 'Send reset email'}\n                </Button>\n              </div>\n              <div className=\"mt-4 text-center text-sm\">\n                Already have an account?{' '}\n                <Link href=\"/auth/login\" className=\"underline underline-offset-4\">\n                  Login\n                </Link>\n              </div>\n            </form>\n          </CardContent>\n        </Card>\n      )}\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/default/blocks/password-based-auth-nextjs/components/update-password-form.tsx",
-      "content": "'use client'\n\nimport { cn } from '@/lib/utils'\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Label } from '@/registry/default/components/ui/label'\nimport { useRouter } from 'next/navigation'\nimport { useState } from 'react'\n\nexport function UpdatePasswordForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {\n  const [password, setPassword] = useState('')\n  const [error, setError] = useState<string | null>(null)\n  const [isLoading, setIsLoading] = useState(false)\n  const router = useRouter()\n\n  const handleForgotPassword = async (e: React.FormEvent) => {\n    e.preventDefault()\n    const supabase = createClient()\n    setIsLoading(true)\n    setError(null)\n\n    try {\n      const { error } = await supabase.auth.updateUser({ password })\n      if (error) throw error\n      // Update this route to redirect to an authenticated route. The user already has an active session.\n      router.push('/protected')\n    } catch (error: unknown) {\n      setError(error instanceof Error ? error.message : 'An error occurred')\n    } finally {\n      setIsLoading(false)\n    }\n  }\n\n  return (\n    <div className={cn('flex flex-col gap-6', className)} {...props}>\n      <Card>\n        <CardHeader>\n          <CardTitle className=\"text-2xl\">Reset Your Password</CardTitle>\n          <CardDescription>Please enter your new password below.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form onSubmit={handleForgotPassword}>\n            <div className=\"flex flex-col gap-6\">\n              <div className=\"grid gap-2\">\n                <Label htmlFor=\"password\">New password</Label>\n                <Input\n                  id=\"password\"\n                  type=\"password\"\n                  placeholder=\"New password\"\n                  required\n                  value={password}\n                  onChange={(e) => setPassword(e.target.value)}\n                />\n              </div>\n              {error && <p className=\"text-sm text-red-500\">{error}</p>}\n              <Button type=\"submit\" className=\"w-full\" disabled={isLoading}>\n                {isLoading ? 'Saving...' : 'Save new password'}\n              </Button>\n            </div>\n          </form>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n",
+      "content": "'use client'\n\nimport { useRouter } from 'next/navigation'\nimport { useState } from 'react'\n\nimport { cn } from '@/lib/utils'\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Label } from '@/registry/default/components/ui/label'\n\nexport function UpdatePasswordForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {\n  const [password, setPassword] = useState('')\n  const [error, setError] = useState<string | null>(null)\n  const [isLoading, setIsLoading] = useState(false)\n  const router = useRouter()\n\n  const handleForgotPassword = async (e: React.FormEvent) => {\n    e.preventDefault()\n    const supabase = createClient()\n    setIsLoading(true)\n    setError(null)\n\n    try {\n      const { error } = await supabase.auth.updateUser({ password })\n      if (error) throw error\n      // Update this route to redirect to an authenticated route. The user already has an active session.\n      router.push('/protected')\n    } catch (error: unknown) {\n      setError(error instanceof Error ? error.message : 'An error occurred')\n    } finally {\n      setIsLoading(false)\n    }\n  }\n\n  return (\n    <div className={cn('flex flex-col gap-6', className)} {...props}>\n      <Card>\n        <CardHeader>\n          <CardTitle className=\"text-2xl\">Reset Your Password</CardTitle>\n          <CardDescription>Please enter your new password below.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form onSubmit={handleForgotPassword}>\n            <div className=\"flex flex-col gap-6\">\n              <div className=\"grid gap-2\">\n                <Label htmlFor=\"password\">New password</Label>\n                <Input\n                  id=\"password\"\n                  type=\"password\"\n                  placeholder=\"New password\"\n                  required\n                  value={password}\n                  onChange={(e) => setPassword(e.target.value)}\n                />\n              </div>\n              {error && <p className=\"text-sm text-red-500\">{error}</p>}\n              <Button type=\"submit\" className=\"w-full\" disabled={isLoading}>\n                {isLoading ? 'Saving...' : 'Save new password'}\n              </Button>\n            </div>\n          </form>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/default/blocks/password-based-auth-nextjs/components/logout-button.tsx",
-      "content": "'use client'\n\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\nimport { Button } from '@/registry/default/components/ui/button'\nimport { useRouter } from 'next/navigation'\n\nexport function LogoutButton() {\n  const router = useRouter()\n\n  const logout = async () => {\n    const supabase = createClient()\n    await supabase.auth.signOut()\n    router.push('/auth/login')\n  }\n\n  return <Button onClick={logout}>Logout</Button>\n}\n",
+      "content": "'use client'\n\nimport { useRouter } from 'next/navigation'\n\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\nimport { Button } from '@/registry/default/components/ui/button'\n\nexport function LogoutButton() {\n  const router = useRouter()\n\n  const logout = async () => {\n    const supabase = createClient()\n    await supabase.auth.signOut()\n    router.push('/auth/login')\n  }\n\n  return <Button onClick={logout}>Logout</Button>\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/ui-library/public/r/password-based-auth-react-router.json b/apps/ui-library/public/r/password-based-auth-react-router.json
index a6d3e31ef17..5210579243b 100644
--- a/apps/ui-library/public/r/password-based-auth-react-router.json
+++ b/apps/ui-library/public/r/password-based-auth-react-router.json
@@ -19,49 +19,49 @@
   "files": [
     {
       "path": "registry/default/blocks/password-based-auth-react-router/app/routes/auth.confirm.tsx",
-      "content": "import { createClient } from '@/registry/default/clients/react-router/lib/supabase/server'\nimport { type EmailOtpType } from '@supabase/supabase-js'\nimport { type LoaderFunctionArgs, redirect } from 'react-router'\n\nexport async function loader({ request }: LoaderFunctionArgs) {\n  const requestUrl = new URL(request.url)\n  const token_hash = requestUrl.searchParams.get('token_hash')\n  const type = requestUrl.searchParams.get('type') as EmailOtpType | null\n  const _next = requestUrl.searchParams.get('next')\n  const next = _next?.startsWith('/') ? _next : '/'\n\n  if (token_hash && type) {\n    const { supabase, headers } = createClient(request)\n    const { error } = await supabase.auth.verifyOtp({\n      type,\n      token_hash,\n    })\n    if (!error) {\n      return redirect(next, { headers })\n    } else {\n      return redirect(`/auth/error?error=${error?.message}`)\n    }\n  }\n\n  // redirect the user to an error page with some instructions\n  return redirect(`/auth/error?error=No token hash or type`)\n}\n",
+      "content": "import { type EmailOtpType } from '@supabase/supabase-js'\nimport { redirect, type LoaderFunctionArgs } from 'react-router'\n\nimport { createClient } from '@/registry/default/clients/react-router/lib/supabase/server'\n\nexport async function loader({ request }: LoaderFunctionArgs) {\n  const requestUrl = new URL(request.url)\n  const token_hash = requestUrl.searchParams.get('token_hash')\n  const type = requestUrl.searchParams.get('type') as EmailOtpType | null\n  const _next = requestUrl.searchParams.get('next')\n  const next = _next?.startsWith('/') ? _next : '/'\n\n  if (token_hash && type) {\n    const { supabase, headers } = createClient(request)\n    const { error } = await supabase.auth.verifyOtp({\n      type,\n      token_hash,\n    })\n    if (!error) {\n      return redirect(next, { headers })\n    } else {\n      return redirect(`/auth/error?error=${error?.message}`)\n    }\n  }\n\n  // redirect the user to an error page with some instructions\n  return redirect(`/auth/error?error=No token hash or type`)\n}\n",
       "type": "registry:file",
       "target": "app/routes/auth.confirm.tsx"
     },
     {
       "path": "registry/default/blocks/password-based-auth-react-router/app/routes/auth.error.tsx",
-      "content": "import { Card, CardContent, CardHeader, CardTitle } from '@/registry/default/components/ui/card'\nimport { useSearchParams } from 'react-router'\n\nexport default function Page() {\n  let [searchParams] = useSearchParams()\n\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <div className=\"flex flex-col gap-6\">\n          <Card>\n            <CardHeader>\n              <CardTitle className=\"text-2xl\">Sorry, something went wrong.</CardTitle>\n            </CardHeader>\n            <CardContent>\n              {searchParams?.get('error') ? (\n                <p className=\"text-sm text-muted-foreground\">\n                  Code error: {searchParams?.get('error')}\n                </p>\n              ) : (\n                <p className=\"text-sm text-muted-foreground\">An unspecified error occurred.</p>\n              )}\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { useSearchParams } from 'react-router'\n\nimport { Card, CardContent, CardHeader, CardTitle } from '@/registry/default/components/ui/card'\n\nexport default function Page() {\n  let [searchParams] = useSearchParams()\n\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <div className=\"flex flex-col gap-6\">\n          <Card>\n            <CardHeader>\n              <CardTitle className=\"text-2xl\">Sorry, something went wrong.</CardTitle>\n            </CardHeader>\n            <CardContent>\n              {searchParams?.get('error') ? (\n                <p className=\"text-sm text-muted-foreground\">\n                  Code error: {searchParams?.get('error')}\n                </p>\n              ) : (\n                <p className=\"text-sm text-muted-foreground\">An unspecified error occurred.</p>\n              )}\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:file",
       "target": "app/routes/auth.error.tsx"
     },
     {
       "path": "registry/default/blocks/password-based-auth-react-router/app/routes/forgot-password.tsx",
-      "content": "import { createClient } from '@/registry/default/clients/react-router/lib/supabase/server'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Label } from '@/registry/default/components/ui/label'\nimport {\n  type ActionFunctionArgs,\n  Link,\n  data,\n  redirect,\n  useFetcher,\n  useSearchParams,\n} from 'react-router'\n\nexport const action = async ({ request }: ActionFunctionArgs) => {\n  const formData = await request.formData()\n  const email = formData.get('email') as string\n\n  const { supabase, headers } = createClient(request)\n  const origin = new URL(request.url).origin\n\n  // Send the actual reset password email\n  const { error } = await supabase.auth.resetPasswordForEmail(email, {\n    redirectTo: `${origin}/auth/confirm?next=/update-password`,\n  })\n\n  if (error) {\n    return data(\n      {\n        error: error instanceof Error ? error.message : 'An error occurred',\n        data: { email },\n      },\n      { headers }\n    )\n  }\n\n  return redirect('/forgot-password?success')\n}\n\nexport default function ForgotPassword() {\n  const fetcher = useFetcher<typeof action>()\n  let [searchParams] = useSearchParams()\n\n  const success = !!searchParams.has('success')\n  const error = fetcher.data?.error\n  const loading = fetcher.state === 'submitting'\n\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <div className=\"flex flex-col gap-6\">\n          {success ? (\n            <Card>\n              <CardHeader>\n                <CardTitle className=\"text-2xl\">Check Your Email</CardTitle>\n                <CardDescription>Password reset instructions sent</CardDescription>\n              </CardHeader>\n              <CardContent>\n                <p className=\"text-sm text-muted-foreground\">\n                  If you registered using your email and password, you will receive a password reset\n                  email.\n                </p>\n              </CardContent>\n            </Card>\n          ) : (\n            <Card>\n              <CardHeader>\n                <CardTitle className=\"text-2xl\">Reset Your Password</CardTitle>\n                <CardDescription>\n                  Type in your email and we&apos;ll send you a link to reset your password\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <fetcher.Form method=\"post\">\n                  <div className=\"flex flex-col gap-6\">\n                    <div className=\"grid gap-2\">\n                      <Label htmlFor=\"email\">Email</Label>\n                      <Input\n                        id=\"email\"\n                        name=\"email\"\n                        type=\"email\"\n                        placeholder=\"m@example.com\"\n                        required\n                      />\n                    </div>\n                    {error && <p className=\"text-sm text-red-500\">{error}</p>}\n                    <Button type=\"submit\" className=\"w-full\" disabled={loading}>\n                      {loading ? 'Sending...' : 'Send reset email'}\n                    </Button>\n                  </div>\n                  <div className=\"mt-4 text-center text-sm\">\n                    Already have an account?{' '}\n                    <Link to=\"/login\" className=\"underline underline-offset-4\">\n                      Login\n                    </Link>\n                  </div>\n                </fetcher.Form>\n              </CardContent>\n            </Card>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import {\n  data,\n  Link,\n  redirect,\n  useFetcher,\n  useSearchParams,\n  type ActionFunctionArgs,\n} from 'react-router'\n\nimport { createClient } from '@/registry/default/clients/react-router/lib/supabase/server'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Label } from '@/registry/default/components/ui/label'\n\nexport const action = async ({ request }: ActionFunctionArgs) => {\n  const formData = await request.formData()\n  const email = formData.get('email') as string\n\n  const { supabase, headers } = createClient(request)\n  const origin = new URL(request.url).origin\n\n  // Send the actual reset password email\n  const { error } = await supabase.auth.resetPasswordForEmail(email, {\n    redirectTo: `${origin}/auth/confirm?next=/update-password`,\n  })\n\n  if (error) {\n    return data(\n      {\n        error: error instanceof Error ? error.message : 'An error occurred',\n        data: { email },\n      },\n      { headers }\n    )\n  }\n\n  return redirect('/forgot-password?success')\n}\n\nexport default function ForgotPassword() {\n  const fetcher = useFetcher<typeof action>()\n  let [searchParams] = useSearchParams()\n\n  const success = !!searchParams.has('success')\n  const error = fetcher.data?.error\n  const loading = fetcher.state === 'submitting'\n\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <div className=\"flex flex-col gap-6\">\n          {success ? (\n            <Card>\n              <CardHeader>\n                <CardTitle className=\"text-2xl\">Check Your Email</CardTitle>\n                <CardDescription>Password reset instructions sent</CardDescription>\n              </CardHeader>\n              <CardContent>\n                <p className=\"text-sm text-muted-foreground\">\n                  If you registered using your email and password, you will receive a password reset\n                  email.\n                </p>\n              </CardContent>\n            </Card>\n          ) : (\n            <Card>\n              <CardHeader>\n                <CardTitle className=\"text-2xl\">Reset Your Password</CardTitle>\n                <CardDescription>\n                  Type in your email and we&apos;ll send you a link to reset your password\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <fetcher.Form method=\"post\">\n                  <div className=\"flex flex-col gap-6\">\n                    <div className=\"grid gap-2\">\n                      <Label htmlFor=\"email\">Email</Label>\n                      <Input\n                        id=\"email\"\n                        name=\"email\"\n                        type=\"email\"\n                        placeholder=\"m@example.com\"\n                        required\n                      />\n                    </div>\n                    {error && <p className=\"text-sm text-red-500\">{error}</p>}\n                    <Button type=\"submit\" className=\"w-full\" disabled={loading}>\n                      {loading ? 'Sending...' : 'Send reset email'}\n                    </Button>\n                  </div>\n                  <div className=\"mt-4 text-center text-sm\">\n                    Already have an account?{' '}\n                    <Link to=\"/login\" className=\"underline underline-offset-4\">\n                      Login\n                    </Link>\n                  </div>\n                </fetcher.Form>\n              </CardContent>\n            </Card>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:file",
       "target": "app/routes/forgot-password.tsx"
     },
     {
       "path": "registry/default/blocks/password-based-auth-react-router/app/routes/login.tsx",
-      "content": "import { createClient } from '@/registry/default/clients/react-router/lib/supabase/server'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Label } from '@/registry/default/components/ui/label'\nimport { type ActionFunctionArgs, Link, redirect, useFetcher } from 'react-router'\n\nexport const action = async ({ request }: ActionFunctionArgs) => {\n  const { supabase, headers } = createClient(request)\n\n  const formData = await request.formData()\n\n  const email = formData.get('email') as string\n  const password = formData.get('password') as string\n\n  const { error } = await supabase.auth.signInWithPassword({\n    email,\n    password,\n  })\n\n  if (error) {\n    return {\n      error: error instanceof Error ? error.message : 'An error occurred',\n    }\n  }\n\n  // Update this route to redirect to an authenticated route. The user already has an active session.\n  return redirect('/protected', { headers })\n}\n\nexport default function Login() {\n  const fetcher = useFetcher<typeof action>()\n\n  const error = fetcher.data?.error\n  const loading = fetcher.state === 'submitting'\n\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <div className=\"flex flex-col gap-6\">\n          <Card>\n            <CardHeader>\n              <CardTitle className=\"text-2xl\">Login</CardTitle>\n              <CardDescription>Enter your email below to login to your account</CardDescription>\n            </CardHeader>\n            <CardContent>\n              <fetcher.Form method=\"post\">\n                <div className=\"flex flex-col gap-6\">\n                  <div className=\"grid gap-2\">\n                    <Label htmlFor=\"email\">Email</Label>\n                    <Input\n                      id=\"email\"\n                      name=\"email\"\n                      type=\"email\"\n                      placeholder=\"m@example.com\"\n                      required\n                    />\n                  </div>\n                  <div className=\"grid gap-2\">\n                    <div className=\"flex items-center\">\n                      <Label htmlFor=\"password\">Password</Label>\n                      <Link\n                        to=\"/forgot-password\"\n                        className=\"ml-auto inline-block text-sm underline-offset-4 hover:underline\"\n                      >\n                        Forgot your password?\n                      </Link>\n                    </div>\n                    <Input id=\"password\" type=\"password\" name=\"password\" required />\n                  </div>\n                  {error && <p className=\"text-sm text-red-500\">{error}</p>}\n                  <Button type=\"submit\" className=\"w-full\" disabled={loading}>\n                    {loading ? 'Logging in...' : 'Login'}\n                  </Button>\n                </div>\n                <div className=\"mt-4 text-center text-sm\">\n                  Don&apos;t have an account?{' '}\n                  <Link to=\"/sign-up\" className=\"underline underline-offset-4\">\n                    Sign up\n                  </Link>\n                </div>\n              </fetcher.Form>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { Link, redirect, useFetcher, type ActionFunctionArgs } from 'react-router'\n\nimport { createClient } from '@/registry/default/clients/react-router/lib/supabase/server'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Label } from '@/registry/default/components/ui/label'\n\nexport const action = async ({ request }: ActionFunctionArgs) => {\n  const { supabase, headers } = createClient(request)\n\n  const formData = await request.formData()\n\n  const email = formData.get('email') as string\n  const password = formData.get('password') as string\n\n  const { error } = await supabase.auth.signInWithPassword({\n    email,\n    password,\n  })\n\n  if (error) {\n    return {\n      error: error instanceof Error ? error.message : 'An error occurred',\n    }\n  }\n\n  // Update this route to redirect to an authenticated route. The user already has an active session.\n  return redirect('/protected', { headers })\n}\n\nexport default function Login() {\n  const fetcher = useFetcher<typeof action>()\n\n  const error = fetcher.data?.error\n  const loading = fetcher.state === 'submitting'\n\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <div className=\"flex flex-col gap-6\">\n          <Card>\n            <CardHeader>\n              <CardTitle className=\"text-2xl\">Login</CardTitle>\n              <CardDescription>Enter your email below to login to your account</CardDescription>\n            </CardHeader>\n            <CardContent>\n              <fetcher.Form method=\"post\">\n                <div className=\"flex flex-col gap-6\">\n                  <div className=\"grid gap-2\">\n                    <Label htmlFor=\"email\">Email</Label>\n                    <Input\n                      id=\"email\"\n                      name=\"email\"\n                      type=\"email\"\n                      placeholder=\"m@example.com\"\n                      required\n                    />\n                  </div>\n                  <div className=\"grid gap-2\">\n                    <div className=\"flex items-center\">\n                      <Label htmlFor=\"password\">Password</Label>\n                      <Link\n                        to=\"/forgot-password\"\n                        className=\"ml-auto inline-block text-sm underline-offset-4 hover:underline\"\n                      >\n                        Forgot your password?\n                      </Link>\n                    </div>\n                    <Input id=\"password\" type=\"password\" name=\"password\" required />\n                  </div>\n                  {error && <p className=\"text-sm text-red-500\">{error}</p>}\n                  <Button type=\"submit\" className=\"w-full\" disabled={loading}>\n                    {loading ? 'Logging in...' : 'Login'}\n                  </Button>\n                </div>\n                <div className=\"mt-4 text-center text-sm\">\n                  Don&apos;t have an account?{' '}\n                  <Link to=\"/sign-up\" className=\"underline underline-offset-4\">\n                    Sign up\n                  </Link>\n                </div>\n              </fetcher.Form>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:file",
       "target": "app/routes/login.tsx"
     },
     {
       "path": "registry/default/blocks/password-based-auth-react-router/app/routes/logout.tsx",
-      "content": "import { createClient } from '@/registry/default/clients/react-router/lib/supabase/server'\nimport { type ActionFunctionArgs, redirect } from 'react-router'\n\nexport async function loader({ request }: ActionFunctionArgs) {\n  const { supabase, headers } = createClient(request)\n\n  const { error } = await supabase.auth.signOut()\n\n  if (error) {\n    console.error(error)\n    return { success: false, error: error.message }\n  }\n\n  // Redirect to dashboard or home page after successful sign-in\n  return redirect('/', { headers })\n}\n",
+      "content": "import { redirect, type ActionFunctionArgs } from 'react-router'\n\nimport { createClient } from '@/registry/default/clients/react-router/lib/supabase/server'\n\nexport async function loader({ request }: ActionFunctionArgs) {\n  const { supabase, headers } = createClient(request)\n\n  const { error } = await supabase.auth.signOut()\n\n  if (error) {\n    console.error(error)\n    return { success: false, error: error.message }\n  }\n\n  // Redirect to dashboard or home page after successful sign-in\n  return redirect('/', { headers })\n}\n",
       "type": "registry:file",
       "target": "app/routes/logout.tsx"
     },
     {
       "path": "registry/default/blocks/password-based-auth-react-router/app/routes/protected.tsx",
-      "content": "import { createClient } from '@/registry/default/clients/react-router/lib/supabase/server'\nimport { Button } from '@/registry/default/components/ui/button'\nimport { type LoaderFunctionArgs, redirect, useLoaderData } from 'react-router'\n\nexport const loader = async ({ request }: LoaderFunctionArgs) => {\n  const { supabase } = createClient(request)\n\n  const { data, error } = await supabase.auth.getUser()\n  if (error || !data?.user) {\n    return redirect('/login')\n  }\n\n  return data\n}\n\nexport default function ProtectedPage() {\n  let data = useLoaderData<typeof loader>()\n\n  return (\n    <div className=\"flex items-center justify-center h-screen gap-2\">\n      <p>\n        Hello <span className=\"text-primary font-semibold\">{data.user.email}</span>\n      </p>\n      <a href=\"/logout\">\n        <Button>Logout</Button>\n      </a>\n    </div>\n  )\n}\n",
+      "content": "import { redirect, useLoaderData, type LoaderFunctionArgs } from 'react-router'\n\nimport { createClient } from '@/registry/default/clients/react-router/lib/supabase/server'\nimport { Button } from '@/registry/default/components/ui/button'\n\nexport const loader = async ({ request }: LoaderFunctionArgs) => {\n  const { supabase } = createClient(request)\n\n  const { data, error } = await supabase.auth.getUser()\n  if (error || !data?.user) {\n    return redirect('/login')\n  }\n\n  return data\n}\n\nexport default function ProtectedPage() {\n  let data = useLoaderData<typeof loader>()\n\n  return (\n    <div className=\"flex items-center justify-center h-screen gap-2\">\n      <p>\n        Hello <span className=\"text-primary font-semibold\">{data.user.email}</span>\n      </p>\n      <a href=\"/logout\">\n        <Button>Logout</Button>\n      </a>\n    </div>\n  )\n}\n",
       "type": "registry:file",
       "target": "app/routes/protected.tsx"
     },
     {
       "path": "registry/default/blocks/password-based-auth-react-router/app/routes/sign-up.tsx",
-      "content": "import { createClient } from '@/registry/default/clients/react-router/lib/supabase/server'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Label } from '@/registry/default/components/ui/label'\nimport { type ActionFunctionArgs, Link, redirect, useFetcher, useSearchParams } from 'react-router'\n\nexport const action = async ({ request }: ActionFunctionArgs) => {\n  const { supabase } = createClient(request)\n\n  const url = new URL(request.url)\n  const origin = url.origin\n\n  const formData = await request.formData()\n\n  const email = formData.get('email') as string\n  const password = formData.get('password') as string\n  const repeatPassword = formData.get('repeat-password') as string\n\n  if (!password) {\n    return {\n      error: 'Password is required',\n    }\n  }\n\n  if (password !== repeatPassword) {\n    return { error: 'Passwords do not match' }\n  }\n\n  const { error } = await supabase.auth.signUp({\n    email,\n    password,\n    options: {\n      emailRedirectTo: `${origin}/protected`,\n    },\n  })\n\n  if (error) {\n    return { error: error.message }\n  }\n\n  return redirect('/sign-up?success')\n}\n\nexport default function SignUp() {\n  const fetcher = useFetcher<typeof action>()\n  let [searchParams] = useSearchParams()\n\n  const success = !!searchParams.has('success')\n  const error = fetcher.data?.error\n  const loading = fetcher.state === 'submitting'\n\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <div className=\"flex flex-col gap-6\">\n          {success ? (\n            <Card>\n              <CardHeader>\n                <CardTitle className=\"text-2xl\">Thank you for signing up!</CardTitle>\n                <CardDescription>Check your email to confirm</CardDescription>\n              </CardHeader>\n              <CardContent>\n                <p className=\"text-sm text-muted-foreground\">\n                  You&apos;ve successfully signed up. Please check your email to confirm your\n                  account before signing in.\n                </p>\n              </CardContent>\n            </Card>\n          ) : (\n            <Card>\n              <CardHeader>\n                <CardTitle className=\"text-2xl\">Sign up</CardTitle>\n                <CardDescription>Create a new account</CardDescription>\n              </CardHeader>\n              <CardContent>\n                <fetcher.Form method=\"post\">\n                  <div className=\"flex flex-col gap-6\">\n                    <div className=\"grid gap-2\">\n                      <Label htmlFor=\"email\">Email</Label>\n                      <Input\n                        id=\"email\"\n                        name=\"email\"\n                        type=\"email\"\n                        placeholder=\"m@example.com\"\n                        required\n                      />\n                    </div>\n                    <div className=\"grid gap-2\">\n                      <div className=\"flex items-center\">\n                        <Label htmlFor=\"password\">Password</Label>\n                      </div>\n                      <Input id=\"password\" name=\"password\" type=\"password\" required />\n                    </div>\n                    <div className=\"grid gap-2\">\n                      <div className=\"flex items-center\">\n                        <Label htmlFor=\"repeat-password\">Repeat Password</Label>\n                      </div>\n                      <Input id=\"repeat-password\" name=\"repeat-password\" type=\"password\" required />\n                    </div>\n                    {error && <p className=\"text-sm text-red-500\">{error}</p>}\n                    <Button type=\"submit\" className=\"w-full\" disabled={loading}>\n                      {loading ? 'Creating an account...' : 'Sign up'}\n                    </Button>\n                  </div>\n                  <div className=\"mt-4 text-center text-sm\">\n                    Already have an account?{' '}\n                    <Link to=\"/login\" className=\"underline underline-offset-4\">\n                      Login\n                    </Link>\n                  </div>\n                </fetcher.Form>\n              </CardContent>\n            </Card>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { Link, redirect, useFetcher, useSearchParams, type ActionFunctionArgs } from 'react-router'\n\nimport { createClient } from '@/registry/default/clients/react-router/lib/supabase/server'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Label } from '@/registry/default/components/ui/label'\n\nexport const action = async ({ request }: ActionFunctionArgs) => {\n  const { supabase } = createClient(request)\n\n  const url = new URL(request.url)\n  const origin = url.origin\n\n  const formData = await request.formData()\n\n  const email = formData.get('email') as string\n  const password = formData.get('password') as string\n  const repeatPassword = formData.get('repeat-password') as string\n\n  if (!password) {\n    return {\n      error: 'Password is required',\n    }\n  }\n\n  if (password !== repeatPassword) {\n    return { error: 'Passwords do not match' }\n  }\n\n  const { error } = await supabase.auth.signUp({\n    email,\n    password,\n    options: {\n      emailRedirectTo: `${origin}/protected`,\n    },\n  })\n\n  if (error) {\n    return { error: error.message }\n  }\n\n  return redirect('/sign-up?success')\n}\n\nexport default function SignUp() {\n  const fetcher = useFetcher<typeof action>()\n  let [searchParams] = useSearchParams()\n\n  const success = !!searchParams.has('success')\n  const error = fetcher.data?.error\n  const loading = fetcher.state === 'submitting'\n\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <div className=\"flex flex-col gap-6\">\n          {success ? (\n            <Card>\n              <CardHeader>\n                <CardTitle className=\"text-2xl\">Thank you for signing up!</CardTitle>\n                <CardDescription>Check your email to confirm</CardDescription>\n              </CardHeader>\n              <CardContent>\n                <p className=\"text-sm text-muted-foreground\">\n                  You&apos;ve successfully signed up. Please check your email to confirm your\n                  account before signing in.\n                </p>\n              </CardContent>\n            </Card>\n          ) : (\n            <Card>\n              <CardHeader>\n                <CardTitle className=\"text-2xl\">Sign up</CardTitle>\n                <CardDescription>Create a new account</CardDescription>\n              </CardHeader>\n              <CardContent>\n                <fetcher.Form method=\"post\">\n                  <div className=\"flex flex-col gap-6\">\n                    <div className=\"grid gap-2\">\n                      <Label htmlFor=\"email\">Email</Label>\n                      <Input\n                        id=\"email\"\n                        name=\"email\"\n                        type=\"email\"\n                        placeholder=\"m@example.com\"\n                        required\n                      />\n                    </div>\n                    <div className=\"grid gap-2\">\n                      <div className=\"flex items-center\">\n                        <Label htmlFor=\"password\">Password</Label>\n                      </div>\n                      <Input id=\"password\" name=\"password\" type=\"password\" required />\n                    </div>\n                    <div className=\"grid gap-2\">\n                      <div className=\"flex items-center\">\n                        <Label htmlFor=\"repeat-password\">Repeat Password</Label>\n                      </div>\n                      <Input id=\"repeat-password\" name=\"repeat-password\" type=\"password\" required />\n                    </div>\n                    {error && <p className=\"text-sm text-red-500\">{error}</p>}\n                    <Button type=\"submit\" className=\"w-full\" disabled={loading}>\n                      {loading ? 'Creating an account...' : 'Sign up'}\n                    </Button>\n                  </div>\n                  <div className=\"mt-4 text-center text-sm\">\n                    Already have an account?{' '}\n                    <Link to=\"/login\" className=\"underline underline-offset-4\">\n                      Login\n                    </Link>\n                  </div>\n                </fetcher.Form>\n              </CardContent>\n            </Card>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:file",
       "target": "app/routes/sign-up.tsx"
     },
     {
       "path": "registry/default/blocks/password-based-auth-react-router/app/routes/update-password.tsx",
-      "content": "import { createClient } from '@/registry/default/clients/react-router/lib/supabase/server'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Label } from '@/registry/default/components/ui/label'\nimport { type ActionFunctionArgs, redirect, useFetcher } from 'react-router'\n\nexport const action = async ({ request }: ActionFunctionArgs) => {\n  const { supabase, headers } = createClient(request)\n  const formData = await request.formData()\n  const password = formData.get('password') as string\n\n  if (!password) {\n    return { error: 'Password is required' }\n  }\n\n  const { error } = await supabase.auth.updateUser({ password: password })\n\n  if (error) {\n    return {\n      error: error instanceof Error ? error.message : 'An error occurred',\n    }\n  }\n\n  // Redirect to sign-in page after successful password update\n  return redirect('/protected', { headers })\n}\n\nexport default function Page() {\n  const fetcher = useFetcher<typeof action>()\n\n  const error = fetcher.data?.error\n  const loading = fetcher.state === 'submitting'\n\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <div className=\"flex flex-col gap-6\">\n          <Card>\n            <CardHeader>\n              <CardTitle className=\"text-2xl\">Reset Your Password</CardTitle>\n              <CardDescription>Please enter your new password below.</CardDescription>\n            </CardHeader>\n            <CardContent>\n              <fetcher.Form method=\"post\">\n                <div className=\"flex flex-col gap-6\">\n                  <div className=\"grid gap-2\">\n                    <Label htmlFor=\"password\">New password</Label>\n                    <Input\n                      id=\"password\"\n                      name=\"password\"\n                      type=\"password\"\n                      placeholder=\"New password\"\n                      required\n                    />\n                  </div>\n                  {error && <p className=\"text-sm text-red-500\">{error}</p>}\n                  <Button type=\"submit\" className=\"w-full\" disabled={loading}>\n                    {loading ? 'Saving...' : 'Save new password'}\n                  </Button>\n                </div>\n              </fetcher.Form>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { redirect, useFetcher, type ActionFunctionArgs } from 'react-router'\n\nimport { createClient } from '@/registry/default/clients/react-router/lib/supabase/server'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Label } from '@/registry/default/components/ui/label'\n\nexport const action = async ({ request }: ActionFunctionArgs) => {\n  const { supabase, headers } = createClient(request)\n  const formData = await request.formData()\n  const password = formData.get('password') as string\n\n  if (!password) {\n    return { error: 'Password is required' }\n  }\n\n  const { error } = await supabase.auth.updateUser({ password: password })\n\n  if (error) {\n    return {\n      error: error instanceof Error ? error.message : 'An error occurred',\n    }\n  }\n\n  // Redirect to sign-in page after successful password update\n  return redirect('/protected', { headers })\n}\n\nexport default function Page() {\n  const fetcher = useFetcher<typeof action>()\n\n  const error = fetcher.data?.error\n  const loading = fetcher.state === 'submitting'\n\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <div className=\"flex flex-col gap-6\">\n          <Card>\n            <CardHeader>\n              <CardTitle className=\"text-2xl\">Reset Your Password</CardTitle>\n              <CardDescription>Please enter your new password below.</CardDescription>\n            </CardHeader>\n            <CardContent>\n              <fetcher.Form method=\"post\">\n                <div className=\"flex flex-col gap-6\">\n                  <div className=\"grid gap-2\">\n                    <Label htmlFor=\"password\">New password</Label>\n                    <Input\n                      id=\"password\"\n                      name=\"password\"\n                      type=\"password\"\n                      placeholder=\"New password\"\n                      required\n                    />\n                  </div>\n                  {error && <p className=\"text-sm text-red-500\">{error}</p>}\n                  <Button type=\"submit\" className=\"w-full\" disabled={loading}>\n                    {loading ? 'Saving...' : 'Save new password'}\n                  </Button>\n                </div>\n              </fetcher.Form>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:file",
       "target": "app/routes/update-password.tsx"
     },
diff --git a/apps/ui-library/public/r/password-based-auth-react.json b/apps/ui-library/public/r/password-based-auth-react.json
index 75fdd187e97..423ec5b625d 100644
--- a/apps/ui-library/public/r/password-based-auth-react.json
+++ b/apps/ui-library/public/r/password-based-auth-react.json
@@ -16,22 +16,22 @@
   "files": [
     {
       "path": "registry/default/blocks/password-based-auth-react/components/login-form.tsx",
-      "content": "import { cn } from '@/lib/utils'\nimport { createClient } from '@/registry/default/clients/react/lib/supabase/client'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Label } from '@/registry/default/components/ui/label'\nimport { useState } from 'react'\n\nexport function LoginForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {\n  const [email, setEmail] = useState('')\n  const [password, setPassword] = useState('')\n  const [error, setError] = useState<string | null>(null)\n  const [isLoading, setIsLoading] = useState(false)\n  const supabase = createClient()\n\n  const handleLogin = async (e: React.FormEvent) => {\n    e.preventDefault()\n    setIsLoading(true)\n    setError(null)\n\n    try {\n      const { error } = await supabase.auth.signInWithPassword({\n        email,\n        password,\n      })\n      if (error) throw error\n      // Update this route to redirect to an authenticated route. The user already has an active session.\n      location.href = '/protected'\n    } catch (error: unknown) {\n      setError(error instanceof Error ? error.message : 'An error occurred')\n    } finally {\n      setIsLoading(false)\n    }\n  }\n\n  return (\n    <div className={cn('flex flex-col gap-6', className)} {...props}>\n      <Card>\n        <CardHeader>\n          <CardTitle className=\"text-2xl\">Login</CardTitle>\n          <CardDescription>Enter your email below to login to your account</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form onSubmit={handleLogin}>\n            <div className=\"flex flex-col gap-6\">\n              <div className=\"grid gap-2\">\n                <Label htmlFor=\"email\">Email</Label>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                  value={email}\n                  onChange={(e) => setEmail(e.target.value)}\n                />\n              </div>\n              <div className=\"grid gap-2\">\n                <div className=\"flex items-center\">\n                  <Label htmlFor=\"password\">Password</Label>\n                  <a\n                    href=\"/forgot-password\"\n                    className=\"ml-auto inline-block text-sm underline-offset-4 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input\n                  id=\"password\"\n                  type=\"password\"\n                  required\n                  value={password}\n                  onChange={(e) => setPassword(e.target.value)}\n                />\n              </div>\n              {error && <p className=\"text-sm text-red-500\">{error}</p>}\n              <Button type=\"submit\" className=\"w-full\" disabled={isLoading}>\n                {isLoading ? 'Logging in...' : 'Login'}\n              </Button>\n            </div>\n            <div className=\"mt-4 text-center text-sm\">\n              Don&apos;t have an account?{' '}\n              <a href=\"/sign-up\" className=\"underline underline-offset-4\">\n                Sign up\n              </a>\n            </div>\n          </form>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n",
+      "content": "import { useState } from 'react'\n\nimport { cn } from '@/lib/utils'\nimport { createClient } from '@/registry/default/clients/react/lib/supabase/client'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Label } from '@/registry/default/components/ui/label'\n\nexport function LoginForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {\n  const [email, setEmail] = useState('')\n  const [password, setPassword] = useState('')\n  const [error, setError] = useState<string | null>(null)\n  const [isLoading, setIsLoading] = useState(false)\n  const supabase = createClient()\n\n  const handleLogin = async (e: React.FormEvent) => {\n    e.preventDefault()\n    setIsLoading(true)\n    setError(null)\n\n    try {\n      const { error } = await supabase.auth.signInWithPassword({\n        email,\n        password,\n      })\n      if (error) throw error\n      // Update this route to redirect to an authenticated route. The user already has an active session.\n      location.href = '/protected'\n    } catch (error: unknown) {\n      setError(error instanceof Error ? error.message : 'An error occurred')\n    } finally {\n      setIsLoading(false)\n    }\n  }\n\n  return (\n    <div className={cn('flex flex-col gap-6', className)} {...props}>\n      <Card>\n        <CardHeader>\n          <CardTitle className=\"text-2xl\">Login</CardTitle>\n          <CardDescription>Enter your email below to login to your account</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form onSubmit={handleLogin}>\n            <div className=\"flex flex-col gap-6\">\n              <div className=\"grid gap-2\">\n                <Label htmlFor=\"email\">Email</Label>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                  value={email}\n                  onChange={(e) => setEmail(e.target.value)}\n                />\n              </div>\n              <div className=\"grid gap-2\">\n                <div className=\"flex items-center\">\n                  <Label htmlFor=\"password\">Password</Label>\n                  <a\n                    href=\"/forgot-password\"\n                    className=\"ml-auto inline-block text-sm underline-offset-4 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input\n                  id=\"password\"\n                  type=\"password\"\n                  required\n                  value={password}\n                  onChange={(e) => setPassword(e.target.value)}\n                />\n              </div>\n              {error && <p className=\"text-sm text-red-500\">{error}</p>}\n              <Button type=\"submit\" className=\"w-full\" disabled={isLoading}>\n                {isLoading ? 'Logging in...' : 'Login'}\n              </Button>\n            </div>\n            <div className=\"mt-4 text-center text-sm\">\n              Don&apos;t have an account?{' '}\n              <a href=\"/sign-up\" className=\"underline underline-offset-4\">\n                Sign up\n              </a>\n            </div>\n          </form>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/default/blocks/password-based-auth-react/components/sign-up-form.tsx",
-      "content": "import { cn } from '@/lib/utils'\nimport { createClient } from '@/registry/default/clients/react/lib/supabase/client'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Label } from '@/registry/default/components/ui/label'\nimport { useState } from 'react'\n\nexport function SignUpForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {\n  const [email, setEmail] = useState('')\n  const [password, setPassword] = useState('')\n  const [repeatPassword, setRepeatPassword] = useState('')\n  const [error, setError] = useState<string | null>(null)\n  const [isLoading, setIsLoading] = useState(false)\n  const [success, setSuccess] = useState(false)\n\n  const handleSignUp = async (e: React.FormEvent) => {\n    const supabase = createClient()\n    e.preventDefault()\n    setError(null)\n\n    if (password !== repeatPassword) {\n      setError('Passwords do not match')\n      return\n    }\n    setIsLoading(true)\n\n    try {\n      const { error } = await supabase.auth.signUp({\n        email,\n        password,\n      })\n      if (error) throw error\n      setSuccess(true)\n    } catch (error: unknown) {\n      setError(error instanceof Error ? error.message : 'An error occurred')\n    } finally {\n      setIsLoading(false)\n    }\n  }\n\n  return (\n    <div className={cn('flex flex-col gap-6', className)} {...props}>\n      {success ? (\n        <Card>\n          <CardHeader>\n            <CardTitle className=\"text-2xl\">Thank you for signing up!</CardTitle>\n            <CardDescription>Check your email to confirm</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <p className=\"text-sm text-muted-foreground\">\n              You&apos;ve successfully signed up. Please check your email to confirm your account\n              before signing in.\n            </p>\n          </CardContent>\n        </Card>\n      ) : (\n        <Card>\n          <CardHeader>\n            <CardTitle className=\"text-2xl\">Sign up</CardTitle>\n            <CardDescription>Create a new account</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <form onSubmit={handleSignUp}>\n              <div className=\"flex flex-col gap-6\">\n                <div className=\"grid gap-2\">\n                  <Label htmlFor=\"email\">Email</Label>\n                  <Input\n                    id=\"email\"\n                    type=\"email\"\n                    placeholder=\"m@example.com\"\n                    required\n                    value={email}\n                    onChange={(e) => setEmail(e.target.value)}\n                  />\n                </div>\n                <div className=\"grid gap-2\">\n                  <div className=\"flex items-center\">\n                    <Label htmlFor=\"password\">Password</Label>\n                  </div>\n                  <Input\n                    id=\"password\"\n                    type=\"password\"\n                    required\n                    value={password}\n                    onChange={(e) => setPassword(e.target.value)}\n                  />\n                </div>\n                <div className=\"grid gap-2\">\n                  <div className=\"flex items-center\">\n                    <Label htmlFor=\"repeat-password\">Repeat Password</Label>\n                  </div>\n                  <Input\n                    id=\"repeat-password\"\n                    type=\"password\"\n                    required\n                    value={repeatPassword}\n                    onChange={(e) => setRepeatPassword(e.target.value)}\n                  />\n                </div>\n                {error && <p className=\"text-sm text-red-500\">{error}</p>}\n                <Button type=\"submit\" className=\"w-full\" disabled={isLoading}>\n                  {isLoading ? 'Creating an account...' : 'Sign up'}\n                </Button>\n              </div>\n              <div className=\"mt-4 text-center text-sm\">\n                Already have an account?{' '}\n                <a href=\"/login\" className=\"underline underline-offset-4\">\n                  Login\n                </a>\n              </div>\n            </form>\n          </CardContent>\n        </Card>\n      )}\n    </div>\n  )\n}\n",
+      "content": "import { useState } from 'react'\n\nimport { cn } from '@/lib/utils'\nimport { createClient } from '@/registry/default/clients/react/lib/supabase/client'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Label } from '@/registry/default/components/ui/label'\n\nexport function SignUpForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {\n  const [email, setEmail] = useState('')\n  const [password, setPassword] = useState('')\n  const [repeatPassword, setRepeatPassword] = useState('')\n  const [error, setError] = useState<string | null>(null)\n  const [isLoading, setIsLoading] = useState(false)\n  const [success, setSuccess] = useState(false)\n\n  const handleSignUp = async (e: React.FormEvent) => {\n    const supabase = createClient()\n    e.preventDefault()\n    setError(null)\n\n    if (password !== repeatPassword) {\n      setError('Passwords do not match')\n      return\n    }\n    setIsLoading(true)\n\n    try {\n      const { error } = await supabase.auth.signUp({\n        email,\n        password,\n      })\n      if (error) throw error\n      setSuccess(true)\n    } catch (error: unknown) {\n      setError(error instanceof Error ? error.message : 'An error occurred')\n    } finally {\n      setIsLoading(false)\n    }\n  }\n\n  return (\n    <div className={cn('flex flex-col gap-6', className)} {...props}>\n      {success ? (\n        <Card>\n          <CardHeader>\n            <CardTitle className=\"text-2xl\">Thank you for signing up!</CardTitle>\n            <CardDescription>Check your email to confirm</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <p className=\"text-sm text-muted-foreground\">\n              You&apos;ve successfully signed up. Please check your email to confirm your account\n              before signing in.\n            </p>\n          </CardContent>\n        </Card>\n      ) : (\n        <Card>\n          <CardHeader>\n            <CardTitle className=\"text-2xl\">Sign up</CardTitle>\n            <CardDescription>Create a new account</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <form onSubmit={handleSignUp}>\n              <div className=\"flex flex-col gap-6\">\n                <div className=\"grid gap-2\">\n                  <Label htmlFor=\"email\">Email</Label>\n                  <Input\n                    id=\"email\"\n                    type=\"email\"\n                    placeholder=\"m@example.com\"\n                    required\n                    value={email}\n                    onChange={(e) => setEmail(e.target.value)}\n                  />\n                </div>\n                <div className=\"grid gap-2\">\n                  <div className=\"flex items-center\">\n                    <Label htmlFor=\"password\">Password</Label>\n                  </div>\n                  <Input\n                    id=\"password\"\n                    type=\"password\"\n                    required\n                    value={password}\n                    onChange={(e) => setPassword(e.target.value)}\n                  />\n                </div>\n                <div className=\"grid gap-2\">\n                  <div className=\"flex items-center\">\n                    <Label htmlFor=\"repeat-password\">Repeat Password</Label>\n                  </div>\n                  <Input\n                    id=\"repeat-password\"\n                    type=\"password\"\n                    required\n                    value={repeatPassword}\n                    onChange={(e) => setRepeatPassword(e.target.value)}\n                  />\n                </div>\n                {error && <p className=\"text-sm text-red-500\">{error}</p>}\n                <Button type=\"submit\" className=\"w-full\" disabled={isLoading}>\n                  {isLoading ? 'Creating an account...' : 'Sign up'}\n                </Button>\n              </div>\n              <div className=\"mt-4 text-center text-sm\">\n                Already have an account?{' '}\n                <a href=\"/login\" className=\"underline underline-offset-4\">\n                  Login\n                </a>\n              </div>\n            </form>\n          </CardContent>\n        </Card>\n      )}\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/default/blocks/password-based-auth-react/components/forgot-password-form.tsx",
-      "content": "import { cn } from '@/lib/utils'\nimport { createClient } from '@/registry/default/clients/react/lib/supabase/client'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Label } from '@/registry/default/components/ui/label'\nimport { useState } from 'react'\n\nexport function ForgotPasswordForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {\n  const [email, setEmail] = useState('')\n  const [error, setError] = useState<string | null>(null)\n  const [success, setSuccess] = useState(false)\n  const [isLoading, setIsLoading] = useState(false)\n\n  const handleForgotPassword = async (e: React.FormEvent) => {\n    const supabase = createClient()\n    e.preventDefault()\n    setIsLoading(true)\n    setError(null)\n\n    try {\n      // The url which will be included in the email. This URL needs to be configured in your redirect URLs in the Supabase dashboard at https://supabase.com/dashboard/project/_/auth/url-configuration\n      const { error } = await supabase.auth.resetPasswordForEmail(email, {\n        redirectTo: 'http://localhost:3000/update-password',\n      })\n      if (error) throw error\n      setSuccess(true)\n    } catch (error: unknown) {\n      setError(error instanceof Error ? error.message : 'An error occurred')\n    } finally {\n      setIsLoading(false)\n    }\n  }\n\n  return (\n    <div className={cn('flex flex-col gap-6', className)} {...props}>\n      {success ? (\n        <Card>\n          <CardHeader>\n            <CardTitle className=\"text-2xl\">Check Your Email</CardTitle>\n            <CardDescription>Password reset instructions sent</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <p className=\"text-sm text-muted-foreground\">\n              If you registered using your email and password, you will receive a password reset\n              email.\n            </p>\n          </CardContent>\n        </Card>\n      ) : (\n        <Card>\n          <CardHeader>\n            <CardTitle className=\"text-2xl\">Reset Your Password</CardTitle>\n            <CardDescription>\n              Type in your email and we&apos;ll send you a link to reset your password\n            </CardDescription>\n          </CardHeader>\n          <CardContent>\n            <form onSubmit={handleForgotPassword}>\n              <div className=\"flex flex-col gap-6\">\n                <div className=\"grid gap-2\">\n                  <Label htmlFor=\"email\">Email</Label>\n                  <Input\n                    id=\"email\"\n                    type=\"email\"\n                    placeholder=\"m@example.com\"\n                    required\n                    value={email}\n                    onChange={(e) => setEmail(e.target.value)}\n                  />\n                </div>\n                {error && <p className=\"text-sm text-red-500\">{error}</p>}\n                <Button type=\"submit\" className=\"w-full\" disabled={isLoading}>\n                  {isLoading ? 'Sending...' : 'Send reset email'}\n                </Button>\n              </div>\n              <div className=\"mt-4 text-center text-sm\">\n                Already have an account?{' '}\n                <a href=\"/login\" className=\"underline underline-offset-4\">\n                  Login\n                </a>\n              </div>\n            </form>\n          </CardContent>\n        </Card>\n      )}\n    </div>\n  )\n}\n",
+      "content": "import { useState } from 'react'\n\nimport { cn } from '@/lib/utils'\nimport { createClient } from '@/registry/default/clients/react/lib/supabase/client'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Label } from '@/registry/default/components/ui/label'\n\nexport function ForgotPasswordForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {\n  const [email, setEmail] = useState('')\n  const [error, setError] = useState<string | null>(null)\n  const [success, setSuccess] = useState(false)\n  const [isLoading, setIsLoading] = useState(false)\n\n  const handleForgotPassword = async (e: React.FormEvent) => {\n    const supabase = createClient()\n    e.preventDefault()\n    setIsLoading(true)\n    setError(null)\n\n    try {\n      // The url which will be included in the email. This URL needs to be configured in your redirect URLs in the Supabase dashboard at https://supabase.com/dashboard/project/_/auth/url-configuration\n      const { error } = await supabase.auth.resetPasswordForEmail(email, {\n        redirectTo: 'http://localhost:3000/update-password',\n      })\n      if (error) throw error\n      setSuccess(true)\n    } catch (error: unknown) {\n      setError(error instanceof Error ? error.message : 'An error occurred')\n    } finally {\n      setIsLoading(false)\n    }\n  }\n\n  return (\n    <div className={cn('flex flex-col gap-6', className)} {...props}>\n      {success ? (\n        <Card>\n          <CardHeader>\n            <CardTitle className=\"text-2xl\">Check Your Email</CardTitle>\n            <CardDescription>Password reset instructions sent</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <p className=\"text-sm text-muted-foreground\">\n              If you registered using your email and password, you will receive a password reset\n              email.\n            </p>\n          </CardContent>\n        </Card>\n      ) : (\n        <Card>\n          <CardHeader>\n            <CardTitle className=\"text-2xl\">Reset Your Password</CardTitle>\n            <CardDescription>\n              Type in your email and we&apos;ll send you a link to reset your password\n            </CardDescription>\n          </CardHeader>\n          <CardContent>\n            <form onSubmit={handleForgotPassword}>\n              <div className=\"flex flex-col gap-6\">\n                <div className=\"grid gap-2\">\n                  <Label htmlFor=\"email\">Email</Label>\n                  <Input\n                    id=\"email\"\n                    type=\"email\"\n                    placeholder=\"m@example.com\"\n                    required\n                    value={email}\n                    onChange={(e) => setEmail(e.target.value)}\n                  />\n                </div>\n                {error && <p className=\"text-sm text-red-500\">{error}</p>}\n                <Button type=\"submit\" className=\"w-full\" disabled={isLoading}>\n                  {isLoading ? 'Sending...' : 'Send reset email'}\n                </Button>\n              </div>\n              <div className=\"mt-4 text-center text-sm\">\n                Already have an account?{' '}\n                <a href=\"/login\" className=\"underline underline-offset-4\">\n                  Login\n                </a>\n              </div>\n            </form>\n          </CardContent>\n        </Card>\n      )}\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/default/blocks/password-based-auth-react/components/update-password-form.tsx",
-      "content": "import { cn } from '@/lib/utils'\nimport { createClient } from '@/registry/default/clients/react/lib/supabase/client'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Label } from '@/registry/default/components/ui/label'\nimport { useState } from 'react'\n\nexport function UpdatePasswordForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {\n  const [password, setPassword] = useState('')\n  const [error, setError] = useState<string | null>(null)\n  const [isLoading, setIsLoading] = useState(false)\n\n  const handleForgotPassword = async (e: React.FormEvent) => {\n    const supabase = createClient()\n    e.preventDefault()\n    setIsLoading(true)\n    setError(null)\n\n    try {\n      const { error } = await supabase.auth.updateUser({ password })\n      if (error) throw error\n      // Update this route to redirect to an authenticated route. The user already has an active session.\n      location.href = '/protected'\n    } catch (error: unknown) {\n      setError(error instanceof Error ? error.message : 'An error occurred')\n    } finally {\n      setIsLoading(false)\n    }\n  }\n\n  return (\n    <div className={cn('flex flex-col gap-6', className)} {...props}>\n      <Card>\n        <CardHeader>\n          <CardTitle className=\"text-2xl\">Reset Your Password</CardTitle>\n          <CardDescription>Please enter your new password below.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form onSubmit={handleForgotPassword}>\n            <div className=\"flex flex-col gap-6\">\n              <div className=\"grid gap-2\">\n                <Label htmlFor=\"password\">New password</Label>\n                <Input\n                  id=\"password\"\n                  type=\"password\"\n                  placeholder=\"New password\"\n                  required\n                  value={password}\n                  onChange={(e) => setPassword(e.target.value)}\n                />\n              </div>\n              {error && <p className=\"text-sm text-red-500\">{error}</p>}\n              <Button type=\"submit\" className=\"w-full\" disabled={isLoading}>\n                {isLoading ? 'Saving...' : 'Save new password'}\n              </Button>\n            </div>\n          </form>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n",
+      "content": "import { useState } from 'react'\n\nimport { cn } from '@/lib/utils'\nimport { createClient } from '@/registry/default/clients/react/lib/supabase/client'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Label } from '@/registry/default/components/ui/label'\n\nexport function UpdatePasswordForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {\n  const [password, setPassword] = useState('')\n  const [error, setError] = useState<string | null>(null)\n  const [isLoading, setIsLoading] = useState(false)\n\n  const handleForgotPassword = async (e: React.FormEvent) => {\n    const supabase = createClient()\n    e.preventDefault()\n    setIsLoading(true)\n    setError(null)\n\n    try {\n      const { error } = await supabase.auth.updateUser({ password })\n      if (error) throw error\n      // Update this route to redirect to an authenticated route. The user already has an active session.\n      location.href = '/protected'\n    } catch (error: unknown) {\n      setError(error instanceof Error ? error.message : 'An error occurred')\n    } finally {\n      setIsLoading(false)\n    }\n  }\n\n  return (\n    <div className={cn('flex flex-col gap-6', className)} {...props}>\n      <Card>\n        <CardHeader>\n          <CardTitle className=\"text-2xl\">Reset Your Password</CardTitle>\n          <CardDescription>Please enter your new password below.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form onSubmit={handleForgotPassword}>\n            <div className=\"flex flex-col gap-6\">\n              <div className=\"grid gap-2\">\n                <Label htmlFor=\"password\">New password</Label>\n                <Input\n                  id=\"password\"\n                  type=\"password\"\n                  placeholder=\"New password\"\n                  required\n                  value={password}\n                  onChange={(e) => setPassword(e.target.value)}\n                />\n              </div>\n              {error && <p className=\"text-sm text-red-500\">{error}</p>}\n              <Button type=\"submit\" className=\"w-full\" disabled={isLoading}>\n                {isLoading ? 'Saving...' : 'Save new password'}\n              </Button>\n            </div>\n          </form>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/ui-library/public/r/password-based-auth-tanstack.json b/apps/ui-library/public/r/password-based-auth-tanstack.json
index 9c5efdba4de..aa5049c04d5 100644
--- a/apps/ui-library/public/r/password-based-auth-tanstack.json
+++ b/apps/ui-library/public/r/password-based-auth-tanstack.json
@@ -17,19 +17,19 @@
   "files": [
     {
       "path": "registry/default/blocks/password-based-auth-tanstack/routes/login.tsx",
-      "content": "import { LoginForm } from '@/registry/default/blocks/password-based-auth-tanstack/components/login-form'\nimport { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/login')({\n  component: Login,\n})\n\nfunction Login() {\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { createFileRoute } from '@tanstack/react-router'\n\nimport { LoginForm } from '@/registry/default/blocks/password-based-auth-tanstack/components/login-form'\n\nexport const Route = createFileRoute('/login')({\n  component: Login,\n})\n\nfunction Login() {\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:file",
       "target": "routes/login.tsx"
     },
     {
       "path": "registry/default/blocks/password-based-auth-tanstack/routes/auth/error.tsx",
-      "content": "import { Card, CardContent, CardHeader, CardTitle } from '@/registry/default/components/ui/card'\nimport { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/auth/error')({\n  component: AuthError,\n  validateSearch: (params) => {\n    if (params.error && typeof params.error === 'string') {\n      return { error: params.error }\n    }\n    return null\n  },\n})\n\nfunction AuthError() {\n  const params = Route.useSearch()\n\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <div className=\"flex flex-col gap-6\">\n          <Card>\n            <CardHeader>\n              <CardTitle className=\"text-2xl\">Sorry, something went wrong.</CardTitle>\n            </CardHeader>\n            <CardContent>\n              {params?.error ? (\n                <p className=\"text-sm text-muted-foreground\">Code error: {params.error}</p>\n              ) : (\n                <p className=\"text-sm text-muted-foreground\">An unspecified error occurred.</p>\n              )}\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { createFileRoute } from '@tanstack/react-router'\n\nimport { Card, CardContent, CardHeader, CardTitle } from '@/registry/default/components/ui/card'\n\nexport const Route = createFileRoute('/auth/error')({\n  component: AuthError,\n  validateSearch: (params) => {\n    if (params.error && typeof params.error === 'string') {\n      return { error: params.error }\n    }\n    return null\n  },\n})\n\nfunction AuthError() {\n  const params = Route.useSearch()\n\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <div className=\"flex flex-col gap-6\">\n          <Card>\n            <CardHeader>\n              <CardTitle className=\"text-2xl\">Sorry, something went wrong.</CardTitle>\n            </CardHeader>\n            <CardContent>\n              {params?.error ? (\n                <p className=\"text-sm text-muted-foreground\">Code error: {params.error}</p>\n              ) : (\n                <p className=\"text-sm text-muted-foreground\">An unspecified error occurred.</p>\n              )}\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:file",
       "target": "routes/auth/error.tsx"
     },
     {
       "path": "registry/default/blocks/password-based-auth-tanstack/routes/_protected.tsx",
-      "content": "import { fetchUser } from '@/registry/default/blocks/password-based-auth-tanstack/lib/supabase/fetch-user-server-fn'\nimport { createFileRoute, redirect } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/_protected')({\n  beforeLoad: async () => {\n    const user = await fetchUser()\n\n    if (!user) {\n      throw redirect({ to: '/login' })\n    }\n\n    return {\n      user,\n    }\n  },\n})\n",
+      "content": "import { createFileRoute, redirect } from '@tanstack/react-router'\n\nimport { fetchUser } from '@/registry/default/blocks/password-based-auth-tanstack/lib/supabase/fetch-user-server-fn'\n\nexport const Route = createFileRoute('/_protected')({\n  beforeLoad: async () => {\n    const user = await fetchUser()\n\n    if (!user) {\n      throw redirect({ to: '/login' })\n    }\n\n    return {\n      user,\n    }\n  },\n})\n",
       "type": "registry:file",
       "target": "routes/_protected.tsx"
     },
@@ -41,57 +41,57 @@
     },
     {
       "path": "registry/default/blocks/password-based-auth-tanstack/routes/auth/confirm.ts",
-      "content": "import { createClient } from '@/registry/default/clients/tanstack/lib/supabase/server'\nimport { type EmailOtpType } from '@supabase/supabase-js'\nimport { createFileRoute, redirect } from '@tanstack/react-router'\nimport { createServerFn } from '@tanstack/react-start'\nimport { getWebRequest } from '@tanstack/react-start/server'\n\nconst confirmFn = createServerFn({ method: 'GET' })\n  .validator((searchParams: unknown) => {\n    if (\n      searchParams &&\n      typeof searchParams === 'object' &&\n      'token_hash' in searchParams &&\n      'type' in searchParams &&\n      'next' in searchParams\n    ) {\n      return searchParams\n    }\n    throw new Error('Invalid search params')\n  })\n  .handler(async (ctx) => {\n    const request = getWebRequest()\n\n    if (!request) {\n      throw redirect({ to: `/auth/error`, search: { error: 'No request' } })\n    }\n\n    const searchParams = ctx.data\n    const token_hash = searchParams['token_hash'] as string\n    const type = searchParams['type'] as EmailOtpType | null\n    const _next = searchParams['next'] as string\n    const next = _next?.startsWith('/') ? _next : '/'\n\n    if (token_hash && type) {\n      const supabase = createClient()\n\n      const { error } = await supabase.auth.verifyOtp({\n        type,\n        token_hash,\n      })\n      console.log(error?.message)\n      if (!error) {\n        // redirect user to specified redirect URL or root of app\n        throw redirect({ href: next })\n      } else {\n        // redirect the user to an error page with some instructions\n        throw redirect({\n          to: `/auth/error`,\n          search: { error: error?.message },\n        })\n      }\n    }\n\n    // redirect the user to an error page with some instructions\n    throw redirect({\n      to: `/auth/error`,\n      search: { error: 'No token hash or type' },\n    })\n  })\n\nexport const Route = createFileRoute('/auth/confirm')({\n  preload: false,\n  loader: (opts) => confirmFn({ data: opts.location.search }),\n})\n",
+      "content": "import { type EmailOtpType } from '@supabase/supabase-js'\nimport { createFileRoute, redirect } from '@tanstack/react-router'\nimport { createServerFn } from '@tanstack/react-start'\nimport { getWebRequest } from '@tanstack/react-start/server'\n\nimport { createClient } from '@/registry/default/clients/tanstack/lib/supabase/server'\n\nconst confirmFn = createServerFn({ method: 'GET' })\n  .validator((searchParams: unknown) => {\n    if (\n      searchParams &&\n      typeof searchParams === 'object' &&\n      'token_hash' in searchParams &&\n      'type' in searchParams &&\n      'next' in searchParams\n    ) {\n      return searchParams\n    }\n    throw new Error('Invalid search params')\n  })\n  .handler(async (ctx) => {\n    const request = getWebRequest()\n\n    if (!request) {\n      throw redirect({ to: `/auth/error`, search: { error: 'No request' } })\n    }\n\n    const searchParams = ctx.data\n    const token_hash = searchParams['token_hash'] as string\n    const type = searchParams['type'] as EmailOtpType | null\n    const _next = searchParams['next'] as string\n    const next = _next?.startsWith('/') ? _next : '/'\n\n    if (token_hash && type) {\n      const supabase = createClient()\n\n      const { error } = await supabase.auth.verifyOtp({\n        type,\n        token_hash,\n      })\n      console.log(error?.message)\n      if (!error) {\n        // redirect user to specified redirect URL or root of app\n        throw redirect({ href: next })\n      } else {\n        // redirect the user to an error page with some instructions\n        throw redirect({\n          to: `/auth/error`,\n          search: { error: error?.message },\n        })\n      }\n    }\n\n    // redirect the user to an error page with some instructions\n    throw redirect({\n      to: `/auth/error`,\n      search: { error: 'No token hash or type' },\n    })\n  })\n\nexport const Route = createFileRoute('/auth/confirm')({\n  preload: false,\n  loader: (opts) => confirmFn({ data: opts.location.search }),\n})\n",
       "type": "registry:file",
       "target": "routes/auth/confirm.ts"
     },
     {
       "path": "registry/default/blocks/password-based-auth-tanstack/components/login-form.tsx",
-      "content": "import { cn } from '@/lib/utils'\nimport { createClient } from '@/registry/default/clients/tanstack/lib/supabase/client'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Label } from '@/registry/default/components/ui/label'\nimport { Link, useNavigate } from '@tanstack/react-router'\nimport { useState } from 'react'\n\nexport function LoginForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {\n  const [email, setEmail] = useState('')\n  const [password, setPassword] = useState('')\n  const [error, setError] = useState<string | null>(null)\n  const [isLoading, setIsLoading] = useState(false)\n  const navigate = useNavigate()\n\n  const handleLogin = async (e: React.FormEvent) => {\n    e.preventDefault()\n    const supabase = createClient()\n    setIsLoading(true)\n    setError(null)\n\n    try {\n      const { error } = await supabase.auth.signInWithPassword({\n        email,\n        password,\n      })\n      if (error) throw error\n      // Update this route to redirect to an authenticated route. The user already has an active session.\n      await navigate({ to: '/protected' })\n    } catch (error: unknown) {\n      setError(error instanceof Error ? error.message : 'An error occurred')\n    } finally {\n      setIsLoading(false)\n    }\n  }\n\n  return (\n    <div className={cn('flex flex-col gap-6', className)} {...props}>\n      <Card>\n        <CardHeader>\n          <CardTitle className=\"text-2xl\">Login</CardTitle>\n          <CardDescription>Enter your email below to login to your account</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form onSubmit={handleLogin}>\n            <div className=\"flex flex-col gap-6\">\n              <div className=\"grid gap-2\">\n                <Label htmlFor=\"email\">Email</Label>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                  value={email}\n                  onChange={(e) => setEmail(e.target.value)}\n                />\n              </div>\n              <div className=\"grid gap-2\">\n                <div className=\"flex items-center\">\n                  <Label htmlFor=\"password\">Password</Label>\n                  <Link\n                    to=\"/forgot-password\"\n                    className=\"ml-auto inline-block text-sm underline-offset-4 hover:underline\"\n                  >\n                    Forgot your password?\n                  </Link>\n                </div>\n                <Input\n                  id=\"password\"\n                  type=\"password\"\n                  required\n                  value={password}\n                  onChange={(e) => setPassword(e.target.value)}\n                />\n              </div>\n              {error && <p className=\"text-sm text-red-500\">{error}</p>}\n              <Button type=\"submit\" className=\"w-full\" disabled={isLoading}>\n                {isLoading ? 'Logging in...' : 'Login'}\n              </Button>\n            </div>\n            <div className=\"mt-4 text-center text-sm\">\n              Don&apos;t have an account?{' '}\n              <Link to=\"/sign-up\" className=\"underline underline-offset-4\">\n                Sign up\n              </Link>\n            </div>\n          </form>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n",
+      "content": "import { Link, useNavigate } from '@tanstack/react-router'\nimport { useState } from 'react'\n\nimport { cn } from '@/lib/utils'\nimport { createClient } from '@/registry/default/clients/tanstack/lib/supabase/client'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Label } from '@/registry/default/components/ui/label'\n\nexport function LoginForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {\n  const [email, setEmail] = useState('')\n  const [password, setPassword] = useState('')\n  const [error, setError] = useState<string | null>(null)\n  const [isLoading, setIsLoading] = useState(false)\n  const navigate = useNavigate()\n\n  const handleLogin = async (e: React.FormEvent) => {\n    e.preventDefault()\n    const supabase = createClient()\n    setIsLoading(true)\n    setError(null)\n\n    try {\n      const { error } = await supabase.auth.signInWithPassword({\n        email,\n        password,\n      })\n      if (error) throw error\n      // Update this route to redirect to an authenticated route. The user already has an active session.\n      await navigate({ to: '/protected' })\n    } catch (error: unknown) {\n      setError(error instanceof Error ? error.message : 'An error occurred')\n    } finally {\n      setIsLoading(false)\n    }\n  }\n\n  return (\n    <div className={cn('flex flex-col gap-6', className)} {...props}>\n      <Card>\n        <CardHeader>\n          <CardTitle className=\"text-2xl\">Login</CardTitle>\n          <CardDescription>Enter your email below to login to your account</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form onSubmit={handleLogin}>\n            <div className=\"flex flex-col gap-6\">\n              <div className=\"grid gap-2\">\n                <Label htmlFor=\"email\">Email</Label>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                  value={email}\n                  onChange={(e) => setEmail(e.target.value)}\n                />\n              </div>\n              <div className=\"grid gap-2\">\n                <div className=\"flex items-center\">\n                  <Label htmlFor=\"password\">Password</Label>\n                  <Link\n                    to=\"/forgot-password\"\n                    className=\"ml-auto inline-block text-sm underline-offset-4 hover:underline\"\n                  >\n                    Forgot your password?\n                  </Link>\n                </div>\n                <Input\n                  id=\"password\"\n                  type=\"password\"\n                  required\n                  value={password}\n                  onChange={(e) => setPassword(e.target.value)}\n                />\n              </div>\n              {error && <p className=\"text-sm text-red-500\">{error}</p>}\n              <Button type=\"submit\" className=\"w-full\" disabled={isLoading}>\n                {isLoading ? 'Logging in...' : 'Login'}\n              </Button>\n            </div>\n            <div className=\"mt-4 text-center text-sm\">\n              Don&apos;t have an account?{' '}\n              <Link to=\"/sign-up\" className=\"underline underline-offset-4\">\n                Sign up\n              </Link>\n            </div>\n          </form>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/default/blocks/password-based-auth-tanstack/routes/sign-up.tsx",
-      "content": "import { SignUpForm } from '@/registry/default/blocks/password-based-auth-tanstack/components/sign-up-form'\nimport { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/sign-up')({\n  component: SignUp,\n})\n\nfunction SignUp() {\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <SignUpForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { createFileRoute } from '@tanstack/react-router'\n\nimport { SignUpForm } from '@/registry/default/blocks/password-based-auth-tanstack/components/sign-up-form'\n\nexport const Route = createFileRoute('/sign-up')({\n  component: SignUp,\n})\n\nfunction SignUp() {\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <SignUpForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:file",
       "target": "routes/sign-up.tsx"
     },
     {
       "path": "registry/default/blocks/password-based-auth-tanstack/routes/sign-up-success.tsx",
-      "content": "import {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/sign-up-success')({\n  component: SignUpSuccess,\n})\n\nfunction SignUpSuccess() {\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <div className=\"flex flex-col gap-6\">\n          <Card>\n            <CardHeader>\n              <CardTitle className=\"text-2xl\">Thank you for signing up!</CardTitle>\n              <CardDescription>Check your email to confirm</CardDescription>\n            </CardHeader>\n            <CardContent>\n              <p className=\"text-sm text-muted-foreground\">\n                You&apos;ve successfully signed up. Please check your email to confirm your account\n                before signing in.\n              </p>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { createFileRoute } from '@tanstack/react-router'\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/components/ui/card'\n\nexport const Route = createFileRoute('/sign-up-success')({\n  component: SignUpSuccess,\n})\n\nfunction SignUpSuccess() {\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <div className=\"flex flex-col gap-6\">\n          <Card>\n            <CardHeader>\n              <CardTitle className=\"text-2xl\">Thank you for signing up!</CardTitle>\n              <CardDescription>Check your email to confirm</CardDescription>\n            </CardHeader>\n            <CardContent>\n              <p className=\"text-sm text-muted-foreground\">\n                You&apos;ve successfully signed up. Please check your email to confirm your account\n                before signing in.\n              </p>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:file",
       "target": "routes/sign-up-success.tsx"
     },
     {
       "path": "registry/default/blocks/password-based-auth-tanstack/components/sign-up-form.tsx",
-      "content": "import { cn } from '@/lib/utils'\nimport { createClient } from '@/registry/default/clients/tanstack/lib/supabase/client'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Label } from '@/registry/default/components/ui/label'\nimport { Link, useNavigate } from '@tanstack/react-router'\nimport { useState } from 'react'\n\nexport function SignUpForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {\n  const [email, setEmail] = useState('')\n  const [password, setPassword] = useState('')\n  const [repeatPassword, setRepeatPassword] = useState('')\n  const [error, setError] = useState<string | null>(null)\n  const [isLoading, setIsLoading] = useState(false)\n  const navigate = useNavigate()\n\n  const handleSignUp = async (e: React.FormEvent) => {\n    e.preventDefault()\n    const supabase = createClient()\n    setError(null)\n\n    if (password !== repeatPassword) {\n      setError('Passwords do not match')\n      return\n    }\n    setIsLoading(true)\n\n    try {\n      const { error } = await supabase.auth.signUp({\n        email,\n        password,\n        options: {\n          emailRedirectTo: `${window.location.origin}/protected`,\n        },\n      })\n      if (error) throw error\n      await navigate({ to: '/sign-up-success' })\n    } catch (error: unknown) {\n      setError(error instanceof Error ? error.message : 'An error occurred')\n    } finally {\n      setIsLoading(false)\n    }\n  }\n\n  return (\n    <div className={cn('flex flex-col gap-6', className)} {...props}>\n      <Card>\n        <CardHeader>\n          <CardTitle className=\"text-2xl\">Sign up</CardTitle>\n          <CardDescription>Create a new account</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form onSubmit={handleSignUp}>\n            <div className=\"flex flex-col gap-6\">\n              <div className=\"grid gap-2\">\n                <Label htmlFor=\"email\">Email</Label>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                  value={email}\n                  onChange={(e) => setEmail(e.target.value)}\n                />\n              </div>\n              <div className=\"grid gap-2\">\n                <div className=\"flex items-center\">\n                  <Label htmlFor=\"password\">Password</Label>\n                </div>\n                <Input\n                  id=\"password\"\n                  type=\"password\"\n                  required\n                  value={password}\n                  onChange={(e) => setPassword(e.target.value)}\n                />\n              </div>\n              <div className=\"grid gap-2\">\n                <div className=\"flex items-center\">\n                  <Label htmlFor=\"repeat-password\">Repeat Password</Label>\n                </div>\n                <Input\n                  id=\"repeat-password\"\n                  type=\"password\"\n                  required\n                  value={repeatPassword}\n                  onChange={(e) => setRepeatPassword(e.target.value)}\n                />\n              </div>\n              {error && <p className=\"text-sm text-red-500\">{error}</p>}\n              <Button type=\"submit\" className=\"w-full\" disabled={isLoading}>\n                {isLoading ? 'Creating an account...' : 'Sign up'}\n              </Button>\n            </div>\n            <div className=\"mt-4 text-center text-sm\">\n              Already have an account?{' '}\n              <Link to=\"/login\" className=\"underline underline-offset-4\">\n                Login\n              </Link>\n            </div>\n          </form>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n",
+      "content": "import { Link, useNavigate } from '@tanstack/react-router'\nimport { useState } from 'react'\n\nimport { cn } from '@/lib/utils'\nimport { createClient } from '@/registry/default/clients/tanstack/lib/supabase/client'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Label } from '@/registry/default/components/ui/label'\n\nexport function SignUpForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {\n  const [email, setEmail] = useState('')\n  const [password, setPassword] = useState('')\n  const [repeatPassword, setRepeatPassword] = useState('')\n  const [error, setError] = useState<string | null>(null)\n  const [isLoading, setIsLoading] = useState(false)\n  const navigate = useNavigate()\n\n  const handleSignUp = async (e: React.FormEvent) => {\n    e.preventDefault()\n    const supabase = createClient()\n    setError(null)\n\n    if (password !== repeatPassword) {\n      setError('Passwords do not match')\n      return\n    }\n    setIsLoading(true)\n\n    try {\n      const { error } = await supabase.auth.signUp({\n        email,\n        password,\n        options: {\n          emailRedirectTo: `${window.location.origin}/protected`,\n        },\n      })\n      if (error) throw error\n      await navigate({ to: '/sign-up-success' })\n    } catch (error: unknown) {\n      setError(error instanceof Error ? error.message : 'An error occurred')\n    } finally {\n      setIsLoading(false)\n    }\n  }\n\n  return (\n    <div className={cn('flex flex-col gap-6', className)} {...props}>\n      <Card>\n        <CardHeader>\n          <CardTitle className=\"text-2xl\">Sign up</CardTitle>\n          <CardDescription>Create a new account</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form onSubmit={handleSignUp}>\n            <div className=\"flex flex-col gap-6\">\n              <div className=\"grid gap-2\">\n                <Label htmlFor=\"email\">Email</Label>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                  value={email}\n                  onChange={(e) => setEmail(e.target.value)}\n                />\n              </div>\n              <div className=\"grid gap-2\">\n                <div className=\"flex items-center\">\n                  <Label htmlFor=\"password\">Password</Label>\n                </div>\n                <Input\n                  id=\"password\"\n                  type=\"password\"\n                  required\n                  value={password}\n                  onChange={(e) => setPassword(e.target.value)}\n                />\n              </div>\n              <div className=\"grid gap-2\">\n                <div className=\"flex items-center\">\n                  <Label htmlFor=\"repeat-password\">Repeat Password</Label>\n                </div>\n                <Input\n                  id=\"repeat-password\"\n                  type=\"password\"\n                  required\n                  value={repeatPassword}\n                  onChange={(e) => setRepeatPassword(e.target.value)}\n                />\n              </div>\n              {error && <p className=\"text-sm text-red-500\">{error}</p>}\n              <Button type=\"submit\" className=\"w-full\" disabled={isLoading}>\n                {isLoading ? 'Creating an account...' : 'Sign up'}\n              </Button>\n            </div>\n            <div className=\"mt-4 text-center text-sm\">\n              Already have an account?{' '}\n              <Link to=\"/login\" className=\"underline underline-offset-4\">\n                Login\n              </Link>\n            </div>\n          </form>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/default/blocks/password-based-auth-tanstack/routes/forgot-password.tsx",
-      "content": "import { ForgotPasswordForm } from '@/registry/default/blocks/password-based-auth-tanstack/components/forgot-password-form'\nimport { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/forgot-password')({\n  component: ForgotPassword,\n})\n\nfunction ForgotPassword() {\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <ForgotPasswordForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { createFileRoute } from '@tanstack/react-router'\n\nimport { ForgotPasswordForm } from '@/registry/default/blocks/password-based-auth-tanstack/components/forgot-password-form'\n\nexport const Route = createFileRoute('/forgot-password')({\n  component: ForgotPassword,\n})\n\nfunction ForgotPassword() {\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <ForgotPasswordForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:file",
       "target": "routes/forgot-password.tsx"
     },
     {
       "path": "registry/default/blocks/password-based-auth-tanstack/routes/update-password.tsx",
-      "content": "import { UpdatePasswordForm } from '@/registry/default/blocks/password-based-auth-tanstack/components/update-password-form'\nimport { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/update-password')({\n  component: UpdatePassword,\n})\n\nfunction UpdatePassword() {\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <UpdatePasswordForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { createFileRoute } from '@tanstack/react-router'\n\nimport { UpdatePasswordForm } from '@/registry/default/blocks/password-based-auth-tanstack/components/update-password-form'\n\nexport const Route = createFileRoute('/update-password')({\n  component: UpdatePassword,\n})\n\nfunction UpdatePassword() {\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <UpdatePasswordForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:file",
       "target": "routes/update-password.tsx"
     },
     {
       "path": "registry/default/blocks/password-based-auth-tanstack/components/forgot-password-form.tsx",
-      "content": "import { cn } from '@/lib/utils'\nimport { createClient } from '@/registry/default/clients/tanstack/lib/supabase/client'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Label } from '@/registry/default/components/ui/label'\nimport { Link } from '@tanstack/react-router'\nimport { useState } from 'react'\n\nexport function ForgotPasswordForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {\n  const [email, setEmail] = useState('')\n  const [error, setError] = useState<string | null>(null)\n  const [success, setSuccess] = useState(false)\n  const [isLoading, setIsLoading] = useState(false)\n\n  const handleForgotPassword = async (e: React.FormEvent) => {\n    e.preventDefault()\n    const supabase = createClient()\n    setIsLoading(true)\n    setError(null)\n\n    try {\n      // The url which will be included in the email. This URL needs to be configured in your redirect URLs in the Supabase dashboard at https://supabase.com/dashboard/project/_/auth/url-configuration\n      const { error } = await supabase.auth.resetPasswordForEmail(email, {\n        redirectTo: 'http://localhost:3000/update-password',\n      })\n      if (error) throw error\n      setSuccess(true)\n    } catch (error: unknown) {\n      setError(error instanceof Error ? error.message : 'An error occurred')\n    } finally {\n      setIsLoading(false)\n    }\n  }\n\n  return (\n    <div className={cn('flex flex-col gap-6', className)} {...props}>\n      {success ? (\n        <Card>\n          <CardHeader>\n            <CardTitle className=\"text-2xl\">Check Your Email</CardTitle>\n            <CardDescription>Password reset instructions sent</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <p className=\"text-sm text-muted-foreground\">\n              If you registered using your email and password, you will receive a password reset\n              email.\n            </p>\n          </CardContent>\n        </Card>\n      ) : (\n        <Card>\n          <CardHeader>\n            <CardTitle className=\"text-2xl\">Reset Your Password</CardTitle>\n            <CardDescription>\n              Type in your email and we&apos;ll send you a link to reset your password\n            </CardDescription>\n          </CardHeader>\n          <CardContent>\n            <form onSubmit={handleForgotPassword}>\n              <div className=\"flex flex-col gap-6\">\n                <div className=\"grid gap-2\">\n                  <Label htmlFor=\"email\">Email</Label>\n                  <Input\n                    id=\"email\"\n                    type=\"email\"\n                    placeholder=\"m@example.com\"\n                    required\n                    value={email}\n                    onChange={(e) => setEmail(e.target.value)}\n                  />\n                </div>\n                {error && <p className=\"text-sm text-red-500\">{error}</p>}\n                <Button type=\"submit\" className=\"w-full\" disabled={isLoading}>\n                  {isLoading ? 'Sending...' : 'Send reset email'}\n                </Button>\n              </div>\n              <div className=\"mt-4 text-center text-sm\">\n                Already have an account?{' '}\n                <Link to=\"/login\" className=\"underline underline-offset-4\">\n                  Login\n                </Link>\n              </div>\n            </form>\n          </CardContent>\n        </Card>\n      )}\n    </div>\n  )\n}\n",
+      "content": "import { Link } from '@tanstack/react-router'\nimport { useState } from 'react'\n\nimport { cn } from '@/lib/utils'\nimport { createClient } from '@/registry/default/clients/tanstack/lib/supabase/client'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Label } from '@/registry/default/components/ui/label'\n\nexport function ForgotPasswordForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {\n  const [email, setEmail] = useState('')\n  const [error, setError] = useState<string | null>(null)\n  const [success, setSuccess] = useState(false)\n  const [isLoading, setIsLoading] = useState(false)\n\n  const handleForgotPassword = async (e: React.FormEvent) => {\n    e.preventDefault()\n    const supabase = createClient()\n    setIsLoading(true)\n    setError(null)\n\n    try {\n      // The url which will be included in the email. This URL needs to be configured in your redirect URLs in the Supabase dashboard at https://supabase.com/dashboard/project/_/auth/url-configuration\n      const { error } = await supabase.auth.resetPasswordForEmail(email, {\n        redirectTo: 'http://localhost:3000/update-password',\n      })\n      if (error) throw error\n      setSuccess(true)\n    } catch (error: unknown) {\n      setError(error instanceof Error ? error.message : 'An error occurred')\n    } finally {\n      setIsLoading(false)\n    }\n  }\n\n  return (\n    <div className={cn('flex flex-col gap-6', className)} {...props}>\n      {success ? (\n        <Card>\n          <CardHeader>\n            <CardTitle className=\"text-2xl\">Check Your Email</CardTitle>\n            <CardDescription>Password reset instructions sent</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <p className=\"text-sm text-muted-foreground\">\n              If you registered using your email and password, you will receive a password reset\n              email.\n            </p>\n          </CardContent>\n        </Card>\n      ) : (\n        <Card>\n          <CardHeader>\n            <CardTitle className=\"text-2xl\">Reset Your Password</CardTitle>\n            <CardDescription>\n              Type in your email and we&apos;ll send you a link to reset your password\n            </CardDescription>\n          </CardHeader>\n          <CardContent>\n            <form onSubmit={handleForgotPassword}>\n              <div className=\"flex flex-col gap-6\">\n                <div className=\"grid gap-2\">\n                  <Label htmlFor=\"email\">Email</Label>\n                  <Input\n                    id=\"email\"\n                    type=\"email\"\n                    placeholder=\"m@example.com\"\n                    required\n                    value={email}\n                    onChange={(e) => setEmail(e.target.value)}\n                  />\n                </div>\n                {error && <p className=\"text-sm text-red-500\">{error}</p>}\n                <Button type=\"submit\" className=\"w-full\" disabled={isLoading}>\n                  {isLoading ? 'Sending...' : 'Send reset email'}\n                </Button>\n              </div>\n              <div className=\"mt-4 text-center text-sm\">\n                Already have an account?{' '}\n                <Link to=\"/login\" className=\"underline underline-offset-4\">\n                  Login\n                </Link>\n              </div>\n            </form>\n          </CardContent>\n        </Card>\n      )}\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/default/blocks/password-based-auth-tanstack/components/update-password-form.tsx",
-      "content": "import { cn } from '@/lib/utils'\nimport { createClient } from '@/registry/default/clients/tanstack/lib/supabase/client'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Label } from '@/registry/default/components/ui/label'\nimport { useNavigate } from '@tanstack/react-router'\nimport { useState } from 'react'\n\nexport function UpdatePasswordForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {\n  const [password, setPassword] = useState('')\n  const [error, setError] = useState<string | null>(null)\n  const [isLoading, setIsLoading] = useState(false)\n  const navigate = useNavigate()\n\n  const handleForgotPassword = async (e: React.FormEvent) => {\n    e.preventDefault()\n    const supabase = createClient()\n    setIsLoading(true)\n    setError(null)\n\n    try {\n      const { error } = await supabase.auth.updateUser({ password })\n      if (error) throw error\n      // Update this route to redirect to an authenticated route. The user already has an active session.\n      await navigate({ to: '/protected' })\n    } catch (error: unknown) {\n      setError(error instanceof Error ? error.message : 'An error occurred')\n    } finally {\n      setIsLoading(false)\n    }\n  }\n\n  return (\n    <div className={cn('flex flex-col gap-6', className)} {...props}>\n      <Card>\n        <CardHeader>\n          <CardTitle className=\"text-2xl\">Reset Your Password</CardTitle>\n          <CardDescription>Please enter your new password below.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form onSubmit={handleForgotPassword}>\n            <div className=\"flex flex-col gap-6\">\n              <div className=\"grid gap-2\">\n                <Label htmlFor=\"password\">New password</Label>\n                <Input\n                  id=\"password\"\n                  type=\"password\"\n                  placeholder=\"New password\"\n                  required\n                  value={password}\n                  onChange={(e) => setPassword(e.target.value)}\n                />\n              </div>\n              {error && <p className=\"text-sm text-red-500\">{error}</p>}\n              <Button type=\"submit\" className=\"w-full\" disabled={isLoading}>\n                {isLoading ? 'Saving...' : 'Save new password'}\n              </Button>\n            </div>\n          </form>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n",
+      "content": "import { useNavigate } from '@tanstack/react-router'\nimport { useState } from 'react'\n\nimport { cn } from '@/lib/utils'\nimport { createClient } from '@/registry/default/clients/tanstack/lib/supabase/client'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Label } from '@/registry/default/components/ui/label'\n\nexport function UpdatePasswordForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {\n  const [password, setPassword] = useState('')\n  const [error, setError] = useState<string | null>(null)\n  const [isLoading, setIsLoading] = useState(false)\n  const navigate = useNavigate()\n\n  const handleForgotPassword = async (e: React.FormEvent) => {\n    e.preventDefault()\n    const supabase = createClient()\n    setIsLoading(true)\n    setError(null)\n\n    try {\n      const { error } = await supabase.auth.updateUser({ password })\n      if (error) throw error\n      // Update this route to redirect to an authenticated route. The user already has an active session.\n      await navigate({ to: '/protected' })\n    } catch (error: unknown) {\n      setError(error instanceof Error ? error.message : 'An error occurred')\n    } finally {\n      setIsLoading(false)\n    }\n  }\n\n  return (\n    <div className={cn('flex flex-col gap-6', className)} {...props}>\n      <Card>\n        <CardHeader>\n          <CardTitle className=\"text-2xl\">Reset Your Password</CardTitle>\n          <CardDescription>Please enter your new password below.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form onSubmit={handleForgotPassword}>\n            <div className=\"flex flex-col gap-6\">\n              <div className=\"grid gap-2\">\n                <Label htmlFor=\"password\">New password</Label>\n                <Input\n                  id=\"password\"\n                  type=\"password\"\n                  placeholder=\"New password\"\n                  required\n                  value={password}\n                  onChange={(e) => setPassword(e.target.value)}\n                />\n              </div>\n              {error && <p className=\"text-sm text-red-500\">{error}</p>}\n              <Button type=\"submit\" className=\"w-full\" disabled={isLoading}>\n                {isLoading ? 'Saving...' : 'Save new password'}\n              </Button>\n            </div>\n          </form>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/default/blocks/password-based-auth-tanstack/lib/supabase/fetch-user-server-fn.ts",
-      "content": "import { createClient } from '@/registry/default/clients/tanstack/lib/supabase/server'\nimport type { Factor, User } from '@supabase/supabase-js'\nimport { createServerFn } from '@tanstack/react-start'\ntype SSRSafeUser = User & {\n  factors: (Factor & { factor_type: 'phone' | 'totp' })[]\n}\n\nexport const fetchUser: () => Promise<SSRSafeUser | null> = createServerFn({\n  method: 'GET',\n}).handler(async () => {\n  const supabase = createClient()\n  const { data, error } = await supabase.auth.getUser()\n\n  if (error) {\n    return null\n  }\n\n  return data.user as SSRSafeUser\n})\n",
+      "content": "import type { Factor, User } from '@supabase/supabase-js'\nimport { createServerFn } from '@tanstack/react-start'\n\nimport { createClient } from '@/registry/default/clients/tanstack/lib/supabase/server'\n\ntype SSRSafeUser = User & {\n  factors: (Factor & { factor_type: 'phone' | 'totp' })[]\n}\n\nexport const fetchUser: () => Promise<SSRSafeUser | null> = createServerFn({\n  method: 'GET',\n}).handler(async () => {\n  const supabase = createClient()\n  const { data, error } = await supabase.auth.getUser()\n\n  if (error) {\n    return null\n  }\n\n  return data.user as SSRSafeUser\n})\n",
       "type": "registry:lib"
     },
     {
diff --git a/apps/ui-library/public/r/platform-kit-nextjs.json b/apps/ui-library/public/r/platform-kit-nextjs.json
index 1df40283f0f..67440d2bb5a 100644
--- a/apps/ui-library/public/r/platform-kit-nextjs.json
+++ b/apps/ui-library/public/r/platform-kit-nextjs.json
@@ -44,7 +44,7 @@
   "files": [
     {
       "path": "registry/default/platform/platform-kit-nextjs/app/api/ai/sql/route.ts",
-      "content": "import type { paths } from '@/registry/default/platform/platform-kit-nextjs/lib/management-api-schema'\nimport { listTablesSql } from '@/registry/default/platform/platform-kit-nextjs/lib/pg-meta'\nimport { NextResponse } from 'next/server'\nimport OpenAI from 'openai'\nimport createClient from 'openapi-fetch'\n\nconst openai = new OpenAI({\n  apiKey: process.env.OPENAI_API_KEY,\n})\n\nconst client = createClient<paths>({\n  baseUrl: 'https://api.supabase.com',\n  headers: {\n    Authorization: `Bearer ${process.env.SUPABASE_MANAGEMENT_API_TOKEN}`,\n  },\n})\n\n// Function to get database schema\nasync function getDbSchema(projectRef: string) {\n  const token = process.env.SUPABASE_MANAGEMENT_API_TOKEN\n  if (!token) {\n    throw new Error('Supabase Management API token is not configured.')\n  }\n\n  const sql = listTablesSql()\n\n  const { data, error } = await client.POST('/v1/projects/{ref}/database/query', {\n    params: {\n      path: {\n        ref: projectRef,\n      },\n    },\n    body: {\n      query: sql,\n      read_only: true,\n    },\n  })\n\n  if (error) {\n    throw error\n  }\n\n  return data as any\n}\n\nfunction formatSchemaForPrompt(schema: any) {\n  let schemaString = ''\n  if (schema && Array.isArray(schema)) {\n    schema.forEach((table: any) => {\n      const columnInfo = table.columns.map((c: any) => `${c.name} (${c.data_type})`)\n      schemaString += `Table \"${table.name}\" has columns: ${columnInfo.join(', ')}.\\n`\n    })\n  }\n  return schemaString\n}\n\nexport async function POST(request: Request) {\n  try {\n    const { prompt, projectRef } = await request.json()\n\n    if (!prompt) {\n      return NextResponse.json({ message: 'Prompt is required.' }, { status: 400 })\n    }\n    if (!projectRef) {\n      return NextResponse.json({ message: 'projectRef is required.' }, { status: 400 })\n    }\n\n    // Implement your permission check here (e.g. check if the user is a member of the project)\n    // In this example, everyone can access all projects\n    const userHasPermissionForProject = Boolean(projectRef)\n\n    if (!userHasPermissionForProject) {\n      return NextResponse.json(\n        { message: 'You do not have permission to access this project.' },\n        { status: 403 }\n      )\n    }\n\n    // 1. Get database schema\n    const schema = await getDbSchema(projectRef)\n    const formattedSchema = formatSchemaForPrompt(schema)\n\n    // 2. Create a prompt for OpenAI\n    const systemPrompt = `You are an expert SQL assistant. Given the following database schema, write a SQL query that answers the user's question. Return only the SQL query, do not include any explanations or markdown.\\n\\nSchema:\\n${formattedSchema}`\n\n    // 3. Call OpenAI to generate SQL using responses.create (plain text output)\n    const response = await openai.responses.create({\n      model: 'gpt-4.1',\n      instructions: systemPrompt, // Use systemPrompt as instructions\n      input: prompt, // User's question\n    })\n\n    const sql = response.output_text\n\n    if (!sql) {\n      return NextResponse.json(\n        { message: 'Could not generate SQL from the prompt.' },\n        { status: 500 }\n      )\n    }\n\n    // 4. Return the generated SQL\n    return NextResponse.json({ sql })\n  } catch (error: any) {\n    console.error('AI SQL generation error:', error)\n    const errorMessage = error.message || 'An unexpected error occurred.'\n    const status = error.response?.status || 500\n    return NextResponse.json({ message: errorMessage }, { status })\n  }\n}\n",
+      "content": "import { NextResponse } from 'next/server'\nimport OpenAI from 'openai'\nimport createClient from 'openapi-fetch'\n\nimport type { paths } from '@/registry/default/platform/platform-kit-nextjs/lib/management-api-schema'\nimport { listTablesSql } from '@/registry/default/platform/platform-kit-nextjs/lib/pg-meta'\n\nconst openai = new OpenAI({\n  apiKey: process.env.OPENAI_API_KEY,\n})\n\nconst client = createClient<paths>({\n  baseUrl: 'https://api.supabase.com',\n  headers: {\n    Authorization: `Bearer ${process.env.SUPABASE_MANAGEMENT_API_TOKEN}`,\n  },\n})\n\n// Function to get database schema\nasync function getDbSchema(projectRef: string) {\n  const token = process.env.SUPABASE_MANAGEMENT_API_TOKEN\n  if (!token) {\n    throw new Error('Supabase Management API token is not configured.')\n  }\n\n  const sql = listTablesSql()\n\n  const { data, error } = await client.POST('/v1/projects/{ref}/database/query', {\n    params: {\n      path: {\n        ref: projectRef,\n      },\n    },\n    body: {\n      query: sql,\n      read_only: true,\n    },\n  })\n\n  if (error) {\n    throw error\n  }\n\n  return data as any\n}\n\nfunction formatSchemaForPrompt(schema: any) {\n  let schemaString = ''\n  if (schema && Array.isArray(schema)) {\n    schema.forEach((table: any) => {\n      const columnInfo = table.columns.map((c: any) => `${c.name} (${c.data_type})`)\n      schemaString += `Table \"${table.name}\" has columns: ${columnInfo.join(', ')}.\\n`\n    })\n  }\n  return schemaString\n}\n\nexport async function POST(request: Request) {\n  try {\n    const { prompt, projectRef } = await request.json()\n\n    if (!prompt) {\n      return NextResponse.json({ message: 'Prompt is required.' }, { status: 400 })\n    }\n    if (!projectRef) {\n      return NextResponse.json({ message: 'projectRef is required.' }, { status: 400 })\n    }\n\n    // Implement your permission check here (e.g. check if the user is a member of the project)\n    // In this example, everyone can access all projects\n    const userHasPermissionForProject = Boolean(projectRef)\n\n    if (!userHasPermissionForProject) {\n      return NextResponse.json(\n        { message: 'You do not have permission to access this project.' },\n        { status: 403 }\n      )\n    }\n\n    // 1. Get database schema\n    const schema = await getDbSchema(projectRef)\n    const formattedSchema = formatSchemaForPrompt(schema)\n\n    // 2. Create a prompt for OpenAI\n    const systemPrompt = `You are an expert SQL assistant. Given the following database schema, write a SQL query that answers the user's question. Return only the SQL query, do not include any explanations or markdown.\\n\\nSchema:\\n${formattedSchema}`\n\n    // 3. Call OpenAI to generate SQL using responses.create (plain text output)\n    const response = await openai.responses.create({\n      model: 'gpt-4.1',\n      instructions: systemPrompt, // Use systemPrompt as instructions\n      input: prompt, // User's question\n    })\n\n    const sql = response.output_text\n\n    if (!sql) {\n      return NextResponse.json(\n        { message: 'Could not generate SQL from the prompt.' },\n        { status: 500 }\n      )\n    }\n\n    // 4. Return the generated SQL\n    return NextResponse.json({ sql })\n  } catch (error: any) {\n    console.error('AI SQL generation error:', error)\n    const errorMessage = error.message || 'An unexpected error occurred.'\n    const status = error.response?.status || 500\n    return NextResponse.json({ message: errorMessage }, { status })\n  }\n}\n",
       "type": "registry:page",
       "target": "app/api/ai/sql/route.ts"
     },
@@ -56,7 +56,7 @@
     },
     {
       "path": "registry/default/platform/platform-kit-nextjs/components/dynamic-form.tsx",
-      "content": "'use client'\n\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { useForm } from 'react-hook-form'\nimport type { z, ZodTypeAny } from 'zod'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/components/ui/form'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Switch } from '@/registry/default/components/ui/switch'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/components/ui/select'\nimport { useEffect, useRef } from 'react'\n\ninterface DynamicFormProps<T extends z.ZodRawShape = z.ZodRawShape> {\n  schema: z.ZodObject<T>\n  onSubmit: (data: z.infer<z.ZodObject<T>>) => void\n  isLoading?: boolean\n  initialValues?: Partial<z.infer<z.ZodObject<T>>>\n  labels?: Record<string, string | { label: string; options?: Record<string, string> }>\n  columnInfo?: Record<string, { data_type: string; is_nullable: boolean }>\n}\n\nconst getZodDef = (schema: ZodTypeAny): Record<string, any> =>\n  (schema as any)._def || (schema as any).def\n\nconst unwrapZodType = (fieldSchema: ZodTypeAny): ZodTypeAny => {\n  if (\n    !fieldSchema ||\n    typeof getZodDef(fieldSchema) !== 'object' ||\n    getZodDef(fieldSchema) === null\n  ) {\n    throw new Error(\n      `unwrapZodType received an invalid Zod schema object. Check the console for the problematic schema/key.`\n    )\n  }\n  let currentSchema = fieldSchema\n\n  // Support both old (typeName) and new (type) Zod formats\n  const getTypeName = (def: Record<string, any>) => def.typeName || def.type\n\n  while (\n    getTypeName(getZodDef(currentSchema)) === 'ZodOptional' ||\n    getTypeName(getZodDef(currentSchema)) === 'optional' ||\n    getTypeName(getZodDef(currentSchema)) === 'ZodDefault' ||\n    getTypeName(getZodDef(currentSchema)) === 'default' ||\n    getTypeName(getZodDef(currentSchema)) === 'ZodNullable' ||\n    getTypeName(getZodDef(currentSchema)) === 'nullable' ||\n    getTypeName(getZodDef(currentSchema)) === 'ZodEffects' ||\n    getTypeName(getZodDef(currentSchema)) === 'effects'\n  ) {\n    const typeName = getTypeName(getZodDef(currentSchema))\n    if (typeName === 'ZodEffects' || typeName === 'effects') {\n      // For ZodEffects, get the schema inside the effect\n      currentSchema = getZodDef(currentSchema).schema\n    } else {\n      currentSchema = getZodDef(currentSchema).innerType\n    }\n  }\n  return currentSchema\n}\n\nexport function DynamicForm<T extends z.ZodRawShape = z.ZodRawShape>({\n  schema,\n  onSubmit,\n  isLoading = false,\n  initialValues,\n  labels,\n  columnInfo,\n}: DynamicFormProps<T>) {\n  const isInitializingRef = useRef(true)\n\n  const defaultValues = Object.keys(schema.shape).reduce(\n    (acc, key) => {\n      const originalFieldSchema = schema.shape[key]\n      if (typeof originalFieldSchema === 'undefined') {\n        throw new Error(\n          `Schema error: schema.shape['${key}'] is undefined. Check schema definition.`\n        )\n      }\n\n      // Support both old (typeName) and new (type) Zod formats\n      const getTypeName = (def: Record<string, any>) => def.typeName || def.type\n\n      if (\n        getTypeName(getZodDef(originalFieldSchema)) === 'ZodDefault' ||\n        getTypeName(getZodDef(originalFieldSchema)) === 'default'\n      ) {\n        acc[key] = getZodDef(originalFieldSchema).defaultValue()\n        return acc\n      }\n\n      const baseType = unwrapZodType(originalFieldSchema)\n\n      switch (getTypeName(getZodDef(baseType))) {\n        case 'ZodString':\n        case 'string':\n          acc[key] = ''\n          break\n        case 'ZodBoolean':\n        case 'boolean':\n          acc[key] = false // Default optional booleans to false\n          break\n        case 'ZodEnum':\n        case 'enum':\n          // For enums, use the first enum value as default\n          const enumValues = getZodDef(baseType).values || []\n          acc[key] = enumValues.length > 0 ? enumValues[0] : ''\n          break\n        case 'ZodNumber':\n        case 'number':\n          acc[key] = 0 // Default optional numbers to 0\n          break\n        case 'ZodArray':\n        case 'array':\n          acc[key] = [] // Default arrays to empty array\n          break\n        default:\n          acc[key] = undefined // For other types, or if truly no default makes sense\n          break\n      }\n      return acc\n    },\n    {} as Record<string, any>\n  )\n\n  const form = useForm<z.infer<typeof schema>>({\n    resolver: zodResolver(schema),\n    defaultValues: defaultValues as any,\n  })\n\n  useEffect(() => {\n    if (initialValues) {\n      isInitializingRef.current = true\n      const schemaKeys = Object.keys(schema.shape)\n      const processedInitialValues = schemaKeys.reduce(\n        (acc, key) => {\n          const fieldDefFromSchema = schema.shape[key]\n          if (typeof fieldDefFromSchema === 'undefined') {\n            throw new Error(`Schema error in useEffect: schema.shape['${key}'] is undefined.`)\n          }\n          const value = initialValues.hasOwnProperty(key) ? initialValues[key] : undefined\n          const baseFieldType = unwrapZodType(fieldDefFromSchema)\n\n          // Support both old (typeName) and new (type) Zod formats\n          const getTypeName = (def: Record<string, any>) => def.typeName || def.type\n\n          const fieldTypeName = getTypeName(getZodDef(baseFieldType))\n          if (fieldTypeName === 'ZodBoolean' || fieldTypeName === 'boolean') {\n            acc[key] = !!value\n          } else if (fieldTypeName === 'ZodString' || fieldTypeName === 'string') {\n            acc[key] = value === null || value === undefined ? '' : String(value)\n          } else if (fieldTypeName === 'ZodEnum' || fieldTypeName === 'enum') {\n            const enumValues = getZodDef(baseFieldType).values || []\n            acc[key] =\n              value === null || value === undefined || !enumValues.includes(value)\n                ? enumValues[0] || ''\n                : String(value)\n          } else if (fieldTypeName === 'ZodNumber' || fieldTypeName === 'number') {\n            const num = Number(value)\n            acc[key] = isNaN(num) ? 0 : num\n          } else if (fieldTypeName === 'ZodArray' || fieldTypeName === 'array') {\n            // For arrays, the value should already be an array from the database\n            // Handle null values properly\n            if (Array.isArray(value)) {\n              acc[key] = value\n            } else if (value === null || value === undefined) {\n              acc[key] = []\n            } else if (typeof value === 'string' && value.startsWith('{') && value.endsWith('}')) {\n              // Parse PostgreSQL array format like {ONE,TWO} into JavaScript array\n              try {\n                const innerContent = value.slice(1, -1) // Remove { and }\n                if (innerContent.trim() === '') {\n                  acc[key] = []\n                } else {\n                  // Split by comma and trim whitespace\n                  acc[key] = innerContent.split(',').map((item: string) => item.trim())\n                }\n              } catch {\n                // If parsing fails, default to empty array\n                acc[key] = []\n              }\n            } else {\n              acc[key] = []\n            }\n          } else {\n            acc[key] = value\n          }\n          return acc\n        },\n        {} as Record<string, any>\n      )\n      form.reset(processedInitialValues as any)\n      setTimeout(() => {\n        isInitializingRef.current = false\n      }, 0)\n    } else {\n      isInitializingRef.current = false\n    }\n  }, [initialValues, form, schema])\n\n  const renderField = (fieldName: string, fieldSchema: ZodTypeAny) => {\n    const baseType = unwrapZodType(fieldSchema)\n    // Support both old (typeName) and new (type) Zod formats\n    const getTypeName = (def: Record<string, any>) => def.typeName || def.type\n    const typeName = getTypeName(getZodDef(baseType))\n    const description = fieldSchema.description\n\n    return (\n      <FormField\n        key={fieldName}\n        control={form.control}\n        name={fieldName as any}\n        render={({ field }) => {\n          const labelConfig = labels?.[fieldName]\n          const label =\n            typeof labelConfig === 'string' ? labelConfig : labelConfig?.label || fieldName\n          const typeDisplay = columnInfo?.[fieldName]?.data_type || ''\n          switch (typeName) {\n            case 'ZodString':\n            case 'string':\n              return (\n                <FormItem className=\"py-6 border-b\">\n                  <div className=\"w-full flex flex-col lg:flex-row lg:items-center justify-between w-full gap-4 lg:gap-8\">\n                    <div className=\"flex-1 pr-4\">\n                      <FormLabel>{label}</FormLabel>\n                      <div className=\"text-sm text-muted-foreground mt-1\">{typeDisplay}</div>\n                      {description && <FormDescription>{description}</FormDescription>}\n                      <FormMessage />\n                    </div>\n                    <div className=\"flex-1 lg:max-w-1/2\">\n                      <FormControl>\n                        <Input\n                          placeholder={`Enter your ${fieldName}`}\n                          {...field}\n                          value={String(field.value || '')}\n                        />\n                      </FormControl>\n                    </div>\n                  </div>\n                </FormItem>\n              )\n            case 'ZodNumber':\n            case 'number':\n              return (\n                <FormItem className=\"py-6 border-b\">\n                  <div className=\"w-full flex flex-col lg:flex-row lg:items-center justify-between w-full gap-4 lg:gap-8\">\n                    <div className=\"flex-1 pr-4\">\n                      <FormLabel>{label}</FormLabel>\n                      <div className=\"text-sm text-muted-foreground\">{typeDisplay}</div>\n                      {description && <FormDescription>{description}</FormDescription>}\n                      <FormMessage />\n                    </div>\n                    <div className=\"flex-1 lg:max-w-1/2\">\n                      <FormControl>\n                        <Input\n                          type=\"number\"\n                          placeholder={`Enter value for ${fieldName}`}\n                          {...field}\n                          value={String(field.value ?? '')}\n                          onChange={(e) => {\n                            const value = e.target.value\n                            const num = parseInt(value, 10)\n                            field.onChange(isNaN(num) ? undefined : num)\n                          }}\n                        />\n                      </FormControl>\n                    </div>\n                  </div>\n                </FormItem>\n              )\n            case 'ZodBoolean':\n            case 'boolean':\n              return (\n                <FormItem className=\"py-6 border-b flex flex-row items-center justify-between gap-8\">\n                  <div>\n                    <FormLabel>{label}</FormLabel>\n                    <div className=\"text-sm text-muted-foreground\">{typeDisplay}</div>\n                    {description && <FormDescription>{description}</FormDescription>}\n                    <FormMessage />\n                  </div>\n                  <FormControl>\n                    <Switch checked={!!field.value} onCheckedChange={field.onChange} />\n                  </FormControl>\n                </FormItem>\n              )\n            case 'ZodEnum':\n            case 'enum':\n              const options = getZodDef(baseType).values\n              const optionLabels = typeof labelConfig === 'object' ? labelConfig.options : undefined\n              return (\n                <FormItem className=\"py-6 border-b\">\n                  <div className=\"w-full flex flex-col lg:flex-row lg:items-center justify-between w-full gap-4 lg:gap-8\">\n                    <div className=\"flex-1 pr-4\">\n                      <FormLabel>{label}</FormLabel>\n                      <div className=\"text-sm text-muted-foreground\">{typeDisplay}</div>\n                      {description && <FormDescription>{description}</FormDescription>}\n                      <FormMessage />\n                    </div>\n                    <div className=\"flex-1 lg:max-w-1/2\">\n                      <Select\n                        onValueChange={(value) => {\n                          if (!isInitializingRef.current) {\n                            field.onChange(value)\n                          }\n                        }}\n                        value={String(field.value || '')}\n                      >\n                        <FormControl>\n                          <SelectTrigger>\n                            <SelectValue placeholder={`Select a ${fieldName}`} />\n                          </SelectTrigger>\n                        </FormControl>\n                        <SelectContent>\n                          {options.map((option: string) => (\n                            <SelectItem key={option} value={option}>\n                              {optionLabels?.[option] || option}\n                            </SelectItem>\n                          ))}\n                        </SelectContent>\n                      </Select>\n                    </div>\n                  </div>\n                </FormItem>\n              )\n            case 'ZodArray':\n            case 'array':\n              return (\n                <FormItem className=\"py-6 border-b\">\n                  <div className=\"flex flex-row items-center justify-between w-full gap-8\">\n                    <div className=\"flex-1 pr-4\">\n                      <FormLabel>{label}</FormLabel>\n                      <div className=\"text-sm text-muted-foreground\">\n                        Enter as JSON array: [&quot;item1&quot;, &quot;item2&quot;]\n                        {columnInfo?.[fieldName]?.is_nullable && ' (leave empty for null)'}\n                      </div>\n\n                      {description && <FormDescription>{description}</FormDescription>}\n                      <FormMessage />\n                    </div>\n                    <div className=\"flex-1\">\n                      <FormControl>\n                        <Input\n                          placeholder={\n                            columnInfo?.[fieldName]?.is_nullable\n                              ? `[&quot;item1&quot;, &quot;item2&quot;] or leave empty for null`\n                              : `[&quot;item1&quot;, &quot;item2&quot;]`\n                          }\n                          {...field}\n                          value={\n                            field.value === null || field.value === undefined\n                              ? ''\n                              : Array.isArray(field.value)\n                                ? JSON.stringify(field.value)\n                                : String(field.value || '')\n                          }\n                          onChange={(e) => {\n                            const value = e.target.value\n                            if (value.trim() === '') {\n                              // Empty string means null (for nullable) or empty array (for non-nullable)\n                              field.onChange(null)\n                            } else {\n                              try {\n                                const parsed = JSON.parse(value)\n                                if (Array.isArray(parsed)) {\n                                  field.onChange(parsed)\n                                } else {\n                                  // If it's not an array, treat as invalid input\n                                  field.onChange(value)\n                                }\n                              } catch {\n                                // Invalid JSON, keep the string value to show error\n                                field.onChange(value)\n                              }\n                            }\n                          }}\n                        />\n                      </FormControl>\n                    </div>\n                  </div>\n                </FormItem>\n              )\n            default:\n              return <></>\n          }\n        }}\n      />\n    )\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)}>\n        {Object.keys(schema.shape).map((fieldName) =>\n          renderField(fieldName, schema.shape[fieldName])\n        )}\n        <div className=\"pt-6\">\n          <Button type=\"submit\" disabled={isLoading}>\n            {isLoading ? 'Saving...' : 'Save'}\n          </Button>\n        </div>\n      </form>\n    </Form>\n  )\n}\n",
+      "content": "'use client'\n\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { useEffect, useRef } from 'react'\nimport { useForm } from 'react-hook-form'\nimport type { z, ZodTypeAny } from 'zod'\n\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/components/ui/form'\nimport { Input } from '@/registry/default/components/ui/input'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/components/ui/select'\nimport { Switch } from '@/registry/default/components/ui/switch'\n\ninterface DynamicFormProps<T extends z.ZodRawShape = z.ZodRawShape> {\n  schema: z.ZodObject<T>\n  onSubmit: (data: z.infer<z.ZodObject<T>>) => void\n  isLoading?: boolean\n  initialValues?: Partial<z.infer<z.ZodObject<T>>>\n  labels?: Record<string, string | { label: string; options?: Record<string, string> }>\n  columnInfo?: Record<string, { data_type: string; is_nullable: boolean }>\n}\n\nconst getZodDef = (schema: ZodTypeAny): Record<string, any> =>\n  (schema as any)._def || (schema as any).def\n\nconst unwrapZodType = (fieldSchema: ZodTypeAny): ZodTypeAny => {\n  if (\n    !fieldSchema ||\n    typeof getZodDef(fieldSchema) !== 'object' ||\n    getZodDef(fieldSchema) === null\n  ) {\n    throw new Error(\n      `unwrapZodType received an invalid Zod schema object. Check the console for the problematic schema/key.`\n    )\n  }\n  let currentSchema = fieldSchema\n\n  // Support both old (typeName) and new (type) Zod formats\n  const getTypeName = (def: Record<string, any>) => def.typeName || def.type\n\n  while (\n    getTypeName(getZodDef(currentSchema)) === 'ZodOptional' ||\n    getTypeName(getZodDef(currentSchema)) === 'optional' ||\n    getTypeName(getZodDef(currentSchema)) === 'ZodDefault' ||\n    getTypeName(getZodDef(currentSchema)) === 'default' ||\n    getTypeName(getZodDef(currentSchema)) === 'ZodNullable' ||\n    getTypeName(getZodDef(currentSchema)) === 'nullable' ||\n    getTypeName(getZodDef(currentSchema)) === 'ZodEffects' ||\n    getTypeName(getZodDef(currentSchema)) === 'effects'\n  ) {\n    const typeName = getTypeName(getZodDef(currentSchema))\n    if (typeName === 'ZodEffects' || typeName === 'effects') {\n      // For ZodEffects, get the schema inside the effect\n      currentSchema = getZodDef(currentSchema).schema\n    } else {\n      currentSchema = getZodDef(currentSchema).innerType\n    }\n  }\n  return currentSchema\n}\n\nexport function DynamicForm<T extends z.ZodRawShape = z.ZodRawShape>({\n  schema,\n  onSubmit,\n  isLoading = false,\n  initialValues,\n  labels,\n  columnInfo,\n}: DynamicFormProps<T>) {\n  const isInitializingRef = useRef(true)\n\n  const defaultValues = Object.keys(schema.shape).reduce(\n    (acc, key) => {\n      const originalFieldSchema = schema.shape[key]\n      if (typeof originalFieldSchema === 'undefined') {\n        throw new Error(\n          `Schema error: schema.shape['${key}'] is undefined. Check schema definition.`\n        )\n      }\n\n      // Support both old (typeName) and new (type) Zod formats\n      const getTypeName = (def: Record<string, any>) => def.typeName || def.type\n\n      if (\n        getTypeName(getZodDef(originalFieldSchema)) === 'ZodDefault' ||\n        getTypeName(getZodDef(originalFieldSchema)) === 'default'\n      ) {\n        acc[key] = getZodDef(originalFieldSchema).defaultValue()\n        return acc\n      }\n\n      const baseType = unwrapZodType(originalFieldSchema)\n\n      switch (getTypeName(getZodDef(baseType))) {\n        case 'ZodString':\n        case 'string':\n          acc[key] = ''\n          break\n        case 'ZodBoolean':\n        case 'boolean':\n          acc[key] = false // Default optional booleans to false\n          break\n        case 'ZodEnum':\n        case 'enum':\n          // For enums, use the first enum value as default\n          const enumValues = getZodDef(baseType).values || []\n          acc[key] = enumValues.length > 0 ? enumValues[0] : ''\n          break\n        case 'ZodNumber':\n        case 'number':\n          acc[key] = 0 // Default optional numbers to 0\n          break\n        case 'ZodArray':\n        case 'array':\n          acc[key] = [] // Default arrays to empty array\n          break\n        default:\n          acc[key] = undefined // For other types, or if truly no default makes sense\n          break\n      }\n      return acc\n    },\n    {} as Record<string, any>\n  )\n\n  const form = useForm<z.infer<typeof schema>>({\n    resolver: zodResolver(schema),\n    defaultValues: defaultValues as any,\n  })\n\n  useEffect(() => {\n    if (initialValues) {\n      isInitializingRef.current = true\n      const schemaKeys = Object.keys(schema.shape)\n      const processedInitialValues = schemaKeys.reduce(\n        (acc, key) => {\n          const fieldDefFromSchema = schema.shape[key]\n          if (typeof fieldDefFromSchema === 'undefined') {\n            throw new Error(`Schema error in useEffect: schema.shape['${key}'] is undefined.`)\n          }\n          const value = initialValues.hasOwnProperty(key) ? initialValues[key] : undefined\n          const baseFieldType = unwrapZodType(fieldDefFromSchema)\n\n          // Support both old (typeName) and new (type) Zod formats\n          const getTypeName = (def: Record<string, any>) => def.typeName || def.type\n\n          const fieldTypeName = getTypeName(getZodDef(baseFieldType))\n          if (fieldTypeName === 'ZodBoolean' || fieldTypeName === 'boolean') {\n            acc[key] = !!value\n          } else if (fieldTypeName === 'ZodString' || fieldTypeName === 'string') {\n            acc[key] = value === null || value === undefined ? '' : String(value)\n          } else if (fieldTypeName === 'ZodEnum' || fieldTypeName === 'enum') {\n            const enumValues = getZodDef(baseFieldType).values || []\n            acc[key] =\n              value === null || value === undefined || !enumValues.includes(value)\n                ? enumValues[0] || ''\n                : String(value)\n          } else if (fieldTypeName === 'ZodNumber' || fieldTypeName === 'number') {\n            const num = Number(value)\n            acc[key] = isNaN(num) ? 0 : num\n          } else if (fieldTypeName === 'ZodArray' || fieldTypeName === 'array') {\n            // For arrays, the value should already be an array from the database\n            // Handle null values properly\n            if (Array.isArray(value)) {\n              acc[key] = value\n            } else if (value === null || value === undefined) {\n              acc[key] = []\n            } else if (typeof value === 'string' && value.startsWith('{') && value.endsWith('}')) {\n              // Parse PostgreSQL array format like {ONE,TWO} into JavaScript array\n              try {\n                const innerContent = value.slice(1, -1) // Remove { and }\n                if (innerContent.trim() === '') {\n                  acc[key] = []\n                } else {\n                  // Split by comma and trim whitespace\n                  acc[key] = innerContent.split(',').map((item: string) => item.trim())\n                }\n              } catch {\n                // If parsing fails, default to empty array\n                acc[key] = []\n              }\n            } else {\n              acc[key] = []\n            }\n          } else {\n            acc[key] = value\n          }\n          return acc\n        },\n        {} as Record<string, any>\n      )\n      form.reset(processedInitialValues as any)\n      setTimeout(() => {\n        isInitializingRef.current = false\n      }, 0)\n    } else {\n      isInitializingRef.current = false\n    }\n  }, [initialValues, form, schema])\n\n  const renderField = (fieldName: string, fieldSchema: ZodTypeAny) => {\n    const baseType = unwrapZodType(fieldSchema)\n    // Support both old (typeName) and new (type) Zod formats\n    const getTypeName = (def: Record<string, any>) => def.typeName || def.type\n    const typeName = getTypeName(getZodDef(baseType))\n    const description = fieldSchema.description\n\n    return (\n      <FormField\n        key={fieldName}\n        control={form.control}\n        name={fieldName as any}\n        render={({ field }) => {\n          const labelConfig = labels?.[fieldName]\n          const label =\n            typeof labelConfig === 'string' ? labelConfig : labelConfig?.label || fieldName\n          const typeDisplay = columnInfo?.[fieldName]?.data_type || ''\n          switch (typeName) {\n            case 'ZodString':\n            case 'string':\n              return (\n                <FormItem className=\"py-6 border-b\">\n                  <div className=\"w-full flex flex-col lg:flex-row lg:items-center justify-between w-full gap-4 lg:gap-8\">\n                    <div className=\"flex-1 pr-4\">\n                      <FormLabel>{label}</FormLabel>\n                      <div className=\"text-sm text-muted-foreground mt-1\">{typeDisplay}</div>\n                      {description && <FormDescription>{description}</FormDescription>}\n                      <FormMessage />\n                    </div>\n                    <div className=\"flex-1 lg:max-w-1/2\">\n                      <FormControl>\n                        <Input\n                          placeholder={`Enter your ${fieldName}`}\n                          {...field}\n                          value={String(field.value || '')}\n                        />\n                      </FormControl>\n                    </div>\n                  </div>\n                </FormItem>\n              )\n            case 'ZodNumber':\n            case 'number':\n              return (\n                <FormItem className=\"py-6 border-b\">\n                  <div className=\"w-full flex flex-col lg:flex-row lg:items-center justify-between w-full gap-4 lg:gap-8\">\n                    <div className=\"flex-1 pr-4\">\n                      <FormLabel>{label}</FormLabel>\n                      <div className=\"text-sm text-muted-foreground\">{typeDisplay}</div>\n                      {description && <FormDescription>{description}</FormDescription>}\n                      <FormMessage />\n                    </div>\n                    <div className=\"flex-1 lg:max-w-1/2\">\n                      <FormControl>\n                        <Input\n                          type=\"number\"\n                          placeholder={`Enter value for ${fieldName}`}\n                          {...field}\n                          value={String(field.value ?? '')}\n                          onChange={(e) => {\n                            const value = e.target.value\n                            const num = parseInt(value, 10)\n                            field.onChange(isNaN(num) ? undefined : num)\n                          }}\n                        />\n                      </FormControl>\n                    </div>\n                  </div>\n                </FormItem>\n              )\n            case 'ZodBoolean':\n            case 'boolean':\n              return (\n                <FormItem className=\"py-6 border-b flex flex-row items-center justify-between gap-8\">\n                  <div>\n                    <FormLabel>{label}</FormLabel>\n                    <div className=\"text-sm text-muted-foreground\">{typeDisplay}</div>\n                    {description && <FormDescription>{description}</FormDescription>}\n                    <FormMessage />\n                  </div>\n                  <FormControl>\n                    <Switch checked={!!field.value} onCheckedChange={field.onChange} />\n                  </FormControl>\n                </FormItem>\n              )\n            case 'ZodEnum':\n            case 'enum':\n              const options = getZodDef(baseType).values\n              const optionLabels = typeof labelConfig === 'object' ? labelConfig.options : undefined\n              return (\n                <FormItem className=\"py-6 border-b\">\n                  <div className=\"w-full flex flex-col lg:flex-row lg:items-center justify-between w-full gap-4 lg:gap-8\">\n                    <div className=\"flex-1 pr-4\">\n                      <FormLabel>{label}</FormLabel>\n                      <div className=\"text-sm text-muted-foreground\">{typeDisplay}</div>\n                      {description && <FormDescription>{description}</FormDescription>}\n                      <FormMessage />\n                    </div>\n                    <div className=\"flex-1 lg:max-w-1/2\">\n                      <Select\n                        onValueChange={(value) => {\n                          if (!isInitializingRef.current) {\n                            field.onChange(value)\n                          }\n                        }}\n                        value={String(field.value || '')}\n                      >\n                        <FormControl>\n                          <SelectTrigger>\n                            <SelectValue placeholder={`Select a ${fieldName}`} />\n                          </SelectTrigger>\n                        </FormControl>\n                        <SelectContent>\n                          {options.map((option: string) => (\n                            <SelectItem key={option} value={option}>\n                              {optionLabels?.[option] || option}\n                            </SelectItem>\n                          ))}\n                        </SelectContent>\n                      </Select>\n                    </div>\n                  </div>\n                </FormItem>\n              )\n            case 'ZodArray':\n            case 'array':\n              return (\n                <FormItem className=\"py-6 border-b\">\n                  <div className=\"flex flex-row items-center justify-between w-full gap-8\">\n                    <div className=\"flex-1 pr-4\">\n                      <FormLabel>{label}</FormLabel>\n                      <div className=\"text-sm text-muted-foreground\">\n                        Enter as JSON array: [&quot;item1&quot;, &quot;item2&quot;]\n                        {columnInfo?.[fieldName]?.is_nullable && ' (leave empty for null)'}\n                      </div>\n\n                      {description && <FormDescription>{description}</FormDescription>}\n                      <FormMessage />\n                    </div>\n                    <div className=\"flex-1\">\n                      <FormControl>\n                        <Input\n                          placeholder={\n                            columnInfo?.[fieldName]?.is_nullable\n                              ? `[&quot;item1&quot;, &quot;item2&quot;] or leave empty for null`\n                              : `[&quot;item1&quot;, &quot;item2&quot;]`\n                          }\n                          {...field}\n                          value={\n                            field.value === null || field.value === undefined\n                              ? ''\n                              : Array.isArray(field.value)\n                                ? JSON.stringify(field.value)\n                                : String(field.value || '')\n                          }\n                          onChange={(e) => {\n                            const value = e.target.value\n                            if (value.trim() === '') {\n                              // Empty string means null (for nullable) or empty array (for non-nullable)\n                              field.onChange(null)\n                            } else {\n                              try {\n                                const parsed = JSON.parse(value)\n                                if (Array.isArray(parsed)) {\n                                  field.onChange(parsed)\n                                } else {\n                                  // If it's not an array, treat as invalid input\n                                  field.onChange(value)\n                                }\n                              } catch {\n                                // Invalid JSON, keep the string value to show error\n                                field.onChange(value)\n                              }\n                            }\n                          }}\n                        />\n                      </FormControl>\n                    </div>\n                  </div>\n                </FormItem>\n              )\n            default:\n              return <></>\n          }\n        }}\n      />\n    )\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)}>\n        {Object.keys(schema.shape).map((fieldName) =>\n          renderField(fieldName, schema.shape[fieldName])\n        )}\n        <div className=\"pt-6\">\n          <Button type=\"submit\" disabled={isLoading}>\n            {isLoading ? 'Saving...' : 'Save'}\n          </Button>\n        </div>\n      </form>\n    </Form>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -66,97 +66,97 @@
     },
     {
       "path": "registry/default/platform/platform-kit-nextjs/components/results-table.tsx",
-      "content": "'use client'\n\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/components/ui/table'\nimport { cn } from '@/lib/utils'\n\ninterface ResultsTableProps {\n  data: any[]\n  onRowClick?: (row: any) => void\n}\n\nexport function ResultsTable({ data, onRowClick }: ResultsTableProps) {\n  if (!data || data.length === 0) {\n    return <p className=\"p-4 text-center\">The query returned no results.</p>\n  }\n\n  const headers = Object.keys(data[0])\n\n  return (\n    <div className=\"overflow-auto\">\n      <Table>\n        <TableHeader>\n          <TableRow className=\"hover:bg-transparent\">\n            {headers.map((header) => (\n              <TableHead className=\"first:pl-6 lg:first:pl-8 last:pr-6 lg:last:pr-8\" key={header}>\n                {header}\n              </TableHead>\n            ))}\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {data.map((row, rowIndex) => (\n            <TableRow\n              key={rowIndex}\n              onClick={() => onRowClick?.(row)}\n              className={cn(onRowClick && 'cursor-pointer hover:bg-muted/50 group')}\n            >\n              {headers.map((header) => (\n                <TableCell\n                  className=\"first:pl-6 lg:first:pl-8 last:pr-6 lg:last:pr-8 text-xs text-muted-foreground group-hover:text-foreground min-w-[8rem]\"\n                  key={`${rowIndex}-${header}`}\n                >\n                  <div className=\"text-xs font-mono w-fit max-w-96 truncate\">\n                    {JSON.stringify(row[header]).replace(/^\"|\"$/g, '')}\n                  </div>\n                </TableCell>\n              ))}\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </div>\n  )\n}\n",
+      "content": "'use client'\n\nimport { cn } from '@/lib/utils'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/components/ui/table'\n\ninterface ResultsTableProps {\n  data: any[]\n  onRowClick?: (row: any) => void\n}\n\nexport function ResultsTable({ data, onRowClick }: ResultsTableProps) {\n  if (!data || data.length === 0) {\n    return <p className=\"p-4 text-center\">The query returned no results.</p>\n  }\n\n  const headers = Object.keys(data[0])\n\n  return (\n    <div className=\"overflow-auto\">\n      <Table>\n        <TableHeader>\n          <TableRow className=\"hover:bg-transparent\">\n            {headers.map((header) => (\n              <TableHead className=\"first:pl-6 lg:first:pl-8 last:pr-6 lg:last:pr-8\" key={header}>\n                {header}\n              </TableHead>\n            ))}\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {data.map((row, rowIndex) => (\n            <TableRow\n              key={rowIndex}\n              onClick={() => onRowClick?.(row)}\n              className={cn(onRowClick && 'cursor-pointer hover:bg-muted/50 group')}\n            >\n              {headers.map((header) => (\n                <TableCell\n                  className=\"first:pl-6 lg:first:pl-8 last:pr-6 lg:last:pr-8 text-xs text-muted-foreground group-hover:text-foreground min-w-[8rem]\"\n                  key={`${rowIndex}-${header}`}\n                >\n                  <div className=\"text-xs font-mono w-fit max-w-96 truncate\">\n                    {JSON.stringify(row[header]).replace(/^\"|\"$/g, '')}\n                  </div>\n                </TableCell>\n              ))}\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/default/platform/platform-kit-nextjs/components/sql-editor.tsx",
-      "content": "'use client'\n\nimport { useState, useEffect, useCallback, useMemo } from 'react'\nimport { Editor } from '@monaco-editor/react'\nimport { Button } from '@/registry/default/components/ui/button'\nimport { ResultsTable } from '@/registry/default/platform/platform-kit-nextjs/components/results-table'\nimport { Label } from '@/registry/default/components/ui/label'\nimport { useRunQuery } from '@/registry/default/platform/platform-kit-nextjs/hooks/use-run-query'\nimport {\n  ArrowUp,\n  Loader2,\n  BarChart as BarChartIcon,\n  Wand,\n  FileText,\n  AlertTriangle,\n} from 'lucide-react'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Skeleton } from '@/registry/default/components/ui/skeleton'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/components/ui/popover'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/components/ui/select'\nimport { Bar, BarChart, CartesianGrid, XAxis, YAxis } from 'recharts'\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from '@/registry/default/components/ui/chart'\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/default/components/ui/toggle-group'\nimport { Switch } from '@/registry/default/components/ui/switch'\nimport { Alert, AlertDescription, AlertTitle } from '@/registry/default/components/ui/alert'\n\ninterface SqlEditorProps {\n  projectRef: string\n  initialSql?: string\n  queryKey?: any\n  label?: string\n  onResults?: (data: any[] | undefined) => void\n  onRowClick?: (row: any, queryKey?: any) => void\n  hideSql?: boolean\n  readOnly?: boolean\n  runAutomatically?: boolean\n  refetch?: number\n  initialNaturalLanguageMode?: boolean\n  hideChartOption?: boolean\n}\n\nexport function SqlEditor({\n  projectRef,\n  initialSql,\n  queryKey,\n  onResults,\n  onRowClick,\n  label = 'Query your data',\n  hideSql = false,\n  readOnly = false,\n  runAutomatically = false,\n  refetch,\n  initialNaturalLanguageMode = false,\n  hideChartOption = false,\n}: SqlEditorProps) {\n  const [sql, setSql] = useState(initialSql || '')\n  const [isSqlVisible, setIsSqlVisible] = useState(!hideSql)\n  const [isNaturalLanguageMode, setIsNaturalLanguageMode] = useState(\n    process.env.NEXT_PUBLIC_ENABLE_AI_QUERIES === 'true' && initialNaturalLanguageMode\n  )\n  const [naturalLanguageQuery, setNaturalLanguageQuery] = useState('')\n  const { mutate: runQuery, data, isPending, error } = useRunQuery()\n  const [isGeneratingSql, setIsGeneratingSql] = useState(false)\n  const [aiError, setAiError] = useState<string | null>(null)\n  const [isChartVisible, setIsChartVisible] = useState(false)\n  const [xAxisColumn, setXAxisColumn] = useState<string | null>(null)\n  const [yAxisColumn, setYAxisColumn] = useState<string | null>(null)\n\n  const columns = useMemo(() => {\n    if (!data || data.length === 0) return []\n    return Object.keys(data[0])\n  }, [data])\n\n  useEffect(() => {\n    if (initialSql) {\n      setSql(initialSql)\n    }\n  }, [initialSql])\n\n  const handleRunNaturalLanguageQuery = async () => {\n    if (!naturalLanguageQuery) return\n\n    setIsGeneratingSql(true)\n    setAiError(null)\n    try {\n      const response = await fetch('/api/ai/sql', {\n        method: 'POST',\n        headers: {\n          'Content-Type': 'application/json',\n        },\n        body: JSON.stringify({\n          prompt: naturalLanguageQuery,\n          projectRef,\n        }),\n      })\n\n      if (!response.ok) {\n        const errorData = await response.json()\n        throw new Error(errorData.message || 'Failed to generate SQL')\n      }\n\n      const { sql: generatedSql } = await response.json()\n      setSql(generatedSql)\n      runQuery({ projectRef, query: generatedSql, readOnly: true })\n    } catch (error: any) {\n      console.error(error)\n      setAiError(error.message)\n    } finally {\n      setIsGeneratingSql(false)\n    }\n  }\n\n  const handleRunQuery = useCallback(() => {\n    if (sql) {\n      runQuery({ projectRef, query: sql, readOnly: true })\n    }\n  }, [sql, projectRef, runQuery])\n\n  useEffect(() => {\n    setIsSqlVisible(!hideSql)\n  }, [hideSql])\n\n  useEffect(() => {\n    if (runAutomatically && initialSql) {\n      runQuery({ projectRef, query: initialSql, readOnly: true })\n    }\n  }, [runAutomatically, initialSql, projectRef, runQuery])\n\n  useEffect(() => {\n    if (refetch && refetch > 0) {\n      handleRunQuery()\n    }\n  }, [refetch, handleRunQuery])\n\n  useEffect(() => {\n    if (onResults) {\n      onResults(data)\n    }\n  }, [data, onResults])\n\n  useEffect(() => {\n    const noResults = !data || (Array.isArray(data) && data.length === 0)\n    if (noResults && !isSqlVisible && !isNaturalLanguageMode && !readOnly && !isPending) {\n      setIsSqlVisible(true)\n    }\n  }, [data, isSqlVisible, isNaturalLanguageMode])\n\n  const serverErrorMessage = (error as any)?.response?.data?.message || ''\n  const isReadOnlyError =\n    serverErrorMessage.includes('permission denied') || serverErrorMessage.includes('42501')\n  const customReadOnlyError = \"You can't directly alter your database schema, use chat instead\"\n\n  // Build the toggle-group selection based on current UI state\n  const toggleValues = useMemo(() => {\n    const values: string[] = []\n    if (isNaturalLanguageMode) values.push('chat')\n    if (isSqlVisible) values.push('sql')\n    if (!hideChartOption && isChartVisible) values.push('chart')\n    return values\n  }, [isNaturalLanguageMode, isSqlVisible, isChartVisible, hideChartOption])\n\n  const handleToggleGroupChange = (values: string[]) => {\n    setIsNaturalLanguageMode(values.includes('chat'))\n    setIsSqlVisible(values.includes('sql'))\n    if (!hideChartOption) {\n      setIsChartVisible(values.includes('chart'))\n    }\n  }\n\n  return (\n    <div>\n      <div className=\"px-6 pt-4 lg:px-8 lg:pt-8\">\n        <div className=\"flex items-center gap-4 mb-4    \">\n          <h2 className=\"font-semibold flex-1\">{label}</h2>\n          <ToggleGroup\n            type=\"multiple\"\n            size=\"sm\"\n            value={toggleValues}\n            onValueChange={handleToggleGroupChange}\n            className=\"gap-1\"\n          >\n            {process.env.NEXT_PUBLIC_ENABLE_AI_QUERIES === 'true' && (\n              <ToggleGroupItem value=\"chat\" aria-label=\"Chat\">\n                <Wand className=\"h-4 w-4\" />\n              </ToggleGroupItem>\n            )}\n            <ToggleGroupItem value=\"sql\" aria-label=\"SQL\">\n              <FileText className=\"h-4 w-4\" />\n            </ToggleGroupItem>\n            {!hideChartOption && (\n              <Popover>\n                <PopoverTrigger asChild>\n                  <ToggleGroupItem value=\"chart\" aria-label=\"Chart\">\n                    <BarChartIcon className=\"h-4 w-4\" />\n                  </ToggleGroupItem>\n                </PopoverTrigger>\n                <PopoverContent className=\"w-80\">\n                  <div className=\"grid gap-4\">\n                    <div className=\"grid gap-2\">\n                      <div className=\"flex items-center space-x-2\">\n                        <div className=\"flex-1\">\n                          <Label className=\"flex-1 mb-2 block\">Show Chart</Label>\n                          <p className=\"text-xs text-muted-foreground\">\n                            Visualize your data with a chart.\n                          </p>\n                        </div>\n                        <Switch\n                          id=\"show-chart\"\n                          size=\"sm\"\n                          className=\"mb-0\"\n                          checked={isChartVisible}\n                          onCheckedChange={setIsChartVisible}\n                        />\n                      </div>\n                      {isChartVisible && (\n                        <div className=\"mt-2\">\n                          <div className=\"grid grid-cols-3 items-center gap-4 mb-2\">\n                            <Label htmlFor=\"x-axis\">X-Axis</Label>\n                            <Select\n                              onValueChange={setXAxisColumn}\n                              defaultValue={xAxisColumn || undefined}\n                            >\n                              <SelectTrigger className=\"col-span-2 h-8\">\n                                <SelectValue placeholder=\"Select column\" />\n                              </SelectTrigger>\n                              <SelectContent>\n                                {columns.map((col) => (\n                                  <SelectItem key={col} value={col}>\n                                    {col}\n                                  </SelectItem>\n                                ))}\n                              </SelectContent>\n                            </Select>\n                          </div>\n                          <div className=\"grid grid-cols-3 items-center gap-4 mb-2\">\n                            <Label htmlFor=\"y-axis\">Y-Axis</Label>\n                            <Select\n                              onValueChange={setYAxisColumn}\n                              defaultValue={yAxisColumn || undefined}\n                            >\n                              <SelectTrigger className=\"col-span-2 h-8\">\n                                <SelectValue placeholder=\"Select column\" />\n                              </SelectTrigger>\n                              <SelectContent>\n                                {columns.map((col) => (\n                                  <SelectItem key={col} value={col}>\n                                    {col}\n                                  </SelectItem>\n                                ))}\n                              </SelectContent>\n                            </Select>\n                          </div>\n                        </div>\n                      )}\n                    </div>\n                  </div>\n                </PopoverContent>\n              </Popover>\n            )}\n          </ToggleGroup>\n        </div>\n        <div>\n          {isNaturalLanguageMode && (\n            <div className=\"relative mb-4\">\n              <Wand\n                strokeWidth={1.5}\n                size={16}\n                className=\"absolute left-4 top-1/2 -translate-y-1/2\"\n              />\n              <Input\n                placeholder=\"e.g. Show me all users who signed up in the last 7 days\"\n                value={naturalLanguageQuery}\n                onChange={(e) => setNaturalLanguageQuery(e.target.value)}\n                onKeyDown={(e) => {\n                  if (e.key === 'Enter' && !e.shiftKey) {\n                    e.preventDefault()\n                    handleRunNaturalLanguageQuery()\n                  }\n                }}\n                className=\"w-full px-10\"\n              />\n              <Button\n                onClick={handleRunNaturalLanguageQuery}\n                disabled={isGeneratingSql || isPending}\n                className=\"h-7 w-7 rounded-full p-0 shrink-0 absolute right-1 top-1/2 -translate-y-1/2\"\n              >\n                {isGeneratingSql ? (\n                  <Loader2 size={16} className=\"animate-spin\" />\n                ) : isPending ? (\n                  <Loader2 size={16} className=\"animate-spin\" />\n                ) : (\n                  <ArrowUp size={16} />\n                )}\n              </Button>\n            </div>\n          )}\n          {isSqlVisible && (\n            <div className=\"border-t border-b bg-muted overflow-hidden -mx-6 lg:-mx-8 mt-4 relative\">\n              <Editor\n                height=\"200px\"\n                language=\"sql\"\n                value={sql}\n                onChange={(value) => setSql(value || '')}\n                theme=\"vs-dark\"\n                className=\"bg-transparent\"\n                options={{\n                  minimap: { enabled: false },\n                  fontSize: 14,\n                  readOnly,\n                  padding: {\n                    top: 24,\n                    bottom: 24,\n                  },\n                }}\n              />\n              <Button\n                size=\"sm\"\n                onClick={handleRunQuery}\n                disabled={isPending}\n                className=\"absolute bottom-4 right-4\"\n              >\n                {isPending ? 'Running...' : 'Run Query'}\n              </Button>\n            </div>\n          )}\n        </div>\n      </div>\n      {isPending && (\n        <div className=\"space-y-2 p-4 px-6 lg:px-8\">\n          <Skeleton className=\"h-6 w-full\" />\n          <Skeleton className=\"h-6 w-full\" />\n          <Skeleton className=\"h-6 w-full\" />\n          <Skeleton className=\"h-6 w-full\" />\n          <Skeleton className=\"h-6 w-full\" />\n          <Skeleton className=\"h-6 w-full\" />\n        </div>\n      )}\n      {aiError && (\n        <div className=\"px-6 lg:px-8 py-4\">\n          <Alert variant=\"destructive\">\n            <AlertTriangle className=\"h-4 w-4\" />\n            <AlertTitle>Error generating SQL</AlertTitle>\n            <AlertDescription>{aiError}</AlertDescription>\n          </Alert>\n        </div>\n      )}\n      {error && (\n        <div className=\"px-6 lg:px-8 py-4\">\n          <Alert variant=\"destructive\">\n            <AlertTriangle className=\"h-4 w-4\" />\n            <AlertTitle>Query Error</AlertTitle>\n            <AlertDescription>\n              {isReadOnlyError\n                ? customReadOnlyError\n                : serverErrorMessage || (error as Error)?.message || 'An unexpected error occurred'}\n            </AlertDescription>\n          </Alert>\n        </div>\n      )}\n\n      {!hideChartOption && data && isChartVisible && xAxisColumn && yAxisColumn && (\n        <div className=\"px-8 mt-8 mb-4\">\n          <QueryResultChart data={data} xAxis={xAxisColumn} yAxis={yAxisColumn} />\n        </div>\n      )}\n\n      {data && (\n        <div>\n          <ResultsTable data={data} onRowClick={(row) => onRowClick?.(row, queryKey)} />\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction QueryResultChart({ data, xAxis, yAxis }: { data: any[]; xAxis: string; yAxis: string }) {\n  const chartConfig = {\n    [yAxis]: {\n      label: yAxis,\n      color: 'var(--chart-1)',\n    },\n  } satisfies ChartConfig\n\n  return (\n    <ChartContainer config={chartConfig} className=\"aspect-auto h-[250px] w-full\">\n      <BarChart\n        accessibilityLayer\n        data={data}\n        margin={{\n          left: -24,\n          right: 12,\n        }}\n      >\n        <CartesianGrid vertical={false} />\n        <XAxis dataKey={xAxis} tickLine={false} axisLine={false} tickMargin={8} minTickGap={32} />\n        <YAxis\n          dataKey={yAxis}\n          tickLine={false}\n          axisLine={false}\n          tickMargin={8}\n          tickCount={5}\n          allowDecimals={false}\n        />\n        <ChartTooltip content={<ChartTooltipContent className=\"w-[150px]\" indicator=\"dot\" />} />\n        <Bar dataKey={yAxis} fill={`var(--color-${yAxis})`} />\n      </BarChart>\n    </ChartContainer>\n  )\n}\n",
+      "content": "'use client'\n\nimport { Editor } from '@monaco-editor/react'\nimport {\n  AlertTriangle,\n  ArrowUp,\n  BarChart as BarChartIcon,\n  FileText,\n  Loader2,\n  Wand,\n} from 'lucide-react'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\nimport { Bar, BarChart, CartesianGrid, XAxis, YAxis } from 'recharts'\n\nimport { Alert, AlertDescription, AlertTitle } from '@/registry/default/components/ui/alert'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from '@/registry/default/components/ui/chart'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Label } from '@/registry/default/components/ui/label'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/components/ui/popover'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/components/ui/select'\nimport { Skeleton } from '@/registry/default/components/ui/skeleton'\nimport { Switch } from '@/registry/default/components/ui/switch'\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/default/components/ui/toggle-group'\nimport { ResultsTable } from '@/registry/default/platform/platform-kit-nextjs/components/results-table'\nimport { useRunQuery } from '@/registry/default/platform/platform-kit-nextjs/hooks/use-run-query'\n\ninterface SqlEditorProps {\n  projectRef: string\n  initialSql?: string\n  queryKey?: any\n  label?: string\n  onResults?: (data: any[] | undefined) => void\n  onRowClick?: (row: any, queryKey?: any) => void\n  hideSql?: boolean\n  readOnly?: boolean\n  runAutomatically?: boolean\n  refetch?: number\n  initialNaturalLanguageMode?: boolean\n  hideChartOption?: boolean\n}\n\nexport function SqlEditor({\n  projectRef,\n  initialSql,\n  queryKey,\n  onResults,\n  onRowClick,\n  label = 'Query your data',\n  hideSql = false,\n  readOnly = false,\n  runAutomatically = false,\n  refetch,\n  initialNaturalLanguageMode = false,\n  hideChartOption = false,\n}: SqlEditorProps) {\n  const [sql, setSql] = useState(initialSql || '')\n  const [isSqlVisible, setIsSqlVisible] = useState(!hideSql)\n  const [isNaturalLanguageMode, setIsNaturalLanguageMode] = useState(\n    process.env.NEXT_PUBLIC_ENABLE_AI_QUERIES === 'true' && initialNaturalLanguageMode\n  )\n  const [naturalLanguageQuery, setNaturalLanguageQuery] = useState('')\n  const { mutate: runQuery, data, isPending, error } = useRunQuery()\n  const [isGeneratingSql, setIsGeneratingSql] = useState(false)\n  const [aiError, setAiError] = useState<string | null>(null)\n  const [isChartVisible, setIsChartVisible] = useState(false)\n  const [xAxisColumn, setXAxisColumn] = useState<string | null>(null)\n  const [yAxisColumn, setYAxisColumn] = useState<string | null>(null)\n\n  const columns = useMemo(() => {\n    if (!data || data.length === 0) return []\n    return Object.keys(data[0])\n  }, [data])\n\n  useEffect(() => {\n    if (initialSql) {\n      setSql(initialSql)\n    }\n  }, [initialSql])\n\n  const handleRunNaturalLanguageQuery = async () => {\n    if (!naturalLanguageQuery) return\n\n    setIsGeneratingSql(true)\n    setAiError(null)\n    try {\n      const response = await fetch('/api/ai/sql', {\n        method: 'POST',\n        headers: {\n          'Content-Type': 'application/json',\n        },\n        body: JSON.stringify({\n          prompt: naturalLanguageQuery,\n          projectRef,\n        }),\n      })\n\n      if (!response.ok) {\n        const errorData = await response.json()\n        throw new Error(errorData.message || 'Failed to generate SQL')\n      }\n\n      const { sql: generatedSql } = await response.json()\n      setSql(generatedSql)\n      runQuery({ projectRef, query: generatedSql, readOnly: true })\n    } catch (error: any) {\n      console.error(error)\n      setAiError(error.message)\n    } finally {\n      setIsGeneratingSql(false)\n    }\n  }\n\n  const handleRunQuery = useCallback(() => {\n    if (sql) {\n      runQuery({ projectRef, query: sql, readOnly: true })\n    }\n  }, [sql, projectRef, runQuery])\n\n  useEffect(() => {\n    setIsSqlVisible(!hideSql)\n  }, [hideSql])\n\n  useEffect(() => {\n    if (runAutomatically && initialSql) {\n      runQuery({ projectRef, query: initialSql, readOnly: true })\n    }\n  }, [runAutomatically, initialSql, projectRef, runQuery])\n\n  useEffect(() => {\n    if (refetch && refetch > 0) {\n      handleRunQuery()\n    }\n  }, [refetch, handleRunQuery])\n\n  useEffect(() => {\n    if (onResults) {\n      onResults(data)\n    }\n  }, [data, onResults])\n\n  useEffect(() => {\n    const noResults = !data || (Array.isArray(data) && data.length === 0)\n    if (noResults && !isSqlVisible && !isNaturalLanguageMode && !readOnly && !isPending) {\n      setIsSqlVisible(true)\n    }\n  }, [data, isSqlVisible, isNaturalLanguageMode])\n\n  const serverErrorMessage = (error as any)?.response?.data?.message || ''\n  const isReadOnlyError =\n    serverErrorMessage.includes('permission denied') || serverErrorMessage.includes('42501')\n  const customReadOnlyError = \"You can't directly alter your database schema, use chat instead\"\n\n  // Build the toggle-group selection based on current UI state\n  const toggleValues = useMemo(() => {\n    const values: string[] = []\n    if (isNaturalLanguageMode) values.push('chat')\n    if (isSqlVisible) values.push('sql')\n    if (!hideChartOption && isChartVisible) values.push('chart')\n    return values\n  }, [isNaturalLanguageMode, isSqlVisible, isChartVisible, hideChartOption])\n\n  const handleToggleGroupChange = (values: string[]) => {\n    setIsNaturalLanguageMode(values.includes('chat'))\n    setIsSqlVisible(values.includes('sql'))\n    if (!hideChartOption) {\n      setIsChartVisible(values.includes('chart'))\n    }\n  }\n\n  return (\n    <div>\n      <div className=\"px-6 pt-4 lg:px-8 lg:pt-8\">\n        <div className=\"flex items-center gap-4 mb-4    \">\n          <h2 className=\"font-semibold flex-1\">{label}</h2>\n          <ToggleGroup\n            type=\"multiple\"\n            size=\"sm\"\n            value={toggleValues}\n            onValueChange={handleToggleGroupChange}\n            className=\"gap-1\"\n          >\n            {process.env.NEXT_PUBLIC_ENABLE_AI_QUERIES === 'true' && (\n              <ToggleGroupItem value=\"chat\" aria-label=\"Chat\">\n                <Wand className=\"h-4 w-4\" />\n              </ToggleGroupItem>\n            )}\n            <ToggleGroupItem value=\"sql\" aria-label=\"SQL\">\n              <FileText className=\"h-4 w-4\" />\n            </ToggleGroupItem>\n            {!hideChartOption && (\n              <Popover>\n                <PopoverTrigger asChild>\n                  <ToggleGroupItem value=\"chart\" aria-label=\"Chart\">\n                    <BarChartIcon className=\"h-4 w-4\" />\n                  </ToggleGroupItem>\n                </PopoverTrigger>\n                <PopoverContent className=\"w-80\">\n                  <div className=\"grid gap-4\">\n                    <div className=\"grid gap-2\">\n                      <div className=\"flex items-center space-x-2\">\n                        <div className=\"flex-1\">\n                          <Label className=\"flex-1 mb-2 block\">Show Chart</Label>\n                          <p className=\"text-xs text-muted-foreground\">\n                            Visualize your data with a chart.\n                          </p>\n                        </div>\n                        <Switch\n                          id=\"show-chart\"\n                          size=\"sm\"\n                          className=\"mb-0\"\n                          checked={isChartVisible}\n                          onCheckedChange={setIsChartVisible}\n                        />\n                      </div>\n                      {isChartVisible && (\n                        <div className=\"mt-2\">\n                          <div className=\"grid grid-cols-3 items-center gap-4 mb-2\">\n                            <Label htmlFor=\"x-axis\">X-Axis</Label>\n                            <Select\n                              onValueChange={setXAxisColumn}\n                              defaultValue={xAxisColumn || undefined}\n                            >\n                              <SelectTrigger className=\"col-span-2 h-8\">\n                                <SelectValue placeholder=\"Select column\" />\n                              </SelectTrigger>\n                              <SelectContent>\n                                {columns.map((col) => (\n                                  <SelectItem key={col} value={col}>\n                                    {col}\n                                  </SelectItem>\n                                ))}\n                              </SelectContent>\n                            </Select>\n                          </div>\n                          <div className=\"grid grid-cols-3 items-center gap-4 mb-2\">\n                            <Label htmlFor=\"y-axis\">Y-Axis</Label>\n                            <Select\n                              onValueChange={setYAxisColumn}\n                              defaultValue={yAxisColumn || undefined}\n                            >\n                              <SelectTrigger className=\"col-span-2 h-8\">\n                                <SelectValue placeholder=\"Select column\" />\n                              </SelectTrigger>\n                              <SelectContent>\n                                {columns.map((col) => (\n                                  <SelectItem key={col} value={col}>\n                                    {col}\n                                  </SelectItem>\n                                ))}\n                              </SelectContent>\n                            </Select>\n                          </div>\n                        </div>\n                      )}\n                    </div>\n                  </div>\n                </PopoverContent>\n              </Popover>\n            )}\n          </ToggleGroup>\n        </div>\n        <div>\n          {isNaturalLanguageMode && (\n            <div className=\"relative mb-4\">\n              <Wand\n                strokeWidth={1.5}\n                size={16}\n                className=\"absolute left-4 top-1/2 -translate-y-1/2\"\n              />\n              <Input\n                placeholder=\"e.g. Show me all users who signed up in the last 7 days\"\n                value={naturalLanguageQuery}\n                onChange={(e) => setNaturalLanguageQuery(e.target.value)}\n                onKeyDown={(e) => {\n                  if (e.key === 'Enter' && !e.shiftKey) {\n                    e.preventDefault()\n                    handleRunNaturalLanguageQuery()\n                  }\n                }}\n                className=\"w-full px-10\"\n              />\n              <Button\n                onClick={handleRunNaturalLanguageQuery}\n                disabled={isGeneratingSql || isPending}\n                className=\"h-7 w-7 rounded-full p-0 shrink-0 absolute right-1 top-1/2 -translate-y-1/2\"\n              >\n                {isGeneratingSql ? (\n                  <Loader2 size={16} className=\"animate-spin\" />\n                ) : isPending ? (\n                  <Loader2 size={16} className=\"animate-spin\" />\n                ) : (\n                  <ArrowUp size={16} />\n                )}\n              </Button>\n            </div>\n          )}\n          {isSqlVisible && (\n            <div className=\"border-t border-b bg-muted overflow-hidden -mx-6 lg:-mx-8 mt-4 relative\">\n              <Editor\n                height=\"200px\"\n                language=\"sql\"\n                value={sql}\n                onChange={(value) => setSql(value || '')}\n                theme=\"vs-dark\"\n                className=\"bg-transparent\"\n                options={{\n                  minimap: { enabled: false },\n                  fontSize: 14,\n                  readOnly,\n                  padding: {\n                    top: 24,\n                    bottom: 24,\n                  },\n                }}\n              />\n              <Button\n                size=\"sm\"\n                onClick={handleRunQuery}\n                disabled={isPending}\n                className=\"absolute bottom-4 right-4\"\n              >\n                {isPending ? 'Running...' : 'Run Query'}\n              </Button>\n            </div>\n          )}\n        </div>\n      </div>\n      {isPending && (\n        <div className=\"space-y-2 p-4 px-6 lg:px-8\">\n          <Skeleton className=\"h-6 w-full\" />\n          <Skeleton className=\"h-6 w-full\" />\n          <Skeleton className=\"h-6 w-full\" />\n          <Skeleton className=\"h-6 w-full\" />\n          <Skeleton className=\"h-6 w-full\" />\n          <Skeleton className=\"h-6 w-full\" />\n        </div>\n      )}\n      {aiError && (\n        <div className=\"px-6 lg:px-8 py-4\">\n          <Alert variant=\"destructive\">\n            <AlertTriangle className=\"h-4 w-4\" />\n            <AlertTitle>Error generating SQL</AlertTitle>\n            <AlertDescription>{aiError}</AlertDescription>\n          </Alert>\n        </div>\n      )}\n      {error && (\n        <div className=\"px-6 lg:px-8 py-4\">\n          <Alert variant=\"destructive\">\n            <AlertTriangle className=\"h-4 w-4\" />\n            <AlertTitle>Query Error</AlertTitle>\n            <AlertDescription>\n              {isReadOnlyError\n                ? customReadOnlyError\n                : serverErrorMessage || (error as Error)?.message || 'An unexpected error occurred'}\n            </AlertDescription>\n          </Alert>\n        </div>\n      )}\n\n      {!hideChartOption && data && isChartVisible && xAxisColumn && yAxisColumn && (\n        <div className=\"px-8 mt-8 mb-4\">\n          <QueryResultChart data={data} xAxis={xAxisColumn} yAxis={yAxisColumn} />\n        </div>\n      )}\n\n      {data && (\n        <div>\n          <ResultsTable data={data} onRowClick={(row) => onRowClick?.(row, queryKey)} />\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction QueryResultChart({ data, xAxis, yAxis }: { data: any[]; xAxis: string; yAxis: string }) {\n  const chartConfig = {\n    [yAxis]: {\n      label: yAxis,\n      color: 'var(--chart-1)',\n    },\n  } satisfies ChartConfig\n\n  return (\n    <ChartContainer config={chartConfig} className=\"aspect-auto h-[250px] w-full\">\n      <BarChart\n        accessibilityLayer\n        data={data}\n        margin={{\n          left: -24,\n          right: 12,\n        }}\n      >\n        <CartesianGrid vertical={false} />\n        <XAxis dataKey={xAxis} tickLine={false} axisLine={false} tickMargin={8} minTickGap={32} />\n        <YAxis\n          dataKey={yAxis}\n          tickLine={false}\n          axisLine={false}\n          tickMargin={8}\n          tickCount={5}\n          allowDecimals={false}\n        />\n        <ChartTooltip content={<ChartTooltipContent className=\"w-[150px]\" indicator=\"dot\" />} />\n        <Bar dataKey={yAxis} fill={`var(--color-${yAxis})`} />\n      </BarChart>\n    </ChartContainer>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/default/platform/platform-kit-nextjs/components/supabase-manager/auth.tsx",
-      "content": "'use client'\n\nimport { DynamicForm } from '@/registry/default/platform/platform-kit-nextjs/components/dynamic-form'\nimport {\n  useGetAuthConfig,\n  useUpdateAuthConfig,\n} from '@/registry/default/platform/platform-kit-nextjs/hooks/use-auth'\nimport {\n  authEmailProviderSchema,\n  authFieldLabels,\n  authGeneralSettingsSchema,\n  type AuthGeneralSettingsSchema,\n  authGoogleProviderSchema,\n  authPhoneProviderSchema,\n} from '../../lib/schemas/auth'\nimport { AlertTriangle, ChevronRight, Mail, Phone, User } from 'lucide-react'\nimport { useCallback, useMemo } from 'react'\nimport { z } from 'zod'\nimport { useSheetNavigation } from '@/registry/default/platform/platform-kit-nextjs/contexts/SheetNavigationContext'\nimport { Skeleton } from '@/registry/default/components/ui/skeleton'\nimport { Button } from '@/registry/default/components/ui/button'\nimport { Alert, AlertDescription, AlertTitle } from '@/registry/default/components/ui/alert'\n\nfunction ProviderSettingsView({\n  projectRef,\n  schema,\n  title,\n  initialValues: allInitialValues,\n  onSuccess,\n}: {\n  projectRef: string\n  schema: z.ZodObject<any> | z.ZodEffects<z.ZodObject<any>>\n  title: string\n  initialValues: any\n  onSuccess: () => void\n}) {\n  const { mutate: updateAuthConfig, isPending: isUpdatingConfig } = useUpdateAuthConfig()\n\n  const actualSchema = 'shape' in schema ? schema : (schema._def.schema as z.ZodObject<any>)\n\n  const handleUpdateAuthConfig = (formData: z.infer<typeof actualSchema>) => {\n    const payload = Object.fromEntries(\n      Object.entries(formData).filter(([_, value]) => value !== undefined)\n    )\n\n    if (Object.keys(payload).length === 0) {\n      alert('No changes to submit. Please modify a field to update.')\n      return\n    }\n\n    updateAuthConfig(\n      {\n        projectRef,\n        payload,\n      },\n      {\n        onSuccess,\n      }\n    )\n  }\n\n  const formInitialValues = useMemo(() => {\n    if (!allInitialValues) {\n      return undefined\n    }\n    const schemaKeys = Object.keys(actualSchema.shape)\n    const result = schemaKeys.reduce(\n      (acc, key) => {\n        if (Object.prototype.hasOwnProperty.call(allInitialValues, key)) {\n          acc[key] = allInitialValues[key]\n        }\n        return acc\n      },\n      {} as Record<string, any>\n    )\n\n    return result\n  }, [allInitialValues, actualSchema])\n\n  return (\n    <div className=\"w-full max-w-3xl mx-auto p-6 pt-4 lg:p-12 lg:pt-12\">\n      <h2 className=\"lg:text-xl font-semibold mb-2 lg:mb-4\">{title}</h2>\n      <DynamicForm\n        schema={actualSchema}\n        onSubmit={handleUpdateAuthConfig}\n        isLoading={isUpdatingConfig}\n        initialValues={formInitialValues}\n        labels={authFieldLabels}\n      />\n    </div>\n  )\n}\n\nexport function AuthManager({ projectRef }: { projectRef: string }) {\n  const {\n    data: authConfigData,\n    isLoading: isLoadingConfig,\n    error: errorLoadingConfig,\n  } = useGetAuthConfig(projectRef)\n\n  const { mutate: updateAuthConfig, isPending: isUpdatingConfig } = useUpdateAuthConfig()\n  const { push, pop } = useSheetNavigation()\n\n  const handleUpdateGeneralSettings = (formData: AuthGeneralSettingsSchema) => {\n    const payload = Object.fromEntries(\n      Object.entries(formData).filter(([_, value]) => value !== undefined)\n    )\n\n    if (Object.keys(payload).length === 0) {\n      alert('No changes to submit. Please modify a field to update.')\n      return\n    }\n\n    updateAuthConfig({\n      projectRef,\n      payload,\n    })\n  }\n\n  const providers: {\n    name: string\n    icon: React.ReactNode\n    description: string\n    schema: z.ZodObject<any> | z.ZodEffects<z.ZodObject<any>>\n  }[] = [\n    {\n      icon: <Mail className=\"h-4 w-4 text-muted-foreground\" />,\n      name: 'Email',\n      description: 'Sign in with email and password',\n      schema: authEmailProviderSchema,\n    },\n    {\n      icon: <Phone className=\"h-4 w-4 text-muted-foreground\" />,\n      name: 'Phone',\n      description: 'Sign in with phone number',\n      schema: authPhoneProviderSchema,\n    },\n    {\n      icon: <User className=\"h-4 w-4 text-muted-foreground\" />,\n      name: 'Google',\n      description: 'Sign in with Google',\n      schema: authGoogleProviderSchema,\n    },\n  ]\n\n  const handleProviderClick = useCallback(\n    (provider: { name: string; schema: z.ZodObject<any> | z.ZodEffects<z.ZodObject<any>> }) => {\n      push({\n        title: `${provider.name} Provider Settings`,\n        component: (\n          <ProviderSettingsView\n            projectRef={projectRef}\n            schema={provider.schema}\n            title={`${provider.name} Provider Settings`}\n            initialValues={authConfigData}\n            onSuccess={() => pop()}\n          />\n        ),\n      })\n    },\n    [projectRef, authConfigData, push, pop]\n  )\n\n  const formInitialValues = useMemo(() => {\n    if (!authConfigData) {\n      return undefined\n    }\n    const schemaKeys = Object.keys(authGeneralSettingsSchema.shape)\n    return schemaKeys.reduce(\n      (acc, key) => {\n        if (Object.prototype.hasOwnProperty.call(authConfigData, key)) {\n          acc[key] = authConfigData[key as keyof typeof authConfigData]\n        }\n        return acc\n      },\n      {} as Record<string, any>\n    )\n  }, [authConfigData])\n\n  if (errorLoadingConfig) {\n    return (\n      <div className=\"mx-6 lg:mx-8 mt-8\">\n        <Alert variant=\"destructive\">\n          <AlertTriangle className=\"h-4 w-4\" />\n          <AlertTitle>Error loading auth settings</AlertTitle>\n          <AlertDescription>\n            There was a problem loading your authentication configuration.\n          </AlertDescription>\n        </Alert>\n      </div>\n    )\n  }\n\n  if (isLoadingConfig)\n    return (\n      <div className=\"w-full max-w-3xl mx-auto p-12 space-y-2\">\n        <Skeleton className=\"h-12 w-full mb-8\" />\n        <Skeleton className=\"h-12 w-full\" />\n        <Skeleton className=\"h-12 w-full\" />\n      </div>\n    )\n\n  return (\n    <div className=\"w-full max-w-3xl mx-auto p-6 pt-4 lg:p-12 lg:pt-12\">\n      <div className=\"mb-12\">\n        <h2 className=\"text-base lg:text-xl font-semibold\">General Settings</h2>\n        <p className=\"text-sm lg:text-base text-muted-foreground mt-1 mb-2\">\n          Allow people to sign up to your app\n        </p>\n        <DynamicForm\n          schema={authGeneralSettingsSchema}\n          onSubmit={handleUpdateGeneralSettings}\n          isLoading={isUpdatingConfig}\n          initialValues={formInitialValues}\n          labels={authFieldLabels}\n        />\n      </div>\n      <div>\n        <h2 className=\"font-semibold lg:text-lg\">Sign in methods</h2>\n        <p className=\"text-muted-foreground mb-6 mt-1 text-sm lg:text-base\">\n          Configure how people sign in and up to your app.\n        </p>\n        <div className=\"border rounded-md overflow-hidden bg-background\">\n          {providers.map((provider) => (\n            <Button\n              variant=\"ghost\"\n              size=\"lg\"\n              onClick={() => handleProviderClick(provider)}\n              key={provider.name}\n              className=\"rounded-none justify-start flex-row text-left h-auto px-8 py-4 w-full gap-4 border-b last:border-b-0\"\n            >\n              {provider.icon}\n              <div className=\"flex-1\">\n                <h3 className=\"font-bold\">{provider.name}</h3>\n                <p className=\"text-muted-foreground text-sm\">{provider.description}</p>\n              </div>\n              <ChevronRight className=\"h-4 w-4 text-muted-foreground\" />\n            </Button>\n          ))}\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "content": "'use client'\n\nimport { AlertTriangle, ChevronRight, Mail, Phone, User } from 'lucide-react'\nimport { useCallback, useMemo } from 'react'\nimport { z } from 'zod'\n\nimport {\n  authEmailProviderSchema,\n  authFieldLabels,\n  authGeneralSettingsSchema,\n  authGoogleProviderSchema,\n  authPhoneProviderSchema,\n  type AuthGeneralSettingsSchema,\n} from '../../lib/schemas/auth'\nimport { Alert, AlertDescription, AlertTitle } from '@/registry/default/components/ui/alert'\nimport { Button } from '@/registry/default/components/ui/button'\nimport { Skeleton } from '@/registry/default/components/ui/skeleton'\nimport { DynamicForm } from '@/registry/default/platform/platform-kit-nextjs/components/dynamic-form'\nimport { useSheetNavigation } from '@/registry/default/platform/platform-kit-nextjs/contexts/SheetNavigationContext'\nimport {\n  useGetAuthConfig,\n  useUpdateAuthConfig,\n} from '@/registry/default/platform/platform-kit-nextjs/hooks/use-auth'\n\nfunction ProviderSettingsView({\n  projectRef,\n  schema,\n  title,\n  initialValues: allInitialValues,\n  onSuccess,\n}: {\n  projectRef: string\n  schema: z.ZodObject<any> | z.ZodEffects<z.ZodObject<any>>\n  title: string\n  initialValues: any\n  onSuccess: () => void\n}) {\n  const { mutate: updateAuthConfig, isPending: isUpdatingConfig } = useUpdateAuthConfig()\n\n  const actualSchema = 'shape' in schema ? schema : (schema._def.schema as z.ZodObject<any>)\n\n  const handleUpdateAuthConfig = (formData: z.infer<typeof actualSchema>) => {\n    const payload = Object.fromEntries(\n      Object.entries(formData).filter(([_, value]) => value !== undefined)\n    )\n\n    if (Object.keys(payload).length === 0) {\n      alert('No changes to submit. Please modify a field to update.')\n      return\n    }\n\n    updateAuthConfig(\n      {\n        projectRef,\n        payload,\n      },\n      {\n        onSuccess,\n      }\n    )\n  }\n\n  const formInitialValues = useMemo(() => {\n    if (!allInitialValues) {\n      return undefined\n    }\n    const schemaKeys = Object.keys(actualSchema.shape)\n    const result = schemaKeys.reduce(\n      (acc, key) => {\n        if (Object.prototype.hasOwnProperty.call(allInitialValues, key)) {\n          acc[key] = allInitialValues[key]\n        }\n        return acc\n      },\n      {} as Record<string, any>\n    )\n\n    return result\n  }, [allInitialValues, actualSchema])\n\n  return (\n    <div className=\"w-full max-w-3xl mx-auto p-6 pt-4 lg:p-12 lg:pt-12\">\n      <h2 className=\"lg:text-xl font-semibold mb-2 lg:mb-4\">{title}</h2>\n      <DynamicForm\n        schema={actualSchema}\n        onSubmit={handleUpdateAuthConfig}\n        isLoading={isUpdatingConfig}\n        initialValues={formInitialValues}\n        labels={authFieldLabels}\n      />\n    </div>\n  )\n}\n\nexport function AuthManager({ projectRef }: { projectRef: string }) {\n  const {\n    data: authConfigData,\n    isLoading: isLoadingConfig,\n    error: errorLoadingConfig,\n  } = useGetAuthConfig(projectRef)\n\n  const { mutate: updateAuthConfig, isPending: isUpdatingConfig } = useUpdateAuthConfig()\n  const { push, pop } = useSheetNavigation()\n\n  const handleUpdateGeneralSettings = (formData: AuthGeneralSettingsSchema) => {\n    const payload = Object.fromEntries(\n      Object.entries(formData).filter(([_, value]) => value !== undefined)\n    )\n\n    if (Object.keys(payload).length === 0) {\n      alert('No changes to submit. Please modify a field to update.')\n      return\n    }\n\n    updateAuthConfig({\n      projectRef,\n      payload,\n    })\n  }\n\n  const providers: {\n    name: string\n    icon: React.ReactNode\n    description: string\n    schema: z.ZodObject<any> | z.ZodEffects<z.ZodObject<any>>\n  }[] = [\n    {\n      icon: <Mail className=\"h-4 w-4 text-muted-foreground\" />,\n      name: 'Email',\n      description: 'Sign in with email and password',\n      schema: authEmailProviderSchema,\n    },\n    {\n      icon: <Phone className=\"h-4 w-4 text-muted-foreground\" />,\n      name: 'Phone',\n      description: 'Sign in with phone number',\n      schema: authPhoneProviderSchema,\n    },\n    {\n      icon: <User className=\"h-4 w-4 text-muted-foreground\" />,\n      name: 'Google',\n      description: 'Sign in with Google',\n      schema: authGoogleProviderSchema,\n    },\n  ]\n\n  const handleProviderClick = useCallback(\n    (provider: { name: string; schema: z.ZodObject<any> | z.ZodEffects<z.ZodObject<any>> }) => {\n      push({\n        title: `${provider.name} Provider Settings`,\n        component: (\n          <ProviderSettingsView\n            projectRef={projectRef}\n            schema={provider.schema}\n            title={`${provider.name} Provider Settings`}\n            initialValues={authConfigData}\n            onSuccess={() => pop()}\n          />\n        ),\n      })\n    },\n    [projectRef, authConfigData, push, pop]\n  )\n\n  const formInitialValues = useMemo(() => {\n    if (!authConfigData) {\n      return undefined\n    }\n    const schemaKeys = Object.keys(authGeneralSettingsSchema.shape)\n    return schemaKeys.reduce(\n      (acc, key) => {\n        if (Object.prototype.hasOwnProperty.call(authConfigData, key)) {\n          acc[key] = authConfigData[key as keyof typeof authConfigData]\n        }\n        return acc\n      },\n      {} as Record<string, any>\n    )\n  }, [authConfigData])\n\n  if (errorLoadingConfig) {\n    return (\n      <div className=\"mx-6 lg:mx-8 mt-8\">\n        <Alert variant=\"destructive\">\n          <AlertTriangle className=\"h-4 w-4\" />\n          <AlertTitle>Error loading auth settings</AlertTitle>\n          <AlertDescription>\n            There was a problem loading your authentication configuration.\n          </AlertDescription>\n        </Alert>\n      </div>\n    )\n  }\n\n  if (isLoadingConfig)\n    return (\n      <div className=\"w-full max-w-3xl mx-auto p-12 space-y-2\">\n        <Skeleton className=\"h-12 w-full mb-8\" />\n        <Skeleton className=\"h-12 w-full\" />\n        <Skeleton className=\"h-12 w-full\" />\n      </div>\n    )\n\n  return (\n    <div className=\"w-full max-w-3xl mx-auto p-6 pt-4 lg:p-12 lg:pt-12\">\n      <div className=\"mb-12\">\n        <h2 className=\"text-base lg:text-xl font-semibold\">General Settings</h2>\n        <p className=\"text-sm lg:text-base text-muted-foreground mt-1 mb-2\">\n          Allow people to sign up to your app\n        </p>\n        <DynamicForm\n          schema={authGeneralSettingsSchema}\n          onSubmit={handleUpdateGeneralSettings}\n          isLoading={isUpdatingConfig}\n          initialValues={formInitialValues}\n          labels={authFieldLabels}\n        />\n      </div>\n      <div>\n        <h2 className=\"font-semibold lg:text-lg\">Sign in methods</h2>\n        <p className=\"text-muted-foreground mb-6 mt-1 text-sm lg:text-base\">\n          Configure how people sign in and up to your app.\n        </p>\n        <div className=\"border rounded-md overflow-hidden bg-background\">\n          {providers.map((provider) => (\n            <Button\n              variant=\"ghost\"\n              size=\"lg\"\n              onClick={() => handleProviderClick(provider)}\n              key={provider.name}\n              className=\"rounded-none justify-start flex-row text-left h-auto px-8 py-4 w-full gap-4 border-b last:border-b-0\"\n            >\n              {provider.icon}\n              <div className=\"flex-1\">\n                <h3 className=\"font-bold\">{provider.name}</h3>\n                <p className=\"text-muted-foreground text-sm\">{provider.description}</p>\n              </div>\n              <ChevronRight className=\"h-4 w-4 text-muted-foreground\" />\n            </Button>\n          ))}\n        </div>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/default/platform/platform-kit-nextjs/components/supabase-manager/database.tsx",
-      "content": "'use client'\n\nimport { useState, useMemo, useCallback } from 'react'\nimport { z, type ZodTypeAny } from 'zod'\nimport { useListTables } from '@/registry/default/platform/platform-kit-nextjs/hooks/use-tables'\nimport { useRunQuery } from '@/registry/default/platform/platform-kit-nextjs/hooks/use-run-query'\nimport { SqlEditor } from '@/registry/default/platform/platform-kit-nextjs/components/sql-editor'\nimport { DynamicForm } from '@/registry/default/platform/platform-kit-nextjs/components/dynamic-form'\nimport { toast } from 'sonner'\nimport { useSheetNavigation } from '@/registry/default/platform/platform-kit-nextjs/contexts/SheetNavigationContext'\nimport { Skeleton } from '@/registry/default/components/ui/skeleton'\nimport { Button } from '@/registry/default/components/ui/button'\nimport { AlertTriangle, Table, Wand } from 'lucide-react'\nimport { Alert, AlertDescription, AlertTitle } from '@/registry/default/components/ui/alert'\n\n// Helper to generate a Zod schema from the table's column definitions\nfunction generateZodSchema(table: any): z.ZodObject<any, any, any> {\n  if (!table || !table.columns) {\n    return z.object({})\n  }\n\n  const shape: Record<string, ZodTypeAny> = {}\n  for (const column of table.columns) {\n    // We can only edit updatable columns that are not generated\n    if (!column.is_updatable || column.is_generated) continue\n\n    let fieldSchema: ZodTypeAny\n    const dataType = column.data_type.toLowerCase()\n\n    if (dataType.includes('array')) {\n      fieldSchema = z.array(z.any())\n    } else if (dataType.includes('int') || dataType.includes('numeric')) {\n      fieldSchema = z.number()\n    } else if (dataType.includes('bool')) {\n      fieldSchema = z.boolean()\n    } else if (\n      dataType === 'user-defined' &&\n      column.enums &&\n      Array.isArray(column.enums) &&\n      column.enums.length > 0\n    ) {\n      // Handle enum types\n      fieldSchema = z.enum(column.enums as [string, ...string[]])\n    } else {\n      // Default to string for text, varchar, timestamp, uuid, etc.\n      fieldSchema = z.string()\n    }\n\n    if (column.is_nullable) {\n      fieldSchema = fieldSchema.nullish()\n    }\n\n    shape[column.name] = fieldSchema\n  }\n  return z.object(shape)\n}\n\nconst getPrimaryKeys = (table: any): string[] => {\n  if (!table || !table.primary_keys) {\n    return []\n  }\n  return table.primary_keys.map((pk: any) => pk.name)\n}\n\nfunction EditRowView({\n  projectRef,\n  table,\n  row,\n  onSuccess,\n}: {\n  projectRef: string\n  table: any\n  row: any\n  onSuccess: () => void\n}) {\n  const { mutate: runUpdateQuery, isPending: isUpdatePending } = useRunQuery()\n  const formSchema = useMemo(() => generateZodSchema(table), [table])\n\n  const columnInfo = useMemo(() => {\n    if (!table || !table.columns) return {}\n\n    const info: Record<string, any> = {}\n    for (const column of table.columns) {\n      // Only include updatable columns that are not generated\n      if (!column.is_updatable || column.is_generated) continue\n\n      const dataType = column.data_type.toLowerCase()\n      const displayType =\n        dataType === 'user-defined' &&\n        column.enums &&\n        Array.isArray(column.enums) &&\n        column.enums.length > 0\n          ? 'enum'\n          : dataType\n\n      info[column.name] = {\n        data_type: displayType,\n        is_nullable: column.is_nullable,\n      }\n    }\n    return info\n  }, [table])\n\n  const handleFormSubmit = useCallback(\n    (formData: any) => {\n      const pks = getPrimaryKeys(table)\n      if (pks.length === 0) {\n        toast.error('Cannot update row. This table does not have a primary key.')\n        return\n      }\n\n      const setClauses = Object.entries(formData)\n        .map(([key, value]) => {\n          if (JSON.stringify(row[key]) === JSON.stringify(value)) return null\n\n          // Find the column type to determine formatting\n          const column = table.columns.find((col: any) => col.name === key)\n          const dataType = column?.data_type?.toLowerCase() || ''\n          const isNullable = column?.is_nullable || false\n\n          let formattedValue\n\n          // Handle empty/null values\n          if (\n            value === null ||\n            value === undefined ||\n            (typeof value === 'string' && value.trim() === '')\n          ) {\n            if (isNullable) {\n              formattedValue = 'NULL'\n            } else if (dataType.includes('array')) {\n              // Non-nullable array, set to empty array\n              const jsonObj = JSON.stringify({ [key]: [] })\n              formattedValue = `(select ${key} from json_populate_record(null::public.\"${\n                table.name\n              }\", '${jsonObj.replace(/'/g, \"''\")}'))`\n            } else {\n              // Non-nullable text field, set to empty string\n              formattedValue = \"''\"\n            }\n          } else if (Array.isArray(value) && value.length === 0) {\n            // Explicitly empty array (different from null)\n            const jsonObj = JSON.stringify({ [key]: [] })\n            formattedValue = `(select ${key} from json_populate_record(null::public.\"${\n              table.name\n            }\", '${jsonObj.replace(/'/g, \"''\")}'))`\n          } else if (dataType.includes('array')) {\n            // Array type with actual values - use json_populate_record syntax\n            const jsonObj = JSON.stringify({ [key]: value })\n            formattedValue = `(select ${key} from json_populate_record(null::public.\"${\n              table.name\n            }\", '${jsonObj.replace(/'/g, \"''\")}'))`\n          } else if (dataType === 'user-defined' && column?.enums) {\n            // Handle enum values - treat as strings with proper escaping\n            formattedValue = `'${String(value).replace(/'/g, \"''\")}'`\n          } else if (typeof value === 'string') {\n            formattedValue = `'${value.replace(/'/g, \"''\")}'`\n          } else {\n            formattedValue = value\n          }\n\n          return `\"${key}\" = ${formattedValue}`\n        })\n        .filter(Boolean)\n        .join(', ')\n\n      if (!setClauses) {\n        toast.error('No changes to save')\n        onSuccess()\n        return\n      }\n\n      const whereClauses = pks\n        .map((pk) => {\n          const value = row[pk]\n          const formattedValue =\n            typeof value === 'string' ? `'${value.replace(/'/g, \"''\")}'` : value\n          return `\"${pk}\" = ${formattedValue}`\n        })\n        .join(' AND ')\n\n      const updateSql = `UPDATE public.\"${table.name}\" SET ${setClauses} WHERE ${whereClauses};`\n\n      runUpdateQuery({ projectRef, query: updateSql, readOnly: false }, { onSuccess })\n    },\n    [projectRef, table, row, runUpdateQuery, onSuccess]\n  )\n\n  return (\n    <div className=\"px-6 pt-4 pb-10 lg:px-12 lg:pt-10\">\n      <h2 className=\"text-base lg:text-xl font-semibold mb-4\">Editing row in {table.name}</h2>\n      <DynamicForm\n        schema={formSchema}\n        initialValues={row}\n        onSubmit={handleFormSubmit}\n        isLoading={isUpdatePending}\n        columnInfo={columnInfo}\n      />\n    </div>\n  )\n}\n\nfunction TableRecordsView({ projectRef, table }: { projectRef: string; table: any }) {\n  const { push, pop } = useSheetNavigation()\n  const [refetchCounter, setRefetchCounter] = useState(0)\n\n  const handleRowClick = useCallback(\n    (row: any) => {\n      push({\n        title: `Editing row`,\n        component: (\n          <EditRowView\n            projectRef={projectRef}\n            table={table}\n            row={row}\n            onSuccess={() => {\n              pop()\n              setRefetchCounter((c) => c + 1)\n            }}\n          />\n        ),\n      })\n    },\n    [push, pop, projectRef, table]\n  )\n\n  return (\n    <SqlEditor\n      hideChartOption={true}\n      projectRef={projectRef}\n      label={`View records in ${table.name}`}\n      initialSql={`SELECT * FROM public.\"${table.name}\" LIMIT 100;`}\n      queryKey={table.id}\n      onRowClick={handleRowClick}\n      hideSql={true}\n      runAutomatically={true}\n      refetch={refetchCounter}\n      readOnly\n    />\n  )\n}\n\nexport function DatabaseManager({ projectRef }: { projectRef: string }) {\n  const { push } = useSheetNavigation()\n  const { data: tables, isLoading, isError } = useListTables(projectRef, ['public'])\n\n  const handleTableClick = useCallback(\n    (table: any) => {\n      push({\n        title: table.name,\n        component: <TableRecordsView projectRef={projectRef} table={table} />,\n      })\n    },\n    [push, projectRef]\n  )\n\n  const handleNaturalLanguageQueryClick = useCallback(() => {\n    push({\n      title: 'Talk to your database',\n      component: (\n        <SqlEditor projectRef={projectRef} initialNaturalLanguageMode={true} hideSql={true} />\n      ),\n    })\n  }, [push, projectRef])\n\n  return (\n    <div className=\"p-6 pt-4 lg:p-8 lg:pt-8\">\n      <div className=\"flex items-center justify-between mb-6 gap-6\">\n        <div className=\"flex-1\">\n          <h1 className=\"text-base lg:text-xl font-semibold\">Database</h1>\n          <p className=\"hidden lg:block text-sm lg:text-base text-muted-foreground mt-1\">\n            View and manage the data stored in your app.\n          </p>\n        </div>\n        <Button\n          variant=\"outline\"\n          key=\"talk-to-db\"\n          className=\"flex-row justify-between\"\n          onClick={handleNaturalLanguageQueryClick}\n        >\n          <Wand strokeWidth={1.5} size={16} />\n          Query your database\n        </Button>\n      </div>\n\n      {isError && (\n        <Alert variant=\"destructive\" className=\"mt-8\">\n          <AlertTriangle className=\"h-4 w-4\" />\n          <AlertTitle>Error loading tables</AlertTitle>\n          <AlertDescription>There was a problem loading your database tables.</AlertDescription>\n        </Alert>\n      )}\n\n      {isLoading && (\n        <div className=\"mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\">\n          <Skeleton className=\"h-12 w-full\" />\n          <Skeleton className=\"h-12 w-full\" />\n          <Skeleton className=\"h-12 w-full\" />\n          <Skeleton className=\"h-12 w-full\" />\n        </div>\n      )}\n\n      {tables && tables.length > 0 ? (\n        <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2\">\n          {tables.map((table: any) => (\n            <Button\n              variant=\"outline\"\n              key={table.id}\n              size=\"lg\"\n              className=\"flex-row justify-between text-left\"\n              onClick={() => handleTableClick(table)}\n            >\n              <Table className=\"h-4 w-4 text-muted-foreground\" />\n              <h2 className=\"text-sm font-medium font-mono truncate flex-1\">{table.name}</h2>\n              <div className=\"text-sm text-muted-foreground font-mono shrink-0\">\n                {table.live_rows_estimate} rows\n              </div>\n            </Button>\n          ))}\n        </div>\n      ) : !isLoading && (!tables || tables.length === 0) ? (\n        <Alert className=\"mt-8\">\n          <Table className=\"h-4 w-4\" />\n          <AlertTitle>No database tables</AlertTitle>\n          <AlertDescription>Create tables to store and organize your data.</AlertDescription>\n        </Alert>\n      ) : null}\n    </div>\n  )\n}\n",
+      "content": "'use client'\n\nimport { AlertTriangle, Table, Wand } from 'lucide-react'\nimport { useCallback, useMemo, useState } from 'react'\nimport { toast } from 'sonner'\nimport { z, type ZodTypeAny } from 'zod'\n\nimport { Alert, AlertDescription, AlertTitle } from '@/registry/default/components/ui/alert'\nimport { Button } from '@/registry/default/components/ui/button'\nimport { Skeleton } from '@/registry/default/components/ui/skeleton'\nimport { DynamicForm } from '@/registry/default/platform/platform-kit-nextjs/components/dynamic-form'\nimport { SqlEditor } from '@/registry/default/platform/platform-kit-nextjs/components/sql-editor'\nimport { useSheetNavigation } from '@/registry/default/platform/platform-kit-nextjs/contexts/SheetNavigationContext'\nimport { useRunQuery } from '@/registry/default/platform/platform-kit-nextjs/hooks/use-run-query'\nimport { useListTables } from '@/registry/default/platform/platform-kit-nextjs/hooks/use-tables'\n\n// Helper to generate a Zod schema from the table's column definitions\nfunction generateZodSchema(table: any): z.ZodObject<any, any, any> {\n  if (!table || !table.columns) {\n    return z.object({})\n  }\n\n  const shape: Record<string, ZodTypeAny> = {}\n  for (const column of table.columns) {\n    // We can only edit updatable columns that are not generated\n    if (!column.is_updatable || column.is_generated) continue\n\n    let fieldSchema: ZodTypeAny\n    const dataType = column.data_type.toLowerCase()\n\n    if (dataType.includes('array')) {\n      fieldSchema = z.array(z.any())\n    } else if (dataType.includes('int') || dataType.includes('numeric')) {\n      fieldSchema = z.number()\n    } else if (dataType.includes('bool')) {\n      fieldSchema = z.boolean()\n    } else if (\n      dataType === 'user-defined' &&\n      column.enums &&\n      Array.isArray(column.enums) &&\n      column.enums.length > 0\n    ) {\n      // Handle enum types\n      fieldSchema = z.enum(column.enums as [string, ...string[]])\n    } else {\n      // Default to string for text, varchar, timestamp, uuid, etc.\n      fieldSchema = z.string()\n    }\n\n    if (column.is_nullable) {\n      fieldSchema = fieldSchema.nullish()\n    }\n\n    shape[column.name] = fieldSchema\n  }\n  return z.object(shape)\n}\n\nconst getPrimaryKeys = (table: any): string[] => {\n  if (!table || !table.primary_keys) {\n    return []\n  }\n  return table.primary_keys.map((pk: any) => pk.name)\n}\n\nfunction EditRowView({\n  projectRef,\n  table,\n  row,\n  onSuccess,\n}: {\n  projectRef: string\n  table: any\n  row: any\n  onSuccess: () => void\n}) {\n  const { mutate: runUpdateQuery, isPending: isUpdatePending } = useRunQuery()\n  const formSchema = useMemo(() => generateZodSchema(table), [table])\n\n  const columnInfo = useMemo(() => {\n    if (!table || !table.columns) return {}\n\n    const info: Record<string, any> = {}\n    for (const column of table.columns) {\n      // Only include updatable columns that are not generated\n      if (!column.is_updatable || column.is_generated) continue\n\n      const dataType = column.data_type.toLowerCase()\n      const displayType =\n        dataType === 'user-defined' &&\n        column.enums &&\n        Array.isArray(column.enums) &&\n        column.enums.length > 0\n          ? 'enum'\n          : dataType\n\n      info[column.name] = {\n        data_type: displayType,\n        is_nullable: column.is_nullable,\n      }\n    }\n    return info\n  }, [table])\n\n  const handleFormSubmit = useCallback(\n    (formData: any) => {\n      const pks = getPrimaryKeys(table)\n      if (pks.length === 0) {\n        toast.error('Cannot update row. This table does not have a primary key.')\n        return\n      }\n\n      const setClauses = Object.entries(formData)\n        .map(([key, value]) => {\n          if (JSON.stringify(row[key]) === JSON.stringify(value)) return null\n\n          // Find the column type to determine formatting\n          const column = table.columns.find((col: any) => col.name === key)\n          const dataType = column?.data_type?.toLowerCase() || ''\n          const isNullable = column?.is_nullable || false\n\n          let formattedValue\n\n          // Handle empty/null values\n          if (\n            value === null ||\n            value === undefined ||\n            (typeof value === 'string' && value.trim() === '')\n          ) {\n            if (isNullable) {\n              formattedValue = 'NULL'\n            } else if (dataType.includes('array')) {\n              // Non-nullable array, set to empty array\n              const jsonObj = JSON.stringify({ [key]: [] })\n              formattedValue = `(select ${key} from json_populate_record(null::public.\"${\n                table.name\n              }\", '${jsonObj.replace(/'/g, \"''\")}'))`\n            } else {\n              // Non-nullable text field, set to empty string\n              formattedValue = \"''\"\n            }\n          } else if (Array.isArray(value) && value.length === 0) {\n            // Explicitly empty array (different from null)\n            const jsonObj = JSON.stringify({ [key]: [] })\n            formattedValue = `(select ${key} from json_populate_record(null::public.\"${\n              table.name\n            }\", '${jsonObj.replace(/'/g, \"''\")}'))`\n          } else if (dataType.includes('array')) {\n            // Array type with actual values - use json_populate_record syntax\n            const jsonObj = JSON.stringify({ [key]: value })\n            formattedValue = `(select ${key} from json_populate_record(null::public.\"${\n              table.name\n            }\", '${jsonObj.replace(/'/g, \"''\")}'))`\n          } else if (dataType === 'user-defined' && column?.enums) {\n            // Handle enum values - treat as strings with proper escaping\n            formattedValue = `'${String(value).replace(/'/g, \"''\")}'`\n          } else if (typeof value === 'string') {\n            formattedValue = `'${value.replace(/'/g, \"''\")}'`\n          } else {\n            formattedValue = value\n          }\n\n          return `\"${key}\" = ${formattedValue}`\n        })\n        .filter(Boolean)\n        .join(', ')\n\n      if (!setClauses) {\n        toast.error('No changes to save')\n        onSuccess()\n        return\n      }\n\n      const whereClauses = pks\n        .map((pk) => {\n          const value = row[pk]\n          const formattedValue =\n            typeof value === 'string' ? `'${value.replace(/'/g, \"''\")}'` : value\n          return `\"${pk}\" = ${formattedValue}`\n        })\n        .join(' AND ')\n\n      const updateSql = `UPDATE public.\"${table.name}\" SET ${setClauses} WHERE ${whereClauses};`\n\n      runUpdateQuery({ projectRef, query: updateSql, readOnly: false }, { onSuccess })\n    },\n    [projectRef, table, row, runUpdateQuery, onSuccess]\n  )\n\n  return (\n    <div className=\"px-6 pt-4 pb-10 lg:px-12 lg:pt-10\">\n      <h2 className=\"text-base lg:text-xl font-semibold mb-4\">Editing row in {table.name}</h2>\n      <DynamicForm\n        schema={formSchema}\n        initialValues={row}\n        onSubmit={handleFormSubmit}\n        isLoading={isUpdatePending}\n        columnInfo={columnInfo}\n      />\n    </div>\n  )\n}\n\nfunction TableRecordsView({ projectRef, table }: { projectRef: string; table: any }) {\n  const { push, pop } = useSheetNavigation()\n  const [refetchCounter, setRefetchCounter] = useState(0)\n\n  const handleRowClick = useCallback(\n    (row: any) => {\n      push({\n        title: `Editing row`,\n        component: (\n          <EditRowView\n            projectRef={projectRef}\n            table={table}\n            row={row}\n            onSuccess={() => {\n              pop()\n              setRefetchCounter((c) => c + 1)\n            }}\n          />\n        ),\n      })\n    },\n    [push, pop, projectRef, table]\n  )\n\n  return (\n    <SqlEditor\n      hideChartOption={true}\n      projectRef={projectRef}\n      label={`View records in ${table.name}`}\n      initialSql={`SELECT * FROM public.\"${table.name}\" LIMIT 100;`}\n      queryKey={table.id}\n      onRowClick={handleRowClick}\n      hideSql={true}\n      runAutomatically={true}\n      refetch={refetchCounter}\n      readOnly\n    />\n  )\n}\n\nexport function DatabaseManager({ projectRef }: { projectRef: string }) {\n  const { push } = useSheetNavigation()\n  const { data: tables, isLoading, isError } = useListTables(projectRef, ['public'])\n\n  const handleTableClick = useCallback(\n    (table: any) => {\n      push({\n        title: table.name,\n        component: <TableRecordsView projectRef={projectRef} table={table} />,\n      })\n    },\n    [push, projectRef]\n  )\n\n  const handleNaturalLanguageQueryClick = useCallback(() => {\n    push({\n      title: 'Talk to your database',\n      component: (\n        <SqlEditor projectRef={projectRef} initialNaturalLanguageMode={true} hideSql={true} />\n      ),\n    })\n  }, [push, projectRef])\n\n  return (\n    <div className=\"p-6 pt-4 lg:p-8 lg:pt-8\">\n      <div className=\"flex items-center justify-between mb-6 gap-6\">\n        <div className=\"flex-1\">\n          <h1 className=\"text-base lg:text-xl font-semibold\">Database</h1>\n          <p className=\"hidden lg:block text-sm lg:text-base text-muted-foreground mt-1\">\n            View and manage the data stored in your app.\n          </p>\n        </div>\n        <Button\n          variant=\"outline\"\n          key=\"talk-to-db\"\n          className=\"flex-row justify-between\"\n          onClick={handleNaturalLanguageQueryClick}\n        >\n          <Wand strokeWidth={1.5} size={16} />\n          Query your database\n        </Button>\n      </div>\n\n      {isError && (\n        <Alert variant=\"destructive\" className=\"mt-8\">\n          <AlertTriangle className=\"h-4 w-4\" />\n          <AlertTitle>Error loading tables</AlertTitle>\n          <AlertDescription>There was a problem loading your database tables.</AlertDescription>\n        </Alert>\n      )}\n\n      {isLoading && (\n        <div className=\"mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\">\n          <Skeleton className=\"h-12 w-full\" />\n          <Skeleton className=\"h-12 w-full\" />\n          <Skeleton className=\"h-12 w-full\" />\n          <Skeleton className=\"h-12 w-full\" />\n        </div>\n      )}\n\n      {tables && tables.length > 0 ? (\n        <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2\">\n          {tables.map((table: any) => (\n            <Button\n              variant=\"outline\"\n              key={table.id}\n              size=\"lg\"\n              className=\"flex-row justify-between text-left\"\n              onClick={() => handleTableClick(table)}\n            >\n              <Table className=\"h-4 w-4 text-muted-foreground\" />\n              <h2 className=\"text-sm font-medium font-mono truncate flex-1\">{table.name}</h2>\n              <div className=\"text-sm text-muted-foreground font-mono shrink-0\">\n                {table.live_rows_estimate} rows\n              </div>\n            </Button>\n          ))}\n        </div>\n      ) : !isLoading && (!tables || tables.length === 0) ? (\n        <Alert className=\"mt-8\">\n          <Table className=\"h-4 w-4\" />\n          <AlertTitle>No database tables</AlertTitle>\n          <AlertDescription>Create tables to store and organize your data.</AlertDescription>\n        </Alert>\n      ) : null}\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/default/platform/platform-kit-nextjs/components/supabase-manager/index.tsx",
-      "content": "'use client'\n\nimport { useState, ReactNode, useMemo } from 'react'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/default/components/ui/dialog'\nimport {\n  Drawer,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n} from '@/registry/default/components/ui/drawer'\nimport { AuthManager } from '@/registry/default/platform/platform-kit-nextjs/components/supabase-manager/auth'\nimport { DatabaseManager } from '@/registry/default/platform/platform-kit-nextjs/components/supabase-manager/database'\nimport { StorageManager } from '@/registry/default/platform/platform-kit-nextjs/components/supabase-manager/storage'\nimport { LogsManager } from '@/registry/default/platform/platform-kit-nextjs/components/supabase-manager/logs'\nimport { SuggestionsManager } from '@/registry/default/platform/platform-kit-nextjs/components/supabase-manager/suggestions'\nimport { UsersManager } from '@/registry/default/platform/platform-kit-nextjs/components/supabase-manager/users'\nimport { SecretsManager } from '@/registry/default/platform/platform-kit-nextjs/components/supabase-manager/secrets'\nimport {\n  SheetNavigationProvider,\n  useSheetNavigation,\n} from '@/registry/default/platform/platform-kit-nextjs/contexts/SheetNavigationContext'\nimport {\n  ChevronLeft,\n  ChevronRight,\n  Database,\n  ExternalLink,\n  HardDrive,\n  KeyRound,\n  Lightbulb,\n  ScrollText,\n  Shield,\n  Users,\n} from 'lucide-react'\nimport {\n  HoverCard,\n  HoverCardTrigger,\n  HoverCardContent,\n} from '@/registry/default/components/ui/hover-card'\nimport { QueryClient, QueryClientProvider } from '@tanstack/react-query'\nimport { LogoSupabase } from '@/registry/default/platform/platform-kit-nextjs/components/logo-supabase'\nimport Link from 'next/link'\n\nconst queryClient = new QueryClient()\n\nfunction DialogView({ projectRef, isMobile }: { projectRef: string; isMobile?: boolean }) {\n  const { stack, push, popTo, reset } = useSheetNavigation()\n\n  const handleTopLevelNavigation = (title: string, component: ReactNode) => {\n    if (stack.length === 1 && stack[0].title === title) {\n      return\n    }\n    reset()\n    push({ title, component })\n  }\n\n  const currentView = stack[stack.length - 1]\n  const activeManager = stack.length > 0 ? stack[0].title : null\n\n  const navigationItems = useMemo(\n    () => [\n      {\n        title: 'Database',\n        icon: Database,\n        component: <DatabaseManager projectRef={projectRef} />,\n      },\n      {\n        title: 'Storage',\n        icon: HardDrive,\n        component: <StorageManager projectRef={projectRef} />,\n      },\n      {\n        title: 'Auth',\n        icon: Shield,\n        component: <AuthManager projectRef={projectRef} />,\n      },\n      {\n        title: 'Users',\n        icon: Users,\n        component: <UsersManager projectRef={projectRef} />,\n      },\n      {\n        title: 'Secrets',\n        icon: KeyRound,\n        component: <SecretsManager projectRef={projectRef} />,\n      },\n      {\n        title: 'Logs',\n        icon: ScrollText,\n        component: <LogsManager projectRef={projectRef} />,\n      },\n      {\n        title: 'Suggestions',\n        icon: Lightbulb,\n        component: <SuggestionsManager projectRef={projectRef} />,\n      },\n    ],\n    [projectRef]\n  )\n\n  if (isMobile) {\n    return (\n      <div className=\"flex flex-col h-full overflow-hidden\">\n        {/* Content Area */}\n        <div className=\"flex flex-col overflow-hidden h-full\">\n          <div className=\"grow overflow-y-auto\">\n            {currentView ? (\n              currentView.component\n            ) : (\n              <div className=\"flex items-center justify-center h-full\">\n                <p className=\"text-muted-foreground\">\n                  Select a manager from the bottom navigation to get started.\n                </p>\n              </div>\n            )}\n          </div>\n        </div>\n\n        {/* Bottom Navigation Bar */}\n        <div className=\"border-t bg-background\">\n          <div className=\"overflow-x-auto\">\n            <div className=\"flex gap-1 p-2 min-w-max\">\n              {navigationItems.map((item) => {\n                const Icon = item.icon\n                return (\n                  <Button\n                    key={item.title}\n                    variant={activeManager === item.title ? 'secondary' : 'ghost'}\n                    className=\"flex-col h-16 w-20 min-w-16 text-xs gap-1 px-2\"\n                    onClick={() => handleTopLevelNavigation(item.title, item.component)}\n                  >\n                    <Icon className=\"h-5 w-5\" />\n                    <span className=\"text-[10px] leading-tight text-center\">\n                      {item.title === 'Auth' ? 'Auth' : item.title}\n                    </span>\n                  </Button>\n                )\n              })}\n            </div>\n          </div>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"grid grid-cols-[240px_1fr] h-full overflow-hidden\">\n      {/* Sidebar */}\n      <div className=\"flex flex-col border-r px-3 py-6 pb-3\">\n        <div className=\"px-4 mb-4\">\n          <h2 className=\"text-muted-foreground font-semibold text-sm\">Manage your back-end</h2>\n        </div>\n        <div className=\"grow space-y-0.5\">\n          {navigationItems.map((item) => {\n            const Icon = item.icon\n            return (\n              <Button\n                key={item.title}\n                variant={activeManager === item.title ? 'secondary' : 'ghost'}\n                className=\"w-full justify-start text-sm\"\n                onClick={() => handleTopLevelNavigation(item.title, item.component)}\n              >\n                <Icon className=\"mr-2 text-muted-foreground\" />\n                {item.title === 'Auth' ? 'Authentication' : item.title}\n              </Button>\n            )\n          })}\n        </div>\n        <footer className=\"p-0 text-sm text-muted-foreground flex items-center gap-3 -m-3 border-t\">\n          <HoverCard>\n            <HoverCardTrigger asChild>\n              <Link\n                href={`https://supabase.com/dashboard/project/${projectRef}`}\n                target=\"_blank\"\n                className=\"flex items-center px-4 w-full rounded-none text-sm py-4 h-auto justify-start gap-3 text-sm text-left hover:bg-accent\"\n              >\n                <LogoSupabase size={16} />\n                <span className=\"flex-1\">Open in Supabase</span>\n                <ExternalLink className=\"ml-2 h-4 w-4 text-muted-foreground/50\" />\n              </Link>\n            </HoverCardTrigger>\n            <HoverCardContent\n              sideOffset={8}\n              align=\"start\"\n              side=\"top\"\n              className=\"text-sm bg-muted/50 w-[216px]\"\n            >\n              <h4 className=\"font-semibold mb-1\">About Supabase</h4>\n              <p className=\"text-muted-foreground\">\n                Access powerful back-end tools for database, auth, storage, and logs directly in\n                Supabase.\n              </p>\n            </HoverCardContent>\n          </HoverCard>\n        </footer>\n      </div>\n\n      {/* Content Area */}\n      <div className=\"flex flex-col overflow-hidden h-full\">\n        {/* Header with breadcrumbs */}\n        <div className=\"flex items-center h-12 shrink-0 px-4 relative border-b\">\n          {stack.length > 1 && (\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              className=\"h-8 w-8 relative z-10\"\n              onClick={() => popTo(stack.length - 2)}\n            >\n              <ChevronLeft className=\"h-4 w-4\" />\n              <span className=\"sr-only\">Back</span>\n            </Button>\n          )}\n          {/* Breadcrumbs */}\n          <div className=\"ml-4 flex items-center gap-1.5 text-sm text-muted-foreground relative z-10\">\n            {stack.map((item: { title: string }, index: number) => (\n              <div key={`${item.title}-${index}`} className=\"flex items-center gap-1.5\">\n                {index > 0 && <ChevronRight className=\"h-3 w-3\" />}\n                {index === stack.length - 1 ? (\n                  <span className=\"font-semibold text-foreground\">{item.title}</span>\n                ) : (\n                  <button onClick={() => popTo(index)} className=\"hover:underline\">\n                    {item.title}\n                  </button>\n                )}\n              </div>\n            ))}\n          </div>\n        </div>\n\n        <div className=\"grow overflow-y-auto\">\n          {currentView ? (\n            currentView.component\n          ) : (\n            <div className=\"flex items-center justify-center h-full\">\n              <p className=\"text-muted-foreground\">\n                Select a manager from the sidebar to get started.\n              </p>\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default function SupabaseManagerDialog({\n  projectRef,\n  open,\n  onOpenChange,\n  isMobile,\n}: {\n  projectRef: string\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  isMobile: boolean\n}) {\n  const content = (\n    <SheetNavigationProvider\n      onStackEmpty={() => {}}\n      initialStack={[\n        {\n          title: 'Database',\n          component: <DatabaseManager projectRef={projectRef} />,\n        },\n      ]}\n    >\n      <DialogView projectRef={projectRef} isMobile={isMobile} />\n    </SheetNavigationProvider>\n  )\n\n  if (!isMobile) {\n    return (\n      <QueryClientProvider client={queryClient}>\n        <Dialog open={open} onOpenChange={onOpenChange}>\n          <DialogContent className=\"w-full h-[80vh] max-h-[700px] sm:max-w-[calc(100%-2rem)] w-[1180px] p-0 overflow-hidden sm:rounded-lg\">\n            <DialogTitle className=\"sr-only\">Manage your back-end</DialogTitle>\n            {content}\n          </DialogContent>\n        </Dialog>\n      </QueryClientProvider>\n    )\n  }\n\n  return (\n    <QueryClientProvider client={queryClient}>\n      <Drawer open={open} onOpenChange={onOpenChange}>\n        <DrawerContent className=\"h-[90vh] p-0 overflow-hidden\">\n          <DrawerHeader className=\"sr-only\">\n            <DrawerTitle>Manage your back-end</DrawerTitle>\n          </DrawerHeader>\n          {content}\n        </DrawerContent>\n      </Drawer>\n    </QueryClientProvider>\n  )\n}\n",
+      "content": "'use client'\n\nimport { QueryClient, QueryClientProvider } from '@tanstack/react-query'\nimport {\n  ChevronLeft,\n  ChevronRight,\n  Database,\n  ExternalLink,\n  HardDrive,\n  KeyRound,\n  Lightbulb,\n  ScrollText,\n  Shield,\n  Users,\n} from 'lucide-react'\nimport Link from 'next/link'\nimport { ReactNode, useMemo, useState } from 'react'\n\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/default/components/ui/dialog'\nimport {\n  Drawer,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n} from '@/registry/default/components/ui/drawer'\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from '@/registry/default/components/ui/hover-card'\nimport { LogoSupabase } from '@/registry/default/platform/platform-kit-nextjs/components/logo-supabase'\nimport { AuthManager } from '@/registry/default/platform/platform-kit-nextjs/components/supabase-manager/auth'\nimport { DatabaseManager } from '@/registry/default/platform/platform-kit-nextjs/components/supabase-manager/database'\nimport { LogsManager } from '@/registry/default/platform/platform-kit-nextjs/components/supabase-manager/logs'\nimport { SecretsManager } from '@/registry/default/platform/platform-kit-nextjs/components/supabase-manager/secrets'\nimport { StorageManager } from '@/registry/default/platform/platform-kit-nextjs/components/supabase-manager/storage'\nimport { SuggestionsManager } from '@/registry/default/platform/platform-kit-nextjs/components/supabase-manager/suggestions'\nimport { UsersManager } from '@/registry/default/platform/platform-kit-nextjs/components/supabase-manager/users'\nimport {\n  SheetNavigationProvider,\n  useSheetNavigation,\n} from '@/registry/default/platform/platform-kit-nextjs/contexts/SheetNavigationContext'\n\nconst queryClient = new QueryClient()\n\nfunction DialogView({ projectRef, isMobile }: { projectRef: string; isMobile?: boolean }) {\n  const { stack, push, popTo, reset } = useSheetNavigation()\n\n  const handleTopLevelNavigation = (title: string, component: ReactNode) => {\n    if (stack.length === 1 && stack[0].title === title) {\n      return\n    }\n    reset()\n    push({ title, component })\n  }\n\n  const currentView = stack[stack.length - 1]\n  const activeManager = stack.length > 0 ? stack[0].title : null\n\n  const navigationItems = useMemo(\n    () => [\n      {\n        title: 'Database',\n        icon: Database,\n        component: <DatabaseManager projectRef={projectRef} />,\n      },\n      {\n        title: 'Storage',\n        icon: HardDrive,\n        component: <StorageManager projectRef={projectRef} />,\n      },\n      {\n        title: 'Auth',\n        icon: Shield,\n        component: <AuthManager projectRef={projectRef} />,\n      },\n      {\n        title: 'Users',\n        icon: Users,\n        component: <UsersManager projectRef={projectRef} />,\n      },\n      {\n        title: 'Secrets',\n        icon: KeyRound,\n        component: <SecretsManager projectRef={projectRef} />,\n      },\n      {\n        title: 'Logs',\n        icon: ScrollText,\n        component: <LogsManager projectRef={projectRef} />,\n      },\n      {\n        title: 'Suggestions',\n        icon: Lightbulb,\n        component: <SuggestionsManager projectRef={projectRef} />,\n      },\n    ],\n    [projectRef]\n  )\n\n  if (isMobile) {\n    return (\n      <div className=\"flex flex-col h-full overflow-hidden\">\n        {/* Content Area */}\n        <div className=\"flex flex-col overflow-hidden h-full\">\n          <div className=\"grow overflow-y-auto\">\n            {currentView ? (\n              currentView.component\n            ) : (\n              <div className=\"flex items-center justify-center h-full\">\n                <p className=\"text-muted-foreground\">\n                  Select a manager from the bottom navigation to get started.\n                </p>\n              </div>\n            )}\n          </div>\n        </div>\n\n        {/* Bottom Navigation Bar */}\n        <div className=\"border-t bg-background\">\n          <div className=\"overflow-x-auto\">\n            <div className=\"flex gap-1 p-2 min-w-max\">\n              {navigationItems.map((item) => {\n                const Icon = item.icon\n                return (\n                  <Button\n                    key={item.title}\n                    variant={activeManager === item.title ? 'secondary' : 'ghost'}\n                    className=\"flex-col h-16 w-20 min-w-16 text-xs gap-1 px-2\"\n                    onClick={() => handleTopLevelNavigation(item.title, item.component)}\n                  >\n                    <Icon className=\"h-5 w-5\" />\n                    <span className=\"text-[10px] leading-tight text-center\">\n                      {item.title === 'Auth' ? 'Auth' : item.title}\n                    </span>\n                  </Button>\n                )\n              })}\n            </div>\n          </div>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"grid grid-cols-[240px_1fr] h-full overflow-hidden\">\n      {/* Sidebar */}\n      <div className=\"flex flex-col border-r px-3 py-6 pb-3\">\n        <div className=\"px-4 mb-4\">\n          <h2 className=\"text-muted-foreground font-semibold text-sm\">Manage your back-end</h2>\n        </div>\n        <div className=\"grow space-y-0.5\">\n          {navigationItems.map((item) => {\n            const Icon = item.icon\n            return (\n              <Button\n                key={item.title}\n                variant={activeManager === item.title ? 'secondary' : 'ghost'}\n                className=\"w-full justify-start text-sm\"\n                onClick={() => handleTopLevelNavigation(item.title, item.component)}\n              >\n                <Icon className=\"mr-2 text-muted-foreground\" />\n                {item.title === 'Auth' ? 'Authentication' : item.title}\n              </Button>\n            )\n          })}\n        </div>\n        <footer className=\"p-0 text-sm text-muted-foreground flex items-center gap-3 -m-3 border-t\">\n          <HoverCard>\n            <HoverCardTrigger asChild>\n              <Link\n                href={`https://supabase.com/dashboard/project/${projectRef}`}\n                target=\"_blank\"\n                className=\"flex items-center px-4 w-full rounded-none text-sm py-4 h-auto justify-start gap-3 text-sm text-left hover:bg-accent\"\n              >\n                <LogoSupabase size={16} />\n                <span className=\"flex-1\">Open in Supabase</span>\n                <ExternalLink className=\"ml-2 h-4 w-4 text-muted-foreground/50\" />\n              </Link>\n            </HoverCardTrigger>\n            <HoverCardContent\n              sideOffset={8}\n              align=\"start\"\n              side=\"top\"\n              className=\"text-sm bg-muted/50 w-[216px]\"\n            >\n              <h4 className=\"font-semibold mb-1\">About Supabase</h4>\n              <p className=\"text-muted-foreground\">\n                Access powerful back-end tools for database, auth, storage, and logs directly in\n                Supabase.\n              </p>\n            </HoverCardContent>\n          </HoverCard>\n        </footer>\n      </div>\n\n      {/* Content Area */}\n      <div className=\"flex flex-col overflow-hidden h-full\">\n        {/* Header with breadcrumbs */}\n        <div className=\"flex items-center h-12 shrink-0 px-4 relative border-b\">\n          {stack.length > 1 && (\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              className=\"h-8 w-8 relative z-10\"\n              onClick={() => popTo(stack.length - 2)}\n            >\n              <ChevronLeft className=\"h-4 w-4\" />\n              <span className=\"sr-only\">Back</span>\n            </Button>\n          )}\n          {/* Breadcrumbs */}\n          <div className=\"ml-4 flex items-center gap-1.5 text-sm text-muted-foreground relative z-10\">\n            {stack.map((item: { title: string }, index: number) => (\n              <div key={`${item.title}-${index}`} className=\"flex items-center gap-1.5\">\n                {index > 0 && <ChevronRight className=\"h-3 w-3\" />}\n                {index === stack.length - 1 ? (\n                  <span className=\"font-semibold text-foreground\">{item.title}</span>\n                ) : (\n                  <button onClick={() => popTo(index)} className=\"hover:underline\">\n                    {item.title}\n                  </button>\n                )}\n              </div>\n            ))}\n          </div>\n        </div>\n\n        <div className=\"grow overflow-y-auto\">\n          {currentView ? (\n            currentView.component\n          ) : (\n            <div className=\"flex items-center justify-center h-full\">\n              <p className=\"text-muted-foreground\">\n                Select a manager from the sidebar to get started.\n              </p>\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default function SupabaseManagerDialog({\n  projectRef,\n  open,\n  onOpenChange,\n  isMobile,\n}: {\n  projectRef: string\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  isMobile: boolean\n}) {\n  const content = (\n    <SheetNavigationProvider\n      onStackEmpty={() => {}}\n      initialStack={[\n        {\n          title: 'Database',\n          component: <DatabaseManager projectRef={projectRef} />,\n        },\n      ]}\n    >\n      <DialogView projectRef={projectRef} isMobile={isMobile} />\n    </SheetNavigationProvider>\n  )\n\n  if (!isMobile) {\n    return (\n      <QueryClientProvider client={queryClient}>\n        <Dialog open={open} onOpenChange={onOpenChange}>\n          <DialogContent className=\"w-full h-[80vh] max-h-[700px] sm:max-w-[calc(100%-2rem)] w-[1180px] p-0 overflow-hidden sm:rounded-lg\">\n            <DialogTitle className=\"sr-only\">Manage your back-end</DialogTitle>\n            {content}\n          </DialogContent>\n        </Dialog>\n      </QueryClientProvider>\n    )\n  }\n\n  return (\n    <QueryClientProvider client={queryClient}>\n      <Drawer open={open} onOpenChange={onOpenChange}>\n        <DrawerContent className=\"h-[90vh] p-0 overflow-hidden\">\n          <DrawerHeader className=\"sr-only\">\n            <DrawerTitle>Manage your back-end</DrawerTitle>\n          </DrawerHeader>\n          {content}\n        </DrawerContent>\n      </Drawer>\n    </QueryClientProvider>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/default/platform/platform-kit-nextjs/components/supabase-manager/logs.tsx",
-      "content": "'use client'\n\nimport { Alert, AlertDescription, AlertTitle } from '@/registry/default/components/ui/alert'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/default/components/ui/command'\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from '@/registry/default/components/ui/hover-card'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/components/ui/popover'\nimport { Skeleton } from '@/registry/default/components/ui/skeleton'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/components/ui/table'\nimport { useGetLogs } from '@/registry/default/platform/platform-kit-nextjs/hooks/use-logs'\nimport { LogsTableName, genDefaultQuery } from '../../lib/logs'\nimport { cn } from '@/lib/utils'\nimport { Check, ChevronsUpDown, Logs, Terminal } from 'lucide-react'\nimport { useMemo, useState } from 'react'\n\n// Define log types with names and descriptions\nconst logTypes = [\n  {\n    value: LogsTableName.FN_EDGE,\n    label: 'Function Edge Logs',\n    description: 'Edge function execution logs with request and response metadata',\n  },\n  {\n    value: LogsTableName.AUTH,\n    label: 'Authentication Logs',\n    description: 'User authentication events and security logs',\n  },\n  {\n    value: LogsTableName.POSTGRES,\n    label: 'PostgreSQL Logs',\n    description: 'Database queries, errors, and performance metrics',\n  },\n  {\n    value: LogsTableName.REALTIME,\n    label: 'Realtime Logs',\n    description: 'WebSocket connections and realtime subscriptions',\n  },\n  {\n    value: LogsTableName.STORAGE,\n    label: 'Storage Logs',\n    description: 'File uploads, downloads, and storage operations',\n  },\n  {\n    value: LogsTableName.PG_CRON,\n    label: 'Cron Job Logs',\n    description: 'Scheduled job executions and cron task logs',\n  },\n  {\n    value: LogsTableName.EDGE,\n    label: 'Edge Logs',\n    description: 'HTTP requests and responses from the data API',\n  },\n\n  {\n    value: LogsTableName.FUNCTIONS,\n    label: 'Function Logs',\n    description: 'Serverless function execution logs and events',\n  },\n  {\n    value: LogsTableName.POSTGREST,\n    label: 'PostgREST Logs',\n    description: 'API requests to your database through PostgREST',\n  },\n  {\n    value: LogsTableName.SUPAVISOR,\n    label: 'Supavisor Logs',\n    description: 'Connection pooling and database proxy logs',\n  },\n  {\n    value: LogsTableName.PGBOUNCER,\n    label: 'PgBouncer Logs',\n    description: 'Legacy connection pooling logs',\n  },\n  {\n    value: LogsTableName.PG_UPGRADE,\n    label: 'PostgreSQL Upgrade Logs',\n    description: 'Database upgrade processes and migration logs',\n  },\n]\n\nexport function LogsManager({ projectRef }: { projectRef: string }) {\n  const [activeTab, setActiveTab] = useState<LogsTableName>(LogsTableName.FN_EDGE)\n  const [open, setOpen] = useState(false)\n\n  const sql = useMemo(() => genDefaultQuery(activeTab), [activeTab])\n\n  const { data: logs, isLoading, error } = useGetLogs(projectRef, { sql })\n\n  const selectedLogType = logTypes.find((type) => type.value === activeTab)\n\n  return (\n    <>\n      <div className=\"p-6 pt-4 lg:p-8 lg:pt-8 border-b bg-background z-10 sticky top-0 flex items-center justify-between mb-6\">\n        <div className=\"flex-1\">\n          <h1 className=\"text-base lg:text-xl font-semibold\">Logs</h1>\n          <p className=\"hidden lg:block text-sm lg:text-base text-muted-foreground mt-1\">\n            Debug errors and track activity in your app\n          </p>\n        </div>\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              role=\"combobox\"\n              aria-expanded={open}\n              className=\"w-64 justify-between\"\n            >\n              {selectedLogType ? selectedLogType.label : 'Select log type...'}\n              <ChevronsUpDown className=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-80 p-0\" align=\"end\">\n            <Command>\n              <CommandInput placeholder=\"Search log types...\" className=\"h-9\" />\n              <CommandList\n                className=\"max-h-60 overflow-y-auto\"\n                onWheel={(e) => {\n                  e.stopPropagation()\n                }}\n                style={{ overscrollBehavior: 'contain' }}\n              >\n                <CommandEmpty>No log type found.</CommandEmpty>\n                <CommandGroup>\n                  {logTypes.map((logType) => (\n                    <CommandItem\n                      key={logType.value}\n                      value={logType.value}\n                      onSelect={(currentValue) => {\n                        setActiveTab(currentValue as LogsTableName)\n                        setOpen(false)\n                      }}\n                      className=\"flex items-center gap-2 p-3\"\n                    >\n                      <div className=\"flex-1\">\n                        <div className=\"text-xs mb-1 font-medium leading-none\">{logType.label}</div>\n                        <div className=\"text-xs text-muted-foreground leading-snug\">\n                          {logType.description}\n                        </div>\n                      </div>\n                      <Check\n                        className={cn(\n                          'h-4 w-4 mt-0.5',\n                          activeTab === logType.value ? 'opacity-100' : 'opacity-0'\n                        )}\n                      />\n                    </CommandItem>\n                  ))}\n                </CommandGroup>\n              </CommandList>\n            </Command>\n          </PopoverContent>\n        </Popover>\n      </div>\n\n      {isLoading && (\n        <div className=\"space-y-2 mx-8 mt-8\">\n          <Skeleton className=\"h-6 w-full\" />\n          <Skeleton className=\"h-6 w-full\" />\n          <Skeleton className=\"h-6 w-full\" />\n          <Skeleton className=\"h-6 w-full\" />\n        </div>\n      )}\n      {(error || (logs && logs.error)) && (\n        <div className=\"mx-6 lg:mx-8 mt-8\">\n          <Alert variant=\"destructive\">\n            <Terminal className=\"h-4 w-4\" />\n            <AlertTitle>Error fetching logs</AlertTitle>\n            <AlertDescription>\n              {(error as any)?.message ||\n                (typeof logs?.error === 'object' && logs.error?.message) ||\n                'An unexpected error occurred. Please try again.'}\n            </AlertDescription>\n          </Alert>\n        </div>\n      )}\n      {logs && logs.result && logs.result.length > 0 && (\n        <div className=\"mt-4 overflow-auto w-full\">\n          <Table>\n            <TableHeader>\n              <TableRow className=\"hover:bg-transparent\">\n                {Object.keys(logs.result[0] as object).map((key, idx, arr) => (\n                  <TableHead\n                    key={key}\n                    className={\n                      (idx === 0 ? 'first:pl-6 lg:first:pl-8 ' : '') +\n                      (idx === arr.length - 1 ? 'last:pr-6 lg:last:pr-8 ' : '')\n                    }\n                  >\n                    {key.replace(/_/g, ' ').replace(/\\b\\w/g, (l) => l.toUpperCase())}\n                  </TableHead>\n                ))}\n              </TableRow>\n            </TableHeader>\n            <TableBody>\n              {(logs.result as any[]).map((log, index) => (\n                <TableRow key={log.id || index} className=\"group hover:bg-muted/50 relative\">\n                  {Object.keys(logs.result?.[0] ?? []).map((key, idx, arr) => {\n                    const value = log[key]\n                    const formattedValue = (() => {\n                      if (key === 'timestamp' && typeof value === 'number') {\n                        return new Date(value / 1000).toLocaleString()\n                      }\n                      if (value === null) {\n                        return 'NULL'\n                      }\n                      return typeof value === 'object'\n                        ? JSON.stringify(value, null, 2)\n                        : String(value)\n                    })()\n\n                    return (\n                      <TableCell\n                        key={key}\n                        className=\"first:pl-6 lg:first:pl-8 last:pr-6 lg:last:pr-8 text-xs text-muted-foreground group-hover:text-foreground min-w-[8rem]\"\n                      >\n                        <HoverCard>\n                          <HoverCardTrigger asChild>\n                            <div className=\"text-xs font-mono w-fit max-w-96 truncate cursor-default\">\n                              {formattedValue}\n                            </div>\n                          </HoverCardTrigger>\n                          <HoverCardContent className=\"w-96 max-h-96 overflow-auto p-3\">\n                            <pre className=\"text-xs font-mono whitespace-pre-wrap break-words\">\n                              {formattedValue}\n                            </pre>\n                          </HoverCardContent>\n                        </HoverCard>\n                      </TableCell>\n                    )\n                  })}\n                </TableRow>\n              ))}\n            </TableBody>\n          </Table>\n        </div>\n      )}\n      {logs && logs.result && logs.result.length === 0 && (\n        <div className=\"mt-8 mx-8\">\n          <Alert>\n            <Logs className=\"h-4 w-4\" />\n            <AlertTitle>No logs found</AlertTitle>\n            <AlertDescription>\n              Logs will appear here when your application generates activity.\n            </AlertDescription>\n          </Alert>\n        </div>\n      )}\n    </>\n  )\n}\n",
+      "content": "'use client'\n\nimport { Check, ChevronsUpDown, Logs, Terminal } from 'lucide-react'\nimport { useMemo, useState } from 'react'\n\nimport { genDefaultQuery, LogsTableName } from '../../lib/logs'\nimport { cn } from '@/lib/utils'\nimport { Alert, AlertDescription, AlertTitle } from '@/registry/default/components/ui/alert'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/default/components/ui/command'\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from '@/registry/default/components/ui/hover-card'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/components/ui/popover'\nimport { Skeleton } from '@/registry/default/components/ui/skeleton'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/components/ui/table'\nimport { useGetLogs } from '@/registry/default/platform/platform-kit-nextjs/hooks/use-logs'\n\n// Define log types with names and descriptions\nconst logTypes = [\n  {\n    value: LogsTableName.FN_EDGE,\n    label: 'Function Edge Logs',\n    description: 'Edge function execution logs with request and response metadata',\n  },\n  {\n    value: LogsTableName.AUTH,\n    label: 'Authentication Logs',\n    description: 'User authentication events and security logs',\n  },\n  {\n    value: LogsTableName.POSTGRES,\n    label: 'PostgreSQL Logs',\n    description: 'Database queries, errors, and performance metrics',\n  },\n  {\n    value: LogsTableName.REALTIME,\n    label: 'Realtime Logs',\n    description: 'WebSocket connections and realtime subscriptions',\n  },\n  {\n    value: LogsTableName.STORAGE,\n    label: 'Storage Logs',\n    description: 'File uploads, downloads, and storage operations',\n  },\n  {\n    value: LogsTableName.PG_CRON,\n    label: 'Cron Job Logs',\n    description: 'Scheduled job executions and cron task logs',\n  },\n  {\n    value: LogsTableName.EDGE,\n    label: 'Edge Logs',\n    description: 'HTTP requests and responses from the data API',\n  },\n\n  {\n    value: LogsTableName.FUNCTIONS,\n    label: 'Function Logs',\n    description: 'Serverless function execution logs and events',\n  },\n  {\n    value: LogsTableName.POSTGREST,\n    label: 'PostgREST Logs',\n    description: 'API requests to your database through PostgREST',\n  },\n  {\n    value: LogsTableName.SUPAVISOR,\n    label: 'Supavisor Logs',\n    description: 'Connection pooling and database proxy logs',\n  },\n  {\n    value: LogsTableName.PGBOUNCER,\n    label: 'PgBouncer Logs',\n    description: 'Legacy connection pooling logs',\n  },\n  {\n    value: LogsTableName.PG_UPGRADE,\n    label: 'PostgreSQL Upgrade Logs',\n    description: 'Database upgrade processes and migration logs',\n  },\n]\n\nexport function LogsManager({ projectRef }: { projectRef: string }) {\n  const [activeTab, setActiveTab] = useState<LogsTableName>(LogsTableName.FN_EDGE)\n  const [open, setOpen] = useState(false)\n\n  const sql = useMemo(() => genDefaultQuery(activeTab), [activeTab])\n\n  const { data: logs, isLoading, error } = useGetLogs(projectRef, { sql })\n\n  const selectedLogType = logTypes.find((type) => type.value === activeTab)\n\n  return (\n    <>\n      <div className=\"p-6 pt-4 lg:p-8 lg:pt-8 border-b bg-background z-10 sticky top-0 flex items-center justify-between mb-6\">\n        <div className=\"flex-1\">\n          <h1 className=\"text-base lg:text-xl font-semibold\">Logs</h1>\n          <p className=\"hidden lg:block text-sm lg:text-base text-muted-foreground mt-1\">\n            Debug errors and track activity in your app\n          </p>\n        </div>\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              role=\"combobox\"\n              aria-expanded={open}\n              className=\"w-64 justify-between\"\n            >\n              {selectedLogType ? selectedLogType.label : 'Select log type...'}\n              <ChevronsUpDown className=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-80 p-0\" align=\"end\">\n            <Command>\n              <CommandInput placeholder=\"Search log types...\" className=\"h-9\" />\n              <CommandList\n                className=\"max-h-60 overflow-y-auto\"\n                onWheel={(e) => {\n                  e.stopPropagation()\n                }}\n                style={{ overscrollBehavior: 'contain' }}\n              >\n                <CommandEmpty>No log type found.</CommandEmpty>\n                <CommandGroup>\n                  {logTypes.map((logType) => (\n                    <CommandItem\n                      key={logType.value}\n                      value={logType.value}\n                      onSelect={(currentValue) => {\n                        setActiveTab(currentValue as LogsTableName)\n                        setOpen(false)\n                      }}\n                      className=\"flex items-center gap-2 p-3\"\n                    >\n                      <div className=\"flex-1\">\n                        <div className=\"text-xs mb-1 font-medium leading-none\">{logType.label}</div>\n                        <div className=\"text-xs text-muted-foreground leading-snug\">\n                          {logType.description}\n                        </div>\n                      </div>\n                      <Check\n                        className={cn(\n                          'h-4 w-4 mt-0.5',\n                          activeTab === logType.value ? 'opacity-100' : 'opacity-0'\n                        )}\n                      />\n                    </CommandItem>\n                  ))}\n                </CommandGroup>\n              </CommandList>\n            </Command>\n          </PopoverContent>\n        </Popover>\n      </div>\n\n      {isLoading && (\n        <div className=\"space-y-2 mx-8 mt-8\">\n          <Skeleton className=\"h-6 w-full\" />\n          <Skeleton className=\"h-6 w-full\" />\n          <Skeleton className=\"h-6 w-full\" />\n          <Skeleton className=\"h-6 w-full\" />\n        </div>\n      )}\n      {(error || (logs && logs.error)) && (\n        <div className=\"mx-6 lg:mx-8 mt-8\">\n          <Alert variant=\"destructive\">\n            <Terminal className=\"h-4 w-4\" />\n            <AlertTitle>Error fetching logs</AlertTitle>\n            <AlertDescription>\n              {(error as any)?.message ||\n                (typeof logs?.error === 'object' && logs.error?.message) ||\n                'An unexpected error occurred. Please try again.'}\n            </AlertDescription>\n          </Alert>\n        </div>\n      )}\n      {logs && logs.result && logs.result.length > 0 && (\n        <div className=\"mt-4 overflow-auto w-full\">\n          <Table>\n            <TableHeader>\n              <TableRow className=\"hover:bg-transparent\">\n                {Object.keys(logs.result[0] as object).map((key, idx, arr) => (\n                  <TableHead\n                    key={key}\n                    className={\n                      (idx === 0 ? 'first:pl-6 lg:first:pl-8 ' : '') +\n                      (idx === arr.length - 1 ? 'last:pr-6 lg:last:pr-8 ' : '')\n                    }\n                  >\n                    {key.replace(/_/g, ' ').replace(/\\b\\w/g, (l) => l.toUpperCase())}\n                  </TableHead>\n                ))}\n              </TableRow>\n            </TableHeader>\n            <TableBody>\n              {(logs.result as any[]).map((log, index) => (\n                <TableRow key={log.id || index} className=\"group hover:bg-muted/50 relative\">\n                  {Object.keys(logs.result?.[0] ?? []).map((key, idx, arr) => {\n                    const value = log[key]\n                    const formattedValue = (() => {\n                      if (key === 'timestamp' && typeof value === 'number') {\n                        return new Date(value / 1000).toLocaleString()\n                      }\n                      if (value === null) {\n                        return 'NULL'\n                      }\n                      return typeof value === 'object'\n                        ? JSON.stringify(value, null, 2)\n                        : String(value)\n                    })()\n\n                    return (\n                      <TableCell\n                        key={key}\n                        className=\"first:pl-6 lg:first:pl-8 last:pr-6 lg:last:pr-8 text-xs text-muted-foreground group-hover:text-foreground min-w-[8rem]\"\n                      >\n                        <HoverCard>\n                          <HoverCardTrigger asChild>\n                            <div className=\"text-xs font-mono w-fit max-w-96 truncate cursor-default\">\n                              {formattedValue}\n                            </div>\n                          </HoverCardTrigger>\n                          <HoverCardContent className=\"w-96 max-h-96 overflow-auto p-3\">\n                            <pre className=\"text-xs font-mono whitespace-pre-wrap break-words\">\n                              {formattedValue}\n                            </pre>\n                          </HoverCardContent>\n                        </HoverCard>\n                      </TableCell>\n                    )\n                  })}\n                </TableRow>\n              ))}\n            </TableBody>\n          </Table>\n        </div>\n      )}\n      {logs && logs.result && logs.result.length === 0 && (\n        <div className=\"mt-8 mx-8\">\n          <Alert>\n            <Logs className=\"h-4 w-4\" />\n            <AlertTitle>No logs found</AlertTitle>\n            <AlertDescription>\n              Logs will appear here when your application generates activity.\n            </AlertDescription>\n          </Alert>\n        </div>\n      )}\n    </>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/default/platform/platform-kit-nextjs/components/supabase-manager/secrets.tsx",
-      "content": "'use client'\n\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n  Form,\n  FormControl,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/components/ui/form'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Skeleton } from '@/registry/default/components/ui/skeleton'\nimport {\n  useCreateSecrets,\n  useDeleteSecrets,\n  useGetSecrets,\n} from '@/registry/default/platform/platform-kit-nextjs/hooks/use-secrets'\nimport { secretsSchema } from '../../lib/schemas/secrets'\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { AlertTriangle, Minus, PlusIcon, Key } from 'lucide-react'\nimport { useFieldArray, useForm } from 'react-hook-form'\nimport { z } from 'zod'\nimport { Alert, AlertDescription, AlertTitle } from '@/registry/default/components/ui/alert'\n\nexport function SecretsManager({ projectRef }: { projectRef: string }) {\n  const { data: secrets, isLoading, error } = useGetSecrets(projectRef)\n  const { mutate: createSecrets, isPending: isCreating } = useCreateSecrets()\n  const { mutate: deleteSecrets, isPending: isDeleting } = useDeleteSecrets()\n  const form = useForm<z.infer<typeof secretsSchema>>({\n    resolver: zodResolver(secretsSchema),\n    defaultValues: {\n      secrets: [{ name: '', value: '' }],\n    },\n  })\n\n  const { fields, append, remove } = useFieldArray({\n    control: form.control,\n    name: 'secrets',\n  })\n\n  const handleCreateSecrets = (formData: z.infer<typeof secretsSchema>) => {\n    createSecrets(\n      {\n        projectRef,\n        secrets: formData.secrets,\n      },\n      {\n        onSuccess: () => {\n          form.reset({ secrets: [{ name: '', value: '' }] })\n        },\n      }\n    )\n  }\n\n  const handleDeleteSecret = (secretName: string) => {\n    if (window.confirm(`Are you sure you want to delete the secret \"${secretName}\"?`)) {\n      deleteSecrets({\n        projectRef,\n        secretNames: [secretName],\n      })\n    }\n  }\n\n  if (isLoading) {\n    return (\n      <div className=\"w-full max-w-4xl mx-auto p-12 space-y-4\">\n        <Skeleton className=\"h-48 w-full\" />\n        <Skeleton className=\"h-16 w-full\" />\n        <Skeleton className=\"h-16 w-full\" />\n      </div>\n    )\n  }\n\n  if (error) {\n    return (\n      <div className=\"mx-6 lg:mx-8 mt-8\">\n        <Alert variant=\"destructive\">\n          <AlertTriangle className=\"h-4 w-4\" />\n          <AlertTitle>Error loading secrets</AlertTitle>\n          <AlertDescription>\n            There was a problem loading your secrets configuration.\n          </AlertDescription>\n        </Alert>\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"w-full max-w-3xl mx-auto p-6 pt-4 lg:p-12 lg:pt-12\">\n      <div className=\"mb-16\">\n        <h2 className=\"text-base lg:text-xl font-semibold mb-1\">Add New Secret</h2>\n        <p className=\"text-muted-foreground mb-6 text-sm lg:text-base\">\n          Add sensitive information like API keys that your app needs to work securely.\n        </p>\n        <Form {...form}>\n          <form onSubmit={form.handleSubmit(handleCreateSecrets)} className=\"space-y-2\">\n            {fields.map((field, index) => (\n              <div key={field.id} className=\"flex items-start space-x-2\">\n                <FormField\n                  control={form.control}\n                  name={`secrets.${index}.name`}\n                  render={({ field }) => (\n                    <FormItem className=\"flex-1\">\n                      {index === 0 && <FormLabel className=\"mb-4\">Name</FormLabel>}\n                      <FormControl>\n                        <Input placeholder=\"SECRET_NAME\" {...field} />\n                      </FormControl>\n                      <FormMessage />\n                    </FormItem>\n                  )}\n                />\n                <FormField\n                  control={form.control}\n                  name={`secrets.${index}.value`}\n                  render={({ field }) => (\n                    <FormItem className=\"flex-1\">\n                      {index === 0 && <FormLabel className=\"mb-4\">Value</FormLabel>}\n                      <FormControl>\n                        <Input type=\"password\" placeholder=\"••••••••\" {...field} />\n                      </FormControl>\n                      <FormMessage />\n                    </FormItem>\n                  )}\n                />\n                <div className=\"w-8\">\n                  {index === 0 && <FormLabel className=\"opacity-0 mb-4\">Remove</FormLabel>}\n                  <Button\n                    type=\"button\"\n                    variant=\"outline\"\n                    size=\"icon\"\n                    onClick={() => remove(index)}\n                    disabled={fields.length <= 1}\n                  >\n                    <Minus className=\"h-4 w-4\" />\n                  </Button>\n                </div>\n              </div>\n            ))}\n            <div className=\"flex items-center space-x-2\">\n              <Button\n                type=\"button\"\n                variant=\"outline\"\n                size=\"sm\"\n                onClick={() => append({ name: '', value: '' })}\n              >\n                <PlusIcon className=\"mr-2 h-4 w-4\" />\n                Add Secret\n              </Button>\n            </div>\n\n            <Button type=\"submit\" disabled={isCreating} className=\"mt-6\">\n              {isCreating ? 'Creating...' : 'Create Secrets'}\n            </Button>\n          </form>\n        </Form>\n      </div>\n\n      <div>\n        <h2 className=\"font-semibold mb-4 lg:text-lg\">Existing secrets</h2>\n        {secrets && secrets.length > 0 ? (\n          secrets.map((secret) => (\n            <div\n              key={secret.name}\n              className=\"flex items-center justify-between py-4 border-b last:border-b-0\"\n            >\n              <div>\n                <p className=\"font-mono text-sm tracking-wider\">{secret.name}</p>\n                {secret.updated_at && (\n                  <p className=\"text-xs text-muted-foreground mt-1\">\n                    Last updated: {new Date(secret.updated_at).toLocaleString()}\n                  </p>\n                )}\n              </div>\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                onClick={() => handleDeleteSecret(secret.name)}\n                disabled={isDeleting}\n              >\n                Delete\n              </Button>\n            </div>\n          ))\n        ) : (\n          <Alert>\n            <Key className=\"h-4 w-4\" />\n            <AlertTitle>No secrets found</AlertTitle>\n            <AlertDescription>No secrets found for this project.</AlertDescription>\n          </Alert>\n        )}\n      </div>\n    </div>\n  )\n}\n",
+      "content": "'use client'\n\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { AlertTriangle, Key, Minus, PlusIcon } from 'lucide-react'\nimport { useFieldArray, useForm } from 'react-hook-form'\nimport { z } from 'zod'\n\nimport { secretsSchema } from '../../lib/schemas/secrets'\nimport { Alert, AlertDescription, AlertTitle } from '@/registry/default/components/ui/alert'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n  Form,\n  FormControl,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/components/ui/form'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Skeleton } from '@/registry/default/components/ui/skeleton'\nimport {\n  useCreateSecrets,\n  useDeleteSecrets,\n  useGetSecrets,\n} from '@/registry/default/platform/platform-kit-nextjs/hooks/use-secrets'\n\nexport function SecretsManager({ projectRef }: { projectRef: string }) {\n  const { data: secrets, isLoading, error } = useGetSecrets(projectRef)\n  const { mutate: createSecrets, isPending: isCreating } = useCreateSecrets()\n  const { mutate: deleteSecrets, isPending: isDeleting } = useDeleteSecrets()\n  const form = useForm<z.infer<typeof secretsSchema>>({\n    resolver: zodResolver(secretsSchema),\n    defaultValues: {\n      secrets: [{ name: '', value: '' }],\n    },\n  })\n\n  const { fields, append, remove } = useFieldArray({\n    control: form.control,\n    name: 'secrets',\n  })\n\n  const handleCreateSecrets = (formData: z.infer<typeof secretsSchema>) => {\n    createSecrets(\n      {\n        projectRef,\n        secrets: formData.secrets,\n      },\n      {\n        onSuccess: () => {\n          form.reset({ secrets: [{ name: '', value: '' }] })\n        },\n      }\n    )\n  }\n\n  const handleDeleteSecret = (secretName: string) => {\n    if (window.confirm(`Are you sure you want to delete the secret \"${secretName}\"?`)) {\n      deleteSecrets({\n        projectRef,\n        secretNames: [secretName],\n      })\n    }\n  }\n\n  if (isLoading) {\n    return (\n      <div className=\"w-full max-w-4xl mx-auto p-12 space-y-4\">\n        <Skeleton className=\"h-48 w-full\" />\n        <Skeleton className=\"h-16 w-full\" />\n        <Skeleton className=\"h-16 w-full\" />\n      </div>\n    )\n  }\n\n  if (error) {\n    return (\n      <div className=\"mx-6 lg:mx-8 mt-8\">\n        <Alert variant=\"destructive\">\n          <AlertTriangle className=\"h-4 w-4\" />\n          <AlertTitle>Error loading secrets</AlertTitle>\n          <AlertDescription>\n            There was a problem loading your secrets configuration.\n          </AlertDescription>\n        </Alert>\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"w-full max-w-3xl mx-auto p-6 pt-4 lg:p-12 lg:pt-12\">\n      <div className=\"mb-16\">\n        <h2 className=\"text-base lg:text-xl font-semibold mb-1\">Add New Secret</h2>\n        <p className=\"text-muted-foreground mb-6 text-sm lg:text-base\">\n          Add sensitive information like API keys that your app needs to work securely.\n        </p>\n        <Form {...form}>\n          <form onSubmit={form.handleSubmit(handleCreateSecrets)} className=\"space-y-2\">\n            {fields.map((field, index) => (\n              <div key={field.id} className=\"flex items-start space-x-2\">\n                <FormField\n                  control={form.control}\n                  name={`secrets.${index}.name`}\n                  render={({ field }) => (\n                    <FormItem className=\"flex-1\">\n                      {index === 0 && <FormLabel className=\"mb-4\">Name</FormLabel>}\n                      <FormControl>\n                        <Input placeholder=\"SECRET_NAME\" {...field} />\n                      </FormControl>\n                      <FormMessage />\n                    </FormItem>\n                  )}\n                />\n                <FormField\n                  control={form.control}\n                  name={`secrets.${index}.value`}\n                  render={({ field }) => (\n                    <FormItem className=\"flex-1\">\n                      {index === 0 && <FormLabel className=\"mb-4\">Value</FormLabel>}\n                      <FormControl>\n                        <Input type=\"password\" placeholder=\"••••••••\" {...field} />\n                      </FormControl>\n                      <FormMessage />\n                    </FormItem>\n                  )}\n                />\n                <div className=\"w-8\">\n                  {index === 0 && <FormLabel className=\"opacity-0 mb-4\">Remove</FormLabel>}\n                  <Button\n                    type=\"button\"\n                    variant=\"outline\"\n                    size=\"icon\"\n                    onClick={() => remove(index)}\n                    disabled={fields.length <= 1}\n                  >\n                    <Minus className=\"h-4 w-4\" />\n                  </Button>\n                </div>\n              </div>\n            ))}\n            <div className=\"flex items-center space-x-2\">\n              <Button\n                type=\"button\"\n                variant=\"outline\"\n                size=\"sm\"\n                onClick={() => append({ name: '', value: '' })}\n              >\n                <PlusIcon className=\"mr-2 h-4 w-4\" />\n                Add Secret\n              </Button>\n            </div>\n\n            <Button type=\"submit\" disabled={isCreating} className=\"mt-6\">\n              {isCreating ? 'Creating...' : 'Create Secrets'}\n            </Button>\n          </form>\n        </Form>\n      </div>\n\n      <div>\n        <h2 className=\"font-semibold mb-4 lg:text-lg\">Existing secrets</h2>\n        {secrets && secrets.length > 0 ? (\n          secrets.map((secret) => (\n            <div\n              key={secret.name}\n              className=\"flex items-center justify-between py-4 border-b last:border-b-0\"\n            >\n              <div>\n                <p className=\"font-mono text-sm tracking-wider\">{secret.name}</p>\n                {secret.updated_at && (\n                  <p className=\"text-xs text-muted-foreground mt-1\">\n                    Last updated: {new Date(secret.updated_at).toLocaleString()}\n                  </p>\n                )}\n              </div>\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                onClick={() => handleDeleteSecret(secret.name)}\n                disabled={isDeleting}\n              >\n                Delete\n              </Button>\n            </div>\n          ))\n        ) : (\n          <Alert>\n            <Key className=\"h-4 w-4\" />\n            <AlertTitle>No secrets found</AlertTitle>\n            <AlertDescription>No secrets found for this project.</AlertDescription>\n          </Alert>\n        )}\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/default/platform/platform-kit-nextjs/components/supabase-manager/storage.tsx",
-      "content": "'use client'\n\nimport { useGetBuckets } from '@/registry/default/platform/platform-kit-nextjs/hooks/use-storage'\nimport { Skeleton } from '@/registry/default/components/ui/skeleton'\nimport { Badge } from '@/registry/default/components/ui/badge'\nimport { Button } from '@/registry/default/components/ui/button'\nimport { AlertTriangle, Folder } from 'lucide-react'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/registry/default/components/ui/tooltip'\nimport { Alert, AlertDescription, AlertTitle } from '@/registry/default/components/ui/alert'\n\nexport function StorageManager({ projectRef }: { projectRef: string }) {\n  const { data: buckets, isLoading, isError } = useGetBuckets(projectRef)\n\n  return (\n    <div className=\"p-6 pt-4 lg:p-8 lg:pt-8\">\n      <h1 className=\"text-base lg:text-xl font-semibold\">Storage</h1>\n      <p className=\"hidden lg:block text-sm lg:text-base text-muted-foreground mt-1\">\n        View and manage the files stored in your app.\n      </p>\n\n      {isLoading && (\n        <div className=\"mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\">\n          <Skeleton className=\"h-12 w-full\" />\n          <Skeleton className=\"h-12 w-full\" />\n          <Skeleton className=\"h-12 w-full\" />\n          <Skeleton className=\"h-12 w-full\" />\n        </div>\n      )}\n      {isError && (\n        <Alert variant=\"destructive\" className=\"mt-8\">\n          <AlertTriangle className=\"h-4 w-4\" />\n          <AlertTitle>Error loading buckets</AlertTitle>\n          <AlertDescription>There was a problem loading your storage buckets.</AlertDescription>\n        </Alert>\n      )}\n\n      {buckets && buckets.length > 0 ? (\n        <div className=\"mt-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\">\n          {buckets.map((bucket: any) => (\n            <Tooltip key={bucket.id}>\n              <TooltipTrigger asChild>\n                <Button\n                  key={bucket.id}\n                  variant=\"outline\"\n                  className=\"flex-row justify-start text-left h-auto p-4 gap-4\"\n                >\n                  <Folder className=\"h-4 w-4 text-muted-foreground\" />\n                  <div className=\"flex-1\">\n                    <h2 className=\"font-semibold mb-1\">{bucket.name}</h2>\n\n                    <p className=\"text-xs text-muted-foreground\">\n                      Updated {new Date(bucket.updated_at).toLocaleDateString()}\n                    </p>\n                  </div>\n                  <Badge variant={bucket.public ? 'default' : 'secondary'}>\n                    {bucket.public ? 'Public' : 'Private'}\n                  </Badge>\n                </Button>\n              </TooltipTrigger>\n              <TooltipContent>\n                <p>Viewing files is coming soon</p>\n              </TooltipContent>\n            </Tooltip>\n          ))}\n        </div>\n      ) : buckets && buckets.length === 0 ? (\n        <Alert className=\"mt-8\">\n          <Folder className=\"h-4 w-4\" />\n          <AlertTitle>No storage buckets</AlertTitle>\n          <AlertDescription>\n            A bucket is a container used to store and protect files in your app.\n          </AlertDescription>\n        </Alert>\n      ) : null}\n    </div>\n  )\n}\n",
+      "content": "'use client'\n\nimport { AlertTriangle, Folder } from 'lucide-react'\n\nimport { Alert, AlertDescription, AlertTitle } from '@/registry/default/components/ui/alert'\nimport { Badge } from '@/registry/default/components/ui/badge'\nimport { Button } from '@/registry/default/components/ui/button'\nimport { Skeleton } from '@/registry/default/components/ui/skeleton'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/registry/default/components/ui/tooltip'\nimport { useGetBuckets } from '@/registry/default/platform/platform-kit-nextjs/hooks/use-storage'\n\nexport function StorageManager({ projectRef }: { projectRef: string }) {\n  const { data: buckets, isLoading, isError } = useGetBuckets(projectRef)\n\n  return (\n    <div className=\"p-6 pt-4 lg:p-8 lg:pt-8\">\n      <h1 className=\"text-base lg:text-xl font-semibold\">Storage</h1>\n      <p className=\"hidden lg:block text-sm lg:text-base text-muted-foreground mt-1\">\n        View and manage the files stored in your app.\n      </p>\n\n      {isLoading && (\n        <div className=\"mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\">\n          <Skeleton className=\"h-12 w-full\" />\n          <Skeleton className=\"h-12 w-full\" />\n          <Skeleton className=\"h-12 w-full\" />\n          <Skeleton className=\"h-12 w-full\" />\n        </div>\n      )}\n      {isError && (\n        <Alert variant=\"destructive\" className=\"mt-8\">\n          <AlertTriangle className=\"h-4 w-4\" />\n          <AlertTitle>Error loading buckets</AlertTitle>\n          <AlertDescription>There was a problem loading your storage buckets.</AlertDescription>\n        </Alert>\n      )}\n\n      {buckets && buckets.length > 0 ? (\n        <div className=\"mt-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\">\n          {buckets.map((bucket: any) => (\n            <Tooltip key={bucket.id}>\n              <TooltipTrigger asChild>\n                <Button\n                  key={bucket.id}\n                  variant=\"outline\"\n                  className=\"flex-row justify-start text-left h-auto p-4 gap-4\"\n                >\n                  <Folder className=\"h-4 w-4 text-muted-foreground\" />\n                  <div className=\"flex-1\">\n                    <h2 className=\"font-semibold mb-1\">{bucket.name}</h2>\n\n                    <p className=\"text-xs text-muted-foreground\">\n                      Updated {new Date(bucket.updated_at).toLocaleDateString()}\n                    </p>\n                  </div>\n                  <Badge variant={bucket.public ? 'default' : 'secondary'}>\n                    {bucket.public ? 'Public' : 'Private'}\n                  </Badge>\n                </Button>\n              </TooltipTrigger>\n              <TooltipContent>\n                <p>Viewing files is coming soon</p>\n              </TooltipContent>\n            </Tooltip>\n          ))}\n        </div>\n      ) : buckets && buckets.length === 0 ? (\n        <Alert className=\"mt-8\">\n          <Folder className=\"h-4 w-4\" />\n          <AlertTitle>No storage buckets</AlertTitle>\n          <AlertDescription>\n            A bucket is a container used to store and protect files in your app.\n          </AlertDescription>\n        </Alert>\n      ) : null}\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/default/platform/platform-kit-nextjs/components/supabase-manager/suggestions.tsx",
-      "content": "'use client'\n\nimport { useGetSuggestions } from '@/registry/default/platform/platform-kit-nextjs/hooks/use-suggestions'\nimport { Alert, AlertDescription, AlertTitle } from '@/registry/default/components/ui/alert'\nimport { Terminal } from 'lucide-react'\nimport { Badge } from '@/registry/default/components/ui/badge'\nimport { useMemo } from 'react'\n\nimport ReactMarkdown from 'react-markdown'\nimport { Skeleton } from '@/registry/default/components/ui/skeleton'\n\nexport function SuggestionsManager({ projectRef }: { projectRef: string }) {\n  const { data: suggestions, isLoading, error } = useGetSuggestions(projectRef)\n\n  const sortedSuggestions = useMemo(() => {\n    if (!suggestions) return []\n    const levelOrder = { ERROR: 1, WARN: 2, INFO: 3 }\n    return [...suggestions].sort((a: any, b: any) => {\n      const levelA = levelOrder[a.level as keyof typeof levelOrder] || 99\n      const levelB = levelOrder[b.level as keyof typeof levelOrder] || 99\n      return levelA - levelB\n    })\n  }, [suggestions])\n\n  const getBadgeVariant = (level: 'ERROR' | 'WARN' | 'INFO') => {\n    switch (level) {\n      case 'ERROR':\n        return 'destructive'\n      case 'WARN':\n        return 'secondary'\n      default:\n        return 'outline'\n    }\n  }\n\n  return (\n    <div className=\"p-6 pt-4 lg:p-12 lg:pt-12 max-w-3xl mx-auto\">\n      <h2 className=\"text-base lg:text-xl font-semibold mb-1\">Suggestions</h2>\n      <p className=\"text-muted-foreground mb-4 lg:mb-8 text-sm lg:text-base\">\n        Improve your project&apos;s security and performance.\n      </p>\n      {isLoading && (\n        <div className=\"space-y-2\">\n          <Skeleton className=\"h-6 w-full\" />\n          <Skeleton className=\"h-6 w-full\" />\n          <Skeleton className=\"h-6 w-full\" />\n          <Skeleton className=\"h-6 w-full\" />\n        </div>\n      )}\n      {error && (\n        <Alert variant=\"destructive\" className=\"mt-8\">\n          <Terminal className=\"h-4 w-4\" />\n          <AlertTitle>Error fetching suggestions</AlertTitle>\n          <AlertDescription>\n            {(error as any)?.message || 'An unexpected error occurred. Please try again.'}\n          </AlertDescription>\n        </Alert>\n      )}\n      {suggestions && (\n        <div>\n          {sortedSuggestions.length > 0 ? (\n            <div>\n              {sortedSuggestions.map((suggestion: any) => (\n                <div\n                  key={suggestion.cache_key}\n                  className=\"py-4 border-b last:border-b-0 group relative\"\n                >\n                  <div className=\"flex-1\">\n                    <div className=\"flex justify-start items-start gap-4\">\n                      <h4 className=\"font-semibold text-sm\">{suggestion.title}</h4>\n                      <div className=\"flex items-center gap-1\">\n                        <Badge variant={getBadgeVariant(suggestion.level)} className=\"shrink-0\">\n                          {suggestion.level}\n                        </Badge>\n                        {suggestion.type && (\n                          <Badge\n                            variant={suggestion.type === 'security' ? 'destructive' : 'secondary'}\n                            className=\"shrink-0\"\n                          >\n                            {suggestion.type.charAt(0).toUpperCase() + suggestion.type.slice(1)}\n                          </Badge>\n                        )}\n                      </div>\n                    </div>\n                    <div className=\"text-sm text-muted-foreground mt-2 prose prose-sm max-w-none\">\n                      <ReactMarkdown\n                        components={{\n                          code({ inline, children, ...props }: any) {\n                            return inline ? (\n                              <code className=\"bg-muted px-1 rounded\" {...props}>\n                                {children}\n                              </code>\n                            ) : (\n                              <pre className=\"bg-muted p-2 rounded overflow-x-auto\" {...props}>\n                                <code>{children}</code>\n                              </pre>\n                            )\n                          },\n                        }}\n                      >\n                        {suggestion.detail}\n                      </ReactMarkdown>\n                    </div>\n                  </div>\n                </div>\n              ))}\n            </div>\n          ) : (\n            <Alert>\n              <Terminal className=\"h-4 w-4\" />\n              <AlertTitle>No suggestions found</AlertTitle>\n              <AlertDescription>\n                Your project looks good! No suggestions at this time.\n              </AlertDescription>\n            </Alert>\n          )}\n        </div>\n      )}\n    </div>\n  )\n}\n",
+      "content": "'use client'\n\nimport { Terminal } from 'lucide-react'\nimport { useMemo } from 'react'\nimport ReactMarkdown from 'react-markdown'\n\nimport { Alert, AlertDescription, AlertTitle } from '@/registry/default/components/ui/alert'\nimport { Badge } from '@/registry/default/components/ui/badge'\nimport { Skeleton } from '@/registry/default/components/ui/skeleton'\nimport { useGetSuggestions } from '@/registry/default/platform/platform-kit-nextjs/hooks/use-suggestions'\n\nexport function SuggestionsManager({ projectRef }: { projectRef: string }) {\n  const { data: suggestions, isLoading, error } = useGetSuggestions(projectRef)\n\n  const sortedSuggestions = useMemo(() => {\n    if (!suggestions) return []\n    const levelOrder = { ERROR: 1, WARN: 2, INFO: 3 }\n    return [...suggestions].sort((a: any, b: any) => {\n      const levelA = levelOrder[a.level as keyof typeof levelOrder] || 99\n      const levelB = levelOrder[b.level as keyof typeof levelOrder] || 99\n      return levelA - levelB\n    })\n  }, [suggestions])\n\n  const getBadgeVariant = (level: 'ERROR' | 'WARN' | 'INFO') => {\n    switch (level) {\n      case 'ERROR':\n        return 'destructive'\n      case 'WARN':\n        return 'secondary'\n      default:\n        return 'outline'\n    }\n  }\n\n  return (\n    <div className=\"p-6 pt-4 lg:p-12 lg:pt-12 max-w-3xl mx-auto\">\n      <h2 className=\"text-base lg:text-xl font-semibold mb-1\">Suggestions</h2>\n      <p className=\"text-muted-foreground mb-4 lg:mb-8 text-sm lg:text-base\">\n        Improve your project&apos;s security and performance.\n      </p>\n      {isLoading && (\n        <div className=\"space-y-2\">\n          <Skeleton className=\"h-6 w-full\" />\n          <Skeleton className=\"h-6 w-full\" />\n          <Skeleton className=\"h-6 w-full\" />\n          <Skeleton className=\"h-6 w-full\" />\n        </div>\n      )}\n      {error && (\n        <Alert variant=\"destructive\" className=\"mt-8\">\n          <Terminal className=\"h-4 w-4\" />\n          <AlertTitle>Error fetching suggestions</AlertTitle>\n          <AlertDescription>\n            {(error as any)?.message || 'An unexpected error occurred. Please try again.'}\n          </AlertDescription>\n        </Alert>\n      )}\n      {suggestions && (\n        <div>\n          {sortedSuggestions.length > 0 ? (\n            <div>\n              {sortedSuggestions.map((suggestion: any) => (\n                <div\n                  key={suggestion.cache_key}\n                  className=\"py-4 border-b last:border-b-0 group relative\"\n                >\n                  <div className=\"flex-1\">\n                    <div className=\"flex justify-start items-start gap-4\">\n                      <h4 className=\"font-semibold text-sm\">{suggestion.title}</h4>\n                      <div className=\"flex items-center gap-1\">\n                        <Badge variant={getBadgeVariant(suggestion.level)} className=\"shrink-0\">\n                          {suggestion.level}\n                        </Badge>\n                        {suggestion.type && (\n                          <Badge\n                            variant={suggestion.type === 'security' ? 'destructive' : 'secondary'}\n                            className=\"shrink-0\"\n                          >\n                            {suggestion.type.charAt(0).toUpperCase() + suggestion.type.slice(1)}\n                          </Badge>\n                        )}\n                      </div>\n                    </div>\n                    <div className=\"text-sm text-muted-foreground mt-2 prose prose-sm max-w-none\">\n                      <ReactMarkdown\n                        components={{\n                          code({ inline, children, ...props }: any) {\n                            return inline ? (\n                              <code className=\"bg-muted px-1 rounded\" {...props}>\n                                {children}\n                              </code>\n                            ) : (\n                              <pre className=\"bg-muted p-2 rounded overflow-x-auto\" {...props}>\n                                <code>{children}</code>\n                              </pre>\n                            )\n                          },\n                        }}\n                      >\n                        {suggestion.detail}\n                      </ReactMarkdown>\n                    </div>\n                  </div>\n                </div>\n              ))}\n            </div>\n          ) : (\n            <Alert>\n              <Terminal className=\"h-4 w-4\" />\n              <AlertTitle>No suggestions found</AlertTitle>\n              <AlertDescription>\n                Your project looks good! No suggestions at this time.\n              </AlertDescription>\n            </Alert>\n          )}\n        </div>\n      )}\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/default/platform/platform-kit-nextjs/components/supabase-manager/users.tsx",
-      "content": "'use client'\n\nimport { SqlEditor } from '@/registry/default/platform/platform-kit-nextjs/components/sql-editor'\nimport { useState } from 'react'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/components/ui/select'\nimport { UsersGrowthChart } from '@/registry/default/platform/platform-kit-nextjs/components/users-growth-chart'\n\nexport function UsersManager({ projectRef }: { projectRef: string }) {\n  const [timeRange, setTimeRange] = useState(90)\n  const defaultSql = `SELECT * FROM auth.users ORDER BY created_at DESC LIMIT 100;`\n\n  return (\n    <div className=\"pb-8\">\n      <div className=\"flex items-center justify-between p-6 pt-4 lg:p-8 lg:pt-8\">\n        <div className=\"flex-1\">\n          <h1 className=\"text-base lg:text-xl font-semibold\">Users</h1>\n          <p className=\"hidden lg:block text-sm lg:text-base text-muted-foreground mt-1\">\n            View user signups over time\n          </p>\n        </div>\n        <Select value={String(timeRange)} onValueChange={(value) => setTimeRange(Number(value))}>\n          <SelectTrigger className=\"w-[160px] rounded-lg sm:ml-auto\" aria-label=\"Select a value\">\n            <SelectValue placeholder=\"Select time range\" />\n          </SelectTrigger>\n          <SelectContent className=\"rounded-xl\">\n            <SelectItem value=\"90\" className=\"rounded-lg\">\n              Last 90 days\n            </SelectItem>\n            <SelectItem value=\"30\" className=\"rounded-lg\">\n              Last 30 days\n            </SelectItem>\n            <SelectItem value=\"7\" className=\"rounded-lg\">\n              Last 7 days\n            </SelectItem>\n          </SelectContent>\n        </Select>\n      </div>\n      <div className=\"px-8\">\n        <UsersGrowthChart projectRef={projectRef} timeRange={timeRange} />\n      </div>\n      <SqlEditor\n        hideChartOption\n        projectRef={projectRef}\n        initialSql={defaultSql}\n        initialNaturalLanguageMode={true}\n        label=\"Recent users\"\n        hideSql={true}\n        readOnly={true}\n        runAutomatically={true}\n      />\n    </div>\n  )\n}\n",
+      "content": "'use client'\n\nimport { useState } from 'react'\n\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/components/ui/select'\nimport { SqlEditor } from '@/registry/default/platform/platform-kit-nextjs/components/sql-editor'\nimport { UsersGrowthChart } from '@/registry/default/platform/platform-kit-nextjs/components/users-growth-chart'\n\nexport function UsersManager({ projectRef }: { projectRef: string }) {\n  const [timeRange, setTimeRange] = useState(90)\n  const defaultSql = `SELECT * FROM auth.users ORDER BY created_at DESC LIMIT 100;`\n\n  return (\n    <div className=\"pb-8\">\n      <div className=\"flex items-center justify-between p-6 pt-4 lg:p-8 lg:pt-8\">\n        <div className=\"flex-1\">\n          <h1 className=\"text-base lg:text-xl font-semibold\">Users</h1>\n          <p className=\"hidden lg:block text-sm lg:text-base text-muted-foreground mt-1\">\n            View user signups over time\n          </p>\n        </div>\n        <Select value={String(timeRange)} onValueChange={(value) => setTimeRange(Number(value))}>\n          <SelectTrigger className=\"w-[160px] rounded-lg sm:ml-auto\" aria-label=\"Select a value\">\n            <SelectValue placeholder=\"Select time range\" />\n          </SelectTrigger>\n          <SelectContent className=\"rounded-xl\">\n            <SelectItem value=\"90\" className=\"rounded-lg\">\n              Last 90 days\n            </SelectItem>\n            <SelectItem value=\"30\" className=\"rounded-lg\">\n              Last 30 days\n            </SelectItem>\n            <SelectItem value=\"7\" className=\"rounded-lg\">\n              Last 7 days\n            </SelectItem>\n          </SelectContent>\n        </Select>\n      </div>\n      <div className=\"px-8\">\n        <UsersGrowthChart projectRef={projectRef} timeRange={timeRange} />\n      </div>\n      <SqlEditor\n        hideChartOption\n        projectRef={projectRef}\n        initialSql={defaultSql}\n        initialNaturalLanguageMode={true}\n        label=\"Recent users\"\n        hideSql={true}\n        readOnly={true}\n        runAutomatically={true}\n      />\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/default/platform/platform-kit-nextjs/components/users-growth-chart.tsx",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { Bar, BarChart, CartesianGrid, XAxis, YAxis } from 'recharts'\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from '@/registry/default/components/ui/chart'\nimport { useGetUserCountsByDay } from '@/registry/default/platform/platform-kit-nextjs/hooks/use-user-counts'\nimport { Skeleton } from '@/registry/default/components/ui/skeleton'\nimport { AlertTriangle } from 'lucide-react'\nimport { Alert, AlertDescription, AlertTitle } from '@/registry/default/components/ui/alert'\n\nconst chartConfig = {\n  users: {\n    label: 'New Users',\n    color: 'var(--chart-1)',\n  },\n} satisfies ChartConfig\n\nexport function UsersGrowthChart({\n  projectRef,\n  timeRange,\n}: {\n  projectRef: string\n  timeRange: number\n}) {\n  const { data: chartData, isLoading, isError } = useGetUserCountsByDay(projectRef, timeRange)\n\n  return (\n    <div>\n      {isLoading && <Skeleton className=\"h-[250px] w-full\" />}\n      {isError && (\n        <Alert variant=\"destructive\">\n          <AlertTriangle className=\"h-4 w-4\" />\n          <AlertTitle>Error loading chart data</AlertTitle>\n          <AlertDescription>There was a problem loading your chart data.</AlertDescription>\n        </Alert>\n      )}\n      {chartData && !isLoading && (\n        <ChartContainer config={chartConfig} className=\"aspect-auto h-[250px] w-full\">\n          <BarChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: -24,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              minTickGap={32}\n              tickFormatter={(value) => {\n                const date = new Date(value)\n                return date.toLocaleDateString('en-US', {\n                  month: 'short',\n                  day: 'numeric',\n                })\n              }}\n            />\n            <YAxis\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickCount={5}\n              allowDecimals={false}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  className=\"w-[150px]\"\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString('en-US', {\n                      month: 'short',\n                      day: 'numeric',\n                      year: 'numeric',\n                    })\n                  }}\n                  indicator=\"dot\"\n                />\n              }\n            />\n            <Bar dataKey=\"users\" fill=\"var(--color-users)\" />\n          </BarChart>\n        </ChartContainer>\n      )}\n    </div>\n  )\n}\n",
+      "content": "'use client'\n\nimport { AlertTriangle } from 'lucide-react'\nimport * as React from 'react'\nimport { Bar, BarChart, CartesianGrid, XAxis, YAxis } from 'recharts'\n\nimport { Alert, AlertDescription, AlertTitle } from '@/registry/default/components/ui/alert'\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from '@/registry/default/components/ui/chart'\nimport { Skeleton } from '@/registry/default/components/ui/skeleton'\nimport { useGetUserCountsByDay } from '@/registry/default/platform/platform-kit-nextjs/hooks/use-user-counts'\n\nconst chartConfig = {\n  users: {\n    label: 'New Users',\n    color: 'var(--chart-1)',\n  },\n} satisfies ChartConfig\n\nexport function UsersGrowthChart({\n  projectRef,\n  timeRange,\n}: {\n  projectRef: string\n  timeRange: number\n}) {\n  const { data: chartData, isLoading, isError } = useGetUserCountsByDay(projectRef, timeRange)\n\n  return (\n    <div>\n      {isLoading && <Skeleton className=\"h-[250px] w-full\" />}\n      {isError && (\n        <Alert variant=\"destructive\">\n          <AlertTriangle className=\"h-4 w-4\" />\n          <AlertTitle>Error loading chart data</AlertTitle>\n          <AlertDescription>There was a problem loading your chart data.</AlertDescription>\n        </Alert>\n      )}\n      {chartData && !isLoading && (\n        <ChartContainer config={chartConfig} className=\"aspect-auto h-[250px] w-full\">\n          <BarChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: -24,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              minTickGap={32}\n              tickFormatter={(value) => {\n                const date = new Date(value)\n                return date.toLocaleDateString('en-US', {\n                  month: 'short',\n                  day: 'numeric',\n                })\n              }}\n            />\n            <YAxis\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickCount={5}\n              allowDecimals={false}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  className=\"w-[150px]\"\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString('en-US', {\n                      month: 'short',\n                      day: 'numeric',\n                      year: 'numeric',\n                    })\n                  }}\n                  indicator=\"dot\"\n                />\n              }\n            />\n            <Bar dataKey=\"users\" fill=\"var(--color-users)\" />\n          </BarChart>\n        </ChartContainer>\n      )}\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/default/platform/platform-kit-nextjs/hooks/use-auth.ts",
-      "content": "'use client'\n\nimport { client } from '@/registry/default/platform/platform-kit-nextjs/lib/management-api'\nimport type { components } from '@/registry/default/platform/platform-kit-nextjs/lib/management-api-schema'\nimport { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'\nimport { type AxiosError } from 'axios'\nimport { toast } from 'sonner'\n\nconst getAuthConfig = async (projectRef: string) => {\n  const { data, error } = await client.GET('/v1/projects/{ref}/config/auth', {\n    params: {\n      path: { ref: projectRef },\n    },\n  })\n  if (error) {\n    throw error\n  }\n\n  return data\n}\n\nexport const useGetAuthConfig = (projectRef: string) => {\n  return useQuery({\n    queryKey: ['auth-config', projectRef],\n    queryFn: () => getAuthConfig(projectRef),\n    enabled: !!projectRef,\n    retry: false,\n  })\n}\n\n// UPDATE Auth Config\nconst updateAuthConfig = async ({\n  projectRef,\n  payload,\n}: {\n  projectRef: string\n  payload: components['schemas']['UpdateAuthConfigBody']\n}) => {\n  const { data, error } = await client.PATCH('/v1/projects/{ref}/config/auth', {\n    params: {\n      path: {\n        ref: projectRef,\n      },\n    },\n    body: payload,\n  })\n  if (error) {\n    throw error\n  }\n\n  return data\n}\n\nexport const useUpdateAuthConfig = () => {\n  const queryClient = useQueryClient()\n  return useMutation({\n    mutationFn: updateAuthConfig,\n    onSuccess: (data, variables) => {\n      toast.success(`Auth config updated.`)\n      queryClient.invalidateQueries({\n        queryKey: ['auth-config', variables.projectRef],\n      })\n    },\n    onError: (error: AxiosError<{ message: string }>) => {\n      toast.error(error.response?.data?.message || 'There was a problem with your request.')\n    },\n  })\n}\n",
+      "content": "'use client'\n\nimport { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'\nimport { type AxiosError } from 'axios'\nimport { toast } from 'sonner'\n\nimport { client } from '@/registry/default/platform/platform-kit-nextjs/lib/management-api'\nimport type { components } from '@/registry/default/platform/platform-kit-nextjs/lib/management-api-schema'\n\nconst getAuthConfig = async (projectRef: string) => {\n  const { data, error } = await client.GET('/v1/projects/{ref}/config/auth', {\n    params: {\n      path: { ref: projectRef },\n    },\n  })\n  if (error) {\n    throw error\n  }\n\n  return data\n}\n\nexport const useGetAuthConfig = (projectRef: string) => {\n  return useQuery({\n    queryKey: ['auth-config', projectRef],\n    queryFn: () => getAuthConfig(projectRef),\n    enabled: !!projectRef,\n    retry: false,\n  })\n}\n\n// UPDATE Auth Config\nconst updateAuthConfig = async ({\n  projectRef,\n  payload,\n}: {\n  projectRef: string\n  payload: components['schemas']['UpdateAuthConfigBody']\n}) => {\n  const { data, error } = await client.PATCH('/v1/projects/{ref}/config/auth', {\n    params: {\n      path: {\n        ref: projectRef,\n      },\n    },\n    body: payload,\n  })\n  if (error) {\n    throw error\n  }\n\n  return data\n}\n\nexport const useUpdateAuthConfig = () => {\n  const queryClient = useQueryClient()\n  return useMutation({\n    mutationFn: updateAuthConfig,\n    onSuccess: (data, variables) => {\n      toast.success(`Auth config updated.`)\n      queryClient.invalidateQueries({\n        queryKey: ['auth-config', variables.projectRef],\n      })\n    },\n    onError: (error: AxiosError<{ message: string }>) => {\n      toast.error(error.response?.data?.message || 'There was a problem with your request.')\n    },\n  })\n}\n",
       "type": "registry:hook"
     },
     {
       "path": "registry/default/platform/platform-kit-nextjs/hooks/use-logs.ts",
-      "content": "'use client'\n\nimport { client } from '@/registry/default/platform/platform-kit-nextjs/lib/management-api'\nimport { useQuery } from '@tanstack/react-query'\n\n// GET Logs\nconst getLogs = async ({\n  projectRef,\n  iso_timestamp_start,\n  iso_timestamp_end,\n  sql,\n}: {\n  projectRef: string\n  iso_timestamp_start?: string\n  iso_timestamp_end?: string\n  sql?: string\n}) => {\n  const { data, error } = await client.GET('/v1/projects/{ref}/analytics/endpoints/logs.all', {\n    params: {\n      path: {\n        ref: projectRef,\n      },\n      query: {\n        iso_timestamp_start,\n        iso_timestamp_end,\n        sql,\n      },\n    },\n  })\n  if (error) {\n    throw error\n  }\n\n  return data\n}\n\nexport const useGetLogs = (\n  projectRef: string,\n  params: {\n    iso_timestamp_start?: string\n    iso_timestamp_end?: string\n    sql?: string\n  } = {}\n) => {\n  const queryKey = ['logs', projectRef, params.sql]\n\n  return useQuery({\n    queryKey: queryKey,\n    queryFn: () => {\n      const now = new Date()\n      const oneHourAgo = new Date(now.getTime() - 60 * 60 * 1000)\n\n      const queryParams = {\n        sql: params.sql,\n        iso_timestamp_start: params.iso_timestamp_start ?? oneHourAgo.toISOString(),\n        iso_timestamp_end: params.iso_timestamp_end ?? now.toISOString(),\n      }\n      return getLogs({ projectRef, ...queryParams })\n    },\n    enabled: !!projectRef,\n    retry: false,\n  })\n}\n",
+      "content": "'use client'\n\nimport { useQuery } from '@tanstack/react-query'\n\nimport { client } from '@/registry/default/platform/platform-kit-nextjs/lib/management-api'\n\n// GET Logs\nconst getLogs = async ({\n  projectRef,\n  iso_timestamp_start,\n  iso_timestamp_end,\n  sql,\n}: {\n  projectRef: string\n  iso_timestamp_start?: string\n  iso_timestamp_end?: string\n  sql?: string\n}) => {\n  const { data, error } = await client.GET('/v1/projects/{ref}/analytics/endpoints/logs.all', {\n    params: {\n      path: {\n        ref: projectRef,\n      },\n      query: {\n        iso_timestamp_start,\n        iso_timestamp_end,\n        sql,\n      },\n    },\n  })\n  if (error) {\n    throw error\n  }\n\n  return data\n}\n\nexport const useGetLogs = (\n  projectRef: string,\n  params: {\n    iso_timestamp_start?: string\n    iso_timestamp_end?: string\n    sql?: string\n  } = {}\n) => {\n  const queryKey = ['logs', projectRef, params.sql]\n\n  return useQuery({\n    queryKey: queryKey,\n    queryFn: () => {\n      const now = new Date()\n      const oneHourAgo = new Date(now.getTime() - 60 * 60 * 1000)\n\n      const queryParams = {\n        sql: params.sql,\n        iso_timestamp_start: params.iso_timestamp_start ?? oneHourAgo.toISOString(),\n        iso_timestamp_end: params.iso_timestamp_end ?? now.toISOString(),\n      }\n      return getLogs({ projectRef, ...queryParams })\n    },\n    enabled: !!projectRef,\n    retry: false,\n  })\n}\n",
       "type": "registry:hook"
     },
     {
       "path": "registry/default/platform/platform-kit-nextjs/hooks/use-run-query.ts",
-      "content": "'use client'\n\nimport { client } from '@/registry/default/platform/platform-kit-nextjs/lib/management-api'\nimport { useMutation } from '@tanstack/react-query'\nimport { type AxiosError } from 'axios'\nimport { toast } from 'sonner'\n\n// RUN SQL Query\nexport const runQuery = async ({\n  projectRef,\n  query,\n  readOnly,\n}: {\n  projectRef: string\n  query: string\n  readOnly?: boolean\n}) => {\n  const { data, error } = await client.POST('/v1/projects/{ref}/database/query', {\n    params: {\n      path: {\n        ref: projectRef,\n      },\n    },\n    body: {\n      query,\n      read_only: readOnly,\n    },\n  })\n\n  if (error) {\n    throw error\n  }\n\n  return data as any\n}\n\nexport const useRunQuery = () => {\n  return useMutation({\n    mutationFn: runQuery,\n    onError: (error: AxiosError<{ message: string }>) => {\n      toast.error(error.response?.data?.message || 'There was a problem with your query.')\n    },\n  })\n}\n",
+      "content": "'use client'\n\nimport { useMutation } from '@tanstack/react-query'\nimport { type AxiosError } from 'axios'\nimport { toast } from 'sonner'\n\nimport { client } from '@/registry/default/platform/platform-kit-nextjs/lib/management-api'\n\n// RUN SQL Query\nexport const runQuery = async ({\n  projectRef,\n  query,\n  readOnly,\n}: {\n  projectRef: string\n  query: string\n  readOnly?: boolean\n}) => {\n  const { data, error } = await client.POST('/v1/projects/{ref}/database/query', {\n    params: {\n      path: {\n        ref: projectRef,\n      },\n    },\n    body: {\n      query,\n      read_only: readOnly,\n    },\n  })\n\n  if (error) {\n    throw error\n  }\n\n  return data as any\n}\n\nexport const useRunQuery = () => {\n  return useMutation({\n    mutationFn: runQuery,\n    onError: (error: AxiosError<{ message: string }>) => {\n      toast.error(error.response?.data?.message || 'There was a problem with your query.')\n    },\n  })\n}\n",
       "type": "registry:hook"
     },
     {
       "path": "registry/default/platform/platform-kit-nextjs/hooks/use-secrets.ts",
-      "content": "'use client'\n\nimport { client } from '@/registry/default/platform/platform-kit-nextjs/lib/management-api'\nimport type { components } from '@/registry/default/platform/platform-kit-nextjs/lib/management-api-schema'\nimport { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'\nimport { type AxiosError } from 'axios'\nimport { toast } from 'sonner'\n\n// GET Secrets\nconst getSecrets = async (projectRef: string) => {\n  const { data, error } = await client.GET('/v1/projects/{ref}/secrets', {\n    params: {\n      path: {\n        ref: projectRef,\n      },\n    },\n  })\n  if (error) {\n    throw error\n  }\n\n  return data\n}\n\nexport const useGetSecrets = (projectRef: string) => {\n  return useQuery({\n    queryKey: ['secrets', projectRef],\n    queryFn: () => getSecrets(projectRef),\n    enabled: !!projectRef,\n    retry: false,\n  })\n}\n\n// CREATE Secrets\nconst createSecrets = async ({\n  projectRef,\n  secrets,\n}: {\n  projectRef: string\n  secrets: components['schemas']['CreateSecretBody']\n}) => {\n  const { data, error } = await client.POST('/v1/projects/{ref}/secrets', {\n    params: {\n      path: {\n        ref: projectRef,\n      },\n    },\n    body: secrets,\n  })\n  if (error) {\n    throw error\n  }\n\n  return data\n}\n\nexport const useCreateSecrets = () => {\n  const queryClient = useQueryClient()\n  return useMutation({\n    mutationFn: createSecrets,\n    onSuccess: (data, variables) => {\n      toast.success(`Secrets created successfully.`)\n      queryClient.refetchQueries({\n        queryKey: ['secrets', variables.projectRef],\n      })\n    },\n    onError: (error: AxiosError<{ message: string }>) => {\n      toast.error(error.response?.data?.message || 'There was a problem with your request.')\n    },\n  })\n}\n\n// DELETE Secrets\nconst deleteSecrets = async ({\n  projectRef,\n  secretNames,\n}: {\n  projectRef: string\n  secretNames: string[]\n}) => {\n  const { data, error } = await client.DELETE('/v1/projects/{ref}/secrets', {\n    params: {\n      path: {\n        ref: projectRef,\n      },\n    },\n    body: secretNames,\n  })\n  if (error) {\n    throw error\n  }\n\n  return data\n}\n\nexport const useDeleteSecrets = () => {\n  const queryClient = useQueryClient()\n  return useMutation({\n    mutationFn: deleteSecrets,\n    onSuccess: (data, variables) => {\n      toast.success(`Secrets deleted successfully.`)\n      queryClient.invalidateQueries({\n        queryKey: ['secrets', variables.projectRef],\n      })\n    },\n    onError: (error: AxiosError<{ message: string }>) => {\n      toast.error(error.response?.data?.message || 'There was a problem with your request.')\n    },\n  })\n}\n",
+      "content": "'use client'\n\nimport { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'\nimport { type AxiosError } from 'axios'\nimport { toast } from 'sonner'\n\nimport { client } from '@/registry/default/platform/platform-kit-nextjs/lib/management-api'\nimport type { components } from '@/registry/default/platform/platform-kit-nextjs/lib/management-api-schema'\n\n// GET Secrets\nconst getSecrets = async (projectRef: string) => {\n  const { data, error } = await client.GET('/v1/projects/{ref}/secrets', {\n    params: {\n      path: {\n        ref: projectRef,\n      },\n    },\n  })\n  if (error) {\n    throw error\n  }\n\n  return data\n}\n\nexport const useGetSecrets = (projectRef: string) => {\n  return useQuery({\n    queryKey: ['secrets', projectRef],\n    queryFn: () => getSecrets(projectRef),\n    enabled: !!projectRef,\n    retry: false,\n  })\n}\n\n// CREATE Secrets\nconst createSecrets = async ({\n  projectRef,\n  secrets,\n}: {\n  projectRef: string\n  secrets: components['schemas']['CreateSecretBody']\n}) => {\n  const { data, error } = await client.POST('/v1/projects/{ref}/secrets', {\n    params: {\n      path: {\n        ref: projectRef,\n      },\n    },\n    body: secrets,\n  })\n  if (error) {\n    throw error\n  }\n\n  return data\n}\n\nexport const useCreateSecrets = () => {\n  const queryClient = useQueryClient()\n  return useMutation({\n    mutationFn: createSecrets,\n    onSuccess: (data, variables) => {\n      toast.success(`Secrets created successfully.`)\n      queryClient.refetchQueries({\n        queryKey: ['secrets', variables.projectRef],\n      })\n    },\n    onError: (error: AxiosError<{ message: string }>) => {\n      toast.error(error.response?.data?.message || 'There was a problem with your request.')\n    },\n  })\n}\n\n// DELETE Secrets\nconst deleteSecrets = async ({\n  projectRef,\n  secretNames,\n}: {\n  projectRef: string\n  secretNames: string[]\n}) => {\n  const { data, error } = await client.DELETE('/v1/projects/{ref}/secrets', {\n    params: {\n      path: {\n        ref: projectRef,\n      },\n    },\n    body: secretNames,\n  })\n  if (error) {\n    throw error\n  }\n\n  return data\n}\n\nexport const useDeleteSecrets = () => {\n  const queryClient = useQueryClient()\n  return useMutation({\n    mutationFn: deleteSecrets,\n    onSuccess: (data, variables) => {\n      toast.success(`Secrets deleted successfully.`)\n      queryClient.invalidateQueries({\n        queryKey: ['secrets', variables.projectRef],\n      })\n    },\n    onError: (error: AxiosError<{ message: string }>) => {\n      toast.error(error.response?.data?.message || 'There was a problem with your request.')\n    },\n  })\n}\n",
       "type": "registry:hook"
     },
     {
       "path": "registry/default/platform/platform-kit-nextjs/hooks/use-storage.ts",
-      "content": "'use client'\n\nimport { client } from '@/registry/default/platform/platform-kit-nextjs/lib/management-api'\nimport { useQuery } from '@tanstack/react-query'\n\n// GET Buckets\nconst getBuckets = async (projectRef: string) => {\n  const { data, error } = await client.GET('/v1/projects/{ref}/storage/buckets', {\n    params: {\n      path: {\n        ref: projectRef,\n      },\n    },\n  })\n  if (error) {\n    throw error\n  }\n\n  return data\n}\n\nexport const useGetBuckets = (projectRef: string) => {\n  return useQuery({\n    queryKey: ['buckets', projectRef],\n    queryFn: () => getBuckets(projectRef),\n    enabled: !!projectRef,\n    retry: false,\n  })\n}\n\n// LIST Objects\nconst listObjects = async ({ projectRef, bucketId }: { projectRef: string; bucketId: string }) => {\n  const { data, error } = await client.POST(\n    // TODO\n    // @ts-expect-error this endpoint is not yet implemented\n    '/v1/projects/{ref}/storage/buckets/{bucketId}/objects/list',\n    {\n      params: {\n        path: {\n          ref: projectRef,\n          bucketId,\n        },\n      },\n      body: {\n        path: '',\n        options: { limit: 100, offset: 0 },\n      },\n    }\n  )\n  if (error) {\n    throw error\n  }\n\n  return data as any\n}\n\nexport const useListObjects = (projectRef: string, bucketId: string) => {\n  return useQuery({\n    queryKey: ['objects', projectRef, bucketId],\n    queryFn: () => listObjects({ projectRef, bucketId }),\n    enabled: !!projectRef && !!bucketId,\n  })\n}\n",
+      "content": "'use client'\n\nimport { useQuery } from '@tanstack/react-query'\n\nimport { client } from '@/registry/default/platform/platform-kit-nextjs/lib/management-api'\n\n// GET Buckets\nconst getBuckets = async (projectRef: string) => {\n  const { data, error } = await client.GET('/v1/projects/{ref}/storage/buckets', {\n    params: {\n      path: {\n        ref: projectRef,\n      },\n    },\n  })\n  if (error) {\n    throw error\n  }\n\n  return data\n}\n\nexport const useGetBuckets = (projectRef: string) => {\n  return useQuery({\n    queryKey: ['buckets', projectRef],\n    queryFn: () => getBuckets(projectRef),\n    enabled: !!projectRef,\n    retry: false,\n  })\n}\n\n// LIST Objects\nconst listObjects = async ({ projectRef, bucketId }: { projectRef: string; bucketId: string }) => {\n  const { data, error } = await client.POST(\n    // TODO\n    // @ts-expect-error this endpoint is not yet implemented\n    '/v1/projects/{ref}/storage/buckets/{bucketId}/objects/list',\n    {\n      params: {\n        path: {\n          ref: projectRef,\n          bucketId,\n        },\n      },\n      body: {\n        path: '',\n        options: { limit: 100, offset: 0 },\n      },\n    }\n  )\n  if (error) {\n    throw error\n  }\n\n  return data as any\n}\n\nexport const useListObjects = (projectRef: string, bucketId: string) => {\n  return useQuery({\n    queryKey: ['objects', projectRef, bucketId],\n    queryFn: () => listObjects({ projectRef, bucketId }),\n    enabled: !!projectRef && !!bucketId,\n  })\n}\n",
       "type": "registry:hook"
     },
     {
       "path": "registry/default/platform/platform-kit-nextjs/hooks/use-suggestions.ts",
-      "content": "'use client'\n\nimport { client } from '@/registry/default/platform/platform-kit-nextjs/lib/management-api'\nimport { useQuery } from '@tanstack/react-query'\n\n// GET Suggestions\nconst getSuggestions = async (projectRef: string) => {\n  const [\n    { data: performanceData, error: performanceError },\n    { data: securityData, error: securityError },\n  ] = await Promise.all([\n    client.GET('/v1/projects/{ref}/advisors/performance', {\n      params: {\n        path: {\n          ref: projectRef,\n        },\n      },\n    }),\n    client.GET('/v1/projects/{ref}/advisors/security', {\n      params: {\n        path: {\n          ref: projectRef,\n        },\n      },\n    }),\n  ])\n  if (performanceError) {\n    throw performanceError\n  }\n  if (securityError) {\n    throw securityError\n  }\n\n  // Add type to each suggestion\n  const performanceLints = (performanceData?.lints || []).map((lint) => ({\n    ...lint,\n    type: 'performance' as const,\n  }))\n  const securityLints = (securityData?.lints || []).map((lint) => ({\n    ...lint,\n    type: 'security' as const,\n  }))\n  return [...performanceLints, ...securityLints]\n}\n\nexport const useGetSuggestions = (projectRef: string) => {\n  return useQuery({\n    queryKey: ['suggestions', projectRef],\n    queryFn: () => getSuggestions(projectRef),\n    enabled: !!projectRef,\n    retry: false,\n  })\n}\n",
+      "content": "'use client'\n\nimport { useQuery } from '@tanstack/react-query'\n\nimport { client } from '@/registry/default/platform/platform-kit-nextjs/lib/management-api'\n\n// GET Suggestions\nconst getSuggestions = async (projectRef: string) => {\n  const [\n    { data: performanceData, error: performanceError },\n    { data: securityData, error: securityError },\n  ] = await Promise.all([\n    client.GET('/v1/projects/{ref}/advisors/performance', {\n      params: {\n        path: {\n          ref: projectRef,\n        },\n      },\n    }),\n    client.GET('/v1/projects/{ref}/advisors/security', {\n      params: {\n        path: {\n          ref: projectRef,\n        },\n      },\n    }),\n  ])\n  if (performanceError) {\n    throw performanceError\n  }\n  if (securityError) {\n    throw securityError\n  }\n\n  // Add type to each suggestion\n  const performanceLints = (performanceData?.lints || []).map((lint) => ({\n    ...lint,\n    type: 'performance' as const,\n  }))\n  const securityLints = (securityData?.lints || []).map((lint) => ({\n    ...lint,\n    type: 'security' as const,\n  }))\n  return [...performanceLints, ...securityLints]\n}\n\nexport const useGetSuggestions = (projectRef: string) => {\n  return useQuery({\n    queryKey: ['suggestions', projectRef],\n    queryFn: () => getSuggestions(projectRef),\n    enabled: !!projectRef,\n    retry: false,\n  })\n}\n",
       "type": "registry:hook"
     },
     {
       "path": "registry/default/platform/platform-kit-nextjs/hooks/use-tables.ts",
-      "content": "'use client'\n\nimport { listTablesSql } from '@/registry/default/platform/platform-kit-nextjs/lib/pg-meta'\nimport { runQuery } from '@/registry/default/platform/platform-kit-nextjs/hooks/use-run-query'\nimport { useQuery } from '@tanstack/react-query'\n\n// LIST Tables\nconst listTables = ({ projectRef, schemas }: { projectRef: string; schemas?: string[] }) => {\n  const sql = listTablesSql(schemas)\n  return runQuery({\n    projectRef,\n    query: sql,\n    readOnly: true,\n  })\n}\n\nexport const useListTables = (projectRef: string, schemas?: string[]) => {\n  return useQuery({\n    queryKey: ['tables', projectRef, schemas],\n    queryFn: () => listTables({ projectRef, schemas }),\n    enabled: !!projectRef,\n  })\n}\n",
+      "content": "'use client'\n\nimport { useQuery } from '@tanstack/react-query'\n\nimport { runQuery } from '@/registry/default/platform/platform-kit-nextjs/hooks/use-run-query'\nimport { listTablesSql } from '@/registry/default/platform/platform-kit-nextjs/lib/pg-meta'\n\n// LIST Tables\nconst listTables = ({ projectRef, schemas }: { projectRef: string; schemas?: string[] }) => {\n  const sql = listTablesSql(schemas)\n  return runQuery({\n    projectRef,\n    query: sql,\n    readOnly: true,\n  })\n}\n\nexport const useListTables = (projectRef: string, schemas?: string[]) => {\n  return useQuery({\n    queryKey: ['tables', projectRef, schemas],\n    queryFn: () => listTables({ projectRef, schemas }),\n    enabled: !!projectRef,\n  })\n}\n",
       "type": "registry:hook"
     },
     {
       "path": "registry/default/platform/platform-kit-nextjs/hooks/use-user-counts.ts",
-      "content": "'use client'\n\nimport { useQuery } from '@tanstack/react-query'\nimport { runQuery } from '@/registry/default/platform/platform-kit-nextjs/hooks/use-run-query'\n\n// GET User Counts by day\nconst getUserCountsByDay = ({ projectRef, days }: { projectRef: string; days: number }) => {\n  const sql = `\n    WITH days_series AS (\n      SELECT generate_series(\n        date_trunc('day', now() - interval '${Number(days) - 1} days'),\n        date_trunc('day', now()),\n        '1 day'::interval\n      )::date AS date\n    )\n    SELECT\n      d.date,\n      COALESCE(u.users, 0)::int as users\n    FROM\n      days_series d\n    LEFT JOIN (\n      SELECT\n        date_trunc('day', created_at AT TIME ZONE 'UTC')::date as date,\n        count(id) as users\n      FROM\n        auth.users\n      GROUP BY 1\n    ) u ON d.date = u.date\n    ORDER BY\n      d.date ASC;\n  `\n\n  return runQuery({\n    projectRef,\n    query: sql,\n    readOnly: true,\n  })\n}\n\nexport const useGetUserCountsByDay = (projectRef: string, days: number) => {\n  return useQuery({\n    queryKey: ['user-counts', projectRef, days],\n    queryFn: () => getUserCountsByDay({ projectRef, days }),\n    enabled: !!projectRef,\n    retry: false,\n  })\n}\n",
+      "content": "'use client'\n\nimport { useQuery } from '@tanstack/react-query'\n\nimport { runQuery } from '@/registry/default/platform/platform-kit-nextjs/hooks/use-run-query'\n\n// GET User Counts by day\nconst getUserCountsByDay = ({ projectRef, days }: { projectRef: string; days: number }) => {\n  const sql = `\n    WITH days_series AS (\n      SELECT generate_series(\n        date_trunc('day', now() - interval '${Number(days) - 1} days'),\n        date_trunc('day', now()),\n        '1 day'::interval\n      )::date AS date\n    )\n    SELECT\n      d.date,\n      COALESCE(u.users, 0)::int as users\n    FROM\n      days_series d\n    LEFT JOIN (\n      SELECT\n        date_trunc('day', created_at AT TIME ZONE 'UTC')::date as date,\n        count(id) as users\n      FROM\n        auth.users\n      GROUP BY 1\n    ) u ON d.date = u.date\n    ORDER BY\n      d.date ASC;\n  `\n\n  return runQuery({\n    projectRef,\n    query: sql,\n    readOnly: true,\n  })\n}\n\nexport const useGetUserCountsByDay = (projectRef: string, days: number) => {\n  return useQuery({\n    queryKey: ['user-counts', projectRef, days],\n    queryFn: () => getUserCountsByDay({ projectRef, days }),\n    enabled: !!projectRef,\n    retry: false,\n  })\n}\n",
       "type": "registry:hook"
     },
     {
@@ -171,7 +171,7 @@
     },
     {
       "path": "registry/default/platform/platform-kit-nextjs/lib/management-api.ts",
-      "content": "import createClient from 'openapi-fetch'\nimport type { paths } from './management-api-schema'\n\nexport const client = createClient<paths>({\n  baseUrl: '/api/supabase-proxy',\n})\n",
+      "content": "import createClient from 'openapi-fetch'\n\nimport type { paths } from './management-api-schema'\n\nexport const client = createClient<paths>({\n  baseUrl: '/api/supabase-proxy',\n})\n",
       "type": "registry:lib"
     },
     {
@@ -201,7 +201,7 @@
     },
     {
       "path": "registry/default/platform/platform-kit-nextjs/contexts/SheetNavigationContext.tsx",
-      "content": "'use client'\n\nimport { createContext, useContext, useState, ReactNode, useMemo, useCallback } from 'react'\n\ntype StackItem = {\n  title: string\n  component: ReactNode\n}\n\ntype SheetNavigationContextType = {\n  stack: StackItem[]\n  push: (item: StackItem) => void\n  pop: () => void\n  popTo: (index: number) => void\n  reset: () => void\n}\n\nconst SheetNavigationContext = createContext<SheetNavigationContextType | undefined>(undefined)\n\nexport function SheetNavigationProvider({\n  children,\n  onStackEmpty,\n  initialStack = [],\n}: {\n  children: ReactNode\n  onStackEmpty?: () => void\n  initialStack?: StackItem[]\n}) {\n  const [stack, setStack] = useState<StackItem[]>(initialStack)\n\n  const push = useCallback((item: StackItem) => {\n    setStack((prev) => [...prev, item])\n  }, [])\n\n  const pop = useCallback(() => {\n    setStack((prev) => {\n      const newStack = prev.slice(0, -1)\n      if (newStack.length === 0) {\n        onStackEmpty?.()\n      }\n      return newStack\n    })\n  }, [onStackEmpty])\n\n  const popTo = useCallback((index: number) => {\n    if (index < 0) return\n    setStack((prev) => prev.slice(0, index + 1))\n  }, [])\n\n  const reset = useCallback(() => {\n    setStack([])\n    onStackEmpty?.()\n  }, [onStackEmpty])\n\n  const value = useMemo(\n    () => ({ stack, push, pop, popTo, reset }),\n    [stack, push, pop, popTo, reset]\n  )\n\n  return <SheetNavigationContext.Provider value={value}>{children}</SheetNavigationContext.Provider>\n}\n\nexport function useSheetNavigation() {\n  const context = useContext(SheetNavigationContext)\n  if (context === undefined) {\n    throw new Error('useSheetNavigation must be used within a SheetNavigationProvider')\n  }\n  return context\n}\n",
+      "content": "'use client'\n\nimport { createContext, ReactNode, useCallback, useContext, useMemo, useState } from 'react'\n\ntype StackItem = {\n  title: string\n  component: ReactNode\n}\n\ntype SheetNavigationContextType = {\n  stack: StackItem[]\n  push: (item: StackItem) => void\n  pop: () => void\n  popTo: (index: number) => void\n  reset: () => void\n}\n\nconst SheetNavigationContext = createContext<SheetNavigationContextType | undefined>(undefined)\n\nexport function SheetNavigationProvider({\n  children,\n  onStackEmpty,\n  initialStack = [],\n}: {\n  children: ReactNode\n  onStackEmpty?: () => void\n  initialStack?: StackItem[]\n}) {\n  const [stack, setStack] = useState<StackItem[]>(initialStack)\n\n  const push = useCallback((item: StackItem) => {\n    setStack((prev) => [...prev, item])\n  }, [])\n\n  const pop = useCallback(() => {\n    setStack((prev) => {\n      const newStack = prev.slice(0, -1)\n      if (newStack.length === 0) {\n        onStackEmpty?.()\n      }\n      return newStack\n    })\n  }, [onStackEmpty])\n\n  const popTo = useCallback((index: number) => {\n    if (index < 0) return\n    setStack((prev) => prev.slice(0, index + 1))\n  }, [])\n\n  const reset = useCallback(() => {\n    setStack([])\n    onStackEmpty?.()\n  }, [onStackEmpty])\n\n  const value = useMemo(\n    () => ({ stack, push, pop, popTo, reset }),\n    [stack, push, pop, popTo, reset]\n  )\n\n  return <SheetNavigationContext.Provider value={value}>{children}</SheetNavigationContext.Provider>\n}\n\nexport function useSheetNavigation() {\n  const context = useContext(SheetNavigationContext)\n  if (context === undefined) {\n    throw new Error('useSheetNavigation must be used within a SheetNavigationProvider')\n  }\n  return context\n}\n",
       "type": "registry:component",
       "target": "contexts/SheetNavigationContext.tsx"
     }
diff --git a/apps/ui-library/public/r/realtime-avatar-stack-nextjs.json b/apps/ui-library/public/r/realtime-avatar-stack-nextjs.json
index eeb408df559..7d18cec045e 100644
--- a/apps/ui-library/public/r/realtime-avatar-stack-nextjs.json
+++ b/apps/ui-library/public/r/realtime-avatar-stack-nextjs.json
@@ -15,27 +15,27 @@
   "files": [
     {
       "path": "registry/default/blocks/realtime-avatar-stack/components/avatar-stack.tsx",
-      "content": "import { cn } from '@/lib/utils'\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/default/components/ui/avatar'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/registry/default/components/ui/tooltip'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\n\nconst avatarStackVariants = cva('flex -space-x-4 -space-y-4', {\n  variants: {\n    orientation: {\n      vertical: 'flex-row',\n      horizontal: 'flex-col',\n    },\n  },\n  defaultVariants: {\n    orientation: 'vertical',\n  },\n})\n\nexport interface AvatarStackProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof avatarStackVariants> {\n  avatars: { name: string; image: string }[]\n  maxAvatarsAmount?: number\n}\n\nconst AvatarStack = ({\n  className,\n  orientation,\n  avatars,\n  maxAvatarsAmount = 3,\n  ...props\n}: AvatarStackProps) => {\n  const shownAvatars = avatars.slice(0, maxAvatarsAmount)\n  const hiddenAvatars = avatars.slice(maxAvatarsAmount)\n\n  return (\n    <div\n      className={cn(\n        avatarStackVariants({ orientation }),\n        className,\n        orientation === 'horizontal' ? '-space-x-0' : '-space-y-0'\n      )}\n      {...props}\n    >\n      {shownAvatars.map(({ name, image }, index) => (\n        <Tooltip key={`${name}-${image}-${index}`}>\n          <TooltipTrigger asChild>\n            <Avatar className=\"hover:z-10\">\n              <AvatarImage src={image} />\n              <AvatarFallback>\n                {name\n                  ?.split(' ')\n                  ?.map((word) => word[0])\n                  ?.join('')\n                  ?.toUpperCase()}\n              </AvatarFallback>\n            </Avatar>\n          </TooltipTrigger>\n          <TooltipContent>\n            <p>{name}</p>\n          </TooltipContent>\n        </Tooltip>\n      ))}\n\n      {hiddenAvatars.length ? (\n        <Tooltip key=\"hidden-avatars\">\n          <TooltipTrigger asChild>\n            <Avatar>\n              <AvatarFallback>+{avatars.length - shownAvatars.length}</AvatarFallback>\n            </Avatar>\n          </TooltipTrigger>\n          <TooltipContent>\n            {hiddenAvatars.map(({ name }, index) => (\n              <p key={`${name}-${index}`}>{name}</p>\n            ))}\n          </TooltipContent>\n        </Tooltip>\n      ) : null}\n    </div>\n  )\n}\n\nexport { AvatarStack, avatarStackVariants }\n",
+      "content": "import { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { cn } from '@/lib/utils'\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/default/components/ui/avatar'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/registry/default/components/ui/tooltip'\n\nconst avatarStackVariants = cva('flex -space-x-4 -space-y-4', {\n  variants: {\n    orientation: {\n      vertical: 'flex-row',\n      horizontal: 'flex-col',\n    },\n  },\n  defaultVariants: {\n    orientation: 'vertical',\n  },\n})\n\nexport interface AvatarStackProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof avatarStackVariants> {\n  avatars: { name: string; image: string }[]\n  maxAvatarsAmount?: number\n}\n\nconst AvatarStack = ({\n  className,\n  orientation,\n  avatars,\n  maxAvatarsAmount = 3,\n  ...props\n}: AvatarStackProps) => {\n  const shownAvatars = avatars.slice(0, maxAvatarsAmount)\n  const hiddenAvatars = avatars.slice(maxAvatarsAmount)\n\n  return (\n    <div\n      className={cn(\n        avatarStackVariants({ orientation }),\n        className,\n        orientation === 'horizontal' ? '-space-x-0' : '-space-y-0'\n      )}\n      {...props}\n    >\n      {shownAvatars.map(({ name, image }, index) => (\n        <Tooltip key={`${name}-${image}-${index}`}>\n          <TooltipTrigger asChild>\n            <Avatar className=\"hover:z-10\">\n              <AvatarImage src={image} />\n              <AvatarFallback>\n                {name\n                  ?.split(' ')\n                  ?.map((word) => word[0])\n                  ?.join('')\n                  ?.toUpperCase()}\n              </AvatarFallback>\n            </Avatar>\n          </TooltipTrigger>\n          <TooltipContent>\n            <p>{name}</p>\n          </TooltipContent>\n        </Tooltip>\n      ))}\n\n      {hiddenAvatars.length ? (\n        <Tooltip key=\"hidden-avatars\">\n          <TooltipTrigger asChild>\n            <Avatar>\n              <AvatarFallback>+{avatars.length - shownAvatars.length}</AvatarFallback>\n            </Avatar>\n          </TooltipTrigger>\n          <TooltipContent>\n            {hiddenAvatars.map(({ name }, index) => (\n              <p key={`${name}-${index}`}>{name}</p>\n            ))}\n          </TooltipContent>\n        </Tooltip>\n      ) : null}\n    </div>\n  )\n}\n\nexport { AvatarStack, avatarStackVariants }\n",
       "type": "registry:component"
     },
     {
       "path": "registry/default/blocks/realtime-avatar-stack/components/realtime-avatar-stack.tsx",
-      "content": "'use client'\n\nimport { AvatarStack } from '@/registry/default/blocks/realtime-avatar-stack/components/avatar-stack'\nimport { useRealtimePresenceRoom } from '@/registry/default/blocks/realtime-avatar-stack/hooks/use-realtime-presence-room'\nimport { useMemo } from 'react'\n\nexport const RealtimeAvatarStack = ({ roomName }: { roomName: string }) => {\n  const { users: usersMap } = useRealtimePresenceRoom(roomName)\n  const avatars = useMemo(() => {\n    return Object.values(usersMap).map((user) => ({\n      name: user.name,\n      image: user.image,\n    }))\n  }, [usersMap])\n\n  return <AvatarStack avatars={avatars} />\n}\n",
+      "content": "'use client'\n\nimport { useMemo } from 'react'\n\nimport { AvatarStack } from '@/registry/default/blocks/realtime-avatar-stack/components/avatar-stack'\nimport { useRealtimePresenceRoom } from '@/registry/default/blocks/realtime-avatar-stack/hooks/use-realtime-presence-room'\n\nexport const RealtimeAvatarStack = ({ roomName }: { roomName: string }) => {\n  const { users: usersMap } = useRealtimePresenceRoom(roomName)\n  const avatars = useMemo(() => {\n    return Object.values(usersMap).map((user) => ({\n      name: user.name,\n      image: user.image,\n    }))\n  }, [usersMap])\n\n  return <AvatarStack avatars={avatars} />\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/default/blocks/realtime-avatar-stack/hooks/use-realtime-presence-room.ts",
-      "content": "'use client'\n\nimport { useCurrentUserImage } from '@/registry/default/blocks/current-user-avatar/hooks/use-current-user-image'\nimport { useCurrentUserName } from '@/registry/default/blocks/current-user-avatar/hooks/use-current-user-name'\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\nimport { REALTIME_SUBSCRIBE_STATES } from '@supabase/supabase-js'\nimport { useEffect, useState } from 'react'\n\nconst supabase = createClient()\n\nexport type RealtimeUser = {\n  id: string\n  name: string\n  image: string\n}\n\nexport const useRealtimePresenceRoom = (roomName: string) => {\n  const currentUserImage = useCurrentUserImage()\n  const currentUserName = useCurrentUserName()\n\n  const [users, setUsers] = useState<Record<string, RealtimeUser>>({})\n\n  useEffect(() => {\n    const room = supabase.channel(roomName)\n\n    room\n      .on('presence', { event: 'sync' }, () => {\n        const newState = room.presenceState<{ image: string; name: string }>()\n\n        const newUsers = Object.fromEntries(\n          Object.entries(newState).map(([key, values]) => [\n            key,\n            { name: values[0].name, image: values[0].image },\n          ])\n        ) as Record<string, RealtimeUser>\n        setUsers(newUsers)\n      })\n      .subscribe(async (status) => {\n        if (status === REALTIME_SUBSCRIBE_STATES.SUBSCRIBED) {\n          await room.track({\n            name: currentUserName,\n            image: currentUserImage,\n          })\n        } else {\n          setUsers({})\n        }\n      })\n\n    return () => {\n      room.unsubscribe()\n    }\n  }, [roomName, currentUserName, currentUserImage])\n\n  return { users }\n}\n",
+      "content": "'use client'\n\nimport { REALTIME_SUBSCRIBE_STATES } from '@supabase/supabase-js'\nimport { useEffect, useState } from 'react'\n\nimport { useCurrentUserImage } from '@/registry/default/blocks/current-user-avatar/hooks/use-current-user-image'\nimport { useCurrentUserName } from '@/registry/default/blocks/current-user-avatar/hooks/use-current-user-name'\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\n\nconst supabase = createClient()\n\nexport type RealtimeUser = {\n  id: string\n  name: string\n  image: string\n}\n\nexport const useRealtimePresenceRoom = (roomName: string) => {\n  const currentUserImage = useCurrentUserImage()\n  const currentUserName = useCurrentUserName()\n\n  const [users, setUsers] = useState<Record<string, RealtimeUser>>({})\n\n  useEffect(() => {\n    const room = supabase.channel(roomName)\n\n    room\n      .on('presence', { event: 'sync' }, () => {\n        const newState = room.presenceState<{ image: string; name: string }>()\n\n        const newUsers = Object.fromEntries(\n          Object.entries(newState).map(([key, values]) => [\n            key,\n            { name: values[0].name, image: values[0].image },\n          ])\n        ) as Record<string, RealtimeUser>\n        setUsers(newUsers)\n      })\n      .subscribe(async (status) => {\n        if (status === REALTIME_SUBSCRIBE_STATES.SUBSCRIBED) {\n          await room.track({\n            name: currentUserName,\n            image: currentUserImage,\n          })\n        } else {\n          setUsers({})\n        }\n      })\n\n    return () => {\n      room.unsubscribe()\n    }\n  }, [roomName, currentUserName, currentUserImage])\n\n  return { users }\n}\n",
       "type": "registry:hook"
     },
     {
       "path": "registry/default/blocks/current-user-avatar/hooks/use-current-user-name.ts",
-      "content": "import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\nimport { useEffect, useState } from 'react'\n\nexport const useCurrentUserName = () => {\n  const [name, setName] = useState<string | null>(null)\n\n  useEffect(() => {\n    const fetchProfileName = async () => {\n      const { data, error } = await createClient().auth.getSession()\n      if (error) {\n        console.error(error)\n      }\n\n      setName(data.session?.user.user_metadata.full_name ?? '?')\n    }\n\n    fetchProfileName()\n  }, [])\n\n  return name || '?'\n}\n",
+      "content": "import { useEffect, useState } from 'react'\n\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\n\nexport const useCurrentUserName = () => {\n  const [name, setName] = useState<string | null>(null)\n\n  useEffect(() => {\n    const fetchProfileName = async () => {\n      const { data, error } = await createClient().auth.getSession()\n      if (error) {\n        console.error(error)\n      }\n\n      setName(data.session?.user.user_metadata.full_name ?? '?')\n    }\n\n    fetchProfileName()\n  }, [])\n\n  return name || '?'\n}\n",
       "type": "registry:hook"
     },
     {
       "path": "registry/default/blocks/current-user-avatar/hooks/use-current-user-image.ts",
-      "content": "import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\nimport { useEffect, useState } from 'react'\n\nexport const useCurrentUserImage = () => {\n  const [image, setImage] = useState<string | null>(null)\n\n  useEffect(() => {\n    const fetchUserImage = async () => {\n      const { data, error } = await createClient().auth.getSession()\n      if (error) {\n        console.error(error)\n      }\n\n      setImage(data.session?.user.user_metadata.avatar_url ?? null)\n    }\n    fetchUserImage()\n  }, [])\n\n  return image\n}\n",
+      "content": "import { useEffect, useState } from 'react'\n\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\n\nexport const useCurrentUserImage = () => {\n  const [image, setImage] = useState<string | null>(null)\n\n  useEffect(() => {\n    const fetchUserImage = async () => {\n      const { data, error } = await createClient().auth.getSession()\n      if (error) {\n        console.error(error)\n      }\n\n      setImage(data.session?.user.user_metadata.avatar_url ?? null)\n    }\n    fetchUserImage()\n  }, [])\n\n  return image\n}\n",
       "type": "registry:hook"
     },
     {
diff --git a/apps/ui-library/public/r/realtime-avatar-stack-react-router.json b/apps/ui-library/public/r/realtime-avatar-stack-react-router.json
index 2a6894e715b..d015da3493c 100644
--- a/apps/ui-library/public/r/realtime-avatar-stack-react-router.json
+++ b/apps/ui-library/public/r/realtime-avatar-stack-react-router.json
@@ -15,27 +15,27 @@
   "files": [
     {
       "path": "registry/default/blocks/realtime-avatar-stack/components/avatar-stack.tsx",
-      "content": "import { cn } from '@/lib/utils'\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/default/components/ui/avatar'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/registry/default/components/ui/tooltip'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\n\nconst avatarStackVariants = cva('flex -space-x-4 -space-y-4', {\n  variants: {\n    orientation: {\n      vertical: 'flex-row',\n      horizontal: 'flex-col',\n    },\n  },\n  defaultVariants: {\n    orientation: 'vertical',\n  },\n})\n\nexport interface AvatarStackProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof avatarStackVariants> {\n  avatars: { name: string; image: string }[]\n  maxAvatarsAmount?: number\n}\n\nconst AvatarStack = ({\n  className,\n  orientation,\n  avatars,\n  maxAvatarsAmount = 3,\n  ...props\n}: AvatarStackProps) => {\n  const shownAvatars = avatars.slice(0, maxAvatarsAmount)\n  const hiddenAvatars = avatars.slice(maxAvatarsAmount)\n\n  return (\n    <div\n      className={cn(\n        avatarStackVariants({ orientation }),\n        className,\n        orientation === 'horizontal' ? '-space-x-0' : '-space-y-0'\n      )}\n      {...props}\n    >\n      {shownAvatars.map(({ name, image }, index) => (\n        <Tooltip key={`${name}-${image}-${index}`}>\n          <TooltipTrigger asChild>\n            <Avatar className=\"hover:z-10\">\n              <AvatarImage src={image} />\n              <AvatarFallback>\n                {name\n                  ?.split(' ')\n                  ?.map((word) => word[0])\n                  ?.join('')\n                  ?.toUpperCase()}\n              </AvatarFallback>\n            </Avatar>\n          </TooltipTrigger>\n          <TooltipContent>\n            <p>{name}</p>\n          </TooltipContent>\n        </Tooltip>\n      ))}\n\n      {hiddenAvatars.length ? (\n        <Tooltip key=\"hidden-avatars\">\n          <TooltipTrigger asChild>\n            <Avatar>\n              <AvatarFallback>+{avatars.length - shownAvatars.length}</AvatarFallback>\n            </Avatar>\n          </TooltipTrigger>\n          <TooltipContent>\n            {hiddenAvatars.map(({ name }, index) => (\n              <p key={`${name}-${index}`}>{name}</p>\n            ))}\n          </TooltipContent>\n        </Tooltip>\n      ) : null}\n    </div>\n  )\n}\n\nexport { AvatarStack, avatarStackVariants }\n",
+      "content": "import { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { cn } from '@/lib/utils'\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/default/components/ui/avatar'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/registry/default/components/ui/tooltip'\n\nconst avatarStackVariants = cva('flex -space-x-4 -space-y-4', {\n  variants: {\n    orientation: {\n      vertical: 'flex-row',\n      horizontal: 'flex-col',\n    },\n  },\n  defaultVariants: {\n    orientation: 'vertical',\n  },\n})\n\nexport interface AvatarStackProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof avatarStackVariants> {\n  avatars: { name: string; image: string }[]\n  maxAvatarsAmount?: number\n}\n\nconst AvatarStack = ({\n  className,\n  orientation,\n  avatars,\n  maxAvatarsAmount = 3,\n  ...props\n}: AvatarStackProps) => {\n  const shownAvatars = avatars.slice(0, maxAvatarsAmount)\n  const hiddenAvatars = avatars.slice(maxAvatarsAmount)\n\n  return (\n    <div\n      className={cn(\n        avatarStackVariants({ orientation }),\n        className,\n        orientation === 'horizontal' ? '-space-x-0' : '-space-y-0'\n      )}\n      {...props}\n    >\n      {shownAvatars.map(({ name, image }, index) => (\n        <Tooltip key={`${name}-${image}-${index}`}>\n          <TooltipTrigger asChild>\n            <Avatar className=\"hover:z-10\">\n              <AvatarImage src={image} />\n              <AvatarFallback>\n                {name\n                  ?.split(' ')\n                  ?.map((word) => word[0])\n                  ?.join('')\n                  ?.toUpperCase()}\n              </AvatarFallback>\n            </Avatar>\n          </TooltipTrigger>\n          <TooltipContent>\n            <p>{name}</p>\n          </TooltipContent>\n        </Tooltip>\n      ))}\n\n      {hiddenAvatars.length ? (\n        <Tooltip key=\"hidden-avatars\">\n          <TooltipTrigger asChild>\n            <Avatar>\n              <AvatarFallback>+{avatars.length - shownAvatars.length}</AvatarFallback>\n            </Avatar>\n          </TooltipTrigger>\n          <TooltipContent>\n            {hiddenAvatars.map(({ name }, index) => (\n              <p key={`${name}-${index}`}>{name}</p>\n            ))}\n          </TooltipContent>\n        </Tooltip>\n      ) : null}\n    </div>\n  )\n}\n\nexport { AvatarStack, avatarStackVariants }\n",
       "type": "registry:component"
     },
     {
       "path": "registry/default/blocks/realtime-avatar-stack/components/realtime-avatar-stack.tsx",
-      "content": "'use client'\n\nimport { AvatarStack } from '@/registry/default/blocks/realtime-avatar-stack/components/avatar-stack'\nimport { useRealtimePresenceRoom } from '@/registry/default/blocks/realtime-avatar-stack/hooks/use-realtime-presence-room'\nimport { useMemo } from 'react'\n\nexport const RealtimeAvatarStack = ({ roomName }: { roomName: string }) => {\n  const { users: usersMap } = useRealtimePresenceRoom(roomName)\n  const avatars = useMemo(() => {\n    return Object.values(usersMap).map((user) => ({\n      name: user.name,\n      image: user.image,\n    }))\n  }, [usersMap])\n\n  return <AvatarStack avatars={avatars} />\n}\n",
+      "content": "'use client'\n\nimport { useMemo } from 'react'\n\nimport { AvatarStack } from '@/registry/default/blocks/realtime-avatar-stack/components/avatar-stack'\nimport { useRealtimePresenceRoom } from '@/registry/default/blocks/realtime-avatar-stack/hooks/use-realtime-presence-room'\n\nexport const RealtimeAvatarStack = ({ roomName }: { roomName: string }) => {\n  const { users: usersMap } = useRealtimePresenceRoom(roomName)\n  const avatars = useMemo(() => {\n    return Object.values(usersMap).map((user) => ({\n      name: user.name,\n      image: user.image,\n    }))\n  }, [usersMap])\n\n  return <AvatarStack avatars={avatars} />\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/default/blocks/realtime-avatar-stack/hooks/use-realtime-presence-room.ts",
-      "content": "'use client'\n\nimport { useCurrentUserImage } from '@/registry/default/blocks/current-user-avatar/hooks/use-current-user-image'\nimport { useCurrentUserName } from '@/registry/default/blocks/current-user-avatar/hooks/use-current-user-name'\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\nimport { REALTIME_SUBSCRIBE_STATES } from '@supabase/supabase-js'\nimport { useEffect, useState } from 'react'\n\nconst supabase = createClient()\n\nexport type RealtimeUser = {\n  id: string\n  name: string\n  image: string\n}\n\nexport const useRealtimePresenceRoom = (roomName: string) => {\n  const currentUserImage = useCurrentUserImage()\n  const currentUserName = useCurrentUserName()\n\n  const [users, setUsers] = useState<Record<string, RealtimeUser>>({})\n\n  useEffect(() => {\n    const room = supabase.channel(roomName)\n\n    room\n      .on('presence', { event: 'sync' }, () => {\n        const newState = room.presenceState<{ image: string; name: string }>()\n\n        const newUsers = Object.fromEntries(\n          Object.entries(newState).map(([key, values]) => [\n            key,\n            { name: values[0].name, image: values[0].image },\n          ])\n        ) as Record<string, RealtimeUser>\n        setUsers(newUsers)\n      })\n      .subscribe(async (status) => {\n        if (status === REALTIME_SUBSCRIBE_STATES.SUBSCRIBED) {\n          await room.track({\n            name: currentUserName,\n            image: currentUserImage,\n          })\n        } else {\n          setUsers({})\n        }\n      })\n\n    return () => {\n      room.unsubscribe()\n    }\n  }, [roomName, currentUserName, currentUserImage])\n\n  return { users }\n}\n",
+      "content": "'use client'\n\nimport { REALTIME_SUBSCRIBE_STATES } from '@supabase/supabase-js'\nimport { useEffect, useState } from 'react'\n\nimport { useCurrentUserImage } from '@/registry/default/blocks/current-user-avatar/hooks/use-current-user-image'\nimport { useCurrentUserName } from '@/registry/default/blocks/current-user-avatar/hooks/use-current-user-name'\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\n\nconst supabase = createClient()\n\nexport type RealtimeUser = {\n  id: string\n  name: string\n  image: string\n}\n\nexport const useRealtimePresenceRoom = (roomName: string) => {\n  const currentUserImage = useCurrentUserImage()\n  const currentUserName = useCurrentUserName()\n\n  const [users, setUsers] = useState<Record<string, RealtimeUser>>({})\n\n  useEffect(() => {\n    const room = supabase.channel(roomName)\n\n    room\n      .on('presence', { event: 'sync' }, () => {\n        const newState = room.presenceState<{ image: string; name: string }>()\n\n        const newUsers = Object.fromEntries(\n          Object.entries(newState).map(([key, values]) => [\n            key,\n            { name: values[0].name, image: values[0].image },\n          ])\n        ) as Record<string, RealtimeUser>\n        setUsers(newUsers)\n      })\n      .subscribe(async (status) => {\n        if (status === REALTIME_SUBSCRIBE_STATES.SUBSCRIBED) {\n          await room.track({\n            name: currentUserName,\n            image: currentUserImage,\n          })\n        } else {\n          setUsers({})\n        }\n      })\n\n    return () => {\n      room.unsubscribe()\n    }\n  }, [roomName, currentUserName, currentUserImage])\n\n  return { users }\n}\n",
       "type": "registry:hook"
     },
     {
       "path": "registry/default/blocks/current-user-avatar/hooks/use-current-user-name.ts",
-      "content": "import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\nimport { useEffect, useState } from 'react'\n\nexport const useCurrentUserName = () => {\n  const [name, setName] = useState<string | null>(null)\n\n  useEffect(() => {\n    const fetchProfileName = async () => {\n      const { data, error } = await createClient().auth.getSession()\n      if (error) {\n        console.error(error)\n      }\n\n      setName(data.session?.user.user_metadata.full_name ?? '?')\n    }\n\n    fetchProfileName()\n  }, [])\n\n  return name || '?'\n}\n",
+      "content": "import { useEffect, useState } from 'react'\n\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\n\nexport const useCurrentUserName = () => {\n  const [name, setName] = useState<string | null>(null)\n\n  useEffect(() => {\n    const fetchProfileName = async () => {\n      const { data, error } = await createClient().auth.getSession()\n      if (error) {\n        console.error(error)\n      }\n\n      setName(data.session?.user.user_metadata.full_name ?? '?')\n    }\n\n    fetchProfileName()\n  }, [])\n\n  return name || '?'\n}\n",
       "type": "registry:hook"
     },
     {
       "path": "registry/default/blocks/current-user-avatar/hooks/use-current-user-image.ts",
-      "content": "import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\nimport { useEffect, useState } from 'react'\n\nexport const useCurrentUserImage = () => {\n  const [image, setImage] = useState<string | null>(null)\n\n  useEffect(() => {\n    const fetchUserImage = async () => {\n      const { data, error } = await createClient().auth.getSession()\n      if (error) {\n        console.error(error)\n      }\n\n      setImage(data.session?.user.user_metadata.avatar_url ?? null)\n    }\n    fetchUserImage()\n  }, [])\n\n  return image\n}\n",
+      "content": "import { useEffect, useState } from 'react'\n\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\n\nexport const useCurrentUserImage = () => {\n  const [image, setImage] = useState<string | null>(null)\n\n  useEffect(() => {\n    const fetchUserImage = async () => {\n      const { data, error } = await createClient().auth.getSession()\n      if (error) {\n        console.error(error)\n      }\n\n      setImage(data.session?.user.user_metadata.avatar_url ?? null)\n    }\n    fetchUserImage()\n  }, [])\n\n  return image\n}\n",
       "type": "registry:hook"
     },
     {
diff --git a/apps/ui-library/public/r/realtime-avatar-stack-react.json b/apps/ui-library/public/r/realtime-avatar-stack-react.json
index 4644e0143cc..3cf5a8621f9 100644
--- a/apps/ui-library/public/r/realtime-avatar-stack-react.json
+++ b/apps/ui-library/public/r/realtime-avatar-stack-react.json
@@ -14,27 +14,27 @@
   "files": [
     {
       "path": "registry/default/blocks/realtime-avatar-stack/components/avatar-stack.tsx",
-      "content": "import { cn } from '@/lib/utils'\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/default/components/ui/avatar'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/registry/default/components/ui/tooltip'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\n\nconst avatarStackVariants = cva('flex -space-x-4 -space-y-4', {\n  variants: {\n    orientation: {\n      vertical: 'flex-row',\n      horizontal: 'flex-col',\n    },\n  },\n  defaultVariants: {\n    orientation: 'vertical',\n  },\n})\n\nexport interface AvatarStackProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof avatarStackVariants> {\n  avatars: { name: string; image: string }[]\n  maxAvatarsAmount?: number\n}\n\nconst AvatarStack = ({\n  className,\n  orientation,\n  avatars,\n  maxAvatarsAmount = 3,\n  ...props\n}: AvatarStackProps) => {\n  const shownAvatars = avatars.slice(0, maxAvatarsAmount)\n  const hiddenAvatars = avatars.slice(maxAvatarsAmount)\n\n  return (\n    <div\n      className={cn(\n        avatarStackVariants({ orientation }),\n        className,\n        orientation === 'horizontal' ? '-space-x-0' : '-space-y-0'\n      )}\n      {...props}\n    >\n      {shownAvatars.map(({ name, image }, index) => (\n        <Tooltip key={`${name}-${image}-${index}`}>\n          <TooltipTrigger asChild>\n            <Avatar className=\"hover:z-10\">\n              <AvatarImage src={image} />\n              <AvatarFallback>\n                {name\n                  ?.split(' ')\n                  ?.map((word) => word[0])\n                  ?.join('')\n                  ?.toUpperCase()}\n              </AvatarFallback>\n            </Avatar>\n          </TooltipTrigger>\n          <TooltipContent>\n            <p>{name}</p>\n          </TooltipContent>\n        </Tooltip>\n      ))}\n\n      {hiddenAvatars.length ? (\n        <Tooltip key=\"hidden-avatars\">\n          <TooltipTrigger asChild>\n            <Avatar>\n              <AvatarFallback>+{avatars.length - shownAvatars.length}</AvatarFallback>\n            </Avatar>\n          </TooltipTrigger>\n          <TooltipContent>\n            {hiddenAvatars.map(({ name }, index) => (\n              <p key={`${name}-${index}`}>{name}</p>\n            ))}\n          </TooltipContent>\n        </Tooltip>\n      ) : null}\n    </div>\n  )\n}\n\nexport { AvatarStack, avatarStackVariants }\n",
+      "content": "import { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { cn } from '@/lib/utils'\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/default/components/ui/avatar'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/registry/default/components/ui/tooltip'\n\nconst avatarStackVariants = cva('flex -space-x-4 -space-y-4', {\n  variants: {\n    orientation: {\n      vertical: 'flex-row',\n      horizontal: 'flex-col',\n    },\n  },\n  defaultVariants: {\n    orientation: 'vertical',\n  },\n})\n\nexport interface AvatarStackProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof avatarStackVariants> {\n  avatars: { name: string; image: string }[]\n  maxAvatarsAmount?: number\n}\n\nconst AvatarStack = ({\n  className,\n  orientation,\n  avatars,\n  maxAvatarsAmount = 3,\n  ...props\n}: AvatarStackProps) => {\n  const shownAvatars = avatars.slice(0, maxAvatarsAmount)\n  const hiddenAvatars = avatars.slice(maxAvatarsAmount)\n\n  return (\n    <div\n      className={cn(\n        avatarStackVariants({ orientation }),\n        className,\n        orientation === 'horizontal' ? '-space-x-0' : '-space-y-0'\n      )}\n      {...props}\n    >\n      {shownAvatars.map(({ name, image }, index) => (\n        <Tooltip key={`${name}-${image}-${index}`}>\n          <TooltipTrigger asChild>\n            <Avatar className=\"hover:z-10\">\n              <AvatarImage src={image} />\n              <AvatarFallback>\n                {name\n                  ?.split(' ')\n                  ?.map((word) => word[0])\n                  ?.join('')\n                  ?.toUpperCase()}\n              </AvatarFallback>\n            </Avatar>\n          </TooltipTrigger>\n          <TooltipContent>\n            <p>{name}</p>\n          </TooltipContent>\n        </Tooltip>\n      ))}\n\n      {hiddenAvatars.length ? (\n        <Tooltip key=\"hidden-avatars\">\n          <TooltipTrigger asChild>\n            <Avatar>\n              <AvatarFallback>+{avatars.length - shownAvatars.length}</AvatarFallback>\n            </Avatar>\n          </TooltipTrigger>\n          <TooltipContent>\n            {hiddenAvatars.map(({ name }, index) => (\n              <p key={`${name}-${index}`}>{name}</p>\n            ))}\n          </TooltipContent>\n        </Tooltip>\n      ) : null}\n    </div>\n  )\n}\n\nexport { AvatarStack, avatarStackVariants }\n",
       "type": "registry:component"
     },
     {
       "path": "registry/default/blocks/realtime-avatar-stack/components/realtime-avatar-stack.tsx",
-      "content": "'use client'\n\nimport { AvatarStack } from '@/registry/default/blocks/realtime-avatar-stack/components/avatar-stack'\nimport { useRealtimePresenceRoom } from '@/registry/default/blocks/realtime-avatar-stack/hooks/use-realtime-presence-room'\nimport { useMemo } from 'react'\n\nexport const RealtimeAvatarStack = ({ roomName }: { roomName: string }) => {\n  const { users: usersMap } = useRealtimePresenceRoom(roomName)\n  const avatars = useMemo(() => {\n    return Object.values(usersMap).map((user) => ({\n      name: user.name,\n      image: user.image,\n    }))\n  }, [usersMap])\n\n  return <AvatarStack avatars={avatars} />\n}\n",
+      "content": "'use client'\n\nimport { useMemo } from 'react'\n\nimport { AvatarStack } from '@/registry/default/blocks/realtime-avatar-stack/components/avatar-stack'\nimport { useRealtimePresenceRoom } from '@/registry/default/blocks/realtime-avatar-stack/hooks/use-realtime-presence-room'\n\nexport const RealtimeAvatarStack = ({ roomName }: { roomName: string }) => {\n  const { users: usersMap } = useRealtimePresenceRoom(roomName)\n  const avatars = useMemo(() => {\n    return Object.values(usersMap).map((user) => ({\n      name: user.name,\n      image: user.image,\n    }))\n  }, [usersMap])\n\n  return <AvatarStack avatars={avatars} />\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/default/blocks/realtime-avatar-stack/hooks/use-realtime-presence-room.ts",
-      "content": "'use client'\n\nimport { useCurrentUserImage } from '@/registry/default/blocks/current-user-avatar/hooks/use-current-user-image'\nimport { useCurrentUserName } from '@/registry/default/blocks/current-user-avatar/hooks/use-current-user-name'\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\nimport { REALTIME_SUBSCRIBE_STATES } from '@supabase/supabase-js'\nimport { useEffect, useState } from 'react'\n\nconst supabase = createClient()\n\nexport type RealtimeUser = {\n  id: string\n  name: string\n  image: string\n}\n\nexport const useRealtimePresenceRoom = (roomName: string) => {\n  const currentUserImage = useCurrentUserImage()\n  const currentUserName = useCurrentUserName()\n\n  const [users, setUsers] = useState<Record<string, RealtimeUser>>({})\n\n  useEffect(() => {\n    const room = supabase.channel(roomName)\n\n    room\n      .on('presence', { event: 'sync' }, () => {\n        const newState = room.presenceState<{ image: string; name: string }>()\n\n        const newUsers = Object.fromEntries(\n          Object.entries(newState).map(([key, values]) => [\n            key,\n            { name: values[0].name, image: values[0].image },\n          ])\n        ) as Record<string, RealtimeUser>\n        setUsers(newUsers)\n      })\n      .subscribe(async (status) => {\n        if (status === REALTIME_SUBSCRIBE_STATES.SUBSCRIBED) {\n          await room.track({\n            name: currentUserName,\n            image: currentUserImage,\n          })\n        } else {\n          setUsers({})\n        }\n      })\n\n    return () => {\n      room.unsubscribe()\n    }\n  }, [roomName, currentUserName, currentUserImage])\n\n  return { users }\n}\n",
+      "content": "'use client'\n\nimport { REALTIME_SUBSCRIBE_STATES } from '@supabase/supabase-js'\nimport { useEffect, useState } from 'react'\n\nimport { useCurrentUserImage } from '@/registry/default/blocks/current-user-avatar/hooks/use-current-user-image'\nimport { useCurrentUserName } from '@/registry/default/blocks/current-user-avatar/hooks/use-current-user-name'\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\n\nconst supabase = createClient()\n\nexport type RealtimeUser = {\n  id: string\n  name: string\n  image: string\n}\n\nexport const useRealtimePresenceRoom = (roomName: string) => {\n  const currentUserImage = useCurrentUserImage()\n  const currentUserName = useCurrentUserName()\n\n  const [users, setUsers] = useState<Record<string, RealtimeUser>>({})\n\n  useEffect(() => {\n    const room = supabase.channel(roomName)\n\n    room\n      .on('presence', { event: 'sync' }, () => {\n        const newState = room.presenceState<{ image: string; name: string }>()\n\n        const newUsers = Object.fromEntries(\n          Object.entries(newState).map(([key, values]) => [\n            key,\n            { name: values[0].name, image: values[0].image },\n          ])\n        ) as Record<string, RealtimeUser>\n        setUsers(newUsers)\n      })\n      .subscribe(async (status) => {\n        if (status === REALTIME_SUBSCRIBE_STATES.SUBSCRIBED) {\n          await room.track({\n            name: currentUserName,\n            image: currentUserImage,\n          })\n        } else {\n          setUsers({})\n        }\n      })\n\n    return () => {\n      room.unsubscribe()\n    }\n  }, [roomName, currentUserName, currentUserImage])\n\n  return { users }\n}\n",
       "type": "registry:hook"
     },
     {
       "path": "registry/default/blocks/current-user-avatar/hooks/use-current-user-name.ts",
-      "content": "import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\nimport { useEffect, useState } from 'react'\n\nexport const useCurrentUserName = () => {\n  const [name, setName] = useState<string | null>(null)\n\n  useEffect(() => {\n    const fetchProfileName = async () => {\n      const { data, error } = await createClient().auth.getSession()\n      if (error) {\n        console.error(error)\n      }\n\n      setName(data.session?.user.user_metadata.full_name ?? '?')\n    }\n\n    fetchProfileName()\n  }, [])\n\n  return name || '?'\n}\n",
+      "content": "import { useEffect, useState } from 'react'\n\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\n\nexport const useCurrentUserName = () => {\n  const [name, setName] = useState<string | null>(null)\n\n  useEffect(() => {\n    const fetchProfileName = async () => {\n      const { data, error } = await createClient().auth.getSession()\n      if (error) {\n        console.error(error)\n      }\n\n      setName(data.session?.user.user_metadata.full_name ?? '?')\n    }\n\n    fetchProfileName()\n  }, [])\n\n  return name || '?'\n}\n",
       "type": "registry:hook"
     },
     {
       "path": "registry/default/blocks/current-user-avatar/hooks/use-current-user-image.ts",
-      "content": "import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\nimport { useEffect, useState } from 'react'\n\nexport const useCurrentUserImage = () => {\n  const [image, setImage] = useState<string | null>(null)\n\n  useEffect(() => {\n    const fetchUserImage = async () => {\n      const { data, error } = await createClient().auth.getSession()\n      if (error) {\n        console.error(error)\n      }\n\n      setImage(data.session?.user.user_metadata.avatar_url ?? null)\n    }\n    fetchUserImage()\n  }, [])\n\n  return image\n}\n",
+      "content": "import { useEffect, useState } from 'react'\n\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\n\nexport const useCurrentUserImage = () => {\n  const [image, setImage] = useState<string | null>(null)\n\n  useEffect(() => {\n    const fetchUserImage = async () => {\n      const { data, error } = await createClient().auth.getSession()\n      if (error) {\n        console.error(error)\n      }\n\n      setImage(data.session?.user.user_metadata.avatar_url ?? null)\n    }\n    fetchUserImage()\n  }, [])\n\n  return image\n}\n",
       "type": "registry:hook"
     },
     {
diff --git a/apps/ui-library/public/r/realtime-avatar-stack-tanstack.json b/apps/ui-library/public/r/realtime-avatar-stack-tanstack.json
index 42bcfbdf4ee..8ba7776f6a5 100644
--- a/apps/ui-library/public/r/realtime-avatar-stack-tanstack.json
+++ b/apps/ui-library/public/r/realtime-avatar-stack-tanstack.json
@@ -15,27 +15,27 @@
   "files": [
     {
       "path": "registry/default/blocks/realtime-avatar-stack/components/avatar-stack.tsx",
-      "content": "import { cn } from '@/lib/utils'\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/default/components/ui/avatar'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/registry/default/components/ui/tooltip'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\n\nconst avatarStackVariants = cva('flex -space-x-4 -space-y-4', {\n  variants: {\n    orientation: {\n      vertical: 'flex-row',\n      horizontal: 'flex-col',\n    },\n  },\n  defaultVariants: {\n    orientation: 'vertical',\n  },\n})\n\nexport interface AvatarStackProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof avatarStackVariants> {\n  avatars: { name: string; image: string }[]\n  maxAvatarsAmount?: number\n}\n\nconst AvatarStack = ({\n  className,\n  orientation,\n  avatars,\n  maxAvatarsAmount = 3,\n  ...props\n}: AvatarStackProps) => {\n  const shownAvatars = avatars.slice(0, maxAvatarsAmount)\n  const hiddenAvatars = avatars.slice(maxAvatarsAmount)\n\n  return (\n    <div\n      className={cn(\n        avatarStackVariants({ orientation }),\n        className,\n        orientation === 'horizontal' ? '-space-x-0' : '-space-y-0'\n      )}\n      {...props}\n    >\n      {shownAvatars.map(({ name, image }, index) => (\n        <Tooltip key={`${name}-${image}-${index}`}>\n          <TooltipTrigger asChild>\n            <Avatar className=\"hover:z-10\">\n              <AvatarImage src={image} />\n              <AvatarFallback>\n                {name\n                  ?.split(' ')\n                  ?.map((word) => word[0])\n                  ?.join('')\n                  ?.toUpperCase()}\n              </AvatarFallback>\n            </Avatar>\n          </TooltipTrigger>\n          <TooltipContent>\n            <p>{name}</p>\n          </TooltipContent>\n        </Tooltip>\n      ))}\n\n      {hiddenAvatars.length ? (\n        <Tooltip key=\"hidden-avatars\">\n          <TooltipTrigger asChild>\n            <Avatar>\n              <AvatarFallback>+{avatars.length - shownAvatars.length}</AvatarFallback>\n            </Avatar>\n          </TooltipTrigger>\n          <TooltipContent>\n            {hiddenAvatars.map(({ name }, index) => (\n              <p key={`${name}-${index}`}>{name}</p>\n            ))}\n          </TooltipContent>\n        </Tooltip>\n      ) : null}\n    </div>\n  )\n}\n\nexport { AvatarStack, avatarStackVariants }\n",
+      "content": "import { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { cn } from '@/lib/utils'\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/default/components/ui/avatar'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/registry/default/components/ui/tooltip'\n\nconst avatarStackVariants = cva('flex -space-x-4 -space-y-4', {\n  variants: {\n    orientation: {\n      vertical: 'flex-row',\n      horizontal: 'flex-col',\n    },\n  },\n  defaultVariants: {\n    orientation: 'vertical',\n  },\n})\n\nexport interface AvatarStackProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof avatarStackVariants> {\n  avatars: { name: string; image: string }[]\n  maxAvatarsAmount?: number\n}\n\nconst AvatarStack = ({\n  className,\n  orientation,\n  avatars,\n  maxAvatarsAmount = 3,\n  ...props\n}: AvatarStackProps) => {\n  const shownAvatars = avatars.slice(0, maxAvatarsAmount)\n  const hiddenAvatars = avatars.slice(maxAvatarsAmount)\n\n  return (\n    <div\n      className={cn(\n        avatarStackVariants({ orientation }),\n        className,\n        orientation === 'horizontal' ? '-space-x-0' : '-space-y-0'\n      )}\n      {...props}\n    >\n      {shownAvatars.map(({ name, image }, index) => (\n        <Tooltip key={`${name}-${image}-${index}`}>\n          <TooltipTrigger asChild>\n            <Avatar className=\"hover:z-10\">\n              <AvatarImage src={image} />\n              <AvatarFallback>\n                {name\n                  ?.split(' ')\n                  ?.map((word) => word[0])\n                  ?.join('')\n                  ?.toUpperCase()}\n              </AvatarFallback>\n            </Avatar>\n          </TooltipTrigger>\n          <TooltipContent>\n            <p>{name}</p>\n          </TooltipContent>\n        </Tooltip>\n      ))}\n\n      {hiddenAvatars.length ? (\n        <Tooltip key=\"hidden-avatars\">\n          <TooltipTrigger asChild>\n            <Avatar>\n              <AvatarFallback>+{avatars.length - shownAvatars.length}</AvatarFallback>\n            </Avatar>\n          </TooltipTrigger>\n          <TooltipContent>\n            {hiddenAvatars.map(({ name }, index) => (\n              <p key={`${name}-${index}`}>{name}</p>\n            ))}\n          </TooltipContent>\n        </Tooltip>\n      ) : null}\n    </div>\n  )\n}\n\nexport { AvatarStack, avatarStackVariants }\n",
       "type": "registry:component"
     },
     {
       "path": "registry/default/blocks/realtime-avatar-stack/components/realtime-avatar-stack.tsx",
-      "content": "'use client'\n\nimport { AvatarStack } from '@/registry/default/blocks/realtime-avatar-stack/components/avatar-stack'\nimport { useRealtimePresenceRoom } from '@/registry/default/blocks/realtime-avatar-stack/hooks/use-realtime-presence-room'\nimport { useMemo } from 'react'\n\nexport const RealtimeAvatarStack = ({ roomName }: { roomName: string }) => {\n  const { users: usersMap } = useRealtimePresenceRoom(roomName)\n  const avatars = useMemo(() => {\n    return Object.values(usersMap).map((user) => ({\n      name: user.name,\n      image: user.image,\n    }))\n  }, [usersMap])\n\n  return <AvatarStack avatars={avatars} />\n}\n",
+      "content": "'use client'\n\nimport { useMemo } from 'react'\n\nimport { AvatarStack } from '@/registry/default/blocks/realtime-avatar-stack/components/avatar-stack'\nimport { useRealtimePresenceRoom } from '@/registry/default/blocks/realtime-avatar-stack/hooks/use-realtime-presence-room'\n\nexport const RealtimeAvatarStack = ({ roomName }: { roomName: string }) => {\n  const { users: usersMap } = useRealtimePresenceRoom(roomName)\n  const avatars = useMemo(() => {\n    return Object.values(usersMap).map((user) => ({\n      name: user.name,\n      image: user.image,\n    }))\n  }, [usersMap])\n\n  return <AvatarStack avatars={avatars} />\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/default/blocks/realtime-avatar-stack/hooks/use-realtime-presence-room.ts",
-      "content": "'use client'\n\nimport { useCurrentUserImage } from '@/registry/default/blocks/current-user-avatar/hooks/use-current-user-image'\nimport { useCurrentUserName } from '@/registry/default/blocks/current-user-avatar/hooks/use-current-user-name'\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\nimport { REALTIME_SUBSCRIBE_STATES } from '@supabase/supabase-js'\nimport { useEffect, useState } from 'react'\n\nconst supabase = createClient()\n\nexport type RealtimeUser = {\n  id: string\n  name: string\n  image: string\n}\n\nexport const useRealtimePresenceRoom = (roomName: string) => {\n  const currentUserImage = useCurrentUserImage()\n  const currentUserName = useCurrentUserName()\n\n  const [users, setUsers] = useState<Record<string, RealtimeUser>>({})\n\n  useEffect(() => {\n    const room = supabase.channel(roomName)\n\n    room\n      .on('presence', { event: 'sync' }, () => {\n        const newState = room.presenceState<{ image: string; name: string }>()\n\n        const newUsers = Object.fromEntries(\n          Object.entries(newState).map(([key, values]) => [\n            key,\n            { name: values[0].name, image: values[0].image },\n          ])\n        ) as Record<string, RealtimeUser>\n        setUsers(newUsers)\n      })\n      .subscribe(async (status) => {\n        if (status === REALTIME_SUBSCRIBE_STATES.SUBSCRIBED) {\n          await room.track({\n            name: currentUserName,\n            image: currentUserImage,\n          })\n        } else {\n          setUsers({})\n        }\n      })\n\n    return () => {\n      room.unsubscribe()\n    }\n  }, [roomName, currentUserName, currentUserImage])\n\n  return { users }\n}\n",
+      "content": "'use client'\n\nimport { REALTIME_SUBSCRIBE_STATES } from '@supabase/supabase-js'\nimport { useEffect, useState } from 'react'\n\nimport { useCurrentUserImage } from '@/registry/default/blocks/current-user-avatar/hooks/use-current-user-image'\nimport { useCurrentUserName } from '@/registry/default/blocks/current-user-avatar/hooks/use-current-user-name'\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\n\nconst supabase = createClient()\n\nexport type RealtimeUser = {\n  id: string\n  name: string\n  image: string\n}\n\nexport const useRealtimePresenceRoom = (roomName: string) => {\n  const currentUserImage = useCurrentUserImage()\n  const currentUserName = useCurrentUserName()\n\n  const [users, setUsers] = useState<Record<string, RealtimeUser>>({})\n\n  useEffect(() => {\n    const room = supabase.channel(roomName)\n\n    room\n      .on('presence', { event: 'sync' }, () => {\n        const newState = room.presenceState<{ image: string; name: string }>()\n\n        const newUsers = Object.fromEntries(\n          Object.entries(newState).map(([key, values]) => [\n            key,\n            { name: values[0].name, image: values[0].image },\n          ])\n        ) as Record<string, RealtimeUser>\n        setUsers(newUsers)\n      })\n      .subscribe(async (status) => {\n        if (status === REALTIME_SUBSCRIBE_STATES.SUBSCRIBED) {\n          await room.track({\n            name: currentUserName,\n            image: currentUserImage,\n          })\n        } else {\n          setUsers({})\n        }\n      })\n\n    return () => {\n      room.unsubscribe()\n    }\n  }, [roomName, currentUserName, currentUserImage])\n\n  return { users }\n}\n",
       "type": "registry:hook"
     },
     {
       "path": "registry/default/blocks/current-user-avatar/hooks/use-current-user-name.ts",
-      "content": "import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\nimport { useEffect, useState } from 'react'\n\nexport const useCurrentUserName = () => {\n  const [name, setName] = useState<string | null>(null)\n\n  useEffect(() => {\n    const fetchProfileName = async () => {\n      const { data, error } = await createClient().auth.getSession()\n      if (error) {\n        console.error(error)\n      }\n\n      setName(data.session?.user.user_metadata.full_name ?? '?')\n    }\n\n    fetchProfileName()\n  }, [])\n\n  return name || '?'\n}\n",
+      "content": "import { useEffect, useState } from 'react'\n\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\n\nexport const useCurrentUserName = () => {\n  const [name, setName] = useState<string | null>(null)\n\n  useEffect(() => {\n    const fetchProfileName = async () => {\n      const { data, error } = await createClient().auth.getSession()\n      if (error) {\n        console.error(error)\n      }\n\n      setName(data.session?.user.user_metadata.full_name ?? '?')\n    }\n\n    fetchProfileName()\n  }, [])\n\n  return name || '?'\n}\n",
       "type": "registry:hook"
     },
     {
       "path": "registry/default/blocks/current-user-avatar/hooks/use-current-user-image.ts",
-      "content": "import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\nimport { useEffect, useState } from 'react'\n\nexport const useCurrentUserImage = () => {\n  const [image, setImage] = useState<string | null>(null)\n\n  useEffect(() => {\n    const fetchUserImage = async () => {\n      const { data, error } = await createClient().auth.getSession()\n      if (error) {\n        console.error(error)\n      }\n\n      setImage(data.session?.user.user_metadata.avatar_url ?? null)\n    }\n    fetchUserImage()\n  }, [])\n\n  return image\n}\n",
+      "content": "import { useEffect, useState } from 'react'\n\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\n\nexport const useCurrentUserImage = () => {\n  const [image, setImage] = useState<string | null>(null)\n\n  useEffect(() => {\n    const fetchUserImage = async () => {\n      const { data, error } = await createClient().auth.getSession()\n      if (error) {\n        console.error(error)\n      }\n\n      setImage(data.session?.user.user_metadata.avatar_url ?? null)\n    }\n    fetchUserImage()\n  }, [])\n\n  return image\n}\n",
       "type": "registry:hook"
     },
     {
diff --git a/apps/ui-library/public/r/realtime-chat-nextjs.json b/apps/ui-library/public/r/realtime-chat-nextjs.json
index da3da0756e1..d3d7fd12c77 100644
--- a/apps/ui-library/public/r/realtime-chat-nextjs.json
+++ b/apps/ui-library/public/r/realtime-chat-nextjs.json
@@ -21,12 +21,12 @@
     },
     {
       "path": "registry/default/blocks/realtime-chat/components/realtime-chat.tsx",
-      "content": "'use client'\n\nimport { cn } from '@/lib/utils'\nimport { ChatMessageItem } from '@/registry/default/blocks/realtime-chat/components/chat-message'\nimport { useChatScroll } from '@/registry/default/blocks/realtime-chat/hooks/use-chat-scroll'\nimport {\n  type ChatMessage,\n  useRealtimeChat,\n} from '@/registry/default/blocks/realtime-chat/hooks/use-realtime-chat'\nimport { Button } from '@/registry/default/components/ui/button'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Send } from 'lucide-react'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\n\ninterface RealtimeChatProps {\n  roomName: string\n  username: string\n  onMessage?: (messages: ChatMessage[]) => void\n  messages?: ChatMessage[]\n}\n\n/**\n * Realtime chat component\n * @param roomName - The name of the room to join. Each room is a unique chat.\n * @param username - The username of the user\n * @param onMessage - The callback function to handle the messages. Useful if you want to store the messages in a database.\n * @param messages - The messages to display in the chat. Useful if you want to display messages from a database.\n * @returns The chat component\n */\nexport const RealtimeChat = ({\n  roomName,\n  username,\n  onMessage,\n  messages: initialMessages = [],\n}: RealtimeChatProps) => {\n  const { containerRef, scrollToBottom } = useChatScroll()\n\n  const {\n    messages: realtimeMessages,\n    sendMessage,\n    isConnected,\n  } = useRealtimeChat({\n    roomName,\n    username,\n  })\n  const [newMessage, setNewMessage] = useState('')\n\n  // Merge realtime messages with initial messages\n  const allMessages = useMemo(() => {\n    const mergedMessages = [...initialMessages, ...realtimeMessages]\n    // Remove duplicates based on message id\n    const uniqueMessages = mergedMessages.filter(\n      (message, index, self) => index === self.findIndex((m) => m.id === message.id)\n    )\n    // Sort by creation date\n    const sortedMessages = uniqueMessages.sort((a, b) => a.createdAt.localeCompare(b.createdAt))\n\n    return sortedMessages\n  }, [initialMessages, realtimeMessages])\n\n  useEffect(() => {\n    if (onMessage) {\n      onMessage(allMessages)\n    }\n  }, [allMessages, onMessage])\n\n  useEffect(() => {\n    // Scroll to bottom whenever messages change\n    scrollToBottom()\n  }, [allMessages, scrollToBottom])\n\n  const handleSendMessage = useCallback(\n    (e: React.FormEvent) => {\n      e.preventDefault()\n      if (!newMessage.trim() || !isConnected) return\n\n      sendMessage(newMessage)\n      setNewMessage('')\n    },\n    [newMessage, isConnected, sendMessage]\n  )\n\n  return (\n    <div className=\"flex flex-col h-full w-full bg-background text-foreground antialiased\">\n      {/* Messages */}\n      <div ref={containerRef} className=\"flex-1 overflow-y-auto p-4 space-y-4\">\n        {allMessages.length === 0 ? (\n          <div className=\"text-center text-sm text-muted-foreground\">\n            No messages yet. Start the conversation!\n          </div>\n        ) : null}\n        <div className=\"space-y-1\">\n          {allMessages.map((message, index) => {\n            const prevMessage = index > 0 ? allMessages[index - 1] : null\n            const showHeader = !prevMessage || prevMessage.user.name !== message.user.name\n\n            return (\n              <div\n                key={message.id}\n                className=\"animate-in fade-in slide-in-from-bottom-4 duration-300\"\n              >\n                <ChatMessageItem\n                  message={message}\n                  isOwnMessage={message.user.name === username}\n                  showHeader={showHeader}\n                />\n              </div>\n            )\n          })}\n        </div>\n      </div>\n\n      <form onSubmit={handleSendMessage} className=\"flex w-full gap-2 border-t border-border p-4\">\n        <Input\n          className={cn(\n            'rounded-full bg-background text-sm transition-all duration-300',\n            isConnected && newMessage.trim() ? 'w-[calc(100%-36px)]' : 'w-full'\n          )}\n          type=\"text\"\n          value={newMessage}\n          onChange={(e) => setNewMessage(e.target.value)}\n          placeholder=\"Type a message...\"\n          disabled={!isConnected}\n        />\n        {isConnected && newMessage.trim() && (\n          <Button\n            className=\"aspect-square rounded-full animate-in fade-in slide-in-from-right-4 duration-300\"\n            type=\"submit\"\n            disabled={!isConnected}\n          >\n            <Send className=\"size-4\" />\n          </Button>\n        )}\n      </form>\n    </div>\n  )\n}\n",
+      "content": "'use client'\n\nimport { Send } from 'lucide-react'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\n\nimport { cn } from '@/lib/utils'\nimport { ChatMessageItem } from '@/registry/default/blocks/realtime-chat/components/chat-message'\nimport { useChatScroll } from '@/registry/default/blocks/realtime-chat/hooks/use-chat-scroll'\nimport {\n  useRealtimeChat,\n  type ChatMessage,\n} from '@/registry/default/blocks/realtime-chat/hooks/use-realtime-chat'\nimport { Button } from '@/registry/default/components/ui/button'\nimport { Input } from '@/registry/default/components/ui/input'\n\ninterface RealtimeChatProps {\n  roomName: string\n  username: string\n  onMessage?: (messages: ChatMessage[]) => void\n  messages?: ChatMessage[]\n}\n\n/**\n * Realtime chat component\n * @param roomName - The name of the room to join. Each room is a unique chat.\n * @param username - The username of the user\n * @param onMessage - The callback function to handle the messages. Useful if you want to store the messages in a database.\n * @param messages - The messages to display in the chat. Useful if you want to display messages from a database.\n * @returns The chat component\n */\nexport const RealtimeChat = ({\n  roomName,\n  username,\n  onMessage,\n  messages: initialMessages = [],\n}: RealtimeChatProps) => {\n  const { containerRef, scrollToBottom } = useChatScroll()\n\n  const {\n    messages: realtimeMessages,\n    sendMessage,\n    isConnected,\n  } = useRealtimeChat({\n    roomName,\n    username,\n  })\n  const [newMessage, setNewMessage] = useState('')\n\n  // Merge realtime messages with initial messages\n  const allMessages = useMemo(() => {\n    const mergedMessages = [...initialMessages, ...realtimeMessages]\n    // Remove duplicates based on message id\n    const uniqueMessages = mergedMessages.filter(\n      (message, index, self) => index === self.findIndex((m) => m.id === message.id)\n    )\n    // Sort by creation date\n    const sortedMessages = uniqueMessages.sort((a, b) => a.createdAt.localeCompare(b.createdAt))\n\n    return sortedMessages\n  }, [initialMessages, realtimeMessages])\n\n  useEffect(() => {\n    if (onMessage) {\n      onMessage(allMessages)\n    }\n  }, [allMessages, onMessage])\n\n  useEffect(() => {\n    // Scroll to bottom whenever messages change\n    scrollToBottom()\n  }, [allMessages, scrollToBottom])\n\n  const handleSendMessage = useCallback(\n    (e: React.FormEvent) => {\n      e.preventDefault()\n      if (!newMessage.trim() || !isConnected) return\n\n      sendMessage(newMessage)\n      setNewMessage('')\n    },\n    [newMessage, isConnected, sendMessage]\n  )\n\n  return (\n    <div className=\"flex flex-col h-full w-full bg-background text-foreground antialiased\">\n      {/* Messages */}\n      <div ref={containerRef} className=\"flex-1 overflow-y-auto p-4 space-y-4\">\n        {allMessages.length === 0 ? (\n          <div className=\"text-center text-sm text-muted-foreground\">\n            No messages yet. Start the conversation!\n          </div>\n        ) : null}\n        <div className=\"space-y-1\">\n          {allMessages.map((message, index) => {\n            const prevMessage = index > 0 ? allMessages[index - 1] : null\n            const showHeader = !prevMessage || prevMessage.user.name !== message.user.name\n\n            return (\n              <div\n                key={message.id}\n                className=\"animate-in fade-in slide-in-from-bottom-4 duration-300\"\n              >\n                <ChatMessageItem\n                  message={message}\n                  isOwnMessage={message.user.name === username}\n                  showHeader={showHeader}\n                />\n              </div>\n            )\n          })}\n        </div>\n      </div>\n\n      <form onSubmit={handleSendMessage} className=\"flex w-full gap-2 border-t border-border p-4\">\n        <Input\n          className={cn(\n            'rounded-full bg-background text-sm transition-all duration-300',\n            isConnected && newMessage.trim() ? 'w-[calc(100%-36px)]' : 'w-full'\n          )}\n          type=\"text\"\n          value={newMessage}\n          onChange={(e) => setNewMessage(e.target.value)}\n          placeholder=\"Type a message...\"\n          disabled={!isConnected}\n        />\n        {isConnected && newMessage.trim() && (\n          <Button\n            className=\"aspect-square rounded-full animate-in fade-in slide-in-from-right-4 duration-300\"\n            type=\"submit\"\n            disabled={!isConnected}\n          >\n            <Send className=\"size-4\" />\n          </Button>\n        )}\n      </form>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/default/blocks/realtime-chat/hooks/use-realtime-chat.tsx",
-      "content": "'use client'\n\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\nimport { useCallback, useEffect, useState } from 'react'\n\ninterface UseRealtimeChatProps {\n  roomName: string\n  username: string\n}\n\nexport interface ChatMessage {\n  id: string\n  content: string\n  user: {\n    name: string\n  }\n  createdAt: string\n}\n\nconst EVENT_MESSAGE_TYPE = 'message'\n\nexport function useRealtimeChat({ roomName, username }: UseRealtimeChatProps) {\n  const supabase = createClient()\n  const [messages, setMessages] = useState<ChatMessage[]>([])\n  const [channel, setChannel] = useState<ReturnType<typeof supabase.channel> | null>(null)\n  const [isConnected, setIsConnected] = useState(false)\n\n  useEffect(() => {\n    const newChannel = supabase.channel(roomName)\n\n    newChannel\n      .on('broadcast', { event: EVENT_MESSAGE_TYPE }, (payload) => {\n        setMessages((current) => [...current, payload.payload as ChatMessage])\n      })\n      .subscribe(async (status) => {\n        if (status === 'SUBSCRIBED') {\n          setIsConnected(true)\n        } else {\n          setIsConnected(false)\n        }\n      })\n\n    setChannel(newChannel)\n\n    return () => {\n      supabase.removeChannel(newChannel)\n    }\n  }, [roomName, username, supabase])\n\n  const sendMessage = useCallback(\n    async (content: string) => {\n      if (!channel || !isConnected) return\n\n      const message: ChatMessage = {\n        id: crypto.randomUUID(),\n        content,\n        user: {\n          name: username,\n        },\n        createdAt: new Date().toISOString(),\n      }\n\n      // Update local state immediately for the sender\n      setMessages((current) => [...current, message])\n\n      await channel.send({\n        type: 'broadcast',\n        event: EVENT_MESSAGE_TYPE,\n        payload: message,\n      })\n    },\n    [channel, isConnected, username]\n  )\n\n  return { messages, sendMessage, isConnected }\n}\n",
+      "content": "'use client'\n\nimport { useCallback, useEffect, useState } from 'react'\n\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\n\ninterface UseRealtimeChatProps {\n  roomName: string\n  username: string\n}\n\nexport interface ChatMessage {\n  id: string\n  content: string\n  user: {\n    name: string\n  }\n  createdAt: string\n}\n\nconst EVENT_MESSAGE_TYPE = 'message'\n\nexport function useRealtimeChat({ roomName, username }: UseRealtimeChatProps) {\n  const supabase = createClient()\n  const [messages, setMessages] = useState<ChatMessage[]>([])\n  const [channel, setChannel] = useState<ReturnType<typeof supabase.channel> | null>(null)\n  const [isConnected, setIsConnected] = useState(false)\n\n  useEffect(() => {\n    const newChannel = supabase.channel(roomName)\n\n    newChannel\n      .on('broadcast', { event: EVENT_MESSAGE_TYPE }, (payload) => {\n        setMessages((current) => [...current, payload.payload as ChatMessage])\n      })\n      .subscribe(async (status) => {\n        if (status === 'SUBSCRIBED') {\n          setIsConnected(true)\n        } else {\n          setIsConnected(false)\n        }\n      })\n\n    setChannel(newChannel)\n\n    return () => {\n      supabase.removeChannel(newChannel)\n    }\n  }, [roomName, username, supabase])\n\n  const sendMessage = useCallback(\n    async (content: string) => {\n      if (!channel || !isConnected) return\n\n      const message: ChatMessage = {\n        id: crypto.randomUUID(),\n        content,\n        user: {\n          name: username,\n        },\n        createdAt: new Date().toISOString(),\n      }\n\n      // Update local state immediately for the sender\n      setMessages((current) => [...current, message])\n\n      await channel.send({\n        type: 'broadcast',\n        event: EVENT_MESSAGE_TYPE,\n        payload: message,\n      })\n    },\n    [channel, isConnected, username]\n  )\n\n  return { messages, sendMessage, isConnected }\n}\n",
       "type": "registry:hook"
     },
     {
diff --git a/apps/ui-library/public/r/realtime-chat-react-router.json b/apps/ui-library/public/r/realtime-chat-react-router.json
index 916cf339756..52bfef06c03 100644
--- a/apps/ui-library/public/r/realtime-chat-react-router.json
+++ b/apps/ui-library/public/r/realtime-chat-react-router.json
@@ -21,12 +21,12 @@
     },
     {
       "path": "registry/default/blocks/realtime-chat/components/realtime-chat.tsx",
-      "content": "'use client'\n\nimport { cn } from '@/lib/utils'\nimport { ChatMessageItem } from '@/registry/default/blocks/realtime-chat/components/chat-message'\nimport { useChatScroll } from '@/registry/default/blocks/realtime-chat/hooks/use-chat-scroll'\nimport {\n  type ChatMessage,\n  useRealtimeChat,\n} from '@/registry/default/blocks/realtime-chat/hooks/use-realtime-chat'\nimport { Button } from '@/registry/default/components/ui/button'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Send } from 'lucide-react'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\n\ninterface RealtimeChatProps {\n  roomName: string\n  username: string\n  onMessage?: (messages: ChatMessage[]) => void\n  messages?: ChatMessage[]\n}\n\n/**\n * Realtime chat component\n * @param roomName - The name of the room to join. Each room is a unique chat.\n * @param username - The username of the user\n * @param onMessage - The callback function to handle the messages. Useful if you want to store the messages in a database.\n * @param messages - The messages to display in the chat. Useful if you want to display messages from a database.\n * @returns The chat component\n */\nexport const RealtimeChat = ({\n  roomName,\n  username,\n  onMessage,\n  messages: initialMessages = [],\n}: RealtimeChatProps) => {\n  const { containerRef, scrollToBottom } = useChatScroll()\n\n  const {\n    messages: realtimeMessages,\n    sendMessage,\n    isConnected,\n  } = useRealtimeChat({\n    roomName,\n    username,\n  })\n  const [newMessage, setNewMessage] = useState('')\n\n  // Merge realtime messages with initial messages\n  const allMessages = useMemo(() => {\n    const mergedMessages = [...initialMessages, ...realtimeMessages]\n    // Remove duplicates based on message id\n    const uniqueMessages = mergedMessages.filter(\n      (message, index, self) => index === self.findIndex((m) => m.id === message.id)\n    )\n    // Sort by creation date\n    const sortedMessages = uniqueMessages.sort((a, b) => a.createdAt.localeCompare(b.createdAt))\n\n    return sortedMessages\n  }, [initialMessages, realtimeMessages])\n\n  useEffect(() => {\n    if (onMessage) {\n      onMessage(allMessages)\n    }\n  }, [allMessages, onMessage])\n\n  useEffect(() => {\n    // Scroll to bottom whenever messages change\n    scrollToBottom()\n  }, [allMessages, scrollToBottom])\n\n  const handleSendMessage = useCallback(\n    (e: React.FormEvent) => {\n      e.preventDefault()\n      if (!newMessage.trim() || !isConnected) return\n\n      sendMessage(newMessage)\n      setNewMessage('')\n    },\n    [newMessage, isConnected, sendMessage]\n  )\n\n  return (\n    <div className=\"flex flex-col h-full w-full bg-background text-foreground antialiased\">\n      {/* Messages */}\n      <div ref={containerRef} className=\"flex-1 overflow-y-auto p-4 space-y-4\">\n        {allMessages.length === 0 ? (\n          <div className=\"text-center text-sm text-muted-foreground\">\n            No messages yet. Start the conversation!\n          </div>\n        ) : null}\n        <div className=\"space-y-1\">\n          {allMessages.map((message, index) => {\n            const prevMessage = index > 0 ? allMessages[index - 1] : null\n            const showHeader = !prevMessage || prevMessage.user.name !== message.user.name\n\n            return (\n              <div\n                key={message.id}\n                className=\"animate-in fade-in slide-in-from-bottom-4 duration-300\"\n              >\n                <ChatMessageItem\n                  message={message}\n                  isOwnMessage={message.user.name === username}\n                  showHeader={showHeader}\n                />\n              </div>\n            )\n          })}\n        </div>\n      </div>\n\n      <form onSubmit={handleSendMessage} className=\"flex w-full gap-2 border-t border-border p-4\">\n        <Input\n          className={cn(\n            'rounded-full bg-background text-sm transition-all duration-300',\n            isConnected && newMessage.trim() ? 'w-[calc(100%-36px)]' : 'w-full'\n          )}\n          type=\"text\"\n          value={newMessage}\n          onChange={(e) => setNewMessage(e.target.value)}\n          placeholder=\"Type a message...\"\n          disabled={!isConnected}\n        />\n        {isConnected && newMessage.trim() && (\n          <Button\n            className=\"aspect-square rounded-full animate-in fade-in slide-in-from-right-4 duration-300\"\n            type=\"submit\"\n            disabled={!isConnected}\n          >\n            <Send className=\"size-4\" />\n          </Button>\n        )}\n      </form>\n    </div>\n  )\n}\n",
+      "content": "'use client'\n\nimport { Send } from 'lucide-react'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\n\nimport { cn } from '@/lib/utils'\nimport { ChatMessageItem } from '@/registry/default/blocks/realtime-chat/components/chat-message'\nimport { useChatScroll } from '@/registry/default/blocks/realtime-chat/hooks/use-chat-scroll'\nimport {\n  useRealtimeChat,\n  type ChatMessage,\n} from '@/registry/default/blocks/realtime-chat/hooks/use-realtime-chat'\nimport { Button } from '@/registry/default/components/ui/button'\nimport { Input } from '@/registry/default/components/ui/input'\n\ninterface RealtimeChatProps {\n  roomName: string\n  username: string\n  onMessage?: (messages: ChatMessage[]) => void\n  messages?: ChatMessage[]\n}\n\n/**\n * Realtime chat component\n * @param roomName - The name of the room to join. Each room is a unique chat.\n * @param username - The username of the user\n * @param onMessage - The callback function to handle the messages. Useful if you want to store the messages in a database.\n * @param messages - The messages to display in the chat. Useful if you want to display messages from a database.\n * @returns The chat component\n */\nexport const RealtimeChat = ({\n  roomName,\n  username,\n  onMessage,\n  messages: initialMessages = [],\n}: RealtimeChatProps) => {\n  const { containerRef, scrollToBottom } = useChatScroll()\n\n  const {\n    messages: realtimeMessages,\n    sendMessage,\n    isConnected,\n  } = useRealtimeChat({\n    roomName,\n    username,\n  })\n  const [newMessage, setNewMessage] = useState('')\n\n  // Merge realtime messages with initial messages\n  const allMessages = useMemo(() => {\n    const mergedMessages = [...initialMessages, ...realtimeMessages]\n    // Remove duplicates based on message id\n    const uniqueMessages = mergedMessages.filter(\n      (message, index, self) => index === self.findIndex((m) => m.id === message.id)\n    )\n    // Sort by creation date\n    const sortedMessages = uniqueMessages.sort((a, b) => a.createdAt.localeCompare(b.createdAt))\n\n    return sortedMessages\n  }, [initialMessages, realtimeMessages])\n\n  useEffect(() => {\n    if (onMessage) {\n      onMessage(allMessages)\n    }\n  }, [allMessages, onMessage])\n\n  useEffect(() => {\n    // Scroll to bottom whenever messages change\n    scrollToBottom()\n  }, [allMessages, scrollToBottom])\n\n  const handleSendMessage = useCallback(\n    (e: React.FormEvent) => {\n      e.preventDefault()\n      if (!newMessage.trim() || !isConnected) return\n\n      sendMessage(newMessage)\n      setNewMessage('')\n    },\n    [newMessage, isConnected, sendMessage]\n  )\n\n  return (\n    <div className=\"flex flex-col h-full w-full bg-background text-foreground antialiased\">\n      {/* Messages */}\n      <div ref={containerRef} className=\"flex-1 overflow-y-auto p-4 space-y-4\">\n        {allMessages.length === 0 ? (\n          <div className=\"text-center text-sm text-muted-foreground\">\n            No messages yet. Start the conversation!\n          </div>\n        ) : null}\n        <div className=\"space-y-1\">\n          {allMessages.map((message, index) => {\n            const prevMessage = index > 0 ? allMessages[index - 1] : null\n            const showHeader = !prevMessage || prevMessage.user.name !== message.user.name\n\n            return (\n              <div\n                key={message.id}\n                className=\"animate-in fade-in slide-in-from-bottom-4 duration-300\"\n              >\n                <ChatMessageItem\n                  message={message}\n                  isOwnMessage={message.user.name === username}\n                  showHeader={showHeader}\n                />\n              </div>\n            )\n          })}\n        </div>\n      </div>\n\n      <form onSubmit={handleSendMessage} className=\"flex w-full gap-2 border-t border-border p-4\">\n        <Input\n          className={cn(\n            'rounded-full bg-background text-sm transition-all duration-300',\n            isConnected && newMessage.trim() ? 'w-[calc(100%-36px)]' : 'w-full'\n          )}\n          type=\"text\"\n          value={newMessage}\n          onChange={(e) => setNewMessage(e.target.value)}\n          placeholder=\"Type a message...\"\n          disabled={!isConnected}\n        />\n        {isConnected && newMessage.trim() && (\n          <Button\n            className=\"aspect-square rounded-full animate-in fade-in slide-in-from-right-4 duration-300\"\n            type=\"submit\"\n            disabled={!isConnected}\n          >\n            <Send className=\"size-4\" />\n          </Button>\n        )}\n      </form>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/default/blocks/realtime-chat/hooks/use-realtime-chat.tsx",
-      "content": "'use client'\n\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\nimport { useCallback, useEffect, useState } from 'react'\n\ninterface UseRealtimeChatProps {\n  roomName: string\n  username: string\n}\n\nexport interface ChatMessage {\n  id: string\n  content: string\n  user: {\n    name: string\n  }\n  createdAt: string\n}\n\nconst EVENT_MESSAGE_TYPE = 'message'\n\nexport function useRealtimeChat({ roomName, username }: UseRealtimeChatProps) {\n  const supabase = createClient()\n  const [messages, setMessages] = useState<ChatMessage[]>([])\n  const [channel, setChannel] = useState<ReturnType<typeof supabase.channel> | null>(null)\n  const [isConnected, setIsConnected] = useState(false)\n\n  useEffect(() => {\n    const newChannel = supabase.channel(roomName)\n\n    newChannel\n      .on('broadcast', { event: EVENT_MESSAGE_TYPE }, (payload) => {\n        setMessages((current) => [...current, payload.payload as ChatMessage])\n      })\n      .subscribe(async (status) => {\n        if (status === 'SUBSCRIBED') {\n          setIsConnected(true)\n        } else {\n          setIsConnected(false)\n        }\n      })\n\n    setChannel(newChannel)\n\n    return () => {\n      supabase.removeChannel(newChannel)\n    }\n  }, [roomName, username, supabase])\n\n  const sendMessage = useCallback(\n    async (content: string) => {\n      if (!channel || !isConnected) return\n\n      const message: ChatMessage = {\n        id: crypto.randomUUID(),\n        content,\n        user: {\n          name: username,\n        },\n        createdAt: new Date().toISOString(),\n      }\n\n      // Update local state immediately for the sender\n      setMessages((current) => [...current, message])\n\n      await channel.send({\n        type: 'broadcast',\n        event: EVENT_MESSAGE_TYPE,\n        payload: message,\n      })\n    },\n    [channel, isConnected, username]\n  )\n\n  return { messages, sendMessage, isConnected }\n}\n",
+      "content": "'use client'\n\nimport { useCallback, useEffect, useState } from 'react'\n\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\n\ninterface UseRealtimeChatProps {\n  roomName: string\n  username: string\n}\n\nexport interface ChatMessage {\n  id: string\n  content: string\n  user: {\n    name: string\n  }\n  createdAt: string\n}\n\nconst EVENT_MESSAGE_TYPE = 'message'\n\nexport function useRealtimeChat({ roomName, username }: UseRealtimeChatProps) {\n  const supabase = createClient()\n  const [messages, setMessages] = useState<ChatMessage[]>([])\n  const [channel, setChannel] = useState<ReturnType<typeof supabase.channel> | null>(null)\n  const [isConnected, setIsConnected] = useState(false)\n\n  useEffect(() => {\n    const newChannel = supabase.channel(roomName)\n\n    newChannel\n      .on('broadcast', { event: EVENT_MESSAGE_TYPE }, (payload) => {\n        setMessages((current) => [...current, payload.payload as ChatMessage])\n      })\n      .subscribe(async (status) => {\n        if (status === 'SUBSCRIBED') {\n          setIsConnected(true)\n        } else {\n          setIsConnected(false)\n        }\n      })\n\n    setChannel(newChannel)\n\n    return () => {\n      supabase.removeChannel(newChannel)\n    }\n  }, [roomName, username, supabase])\n\n  const sendMessage = useCallback(\n    async (content: string) => {\n      if (!channel || !isConnected) return\n\n      const message: ChatMessage = {\n        id: crypto.randomUUID(),\n        content,\n        user: {\n          name: username,\n        },\n        createdAt: new Date().toISOString(),\n      }\n\n      // Update local state immediately for the sender\n      setMessages((current) => [...current, message])\n\n      await channel.send({\n        type: 'broadcast',\n        event: EVENT_MESSAGE_TYPE,\n        payload: message,\n      })\n    },\n    [channel, isConnected, username]\n  )\n\n  return { messages, sendMessage, isConnected }\n}\n",
       "type": "registry:hook"
     },
     {
diff --git a/apps/ui-library/public/r/realtime-chat-react.json b/apps/ui-library/public/r/realtime-chat-react.json
index a11efd3cd3a..5d111fe2ca9 100644
--- a/apps/ui-library/public/r/realtime-chat-react.json
+++ b/apps/ui-library/public/r/realtime-chat-react.json
@@ -20,12 +20,12 @@
     },
     {
       "path": "registry/default/blocks/realtime-chat/components/realtime-chat.tsx",
-      "content": "'use client'\n\nimport { cn } from '@/lib/utils'\nimport { ChatMessageItem } from '@/registry/default/blocks/realtime-chat/components/chat-message'\nimport { useChatScroll } from '@/registry/default/blocks/realtime-chat/hooks/use-chat-scroll'\nimport {\n  type ChatMessage,\n  useRealtimeChat,\n} from '@/registry/default/blocks/realtime-chat/hooks/use-realtime-chat'\nimport { Button } from '@/registry/default/components/ui/button'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Send } from 'lucide-react'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\n\ninterface RealtimeChatProps {\n  roomName: string\n  username: string\n  onMessage?: (messages: ChatMessage[]) => void\n  messages?: ChatMessage[]\n}\n\n/**\n * Realtime chat component\n * @param roomName - The name of the room to join. Each room is a unique chat.\n * @param username - The username of the user\n * @param onMessage - The callback function to handle the messages. Useful if you want to store the messages in a database.\n * @param messages - The messages to display in the chat. Useful if you want to display messages from a database.\n * @returns The chat component\n */\nexport const RealtimeChat = ({\n  roomName,\n  username,\n  onMessage,\n  messages: initialMessages = [],\n}: RealtimeChatProps) => {\n  const { containerRef, scrollToBottom } = useChatScroll()\n\n  const {\n    messages: realtimeMessages,\n    sendMessage,\n    isConnected,\n  } = useRealtimeChat({\n    roomName,\n    username,\n  })\n  const [newMessage, setNewMessage] = useState('')\n\n  // Merge realtime messages with initial messages\n  const allMessages = useMemo(() => {\n    const mergedMessages = [...initialMessages, ...realtimeMessages]\n    // Remove duplicates based on message id\n    const uniqueMessages = mergedMessages.filter(\n      (message, index, self) => index === self.findIndex((m) => m.id === message.id)\n    )\n    // Sort by creation date\n    const sortedMessages = uniqueMessages.sort((a, b) => a.createdAt.localeCompare(b.createdAt))\n\n    return sortedMessages\n  }, [initialMessages, realtimeMessages])\n\n  useEffect(() => {\n    if (onMessage) {\n      onMessage(allMessages)\n    }\n  }, [allMessages, onMessage])\n\n  useEffect(() => {\n    // Scroll to bottom whenever messages change\n    scrollToBottom()\n  }, [allMessages, scrollToBottom])\n\n  const handleSendMessage = useCallback(\n    (e: React.FormEvent) => {\n      e.preventDefault()\n      if (!newMessage.trim() || !isConnected) return\n\n      sendMessage(newMessage)\n      setNewMessage('')\n    },\n    [newMessage, isConnected, sendMessage]\n  )\n\n  return (\n    <div className=\"flex flex-col h-full w-full bg-background text-foreground antialiased\">\n      {/* Messages */}\n      <div ref={containerRef} className=\"flex-1 overflow-y-auto p-4 space-y-4\">\n        {allMessages.length === 0 ? (\n          <div className=\"text-center text-sm text-muted-foreground\">\n            No messages yet. Start the conversation!\n          </div>\n        ) : null}\n        <div className=\"space-y-1\">\n          {allMessages.map((message, index) => {\n            const prevMessage = index > 0 ? allMessages[index - 1] : null\n            const showHeader = !prevMessage || prevMessage.user.name !== message.user.name\n\n            return (\n              <div\n                key={message.id}\n                className=\"animate-in fade-in slide-in-from-bottom-4 duration-300\"\n              >\n                <ChatMessageItem\n                  message={message}\n                  isOwnMessage={message.user.name === username}\n                  showHeader={showHeader}\n                />\n              </div>\n            )\n          })}\n        </div>\n      </div>\n\n      <form onSubmit={handleSendMessage} className=\"flex w-full gap-2 border-t border-border p-4\">\n        <Input\n          className={cn(\n            'rounded-full bg-background text-sm transition-all duration-300',\n            isConnected && newMessage.trim() ? 'w-[calc(100%-36px)]' : 'w-full'\n          )}\n          type=\"text\"\n          value={newMessage}\n          onChange={(e) => setNewMessage(e.target.value)}\n          placeholder=\"Type a message...\"\n          disabled={!isConnected}\n        />\n        {isConnected && newMessage.trim() && (\n          <Button\n            className=\"aspect-square rounded-full animate-in fade-in slide-in-from-right-4 duration-300\"\n            type=\"submit\"\n            disabled={!isConnected}\n          >\n            <Send className=\"size-4\" />\n          </Button>\n        )}\n      </form>\n    </div>\n  )\n}\n",
+      "content": "'use client'\n\nimport { Send } from 'lucide-react'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\n\nimport { cn } from '@/lib/utils'\nimport { ChatMessageItem } from '@/registry/default/blocks/realtime-chat/components/chat-message'\nimport { useChatScroll } from '@/registry/default/blocks/realtime-chat/hooks/use-chat-scroll'\nimport {\n  useRealtimeChat,\n  type ChatMessage,\n} from '@/registry/default/blocks/realtime-chat/hooks/use-realtime-chat'\nimport { Button } from '@/registry/default/components/ui/button'\nimport { Input } from '@/registry/default/components/ui/input'\n\ninterface RealtimeChatProps {\n  roomName: string\n  username: string\n  onMessage?: (messages: ChatMessage[]) => void\n  messages?: ChatMessage[]\n}\n\n/**\n * Realtime chat component\n * @param roomName - The name of the room to join. Each room is a unique chat.\n * @param username - The username of the user\n * @param onMessage - The callback function to handle the messages. Useful if you want to store the messages in a database.\n * @param messages - The messages to display in the chat. Useful if you want to display messages from a database.\n * @returns The chat component\n */\nexport const RealtimeChat = ({\n  roomName,\n  username,\n  onMessage,\n  messages: initialMessages = [],\n}: RealtimeChatProps) => {\n  const { containerRef, scrollToBottom } = useChatScroll()\n\n  const {\n    messages: realtimeMessages,\n    sendMessage,\n    isConnected,\n  } = useRealtimeChat({\n    roomName,\n    username,\n  })\n  const [newMessage, setNewMessage] = useState('')\n\n  // Merge realtime messages with initial messages\n  const allMessages = useMemo(() => {\n    const mergedMessages = [...initialMessages, ...realtimeMessages]\n    // Remove duplicates based on message id\n    const uniqueMessages = mergedMessages.filter(\n      (message, index, self) => index === self.findIndex((m) => m.id === message.id)\n    )\n    // Sort by creation date\n    const sortedMessages = uniqueMessages.sort((a, b) => a.createdAt.localeCompare(b.createdAt))\n\n    return sortedMessages\n  }, [initialMessages, realtimeMessages])\n\n  useEffect(() => {\n    if (onMessage) {\n      onMessage(allMessages)\n    }\n  }, [allMessages, onMessage])\n\n  useEffect(() => {\n    // Scroll to bottom whenever messages change\n    scrollToBottom()\n  }, [allMessages, scrollToBottom])\n\n  const handleSendMessage = useCallback(\n    (e: React.FormEvent) => {\n      e.preventDefault()\n      if (!newMessage.trim() || !isConnected) return\n\n      sendMessage(newMessage)\n      setNewMessage('')\n    },\n    [newMessage, isConnected, sendMessage]\n  )\n\n  return (\n    <div className=\"flex flex-col h-full w-full bg-background text-foreground antialiased\">\n      {/* Messages */}\n      <div ref={containerRef} className=\"flex-1 overflow-y-auto p-4 space-y-4\">\n        {allMessages.length === 0 ? (\n          <div className=\"text-center text-sm text-muted-foreground\">\n            No messages yet. Start the conversation!\n          </div>\n        ) : null}\n        <div className=\"space-y-1\">\n          {allMessages.map((message, index) => {\n            const prevMessage = index > 0 ? allMessages[index - 1] : null\n            const showHeader = !prevMessage || prevMessage.user.name !== message.user.name\n\n            return (\n              <div\n                key={message.id}\n                className=\"animate-in fade-in slide-in-from-bottom-4 duration-300\"\n              >\n                <ChatMessageItem\n                  message={message}\n                  isOwnMessage={message.user.name === username}\n                  showHeader={showHeader}\n                />\n              </div>\n            )\n          })}\n        </div>\n      </div>\n\n      <form onSubmit={handleSendMessage} className=\"flex w-full gap-2 border-t border-border p-4\">\n        <Input\n          className={cn(\n            'rounded-full bg-background text-sm transition-all duration-300',\n            isConnected && newMessage.trim() ? 'w-[calc(100%-36px)]' : 'w-full'\n          )}\n          type=\"text\"\n          value={newMessage}\n          onChange={(e) => setNewMessage(e.target.value)}\n          placeholder=\"Type a message...\"\n          disabled={!isConnected}\n        />\n        {isConnected && newMessage.trim() && (\n          <Button\n            className=\"aspect-square rounded-full animate-in fade-in slide-in-from-right-4 duration-300\"\n            type=\"submit\"\n            disabled={!isConnected}\n          >\n            <Send className=\"size-4\" />\n          </Button>\n        )}\n      </form>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/default/blocks/realtime-chat/hooks/use-realtime-chat.tsx",
-      "content": "'use client'\n\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\nimport { useCallback, useEffect, useState } from 'react'\n\ninterface UseRealtimeChatProps {\n  roomName: string\n  username: string\n}\n\nexport interface ChatMessage {\n  id: string\n  content: string\n  user: {\n    name: string\n  }\n  createdAt: string\n}\n\nconst EVENT_MESSAGE_TYPE = 'message'\n\nexport function useRealtimeChat({ roomName, username }: UseRealtimeChatProps) {\n  const supabase = createClient()\n  const [messages, setMessages] = useState<ChatMessage[]>([])\n  const [channel, setChannel] = useState<ReturnType<typeof supabase.channel> | null>(null)\n  const [isConnected, setIsConnected] = useState(false)\n\n  useEffect(() => {\n    const newChannel = supabase.channel(roomName)\n\n    newChannel\n      .on('broadcast', { event: EVENT_MESSAGE_TYPE }, (payload) => {\n        setMessages((current) => [...current, payload.payload as ChatMessage])\n      })\n      .subscribe(async (status) => {\n        if (status === 'SUBSCRIBED') {\n          setIsConnected(true)\n        } else {\n          setIsConnected(false)\n        }\n      })\n\n    setChannel(newChannel)\n\n    return () => {\n      supabase.removeChannel(newChannel)\n    }\n  }, [roomName, username, supabase])\n\n  const sendMessage = useCallback(\n    async (content: string) => {\n      if (!channel || !isConnected) return\n\n      const message: ChatMessage = {\n        id: crypto.randomUUID(),\n        content,\n        user: {\n          name: username,\n        },\n        createdAt: new Date().toISOString(),\n      }\n\n      // Update local state immediately for the sender\n      setMessages((current) => [...current, message])\n\n      await channel.send({\n        type: 'broadcast',\n        event: EVENT_MESSAGE_TYPE,\n        payload: message,\n      })\n    },\n    [channel, isConnected, username]\n  )\n\n  return { messages, sendMessage, isConnected }\n}\n",
+      "content": "'use client'\n\nimport { useCallback, useEffect, useState } from 'react'\n\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\n\ninterface UseRealtimeChatProps {\n  roomName: string\n  username: string\n}\n\nexport interface ChatMessage {\n  id: string\n  content: string\n  user: {\n    name: string\n  }\n  createdAt: string\n}\n\nconst EVENT_MESSAGE_TYPE = 'message'\n\nexport function useRealtimeChat({ roomName, username }: UseRealtimeChatProps) {\n  const supabase = createClient()\n  const [messages, setMessages] = useState<ChatMessage[]>([])\n  const [channel, setChannel] = useState<ReturnType<typeof supabase.channel> | null>(null)\n  const [isConnected, setIsConnected] = useState(false)\n\n  useEffect(() => {\n    const newChannel = supabase.channel(roomName)\n\n    newChannel\n      .on('broadcast', { event: EVENT_MESSAGE_TYPE }, (payload) => {\n        setMessages((current) => [...current, payload.payload as ChatMessage])\n      })\n      .subscribe(async (status) => {\n        if (status === 'SUBSCRIBED') {\n          setIsConnected(true)\n        } else {\n          setIsConnected(false)\n        }\n      })\n\n    setChannel(newChannel)\n\n    return () => {\n      supabase.removeChannel(newChannel)\n    }\n  }, [roomName, username, supabase])\n\n  const sendMessage = useCallback(\n    async (content: string) => {\n      if (!channel || !isConnected) return\n\n      const message: ChatMessage = {\n        id: crypto.randomUUID(),\n        content,\n        user: {\n          name: username,\n        },\n        createdAt: new Date().toISOString(),\n      }\n\n      // Update local state immediately for the sender\n      setMessages((current) => [...current, message])\n\n      await channel.send({\n        type: 'broadcast',\n        event: EVENT_MESSAGE_TYPE,\n        payload: message,\n      })\n    },\n    [channel, isConnected, username]\n  )\n\n  return { messages, sendMessage, isConnected }\n}\n",
       "type": "registry:hook"
     },
     {
diff --git a/apps/ui-library/public/r/realtime-chat-tanstack.json b/apps/ui-library/public/r/realtime-chat-tanstack.json
index ee1831a5d60..195883e8e37 100644
--- a/apps/ui-library/public/r/realtime-chat-tanstack.json
+++ b/apps/ui-library/public/r/realtime-chat-tanstack.json
@@ -21,12 +21,12 @@
     },
     {
       "path": "registry/default/blocks/realtime-chat/components/realtime-chat.tsx",
-      "content": "'use client'\n\nimport { cn } from '@/lib/utils'\nimport { ChatMessageItem } from '@/registry/default/blocks/realtime-chat/components/chat-message'\nimport { useChatScroll } from '@/registry/default/blocks/realtime-chat/hooks/use-chat-scroll'\nimport {\n  type ChatMessage,\n  useRealtimeChat,\n} from '@/registry/default/blocks/realtime-chat/hooks/use-realtime-chat'\nimport { Button } from '@/registry/default/components/ui/button'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Send } from 'lucide-react'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\n\ninterface RealtimeChatProps {\n  roomName: string\n  username: string\n  onMessage?: (messages: ChatMessage[]) => void\n  messages?: ChatMessage[]\n}\n\n/**\n * Realtime chat component\n * @param roomName - The name of the room to join. Each room is a unique chat.\n * @param username - The username of the user\n * @param onMessage - The callback function to handle the messages. Useful if you want to store the messages in a database.\n * @param messages - The messages to display in the chat. Useful if you want to display messages from a database.\n * @returns The chat component\n */\nexport const RealtimeChat = ({\n  roomName,\n  username,\n  onMessage,\n  messages: initialMessages = [],\n}: RealtimeChatProps) => {\n  const { containerRef, scrollToBottom } = useChatScroll()\n\n  const {\n    messages: realtimeMessages,\n    sendMessage,\n    isConnected,\n  } = useRealtimeChat({\n    roomName,\n    username,\n  })\n  const [newMessage, setNewMessage] = useState('')\n\n  // Merge realtime messages with initial messages\n  const allMessages = useMemo(() => {\n    const mergedMessages = [...initialMessages, ...realtimeMessages]\n    // Remove duplicates based on message id\n    const uniqueMessages = mergedMessages.filter(\n      (message, index, self) => index === self.findIndex((m) => m.id === message.id)\n    )\n    // Sort by creation date\n    const sortedMessages = uniqueMessages.sort((a, b) => a.createdAt.localeCompare(b.createdAt))\n\n    return sortedMessages\n  }, [initialMessages, realtimeMessages])\n\n  useEffect(() => {\n    if (onMessage) {\n      onMessage(allMessages)\n    }\n  }, [allMessages, onMessage])\n\n  useEffect(() => {\n    // Scroll to bottom whenever messages change\n    scrollToBottom()\n  }, [allMessages, scrollToBottom])\n\n  const handleSendMessage = useCallback(\n    (e: React.FormEvent) => {\n      e.preventDefault()\n      if (!newMessage.trim() || !isConnected) return\n\n      sendMessage(newMessage)\n      setNewMessage('')\n    },\n    [newMessage, isConnected, sendMessage]\n  )\n\n  return (\n    <div className=\"flex flex-col h-full w-full bg-background text-foreground antialiased\">\n      {/* Messages */}\n      <div ref={containerRef} className=\"flex-1 overflow-y-auto p-4 space-y-4\">\n        {allMessages.length === 0 ? (\n          <div className=\"text-center text-sm text-muted-foreground\">\n            No messages yet. Start the conversation!\n          </div>\n        ) : null}\n        <div className=\"space-y-1\">\n          {allMessages.map((message, index) => {\n            const prevMessage = index > 0 ? allMessages[index - 1] : null\n            const showHeader = !prevMessage || prevMessage.user.name !== message.user.name\n\n            return (\n              <div\n                key={message.id}\n                className=\"animate-in fade-in slide-in-from-bottom-4 duration-300\"\n              >\n                <ChatMessageItem\n                  message={message}\n                  isOwnMessage={message.user.name === username}\n                  showHeader={showHeader}\n                />\n              </div>\n            )\n          })}\n        </div>\n      </div>\n\n      <form onSubmit={handleSendMessage} className=\"flex w-full gap-2 border-t border-border p-4\">\n        <Input\n          className={cn(\n            'rounded-full bg-background text-sm transition-all duration-300',\n            isConnected && newMessage.trim() ? 'w-[calc(100%-36px)]' : 'w-full'\n          )}\n          type=\"text\"\n          value={newMessage}\n          onChange={(e) => setNewMessage(e.target.value)}\n          placeholder=\"Type a message...\"\n          disabled={!isConnected}\n        />\n        {isConnected && newMessage.trim() && (\n          <Button\n            className=\"aspect-square rounded-full animate-in fade-in slide-in-from-right-4 duration-300\"\n            type=\"submit\"\n            disabled={!isConnected}\n          >\n            <Send className=\"size-4\" />\n          </Button>\n        )}\n      </form>\n    </div>\n  )\n}\n",
+      "content": "'use client'\n\nimport { Send } from 'lucide-react'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\n\nimport { cn } from '@/lib/utils'\nimport { ChatMessageItem } from '@/registry/default/blocks/realtime-chat/components/chat-message'\nimport { useChatScroll } from '@/registry/default/blocks/realtime-chat/hooks/use-chat-scroll'\nimport {\n  useRealtimeChat,\n  type ChatMessage,\n} from '@/registry/default/blocks/realtime-chat/hooks/use-realtime-chat'\nimport { Button } from '@/registry/default/components/ui/button'\nimport { Input } from '@/registry/default/components/ui/input'\n\ninterface RealtimeChatProps {\n  roomName: string\n  username: string\n  onMessage?: (messages: ChatMessage[]) => void\n  messages?: ChatMessage[]\n}\n\n/**\n * Realtime chat component\n * @param roomName - The name of the room to join. Each room is a unique chat.\n * @param username - The username of the user\n * @param onMessage - The callback function to handle the messages. Useful if you want to store the messages in a database.\n * @param messages - The messages to display in the chat. Useful if you want to display messages from a database.\n * @returns The chat component\n */\nexport const RealtimeChat = ({\n  roomName,\n  username,\n  onMessage,\n  messages: initialMessages = [],\n}: RealtimeChatProps) => {\n  const { containerRef, scrollToBottom } = useChatScroll()\n\n  const {\n    messages: realtimeMessages,\n    sendMessage,\n    isConnected,\n  } = useRealtimeChat({\n    roomName,\n    username,\n  })\n  const [newMessage, setNewMessage] = useState('')\n\n  // Merge realtime messages with initial messages\n  const allMessages = useMemo(() => {\n    const mergedMessages = [...initialMessages, ...realtimeMessages]\n    // Remove duplicates based on message id\n    const uniqueMessages = mergedMessages.filter(\n      (message, index, self) => index === self.findIndex((m) => m.id === message.id)\n    )\n    // Sort by creation date\n    const sortedMessages = uniqueMessages.sort((a, b) => a.createdAt.localeCompare(b.createdAt))\n\n    return sortedMessages\n  }, [initialMessages, realtimeMessages])\n\n  useEffect(() => {\n    if (onMessage) {\n      onMessage(allMessages)\n    }\n  }, [allMessages, onMessage])\n\n  useEffect(() => {\n    // Scroll to bottom whenever messages change\n    scrollToBottom()\n  }, [allMessages, scrollToBottom])\n\n  const handleSendMessage = useCallback(\n    (e: React.FormEvent) => {\n      e.preventDefault()\n      if (!newMessage.trim() || !isConnected) return\n\n      sendMessage(newMessage)\n      setNewMessage('')\n    },\n    [newMessage, isConnected, sendMessage]\n  )\n\n  return (\n    <div className=\"flex flex-col h-full w-full bg-background text-foreground antialiased\">\n      {/* Messages */}\n      <div ref={containerRef} className=\"flex-1 overflow-y-auto p-4 space-y-4\">\n        {allMessages.length === 0 ? (\n          <div className=\"text-center text-sm text-muted-foreground\">\n            No messages yet. Start the conversation!\n          </div>\n        ) : null}\n        <div className=\"space-y-1\">\n          {allMessages.map((message, index) => {\n            const prevMessage = index > 0 ? allMessages[index - 1] : null\n            const showHeader = !prevMessage || prevMessage.user.name !== message.user.name\n\n            return (\n              <div\n                key={message.id}\n                className=\"animate-in fade-in slide-in-from-bottom-4 duration-300\"\n              >\n                <ChatMessageItem\n                  message={message}\n                  isOwnMessage={message.user.name === username}\n                  showHeader={showHeader}\n                />\n              </div>\n            )\n          })}\n        </div>\n      </div>\n\n      <form onSubmit={handleSendMessage} className=\"flex w-full gap-2 border-t border-border p-4\">\n        <Input\n          className={cn(\n            'rounded-full bg-background text-sm transition-all duration-300',\n            isConnected && newMessage.trim() ? 'w-[calc(100%-36px)]' : 'w-full'\n          )}\n          type=\"text\"\n          value={newMessage}\n          onChange={(e) => setNewMessage(e.target.value)}\n          placeholder=\"Type a message...\"\n          disabled={!isConnected}\n        />\n        {isConnected && newMessage.trim() && (\n          <Button\n            className=\"aspect-square rounded-full animate-in fade-in slide-in-from-right-4 duration-300\"\n            type=\"submit\"\n            disabled={!isConnected}\n          >\n            <Send className=\"size-4\" />\n          </Button>\n        )}\n      </form>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/default/blocks/realtime-chat/hooks/use-realtime-chat.tsx",
-      "content": "'use client'\n\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\nimport { useCallback, useEffect, useState } from 'react'\n\ninterface UseRealtimeChatProps {\n  roomName: string\n  username: string\n}\n\nexport interface ChatMessage {\n  id: string\n  content: string\n  user: {\n    name: string\n  }\n  createdAt: string\n}\n\nconst EVENT_MESSAGE_TYPE = 'message'\n\nexport function useRealtimeChat({ roomName, username }: UseRealtimeChatProps) {\n  const supabase = createClient()\n  const [messages, setMessages] = useState<ChatMessage[]>([])\n  const [channel, setChannel] = useState<ReturnType<typeof supabase.channel> | null>(null)\n  const [isConnected, setIsConnected] = useState(false)\n\n  useEffect(() => {\n    const newChannel = supabase.channel(roomName)\n\n    newChannel\n      .on('broadcast', { event: EVENT_MESSAGE_TYPE }, (payload) => {\n        setMessages((current) => [...current, payload.payload as ChatMessage])\n      })\n      .subscribe(async (status) => {\n        if (status === 'SUBSCRIBED') {\n          setIsConnected(true)\n        } else {\n          setIsConnected(false)\n        }\n      })\n\n    setChannel(newChannel)\n\n    return () => {\n      supabase.removeChannel(newChannel)\n    }\n  }, [roomName, username, supabase])\n\n  const sendMessage = useCallback(\n    async (content: string) => {\n      if (!channel || !isConnected) return\n\n      const message: ChatMessage = {\n        id: crypto.randomUUID(),\n        content,\n        user: {\n          name: username,\n        },\n        createdAt: new Date().toISOString(),\n      }\n\n      // Update local state immediately for the sender\n      setMessages((current) => [...current, message])\n\n      await channel.send({\n        type: 'broadcast',\n        event: EVENT_MESSAGE_TYPE,\n        payload: message,\n      })\n    },\n    [channel, isConnected, username]\n  )\n\n  return { messages, sendMessage, isConnected }\n}\n",
+      "content": "'use client'\n\nimport { useCallback, useEffect, useState } from 'react'\n\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\n\ninterface UseRealtimeChatProps {\n  roomName: string\n  username: string\n}\n\nexport interface ChatMessage {\n  id: string\n  content: string\n  user: {\n    name: string\n  }\n  createdAt: string\n}\n\nconst EVENT_MESSAGE_TYPE = 'message'\n\nexport function useRealtimeChat({ roomName, username }: UseRealtimeChatProps) {\n  const supabase = createClient()\n  const [messages, setMessages] = useState<ChatMessage[]>([])\n  const [channel, setChannel] = useState<ReturnType<typeof supabase.channel> | null>(null)\n  const [isConnected, setIsConnected] = useState(false)\n\n  useEffect(() => {\n    const newChannel = supabase.channel(roomName)\n\n    newChannel\n      .on('broadcast', { event: EVENT_MESSAGE_TYPE }, (payload) => {\n        setMessages((current) => [...current, payload.payload as ChatMessage])\n      })\n      .subscribe(async (status) => {\n        if (status === 'SUBSCRIBED') {\n          setIsConnected(true)\n        } else {\n          setIsConnected(false)\n        }\n      })\n\n    setChannel(newChannel)\n\n    return () => {\n      supabase.removeChannel(newChannel)\n    }\n  }, [roomName, username, supabase])\n\n  const sendMessage = useCallback(\n    async (content: string) => {\n      if (!channel || !isConnected) return\n\n      const message: ChatMessage = {\n        id: crypto.randomUUID(),\n        content,\n        user: {\n          name: username,\n        },\n        createdAt: new Date().toISOString(),\n      }\n\n      // Update local state immediately for the sender\n      setMessages((current) => [...current, message])\n\n      await channel.send({\n        type: 'broadcast',\n        event: EVENT_MESSAGE_TYPE,\n        payload: message,\n      })\n    },\n    [channel, isConnected, username]\n  )\n\n  return { messages, sendMessage, isConnected }\n}\n",
       "type": "registry:hook"
     },
     {
diff --git a/apps/ui-library/public/r/realtime-cursor-nextjs.json b/apps/ui-library/public/r/realtime-cursor-nextjs.json
index 251c3aeb10a..6e048da2094 100644
--- a/apps/ui-library/public/r/realtime-cursor-nextjs.json
+++ b/apps/ui-library/public/r/realtime-cursor-nextjs.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/default/blocks/realtime-cursor/components/cursor.tsx",
-      "content": "import { cn } from '@/lib/utils'\nimport { MousePointer2 } from 'lucide-react'\n\nexport const Cursor = ({\n  className,\n  style,\n  color,\n  name,\n}: {\n  className?: string\n  style?: React.CSSProperties\n  color: string\n  name: string\n}) => {\n  return (\n    <div className={cn('pointer-events-none', className)} style={style}>\n      <MousePointer2 color={color} fill={color} size={30} />\n\n      <div\n        className=\"mt-1 px-2 py-1 rounded text-xs font-bold text-white text-center\"\n        style={{ backgroundColor: color }}\n      >\n        {name}\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { MousePointer2 } from 'lucide-react'\n\nimport { cn } from '@/lib/utils'\n\nexport const Cursor = ({\n  className,\n  style,\n  color,\n  name,\n}: {\n  className?: string\n  style?: React.CSSProperties\n  color: string\n  name: string\n}) => {\n  return (\n    <div className={cn('pointer-events-none', className)} style={style}>\n      <MousePointer2 color={color} fill={color} size={30} />\n\n      <div\n        className=\"mt-1 px-2 py-1 rounded text-xs font-bold text-white text-center\"\n        style={{ backgroundColor: color }}\n      >\n        {name}\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -23,7 +23,7 @@
     },
     {
       "path": "registry/default/blocks/realtime-cursor/hooks/use-realtime-cursors.ts",
-      "content": "import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\nimport { RealtimeChannel, REALTIME_SUBSCRIBE_STATES } from '@supabase/supabase-js'\nimport { useCallback, useEffect, useRef, useState } from 'react'\n\n/**\n * Throttle a callback to a certain delay, It will only call the callback if the delay has passed, with the arguments\n * from the last call\n */\nconst useThrottleCallback = <Params extends unknown[], Return>(\n  callback: (...args: Params) => Return,\n  delay: number\n) => {\n  const lastCall = useRef(0)\n  const timeout = useRef<NodeJS.Timeout | null>(null)\n\n  return useCallback(\n    (...args: Params) => {\n      const now = Date.now()\n      const remainingTime = delay - (now - lastCall.current)\n\n      if (remainingTime <= 0) {\n        if (timeout.current) {\n          clearTimeout(timeout.current)\n          timeout.current = null\n        }\n        lastCall.current = now\n        callback(...args)\n      } else if (!timeout.current) {\n        timeout.current = setTimeout(() => {\n          lastCall.current = Date.now()\n          timeout.current = null\n          callback(...args)\n        }, remainingTime)\n      }\n    },\n    [callback, delay]\n  )\n}\n\nconst supabase = createClient()\n\nconst generateRandomColor = () => `hsl(${Math.floor(Math.random() * 360)}, 100%, 70%)`\n\nconst generateRandomNumber = () => Math.floor(Math.random() * 100)\n\nconst EVENT_NAME = 'realtime-cursor-move'\n\ntype CursorEventPayload = {\n  position: {\n    x: number\n    y: number\n  }\n  user: {\n    id: number\n    name: string\n  }\n  color: string\n  timestamp: number\n}\n\nexport const useRealtimeCursors = ({\n  roomName,\n  username,\n  throttleMs,\n}: {\n  roomName: string\n  username: string\n  throttleMs: number\n}) => {\n  const [color] = useState(generateRandomColor())\n  const [userId] = useState(generateRandomNumber())\n  const [cursors, setCursors] = useState<Record<string, CursorEventPayload>>({})\n  const cursorPayload = useRef<CursorEventPayload | null>(null)\n\n  const channelRef = useRef<RealtimeChannel | null>(null)\n\n  const callback = useCallback(\n    (event: MouseEvent) => {\n      const { clientX, clientY } = event\n\n      const payload: CursorEventPayload = {\n        position: {\n          x: clientX,\n          y: clientY,\n        },\n        user: {\n          id: userId,\n          name: username,\n        },\n        color: color,\n        timestamp: new Date().getTime(),\n      }\n\n      cursorPayload.current = payload\n\n      channelRef.current?.send({\n        type: 'broadcast',\n        event: EVENT_NAME,\n        payload: payload,\n      })\n    },\n    [color, userId, username]\n  )\n\n  const handleMouseMove = useThrottleCallback(callback, throttleMs)\n\n  useEffect(() => {\n    const channel = supabase.channel(roomName)\n\n    channel\n      .on('presence', { event: 'leave' }, ({ leftPresences }) => {\n        leftPresences.forEach(function (element) {\n          // Remove cursor when user leaves\n          setCursors((prev) => {\n            if (prev[element.key]) {\n              delete prev[element.key]\n            }\n\n            return { ...prev }\n          })\n        })\n      })\n      .on('presence', { event: 'join' }, () => {\n        if (!cursorPayload.current) return\n\n        // All cursors broadcast their position when a new cursor joins\n        channelRef.current?.send({\n          type: 'broadcast',\n          event: EVENT_NAME,\n          payload: cursorPayload.current,\n        })\n      })\n      .on('broadcast', { event: EVENT_NAME }, (data: { payload: CursorEventPayload }) => {\n        const { user } = data.payload\n        // Don't render your own cursor\n        if (user.id === userId) return\n\n        setCursors((prev) => {\n          if (prev[userId]) {\n            delete prev[userId]\n          }\n\n          return {\n            ...prev,\n            [user.id]: data.payload,\n          }\n        })\n      })\n      .subscribe(async (status) => {\n        if (status === REALTIME_SUBSCRIBE_STATES.SUBSCRIBED) {\n          await channel.track({ key: userId })\n          channelRef.current = channel\n        } else {\n          setCursors({})\n          channelRef.current = null\n        }\n      })\n\n    return () => {\n      channel.unsubscribe()\n      channelRef.current = null\n    }\n  }, [])\n\n  useEffect(() => {\n    // Add event listener for mousemove\n    window.addEventListener('mousemove', handleMouseMove)\n\n    // Cleanup on unmount\n    return () => {\n      window.removeEventListener('mousemove', handleMouseMove)\n    }\n  }, [handleMouseMove])\n\n  return { cursors }\n}\n",
+      "content": "import { REALTIME_SUBSCRIBE_STATES, RealtimeChannel } from '@supabase/supabase-js'\nimport { useCallback, useEffect, useRef, useState } from 'react'\n\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\n\n/**\n * Throttle a callback to a certain delay, It will only call the callback if the delay has passed, with the arguments\n * from the last call\n */\nconst useThrottleCallback = <Params extends unknown[], Return>(\n  callback: (...args: Params) => Return,\n  delay: number\n) => {\n  const lastCall = useRef(0)\n  const timeout = useRef<NodeJS.Timeout | null>(null)\n\n  return useCallback(\n    (...args: Params) => {\n      const now = Date.now()\n      const remainingTime = delay - (now - lastCall.current)\n\n      if (remainingTime <= 0) {\n        if (timeout.current) {\n          clearTimeout(timeout.current)\n          timeout.current = null\n        }\n        lastCall.current = now\n        callback(...args)\n      } else if (!timeout.current) {\n        timeout.current = setTimeout(() => {\n          lastCall.current = Date.now()\n          timeout.current = null\n          callback(...args)\n        }, remainingTime)\n      }\n    },\n    [callback, delay]\n  )\n}\n\nconst supabase = createClient()\n\nconst generateRandomColor = () => `hsl(${Math.floor(Math.random() * 360)}, 100%, 70%)`\n\nconst generateRandomNumber = () => Math.floor(Math.random() * 100)\n\nconst EVENT_NAME = 'realtime-cursor-move'\n\ntype CursorEventPayload = {\n  position: {\n    x: number\n    y: number\n  }\n  user: {\n    id: number\n    name: string\n  }\n  color: string\n  timestamp: number\n}\n\nexport const useRealtimeCursors = ({\n  roomName,\n  username,\n  throttleMs,\n}: {\n  roomName: string\n  username: string\n  throttleMs: number\n}) => {\n  const [color] = useState(generateRandomColor())\n  const [userId] = useState(generateRandomNumber())\n  const [cursors, setCursors] = useState<Record<string, CursorEventPayload>>({})\n  const cursorPayload = useRef<CursorEventPayload | null>(null)\n\n  const channelRef = useRef<RealtimeChannel | null>(null)\n\n  const callback = useCallback(\n    (event: MouseEvent) => {\n      const { clientX, clientY } = event\n\n      const payload: CursorEventPayload = {\n        position: {\n          x: clientX,\n          y: clientY,\n        },\n        user: {\n          id: userId,\n          name: username,\n        },\n        color: color,\n        timestamp: new Date().getTime(),\n      }\n\n      cursorPayload.current = payload\n\n      channelRef.current?.send({\n        type: 'broadcast',\n        event: EVENT_NAME,\n        payload: payload,\n      })\n    },\n    [color, userId, username]\n  )\n\n  const handleMouseMove = useThrottleCallback(callback, throttleMs)\n\n  useEffect(() => {\n    const channel = supabase.channel(roomName)\n\n    channel\n      .on('presence', { event: 'leave' }, ({ leftPresences }) => {\n        leftPresences.forEach(function (element) {\n          // Remove cursor when user leaves\n          setCursors((prev) => {\n            if (prev[element.key]) {\n              delete prev[element.key]\n            }\n\n            return { ...prev }\n          })\n        })\n      })\n      .on('presence', { event: 'join' }, () => {\n        if (!cursorPayload.current) return\n\n        // All cursors broadcast their position when a new cursor joins\n        channelRef.current?.send({\n          type: 'broadcast',\n          event: EVENT_NAME,\n          payload: cursorPayload.current,\n        })\n      })\n      .on('broadcast', { event: EVENT_NAME }, (data: { payload: CursorEventPayload }) => {\n        const { user } = data.payload\n        // Don't render your own cursor\n        if (user.id === userId) return\n\n        setCursors((prev) => {\n          if (prev[userId]) {\n            delete prev[userId]\n          }\n\n          return {\n            ...prev,\n            [user.id]: data.payload,\n          }\n        })\n      })\n      .subscribe(async (status) => {\n        if (status === REALTIME_SUBSCRIBE_STATES.SUBSCRIBED) {\n          await channel.track({ key: userId })\n          channelRef.current = channel\n        } else {\n          setCursors({})\n          channelRef.current = null\n        }\n      })\n\n    return () => {\n      channel.unsubscribe()\n      channelRef.current = null\n    }\n  }, [])\n\n  useEffect(() => {\n    // Add event listener for mousemove\n    window.addEventListener('mousemove', handleMouseMove)\n\n    // Cleanup on unmount\n    return () => {\n      window.removeEventListener('mousemove', handleMouseMove)\n    }\n  }, [handleMouseMove])\n\n  return { cursors }\n}\n",
       "type": "registry:hook"
     },
     {
diff --git a/apps/ui-library/public/r/realtime-cursor-nuxtjs.json b/apps/ui-library/public/r/realtime-cursor-nuxtjs.json
index d5007491b67..f392f2c2c64 100644
--- a/apps/ui-library/public/r/realtime-cursor-nuxtjs.json
+++ b/apps/ui-library/public/r/realtime-cursor-nuxtjs.json
@@ -12,19 +12,19 @@
   "files": [
     {
       "path": "registry/default/realtime-cursor/nuxtjs/app/components/cursor.vue",
-      "content": "<script setup lang=\"ts\">\nimport { MousePointer2 } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport type { CSSProperties } from 'vue'\n\ndefineProps<{\n  className?: string\n  style?: CSSProperties\n  color: string\n  name: string\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"cn('pointer-events-none', className)\"\n    :style=\"style\"\n  >\n    <MousePointer2\n      :color=\"color\"\n      :fill=\"color\"\n      :size=\"30\"\n    />\n\n    <div\n      class=\"mt-1 px-2 py-1 rounded text-xs font-bold text-white text-center\"\n      :style=\"{ backgroundColor: color }\"\n    >\n      {{ name }}\n    </div>\n  </div>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { MousePointer2 } from 'lucide-vue-next'\nimport type { CSSProperties } from 'vue'\n// @ts-ignore\nimport { cn } from '@/lib/utils'\n\ndefineProps<{\n  className?: string\n  style?: CSSProperties\n  color: string\n  name: string\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"cn('pointer-events-none', className)\"\n    :style=\"style\"\n  >\n    <MousePointer2\n      :color=\"color\"\n      :fill=\"color\"\n      :size=\"30\"\n    />\n\n    <div\n      class=\"mt-1 px-2 py-1 rounded text-xs font-bold text-white text-center\"\n      :style=\"{ backgroundColor: color }\"\n    >\n      {{ name }}\n    </div>\n  </div>\n</template>\n",
       "type": "registry:component",
       "target": "app/components/cursor.vue"
     },
     {
       "path": "registry/default/realtime-cursor/nuxtjs/app/components/realtime-cursors.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Cursor } from '@/components/cursor'\nimport { useRealtimeCursors } from '@/composables/useRealtimeCursors'\n\nconst THROTTLE_MS = 50\n\nconst props = defineProps<{\n  roomName: string\n  username: string\n}>()\n\nconst { cursors } = useRealtimeCursors({\n  roomName: props.roomName,\n  username: props.username,\n  throttleMs: THROTTLE_MS,\n})\n</script>\n\n<template>\n  <div>\n    <Cursor\n      v-for=\"(cursor, id) in cursors\"\n      :key=\"id\"\n      className=\"fixed transition-transform ease-in-out z-50\"\n      :style=\"{\n        transitionDuration: '20ms',\n        top: '0px',\n        left: '0px',\n        transform: `translate(${cursor.position.x}px, ${cursor.position.y}px)`,\n      }\"\n      :color=\"cursor.color\"\n      :name=\"cursor.user.name\"\n    />\n  </div>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\n// @ts-ignore\nimport { Cursor } from '@/components/cursor'\n// @ts-ignore\nimport { useRealtimeCursors } from '@/composables/useRealtimeCursors'\n\nconst THROTTLE_MS = 50\n\nconst props = defineProps<{\n  roomName: string\n  username: string\n}>()\n\nconst { cursors } = useRealtimeCursors({\n  roomName: props.roomName,\n  username: props.username,\n  throttleMs: THROTTLE_MS,\n})\n</script>\n\n<template>\n  <div>\n    <Cursor\n      v-for=\"(cursor, id) in cursors\"\n      :key=\"id\"\n      className=\"fixed transition-transform ease-in-out z-50\"\n      :style=\"{\n        transitionDuration: '20ms',\n        top: '0px',\n        left: '0px',\n        transform: `translate(${cursor.position.x}px, ${cursor.position.y}px)`,\n      }\"\n      :color=\"cursor.color\"\n      :name=\"cursor.user.name\"\n    />\n  </div>\n</template>\n",
       "type": "registry:component",
       "target": "app/components/realtime-cursors.vue"
     },
     {
       "path": "registry/default/realtime-cursor/nuxtjs/app/composables/useRealtimeCursors.ts",
-      "content": "import { ref, reactive, onMounted, onUnmounted } from 'vue'\nimport { createClient } from '@/lib/supabase/client'\nimport { REALTIME_SUBSCRIBE_STATES, type RealtimeChannel } from '@supabase/supabase-js'\n\n/**\n * Throttle a callback to a certain delay.\n * It will only call the callback if the delay has passed,\n * using the arguments from the last call.\n */\nfunction useThrottleCallback<Params extends unknown[]>(\n  callback: (...args: Params) => void,\n  delay: number\n) {\n  let lastCall = 0\n  let timeout: ReturnType<typeof setTimeout> | null = null\n\n  const run = (...args: Params) => {\n    const now = Date.now()\n    const remainingTime = delay - (now - lastCall)\n\n    if (remainingTime <= 0) {\n      if (timeout) {\n        clearTimeout(timeout)\n        timeout = null\n      }\n      lastCall = now\n      callback(...args)\n    } else if (!timeout) {\n      timeout = setTimeout(() => {\n        lastCall = Date.now()\n        timeout = null\n        callback(...args)\n      }, remainingTime)\n    }\n  }\n\n  const cancel = () => {\n    if (timeout) {\n      clearTimeout(timeout)\n      timeout = null\n    }\n  }\n\n  return { run, cancel }\n}\n\nconst supabase = createClient()\n\nconst generateRandomColor = () =>\n  `hsl(${Math.floor(Math.random() * 360)}, 100%, 70%)`\n\nconst generateRandomNumber = () =>\n  Math.floor(Math.random() * 100)\n\nconst EVENT_NAME = 'realtime-cursor-move'\n\nexport type CursorEventPayload = {\n  position: { x: number; y: number }\n  user: { id: number; name: string }\n  color: string\n  timestamp: number\n}\n\nexport function useRealtimeCursors({\n  roomName,\n  username,\n  throttleMs,\n}: {\n  roomName: string\n  username: string\n  throttleMs: number\n}) {\n  const color = generateRandomColor()\n  const userId = generateRandomNumber()\n\n  const cursors = reactive<Record<string, CursorEventPayload>>({})\n  const cursorPayload = ref<CursorEventPayload | null>(null)\n  const channelRef = ref<RealtimeChannel | null>(null)\n\n  const sendCursor = (event: MouseEvent) => {\n    const payload: CursorEventPayload = {\n      position: {\n        x: event.clientX,\n        y: event.clientY,\n      },\n      user: {\n        id: userId,\n        name: username,\n      },\n      color,\n      timestamp: Date.now(),\n    }\n\n    cursorPayload.value = payload\n\n    channelRef.value?.send({\n      type: 'broadcast',\n      event: EVENT_NAME,\n      payload,\n    })\n  }\n\n  const { run: handleMouseMove, cancel: cancelThrottle } =\n  useThrottleCallback(sendCursor, throttleMs)\n\n  onMounted(() => {\n    const channel = supabase.channel(roomName)\n\n    channel\n      .on('system', {}, (payload: CursorEventPayload) => {\n        console.error('Realtime system error:', payload)\n\n        // Defensive cleanup\n        Object.keys(cursors).forEach((k) => delete cursors[k])\n        channelRef.value = null\n      })\n      .on('presence', { event: 'leave' }, ({ leftPresences }) => {\n        leftPresences.forEach(({ key }) => {\n          delete cursors[key]\n        })\n      })\n      .on('presence', { event: 'join' }, () => {\n        if (!cursorPayload.value) return\n\n        channelRef.value?.send({\n          type: 'broadcast',\n          event: EVENT_NAME,\n          payload: cursorPayload.value,\n        })\n      })\n      .on('broadcast', { event: EVENT_NAME }, ({ payload }: { payload: CursorEventPayload }) => {\n        if (payload.user.id === userId) return\n\n        cursors[payload.user.id] = payload\n      })\n      .subscribe(async (status) => {\n        if (status === REALTIME_SUBSCRIBE_STATES.SUBSCRIBED) {\n          try {\n            await channel.track({ key: userId })\n            channelRef.value = channel\n          } catch (err) {\n            console.error('Failed to track presence for current user:', err)\n            channelRef.value = null\n          }\n        } else {\n          Object.keys(cursors).forEach((k) => delete cursors[k])\n          channelRef.value = null\n        }\n      })\n\n    window.addEventListener('mousemove', handleMouseMove)\n  })\n\n  onUnmounted(() => {\n    window.removeEventListener('mousemove', handleMouseMove)\n\n    cancelThrottle()\n\n    if (channelRef.value) {\n      channelRef.value.unsubscribe()\n      channelRef.value = null\n    }\n\n    Object.keys(cursors).forEach((k) => delete cursors[k])\n  })\n\n  return { cursors }\n}\n",
+      "content": "import { ref, reactive, onMounted, onUnmounted } from 'vue'\nimport { REALTIME_SUBSCRIBE_STATES, type RealtimeChannel } from '@supabase/supabase-js'\n// @ts-ignore\nimport { createClient } from '@/lib/supabase/client'\n\n/**\n * Throttle a callback to a certain delay.\n * It will only call the callback if the delay has passed,\n * using the arguments from the last call.\n */\nfunction useThrottleCallback<Params extends unknown[]>(\n  callback: (...args: Params) => void,\n  delay: number\n) {\n  let lastCall = 0\n  let timeout: ReturnType<typeof setTimeout> | null = null\n\n  const run = (...args: Params) => {\n    const now = Date.now()\n    const remainingTime = delay - (now - lastCall)\n\n    if (remainingTime <= 0) {\n      if (timeout) {\n        clearTimeout(timeout)\n        timeout = null\n      }\n      lastCall = now\n      callback(...args)\n    } else if (!timeout) {\n      timeout = setTimeout(() => {\n        lastCall = Date.now()\n        timeout = null\n        callback(...args)\n      }, remainingTime)\n    }\n  }\n\n  const cancel = () => {\n    if (timeout) {\n      clearTimeout(timeout)\n      timeout = null\n    }\n  }\n\n  return { run, cancel }\n}\n\nconst supabase = createClient()\n\nconst generateRandomColor = () =>\n  `hsl(${Math.floor(Math.random() * 360)}, 100%, 70%)`\n\nconst generateRandomNumber = () =>\n  Math.floor(Math.random() * 100)\n\nconst EVENT_NAME = 'realtime-cursor-move'\n\nexport type CursorEventPayload = {\n  position: { x: number; y: number }\n  user: { id: number; name: string }\n  color: string\n  timestamp: number\n}\n\nexport function useRealtimeCursors({\n  roomName,\n  username,\n  throttleMs,\n}: {\n  roomName: string\n  username: string\n  throttleMs: number\n}) {\n  const color = generateRandomColor()\n  const userId = generateRandomNumber()\n\n  const cursors = reactive<Record<string, CursorEventPayload>>({})\n  const cursorPayload = ref<CursorEventPayload | null>(null)\n  const channelRef = ref<RealtimeChannel | null>(null)\n\n  const sendCursor = (event: MouseEvent) => {\n    const payload: CursorEventPayload = {\n      position: {\n        x: event.clientX,\n        y: event.clientY,\n      },\n      user: {\n        id: userId,\n        name: username,\n      },\n      color,\n      timestamp: Date.now(),\n    }\n\n    cursorPayload.value = payload\n\n    channelRef.value?.send({\n      type: 'broadcast',\n      event: EVENT_NAME,\n      payload,\n    })\n  }\n\n  const { run: handleMouseMove, cancel: cancelThrottle } =\n  useThrottleCallback(sendCursor, throttleMs)\n\n  onMounted(() => {\n    const channel = supabase.channel(roomName)\n\n    channel\n      .on('system', {}, (payload: CursorEventPayload) => {\n        console.error('Realtime system error:', payload)\n\n        // Defensive cleanup\n        Object.keys(cursors).forEach((k) => delete cursors[k])\n        channelRef.value = null\n      })\n      .on('presence', { event: 'leave' }, ({ leftPresences }: { leftPresences: Array<{ key: string }> }) => {\n        leftPresences.forEach(({ key }) => {\n          delete cursors[key]\n        })\n      })\n      .on('presence', { event: 'join' }, () => {\n        if (!cursorPayload.value) return\n\n        channelRef.value?.send({\n          type: 'broadcast',\n          event: EVENT_NAME,\n          payload: cursorPayload.value,\n        })\n      })\n      .on('broadcast', { event: EVENT_NAME }, ({ payload }: { payload: CursorEventPayload }) => {\n        if (payload.user.id === userId) return\n\n        cursors[payload.user.id] = payload\n      })\n      .subscribe(async (status: REALTIME_SUBSCRIBE_STATES) => {\n        if (status === REALTIME_SUBSCRIBE_STATES.SUBSCRIBED) {\n          try {\n            await channel.track({ key: userId })\n            channelRef.value = channel\n          } catch (err) {\n            console.error('Failed to track presence for current user:', err)\n            channelRef.value = null\n          }\n        } else {\n          Object.keys(cursors).forEach((k) => delete cursors[k])\n          channelRef.value = null\n        }\n      })\n\n    window.addEventListener('mousemove', handleMouseMove)\n  })\n\n  onUnmounted(() => {\n    window.removeEventListener('mousemove', handleMouseMove)\n\n    cancelThrottle()\n\n    if (channelRef.value) {\n      channelRef.value.unsubscribe()\n      channelRef.value = null\n    }\n\n    Object.keys(cursors).forEach((k) => delete cursors[k])\n  })\n\n  return { cursors }\n}\n",
       "type": "registry:component",
       "target": "app/composables/useRealtimeCursors.ts"
     }
diff --git a/apps/ui-library/public/r/realtime-cursor-react-router.json b/apps/ui-library/public/r/realtime-cursor-react-router.json
index 0d6eaf904cd..8a97b0e1119 100644
--- a/apps/ui-library/public/r/realtime-cursor-react-router.json
+++ b/apps/ui-library/public/r/realtime-cursor-react-router.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/default/blocks/realtime-cursor/components/cursor.tsx",
-      "content": "import { cn } from '@/lib/utils'\nimport { MousePointer2 } from 'lucide-react'\n\nexport const Cursor = ({\n  className,\n  style,\n  color,\n  name,\n}: {\n  className?: string\n  style?: React.CSSProperties\n  color: string\n  name: string\n}) => {\n  return (\n    <div className={cn('pointer-events-none', className)} style={style}>\n      <MousePointer2 color={color} fill={color} size={30} />\n\n      <div\n        className=\"mt-1 px-2 py-1 rounded text-xs font-bold text-white text-center\"\n        style={{ backgroundColor: color }}\n      >\n        {name}\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { MousePointer2 } from 'lucide-react'\n\nimport { cn } from '@/lib/utils'\n\nexport const Cursor = ({\n  className,\n  style,\n  color,\n  name,\n}: {\n  className?: string\n  style?: React.CSSProperties\n  color: string\n  name: string\n}) => {\n  return (\n    <div className={cn('pointer-events-none', className)} style={style}>\n      <MousePointer2 color={color} fill={color} size={30} />\n\n      <div\n        className=\"mt-1 px-2 py-1 rounded text-xs font-bold text-white text-center\"\n        style={{ backgroundColor: color }}\n      >\n        {name}\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -23,7 +23,7 @@
     },
     {
       "path": "registry/default/blocks/realtime-cursor/hooks/use-realtime-cursors.ts",
-      "content": "import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\nimport { RealtimeChannel, REALTIME_SUBSCRIBE_STATES } from '@supabase/supabase-js'\nimport { useCallback, useEffect, useRef, useState } from 'react'\n\n/**\n * Throttle a callback to a certain delay, It will only call the callback if the delay has passed, with the arguments\n * from the last call\n */\nconst useThrottleCallback = <Params extends unknown[], Return>(\n  callback: (...args: Params) => Return,\n  delay: number\n) => {\n  const lastCall = useRef(0)\n  const timeout = useRef<NodeJS.Timeout | null>(null)\n\n  return useCallback(\n    (...args: Params) => {\n      const now = Date.now()\n      const remainingTime = delay - (now - lastCall.current)\n\n      if (remainingTime <= 0) {\n        if (timeout.current) {\n          clearTimeout(timeout.current)\n          timeout.current = null\n        }\n        lastCall.current = now\n        callback(...args)\n      } else if (!timeout.current) {\n        timeout.current = setTimeout(() => {\n          lastCall.current = Date.now()\n          timeout.current = null\n          callback(...args)\n        }, remainingTime)\n      }\n    },\n    [callback, delay]\n  )\n}\n\nconst supabase = createClient()\n\nconst generateRandomColor = () => `hsl(${Math.floor(Math.random() * 360)}, 100%, 70%)`\n\nconst generateRandomNumber = () => Math.floor(Math.random() * 100)\n\nconst EVENT_NAME = 'realtime-cursor-move'\n\ntype CursorEventPayload = {\n  position: {\n    x: number\n    y: number\n  }\n  user: {\n    id: number\n    name: string\n  }\n  color: string\n  timestamp: number\n}\n\nexport const useRealtimeCursors = ({\n  roomName,\n  username,\n  throttleMs,\n}: {\n  roomName: string\n  username: string\n  throttleMs: number\n}) => {\n  const [color] = useState(generateRandomColor())\n  const [userId] = useState(generateRandomNumber())\n  const [cursors, setCursors] = useState<Record<string, CursorEventPayload>>({})\n  const cursorPayload = useRef<CursorEventPayload | null>(null)\n\n  const channelRef = useRef<RealtimeChannel | null>(null)\n\n  const callback = useCallback(\n    (event: MouseEvent) => {\n      const { clientX, clientY } = event\n\n      const payload: CursorEventPayload = {\n        position: {\n          x: clientX,\n          y: clientY,\n        },\n        user: {\n          id: userId,\n          name: username,\n        },\n        color: color,\n        timestamp: new Date().getTime(),\n      }\n\n      cursorPayload.current = payload\n\n      channelRef.current?.send({\n        type: 'broadcast',\n        event: EVENT_NAME,\n        payload: payload,\n      })\n    },\n    [color, userId, username]\n  )\n\n  const handleMouseMove = useThrottleCallback(callback, throttleMs)\n\n  useEffect(() => {\n    const channel = supabase.channel(roomName)\n\n    channel\n      .on('presence', { event: 'leave' }, ({ leftPresences }) => {\n        leftPresences.forEach(function (element) {\n          // Remove cursor when user leaves\n          setCursors((prev) => {\n            if (prev[element.key]) {\n              delete prev[element.key]\n            }\n\n            return { ...prev }\n          })\n        })\n      })\n      .on('presence', { event: 'join' }, () => {\n        if (!cursorPayload.current) return\n\n        // All cursors broadcast their position when a new cursor joins\n        channelRef.current?.send({\n          type: 'broadcast',\n          event: EVENT_NAME,\n          payload: cursorPayload.current,\n        })\n      })\n      .on('broadcast', { event: EVENT_NAME }, (data: { payload: CursorEventPayload }) => {\n        const { user } = data.payload\n        // Don't render your own cursor\n        if (user.id === userId) return\n\n        setCursors((prev) => {\n          if (prev[userId]) {\n            delete prev[userId]\n          }\n\n          return {\n            ...prev,\n            [user.id]: data.payload,\n          }\n        })\n      })\n      .subscribe(async (status) => {\n        if (status === REALTIME_SUBSCRIBE_STATES.SUBSCRIBED) {\n          await channel.track({ key: userId })\n          channelRef.current = channel\n        } else {\n          setCursors({})\n          channelRef.current = null\n        }\n      })\n\n    return () => {\n      channel.unsubscribe()\n      channelRef.current = null\n    }\n  }, [])\n\n  useEffect(() => {\n    // Add event listener for mousemove\n    window.addEventListener('mousemove', handleMouseMove)\n\n    // Cleanup on unmount\n    return () => {\n      window.removeEventListener('mousemove', handleMouseMove)\n    }\n  }, [handleMouseMove])\n\n  return { cursors }\n}\n",
+      "content": "import { REALTIME_SUBSCRIBE_STATES, RealtimeChannel } from '@supabase/supabase-js'\nimport { useCallback, useEffect, useRef, useState } from 'react'\n\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\n\n/**\n * Throttle a callback to a certain delay, It will only call the callback if the delay has passed, with the arguments\n * from the last call\n */\nconst useThrottleCallback = <Params extends unknown[], Return>(\n  callback: (...args: Params) => Return,\n  delay: number\n) => {\n  const lastCall = useRef(0)\n  const timeout = useRef<NodeJS.Timeout | null>(null)\n\n  return useCallback(\n    (...args: Params) => {\n      const now = Date.now()\n      const remainingTime = delay - (now - lastCall.current)\n\n      if (remainingTime <= 0) {\n        if (timeout.current) {\n          clearTimeout(timeout.current)\n          timeout.current = null\n        }\n        lastCall.current = now\n        callback(...args)\n      } else if (!timeout.current) {\n        timeout.current = setTimeout(() => {\n          lastCall.current = Date.now()\n          timeout.current = null\n          callback(...args)\n        }, remainingTime)\n      }\n    },\n    [callback, delay]\n  )\n}\n\nconst supabase = createClient()\n\nconst generateRandomColor = () => `hsl(${Math.floor(Math.random() * 360)}, 100%, 70%)`\n\nconst generateRandomNumber = () => Math.floor(Math.random() * 100)\n\nconst EVENT_NAME = 'realtime-cursor-move'\n\ntype CursorEventPayload = {\n  position: {\n    x: number\n    y: number\n  }\n  user: {\n    id: number\n    name: string\n  }\n  color: string\n  timestamp: number\n}\n\nexport const useRealtimeCursors = ({\n  roomName,\n  username,\n  throttleMs,\n}: {\n  roomName: string\n  username: string\n  throttleMs: number\n}) => {\n  const [color] = useState(generateRandomColor())\n  const [userId] = useState(generateRandomNumber())\n  const [cursors, setCursors] = useState<Record<string, CursorEventPayload>>({})\n  const cursorPayload = useRef<CursorEventPayload | null>(null)\n\n  const channelRef = useRef<RealtimeChannel | null>(null)\n\n  const callback = useCallback(\n    (event: MouseEvent) => {\n      const { clientX, clientY } = event\n\n      const payload: CursorEventPayload = {\n        position: {\n          x: clientX,\n          y: clientY,\n        },\n        user: {\n          id: userId,\n          name: username,\n        },\n        color: color,\n        timestamp: new Date().getTime(),\n      }\n\n      cursorPayload.current = payload\n\n      channelRef.current?.send({\n        type: 'broadcast',\n        event: EVENT_NAME,\n        payload: payload,\n      })\n    },\n    [color, userId, username]\n  )\n\n  const handleMouseMove = useThrottleCallback(callback, throttleMs)\n\n  useEffect(() => {\n    const channel = supabase.channel(roomName)\n\n    channel\n      .on('presence', { event: 'leave' }, ({ leftPresences }) => {\n        leftPresences.forEach(function (element) {\n          // Remove cursor when user leaves\n          setCursors((prev) => {\n            if (prev[element.key]) {\n              delete prev[element.key]\n            }\n\n            return { ...prev }\n          })\n        })\n      })\n      .on('presence', { event: 'join' }, () => {\n        if (!cursorPayload.current) return\n\n        // All cursors broadcast their position when a new cursor joins\n        channelRef.current?.send({\n          type: 'broadcast',\n          event: EVENT_NAME,\n          payload: cursorPayload.current,\n        })\n      })\n      .on('broadcast', { event: EVENT_NAME }, (data: { payload: CursorEventPayload }) => {\n        const { user } = data.payload\n        // Don't render your own cursor\n        if (user.id === userId) return\n\n        setCursors((prev) => {\n          if (prev[userId]) {\n            delete prev[userId]\n          }\n\n          return {\n            ...prev,\n            [user.id]: data.payload,\n          }\n        })\n      })\n      .subscribe(async (status) => {\n        if (status === REALTIME_SUBSCRIBE_STATES.SUBSCRIBED) {\n          await channel.track({ key: userId })\n          channelRef.current = channel\n        } else {\n          setCursors({})\n          channelRef.current = null\n        }\n      })\n\n    return () => {\n      channel.unsubscribe()\n      channelRef.current = null\n    }\n  }, [])\n\n  useEffect(() => {\n    // Add event listener for mousemove\n    window.addEventListener('mousemove', handleMouseMove)\n\n    // Cleanup on unmount\n    return () => {\n      window.removeEventListener('mousemove', handleMouseMove)\n    }\n  }, [handleMouseMove])\n\n  return { cursors }\n}\n",
       "type": "registry:hook"
     },
     {
diff --git a/apps/ui-library/public/r/realtime-cursor-react.json b/apps/ui-library/public/r/realtime-cursor-react.json
index 297a3151035..51a176d6549 100644
--- a/apps/ui-library/public/r/realtime-cursor-react.json
+++ b/apps/ui-library/public/r/realtime-cursor-react.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/default/blocks/realtime-cursor/components/cursor.tsx",
-      "content": "import { cn } from '@/lib/utils'\nimport { MousePointer2 } from 'lucide-react'\n\nexport const Cursor = ({\n  className,\n  style,\n  color,\n  name,\n}: {\n  className?: string\n  style?: React.CSSProperties\n  color: string\n  name: string\n}) => {\n  return (\n    <div className={cn('pointer-events-none', className)} style={style}>\n      <MousePointer2 color={color} fill={color} size={30} />\n\n      <div\n        className=\"mt-1 px-2 py-1 rounded text-xs font-bold text-white text-center\"\n        style={{ backgroundColor: color }}\n      >\n        {name}\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { MousePointer2 } from 'lucide-react'\n\nimport { cn } from '@/lib/utils'\n\nexport const Cursor = ({\n  className,\n  style,\n  color,\n  name,\n}: {\n  className?: string\n  style?: React.CSSProperties\n  color: string\n  name: string\n}) => {\n  return (\n    <div className={cn('pointer-events-none', className)} style={style}>\n      <MousePointer2 color={color} fill={color} size={30} />\n\n      <div\n        className=\"mt-1 px-2 py-1 rounded text-xs font-bold text-white text-center\"\n        style={{ backgroundColor: color }}\n      >\n        {name}\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -22,7 +22,7 @@
     },
     {
       "path": "registry/default/blocks/realtime-cursor/hooks/use-realtime-cursors.ts",
-      "content": "import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\nimport { RealtimeChannel, REALTIME_SUBSCRIBE_STATES } from '@supabase/supabase-js'\nimport { useCallback, useEffect, useRef, useState } from 'react'\n\n/**\n * Throttle a callback to a certain delay, It will only call the callback if the delay has passed, with the arguments\n * from the last call\n */\nconst useThrottleCallback = <Params extends unknown[], Return>(\n  callback: (...args: Params) => Return,\n  delay: number\n) => {\n  const lastCall = useRef(0)\n  const timeout = useRef<NodeJS.Timeout | null>(null)\n\n  return useCallback(\n    (...args: Params) => {\n      const now = Date.now()\n      const remainingTime = delay - (now - lastCall.current)\n\n      if (remainingTime <= 0) {\n        if (timeout.current) {\n          clearTimeout(timeout.current)\n          timeout.current = null\n        }\n        lastCall.current = now\n        callback(...args)\n      } else if (!timeout.current) {\n        timeout.current = setTimeout(() => {\n          lastCall.current = Date.now()\n          timeout.current = null\n          callback(...args)\n        }, remainingTime)\n      }\n    },\n    [callback, delay]\n  )\n}\n\nconst supabase = createClient()\n\nconst generateRandomColor = () => `hsl(${Math.floor(Math.random() * 360)}, 100%, 70%)`\n\nconst generateRandomNumber = () => Math.floor(Math.random() * 100)\n\nconst EVENT_NAME = 'realtime-cursor-move'\n\ntype CursorEventPayload = {\n  position: {\n    x: number\n    y: number\n  }\n  user: {\n    id: number\n    name: string\n  }\n  color: string\n  timestamp: number\n}\n\nexport const useRealtimeCursors = ({\n  roomName,\n  username,\n  throttleMs,\n}: {\n  roomName: string\n  username: string\n  throttleMs: number\n}) => {\n  const [color] = useState(generateRandomColor())\n  const [userId] = useState(generateRandomNumber())\n  const [cursors, setCursors] = useState<Record<string, CursorEventPayload>>({})\n  const cursorPayload = useRef<CursorEventPayload | null>(null)\n\n  const channelRef = useRef<RealtimeChannel | null>(null)\n\n  const callback = useCallback(\n    (event: MouseEvent) => {\n      const { clientX, clientY } = event\n\n      const payload: CursorEventPayload = {\n        position: {\n          x: clientX,\n          y: clientY,\n        },\n        user: {\n          id: userId,\n          name: username,\n        },\n        color: color,\n        timestamp: new Date().getTime(),\n      }\n\n      cursorPayload.current = payload\n\n      channelRef.current?.send({\n        type: 'broadcast',\n        event: EVENT_NAME,\n        payload: payload,\n      })\n    },\n    [color, userId, username]\n  )\n\n  const handleMouseMove = useThrottleCallback(callback, throttleMs)\n\n  useEffect(() => {\n    const channel = supabase.channel(roomName)\n\n    channel\n      .on('presence', { event: 'leave' }, ({ leftPresences }) => {\n        leftPresences.forEach(function (element) {\n          // Remove cursor when user leaves\n          setCursors((prev) => {\n            if (prev[element.key]) {\n              delete prev[element.key]\n            }\n\n            return { ...prev }\n          })\n        })\n      })\n      .on('presence', { event: 'join' }, () => {\n        if (!cursorPayload.current) return\n\n        // All cursors broadcast their position when a new cursor joins\n        channelRef.current?.send({\n          type: 'broadcast',\n          event: EVENT_NAME,\n          payload: cursorPayload.current,\n        })\n      })\n      .on('broadcast', { event: EVENT_NAME }, (data: { payload: CursorEventPayload }) => {\n        const { user } = data.payload\n        // Don't render your own cursor\n        if (user.id === userId) return\n\n        setCursors((prev) => {\n          if (prev[userId]) {\n            delete prev[userId]\n          }\n\n          return {\n            ...prev,\n            [user.id]: data.payload,\n          }\n        })\n      })\n      .subscribe(async (status) => {\n        if (status === REALTIME_SUBSCRIBE_STATES.SUBSCRIBED) {\n          await channel.track({ key: userId })\n          channelRef.current = channel\n        } else {\n          setCursors({})\n          channelRef.current = null\n        }\n      })\n\n    return () => {\n      channel.unsubscribe()\n      channelRef.current = null\n    }\n  }, [])\n\n  useEffect(() => {\n    // Add event listener for mousemove\n    window.addEventListener('mousemove', handleMouseMove)\n\n    // Cleanup on unmount\n    return () => {\n      window.removeEventListener('mousemove', handleMouseMove)\n    }\n  }, [handleMouseMove])\n\n  return { cursors }\n}\n",
+      "content": "import { REALTIME_SUBSCRIBE_STATES, RealtimeChannel } from '@supabase/supabase-js'\nimport { useCallback, useEffect, useRef, useState } from 'react'\n\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\n\n/**\n * Throttle a callback to a certain delay, It will only call the callback if the delay has passed, with the arguments\n * from the last call\n */\nconst useThrottleCallback = <Params extends unknown[], Return>(\n  callback: (...args: Params) => Return,\n  delay: number\n) => {\n  const lastCall = useRef(0)\n  const timeout = useRef<NodeJS.Timeout | null>(null)\n\n  return useCallback(\n    (...args: Params) => {\n      const now = Date.now()\n      const remainingTime = delay - (now - lastCall.current)\n\n      if (remainingTime <= 0) {\n        if (timeout.current) {\n          clearTimeout(timeout.current)\n          timeout.current = null\n        }\n        lastCall.current = now\n        callback(...args)\n      } else if (!timeout.current) {\n        timeout.current = setTimeout(() => {\n          lastCall.current = Date.now()\n          timeout.current = null\n          callback(...args)\n        }, remainingTime)\n      }\n    },\n    [callback, delay]\n  )\n}\n\nconst supabase = createClient()\n\nconst generateRandomColor = () => `hsl(${Math.floor(Math.random() * 360)}, 100%, 70%)`\n\nconst generateRandomNumber = () => Math.floor(Math.random() * 100)\n\nconst EVENT_NAME = 'realtime-cursor-move'\n\ntype CursorEventPayload = {\n  position: {\n    x: number\n    y: number\n  }\n  user: {\n    id: number\n    name: string\n  }\n  color: string\n  timestamp: number\n}\n\nexport const useRealtimeCursors = ({\n  roomName,\n  username,\n  throttleMs,\n}: {\n  roomName: string\n  username: string\n  throttleMs: number\n}) => {\n  const [color] = useState(generateRandomColor())\n  const [userId] = useState(generateRandomNumber())\n  const [cursors, setCursors] = useState<Record<string, CursorEventPayload>>({})\n  const cursorPayload = useRef<CursorEventPayload | null>(null)\n\n  const channelRef = useRef<RealtimeChannel | null>(null)\n\n  const callback = useCallback(\n    (event: MouseEvent) => {\n      const { clientX, clientY } = event\n\n      const payload: CursorEventPayload = {\n        position: {\n          x: clientX,\n          y: clientY,\n        },\n        user: {\n          id: userId,\n          name: username,\n        },\n        color: color,\n        timestamp: new Date().getTime(),\n      }\n\n      cursorPayload.current = payload\n\n      channelRef.current?.send({\n        type: 'broadcast',\n        event: EVENT_NAME,\n        payload: payload,\n      })\n    },\n    [color, userId, username]\n  )\n\n  const handleMouseMove = useThrottleCallback(callback, throttleMs)\n\n  useEffect(() => {\n    const channel = supabase.channel(roomName)\n\n    channel\n      .on('presence', { event: 'leave' }, ({ leftPresences }) => {\n        leftPresences.forEach(function (element) {\n          // Remove cursor when user leaves\n          setCursors((prev) => {\n            if (prev[element.key]) {\n              delete prev[element.key]\n            }\n\n            return { ...prev }\n          })\n        })\n      })\n      .on('presence', { event: 'join' }, () => {\n        if (!cursorPayload.current) return\n\n        // All cursors broadcast their position when a new cursor joins\n        channelRef.current?.send({\n          type: 'broadcast',\n          event: EVENT_NAME,\n          payload: cursorPayload.current,\n        })\n      })\n      .on('broadcast', { event: EVENT_NAME }, (data: { payload: CursorEventPayload }) => {\n        const { user } = data.payload\n        // Don't render your own cursor\n        if (user.id === userId) return\n\n        setCursors((prev) => {\n          if (prev[userId]) {\n            delete prev[userId]\n          }\n\n          return {\n            ...prev,\n            [user.id]: data.payload,\n          }\n        })\n      })\n      .subscribe(async (status) => {\n        if (status === REALTIME_SUBSCRIBE_STATES.SUBSCRIBED) {\n          await channel.track({ key: userId })\n          channelRef.current = channel\n        } else {\n          setCursors({})\n          channelRef.current = null\n        }\n      })\n\n    return () => {\n      channel.unsubscribe()\n      channelRef.current = null\n    }\n  }, [])\n\n  useEffect(() => {\n    // Add event listener for mousemove\n    window.addEventListener('mousemove', handleMouseMove)\n\n    // Cleanup on unmount\n    return () => {\n      window.removeEventListener('mousemove', handleMouseMove)\n    }\n  }, [handleMouseMove])\n\n  return { cursors }\n}\n",
       "type": "registry:hook"
     },
     {
diff --git a/apps/ui-library/public/r/realtime-cursor-tanstack.json b/apps/ui-library/public/r/realtime-cursor-tanstack.json
index ccb3216328d..a39dc0d793c 100644
--- a/apps/ui-library/public/r/realtime-cursor-tanstack.json
+++ b/apps/ui-library/public/r/realtime-cursor-tanstack.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/default/blocks/realtime-cursor/components/cursor.tsx",
-      "content": "import { cn } from '@/lib/utils'\nimport { MousePointer2 } from 'lucide-react'\n\nexport const Cursor = ({\n  className,\n  style,\n  color,\n  name,\n}: {\n  className?: string\n  style?: React.CSSProperties\n  color: string\n  name: string\n}) => {\n  return (\n    <div className={cn('pointer-events-none', className)} style={style}>\n      <MousePointer2 color={color} fill={color} size={30} />\n\n      <div\n        className=\"mt-1 px-2 py-1 rounded text-xs font-bold text-white text-center\"\n        style={{ backgroundColor: color }}\n      >\n        {name}\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { MousePointer2 } from 'lucide-react'\n\nimport { cn } from '@/lib/utils'\n\nexport const Cursor = ({\n  className,\n  style,\n  color,\n  name,\n}: {\n  className?: string\n  style?: React.CSSProperties\n  color: string\n  name: string\n}) => {\n  return (\n    <div className={cn('pointer-events-none', className)} style={style}>\n      <MousePointer2 color={color} fill={color} size={30} />\n\n      <div\n        className=\"mt-1 px-2 py-1 rounded text-xs font-bold text-white text-center\"\n        style={{ backgroundColor: color }}\n      >\n        {name}\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -23,7 +23,7 @@
     },
     {
       "path": "registry/default/blocks/realtime-cursor/hooks/use-realtime-cursors.ts",
-      "content": "import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\nimport { RealtimeChannel, REALTIME_SUBSCRIBE_STATES } from '@supabase/supabase-js'\nimport { useCallback, useEffect, useRef, useState } from 'react'\n\n/**\n * Throttle a callback to a certain delay, It will only call the callback if the delay has passed, with the arguments\n * from the last call\n */\nconst useThrottleCallback = <Params extends unknown[], Return>(\n  callback: (...args: Params) => Return,\n  delay: number\n) => {\n  const lastCall = useRef(0)\n  const timeout = useRef<NodeJS.Timeout | null>(null)\n\n  return useCallback(\n    (...args: Params) => {\n      const now = Date.now()\n      const remainingTime = delay - (now - lastCall.current)\n\n      if (remainingTime <= 0) {\n        if (timeout.current) {\n          clearTimeout(timeout.current)\n          timeout.current = null\n        }\n        lastCall.current = now\n        callback(...args)\n      } else if (!timeout.current) {\n        timeout.current = setTimeout(() => {\n          lastCall.current = Date.now()\n          timeout.current = null\n          callback(...args)\n        }, remainingTime)\n      }\n    },\n    [callback, delay]\n  )\n}\n\nconst supabase = createClient()\n\nconst generateRandomColor = () => `hsl(${Math.floor(Math.random() * 360)}, 100%, 70%)`\n\nconst generateRandomNumber = () => Math.floor(Math.random() * 100)\n\nconst EVENT_NAME = 'realtime-cursor-move'\n\ntype CursorEventPayload = {\n  position: {\n    x: number\n    y: number\n  }\n  user: {\n    id: number\n    name: string\n  }\n  color: string\n  timestamp: number\n}\n\nexport const useRealtimeCursors = ({\n  roomName,\n  username,\n  throttleMs,\n}: {\n  roomName: string\n  username: string\n  throttleMs: number\n}) => {\n  const [color] = useState(generateRandomColor())\n  const [userId] = useState(generateRandomNumber())\n  const [cursors, setCursors] = useState<Record<string, CursorEventPayload>>({})\n  const cursorPayload = useRef<CursorEventPayload | null>(null)\n\n  const channelRef = useRef<RealtimeChannel | null>(null)\n\n  const callback = useCallback(\n    (event: MouseEvent) => {\n      const { clientX, clientY } = event\n\n      const payload: CursorEventPayload = {\n        position: {\n          x: clientX,\n          y: clientY,\n        },\n        user: {\n          id: userId,\n          name: username,\n        },\n        color: color,\n        timestamp: new Date().getTime(),\n      }\n\n      cursorPayload.current = payload\n\n      channelRef.current?.send({\n        type: 'broadcast',\n        event: EVENT_NAME,\n        payload: payload,\n      })\n    },\n    [color, userId, username]\n  )\n\n  const handleMouseMove = useThrottleCallback(callback, throttleMs)\n\n  useEffect(() => {\n    const channel = supabase.channel(roomName)\n\n    channel\n      .on('presence', { event: 'leave' }, ({ leftPresences }) => {\n        leftPresences.forEach(function (element) {\n          // Remove cursor when user leaves\n          setCursors((prev) => {\n            if (prev[element.key]) {\n              delete prev[element.key]\n            }\n\n            return { ...prev }\n          })\n        })\n      })\n      .on('presence', { event: 'join' }, () => {\n        if (!cursorPayload.current) return\n\n        // All cursors broadcast their position when a new cursor joins\n        channelRef.current?.send({\n          type: 'broadcast',\n          event: EVENT_NAME,\n          payload: cursorPayload.current,\n        })\n      })\n      .on('broadcast', { event: EVENT_NAME }, (data: { payload: CursorEventPayload }) => {\n        const { user } = data.payload\n        // Don't render your own cursor\n        if (user.id === userId) return\n\n        setCursors((prev) => {\n          if (prev[userId]) {\n            delete prev[userId]\n          }\n\n          return {\n            ...prev,\n            [user.id]: data.payload,\n          }\n        })\n      })\n      .subscribe(async (status) => {\n        if (status === REALTIME_SUBSCRIBE_STATES.SUBSCRIBED) {\n          await channel.track({ key: userId })\n          channelRef.current = channel\n        } else {\n          setCursors({})\n          channelRef.current = null\n        }\n      })\n\n    return () => {\n      channel.unsubscribe()\n      channelRef.current = null\n    }\n  }, [])\n\n  useEffect(() => {\n    // Add event listener for mousemove\n    window.addEventListener('mousemove', handleMouseMove)\n\n    // Cleanup on unmount\n    return () => {\n      window.removeEventListener('mousemove', handleMouseMove)\n    }\n  }, [handleMouseMove])\n\n  return { cursors }\n}\n",
+      "content": "import { REALTIME_SUBSCRIBE_STATES, RealtimeChannel } from '@supabase/supabase-js'\nimport { useCallback, useEffect, useRef, useState } from 'react'\n\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\n\n/**\n * Throttle a callback to a certain delay, It will only call the callback if the delay has passed, with the arguments\n * from the last call\n */\nconst useThrottleCallback = <Params extends unknown[], Return>(\n  callback: (...args: Params) => Return,\n  delay: number\n) => {\n  const lastCall = useRef(0)\n  const timeout = useRef<NodeJS.Timeout | null>(null)\n\n  return useCallback(\n    (...args: Params) => {\n      const now = Date.now()\n      const remainingTime = delay - (now - lastCall.current)\n\n      if (remainingTime <= 0) {\n        if (timeout.current) {\n          clearTimeout(timeout.current)\n          timeout.current = null\n        }\n        lastCall.current = now\n        callback(...args)\n      } else if (!timeout.current) {\n        timeout.current = setTimeout(() => {\n          lastCall.current = Date.now()\n          timeout.current = null\n          callback(...args)\n        }, remainingTime)\n      }\n    },\n    [callback, delay]\n  )\n}\n\nconst supabase = createClient()\n\nconst generateRandomColor = () => `hsl(${Math.floor(Math.random() * 360)}, 100%, 70%)`\n\nconst generateRandomNumber = () => Math.floor(Math.random() * 100)\n\nconst EVENT_NAME = 'realtime-cursor-move'\n\ntype CursorEventPayload = {\n  position: {\n    x: number\n    y: number\n  }\n  user: {\n    id: number\n    name: string\n  }\n  color: string\n  timestamp: number\n}\n\nexport const useRealtimeCursors = ({\n  roomName,\n  username,\n  throttleMs,\n}: {\n  roomName: string\n  username: string\n  throttleMs: number\n}) => {\n  const [color] = useState(generateRandomColor())\n  const [userId] = useState(generateRandomNumber())\n  const [cursors, setCursors] = useState<Record<string, CursorEventPayload>>({})\n  const cursorPayload = useRef<CursorEventPayload | null>(null)\n\n  const channelRef = useRef<RealtimeChannel | null>(null)\n\n  const callback = useCallback(\n    (event: MouseEvent) => {\n      const { clientX, clientY } = event\n\n      const payload: CursorEventPayload = {\n        position: {\n          x: clientX,\n          y: clientY,\n        },\n        user: {\n          id: userId,\n          name: username,\n        },\n        color: color,\n        timestamp: new Date().getTime(),\n      }\n\n      cursorPayload.current = payload\n\n      channelRef.current?.send({\n        type: 'broadcast',\n        event: EVENT_NAME,\n        payload: payload,\n      })\n    },\n    [color, userId, username]\n  )\n\n  const handleMouseMove = useThrottleCallback(callback, throttleMs)\n\n  useEffect(() => {\n    const channel = supabase.channel(roomName)\n\n    channel\n      .on('presence', { event: 'leave' }, ({ leftPresences }) => {\n        leftPresences.forEach(function (element) {\n          // Remove cursor when user leaves\n          setCursors((prev) => {\n            if (prev[element.key]) {\n              delete prev[element.key]\n            }\n\n            return { ...prev }\n          })\n        })\n      })\n      .on('presence', { event: 'join' }, () => {\n        if (!cursorPayload.current) return\n\n        // All cursors broadcast their position when a new cursor joins\n        channelRef.current?.send({\n          type: 'broadcast',\n          event: EVENT_NAME,\n          payload: cursorPayload.current,\n        })\n      })\n      .on('broadcast', { event: EVENT_NAME }, (data: { payload: CursorEventPayload }) => {\n        const { user } = data.payload\n        // Don't render your own cursor\n        if (user.id === userId) return\n\n        setCursors((prev) => {\n          if (prev[userId]) {\n            delete prev[userId]\n          }\n\n          return {\n            ...prev,\n            [user.id]: data.payload,\n          }\n        })\n      })\n      .subscribe(async (status) => {\n        if (status === REALTIME_SUBSCRIBE_STATES.SUBSCRIBED) {\n          await channel.track({ key: userId })\n          channelRef.current = channel\n        } else {\n          setCursors({})\n          channelRef.current = null\n        }\n      })\n\n    return () => {\n      channel.unsubscribe()\n      channelRef.current = null\n    }\n  }, [])\n\n  useEffect(() => {\n    // Add event listener for mousemove\n    window.addEventListener('mousemove', handleMouseMove)\n\n    // Cleanup on unmount\n    return () => {\n      window.removeEventListener('mousemove', handleMouseMove)\n    }\n  }, [handleMouseMove])\n\n  return { cursors }\n}\n",
       "type": "registry:hook"
     },
     {
diff --git a/apps/ui-library/public/r/realtime-cursor-vue.json b/apps/ui-library/public/r/realtime-cursor-vue.json
index 9d4de1a8a46..dca9a2af3c1 100644
--- a/apps/ui-library/public/r/realtime-cursor-vue.json
+++ b/apps/ui-library/public/r/realtime-cursor-vue.json
@@ -12,19 +12,19 @@
   "files": [
     {
       "path": "registry/default/realtime-cursor/vue/components/cursor.vue",
-      "content": "<script setup lang=\"ts\">\nimport { MousePointer2 } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport type { CSSProperties } from 'vue'\n\ndefineProps<{\n  className?: string\n  style?: CSSProperties\n  color: string\n  name: string\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"cn('pointer-events-none', className)\"\n    :style=\"style\"\n  >\n    <MousePointer2\n      :color=\"color\"\n      :fill=\"color\"\n      :size=\"30\"\n    />\n\n    <div\n      class=\"mt-1 px-2 py-1 rounded text-xs font-bold text-white text-center\"\n      :style=\"{ backgroundColor: color }\"\n    >\n      {{ name }}\n    </div>\n  </div>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { MousePointer2 } from 'lucide-vue-next'\nimport type { CSSProperties } from 'vue'\n// @ts-ignore\nimport { cn } from '@/lib/utils'\n\ndefineProps<{\n  className?: string\n  style?: CSSProperties\n  color: string\n  name: string\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"cn('pointer-events-none', className)\"\n    :style=\"style\"\n  >\n    <MousePointer2\n      :color=\"color\"\n      :fill=\"color\"\n      :size=\"30\"\n    />\n\n    <div\n      class=\"mt-1 px-2 py-1 rounded text-xs font-bold text-white text-center\"\n      :style=\"{ backgroundColor: color }\"\n    >\n      {{ name }}\n    </div>\n  </div>\n</template>\n",
       "type": "registry:component",
       "target": "components/cursor.vue"
     },
     {
       "path": "registry/default/realtime-cursor/vue/components/realtime-cursors.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Cursor } from '@/components/cursor'\nimport { useRealtimeCursors } from '@/composables/useRealtimeCursors'\n\nconst THROTTLE_MS = 50\n\nconst props = defineProps<{\n  roomName: string\n  username: string\n}>()\n\nconst { cursors } = useRealtimeCursors({\n  roomName: props.roomName,\n  username: props.username,\n  throttleMs: THROTTLE_MS,\n})\n</script>\n\n<template>\n  <div>\n    <Cursor\n      v-for=\"(cursor, id) in cursors\"\n      :key=\"id\"\n      className=\"fixed transition-transform ease-in-out z-50\"\n      :style=\"{\n        transitionDuration: '20ms',\n        top: '0px',\n        left: '0px',\n        transform: `translate(${cursor.position.x}px, ${cursor.position.y}px)`,\n      }\"\n      :color=\"cursor.color\"\n      :name=\"cursor.user.name\"\n    />\n  </div>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\n  // @ts-ignore\nimport { Cursor } from '@/components/cursor'\n// @ts-ignore\nimport { useRealtimeCursors } from '@/composables/useRealtimeCursors'\n\nconst THROTTLE_MS = 50\n\nconst props = defineProps<{\n  roomName: string\n  username: string\n}>()\n\nconst { cursors } = useRealtimeCursors({\n  roomName: props.roomName,\n  username: props.username,\n  throttleMs: THROTTLE_MS,\n})\n</script>\n\n<template>\n  <div>\n    <Cursor\n      v-for=\"(cursor, id) in cursors\"\n      :key=\"id\"\n      className=\"fixed transition-transform ease-in-out z-50\"\n      :style=\"{\n        transitionDuration: '20ms',\n        top: '0px',\n        left: '0px',\n        transform: `translate(${cursor.position.x}px, ${cursor.position.y}px)`,\n      }\"\n      :color=\"cursor.color\"\n      :name=\"cursor.user.name\"\n    />\n  </div>\n</template>\n",
       "type": "registry:component",
       "target": "components/realtime-cursors.vue"
     },
     {
       "path": "registry/default/realtime-cursor/vue/composables/useRealtimeCursors.ts",
-      "content": "import { ref, reactive, onMounted, onUnmounted } from 'vue'\nimport { createClient } from '@/lib/supabase/client'\nimport { REALTIME_SUBSCRIBE_STATES, type RealtimeChannel } from '@supabase/supabase-js'\n\n/**\n * Throttle a callback to a certain delay.\n * It will only call the callback if the delay has passed,\n * using the arguments from the last call.\n */\nfunction useThrottleCallback<Params extends unknown[]>(\n  callback: (...args: Params) => void,\n  delay: number\n) {\n  let lastCall = 0\n  let timeout: ReturnType<typeof setTimeout> | null = null\n\n  const run = (...args: Params) => {\n    const now = Date.now()\n    const remainingTime = delay - (now - lastCall)\n\n    if (remainingTime <= 0) {\n      if (timeout) {\n        clearTimeout(timeout)\n        timeout = null\n      }\n      lastCall = now\n      callback(...args)\n    } else if (!timeout) {\n      timeout = setTimeout(() => {\n        lastCall = Date.now()\n        timeout = null\n        callback(...args)\n      }, remainingTime)\n    }\n  }\n\n  const cancel = () => {\n    if (timeout) {\n      clearTimeout(timeout)\n      timeout = null\n    }\n  }\n\n  return { run, cancel }\n}\n\nconst supabase = createClient()\n\nconst generateRandomColor = () =>\n  `hsl(${Math.floor(Math.random() * 360)}, 100%, 70%)`\n\nconst generateRandomNumber = () =>\n  Math.floor(Math.random() * 100)\n\nconst EVENT_NAME = 'realtime-cursor-move'\n\nexport type CursorEventPayload = {\n  position: { x: number; y: number }\n  user: { id: number; name: string }\n  color: string\n  timestamp: number\n}\n\nexport function useRealtimeCursors({\n  roomName,\n  username,\n  throttleMs,\n}: {\n  roomName: string\n  username: string\n  throttleMs: number\n}) {\n  const color = generateRandomColor()\n  const userId = generateRandomNumber()\n\n  const cursors = reactive<Record<string, CursorEventPayload>>({})\n  const cursorPayload = ref<CursorEventPayload | null>(null)\n  const channelRef = ref<RealtimeChannel | null>(null)\n\n  const sendCursor = (event: MouseEvent) => {\n    const payload: CursorEventPayload = {\n      position: {\n        x: event.clientX,\n        y: event.clientY,\n      },\n      user: {\n        id: userId,\n        name: username,\n      },\n      color,\n      timestamp: Date.now(),\n    }\n\n    cursorPayload.value = payload\n\n    channelRef.value?.send({\n      type: 'broadcast',\n      event: EVENT_NAME,\n      payload,\n    })\n  }\n\n  const { run: handleMouseMove, cancel: cancelThrottle } =\n  useThrottleCallback(sendCursor, throttleMs)\n\n  onMounted(() => {\n    const channel = supabase.channel(roomName)\n\n    channel\n      .on('system', {}, (payload: CursorEventPayload) => {\n        console.error('Realtime system error:', payload)\n\n        // Defensive cleanup\n        Object.keys(cursors).forEach((k) => delete cursors[k])\n        channelRef.value = null\n      })\n      .on('presence', { event: 'leave' }, ({ leftPresences }) => {\n        leftPresences.forEach(({ key }) => {\n          delete cursors[key]\n        })\n      })\n      .on('presence', { event: 'join' }, () => {\n        if (!cursorPayload.value) return\n\n        channelRef.value?.send({\n          type: 'broadcast',\n          event: EVENT_NAME,\n          payload: cursorPayload.value,\n        })\n      })\n      .on('broadcast', { event: EVENT_NAME }, ({ payload }: { payload: CursorEventPayload }) => {\n        if (payload.user.id === userId) return\n\n        cursors[payload.user.id] = payload\n      })\n      .subscribe(async (status) => {\n        if (status === REALTIME_SUBSCRIBE_STATES.SUBSCRIBED) {\n          try {\n            await channel.track({ key: userId })\n            channelRef.value = channel\n          } catch (err) {\n            console.error('Failed to track presence for current user:', err)\n            channelRef.value = null\n          }\n        } else {\n          Object.keys(cursors).forEach((k) => delete cursors[k])\n          channelRef.value = null\n        }\n      })\n\n    window.addEventListener('mousemove', handleMouseMove)\n  })\n\n  onUnmounted(() => {\n    window.removeEventListener('mousemove', handleMouseMove)\n\n    cancelThrottle()\n\n    if (channelRef.value) {\n      channelRef.value.unsubscribe()\n      channelRef.value = null\n    }\n\n    Object.keys(cursors).forEach((k) => delete cursors[k])\n  })\n\n  return { cursors }\n}\n",
+      "content": "import { ref, reactive, onMounted, onUnmounted } from 'vue'\nimport { REALTIME_SUBSCRIBE_STATES, type RealtimeChannel } from '@supabase/supabase-js'\n// @ts-ignore\nimport { createClient } from '@/lib/supabase/client'\n\n/**\n * Throttle a callback to a certain delay.\n * It will only call the callback if the delay has passed,\n * using the arguments from the last call.\n */\nfunction useThrottleCallback<Params extends unknown[]>(\n  callback: (...args: Params) => void,\n  delay: number\n) {\n  let lastCall = 0\n  let timeout: ReturnType<typeof setTimeout> | null = null\n\n  const run = (...args: Params) => {\n    const now = Date.now()\n    const remainingTime = delay - (now - lastCall)\n\n    if (remainingTime <= 0) {\n      if (timeout) {\n        clearTimeout(timeout)\n        timeout = null\n      }\n      lastCall = now\n      callback(...args)\n    } else if (!timeout) {\n      timeout = setTimeout(() => {\n        lastCall = Date.now()\n        timeout = null\n        callback(...args)\n      }, remainingTime)\n    }\n  }\n\n  const cancel = () => {\n    if (timeout) {\n      clearTimeout(timeout)\n      timeout = null\n    }\n  }\n\n  return { run, cancel }\n}\n\nconst supabase = createClient()\n\nconst generateRandomColor = () =>\n  `hsl(${Math.floor(Math.random() * 360)}, 100%, 70%)`\n\nconst generateRandomNumber = () =>\n  Math.floor(Math.random() * 100)\n\nconst EVENT_NAME = 'realtime-cursor-move'\n\nexport type CursorEventPayload = {\n  position: { x: number; y: number }\n  user: { id: number; name: string }\n  color: string\n  timestamp: number\n}\n\nexport function useRealtimeCursors({\n  roomName,\n  username,\n  throttleMs,\n}: {\n  roomName: string\n  username: string\n  throttleMs: number\n}) {\n  const color = generateRandomColor()\n  const userId = generateRandomNumber()\n\n  const cursors = reactive<Record<string, CursorEventPayload>>({})\n  const cursorPayload = ref<CursorEventPayload | null>(null)\n  const channelRef = ref<RealtimeChannel | null>(null)\n\n  const sendCursor = (event: MouseEvent) => {\n    const payload: CursorEventPayload = {\n      position: {\n        x: event.clientX,\n        y: event.clientY,\n      },\n      user: {\n        id: userId,\n        name: username,\n      },\n      color,\n      timestamp: Date.now(),\n    }\n\n    cursorPayload.value = payload\n\n    channelRef.value?.send({\n      type: 'broadcast',\n      event: EVENT_NAME,\n      payload,\n    })\n  }\n\n  const { run: handleMouseMove, cancel: cancelThrottle } =\n  useThrottleCallback(sendCursor, throttleMs)\n\n  onMounted(() => {\n    const channel = supabase.channel(roomName)\n\n    channel\n      .on('system', {}, (payload: CursorEventPayload) => {\n        console.error('Realtime system error:', payload)\n\n        // Defensive cleanup\n        Object.keys(cursors).forEach((k) => delete cursors[k])\n        channelRef.value = null\n      })\n      .on('presence', { event: 'leave' }, ({ leftPresences }: { leftPresences: Array<{ key: string }> }) => {\n        leftPresences.forEach(({ key }) => {\n          delete cursors[key]\n        })\n      })\n      .on('presence', { event: 'join' }, () => {\n        if (!cursorPayload.value) return\n\n        channelRef.value?.send({\n          type: 'broadcast',\n          event: EVENT_NAME,\n          payload: cursorPayload.value,\n        })\n      })\n      .on('broadcast', { event: EVENT_NAME }, ({ payload }: { payload: CursorEventPayload }) => {\n        if (payload.user.id === userId) return\n\n        cursors[payload.user.id] = payload\n      })\n      .subscribe(async (status: REALTIME_SUBSCRIBE_STATES) => {\n        if (status === REALTIME_SUBSCRIBE_STATES.SUBSCRIBED) {\n          try {\n            await channel.track({ key: userId })\n            channelRef.value = channel\n          } catch (err) {\n            console.error('Failed to track presence for current user:', err)\n            channelRef.value = null\n          }\n        } else {\n          Object.keys(cursors).forEach((k) => delete cursors[k])\n          channelRef.value = null\n        }\n      })\n\n    window.addEventListener('mousemove', handleMouseMove)\n  })\n\n  onUnmounted(() => {\n    window.removeEventListener('mousemove', handleMouseMove)\n\n    cancelThrottle()\n\n    if (channelRef.value) {\n      channelRef.value.unsubscribe()\n      channelRef.value = null\n    }\n\n    Object.keys(cursors).forEach((k) => delete cursors[k])\n  })\n\n  return { cursors }\n}\n",
       "type": "registry:component",
       "target": "composables/useRealtimeCursors.ts"
     }
diff --git a/apps/ui-library/public/r/social-auth-nextjs.json b/apps/ui-library/public/r/social-auth-nextjs.json
index df08867c11c..5a40cb2ab60 100644
--- a/apps/ui-library/public/r/social-auth-nextjs.json
+++ b/apps/ui-library/public/r/social-auth-nextjs.json
@@ -33,24 +33,24 @@
     },
     {
       "path": "registry/default/blocks/social-auth-nextjs/app/auth/oauth/route.ts",
-      "content": "import { NextResponse } from 'next/server'\n// The client you created from the Server-Side Auth instructions\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/server'\n\nexport async function GET(request: Request) {\n  const { searchParams, origin } = new URL(request.url)\n  const code = searchParams.get('code')\n  // if \"next\" is in param, use it as the redirect URL\n  let next = searchParams.get('next') ?? '/'\n  if (!next.startsWith('/')) {\n    // if \"next\" is not a relative URL, use the default\n    next = '/'\n  }\n\n  if (code) {\n    const supabase = await createClient()\n    const { error } = await supabase.auth.exchangeCodeForSession(code)\n    if (!error) {\n      const forwardedHost = request.headers.get('x-forwarded-host') // original origin before load balancer\n      const isLocalEnv = process.env.NODE_ENV === 'development'\n      if (isLocalEnv) {\n        // we can be sure that there is no load balancer in between, so no need to watch for X-Forwarded-Host\n        return NextResponse.redirect(`${origin}${next}`)\n      } else if (forwardedHost) {\n        return NextResponse.redirect(`https://${forwardedHost}${next}`)\n      } else {\n        return NextResponse.redirect(`${origin}${next}`)\n      }\n    }\n  }\n\n  // return the user to an error page with instructions\n  return NextResponse.redirect(`${origin}/auth/error`)\n}\n",
+      "content": "import { NextResponse } from 'next/server'\n\n// The client you created from the Server-Side Auth instructions\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/server'\n\nexport async function GET(request: Request) {\n  const { searchParams, origin } = new URL(request.url)\n  const code = searchParams.get('code')\n  // if \"next\" is in param, use it as the redirect URL\n  let next = searchParams.get('next') ?? '/'\n  if (!next.startsWith('/')) {\n    // if \"next\" is not a relative URL, use the default\n    next = '/'\n  }\n\n  if (code) {\n    const supabase = await createClient()\n    const { error } = await supabase.auth.exchangeCodeForSession(code)\n    if (!error) {\n      const forwardedHost = request.headers.get('x-forwarded-host') // original origin before load balancer\n      const isLocalEnv = process.env.NODE_ENV === 'development'\n      if (isLocalEnv) {\n        // we can be sure that there is no load balancer in between, so no need to watch for X-Forwarded-Host\n        return NextResponse.redirect(`${origin}${next}`)\n      } else if (forwardedHost) {\n        return NextResponse.redirect(`https://${forwardedHost}${next}`)\n      } else {\n        return NextResponse.redirect(`${origin}${next}`)\n      }\n    }\n  }\n\n  // return the user to an error page with instructions\n  return NextResponse.redirect(`${origin}/auth/error`)\n}\n",
       "type": "registry:page",
       "target": "app/auth/oauth/route.ts"
     },
     {
       "path": "registry/default/blocks/social-auth-nextjs/components/login-form.tsx",
-      "content": "'use client'\n\nimport { cn } from '@/lib/utils'\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { useState } from 'react'\n\nexport function LoginForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {\n  const [error, setError] = useState<string | null>(null)\n  const [isLoading, setIsLoading] = useState(false)\n\n  const handleSocialLogin = async (e: React.FormEvent) => {\n    e.preventDefault()\n    const supabase = createClient()\n    setIsLoading(true)\n    setError(null)\n\n    try {\n      const { error } = await supabase.auth.signInWithOAuth({\n        provider: 'github',\n        options: {\n          redirectTo: `${window.location.origin}/auth/oauth?next=/protected`,\n        },\n      })\n\n      if (error) throw error\n    } catch (error: unknown) {\n      setError(error instanceof Error ? error.message : 'An error occurred')\n      setIsLoading(false)\n    }\n  }\n\n  return (\n    <div className={cn('flex flex-col gap-6', className)} {...props}>\n      <Card>\n        <CardHeader>\n          <CardTitle className=\"text-2xl\">Welcome!</CardTitle>\n          <CardDescription>Sign in to your account to continue</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form onSubmit={handleSocialLogin}>\n            <div className=\"flex flex-col gap-6\">\n              {error && <p className=\"text-sm text-destructive-500\">{error}</p>}\n              <Button type=\"submit\" className=\"w-full\" disabled={isLoading}>\n                {isLoading ? 'Logging in...' : 'Continue with GitHub'}\n              </Button>\n            </div>\n          </form>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n",
+      "content": "'use client'\n\nimport { useState } from 'react'\n\nimport { cn } from '@/lib/utils'\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/components/ui/card'\n\nexport function LoginForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {\n  const [error, setError] = useState<string | null>(null)\n  const [isLoading, setIsLoading] = useState(false)\n\n  const handleSocialLogin = async (e: React.FormEvent) => {\n    e.preventDefault()\n    const supabase = createClient()\n    setIsLoading(true)\n    setError(null)\n\n    try {\n      const { error } = await supabase.auth.signInWithOAuth({\n        provider: 'github',\n        options: {\n          redirectTo: `${window.location.origin}/auth/oauth?next=/protected`,\n        },\n      })\n\n      if (error) throw error\n    } catch (error: unknown) {\n      setError(error instanceof Error ? error.message : 'An error occurred')\n      setIsLoading(false)\n    }\n  }\n\n  return (\n    <div className={cn('flex flex-col gap-6', className)} {...props}>\n      <Card>\n        <CardHeader>\n          <CardTitle className=\"text-2xl\">Welcome!</CardTitle>\n          <CardDescription>Sign in to your account to continue</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form onSubmit={handleSocialLogin}>\n            <div className=\"flex flex-col gap-6\">\n              {error && <p className=\"text-sm text-destructive-500\">{error}</p>}\n              <Button type=\"submit\" className=\"w-full\" disabled={isLoading}>\n                {isLoading ? 'Logging in...' : 'Continue with GitHub'}\n              </Button>\n            </div>\n          </form>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/default/blocks/social-auth-nextjs/middleware.ts",
-      "content": "import { updateSession } from '@/registry/default/clients/nextjs/lib/supabase/middleware'\nimport { type NextRequest } from 'next/server'\n\nexport async function middleware(request: NextRequest) {\n  return await updateSession(request)\n}\n\nexport const config = {\n  matcher: [\n    /*\n     * Match all request paths except for the ones starting with:\n     * - _next/static (static files)\n     * - _next/image (image optimization files)\n     * - favicon.ico (favicon file)\n     * Feel free to modify this pattern to include more paths.\n     */\n    '/((?!_next/static|_next/image|favicon.ico|.*\\\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)',\n  ],\n}\n",
+      "content": "import { type NextRequest } from 'next/server'\n\nimport { updateSession } from '@/registry/default/clients/nextjs/lib/supabase/middleware'\n\nexport async function middleware(request: NextRequest) {\n  return await updateSession(request)\n}\n\nexport const config = {\n  matcher: [\n    /*\n     * Match all request paths except for the ones starting with:\n     * - _next/static (static files)\n     * - _next/image (image optimization files)\n     * - favicon.ico (favicon file)\n     * Feel free to modify this pattern to include more paths.\n     */\n    '/((?!_next/static|_next/image|favicon.ico|.*\\\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)',\n  ],\n}\n",
       "type": "registry:file",
       "target": "middleware.ts"
     },
     {
       "path": "registry/default/blocks/social-auth-nextjs/components/logout-button.tsx",
-      "content": "'use client'\n\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\nimport { Button } from '@/registry/default/components/ui/button'\nimport { useRouter } from 'next/navigation'\n\nexport function LogoutButton() {\n  const router = useRouter()\n\n  const logout = async () => {\n    const supabase = createClient()\n    await supabase.auth.signOut()\n    router.push('/auth/login')\n  }\n\n  return <Button onClick={logout}>Logout</Button>\n}\n",
+      "content": "'use client'\n\nimport { useRouter } from 'next/navigation'\n\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\nimport { Button } from '@/registry/default/components/ui/button'\n\nexport function LogoutButton() {\n  const router = useRouter()\n\n  const logout = async () => {\n    const supabase = createClient()\n    await supabase.auth.signOut()\n    router.push('/auth/login')\n  }\n\n  return <Button onClick={logout}>Logout</Button>\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/ui-library/public/r/social-auth-react-router.json b/apps/ui-library/public/r/social-auth-react-router.json
index 35d4be0cad0..f51750595e3 100644
--- a/apps/ui-library/public/r/social-auth-react-router.json
+++ b/apps/ui-library/public/r/social-auth-react-router.json
@@ -17,31 +17,31 @@
   "files": [
     {
       "path": "registry/default/blocks/social-auth-react-router/app/routes/auth.error.tsx",
-      "content": "import { Card, CardContent, CardHeader, CardTitle } from '@/registry/default/components/ui/card'\nimport { useSearchParams } from 'react-router'\n\nexport default function Page() {\n  let [searchParams] = useSearchParams()\n\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <div className=\"flex flex-col gap-6\">\n          <Card>\n            <CardHeader>\n              <CardTitle className=\"text-2xl\">Sorry, something went wrong.</CardTitle>\n            </CardHeader>\n            <CardContent>\n              {searchParams?.get('error') ? (\n                <p className=\"text-sm text-muted-foreground\">\n                  Code error: {searchParams?.get('error')}\n                </p>\n              ) : (\n                <p className=\"text-sm text-muted-foreground\">An unspecified error occurred.</p>\n              )}\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { useSearchParams } from 'react-router'\n\nimport { Card, CardContent, CardHeader, CardTitle } from '@/registry/default/components/ui/card'\n\nexport default function Page() {\n  let [searchParams] = useSearchParams()\n\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <div className=\"flex flex-col gap-6\">\n          <Card>\n            <CardHeader>\n              <CardTitle className=\"text-2xl\">Sorry, something went wrong.</CardTitle>\n            </CardHeader>\n            <CardContent>\n              {searchParams?.get('error') ? (\n                <p className=\"text-sm text-muted-foreground\">\n                  Code error: {searchParams?.get('error')}\n                </p>\n              ) : (\n                <p className=\"text-sm text-muted-foreground\">An unspecified error occurred.</p>\n              )}\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:file",
       "target": "app/routes/auth.error.tsx"
     },
     {
       "path": "registry/default/blocks/social-auth-react-router/app/routes/auth.oauth.tsx",
-      "content": "import { createClient } from '@/registry/default/clients/react-router/lib/supabase/server'\nimport { type LoaderFunctionArgs, redirect } from 'react-router'\n\nexport async function loader({ request }: LoaderFunctionArgs) {\n  const requestUrl = new URL(request.url)\n  const code = requestUrl.searchParams.get('code')\n  const _next = requestUrl.searchParams.get('next')\n  const next = _next?.startsWith('/') ? _next : '/'\n  if (code) {\n    const { supabase, headers } = createClient(request)\n\n    const { error } = await supabase.auth.exchangeCodeForSession(code)\n    if (!error) {\n      return redirect(next, { headers })\n    } else {\n      return redirect(`/auth/error?error=${error?.message}`)\n    }\n  }\n  // redirect the user to an error page with some instructions\n  return redirect(`/auth/error`)\n}\n",
+      "content": "import { redirect, type LoaderFunctionArgs } from 'react-router'\n\nimport { createClient } from '@/registry/default/clients/react-router/lib/supabase/server'\n\nexport async function loader({ request }: LoaderFunctionArgs) {\n  const requestUrl = new URL(request.url)\n  const code = requestUrl.searchParams.get('code')\n  const _next = requestUrl.searchParams.get('next')\n  const next = _next?.startsWith('/') ? _next : '/'\n  if (code) {\n    const { supabase, headers } = createClient(request)\n\n    const { error } = await supabase.auth.exchangeCodeForSession(code)\n    if (!error) {\n      return redirect(next, { headers })\n    } else {\n      return redirect(`/auth/error?error=${error?.message}`)\n    }\n  }\n  // redirect the user to an error page with some instructions\n  return redirect(`/auth/error`)\n}\n",
       "type": "registry:file",
       "target": "app/routes/auth.oauth.tsx"
     },
     {
       "path": "registry/default/blocks/social-auth-react-router/app/routes/login.tsx",
-      "content": "import { createClient } from '@/registry/default/clients/react-router/lib/supabase/server'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { type ActionFunctionArgs, redirect, useFetcher } from 'react-router'\n\nexport const action = async ({ request }: ActionFunctionArgs) => {\n  const { supabase } = createClient(request)\n  const origin = new URL(request.url).origin\n\n  const { data, error } = await supabase.auth.signInWithOAuth({\n    provider: 'github',\n    options: {\n      redirectTo: `${origin}/auth/oauth?next=/protected`,\n    },\n  })\n\n  if (data.url) {\n    return redirect(data.url)\n  }\n\n  if (error) {\n    return {\n      error: error instanceof Error ? error.message : 'An error occurred',\n    }\n  }\n}\n\nexport default function Login() {\n  const fetcher = useFetcher<typeof action>()\n\n  const error = fetcher.data?.error\n  const loading = fetcher.state === 'submitting'\n\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <div className=\"flex flex-col gap-6\">\n          <Card>\n            <CardHeader>\n              <CardTitle className=\"text-2xl\">Welcome!</CardTitle>\n              <CardDescription>Sign in to your account to continue</CardDescription>\n            </CardHeader>\n            <CardContent>\n              <fetcher.Form method=\"post\">\n                <div className=\"flex flex-col gap-6\">\n                  {error && <p className=\"text-sm text-destructive-500\">{error}</p>}\n                  <Button type=\"submit\" className=\"w-full\" disabled={loading}>\n                    {loading ? 'Logging in...' : 'Continue with GitHub'}\n                  </Button>\n                </div>\n              </fetcher.Form>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { redirect, useFetcher, type ActionFunctionArgs } from 'react-router'\n\nimport { createClient } from '@/registry/default/clients/react-router/lib/supabase/server'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/components/ui/card'\n\nexport const action = async ({ request }: ActionFunctionArgs) => {\n  const { supabase } = createClient(request)\n  const origin = new URL(request.url).origin\n\n  const { data, error } = await supabase.auth.signInWithOAuth({\n    provider: 'github',\n    options: {\n      redirectTo: `${origin}/auth/oauth?next=/protected`,\n    },\n  })\n\n  if (data.url) {\n    return redirect(data.url)\n  }\n\n  if (error) {\n    return {\n      error: error instanceof Error ? error.message : 'An error occurred',\n    }\n  }\n}\n\nexport default function Login() {\n  const fetcher = useFetcher<typeof action>()\n\n  const error = fetcher.data?.error\n  const loading = fetcher.state === 'submitting'\n\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <div className=\"flex flex-col gap-6\">\n          <Card>\n            <CardHeader>\n              <CardTitle className=\"text-2xl\">Welcome!</CardTitle>\n              <CardDescription>Sign in to your account to continue</CardDescription>\n            </CardHeader>\n            <CardContent>\n              <fetcher.Form method=\"post\">\n                <div className=\"flex flex-col gap-6\">\n                  {error && <p className=\"text-sm text-destructive-500\">{error}</p>}\n                  <Button type=\"submit\" className=\"w-full\" disabled={loading}>\n                    {loading ? 'Logging in...' : 'Continue with GitHub'}\n                  </Button>\n                </div>\n              </fetcher.Form>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:file",
       "target": "app/routes/login.tsx"
     },
     {
       "path": "registry/default/blocks/social-auth-react-router/app/routes/logout.tsx",
-      "content": "import { createClient } from '@/registry/default/clients/react-router/lib/supabase/server'\nimport { type ActionFunctionArgs, redirect } from 'react-router'\n\nexport async function loader({ request }: ActionFunctionArgs) {\n  const { supabase, headers } = createClient(request)\n\n  const { error } = await supabase.auth.signOut()\n\n  if (error) {\n    console.error(error)\n    return { success: false, error: error.message }\n  }\n\n  // Redirect to dashboard or home page after successful sign-in\n  return redirect('/', { headers })\n}\n",
+      "content": "import { redirect, type ActionFunctionArgs } from 'react-router'\n\nimport { createClient } from '@/registry/default/clients/react-router/lib/supabase/server'\n\nexport async function loader({ request }: ActionFunctionArgs) {\n  const { supabase, headers } = createClient(request)\n\n  const { error } = await supabase.auth.signOut()\n\n  if (error) {\n    console.error(error)\n    return { success: false, error: error.message }\n  }\n\n  // Redirect to dashboard or home page after successful sign-in\n  return redirect('/', { headers })\n}\n",
       "type": "registry:file",
       "target": "app/routes/logout.tsx"
     },
     {
       "path": "registry/default/blocks/social-auth-react-router/app/routes/protected.tsx",
-      "content": "import { createClient } from '@/registry/default/clients/react-router/lib/supabase/server'\nimport { Button } from '@/registry/default/components/ui/button'\nimport { type LoaderFunctionArgs, redirect, useLoaderData } from 'react-router'\n\nexport const loader = async ({ request }: LoaderFunctionArgs) => {\n  const { supabase } = createClient(request)\n\n  const { data, error } = await supabase.auth.getUser()\n  if (error || !data?.user) {\n    return redirect('/login')\n  }\n\n  return data\n}\n\nexport default function ProtectedPage() {\n  let data = useLoaderData<typeof loader>()\n\n  return (\n    <div className=\"flex items-center justify-center h-screen gap-2\">\n      <p>\n        Hello <span className=\"text-primary font-semibold\">{data.user.email}</span>\n      </p>\n      <a href=\"/logout\">\n        <Button>Logout</Button>\n      </a>\n    </div>\n  )\n}\n",
+      "content": "import { redirect, useLoaderData, type LoaderFunctionArgs } from 'react-router'\n\nimport { createClient } from '@/registry/default/clients/react-router/lib/supabase/server'\nimport { Button } from '@/registry/default/components/ui/button'\n\nexport const loader = async ({ request }: LoaderFunctionArgs) => {\n  const { supabase } = createClient(request)\n\n  const { data, error } = await supabase.auth.getUser()\n  if (error || !data?.user) {\n    return redirect('/login')\n  }\n\n  return data\n}\n\nexport default function ProtectedPage() {\n  let data = useLoaderData<typeof loader>()\n\n  return (\n    <div className=\"flex items-center justify-center h-screen gap-2\">\n      <p>\n        Hello <span className=\"text-primary font-semibold\">{data.user.email}</span>\n      </p>\n      <a href=\"/logout\">\n        <Button>Logout</Button>\n      </a>\n    </div>\n  )\n}\n",
       "type": "registry:file",
       "target": "app/routes/protected.tsx"
     },
diff --git a/apps/ui-library/public/r/social-auth-react.json b/apps/ui-library/public/r/social-auth-react.json
index 36ca3e28e72..21b7e55a999 100644
--- a/apps/ui-library/public/r/social-auth-react.json
+++ b/apps/ui-library/public/r/social-auth-react.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/default/blocks/social-auth-react/components/login-form.tsx",
-      "content": "'use client'\n\nimport { cn } from '@/lib/utils'\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { useState } from 'react'\n\nexport function LoginForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {\n  const [error, setError] = useState<string | null>(null)\n  const [isLoading, setIsLoading] = useState(false)\n\n  const handleSocialLogin = async (e: React.FormEvent) => {\n    e.preventDefault()\n    const supabase = createClient()\n    setIsLoading(true)\n    setError(null)\n\n    try {\n      const { error } = await supabase.auth.signInWithOAuth({\n        provider: 'github',\n      })\n\n      if (error) throw error\n      location.href = '/protected'\n    } catch (error: unknown) {\n      setError(error instanceof Error ? error.message : 'An error occurred')\n      setIsLoading(false)\n    }\n  }\n\n  return (\n    <div className={cn('flex flex-col gap-6', className)} {...props}>\n      <Card>\n        <CardHeader>\n          <CardTitle className=\"text-2xl\">Welcome!</CardTitle>\n          <CardDescription>Sign in to your account to continue</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form onSubmit={handleSocialLogin}>\n            <div className=\"flex flex-col gap-6\">\n              {error && <p className=\"text-sm text-destructive-500\">{error}</p>}\n              <Button type=\"submit\" className=\"w-full\" disabled={isLoading}>\n                {isLoading ? 'Logging in...' : 'Continue with GitHub'}\n              </Button>\n            </div>\n          </form>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n",
+      "content": "'use client'\n\nimport { useState } from 'react'\n\nimport { cn } from '@/lib/utils'\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/components/ui/card'\n\nexport function LoginForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {\n  const [error, setError] = useState<string | null>(null)\n  const [isLoading, setIsLoading] = useState(false)\n\n  const handleSocialLogin = async (e: React.FormEvent) => {\n    e.preventDefault()\n    const supabase = createClient()\n    setIsLoading(true)\n    setError(null)\n\n    try {\n      const { error } = await supabase.auth.signInWithOAuth({\n        provider: 'github',\n      })\n\n      if (error) throw error\n      location.href = '/protected'\n    } catch (error: unknown) {\n      setError(error instanceof Error ? error.message : 'An error occurred')\n      setIsLoading(false)\n    }\n  }\n\n  return (\n    <div className={cn('flex flex-col gap-6', className)} {...props}>\n      <Card>\n        <CardHeader>\n          <CardTitle className=\"text-2xl\">Welcome!</CardTitle>\n          <CardDescription>Sign in to your account to continue</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form onSubmit={handleSocialLogin}>\n            <div className=\"flex flex-col gap-6\">\n              {error && <p className=\"text-sm text-destructive-500\">{error}</p>}\n              <Button type=\"submit\" className=\"w-full\" disabled={isLoading}>\n                {isLoading ? 'Logging in...' : 'Continue with GitHub'}\n              </Button>\n            </div>\n          </form>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/ui-library/public/r/social-auth-tanstack.json b/apps/ui-library/public/r/social-auth-tanstack.json
index 785df3ea080..bce41130488 100644
--- a/apps/ui-library/public/r/social-auth-tanstack.json
+++ b/apps/ui-library/public/r/social-auth-tanstack.json
@@ -15,17 +15,17 @@
   "files": [
     {
       "path": "registry/default/blocks/social-auth-tanstack/components/login-form.tsx",
-      "content": "import { cn } from '@/lib/utils'\nimport { createClient } from '@/registry/default/clients/tanstack/lib/supabase/client'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { useState } from 'react'\n\nexport function LoginForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {\n  const [error, setError] = useState<string | null>(null)\n  const [isLoading, setIsLoading] = useState(false)\n\n  const handleSocialLogin = async (e: React.FormEvent) => {\n    e.preventDefault()\n    const supabase = createClient()\n    setIsLoading(true)\n    setError(null)\n\n    try {\n      const { error } = await supabase.auth.signInWithOAuth({\n        provider: 'github',\n        options: {\n          redirectTo: `${window.location.origin}/auth/oauth?next=/protected`,\n        },\n      })\n\n      if (error) throw error\n    } catch (error: unknown) {\n      setError(error instanceof Error ? error.message : 'An error occurred')\n      setIsLoading(false)\n    }\n  }\n\n  return (\n    <div className={cn('flex flex-col gap-6', className)} {...props}>\n      <Card>\n        <CardHeader>\n          <CardTitle className=\"text-2xl\">Welcome!</CardTitle>\n          <CardDescription>Sign in to your account to continue</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form onSubmit={handleSocialLogin}>\n            <div className=\"flex flex-col gap-6\">\n              {error && <p className=\"text-sm text-destructive-500\">{error}</p>}\n              <Button type=\"submit\" className=\"w-full\" disabled={isLoading}>\n                {isLoading ? 'Logging in...' : 'Continue with GitHub'}\n              </Button>\n            </div>\n          </form>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n",
+      "content": "import { useState } from 'react'\n\nimport { cn } from '@/lib/utils'\nimport { createClient } from '@/registry/default/clients/tanstack/lib/supabase/client'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/components/ui/card'\n\nexport function LoginForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {\n  const [error, setError] = useState<string | null>(null)\n  const [isLoading, setIsLoading] = useState(false)\n\n  const handleSocialLogin = async (e: React.FormEvent) => {\n    e.preventDefault()\n    const supabase = createClient()\n    setIsLoading(true)\n    setError(null)\n\n    try {\n      const { error } = await supabase.auth.signInWithOAuth({\n        provider: 'github',\n        options: {\n          redirectTo: `${window.location.origin}/auth/oauth?next=/protected`,\n        },\n      })\n\n      if (error) throw error\n    } catch (error: unknown) {\n      setError(error instanceof Error ? error.message : 'An error occurred')\n      setIsLoading(false)\n    }\n  }\n\n  return (\n    <div className={cn('flex flex-col gap-6', className)} {...props}>\n      <Card>\n        <CardHeader>\n          <CardTitle className=\"text-2xl\">Welcome!</CardTitle>\n          <CardDescription>Sign in to your account to continue</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form onSubmit={handleSocialLogin}>\n            <div className=\"flex flex-col gap-6\">\n              {error && <p className=\"text-sm text-destructive-500\">{error}</p>}\n              <Button type=\"submit\" className=\"w-full\" disabled={isLoading}>\n                {isLoading ? 'Logging in...' : 'Continue with GitHub'}\n              </Button>\n            </div>\n          </form>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/default/blocks/social-auth-tanstack/lib/supabase/fetch-user-server-fn.ts",
-      "content": "import { createClient } from '@/registry/default/clients/tanstack/lib/supabase/server'\nimport type { Factor, User } from '@supabase/supabase-js'\nimport { createServerFn } from '@tanstack/react-start'\ntype SSRSafeUser = User & {\n  factors: (Factor & { factor_type: 'phone' | 'totp' })[]\n}\n\nexport const fetchUser: () => Promise<SSRSafeUser | null> = createServerFn({\n  method: 'GET',\n}).handler(async () => {\n  const supabase = createClient()\n  const { data, error } = await supabase.auth.getUser()\n\n  if (error) {\n    return null\n  }\n\n  return data.user as SSRSafeUser\n})\n",
+      "content": "import type { Factor, User } from '@supabase/supabase-js'\nimport { createServerFn } from '@tanstack/react-start'\n\nimport { createClient } from '@/registry/default/clients/tanstack/lib/supabase/server'\n\ntype SSRSafeUser = User & {\n  factors: (Factor & { factor_type: 'phone' | 'totp' })[]\n}\n\nexport const fetchUser: () => Promise<SSRSafeUser | null> = createServerFn({\n  method: 'GET',\n}).handler(async () => {\n  const supabase = createClient()\n  const { data, error } = await supabase.auth.getUser()\n\n  if (error) {\n    return null\n  }\n\n  return data.user as SSRSafeUser\n})\n",
       "type": "registry:lib"
     },
     {
       "path": "registry/default/blocks/social-auth-tanstack/routes/_protected.tsx",
-      "content": "import { fetchUser } from '@/registry/default/blocks/social-auth-tanstack/lib/supabase/fetch-user-server-fn'\nimport { createFileRoute, redirect } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/_protected')({\n  beforeLoad: async () => {\n    const user = await fetchUser()\n\n    if (!user) {\n      throw redirect({ to: '/login' })\n    }\n\n    return {\n      user,\n    }\n  },\n})\n",
+      "content": "import { createFileRoute, redirect } from '@tanstack/react-router'\n\nimport { fetchUser } from '@/registry/default/blocks/social-auth-tanstack/lib/supabase/fetch-user-server-fn'\n\nexport const Route = createFileRoute('/_protected')({\n  beforeLoad: async () => {\n    const user = await fetchUser()\n\n    if (!user) {\n      throw redirect({ to: '/login' })\n    }\n\n    return {\n      user,\n    }\n  },\n})\n",
       "type": "registry:file",
       "target": "routes/_protected.tsx"
     },
@@ -37,19 +37,19 @@
     },
     {
       "path": "registry/default/blocks/social-auth-tanstack/routes/auth/error.tsx",
-      "content": "import { Card, CardContent, CardHeader, CardTitle } from '@/registry/default/components/ui/card'\nimport { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/auth/error')({\n  component: AuthError,\n  validateSearch: (params) => {\n    if (params.error && typeof params.error === 'string') {\n      return { error: params.error }\n    }\n    return null\n  },\n})\n\nfunction AuthError() {\n  const params = Route.useSearch()\n\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <div className=\"flex flex-col gap-6\">\n          <Card>\n            <CardHeader>\n              <CardTitle className=\"text-2xl\">Sorry, something went wrong.</CardTitle>\n            </CardHeader>\n            <CardContent>\n              {params?.error ? (\n                <p className=\"text-sm text-muted-foreground\">Code error: {params.error}</p>\n              ) : (\n                <p className=\"text-sm text-muted-foreground\">An unspecified error occurred.</p>\n              )}\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { createFileRoute } from '@tanstack/react-router'\n\nimport { Card, CardContent, CardHeader, CardTitle } from '@/registry/default/components/ui/card'\n\nexport const Route = createFileRoute('/auth/error')({\n  component: AuthError,\n  validateSearch: (params) => {\n    if (params.error && typeof params.error === 'string') {\n      return { error: params.error }\n    }\n    return null\n  },\n})\n\nfunction AuthError() {\n  const params = Route.useSearch()\n\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <div className=\"flex flex-col gap-6\">\n          <Card>\n            <CardHeader>\n              <CardTitle className=\"text-2xl\">Sorry, something went wrong.</CardTitle>\n            </CardHeader>\n            <CardContent>\n              {params?.error ? (\n                <p className=\"text-sm text-muted-foreground\">Code error: {params.error}</p>\n              ) : (\n                <p className=\"text-sm text-muted-foreground\">An unspecified error occurred.</p>\n              )}\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:file",
       "target": "routes/auth/error.tsx"
     },
     {
       "path": "registry/default/blocks/social-auth-tanstack/routes/auth/oauth.ts",
-      "content": "import { createClient } from '@/registry/default/clients/tanstack/lib/supabase/server'\nimport { createFileRoute, redirect } from '@tanstack/react-router'\nimport { createServerFn } from '@tanstack/react-start'\nimport { getWebRequest } from '@tanstack/react-start/server'\n\nconst confirmFn = createServerFn({ method: 'GET' })\n  .validator((searchParams: unknown) => {\n    if (\n      searchParams &&\n      typeof searchParams === 'object' &&\n      'code' in searchParams &&\n      'next' in searchParams\n    ) {\n      return searchParams\n    }\n    throw new Error('Invalid search params')\n  })\n  .handler(async (ctx) => {\n    const request = getWebRequest()\n\n    if (!request) {\n      throw redirect({ to: `/auth/error`, search: { error: 'No request' } })\n    }\n\n    const searchParams = ctx.data\n    const code = searchParams['code'] as string\n    const _next = (searchParams['next'] ?? '/') as string\n    const next = _next?.startsWith('/') ? _next : '/'\n\n    if (code) {\n      const supabase = createClient()\n\n      const { error } = await supabase.auth.exchangeCodeForSession(code)\n      if (!error) {\n        // redirect user to specified redirect URL or root of app\n        throw redirect({ href: next })\n      } else {\n        // redirect the user to an error page with some instructions\n        throw redirect({\n          to: `/auth/error`,\n          search: { error: error?.message },\n        })\n      }\n    }\n\n    // redirect the user to an error page with some instructions\n    throw redirect({\n      to: `/auth/error`,\n      search: { error: 'No code found' },\n    })\n  })\n\nexport const Route = createFileRoute('/auth/confirm')({\n  preload: false,\n  loader: (opts) => confirmFn({ data: opts.location.search }),\n})\n",
+      "content": "import { createFileRoute, redirect } from '@tanstack/react-router'\nimport { createServerFn } from '@tanstack/react-start'\nimport { getWebRequest } from '@tanstack/react-start/server'\n\nimport { createClient } from '@/registry/default/clients/tanstack/lib/supabase/server'\n\nconst confirmFn = createServerFn({ method: 'GET' })\n  .validator((searchParams: unknown) => {\n    if (\n      searchParams &&\n      typeof searchParams === 'object' &&\n      'code' in searchParams &&\n      'next' in searchParams\n    ) {\n      return searchParams\n    }\n    throw new Error('Invalid search params')\n  })\n  .handler(async (ctx) => {\n    const request = getWebRequest()\n\n    if (!request) {\n      throw redirect({ to: `/auth/error`, search: { error: 'No request' } })\n    }\n\n    const searchParams = ctx.data\n    const code = searchParams['code'] as string\n    const _next = (searchParams['next'] ?? '/') as string\n    const next = _next?.startsWith('/') ? _next : '/'\n\n    if (code) {\n      const supabase = createClient()\n\n      const { error } = await supabase.auth.exchangeCodeForSession(code)\n      if (!error) {\n        // redirect user to specified redirect URL or root of app\n        throw redirect({ href: next })\n      } else {\n        // redirect the user to an error page with some instructions\n        throw redirect({\n          to: `/auth/error`,\n          search: { error: error?.message },\n        })\n      }\n    }\n\n    // redirect the user to an error page with some instructions\n    throw redirect({\n      to: `/auth/error`,\n      search: { error: 'No code found' },\n    })\n  })\n\nexport const Route = createFileRoute('/auth/confirm')({\n  preload: false,\n  loader: (opts) => confirmFn({ data: opts.location.search }),\n})\n",
       "type": "registry:file",
       "target": "routes/auth/oauth.ts"
     },
     {
       "path": "registry/default/blocks/social-auth-tanstack/routes/login.tsx",
-      "content": "import { LoginForm } from '@/registry/default/blocks/social-auth-tanstack/components/login-form'\nimport { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/login')({\n  component: Login,\n})\n\nfunction Login() {\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { createFileRoute } from '@tanstack/react-router'\n\nimport { LoginForm } from '@/registry/default/blocks/social-auth-tanstack/components/login-form'\n\nexport const Route = createFileRoute('/login')({\n  component: Login,\n})\n\nfunction Login() {\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:file",
       "target": "routes/login.tsx"
     },
diff --git a/apps/ui-library/registry/blocks.ts b/apps/ui-library/registry/blocks.ts
index fc993d76be1..417af327346 100644
--- a/apps/ui-library/registry/blocks.ts
+++ b/apps/ui-library/registry/blocks.ts
@@ -1,23 +1,21 @@
 import { type RegistryItem } from 'shadcn/schema'
-import { clients } from './clients'
-import { registryItemAppend } from './utils'
 
+import { clients } from './clients'
 import currentUserAvatar from './default/blocks/current-user-avatar/registry-item.json' with { type: 'json' }
 import dropzone from './default/blocks/dropzone/registry-item.json' with { type: 'json' }
 import infiniteQueryHook from './default/blocks/infinite-query-hook/registry-item.json' with { type: 'json' }
-import realtimeAvatarStack from './default/blocks/realtime-avatar-stack/registry-item.json' with { type: 'json' }
-import realtimeChat from './default/blocks/realtime-chat/registry-item.json' with { type: 'json' }
-import realtimeCursor from './default/blocks/realtime-cursor/registry-item.json' with { type: 'json' }
-
 import passwordBasedAuthNextjs from './default/blocks/password-based-auth-nextjs/registry-item.json' with { type: 'json' }
 import passwordBasedAuthReactRouter from './default/blocks/password-based-auth-react-router/registry-item.json' with { type: 'json' }
 import passwordBasedAuthReact from './default/blocks/password-based-auth-react/registry-item.json' with { type: 'json' }
 import passwordBasedAuthTanstack from './default/blocks/password-based-auth-tanstack/registry-item.json' with { type: 'json' }
-
+import realtimeAvatarStack from './default/blocks/realtime-avatar-stack/registry-item.json' with { type: 'json' }
+import realtimeChat from './default/blocks/realtime-chat/registry-item.json' with { type: 'json' }
+import realtimeCursor from './default/blocks/realtime-cursor/registry-item.json' with { type: 'json' }
 import socialAuthNextjs from './default/blocks/social-auth-nextjs/registry-item.json' with { type: 'json' }
 import socialAuthReactRouter from './default/blocks/social-auth-react-router/registry-item.json' with { type: 'json' }
 import socialAuthReact from './default/blocks/social-auth-react/registry-item.json' with { type: 'json' }
 import socialAuthTanstack from './default/blocks/social-auth-tanstack/registry-item.json' with { type: 'json' }
+import { registryItemAppend } from './utils'
 
 const combine = (component: RegistryItem) => {
   return clients.flatMap((client) => {
diff --git a/apps/ui-library/registry/clients.ts b/apps/ui-library/registry/clients.ts
index 32d6fbe1ee4..a7c80e39430 100644
--- a/apps/ui-library/registry/clients.ts
+++ b/apps/ui-library/registry/clients.ts
@@ -1,4 +1,5 @@
 import type { RegistryItem } from 'shadcn/schema'
+
 import nextjs from './default/clients/nextjs/registry-item.json' with { type: 'json' }
 import reactRouter from './default/clients/react-router/registry-item.json' with { type: 'json' }
 import react from './default/clients/react/registry-item.json' with { type: 'json' }
diff --git a/apps/ui-library/registry/default/blocks/current-user-avatar/hooks/use-current-user-image.ts b/apps/ui-library/registry/default/blocks/current-user-avatar/hooks/use-current-user-image.ts
index 6592edc9057..770faaaa371 100644
--- a/apps/ui-library/registry/default/blocks/current-user-avatar/hooks/use-current-user-image.ts
+++ b/apps/ui-library/registry/default/blocks/current-user-avatar/hooks/use-current-user-image.ts
@@ -1,6 +1,7 @@
-import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'
 import { useEffect, useState } from 'react'
 
+import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'
+
 export const useCurrentUserImage = () => {
   const [image, setImage] = useState<string | null>(null)
 
diff --git a/apps/ui-library/registry/default/blocks/current-user-avatar/hooks/use-current-user-name.ts b/apps/ui-library/registry/default/blocks/current-user-avatar/hooks/use-current-user-name.ts
index 80d2c3801db..55c0d6eb07f 100644
--- a/apps/ui-library/registry/default/blocks/current-user-avatar/hooks/use-current-user-name.ts
+++ b/apps/ui-library/registry/default/blocks/current-user-avatar/hooks/use-current-user-name.ts
@@ -1,6 +1,7 @@
-import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'
 import { useEffect, useState } from 'react'
 
+import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'
+
 export const useCurrentUserName = () => {
   const [name, setName] = useState<string | null>(null)
 
diff --git a/apps/ui-library/registry/default/blocks/dropzone/components/dropzone.tsx b/apps/ui-library/registry/default/blocks/dropzone/components/dropzone.tsx
index f60521afd9c..16efedf8658 100644
--- a/apps/ui-library/registry/default/blocks/dropzone/components/dropzone.tsx
+++ b/apps/ui-library/registry/default/blocks/dropzone/components/dropzone.tsx
@@ -1,10 +1,11 @@
 'use client'
 
+import { CheckCircle, File, Loader2, Upload, X } from 'lucide-react'
+import { createContext, useCallback, useContext, type PropsWithChildren } from 'react'
+
 import { cn } from '@/lib/utils'
 import { type UseSupabaseUploadReturn } from '@/registry/default/blocks/dropzone/hooks/use-supabase-upload'
 import { Button } from '@/registry/default/components/ui/button'
-import { CheckCircle, File, Loader2, Upload, X } from 'lucide-react'
-import { createContext, type PropsWithChildren, useCallback, useContext } from 'react'
 
 export const formatBytes = (
   bytes: number,
diff --git a/apps/ui-library/registry/default/blocks/dropzone/hooks/use-supabase-upload.ts b/apps/ui-library/registry/default/blocks/dropzone/hooks/use-supabase-upload.ts
index 113f6f75653..3e65369d54b 100644
--- a/apps/ui-library/registry/default/blocks/dropzone/hooks/use-supabase-upload.ts
+++ b/apps/ui-library/registry/default/blocks/dropzone/hooks/use-supabase-upload.ts
@@ -1,6 +1,7 @@
-import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'
 import { useCallback, useEffect, useMemo, useState } from 'react'
-import { type FileError, type FileRejection, useDropzone } from 'react-dropzone'
+import { useDropzone, type FileError, type FileRejection } from 'react-dropzone'
+
+import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'
 
 const supabase = createClient()
 
diff --git a/apps/ui-library/registry/default/blocks/infinite-query-hook/hooks/use-infinite-query.ts b/apps/ui-library/registry/default/blocks/infinite-query-hook/hooks/use-infinite-query.ts
index 8ca64107484..e06ea0ee97e 100644
--- a/apps/ui-library/registry/default/blocks/infinite-query-hook/hooks/use-infinite-query.ts
+++ b/apps/ui-library/registry/default/blocks/infinite-query-hook/hooks/use-infinite-query.ts
@@ -1,10 +1,11 @@
 'use client'
 
-import { createClient } from '@/registry/default/fixtures/lib/supabase/client'
 import { PostgrestQueryBuilder, type PostgrestClientOptions } from '@supabase/postgrest-js'
 import { type SupabaseClient } from '@supabase/supabase-js'
 import { useEffect, useRef, useSyncExternalStore } from 'react'
 
+import { createClient } from '@/registry/default/fixtures/lib/supabase/client'
+
 const supabase = createClient()
 
 // The following types are used to make the hook type-safe. It extracts the database type from the supabase client.
diff --git a/apps/ui-library/registry/default/blocks/password-based-auth-nextjs/app/auth/confirm/route.ts b/apps/ui-library/registry/default/blocks/password-based-auth-nextjs/app/auth/confirm/route.ts
index bfcd61eabc9..e2ac3a7fbe2 100644
--- a/apps/ui-library/registry/default/blocks/password-based-auth-nextjs/app/auth/confirm/route.ts
+++ b/apps/ui-library/registry/default/blocks/password-based-auth-nextjs/app/auth/confirm/route.ts
@@ -1,8 +1,9 @@
-import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/server'
 import { type EmailOtpType } from '@supabase/supabase-js'
 import { redirect } from 'next/navigation'
 import { type NextRequest } from 'next/server'
 
+import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/server'
+
 export async function GET(request: NextRequest) {
   const { searchParams } = new URL(request.url)
   const token_hash = searchParams.get('token_hash')
diff --git a/apps/ui-library/registry/default/blocks/password-based-auth-nextjs/components/forgot-password-form.tsx b/apps/ui-library/registry/default/blocks/password-based-auth-nextjs/components/forgot-password-form.tsx
index 98571e8e7f0..b5d5a227bfb 100644
--- a/apps/ui-library/registry/default/blocks/password-based-auth-nextjs/components/forgot-password-form.tsx
+++ b/apps/ui-library/registry/default/blocks/password-based-auth-nextjs/components/forgot-password-form.tsx
@@ -1,5 +1,7 @@
 'use client'
 
+import { useState } from 'react'
+
 import { cn } from '@/lib/utils'
 import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'
 import { Button } from '@/registry/default/components/ui/button'
@@ -13,7 +15,6 @@ import {
 import { Input } from '@/registry/default/components/ui/input'
 import { Label } from '@/registry/default/components/ui/label'
 import { Link } from '@/registry/default/components/ui/link'
-import { useState } from 'react'
 
 export function ForgotPasswordForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
   const [email, setEmail] = useState('')
diff --git a/apps/ui-library/registry/default/blocks/password-based-auth-nextjs/components/login-form.tsx b/apps/ui-library/registry/default/blocks/password-based-auth-nextjs/components/login-form.tsx
index 6a4d2231d89..30dc1967093 100644
--- a/apps/ui-library/registry/default/blocks/password-based-auth-nextjs/components/login-form.tsx
+++ b/apps/ui-library/registry/default/blocks/password-based-auth-nextjs/components/login-form.tsx
@@ -1,5 +1,8 @@
 'use client'
 
+import { useRouter } from 'next/navigation'
+import { useState } from 'react'
+
 import { cn } from '@/lib/utils'
 import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'
 import { Button } from '@/registry/default/components/ui/button'
@@ -13,8 +16,6 @@ import {
 import { Input } from '@/registry/default/components/ui/input'
 import { Label } from '@/registry/default/components/ui/label'
 import { Link } from '@/registry/default/components/ui/link'
-import { useRouter } from 'next/navigation'
-import { useState } from 'react'
 
 export function LoginForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
   const [email, setEmail] = useState('')
diff --git a/apps/ui-library/registry/default/blocks/password-based-auth-nextjs/components/logout-button.tsx b/apps/ui-library/registry/default/blocks/password-based-auth-nextjs/components/logout-button.tsx
index 88110ddc6c7..6b50eb5850b 100644
--- a/apps/ui-library/registry/default/blocks/password-based-auth-nextjs/components/logout-button.tsx
+++ b/apps/ui-library/registry/default/blocks/password-based-auth-nextjs/components/logout-button.tsx
@@ -1,8 +1,9 @@
 'use client'
 
+import { useRouter } from 'next/navigation'
+
 import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'
 import { Button } from '@/registry/default/components/ui/button'
-import { useRouter } from 'next/navigation'
 
 export function LogoutButton() {
   const router = useRouter()
diff --git a/apps/ui-library/registry/default/blocks/password-based-auth-nextjs/components/sign-up-form.tsx b/apps/ui-library/registry/default/blocks/password-based-auth-nextjs/components/sign-up-form.tsx
index 79df2905c89..91947d1fbe8 100644
--- a/apps/ui-library/registry/default/blocks/password-based-auth-nextjs/components/sign-up-form.tsx
+++ b/apps/ui-library/registry/default/blocks/password-based-auth-nextjs/components/sign-up-form.tsx
@@ -1,5 +1,8 @@
 'use client'
 
+import { useRouter } from 'next/navigation'
+import { useState } from 'react'
+
 import { cn } from '@/lib/utils'
 import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'
 import { Button } from '@/registry/default/components/ui/button'
@@ -13,8 +16,6 @@ import {
 import { Input } from '@/registry/default/components/ui/input'
 import { Label } from '@/registry/default/components/ui/label'
 import { Link } from '@/registry/default/components/ui/link'
-import { useRouter } from 'next/navigation'
-import { useState } from 'react'
 
 export function SignUpForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
   const [email, setEmail] = useState('')
diff --git a/apps/ui-library/registry/default/blocks/password-based-auth-nextjs/components/update-password-form.tsx b/apps/ui-library/registry/default/blocks/password-based-auth-nextjs/components/update-password-form.tsx
index eef6dfa4dd1..1dd08ec8db4 100644
--- a/apps/ui-library/registry/default/blocks/password-based-auth-nextjs/components/update-password-form.tsx
+++ b/apps/ui-library/registry/default/blocks/password-based-auth-nextjs/components/update-password-form.tsx
@@ -1,5 +1,8 @@
 'use client'
 
+import { useRouter } from 'next/navigation'
+import { useState } from 'react'
+
 import { cn } from '@/lib/utils'
 import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'
 import { Button } from '@/registry/default/components/ui/button'
@@ -12,8 +15,6 @@ import {
 } from '@/registry/default/components/ui/card'
 import { Input } from '@/registry/default/components/ui/input'
 import { Label } from '@/registry/default/components/ui/label'
-import { useRouter } from 'next/navigation'
-import { useState } from 'react'
 
 export function UpdatePasswordForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
   const [password, setPassword] = useState('')
diff --git a/apps/ui-library/registry/default/blocks/password-based-auth-nextjs/middleware.ts b/apps/ui-library/registry/default/blocks/password-based-auth-nextjs/middleware.ts
index 71fac6460bd..e2e7a2b5e60 100644
--- a/apps/ui-library/registry/default/blocks/password-based-auth-nextjs/middleware.ts
+++ b/apps/ui-library/registry/default/blocks/password-based-auth-nextjs/middleware.ts
@@ -1,6 +1,7 @@
-import { updateSession } from '@/registry/default/clients/nextjs/lib/supabase/middleware'
 import { type NextRequest } from 'next/server'
 
+import { updateSession } from '@/registry/default/clients/nextjs/lib/supabase/middleware'
+
 export async function middleware(request: NextRequest) {
   return await updateSession(request)
 }
diff --git a/apps/ui-library/registry/default/blocks/password-based-auth-react-router/app/routes/auth.confirm.tsx b/apps/ui-library/registry/default/blocks/password-based-auth-react-router/app/routes/auth.confirm.tsx
index 37c751afc31..2e24cd6e6d5 100644
--- a/apps/ui-library/registry/default/blocks/password-based-auth-react-router/app/routes/auth.confirm.tsx
+++ b/apps/ui-library/registry/default/blocks/password-based-auth-react-router/app/routes/auth.confirm.tsx
@@ -1,6 +1,7 @@
-import { createClient } from '@/registry/default/clients/react-router/lib/supabase/server'
 import { type EmailOtpType } from '@supabase/supabase-js'
-import { type LoaderFunctionArgs, redirect } from 'react-router'
+import { redirect, type LoaderFunctionArgs } from 'react-router'
+
+import { createClient } from '@/registry/default/clients/react-router/lib/supabase/server'
 
 export async function loader({ request }: LoaderFunctionArgs) {
   const requestUrl = new URL(request.url)
diff --git a/apps/ui-library/registry/default/blocks/password-based-auth-react-router/app/routes/auth.error.tsx b/apps/ui-library/registry/default/blocks/password-based-auth-react-router/app/routes/auth.error.tsx
index 59fc585be35..d934241076f 100644
--- a/apps/ui-library/registry/default/blocks/password-based-auth-react-router/app/routes/auth.error.tsx
+++ b/apps/ui-library/registry/default/blocks/password-based-auth-react-router/app/routes/auth.error.tsx
@@ -1,6 +1,7 @@
-import { Card, CardContent, CardHeader, CardTitle } from '@/registry/default/components/ui/card'
 import { useSearchParams } from 'react-router'
 
+import { Card, CardContent, CardHeader, CardTitle } from '@/registry/default/components/ui/card'
+
 export default function Page() {
   let [searchParams] = useSearchParams()
 
diff --git a/apps/ui-library/registry/default/blocks/password-based-auth-react-router/app/routes/forgot-password.tsx b/apps/ui-library/registry/default/blocks/password-based-auth-react-router/app/routes/forgot-password.tsx
index a5ab701c180..783dbeda707 100644
--- a/apps/ui-library/registry/default/blocks/password-based-auth-react-router/app/routes/forgot-password.tsx
+++ b/apps/ui-library/registry/default/blocks/password-based-auth-react-router/app/routes/forgot-password.tsx
@@ -1,3 +1,12 @@
+import {
+  data,
+  Link,
+  redirect,
+  useFetcher,
+  useSearchParams,
+  type ActionFunctionArgs,
+} from 'react-router'
+
 import { createClient } from '@/registry/default/clients/react-router/lib/supabase/server'
 import { Button } from '@/registry/default/components/ui/button'
 import {
@@ -9,14 +18,6 @@ import {
 } from '@/registry/default/components/ui/card'
 import { Input } from '@/registry/default/components/ui/input'
 import { Label } from '@/registry/default/components/ui/label'
-import {
-  type ActionFunctionArgs,
-  Link,
-  data,
-  redirect,
-  useFetcher,
-  useSearchParams,
-} from 'react-router'
 
 export const action = async ({ request }: ActionFunctionArgs) => {
   const formData = await request.formData()
diff --git a/apps/ui-library/registry/default/blocks/password-based-auth-react-router/app/routes/login.tsx b/apps/ui-library/registry/default/blocks/password-based-auth-react-router/app/routes/login.tsx
index 0f7b1d2bcb3..04ff0dc4286 100644
--- a/apps/ui-library/registry/default/blocks/password-based-auth-react-router/app/routes/login.tsx
+++ b/apps/ui-library/registry/default/blocks/password-based-auth-react-router/app/routes/login.tsx
@@ -1,3 +1,5 @@
+import { Link, redirect, useFetcher, type ActionFunctionArgs } from 'react-router'
+
 import { createClient } from '@/registry/default/clients/react-router/lib/supabase/server'
 import { Button } from '@/registry/default/components/ui/button'
 import {
@@ -9,7 +11,6 @@ import {
 } from '@/registry/default/components/ui/card'
 import { Input } from '@/registry/default/components/ui/input'
 import { Label } from '@/registry/default/components/ui/label'
-import { type ActionFunctionArgs, Link, redirect, useFetcher } from 'react-router'
 
 export const action = async ({ request }: ActionFunctionArgs) => {
   const { supabase, headers } = createClient(request)
diff --git a/apps/ui-library/registry/default/blocks/password-based-auth-react-router/app/routes/logout.tsx b/apps/ui-library/registry/default/blocks/password-based-auth-react-router/app/routes/logout.tsx
index 0c22dbfb3bc..7a6df3f3ae7 100644
--- a/apps/ui-library/registry/default/blocks/password-based-auth-react-router/app/routes/logout.tsx
+++ b/apps/ui-library/registry/default/blocks/password-based-auth-react-router/app/routes/logout.tsx
@@ -1,5 +1,6 @@
+import { redirect, type ActionFunctionArgs } from 'react-router'
+
 import { createClient } from '@/registry/default/clients/react-router/lib/supabase/server'
-import { type ActionFunctionArgs, redirect } from 'react-router'
 
 export async function loader({ request }: ActionFunctionArgs) {
   const { supabase, headers } = createClient(request)
diff --git a/apps/ui-library/registry/default/blocks/password-based-auth-react-router/app/routes/protected.tsx b/apps/ui-library/registry/default/blocks/password-based-auth-react-router/app/routes/protected.tsx
index f3d7879b67b..7c8625273b5 100644
--- a/apps/ui-library/registry/default/blocks/password-based-auth-react-router/app/routes/protected.tsx
+++ b/apps/ui-library/registry/default/blocks/password-based-auth-react-router/app/routes/protected.tsx
@@ -1,6 +1,7 @@
+import { redirect, useLoaderData, type LoaderFunctionArgs } from 'react-router'
+
 import { createClient } from '@/registry/default/clients/react-router/lib/supabase/server'
 import { Button } from '@/registry/default/components/ui/button'
-import { type LoaderFunctionArgs, redirect, useLoaderData } from 'react-router'
 
 export const loader = async ({ request }: LoaderFunctionArgs) => {
   const { supabase } = createClient(request)
diff --git a/apps/ui-library/registry/default/blocks/password-based-auth-react-router/app/routes/sign-up.tsx b/apps/ui-library/registry/default/blocks/password-based-auth-react-router/app/routes/sign-up.tsx
index 9d287ed00d1..ae5218f5668 100644
--- a/apps/ui-library/registry/default/blocks/password-based-auth-react-router/app/routes/sign-up.tsx
+++ b/apps/ui-library/registry/default/blocks/password-based-auth-react-router/app/routes/sign-up.tsx
@@ -1,3 +1,5 @@
+import { Link, redirect, useFetcher, useSearchParams, type ActionFunctionArgs } from 'react-router'
+
 import { createClient } from '@/registry/default/clients/react-router/lib/supabase/server'
 import { Button } from '@/registry/default/components/ui/button'
 import {
@@ -9,7 +11,6 @@ import {
 } from '@/registry/default/components/ui/card'
 import { Input } from '@/registry/default/components/ui/input'
 import { Label } from '@/registry/default/components/ui/label'
-import { type ActionFunctionArgs, Link, redirect, useFetcher, useSearchParams } from 'react-router'
 
 export const action = async ({ request }: ActionFunctionArgs) => {
   const { supabase } = createClient(request)
diff --git a/apps/ui-library/registry/default/blocks/password-based-auth-react-router/app/routes/update-password.tsx b/apps/ui-library/registry/default/blocks/password-based-auth-react-router/app/routes/update-password.tsx
index d0baa10b8c7..1e9c9b78984 100644
--- a/apps/ui-library/registry/default/blocks/password-based-auth-react-router/app/routes/update-password.tsx
+++ b/apps/ui-library/registry/default/blocks/password-based-auth-react-router/app/routes/update-password.tsx
@@ -1,3 +1,5 @@
+import { redirect, useFetcher, type ActionFunctionArgs } from 'react-router'
+
 import { createClient } from '@/registry/default/clients/react-router/lib/supabase/server'
 import { Button } from '@/registry/default/components/ui/button'
 import {
@@ -9,7 +11,6 @@ import {
 } from '@/registry/default/components/ui/card'
 import { Input } from '@/registry/default/components/ui/input'
 import { Label } from '@/registry/default/components/ui/label'
-import { type ActionFunctionArgs, redirect, useFetcher } from 'react-router'
 
 export const action = async ({ request }: ActionFunctionArgs) => {
   const { supabase, headers } = createClient(request)
diff --git a/apps/ui-library/registry/default/blocks/password-based-auth-react/components/forgot-password-form.tsx b/apps/ui-library/registry/default/blocks/password-based-auth-react/components/forgot-password-form.tsx
index 4f124810601..ca15a769571 100644
--- a/apps/ui-library/registry/default/blocks/password-based-auth-react/components/forgot-password-form.tsx
+++ b/apps/ui-library/registry/default/blocks/password-based-auth-react/components/forgot-password-form.tsx
@@ -1,3 +1,5 @@
+import { useState } from 'react'
+
 import { cn } from '@/lib/utils'
 import { createClient } from '@/registry/default/clients/react/lib/supabase/client'
 import { Button } from '@/registry/default/components/ui/button'
@@ -10,7 +12,6 @@ import {
 } from '@/registry/default/components/ui/card'
 import { Input } from '@/registry/default/components/ui/input'
 import { Label } from '@/registry/default/components/ui/label'
-import { useState } from 'react'
 
 export function ForgotPasswordForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
   const [email, setEmail] = useState('')
diff --git a/apps/ui-library/registry/default/blocks/password-based-auth-react/components/login-form.tsx b/apps/ui-library/registry/default/blocks/password-based-auth-react/components/login-form.tsx
index 0b40cf6a6bc..89575682af2 100644
--- a/apps/ui-library/registry/default/blocks/password-based-auth-react/components/login-form.tsx
+++ b/apps/ui-library/registry/default/blocks/password-based-auth-react/components/login-form.tsx
@@ -1,3 +1,5 @@
+import { useState } from 'react'
+
 import { cn } from '@/lib/utils'
 import { createClient } from '@/registry/default/clients/react/lib/supabase/client'
 import { Button } from '@/registry/default/components/ui/button'
@@ -10,7 +12,6 @@ import {
 } from '@/registry/default/components/ui/card'
 import { Input } from '@/registry/default/components/ui/input'
 import { Label } from '@/registry/default/components/ui/label'
-import { useState } from 'react'
 
 export function LoginForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
   const [email, setEmail] = useState('')
diff --git a/apps/ui-library/registry/default/blocks/password-based-auth-react/components/sign-up-form.tsx b/apps/ui-library/registry/default/blocks/password-based-auth-react/components/sign-up-form.tsx
index 9b5d77b1187..d6d0e8739bf 100644
--- a/apps/ui-library/registry/default/blocks/password-based-auth-react/components/sign-up-form.tsx
+++ b/apps/ui-library/registry/default/blocks/password-based-auth-react/components/sign-up-form.tsx
@@ -1,3 +1,5 @@
+import { useState } from 'react'
+
 import { cn } from '@/lib/utils'
 import { createClient } from '@/registry/default/clients/react/lib/supabase/client'
 import { Button } from '@/registry/default/components/ui/button'
@@ -10,7 +12,6 @@ import {
 } from '@/registry/default/components/ui/card'
 import { Input } from '@/registry/default/components/ui/input'
 import { Label } from '@/registry/default/components/ui/label'
-import { useState } from 'react'
 
 export function SignUpForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
   const [email, setEmail] = useState('')
diff --git a/apps/ui-library/registry/default/blocks/password-based-auth-react/components/update-password-form.tsx b/apps/ui-library/registry/default/blocks/password-based-auth-react/components/update-password-form.tsx
index a8126a6bc28..4285b7060f8 100644
--- a/apps/ui-library/registry/default/blocks/password-based-auth-react/components/update-password-form.tsx
+++ b/apps/ui-library/registry/default/blocks/password-based-auth-react/components/update-password-form.tsx
@@ -1,3 +1,5 @@
+import { useState } from 'react'
+
 import { cn } from '@/lib/utils'
 import { createClient } from '@/registry/default/clients/react/lib/supabase/client'
 import { Button } from '@/registry/default/components/ui/button'
@@ -10,7 +12,6 @@ import {
 } from '@/registry/default/components/ui/card'
 import { Input } from '@/registry/default/components/ui/input'
 import { Label } from '@/registry/default/components/ui/label'
-import { useState } from 'react'
 
 export function UpdatePasswordForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
   const [password, setPassword] = useState('')
diff --git a/apps/ui-library/registry/default/blocks/password-based-auth-tanstack/components/forgot-password-form.tsx b/apps/ui-library/registry/default/blocks/password-based-auth-tanstack/components/forgot-password-form.tsx
index 5c21d97d6a9..9f6e89a93e5 100644
--- a/apps/ui-library/registry/default/blocks/password-based-auth-tanstack/components/forgot-password-form.tsx
+++ b/apps/ui-library/registry/default/blocks/password-based-auth-tanstack/components/forgot-password-form.tsx
@@ -1,3 +1,6 @@
+import { Link } from '@tanstack/react-router'
+import { useState } from 'react'
+
 import { cn } from '@/lib/utils'
 import { createClient } from '@/registry/default/clients/tanstack/lib/supabase/client'
 import { Button } from '@/registry/default/components/ui/button'
@@ -10,8 +13,6 @@ import {
 } from '@/registry/default/components/ui/card'
 import { Input } from '@/registry/default/components/ui/input'
 import { Label } from '@/registry/default/components/ui/label'
-import { Link } from '@tanstack/react-router'
-import { useState } from 'react'
 
 export function ForgotPasswordForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
   const [email, setEmail] = useState('')
diff --git a/apps/ui-library/registry/default/blocks/password-based-auth-tanstack/components/login-form.tsx b/apps/ui-library/registry/default/blocks/password-based-auth-tanstack/components/login-form.tsx
index f30f9438b3c..cfb46c7b53e 100644
--- a/apps/ui-library/registry/default/blocks/password-based-auth-tanstack/components/login-form.tsx
+++ b/apps/ui-library/registry/default/blocks/password-based-auth-tanstack/components/login-form.tsx
@@ -1,3 +1,6 @@
+import { Link, useNavigate } from '@tanstack/react-router'
+import { useState } from 'react'
+
 import { cn } from '@/lib/utils'
 import { createClient } from '@/registry/default/clients/tanstack/lib/supabase/client'
 import { Button } from '@/registry/default/components/ui/button'
@@ -10,8 +13,6 @@ import {
 } from '@/registry/default/components/ui/card'
 import { Input } from '@/registry/default/components/ui/input'
 import { Label } from '@/registry/default/components/ui/label'
-import { Link, useNavigate } from '@tanstack/react-router'
-import { useState } from 'react'
 
 export function LoginForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
   const [email, setEmail] = useState('')
diff --git a/apps/ui-library/registry/default/blocks/password-based-auth-tanstack/components/sign-up-form.tsx b/apps/ui-library/registry/default/blocks/password-based-auth-tanstack/components/sign-up-form.tsx
index 276cfefd128..8cb97647f4e 100644
--- a/apps/ui-library/registry/default/blocks/password-based-auth-tanstack/components/sign-up-form.tsx
+++ b/apps/ui-library/registry/default/blocks/password-based-auth-tanstack/components/sign-up-form.tsx
@@ -1,3 +1,6 @@
+import { Link, useNavigate } from '@tanstack/react-router'
+import { useState } from 'react'
+
 import { cn } from '@/lib/utils'
 import { createClient } from '@/registry/default/clients/tanstack/lib/supabase/client'
 import { Button } from '@/registry/default/components/ui/button'
@@ -10,8 +13,6 @@ import {
 } from '@/registry/default/components/ui/card'
 import { Input } from '@/registry/default/components/ui/input'
 import { Label } from '@/registry/default/components/ui/label'
-import { Link, useNavigate } from '@tanstack/react-router'
-import { useState } from 'react'
 
 export function SignUpForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
   const [email, setEmail] = useState('')
diff --git a/apps/ui-library/registry/default/blocks/password-based-auth-tanstack/components/update-password-form.tsx b/apps/ui-library/registry/default/blocks/password-based-auth-tanstack/components/update-password-form.tsx
index b27b06c96c4..235f3db1db8 100644
--- a/apps/ui-library/registry/default/blocks/password-based-auth-tanstack/components/update-password-form.tsx
+++ b/apps/ui-library/registry/default/blocks/password-based-auth-tanstack/components/update-password-form.tsx
@@ -1,3 +1,6 @@
+import { useNavigate } from '@tanstack/react-router'
+import { useState } from 'react'
+
 import { cn } from '@/lib/utils'
 import { createClient } from '@/registry/default/clients/tanstack/lib/supabase/client'
 import { Button } from '@/registry/default/components/ui/button'
@@ -10,8 +13,6 @@ import {
 } from '@/registry/default/components/ui/card'
 import { Input } from '@/registry/default/components/ui/input'
 import { Label } from '@/registry/default/components/ui/label'
-import { useNavigate } from '@tanstack/react-router'
-import { useState } from 'react'
 
 export function UpdatePasswordForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
   const [password, setPassword] = useState('')
diff --git a/apps/ui-library/registry/default/blocks/password-based-auth-tanstack/lib/supabase/fetch-user-server-fn.ts b/apps/ui-library/registry/default/blocks/password-based-auth-tanstack/lib/supabase/fetch-user-server-fn.ts
index 3f3f50c4183..f491b808fb9 100644
--- a/apps/ui-library/registry/default/blocks/password-based-auth-tanstack/lib/supabase/fetch-user-server-fn.ts
+++ b/apps/ui-library/registry/default/blocks/password-based-auth-tanstack/lib/supabase/fetch-user-server-fn.ts
@@ -1,6 +1,8 @@
-import { createClient } from '@/registry/default/clients/tanstack/lib/supabase/server'
 import type { Factor, User } from '@supabase/supabase-js'
 import { createServerFn } from '@tanstack/react-start'
+
+import { createClient } from '@/registry/default/clients/tanstack/lib/supabase/server'
+
 type SSRSafeUser = User & {
   factors: (Factor & { factor_type: 'phone' | 'totp' })[]
 }
diff --git a/apps/ui-library/registry/default/blocks/password-based-auth-tanstack/routeTree.gen.ts b/apps/ui-library/registry/default/blocks/password-based-auth-tanstack/routeTree.gen.ts
index d713e5b760b..6f420084921 100644
--- a/apps/ui-library/registry/default/blocks/password-based-auth-tanstack/routeTree.gen.ts
+++ b/apps/ui-library/registry/default/blocks/password-based-auth-tanstack/routeTree.gen.ts
@@ -1,15 +1,10 @@
 /* eslint-disable */
-
 // @ts-nocheck
-
 // noinspection JSUnusedGlobalSymbols
-
 // This file was automatically generated by TanStack Router.
 // You should NOT make any changes in this file as it will be overwritten.
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
-
 // Import Routes
-
 import { Route as rootRoute } from './routes/__root'
 import { Route as ProtectedImport } from './routes/_protected'
 import { Route as ProtectedProtectedImport } from './routes/_protected/protected'
diff --git a/apps/ui-library/registry/default/blocks/password-based-auth-tanstack/routes/_protected.tsx b/apps/ui-library/registry/default/blocks/password-based-auth-tanstack/routes/_protected.tsx
index d5fda348370..237e6b55345 100644
--- a/apps/ui-library/registry/default/blocks/password-based-auth-tanstack/routes/_protected.tsx
+++ b/apps/ui-library/registry/default/blocks/password-based-auth-tanstack/routes/_protected.tsx
@@ -1,6 +1,7 @@
-import { fetchUser } from '@/registry/default/blocks/password-based-auth-tanstack/lib/supabase/fetch-user-server-fn'
 import { createFileRoute, redirect } from '@tanstack/react-router'
 
+import { fetchUser } from '@/registry/default/blocks/password-based-auth-tanstack/lib/supabase/fetch-user-server-fn'
+
 export const Route = createFileRoute('/_protected')({
   beforeLoad: async () => {
     const user = await fetchUser()
diff --git a/apps/ui-library/registry/default/blocks/password-based-auth-tanstack/routes/auth/confirm.ts b/apps/ui-library/registry/default/blocks/password-based-auth-tanstack/routes/auth/confirm.ts
index dcc07af3a14..20da1fa69db 100644
--- a/apps/ui-library/registry/default/blocks/password-based-auth-tanstack/routes/auth/confirm.ts
+++ b/apps/ui-library/registry/default/blocks/password-based-auth-tanstack/routes/auth/confirm.ts
@@ -1,9 +1,10 @@
-import { createClient } from '@/registry/default/clients/tanstack/lib/supabase/server'
 import { type EmailOtpType } from '@supabase/supabase-js'
 import { createFileRoute, redirect } from '@tanstack/react-router'
 import { createServerFn } from '@tanstack/react-start'
 import { getWebRequest } from '@tanstack/react-start/server'
 
+import { createClient } from '@/registry/default/clients/tanstack/lib/supabase/server'
+
 const confirmFn = createServerFn({ method: 'GET' })
   .validator((searchParams: unknown) => {
     if (
diff --git a/apps/ui-library/registry/default/blocks/password-based-auth-tanstack/routes/auth/error.tsx b/apps/ui-library/registry/default/blocks/password-based-auth-tanstack/routes/auth/error.tsx
index cb7a4669b08..bea8779ee5e 100644
--- a/apps/ui-library/registry/default/blocks/password-based-auth-tanstack/routes/auth/error.tsx
+++ b/apps/ui-library/registry/default/blocks/password-based-auth-tanstack/routes/auth/error.tsx
@@ -1,6 +1,7 @@
-import { Card, CardContent, CardHeader, CardTitle } from '@/registry/default/components/ui/card'
 import { createFileRoute } from '@tanstack/react-router'
 
+import { Card, CardContent, CardHeader, CardTitle } from '@/registry/default/components/ui/card'
+
 export const Route = createFileRoute('/auth/error')({
   component: AuthError,
   validateSearch: (params) => {
diff --git a/apps/ui-library/registry/default/blocks/password-based-auth-tanstack/routes/forgot-password.tsx b/apps/ui-library/registry/default/blocks/password-based-auth-tanstack/routes/forgot-password.tsx
index 9e6475f68af..169aa79ca88 100644
--- a/apps/ui-library/registry/default/blocks/password-based-auth-tanstack/routes/forgot-password.tsx
+++ b/apps/ui-library/registry/default/blocks/password-based-auth-tanstack/routes/forgot-password.tsx
@@ -1,6 +1,7 @@
-import { ForgotPasswordForm } from '@/registry/default/blocks/password-based-auth-tanstack/components/forgot-password-form'
 import { createFileRoute } from '@tanstack/react-router'
 
+import { ForgotPasswordForm } from '@/registry/default/blocks/password-based-auth-tanstack/components/forgot-password-form'
+
 export const Route = createFileRoute('/forgot-password')({
   component: ForgotPassword,
 })
diff --git a/apps/ui-library/registry/default/blocks/password-based-auth-tanstack/routes/login.tsx b/apps/ui-library/registry/default/blocks/password-based-auth-tanstack/routes/login.tsx
index 5680a1a1670..1e49e8b66f9 100644
--- a/apps/ui-library/registry/default/blocks/password-based-auth-tanstack/routes/login.tsx
+++ b/apps/ui-library/registry/default/blocks/password-based-auth-tanstack/routes/login.tsx
@@ -1,6 +1,7 @@
-import { LoginForm } from '@/registry/default/blocks/password-based-auth-tanstack/components/login-form'
 import { createFileRoute } from '@tanstack/react-router'
 
+import { LoginForm } from '@/registry/default/blocks/password-based-auth-tanstack/components/login-form'
+
 export const Route = createFileRoute('/login')({
   component: Login,
 })
diff --git a/apps/ui-library/registry/default/blocks/password-based-auth-tanstack/routes/sign-up-success.tsx b/apps/ui-library/registry/default/blocks/password-based-auth-tanstack/routes/sign-up-success.tsx
index 8765ff067b9..ba01f030fd3 100644
--- a/apps/ui-library/registry/default/blocks/password-based-auth-tanstack/routes/sign-up-success.tsx
+++ b/apps/ui-library/registry/default/blocks/password-based-auth-tanstack/routes/sign-up-success.tsx
@@ -1,3 +1,5 @@
+import { createFileRoute } from '@tanstack/react-router'
+
 import {
   Card,
   CardContent,
@@ -5,7 +7,6 @@ import {
   CardHeader,
   CardTitle,
 } from '@/registry/default/components/ui/card'
-import { createFileRoute } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/sign-up-success')({
   component: SignUpSuccess,
diff --git a/apps/ui-library/registry/default/blocks/password-based-auth-tanstack/routes/sign-up.tsx b/apps/ui-library/registry/default/blocks/password-based-auth-tanstack/routes/sign-up.tsx
index 661b8ab6cf8..c2b14379561 100644
--- a/apps/ui-library/registry/default/blocks/password-based-auth-tanstack/routes/sign-up.tsx
+++ b/apps/ui-library/registry/default/blocks/password-based-auth-tanstack/routes/sign-up.tsx
@@ -1,6 +1,7 @@
-import { SignUpForm } from '@/registry/default/blocks/password-based-auth-tanstack/components/sign-up-form'
 import { createFileRoute } from '@tanstack/react-router'
 
+import { SignUpForm } from '@/registry/default/blocks/password-based-auth-tanstack/components/sign-up-form'
+
 export const Route = createFileRoute('/sign-up')({
   component: SignUp,
 })
diff --git a/apps/ui-library/registry/default/blocks/password-based-auth-tanstack/routes/update-password.tsx b/apps/ui-library/registry/default/blocks/password-based-auth-tanstack/routes/update-password.tsx
index 9959cb9be34..929b91b015f 100644
--- a/apps/ui-library/registry/default/blocks/password-based-auth-tanstack/routes/update-password.tsx
+++ b/apps/ui-library/registry/default/blocks/password-based-auth-tanstack/routes/update-password.tsx
@@ -1,6 +1,7 @@
-import { UpdatePasswordForm } from '@/registry/default/blocks/password-based-auth-tanstack/components/update-password-form'
 import { createFileRoute } from '@tanstack/react-router'
 
+import { UpdatePasswordForm } from '@/registry/default/blocks/password-based-auth-tanstack/components/update-password-form'
+
 export const Route = createFileRoute('/update-password')({
   component: UpdatePassword,
 })
diff --git a/apps/ui-library/registry/default/blocks/realtime-avatar-stack/components/avatar-stack.tsx b/apps/ui-library/registry/default/blocks/realtime-avatar-stack/components/avatar-stack.tsx
index e8f8db33691..eeade1a42ad 100644
--- a/apps/ui-library/registry/default/blocks/realtime-avatar-stack/components/avatar-stack.tsx
+++ b/apps/ui-library/registry/default/blocks/realtime-avatar-stack/components/avatar-stack.tsx
@@ -1,8 +1,9 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
+
 import { cn } from '@/lib/utils'
 import { Avatar, AvatarFallback, AvatarImage } from '@/registry/default/components/ui/avatar'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/registry/default/components/ui/tooltip'
-import { cva, type VariantProps } from 'class-variance-authority'
-import * as React from 'react'
 
 const avatarStackVariants = cva('flex -space-x-4 -space-y-4', {
   variants: {
diff --git a/apps/ui-library/registry/default/blocks/realtime-avatar-stack/components/realtime-avatar-stack.tsx b/apps/ui-library/registry/default/blocks/realtime-avatar-stack/components/realtime-avatar-stack.tsx
index 6137163a28d..71fe8abd124 100644
--- a/apps/ui-library/registry/default/blocks/realtime-avatar-stack/components/realtime-avatar-stack.tsx
+++ b/apps/ui-library/registry/default/blocks/realtime-avatar-stack/components/realtime-avatar-stack.tsx
@@ -1,8 +1,9 @@
 'use client'
 
+import { useMemo } from 'react'
+
 import { AvatarStack } from '@/registry/default/blocks/realtime-avatar-stack/components/avatar-stack'
 import { useRealtimePresenceRoom } from '@/registry/default/blocks/realtime-avatar-stack/hooks/use-realtime-presence-room'
-import { useMemo } from 'react'
 
 export const RealtimeAvatarStack = ({ roomName }: { roomName: string }) => {
   const { users: usersMap } = useRealtimePresenceRoom(roomName)
diff --git a/apps/ui-library/registry/default/blocks/realtime-avatar-stack/hooks/use-realtime-presence-room.ts b/apps/ui-library/registry/default/blocks/realtime-avatar-stack/hooks/use-realtime-presence-room.ts
index 3279d160412..d4d390a15fc 100644
--- a/apps/ui-library/registry/default/blocks/realtime-avatar-stack/hooks/use-realtime-presence-room.ts
+++ b/apps/ui-library/registry/default/blocks/realtime-avatar-stack/hooks/use-realtime-presence-room.ts
@@ -1,10 +1,11 @@
 'use client'
 
+import { REALTIME_SUBSCRIBE_STATES } from '@supabase/supabase-js'
+import { useEffect, useState } from 'react'
+
 import { useCurrentUserImage } from '@/registry/default/blocks/current-user-avatar/hooks/use-current-user-image'
 import { useCurrentUserName } from '@/registry/default/blocks/current-user-avatar/hooks/use-current-user-name'
 import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'
-import { REALTIME_SUBSCRIBE_STATES } from '@supabase/supabase-js'
-import { useEffect, useState } from 'react'
 
 const supabase = createClient()
 
diff --git a/apps/ui-library/registry/default/blocks/realtime-chat/components/realtime-chat.tsx b/apps/ui-library/registry/default/blocks/realtime-chat/components/realtime-chat.tsx
index 5d62f4ab4de..75929a8f9f1 100644
--- a/apps/ui-library/registry/default/blocks/realtime-chat/components/realtime-chat.tsx
+++ b/apps/ui-library/registry/default/blocks/realtime-chat/components/realtime-chat.tsx
@@ -1,16 +1,17 @@
 'use client'
 
+import { Send } from 'lucide-react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+
 import { cn } from '@/lib/utils'
 import { ChatMessageItem } from '@/registry/default/blocks/realtime-chat/components/chat-message'
 import { useChatScroll } from '@/registry/default/blocks/realtime-chat/hooks/use-chat-scroll'
 import {
-  type ChatMessage,
   useRealtimeChat,
+  type ChatMessage,
 } from '@/registry/default/blocks/realtime-chat/hooks/use-realtime-chat'
 import { Button } from '@/registry/default/components/ui/button'
 import { Input } from '@/registry/default/components/ui/input'
-import { Send } from 'lucide-react'
-import { useCallback, useEffect, useMemo, useState } from 'react'
 
 interface RealtimeChatProps {
   roomName: string
diff --git a/apps/ui-library/registry/default/blocks/realtime-chat/hooks/use-realtime-chat.tsx b/apps/ui-library/registry/default/blocks/realtime-chat/hooks/use-realtime-chat.tsx
index 218526fbb2c..898ea9ce57b 100644
--- a/apps/ui-library/registry/default/blocks/realtime-chat/hooks/use-realtime-chat.tsx
+++ b/apps/ui-library/registry/default/blocks/realtime-chat/hooks/use-realtime-chat.tsx
@@ -1,8 +1,9 @@
 'use client'
 
-import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'
 import { useCallback, useEffect, useState } from 'react'
 
+import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'
+
 interface UseRealtimeChatProps {
   roomName: string
   username: string
diff --git a/apps/ui-library/registry/default/blocks/realtime-cursor/components/cursor.tsx b/apps/ui-library/registry/default/blocks/realtime-cursor/components/cursor.tsx
index e87775eaf12..cb9d4f074e0 100644
--- a/apps/ui-library/registry/default/blocks/realtime-cursor/components/cursor.tsx
+++ b/apps/ui-library/registry/default/blocks/realtime-cursor/components/cursor.tsx
@@ -1,6 +1,7 @@
-import { cn } from '@/lib/utils'
 import { MousePointer2 } from 'lucide-react'
 
+import { cn } from '@/lib/utils'
+
 export const Cursor = ({
   className,
   style,
diff --git a/apps/ui-library/registry/default/blocks/realtime-cursor/hooks/use-realtime-cursors.ts b/apps/ui-library/registry/default/blocks/realtime-cursor/hooks/use-realtime-cursors.ts
index 3e7a4b7b80f..061732fcede 100644
--- a/apps/ui-library/registry/default/blocks/realtime-cursor/hooks/use-realtime-cursors.ts
+++ b/apps/ui-library/registry/default/blocks/realtime-cursor/hooks/use-realtime-cursors.ts
@@ -1,7 +1,8 @@
-import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'
-import { RealtimeChannel, REALTIME_SUBSCRIBE_STATES } from '@supabase/supabase-js'
+import { REALTIME_SUBSCRIBE_STATES, RealtimeChannel } from '@supabase/supabase-js'
 import { useCallback, useEffect, useRef, useState } from 'react'
 
+import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'
+
 /**
  * Throttle a callback to a certain delay, It will only call the callback if the delay has passed, with the arguments
  * from the last call
diff --git a/apps/ui-library/registry/default/blocks/social-auth-nextjs/app/auth/oauth/route.ts b/apps/ui-library/registry/default/blocks/social-auth-nextjs/app/auth/oauth/route.ts
index a89ecfe3543..ed032d1d2d5 100644
--- a/apps/ui-library/registry/default/blocks/social-auth-nextjs/app/auth/oauth/route.ts
+++ b/apps/ui-library/registry/default/blocks/social-auth-nextjs/app/auth/oauth/route.ts
@@ -1,4 +1,5 @@
 import { NextResponse } from 'next/server'
+
 // The client you created from the Server-Side Auth instructions
 import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/server'
 
diff --git a/apps/ui-library/registry/default/blocks/social-auth-nextjs/components/login-form.tsx b/apps/ui-library/registry/default/blocks/social-auth-nextjs/components/login-form.tsx
index ca6a76de612..9b12133009f 100644
--- a/apps/ui-library/registry/default/blocks/social-auth-nextjs/components/login-form.tsx
+++ b/apps/ui-library/registry/default/blocks/social-auth-nextjs/components/login-form.tsx
@@ -1,5 +1,7 @@
 'use client'
 
+import { useState } from 'react'
+
 import { cn } from '@/lib/utils'
 import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'
 import { Button } from '@/registry/default/components/ui/button'
@@ -10,7 +12,6 @@ import {
   CardHeader,
   CardTitle,
 } from '@/registry/default/components/ui/card'
-import { useState } from 'react'
 
 export function LoginForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
   const [error, setError] = useState<string | null>(null)
diff --git a/apps/ui-library/registry/default/blocks/social-auth-nextjs/components/logout-button.tsx b/apps/ui-library/registry/default/blocks/social-auth-nextjs/components/logout-button.tsx
index 88110ddc6c7..6b50eb5850b 100644
--- a/apps/ui-library/registry/default/blocks/social-auth-nextjs/components/logout-button.tsx
+++ b/apps/ui-library/registry/default/blocks/social-auth-nextjs/components/logout-button.tsx
@@ -1,8 +1,9 @@
 'use client'
 
+import { useRouter } from 'next/navigation'
+
 import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'
 import { Button } from '@/registry/default/components/ui/button'
-import { useRouter } from 'next/navigation'
 
 export function LogoutButton() {
   const router = useRouter()
diff --git a/apps/ui-library/registry/default/blocks/social-auth-nextjs/middleware.ts b/apps/ui-library/registry/default/blocks/social-auth-nextjs/middleware.ts
index c04d54bc883..172af7113fc 100644
--- a/apps/ui-library/registry/default/blocks/social-auth-nextjs/middleware.ts
+++ b/apps/ui-library/registry/default/blocks/social-auth-nextjs/middleware.ts
@@ -1,6 +1,7 @@
-import { updateSession } from '@/registry/default/clients/nextjs/lib/supabase/middleware'
 import { type NextRequest } from 'next/server'
 
+import { updateSession } from '@/registry/default/clients/nextjs/lib/supabase/middleware'
+
 export async function middleware(request: NextRequest) {
   return await updateSession(request)
 }
diff --git a/apps/ui-library/registry/default/blocks/social-auth-react-router/app/routes/auth.error.tsx b/apps/ui-library/registry/default/blocks/social-auth-react-router/app/routes/auth.error.tsx
index 59fc585be35..d934241076f 100644
--- a/apps/ui-library/registry/default/blocks/social-auth-react-router/app/routes/auth.error.tsx
+++ b/apps/ui-library/registry/default/blocks/social-auth-react-router/app/routes/auth.error.tsx
@@ -1,6 +1,7 @@
-import { Card, CardContent, CardHeader, CardTitle } from '@/registry/default/components/ui/card'
 import { useSearchParams } from 'react-router'
 
+import { Card, CardContent, CardHeader, CardTitle } from '@/registry/default/components/ui/card'
+
 export default function Page() {
   let [searchParams] = useSearchParams()
 
diff --git a/apps/ui-library/registry/default/blocks/social-auth-react-router/app/routes/auth.oauth.tsx b/apps/ui-library/registry/default/blocks/social-auth-react-router/app/routes/auth.oauth.tsx
index 22da5434422..5b85553718b 100644
--- a/apps/ui-library/registry/default/blocks/social-auth-react-router/app/routes/auth.oauth.tsx
+++ b/apps/ui-library/registry/default/blocks/social-auth-react-router/app/routes/auth.oauth.tsx
@@ -1,5 +1,6 @@
+import { redirect, type LoaderFunctionArgs } from 'react-router'
+
 import { createClient } from '@/registry/default/clients/react-router/lib/supabase/server'
-import { type LoaderFunctionArgs, redirect } from 'react-router'
 
 export async function loader({ request }: LoaderFunctionArgs) {
   const requestUrl = new URL(request.url)
diff --git a/apps/ui-library/registry/default/blocks/social-auth-react-router/app/routes/login.tsx b/apps/ui-library/registry/default/blocks/social-auth-react-router/app/routes/login.tsx
index c8e47c7a1cb..9ad26a0bb4a 100644
--- a/apps/ui-library/registry/default/blocks/social-auth-react-router/app/routes/login.tsx
+++ b/apps/ui-library/registry/default/blocks/social-auth-react-router/app/routes/login.tsx
@@ -1,3 +1,5 @@
+import { redirect, useFetcher, type ActionFunctionArgs } from 'react-router'
+
 import { createClient } from '@/registry/default/clients/react-router/lib/supabase/server'
 import { Button } from '@/registry/default/components/ui/button'
 import {
@@ -7,7 +9,6 @@ import {
   CardHeader,
   CardTitle,
 } from '@/registry/default/components/ui/card'
-import { type ActionFunctionArgs, redirect, useFetcher } from 'react-router'
 
 export const action = async ({ request }: ActionFunctionArgs) => {
   const { supabase } = createClient(request)
diff --git a/apps/ui-library/registry/default/blocks/social-auth-react-router/app/routes/logout.tsx b/apps/ui-library/registry/default/blocks/social-auth-react-router/app/routes/logout.tsx
index 0c22dbfb3bc..7a6df3f3ae7 100644
--- a/apps/ui-library/registry/default/blocks/social-auth-react-router/app/routes/logout.tsx
+++ b/apps/ui-library/registry/default/blocks/social-auth-react-router/app/routes/logout.tsx
@@ -1,5 +1,6 @@
+import { redirect, type ActionFunctionArgs } from 'react-router'
+
 import { createClient } from '@/registry/default/clients/react-router/lib/supabase/server'
-import { type ActionFunctionArgs, redirect } from 'react-router'
 
 export async function loader({ request }: ActionFunctionArgs) {
   const { supabase, headers } = createClient(request)
diff --git a/apps/ui-library/registry/default/blocks/social-auth-react-router/app/routes/protected.tsx b/apps/ui-library/registry/default/blocks/social-auth-react-router/app/routes/protected.tsx
index f3d7879b67b..7c8625273b5 100644
--- a/apps/ui-library/registry/default/blocks/social-auth-react-router/app/routes/protected.tsx
+++ b/apps/ui-library/registry/default/blocks/social-auth-react-router/app/routes/protected.tsx
@@ -1,6 +1,7 @@
+import { redirect, useLoaderData, type LoaderFunctionArgs } from 'react-router'
+
 import { createClient } from '@/registry/default/clients/react-router/lib/supabase/server'
 import { Button } from '@/registry/default/components/ui/button'
-import { type LoaderFunctionArgs, redirect, useLoaderData } from 'react-router'
 
 export const loader = async ({ request }: LoaderFunctionArgs) => {
   const { supabase } = createClient(request)
diff --git a/apps/ui-library/registry/default/blocks/social-auth-react/components/login-form.tsx b/apps/ui-library/registry/default/blocks/social-auth-react/components/login-form.tsx
index 265c60ed455..ad56db33edc 100644
--- a/apps/ui-library/registry/default/blocks/social-auth-react/components/login-form.tsx
+++ b/apps/ui-library/registry/default/blocks/social-auth-react/components/login-form.tsx
@@ -1,5 +1,7 @@
 'use client'
 
+import { useState } from 'react'
+
 import { cn } from '@/lib/utils'
 import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'
 import { Button } from '@/registry/default/components/ui/button'
@@ -10,7 +12,6 @@ import {
   CardHeader,
   CardTitle,
 } from '@/registry/default/components/ui/card'
-import { useState } from 'react'
 
 export function LoginForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
   const [error, setError] = useState<string | null>(null)
diff --git a/apps/ui-library/registry/default/blocks/social-auth-tanstack/components/login-form.tsx b/apps/ui-library/registry/default/blocks/social-auth-tanstack/components/login-form.tsx
index 23f667a6456..6dceffd6acc 100644
--- a/apps/ui-library/registry/default/blocks/social-auth-tanstack/components/login-form.tsx
+++ b/apps/ui-library/registry/default/blocks/social-auth-tanstack/components/login-form.tsx
@@ -1,3 +1,5 @@
+import { useState } from 'react'
+
 import { cn } from '@/lib/utils'
 import { createClient } from '@/registry/default/clients/tanstack/lib/supabase/client'
 import { Button } from '@/registry/default/components/ui/button'
@@ -8,7 +10,6 @@ import {
   CardHeader,
   CardTitle,
 } from '@/registry/default/components/ui/card'
-import { useState } from 'react'
 
 export function LoginForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
   const [error, setError] = useState<string | null>(null)
diff --git a/apps/ui-library/registry/default/blocks/social-auth-tanstack/lib/supabase/fetch-user-server-fn.ts b/apps/ui-library/registry/default/blocks/social-auth-tanstack/lib/supabase/fetch-user-server-fn.ts
index 3f3f50c4183..f491b808fb9 100644
--- a/apps/ui-library/registry/default/blocks/social-auth-tanstack/lib/supabase/fetch-user-server-fn.ts
+++ b/apps/ui-library/registry/default/blocks/social-auth-tanstack/lib/supabase/fetch-user-server-fn.ts
@@ -1,6 +1,8 @@
-import { createClient } from '@/registry/default/clients/tanstack/lib/supabase/server'
 import type { Factor, User } from '@supabase/supabase-js'
 import { createServerFn } from '@tanstack/react-start'
+
+import { createClient } from '@/registry/default/clients/tanstack/lib/supabase/server'
+
 type SSRSafeUser = User & {
   factors: (Factor & { factor_type: 'phone' | 'totp' })[]
 }
diff --git a/apps/ui-library/registry/default/blocks/social-auth-tanstack/routeTree.gen.ts b/apps/ui-library/registry/default/blocks/social-auth-tanstack/routeTree.gen.ts
index 40087e7a39c..3351a6f229c 100644
--- a/apps/ui-library/registry/default/blocks/social-auth-tanstack/routeTree.gen.ts
+++ b/apps/ui-library/registry/default/blocks/social-auth-tanstack/routeTree.gen.ts
@@ -1,17 +1,11 @@
 // SUPABASE NOTE: THIS FILE WAS ADDED TO SATISFY TANSTACK BUILD CONFIGURATION. IT IS NOT INCLUDED IN THE BLOCK.
-
 /* eslint-disable */
-
 // @ts-nocheck
-
 // noinspection JSUnusedGlobalSymbols
-
 // This file was automatically generated by TanStack Router.
 // You should NOT make any changes in this file as it will be overwritten.
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
-
 // Import Routes
-
 import { Route as rootRoute } from './routes/__root'
 import { Route as ProtectedImport } from './routes/_protected'
 import { Route as ProtectedInfoImport } from './routes/_protected/info'
diff --git a/apps/ui-library/registry/default/blocks/social-auth-tanstack/routes/_protected.tsx b/apps/ui-library/registry/default/blocks/social-auth-tanstack/routes/_protected.tsx
index 701c0c2a09f..b770da885ff 100644
--- a/apps/ui-library/registry/default/blocks/social-auth-tanstack/routes/_protected.tsx
+++ b/apps/ui-library/registry/default/blocks/social-auth-tanstack/routes/_protected.tsx
@@ -1,6 +1,7 @@
-import { fetchUser } from '@/registry/default/blocks/social-auth-tanstack/lib/supabase/fetch-user-server-fn'
 import { createFileRoute, redirect } from '@tanstack/react-router'
 
+import { fetchUser } from '@/registry/default/blocks/social-auth-tanstack/lib/supabase/fetch-user-server-fn'
+
 export const Route = createFileRoute('/_protected')({
   beforeLoad: async () => {
     const user = await fetchUser()
diff --git a/apps/ui-library/registry/default/blocks/social-auth-tanstack/routes/auth/error.tsx b/apps/ui-library/registry/default/blocks/social-auth-tanstack/routes/auth/error.tsx
index cb7a4669b08..bea8779ee5e 100644
--- a/apps/ui-library/registry/default/blocks/social-auth-tanstack/routes/auth/error.tsx
+++ b/apps/ui-library/registry/default/blocks/social-auth-tanstack/routes/auth/error.tsx
@@ -1,6 +1,7 @@
-import { Card, CardContent, CardHeader, CardTitle } from '@/registry/default/components/ui/card'
 import { createFileRoute } from '@tanstack/react-router'
 
+import { Card, CardContent, CardHeader, CardTitle } from '@/registry/default/components/ui/card'
+
 export const Route = createFileRoute('/auth/error')({
   component: AuthError,
   validateSearch: (params) => {
diff --git a/apps/ui-library/registry/default/blocks/social-auth-tanstack/routes/auth/oauth.ts b/apps/ui-library/registry/default/blocks/social-auth-tanstack/routes/auth/oauth.ts
index 529a6e539ab..e73e709ecb8 100644
--- a/apps/ui-library/registry/default/blocks/social-auth-tanstack/routes/auth/oauth.ts
+++ b/apps/ui-library/registry/default/blocks/social-auth-tanstack/routes/auth/oauth.ts
@@ -1,8 +1,9 @@
-import { createClient } from '@/registry/default/clients/tanstack/lib/supabase/server'
 import { createFileRoute, redirect } from '@tanstack/react-router'
 import { createServerFn } from '@tanstack/react-start'
 import { getWebRequest } from '@tanstack/react-start/server'
 
+import { createClient } from '@/registry/default/clients/tanstack/lib/supabase/server'
+
 const confirmFn = createServerFn({ method: 'GET' })
   .validator((searchParams: unknown) => {
     if (
diff --git a/apps/ui-library/registry/default/blocks/social-auth-tanstack/routes/login.tsx b/apps/ui-library/registry/default/blocks/social-auth-tanstack/routes/login.tsx
index e833436dddb..5bafe9e8841 100644
--- a/apps/ui-library/registry/default/blocks/social-auth-tanstack/routes/login.tsx
+++ b/apps/ui-library/registry/default/blocks/social-auth-tanstack/routes/login.tsx
@@ -1,6 +1,7 @@
-import { LoginForm } from '@/registry/default/blocks/social-auth-tanstack/components/login-form'
 import { createFileRoute } from '@tanstack/react-router'
 
+import { LoginForm } from '@/registry/default/blocks/social-auth-tanstack/components/login-form'
+
 export const Route = createFileRoute('/login')({
   component: Login,
 })
diff --git a/apps/ui-library/registry/default/components/ui/alert.tsx b/apps/ui-library/registry/default/components/ui/alert.tsx
index e9c7035408d..6d41194b724 100644
--- a/apps/ui-library/registry/default/components/ui/alert.tsx
+++ b/apps/ui-library/registry/default/components/ui/alert.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react'
 import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
 
 import { cn } from '@/lib/utils'
 
diff --git a/apps/ui-library/registry/default/components/ui/badge.tsx b/apps/ui-library/registry/default/components/ui/badge.tsx
index fa899d9a365..32aa3294de5 100644
--- a/apps/ui-library/registry/default/components/ui/badge.tsx
+++ b/apps/ui-library/registry/default/components/ui/badge.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react'
 import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
 
 import { cn } from '@/lib/utils'
 
diff --git a/apps/ui-library/registry/default/components/ui/command.tsx b/apps/ui-library/registry/default/components/ui/command.tsx
index 3d4be4fe845..10d12df2594 100644
--- a/apps/ui-library/registry/default/components/ui/command.tsx
+++ b/apps/ui-library/registry/default/components/ui/command.tsx
@@ -1,8 +1,8 @@
 'use client'
 
-import * as React from 'react'
 import { Command as CommandPrimitive } from 'cmdk'
 import { SearchIcon } from 'lucide-react'
+import * as React from 'react'
 
 import { cn } from '@/lib/utils'
 import {
diff --git a/apps/ui-library/registry/default/components/ui/dialog.tsx b/apps/ui-library/registry/default/components/ui/dialog.tsx
index 4a676bc8a29..9951803f26e 100644
--- a/apps/ui-library/registry/default/components/ui/dialog.tsx
+++ b/apps/ui-library/registry/default/components/ui/dialog.tsx
@@ -1,8 +1,8 @@
 'use client'
 
-import * as React from 'react'
 import * as DialogPrimitive from '@radix-ui/react-dialog'
 import { XIcon } from 'lucide-react'
+import * as React from 'react'
 
 import { cn } from '@/lib/utils'
 
diff --git a/apps/ui-library/registry/default/components/ui/form.tsx b/apps/ui-library/registry/default/components/ui/form.tsx
index f62ae0ff47c..ffb27fd63a8 100644
--- a/apps/ui-library/registry/default/components/ui/form.tsx
+++ b/apps/ui-library/registry/default/components/ui/form.tsx
@@ -1,8 +1,8 @@
 'use client'
 
-import * as React from 'react'
 import * as LabelPrimitive from '@radix-ui/react-label'
 import { Slot } from '@radix-ui/react-slot'
+import * as React from 'react'
 import {
   Controller,
   ControllerProps,
diff --git a/apps/ui-library/registry/default/components/ui/hover-card.tsx b/apps/ui-library/registry/default/components/ui/hover-card.tsx
index ff575944ebb..be1d655443a 100644
--- a/apps/ui-library/registry/default/components/ui/hover-card.tsx
+++ b/apps/ui-library/registry/default/components/ui/hover-card.tsx
@@ -1,7 +1,7 @@
 'use client'
 
-import * as React from 'react'
 import * as HoverCardPrimitive from '@radix-ui/react-hover-card'
+import * as React from 'react'
 
 import { cn } from '@/lib/utils'
 
diff --git a/apps/ui-library/registry/default/components/ui/label.tsx b/apps/ui-library/registry/default/components/ui/label.tsx
index 59ec99946bf..95b157067e8 100644
--- a/apps/ui-library/registry/default/components/ui/label.tsx
+++ b/apps/ui-library/registry/default/components/ui/label.tsx
@@ -1,8 +1,8 @@
 'use client'
 
-import * as React from 'react'
 import * as LabelPrimitive from '@radix-ui/react-label'
 import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
 
 import { cn } from '@/lib/utils'
 
diff --git a/apps/ui-library/registry/default/components/ui/popover.tsx b/apps/ui-library/registry/default/components/ui/popover.tsx
index cb3d6cd16c7..c2ee9819e3f 100644
--- a/apps/ui-library/registry/default/components/ui/popover.tsx
+++ b/apps/ui-library/registry/default/components/ui/popover.tsx
@@ -1,7 +1,7 @@
 'use client'
 
-import * as React from 'react'
 import * as PopoverPrimitive from '@radix-ui/react-popover'
+import * as React from 'react'
 
 import { cn } from '@/lib/utils'
 
diff --git a/apps/ui-library/registry/default/components/ui/progress.tsx b/apps/ui-library/registry/default/components/ui/progress.tsx
index 4863cedd061..bc126db1677 100644
--- a/apps/ui-library/registry/default/components/ui/progress.tsx
+++ b/apps/ui-library/registry/default/components/ui/progress.tsx
@@ -1,7 +1,7 @@
 'use client'
 
-import * as React from 'react'
 import * as ProgressPrimitive from '@radix-ui/react-progress'
+import * as React from 'react'
 
 import { cn } from '@/lib/utils'
 
diff --git a/apps/ui-library/registry/default/components/ui/select.tsx b/apps/ui-library/registry/default/components/ui/select.tsx
index 3191ce8025c..24032a1aae1 100644
--- a/apps/ui-library/registry/default/components/ui/select.tsx
+++ b/apps/ui-library/registry/default/components/ui/select.tsx
@@ -1,8 +1,8 @@
 'use client'
 
-import * as React from 'react'
 import * as SelectPrimitive from '@radix-ui/react-select'
 import { Check, ChevronDown, ChevronUp } from 'lucide-react'
+import * as React from 'react'
 
 import { cn } from '@/lib/utils'
 
diff --git a/apps/ui-library/registry/default/components/ui/switch.tsx b/apps/ui-library/registry/default/components/ui/switch.tsx
index 04bfdf379c6..66d67699b31 100644
--- a/apps/ui-library/registry/default/components/ui/switch.tsx
+++ b/apps/ui-library/registry/default/components/ui/switch.tsx
@@ -1,8 +1,8 @@
 'use client'
 
-import * as React from 'react'
 import * as SwitchPrimitives from '@radix-ui/react-switch'
 import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
 
 import { cn } from '@/lib/utils'
 
diff --git a/apps/ui-library/registry/default/components/ui/toggle-group.tsx b/apps/ui-library/registry/default/components/ui/toggle-group.tsx
index cd6f5a5464d..b431f75e832 100644
--- a/apps/ui-library/registry/default/components/ui/toggle-group.tsx
+++ b/apps/ui-library/registry/default/components/ui/toggle-group.tsx
@@ -1,8 +1,8 @@
 'use client'
 
-import * as React from 'react'
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'
 import { type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
 
 import { cn } from '@/lib/utils'
 import { toggleVariants } from '@/registry/default/components/ui/toggle'
diff --git a/apps/ui-library/registry/default/components/ui/toggle.tsx b/apps/ui-library/registry/default/components/ui/toggle.tsx
index fbdcd2a8862..0da926f1156 100644
--- a/apps/ui-library/registry/default/components/ui/toggle.tsx
+++ b/apps/ui-library/registry/default/components/ui/toggle.tsx
@@ -1,8 +1,8 @@
 'use client'
 
-import * as React from 'react'
 import * as TogglePrimitive from '@radix-ui/react-toggle'
 import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
 
 import { cn } from '@/lib/utils'
 
diff --git a/apps/ui-library/registry/default/examples/current-user-avatar-demo.tsx b/apps/ui-library/registry/default/examples/current-user-avatar-demo.tsx
index fcf6059c9f6..fdd844699e5 100644
--- a/apps/ui-library/registry/default/examples/current-user-avatar-demo.tsx
+++ b/apps/ui-library/registry/default/examples/current-user-avatar-demo.tsx
@@ -1,8 +1,9 @@
 'use client'
 
-import { Avatar, AvatarFallback, AvatarImage } from '@/registry/default/components/ui/avatar'
 import { useUser } from 'common'
 
+import { Avatar, AvatarFallback, AvatarImage } from '@/registry/default/components/ui/avatar'
+
 const CurrentUserAvatarDemo = () => {
   // this demo only works on supabase.com because all apps are on the same domain and share cookies
   const user = useUser()
diff --git a/apps/ui-library/registry/default/examples/current-user-avatar-preview.tsx b/apps/ui-library/registry/default/examples/current-user-avatar-preview.tsx
index 8b84910a926..076f06ffd48 100644
--- a/apps/ui-library/registry/default/examples/current-user-avatar-preview.tsx
+++ b/apps/ui-library/registry/default/examples/current-user-avatar-preview.tsx
@@ -1,5 +1,4 @@
 // 'use client'
-
 import { Avatar, AvatarFallback, AvatarImage } from '@/registry/default/components/ui/avatar'
 
 const CurrentUserAvatarPreview = () => {
diff --git a/apps/ui-library/registry/default/examples/infinite-query-hook-demo.tsx b/apps/ui-library/registry/default/examples/infinite-query-hook-demo.tsx
index 3d3cfd6b1ca..0de6b1a10cd 100644
--- a/apps/ui-library/registry/default/examples/infinite-query-hook-demo.tsx
+++ b/apps/ui-library/registry/default/examples/infinite-query-hook-demo.tsx
@@ -1,5 +1,7 @@
 'use client'
 
+import * as React from 'react'
+
 import { cn } from '@/lib/utils'
 import {
   SupabaseQueryHandler,
@@ -9,7 +11,6 @@ import {
 } from '@/registry/default/blocks/infinite-query-hook/hooks/use-infinite-query'
 import { Checkbox } from '@/registry/default/components/ui/checkbox'
 import { Database } from '@/registry/default/fixtures/database.types'
-import * as React from 'react'
 
 interface InfiniteListProps<TableName extends SupabaseTableName> {
   tableName: TableName
diff --git a/apps/ui-library/registry/default/examples/realtime-avatar-stack-demo.tsx b/apps/ui-library/registry/default/examples/realtime-avatar-stack-demo.tsx
index faec04ca92a..d54702a4610 100644
--- a/apps/ui-library/registry/default/examples/realtime-avatar-stack-demo.tsx
+++ b/apps/ui-library/registry/default/examples/realtime-avatar-stack-demo.tsx
@@ -1,13 +1,14 @@
 'use client'
 
-import { AvatarStack } from '@/registry/default/blocks/realtime-avatar-stack/components/avatar-stack'
-import { RealtimeUser } from '@/registry/default/blocks/realtime-avatar-stack/hooks/use-realtime-presence-room'
-import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'
 import { REALTIME_SUBSCRIBE_STATES } from '@supabase/supabase-js'
 import { useUser } from 'common'
 import { useEffect, useMemo, useState } from 'react'
 import { Label_Shadcn_, Switch } from 'ui'
+
 import { getRandomUser } from './utils'
+import { AvatarStack } from '@/registry/default/blocks/realtime-avatar-stack/components/avatar-stack'
+import { RealtimeUser } from '@/registry/default/blocks/realtime-avatar-stack/hooks/use-realtime-presence-room'
+import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'
 
 const supabase = createClient()
 const roomName = 'realtime-avatar-stack-demo'
diff --git a/apps/ui-library/registry/default/examples/realtime-avatar-stack-preview.tsx b/apps/ui-library/registry/default/examples/realtime-avatar-stack-preview.tsx
index 6ad98d28c93..784b1788f5d 100644
--- a/apps/ui-library/registry/default/examples/realtime-avatar-stack-preview.tsx
+++ b/apps/ui-library/registry/default/examples/realtime-avatar-stack-preview.tsx
@@ -1,7 +1,6 @@
 // 'use client'
-
-import { AvatarStack } from '@/registry/default/blocks/realtime-avatar-stack/components/avatar-stack'
 import { users } from './utils'
+import { AvatarStack } from '@/registry/default/blocks/realtime-avatar-stack/components/avatar-stack'
 
 const avatars = users.filter(
   (u) =>
diff --git a/apps/ui-library/registry/default/examples/realtime-chat-demo.tsx b/apps/ui-library/registry/default/examples/realtime-chat-demo.tsx
index e8e5ad17988..c7d2b7f2e3f 100644
--- a/apps/ui-library/registry/default/examples/realtime-chat-demo.tsx
+++ b/apps/ui-library/registry/default/examples/realtime-chat-demo.tsx
@@ -1,9 +1,10 @@
 'use client'
 
+import { useEffect, useState } from 'react'
+
 import { RealtimeChat } from '@/registry/default/blocks/realtime-chat/components/realtime-chat'
 import { Input } from '@/registry/default/components/ui/input'
 import { Label } from '@/registry/default/components/ui/label'
-import { useEffect, useState } from 'react'
 
 const names = [
   'Ava',
diff --git a/apps/ui-library/registry/default/examples/realtime-cursor-demo.tsx b/apps/ui-library/registry/default/examples/realtime-cursor-demo.tsx
index c10ce85d41f..b9f485e7b9a 100644
--- a/apps/ui-library/registry/default/examples/realtime-cursor-demo.tsx
+++ b/apps/ui-library/registry/default/examples/realtime-cursor-demo.tsx
@@ -1,12 +1,13 @@
 'use client'
 
-import { RealtimeCursors } from '@/registry/default/blocks/realtime-cursor/components/realtime-cursors'
-import { Input } from '@/registry/default/components/ui/input'
-import { Label } from '@/registry/default/components/ui/label'
 import { Button } from '@ui/components/shadcn/ui/button'
 import { RefreshCcw } from 'lucide-react'
 import { useEffect, useState } from 'react'
+
 import { generateFullName } from './utils'
+import { RealtimeCursors } from '@/registry/default/blocks/realtime-cursor/components/realtime-cursors'
+import { Input } from '@/registry/default/components/ui/input'
+import { Label } from '@/registry/default/components/ui/label'
 
 const RealtimeCursorDemo = () => {
   const [username, setUsername] = useState('')
diff --git a/apps/ui-library/registry/default/fixtures/lib/supabase/client.ts b/apps/ui-library/registry/default/fixtures/lib/supabase/client.ts
index 8a07ca81a1d..2b27a35bd12 100644
--- a/apps/ui-library/registry/default/fixtures/lib/supabase/client.ts
+++ b/apps/ui-library/registry/default/fixtures/lib/supabase/client.ts
@@ -1,5 +1,7 @@
 import { createBrowserClient } from '@supabase/ssr'
+
 import { Database } from '../../database.types'
+
 // This client is meant to be used for demo purposes only. It has types from the Supabase project in the ui-library app.
 export function createClient() {
   return createBrowserClient<Database>(
diff --git a/apps/ui-library/registry/default/platform/platform-kit-nextjs/app/api/ai/sql/route.ts b/apps/ui-library/registry/default/platform/platform-kit-nextjs/app/api/ai/sql/route.ts
index a774bc90917..24f8a91d2ec 100644
--- a/apps/ui-library/registry/default/platform/platform-kit-nextjs/app/api/ai/sql/route.ts
+++ b/apps/ui-library/registry/default/platform/platform-kit-nextjs/app/api/ai/sql/route.ts
@@ -1,9 +1,10 @@
-import type { paths } from '@/registry/default/platform/platform-kit-nextjs/lib/management-api-schema'
-import { listTablesSql } from '@/registry/default/platform/platform-kit-nextjs/lib/pg-meta'
 import { NextResponse } from 'next/server'
 import OpenAI from 'openai'
 import createClient from 'openapi-fetch'
 
+import type { paths } from '@/registry/default/platform/platform-kit-nextjs/lib/management-api-schema'
+import { listTablesSql } from '@/registry/default/platform/platform-kit-nextjs/lib/pg-meta'
+
 const openai = new OpenAI({
   apiKey: process.env.OPENAI_API_KEY,
 })
diff --git a/apps/ui-library/registry/default/platform/platform-kit-nextjs/components/dynamic-form.tsx b/apps/ui-library/registry/default/platform/platform-kit-nextjs/components/dynamic-form.tsx
index 0a2a2abd6f3..1b85f000c86 100644
--- a/apps/ui-library/registry/default/platform/platform-kit-nextjs/components/dynamic-form.tsx
+++ b/apps/ui-library/registry/default/platform/platform-kit-nextjs/components/dynamic-form.tsx
@@ -1,8 +1,10 @@
 'use client'
 
 import { zodResolver } from '@hookform/resolvers/zod'
+import { useEffect, useRef } from 'react'
 import { useForm } from 'react-hook-form'
 import type { z, ZodTypeAny } from 'zod'
+
 import { Button } from '@/registry/default/components/ui/button'
 import {
   Form,
@@ -14,7 +16,6 @@ import {
   FormMessage,
 } from '@/registry/default/components/ui/form'
 import { Input } from '@/registry/default/components/ui/input'
-import { Switch } from '@/registry/default/components/ui/switch'
 import {
   Select,
   SelectContent,
@@ -22,7 +23,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/registry/default/components/ui/select'
-import { useEffect, useRef } from 'react'
+import { Switch } from '@/registry/default/components/ui/switch'
 
 interface DynamicFormProps<T extends z.ZodRawShape = z.ZodRawShape> {
   schema: z.ZodObject<T>
diff --git a/apps/ui-library/registry/default/platform/platform-kit-nextjs/components/results-table.tsx b/apps/ui-library/registry/default/platform/platform-kit-nextjs/components/results-table.tsx
index 03c87ad444d..82b1549e942 100644
--- a/apps/ui-library/registry/default/platform/platform-kit-nextjs/components/results-table.tsx
+++ b/apps/ui-library/registry/default/platform/platform-kit-nextjs/components/results-table.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import { cn } from '@/lib/utils'
 import {
   Table,
   TableBody,
@@ -8,7 +9,6 @@ import {
   TableHeader,
   TableRow,
 } from '@/registry/default/components/ui/table'
-import { cn } from '@/lib/utils'
 
 interface ResultsTableProps {
   data: any[]
diff --git a/apps/ui-library/registry/default/platform/platform-kit-nextjs/components/sql-editor.tsx b/apps/ui-library/registry/default/platform/platform-kit-nextjs/components/sql-editor.tsx
index 3fafe9c30bd..753ee1dd160 100644
--- a/apps/ui-library/registry/default/platform/platform-kit-nextjs/components/sql-editor.tsx
+++ b/apps/ui-library/registry/default/platform/platform-kit-nextjs/components/sql-editor.tsx
@@ -1,21 +1,27 @@
 'use client'
 
-import { useState, useEffect, useCallback, useMemo } from 'react'
 import { Editor } from '@monaco-editor/react'
-import { Button } from '@/registry/default/components/ui/button'
-import { ResultsTable } from '@/registry/default/platform/platform-kit-nextjs/components/results-table'
-import { Label } from '@/registry/default/components/ui/label'
-import { useRunQuery } from '@/registry/default/platform/platform-kit-nextjs/hooks/use-run-query'
 import {
-  ArrowUp,
-  Loader2,
-  BarChart as BarChartIcon,
-  Wand,
-  FileText,
   AlertTriangle,
+  ArrowUp,
+  BarChart as BarChartIcon,
+  FileText,
+  Loader2,
+  Wand,
 } from 'lucide-react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from 'recharts'
+
+import { Alert, AlertDescription, AlertTitle } from '@/registry/default/components/ui/alert'
+import { Button } from '@/registry/default/components/ui/button'
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from '@/registry/default/components/ui/chart'
 import { Input } from '@/registry/default/components/ui/input'
-import { Skeleton } from '@/registry/default/components/ui/skeleton'
+import { Label } from '@/registry/default/components/ui/label'
 import { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/components/ui/popover'
 import {
   Select,
@@ -24,16 +30,11 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/registry/default/components/ui/select'
-import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from 'recharts'
-import {
-  ChartConfig,
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-} from '@/registry/default/components/ui/chart'
-import { ToggleGroup, ToggleGroupItem } from '@/registry/default/components/ui/toggle-group'
+import { Skeleton } from '@/registry/default/components/ui/skeleton'
 import { Switch } from '@/registry/default/components/ui/switch'
-import { Alert, AlertDescription, AlertTitle } from '@/registry/default/components/ui/alert'
+import { ToggleGroup, ToggleGroupItem } from '@/registry/default/components/ui/toggle-group'
+import { ResultsTable } from '@/registry/default/platform/platform-kit-nextjs/components/results-table'
+import { useRunQuery } from '@/registry/default/platform/platform-kit-nextjs/hooks/use-run-query'
 
 interface SqlEditorProps {
   projectRef: string
diff --git a/apps/ui-library/registry/default/platform/platform-kit-nextjs/components/supabase-manager/auth.tsx b/apps/ui-library/registry/default/platform/platform-kit-nextjs/components/supabase-manager/auth.tsx
index 3b8d7adc1da..76d25f7bbaf 100644
--- a/apps/ui-library/registry/default/platform/platform-kit-nextjs/components/supabase-manager/auth.tsx
+++ b/apps/ui-library/registry/default/platform/platform-kit-nextjs/components/supabase-manager/auth.tsx
@@ -1,25 +1,26 @@
 'use client'
 
-import { DynamicForm } from '@/registry/default/platform/platform-kit-nextjs/components/dynamic-form'
-import {
-  useGetAuthConfig,
-  useUpdateAuthConfig,
-} from '@/registry/default/platform/platform-kit-nextjs/hooks/use-auth'
+import { AlertTriangle, ChevronRight, Mail, Phone, User } from 'lucide-react'
+import { useCallback, useMemo } from 'react'
+import { z } from 'zod'
+
 import {
   authEmailProviderSchema,
   authFieldLabels,
   authGeneralSettingsSchema,
-  type AuthGeneralSettingsSchema,
   authGoogleProviderSchema,
   authPhoneProviderSchema,
+  type AuthGeneralSettingsSchema,
 } from '../../lib/schemas/auth'
-import { AlertTriangle, ChevronRight, Mail, Phone, User } from 'lucide-react'
-import { useCallback, useMemo } from 'react'
-import { z } from 'zod'
-import { useSheetNavigation } from '@/registry/default/platform/platform-kit-nextjs/contexts/SheetNavigationContext'
-import { Skeleton } from '@/registry/default/components/ui/skeleton'
-import { Button } from '@/registry/default/components/ui/button'
 import { Alert, AlertDescription, AlertTitle } from '@/registry/default/components/ui/alert'
+import { Button } from '@/registry/default/components/ui/button'
+import { Skeleton } from '@/registry/default/components/ui/skeleton'
+import { DynamicForm } from '@/registry/default/platform/platform-kit-nextjs/components/dynamic-form'
+import { useSheetNavigation } from '@/registry/default/platform/platform-kit-nextjs/contexts/SheetNavigationContext'
+import {
+  useGetAuthConfig,
+  useUpdateAuthConfig,
+} from '@/registry/default/platform/platform-kit-nextjs/hooks/use-auth'
 
 function ProviderSettingsView({
   projectRef,
diff --git a/apps/ui-library/registry/default/platform/platform-kit-nextjs/components/supabase-manager/database.tsx b/apps/ui-library/registry/default/platform/platform-kit-nextjs/components/supabase-manager/database.tsx
index 7b736c004c6..5513c531518 100644
--- a/apps/ui-library/registry/default/platform/platform-kit-nextjs/components/supabase-manager/database.tsx
+++ b/apps/ui-library/registry/default/platform/platform-kit-nextjs/components/supabase-manager/database.tsx
@@ -1,17 +1,18 @@
 'use client'
 
-import { useState, useMemo, useCallback } from 'react'
-import { z, type ZodTypeAny } from 'zod'
-import { useListTables } from '@/registry/default/platform/platform-kit-nextjs/hooks/use-tables'
-import { useRunQuery } from '@/registry/default/platform/platform-kit-nextjs/hooks/use-run-query'
-import { SqlEditor } from '@/registry/default/platform/platform-kit-nextjs/components/sql-editor'
-import { DynamicForm } from '@/registry/default/platform/platform-kit-nextjs/components/dynamic-form'
-import { toast } from 'sonner'
-import { useSheetNavigation } from '@/registry/default/platform/platform-kit-nextjs/contexts/SheetNavigationContext'
-import { Skeleton } from '@/registry/default/components/ui/skeleton'
-import { Button } from '@/registry/default/components/ui/button'
 import { AlertTriangle, Table, Wand } from 'lucide-react'
+import { useCallback, useMemo, useState } from 'react'
+import { toast } from 'sonner'
+import { z, type ZodTypeAny } from 'zod'
+
 import { Alert, AlertDescription, AlertTitle } from '@/registry/default/components/ui/alert'
+import { Button } from '@/registry/default/components/ui/button'
+import { Skeleton } from '@/registry/default/components/ui/skeleton'
+import { DynamicForm } from '@/registry/default/platform/platform-kit-nextjs/components/dynamic-form'
+import { SqlEditor } from '@/registry/default/platform/platform-kit-nextjs/components/sql-editor'
+import { useSheetNavigation } from '@/registry/default/platform/platform-kit-nextjs/contexts/SheetNavigationContext'
+import { useRunQuery } from '@/registry/default/platform/platform-kit-nextjs/hooks/use-run-query'
+import { useListTables } from '@/registry/default/platform/platform-kit-nextjs/hooks/use-tables'
 
 // Helper to generate a Zod schema from the table's column definitions
 function generateZodSchema(table: any): z.ZodObject<any, any, any> {
diff --git a/apps/ui-library/registry/default/platform/platform-kit-nextjs/components/supabase-manager/index.tsx b/apps/ui-library/registry/default/platform/platform-kit-nextjs/components/supabase-manager/index.tsx
index 6fa2752f239..c6699186675 100644
--- a/apps/ui-library/registry/default/platform/platform-kit-nextjs/components/supabase-manager/index.tsx
+++ b/apps/ui-library/registry/default/platform/platform-kit-nextjs/components/supabase-manager/index.tsx
@@ -1,6 +1,21 @@
 'use client'
 
-import { useState, ReactNode, useMemo } from 'react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import {
+  ChevronLeft,
+  ChevronRight,
+  Database,
+  ExternalLink,
+  HardDrive,
+  KeyRound,
+  Lightbulb,
+  ScrollText,
+  Shield,
+  Users,
+} from 'lucide-react'
+import Link from 'next/link'
+import { ReactNode, useMemo, useState } from 'react'
+
 import { Button } from '@/registry/default/components/ui/button'
 import {
   Dialog,
@@ -14,37 +29,23 @@ import {
   DrawerHeader,
   DrawerTitle,
 } from '@/registry/default/components/ui/drawer'
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from '@/registry/default/components/ui/hover-card'
+import { LogoSupabase } from '@/registry/default/platform/platform-kit-nextjs/components/logo-supabase'
 import { AuthManager } from '@/registry/default/platform/platform-kit-nextjs/components/supabase-manager/auth'
 import { DatabaseManager } from '@/registry/default/platform/platform-kit-nextjs/components/supabase-manager/database'
-import { StorageManager } from '@/registry/default/platform/platform-kit-nextjs/components/supabase-manager/storage'
 import { LogsManager } from '@/registry/default/platform/platform-kit-nextjs/components/supabase-manager/logs'
+import { SecretsManager } from '@/registry/default/platform/platform-kit-nextjs/components/supabase-manager/secrets'
+import { StorageManager } from '@/registry/default/platform/platform-kit-nextjs/components/supabase-manager/storage'
 import { SuggestionsManager } from '@/registry/default/platform/platform-kit-nextjs/components/supabase-manager/suggestions'
 import { UsersManager } from '@/registry/default/platform/platform-kit-nextjs/components/supabase-manager/users'
-import { SecretsManager } from '@/registry/default/platform/platform-kit-nextjs/components/supabase-manager/secrets'
 import {
   SheetNavigationProvider,
   useSheetNavigation,
 } from '@/registry/default/platform/platform-kit-nextjs/contexts/SheetNavigationContext'
-import {
-  ChevronLeft,
-  ChevronRight,
-  Database,
-  ExternalLink,
-  HardDrive,
-  KeyRound,
-  Lightbulb,
-  ScrollText,
-  Shield,
-  Users,
-} from 'lucide-react'
-import {
-  HoverCard,
-  HoverCardTrigger,
-  HoverCardContent,
-} from '@/registry/default/components/ui/hover-card'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { LogoSupabase } from '@/registry/default/platform/platform-kit-nextjs/components/logo-supabase'
-import Link from 'next/link'
 
 const queryClient = new QueryClient()
 
diff --git a/apps/ui-library/registry/default/platform/platform-kit-nextjs/components/supabase-manager/logs.tsx b/apps/ui-library/registry/default/platform/platform-kit-nextjs/components/supabase-manager/logs.tsx
index afefc2e5048..2e8e449f60b 100644
--- a/apps/ui-library/registry/default/platform/platform-kit-nextjs/components/supabase-manager/logs.tsx
+++ b/apps/ui-library/registry/default/platform/platform-kit-nextjs/components/supabase-manager/logs.tsx
@@ -1,5 +1,10 @@
 'use client'
 
+import { Check, ChevronsUpDown, Logs, Terminal } from 'lucide-react'
+import { useMemo, useState } from 'react'
+
+import { genDefaultQuery, LogsTableName } from '../../lib/logs'
+import { cn } from '@/lib/utils'
 import { Alert, AlertDescription, AlertTitle } from '@/registry/default/components/ui/alert'
 import { Button } from '@/registry/default/components/ui/button'
 import {
@@ -26,10 +31,6 @@ import {
   TableRow,
 } from '@/registry/default/components/ui/table'
 import { useGetLogs } from '@/registry/default/platform/platform-kit-nextjs/hooks/use-logs'
-import { LogsTableName, genDefaultQuery } from '../../lib/logs'
-import { cn } from '@/lib/utils'
-import { Check, ChevronsUpDown, Logs, Terminal } from 'lucide-react'
-import { useMemo, useState } from 'react'
 
 // Define log types with names and descriptions
 const logTypes = [
diff --git a/apps/ui-library/registry/default/platform/platform-kit-nextjs/components/supabase-manager/secrets.tsx b/apps/ui-library/registry/default/platform/platform-kit-nextjs/components/supabase-manager/secrets.tsx
index 51f72a26b40..eb5205a4670 100644
--- a/apps/ui-library/registry/default/platform/platform-kit-nextjs/components/supabase-manager/secrets.tsx
+++ b/apps/ui-library/registry/default/platform/platform-kit-nextjs/components/supabase-manager/secrets.tsx
@@ -1,5 +1,12 @@
 'use client'
 
+import { zodResolver } from '@hookform/resolvers/zod'
+import { AlertTriangle, Key, Minus, PlusIcon } from 'lucide-react'
+import { useFieldArray, useForm } from 'react-hook-form'
+import { z } from 'zod'
+
+import { secretsSchema } from '../../lib/schemas/secrets'
+import { Alert, AlertDescription, AlertTitle } from '@/registry/default/components/ui/alert'
 import { Button } from '@/registry/default/components/ui/button'
 import {
   Form,
@@ -16,12 +23,6 @@ import {
   useDeleteSecrets,
   useGetSecrets,
 } from '@/registry/default/platform/platform-kit-nextjs/hooks/use-secrets'
-import { secretsSchema } from '../../lib/schemas/secrets'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { AlertTriangle, Minus, PlusIcon, Key } from 'lucide-react'
-import { useFieldArray, useForm } from 'react-hook-form'
-import { z } from 'zod'
-import { Alert, AlertDescription, AlertTitle } from '@/registry/default/components/ui/alert'
 
 export function SecretsManager({ projectRef }: { projectRef: string }) {
   const { data: secrets, isLoading, error } = useGetSecrets(projectRef)
diff --git a/apps/ui-library/registry/default/platform/platform-kit-nextjs/components/supabase-manager/storage.tsx b/apps/ui-library/registry/default/platform/platform-kit-nextjs/components/supabase-manager/storage.tsx
index 83635cabcbe..f515b94c3bf 100644
--- a/apps/ui-library/registry/default/platform/platform-kit-nextjs/components/supabase-manager/storage.tsx
+++ b/apps/ui-library/registry/default/platform/platform-kit-nextjs/components/supabase-manager/storage.tsx
@@ -1,12 +1,13 @@
 'use client'
 
-import { useGetBuckets } from '@/registry/default/platform/platform-kit-nextjs/hooks/use-storage'
-import { Skeleton } from '@/registry/default/components/ui/skeleton'
+import { AlertTriangle, Folder } from 'lucide-react'
+
+import { Alert, AlertDescription, AlertTitle } from '@/registry/default/components/ui/alert'
 import { Badge } from '@/registry/default/components/ui/badge'
 import { Button } from '@/registry/default/components/ui/button'
-import { AlertTriangle, Folder } from 'lucide-react'
+import { Skeleton } from '@/registry/default/components/ui/skeleton'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/registry/default/components/ui/tooltip'
-import { Alert, AlertDescription, AlertTitle } from '@/registry/default/components/ui/alert'
+import { useGetBuckets } from '@/registry/default/platform/platform-kit-nextjs/hooks/use-storage'
 
 export function StorageManager({ projectRef }: { projectRef: string }) {
   const { data: buckets, isLoading, isError } = useGetBuckets(projectRef)
diff --git a/apps/ui-library/registry/default/platform/platform-kit-nextjs/components/supabase-manager/suggestions.tsx b/apps/ui-library/registry/default/platform/platform-kit-nextjs/components/supabase-manager/suggestions.tsx
index a6b5135fbea..2c71e44f429 100644
--- a/apps/ui-library/registry/default/platform/platform-kit-nextjs/components/supabase-manager/suggestions.tsx
+++ b/apps/ui-library/registry/default/platform/platform-kit-nextjs/components/supabase-manager/suggestions.tsx
@@ -1,13 +1,13 @@
 'use client'
 
-import { useGetSuggestions } from '@/registry/default/platform/platform-kit-nextjs/hooks/use-suggestions'
-import { Alert, AlertDescription, AlertTitle } from '@/registry/default/components/ui/alert'
 import { Terminal } from 'lucide-react'
-import { Badge } from '@/registry/default/components/ui/badge'
 import { useMemo } from 'react'
-
 import ReactMarkdown from 'react-markdown'
+
+import { Alert, AlertDescription, AlertTitle } from '@/registry/default/components/ui/alert'
+import { Badge } from '@/registry/default/components/ui/badge'
 import { Skeleton } from '@/registry/default/components/ui/skeleton'
+import { useGetSuggestions } from '@/registry/default/platform/platform-kit-nextjs/hooks/use-suggestions'
 
 export function SuggestionsManager({ projectRef }: { projectRef: string }) {
   const { data: suggestions, isLoading, error } = useGetSuggestions(projectRef)
diff --git a/apps/ui-library/registry/default/platform/platform-kit-nextjs/components/supabase-manager/users.tsx b/apps/ui-library/registry/default/platform/platform-kit-nextjs/components/supabase-manager/users.tsx
index c46ca43ffbb..72d953668ed 100644
--- a/apps/ui-library/registry/default/platform/platform-kit-nextjs/components/supabase-manager/users.tsx
+++ b/apps/ui-library/registry/default/platform/platform-kit-nextjs/components/supabase-manager/users.tsx
@@ -1,7 +1,7 @@
 'use client'
 
-import { SqlEditor } from '@/registry/default/platform/platform-kit-nextjs/components/sql-editor'
 import { useState } from 'react'
+
 import {
   Select,
   SelectContent,
@@ -9,6 +9,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/registry/default/components/ui/select'
+import { SqlEditor } from '@/registry/default/platform/platform-kit-nextjs/components/sql-editor'
 import { UsersGrowthChart } from '@/registry/default/platform/platform-kit-nextjs/components/users-growth-chart'
 
 export function UsersManager({ projectRef }: { projectRef: string }) {
diff --git a/apps/ui-library/registry/default/platform/platform-kit-nextjs/components/users-growth-chart.tsx b/apps/ui-library/registry/default/platform/platform-kit-nextjs/components/users-growth-chart.tsx
index 79f484541eb..7d09b709ab7 100644
--- a/apps/ui-library/registry/default/platform/platform-kit-nextjs/components/users-growth-chart.tsx
+++ b/apps/ui-library/registry/default/platform/platform-kit-nextjs/components/users-growth-chart.tsx
@@ -1,17 +1,18 @@
 'use client'
 
+import { AlertTriangle } from 'lucide-react'
 import * as React from 'react'
 import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from 'recharts'
+
+import { Alert, AlertDescription, AlertTitle } from '@/registry/default/components/ui/alert'
 import {
   ChartConfig,
   ChartContainer,
   ChartTooltip,
   ChartTooltipContent,
 } from '@/registry/default/components/ui/chart'
-import { useGetUserCountsByDay } from '@/registry/default/platform/platform-kit-nextjs/hooks/use-user-counts'
 import { Skeleton } from '@/registry/default/components/ui/skeleton'
-import { AlertTriangle } from 'lucide-react'
-import { Alert, AlertDescription, AlertTitle } from '@/registry/default/components/ui/alert'
+import { useGetUserCountsByDay } from '@/registry/default/platform/platform-kit-nextjs/hooks/use-user-counts'
 
 const chartConfig = {
   users: {
diff --git a/apps/ui-library/registry/default/platform/platform-kit-nextjs/contexts/SheetNavigationContext.tsx b/apps/ui-library/registry/default/platform/platform-kit-nextjs/contexts/SheetNavigationContext.tsx
index acb00f159d1..4d7d1f54205 100644
--- a/apps/ui-library/registry/default/platform/platform-kit-nextjs/contexts/SheetNavigationContext.tsx
+++ b/apps/ui-library/registry/default/platform/platform-kit-nextjs/contexts/SheetNavigationContext.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { createContext, useContext, useState, ReactNode, useMemo, useCallback } from 'react'
+import { createContext, ReactNode, useCallback, useContext, useMemo, useState } from 'react'
 
 type StackItem = {
   title: string
diff --git a/apps/ui-library/registry/default/platform/platform-kit-nextjs/hooks/use-auth.ts b/apps/ui-library/registry/default/platform/platform-kit-nextjs/hooks/use-auth.ts
index 97151c3d5ce..046e860f3f6 100644
--- a/apps/ui-library/registry/default/platform/platform-kit-nextjs/hooks/use-auth.ts
+++ b/apps/ui-library/registry/default/platform/platform-kit-nextjs/hooks/use-auth.ts
@@ -1,11 +1,12 @@
 'use client'
 
-import { client } from '@/registry/default/platform/platform-kit-nextjs/lib/management-api'
-import type { components } from '@/registry/default/platform/platform-kit-nextjs/lib/management-api-schema'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { type AxiosError } from 'axios'
 import { toast } from 'sonner'
 
+import { client } from '@/registry/default/platform/platform-kit-nextjs/lib/management-api'
+import type { components } from '@/registry/default/platform/platform-kit-nextjs/lib/management-api-schema'
+
 const getAuthConfig = async (projectRef: string) => {
   const { data, error } = await client.GET('/v1/projects/{ref}/config/auth', {
     params: {
diff --git a/apps/ui-library/registry/default/platform/platform-kit-nextjs/hooks/use-logs.ts b/apps/ui-library/registry/default/platform/platform-kit-nextjs/hooks/use-logs.ts
index 4a180ed33e2..f1b9b0aa01d 100644
--- a/apps/ui-library/registry/default/platform/platform-kit-nextjs/hooks/use-logs.ts
+++ b/apps/ui-library/registry/default/platform/platform-kit-nextjs/hooks/use-logs.ts
@@ -1,8 +1,9 @@
 'use client'
 
-import { client } from '@/registry/default/platform/platform-kit-nextjs/lib/management-api'
 import { useQuery } from '@tanstack/react-query'
 
+import { client } from '@/registry/default/platform/platform-kit-nextjs/lib/management-api'
+
 // GET Logs
 const getLogs = async ({
   projectRef,
diff --git a/apps/ui-library/registry/default/platform/platform-kit-nextjs/hooks/use-run-query.ts b/apps/ui-library/registry/default/platform/platform-kit-nextjs/hooks/use-run-query.ts
index c0386d2bf64..724f6c61776 100644
--- a/apps/ui-library/registry/default/platform/platform-kit-nextjs/hooks/use-run-query.ts
+++ b/apps/ui-library/registry/default/platform/platform-kit-nextjs/hooks/use-run-query.ts
@@ -1,10 +1,11 @@
 'use client'
 
-import { client } from '@/registry/default/platform/platform-kit-nextjs/lib/management-api'
 import { useMutation } from '@tanstack/react-query'
 import { type AxiosError } from 'axios'
 import { toast } from 'sonner'
 
+import { client } from '@/registry/default/platform/platform-kit-nextjs/lib/management-api'
+
 // RUN SQL Query
 export const runQuery = async ({
   projectRef,
diff --git a/apps/ui-library/registry/default/platform/platform-kit-nextjs/hooks/use-secrets.ts b/apps/ui-library/registry/default/platform/platform-kit-nextjs/hooks/use-secrets.ts
index 04e7302d900..996799761d7 100644
--- a/apps/ui-library/registry/default/platform/platform-kit-nextjs/hooks/use-secrets.ts
+++ b/apps/ui-library/registry/default/platform/platform-kit-nextjs/hooks/use-secrets.ts
@@ -1,11 +1,12 @@
 'use client'
 
-import { client } from '@/registry/default/platform/platform-kit-nextjs/lib/management-api'
-import type { components } from '@/registry/default/platform/platform-kit-nextjs/lib/management-api-schema'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { type AxiosError } from 'axios'
 import { toast } from 'sonner'
 
+import { client } from '@/registry/default/platform/platform-kit-nextjs/lib/management-api'
+import type { components } from '@/registry/default/platform/platform-kit-nextjs/lib/management-api-schema'
+
 // GET Secrets
 const getSecrets = async (projectRef: string) => {
   const { data, error } = await client.GET('/v1/projects/{ref}/secrets', {
diff --git a/apps/ui-library/registry/default/platform/platform-kit-nextjs/hooks/use-storage.ts b/apps/ui-library/registry/default/platform/platform-kit-nextjs/hooks/use-storage.ts
index b702ecb8425..37a7c844b2a 100644
--- a/apps/ui-library/registry/default/platform/platform-kit-nextjs/hooks/use-storage.ts
+++ b/apps/ui-library/registry/default/platform/platform-kit-nextjs/hooks/use-storage.ts
@@ -1,8 +1,9 @@
 'use client'
 
-import { client } from '@/registry/default/platform/platform-kit-nextjs/lib/management-api'
 import { useQuery } from '@tanstack/react-query'
 
+import { client } from '@/registry/default/platform/platform-kit-nextjs/lib/management-api'
+
 // GET Buckets
 const getBuckets = async (projectRef: string) => {
   const { data, error } = await client.GET('/v1/projects/{ref}/storage/buckets', {
diff --git a/apps/ui-library/registry/default/platform/platform-kit-nextjs/hooks/use-suggestions.ts b/apps/ui-library/registry/default/platform/platform-kit-nextjs/hooks/use-suggestions.ts
index 8efc9f610cd..436a6d6909c 100644
--- a/apps/ui-library/registry/default/platform/platform-kit-nextjs/hooks/use-suggestions.ts
+++ b/apps/ui-library/registry/default/platform/platform-kit-nextjs/hooks/use-suggestions.ts
@@ -1,8 +1,9 @@
 'use client'
 
-import { client } from '@/registry/default/platform/platform-kit-nextjs/lib/management-api'
 import { useQuery } from '@tanstack/react-query'
 
+import { client } from '@/registry/default/platform/platform-kit-nextjs/lib/management-api'
+
 // GET Suggestions
 const getSuggestions = async (projectRef: string) => {
   const [
diff --git a/apps/ui-library/registry/default/platform/platform-kit-nextjs/hooks/use-tables.ts b/apps/ui-library/registry/default/platform/platform-kit-nextjs/hooks/use-tables.ts
index aa5c26a8eaa..c09fb8d476f 100644
--- a/apps/ui-library/registry/default/platform/platform-kit-nextjs/hooks/use-tables.ts
+++ b/apps/ui-library/registry/default/platform/platform-kit-nextjs/hooks/use-tables.ts
@@ -1,9 +1,10 @@
 'use client'
 
-import { listTablesSql } from '@/registry/default/platform/platform-kit-nextjs/lib/pg-meta'
-import { runQuery } from '@/registry/default/platform/platform-kit-nextjs/hooks/use-run-query'
 import { useQuery } from '@tanstack/react-query'
 
+import { runQuery } from '@/registry/default/platform/platform-kit-nextjs/hooks/use-run-query'
+import { listTablesSql } from '@/registry/default/platform/platform-kit-nextjs/lib/pg-meta'
+
 // LIST Tables
 const listTables = ({ projectRef, schemas }: { projectRef: string; schemas?: string[] }) => {
   const sql = listTablesSql(schemas)
diff --git a/apps/ui-library/registry/default/platform/platform-kit-nextjs/hooks/use-user-counts.ts b/apps/ui-library/registry/default/platform/platform-kit-nextjs/hooks/use-user-counts.ts
index 696aac38880..2c1b6bbc41b 100644
--- a/apps/ui-library/registry/default/platform/platform-kit-nextjs/hooks/use-user-counts.ts
+++ b/apps/ui-library/registry/default/platform/platform-kit-nextjs/hooks/use-user-counts.ts
@@ -1,6 +1,7 @@
 'use client'
 
 import { useQuery } from '@tanstack/react-query'
+
 import { runQuery } from '@/registry/default/platform/platform-kit-nextjs/hooks/use-run-query'
 
 // GET User Counts by day
diff --git a/apps/ui-library/registry/default/platform/platform-kit-nextjs/lib/management-api.ts b/apps/ui-library/registry/default/platform/platform-kit-nextjs/lib/management-api.ts
index 493d214f72d..e1a8b3382bd 100644
--- a/apps/ui-library/registry/default/platform/platform-kit-nextjs/lib/management-api.ts
+++ b/apps/ui-library/registry/default/platform/platform-kit-nextjs/lib/management-api.ts
@@ -1,4 +1,5 @@
 import createClient from 'openapi-fetch'
+
 import type { paths } from './management-api-schema'
 
 export const client = createClient<paths>({
diff --git a/apps/ui-library/registry/index.ts b/apps/ui-library/registry/index.ts
index 58ddc6b8bed..bfa9865e378 100644
--- a/apps/ui-library/registry/index.ts
+++ b/apps/ui-library/registry/index.ts
@@ -1,11 +1,11 @@
+import { blocks as vueBlocks } from '@supabase/vue-blocks'
 import { type Registry, type RegistryItem } from 'shadcn/schema'
 
-import { examples } from '@/registry/examples'
-import { blocks as vueBlocks } from '@supabase/vue-blocks'
 import { blocks } from './blocks'
 import { clients } from './clients'
 import aiEditorRules from './default/ai-editor-rules/registry-item.json' with { type: 'json' }
 import { platform } from './platform'
+import { examples } from '@/registry/examples'
 
 export const registry = {
   name: 'Supabase UI Library',
diff --git a/apps/ui-library/registry/utils.ts b/apps/ui-library/registry/utils.ts
index 6d58409b671..c4b1690cab0 100644
--- a/apps/ui-library/registry/utils.ts
+++ b/apps/ui-library/registry/utils.ts
@@ -1,5 +1,6 @@
 import lodash from 'lodash'
 import type { RegistryItem } from 'shadcn/schema'
+
 const { uniq, uniqBy } = lodash
 
 const registryItemAppend = (item: RegistryItem, items: RegistryItem[]) => {
diff --git a/package.json b/package.json
index aec57044d4b..927c83a6059 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
     "dev:design-system": "turbo run dev --filter=design-system --parallel",
     "lint": "turbo run lint",
     "typecheck": "turbo --continue typecheck",
-    "test:prettier": "SORT_IMPORTS=false prettier --cache --check '{apps,packages}/**/*.{js,jsx,ts,tsx,css,md,mdx,json}'",
+    "test:prettier": "SORT_IMPORTS=false prettier --cache --check '{apps,packages}/**/*.{js,jsx,ts,tsx,css,md,json}'",
     "format": "SORT_IMPORTS=false prettier --cache --write '{apps,packages}/**/*.{js,jsx,ts,tsx,css,md,mdx,json}'",
     "test:docs": "turbo run test --filter=docs",
     "test:ui": "turbo run test --filter=ui",
diff --git a/packages/ai-commands/src/docs.ts b/packages/ai-commands/src/docs.ts
index f77095aaa55..f3f268821b7 100644
--- a/packages/ai-commands/src/docs.ts
+++ b/packages/ai-commands/src/docs.ts
@@ -1,6 +1,7 @@
 import type { SupabaseClient } from '@supabase/supabase-js'
 import { codeBlock, oneLine } from 'common-tags'
 import type OpenAI from 'openai'
+
 import { ApplicationError, UserError } from './errors'
 import { getChatRequestTokenCount, getMaxTokenCount, tokenizer } from './tokenizer'
 import type { Message } from './types'
diff --git a/packages/ai-commands/src/sql/cron.ts b/packages/ai-commands/src/sql/cron.ts
index 26f756e8c1d..24df30d6316 100644
--- a/packages/ai-commands/src/sql/cron.ts
+++ b/packages/ai-commands/src/sql/cron.ts
@@ -1,7 +1,8 @@
-import type OpenAI from 'openai'
-import { ContextLengthError } from '../errors'
-import { jsonrepair } from 'jsonrepair'
 import { codeBlock } from 'common-tags'
+import { jsonrepair } from 'jsonrepair'
+import type OpenAI from 'openai'
+
+import { ContextLengthError } from '../errors'
 
 // Responds to a natural language request for cron syntax.
 export async function generateCron(openai: OpenAI, prompt: string) {
diff --git a/packages/ai-commands/src/sql/functions.ts b/packages/ai-commands/src/sql/functions.ts
index 5bcf0288f8c..646e88d6577 100644
--- a/packages/ai-commands/src/sql/functions.ts
+++ b/packages/ai-commands/src/sql/functions.ts
@@ -2,6 +2,7 @@ import { SchemaBuilder } from '@serafin/schema-builder'
 import { codeBlock, stripIndent } from 'common-tags'
 import { jsonrepair } from 'jsonrepair'
 import type OpenAI from 'openai'
+
 import { ContextLengthError, EmptyResponseError, EmptySqlError } from '../errors'
 
 const debugSqlSchema = SchemaBuilder.emptySchema()
diff --git a/packages/ai-commands/test/extensions.ts b/packages/ai-commands/test/extensions.ts
index 5385054ca25..c210723d419 100644
--- a/packages/ai-commands/test/extensions.ts
+++ b/packages/ai-commands/test/extensions.ts
@@ -1,6 +1,6 @@
-import { expect } from 'vitest'
 import { codeBlock } from 'common-tags'
 import OpenAI from 'openai'
+import { expect } from 'vitest'
 
 expect.extend({
   async toMatchCriteria(received: string, criteria: string) {
diff --git a/packages/ai-commands/vitest.config.ts b/packages/ai-commands/vitest.config.ts
index 13b0aa4f4d0..77aa4c9744c 100644
--- a/packages/ai-commands/vitest.config.ts
+++ b/packages/ai-commands/vitest.config.ts
@@ -1,5 +1,4 @@
 /// <reference types="vitest" />
-
 import { defineConfig } from 'vitest/config'
 
 export default defineConfig({
diff --git a/packages/ai-commands/vitest.setup.ts b/packages/ai-commands/vitest.setup.ts
index b8e0e2e20d8..d6c9bc7b732 100644
--- a/packages/ai-commands/vitest.setup.ts
+++ b/packages/ai-commands/vitest.setup.ts
@@ -1,5 +1,6 @@
-import { config } from 'dotenv'
 import { statSync } from 'fs'
+import { config } from 'dotenv'
+
 import './test/extensions'
 
 if (!process.env.CI) {
diff --git a/packages/api-types/index.ts b/packages/api-types/index.ts
index 79221cc24d2..e3de6a16508 100644
--- a/packages/api-types/index.ts
+++ b/packages/api-types/index.ts
@@ -1,15 +1,16 @@
-export type { webhooks, $defs } from './types/api'
 import type {
-  paths as apiPaths,
   components as apiComponents,
   operations as apiOperations,
+  paths as apiPaths,
 } from './types/api'
 import type {
-  paths as platformPaths,
   components as platformComponents,
   operations as platformOperations,
+  paths as platformPaths,
 } from './types/platform'
 
+export type { webhooks, $defs } from './types/api'
+
 export interface paths extends apiPaths, platformPaths {}
 export interface operations extends apiOperations, platformOperations {}
 export interface components {
diff --git a/packages/common/auth.tsx b/packages/common/auth.tsx
index ee8a1dacd1d..c28e4fefac7 100644
--- a/packages/common/auth.tsx
+++ b/packages/common/auth.tsx
@@ -10,6 +10,7 @@ import {
   useMemo,
   useState,
 } from 'react'
+
 import { clearLocalStorage } from './constants/local-storage'
 import { gotrueClient, type User } from './gotrue'
 
diff --git a/packages/common/configcat.test.ts b/packages/common/configcat.test.ts
index 5dc0c3d14a6..677fc8e02f7 100644
--- a/packages/common/configcat.test.ts
+++ b/packages/common/configcat.test.ts
@@ -1,5 +1,6 @@
 import * as configcat from 'configcat-js'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
+
 import { getFlags } from './configcat'
 
 vi.mock('data/fetchers', () => ({
diff --git a/packages/common/consent-state.ts b/packages/common/consent-state.ts
index 23e1109dfbd..9d024c9be07 100644
--- a/packages/common/consent-state.ts
+++ b/packages/common/consent-state.ts
@@ -1,6 +1,7 @@
 import type Usercentrics from '@usercentrics/cmp-browser-sdk'
 import type { BaseCategory, UserDecision } from '@usercentrics/cmp-browser-sdk'
 import { proxy, snapshot, useSnapshot } from 'valtio'
+
 import { IS_PLATFORM, LOCAL_STORAGE_KEYS } from './constants'
 
 export const consentState = proxy({
diff --git a/packages/common/enabled-features/index.ts b/packages/common/enabled-features/index.ts
index 5439a102d63..0d9ad529179 100644
--- a/packages/common/enabled-features/index.ts
+++ b/packages/common/enabled-features/index.ts
@@ -1,4 +1,5 @@
 import type { components } from 'api-types'
+
 import enabledFeaturesRaw from './enabled-features.json' with { type: 'json' }
 
 const enabledFeaturesStaticObj = enabledFeaturesRaw as Omit<typeof enabledFeaturesRaw, '$schema'>
diff --git a/packages/common/feature-flags.tsx b/packages/common/feature-flags.tsx
index 83daf054d25..7a82f84a5e6 100644
--- a/packages/common/feature-flags.tsx
+++ b/packages/common/feature-flags.tsx
@@ -1,9 +1,9 @@
 'use client'
 
+import { components } from 'api-types'
 import { FlagValues } from 'flags/react'
 import { createContext, PropsWithChildren, useContext, useEffect, useRef, useState } from 'react'
 
-import { components } from 'api-types'
 import { useAuth } from './auth'
 import { getFlags as getDefaultConfigCatFlags } from './configcat'
 import { hasConsented } from './consent-state'
diff --git a/packages/common/hooks/useConstant.ts b/packages/common/hooks/useConstant.ts
index 9dd5723165d..f2f7d449d0e 100644
--- a/packages/common/hooks/useConstant.ts
+++ b/packages/common/hooks/useConstant.ts
@@ -1,7 +1,6 @@
 'use client'
 
 // based on https://github.com/Andarist/use-constant
-
 import { useRef } from 'react'
 
 type ResultBox<T> = { v: T }
diff --git a/packages/common/hooks/useDebounce.tsx b/packages/common/hooks/useDebounce.tsx
index 09203da0d1b..226a65fd2fd 100644
--- a/packages/common/hooks/useDebounce.tsx
+++ b/packages/common/hooks/useDebounce.tsx
@@ -1,7 +1,7 @@
 'use client'
 
-import { useEffect, useMemo, useRef } from 'react'
 import { debounce } from 'lodash'
+import { useEffect, useMemo, useRef } from 'react'
 
 export const useDebounce = (callback: () => void, delay: number = 1000) => {
   const ref = useRef<any>()
diff --git a/packages/common/hooks/useEffectEvent.ts b/packages/common/hooks/useEffectEvent.ts
index 9f7dab3625e..d3e2dc78569 100644
--- a/packages/common/hooks/useEffectEvent.ts
+++ b/packages/common/hooks/useEffectEvent.ts
@@ -1,4 +1,5 @@
 'use client'
+
 import { useCallback, useRef } from 'react'
 
 /**
diff --git a/packages/common/hooks/useTelemetryCookie.tsx b/packages/common/hooks/useTelemetryCookie.tsx
index f6c563a2ed7..8e02fd14a0f 100644
--- a/packages/common/hooks/useTelemetryCookie.tsx
+++ b/packages/common/hooks/useTelemetryCookie.tsx
@@ -1,4 +1,5 @@
 import { useEffect } from 'react'
+
 import { LOCAL_STORAGE_KEYS } from '../constants'
 import { getSharedTelemetryData, getTelemetryCookieOptions } from '../telemetry-utils'
 
diff --git a/packages/common/hooks/useThemeSandbox.tsx b/packages/common/hooks/useThemeSandbox.tsx
index 103cce7fd87..a27e04ed322 100644
--- a/packages/common/hooks/useThemeSandbox.tsx
+++ b/packages/common/hooks/useThemeSandbox.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import { useEffect, useState } from 'react'
+
 import { IS_PROD } from '../constants'
 
 const defaultDark: { [name: string]: string } = {
diff --git a/packages/common/posthog-client.ts b/packages/common/posthog-client.ts
index 0c058984e64..cd7035116d2 100644
--- a/packages/common/posthog-client.ts
+++ b/packages/common/posthog-client.ts
@@ -1,5 +1,4 @@
-import posthog from 'posthog-js'
-import { PostHogConfig } from 'posthog-js'
+import posthog, { PostHogConfig } from 'posthog-js'
 
 // Limit the max number of queued events
 // (e.g. if a user navigates around a lot before accepting consent)
diff --git a/packages/common/telemetry-utils.ts b/packages/common/telemetry-utils.ts
index 604d6da7572..814154a69e4 100644
--- a/packages/common/telemetry-utils.ts
+++ b/packages/common/telemetry-utils.ts
@@ -1,6 +1,5 @@
+import { IS_PROD, LOCAL_STORAGE_KEYS } from './constants'
 import { isBrowser } from './helpers'
-import { IS_PROD } from './constants'
-import { LOCAL_STORAGE_KEYS } from './constants'
 
 export function getTelemetryCookieOptions() {
   if (typeof window === 'undefined') return 'path=/; SameSite=Lax'
diff --git a/packages/common/telemetry.tsx b/packages/common/telemetry.tsx
index 07bf296cfba..a1965ed9ff3 100644
--- a/packages/common/telemetry.tsx
+++ b/packages/common/telemetry.tsx
@@ -6,6 +6,7 @@ import { usePathname } from 'next/navigation'
 import Script from 'next/script'
 import { useCallback, useEffect, useRef } from 'react'
 import { useLatest } from 'react-use'
+
 import { useUser } from './auth'
 import { hasConsented } from './consent-state'
 import { IS_PLATFORM, IS_PROD, LOCAL_STORAGE_KEYS } from './constants'
@@ -13,13 +14,13 @@ import { useFeatureFlags } from './feature-flags'
 import { post } from './fetchWrappers'
 import { ensurePlatformSuffix, isBrowser } from './helpers'
 import { useParams, useTelemetryCookie } from './hooks'
+import { posthogClient } from './posthog-client'
 import { TelemetryEvent } from './telemetry-constants'
 import {
   clearTelemetryDataCookie,
   getSharedTelemetryData,
   getTelemetryCookieOptions,
 } from './telemetry-utils'
-import { posthogClient } from './posthog-client'
 
 export { posthogClient }
 
diff --git a/packages/generator/helpers.ts b/packages/generator/helpers.ts
index 6bb5653e808..75fbf913df1 100644
--- a/packages/generator/helpers.ts
+++ b/packages/generator/helpers.ts
@@ -1,5 +1,5 @@
-import * as _ from 'lodash'
 import * as fs from 'fs'
+import * as _ from 'lodash'
 
 export const slugify = (text: string) => {
   return text
diff --git a/packages/generator/tsdoc.ts b/packages/generator/tsdoc.ts
index a362c345ef1..dbf5483f473 100644
--- a/packages/generator/tsdoc.ts
+++ b/packages/generator/tsdoc.ts
@@ -1,8 +1,9 @@
-import { writeToDisk } from './helpers'
-import stringify from 'json-stringify-safe'
-import { parseArgs } from 'node:util'
 import fs from 'fs'
 import { strict as assert } from 'node:assert'
+import { parseArgs } from 'node:util'
+import stringify from 'json-stringify-safe'
+
+import { writeToDisk } from './helpers'
 
 const args = parseArgs({
   options: {
diff --git a/packages/icons/README.md b/packages/icons/README.md
index 80bb01cf2ff..e0a6e67c998 100644
--- a/packages/icons/README.md
+++ b/packages/icons/README.md
@@ -9,7 +9,7 @@ This package contains custom Supabase icons that can be used alongside other ico
 ## Quick start
 
 ```jsx
-import { BucketAdd, Database, Auth } from 'icons'
+import { Auth, BucketAdd, Database } from 'icons'
 
 function MyComponent() {
   return (
diff --git a/packages/icons/src/createSupabaseIcon.ts b/packages/icons/src/createSupabaseIcon.ts
index ae99cc600f5..58a9aa35bb1 100644
--- a/packages/icons/src/createSupabaseIcon.ts
+++ b/packages/icons/src/createSupabaseIcon.ts
@@ -1,11 +1,12 @@
 import {
-  forwardRef,
   createElement,
-  ReactSVG,
-  SVGProps,
+  forwardRef,
   ForwardRefExoticComponent,
+  ReactSVG,
   RefAttributes,
+  SVGProps,
 } from 'react'
+
 import defaultAttributes from './defaultAttributes'
 
 export type IconNode = [elementName: keyof ReactSVG, attrs: Record<string, string>][]
diff --git a/packages/pg-meta/src/index.ts b/packages/pg-meta/src/index.ts
index 441cc388bc8..b4f962ad8b3 100644
--- a/packages/pg-meta/src/index.ts
+++ b/packages/pg-meta/src/index.ts
@@ -1,21 +1,21 @@
-import roles from './pg-meta-roles'
+import columnPrivileges from './pg-meta-column-privileges'
 import columns from './pg-meta-columns'
-import schemas from './pg-meta-schemas'
-import * as tables from './pg-meta-tables'
-import * as functions from './pg-meta-functions'
-import tablePrivileges from './pg-meta-table-privileges'
-import publications from './pg-meta-publications'
-import extensions from './pg-meta-extensions'
 import config from './pg-meta-config'
-import materializedViews from './pg-meta-materialized-views'
+import extensions from './pg-meta-extensions'
 import foreignTables from './pg-meta-foreign-tables'
-import views from './pg-meta-views'
+import * as functions from './pg-meta-functions'
+import indexes from './pg-meta-indexes'
+import materializedViews from './pg-meta-materialized-views'
 import policies from './pg-meta-policies'
+import publications from './pg-meta-publications'
+import roles from './pg-meta-roles'
+import schemas from './pg-meta-schemas'
+import tablePrivileges from './pg-meta-table-privileges'
+import * as tables from './pg-meta-tables'
 import triggers from './pg-meta-triggers'
 import types from './pg-meta-types'
 import version from './pg-meta-version'
-import indexes from './pg-meta-indexes'
-import columnPrivileges from './pg-meta-column-privileges'
+import views from './pg-meta-views'
 import * as query from './query/index'
 import { getIndexStatusesSQL, USER_SEARCH_INDEXES } from './sql/studio/get-index-statuses'
 import { getIndexWorkerStatusSQL } from './sql/studio/get-index-worker-status'
diff --git a/packages/pg-meta/src/pg-meta-column-privileges.ts b/packages/pg-meta/src/pg-meta-column-privileges.ts
index d3e79b885be..ac044f58e4f 100644
--- a/packages/pg-meta/src/pg-meta-column-privileges.ts
+++ b/packages/pg-meta/src/pg-meta-column-privileges.ts
@@ -1,8 +1,9 @@
-import { ident, literal } from './pg-format'
 import { z } from 'zod'
-import { COLUMN_PRIVILEGES_SQL } from './sql/column-privileges'
-import { filterByList } from './helpers'
+
 import { DEFAULT_SYSTEM_SCHEMAS } from './constants'
+import { filterByList } from './helpers'
+import { ident, literal } from './pg-format'
+import { COLUMN_PRIVILEGES_SQL } from './sql/column-privileges'
 
 const pgColumnPrivilegeGrant = z.object({
   grantor: z.string(),
diff --git a/packages/pg-meta/src/pg-meta-columns.ts b/packages/pg-meta/src/pg-meta-columns.ts
index b1c7ca2c1f1..e0f646abb42 100644
--- a/packages/pg-meta/src/pg-meta-columns.ts
+++ b/packages/pg-meta/src/pg-meta-columns.ts
@@ -1,8 +1,9 @@
+import { z } from 'zod'
+
 import { DEFAULT_SYSTEM_SCHEMAS } from './constants'
 import { filterByList } from './helpers'
 import { ident, literal } from './pg-format'
 import { COLUMNS_SQL } from './sql/columns'
-import { z } from 'zod'
 
 const pgColumnZod = z.object({
   id: z.string(),
diff --git a/packages/pg-meta/src/pg-meta-config.ts b/packages/pg-meta/src/pg-meta-config.ts
index ca31198b843..3a688c31e1c 100644
--- a/packages/pg-meta/src/pg-meta-config.ts
+++ b/packages/pg-meta/src/pg-meta-config.ts
@@ -1,4 +1,5 @@
 import { z } from 'zod'
+
 import { CONFIG_SQL } from './sql/config'
 
 const pgConfigZod = z.object({
diff --git a/packages/pg-meta/src/pg-meta-extensions.ts b/packages/pg-meta/src/pg-meta-extensions.ts
index d3482019068..096bf257af7 100644
--- a/packages/pg-meta/src/pg-meta-extensions.ts
+++ b/packages/pg-meta/src/pg-meta-extensions.ts
@@ -1,6 +1,7 @@
+import { z } from 'zod'
+
 import { ident, literal } from './pg-format'
 import { EXTENSIONS_SQL } from './sql/extensions'
-import { z } from 'zod'
 
 const pgExtensionZod = z.object({
   name: z.string(),
diff --git a/packages/pg-meta/src/pg-meta-foreign-tables.ts b/packages/pg-meta/src/pg-meta-foreign-tables.ts
index 0fbe882e848..2edda93f5d2 100644
--- a/packages/pg-meta/src/pg-meta-foreign-tables.ts
+++ b/packages/pg-meta/src/pg-meta-foreign-tables.ts
@@ -1,4 +1,5 @@
 import { z } from 'zod'
+
 import { DEFAULT_SYSTEM_SCHEMAS } from './constants'
 import { coalesceRowsToArray, filterByList } from './helpers'
 import { ident, literal } from './pg-format'
diff --git a/packages/pg-meta/src/pg-meta-functions.ts b/packages/pg-meta/src/pg-meta-functions.ts
index db65046f5c5..e9c6d09c1c0 100644
--- a/packages/pg-meta/src/pg-meta-functions.ts
+++ b/packages/pg-meta/src/pg-meta-functions.ts
@@ -1,7 +1,8 @@
-import { ident, literal } from './pg-format'
 import { z } from 'zod'
+
 import { DEFAULT_SYSTEM_SCHEMAS } from './constants'
 import { filterByList } from './helpers'
+import { ident, literal } from './pg-format'
 import { FUNCTIONS_SQL } from './sql/functions'
 
 export const pgFunctionZod = z.object({
diff --git a/packages/pg-meta/src/pg-meta-indexes.ts b/packages/pg-meta/src/pg-meta-indexes.ts
index 1a2b854c7c5..3fd4f12487a 100644
--- a/packages/pg-meta/src/pg-meta-indexes.ts
+++ b/packages/pg-meta/src/pg-meta-indexes.ts
@@ -1,8 +1,9 @@
-import { literal } from './pg-format'
+import { z } from 'zod'
+
 import { DEFAULT_SYSTEM_SCHEMAS } from './constants'
 import { filterByList } from './helpers'
+import { literal } from './pg-format'
 import { INDEXES_SQL } from './sql/indexes'
-import { z } from 'zod'
 
 const pgIndexZod = z.object({
   id: z.number(),
diff --git a/packages/pg-meta/src/pg-meta-materialized-views.ts b/packages/pg-meta/src/pg-meta-materialized-views.ts
index 2fd2f4fed6c..9a92cbc0c35 100644
--- a/packages/pg-meta/src/pg-meta-materialized-views.ts
+++ b/packages/pg-meta/src/pg-meta-materialized-views.ts
@@ -1,10 +1,11 @@
-import { literal, ident } from './pg-format'
 import { z } from 'zod'
+
 import { DEFAULT_SYSTEM_SCHEMAS } from './constants'
-import { filterByList, coalesceRowsToArray } from './helpers'
-import { MATERIALIZED_VIEWS_SQL } from './sql/materialized-views'
-import { COLUMNS_SQL } from './sql/columns'
+import { coalesceRowsToArray, filterByList } from './helpers'
+import { ident, literal } from './pg-format'
 import { pgColumnArrayZod } from './pg-meta-columns'
+import { COLUMNS_SQL } from './sql/columns'
+import { MATERIALIZED_VIEWS_SQL } from './sql/materialized-views'
 
 export const pgMaterializedViewZod = z.object({
   id: z.number(),
diff --git a/packages/pg-meta/src/pg-meta-policies.ts b/packages/pg-meta/src/pg-meta-policies.ts
index 1951c37f0cd..d8a6e00112e 100644
--- a/packages/pg-meta/src/pg-meta-policies.ts
+++ b/packages/pg-meta/src/pg-meta-policies.ts
@@ -1,8 +1,9 @@
+import { z } from 'zod'
+
 import { DEFAULT_SYSTEM_SCHEMAS } from './constants'
 import { filterByList } from './helpers'
 import { ident, literal } from './pg-format'
 import { POLICIES_SQL } from './sql/policies'
-import { z } from 'zod'
 
 const pgPolicyZod = z.object({
   id: z.number(),
diff --git a/packages/pg-meta/src/pg-meta-publications.ts b/packages/pg-meta/src/pg-meta-publications.ts
index 91915ffe018..bb61a896082 100644
--- a/packages/pg-meta/src/pg-meta-publications.ts
+++ b/packages/pg-meta/src/pg-meta-publications.ts
@@ -1,6 +1,7 @@
+import { z } from 'zod'
+
 import { ident, literal } from './pg-format'
 import { PUBLICATIONS_SQL } from './sql/publications'
-import { z } from 'zod'
 
 const pgPublicationTableZod = z.object({
   id: z.number().optional(),
diff --git a/packages/pg-meta/src/pg-meta-roles.ts b/packages/pg-meta/src/pg-meta-roles.ts
index 8e1936f7054..5d4a7edcf5b 100644
--- a/packages/pg-meta/src/pg-meta-roles.ts
+++ b/packages/pg-meta/src/pg-meta-roles.ts
@@ -1,6 +1,7 @@
+import { z } from 'zod'
+
 import { ident, literal } from './pg-format'
 import { ROLES_SQL } from './sql/roles'
-import { z } from 'zod'
 
 const pgRoleZod = z.object({
   id: z.number(),
diff --git a/packages/pg-meta/src/pg-meta-schemas.ts b/packages/pg-meta/src/pg-meta-schemas.ts
index f66506244c7..17cf6ea3631 100644
--- a/packages/pg-meta/src/pg-meta-schemas.ts
+++ b/packages/pg-meta/src/pg-meta-schemas.ts
@@ -1,8 +1,9 @@
-import { ident, literal } from './pg-format'
-import { DEFAULT_SYSTEM_SCHEMAS } from './constants'
-import { SCHEMAS_SQL } from './sql/schemas'
 import { z } from 'zod'
 
+import { DEFAULT_SYSTEM_SCHEMAS } from './constants'
+import { ident, literal } from './pg-format'
+import { SCHEMAS_SQL } from './sql/schemas'
+
 const pgSchemaZod = z.object({
   id: z.number(),
   name: z.string(),
diff --git a/packages/pg-meta/src/pg-meta-table-privileges.ts b/packages/pg-meta/src/pg-meta-table-privileges.ts
index 8b08178618d..d72afa57c96 100644
--- a/packages/pg-meta/src/pg-meta-table-privileges.ts
+++ b/packages/pg-meta/src/pg-meta-table-privileges.ts
@@ -1,8 +1,9 @@
-import { ident, literal } from './pg-format'
-import { DEFAULT_SYSTEM_SCHEMAS } from './constants'
-import { TABLE_PRIVILEGES_SQL } from './sql/table-privileges'
 import { z } from 'zod'
+
+import { DEFAULT_SYSTEM_SCHEMAS } from './constants'
 import { filterByList } from './helpers'
+import { ident, literal } from './pg-format'
+import { TABLE_PRIVILEGES_SQL } from './sql/table-privileges'
 
 const pgTablePrivilegesZod = z.object({
   relation_id: z.number(),
diff --git a/packages/pg-meta/src/pg-meta-tables.ts b/packages/pg-meta/src/pg-meta-tables.ts
index dd1faa265c0..88782ce1a4f 100644
--- a/packages/pg-meta/src/pg-meta-tables.ts
+++ b/packages/pg-meta/src/pg-meta-tables.ts
@@ -1,4 +1,5 @@
 import { z } from 'zod'
+
 import { DEFAULT_SYSTEM_SCHEMAS } from './constants'
 import { coalesceRowsToArray, filterByList } from './helpers'
 import { ident, literal } from './pg-format'
diff --git a/packages/pg-meta/src/pg-meta-triggers.ts b/packages/pg-meta/src/pg-meta-triggers.ts
index a6042a32f50..5bae66efa16 100644
--- a/packages/pg-meta/src/pg-meta-triggers.ts
+++ b/packages/pg-meta/src/pg-meta-triggers.ts
@@ -1,7 +1,8 @@
-import { ident, literal } from './pg-format'
 import { z } from 'zod'
+
 import { DEFAULT_SYSTEM_SCHEMAS } from './constants'
 import { filterByList } from './helpers'
+import { ident, literal } from './pg-format'
 import { TRIGGERS_SQL } from './sql/triggers'
 
 type TriggerIdentifier = Pick<PGTrigger, 'id'> | Pick<PGTrigger, 'name' | 'schema' | 'table'>
diff --git a/packages/pg-meta/src/pg-meta-types.ts b/packages/pg-meta/src/pg-meta-types.ts
index 2a3316f902f..33371f3d5d9 100644
--- a/packages/pg-meta/src/pg-meta-types.ts
+++ b/packages/pg-meta/src/pg-meta-types.ts
@@ -1,4 +1,5 @@
 import { z } from 'zod'
+
 import { DEFAULT_SYSTEM_SCHEMAS } from './constants'
 import { filterByList } from './helpers'
 import { TYPES_SQL } from './sql/types'
diff --git a/packages/pg-meta/src/pg-meta-version.ts b/packages/pg-meta/src/pg-meta-version.ts
index 293025a75a5..443da64f13b 100644
--- a/packages/pg-meta/src/pg-meta-version.ts
+++ b/packages/pg-meta/src/pg-meta-version.ts
@@ -1,4 +1,5 @@
 import { z } from 'zod'
+
 import { VERSION_SQL } from './sql/version'
 
 export const pgVersionZod = z.object({
diff --git a/packages/pg-meta/src/pg-meta-views.ts b/packages/pg-meta/src/pg-meta-views.ts
index 7db45e321d4..849a2104a9a 100644
--- a/packages/pg-meta/src/pg-meta-views.ts
+++ b/packages/pg-meta/src/pg-meta-views.ts
@@ -1,10 +1,11 @@
-import { literal, ident } from './pg-format'
 import { z } from 'zod'
+
 import { DEFAULT_SYSTEM_SCHEMAS } from './constants'
-import { filterByList, coalesceRowsToArray } from './helpers'
-import { VIEWS_SQL } from './sql/views'
-import { COLUMNS_SQL } from './sql/columns'
+import { coalesceRowsToArray, filterByList } from './helpers'
+import { ident, literal } from './pg-format'
 import { pgColumnArrayZod } from './pg-meta-columns'
+import { COLUMNS_SQL } from './sql/columns'
+import { VIEWS_SQL } from './sql/views'
 
 export const pgViewZod = z.object({
   id: z.number(),
diff --git a/packages/pg-meta/src/query/QueryAction.ts b/packages/pg-meta/src/query/QueryAction.ts
index 82141c3abef..0f7bf30ddb7 100644
--- a/packages/pg-meta/src/query/QueryAction.ts
+++ b/packages/pg-meta/src/query/QueryAction.ts
@@ -1,5 +1,5 @@
-import type { QueryTable, Dictionary } from './types'
 import { IQueryFilter, QueryFilter } from './QueryFilter'
+import type { Dictionary, QueryTable } from './types'
 
 export interface IQueryAction {
   count: () => IQueryFilter
diff --git a/packages/pg-meta/src/query/QueryModifier.ts b/packages/pg-meta/src/query/QueryModifier.ts
index 644e6788c67..db429ed7ce3 100644
--- a/packages/pg-meta/src/query/QueryModifier.ts
+++ b/packages/pg-meta/src/query/QueryModifier.ts
@@ -1,4 +1,3 @@
-import type { Filter, QueryPagination, QueryTable, Sort, Dictionary } from './types'
 import {
   countQuery,
   deleteQuery,
@@ -7,6 +6,7 @@ import {
   truncateQuery,
   updateQuery,
 } from './Query.utils'
+import type { Dictionary, Filter, QueryPagination, QueryTable, Sort } from './types'
 
 export interface IQueryModifier {
   range: (from: number, to: number) => QueryModifier
diff --git a/packages/pg-meta/src/sql/studio/get-users-count.ts b/packages/pg-meta/src/sql/studio/get-users-count.ts
index 9a012de315a..790afd6691f 100644
--- a/packages/pg-meta/src/sql/studio/get-users-count.ts
+++ b/packages/pg-meta/src/sql/studio/get-users-count.ts
@@ -1,7 +1,7 @@
-import type { OptimizedSearchColumns } from './get-users-types'
-import { COUNT_ESTIMATE_SQL, THRESHOLD_COUNT } from './get-count-estimate'
-import { stringRange, prefixToUUID } from './get-users-common'
 import { literal } from '../../pg-format'
+import { COUNT_ESTIMATE_SQL, THRESHOLD_COUNT } from './get-count-estimate'
+import { prefixToUUID, stringRange } from './get-users-common'
+import type { OptimizedSearchColumns } from './get-users-types'
 
 export const USERS_COUNT_ESTIMATE_SQL = `select reltuples as estimate from pg_class where oid = 'auth.users'::regclass`
 
diff --git a/packages/pg-meta/test/column-privileges.test.ts b/packages/pg-meta/test/column-privileges.test.ts
index 35102651fde..9eb5ef2c93e 100644
--- a/packages/pg-meta/test/column-privileges.test.ts
+++ b/packages/pg-meta/test/column-privileges.test.ts
@@ -1,6 +1,7 @@
-import { expect, test, beforeAll, afterAll } from 'vitest'
+import { afterAll, beforeAll, expect, test } from 'vitest'
+
 import pgMeta from '../src/index'
-import { createTestDatabase, cleanupRoot } from './db/utils'
+import { cleanupRoot, createTestDatabase } from './db/utils'
 
 beforeAll(async () => {
   // Any global setup if needed
diff --git a/packages/pg-meta/test/columns.test.ts b/packages/pg-meta/test/columns.test.ts
index ea8ae76b3f8..d7d80726565 100644
--- a/packages/pg-meta/test/columns.test.ts
+++ b/packages/pg-meta/test/columns.test.ts
@@ -1,6 +1,7 @@
-import { test, beforeAll, afterAll, expect, describe } from 'vitest'
+import { afterAll, beforeAll, describe, expect, test } from 'vitest'
+
 import pgMeta from '../src/index'
-import { createTestDatabase, cleanupRoot } from './db/utils'
+import { cleanupRoot, createTestDatabase } from './db/utils'
 
 beforeAll(async () => {
   // Any global setup if needed
diff --git a/packages/pg-meta/test/config.test.ts b/packages/pg-meta/test/config.test.ts
index f3ca4bd818b..988f7043084 100644
--- a/packages/pg-meta/test/config.test.ts
+++ b/packages/pg-meta/test/config.test.ts
@@ -1,6 +1,7 @@
-import { expect, test, afterAll } from 'vitest'
+import { afterAll, expect, test } from 'vitest'
+
 import pgMeta from '../src/index'
-import { createTestDatabase, cleanupRoot } from './db/utils'
+import { cleanupRoot, createTestDatabase } from './db/utils'
 
 afterAll(async () => {
   await cleanupRoot()
diff --git a/packages/pg-meta/test/db/utils.ts b/packages/pg-meta/test/db/utils.ts
index abd5b8a739a..7c6735ef968 100644
--- a/packages/pg-meta/test/db/utils.ts
+++ b/packages/pg-meta/test/db/utils.ts
@@ -1,5 +1,5 @@
-import pg, { Pool } from 'pg'
 import { randomUUID } from 'crypto'
+import pg, { Pool } from 'pg'
 import { parse as parseArray } from 'postgres-array'
 
 // Those types override are in sync with `postgres-meta` since the queries
diff --git a/packages/pg-meta/test/extensions.test.ts b/packages/pg-meta/test/extensions.test.ts
index b5f3cb1f921..8b54fb1f891 100644
--- a/packages/pg-meta/test/extensions.test.ts
+++ b/packages/pg-meta/test/extensions.test.ts
@@ -1,6 +1,7 @@
-import { expect, test, beforeAll, afterAll } from 'vitest'
+import { afterAll, beforeAll, expect, test } from 'vitest'
+
 import pgMeta from '../src/index'
-import { createTestDatabase, cleanupRoot } from './db/utils'
+import { cleanupRoot, createTestDatabase } from './db/utils'
 
 beforeAll(async () => {
   // Any global setup if needed
diff --git a/packages/pg-meta/test/foreign-tables.test.ts b/packages/pg-meta/test/foreign-tables.test.ts
index 665c75b73dc..d656e56947a 100644
--- a/packages/pg-meta/test/foreign-tables.test.ts
+++ b/packages/pg-meta/test/foreign-tables.test.ts
@@ -1,4 +1,5 @@
 import { afterAll, beforeAll, expect, test } from 'vitest'
+
 import pgMeta from '../src/index'
 import { cleanupRoot, createTestDatabase } from './db/utils'
 
diff --git a/packages/pg-meta/test/functions.test.ts b/packages/pg-meta/test/functions.test.ts
index 82729891915..0d9f7d6c036 100644
--- a/packages/pg-meta/test/functions.test.ts
+++ b/packages/pg-meta/test/functions.test.ts
@@ -1,6 +1,7 @@
-import { expect, test, beforeAll, afterAll } from 'vitest'
+import { afterAll, beforeAll, expect, test } from 'vitest'
+
 import pgMeta from '../src/index'
-import { createTestDatabase, cleanupRoot } from './db/utils'
+import { cleanupRoot, createTestDatabase } from './db/utils'
 
 beforeAll(async () => {
   // Any global setup if needed
diff --git a/packages/pg-meta/test/indexes.test.ts b/packages/pg-meta/test/indexes.test.ts
index 306e7d3774e..be1e02425dd 100644
--- a/packages/pg-meta/test/indexes.test.ts
+++ b/packages/pg-meta/test/indexes.test.ts
@@ -1,6 +1,7 @@
-import { expect, test, beforeAll, afterAll } from 'vitest'
+import { afterAll, beforeAll, expect, test } from 'vitest'
+
 import pgMeta from '../src/index'
-import { createTestDatabase, cleanupRoot } from './db/utils'
+import { cleanupRoot, createTestDatabase } from './db/utils'
 
 beforeAll(async () => {
   // Any global setup if needed
diff --git a/packages/pg-meta/test/materialized-views.test.ts b/packages/pg-meta/test/materialized-views.test.ts
index 01120b31b2e..616dd626c02 100644
--- a/packages/pg-meta/test/materialized-views.test.ts
+++ b/packages/pg-meta/test/materialized-views.test.ts
@@ -1,6 +1,7 @@
-import { expect, test, beforeAll, afterAll } from 'vitest'
+import { afterAll, beforeAll, expect, test } from 'vitest'
+
 import pgMeta from '../src/index'
-import { createTestDatabase, cleanupRoot } from './db/utils'
+import { cleanupRoot, createTestDatabase } from './db/utils'
 
 beforeAll(async () => {
   // Any global setup if needed
diff --git a/packages/pg-meta/test/pg-format.test.ts b/packages/pg-meta/test/pg-format.test.ts
index 23eca848f26..13628fc112f 100644
--- a/packages/pg-meta/test/pg-format.test.ts
+++ b/packages/pg-meta/test/pg-format.test.ts
@@ -1,4 +1,5 @@
 import { describe, expect, test } from 'vitest'
+
 import { ident, literal } from '../src/pg-format'
 
 describe('pg-format', () => {
diff --git a/packages/pg-meta/test/policies.test.ts b/packages/pg-meta/test/policies.test.ts
index 00b8c97cdaf..1d31e70f314 100644
--- a/packages/pg-meta/test/policies.test.ts
+++ b/packages/pg-meta/test/policies.test.ts
@@ -1,7 +1,7 @@
-import { expect, test } from 'vitest'
+import { afterAll, expect, test } from 'vitest'
+
 import pgMeta from '../src/index'
-import { createTestDatabase, cleanupRoot } from './db/utils'
-import { afterAll } from 'vitest'
+import { cleanupRoot, createTestDatabase } from './db/utils'
 
 afterAll(async () => {
   await cleanupRoot()
diff --git a/packages/pg-meta/test/publications.test.ts b/packages/pg-meta/test/publications.test.ts
index cbd5ef40cee..38a827f7dd1 100644
--- a/packages/pg-meta/test/publications.test.ts
+++ b/packages/pg-meta/test/publications.test.ts
@@ -1,6 +1,7 @@
-import { expect, test, beforeAll, afterAll } from 'vitest'
+import { afterAll, beforeAll, expect, test } from 'vitest'
+
 import pgMeta from '../src/index'
-import { createTestDatabase, cleanupRoot } from './db/utils'
+import { cleanupRoot, createTestDatabase } from './db/utils'
 
 beforeAll(async () => {
   // Any global setup if needed
diff --git a/packages/pg-meta/test/query/advanced-query.test.ts b/packages/pg-meta/test/query/advanced-query.test.ts
index 3abaf6dad79..a42ced8e414 100644
--- a/packages/pg-meta/test/query/advanced-query.test.ts
+++ b/packages/pg-meta/test/query/advanced-query.test.ts
@@ -1,4 +1,5 @@
 import { afterAll, describe, expect, test } from 'vitest'
+
 import { Query } from '../../src/query/Query'
 import { cleanupRoot, createTestDatabase } from '../db/utils'
 
diff --git a/packages/pg-meta/test/query/query.test.ts b/packages/pg-meta/test/query/query.test.ts
index b53929d026f..cfd4a77daaf 100644
--- a/packages/pg-meta/test/query/query.test.ts
+++ b/packages/pg-meta/test/query/query.test.ts
@@ -1,4 +1,5 @@
 import { describe, expect, test } from 'vitest'
+
 import { Query } from '../../src/query/Query'
 import * as QueryUtils from '../../src/query/Query.utils'
 import { QueryAction } from '../../src/query/QueryAction'
diff --git a/packages/pg-meta/test/query/table-row-query.test.ts b/packages/pg-meta/test/query/table-row-query.test.ts
index 3d6b55e837e..caab0e86933 100644
--- a/packages/pg-meta/test/query/table-row-query.test.ts
+++ b/packages/pg-meta/test/query/table-row-query.test.ts
@@ -1,4 +1,5 @@
 import { afterAll, beforeAll, describe, expect, test } from 'vitest'
+
 import pgMeta from '../../src/index'
 import { Filter, Sort } from '../../src/query'
 import { getDefaultOrderByColumns, getTableRowsSql } from '../../src/query/table-row-query'
diff --git a/packages/pg-meta/test/roles.test.ts b/packages/pg-meta/test/roles.test.ts
index 1d4a90fb578..e47d00819d9 100644
--- a/packages/pg-meta/test/roles.test.ts
+++ b/packages/pg-meta/test/roles.test.ts
@@ -1,6 +1,7 @@
-import { expect, test, beforeAll, afterAll } from 'vitest'
+import { afterAll, beforeAll, expect, test } from 'vitest'
+
 import pgMeta from '../src/index'
-import { createTestDatabase, cleanupRoot } from './db/utils'
+import { cleanupRoot, createTestDatabase } from './db/utils'
 
 beforeAll(async () => {
   // Any global setup if needed
diff --git a/packages/pg-meta/test/schemas.test.ts b/packages/pg-meta/test/schemas.test.ts
index a973770295c..9311f85e2a1 100644
--- a/packages/pg-meta/test/schemas.test.ts
+++ b/packages/pg-meta/test/schemas.test.ts
@@ -1,6 +1,7 @@
-import { expect, test, beforeAll, afterAll } from 'vitest'
+import { afterAll, beforeAll, expect, test } from 'vitest'
+
 import pgMeta from '../src/index'
-import { createTestDatabase, cleanupRoot } from './db/utils'
+import { cleanupRoot, createTestDatabase } from './db/utils'
 
 beforeAll(async () => {
   // Any global setup if needed
diff --git a/packages/pg-meta/test/sql/studio/get-users-common.test.ts b/packages/pg-meta/test/sql/studio/get-users-common.test.ts
index 46020f9b451..fc00c2d03da 100644
--- a/packages/pg-meta/test/sql/studio/get-users-common.test.ts
+++ b/packages/pg-meta/test/sql/studio/get-users-common.test.ts
@@ -1,4 +1,5 @@
-import { expect, test, describe } from 'vitest'
+import { describe, expect, test } from 'vitest'
+
 import { prefixToUUID, stringRange } from '../../../src/sql/studio/get-users-common'
 
 describe('prefixToUUID', () => {
diff --git a/packages/pg-meta/test/sql/studio/get-users-count.test.ts b/packages/pg-meta/test/sql/studio/get-users-count.test.ts
index 0c6654faa16..7c45a2fc838 100644
--- a/packages/pg-meta/test/sql/studio/get-users-count.test.ts
+++ b/packages/pg-meta/test/sql/studio/get-users-count.test.ts
@@ -1,7 +1,8 @@
-import { expect, test, afterAll } from 'vitest'
-import { createTestDatabase, cleanupRoot, createDatabaseWithAuthSchema } from '../../db/utils'
-import { getUsersCountSQL } from '../../../src/sql/studio/get-users-count'
 import { randomUUID } from 'crypto'
+import { afterAll, expect, test } from 'vitest'
+
+import { getUsersCountSQL } from '../../../src/sql/studio/get-users-count'
+import { cleanupRoot, createDatabaseWithAuthSchema, createTestDatabase } from '../../db/utils'
 
 afterAll(async () => {
   await cleanupRoot()
diff --git a/packages/pg-meta/test/sql/studio/get-users-paginated.test.ts b/packages/pg-meta/test/sql/studio/get-users-paginated.test.ts
index 5cbf7c927ef..2e876ab4b8a 100644
--- a/packages/pg-meta/test/sql/studio/get-users-paginated.test.ts
+++ b/packages/pg-meta/test/sql/studio/get-users-paginated.test.ts
@@ -1,7 +1,8 @@
-import { expect, test, afterAll } from 'vitest'
-import { createTestDatabase, cleanupRoot, createDatabaseWithAuthSchema } from '../../db/utils'
-import { getPaginatedUsersSQL } from '../../../src/sql/studio/get-users-paginated'
 import { randomUUID } from 'crypto'
+import { afterAll, expect, test } from 'vitest'
+
+import { getPaginatedUsersSQL } from '../../../src/sql/studio/get-users-paginated'
+import { cleanupRoot, createDatabaseWithAuthSchema, createTestDatabase } from '../../db/utils'
 
 afterAll(async () => {
   await cleanupRoot()
diff --git a/packages/pg-meta/test/table-privileges.test.ts b/packages/pg-meta/test/table-privileges.test.ts
index 7bf065d28ad..d7ac82d0cd4 100644
--- a/packages/pg-meta/test/table-privileges.test.ts
+++ b/packages/pg-meta/test/table-privileges.test.ts
@@ -1,6 +1,7 @@
-import { expect, test, beforeAll, afterAll } from 'vitest'
+import { afterAll, beforeAll, expect, test } from 'vitest'
+
 import pgMeta from '../src/index'
-import { createTestDatabase, cleanupRoot } from './db/utils'
+import { cleanupRoot, createTestDatabase } from './db/utils'
 
 beforeAll(async () => {
   // Any global setup if needed
diff --git a/packages/pg-meta/test/tables.test.ts b/packages/pg-meta/test/tables.test.ts
index c9616541ff3..0f1868195eb 100644
--- a/packages/pg-meta/test/tables.test.ts
+++ b/packages/pg-meta/test/tables.test.ts
@@ -1,4 +1,5 @@
 import { afterAll, beforeAll, expect, test } from 'vitest'
+
 import pgMeta from '../src/index'
 import { cleanupRoot, createTestDatabase } from './db/utils'
 
diff --git a/packages/pg-meta/test/triggers.test.ts b/packages/pg-meta/test/triggers.test.ts
index aeba1ed3907..04ddd382c16 100644
--- a/packages/pg-meta/test/triggers.test.ts
+++ b/packages/pg-meta/test/triggers.test.ts
@@ -1,6 +1,7 @@
-import { expect, test, beforeAll, afterAll } from 'vitest'
+import { afterAll, beforeAll, expect, test } from 'vitest'
+
 import pgMeta from '../src/index'
-import { createTestDatabase, cleanupRoot } from './db/utils'
+import { cleanupRoot, createTestDatabase } from './db/utils'
 
 beforeAll(async () => {
   // Any global setup if needed
diff --git a/packages/pg-meta/test/types.test.ts b/packages/pg-meta/test/types.test.ts
index 0a3480e4c42..20ff701170e 100644
--- a/packages/pg-meta/test/types.test.ts
+++ b/packages/pg-meta/test/types.test.ts
@@ -1,6 +1,7 @@
-import { expect, test, beforeAll, afterAll } from 'vitest'
+import { afterAll, beforeAll, expect, test } from 'vitest'
+
 import pgMeta from '../src/index'
-import { createTestDatabase, cleanupRoot } from './db/utils'
+import { cleanupRoot, createTestDatabase } from './db/utils'
 
 beforeAll(async () => {
   // Any global setup if needed
diff --git a/packages/pg-meta/test/version.test.ts b/packages/pg-meta/test/version.test.ts
index b96ff49adc4..1c8afdddaee 100644
--- a/packages/pg-meta/test/version.test.ts
+++ b/packages/pg-meta/test/version.test.ts
@@ -1,6 +1,7 @@
-import { expect, test, beforeAll, afterAll } from 'vitest'
+import { afterAll, beforeAll, expect, test } from 'vitest'
+
 import pgMeta from '../src/index'
-import { createTestDatabase, cleanupRoot } from './db/utils'
+import { cleanupRoot, createTestDatabase } from './db/utils'
 
 beforeAll(async () => {
   // Any global setup if needed
diff --git a/packages/pg-meta/test/views.test.ts b/packages/pg-meta/test/views.test.ts
index 1611772c694..3c212b8c949 100644
--- a/packages/pg-meta/test/views.test.ts
+++ b/packages/pg-meta/test/views.test.ts
@@ -1,6 +1,7 @@
-import { expect, test, beforeAll, afterAll } from 'vitest'
+import { afterAll, beforeAll, expect, test } from 'vitest'
+
 import pgMeta from '../src/index'
-import { createTestDatabase, cleanupRoot } from './db/utils'
+import { cleanupRoot, createTestDatabase } from './db/utils'
 
 beforeAll(async () => {
   // Any global setup if needed
diff --git a/packages/shared-data/index.ts b/packages/shared-data/index.ts
index c1af4621d10..5e42f15bab3 100644
--- a/packages/shared-data/index.ts
+++ b/packages/shared-data/index.ts
@@ -1,4 +1,3 @@
-import config from './config'
 import {
   COMPUTE_BASELINE_IOPS,
   COMPUTE_BASELINE_THROUGHPUT,
@@ -7,6 +6,7 @@ import {
   COMPUTE_MAX_THROUGHPUT,
   computeInstanceAddonVariantIdSchema,
 } from './compute-disk-limits'
+import config from './config'
 import extensions from './extensions.json'
 import logConstants from './logConstants'
 import { plans, PricingInformation } from './plans'
diff --git a/packages/ui-patterns/src/AssistantChat/AssistantCommandsPopover.tsx b/packages/ui-patterns/src/AssistantChat/AssistantCommandsPopover.tsx
index 01656d475ca..5fe98937a90 100644
--- a/packages/ui-patterns/src/AssistantChat/AssistantCommandsPopover.tsx
+++ b/packages/ui-patterns/src/AssistantChat/AssistantCommandsPopover.tsx
@@ -2,8 +2,8 @@
 
 import {
   ComponentPropsWithoutRef,
-  ElementRef,
   createRef,
+  ElementRef,
   forwardRef,
   useEffect,
   useRef,
diff --git a/packages/ui-patterns/src/AuthenticatedDropdownMenu/index.tsx b/packages/ui-patterns/src/AuthenticatedDropdownMenu/index.tsx
index 7b5ed8c4e52..cbfc58c0d91 100644
--- a/packages/ui-patterns/src/AuthenticatedDropdownMenu/index.tsx
+++ b/packages/ui-patterns/src/AuthenticatedDropdownMenu/index.tsx
@@ -1,13 +1,15 @@
 'use client'
 
-import { Fragment } from 'react'
+import type { User } from '@supabase/supabase-js'
+import type { LucideIcon } from 'icons/src/createSupabaseIcon'
+import { UserIcon } from 'lucide-react'
+import { useTheme } from 'next-themes'
 import Image from 'next/image'
 import Link from 'next/link'
-import { useTheme } from 'next-themes'
-import { UserIcon } from 'lucide-react'
+import { Fragment } from 'react'
 import {
-  cn,
   buttonVariants,
+  cn,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -19,9 +21,6 @@ import {
   DropdownMenuTrigger,
 } from 'ui'
 import { themes } from 'ui/src/components/ThemeProvider/themes'
-
-import type { User } from '@supabase/supabase-js'
-import type { LucideIcon } from 'icons/src/createSupabaseIcon'
 import type { Theme } from 'ui/src/components/ThemeProvider/themes'
 
 interface Props {
diff --git a/packages/ui-patterns/src/Banners/AnnouncementBanner.tsx b/packages/ui-patterns/src/Banners/AnnouncementBanner.tsx
index fdee27fac09..120742c7632 100644
--- a/packages/ui-patterns/src/Banners/AnnouncementBanner.tsx
+++ b/packages/ui-patterns/src/Banners/AnnouncementBanner.tsx
@@ -1,6 +1,7 @@
 import { Announcement } from 'ui/src/layout/banners'
-import LW15Banner from './LW15Banner'
+
 import announcementJSON from './data.json'
+import LW15Banner from './LW15Banner'
 
 export const announcement = announcementJSON
 
diff --git a/packages/ui-patterns/src/Banners/Countdown.tsx b/packages/ui-patterns/src/Banners/Countdown.tsx
index 895ee0cbd47..e3b7f2f670b 100644
--- a/packages/ui-patterns/src/Banners/Countdown.tsx
+++ b/packages/ui-patterns/src/Banners/Countdown.tsx
@@ -1,4 +1,5 @@
 import Countdown from 'react-countdown'
+
 import { CountdownWidget } from '../CountdownWidget'
 
 const CountdownComponent = ({
diff --git a/packages/ui-patterns/src/Banners/LW15Banner.tsx b/packages/ui-patterns/src/Banners/LW15Banner.tsx
index 8e87d463ebb..8f7db5aaeab 100644
--- a/packages/ui-patterns/src/Banners/LW15Banner.tsx
+++ b/packages/ui-patterns/src/Banners/LW15Banner.tsx
@@ -1,9 +1,10 @@
 'use client'
 
-import { useRef, useEffect } from 'react'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
+import { useEffect, useRef } from 'react'
 import { Button } from 'ui/src/components/Button'
+
 import announcement from '../Banners/data.json'
 
 export function LW15Banner() {
diff --git a/packages/ui-patterns/src/Banners/index.ts b/packages/ui-patterns/src/Banners/index.ts
index 282b54e3a8d..1c69e4ddb70 100644
--- a/packages/ui-patterns/src/Banners/index.ts
+++ b/packages/ui-patterns/src/Banners/index.ts
@@ -1,4 +1,4 @@
-import { AnnouncementBanner, announcement } from './AnnouncementBanner'
+import { announcement, AnnouncementBanner } from './AnnouncementBanner'
 
 export { AnnouncementBanner, announcement }
 
diff --git a/packages/ui-patterns/src/Chart/charts/chart-bar.tsx b/packages/ui-patterns/src/Chart/charts/chart-bar.tsx
index a55bbf7001a..ccfd8485ade 100644
--- a/packages/ui-patterns/src/Chart/charts/chart-bar.tsx
+++ b/packages/ui-patterns/src/Chart/charts/chart-bar.tsx
@@ -1,19 +1,19 @@
 'use client'
 
-import { useState, ReactNode } from 'react'
+import dayjs from 'dayjs'
+import { useTheme } from 'next-themes'
+import { ReactNode, useState } from 'react'
 import {
   Bar,
+  CartesianGrid,
   Cell,
   BarChart as RechartBarChart,
+  ReferenceArea,
   XAxis,
   YAxis,
-  ReferenceArea,
-  CartesianGrid,
 } from 'recharts'
 import type { CategoricalChartState } from 'recharts/types/chart/types'
 import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent, cn } from 'ui'
-import dayjs from 'dayjs'
-import { useTheme } from 'next-themes'
 
 const CHART_COLORS = {
   TICK: 'hsl(var(--background-overlay-hover))',
diff --git a/packages/ui-patterns/src/Chart/charts/chart-line.tsx b/packages/ui-patterns/src/Chart/charts/chart-line.tsx
index b514fb97323..da1f193cf6a 100644
--- a/packages/ui-patterns/src/Chart/charts/chart-line.tsx
+++ b/packages/ui-patterns/src/Chart/charts/chart-line.tsx
@@ -1,18 +1,18 @@
 'use client'
 
-import { useState, ReactNode } from 'react'
+import dayjs from 'dayjs'
+import { useTheme } from 'next-themes'
+import { ReactNode, useState } from 'react'
 import {
   Area,
+  CartesianGrid,
   AreaChart as RechartAreaChart,
+  ReferenceArea,
   XAxis,
   YAxis,
-  ReferenceArea,
-  CartesianGrid,
 } from 'recharts'
 import type { CategoricalChartState } from 'recharts/types/chart/types'
 import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent, cn } from 'ui'
-import dayjs from 'dayjs'
-import { useTheme } from 'next-themes'
 
 const CHART_COLORS = {
   TICK: 'hsl(var(--background-overlay-hover))',
diff --git a/packages/ui-patterns/src/CommandMenu/api/Badges.tsx b/packages/ui-patterns/src/CommandMenu/api/Badges.tsx
index 1534561d3a2..8a1990687f3 100644
--- a/packages/ui-patterns/src/CommandMenu/api/Badges.tsx
+++ b/packages/ui-patterns/src/CommandMenu/api/Badges.tsx
@@ -1,5 +1,4 @@
 import { Microscope } from 'lucide-react'
-
 import { Badge } from 'ui'
 
 interface BadgeExperimentalProps {
diff --git a/packages/ui-patterns/src/CommandMenu/api/CommandInput.tsx b/packages/ui-patterns/src/CommandMenu/api/CommandInput.tsx
index eb1b20d12a2..b6d0a68dea6 100644
--- a/packages/ui-patterns/src/CommandMenu/api/CommandInput.tsx
+++ b/packages/ui-patterns/src/CommandMenu/api/CommandInput.tsx
@@ -1,10 +1,9 @@
 'use client'
 
+import { useBreakpoint, useDebounce } from 'common'
 import { forwardRef, useCallback, useEffect, useRef, useState } from 'react'
 import type React from 'react'
-
-import { useBreakpoint, useDebounce } from 'common'
-import { CommandInput_Shadcn_, cn } from 'ui'
+import { cn, CommandInput_Shadcn_ } from 'ui'
 
 import { useQuery, useSetQuery } from './hooks/queryHooks'
 import { useCommandMenuTelemetryContext } from './hooks/useCommandMenuTelemetryContext'
diff --git a/packages/ui-patterns/src/CommandMenu/api/CommandList.tsx b/packages/ui-patterns/src/CommandMenu/api/CommandList.tsx
index 851fbede951..3e9c39f3b6e 100644
--- a/packages/ui-patterns/src/CommandMenu/api/CommandList.tsx
+++ b/packages/ui-patterns/src/CommandMenu/api/CommandList.tsx
@@ -1,8 +1,7 @@
 'use client'
 
 import { forwardRef, useRef } from 'react'
-
-import { CommandList_Shadcn_, cn } from 'ui'
+import { cn, CommandList_Shadcn_ } from 'ui'
 
 import { CommandItem } from '../internal/Command'
 import { CommandEmpty } from '../internal/CommandEmpty'
diff --git a/packages/ui-patterns/src/CommandMenu/api/CommandMenu.tsx b/packages/ui-patterns/src/CommandMenu/api/CommandMenu.tsx
index d7e45e21855..6b5840d971b 100644
--- a/packages/ui-patterns/src/CommandMenu/api/CommandMenu.tsx
+++ b/packages/ui-patterns/src/CommandMenu/api/CommandMenu.tsx
@@ -1,20 +1,20 @@
 'use client'
+
 import { VisuallyHidden } from '@radix-ui/react-visually-hidden'
+import { useBreakpoint } from 'common'
+import useDragToClose from 'common/hooks/useDragToClose'
 import { AlertTriangle, ArrowLeft, Command, Search } from 'lucide-react'
 import type { HTMLAttributes, MouseEvent, PropsWithChildren, ReactElement, ReactNode } from 'react'
 import { Children, cloneElement, forwardRef, isValidElement, useEffect, useMemo } from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
-
-import { useBreakpoint } from 'common'
-import useDragToClose from 'common/hooks/useDragToClose'
 import {
   Button,
+  cn,
   Command_Shadcn_,
   Dialog,
   DialogContent,
   DialogDescription,
   DialogTitle,
-  cn,
 } from 'ui'
 
 import { useCurrentPage, usePageComponent, usePopPage } from './hooks/pagesHooks'
diff --git a/packages/ui-patterns/src/CommandMenu/api/CommandProvider.tsx b/packages/ui-patterns/src/CommandMenu/api/CommandProvider.tsx
index 80009aa25fd..75204df2204 100644
--- a/packages/ui-patterns/src/CommandMenu/api/CommandProvider.tsx
+++ b/packages/ui-patterns/src/CommandMenu/api/CommandProvider.tsx
@@ -2,7 +2,7 @@
 
 import { useConstant } from 'common'
 import { useRouter as useLegacyRouter } from 'next/compat/router'
-import { type PropsWithChildren, useCallback, useEffect, useMemo } from 'react'
+import { useCallback, useEffect, useMemo, type PropsWithChildren } from 'react'
 
 import { CommandContext } from '../internal/Context'
 import { initCommandsState } from '../internal/state/commandsState'
@@ -10,8 +10,8 @@ import { initPagesState } from '../internal/state/pagesState'
 import { initQueryState } from '../internal/state/queryState'
 import { initViewState } from '../internal/state/viewState'
 import {
-  type CommandMenuTelemetryCallback,
   useCommandMenuTelemetry,
+  type CommandMenuTelemetryCallback,
 } from './hooks/useCommandMenuTelemetry'
 import { CommandMenuTelemetryContext } from './hooks/useCommandMenuTelemetryContext'
 import { CrossCompatRouterContext } from './hooks/useCrossCompatRouter'
diff --git a/packages/ui-patterns/src/CommandMenu/api/hooks/commandsHooks.ts b/packages/ui-patterns/src/CommandMenu/api/hooks/commandsHooks.ts
index c58d7dcfd34..50bf613f7cc 100644
--- a/packages/ui-patterns/src/CommandMenu/api/hooks/commandsHooks.ts
+++ b/packages/ui-patterns/src/CommandMenu/api/hooks/commandsHooks.ts
@@ -4,10 +4,10 @@ import { isEqual } from 'lodash'
 import { useEffect, useMemo, useRef } from 'react'
 import { useSnapshot } from 'valtio'
 
-import type { ICommand, CommandOptions } from '../types'
 import { useCommandContext } from '../../internal/Context'
+import { isCommandsPage, PageDefinition } from '../../internal/state/pagesState'
+import type { CommandOptions, ICommand } from '../types'
 import { useCurrentPage } from './pagesHooks'
-import { PageDefinition, isCommandsPage } from '../../internal/state/pagesState'
 
 const useCommands = () => {
   const { commandsState } = useCommandContext()
diff --git a/packages/ui-patterns/src/CommandMenu/api/hooks/pagesHooks.ts b/packages/ui-patterns/src/CommandMenu/api/hooks/pagesHooks.ts
index 5ee14039bd4..53b89a09ec1 100644
--- a/packages/ui-patterns/src/CommandMenu/api/hooks/pagesHooks.ts
+++ b/packages/ui-patterns/src/CommandMenu/api/hooks/pagesHooks.ts
@@ -5,7 +5,7 @@ import { useLatest } from 'react-use'
 import { useSnapshot } from 'valtio'
 
 import { useCommandContext } from '../../internal/Context'
-import { type PageDefinition, isComponentPage } from '../../internal/state/pagesState'
+import { isComponentPage, type PageDefinition } from '../../internal/state/pagesState'
 import { useSetQuery } from './queryHooks'
 
 const useCurrentPage = () => {
diff --git a/packages/ui-patterns/src/CommandMenu/api/hooks/useCommandMenuTelemetry.ts b/packages/ui-patterns/src/CommandMenu/api/hooks/useCommandMenuTelemetry.ts
index 44308c39b8f..06d6cb996f3 100644
--- a/packages/ui-patterns/src/CommandMenu/api/hooks/useCommandMenuTelemetry.ts
+++ b/packages/ui-patterns/src/CommandMenu/api/hooks/useCommandMenuTelemetry.ts
@@ -1,14 +1,14 @@
 'use client'
 
-import { useCallback } from 'react'
-import { useCommandMenuTelemetryContext } from './useCommandMenuTelemetryContext'
-import { useCommandMenuOpen } from './viewHooks'
-
 import type {
-  CommandMenuOpenedEvent,
   CommandMenuCommandClickedEvent,
+  CommandMenuOpenedEvent,
   CommandMenuSearchSubmittedEvent,
 } from 'common/telemetry-constants'
+import { useCallback } from 'react'
+
+import { useCommandMenuTelemetryContext } from './useCommandMenuTelemetryContext'
+import { useCommandMenuOpen } from './viewHooks'
 
 export type CommandMenuTelemetryCallback = (
   event: CommandMenuOpenedEvent | CommandMenuCommandClickedEvent | CommandMenuSearchSubmittedEvent
diff --git a/packages/ui-patterns/src/CommandMenu/api/hooks/useCommandMenuTelemetryContext.tsx b/packages/ui-patterns/src/CommandMenu/api/hooks/useCommandMenuTelemetryContext.tsx
index bf39002f05d..d3650d79b75 100644
--- a/packages/ui-patterns/src/CommandMenu/api/hooks/useCommandMenuTelemetryContext.tsx
+++ b/packages/ui-patterns/src/CommandMenu/api/hooks/useCommandMenuTelemetryContext.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import { createContext, useContext } from 'react'
+
 import type { CommandMenuTelemetryCallback } from './useCommandMenuTelemetry'
 
 interface CommandMenuTelemetryContextValue {
diff --git a/packages/ui-patterns/src/CommandMenu/internal/Command.tsx b/packages/ui-patterns/src/CommandMenu/internal/Command.tsx
index 693b4ceb26c..d6000e9f2d3 100644
--- a/packages/ui-patterns/src/CommandMenu/internal/Command.tsx
+++ b/packages/ui-patterns/src/CommandMenu/internal/Command.tsx
@@ -1,11 +1,12 @@
 'use client'
 
-import { type PropsWithChildren, forwardRef } from 'react'
-import { CommandItem_Shadcn_, cn } from 'ui'
-import { useCrossCompatRouter } from '../api/hooks/useCrossCompatRouter'
+import { forwardRef, type PropsWithChildren } from 'react'
+import { cn, CommandItem_Shadcn_ } from 'ui'
+
 import { useCommandMenuTelemetryContext } from '../api/hooks/useCommandMenuTelemetryContext'
+import { useCrossCompatRouter } from '../api/hooks/useCrossCompatRouter'
 import { useResetCommandMenu, useSetCommandMenuOpen } from '../api/hooks/viewHooks'
-import type { ICommand, IActionCommand, IRouteCommand } from './types'
+import type { IActionCommand, ICommand, IRouteCommand } from './types'
 
 const isActionCommand = (command: ICommand): command is IActionCommand => 'action' in command
 const isRouteCommand = (command: ICommand): command is IRouteCommand => 'route' in command
diff --git a/packages/ui-patterns/src/CommandMenu/internal/CommandEmpty.tsx b/packages/ui-patterns/src/CommandMenu/internal/CommandEmpty.tsx
index 0a98790ac60..3933d1b0e29 100644
--- a/packages/ui-patterns/src/CommandMenu/internal/CommandEmpty.tsx
+++ b/packages/ui-patterns/src/CommandMenu/internal/CommandEmpty.tsx
@@ -1,7 +1,6 @@
 'use client'
 
-import { type PropsWithChildren, type RefObject, useEffect, useState } from 'react'
-
+import { useEffect, useState, type PropsWithChildren, type RefObject } from 'react'
 import { cn } from 'ui'
 
 import { useQuery } from '../api/hooks/queryHooks'
diff --git a/packages/ui-patterns/src/CommandMenu/internal/CommandGroup.tsx b/packages/ui-patterns/src/CommandMenu/internal/CommandGroup.tsx
index bf19502a512..931e31cc407 100644
--- a/packages/ui-patterns/src/CommandMenu/internal/CommandGroup.tsx
+++ b/packages/ui-patterns/src/CommandMenu/internal/CommandGroup.tsx
@@ -1,8 +1,7 @@
 'use client'
 
 import { forwardRef } from 'react'
-
-import { CommandGroup_Shadcn_, cn } from 'ui'
+import { cn, CommandGroup_Shadcn_ } from 'ui'
 
 const CommandGroup = forwardRef<
   React.ElementRef<typeof CommandGroup_Shadcn_>,
diff --git a/packages/ui-patterns/src/CommandMenu/internal/Context.tsx b/packages/ui-patterns/src/CommandMenu/internal/Context.tsx
index f401e0ff58b..34e149c81a6 100644
--- a/packages/ui-patterns/src/CommandMenu/internal/Context.tsx
+++ b/packages/ui-patterns/src/CommandMenu/internal/Context.tsx
@@ -2,10 +2,10 @@
 
 import { createContext, useContext } from 'react'
 
-import { type ICommandsState } from '../internal/types'
 import { type IPagesState } from '../internal/state/pagesState'
 import { type IQueryState } from '../internal/state/queryState'
 import { type IViewState } from '../internal/state/viewState.types'
+import { type ICommandsState } from '../internal/types'
 
 const CommandContext = createContext<
   | {
diff --git a/packages/ui-patterns/src/CommandMenu/internal/state/commandsState.ts b/packages/ui-patterns/src/CommandMenu/internal/state/commandsState.ts
index 0ac7cd5d903..7d70e20f348 100644
--- a/packages/ui-patterns/src/CommandMenu/internal/state/commandsState.ts
+++ b/packages/ui-patterns/src/CommandMenu/internal/state/commandsState.ts
@@ -1,6 +1,7 @@
 import { proxy } from 'valtio'
-import { type ICommandSection, type ICommandsState, type CommandOptions } from '../types'
+
 import { section$new } from '../CommandSection'
+import { type CommandOptions, type ICommandSection, type ICommandsState } from '../types'
 
 const initCommandsState = () => {
   const state: ICommandsState = proxy({
diff --git a/packages/ui-patterns/src/CommandMenu/internal/state/commandsStates.test.ts b/packages/ui-patterns/src/CommandMenu/internal/state/commandsStates.test.ts
index 35c4bc1bed4..17d3c9adb9d 100644
--- a/packages/ui-patterns/src/CommandMenu/internal/state/commandsStates.test.ts
+++ b/packages/ui-patterns/src/CommandMenu/internal/state/commandsStates.test.ts
@@ -1,8 +1,8 @@
 import { beforeEach, describe, expect, it } from 'vitest'
 
-import { type ICommandsState, type ICommandSection } from '../types'
-import { initCommandsState, orderSectionFirst } from './commandsState'
 import { section$new } from '../CommandSection'
+import { type ICommandSection, type ICommandsState } from '../types'
+import { initCommandsState, orderSectionFirst } from './commandsState'
 
 describe('orderSectionFirst', () => {
   it('Orders newly created section first', () => {
diff --git a/packages/ui-patterns/src/CommandMenu/internal/state/pagesState.test.ts b/packages/ui-patterns/src/CommandMenu/internal/state/pagesState.test.ts
index ce91bdb1d0f..9a8fcdc69ac 100644
--- a/packages/ui-patterns/src/CommandMenu/internal/state/pagesState.test.ts
+++ b/packages/ui-patterns/src/CommandMenu/internal/state/pagesState.test.ts
@@ -1,6 +1,6 @@
 import { beforeEach, describe, expect, it } from 'vitest'
 
-import { PageType, initPagesState, type IPagesState, type PageDefinition } from './pagesState'
+import { initPagesState, PageType, type IPagesState, type PageDefinition } from './pagesState'
 
 describe('pagesState', () => {
   let pagesState: IPagesState
diff --git a/packages/ui-patterns/src/CommandMenu/internal/state/pagesState.ts b/packages/ui-patterns/src/CommandMenu/internal/state/pagesState.ts
index 9ca8e524fa3..8b2e5b1d928 100644
--- a/packages/ui-patterns/src/CommandMenu/internal/state/pagesState.ts
+++ b/packages/ui-patterns/src/CommandMenu/internal/state/pagesState.ts
@@ -1,5 +1,6 @@
 import { type ReactNode } from 'react'
 import { proxy } from 'valtio'
+
 import { type ICommandSection } from '../types'
 
 type PageComponent = () => ReactNode
diff --git a/packages/ui-patterns/src/CommandMenu/internal/state/viewState.ts b/packages/ui-patterns/src/CommandMenu/internal/state/viewState.ts
index 2186b89cee3..da314189ac4 100644
--- a/packages/ui-patterns/src/CommandMenu/internal/state/viewState.ts
+++ b/packages/ui-patterns/src/CommandMenu/internal/state/viewState.ts
@@ -1,5 +1,6 @@
 import { proxy } from 'valtio'
-import { type IViewState, type DialogSize, type ITouchHandlers } from './viewState.types'
+
+import { type DialogSize, type ITouchHandlers, type IViewState } from './viewState.types'
 
 const initViewState = () => {
   const state: IViewState = proxy({
diff --git a/packages/ui-patterns/src/CommandMenu/prepackaged/Changelog.tsx b/packages/ui-patterns/src/CommandMenu/prepackaged/Changelog.tsx
index 5ba4f161d9e..e5ae5e95cbd 100644
--- a/packages/ui-patterns/src/CommandMenu/prepackaged/Changelog.tsx
+++ b/packages/ui-patterns/src/CommandMenu/prepackaged/Changelog.tsx
@@ -1,6 +1,6 @@
+import { useRegisterCommands } from '..'
 import { Inbox } from 'lucide-react'
 
-import { useRegisterCommands } from '..'
 import { BASE_PATH } from './shared/constants'
 
 const useChangelogCommand = ({ enabled = true }: { enabled?: boolean } = {}) => {
diff --git a/packages/ui-patterns/src/CommandMenu/prepackaged/DocsAi/DocsAiPage.tsx b/packages/ui-patterns/src/CommandMenu/prepackaged/DocsAi/DocsAiPage.tsx
index 4a18352d539..876db8191e3 100644
--- a/packages/ui-patterns/src/CommandMenu/prepackaged/DocsAi/DocsAiPage.tsx
+++ b/packages/ui-patterns/src/CommandMenu/prepackaged/DocsAi/DocsAiPage.tsx
@@ -1,18 +1,17 @@
 'use client'
 
+import { useBreakpoint } from 'common'
 import { User } from 'lucide-react'
 import { Fragment, useCallback, useEffect, useRef, useState } from 'react'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
-
-import { useBreakpoint } from 'common'
 import {
   AiIconAnimation,
   Button,
+  cn,
   CommandGroup_Shadcn_,
   CommandItem_Shadcn_,
   CommandList_Shadcn_,
-  cn,
   markdownComponents,
 } from 'ui'
 import { StatusIcon } from 'ui/src/components/StatusIcon'
diff --git a/packages/ui-patterns/src/CommandMenu/prepackaged/DocsAi/index.tsx b/packages/ui-patterns/src/CommandMenu/prepackaged/DocsAi/index.tsx
index b7215873082..7211fa4aeb5 100644
--- a/packages/ui-patterns/src/CommandMenu/prepackaged/DocsAi/index.tsx
+++ b/packages/ui-patterns/src/CommandMenu/prepackaged/DocsAi/index.tsx
@@ -2,7 +2,7 @@ import { AiIconAnimation } from 'ui'
 
 import { useRegisterCommands } from '../../api/hooks/commandsHooks'
 import { useRegisterPage, useSetPage } from '../../api/hooks/pagesHooks'
-import type { ICommand, CommandOptions } from '../../api/types'
+import type { CommandOptions, ICommand } from '../../api/types'
 import { PageType } from '../../api/utils'
 import { DocsAiPage } from './DocsAiPage'
 
diff --git a/packages/ui-patterns/src/CommandMenu/prepackaged/DocsSearch/DocsSearchPage.tsx b/packages/ui-patterns/src/CommandMenu/prepackaged/DocsSearch/DocsSearchPage.tsx
index cac75ea288f..db6b2a8457e 100644
--- a/packages/ui-patterns/src/CommandMenu/prepackaged/DocsSearch/DocsSearchPage.tsx
+++ b/packages/ui-patterns/src/CommandMenu/prepackaged/DocsSearch/DocsSearchPage.tsx
@@ -1,15 +1,14 @@
 'use client'
 
-import { Book, ChevronRight, Github, Hash, Loader2, MessageSquare, Search } from 'lucide-react'
-import { useEffect, useRef } from 'react'
-
 import {
   DocsSearchResultType as PageType,
   useDocsSearch,
   type DocsSearchResult as Page,
   type DocsSearchResultSection as PageSection,
 } from 'common'
-import { Button, CommandGroup_Shadcn_, CommandItem_Shadcn_, CommandList_Shadcn_, cn } from 'ui'
+import { Book, ChevronRight, Github, Hash, Loader2, MessageSquare, Search } from 'lucide-react'
+import { useEffect, useRef } from 'react'
+import { Button, cn, CommandGroup_Shadcn_, CommandItem_Shadcn_, CommandList_Shadcn_ } from 'ui'
 import { StatusIcon } from 'ui/src/components/StatusIcon'
 
 import {
@@ -17,9 +16,9 @@ import {
   CommandHeader,
   CommandInput,
   CommandWrapper,
-  TextHighlighter,
   escapeAttributeSelector,
   generateCommandClassNames,
+  TextHighlighter,
   useCrossCompatRouter,
   useQuery,
   useSetCommandMenuOpen,
diff --git a/packages/ui-patterns/src/CommandMenu/prepackaged/Support.tsx b/packages/ui-patterns/src/CommandMenu/prepackaged/Support.tsx
index 9debed79e2f..03248a9463b 100644
--- a/packages/ui-patterns/src/CommandMenu/prepackaged/Support.tsx
+++ b/packages/ui-patterns/src/CommandMenu/prepackaged/Support.tsx
@@ -1,7 +1,7 @@
-import { LifeBuoy, Activity } from 'lucide-react'
+import { useRegisterCommands, useSetCommandMenuOpen, type ICommand } from '..'
+import { Activity, LifeBuoy } from 'lucide-react'
 import { useMemo } from 'react'
 
-import { useRegisterCommands, useSetCommandMenuOpen, type ICommand } from '..'
 import { BASE_PATH } from './shared/constants'
 
 const useSupportCommands = ({ enabled = true }: { enabled?: boolean } = {}) => {
diff --git a/packages/ui-patterns/src/CommandMenu/prepackaged/ThemeSwitcher.tsx b/packages/ui-patterns/src/CommandMenu/prepackaged/ThemeSwitcher.tsx
index 0458cbe8c6b..0d6746dc155 100644
--- a/packages/ui-patterns/src/CommandMenu/prepackaged/ThemeSwitcher.tsx
+++ b/packages/ui-patterns/src/CommandMenu/prepackaged/ThemeSwitcher.tsx
@@ -1,8 +1,3 @@
-import { Monitor, MonitorDot, Moon, Sun } from 'lucide-react'
-import { useTheme } from 'next-themes'
-
-import { themes } from 'ui/src/components/ThemeProvider/themes'
-
 import {
   PageType,
   useRegisterCommands,
@@ -11,6 +6,9 @@ import {
   useSetPage,
   type CommandOptions,
 } from '..'
+import { Monitor, MonitorDot, Moon, Sun } from 'lucide-react'
+import { useTheme } from 'next-themes'
+import { themes } from 'ui/src/components/ThemeProvider/themes'
 
 const THEME_SWITCHER_PAGE_NAME = 'Switch theme'
 
diff --git a/packages/ui-patterns/src/CommandMenu/prepackaged/ai/AiWarning.tsx b/packages/ui-patterns/src/CommandMenu/prepackaged/ai/AiWarning.tsx
index 07d34ed05d5..8cc1706c98b 100644
--- a/packages/ui-patterns/src/CommandMenu/prepackaged/ai/AiWarning.tsx
+++ b/packages/ui-patterns/src/CommandMenu/prepackaged/ai/AiWarning.tsx
@@ -1,5 +1,4 @@
 import { Microscope } from 'lucide-react'
-
 import { Alert_Shadcn_, AlertDescription_Shadcn_, AlertTitle_Shadcn_, cn } from 'ui'
 
 const AiWarning = ({ className }: { className?: string }) => (
diff --git a/packages/ui-patterns/src/CommandMenu/prepackaged/ai/queryAi.ts b/packages/ui-patterns/src/CommandMenu/prepackaged/ai/queryAi.ts
index dbf9251df65..5cb58808465 100644
--- a/packages/ui-patterns/src/CommandMenu/prepackaged/ai/queryAi.ts
+++ b/packages/ui-patterns/src/CommandMenu/prepackaged/ai/queryAi.ts
@@ -1,8 +1,8 @@
 import type OpenAI from 'openai'
 import { SSE } from 'sse.js'
 
-import { type Message } from './utils'
 import { BASE_PATH } from '../shared/constants'
+import { type Message } from './utils'
 
 /**
  * Perform a one-off query to AI based on a snapshot of messages
diff --git a/packages/ui-patterns/src/CommandMenu/prepackaged/ai/useAiChat.test.ts b/packages/ui-patterns/src/CommandMenu/prepackaged/ai/useAiChat.test.ts
index b2e7f366226..eb74511f3b9 100644
--- a/packages/ui-patterns/src/CommandMenu/prepackaged/ai/useAiChat.test.ts
+++ b/packages/ui-patterns/src/CommandMenu/prepackaged/ai/useAiChat.test.ts
@@ -1,4 +1,5 @@
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
+
 import { parseSourcesFromContent } from './useAiChat'
 
 describe('parseSourcesFromContent', () => {
diff --git a/packages/ui-patterns/src/ComplexTabs/withSticky.tsx b/packages/ui-patterns/src/ComplexTabs/withSticky.tsx
index c97d051fb98..7e28feab2d8 100644
--- a/packages/ui-patterns/src/ComplexTabs/withSticky.tsx
+++ b/packages/ui-patterns/src/ComplexTabs/withSticky.tsx
@@ -1,8 +1,9 @@
 'use client'
 
-import { type TabsProps } from 'ui/src/components/Tabs'
-import { useSticky } from './withSticky.utils'
 import { PropsWithChildren, useCallback, type FC } from 'react'
+import { type TabsProps } from 'ui/src/components/Tabs'
+
+import { useSticky } from './withSticky.utils'
 
 interface StickyProps {
   stickyTabList?: {
diff --git a/packages/ui-patterns/src/ComputeBadge/index.tsx b/packages/ui-patterns/src/ComputeBadge/index.tsx
index 58d0d990e09..bb25feb2eca 100644
--- a/packages/ui-patterns/src/ComputeBadge/index.tsx
+++ b/packages/ui-patterns/src/ComputeBadge/index.tsx
@@ -1,7 +1,5 @@
-import type { HTMLAttributes } from 'react'
-
 import { components } from 'api-types'
-
+import type { HTMLAttributes } from 'react'
 import { cn } from 'ui'
 
 interface ComputeBadgeProps extends HTMLAttributes<HTMLDivElement> {
diff --git a/packages/ui-patterns/src/ConsentToast/index.tsx b/packages/ui-patterns/src/ConsentToast/index.tsx
index aeb288b8f74..2075578cead 100644
--- a/packages/ui-patterns/src/ConsentToast/index.tsx
+++ b/packages/ui-patterns/src/ConsentToast/index.tsx
@@ -3,6 +3,7 @@
 import { useBreakpoint } from 'common'
 import { noop } from 'lodash'
 import { Button } from 'ui'
+
 import { PrivacySettings } from '../PrivacySettings'
 
 interface ConsentToastProps {
diff --git a/packages/ui-patterns/src/CountdownWidget/index.tsx b/packages/ui-patterns/src/CountdownWidget/index.tsx
index 4b94894f287..744fe7e701c 100644
--- a/packages/ui-patterns/src/CountdownWidget/index.tsx
+++ b/packages/ui-patterns/src/CountdownWidget/index.tsx
@@ -1,4 +1,5 @@
 import { cn } from 'ui/src/lib/utils'
+
 import CountdownStep from './CountdownStep'
 
 interface CountdownWidgetProps {
diff --git a/packages/ui-patterns/src/DataInputs/Input.tsx b/packages/ui-patterns/src/DataInputs/Input.tsx
index fabf03e1066..3c98d52308c 100644
--- a/packages/ui-patterns/src/DataInputs/Input.tsx
+++ b/packages/ui-patterns/src/DataInputs/Input.tsx
@@ -6,8 +6,9 @@ import React, {
   forwardRef,
   useState,
 } from 'react'
-import { Button, Input_Shadcn_, cn, copyToClipboard } from 'ui'
+import { Button, cn, copyToClipboard, Input_Shadcn_ } from 'ui'
 import styleHandler from 'ui/src/lib/theme/styleHandler'
+
 import InputIconContainer from '../form/Layout/InputIconContainer'
 
 export const HIDDEN_PLACEHOLDER = '**** **** **** ****'
diff --git a/packages/ui-patterns/src/Dialogs/ConfirmationModal.tsx b/packages/ui-patterns/src/Dialogs/ConfirmationModal.tsx
index b4420c6af97..f9858a089d6 100644
--- a/packages/ui-patterns/src/Dialogs/ConfirmationModal.tsx
+++ b/packages/ui-patterns/src/Dialogs/ConfirmationModal.tsx
@@ -1,17 +1,18 @@
 'use client'
 
-import { MouseEventHandler, forwardRef, useEffect, useState } from 'react'
+import { forwardRef, MouseEventHandler, useEffect, useState } from 'react'
 import {
   Alert_Shadcn_,
   Button,
+  cn,
   Dialog,
   DialogContent,
   DialogSection,
   DialogSectionSeparator,
   DialogTitle,
-  cn,
 } from 'ui'
 import { DialogDescription, DialogHeader } from 'ui/src/components/shadcn/ui/dialog'
+
 import { Admonition } from './../admonition'
 
 export interface ConfirmationModalProps {
diff --git a/packages/ui-patterns/src/Dialogs/TextConfirmModal.tsx b/packages/ui-patterns/src/Dialogs/TextConfirmModal.tsx
index ec6fccbe999..322baed9514 100644
--- a/packages/ui-patterns/src/Dialogs/TextConfirmModal.tsx
+++ b/packages/ui-patterns/src/Dialogs/TextConfirmModal.tsx
@@ -2,29 +2,30 @@
 
 import { zodResolver } from '@hookform/resolvers/zod'
 import { Check, Copy } from 'lucide-react'
-import { ReactNode, forwardRef, useEffect, useState } from 'react'
+import { forwardRef, ReactNode, useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import {
   Alert_Shadcn_,
   Button,
+  cn,
+  copyToClipboard,
   Dialog,
   DialogContent,
   DialogSection,
   DialogSectionSeparator,
   DialogTitle,
+  Form_Shadcn_,
   FormControl_Shadcn_,
   FormDescription_Shadcn_,
   FormField_Shadcn_,
   FormItem_Shadcn_,
   FormLabel_Shadcn_,
   FormMessage_Shadcn_,
-  Form_Shadcn_,
   Input_Shadcn_,
-  cn,
-  copyToClipboard,
 } from 'ui'
 import { DialogHeader } from 'ui/src/components/shadcn/ui/dialog'
 import { z } from 'zod'
+
 import { Admonition } from './../admonition'
 
 export interface TextConfirmModalProps {
diff --git a/packages/ui-patterns/src/EmptyStatePresentational/index.tsx b/packages/ui-patterns/src/EmptyStatePresentational/index.tsx
index e5443b03d99..d7d7948009e 100644
--- a/packages/ui-patterns/src/EmptyStatePresentational/index.tsx
+++ b/packages/ui-patterns/src/EmptyStatePresentational/index.tsx
@@ -1,7 +1,6 @@
 import type { LucideIcon } from 'lucide-react'
 import { SquarePlus } from 'lucide-react'
 import { createElement, isValidElement, ReactNode } from 'react'
-
 import { cn } from 'ui'
 
 export interface EmptyStatePresentationalProps {
diff --git a/packages/ui-patterns/src/ExpandableVideo/index.tsx b/packages/ui-patterns/src/ExpandableVideo/index.tsx
index a33da2eda5e..78e78e14b17 100644
--- a/packages/ui-patterns/src/ExpandableVideo/index.tsx
+++ b/packages/ui-patterns/src/ExpandableVideo/index.tsx
@@ -1,8 +1,8 @@
 import { useBreakpoint } from 'common'
+import { Play } from 'lucide-react'
 import Image from 'next/image'
 import React, { ReactNode } from 'react'
-import { Modal, cn } from 'ui'
-import { Play } from 'lucide-react'
+import { cn, Modal } from 'ui'
 
 interface ExpandableVideoProps {
   videoId: string
diff --git a/packages/ui-patterns/src/FilterBar/DefaultCommandList.tsx b/packages/ui-patterns/src/FilterBar/DefaultCommandList.tsx
index 44e387893e1..a69367a398e 100644
--- a/packages/ui-patterns/src/FilterBar/DefaultCommandList.tsx
+++ b/packages/ui-patterns/src/FilterBar/DefaultCommandList.tsx
@@ -6,6 +6,7 @@ import {
   CommandItem_Shadcn_,
   CommandList_Shadcn_,
 } from 'ui'
+
 import { MenuItem } from './menuItems'
 
 type DefaultCommandListProps = {
diff --git a/packages/ui-patterns/src/FilterBar/FilterCondition.tsx b/packages/ui-patterns/src/FilterBar/FilterCondition.tsx
index c029a76a416..ae0f5cd5afc 100644
--- a/packages/ui-patterns/src/FilterBar/FilterCondition.tsx
+++ b/packages/ui-patterns/src/FilterBar/FilterCondition.tsx
@@ -4,11 +4,11 @@ import { X } from 'lucide-react'
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import {
   Button,
+  cn,
   Input_Shadcn_,
+  Popover_Shadcn_,
   PopoverAnchor_Shadcn_,
   PopoverContent_Shadcn_,
-  Popover_Shadcn_,
-  cn,
 } from 'ui'
 
 import { DefaultCommandList } from './DefaultCommandList'
diff --git a/packages/ui-patterns/src/FilterBar/FilterGroup.tsx b/packages/ui-patterns/src/FilterBar/FilterGroup.tsx
index f11c6e80bb5..13730ea5267 100644
--- a/packages/ui-patterns/src/FilterBar/FilterGroup.tsx
+++ b/packages/ui-patterns/src/FilterBar/FilterGroup.tsx
@@ -2,11 +2,11 @@
 
 import React, { useEffect, useMemo, useRef, useState } from 'react'
 import {
+  cn,
   Input_Shadcn_,
+  Popover_Shadcn_,
   PopoverAnchor_Shadcn_,
   PopoverContent_Shadcn_,
-  Popover_Shadcn_,
-  cn,
 } from 'ui'
 
 import { DefaultCommandList } from './DefaultCommandList'
diff --git a/packages/ui-patterns/src/FilterBar/hooks.test.ts b/packages/ui-patterns/src/FilterBar/hooks.test.ts
index c08c2e4d822..41e0dc23c08 100644
--- a/packages/ui-patterns/src/FilterBar/hooks.test.ts
+++ b/packages/ui-patterns/src/FilterBar/hooks.test.ts
@@ -1,5 +1,6 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
-import { renderHook, act } from '@testing-library/react'
+import { act, renderHook } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
 import { useFilterBarState, useOptionsCache } from './hooks'
 import { FilterProperty } from './types'
 
diff --git a/packages/ui-patterns/src/FilterBar/useAIFilter.ts b/packages/ui-patterns/src/FilterBar/useAIFilter.ts
index 6e8cda324b3..99e216a8ae6 100644
--- a/packages/ui-patterns/src/FilterBar/useAIFilter.ts
+++ b/packages/ui-patterns/src/FilterBar/useAIFilter.ts
@@ -1,6 +1,7 @@
 import { useCallback } from 'react'
+
 import { ActiveInput } from './hooks'
-import { FilterProperty, FilterGroup, isGroup } from './types'
+import { FilterGroup, FilterProperty, isGroup } from './types'
 import { updateGroupAtPath } from './utils'
 
 export function useAIFilter({
diff --git a/packages/ui-patterns/src/FilterBar/useCommandMenu.ts b/packages/ui-patterns/src/FilterBar/useCommandMenu.ts
index 8e8263e358c..be575d1b3ae 100644
--- a/packages/ui-patterns/src/FilterBar/useCommandMenu.ts
+++ b/packages/ui-patterns/src/FilterBar/useCommandMenu.ts
@@ -1,14 +1,16 @@
+import { Sparkles } from 'lucide-react'
 import { useMemo } from 'react'
 import * as React from 'react'
-import { Sparkles } from 'lucide-react'
+
 import { ActiveInput } from './hooks'
-import { FilterProperty, FilterGroup } from './types'
+import { FilterGroup, FilterProperty } from './types'
 import {
   findConditionByPath,
   isCustomOptionObject,
-  isFilterOptionObject,
   isFilterOperatorObject,
+  isFilterOptionObject,
 } from './utils'
+
 // Deprecated soon; kept for compatibility during refactor
 
 export type CommandItem = {
diff --git a/packages/ui-patterns/src/FilterBar/utils.ts b/packages/ui-patterns/src/FilterBar/utils.ts
index 58035d7f15b..fa8eff462da 100644
--- a/packages/ui-patterns/src/FilterBar/utils.ts
+++ b/packages/ui-patterns/src/FilterBar/utils.ts
@@ -6,8 +6,8 @@ import {
   FilterOperatorObject,
   FilterOptionObject,
   FilterProperty,
-  SyncOptionsFunction,
   isGroup,
+  SyncOptionsFunction,
 } from './types'
 
 export function pathsEqual(a: number[], b: number[]): boolean {
diff --git a/packages/ui-patterns/src/InnerSideMenu/index.tsx b/packages/ui-patterns/src/InnerSideMenu/index.tsx
index ca609fc2bb4..0ec29611187 100644
--- a/packages/ui-patterns/src/InnerSideMenu/index.tsx
+++ b/packages/ui-patterns/src/InnerSideMenu/index.tsx
@@ -2,9 +2,10 @@ import { ChevronRight, ChevronsDown, Loader2, Search } from 'lucide-react'
 import Link from 'next/link'
 import { ElementRef, forwardRef } from 'react'
 import {
+  cn,
+  Collapsible_Shadcn_,
   CollapsibleContent_Shadcn_,
   CollapsibleTrigger_Shadcn_,
-  Collapsible_Shadcn_,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuRadioGroup,
@@ -16,8 +17,8 @@ import {
   TooltipContent,
   TooltipTrigger,
   TreeViewItemVariant,
-  cn,
 } from 'ui'
+
 import { ShimmeringLoader } from '../ShimmeringLoader'
 
 const InnerSideBarTitle = forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<'span'>>(
diff --git a/packages/ui-patterns/src/McpUrlBuilder/McpConfigPanel.tsx b/packages/ui-patterns/src/McpUrlBuilder/McpConfigPanel.tsx
index c476dcf5fd5..7ae5e4767aa 100644
--- a/packages/ui-patterns/src/McpUrlBuilder/McpConfigPanel.tsx
+++ b/packages/ui-patterns/src/McpUrlBuilder/McpConfigPanel.tsx
@@ -1,15 +1,15 @@
 'use client'
 
 import React, { useMemo, useState } from 'react'
-import { cn, Separator, CodeBlock } from 'ui'
+import { cn, CodeBlock, Separator } from 'ui'
 
+import { InfoTooltip } from '../info-tooltip'
 import { ClientSelectDropdown } from './components/ClientSelectDropdown'
 import { McpConfigurationDisplay } from './components/McpConfigurationDisplay'
 import { McpConfigurationOptions } from './components/McpConfigurationOptions'
 import { FEATURE_GROUPS_NON_PLATFORM, FEATURE_GROUPS_PLATFORM, MCP_CLIENTS } from './constants'
 import type { McpClient, McpOnCopyCallback } from './types'
 import { getMcpUrl } from './utils/getMcpUrl'
-import { InfoTooltip } from '../info-tooltip'
 
 export interface McpConfigPanelProps {
   basePath: string
diff --git a/packages/ui-patterns/src/McpUrlBuilder/components/ClientSelectDropdown.tsx b/packages/ui-patterns/src/McpUrlBuilder/components/ClientSelectDropdown.tsx
index f5be997d027..d63469f482e 100644
--- a/packages/ui-patterns/src/McpUrlBuilder/components/ClientSelectDropdown.tsx
+++ b/packages/ui-patterns/src/McpUrlBuilder/components/ClientSelectDropdown.tsx
@@ -4,16 +4,16 @@ import { Bot, Check, ChevronDown } from 'lucide-react'
 import { useState } from 'react'
 import {
   Button,
+  cn,
+  Command_Shadcn_,
   CommandEmpty_Shadcn_,
   CommandGroup_Shadcn_,
   CommandInput_Shadcn_,
   CommandItem_Shadcn_,
   CommandList_Shadcn_,
-  Command_Shadcn_,
+  Popover_Shadcn_,
   PopoverContent_Shadcn_,
   PopoverTrigger_Shadcn_,
-  Popover_Shadcn_,
-  cn,
 } from 'ui'
 
 import type { McpClient } from '../types'
diff --git a/packages/ui-patterns/src/McpUrlBuilder/components/McpConfigurationDisplay.tsx b/packages/ui-patterns/src/McpUrlBuilder/components/McpConfigurationDisplay.tsx
index c72efd54558..81d0f402dff 100644
--- a/packages/ui-patterns/src/McpUrlBuilder/components/McpConfigurationDisplay.tsx
+++ b/packages/ui-patterns/src/McpUrlBuilder/components/McpConfigurationDisplay.tsx
@@ -1,11 +1,12 @@
 'use client'
 
+import { stringify as stringifyToml } from '@std/toml/stringify'
+import yaml from 'js-yaml'
 import { ExternalLink } from 'lucide-react'
 import Image from 'next/image'
-import yaml from 'js-yaml'
-import { stringify as stringifyToml } from '@std/toml/stringify'
 import { Button, cn } from 'ui'
 import { CodeBlock, type CodeBlockLang } from 'ui/src/components/CodeBlock'
+
 import type { McpClient, McpClientConfig, McpOnCopyCallback } from '../types'
 import { getMcpButtonData } from '../utils/getMcpButtonData'
 
diff --git a/packages/ui-patterns/src/McpUrlBuilder/components/McpConfigurationOptions.tsx b/packages/ui-patterns/src/McpUrlBuilder/components/McpConfigurationOptions.tsx
index ad0dccaf2ab..0b24ab12760 100644
--- a/packages/ui-patterns/src/McpUrlBuilder/components/McpConfigurationOptions.tsx
+++ b/packages/ui-patterns/src/McpUrlBuilder/components/McpConfigurationOptions.tsx
@@ -2,6 +2,7 @@
 
 import { cn, Switch } from 'ui'
 import { Label } from 'ui/src/components/shadcn/ui/label'
+
 import { InfoTooltip } from '../../info-tooltip'
 import {
   MultiSelector,
diff --git a/packages/ui-patterns/src/McpUrlBuilder/constants.tsx b/packages/ui-patterns/src/McpUrlBuilder/constants.tsx
index 854cd2ec364..c05f8b1fbdf 100644
--- a/packages/ui-patterns/src/McpUrlBuilder/constants.tsx
+++ b/packages/ui-patterns/src/McpUrlBuilder/constants.tsx
@@ -1,4 +1,5 @@
 import { CodeBlock } from 'ui/src/components/CodeBlock'
+
 import type {
   ClaudeCodeMcpConfig,
   CodexMcpConfig,
diff --git a/packages/ui-patterns/src/MetricCard/index.tsx b/packages/ui-patterns/src/MetricCard/index.tsx
index 6d8b86cedc8..d1c4df4559b 100644
--- a/packages/ui-patterns/src/MetricCard/index.tsx
+++ b/packages/ui-patterns/src/MetricCard/index.tsx
@@ -17,11 +17,11 @@ import {
   Card,
   CardContent,
   CardTitle,
+  cn,
   Skeleton,
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-  cn,
 } from 'ui'
 
 interface MetricCardContextValue {
diff --git a/packages/ui-patterns/src/MultiSelectDeprecated/MultiSelectV2.tsx b/packages/ui-patterns/src/MultiSelectDeprecated/MultiSelectV2.tsx
index adf8dd6361d..cedc390fd7b 100644
--- a/packages/ui-patterns/src/MultiSelectDeprecated/MultiSelectV2.tsx
+++ b/packages/ui-patterns/src/MultiSelectDeprecated/MultiSelectV2.tsx
@@ -2,18 +2,19 @@ import { orderBy, without } from 'lodash'
 import { Check, ChevronDown } from 'lucide-react'
 import { ReactNode, useState } from 'react'
 import {
+  cn,
+  Command_Shadcn_,
   CommandEmpty_Shadcn_,
   CommandGroup_Shadcn_,
   CommandInput_Shadcn_,
   CommandItem_Shadcn_,
   CommandList_Shadcn_,
-  Command_Shadcn_,
+  Popover_Shadcn_,
   PopoverContent_Shadcn_,
   PopoverTrigger_Shadcn_,
-  Popover_Shadcn_,
   ScrollArea,
-  cn,
 } from 'ui'
+
 import { BadgeDisabled, BadgeSelected } from './Badges'
 
 interface MultiSelectOption {
diff --git a/packages/ui-patterns/src/MultiSelectDeprecated/index.tsx b/packages/ui-patterns/src/MultiSelectDeprecated/index.tsx
index 2c0dfd31ad3..5551f5afb95 100644
--- a/packages/ui-patterns/src/MultiSelectDeprecated/index.tsx
+++ b/packages/ui-patterns/src/MultiSelectDeprecated/index.tsx
@@ -4,9 +4,9 @@ import { AlertCircle, Check, ChevronDown, Plus, Search } from 'lucide-react'
 import { ReactNode, useEffect, useRef, useState } from 'react'
 import {
   Input,
+  Popover_Shadcn_,
   PopoverContent_Shadcn_,
   PopoverTrigger_Shadcn_,
-  Popover_Shadcn_,
   ScrollArea,
 } from 'ui'
 
diff --git a/packages/ui-patterns/src/PageContainer/index.tsx b/packages/ui-patterns/src/PageContainer/index.tsx
index 526e6506086..a420e72c4ba 100644
--- a/packages/ui-patterns/src/PageContainer/index.tsx
+++ b/packages/ui-patterns/src/PageContainer/index.tsx
@@ -1,6 +1,5 @@
 import { cva, type VariantProps } from 'class-variance-authority'
 import { forwardRef, HTMLAttributes } from 'react'
-
 import { cn } from 'ui'
 
 // ============================================================================
diff --git a/packages/ui-patterns/src/PageHeader/index.tsx b/packages/ui-patterns/src/PageHeader/index.tsx
index 30476b72c8e..e5443f2531e 100644
--- a/packages/ui-patterns/src/PageHeader/index.tsx
+++ b/packages/ui-patterns/src/PageHeader/index.tsx
@@ -2,9 +2,9 @@
 
 import { cva, type VariantProps } from 'class-variance-authority'
 import React, { createContext, useContext } from 'react'
-
 import { cn } from 'ui'
 import { Breadcrumb } from 'ui/src/components/shadcn/ui/breadcrumb'
+
 import { PageContainer } from '../PageContainer'
 
 // ============================================================================
diff --git a/packages/ui-patterns/src/PageSection/index.tsx b/packages/ui-patterns/src/PageSection/index.tsx
index 46d9ce4bcc1..12b99fc0ce8 100644
--- a/packages/ui-patterns/src/PageSection/index.tsx
+++ b/packages/ui-patterns/src/PageSection/index.tsx
@@ -1,6 +1,5 @@
 import { cva, type VariantProps } from 'class-variance-authority'
 import React from 'react'
-
 import { cn } from 'ui'
 
 // ============================================================================
diff --git a/packages/ui-patterns/src/PopupFrame/index.tsx b/packages/ui-patterns/src/PopupFrame/index.tsx
index 91cda8b4e6b..4719b8301d6 100644
--- a/packages/ui-patterns/src/PopupFrame/index.tsx
+++ b/packages/ui-patterns/src/PopupFrame/index.tsx
@@ -1,6 +1,6 @@
 import { useBreakpoint } from 'common'
 import React, { ReactNode } from 'react'
-import { Modal, cn } from 'ui'
+import { cn, Modal } from 'ui'
 
 interface PopupFrameProps {
   triggerContainerClassName?: string
diff --git a/packages/ui-patterns/src/PrivacySettings/index.tsx b/packages/ui-patterns/src/PrivacySettings/index.tsx
index ec2442bb417..8ed693d7ee7 100644
--- a/packages/ui-patterns/src/PrivacySettings/index.tsx
+++ b/packages/ui-patterns/src/PrivacySettings/index.tsx
@@ -1,10 +1,10 @@
 'use client'
 
+import { useConsentState } from 'common'
 import Link from 'next/link'
 import { PropsWithChildren, useState } from 'react'
-
-import { useConsentState } from 'common'
 import { Modal, Toggle } from 'ui'
+
 import { Admonition } from '../admonition'
 
 interface PrivacySettingsProps {
diff --git a/packages/ui-patterns/src/PromoToast/PromoToast.tsx b/packages/ui-patterns/src/PromoToast/PromoToast.tsx
index af51c5e3515..50132a6f950 100644
--- a/packages/ui-patterns/src/PromoToast/PromoToast.tsx
+++ b/packages/ui-patterns/src/PromoToast/PromoToast.tsx
@@ -5,7 +5,9 @@ import Link from 'next/link'
 import { useEffect, useState } from 'react'
 import { Button } from 'ui/src/components/Button/Button'
 import { cn } from 'ui/src/lib/utils/cn'
+
 import announcement from '../Banners/data.json'
+
 import './styles.css'
 
 const PromoToast = () => {
diff --git a/packages/ui-patterns/src/Row/index.tsx b/packages/ui-patterns/src/Row/index.tsx
index f609c3cd8e9..3802aa6aa50 100644
--- a/packages/ui-patterns/src/Row/index.tsx
+++ b/packages/ui-patterns/src/Row/index.tsx
@@ -5,6 +5,7 @@ import type React from 'react'
 import type { ReactNode } from 'react'
 import { forwardRef, useEffect, useMemo, useRef, useState } from 'react'
 import { Button, cn } from 'ui'
+
 import { useMeasuredWidth } from './Row.utils'
 
 interface RowProps extends React.HTMLAttributes<HTMLDivElement> {
diff --git a/packages/ui-patterns/src/SqlToRest/assumptions.ts b/packages/ui-patterns/src/SqlToRest/assumptions.ts
index 81ed5055947..a5f2feffee0 100644
--- a/packages/ui-patterns/src/SqlToRest/assumptions.ts
+++ b/packages/ui-patterns/src/SqlToRest/assumptions.ts
@@ -1,4 +1,5 @@
 import { EmbeddedTarget, flattenTargets } from '@supabase/sql-to-rest'
+
 import type { ResultBundle } from './util'
 
 export type Assumption = {
diff --git a/packages/ui-patterns/src/SqlToRest/base-url-dialog.tsx b/packages/ui-patterns/src/SqlToRest/base-url-dialog.tsx
index 1593b29ecb5..b0d422defc7 100644
--- a/packages/ui-patterns/src/SqlToRest/base-url-dialog.tsx
+++ b/packages/ui-patterns/src/SqlToRest/base-url-dialog.tsx
@@ -9,6 +9,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from 'ui/src/components/shadcn/ui/dialog'
+
 import { Input } from '../DataInputs/Input'
 
 export type BaseUrlDialogProps = {
diff --git a/packages/ui-patterns/src/SqlToRest/faqs.ts b/packages/ui-patterns/src/SqlToRest/faqs.ts
index 67039f124a1..efbb3c20fae 100644
--- a/packages/ui-patterns/src/SqlToRest/faqs.ts
+++ b/packages/ui-patterns/src/SqlToRest/faqs.ts
@@ -1,5 +1,6 @@
-import { stripIndent } from 'common-tags'
 import { someFilter } from '@supabase/sql-to-rest'
+import { stripIndent } from 'common-tags'
+
 import { ResultBundle } from './util'
 
 export type Faq = {
diff --git a/packages/ui-patterns/src/SqlToRest/index.tsx b/packages/ui-patterns/src/SqlToRest/index.tsx
index 75e91e42d22..b9bafca284a 100644
--- a/packages/ui-patterns/src/SqlToRest/index.tsx
+++ b/packages/ui-patterns/src/SqlToRest/index.tsx
@@ -2,6 +2,7 @@
 
 import dynamic from 'next/dynamic.js'
 import { ErrorBoundary, FallbackProps } from 'react-error-boundary'
+
 import { Admonition } from '../admonition'
 import { SqlToRestProps } from './sql-to-rest'
 
diff --git a/packages/ui-patterns/src/SqlToRest/sql-to-rest.tsx b/packages/ui-patterns/src/SqlToRest/sql-to-rest.tsx
index 4928133a33f..6cea26d5f5e 100644
--- a/packages/ui-patterns/src/SqlToRest/sql-to-rest.tsx
+++ b/packages/ui-patterns/src/SqlToRest/sql-to-rest.tsx
@@ -2,18 +2,18 @@
 
 import Editor, { useMonaco } from '@monaco-editor/react'
 import {
+  formatCurl,
+  formatHttp,
   HttpRequest,
   ParsingError,
+  processSql,
   RenderError,
+  renderHttp,
+  renderSupabaseJs,
   Statement,
   SupabaseJsQuery,
   UnimplementedError,
   UnsupportedError,
-  formatCurl,
-  formatHttp,
-  processSql,
-  renderHttp,
-  renderSupabaseJs,
 } from '@supabase/sql-to-rest'
 import { ChevronUp, GitPullRequest } from 'lucide-react'
 import type { editor } from 'monaco-editor'
@@ -28,8 +28,9 @@ import {
 } from 'react'
 import Markdown from 'react-markdown'
 import { format } from 'sql-formatter'
-import { CodeBlock, Collapsible, Tabs, cn } from 'ui'
+import { cn, CodeBlock, Collapsible, Tabs } from 'ui'
 import { Alert } from 'ui/src/components/shadcn/ui/alert'
+
 import { assumptions } from './assumptions'
 import { BaseUrlDialog } from './base-url-dialog'
 import { faqs } from './faqs'
diff --git a/packages/ui-patterns/src/SqlToRest/syntax-highlighter/framer-features.ts b/packages/ui-patterns/src/SqlToRest/syntax-highlighter/framer-features.ts
index 1c8f87e9fe2..e0013ea7cd5 100644
--- a/packages/ui-patterns/src/SqlToRest/syntax-highlighter/framer-features.ts
+++ b/packages/ui-patterns/src/SqlToRest/syntax-highlighter/framer-features.ts
@@ -1,2 +1,3 @@
 import { domMax } from 'framer-motion'
+
 export default domMax
diff --git a/packages/ui-patterns/src/SqlToRest/syntax-highlighter/transform-renderer.tsx b/packages/ui-patterns/src/SqlToRest/syntax-highlighter/transform-renderer.tsx
index 58c1eb29464..c19791c41a8 100644
--- a/packages/ui-patterns/src/SqlToRest/syntax-highlighter/transform-renderer.tsx
+++ b/packages/ui-patterns/src/SqlToRest/syntax-highlighter/transform-renderer.tsx
@@ -1,6 +1,6 @@
 import { LazyMotion, m } from 'framer-motion'
 import { PropsWithChildren } from 'react'
-import { SyntaxHighlighterProps, createElement } from 'react-syntax-highlighter'
+import { createElement, SyntaxHighlighterProps } from 'react-syntax-highlighter'
 
 // Make sure to return the specific export containing the feature bundle.
 const loadFramerFeatures = () => import('./framer-features').then((res) => res.default)
diff --git a/packages/ui-patterns/src/ThemeToggle.tsx b/packages/ui-patterns/src/ThemeToggle.tsx
index ba64de8a145..4d416e7c2ff 100644
--- a/packages/ui-patterns/src/ThemeToggle.tsx
+++ b/packages/ui-patterns/src/ThemeToggle.tsx
@@ -4,6 +4,7 @@ import { Moon, Sun } from 'lucide-react'
 import { useTheme } from 'next-themes'
 import { useEffect, useState } from 'react'
 import {
+  cn,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuGroup,
@@ -11,7 +12,6 @@ import {
   DropdownMenuRadioItem,
   DropdownMenuTrigger,
   Theme,
-  cn,
   themes,
 } from 'ui'
 
diff --git a/packages/ui-patterns/src/TimestampInfo/index.tsx b/packages/ui-patterns/src/TimestampInfo/index.tsx
index 22b8c591d76..e02ae517ec6 100644
--- a/packages/ui-patterns/src/TimestampInfo/index.tsx
+++ b/packages/ui-patterns/src/TimestampInfo/index.tsx
@@ -1,10 +1,10 @@
 'use client'
-import { useEffect, useRef, useState } from 'react'
-import { cn, copyToClipboard, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
 
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import utc from 'dayjs/plugin/utc'
+import { useEffect, useRef, useState } from 'react'
+import { cn, copyToClipboard, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
 
 dayjs.extend(relativeTime)
 dayjs.extend(utc)
diff --git a/packages/ui-patterns/src/Toc/index.ts b/packages/ui-patterns/src/Toc/index.ts
index 1724431f28a..4f476ea8f58 100644
--- a/packages/ui-patterns/src/Toc/index.ts
+++ b/packages/ui-patterns/src/Toc/index.ts
@@ -1,8 +1,7 @@
+import { Toc, TOCItems, TOCScrollArea } from './toc'
 import * as TocPrimitive from './toc-primitive'
-import { ScrollProvider, TOCItem, type AnchorProviderProps, AnchorProvider } from './toc-primitive'
-import { Toc, TOCScrollArea, TOCItems } from './toc'
-import { TocThumb } from './toc-thumb'
-import { type TOCThumb } from './toc-thumb'
+import { AnchorProvider, ScrollProvider, TOCItem, type AnchorProviderProps } from './toc-primitive'
+import { TocThumb, type TOCThumb } from './toc-thumb'
 
 export {
   AnchorProvider,
diff --git a/packages/ui-patterns/src/Toc/mdx-plugins/remark-heading.ts b/packages/ui-patterns/src/Toc/mdx-plugins/remark-heading.ts
index e21803ae5d2..26799129179 100644
--- a/packages/ui-patterns/src/Toc/mdx-plugins/remark-heading.ts
+++ b/packages/ui-patterns/src/Toc/mdx-plugins/remark-heading.ts
@@ -2,9 +2,10 @@ import Slugger from 'github-slugger'
 import type { Heading, Root } from 'mdast'
 import type { Data, Transformer } from 'unified'
 import { visit } from 'unist-util-visit'
+import type { VFile } from 'vfile'
+
 import type { TOCItemType } from '../types'
 import { flattenNode } from './remark-utils'
-import type { VFile } from 'vfile'
 
 const slugger = new Slugger()
 
diff --git a/packages/ui-patterns/src/Toc/server/get-toc.tsx b/packages/ui-patterns/src/Toc/server/get-toc.tsx
index e395bc04426..bbd03a5cb4e 100644
--- a/packages/ui-patterns/src/Toc/server/get-toc.tsx
+++ b/packages/ui-patterns/src/Toc/server/get-toc.tsx
@@ -1,7 +1,8 @@
 import { remark } from 'remark'
-import { remarkHeading } from '../mdx-plugins/remark-heading'
 import type { PluggableList } from 'unified'
 import type { Compatible } from 'vfile'
+
+import { remarkHeading } from '../mdx-plugins/remark-heading'
 import type { TableOfContents } from '../types'
 
 /**
diff --git a/packages/ui-patterns/src/Toc/toc-primitive.tsx b/packages/ui-patterns/src/Toc/toc-primitive.tsx
index a3bb5b04c2c..03cb5a5acb6 100644
--- a/packages/ui-patterns/src/Toc/toc-primitive.tsx
+++ b/packages/ui-patterns/src/Toc/toc-primitive.tsx
@@ -1,11 +1,11 @@
 'use client'
 
-import { createContext, forwardRef, useContext, useMemo, useRef } from 'react'
-import scrollIntoView from 'scroll-into-view-if-needed'
-import type { AnchorHTMLAttributes, ReactNode, RefObject } from 'react'
-import type { TableOfContents } from './server/get-toc'
-
 import { mergeRefs, useAnchorObserver, useOnChange } from 'common'
+import { createContext, forwardRef, useContext, useMemo, useRef } from 'react'
+import type { AnchorHTMLAttributes, ReactNode, RefObject } from 'react'
+import scrollIntoView from 'scroll-into-view-if-needed'
+
+import type { TableOfContents } from './server/get-toc'
 
 export const ActiveAnchorContext = createContext<string[]>([])
 
diff --git a/packages/ui-patterns/src/Toc/toc-thumb.tsx b/packages/ui-patterns/src/Toc/toc-thumb.tsx
index ed79e71ad5c..38499c87d94 100644
--- a/packages/ui-patterns/src/Toc/toc-thumb.tsx
+++ b/packages/ui-patterns/src/Toc/toc-thumb.tsx
@@ -1,8 +1,9 @@
 'use client'
 
-import { type HTMLAttributes, type RefObject, useEffect, useRef } from 'react'
-import * as Primitive from './toc-primitive'
 import { useEffectEvent, useOnChange } from 'common'
+import { useEffect, useRef, type HTMLAttributes, type RefObject } from 'react'
+
+import * as Primitive from './toc-primitive'
 
 export type TOCThumb = [top: number, height: number]
 
diff --git a/packages/ui-patterns/src/Toc/toc.tsx b/packages/ui-patterns/src/Toc/toc.tsx
index 315048e9636..cea0ab470b1 100644
--- a/packages/ui-patterns/src/Toc/toc.tsx
+++ b/packages/ui-patterns/src/Toc/toc.tsx
@@ -1,8 +1,9 @@
 'use client'
 
-import { type ComponentProps, Fragment, type HTMLAttributes, type ReactNode, useRef } from 'react'
+import { Fragment, useRef, type ComponentProps, type HTMLAttributes, type ReactNode } from 'react'
 import { cn, ScrollArea, ScrollViewport } from 'ui'
 import { removeAnchor } from 'ui/src/components/CustomHTMLElements/CustomHTMLElements.utils'
+
 import type { TOCItemType } from './server/get-toc'
 import * as Primitive from './toc-primitive'
 import { TocThumb } from './toc-thumb'
diff --git a/packages/ui-patterns/src/consent.tsx b/packages/ui-patterns/src/consent.tsx
index 7e563ee3243..bfb48f282c7 100644
--- a/packages/ui-patterns/src/consent.tsx
+++ b/packages/ui-patterns/src/consent.tsx
@@ -5,6 +5,7 @@ import { useCallback, useEffect, useRef } from 'react'
 import { toast } from 'sonner'
 import { cn } from 'ui'
 import { useSnapshot } from 'valtio'
+
 import { ConsentToast } from './ConsentToast'
 
 export const useConsentToast = () => {
diff --git a/packages/ui-patterns/src/form/FormItemLayout/FormItemLayout.tsx b/packages/ui-patterns/src/form/FormItemLayout/FormItemLayout.tsx
index 908c7d60aac..934df17fde1 100644
--- a/packages/ui-patterns/src/form/FormItemLayout/FormItemLayout.tsx
+++ b/packages/ui-patterns/src/form/FormItemLayout/FormItemLayout.tsx
@@ -1,5 +1,6 @@
 import { ElementRef, forwardRef } from 'react'
 import { FormItem_Shadcn_ } from 'ui'
+
 import { FormLayout } from '../Layout/FormLayout'
 
 const FormItemLayout = forwardRef<
diff --git a/packages/ui-patterns/src/form/FormLayout2.tsx b/packages/ui-patterns/src/form/FormLayout2.tsx
index 085404f42c3..2993c38208c 100644
--- a/packages/ui-patterns/src/form/FormLayout2.tsx
+++ b/packages/ui-patterns/src/form/FormLayout2.tsx
@@ -26,6 +26,7 @@ import {
   Switch,
 } from 'ui'
 import { z } from 'zod'
+
 import { Input } from '../DataInputs/Input'
 import { InfoTooltip } from '../info-tooltip'
 import { FormItemLayout } from './FormItemLayout/FormItemLayout'
diff --git a/packages/ui-patterns/src/form/Layout/FormLayout.tsx b/packages/ui-patterns/src/form/Layout/FormLayout.tsx
index 13319daf8ae..444d4d17bf5 100644
--- a/packages/ui-patterns/src/form/Layout/FormLayout.tsx
+++ b/packages/ui-patterns/src/form/Layout/FormLayout.tsx
@@ -2,11 +2,11 @@ import { cva } from 'class-variance-authority'
 import { motion } from 'framer-motion'
 import React from 'react'
 import {
+  cn,
   FormDescription_Shadcn_,
   FormLabel_Shadcn_,
   FormMessage_Shadcn_,
   Label_Shadcn_,
-  cn,
 } from 'ui'
 import { SIZE } from 'ui/src/lib/constants'
 
diff --git a/packages/ui-patterns/src/multi-select/multi-select.test.tsx b/packages/ui-patterns/src/multi-select/multi-select.test.tsx
index c26d040fd14..005a90e983f 100644
--- a/packages/ui-patterns/src/multi-select/multi-select.test.tsx
+++ b/packages/ui-patterns/src/multi-select/multi-select.test.tsx
@@ -1,5 +1,7 @@
-import { render, fireEvent, screen } from '@testing-library/react'
-import { describe, it, expect } from 'vitest'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { useState } from 'react'
+import { describe, expect, it } from 'vitest'
+
 import {
   MultiSelector,
   MultiSelectorContent,
@@ -8,7 +10,6 @@ import {
   MultiSelectorList,
   MultiSelectorTrigger,
 } from './index'
-import { useState } from 'react'
 
 // This fixes a "ReferenceError: ResizeObserver is not defined" error in the test
 class ResizeObserver {
diff --git a/packages/ui-patterns/src/multi-select/multi-select.tsx b/packages/ui-patterns/src/multi-select/multi-select.tsx
index 9019b7e32be..84bec053ebb 100644
--- a/packages/ui-patterns/src/multi-select/multi-select.tsx
+++ b/packages/ui-patterns/src/multi-select/multi-select.tsx
@@ -1,11 +1,8 @@
 'use client'
 
+import { cva, VariantProps } from 'class-variance-authority'
 import { Check, ChevronsUpDown, X as RemoveIcon } from 'lucide-react'
 import React, { useEffect } from 'react'
-
-import { VariantProps, cva } from 'class-variance-authority'
-import { SIZE_VARIANTS, SIZE_VARIANTS_DEFAULT } from 'ui/src/lib/constants'
-
 import { Badge, cn, useOnClickOutside } from 'ui'
 import {
   Command,
@@ -14,6 +11,7 @@ import {
   CommandItem,
   CommandList,
 } from 'ui/src/components/shadcn/ui/command'
+import { SIZE_VARIANTS, SIZE_VARIANTS_DEFAULT } from 'ui/src/lib/constants'
 
 interface MultiSelectContextProps {
   values: string[]
diff --git a/packages/ui-patterns/vitest.setup.ts b/packages/ui-patterns/vitest.setup.ts
index 06989e9c822..f2bc33394d8 100644
--- a/packages/ui-patterns/vitest.setup.ts
+++ b/packages/ui-patterns/vitest.setup.ts
@@ -1,6 +1,6 @@
 /// <reference types="@testing-library/jest-dom" />
-
 import '@testing-library/jest-dom/vitest'
+
 import { cleanup } from '@testing-library/react'
 import { afterEach, vi } from 'vitest'
 
diff --git a/packages/ui/src/components/Accordion/Accordion.tsx b/packages/ui/src/components/Accordion/Accordion.tsx
index 4b793744c12..ca043340dd2 100644
--- a/packages/ui/src/components/Accordion/Accordion.tsx
+++ b/packages/ui/src/components/Accordion/Accordion.tsx
@@ -1,9 +1,9 @@
 'use client'
 
 import * as RadixAccordion from '@radix-ui/react-accordion'
+import { ChevronDown } from 'lucide-react'
 import React, { createContext, useContext, useState } from 'react'
 
-import { ChevronDown } from 'lucide-react'
 import styleHandler from '../../lib/theme/styleHandler'
 
 type Type = 'default' | 'bordered'
diff --git a/packages/ui/src/components/Alert/Alert.tsx b/packages/ui/src/components/Alert/Alert.tsx
index 1c49c76c460..0d29e9a7bfb 100644
--- a/packages/ui/src/components/Alert/Alert.tsx
+++ b/packages/ui/src/components/Alert/Alert.tsx
@@ -1,9 +1,9 @@
 'use client'
 
+import { AlertOctagon, AlertTriangle, CheckCircle, Info, X } from 'lucide-react'
 import React, { useState } from 'react'
 
 import styleHandler from '../../lib/theme/styleHandler'
-import { AlertOctagon, CheckCircle, AlertTriangle, Info, X } from 'lucide-react'
 
 export interface AlertProps {
   variant?: AlertVariant
diff --git a/packages/ui/src/components/AnimatedCounter/AnimatedCounter.tsx b/packages/ui/src/components/AnimatedCounter/AnimatedCounter.tsx
index b3bd56aa039..59103eab284 100644
--- a/packages/ui/src/components/AnimatedCounter/AnimatedCounter.tsx
+++ b/packages/ui/src/components/AnimatedCounter/AnimatedCounter.tsx
@@ -1,7 +1,8 @@
 'use client'
 
+import { animate, motion, useInView, useMotionValue, useTransform } from 'framer-motion'
 import React, { FC, useEffect, useRef } from 'react'
-import { motion, useMotionValue, useTransform, animate, useInView } from 'framer-motion'
+
 import { cn } from '../../lib/utils/cn'
 
 export interface AnimatedCounterProps {
diff --git a/packages/ui/src/components/Breadcrumb/Breadcrumb.tsx b/packages/ui/src/components/Breadcrumb/Breadcrumb.tsx
index 7de226f7170..dc2bbf980b8 100644
--- a/packages/ui/src/components/Breadcrumb/Breadcrumb.tsx
+++ b/packages/ui/src/components/Breadcrumb/Breadcrumb.tsx
@@ -1,5 +1,6 @@
 // @ts-ignore
 import { ChevronRight } from 'lucide-react'
+
 import BreadcrumbStyle from './Breadcrumb.module.css'
 
 interface Props {
diff --git a/packages/ui/src/components/Button/Button.tsx b/packages/ui/src/components/Button/Button.tsx
index 12fa29c2d19..05ad140b658 100644
--- a/packages/ui/src/components/Button/Button.tsx
+++ b/packages/ui/src/components/Button/Button.tsx
@@ -1,9 +1,10 @@
 'use client'
 
 import { Slot } from '@radix-ui/react-slot'
-import { VariantProps, cva } from 'class-variance-authority'
+import { cva, VariantProps } from 'class-variance-authority'
 import { Loader2 } from 'lucide-react'
 import { cloneElement, forwardRef, isValidElement } from 'react'
+
 import { SIZE_VARIANTS, SIZE_VARIANTS_DEFAULT } from '../../lib/constants'
 import { cn } from '../../lib/utils/cn'
 
diff --git a/packages/ui/src/components/Checkbox/index.tsx b/packages/ui/src/components/Checkbox/index.tsx
index 23993dfce7f..78f632097e3 100644
--- a/packages/ui/src/components/Checkbox/index.tsx
+++ b/packages/ui/src/components/Checkbox/index.tsx
@@ -1,3 +1,4 @@
 import Checkbox from './Checkbox'
+
 export default Checkbox
 export { default as Checkbox } from './Checkbox'
diff --git a/packages/ui/src/components/Collapsible/Collapsible.tsx b/packages/ui/src/components/Collapsible/Collapsible.tsx
index cbc4941a821..9238e573b72 100644
--- a/packages/ui/src/components/Collapsible/Collapsible.tsx
+++ b/packages/ui/src/components/Collapsible/Collapsible.tsx
@@ -2,6 +2,7 @@
 
 import * as RadixCollapsible from '@radix-ui/react-collapsible'
 import React from 'react'
+
 import styleHandler from '../../lib/theme/styleHandler'
 
 export interface CollapsibleProps extends RadixCollapsible.CollapsibleProps {
diff --git a/packages/ui/src/components/CustomHTMLElements/Heading.tsx b/packages/ui/src/components/CustomHTMLElements/Heading.tsx
index b4016393522..1b6a85586a0 100644
--- a/packages/ui/src/components/CustomHTMLElements/Heading.tsx
+++ b/packages/ui/src/components/CustomHTMLElements/Heading.tsx
@@ -2,10 +2,11 @@
 
 import { forwardRef, useCallback, type HTMLAttributes } from 'react'
 import { useInView } from 'react-intersection-observer'
+
 import {
   getAnchor,
-  removeAnchor,
   highlightSelectedTocItem,
+  removeAnchor,
   unHighlightSelectedTocItems,
 } from './CustomHTMLElements.utils'
 
diff --git a/packages/ui/src/components/ExpandingTextArea/index.tsx b/packages/ui/src/components/ExpandingTextArea/index.tsx
index 8236886d4db..03abc44338d 100644
--- a/packages/ui/src/components/ExpandingTextArea/index.tsx
+++ b/packages/ui/src/components/ExpandingTextArea/index.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import React, { forwardRef, useImperativeHandle, useRef } from 'react'
+
 import { cn } from '../../lib/utils'
 import { TextArea } from '../shadcn/ui/text-area'
 
diff --git a/packages/ui/src/components/Form/Form.tsx b/packages/ui/src/components/Form/Form.tsx
index 47bd2c8202c..128c4faa470 100644
--- a/packages/ui/src/components/Form/Form.tsx
+++ b/packages/ui/src/components/Form/Form.tsx
@@ -1,7 +1,8 @@
 'use client'
 
+import { FormikConfig, useFormik } from 'formik'
 import { useReducer } from 'react'
-import { useFormik, FormikConfig } from 'formik'
+
 import { FormContextProvider } from './FormContext'
 
 // interface Props extends FormikProps<any>, Partial FormikConfig<any> {
diff --git a/packages/ui/src/components/Icon/IconBase.tsx b/packages/ui/src/components/Icon/IconBase.tsx
index e4d7ee9a8bd..1920072baf9 100644
--- a/packages/ui/src/components/Icon/IconBase.tsx
+++ b/packages/ui/src/components/Icon/IconBase.tsx
@@ -5,6 +5,7 @@ import React from 'react'
 import styleHandler from '../../lib/theme/styleHandler'
 import { cn } from '../../lib/utils/cn'
 import { IconContext } from './IconContext'
+
 // @ts-ignore
 // import IconStyles from './Icon.module.css'
 
diff --git a/packages/ui/src/components/Icon/icons/IconPresence/IconPresence.tsx b/packages/ui/src/components/Icon/icons/IconPresence/IconPresence.tsx
index e137894dafe..51243ded725 100644
--- a/packages/ui/src/components/Icon/icons/IconPresence/IconPresence.tsx
+++ b/packages/ui/src/components/Icon/icons/IconPresence/IconPresence.tsx
@@ -1,6 +1,7 @@
 // DO NOT EDIT
 // @ts-ignore
 import IconBase from './../../IconBase'
+
 const SvgComponent = () => (
   <>
     <path
diff --git a/packages/ui/src/components/Image/Image.tsx b/packages/ui/src/components/Image/Image.tsx
index 643afd14aed..0cf76b99f4e 100644
--- a/packages/ui/src/components/Image/Image.tsx
+++ b/packages/ui/src/components/Image/Image.tsx
@@ -2,12 +2,13 @@
 
 import 'react-medium-image-zoom/dist/styles.css'
 
-import { useEffect, useState } from 'react'
-import NextImage, { type ImageProps as NextImageProps } from 'next/image'
-import { useTheme } from 'next-themes'
 import { useBreakpoint } from 'common'
-import { cn } from '../../lib/utils'
+import { useTheme } from 'next-themes'
+import NextImage, { type ImageProps as NextImageProps } from 'next/image'
+import { useEffect, useState } from 'react'
 import Zoom from 'react-medium-image-zoom'
+
+import { cn } from '../../lib/utils'
 import ZoomContent from './ZoomContent'
 
 export type CaptionAlign = 'left' | 'center' | 'right'
diff --git a/packages/ui/src/components/Input/Input.tsx b/packages/ui/src/components/Input/Input.tsx
index bbbf8302ca7..70091f0e4b8 100644
--- a/packages/ui/src/components/Input/Input.tsx
+++ b/packages/ui/src/components/Input/Input.tsx
@@ -1,12 +1,12 @@
 'use client'
 
+import { Copy } from 'lucide-react'
 import React, { useEffect, useState } from 'react'
 
-import { Copy } from 'lucide-react'
+import { HIDDEN_PLACEHOLDER } from '../../lib/constants'
 import { FormLayout } from '../../lib/Layout/FormLayout/FormLayout'
 import InputErrorIcon from '../../lib/Layout/InputErrorIcon'
 import InputIconContainer from '../../lib/Layout/InputIconContainer'
-import { HIDDEN_PLACEHOLDER } from '../../lib/constants'
 import styleHandler from '../../lib/theme/styleHandler'
 import { copyToClipboard } from '../../lib/utils'
 import { cn } from '../../lib/utils/cn'
diff --git a/packages/ui/src/components/InputOld/Input.js b/packages/ui/src/components/InputOld/Input.js
index 00c287a4d64..4d05fd3aa7d 100644
--- a/packages/ui/src/components/InputOld/Input.js
+++ b/packages/ui/src/components/InputOld/Input.js
@@ -1,5 +1,6 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
+
 import './Input.css'
 
 export const SIZES = ['small', 'medium']
diff --git a/packages/ui/src/components/Listbox/Listbox2.tsx b/packages/ui/src/components/Listbox/Listbox2.tsx
index 948c41ea036..aa41d5ab808 100644
--- a/packages/ui/src/components/Listbox/Listbox2.tsx
+++ b/packages/ui/src/components/Listbox/Listbox2.tsx
@@ -2,6 +2,7 @@
 
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
 import { flatten } from 'lodash'
+import { Check } from 'lucide-react'
 import React, { useEffect, useRef, useState } from 'react'
 
 import { FormLayout } from '../../lib/Layout/FormLayout/FormLayout'
@@ -11,7 +12,6 @@ import styleHandler from '../../lib/theme/styleHandler'
 import { cn } from '../../lib/utils/cn'
 import { useFormContext } from '../Form/FormContext'
 import { SelectContext } from './SelectContext'
-import { Check } from 'lucide-react'
 
 export interface Props extends Omit<React.InputHTMLAttributes<HTMLButtonElement>, 'size'> {
   className?: string
diff --git a/packages/ui/src/components/Listbox/index.tsx b/packages/ui/src/components/Listbox/index.tsx
index 79f42296955..5bbc0008547 100644
--- a/packages/ui/src/components/Listbox/index.tsx
+++ b/packages/ui/src/components/Listbox/index.tsx
@@ -1,3 +1,4 @@
 import Listbox from './Listbox2'
+
 export default Listbox
 export { default as Listbox } from './Listbox2'
diff --git a/packages/ui/src/components/Loading/Loading.tsx b/packages/ui/src/components/Loading/Loading.tsx
index 330ba09d668..9dffef2eda2 100644
--- a/packages/ui/src/components/Loading/Loading.tsx
+++ b/packages/ui/src/components/Loading/Loading.tsx
@@ -1,5 +1,6 @@
-import React from 'react'
 import { Loader2 } from 'lucide-react'
+import React from 'react'
+
 import styleHandler from '../../lib/theme/styleHandler'
 import { cn } from '../../lib/utils/cn'
 
diff --git a/packages/ui/src/components/Menu/Menu.tsx b/packages/ui/src/components/Menu/Menu.tsx
index ed699be2f1d..5c7374a6988 100644
--- a/packages/ui/src/components/Menu/Menu.tsx
+++ b/packages/ui/src/components/Menu/Menu.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import React from 'react'
+
 import styleHandler from '../../lib/theme/styleHandler'
 import { cn } from '../../lib/utils/cn'
 import Typography from '../Typography'
diff --git a/packages/ui/src/components/Mermaid/Mermaid.tsx b/packages/ui/src/components/Mermaid/Mermaid.tsx
index 1928c6d16d6..7d63da7c1e7 100644
--- a/packages/ui/src/components/Mermaid/Mermaid.tsx
+++ b/packages/ui/src/components/Mermaid/Mermaid.tsx
@@ -1,8 +1,9 @@
 'use client'
 
-import { useEffect, useState } from 'react'
 import mermaid from 'mermaid'
 import { useTheme } from 'next-themes'
+import { useEffect, useState } from 'react'
+
 import { cn } from '../../lib/utils/cn'
 
 // @mildtomato - 28/11/2025
diff --git a/packages/ui/src/components/Modal/Modal.tsx b/packages/ui/src/components/Modal/Modal.tsx
index df2b7adfd9d..0c1c0fe2574 100644
--- a/packages/ui/src/components/Modal/Modal.tsx
+++ b/packages/ui/src/components/Modal/Modal.tsx
@@ -1,20 +1,21 @@
 'use client'
 
 import React, { forwardRef, useEffect } from 'react'
+
 import styleHandler from '../../lib/theme/styleHandler'
 import { cn } from '../../lib/utils/cn'
 import { Button, ButtonVariantProps } from '../Button/Button'
 import {
   Dialog,
+  DialogClose,
   DialogContent,
+  DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogSection,
   DialogSectionSeparator,
   DialogTitle,
   DialogTrigger,
-  DialogDescription,
-  DialogClose,
 } from '../shadcn/ui/dialog'
 
 export interface ModalProps extends React.ComponentProps<typeof DialogContent> {
diff --git a/packages/ui/src/components/NavMenu/index.tsx b/packages/ui/src/components/NavMenu/index.tsx
index 7e6587b7295..d930eaa017c 100644
--- a/packages/ui/src/components/NavMenu/index.tsx
+++ b/packages/ui/src/components/NavMenu/index.tsx
@@ -1,4 +1,5 @@
-import { HTMLAttributes, PropsWithChildren, forwardRef } from 'react'
+import { forwardRef, HTMLAttributes, PropsWithChildren } from 'react'
+
 import { cn } from '../../lib/utils/cn'
 
 interface NavMenuProps extends HTMLAttributes<HTMLDivElement> {}
diff --git a/packages/ui/src/components/Popover/Popover.tsx b/packages/ui/src/components/Popover/Popover.tsx
index 59a3cf4aa2d..9db072823b9 100644
--- a/packages/ui/src/components/Popover/Popover.tsx
+++ b/packages/ui/src/components/Popover/Popover.tsx
@@ -2,8 +2,8 @@
 
 import type * as RadixPopoverTypes from '@radix-ui/react-popover'
 import * as RadixPopover from '@radix-ui/react-popover'
-import * as React from 'react'
 import { X } from 'lucide-react'
+import * as React from 'react'
 
 import styleHandler from '../../lib/theme/styleHandler'
 
diff --git a/packages/ui/src/components/PrePostTab/PrePostTab.tsx b/packages/ui/src/components/PrePostTab/PrePostTab.tsx
index d8ce22fcc50..dc85d071375 100644
--- a/packages/ui/src/components/PrePostTab/PrePostTab.tsx
+++ b/packages/ui/src/components/PrePostTab/PrePostTab.tsx
@@ -1,4 +1,5 @@
-import { forwardRef, ReactNode, PropsWithChildren, HTMLAttributes } from 'react'
+import { forwardRef, HTMLAttributes, PropsWithChildren, ReactNode } from 'react'
+
 import { cn } from '../../lib/utils'
 
 export interface PrePostTabProps extends HTMLAttributes<HTMLDivElement> {
diff --git a/packages/ui/src/components/Radio/index.tsx b/packages/ui/src/components/Radio/index.tsx
index 7089f813ecf..6b47866173f 100644
--- a/packages/ui/src/components/Radio/index.tsx
+++ b/packages/ui/src/components/Radio/index.tsx
@@ -1,3 +1,4 @@
 import Radio from './Radio'
+
 export default Radio
 export { default as Radio } from './Radio'
diff --git a/packages/ui/src/components/RadioOld/Radio.js b/packages/ui/src/components/RadioOld/Radio.js
index 8601699b2f4..e2293e5b041 100644
--- a/packages/ui/src/components/RadioOld/Radio.js
+++ b/packages/ui/src/components/RadioOld/Radio.js
@@ -1,5 +1,6 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
+
 import './Radio.css'
 
 /**
diff --git a/packages/ui/src/components/Select/index.tsx b/packages/ui/src/components/Select/index.tsx
index 631a630e25f..f177e1402d3 100644
--- a/packages/ui/src/components/Select/index.tsx
+++ b/packages/ui/src/components/Select/index.tsx
@@ -1,3 +1,4 @@
 import Select from './Select'
+
 export default Select
 export { default as Select } from './Select'
diff --git a/packages/ui/src/components/ShadowScrollArea/index.tsx b/packages/ui/src/components/ShadowScrollArea/index.tsx
index 49ac6210736..01aee89b607 100644
--- a/packages/ui/src/components/ShadowScrollArea/index.tsx
+++ b/packages/ui/src/components/ShadowScrollArea/index.tsx
@@ -1,5 +1,7 @@
 'use client'
+
 import * as React from 'react'
+
 import { cn } from '../../lib/utils/cn'
 import { useHorizontalScroll } from '../hooks/use-horizontal-scroll'
 
diff --git a/packages/ui/src/components/SidePanel/SidePanel.tsx b/packages/ui/src/components/SidePanel/SidePanel.tsx
index 8c0f9d53c9e..cde94fa4846 100644
--- a/packages/ui/src/components/SidePanel/SidePanel.tsx
+++ b/packages/ui/src/components/SidePanel/SidePanel.tsx
@@ -2,6 +2,7 @@
 
 import * as Dialog from '@radix-ui/react-dialog'
 import React from 'react'
+
 import { Button } from '../../components/Button/Button'
 import { Tooltip, TooltipContent, TooltipTrigger } from '../../components/shadcn/ui/tooltip'
 import styleHandler from '../../lib/theme/styleHandler'
diff --git a/packages/ui/src/components/SimpleCodeBlock/SimpleCodeBlock.tsx b/packages/ui/src/components/SimpleCodeBlock/SimpleCodeBlock.tsx
index 154715866c1..3dfcc9bad24 100644
--- a/packages/ui/src/components/SimpleCodeBlock/SimpleCodeBlock.tsx
+++ b/packages/ui/src/components/SimpleCodeBlock/SimpleCodeBlock.tsx
@@ -1,14 +1,15 @@
 'use client'
+
 /**
  * Copyright (c) 2017-present, Facebook, Inc.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-
 import { useTheme } from 'next-themes'
 import { Highlight, Language, Prism, themes } from 'prism-react-renderer'
-import { PropsWithChildren, createContext, useContext, useEffect, useRef, useState } from 'react'
+import { createContext, PropsWithChildren, useContext, useEffect, useRef, useState } from 'react'
+
 import { copyToClipboard } from '../../lib/utils'
 import { cn } from './../../lib/utils/cn'
 import { Button } from './../Button'
diff --git a/packages/ui/src/components/Space/Space.tsx b/packages/ui/src/components/Space/Space.tsx
index 8694d9e7287..5241d4603bc 100644
--- a/packages/ui/src/components/Space/Space.tsx
+++ b/packages/ui/src/components/Space/Space.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+
 // @ts-ignore
 // import SpaceStyles from './Space.module.css'
 
diff --git a/packages/ui/src/components/StatusIcon.tsx b/packages/ui/src/components/StatusIcon.tsx
index 75e3b9b5e9b..d3d8d72686a 100644
--- a/packages/ui/src/components/StatusIcon.tsx
+++ b/packages/ui/src/components/StatusIcon.tsx
@@ -1,6 +1,7 @@
-import { SVGProps, forwardRef } from 'react'
-import { cn } from '../lib/utils'
 import { Check } from 'lucide-react'
+import { forwardRef, SVGProps } from 'react'
+
+import { cn } from '../lib/utils'
 
 export interface StatusIconProps {
   hideBackground?: boolean
diff --git a/packages/ui/src/components/Tabs/Tabs.tsx b/packages/ui/src/components/Tabs/Tabs.tsx
index eb96b4bfa7d..ec5181caa74 100644
--- a/packages/ui/src/components/Tabs/Tabs.tsx
+++ b/packages/ui/src/components/Tabs/Tabs.tsx
@@ -9,6 +9,7 @@ import {
   type PropsWithChildren,
   type RefObject,
 } from 'react'
+
 import styleHandler from '../../lib/theme/styleHandler'
 
 export interface TabsProps {
diff --git a/packages/ui/src/components/Tabs/TabsProvider.tsx b/packages/ui/src/components/Tabs/TabsProvider.tsx
index 0f0f99470a0..f0857803357 100644
--- a/packages/ui/src/components/Tabs/TabsProvider.tsx
+++ b/packages/ui/src/components/Tabs/TabsProvider.tsx
@@ -2,14 +2,14 @@
 
 import { xor } from 'lodash'
 import {
-  type Dispatch,
-  type PropsWithChildren,
-  type SetStateAction,
   createContext,
   useCallback,
   useContext,
   useMemo,
   useState,
+  type Dispatch,
+  type PropsWithChildren,
+  type SetStateAction,
 } from 'react'
 
 export interface TabGroup {
diff --git a/packages/ui/src/components/TextLink/TextLink.tsx b/packages/ui/src/components/TextLink/TextLink.tsx
index 0df330769ba..005d5d6a2ac 100644
--- a/packages/ui/src/components/TextLink/TextLink.tsx
+++ b/packages/ui/src/components/TextLink/TextLink.tsx
@@ -1,8 +1,9 @@
 'use client'
 
-import Link from 'next/link'
-import { cn } from '../../lib/utils/cn'
 import { ChevronRight } from 'lucide-react'
+import Link from 'next/link'
+
+import { cn } from '../../lib/utils/cn'
 
 interface Props {
   label: string
diff --git a/packages/ui/src/components/ThemeProvider/ThemeProvider.tsx b/packages/ui/src/components/ThemeProvider/ThemeProvider.tsx
index 668127d4662..66972820bfb 100644
--- a/packages/ui/src/components/ThemeProvider/ThemeProvider.tsx
+++ b/packages/ui/src/components/ThemeProvider/ThemeProvider.tsx
@@ -3,6 +3,7 @@
 import { createContext } from 'react'
 
 import defaultTheme from '../../lib/theme/defaultTheme'
+
 // import useDarkMode from './utils/useDarkMode'
 
 interface ThemeContextInterface {
diff --git a/packages/ui/src/components/TreeView/TreeView.tsx b/packages/ui/src/components/TreeView/TreeView.tsx
index e3c9a97a291..5f7266f1ec5 100644
--- a/packages/ui/src/components/TreeView/TreeView.tsx
+++ b/packages/ui/src/components/TreeView/TreeView.tsx
@@ -12,6 +12,7 @@ import {
   useState,
 } from 'react'
 import TreeViewPrimitive, { flattenTree } from 'react-accessible-treeview'
+
 import { cn } from '../../lib/utils'
 import { Input } from '../shadcn/ui/input'
 
diff --git a/packages/ui/src/components/Typography/Link.tsx b/packages/ui/src/components/Typography/Link.tsx
index b7122dcb14e..e170d8a307f 100644
--- a/packages/ui/src/components/Typography/Link.tsx
+++ b/packages/ui/src/components/Typography/Link.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+
 // @ts-ignore
 // import LinkStyles from './Link.module.css'
 
diff --git a/packages/ui/src/components/Typography/Text.tsx b/packages/ui/src/components/Typography/Text.tsx
index d58992eff37..ddf67cb0fcd 100644
--- a/packages/ui/src/components/Typography/Text.tsx
+++ b/packages/ui/src/components/Typography/Text.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+
 // @ts-ignore
 // import TextStyles from './Text.module.css'
 
diff --git a/packages/ui/src/components/Typography/Title.tsx b/packages/ui/src/components/Typography/Title.tsx
index a184ca7cc9d..18cebabb7e7 100644
--- a/packages/ui/src/components/Typography/Title.tsx
+++ b/packages/ui/src/components/Typography/Title.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+
 // @ts-ignore
 // import TitleStyles from './Title.module.css'
 
diff --git a/packages/ui/src/components/Typography/Typography.tsx b/packages/ui/src/components/Typography/Typography.tsx
index f9dc9592d5f..1762efa0064 100644
--- a/packages/ui/src/components/Typography/Typography.tsx
+++ b/packages/ui/src/components/Typography/Typography.tsx
@@ -1,9 +1,10 @@
 import React from 'react'
+
+import Link from './Link'
+import Text from './Text'
+import Title from './Title'
 // @ts-ignore
 import TypographyStyles from './Typography.module.css'
-import Title from './Title'
-import Text from './Text'
-import Link from './Link'
 
 function Typography({ children, className, tag = 'div', style }: any) {
   // let classes = [
diff --git a/packages/ui/src/components/Typography/index.tsx b/packages/ui/src/components/Typography/index.tsx
index 4761fd9f69e..fbe8128e16d 100644
--- a/packages/ui/src/components/Typography/index.tsx
+++ b/packages/ui/src/components/Typography/index.tsx
@@ -1,3 +1,4 @@
 import Typography from './Typography'
+
 export default Typography
 export { default as Typography } from './Typography'
diff --git a/packages/ui/src/components/radio-group-stacked.tsx b/packages/ui/src/components/radio-group-stacked.tsx
index 86447f8bf89..5d8ea4cf1da 100644
--- a/packages/ui/src/components/radio-group-stacked.tsx
+++ b/packages/ui/src/components/radio-group-stacked.tsx
@@ -1,9 +1,9 @@
 'use client'
 
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
+import { Circle } from 'lucide-react'
 import * as React from 'react'
 
-import { Circle } from 'lucide-react'
 import { Label } from '../components/shadcn/ui/label'
 import { cn } from '../lib/utils/cn'
 
diff --git a/packages/ui/src/components/shadcn/ui/alert-dialog.tsx b/packages/ui/src/components/shadcn/ui/alert-dialog.tsx
index 095d30c2475..760159dc0a6 100644
--- a/packages/ui/src/components/shadcn/ui/alert-dialog.tsx
+++ b/packages/ui/src/components/shadcn/ui/alert-dialog.tsx
@@ -1,9 +1,9 @@
 'use client'
 
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
+import { cva, VariantProps } from 'class-variance-authority'
 import * as React from 'react'
 
-import { cva, VariantProps } from 'class-variance-authority'
 import { cn } from '../../../lib/utils/cn'
 import { ButtonVariantProps, buttonVariants } from './../../Button'
 
diff --git a/packages/ui/src/components/shadcn/ui/breadcrumb.tsx b/packages/ui/src/components/shadcn/ui/breadcrumb.tsx
index 062b60d3670..c933f06de3a 100644
--- a/packages/ui/src/components/shadcn/ui/breadcrumb.tsx
+++ b/packages/ui/src/components/shadcn/ui/breadcrumb.tsx
@@ -1,6 +1,7 @@
 import { Slot } from '@radix-ui/react-slot'
 import { ChevronRightIcon } from 'lucide-react'
 import * as React from 'react'
+
 import { cn } from '../../../lib/utils'
 
 const Breadcrumb = React.forwardRef<
diff --git a/packages/ui/src/components/shadcn/ui/button-group.tsx b/packages/ui/src/components/shadcn/ui/button-group.tsx
index 5be74cb993a..ad7cace52bf 100644
--- a/packages/ui/src/components/shadcn/ui/button-group.tsx
+++ b/packages/ui/src/components/shadcn/ui/button-group.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import * as React from 'react'
+
 import { cn } from '../../../lib/utils/cn'
 import { Button, ButtonProps } from '../../Button/Button'
 
diff --git a/packages/ui/src/components/shadcn/ui/command.tsx b/packages/ui/src/components/shadcn/ui/command.tsx
index bcba65695ee..18b98971db1 100644
--- a/packages/ui/src/components/shadcn/ui/command.tsx
+++ b/packages/ui/src/components/shadcn/ui/command.tsx
@@ -2,7 +2,7 @@
 
 import { DialogProps } from '@radix-ui/react-dialog'
 import { Command as CommandPrimitive } from 'cmdk'
-import { Search, X as RemoveIcon } from 'lucide-react'
+import { X as RemoveIcon, Search } from 'lucide-react'
 import * as React from 'react'
 
 import { cn } from '../../../lib/utils/cn'
diff --git a/packages/ui/src/components/shadcn/ui/dialog.tsx b/packages/ui/src/components/shadcn/ui/dialog.tsx
index a1ebda78e55..21df6355f6c 100644
--- a/packages/ui/src/components/shadcn/ui/dialog.tsx
+++ b/packages/ui/src/components/shadcn/ui/dialog.tsx
@@ -2,10 +2,10 @@
 
 import * as DialogPrimitive from '@radix-ui/react-dialog'
 import { DialogProps } from '@radix-ui/react-dialog'
+import { cva, VariantProps } from 'class-variance-authority'
 import { X } from 'lucide-react'
 import * as React from 'react'
 
-import { VariantProps, cva } from 'class-variance-authority'
 import { cn } from '../../../lib/utils/cn'
 
 export const DIALOG_PADDING_Y_SMALL = 'py-4'
diff --git a/packages/ui/src/components/shadcn/ui/field.tsx b/packages/ui/src/components/shadcn/ui/field.tsx
index cfb8a4ae03e..6489c33f275 100644
--- a/packages/ui/src/components/shadcn/ui/field.tsx
+++ b/packages/ui/src/components/shadcn/ui/field.tsx
@@ -1,5 +1,5 @@
-import { useMemo } from 'react'
 import { cva, type VariantProps } from 'class-variance-authority'
+import { useMemo } from 'react'
 
 import { cn } from '../../../lib/utils/cn'
 import { Label } from './label'
diff --git a/packages/ui/src/components/shadcn/ui/form.tsx b/packages/ui/src/components/shadcn/ui/form.tsx
index 840e9ff40af..2f562dc2c92 100644
--- a/packages/ui/src/components/shadcn/ui/form.tsx
+++ b/packages/ui/src/components/shadcn/ui/form.tsx
@@ -2,6 +2,7 @@
 
 import * as LabelPrimitive from '@radix-ui/react-label'
 import { Slot } from '@radix-ui/react-slot'
+import { AnimatePresence, motion } from 'framer-motion'
 import * as React from 'react'
 import {
   Controller,
@@ -13,7 +14,6 @@ import {
   useWatch,
 } from 'react-hook-form'
 
-import { AnimatePresence, motion } from 'framer-motion'
 import { cn } from '../../../lib/utils/cn'
 import { Label } from './label'
 
diff --git a/packages/ui/src/components/shadcn/ui/input.tsx b/packages/ui/src/components/shadcn/ui/input.tsx
index 880315d0f17..111e4edfb63 100644
--- a/packages/ui/src/components/shadcn/ui/input.tsx
+++ b/packages/ui/src/components/shadcn/ui/input.tsx
@@ -1,5 +1,6 @@
-import { VariantProps, cva } from 'class-variance-authority'
+import { cva, VariantProps } from 'class-variance-authority'
 import * as React from 'react'
+
 import { SIZE_VARIANTS, SIZE_VARIANTS_DEFAULT } from '../../../lib/constants'
 import { cn } from '../../../lib/utils/cn'
 
diff --git a/packages/ui/src/components/shadcn/ui/resizable.tsx b/packages/ui/src/components/shadcn/ui/resizable.tsx
index 02ea512c18c..e36e712932d 100644
--- a/packages/ui/src/components/shadcn/ui/resizable.tsx
+++ b/packages/ui/src/components/shadcn/ui/resizable.tsx
@@ -2,8 +2,8 @@
 
 import { GripVertical } from 'lucide-react'
 import * as ResizablePrimitive from 'react-resizable-panels'
-
 import { ImperativePanelHandle } from 'react-resizable-panels'
+
 import { cn } from '../../../lib/utils/cn'
 
 const ResizablePanelGroup = ({
diff --git a/packages/ui/src/components/shadcn/ui/select.tsx b/packages/ui/src/components/shadcn/ui/select.tsx
index 93b17bcf410..47cbe3b5678 100644
--- a/packages/ui/src/components/shadcn/ui/select.tsx
+++ b/packages/ui/src/components/shadcn/ui/select.tsx
@@ -1,10 +1,10 @@
 'use client'
 
 import * as SelectPrimitive from '@radix-ui/react-select'
+import { cva, VariantProps } from 'class-variance-authority'
 import { Check, ChevronDown, ChevronUp } from 'lucide-react'
 import * as React from 'react'
 
-import { VariantProps, cva } from 'class-variance-authority'
 import { SIZE_VARIANTS, SIZE_VARIANTS_DEFAULT } from '../../../lib/constants'
 import { cn } from '../../../lib/utils/cn'
 
diff --git a/packages/ui/src/components/shadcn/ui/sheet.tsx b/packages/ui/src/components/shadcn/ui/sheet.tsx
index b6803b39d6e..7a1697cd853 100644
--- a/packages/ui/src/components/shadcn/ui/sheet.tsx
+++ b/packages/ui/src/components/shadcn/ui/sheet.tsx
@@ -2,9 +2,9 @@
 
 import * as SheetPrimitive from '@radix-ui/react-dialog'
 import { cva, type VariantProps } from 'class-variance-authority'
+import { X } from 'lucide-react'
 import * as React from 'react'
 
-import { X } from 'lucide-react'
 import { cn } from '../../../lib/utils/cn'
 
 const Sheet = SheetPrimitive.Root
diff --git a/packages/ui/src/components/shadcn/ui/sidebar.tsx b/packages/ui/src/components/shadcn/ui/sidebar.tsx
index d322e70d370..7938f2716c5 100644
--- a/packages/ui/src/components/shadcn/ui/sidebar.tsx
+++ b/packages/ui/src/components/shadcn/ui/sidebar.tsx
@@ -1,9 +1,10 @@
 'use client'
 
 import { Slot } from '@radix-ui/react-slot'
-import { VariantProps, cva } from 'class-variance-authority'
+import { cva, VariantProps } from 'class-variance-authority'
 import { PanelLeft } from 'lucide-react'
 import * as React from 'react'
+
 import { cn } from './../../../lib/utils'
 import { useIsMobile } from './../../hooks/use-mobile'
 import { Button } from './button'
diff --git a/packages/ui/src/components/shadcn/ui/sonner-progress.tsx b/packages/ui/src/components/shadcn/ui/sonner-progress.tsx
index d77fe9cd47e..d349947ac03 100644
--- a/packages/ui/src/components/shadcn/ui/sonner-progress.tsx
+++ b/packages/ui/src/components/shadcn/ui/sonner-progress.tsx
@@ -1,4 +1,5 @@
 import { Loader2 } from 'lucide-react'
+
 import { Progress } from './progress'
 
 /**
diff --git a/packages/ui/src/components/shadcn/ui/switch.tsx b/packages/ui/src/components/shadcn/ui/switch.tsx
index 9bd213aca28..dd53352d908 100644
--- a/packages/ui/src/components/shadcn/ui/switch.tsx
+++ b/packages/ui/src/components/shadcn/ui/switch.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import * as SwitchPrimitives from '@radix-ui/react-switch'
-import { VariantProps, cva } from 'class-variance-authority'
+import { cva, VariantProps } from 'class-variance-authority'
 import * as React from 'react'
 
 import { cn } from '../../../lib/utils/cn'
diff --git a/packages/ui/src/components/shadcn/ui/toggle-group.tsx b/packages/ui/src/components/shadcn/ui/toggle-group.tsx
index 5244995011c..bb714becd59 100644
--- a/packages/ui/src/components/shadcn/ui/toggle-group.tsx
+++ b/packages/ui/src/components/shadcn/ui/toggle-group.tsx
@@ -1,8 +1,8 @@
 'use client'
 
-import * as React from 'react'
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'
 import { VariantProps } from 'class-variance-authority'
+import * as React from 'react'
 
 import { cn } from '../../../lib/utils'
 import { toggleVariants } from './toggle'
diff --git a/packages/ui/src/layout/ai-icon-animation/ai-icon-animation.tsx b/packages/ui/src/layout/ai-icon-animation/ai-icon-animation.tsx
index 0e49d868960..2d676842175 100644
--- a/packages/ui/src/layout/ai-icon-animation/ai-icon-animation.tsx
+++ b/packages/ui/src/layout/ai-icon-animation/ai-icon-animation.tsx
@@ -1,7 +1,8 @@
 'use client'
 
 import { motion, useMotionValue, useSpring } from 'framer-motion'
-import { useRef, useState, memo } from 'react'
+import { memo, useRef, useState } from 'react'
+
 import { cn } from '../../lib/utils'
 
 interface AiIconAnimationProps {
diff --git a/packages/ui/src/layout/banners/Announcement.tsx b/packages/ui/src/layout/banners/Announcement.tsx
index aef0cde8e3e..97df6391683 100644
--- a/packages/ui/src/layout/banners/Announcement.tsx
+++ b/packages/ui/src/layout/banners/Announcement.tsx
@@ -1,11 +1,10 @@
 'use client'
 
-import { useEffect, useState } from 'react'
-
-import { usePathname } from 'next/navigation'
-import { PropsWithChildren } from 'react'
-import { cn } from '../../lib/utils/cn'
 import { X } from 'lucide-react'
+import { usePathname } from 'next/navigation'
+import { PropsWithChildren, useEffect, useState } from 'react'
+
+import { cn } from '../../lib/utils/cn'
 
 export interface AnnouncementProps {
   show: boolean
diff --git a/packages/ui/src/lib/Layout/FormLayout/FormLayout.tsx b/packages/ui/src/lib/Layout/FormLayout/FormLayout.tsx
index d5c65738d29..5ed16265e3f 100644
--- a/packages/ui/src/lib/Layout/FormLayout/FormLayout.tsx
+++ b/packages/ui/src/lib/Layout/FormLayout/FormLayout.tsx
@@ -1,7 +1,9 @@
 import React from 'react'
+
 // @ts-ignore
 import defaultTheme from '../../theme/defaultTheme'
 import { cn } from '../../utils'
+
 // @ts-ignore
 // import FormLayoutStyles from './FormLayout.module.css'
 
diff --git a/packages/ui/src/lib/Layout/InputErrorIcon.tsx b/packages/ui/src/lib/Layout/InputErrorIcon.tsx
index 08cb9d5d2c2..f1a48db0c41 100644
--- a/packages/ui/src/lib/Layout/InputErrorIcon.tsx
+++ b/packages/ui/src/lib/Layout/InputErrorIcon.tsx
@@ -1,6 +1,7 @@
-import React from 'react'
-import styleHandler from '../theme/styleHandler'
 import { AlertCircle } from 'lucide-react'
+import React from 'react'
+
+import styleHandler from '../theme/styleHandler'
 
 interface Props {
   style?: React.CSSProperties
diff --git a/packages/ui/src/lib/Layout/InputIconContainer.tsx b/packages/ui/src/lib/Layout/InputIconContainer.tsx
index a8fcd8bc37e..240a41f9bd3 100644
--- a/packages/ui/src/lib/Layout/InputIconContainer.tsx
+++ b/packages/ui/src/lib/Layout/InputIconContainer.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+
 import styleHandler from '../theme/styleHandler'
 import { cn } from '../utils'
 
diff --git a/packages/ui/src/lib/Markdown/index.tsx b/packages/ui/src/lib/Markdown/index.tsx
index a38f1cfdfb0..1ae80188bb3 100644
--- a/packages/ui/src/lib/Markdown/index.tsx
+++ b/packages/ui/src/lib/Markdown/index.tsx
@@ -1,7 +1,8 @@
 'use client'
 
-import { CodeBlock } from '../../components/CodeBlock/CodeBlock'
 import Image from 'next/image'
+
+import { CodeBlock } from '../../components/CodeBlock/CodeBlock'
 import { cn } from '../utils'
 
 const NextImageHandler = (props: any) => {
diff --git a/packages/ui/src/lib/Overlay/Overlay.tsx b/packages/ui/src/lib/Overlay/Overlay.tsx
index 62af380f754..072101c575c 100644
--- a/packages/ui/src/lib/Overlay/Overlay.tsx
+++ b/packages/ui/src/lib/Overlay/Overlay.tsx
@@ -1,14 +1,14 @@
 'use client'
 
+import { Transition } from '@headlessui/react'
 import React, { useEffect, useRef, useState } from 'react'
+
+import { AnimationTailwindClasses } from '../../types'
 //@ts-ignore
 import { useOnClickOutside } from './../../lib/Hooks'
-import { DropdownContext } from './OverlayContext'
-import { AnimationTailwindClasses } from '../../types'
 // @ts-ignore
 import OverlayStyles from './Overlay.module.css'
-
-import { Transition } from '@headlessui/react'
+import { DropdownContext } from './OverlayContext'
 
 interface Props {
   visible?: boolean
diff --git a/packages/ui/src/lib/commonCva.ts b/packages/ui/src/lib/commonCva.ts
index 932e7456052..9be0d669ab0 100644
--- a/packages/ui/src/lib/commonCva.ts
+++ b/packages/ui/src/lib/commonCva.ts
@@ -1,4 +1,4 @@
-import { VariantProps, cva } from 'class-variance-authority'
+import { cva, VariantProps } from 'class-variance-authority'
 
 const defaults = {
   bg: {
diff --git a/packages/ui/src/lib/theme/styleHandler.ts b/packages/ui/src/lib/theme/styleHandler.ts
index e9a02154f89..4d48b1fdb41 100644
--- a/packages/ui/src/lib/theme/styleHandler.ts
+++ b/packages/ui/src/lib/theme/styleHandler.ts
@@ -1,6 +1,7 @@
 import { useContext } from 'react'
-import defaultTheme from './../theme/defaultTheme'
+
 import { ThemeContext } from './../../components/ThemeProvider/ThemeProvider'
+import defaultTheme from './../theme/defaultTheme'
 
 export default function styleHandler(target: string) {
   let {
diff --git a/packages/ui/src/lib/theme/themeContext.tsx b/packages/ui/src/lib/theme/themeContext.tsx
index 338224aad47..2126c1ca65a 100644
--- a/packages/ui/src/lib/theme/themeContext.tsx
+++ b/packages/ui/src/lib/theme/themeContext.tsx
@@ -1,10 +1,10 @@
 'use client'
 
-import React, { useLayoutEffect, useMemo } from 'react'
-import { createContext } from 'react'
-import defaultTheme from './defaultTheme'
+import React, { createContext, useLayoutEffect, useMemo } from 'react'
 
 import { mergeDeep } from './../../lib/utils'
+import defaultTheme from './defaultTheme'
+
 // import useDarkMode from './utils/useDarkMode'
 
 interface ThemeContextInterface {
diff --git a/packages/ui/vitest.setup.ts b/packages/ui/vitest.setup.ts
index aa5d0c82e44..145d98fd389 100644
--- a/packages/ui/vitest.setup.ts
+++ b/packages/ui/vitest.setup.ts
@@ -1,6 +1,6 @@
 /// <reference types="@testing-library/jest-dom" />
-
 import '@testing-library/jest-dom/vitest'
+
 import { cleanup } from '@testing-library/react'
 import { afterEach, vi } from 'vitest'