@trdrs/quickcharts 4.0.0 → 5.0.0

package/dist/{chunk-C4MEVUNK.js → chunk-Q3DCXQDW.js}

@@ -187,23 +187,25 @@ function lineLeft(block, index, align, width = block.width) {
 var LIGHT_THEME = {
   "canvas.background": "#ffffff",
   "canvas.paneBorder": "#ebebeb",
+  "canvas.watermark": "rgba(80, 83, 94, 0.2)",
   "series.up": "#089981",
   "series.down": "#f23645",
   "series.neutral": "#787b86",
-  "scale.grid": "rgba(0, 0, 0, 0.06)",
+  "scale.grid": "rgba(46, 46, 46, 0.2)",
   "scale.background": "#ffffff",
-  "scale.border": "#e0e3eb",
-  "scale.text": "#5b616e",
-  "scale.crosshair": "#9598a1",
-  "scale.crosshairLabelBackground": "#131722",
+  "scale.border": "rgba(46, 46, 46, 0)",
+  "scale.text": "#0f0f0f",
+  "scale.crosshair": "#9c9c9c",
+  "scale.crosshairLabelBackground": "#0f0f0f",
   "scale.crosshairLabelText": "#ffffff",
-  "scale.sessionPreMarket": "rgba(76, 152, 251, 0.06)",
-  "scale.sessionExtended": "rgba(76, 152, 251, 0.06)",
-  "scale.sessionAfterHours": "rgba(245, 166, 35, 0.06)",
+  "scale.sessionPreMarket": "rgba(255, 152, 0, 0.08)",
+  "scale.sessionExtended": "rgba(213, 0, 249, 0.08)",
+  "scale.sessionAfterHours": "rgba(41, 98, 255, 0.08)",
   "scale.sessionClosed": "rgba(0, 0, 0, 0.05)",
   "text.primary": "#0f0f0f",
   "text.secondary": "#4a4a4a",
   "text.muted": "#6a6a6a",
+  "text.caption": "#707070",
   "text.disabled": "#b8b8b8",
   "text.inverse": "#ffffff",
   "text.link": "#2962ff",
@@ -229,6 +231,8 @@ var LIGHT_THEME = {
   "overlay.separator": "#ebebeb",
   "overlay.shadow": "0 2px 4px rgba(0, 0, 0, 0.2)",
   "overlay.scrim": "rgba(156, 156, 156, 0.5)",
+  "overlay.tooltip": "#3d3d3d",
+  "overlay.tooltipInk": "#f2f2f2",
   "state.accent": "#2962ff",
   "state.hover": "#f2f2f2",
   "state.hoverInk": "#0f0f0f",
@@ -256,6 +260,8 @@ var LIGHT_THEME = {
   "control.selectEdgeHover": "#a8a8a8",
   "control.fieldInvalid": "#f23645",
   "control.fieldFill": "#f2f2f2",
+  "control.tipMark": "#a8a8a8",
+  "control.tipMarkHover": "#707070",
   "status.positive": "#078671",
   "status.negative": "#df323f",
   "status.warning": "#ac6600",
@@ -290,23 +296,25 @@ var LIGHT_THEME = {
 var DARK_THEME = {
   "canvas.background": "#0f0f0f",
   "canvas.paneBorder": "#2e2e2e",
+  "canvas.watermark": "rgba(80, 83, 94, 0.3)",
   "series.up": "#089981",
   "series.down": "#f23645",
   "series.neutral": "#787b86",
-  "scale.grid": "rgba(255, 255, 255, 0.035)",
+  "scale.grid": "rgba(242, 242, 242, 0.2)",
   "scale.background": "#0f0f0f",
-  "scale.border": "#2a2e39",
-  "scale.text": "#9aa0aa",
-  "scale.crosshair": "#758696",
-  "scale.crosshairLabelBackground": "#dbdbdb",
-  "scale.crosshairLabelText": "#0f0f0f",
-  "scale.sessionPreMarket": "rgba(76, 152, 251, 0.05)",
-  "scale.sessionExtended": "rgba(76, 152, 251, 0.05)",
-  "scale.sessionAfterHours": "rgba(245, 166, 35, 0.045)",
+  "scale.border": "rgba(242, 242, 242, 0)",
+  "scale.text": "#b8b8b8",
+  "scale.crosshair": "#9c9c9c",
+  "scale.crosshairLabelBackground": "#3d3d3d",
+  "scale.crosshairLabelText": "#ffffff",
+  "scale.sessionPreMarket": "rgba(255, 152, 0, 0.08)",
+  "scale.sessionExtended": "rgba(213, 0, 249, 0.08)",
+  "scale.sessionAfterHours": "rgba(41, 98, 255, 0.08)",
   "scale.sessionClosed": "rgba(0, 0, 0, 0.22)",
   "text.primary": "#dbdbdb",
   "text.secondary": "#b8b8b8",
   "text.muted": "#9b9b9b",
+  "text.caption": "#8c8c8c",
   "text.disabled": "#575757",
   "text.inverse": "#0f0f0f",
   "text.link": "#5b9cf6",
@@ -332,6 +340,8 @@ var DARK_THEME = {
   "overlay.separator": "#4a4a4a",
   "overlay.shadow": "0 2px 4px rgba(0, 0, 0, 0.4)",
   "overlay.scrim": "rgba(0, 0, 0, 0.5)",
+  "overlay.tooltip": "#3d3d3d",
+  "overlay.tooltipInk": "#f2f2f2",
   "state.accent": "#2962ff",
   "state.hover": "#2e2e2e",
   "state.hoverInk": "#c9c9c9",
@@ -359,6 +369,8 @@ var DARK_THEME = {
   "control.selectEdgeHover": "#808080",
   "control.fieldInvalid": "#f23645",
   "control.fieldFill": "#2e2e2e",
+  "control.tipMark": "#575757",
+  "control.tipMarkHover": "#8c8c8c",
   "status.positive": "#089981",
   "status.negative": "#f34452",
   "status.warning": "#ff9800",
@@ -394,6 +406,25 @@ var BUILT_IN_THEMES = Object.freeze({
   light: LIGHT_THEME,
   dark: DARK_THEME
 });
+var CHART_FACTORY_COLORS = Object.freeze({
+  line: "#2962ff",
+  lineGradientTop: "#d500f9",
+  lineGradientBottom: "#00bce5",
+  areaTop: "rgba(41, 98, 255, 0.28)",
+  areaBottom: "rgba(41, 98, 255, 0)",
+  sessionBreaks: "#4985e7",
+  previousClose: "#555555",
+  highLowLine: "#808080",
+  highLowLabel: "#142e61",
+  bid: "#2962ff",
+  ask: "#f7525f",
+  scaleLabelText: "#ffffff",
+  preMarketLabel: "#fb8c00",
+  postMarketLabel: "#2962ff",
+  nightLabel: "#8e24aa"
+});
+var BRAND_UP = "#4c98fb";
+var BRAND_DOWN = "#f23645";
 
 // src/internal/drawings/core/inks.ts
 function drawingInksOf(theme) {
@@ -679,16 +710,19 @@ var DrawingPaneView = class {
           drawing2.paintConstruction(ctx, viewport);
         }
         const state = drawing2.state;
+        const inks = drawing2.inks();
+        const handleInks = { ring: inks.handleRing, center: inks.handleCenter };
         if (state === "selected" || state === "editing") {
+          if (drawing2.isValid()) drawing2.paintTextHint(ctx, viewport);
           const points = drawing2.getControlPoints(viewport);
-          const inks = drawing2.inks();
-          const handleInks = { ring: inks.handleRing, center: inks.handleCenter };
           if (points.length > 0) paintHandles(ctx, points, handleInks, drawing2.handleShape(), hoveredIndex(points, drawing2.pointer, HANDLE_REACH));
           const grips = drawing2.resizeHandles(viewport);
           const gripShape = drawing2.gripShape();
           if (grips.length > 0 && gripShape) paintHandles(ctx, grips, handleInks, gripShape, hoveredIndex(grips, drawing2.pointer, GRIP_REACH));
           else if (grips.length > 0) paintResizeGrips(ctx, grips, drawing2.style.lineColor);
-          if (drawing2.isValid()) drawing2.paintTextHint(ctx, viewport);
+        } else if (drawing2.hovered && drawing2.handlesOnHover() && drawing2.isValid()) {
+          const points = drawing2.getControlPoints(viewport);
+          if (points.length > 0) paintHandles(ctx, points, handleInks, drawing2.handleShape(), null, "thin");
         }
       } finally {
         ctx.restore();
@@ -698,6 +732,66 @@ var DrawingPaneView = class {
   }
 };
 
+// src/internal/drawings/render/axis-view.ts
+var AxisLabel = class {
+  _source;
+  constructor(source) {
+    this._source = source;
+  }
+  coordinate() {
+    return this._source.coordinate() ?? -1e6;
+  }
+  text() {
+    return this._source.text();
+  }
+  textColor() {
+    return this._source.textColor?.() ?? "#ffffff";
+  }
+  backColor() {
+    return this._source.color();
+  }
+  visible() {
+    return this._source.visible() && this._source.coordinate() !== null;
+  }
+};
+var AxisBandView = class {
+  _source;
+  _axis;
+  constructor(source, axis) {
+    this._source = source;
+    this._axis = axis;
+  }
+  zOrder() {
+    return "bottom";
+  }
+  renderer() {
+    return this;
+  }
+  draw(target) {
+    const span = this._source.span();
+    if (!span || span.coordinates.length === 0) return;
+    target.useMediaCoordinateSpace(({ context: ctx, mediaSize }) => {
+      paintAxisBand(ctx, this._axis, span.coordinates, span.color, mediaSize);
+    });
+  }
+};
+function paintAxisBand(ctx, axis, coordinates, color, size) {
+  const low = Math.min(...coordinates);
+  const high = Math.max(...coordinates);
+  ctx.save();
+  ctx.fillStyle = color;
+  if (axis === "price") {
+    const top = Math.round(low) + 1;
+    const bottom = Math.round(high) - 1;
+    if (bottom > top) ctx.fillRect(1, top, size.width, bottom - top);
+    else ctx.fillRect(1, Math.round(high) - 1, size.width, 1);
+  } else {
+    const left = Math.floor(low);
+    ctx.fillRect(left, 0, Math.max(1, Math.ceil(high) - left), size.height);
+  }
+  ctx.restore();
+}
+
 // src/i18n/en/drawing.ts
 var drawing = {
   // The toolbar itself, and its tool GROUPS (a button each) with the SECTION headings inside their
@@ -808,6 +902,8 @@ var drawing = {
   "drawing.modifierCommand": "Cmd",
   "drawing.hintClone": "{modifier} + Drag",
   "drawing.hintCopy": "{modifier} + C",
+  "drawing.hintRemove": "Del",
+  "drawing.drawingMenu": "Drawing menu",
   "drawing.hintPaste": "{modifier} + V",
   "drawing.deleteWithKey": "Delete (Del)",
   "drawing.statusDrawingsHidden": "Drawings hidden",
@@ -902,6 +998,7 @@ var drawing = {
   "drawing.sectionInfo": "Info",
   "drawing.priceRange": "Price range",
   "drawing.barsRange": "Bars range",
+  "drawing.distance": "Distance",
   "drawing.angle": "Angle",
   "drawing.statsPosition": "Stats position",
   "drawing.statsHidden": "Hidden",
@@ -1176,6 +1273,30 @@ var drawing = {
   "drawing.imageErrorDecode": "That image could not be opened. It may be damaged."
 };
 
+// src/paneGeometry.ts
+function paneIndexOf(series) {
+  try {
+    const index = series.getPane().paneIndex();
+    return Number.isInteger(index) && index >= 0 ? index : 0;
+  } catch {
+    return 0;
+  }
+}
+function paneTopIn(chart, index, box2) {
+  if (index <= 0) return 0;
+  try {
+    const panes = chart.panes();
+    const rect = panes[index]?.getHTMLElement()?.getBoundingClientRect();
+    if (rect && rect.height > 0) return rect.top - box2.getBoundingClientRect().top;
+    let top = 0;
+    for (let i = 0; i < index && i < panes.length; i++) top += panes[i].getHeight();
+    return top;
+  } catch {
+    return 0;
+  }
+}
+var seriesPaneTop = (chart, series, box2) => paneTopIn(chart, paneIndexOf(series), box2);
+
 // src/internal/drawings/core/drawing.ts
 function normalizeOptions(patch) {
   return { ...DEFAULT_OPTIONS, ...patch, visibility: normalizeVisibility(patch.visibility) };
@@ -1185,7 +1306,7 @@ function viewportOf(chart, series) {
   let height;
   try {
     width = chart.timeScale().width();
-    height = chart.paneSize().height;
+    height = chart.paneSize(paneIndexOf(series)).height;
   } catch {
     return null;
   }
@@ -1279,6 +1400,13 @@ function viewportOf(chart, series) {
   };
 }
 var UNRESOLVED_PRICE_TEXT = (price) => price.toFixed(2);
+function plainTime(time) {
+  const t = Number(time);
+  if (!Number.isFinite(t)) return String(time);
+  const d = new Date(t * 1e3);
+  const pad = (n) => String(n).padStart(2, "0");
+  return `${d.getUTCFullYear()}-${pad(d.getUTCMonth() + 1)}-${pad(d.getUTCDate())} ${pad(d.getUTCHours())}:${pad(d.getUTCMinutes())}`;
+}
 var Drawing = class {
   id;
   /** Set when this drawing belongs to ONE surface; undefined when every surface showing the symbol
@@ -1296,6 +1424,8 @@ var Drawing = class {
   _series = null;
   _requestUpdate = null;
   _paneViews;
+  _priceBands;
+  _timeBands;
   constructor(id, anchors = [], style = {}, options = {}, props = {}) {
     this.id = id;
     this._anchors = this.upgradeAnchors(anchors.map((a) => ({ ...a })));
@@ -1303,6 +1433,8 @@ var Drawing = class {
     this._options = normalizeOptions(options);
     this._props = { ...this.defaultProps(), ...this.upgradeProps(props) };
     this._paneViews = [new DrawingPaneView(this)];
+    this._priceBands = [new AxisBandView({ span: () => this.bandSpan("price") }, "price")];
+    this._timeBands = [new AxisBandView({ span: () => this.bandSpan("time") }, "time")];
   }
   /** Tool-specific defaults. Must not read instance fields (runs during construction). */
   defaultProps() {
@@ -1365,6 +1497,39 @@ var Drawing = class {
   timeViews() {
     return [];
   }
+  priceAxisPaneViews() {
+    return this._priceBands;
+  }
+  timeAxisPaneViews() {
+    return this._timeBands;
+  }
+  /** The prices and times a selected drawing marks on the axes with a band across their span, in
+   *  the accent at a quarter; none by default. */
+  axisSpans() {
+    return { prices: null, times: null };
+  }
+  /** The band a selected drawing lays on an axis: the coordinates its marked prices or times stand
+   *  at, or null where it lays none. */
+  bandSpan(axis) {
+    if (this._state !== "selected" && this._state !== "editing" || !this.isVisibleNow()) return null;
+    const viewport = this.getViewport();
+    if (!viewport) return null;
+    const spans = this.axisSpans();
+    const raw = axis === "price" ? (spans.prices ?? []).map((p) => viewport.yOf(p)) : (spans.times ?? []).map((t) => viewport.xOf(t));
+    const coordinates = raw.filter((c) => c !== null && Number.isFinite(c));
+    return coordinates.length > 0 ? { coordinates, color: withAlpha(this.inks().accent, 0.25) } : null;
+  }
+  /** A time as the chart writes it on its time axis: through the chart's own time formatter, or
+   *  its plain UTC date and time where the chart has none. */
+  formatTime(time) {
+    if (time === void 0) return "";
+    try {
+      const formatter = this._chart?.options().localization?.timeFormatter;
+      if (formatter) return formatter(time);
+    } catch {
+    }
+    return plainTime(time);
+  }
   hitTest(x, y) {
     if (!this.isVisibleNow()) return null;
     const viewport = this.getViewport();
@@ -1376,6 +1541,11 @@ var Drawing = class {
       zOrder: "normal"
     };
   }
+  /** The cursor a point over the drawing wears: a handle's, its words', or null for the plain
+   *  pointer. */
+  cursorFor(point, viewport) {
+    return this.cursorAt(point, viewport);
+  }
   /** Position-specific hover cursor (a table divider's col-resize); null = the default pointer. */
   cursorAt(_point, _viewport) {
     return null;
@@ -1561,6 +1731,11 @@ var Drawing = class {
   resizeTo(_handleIndex, _point, _viewport) {
   }
   _textHint = null;
+  /** Note where the invitation a paint just laid stands, where a press opens the words' editor; null
+   *  where none stands. */
+  noteTextHint(region) {
+    this._textHint = region;
+  }
   /** An inline text editor is open on this drawing (transient view state — never serialized). */
   textEditing = false;
   /**
@@ -1688,6 +1863,11 @@ var Drawing = class {
   gripShape() {
     return null;
   }
+  /** Whether the drawing shows its handles, in their thin form, while the pointer rests on it
+   *  unselected; a press on one then moves its point and selects the drawing. */
+  handlesOnHover() {
+    return false;
+  }
   _hovered = false;
   _pointer = null;
   /** Whether the pointer rests on this drawing (transient view state, never serialized). */
@@ -2143,28 +2323,207 @@ function cachedImageBitmap(key) {
   return hit.complete && hit.naturalWidth > 0 ? hit : null;
 }
 
-// src/internal/drawings/render/axis-view.ts
-var AxisLabel = class {
-  _source;
-  constructor(source) {
-    this._source = source;
-  }
-  coordinate() {
-    return this._source.coordinate() ?? -1e6;
-  }
-  text() {
-    return this._source.text();
+// src/internal/drawings/core/savedLook.ts
+function endSavedLook(patch) {
+  return "savedLook" in patch || Object.keys(patch).length === 0 ? patch : { ...patch, savedLook: null };
+}
+function savedLevels(look, key = "levels") {
+  const levels = look[key];
+  if (!Array.isArray(levels)) return [];
+  return levels.filter((l) => !!l && typeof l === "object" && typeof l.value === "number").map((l) => ({
+    value: l.value,
+    visible: l.visible !== false,
+    ...typeof l.color === "string" ? { color: l.color } : {},
+    ...typeof l.text === "string" ? { text: l.text } : {}
+  }));
+}
+
+// src/internal/drawings/render/lineWords.ts
+var wordsOffset = (fontSize) => fontSize / 2 + 4;
+var plusSize = (fontSize) => fontSize / 2 + 5;
+var plusGap = (fontSize) => fontSize / 2 - 3;
+function placeAt(place, along, across) {
+  const cos = Math.cos(place.angle);
+  const sin = Math.sin(place.angle);
+  return { x: place.x + along * cos - across * sin, y: place.y + along * sin + across * cos };
+}
+function paintInvitation(ctx, words, place, style, measure) {
+  const size = style.fontSize;
+  const plus = plusSize(size);
+  const gap = plusGap(size);
+  const width = plus + gap + measure(words);
+  const left = place.align === "left" ? 0 : place.align === "right" ? -width : -width / 2;
+  const ink = withAlpha(style.textColor, 0.5);
+  ctx.save();
+  ctx.setLineDash([]);
+  ctx.translate(place.x, place.y);
+  if (place.angle) ctx.rotate(place.angle);
+  ctx.font = fontOf(style);
+  ctx.fillStyle = ink;
+  ctx.textAlign = "left";
+  ctx.textBaseline = "middle";
+  ctx.fillText(words, left + plus + gap, 0);
+  let px = left + plus / 2;
+  let py = -0.5;
+  if (!place.angle) {
+    px = Math.round(place.x + px - 0.5) + 0.5 - place.x;
+    py = Math.round(place.y - 1) + 0.5 - place.y;
+  }
+  ctx.strokeStyle = ink;
+  ctx.lineWidth = 1;
+  ctx.lineCap = "butt";
+  ctx.lineJoin = "miter";
+  ctx.beginPath();
+  ctx.moveTo(px - plus / 2, py);
+  ctx.lineTo(px + plus / 2, py);
+  ctx.moveTo(px, py - plus / 2);
+  ctx.lineTo(px, py + plus / 2);
+  ctx.stroke();
+  ctx.restore();
+  const middle = placeAt(place, left + width / 2, 0);
+  return { cx: middle.x, cy: middle.y, angle: place.angle, halfW: width / 2 + 2, halfH: size / 2 + 2 };
+}
+function inRegion(point, r) {
+  const dx = point.x - r.cx;
+  const dy = point.y - r.cy;
+  const cos = Math.cos(-r.angle);
+  const sin = Math.sin(-r.angle);
+  return Math.abs(dx * cos - dy * sin) <= r.halfW && Math.abs(dx * sin + dy * cos) <= r.halfH;
+}
+
+// src/internal/drawings/render/statsBox.ts
+var STATS_GROUND = "rgba(70, 70, 70, 0.9)";
+var STATS_INK = "#ffffff";
+var MARK_INK = "#f9f9f9";
+var STATS_FONT_SIZE = 12;
+var PAD_Y = 8;
+var ROW = 26;
+var MARK_X = 21;
+var WORDS_X = 42;
+var PAD_END = 13;
+function statsBoxAt(at, rows, measure) {
+  const widest = rows.reduce((w, r) => Math.max(w, measure(r.text)), 0);
+  return { x: at.x, y: at.y, width: Math.round(WORDS_X + widest + PAD_END), height: PAD_Y * 2 + rows.length * ROW };
+}
+function paintStatsBox(ctx, box2, rows, font) {
+  ctx.save();
+  ctx.setLineDash([]);
+  ctx.fillStyle = STATS_GROUND;
+  ctx.beginPath();
+  ctx.roundRect(box2.x, box2.y, box2.width, box2.height, 4);
+  ctx.fill();
+  ctx.font = font;
+  ctx.textAlign = "start";
+  ctx.textBaseline = "middle";
+  rows.forEach((row, i) => {
+    const middle = box2.y + PAD_Y + ROW / 2 + i * ROW;
+    paintMark(ctx, row.kind, box2.x + MARK_X, middle);
+    ctx.fillStyle = STATS_INK;
+    ctx.fillText(row.text, box2.x + WORDS_X, middle);
+  });
+  ctx.restore();
+}
+function paintMark(ctx, kind, cx, cy) {
+  ctx.strokeStyle = MARK_INK;
+  ctx.lineWidth = 1;
+  ctx.lineCap = "butt";
+  ctx.lineJoin = "miter";
+  ctx.beginPath();
+  if (kind === "price") {
+    for (const dy of [-6.5, 6.5]) {
+      ctx.moveTo(cx - 6, cy + dy);
+      ctx.lineTo(cx + 5, cy + dy);
+    }
+    ctx.moveTo(cx - 0.5, cy - 5);
+    ctx.lineTo(cx - 0.5, cy + 5);
+    for (const s of [-1, 1]) {
+      ctx.moveTo(cx - 3, cy + s * 2);
+      ctx.lineTo(cx - 0.5, cy + s * 4.5);
+      ctx.lineTo(cx + 2, cy + s * 2);
+    }
+  } else if (kind === "span") {
+    for (const x of [-7.5, 5.5]) {
+      ctx.rect(cx + x, cy - 3.5, 2, 8);
+      ctx.moveTo(cx + x + 1, cy - 6);
+      ctx.lineTo(cx + x + 1, cy - 4);
+      ctx.moveTo(cx + x + 1, cy + 5);
+      ctx.lineTo(cx + x + 1, cy + 7);
+    }
+    ctx.moveTo(cx - 3.5, cy + 0.5);
+    ctx.lineTo(cx + 3.5, cy + 0.5);
+    for (const s of [-1, 1]) {
+      ctx.moveTo(cx + s, cy - 2);
+      ctx.lineTo(cx + s * 3.5, cy + 0.5);
+      ctx.lineTo(cx + s, cy + 3);
+    }
+  } else {
+    const corner = { x: cx - 5.5, y: cy + 5.5 };
+    const ray = 64.7 * Math.PI / 180;
+    ctx.moveTo(cx - 6, corner.y);
+    ctx.lineTo(cx + 6, corner.y);
+    ctx.moveTo(corner.x, corner.y);
+    ctx.lineTo(corner.x + 12.5 * Math.cos(ray), corner.y - 12.5 * Math.sin(ray));
+    ctx.moveTo(corner.x + 7, corner.y);
+    ctx.arc(corner.x, corner.y, 7, 0, -ray, true);
   }
-  textColor() {
-    return "#ffffff";
+  ctx.stroke();
+}
+
+// src/internal/drawings/render/textEntry.ts
+var SELECTION_WASH = "rgba(255, 255, 255, 0.2)";
+var CARET_WIDTH = 2;
+var lineMiddle = (lineHeight) => lineHeight / 2 + 1;
+var caretHeight = (font, lineHeight) => Math.min(lineHeight, Number(/(\d+(?:\.\d+)?)px/.exec(font)?.[1]) || lineHeight);
+function paintTextEntry(ctx, p) {
+  const draft = p.draft;
+  const shown = p.placeholder ? p.placeholder.block : p.block;
+  const lineTop = (i) => p.y + i * p.lineHeight;
+  const left = (block, i) => p.x + lineLeft(block, i, p.align, p.width);
+  ctx.save();
+  ctx.setLineDash([]);
+  ctx.direction = "ltr";
+  if (draft && draft.selectionStart !== draft.selectionEnd && !p.placeholder) {
+    ctx.fillStyle = SELECTION_WASH;
+    for (const span of runSpans(p.block, draft.selectionStart, draft.selectionEnd, p.measure)) {
+      const from = Math.round(left(p.block, span.line) + span.x0);
+      const to = Math.ceil(left(p.block, span.line) + span.x1);
+      if (to > from) ctx.fillRect(from, lineTop(span.line), to - from, p.lineHeight);
+    }
   }
-  backColor() {
-    return this._source.color();
+  ctx.font = p.font;
+  ctx.fillStyle = p.color;
+  ctx.textAlign = "left";
+  ctx.textBaseline = "middle";
+  const alpha = ctx.globalAlpha;
+  if (p.placeholder) ctx.globalAlpha = alpha * p.placeholder.alpha;
+  shown.lines.forEach((l, i) => {
+    if (l.text === "") return;
+    ctx.fillText(l.text, left(shown, i), lineTop(i) + lineMiddle(p.lineHeight));
+  });
+  ctx.globalAlpha = alpha;
+  if (draft?.composition && !p.placeholder) {
+    for (const span of runSpans(p.block, draft.composition.start, draft.composition.end, p.measure)) {
+      const from = Math.round(left(p.block, span.line) + span.x0);
+      const to = Math.ceil(left(p.block, span.line) + span.x1);
+      if (to > from) ctx.fillRect(from, lineTop(span.line) + p.lineHeight - 1, to - from, 1);
+    }
   }
-  visible() {
-    return this._source.visible() && this._source.coordinate() !== null;
+  if (draft?.caret && draft.selectionStart === draft.selectionEnd) {
+    const at = caretPlace(p.block, draft.selectionEnd, p.measure);
+    const tall = caretHeight(p.font, p.lineHeight);
+    ctx.fillRect(Math.round(left(p.block, at.line) + at.x) - CARET_WIDTH / 2, lineTop(at.line) + Math.round((p.lineHeight - tall) / 2), CARET_WIDTH, tall);
   }
-};
+  ctx.restore();
+}
+function paintWordsFrame(ctx, box2, color, alpha) {
+  ctx.save();
+  ctx.setLineDash([]);
+  ctx.globalAlpha = ctx.globalAlpha * alpha;
+  ctx.strokeStyle = color;
+  ctx.lineWidth = 2;
+  ctx.strokeRect(box2.x - 1, box2.y - 1, box2.width + 2, box2.height + 2);
+  ctx.restore();
+}
 
 // src/internal/drawings/tools/lines.ts
 var LINE_PROPS = {
@@ -2180,39 +2539,227 @@ var LINE_PROPS = {
   showPipsChange: false,
   showBarsRange: false,
   showDateTimeRange: false,
+  showDistance: false,
   showAngle: false,
   statsPosition: "right",
   alwaysShowStats: false,
   textVAlign: "top",
-  textHAlign: "center"
+  textHAlign: "center",
+  savedLook: null
 };
 var ACROSS = {
   top: { y: -4, baseline: "bottom" },
   middle: { y: 0, baseline: "middle" },
   bottom: { y: 4, baseline: "top" }
 };
+var LEVEL_WORDS_INSET = 7;
+var LEVEL_HANDLE_AT = 0.9;
 function hitTolerance(lineWidth) {
   return Math.max(6, lineWidth / 2 + 4);
 }
-var TrendLine = class extends Drawing {
+function crisp(v, width) {
+  return Math.round(v) + (Math.round(width) % 2 === 1 ? 0.5 : 0);
+}
+function openHead(ctx, from, tip, lineWidth) {
+  const length = Math.hypot(tip.x - from.x, tip.y - from.y);
+  if (!(length > 0)) return;
+  const ux = (tip.x - from.x) / length;
+  const uy = (tip.y - from.y) / length;
+  const size = 5 + 2.5 * lineWidth;
+  ctx.moveTo(tip.x - size * ux - size * uy, tip.y - size * uy + size * ux);
+  ctx.lineTo(tip.x, tip.y);
+  ctx.lineTo(tip.x - size * ux + size * uy, tip.y - size * uy - size * ux);
+}
+function grouped(n) {
+  const digits = String(Math.abs(n)).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  return n < 0 ? `-${digits}` : digits;
+}
+function spanText(seconds) {
+  const d = Math.floor(seconds / 86400);
+  const h = Math.floor(seconds % 86400 / 3600);
+  const m = Math.floor(seconds % 3600 / 60);
+  return d > 0 ? `${d}d ${h}h` : h > 0 ? `${h}h ${m}m` : `${m}m`;
+}
+function wordsBox(place, block, lineHeight, across) {
+  const lines = Math.max(1, block.lines.length);
+  const width = block.width;
+  const left = place.align === "left" ? 0 : place.align === "right" ? -width : -width / 2;
+  const first = -lineHeight / 2 - 1;
+  const top = across === "top" ? first - (lines - 1) * lineHeight : across === "bottom" ? first : first - (lines - 1) * lineHeight / 2;
+  return { left, top, width, lines };
+}
+var LineWords = class extends Drawing {
+  /** Whether the line invites words while it is selected without any. */
+  invites() {
+    return true;
+  }
+  wordsBlock() {
+    return this.shownWords(lineMeasure(this.style));
+  }
+  /** Paint the words, or an open edit's draft with its placeholder at half strength while it is
+   *  empty. */
+  paintWords(ctx, viewport) {
+    const draft = this.textDraft;
+    if (!draft && this.props.text === "") return;
+    const place = this.wordsPlace(viewport);
+    if (!place) return;
+    const { block, placeholder } = this.wordsBlock();
+    const shown = draft ? placeholder ?? block : block;
+    const box2 = wordsBox(place, shown, this.style.fontSize, this.wordsAcross());
+    ctx.save();
+    ctx.translate(place.x, place.y);
+    if (place.angle) ctx.rotate(place.angle);
+    paintTextEntry(ctx, {
+      x: box2.left,
+      y: box2.top,
+      width: box2.width,
+      lineHeight: this.style.fontSize,
+      font: fontOf(this.style),
+      color: this.style.textColor,
+      align: place.align,
+      block,
+      placeholder: draft && placeholder ? { block: placeholder, alpha: 0.5 } : null,
+      draft,
+      measure: lineMeasure(this.style)
+    });
+    ctx.restore();
+  }
+  textFrame(viewport) {
+    const place = this.wordsPlace(viewport);
+    if (!place) return null;
+    const { block, placeholder } = this.wordsBlock();
+    const shown = placeholder ?? block;
+    const box2 = wordsBox(place, shown, this.style.fontSize, this.wordsAcross());
+    const at = placeAt(place, box2.left, box2.top);
+    return { x: at.x, y: at.y, width: box2.width, lines: box2.lines, lineHeight: this.style.fontSize, font: fontOf(this.style), align: place.align, wrapWidth: null, angle: place.angle };
+  }
+  /** The region the words cover, turned with them; null without words. */
+  wordsRegion(viewport) {
+    if (this.props.text === "" && !this.textDraft) return null;
+    const place = this.wordsPlace(viewport);
+    if (!place) return null;
+    const { block, placeholder } = this.wordsBlock();
+    const shown = this.textDraft && placeholder ? placeholder : block;
+    const lineHeight = this.style.fontSize;
+    const box2 = wordsBox(place, shown, lineHeight, this.wordsAcross());
+    const middle = placeAt(place, box2.left + box2.width / 2, box2.top + box2.lines * lineHeight / 2);
+    return { cx: middle.x, cy: middle.y, angle: place.angle, halfW: box2.width / 2 + 2, halfH: box2.lines * lineHeight / 2 + 2 };
+  }
+  wordsAt(point, viewport) {
+    const region = this.wordsRegion(viewport);
+    return !!region && inRegion(point, region);
+  }
+  /** The selected line without words invites them where they would stand. */
+  paintTextHint(ctx, viewport) {
+    this.noteTextHint(null);
+    if (this.state !== "selected" || this.textEditing || this.props.text !== "" || !this.invites()) return;
+    const place = this.wordsPlace(viewport);
+    if (!place) return;
+    this.noteTextHint(paintInvitation(ctx, this.textPlaceholder(), place, this.style, lineMeasure(this.style)));
+  }
+  /** Over its words or its invitation the selected line reads as words, and over a handle as the
+   *  handle it is. */
+  cursorAt(point, viewport) {
+    const handle = this.handleCursor(point, viewport);
+    if (handle) return handle;
+    if (this.state === "selected" && (this.wordsAt(point, viewport) || this.hitTextHint(point))) return "text";
+    return null;
+  }
+  /** The cursor a handle under a point wears, or null where none is. */
+  handleCursor(point, viewport) {
+    const near = this.getControlPoints(viewport).some((p) => Math.hypot(p.x - point.x, p.y - point.y) <= 6.5);
+    return near ? this.handleCursorName() : null;
+  }
+  handleCursorName() {
+    return "default";
+  }
+  /** The line's handles show in their thin form while the pointer rests on it. */
+  handlesOnHover() {
+    return true;
+  }
+  /** A press on the words or the invitation of the selected line lands on the line. */
+  hitWords(point, viewport) {
+    if (this.wordsAt(point, viewport)) return true;
+    return this.state === "selected" && this.hitTextHint(point);
+  }
+};
+var pointLabel = (drawing2, coordinate, text, shown) => new AxisLabel({
+  coordinate,
+  text,
+  color: () => drawing2.inks().accent,
+  textColor: () => "#ffffff",
+  visible: shown
+});
+var TrendLine = class extends LineWords {
   type = "trend_line";
+  _priceViews = [0, 1].map(
+    (i) => pointLabel(
+      this,
+      () => {
+        const viewport = this.getViewport();
+        const anchor = this.anchors[i];
+        return viewport && anchor ? viewport.yOf(anchor.price) : null;
+      },
+      () => this.formatPrice(this.anchors[i]?.price ?? 0),
+      () => this.marksAxes() && !!this.anchors[i]
+    )
+  );
+  _timeViews = [0, 1].map(
+    (i) => pointLabel(
+      this,
+      () => {
+        const viewport = this.getViewport();
+        const anchor = this.anchors[i];
+        return viewport && anchor ? viewport.xOf(anchor.time) : null;
+      },
+      () => this.formatTime(this.anchors[i]?.time),
+      () => this.marksAxes() && !!this.anchors[i]
+    )
+  );
   defaultProps() {
     return { ...LINE_PROPS };
   }
+  applyProps(patch) {
+    super.applyProps(endSavedLook(patch));
+  }
   requiredAnchors() {
     return 2;
   }
-  /** The hint rides the segment's slope, lifted off the line where the text itself paints. */
-  textHintPlacement(points) {
-    if (points.length < 2) return super.textHintPlacement(points);
-    const angle = segmentTextAngle(points[0], points[1]);
-    return {
-      x: (points[0].x + points[1].x) / 2 + 16 * Math.sin(angle),
-      y: (points[0].y + points[1].y) / 2 - 16 * Math.cos(angle),
-      angle
-    };
+  /** The selected line marks its points' prices and times on the axes. */
+  marksAxes() {
+    return (this.state === "selected" || this.state === "editing") && this.isVisibleNow();
+  }
+  axisViews() {
+    return this._priceViews;
+  }
+  timeViews() {
+    return this._timeViews;
+  }
+  axisSpans() {
+    return { prices: this.anchors.map((a) => a.price), times: this.anchors.map((a) => a.time) };
+  }
+  /** While its second point is being placed, the point following the pointer shows no handle. */
+  getControlPoints(viewport) {
+    const points = super.getControlPoints(viewport);
+    return this.state === "editing" ? points.filter((p) => p.index < this.anchors.length - 1) : points;
+  }
+  /** The words ride the segment's slope at its middle or at the end they align to, above, on or
+   *  below it. */
+  wordsPlace(viewport) {
+    const [pa, pb] = this.anchorPixels(viewport);
+    if (!pa || !pb) return null;
+    const angle = segmentTextAngle(pa, pb);
+    const [left, right] = pa.x <= pb.x ? [pa, pb] : [pb, pa];
+    const along = this.props.textHAlign;
+    const at = along === "left" ? left : along === "right" ? right : midpoint(pa, pb);
+    const across = this.props.textVAlign === "top" ? -wordsOffset(this.style.fontSize) : this.props.textVAlign === "bottom" ? wordsOffset(this.style.fontSize) : 0;
+    const p = placeAt({ x: at.x, y: at.y, angle, align: along }, 0, across);
+    return { x: p.x, y: p.y, angle, align: along };
+  }
+  wordsAcross() {
+    return this.props.textVAlign;
   }
-  /** The on-screen segment after extension — the shared basis for painting and hit-testing. */
+  /** The on-screen segment after extension, the shared basis for painting and hit-testing. */
   segment(viewport) {
     const [pa, pb] = this.anchorPixels(viewport);
     if (!pa || !pb) return null;
@@ -2222,13 +2769,13 @@ var TrendLine = class extends Drawing {
   }
   /** A format-2 line showed its stats whether or not it was selected and counted no price moves; a
    *  stats position counted its left and right from the first point, and a save naming none stood
-   *  them at the middle. */
+   *  them at the middle. Its ends, words and stats paint as format 2 painted them. */
   keepSavedLook(saved) {
     const position = saved.statsPosition ?? "center";
     const [a, b] = this._anchors;
     const flipped = !!a && !!b && Number(b.time) < Number(a.time);
     const statsPosition = flipped && position === "left" ? "right" : flipped && position === "right" ? "left" : position;
-    this._props = { ...this._props, statsPosition, alwaysShowStats: true, showPipsChange: false };
+    this._props = { ...this._props, statsPosition, alwaysShowStats: true, showPipsChange: false, savedLook: {} };
   }
   /** The stats stand while the line is selected or edited, or always where the viewer asked. */
   statsShown() {
@@ -2237,15 +2784,24 @@ var TrendLine = class extends Drawing {
   paint(ctx, viewport) {
     const seg = this.segment(viewport);
     if (!seg) return;
+    if (this.props.savedLook) {
+      this.paintSavedLook(ctx, viewport, seg);
+      return;
+    }
     applyStroke(ctx, this.style);
-    strokeSegment(ctx, seg.a, seg.b);
-    if (this.props.leftEnd === "arrow") paintArrowHead(ctx, seg.b, seg.a, this.style);
-    if (this.props.rightEnd === "arrow") paintArrowHead(ctx, seg.a, seg.b, this.style);
-    this.paintProps(ctx, viewport);
+    ctx.beginPath();
+    if (this.props.rightEnd === "arrow") openHead(ctx, seg.a, seg.b, this.style.lineWidth);
+    if (this.props.leftEnd === "arrow") openHead(ctx, seg.b, seg.a, this.style.lineWidth);
+    ctx.moveTo(seg.a.x, seg.a.y);
+    ctx.lineTo(seg.b.x, seg.b.y);
+    ctx.stroke();
+    this.paintMarks(ctx, viewport);
+    this.paintWords(ctx, viewport);
+    this.paintStats(ctx, viewport);
     this.paintDecorations(ctx, viewport);
   }
-  /** Prop-driven ink shared by the family: midpoint marker, end price pills, the stats block. */
-  paintProps(ctx, viewport) {
+  /** The midpoint marker and the end price pills, as their props ask. */
+  paintMarks(ctx, viewport) {
     const [pa, pb] = this.anchorPixels(viewport);
     if (!pa || !pb) return;
     if (this.props.middlePoint) {
@@ -2260,48 +2816,128 @@ var TrendLine = class extends Drawing {
     }
     if (this.props.showPriceLabels) {
       const [a, b] = this.anchors;
-      paintLabel(ctx, this.formatPrice(a.price), { x: pa.x - 8, y: pa.y }, this.style, {
-        align: "right",
-        background: withAlpha(this.style.lineColor, 0.2)
-      });
-      paintLabel(ctx, this.formatPrice(b.price), { x: pb.x + 8, y: pb.y }, this.style, {
-        background: withAlpha(this.style.lineColor, 0.2)
-      });
-    }
-    const textAngle = segmentTextAngle(pa, pb);
+      paintLabel(ctx, this.formatPrice(a.price), { x: pa.x - 8, y: pa.y }, this.style, { align: "right", background: withAlpha(this.style.lineColor, 0.2) });
+      paintLabel(ctx, this.formatPrice(b.price), { x: pb.x + 8, y: pb.y }, this.style, { background: withAlpha(this.style.lineColor, 0.2) });
+    }
+  }
+  /** The stats box: rows of the price move, the span and the angle, each led by its mark, standing
+   *  off the point along the line the stats position names, below and right of a line that rises
+   *  and above and right of one that falls. */
+  paintStats(ctx, viewport) {
+    if (!this.statsShown()) return;
+    const rows = this.statsRows(viewport);
+    if (rows.length === 0) return;
+    const at = this.statsPoint(viewport);
+    if (!at) return;
+    const type = { ...this.style, fontSize: STATS_FONT_SIZE, bold: false, italic: false };
+    const sized = statsBoxAt({ x: 0, y: 0 }, rows, lineMeasure(type));
+    const box2 = { ...sized, x: Math.round(at.point.x + 12), y: Math.round(at.rising ? at.point.y + 11 : at.point.y - 11 - sized.height) };
+    paintStatsBox(ctx, box2, rows, fontOf(type));
+  }
+  /** Where the stats stand along the line, and whether it rises left to right. */
+  statsPoint(viewport) {
+    const [pa, pb] = this.anchorPixels(viewport);
+    if (!pa || !pb) return null;
     const [left, right] = pa.x <= pb.x ? [pa, pb] : [pb, pa];
-    if (this.props.text) {
-      const along = this.props.textHAlign;
-      const at = along === "left" ? left : along === "right" ? right : midpoint(pa, pb);
-      const across = ACROSS[this.props.textVAlign] ?? ACROSS.top;
-      ctx.save();
-      ctx.translate(at.x, at.y);
-      ctx.rotate(textAngle);
-      paintLabel(ctx, this.props.text, { x: 0, y: across.y }, this.style, { align: along === "left" ? "left" : along === "right" ? "right" : "center", baseline: across.baseline });
-      ctx.restore();
+    const toRight = (f) => ({ x: left.x + (right.x - left.x) * f, y: left.y + (right.y - left.y) * f });
+    const place = this.props.statsPosition;
+    const t = place === "left" ? 0.12 : place === "center" ? 0.5 : place === "auto" && toRight(0.88).x > viewport.width * 0.85 ? 0.12 : 0.88;
+    return { point: toRight(t), rising: right.y <= left.y };
+  }
+  /** The stats rows: the price move with its percent and its count of the symbol's smallest moves;
+   *  the bars and the time it spans with its length on the pane; and its angle. A row whose items
+   *  are all off is left out. */
+  statsRows(viewport) {
+    const [a, b] = this.anchors;
+    if (!a || !b) return [];
+    const rows = [];
+    const dPrice = b.price - a.price;
+    const price = [];
+    if (this.props.showPriceRange) price.push(this.formatPrice(dPrice));
+    if (this.props.showPercentChange) {
+      const pct = (a.price !== 0 ? dPrice / Math.abs(a.price) * 100 : 0).toFixed(2);
+      price.push(price.length ? `(${pct}%)` : `${pct}%`);
     }
-    const stats = this.statsShown() ? this.statsText(viewport) : null;
-    if (stats) {
-      const place = this.props.statsPosition;
-      const toRight = (f) => ({ x: left.x + (right.x - left.x) * f, y: left.y + (right.y - left.y) * f });
-      const t = place === "left" ? 0.12 : place === "center" ? 0.5 : place === "auto" && toRight(0.88).x > viewport.width * 0.85 ? 0.12 : 0.88;
-      const at = toRight(t);
-      const crowded = !!this.props.text && this.props.textVAlign === "top" && (place === "center" && this.props.textHAlign === "center" || t === 0.12 && this.props.textHAlign === "left" || t === 0.88 && this.props.textHAlign === "right");
-      ctx.save();
-      ctx.translate(at.x, at.y);
-      ctx.rotate(textAngle);
-      paintLabel(ctx, stats, { x: 0, y: crowded ? -32 : -14 }, this.style, { align: "center", background: withAlpha("#1b1f27", 0.92) });
-      ctx.restore();
+    let priceRow = price.join(" ");
+    const tick = this.tickSize();
+    if (this.props.showPipsChange && tick !== null && tick > 0) {
+      const moves = grouped(Math.round(dPrice / tick));
+      priceRow = priceRow ? `${priceRow}, ${moves}` : moves;
     }
+    if (priceRow) rows.push({ kind: "price", text: priceRow });
+    const span = [];
+    if (this.props.showBarsRange) {
+      const bars = viewport.barsBetween(a.time, b.time);
+      if (bars !== null) span.push(`${Math.round(bars)} bars`);
+    }
+    if (this.props.showDateTimeRange) {
+      const secs = Math.abs(Number(b.time) - Number(a.time));
+      if (Number.isFinite(secs) && secs > 0) span.push(span.length ? `(${spanText(secs)})` : spanText(secs));
+    }
+    let spanRow = span.join(" ");
+    const [pa, pb] = this.anchorPixels(viewport);
+    if (this.props.showDistance && pa && pb) {
+      const distance = `distance: ${Math.round(Math.hypot(pb.x - pa.x, pb.y - pa.y))} px`;
+      spanRow = spanRow ? `${spanRow}, ${distance}` : distance;
+    }
+    if (spanRow) rows.push({ kind: "span", text: spanRow });
+    if (this.props.showAngle && pa && pb) rows.push({ kind: "angle", text: `${(-angleOf(pa, pb) * 180 / Math.PI).toFixed(1)}\xB0` });
+    return rows;
+  }
+  /** Extra ink beyond the shared prop set: the family variants override. */
+  paintDecorations(_ctx, _viewport) {
   }
-  statsText(viewport) {
+  testHit(point, viewport) {
+    const seg = this.segment(viewport);
+    if (!seg) return false;
+    return distanceToSegment(point, seg.a, seg.b) <= hitTolerance(this.style.lineWidth) || this.hitWords(point, viewport);
+  }
+  // ============ The format-2 look ============
+  /** A format-2 line: filled arrow heads, its words on a label across it, and its stats on a pill. */
+  paintSavedLook(ctx, viewport, seg) {
+    applyStroke(ctx, this.style);
+    strokeSegment(ctx, seg.a, seg.b);
+    if (this.props.leftEnd === "arrow") paintArrowHead(ctx, seg.b, seg.a, this.style);
+    if (this.props.rightEnd === "arrow") paintArrowHead(ctx, seg.a, seg.b, this.style);
+    this.paintMarks(ctx, viewport);
+    const [pa, pb] = this.anchorPixels(viewport);
+    if (pa && pb) {
+      const textAngle = segmentTextAngle(pa, pb);
+      const [left, right] = pa.x <= pb.x ? [pa, pb] : [pb, pa];
+      if (this.textDraft) this.paintWords(ctx, viewport);
+      else if (this.props.text) {
+        const along = this.props.textHAlign;
+        const at = along === "left" ? left : along === "right" ? right : midpoint(pa, pb);
+        const across = ACROSS[this.props.textVAlign] ?? ACROSS.top;
+        ctx.save();
+        ctx.translate(at.x, at.y);
+        ctx.rotate(textAngle);
+        paintLabel(ctx, this.props.text, { x: 0, y: across.y }, this.style, { align: along === "left" ? "left" : along === "right" ? "right" : "center", baseline: across.baseline });
+        ctx.restore();
+      }
+      const stats = this.statsShown() ? this.savedStatsText(viewport) : null;
+      if (stats) {
+        const place = this.props.statsPosition;
+        const toRight = (f) => ({ x: left.x + (right.x - left.x) * f, y: left.y + (right.y - left.y) * f });
+        const t = place === "left" ? 0.12 : place === "center" ? 0.5 : place === "auto" && toRight(0.88).x > viewport.width * 0.85 ? 0.12 : 0.88;
+        const at = toRight(t);
+        const crowded = !!this.props.text && this.props.textVAlign === "top" && (place === "center" && this.props.textHAlign === "center" || t === 0.12 && this.props.textHAlign === "left" || t === 0.88 && this.props.textHAlign === "right");
+        ctx.save();
+        ctx.translate(at.x, at.y);
+        ctx.rotate(textAngle);
+        paintLabel(ctx, stats, { x: 0, y: crowded ? -32 : -14 }, this.style, { align: "center", background: withAlpha("#1b1f27", 0.92) });
+        ctx.restore();
+      }
+    }
+    this.paintDecorations(ctx, viewport);
+  }
+  /** A format-2 line's stats on one line: signed moves, the bars, the span and the angle. */
+  savedStatsText(viewport) {
     const [a, b] = this.anchors;
     if (!a || !b) return null;
     const parts = [];
     const dPrice = b.price - a.price;
-    if (this.props.showPriceRange) {
-      parts.push(`${dPrice >= 0 ? "+" : ""}${this.formatPrice(dPrice)}`);
-    }
+    if (this.props.showPriceRange) parts.push(`${dPrice >= 0 ? "+" : ""}${this.formatPrice(dPrice)}`);
     if (this.props.showPercentChange) {
       const pct = a.price !== 0 ? dPrice / Math.abs(a.price) * 100 : 0;
       parts.push(`${pct >= 0 ? "+" : ""}${pct.toFixed(2)}%`);
@@ -2319,12 +2955,7 @@ var TrendLine = class extends Drawing {
     }
     if (this.props.showDateTimeRange) {
       const secs = Math.abs(Number(b.time) - Number(a.time));
-      if (Number.isFinite(secs) && secs > 0) {
-        const d = Math.floor(secs / 86400);
-        const h = Math.floor(secs % 86400 / 3600);
-        const m = Math.floor(secs % 3600 / 60);
-        parts.push(d > 0 ? `${d}d ${h}h` : h > 0 ? `${h}h ${m}m` : `${m}m`);
-      }
+      if (Number.isFinite(secs) && secs > 0) parts.push(spanText(secs));
     }
     if (this.props.showAngle) {
       const [pa, pb] = this.anchorPixels(viewport);
@@ -2332,14 +2963,6 @@ var TrendLine = class extends Drawing {
     }
     return parts.length ? parts.join("  \xB7  ") : null;
   }
-  /** Extra ink beyond the shared prop set — the family variants override. */
-  paintDecorations(_ctx, _viewport) {
-  }
-  testHit(point, viewport) {
-    const seg = this.segment(viewport);
-    if (!seg) return false;
-    return distanceToSegment(point, seg.a, seg.b) <= hitTolerance(this.style.lineWidth);
-  }
 };
 var Ray = class extends TrendLine {
   type = "ray";
@@ -2358,6 +2981,9 @@ var Arrow = class extends TrendLine {
   defaultProps() {
     return { ...LINE_PROPS, rightEnd: "arrow" };
   }
+  cursorAt(point, viewport) {
+    return super.cursorAt(point, viewport) ?? (this.state === "selected" ? "text" : null);
+  }
 };
 var InfoLine = class extends TrendLine {
   type = "info_line";
@@ -2369,15 +2995,16 @@ var InfoLine = class extends TrendLine {
       showPipsChange: true,
       showBarsRange: true,
       showDateTimeRange: true,
+      showDistance: true,
       showAngle: true,
       statsPosition: "center",
       alwaysShowStats: true
     };
   }
-  /** A format-2 info line that named no percent change or span showed neither. */
+  /** A format-2 info line that named no percent change or span showed neither, and no distance. */
   keepSavedLook(saved) {
     super.keepSavedLook(saved);
-    const props = {};
+    const props = { showDistance: false };
     if (!("showPercentChange" in saved)) props.showPercentChange = false;
     if (!("showDateTimeRange" in saved)) props.showDateTimeRange = false;
     this._props = { ...this._props, ...props };
@@ -2385,12 +3012,38 @@ var InfoLine = class extends TrendLine {
 };
 var TrendAngle = class extends TrendLine {
   type = "trend_angle";
-  /** A trend angle offers no label, so it invites none. */
-  paintTextHint() {
+  invites() {
+    return false;
   }
   paintDecorations(ctx, viewport) {
     const [pa, pb] = this.anchorPixels(viewport);
     if (!pa || !pb) return;
+    if (this.props.savedLook) {
+      this.paintSavedAngle(ctx, pa, pb);
+      return;
+    }
+    const angle = angleOf(pa, pb);
+    ctx.save();
+    ctx.strokeStyle = this.style.lineColor;
+    ctx.lineWidth = 1;
+    ctx.lineCap = "butt";
+    ctx.lineJoin = "miter";
+    ctx.setLineDash([1, 2]);
+    ctx.beginPath();
+    ctx.moveTo(pa.x, pa.y);
+    ctx.lineTo(pa.x + 50, pa.y);
+    ctx.arc(pa.x, pa.y, 50, 0, angle, angle < 0);
+    ctx.stroke();
+    ctx.setLineDash([]);
+    ctx.font = fontOf(this.style);
+    ctx.fillStyle = this.style.lineColor;
+    ctx.textAlign = "start";
+    ctx.textBaseline = "middle";
+    ctx.fillText(`${(-angle * 180 / Math.PI).toFixed(1)}\xB0`, pa.x + 58.5, pa.y + 1);
+    ctx.restore();
+  }
+  /** A format-2 trend angle's mark: a short dotted level and arc, the angle on a pill. */
+  paintSavedAngle(ctx, pa, pb) {
     const angle = angleOf(pa, pb);
     const angleDeg = -angle * (180 / Math.PI);
     const radius = Math.min(36, Math.hypot(pb.x - pa.x, pb.y - pa.y) / 2);
@@ -2408,25 +3061,33 @@ var TrendAngle = class extends TrendLine {
       ctx.stroke();
       ctx.restore();
     }
-    paintLabel(ctx, `${angleDeg.toFixed(0)}\xB0`, { x: pa.x + radius + 18, y: pa.y }, this.style, {
-      background: withAlpha("#1b1f27", 0.92)
-    });
+    paintLabel(ctx, `${angleDeg.toFixed(0)}\xB0`, { x: pa.x + radius + 18, y: pa.y }, this.style, { background: withAlpha("#1b1f27", 0.92) });
   }
 };
-var HorizontalLine = class extends Drawing {
+var levelLabel = (drawing2, coordinate, text, own) => {
+  const selected = () => drawing2.state === "selected" || drawing2.state === "editing";
+  const color = () => own() ? drawing2.style.lineColor : drawing2.inks().accent;
+  return new AxisLabel({
+    coordinate,
+    text,
+    color,
+    textColor: () => inkOn(color()),
+    visible: () => (own() || selected()) && drawing2.isVisibleNow()
+  });
+};
+var HorizontalLine = class extends LineWords {
   type = "horizontal_line";
   _axisViews = [
-    new AxisLabel({
-      coordinate: () => {
+    levelLabel(
+      this,
+      () => {
         const anchor = this.anchors[0];
         const viewport = this.getViewport();
-        if (!anchor || !viewport) return null;
-        return viewport.yOf(anchor.price);
+        return anchor && viewport ? viewport.yOf(anchor.price) : null;
       },
-      text: () => this.formatPrice(this.anchors[0]?.price ?? 0),
-      color: () => this.style.lineColor,
-      visible: () => this.props.showPrice && this.isVisibleNow()
-    })
+      () => this.formatPrice(this.anchors[0]?.price ?? 0),
+      () => this.props.showPrice
+    )
   ];
   defaultProps() {
     return { text: "", showPrice: true, textVAlign: "middle", textHAlign: "center" };
@@ -2434,21 +3095,56 @@ var HorizontalLine = class extends Drawing {
   axisViews() {
     return this._axisViews;
   }
+  axisSpans() {
+    return { prices: this.anchors.slice(0, 1).map((a) => a.price), times: null };
+  }
   requiredAnchors() {
     return 1;
   }
-  paint(ctx, viewport) {
+  handleShape() {
+    return "square";
+  }
+  handleCursorName() {
+    return "ns-resize";
+  }
+  /** The square handle stands nine tenths of the way across the pane at the level. */
+  getControlPoints(viewport) {
+    const y = this.levelY(viewport);
+    return y === null ? [] : [{ index: 0, x: viewport.width * LEVEL_HANDLE_AT, y }];
+  }
+  /** The level's height on the pane, or null off the scale. */
+  levelY(viewport) {
     const y = viewport.yOf(this.anchors[0]?.price ?? NaN);
-    if (y === null || !Number.isFinite(y)) return;
-    const start = this.leftEdge(viewport);
+    return y === null || !Number.isFinite(y) ? null : y;
+  }
+  paint(ctx, viewport) {
+    const level = this.levelY(viewport);
+    if (level === null) return;
+    const y = crisp(level, this.style.lineWidth);
     applyStroke(ctx, this.style);
-    strokeSegment(ctx, { x: start, y }, { x: viewport.width, y });
-    if (this.props.text) {
-      const along = this.props.textHAlign;
-      const across = ACROSS[this.props.textVAlign] ?? ACROSS.middle;
-      const x = along === "left" ? start + 4 : along === "right" ? viewport.width - 4 : (start + viewport.width) / 2;
-      paintLabel(ctx, this.props.text, { x, y: y + across.y }, this.style, { align: along === "left" ? "left" : along === "right" ? "right" : "center", baseline: across.baseline });
-    }
+    ctx.lineCap = this.levelCap();
+    ctx.lineJoin = "miter";
+    strokeSegment(ctx, { x: this.leftEdge(viewport), y }, { x: viewport.width, y });
+    this.paintWords(ctx, viewport);
+  }
+  /** The cap the line's ends wear: square across the pane's edges, round at a ray's point. */
+  levelCap() {
+    return "butt";
+  }
+  /** The words stand above, on or below the drawn line, in from its left end, at its middle, or in
+   *  from the pane's right edge. */
+  wordsPlace(viewport) {
+    const level = this.levelY(viewport);
+    if (level === null) return null;
+    const y = crisp(level, this.style.lineWidth);
+    const start = this.leftEdge(viewport);
+    const along = this.props.textHAlign;
+    const x = along === "left" ? start + LEVEL_WORDS_INSET : along === "right" ? viewport.width - LEVEL_WORDS_INSET : (start + viewport.width) / 2;
+    const across = this.props.textVAlign === "top" ? -wordsOffset(this.style.fontSize) : this.props.textVAlign === "bottom" ? wordsOffset(this.style.fontSize) : 0;
+    return { x, y: y + across, angle: 0, align: along };
+  }
+  wordsAcross() {
+    return this.props.textVAlign;
   }
   /** Where the line starts; the ray variant starts at its anchor. */
   leftEdge(_viewport) {
@@ -2459,16 +3155,53 @@ var HorizontalLine = class extends Drawing {
     this._props = { ...this._props, textVAlign: "top", textHAlign: "left" };
   }
   testHit(point, viewport) {
-    const y = viewport.yOf(this.anchors[0]?.price ?? NaN);
+    const y = this.levelY(viewport);
     if (y === null) return false;
-    return point.x >= this.leftEdge(viewport) - 4 && Math.abs(point.y - y) <= hitTolerance(this.style.lineWidth);
+    const onLine = point.x >= this.leftEdge(viewport) - 4 && Math.abs(point.y - y) <= hitTolerance(this.style.lineWidth);
+    return onLine || this.hitWords(point, viewport);
   }
 };
 var HorizontalRay = class extends HorizontalLine {
   type = "horizontal_ray";
+  _rayTimeViews = [
+    pointLabel(
+      this,
+      () => {
+        const anchor = this.anchors[0];
+        const viewport = this.getViewport();
+        return anchor && viewport ? viewport.xOf(anchor.time) : null;
+      },
+      () => this.formatTime(this.anchors[0]?.time),
+      () => (this.state === "selected" || this.state === "editing") && this.isVisibleNow()
+    )
+  ];
   defaultProps() {
     return { text: "", showPrice: true, textVAlign: "bottom", textHAlign: "center" };
   }
+  timeViews() {
+    return this._rayTimeViews;
+  }
+  axisSpans() {
+    const anchor = this.anchors[0];
+    return { prices: anchor ? [anchor.price] : null, times: anchor ? [anchor.time] : null };
+  }
+  handleShape() {
+    return "circle";
+  }
+  handleCursorName() {
+    return "default";
+  }
+  getControlPoints(viewport) {
+    const anchor = this.anchors[0];
+    const p = anchor ? this.anchorToPixel(anchor, viewport) : null;
+    return p ? [{ index: 0, x: p.x, y: p.y }] : [];
+  }
+  invites() {
+    return false;
+  }
+  levelCap() {
+    return "round";
+  }
   leftEdge(viewport) {
     const anchor = this.anchors[0];
     if (!anchor) return 0;
@@ -2476,27 +3209,19 @@ var HorizontalRay = class extends HorizontalLine {
     return p ? p.x : 0;
   }
 };
-function timeText(time) {
-  const t = Number(time);
-  if (!Number.isFinite(t)) return String(time);
-  const d = new Date(t * 1e3);
-  const pad = (n) => String(n).padStart(2, "0");
-  return `${d.getUTCFullYear()}-${pad(d.getUTCMonth() + 1)}-${pad(d.getUTCDate())} ${pad(d.getUTCHours())}:${pad(d.getUTCMinutes())}`;
-}
-var VerticalLine = class extends Drawing {
+var VerticalLine = class extends LineWords {
   type = "vertical_line";
   _timeViews = [
-    new AxisLabel({
-      coordinate: () => {
+    levelLabel(
+      this,
+      () => {
         const anchor = this.anchors[0];
         const viewport = this.getViewport();
-        if (!anchor || !viewport) return null;
-        return viewport.xOf(anchor.time);
+        return anchor && viewport ? viewport.xOf(anchor.time) : null;
       },
-      text: () => timeText(this.anchors[0]?.time),
-      color: () => this.style.lineColor,
-      visible: () => this.props.showTime && this.isVisibleNow()
-    })
+      () => this.formatTime(this.anchors[0]?.time),
+      () => this.props.showTime
+    )
   ];
   defaultProps() {
     return { text: "", showTime: true, textVAlign: "middle", textHAlign: "center", textOrientation: "vertical" };
@@ -2504,76 +3229,94 @@ var VerticalLine = class extends Drawing {
   timeViews() {
     return this._timeViews;
   }
+  axisSpans() {
+    return { prices: null, times: this.anchors.slice(0, 1).map((a) => a.time) };
+  }
   requiredAnchors() {
     return 1;
   }
+  handleShape() {
+    return "square";
+  }
+  handleCursorName() {
+    return "ew-resize";
+  }
+  /** The square handle stands on the line nine tenths of the way down the pane. */
+  getControlPoints(viewport) {
+    const x = this.timeX(viewport);
+    return x === null ? [] : [{ index: 0, x, y: viewport.height * LEVEL_HANDLE_AT }];
+  }
+  timeX(viewport) {
+    const anchor = this.anchors[0];
+    return anchor ? viewport.xOf(anchor.time) : null;
+  }
   /** A format-2 line's label read across it, to its right at the top of the pane. */
   keepSavedLook(_saved) {
     this._props = { ...this._props, textOrientation: "horizontal", textVAlign: "top", textHAlign: "right" };
   }
   paint(ctx, viewport) {
-    const anchor = this.anchors[0];
-    if (!anchor) return;
-    const x = viewport.xOf(anchor.time);
-    if (x === null) return;
+    const time = this.timeX(viewport);
+    if (time === null) return;
+    const x = crisp(time, this.style.lineWidth);
     applyStroke(ctx, this.style);
+    ctx.lineCap = "butt";
+    ctx.lineJoin = "miter";
     strokeSegment(ctx, { x, y: 0 }, { x, y: viewport.height });
-    if (this.props.text) this.paintText(ctx, x, viewport.height);
-  }
-  /** The label at its place along the line and beside it. Running up the line, the label is turned
-   *  a quarter left, so the line's top is where its words end. */
-  paintText(ctx, x, height) {
-    const { textVAlign: along, textHAlign: across } = this.props;
-    const y = along === "top" ? 4 : along === "bottom" ? height - 4 : height / 2;
-    if (this.props.textOrientation === "horizontal") {
-      const at = across === "left" ? x - 4 : across === "right" ? x + 4 : x;
-      paintLabel(ctx, this.props.text, { x: at, y }, this.style, { align: across === "left" ? "right" : across === "right" ? "left" : "center", baseline: along === "top" ? "top" : along === "bottom" ? "bottom" : "middle" });
-      return;
-    }
-    ctx.save();
-    ctx.translate(x, y);
-    ctx.rotate(-Math.PI / 2);
-    paintLabel(ctx, this.props.text, { x: 0, y: across === "left" ? -4 : across === "right" ? 4 : 0 }, this.style, {
-      align: along === "top" ? "right" : along === "bottom" ? "left" : "center",
-      baseline: across === "left" ? "bottom" : across === "right" ? "top" : "middle"
-    });
-    ctx.restore();
+    this.paintWords(ctx, viewport);
+  }
+  /** The words stand at the top, the middle or the bottom of the pane, to the line's left, on it or
+   *  to its right. Running up the line they turn a quarter left, so the line's top is where they
+   *  end; reading across it they stand level. */
+  wordsPlace(viewport) {
+    const time = this.timeX(viewport);
+    if (time === null) return null;
+    const x = crisp(time, this.style.lineWidth);
+    const { textVAlign: along, textHAlign: across, textOrientation } = this.props;
+    const off = wordsOffset(this.style.fontSize);
+    if (textOrientation === "horizontal") {
+      const y2 = along === "top" ? off : along === "bottom" ? viewport.height - off : viewport.height / 2;
+      const at2 = across === "left" ? x - 4 : across === "right" ? x + 4 : x;
+      return { x: at2, y: y2, angle: 0, align: across === "left" ? "right" : across === "right" ? "left" : "center" };
+    }
+    const y = along === "top" ? LEVEL_WORDS_INSET : along === "bottom" ? viewport.height - LEVEL_WORDS_INSET : viewport.height / 2;
+    const at = across === "left" ? x - off : across === "right" ? x + off : x;
+    return { x: at, y, angle: -Math.PI / 2, align: along === "top" ? "right" : along === "bottom" ? "left" : "center" };
+  }
+  wordsAcross() {
+    if (this.props.textOrientation === "horizontal") return this.props.textVAlign === "top" ? "bottom" : this.props.textVAlign === "bottom" ? "top" : "middle";
+    return this.props.textHAlign === "left" ? "top" : this.props.textHAlign === "right" ? "bottom" : "middle";
   }
   testHit(point, viewport) {
-    const anchor = this.anchors[0];
-    if (!anchor) return false;
-    const x = viewport.xOf(anchor.time);
-    if (x === null) return false;
-    return Math.abs(point.x - x) <= hitTolerance(this.style.lineWidth);
+    const time = this.timeX(viewport);
+    if (time === null) return false;
+    return Math.abs(point.x - time) <= hitTolerance(this.style.lineWidth) || this.hitWords(point, viewport);
   }
 };
 var CrossLine = class extends Drawing {
   type = "cross_line";
   _axisViews = [
-    new AxisLabel({
-      coordinate: () => {
+    levelLabel(
+      this,
+      () => {
         const anchor = this.anchors[0];
         const viewport = this.getViewport();
-        if (!anchor || !viewport) return null;
-        return viewport.yOf(anchor.price);
+        return anchor && viewport ? viewport.yOf(anchor.price) : null;
       },
-      text: () => this.formatPrice(this.anchors[0]?.price ?? 0),
-      color: () => this.style.lineColor,
-      visible: () => this.props.showPrice && this.isVisibleNow()
-    })
+      () => this.formatPrice(this.anchors[0]?.price ?? 0),
+      () => this.props.showPrice
+    )
   ];
   _timeViews = [
-    new AxisLabel({
-      coordinate: () => {
+    levelLabel(
+      this,
+      () => {
         const anchor = this.anchors[0];
         const viewport = this.getViewport();
-        if (!anchor || !viewport) return null;
-        return viewport.xOf(anchor.time);
+        return anchor && viewport ? viewport.xOf(anchor.time) : null;
       },
-      text: () => timeText(this.anchors[0]?.time),
-      color: () => this.style.lineColor,
-      visible: () => this.props.showTime && this.isVisibleNow()
-    })
+      () => this.formatTime(this.anchors[0]?.time),
+      () => this.props.showTime
+    )
   ];
   defaultProps() {
     return { showPrice: true, showTime: true };
@@ -2584,17 +3327,30 @@ var CrossLine = class extends Drawing {
   timeViews() {
     return this._timeViews;
   }
+  axisSpans() {
+    const anchor = this.anchors[0];
+    return { prices: anchor ? [anchor.price] : null, times: anchor ? [anchor.time] : null };
+  }
   requiredAnchors() {
     return 1;
   }
+  handlesOnHover() {
+    return true;
+  }
+  cursorAt(point, viewport) {
+    return this.getControlPoints(viewport).some((p) => Math.hypot(p.x - point.x, p.y - point.y) <= 6.5) ? "default" : null;
+  }
   paint(ctx, viewport) {
     const anchor = this.anchors[0];
     if (!anchor) return;
     const p = this.anchorToPixel(anchor, viewport);
     if (!p) return;
+    const width = this.style.lineWidth;
     applyStroke(ctx, this.style);
-    strokeSegment(ctx, { x: 0, y: p.y }, { x: viewport.width, y: p.y });
-    strokeSegment(ctx, { x: p.x, y: 0 }, { x: p.x, y: viewport.height });
+    ctx.lineCap = "butt";
+    ctx.lineJoin = "miter";
+    strokeSegment(ctx, { x: 0, y: crisp(p.y, width) }, { x: viewport.width, y: crisp(p.y, width) });
+    strokeSegment(ctx, { x: crisp(p.x, width), y: 0 }, { x: crisp(p.x, width), y: viewport.height });
   }
   testHit(point, viewport) {
     const anchor = this.anchors[0];
@@ -3153,77 +3909,6 @@ function volumeProfile(bars, rows) {
   return bins;
 }
 
-// src/internal/drawings/core/savedLook.ts
-function endSavedLook(patch) {
-  return "savedLook" in patch || Object.keys(patch).length === 0 ? patch : { ...patch, savedLook: null };
-}
-function savedLevels(look, key = "levels") {
-  const levels = look[key];
-  if (!Array.isArray(levels)) return [];
-  return levels.filter((l) => !!l && typeof l === "object" && typeof l.value === "number").map((l) => ({
-    value: l.value,
-    visible: l.visible !== false,
-    ...typeof l.color === "string" ? { color: l.color } : {},
-    ...typeof l.text === "string" ? { text: l.text } : {}
-  }));
-}
-
-// src/internal/drawings/render/textEntry.ts
-var SELECTION_WASH = "rgba(255, 255, 255, 0.2)";
-var CARET_WIDTH = 2;
-var lineMiddle = (lineHeight) => lineHeight / 2 + 1;
-var caretHeight = (font, lineHeight) => Math.min(lineHeight, Number(/(\d+(?:\.\d+)?)px/.exec(font)?.[1]) || lineHeight);
-function paintTextEntry(ctx, p) {
-  const draft = p.draft;
-  const shown = p.placeholder ? p.placeholder.block : p.block;
-  const lineTop = (i) => p.y + i * p.lineHeight;
-  const left = (block, i) => p.x + lineLeft(block, i, p.align, p.width);
-  ctx.save();
-  ctx.setLineDash([]);
-  ctx.direction = "ltr";
-  if (draft && draft.selectionStart !== draft.selectionEnd && !p.placeholder) {
-    ctx.fillStyle = SELECTION_WASH;
-    for (const span of runSpans(p.block, draft.selectionStart, draft.selectionEnd, p.measure)) {
-      const from = Math.round(left(p.block, span.line) + span.x0);
-      const to = Math.ceil(left(p.block, span.line) + span.x1);
-      if (to > from) ctx.fillRect(from, lineTop(span.line), to - from, p.lineHeight);
-    }
-  }
-  ctx.font = p.font;
-  ctx.fillStyle = p.color;
-  ctx.textAlign = "left";
-  ctx.textBaseline = "middle";
-  const alpha = ctx.globalAlpha;
-  if (p.placeholder) ctx.globalAlpha = alpha * p.placeholder.alpha;
-  shown.lines.forEach((l, i) => {
-    if (l.text === "") return;
-    ctx.fillText(l.text, left(shown, i), lineTop(i) + lineMiddle(p.lineHeight));
-  });
-  ctx.globalAlpha = alpha;
-  if (draft?.composition && !p.placeholder) {
-    for (const span of runSpans(p.block, draft.composition.start, draft.composition.end, p.measure)) {
-      const from = Math.round(left(p.block, span.line) + span.x0);
-      const to = Math.ceil(left(p.block, span.line) + span.x1);
-      if (to > from) ctx.fillRect(from, lineTop(span.line) + p.lineHeight - 1, to - from, 1);
-    }
-  }
-  if (draft?.caret && draft.selectionStart === draft.selectionEnd) {
-    const at = caretPlace(p.block, draft.selectionEnd, p.measure);
-    const tall = caretHeight(p.font, p.lineHeight);
-    ctx.fillRect(Math.round(left(p.block, at.line) + at.x) - CARET_WIDTH / 2, lineTop(at.line) + Math.round((p.lineHeight - tall) / 2), CARET_WIDTH, tall);
-  }
-  ctx.restore();
-}
-function paintWordsFrame(ctx, box2, color, alpha) {
-  ctx.save();
-  ctx.setLineDash([]);
-  ctx.globalAlpha = ctx.globalAlpha * alpha;
-  ctx.strokeStyle = color;
-  ctx.lineWidth = 2;
-  ctx.strokeRect(box2.x - 1, box2.y - 1, box2.width + 2, box2.height + 2);
-  ctx.restore();
-}
-
 // src/internal/drawings/render/glyphArtwork.ts
 var glyphImages = /* @__PURE__ */ new Map();
 function glyphArtwork(url, onLoad) {
@@ -3528,6 +4213,10 @@ var Note = class extends Drawing {
     const at = this.place(viewport);
     return !!at && inBox(point, at.box);
   }
+  /** Over the selected note's box the cursor reads as its words. */
+  cursorAt(point, viewport) {
+    return this.state === "selected" && this.wordsAt(point, viewport) ? "text" : null;
+  }
   /** An empty note shows its placeholder in its own box, so it needs no hint above it. */
   paintTextHint() {
   }
@@ -4892,7 +5581,7 @@ var RangeMeter = class extends Drawing {
       }
       if (this.props.showDateTimeRange) {
         const secs = Number(b.time) - Number(a.time);
-        if (Number.isFinite(secs) && secs !== 0) out.push(spanText(Math.abs(secs)));
+        if (Number.isFinite(secs) && secs !== 0) out.push(spanText2(Math.abs(secs)));
       }
       if (this.props.showVolume) {
         const range = barsInRange(this.bars(), a.time, b.time);
@@ -5096,7 +5785,7 @@ var Measure = class extends Drawing {
     const secs = Math.abs(Number(b.time) - Number(a.time));
     const line22 = [];
     if (bars !== null) line22.push(`${Math.abs(Math.round(bars))} bars`);
-    if (Number.isFinite(secs) && secs > 0) line22.push(spanText(secs));
+    if (Number.isFinite(secs) && secs > 0) line22.push(spanText2(secs));
     const lines = line22.length ? [parts[0], line22.join(", ")] : [parts[0]];
     ctx.font = `600 ${this.style.fontSize}px ui-sans-serif, system-ui, sans-serif`;
     ctx.textAlign = "center";
@@ -5123,7 +5812,7 @@ var Measure = class extends Drawing {
     return inBox2(point, box(pa, pb));
   }
 };
-function spanText(seconds) {
+function spanText2(seconds) {
   const d = Math.floor(seconds / 86400);
   const h = Math.floor(seconds % 86400 / 3600);
   const m = Math.floor(seconds % 3600 / 60);
@@ -9785,18 +10474,19 @@ var TOOL_CATEGORIES = [
   "annotation",
   "content"
 ];
+var LINE_WORDS = { inlineText: { clickToType: true, whenEmpty: "keep" }, settingsOnDoubleClick: true };
 var DEFINITIONS = [
   // Lines
-  tool(TrendLine, { type: "trend_line", name: "Trend line", category: "lines", anchors: 2, style: LINE_LOOK }),
-  tool(Ray, { type: "ray", name: "Ray", category: "lines", anchors: 2, style: LINE_LOOK }),
-  tool(InfoLine, { type: "info_line", name: "Info line", category: "lines", anchors: 2, style: LINE_LOOK }),
-  tool(ExtendedLine, { type: "extended", name: "Extended line", category: "lines", anchors: 2, style: LINE_LOOK }),
-  tool(TrendAngle, { type: "trend_angle", name: "Trend angle", category: "lines", anchors: 2, style: { ...LINE_LOOK, fontSize: 12 } }),
-  tool(HorizontalLine, { type: "horizontal_line", name: "Horizontal line", category: "lines", anchors: 1, style: { ...LINE_LOOK, fontSize: 12 } }),
-  tool(HorizontalRay, { type: "horizontal_ray", name: "Horizontal ray", category: "lines", anchors: 1, style: { ...LINE_LOOK, fontSize: 12 } }),
-  tool(VerticalLine, { type: "vertical_line", name: "Vertical line", category: "lines", anchors: 1, style: LINE_LOOK }),
-  tool(CrossLine, { type: "cross_line", name: "Cross line", category: "lines", anchors: 1, style: LINE_LOOK }),
-  tool(Arrow, { type: "arrow", name: "Arrow", category: "lines", anchors: 2, style: LINE_LOOK }),
+  tool(TrendLine, { type: "trend_line", name: "Trend line", category: "lines", anchors: 2, style: LINE_LOOK, ...LINE_WORDS }),
+  tool(Ray, { type: "ray", name: "Ray", category: "lines", anchors: 2, style: LINE_LOOK, ...LINE_WORDS }),
+  tool(InfoLine, { type: "info_line", name: "Info line", category: "lines", anchors: 2, style: LINE_LOOK, ...LINE_WORDS }),
+  tool(ExtendedLine, { type: "extended", name: "Extended line", category: "lines", anchors: 2, style: LINE_LOOK, ...LINE_WORDS }),
+  tool(TrendAngle, { type: "trend_angle", name: "Trend angle", category: "lines", anchors: 2, settingsOnDoubleClick: true, style: { ...LINE_LOOK, fontSize: 12 } }),
+  tool(HorizontalLine, { type: "horizontal_line", name: "Horizontal line", category: "lines", anchors: 1, style: { ...LINE_LOOK, fontSize: 12 }, ...LINE_WORDS }),
+  tool(HorizontalRay, { type: "horizontal_ray", name: "Horizontal ray", category: "lines", anchors: 1, settingsOnDoubleClick: true, style: { ...LINE_LOOK, fontSize: 12 } }),
+  tool(VerticalLine, { type: "vertical_line", name: "Vertical line", category: "lines", anchors: 1, style: LINE_LOOK, ...LINE_WORDS }),
+  tool(CrossLine, { type: "cross_line", name: "Cross line", category: "lines", anchors: 1, settingsOnDoubleClick: true, style: LINE_LOOK }),
+  tool(Arrow, { type: "arrow", name: "Arrow", category: "lines", anchors: 2, style: LINE_LOOK, ...LINE_WORDS }),
   // Shapes
   tool(Rectangle, { type: "rectangle", name: "Rectangle", category: "shapes", anchors: 2, style: shapeLook("#9c27b0") }),
   tool(RotatedRectangle, { type: "rotated_rectangle", name: "Rotated rectangle", category: "shapes", anchors: 3, style: shapeLook("#4caf50") }),
@@ -10540,6 +11230,10 @@ function placePanel(panel, anchor, box2, mode, gap = 2) {
     const lift = Number.parseFloat(getComputedStyle(panel).paddingTop) || 0;
     top = a.top - b.top - lift;
     if (top + h > b.height) top = Math.max(0, b.height - h);
+  } else if (mode === "above") {
+    left = rtl ? a.right - b.left - w : a.left - b.left;
+    top = a.top - b.top - h - gap;
+    if (top < 0) top = a.bottom - b.top + gap;
   } else {
     const end = mode === "below-end" !== rtl;
     left = end ? a.right - b.left - w : a.left - b.left;
@@ -11256,6 +11950,12 @@ var SAVED_LOOK_PROPS = {
   bars_pattern: ["candles"],
   fixed_range_volume_profile: PROFILE,
   anchored_volume_profile: PROFILE,
+  trend_line: SAVED_LOOK,
+  ray: SAVED_LOOK,
+  info_line: SAVED_LOOK,
+  extended: SAVED_LOOK,
+  trend_angle: SAVED_LOOK,
+  arrow: SAVED_LOOK,
   callout: ["borderWidth", ...SAVED_LOOK],
   price_label: SAVED_LOOK,
   pin: SAVED_LOOK,
@@ -11275,7 +11975,7 @@ var SAVED_LOOK_PROPS = {
 };
 var INERT_PROPS = {
   ...SAVED_LOOK_PROPS,
-  trend_angle: ["text", "leftEnd", "rightEnd", "showDateTimeRange", "showAngle"],
+  trend_angle: ["text", "leftEnd", "rightEnd", "showDateTimeRange", "showDistance", "showAngle", ...SAVED_LOOK],
   table: ["cells", "headerRow", ...SAVED_LOOK]
 };
 var NO_COORDINATES_TAB = /* @__PURE__ */ new Set(["rotated_rectangle", "arc", "polyline", "ellipse", "fib_wedge", "flat_top_bottom", "disjoint_channel", "sector", "bars_pattern", "long_position", "short_position", "anchored_vwap", "text", "table", "brush", "highlighter", "path", "emoji", "sticker", "icon", "image"]);
@@ -11311,6 +12011,9 @@ export {
   drawing,
   DARK_THEME,
   BUILT_IN_THEMES,
+  CHART_FACTORY_COLORS,
+  BRAND_UP,
+  BRAND_DOWN,
   parseCssColor,
   DEFAULT_VISIBILITY,
   visibilityPreset,
@@ -11319,15 +12022,20 @@ export {
   visibleAt,
   DEFAULT_STYLE,
   DEFAULT_OPTIONS,
+  SERIAL_VERSION,
   drawingInksOf,
   alphaOf,
   withAlpha,
+  paneIndexOf,
+  paneTopIn,
+  seriesPaneTop,
   viewportOf,
   DrawingManager,
   snapToBar,
   magnetSnap,
   primeImageBitmap,
   BAR_PRICE_SOURCES,
+  volumeText,
   fibLevelColor,
   MIXED_LEVEL_COLORS,
   sharedLevelColor,
@@ -11446,4 +12154,4 @@ export {
   fitScale,
   fittedSize
 };
-//# sourceMappingURL=chunk-C4MEVUNK.js.map
+//# sourceMappingURL=chunk-Q3DCXQDW.js.map