4d: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"] 4e: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"] 4f: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"] 50: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"] 51:T1e47,"use client"; import * as React from "react"; import type { Transition } from "motion"; import { cn } from "@/lib/utils"; import { createMotionLane, motionTokens } from "@/lib/cojeev-motion/choreography"; import { useMotionVisibility } from "@/lib/cojeev-motion/use-motion-visibility"; import { relayIndex, relayRank, relayTiming, type RelayOrder } from "@/lib/cojeev/text-relay"; export type WordRelayHandle = { next: () => void; previous: () => void; jumpTo: (index: number) => void; reset: () => void }; export type WordRelayProps = Omit, "children"> & { words: readonly string[]; /** A controlled index. Omit for the internal timer. */ index?: number; defaultIndex?: number; /** Opt in to automatic changes and provide a nearby pause control. */ auto?: boolean; /** When false, automatic and manual navigation stop at the first/last phrase. */ loop?: boolean; paused?: boolean; interval?: number; duration?: number; split?: "phrase" | "word" | "grapheme"; /** Milliseconds between units, compressed to a maximum 500ms stagger window. */ stagger?: number; staggerFrom?: RelayOrder; direction?: "up" | "down"; /** Keeps the normal ref pointing to the span; navigation has its own optional ref. */ controlsRef?: React.Ref; tone?: "inherit" | "pink" | "olive" | "blue" | "yellow"; onIndexChange?: (index: number) => void; }; /** A quiet exchange of phrases. All candidates reserve one shared, wrapping footprint. */ export function WordRelay({ words, index, defaultIndex = 0, auto = false, loop = true, paused = false, interval = 3000, duration = 650, split = "phrase", stagger = 24, staggerFrom = "first", direction = "up", controlsRef, tone = "pink", onIndexChange, className, ref, onPointerEnter, onPointerLeave, onFocusCapture, onBlurCapture, ...props }: WordRelayProps) { const host = React.useRef(null); const [internal, setInternal] = React.useState(defaultIndex); const [hovered, setHovered] = React.useState(false); const [focused, setFocused] = React.useState(false); const { enabled, inView } = useMotionVisibility(host); const current = relayIndex(index ?? internal, words.length); type Lane = ReturnType; const lanes = React.useRef<{ phrase: number; unit: number; count: number; opacity: Lane; y: Lane }[]>([]); const callbacks = React.useRef({ onIndexChange }); React.useLayoutEffect(() => { callbacks.current = { onIndexChange }; }); const running = auto && !paused && !hovered && !focused && enabled && inView && words.length > 1 && (loop || current < words.length - 1); const contentKey = JSON.stringify(words); const segmenter = React.useMemo(() => new Intl.Segmenter(undefined, { granularity: "grapheme" }), []); const longest = Math.max(1, ...words.map(word => split === "phrase" ? 1 : split === "word" ? word.split(/\s+/).filter(Boolean).length : Array.from(segmenter.segment(word)).filter(({ segment }) => !/^\s+$/.test(segment)).length)); const timing = relayTiming(duration, stagger, longest); const navigate = React.useCallback((next: number) => { if (!words.length) return; const target = relayIndex(next, words.length); if (index === undefined) setInternal(target); if (target !== current) callbacks.current.onIndexChange?.(target); }, [current, index, words.length]); React.useImperativeHandle(controlsRef, () => ({ next: () => navigate(loop ? (current + 1) % words.length : current + 1), previous: () => navigate(loop ? (current - 1 + words.length) % words.length : current - 1), jumpTo: navigate, reset: () => navigate(defaultIndex), }), [current, defaultIndex, navigate, words.length, loop]); React.useEffect(() => { if (!running) return; const milliseconds = Math.max(timing.window + 500, Number.isFinite(interval) ? Math.max(1200, Math.min(60000, interval)) : 3000); const timer = setTimeout(() => { const next = (current + 1) % words.length; if (index === undefined) setInternal(next); callbacks.current.onIndexChange?.(next); }, milliseconds); return () => clearTimeout(timer); }, [running, interval, current, words.length, index, contentKey, timing.window]); React.useLayoutEffect(() => { const elements = host.current?.querySelectorAll("[data-relay-phrase]") ?? []; lanes.current = Array.from(elements).flatMap((phrase, position) => { const units = Array.from(phrase.querySelectorAll("[data-relay-unit]")); const selected = phrase.dataset.selected === "true"; return units.map((element, unit) => ({ phrase: position, unit, count: units.length, opacity: createMotionLane(selected ? 1 : 0, value => { const visibility = Math.max(0, Math.min(1, value)); element.style.setProperty("--relay-opacity", String(visibility)); element.style.setProperty("--relay-blur", `${(1 - visibility) * 3}px`); }), y: createMotionLane(selected ? 0 : .28, value => element.style.setProperty("--relay-y", `${value}em`)), })); }); return () => { lanes.current.forEach(lane => { lane.opacity.dispose(); lane.y.dispose(); }); lanes.current = []; }; }, [contentKey, split]); React.useLayoutEffect(() => { const sign = direction === "up" ? 1 : -1; for (const lane of lanes.current) { const selected = lane.phrase === current; const target = selected ? 1 : 0; const unitTiming = relayTiming(duration, stagger, lane.count); if (!enabled || !inView || paused || unitTiming.duration === 0 || lane.opacity.get() === target) { lane.opacity.jump(target); lane.y.jump(selected ? 0 : .28 * sign); } else { if (selected && lane.opacity.get() === 0) lane.y.jump(.28 * sign); const transition: Transition = { duration: unitTiming.duration, delay: relayRank(lane.unit, lane.count, staggerFrom) * unitTiming.step, ease: [...motionTokens.ease.settle] }; lane.opacity.to(target, transition); lane.y.to(selected ? 0 : -.28 * sign, transition); } } return () => lanes.current.forEach(lane => { lane.opacity.stop(); lane.y.stop(); }); }, [current, contentKey, enabled, inView, duration, paused, split, stagger, staggerFrom, direction]); return { host.current = node; if (typeof ref === "function") return ref(node); if (ref) ref.current = node; }, [ref])} className={cn("v-word-relay", className)} data-slot="word-relay" data-tone={tone} data-relay-split={split} data-motion-quiet={!enabled || !inView || paused} data-running={running ? "true" : "false"} onPointerEnter={event => { setHovered(true); onPointerEnter?.(event); }} onPointerLeave={event => { setHovered(false); onPointerLeave?.(event); }} onFocusCapture={event => { setFocused(true); onFocusCapture?.(event); }} onBlurCapture={event => { if (!event.currentTarget.contains(event.relatedTarget as Node | null)) setFocused(false); onBlurCapture?.(event); }}> {words[current] ?? ""} {words.map((word, position) => )} ; } 52:T806,@layer cojeev-states { .v-word-relay { display:inline-grid; position:relative; vertical-align:baseline; max-inline-size:100%; padding:.08em .22em .12em; border-radius:.34em .27em .32em .24em; background:var(--relay-face,transparent); color:var(--relay-ink,inherit); line-height:1.25; isolation:isolate; } .v-word-relay[data-tone="pink"] { --relay-face:var(--v-pink); --relay-ink:var(--v-on-accent); } .v-word-relay[data-tone="olive"] { --relay-face:var(--v-olive); --relay-ink:var(--v-on-accent); } .v-word-relay[data-tone="blue"] { --relay-face:var(--v-blue); --relay-ink:var(--v-on-accent); } .v-word-relay[data-tone="yellow"] { --relay-face:var(--v-yellow); --relay-ink:var(--v-on-accent); } .v-word-relay [data-relay-phrase] { grid-area:1/1; min-inline-size:0; overflow-wrap:anywhere; pointer-events:none; } .v-word-relay [data-relay-unit] { display:inline-block; max-inline-size:100%; opacity:var(--relay-opacity,0); transform:translateY(var(--relay-y,.38em)); filter:blur(var(--relay-blur,3px)); } .v-word-relay [data-relay-word] { display:inline-block; max-inline-size:100%; overflow-wrap:anywhere; } .v-word-relay [data-relay-phrase][data-selected="true"] { --relay-opacity:1; --relay-y:0em; --relay-blur:0px; } .v-word-relay__accessible { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; } :root[data-flow="off"] .v-word-relay [data-relay-unit], [data-flow="off"] .v-word-relay [data-relay-unit], .v-word-relay[data-motion-quiet="true"] [data-relay-unit] { opacity:0; transform:none; filter:none; } :root[data-flow="off"] .v-word-relay [data-selected="true"] [data-relay-unit], [data-flow="off"] .v-word-relay [data-selected="true"] [data-relay-unit], .v-word-relay[data-motion-quiet="true"] [data-selected="true"] [data-relay-unit] { opacity:1; } @media(prefers-reduced-motion:reduce) { .v-word-relay [data-relay-unit] { opacity:0; transform:none; filter:none; } .v-word-relay [data-selected="true"] [data-relay-unit] { opacity:1; } } } 4c:["$","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"}]]}]}]]}],["$","$L4d",null,{"namespace":"@000h-cojeev","registryDependencies":["https://000h.cojeev.com/r/cojeev.json"]}]]}],["$","$L4e",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":["$","$L4f",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"@/styles/cojeev/word-relay.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L50",null,{"files":[{"path":"registry/cojeev/ui/word-relay.tsx","content":"$51","type":"registry:ui"},{"path":"registry/cojeev/styles/word-relay.css","content":"$52","type":"registry:file","target":"styles/cojeev/word-relay.css"}],"className":"h-[70svh] min-h-80"}]]}]