hyperprop-charting-library 0.1.136 → 0.1.138

package/dist/hyperprop-charting-library.js

@@ -2121,6 +2121,82 @@ var hashScriptSource = (source) => {
   }
   return (hash >>> 0).toString(36);
 };
+var SCRIPT_SOURCE_INPUT_VALUES = ["open", "high", "low", "close", "hl2", "hlc3", "ohlc4"];
+var slugifyInputLabel = (label) => {
+  const slug = String(label).trim().toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/^_+|_+$/g, "");
+  return slug || "input";
+};
+var createScriptInputHelper = (values, registry) => {
+  const usedKeys = /* @__PURE__ */ new Set();
+  const resolveKey = (label, options) => {
+    let key = options?.key ?? slugifyInputLabel(label);
+    if (usedKeys.has(key)) {
+      let suffix = 2;
+      while (usedKeys.has(`${key}_${suffix}`)) suffix += 1;
+      key = `${key}_${suffix}`;
+    }
+    usedKeys.add(key);
+    return key;
+  };
+  const resolve = (key, fallback, coerce) => {
+    if (!values) return fallback;
+    const raw = values[key];
+    if (raw === void 0 || raw === null) return fallback;
+    const coerced = coerce(raw);
+    return coerced === void 0 ? fallback : coerced;
+  };
+  const coerceNumber = (raw) => {
+    const num = typeof raw === "number" ? raw : Number(raw);
+    return Number.isFinite(num) ? num : void 0;
+  };
+  const numberInput = (integer) => (label, defaultValue, options) => {
+    const key = resolveKey(label, options);
+    registry?.push({
+      key,
+      label,
+      type: "number",
+      default: defaultValue,
+      ...options?.min !== void 0 ? { min: options.min } : {},
+      ...options?.max !== void 0 ? { max: options.max } : {},
+      ...options?.step !== void 0 ? { step: options.step } : integer ? { step: 1 } : {}
+    });
+    const value = resolve(key, defaultValue, coerceNumber);
+    return integer ? Math.round(value) : value;
+  };
+  const selectInput = (label, defaultValue, choices, options) => {
+    const key = resolveKey(label, options);
+    const normalized = (Array.isArray(choices) ? choices : []).map(
+      (choice) => typeof choice === "string" ? { value: choice, label: choice } : { value: String(choice.value), label: String(choice.label ?? choice.value) }
+    );
+    registry?.push({ key, label, type: "select", default: defaultValue, options: normalized });
+    return resolve(key, defaultValue, (raw) => typeof raw === "string" ? raw : String(raw));
+  };
+  return Object.freeze({
+    int: numberInput(true),
+    float: numberInput(false),
+    bool: (label, defaultValue = false, options) => {
+      const key = resolveKey(label, options);
+      registry?.push({ key, label, type: "boolean", default: defaultValue });
+      return resolve(
+        key,
+        defaultValue,
+        (raw) => typeof raw === "boolean" ? raw : raw === "true" ? true : raw === "false" ? false : void 0
+      );
+    },
+    color: (label, defaultValue, options) => {
+      const key = resolveKey(label, options);
+      registry?.push({ key, label, type: "color", default: defaultValue });
+      return resolve(key, defaultValue, (raw) => typeof raw === "string" ? raw : void 0);
+    },
+    string: (label, defaultValue = "", options) => {
+      const key = resolveKey(label, options);
+      registry?.push({ key, label, type: "string", default: defaultValue });
+      return resolve(key, defaultValue, (raw) => typeof raw === "string" ? raw : String(raw));
+    },
+    select: selectInput,
+    source: (label = "Source", defaultValue = "close", options) => selectInput(label, defaultValue, SCRIPT_SOURCE_INPUT_VALUES, options)
+  });
+};
 var SCRIPT_GUARD_BUDGET_MS = 1e3;
 var ScriptBudgetError = class extends Error {
   constructor() {
@@ -2395,31 +2471,34 @@ var injectLoopGuards = (source, guardName) => {
   }
   return out;
 };
-var compileScriptCompute = (source, guard) => {
+var compileScriptFactory = (source) => {
   const makeFactory = (body) => new Function(
     "__hpGuard",
+    "input",
     `"use strict";
 ${body}
 ;if (typeof compute !== "function") { throw new Error("Script must define function compute(bars, inputs, hp)"); }
 return compute;`
   );
-  let factory;
   try {
-    factory = makeFactory(injectLoopGuards(source, "__hpGuard"));
+    return makeFactory(injectLoopGuards(source, "__hpGuard"));
   } catch {
-    factory = makeFactory(source);
+    return makeFactory(source);
   }
-  guard.reset();
-  return factory(guard);
 };
-var validateScriptSource = (source) => {
+var extractScriptInputs = (source) => {
+  const registry = [];
   try {
-    compileScriptCompute(source, createScriptGuard());
-    return null;
+    const factory = compileScriptFactory(source);
+    const guard = createScriptGuard();
+    guard.reset();
+    factory(guard, createScriptInputHelper(null, registry));
+    return { inputs: registry, error: null };
   } catch (error) {
-    return error instanceof Error ? error.message : String(error);
+    return { inputs: registry, error: error instanceof Error ? error.message : String(error) };
   }
 };
+var validateScriptSource = (source) => extractScriptInputs(source).error;
 var drawScriptError = (ctx, renderContext, name, message) => {
   ctx.save();
   ctx.font = "11px -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif";
@@ -2436,18 +2515,24 @@ var compileScriptIndicator = (definition) => {
   for (const input of definition.inputs ?? []) {
     defaultInputs[input.key] = input.default;
   }
-  let compiled = null;
+  let factory = null;
   let compileError = null;
   const guard = createScriptGuard();
   try {
-    compiled = compileScriptCompute(definition.source, guard);
+    factory = compileScriptFactory(definition.source);
+    const declared = [];
+    guard.reset();
+    factory(guard, createScriptInputHelper(null, declared));
+    for (const input of declared) {
+      defaultInputs[input.key] = input.default;
+    }
   } catch (error) {
     compileError = error instanceof Error ? error.message : String(error);
   }
   const sourceKey = hashScriptSource(definition.source);
   let trippedError = null;
   const runCompute = (data, inputs) => {
-    if (!compiled) {
+    if (!factory || compileError) {
       return { error: compileError ?? "Script failed to compile" };
     }
     if (trippedError) {
@@ -2455,6 +2540,7 @@ var compileScriptIndicator = (definition) => {
     }
     try {
       guard.reset();
+      const compiled = factory(guard, createScriptInputHelper(inputs, null));
       const result = compiled(data, inputs, SCRIPT_HELPERS);
       if (!result || !Array.isArray(result.plots)) {
         return { error: "compute() must return { plots: [...] }" };
@@ -2733,6 +2819,8 @@ var DEFAULT_OPTIONS = {
   pinOutOfRangeLines: false,
   doubleClickEnabled: true,
   doubleClickAction: "reset",
+  keyboard: { enabled: true, panBars: 1, deleteSelectedDrawing: true },
+  accessibility: { label: "Price chart", description: "", focusable: true },
   crosshair: DEFAULT_CROSSHAIR_OPTIONS,
   grid: DEFAULT_GRID_OPTIONS,
   watermark: DEFAULT_WATERMARK_OPTIONS,
@@ -2775,6 +2863,14 @@ var mergeChartOptions = (baseOptions, options = {}) => ({
     ...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {},
     ...options.yAxis ?? {}
   },
+  keyboard: {
+    ...baseOptions.keyboard,
+    ...options.keyboard ?? {}
+  },
+  accessibility: {
+    ...baseOptions.accessibility,
+    ...options.accessibility ?? {}
+  },
   crosshair: {
     ...baseOptions.crosshair,
     ...options.crosshair ?? {}
@@ -2948,7 +3044,29 @@ function createChart(element, options = {}) {
   let drawingSelectHandler = null;
   let drawingDoubleClickHandler = null;
   let drawingEditTextHandler = null;
+  let selectionChangeHandler = null;
+  let contextMenuHandler = null;
+  let keyboardShortcutHandler = null;
+  let lastSelectionSignature = null;
   let magnetMode = "none";
+  let priceScaleMode = "linear";
+  let priceScaleInverted = false;
+  const PRICE_SCALE_LOG_FLOOR = 1e-9;
+  const priceScaleTransform = (price) => priceScaleMode === "log" ? Math.log10(Math.max(PRICE_SCALE_LOG_FLOOR, price)) : price;
+  const priceScaleUntransform = (value) => priceScaleMode === "log" ? Math.pow(10, value) : value;
+  const percentBaselineForXStart = (xStartValue) => {
+    if (priceScaleMode !== "percent") return null;
+    const bar = data[clamp(Math.round(xStartValue), 0, Math.max(0, data.length - 1))];
+    return bar && bar.c > 0 ? bar.c : null;
+  };
+  const formatPriceForScale = (price, percentBaseline) => {
+    if (percentBaseline !== null) {
+      const pct = (price / percentBaseline - 1) * 100;
+      const rounded = Math.abs(pct) < 5e-3 ? 0 : pct;
+      return `${rounded > 0 ? "+" : ""}${rounded.toFixed(2)}%`;
+    }
+    return formatPrice(price);
+  };
   let magnetModifierActive = false;
   let shiftKeyActive = false;
   const MAGNET_WEAK_THRESHOLD_PX = 16;
@@ -3092,6 +3210,39 @@ function createChart(element, options = {}) {
   canvas.style.setProperty("-webkit-user-select", "none");
   canvas.style.setProperty("-webkit-touch-callout", "none");
   canvas.setAttribute("draggable", "false");
+  const applyAccessibilityAttributes = () => {
+    const a11y = mergedOptions.accessibility ?? {};
+    const focusable = a11y.focusable !== false;
+    if (focusable) {
+      canvas.tabIndex = 0;
+    } else {
+      canvas.removeAttribute("tabindex");
+    }
+    canvas.setAttribute("role", "application");
+    canvas.setAttribute("aria-label", a11y.label ?? "Price chart");
+    if (a11y.description) {
+      canvas.setAttribute("aria-description", a11y.description);
+    } else {
+      canvas.removeAttribute("aria-description");
+    }
+    if (focusable && (mergedOptions.keyboard?.enabled ?? true)) {
+      canvas.setAttribute(
+        "aria-keyshortcuts",
+        "ArrowLeft ArrowRight ArrowUp ArrowDown Plus Minus Home End Delete Escape"
+      );
+    } else {
+      canvas.removeAttribute("aria-keyshortcuts");
+    }
+  };
+  applyAccessibilityAttributes();
+  let focusFromPointer = false;
+  canvas.addEventListener("focus", () => {
+    canvas.style.outline = focusFromPointer ? "none" : "";
+    focusFromPointer = false;
+  });
+  canvas.addEventListener("blur", () => {
+    canvas.style.outline = "none";
+  });
   element.innerHTML = "";
   element.appendChild(canvas);
   const baseCanvas = document.createElement("canvas");
@@ -4282,9 +4433,14 @@ function createChart(element, options = {}) {
       yMax
     };
     plotBottomForHit = fullChartBottom;
+    const scaledYMin = priceScaleTransform(yMin);
+    const scaledYRange = priceScaleTransform(yMax) - scaledYMin || 1;
     const yFromPrice = (price) => {
-      return chartBottom - (price - yMin) / yRange * chartHeight;
+      const ratio = (priceScaleTransform(price) - scaledYMin) / scaledYRange;
+      return priceScaleInverted ? chartTop + ratio * chartHeight : chartBottom - ratio * chartHeight;
     };
+    const percentBaseline = percentBaselineForXStart(xStart);
+    const formatAxisPrice = (price) => formatPriceForScale(price, percentBaseline);
     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];
@@ -5191,19 +5347,40 @@ function createChart(element, options = {}) {
     const yTicks = Math.max(1, Math.floor(yTickCountInput));
     const gridColor = grid.color ?? mergedOptions.gridColor;
     const priceTicks = [];
-    {
-      const targetStep = yRange / Math.max(1, yTicks);
-      let step;
-      if (targetStep > 0 && Number.isFinite(targetStep)) {
-        const base = Math.pow(10, Math.floor(Math.log10(targetStep)));
-        const frac = targetStep / base;
-        step = (frac <= 1 ? 1 : frac <= 2 ? 2 : frac <= 2.5 ? 2.5 : frac <= 5 ? 5 : 10) * base;
-        const instrumentTick = getConfiguredTickSize();
-        if (instrumentTick > 0 && step < instrumentTick * 1e6) {
-          step = Math.max(instrumentTick, Math.round(step / instrumentTick) * instrumentTick);
+    const pickNiceStep = (targetStep) => {
+      if (!(targetStep > 0) || !Number.isFinite(targetStep)) return 1;
+      const base = Math.pow(10, Math.floor(Math.log10(targetStep)));
+      const frac = targetStep / base;
+      return (frac <= 1 ? 1 : frac <= 2 ? 2 : frac <= 2.5 ? 2.5 : frac <= 5 ? 5 : 10) * base;
+    };
+    if (percentBaseline !== null) {
+      const pctMin = (yMin / percentBaseline - 1) * 100;
+      const pctMax = (yMax / percentBaseline - 1) * 100;
+      const step = pickNiceStep((pctMax - pctMin) / Math.max(1, yTicks));
+      const firstTick = Math.ceil(pctMin / step) * step;
+      for (let i = 0; ; i += 1) {
+        const pct = firstTick + i * step;
+        if (pct > pctMax + step * 1e-6) break;
+        priceTicks.push(percentBaseline * (1 + pct / 100));
+        if (priceTicks.length > 200) break;
+      }
+    } else if (priceScaleMode === "log" && yMin > 0 && yMax / yMin > 4) {
+      const mantissas = Math.log10(yMax / yMin) > 8 ? [1] : [1, 2, 5];
+      const firstDecade = Math.floor(Math.log10(Math.max(PRICE_SCALE_LOG_FLOOR, yMin)));
+      const lastDecade = Math.ceil(Math.log10(yMax));
+      for (let decade = firstDecade; decade <= lastDecade; decade += 1) {
+        for (const mantissa of mantissas) {
+          const price = mantissa * Math.pow(10, decade);
+          if (price >= yMin && price <= yMax) priceTicks.push(price);
+          if (priceTicks.length > 200) break;
         }
-      } else {
-        step = 1;
+      }
+    } else {
+      const targetStep = yRange / Math.max(1, yTicks);
+      let step = pickNiceStep(targetStep);
+      const instrumentTick = getConfiguredTickSize();
+      if (targetStep > 0 && Number.isFinite(targetStep) && instrumentTick > 0 && step < instrumentTick * 1e6) {
+        step = Math.max(instrumentTick, Math.round(step / instrumentTick) * instrumentTick);
       }
       const firstTick = Math.ceil(yMin / step) * step;
       for (let i = 0; ; i += 1) {
@@ -5966,7 +6143,7 @@ function createChart(element, options = {}) {
       ctx.font = `${yAxisFontSize}px ${mergedOptions.fontFamily}`;
       for (const price of priceTicks) {
         const y = clamp(yFromPrice(price), chartTop + priceScaleTickLabelInset, chartBottom - priceScaleTickLabelInset);
-        drawText(formatPrice(price), chartRight + 6, y, "left", "middle", yAxis.textColor);
+        drawText(formatAxisPrice(price), chartRight + 6, y, "left", "middle", yAxis.textColor);
       }
       ctx.font = prevFont;
     }
@@ -6041,7 +6218,7 @@ function createChart(element, options = {}) {
         ...ticker.showCountdownInLabel ? [getCountdownText()] : []
       ].map((value) => value === null || value === void 0 ? "" : String(value).trim()).filter((value) => value.length > 0);
       addPriceAxisLabel({
-        text: formatPrice(tickerPrice),
+        text: formatAxisPrice(tickerPrice),
         ...tickerSubtexts.length > 0 ? { subtexts: tickerSubtexts } : {},
         subtextColor: ticker.labelSubtextColor ?? ticker.labelTextColor ?? "#0b1220",
         ...ticker.labelSubtextFontSize === void 0 ? {} : { subtextFontSize: ticker.labelSubtextFontSize },
@@ -6068,7 +6245,7 @@ function createChart(element, options = {}) {
         const previousClose = previousCloseCandidate;
         drawReferenceLine(previousClose, labels.previousCloseColor, "dashed");
         addPriceAxisLabel({
-          text: `PDC ${formatPrice(previousClose)}`,
+          text: `PDC ${formatAxisPrice(previousClose)}`,
           price: previousClose,
           backgroundColor: labels.backgroundColor,
           textColor: labels.mutedTextColor,
@@ -6087,7 +6264,7 @@ function createChart(element, options = {}) {
         if (point.l < visibleLow) visibleLow = point.l;
       }
       addPriceAxisLabel({
-        text: `H ${formatPrice(visibleHigh)}`,
+        text: `H ${formatAxisPrice(visibleHigh)}`,
         price: visibleHigh,
         backgroundColor: labels.backgroundColor,
         textColor: labels.textColor,
@@ -6095,7 +6272,7 @@ function createChart(element, options = {}) {
         priority: 40
       });
       addPriceAxisLabel({
-        text: `L ${formatPrice(visibleLow)}`,
+        text: `L ${formatAxisPrice(visibleLow)}`,
         price: visibleLow,
         backgroundColor: labels.backgroundColor,
         textColor: labels.textColor,
@@ -6107,7 +6284,7 @@ function createChart(element, options = {}) {
       if (Number.isFinite(labels.bidPrice)) {
         drawReferenceLine(labels.bidPrice, labels.bidColor, "dotted");
         addPriceAxisLabel({
-          text: `B ${formatPrice(labels.bidPrice)}`,
+          text: `B ${formatAxisPrice(labels.bidPrice)}`,
           price: labels.bidPrice,
           backgroundColor: labels.bidColor,
           textColor: "#0b1220",
@@ -6118,7 +6295,7 @@ function createChart(element, options = {}) {
       if (Number.isFinite(labels.askPrice)) {
         drawReferenceLine(labels.askPrice, labels.askColor, "dotted");
         addPriceAxisLabel({
-          text: `A ${formatPrice(labels.askPrice)}`,
+          text: `A ${formatAxisPrice(labels.askPrice)}`,
           price: labels.askPrice,
           backgroundColor: labels.askColor,
           textColor: "#0b1220",
@@ -6293,6 +6470,7 @@ function createChart(element, options = {}) {
       xSpan
     };
     paintCrosshairOverlay();
+    emitSelectionChangeIfMoved();
   };
   const paintCrosshairOverlay = () => {
     crosshairPriceActionRegion = null;
@@ -6379,8 +6557,11 @@ function createChart(element, options = {}) {
       ctx.restore();
     };
     if (crosshair.showPriceLabel) {
-      const hoverPrice = yMin + (chartBottom - cy) / chartHeight * yRange;
-      const priceText = formatPrice(hoverPrice);
+      const scaledYMin = priceScaleTransform(yMin);
+      const scaledYRange = priceScaleTransform(yMin + yRange) - scaledYMin || 1;
+      const hoverRatio = priceScaleInverted ? (cy - chartTop) / chartHeight : (chartBottom - cy) / chartHeight;
+      const hoverPrice = priceScaleUntransform(scaledYMin + hoverRatio * scaledYRange);
+      const priceText = formatPriceForScale(hoverPrice, percentBaselineForXStart(xStart));
       const priceWidth = getRightAxisLabelWidth(chartRight, getPriceLabelWidth(priceText, labelPaddingX));
       const priceX = getRightAxisLabelX(chartRight);
       const priceY = clamp(cy - labelHeight / 2, chartTop, chartBottom - labelHeight);
@@ -6548,8 +6729,8 @@ function createChart(element, options = {}) {
     const maxRange = bounds.hardSpan;
     const nextRange = clamp(currentRange * factor, minRange, maxRange);
     const anchorRatio = clamp((anchorY - drawState.chartTop) / drawState.chartHeight, 0, 1);
-    const anchorPrice = currentMax - anchorRatio * currentRange;
-    const nextMax = anchorPrice + anchorRatio * nextRange;
+    const anchorPrice = priceScaleInverted ? currentMin + anchorRatio * currentRange : currentMax - anchorRatio * currentRange;
+    const nextMax = priceScaleInverted ? anchorPrice + (1 - anchorRatio) * nextRange : anchorPrice + anchorRatio * nextRange;
     const nextMin = nextMax - nextRange;
     const clamped = clampYRange(nextMin, nextMax);
     yMinOverride = clamped.min;
@@ -6573,7 +6754,7 @@ function createChart(element, options = {}) {
       const currentMin = yMinOverride ?? drawState.yMin;
       const currentMax = yMaxOverride ?? drawState.yMax;
       const range = currentMax - currentMin || 1;
-      const priceShift = deltaY / drawState.chartHeight * range;
+      const priceShift = deltaY / drawState.chartHeight * range * (priceScaleInverted ? -1 : 1);
       const clamped = clampYRange(currentMin + priceShift, currentMax + priceShift);
       yMinOverride = clamped.min;
       yMaxOverride = clamped.max;
@@ -6806,8 +6987,14 @@ function createChart(element, options = {}) {
     if (!drawState) {
       return 0;
     }
-    const ratio = clamp((drawState.chartBottom - y) / drawState.chartHeight, 0, 1);
-    return drawState.yMin + ratio * (drawState.yMax - drawState.yMin);
+    const ratio = clamp(
+      priceScaleInverted ? (y - drawState.chartTop) / drawState.chartHeight : (drawState.chartBottom - y) / drawState.chartHeight,
+      0,
+      1
+    );
+    const scaledMin = priceScaleTransform(drawState.yMin);
+    const scaledMax = priceScaleTransform(drawState.yMax);
+    return priceScaleUntransform(scaledMin + ratio * (scaledMax - scaledMin));
   };
   const applyMagnet = (y, index, price) => {
     const effective = magnetModifierActive ? "strong" : magnetMode;
@@ -6879,8 +7066,102 @@ function createChart(element, options = {}) {
   };
   const canvasYFromDrawingPrice = (price) => {
     if (!drawState) return 0;
-    const range = drawState.yMax - drawState.yMin || 1;
-    return drawState.chartBottom - (price - drawState.yMin) / range * drawState.chartHeight;
+    const scaledMin = priceScaleTransform(drawState.yMin);
+    const scaledRange = priceScaleTransform(drawState.yMax) - scaledMin || 1;
+    const ratio = (priceScaleTransform(price) - scaledMin) / scaledRange;
+    return priceScaleInverted ? drawState.chartTop + ratio * drawState.chartHeight : drawState.chartBottom - ratio * drawState.chartHeight;
+  };
+  const getDrawingBounds = (drawing) => {
+    if (!drawState || drawing.points.length === 0) {
+      return null;
+    }
+    const { chartLeft, chartRight, chartTop, chartBottom } = drawState;
+    let left;
+    let right;
+    let top;
+    let bottom;
+    if (drawing.type === "horizontal-line") {
+      const y = canvasYFromDrawingPrice(drawing.points[0].price);
+      left = chartLeft;
+      right = chartRight;
+      top = y;
+      bottom = y;
+    } else if (drawing.type === "vertical-line") {
+      const x = canvasXFromDrawingPoint(drawing.points[0]);
+      left = x;
+      right = x;
+      top = chartTop;
+      bottom = chartBottom;
+    } else {
+      const xs = drawing.points.map((point) => canvasXFromDrawingPoint(point));
+      const ys = drawing.points.map((point) => canvasYFromDrawingPrice(point.price));
+      left = Math.min(...xs);
+      right = Math.max(...xs);
+      top = Math.min(...ys);
+      bottom = Math.max(...ys);
+      if (drawing.type === "ray") {
+        right = chartRight;
+      }
+    }
+    const clampX = (value) => clamp(value, chartLeft, chartRight);
+    const clampY = (value) => clamp(value, chartTop, chartBottom);
+    left = clampX(left);
+    right = clampX(right);
+    top = clampY(top);
+    bottom = clampY(bottom);
+    return {
+      left,
+      top,
+      right,
+      bottom,
+      centerX: (left + right) / 2,
+      centerY: (top + bottom) / 2
+    };
+  };
+  const getSelectedDrawingWithBounds = () => {
+    if (!selectedDrawingId) {
+      return null;
+    }
+    const drawing = drawings.find((entry) => entry.id === selectedDrawingId);
+    if (!drawing || !drawing.visible) {
+      return null;
+    }
+    const bounds = getDrawingBounds(drawing);
+    return bounds ? { drawing: serializeDrawing(drawing), bounds } : null;
+  };
+  const emitSelectionChangeIfMoved = () => {
+    if (!selectionChangeHandler) {
+      lastSelectionSignature = null;
+      return;
+    }
+    const selection = getSelectedDrawingWithBounds();
+    if (!selection || !drawState) {
+      if (lastSelectionSignature !== null) {
+        lastSelectionSignature = null;
+        selectionChangeHandler(null);
+      }
+      return;
+    }
+    const dragging = drawingDragState !== null;
+    const { bounds } = selection;
+    const signature = `${selection.drawing.id}:${Math.round(bounds.left)}:${Math.round(bounds.top)}:${Math.round(
+      bounds.right
+    )}:${Math.round(bounds.bottom)}:${dragging ? 1 : 0}`;
+    if (signature === lastSelectionSignature) {
+      return;
+    }
+    lastSelectionSignature = signature;
+    selectionChangeHandler({
+      drawing: selection.drawing,
+      bounds,
+      plot: {
+        left: drawState.chartLeft,
+        top: drawState.chartTop,
+        right: drawState.chartRight,
+        bottom: drawState.chartBottom
+      },
+      dragging
+    });
   };
   const distanceToSegment = (x, y, x1, y1, x2, y2) => {
     const dx = x2 - x1;
@@ -7848,6 +8129,10 @@ function createChart(element, options = {}) {
     if (event.pointerType === "touch" || event.pointerType === "pen") {
       event.preventDefault();
     }
+    if (mergedOptions.accessibility?.focusable !== false && document.activeElement !== canvas) {
+      focusFromPointer = true;
+      canvas.focus({ preventScroll: true });
+    }
     cancelKineticPan();
     panVelocitySamples.length = 0;
     magnetModifierActive = event.metaKey || event.ctrlKey;
@@ -7965,12 +8250,14 @@ function createChart(element, options = {}) {
       const drawingHit = getDrawingHit(point.x, point.y);
       if (drawingHit) {
         selectedDrawingId = drawingHit.drawing.id;
+        const selectBounds = getDrawingBounds(drawingHit.drawing);
         drawingSelectHandler?.({
           drawing: serializeDrawing(drawingHit.drawing),
           target: drawingHit.target,
           ...drawingHit.pointIndex === void 0 ? {} : { pointIndex: drawingHit.pointIndex },
           x: point.x,
-          y: point.y
+          y: point.y,
+          ...selectBounds ? { bounds: selectBounds } : {}
         });
         if (!drawingHit.drawing.locked) {
           const startCanvasPoint = drawingPointFromCanvas(point.x, point.y, false);
@@ -8531,7 +8818,152 @@ function createChart(element, options = {}) {
   };
   const onContextMenu = (event) => {
     event.preventDefault();
+    if (!contextMenuHandler || !drawState) {
+      return;
+    }
+    const point = getCanvasPoint(event);
+    const hitRegion = getHitRegion(point.x, point.y);
+    if (hitRegion === "outside") {
+      return;
+    }
+    const pane = hitRegion === "plot" ? getPaneAt(point.x, point.y) : null;
+    const drawingHit = hitRegion === "plot" && !pane ? getDrawingHit(point.x, point.y) : null;
+    if (drawingHit) {
+      if (selectedDrawingId !== drawingHit.drawing.id) {
+        selectedDrawingId = drawingHit.drawing.id;
+        scheduleDraw();
+      }
+    }
+    const region = drawingHit ? "drawing" : pane ? "indicator-pane" : hitRegion;
+    const index = indexFromCanvasX(point.x);
+    const barTime = index === null ? null : getTimeForIndex(index);
+    const bar = index === null ? void 0 : data[index];
+    const inMainPane = !pane && (hitRegion === "plot" || hitRegion === "y-axis");
+    contextMenuHandler({
+      region,
+      x: point.x,
+      y: point.y,
+      clientX: event.clientX,
+      clientY: event.clientY,
+      ...inMainPane ? { price: roundToPricePrecision(priceFromCanvasY(point.y)) } : {},
+      ...index === null ? {} : { index },
+      ...barTime ? { time: barTime.toISOString() } : {},
+      ...bar ? {
+        point: {
+          t: bar.time.toISOString(),
+          o: bar.o,
+          h: bar.h,
+          l: bar.l,
+          c: bar.c,
+          ...bar.v === void 0 ? {} : { v: bar.v }
+        }
+      } : {},
+      ...drawingHit ? {
+        drawing: serializeDrawing(drawingHit.drawing),
+        drawingTarget: drawingHit.target,
+        ...drawingHit.pointIndex === void 0 ? {} : { pointIndex: drawingHit.pointIndex }
+      } : {},
+      ...pane ? { indicator: { id: pane.id, type: pane.type } } : {}
+    });
   };
+  const onCanvasKeyDown = (event) => {
+    const keyboard = mergedOptions.keyboard ?? {};
+    if (keyboard.enabled === false) {
+      return;
+    }
+    if (event.altKey || event.ctrlKey || event.metaKey) {
+      return;
+    }
+    const panStep = Math.max(1, keyboard.panBars ?? 1) * (event.shiftKey ? 10 : 1);
+    const emit = (action, drawing) => {
+      keyboardShortcutHandler?.({
+        action,
+        key: event.key,
+        shiftKey: event.shiftKey,
+        ...drawing ? { drawing } : {}
+      });
+    };
+    switch (event.key) {
+      case "Delete":
+      case "Backspace": {
+        if (keyboard.deleteSelectedDrawing === false || !selectedDrawingId) {
+          return;
+        }
+        const target = drawings.find((entry) => entry.id === selectedDrawingId);
+        if (!target) {
+          return;
+        }
+        const removed = serializeDrawing(target);
+        removeDrawing(selectedDrawingId);
+        selectedDrawingId = null;
+        scheduleDraw();
+        emit("delete-drawing", removed);
+        break;
+      }
+      case "Escape": {
+        if (cancelDrawing()) {
+          emit("cancel");
+          break;
+        }
+        if (activeDrawingTool) {
+          setActiveDrawingTool(null);
+          emit("cancel");
+          break;
+        }
+        if (selectedDrawingId) {
+          setSelectedDrawing(null);
+          emit("cancel");
+          break;
+        }
+        return;
+      }
+      case "ArrowLeft":
+        panX(-panStep);
+        emit("pan-left");
+        break;
+      case "ArrowRight":
+        panX(panStep);
+        emit("pan-right");
+        break;
+      case "ArrowUp":
+      case "ArrowDown": {
+        if (!drawState) {
+          return;
+        }
+        const step = (drawState.yMax - drawState.yMin) / 20 * (event.shiftKey ? 5 : 1);
+        panY(event.key === "ArrowUp" ? step : -step);
+        emit(event.key === "ArrowUp" ? "pan-up" : "pan-down");
+        break;
+      }
+      case "+":
+      case "=":
+        zoomInX();
+        emit("zoom-in");
+        break;
+      case "-":
+      case "_":
+        zoomOutX();
+        emit("zoom-out");
+        break;
+      case "Home":
+        fitContent();
+        emit("reset-viewport");
+        break;
+      case "End":
+        setFollowingLatest(true);
+        emit("scroll-to-realtime");
+        break;
+      case "r":
+      case "R":
+        resetViewport();
+        emit("reset-viewport");
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+  };
+  canvas.addEventListener("keydown", onCanvasKeyDown);
   canvas.addEventListener("pointerdown", onPointerDown);
   canvas.addEventListener("pointermove", onPointerMove);
   canvas.addEventListener("pointerup", endPointerDrag);
@@ -8578,6 +9010,7 @@ function createChart(element, options = {}) {
     resetRightMarginCache();
     doubleClickEnabled = mergedOptions.doubleClickEnabled;
     doubleClickAction = mergedOptions.doubleClickAction;
+    applyAccessibilityAttributes();
     const isTickerSmoothingEnabled = mergedOptions.tickerLine?.smoothing ?? false;
     if (!isTickerSmoothingEnabled) {
       smoothedTickerPrice = null;
@@ -8894,6 +9327,16 @@ function createChart(element, options = {}) {
     magnetMode = mode;
   };
   const getMagnetMode = () => magnetMode;
+  const setPriceScale = (options2) => {
+    if (options2.mode === "linear" || options2.mode === "log" || options2.mode === "percent") {
+      priceScaleMode = options2.mode;
+    }
+    if (typeof options2.inverted === "boolean") {
+      priceScaleInverted = options2.inverted;
+    }
+    scheduleDraw();
+  };
+  const getPriceScale = () => ({ mode: priceScaleMode, inverted: priceScaleInverted });
   const getDrawings = () => drawings.map((drawing) => serializeDrawing(drawing));
   const setDrawings = (nextDrawings) => {
     drawings = dedupeDrawingIds(nextDrawings.map((drawing) => normalizeDrawingState(drawing)));
@@ -8951,6 +9394,23 @@ function createChart(element, options = {}) {
   const onDrawingHover = (handler) => {
     drawingHoverHandler = handler;
   };
+  const onSelectionChange = (handler) => {
+    selectionChangeHandler = handler;
+    lastSelectionSignature = null;
+    if (handler) {
+      emitSelectionChangeIfMoved();
+    }
+  };
+  const getSelectedDrawing = () => getSelectedDrawingWithBounds();
+  const onContextMenuHandler = (handler) => {
+    contextMenuHandler = handler;
+  };
+  const onKeyboardShortcut = (handler) => {
+    keyboardShortcutHandler = handler;
+  };
+  const focus = () => {
+    canvas.focus({ preventScroll: true });
+  };
   const saveState = () => {
     const drawingDefaults = {};
     for (const [tool, defaults] of drawingToolDefaults) {
@@ -8963,6 +9423,7 @@ function createChart(element, options = {}) {
       drawings: getDrawings(),
       indicators: getIndicators(),
       magnetMode: getMagnetMode(),
+      priceScale: getPriceScale(),
       drawingDefaults
     };
   };
@@ -8982,6 +9443,9 @@ function createChart(element, options = {}) {
     if (state.magnetMode === "none" || state.magnetMode === "weak" || state.magnetMode === "strong") {
       setMagnetMode(state.magnetMode);
     }
+    if (state.priceScale && typeof state.priceScale === "object") {
+      setPriceScale(state.priceScale);
+    }
     if (state.drawingDefaults && typeof state.drawingDefaults === "object") {
       for (const [tool, defaults] of Object.entries(state.drawingDefaults)) {
         if (defaults && typeof defaults === "object") {
@@ -9011,6 +9475,7 @@ function createChart(element, options = {}) {
       drawRafId = null;
       pendingDrawUpdateAutoScale = false;
     }
+    canvas.removeEventListener("keydown", onCanvasKeyDown);
     canvas.removeEventListener("pointerdown", onPointerDown);
     canvas.removeEventListener("pointermove", onPointerMove);
     canvas.removeEventListener("pointerup", endPointerDrag);
@@ -9074,8 +9539,15 @@ function createChart(element, options = {}) {
     onDrawingSelect,
     onDrawingDoubleClick,
     onDrawingEditText,
+    onSelectionChange,
+    getSelectedDrawing,
+    onContextMenu: onContextMenuHandler,
+    onKeyboardShortcut,
+    focus,
     setMagnetMode,
     getMagnetMode,
+    setPriceScale,
+    getPriceScale,
     cancelDrawing,
     setTradeMarkers,
     setSelectedDrawing,
@@ -9101,7 +9573,9 @@ function createChart(element, options = {}) {
 export {
   FIB_DEFAULT_PALETTE,
   POSITION_DEFAULT_COLORS,
+  SCRIPT_SOURCE_INPUT_VALUES,
   compileScriptIndicator,
   createChart,
+  extractScriptInputs,
   validateScriptSource
 };