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:T1982,"use client"; import * as React from "react"; import { Icon } from "@/components/ui/icon"; import { cn } from "@/lib/utils"; import { resolvePointerPoint, type GuidedPointerPoint } from "@/lib/cojeev/pointer-geometry"; import { createMotionLane, motionTokens } from "@/lib/cojeev-motion/choreography"; import { useGuidanceMotion } from "@/lib/cojeev-motion/use-guidance-motion"; import { assignMotionRef } from "@/lib/cojeev-motion/refs"; export type { GuidedPointerPoint } from "@/lib/cojeev/pointer-geometry"; const bounded = (value: number, fallback: number, min: number, max: number) => Number.isFinite(value) ? Math.min(max, Math.max(min, value)) : fallback; export type GuidedPointerProps = Omit, "children" | "role" | "tabIndex"> & { points: readonly GuidedPointerPoint[]; /** Omit to use the first valid point. An unknown ID hides the pointer. */ activeId?: string; /** Milliseconds per move, capped at two seconds. */ duration?: number; /** Change to repeat a finite arrival cue at the current waypoint. */ replayKey?: string | number; glyph?: "arrow" | "hand"; /** Glyph size in pixels. Coordinates use the stage area minus this size. */ size?: number; }; type PointerEngine = { retarget: (point: GuidedPointerPoint, duration: number, animate: boolean, replay: boolean) => void; hide: () => void }; /** Decorative guidance; caller controls select waypoints and own all real actions. */ export function GuidedPointer({ points, activeId, duration = 640, replayKey = 0, glyph = "arrow", size = 28, className, style, ref, ...props }: GuidedPointerProps) { const host = React.useRef(null); const mark = React.useRef(null); const glyphHost = React.useRef(null); const ring = React.useRef(null); const engine = React.useRef(null); const attach = React.useCallback((node: HTMLDivElement | null) => { host.current = node; return assignMotionRef(ref, node); }, [ref]); const { quiet, enabled, inView } = useGuidanceMotion(host); const target = resolvePointerPoint(points, activeId); const safeSize = bounded(size, 28, 12, 64); const travelTime = bounded(duration, 640, 0, 2000); const request = JSON.stringify([target?.id, target?.x, target?.y, target?.click, target?.pressed, replayKey]); const targetId = target?.id, targetX = target?.x, targetY = target?.y, targetClick = target?.click, targetPressed = target?.pressed; const consumed = React.useRef(""); React.useEffect(() => { const element = host.current, marker = mark.current, icon = glyphHost.current, halo = ring.current; if (!element || !marker || !icon || !halo) return; let current = { x: 0, y: 0 }, start = current, destination = current; let first = true, pressure = 1, pulse = 1; const paintPosition = () => { marker.style.transform = `translate3d(${current.x * Math.max(0, element.clientWidth - safeSize)}px, ${current.y * Math.max(0, element.clientHeight - safeSize)}px, 0)`; marker.dataset.x = String(current.x); marker.dataset.y = String(current.y); }; const paintFeedback = () => { const tap = Math.sin(Math.PI * Math.min(1, pulse / .42)); icon.style.transform = `scale(${pressure * (1 - .09 * tap)})`; halo.style.opacity = String(pulse >= 1 ? 0 : .44 * Math.sin(Math.PI * pulse)); halo.style.transform = `translate(-50%, -50%) scale(${.45 + pulse * 1.3})`; }; const travel = createMotionLane(1, progress => { current = { x: start.x + (destination.x - start.x) * progress, y: start.y + (destination.y - start.y) * progress }; paintPosition(); }); const press = createMotionLane(1, value => { pressure = value; paintFeedback(); }); const arrival = createMotionLane(1, value => { pulse = value; paintFeedback(); }); const resize = new ResizeObserver(paintPosition); resize.observe(element); engine.current = { hide() { travel.stop(); arrival.jump(1); press.jump(1); marker.style.visibility = "hidden"; element.dataset.state = "empty"; first = true; }, retarget(point, milliseconds, animate, replay) { marker.style.visibility = "visible"; arrival.jump(1); start = first ? point : current; destination = point; first = false; press.to(point.pressed ? .92 : 1, { duration: animate ? motionTokens.duration.quick : 0, ease: [...motionTokens.ease.settle] }); const finish = () => { if (animate && replay && point.click) { element.dataset.state = "pulsing"; arrival.jump(0); arrival.to(1, { duration: .54, ease: "linear" }, () => { element.dataset.state = "still"; }); } else element.dataset.state = "still"; }; if (!animate || milliseconds === 0) { current = point; start = point; travel.jump(1); finish(); return; } element.dataset.state = "moving"; travel.jump(0); travel.to(1, { duration: milliseconds / 1000, ease: [...motionTokens.ease.enter] }, finish); }, }; return () => { resize.disconnect(); travel.dispose(); press.dispose(); arrival.dispose(); engine.current = null; }; }, [safeSize]); React.useEffect(() => { const driver = engine.current; if (!driver) return; if (targetId === undefined || targetX === undefined || targetY === undefined) { driver.hide(); consumed.current = request; return; } const animate = !quiet && enabled && inView; const replay = animate && consumed.current !== request; consumed.current = request; driver.retarget({ id: targetId, x: targetX, y: targetY, click: targetClick, pressed: targetPressed }, travelTime, replay, replay); }, [request, targetId, targetX, targetY, targetClick, targetPressed, enabled, inView, quiet, travelTime, safeSize]); return ; } 52:T4e9,@layer cojeev-states { .v-guided-pointer{position:absolute;inset:0;overflow:clip;pointer-events:none;} .v-guided-pointer__position{position:absolute;inset:0 auto auto 0;width:var(--guided-pointer-size,28px);height:var(--guided-pointer-size,28px);} .v-guided-pointer__glyph{display:block;transform-origin:24% 20%;color:var(--v-text);filter:drop-shadow(0 1px 2px var(--v-canvas));} .v-guided-pointer__glyph .v-icon{width:var(--guided-pointer-size,28px);height:var(--guided-pointer-size,28px);fill:var(--v-canvas);stroke-width:1.7;} .v-guided-pointer__ring{position:absolute;left:calc(var(--guided-pointer-size,28px) * .24);top:calc(var(--guided-pointer-size,28px) * .2);width:calc(var(--guided-pointer-size,28px) * 1.5);height:calc(var(--guided-pointer-size,28px) * 1.5);border:1.5px solid var(--v-text);border-radius:46% 54% 49% 51%;opacity:0;} .v-guided-pointer[data-quiet="true"] .v-guided-pointer__ring,:where([data-flow="off"],[data-no-glide]) .v-guided-pointer__ring{visibility:hidden;} @media(prefers-reduced-motion:reduce){.v-guided-pointer__ring{visibility:hidden;}} @media(forced-colors:active){.v-guided-pointer__glyph{color:CanvasText;filter:none;}.v-guided-pointer__glyph .v-icon{fill:Canvas;}.v-guided-pointer__ring{border-color:Highlight;}} } 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":[null,["$","$L4d",null,{"namespace":"@000h-cojeev","registryDependencies":["https://000h.cojeev.com/r/cojeev.json","https://000h.cojeev.com/r/icon.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/guided-pointer.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L50",null,{"files":[{"path":"registry/cojeev/ui/guided-pointer.tsx","content":"$51","type":"registry:ui"},{"path":"registry/cojeev/styles/guided-pointer.css","content":"$52","type":"registry:file","target":"styles/cojeev/guided-pointer.css"}],"className":"h-[70svh] min-h-80"}]]}]