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:T1fb8,"use client"; import { animate, type HTMLMotionProps, motion, type Transition, useAnimationControls, useMotionValue, useReducedMotion, useTransform, } from "motion/react"; import { forwardRef, type ReactNode, useEffect, useLayoutEffect, useRef, useState, } from "react"; import useMeasure from "react-use-measure"; import { motionTransition } from "@/lib/sona-motion"; import { cn } from "@/lib/sona-utils"; export type MorphSurfaceReducedMotion = "user" | "always" | "never"; export type MorphSurfaceOrigin = | "center" | "top" | "right" | "bottom" | "left" | "top-left" | "top-right" | "bottom-right" | "bottom-left"; const morphSurfaceOrigins: Record< MorphSurfaceOrigin, { originX: number; originY: number } > = { center: { originX: 0.5, originY: 0.5 }, top: { originX: 0.5, originY: 0 }, right: { originX: 1, originY: 0.5 }, bottom: { originX: 0.5, originY: 1 }, left: { originX: 0, originY: 0.5 }, "top-left": { originX: 0, originY: 0 }, "top-right": { originX: 1, originY: 0 }, "bottom-right": { originX: 1, originY: 1 }, "bottom-left": { originX: 0, originY: 1 }, }; type SurfaceSize = { width: number; height: number }; export interface MorphSurfaceRootProps extends Omit, "children" | "transition"> { /** A value that identifies the current content state and starts a new morph when it changes. */ value: string; /** The current content rendered inside the persistent surface. */ children: ReactNode; /** The transition used when the persistent surface changes size. @default motionTransition.spatial */ transition?: Transition; /** The transition used when the content changes. @default motionTransition.enter */ contentTransition?: Transition; /** The scale from which changed content resolves inside the surface. @default 0.96 */ contentScale?: number; /** The shared origin used to grow, shrink, reveal, and scale the surface content. @default "center" */ origin?: MorphSurfaceOrigin; /** Additional classes for the stable layout anchor around the surface. @default undefined */ anchorClassName?: string; /** Additional classes for the internal clipping layer. @default undefined */ clipClassName?: string; /** Additional classes for the persistent content wrapper. @default undefined */ contentClassName?: string; /** Controls whether the surface follows, forces, or ignores reduced motion. @default "user" */ reducedMotion?: MorphSurfaceReducedMotion; } const MorphSurfaceRoot = forwardRef( function MorphSurfaceRoot( { value, children, className, transition = motionTransition.spatial, contentTransition = motionTransition.enter, contentScale = 0.96, origin = "center", anchorClassName, clipClassName, contentClassName, reducedMotion = "user", style, ...props }, ref, ) { const [measureRef, bounds] = useMeasure({ offsetSize: true }); const [anchorSize, setAnchorSize] = useState(null); const renderedSize = useRef(null); const surfaceScaleX = useMotionValue(1); const surfaceScaleY = useMotionValue(1); const inverseSurfaceScaleX = useTransform( surfaceScaleX, (scale) => 1 / scale, ); const inverseSurfaceScaleY = useTransform( surfaceScaleY, (scale) => 1 / scale, ); const transitionRef = useRef(transition); const previousValue = useRef(value); const contentControls = useAnimationControls(); const userPrefersReducedMotion = useReducedMotion(); const shouldReduceMotion = reducedMotion === "always" || (reducedMotion === "user" && userPrefersReducedMotion === true); const { originX, originY } = morphSurfaceOrigins[origin]; const width = bounds.width || undefined; const height = bounds.height || undefined; transitionRef.current = transition; useLayoutEffect(() => { if (anchorSize || !bounds.width || !bounds.height) return; setAnchorSize({ width: bounds.width, height: bounds.height }); }, [anchorSize, bounds.height, bounds.width]); useLayoutEffect(() => { if (!bounds.width || !bounds.height) return; const nextSize = { width: bounds.width, height: bounds.height }; const previousSize = renderedSize.current; if (!previousSize || shouldReduceMotion) { renderedSize.current = nextSize; surfaceScaleX.set(1); surfaceScaleY.set(1); return; } const currentWidth = previousSize.width * surfaceScaleX.get(); const currentHeight = previousSize.height * surfaceScaleY.get(); const nextScaleX = currentWidth / nextSize.width; const nextScaleY = currentHeight / nextSize.height; renderedSize.current = nextSize; surfaceScaleX.set(nextScaleX); surfaceScaleY.set(nextScaleY); const surfaceXAnimation = animate( surfaceScaleX, 1, transitionRef.current, ); const surfaceYAnimation = animate( surfaceScaleY, 1, transitionRef.current, ); return () => { surfaceXAnimation.stop(); surfaceYAnimation.stop(); }; }, [ bounds.height, bounds.width, shouldReduceMotion, surfaceScaleX, surfaceScaleY, ]); useEffect(() => { if (previousValue.current === value) return; previousValue.current = value; if (shouldReduceMotion) { contentControls.set({ opacity: 1, scale: 1 }); return; } contentControls.set({ opacity: 0, scale: contentScale }); void contentControls.start({ opacity: 1, scale: 1 }, contentTransition); }, [ contentControls, contentScale, contentTransition, shouldReduceMotion, value, ]); return (

{children}

); }, ); const MorphSurface = { Root: MorphSurfaceRoot, }; export { MorphSurfaceRoot }; export default MorphSurface; 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","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","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":"motion"}]]}]}],["$","li","react-use-measure",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-use-measure","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-use-measure"}]]}]}]]}],["$","$L51",null,{"namespace":"@sona-ui","registryDependencies":["@sona-ui/sona-motion","@sona-ui/sona-utils"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/sonaui/morph-surface/morph-surface.tsx","content":"$53","type":"registry:ui","target":"components/ui/morph-surface/morph-surface.tsx"}],"className":"h-[70svh] min-h-80"}]]}]