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:T28c7,"use client" import { X } from "lucide-react" import * as React from "react" import { flushSync } from "react-dom" import { cn } from "@/lib/utils" // ============================================================================ // Types & Context // ============================================================================ interface MorphingDialogContextValue { isOpen: boolean uniqueId: string openDialog: (triggerEl: HTMLElement) => void closeDialog: () => void dialogRef: React.RefObject sourceRef: React.MutableRefObject } const MorphingDialogContext = React.createContext(null) function useMorphingDialog() { const context = React.useContext(MorphingDialogContext) if (!context) { throw new Error( "MorphingDialog components must be used within MorphingDialog", ) } return context } // ============================================================================ // Utilities // ============================================================================ const prefersReducedMotion = () => { if (typeof window === "undefined") return false return window.matchMedia("(prefers-reduced-motion: reduce)").matches } // Fallback for browsers without View Transitions const transition = (callback: () => void) => { if ( typeof document === "undefined" || !document.startViewTransition || prefersReducedMotion() ) { callback() return { finished: Promise.resolve() } } return document.startViewTransition(callback) } // Helper to set/clear view transition names const setTransitionNames = ( element: HTMLElement | null, name: string, active: boolean, ) => { if (!element || prefersReducedMotion()) return element.style.viewTransitionName = active ? name : "" } // ============================================================================ // MorphingDialog (Root) // ============================================================================ interface MorphingDialogProps { children: React.ReactNode } export function MorphingDialog({ children }: MorphingDialogProps) { const [isOpen, setIsOpen] = React.useState(false) const uniqueId = React.useId().replace(/:/g, "-") const dialogRef = React.useRef(null) const sourceRef = React.useRef(null) const openDialog = React.useCallback( (triggerEl: HTMLElement) => { sourceRef.current = triggerEl const dialog = dialogRef.current if (!dialog) return // Set view transition name on source before transition setTransitionNames(triggerEl, `morph-${uniqueId}`, true) transition(() => { // Mark source as expanded (hidden) and remove name triggerEl.setAttribute("data-expanded", "true") setTransitionNames(triggerEl, `morph-${uniqueId}`, false) // Render content first flushSync(() => { setIsOpen(true) }) // Open dialog (makes it visible) dialog.showModal() // Now set name on visible dialog setTransitionNames(dialog, `morph-${uniqueId}`, true) }).finished.then(() => { // Keep name on dialog for closing transition }) }, [uniqueId], ) const closeDialog = React.useCallback(() => { const dialog = dialogRef.current const source = sourceRef.current if (!dialog || !source) return // Dialog already has view-transition-name from opening transition(() => { // Hand-off: remove from dialog, add to source setTransitionNames(dialog, `morph-${uniqueId}`, false) setTransitionNames(source, `morph-${uniqueId}`, true) // Remove expanded state source.removeAttribute("data-expanded") // Close dialog flushSync(() => { setIsOpen(false) }) dialog.close() }).finished.then(() => { // Clean up after transition if (source) { setTransitionNames(source, `morph-${uniqueId}`, false) } }) }, [uniqueId]) return ( {children} ) } // ============================================================================ // MorphingDialogTrigger // ============================================================================ interface MorphingDialogTriggerProps { children: React.ReactNode className?: string style?: React.CSSProperties } export function MorphingDialogTrigger({ children, className, style, }: MorphingDialogTriggerProps) { const { openDialog } = useMorphingDialog() const triggerRef = React.useRef(null) const handleClick = React.useCallback(() => { if (triggerRef.current) { openDialog(triggerRef.current) } }, [openDialog]) return (

{ if (e.key === "Enter" || e.key === " ") { e.preventDefault() handleClick() } }} > {children}

) } // ============================================================================ // MorphingDialogContainer (Native Dialog) // ============================================================================ interface MorphingDialogContainerProps { children: React.ReactNode } export function MorphingDialogContainer({ children, }: MorphingDialogContainerProps) { const { isOpen, closeDialog, dialogRef } = useMorphingDialog() // Handle cancel event (Escape key, click outside with closedby="any") const handleCancel = React.useCallback( (e: React.SyntheticEvent) => { e.preventDefault() closeDialog() }, [closeDialog], ) // Handle backdrop click const handleBackdropClick = React.useCallback( (e: React.MouseEvent) => { // Only close if clicking directly on the dialog (backdrop) if (e.target === e.currentTarget) { closeDialog() } }, [closeDialog], ) return ( ) } // ============================================================================ // MorphingDialogContent // ============================================================================ interface MorphingDialogContentProps { children: React.ReactNode className?: string style?: React.CSSProperties } export function MorphingDialogContent({ children, className, style, }: MorphingDialogContentProps) { const contentRef = React.useRef(null) // Focus content when mounted React.useEffect(() => { contentRef.current?.focus() }, []) return (

{children}

) } // ============================================================================ // MorphingDialogImage // ============================================================================ interface MorphingDialogImageProps { src: string alt: string className?: string style?: React.CSSProperties } export function MorphingDialogImage({ src, alt, className, style, }: MorphingDialogImageProps) { return ( {alt}

) } // ============================================================================ // MorphingDialogTitle // ============================================================================ interface MorphingDialogTitleProps { children: React.ReactNode className?: string } export function MorphingDialogTitle({ children, className, }: MorphingDialogTitleProps) { return

{children}

} // ============================================================================ // MorphingDialogSubtitle // ============================================================================ interface MorphingDialogSubtitleProps { children: React.ReactNode className?: string } export function MorphingDialogSubtitle({ children, className, }: MorphingDialogSubtitleProps) { return (

{children}

) } // ============================================================================ // MorphingDialogDescription // ============================================================================ interface MorphingDialogDescriptionProps { children: React.ReactNode className?: string } export function MorphingDialogDescription({ children, className, }: MorphingDialogDescriptionProps) { return (

{children}

) } // ============================================================================ // MorphingDialogClose // ============================================================================ interface MorphingDialogCloseProps { children?: React.ReactNode className?: string } export function MorphingDialogClose({ children, className, }: MorphingDialogCloseProps) { const { closeDialog } = useMorphingDialog() return ( ) } 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"}]]}]}]]}],["$","$L52",null,{"namespace":"@gooseui","registryDependencies":[]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/new-york/ui/morphing-dialog.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]