4c: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d:I[544296,["/_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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"ItemStyles"] 4e:I[34002,["/_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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"CodeEditor"] 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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 50:T1a49,"use client"; import * as React from "react"; import { frame, cancelFrame } from "motion"; import { useMotionVisibility } from "@/lib/cojeev-motion/use-motion-visibility"; import { cn } from "@/lib/utils"; import { createFieldPainter, type FieldKind } from "@/lib/cojeev/reference-field-paint"; import { boundedCount, boundedNumber } from "@/lib/cojeev/reference-effect-geometry"; export type ReferenceFieldProps = React.ComponentProps<"div"> & { /** Stop movement while retaining a composed, meaningful still frame. */ paused?: boolean; tone?: "pink" | "olive" | "blue" | "yellow"; speed?: number; count?: number; /** Height of the local effect stage, in CSS pixels. */ height?: number; /** Optional texture for the elastic sheet or ripple. */ src?: string; /** Optional image cards for the trail. Decorative; describe their subject nearby. */ images?: readonly string[]; }; /** One scoped paint surface shared by the actual field/cursor components. */ export function ReferenceField({ kind, paused = false, tone = "pink", speed = 1, count = 18, height = 320, src, images, className, style, children, ref, ...props }: ReferenceFieldProps & { kind: FieldKind }) { const host = React.useRef(null), canvas = React.useRef(null); const { enabled, inView } = useMotionVisibility(host); const running = enabled && inView && !paused; const safeCount = boundedCount(count, 18, 64), safeSpeed = boundedNumber(speed, 1, .1, 3); const state = React.useRef({ running, speed: safeSpeed }); React.useLayoutEffect(() => { state.current = { running, speed: safeSpeed }; }, [running, safeSpeed]); const painter = React.useRef | null>(null); const imagesKey = JSON.stringify(images ?? []); React.useEffect(() => { const element = host.current, surface = canvas.current; if (!element || !surface) return; const context = surface.getContext("2d"); if (!context) { element.dataset.renderState = "unavailable"; return; } const renderer = createFieldPainter(kind, context, safeCount); painter.current = renderer; const assets = (src ? [src] : JSON.parse(imagesKey) as string[]).slice(0, 12).map(url => { const image = new Image(); image.onload = () => { renderer.invalidate(); renderer.draw(0, false); }; image.onerror = () => { element.dataset.assetState = "fallback"; }; image.src = url; return image; }); renderer.images = assets; let appearanceKey = ""; const repaint = () => { const css = getComputedStyle(element); const palette = ["--v-pink", "--v-olive", "--v-blue", "--v-yellow"].map((key, i) => css.getPropertyValue(key).trim() || ["#f5b8db", "#9aab63", "#b6caeb", "#f5d867"][i]); const nextKey = JSON.stringify([palette, css.color]); if (appearanceKey === nextKey) return; appearanceKey = nextKey; renderer.palette = palette; renderer.ink = css.color; renderer.invalidate(); renderer.draw(0, false); }; const resize = () => { const width = Math.max(1, element.clientWidth), h = Math.max(1, element.clientHeight); const ratio = Math.min(window.devicePixelRatio || 1, 2, Math.sqrt(900000 / (width * h))); surface.width = Math.round(width * ratio); surface.height = Math.round(h * ratio); context.setTransform(ratio, 0, 0, ratio, 0, 0); renderer.resize(width, h); renderer.tone = ["pink", "olive", "blue", "yellow"].indexOf(tone); repaint(); renderer.draw(0, false); element.dataset.renderState = "ready"; }; const observer = new ResizeObserver(resize); observer.observe(element); const theme = new MutationObserver(repaint); for (let ancestor: Element | null = element; ancestor; ancestor = ancestor.parentElement) { theme.observe(ancestor, { attributes: true, attributeFilter: ["data-mode", "data-palette", "data-contrast", "class", "style"] }); } window.addEventListener("cojeev:appearancechange", repaint); const point = (event: PointerEvent | MouseEvent) => { const box = element.getBoundingClientRect(); return { x: (event.clientX - box.left) * element.clientWidth / Math.max(1, box.width), y: (event.clientY - box.top) * element.clientHeight / Math.max(1, box.height) }; }; const move = (event: PointerEvent) => { if (state.current.running) renderer.move(point(event)); }; const leave = () => renderer.leave(); const click = (event: MouseEvent) => { if (!state.current.running) return; // A keyboard-activated child button has no pointer coordinates. const p = event.detail === 0 ? { x: element.clientWidth / 2, y: element.clientHeight / 2 } : point(event); renderer.click(p); }; element.addEventListener("pointermove", move, { passive: true }); element.addEventListener("pointerleave", leave); element.addEventListener("click", click); resize(); return () => { observer.disconnect(); theme.disconnect(); window.removeEventListener("cojeev:appearancechange", repaint); assets.forEach(asset => { asset.onload = null; asset.onerror = null; }); element.removeEventListener("pointermove", move); element.removeEventListener("pointerleave", leave); element.removeEventListener("click", click); painter.current = null; }; }, [kind, safeCount, src, imagesKey, tone]); React.useEffect(() => { const renderer = painter.current; if (!renderer) return; if (!running) { renderer.draw(0, false); return; } const tick = ({ delta }: { delta: number }) => renderer.draw(Math.min(delta, 33) * state.current.speed, true); frame.update(tick, true); return () => cancelFrame(tick); }, [running, kind, safeCount, src, imagesKey, tone]); return

{ host.current = node; if (typeof ref === "function") return ref(node); if (ref) ref.current = node; }, [ref])} className={cn(`v-${kind}`, className)} data-slot={kind} data-running={running ? "true" : "false"} data-tone={tone} style={{ position: "relative", isolation: "isolate", overflow: "hidden", minWidth: 0, width: "100%", height: boundedNumber(height, 320, 120, 1000), borderRadius: "var(--v-r-panel, 24px)", color: "var(--v-text)", background: "var(--v-beige)", ...style }}>

; } 4b:["$","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"}]]}]}]]}],["$","$L4c",null,{"namespace":"@000h-cojeev","registryDependencies":["https://000h.cojeev.com/r/cojeev.json"]}]]}],["$","$L4d",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L4e",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"@/styles/cojeev/strands.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L4f",null,{"files":[{"path":"registry/cojeev/ui/strands.tsx","content":"\"use client\";\nimport * as React from \"react\";\nimport { ReferenceField, type ReferenceFieldProps } from \"@/lib/cojeev/reference-field\";\nexport type StrandsProps = ReferenceFieldProps;\n/** Layered sine ribbons move through a bounded field. */\nexport function Strands(props: StrandsProps) {\n return ;\n}\n","type":"registry:ui"},{"path":"registry/cojeev/lib/reference-field.tsx","content":"$50","type":"registry:lib","target":"lib/cojeev/reference-field.tsx"},{"path":"registry/cojeev/styles/strands.css","content":"@layer cojeev-states {\n.v-strands { --effect-accent:var(--v-pink); }\n.v-strands canvas { display:block; }\n\n}\n","type":"registry:file","target":"styles/cojeev/strands.css"}],"className":"h-[70svh] min-h-80"}]]}]