54: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"] 55: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"] 56:T927,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' const avatarStackVariants = cva('flex -space-x-4 -space-y-4', { variants: { orientation: { vertical: 'flex-row', horizontal: 'flex-col', }, }, defaultVariants: { orientation: 'vertical', }, }) export interface AvatarStackProps extends React.HTMLAttributes, VariantProps { avatars: { name: string; image: string }[] maxAvatarsAmount?: number } const AvatarStack = ({ className, orientation, avatars, maxAvatarsAmount = 3, ...props }: AvatarStackProps) => { const shownAvatars = avatars.slice(0, maxAvatarsAmount) const hiddenAvatars = avatars.slice(maxAvatarsAmount) return (

{shownAvatars.map(({ name, image }, index) => ( {name ?.split(' ') ?.map((word) => word[0]) ?.join('') ?.toUpperCase()}

{name}

))} {hiddenAvatars.length ? ( +{avatars.length - shownAvatars.length} {hiddenAvatars.map(({ name }, index) => (

{name}

))} ) : null}

) } export { AvatarStack, avatarStackVariants } 57:T676,'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/tanstack/lib/supabase/client' const supabase = createClient() export type RealtimeUser = { id: string name: string image: string } export const useRealtimePresenceRoom = (roomName: string) => { const currentUserImage = useCurrentUserImage() const currentUserName = useCurrentUserName() const [users, setUsers] = useState>({}) useEffect(() => { const room = supabase.channel(roomName) room .on('presence', { event: 'sync' }, () => { const newState = room.presenceState<{ image: string; name: string }>() const newUsers = Object.fromEntries( Object.entries(newState).map(([key, values]) => [ key, { name: values[0].name, image: values[0].image }, ]) ) as Record setUsers(newUsers) }) .subscribe(async (status) => { if (status === REALTIME_SUBSCRIBE_STATES.SUBSCRIBED) { await room.track({ name: currentUserName, image: currentUserImage, }) } else { setUsers({}) } }) return () => { room.unsubscribe() } }, [roomName, currentUserName, currentUserImage]) return { users } } 53:["$","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","@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"}]]}]}]]}],["$","$L54",null,{"namespace":"@supabase","registryDependencies":["avatar","tooltip"]}]]}],null]}],["$","$L55",null,{"files":[{"path":"registry/default/blocks/realtime-avatar-stack/components/avatar-stack.tsx","content":"$56","type":"registry:component"},{"path":"registry/default/blocks/realtime-avatar-stack/components/realtime-avatar-stack.tsx","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 \n}\n","type":"registry:component"},{"path":"registry/default/blocks/realtime-avatar-stack/hooks/use-realtime-presence-room.ts","content":"$57","type":"registry:hook"},{"path":"registry/default/blocks/current-user-avatar/hooks/use-current-user-name.ts","content":"import { useEffect, useState } from 'react'\n\nimport { createClient } from '@/registry/default/clients/tanstack/lib/supabase/client'\n\nexport const useCurrentUserName = () => {\n const [name, setName] = useState(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 { useEffect, useState } from 'react'\n\nimport { createClient } from '@/registry/default/clients/tanstack/lib/supabase/client'\n\nexport const useCurrentUserImage = () => {\n const [image, setImage] = useState(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"},{"path":"registry/default/clients/tanstack/lib/supabase/client.ts","content":"/// \nimport { createBrowserClient } from '@supabase/ssr'\n\nexport function createClient() {\n return createBrowserClient(\n import.meta.env.VITE_SUPABASE_URL!,\n import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY!\n )\n}\n","type":"registry:lib"},{"path":"registry/default/clients/tanstack/lib/supabase/server.ts","content":"import { createServerClient } from '@supabase/ssr'\nimport { getCookies, setCookie } from '@tanstack/react-start/server'\n\nexport function createClient() {\n return createServerClient(\n process.env.VITE_SUPABASE_URL!,\n process.env.VITE_SUPABASE_PUBLISHABLE_KEY!,\n {\n cookies: {\n getAll() {\n return Object.entries(getCookies()).map(\n ([name, value]) =>\n ({\n name,\n value,\n }) as { name: string; value: string }\n )\n },\n setAll(cookies) {\n cookies.forEach((cookie) => {\n setCookie(cookie.name, cookie.value)\n })\n },\n },\n }\n )\n}\n","type":"registry:lib"}],"className":"h-[70svh] min-h-80"}]]}]