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:T849,"use client" import { Fragment, type ReactNode } from "react" import { type RenderProp, useRender } from "../../hooks/use-render" type SplitBy = "letters" | "words" const NON_BREAKING_SPACE = " " export type TextSplitProps = { children: string splitBy?: SplitBy showMask?: boolean renderItems?: (char: string, index: number) => ReactNode render?: RenderProp } function Mask({ children, showMask }: { children: ReactNode; showMask: boolean }) { if (!showMask) return children return {children} } export function TextSplit({ children, splitBy = "letters", showMask = true, renderItems, render, }: TextSplitProps) { const words = children.split(" ") let cursor = 0 const content = words.map((word, wordIndex) => { const isLast = wordIndex === words.length - 1 if (splitBy === "words") { return ( {renderItems ? renderItems(word, wordIndex) : word} {!isLast && " "} ) } const letters = Array.from(word).map((char) => { const index = cursor++ return ( {renderItems ? renderItems(char, index) : char} ) }) let spacer: ReactNode = null if (!isLast) { const index = cursor++ spacer = ( {renderItems ? renderItems(" ", index) : NON_BREAKING_SPACE} ) } return ( {letters} {spacer} {!isLast && } ) }) return useRender({ render, defaultElement: , props: { children: content }, }) } 51: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 } } } 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":"@atelier","registryDependencies":["https://atelier-ui.com/r/agent-rules.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/text-split/text-split.tsx","content":"$50","type":"registry:component","target":"components/text-split/text-split.tsx"},{"path":"registry/hooks/use-render.ts","content":"$51","type":"registry:hook","target":"hooks/use-render.ts"}],"className":"h-[70svh] min-h-80"}]]}]