@forgecharts/sdk 1.1.23 → 1.1.27

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

@@ -0,0 +1,1096 @@
+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}
+      />
+    </>
+  );
+}