4a: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"] 4b: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"] 4c:T3215,"use client"; import { useEffect, useId, useRef } from "react"; import { animate, useMotionValue } from "framer-motion"; import NumberFlow from "@number-flow/react"; import { cn } from "@/lib/utils"; import { FearGreedGaugeSkeleton } from "./components/skeleton"; import { useFearGreed, type FearGreedData } from "./hooks/use-fear-greed"; import { DEFAULT_FEAR_GREED_BANDS, GAUGE_CENTER_X, GAUGE_CENTER_Y, GRADIENT_STOPS, WEDGE_GAP, WEDGE_HUB_RADIUS, WEDGE_INNER_RADIUS, WEDGE_OUTER_RADIUS, WEDGES_VIEWBOX_HEIGHT, angleForValue, arcPoint, colorForValue, describeArc, describeWedge, equalizedValue, findFearGreedBand, } from "./lib/fear-greed-bands"; export interface FearGreedGaugeProps { /** Provide your own data to bypass the bundled alternative.me fetcher. */ data?: FearGreedData; /** "gradient" (default) smooth blend; "minimal" 5 discrete bands; "ticks" 100 tick marks; "wedges" CNN-style zone sectors. */ variant?: "minimal" | "ticks" | "gradient" | "wedges"; /** Spring the needle in from neutral on first render instead of snapping. */ animateOnLoad?: boolean; className?: string; } const TICKS_MAJOR_VALUES = [0, 25, 50, 75, 100]; const TICKS_FINE_VALUES = Array.from({ length: 100 }, (_, i) => i + 1); const WEDGE_LABEL_RADIUS = (WEDGE_OUTER_RADIUS + WEDGE_INNER_RADIUS) / 2; const WEDGE_BAND_SHARE = 100 / DEFAULT_FEAR_GREED_BANDS.length; // Equalized wedge corners are real band boundaries, so numbers sit at the corners. const WEDGE_SCALE_NUMBER_VALUES = [0, 25, 45, 55, 75, 100]; // Decorative dots at thirds between the corner numbers (display positions, not values). const WEDGE_SCALE_DOT_DISPLAY_VALUES = DEFAULT_FEAR_GREED_BANDS.flatMap((_, i) => [ (i + 1 / 3) * WEDGE_BAND_SHARE, (i + 2 / 3) * WEDGE_BAND_SHARE, ]); const WEDGE_SCALE_DOT_RADIUS = 48; const WEDGE_SCALE_NUMBER_RADIUS = 56; function labelAnchor(value: number): "start" | "middle" | "end" { if (value < 45) return "start"; if (value > 55) return "end"; return "middle"; } export function FearGreedGauge({ data, variant = "gradient", animateOnLoad = true, className, }: FearGreedGaugeProps) { const gradientId = useId(); const fetched = useFearGreed({ enabled: data === undefined }); const resolved = data ?? fetched.data; const loading = data === undefined && fetched.loading; const value = resolved?.value ?? null; const label = resolved?.label ?? "Unknown"; const hasError = data === undefined && Boolean(fetched.error); // The wedges dial is drawn in equalized space; remap the needle to match. const dialValue = value !== null && variant === "wedges" ? equalizedValue(value) : value; const needleRotation = dialValue !== null ? 90 - angleForValue(dialValue) : 0; const activeBand = variant === "wedges" && value !== null ? findFearGreedBand(value) : null; // Drive the SVG rotate() attribute imperatively: framer's transform pipeline // drops 3-arg SVG rotate() and would pivot around the wrong origin. const needleGroupRef = useRef(null); const needleMV = useMotionValue(needleRotation); useEffect(() => { return needleMV.on("change", (r) => { needleGroupRef.current?.setAttribute("transform", `rotate(${r} ${GAUGE_CENTER_X} ${GAUGE_CENTER_Y})`); }); }, [needleMV]); const hasLoadedOnceRef = useRef(false); useEffect(() => { const justLoaded = value !== null && !hasLoadedOnceRef.current; if (value !== null) hasLoadedOnceRef.current = true; if (justLoaded && !animateOnLoad) { needleMV.set(needleRotation); return; } const controls = animate(needleMV, needleRotation, { type: "spring", stiffness: 100 }); return controls.stop; }, [needleRotation, value, animateOnLoad, needleMV]); if (loading) { return ; } return (

{variant === "wedges" && (

{value !== null ? : "-"} {/* The zone name only exists in the aria-hidden SVG; repeat it for screen readers. */} {!hasError && {label}}

)}

{variant === "wedges" ? ( hasError && (

Fear & Greed data is unavailable.

) ) : (

{value !== null ? : "-"}

{hasError ? (

Fear & Greed data is unavailable.

) : (

{label}

)}

); } 4d:Tf08,"use client"; import { cn } from "@/lib/utils"; import { DEFAULT_FEAR_GREED_BANDS, GAUGE_CENTER_X, GAUGE_CENTER_Y, WEDGE_GAP, WEDGE_HUB_RADIUS, WEDGE_INNER_RADIUS, WEDGE_OUTER_RADIUS, WEDGES_VIEWBOX_HEIGHT, describeArc, describeWedge, } from "../lib/fear-greed-bands"; export interface FearGreedGaugeSkeletonProps { /** Matches FearGreedGaugeProps["variant"] so the ghost lines up with the real dial. */ variant?: "minimal" | "ticks" | "gradient" | "wedges"; className?: string; } const WEDGE_COUNT = DEFAULT_FEAR_GREED_BANDS.length; export function FearGreedGaugeSkeleton({ variant = "gradient", className }: FearGreedGaugeSkeletonProps) { const isWedges = variant === "wedges"; return (

{isWedges && (

)}

{!isWedges && (

)} Loading Fear & Greed Index

); } 4e:T83c,"use client"; import { useEffect, useState } from "react"; export interface FearGreedData { /** 0-100 index value, or null when the upstream has no data. */ value: number | null; /** Upstream classification, e.g. "Fear", "Neutral", "Greed". */ label: string; /** Upstream unix-seconds timestamp string, if provided. */ updatedAt: string | null; } const FEAR_GREED_URL = "https://api.alternative.me/fng/?limit=1"; export function parseFngResponse(raw: unknown): FearGreedData { const rows = (raw as { data?: Array> } | null | undefined)?.data ?? []; const row = rows[0]; if (!row) return { value: null, label: "Unknown", updatedAt: null }; const parsed = Number(row.value); return { value: Number.isFinite(parsed) ? parsed : null, label: typeof row.value_classification === "string" ? row.value_classification : "Neutral", updatedAt: typeof row.timestamp === "string" ? row.timestamp : null, }; } export function useFearGreed( options: { enabled?: boolean; refreshInterval?: number } = {}, ) { const { enabled = true, refreshInterval = 600_000 } = options; const [data, setData] = useState(null); const [loading, setLoading] = useState(enabled); const [error, setError] = useState(null); useEffect(() => { if (!enabled) return; let cancelled = false; const load = async () => { try { const res = await fetch(FEAR_GREED_URL); if (!res.ok) throw new Error(`Fear & Greed request failed: ${res.status}`); const raw = await res.json(); if (cancelled) return; setData(parseFngResponse(raw)); setError(null); setLoading(false); } catch (err) { if (cancelled) return; setError(err instanceof Error ? err.message : "Fear & Greed request failed"); setLoading(false); } }; load(); const timer = setInterval(load, refreshInterval); return () => { cancelled = true; clearInterval(timer); }; }, [enabled, refreshInterval]); return { data, loading, error }; } 4f:T135c,export interface FearGreedBand { key: string; label: string; min: number; max: number; color: string; } /** Boundaries mirror alternative.me's value_classification thresholds. */ export const DEFAULT_FEAR_GREED_BANDS: FearGreedBand[] = [ { key: "extreme-fear", label: "Extreme Fear", min: 0, max: 24, color: "#c0392b" }, { key: "fear", label: "Fear", min: 25, max: 44, color: "#e0672b" }, { key: "neutral", label: "Neutral", min: 45, max: 55, color: "#f0c929" }, { key: "greed", label: "Greed", min: 56, max: 75, color: "#4caf50" }, { key: "extreme-greed", label: "Extreme Greed", min: 76, max: 100, color: "#2e7d32" }, ]; export const GAUGE_CENTER_X = 130; export const GAUGE_CENTER_Y = 130; /** Angle in degrees for a 0-100 value along the top semicircle (180 at 0, 0 at 100). */ export function angleForValue(value: number): number { const clamped = Math.min(Math.max(value, 0), 100); return 180 - (clamped / 100) * 180; } /** Point at radius for a 0-100 value; rounded to 4 decimals to avoid hydration mismatches. */ export function arcPoint(radius: number, value: number): { x: number; y: number } { const rad = (angleForValue(value) * Math.PI) / 180; return { x: Math.round((GAUGE_CENTER_X + radius * Math.cos(rad)) * 10000) / 10000, y: Math.round((GAUGE_CENTER_Y - radius * Math.sin(rad)) * 10000) / 10000, }; } /** SVG arc path between two values along the top semicircle. */ export function describeArc(radius: number, fromValue: number, toValue: number): string { const start = arcPoint(radius, fromValue); const end = arcPoint(radius, toValue); return `M ${start.x} ${start.y} A ${radius} ${radius} 0 0 1 ${end.x} ${end.y}`; } /** SVG path for an annular wedge between two radii and two values. */ export function describeWedge( outerRadius: number, innerRadius: number, fromValue: number, toValue: number, ): string { const outerStart = arcPoint(outerRadius, fromValue); const outerEnd = arcPoint(outerRadius, toValue); const innerEnd = arcPoint(innerRadius, toValue); const innerStart = arcPoint(innerRadius, fromValue); return ( `M ${outerStart.x} ${outerStart.y} A ${outerRadius} ${outerRadius} 0 0 1 ${outerEnd.x} ${outerEnd.y} ` + `L ${innerEnd.x} ${innerEnd.y} A ${innerRadius} ${innerRadius} 0 0 0 ${innerStart.x} ${innerStart.y} Z` ); } /** Band for a 0-100 value; out-of-range clamps to the nearest edge band. */ export function findFearGreedBand( value: number, bands: FearGreedBand[] = DEFAULT_FEAR_GREED_BANDS, ): FearGreedBand { const clamped = Math.min(Math.max(value, 0), 100); return bands.find((band) => clamped >= band.min && clamped <= band.max) ?? bands[bands.length - 1]; } /** Remap a 0-100 value onto a CNN-style dial where every band gets an equal * angular share; the needle, dots, and scale numbers all use this mapping. */ export function equalizedValue( value: number, bands: FearGreedBand[] = DEFAULT_FEAR_GREED_BANDS, ): number { const clamped = Math.min(Math.max(value, 0), 100); const band = findFearGreedBand(clamped, bands); const index = bands.indexOf(band); const share = 100 / bands.length; return index * share + ((clamped - band.min) / (band.max - band.min)) * share; } export interface GradientStop { value: number; color: string; } /** Evenly-spaced band colors used to interpolate the per-tick gradient. */ export const GRADIENT_STOPS: GradientStop[] = [ { value: 0, color: "#c0392b" }, { value: 25, color: "#e0672b" }, { value: 50, color: "#f0c929" }, { value: 75, color: "#4caf50" }, { value: 100, color: "#2e7d32" }, ]; function hexToRgb(hex: string): [number, number, number] { const clean = hex.replace("#", ""); const num = parseInt(clean, 16); return [(num >> 16) & 255, (num >> 8) & 255, num & 255]; } function rgbToHex(r: number, g: number, b: number): string { return `#${[r, g, b].map((c) => Math.round(c).toString(16).padStart(2, "0")).join("")}`; } /** Interpolated hex color for a 0-100 value between GRADIENT_STOPS. */ export function colorForValue(value: number, stops: GradientStop[] = GRADIENT_STOPS): string { const clamped = Math.min(Math.max(value, 0), 100); for (let i = 0; i < stops.length - 1; i++) { const from = stops[i]; const to = stops[i + 1]; if (clamped >= from.value && clamped <= to.value) { const t = (clamped - from.value) / (to.value - from.value); const [r1, g1, b1] = hexToRgb(from.color); const [r2, g2, b2] = hexToRgb(to.color); return rgbToHex(r1 + (r2 - r1) * t, g1 + (g2 - g1) * t, b1 + (b2 - b1) * t); } } return stops[stops.length - 1].color; } // Wedge geometry, shared with the skeleton so the ghost dial lines up. export const WEDGE_OUTER_RADIUS = 104; export const WEDGE_INNER_RADIUS = 64; export const WEDGE_GAP = 1.2; export const WEDGE_HUB_RADIUS = 40; // Fits the hub circle plus margin; also sizes the centered value overlay. export const WEDGES_VIEWBOX_HEIGHT = 180; 49:["$","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","@number-flow/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40number-flow%2Freact","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":"@number-flow/react"}]]}]}],["$","li","framer-motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/framer-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":"framer-motion"}]]}]}]]}],["$","$L4a",null,{"namespace":"@voraui","registryDependencies":["utils"]}]]}],null]}],["$","$L4b",null,{"files":[{"path":"registry/voraui/fear-greed-gauge/index.ts","content":"export { FearGreedGauge, type FearGreedGaugeProps } from \"./fear-greed-gauge\";\nexport { FearGreedGaugeSkeleton } from \"./components/skeleton\";\nexport type { FearGreedData } from \"./hooks/use-fear-greed\";\n","type":"registry:lib","target":"components/voraui/fear-greed-gauge/index.ts"},{"path":"registry/voraui/fear-greed-gauge/fear-greed-gauge.tsx","content":"$4c","type":"registry:component","target":"components/voraui/fear-greed-gauge/fear-greed-gauge.tsx"},{"path":"registry/voraui/fear-greed-gauge/components/skeleton.tsx","content":"$4d","type":"registry:component","target":"components/voraui/fear-greed-gauge/components/skeleton.tsx"},{"path":"registry/voraui/fear-greed-gauge/hooks/use-fear-greed.ts","content":"$4e","type":"registry:hook","target":"components/voraui/fear-greed-gauge/hooks/use-fear-greed.ts"},{"path":"registry/voraui/fear-greed-gauge/lib/fear-greed-bands.ts","content":"$4f","type":"registry:lib","target":"components/voraui/fear-greed-gauge/lib/fear-greed-bands.ts"}],"className":"h-[70svh] min-h-80"}]]}]