@stocksharp/trading-controls 1.3.0 → 1.4.0

package/dist/sstradingcontrols.js

@@ -24,11 +24,21 @@ var SSTradingControls = (() => {
   var index_exports = {};
   __export(index_exports, {
     ActiveOrdersWidget: () => ActiveOrdersWidget,
+    AreaSeries: () => AreaSeries,
     ControlTypes: () => ControlTypes,
+    CrosshairMode: () => CrosshairMode,
+    DEFAULT_VIEW: () => DEFAULT_VIEW,
+    EquityWidget: () => EquityWidget,
+    HeatDirections: () => HeatDirections,
+    LineSeries: () => LineSeries,
     LogLevels: () => LogLevels,
     LogMonitorWidget: () => LogMonitorWidget,
+    MAX_PITCH: () => MAX_PITCH,
+    MIN_PITCH: () => MIN_PITCH,
     MarketDataLevels: () => MarketDataLevels,
+    OptimizationHeatmapWidget: () => OptimizationHeatmapWidget,
     OptionDeskWidget: () => OptionDeskWidget,
+    OptionSmileWidget: () => OptionSmileWidget,
     OptionTypes: () => OptionTypes,
     OrderBookWidget: () => OrderBookWidget,
     OrderEntrySides: () => OrderEntrySides,
@@ -40,16 +50,20 @@ var SSTradingControls = (() => {
     StatisticsWidget: () => StatisticsWidget,
     StrategiesWidget: () => StrategiesWidget,
     StrategyStates: () => StrategyStates,
+    SurfaceWidget: () => SurfaceWidget,
     TradeFeedWidget: () => TradeFeedWidget,
     TradeHistoryWidget: () => TradeHistoryWidget,
     WatchlistWidget: () => WatchlistWidget,
     aggregateBubbles: () => aggregateBubbles,
     assertHost: () => assertHost,
     buildLogTree: () => buildLogTree,
+    clampView: () => clampView,
     cleanRejectReason: () => cleanRejectReason,
     compressPnl: () => compressPnl,
+    createChart: () => createChart,
     d1: () => d1,
     d2: () => d2,
+    dragView: () => dragView,
     drawPnlCurve: () => drawPnlCurve,
     formatPnl: () => formatPnl,
     formatPrice: () => formatPrice,
@@ -59,9 +73,12 @@ var SSTradingControls = (() => {
     greekPlaces: () => greekPlaces,
     greekScales: () => greekScales,
     greeks: () => greeks,
+    heatScale: () => heatScale,
+    hitHeatmap: () => hitHeatmap,
     impliedVolatility: () => impliedVolatility,
     keepLog: () => keepLog,
     layoutBubbles: () => layoutBubbles,
+    layoutHeatmap: () => layoutHeatmap,
     makeElement: () => makeElement,
     makeGridMenu: () => makeGridMenu,
     makeIcon: () => makeIcon,
@@ -72,9 +89,17 @@ var SSTradingControls = (() => {
     normalPdf: () => normalPdf,
     pnlCurve: () => pnlCurve,
     premium: () => premium,
+    project: () => project,
     scaleChain: () => scaleChain,
     sideGreeks: () => sideGreeks,
-    subtreeOf: () => subtreeOf
+    sideVolatility: () => sideVolatility,
+    sortedChain: () => sortedChain,
+    subtreeOf: () => subtreeOf,
+    surfaceLayout: () => surfaceLayout,
+    tintOf: () => tintOf,
+    toSmileSeries: () => toSmileSeries,
+    valueAt: () => valueAt,
+    zoomView: () => zoomView
   });
 
   // src/trading-host.ts
@@ -150,7 +175,11 @@ var SSTradingControls = (() => {
     Statistics: "statistics",
     LogMonitor: "logMonitor",
     Strategies: "strategies",
-    OptionDesk: "optionDesk"
+    OptionDesk: "optionDesk",
+    OptionSmile: "optionSmile",
+    Equity: "equity",
+    OptimizationHeatmap: "optimizationHeatmap",
+    OptimizationSurface: "optimizationSurface"
   };
 
   // src/formatters.ts
@@ -4438,6 +4467,7 @@ var SSTradingControls = (() => {
     const y = (value) => valueSpan === 0 ? top : bottom - (value - min) / valueSpan * (bottom - top);
     const curve = shown.map((p) => [x(p.time), y(p.value)]);
     const zeroY = y(0);
+    const last = shown[shown.length - 1].value;
     return {
       points: curve,
       // Closed along the baseline rather than along the foot of the box: a run entirely above
@@ -4446,7 +4476,10 @@ var SSTradingControls = (() => {
       zeroY,
       min,
       max,
-      positive: shown[shown.length - 1].value >= 0
+      from: firstTime,
+      to: lastTime,
+      last,
+      positive: last >= 0
     };
   }
   function drawPnlCurve(ctx, curve, box, style) {
@@ -4476,6 +4509,1341 @@ var SSTradingControls = (() => {
     ctx.stroke();
   }
 
+  // src/chart-engine.global.ts
+  function engine() {
+    const found = globalThis.SSChart;
+    if (found === void 0 || found === null) {
+      throw new Error(
+        "The chart panels need @stocksharp/chart. Load its bundle (sschart.js) before sstradingcontrols.js, or import this package from npm rather than as a script."
+      );
+    }
+    return found;
+  }
+  var createChart = (container, options) => engine().createChart(container, options);
+  var AreaSeries = new Proxy({}, {
+    get: (_target, key) => engine().AreaSeries[key]
+  });
+  var LineSeries = new Proxy({}, {
+    get: (_target, key) => engine().LineSeries[key]
+  });
+  var CrosshairMode = new Proxy({}, {
+    get: (_target, key) => engine().CrosshairMode[key]
+  });
+
+  // src/equity-widget.ts
+  var FILL_TOP_ALPHA = 0.28;
+  var FILL_BOTTOM_ALPHA = 0.02;
+  var LINE_WIDTH = 2;
+  function toSeries(points) {
+    const seen = /* @__PURE__ */ new Set();
+    const out = [];
+    for (const point of [...points].sort((a, b) => a.time - b.time)) {
+      if (!Number.isFinite(point.time) || !Number.isFinite(point.value)) continue;
+      const second = Math.floor(point.time / 1e3);
+      if (seen.has(second)) out[out.length - 1] = { time: second, value: point.value };
+      else out.push({ time: second, value: point.value });
+      seen.add(second);
+    }
+    return out;
+  }
+  var _EquityWidget = class _EquityWidget {
+    static create(hostEl, state, deps) {
+      const host = assertHost(deps?.host, "EquityWidget");
+      const root = _EquityWidget._buildRoot(host);
+      root.id = makePanelId(_EquityWidget.TYPE);
+      hostEl.appendChild(root);
+      return new _EquityWidget(root, state || {}, deps);
+    }
+    static _buildRoot(host) {
+      const title = host.t("Equity");
+      return makePanelRoot("equity-panel", title, [
+        makeElement("div", "panel-header", {}, [
+          makeElement("span", "", {}, [title]),
+          makeElement("span", "equity-last", {}, []),
+          makeIconButton("bt-icon-btn equity-reset-btn", host.t("ResetView"), "bi-arrow-clockwise", { type: "button" }),
+          makeIconButton("bt-icon-btn bt-icon-cancel panel-close-btn", host.t("ClosePanel"), "bi-x", { type: "button" })
+        ]),
+        makeElement("div", "panel-body", {}, [
+          makeElement("div", "equity-chart", { role: "img", "aria-label": host.t("PnLChart") }, [
+            // Over the curve rather than in the panel header, for the same reason the
+            // smile's is: a reading about a moment belongs beside that moment, and a host
+            // that lifts panel headers into a tab strip would put it in a tab title.
+            makeElement("div", "equity-hover", {}, []),
+            makeElement("div", "equity-empty", {}, [host.t("NoEquity")])
+          ])
+        ])
+      ]);
+    }
+    constructor(rootEl, _state, deps) {
+      this._host = assertHost(deps?.host, "EquityWidget");
+      this.rootEl = rootEl;
+      this._closeBtn = this.rootEl.querySelector(".panel-close-btn");
+      this._resetBtn = this.rootEl.querySelector(".equity-reset-btn");
+      this._lastEl = this.rootEl.querySelector(".equity-last");
+      this._hoverEl = this.rootEl.querySelector(".equity-hover");
+      this._emptyEl = this.rootEl.querySelector(".equity-empty");
+      this._chartEl = this.rootEl.querySelector(".equity-chart");
+      this._chart = null;
+      this._series = null;
+      this._points = [];
+      this._resizeObserver = null;
+      this._closeBtn?.addEventListener("click", (e) => {
+        e.preventDefault();
+        this._host.close();
+      });
+      this._resetBtn?.addEventListener("click", (e) => {
+        e.preventDefault();
+        this.resetZoom();
+      });
+      if (this._chartEl !== null && typeof ResizeObserver !== "undefined") {
+        this._resizeObserver = new ResizeObserver(() => this._fit());
+        this._resizeObserver.observe(this._chartEl);
+      }
+      this._render();
+      this._host.register(this);
+    }
+    dispose() {
+      try {
+        this._resizeObserver?.disconnect();
+      } catch {
+      }
+      this._resizeObserver = null;
+      try {
+        this._chart?.remove();
+      } catch {
+      }
+      this._chart = null;
+      this._series = null;
+      this._host.unregister(this);
+      try {
+        this.rootEl.remove();
+      } catch {
+      }
+    }
+    /// Show this run. The whole curve at once: it is a cumulative figure, so a set of points that
+    /// no longer contains an earlier sample is a different run rather than a longer one.
+    ///
+    /// `time` is unix milliseconds.
+    update(points) {
+      this._points = points || [];
+      this._render();
+    }
+    /// Show the whole run again, after a zoom.
+    resetZoom() {
+      try {
+        this._chart?.timeScale().fitContent();
+      } catch {
+      }
+    }
+    /// The engine, for a host that wants to add to this chart - a benchmark line, a marker at a
+    /// drawdown. Null until there is something to draw.
+    chart() {
+      return this._chart;
+    }
+    // Built on first use rather than in the constructor: the engine measures its container, and
+    // a panel that has not been laid out yet has none.
+    _ensureChart() {
+      if (this._chart !== null) return true;
+      if (this._chartEl === null) return false;
+      const palette = this._host.presentation.canvasPalette();
+      this._chart = createChart(this._chartEl, {
+        layout: {
+          background: { type: "solid", color: "transparent" },
+          textColor: palette.grid,
+          fontFamily: palette.font,
+          fontSize: 11,
+          attributionLogo: false
+        },
+        grid: { vertLines: { color: palette.grid }, horzLines: { color: palette.grid } },
+        crosshair: { mode: CrosshairMode.Normal },
+        rightPriceScale: { borderColor: palette.grid },
+        timeScale: {
+          borderColor: palette.grid,
+          timeVisible: true,
+          secondsVisible: true,
+          // The engine dates an axis in UTC unless told otherwise, and everything else on
+          // the page - the readout beside this one included - reads in the browser's zone.
+          // Two labels for one instant, three hours apart, is worse than either.
+          timeZone: browserTimeZone()
+        }
+      });
+      this._series = this._chart.addSeries(AreaSeries, {
+        lineWidth: LINE_WIDTH,
+        lineColor: palette.up,
+        topColor: withAlpha(palette.up, FILL_TOP_ALPHA),
+        bottomColor: withAlpha(palette.up, FILL_BOTTOM_ALPHA)
+      });
+      this._chart.subscribeCrosshairMove((param) => this._renderHover(param));
+      return true;
+    }
+    _render() {
+      const series = toSeries(this._points);
+      const empty = series.length < 2;
+      if (this._emptyEl !== null) this._emptyEl.hidden = !empty;
+      this._renderLast(empty ? null : series[series.length - 1].value);
+      if (empty) return;
+      if (!this._ensureChart() || this._series === null) return;
+      const palette = this._host.presentation.canvasPalette();
+      const last = series[series.length - 1].value;
+      const colour = last >= 0 ? palette.up : palette.down;
+      this._series.applyOptions({
+        lineColor: colour,
+        topColor: withAlpha(colour, FILL_TOP_ALPHA),
+        bottomColor: withAlpha(colour, FILL_BOTTOM_ALPHA)
+      });
+      this._series.setData(series);
+      this._fit();
+    }
+    _fit() {
+      if (this._chart === null || this._chartEl === null) return;
+      const rect = this._chartEl.getBoundingClientRect();
+      if (rect.width <= 0 || rect.height <= 0) return;
+      try {
+        this._chart.resize(rect.width, rect.height);
+      } catch {
+      }
+    }
+    // Where the run stands, in the header.
+    _renderLast(value) {
+      const el = this._lastEl;
+      if (el === null) return;
+      el.textContent = value === null ? "" : formatPnl(value);
+      el.className = value === null ? "equity-last" : `equity-last ${this._host.presentation.pnlClass(value)}`;
+    }
+    // What the pointer is over. The engine hands over the moment and the value at it; the moment
+    // is worded by the host, because what a time reads as is the page's business and not this
+    // package's.
+    _renderHover(param) {
+      const el = this._hoverEl;
+      if (el === null) return;
+      const point = this._series === null ? void 0 : param.seriesData.get(this._series);
+      const value = point?.value;
+      if (param.time === null || value === void 0 || !Number.isFinite(value)) {
+        el.textContent = "";
+        el.className = "equity-hover";
+        return;
+      }
+      const moment = new Date(Number(param.time) * 1e3);
+      el.textContent = `${this._host.presentation.timeText(moment)}  ${formatPnl(value)}`;
+      el.className = `equity-hover ${this._host.presentation.pnlClass(value)}`;
+    }
+  };
+  _EquityWidget.TYPE = ControlTypes.Equity;
+  var EquityWidget = _EquityWidget;
+  function browserTimeZone() {
+    try {
+      return Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC";
+    } catch {
+      return "UTC";
+    }
+  }
+  function withAlpha(colour, alpha) {
+    return `color-mix(in srgb, ${colour} ${Math.round(alpha * 100)}%, transparent)`;
+  }
+
+  // src/statistics-widget.ts
+  function rank(rows) {
+    const first = /* @__PURE__ */ new Map();
+    for (const row of rows) {
+      const seen = first.get(row.category);
+      if (seen === void 0 || row.order < seen) first.set(row.category, row.order);
+    }
+    return rows.map((row) => ({ ...row, categoryRank: first.get(row.category) ?? row.order }));
+  }
+  var _StatisticsWidget = class _StatisticsWidget {
+    static create(hostEl, state, deps) {
+      const host = assertHost(deps?.host, "StatisticsWidget");
+      const root = _StatisticsWidget._buildRoot(host);
+      root.id = makePanelId(_StatisticsWidget.TYPE);
+      hostEl.appendChild(root);
+      return new _StatisticsWidget(root, state || {}, deps);
+    }
+    // The panel's markup. No rail action but the export: a statistic is produced by the
+    // strategy and there is nothing here to cancel, reload or edit.
+    static _buildRoot(host) {
+      const title = host.t("Statistics");
+      return makePanelRoot("statistics-panel", title, [
+        makeElement("div", "panel-header", {}, [
+          makeElement("span", "", {}, [title]),
+          makeIconButton("bt-icon-btn bt-icon-cancel panel-close-btn", host.t("ClosePanel"), "bi-x", { type: "button" })
+        ]),
+        makeElement("div", "panel-body panel-body-with-rail", {}, [
+          makeElement("div", "panel-body-content", {}, [
+            makeElement("table", "terminal-table statistics-table", { role: "table", "aria-label": host.t("StatisticsList") }, [
+              makeElement("thead", "", {}, []),
+              makeElement("tbody", "statistics-body", {}, [])
+            ])
+          ]),
+          makeElement("div", "panel-rail", { role: "toolbar", "aria-label": host.t("StatisticsActions") }, [
+            makeIconButton("bt-icon-btn panel-export-btn", host.t("ExportToExcel"), "bi-file-earmark-spreadsheet", {})
+          ])
+        ])
+      ]);
+    }
+    constructor(rootEl, _state, deps) {
+      this._host = assertHost(deps?.host, "StatisticsWidget");
+      this.rootEl = rootEl;
+      this.el = this.rootEl.querySelector(".statistics-body");
+      this._closeBtn = this.rootEl.querySelector(".panel-close-btn");
+      this._exportBtn = this.rootEl.querySelector(".panel-export-btn");
+      this._rows = [];
+      this._closeBtn?.addEventListener("click", (e) => {
+        e.preventDefault();
+        this._host.close();
+      });
+      this._exportBtn?.addEventListener("click", (e) => {
+        e.preventDefault();
+        this._export();
+      });
+      const head = this.rootEl.querySelector(".statistics-table thead");
+      this._grid = head && this.el ? new DataGrid({
+        head,
+        body: this.el,
+        columns: this._columns(),
+        // Not a sort the reader chose: the registry hands every parameter an order, and
+        // the bands it assigns are what puts profit above drawdown above trade counts.
+        defaultSort: { col: "order", dir: "asc" },
+        rowKey: (r) => String(r.key),
+        emptyText: this._host.t("NoStatistics"),
+        contextMenu: makeGridMenu(this._host),
+        // The groups sit where the registry order puts them, not where the
+        // alphabet would: profit, then trades, then positions, then orders.
+        groupOrder: "rows",
+        selection: "multi"
+      }) : null;
+      this._grid?.setState({ group: "category", hidden: ["category", "order"] });
+      this._host.register(this);
+    }
+    dispose() {
+      this._grid?.destroy();
+      this._host.unregister(this);
+      try {
+        this.rootEl.remove();
+      } catch {
+      }
+    }
+    /// Show these statistics. The whole set at once: a strategy publishes its parameters as one
+    /// table and a row that vanished from it has stopped existing, not stopped changing.
+    update(rows) {
+      this._rows = rank(rows || []);
+      this._grid?.setRows(this._rows);
+    }
+    _export() {
+      this._grid?.download("statistics", this._host.t("Statistics"));
+    }
+    // Two visible columns and one that only groups. The order column is hidden as well: it
+    // decides the sort and means nothing to a reader.
+    _columns() {
+      const label = (key) => this._host.t(key);
+      return [
+        {
+          key: "category",
+          header: label("Category"),
+          exportable: false,
+          // The group's place, not its name: groups are laid out in the order the
+          // registry gives their parameters, so profit comes before trade counts.
+          // Grouping on the name would order them alphabetically, and on the
+          // translated name would reorder them with the reader's language.
+          value: (r) => r.categoryRank,
+          text: (r) => r.categoryText || r.category
+        },
+        {
+          key: "order",
+          header: label("Order"),
+          exportable: false,
+          value: (r) => r.order
+        },
+        {
+          key: "name",
+          header: label("Name"),
+          exportable: true,
+          value: (r) => r.name,
+          bindCell: (td, r) => {
+            if (r.description) td.setAttribute("title", r.description);
+          }
+        },
+        {
+          key: "value",
+          header: label("Value"),
+          exportable: true,
+          cellClass: () => "statistic-value",
+          // Sorts on the raw value so a number sorts as a number, reads as the text below.
+          value: (r) => r.value,
+          render: (r) => formatStatistic(r.value),
+          exportValue: (r) => r.value ?? ""
+        }
+      ];
+    }
+  };
+  _StatisticsWidget.TYPE = ControlTypes.Statistics;
+  var StatisticsWidget = _StatisticsWidget;
+  function formatStatistic(value) {
+    if (value === null || value === void 0 || value === "") return "";
+    if (typeof value === "number") {
+      if (!isFinite(value)) return "";
+      return String(Math.round(value * 100) / 100);
+    }
+    if (value instanceof Date) return isoDate(value);
+    if (typeof value === "string") {
+      const at = /^\d{4}-\d{2}-\d{2}([T ]|$)/.test(value) ? new Date(value) : null;
+      if (at !== null && !isNaN(at.getTime())) return isoDate(at);
+      return value;
+    }
+    return String(value);
+  }
+  function isoDate(at) {
+    return at.toISOString().slice(0, 10);
+  }
+
+  // src/heatmap-grid.ts
+  var HeatDirections = {
+    Higher: "higher",
+    Lower: "lower"
+  };
+  var LEFT_GUTTER = 54;
+  var RIGHT_PAD = 6;
+  var TOP_BAND = 26;
+  var BOTTOM_BAND = 30;
+  var TICK_GAP = 4;
+  var LABEL_HEIGHT = 13;
+  var CELL_INSET = 0.5;
+  var LEGEND_WIDTH = 140;
+  var LEGEND_HEIGHT = 8;
+  var LEGEND_Y = 14;
+  var LEGEND_STEPS = 28;
+  var MIN_TICK_WIDTH = 34;
+  var MIN_TICK_HEIGHT = 13;
+  var NUMERIC = /^[+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][+-]?\d+)?\s*%?$/;
+  function foldCells(cells) {
+    const folded = /* @__PURE__ */ new Map();
+    const order = [];
+    for (const cell of cells) {
+      if (cell === null || cell === void 0 || !Number.isFinite(cell.value)) continue;
+      const id = pairKey(cell.x, cell.y);
+      const found = folded.get(id);
+      if (found === void 0) {
+        folded.set(id, { x: cell.x, y: cell.y, sum: cell.value, count: 1 });
+        order.push(id);
+      } else {
+        found.sum += cell.value;
+        found.count += 1;
+      }
+    }
+    return order.map((id) => {
+      const fold = folded.get(id);
+      return { x: fold.x, y: fold.y, value: fold.sum / fold.count, count: fold.count };
+    });
+  }
+  function axisValues(values) {
+    const unique = [];
+    const seen = /* @__PURE__ */ new Set();
+    for (const value of values) {
+      if (seen.has(value)) continue;
+      seen.add(value);
+      unique.push(value);
+    }
+    if (unique.every((value) => NUMERIC.test(value)))
+      return unique.sort((left, right) => numberOf(left) - numberOf(right));
+    return unique.sort((left, right) => left < right ? -1 : left > right ? 1 : 0);
+  }
+  function heatScale(buckets) {
+    let min = Infinity;
+    let max = -Infinity;
+    for (const bucket of buckets) {
+      if (bucket.value < min) min = bucket.value;
+      if (bucket.value > max) max = bucket.value;
+    }
+    if (!isFinite(min) || !isFinite(max)) {
+      min = 0;
+      max = 0;
+    }
+    const anchor = min <= 0 && max >= 0 ? 0 : (min + max) / 2;
+    const reach = Math.max(Math.abs(max - anchor), Math.abs(anchor - min));
+    return { anchor, reach: reach > 0 ? reach : 1, min, max };
+  }
+  function tintOf(value, scale, betterWhen) {
+    const distance = (value - scale.anchor) / scale.reach;
+    const signed = betterWhen === HeatDirections.Lower ? -distance : distance;
+    return Math.max(-1, Math.min(1, signed));
+  }
+  function valueAt(tint, scale, betterWhen) {
+    const distance = betterWhen === HeatDirections.Lower ? -tint : tint;
+    return scale.anchor + distance * scale.reach;
+  }
+  function layoutHeatmap(input) {
+    const buckets = foldCells(input.cells);
+    if (buckets.length === 0) return null;
+    const columns = axisValues(buckets.map((bucket) => bucket.x));
+    const rows = axisValues(buckets.map((bucket) => bucket.y));
+    const scale = heatScale(buckets);
+    const plot = {
+      x: LEFT_GUTTER,
+      y: TOP_BAND,
+      width: Math.max(1, input.width - LEFT_GUTTER - RIGHT_PAD),
+      height: Math.max(1, input.height - TOP_BAND - BOTTOM_BAND)
+    };
+    const cellWidth = plot.width / columns.length;
+    const cellHeight = plot.height / rows.length;
+    const rectOf = (column, row) => ({
+      x: plot.x + column * cellWidth + CELL_INSET,
+      // Row 0 sits at the FOOT of the plot: this is a chart, and a chart's Y grows upward. A
+      // table would put it at the top, and then the map and its axis would disagree about
+      // which corner is which.
+      y: plot.y + plot.height - (row + 1) * cellHeight + CELL_INSET,
+      width: Math.max(1, cellWidth - CELL_INSET * 2),
+      height: Math.max(1, cellHeight - CELL_INSET * 2)
+    });
+    const measured = new Map(buckets.map((bucket) => [pairKey(bucket.x, bucket.y), bucket]));
+    const cells = [];
+    const gaps = [];
+    for (let row = 0; row < rows.length; row++) {
+      for (let column = 0; column < columns.length; column++) {
+        const bucket = measured.get(pairKey(columns[column], rows[row]));
+        if (bucket === void 0) {
+          gaps.push({ x: columns[column], y: rows[row], rect: rectOf(column, row) });
+          continue;
+        }
+        cells.push({
+          bucket,
+          rect: rectOf(column, row),
+          tint: tintOf(bucket.value, scale, input.betterWhen),
+          best: false
+        });
+      }
+    }
+    let best = cells[0];
+    for (const shape of cells) if (shape.tint > best.tint) best = shape;
+    best.best = true;
+    const xTicks = tickIndices(columns.length, tickStep(columns.length, plot.width, MIN_TICK_WIDTH)).map((index) => ({
+      text: columns[index],
+      x: plot.x + (index + 0.5) * cellWidth,
+      y: plot.y + plot.height + TICK_GAP
+    }));
+    const yTicks = tickIndices(rows.length, tickStep(rows.length, plot.height, MIN_TICK_HEIGHT)).map((index) => ({
+      text: rows[index],
+      x: plot.x - TICK_GAP,
+      y: plot.y + plot.height - (index + 0.5) * cellHeight
+    }));
+    return {
+      plot,
+      columns,
+      rows,
+      cells,
+      gaps,
+      xTicks,
+      yTicks,
+      xTitle: { text: input.xLabel, x: plot.x + plot.width / 2, y: plot.y + plot.height + TICK_GAP + LABEL_HEIGHT },
+      // Above the plot rather than beside it: a title down the left edge would have to be
+      // rotated, and a rotation is a transform the control would then have to unwind around
+      // everything else it draws.
+      yTitle: { text: input.yLabel, x: 0, y: 0 },
+      legend: legendOf(plot, scale, input.betterWhen),
+      scale
+    };
+  }
+  function hitHeatmap(layout, x, y) {
+    for (const shape of layout.cells) {
+      const rect = shape.rect;
+      if (x >= rect.x && x <= rect.x + rect.width && y >= rect.y && y <= rect.y + rect.height)
+        return shape;
+    }
+    return null;
+  }
+  function legendOf(plot, scale, betterWhen) {
+    const right = plot.x + plot.width;
+    const left = Math.max(plot.x, right - LEGEND_WIDTH);
+    const stepWidth = (right - left) / LEGEND_STEPS;
+    const steps = [];
+    for (let step = 0; step < LEGEND_STEPS; step++) {
+      steps.push({
+        // Half a pixel of overlap: abutting fills leave a seam wherever the boundary is
+        // fractional, and a key with a comb of background through it reads as a scale with
+        // holes in it.
+        rect: { x: left + step * stepWidth, y: LEGEND_Y, width: stepWidth + 0.5, height: LEGEND_HEIGHT },
+        tint: -1 + 2 * step / (LEGEND_STEPS - 1)
+      });
+    }
+    return {
+      steps,
+      low: { value: valueAt(-1, scale, betterWhen), x: left, y: 0 },
+      anchor: { value: scale.anchor, x: (left + right) / 2, y: 0 },
+      high: { value: valueAt(1, scale, betterWhen), x: right, y: 0 }
+    };
+  }
+  function tickStep(count, span, room) {
+    const slots = Math.max(1, Math.floor(span / room));
+    return Math.max(1, Math.ceil(count / slots));
+  }
+  function tickIndices(count, step) {
+    const indices = [];
+    for (let index = 0; index < count; index += step) indices.push(index);
+    const last = count - 1;
+    if (indices[indices.length - 1] !== last) {
+      if (last - indices[indices.length - 1] < step) indices.pop();
+      indices.push(last);
+    }
+    return indices;
+  }
+  function pairKey(x, y) {
+    return `${x}\0${y}`;
+  }
+  function numberOf(value) {
+    return Number(value.trim().replace(/%$/, ""));
+  }
+
+  // src/optimization-heatmap-widget.ts
+  var GROUND_ALPHA = 0.1;
+  var GAP_ALPHA = 0.25;
+  var LABEL_ALPHA = 0.65;
+  var BEST_WIDTH = 2;
+  var TOOLTIP_OFFSET = 12;
+  var TOOLTIP_MARGIN = 4;
+  var _OptimizationHeatmapWidget = class _OptimizationHeatmapWidget {
+    static create(hostEl, state, deps) {
+      const host = assertHost(deps?.host, "OptimizationHeatmapWidget");
+      const root = _OptimizationHeatmapWidget._buildRoot(host);
+      root.id = makePanelId(_OptimizationHeatmapWidget.TYPE);
+      hostEl.appendChild(root);
+      return new _OptimizationHeatmapWidget(root, state || {}, deps);
+    }
+    // The panel's markup. The metric's name sits in the header rather than on the canvas: it is
+    // the caption the drawn legend is read against, and putting it in the chrome costs the map
+    // no pixels and leaves the text selectable and sized by the stylesheet.
+    static _buildRoot(host) {
+      const title = host.t("OptimizationHeatmap");
+      return makePanelRoot("optimization-heatmap-panel", title, [
+        makeElement("div", "panel-header", {}, [
+          makeElement("span", "", {}, [title]),
+          makeElement("span", "heatmap-metric", {}, []),
+          makeIconButton("bt-icon-btn bt-icon-cancel panel-close-btn", host.t("ClosePanel"), "bi-x", { type: "button" })
+        ]),
+        makeElement("div", "panel-body", {}, [
+          makeElement("canvas", "heatmap-canvas", { role: "img", "aria-label": host.t("OptimizationHeatmapChart") }, []),
+          makeElement("div", "heatmap-empty", { hidden: "" }, [host.t("NoOptimizationResults")]),
+          makeElement("div", "heatmap-tooltip", { role: "tooltip", hidden: "" }, [])
+        ])
+      ]);
+    }
+    constructor(rootEl, _state, deps) {
+      this._host = assertHost(deps?.host, "OptimizationHeatmapWidget");
+      this.rootEl = rootEl;
+      this.canvasEl = this.rootEl.querySelector(".heatmap-canvas");
+      this._metricEl = this.rootEl.querySelector(".heatmap-metric");
+      this._emptyEl = this.rootEl.querySelector(".heatmap-empty");
+      this._tooltipEl = this.rootEl.querySelector(".heatmap-tooltip");
+      this._closeBtn = this.rootEl.querySelector(".panel-close-btn");
+      this._ctx = this.canvasEl?.getContext("2d") ?? null;
+      this._data = null;
+      this._layout = null;
+      this._size = null;
+      this._resizeObserver = null;
+      this._closeBtn?.addEventListener("click", (e) => {
+        e.preventDefault();
+        this._host.close();
+      });
+      this._bindHover();
+      this._setEmpty(true);
+      if (this.canvasEl && typeof ResizeObserver === "function") {
+        this._resizeObserver = new ResizeObserver(() => this._render());
+        this._resizeObserver.observe(this.canvasEl);
+      }
+      this._host.register(this);
+    }
+    dispose() {
+      try {
+        this._resizeObserver?.disconnect();
+      } catch {
+      }
+      this._host.unregister(this);
+      try {
+        this.rootEl.remove();
+      } catch {
+      }
+    }
+    /// Show this map. The whole of it at once: a pair that has dropped out of the set has stopped
+    /// existing, and leaving its cell behind would report a run that is no longer in the report.
+    update(data) {
+      this._data = data;
+      if (this._metricEl !== null) this._metricEl.textContent = data.metricLabel;
+      this._hideTooltip();
+      this._render();
+    }
+    // The canvas in CSS pixels, and its backing store in device pixels. Without the second the
+    // map is drawn at a third of the resolution the screen has, and a lattice of hairlines is
+    // exactly the drawing that shows it.
+    _sizeCanvas() {
+      const canvas = this.canvasEl;
+      if (!canvas) return;
+      const rect = canvas.getBoundingClientRect();
+      const ratio = typeof devicePixelRatio === "number" && devicePixelRatio > 0 ? devicePixelRatio : 1;
+      const width = Math.max(1, Math.floor(rect.width));
+      const height = Math.max(1, Math.floor(rect.height));
+      if (canvas.width !== width * ratio || canvas.height !== height * ratio) {
+        canvas.width = width * ratio;
+        canvas.height = height * ratio;
+        this._ctx?.setTransform(ratio, 0, 0, ratio, 0, 0);
+      }
+      this._size = { width, height };
+    }
+    _render() {
+      const ctx = this._ctx;
+      if (ctx === null) return;
+      this._sizeCanvas();
+      const size = this._size;
+      if (size === null) return;
+      ctx.clearRect(0, 0, size.width, size.height);
+      this._layout = null;
+      const data = this._data;
+      if (data === null) {
+        this._setEmpty(true);
+        return;
+      }
+      const layout = layoutHeatmap({
+        width: size.width,
+        height: size.height,
+        cells: data.cells,
+        betterWhen: data.betterWhen,
+        xLabel: data.xLabel,
+        yLabel: data.yLabel
+      });
+      this._setEmpty(layout === null);
+      if (layout === null) return;
+      this._layout = layout;
+      const palette = this._host.presentation.canvasPalette();
+      ctx.font = palette.font;
+      ctx.lineWidth = 1;
+      for (const shape of layout.cells) this._paintTint(ctx, shape.rect, shape.tint, palette.grid, palette.up, palette.down);
+      ctx.globalAlpha = GAP_ALPHA;
+      ctx.strokeStyle = palette.grid;
+      for (const gap of layout.gaps) {
+        ctx.beginPath();
+        ctx.moveTo(gap.rect.x, gap.rect.y + gap.rect.height);
+        ctx.lineTo(gap.rect.x + gap.rect.width, gap.rect.y);
+        ctx.stroke();
+      }
+      const best = layout.cells.find((shape) => shape.best);
+      if (best !== void 0) {
+        ctx.globalAlpha = 1;
+        ctx.strokeStyle = palette.grid;
+        ctx.lineWidth = BEST_WIDTH;
+        _OptimizationHeatmapWidget._outline(ctx, best.rect, BEST_WIDTH / 2);
+        ctx.lineWidth = 1;
+      }
+      for (const step of layout.legend.steps)
+        this._paintTint(ctx, step.rect, step.tint, palette.grid, palette.up, palette.down);
+      ctx.globalAlpha = LABEL_ALPHA;
+      ctx.fillStyle = palette.grid;
+      ctx.textBaseline = "top";
+      ctx.textAlign = "center";
+      for (const tick of layout.xTicks) ctx.fillText(tick.text, tick.x, tick.y);
+      ctx.fillText(layout.xTitle.text, layout.xTitle.x, layout.xTitle.y);
+      ctx.fillText(formatStatistic(layout.legend.anchor.value), layout.legend.anchor.x, layout.legend.anchor.y);
+      ctx.textAlign = "left";
+      ctx.fillText(layout.yTitle.text, layout.yTitle.x, layout.yTitle.y);
+      ctx.fillText(formatStatistic(layout.legend.low.value), layout.legend.low.x, layout.legend.low.y);
+      ctx.textAlign = "right";
+      ctx.fillText(formatStatistic(layout.legend.high.value), layout.legend.high.x, layout.legend.high.y);
+      ctx.textBaseline = "middle";
+      for (const tick of layout.yTicks) ctx.fillText(tick.text, tick.x, tick.y);
+      ctx.globalAlpha = 1;
+    }
+    // The ground, then as much of the direction colour as the cell earned. Two fills rather than
+    // one blended colour: blending would need a background this control is not allowed to know.
+    _paintTint(ctx, rect, tint, ground, up, down) {
+      ctx.globalAlpha = GROUND_ALPHA;
+      ctx.fillStyle = ground;
+      ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
+      if (tint === 0) return;
+      ctx.globalAlpha = Math.abs(tint);
+      ctx.fillStyle = tint > 0 ? up : down;
+      ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
+    }
+    static _outline(ctx, rect, inset) {
+      const left = rect.x + inset;
+      const top = rect.y + inset;
+      const right = rect.x + rect.width - inset;
+      const bottom = rect.y + rect.height - inset;
+      ctx.beginPath();
+      ctx.moveTo(left, top);
+      ctx.lineTo(right, top);
+      ctx.lineTo(right, bottom);
+      ctx.lineTo(left, bottom);
+      ctx.closePath();
+      ctx.stroke();
+    }
+    _setEmpty(empty) {
+      if (this._emptyEl === null) return;
+      if (empty) this._emptyEl.removeAttribute("hidden");
+      else this._emptyEl.setAttribute("hidden", "");
+    }
+    _bindHover() {
+      const canvas = this.canvasEl;
+      if (!canvas) return;
+      canvas.addEventListener("mousemove", (e) => {
+        const layout = this._layout;
+        if (layout === null) {
+          this._hideTooltip();
+          return;
+        }
+        const rect = canvas.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        const hit = hitHeatmap(layout, x, y);
+        if (hit !== null) this._showTooltip(hit, x, y);
+        else this._hideTooltip();
+      });
+      canvas.addEventListener("mouseleave", () => this._hideTooltip());
+    }
+    _showTooltip(shape, x, y) {
+      const tooltip = this._tooltipEl;
+      const canvas = this.canvasEl;
+      const data = this._data;
+      if (!tooltip || !canvas || data === null) return;
+      const lines = [
+        this._tooltipLine(data.xLabel, shape.bucket.x),
+        this._tooltipLine(data.yLabel, shape.bucket.y),
+        this._tooltipLine(data.metricLabel, formatStatistic(shape.bucket.value))
+      ];
+      if (shape.bucket.count > 1)
+        lines.push(this._tooltipLine(this._host.t("Runs"), String(shape.bucket.count)));
+      if (shape.best)
+        lines.push(makeElement("div", "heatmap-tt-row heatmap-tt-best", {}, [this._host.t("Best")]));
+      tooltip.replaceChildren(...lines);
+      tooltip.removeAttribute("hidden");
+      const canvasRect = canvas.getBoundingClientRect();
+      const parentRect = tooltip.offsetParent?.getBoundingClientRect() ?? canvasRect;
+      const originX = canvasRect.left - parentRect.left;
+      const originY = canvasRect.top - parentRect.top;
+      const maxX = originX + canvasRect.width - tooltip.offsetWidth - TOOLTIP_MARGIN;
+      const maxY = originY + canvasRect.height - tooltip.offsetHeight - TOOLTIP_MARGIN;
+      tooltip.style.left = `${Math.max(0, Math.min(originX + x + TOOLTIP_OFFSET, maxX))}px`;
+      tooltip.style.top = `${Math.max(0, Math.min(originY + y + TOOLTIP_OFFSET, maxY))}px`;
+    }
+    _tooltipLine(label, value) {
+      return makeElement("div", "heatmap-tt-row", {}, [
+        makeElement("span", "heatmap-tt-label", {}, [label]),
+        makeElement("span", "heatmap-tt-value", {}, [value])
+      ]);
+    }
+    _hideTooltip() {
+      this._tooltipEl?.setAttribute("hidden", "");
+    }
+  };
+  _OptimizationHeatmapWidget.TYPE = ControlTypes.OptimizationHeatmap;
+  var OptimizationHeatmapWidget = _OptimizationHeatmapWidget;
+
+  // src/surface-grid.ts
+  var MIN_PITCH = 0.12;
+  var MAX_PITCH = 1.45;
+  var DEFAULT_VIEW = { yaw: -0.7, pitch: 0.62, zoom: 1 };
+  var DRAG_TO_RADIANS = 8e-3;
+  var MIN_ZOOM = 0.4;
+  var MAX_ZOOM = 4;
+  function clampView(view) {
+    const twoPi = Math.PI * 2;
+    return {
+      // Wrapped rather than clamped: turning the surface right round is a gesture a reader
+      // makes on purpose, to see the far side of a ridge.
+      yaw: (view.yaw % twoPi + twoPi) % twoPi,
+      pitch: Math.min(MAX_PITCH, Math.max(MIN_PITCH, view.pitch)),
+      zoom: Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, view.zoom))
+    };
+  }
+  function dragView(view, dx, dy) {
+    return clampView({
+      yaw: view.yaw + dx * DRAG_TO_RADIANS,
+      // Dragging down tips the surface towards a top view, which is the direction the gesture
+      // suggests: the far edge comes up to meet the pointer.
+      pitch: view.pitch + dy * DRAG_TO_RADIANS,
+      zoom: view.zoom
+    });
+  }
+  function zoomView(view, factor) {
+    return clampView({ yaw: view.yaw, pitch: view.pitch, zoom: view.zoom * factor });
+  }
+  function project(nx, ny, nz, view, box) {
+    const cy = Math.cos(view.yaw);
+    const sy = Math.sin(view.yaw);
+    const rx = nx * cy - ny * sy;
+    const ry = nx * sy + ny * cy;
+    const cp = Math.cos(view.pitch);
+    const sp = Math.sin(view.pitch);
+    const span = Math.min(box.width, box.height) / 2;
+    const unit = span * view.zoom / Math.SQRT2;
+    return {
+      x: box.width / 2 + rx * unit,
+      // Screen y grows downward, so height subtracts.
+      y: box.height / 2 + (ry * sp - nz * cp) * unit,
+      // Larger is nearer the viewer.
+      depth: ry * cp + nz * sp
+    };
+  }
+  function surfaceLayout(input) {
+    const buckets = foldCells(input.cells);
+    if (buckets.length === 0) return null;
+    const xValues = axisOrder(buckets.map((b) => b.x));
+    const yValues = axisOrder(buckets.map((b) => b.y));
+    if (xValues.length < 2 || yValues.length < 2) return null;
+    const scale = heatScale(buckets);
+    const at = /* @__PURE__ */ new Map();
+    for (const bucket of buckets) at.set(`${bucket.x} ${bucket.y}`, bucket);
+    const box = { width: input.width, height: input.height };
+    const view = clampView(input.view);
+    const corners = [];
+    const vertices = [];
+    for (let ix = 0; ix < xValues.length; ix++) {
+      const column = [];
+      for (let iy = 0; iy < yValues.length; iy++) {
+        const bucket = at.get(`${xValues[ix]} ${yValues[iy]}`);
+        const tint = bucket === void 0 ? 0 : tintOf(bucket.value, scale, input.betterWhen);
+        const nx = axisPosition(ix, xValues.length);
+        const ny = axisPosition(iy, yValues.length);
+        const point = project(nx, ny, (tint + 1) / 2, view, box);
+        column.push({ ...point, tint });
+        if (bucket !== void 0) {
+          vertices.push({
+            at: [point.x, point.y],
+            x: xValues[ix],
+            y: yValues[iy],
+            value: bucket.value,
+            depth: point.depth
+          });
+        }
+      }
+      corners.push(column);
+    }
+    const quads = [];
+    for (let ix = 0; ix + 1 < xValues.length; ix++) {
+      for (let iy = 0; iy + 1 < yValues.length; iy++) {
+        const near = at.get(`${xValues[ix]} ${yValues[iy]}`);
+        const holes = [
+          near,
+          at.get(`${xValues[ix + 1]} ${yValues[iy]}`),
+          at.get(`${xValues[ix + 1]} ${yValues[iy + 1]}`),
+          at.get(`${xValues[ix]} ${yValues[iy + 1]}`)
+        ];
+        if (near === void 0 || holes.some((b2) => b2 === void 0)) continue;
+        const a = corners[ix][iy];
+        const b = corners[ix + 1][iy];
+        const c = corners[ix + 1][iy + 1];
+        const d = corners[ix][iy + 1];
+        quads.push({
+          points: [[a.x, a.y], [b.x, b.y], [c.x, c.y], [d.x, d.y]],
+          // The mean of the corners, so a face slopes in colour the way it slopes in height
+          // rather than taking the tint of whichever corner happened to be first.
+          tint: (a.tint + b.tint + c.tint + d.tint) / 4,
+          depth: (a.depth + b.depth + c.depth + d.depth) / 4,
+          bucket: near
+        });
+      }
+    }
+    quads.sort((p, q) => p.depth - q.depth);
+    const floor = (nx, ny) => {
+      const p = project(nx, ny, 0, view, box);
+      return [p.x, p.y];
+    };
+    const outward = (from, to) => {
+      const centre = floor(0, 0);
+      const midX = (from[0] + to[0]) / 2;
+      const midY = (from[1] + to[1]) / 2;
+      const dx = midX - centre[0];
+      const dy = midY - centre[1];
+      const length = Math.hypot(dx, dy) || 1;
+      return [dx / length, dy / length];
+    };
+    const depthAt = (nx, ny) => project(nx, ny, 0, view, box).depth;
+    const xSide = depthAt(0, -1) >= depthAt(0, 1) ? -1 : 1;
+    const ySide = depthAt(-1, 0) >= depthAt(1, 0) ? -1 : 1;
+    const xEdge = [floor(-1, xSide), floor(1, xSide)];
+    const yEdge = [floor(ySide, -1), floor(ySide, 1)];
+    const xAway = outward(xEdge[0], xEdge[1]);
+    const yAway = outward(yEdge[0], yEdge[1]);
+    const zBottom = project(-ySide, -xSide, 0, view, box);
+    const zTop = project(-ySide, -xSide, 1, view, box);
+    const zAway = outward([zBottom.x, zBottom.y], [zTop.x, zTop.y]);
+    return {
+      quads,
+      vertices,
+      axes: [
+        {
+          from: xEdge[0],
+          to: xEdge[1],
+          axis: "x",
+          ticks: axisTicks(xValues, (i) => floor(axisPosition(i, xValues.length), xSide), xAway)
+        },
+        {
+          from: yEdge[0],
+          to: yEdge[1],
+          axis: "y",
+          ticks: axisTicks(yValues, (i) => floor(ySide, axisPosition(i, yValues.length)), yAway)
+        },
+        {
+          from: [zBottom.x, zBottom.y],
+          to: [zTop.x, zTop.y],
+          axis: "z",
+          // Five marks up the height, which is what the colour scale runs over: the floor is
+          // the worst run and the top the best. Worded by the caller, which knows the metric.
+          ticks: heightTicks(view, box, zAway, -ySide, -xSide)
+        }
+      ],
+      xValues,
+      yValues,
+      scale
+    };
+  }
+  var SURFACE_HEIGHT_TICKS = [0, 0.25, 0.5, 0.75, 1];
+  var MAX_AXIS_TICKS = 8;
+  function axisTicks(values, at, away) {
+    if (values.length === 0) return [];
+    const step = Math.max(1, Math.ceil(values.length / MAX_AXIS_TICKS));
+    const ticks = [];
+    for (let i = 0; i < values.length; i += step) ticks.push({ at: at(i), label: values[i], away });
+    const last = values.length - 1;
+    if (last > 0 && last % step !== 0)
+      ticks.push({ at: at(last), label: values[last], away });
+    return ticks;
+  }
+  function heightTicks(view, box, away, nx, ny) {
+    return SURFACE_HEIGHT_TICKS.map((height) => {
+      const point = project(nx, ny, height, view, box);
+      return { at: [point.x, point.y], label: String(height), away };
+    });
+  }
+  function nearestVertex(vertices, x, y, reach) {
+    let best = null;
+    let bestDistance = reach;
+    for (const vertex of vertices) {
+      const distance = Math.hypot(vertex.at[0] - x, vertex.at[1] - y);
+      if (distance > bestDistance) continue;
+      if (distance === bestDistance && best !== null && vertex.depth <= best.depth) continue;
+      best = vertex;
+      bestDistance = distance;
+    }
+    return best;
+  }
+  function axisOrder(values) {
+    const distinct = [...new Set(values)];
+    const numeric = distinct.every((v) => v.trim() !== "" && isFinite(Number(v)));
+    return numeric ? distinct.sort((a, b) => Number(a) - Number(b)) : distinct.sort((a, b) => a.localeCompare(b));
+  }
+  function axisPosition(index, count) {
+    return count < 2 ? 0 : index / (count - 1) * 2 - 1;
+  }
+
+  // src/surface-widget.ts
+  var FACE_ALPHA = 0.85;
+  var EDGE_ALPHA = 0.35;
+  var FLOOR_ALPHA = 0.5;
+  var EDGE_WIDTH = 1;
+  var LABEL_ALPHA2 = 0.8;
+  var WHEEL_STEP = 1.12;
+  var WHEEL_UNITS_PER_NOTCH = 100;
+  var WHEEL_MAX_NOTCHES = 2;
+  function wheelNotches(deltaY, deltaMode) {
+    if (!Number.isFinite(deltaY) || deltaY === 0) return 0;
+    const perNotch = deltaMode === 1 ? 3 : deltaMode === 2 ? 1 : WHEEL_UNITS_PER_NOTCH;
+    const notches = deltaY / perNotch;
+    return Math.max(-WHEEL_MAX_NOTCHES, Math.min(WHEEL_MAX_NOTCHES, notches));
+  }
+  var TICK_LENGTH = 5;
+  var TICK_GAP2 = 4;
+  var CAPTION_OFFSET = 34;
+  var HOVER_REACH = 22;
+  var HOVER_RING = 5;
+  var _SurfaceWidget = class _SurfaceWidget {
+    static create(hostEl, state, deps) {
+      const host = assertHost(deps?.host, "SurfaceWidget");
+      const root = _SurfaceWidget._buildRoot(host);
+      root.id = makePanelId(_SurfaceWidget.TYPE);
+      hostEl.appendChild(root);
+      return new _SurfaceWidget(root, state || {}, deps);
+    }
+    static _buildRoot(host) {
+      const title = host.t("OptimizationSurface");
+      return makePanelRoot("surface-panel", title, [
+        makeElement("div", "panel-header", {}, [
+          makeElement("span", "", {}, [title]),
+          makeElement("span", "surface-metric", {}, []),
+          makeIconButton("bt-icon-btn surface-reset-btn", host.t("ResetView"), "bi-arrow-clockwise", { type: "button" }),
+          makeIconButton("bt-icon-btn bt-icon-cancel panel-close-btn", host.t("ClosePanel"), "bi-x", { type: "button" })
+        ]),
+        makeElement("div", "panel-body", {}, [
+          makeElement("div", "surface-chart", {}, [
+            makeElement("canvas", "surface-canvas", { role: "img", "aria-label": host.t("OptimizationSurfaceChart") }, []),
+            // Over the canvas rather than in the panel header: a reading about the point
+            // under the pointer belongs beside that point. A host that lifts its panel
+            // headers into a tab strip would otherwise put the reading in a tab title.
+            makeElement("div", "surface-readout", {}, []),
+            makeElement("div", "surface-empty", { hidden: "" }, [host.t("NoOptimizationResults")])
+          ])
+        ])
+      ]);
+    }
+    constructor(rootEl, _state, deps) {
+      this._host = assertHost(deps?.host, "SurfaceWidget");
+      this.rootEl = rootEl;
+      this.canvasEl = this.rootEl.querySelector(".surface-canvas");
+      this._emptyEl = this.rootEl.querySelector(".surface-empty");
+      this._closeBtn = this.rootEl.querySelector(".panel-close-btn");
+      this._resetBtn = this.rootEl.querySelector(".surface-reset-btn");
+      this._ctx = this.canvasEl?.getContext("2d") ?? null;
+      this._data = null;
+      this._layout = null;
+      this._hover = null;
+      this._hoverEl = this.rootEl.querySelector(".surface-readout");
+      this._view = DEFAULT_VIEW;
+      this._resizeObserver = null;
+      this._pointers = /* @__PURE__ */ new Map();
+      this._pinch = 0;
+      this._closeBtn?.addEventListener("click", (e) => {
+        e.preventDefault();
+        this._host.close();
+      });
+      this._resetBtn?.addEventListener("click", (e) => {
+        e.preventDefault();
+        this._view = DEFAULT_VIEW;
+        this._render();
+      });
+      this._bindGestures();
+      if (this.canvasEl !== null && typeof ResizeObserver !== "undefined") {
+        this._resizeObserver = new ResizeObserver(() => this._render());
+        this._resizeObserver.observe(this.canvasEl);
+      }
+      this._host.register(this);
+    }
+    dispose() {
+      this._resizeObserver?.disconnect();
+      this._resizeObserver = null;
+      this._host.unregister(this);
+      try {
+        this.rootEl.remove();
+      } catch {
+      }
+    }
+    /// Show these results. The whole set at once: a surface is one sweep, and half of one drawn
+    /// over the other half would be a landscape of two different runs.
+    update(data) {
+      this._data = data;
+      this._render();
+    }
+    /// The view the surface is currently seen from, so a host can persist it.
+    view() {
+      return { ...this._view };
+    }
+    /// Put the surface back where it started.
+    resetView() {
+      this._view = DEFAULT_VIEW;
+      this._render();
+    }
+    // One pointer turns, two zoom, a wheel zooms. Pointer events cover mouse, pen and touch, so
+    // there is one implementation rather than one per input device.
+    _bindGestures() {
+      const canvas = this.canvasEl;
+      if (canvas === null) return;
+      canvas.addEventListener("pointerdown", (event) => {
+        event.preventDefault();
+        try {
+          canvas.setPointerCapture(event.pointerId);
+        } catch {
+        }
+        this._pointers.set(event.pointerId, { x: event.clientX, y: event.clientY });
+        this._pinch = this._pointerSpread();
+      });
+      canvas.addEventListener("pointermove", (event) => {
+        const previous = this._pointers.get(event.pointerId);
+        if (previous === void 0) return;
+        event.preventDefault();
+        this._pointers.set(event.pointerId, { x: event.clientX, y: event.clientY });
+        if (this._pointers.size >= 2) {
+          const spread = this._pointerSpread();
+          if (this._pinch > 0 && spread > 0) this._view = zoomView(this._view, spread / this._pinch);
+          this._pinch = spread;
+        } else {
+          this._view = dragView(this._view, event.clientX - previous.x, event.clientY - previous.y);
+        }
+        this._render();
+      });
+      const release = (event) => {
+        this._pointers.delete(event.pointerId);
+        this._pinch = this._pointerSpread();
+      };
+      canvas.addEventListener("pointerup", release);
+      canvas.addEventListener("pointercancel", release);
+      canvas.addEventListener("pointerleave", release);
+      canvas.addEventListener("pointermove", (event) => {
+        if (this._pointers.size > 0) return;
+        const box = canvas.getBoundingClientRect();
+        this._setHover(event.clientX - box.left, event.clientY - box.top);
+      });
+      canvas.addEventListener("pointerleave", () => this._setHover(null, null));
+      canvas.addEventListener("wheel", (event) => {
+        event.preventDefault();
+        const notches = wheelNotches(event.deltaY, event.deltaMode);
+        if (notches === 0) return;
+        this._view = zoomView(this._view, Math.pow(WHEEL_STEP, -notches));
+        this._render();
+      }, { passive: false });
+    }
+    // The vertex under the pointer, and a repaint when it changes. Compared by identity of the
+    // grid pair rather than of the object: a re-layout builds new vertices for the same runs.
+    _setHover(x, y) {
+      const found = x === null || y === null || this._layout === null ? null : nearestVertex(this._layout.vertices, x, y, HOVER_REACH);
+      const before = this._hover;
+      const same = before !== null && found !== null && before.x === found.x && before.y === found.y;
+      if (same || before === null && found === null) return;
+      this._hover = found;
+      this._renderHover();
+      this._render();
+    }
+    // Which pair it is and what it measured, in the panel's own strip over the canvas.
+    _renderHover() {
+      const el = this._hoverEl;
+      if (el === null || this._data === null) return;
+      const hover = this._hover;
+      if (hover === null) {
+        el.textContent = "";
+        return;
+      }
+      el.textContent = `${this._data.xLabel} ${hover.x} \xB7 ${this._data.yLabel} ${hover.y}  ${formatPnl(hover.value)}`;
+    }
+    // How far apart the two pointers are, or zero when there are not two.
+    _pointerSpread() {
+      const points = [...this._pointers.values()];
+      if (points.length < 2) return 0;
+      return Math.hypot(points[0].x - points[1].x, points[0].y - points[1].y);
+    }
+    _render() {
+      const canvas = this.canvasEl;
+      const ctx = this._ctx;
+      if (canvas === null || ctx === null) return;
+      const box = canvas.getBoundingClientRect();
+      const width = Math.round(box.width);
+      const height = Math.round(box.height);
+      if (width <= 0 || height <= 0) return;
+      const ratio = typeof window === "undefined" ? 1 : window.devicePixelRatio || 1;
+      canvas.width = Math.round(width * ratio);
+      canvas.height = Math.round(height * ratio);
+      ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
+      ctx.clearRect(0, 0, width, height);
+      const metric = this.rootEl.querySelector(".surface-metric");
+      if (metric !== null) metric.textContent = this._data?.metricLabel ?? "";
+      const layout = this._data === null ? null : surfaceLayout({
+        width,
+        height,
+        cells: this._data.cells,
+        betterWhen: this._data.betterWhen,
+        view: this._view
+      });
+      this._layout = layout;
+      if (this._emptyEl !== null) this._emptyEl.hidden = layout !== null;
+      if (layout === null || this._data === null) {
+        this._hover = null;
+        this._renderHover();
+        return;
+      }
+      const palette = this._host.presentation.canvasPalette();
+      this._drawFloor(ctx, layout, palette.grid);
+      this._drawFaces(ctx, layout, palette);
+      this._drawAxes(ctx, layout, palette);
+      this._drawHover(ctx, palette);
+    }
+    // The three axes: the two the grid is swept over and the one it is measured against, each with
+    // its own marks. A landscape with no numbers on it is a picture of a shape, not a reading.
+    _drawAxes(ctx, layout, palette) {
+      if (this._data === null) return;
+      ctx.font = palette.font;
+      ctx.textBaseline = "middle";
+      ctx.strokeStyle = palette.grid;
+      ctx.fillStyle = palette.grid;
+      ctx.lineWidth = EDGE_WIDTH;
+      for (const axis of layout.axes) {
+        ctx.globalAlpha = LABEL_ALPHA2;
+        for (const tick of axis.ticks) {
+          const [ax, ay] = tick.at;
+          const [dx, dy] = tick.away;
+          ctx.beginPath();
+          ctx.moveTo(ax, ay);
+          ctx.lineTo(ax + dx * TICK_LENGTH, ay + dy * TICK_LENGTH);
+          ctx.stroke();
+          const tx = ax + dx * (TICK_LENGTH + TICK_GAP2);
+          const ty = ay + dy * (TICK_LENGTH + TICK_GAP2);
+          ctx.textAlign = Math.abs(dx) < 0.4 ? "center" : dx > 0 ? "left" : "right";
+          ctx.fillText(this._tickLabel(axis.axis, tick.label, layout), tx, ty);
+        }
+        const midX = (axis.from[0] + axis.to[0]) / 2;
+        const midY = (axis.from[1] + axis.to[1]) / 2;
+        const away = axis.ticks.length > 0 ? axis.ticks[0].away : [0, 1];
+        ctx.globalAlpha = 1;
+        ctx.textAlign = "center";
+        ctx.fillText(
+          this._axisCaption(axis.axis),
+          midX + away[0] * CAPTION_OFFSET,
+          midY + away[1] * CAPTION_OFFSET
+        );
+      }
+      ctx.globalAlpha = 1;
+    }
+    // The vertical axis is measured in the metric, so its 0..1 heights are worded as figures; the
+    // other two carry the parameter values as they were swept.
+    _tickLabel(axis, label, layout) {
+      if (axis !== "z" || this._data === null) return label;
+      const height = Number(label);
+      return formatPnl(valueAt(height * 2 - 1, layout.scale, this._data.betterWhen));
+    }
+    _axisCaption(axis) {
+      if (this._data === null) return "";
+      if (axis === "x") return this._data.xLabel;
+      if (axis === "y") return this._data.yLabel;
+      return this._data.metricLabel;
+    }
+    // A ring on the vertex under the pointer, so the figure in the strip has a place on the
+    // landscape rather than being a number beside a picture.
+    _drawHover(ctx, palette) {
+      const hover = this._hover;
+      if (hover === null) return;
+      ctx.beginPath();
+      ctx.arc(hover.at[0], hover.at[1], HOVER_RING, 0, Math.PI * 2);
+      ctx.strokeStyle = palette.up;
+      ctx.lineWidth = 2;
+      ctx.globalAlpha = 1;
+      ctx.stroke();
+    }
+    // The frame the surface stands on, so a reader can tell which way the grid runs even when
+    // the landscape hides its own edges.
+    _drawFloor(ctx, layout, colour) {
+      ctx.globalAlpha = FLOOR_ALPHA;
+      ctx.strokeStyle = colour;
+      ctx.lineWidth = EDGE_WIDTH;
+      for (const axis of layout.axes) {
+        ctx.beginPath();
+        ctx.moveTo(axis.from[0], axis.from[1]);
+        ctx.lineTo(axis.to[0], axis.to[1]);
+        ctx.stroke();
+      }
+      ctx.globalAlpha = 1;
+    }
+    // Far to near, each face filled by how good it is and outlined so the grid stays legible
+    // where two faces are nearly the same colour.
+    _drawFaces(ctx, layout, palette) {
+      for (const quad of layout.quads) {
+        ctx.beginPath();
+        ctx.moveTo(quad.points[0][0], quad.points[0][1]);
+        for (const [x, y] of quad.points.slice(1)) ctx.lineTo(x, y);
+        ctx.closePath();
+        ctx.globalAlpha = FACE_ALPHA * Math.max(0.18, Math.abs(quad.tint));
+        ctx.fillStyle = quad.tint >= 0 ? palette.up : palette.down;
+        ctx.fill();
+        ctx.globalAlpha = EDGE_ALPHA;
+        ctx.strokeStyle = palette.grid;
+        ctx.lineWidth = EDGE_WIDTH;
+        ctx.stroke();
+      }
+      ctx.globalAlpha = 1;
+    }
+  };
+  _SurfaceWidget.TYPE = ControlTypes.OptimizationSurface;
+  var SurfaceWidget = _SurfaceWidget;
+
   // src/black-scholes.ts
   var OptionTypes = {
     Call: "call",
@@ -4854,6 +6222,219 @@ var SSTradingControls = (() => {
     return `${(value * 100).toFixed(2)}%`;
   }
 
+  // src/option-smile-widget.ts
+  var LINE_WIDTH2 = 2;
+  function sideVolatility(side) {
+    if (side === void 0 || side === null) return null;
+    const last = side.ivLast;
+    if (typeof last === "number" && isFinite(last) && last > 0) return last;
+    const bid = side.ivBid;
+    const ask = side.ivAsk;
+    const quoted = [bid, ask].filter((v) => typeof v === "number" && isFinite(v) && v > 0);
+    if (quoted.length === 0) return null;
+    return quoted.reduce((sum, v) => sum + v, 0) / quoted.length;
+  }
+  function sortedChain(strikes) {
+    return [...strikes].filter((row) => row !== null && row !== void 0 && isFinite(row.strike)).sort((a, b) => a.strike - b.strike);
+  }
+  function toSmileSeries(chain, put) {
+    const out = [];
+    for (const row of chain) {
+      const volatility = sideVolatility(put ? row.put : row.call);
+      if (volatility === null) out.push({ time: row.strike });
+      else out.push({ time: row.strike, value: volatility * 100 });
+    }
+    return out;
+  }
+  var _OptionSmileWidget = class _OptionSmileWidget {
+    static create(hostEl, state, deps) {
+      const host = assertHost(deps?.host, "OptionSmileWidget");
+      const root = _OptionSmileWidget._buildRoot(host);
+      root.id = makePanelId(_OptionSmileWidget.TYPE);
+      hostEl.appendChild(root);
+      return new _OptionSmileWidget(root, state || {}, deps);
+    }
+    static _buildRoot(host) {
+      const title = host.t("OptionSmile");
+      return makePanelRoot("option-smile-panel", title, [
+        makeElement("div", "panel-header", {}, [
+          makeElement("span", "", {}, [title]),
+          makeIconButton("bt-icon-btn option-smile-reset-btn", host.t("ResetView"), "bi-arrow-clockwise", { type: "button" }),
+          makeIconButton("bt-icon-btn bt-icon-cancel panel-close-btn", host.t("ClosePanel"), "bi-x", { type: "button" })
+        ]),
+        makeElement("div", "panel-body", {}, [
+          makeElement("div", "option-smile-legend", {}, [
+            makeElement("span", "option-smile-axis", {}, [host.t("ImpliedVolatility")]),
+            makeElement("span", "option-smile-key", {}, [
+              makeElement("span", "option-smile-dot option-smile-dot-call", {}, []),
+              host.t("Call")
+            ]),
+            makeElement("span", "option-smile-key", {}, [
+              makeElement("span", "option-smile-dot option-smile-dot-put", {}, []),
+              host.t("Put")
+            ]),
+            makeElement("span", "option-smile-spot", {}, [])
+          ]),
+          makeElement("div", "option-smile-chart", { role: "img", "aria-label": host.t("OptionChain") }, [
+            // Over the chart, not in the panel header: a reading about the point under the
+            // pointer belongs beside that point, and a host that lifts panel headers into a
+            // tab strip would otherwise write it into a tab title.
+            makeElement("div", "option-smile-hover", {}, []),
+            makeElement("div", "option-smile-empty", {}, [host.t("NoOptions")])
+          ])
+        ])
+      ]);
+    }
+    constructor(rootEl, _state, deps) {
+      this._host = assertHost(deps?.host, "OptionSmileWidget");
+      this.rootEl = rootEl;
+      this._closeBtn = this.rootEl.querySelector(".panel-close-btn");
+      this._resetBtn = this.rootEl.querySelector(".option-smile-reset-btn");
+      this._emptyEl = this.rootEl.querySelector(".option-smile-empty");
+      this._chartEl = this.rootEl.querySelector(".option-smile-chart");
+      this._spotEl = this.rootEl.querySelector(".option-smile-spot");
+      this._hoverEl = this.rootEl.querySelector(".option-smile-hover");
+      this._chart = null;
+      this._call = null;
+      this._put = null;
+      this._strikes = [];
+      this._context = {};
+      this._resizeObserver = null;
+      this._closeBtn?.addEventListener("click", (e) => {
+        e.preventDefault();
+        this._host.close();
+      });
+      this._resetBtn?.addEventListener("click", (e) => {
+        e.preventDefault();
+        this.resetZoom();
+      });
+      if (this._chartEl !== null && typeof ResizeObserver !== "undefined") {
+        this._resizeObserver = new ResizeObserver(() => this._fit());
+        this._resizeObserver.observe(this._chartEl);
+      }
+      this._render();
+      this._host.register(this);
+    }
+    dispose() {
+      try {
+        this._resizeObserver?.disconnect();
+      } catch {
+      }
+      this._resizeObserver = null;
+      try {
+        this._chart?.remove();
+      } catch {
+      }
+      this._chart = null;
+      this._call = null;
+      this._put = null;
+      this._host.unregister(this);
+      try {
+        this.rootEl.remove();
+      } catch {
+      }
+    }
+    /// Show this chain, priced against this context.
+    ///
+    /// The desk's two arguments unchanged, and for the same reason it takes them together: they
+    /// are one observation. A smile marked with a spot the curves never saw is two moments.
+    update(strikes, context = {}) {
+      this._strikes = strikes || [];
+      this._context = context || {};
+      this._render();
+    }
+    /// Show the whole chain again, after a zoom.
+    resetZoom() {
+      try {
+        this._chart?.timeScale().fitContent();
+      } catch {
+      }
+    }
+    /// The engine, for a host that wants to add to this chart - a second expiry, a marker.
+    chart() {
+      return this._chart;
+    }
+    _ensureChart() {
+      if (this._chart !== null) return true;
+      if (this._chartEl === null) return false;
+      const palette = this._host.presentation.canvasPalette();
+      this._chart = createChart(this._chartEl, {
+        layout: {
+          background: { type: "solid", color: "transparent" },
+          textColor: palette.grid,
+          fontFamily: palette.font,
+          fontSize: 11,
+          attributionLogo: false
+        },
+        grid: { vertLines: { color: palette.grid }, horzLines: { color: palette.grid } },
+        crosshair: { mode: CrosshairMode.Normal },
+        rightPriceScale: { borderColor: palette.grid },
+        timeScale: {
+          borderColor: palette.grid,
+          // Evenly spaced by listing, and worded as strikes: the axis carries the strike
+          // itself, so the label and the value can never drift apart.
+          mode: "ordinal",
+          formatter: (value) => formatPrice(Number(value))
+        }
+      });
+      this._call = this._chart.addSeries(LineSeries, { lineWidth: LINE_WIDTH2, color: palette.up });
+      this._put = this._chart.addSeries(LineSeries, { lineWidth: LINE_WIDTH2, color: palette.down });
+      this._chart.subscribeCrosshairMove((param) => this._renderHover(param));
+      return true;
+    }
+    _render() {
+      const chain = sortedChain(this._strikes);
+      const quoted = chain.some((row) => sideVolatility(row.call) !== null || sideVolatility(row.put) !== null);
+      if (this._emptyEl !== null) this._emptyEl.hidden = quoted;
+      this._renderSpot();
+      if (!quoted) return;
+      if (!this._ensureChart() || this._call === null || this._put === null) return;
+      this._call.setData(toSmileSeries(chain, false));
+      this._put.setData(toSmileSeries(chain, true));
+      this._fit();
+    }
+    _fit() {
+      if (this._chart === null || this._chartEl === null) return;
+      const rect = this._chartEl.getBoundingClientRect();
+      if (rect.width <= 0 || rect.height <= 0) return;
+      try {
+        this._chart.resize(rect.width, rect.height);
+      } catch {
+      }
+    }
+    // Where the money is. Not a line on the chart: an ordinal axis has a rung per listed strike
+    // and the spot is between two of them, so it is stated rather than drawn at a place the
+    // ladder does not have.
+    _renderSpot() {
+      const el = this._spotEl;
+      if (el === null) return;
+      const spot = this._context.assetPrice;
+      if (typeof spot !== "number" || !isFinite(spot)) {
+        el.textContent = "";
+        return;
+      }
+      el.textContent = `${this._host.t("Underlying")} ${formatPrice(spot)}`;
+    }
+    // What the pointer is over: the strike and both sides at it. Both, because a smile is read by
+    // the distance between the two curves - a readout naming one of them answers half of it.
+    _renderHover(param) {
+      const el = this._hoverEl;
+      if (el === null) return;
+      if (param.time === null) {
+        el.textContent = "";
+        return;
+      }
+      const at = (series) => {
+        const point = series === null ? void 0 : param.seriesData.get(series);
+        const value = point?.value;
+        return typeof value === "number" && isFinite(value) ? `${value.toFixed(2)}%` : "--";
+      };
+      el.textContent = `${formatPrice(Number(param.time))}  ${at(this._call)} / ${at(this._put)}`;
+    }
+  };
+  _OptionSmileWidget.TYPE = ControlTypes.OptionSmile;
+  var OptionSmileWidget = _OptionSmileWidget;
+
   // src/strategies-widget.ts
   var StrategyStates = {
     Stopped: "stopped",
@@ -5460,160 +7041,6 @@ var SSTradingControls = (() => {
     }
   }
 
-  // src/statistics-widget.ts
-  function rank(rows) {
-    const first = /* @__PURE__ */ new Map();
-    for (const row of rows) {
-      const seen = first.get(row.category);
-      if (seen === void 0 || row.order < seen) first.set(row.category, row.order);
-    }
-    return rows.map((row) => ({ ...row, categoryRank: first.get(row.category) ?? row.order }));
-  }
-  var _StatisticsWidget = class _StatisticsWidget {
-    static create(hostEl, state, deps) {
-      const host = assertHost(deps?.host, "StatisticsWidget");
-      const root = _StatisticsWidget._buildRoot(host);
-      root.id = makePanelId(_StatisticsWidget.TYPE);
-      hostEl.appendChild(root);
-      return new _StatisticsWidget(root, state || {}, deps);
-    }
-    // The panel's markup. No rail action but the export: a statistic is produced by the
-    // strategy and there is nothing here to cancel, reload or edit.
-    static _buildRoot(host) {
-      const title = host.t("Statistics");
-      return makePanelRoot("statistics-panel", title, [
-        makeElement("div", "panel-header", {}, [
-          makeElement("span", "", {}, [title]),
-          makeIconButton("bt-icon-btn bt-icon-cancel panel-close-btn", host.t("ClosePanel"), "bi-x", { type: "button" })
-        ]),
-        makeElement("div", "panel-body panel-body-with-rail", {}, [
-          makeElement("div", "panel-body-content", {}, [
-            makeElement("table", "terminal-table statistics-table", { role: "table", "aria-label": host.t("StatisticsList") }, [
-              makeElement("thead", "", {}, []),
-              makeElement("tbody", "statistics-body", {}, [])
-            ])
-          ]),
-          makeElement("div", "panel-rail", { role: "toolbar", "aria-label": host.t("StatisticsActions") }, [
-            makeIconButton("bt-icon-btn panel-export-btn", host.t("ExportToExcel"), "bi-file-earmark-spreadsheet", {})
-          ])
-        ])
-      ]);
-    }
-    constructor(rootEl, _state, deps) {
-      this._host = assertHost(deps?.host, "StatisticsWidget");
-      this.rootEl = rootEl;
-      this.el = this.rootEl.querySelector(".statistics-body");
-      this._closeBtn = this.rootEl.querySelector(".panel-close-btn");
-      this._exportBtn = this.rootEl.querySelector(".panel-export-btn");
-      this._rows = [];
-      this._closeBtn?.addEventListener("click", (e) => {
-        e.preventDefault();
-        this._host.close();
-      });
-      this._exportBtn?.addEventListener("click", (e) => {
-        e.preventDefault();
-        this._export();
-      });
-      const head = this.rootEl.querySelector(".statistics-table thead");
-      this._grid = head && this.el ? new DataGrid({
-        head,
-        body: this.el,
-        columns: this._columns(),
-        // Not a sort the reader chose: the registry hands every parameter an order, and
-        // the bands it assigns are what puts profit above drawdown above trade counts.
-        defaultSort: { col: "order", dir: "asc" },
-        rowKey: (r) => String(r.key),
-        emptyText: this._host.t("NoStatistics"),
-        contextMenu: makeGridMenu(this._host),
-        // The groups sit where the registry order puts them, not where the
-        // alphabet would: profit, then trades, then positions, then orders.
-        groupOrder: "rows",
-        selection: "multi"
-      }) : null;
-      this._grid?.setState({ group: "category", hidden: ["category", "order"] });
-      this._host.register(this);
-    }
-    dispose() {
-      this._grid?.destroy();
-      this._host.unregister(this);
-      try {
-        this.rootEl.remove();
-      } catch {
-      }
-    }
-    /// Show these statistics. The whole set at once: a strategy publishes its parameters as one
-    /// table and a row that vanished from it has stopped existing, not stopped changing.
-    update(rows) {
-      this._rows = rank(rows || []);
-      this._grid?.setRows(this._rows);
-    }
-    _export() {
-      this._grid?.download("statistics", this._host.t("Statistics"));
-    }
-    // Two visible columns and one that only groups. The order column is hidden as well: it
-    // decides the sort and means nothing to a reader.
-    _columns() {
-      const label = (key) => this._host.t(key);
-      return [
-        {
-          key: "category",
-          header: label("Category"),
-          exportable: false,
-          // The group's place, not its name: groups are laid out in the order the
-          // registry gives their parameters, so profit comes before trade counts.
-          // Grouping on the name would order them alphabetically, and on the
-          // translated name would reorder them with the reader's language.
-          value: (r) => r.categoryRank,
-          text: (r) => r.categoryText || r.category
-        },
-        {
-          key: "order",
-          header: label("Order"),
-          exportable: false,
-          value: (r) => r.order
-        },
-        {
-          key: "name",
-          header: label("Name"),
-          exportable: true,
-          value: (r) => r.name,
-          bindCell: (td, r) => {
-            if (r.description) td.setAttribute("title", r.description);
-          }
-        },
-        {
-          key: "value",
-          header: label("Value"),
-          exportable: true,
-          cellClass: () => "statistic-value",
-          // Sorts on the raw value so a number sorts as a number, reads as the text below.
-          value: (r) => r.value,
-          render: (r) => formatStatistic(r.value),
-          exportValue: (r) => r.value ?? ""
-        }
-      ];
-    }
-  };
-  _StatisticsWidget.TYPE = ControlTypes.Statistics;
-  var StatisticsWidget = _StatisticsWidget;
-  function formatStatistic(value) {
-    if (value === null || value === void 0 || value === "") return "";
-    if (typeof value === "number") {
-      if (!isFinite(value)) return "";
-      return String(Math.round(value * 100) / 100);
-    }
-    if (value instanceof Date) return isoDate(value);
-    if (typeof value === "string") {
-      const at = /^\d{4}-\d{2}-\d{2}([T ]|$)/.test(value) ? new Date(value) : null;
-      if (at !== null && !isNaN(at.getTime())) return isoDate(at);
-      return value;
-    }
-    return String(value);
-  }
-  function isoDate(at) {
-    return at.toISOString().slice(0, 10);
-  }
-
   // src/tradefeed-aggregator.ts
   function aggregateBubbles(ticks, maxBucketsPerSide) {
     if (!ticks || ticks.length === 0) return [];
@@ -5690,7 +7117,7 @@ var SSTradingControls = (() => {
         symbol: lane.symbol,
         label: named ? { x: LABEL_GAP, y: laneTop + 2 } : null,
         separatorY: named && position > 0 ? laneTop - LANE_GAP / 2 : null,
-        ticks: lane.ticks.length === 0 ? [] : axisTicks(scale)
+        ticks: lane.ticks.length === 0 ? [] : axisTicks2(scale)
       });
       if (lane.ticks.length === 0) return;
       const buckets = Math.max(MIN_BUCKETS, Math.min(MAX_BUCKETS, Math.floor(drawWidth / BUCKET_WIDTH)));
@@ -5725,7 +7152,7 @@ var SSTradingControls = (() => {
     }
     return { top, height, min, range: Math.max(max - min, Number.EPSILON) };
   }
-  function axisTicks(scale) {
+  function axisTicks2(scale) {
     const format = priceFormatter(scale.min, scale.min + scale.range);
     const ticks = [];
     for (let step = 0; step < AXIS_TICKS; step++) {
@@ -5752,12 +7179,12 @@ var SSTradingControls = (() => {
   // src/tradefeed-widget.ts
   var FILL_ALPHA = 0.55;
   var STROKE_ALPHA = 0.9;
-  var LABEL_ALPHA = 0.55;
+  var LABEL_ALPHA3 = 0.55;
   var SEPARATOR_ALPHA = 0.12;
   var RULE_ALPHA = 0.08;
   var HOVER_SLACK = 6;
-  var TOOLTIP_OFFSET = 12;
-  var TOOLTIP_MARGIN = 4;
+  var TOOLTIP_OFFSET2 = 12;
+  var TOOLTIP_MARGIN2 = 4;
   var _TradeFeedWidget = class _TradeFeedWidget {
     static create(hostEl, state, deps) {
       const host = assertHost(deps?.host, "TradeFeedWidget");
@@ -6223,7 +7650,7 @@ var SSTradingControls = (() => {
           _TradeFeedWidget._rule(ctx, 0, size.width, lane.separatorY);
         }
         if (lane.label) {
-          ctx.globalAlpha = LABEL_ALPHA;
+          ctx.globalAlpha = LABEL_ALPHA3;
           ctx.fillStyle = palette.grid;
           ctx.textBaseline = "top";
           ctx.textAlign = "left";
@@ -6233,7 +7660,7 @@ var SSTradingControls = (() => {
           ctx.globalAlpha = RULE_ALPHA;
           ctx.strokeStyle = palette.grid;
           _TradeFeedWidget._rule(ctx, 0, layout.axisX - 2, tick.y);
-          ctx.globalAlpha = LABEL_ALPHA;
+          ctx.globalAlpha = LABEL_ALPHA3;
           ctx.fillStyle = palette.grid;
           ctx.textBaseline = "middle";
           ctx.textAlign = "left";
@@ -6309,10 +7736,10 @@ var SSTradingControls = (() => {
       const parentRect = tooltip.offsetParent?.getBoundingClientRect() ?? canvasRect;
       const originX = canvasRect.left - parentRect.left;
       const originY = canvasRect.top - parentRect.top;
-      const maxX = originX + canvasRect.width - tooltip.offsetWidth - TOOLTIP_MARGIN;
-      const maxY = originY + canvasRect.height - tooltip.offsetHeight - TOOLTIP_MARGIN;
-      tooltip.style.left = `${Math.max(0, Math.min(originX + x + TOOLTIP_OFFSET, maxX))}px`;
-      tooltip.style.top = `${Math.max(0, Math.min(originY + y + TOOLTIP_OFFSET, maxY))}px`;
+      const maxX = originX + canvasRect.width - tooltip.offsetWidth - TOOLTIP_MARGIN2;
+      const maxY = originY + canvasRect.height - tooltip.offsetHeight - TOOLTIP_MARGIN2;
+      tooltip.style.left = `${Math.max(0, Math.min(originX + x + TOOLTIP_OFFSET2, maxX))}px`;
+      tooltip.style.top = `${Math.max(0, Math.min(originY + y + TOOLTIP_OFFSET2, maxY))}px`;
     }
     _tooltipLine(label, value, valueClass) {
       const row = makeElement("div", "tf-bbtt-row", {}, [