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:T1f83,"use client" import { useThree } from "@react-three/fiber" import { type ComponentRef, cloneElement, type RefObject, useEffect, useLayoutEffect, useMemo, useRef, } from "react" import { CanvasTexture, type Mesh, type Texture } from "three" import { useDomPlane } from "../../hooks/use-dom-plane" import { type Pointer, usePointerUv } from "../../hooks/use-pointer-uv" import { type RenderProp, useRender } from "../../hooks/use-render" import { webglTeleport } from "../webgl-portal/webgl-portal" export type { Pointer } type WebglTextProps = { children: string webglEnabled?: boolean render?: RenderProp material?: (map: Texture, pointer: Pointer) => React.ReactNode zIndex?: number segments?: number pixelRatio?: number /** * Re-measures the DOM rect every frame so the plane follows animated parents (motion, parallax). * Costs one layout read per frame, so only enable it when needed. */ autoReflow?: boolean } type PlaneProps = { el: RefObject | null> segments: number material?: (map: Texture, pointer: Pointer) => React.ReactNode pointer: Pointer zIndex: number autoReflow: boolean pixelRatio: number } type PaintedLine = { text: string x: number baseline: number } // Groups characters into visual lines from their rendered rects, so wrapped // text paints exactly where the browser laid it out. function measureLines(el: HTMLElement, origin: DOMRect, ascent: number, fontHeight: number) { const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT) const range = document.createRange() const lines: PaintedLine[] = [] let current: PaintedLine | null = null let lineTop = 0 let textNode = walker.nextNode() while (textNode) { const text = textNode.nodeValue ?? "" for (let offset = 0; offset < text.length; offset++) { const character = text[offset] const whitespace = /\s/.test(character) range.setStart(textNode, offset) range.setEnd(textNode, offset + 1) const rect = range.getBoundingClientRect() // Collapsed whitespace (line breaks, repeated spaces) has no box. if (whitespace && rect.width === 0) continue if (!current || Math.abs(rect.top - lineTop) > fontHeight / 2) { const top = rect.top + (rect.height - fontHeight) / 2 current = { text: "", x: rect.left - origin.left, baseline: top + ascent - origin.top, } lines.push(current) lineTop = rect.top } current.text += whitespace ? " " : character } textNode = walker.nextNode() } return lines } // Paints the content of the text on a canvas, mirroring its computed CSS typography so it looks identical to the DOM element. function paint(el: HTMLElement, canvas: HTMLCanvasElement, rect: DOMRect, pixelRatio: number) { const ctx = canvas.getContext("2d") if (!ctx) return const dpr = Math.min(pixelRatio, window.devicePixelRatio || 1) const { fontFamily, fontSize, fontWeight, fontStyle, letterSpacing, color } = getComputedStyle(el) canvas.width = Math.max(1, Math.ceil(rect.width * dpr)) canvas.height = Math.max(1, Math.ceil(rect.height * dpr)) ctx.setTransform(dpr, 0, 0, dpr, 0, 0) ctx.clearRect(0, 0, rect.width, rect.height) ctx.font = `${fontStyle} ${fontWeight} ${fontSize} ${fontFamily}` ctx.letterSpacing = letterSpacing ctx.fillStyle = color ctx.textBaseline = "alphabetic" const probe = ctx.measureText("Hg") const ascent = probe.fontBoundingBoxAscent const fontHeight = probe.fontBoundingBoxAscent + probe.fontBoundingBoxDescent for (const line of measureLines(el, rect, ascent, fontHeight)) { ctx.fillText(line.text, line.x, line.baseline) } } function textRect(el: HTMLElement) { const range = document.createRange() range.selectNodeContents(el) const rect = range.getBoundingClientRect() return rect.width > 0 && rect.height > 0 ? rect : el.getBoundingClientRect() } function Plane({ el, segments, material, pointer, zIndex, autoReflow, pixelRatio }: PlaneProps) { const mesh = useRef(null) const size = useThree((s) => s.size) const measureBounds = useDomPlane(el, mesh, { autoReflow, getRect: textRect }) const { canvas, texture } = useMemo(() => { const canvas = document.createElement("canvas") const texture = new CanvasTexture(canvas) return { canvas, texture } }, []) useEffect(() => { return () => { texture.dispose() } }, [texture]) useLayoutEffect(() => { const target = el.current if (!target) return const measure = () => { const rect = measureBounds() if (!rect) return const prevWidth = canvas.width const prevHeight = canvas.height paint(target, canvas, rect, pixelRatio) // WebGL2 texture storage is immutable: a resized canvas can't be // uploaded into the old allocation, so drop it and let three // recreate the texture at the new size. if (canvas.width !== prevWidth || canvas.height !== prevHeight) texture.dispose() texture.needsUpdate = true } measure() document.fonts.ready.then(measure) // ResizeObserver never fires for inline elements (they have no box), // so document.body is watched too to catch layout-affecting resizes. const ro = new ResizeObserver(measure) ro.observe(target) ro.observe(document.body) const mo = new MutationObserver(measure) mo.observe(target, { characterData: true, childList: true, attributes: true, subtree: true, }) mo.observe(document.documentElement, { attributes: true }) mo.observe(document.body, { attributes: true }) const scheme = window.matchMedia("(prefers-color-scheme: dark)") scheme.addEventListener("change", measure) return () => { ro.disconnect() mo.disconnect() scheme.removeEventListener("change", measure) } }, [el, canvas, texture, pixelRatio, size, measureBounds]) return ( {material ? ( material(texture, pointer) ) : ( )} ) } export function WebglText({ children, material, webglEnabled = true, segments = 1, render, zIndex = 0, autoReflow = false, pixelRatio = 2, }: WebglTextProps) { const el = useRef>(null) const pointer = usePointerUv(el, { enabled: webglEnabled, getRect: textRect }) const element = useRender({ render, defaultElement: , props: { ref: el, children }, }) // Force opacity:0 to win when WebGL is on, so a consumer can't accidentally // un-hide the DOM fallback through their render element's style. const host = webglEnabled ? cloneElement(element, { style: { ...element.props.style, opacity: 0 } }) : element return ( <> {host} {webglEnabled && ( )} ) } 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 } } } 52:T9dc,import { type RefObject, useEffect, useMemo } from "react" import { Vector2 } from "three" export type Pointer = { uv: Vector2 texUv: Vector2 repeat: Vector2 hover: number } type UsePointerUvOptions = { enabled: boolean /** * Maps element UVs into cropped texture UVs when object-fit trims the * media. Defaults to identity, so `texUv` mirrors `uv`. */ uvFit?: RefObject<{ x: number; y: number }> getRect?: (el: HTMLElement) => DOMRect } /** * Tracks the cursor over a DOM element as normalized UVs, mutated in place so * shader materials can read it every frame without re-rendering React. */ export function usePointerUv( el: RefObject, { enabled, uvFit, getRect }: UsePointerUvOptions, ): Pointer { const pointer = useMemo(() => { return { uv: new Vector2(0.5, 0.5), texUv: new Vector2(0.5, 0.5), repeat: new Vector2(1, 1), hover: 0, } }, []) useEffect(() => { if (!enabled) return const target = el.current if (!target) return /* * Pointer events still fire on the DOM element through opacity:0, * so the browser tells us when the cursor is over it. */ const onMove = (event: PointerEvent) => { const rect = getRect ? getRect(target) : target.getBoundingClientRect() const x = (event.clientX - rect.left) / rect.width const y = 1 - (event.clientY - rect.top) / rect.height const fit = uvFit?.current ?? { x: 1, y: 1 } pointer.uv.set(x, y) pointer.texUv.set(x * fit.x + (1 - fit.x) / 2, y * fit.y + (1 - fit.y) / 2) } const onEnter = () => (pointer.hover = 1) const onLeave = () => (pointer.hover = 0) target.addEventListener("pointermove", onMove) target.addEventListener("pointerenter", onEnter) target.addEventListener("pointerleave", onLeave) /* * Hover in too fast and pointerenter fires before these listeners * attach, so seed hover from the live :hover state instead. */ if (target.matches(":hover")) pointer.hover = 1 return () => { target.removeEventListener("pointermove", onMove) target.removeEventListener("pointerenter", onEnter) target.removeEventListener("pointerleave", onLeave) } }, [enabled, el, pointer, uvFit, getRect]) return pointer } 53:Taaa,import { useFrame, useThree } from "@react-three/fiber" import { type RefObject, useCallback, useRef } from "react" import type { Mesh } from "three" type UseDomPlaneOptions = { /** * Re-measures the DOM rect every frame so the plane follows animated * parents (motion, parallax). Costs one layout read per frame. */ autoReflow: boolean fitScale?: RefObject<{ x: number; y: number }> getRect?: (el: HTMLElement) => DOMRect } /** * Positions and scales a mesh to cover a DOM element on the shared canvas. * Scroll is applied every frame. Layout changes are not observed here: the * caller calls `measureBounds` when the element resizes or repaints. */ export function useDomPlane( el: RefObject, mesh: RefObject, { autoReflow, fitScale, getRect }: UseDomPlaneOptions, ) { const size = useThree((state) => state.size) const viewport = useThree((state) => state.viewport) const bounds = useRef({ x: 0, y: 0, width: 0, height: 0 }) const measureBounds = useCallback(() => { const target = el.current if (!target) return null /* * Rect in document coords so viewport position later needs only * window.scrollX/Y, instead of re-measuring bounds every render. */ const rect = getRect ? getRect(target) : target.getBoundingClientRect() bounds.current.x = rect.left + window.scrollX bounds.current.y = rect.top + window.scrollY bounds.current.width = rect.width bounds.current.height = rect.height return rect }, [el, getRect]) useFrame(() => { const m = mesh.current if (!m) return const pxToWorld = viewport.height / size.height const fit = fitScale?.current ?? { x: 1, y: 1 } const transitioning = document.documentElement.hasAttribute("data-atelier-transitioning") if ((autoReflow || transitioning) && el.current) { const rect = getRect ? getRect(el.current) : el.current.getBoundingClientRect() m.position.x = (rect.left + rect.width / 2 - size.width / 2) * pxToWorld m.position.y = -(rect.top + rect.height / 2 - size.height / 2) * pxToWorld m.scale.x = rect.width * pxToWorld * fit.x m.scale.y = rect.height * pxToWorld * fit.y return } const { x, y, width, height } = bounds.current m.position.x = (x + width / 2 - window.scrollX - size.width / 2) * pxToWorld m.position.y = -(y + height / 2 - window.scrollY - size.height / 2) * pxToWorld m.scale.x = width * pxToWorld * fit.x m.scale.y = height * pxToWorld * fit.y }) return measureBounds } 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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","three",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/three","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":"three"}]]}]}],["$","li","@types/three",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40types%2Fthree","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":"@types/three"}]]}]}],["$","li","@react-three/fiber",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40react-three%2Ffiber","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-three/fiber"}]]}]}]]}],["$","$L4e",null,{"namespace":"@atelier","registryDependencies":["https://atelier-ui.com/r/webgl-portal.json","https://atelier-ui.com/r/agent-rules.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/webgl-text/webgl-text.tsx","content":"$50","type":"registry:component","target":"components/webgl-text/webgl-text.tsx"},{"path":"registry/hooks/use-render.ts","content":"$51","type":"registry:hook","target":"hooks/use-render.ts"},{"path":"registry/hooks/use-pointer-uv.ts","content":"$52","type":"registry:hook","target":"hooks/use-pointer-uv.ts"},{"path":"registry/hooks/use-dom-plane.ts","content":"$53","type":"registry:hook","target":"hooks/use-dom-plane.ts"}],"className":"h-[70svh] min-h-80"}]]}]