viainti-chart 1.0.3 → 1.0.6

package/dist/index.cjs

@@ -140,8 +140,20 @@ function BsArrowRepeat (props) {
   return GenIcon({"attr":{"fill":"currentColor","viewBox":"0 0 16 16"},"child":[{"tag":"path","attr":{"d":"M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8"},"child":[]}]})(props);
 }function BsDiagram3 (props) {
   return GenIcon({"attr":{"fill":"currentColor","viewBox":"0 0 16 16"},"child":[{"tag":"path","attr":{"fillRule":"evenodd","d":"M6 3.5A1.5 1.5 0 0 1 7.5 2h1A1.5 1.5 0 0 1 10 3.5v1A1.5 1.5 0 0 1 8.5 6v1H14a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0v-1A.5.5 0 0 1 2 7h5.5V6A1.5 1.5 0 0 1 6 4.5zM8.5 5a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5zM0 11.5A1.5 1.5 0 0 1 1.5 10h1A1.5 1.5 0 0 1 4 11.5v1A1.5 1.5 0 0 1 2.5 14h-1A1.5 1.5 0 0 1 0 12.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm4.5.5A1.5 1.5 0 0 1 7.5 10h1a1.5 1.5 0 0 1 1.5 1.5v1A1.5 1.5 0 0 1 8.5 14h-1A1.5 1.5 0 0 1 6 12.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm4.5.5a1.5 1.5 0 0 1 1.5-1.5h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1a1.5 1.5 0 0 1-1.5-1.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5z"},"child":[]}]})(props);
+}function BsEmojiAngry (props) {
+  return GenIcon({"attr":{"fill":"currentColor","viewBox":"0 0 16 16"},"child":[{"tag":"path","attr":{"d":"M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"},"child":[]},{"tag":"path","attr":{"d":"M4.285 12.433a.5.5 0 0 0 .683-.183A3.5 3.5 0 0 1 8 10.5c1.295 0 2.426.703 3.032 1.75a.5.5 0 0 0 .866-.5A4.5 4.5 0 0 0 8 9.5a4.5 4.5 0 0 0-3.898 2.25.5.5 0 0 0 .183.683m6.991-8.38a.5.5 0 1 1 .448.894l-1.009.504c.176.27.285.64.285 1.049 0 .828-.448 1.5-1 1.5s-1-.672-1-1.5c0-.247.04-.48.11-.686a.502.502 0 0 1 .166-.761zm-6.552 0a.5.5 0 0 0-.448.894l1.009.504A1.94 1.94 0 0 0 5 6.5C5 7.328 5.448 8 6 8s1-.672 1-1.5c0-.247-.04-.48-.11-.686a.502.502 0 0 0-.166-.761z"},"child":[]}]})(props);
+}function BsEmojiDizzy (props) {
+  return GenIcon({"attr":{"fill":"currentColor","viewBox":"0 0 16 16"},"child":[{"tag":"path","attr":{"d":"M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"},"child":[]},{"tag":"path","attr":{"d":"M9.146 5.146a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708.708l-.647.646.647.646a.5.5 0 0 1-.708.708l-.646-.647-.646.647a.5.5 0 1 1-.708-.708l.647-.646-.647-.646a.5.5 0 0 1 0-.708m-5 0a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 1 1 .708.708l-.647.646.647.646a.5.5 0 1 1-.708.708L5.5 7.207l-.646.647a.5.5 0 1 1-.708-.708l.647-.646-.647-.646a.5.5 0 0 1 0-.708M10 11a2 2 0 1 1-4 0 2 2 0 0 1 4 0"},"child":[]}]})(props);
+}function BsEmojiHeartEyes (props) {
+  return GenIcon({"attr":{"fill":"currentColor","viewBox":"0 0 16 16"},"child":[{"tag":"path","attr":{"d":"M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"},"child":[]},{"tag":"path","attr":{"d":"M11.315 10.014a.5.5 0 0 1 .548.736A4.5 4.5 0 0 1 7.965 13a4.5 4.5 0 0 1-3.898-2.25.5.5 0 0 1 .548-.736h.005l.017.005.067.015.252.055c.215.046.515.108.857.169.693.124 1.522.242 2.152.242s1.46-.118 2.152-.242a27 27 0 0 0 1.109-.224l.067-.015.017-.004.005-.002zM4.756 4.566c.763-1.424 4.02-.12.952 3.434-4.496-1.596-2.35-4.298-.952-3.434m6.488 0c1.398-.864 3.544 1.838-.952 3.434-3.067-3.554.19-4.858.952-3.434"},"child":[]}]})(props);
+}function BsEmojiLaughing (props) {
+  return GenIcon({"attr":{"fill":"currentColor","viewBox":"0 0 16 16"},"child":[{"tag":"path","attr":{"d":"M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"},"child":[]},{"tag":"path","attr":{"d":"M12.331 9.5a1 1 0 0 1 0 1A5 5 0 0 1 8 13a5 5 0 0 1-4.33-2.5A1 1 0 0 1 4.535 9h6.93a1 1 0 0 1 .866.5M7 6.5c0 .828-.448 0-1 0s-1 .828-1 0S5.448 5 6 5s1 .672 1 1.5m4 0c0 .828-.448 0-1 0s-1 .828-1 0S9.448 5 10 5s1 .672 1 1.5"},"child":[]}]})(props);
+}function BsEmojiNeutral (props) {
+  return GenIcon({"attr":{"fill":"currentColor","viewBox":"0 0 16 16"},"child":[{"tag":"path","attr":{"d":"M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"},"child":[]},{"tag":"path","attr":{"d":"M4 10.5a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 0-1h-7a.5.5 0 0 0-.5.5m3-4C7 5.672 6.552 5 6 5s-1 .672-1 1.5S5.448 8 6 8s1-.672 1-1.5m4 0c0-.828-.448-1.5-1-1.5s-1 .672-1 1.5S9.448 8 10 8s1-.672 1-1.5"},"child":[]}]})(props);
 }function BsEmojiSmile (props) {
   return GenIcon({"attr":{"fill":"currentColor","viewBox":"0 0 16 16"},"child":[{"tag":"path","attr":{"d":"M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"},"child":[]},{"tag":"path","attr":{"d":"M4.285 9.567a.5.5 0 0 1 .683.183A3.5 3.5 0 0 0 8 11.5a3.5 3.5 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.5 4.5 0 0 1 8 12.5a4.5 4.5 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683M7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5m4 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5"},"child":[]}]})(props);
+}function BsEmojiSunglasses (props) {
+  return GenIcon({"attr":{"fill":"currentColor","viewBox":"0 0 16 16"},"child":[{"tag":"path","attr":{"d":"M4.968 9.75a.5.5 0 1 0-.866.5A4.5 4.5 0 0 0 8 12.5a4.5 4.5 0 0 0 3.898-2.25.5.5 0 1 0-.866-.5A3.5 3.5 0 0 1 8 11.5a3.5 3.5 0 0 1-3.032-1.75M7 5.116V5a1 1 0 0 0-1-1H3.28a1 1 0 0 0-.97 1.243l.311 1.242A2 2 0 0 0 4.561 8H5a2 2 0 0 0 1.994-1.839A3 3 0 0 1 8 6c.393 0 .74.064 1.006.161A2 2 0 0 0 11 8h.438a2 2 0 0 0 1.94-1.515l.311-1.242A1 1 0 0 0 12.72 4H10a1 1 0 0 0-1 1v.116A4.2 4.2 0 0 0 8 5c-.35 0-.69.04-1 .116"},"child":[]},{"tag":"path","attr":{"d":"M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-1 0A7 7 0 1 0 1 8a7 7 0 0 0 14 0"},"child":[]}]})(props);
 }function BsEyeSlash (props) {
   return GenIcon({"attr":{"fill":"currentColor","viewBox":"0 0 16 16"},"child":[{"tag":"path","attr":{"d":"M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7 7 0 0 0-2.79.588l.77.771A6 6 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755q-.247.248-.517.486z"},"child":[]},{"tag":"path","attr":{"d":"M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829"},"child":[]},{"tag":"path","attr":{"d":"M3.35 5.47q-.27.24-.518.487A13 13 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7 7 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12z"},"child":[]}]})(props);
 }function BsGear (props) {
@@ -843,7 +855,7 @@ function createStore(creator) {
 const useChartStore = createStore((set) => ({
     data: [],
     visibleData: [],
-    timeframe: '1h',
+    timeframe: '12h',
     zoomLevel: 1,
     panOffset: 0,
     indicators: [],
@@ -922,7 +934,6 @@ const useChartStore = createStore((set) => ({
     toggleDrawingsHidden: () => set((state) => ({ drawingsHidden: !state.drawingsHidden }))
 }));
 
-const EMOJIS = ['⭐', '🔥', '🚀', '✅', '❌', '💎', '🐂', '🐻', '📈', '📉'];
 const cursorOptions = [
     { type: 'cross', icon: React.createElement(BsCursor, null), label: 'Cross' },
     { type: 'dot', icon: React.createElement("div", { style: { width: '6px', height: '6px', borderRadius: '50%', background: 'currentColor' } }), label: 'Dot' },
@@ -962,6 +973,15 @@ const measurementOptions = [
     { tool: 'fibonacci', icon: React.createElement(BsGraphUp, null), label: 'Fibonacci' },
     { tool: 'ruler', icon: React.createElement(BsGraphDown, null), label: 'Regla' }
 ];
+const emojiOptions = [
+    { label: 'Smile', icon: React.createElement(BsEmojiSmile, null), value: '🙂' },
+    { label: 'Laugh', icon: React.createElement(BsEmojiLaughing, null), value: '😂' },
+    { label: 'Heart Eyes', icon: React.createElement(BsEmojiHeartEyes, null), value: '😍' },
+    { label: 'Sunglasses', icon: React.createElement(BsEmojiSunglasses, null), value: '😎' },
+    { label: 'Dizzy', icon: React.createElement(BsEmojiDizzy, null), value: '😵' },
+    { label: 'Neutral', icon: React.createElement(BsEmojiNeutral, null), value: '😐' },
+    { label: 'Angry', icon: React.createElement(BsEmojiAngry, null), value: '😠' }
+];
 const popoverStyle = {
     position: 'absolute',
     left: '64px',
@@ -980,6 +1000,15 @@ const DrawingToolbar = () => {
     const { activeTool, cursorType, strokeColor, strokeWidth, setActiveTool, setCursorType, setStrokeColor, setStrokeWidth, clearDrawings, setSelectedEmoji, setIsDrawing } = useChartStore();
     const [openMenu, setOpenMenu] = React.useState(null);
     const [showEmojiPicker, setShowEmojiPicker] = React.useState(false);
+    const [isCompact, setIsCompact] = React.useState(false);
+    React.useEffect(() => {
+        const handleResize = () => {
+            setIsCompact(window.innerWidth < 768);
+        };
+        handleResize();
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
     const LINE_COLORS = ['#8ab4ff', '#f472b6', '#34d399', '#facc15', '#f87171', '#e2e8f0'];
     const WIDTH_OPTIONS = [1, 1.5, 2.5, 3.5];
     const handleSelectTool = (tool) => {
@@ -1075,14 +1104,27 @@ const DrawingToolbar = () => {
             title: 'Limpiar todo'
         }
     ];
-    return (React.createElement("div", { style: { position: 'relative', height: '100%' } },
+    const filteredButtons = isCompact
+        ? buttonConfig.filter(btn => !['pitchforks', 'measurements'].includes(btn.key))
+        : buttonConfig;
+    const buildPopoverStyle = (custom) => ({
+        ...popoverStyle,
+        ...(isCompact
+            ? { left: '0px', top: 'calc(100% + 12px)', transform: 'none', width: 'min(360px, 92vw)' }
+            : {}),
+        ...custom
+    });
+    return (React.createElement("div", { style: { position: 'relative', height: '100%', width: '100%' } },
         React.createElement("div", { style: {
-                height: '100%',
+                height: isCompact ? 'auto' : '100%',
+                width: '100%',
                 display: 'flex',
-                flexDirection: 'column',
+                flexDirection: isCompact ? 'row' : 'column',
                 alignItems: 'center',
-                gap: '12px'
-            } }, buttonConfig.map((btn) => (React.createElement("div", { key: btn.key, style: { position: 'relative' } },
+                gap: '12px',
+                overflowX: isCompact ? 'auto' : 'visible',
+                padding: isCompact ? '12px 6px' : 0
+            } }, filteredButtons.map((btn) => (React.createElement("div", { key: btn.key, style: { position: 'relative' } },
             React.createElement("button", { onClick: btn.onClick, title: btn.title, "aria-label": btn.title, style: {
                     width: '46px',
                     height: '46px',
@@ -1097,7 +1139,7 @@ const DrawingToolbar = () => {
                     fontSize: '18px',
                     transition: 'all 0.2s'
                 } }, btn.icon),
-            btn.key === 'cursor' && openMenu === 'cursor' && (React.createElement("div", { style: { ...popoverStyle, gridTemplateColumns: 'repeat(2, 1fr)', width: '200px' } }, cursorOptions.map(option => (React.createElement("button", { key: option.type, onClick: () => handleCursorSelect(option.type), style: {
+            btn.key === 'cursor' && openMenu === 'cursor' && (React.createElement("div", { style: buildPopoverStyle({ gridTemplateColumns: 'repeat(2, 1fr)', width: isCompact ? 'min(320px, 92vw)' : '200px' }) }, cursorOptions.map(option => (React.createElement("button", { key: option.type, onClick: () => handleCursorSelect(option.type), style: {
                     width: '84px',
                     height: '60px',
                     borderRadius: '12px',
@@ -1113,7 +1155,7 @@ const DrawingToolbar = () => {
                 }, title: option.label },
                 React.createElement("span", { style: { fontSize: '18px', display: 'flex', alignItems: 'center', justifyContent: 'center' } }, option.icon),
                 React.createElement("span", { style: { fontSize: '10px', letterSpacing: '0.08em', textTransform: 'uppercase' } }, option.label)))))),
-            btn.key === 'lines' && openMenu === 'lines' && (React.createElement("div", { style: { ...popoverStyle, width: '280px' } },
+            btn.key === 'lines' && openMenu === 'lines' && (React.createElement("div", { style: buildPopoverStyle({ width: isCompact ? 'min(360px, 92vw)' : '280px' }) },
                 React.createElement("p", { style: { margin: 0, fontSize: '11px', letterSpacing: '0.08em', textTransform: 'uppercase', color: '#94a3b8' } }, "Lines"),
                 React.createElement("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: '8px' } }, lineOptions.map(option => (React.createElement("button", { key: option.tool, onClick: () => handleSelectTool(option.tool), style: {
                         borderRadius: '12px',
@@ -1153,7 +1195,7 @@ const DrawingToolbar = () => {
                         } },
                         width,
                         "px"))))))),
-            btn.key === 'shapes' && openMenu === 'shapes' && (React.createElement("div", { style: { ...popoverStyle, width: '200px' } },
+            btn.key === 'shapes' && openMenu === 'shapes' && (React.createElement("div", { style: buildPopoverStyle({ width: isCompact ? 'min(320px, 92vw)' : '200px' }) },
                 React.createElement("p", { style: { margin: 0, fontSize: '11px', letterSpacing: '0.08em', textTransform: 'uppercase', color: '#94a3b8' } }, "Shapes"),
                 React.createElement("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: '8px' } }, shapeOptions.map(option => (React.createElement("button", { key: option.tool, onClick: () => handleSelectTool(option.tool), style: {
                         borderRadius: '12px',
@@ -1170,7 +1212,7 @@ const DrawingToolbar = () => {
                     }, title: option.label },
                     React.createElement("span", { style: { fontSize: '16px' } }, option.icon),
                     React.createElement("span", { style: { fontSize: '10px', textTransform: 'uppercase', letterSpacing: '0.08em' } }, option.label))))))),
-            btn.key === 'channels' && openMenu === 'channels' && (React.createElement("div", { style: { ...popoverStyle, width: '220px' } },
+            btn.key === 'channels' && openMenu === 'channels' && (React.createElement("div", { style: buildPopoverStyle({ width: isCompact ? 'min(340px, 92vw)' : '220px' }) },
                 React.createElement("p", { style: { margin: 0, fontSize: '11px', letterSpacing: '0.08em', textTransform: 'uppercase', color: '#94a3b8' } }, "Channels"),
                 React.createElement("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: '8px' } }, channelOptions.map(option => (React.createElement("button", { key: option.tool, onClick: () => handleSelectTool(option.tool), style: {
                         borderRadius: '12px',
@@ -1187,7 +1229,7 @@ const DrawingToolbar = () => {
                     }, title: option.label },
                     React.createElement("span", { style: { fontSize: '16px' } }, option.icon),
                     React.createElement("span", { style: { fontSize: '10px', textTransform: 'uppercase', letterSpacing: '0.08em' } }, option.label))))))),
-            btn.key === 'pitchforks' && openMenu === 'pitchforks' && (React.createElement("div", { style: { ...popoverStyle, width: '200px' } },
+            btn.key === 'pitchforks' && openMenu === 'pitchforks' && (React.createElement("div", { style: buildPopoverStyle({ width: isCompact ? 'min(320px, 92vw)' : '200px' }) },
                 React.createElement("p", { style: { margin: 0, fontSize: '11px', letterSpacing: '0.08em', textTransform: 'uppercase', color: '#94a3b8' } }, "Pitchforks"),
                 React.createElement("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: '8px' } }, pitchforkOptions.map(option => (React.createElement("button", { key: option.tool, onClick: () => handleSelectTool(option.tool), style: {
                         borderRadius: '12px',
@@ -1204,7 +1246,7 @@ const DrawingToolbar = () => {
                     }, title: option.label },
                     React.createElement("span", { style: { fontSize: '16px' } }, option.icon),
                     React.createElement("span", { style: { fontSize: '10px', textTransform: 'uppercase', letterSpacing: '0.08em', textAlign: 'center' } }, option.label))))))),
-            btn.key === 'measurements' && openMenu === 'measurements' && (React.createElement("div", { style: { ...popoverStyle, gridTemplateColumns: 'repeat(2, 1fr)', width: '160px' } }, measurementOptions.map(option => (React.createElement("button", { key: option.tool, onClick: () => handleSelectTool(option.tool), style: {
+            btn.key === 'measurements' && openMenu === 'measurements' && (React.createElement("div", { style: buildPopoverStyle({ gridTemplateColumns: 'repeat(2, 1fr)', width: isCompact ? 'min(280px, 80vw)' : '160px' }) }, measurementOptions.map(option => (React.createElement("button", { key: option.tool, onClick: () => handleSelectTool(option.tool), style: {
                     width: '64px',
                     height: '54px',
                     borderRadius: '12px',
@@ -1221,41 +1263,24 @@ const DrawingToolbar = () => {
                 }, title: option.label },
                 React.createElement("span", { style: { fontSize: '16px' } }, option.icon),
                 React.createElement("span", null, option.label)))))),
-            btn.key === 'emoji' && showEmojiPicker && (React.createElement("div", { style: {
-                    position: 'absolute',
-                    left: '64px',
-                    top: '50%',
-                    transform: 'translateY(-50%)',
-                    zIndex: 1100,
-                    background: '#020617',
-                    borderRadius: '14px',
-                    overflow: 'hidden',
-                    boxShadow: '0 18px 40px rgba(0,0,0,0.65)',
-                    padding: '10px',
-                    border: '1px solid #1f2937'
-                } },
-                React.createElement("div", { style: {
-                        display: 'grid',
-                        gridTemplateColumns: 'repeat(3, 1fr)',
-                        gap: '6px'
-                    } }, EMOJIS.map((emoji) => (React.createElement("button", { key: emoji, onClick: () => {
-                        setSelectedEmoji(emoji);
+            btn.key === 'emoji' && showEmojiPicker && (React.createElement("div", { style: buildPopoverStyle({ width: isCompact ? 'min(320px, 92vw)' : '220px' }) },
+                React.createElement("p", { style: { margin: '0 0 6px', fontSize: '10px', letterSpacing: '0.08em', textTransform: 'uppercase', color: '#94a3b8' } }, "Emojis"),
+                React.createElement("div", { style: { display: 'grid', gridTemplateColumns: isCompact ? 'repeat(4, minmax(0, 1fr))' : 'repeat(3, minmax(0, 1fr))', gap: '8px' } }, emojiOptions.map(option => (React.createElement("button", { key: option.label, onClick: () => {
+                        setSelectedEmoji(option.value);
                         setActiveTool('icon');
                         setShowEmojiPicker(false);
                     }, style: {
-                        width: '40px',
-                        height: '40px',
-                        background: '#111827',
+                        height: '48px',
+                        borderRadius: '12px',
                         border: '1px solid #1f2937',
-                        borderRadius: '10px',
-                        cursor: 'pointer',
+                        background: 'rgba(2,6,23,0.65)',
+                        color: '#f8fafc',
                         display: 'flex',
                         alignItems: 'center',
                         justifyContent: 'center',
-                        fontSize: '18px',
-                        color: '#f8fafc'
-                    } },
-                    React.createElement("span", null, emoji)))))))))))));
+                        fontSize: '22px',
+                        cursor: 'pointer'
+                    }, title: option.label, "aria-label": option.label }, option.icon))))))))))));
 };
 
 const drawRoundedRect = (ctx, x, y, width, height, radius = 8) => {
@@ -1992,23 +2017,23 @@ const LINE_TOOL_TYPES = [
 const LINE_TOOL_SET = new Set(LINE_TOOL_TYPES);
 const THEME_PRESETS = {
     dark: {
-        pageBg: '#050910',
-        heroFrom: '#111827',
-        heroTo: '#0b1120',
-        panelBg: 'rgba(15,23,42,0.9)',
-        panelBorder: '#1f2937',
-        cardBg: 'rgba(15,23,42,0.85)',
-        cardBorder: '#111827',
+        pageBg: '#000000',
+        heroFrom: '#050505',
+        heroTo: '#000000',
+        panelBg: 'rgba(0,0,0,0.92)',
+        panelBorder: '#0f0f0f',
+        cardBg: 'rgba(0,0,0,0.88)',
+        cardBorder: '#050505',
         textPrimary: '#f8fafc',
-        textSecondary: '#94a3b8',
+        textSecondary: '#9ca3af',
         accent: '#2563eb',
-        accentSoft: 'rgba(37,99,235,0.2)',
-        railBg: 'rgba(2,6,23,0.85)',
-        railBorder: '#111827',
-        plotBg: '#020617',
-        plotBorder: '#111827',
-        scaleBg: 'rgba(15,23,42,0.9)',
-        overlayBg: 'rgba(5,7,15,0.85)'
+        accentSoft: 'rgba(37,99,235,0.25)',
+        railBg: 'rgba(0,0,0,0.9)',
+        railBorder: '#080808',
+        plotBg: '#010101',
+        plotBorder: '#0d0d0d',
+        scaleBg: 'rgba(0,0,0,0.92)',
+        overlayBg: 'rgba(0,0,0,0.85)'
     },
     blue: {
         pageBg: '#060e1f',
@@ -2060,6 +2085,10 @@ const CUSTOM_THEME_FIELDS = [
 const MIN_CANDLE_PX = 4;
 const MAX_CANDLE_PX = 28;
 const BUFFER_FRACTION = 0.18;
+const LEFT_OFFSET_BARS = 2;
+const RIGHT_OFFSET_BARS = 18;
+const BAR_BODY_RATIO = 0.78;
+const GRID_DIVISIONS = 10;
 const INERTIA_DURATION_MS = 900;
 const ZOOM_MIN = 0.2;
 const ZOOM_MAX = 6;
@@ -2067,6 +2096,42 @@ const easeOutQuad = (t) => 1 - (1 - t) * (1 - t);
 const easeInOutCubic = (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
 const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
 const alignStroke = (value) => Math.round(value) + 0.5;
+const determinePriceFormat = (reference) => {
+    const value = Math.abs(reference);
+    if (!Number.isFinite(value) || value === 0)
+        return { min: 2, max: 6 };
+    if (value < 0.0001)
+        return { min: 6, max: 8 };
+    if (value < 0.001)
+        return { min: 5, max: 7 };
+    if (value < 0.01)
+        return { min: 4, max: 6 };
+    if (value < 0.1)
+        return { min: 4, max: 5 };
+    if (value < 1)
+        return { min: 3, max: 4 };
+    if (value < 100)
+        return { min: 2, max: 3 };
+    return { min: 2, max: 2 };
+};
+const getEffectiveBarCount = (count) => Math.max(count + LEFT_OFFSET_BARS + RIGHT_OFFSET_BARS, 1);
+const getCandleStep = (width, count) => (width <= 0 ? 0 : width / getEffectiveBarCount(count));
+const getCandleCenter = (index, width, count) => {
+    const step = getCandleStep(width, count);
+    return (index + LEFT_OFFSET_BARS + 0.5) * step;
+};
+const clampPixelToChart = (pixel, width) => Math.max(0, Math.min(width, pixel));
+const pixelToCandleIndex = (pixel, width, count) => {
+    const step = getCandleStep(width, count);
+    if (step === 0)
+        return 0;
+    return pixel / step - LEFT_OFFSET_BARS - 0.5;
+};
+const clampCandleIndex = (value, length) => {
+    if (length <= 0)
+        return 0;
+    return clamp(Math.round(value), 0, Math.max(length - 1, 0));
+};
 const createParallelPoints = (start, end, offset) => {
     const dx = end.x - start.x;
     const dy = end.y - start.y;
@@ -2156,7 +2221,7 @@ const computeVisibleWindow = (dataset, chartWidth, timeframe, zoomLevel, panOffs
         }
     };
 };
-const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange, showStats = true, showHeaderStats = true }) => {
+const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange, showStats = true, showHeaderStats = true, showDrawingToolbar = true }) => {
     const chartRef = React.useRef(null);
     const volumeRef = React.useRef(null);
     const gridRef = React.useRef(null);
@@ -2295,7 +2360,7 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange, showSt
         if (!chartWidth)
             return;
         const candles = getVisibleCandles();
-        const pxPerCandle = chartWidth / Math.max(candles.length || 1, 1);
+        const pxPerCandle = chartWidth / Math.max(getEffectiveBarCount(candles.length || 1), 1);
         if (!isFinite(pxPerCandle) || pxPerCandle === 0)
             return;
         const deltaOffset = deltaPx / Math.max(pxPerCandle, 1e-3);
@@ -2419,6 +2484,7 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange, showSt
     const [priceLabels, setPriceLabels] = React.useState([]);
     const [timeLabels, setTimeLabels] = React.useState([]);
     const [clickedPrice, setClickedPrice] = React.useState(null);
+    const [crosshairMeta, setCrosshairMeta] = React.useState(null);
     const [showConfigPanel, setShowConfigPanel] = React.useState(false);
     const [language, setLanguage] = React.useState('en');
     const [colorScheme, setColorScheme] = React.useState('green');
@@ -2449,6 +2515,7 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange, showSt
     const [showNoteModal, setShowNoteModal] = React.useState(false);
     const [pendingNotePoint, setPendingNotePoint] = React.useState(null);
     const [noteDraft, setNoteDraft] = React.useState('');
+    const [priceFormat, setPriceFormat] = React.useState({ min: 2, max: 4 });
     const [isMobile, setIsMobile] = React.useState(false);
     React.useEffect(() => {
         if (!plotAreaRef.current)
@@ -2471,7 +2538,7 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange, showSt
         return () => window.clearTimeout(id);
     }, [seriesType, visibleData.length]);
     const locale = language === 'es' ? 'es-ES' : 'en-US';
-    const numberFormatter = React.useMemo(() => new Intl.NumberFormat(locale, { minimumFractionDigits: 2, maximumFractionDigits: 2 }), [locale]);
+    const numberFormatter = React.useMemo(() => new Intl.NumberFormat(locale, { minimumFractionDigits: priceFormat.min, maximumFractionDigits: priceFormat.max }), [locale, priceFormat]);
     const shortNumberFormatter = React.useMemo(() => new Intl.NumberFormat(locale, { maximumFractionDigits: 2 }), [locale]);
     const timeFormatter = React.useMemo(() => new Intl.DateTimeFormat(locale, { hour: '2-digit', minute: '2-digit' }), [locale]);
     const latencyMs = React.useMemo(() => Math.round(20 + Math.random() * 15), []);
@@ -2533,9 +2600,14 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange, showSt
         const priceRange = Math.max(1e-6, maxPrice - minPrice);
         const maxVolume = Math.max(bounds.maxVolume, 1);
         priceWindowRef.current = { min: minPrice, max: maxPrice };
+        const referenceMagnitude = Math.min(Math.abs(minPrice), Math.abs(maxPrice)) || Math.max(Math.abs(minPrice), Math.abs(maxPrice));
+        const suggestedFormat = determinePriceFormat(referenceMagnitude);
+        setPriceFormat((prev) => (prev.min === suggestedFormat.min && prev.max === suggestedFormat.max ? prev : suggestedFormat));
         const chartWidth = Math.max(1, cssWidth - priceScaleWidth);
         const chartHeight = Math.max(1, cssHeight - timeScaleHeight - volumeHeight);
-        const candleWidth = chartWidth / Math.max(candles.length, 1);
+        const candleStep = getCandleStep(chartWidth, candles.length);
+        const candleWidth = Math.max(1, candleStep * BAR_BODY_RATIO);
+        const centerX = (index) => getCandleCenter(index, chartWidth, candles.length);
         // Generate price labels
         const priceLabelsArray = [];
         for (let i = 0; i <= 10; i++) {
@@ -2570,9 +2642,11 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange, showSt
                 gridCtx.lineTo(chartWidth, y);
                 gridCtx.stroke();
             }
-            const timeStep = Math.max(1, Math.floor(candles.length / 10));
+            const timeStep = Math.max(1, Math.floor(Math.max(candles.length, 1) / GRID_DIVISIONS));
             for (let i = 0; i <= candles.length; i += timeStep) {
-                const x = alignStroke(i * candleWidth);
+                const x = alignStroke((i + LEFT_OFFSET_BARS) * candleStep);
+                if (x < 0 || x > chartWidth)
+                    continue;
                 gridCtx.beginPath();
                 gridCtx.moveTo(x, 0);
                 gridCtx.lineTo(x, chartHeight);
@@ -2598,7 +2672,7 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange, showSt
                     : minPrice;
                 chartCtx.beginPath();
                 candles.forEach((candle, index) => {
-                    const x = index * candleWidth + candleWidth / 2;
+                    const x = centerX(index);
                     const yClose = ((maxPrice - candle.close) / priceRange) * chartHeight;
                     if (index === 0) {
                         chartCtx.moveTo(x, yClose);
@@ -2606,6 +2680,7 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange, showSt
                     else if (seriesType === 'step') {
                         const prev = candles[index - 1];
                         if (prev) {
+                            centerX(index - 1);
                             const prevY = ((maxPrice - prev.close) / priceRange) * chartHeight;
                             chartCtx.lineTo(x, prevY);
                             chartCtx.lineTo(x, yClose);
@@ -2621,7 +2696,7 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange, showSt
                 chartCtx.stroke();
                 if (seriesType === 'line-markers') {
                     candles.forEach((candle, index) => {
-                        const x = index * candleWidth + candleWidth / 2;
+                        const x = centerX(index);
                         const yClose = ((maxPrice - candle.close) / priceRange) * chartHeight;
                         chartCtx.beginPath();
                         chartCtx.arc(x, yClose, 2.5, 0, 2 * Math.PI);
@@ -2630,8 +2705,8 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange, showSt
                     });
                 }
                 if (seriesType === 'area' || seriesType === 'hlc-area' || seriesType === 'baseline') {
-                    chartCtx.lineTo((candles.length - 1) * candleWidth + candleWidth / 2, ((maxPrice - baselinePrice) / priceRange) * chartHeight);
-                    chartCtx.lineTo(0 * candleWidth + candleWidth / 2, ((maxPrice - baselinePrice) / priceRange) * chartHeight);
+                    chartCtx.lineTo(centerX(candles.length - 1), ((maxPrice - baselinePrice) / priceRange) * chartHeight);
+                    chartCtx.lineTo(centerX(0), ((maxPrice - baselinePrice) / priceRange) * chartHeight);
                     chartCtx.closePath();
                     chartCtx.fillStyle =
                         seriesType === 'baseline' ? 'rgba(41,98,255,0.25)' : 'rgba(41,98,255,0.15)';
@@ -2641,7 +2716,7 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange, showSt
             else {
                 // ----- CANDLE / BAR-BASED SERIES -----
                 candles.forEach((candle, index) => {
-                    const xCenter = index * candleWidth + candleWidth / 2;
+                    const xCenter = centerX(index);
                     const strokeX = alignStroke(xCenter);
                     const yHigh = ((maxPrice - candle.high) / priceRange) * chartHeight;
                     const yLow = ((maxPrice - candle.low) / priceRange) * chartHeight;
@@ -2726,12 +2801,12 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange, showSt
         if (volumeCtx) {
             volumeCtx.clearRect(0, 0, chartWidth, volumeHeight);
             candles.forEach((candle, index) => {
-                const x = index * candleWidth;
+                const xLeft = centerX(index) - candleWidth / 2;
                 const barHeight = ((candle.volume || 0) / maxVolume) * volumeHeight;
                 const y = volumeHeight - barHeight;
                 const isBullish = candle.close > candle.open;
                 volumeCtx.fillStyle = isBullish ? bullishColor : bearishColor;
-                volumeCtx.fillRect(x + 1, y, candleWidth - 2, barHeight);
+                volumeCtx.fillRect(xLeft + 1, y, Math.max(1, candleWidth - 2), barHeight);
             });
         }
         // Draw indicators
@@ -2745,7 +2820,7 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange, showSt
                     indicatorCtx.beginPath();
                     indicator.data.forEach((value, index) => {
                         if (value !== null && value !== undefined) {
-                            const x = index * candleWidth + candleWidth / 2;
+                            const x = centerX(index);
                             const y = ((maxPrice - value) / priceRange) * chartHeight;
                             if (index === 0) {
                                 indicatorCtx.moveTo(x, y);
@@ -2760,11 +2835,11 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange, showSt
                 else if (indicator.type === 'histogram') {
                     indicator.data.forEach((value, index) => {
                         if (value !== null && value !== undefined) {
-                            const x = index * candleWidth;
+                            const xLeft = centerX(index) - candleWidth / 2;
                             const barHeight = Math.abs(value) * chartHeight * 0.1; // Scale histogram
                             const y = value >= 0 ? chartHeight / 2 - barHeight : chartHeight / 2;
                             indicatorCtx.fillStyle = value >= 0 ? '#089981' : '#f23645';
-                            indicatorCtx.fillRect(x + 2, y, candleWidth - 4, barHeight);
+                            indicatorCtx.fillRect(xLeft + 2, y, Math.max(1, candleWidth - 4), barHeight);
                         }
                     });
                 }
@@ -2794,32 +2869,46 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange, showSt
         }
     }, [chartWidth, chartHeight, overlayHeight]);
     const handlePointerMove = React.useCallback((e) => {
-        if (interactionsLocked || !visibleData.length)
+        if (interactionsLocked || !visibleData.length) {
+            setCrosshairMeta(null);
             return;
+        }
         const rect = e.currentTarget.getBoundingClientRect();
         const x = e.clientX - rect.left;
         const y = e.clientY - rect.top;
         setClickedPrice(null);
         if (cursorType !== 'cross') {
+            setCrosshairMeta(null);
             return;
         }
         if (!isDraggingRef.current) {
             const { min, max } = priceWindowRef.current;
-            const snappedX = coordsRef.current.snapToCandle(x, chartWidth, visibleData.length);
-            const snappedY = coordsRef.current.snapToPrice(y, chartHeight, min, max);
-            mousePosRef.current = {
-                x: coordsRef.current.timeToPixel(snappedX, chartWidth, visibleData.length),
-                y: coordsRef.current.priceToPixel(snappedY, chartHeight, min, max)
-            };
+            const rawIndex = pixelToCandleIndex(x, chartWidth, visibleData.length);
+            const hoveredIndex = clampCandleIndex(rawIndex, visibleData.length);
+            const hoveredCandle = visibleData[hoveredIndex];
+            const snappedPrice = coordsRef.current.snapToPrice(y, chartHeight, min, max);
+            const yPixel = coordsRef.current.priceToPixel(snappedPrice, chartHeight, min, max);
+            const xPixel = magnetEnabled
+                ? getCandleCenter(hoveredIndex, chartWidth, visibleData.length)
+                : clampPixelToChart(x, chartWidth);
+            mousePosRef.current = { x: xPixel, y: yPixel };
+            setCrosshairMeta({
+                price: snappedPrice,
+                timestamp: hoveredCandle?.timestamp ?? null,
+                x: xPixel,
+                y: yPixel,
+                candle: hoveredCandle ?? null
+            });
             showCrosshairRef.current = true;
             requestAnimationFrame(drawCrosshair);
         }
-    }, [visibleData, cursorType, chartWidth, chartHeight, drawCrosshair, interactionsLocked]);
+    }, [visibleData, cursorType, chartWidth, chartHeight, drawCrosshair, interactionsLocked, magnetEnabled]);
     const handleMouseLeave = React.useCallback(() => {
         showCrosshairRef.current = false;
         isDraggingRef.current = false;
         dragSampleRef.current.velocity = 0;
         dragSampleRef.current.lastTs = 0;
+        setCrosshairMeta(null);
         requestAnimationFrame(() => {
             const overlayCtx = overlayRef.current?.getContext('2d');
             if (overlayCtx) {
@@ -2863,15 +2952,21 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange, showSt
             ? { minPrice: priceWindowRef.current.min, maxPrice: priceWindowRef.current.max }
             : getDataBounds(targetData);
         const dataLength = Math.max(targetData.length, 1);
-        if (magnetEnabled && visibleData.length) {
-            const snappedIndex = coordsRef.current.snapToCandle(x, chartWidth, dataLength);
-            const snappedPrice = coordsRef.current.snapToPrice(y, chartHeight, bounds.minPrice, bounds.maxPrice, 0.5);
-            x = coordsRef.current.timeToPixel(snappedIndex, chartWidth, dataLength);
-            y = coordsRef.current.priceToPixel(snappedPrice, chartHeight, bounds.minPrice, bounds.maxPrice);
-        }
-        const price = coordsRef.current.pixelToPrice(y, chartHeight, bounds.minPrice, bounds.maxPrice);
-        const time = coordsRef.current.pixelToTime(x, chartWidth, dataLength);
-        return { x, y, price, time };
+        let snappedPrice = coordsRef.current.snapToPrice(y, chartHeight, bounds.minPrice, bounds.maxPrice, 0.5);
+        let snappedY = y;
+        if (magnetEnabled && targetData.length) {
+            const snappedIndex = clampCandleIndex(pixelToCandleIndex(x, chartWidth, dataLength), dataLength);
+            x = getCandleCenter(snappedIndex, chartWidth, dataLength);
+            snappedY = coordsRef.current.priceToPixel(snappedPrice, chartHeight, bounds.minPrice, bounds.maxPrice);
+            y = snappedY;
+        }
+        else {
+            x = clampPixelToChart(x, chartWidth);
+        }
+        const price = coordsRef.current.pixelToPrice(snappedY, chartHeight, bounds.minPrice, bounds.maxPrice);
+        const hoveredIndex = clampCandleIndex(pixelToCandleIndex(x, chartWidth, dataLength), dataLength);
+        const time = targetData[hoveredIndex]?.timestamp ?? hoveredIndex;
+        return { x, y: snappedY, price, time };
     }, [visibleData, storeData, magnetEnabled, chartWidth, chartHeight, interactionsLocked]);
     const tryEraseDrawing = React.useCallback((x, y) => {
         for (let i = drawings.length - 1; i >= 0; i--) {
@@ -3082,7 +3177,7 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange, showSt
         }
         if (visibleData.length) {
             const { min, max } = priceWindowRef.current;
-            const snappedIndex = coordsRef.current.snapToCandle(rawX, chartWidth, visibleData.length);
+            const snappedIndex = clampCandleIndex(pixelToCandleIndex(rawX, chartWidth, visibleData.length), visibleData.length);
             setSelectedCandleIndex(snappedIndex);
             const price = coordsRef.current.pixelToPrice(rawY, chartHeight, min, max);
             setClickedPrice({ x: rawX, y: rawY, price });
@@ -3608,7 +3703,7 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange, showSt
                 minHeight: 0,
                 alignItems: 'stretch'
             } },
-            React.createElement("div", { style: { width: isMobile ? '60px' : '88px', flexShrink: 0, height: '100%' } },
+            showDrawingToolbar && (React.createElement("div", { style: { width: isMobile ? '60px' : '88px', flexShrink: 0, height: '100%' } },
                 React.createElement("div", { style: {
                         height: '100%',
                         borderRadius: '24px',
@@ -3619,7 +3714,7 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange, showSt
                         alignItems: 'center',
                         padding: isMobile ? '12px 0' : '16px 0'
                     } },
-                    React.createElement(DrawingToolbar, null))),
+                    React.createElement(DrawingToolbar, null)))),
             React.createElement("div", { ref: plotAreaRef, style: {
                     flex: 1,
                     position: 'relative',
@@ -3660,6 +3755,65 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange, showSt
                 React.createElement("div", { style: { position: 'absolute', bottom: 0, left: 0, right: priceScaleWidth, height: `${timeScaleHeight}px`, background: activeTheme.scaleBg, borderTop: `1px solid ${activeTheme.plotBorder}`, fontSize: '11px', color: activeTheme.textSecondary, display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: '4px', padding: '4px 10px' } },
                     React.createElement("span", { style: { textTransform: 'uppercase', fontSize: '10px', letterSpacing: '0.08em' } }, strings.axis.time),
                     React.createElement("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', color: activeTheme.textPrimary } }, timeLabels.map((label, i) => (React.createElement("div", { key: i }, label))))),
+                crosshairMeta?.candle && (React.createElement("div", { style: {
+                        position: 'absolute',
+                        top: 16,
+                        left: 16,
+                        padding: '10px 14px',
+                        borderRadius: '14px',
+                        background: activeTheme.overlayBg,
+                        border: `1px solid ${activeTheme.panelBorder}`,
+                        boxShadow: '0 12px 30px rgba(0,0,0,0.45)',
+                        color: activeTheme.textPrimary,
+                        fontSize: '11px',
+                        letterSpacing: '0.04em',
+                        display: 'flex',
+                        gap: '14px',
+                        pointerEvents: 'none',
+                        zIndex: 60
+                    } },
+                    ([
+                        { label: 'O', value: crosshairMeta.candle.open },
+                        { label: 'H', value: crosshairMeta.candle.high },
+                        { label: 'L', value: crosshairMeta.candle.low },
+                        { label: 'C', value: crosshairMeta.candle.close }
+                    ]).map((item) => (React.createElement("div", { key: item.label, style: { display: 'flex', flexDirection: 'column', gap: '2px' } },
+                        React.createElement("span", { style: { color: activeTheme.textSecondary } }, item.label),
+                        React.createElement("span", { style: { fontWeight: 600 } }, numberFormatter.format(item.value))))),
+                    React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '2px' } },
+                        React.createElement("span", { style: { color: activeTheme.textSecondary } }, "V"),
+                        React.createElement("span", { style: { fontWeight: 600 } }, shortNumberFormatter.format(crosshairMeta.candle.volume ?? 0))))),
+                crosshairMeta && (React.createElement(React.Fragment, null,
+                    React.createElement("div", { style: {
+                            position: 'absolute',
+                            right: `${priceScaleWidth}px`,
+                            top: `${Math.min(Math.max(crosshairMeta.y, 12), overlayHeight - 12)}px`,
+                            transform: 'translate(0, -50%)',
+                            background: activeTheme.scaleBg,
+                            border: `1px solid ${activeTheme.panelBorder}`,
+                            borderRadius: '6px 0 0 6px',
+                            padding: '2px 8px',
+                            fontSize: '11px',
+                            fontWeight: 600,
+                            color: activeTheme.textPrimary,
+                            pointerEvents: 'none',
+                            boxShadow: '0 8px 20px rgba(0,0,0,0.4)'
+                        } }, numberFormatter.format(crosshairMeta.price)),
+                    crosshairMeta.timestamp && (React.createElement("div", { style: {
+                            position: 'absolute',
+                            left: `${Math.min(Math.max(crosshairMeta.x, 40), chartWidth - 40)}px`,
+                            bottom: `${timeScaleHeight}px`,
+                            transform: 'translate(-50%, 50%)',
+                            background: activeTheme.scaleBg,
+                            border: `1px solid ${activeTheme.panelBorder}`,
+                            borderRadius: '6px',
+                            padding: '2px 8px',
+                            fontSize: '10px',
+                            letterSpacing: '0.05em',
+                            color: activeTheme.textPrimary,
+                            pointerEvents: 'none',
+                            boxShadow: '0 8px 20px rgba(0,0,0,0.35)'
+                        } }, timeFormatter.format(new Date(crosshairMeta.timestamp)))))),
                 clickedPrice && (React.createElement("div", { style: {
                         position: 'absolute',
                         background: '#1e222d',