hyperprop-charting-library 0.1.69 → 0.1.71

package/dist/hyperprop-charting-library.cjs

@@ -20,9 +20,20 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  FIB_DEFAULT_PALETTE: () => FIB_DEFAULT_PALETTE,
   createChart: () => createChart
 });
 module.exports = __toCommonJS(index_exports);
+var FIB_DEFAULT_PALETTE = [
+  "#787b86",
+  "#f23645",
+  "#ff9800",
+  "#4caf50",
+  "#089981",
+  "#00bcd4",
+  "#2962ff",
+  "#9c27b0"
+];
 var DEFAULT_GRID_OPTIONS = {
   color: "#2b2f38",
   opacity: 0.38,
@@ -944,6 +955,7 @@ function createChart(element, options = {}) {
     })),
     visible: drawing.visible ?? true,
     color: drawing.color ?? "#94a3b8",
+    colors: Array.isArray(drawing.colors) ? drawing.colors.filter((value) => typeof value === "string") : [],
     style: drawing.style ?? "dotted",
     width: Math.max(1, Number(drawing.width) || 1),
     locked: drawing.locked ?? false,
@@ -955,6 +967,7 @@ function createChart(element, options = {}) {
     points: drawing.points.map((point) => ({ ...point })),
     visible: drawing.visible,
     color: drawing.color,
+    colors: [...drawing.colors],
     style: drawing.style,
     width: drawing.width,
     locked: drawing.locked,
@@ -2100,6 +2113,7 @@ function createChart(element, options = {}) {
     };
     const xFromDrawingPoint = (point) => chartLeft + (point.index + 0.5 - xStart) / xSpan * chartWidth;
     const FIB_RATIOS = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1, 1.618];
+    const FIB_EXT_RATIOS = [0, 0.382, 0.5, 0.618, 1, 1.272, 1.618, 2.618];
     const hexToRgba = (hex, alpha) => {
       const cleaned = hex.replace("#", "");
       if (cleaned.length !== 6) {
@@ -2244,32 +2258,33 @@ function createChart(element, options = {}) {
           const secondY = yFromPrice(second.price);
           const lineLeft = chartLeft;
           const lineRight = chartRight;
+          const palette = drawing.colors.length > 0 ? drawing.colors : null;
+          const levelColorAt = (index) => palette ? palette[index % palette.length] : drawing.color;
           const levelLines = FIB_RATIOS.map((ratio) => {
             const price = first.price + (second.price - first.price) * (1 - ratio);
             return { ratio, price, y: yFromPrice(price) };
           });
-          const bandColor = hexToRgba(drawing.color, 0.1);
           for (let index = 0; index < levelLines.length - 1; index += 1) {
             const top = levelLines[index];
             const bottom = levelLines[index + 1];
             const bandTop = Math.min(top.y, bottom.y);
             const bandBottom = Math.max(top.y, bottom.y);
             ctx.save();
-            ctx.fillStyle = bandColor;
+            ctx.fillStyle = hexToRgba(levelColorAt(index), 0.1);
             ctx.globalAlpha = draft ? 0.5 : 1;
             ctx.fillRect(lineLeft, bandTop, lineRight - lineLeft, bandBottom - bandTop);
             ctx.restore();
           }
           ctx.save();
           ctx.lineWidth = drawing.width;
-          ctx.strokeStyle = drawing.color;
           applyDashPattern(drawing.style, dashPatterns.dotted, dashPatterns.dashed);
-          for (const level of levelLines) {
+          levelLines.forEach((level, index) => {
+            ctx.strokeStyle = levelColorAt(index);
             ctx.beginPath();
             ctx.moveTo(crisp(lineLeft), crisp(level.y));
             ctx.lineTo(crisp(lineRight), crisp(level.y));
             ctx.stroke();
-          }
+          });
           ctx.restore();
           ctx.save();
           ctx.strokeStyle = hexToRgba(drawing.color, 0.5);
@@ -2284,7 +2299,7 @@ function createChart(element, options = {}) {
           drawDrawingHandle(secondX, secondY, drawing.color);
           const prevFont = ctx.font;
           ctx.font = `500 11px ${mergedOptions.fontFamily}`;
-          for (const level of levelLines) {
+          levelLines.forEach((level, index) => {
             const labelText = `${level.ratio} (${formatPrice(level.price)})`;
             const textWidth = ctx.measureText(labelText).width;
             const padding = 4;
@@ -2292,13 +2307,90 @@ function createChart(element, options = {}) {
             const bgY = level.y - 9;
             ctx.fillStyle = mergedOptions.backgroundColor;
             fillRoundedRect(bgX, bgY, textWidth + padding * 2, 16, 3);
-            ctx.fillStyle = drawing.color;
+            ctx.fillStyle = levelColorAt(index);
             ctx.textAlign = "left";
             ctx.textBaseline = "middle";
             ctx.fillText(labelText, bgX + padding, bgY + 8);
-          }
+          });
           ctx.font = prevFont;
         }
+      } else if (drawing.type === "fib-extension") {
+        const p0 = drawing.points[0];
+        const p1 = drawing.points[1];
+        const p2 = drawing.points[2];
+        if (p0 && p1) {
+          const x0 = xFromDrawingPoint(p0);
+          const y0 = yFromPrice(p0.price);
+          const x1 = xFromDrawingPoint(p1);
+          const y1 = yFromPrice(p1.price);
+          ctx.save();
+          ctx.strokeStyle = hexToRgba(drawing.color, 0.6);
+          ctx.setLineDash([4, 4]);
+          ctx.lineWidth = 1;
+          ctx.beginPath();
+          ctx.moveTo(x0, y0);
+          ctx.lineTo(x1, y1);
+          if (p2) {
+            ctx.lineTo(xFromDrawingPoint(p2), yFromPrice(p2.price));
+          }
+          ctx.stroke();
+          ctx.restore();
+          drawDrawingHandle(x0, y0, drawing.color);
+          drawDrawingHandle(x1, y1, drawing.color);
+          if (p2) {
+            const x2 = xFromDrawingPoint(p2);
+            const y2 = yFromPrice(p2.price);
+            drawDrawingHandle(x2, y2, drawing.color);
+            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 levelLines = FIB_EXT_RATIOS.map((ratio) => {
+              const price = p2.price + move * ratio;
+              return { ratio, price, y: yFromPrice(price) };
+            });
+            for (let index = 0; index < levelLines.length - 1; index += 1) {
+              const top = levelLines[index];
+              const bottom = levelLines[index + 1];
+              const bandTop = Math.min(top.y, bottom.y);
+              const bandBottom = Math.max(top.y, bottom.y);
+              ctx.save();
+              ctx.fillStyle = hexToRgba(levelColorAt(index), 0.1);
+              ctx.globalAlpha = draft ? 0.5 : 1;
+              ctx.fillRect(chartLeft, bandTop, chartRight - chartLeft, bandBottom - bandTop);
+              ctx.restore();
+            }
+            ctx.save();
+            ctx.lineWidth = drawing.width;
+            applyDashPattern(drawing.style, dashPatterns.dotted, dashPatterns.dashed);
+            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.stroke();
+            });
+            ctx.restore();
+            const prevFont = ctx.font;
+            ctx.font = `500 11px ${mergedOptions.fontFamily}`;
+            levelLines.forEach((level, index) => {
+              const labelText = `${level.ratio} (${formatPrice(level.price)})`;
+              const textWidth = ctx.measureText(labelText).width;
+              const padding = 4;
+              const bgX = chartLeft + 4;
+              const bgY = level.y - 9;
+              ctx.fillStyle = mergedOptions.backgroundColor;
+              fillRoundedRect(bgX, bgY, textWidth + padding * 2, 16, 3);
+              ctx.fillStyle = levelColorAt(index);
+              ctx.textAlign = "left";
+              ctx.textBaseline = "middle";
+              ctx.fillText(labelText, bgX + padding, bgY + 8);
+            });
+            ctx.font = prevFont;
+            if (drawing.label) {
+              drawDrawingLabel(drawing.label, (x0 + x2) / 2, Math.min(y0, y2), drawing.color);
+            }
+          }
+        }
       }
       ctx.restore();
     };
@@ -3460,6 +3552,41 @@ function createChart(element, options = {}) {
             return { drawing, target: "line" };
           }
         }
+      } else if (drawing.type === "fib-extension") {
+        const p0 = drawing.points[0];
+        const p1 = drawing.points[1];
+        const p2 = drawing.points[2];
+        if (!p0 || !p1) continue;
+        const x0 = canvasXFromDrawingPoint(p0);
+        const y0 = canvasYFromDrawingPrice(p0.price);
+        const x1 = canvasXFromDrawingPoint(p1);
+        const y1 = canvasYFromDrawingPrice(p1.price);
+        if (Math.hypot(x - x0, y - y0) <= 8) {
+          return { drawing, target: "handle", pointIndex: 0 };
+        }
+        if (Math.hypot(x - x1, y - y1) <= 8) {
+          return { drawing, target: "handle", pointIndex: 1 };
+        }
+        if (p2) {
+          const x2 = canvasXFromDrawingPoint(p2);
+          const y2 = canvasYFromDrawingPrice(p2.price);
+          if (Math.hypot(x - x2, y - y2) <= 8) {
+            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) {
+              return { drawing, target: "line" };
+            }
+          }
+          if (distanceToSegment(x, y, x0, y0, x1, y1) <= 6 || distanceToSegment(x, y, x1, y1, x2, y2) <= 6) {
+            return { drawing, target: "line" };
+          }
+        } else if (distanceToSegment(x, y, x0, y0, x1, y1) <= 6) {
+          return { drawing, target: "line" };
+        }
       }
     }
     return null;
@@ -3620,6 +3747,40 @@ function createChart(element, options = {}) {
         type: "fib-retracement",
         points: [point, point],
         color: defaults.color ?? "#2563eb",
+        colors: defaults.colors ?? FIB_DEFAULT_PALETTE,
+        style: defaults.style ?? "solid",
+        width: defaults.width ?? 1
+      });
+      draw();
+      return true;
+    }
+    if (activeDrawingTool === "fib-extension") {
+      if (draftDrawing?.type === "fib-extension") {
+        if (draftDrawing.points.length < 3) {
+          draftDrawing = normalizeDrawingState({
+            ...serializeDrawing(draftDrawing),
+            points: [...draftDrawing.points.slice(0, -1), point, point]
+          });
+          draw();
+          return true;
+        }
+        const completed = normalizeDrawingState({
+          ...serializeDrawing(draftDrawing),
+          points: [draftDrawing.points[0], draftDrawing.points[1], point]
+        });
+        drawings.push(completed);
+        draftDrawing = null;
+        activeDrawingTool = null;
+        emitDrawingsChange();
+        draw();
+        return true;
+      }
+      const defaults = getDrawingToolDefaults("fib-extension");
+      draftDrawing = normalizeDrawingState({
+        type: "fib-extension",
+        points: [point, point],
+        color: defaults.color ?? "#2563eb",
+        colors: defaults.colors ?? FIB_DEFAULT_PALETTE,
         style: defaults.style ?? "solid",
         width: defaults.width ?? 1
       });
@@ -3898,12 +4059,12 @@ function createChart(element, options = {}) {
       setCrosshairPoint(null);
       return;
     }
-    if (draftDrawing && (activeDrawingTool === "trendline" || activeDrawingTool === "ray" || activeDrawingTool === "fib-retracement")) {
+    if (draftDrawing && (activeDrawingTool === "trendline" || activeDrawingTool === "ray" || activeDrawingTool === "fib-retracement" || activeDrawingTool === "fib-extension")) {
       const nextPoint = drawingPointFromCanvas(point.x, point.y);
       if (nextPoint) {
         draftDrawing = {
           ...draftDrawing,
-          points: [draftDrawing.points[0], nextPoint]
+          points: [...draftDrawing.points.slice(0, -1), nextPoint]
         };
         canvas.style.cursor = "crosshair";
         draw();
@@ -4549,5 +4710,6 @@ function createChart(element, options = {}) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  FIB_DEFAULT_PALETTE,
   createChart
 });

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

@@ -44,7 +44,7 @@ interface ChartOptions {
     drawings?: DrawingObjectOptions[];
 }
 type IndicatorPane = "overlay" | "separate";
-type DrawingToolType = "horizontal-line" | "vertical-line" | "trendline" | "ray" | "fib-retracement";
+type DrawingToolType = "horizontal-line" | "vertical-line" | "trendline" | "ray" | "fib-retracement" | "fib-extension";
 interface DrawingPoint {
     index: number;
     price: number;
@@ -56,11 +56,19 @@ interface DrawingObjectOptions {
     points: DrawingPoint[];
     visible?: boolean;
     color?: string;
+    /**
+     * Optional per-level colors. Currently used by `fib-retracement`: when set
+     * (non-empty), each level/band cycles through these colors instead of using
+     * the single `color`. Leave empty for a monochrome drawing.
+     */
+    colors?: string[];
     style?: "solid" | "dotted" | "dashed";
     width?: number;
     label?: string;
     locked?: boolean;
 }
+/** Default multi-color palette for fib-retracement levels. */
+declare const FIB_DEFAULT_PALETTE: string[];
 interface DrawingSelectEvent {
     drawing: DrawingObjectOptions;
     target: "line" | "handle";
@@ -74,7 +82,7 @@ interface DrawingHoverEvent {
     x: number;
     y: number;
 }
-type DrawingDefaults = Partial<Pick<DrawingObjectOptions, "color" | "style" | "width">>;
+type DrawingDefaults = Partial<Pick<DrawingObjectOptions, "color" | "colors" | "style" | "width">>;
 interface IndicatorInstanceOptions<TInputs extends Record<string, unknown> = Record<string, unknown>> {
     id?: string;
     type: string;
@@ -447,4 +455,4 @@ interface ViewportState {
 }
 declare function createChart(element: HTMLElement, options?: ChartOptions): ChartInstance;
 
-export { type AxisOptions, type BuiltInIndicatorInfo, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type DrawingDefaults, type DrawingHoverEvent, type DrawingObjectOptions, type DrawingPoint, type DrawingSelectEvent, type DrawingToolType, type GridOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPaneAxisOptions, type IndicatorPaneGuideLine, type IndicatorPaneRenderInfo, type IndicatorPaneValue, type IndicatorPaneValueLabel, type IndicatorPlugin, type IndicatorRenderContext, type LabelsOptions, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, type PriceLineOptions, type TickerLineOptions, type ViewportState, type WatermarkOptions, createChart };
+export { type AxisOptions, type BuiltInIndicatorInfo, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type DrawingDefaults, type DrawingHoverEvent, type DrawingObjectOptions, type DrawingPoint, type DrawingSelectEvent, type DrawingToolType, FIB_DEFAULT_PALETTE, type GridOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPaneAxisOptions, type IndicatorPaneGuideLine, type IndicatorPaneRenderInfo, type IndicatorPaneValue, type IndicatorPaneValueLabel, type IndicatorPlugin, type IndicatorRenderContext, type LabelsOptions, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, type PriceLineOptions, type TickerLineOptions, type ViewportState, type WatermarkOptions, createChart };

package/dist/hyperprop-charting-library.js

@@ -1,4 +1,14 @@
 // src/index.ts
+var FIB_DEFAULT_PALETTE = [
+  "#787b86",
+  "#f23645",
+  "#ff9800",
+  "#4caf50",
+  "#089981",
+  "#00bcd4",
+  "#2962ff",
+  "#9c27b0"
+];
 var DEFAULT_GRID_OPTIONS = {
   color: "#2b2f38",
   opacity: 0.38,
@@ -920,6 +930,7 @@ function createChart(element, options = {}) {
     })),
     visible: drawing.visible ?? true,
     color: drawing.color ?? "#94a3b8",
+    colors: Array.isArray(drawing.colors) ? drawing.colors.filter((value) => typeof value === "string") : [],
     style: drawing.style ?? "dotted",
     width: Math.max(1, Number(drawing.width) || 1),
     locked: drawing.locked ?? false,
@@ -931,6 +942,7 @@ function createChart(element, options = {}) {
     points: drawing.points.map((point) => ({ ...point })),
     visible: drawing.visible,
     color: drawing.color,
+    colors: [...drawing.colors],
     style: drawing.style,
     width: drawing.width,
     locked: drawing.locked,
@@ -2076,6 +2088,7 @@ function createChart(element, options = {}) {
     };
     const xFromDrawingPoint = (point) => chartLeft + (point.index + 0.5 - xStart) / xSpan * chartWidth;
     const FIB_RATIOS = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1, 1.618];
+    const FIB_EXT_RATIOS = [0, 0.382, 0.5, 0.618, 1, 1.272, 1.618, 2.618];
     const hexToRgba = (hex, alpha) => {
       const cleaned = hex.replace("#", "");
       if (cleaned.length !== 6) {
@@ -2220,32 +2233,33 @@ function createChart(element, options = {}) {
           const secondY = yFromPrice(second.price);
           const lineLeft = chartLeft;
           const lineRight = chartRight;
+          const palette = drawing.colors.length > 0 ? drawing.colors : null;
+          const levelColorAt = (index) => palette ? palette[index % palette.length] : drawing.color;
           const levelLines = FIB_RATIOS.map((ratio) => {
             const price = first.price + (second.price - first.price) * (1 - ratio);
             return { ratio, price, y: yFromPrice(price) };
           });
-          const bandColor = hexToRgba(drawing.color, 0.1);
           for (let index = 0; index < levelLines.length - 1; index += 1) {
             const top = levelLines[index];
             const bottom = levelLines[index + 1];
             const bandTop = Math.min(top.y, bottom.y);
             const bandBottom = Math.max(top.y, bottom.y);
             ctx.save();
-            ctx.fillStyle = bandColor;
+            ctx.fillStyle = hexToRgba(levelColorAt(index), 0.1);
             ctx.globalAlpha = draft ? 0.5 : 1;
             ctx.fillRect(lineLeft, bandTop, lineRight - lineLeft, bandBottom - bandTop);
             ctx.restore();
           }
           ctx.save();
           ctx.lineWidth = drawing.width;
-          ctx.strokeStyle = drawing.color;
           applyDashPattern(drawing.style, dashPatterns.dotted, dashPatterns.dashed);
-          for (const level of levelLines) {
+          levelLines.forEach((level, index) => {
+            ctx.strokeStyle = levelColorAt(index);
             ctx.beginPath();
             ctx.moveTo(crisp(lineLeft), crisp(level.y));
             ctx.lineTo(crisp(lineRight), crisp(level.y));
             ctx.stroke();
-          }
+          });
           ctx.restore();
           ctx.save();
           ctx.strokeStyle = hexToRgba(drawing.color, 0.5);
@@ -2260,7 +2274,7 @@ function createChart(element, options = {}) {
           drawDrawingHandle(secondX, secondY, drawing.color);
           const prevFont = ctx.font;
           ctx.font = `500 11px ${mergedOptions.fontFamily}`;
-          for (const level of levelLines) {
+          levelLines.forEach((level, index) => {
             const labelText = `${level.ratio} (${formatPrice(level.price)})`;
             const textWidth = ctx.measureText(labelText).width;
             const padding = 4;
@@ -2268,13 +2282,90 @@ function createChart(element, options = {}) {
             const bgY = level.y - 9;
             ctx.fillStyle = mergedOptions.backgroundColor;
             fillRoundedRect(bgX, bgY, textWidth + padding * 2, 16, 3);
-            ctx.fillStyle = drawing.color;
+            ctx.fillStyle = levelColorAt(index);
             ctx.textAlign = "left";
             ctx.textBaseline = "middle";
             ctx.fillText(labelText, bgX + padding, bgY + 8);
-          }
+          });
           ctx.font = prevFont;
         }
+      } else if (drawing.type === "fib-extension") {
+        const p0 = drawing.points[0];
+        const p1 = drawing.points[1];
+        const p2 = drawing.points[2];
+        if (p0 && p1) {
+          const x0 = xFromDrawingPoint(p0);
+          const y0 = yFromPrice(p0.price);
+          const x1 = xFromDrawingPoint(p1);
+          const y1 = yFromPrice(p1.price);
+          ctx.save();
+          ctx.strokeStyle = hexToRgba(drawing.color, 0.6);
+          ctx.setLineDash([4, 4]);
+          ctx.lineWidth = 1;
+          ctx.beginPath();
+          ctx.moveTo(x0, y0);
+          ctx.lineTo(x1, y1);
+          if (p2) {
+            ctx.lineTo(xFromDrawingPoint(p2), yFromPrice(p2.price));
+          }
+          ctx.stroke();
+          ctx.restore();
+          drawDrawingHandle(x0, y0, drawing.color);
+          drawDrawingHandle(x1, y1, drawing.color);
+          if (p2) {
+            const x2 = xFromDrawingPoint(p2);
+            const y2 = yFromPrice(p2.price);
+            drawDrawingHandle(x2, y2, drawing.color);
+            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 levelLines = FIB_EXT_RATIOS.map((ratio) => {
+              const price = p2.price + move * ratio;
+              return { ratio, price, y: yFromPrice(price) };
+            });
+            for (let index = 0; index < levelLines.length - 1; index += 1) {
+              const top = levelLines[index];
+              const bottom = levelLines[index + 1];
+              const bandTop = Math.min(top.y, bottom.y);
+              const bandBottom = Math.max(top.y, bottom.y);
+              ctx.save();
+              ctx.fillStyle = hexToRgba(levelColorAt(index), 0.1);
+              ctx.globalAlpha = draft ? 0.5 : 1;
+              ctx.fillRect(chartLeft, bandTop, chartRight - chartLeft, bandBottom - bandTop);
+              ctx.restore();
+            }
+            ctx.save();
+            ctx.lineWidth = drawing.width;
+            applyDashPattern(drawing.style, dashPatterns.dotted, dashPatterns.dashed);
+            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.stroke();
+            });
+            ctx.restore();
+            const prevFont = ctx.font;
+            ctx.font = `500 11px ${mergedOptions.fontFamily}`;
+            levelLines.forEach((level, index) => {
+              const labelText = `${level.ratio} (${formatPrice(level.price)})`;
+              const textWidth = ctx.measureText(labelText).width;
+              const padding = 4;
+              const bgX = chartLeft + 4;
+              const bgY = level.y - 9;
+              ctx.fillStyle = mergedOptions.backgroundColor;
+              fillRoundedRect(bgX, bgY, textWidth + padding * 2, 16, 3);
+              ctx.fillStyle = levelColorAt(index);
+              ctx.textAlign = "left";
+              ctx.textBaseline = "middle";
+              ctx.fillText(labelText, bgX + padding, bgY + 8);
+            });
+            ctx.font = prevFont;
+            if (drawing.label) {
+              drawDrawingLabel(drawing.label, (x0 + x2) / 2, Math.min(y0, y2), drawing.color);
+            }
+          }
+        }
       }
       ctx.restore();
     };
@@ -3436,6 +3527,41 @@ function createChart(element, options = {}) {
             return { drawing, target: "line" };
           }
         }
+      } else if (drawing.type === "fib-extension") {
+        const p0 = drawing.points[0];
+        const p1 = drawing.points[1];
+        const p2 = drawing.points[2];
+        if (!p0 || !p1) continue;
+        const x0 = canvasXFromDrawingPoint(p0);
+        const y0 = canvasYFromDrawingPrice(p0.price);
+        const x1 = canvasXFromDrawingPoint(p1);
+        const y1 = canvasYFromDrawingPrice(p1.price);
+        if (Math.hypot(x - x0, y - y0) <= 8) {
+          return { drawing, target: "handle", pointIndex: 0 };
+        }
+        if (Math.hypot(x - x1, y - y1) <= 8) {
+          return { drawing, target: "handle", pointIndex: 1 };
+        }
+        if (p2) {
+          const x2 = canvasXFromDrawingPoint(p2);
+          const y2 = canvasYFromDrawingPrice(p2.price);
+          if (Math.hypot(x - x2, y - y2) <= 8) {
+            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) {
+              return { drawing, target: "line" };
+            }
+          }
+          if (distanceToSegment(x, y, x0, y0, x1, y1) <= 6 || distanceToSegment(x, y, x1, y1, x2, y2) <= 6) {
+            return { drawing, target: "line" };
+          }
+        } else if (distanceToSegment(x, y, x0, y0, x1, y1) <= 6) {
+          return { drawing, target: "line" };
+        }
       }
     }
     return null;
@@ -3596,6 +3722,40 @@ function createChart(element, options = {}) {
         type: "fib-retracement",
         points: [point, point],
         color: defaults.color ?? "#2563eb",
+        colors: defaults.colors ?? FIB_DEFAULT_PALETTE,
+        style: defaults.style ?? "solid",
+        width: defaults.width ?? 1
+      });
+      draw();
+      return true;
+    }
+    if (activeDrawingTool === "fib-extension") {
+      if (draftDrawing?.type === "fib-extension") {
+        if (draftDrawing.points.length < 3) {
+          draftDrawing = normalizeDrawingState({
+            ...serializeDrawing(draftDrawing),
+            points: [...draftDrawing.points.slice(0, -1), point, point]
+          });
+          draw();
+          return true;
+        }
+        const completed = normalizeDrawingState({
+          ...serializeDrawing(draftDrawing),
+          points: [draftDrawing.points[0], draftDrawing.points[1], point]
+        });
+        drawings.push(completed);
+        draftDrawing = null;
+        activeDrawingTool = null;
+        emitDrawingsChange();
+        draw();
+        return true;
+      }
+      const defaults = getDrawingToolDefaults("fib-extension");
+      draftDrawing = normalizeDrawingState({
+        type: "fib-extension",
+        points: [point, point],
+        color: defaults.color ?? "#2563eb",
+        colors: defaults.colors ?? FIB_DEFAULT_PALETTE,
         style: defaults.style ?? "solid",
         width: defaults.width ?? 1
       });
@@ -3874,12 +4034,12 @@ function createChart(element, options = {}) {
       setCrosshairPoint(null);
       return;
     }
-    if (draftDrawing && (activeDrawingTool === "trendline" || activeDrawingTool === "ray" || activeDrawingTool === "fib-retracement")) {
+    if (draftDrawing && (activeDrawingTool === "trendline" || activeDrawingTool === "ray" || activeDrawingTool === "fib-retracement" || activeDrawingTool === "fib-extension")) {
       const nextPoint = drawingPointFromCanvas(point.x, point.y);
       if (nextPoint) {
         draftDrawing = {
           ...draftDrawing,
-          points: [draftDrawing.points[0], nextPoint]
+          points: [...draftDrawing.points.slice(0, -1), nextPoint]
         };
         canvas.style.cursor = "crosshair";
         draw();
@@ -4524,5 +4684,6 @@ function createChart(element, options = {}) {
   };
 }
 export {
+  FIB_DEFAULT_PALETTE,
   createChart
 };

package/dist/index.cjs

@@ -20,9 +20,20 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  FIB_DEFAULT_PALETTE: () => FIB_DEFAULT_PALETTE,
   createChart: () => createChart
 });
 module.exports = __toCommonJS(index_exports);
+var FIB_DEFAULT_PALETTE = [
+  "#787b86",
+  "#f23645",
+  "#ff9800",
+  "#4caf50",
+  "#089981",
+  "#00bcd4",
+  "#2962ff",
+  "#9c27b0"
+];
 var DEFAULT_GRID_OPTIONS = {
   color: "#2b2f38",
   opacity: 0.38,
@@ -944,6 +955,7 @@ function createChart(element, options = {}) {
     })),
     visible: drawing.visible ?? true,
     color: drawing.color ?? "#94a3b8",
+    colors: Array.isArray(drawing.colors) ? drawing.colors.filter((value) => typeof value === "string") : [],
     style: drawing.style ?? "dotted",
     width: Math.max(1, Number(drawing.width) || 1),
     locked: drawing.locked ?? false,
@@ -955,6 +967,7 @@ function createChart(element, options = {}) {
     points: drawing.points.map((point) => ({ ...point })),
     visible: drawing.visible,
     color: drawing.color,
+    colors: [...drawing.colors],
     style: drawing.style,
     width: drawing.width,
     locked: drawing.locked,
@@ -2100,6 +2113,7 @@ function createChart(element, options = {}) {
     };
     const xFromDrawingPoint = (point) => chartLeft + (point.index + 0.5 - xStart) / xSpan * chartWidth;
     const FIB_RATIOS = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1, 1.618];
+    const FIB_EXT_RATIOS = [0, 0.382, 0.5, 0.618, 1, 1.272, 1.618, 2.618];
     const hexToRgba = (hex, alpha) => {
       const cleaned = hex.replace("#", "");
       if (cleaned.length !== 6) {
@@ -2244,32 +2258,33 @@ function createChart(element, options = {}) {
           const secondY = yFromPrice(second.price);
           const lineLeft = chartLeft;
           const lineRight = chartRight;
+          const palette = drawing.colors.length > 0 ? drawing.colors : null;
+          const levelColorAt = (index) => palette ? palette[index % palette.length] : drawing.color;
           const levelLines = FIB_RATIOS.map((ratio) => {
             const price = first.price + (second.price - first.price) * (1 - ratio);
             return { ratio, price, y: yFromPrice(price) };
           });
-          const bandColor = hexToRgba(drawing.color, 0.1);
           for (let index = 0; index < levelLines.length - 1; index += 1) {
             const top = levelLines[index];
             const bottom = levelLines[index + 1];
             const bandTop = Math.min(top.y, bottom.y);
             const bandBottom = Math.max(top.y, bottom.y);
             ctx.save();
-            ctx.fillStyle = bandColor;
+            ctx.fillStyle = hexToRgba(levelColorAt(index), 0.1);
             ctx.globalAlpha = draft ? 0.5 : 1;
             ctx.fillRect(lineLeft, bandTop, lineRight - lineLeft, bandBottom - bandTop);
             ctx.restore();
           }
           ctx.save();
           ctx.lineWidth = drawing.width;
-          ctx.strokeStyle = drawing.color;
           applyDashPattern(drawing.style, dashPatterns.dotted, dashPatterns.dashed);
-          for (const level of levelLines) {
+          levelLines.forEach((level, index) => {
+            ctx.strokeStyle = levelColorAt(index);
             ctx.beginPath();
             ctx.moveTo(crisp(lineLeft), crisp(level.y));
             ctx.lineTo(crisp(lineRight), crisp(level.y));
             ctx.stroke();
-          }
+          });
           ctx.restore();
           ctx.save();
           ctx.strokeStyle = hexToRgba(drawing.color, 0.5);
@@ -2284,7 +2299,7 @@ function createChart(element, options = {}) {
           drawDrawingHandle(secondX, secondY, drawing.color);
           const prevFont = ctx.font;
           ctx.font = `500 11px ${mergedOptions.fontFamily}`;
-          for (const level of levelLines) {
+          levelLines.forEach((level, index) => {
             const labelText = `${level.ratio} (${formatPrice(level.price)})`;
             const textWidth = ctx.measureText(labelText).width;
             const padding = 4;
@@ -2292,13 +2307,90 @@ function createChart(element, options = {}) {
             const bgY = level.y - 9;
             ctx.fillStyle = mergedOptions.backgroundColor;
             fillRoundedRect(bgX, bgY, textWidth + padding * 2, 16, 3);
-            ctx.fillStyle = drawing.color;
+            ctx.fillStyle = levelColorAt(index);
             ctx.textAlign = "left";
             ctx.textBaseline = "middle";
             ctx.fillText(labelText, bgX + padding, bgY + 8);
-          }
+          });
           ctx.font = prevFont;
         }
+      } else if (drawing.type === "fib-extension") {
+        const p0 = drawing.points[0];
+        const p1 = drawing.points[1];
+        const p2 = drawing.points[2];
+        if (p0 && p1) {
+          const x0 = xFromDrawingPoint(p0);
+          const y0 = yFromPrice(p0.price);
+          const x1 = xFromDrawingPoint(p1);
+          const y1 = yFromPrice(p1.price);
+          ctx.save();
+          ctx.strokeStyle = hexToRgba(drawing.color, 0.6);
+          ctx.setLineDash([4, 4]);
+          ctx.lineWidth = 1;
+          ctx.beginPath();
+          ctx.moveTo(x0, y0);
+          ctx.lineTo(x1, y1);
+          if (p2) {
+            ctx.lineTo(xFromDrawingPoint(p2), yFromPrice(p2.price));
+          }
+          ctx.stroke();
+          ctx.restore();
+          drawDrawingHandle(x0, y0, drawing.color);
+          drawDrawingHandle(x1, y1, drawing.color);
+          if (p2) {
+            const x2 = xFromDrawingPoint(p2);
+            const y2 = yFromPrice(p2.price);
+            drawDrawingHandle(x2, y2, drawing.color);
+            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 levelLines = FIB_EXT_RATIOS.map((ratio) => {
+              const price = p2.price + move * ratio;
+              return { ratio, price, y: yFromPrice(price) };
+            });
+            for (let index = 0; index < levelLines.length - 1; index += 1) {
+              const top = levelLines[index];
+              const bottom = levelLines[index + 1];
+              const bandTop = Math.min(top.y, bottom.y);
+              const bandBottom = Math.max(top.y, bottom.y);
+              ctx.save();
+              ctx.fillStyle = hexToRgba(levelColorAt(index), 0.1);
+              ctx.globalAlpha = draft ? 0.5 : 1;
+              ctx.fillRect(chartLeft, bandTop, chartRight - chartLeft, bandBottom - bandTop);
+              ctx.restore();
+            }
+            ctx.save();
+            ctx.lineWidth = drawing.width;
+            applyDashPattern(drawing.style, dashPatterns.dotted, dashPatterns.dashed);
+            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.stroke();
+            });
+            ctx.restore();
+            const prevFont = ctx.font;
+            ctx.font = `500 11px ${mergedOptions.fontFamily}`;
+            levelLines.forEach((level, index) => {
+              const labelText = `${level.ratio} (${formatPrice(level.price)})`;
+              const textWidth = ctx.measureText(labelText).width;
+              const padding = 4;
+              const bgX = chartLeft + 4;
+              const bgY = level.y - 9;
+              ctx.fillStyle = mergedOptions.backgroundColor;
+              fillRoundedRect(bgX, bgY, textWidth + padding * 2, 16, 3);
+              ctx.fillStyle = levelColorAt(index);
+              ctx.textAlign = "left";
+              ctx.textBaseline = "middle";
+              ctx.fillText(labelText, bgX + padding, bgY + 8);
+            });
+            ctx.font = prevFont;
+            if (drawing.label) {
+              drawDrawingLabel(drawing.label, (x0 + x2) / 2, Math.min(y0, y2), drawing.color);
+            }
+          }
+        }
       }
       ctx.restore();
     };
@@ -3460,6 +3552,41 @@ function createChart(element, options = {}) {
             return { drawing, target: "line" };
           }
         }
+      } else if (drawing.type === "fib-extension") {
+        const p0 = drawing.points[0];
+        const p1 = drawing.points[1];
+        const p2 = drawing.points[2];
+        if (!p0 || !p1) continue;
+        const x0 = canvasXFromDrawingPoint(p0);
+        const y0 = canvasYFromDrawingPrice(p0.price);
+        const x1 = canvasXFromDrawingPoint(p1);
+        const y1 = canvasYFromDrawingPrice(p1.price);
+        if (Math.hypot(x - x0, y - y0) <= 8) {
+          return { drawing, target: "handle", pointIndex: 0 };
+        }
+        if (Math.hypot(x - x1, y - y1) <= 8) {
+          return { drawing, target: "handle", pointIndex: 1 };
+        }
+        if (p2) {
+          const x2 = canvasXFromDrawingPoint(p2);
+          const y2 = canvasYFromDrawingPrice(p2.price);
+          if (Math.hypot(x - x2, y - y2) <= 8) {
+            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) {
+              return { drawing, target: "line" };
+            }
+          }
+          if (distanceToSegment(x, y, x0, y0, x1, y1) <= 6 || distanceToSegment(x, y, x1, y1, x2, y2) <= 6) {
+            return { drawing, target: "line" };
+          }
+        } else if (distanceToSegment(x, y, x0, y0, x1, y1) <= 6) {
+          return { drawing, target: "line" };
+        }
       }
     }
     return null;
@@ -3620,6 +3747,40 @@ function createChart(element, options = {}) {
         type: "fib-retracement",
         points: [point, point],
         color: defaults.color ?? "#2563eb",
+        colors: defaults.colors ?? FIB_DEFAULT_PALETTE,
+        style: defaults.style ?? "solid",
+        width: defaults.width ?? 1
+      });
+      draw();
+      return true;
+    }
+    if (activeDrawingTool === "fib-extension") {
+      if (draftDrawing?.type === "fib-extension") {
+        if (draftDrawing.points.length < 3) {
+          draftDrawing = normalizeDrawingState({
+            ...serializeDrawing(draftDrawing),
+            points: [...draftDrawing.points.slice(0, -1), point, point]
+          });
+          draw();
+          return true;
+        }
+        const completed = normalizeDrawingState({
+          ...serializeDrawing(draftDrawing),
+          points: [draftDrawing.points[0], draftDrawing.points[1], point]
+        });
+        drawings.push(completed);
+        draftDrawing = null;
+        activeDrawingTool = null;
+        emitDrawingsChange();
+        draw();
+        return true;
+      }
+      const defaults = getDrawingToolDefaults("fib-extension");
+      draftDrawing = normalizeDrawingState({
+        type: "fib-extension",
+        points: [point, point],
+        color: defaults.color ?? "#2563eb",
+        colors: defaults.colors ?? FIB_DEFAULT_PALETTE,
         style: defaults.style ?? "solid",
         width: defaults.width ?? 1
       });
@@ -3898,12 +4059,12 @@ function createChart(element, options = {}) {
       setCrosshairPoint(null);
       return;
     }
-    if (draftDrawing && (activeDrawingTool === "trendline" || activeDrawingTool === "ray" || activeDrawingTool === "fib-retracement")) {
+    if (draftDrawing && (activeDrawingTool === "trendline" || activeDrawingTool === "ray" || activeDrawingTool === "fib-retracement" || activeDrawingTool === "fib-extension")) {
       const nextPoint = drawingPointFromCanvas(point.x, point.y);
       if (nextPoint) {
         draftDrawing = {
           ...draftDrawing,
-          points: [draftDrawing.points[0], nextPoint]
+          points: [...draftDrawing.points.slice(0, -1), nextPoint]
         };
         canvas.style.cursor = "crosshair";
         draw();
@@ -4549,5 +4710,6 @@ function createChart(element, options = {}) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  FIB_DEFAULT_PALETTE,
   createChart
 });

package/dist/index.d.cts

@@ -44,7 +44,7 @@ interface ChartOptions {
     drawings?: DrawingObjectOptions[];
 }
 type IndicatorPane = "overlay" | "separate";
-type DrawingToolType = "horizontal-line" | "vertical-line" | "trendline" | "ray" | "fib-retracement";
+type DrawingToolType = "horizontal-line" | "vertical-line" | "trendline" | "ray" | "fib-retracement" | "fib-extension";
 interface DrawingPoint {
     index: number;
     price: number;
@@ -56,11 +56,19 @@ interface DrawingObjectOptions {
     points: DrawingPoint[];
     visible?: boolean;
     color?: string;
+    /**
+     * Optional per-level colors. Currently used by `fib-retracement`: when set
+     * (non-empty), each level/band cycles through these colors instead of using
+     * the single `color`. Leave empty for a monochrome drawing.
+     */
+    colors?: string[];
     style?: "solid" | "dotted" | "dashed";
     width?: number;
     label?: string;
     locked?: boolean;
 }
+/** Default multi-color palette for fib-retracement levels. */
+declare const FIB_DEFAULT_PALETTE: string[];
 interface DrawingSelectEvent {
     drawing: DrawingObjectOptions;
     target: "line" | "handle";
@@ -74,7 +82,7 @@ interface DrawingHoverEvent {
     x: number;
     y: number;
 }
-type DrawingDefaults = Partial<Pick<DrawingObjectOptions, "color" | "style" | "width">>;
+type DrawingDefaults = Partial<Pick<DrawingObjectOptions, "color" | "colors" | "style" | "width">>;
 interface IndicatorInstanceOptions<TInputs extends Record<string, unknown> = Record<string, unknown>> {
     id?: string;
     type: string;
@@ -447,4 +455,4 @@ interface ViewportState {
 }
 declare function createChart(element: HTMLElement, options?: ChartOptions): ChartInstance;
 
-export { type AxisOptions, type BuiltInIndicatorInfo, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type DrawingDefaults, type DrawingHoverEvent, type DrawingObjectOptions, type DrawingPoint, type DrawingSelectEvent, type DrawingToolType, type GridOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPaneAxisOptions, type IndicatorPaneGuideLine, type IndicatorPaneRenderInfo, type IndicatorPaneValue, type IndicatorPaneValueLabel, type IndicatorPlugin, type IndicatorRenderContext, type LabelsOptions, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, type PriceLineOptions, type TickerLineOptions, type ViewportState, type WatermarkOptions, createChart };
+export { type AxisOptions, type BuiltInIndicatorInfo, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type DrawingDefaults, type DrawingHoverEvent, type DrawingObjectOptions, type DrawingPoint, type DrawingSelectEvent, type DrawingToolType, FIB_DEFAULT_PALETTE, type GridOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPaneAxisOptions, type IndicatorPaneGuideLine, type IndicatorPaneRenderInfo, type IndicatorPaneValue, type IndicatorPaneValueLabel, type IndicatorPlugin, type IndicatorRenderContext, type LabelsOptions, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, type PriceLineOptions, type TickerLineOptions, type ViewportState, type WatermarkOptions, createChart };

package/dist/index.d.ts

@@ -44,7 +44,7 @@ interface ChartOptions {
     drawings?: DrawingObjectOptions[];
 }
 type IndicatorPane = "overlay" | "separate";
-type DrawingToolType = "horizontal-line" | "vertical-line" | "trendline" | "ray" | "fib-retracement";
+type DrawingToolType = "horizontal-line" | "vertical-line" | "trendline" | "ray" | "fib-retracement" | "fib-extension";
 interface DrawingPoint {
     index: number;
     price: number;
@@ -56,11 +56,19 @@ interface DrawingObjectOptions {
     points: DrawingPoint[];
     visible?: boolean;
     color?: string;
+    /**
+     * Optional per-level colors. Currently used by `fib-retracement`: when set
+     * (non-empty), each level/band cycles through these colors instead of using
+     * the single `color`. Leave empty for a monochrome drawing.
+     */
+    colors?: string[];
     style?: "solid" | "dotted" | "dashed";
     width?: number;
     label?: string;
     locked?: boolean;
 }
+/** Default multi-color palette for fib-retracement levels. */
+declare const FIB_DEFAULT_PALETTE: string[];
 interface DrawingSelectEvent {
     drawing: DrawingObjectOptions;
     target: "line" | "handle";
@@ -74,7 +82,7 @@ interface DrawingHoverEvent {
     x: number;
     y: number;
 }
-type DrawingDefaults = Partial<Pick<DrawingObjectOptions, "color" | "style" | "width">>;
+type DrawingDefaults = Partial<Pick<DrawingObjectOptions, "color" | "colors" | "style" | "width">>;
 interface IndicatorInstanceOptions<TInputs extends Record<string, unknown> = Record<string, unknown>> {
     id?: string;
     type: string;
@@ -447,4 +455,4 @@ interface ViewportState {
 }
 declare function createChart(element: HTMLElement, options?: ChartOptions): ChartInstance;
 
-export { type AxisOptions, type BuiltInIndicatorInfo, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type DrawingDefaults, type DrawingHoverEvent, type DrawingObjectOptions, type DrawingPoint, type DrawingSelectEvent, type DrawingToolType, type GridOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPaneAxisOptions, type IndicatorPaneGuideLine, type IndicatorPaneRenderInfo, type IndicatorPaneValue, type IndicatorPaneValueLabel, type IndicatorPlugin, type IndicatorRenderContext, type LabelsOptions, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, type PriceLineOptions, type TickerLineOptions, type ViewportState, type WatermarkOptions, createChart };
+export { type AxisOptions, type BuiltInIndicatorInfo, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type DrawingDefaults, type DrawingHoverEvent, type DrawingObjectOptions, type DrawingPoint, type DrawingSelectEvent, type DrawingToolType, FIB_DEFAULT_PALETTE, type GridOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPaneAxisOptions, type IndicatorPaneGuideLine, type IndicatorPaneRenderInfo, type IndicatorPaneValue, type IndicatorPaneValueLabel, type IndicatorPlugin, type IndicatorRenderContext, type LabelsOptions, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, type PriceLineOptions, type TickerLineOptions, type ViewportState, type WatermarkOptions, createChart };

package/dist/index.js

@@ -1,4 +1,14 @@
 // src/index.ts
+var FIB_DEFAULT_PALETTE = [
+  "#787b86",
+  "#f23645",
+  "#ff9800",
+  "#4caf50",
+  "#089981",
+  "#00bcd4",
+  "#2962ff",
+  "#9c27b0"
+];
 var DEFAULT_GRID_OPTIONS = {
   color: "#2b2f38",
   opacity: 0.38,
@@ -920,6 +930,7 @@ function createChart(element, options = {}) {
     })),
     visible: drawing.visible ?? true,
     color: drawing.color ?? "#94a3b8",
+    colors: Array.isArray(drawing.colors) ? drawing.colors.filter((value) => typeof value === "string") : [],
     style: drawing.style ?? "dotted",
     width: Math.max(1, Number(drawing.width) || 1),
     locked: drawing.locked ?? false,
@@ -931,6 +942,7 @@ function createChart(element, options = {}) {
     points: drawing.points.map((point) => ({ ...point })),
     visible: drawing.visible,
     color: drawing.color,
+    colors: [...drawing.colors],
     style: drawing.style,
     width: drawing.width,
     locked: drawing.locked,
@@ -2076,6 +2088,7 @@ function createChart(element, options = {}) {
     };
     const xFromDrawingPoint = (point) => chartLeft + (point.index + 0.5 - xStart) / xSpan * chartWidth;
     const FIB_RATIOS = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1, 1.618];
+    const FIB_EXT_RATIOS = [0, 0.382, 0.5, 0.618, 1, 1.272, 1.618, 2.618];
     const hexToRgba = (hex, alpha) => {
       const cleaned = hex.replace("#", "");
       if (cleaned.length !== 6) {
@@ -2220,32 +2233,33 @@ function createChart(element, options = {}) {
           const secondY = yFromPrice(second.price);
           const lineLeft = chartLeft;
           const lineRight = chartRight;
+          const palette = drawing.colors.length > 0 ? drawing.colors : null;
+          const levelColorAt = (index) => palette ? palette[index % palette.length] : drawing.color;
           const levelLines = FIB_RATIOS.map((ratio) => {
             const price = first.price + (second.price - first.price) * (1 - ratio);
             return { ratio, price, y: yFromPrice(price) };
           });
-          const bandColor = hexToRgba(drawing.color, 0.1);
           for (let index = 0; index < levelLines.length - 1; index += 1) {
             const top = levelLines[index];
             const bottom = levelLines[index + 1];
             const bandTop = Math.min(top.y, bottom.y);
             const bandBottom = Math.max(top.y, bottom.y);
             ctx.save();
-            ctx.fillStyle = bandColor;
+            ctx.fillStyle = hexToRgba(levelColorAt(index), 0.1);
             ctx.globalAlpha = draft ? 0.5 : 1;
             ctx.fillRect(lineLeft, bandTop, lineRight - lineLeft, bandBottom - bandTop);
             ctx.restore();
           }
           ctx.save();
           ctx.lineWidth = drawing.width;
-          ctx.strokeStyle = drawing.color;
           applyDashPattern(drawing.style, dashPatterns.dotted, dashPatterns.dashed);
-          for (const level of levelLines) {
+          levelLines.forEach((level, index) => {
+            ctx.strokeStyle = levelColorAt(index);
             ctx.beginPath();
             ctx.moveTo(crisp(lineLeft), crisp(level.y));
             ctx.lineTo(crisp(lineRight), crisp(level.y));
             ctx.stroke();
-          }
+          });
           ctx.restore();
           ctx.save();
           ctx.strokeStyle = hexToRgba(drawing.color, 0.5);
@@ -2260,7 +2274,7 @@ function createChart(element, options = {}) {
           drawDrawingHandle(secondX, secondY, drawing.color);
           const prevFont = ctx.font;
           ctx.font = `500 11px ${mergedOptions.fontFamily}`;
-          for (const level of levelLines) {
+          levelLines.forEach((level, index) => {
             const labelText = `${level.ratio} (${formatPrice(level.price)})`;
             const textWidth = ctx.measureText(labelText).width;
             const padding = 4;
@@ -2268,13 +2282,90 @@ function createChart(element, options = {}) {
             const bgY = level.y - 9;
             ctx.fillStyle = mergedOptions.backgroundColor;
             fillRoundedRect(bgX, bgY, textWidth + padding * 2, 16, 3);
-            ctx.fillStyle = drawing.color;
+            ctx.fillStyle = levelColorAt(index);
             ctx.textAlign = "left";
             ctx.textBaseline = "middle";
             ctx.fillText(labelText, bgX + padding, bgY + 8);
-          }
+          });
           ctx.font = prevFont;
         }
+      } else if (drawing.type === "fib-extension") {
+        const p0 = drawing.points[0];
+        const p1 = drawing.points[1];
+        const p2 = drawing.points[2];
+        if (p0 && p1) {
+          const x0 = xFromDrawingPoint(p0);
+          const y0 = yFromPrice(p0.price);
+          const x1 = xFromDrawingPoint(p1);
+          const y1 = yFromPrice(p1.price);
+          ctx.save();
+          ctx.strokeStyle = hexToRgba(drawing.color, 0.6);
+          ctx.setLineDash([4, 4]);
+          ctx.lineWidth = 1;
+          ctx.beginPath();
+          ctx.moveTo(x0, y0);
+          ctx.lineTo(x1, y1);
+          if (p2) {
+            ctx.lineTo(xFromDrawingPoint(p2), yFromPrice(p2.price));
+          }
+          ctx.stroke();
+          ctx.restore();
+          drawDrawingHandle(x0, y0, drawing.color);
+          drawDrawingHandle(x1, y1, drawing.color);
+          if (p2) {
+            const x2 = xFromDrawingPoint(p2);
+            const y2 = yFromPrice(p2.price);
+            drawDrawingHandle(x2, y2, drawing.color);
+            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 levelLines = FIB_EXT_RATIOS.map((ratio) => {
+              const price = p2.price + move * ratio;
+              return { ratio, price, y: yFromPrice(price) };
+            });
+            for (let index = 0; index < levelLines.length - 1; index += 1) {
+              const top = levelLines[index];
+              const bottom = levelLines[index + 1];
+              const bandTop = Math.min(top.y, bottom.y);
+              const bandBottom = Math.max(top.y, bottom.y);
+              ctx.save();
+              ctx.fillStyle = hexToRgba(levelColorAt(index), 0.1);
+              ctx.globalAlpha = draft ? 0.5 : 1;
+              ctx.fillRect(chartLeft, bandTop, chartRight - chartLeft, bandBottom - bandTop);
+              ctx.restore();
+            }
+            ctx.save();
+            ctx.lineWidth = drawing.width;
+            applyDashPattern(drawing.style, dashPatterns.dotted, dashPatterns.dashed);
+            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.stroke();
+            });
+            ctx.restore();
+            const prevFont = ctx.font;
+            ctx.font = `500 11px ${mergedOptions.fontFamily}`;
+            levelLines.forEach((level, index) => {
+              const labelText = `${level.ratio} (${formatPrice(level.price)})`;
+              const textWidth = ctx.measureText(labelText).width;
+              const padding = 4;
+              const bgX = chartLeft + 4;
+              const bgY = level.y - 9;
+              ctx.fillStyle = mergedOptions.backgroundColor;
+              fillRoundedRect(bgX, bgY, textWidth + padding * 2, 16, 3);
+              ctx.fillStyle = levelColorAt(index);
+              ctx.textAlign = "left";
+              ctx.textBaseline = "middle";
+              ctx.fillText(labelText, bgX + padding, bgY + 8);
+            });
+            ctx.font = prevFont;
+            if (drawing.label) {
+              drawDrawingLabel(drawing.label, (x0 + x2) / 2, Math.min(y0, y2), drawing.color);
+            }
+          }
+        }
       }
       ctx.restore();
     };
@@ -3436,6 +3527,41 @@ function createChart(element, options = {}) {
             return { drawing, target: "line" };
           }
         }
+      } else if (drawing.type === "fib-extension") {
+        const p0 = drawing.points[0];
+        const p1 = drawing.points[1];
+        const p2 = drawing.points[2];
+        if (!p0 || !p1) continue;
+        const x0 = canvasXFromDrawingPoint(p0);
+        const y0 = canvasYFromDrawingPrice(p0.price);
+        const x1 = canvasXFromDrawingPoint(p1);
+        const y1 = canvasYFromDrawingPrice(p1.price);
+        if (Math.hypot(x - x0, y - y0) <= 8) {
+          return { drawing, target: "handle", pointIndex: 0 };
+        }
+        if (Math.hypot(x - x1, y - y1) <= 8) {
+          return { drawing, target: "handle", pointIndex: 1 };
+        }
+        if (p2) {
+          const x2 = canvasXFromDrawingPoint(p2);
+          const y2 = canvasYFromDrawingPrice(p2.price);
+          if (Math.hypot(x - x2, y - y2) <= 8) {
+            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) {
+              return { drawing, target: "line" };
+            }
+          }
+          if (distanceToSegment(x, y, x0, y0, x1, y1) <= 6 || distanceToSegment(x, y, x1, y1, x2, y2) <= 6) {
+            return { drawing, target: "line" };
+          }
+        } else if (distanceToSegment(x, y, x0, y0, x1, y1) <= 6) {
+          return { drawing, target: "line" };
+        }
       }
     }
     return null;
@@ -3596,6 +3722,40 @@ function createChart(element, options = {}) {
         type: "fib-retracement",
         points: [point, point],
         color: defaults.color ?? "#2563eb",
+        colors: defaults.colors ?? FIB_DEFAULT_PALETTE,
+        style: defaults.style ?? "solid",
+        width: defaults.width ?? 1
+      });
+      draw();
+      return true;
+    }
+    if (activeDrawingTool === "fib-extension") {
+      if (draftDrawing?.type === "fib-extension") {
+        if (draftDrawing.points.length < 3) {
+          draftDrawing = normalizeDrawingState({
+            ...serializeDrawing(draftDrawing),
+            points: [...draftDrawing.points.slice(0, -1), point, point]
+          });
+          draw();
+          return true;
+        }
+        const completed = normalizeDrawingState({
+          ...serializeDrawing(draftDrawing),
+          points: [draftDrawing.points[0], draftDrawing.points[1], point]
+        });
+        drawings.push(completed);
+        draftDrawing = null;
+        activeDrawingTool = null;
+        emitDrawingsChange();
+        draw();
+        return true;
+      }
+      const defaults = getDrawingToolDefaults("fib-extension");
+      draftDrawing = normalizeDrawingState({
+        type: "fib-extension",
+        points: [point, point],
+        color: defaults.color ?? "#2563eb",
+        colors: defaults.colors ?? FIB_DEFAULT_PALETTE,
         style: defaults.style ?? "solid",
         width: defaults.width ?? 1
       });
@@ -3874,12 +4034,12 @@ function createChart(element, options = {}) {
       setCrosshairPoint(null);
       return;
     }
-    if (draftDrawing && (activeDrawingTool === "trendline" || activeDrawingTool === "ray" || activeDrawingTool === "fib-retracement")) {
+    if (draftDrawing && (activeDrawingTool === "trendline" || activeDrawingTool === "ray" || activeDrawingTool === "fib-retracement" || activeDrawingTool === "fib-extension")) {
       const nextPoint = drawingPointFromCanvas(point.x, point.y);
       if (nextPoint) {
         draftDrawing = {
           ...draftDrawing,
-          points: [draftDrawing.points[0], nextPoint]
+          points: [...draftDrawing.points.slice(0, -1), nextPoint]
         };
         canvas.style.cursor = "crosshair";
         draw();
@@ -4524,5 +4684,6 @@ function createChart(element, options = {}) {
   };
 }
 export {
+  FIB_DEFAULT_PALETTE,
   createChart
 };

package/docs/API.md

@@ -416,14 +416,16 @@ Volume style inputs:
 Drawings are user-created chart tools, separate from indicators. They are interactive chart objects like horizontal lines and trendlines.
 
 - `id?: string`
-- `type: "horizontal-line" | "vertical-line" | "trendline" | "ray" | "fib-retracement"`
+- `type: "horizontal-line" | "vertical-line" | "trendline" | "ray" | "fib-retracement" | "fib-extension"`
   - `horizontal-line` / `vertical-line`: single-point, full-width/full-height line (one click to place)
   - `trendline`: two-point segment (click start, click end)
   - `ray`: two-point line that extends infinitely past the second point
   - `fib-retracement`: two-point retracement with levels/bands
+  - `fib-extension`: trend-based three-point extension (click trend start, trend end, then the projection origin); levels project from the third point by the first→second move
 - `points: DrawingPoint[]`
 - `visible?: boolean`
 - `color?: string`
+- `colors?: string[]` (per-level colors; used by `fib-retracement`. When non-empty, each level/band cycles through these instead of `color`. New fib drawings default to `FIB_DEFAULT_PALETTE`; set `colors: []` for a monochrome fib that follows `color`.)
 - `style?: "solid" | "dotted" | "dashed"`
 - `width?: number`
 - `label?: string`
@@ -446,6 +448,7 @@ chart.setActiveDrawingTool("vertical-line");   // next plot click creates a vert
 chart.setActiveDrawingTool("trendline");       // first click starts, second click commits
 chart.setActiveDrawingTool("ray");             // first click starts, second click commits (extends past p2)
 chart.setActiveDrawingTool("fib-retracement"); // first click starts, second click commits
+chart.setActiveDrawingTool("fib-extension");   // three clicks: trend start, trend end, projection origin
 chart.setActiveDrawingTool(null);              // back to normal cursor/pan
 ```
 

package/package.json

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