52: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"] 53: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"] 54:T11a5,import { REALTIME_SUBSCRIBE_STATES, RealtimeChannel } from '@supabase/supabase-js' import { useCallback, useEffect, useRef, useState } from 'react' import { createClient } from '@/registry/default/clients/react-router/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 */ const useThrottleCallback = ( callback: (...args: Params) => Return, delay: number ) => { const lastCall = useRef(0) const timeout = useRef(null) return useCallback( (...args: Params) => { const now = Date.now() const remainingTime = delay - (now - lastCall.current) if (remainingTime <= 0) { if (timeout.current) { clearTimeout(timeout.current) timeout.current = null } lastCall.current = now callback(...args) } else if (!timeout.current) { timeout.current = setTimeout(() => { lastCall.current = Date.now() timeout.current = null callback(...args) }, remainingTime) } }, [callback, delay] ) } const supabase = createClient() const generateRandomColor = () => `hsl(${Math.floor(Math.random() * 360)}, 100%, 70%)` const generateRandomNumber = () => Math.floor(Math.random() * 100) const EVENT_NAME = 'realtime-cursor-move' type CursorEventPayload = { position: { x: number y: number } user: { id: number name: string } color: string timestamp: number } export const useRealtimeCursors = ({ roomName, username, throttleMs, }: { roomName: string username: string throttleMs: number }) => { const [color] = useState(generateRandomColor()) const [userId] = useState(generateRandomNumber()) const [cursors, setCursors] = useState>({}) const cursorPayload = useRef(null) const channelRef = useRef(null) const callback = useCallback( (event: MouseEvent) => { const { clientX, clientY } = event const payload: CursorEventPayload = { position: { x: clientX, y: clientY, }, user: { id: userId, name: username, }, color: color, timestamp: new Date().getTime(), } cursorPayload.current = payload channelRef.current?.send({ type: 'broadcast', event: EVENT_NAME, payload: payload, }) }, [color, userId, username] ) const handleMouseMove = useThrottleCallback(callback, throttleMs) useEffect(() => { const channel = supabase.channel(roomName) channel .on('presence', { event: 'leave' }, ({ leftPresences }) => { leftPresences.forEach(function (element) { // Remove cursor when user leaves setCursors((prev) => { if (prev[element.key]) { delete prev[element.key] } return { ...prev } }) }) }) .on('presence', { event: 'join' }, () => { if (!cursorPayload.current) return // All cursors broadcast their position when a new cursor joins channelRef.current?.send({ type: 'broadcast', event: EVENT_NAME, payload: cursorPayload.current, }) }) .on('broadcast', { event: EVENT_NAME }, (data: { payload: CursorEventPayload }) => { const { user } = data.payload // Don't render your own cursor if (user.id === userId) return setCursors((prev) => { if (prev[userId]) { delete prev[userId] } return { ...prev, [user.id]: data.payload, } }) }) .subscribe(async (status) => { if (status === REALTIME_SUBSCRIBE_STATES.SUBSCRIBED) { await channel.track({ key: userId }) channelRef.current = channel } else { setCursors({}) channelRef.current = null } }) return () => { channel.unsubscribe() channelRef.current = null } }, []) useEffect(() => { // Add event listener for mousemove window.addEventListener('mousemove', handleMouseMove) // Cleanup on unmount return () => { window.removeEventListener('mousemove', handleMouseMove) } }, [handleMouseMove]) return { cursors } } 51:["$","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","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"}]]}]}]]}],["$","$L52",null,{"namespace":"@supabase","registryDependencies":[]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/default/blocks/realtime-cursor/components/cursor.tsx","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

\n \n\n \n {name}\n

\n \n )\n}\n","type":"registry:component"},{"path":"registry/default/blocks/realtime-cursor/components/realtime-cursors.tsx","content":"'use client'\n\nimport { Cursor } from '@/registry/default/blocks/realtime-cursor/components/cursor'\nimport { useRealtimeCursors } from '@/registry/default/blocks/realtime-cursor/hooks/use-realtime-cursors'\n\nconst THROTTLE_MS = 50\n\nexport const RealtimeCursors = ({ roomName, username }: { roomName: string; username: string }) => {\n const { cursors } = useRealtimeCursors({ roomName, username, throttleMs: THROTTLE_MS })\n\n return (\n

\n {Object.keys(cursors).map((id) => (\n \n ))}\n

\n )\n}\n","type":"registry:component"},{"path":"registry/default/blocks/realtime-cursor/hooks/use-realtime-cursors.ts","content":"$54","type":"registry:hook"},{"path":"registry/default/clients/react-router/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/react-router/lib/supabase/server.ts","content":"import { createServerClient, parseCookieHeader, serializeCookieHeader } from '@supabase/ssr'\n\nexport function createClient(request: Request) {\n const headers = new Headers()\n\n const supabase = createServerClient(\n process.env.VITE_SUPABASE_URL!,\n process.env.VITE_SUPABASE_PUBLISHABLE_KEY!,\n {\n cookies: {\n getAll() {\n return parseCookieHeader(request.headers.get('Cookie') ?? '') as {\n name: string\n value: string\n }[]\n },\n setAll(cookiesToSet) {\n cookiesToSet.forEach(({ name, value, options }) =>\n headers.append('Set-Cookie', serializeCookieHeader(name, value, options))\n )\n },\n },\n }\n )\n\n return { supabase, headers }\n}\n","type":"registry:lib"}],"className":"h-[70svh] min-h-80"}]]}]