@gearbox-protocol/permissionless-ui 1.17.7 → 1.17.8

package/dist/cjs/components/graph/default-config.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../../utils/colors.cjs"),o={topColor:"rgba(76, 175, 80, 0.56)",bottomColor:"rgba(76, 175, 80, 0.04)",lineColor:"#02c39a",lineWidth:2},l={showLabel:!0,color:"#02c39a",labelBackgroundColor:"#02c39a",width:2};function t(){const e=r.resolveCSSColor("hsl(var(--foreground))","rgb(0, 0, 0)");return{timeScale:{borderVisible:!0,borderColor:"rgba(224, 227, 235, 0.1)",visible:!0},rightPriceScale:{autoScale:!0,alignLabels:!0,borderVisible:!0,borderColor:"rgba(224, 227, 235, 0.1)",entireTextOnly:!1,textColor:e},layout:{background:{color:"transparent"},textColor:e,fontSize:14},crosshair:{horzLine:{width:2,color:"rgba(224, 227, 235, 0.1)",style:0,labelVisible:!1},vertLine:{width:2,color:"rgba(224, 227, 235, 0.1)",style:0,labelVisible:!1}},grid:{vertLines:{visible:!1},horzLines:{visible:!1}}}}function i(){return{topColor:"rgba(76, 175, 80, 0.56)",bottomColor:"rgba(76, 175, 80, 0.04)",lineColor:o.lineColor,lineWidth:2}}function a(){const e=r.resolveCSSColor("hsl(var(--primary))","rgb(76, 175, 80)");return{showLabel:!0,color:e,labelBackgroundColor:e,width:2}}const s={timeScale:{borderVisible:!0,borderColor:"rgba(224, 227, 235, 0.1)",visible:!0},rightPriceScale:{autoScale:!0,alignLabels:!0,borderVisible:!0,borderColor:"rgba(224, 227, 235, 0.1)",entireTextOnly:!1},layout:{background:{color:"transparent"},textColor:"rgb(0, 0, 0)",fontSize:14},crosshair:{horzLine:{width:2,color:"rgba(224, 227, 235, 0.1)",style:0,labelVisible:!1},vertLine:{width:2,color:"rgba(224, 227, 235, 0.1)",style:0,labelVisible:!1}},grid:{vertLines:{visible:!1},horzLines:{visible:!1}}};exports.DEFAULT_AREA_SERIES=o;exports.DEFAULT_OPTIONS=s;exports.DEFAULT_VERTICAL_LINE=l;exports.getDefaultOptions=t;exports.getDefaultSeries=i;exports.getDefaultVerticalLine=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../../utils/colors.cjs"),o={topColor:"rgba(76, 175, 80, 0.56)",bottomColor:"rgba(76, 175, 80, 0.04)",lineColor:"#02c39a",lineWidth:2},l={showLabel:!0,color:"#02c39a",labelBackgroundColor:"#02c39a",width:2};function t(){const e=r.resolveCSSColor("hsl(var(--foreground))","rgb(0, 0, 0)");return{timeScale:{borderVisible:!0,borderColor:"rgba(224, 227, 235, 0.1)",visible:!0},rightPriceScale:{visible:!0,autoScale:!0,alignLabels:!0,borderVisible:!0,borderColor:"rgba(224, 227, 235, 0.1)",entireTextOnly:!1,textColor:e},layout:{background:{color:"transparent"},textColor:e,fontSize:14},crosshair:{horzLine:{width:2,color:"rgba(224, 227, 235, 0.1)",style:0,labelVisible:!1},vertLine:{width:2,color:"rgba(224, 227, 235, 0.1)",style:0,labelVisible:!1}},grid:{vertLines:{visible:!1},horzLines:{visible:!1}}}}function i(){return{topColor:"rgba(76, 175, 80, 0.56)",bottomColor:"rgba(76, 175, 80, 0.04)",lineColor:o.lineColor,lineWidth:2}}function a(){const e=r.resolveCSSColor("hsl(var(--primary))","rgb(76, 175, 80)");return{showLabel:!0,color:e,labelBackgroundColor:e,width:2}}const s={timeScale:{borderVisible:!0,borderColor:"rgba(224, 227, 235, 0.1)",visible:!0},rightPriceScale:{visible:!0,autoScale:!0,alignLabels:!0,borderVisible:!0,borderColor:"rgba(224, 227, 235, 0.1)",entireTextOnly:!1},layout:{background:{color:"transparent"},textColor:"rgb(0, 0, 0)",fontSize:14},crosshair:{horzLine:{width:2,color:"rgba(224, 227, 235, 0.1)",style:0,labelVisible:!1},vertLine:{width:2,color:"rgba(224, 227, 235, 0.1)",style:0,labelVisible:!1}},grid:{vertLines:{visible:!1},horzLines:{visible:!1}}};exports.DEFAULT_AREA_SERIES=o;exports.DEFAULT_OPTIONS=s;exports.DEFAULT_VERTICAL_LINE=l;exports.getDefaultOptions=t;exports.getDefaultSeries=i;exports.getDefaultVerticalLine=a;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("react/jsx-runtime"),be=require("lightweight-charts"),i=require("react"),ve=require("../../hooks/use-media-query.cjs"),ce=require("../../utils/cn.cjs"),G=require("../../utils/colors.cjs"),$=require("./default-config.cjs"),oe=require("./formatters.cjs"),Ce=require("./graph-current-value.cjs"),Se=require("./graph-tooltip.cjs"),xe=require("./plugins/vertical-line.cjs");function Re(e){const V=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const p in e)if(p!=="default"){const T=Object.getOwnPropertyDescriptor(e,p);Object.defineProperty(V,p,T.get?T:{enumerable:!0,get:()=>e[p]})}}return V.default=e,Object.freeze(V)}const ne=Re(i),H=[{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:"#f59e0b",top:"rgba(245, 158, 11, 0.56)",bottom:"rgba(245, 158, 11, 0.04)"},{line:"#ef4444",top:"rgba(239, 68, 68, 0.56)",bottom:"rgba(239, 68, 68, 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:"#10b981",top:"rgba(16, 185, 129, 0.56)",bottom:"rgba(16, 185, 129, 0.04)"},{line:"#06b6d4",top:"rgba(6, 182, 212, 0.56)",bottom:"rgba(6, 182, 212, 0.04)"}];function ye({series:e,className:V,showLegend:p=!1,onUnselectSeries:T,xMeasureUnit:L="time",yMeasureUnit:q="token",optionsOverrides:D,verticalLineOptions:I}){const R=i.useRef(null),S=i.useRef(new Map),X=i.useRef(!1),Y=i.useRef(new Set),re=i.useRef(0),ae=i.useRef(!0),W=i.useRef(null),ue=i.useRef(null),F=i.useRef(null),Z=i.useRef(null),A=ve.useIsMobile(),P=ne.useMemo(()=>e.flatMap(t=>t.data),[e]),fe=ne.useMemo(()=>{if(e.length>0){const t=e[e.length-1];if(t.data.length>0)return t.data[t.data.length-1]}},[e]),[le,Q]=i.useState(()=>{if(!fe)return;const t=new Map;for(const n of e)n.data.length>0&&t.set(n.label,n.data[n.data.length-1]);return t}),[se,M]=i.useState(null);i.useEffect(()=>{const t=()=>{if(R.current&&F.current){const d=F.current.clientWidth,a=F.current.clientHeight;R.current.resize(d,a),R.current.timeScale().fitContent()}},n=F.current,l=n?new ResizeObserver(t):null;return n&&l?.observe(n),()=>{n&&l?.unobserve(n)}},[]),i.useEffect(()=>{if(!Z.current||X.current)return;const t=$.getDefaultOptions(),n=G.resolveCSSColor("hsl(var(--foreground))","rgb(0, 0, 0)"),l=be.createChart(Z.current,{...t,rightPriceScale:{...t.rightPriceScale||{},visible:!A,textColor:n},...D});return R.current=l,X.current=!0,()=>{l.remove(),R.current=null,X.current=!1,S.current.clear()}},[A,D]),i.useEffect(()=>{const t=R.current;if(!t||e.length===0)return;const n=L==="time"?oe.getXFormatter(L,P):oe.getXFormatter(L),l=P.map(o=>o.value),{formatter:d,updateVisibleRange:a,updateLastValues:f}=oe.createAdaptiveYAxisFormatter(l);W.current=a,ue.current=f;const b=e.filter(o=>o.data.length>0).map(o=>o.data[o.data.length-1].value);f(b);const x=$.getDefaultOptions();t.applyOptions({localization:{...x.localization||{},timeFormatter:n?(o=>n(parseFloat(o),void 0)):void 0},timeScale:{...x.timeScale||{},tickMarkFormatter:n?(o=>n(parseFloat(o),void 0)):void 0,minBarSpacing:0}});const j=(P.length>0?Math.min(...P.map(o=>o.value)):0)<0,y=P.some(o=>o.value===0),g=!j&&y,s=e.length>1,u=s||A,c=G.resolveCSSColor("hsl(var(--foreground))","rgb(0, 0, 0)");t.applyOptions({rightPriceScale:{...x.rightPriceScale||{},visible:!A,textColor:c,...g&&{scaleMargins:{top:.3,bottom:0}}}});const h=new Set(S.current.keys()),w=new Set(e.map(o=>o.label));for(const o of h)if(!w.has(o)){const r=S.current.get(o);r&&(t.removeSeries(r),S.current.delete(o))}const O=$.getDefaultSeries(),z=[];let k=0;for(let o=0;o<e.length;o++){const r=e[o],ee=H[o%H.length],B=r.color||ee.line;let _,N;if(r.color)if(r.topColor&&r.bottomColor)_=r.topColor,N=r.bottomColor;else if(r.topColor){const C=G.generateColorsFromBase(B);_=r.topColor,N=C.bottomColor}else if(r.bottomColor)_=G.generateColorsFromBase(B).topColor,N=r.bottomColor;else{const C=G.generateColorsFromBase(B);_=C.topColor,N=C.bottomColor}else _=r.topColor||ee.top,N=r.bottomColor||ee.bottom;if(r.data.length===0){const C=S.current.get(r.label);C&&(t.removeSeries(C),S.current.delete(r.label));continue}const he=(r.data.length>0?Math.min(...r.data.map(C=>C.value)):0)<0,me=r.data.some(C=>C.value===0),pe=!he&&me,te=s?k===0?void 0:`scale-${k}`:void 0;s&&z.push({priceScaleId:te||"right",shouldPreventNegativeAxis:pe,seriesIndex:k});let E=S.current.get(r.label);E?(E.applyOptions({lineColor:B,topColor:_,bottomColor:N,priceScaleId:te,priceFormat:{type:"custom",formatter:d}}),E.setData(r.data)):(E=t.addAreaSeries({...O,lineColor:B,topColor:_,bottomColor:N,priceScaleId:te,priceFormat:{type:"custom",formatter:d}}),E.setData(r.data),S.current.set(r.label,E)),k++}if(s&&z.length>0)for(const o of z)try{const r=t.priceScale(o.priceScaleId);r&&r.applyOptions({visible:!u,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:c})}catch(r){console.warn(`Failed to configure price scale ${o.priceScaleId} for series ${o.seriesIndex}:`,r)}const K=new Set(e.map(o=>o.label)),de=K.size!==Y.current.size||[...K].some(o=>!Y.current.has(o)),ge=P.length!==re.current;(ae.current||de||ge||A)&&(t.timeScale().fitContent(),ae.current=!1),Y.current=K,re.current=P.length;const U=new Map;for(const o of e)o.data.length>0&&U.set(o.label,o.data[o.data.length-1]);Q(U.size>0?U:void 0)},[e,P,L,q,A]),i.useEffect(()=>{const t=R.current;if(!t||e.length===0)return;const n=e.length===1;let l;for(const a of e)if(a.data.length>0){l=a.data[a.data.length-1].time;break}if(!l)return;const d=a=>{const{time:f=l,seriesData:b,point:x}=a||{},v=Array.from(S.current.values());if(!x||!f){const g=new Map;for(const s of e)s.data.length>0&&g.set(s.label,s.data[s.data.length-1]);if(Q(g.size>0?g:void 0),n)M(null);else if(v[0]&&l){const u=t.timeScale().timeToCoordinate(l),c=e[0];if(c.data.length>0){const h=c.data[c.data.length-1].value,w=v[0].priceToCoordinate(h);u!==null&&w!==null&&M({x:u,y:w})}}return}const j=new Map;let y;for(let g=0;g<e.length;g++){const s=e[g],u=v[g];if(!u)continue;const c=b?.get(u),h=c&&"value"in c?c.value:void 0,w=s.data[s.data.length-1],O=h!==void 0?h:w?.value??0;g===0&&(y=O),j.set(s.label,{value:O,time:f})}if(Q(j),y!==void 0&&v[0]){const s=t.timeScale().timeToCoordinate(f),u=v[0].priceToCoordinate(y);if(s!==null&&u!==null){const c=F.current;if(c){const h=c.querySelector(".LightweightChart");if(h){const w=h.getBoundingClientRect(),O=c.getBoundingClientRect(),z=s+(w.left-O.left),k=u+(w.top-O.top);M({x:z,y:k})}else M({x:s,y:u})}else M({x:s,y:u})}else M(null)}else M(null)};return t.subscribeCrosshairMove(d),n||requestAnimationFrame(()=>{const a=Array.from(S.current.values());if(a[0]&&l&&e[0]?.data.length>0){const b=t.timeScale().timeToCoordinate(l),x=e[0].data[e[0].data.length-1].value,v=a[0].priceToCoordinate(x);b!==null&&v!==null&&M({x:b,y:v})}}),()=>{t.unsubscribeCrosshairMove(d)}},[e]),i.useEffect(()=>{const t=R.current;if(!t||e.length===0)return;const n=t.timeScale(),l=Math.max(...e.map(a=>a.data.length)),d=()=>{if(l===0)return;const a=n.getVisibleLogicalRange();if(!a)return;const f={from:0,to:l-1},b=typeof a.from=="number"?a.from:0,x=typeof a.to=="number"?a.to:l-1;if(W.current){const g=Math.max(0,Math.floor(b)),s=Math.min(l-1,Math.ceil(x)),u=[];for(const c of e)for(let h=g;h<=s&&h<c.data.length;h++)u.push(c.data[h].value);u.length>0&&W.current(u)}const v=.01;let j=!1;const y={...a};b<f.from-v&&(y.from=f.from,j=!0),x>f.to+v&&(y.to=f.to,j=!0),j&&n.setVisibleLogicalRange(y)};return n.subscribeVisibleLogicalRangeChange(d),()=>{n.unsubscribeVisibleLogicalRangeChange(d)}},[e]),i.useEffect(()=>{const t=R.current,n=Array.from(S.current.values()),l=[];if(t&&n.length>0&&I){const d=$.getDefaultVerticalLine(),a=n[0];for(const f of I){const b=new xe.VertLine(t,a,f.xCoordinate,{...d,...f.options||{}});a.attachPrimitive(b),l.push(b)}}return()=>{if(n.length>0){const d=n[0];for(const a of l)d.detachPrimitive(a)}}},[I]);const J=e.length===1,ie=ne.useMemo(()=>{if(J&&e.length>0){const t=e[0];if(t.data.length>0)return t.data[t.data.length-1]}},[J,e]);return m.jsxs("div",{ref:F,className:ce.cn("relative z-[1] w-full h-full overflow-hidden p-0",V),children:[J&&ie&&m.jsx(Ce.GraphCurrentValue,{point:ie,xMeasureUnit:L,yMeasureUnit:q}),le&&se&&m.jsx(Se.GraphTooltip,{points:le,xMeasureUnit:L,yMeasureUnit:q,series:e,position:se,containerRef:F}),p&&m.jsx(we,{series:e,onUnselect:T}),m.jsx("div",{ref:Z,className:"LightweightChart w-full h-full overflow-hidden"})]})}function we({series:e,onUnselect:V}){return m.jsx("div",{className:"absolute top-0 left-2 z-[10] flex flex-wrap gap-2",children:e.map((p,T)=>{const L=H[T%H.length],q=p.color||L.line,D=p.data.length===0;return m.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",D&&"opacity-50"),children:[m.jsx("div",{className:"w-3 h-3 rounded-sm",style:{backgroundColor:q}}),m.jsxs("span",{className:"text-[10px] sm:text-xs font-medium text-foreground",children:[p.label,D&&" (no data)"]}),V&&m.jsx("button",{type:"button",onClick:I=>{I.stopPropagation(),V(p.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 ${p.label}`,children:m.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:[m.jsx("title",{children:"Close"}),m.jsx("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),m.jsx("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]})})]},p.label)})})}exports.DEFAULT_SERIES_COLORS=H;exports.Graph=ye;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("react/jsx-runtime"),be=require("lightweight-charts"),i=require("react"),ve=require("../../hooks/use-media-query.cjs"),ce=require("../../utils/cn.cjs"),G=require("../../utils/colors.cjs"),Y=require("./default-config.cjs"),oe=require("./formatters.cjs"),Ce=require("./graph-current-value.cjs"),Se=require("./graph-tooltip.cjs"),xe=require("./plugins/vertical-line.cjs");function Re(e){const V=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const p in e)if(p!=="default"){const A=Object.getOwnPropertyDescriptor(e,p);Object.defineProperty(V,p,A.get?A:{enumerable:!0,get:()=>e[p]})}}return V.default=e,Object.freeze(V)}const re=Re(i),H=[{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:"#f59e0b",top:"rgba(245, 158, 11, 0.56)",bottom:"rgba(245, 158, 11, 0.04)"},{line:"#ef4444",top:"rgba(239, 68, 68, 0.56)",bottom:"rgba(239, 68, 68, 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:"#10b981",top:"rgba(16, 185, 129, 0.56)",bottom:"rgba(16, 185, 129, 0.04)"},{line:"#06b6d4",top:"rgba(6, 182, 212, 0.56)",bottom:"rgba(6, 182, 212, 0.04)"}];function ye({series:e,className:V,showLegend:p=!1,onUnselectSeries:A,xMeasureUnit:L="time",yMeasureUnit:q="token",optionsOverrides:D,verticalLineOptions:I}){const R=i.useRef(null),S=i.useRef(new Map),$=i.useRef(!1),X=i.useRef(new Set),ne=i.useRef(0),ae=i.useRef(!0),W=i.useRef(null),ue=i.useRef(null),F=i.useRef(null),Z=i.useRef(null),N=ve.useIsMobile(),P=re.useMemo(()=>e.flatMap(o=>o.data),[e]),fe=re.useMemo(()=>{if(e.length>0){const o=e[e.length-1];if(o.data.length>0)return o.data[o.data.length-1]}},[e]),[le,Q]=i.useState(()=>{if(!fe)return;const o=new Map;for(const r of e)r.data.length>0&&o.set(r.label,r.data[r.data.length-1]);return o}),[se,M]=i.useState(null);i.useEffect(()=>{const o=()=>{if(R.current&&F.current){const d=F.current.clientWidth,a=F.current.clientHeight;R.current.resize(d,a),R.current.timeScale().fitContent()}},r=F.current,l=r?new ResizeObserver(o):null;return r&&l?.observe(r),()=>{r&&l?.unobserve(r)}},[]),i.useEffect(()=>{if(!Z.current||$.current)return;const o=Y.getDefaultOptions(),r=G.resolveCSSColor("hsl(var(--foreground))","rgb(0, 0, 0)"),l=be.createChart(Z.current,{...o,rightPriceScale:{...o.rightPriceScale||{},visible:!N,textColor:r},...D});return R.current=l,$.current=!0,()=>{l.remove(),R.current=null,$.current=!1,S.current.clear()}},[N,D]),i.useEffect(()=>{const o=R.current;if(!o||e.length===0)return;const r=L==="time"?oe.getXFormatter(L,P):oe.getXFormatter(L),l=P.map(t=>t.value),{formatter:d,updateVisibleRange:a,updateLastValues:f}=oe.createAdaptiveYAxisFormatter(l);W.current=a,ue.current=f;const b=e.filter(t=>t.data.length>0).map(t=>t.data[t.data.length-1].value);f(b);const x=Y.getDefaultOptions();o.applyOptions({localization:{...x.localization||{},timeFormatter:r?(t=>r(parseFloat(t),void 0)):void 0},timeScale:{...x.timeScale||{},tickMarkFormatter:r?(t=>r(parseFloat(t),void 0)):void 0,minBarSpacing:0}});const j=(P.length>0?Math.min(...P.map(t=>t.value)):0)<0,y=P.some(t=>t.value===0),g=!j&&y,s=e.length>1,u=s||N,c=G.resolveCSSColor("hsl(var(--foreground))","rgb(0, 0, 0)");o.applyOptions({rightPriceScale:{...x.rightPriceScale||{},visible:!u,textColor:c,...g&&{scaleMargins:{top:.3,bottom:0}}}});const h=new Set(S.current.keys()),w=new Set(e.map(t=>t.label));for(const t of h)if(!w.has(t)){const n=S.current.get(t);n&&(o.removeSeries(n),S.current.delete(t))}const O=Y.getDefaultSeries(),z=[];let k=0;for(let t=0;t<e.length;t++){const n=e[t],ee=H[t%H.length],B=n.color||ee.line;let T,_;if(n.color)if(n.topColor&&n.bottomColor)T=n.topColor,_=n.bottomColor;else if(n.topColor){const C=G.generateColorsFromBase(B);T=n.topColor,_=C.bottomColor}else if(n.bottomColor)T=G.generateColorsFromBase(B).topColor,_=n.bottomColor;else{const C=G.generateColorsFromBase(B);T=C.topColor,_=C.bottomColor}else T=n.topColor||ee.top,_=n.bottomColor||ee.bottom;if(n.data.length===0){const C=S.current.get(n.label);C&&(o.removeSeries(C),S.current.delete(n.label));continue}const he=(n.data.length>0?Math.min(...n.data.map(C=>C.value)):0)<0,me=n.data.some(C=>C.value===0),pe=!he&&me,te=s?k===0?"right":`scale-${k}`:"right";s&&z.push({priceScaleId:te||"right",shouldPreventNegativeAxis:pe,seriesIndex:k});let E=S.current.get(n.label);E?(E.applyOptions({lineColor:B,topColor:T,bottomColor:_,priceScaleId:te,priceFormat:{type:"custom",formatter:d}}),E.setData(n.data)):(E=o.addAreaSeries({...O,lineColor:B,topColor:T,bottomColor:_,priceScaleId:te,priceFormat:{type:"custom",formatter:d}}),E.setData(n.data),S.current.set(n.label,E)),k++}if(s&&z.length>0)for(const t of z)try{const n=o.priceScale(t.priceScaleId);n&&n.applyOptions({visible:!1,autoScale:!0,scaleMargins:{top:.1,bottom:.1,...t.shouldPreventNegativeAxis&&{top:.3,bottom:0}},alignLabels:!0,borderVisible:!0,borderColor:"rgba(224, 227, 235, 0.1)",entireTextOnly:!1,textColor:c})}catch(n){console.warn(`Failed to configure price scale ${t.priceScaleId} for series ${t.seriesIndex}:`,n)}else if(!s)try{const t=o.priceScale("right");t&&t.applyOptions({visible:!N,autoScale:!0,scaleMargins:{top:.1,bottom:.1,...g&&{top:.3,bottom:0}},alignLabels:!0,borderVisible:!0,borderColor:"rgba(224, 227, 235, 0.1)",entireTextOnly:!1,textColor:c})}catch{}const K=new Set(e.map(t=>t.label)),ge=K.size!==X.current.size||[...K].some(t=>!X.current.has(t)),de=P.length!==ne.current;(ae.current||ge||de||N)&&(o.timeScale().fitContent(),ae.current=!1),X.current=K,ne.current=P.length;const U=new Map;for(const t of e)t.data.length>0&&U.set(t.label,t.data[t.data.length-1]);Q(U.size>0?U:void 0)},[e,P,L,q,N]),i.useEffect(()=>{const o=R.current;if(!o||e.length===0)return;const r=e.length===1;let l;for(const a of e)if(a.data.length>0){l=a.data[a.data.length-1].time;break}if(!l)return;const d=a=>{const{time:f=l,seriesData:b,point:x}=a||{},v=Array.from(S.current.values());if(!x||!f){const g=new Map;for(const s of e)s.data.length>0&&g.set(s.label,s.data[s.data.length-1]);if(Q(g.size>0?g:void 0),r)M(null);else if(v[0]&&l){const u=o.timeScale().timeToCoordinate(l),c=e[0];if(c.data.length>0){const h=c.data[c.data.length-1].value,w=v[0].priceToCoordinate(h);u!==null&&w!==null&&M({x:u,y:w})}}return}const j=new Map;let y;for(let g=0;g<e.length;g++){const s=e[g],u=v[g];if(!u)continue;const c=b?.get(u),h=c&&"value"in c?c.value:void 0,w=s.data[s.data.length-1],O=h!==void 0?h:w?.value??0;g===0&&(y=O),j.set(s.label,{value:O,time:f})}if(Q(j),y!==void 0&&v[0]){const s=o.timeScale().timeToCoordinate(f),u=v[0].priceToCoordinate(y);if(s!==null&&u!==null){const c=F.current;if(c){const h=c.querySelector(".LightweightChart");if(h){const w=h.getBoundingClientRect(),O=c.getBoundingClientRect(),z=s+(w.left-O.left),k=u+(w.top-O.top);M({x:z,y:k})}else M({x:s,y:u})}else M({x:s,y:u})}else M(null)}else M(null)};return o.subscribeCrosshairMove(d),r||requestAnimationFrame(()=>{const a=Array.from(S.current.values());if(a[0]&&l&&e[0]?.data.length>0){const b=o.timeScale().timeToCoordinate(l),x=e[0].data[e[0].data.length-1].value,v=a[0].priceToCoordinate(x);b!==null&&v!==null&&M({x:b,y:v})}}),()=>{o.unsubscribeCrosshairMove(d)}},[e]),i.useEffect(()=>{const o=R.current;if(!o||e.length===0)return;const r=o.timeScale(),l=Math.max(...e.map(a=>a.data.length)),d=()=>{if(l===0)return;const a=r.getVisibleLogicalRange();if(!a)return;const f={from:0,to:l-1},b=typeof a.from=="number"?a.from:0,x=typeof a.to=="number"?a.to:l-1;if(W.current){const g=Math.max(0,Math.floor(b)),s=Math.min(l-1,Math.ceil(x)),u=[];for(const c of e)for(let h=g;h<=s&&h<c.data.length;h++)u.push(c.data[h].value);u.length>0&&W.current(u)}const v=.01;let j=!1;const y={...a};b<f.from-v&&(y.from=f.from,j=!0),x>f.to+v&&(y.to=f.to,j=!0),j&&r.setVisibleLogicalRange(y)};return r.subscribeVisibleLogicalRangeChange(d),()=>{r.unsubscribeVisibleLogicalRangeChange(d)}},[e]),i.useEffect(()=>{const o=R.current,r=Array.from(S.current.values()),l=[];if(o&&r.length>0&&I){const d=Y.getDefaultVerticalLine(),a=r[0];for(const f of I){const b=new xe.VertLine(o,a,f.xCoordinate,{...d,...f.options||{}});a.attachPrimitive(b),l.push(b)}}return()=>{if(r.length>0){const d=r[0];for(const a of l)d.detachPrimitive(a)}}},[I]);const J=e.length===1,ie=re.useMemo(()=>{if(J&&e.length>0){const o=e[0];if(o.data.length>0)return o.data[o.data.length-1]}},[J,e]);return m.jsxs("div",{ref:F,className:ce.cn("relative z-[1] w-full h-full overflow-hidden p-0",V),children:[J&&ie&&m.jsx(Ce.GraphCurrentValue,{point:ie,xMeasureUnit:L,yMeasureUnit:q}),le&&se&&m.jsx(Se.GraphTooltip,{points:le,xMeasureUnit:L,yMeasureUnit:q,series:e,position:se,containerRef:F}),p&&m.jsx(we,{series:e,onUnselect:A}),m.jsx("div",{ref:Z,className:"LightweightChart w-full h-full overflow-hidden"})]})}function we({series:e,onUnselect:V}){return m.jsx("div",{className:"absolute top-0 left-2 z-[10] flex flex-wrap gap-2",children:e.map((p,A)=>{const L=H[A%H.length],q=p.color||L.line,D=p.data.length===0;return m.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",D&&"opacity-50"),children:[m.jsx("div",{className:"w-3 h-3 rounded-sm",style:{backgroundColor:q}}),m.jsxs("span",{className:"text-[10px] sm:text-xs font-medium text-foreground",children:[p.label,D&&" (no data)"]}),V&&m.jsx("button",{type:"button",onClick:I=>{I.stopPropagation(),V(p.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 ${p.label}`,children:m.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:[m.jsx("title",{children:"Close"}),m.jsx("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),m.jsx("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]})})]},p.label)})})}exports.DEFAULT_SERIES_COLORS=H;exports.Graph=ye;

package/dist/esm/components/graph/default-config.js

@@ -22,6 +22,7 @@ function i() {
       visible: !0
     },
     rightPriceScale: {
+      visible: !0,
       autoScale: !0,
       alignLabels: !0,
       borderVisible: !0,
@@ -87,6 +88,7 @@ const b = {
     visible: !0
   },
   rightPriceScale: {
+    visible: !0,
     autoScale: !0,
     alignLabels: !0,
     borderVisible: !0,

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

@@ -1,16 +1,16 @@
-import { jsxs as $, jsx as S } from "react/jsx-runtime";
+import { jsxs as Y, jsx as S } from "react/jsx-runtime";
 import { createChart as xt } from "lightweight-charts";
 import * as ot from "react";
-import { useRef as C, useState as ct, useEffect as D } from "react";
-import { useIsMobile as Rt } from "../../hooks/use-media-query.js";
+import { useRef as C, useState as ct, useEffect as O } from "react";
+import { useIsMobile as yt } from "../../hooks/use-media-query.js";
 import { cn as gt } from "../../utils/cn.js";
 import { resolveCSSColor as ut, generateColorsFromBase as rt } from "../../utils/colors.js";
-import { getDefaultOptions as ft, getDefaultSeries as wt, getDefaultVerticalLine as yt } from "./default-config.js";
+import { getDefaultOptions as ft, getDefaultSeries as Rt, getDefaultVerticalLine as wt } from "./default-config.js";
 import { getXFormatter as dt, createAdaptiveYAxisFormatter as Vt } from "./formatters.js";
 import { GraphCurrentValue as Lt } from "./graph-current-value.js";
 import { GraphTooltip as Pt } from "./graph-tooltip.js";
 import { VertLine as Mt } from "./plugins/vertical-line.js";
-const Y = [
+const $ = [
   {
     line: "#02c39a",
     top: "rgba(2, 195, 154, 0.56)",
@@ -53,41 +53,41 @@ const Y = [
   }
 ];
 function Ht({
-  series: t,
+  series: o,
   className: H,
-  showLegend: y = !1,
+  showLegend: w = !1,
   onUnselectSeries: q,
   xMeasureUnit: V = "time",
-  yMeasureUnit: O = "token",
+  yMeasureUnit: D = "token",
   optionsOverrides: E,
   verticalLineOptions: j
 }) {
   const x = C(null), b = C(/* @__PURE__ */ new Map()), W = C(!1), X = C(/* @__PURE__ */ new Set()), nt = C(0), at = C(!0), Z = C(
     null
-  ), mt = C(null), F = C(null), _ = C(null), T = Rt(), L = ot.useMemo(() => t.flatMap((e) => e.data), [t]), ht = ot.useMemo(() => {
-    if (t.length > 0) {
-      const e = t[t.length - 1];
+  ), mt = C(null), A = C(null), _ = C(null), k = yt(), L = ot.useMemo(() => o.flatMap((e) => e.data), [o]), ht = ot.useMemo(() => {
+    if (o.length > 0) {
+      const e = o[o.length - 1];
       if (e.data.length > 0)
         return e.data[e.data.length - 1];
     }
-  }, [t]), [lt, J] = ct(() => {
+  }, [o]), [lt, J] = ct(() => {
     if (!ht) return;
     const e = /* @__PURE__ */ new Map();
-    for (const r of t)
+    for (const r of o)
       r.data.length > 0 && e.set(r.label, r.data[r.data.length - 1]);
     return e;
   }), [it, P] = ct(null);
-  D(() => {
+  O(() => {
     const e = () => {
-      if (x.current && F.current) {
-        const f = F.current.clientWidth, a = F.current.clientHeight;
-        x.current.resize(f, a), x.current.timeScale().fitContent();
+      if (x.current && A.current) {
+        const d = A.current.clientWidth, a = A.current.clientHeight;
+        x.current.resize(d, a), x.current.timeScale().fitContent();
       }
-    }, r = F.current, l = r ? new ResizeObserver(e) : null;
+    }, r = A.current, l = r ? new ResizeObserver(e) : null;
     return r && l?.observe(r), () => {
       r && l?.unobserve(r);
     };
-  }, []), D(() => {
+  }, []), O(() => {
     if (!_.current || W.current) return;
     const e = ft(), r = ut(
       "hsl(var(--foreground))",
@@ -96,7 +96,7 @@ function Ht({
       ...e,
       rightPriceScale: {
         ...e.rightPriceScale || {},
-        visible: !T,
+        visible: !k,
         textColor: r
       },
       ...E
@@ -104,16 +104,16 @@ function Ht({
     return x.current = l, W.current = !0, () => {
       l.remove(), x.current = null, W.current = !1, b.current.clear();
     };
-  }, [T, E]), D(() => {
+  }, [k, E]), O(() => {
     const e = x.current;
-    if (!e || t.length === 0) return;
-    const r = V === "time" ? dt(V, L) : dt(V), l = L.map((o) => o.value), {
-      formatter: f,
+    if (!e || o.length === 0) return;
+    const r = V === "time" ? dt(V, L) : dt(V), l = L.map((t) => t.value), {
+      formatter: d,
       updateVisibleRange: a,
       updateLastValues: u
     } = Vt(l);
     Z.current = a, mt.current = u;
-    const m = t.filter((o) => o.data.length > 0).map((o) => o.data[o.data.length - 1].value);
+    const m = o.filter((t) => t.data.length > 0).map((t) => t.data[t.data.length - 1].value);
     u(m);
     const v = ft();
     e.applyOptions({
@@ -121,28 +121,28 @@ function Ht({
         ...v.localization || {},
         timeFormatter: r ? (
           // biome-ignore lint/suspicious/noExplicitAny: External library type compatibility
-          ((o) => r(parseFloat(o), void 0))
+          ((t) => r(parseFloat(t), void 0))
         ) : void 0
       },
       timeScale: {
         ...v.timeScale || {},
         tickMarkFormatter: r ? (
           // biome-ignore lint/suspicious/noExplicitAny: External library type compatibility
-          ((o) => r(parseFloat(o), void 0))
+          ((t) => r(parseFloat(t), void 0))
         ) : void 0,
         minBarSpacing: 0
       }
     });
-    const M = (L.length > 0 ? Math.min(...L.map((o) => o.value)) : 0) < 0, R = L.some((o) => o.value === 0), d = !M && R, i = t.length > 1, c = i || T, s = ut(
+    const M = (L.length > 0 ? Math.min(...L.map((t) => t.value)) : 0) < 0, y = L.some((t) => t.value === 0), f = !M && y, i = o.length > 1, c = i || k, s = ut(
       "hsl(var(--foreground))",
       "rgb(0, 0, 0)"
     );
     e.applyOptions({
       rightPriceScale: {
         ...v.rightPriceScale || {},
-        visible: !T,
+        visible: !c,
         textColor: s,
-        ...d && {
+        ...f && {
           scaleMargins: {
             top: 0.3,
             bottom: 0
@@ -150,37 +150,37 @@ function Ht({
         }
       }
     });
-    const g = new Set(b.current.keys()), w = new Set(t.map((o) => o.label));
-    for (const o of g)
-      if (!w.has(o)) {
-        const n = b.current.get(o);
-        n && (e.removeSeries(n), b.current.delete(o));
+    const g = new Set(b.current.keys()), R = new Set(o.map((t) => t.label));
+    for (const t of g)
+      if (!R.has(t)) {
+        const n = b.current.get(t);
+        n && (e.removeSeries(n), b.current.delete(t));
       }
-    const N = wt(), B = [];
+    const F = Rt(), B = [];
     let I = 0;
-    for (let o = 0; o < t.length; o++) {
-      const n = t[o], tt = Y[o % Y.length], G = n.color || tt.line;
-      let A, k;
+    for (let t = 0; t < o.length; t++) {
+      const n = o[t], tt = $[t % $.length], G = n.color || tt.line;
+      let N, T;
       if (n.color)
         if (n.topColor && n.bottomColor)
-          A = n.topColor, k = n.bottomColor;
+          N = n.topColor, T = n.bottomColor;
         else if (n.topColor) {
           const p = rt(G);
-          A = n.topColor, k = p.bottomColor;
+          N = n.topColor, T = p.bottomColor;
         } else if (n.bottomColor)
-          A = rt(G).topColor, k = n.bottomColor;
+          N = rt(G).topColor, T = n.bottomColor;
         else {
           const p = rt(G);
-          A = p.topColor, k = p.bottomColor;
+          N = p.topColor, T = p.bottomColor;
         }
       else
-        A = n.topColor || tt.top, k = n.bottomColor || tt.bottom;
+        N = n.topColor || tt.top, T = n.bottomColor || tt.bottom;
       if (n.data.length === 0) {
         const p = b.current.get(n.label);
         p && (e.removeSeries(p), b.current.delete(n.label));
         continue;
       }
-      const vt = (n.data.length > 0 ? Math.min(...n.data.map((p) => p.value)) : 0) < 0, Ct = n.data.some((p) => p.value === 0), St = !vt && Ct, et = i ? I === 0 ? void 0 : `scale-${I}` : void 0;
+      const vt = (n.data.length > 0 ? Math.min(...n.data.map((p) => p.value)) : 0) < 0, Ct = n.data.some((p) => p.value === 0), St = !vt && Ct, et = i ? I === 0 ? "right" : `scale-${I}` : "right";
       i && B.push({
         priceScaleId: et || "right",
         shouldPreventNegativeAxis: St,
@@ -189,36 +189,36 @@ function Ht({
       let z = b.current.get(n.label);
       z ? (z.applyOptions({
         lineColor: G,
-        topColor: A,
-        bottomColor: k,
+        topColor: N,
+        bottomColor: T,
         priceScaleId: et,
         priceFormat: {
           type: "custom",
-          formatter: f
+          formatter: d
         }
       }), z.setData(n.data)) : (z = e.addAreaSeries({
-        ...N,
+        ...F,
         lineColor: G,
-        topColor: A,
-        bottomColor: k,
+        topColor: N,
+        bottomColor: T,
         priceScaleId: et,
         priceFormat: {
           type: "custom",
-          formatter: f
+          formatter: d
         }
       }), z.setData(n.data), b.current.set(n.label, z)), I++;
     }
     if (i && B.length > 0)
-      for (const o of B)
+      for (const t of B)
         try {
-          const n = e.priceScale(o.priceScaleId);
+          const n = e.priceScale(t.priceScaleId);
           n && n.applyOptions({
-            visible: !c,
+            visible: !1,
             autoScale: !0,
             scaleMargins: {
               top: 0.1,
               bottom: 0.1,
-              ...o.shouldPreventNegativeAxis && {
+              ...t.shouldPreventNegativeAxis && {
                 top: 0.3,
                 bottom: 0
               }
@@ -231,62 +231,84 @@ function Ht({
           });
         } catch (n) {
           console.warn(
-            `Failed to configure price scale ${o.priceScaleId} for series ${o.seriesIndex}:`,
+            `Failed to configure price scale ${t.priceScaleId} for series ${t.seriesIndex}:`,
             n
           );
         }
-    const Q = new Set(t.map((o) => o.label)), pt = Q.size !== X.current.size || [...Q].some((o) => !X.current.has(o)), bt = L.length !== nt.current;
-    (at.current || pt || bt || T) && (e.timeScale().fitContent(), at.current = !1), X.current = Q, nt.current = L.length;
+    else if (!i)
+      try {
+        const t = e.priceScale("right");
+        t && t.applyOptions({
+          visible: !k,
+          autoScale: !0,
+          scaleMargins: {
+            top: 0.1,
+            bottom: 0.1,
+            ...f && {
+              top: 0.3,
+              bottom: 0
+            }
+          },
+          alignLabels: !0,
+          borderVisible: !0,
+          borderColor: "rgba(224, 227, 235, 0.1)",
+          entireTextOnly: !1,
+          textColor: s
+        });
+      } catch {
+      }
+    const Q = new Set(o.map((t) => t.label)), pt = Q.size !== X.current.size || [...Q].some((t) => !X.current.has(t)), bt = L.length !== nt.current;
+    (at.current || pt || bt || k) && (e.timeScale().fitContent(), at.current = !1), X.current = Q, nt.current = L.length;
     const U = /* @__PURE__ */ new Map();
-    for (const o of t)
-      o.data.length > 0 && U.set(o.label, o.data[o.data.length - 1]);
+    for (const t of o)
+      t.data.length > 0 && U.set(t.label, t.data[t.data.length - 1]);
     J(U.size > 0 ? U : void 0);
-  }, [t, L, V, O, T]), D(() => {
+  }, [o, L, V, D, k]), O(() => {
     const e = x.current;
-    if (!e || t.length === 0) return;
-    const r = t.length === 1;
+    if (!e || o.length === 0) return;
+    const r = o.length === 1;
     let l;
-    for (const a of t)
+    for (const a of o)
       if (a.data.length > 0) {
         l = a.data[a.data.length - 1].time;
         break;
       }
     if (!l) return;
-    const f = (a) => {
+    const d = (a) => {
       const { time: u = l, seriesData: m, point: v } = a || {}, h = Array.from(b.current.values());
       if (!v || !u) {
-        const d = /* @__PURE__ */ new Map();
-        for (const i of t)
-          i.data.length > 0 && d.set(i.label, i.data[i.data.length - 1]);
-        if (J(d.size > 0 ? d : void 0), r)
+        const f = /* @__PURE__ */ new Map();
+        for (const i of o)
+          i.data.length > 0 && f.set(i.label, i.data[i.data.length - 1]);
+        if (J(f.size > 0 ? f : void 0), r)
           P(null);
         else if (h[0] && l) {
-          const c = e.timeScale().timeToCoordinate(l), s = t[0];
+          const c = e.timeScale().timeToCoordinate(l), s = o[0];
           if (s.data.length > 0) {
-            const g = s.data[s.data.length - 1].value, w = h[0].priceToCoordinate(g);
-            c !== null && w !== null && P({ x: c, y: w });
+            const g = s.data[s.data.length - 1].value, R = h[0].priceToCoordinate(g);
+            c !== null && R !== null && P({ x: c, y: R });
           }
         }
         return;
       }
       const M = /* @__PURE__ */ new Map();
-      let R;
-      for (let d = 0; d < t.length; d++) {
-        const i = t[d], c = h[d];
+      let y;
+      for (let f = 0; f < o.length; f++) {
+        const i = o[f], c = h[f];
         if (!c) continue;
-        const s = m?.get(c), g = s && "value" in s ? s.value : void 0, w = i.data[i.data.length - 1], N = g !== void 0 ? g : w?.value ?? 0;
-        d === 0 && (R = N), M.set(i.label, { value: N, time: u });
+        const s = m?.get(c), g = s && "value" in s ? s.value : void 0, R = i.data[i.data.length - 1], F = g !== void 0 ? g : R?.value ?? 0;
+        f === 0 && (y = F), M.set(i.label, { value: F, time: u });
       }
-      if (J(M), R !== void 0 && h[0]) {
-        const i = e.timeScale().timeToCoordinate(u), c = h[0].priceToCoordinate(R);
+      if (J(M), y !== void 0 && h[0]) {
+        const i = e.timeScale().timeToCoordinate(u), c = h[0].priceToCoordinate(y);
         if (i !== null && c !== null) {
-          const s = F.current;
+          const s = A.current;
           if (s) {
             const g = s.querySelector(
               ".LightweightChart"
             );
             if (g) {
-              const w = g.getBoundingClientRect(), N = s.getBoundingClientRect(), B = i + (w.left - N.left), I = c + (w.top - N.top);
+              const R = g.getBoundingClientRect(), F = s.getBoundingClientRect(), B = i + (R.left - F.left), I = c + (R.top - F.top);
               P({ x: B, y: I });
             } else
               P({ x: i, y: c });
@@ -297,19 +319,19 @@ function Ht({
       } else
         P(null);
     };
-    return e.subscribeCrosshairMove(f), r || requestAnimationFrame(() => {
+    return e.subscribeCrosshairMove(d), r || requestAnimationFrame(() => {
       const a = Array.from(b.current.values());
-      if (a[0] && l && t[0]?.data.length > 0) {
-        const m = e.timeScale().timeToCoordinate(l), v = t[0].data[t[0].data.length - 1].value, h = a[0].priceToCoordinate(v);
+      if (a[0] && l && o[0]?.data.length > 0) {
+        const m = e.timeScale().timeToCoordinate(l), v = o[0].data[o[0].data.length - 1].value, h = a[0].priceToCoordinate(v);
         m !== null && h !== null && P({ x: m, y: h });
       }
     }), () => {
-      e.unsubscribeCrosshairMove(f);
+      e.unsubscribeCrosshairMove(d);
     };
-  }, [t]), D(() => {
+  }, [o]), O(() => {
     const e = x.current;
-    if (!e || t.length === 0) return;
-    const r = e.timeScale(), l = Math.max(...t.map((a) => a.data.length)), f = () => {
+    if (!e || o.length === 0) return;
+    const r = e.timeScale(), l = Math.max(...o.map((a) => a.data.length)), d = () => {
       if (l === 0) return;
       const a = r.getVisibleLogicalRange();
       if (!a) return;
@@ -318,29 +340,29 @@ function Ht({
         to: l - 1
       }, m = typeof a.from == "number" ? a.from : 0, v = typeof a.to == "number" ? a.to : l - 1;
       if (Z.current) {
-        const d = Math.max(0, Math.floor(m)), i = Math.min(l - 1, Math.ceil(v)), c = [];
-        for (const s of t)
-          for (let g = d; g <= i && g < s.data.length; g++)
+        const f = Math.max(0, Math.floor(m)), i = Math.min(l - 1, Math.ceil(v)), c = [];
+        for (const s of o)
+          for (let g = f; g <= i && g < s.data.length; g++)
             c.push(s.data[g].value);
         c.length > 0 && Z.current(c);
       }
       const h = 0.01;
       let M = !1;
-      const R = { ...a };
-      m < u.from - h && (R.from = u.from, M = !0), v > u.to + h && (R.to = u.to, M = !0), M && r.setVisibleLogicalRange(R);
+      const y = { ...a };
+      m < u.from - h && (y.from = u.from, M = !0), v > u.to + h && (y.to = u.to, M = !0), M && r.setVisibleLogicalRange(y);
     };
-    return r.subscribeVisibleLogicalRangeChange(f), () => {
+    return r.subscribeVisibleLogicalRangeChange(d), () => {
       r.unsubscribeVisibleLogicalRangeChange(
-        f
+        d
       );
     };
-  }, [t]), D(() => {
+  }, [o]), O(() => {
     const e = x.current, r = Array.from(b.current.values()), l = [];
     if (e && r.length > 0 && j) {
-      const f = yt(), a = r[0];
+      const d = wt(), a = r[0];
       for (const u of j) {
         const m = new Mt(e, a, u.xCoordinate, {
-          ...f,
+          ...d,
           ...u.options || {}
         });
         a.attachPrimitive(m), l.push(m);
@@ -348,23 +370,23 @@ function Ht({
     }
     return () => {
       if (r.length > 0) {
-        const f = r[0];
+        const d = r[0];
         for (const a of l)
-          f.detachPrimitive(a);
+          d.detachPrimitive(a);
       }
     };
   }, [j]);
-  const K = t.length === 1, st = ot.useMemo(() => {
-    if (K && t.length > 0) {
-      const e = t[0];
+  const K = o.length === 1, st = ot.useMemo(() => {
+    if (K && o.length > 0) {
+      const e = o[0];
       if (e.data.length > 0)
         return e.data[e.data.length - 1];
     }
-  }, [K, t]);
-  return /* @__PURE__ */ $(
+  }, [K, o]);
+  return /* @__PURE__ */ Y(
     "div",
     {
-      ref: F,
+      ref: A,
       className: gt(
         "relative z-[1] w-full h-full overflow-hidden p-0",
         H
@@ -375,7 +397,7 @@ function Ht({
           {
             point: st,
             xMeasureUnit: V,
-            yMeasureUnit: O
+            yMeasureUnit: D
           }
         ),
         lt && it && /* @__PURE__ */ S(
@@ -383,13 +405,13 @@ function Ht({
           {
             points: lt,
             xMeasureUnit: V,
-            yMeasureUnit: O,
-            series: t,
+            yMeasureUnit: D,
+            series: o,
             position: it,
-            containerRef: F
+            containerRef: A
           }
         ),
-        y && /* @__PURE__ */ S(Ft, { series: t, onUnselect: q }),
+        w && /* @__PURE__ */ S(At, { series: o, onUnselect: q }),
         /* @__PURE__ */ S(
           "div",
           {
@@ -401,13 +423,13 @@ function Ht({
     }
   );
 }
-function Ft({
-  series: t,
+function At({
+  series: o,
   onUnselect: H
 }) {
-  return /* @__PURE__ */ S("div", { className: "absolute top-0 left-2 z-[10] flex flex-wrap gap-2", children: t.map((y, q) => {
-    const V = Y[q % Y.length], O = y.color || V.line, E = y.data.length === 0;
-    return /* @__PURE__ */ $(
+  return /* @__PURE__ */ S("div", { className: "absolute top-0 left-2 z-[10] flex flex-wrap gap-2", children: o.map((w, q) => {
+    const V = $[q % $.length], D = w.color || V.line, E = w.data.length === 0;
+    return /* @__PURE__ */ Y(
       "div",
       {
         className: gt(
@@ -419,11 +441,11 @@ function Ft({
             "div",
             {
               className: "w-3 h-3 rounded-sm",
-              style: { backgroundColor: O }
+              style: { backgroundColor: D }
             }
           ),
-          /* @__PURE__ */ $("span", { className: "text-[10px] sm:text-xs font-medium text-foreground", children: [
-            y.label,
+          /* @__PURE__ */ Y("span", { className: "text-[10px] sm:text-xs font-medium text-foreground", children: [
+            w.label,
             E && " (no data)"
           ] }),
           H && /* @__PURE__ */ S(
@@ -431,11 +453,11 @@ function Ft({
             {
               type: "button",
               onClick: (j) => {
-                j.stopPropagation(), H(y.label);
+                j.stopPropagation(), H(w.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 ${y.label}`,
-              children: /* @__PURE__ */ $(
+              "aria-label": `Remove ${w.label}`,
+              children: /* @__PURE__ */ Y(
                 "svg",
                 {
                   xmlns: "http://www.w3.org/2000/svg",
@@ -460,11 +482,11 @@ function Ft({
           )
         ]
       },
-      y.label
+      w.label
     );
   }) });
 }
 export {
-  Y as DEFAULT_SERIES_COLORS,
+  $ as DEFAULT_SERIES_COLORS,
   Ht as Graph
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gearbox-protocol/permissionless-ui",
-  "version": "1.17.7",
+  "version": "1.17.8",
   "description": "Internal UI components",
   "license": "MIT",
   "main": "./dist/cjs/index.js",