hyperprop-charting-library 0.1.152 → 0.1.154

package/dist/hyperprop-charting-library.cjs

@@ -22,6 +22,9 @@ var index_exports = {};
 __export(index_exports, {
   CHART_THEMES: () => CHART_THEMES,
   CHART_THEME_NAMES: () => CHART_THEME_NAMES,
+  DRAWING_ICON_STROKE_WIDTH: () => DRAWING_ICON_STROKE_WIDTH,
+  DRAWING_ICON_VIEWBOX: () => DRAWING_ICON_VIEWBOX,
+  DRAWING_TOOL_ICONS: () => DRAWING_TOOL_ICONS,
   FIB_DEFAULT_PALETTE: () => FIB_DEFAULT_PALETTE,
   POSITION_DEFAULT_COLORS: () => POSITION_DEFAULT_COLORS,
   SCRIPT_SOURCE_INPUT_VALUES: () => SCRIPT_SOURCE_INPUT_VALUES,
@@ -3168,6 +3171,94 @@ var compileScriptIndicator = (definition) => {
   return plugin;
 };
 
+// src/icons.ts
+var DRAWING_ICON_VIEWBOX = 28;
+var DRAWING_ICON_STROKE_WIDTH = 1.6;
+var dot = (cx, cy) => ({ kind: "circle", cx, cy, r: 2.1 });
+var path = (d, extra) => ({
+  kind: "path",
+  d,
+  ...extra
+});
+var DRAWING_TOOL_ICONS = {
+  "cursor-cross": [path("M14 4v6.5M14 17.5V24M4 14h6.5M17.5 14H24")],
+  "cursor-dot": [{ kind: "circle", cx: 14, cy: 14, r: 2.6, fill: true }],
+  "cursor-arrow": [path("M10 4.5v16.4l4.3-4.1 3 6.7 2.9-1.3-3-6.7h5.9L10 4.5Z")],
+  trendline: [dot(7, 21), dot(21, 7), path("M8.6 19.4 19.4 8.6")],
+  "horizontal-line": [dot(14, 14), path("M3.5 14h8.4M16.1 14h8.4")],
+  "vertical-line": [dot(14, 14), path("M14 3.5v8.4M14 16.1v8.4")],
+  ray: [dot(7.5, 20.5), path("M9 19 24 4")],
+  arrow: [dot(6, 22), path("M7.6 20.4 21.4 6.6"), path("M14.6 6.2h7.2v7.2")],
+  "parallel-channel": [dot(6, 17), dot(17, 6), path("M7.5 15.5 15.5 7.5"), path("M11 23.5 23.5 11")],
+  "fib-retracement": [
+    dot(6, 7),
+    path("M9.6 7h14.9"),
+    path("M3.5 14h21"),
+    dot(6, 21),
+    path("M9.6 21h14.9")
+  ],
+  "fib-extension": [
+    dot(6.5, 21.5),
+    dot(12.5, 6.5),
+    path("M7.5 19.1l4-9.2"),
+    path("M17 7h7.5M17 14h7.5M17 21h7.5")
+  ],
+  // Long/short: three price levels (target, entry, stop) with anchor dots and
+  // a dotted "price path" diagonal running from entry toward the target.
+  "long-position": [
+    dot(5, 6.5),
+    path("M8.6 6.5h15.9"),
+    dot(5, 16),
+    path("M8.6 16h10.3"),
+    dot(21, 16),
+    path("M8.6 22.5h15.9"),
+    dot(5, 22.5),
+    path("M10.5 14 22 7.8", { dash: "2 3.2" })
+  ],
+  "short-position": [
+    dot(5, 21.5),
+    path("M8.6 21.5h15.9"),
+    dot(5, 12),
+    path("M8.6 12h10.3"),
+    dot(21, 12),
+    path("M8.6 5.5h15.9"),
+    dot(5, 5.5),
+    path("M10.5 14 22 20.2", { dash: "2 3.2" })
+  ],
+  "price-range": [
+    path("M8 5h12M8 23h12"),
+    path("M14 7v14"),
+    path("M11.2 9.8 14 7l2.8 2.8M11.2 18.2 14 21l2.8-2.8")
+  ],
+  // Fixed range VP: two vertical range anchors with the profile bars attached
+  // to the left one.
+  "fixed-range-volume-profile": [
+    path("M5 3.5v15.4"),
+    dot(5, 21.5),
+    dot(23, 6.5),
+    path("M23 9.1v15.4"),
+    { kind: "rect", x: 5, y: 6, width: 7, height: 3.2 },
+    { kind: "rect", x: 5, y: 11, width: 10.5, height: 3.2 },
+    { kind: "rect", x: 5, y: 16, width: 4.5, height: 3.2 }
+  ],
+  measure: [
+    path("M4.5 18.5 18.5 4.5l5 5L9.5 23.5Z"),
+    path("m8 15 1.8 1.8M11.5 11.5 14 14M15 8l1.8 1.8")
+  ],
+  rectangle: [
+    dot(6, 8),
+    dot(22, 8),
+    dot(22, 20),
+    dot(6, 20),
+    path("M8.1 8h11.8M8.1 20h11.8M6 10.1v7.8M22 10.1v7.8")
+  ],
+  ellipse: [path("M6.1 14a7.9 6.9 0 1 0 15.8 0 7.9 6.9 0 1 0-15.8 0"), dot(4, 14), dot(24, 14)],
+  brush: [dot(5, 20), path("M6.9 18.4c2.6-6 5-.6 8.4-3.2 3-2.3 5.4-6 8.2-7.9")],
+  text: [path("M7 8.5V6h14v2.5"), path("M14 6v16M11 22h6")],
+  note: [path("M5.5 5h17v11.5l-6 6h-11V5Z"), path("M22.5 16.5h-6v6")],
+  callout: [path("M4.5 6h19v11.5H13L8 22.5v-5H4.5V6Z")]
+};
+
 // src/themes.ts
 var CHART_THEMES = {
   midnight: {
@@ -4690,9 +4781,9 @@ function createChart(element, options = {}) {
   const groupThousands = (value, decimals) => {
     const negative = value < 0;
     const fixed = Math.abs(value).toFixed(decimals);
-    const dot = fixed.indexOf(".");
-    const intPart = dot === -1 ? fixed : fixed.slice(0, dot);
-    const decPart = dot === -1 ? "" : fixed.slice(dot);
+    const dot2 = fixed.indexOf(".");
+    const intPart = dot2 === -1 ? fixed : fixed.slice(0, dot2);
+    const decPart = dot2 === -1 ? "" : fixed.slice(dot2);
     const grouped = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
     return `${negative ? "-" : ""}${grouped}${decPart}`;
   };
@@ -6289,6 +6380,8 @@ function createChart(element, options = {}) {
             const palette = drawing.colors.length > 0 ? drawing.colors : null;
             const levelColorAt = (index) => palette ? palette[index % palette.length] : drawing.color;
             const move = p1.price - p0.price;
+            const lineLeft = Math.min(x0, x1, x2);
+            const lineRight = Math.max(x0, x1, x2);
             const levelLines = FIB_EXT_RATIOS.map((ratio) => {
               const price = p2.price + move * ratio;
               return { ratio, price, y: yFromPrice(price) };
@@ -6301,7 +6394,7 @@ function createChart(element, options = {}) {
               ctx.save();
               ctx.fillStyle = hexToRgba(levelColorAt(index), 0.1);
               ctx.globalAlpha = draft ? 0.5 : 1;
-              ctx.fillRect(chartLeft, bandTop, chartRight - chartLeft, bandBottom - bandTop);
+              ctx.fillRect(lineLeft, bandTop, lineRight - lineLeft, bandBottom - bandTop);
               ctx.restore();
             }
             ctx.save();
@@ -6310,8 +6403,8 @@ function createChart(element, options = {}) {
             levelLines.forEach((level, index) => {
               ctx.strokeStyle = levelColorAt(index);
               ctx.beginPath();
-              ctx.moveTo(crisp(chartLeft), crisp(level.y));
-              ctx.lineTo(crisp(chartRight), crisp(level.y));
+              ctx.moveTo(crisp(lineLeft), crisp(level.y));
+              ctx.lineTo(crisp(lineRight), crisp(level.y));
               ctx.stroke();
             });
             ctx.restore();
@@ -6321,7 +6414,7 @@ function createChart(element, options = {}) {
               const labelText = `${level.ratio} (${formatPrice(level.price)})`;
               const textWidth = measureTextWidth(labelText);
               const padding = 4;
-              const bgX = chartLeft + 4;
+              const bgX = Math.max(chartLeft + 2, lineLeft - textWidth - padding * 2 - 4);
               const bgY = level.y - 9;
               ctx.fillStyle = mergedOptions.backgroundColor;
               fillRoundedRect(bgX, bgY, textWidth + padding * 2, 16, 3);
@@ -7270,12 +7363,12 @@ function createChart(element, options = {}) {
       const upColumns = new Path2D();
       const downColumns = new Path2D();
       for (const column of seriesColumns) {
-        const path = column.close >= column.open ? upColumns : downColumns;
+        const path2 = column.close >= column.open ? upColumns : downColumns;
         const x = column.x + 0.5;
         const top = crisp(yFromPrice(column.high));
         const bottom = crisp(yFromPrice(column.low));
-        path.moveTo(x, top);
-        path.lineTo(x, bottom === top ? bottom + 1 : bottom);
+        path2.moveTo(x, top);
+        path2.lineTo(x, bottom === top ? bottom + 1 : bottom);
       }
       ctx.lineWidth = 1;
       ctx.strokeStyle = mergedOptions.upColor;
@@ -7418,16 +7511,16 @@ function createChart(element, options = {}) {
         const displayLow = isLastCandle && actualDirection === "down" ? Math.min(point.l, displayClose) : point.l;
         const roundedCenterX = Math.round(chartLeft + (index + 0.5 - xStart) / xSpan * chartWidth);
         const direction = isLastCandle ? actualDirection : getCandleDirectionByIndex(index);
-        const path = direction === "up" ? upBars : downBars;
+        const path2 = direction === "up" ? upBars : downBars;
         const centerX = roundedCenterX + 0.5;
-        path.moveTo(centerX, crisp(yFromPrice(displayHigh)));
-        path.lineTo(centerX, crisp(yFromPrice(displayLow)));
+        path2.moveTo(centerX, crisp(yFromPrice(displayHigh)));
+        path2.lineTo(centerX, crisp(yFromPrice(displayLow)));
         const openY = crisp(yFromPrice(point.o));
         const closeY = crisp(yFromPrice(displayClose));
-        path.moveTo(centerX - tickLength, openY);
-        path.lineTo(centerX, openY);
-        path.moveTo(centerX, closeY);
-        path.lineTo(centerX + tickLength, closeY);
+        path2.moveTo(centerX - tickLength, openY);
+        path2.lineTo(centerX, openY);
+        path2.moveTo(centerX, closeY);
+        path2.lineTo(centerX + tickLength, closeY);
       }
       ctx.lineWidth = Math.max(1, candleWickWidth);
       ctx.strokeStyle = mergedOptions.upColor;
@@ -7495,7 +7588,7 @@ function createChart(element, options = {}) {
     for (const plan of comparePlans) {
       const color = plan.state.options.color ?? "#f59e0b";
       const lineWidth = Math.max(1, plan.state.options.lineWidth ?? 1.5);
-      const path = new Path2D();
+      const path2 = new Path2D();
       let started = false;
       let firstX = 0;
       let lastX = 0;
@@ -7503,11 +7596,11 @@ function createChart(element, options = {}) {
       let lastPrice = Number.NaN;
       const emit = (x, y) => {
         if (!started) {
-          path.moveTo(x, y);
+          path2.moveTo(x, y);
           firstX = x;
           started = true;
         } else {
-          path.lineTo(x, y);
+          path2.lineTo(x, y);
         }
         lastX = x;
         lastY = y;
@@ -7565,7 +7658,7 @@ function createChart(element, options = {}) {
       }
       if (!started) continue;
       if (plan.state.options.style === "area") {
-        const fillPath = new Path2D(path);
+        const fillPath = new Path2D(path2);
         fillPath.lineTo(lastX, chartBottom);
         fillPath.lineTo(firstX, chartBottom);
         fillPath.closePath();
@@ -7579,7 +7672,7 @@ function createChart(element, options = {}) {
       ctx.strokeStyle = color;
       ctx.lineWidth = lineWidth;
       ctx.lineJoin = "round";
-      ctx.stroke(path);
+      ctx.stroke(path2);
       ctx.restore();
       if (Number.isFinite(lastPrice)) {
         const label = plan.state.options.label ?? plan.state.options.id;
@@ -9387,12 +9480,16 @@ function createChart(element, options = {}) {
         if (Math.hypot(x - x2, y - y2) <= 9 * hitTolerance) {
           return { drawing, target: "handle", pointIndex: 1 };
         }
-        const fibRatios = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1, 1.618];
-        for (const ratio of fibRatios) {
-          const price = first.price + (second.price - first.price) * (1 - ratio);
-          const lineY = canvasYFromDrawingPrice(price);
-          if (Math.abs(y - lineY) <= 5 * hitTolerance) {
-            return { drawing, target: "line" };
+        const fibLeft = Math.min(x1, x2) - 5 * hitTolerance;
+        const fibRight = Math.max(x1, x2) + 5 * hitTolerance;
+        if (x >= fibLeft && x <= fibRight) {
+          const fibRatios = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1, 1.618];
+          for (const ratio of fibRatios) {
+            const price = first.price + (second.price - first.price) * (1 - ratio);
+            const lineY = canvasYFromDrawingPrice(price);
+            if (Math.abs(y - lineY) <= 5 * hitTolerance) {
+              return { drawing, target: "line" };
+            }
           }
         }
       } else if (drawing.type === "fib-extension") {
@@ -9417,11 +9514,15 @@ function createChart(element, options = {}) {
             return { drawing, target: "handle", pointIndex: 2 };
           }
           const move = p1.price - p0.price;
-          const fibExtRatios = [0, 0.382, 0.5, 0.618, 1, 1.272, 1.618, 2.618];
-          for (const ratio of fibExtRatios) {
-            const lineY = canvasYFromDrawingPrice(p2.price + move * ratio);
-            if (Math.abs(y - lineY) <= 5 * hitTolerance) {
-              return { drawing, target: "line" };
+          const extLeft = Math.min(x0, x1, x2) - 5 * hitTolerance;
+          const extRight = Math.max(x0, x1, x2) + 5 * hitTolerance;
+          if (x >= extLeft && x <= extRight) {
+            const fibExtRatios = [0, 0.382, 0.5, 0.618, 1, 1.272, 1.618, 2.618];
+            for (const ratio of fibExtRatios) {
+              const lineY = canvasYFromDrawingPrice(p2.price + move * ratio);
+              if (Math.abs(y - lineY) <= 5 * hitTolerance) {
+                return { drawing, target: "line" };
+              }
             }
           }
           if (distanceToSegment(x, y, x0, y0, x1, y1) <= 6 * hitTolerance || distanceToSegment(x, y, x1, y1, x2, y2) <= 6 * hitTolerance) {
@@ -12376,6 +12477,9 @@ function createChart(element, options = {}) {
 0 && (module.exports = {
   CHART_THEMES,
   CHART_THEME_NAMES,
+  DRAWING_ICON_STROKE_WIDTH,
+  DRAWING_ICON_VIEWBOX,
+  DRAWING_TOOL_ICONS,
   FIB_DEFAULT_PALETTE,
   POSITION_DEFAULT_COLORS,
   SCRIPT_SOURCE_INPUT_VALUES,

package/dist/hyperprop-charting-library.d.ts

@@ -1441,6 +1441,45 @@ declare const validateScriptSource: (source: string) => string | null;
  */
 declare const compileScriptIndicator: (definition: ScriptIndicatorDefinition) => IndicatorPlugin;
 
+/**
+ * Hyperprop drawing-tool icon pack — framework-agnostic geometry.
+ *
+ * Original artwork drawn in the visual language traders know from desktop
+ * charting platforms: a 28x28 grid, thin round-capped outlines, and hollow
+ * "anchor" dots on anything line-based (a dot marks a draggable point of the
+ * tool). The data here is plain shape descriptions so every consumer renders
+ * the identical set: the web terminal maps it to DOM `<svg>` elements and the
+ * mobile app to react-native-svg components.
+ *
+ * Design rules when adding icons:
+ *   - viewBox 0 0 28 28, strokeWidth 1.6, round caps/joins, no fill (except
+ *     shapes marked `fill: true`).
+ *   - Anchor dots are hollow circles r=2.1; lines stop ~1.5px short of them.
+ *   - Keep 3.5px padding to the edges so glyphs optically match.
+ */
+type DrawingIconShape = {
+    kind: "path";
+    d: string;
+    dash?: string;
+    fill?: boolean;
+} | {
+    kind: "circle";
+    cx: number;
+    cy: number;
+    r: number;
+    fill?: boolean;
+} | {
+    kind: "rect";
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+type DrawingIconName = "cursor-cross" | "cursor-dot" | "cursor-arrow" | "trendline" | "horizontal-line" | "vertical-line" | "ray" | "arrow" | "parallel-channel" | "fib-retracement" | "fib-extension" | "long-position" | "short-position" | "price-range" | "fixed-range-volume-profile" | "measure" | "rectangle" | "ellipse" | "brush" | "text" | "note" | "callout";
+declare const DRAWING_ICON_VIEWBOX = 28;
+declare const DRAWING_ICON_STROKE_WIDTH = 1.6;
+declare const DRAWING_TOOL_ICONS: Record<DrawingIconName, DrawingIconShape[]>;
+
 /**
  * Built-in palettes.
  *
@@ -1465,4 +1504,4 @@ declare const SESSION_PRESETS: Record<SessionPresetName, SessionSpec>;
 
 declare function createChart(element: HTMLElement, options?: ChartOptions): ChartInstance;
 
-export { type AccessibilityOptions, type AlertActionEvent, type AlertCondition, type AlertOptions, type AlertTriggerEvent, type AnimationOptions, type AxisOptions, type BarMarkOptions, type BuiltInIndicatorInfo, CHART_THEMES, CHART_THEME_NAMES, type ChartClickEvent, type ChartContextMenuEvent, type ChartContextMenuRegion, type ChartDatafeed, type ChartInstance, type ChartKeyboardAction, type ChartKeyboardShortcutEvent, type ChartLongPressEvent, type ChartOptions, type ChartSavedState, type ChartTheme, type ChartThemeName, type ChartTimezone, type ChartType, type CompareSeriesOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type DataLineOptions, type DatafeedBarsRequest, type DatafeedOptions, type DownsamplingOptions, type DrawingBounds, type DrawingDefaults, type DrawingHoverEvent, type DrawingObjectOptions, type DrawingPoint, type DrawingSelectEvent, type DrawingSelectionChangeEvent, type DrawingToolType, FIB_DEFAULT_PALETTE, type GridOptions, type HistoryOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPaneActionEvent, type IndicatorPaneAxisOptions, type IndicatorPaneGuideLine, type IndicatorPaneHeightChangeEvent, type IndicatorPaneRenderInfo, type IndicatorPaneValue, type IndicatorPaneValueLabel, type IndicatorPlugin, type IndicatorRenderContext, type IndicatorUpdateOptions, type KeyboardOptions, type LabelsOptions, type MarkClickEvent, type MarkHoverEvent, type MarkShape, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, POSITION_DEFAULT_COLORS, type PriceLineOptions, type PriceScaleMode, type PriceScaleOptions, type ReplayStartOptions, type ReplayState, SCRIPT_SOURCE_INPUT_VALUES, SESSION_PRESETS, type ScriptComputeResult, type ScriptIndicatorDefinition, type ScriptIndicatorInputDef, type ScriptInputHelper, type ScriptInputOptions, type ScriptPlotSpec, type SessionOptions, type SessionPresetName, type SessionSegment, type SessionSpec, type TickerLineOptions, type TimeFormat, type TimescaleMarkOptions, type TouchOptions, type TradeMarkerOptions, type UndoRedoState, type ViewportState, type WatermarkOptions, compileScriptIndicator, createChart, extractScriptInputs, isValidTimeZone, validateScriptSource };
+export { type AccessibilityOptions, type AlertActionEvent, type AlertCondition, type AlertOptions, type AlertTriggerEvent, type AnimationOptions, type AxisOptions, type BarMarkOptions, type BuiltInIndicatorInfo, CHART_THEMES, CHART_THEME_NAMES, type ChartClickEvent, type ChartContextMenuEvent, type ChartContextMenuRegion, type ChartDatafeed, type ChartInstance, type ChartKeyboardAction, type ChartKeyboardShortcutEvent, type ChartLongPressEvent, type ChartOptions, type ChartSavedState, type ChartTheme, type ChartThemeName, type ChartTimezone, type ChartType, type CompareSeriesOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, DRAWING_ICON_STROKE_WIDTH, DRAWING_ICON_VIEWBOX, DRAWING_TOOL_ICONS, type DashPatternOptions, type DataLineOptions, type DatafeedBarsRequest, type DatafeedOptions, type DownsamplingOptions, type DrawingBounds, type DrawingDefaults, type DrawingHoverEvent, type DrawingIconName, type DrawingIconShape, type DrawingObjectOptions, type DrawingPoint, type DrawingSelectEvent, type DrawingSelectionChangeEvent, type DrawingToolType, FIB_DEFAULT_PALETTE, type GridOptions, type HistoryOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPaneActionEvent, type IndicatorPaneAxisOptions, type IndicatorPaneGuideLine, type IndicatorPaneHeightChangeEvent, type IndicatorPaneRenderInfo, type IndicatorPaneValue, type IndicatorPaneValueLabel, type IndicatorPlugin, type IndicatorRenderContext, type IndicatorUpdateOptions, type KeyboardOptions, type LabelsOptions, type MarkClickEvent, type MarkHoverEvent, type MarkShape, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, POSITION_DEFAULT_COLORS, type PriceLineOptions, type PriceScaleMode, type PriceScaleOptions, type ReplayStartOptions, type ReplayState, SCRIPT_SOURCE_INPUT_VALUES, SESSION_PRESETS, type ScriptComputeResult, type ScriptIndicatorDefinition, type ScriptIndicatorInputDef, type ScriptInputHelper, type ScriptInputOptions, type ScriptPlotSpec, type SessionOptions, type SessionPresetName, type SessionSegment, type SessionSpec, type TickerLineOptions, type TimeFormat, type TimescaleMarkOptions, type TouchOptions, type TradeMarkerOptions, type UndoRedoState, type ViewportState, type WatermarkOptions, compileScriptIndicator, createChart, extractScriptInputs, isValidTimeZone, validateScriptSource };

package/dist/hyperprop-charting-library.js

@@ -3132,6 +3132,94 @@ var compileScriptIndicator = (definition) => {
   return plugin;
 };
 
+// src/icons.ts
+var DRAWING_ICON_VIEWBOX = 28;
+var DRAWING_ICON_STROKE_WIDTH = 1.6;
+var dot = (cx, cy) => ({ kind: "circle", cx, cy, r: 2.1 });
+var path = (d, extra) => ({
+  kind: "path",
+  d,
+  ...extra
+});
+var DRAWING_TOOL_ICONS = {
+  "cursor-cross": [path("M14 4v6.5M14 17.5V24M4 14h6.5M17.5 14H24")],
+  "cursor-dot": [{ kind: "circle", cx: 14, cy: 14, r: 2.6, fill: true }],
+  "cursor-arrow": [path("M10 4.5v16.4l4.3-4.1 3 6.7 2.9-1.3-3-6.7h5.9L10 4.5Z")],
+  trendline: [dot(7, 21), dot(21, 7), path("M8.6 19.4 19.4 8.6")],
+  "horizontal-line": [dot(14, 14), path("M3.5 14h8.4M16.1 14h8.4")],
+  "vertical-line": [dot(14, 14), path("M14 3.5v8.4M14 16.1v8.4")],
+  ray: [dot(7.5, 20.5), path("M9 19 24 4")],
+  arrow: [dot(6, 22), path("M7.6 20.4 21.4 6.6"), path("M14.6 6.2h7.2v7.2")],
+  "parallel-channel": [dot(6, 17), dot(17, 6), path("M7.5 15.5 15.5 7.5"), path("M11 23.5 23.5 11")],
+  "fib-retracement": [
+    dot(6, 7),
+    path("M9.6 7h14.9"),
+    path("M3.5 14h21"),
+    dot(6, 21),
+    path("M9.6 21h14.9")
+  ],
+  "fib-extension": [
+    dot(6.5, 21.5),
+    dot(12.5, 6.5),
+    path("M7.5 19.1l4-9.2"),
+    path("M17 7h7.5M17 14h7.5M17 21h7.5")
+  ],
+  // Long/short: three price levels (target, entry, stop) with anchor dots and
+  // a dotted "price path" diagonal running from entry toward the target.
+  "long-position": [
+    dot(5, 6.5),
+    path("M8.6 6.5h15.9"),
+    dot(5, 16),
+    path("M8.6 16h10.3"),
+    dot(21, 16),
+    path("M8.6 22.5h15.9"),
+    dot(5, 22.5),
+    path("M10.5 14 22 7.8", { dash: "2 3.2" })
+  ],
+  "short-position": [
+    dot(5, 21.5),
+    path("M8.6 21.5h15.9"),
+    dot(5, 12),
+    path("M8.6 12h10.3"),
+    dot(21, 12),
+    path("M8.6 5.5h15.9"),
+    dot(5, 5.5),
+    path("M10.5 14 22 20.2", { dash: "2 3.2" })
+  ],
+  "price-range": [
+    path("M8 5h12M8 23h12"),
+    path("M14 7v14"),
+    path("M11.2 9.8 14 7l2.8 2.8M11.2 18.2 14 21l2.8-2.8")
+  ],
+  // Fixed range VP: two vertical range anchors with the profile bars attached
+  // to the left one.
+  "fixed-range-volume-profile": [
+    path("M5 3.5v15.4"),
+    dot(5, 21.5),
+    dot(23, 6.5),
+    path("M23 9.1v15.4"),
+    { kind: "rect", x: 5, y: 6, width: 7, height: 3.2 },
+    { kind: "rect", x: 5, y: 11, width: 10.5, height: 3.2 },
+    { kind: "rect", x: 5, y: 16, width: 4.5, height: 3.2 }
+  ],
+  measure: [
+    path("M4.5 18.5 18.5 4.5l5 5L9.5 23.5Z"),
+    path("m8 15 1.8 1.8M11.5 11.5 14 14M15 8l1.8 1.8")
+  ],
+  rectangle: [
+    dot(6, 8),
+    dot(22, 8),
+    dot(22, 20),
+    dot(6, 20),
+    path("M8.1 8h11.8M8.1 20h11.8M6 10.1v7.8M22 10.1v7.8")
+  ],
+  ellipse: [path("M6.1 14a7.9 6.9 0 1 0 15.8 0 7.9 6.9 0 1 0-15.8 0"), dot(4, 14), dot(24, 14)],
+  brush: [dot(5, 20), path("M6.9 18.4c2.6-6 5-.6 8.4-3.2 3-2.3 5.4-6 8.2-7.9")],
+  text: [path("M7 8.5V6h14v2.5"), path("M14 6v16M11 22h6")],
+  note: [path("M5.5 5h17v11.5l-6 6h-11V5Z"), path("M22.5 16.5h-6v6")],
+  callout: [path("M4.5 6h19v11.5H13L8 22.5v-5H4.5V6Z")]
+};
+
 // src/themes.ts
 var CHART_THEMES = {
   midnight: {
@@ -4654,9 +4742,9 @@ function createChart(element, options = {}) {
   const groupThousands = (value, decimals) => {
     const negative = value < 0;
     const fixed = Math.abs(value).toFixed(decimals);
-    const dot = fixed.indexOf(".");
-    const intPart = dot === -1 ? fixed : fixed.slice(0, dot);
-    const decPart = dot === -1 ? "" : fixed.slice(dot);
+    const dot2 = fixed.indexOf(".");
+    const intPart = dot2 === -1 ? fixed : fixed.slice(0, dot2);
+    const decPart = dot2 === -1 ? "" : fixed.slice(dot2);
     const grouped = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
     return `${negative ? "-" : ""}${grouped}${decPart}`;
   };
@@ -6253,6 +6341,8 @@ function createChart(element, options = {}) {
             const palette = drawing.colors.length > 0 ? drawing.colors : null;
             const levelColorAt = (index) => palette ? palette[index % palette.length] : drawing.color;
             const move = p1.price - p0.price;
+            const lineLeft = Math.min(x0, x1, x2);
+            const lineRight = Math.max(x0, x1, x2);
             const levelLines = FIB_EXT_RATIOS.map((ratio) => {
               const price = p2.price + move * ratio;
               return { ratio, price, y: yFromPrice(price) };
@@ -6265,7 +6355,7 @@ function createChart(element, options = {}) {
               ctx.save();
               ctx.fillStyle = hexToRgba(levelColorAt(index), 0.1);
               ctx.globalAlpha = draft ? 0.5 : 1;
-              ctx.fillRect(chartLeft, bandTop, chartRight - chartLeft, bandBottom - bandTop);
+              ctx.fillRect(lineLeft, bandTop, lineRight - lineLeft, bandBottom - bandTop);
               ctx.restore();
             }
             ctx.save();
@@ -6274,8 +6364,8 @@ function createChart(element, options = {}) {
             levelLines.forEach((level, index) => {
               ctx.strokeStyle = levelColorAt(index);
               ctx.beginPath();
-              ctx.moveTo(crisp(chartLeft), crisp(level.y));
-              ctx.lineTo(crisp(chartRight), crisp(level.y));
+              ctx.moveTo(crisp(lineLeft), crisp(level.y));
+              ctx.lineTo(crisp(lineRight), crisp(level.y));
               ctx.stroke();
             });
             ctx.restore();
@@ -6285,7 +6375,7 @@ function createChart(element, options = {}) {
               const labelText = `${level.ratio} (${formatPrice(level.price)})`;
               const textWidth = measureTextWidth(labelText);
               const padding = 4;
-              const bgX = chartLeft + 4;
+              const bgX = Math.max(chartLeft + 2, lineLeft - textWidth - padding * 2 - 4);
               const bgY = level.y - 9;
               ctx.fillStyle = mergedOptions.backgroundColor;
               fillRoundedRect(bgX, bgY, textWidth + padding * 2, 16, 3);
@@ -7234,12 +7324,12 @@ function createChart(element, options = {}) {
       const upColumns = new Path2D();
       const downColumns = new Path2D();
       for (const column of seriesColumns) {
-        const path = column.close >= column.open ? upColumns : downColumns;
+        const path2 = column.close >= column.open ? upColumns : downColumns;
         const x = column.x + 0.5;
         const top = crisp(yFromPrice(column.high));
         const bottom = crisp(yFromPrice(column.low));
-        path.moveTo(x, top);
-        path.lineTo(x, bottom === top ? bottom + 1 : bottom);
+        path2.moveTo(x, top);
+        path2.lineTo(x, bottom === top ? bottom + 1 : bottom);
       }
       ctx.lineWidth = 1;
       ctx.strokeStyle = mergedOptions.upColor;
@@ -7382,16 +7472,16 @@ function createChart(element, options = {}) {
         const displayLow = isLastCandle && actualDirection === "down" ? Math.min(point.l, displayClose) : point.l;
         const roundedCenterX = Math.round(chartLeft + (index + 0.5 - xStart) / xSpan * chartWidth);
         const direction = isLastCandle ? actualDirection : getCandleDirectionByIndex(index);
-        const path = direction === "up" ? upBars : downBars;
+        const path2 = direction === "up" ? upBars : downBars;
         const centerX = roundedCenterX + 0.5;
-        path.moveTo(centerX, crisp(yFromPrice(displayHigh)));
-        path.lineTo(centerX, crisp(yFromPrice(displayLow)));
+        path2.moveTo(centerX, crisp(yFromPrice(displayHigh)));
+        path2.lineTo(centerX, crisp(yFromPrice(displayLow)));
         const openY = crisp(yFromPrice(point.o));
         const closeY = crisp(yFromPrice(displayClose));
-        path.moveTo(centerX - tickLength, openY);
-        path.lineTo(centerX, openY);
-        path.moveTo(centerX, closeY);
-        path.lineTo(centerX + tickLength, closeY);
+        path2.moveTo(centerX - tickLength, openY);
+        path2.lineTo(centerX, openY);
+        path2.moveTo(centerX, closeY);
+        path2.lineTo(centerX + tickLength, closeY);
       }
       ctx.lineWidth = Math.max(1, candleWickWidth);
       ctx.strokeStyle = mergedOptions.upColor;
@@ -7459,7 +7549,7 @@ function createChart(element, options = {}) {
     for (const plan of comparePlans) {
       const color = plan.state.options.color ?? "#f59e0b";
       const lineWidth = Math.max(1, plan.state.options.lineWidth ?? 1.5);
-      const path = new Path2D();
+      const path2 = new Path2D();
       let started = false;
       let firstX = 0;
       let lastX = 0;
@@ -7467,11 +7557,11 @@ function createChart(element, options = {}) {
       let lastPrice = Number.NaN;
       const emit = (x, y) => {
         if (!started) {
-          path.moveTo(x, y);
+          path2.moveTo(x, y);
           firstX = x;
           started = true;
         } else {
-          path.lineTo(x, y);
+          path2.lineTo(x, y);
         }
         lastX = x;
         lastY = y;
@@ -7529,7 +7619,7 @@ function createChart(element, options = {}) {
       }
       if (!started) continue;
       if (plan.state.options.style === "area") {
-        const fillPath = new Path2D(path);
+        const fillPath = new Path2D(path2);
         fillPath.lineTo(lastX, chartBottom);
         fillPath.lineTo(firstX, chartBottom);
         fillPath.closePath();
@@ -7543,7 +7633,7 @@ function createChart(element, options = {}) {
       ctx.strokeStyle = color;
       ctx.lineWidth = lineWidth;
       ctx.lineJoin = "round";
-      ctx.stroke(path);
+      ctx.stroke(path2);
       ctx.restore();
       if (Number.isFinite(lastPrice)) {
         const label = plan.state.options.label ?? plan.state.options.id;
@@ -9351,12 +9441,16 @@ function createChart(element, options = {}) {
         if (Math.hypot(x - x2, y - y2) <= 9 * hitTolerance) {
           return { drawing, target: "handle", pointIndex: 1 };
         }
-        const fibRatios = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1, 1.618];
-        for (const ratio of fibRatios) {
-          const price = first.price + (second.price - first.price) * (1 - ratio);
-          const lineY = canvasYFromDrawingPrice(price);
-          if (Math.abs(y - lineY) <= 5 * hitTolerance) {
-            return { drawing, target: "line" };
+        const fibLeft = Math.min(x1, x2) - 5 * hitTolerance;
+        const fibRight = Math.max(x1, x2) + 5 * hitTolerance;
+        if (x >= fibLeft && x <= fibRight) {
+          const fibRatios = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1, 1.618];
+          for (const ratio of fibRatios) {
+            const price = first.price + (second.price - first.price) * (1 - ratio);
+            const lineY = canvasYFromDrawingPrice(price);
+            if (Math.abs(y - lineY) <= 5 * hitTolerance) {
+              return { drawing, target: "line" };
+            }
           }
         }
       } else if (drawing.type === "fib-extension") {
@@ -9381,11 +9475,15 @@ function createChart(element, options = {}) {
             return { drawing, target: "handle", pointIndex: 2 };
           }
           const move = p1.price - p0.price;
-          const fibExtRatios = [0, 0.382, 0.5, 0.618, 1, 1.272, 1.618, 2.618];
-          for (const ratio of fibExtRatios) {
-            const lineY = canvasYFromDrawingPrice(p2.price + move * ratio);
-            if (Math.abs(y - lineY) <= 5 * hitTolerance) {
-              return { drawing, target: "line" };
+          const extLeft = Math.min(x0, x1, x2) - 5 * hitTolerance;
+          const extRight = Math.max(x0, x1, x2) + 5 * hitTolerance;
+          if (x >= extLeft && x <= extRight) {
+            const fibExtRatios = [0, 0.382, 0.5, 0.618, 1, 1.272, 1.618, 2.618];
+            for (const ratio of fibExtRatios) {
+              const lineY = canvasYFromDrawingPrice(p2.price + move * ratio);
+              if (Math.abs(y - lineY) <= 5 * hitTolerance) {
+                return { drawing, target: "line" };
+              }
             }
           }
           if (distanceToSegment(x, y, x0, y0, x1, y1) <= 6 * hitTolerance || distanceToSegment(x, y, x1, y1, x2, y2) <= 6 * hitTolerance) {
@@ -12339,6 +12437,9 @@ function createChart(element, options = {}) {
 export {
   CHART_THEMES,
   CHART_THEME_NAMES,
+  DRAWING_ICON_STROKE_WIDTH,
+  DRAWING_ICON_VIEWBOX,
+  DRAWING_TOOL_ICONS,
   FIB_DEFAULT_PALETTE,
   POSITION_DEFAULT_COLORS,
   SCRIPT_SOURCE_INPUT_VALUES,

package/dist/index.cjs

@@ -22,6 +22,9 @@ var index_exports = {};
 __export(index_exports, {
   CHART_THEMES: () => CHART_THEMES,
   CHART_THEME_NAMES: () => CHART_THEME_NAMES,
+  DRAWING_ICON_STROKE_WIDTH: () => DRAWING_ICON_STROKE_WIDTH,
+  DRAWING_ICON_VIEWBOX: () => DRAWING_ICON_VIEWBOX,
+  DRAWING_TOOL_ICONS: () => DRAWING_TOOL_ICONS,
   FIB_DEFAULT_PALETTE: () => FIB_DEFAULT_PALETTE,
   POSITION_DEFAULT_COLORS: () => POSITION_DEFAULT_COLORS,
   SCRIPT_SOURCE_INPUT_VALUES: () => SCRIPT_SOURCE_INPUT_VALUES,
@@ -3168,6 +3171,94 @@ var compileScriptIndicator = (definition) => {
   return plugin;
 };
 
+// src/icons.ts
+var DRAWING_ICON_VIEWBOX = 28;
+var DRAWING_ICON_STROKE_WIDTH = 1.6;
+var dot = (cx, cy) => ({ kind: "circle", cx, cy, r: 2.1 });
+var path = (d, extra) => ({
+  kind: "path",
+  d,
+  ...extra
+});
+var DRAWING_TOOL_ICONS = {
+  "cursor-cross": [path("M14 4v6.5M14 17.5V24M4 14h6.5M17.5 14H24")],
+  "cursor-dot": [{ kind: "circle", cx: 14, cy: 14, r: 2.6, fill: true }],
+  "cursor-arrow": [path("M10 4.5v16.4l4.3-4.1 3 6.7 2.9-1.3-3-6.7h5.9L10 4.5Z")],
+  trendline: [dot(7, 21), dot(21, 7), path("M8.6 19.4 19.4 8.6")],
+  "horizontal-line": [dot(14, 14), path("M3.5 14h8.4M16.1 14h8.4")],
+  "vertical-line": [dot(14, 14), path("M14 3.5v8.4M14 16.1v8.4")],
+  ray: [dot(7.5, 20.5), path("M9 19 24 4")],
+  arrow: [dot(6, 22), path("M7.6 20.4 21.4 6.6"), path("M14.6 6.2h7.2v7.2")],
+  "parallel-channel": [dot(6, 17), dot(17, 6), path("M7.5 15.5 15.5 7.5"), path("M11 23.5 23.5 11")],
+  "fib-retracement": [
+    dot(6, 7),
+    path("M9.6 7h14.9"),
+    path("M3.5 14h21"),
+    dot(6, 21),
+    path("M9.6 21h14.9")
+  ],
+  "fib-extension": [
+    dot(6.5, 21.5),
+    dot(12.5, 6.5),
+    path("M7.5 19.1l4-9.2"),
+    path("M17 7h7.5M17 14h7.5M17 21h7.5")
+  ],
+  // Long/short: three price levels (target, entry, stop) with anchor dots and
+  // a dotted "price path" diagonal running from entry toward the target.
+  "long-position": [
+    dot(5, 6.5),
+    path("M8.6 6.5h15.9"),
+    dot(5, 16),
+    path("M8.6 16h10.3"),
+    dot(21, 16),
+    path("M8.6 22.5h15.9"),
+    dot(5, 22.5),
+    path("M10.5 14 22 7.8", { dash: "2 3.2" })
+  ],
+  "short-position": [
+    dot(5, 21.5),
+    path("M8.6 21.5h15.9"),
+    dot(5, 12),
+    path("M8.6 12h10.3"),
+    dot(21, 12),
+    path("M8.6 5.5h15.9"),
+    dot(5, 5.5),
+    path("M10.5 14 22 20.2", { dash: "2 3.2" })
+  ],
+  "price-range": [
+    path("M8 5h12M8 23h12"),
+    path("M14 7v14"),
+    path("M11.2 9.8 14 7l2.8 2.8M11.2 18.2 14 21l2.8-2.8")
+  ],
+  // Fixed range VP: two vertical range anchors with the profile bars attached
+  // to the left one.
+  "fixed-range-volume-profile": [
+    path("M5 3.5v15.4"),
+    dot(5, 21.5),
+    dot(23, 6.5),
+    path("M23 9.1v15.4"),
+    { kind: "rect", x: 5, y: 6, width: 7, height: 3.2 },
+    { kind: "rect", x: 5, y: 11, width: 10.5, height: 3.2 },
+    { kind: "rect", x: 5, y: 16, width: 4.5, height: 3.2 }
+  ],
+  measure: [
+    path("M4.5 18.5 18.5 4.5l5 5L9.5 23.5Z"),
+    path("m8 15 1.8 1.8M11.5 11.5 14 14M15 8l1.8 1.8")
+  ],
+  rectangle: [
+    dot(6, 8),
+    dot(22, 8),
+    dot(22, 20),
+    dot(6, 20),
+    path("M8.1 8h11.8M8.1 20h11.8M6 10.1v7.8M22 10.1v7.8")
+  ],
+  ellipse: [path("M6.1 14a7.9 6.9 0 1 0 15.8 0 7.9 6.9 0 1 0-15.8 0"), dot(4, 14), dot(24, 14)],
+  brush: [dot(5, 20), path("M6.9 18.4c2.6-6 5-.6 8.4-3.2 3-2.3 5.4-6 8.2-7.9")],
+  text: [path("M7 8.5V6h14v2.5"), path("M14 6v16M11 22h6")],
+  note: [path("M5.5 5h17v11.5l-6 6h-11V5Z"), path("M22.5 16.5h-6v6")],
+  callout: [path("M4.5 6h19v11.5H13L8 22.5v-5H4.5V6Z")]
+};
+
 // src/themes.ts
 var CHART_THEMES = {
   midnight: {
@@ -4690,9 +4781,9 @@ function createChart(element, options = {}) {
   const groupThousands = (value, decimals) => {
     const negative = value < 0;
     const fixed = Math.abs(value).toFixed(decimals);
-    const dot = fixed.indexOf(".");
-    const intPart = dot === -1 ? fixed : fixed.slice(0, dot);
-    const decPart = dot === -1 ? "" : fixed.slice(dot);
+    const dot2 = fixed.indexOf(".");
+    const intPart = dot2 === -1 ? fixed : fixed.slice(0, dot2);
+    const decPart = dot2 === -1 ? "" : fixed.slice(dot2);
     const grouped = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
     return `${negative ? "-" : ""}${grouped}${decPart}`;
   };
@@ -6289,6 +6380,8 @@ function createChart(element, options = {}) {
             const palette = drawing.colors.length > 0 ? drawing.colors : null;
             const levelColorAt = (index) => palette ? palette[index % palette.length] : drawing.color;
             const move = p1.price - p0.price;
+            const lineLeft = Math.min(x0, x1, x2);
+            const lineRight = Math.max(x0, x1, x2);
             const levelLines = FIB_EXT_RATIOS.map((ratio) => {
               const price = p2.price + move * ratio;
               return { ratio, price, y: yFromPrice(price) };
@@ -6301,7 +6394,7 @@ function createChart(element, options = {}) {
               ctx.save();
               ctx.fillStyle = hexToRgba(levelColorAt(index), 0.1);
               ctx.globalAlpha = draft ? 0.5 : 1;
-              ctx.fillRect(chartLeft, bandTop, chartRight - chartLeft, bandBottom - bandTop);
+              ctx.fillRect(lineLeft, bandTop, lineRight - lineLeft, bandBottom - bandTop);
               ctx.restore();
             }
             ctx.save();
@@ -6310,8 +6403,8 @@ function createChart(element, options = {}) {
             levelLines.forEach((level, index) => {
               ctx.strokeStyle = levelColorAt(index);
               ctx.beginPath();
-              ctx.moveTo(crisp(chartLeft), crisp(level.y));
-              ctx.lineTo(crisp(chartRight), crisp(level.y));
+              ctx.moveTo(crisp(lineLeft), crisp(level.y));
+              ctx.lineTo(crisp(lineRight), crisp(level.y));
               ctx.stroke();
             });
             ctx.restore();
@@ -6321,7 +6414,7 @@ function createChart(element, options = {}) {
               const labelText = `${level.ratio} (${formatPrice(level.price)})`;
               const textWidth = measureTextWidth(labelText);
               const padding = 4;
-              const bgX = chartLeft + 4;
+              const bgX = Math.max(chartLeft + 2, lineLeft - textWidth - padding * 2 - 4);
               const bgY = level.y - 9;
               ctx.fillStyle = mergedOptions.backgroundColor;
               fillRoundedRect(bgX, bgY, textWidth + padding * 2, 16, 3);
@@ -7270,12 +7363,12 @@ function createChart(element, options = {}) {
       const upColumns = new Path2D();
       const downColumns = new Path2D();
       for (const column of seriesColumns) {
-        const path = column.close >= column.open ? upColumns : downColumns;
+        const path2 = column.close >= column.open ? upColumns : downColumns;
         const x = column.x + 0.5;
         const top = crisp(yFromPrice(column.high));
         const bottom = crisp(yFromPrice(column.low));
-        path.moveTo(x, top);
-        path.lineTo(x, bottom === top ? bottom + 1 : bottom);
+        path2.moveTo(x, top);
+        path2.lineTo(x, bottom === top ? bottom + 1 : bottom);
       }
       ctx.lineWidth = 1;
       ctx.strokeStyle = mergedOptions.upColor;
@@ -7418,16 +7511,16 @@ function createChart(element, options = {}) {
         const displayLow = isLastCandle && actualDirection === "down" ? Math.min(point.l, displayClose) : point.l;
         const roundedCenterX = Math.round(chartLeft + (index + 0.5 - xStart) / xSpan * chartWidth);
         const direction = isLastCandle ? actualDirection : getCandleDirectionByIndex(index);
-        const path = direction === "up" ? upBars : downBars;
+        const path2 = direction === "up" ? upBars : downBars;
         const centerX = roundedCenterX + 0.5;
-        path.moveTo(centerX, crisp(yFromPrice(displayHigh)));
-        path.lineTo(centerX, crisp(yFromPrice(displayLow)));
+        path2.moveTo(centerX, crisp(yFromPrice(displayHigh)));
+        path2.lineTo(centerX, crisp(yFromPrice(displayLow)));
         const openY = crisp(yFromPrice(point.o));
         const closeY = crisp(yFromPrice(displayClose));
-        path.moveTo(centerX - tickLength, openY);
-        path.lineTo(centerX, openY);
-        path.moveTo(centerX, closeY);
-        path.lineTo(centerX + tickLength, closeY);
+        path2.moveTo(centerX - tickLength, openY);
+        path2.lineTo(centerX, openY);
+        path2.moveTo(centerX, closeY);
+        path2.lineTo(centerX + tickLength, closeY);
       }
       ctx.lineWidth = Math.max(1, candleWickWidth);
       ctx.strokeStyle = mergedOptions.upColor;
@@ -7495,7 +7588,7 @@ function createChart(element, options = {}) {
     for (const plan of comparePlans) {
       const color = plan.state.options.color ?? "#f59e0b";
       const lineWidth = Math.max(1, plan.state.options.lineWidth ?? 1.5);
-      const path = new Path2D();
+      const path2 = new Path2D();
       let started = false;
       let firstX = 0;
       let lastX = 0;
@@ -7503,11 +7596,11 @@ function createChart(element, options = {}) {
       let lastPrice = Number.NaN;
       const emit = (x, y) => {
         if (!started) {
-          path.moveTo(x, y);
+          path2.moveTo(x, y);
           firstX = x;
           started = true;
         } else {
-          path.lineTo(x, y);
+          path2.lineTo(x, y);
         }
         lastX = x;
         lastY = y;
@@ -7565,7 +7658,7 @@ function createChart(element, options = {}) {
       }
       if (!started) continue;
       if (plan.state.options.style === "area") {
-        const fillPath = new Path2D(path);
+        const fillPath = new Path2D(path2);
         fillPath.lineTo(lastX, chartBottom);
         fillPath.lineTo(firstX, chartBottom);
         fillPath.closePath();
@@ -7579,7 +7672,7 @@ function createChart(element, options = {}) {
       ctx.strokeStyle = color;
       ctx.lineWidth = lineWidth;
       ctx.lineJoin = "round";
-      ctx.stroke(path);
+      ctx.stroke(path2);
       ctx.restore();
       if (Number.isFinite(lastPrice)) {
         const label = plan.state.options.label ?? plan.state.options.id;
@@ -9387,12 +9480,16 @@ function createChart(element, options = {}) {
         if (Math.hypot(x - x2, y - y2) <= 9 * hitTolerance) {
           return { drawing, target: "handle", pointIndex: 1 };
         }
-        const fibRatios = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1, 1.618];
-        for (const ratio of fibRatios) {
-          const price = first.price + (second.price - first.price) * (1 - ratio);
-          const lineY = canvasYFromDrawingPrice(price);
-          if (Math.abs(y - lineY) <= 5 * hitTolerance) {
-            return { drawing, target: "line" };
+        const fibLeft = Math.min(x1, x2) - 5 * hitTolerance;
+        const fibRight = Math.max(x1, x2) + 5 * hitTolerance;
+        if (x >= fibLeft && x <= fibRight) {
+          const fibRatios = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1, 1.618];
+          for (const ratio of fibRatios) {
+            const price = first.price + (second.price - first.price) * (1 - ratio);
+            const lineY = canvasYFromDrawingPrice(price);
+            if (Math.abs(y - lineY) <= 5 * hitTolerance) {
+              return { drawing, target: "line" };
+            }
           }
         }
       } else if (drawing.type === "fib-extension") {
@@ -9417,11 +9514,15 @@ function createChart(element, options = {}) {
             return { drawing, target: "handle", pointIndex: 2 };
           }
           const move = p1.price - p0.price;
-          const fibExtRatios = [0, 0.382, 0.5, 0.618, 1, 1.272, 1.618, 2.618];
-          for (const ratio of fibExtRatios) {
-            const lineY = canvasYFromDrawingPrice(p2.price + move * ratio);
-            if (Math.abs(y - lineY) <= 5 * hitTolerance) {
-              return { drawing, target: "line" };
+          const extLeft = Math.min(x0, x1, x2) - 5 * hitTolerance;
+          const extRight = Math.max(x0, x1, x2) + 5 * hitTolerance;
+          if (x >= extLeft && x <= extRight) {
+            const fibExtRatios = [0, 0.382, 0.5, 0.618, 1, 1.272, 1.618, 2.618];
+            for (const ratio of fibExtRatios) {
+              const lineY = canvasYFromDrawingPrice(p2.price + move * ratio);
+              if (Math.abs(y - lineY) <= 5 * hitTolerance) {
+                return { drawing, target: "line" };
+              }
             }
           }
           if (distanceToSegment(x, y, x0, y0, x1, y1) <= 6 * hitTolerance || distanceToSegment(x, y, x1, y1, x2, y2) <= 6 * hitTolerance) {
@@ -12376,6 +12477,9 @@ function createChart(element, options = {}) {
 0 && (module.exports = {
   CHART_THEMES,
   CHART_THEME_NAMES,
+  DRAWING_ICON_STROKE_WIDTH,
+  DRAWING_ICON_VIEWBOX,
+  DRAWING_TOOL_ICONS,
   FIB_DEFAULT_PALETTE,
   POSITION_DEFAULT_COLORS,
   SCRIPT_SOURCE_INPUT_VALUES,

package/dist/index.d.cts

@@ -1441,6 +1441,45 @@ declare const validateScriptSource: (source: string) => string | null;
  */
 declare const compileScriptIndicator: (definition: ScriptIndicatorDefinition) => IndicatorPlugin;
 
+/**
+ * Hyperprop drawing-tool icon pack — framework-agnostic geometry.
+ *
+ * Original artwork drawn in the visual language traders know from desktop
+ * charting platforms: a 28x28 grid, thin round-capped outlines, and hollow
+ * "anchor" dots on anything line-based (a dot marks a draggable point of the
+ * tool). The data here is plain shape descriptions so every consumer renders
+ * the identical set: the web terminal maps it to DOM `<svg>` elements and the
+ * mobile app to react-native-svg components.
+ *
+ * Design rules when adding icons:
+ *   - viewBox 0 0 28 28, strokeWidth 1.6, round caps/joins, no fill (except
+ *     shapes marked `fill: true`).
+ *   - Anchor dots are hollow circles r=2.1; lines stop ~1.5px short of them.
+ *   - Keep 3.5px padding to the edges so glyphs optically match.
+ */
+type DrawingIconShape = {
+    kind: "path";
+    d: string;
+    dash?: string;
+    fill?: boolean;
+} | {
+    kind: "circle";
+    cx: number;
+    cy: number;
+    r: number;
+    fill?: boolean;
+} | {
+    kind: "rect";
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+type DrawingIconName = "cursor-cross" | "cursor-dot" | "cursor-arrow" | "trendline" | "horizontal-line" | "vertical-line" | "ray" | "arrow" | "parallel-channel" | "fib-retracement" | "fib-extension" | "long-position" | "short-position" | "price-range" | "fixed-range-volume-profile" | "measure" | "rectangle" | "ellipse" | "brush" | "text" | "note" | "callout";
+declare const DRAWING_ICON_VIEWBOX = 28;
+declare const DRAWING_ICON_STROKE_WIDTH = 1.6;
+declare const DRAWING_TOOL_ICONS: Record<DrawingIconName, DrawingIconShape[]>;
+
 /**
  * Built-in palettes.
  *
@@ -1465,4 +1504,4 @@ declare const SESSION_PRESETS: Record<SessionPresetName, SessionSpec>;
 
 declare function createChart(element: HTMLElement, options?: ChartOptions): ChartInstance;
 
-export { type AccessibilityOptions, type AlertActionEvent, type AlertCondition, type AlertOptions, type AlertTriggerEvent, type AnimationOptions, type AxisOptions, type BarMarkOptions, type BuiltInIndicatorInfo, CHART_THEMES, CHART_THEME_NAMES, type ChartClickEvent, type ChartContextMenuEvent, type ChartContextMenuRegion, type ChartDatafeed, type ChartInstance, type ChartKeyboardAction, type ChartKeyboardShortcutEvent, type ChartLongPressEvent, type ChartOptions, type ChartSavedState, type ChartTheme, type ChartThemeName, type ChartTimezone, type ChartType, type CompareSeriesOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type DataLineOptions, type DatafeedBarsRequest, type DatafeedOptions, type DownsamplingOptions, type DrawingBounds, type DrawingDefaults, type DrawingHoverEvent, type DrawingObjectOptions, type DrawingPoint, type DrawingSelectEvent, type DrawingSelectionChangeEvent, type DrawingToolType, FIB_DEFAULT_PALETTE, type GridOptions, type HistoryOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPaneActionEvent, type IndicatorPaneAxisOptions, type IndicatorPaneGuideLine, type IndicatorPaneHeightChangeEvent, type IndicatorPaneRenderInfo, type IndicatorPaneValue, type IndicatorPaneValueLabel, type IndicatorPlugin, type IndicatorRenderContext, type IndicatorUpdateOptions, type KeyboardOptions, type LabelsOptions, type MarkClickEvent, type MarkHoverEvent, type MarkShape, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, POSITION_DEFAULT_COLORS, type PriceLineOptions, type PriceScaleMode, type PriceScaleOptions, type ReplayStartOptions, type ReplayState, SCRIPT_SOURCE_INPUT_VALUES, SESSION_PRESETS, type ScriptComputeResult, type ScriptIndicatorDefinition, type ScriptIndicatorInputDef, type ScriptInputHelper, type ScriptInputOptions, type ScriptPlotSpec, type SessionOptions, type SessionPresetName, type SessionSegment, type SessionSpec, type TickerLineOptions, type TimeFormat, type TimescaleMarkOptions, type TouchOptions, type TradeMarkerOptions, type UndoRedoState, type ViewportState, type WatermarkOptions, compileScriptIndicator, createChart, extractScriptInputs, isValidTimeZone, validateScriptSource };
+export { type AccessibilityOptions, type AlertActionEvent, type AlertCondition, type AlertOptions, type AlertTriggerEvent, type AnimationOptions, type AxisOptions, type BarMarkOptions, type BuiltInIndicatorInfo, CHART_THEMES, CHART_THEME_NAMES, type ChartClickEvent, type ChartContextMenuEvent, type ChartContextMenuRegion, type ChartDatafeed, type ChartInstance, type ChartKeyboardAction, type ChartKeyboardShortcutEvent, type ChartLongPressEvent, type ChartOptions, type ChartSavedState, type ChartTheme, type ChartThemeName, type ChartTimezone, type ChartType, type CompareSeriesOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, DRAWING_ICON_STROKE_WIDTH, DRAWING_ICON_VIEWBOX, DRAWING_TOOL_ICONS, type DashPatternOptions, type DataLineOptions, type DatafeedBarsRequest, type DatafeedOptions, type DownsamplingOptions, type DrawingBounds, type DrawingDefaults, type DrawingHoverEvent, type DrawingIconName, type DrawingIconShape, type DrawingObjectOptions, type DrawingPoint, type DrawingSelectEvent, type DrawingSelectionChangeEvent, type DrawingToolType, FIB_DEFAULT_PALETTE, type GridOptions, type HistoryOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPaneActionEvent, type IndicatorPaneAxisOptions, type IndicatorPaneGuideLine, type IndicatorPaneHeightChangeEvent, type IndicatorPaneRenderInfo, type IndicatorPaneValue, type IndicatorPaneValueLabel, type IndicatorPlugin, type IndicatorRenderContext, type IndicatorUpdateOptions, type KeyboardOptions, type LabelsOptions, type MarkClickEvent, type MarkHoverEvent, type MarkShape, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, POSITION_DEFAULT_COLORS, type PriceLineOptions, type PriceScaleMode, type PriceScaleOptions, type ReplayStartOptions, type ReplayState, SCRIPT_SOURCE_INPUT_VALUES, SESSION_PRESETS, type ScriptComputeResult, type ScriptIndicatorDefinition, type ScriptIndicatorInputDef, type ScriptInputHelper, type ScriptInputOptions, type ScriptPlotSpec, type SessionOptions, type SessionPresetName, type SessionSegment, type SessionSpec, type TickerLineOptions, type TimeFormat, type TimescaleMarkOptions, type TouchOptions, type TradeMarkerOptions, type UndoRedoState, type ViewportState, type WatermarkOptions, compileScriptIndicator, createChart, extractScriptInputs, isValidTimeZone, validateScriptSource };

package/dist/index.d.ts

@@ -1441,6 +1441,45 @@ declare const validateScriptSource: (source: string) => string | null;
  */
 declare const compileScriptIndicator: (definition: ScriptIndicatorDefinition) => IndicatorPlugin;
 
+/**
+ * Hyperprop drawing-tool icon pack — framework-agnostic geometry.
+ *
+ * Original artwork drawn in the visual language traders know from desktop
+ * charting platforms: a 28x28 grid, thin round-capped outlines, and hollow
+ * "anchor" dots on anything line-based (a dot marks a draggable point of the
+ * tool). The data here is plain shape descriptions so every consumer renders
+ * the identical set: the web terminal maps it to DOM `<svg>` elements and the
+ * mobile app to react-native-svg components.
+ *
+ * Design rules when adding icons:
+ *   - viewBox 0 0 28 28, strokeWidth 1.6, round caps/joins, no fill (except
+ *     shapes marked `fill: true`).
+ *   - Anchor dots are hollow circles r=2.1; lines stop ~1.5px short of them.
+ *   - Keep 3.5px padding to the edges so glyphs optically match.
+ */
+type DrawingIconShape = {
+    kind: "path";
+    d: string;
+    dash?: string;
+    fill?: boolean;
+} | {
+    kind: "circle";
+    cx: number;
+    cy: number;
+    r: number;
+    fill?: boolean;
+} | {
+    kind: "rect";
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+type DrawingIconName = "cursor-cross" | "cursor-dot" | "cursor-arrow" | "trendline" | "horizontal-line" | "vertical-line" | "ray" | "arrow" | "parallel-channel" | "fib-retracement" | "fib-extension" | "long-position" | "short-position" | "price-range" | "fixed-range-volume-profile" | "measure" | "rectangle" | "ellipse" | "brush" | "text" | "note" | "callout";
+declare const DRAWING_ICON_VIEWBOX = 28;
+declare const DRAWING_ICON_STROKE_WIDTH = 1.6;
+declare const DRAWING_TOOL_ICONS: Record<DrawingIconName, DrawingIconShape[]>;
+
 /**
  * Built-in palettes.
  *
@@ -1465,4 +1504,4 @@ declare const SESSION_PRESETS: Record<SessionPresetName, SessionSpec>;
 
 declare function createChart(element: HTMLElement, options?: ChartOptions): ChartInstance;
 
-export { type AccessibilityOptions, type AlertActionEvent, type AlertCondition, type AlertOptions, type AlertTriggerEvent, type AnimationOptions, type AxisOptions, type BarMarkOptions, type BuiltInIndicatorInfo, CHART_THEMES, CHART_THEME_NAMES, type ChartClickEvent, type ChartContextMenuEvent, type ChartContextMenuRegion, type ChartDatafeed, type ChartInstance, type ChartKeyboardAction, type ChartKeyboardShortcutEvent, type ChartLongPressEvent, type ChartOptions, type ChartSavedState, type ChartTheme, type ChartThemeName, type ChartTimezone, type ChartType, type CompareSeriesOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type DataLineOptions, type DatafeedBarsRequest, type DatafeedOptions, type DownsamplingOptions, type DrawingBounds, type DrawingDefaults, type DrawingHoverEvent, type DrawingObjectOptions, type DrawingPoint, type DrawingSelectEvent, type DrawingSelectionChangeEvent, type DrawingToolType, FIB_DEFAULT_PALETTE, type GridOptions, type HistoryOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPaneActionEvent, type IndicatorPaneAxisOptions, type IndicatorPaneGuideLine, type IndicatorPaneHeightChangeEvent, type IndicatorPaneRenderInfo, type IndicatorPaneValue, type IndicatorPaneValueLabel, type IndicatorPlugin, type IndicatorRenderContext, type IndicatorUpdateOptions, type KeyboardOptions, type LabelsOptions, type MarkClickEvent, type MarkHoverEvent, type MarkShape, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, POSITION_DEFAULT_COLORS, type PriceLineOptions, type PriceScaleMode, type PriceScaleOptions, type ReplayStartOptions, type ReplayState, SCRIPT_SOURCE_INPUT_VALUES, SESSION_PRESETS, type ScriptComputeResult, type ScriptIndicatorDefinition, type ScriptIndicatorInputDef, type ScriptInputHelper, type ScriptInputOptions, type ScriptPlotSpec, type SessionOptions, type SessionPresetName, type SessionSegment, type SessionSpec, type TickerLineOptions, type TimeFormat, type TimescaleMarkOptions, type TouchOptions, type TradeMarkerOptions, type UndoRedoState, type ViewportState, type WatermarkOptions, compileScriptIndicator, createChart, extractScriptInputs, isValidTimeZone, validateScriptSource };
+export { type AccessibilityOptions, type AlertActionEvent, type AlertCondition, type AlertOptions, type AlertTriggerEvent, type AnimationOptions, type AxisOptions, type BarMarkOptions, type BuiltInIndicatorInfo, CHART_THEMES, CHART_THEME_NAMES, type ChartClickEvent, type ChartContextMenuEvent, type ChartContextMenuRegion, type ChartDatafeed, type ChartInstance, type ChartKeyboardAction, type ChartKeyboardShortcutEvent, type ChartLongPressEvent, type ChartOptions, type ChartSavedState, type ChartTheme, type ChartThemeName, type ChartTimezone, type ChartType, type CompareSeriesOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, DRAWING_ICON_STROKE_WIDTH, DRAWING_ICON_VIEWBOX, DRAWING_TOOL_ICONS, type DashPatternOptions, type DataLineOptions, type DatafeedBarsRequest, type DatafeedOptions, type DownsamplingOptions, type DrawingBounds, type DrawingDefaults, type DrawingHoverEvent, type DrawingIconName, type DrawingIconShape, type DrawingObjectOptions, type DrawingPoint, type DrawingSelectEvent, type DrawingSelectionChangeEvent, type DrawingToolType, FIB_DEFAULT_PALETTE, type GridOptions, type HistoryOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPaneActionEvent, type IndicatorPaneAxisOptions, type IndicatorPaneGuideLine, type IndicatorPaneHeightChangeEvent, type IndicatorPaneRenderInfo, type IndicatorPaneValue, type IndicatorPaneValueLabel, type IndicatorPlugin, type IndicatorRenderContext, type IndicatorUpdateOptions, type KeyboardOptions, type LabelsOptions, type MarkClickEvent, type MarkHoverEvent, type MarkShape, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, POSITION_DEFAULT_COLORS, type PriceLineOptions, type PriceScaleMode, type PriceScaleOptions, type ReplayStartOptions, type ReplayState, SCRIPT_SOURCE_INPUT_VALUES, SESSION_PRESETS, type ScriptComputeResult, type ScriptIndicatorDefinition, type ScriptIndicatorInputDef, type ScriptInputHelper, type ScriptInputOptions, type ScriptPlotSpec, type SessionOptions, type SessionPresetName, type SessionSegment, type SessionSpec, type TickerLineOptions, type TimeFormat, type TimescaleMarkOptions, type TouchOptions, type TradeMarkerOptions, type UndoRedoState, type ViewportState, type WatermarkOptions, compileScriptIndicator, createChart, extractScriptInputs, isValidTimeZone, validateScriptSource };

package/dist/index.js

@@ -3132,6 +3132,94 @@ var compileScriptIndicator = (definition) => {
   return plugin;
 };
 
+// src/icons.ts
+var DRAWING_ICON_VIEWBOX = 28;
+var DRAWING_ICON_STROKE_WIDTH = 1.6;
+var dot = (cx, cy) => ({ kind: "circle", cx, cy, r: 2.1 });
+var path = (d, extra) => ({
+  kind: "path",
+  d,
+  ...extra
+});
+var DRAWING_TOOL_ICONS = {
+  "cursor-cross": [path("M14 4v6.5M14 17.5V24M4 14h6.5M17.5 14H24")],
+  "cursor-dot": [{ kind: "circle", cx: 14, cy: 14, r: 2.6, fill: true }],
+  "cursor-arrow": [path("M10 4.5v16.4l4.3-4.1 3 6.7 2.9-1.3-3-6.7h5.9L10 4.5Z")],
+  trendline: [dot(7, 21), dot(21, 7), path("M8.6 19.4 19.4 8.6")],
+  "horizontal-line": [dot(14, 14), path("M3.5 14h8.4M16.1 14h8.4")],
+  "vertical-line": [dot(14, 14), path("M14 3.5v8.4M14 16.1v8.4")],
+  ray: [dot(7.5, 20.5), path("M9 19 24 4")],
+  arrow: [dot(6, 22), path("M7.6 20.4 21.4 6.6"), path("M14.6 6.2h7.2v7.2")],
+  "parallel-channel": [dot(6, 17), dot(17, 6), path("M7.5 15.5 15.5 7.5"), path("M11 23.5 23.5 11")],
+  "fib-retracement": [
+    dot(6, 7),
+    path("M9.6 7h14.9"),
+    path("M3.5 14h21"),
+    dot(6, 21),
+    path("M9.6 21h14.9")
+  ],
+  "fib-extension": [
+    dot(6.5, 21.5),
+    dot(12.5, 6.5),
+    path("M7.5 19.1l4-9.2"),
+    path("M17 7h7.5M17 14h7.5M17 21h7.5")
+  ],
+  // Long/short: three price levels (target, entry, stop) with anchor dots and
+  // a dotted "price path" diagonal running from entry toward the target.
+  "long-position": [
+    dot(5, 6.5),
+    path("M8.6 6.5h15.9"),
+    dot(5, 16),
+    path("M8.6 16h10.3"),
+    dot(21, 16),
+    path("M8.6 22.5h15.9"),
+    dot(5, 22.5),
+    path("M10.5 14 22 7.8", { dash: "2 3.2" })
+  ],
+  "short-position": [
+    dot(5, 21.5),
+    path("M8.6 21.5h15.9"),
+    dot(5, 12),
+    path("M8.6 12h10.3"),
+    dot(21, 12),
+    path("M8.6 5.5h15.9"),
+    dot(5, 5.5),
+    path("M10.5 14 22 20.2", { dash: "2 3.2" })
+  ],
+  "price-range": [
+    path("M8 5h12M8 23h12"),
+    path("M14 7v14"),
+    path("M11.2 9.8 14 7l2.8 2.8M11.2 18.2 14 21l2.8-2.8")
+  ],
+  // Fixed range VP: two vertical range anchors with the profile bars attached
+  // to the left one.
+  "fixed-range-volume-profile": [
+    path("M5 3.5v15.4"),
+    dot(5, 21.5),
+    dot(23, 6.5),
+    path("M23 9.1v15.4"),
+    { kind: "rect", x: 5, y: 6, width: 7, height: 3.2 },
+    { kind: "rect", x: 5, y: 11, width: 10.5, height: 3.2 },
+    { kind: "rect", x: 5, y: 16, width: 4.5, height: 3.2 }
+  ],
+  measure: [
+    path("M4.5 18.5 18.5 4.5l5 5L9.5 23.5Z"),
+    path("m8 15 1.8 1.8M11.5 11.5 14 14M15 8l1.8 1.8")
+  ],
+  rectangle: [
+    dot(6, 8),
+    dot(22, 8),
+    dot(22, 20),
+    dot(6, 20),
+    path("M8.1 8h11.8M8.1 20h11.8M6 10.1v7.8M22 10.1v7.8")
+  ],
+  ellipse: [path("M6.1 14a7.9 6.9 0 1 0 15.8 0 7.9 6.9 0 1 0-15.8 0"), dot(4, 14), dot(24, 14)],
+  brush: [dot(5, 20), path("M6.9 18.4c2.6-6 5-.6 8.4-3.2 3-2.3 5.4-6 8.2-7.9")],
+  text: [path("M7 8.5V6h14v2.5"), path("M14 6v16M11 22h6")],
+  note: [path("M5.5 5h17v11.5l-6 6h-11V5Z"), path("M22.5 16.5h-6v6")],
+  callout: [path("M4.5 6h19v11.5H13L8 22.5v-5H4.5V6Z")]
+};
+
 // src/themes.ts
 var CHART_THEMES = {
   midnight: {
@@ -4654,9 +4742,9 @@ function createChart(element, options = {}) {
   const groupThousands = (value, decimals) => {
     const negative = value < 0;
     const fixed = Math.abs(value).toFixed(decimals);
-    const dot = fixed.indexOf(".");
-    const intPart = dot === -1 ? fixed : fixed.slice(0, dot);
-    const decPart = dot === -1 ? "" : fixed.slice(dot);
+    const dot2 = fixed.indexOf(".");
+    const intPart = dot2 === -1 ? fixed : fixed.slice(0, dot2);
+    const decPart = dot2 === -1 ? "" : fixed.slice(dot2);
     const grouped = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
     return `${negative ? "-" : ""}${grouped}${decPart}`;
   };
@@ -6253,6 +6341,8 @@ function createChart(element, options = {}) {
             const palette = drawing.colors.length > 0 ? drawing.colors : null;
             const levelColorAt = (index) => palette ? palette[index % palette.length] : drawing.color;
             const move = p1.price - p0.price;
+            const lineLeft = Math.min(x0, x1, x2);
+            const lineRight = Math.max(x0, x1, x2);
             const levelLines = FIB_EXT_RATIOS.map((ratio) => {
               const price = p2.price + move * ratio;
               return { ratio, price, y: yFromPrice(price) };
@@ -6265,7 +6355,7 @@ function createChart(element, options = {}) {
               ctx.save();
               ctx.fillStyle = hexToRgba(levelColorAt(index), 0.1);
               ctx.globalAlpha = draft ? 0.5 : 1;
-              ctx.fillRect(chartLeft, bandTop, chartRight - chartLeft, bandBottom - bandTop);
+              ctx.fillRect(lineLeft, bandTop, lineRight - lineLeft, bandBottom - bandTop);
               ctx.restore();
             }
             ctx.save();
@@ -6274,8 +6364,8 @@ function createChart(element, options = {}) {
             levelLines.forEach((level, index) => {
               ctx.strokeStyle = levelColorAt(index);
               ctx.beginPath();
-              ctx.moveTo(crisp(chartLeft), crisp(level.y));
-              ctx.lineTo(crisp(chartRight), crisp(level.y));
+              ctx.moveTo(crisp(lineLeft), crisp(level.y));
+              ctx.lineTo(crisp(lineRight), crisp(level.y));
               ctx.stroke();
             });
             ctx.restore();
@@ -6285,7 +6375,7 @@ function createChart(element, options = {}) {
               const labelText = `${level.ratio} (${formatPrice(level.price)})`;
               const textWidth = measureTextWidth(labelText);
               const padding = 4;
-              const bgX = chartLeft + 4;
+              const bgX = Math.max(chartLeft + 2, lineLeft - textWidth - padding * 2 - 4);
               const bgY = level.y - 9;
               ctx.fillStyle = mergedOptions.backgroundColor;
               fillRoundedRect(bgX, bgY, textWidth + padding * 2, 16, 3);
@@ -7234,12 +7324,12 @@ function createChart(element, options = {}) {
       const upColumns = new Path2D();
       const downColumns = new Path2D();
       for (const column of seriesColumns) {
-        const path = column.close >= column.open ? upColumns : downColumns;
+        const path2 = column.close >= column.open ? upColumns : downColumns;
         const x = column.x + 0.5;
         const top = crisp(yFromPrice(column.high));
         const bottom = crisp(yFromPrice(column.low));
-        path.moveTo(x, top);
-        path.lineTo(x, bottom === top ? bottom + 1 : bottom);
+        path2.moveTo(x, top);
+        path2.lineTo(x, bottom === top ? bottom + 1 : bottom);
       }
       ctx.lineWidth = 1;
       ctx.strokeStyle = mergedOptions.upColor;
@@ -7382,16 +7472,16 @@ function createChart(element, options = {}) {
         const displayLow = isLastCandle && actualDirection === "down" ? Math.min(point.l, displayClose) : point.l;
         const roundedCenterX = Math.round(chartLeft + (index + 0.5 - xStart) / xSpan * chartWidth);
         const direction = isLastCandle ? actualDirection : getCandleDirectionByIndex(index);
-        const path = direction === "up" ? upBars : downBars;
+        const path2 = direction === "up" ? upBars : downBars;
         const centerX = roundedCenterX + 0.5;
-        path.moveTo(centerX, crisp(yFromPrice(displayHigh)));
-        path.lineTo(centerX, crisp(yFromPrice(displayLow)));
+        path2.moveTo(centerX, crisp(yFromPrice(displayHigh)));
+        path2.lineTo(centerX, crisp(yFromPrice(displayLow)));
         const openY = crisp(yFromPrice(point.o));
         const closeY = crisp(yFromPrice(displayClose));
-        path.moveTo(centerX - tickLength, openY);
-        path.lineTo(centerX, openY);
-        path.moveTo(centerX, closeY);
-        path.lineTo(centerX + tickLength, closeY);
+        path2.moveTo(centerX - tickLength, openY);
+        path2.lineTo(centerX, openY);
+        path2.moveTo(centerX, closeY);
+        path2.lineTo(centerX + tickLength, closeY);
       }
       ctx.lineWidth = Math.max(1, candleWickWidth);
       ctx.strokeStyle = mergedOptions.upColor;
@@ -7459,7 +7549,7 @@ function createChart(element, options = {}) {
     for (const plan of comparePlans) {
       const color = plan.state.options.color ?? "#f59e0b";
       const lineWidth = Math.max(1, plan.state.options.lineWidth ?? 1.5);
-      const path = new Path2D();
+      const path2 = new Path2D();
       let started = false;
       let firstX = 0;
       let lastX = 0;
@@ -7467,11 +7557,11 @@ function createChart(element, options = {}) {
       let lastPrice = Number.NaN;
       const emit = (x, y) => {
         if (!started) {
-          path.moveTo(x, y);
+          path2.moveTo(x, y);
           firstX = x;
           started = true;
         } else {
-          path.lineTo(x, y);
+          path2.lineTo(x, y);
         }
         lastX = x;
         lastY = y;
@@ -7529,7 +7619,7 @@ function createChart(element, options = {}) {
       }
       if (!started) continue;
       if (plan.state.options.style === "area") {
-        const fillPath = new Path2D(path);
+        const fillPath = new Path2D(path2);
         fillPath.lineTo(lastX, chartBottom);
         fillPath.lineTo(firstX, chartBottom);
         fillPath.closePath();
@@ -7543,7 +7633,7 @@ function createChart(element, options = {}) {
       ctx.strokeStyle = color;
       ctx.lineWidth = lineWidth;
       ctx.lineJoin = "round";
-      ctx.stroke(path);
+      ctx.stroke(path2);
       ctx.restore();
       if (Number.isFinite(lastPrice)) {
         const label = plan.state.options.label ?? plan.state.options.id;
@@ -9351,12 +9441,16 @@ function createChart(element, options = {}) {
         if (Math.hypot(x - x2, y - y2) <= 9 * hitTolerance) {
           return { drawing, target: "handle", pointIndex: 1 };
         }
-        const fibRatios = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1, 1.618];
-        for (const ratio of fibRatios) {
-          const price = first.price + (second.price - first.price) * (1 - ratio);
-          const lineY = canvasYFromDrawingPrice(price);
-          if (Math.abs(y - lineY) <= 5 * hitTolerance) {
-            return { drawing, target: "line" };
+        const fibLeft = Math.min(x1, x2) - 5 * hitTolerance;
+        const fibRight = Math.max(x1, x2) + 5 * hitTolerance;
+        if (x >= fibLeft && x <= fibRight) {
+          const fibRatios = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1, 1.618];
+          for (const ratio of fibRatios) {
+            const price = first.price + (second.price - first.price) * (1 - ratio);
+            const lineY = canvasYFromDrawingPrice(price);
+            if (Math.abs(y - lineY) <= 5 * hitTolerance) {
+              return { drawing, target: "line" };
+            }
           }
         }
       } else if (drawing.type === "fib-extension") {
@@ -9381,11 +9475,15 @@ function createChart(element, options = {}) {
             return { drawing, target: "handle", pointIndex: 2 };
           }
           const move = p1.price - p0.price;
-          const fibExtRatios = [0, 0.382, 0.5, 0.618, 1, 1.272, 1.618, 2.618];
-          for (const ratio of fibExtRatios) {
-            const lineY = canvasYFromDrawingPrice(p2.price + move * ratio);
-            if (Math.abs(y - lineY) <= 5 * hitTolerance) {
-              return { drawing, target: "line" };
+          const extLeft = Math.min(x0, x1, x2) - 5 * hitTolerance;
+          const extRight = Math.max(x0, x1, x2) + 5 * hitTolerance;
+          if (x >= extLeft && x <= extRight) {
+            const fibExtRatios = [0, 0.382, 0.5, 0.618, 1, 1.272, 1.618, 2.618];
+            for (const ratio of fibExtRatios) {
+              const lineY = canvasYFromDrawingPrice(p2.price + move * ratio);
+              if (Math.abs(y - lineY) <= 5 * hitTolerance) {
+                return { drawing, target: "line" };
+              }
             }
           }
           if (distanceToSegment(x, y, x0, y0, x1, y1) <= 6 * hitTolerance || distanceToSegment(x, y, x1, y1, x2, y2) <= 6 * hitTolerance) {
@@ -12339,6 +12437,9 @@ function createChart(element, options = {}) {
 export {
   CHART_THEMES,
   CHART_THEME_NAMES,
+  DRAWING_ICON_STROKE_WIDTH,
+  DRAWING_ICON_VIEWBOX,
+  DRAWING_TOOL_ICONS,
   FIB_DEFAULT_PALETTE,
   POSITION_DEFAULT_COLORS,
   SCRIPT_SOURCE_INPUT_VALUES,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hyperprop-charting-library",
-  "version": "0.1.152",
+  "version": "0.1.154",
   "description": "Lightweight TypeScript charting core",
   "type": "module",
   "main": "./dist/hyperprop-charting-library.cjs",