64: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 65: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/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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"],"ItemStyles"] 66:I[8513,["/_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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"],"ScrollArea"] 67:I[8513,["/_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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"],"ScrollBar"] 68: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 69:T3963,"use client"; import { useEffect, useRef, type ReactNode } from "react"; // ScissorReach — a minimap whose viewport rectangle is physically wired to // the real viewport by a live SVG pantograph. The minimap is a scaled clone // of the same content (CSS transform: scale, never re-measured — width and // height ratios are derived once from the fixed contentWidth/contentHeight // props). Between the minimap's viewport rect and the real viewport's // top-left corner, two mirrored 2-bar elbow arms are solved every frame by // trivial IK from the two live anchor points; only the elbow (joint) // springs — the anchors themselves track their DOM elements exactly, never // lagging, so the linkage always reads as physically attached rather than // floating. Direct-DOM rAF, refs only on the hot path, sleeps when the // spring settles and dragging has stopped. type Vec = { x: number; y: number }; const BOW = 26; // px — arm reach exceeds half the anchor span by this much const SPRING_K = 200; // s^-2 const SPRING_ZETA = 0.8; // slightly underdamped -> a hair of catch-up snap const SPRING_C = 2 * SPRING_ZETA * Math.sqrt(SPRING_K); const SETTLE_EPS = 0.15; // px const SETTLE_V_EPS = 2; // px/s const IDLE_MS = 700; // idle relax delay before the linkage fades to 0.3 const STEP_X = 32; // px per ArrowLeft/Right, content space function clamp(v: number, lo: number, hi: number) { return Math.min(hi, Math.max(lo, v)); } // Two equal-length links whose combined reach is fixed at (d/2 + bow) for // the current anchor distance d — always solvable (no negative sqrt), and // the bow shrinks as a fraction of d as the anchors pull apart, which reads // as "the linkage extends and flattens" rather than a floppy fixed arm. function twoBarElbow(a: Vec, b: Vec, bow: number) { const dx = b.x - a.x; const dy = b.y - a.y; const d = Math.max(1e-4, Math.hypot(dx, dy)); const link = d / 2 + bow; const h = Math.sqrt(Math.max(0, link * link - (d / 2) * (d / 2))); const mx = (a.x + b.x) / 2; const my = (a.y + b.y) / 2; const nx = -dy / d; const ny = dx / d; return { up: { x: mx + nx * h, y: my + ny * h }, down: { x: mx - nx * h, y: my - ny * h }, }; } export function ScissorReach({ children, contentWidth, contentHeight, minimapWidth = 140, minimapHeight = 220, viewportHeight = 340, rowHeight = 16, unitLabel = "rows", className = "", "aria-label": ariaLabel = "Document position", }: { /** the full content — size it so it renders at exactly contentWidth x contentHeight */ children: ReactNode; /** logical content extent in px that `children` occupies */ contentWidth: number; /** logical content height in px that `children` occupies */ contentHeight: number; /** minimap panel size in px — independent of content aspect ratio, like a scrollbar rail */ minimapWidth?: number; /** minimap panel height in px */ minimapHeight?: number; /** fixed viewport pane height in px */ viewportHeight?: number; /** row height in px — used only to phrase the aria-valuetext readout */ rowHeight?: number; /** unit noun appended to the aria-valuetext readout, e.g. "rows" */ unitLabel?: string; /** extra classes merged onto the rendered root element */ className?: string; /** accessible name for the minimap. Default "Document position". */ "aria-label"?: string; }) { const containerRef = useRef(null); const trackRef = useRef(null); const handleRef = useRef(null); const viewportRef = useRef(null); const groupRef = useRef(null); const lineRefs = useRef<(SVGLineElement | null)[]>([]); const circleRefs = useRef<(SVGCircleElement | null)[]>([]); const totalRows = Math.max(1, Math.round(contentHeight / rowHeight)); const initialEndRow = Math.min(totalRows, Math.ceil(viewportHeight / rowHeight)); useEffect(() => { const container = containerRef.current; const track = trackRef.current; const handle = handleRef.current; const viewport = viewportRef.current; const group = groupRef.current; if (!container || !track || !handle || !viewport || !group) return; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; const scaleX = minimapWidth / contentWidth; const scaleY = minimapHeight / contentHeight; let vpW = viewport.clientWidth; let vpH = viewport.clientHeight; let dragging = false; let dragStartX = 0; let dragStartY = 0; let dragScrollLeft = 0; let dragScrollTop = 0; let upPos: Vec = { x: 0, y: 0 }; let upVel: Vec = { x: 0, y: 0 }; let downPos: Vec = { x: 0, y: 0 }; let downVel: Vec = { x: 0, y: 0 }; let primed = false; let raf = 0; let last = 0; let idleTimer: ReturnType | null = null; const maxTop = () => Math.max(0, contentHeight - vpH); const maxLeft = () => Math.max(0, contentWidth - vpW); const markActive = () => { group.style.opacity = "1"; if (idleTimer) clearTimeout(idleTimer); idleTimer = setTimeout(() => { group.style.opacity = "0.3"; }, IDLE_MS); }; // returns true once settled (always true immediately under reduced motion) const springTo = (pos: Vec, vel: Vec, target: Vec, dt: number) => { if (reduced) { pos.x = target.x; pos.y = target.y; vel.x = 0; vel.y = 0; return true; } vel.x += (SPRING_K * (target.x - pos.x) - SPRING_C * vel.x) * dt; vel.y += (SPRING_K * (target.y - pos.y) - SPRING_C * vel.y) * dt; pos.x += vel.x * dt; pos.y += vel.y * dt; const dErr = Math.hypot(target.x - pos.x, target.y - pos.y); const vErr = Math.hypot(vel.x, vel.y); return dErr < SETTLE_EPS && vErr < SETTLE_V_EPS; }; const frame = (now: number) => { raf = 0; const dt = last ? clamp((now - last) / 1000, 0.001, 1 / 30) : 1 / 60; last = now; const scrollTop = clamp(viewport.scrollTop, 0, maxTop()); const scrollLeft = clamp(viewport.scrollLeft, 0, maxLeft()); const rectW = Math.min(minimapWidth, Math.max(4, vpW * scaleX)); const rectH = Math.min(minimapHeight, Math.max(4, vpH * scaleY)); const rectLeft = clamp(scrollLeft * scaleX, 0, Math.max(0, minimapWidth - rectW)); const rectTop = clamp(scrollTop * scaleY, 0, Math.max(0, minimapHeight - rectH)); handle.style.left = `${rectLeft}px`; handle.style.top = `${rectTop}px`; handle.style.width = `${rectW}px`; handle.style.height = `${rectH}px`; const trackBox = track.getBoundingClientRect(); const containerBox = container.getBoundingClientRect(); const viewportBox = viewport.getBoundingClientRect(); const originX = trackBox.left - containerBox.left; const originY = trackBox.top - containerBox.top; // A: the rect's near corner (moves with the drag). B: the real // viewport's fixed corner. Neither is ever sprung — only the elbow // joints between them are, so the linkage always looks attached. const a: Vec = { x: originX + rectLeft + rectW, y: originY + rectTop }; const b: Vec = { x: viewportBox.left - containerBox.left, y: viewportBox.top - containerBox.top }; const target = twoBarElbow(a, b, BOW); if (!primed) { upPos = { ...target.up }; downPos = { ...target.down }; primed = true; } const settledUp = springTo(upPos, upVel, target.up, dt); const settledDown = springTo(downPos, downVel, target.down, dt); const segs = lineRefs.current; const write = (el: SVGLineElement | null | undefined, p1: Vec, p2: Vec) => { if (!el) return; el.setAttribute("x1", String(p1.x)); el.setAttribute("y1", String(p1.y)); el.setAttribute("x2", String(p2.x)); el.setAttribute("y2", String(p2.y)); }; write(segs[0], a, upPos); write(segs[1], upPos, b); write(segs[2], a, downPos); write(segs[3], downPos, b); const pts = [a, upPos, downPos, b]; circleRefs.current.forEach((c, i) => { const p = pts[i]; if (c && p) { c.setAttribute("cx", String(p.x)); c.setAttribute("cy", String(p.y)); } }); const startRow = Math.floor(scrollTop / rowHeight) + 1; const endRow = Math.min(totalRows, Math.ceil((scrollTop + vpH) / rowHeight)); handle.setAttribute("aria-valuenow", String(startRow)); handle.setAttribute( "aria-valuetext", `viewing ${unitLabel} ${startRow}-${endRow} of ${totalRows}` ); const active = dragging || !settledUp || !settledDown; if (active) raf = requestAnimationFrame(frame); }; const wake = () => { markActive(); if (!raf) { last = 0; raf = requestAnimationFrame(frame); } }; const onPointerDown = (e: PointerEvent) => { e.preventDefault(); track.setPointerCapture(e.pointerId); handle.focus({ preventScroll: true }); dragging = true; dragStartX = e.clientX; dragStartY = e.clientY; dragScrollLeft = viewport.scrollLeft; dragScrollTop = viewport.scrollTop; wake(); }; const onPointerMove = (e: PointerEvent) => { if (!dragging) return; const dxContent = (e.clientX - dragStartX) / scaleX; const dyContent = (e.clientY - dragStartY) / scaleY; viewport.scrollLeft = clamp(dragScrollLeft + dxContent, 0, maxLeft()); viewport.scrollTop = clamp(dragScrollTop + dyContent, 0, maxTop()); wake(); }; const endDrag = (e: PointerEvent) => { if (!dragging) return; dragging = false; try { track.releasePointerCapture(e.pointerId); } catch { // synthetic pointerId during autoplay — nothing to release } wake(); }; const onKeyDown = (e: KeyboardEvent) => { let handled = true; switch (e.key) { case "ArrowDown": viewport.scrollTop = clamp(viewport.scrollTop + rowHeight, 0, maxTop()); break; case "ArrowUp": viewport.scrollTop = clamp(viewport.scrollTop - rowHeight, 0, maxTop()); break; case "ArrowRight": viewport.scrollLeft = clamp(viewport.scrollLeft + STEP_X, 0, maxLeft()); break; case "ArrowLeft": viewport.scrollLeft = clamp(viewport.scrollLeft - STEP_X, 0, maxLeft()); break; case "PageDown": viewport.scrollTop = clamp(viewport.scrollTop + vpH * 0.9, 0, maxTop()); break; case "PageUp": viewport.scrollTop = clamp(viewport.scrollTop - vpH * 0.9, 0, maxTop()); break; case "Home": viewport.scrollTop = 0; break; case "End": viewport.scrollTop = maxTop(); break; default: handled = false; } if (handled) { e.preventDefault(); wake(); } }; const onScroll = () => wake(); const ro = new ResizeObserver(() => { vpW = viewport.clientWidth; vpH = viewport.clientHeight; wake(); }); ro.observe(viewport); track.addEventListener("pointerdown", onPointerDown); track.addEventListener("pointermove", onPointerMove); track.addEventListener("pointerup", endDrag); track.addEventListener("pointercancel", endDrag); handle.addEventListener("keydown", onKeyDown); viewport.addEventListener("scroll", onScroll, { passive: true }); wake(); return () => { cancelAnimationFrame(raf); if (idleTimer) clearTimeout(idleTimer); ro.disconnect(); track.removeEventListener("pointerdown", onPointerDown); track.removeEventListener("pointermove", onPointerMove); track.removeEventListener("pointerup", endDrag); track.removeEventListener("pointercancel", endDrag); handle.removeEventListener("keydown", onKeyDown); viewport.removeEventListener("scroll", onScroll); }; }, [contentWidth, contentHeight, minimapWidth, minimapHeight, viewportHeight, rowHeight, unitLabel, totalRows]); return (

{children}

); } 63:["$","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,["$","$L64",null,{"namespace":"@registrydirectory","registryDependencies":[]}]]}],["$","$L65",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Light Mode"}],["$","div",null,{"children":["$","$L66",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#4d4d4d"}]]}],["$","div","ns-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#006bff"}]]}]]}],["$","$L67",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L66",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#8f8f8f"}]]}]]}],["$","$L67",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Theme"}],["$","div",null,{"children":["$","$L66",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","color-ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--ns-muted)"}]]}],["$","div","color-ns-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-ns-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--ns-accent)"}]]}]]}],["$","$L67",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L68",null,{"files":[{"path":"registry/core/minimap-pantograph/component.tsx","content":"$69","type":"registry:ui","target":"components/ui/minimap-pantograph.tsx"}],"className":"h-[70svh] min-h-80"}]]}]