@forgecharts/sdk 1.1.27 → 1.1.28

package/src/react/canvas/toolbars/LeftToolbar.tsx

@@ -1,1096 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import ReactDOM from 'react-dom';
-import type { DrawingToolType, DrawingType, PointerToolType } from '../../../';
-
-// ─── Pointer tools ────────────────────────────────────────────────────────────
-
-const POINTER_TOOLS: PointerToolType[] = ['cursor', 'crosshair', 'dot', 'demonstration'];
-
-const POINTER_ICONS: Record<PointerToolType, React.ReactNode> = {
-  cursor: (
-    <svg viewBox="0 0 16 16" width="15" height="15" fill="currentColor">
-      <path d="M4 1l8 7-4 1-2 5-2-13z" />
-    </svg>
-  ),
-  crosshair: (
-    <svg viewBox="0 0 16 16" width="15" height="15" stroke="currentColor" fill="none" strokeWidth="1.5">
-      {/* top arm */}
-      <line x1="8" y1="1" x2="8" y2="6" />
-      {/* bottom arm */}
-      <line x1="8" y1="10" x2="8" y2="15" />
-      {/* left arm */}
-      <line x1="1" y1="8" x2="6" y2="8" />
-      {/* right arm */}
-      <line x1="10" y1="8" x2="15" y2="8" />
-    </svg>
-  ),
-  dot: (
-    <svg viewBox="0 0 16 16" width="15" height="15" fill="currentColor">
-      <circle cx="8" cy="8" r="4" />
-    </svg>
-  ),
-  demonstration: (
-    <svg viewBox="0 0 16 16" width="15" height="15" stroke="currentColor" fill="none" strokeWidth="1.6">
-      <line x1="8" y1="1" x2="8" y2="4.5" />
-      <line x1="8" y1="11.5" x2="8" y2="15" />
-      <line x1="1" y1="8" x2="4.5" y2="8" />
-      <line x1="11.5" y1="8" x2="15" y2="8" />
-      <circle cx="8" cy="8" r="4" />
-    </svg>
-  ),
-};
-
-const POINTER_LABELS: Record<PointerToolType, string> = {
-  cursor: 'Arrow',
-  crosshair: 'Cross',
-  dot: 'Dot',
-  demonstration: 'Demonstration',
-};
-
-// ─── Lines menu data ──────────────────────────────────────────────────────────
-
-interface LineItem {
-  tool: string;
-  label: string;
-  shortcut?: string;
-  icon: React.ReactNode;
-}
-
-interface LineSection {
-  heading: string;
-  items: LineItem[];
-}
-
-const LINES_SECTIONS: LineSection[] = [
-  {
-    heading: 'Lines',
-    items: [
-      {
-        tool: 'trendline',
-        label: 'Trendline',
-        shortcut: 'Alt+T',
-        icon: (
-          <svg viewBox="0 0 18 18" width="16" height="16" stroke="currentColor" fill="none" strokeWidth="1.8">
-            <line x1="2" y1="14" x2="16" y2="4" />
-            <circle cx="2" cy="14" r="1.5" fill="currentColor" stroke="none" />
-            <circle cx="16" cy="4" r="1.5" fill="currentColor" stroke="none" />
-          </svg>
-        ),
-      },
-      {
-        tool: 'ray',
-        label: 'Ray',
-        icon: (
-          <svg viewBox="0 0 18 18" width="16" height="16" stroke="currentColor" fill="none" strokeWidth="1.8">
-            <line x1="2" y1="13" x2="16" y2="5" />
-            <circle cx="2" cy="13" r="1.5" fill="currentColor" stroke="none" />
-            <polygon points="16,5 14,6.5 14.5,8.5" fill="currentColor" stroke="none" />
-          </svg>
-        ),
-      },
-      {
-        tool: 'infoLine',
-        label: 'Info line',
-        icon: (
-          <svg viewBox="0 0 18 18" width="16" height="16" stroke="currentColor" fill="none" strokeWidth="1.8">
-            <line x1="1" y1="13" x2="17" y2="5" />
-            <polygon points="1,13 3,12 2.5,10" fill="currentColor" stroke="none" />
-            <polygon points="17,5 15,6.5 15.5,8.5" fill="currentColor" stroke="none" />
-          </svg>
-        ),
-      },
-      {
-        tool: 'extendedLine',
-        label: 'Extended line',
-        icon: (
-          <svg viewBox="0 0 18 18" width="16" height="16" stroke="currentColor" fill="none" strokeWidth="1.8">
-            <line x1="2" y1="14" x2="16" y2="4" />
-            <circle cx="2" cy="14" r="1.5" fill="currentColor" stroke="none" />
-            <polygon points="16,4 14,5.5 14.5,7.5" fill="currentColor" stroke="none" />
-          </svg>
-        ),
-      },
-      {
-        tool: 'trendAngle',
-        label: 'Trend angle',
-        icon: (
-          <svg viewBox="0 0 18 18" width="16" height="16" stroke="currentColor" fill="none" strokeWidth="1.8">
-            <line x1="2" y1="14" x2="16" y2="4" />
-            <path d="M 2 14 A 5 5 0 0 1 7.5 11.8" strokeWidth="1.4" />
-            <text x="6.5" y="16" fontSize="5.5" fill="currentColor" stroke="none" fontFamily="sans-serif">θ</text>
-          </svg>
-        ),
-      },
-      {
-        tool: 'horizontal',
-        label: 'Horizontal line',
-        shortcut: 'Alt+H',
-        icon: (
-          <svg viewBox="0 0 18 18" width="16" height="16" stroke="currentColor" fill="none" strokeWidth="1.8">
-            <line x1="1" y1="9" x2="17" y2="9" />
-          </svg>
-        ),
-      },
-      {
-        tool: 'horizontalRay',
-        label: 'Horizontal ray',
-        shortcut: 'Alt+J',
-        icon: (
-          <svg viewBox="0 0 18 18" width="16" height="16" stroke="currentColor" fill="none" strokeWidth="1.8">
-            <line x1="3" y1="9" x2="17" y2="9" />
-            <circle cx="3" cy="9" r="1.5" fill="currentColor" stroke="none" />
-            <polygon points="17,9 15,7.5 15,10.5" fill="currentColor" stroke="none" />
-          </svg>
-        ),
-      },
-      {
-        tool: 'vertical',
-        label: 'Vertical line',
-        shortcut: 'Alt+V',
-        icon: (
-          <svg viewBox="0 0 18 18" width="16" height="16" stroke="currentColor" fill="none" strokeWidth="1.8">
-            <line x1="9" y1="1" x2="9" y2="17" />
-          </svg>
-        ),
-      },
-      {
-        tool: 'crossLine',
-        label: 'Cross line',
-        shortcut: 'Alt+C',
-        icon: (
-          <svg viewBox="0 0 18 18" width="16" height="16" stroke="currentColor" fill="none" strokeWidth="1.8">
-            <line x1="1" y1="9" x2="17" y2="9" />
-            <line x1="9" y1="1" x2="9" y2="17" />
-          </svg>
-        ),
-      },
-    ],
-  },
-  {
-    heading: 'Channels',
-    items: [
-      {
-        tool: 'parallelChannel',
-        label: 'Parallel channel',
-        icon: (
-          <svg viewBox="0 0 18 18" width="16" height="16" stroke="currentColor" fill="none" strokeWidth="1.8">
-            <line x1="2" y1="13" x2="16" y2="7" />
-            <line x1="2" y1="9" x2="16" y2="3" />
-          </svg>
-        ),
-      },
-      {
-        tool: 'regressionTrend',
-        label: 'Regression trend',
-        icon: (
-          <svg viewBox="0 0 18 18" width="16" height="16" stroke="currentColor" fill="none" strokeWidth="1.8">
-            <line x1="2" y1="13" x2="16" y2="5" />
-            <line x1="2" y1="11" x2="16" y2="3" strokeDasharray="2 2" strokeWidth="1.2" />
-            <line x1="2" y1="15" x2="16" y2="7" strokeDasharray="2 2" strokeWidth="1.2" />
-          </svg>
-        ),
-      },
-      {
-        tool: 'flatTopBottom',
-        label: 'Flat top/bottom',
-        icon: (
-          <svg viewBox="0 0 18 18" width="16" height="16" stroke="currentColor" fill="none" strokeWidth="1.8">
-            <line x1="2" y1="5" x2="16" y2="5" />
-            <line x1="2" y1="13" x2="16" y2="9" />
-          </svg>
-        ),
-      },
-      {
-        tool: 'disjointChannel',
-        label: 'Disjoint channel',
-        icon: (
-          <svg viewBox="0 0 18 18" width="16" height="16" stroke="currentColor" fill="none" strokeWidth="1.8">
-            <line x1="2" y1="12" x2="8" y2="8" />
-            <line x1="10" y1="10" x2="16" y2="6" />
-            <line x1="2" y1="15" x2="8" y2="11" strokeDasharray="2 2" strokeWidth="1.2" />
-            <line x1="10" y1="13" x2="16" y2="9" strokeDasharray="2 2" strokeWidth="1.2" />
-          </svg>
-        ),
-      },
-    ],
-  },
-  {
-    heading: 'Pitchforks',
-    items: [
-      {
-        tool: 'pitchfork',
-        label: 'Pitchfork',
-        icon: (
-          <svg viewBox="0 0 18 18" width="16" height="16" stroke="currentColor" fill="none" strokeWidth="1.8">
-            <line x1="9" y1="15" x2="9" y2="6" />
-            <line x1="9" y1="6" x2="4" y2="2" />
-            <line x1="9" y1="6" x2="14" y2="2" />
-            <line x1="4" y1="2" x2="14" y2="2" strokeWidth="1" />
-          </svg>
-        ),
-      },
-      {
-        tool: 'schiffPitchfork',
-        label: 'Schiff pitchfork',
-        icon: (
-          <svg viewBox="0 0 18 18" width="16" height="16" stroke="currentColor" fill="none" strokeWidth="1.8">
-            <line x1="9" y1="15" x2="9" y2="7" />
-            <line x1="9" y1="7" x2="3.5" y2="2" />
-            <line x1="9" y1="7" x2="14.5" y2="2" />
-            <line x1="3.5" y1="2" x2="14.5" y2="2" strokeWidth="1" />
-            <circle cx="9" cy="11" r="1" fill="currentColor" stroke="none" />
-          </svg>
-        ),
-      },
-      {
-        tool: 'modifiedSchiffPitchfork',
-        label: 'Modified Schiff pitchfork',
-        icon: (
-          <svg viewBox="0 0 18 18" width="16" height="16" stroke="currentColor" fill="none" strokeWidth="1.8">
-            <line x1="9" y1="16" x2="9" y2="8" />
-            <line x1="9" y1="8" x2="4" y2="2" />
-            <line x1="9" y1="8" x2="14" y2="2" />
-            <line x1="4" y1="2" x2="14" y2="2" strokeWidth="1" />
-            <line x1="6.5" y1="5" x2="11.5" y2="5" strokeWidth="1" strokeDasharray="1.5 1.5" />
-          </svg>
-        ),
-      },
-      {
-        tool: 'insidePitchfork',
-        label: 'Inside pitchfork',
-        icon: (
-          <svg viewBox="0 0 18 18" width="16" height="16" stroke="currentColor" fill="none" strokeWidth="1.8">
-            <line x1="9" y1="15" x2="9" y2="9" />
-            <line x1="4" y1="2" x2="14" y2="2" strokeWidth="1" />
-            <line x1="9" y1="9" x2="4" y2="2" />
-            <line x1="9" y1="9" x2="14" y2="2" />
-          </svg>
-        ),
-      },
-    ],
-  },
-];
-
-const LINES_MENU_TOOLS = new Set<DrawingToolType>(
-  LINES_SECTIONS.flatMap((s) => s.items.map((i) => i.tool as DrawingToolType)),
-);
-
-const ALL_LINES_ITEMS = LINES_SECTIONS.flatMap((s) => s.items);
-const LINES_ITEM_MAP = new Map<string, LineItem>(ALL_LINES_ITEMS.map((i) => [i.tool, i]));
-const DEFAULT_LINES_TOOL = ALL_LINES_ITEMS[0]?.tool ?? 'trendline';
-
-// ─── Fibonacci & Gann menu data ───────────────────────────────────────────────
-
-type FibGannTool =
-  | 'fibRetracement'
-  | 'trendBasedFibExtension'
-  | 'fibChannel'
-  | 'fibTimeZone'
-  | 'fibSpeedResistanceFan'
-  | 'trendBasedFibTime'
-  | 'fibCircles'
-  | 'fibSpiral'
-  | 'fibSpeedResistanceArcs'
-  | 'fibWedge'
-  | 'pitchfan'
-  | 'gannBox'
-  | 'gannSquareFixed'
-  | 'gannSquare'
-  | 'gannFan';
-
-interface FibGannItem {
-  tool: FibGannTool;
-  label: string;
-  shortcut?: string;
-  icon: React.ReactNode;
-}
-
-interface FibGannSection {
-  heading: string;
-  items: FibGannItem[];
-}
-
-const FIB_GANN_SECTIONS: FibGannSection[] = [
-  {
-    heading: 'Fibonacci',
-    items: [
-      {
-        tool: 'fibRetracement',
-        label: 'Fib retracement',
-        shortcut: 'Alt+F',
-        icon: (
-          <svg viewBox="0 0 18 18" width="16" height="16" stroke="currentColor" fill="none" strokeWidth="1.5">
-            <line x1="2" y1="3" x2="16" y2="3" />
-            <line x1="2" y1="6" x2="16" y2="6" />
-            <line x1="2" y1="9" x2="16" y2="9" />
-            <line x1="2" y1="12" x2="16" y2="12" />
-            <line x1="2" y1="15" x2="16" y2="15" />
-          </svg>
-        ),
-      },
-      {
-        tool: 'trendBasedFibExtension',
-        label: 'Trend-based fib extension',
-        icon: (
-          <svg viewBox="0 0 18 18" width="16" height="16" stroke="currentColor" fill="none" strokeWidth="1.5">
-            <line x1="2" y1="14" x2="10" y2="6" />
-            <line x1="10" y1="6" x2="16" y2="3" strokeDasharray="2 2" strokeWidth="1.2" />
-            <line x1="10" y1="9" x2="16" y2="9" strokeWidth="1" />
-            <line x1="10" y1="12" x2="16" y2="12" strokeWidth="1" />
-            <line x1="10" y1="14" x2="16" y2="14" strokeWidth="1" />
-            <circle cx="2" cy="14" r="1.2" fill="currentColor" stroke="none" />
-            <circle cx="10" cy="6" r="1.2" fill="currentColor" stroke="none" />
-          </svg>
-        ),
-      },
-      {
-        tool: 'fibChannel',
-        label: 'Fib channel',
-        icon: (
-          <svg viewBox="0 0 18 18" width="16" height="16" stroke="currentColor" fill="none" strokeWidth="1.5">
-            <line x1="2" y1="14" x2="16" y2="6" />
-            <line x1="2" y1="11" x2="16" y2="3" strokeWidth="1" />
-            <line x1="2" y1="12.5" x2="16" y2="4.5" strokeWidth="0.8" strokeDasharray="2 2" />
-            <line x1="2" y1="9" x2="16" y2="1" strokeWidth="0.8" strokeDasharray="2 2" />
-          </svg>
-        ),
-      },
-      {
-        tool: 'fibTimeZone',
-        label: 'Fib time zone',
-        icon: (
-          <svg viewBox="0 0 18 18" width="16" height="16" stroke="currentColor" fill="none" strokeWidth="1.5">
-            <line x1="3" y1="2" x2="3" y2="16" />
-            <line x1="6" y1="2" x2="6" y2="16" strokeWidth="1" />
-            <line x1="10" y1="2" x2="10" y2="16" strokeWidth="1" />
-            <line x1="15" y1="2" x2="15" y2="16" strokeWidth="1" />
-          </svg>
-        ),
-      },
-      {
-        tool: 'fibSpeedResistanceFan',
-        label: 'Fib speed resistance fan',
-        icon: (
-          <svg viewBox="0 0 18 18" width="16" height="16" stroke="currentColor" fill="none" strokeWidth="1.5">
-            <line x1="2" y1="15" x2="16" y2="2" />
-            <line x1="2" y1="15" x2="16" y2="6" strokeWidth="1" />
-            <line x1="2" y1="15" x2="16" y2="10" strokeWidth="1" />
-            <circle cx="2" cy="15" r="1.2" fill="currentColor" stroke="none" />
-          </svg>
-        ),
-      },
-      {
-        tool: 'trendBasedFibTime',
-        label: 'Trend-based fib time',
-        icon: (
-          <svg viewBox="0 0 18 18" width="16" height="16" stroke="currentColor" fill="none" strokeWidth="1.5">
-            <line x1="2" y1="13" x2="9" y2="5" />
-            <line x1="9" y1="2" x2="9" y2="16" strokeWidth="1" />
-            <line x1="12" y1="2" x2="12" y2="16" strokeWidth="0.8" />
-            <line x1="15" y1="2" x2="15" y2="16" strokeWidth="0.8" />
-          </svg>
-        ),
-      },
-      {
-        tool: 'fibCircles',
-        label: 'Fib circles',
-        icon: (
-          <svg viewBox="0 0 18 18" width="16" height="16" stroke="currentColor" fill="none" strokeWidth="1.5">
-            <circle cx="5" cy="13" r="2" />
-            <circle cx="5" cy="13" r="4.5" strokeWidth="1" />
-            <circle cx="5" cy="13" r="7.5" strokeWidth="1" />
-            <circle cx="5" cy="13" r="1" fill="currentColor" stroke="none" />
-          </svg>
-        ),
-      },
-      {
-        tool: 'fibSpiral',
-        label: 'Fib spiral',
-        icon: (
-          <svg viewBox="0 0 18 18" width="16" height="16" stroke="currentColor" fill="none" strokeWidth="1.5">
-            <path d="M 9 9 Q 9 14 14 14 Q 14 4 4 4 Q 4 16 16 16" />
-            <circle cx="9" cy="9" r="1" fill="currentColor" stroke="none" />
-          </svg>
-        ),
-      },
-      {
-        tool: 'fibSpeedResistanceArcs',
-        label: 'Fib speed resistance arcs',
-        icon: (
-          <svg viewBox="0 0 18 18" width="16" height="16" stroke="currentColor" fill="none" strokeWidth="1.5">
-            <path d="M 2 15 A 4 4 0 0 1 6 11" />
-            <path d="M 2 15 A 8 8 0 0 1 10 7" strokeWidth="1" />
-            <path d="M 2 15 A 13 13 0 0 1 15 2" strokeWidth="1" />
-            <circle cx="2" cy="15" r="1.2" fill="currentColor" stroke="none" />
-          </svg>
-        ),
-      },
-      {
-        tool: 'fibWedge',
-        label: 'Fib wedge',
-        icon: (
-          <svg viewBox="0 0 18 18" width="16" height="16" stroke="currentColor" fill="none" strokeWidth="1.5">
-            <line x1="2" y1="15" x2="16" y2="3" />
-            <line x1="2" y1="15" x2="16" y2="8" />
-            <line x1="2" y1="15" x2="16" y2="12" strokeWidth="1" />
-            <circle cx="2" cy="15" r="1.2" fill="currentColor" stroke="none" />
-          </svg>
-        ),
-      },
-      {
-        tool: 'pitchfan',
-        label: 'Pitchfan',
-        icon: (
-          <svg viewBox="0 0 18 18" width="16" height="16" stroke="currentColor" fill="none" strokeWidth="1.5">
-            <line x1="2" y1="15" x2="16" y2="3" />
-            <line x1="2" y1="15" x2="16" y2="9" strokeWidth="1" />
-            <line x1="2" y1="15" x2="16" y2="15" strokeWidth="1" />
-            <line x1="8" y1="3" x2="8" y2="15" strokeWidth="0.8" strokeDasharray="2 2" />
-            <circle cx="2" cy="15" r="1.2" fill="currentColor" stroke="none" />
-          </svg>
-        ),
-      },
-    ],
-  },
-  {
-    heading: 'Gann',
-    items: [
-      {
-        tool: 'gannBox',
-        label: 'Gann box',
-        icon: (
-          <svg viewBox="0 0 18 18" width="16" height="16" stroke="currentColor" fill="none" strokeWidth="1.5">
-            <rect x="2" y="3" width="14" height="12" />
-            <line x1="2" y1="3" x2="16" y2="15" strokeWidth="1" />
-            <line x1="2" y1="15" x2="16" y2="3" strokeWidth="1" />
-          </svg>
-        ),
-      },
-      {
-        tool: 'gannSquareFixed',
-        label: 'Gann square fixed',
-        icon: (
-          <svg viewBox="0 0 18 18" width="16" height="16" stroke="currentColor" fill="none" strokeWidth="1.5">
-            <rect x="3" y="3" width="12" height="12" />
-            <line x1="3" y1="9" x2="15" y2="9" strokeWidth="0.8" />
-            <line x1="9" y1="3" x2="9" y2="15" strokeWidth="0.8" />
-            <circle cx="9" cy="9" r="1.2" fill="currentColor" stroke="none" />
-          </svg>
-        ),
-      },
-      {
-        tool: 'gannSquare',
-        label: 'Gann square',
-        icon: (
-          <svg viewBox="0 0 18 18" width="16" height="16" stroke="currentColor" fill="none" strokeWidth="1.5">
-            <rect x="3" y="3" width="12" height="12" />
-            <line x1="3" y1="3" x2="15" y2="15" strokeWidth="1" />
-            <line x1="9" y1="3" x2="9" y2="15" strokeWidth="0.8" />
-            <line x1="3" y1="9" x2="15" y2="9" strokeWidth="0.8" />
-          </svg>
-        ),
-      },
-      {
-        tool: 'gannFan',
-        label: 'Gann fan',
-        icon: (
-          <svg viewBox="0 0 18 18" width="16" height="16" stroke="currentColor" fill="none" strokeWidth="1.5">
-            <line x1="2" y1="16" x2="16" y2="2" />
-            <line x1="2" y1="16" x2="16" y2="6" strokeWidth="1" />
-            <line x1="2" y1="16" x2="16" y2="10" strokeWidth="1" />
-            <line x1="2" y1="16" x2="16" y2="16" strokeWidth="0.8" />
-            <line x1="2" y1="16" x2="6" y2="2" strokeWidth="1" />
-            <circle cx="2" cy="16" r="1.2" fill="currentColor" stroke="none" />
-          </svg>
-        ),
-      },
-    ],
-  },
-];
-
-const FIB_GANN_TOOLS = new Set<DrawingToolType>(
-  FIB_GANN_SECTIONS.flatMap((s) => s.items.map((i) => i.tool as DrawingToolType)),
-);
-
-const FIB_GANN_ITEM_MAP = new Map<DrawingToolType, FibGannItem>(
-  FIB_GANN_SECTIONS.flatMap((s) => s.items.map((i) => [i.tool as DrawingToolType, i])),
-);
-
-// ─── Other tools ──────────────────────────────────────────────────────────────
-
-type OtherTool = 'rectangle' | 'text';
-
-const OTHER_ICONS: Record<OtherTool, React.ReactNode> = {
-  rectangle: (
-    <svg viewBox="0 0 16 16" width="15" height="15" stroke="currentColor" fill="none" strokeWidth="2">
-      <rect x="2" y="4" width="12" height="8" />
-    </svg>
-  ),
-  text: (
-    <svg viewBox="0 0 16 16" width="15" height="15" fill="currentColor">
-      <text x="3" y="13" fontSize="13" fontFamily="serif" fontWeight="bold">T</text>
-    </svg>
-  ),
-};
-
-const OTHER_LABELS: Record<OtherTool, string> = {
-  rectangle: 'Rectangle',
-  text: 'Text',
-};
-
-const OTHER_TOOL_ORDER: OtherTool[] = ['rectangle', 'text'];
-
-// ─── Unified drawing-tool item map (Lines + FibGann + Other) ─────────────────
-// Used by the floating favorites toolbar to look up icons/labels for any tool.
-
-const ALL_DRAWING_ITEM_MAP = new Map<DrawingToolType, { label: string; icon: React.ReactNode }>([
-  ...ALL_LINES_ITEMS.map((i) => [i.tool as DrawingToolType, i] as [DrawingToolType, { label: string; icon: React.ReactNode }]),
-  ...FIB_GANN_SECTIONS.flatMap((s) => s.items).map((i) => [i.tool as DrawingToolType, i] as [DrawingToolType, { label: string; icon: React.ReactNode }]),
-  ...OTHER_TOOL_ORDER.map((t) => [t as DrawingToolType, { label: OTHER_LABELS[t], icon: OTHER_ICONS[t] }] as [DrawingToolType, { label: string; icon: React.ReactNode }]),
-]);
-
-// ─── Star icon ────────────────────────────────────────────────────────────────
-
-function StarIcon({ filled }: { filled: boolean }): React.ReactElement {
-  return (
-    <svg
-      viewBox="0 0 16 16"
-      width="13"
-      height="13"
-      fill={filled ? '#f5a623' : 'none'}
-      stroke={filled ? '#f5a623' : 'currentColor'}
-      strokeWidth="1.4"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M8 1.5l1.8 3.6 4 .58-2.9 2.83.68 3.99L8 10.35l-3.58 1.88.68-3.99L2.2 5.68l4-.58z" />
-    </svg>
-  );
-}
-
-// ─── Pointer group ────────────────────────────────────────────────────────────
-
-function PointerGroup({
-  activeTool,
-  onSelectTool,
-}: {
-  activeTool: DrawingToolType;
-  onSelectTool: (tool: DrawingToolType) => void;
-}): React.ReactElement {
-  const [flyoutOpen, setFlyoutOpen] = useState(false);
-  const groupRef = useRef<HTMLDivElement>(null);
-
-  const activePointer: PointerToolType = (POINTER_TOOLS as string[]).includes(activeTool)
-    ? (activeTool as PointerToolType)
-    : 'cursor';
-  const isPointerActive = (POINTER_TOOLS as string[]).includes(activeTool);
-
-  useEffect(() => {
-    if (!flyoutOpen) return;
-    const handler = (e: MouseEvent) => {
-      if (groupRef.current && !groupRef.current.contains(e.target as Node)) setFlyoutOpen(false);
-    };
-    document.addEventListener('mousedown', handler);
-    return () => document.removeEventListener('mousedown', handler);
-  }, [flyoutOpen]);
-
-  return (
-    <div ref={groupRef} className="dt-pointer-group">
-      <button
-        className={`drawing-tool-btn dt-pointer-main${isPointerActive ? ' is-active' : ''}`}
-        title={POINTER_LABELS[activePointer]}
-        onClick={() => setFlyoutOpen((o) => !o)}
-      >
-        {POINTER_ICONS[activePointer]}
-      </button>
-      <button
-        className={`dt-pointer-expand${flyoutOpen ? ' is-open' : ''}`}
-        title="Pointer tools"
-        onClick={(e) => { e.stopPropagation(); setFlyoutOpen((o) => !o); }}
-      >
-        <svg viewBox="0 0 6 10" width="5" height="8" fill="currentColor">
-          <path d="M1 1l4 4-4 4" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round" />
-        </svg>
-      </button>
-      {flyoutOpen && (
-        <div className="dt-pointer-flyout">
-          <div className="dt-flyout-label">Pointer</div>
-          {POINTER_TOOLS.map((tool) => (
-            <button
-              key={tool}
-              className={`dt-flyout-item${activeTool === tool ? ' is-active' : ''}`}
-              onClick={() => { onSelectTool(tool); setFlyoutOpen(false); }}
-            >
-              <span className="dt-flyout-icon">{POINTER_ICONS[tool]}</span>
-              <span className="dt-flyout-name">{POINTER_LABELS[tool]}</span>
-              {activeTool === tool && <span className="dt-flyout-check">✓</span>}
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
-// ─── Lines group ──────────────────────────────────────────────────────────────
-
-function LinesGroup({
-  activeTool,
-  favorites,
-  onSelectTool,
-  onFavoritesChange,
-}: {
-  activeTool: DrawingToolType;
-  favorites: DrawingToolType[];
-  onSelectTool: (tool: DrawingToolType) => void;
-  onFavoritesChange: (favs: DrawingToolType[]) => void;
-}): React.ReactElement {
-  const [panelOpen, setPanelOpen] = useState(false);
-  const groupRef = useRef<HTMLDivElement>(null);
-  const isLinesActive = LINES_MENU_TOOLS.has(activeTool);
-  const [lastTool, setLastTool] = useState<string>(DEFAULT_LINES_TOOL);
-
-  const currentItem = (isLinesActive
-    ? LINES_ITEM_MAP.get(activeTool as string)
-    : LINES_ITEM_MAP.get(lastTool)) ?? LINES_ITEM_MAP.get(DEFAULT_LINES_TOOL)!;
-
-  useEffect(() => {
-    if (!panelOpen) return;
-    const handler = (e: MouseEvent) => {
-      if (groupRef.current && !groupRef.current.contains(e.target as Node)) setPanelOpen(false);
-    };
-    document.addEventListener('mousedown', handler);
-    return () => document.removeEventListener('mousedown', handler);
-  }, [panelOpen]);
-
-  const toggleFavorite = (tool: DrawingToolType, e: React.MouseEvent) => {
-    e.stopPropagation();
-    const next = favorites.includes(tool)
-      ? favorites.filter((f) => f !== tool)
-      : [...favorites, tool];
-    onFavoritesChange(next);
-  };
-
-  return (
-    <div ref={groupRef} className="dt-lines-group">
-      <button
-        className={`drawing-tool-btn dt-lines-main${isLinesActive ? ' is-active' : ''}`}
-        title={currentItem.label}
-        onClick={() => setPanelOpen((o) => !o)}
-      >
-        {currentItem.icon}
-      </button>
-      <button
-        className={`dt-pointer-expand${panelOpen ? ' is-open' : ''}`}
-        title="Lines tools"
-        onClick={(e) => { e.stopPropagation(); setPanelOpen((o) => !o); }}
-      >
-        <svg viewBox="0 0 6 10" width="5" height="8" fill="currentColor">
-          <path d="M1 1l4 4-4 4" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round" />
-        </svg>
-      </button>
-      {panelOpen && (
-        <div className="dt-lines-panel">
-          {LINES_SECTIONS.map((section) => (
-            <div key={section.heading} className="dt-lines-section">
-              <div className="dt-lines-heading">{section.heading.toUpperCase()}</div>
-              {section.items.map((item) => {
-                const isFav = favorites.includes(item.tool as DrawingToolType);
-                return (
-                  <button
-                    key={item.tool}
-                    className={`dt-lines-item dt-fibgann-item${activeTool === (item.tool as DrawingToolType) ? ' is-active' : ''}`}
-                    onClick={() => { setLastTool(item.tool); onSelectTool(item.tool as DrawingToolType); setPanelOpen(false); }}
-                  >
-                    <span className="dt-lines-icon">{item.icon}</span>
-                    <span className="dt-lines-name">{item.label}</span>
-                    {item.shortcut && <span className="dt-lines-shortcut">{item.shortcut}</span>}
-                    <button
-                      className={`dt-star-btn${isFav ? ' is-starred' : ''}`}
-                      title={isFav ? 'Remove from favorites' : 'Add to favorites'}
-                      onClick={(e) => toggleFavorite(item.tool as DrawingToolType, e)}
-                    >
-                      <StarIcon filled={isFav} />
-                    </button>
-                  </button>
-                );
-              })}
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
-// ─── FibGann group ────────────────────────────────────────────────────────────
-
-function FibGannGroup({
-  activeTool,
-  favorites,
-  onSelectTool,
-  onFavoritesChange,
-}: {
-  activeTool: DrawingToolType;
-  favorites: DrawingToolType[];
-  onSelectTool: (tool: DrawingToolType) => void;
-  onFavoritesChange: (favs: DrawingToolType[]) => void;
-}): React.ReactElement {
-  const [panelOpen, setPanelOpen] = useState(false);
-  const groupRef = useRef<HTMLDivElement>(null);
-  const isFibGannActive = FIB_GANN_TOOLS.has(activeTool);
-  const [lastTool, setLastTool] = useState<DrawingToolType>('fibRetracement');
-
-  const currentItem = (isFibGannActive
-    ? FIB_GANN_ITEM_MAP.get(activeTool)
-    : FIB_GANN_ITEM_MAP.get(lastTool)) ?? FIB_GANN_ITEM_MAP.get('fibRetracement')!;
-
-  useEffect(() => {
-    if (!panelOpen) return;
-    const handler = (e: MouseEvent) => {
-      if (groupRef.current && !groupRef.current.contains(e.target as Node)) setPanelOpen(false);
-    };
-    document.addEventListener('mousedown', handler);
-    return () => document.removeEventListener('mousedown', handler);
-  }, [panelOpen]);
-
-  const toggleFavorite = (tool: DrawingToolType, e: React.MouseEvent) => {
-    e.stopPropagation();
-    const next = favorites.includes(tool)
-      ? favorites.filter((f) => f !== tool)
-      : [...favorites, tool];
-    onFavoritesChange(next);
-  };
-
-  return (
-    <div ref={groupRef} className="dt-lines-group">
-      <button
-        className={`drawing-tool-btn dt-lines-main${isFibGannActive ? ' is-active' : ''}`}
-        title={currentItem.label}
-        onClick={() => setPanelOpen((o) => !o)}
-      >
-        {currentItem.icon}
-      </button>
-      <button
-        className={`dt-pointer-expand${panelOpen ? ' is-open' : ''}`}
-        title="Fibonacci & Gann tools"
-        onClick={(e) => { e.stopPropagation(); setPanelOpen((o) => !o); }}
-      >
-        <svg viewBox="0 0 6 10" width="5" height="8" fill="currentColor">
-          <path d="M1 1l4 4-4 4" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round" />
-        </svg>
-      </button>
-      {panelOpen && (
-        <div className="dt-lines-panel dt-fibgann-panel">
-          {FIB_GANN_SECTIONS.map((section) => (
-            <div key={section.heading} className="dt-lines-section">
-              <div className="dt-lines-heading">{section.heading.toUpperCase()}</div>
-              {section.items.map((item) => {
-                const isFav = favorites.includes(item.tool as DrawingToolType);
-                return (
-                  <button
-                    key={item.tool}
-                    className={`dt-lines-item dt-fibgann-item${activeTool === (item.tool as DrawingToolType) ? ' is-active' : ''}`}
-                    onClick={() => { setLastTool(item.tool as DrawingToolType); onSelectTool(item.tool as DrawingToolType); setPanelOpen(false); }}
-                  >
-                    <span className="dt-lines-icon">{item.icon}</span>
-                    <span className="dt-lines-name">{item.label}</span>
-                    {item.shortcut && <span className="dt-lines-shortcut">{item.shortcut}</span>}
-                    <button
-                      className={`dt-star-btn${isFav ? ' is-starred' : ''}`}
-                      title={isFav ? 'Remove from favorites' : 'Add to favorites'}
-                      onClick={(e) => toggleFavorite(item.tool as DrawingToolType, e)}
-                    >
-                      <StarIcon filled={isFav} />
-                    </button>
-                  </button>
-                );
-              })}
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
-// ─── Favorites floating toolbar ───────────────────────────────────────────────
-
-function FavoritesFloatingToolbar({
-  favorites,
-  activeTool,
-  onSelectTool,
-}: {
-  favorites: DrawingToolType[];
-  activeTool: DrawingToolType;
-  onSelectTool: (tool: DrawingToolType) => void;
-}): React.ReactElement | null {
-  const [pos, setPos] = useState({ x: 60, y: 60 });
-  const [dragging, setDragging] = useState(false);
-  const dragOffset = useRef({ x: 0, y: 0 });
-
-  useEffect(() => {
-    if (!dragging) return;
-    const onMove = (e: MouseEvent) => {
-      setPos({ x: e.clientX - dragOffset.current.x, y: e.clientY - dragOffset.current.y });
-    };
-    const onUp = () => setDragging(false);
-    window.addEventListener('mousemove', onMove);
-    window.addEventListener('mouseup', onUp);
-    return () => {
-      window.removeEventListener('mousemove', onMove);
-      window.removeEventListener('mouseup', onUp);
-    };
-  }, [dragging]);
-
-  const validFavs = favorites.filter((f) => ALL_DRAWING_ITEM_MAP.has(f));
-  if (validFavs.length === 0) return null;
-
-  return ReactDOM.createPortal(
-    <div className="dt-favorites-toolbar" style={{ left: pos.x, top: pos.y }}>
-      <div
-        className="dt-favorites-handle"
-        title="Drag to reposition"
-        onMouseDown={(e) => {
-          dragOffset.current = { x: e.clientX - pos.x, y: e.clientY - pos.y };
-          setDragging(true);
-          e.preventDefault();
-        }}
-      >
-        <svg viewBox="0 0 6 12" width="4" height="10" fill="currentColor" opacity="0.5">
-          <circle cx="1.5" cy="2" r="1.2" />
-          <circle cx="1.5" cy="6" r="1.2" />
-          <circle cx="1.5" cy="10" r="1.2" />
-          <circle cx="4.5" cy="2" r="1.2" />
-          <circle cx="4.5" cy="6" r="1.2" />
-          <circle cx="4.5" cy="10" r="1.2" />
-        </svg>
-      </div>
-      {validFavs.map((tool) => {
-        const item = ALL_DRAWING_ITEM_MAP.get(tool)!;
-        return (
-          <button
-            key={tool}
-            className={`drawing-tool-btn dt-fav-btn${activeTool === tool ? ' is-active' : ''}`}
-            title={item.label}
-            onClick={() => onSelectTool(tool)}
-          >
-            {item.icon}
-          </button>
-        );
-      })}
-    </div>,
-    document.body,
-  );
-}
-
-// ─── Utility tools ────────────────────────────────────────────────────────────
-
-export type VisibilityAction = 'hideDrawings' | 'hideIndicators' | 'hidePositions' | 'hideAll';
-
-// Reusable expand chevron SVG
-const ExpandChevron = () => (
-  <svg viewBox="0 0 6 10" width="5" height="8" fill="currentColor">
-    <path d="M1 1l4 4-4 4" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round" />
-  </svg>
-);
-
-// ─── Visibility tool ──────────────────────────────────────────────────────────
-
-function VisibilityTool({
-  onAction,
-  activeAction,
-  onDeactivate,
-}: {
-  onAction?: (action: VisibilityAction) => void;
-  activeAction?: VisibilityAction | null;
-  onDeactivate?: () => void;
-}): React.ReactElement {
-  const [flyoutOpen, setFlyoutOpen] = useState(false);
-  const groupRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (!flyoutOpen) return;
-    const handler = (e: MouseEvent) => {
-      if (groupRef.current && !groupRef.current.contains(e.target as Node)) setFlyoutOpen(false);
-    };
-    document.addEventListener('mousedown', handler);
-    return () => document.removeEventListener('mousedown', handler);
-  }, [flyoutOpen]);
-
-  const VISIBILITY_ITEMS: { action: VisibilityAction; label: string }[] = [
-    { action: 'hideDrawings',   label: 'Hide drawings' },
-    { action: 'hideIndicators', label: 'Hide indicators' },
-    { action: 'hidePositions',  label: 'Hide positions and orders' },
-    { action: 'hideAll',        label: 'Hide all' },
-  ];
-
-  return (
-    <div ref={groupRef} className="dt-pointer-group">
-      <button
-        className={`drawing-tool-btn dt-pointer-main${activeAction ? ' dt-vis-active' : ''}`}
-        title={activeAction ? 'Restore visibility' : 'Visibility'}
-        onClick={() => {
-          if (activeAction) {
-            onDeactivate?.();
-          } else {
-            setFlyoutOpen((o) => !o);
-          }
-        }}
-      >
-        {/* Eye with strikethrough */}
-        <svg viewBox="0 0 16 16" width="15" height="15" stroke="currentColor" fill="none" strokeWidth="1.6" strokeLinecap="round">
-          <path d="M1 8 Q4 3 8 3 Q12 3 15 8 Q12 13 8 13 Q4 13 1 8" />
-          <circle cx="8" cy="8" r="2.2" />
-          <line x1="2.5" y1="13.5" x2="13.5" y2="2.5" strokeWidth="1.5" />
-        </svg>
-      </button>
-      <button
-        className={`dt-pointer-expand${flyoutOpen ? ' is-open' : ''}`}
-        title="Visibility options"
-        onClick={(e) => { e.stopPropagation(); setFlyoutOpen((o) => !o); }}
-      >
-        <ExpandChevron />
-      </button>
-      {flyoutOpen && (
-        <div className="dt-pointer-flyout">
-          {VISIBILITY_ITEMS.map(({ action, label }) => (
-            <button
-              key={action}
-              className={`dt-flyout-item${activeAction === action ? ' is-active' : ''}`}
-              onClick={() => { onAction?.(action); setFlyoutOpen(false); }}
-            >
-              <span className="dt-flyout-name">{label}</span>
-              {activeAction === action && <span className="dt-flyout-check">✓</span>}
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
-// ─── LeftToolbar ──────────────────────────────────────────────────────────────
-
-type Props = {
-  activeTool: DrawingToolType;
-  onSelectTool: (tool: DrawingToolType) => void;
-  /** Current drawing-tool favorites, controlled by the parent. */
-  drawingFavorites?: DrawingToolType[];
-  /** Called when the user stars/unstars a drawing tool. */
-  onDrawingFavoritesChange?: (favs: DrawingToolType[]) => void;
-  onVisibilityAction?: (action: VisibilityAction) => void;
-  visibilityActiveAction?: VisibilityAction | null;
-  onVisibilityDeactivate?: () => void;
-  onLinkClick?: () => void;
-  onDeleteClick?: () => void;
-};
-
-export function LeftToolbar({ activeTool, onSelectTool, drawingFavorites, onDrawingFavoritesChange, onVisibilityAction, visibilityActiveAction, onVisibilityDeactivate, onLinkClick, onDeleteClick }: Props): React.ReactElement {
-  const [favorites, setFavorites] = useState<DrawingToolType[]>(drawingFavorites ?? []);
-
-  const handleFavoritesChange = (favs: DrawingToolType[]) => {
-    setFavorites(favs);
-    onDrawingFavoritesChange?.(favs);
-  };
-
-  return (
-    <>
-      <div
-        style={{
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          gap: 2,
-          padding: '6px 4px',
-          background: 'var(--toolbar-bg)',
-          borderRadius: 8,
-          width: 40,
-          flexShrink: 0,
-          userSelect: 'none',
-        }}
-      >
-        <PointerGroup activeTool={activeTool} onSelectTool={onSelectTool} />
-
-        <LinesGroup
-          activeTool={activeTool}
-          favorites={favorites}
-          onSelectTool={onSelectTool}
-          onFavoritesChange={handleFavoritesChange}
-        />
-
-        <FibGannGroup
-          activeTool={activeTool}
-          favorites={favorites}
-          onSelectTool={onSelectTool}
-          onFavoritesChange={handleFavoritesChange}
-        />
-
-        {OTHER_TOOL_ORDER.map((tool) => {
-          const isFav = favorites.includes(tool as DrawingToolType);
-          return (
-            <div key={tool} className="dt-other-tool-wrap">
-              <button
-                title={OTHER_LABELS[tool]}
-                onClick={() => onSelectTool(tool as DrawingType)}
-                className={`drawing-tool-btn${activeTool === tool ? ' is-active' : ''}`}
-              >
-                {OTHER_ICONS[tool]}
-              </button>
-              <button
-                className={`dt-star-btn dt-other-star${isFav ? ' is-starred' : ''}`}
-                title={isFav ? 'Remove from favorites' : 'Add to favorites'}
-                onClick={() => handleFavoritesChange(
-                  isFav
-                    ? favorites.filter((f) => f !== (tool as DrawingToolType))
-                    : [...favorites, tool as DrawingToolType]
-                )}
-              >
-                <StarIcon filled={isFav} />
-              </button>
-            </div>
-          );
-        })}
-
-        <VisibilityTool
-          {...(onVisibilityAction ? { onAction: onVisibilityAction } : {})}
-          activeAction={visibilityActiveAction ?? null}
-          {...(onVisibilityDeactivate ? { onDeactivate: onVisibilityDeactivate } : {})}
-        />
-
-        {/* Link / sync */}
-        <button
-          className="drawing-tool-btn"
-          title="Link chart"
-          onClick={onLinkClick}
-        >
-          <svg viewBox="0 0 16 16" width="15" height="15" stroke="currentColor" fill="none" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
-            <path d="M7 9 A3.5 3.5 0 0 0 9.5 5.5 L11 4 A2.5 2.5 0 1 1 14.5 7.5 L13 9 A3.5 3.5 0 0 1 9.5 10.5" />
-            <path d="M9 7 A3.5 3.5 0 0 0 6.5 10.5 L5 12 A2.5 2.5 0 1 1 1.5 8.5 L3 7 A3.5 3.5 0 0 1 6.5 5.5" />
-          </svg>
-        </button>
-
-        {/* Delete / trash */}
-        <button
-          className="drawing-tool-btn"
-          title="Remove selected drawing"
-          onClick={onDeleteClick}
-        >
-          <svg viewBox="0 0 16 16" width="15" height="15" stroke="currentColor" fill="none" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
-            <line x1="2.5" y1="4" x2="13.5" y2="4" />
-            <path d="M5.5 4 V13 A1 1 0 0 0 6.5 14 H9.5 A1 1 0 0 0 10.5 13 V4" />
-            <line x1="6" y1="2" x2="10" y2="2" />
-            <line x1="7" y1="6.5" x2="7" y2="11.5" />
-            <line x1="9" y1="6.5" x2="9" y2="11.5" />
-          </svg>
-        </button>
-      </div>
-
-      <FavoritesFloatingToolbar
-        favorites={favorites}
-        activeTool={activeTool}
-        onSelectTool={onSelectTool}
-      />
-    </>
-  );
-}