@gearbox-protocol/ui-kit 3.0.1 → 3.0.2

package/dist/cjs/components/graph/graph.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react/jsx-runtime"),se=require("lightweight-charts"),d=require("react"),Pe=require("../../hooks/use-media-query.cjs"),ce=require("../../utils/cn.cjs"),O=require("../../utils/colors.cjs"),K=require("./default-config.cjs"),Y=require("./formatters.cjs"),Te=require("./graph-current-value.cjs"),Fe=require("./graph-tooltip.cjs"),Me=require("./plugins/vertical-line.cjs");function Ee(e){const m=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const u in e)if(u!=="default"){const w=Object.getOwnPropertyDescriptor(e,u);Object.defineProperty(m,u,w.get?w:{enumerable:!0,get:()=>e[u]})}}return m.default=e,Object.freeze(m)}const ie=Ee(d);function Re(e,m,u){const w=e.labelText??"",b=e.value,y=b===void 0?"":typeof b=="number"?m==="$"?`$${Y.formatExactValue(b,void 0,u)}`:m==="%"?`${Y.formatExactValue(b,void 0,u)}%`:Y.formatExactValue(b,m!=="none"&&m!=="%"&&m!=="$"?m:void 0,u):String(b);return{labelText:w,valueStr:y}}const Q=[{line:"#02c39a",top:"rgba(2, 195, 154, 0.56)",bottom:"rgba(2, 195, 154, 0.04)"},{line:"#3b82f6",top:"rgba(59, 130, 246, 0.56)",bottom:"rgba(59, 130, 246, 0.04)"},{line:"#ef4444",top:"rgba(239, 68, 68, 0.56)",bottom:"rgba(239, 68, 68, 0.04)"},{line:"#f59e0b",top:"rgba(245, 158, 11, 0.56)",bottom:"rgba(245, 158, 11, 0.04)"},{line:"#8b5cf6",top:"rgba(139, 92, 246, 0.56)",bottom:"rgba(139, 92, 246, 0.04)"},{line:"#ec4899",top:"rgba(236, 72, 153, 0.56)",bottom:"rgba(236, 72, 153, 0.04)"},{line:"#06b6d4",top:"rgba(6, 182, 212, 0.56)",bottom:"rgba(6, 182, 212, 0.04)"},{line:"#ea580c",top:"rgba(234, 88, 12, 0.56)",bottom:"rgba(234, 88, 12, 0.04)"},{line:"#84cc16",top:"rgba(132, 204, 22, 0.56)",bottom:"rgba(132, 204, 22, 0.04)"},{line:"#d946ef",top:"rgba(217, 70, 239, 0.56)",bottom:"rgba(217, 70, 239, 0.04)"},{line:"#0ea5e9",top:"rgba(14, 165, 233, 0.56)",bottom:"rgba(14, 165, 233, 0.04)"},{line:"#14b8a6",top:"rgba(20, 184, 166, 0.56)",bottom:"rgba(20, 184, 166, 0.04)"},{line:"#eab308",top:"rgba(234, 179, 8, 0.56)",bottom:"rgba(234, 179, 8, 0.04)"},{line:"#f43f5e",top:"rgba(244, 63, 94, 0.56)",bottom:"rgba(244, 63, 94, 0.04)"},{line:"#6366f1",top:"rgba(99, 102, 241, 0.56)",bottom:"rgba(99, 102, 241, 0.04)"},{line:"#10b981",top:"rgba(16, 185, 129, 0.56)",bottom:"rgba(16, 185, 129, 0.04)"},{line:"#78716c",top:"rgba(120, 113, 108, 0.56)",bottom:"rgba(120, 113, 108, 0.04)"},{line:"#64748b",top:"rgba(100, 116, 139, 0.56)",bottom:"rgba(100, 116, 139, 0.04)"},{line:"#475569",top:"rgba(71, 85, 105, 0.56)",bottom:"rgba(71, 85, 105, 0.04)"}],_e=137.5;function ue(e){if(e<Q.length)return Q[e];const u=(e-Q.length)*_e%360,w=O.hslToHex(u,70,50),{topColor:b,bottomColor:y}=O.generateColorsFromBase(w);return{line:w,top:b,bottom:y}}function Ae({series:e,className:m,showLegend:u=!1,onUnselectSeries:w,xMeasureUnit:b="time",yMeasureUnit:y="token",optionsOverrides:H,verticalLineOptions:x,currentValueDecimals:J,useSharedPriceScale:j=!1,showCurrentValue:we=!0,graphTitle:U,yScaleMin:fe,yScaleMinMultiple:ge}){const L=d.useRef(null),V=d.useRef(new Map),ee=d.useRef(!1),de=d.useRef(!0),te=d.useRef(null),ye=d.useRef(null),A=d.useRef(null),oe=d.useRef(null),N=Pe.useIsMobile(),M=ie.useMemo(()=>e.flatMap(t=>t.data),[e]),Ve=ie.useMemo(()=>{if(e.length>0){const t=e[e.length-1];if(t.data.length>0)return t.data[t.data.length-1]}},[e]),[be,re]=d.useState(()=>{if(!Ve)return;const t=new Map;for(const a of e)a.data.length>0&&t.set(a.label,a.data[a.data.length-1]);return t}),[me,E]=d.useState(null),[he,pe]=d.useState([]);d.useEffect(()=>{const t=()=>{if(L.current&&A.current){const l=A.current.clientWidth,i=A.current.clientHeight;L.current.resize(l,i)}},a=A.current,r=a?new ResizeObserver(t):null;return a&&r?.observe(a),()=>{a&&r?.unobserve(a)}},[]),d.useEffect(()=>{if(!oe.current||ee.current)return;const t=K.getDefaultOptions(),a=O.resolveCSSColor("hsl(var(--foreground))","rgb(0, 0, 0)"),r=se.createChart(oe.current,{...t,rightPriceScale:{...t.rightPriceScale||{},visible:!N,textColor:a},...N&&{crosshair:{...t.crosshair,mode:se.CrosshairMode.Magnet}},...H});return L.current=r,ee.current=!0,()=>{r.remove(),L.current=null,ee.current=!1,V.current.clear()}},[N,H]),d.useEffect(()=>{const t=L.current;if(!t||e.length===0)return;const r=e.filter(o=>o.data.length>0).length<=1?fe:ge,l=b==="time"?Y.getXFormatters(b,M):Y.getXFormatters(b),i=M.map(o=>o.value),{formatter:c,tickmarksFormatter:g,updateVisibleRange:P,updateLastValues:h}=Y.createAdaptiveYAxisFormatter(i,y,{yScaleMin:r});te.current=P,ye.current=h;const T=e.filter(o=>o.data.length>0).map(o=>o.data[o.data.length-1].value);h(T);const F=K.getDefaultOptions();t.applyOptions({localization:{...F.localization||{},timeFormatter:o=>l.timeFormatter(parseFloat(o),void 0)},timeScale:{...F.timeScale||{},tickMarkFormatter:l.tickMarkFormatter,minBarSpacing:0}});const p=(M.length>0?Math.min(...M.map(o=>o.value)):0)<0,S=M.some(o=>o.value===0),C=!p&&S,v=e.length>1&&!j,R=e.length>1&&!j||N,_=O.resolveCSSColor("hsl(var(--foreground))","rgb(0, 0, 0)");t.applyOptions({rightPriceScale:{...F.rightPriceScale||{},visible:!R,textColor:_,...C&&{scaleMargins:{top:.3,bottom:0}}}});const I=new Set(V.current.keys()),D=new Set(e.map(o=>o.label));for(const o of I)if(!D.has(o)){const n=V.current.get(o);n&&(t.removeSeries(n),V.current.delete(o))}const q=K.getDefaultSeries(),ne=[];let Z=0;for(let o=0;o<e.length;o++){const n=e[o],W=ue(o),z=n.lineColor??n.color??W.line;let $,B;if(n.lineColor??n.color)if(n.topColor&&n.bottomColor)$=n.topColor,B=n.bottomColor;else if(n.topColor){const s=O.generateColorsFromBase(z);$=n.topColor,B=s.bottomColor}else if(n.bottomColor)$=O.generateColorsFromBase(z).topColor,B=n.bottomColor;else{const s=O.generateColorsFromBase(z);$=s.topColor,B=s.bottomColor}else $=n.topColor||W.top,B=n.bottomColor||W.bottom;if(n.data.length===0){const s=V.current.get(n.label);s&&(t.removeSeries(s),V.current.delete(n.label));continue}const ke=(n.data.length>0?Math.min(...n.data.map(s=>s.value)):0)<0,Ne=n.data.some(s=>s.value===0),je=!ke&&Ne,ve=j||!v||Z===0?"right":`scale-${Z}`;v&&ne.push({priceScaleId:ve||"right",shouldPreventNegativeAxis:je,seriesIndex:Z});const xe=(j||!v)&&r!==void 0&&typeof r=="number",Se={lineColor:z,topColor:$,bottomColor:B,priceScaleId:ve,priceFormat:{type:"custom",minMove:.01,formatter:xe&&typeof r=="number"?s=>c(s<r?r:s):c,tickmarksFormatter:g},autoscaleInfoProvider:s=>{if(!xe)return s();const le=s();if(le?.priceRange){const Le=r;le.priceRange.minValue=Le}return le}};let G=V.current.get(n.label);G?(G.applyOptions(Se),G.setData(n.data.map(s=>({...s,time:s.time})))):(G=t.addSeries(se.AreaSeries,{...q,...Se}),G.setData(n.data.map(s=>({...s,time:s.time}))),V.current.set(n.label,G)),Z++}if(v&&ne.length>0)for(const o of ne)try{const n=t.priceScale(o.priceScaleId);n&&n.applyOptions({visible:!1,autoScale:!0,scaleMargins:{top:.1,bottom:.1,...o.shouldPreventNegativeAxis&&{top:.3,bottom:0}},alignLabels:!0,borderVisible:!0,borderColor:"rgba(224, 227, 235, 0.1)",entireTextOnly:!1,textColor:_})}catch(n){console.warn(`Failed to configure price scale ${o.priceScaleId} for series ${o.seriesIndex}:`,n)}else if(!v)try{const o=t.priceScale("right");o&&o.applyOptions({visible:!N,autoScale:!0,scaleMargins:{top:.1,bottom:r!==void 0||C?0:.1,...C&&{top:.3}},alignLabels:!0,borderVisible:!0,borderColor:"rgba(224, 227, 235, 0.1)",entireTextOnly:!1,textColor:_})}catch{}if(r!==void 0&&!N&&(j||!v)&&t.applyOptions({handleScroll:{vertTouchDrag:!1}}),M.length>0){const o=M.map(z=>Number(z.time)),n=Math.min(...o),W=Math.max(...o);t.timeScale().setVisibleRange({from:n,to:W})}de.current&&(de.current=!1);const ae=new Map;for(const o of e)o.data.length>0&&ae.set(o.label,o.data[o.data.length-1]);re(ae.size>0?ae:void 0)},[e,M,b,y,N,j,fe,ge]),d.useEffect(()=>{const t=L.current;if(!t||e.length===0)return;const a=e.length===1;let r;for(const i of e)if(i.data.length>0){r=i.data[i.data.length-1].time;break}if(!r)return;const l=i=>{const{time:c=r,seriesData:g,point:P}=i||{},h=Array.from(V.current.values());if(!P||!c){const k=new Map;for(const p of e)p.data.length>0&&k.set(p.label,p.data[p.data.length-1]);if(re(k.size>0?k:void 0),a||j)E(null);else if(h[0]&&r){const S=t.timeScale().timeToCoordinate(r),C=e[0];if(C.data.length>0){const v=C.data[C.data.length-1].value,R=h[0].priceToCoordinate(v);S!==null&&R!==null&&E({x:S,y:R})}}return}const T=new Map;let F;for(let k=0;k<e.length;k++){const p=e[k],S=h[k];if(!S)continue;const C=g?.get(S),v=C&&"value"in C?C.value:void 0;let R;if(v!==void 0)R=v;else{const _=Number(c),I=p.data;let D=0;for(let q=I.length-1;q>=0;q--)if(Number(I[q].time)<=_){D=I[q].value;break}R=D}k===0&&(F=R),T.set(p.label,{value:R,time:c})}if(re(T),F!==void 0&&h[0]){const p=t.timeScale().timeToCoordinate(c),S=h[0].priceToCoordinate(F);if(p!==null&&S!==null){const C=A.current;if(C){const v=C.querySelector(".LightweightChart");if(v){const R=v.getBoundingClientRect(),_=C.getBoundingClientRect(),I=p+(R.left-_.left),D=S+(R.top-_.top);E({x:I,y:D})}else E({x:p,y:S})}else E({x:p,y:S})}else E(null)}else E(null)};return t.subscribeCrosshairMove(l),N&&t.subscribeClick(l),!a&&!j&&requestAnimationFrame(()=>{const i=Array.from(V.current.values());if(i[0]&&r&&e[0]?.data.length>0){const g=t.timeScale().timeToCoordinate(r),P=e[0].data[e[0].data.length-1].value,h=i[0].priceToCoordinate(P);g!==null&&h!==null&&E({x:g,y:h})}}),()=>{t.unsubscribeCrosshairMove(l),N&&t.unsubscribeClick(l)}},[e,j,N]),d.useEffect(()=>{const t=L.current;if(!t||e.length===0)return;const a=t.timeScale(),r=()=>{if(!te.current)return;const l=a.getVisibleRange();if(!l)return;const i=Number(l.from),c=Number(l.to),g=[];for(const P of e)for(const h of P.data){const T=Number(h.time);T>=i&&T<=c&&g.push(h.value)}g.length>0&&te.current(g)};return a.subscribeVisibleLogicalRangeChange(r),()=>{a.unsubscribeVisibleLogicalRangeChange(r)}},[e]),d.useEffect(()=>{const t=L.current,a=Array.from(V.current.values()),r=[];if(t&&a.length>0&&x){const l=K.getDefaultVerticalLine(),i=a[0];for(const c of x){const g=new Me.VertLine(t,i,c.xCoordinate,{...l,...c.options||{}});i.attachPrimitive(g),r.push(g)}}return()=>{if(a.length>0){const l=a[0];for(const i of r)l.detachPrimitive(i)}}},[x]),d.useEffect(()=>{const t=L.current;if(!t||!x?.length){pe([]);return}const a=()=>{const i=t.timeScale(),c=x.map(g=>i.timeToCoordinate(g.xCoordinate)??null);pe(c)};a();const r=t.timeScale(),l=()=>{a()};return r.subscribeVisibleLogicalRangeChange(l),()=>{r.unsubscribeVisibleLogicalRangeChange(l)}},[x]);const X=e.length===1,Ce=ie.useMemo(()=>{if(X&&e.length>0){const t=e[0];if(t.data.length>0)return t.data[t.data.length-1]}},[X,e]);return f.jsxs("div",{ref:A,className:ce.cn("relative z-[1] w-full h-full overflow-hidden p-0",m),children:[U!=null&&U!==!1&&X?f.jsx("div",{className:"absolute top-2 left-2 right-2 z-[100] pointer-events-none",children:f.jsx("div",{className:"text-xl sm:text-2xl font-semibold text-foreground whitespace-nowrap overflow-hidden text-ellipsis",children:U})}):we&&X&&Ce&&f.jsx(Te.GraphCurrentValue,{point:Ce,xMeasureUnit:b,yMeasureUnit:y,decimals:J}),be&&me&&f.jsx(Fe.GraphTooltip,{points:be,xMeasureUnit:b,yMeasureUnit:y,series:e,position:me,containerRef:A,decimals:J}),u&&f.jsx(Ie,{series:e,onUnselect:w}),x&&x.length>0&&he.length===x.length&&f.jsx("div",{className:"absolute inset-0 z-[5] pointer-events-none","aria-hidden":!0,children:x.map((t,a)=>{const r=he[a],l=t.options??{},i=l.showLabel!==!1;if(r===null||!i)return null;const{labelText:c,valueStr:g}=Re(l,y,J);if(!(c||g))return null;const h=l.labelBackgroundColor??l.color??"hsl(var(--background))",T=l.labelTextColor??"hsl(var(--foreground))",F=`${String(t.xCoordinate)}-${c}`;return f.jsxs("div",{className:"absolute top-2 px-2 py-1 rounded text-xs font-medium whitespace-nowrap shadow-sm border border-border",style:{left:r,transform:"translateX(-50%)",backgroundColor:h,color:T},children:[c&&f.jsx("span",{className:"block",children:c}),g&&f.jsx("span",{className:ce.cn("block",c&&"mt-0.5"),children:g})]},F)})}),f.jsx("div",{ref:oe,className:"LightweightChart w-full h-full overflow-hidden"})]})}function Ie({series:e,onUnselect:m}){return f.jsx("div",{className:"absolute top-0 left-2 z-[10] flex flex-wrap gap-2",children:e.map((u,w)=>{const b=ue(w),y=(u.lineColor??u.color)||b.line,H=u.data.length===0;return f.jsxs("div",{className:ce.cn("flex items-center gap-1.5 px-2 py-1 bg-background/80 backdrop-blur-sm rounded border border-border",H&&"opacity-50"),children:[f.jsx("div",{className:"w-3 h-3 rounded-sm",style:{backgroundColor:y}}),f.jsxs("span",{className:"text-[10px] sm:text-xs font-medium text-foreground",children:[u.label,H&&" (no data)"]}),m&&f.jsx("button",{type:"button",onClick:x=>{x.stopPropagation(),m(u.label)},className:"ml-1 flex items-center justify-center w-4 h-4 rounded-sm hover:bg-muted transition-colors cursor-pointer","aria-label":`Remove ${u.label}`,children:f.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"text-muted-foreground hover:text-foreground","aria-hidden":"true",children:[f.jsx("title",{children:"Close"}),f.jsx("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),f.jsx("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]})})]},u.label)})})}exports.DEFAULT_SERIES_COLORS=Q;exports.Graph=Ae;exports.getSeriesColorPalette=ue;exports.getVerticalLineTooltipContent=Re;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react/jsx-runtime"),le=require("lightweight-charts"),d=require("react"),Pe=require("../../hooks/use-media-query.cjs"),ie=require("../../utils/cn.cjs"),A=require("../../utils/colors.cjs"),W=require("./default-config.cjs"),$=require("./formatters.cjs"),Te=require("./graph-current-value.cjs"),Me=require("./graph-tooltip.cjs"),Ee=require("./plugins/vertical-line.cjs");function _e(e){const b=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const s in e)if(s!=="default"){const w=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(b,s,w.get?w:{enumerable:!0,get:()=>e[s]})}}return b.default=e,Object.freeze(b)}const se=_e(d);function Se(e,b,s){const w=e.labelText??"",m=e.value,V=m===void 0?"":typeof m=="number"?b==="$"?`$${$.formatExactValue(m,void 0,s)}`:b==="%"?`${$.formatExactValue(m,void 0,s)}%`:$.formatExactValue(m,b!=="none"&&b!=="%"&&b!=="$"?b:void 0,s):String(m);return{labelText:w,valueStr:V}}function Re(e,b){for(let s=e.length-1;s>=0;s--)if(Number(e[s].time)<=b)return e[s].value;return 0}const X=[{line:"#02c39a",top:"rgba(2, 195, 154, 0.56)",bottom:"rgba(2, 195, 154, 0.04)"},{line:"#3b82f6",top:"rgba(59, 130, 246, 0.56)",bottom:"rgba(59, 130, 246, 0.04)"},{line:"#ef4444",top:"rgba(239, 68, 68, 0.56)",bottom:"rgba(239, 68, 68, 0.04)"},{line:"#f59e0b",top:"rgba(245, 158, 11, 0.56)",bottom:"rgba(245, 158, 11, 0.04)"},{line:"#8b5cf6",top:"rgba(139, 92, 246, 0.56)",bottom:"rgba(139, 92, 246, 0.04)"},{line:"#ec4899",top:"rgba(236, 72, 153, 0.56)",bottom:"rgba(236, 72, 153, 0.04)"},{line:"#06b6d4",top:"rgba(6, 182, 212, 0.56)",bottom:"rgba(6, 182, 212, 0.04)"},{line:"#ea580c",top:"rgba(234, 88, 12, 0.56)",bottom:"rgba(234, 88, 12, 0.04)"},{line:"#84cc16",top:"rgba(132, 204, 22, 0.56)",bottom:"rgba(132, 204, 22, 0.04)"},{line:"#d946ef",top:"rgba(217, 70, 239, 0.56)",bottom:"rgba(217, 70, 239, 0.04)"},{line:"#0ea5e9",top:"rgba(14, 165, 233, 0.56)",bottom:"rgba(14, 165, 233, 0.04)"},{line:"#14b8a6",top:"rgba(20, 184, 166, 0.56)",bottom:"rgba(20, 184, 166, 0.04)"},{line:"#eab308",top:"rgba(234, 179, 8, 0.56)",bottom:"rgba(234, 179, 8, 0.04)"},{line:"#f43f5e",top:"rgba(244, 63, 94, 0.56)",bottom:"rgba(244, 63, 94, 0.04)"},{line:"#6366f1",top:"rgba(99, 102, 241, 0.56)",bottom:"rgba(99, 102, 241, 0.04)"},{line:"#10b981",top:"rgba(16, 185, 129, 0.56)",bottom:"rgba(16, 185, 129, 0.04)"},{line:"#78716c",top:"rgba(120, 113, 108, 0.56)",bottom:"rgba(120, 113, 108, 0.04)"},{line:"#64748b",top:"rgba(100, 116, 139, 0.56)",bottom:"rgba(100, 116, 139, 0.04)"},{line:"#475569",top:"rgba(71, 85, 105, 0.56)",bottom:"rgba(71, 85, 105, 0.04)"}],Ae=137.5;function ce(e){if(e<X.length)return X[e];const s=(e-X.length)*Ae%360,w=A.hslToHex(s,70,50),{topColor:m,bottomColor:V}=A.generateColorsFromBase(w);return{line:w,top:m,bottom:V}}function Ie({series:e,className:b,showLegend:s=!1,onUnselectSeries:w,xMeasureUnit:m="time",yMeasureUnit:V="token",optionsOverrides:B,verticalLineOptions:S,currentValueDecimals:Z,useSharedPriceScale:j=!1,showCurrentValue:we=!0,graphTitle:K,yScaleMin:ue,yScaleMinMultiple:fe}){const F=d.useRef(null),y=d.useRef(new Map),Q=d.useRef(!1),ge=d.useRef(!0),J=d.useRef(null),Ve=d.useRef(null),_=d.useRef(null),U=d.useRef(null),N=Pe.useIsMobile(),M=se.useMemo(()=>e.flatMap(t=>t.data),[e]),ye=se.useMemo(()=>{if(e.length>0){const t=e[e.length-1];if(t.data.length>0)return t.data[t.data.length-1]}},[e]),[de,ee]=d.useState(()=>{if(!ye)return;const t=new Map;for(const a of e)a.data.length>0&&t.set(a.label,a.data[a.data.length-1]);return t}),[be,E]=d.useState(null),[me,he]=d.useState([]);d.useEffect(()=>{const t=()=>{if(F.current&&_.current){const l=_.current.clientWidth,c=_.current.clientHeight;F.current.resize(l,c)}},a=_.current,r=a?new ResizeObserver(t):null;return a&&r?.observe(a),()=>{a&&r?.unobserve(a)}},[]),d.useEffect(()=>{if(!U.current||Q.current)return;const t=W.getDefaultOptions(),a=A.resolveCSSColor("hsl(var(--foreground))","rgb(0, 0, 0)"),r=le.createChart(U.current,{...t,rightPriceScale:{...t.rightPriceScale||{},visible:!N,textColor:a},...N&&{crosshair:{...t.crosshair,mode:le.CrosshairMode.Magnet}},...B});return F.current=r,Q.current=!0,()=>{r.remove(),F.current=null,Q.current=!1,y.current.clear()}},[N,B]),d.useEffect(()=>{const t=F.current;if(!t||e.length===0)return;const r=e.filter(o=>o.data.length>0).length<=1?ue:fe,l=m==="time"?$.getXFormatters(m,M):$.getXFormatters(m),c=M.map(o=>o.value),{formatter:u,tickmarksFormatter:g,updateVisibleRange:L,updateLastValues:p}=$.createAdaptiveYAxisFormatter(c,V,{yScaleMin:r});J.current=L,Ve.current=p;const P=e.filter(o=>o.data.length>0).map(o=>o.data[o.data.length-1].value);p(P);const T=W.getDefaultOptions();t.applyOptions({localization:{...T.localization||{},timeFormatter:o=>l.timeFormatter(parseFloat(o),void 0)},timeScale:{...T.timeScale||{},tickMarkFormatter:l.tickMarkFormatter,minBarSpacing:0}});const h=(M.length>0?Math.min(...M.map(o=>o.value)):0)<0,R=M.some(o=>o.value===0),C=!h&&R,v=e.length>1&&!j,x=e.length>1&&!j||N,I=A.resolveCSSColor("hsl(var(--foreground))","rgb(0, 0, 0)");t.applyOptions({rightPriceScale:{...T.rightPriceScale||{},visible:!x,textColor:I,...C&&{scaleMargins:{top:.3,bottom:0}}}});const te=new Set(y.current.keys()),oe=new Set(e.map(o=>o.label));for(const o of te)if(!oe.has(o)){const n=y.current.get(o);n&&(t.removeSeries(n),y.current.delete(o))}const ke=W.getDefaultSeries(),re=[];let H=0;for(let o=0;o<e.length;o++){const n=e[o],G=ce(o),O=n.lineColor??n.color??G.line;let D,q;if(n.lineColor??n.color)if(n.topColor&&n.bottomColor)D=n.topColor,q=n.bottomColor;else if(n.topColor){const i=A.generateColorsFromBase(O);D=n.topColor,q=i.bottomColor}else if(n.bottomColor)D=A.generateColorsFromBase(O).topColor,q=n.bottomColor;else{const i=A.generateColorsFromBase(O);D=i.topColor,q=i.bottomColor}else D=n.topColor||G.top,q=n.bottomColor||G.bottom;if(n.data.length===0){const i=y.current.get(n.label);i&&(t.removeSeries(i),y.current.delete(n.label));continue}const Ne=(n.data.length>0?Math.min(...n.data.map(i=>i.value)):0)<0,je=n.data.some(i=>i.value===0),Fe=!Ne&&je,Ce=j||!v||H===0?"right":`scale-${H}`;v&&re.push({priceScaleId:Ce||"right",shouldPreventNegativeAxis:Fe,seriesIndex:H});const ve=(j||!v)&&r!==void 0&&typeof r=="number",xe={lineColor:O,topColor:D,bottomColor:q,priceScaleId:Ce,priceFormat:{type:"custom",minMove:.01,formatter:ve&&typeof r=="number"?i=>u(i<r?r:i):u,tickmarksFormatter:g},autoscaleInfoProvider:i=>{if(!ve)return i();const ae=i();if(ae?.priceRange){const Le=r;ae.priceRange.minValue=Le}return ae}};let z=y.current.get(n.label);z?(z.applyOptions(xe),z.setData(n.data.map(i=>({...i,time:i.time})))):(z=t.addSeries(le.AreaSeries,{...ke,...xe}),z.setData(n.data.map(i=>({...i,time:i.time}))),y.current.set(n.label,z)),H++}if(v&&re.length>0)for(const o of re)try{const n=t.priceScale(o.priceScaleId);n&&n.applyOptions({visible:!1,autoScale:!0,scaleMargins:{top:.1,bottom:.1,...o.shouldPreventNegativeAxis&&{top:.3,bottom:0}},alignLabels:!0,borderVisible:!0,borderColor:"rgba(224, 227, 235, 0.1)",entireTextOnly:!1,textColor:I})}catch(n){console.warn(`Failed to configure price scale ${o.priceScaleId} for series ${o.seriesIndex}:`,n)}else if(!v)try{const o=t.priceScale("right");o&&o.applyOptions({visible:!N,autoScale:!0,scaleMargins:{top:.1,bottom:r!==void 0||C?0:.1,...C&&{top:.3}},alignLabels:!0,borderVisible:!0,borderColor:"rgba(224, 227, 235, 0.1)",entireTextOnly:!1,textColor:I})}catch{}if(r!==void 0&&!N&&(j||!v)&&t.applyOptions({handleScroll:{vertTouchDrag:!1}}),M.length>0){const o=M.map(O=>Number(O.time)),n=Math.min(...o),G=Math.max(...o);t.timeScale().setVisibleRange({from:n,to:G})}ge.current&&(ge.current=!1);const ne=new Map;for(const o of e)o.data.length>0&&ne.set(o.label,o.data[o.data.length-1]);ee(ne.size>0?ne:void 0)},[e,M,m,V,N,j,ue,fe]),d.useEffect(()=>{const t=F.current;if(!t||e.length===0)return;const a=e.length===1;let r;for(const c of e)if(c.data.length>0){r=c.data[c.data.length-1].time;break}if(!r)return;const l=c=>{const{time:u=r,seriesData:g,point:L}=c||{},p=Array.from(y.current.values());if(!L||!u){const k=new Map;for(const h of e)h.data.length>0&&k.set(h.label,h.data[h.data.length-1]);if(ee(k.size>0?k:void 0),a||j)E(null);else if(p[0]&&r){const R=t.timeScale().timeToCoordinate(r),C=e[0];if(C.data.length>0){const v=C.data[C.data.length-1].value,x=p[0].priceToCoordinate(v);R!==null&&x!==null&&E({x:R,y:x})}}return}const P=new Map;let T;for(let k=0;k<e.length;k++){const h=e[k],R=p[k];if(!R)continue;const C=g?.get(R),v=C&&"value"in C?C.value:void 0;let x;v!==void 0?x=v:a?x=h.data[h.data.length-1]?.value??0:x=Re(h.data,Number(u)),k===0&&(T=x),P.set(h.label,{value:x,time:u})}if(ee(P),T!==void 0&&p[0]){const h=t.timeScale().timeToCoordinate(u),R=p[0].priceToCoordinate(T);if(h!==null&&R!==null){const C=_.current;if(C){const v=C.querySelector(".LightweightChart");if(v){const x=v.getBoundingClientRect(),I=C.getBoundingClientRect(),te=h+(x.left-I.left),oe=R+(x.top-I.top);E({x:te,y:oe})}else E({x:h,y:R})}else E({x:h,y:R})}else E(null)}else E(null)};return t.subscribeCrosshairMove(l),N&&t.subscribeClick(l),!a&&!j&&requestAnimationFrame(()=>{const c=Array.from(y.current.values());if(c[0]&&r&&e[0]?.data.length>0){const g=t.timeScale().timeToCoordinate(r),L=e[0].data[e[0].data.length-1].value,p=c[0].priceToCoordinate(L);g!==null&&p!==null&&E({x:g,y:p})}}),()=>{t.unsubscribeCrosshairMove(l),N&&t.unsubscribeClick(l)}},[e,j,N]),d.useEffect(()=>{const t=F.current;if(!t||e.length===0)return;const a=t.timeScale(),r=()=>{if(!J.current)return;const l=a.getVisibleRange();if(!l)return;const c=Number(l.from),u=Number(l.to),g=[];for(const L of e)for(const p of L.data){const P=Number(p.time);P>=c&&P<=u&&g.push(p.value)}g.length>0&&J.current(g)};return a.subscribeVisibleLogicalRangeChange(r),()=>{a.unsubscribeVisibleLogicalRangeChange(r)}},[e]),d.useEffect(()=>{const t=F.current,a=Array.from(y.current.values()),r=[];if(t&&a.length>0&&S){const l=W.getDefaultVerticalLine(),c=a[0];for(const u of S){const g=new Ee.VertLine(t,c,u.xCoordinate,{...l,...u.options||{}});c.attachPrimitive(g),r.push(g)}}return()=>{if(a.length>0){const l=a[0];for(const c of r)l.detachPrimitive(c)}}},[S]),d.useEffect(()=>{const t=F.current;if(!t||!S?.length){he([]);return}const a=()=>{const c=t.timeScale(),u=S.map(g=>c.timeToCoordinate(g.xCoordinate)??null);he(u)};a();const r=t.timeScale(),l=()=>{a()};return r.subscribeVisibleLogicalRangeChange(l),()=>{r.unsubscribeVisibleLogicalRangeChange(l)}},[S]);const Y=e.length===1,pe=se.useMemo(()=>{if(Y&&e.length>0){const t=e[0];if(t.data.length>0)return t.data[t.data.length-1]}},[Y,e]);return f.jsxs("div",{ref:_,className:ie.cn("relative z-[1] w-full h-full overflow-hidden p-0",b),children:[K!=null&&K!==!1&&Y?f.jsx("div",{className:"absolute top-2 left-2 right-2 z-[100] pointer-events-none",children:f.jsx("div",{className:"text-xl sm:text-2xl font-semibold text-foreground whitespace-nowrap overflow-hidden text-ellipsis",children:K})}):we&&Y&&pe&&f.jsx(Te.GraphCurrentValue,{point:pe,xMeasureUnit:m,yMeasureUnit:V,decimals:Z}),de&&be&&f.jsx(Me.GraphTooltip,{points:de,xMeasureUnit:m,yMeasureUnit:V,series:e,position:be,containerRef:_,decimals:Z}),s&&f.jsx(Oe,{series:e,onUnselect:w}),S&&S.length>0&&me.length===S.length&&f.jsx("div",{className:"absolute inset-0 z-[5] pointer-events-none","aria-hidden":!0,children:S.map((t,a)=>{const r=me[a],l=t.options??{},c=l.showLabel!==!1;if(r===null||!c)return null;const{labelText:u,valueStr:g}=Se(l,V,Z);if(!(u||g))return null;const p=l.labelBackgroundColor??l.color??"hsl(var(--background))",P=l.labelTextColor??"hsl(var(--foreground))",T=`${String(t.xCoordinate)}-${u}`;return f.jsxs("div",{className:"absolute top-2 px-2 py-1 rounded text-xs font-medium whitespace-nowrap shadow-sm border border-border",style:{left:r,transform:"translateX(-50%)",backgroundColor:p,color:P},children:[u&&f.jsx("span",{className:"block",children:u}),g&&f.jsx("span",{className:ie.cn("block",u&&"mt-0.5"),children:g})]},T)})}),f.jsx("div",{ref:U,className:"LightweightChart w-full h-full overflow-hidden"})]})}function Oe({series:e,onUnselect:b}){return f.jsx("div",{className:"absolute top-0 left-2 z-[10] flex flex-wrap gap-2",children:e.map((s,w)=>{const m=ce(w),V=(s.lineColor??s.color)||m.line,B=s.data.length===0;return f.jsxs("div",{className:ie.cn("flex items-center gap-1.5 px-2 py-1 bg-background/80 backdrop-blur-sm rounded border border-border",B&&"opacity-50"),children:[f.jsx("div",{className:"w-3 h-3 rounded-sm",style:{backgroundColor:V}}),f.jsxs("span",{className:"text-[10px] sm:text-xs font-medium text-foreground",children:[s.label,B&&" (no data)"]}),b&&f.jsx("button",{type:"button",onClick:S=>{S.stopPropagation(),b(s.label)},className:"ml-1 flex items-center justify-center w-4 h-4 rounded-sm hover:bg-muted transition-colors cursor-pointer","aria-label":`Remove ${s.label}`,children:f.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"text-muted-foreground hover:text-foreground","aria-hidden":"true",children:[f.jsx("title",{children:"Close"}),f.jsx("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),f.jsx("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]})})]},s.label)})})}exports.DEFAULT_SERIES_COLORS=X;exports.Graph=Ie;exports.getSeriesColorPalette=ce;exports.getStepForwardValue=Re;exports.getVerticalLineTooltipContent=Se;

package/dist/esm/components/graph/graph.js

@@ -1,24 +1,30 @@
-import { jsxs as X, jsx as h } from "react/jsx-runtime";
+import { jsxs as H, jsx as h } from "react/jsx-runtime";
 import { createChart as At, CrosshairMode as It, AreaSeries as zt } from "lightweight-charts";
-import * as lt from "react";
-import { useRef as z, useState as it, useEffect as E } from "react";
+import * as at from "react";
+import { useRef as I, useState as lt, useEffect as $ } from "react";
 import { useIsMobile as $t } from "../../hooks/use-media-query.js";
-import { cn as ut } from "../../utils/cn.js";
-import { resolveCSSColor as wt, generateColorsFromBase as K, hslToHex as Dt } from "../../utils/colors.js";
-import { getDefaultOptions as Rt, getDefaultSeries as Et, getDefaultVerticalLine as Gt } from "./default-config.js";
-import { getXFormatters as Vt, createAdaptiveYAxisFormatter as Bt, formatExactValue as st } from "./formatters.js";
+import { cn as ct } from "../../utils/cn.js";
+import { resolveCSSColor as St, generateColorsFromBase as X, hslToHex as Dt } from "../../utils/colors.js";
+import { getDefaultOptions as wt, getDefaultSeries as Et, getDefaultVerticalLine as Gt } from "./default-config.js";
+import { getXFormatters as Rt, createAdaptiveYAxisFormatter as Bt, formatExactValue as it } from "./formatters.js";
 import { GraphCurrentValue as Ot } from "./graph-current-value.js";
 import { GraphTooltip as Yt } from "./graph-tooltip.js";
 import { VertLine as jt } from "./plugins/vertical-line.js";
-function Ht(e, v, m) {
-  const F = e.labelText ?? "", f = e.value, w = f === void 0 ? "" : typeof f == "number" ? v === "$" ? `$${st(f, void 0, m)}` : v === "%" ? `${st(f, void 0, m)}%` : st(
-    f,
-    v !== "none" && v !== "%" && v !== "$" ? v : void 0,
-    m
-  ) : String(f);
-  return { labelText: F, valueStr: w };
+function Ht(e, p, u) {
+  const T = e.labelText ?? "", g = e.value, w = g === void 0 ? "" : typeof g == "number" ? p === "$" ? `$${it(g, void 0, u)}` : p === "%" ? `${it(g, void 0, u)}%` : it(
+    g,
+    p !== "none" && p !== "%" && p !== "$" ? p : void 0,
+    u
+  ) : String(g);
+  return { labelText: T, valueStr: w };
 }
-const ct = [
+function Wt(e, p) {
+  for (let u = e.length - 1; u >= 0; u--)
+    if (Number(e[u].time) <= p)
+      return e[u].value;
+  return 0;
+}
+const st = [
   // 0  green (emerald)
   {
     line: "#02c39a",
@@ -133,60 +139,60 @@ const ct = [
     top: "rgba(71, 85, 105, 0.56)",
     bottom: "rgba(71, 85, 105, 0.04)"
   }
-], Wt = 137.5;
-function yt(e) {
-  if (e < ct.length)
-    return ct[e];
-  const m = (e - ct.length) * Wt % 360, F = Dt(m, 70, 50), { topColor: f, bottomColor: w } = K(F);
-  return { line: F, top: f, bottom: w };
+], _t = 137.5;
+function Vt(e) {
+  if (e < st.length)
+    return st[e];
+  const u = (e - st.length) * _t % 360, T = Dt(u, 70, 50), { topColor: g, bottomColor: w } = X(T);
+  return { line: T, top: g, bottom: w };
 }
-function ie({
+function se({
   series: e,
-  className: v,
-  showLegend: m = !1,
-  onUnselectSeries: F,
-  xMeasureUnit: f = "time",
+  className: p,
+  showLegend: u = !1,
+  onUnselectSeries: T,
+  xMeasureUnit: g = "time",
   yMeasureUnit: w = "token",
-  optionsOverrides: W,
-  verticalLineOptions: C,
-  currentValueDecimals: J,
-  useSharedPriceScale: k = !1,
-  showCurrentValue: kt = !0,
-  graphTitle: Q,
-  yScaleMin: ft,
-  yScaleMinMultiple: gt
+  optionsOverrides: Y,
+  verticalLineOptions: x,
+  currentValueDecimals: q,
+  useSharedPriceScale: N = !1,
+  showCurrentValue: yt = !0,
+  graphTitle: Z,
+  yScaleMin: ut,
+  yScaleMinMultiple: ft
 }) {
-  const N = z(null), R = z(/* @__PURE__ */ new Map()), U = z(!1), mt = z(!0), tt = z(
+  const k = I(null), R = I(/* @__PURE__ */ new Map()), K = I(!1), gt = I(!0), J = I(
     null
-  ), Nt = z(null), $ = z(null), et = z(null), y = $t(), M = lt.useMemo(() => e.flatMap((t) => t.data), [e]), Lt = lt.useMemo(() => {
+  ), Nt = I(null), z = I(null), Q = I(null), y = $t(), M = at.useMemo(() => e.flatMap((t) => t.data), [e]), kt = at.useMemo(() => {
     if (e.length > 0) {
       const t = e[e.length - 1];
       if (t.data.length > 0)
         return t.data[t.data.length - 1];
     }
-  }, [e]), [dt, ot] = it(() => {
-    if (!Lt) return;
+  }, [e]), [dt, U] = lt(() => {
+    if (!kt) return;
     const t = /* @__PURE__ */ new Map();
     for (const a of e)
       a.data.length > 0 && t.set(a.label, a.data[a.data.length - 1]);
     return t;
-  }), [bt, A] = it(null), [ht, pt] = it([]);
-  E(() => {
+  }), [mt, A] = lt(null), [bt, ht] = lt([]);
+  $(() => {
     const t = () => {
-      if (N.current && $.current) {
-        const l = $.current.clientWidth, s = $.current.clientHeight;
-        N.current.resize(l, s);
+      if (k.current && z.current) {
+        const l = z.current.clientWidth, s = z.current.clientHeight;
+        k.current.resize(l, s);
       }
-    }, a = $.current, r = a ? new ResizeObserver(t) : null;
+    }, a = z.current, r = a ? new ResizeObserver(t) : null;
     return a && r?.observe(a), () => {
       a && r?.unobserve(a);
     };
-  }, []), E(() => {
-    if (!et.current || U.current) return;
-    const t = Rt(), a = wt(
+  }, []), $(() => {
+    if (!Q.current || K.current) return;
+    const t = wt(), a = St(
       "hsl(var(--foreground))",
       "rgb(0, 0, 0)"
-    ), r = At(et.current, {
+    ), r = At(Q.current, {
       ...t,
       rightPriceScale: {
         ...t.rightPriceScale || {},
@@ -199,29 +205,29 @@ function ie({
           mode: It.Magnet
         }
       },
-      ...W
+      ...Y
     });
-    return N.current = r, U.current = !0, () => {
-      r.remove(), N.current = null, U.current = !1, R.current.clear();
+    return k.current = r, K.current = !0, () => {
+      r.remove(), k.current = null, K.current = !1, R.current.clear();
     };
-  }, [y, W]), E(() => {
-    const t = N.current;
+  }, [y, Y]), $(() => {
+    const t = k.current;
     if (!t || e.length === 0) return;
-    const r = e.filter((o) => o.data.length > 0).length <= 1 ? ft : gt, l = f === "time" ? Vt(f, M) : Vt(f), s = M.map((o) => o.value), {
+    const r = e.filter((o) => o.data.length > 0).length <= 1 ? ut : ft, l = g === "time" ? Rt(g, M) : Rt(g), s = M.map((o) => o.value), {
       formatter: c,
-      tickmarksFormatter: u,
+      tickmarksFormatter: f,
       updateVisibleRange: L,
-      updateLastValues: g
+      updateLastValues: m
     } = Bt(s, w, {
       yScaleMin: r
     });
-    tt.current = L, Nt.current = g;
+    J.current = L, Nt.current = m;
     const P = e.filter((o) => o.data.length > 0).map((o) => o.data[o.data.length - 1].value);
-    g(P);
-    const T = Rt();
+    m(P);
+    const F = wt();
     t.applyOptions({
       localization: {
-        ...T.localization || {},
+        ...F.localization || {},
         // biome-ignore lint/suspicious/noExplicitAny: External library type compatibility
         timeFormatter: (o) => (
           // biome-ignore lint/suspicious/noExplicitAny: External library type compatibility
@@ -229,21 +235,21 @@ function ie({
         )
       },
       timeScale: {
-        ...T.timeScale || {},
+        ...F.timeScale || {},
         // biome-ignore lint/suspicious/noExplicitAny: External library type compatibility
         tickMarkFormatter: l.tickMarkFormatter,
         minBarSpacing: 0
       }
     });
-    const d = (M.length > 0 ? Math.min(...M.map((o) => o.value)) : 0) < 0, x = M.some((o) => o.value === 0), b = !d && x, p = e.length > 1 && !k, S = e.length > 1 && !k || y, I = wt(
+    const d = (M.length > 0 ? Math.min(...M.map((o) => o.value)) : 0) < 0, S = M.some((o) => o.value === 0), b = !d && S, v = e.length > 1 && !N, C = e.length > 1 && !N || y, D = St(
       "hsl(var(--foreground))",
       "rgb(0, 0, 0)"
     );
     t.applyOptions({
       rightPriceScale: {
-        ...T.rightPriceScale || {},
-        visible: !S,
-        textColor: I,
+        ...F.rightPriceScale || {},
+        visible: !C,
+        textColor: D,
         ...b && {
           scaleMargins: {
             top: 0.3,
@@ -252,83 +258,83 @@ function ie({
         }
       }
     });
-    const D = new Set(R.current.keys()), G = new Set(e.map((o) => o.label));
-    for (const o of D)
-      if (!G.has(o)) {
+    const tt = new Set(R.current.keys()), et = new Set(e.map((o) => o.label));
+    for (const o of tt)
+      if (!et.has(o)) {
         const n = R.current.get(o);
         n && (t.removeSeries(n), R.current.delete(o));
       }
-    const B = Et(), rt = [];
-    let Z = 0;
+    const Lt = Et(), ot = [];
+    let _ = 0;
     for (let o = 0; o < e.length; o++) {
-      const n = e[o], _ = yt(o), O = n.lineColor ?? n.color ?? _.line;
-      let Y, j;
+      const n = e[o], j = Vt(o), E = n.lineColor ?? n.color ?? j.line;
+      let G, B;
       if (n.lineColor ?? n.color)
         if (n.topColor && n.bottomColor)
-          Y = n.topColor, j = n.bottomColor;
+          G = n.topColor, B = n.bottomColor;
         else if (n.topColor) {
-          const i = K(O);
-          Y = n.topColor, j = i.bottomColor;
+          const i = X(E);
+          G = n.topColor, B = i.bottomColor;
         } else if (n.bottomColor)
-          Y = K(O).topColor, j = n.bottomColor;
+          G = X(E).topColor, B = n.bottomColor;
         else {
-          const i = K(O);
-          Y = i.topColor, j = i.bottomColor;
+          const i = X(E);
+          G = i.topColor, B = i.bottomColor;
         }
       else
-        Y = n.topColor || _.top, j = n.bottomColor || _.bottom;
+        G = n.topColor || j.top, B = n.bottomColor || j.bottom;
       if (n.data.length === 0) {
         const i = R.current.get(n.label);
         i && (t.removeSeries(i), R.current.delete(n.label));
         continue;
       }
-      const Pt = (n.data.length > 0 ? Math.min(...n.data.map((i) => i.value)) : 0) < 0, Tt = n.data.some((i) => i.value === 0), Ft = !Pt && Tt, Ct = k || !p || Z === 0 ? "right" : `scale-${Z}`;
-      p && rt.push({
-        priceScaleId: Ct || "right",
-        shouldPreventNegativeAxis: Ft,
-        seriesIndex: Z
+      const Pt = (n.data.length > 0 ? Math.min(...n.data.map((i) => i.value)) : 0) < 0, Ft = n.data.some((i) => i.value === 0), Tt = !Pt && Ft, vt = N || !v || _ === 0 ? "right" : `scale-${_}`;
+      v && ot.push({
+        priceScaleId: vt || "right",
+        shouldPreventNegativeAxis: Tt,
+        seriesIndex: _
       });
-      const xt = (k || !p) && r !== void 0 && typeof r == "number", St = {
-        lineColor: O,
-        topColor: Y,
-        bottomColor: j,
-        priceScaleId: Ct,
+      const Ct = (N || !v) && r !== void 0 && typeof r == "number", xt = {
+        lineColor: E,
+        topColor: G,
+        bottomColor: B,
+        priceScaleId: vt,
         priceFormat: {
           type: "custom",
           minMove: 0.01,
-          formatter: xt && typeof r == "number" ? (i) => c(
+          formatter: Ct && typeof r == "number" ? (i) => c(
             i < r ? r : i
           ) : c,
-          tickmarksFormatter: u
+          tickmarksFormatter: f
         },
         autoscaleInfoProvider: (i) => {
-          if (!xt) return i();
-          const at = i();
-          if (at?.priceRange) {
+          if (!Ct) return i();
+          const nt = i();
+          if (nt?.priceRange) {
             const Mt = r;
-            at.priceRange.minValue = Mt;
+            nt.priceRange.minValue = Mt;
           }
-          return at;
+          return nt;
         }
       };
-      let H = R.current.get(n.label);
-      H ? (H.applyOptions(St), H.setData(
+      let O = R.current.get(n.label);
+      O ? (O.applyOptions(xt), O.setData(
         n.data.map((i) => ({
           ...i,
           time: i.time
         }))
-      )) : (H = t.addSeries(zt, {
-        ...B,
-        ...St
-      }), H.setData(
+      )) : (O = t.addSeries(zt, {
+        ...Lt,
+        ...xt
+      }), O.setData(
         n.data.map((i) => ({
           ...i,
           time: i.time
         }))
-      ), R.current.set(n.label, H)), Z++;
+      ), R.current.set(n.label, O)), _++;
     }
-    if (p && rt.length > 0)
-      for (const o of rt)
+    if (v && ot.length > 0)
+      for (const o of ot)
         try {
           const n = t.priceScale(o.priceScaleId);
           n && n.applyOptions({
@@ -346,7 +352,7 @@ function ie({
             borderVisible: !0,
             borderColor: "rgba(224, 227, 235, 0.1)",
             entireTextOnly: !1,
-            textColor: I
+            textColor: D
           });
         } catch (n) {
           console.warn(
@@ -354,7 +360,7 @@ function ie({
             n
           );
         }
-    else if (!p)
+    else if (!v)
       try {
         const o = t.priceScale("right");
         o && o.applyOptions({
@@ -372,34 +378,34 @@ function ie({
           borderVisible: !0,
           borderColor: "rgba(224, 227, 235, 0.1)",
           entireTextOnly: !1,
-          textColor: I
+          textColor: D
         });
       } catch {
       }
-    if (r !== void 0 && !y && (k || !p) && t.applyOptions({
+    if (r !== void 0 && !y && (N || !v) && t.applyOptions({
       handleScroll: {
         vertTouchDrag: !1
       }
     }), M.length > 0) {
-      const o = M.map((O) => Number(O.time)), n = Math.min(...o), _ = Math.max(...o);
-      t.timeScale().setVisibleRange({ from: n, to: _ });
+      const o = M.map((E) => Number(E.time)), n = Math.min(...o), j = Math.max(...o);
+      t.timeScale().setVisibleRange({ from: n, to: j });
     }
-    mt.current && (mt.current = !1);
-    const nt = /* @__PURE__ */ new Map();
+    gt.current && (gt.current = !1);
+    const rt = /* @__PURE__ */ new Map();
     for (const o of e)
-      o.data.length > 0 && nt.set(o.label, o.data[o.data.length - 1]);
-    ot(nt.size > 0 ? nt : void 0);
+      o.data.length > 0 && rt.set(o.label, o.data[o.data.length - 1]);
+    U(rt.size > 0 ? rt : void 0);
   }, [
     e,
     M,
-    f,
+    g,
     w,
     y,
-    k,
-    ft,
-    gt
-  ]), E(() => {
-    const t = N.current;
+    N,
+    ut,
+    ft
+  ]), $(() => {
+    const t = k.current;
     if (!t || e.length === 0) return;
     const a = e.length === 1;
     let r;
@@ -410,102 +416,90 @@ function ie({
       }
     if (!r) return;
     const l = (s) => {
-      const { time: c = r, seriesData: u, point: L } = s || {}, g = Array.from(R.current.values());
+      const { time: c = r, seriesData: f, point: L } = s || {}, m = Array.from(R.current.values());
       if (!L || !c) {
         const V = /* @__PURE__ */ new Map();
         for (const d of e)
           d.data.length > 0 && V.set(d.label, d.data[d.data.length - 1]);
-        if (ot(V.size > 0 ? V : void 0), a || k)
+        if (U(V.size > 0 ? V : void 0), a || N)
           A(null);
-        else if (g[0] && r) {
-          const x = t.timeScale().timeToCoordinate(r), b = e[0];
+        else if (m[0] && r) {
+          const S = t.timeScale().timeToCoordinate(r), b = e[0];
           if (b.data.length > 0) {
-            const p = b.data[b.data.length - 1].value, S = g[0].priceToCoordinate(p);
-            x !== null && S !== null && A({ x, y: S });
+            const v = b.data[b.data.length - 1].value, C = m[0].priceToCoordinate(v);
+            S !== null && C !== null && A({ x: S, y: C });
           }
         }
         return;
       }
       const P = /* @__PURE__ */ new Map();
-      let T;
+      let F;
       for (let V = 0; V < e.length; V++) {
-        const d = e[V], x = g[V];
-        if (!x) continue;
-        const b = u?.get(x), p = b && "value" in b ? b.value : void 0;
-        let S;
-        if (p !== void 0)
-          S = p;
-        else {
-          const I = Number(c), D = d.data;
-          let G = 0;
-          for (let B = D.length - 1; B >= 0; B--)
-            if (Number(D[B].time) <= I) {
-              G = D[B].value;
-              break;
-            }
-          S = G;
-        }
-        V === 0 && (T = S), P.set(d.label, { value: S, time: c });
+        const d = e[V], S = m[V];
+        if (!S) continue;
+        const b = f?.get(S), v = b && "value" in b ? b.value : void 0;
+        let C;
+        v !== void 0 ? C = v : a ? C = d.data[d.data.length - 1]?.value ?? 0 : C = Wt(d.data, Number(c)), V === 0 && (F = C), P.set(d.label, { value: C, time: c });
       }
-      if (ot(P), T !== void 0 && g[0]) {
-        const d = t.timeScale().timeToCoordinate(c), x = g[0].priceToCoordinate(T);
-        if (d !== null && x !== null) {
-          const b = $.current;
+      if (U(P), F !== void 0 && m[0]) {
+        const d = t.timeScale().timeToCoordinate(c), S = m[0].priceToCoordinate(F);
+        if (d !== null && S !== null) {
+          const b = z.current;
           if (b) {
-            const p = b.querySelector(
+            const v = b.querySelector(
               ".LightweightChart"
             );
-            if (p) {
-              const S = p.getBoundingClientRect(), I = b.getBoundingClientRect(), D = d + (S.left - I.left), G = x + (S.top - I.top);
-              A({ x: D, y: G });
+            if (v) {
+              const C = v.getBoundingClientRect(), D = b.getBoundingClientRect(), tt = d + (C.left - D.left), et = S + (C.top - D.top);
+              A({ x: tt, y: et });
             } else
-              A({ x: d, y: x });
+              A({ x: d, y: S });
           } else
-            A({ x: d, y: x });
+            A({ x: d, y: S });
         } else
           A(null);
       } else
         A(null);
     };
-    return t.subscribeCrosshairMove(l), y && t.subscribeClick(l), !a && !k && requestAnimationFrame(() => {
+    return t.subscribeCrosshairMove(l), y && t.subscribeClick(l), !a && !N && requestAnimationFrame(() => {
       const s = Array.from(R.current.values());
       if (s[0] && r && e[0]?.data.length > 0) {
-        const u = t.timeScale().timeToCoordinate(r), L = e[0].data[e[0].data.length - 1].value, g = s[0].priceToCoordinate(L);
-        u !== null && g !== null && A({ x: u, y: g });
+        const f = t.timeScale().timeToCoordinate(r), L = e[0].data[e[0].data.length - 1].value, m = s[0].priceToCoordinate(L);
+        f !== null && m !== null && A({ x: f, y: m });
       }
     }), () => {
       t.unsubscribeCrosshairMove(l), y && t.unsubscribeClick(l);
     };
-  }, [e, k, y]), E(() => {
-    const t = N.current;
+  }, [e, N, y]), $(() => {
+    const t = k.current;
     if (!t || e.length === 0) return;
     const a = t.timeScale(), r = () => {
-      if (!tt.current) return;
+      if (!J.current) return;
       const l = a.getVisibleRange();
       if (!l) return;
-      const s = Number(l.from), c = Number(l.to), u = [];
+      const s = Number(l.from), c = Number(l.to), f = [];
       for (const L of e)
-        for (const g of L.data) {
-          const P = Number(g.time);
-          P >= s && P <= c && u.push(g.value);
+        for (const m of L.data) {
+          const P = Number(m.time);
+          P >= s && P <= c && f.push(m.value);
         }
-      u.length > 0 && tt.current(u);
+      f.length > 0 && J.current(f);
     };
     return a.subscribeVisibleLogicalRangeChange(r), () => {
       a.unsubscribeVisibleLogicalRangeChange(
         r
       );
     };
-  }, [e]), E(() => {
-    const t = N.current, a = Array.from(R.current.values()), r = [];
-    if (t && a.length > 0 && C) {
+  }, [e]), $(() => {
+    const t = k.current, a = Array.from(R.current.values()), r = [];
+    if (t && a.length > 0 && x) {
       const l = Gt(), s = a[0];
-      for (const c of C) {
-        const u = new jt(t, s, c.xCoordinate, {
+      for (const c of x) {
+        const f = new jt(t, s, c.xCoordinate, {
           ...l,
           ...c.options || {}
         });
-        s.attachPrimitive(u), r.push(u);
+        s.attachPrimitive(f), r.push(f);
       }
     }
     return () => {
@@ -515,15 +509,15 @@ function ie({
           l.detachPrimitive(s);
       }
     };
-  }, [C]), E(() => {
-    const t = N.current;
-    if (!t || !C?.length) {
-      pt([]);
+  }, [x]), $(() => {
+    const t = k.current;
+    if (!t || !x?.length) {
+      ht([]);
       return;
     }
     const a = () => {
-      const s = t.timeScale(), c = C.map((u) => s.timeToCoordinate(u.xCoordinate) ?? null);
-      pt(c);
+      const s = t.timeScale(), c = x.map((f) => s.timeToCoordinate(f.xCoordinate) ?? null);
+      ht(c);
     };
     a();
     const r = t.timeScale(), l = () => {
@@ -532,76 +526,76 @@ function ie({
     return r.subscribeVisibleLogicalRangeChange(l), () => {
       r.unsubscribeVisibleLogicalRangeChange(l);
     };
-  }, [C]);
-  const q = e.length === 1, vt = lt.useMemo(() => {
-    if (q && e.length > 0) {
+  }, [x]);
+  const W = e.length === 1, pt = at.useMemo(() => {
+    if (W && e.length > 0) {
       const t = e[0];
       if (t.data.length > 0)
         return t.data[t.data.length - 1];
     }
-  }, [q, e]);
-  return /* @__PURE__ */ X(
+  }, [W, e]);
+  return /* @__PURE__ */ H(
     "div",
     {
-      ref: $,
-      className: ut(
+      ref: z,
+      className: ct(
         "relative z-[1] w-full h-full overflow-hidden p-0",
-        v
+        p
       ),
       children: [
-        Q != null && Q !== !1 && q ? /* @__PURE__ */ h("div", { className: "absolute top-2 left-2 right-2 z-[100] pointer-events-none", children: /* @__PURE__ */ h("div", { className: "text-xl sm:text-2xl font-semibold text-foreground whitespace-nowrap overflow-hidden text-ellipsis", children: Q }) }) : kt && q && vt && /* @__PURE__ */ h(
+        Z != null && Z !== !1 && W ? /* @__PURE__ */ h("div", { className: "absolute top-2 left-2 right-2 z-[100] pointer-events-none", children: /* @__PURE__ */ h("div", { className: "text-xl sm:text-2xl font-semibold text-foreground whitespace-nowrap overflow-hidden text-ellipsis", children: Z }) }) : yt && W && pt && /* @__PURE__ */ h(
           Ot,
           {
-            point: vt,
-            xMeasureUnit: f,
+            point: pt,
+            xMeasureUnit: g,
             yMeasureUnit: w,
-            decimals: J
+            decimals: q
           }
         ),
-        dt && bt && /* @__PURE__ */ h(
+        dt && mt && /* @__PURE__ */ h(
           Yt,
           {
             points: dt,
-            xMeasureUnit: f,
+            xMeasureUnit: g,
             yMeasureUnit: w,
             series: e,
-            position: bt,
-            containerRef: $,
-            decimals: J
+            position: mt,
+            containerRef: z,
+            decimals: q
           }
         ),
-        m && /* @__PURE__ */ h(_t, { series: e, onUnselect: F }),
-        C && C.length > 0 && ht.length === C.length && /* @__PURE__ */ h(
+        u && /* @__PURE__ */ h(Xt, { series: e, onUnselect: T }),
+        x && x.length > 0 && bt.length === x.length && /* @__PURE__ */ h(
           "div",
           {
             className: "absolute inset-0 z-[5] pointer-events-none",
             "aria-hidden": !0,
-            children: C.map((t, a) => {
-              const r = ht[a], l = t.options ?? {}, s = l.showLabel !== !1;
+            children: x.map((t, a) => {
+              const r = bt[a], l = t.options ?? {}, s = l.showLabel !== !1;
               if (r === null || !s) return null;
-              const { labelText: c, valueStr: u } = Ht(
+              const { labelText: c, valueStr: f } = Ht(
                 l,
                 w,
-                J
+                q
               );
-              if (!(c || u)) return null;
-              const g = l.labelBackgroundColor ?? l.color ?? "hsl(var(--background))", P = l.labelTextColor ?? "hsl(var(--foreground))", T = `${String(t.xCoordinate)}-${c}`;
-              return /* @__PURE__ */ X(
+              if (!(c || f)) return null;
+              const m = l.labelBackgroundColor ?? l.color ?? "hsl(var(--background))", P = l.labelTextColor ?? "hsl(var(--foreground))", F = `${String(t.xCoordinate)}-${c}`;
+              return /* @__PURE__ */ H(
                 "div",
                 {
                   className: "absolute top-2 px-2 py-1 rounded text-xs font-medium whitespace-nowrap shadow-sm border border-border",
                   style: {
                     left: r,
                     transform: "translateX(-50%)",
-                    backgroundColor: g,
+                    backgroundColor: m,
                     color: P
                   },
                   children: [
                     c && /* @__PURE__ */ h("span", { className: "block", children: c }),
-                    u && /* @__PURE__ */ h("span", { className: ut("block", c && "mt-0.5"), children: u })
+                    f && /* @__PURE__ */ h("span", { className: ct("block", c && "mt-0.5"), children: f })
                   ]
                 },
-                T
+                F
               );
             })
           }
@@ -609,7 +603,7 @@ function ie({
         /* @__PURE__ */ h(
           "div",
           {
-            ref: et,
+            ref: Q,
             className: "LightweightChart w-full h-full overflow-hidden"
           }
         )
@@ -617,18 +611,18 @@ function ie({
     }
   );
 }
-function _t({
+function Xt({
   series: e,
-  onUnselect: v
+  onUnselect: p
 }) {
-  return /* @__PURE__ */ h("div", { className: "absolute top-0 left-2 z-[10] flex flex-wrap gap-2", children: e.map((m, F) => {
-    const f = yt(F), w = (m.lineColor ?? m.color) || f.line, W = m.data.length === 0;
-    return /* @__PURE__ */ X(
+  return /* @__PURE__ */ h("div", { className: "absolute top-0 left-2 z-[10] flex flex-wrap gap-2", children: e.map((u, T) => {
+    const g = Vt(T), w = (u.lineColor ?? u.color) || g.line, Y = u.data.length === 0;
+    return /* @__PURE__ */ H(
       "div",
       {
-        className: ut(
+        className: ct(
           "flex items-center gap-1.5 px-2 py-1 bg-background/80 backdrop-blur-sm rounded border border-border",
-          W && "opacity-50"
+          Y && "opacity-50"
         ),
         children: [
           /* @__PURE__ */ h(
@@ -638,20 +632,20 @@ function _t({
               style: { backgroundColor: w }
             }
           ),
-          /* @__PURE__ */ X("span", { className: "text-[10px] sm:text-xs font-medium text-foreground", children: [
-            m.label,
-            W && " (no data)"
+          /* @__PURE__ */ H("span", { className: "text-[10px] sm:text-xs font-medium text-foreground", children: [
+            u.label,
+            Y && " (no data)"
           ] }),
-          v && /* @__PURE__ */ h(
+          p && /* @__PURE__ */ h(
             "button",
             {
               type: "button",
-              onClick: (C) => {
-                C.stopPropagation(), v(m.label);
+              onClick: (x) => {
+                x.stopPropagation(), p(u.label);
               },
               className: "ml-1 flex items-center justify-center w-4 h-4 rounded-sm hover:bg-muted transition-colors cursor-pointer",
-              "aria-label": `Remove ${m.label}`,
-              children: /* @__PURE__ */ X(
+              "aria-label": `Remove ${u.label}`,
+              children: /* @__PURE__ */ H(
                 "svg",
                 {
                   xmlns: "http://www.w3.org/2000/svg",
@@ -676,13 +670,14 @@ function _t({
           )
         ]
       },
-      m.label
+      u.label
     );
   }) });
 }
 export {
-  ct as DEFAULT_SERIES_COLORS,
-  ie as Graph,
-  yt as getSeriesColorPalette,
+  st as DEFAULT_SERIES_COLORS,
+  se as Graph,
+  Vt as getSeriesColorPalette,
+  Wt as getStepForwardValue,
   Ht as getVerticalLineTooltipContent
 };

package/dist/types/components/graph/graph.d.ts

@@ -32,6 +32,12 @@ export declare function getVerticalLineTooltipContent(opts: VerticalLineOptions,
     labelText: string;
     valueStr: string;
 };
+/**
+ * Step-forward interpolation: find the last data point with
+ * `time <= crosshairTime` and return its value.
+ * Returns 0 when the crosshair is before the first data point (no history).
+ */
+export declare function getStepForwardValue(data: ReadonlyArray<Point>, crosshairTime: number): number;
 /**
  * Palette ordered for maximum contrast; first color is the original teal.
  * Greens/teals are spread out so that when only a subset of series is visible,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gearbox-protocol/ui-kit",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "description": "Internal UI components",
   "repository": "https://github.com/gearbox-protocol/ui-kit",
   "license": "MIT",