4e: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"] 4f: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"] 50:T114d,'use client' import * as React from 'react' import { cn } from '@/lib/utils' /* ------------------------------------------------------------------------------------------------- * Types * -----------------------------------------------------------------------------------------------*/ type Align = 'start' | 'center' | 'end' type Particle = { id: number content: React.ReactNode } type ActionHintContextValue = { emit: (content: React.ReactNode) => void } /* ------------------------------------------------------------------------------------------------- * Context * -----------------------------------------------------------------------------------------------*/ const ActionHintContext = React.createContext( null ) export function useActionHint() { const context = React.useContext(ActionHintContext) if (!context) { throw new Error('useActionHint must be used within an ActionHintEmitter') } return context } /* ------------------------------------------------------------------------------------------------- * ActionHintEmitter * -----------------------------------------------------------------------------------------------*/ interface ActionHintEmitterProps { children: React.ReactNode className?: string /** Horizontal alignment of the hint relative to the emitter */ align?: Align /** Vertical margin (gap) between the hint and the emitter in pixels */ margin?: number /** Duration of the fade animation in milliseconds */ duration?: number } export const ActionHintEmitter = React.forwardRef< HTMLDivElement, ActionHintEmitterProps >(function ActionHintEmitter( { children, className, align = 'center', margin = 4, duration = 1500 }, forwardedRef ) { const [particles, setParticles] = React.useState([]) const idRef = React.useRef(0) const emit = React.useCallback( (content: React.ReactNode) => { const id = idRef.current++ // Clear all existing particles and add new one setParticles([{ id, content }]) // Remove after animation completes setTimeout(() => { setParticles((prev) => prev.filter((p) => p.id !== id)) }, duration) }, [duration] ) const contextValue = React.useMemo(() => ({ emit }), [emit]) return (

{children} {particles.map((particle) => ( {particle.content} ))}

) }) /* ------------------------------------------------------------------------------------------------- * ActionHintParticle * -----------------------------------------------------------------------------------------------*/ const alignToPosition: Record< Align, { left?: string; right?: string; transform: string } > = { start: { left: '0', transform: 'translateY(-100%)' }, center: { left: '50%', transform: 'translateX(-50%) translateY(-100%)' }, end: { right: '0', transform: 'translateY(-100%)' }, } function ActionHintParticle({ children, align, margin, duration, }: { children: React.ReactNode align: Align margin: number duration: number }) { const positionStyles = alignToPosition[align] return ( <>

{children}

) } 4d:["$","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":[null,["$","$L4e",null,{"namespace":"@joyco","registryDependencies":["@joyco/utils"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/components/action-hint.tsx","content":"$50","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]