50: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 51: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 52:T5ab7,"use client"; import * as React from "react"; import { AnimatePresence, animate, motion, useMotionValue, useReducedMotion } from "motion/react"; import { Brain } from "lucide-react"; import { cn } from "@/lib/utils"; export interface EffortSliderProps extends Omit< React.ComponentProps<"div">, "defaultValue" | "onChange" | "children" > { levels?: string[]; value?: number; defaultValue?: number; onValueChange?: (value: number, level: string) => void; recommended?: number; tags?: string[]; theme?: EffortSliderTheme; label?: string; size?: EffortSliderSize; disabled?: boolean; } export type EffortSliderSize = "default" | "sm"; const SIZES: Record< EffortSliderSize, { height: number; inset: number; knob: number; gap: string } > = { default: { height: 24, inset: 12, knob: 30, gap: "mt-4" }, sm: { height: 18, inset: 9, knob: 22, gap: "mt-2.5" }, }; const SNAP = { duration: 0.22, ease: [0.22, 1, 0.36, 1] } as const; const SLAM = { duration: 0.15, ease: [0.55, 0, 0.9, 0.6] } as const; const DEFAULT_LEVELS = ["Low", "Medium", "High", "Max"]; const DEFAULT_TAGS = ["Fastest", "Faster", "Smarter", "Smartest"]; const PARTICLES = [ { top: 18, size: 2, delay: 0, twinkle: 1.1 }, { top: 62, size: 1.5, delay: -0.7, twinkle: 0.8 }, { top: 38, size: 2, delay: -1.6, twinkle: 1.3 }, { top: 80, size: 1.5, delay: -2.3, twinkle: 0.9 }, { top: 28, size: 1.5, delay: -3.1, twinkle: 1.2 }, { top: 50, size: 2, delay: -3.8, twinkle: 0.7 }, { top: 72, size: 2, delay: -4.6, twinkle: 1 }, { top: 12, size: 1.5, delay: -5.2, twinkle: 1.4 }, { top: 44, size: 1.5, delay: -1.1, twinkle: 0.9 }, { top: 86, size: 2, delay: -2.8, twinkle: 1.1 }, { top: 24, size: 2, delay: -4.1, twinkle: 0.8 }, { top: 56, size: 1.5, delay: -5.6, twinkle: 1.2 }, ]; export type EffortSliderTheme = "aurora" | "ocean" | "ember" | "forest" | "mono"; type Tone = { light: string; dark: string; brain: string; line: string }; type Palette = { tones: Tone[]; max: { light: string; dark: string; glowLight: string; glowDark: string }; }; const THEMES: Record = { aurora: { tones: [ { light: "#9a9cc8", dark: "#3b3d63", brain: "#b4b7ee", line: "#262850" }, { light: "#a596c6", dark: "#4a3d6b", brain: "#c3aef0", line: "#33245c" }, { light: "#c69aae", dark: "#6a3a56", brain: "#f9a8d4", line: "#6b1530" }, ], max: { light: "#e26d88", dark: "#b4455a", glowLight: "rgb(255 255 255 / 0.18)", glowDark: "rgb(255 150 170 / 0.35)", }, }, ocean: { tones: [ { light: "#8fb3c9", dark: "#2c4a5e", brain: "#a9d8f0", line: "#163447" }, { light: "#7fb0d6", dark: "#2e5379", brain: "#9cc9f5", line: "#183a5c" }, { light: "#7fc3c4", dark: "#285e63", brain: "#8fe3dc", line: "#0f4247" }, ], max: { light: "#36a9bb", dark: "#2a8a99", glowLight: "rgb(255 255 255 / 0.18)", glowDark: "rgb(140 230 240 / 0.35)", }, }, ember: { tones: [ { light: "#d9b38c", dark: "#5e4429", brain: "#f5c99a", line: "#4a2f14" }, { light: "#e3a37f", dark: "#6b3a24", brain: "#f7b48f", line: "#55240f" }, { light: "#e58f8f", dark: "#6e2a2a", brain: "#ff9e9e", line: "#5a1414" }, ], max: { light: "#e0573a", dark: "#b8432a", glowLight: "rgb(255 255 255 / 0.18)", glowDark: "rgb(255 180 130 / 0.35)", }, }, forest: { tones: [ { light: "#a7c4a0", dark: "#33503a", brain: "#b6e3ad", line: "#1c3a22" }, { light: "#9cc79b", dark: "#2f5a3b", brain: "#a8e6a8", line: "#173f22" }, { light: "#c3cf8a", dark: "#535d25", brain: "#e2f09a", line: "#3a4210" }, ], max: { light: "#93b83a", dark: "#6f8f1f", glowLight: "rgb(255 255 255 / 0.18)", glowDark: "rgb(210 240 140 / 0.35)", }, }, mono: { tones: [ { light: "#c4c4c9", dark: "#3a3a3f", brain: "#d4d4d8", line: "#27272a" }, { light: "#b0b0b7", dark: "#46464d", brain: "#e4e4e7", line: "#27272a" }, { light: "#9b9ba3", dark: "#55555c", brain: "#fafafa", line: "#18181b" }, ], max: { light: "#6a6a73", dark: "#8a8a93", glowLight: "rgb(255 255 255 / 0.2)", glowDark: "rgb(255 255 255 / 0.25)", }, }, }; const BACKING = [ { cx: 9, cy: 5, r: 3 }, { cx: 15, cy: 5, r: 3 }, { cx: 7, cy: 9, r: 4 }, { cx: 17, cy: 9, r: 4 }, { cx: 6, cy: 14, r: 4 }, { cx: 18, cy: 14, r: 4 }, { cx: 8, cy: 18, r: 4 }, { cx: 16, cy: 18, r: 4 }, ]; function BrainKnob() { return ( ); } const clamp = (value: number, min = 0, max = 1) => Math.min(max, Math.max(min, value)); const TRAIL = 140; const DRIFT_CSS = "@keyframes effort-slider-drift-a{from{transform:translate3d(-20%,0,0)}to{transform:translate3d(20%,0,0)}}" + "@keyframes effort-slider-flow{0%{transform:translate3d(0,0,0);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translate3d(100%,0,0);opacity:0}}" + "@keyframes effort-slider-twinkle{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.35;transform:scale(0.6)}}"; const stopAt = (index: number, count: number) => (count <= 1 ? 1 : index / (count - 1)); const RESTING = { light: "#a1a1aa", dark: "#3f3f46", brain: "#a1a1aa", line: "#3f3f46" }; const toneFor = (index: number, count: number, tones: Tone[]) => { if (index <= 0 && count > 1) return RESTING; const top = Math.max(1, count - 1); const step = Math.round(((clamp(index, 1, top) - 1) / Math.max(1, top - 1)) * (tones.length - 1)); return tones[step]; }; function effortTone(index: number, count: number, theme: EffortSliderTheme = "aurora") { return toneFor(index, count, (THEMES[theme] ?? THEMES.aurora).tones); } const maxGradient = (palette: Palette, count: number, mode: "light" | "dark") => { const segments = Math.max(1, count - 1); const hot = palette.max[mode]; const stops = Array.from({ length: segments }, (_, k) => { const middle = (((k + 0.5) / segments) * 100).toFixed(1); if (k === segments - 1) return `${hot} ${middle}%`; const level = toneFor(k + 1, count, palette.tones); const tone = mode === "light" ? `color-mix(in oklab, ${level.light} 80%, ${level.line})` : level.dark; return `color-mix(in oklab, ${tone} 72%, ${hot}) ${middle}%`; }); const glow = mode === "light" ? palette.max.glowLight : palette.max.glowDark; return `radial-gradient(70px 140% at 100% 50%, ${glow}, transparent), linear-gradient(90deg, ${stops.join(", ")}, ${hot} 100%)`; }; const leftAt = (fraction: number, inset: number) => `calc(${inset}px + (100% - ${inset * 2}px) * ${fraction})`; function EffortSlider({ levels = DEFAULT_LEVELS, value, defaultValue, onValueChange, recommended, theme = "aurora", tags = DEFAULT_TAGS, label = "Effort", size = "default", disabled = false, className, style, ...props }: EffortSliderProps) { const reduceMotion = useReducedMotion(); const { height, inset, knob, gap } = SIZES[size]; const count = Math.max(1, levels.length); const last = count - 1; const [inner, setInner] = React.useState(() => Math.round(clamp(defaultValue ?? 1, 0, last))); const current = Math.round(clamp(value ?? inner, 0, last)); const level = levels[current] ?? ""; const palette = THEMES[theme] ?? THEMES.aurora; const tone = toneFor(current, count, palette.tones); const maxed = count > 1 && current === last; const tag = recommended !== undefined && Math.round(recommended) === current ? "Recommended" : (tags[current] ?? ""); const particlesRef = React.useRef(null); React.useEffect(() => { const host = particlesRef.current; if (!host || typeof host.getAnimations !== "function") return; const rate = 0.5 + stopAt(current, count) * 2.5; for (const animation of host.getAnimations({ subtree: true })) { if ("animationName" in animation && animation.animationName === "effort-slider-flow") { animation.updatePlaybackRate(rate); } } }, [current, count, reduceMotion]); const [start] = React.useState(() => stopAt(current, count)); const head = useMotionValue(start); const draggingRef = React.useRef(false); const movedRef = React.useRef(false); const pressXRef = React.useRef(0); const pressIndexRef = React.useRef(0); const targetRef = React.useRef(null); const trackRef = React.useRef(null); const fillRef = React.useRef(null); const thumbRef = React.useRef(null); const trailRef = React.useRef(null); const commit = React.useCallback( (next: number) => { const index = Math.round(clamp(next, 0, last)); if (index === current) return; if (value === undefined) setInner(index); onValueChange?.(index, levels[index] ?? ""); }, [current, last, levels, onValueChange, value], ); const moveTo = React.useCallback( (fraction: number) => { if (targetRef.current === fraction && head.isAnimating()) return; targetRef.current = fraction; if (reduceMotion) head.jump(fraction); else animate(head, fraction, count > 1 && fraction >= 1 ? SLAM : SNAP); }, [count, head, reduceMotion], ); React.useEffect(() => { if (draggingRef.current) return; moveTo(stopAt(current, count)); }, [current, count, moveTo]); React.useEffect(() => { const track = trackRef.current; if (!track) return; let width = track.getBoundingClientRect().width; const fill = fillRef.current; const thumb = thumbRef.current; if (thumb) thumb.style.left = "0px"; const streak = trailRef.current; const edgeAt = () => inset + clamp(head.get()) * (width - inset * 2); let length = 0; let pace = 0; let side = -1; let lastEdge = edgeAt(); let lastTime = 0; let frame = 0; const sweep = (now: number) => { const dt = lastTime ? Math.min(0.05, (now - lastTime) / 1000) : 1 / 60; lastTime = now; const edge = edgeAt(); const speed = (edge - lastEdge) / Math.max(dt, 1 / 240); lastEdge = edge; pace += (speed - pace) * Math.min(1, dt * 10); if (Math.abs(pace) > 30) side = pace > 0 ? -1 : 1; const target = Math.min(TRAIL, Math.abs(pace) * 0.1); length += (target - length) * Math.min(1, dt * (target > length ? 18 : 7)); if (streak) { streak.style.transform = `translate3d(${edge.toFixed(2)}px, 0, 0) scaleX(${((side * length) / TRAIL).toFixed(3)})`; streak.style.opacity = Math.min(1, length / 36).toFixed(3); } if (length > 0.5 || Math.abs(pace) > 1) { frame = requestAnimationFrame(sweep); } else { frame = 0; lastTime = 0; length = 0; pace = 0; if (streak) streak.style.opacity = "0"; } }; const place = () => { if (!width) return; const edge = edgeAt(); if (fill) { fill.style.transform = `translate3d(${(edge - width).toFixed(2)}px, 0, 0)`; fill.style.opacity = clamp((edge - inset) / 10).toFixed(3); } if (thumb) thumb.style.transform = `translate3d(${(edge - knob / 2).toFixed(2)}px, 0, 0)`; if (streak && !frame && !reduceMotion) frame = requestAnimationFrame(sweep); }; place(); const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => { width = track.getBoundingClientRect().width; place(); }); observer?.observe(track); const unsubscribe = head.on("change", place); return () => { unsubscribe(); observer?.disconnect(); cancelAnimationFrame(frame); }; }, [head, reduceMotion, inset, knob]); const fractionAt = (clientX: number) => { const rect = trackRef.current?.getBoundingClientRect(); if (!rect || rect.width <= inset * 2) return head.get(); return clamp((clientX - rect.left - inset) / (rect.width - inset * 2)); }; const nearestStop = (fraction: number) => (count <= 1 ? 0 : Math.round(fraction * last)); const onPointerDown = (event: React.PointerEvent) => { if (disabled || event.button !== 0) return; event.currentTarget.setPointerCapture(event.pointerId); event.currentTarget.focus({ preventScroll: true }); draggingRef.current = true; movedRef.current = false; pressXRef.current = event.clientX; pressIndexRef.current = nearestStop(fractionAt(event.clientX)); moveTo(stopAt(pressIndexRef.current, count)); }; const onPointerMove = (event: React.PointerEvent) => { if (!draggingRef.current) return; if (!movedRef.current && Math.abs(event.clientX - pressXRef.current) < 4) return; movedRef.current = true; head.jump(fractionAt(event.clientX)); }; const release = (event: React.PointerEvent) => { if (!draggingRef.current) return; draggingRef.current = false; if (event.currentTarget.hasPointerCapture(event.pointerId)) { event.currentTarget.releasePointerCapture(event.pointerId); } const index = movedRef.current ? nearestStop(fractionAt(event.clientX)) : pressIndexRef.current; commit(index); moveTo(stopAt(index, count)); }; const onKeyDown = (event: React.KeyboardEvent) => { if (disabled) return; const keys: Record = { ArrowRight: current + 1, ArrowUp: current + 1, ArrowLeft: current - 1, ArrowDown: current - 1, PageUp: current + 1, PageDown: current - 1, Home: 0, End: last, }; if (!(event.key in keys)) return; event.preventDefault(); commit(keys[event.key]); }; return (

{!reduceMotion && ( )}

{label && {label}} {level}

{tag && ( {tag} )}

0 ? 1 : 0, }} > {!reduceMotion && ( )} {!reduceMotion && ( {PARTICLES.map((particle, index) => ( ))} )}

{levels.map((name, index) => { const marked = recommended !== undefined && Math.round(recommended) === index; return ( 0 ? marked ? "bg-white/90" : "bg-white/60" : marked ? "bg-muted-foreground/70" : "bg-muted-foreground/40", index === current && "opacity-0", )} style={{ left: leftAt(stopAt(index, count), inset) }} /> ); })}

); } EffortSlider.displayName = "EffortSlider"; export { EffortSlider, BrainKnob, effortTone }; 4f:["$","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"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@clover-ui","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/clover-ui/effort-slider.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]