50: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"] 51: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"] 52:T7f3,"use client" import { type ComponentRef, useCallback, useEffect, useRef } from "react" import { useFrameLoop } from "../../hooks/use-frame-loop" import { type RenderProp, useRender } from "../../hooks/use-render" export type TextScrambleProps = { children: string duration?: number scrambleFps?: number playOnMount?: boolean playOnHover?: boolean characters?: string render?: RenderProp } export function TextScramble({ children, duration = 0.7, scrambleFps = 30, playOnMount = true, playOnHover = true, characters = "abcdefghijklmnopqrstuvwxyz@!#*$%^&+_[]", render, }: TextScrambleProps) { const text = children const ref = useRef>(null) const startTime = useRef(0) const isAnimating = useRef(false) const play = useCallback(() => { startTime.current = 0 isAnimating.current = true }, []) useEffect(() => { if (playOnMount) play() }, [text, playOnMount, play]) useFrameLoop((time) => { if (!isAnimating.current) return if (!ref.current) return if (!startTime.current) startTime.current = time const elapsed = time - startTime.current const resolved = Math.floor((elapsed / duration) * text.length) if (resolved >= text.length) { ref.current.textContent = text isAnimating.current = false return } let next = "" for (let i = 0; i < text.length; i++) { if (i < resolved) next += text[i] else if (text[i] === " ") next += " " else next += characters[Math.floor(Math.random() * characters.length)] } ref.current.textContent = next }, 1000 / scrambleFps) return useRender({ render, defaultElement: , props: { ref, onTouchStart: playOnHover ? play : undefined, onMouseEnter: playOnHover ? play : undefined, children: text, }, }) } 53:Tbe7,// biome-ignore-all lint/suspicious/noExplicitAny: prop merging is inherently dynamic /** * Inspired by Base UI's `useRender` + `mergeProps`, intentionally simplified for this * library's scope at the moment. * * Chosen over polymorphic prop: cleaner TypeScript, integrates better with other * component (Next/Image, design systems, third-party UI libraries) * * @see https://base-ui.com/react/utils/use-render * @see https://base-ui.com/react/utils/merge-props */ import { cloneElement, isValidElement, type ReactElement, type Ref } from "react" type AnyProps = Record type RenderFunction = (props: AnyProps, state: S) => ReactElement export type RenderProp = ReactElement | RenderFunction type UseRenderOptions = { render: RenderProp | undefined props: AnyProps state?: S defaultElement: ReactElement } export function useRender(options: UseRenderOptions): ReactElement { const { render, props, state, defaultElement } = options const target = render ?? defaultElement // Function form: consumer wires props themselves, no merging needed. if (typeof target === "function") { return target(props, state as S) as ReactElement } // Element form: clone and merge our internal props with whatever the consumer set on the element. const targetProps = (isValidElement(target) ? target.props : {}) as AnyProps return cloneElement(target, mergeProps(props, targetProps)) as ReactElement } function mergeProps(internal: AnyProps, external: AnyProps): AnyProps { const merged: AnyProps = { ...internal } for (const key in external) { const internalValue = internal[key] const externalValue = external[key] if (key === "className" && typeof externalValue === "string") { merged[key] = [internalValue, externalValue].filter(Boolean).join(" ") } else if (key === "style" && externalValue && typeof externalValue === "object") { merged[key] = { ...internalValue, ...externalValue } } else if (key === "ref") { merged[key] = composeRefs(internalValue, externalValue) } else if ( key.startsWith("on") && typeof internalValue === "function" && typeof externalValue === "function" ) { // External handler runs first so consumers can stopPropagation before our logic fires. merged[key] = chainFunctions(externalValue, internalValue) } else { merged[key] = externalValue } } return merged } function chainFunctions(...fns: Array<(...args: any[]) => void>) { return (...args: any[]) => { for (const fn of fns) fn(...args) } } function composeRefs(...refs: Array | undefined>) { return (node: T) => { for (const ref of refs) { if (typeof ref === "function") ref(node) else if (ref != null) (ref as { current: T | null }).current = node } } } 4f:["$","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,["$","$L50",null,{"namespace":"@atelier","registryDependencies":["https://atelier-ui.com/r/agent-rules.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/text-scramble/text-scramble.tsx","content":"$52","type":"registry:component","target":"components/text-scramble/text-scramble.tsx"},{"path":"registry/hooks/use-frame-loop.ts","content":"import { useEffect, useRef } from \"react\"\n\nconst DELTA_MAX = 0.1\n\ntype FrameLoopCallback = (time: number, delta: number) => void\n\nexport function useFrameLoop(callback: FrameLoopCallback, interval?: number) {\n const ref = useRef(callback)\n ref.current = callback\n\n useEffect(() => {\n let frameId = 0\n let lastTime = 0\n let lastTick = 0\n\n const tick = (now: number) => {\n frameId = requestAnimationFrame(tick)\n\n if (interval && now - lastTick < interval) return\n if (interval) lastTick = now\n\n const time = now * 0.001\n const delta = lastTime ? Math.min(time - lastTime, DELTA_MAX) : 0\n lastTime = time\n\n ref.current(time, delta)\n }\n\n frameId = requestAnimationFrame(tick)\n\n return () => {\n cancelAnimationFrame(frameId)\n }\n }, [interval])\n}\n","type":"registry:hook","target":"hooks/use-frame-loop.ts"},{"path":"registry/hooks/use-render.ts","content":"$53","type":"registry:hook","target":"hooks/use-render.ts"}],"className":"h-[70svh] min-h-80"}]]}]