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:T1005,"use client" import { useTexture } from "@react-three/drei" import { type ComponentRef, type RefObject, useLayoutEffect, useRef } from "react" import type { Mesh, Texture } from "three" import { useDomPlane } from "../../hooks/use-dom-plane" import { type Pointer, usePointerUv } from "../../hooks/use-pointer-uv" import { applyUvCrop, computeObjectFit } from "../../lib/object-fit" import { webglTeleport } from "../webgl-portal/webgl-portal" export type { Pointer } type WebglImageProps = { src: string alt: string material?: (map: Texture, pointer: Pointer) => React.ReactNode webglEnabled?: boolean segments?: number zIndex?: 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 } & Omit, "children" | "src" | "alt"> type PlaneProps = { el: RefObject src: string segments: number material?: (map: Texture, pointer: Pointer) => React.ReactNode pointer: Pointer uvFit: RefObject<{ x: number; y: number }> zIndex: number autoReflow: boolean } function Plane({ el, src, segments, material, pointer, uvFit, zIndex, autoReflow }: PlaneProps) { const mesh = useRef(null) const texture = useTexture(src) const fitScale = useRef({ x: 1, y: 1 }) const measureBounds = useDomPlane(el, mesh, { autoReflow, fitScale }) useLayoutEffect(() => { const target = el.current if (!target) return const measure = () => { const m = mesh.current if (!m) return const rect = measureBounds() if (!rect) return const image = texture.image as HTMLImageElement const crop = computeObjectFit( rect.width / rect.height, image.width / image.height, getComputedStyle(target).objectFit, ) fitScale.current.x = crop.fitScaleX fitScale.current.y = crop.fitScaleY pointer.repeat.set(crop.repeatU, crop.repeatV) uvFit.current.x = crop.repeatU / crop.fitScaleX uvFit.current.y = crop.repeatV / crop.fitScaleY applyUvCrop(m.geometry.attributes.uv, segments, crop.repeatU, crop.repeatV) } measure() const ro = new ResizeObserver(measure) ro.observe(target) ro.observe(document.body) return () => ro.disconnect() }, [el, texture, segments, uvFit, pointer, measureBounds]) return ( {material ? ( material(texture, pointer) ) : ( )} ) } export function WebglImage({ src, alt, className, style, material, webglEnabled = true, segments = 1, zIndex = 0, autoReflow = false, ...rest }: WebglImageProps) { const el = useRef>(null) const uvFit = useRef({ x: 1, y: 1 }) const pointer = usePointerUv(el, { enabled: webglEnabled, uvFit }) return ( <> {alt}

{webglEnabled && ( )} ) } 51: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 } 52: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 } 53:T74c,import type { BufferAttribute, InterleavedBufferAttribute } from "three" export type ObjectFitCrop = { repeatU: number repeatV: number fitScaleX: number fitScaleY: number } /** * Replicates CSS object-fit on a WebGL plane: cover crops via UV repeat, * contain shrinks the mesh scale (UVs alone can't letterbox). * * Returns the neutral crop while the media aspect is unknown (e.g. a video * before its metadata loads reports 0x0). */ export function computeObjectFit( planeAspect: number, mediaAspect: number, objectFit: string, ): ObjectFitCrop { const crop: ObjectFitCrop = { repeatU: 1, repeatV: 1, fitScaleX: 1, fitScaleY: 1 } if (!Number.isFinite(mediaAspect) || mediaAspect <= 0) return crop if (objectFit === "cover") { if (planeAspect > mediaAspect) { crop.repeatV = mediaAspect / planeAspect } else { crop.repeatU = planeAspect / mediaAspect } } else if (objectFit === "contain") { if (planeAspect > mediaAspect) { crop.fitScaleX = mediaAspect / planeAspect } else { crop.fitScaleY = planeAspect / mediaAspect } } return crop } /** Rewrites a plane's UV grid so the texture samples the cropped region. */ export function applyUvCrop( uvAttribute: BufferAttribute | InterleavedBufferAttribute, segments: number, repeatU: number, repeatV: number, ) { const offsetU = (1 - repeatU) / 2 const offsetV = (1 - repeatV) / 2 for (let iy = 0; iy <= segments; iy++) { for (let ix = 0; ix <= segments; ix++) { const index = iy * (segments + 1) + ix const u = ix / segments const v = 1 - iy / segments uvAttribute.setXY(index, u * repeatU + offsetU, v * repeatV + offsetV) } } uvAttribute.needsUpdate = true } 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"}]]}]}],["$","li","@react-three/drei",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40react-three%2Fdrei","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/drei"}]]}]}]]}],["$","$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-image/webgl-image.tsx","content":"$50","type":"registry:component","target":"components/webgl-image/webgl-image.tsx"},{"path":"registry/hooks/use-pointer-uv.ts","content":"$51","type":"registry:hook","target":"hooks/use-pointer-uv.ts"},{"path":"registry/hooks/use-dom-plane.ts","content":"$52","type":"registry:hook","target":"hooks/use-dom-plane.ts"},{"path":"registry/lib/object-fit.ts","content":"$53","type":"registry:lib","target":"lib/object-fit.ts"}],"className":"h-[70svh] min-h-80"}]]}]