@stocksharp/trading-controls 1.2.0 → 1.4.0

package/dist/sstradingcontrols.js

@@ -24,8 +24,22 @@ 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,
     OrderEntryTypes: () => OrderEntryTypes,
@@ -33,22 +47,59 @@ var SSTradingControls = (() => {
     OrderStates: () => OrderStates,
     PRESENTATION_CLASSES: () => PRESENTATION_CLASSES,
     PositionsWidget: () => PositionsWidget,
+    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,
     formatQty: () => formatQty,
+    formatStatistic: () => formatStatistic,
     formatTime: () => formatTime,
+    greekPlaces: () => greekPlaces,
+    greekScales: () => greekScales,
+    greeks: () => greeks,
+    heatScale: () => heatScale,
+    hitHeatmap: () => hitHeatmap,
+    impliedVolatility: () => impliedVolatility,
+    keepLog: () => keepLog,
     layoutBubbles: () => layoutBubbles,
+    layoutHeatmap: () => layoutHeatmap,
     makeElement: () => makeElement,
+    makeGridMenu: () => makeGridMenu,
     makeIcon: () => makeIcon,
     makeIconButton: () => makeIconButton,
     makePanelId: () => makePanelId,
-    makePanelRoot: () => makePanelRoot
+    makePanelRoot: () => makePanelRoot,
+    normalCdf: () => normalCdf,
+    normalPdf: () => normalPdf,
+    pnlCurve: () => pnlCurve,
+    premium: () => premium,
+    project: () => project,
+    scaleChain: () => scaleChain,
+    sideGreeks: () => sideGreeks,
+    sideVolatility: () => sideVolatility,
+    sortedChain: () => sortedChain,
+    subtreeOf: () => subtreeOf,
+    surfaceLayout: () => surfaceLayout,
+    tintOf: () => tintOf,
+    toSmileSeries: () => toSmileSeries,
+    valueAt: () => valueAt,
+    zoomView: () => zoomView
   });
 
   // src/trading-host.ts
@@ -120,13 +171,21 @@ var SSTradingControls = (() => {
     Positions: "positions",
     OrderBook: "orderbook",
     TradeFeed: "tradefeed",
-    OrderEntry: "orderEntry"
+    OrderEntry: "orderEntry",
+    Statistics: "statistics",
+    LogMonitor: "logMonitor",
+    Strategies: "strategies",
+    OptionDesk: "optionDesk",
+    OptionSmile: "optionSmile",
+    Equity: "equity",
+    OptimizationHeatmap: "optimizationHeatmap",
+    OptimizationSurface: "optimizationSurface"
   };
 
   // src/formatters.ts
-  function formatPrice(price) {
-    if (price == null || isNaN(Number(price))) return "--";
-    const n = Number(price);
+  function formatPrice(price2) {
+    if (price2 == null || isNaN(Number(price2))) return "--";
+    const n = Number(price2);
     const a = Math.abs(n);
     let prec = 2;
     if (a < 1) prec = 4;
@@ -815,6 +874,13 @@ var SSTradingControls = (() => {
     copyRows: (count) => `Copy selected rows (${count})`,
     exportXlsx: "Export to .xlsx"
   };
+  var CONTROL_TAGS = ["SELECT", "INPUT", "BUTTON", "TEXTAREA", "A", "OPTION", "LABEL"];
+  function isControl(event) {
+    const target = event.target;
+    if (target === null || target === void 0) return false;
+    if (target.isContentEditable === true) return true;
+    return CONTROL_TAGS.includes(String(target.tagName ?? "").toUpperCase());
+  }
   var _DataGrid = class _DataGrid {
     constructor(options) {
       __publicField(this, "options");
@@ -1727,6 +1793,7 @@ var SSTradingControls = (() => {
         tr.addEventListener("mousedown", (event) => {
           const button = event.button;
           if (button !== void 0 && button !== 0) return;
+          if (isControl(event)) return;
           event.preventDefault();
           _DataGrid._active = this;
           this._clickRow(key, event);
@@ -1788,6 +1855,7 @@ var SSTradingControls = (() => {
         if (group) group.rows.push(row);
         else groups.set(key, { label: col ? this._displayText(col, row) : key, rows: [row] });
       }
+      if (this.options.groupOrder === "rows") return groups;
       return new Map([...groups.entries()].sort((a, b) => this._collator.compare(a[1].label, b[1].label)));
     }
     _groupRow(key, label, count) {
@@ -1802,6 +1870,8 @@ var SSTradingControls = (() => {
       else td.appendChild(content);
       tr.appendChild(td);
       tr.addEventListener("click", () => this.toggleGroup(key));
+      tr.style.cursor = "pointer";
+      tr.style.userSelect = "none";
       return tr;
     }
     _emptyRow() {
@@ -2792,8 +2862,8 @@ var SSTradingControls = (() => {
       if (previous) this._grid.rowElement(String(previous))?.classList.remove("wl-current");
       if (symbol) this._grid.rowElement(String(symbol))?.classList.add("wl-current");
     }
-    onPriceUpdate(symbol, price) {
-      if (price == null || !isFinite(price)) return;
+    onPriceUpdate(symbol, price2) {
+      if (price2 == null || !isFinite(price2)) return;
       let full = symbol;
       if (!full.includes("@")) {
         const match = this.instruments.find((i) => String(i.symbol).split("@")[0] === symbol);
@@ -2808,11 +2878,11 @@ var SSTradingControls = (() => {
         baseline = stored ? Number(stored) : void 0;
       }
       if (baseline == null || !isFinite(baseline) || baseline === 0) {
-        baseline = price;
-        this._host.cache.set(baselineKey, String(price));
+        baseline = price2;
+        this._host.cache.set(baselineKey, String(price2));
       }
-      const chgPct = baseline ? (price - baseline) / baseline * 100 : 0;
-      this.stats.set(full, { ...cur || {}, lastPrice: price, baseline, chgPct });
+      const chgPct = baseline ? (price2 - baseline) / baseline * 100 : 0;
+      this.stats.set(full, { ...cur || {}, lastPrice: price2, baseline, chgPct });
       this._updateRow(full, prev);
     }
     static _baselineKey(symbol) {
@@ -3018,9 +3088,9 @@ var SSTradingControls = (() => {
       if (!this._host.isPrimary) return;
       this._host.ticker.publish(this._visible().map((i) => String(i.symbol)), this.stats);
     }
-    static _priceText(price) {
-      const n = Number(price);
-      if (price == null || !isFinite(n) || n === 0) return "--";
+    static _priceText(price2) {
+      const n = Number(price2);
+      if (price2 == null || !isFinite(n) || n === 0) return "--";
       if (n >= 1) return n.toFixed(2);
       if (n >= 0.01) return n.toFixed(4);
       return n.toFixed(6);
@@ -3292,15 +3362,15 @@ var SSTradingControls = (() => {
     }
     /// A reference price off the tape. Both columns follow the market while the
     /// form is untouched; the field the trader is typing in is left alone.
-    setLimitPrice(price) {
-      this._lastPrice = price;
-      this._writePrices(this._bestBid > 0 ? this._bestBid : price, this._bestAsk > 0 ? this._bestAsk : price, false);
+    setLimitPrice(price2) {
+      this._lastPrice = price2;
+      this._writePrices(this._bestBid > 0 ? this._bestBid : price2, this._bestAsk > 0 ? this._bestAsk : price2, false);
     }
     /// The same reference price, force-written: an explicit host gesture
     /// ("price this order here") outranks whatever was typed.
-    seedLimitPrice(price) {
-      this._lastPrice = price;
-      this._writePrices(this._bestBid > 0 ? this._bestBid : price, this._bestAsk > 0 ? this._bestAsk : price, true);
+    seedLimitPrice(price2) {
+      this._lastPrice = price2;
+      this._writePrices(this._bestBid > 0 ? this._bestBid : price2, this._bestAsk > 0 ? this._bestAsk : price2, true);
     }
     /// Best bid and offer. The passive seed for a limit form is Buy = best bid
     /// and Sell = best ask — joining the book on each side, so the spread in the
@@ -3325,10 +3395,10 @@ var SSTradingControls = (() => {
     /// Force one column's price and let ticks resume updating it afterwards —
     /// what a click on a book level or a chart price means. Quantized to the
     /// instrument's tick, so a raw chart coordinate does not fail validation.
-    setPrice(side, price) {
+    setPrice(side, price2) {
       const input = this._input(side, PRICE_INPUT);
       if (!input) return;
-      const text = this._formatPriceForInput(price);
+      const text = this._formatPriceForInput(price2);
       if (!text) return;
       input.dataset.userEdited = "0";
       input.value = text;
@@ -3560,10 +3630,10 @@ var SSTradingControls = (() => {
       this._writePrice(OrderEntrySides.Sell, sellPrice, reset);
       for (const side of _OrderEntryWidget.SIDES) this._recalculate(side);
     }
-    _writePrice(side, price, reset) {
+    _writePrice(side, price2, reset) {
       const input = this._input(side, PRICE_INPUT);
       if (!input) return;
-      const text = this._formatPriceForInput(price);
+      const text = this._formatPriceForInput(price2);
       if (!text) return;
       if (reset) {
         input.dataset.userEdited = "0";
@@ -3576,8 +3646,8 @@ var SSTradingControls = (() => {
     }
     // Round a price to the instrument's tick and cut the float tail: a mid price
     // of (bid+ask)/2 otherwise reaches the field as 0.44625000000000004.
-    _formatPriceForInput(price) {
-      const n = Number(price);
+    _formatPriceForInput(price2) {
+      const n = Number(price2);
       if (!isFinite(n)) return "";
       const tickSize = Number(this._instrument?.tickSize) || 0;
       if (tickSize > 0)
@@ -3595,16 +3665,16 @@ var SSTradingControls = (() => {
       const total = this._cols[side]?.querySelector(TOTAL_VALUE);
       if (!total) return;
       const quantity = this._number(side, QTY_INPUT) ?? 0;
-      let price;
+      let price2;
       if (this._orderType === OrderEntryTypes.Limit || this._orderType === OrderEntryTypes.StopLimit) {
-        price = this._number(side, PRICE_INPUT) ?? 0;
+        price2 = this._number(side, PRICE_INPUT) ?? 0;
       } else if (this._orderType === OrderEntryTypes.Stop) {
-        price = this._number(side, STOP_INPUT) ?? this._lastPrice;
+        price2 = this._number(side, STOP_INPUT) ?? this._lastPrice;
       } else {
         const bbo = side === OrderEntrySides.Buy ? this._bestAsk : this._bestBid;
-        price = bbo > 0 ? bbo : this._lastPrice;
+        price2 = bbo > 0 ? bbo : this._lastPrice;
       }
-      total.textContent = quantity > 0 && price > 0 ? (quantity * price).toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 }) : "--";
+      total.textContent = quantity > 0 && price2 > 0 ? (quantity * price2).toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 }) : "--";
     }
     // The estimate line doubles as the validation message and the submit button
     // follows it. A disabled pad reads as invalid for the same reason: there is
@@ -3634,20 +3704,20 @@ var SSTradingControls = (() => {
   var OrderEntryWidget = _OrderEntryWidget;
 
   // src/orderbook-depth.ts
-  function depthSide(levels, direction, geometry) {
+  function depthSide(levels, direction2, geometry) {
     if (levels.length === 0) return null;
     const best = levels[0].price;
     const worst = levels[levels.length - 1].price;
     const span = Math.abs(best - worst);
     if (!(span > 0)) return null;
     const reach = geometry.halfWidth - geometry.pad;
-    const points = [{ x: geometry.midX + direction * geometry.pad, cumulative: 0 }];
+    const points = [{ x: geometry.midX + direction2 * geometry.pad, cumulative: 0 }];
     let cumulative = 0;
     for (const level of levels) {
       cumulative += level.quantity;
       const distance = Math.abs(level.price - best);
       points.push({
-        x: geometry.midX + direction * (geometry.pad + distance / span * reach),
+        x: geometry.midX + direction2 * (geometry.pad + distance / span * reach),
         cumulative
       });
     }
@@ -4009,11 +4079,11 @@ var SSTradingControls = (() => {
         const target = e.target;
         const row = target?.closest(".ob-row");
         if (!row) return;
-        const price = Number(row.dataset.price);
-        if (!Number.isFinite(price)) return;
+        const price2 = Number(row.dataset.price);
+        if (!Number.isFinite(price2)) return;
         const side = row.dataset.side === "buy" ? 0 : 1;
-        if (e.ctrlKey || e.metaKey) this._deps.onPriceExecuted(price, side);
-        else this._deps.onPriceSelected(price, side);
+        if (e.ctrlKey || e.metaKey) this._deps.onPriceExecuted(price2, side);
+        else this._deps.onPriceSelected(price2, side);
       });
     }
     _refreshDepthButtons() {
@@ -4072,8 +4142,8 @@ var SSTradingControls = (() => {
     static _deepest() {
       return _OrderBookWidget.DEPTHS[_OrderBookWidget.DEPTHS.length - 1];
     }
-    static _sorted(ledger, direction) {
-      return [...ledger.entries()].filter(([price, quantity]) => Number.isFinite(price) && quantity > 0).sort((left, right) => direction * (left[0] - right[0])).map(([price, quantity]) => ({ price, quantity }));
+    static _sorted(ledger, direction2) {
+      return [...ledger.entries()].filter(([price2, quantity]) => Number.isFinite(price2) && quantity > 0).sort((left, right) => direction2 * (left[0] - right[0])).map(([price2, quantity]) => ({ price: price2, quantity }));
     }
     _applySnapshotSide(ledger, levels, side, symbol, sequence) {
       for (const level of levels || []) {
@@ -4113,8 +4183,8 @@ var SSTradingControls = (() => {
       if (this._bidsByPrice.size === 0 || this._asksByPrice.size === 0) return;
       let bestBid = -Infinity;
       let bestAsk = Infinity;
-      for (const price of this._bidsByPrice.keys()) if (price > bestBid) bestBid = price;
-      for (const price of this._asksByPrice.keys()) if (price < bestAsk) bestAsk = price;
+      for (const price2 of this._bidsByPrice.keys()) if (price2 > bestBid) bestBid = price2;
+      for (const price2 of this._asksByPrice.keys()) if (price2 < bestAsk) bestAsk = price2;
       if (bestBid >= bestAsk) {
         this._anomaly(`crossed book: bid=${bestBid} >= ask=${bestAsk} sym=${symbol} seq=${sequence} ${wasSnapshot ? "snapshot" : "diff"}`);
       }
@@ -4250,8 +4320,8 @@ var SSTradingControls = (() => {
       }
       return { bids, asks };
     }
-    static _priceKey(price) {
-      return Number(price).toFixed(8);
+    static _priceKey(price2) {
+      return Number(price2).toFixed(8);
     }
     // The bid/ask split under the ladder, as one measurement the stylesheet
     // turns into two widths.
@@ -4354,259 +4424,182 @@ var SSTradingControls = (() => {
   _OrderBookWidget.DEPTHCHART_KEY = "terminal.obDepthChart";
   var OrderBookWidget = _OrderBookWidget;
 
-  // src/tradefeed-aggregator.ts
-  function aggregateBubbles(ticks, maxBucketsPerSide) {
-    if (!ticks || ticks.length === 0) return [];
-    const budget = Math.max(1, Math.floor(maxBucketsPerSide));
-    const buys = [];
-    const sells = [];
-    for (const tick of ticks) (tick.buy ? buys : sells).push(tick);
-    const bubbles = [];
-    for (const side of [buys, sells]) {
-      if (side.length === 0) continue;
-      if (side.length <= budget) {
-        for (const tick of side) bubbles.push({ ...tick, count: 1 });
-        continue;
+  // src/pnl-curve.ts
+  function compressPnl(points, count) {
+    if (points.length <= count || count < 2) return points.slice();
+    const first = points[0];
+    const last = points[points.length - 1];
+    const span = last.time - first.time;
+    if (!(span > 0)) {
+      const step = (points.length - 1) / (count - 1);
+      return Array.from({ length: count }, (_, i) => points[Math.round(i * step)]);
+    }
+    const buckets = count - 1;
+    const out = [first];
+    let bucket = 0;
+    for (let i = 1; i < points.length; i++) {
+      const index = Math.min(buckets - 1, Math.floor((points[i].time - first.time) / span * buckets));
+      if (index > bucket) {
+        out.push(points[i - 1]);
+        bucket = index;
       }
-      const bucketSize = Math.ceil(side.length / budget);
-      for (let start = 0; start < side.length; start += bucketSize)
-        bubbles.push(merge(side.slice(start, start + bucketSize)));
     }
-    return bubbles;
+    if (out[out.length - 1] !== last) out.push(last);
+    return out;
   }
-  function merge(slice) {
-    let quantity = 0;
-    let weighted = 0;
-    for (const tick of slice) {
-      const q = tick.quantity || 0;
-      quantity += q;
-      weighted += q * tick.price;
-    }
-    const price = quantity > 0 ? weighted / quantity : slice[0].price;
-    const middle = slice[Math.floor(slice.length / 2)];
+  function pnlCurve(points, box) {
+    const clean = points.filter((p) => p !== null && p !== void 0 && Number.isFinite(p.time) && Number.isFinite(p.value)).slice().sort((a, b) => a.time - b.time);
+    if (clean.length < 2) return null;
+    const drawable = Math.max(2, Math.round(box.width - box.padX * 2));
+    const shown = compressPnl(clean, drawable);
+    const values = shown.map((p) => p.value);
+    const min = Math.min(0, ...values);
+    const max = Math.max(0, ...values);
+    const left = box.padX;
+    const right = box.width - box.padX;
+    const top = box.padY;
+    const bottom = box.height - box.padY;
+    const firstTime = shown[0].time;
+    const lastTime = shown[shown.length - 1].time;
+    const timeSpan = lastTime - firstTime;
+    const valueSpan = max - min;
+    const x = (time) => timeSpan === 0 ? left : left + (time - firstTime) / timeSpan * (right - left);
+    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 {
-      symbol: slice[0].symbol,
-      side: slice[0].side,
-      buy: slice[0].buy,
-      price,
-      quantity,
-      time: middle.time,
-      index: middle.index,
-      count: slice.length
+      points: curve,
+      // Closed along the baseline rather than along the foot of the box: a run entirely above
+      // water fills the gap between itself and zero, and nothing below it.
+      area: [...curve, [curve[curve.length - 1][0], zeroY], [curve[0][0], zeroY]],
+      zeroY,
+      min,
+      max,
+      from: firstTime,
+      to: lastTime,
+      last,
+      positive: last >= 0
     };
   }
-
-  // src/tradefeed-bubbles.ts
-  var PAD_X = 10;
-  var PAD_Y = 10;
-  var AXIS_WIDTH = 56;
-  var LABEL_GAP = 4;
-  var LANE_GAP = 2;
-  var MIN_LANE_HEIGHT = 20;
-  var AXIS_TICKS = 3;
-  var MIN_RADIUS = 2;
-  var MAX_RADIUS = 22;
-  var RADIUS_LANE_SHARE = 0.4;
-  var BUCKET_WIDTH = 8;
-  var MIN_BUCKETS = 6;
-  var MAX_BUCKETS = 30;
-  function layoutBubbles(input) {
-    const { width, height, total } = input;
-    const axisX = Math.max(PAD_X + 1, width - AXIS_WIDTH);
-    const drawWidth = Math.max(1, axisX - PAD_X);
-    const layout = { axisX, labelX: axisX + LABEL_GAP, lanes: [], bubbles: [] };
-    const lanes = input.lanes.filter((lane) => lane.ticks.length > 0);
-    if (lanes.length === 0) return layout;
-    const named = input.lanes.length > 1;
-    const laneHeight = Math.max(
-      MIN_LANE_HEIGHT,
-      (height - 2 * PAD_Y - LANE_GAP * (input.lanes.length - 1)) / input.lanes.length
-    );
-    input.lanes.forEach((lane, position) => {
-      const laneTop = named ? PAD_Y + position * (laneHeight + LANE_GAP) : PAD_Y;
-      const laneSpan = named ? laneHeight : Math.max(MIN_LANE_HEIGHT, height - 2 * PAD_Y);
-      const scale = priceScale(lane.ticks, laneTop, laneSpan);
-      layout.lanes.push({
-        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)
-      });
-      if (lane.ticks.length === 0) return;
-      const buckets = Math.max(MIN_BUCKETS, Math.min(MAX_BUCKETS, Math.floor(drawWidth / BUCKET_WIDTH)));
-      const bubbles = aggregateBubbles(lane.ticks, buckets);
-      let maxQuantity = 0;
-      for (const bubble of bubbles) if (bubble.quantity > maxQuantity) maxQuantity = bubble.quantity;
-      const quantityScale = Math.max(maxQuantity, Number.EPSILON);
-      const radiusCap = Math.min(MAX_RADIUS, laneSpan * RADIUS_LANE_SHARE);
-      for (const bubble of bubbles) {
-        layout.bubbles.push({
-          // Newest print (index 0) at the right edge, oldest at the left.
-          x: PAD_X + drawWidth * (total <= 1 ? 1 : 1 - bubble.index / (total - 1)),
-          y: scale.top + scale.height * (1 - (bubble.price - scale.min) / scale.range),
-          radius: MIN_RADIUS + Math.sqrt(Math.max(0, bubble.quantity) / quantityScale) * radiusCap,
-          bubble
-        });
-      }
-    });
-    layout.bubbles.sort((left, right) => right.bubble.index - left.bubble.index);
-    return layout;
-  }
-  function priceScale(ticks, top, height) {
-    let min = Infinity;
-    let max = -Infinity;
-    for (const tick of ticks) {
-      if (tick.price < min) min = tick.price;
-      if (tick.price > max) max = tick.price;
-    }
-    if (!isFinite(min) || !isFinite(max)) {
-      min = 0;
-      max = 0;
-    }
-    return { top, height, min, range: Math.max(max - min, Number.EPSILON) };
+  function drawPnlCurve(ctx, curve, box, style) {
+    const colour = curve.positive ? style.up : style.down;
+    ctx.clearRect(0, 0, box.width, box.height);
+    ctx.setLineDash([2, 3]);
+    ctx.strokeStyle = style.baseline;
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(box.padX, curve.zeroY);
+    ctx.lineTo(box.width - box.padX, curve.zeroY);
+    ctx.stroke();
+    ctx.setLineDash([]);
+    ctx.globalAlpha = style.fillOpacity;
+    ctx.fillStyle = colour;
+    ctx.beginPath();
+    ctx.moveTo(curve.area[0][0], curve.area[0][1]);
+    for (const [px, py] of curve.area.slice(1)) ctx.lineTo(px, py);
+    ctx.closePath();
+    ctx.fill();
+    ctx.globalAlpha = 1;
+    ctx.strokeStyle = colour;
+    ctx.lineWidth = style.lineWidth;
+    ctx.beginPath();
+    ctx.moveTo(curve.points[0][0], curve.points[0][1]);
+    for (const [px, py] of curve.points.slice(1)) ctx.lineTo(px, py);
+    ctx.stroke();
   }
-  function axisTicks(scale) {
-    const format = priceFormatter(scale.min, scale.min + scale.range);
-    const ticks = [];
-    for (let step = 0; step < AXIS_TICKS; step++) {
-      const fraction = step / (AXIS_TICKS - 1);
-      ticks.push({
-        text: format(scale.min + scale.range - scale.range * fraction),
-        y: scale.top + scale.height * fraction
-      });
+
+  // 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 ticks;
-  }
-  function priceFormatter(min, max) {
-    const magnitude = Math.max(Math.abs(min), Math.abs(max));
-    let digits = 6;
-    if (magnitude >= 1e3) digits = 0;
-    else if (magnitude >= 10) digits = 2;
-    else if (magnitude >= 0.1) digits = 4;
-    return (price) => price.toLocaleString(void 0, {
-      minimumFractionDigits: digits,
-      maximumFractionDigits: digits
-    });
+    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/tradefeed-widget.ts
-  var FILL_ALPHA = 0.55;
-  var STROKE_ALPHA = 0.9;
-  var LABEL_ALPHA = 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 _TradeFeedWidget = class _TradeFeedWidget {
+  // 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, "TradeFeedWidget");
-      const root = _TradeFeedWidget._buildRoot(host);
-      root.id = makePanelId(_TradeFeedWidget.TYPE);
+      const host = assertHost(deps?.host, "EquityWidget");
+      const root = _EquityWidget._buildRoot(host);
+      root.id = makePanelId(_EquityWidget.TYPE);
       hostEl.appendChild(root);
-      return new _TradeFeedWidget(root, state || {}, deps);
+      return new _EquityWidget(root, state || {}, deps);
     }
-    // The panel's markup. The host stylesheet reads this structure, and a
-    // docking host lifts `.panel-header`'s children into its tab strip.
-    //
-    // Two `+` buttons, and they are not the same gesture: the one in the header
-    // pins another instrument to THIS feed, the one beside it asks the host for
-    // another feed panel. The tooltips are what tell them apart, so neither is
-    // an icon on its own.
     static _buildRoot(host) {
-      const addInstrument = host.t("AddInstrument");
-      const marketTrades = host.t("MarketTrades");
-      return makePanelRoot("tradefeed-panel tf-tab-market tf-view-list", host.t("TradeFeed"), [
+      const title = host.t("Equity");
+      return makePanelRoot("equity-panel", title, [
         makeElement("div", "panel-header", {}, [
-          makeElement("span", "", {}, [marketTrades]),
-          makeIconButton("bt-icon-btn tf-add-symbol-btn", addInstrument, "bi-plus-lg", { type: "button" }),
-          makeIconButton("bt-icon-btn panel-add-btn", host.t("Add trade feed"), "bi-window-plus", { type: "button" }),
-          makeElement("div", "tradefeed-view-toggle tf-view-toggle", { role: "group", "aria-label": host.t("TradeFeedView") }, [
-            makeIconButton("tf-view-btn", host.t("ListView"), "bi-list-ul", { type: "button", "data-view": "list" }),
-            makeIconButton("tf-view-btn", host.t("BubbleChart"), "bi-circle-fill", { type: "button", "data-view": "bubbles" })
-          ]),
+          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", "tf-tabs", { role: "tablist", "aria-label": host.t("Trade feed tabs") }, [
-          makeElement("button", "tf-tab active", { type: "button", role: "tab", "aria-selected": "true", "data-tab": "market" }, [marketTrades]),
-          makeElement("button", "tf-tab", { type: "button", role: "tab", "aria-selected": "false", "data-tab": "my" }, [host.t("My trades")])
-        ]),
-        makeElement("div", "tf-extras", { role: "list", "aria-label": host.t("ExtraInstruments"), hidden: "" }, []),
-        // Each tape is a DataGrid over the shared table skin: the <thead>
-        // is left empty for the grid to fill, which is also what makes the
-        // tape sortable and gives it the grid's menu and selection.
-        makeElement("div", "tradefeed-content tf-market", { "aria-live": "polite" }, [
-          makeElement("table", "terminal-table tradefeed-table", { role: "table", "aria-label": marketTrades }, [
-            makeElement("thead", "", {}, []),
-            makeElement("tbody", "", {}, [])
-          ])
-        ]),
-        makeElement("div", "tradefeed-content tf-my", {}, [
-          makeElement("table", "terminal-table tradefeed-table", { role: "table", "aria-label": host.t("My trades") }, [
-            makeElement("thead", "", {}, []),
-            makeElement("tbody", "", {}, [])
+        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")])
           ])
-        ]),
-        makeElement("canvas", "tradefeed-bubbles tf-bubbles", { "aria-hidden": "true" }, []),
-        makeElement("div", "tf-bubble-tooltip", { role: "tooltip", hidden: "" }, [])
+        ])
       ]);
     }
-    constructor(rootEl, state, deps) {
-      this._host = assertHost(deps?.host, "TradeFeedWidget");
+    constructor(rootEl, _state, deps) {
+      this._host = assertHost(deps?.host, "EquityWidget");
       this.rootEl = rootEl;
-      this.extrasEl = this.rootEl.querySelector(".tf-extras");
-      this.bubbleCanvas = this.rootEl.querySelector(".tf-bubbles");
-      this._tabsEl = this.rootEl.querySelector(".tf-tabs");
-      this._viewToggleEl = this.rootEl.querySelector(".tf-view-toggle");
-      this._tooltipEl = this.rootEl.querySelector(".tf-bubble-tooltip");
-      this._addBtn = this.rootEl.querySelector(".panel-add-btn");
       this._closeBtn = this.rootEl.querySelector(".panel-close-btn");
-      this._addSymbolBtn = this.rootEl.querySelector(".tf-add-symbol-btn");
-      this._bubbleCtx = this.bubbleCanvas?.getContext("2d") ?? null;
-      this.trades = [];
-      this.bubbleTrades = [];
-      this.myTrades = [];
-      this.avgQty = 100;
-      this.tab = "market";
-      this._seq = 0;
-      this._bubbleHits = [];
-      this._canvasSize = null;
+      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._marketGrid = this._makeGrid(".tf-market");
-      this._myGrid = this._makeGrid(".tf-my");
-      const saved = this._host.preferences.get(_TradeFeedWidget.VIEW_KEY, null);
-      this.view = saved === "bubbles" ? "bubbles" : "list";
-      this._activeSymbol = null;
-      this._extraSymbols = new Set(Array.isArray(state.extras) ? state.extras : []);
-      this._addBtn?.addEventListener("click", (e) => {
-        e.preventDefault();
-        this._host.spawn({ extras: [...this._extraSymbols] });
-      });
       this._closeBtn?.addEventListener("click", (e) => {
         e.preventDefault();
-        this.dispose();
         this._host.close();
       });
-      this._addSymbolBtn?.addEventListener("click", (e) => {
+      this._resetBtn?.addEventListener("click", (e) => {
         e.preventDefault();
-        e.stopPropagation();
-        this._host.trading.pickInstrument((symbol) => void this.addExtraSymbol(symbol));
+        this.resetZoom();
       });
-      this._bindTabs();
-      this._bindViewToggle();
-      this._bindBubbleHover();
-      this._applyView();
-      this._renderExtras();
-      for (const symbol of this._extraSymbols)
-        void this._host.trading.marketData.addSymbol(symbol, MarketDataLevels.Tape).catch(() => {
-        });
-      if (this.bubbleCanvas && typeof ResizeObserver === "function") {
-        this._resizeObserver = new ResizeObserver(() => {
-          this._sizeCanvas();
-          this._renderBubbles();
-        });
-        this._resizeObserver.observe(this.bubbleCanvas);
+      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() {
@@ -4614,35 +4607,2729 @@ var SSTradingControls = (() => {
         this._resizeObserver?.disconnect();
       } catch {
       }
-      this._marketGrid?.destroy();
-      this._myGrid?.destroy();
-      for (const symbol of this._extraSymbols)
-        void this._host.trading.marketData.removeSymbol(symbol).catch(() => {
-        });
+      this._resizeObserver = null;
+      try {
+        this._chart?.remove();
+      } catch {
+      }
+      this._chart = null;
+      this._series = null;
       this._host.unregister(this);
       try {
         this.rootEl.remove();
       } catch {
       }
     }
-    /// Which symbol the rest of the page is showing. The feed accepts prints
-    /// for it without it being pinned, and re-syncs so the symbol column
-    /// appears or disappears with the pinned set.
-    setActiveSymbol(symbol) {
-      this._activeSymbol = symbol || null;
-      this._renderExtras();
-      this._renderBubbles();
+    /// 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();
     }
-    /// Replace the tape wholesale — what a host does when the page moves to a
-    /// different instrument. The flash baseline resets with it: a new
-    /// instrument's history is history, not fifty arrivals at once.
-    setTrades(trades) {
-      const rows = (trades || []).map((t) => this._stamp(t));
-      this.trades = rows.slice(0, _TradeFeedWidget.MAX_ROWS);
-      this.bubbleTrades = rows.slice(0, _TradeFeedWidget.MAX_BUBBLES);
-      if (this.trades.length > 0) {
-        const total = this.trades.reduce((sum, t) => sum + (t.quantity ?? 0), 0);
-        this.avgQty = total / this.trades.length || this.avgQty;
+    /// 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",
+    Put: "put"
+  };
+  var SQRT_2PI = Math.sqrt(2 * Math.PI);
+  var DAYS_IN_YEAR = 365;
+  function normalCdf(x) {
+    const z = Math.abs(x);
+    if (z > 37) return x > 0 ? 1 : 0;
+    const e = Math.exp(-(z * z) / 2);
+    let tail;
+    if (z < 7.07106781186547) {
+      let b = 0.0352624965998911 * z + 0.700383064443688;
+      b = b * z + 6.37396220353165;
+      b = b * z + 33.912866078383;
+      b = b * z + 112.079291497871;
+      b = b * z + 221.213596169931;
+      b = b * z + 220.206867912376;
+      let d = 0.0883883476483184 * z + 1.75566716318264;
+      d = d * z + 16.064177579207;
+      d = d * z + 86.7807322029461;
+      d = d * z + 296.564248779674;
+      d = d * z + 637.333633378831;
+      d = d * z + 793.826512519948;
+      d = d * z + 440.413735824752;
+      tail = e * b / d;
+    } else {
+      let b = z + 0.65;
+      b = z + 4 / b;
+      b = z + 3 / b;
+      b = z + 2 / b;
+      b = z + 1 / b;
+      tail = e / (b * 2.506628274631);
+    }
+    return x > 0 ? 1 - tail : tail;
+  }
+  function normalPdf(x) {
+    return Math.exp(-0.5 * x * x) / SQRT_2PI;
+  }
+  function d1(inputs) {
+    const { assetPrice, strike, timeToExpiry, riskFree, dividend, deviation } = inputs;
+    const spread = deviation * Math.sqrt(timeToExpiry);
+    if (spread === 0 || assetPrice <= 0 || strike <= 0) return 0;
+    return (Math.log(assetPrice / strike) + (riskFree - dividend + deviation * deviation / 2) * timeToExpiry) / spread;
+  }
+  function d2(inputs) {
+    const spread = inputs.deviation * Math.sqrt(inputs.timeToExpiry);
+    return spread === 0 ? 0 : d1(inputs) - spread;
+  }
+  function premium(type, inputs) {
+    const { assetPrice, strike, timeToExpiry, riskFree, dividend, deviation } = inputs;
+    if (timeToExpiry <= 0 || deviation <= 0)
+      return Math.max(0, type === OptionTypes.Call ? assetPrice - strike : strike - assetPrice);
+    const a = d1(inputs);
+    const b = d2(inputs);
+    const carried = assetPrice * Math.exp(-dividend * timeToExpiry);
+    const discounted = strike * Math.exp(-riskFree * timeToExpiry);
+    return type === OptionTypes.Call ? carried * normalCdf(a) - discounted * normalCdf(b) : discounted * normalCdf(-b) - carried * normalCdf(-a);
+  }
+  function greeks(type, inputs) {
+    const { assetPrice, strike, timeToExpiry, riskFree, dividend, deviation } = inputs;
+    const sign = type === OptionTypes.Call ? 1 : -1;
+    if (timeToExpiry <= 0 || deviation <= 0 || assetPrice <= 0) {
+      const inTheMoney = type === OptionTypes.Call ? assetPrice > strike : assetPrice < strike;
+      return { delta: inTheMoney ? sign : 0, gamma: 0, vega: 0, theta: 0, rho: 0 };
+    }
+    const a = d1(inputs);
+    const b = d2(inputs);
+    const sqrtT = Math.sqrt(timeToExpiry);
+    const density = normalPdf(a);
+    const carry = Math.exp(-dividend * timeToExpiry);
+    const discount = Math.exp(-riskFree * timeToExpiry);
+    const delta = sign * carry * normalCdf(sign * a);
+    const gamma = carry * density / (assetPrice * deviation * sqrtT);
+    const vega = assetPrice * carry * density * sqrtT * 0.01;
+    const rho = sign * strike * timeToExpiry * discount * normalCdf(sign * b) * 0.01;
+    const theta = (-(assetPrice * carry * density * deviation) / (2 * sqrtT) - sign * riskFree * strike * discount * normalCdf(sign * b) + sign * dividend * assetPrice * carry * normalCdf(sign * a)) / DAYS_IN_YEAR;
+    return { delta, gamma, vega, theta, rho };
+  }
+  function impliedVolatility(type, inputs, price2) {
+    if (!(price2 > 0) || inputs.timeToExpiry <= 0) return null;
+    const at = (deviation) => premium(type, { ...inputs, deviation });
+    let low = 1e-6;
+    let high = 5;
+    if (price2 < at(low) || price2 > at(high)) return null;
+    for (let step = 0; step < 60; step++) {
+      const mid = (low + high) / 2;
+      if (at(mid) < price2) low = mid;
+      else high = mid;
+    }
+    return (low + high) / 2;
+  }
+
+  // src/option-desk-widget.ts
+  var _OptionDeskWidget = class _OptionDeskWidget {
+    static create(hostEl, state, deps) {
+      const host = assertHost(deps?.host, "OptionDeskWidget");
+      const root = _OptionDeskWidget._buildRoot(host);
+      root.id = makePanelId(_OptionDeskWidget.TYPE);
+      hostEl.appendChild(root);
+      return new _OptionDeskWidget(root, state || {}, deps);
+    }
+    static _buildRoot(host) {
+      const title = host.t("OptionDesk");
+      return makePanelRoot("option-desk-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 option-desk-table", { role: "table", "aria-label": host.t("OptionChain") }, [
+              makeElement("thead", "", {}, []),
+              makeElement("tbody", "option-desk-body", {}, [])
+            ])
+          ]),
+          makeElement("div", "panel-rail", { role: "toolbar", "aria-label": host.t("OptionDeskActions") }, [
+            makeIconButton("bt-icon-btn panel-export-btn", host.t("ExportToExcel"), "bi-file-earmark-spreadsheet", {})
+          ])
+        ])
+      ]);
+    }
+    constructor(rootEl, _state, deps) {
+      this._host = assertHost(deps?.host, "OptionDeskWidget");
+      this.rootEl = rootEl;
+      this.el = this.rootEl.querySelector(".option-desk-body");
+      this._closeBtn = this.rootEl.querySelector(".panel-close-btn");
+      this._exportBtn = this.rootEl.querySelector(".panel-export-btn");
+      this._rows = [];
+      this._context = {};
+      this._places = greekScales([], {});
+      this._closeBtn?.addEventListener("click", (e) => {
+        e.preventDefault();
+        this._host.close();
+      });
+      this._exportBtn?.addEventListener("click", (e) => {
+        e.preventDefault();
+        this._export();
+      });
+      const head = this.rootEl.querySelector(".option-desk-table thead");
+      this._grid = head && this.el ? new DataGrid({
+        head,
+        body: this.el,
+        columns: this._columns(),
+        // By strike, ascending. A chain has exactly one order and it is not negotiable:
+        // the strip is read as a ladder, and re-sorting it by any column destroys that.
+        defaultSort: { col: "strike", dir: "asc" },
+        rowKey: (r) => String(r.strike),
+        emptyText: this._host.t("NoOptions"),
+        rowClass: (r) => this._rowClass(r),
+        contextMenu: makeGridMenu(this._host),
+        selection: "multi"
+      }) : null;
+      this._grid?.setState({
+        hidden: [
+          "callRho",
+          "callTheta",
+          "callHv",
+          "callTheor",
+          "putRho",
+          "putTheta",
+          "putHv",
+          "putTheor"
+        ]
+      });
+      this._host.register(this);
+    }
+    dispose() {
+      this._grid?.destroy();
+      this._host.unregister(this);
+      try {
+        this.rootEl.remove();
+      } catch {
+      }
+    }
+    /// Show this chain, priced against this context.
+    ///
+    /// Both together, always: a chain and the underlying it is priced off are one observation,
+    /// and refreshing them separately shows greeks computed from a price that has moved.
+    update(strikes, context = {}) {
+      this._context = context ?? {};
+      this._rows = scaleChain(strikes ?? [], this._context);
+      this._places = greekScales(this._rows, this._context);
+      this._grid?.setRows(this._rows);
+    }
+    /// The rows as the desk holds them, scales and intrinsic values resolved.
+    rows() {
+      return this._rows;
+    }
+    _export() {
+      this._grid?.download("option-chain", this._host.t("OptionDesk"));
+    }
+    // Which side of the money this strike is on. A chain is read from the money outwards, and
+    // the line between the two halves is what a reader finds first.
+    _rowClass(row) {
+      const asset = this._context.assetPrice;
+      if (asset === null || asset === void 0) return "option-row";
+      return `option-row ${row.strike < asset ? "option-itm-call" : "option-itm-put"}`;
+    }
+    _columns() {
+      const label = (key) => this._host.t(key);
+      const side = (which) => {
+        const prefix = which;
+        const at = (r) => r[which];
+        const g = (r) => sideGreeks(r, which, this._context);
+        return [
+          { key: `${prefix}Rho`, header: label("Rho"), exportable: true, value: (r) => g(r)?.rho ?? null, render: (r) => decimals(g(r)?.rho, this._places.rho) },
+          { key: `${prefix}Theta`, header: label("Theta"), exportable: true, value: (r) => g(r)?.theta ?? null, render: (r) => decimals(g(r)?.theta, this._places.theta) },
+          { key: `${prefix}Vega`, header: label("Vega"), exportable: true, value: (r) => g(r)?.vega ?? null, render: (r) => decimals(g(r)?.vega, this._places.vega) },
+          { key: `${prefix}Gamma`, header: label("Gamma"), exportable: true, value: (r) => g(r)?.gamma ?? null, render: (r) => decimals(g(r)?.gamma, this._places.gamma) },
+          { key: `${prefix}Delta`, header: label("Delta"), exportable: true, value: (r) => g(r)?.delta ?? null, render: (r) => decimals(g(r)?.delta, this._places.delta) },
+          { key: `${prefix}Bid`, header: label("Bid"), exportable: true, cellClass: () => "option-bid", value: (r) => at(r).bid ?? null, render: (r) => price(at(r).bid) },
+          { key: `${prefix}Ask`, header: label("Ask"), exportable: true, cellClass: () => "option-ask", value: (r) => at(r).ask ?? null, render: (r) => price(at(r).ask) },
+          { key: `${prefix}Theor`, header: label("TheorPrice"), exportable: true, value: (r) => at(r).theoretical ?? null, render: (r) => price(at(r).theoretical) },
+          {
+            key: `${prefix}Volume`,
+            header: label("Volume"),
+            exportable: true,
+            value: (r) => at(r).volume ?? 0,
+            render: (r) => this._bar(at(r).volume, which === "call" ? r.maxCallVolume : r.maxPutVolume, which, formatQty(at(r).volume ?? 0)),
+            exportValue: (r) => at(r).volume ?? 0
+          },
+          {
+            key: `${prefix}Oi`,
+            header: label("OI"),
+            exportable: true,
+            value: (r) => at(r).openInterest ?? 0,
+            render: (r) => this._bar(at(r).openInterest, which === "call" ? r.maxCallOpenInterest : r.maxPutOpenInterest, which, formatQty(at(r).openInterest ?? 0)),
+            exportValue: (r) => at(r).openInterest ?? 0
+          },
+          { key: `${prefix}Symbol`, header: which === "call" ? label("Call") : label("Put"), exportable: true, value: (r) => at(r).symbol ?? "" },
+          {
+            key: `${prefix}IvBid`,
+            header: label("IVBid"),
+            exportable: true,
+            value: (r) => at(r).ivBid ?? null,
+            render: (r) => this._bar(at(r).ivBid, r.maxVolatility, "iv", percent(at(r).ivBid)),
+            exportValue: (r) => at(r).ivBid ?? ""
+          },
+          {
+            key: `${prefix}IvAsk`,
+            header: label("IVAsk"),
+            exportable: true,
+            value: (r) => at(r).ivAsk ?? null,
+            render: (r) => this._bar(at(r).ivAsk, r.maxVolatility, "iv", percent(at(r).ivAsk)),
+            exportValue: (r) => at(r).ivAsk ?? ""
+          },
+          {
+            key: `${prefix}IvLast`,
+            header: label("IVLast"),
+            exportable: true,
+            value: (r) => at(r).ivLast ?? null,
+            render: (r) => this._bar(at(r).ivLast, r.maxVolatility, "iv", percent(at(r).ivLast)),
+            exportValue: (r) => at(r).ivLast ?? ""
+          },
+          {
+            key: `${prefix}Hv`,
+            header: label("HV"),
+            exportable: true,
+            value: (r) => at(r).historicalVolatility ?? null,
+            render: (r) => this._bar(at(r).historicalVolatility, r.maxVolatility, "iv", percent(at(r).historicalVolatility)),
+            exportValue: (r) => at(r).historicalVolatility ?? ""
+          }
+        ];
+      };
+      const puts = side("put").slice().reverse();
+      return [
+        ...side("call"),
+        {
+          key: "strike",
+          header: label("Strike"),
+          exportable: true,
+          cellClass: () => "option-strike",
+          value: (r) => r.strike,
+          render: (r) => price(r.strike)
+        },
+        {
+          key: "intrinsic",
+          header: label("IntrinsicValue"),
+          exportable: true,
+          cellClass: () => "option-intrinsic",
+          // Whichever side is in the money at this strike; the other is worth nothing to
+          // exercise, and showing both would be one number and one zero on every row.
+          value: (r) => Math.max(r.callIntrinsic, r.putIntrinsic),
+          render: (r) => price(Math.max(r.callIntrinsic, r.putIntrinsic))
+        },
+        ...puts
+      ];
+    }
+    // A figure with its share of the strip behind it. The bar is a width, not a drawing: it
+    // scales with the cell, it prints, and it needs no canvas per row.
+    _bar(value, max, kind, text) {
+      if (value === null || value === void 0 || !isFinite(value) || value <= 0) return text;
+      const cell = document.createElement("span");
+      cell.className = "option-bar-cell";
+      const bar = document.createElement("span");
+      bar.className = `option-bar option-bar-${kind}`;
+      bar.style.width = `${Math.min(100, value / (max || 1) * 100).toFixed(1)}%`;
+      cell.appendChild(bar);
+      const label = document.createElement("span");
+      label.className = "option-bar-text";
+      label.textContent = text;
+      cell.appendChild(label);
+      return cell;
+    }
+  };
+  _OptionDeskWidget.TYPE = ControlTypes.OptionDesk;
+  var OptionDeskWidget = _OptionDeskWidget;
+  function scaleChain(strikes, context) {
+    const asset = context.assetPrice ?? null;
+    const maxOf = (pick, sides) => Math.max(0, ...strikes.flatMap((r) => sides(r).map((s) => pick(s) ?? 0)).filter((v) => isFinite(v)));
+    const maxCallVolume = maxOf((s) => s.volume, (r) => [r.call]);
+    const maxPutVolume = maxOf((s) => s.volume, (r) => [r.put]);
+    const maxCallOpenInterest = maxOf((s) => s.openInterest, (r) => [r.call]);
+    const maxPutOpenInterest = maxOf((s) => s.openInterest, (r) => [r.put]);
+    const maxVolatility = Math.max(
+      maxOf((s) => s.ivBid, (r) => [r.call, r.put]),
+      maxOf((s) => s.ivAsk, (r) => [r.call, r.put]),
+      maxOf((s) => s.ivLast, (r) => [r.call, r.put]),
+      maxOf((s) => s.historicalVolatility, (r) => [r.call, r.put])
+    );
+    return strikes.map((row) => ({
+      ...row,
+      maxCallVolume,
+      maxPutVolume,
+      maxCallOpenInterest,
+      maxPutOpenInterest,
+      maxVolatility,
+      callIntrinsic: asset === null ? 0 : Math.max(0, asset - row.strike),
+      putIntrinsic: asset === null ? 0 : Math.max(0, row.strike - asset)
+    }));
+  }
+  function sideGreeks(row, which, context) {
+    const side = row[which];
+    if (side.greeks !== void 0) return side.greeks;
+    const deviation = side.ivLast ?? side.ivBid ?? side.ivAsk ?? side.historicalVolatility ?? null;
+    const assetPrice = context.assetPrice ?? null;
+    const timeToExpiry = context.timeToExpiry ?? null;
+    if (deviation === null || assetPrice === null || timeToExpiry === null) return null;
+    return greeks(which === "call" ? OptionTypes.Call : OptionTypes.Put, {
+      assetPrice,
+      strike: row.strike,
+      timeToExpiry,
+      riskFree: context.riskFree ?? 0,
+      dividend: context.dividend ?? 0,
+      deviation
+    });
+  }
+  var GREEK_KEYS = ["delta", "gamma", "vega", "theta", "rho"];
+  var GREEK_DIGITS = 4;
+  var GREEK_MIN_PLACES = 2;
+  var GREEK_MAX_PLACES = 8;
+  function greekPlaces(values) {
+    const scale = Math.min(...values.filter((v) => typeof v === "number" && isFinite(v) && v !== 0).map(Math.abs));
+    if (!isFinite(scale)) return GREEK_MIN_PLACES;
+    const places = GREEK_DIGITS - 1 - Math.floor(Math.log10(scale));
+    return Math.min(GREEK_MAX_PLACES, Math.max(GREEK_MIN_PLACES, places));
+  }
+  function greekScales(rows, context) {
+    const all = rows.flatMap((r) => [sideGreeks(r, OptionTypes.Call, context), sideGreeks(r, OptionTypes.Put, context)]).filter((g) => g !== null);
+    const places = {};
+    for (const key of GREEK_KEYS) places[key] = greekPlaces(all.map((g) => g[key]));
+    return places;
+  }
+  function decimals(value, places) {
+    if (value === null || value === void 0 || !isFinite(value)) return "";
+    return value.toFixed(places);
+  }
+  function price(value) {
+    if (value === null || value === void 0 || !isFinite(value)) return "";
+    return formatPrice(value);
+  }
+  function percent(value) {
+    if (value === null || value === void 0 || !isFinite(value)) return "";
+    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",
+    Starting: "starting",
+    Started: "started",
+    Stopping: "stopping"
+  };
+  var SPARK_WIDTH = 140;
+  var SPARK_HEIGHT = 26;
+  var _StrategiesWidget = class _StrategiesWidget {
+    static create(hostEl, state, deps) {
+      const host = assertHost(deps?.host, "StrategiesWidget");
+      const root = _StrategiesWidget._buildRoot(host);
+      root.id = makePanelId(_StrategiesWidget.TYPE);
+      hostEl.appendChild(root);
+      return new _StrategiesWidget(root, state || {}, deps);
+    }
+    static _buildRoot(host) {
+      const title = host.t("Strategies");
+      return makePanelRoot("strategies-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 strategies-table", { role: "table", "aria-label": host.t("StrategiesList") }, [
+              makeElement("thead", "", {}, []),
+              makeElement("tbody", "strategies-body", {}, [])
+            ])
+          ]),
+          makeElement("div", "panel-rail", { role: "toolbar", "aria-label": host.t("StrategiesActions") }, [
+            makeIconButton("bt-icon-btn panel-export-btn", host.t("ExportToExcel"), "bi-file-earmark-spreadsheet", {})
+          ])
+        ])
+      ]);
+    }
+    constructor(rootEl, _state, deps) {
+      this._host = assertHost(deps?.host, "StrategiesWidget");
+      this._deps = deps;
+      this.rootEl = rootEl;
+      this.el = this.rootEl.querySelector(".strategies-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(".strategies-table thead");
+      this._grid = head && this.el ? new DataGrid({
+        head,
+        body: this.el,
+        columns: this._columns(),
+        // By name: a dashboard is a list someone reads down looking for one strategy,
+        // and a list that reorders itself as P&L moves cannot be read that way.
+        defaultSort: { col: "name", dir: "asc" },
+        rowKey: (s) => String(s.id),
+        emptyText: this._host.t("NoStrategies"),
+        rowClass: (s) => `strategy-row strategy-${s.state}${s.error ? " strategy-failed" : ""}`,
+        contextMenu: makeGridMenu(this._host),
+        selection: "multi"
+      }) : null;
+      this._host.register(this);
+    }
+    dispose() {
+      this._grid?.destroy();
+      this._host.unregister(this);
+      try {
+        this.rootEl.remove();
+      } catch {
+      }
+    }
+    /// Show these strategies. The whole set: one that is gone from it has been removed, and
+    /// leaving its row behind would offer a Stop for something that no longer runs.
+    update(rows) {
+      this._rows = rows || [];
+      this._grid?.setRows(this._rows);
+    }
+    _export() {
+      this._grid?.download("strategies", this._host.t("Strategies"));
+    }
+    _columns() {
+      const label = (key) => this._host.t(key);
+      const presentation = this._host.presentation;
+      return [
+        {
+          key: "state",
+          header: label("State"),
+          exportable: true,
+          value: (s) => s.state,
+          render: (s) => this._stateCell(s),
+          cellClass: (s) => `strategy-state strategy-state-${s.state}`,
+          exportValue: (s) => s.state
+        },
+        {
+          key: "actions",
+          header: label("Actions"),
+          headerHidden: true,
+          exportable: false,
+          cellClass: () => "strategy-actions",
+          render: (s) => this._actionCell(s)
+        },
+        {
+          key: "online",
+          header: label("Online"),
+          exportable: true,
+          value: (s) => s.online ? 1 : 0,
+          render: (s) => s.online ? "\u25CF" : "\u25CB",
+          cellClass: (s) => s.online ? "strategy-online is-on" : "strategy-online",
+          exportValue: (s) => s.online ? label("Yes") : label("No")
+        },
+        {
+          key: "tradingMode",
+          header: label("Trading"),
+          exportable: true,
+          value: (s) => s.tradingMode ?? "",
+          render: (s) => this._tradingCell(s),
+          exportValue: (s) => s.tradingMode ?? ""
+        },
+        { key: "name", header: label("Name"), exportable: true, value: (s) => s.name },
+        { key: "portfolio", header: label("Portfolio"), exportable: true, value: (s) => s.portfolio ?? "" },
+        { key: "security", header: label("Sym"), exportable: true, value: (s) => s.security ?? "" },
+        {
+          key: "position",
+          header: label("Position"),
+          exportable: true,
+          value: (s) => s.position ?? 0,
+          render: (s) => this._positionCell(s),
+          cellClass: (s) => `strategy-position ${presentation.pnlClass(s.position ?? 0)}`,
+          exportValue: (s) => s.position ?? 0
+        },
+        { key: "orders", header: label("OrderCount"), exportable: true, value: (s) => s.ordersCount ?? 0 },
+        { key: "trades", header: label("NumOfTrades"), exportable: true, value: (s) => s.tradesCount ?? 0 },
+        {
+          key: "pnlChange",
+          header: label("PnLChange"),
+          exportable: true,
+          value: (s) => s.pnlChange ?? 0,
+          render: (s) => `${direction(s.pnlChange ?? 0)} ${formatPnl(s.pnlChange ?? 0)}`,
+          cellClass: (s) => presentation.pnlClass(s.pnlChange ?? 0),
+          exportValue: (s) => s.pnlChange ?? 0
+        },
+        {
+          key: "pnlChart",
+          header: label("PnLChart"),
+          exportable: false,
+          cellClass: () => "strategy-spark",
+          render: (s) => this._sparkline(s)
+        },
+        {
+          key: "realized",
+          header: label("RealizedProfit"),
+          exportable: true,
+          value: (s) => s.realized ?? 0,
+          render: (s) => formatPnl(s.realized ?? 0),
+          cellClass: (s) => presentation.pnlClass(s.realized ?? 0),
+          exportValue: (s) => s.realized ?? 0
+        },
+        {
+          key: "unrealized",
+          header: label("UnrealizedProfit"),
+          exportable: true,
+          value: (s) => s.unrealized ?? 0,
+          render: (s) => formatPnl(s.unrealized ?? 0),
+          cellClass: (s) => presentation.pnlClass(s.unrealized ?? 0),
+          exportValue: (s) => s.unrealized ?? 0
+        },
+        {
+          key: "error",
+          header: label("Error"),
+          exportable: true,
+          cellClass: () => "strategy-error",
+          value: (s) => s.error ?? ""
+        }
+      ];
+    }
+    // A dot and the state's own word. The dot is what is read across a list of twenty; the word
+    // is what tells Starting from Started, which a colour alone cannot.
+    _stateCell(row) {
+      const cell = document.createDocumentFragment();
+      const failed = row.error !== void 0 && row.error !== null && String(row.error).length > 0;
+      const dot = document.createElement("span");
+      dot.className = "strategy-dot";
+      dot.textContent = "\u25CF";
+      if (failed) dot.title = String(row.error);
+      cell.appendChild(dot);
+      const text = document.createElement("span");
+      text.className = "strategy-state-text";
+      text.textContent = failed && row.state === StrategyStates.Stopped ? this._host.t("Error") : stateText(this._host, row.state);
+      if (failed) text.title = String(row.error);
+      cell.appendChild(text);
+      return cell;
+    }
+    // Only the buttons this host can actually carry out, and only where the state allows them.
+    // A strategy that is already running has nothing to start.
+    _actionCell(row) {
+      const cell = document.createDocumentFragment();
+      const deps = this._deps;
+      const add = (action, when, title, icon, cls) => {
+        if (action === void 0) return;
+        const button = makeIconButton(`bt-icon-btn ${cls}`, title, icon, { type: "button" });
+        if (!when) button.disabled = true;
+        else button.addEventListener("click", () => action.call(deps, row.id));
+        cell.appendChild(button);
+      };
+      add(deps.start, row.state === StrategyStates.Stopped, this._host.t("Start"), "bi-play-fill", "strategy-start-btn");
+      add(deps.stop, row.state === StrategyStates.Started, this._host.t("Stop"), "bi-stop-fill", "strategy-stop-btn");
+      add(deps.riskRules, true, this._host.t("RiskManagement"), "bi-shield-exclamation", "strategy-risk-btn");
+      add(deps.openStrategy, true, this._host.t("OpenStrategy"), "bi-box-arrow-up-right", "strategy-open-btn");
+      return cell;
+    }
+    // The position, and next to it the one gesture that acts on it. Flattening is only
+    // meaningful while the strategy runs and only when it holds something.
+    _positionCell(row) {
+      const position = row.position ?? 0;
+      const text = formatQty(position);
+      if (this._deps.closePosition === void 0) return text;
+      const cell = document.createDocumentFragment();
+      const value = makeElement("span", "strategy-position-value", {}, [text]);
+      cell.appendChild(value);
+      const button = makeIconButton("bt-icon-btn strategy-flatten-btn", this._host.t("ClosePosition"), "bi-x-octagon", { type: "button" });
+      if (row.state !== StrategyStates.Started || position === 0) button.disabled = true;
+      else button.addEventListener("click", () => this._deps.closePosition?.(row.id));
+      cell.appendChild(button);
+      return cell;
+    }
+    // The one editable cell, and only when the host can carry the change out.
+    _tradingCell(row) {
+      const modes = this._deps.tradingModes ?? [];
+      if (this._deps.setTradingMode === void 0 || modes.length === 0) return row.tradingMode ?? "";
+      const select = document.createElement("select");
+      select.className = "form-control form-control-sm strategy-mode";
+      select.disabled = row.state !== StrategyStates.Stopped;
+      for (const mode of modes) {
+        const option = document.createElement("option");
+        option.value = mode;
+        option.textContent = this._host.t(mode);
+        if (mode === row.tradingMode) option.selected = true;
+        select.appendChild(option);
+      }
+      if (!select.disabled)
+        select.addEventListener("change", () => this._deps.setTradingMode?.(row.id, select.value));
+      return select;
+    }
+    // The run's own curve, at the size a cell has. Coloured by where it ended, which is the
+    // whole reason a glance at the column tells one strategy from another.
+    _sparkline(row) {
+      const box = { width: SPARK_WIDTH, height: SPARK_HEIGHT, padX: 1, padY: 2 };
+      const curve = pnlCurve(row.pnl ?? [], box);
+      if (curve === null) return "";
+      const canvas = document.createElement("canvas");
+      canvas.className = "strategy-spark-canvas";
+      const ratio = typeof window === "undefined" ? 1 : window.devicePixelRatio || 1;
+      canvas.width = Math.round(box.width * ratio);
+      canvas.height = Math.round(box.height * ratio);
+      canvas.style.width = `${box.width}px`;
+      canvas.style.height = `${box.height}px`;
+      const ctx = canvas.getContext("2d");
+      if (ctx !== null) {
+        const palette = this._host.presentation.canvasPalette();
+        const scaled = { width: canvas.width, height: canvas.height, padX: box.padX * ratio, padY: box.padY * ratio };
+        drawPnlCurve(ctx, pnlCurve(row.pnl ?? [], scaled) ?? curve, scaled, {
+          up: palette.up,
+          down: palette.down,
+          baseline: palette.grid,
+          lineWidth: 1.5 * ratio,
+          fillOpacity: 0.35
+        });
+      }
+      return canvas;
+    }
+  };
+  _StrategiesWidget.TYPE = ControlTypes.Strategies;
+  var StrategiesWidget = _StrategiesWidget;
+  function stateText(host, state) {
+    switch (state) {
+      case StrategyStates.Started:
+        return host.t("Started");
+      case StrategyStates.Starting:
+        return host.t("Starting");
+      case StrategyStates.Stopping:
+        return host.t("Stopping");
+      default:
+        return host.t("Stopped");
+    }
+  }
+  function direction(value) {
+    if (value > 0) return "\u25B2";
+    if (value < 0) return "\u25BC";
+    return "";
+  }
+
+  // src/log-tree.ts
+  var LogLevels = {
+    Error: "error",
+    Warning: "warning",
+    Info: "info",
+    Debug: "debug",
+    Verbose: "verbose"
+  };
+  function buildLogTree(sources) {
+    const byId = /* @__PURE__ */ new Map();
+    for (const s of sources)
+      byId.set(s.id, { ...s, name: s.name && s.name.length > 0 ? s.name : "\u2014", depth: 0, children: [] });
+    const roots = [];
+    for (const node of byId.values()) {
+      const parent = node.parentId != null ? byId.get(node.parentId) : void 0;
+      if (parent !== void 0 && parent !== node && !descends(byId, parent, node.id)) parent.children.push(node);
+      else roots.push(node);
+    }
+    const setDepth = (node, depth) => {
+      node.depth = depth;
+      for (const child of node.children) setDepth(child, depth + 1);
+    };
+    for (const root of roots) setDepth(root, 0);
+    return roots;
+  }
+  function descends(byId, node, id) {
+    const seen = /* @__PURE__ */ new Set();
+    let at = node;
+    while (at !== void 0 && !seen.has(at.id)) {
+      if (at.id === id) return true;
+      seen.add(at.id);
+      at = at.parentId != null ? byId.get(at.parentId) : void 0;
+    }
+    return false;
+  }
+  function subtreeOf(sources, selectedId) {
+    if (selectedId === null) return null;
+    const children = /* @__PURE__ */ new Map();
+    for (const s of sources) {
+      if (s.parentId == null) continue;
+      const siblings = children.get(s.parentId);
+      if (siblings === void 0) children.set(s.parentId, [s.id]);
+      else siblings.push(s.id);
+    }
+    const out = /* @__PURE__ */ new Set();
+    const walk = (id) => {
+      if (out.has(id)) return;
+      out.add(id);
+      for (const child of children.get(id) ?? []) walk(child);
+    };
+    walk(selectedId);
+    return out;
+  }
+  function keepLog(message, view) {
+    if (!view.levels.has(message.level)) return false;
+    if (view.sources !== null && !view.sources.has(message.sourceId)) return false;
+    const text = view.text.trim();
+    if (text.length === 0) return true;
+    return (message.message ?? "").toLowerCase().includes(text.toLowerCase());
+  }
+
+  // src/log-monitor-widget.ts
+  var DEFAULT_MAX = 5e3;
+  var LEVEL_LETTER = {
+    [LogLevels.Error]: "E",
+    [LogLevels.Warning]: "W",
+    [LogLevels.Info]: "I",
+    [LogLevels.Debug]: "D",
+    [LogLevels.Verbose]: "V"
+  };
+  var ALL_LEVELS = [LogLevels.Error, LogLevels.Warning, LogLevels.Info, LogLevels.Debug, LogLevels.Verbose];
+  var _LogMonitorWidget = class _LogMonitorWidget {
+    static create(hostEl, state, deps) {
+      const host = assertHost(deps?.host, "LogMonitorWidget");
+      const root = _LogMonitorWidget._buildRoot(host);
+      root.id = makePanelId(_LogMonitorWidget.TYPE);
+      hostEl.appendChild(root);
+      return new _LogMonitorWidget(root, state || {}, deps);
+    }
+    // The panel's markup: a source tree, a toolbar of level toggles and a text box, and the
+    // message table. The level toggles are buttons rather than checkboxes because they are read
+    // as a row of states, and each carries its letter so the toolbar and the column agree.
+    static _buildRoot(host) {
+      const title = host.t("LogMonitor");
+      return makePanelRoot("log-monitor-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 log-monitor-body", {}, [
+          makeElement("div", "log-sources", { role: "tree", "aria-label": host.t("LogSources") }, []),
+          makeElement("div", "log-messages", {}, [
+            makeElement("div", "log-toolbar", { role: "toolbar", "aria-label": host.t("LogMonitorActions") }, [
+              ...ALL_LEVELS.map((level) => makeElement("button", `log-level-toggle log-level-${level} is-on`, {
+                type: "button",
+                "data-level": level,
+                "aria-pressed": "true",
+                title: levelTitle(host, level)
+              }, [LEVEL_LETTER[level]])),
+              makeElement("input", "form-control form-control-sm log-filter", {
+                type: "search",
+                placeholder: host.t("Filter"),
+                "aria-label": host.t("Filter")
+              }, []),
+              makeIconButton("bt-icon-btn log-clear-btn", host.t("ClearItems"), "bi-eraser", {}),
+              makeIconButton("bt-icon-btn panel-export-btn", host.t("ExportToExcel"), "bi-file-earmark-spreadsheet", {})
+            ]),
+            // The table sits in a box of its own rather than being a flex child: a table
+            // told to fill a column stretches its rows to do it, so a log holding one
+            // line drew that line a panel tall - and with the toolbar and the table as
+            // the only two children there was nowhere for a long log to scroll.
+            makeElement("div", "log-table-scroll", {}, [
+              makeElement("table", "terminal-table log-table", { role: "table", "aria-label": host.t("LogMessages") }, [
+                makeElement("thead", "", {}, []),
+                makeElement("tbody", "log-body", {}, [])
+              ])
+            ])
+          ])
+        ])
+      ]);
+    }
+    constructor(rootEl, _state, deps) {
+      this._host = assertHost(deps?.host, "LogMonitorWidget");
+      this._max = deps?.maxMessages && deps.maxMessages > 0 ? deps.maxMessages : DEFAULT_MAX;
+      this.rootEl = rootEl;
+      this.el = this.rootEl.querySelector(".log-body");
+      this._treeEl = this.rootEl.querySelector(".log-sources");
+      this._filterEl = this.rootEl.querySelector(".log-filter");
+      this._closeBtn = this.rootEl.querySelector(".panel-close-btn");
+      this._clearBtn = this.rootEl.querySelector(".log-clear-btn");
+      this._exportBtn = this.rootEl.querySelector(".panel-export-btn");
+      this._sources = [];
+      this._messages = [];
+      this._levels = new Set(ALL_LEVELS);
+      this._text = "";
+      this._selected = null;
+      this._closeBtn?.addEventListener("click", (e) => {
+        e.preventDefault();
+        this._host.close();
+      });
+      this._clearBtn?.addEventListener("click", (e) => {
+        e.preventDefault();
+        this.clear();
+      });
+      this._exportBtn?.addEventListener("click", (e) => {
+        e.preventDefault();
+        this._export();
+      });
+      for (const toggle of Array.from(this.rootEl.querySelectorAll(".log-level-toggle"))) {
+        toggle.addEventListener("click", (e) => {
+          e.preventDefault();
+          const level = toggle.getAttribute("data-level") ?? "";
+          if (this._levels.has(level)) this._levels.delete(level);
+          else this._levels.add(level);
+          toggle.classList.toggle("is-on", this._levels.has(level));
+          toggle.setAttribute("aria-pressed", this._levels.has(level) ? "true" : "false");
+          this._render();
+        });
+      }
+      this._filterEl?.addEventListener("input", () => {
+        this._text = this._filterEl?.value ?? "";
+        this._render();
+      });
+      const head = this.rootEl.querySelector(".log-table thead");
+      this._grid = head && this.el ? new DataGrid({
+        head,
+        body: this.el,
+        columns: this._columns(),
+        // The order it happened in. A log read out of order is not a log.
+        defaultSort: { col: "time", dir: "asc" },
+        rowKey: (m) => String(m.id),
+        emptyText: this._host.t("NoLogMessages"),
+        rowClass: (m) => `log-row log-row-${m.level}`,
+        contextMenu: makeGridMenu(this._host),
+        selection: "multi"
+      }) : null;
+      this._host.register(this);
+    }
+    dispose() {
+      this._grid?.destroy();
+      this._host.unregister(this);
+      try {
+        this.rootEl.remove();
+      } catch {
+      }
+    }
+    /// The sources that exist. Sent whole: a source that has gone is gone from the tree, and
+    /// the selection falls back to everything rather than to a node nobody can see.
+    setSources(sources) {
+      this._sources = sources || [];
+      if (this._selected !== null && !this._sources.some((s) => s.id === this._selected)) this._selected = null;
+      this._renderTree();
+      this._render();
+    }
+    /// Add what has just been written. The oldest fall off the front once the cap is reached.
+    append(messages) {
+      if (!messages || messages.length === 0) return;
+      this._messages.push(...messages);
+      if (this._messages.length > this._max) this._messages.splice(0, this._messages.length - this._max);
+      this._render();
+    }
+    /// Forget every message. The sources stay: they still exist, they have just gone quiet.
+    clear() {
+      this._messages = [];
+      this._render();
+    }
+    /// Show one source's subtree, or everything when given null.
+    select(sourceId) {
+      this._selected = sourceId;
+      this._renderTree();
+      this._render();
+    }
+    /// What is on screen, after every filter.
+    visible() {
+      const sources = subtreeOf(this._sources, this._selected);
+      return this._messages.filter((m) => keepLog(m, { levels: this._levels, text: this._text, sources }));
+    }
+    _render() {
+      this._grid?.setRows(this.visible());
+    }
+    _renderTree() {
+      const tree = this._treeEl;
+      if (tree === null) return;
+      tree.innerHTML = "";
+      tree.appendChild(this._treeRow({ id: "", name: this._host.t("AllSources"), depth: 0, children: [] }, null));
+      for (const root of buildLogTree(this._sources)) this._appendNode(tree, root);
+    }
+    _appendNode(into, node) {
+      into.appendChild(this._treeRow(node, node.id));
+      for (const child of node.children) this._appendNode(into, child);
+    }
+    // Flat rows with an indent rather than nested lists: the tree is read, not restructured,
+    // and one list is what a keyboard walks through in the order the eye does.
+    _treeRow(node, id) {
+      const selected = this._selected === id;
+      const row = makeElement("button", `log-source${selected ? " is-selected" : ""}`, {
+        type: "button",
+        role: "treeitem",
+        "aria-selected": selected ? "true" : "false",
+        "aria-level": String(node.depth + 1),
+        style: `padding-left: ${0.5 + node.depth * 0.85}rem`
+      }, [node.name]);
+      row.addEventListener("click", (e) => {
+        e.preventDefault();
+        this.select(id);
+      });
+      return row;
+    }
+    _export() {
+      this._grid?.download("log", this._host.t("LogMonitor"));
+    }
+    _columns() {
+      const label = (key) => this._host.t(key);
+      return [
+        {
+          key: "source",
+          header: label("Source"),
+          exportable: true,
+          value: (m) => m.source ?? this._sourceName(m.sourceId)
+        },
+        {
+          key: "time",
+          header: label("Time"),
+          exportable: true,
+          value: (m) => m.time,
+          render: (m) => this._host.presentation.timeText(m.time),
+          exportValue: (m) => this._host.presentation.timeText(m.time)
+        },
+        {
+          key: "level",
+          header: label("Type"),
+          headerClass: "log-level-col",
+          exportable: true,
+          cellClass: (m) => `log-level-cell log-level-${m.level}`,
+          value: (m) => m.level,
+          render: (m) => LEVEL_LETTER[m.level] ?? String(m.level ?? "").slice(0, 1).toUpperCase(),
+          // The sheet carries the level's name, not the letter the column has room for.
+          exportValue: (m) => m.level
+        },
+        {
+          key: "message",
+          header: label("Message"),
+          exportable: true,
+          cellClass: () => "log-message-cell",
+          value: (m) => m.message
+        }
+      ];
+    }
+    _sourceName(id) {
+      return this._sources.find((s) => s.id === id)?.name ?? id;
+    }
+  };
+  _LogMonitorWidget.TYPE = ControlTypes.LogMonitor;
+  var LogMonitorWidget = _LogMonitorWidget;
+  function levelTitle(host, level) {
+    switch (level) {
+      case LogLevels.Error:
+        return host.t("Errors");
+      case LogLevels.Warning:
+        return host.t("Warnings");
+      case LogLevels.Info:
+        return host.t("Messages");
+      case LogLevels.Debug:
+        return host.t("Debug");
+      default:
+        return host.t("Verbose");
+    }
+  }
+
+  // src/tradefeed-aggregator.ts
+  function aggregateBubbles(ticks, maxBucketsPerSide) {
+    if (!ticks || ticks.length === 0) return [];
+    const budget = Math.max(1, Math.floor(maxBucketsPerSide));
+    const buys = [];
+    const sells = [];
+    for (const tick of ticks) (tick.buy ? buys : sells).push(tick);
+    const bubbles = [];
+    for (const side of [buys, sells]) {
+      if (side.length === 0) continue;
+      if (side.length <= budget) {
+        for (const tick of side) bubbles.push({ ...tick, count: 1 });
+        continue;
+      }
+      const bucketSize = Math.ceil(side.length / budget);
+      for (let start = 0; start < side.length; start += bucketSize)
+        bubbles.push(merge(side.slice(start, start + bucketSize)));
+    }
+    return bubbles;
+  }
+  function merge(slice) {
+    let quantity = 0;
+    let weighted = 0;
+    for (const tick of slice) {
+      const q = tick.quantity || 0;
+      quantity += q;
+      weighted += q * tick.price;
+    }
+    const price2 = quantity > 0 ? weighted / quantity : slice[0].price;
+    const middle = slice[Math.floor(slice.length / 2)];
+    return {
+      symbol: slice[0].symbol,
+      side: slice[0].side,
+      buy: slice[0].buy,
+      price: price2,
+      quantity,
+      time: middle.time,
+      index: middle.index,
+      count: slice.length
+    };
+  }
+
+  // src/tradefeed-bubbles.ts
+  var PAD_X = 10;
+  var PAD_Y = 10;
+  var AXIS_WIDTH = 56;
+  var LABEL_GAP = 4;
+  var LANE_GAP = 2;
+  var MIN_LANE_HEIGHT = 20;
+  var AXIS_TICKS = 3;
+  var MIN_RADIUS = 2;
+  var MAX_RADIUS = 22;
+  var RADIUS_LANE_SHARE = 0.4;
+  var BUCKET_WIDTH = 8;
+  var MIN_BUCKETS = 6;
+  var MAX_BUCKETS = 30;
+  function layoutBubbles(input) {
+    const { width, height, total } = input;
+    const axisX = Math.max(PAD_X + 1, width - AXIS_WIDTH);
+    const drawWidth = Math.max(1, axisX - PAD_X);
+    const layout = { axisX, labelX: axisX + LABEL_GAP, lanes: [], bubbles: [] };
+    const lanes = input.lanes.filter((lane) => lane.ticks.length > 0);
+    if (lanes.length === 0) return layout;
+    const named = input.lanes.length > 1;
+    const laneHeight = Math.max(
+      MIN_LANE_HEIGHT,
+      (height - 2 * PAD_Y - LANE_GAP * (input.lanes.length - 1)) / input.lanes.length
+    );
+    input.lanes.forEach((lane, position) => {
+      const laneTop = named ? PAD_Y + position * (laneHeight + LANE_GAP) : PAD_Y;
+      const laneSpan = named ? laneHeight : Math.max(MIN_LANE_HEIGHT, height - 2 * PAD_Y);
+      const scale = priceScale(lane.ticks, laneTop, laneSpan);
+      layout.lanes.push({
+        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 ? [] : axisTicks2(scale)
+      });
+      if (lane.ticks.length === 0) return;
+      const buckets = Math.max(MIN_BUCKETS, Math.min(MAX_BUCKETS, Math.floor(drawWidth / BUCKET_WIDTH)));
+      const bubbles = aggregateBubbles(lane.ticks, buckets);
+      let maxQuantity = 0;
+      for (const bubble of bubbles) if (bubble.quantity > maxQuantity) maxQuantity = bubble.quantity;
+      const quantityScale = Math.max(maxQuantity, Number.EPSILON);
+      const radiusCap = Math.min(MAX_RADIUS, laneSpan * RADIUS_LANE_SHARE);
+      for (const bubble of bubbles) {
+        layout.bubbles.push({
+          // Newest print (index 0) at the right edge, oldest at the left.
+          x: PAD_X + drawWidth * (total <= 1 ? 1 : 1 - bubble.index / (total - 1)),
+          y: scale.top + scale.height * (1 - (bubble.price - scale.min) / scale.range),
+          radius: MIN_RADIUS + Math.sqrt(Math.max(0, bubble.quantity) / quantityScale) * radiusCap,
+          bubble
+        });
+      }
+    });
+    layout.bubbles.sort((left, right) => right.bubble.index - left.bubble.index);
+    return layout;
+  }
+  function priceScale(ticks, top, height) {
+    let min = Infinity;
+    let max = -Infinity;
+    for (const tick of ticks) {
+      if (tick.price < min) min = tick.price;
+      if (tick.price > max) max = tick.price;
+    }
+    if (!isFinite(min) || !isFinite(max)) {
+      min = 0;
+      max = 0;
+    }
+    return { top, height, min, range: Math.max(max - min, Number.EPSILON) };
+  }
+  function axisTicks2(scale) {
+    const format = priceFormatter(scale.min, scale.min + scale.range);
+    const ticks = [];
+    for (let step = 0; step < AXIS_TICKS; step++) {
+      const fraction = step / (AXIS_TICKS - 1);
+      ticks.push({
+        text: format(scale.min + scale.range - scale.range * fraction),
+        y: scale.top + scale.height * fraction
+      });
+    }
+    return ticks;
+  }
+  function priceFormatter(min, max) {
+    const magnitude = Math.max(Math.abs(min), Math.abs(max));
+    let digits = 6;
+    if (magnitude >= 1e3) digits = 0;
+    else if (magnitude >= 10) digits = 2;
+    else if (magnitude >= 0.1) digits = 4;
+    return (price2) => price2.toLocaleString(void 0, {
+      minimumFractionDigits: digits,
+      maximumFractionDigits: digits
+    });
+  }
+
+  // src/tradefeed-widget.ts
+  var FILL_ALPHA = 0.55;
+  var STROKE_ALPHA = 0.9;
+  var LABEL_ALPHA3 = 0.55;
+  var SEPARATOR_ALPHA = 0.12;
+  var RULE_ALPHA = 0.08;
+  var HOVER_SLACK = 6;
+  var TOOLTIP_OFFSET2 = 12;
+  var TOOLTIP_MARGIN2 = 4;
+  var _TradeFeedWidget = class _TradeFeedWidget {
+    static create(hostEl, state, deps) {
+      const host = assertHost(deps?.host, "TradeFeedWidget");
+      const root = _TradeFeedWidget._buildRoot(host);
+      root.id = makePanelId(_TradeFeedWidget.TYPE);
+      hostEl.appendChild(root);
+      return new _TradeFeedWidget(root, state || {}, deps);
+    }
+    // The panel's markup. The host stylesheet reads this structure, and a
+    // docking host lifts `.panel-header`'s children into its tab strip.
+    //
+    // Two `+` buttons, and they are not the same gesture: the one in the header
+    // pins another instrument to THIS feed, the one beside it asks the host for
+    // another feed panel. The tooltips are what tell them apart, so neither is
+    // an icon on its own.
+    static _buildRoot(host) {
+      const addInstrument = host.t("AddInstrument");
+      const marketTrades = host.t("MarketTrades");
+      return makePanelRoot("tradefeed-panel tf-tab-market tf-view-list", host.t("TradeFeed"), [
+        makeElement("div", "panel-header", {}, [
+          makeElement("span", "", {}, [marketTrades]),
+          makeIconButton("bt-icon-btn tf-add-symbol-btn", addInstrument, "bi-plus-lg", { type: "button" }),
+          makeIconButton("bt-icon-btn panel-add-btn", host.t("Add trade feed"), "bi-window-plus", { type: "button" }),
+          makeElement("div", "tradefeed-view-toggle tf-view-toggle", { role: "group", "aria-label": host.t("TradeFeedView") }, [
+            makeIconButton("tf-view-btn", host.t("ListView"), "bi-list-ul", { type: "button", "data-view": "list" }),
+            makeIconButton("tf-view-btn", host.t("BubbleChart"), "bi-circle-fill", { type: "button", "data-view": "bubbles" })
+          ]),
+          makeIconButton("bt-icon-btn bt-icon-cancel panel-close-btn", host.t("ClosePanel"), "bi-x", { type: "button" })
+        ]),
+        makeElement("div", "tf-tabs", { role: "tablist", "aria-label": host.t("Trade feed tabs") }, [
+          makeElement("button", "tf-tab active", { type: "button", role: "tab", "aria-selected": "true", "data-tab": "market" }, [marketTrades]),
+          makeElement("button", "tf-tab", { type: "button", role: "tab", "aria-selected": "false", "data-tab": "my" }, [host.t("My trades")])
+        ]),
+        makeElement("div", "tf-extras", { role: "list", "aria-label": host.t("ExtraInstruments"), hidden: "" }, []),
+        // Each tape is a DataGrid over the shared table skin: the <thead>
+        // is left empty for the grid to fill, which is also what makes the
+        // tape sortable and gives it the grid's menu and selection.
+        makeElement("div", "tradefeed-content tf-market", { "aria-live": "polite" }, [
+          makeElement("table", "terminal-table tradefeed-table", { role: "table", "aria-label": marketTrades }, [
+            makeElement("thead", "", {}, []),
+            makeElement("tbody", "", {}, [])
+          ])
+        ]),
+        makeElement("div", "tradefeed-content tf-my", {}, [
+          makeElement("table", "terminal-table tradefeed-table", { role: "table", "aria-label": host.t("My trades") }, [
+            makeElement("thead", "", {}, []),
+            makeElement("tbody", "", {}, [])
+          ])
+        ]),
+        makeElement("canvas", "tradefeed-bubbles tf-bubbles", { "aria-hidden": "true" }, []),
+        makeElement("div", "tf-bubble-tooltip", { role: "tooltip", hidden: "" }, [])
+      ]);
+    }
+    constructor(rootEl, state, deps) {
+      this._host = assertHost(deps?.host, "TradeFeedWidget");
+      this.rootEl = rootEl;
+      this.extrasEl = this.rootEl.querySelector(".tf-extras");
+      this.bubbleCanvas = this.rootEl.querySelector(".tf-bubbles");
+      this._tabsEl = this.rootEl.querySelector(".tf-tabs");
+      this._viewToggleEl = this.rootEl.querySelector(".tf-view-toggle");
+      this._tooltipEl = this.rootEl.querySelector(".tf-bubble-tooltip");
+      this._addBtn = this.rootEl.querySelector(".panel-add-btn");
+      this._closeBtn = this.rootEl.querySelector(".panel-close-btn");
+      this._addSymbolBtn = this.rootEl.querySelector(".tf-add-symbol-btn");
+      this._bubbleCtx = this.bubbleCanvas?.getContext("2d") ?? null;
+      this.trades = [];
+      this.bubbleTrades = [];
+      this.myTrades = [];
+      this.avgQty = 100;
+      this.tab = "market";
+      this._seq = 0;
+      this._bubbleHits = [];
+      this._canvasSize = null;
+      this._resizeObserver = null;
+      this._marketGrid = this._makeGrid(".tf-market");
+      this._myGrid = this._makeGrid(".tf-my");
+      const saved = this._host.preferences.get(_TradeFeedWidget.VIEW_KEY, null);
+      this.view = saved === "bubbles" ? "bubbles" : "list";
+      this._activeSymbol = null;
+      this._extraSymbols = new Set(Array.isArray(state.extras) ? state.extras : []);
+      this._addBtn?.addEventListener("click", (e) => {
+        e.preventDefault();
+        this._host.spawn({ extras: [...this._extraSymbols] });
+      });
+      this._closeBtn?.addEventListener("click", (e) => {
+        e.preventDefault();
+        this.dispose();
+        this._host.close();
+      });
+      this._addSymbolBtn?.addEventListener("click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        this._host.trading.pickInstrument((symbol) => void this.addExtraSymbol(symbol));
+      });
+      this._bindTabs();
+      this._bindViewToggle();
+      this._bindBubbleHover();
+      this._applyView();
+      this._renderExtras();
+      for (const symbol of this._extraSymbols)
+        void this._host.trading.marketData.addSymbol(symbol, MarketDataLevels.Tape).catch(() => {
+        });
+      if (this.bubbleCanvas && typeof ResizeObserver === "function") {
+        this._resizeObserver = new ResizeObserver(() => {
+          this._sizeCanvas();
+          this._renderBubbles();
+        });
+        this._resizeObserver.observe(this.bubbleCanvas);
+      }
+      this._host.register(this);
+    }
+    dispose() {
+      try {
+        this._resizeObserver?.disconnect();
+      } catch {
+      }
+      this._marketGrid?.destroy();
+      this._myGrid?.destroy();
+      for (const symbol of this._extraSymbols)
+        void this._host.trading.marketData.removeSymbol(symbol).catch(() => {
+        });
+      this._host.unregister(this);
+      try {
+        this.rootEl.remove();
+      } catch {
+      }
+    }
+    /// Which symbol the rest of the page is showing. The feed accepts prints
+    /// for it without it being pinned, and re-syncs so the symbol column
+    /// appears or disappears with the pinned set.
+    setActiveSymbol(symbol) {
+      this._activeSymbol = symbol || null;
+      this._renderExtras();
+      this._renderBubbles();
+    }
+    /// Replace the tape wholesale — what a host does when the page moves to a
+    /// different instrument. The flash baseline resets with it: a new
+    /// instrument's history is history, not fifty arrivals at once.
+    setTrades(trades) {
+      const rows = (trades || []).map((t) => this._stamp(t));
+      this.trades = rows.slice(0, _TradeFeedWidget.MAX_ROWS);
+      this.bubbleTrades = rows.slice(0, _TradeFeedWidget.MAX_BUBBLES);
+      if (this.trades.length > 0) {
+        const total = this.trades.reduce((sum, t) => sum + (t.quantity ?? 0), 0);
+        this.avgQty = total / this.trades.length || this.avgQty;
       }
       this._marketGrid?.flashReset();
       this._marketGrid?.setRows([...this.trades]);
@@ -4963,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";
@@ -4973,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";
@@ -5049,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", {}, [