51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T1e06,'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' export const formatBytes = ( bytes: number, decimals = 2, size?: 'bytes' | 'KB' | 'MB' | 'GB' | 'TB' | 'PB' | 'EB' | 'ZB' | 'YB' ) => { const k = 1000 const dm = decimals < 0 ? 0 : decimals const sizes = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'] if (bytes === 0 || bytes === undefined) return size !== undefined ? `0 ${size}` : '0 bytes' const i = size !== undefined ? sizes.indexOf(size) : Math.floor(Math.log(bytes) / Math.log(k)) return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i] } type DropzoneContextType = Omit const DropzoneContext = createContext(undefined) type DropzoneProps = UseSupabaseUploadReturn & { className?: string } const Dropzone = ({ className, children, getRootProps, getInputProps, ...restProps }: PropsWithChildren) => { const isSuccess = restProps.isSuccess const isActive = restProps.isDragActive const isInvalid = (restProps.isDragActive && restProps.isDragReject) || (restProps.errors.length > 0 && !restProps.isSuccess) || restProps.files.some((file) => file.errors.length !== 0) return (

{children}

) } const DropzoneContent = ({ className }: { className?: string }) => { const { files, setFiles, onUpload, loading, successes, errors, maxFileSize, maxFiles, isSuccess, } = useDropzoneContext() const exceedMaxFiles = files.length > maxFiles const handleRemoveFile = useCallback( (fileName: string) => { setFiles(files.filter((file) => file.name !== fileName)) }, [files, setFiles] ) if (isSuccess) { return (

Successfully uploaded {files.length} file{files.length > 1 ? 's' : ''}

) } return (

{files.map((file, idx) => { const fileError = errors.find((e) => e.name === file.name) const isSuccessfullyUploaded = !!successes.find((e) => e === file.name) return (

{file.type.startsWith('image/') ? (

) : (

)}

{file.name}

{file.errors.length > 0 ? (

{file.errors .map((e) => e.message.startsWith('File is larger than') ? `File is larger than ${formatBytes(maxFileSize, 2)} (Size: ${formatBytes(file.size, 2)})` : e.message ) .join(', ')}

) : loading && !isSuccessfullyUploaded ? (

Uploading file...

) : !!fileError ? (

Failed to upload: {fileError.message}

) : isSuccessfullyUploaded ? (

Successfully uploaded file

) : (

{formatBytes(file.size, 2)}

)}

{!loading && !isSuccessfullyUploaded && ( )}

) })} {exceedMaxFiles && (

You may upload only up to {maxFiles} files, please remove {files.length - maxFiles} file {files.length - maxFiles > 1 ? 's' : ''}.

)} {files.length > 0 && !exceedMaxFiles && (

)}

) } const DropzoneEmptyState = ({ className }: { className?: string }) => { const { maxFiles, maxFileSize, inputRef, isSuccess } = useDropzoneContext() if (isSuccess) { return null } return (

Upload{!!maxFiles && maxFiles > 1 ? ` ${maxFiles}` : ''} file {!maxFiles || maxFiles > 1 ? 's' : ''}

Drag and drop or{' '} inputRef.current?.click()} className="underline cursor-pointer transition hover:text-foreground" > select {maxFiles === 1 ? `file` : 'files'} {' '} to upload

{maxFileSize !== Number.POSITIVE_INFINITY && (

Maximum file size: {formatBytes(maxFileSize, 2)}

)}

) } const useDropzoneContext = () => { const context = useContext(DropzoneContext) if (!context) { throw new Error('useDropzoneContext must be used within a Dropzone') } return context } export { Dropzone, DropzoneContent, DropzoneEmptyState, useDropzoneContext } 54:T1751,import { useCallback, useEffect, useMemo, useState } from 'react' import { useDropzone, type FileError, type FileRejection } from 'react-dropzone' import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client' const supabase = createClient() interface FileWithPreview extends File { preview?: string errors: readonly FileError[] } type UseSupabaseUploadOptions = { /** * Name of bucket to upload files to in your Supabase project */ bucketName: string /** * Folder to upload files to in the specified bucket within your Supabase project. * * Defaults to uploading files to the root of the bucket * * e.g If specified path is `test`, your file will be uploaded as `test/file_name` */ path?: string /** * Allowed MIME types for each file upload (e.g `image/png`, `text/html`, etc). Wildcards are also supported (e.g `image/*`). * * Defaults to allowing uploading of all MIME types. */ allowedMimeTypes?: string[] /** * Maximum upload size of each file allowed in bytes. (e.g 1000 bytes = 1 KB) */ maxFileSize?: number /** * Maximum number of files allowed per upload. */ maxFiles?: number /** * The number of seconds the asset is cached in the browser and in the Supabase CDN. * * This is set in the Cache-Control: max-age= header. Defaults to 3600 seconds. */ cacheControl?: number /** * When set to true, the file is overwritten if it exists. * * When set to false, an error is thrown if the object already exists. Defaults to `false` */ upsert?: boolean } type UseSupabaseUploadReturn = ReturnType const useSupabaseUpload = (options: UseSupabaseUploadOptions) => { const { bucketName, path, allowedMimeTypes = [], maxFileSize = Number.POSITIVE_INFINITY, maxFiles = 1, cacheControl = 3600, upsert = false, } = options const [files, setFiles] = useState([]) const [loading, setLoading] = useState(false) const [errors, setErrors] = useState<{ name: string; message: string }[]>([]) const [successes, setSuccesses] = useState([]) const isSuccess = useMemo(() => { if (errors.length === 0 && successes.length === 0) { return false } if (errors.length === 0 && successes.length === files.length) { return true } return false }, [errors.length, successes.length, files.length]) const onDrop = useCallback( (acceptedFiles: File[], fileRejections: FileRejection[]) => { const validFiles = acceptedFiles .filter((file) => !files.find((x) => x.name === file.name)) .map((file) => { ;(file as FileWithPreview).preview = URL.createObjectURL(file) ;(file as FileWithPreview).errors = [] return file as FileWithPreview }) const invalidFiles = fileRejections.map(({ file, errors }) => { ;(file as FileWithPreview).preview = URL.createObjectURL(file) ;(file as FileWithPreview).errors = errors return file as FileWithPreview }) const newFiles = [...files, ...validFiles, ...invalidFiles] setFiles(newFiles) }, [files, setFiles] ) const dropzoneProps = useDropzone({ onDrop, noClick: true, accept: allowedMimeTypes.reduce((acc, type) => ({ ...acc, [type]: [] }), {}), maxSize: maxFileSize, maxFiles: maxFiles, multiple: maxFiles !== 1, }) const onUpload = useCallback(async () => { setLoading(true) // [Joshen] This is to support handling partial successes // If any files didn't upload for any reason, hitting "Upload" again will only upload the files that had errors const filesWithErrors = errors.map((x) => x.name) const filesToUpload = filesWithErrors.length > 0 ? [ ...files.filter((f) => filesWithErrors.includes(f.name)), ...files.filter((f) => !successes.includes(f.name)), ] : files const responses = await Promise.all( filesToUpload.map(async (file) => { const { error } = await supabase.storage .from(bucketName) .upload(!!path ? `${path}/${file.name}` : file.name, file, { cacheControl: cacheControl.toString(), upsert, }) if (error) { return { name: file.name, message: error.message } } else { return { name: file.name, message: undefined } } }) ) const responseErrors = responses.filter((x) => x.message !== undefined) // if there were errors previously, this function tried to upload the files again so we should clear/overwrite the existing errors. setErrors(responseErrors) const responseSuccesses = responses.filter((x) => x.message === undefined) const newSuccesses = Array.from( new Set([...successes, ...responseSuccesses.map((x) => x.name)]) ) setSuccesses(newSuccesses) setLoading(false) }, [files, path, bucketName, errors, successes]) useEffect(() => { if (files.length === 0) { setErrors([]) } // If the number of files doesn't exceed the maxFiles parameter, remove the error 'Too many files' from each file if (files.length <= maxFiles) { let changed = false const newFiles = files.map((file) => { if (file.errors.some((e) => e.code === 'too-many-files')) { file.errors = file.errors.filter((e) => e.code !== 'too-many-files') changed = true } return file }) if (changed) { setFiles(newFiles) } } }, [files.length, setFiles, maxFiles]) return { files, setFiles, successes, isSuccess, loading, errors, setErrors, onUpload, maxFileSize: maxFileSize, maxFiles: maxFiles, allowedMimeTypes, ...dropzoneProps, } } export { useSupabaseUpload, type UseSupabaseUploadOptions, type UseSupabaseUploadReturn } 55:Ta22,import { createServerClient } from '@supabase/ssr' import { NextResponse, type NextRequest } from 'next/server' export async function updateSession(request: NextRequest) { let supabaseResponse = NextResponse.next({ request, }) // With Fluid compute, don't put this client in a global environment // variable. Always create a new one on each request. const supabase = createServerClient( process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY!, { cookies: { getAll() { return request.cookies.getAll() }, setAll(cookiesToSet) { cookiesToSet.forEach(({ name, value }) => request.cookies.set(name, value)) supabaseResponse = NextResponse.next({ request, }) cookiesToSet.forEach(({ name, value, options }) => supabaseResponse.cookies.set(name, value, options) ) }, }, } ) // Do not run code between createServerClient and // supabase.auth.getClaims(). A simple mistake could make it very hard to debug // issues with users being randomly logged out. // IMPORTANT: If you remove getClaims() and you use server-side rendering // with the Supabase client, your users may be randomly logged out. const { data } = await supabase.auth.getClaims() const user = data?.claims if ( !user && !request.nextUrl.pathname.startsWith('/login') && !request.nextUrl.pathname.startsWith('/auth') && // the OAuth consent route sends unauthenticated visitors to the login page // itself, so that it can preserve the authorization in the `next` parameter request.nextUrl.pathname !== '/oauth/consent' ) { // no user, potentially respond by redirecting the user to the login page const url = request.nextUrl.clone() url.pathname = '/auth/login' return NextResponse.redirect(url) } // IMPORTANT: You *must* return the supabaseResponse object as it is. // If you're creating a new response object with NextResponse.next() make sure to: // 1. Pass the request in it, like so: // const myNewResponse = NextResponse.next({ request }) // 2. Copy over the cookies, like so: // myNewResponse.cookies.setAll(supabaseResponse.cookies.getAll()) // 3. Change the myNewResponse object to fit your needs, but avoid changing // the cookies! // 4. Finally: // return myNewResponse // If this is not done, you may be causing the browser and server to go out // of sync and terminate the user's session prematurely! return supabaseResponse } 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","react-dropzone",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-dropzone","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"react-dropzone"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","@supabase/ssr@latest",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40supabase%2Fssr","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@supabase/ssr@latest"}]]}]}],["$","li","@supabase/supabase-js@latest",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40supabase%2Fsupabase-js","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@supabase/supabase-js@latest"}]]}]}]]}],["$","$L51",null,{"namespace":"@supabase","registryDependencies":["button"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/default/blocks/dropzone/components/dropzone.tsx","content":"$53","type":"registry:component"},{"path":"registry/default/blocks/dropzone/hooks/use-supabase-upload.ts","content":"$54","type":"registry:hook"},{"path":"registry/default/clients/nextjs/lib/supabase/client.ts","content":"import { createBrowserClient } from '@supabase/ssr'\n\nexport function createClient() {\n return createBrowserClient(\n process.env.NEXT_PUBLIC_SUPABASE_URL!,\n process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY!\n )\n}\n","type":"registry:lib"},{"path":"registry/default/clients/nextjs/lib/supabase/middleware.ts","content":"$55","type":"registry:lib"},{"path":"registry/default/clients/nextjs/lib/supabase/server.ts","content":"import { createServerClient } from '@supabase/ssr'\nimport { cookies } from 'next/headers'\n\n/**\n * If using Fluid compute: Don't put this client in a global variable. Always create a new client within each\n * function when using it.\n */\nexport async function createClient() {\n const cookieStore = await cookies()\n\n return createServerClient(\n process.env.NEXT_PUBLIC_SUPABASE_URL!,\n process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY!,\n {\n cookies: {\n getAll() {\n return cookieStore.getAll()\n },\n setAll(cookiesToSet) {\n try {\n cookiesToSet.forEach(({ name, value, options }) =>\n cookieStore.set(name, value, options)\n )\n } catch {\n // The `setAll` method was called from a Server Component.\n // This can be ignored if you have middleware refreshing\n // user sessions.\n }\n },\n },\n }\n )\n}\n","type":"registry:lib"}],"className":"h-[70svh] min-h-80"}]]}]