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:T579d,"use client"; import { useCallback, useEffect, useLayoutEffect, useRef, useState, } from "react"; // --------------------------------------------------------------------------- // FlywheelPull — pull-to-refresh as a crank and flywheel. Dragging the wheel // zone down winds a spoked SVG wheel through a visible rack-and-pinion // drivetrain, pull distance mapping 1:1 to wind-up angle. Releasing hands the // wheel an angular velocity of pullDistance * a gain constant, integrated per // rAF frame under low friction while the (real or simulated) refresh request // is in flight — the loading state IS the gesture's energy bleeding off, not // a canned spinner swap. When the response lands, friction jumps and the // wheel decays to rest over ~400ms; new rows FLIP into the list at the same // moment the wheel settles. A visible Refresh button is always the primary // path; the drag is enhancement, and clicking it replays the same physics // via a synthetic pull so the two paths feel like one mechanism. DOM+SVG+CSS // only, no canvas, colors are CSS custom properties only. // --------------------------------------------------------------------------- const WIND_DEG_PER_PX = 1.05; // wind-up angle per px pulled const MAX_PULL = 130; // px — beyond this, rubber-band resistance const RUBBER = 0.32; // beyond-MAX_PULL displacement scale const RELEASE_GAIN = 1.65; // deg/s of release velocity per px pulled const FRICTION_FREE = 0.55; // s^-1 — low friction while request is in flight const FRICTION_BRAKE = 10; // s^-1 — applied once the response arrives const SLEEP_OMEGA = 3; // deg/s — below this, and braking, the wheel is at rest const PULL_RETURN = 16; // s^-1 — rack/pinion spring back to 0 after release const FORCE_SETTLE_MS = 6000; // safety deadline so physics never spins forever const BUTTON_WIND_PX = 96; // synthetic pull distance for a click-only refresh const MIN_LATENCY_MS = 900; const MAX_LATENCY_MS = 1500; const MAX_ITEMS = 14; const ENTER_STAGGER_MS = 70; const ENTER_DURATION_MS = 380; const CX_WHEEL = 176; const CY_WHEEL = 80; const R_WHEEL = 54; const CX_PINION = 86; const CY_PINION = 80; const R_PINION = 15; const SPOKES = 8; const RACK_X = 40; const RACK_Y = 6; const RACK_W = 30; const RACK_H = 148; const TOOTH_PITCH = 16; export interface FlywheelPullItem { id: string; title: string; meta?: string; } export interface FlywheelPullProps { /** Initial feed rows, newest first. */ defaultItems?: FlywheelPullItem[]; /** * Called on release/refresh; resolve with the new rows to prepend. Omit to * use a built-in simulated request (900-1500ms) that manufactures rows — * fine for a demo, but a real feed should supply this. */ onRefresh?: () => Promise; /** Accessible label for the row list. */ label?: string; /** extra classes merged onto the rendered root element */ className?: string; } const SAMPLE_TITLES = [ "New comment on “Q3 roadmap”", "3 people starred your repo", "Deploy finished: prod-web-42", "Weekly digest is ready", "Mentioned you in #general", "New follower: @octavia", "Build failed on staging", "Invoice #4021 was paid", "2 reviewers approved your PR", "New device signed in", ]; let idCounter = 0; function generateItems(n: number): FlywheelPullItem[] { const out: FlywheelPullItem[] = []; for (let i = 0; i < n; i++) { idCounter += 1; const title = SAMPLE_TITLES[Math.floor(Math.random() * SAMPLE_TITLES.length)] ?? "Update"; out.push({ id: `fw-${idCounter}`, title, meta: "just now" }); } return out; } function simulateRefresh(): Promise { const latency = MIN_LATENCY_MS + Math.random() * (MAX_LATENCY_MS - MIN_LATENCY_MS); const count = 2 + Math.floor(Math.random() * 5); // 2..6 return new Promise((resolve) => { window.setTimeout(() => resolve(generateItems(count)), latency); }); } type Phase = "idle" | "busy" | "done" | "error"; export function FlywheelPull({ defaultItems, onRefresh, label = "Activity feed", className = "", }: FlywheelPullProps) { const [items, setItems] = useState( () => defaultItems ?? generateItems(5) ); const [phase, setPhase] = useState("idle"); const [liveText, setLiveText] = useState(""); const [enteringOrder, setEnteringOrder] = useState([]); const zoneRef = useRef(null); const wheelGroupRef = useRef(null); const pinionGroupRef = useRef(null); const rackTeethRef = useRef(null); const rowRefs = useRef>(new Map()); const prevRectsRef = useRef>(new Map()); const reducedRef = useRef(false); const onRefreshRef = useRef(onRefresh); onRefreshRef.current = onRefresh; const captureRects = useCallback(() => { const map = new Map(); rowRefs.current.forEach((el, id) => { map.set(id, el.getBoundingClientRect()); }); prevRectsRef.current = map; }, []); // single place that turns a settled request into visible feed state — // called from the physics loop (in flight), the reduced-motion pointer // path, and the reduced-motion button path alike. const applyResult = useCallback( (result: FlywheelPullItem[] | null, failed: boolean) => { if (failed || !result) { setPhase("error"); setLiveText("Refresh failed, wheel at rest."); window.setTimeout(() => setPhase("idle"), 1600); return; } captureRects(); setItems((prev) => [...result, ...prev].slice(0, MAX_ITEMS)); const ids = result.map((r) => r.id); setEnteringOrder(ids); setPhase("done"); setLiveText( `Updated, ${result.length} new item${result.length === 1 ? "" : "s"}` ); window.setTimeout( () => { setEnteringOrder((cur) => cur.filter((id) => !ids.includes(id))); }, ENTER_DURATION_MS + ids.length * ENTER_STAGGER_MS + 60 ); }, [captureRects] ); const applyResultRef = useRef(applyResult); applyResultRef.current = applyResult; // every refresh (drag release or button) bumps this; a resolving request // only commits if it's still the most recent one — clicking Refresh again // mid-flight restarts the wheel instead of queuing a second, stale commit. const genRef = useRef(0); useLayoutEffect(() => { if (reducedRef.current) return; const prev = prevRectsRef.current; rowRefs.current.forEach((el, id) => { const before = prev.get(id); if (!before) return; const after = el.getBoundingClientRect(); const dy = before.top - after.top; if (Math.abs(dy) < 0.5) return; el.style.transition = "none"; el.style.transform = `translateY(${dy}px)`; requestAnimationFrame(() => { el.style.transition = "transform 420ms cubic-bezier(.22,1,.36,1)"; el.style.transform = ""; }); }); }, [items]); useEffect(() => { const zone = zoneRef.current; if (!zone) return; const reduced = window.matchMedia( "(prefers-reduced-motion: reduce)" ).matches; reducedRef.current = reduced; // hot-path physics state — plain locals, no React state per frame let angle = 0; let pull = 0; let v = 0; // deg/s let braking = false; let raf = 0; let last = 0; let deadline = 0; let dragging = false; let pointerId = -1; let startY = 0; let baseAngle = 0; let pendingResolve: (() => void) | null = null; const writeTransforms = (a: number, p: number) => { wheelGroupRef.current?.setAttribute( "transform", `rotate(${a.toFixed(2)} ${CX_WHEEL} ${CY_WHEEL})` ); pinionGroupRef.current?.setAttribute( "transform", `rotate(${a.toFixed(2)} ${CX_PINION} ${CY_PINION})` ); rackTeethRef.current?.setAttribute( "transform", `translate(0 ${p.toFixed(2)})` ); }; const loop = (now: number) => { raf = 0; const dt = last ? Math.min(0.032, (now - last) / 1000) : 1 / 60; last = now; const friction = braking ? FRICTION_BRAKE : FRICTION_FREE; v *= Math.exp(-friction * dt); angle += v * dt; pull = pull > 0.02 ? pull * Math.exp(-PULL_RETURN * dt) : 0; writeTransforms(angle, pull); const settleReady = braking && Math.abs(v) < SLEEP_OMEGA; const forceSettle = now > deadline; if (settleReady || forceSettle) { v = 0; pull = 0; writeTransforms(angle, 0); const resolve = pendingResolve; pendingResolve = null; resolve?.(); return; } raf = requestAnimationFrame(loop); }; const startFlight = (releaseVelocity: number) => { v = releaseVelocity; braking = false; pendingResolve = null; deadline = performance.now() + FORCE_SETTLE_MS; setPhase("busy"); setLiveText("Refreshing…"); last = 0; raf = requestAnimationFrame(loop); const myGen = ++genRef.current; const req = onRefreshRef.current ? onRefreshRef.current() : simulateRefresh(); const finish = (result: FlywheelPullItem[] | null, failed: boolean) => { if (myGen !== genRef.current) return; // superseded by a later refresh // response arrived — raise friction, wait for the loop to actually // settle, then commit rows exactly as the wheel comes to rest. braking = true; pendingResolve = () => applyResultRef.current(result, failed); }; req.then( (result) => finish(result, false), () => finish(null, true) ); }; const springBackIdle = () => { last = 0; const idleLoop = (now: number) => { raf = 0; const dt = last ? Math.min(0.032, (now - last) / 1000) : 1 / 60; last = now; pull *= Math.exp(-PULL_RETURN * dt); writeTransforms(angle, pull); if (pull > 0.05) raf = requestAnimationFrame(idleLoop); else { pull = 0; writeTransforms(angle, 0); } }; raf = requestAnimationFrame(idleLoop); }; const onPointerDown = (e: PointerEvent) => { if (e.button !== 0) return; // grabs the wheel even mid-freewheel/mid-brake — catching it and // winding again always wins over whatever was already in flight; a // stale response is dropped by the genRef check in `finish`. dragging = true; pointerId = e.pointerId; startY = e.clientY; baseAngle = angle; pull = 0; v = 0; braking = false; pendingResolve = null; // a grab always supersedes whatever request was in flight — otherwise a // late response with no loop left to resolve it (e.g. grab then release // under the 4px threshold, no re-flight started) would strand `phase` // on "busy" forever. Reset unconditionally (React bails out a same-value // set) rather than reading `phase`, which is stale in this mount-once // closure. genRef.current++; setPhase("idle"); zone.style.cursor = "grabbing"; try { zone.setPointerCapture(e.pointerId); } catch { /* synthetic or already-gone pointer */ } cancelAnimationFrame(raf); raf = 0; if (!reduced) writeTransforms(angle, 0); }; const onPointerMove = (e: PointerEvent) => { if (!dragging || e.pointerId !== pointerId) return; const rawDy = e.clientY - startY; const dy = rawDy < 0 ? 0 : rawDy; pull = dy <= MAX_PULL ? dy : MAX_PULL + (dy - MAX_PULL) * RUBBER; if (reduced) return; angle = baseAngle + pull * WIND_DEG_PER_PX; writeTransforms(angle, pull); }; const onPointerUp = (e: PointerEvent) => { if (e.pointerId !== pointerId) return; zone.style.cursor = ""; if (!dragging) return; dragging = false; pointerId = -1; const finalPull = pull; if (reduced) { if (finalPull >= 4) { setPhase("busy"); setLiveText("Refreshing…"); const myGen = ++genRef.current; const req = onRefreshRef.current ? onRefreshRef.current() : simulateRefresh(); req.then( (result) => { if (myGen === genRef.current) applyResultRef.current(result, false); }, () => { if (myGen === genRef.current) applyResultRef.current(null, true); } ); } pull = 0; return; } if (finalPull < 4) { springBackIdle(); return; } startFlight(finalPull * RELEASE_GAIN); }; const onPointerCancel = (e: PointerEvent) => onPointerUp(e); zone.addEventListener("pointerdown", onPointerDown); zone.addEventListener("pointermove", onPointerMove); zone.addEventListener("pointerup", onPointerUp); zone.addEventListener("pointercancel", onPointerCancel); return () => { cancelAnimationFrame(raf); zone.removeEventListener("pointerdown", onPointerDown); zone.removeEventListener("pointermove", onPointerMove); zone.removeEventListener("pointerup", onPointerUp); zone.removeEventListener("pointercancel", onPointerCancel); }; }, []); const handleButtonRefresh = useCallback(() => { // always restarts the cycle, even mid-flight — a second press is a // fresh yank on the crank, not a no-op; see genRef in the physics effect. if (reducedRef.current) { setPhase("busy"); setLiveText("Refreshing…"); const myGen = ++genRef.current; const req = onRefreshRef.current ? onRefreshRef.current() : simulateRefresh(); req.then( (result) => { if (myGen === genRef.current) applyResultRef.current(result, false); }, () => { if (myGen === genRef.current) applyResultRef.current(null, true); } ); return; } // dispatch a synthetic pull onto the drag zone so a plain click runs the // exact same wind -> release -> freewheel -> brake physics as a real drag. const zone = zoneRef.current; if (!zone) return; const rect = zone.getBoundingClientRect(); const cx = rect.left + rect.width / 2; const top = rect.top + 8; const pid = -999; const opts = { pointerId: pid, clientX: cx, button: 0, bubbles: true }; zone.dispatchEvent(new PointerEvent("pointerdown", { ...opts, clientY: top })); zone.dispatchEvent( new PointerEvent("pointermove", { ...opts, clientY: top + BUTTON_WIND_PX }) ); zone.dispatchEvent( new PointerEvent("pointerup", { ...opts, clientY: top + BUTTON_WIND_PX }) ); }, []); const busy = phase === "busy"; const statusText = phase === "idle" ? "Pull the wheel down, or press Refresh." : liveText; return (

{statusText}

{liveText}

{ if (el) rowRefs.current.set(item.id, el); else rowRefs.current.delete(item.id); }} className={`flex items-center justify-between gap-3 px-4 py-3 ${ entering ? "ns-fw-enter" : "" }`} style={ entering ? { animationDelay: `${enteringOrder.indexOf(item.id) * ENTER_STAGGER_MS}ms` } : undefined } > {item.title} {item.meta && ( {item.meta} )}

); } 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/refresh-pull-flywheel/component.tsx","content":"$69","type":"registry:ui","target":"components/ui/refresh-pull-flywheel.tsx"}],"className":"h-[70svh] min-h-80"}]]}]