@stocksharp/trading-controls 0.1.0 → 1.1.1

package/dist/sstradingcontrols.js

@@ -26,17 +26,24 @@ var SSTradingControls = (() => {
     ActiveOrdersWidget: () => ActiveOrdersWidget,
     ControlTypes: () => ControlTypes,
     MarketDataLevels: () => MarketDataLevels,
+    OrderBookWidget: () => OrderBookWidget,
+    OrderEntrySides: () => OrderEntrySides,
+    OrderEntryTypes: () => OrderEntryTypes,
+    OrderEntryWidget: () => OrderEntryWidget,
     OrderStates: () => OrderStates,
     PRESENTATION_CLASSES: () => PRESENTATION_CLASSES,
     PositionsWidget: () => PositionsWidget,
+    TradeFeedWidget: () => TradeFeedWidget,
     TradeHistoryWidget: () => TradeHistoryWidget,
     WatchlistWidget: () => WatchlistWidget,
+    aggregateBubbles: () => aggregateBubbles,
     assertHost: () => assertHost,
     cleanRejectReason: () => cleanRejectReason,
     formatPnl: () => formatPnl,
     formatPrice: () => formatPrice,
     formatQty: () => formatQty,
     formatTime: () => formatTime,
+    layoutBubbles: () => layoutBubbles,
     makeElement: () => makeElement,
     makeIcon: () => makeIcon,
     makeIconButton: () => makeIconButton,
@@ -63,10 +70,12 @@ var SSTradingControls = (() => {
     _required(host.t, "host.t", "function", controlName);
     _required(host.presentation, "host.presentation", "object", controlName);
     _required(host.presentation.sideText, "host.presentation.sideText", "function", controlName);
+    _required(host.presentation.isBuy, "host.presentation.isBuy", "function", controlName);
     _required(host.presentation.typeText, "host.presentation.typeText", "function", controlName);
     _required(host.presentation.statusText, "host.presentation.statusText", "function", controlName);
     _required(host.presentation.sideClass, "host.presentation.sideClass", "function", controlName);
     _required(host.presentation.pnlClass, "host.presentation.pnlClass", "function", controlName);
+    _required(host.presentation.canvasPalette, "host.presentation.canvasPalette", "function", controlName);
     _required(host.preferences, "host.preferences", "object", controlName);
     _required(host.preferences.get, "host.preferences.get", "function", controlName);
     _required(host.preferences.set, "host.preferences.set", "function", controlName);
@@ -107,7 +116,10 @@ var SSTradingControls = (() => {
     Watchlist: "watchlist",
     ActiveOrders: "activeOrders",
     TradeHistory: "tradeHistory",
-    Positions: "positions"
+    Positions: "positions",
+    OrderBook: "orderbook",
+    TradeFeed: "tradefeed",
+    OrderEntry: "orderEntry"
   };
 
   // src/formatters.ts
@@ -181,6 +193,59 @@ var SSTradingControls = (() => {
     return `panel-${type}-${Date.now().toString(36)}-${Math.floor(Math.random() * 1e3).toString(36)}`;
   }
 
+  // src/grid-menu.ts
+  function makeGridMenu(host) {
+    return {
+      labels: {
+        sortAsc: host.t("SortAscending"),
+        sortDesc: host.t("SortDescending"),
+        sortClear: host.t("ClearSort"),
+        hideColumn: host.t("HideColumn"),
+        showAllColumns: host.t("ShowAllColumns"),
+        groupBy: host.t("GroupByColumn"),
+        ungroup: host.t("Ungroup"),
+        filterByValue: (text) => host.t("Filter by this value: {0}", text),
+        filterRule: host.t("FilterRule"),
+        showFilters: host.t("ShowFilterRow"),
+        hideFilters: host.t("HideFilterRow"),
+        showHeader: host.t("ShowHeaderRow"),
+        hideHeader: host.t("HideHeaderRow"),
+        clearFilters: host.t("ClearFilters"),
+        copyCell: host.t("CopyCell"),
+        copyRow: host.t("CopyRow"),
+        copyRows: (count) => host.t("Copy selected rows ({0})", count),
+        exportXlsx: host.t("ExportToXlsx")
+      },
+      filterDialog: {
+        labels: {
+          title: (header) => host.t("Filter: {0}", header),
+          apply: host.t("Apply"),
+          clear: host.t("Clear"),
+          cancel: host.t("Cancel"),
+          value: host.t("Value"),
+          and: host.t("FilterAnd"),
+          ops: {
+            contains: host.t("FilterOpContains"),
+            notContains: host.t("FilterOpNotContains"),
+            startsWith: host.t("FilterOpStartsWith"),
+            endsWith: host.t("FilterOpEndsWith"),
+            eq: host.t("FilterOpEq"),
+            ne: host.t("FilterOpNe"),
+            gt: host.t("FilterOpGt"),
+            ge: host.t("FilterOpGe"),
+            lt: host.t("FilterOpLt"),
+            le: host.t("FilterOpLe"),
+            between: host.t("FilterOpBetween"),
+            anyOf: host.t("FilterOpAnyOf"),
+            noneOf: host.t("FilterOpNoneOf"),
+            empty: host.t("FilterOpEmpty"),
+            notEmpty: host.t("FilterOpNotEmpty")
+          }
+        }
+      }
+    };
+  }
+
   // node_modules/@stocksharp/grids/src/table-sort.ts
   var SortDirections = {
     Asc: "asc",
@@ -189,19 +254,21 @@ var SSTradingControls = (() => {
   function readByKey(row, key) {
     return row === null || row === void 0 ? void 0 : row[key];
   }
-  var TableSort = class _TableSort {
+  var TableSort = class {
     // `defaultSort` is the order applied when no header is explicitly selected — the table's
     // resting sort. Pass null only for a table that genuinely has no meaningful default (raw row
     // order); every real blotter should name one so its first paint is deterministic.
-    constructor(headerEl, accessors, onChange, defaultSort) {
+    constructor(headerEl, accessors, onChange, defaultSort, collator) {
       __publicField(this, "col");
       __publicField(this, "dir");
       __publicField(this, "_headerEl");
       __publicField(this, "_accessors");
       __publicField(this, "_onChange");
       __publicField(this, "_default");
+      __publicField(this, "_collator");
       this.col = null;
       this.dir = SortDirections.Asc;
+      this._collator = collator;
       this._headerEl = headerEl;
       this._accessors = accessors || {};
       this._onChange = onChange;
@@ -248,14 +315,40 @@ var SSTradingControls = (() => {
         if (aEmpty && bEmpty) return 0;
         if (aEmpty) return 1;
         if (bEmpty) return -1;
-        return _TableSort._compare(av, bv) * factor;
+        return this._compare(av, bv) * factor;
       });
     }
-    static _compare(a, b) {
+    _compare(a, b) {
       const an = typeof a === "number" ? a : Number(a);
       const bn = typeof b === "number" ? b : Number(b);
       if (isFinite(an) && isFinite(bn)) return an - bn;
-      return String(a).localeCompare(String(b));
+      return this._collator.compare(String(a), String(b));
+    }
+    /**
+     * The column the user picked, or null while the table's own default is in effect.
+     *
+     * Deliberately not the effective sort: this is what gets stored and handed back
+     * to `set`, and storing the default as though it were a choice would pin it --
+     * a later change to the table's default would then never reach anyone who had
+     * ever looked at the table.
+     */
+    current() {
+      return this.col ? { col: this.col, dir: this.dir } : null;
+    }
+    /** Pick a column, or pass null to fall back to the table's default. */
+    set(col, dir) {
+      this.col = col;
+      this.dir = dir || SortDirections.Asc;
+      this._updateHeader();
+      this._onChange();
+    }
+    /**
+     * Re-mark the header cells. A grid that rebuilds its `<thead>` -- moving a column,
+     * hiding one -- throws away the marks with the old cells, and the rows would then
+     * sit sorted under a header that says nothing about why.
+     */
+    refreshHeader() {
+      this._updateHeader();
     }
     _updateHeader() {
       if (!this._headerEl) return;
@@ -269,6 +362,310 @@ var SSTradingControls = (() => {
     }
   };
 
+  // node_modules/@stocksharp/grids/src/context-menu.ts
+  var DEFAULTS = {
+    menu: "grid-menu",
+    item: "grid-menu-item",
+    separator: "grid-menu-separator",
+    disabled: "is-disabled",
+    checked: "is-checked"
+  };
+  var _GridContextMenu = class _GridContextMenu {
+    constructor(classes) {
+      __publicField(this, "_classes");
+      __publicField(this, "_el", null);
+      __publicField(this, "_dismiss", null);
+      this._classes = { ...DEFAULTS, ...classes || {} };
+    }
+    /** Whether this menu is the one currently on screen. */
+    get isOpen() {
+      return this._el !== null;
+    }
+    /**
+     * Draw the items at (x, y) in viewport coordinates. Opening a menu closes
+     * whichever one was open, including this one -- a right-click inside an open
+     * menu means "somewhere else", not "two menus".
+     */
+    open(items, x, y) {
+      _GridContextMenu._open?.close();
+      if (items.length === 0) return;
+      const el = document.createElement("div");
+      el.className = this._classes.menu;
+      el.setAttribute("role", "menu");
+      el.style.position = "fixed";
+      el.style.left = `${x}px`;
+      el.style.top = `${y}px`;
+      for (const item of items) el.appendChild(this._itemEl(item));
+      document.body.appendChild(el);
+      this._el = el;
+      _GridContextMenu._open = this;
+      const dismiss = (event) => {
+        if (event.type === "keydown" && event.key !== "Escape") return;
+        const target = event.target;
+        if (event.type === "mousedown" && target && el.contains(target)) return;
+        this.close();
+      };
+      document.addEventListener("mousedown", dismiss, true);
+      document.addEventListener("keydown", dismiss, true);
+      window.addEventListener("resize", dismiss);
+      window.addEventListener("scroll", dismiss, true);
+      this._dismiss = () => {
+        document.removeEventListener("mousedown", dismiss, true);
+        document.removeEventListener("keydown", dismiss, true);
+        window.removeEventListener("resize", dismiss);
+        window.removeEventListener("scroll", dismiss, true);
+      };
+      this._keepInside(el, x, y);
+    }
+    close() {
+      if (!this._el) return;
+      this._dismiss?.();
+      this._dismiss = null;
+      this._el.parentNode?.removeChild(this._el);
+      this._el = null;
+      if (_GridContextMenu._open === this) _GridContextMenu._open = null;
+    }
+    _itemEl(item) {
+      if (!item.label) {
+        const sep = document.createElement("div");
+        sep.className = this._classes.separator;
+        sep.setAttribute("role", "separator");
+        return sep;
+      }
+      const el = document.createElement("div");
+      el.className = this._classes.item;
+      if (item.disabled) el.className += ` ${this._classes.disabled}`;
+      if (item.checked) el.className += ` ${this._classes.checked}`;
+      el.setAttribute("role", "menuitem");
+      el.textContent = item.label;
+      if (!item.disabled && item.run) {
+        el.addEventListener("click", () => {
+          this.close();
+          item.run();
+        });
+      }
+      return el;
+    }
+    /**
+     * Nudge the menu back inside the window when it was opened near an edge.
+     * Measured after it is in the document, because until then it has no size.
+     */
+    _keepInside(el, x, y) {
+      const rect = typeof el.getBoundingClientRect === "function" ? el.getBoundingClientRect() : null;
+      if (!rect) return;
+      const width = typeof window !== "undefined" ? window.innerWidth : 0;
+      const height = typeof window !== "undefined" ? window.innerHeight : 0;
+      if (width && x + rect.width > width) el.style.left = `${Math.max(0, width - rect.width)}px`;
+      if (height && y + rect.height > height) el.style.top = `${Math.max(0, height - rect.height)}px`;
+    }
+  };
+  __publicField(_GridContextMenu, "_open", null);
+  var GridContextMenu = _GridContextMenu;
+
+  // node_modules/@stocksharp/grids/src/filter-dialog.ts
+  var DEFAULT_CLASSES = {
+    dialog: "grid-filter-dialog",
+    title: "grid-filter-dialog-title",
+    row: "grid-filter-dialog-row",
+    select: "grid-filter-dialog-op",
+    input: "grid-filter-dialog-value",
+    values: "grid-filter-dialog-values",
+    valuesItem: "grid-filter-dialog-values-item",
+    actions: "grid-filter-dialog-actions",
+    apply: "grid-filter-dialog-apply",
+    clear: "grid-filter-dialog-clear",
+    cancel: "grid-filter-dialog-cancel"
+  };
+  var DEFAULT_LABELS = {
+    title: (header) => `Filter: ${header}`,
+    apply: "Apply",
+    clear: "Clear",
+    cancel: "Cancel",
+    value: "Value",
+    and: "and",
+    ops: {
+      contains: "contains",
+      notContains: "does not contain",
+      startsWith: "starts with",
+      endsWith: "ends with",
+      eq: "=",
+      ne: "\u2260",
+      gt: ">",
+      ge: "\u2265",
+      lt: "<",
+      le: "\u2264",
+      between: "between",
+      anyOf: "is any of",
+      noneOf: "is none of",
+      empty: "is empty",
+      notEmpty: "is not empty"
+    }
+  };
+  var OPS = {
+    text: ["contains", "notContains", "startsWith", "endsWith", "eq", "ne", "empty", "notEmpty"],
+    number: ["eq", "ne", "gt", "ge", "lt", "le", "between", "empty", "notEmpty"],
+    // A set column holds one of a handful of values, and the values are on screen to
+    // be ticked. Asking such a column to be typed at is how a filter on a side column
+    // ends up comparing "Buy" against the 0 the column actually holds.
+    set: ["anyOf", "noneOf", "empty", "notEmpty"]
+  };
+  var NEEDS_NO_OPERAND = /* @__PURE__ */ new Set(["empty", "notEmpty"]);
+  var PICKS_VALUES = /* @__PURE__ */ new Set(["anyOf", "noneOf"]);
+  var _GridFilterDialog = class _GridFilterDialog {
+    constructor(classes, labels) {
+      __publicField(this, "_classes");
+      __publicField(this, "_labels");
+      __publicField(this, "_el", null);
+      __publicField(this, "_unbind", null);
+      this._classes = { ...DEFAULT_CLASSES, ...classes || {} };
+      this._labels = { ...DEFAULT_LABELS, ...labels || {}, ops: { ...DEFAULT_LABELS.ops, ...labels?.ops || {} } };
+    }
+    get isOpen() {
+      return this._el !== null;
+    }
+    /**
+     * Ask for a filter on one column. `commit` is called with the new filter, or
+     * with null when the user clears it; cancelling calls nothing at all, so a
+     * dialog dismissed by mistake leaves the table exactly as it was.
+     */
+    open(options, commit) {
+      _GridFilterDialog._open?.close();
+      const ops = OPS[options.kind] || OPS.text;
+      const current = options.current || {};
+      const startOp = current.op || (current.min !== void 0 || current.max !== void 0 ? "between" : ops[0]);
+      const picked = new Set(current.values || []);
+      const el = document.createElement("div");
+      el.className = this._classes.dialog;
+      el.setAttribute("role", "dialog");
+      el.style.position = "fixed";
+      el.style.left = `${options.x}px`;
+      el.style.top = `${options.y}px`;
+      const title = document.createElement("div");
+      title.className = this._classes.title;
+      title.textContent = this._labels.title(options.header);
+      el.appendChild(title);
+      const row = document.createElement("div");
+      row.className = this._classes.row;
+      const select = document.createElement("select");
+      select.className = this._classes.select;
+      for (const op of ops) {
+        const option = document.createElement("option");
+        option.value = op;
+        option.textContent = this._labels.ops[op];
+        select.appendChild(option);
+      }
+      select.value = startOp;
+      const value = document.createElement("input");
+      value.className = this._classes.input;
+      value.type = options.kind === "number" ? "number" : "text";
+      value.placeholder = this._labels.value;
+      value.value = current.text !== void 0 ? current.text : current.min !== void 0 ? String(current.min) : "";
+      const and = document.createElement("span");
+      and.textContent = ` ${this._labels.and} `;
+      const upper = document.createElement("input");
+      upper.className = this._classes.input;
+      upper.type = "number";
+      upper.value = current.max !== void 0 ? String(current.max) : "";
+      row.appendChild(select);
+      row.appendChild(value);
+      row.appendChild(and);
+      row.appendChild(upper);
+      el.appendChild(row);
+      const boxes = [];
+      const list = document.createElement("div");
+      list.className = this._classes.values;
+      for (const option of options.values) {
+        const item = document.createElement("label");
+        item.className = this._classes.valuesItem;
+        const box = document.createElement("input");
+        box.type = "checkbox";
+        box.value = option.value;
+        box.checked = picked.has(option.value);
+        boxes.push(box);
+        item.appendChild(box);
+        item.appendChild(document.createTextNode(option.label));
+        list.appendChild(item);
+      }
+      if (options.values.length) el.appendChild(list);
+      const sync = () => {
+        const op = select.value;
+        const picks = PICKS_VALUES.has(op);
+        const none = NEEDS_NO_OPERAND.has(op) || picks;
+        value.style.display = none ? "none" : "";
+        and.style.display = op === "between" ? "" : "none";
+        upper.style.display = op === "between" ? "" : "none";
+        list.style.display = picks ? "" : "none";
+      };
+      select.addEventListener("change", sync);
+      sync();
+      const actions = document.createElement("div");
+      actions.className = this._classes.actions;
+      const applyButton = this._button(this._labels.apply, this._classes.apply, () => {
+        const op = select.value;
+        if (NEEDS_NO_OPERAND.has(op)) return commit({ op });
+        if (PICKS_VALUES.has(op)) {
+          const values = boxes.filter((box) => box.checked).map((box) => box.value);
+          return commit(values.length ? { op, values } : null);
+        }
+        if (op === "between") {
+          const min = value.value.trim() === "" ? void 0 : Number(value.value);
+          const max = upper.value.trim() === "" ? void 0 : Number(upper.value);
+          return commit(min === void 0 && max === void 0 ? null : { op, min, max });
+        }
+        return commit(value.value.trim() === "" ? null : { op, text: value.value });
+      });
+      actions.appendChild(applyButton);
+      actions.appendChild(this._button(this._labels.clear, this._classes.clear, () => commit(null)));
+      actions.appendChild(this._button(this._labels.cancel, this._classes.cancel, () => {
+      }));
+      el.appendChild(actions);
+      document.body.appendChild(el);
+      this._el = el;
+      _GridFilterDialog._open = this;
+      const dismiss = (event) => {
+        const target = event.target;
+        if (event.type === "keydown") {
+          const key = event.key;
+          if (key === "Enter") {
+            if (target !== select) applyButton.click();
+            return;
+          }
+          if (key !== "Escape") return;
+        }
+        if (event.type === "mousedown" && target && el.contains(target)) return;
+        this.close();
+      };
+      document.addEventListener("mousedown", dismiss, true);
+      document.addEventListener("keydown", dismiss, true);
+      this._unbind = () => {
+        document.removeEventListener("mousedown", dismiss, true);
+        document.removeEventListener("keydown", dismiss, true);
+      };
+      if (typeof value.focus === "function") value.focus();
+    }
+    close() {
+      if (!this._el) return;
+      this._unbind?.();
+      this._unbind = null;
+      this._el.parentNode?.removeChild(this._el);
+      this._el = null;
+      if (_GridFilterDialog._open === this) _GridFilterDialog._open = null;
+    }
+    _button(label, className, run) {
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.className = className;
+      btn.textContent = label;
+      btn.addEventListener("click", () => {
+        this.close();
+        run();
+      });
+      return btn;
+    }
+  };
+  __publicField(_GridFilterDialog, "_open", null);
+  var GridFilterDialog = _GridFilterDialog;
+
   // node_modules/@stocksharp/grids/src/table-export.ts
   var XML_DECL = '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>\r\n';
   var CONTENT_TYPES = XML_DECL + '<Types xmlns="http://schemas.openxmlformats.org/package/2006/content-types"><Default Extension="rels" ContentType="application/vnd.openxmlformats-package.relationships+xml"/><Default Extension="xml" ContentType="application/xml"/><Override PartName="/xl/workbook.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet.main+xml"/><Override PartName="/xl/worksheets/sheet1.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.worksheet+xml"/></Types>';
@@ -391,17 +788,75 @@ var SSTradingControls = (() => {
   };
 
   // node_modules/@stocksharp/grids/src/data-grid.ts
+  var NEWLINE = String.fromCharCode(10);
+  var TAB = String.fromCharCode(9);
   var GridPinnedPlacements = {
     Top: "top",
     Bottom: "bottom"
   };
-  var DataGrid = class _DataGrid {
+  var MENU_LABELS = {
+    sortAsc: "Sort ascending",
+    sortDesc: "Sort descending",
+    sortClear: "Clear sort",
+    hideColumn: "Hide column",
+    showAllColumns: "Show all columns",
+    groupBy: "Group by this column",
+    ungroup: "Ungroup",
+    filterByValue: (text) => `Filter by this value: ${text}`,
+    filterRule: "Filter\u2026",
+    showFilters: "Show filter row",
+    hideFilters: "Hide filter row",
+    showHeader: "Show header row",
+    hideHeader: "Hide header row",
+    clearFilters: "Clear filters",
+    copyCell: "Copy cell",
+    copyRow: "Copy row",
+    copyRows: (count) => `Copy selected rows (${count})`,
+    exportXlsx: "Export to .xlsx"
+  };
+  var _DataGrid = class _DataGrid {
     constructor(options) {
       __publicField(this, "options");
       __publicField(this, "sort");
       __publicField(this, "_rows");
       __publicField(this, "_rowEls");
       __publicField(this, "_cellEls");
+      /// Display order of every declared column, hidden ones included -- hiding must
+      /// not lose the slot a column goes back to.
+      __publicField(this, "_order");
+      __publicField(this, "_hidden");
+      /// The column a drag started on. Held here rather than in dataTransfer because
+      /// the payload is ours, not the page's: dropping a header onto another window
+      /// should do nothing, and reading it back out of the event would invite it.
+      __publicField(this, "_dragKey");
+      __publicField(this, "_filters");
+      __publicField(this, "_group");
+      __publicField(this, "_filtersVisible");
+      __publicField(this, "_headerVisible");
+      /// By row key, never by index or element: a repaint rebuilds every `<tr>`, and a
+      /// filter takes rows off screen and brings them back.
+      __publicField(this, "_selected");
+      /// Where a shift-click measures its range from.
+      __publicField(this, "_anchorKey");
+      // The keys on screen at the previous paint, for `flashNewClass`. Null until
+      // the first paint has happened — nothing was on screen yet, so nothing is
+      // news — and left null entirely while the option is off.
+      __publicField(this, "_flashKnown");
+      __publicField(this, "_menu");
+      __publicField(this, "_dragging");
+      /// One collator for the whole grid: the sort, the group order, the option list a
+      /// set filter offers, and the ordering filter rules. They compare the same strings
+      /// and had better agree about what comes first.
+      __publicField(this, "_collator");
+      /// What to undo when the grid is destroyed: the listeners it put on the document.
+      __publicField(this, "_release", []);
+      __publicField(this, "_filterDialog");
+      __publicField(this, "_collapsed");
+      /// The rendered filter controls, by column key, so a stored filter can be put
+      /// back into them without rebuilding the row under the user's cursor.
+      __publicField(this, "_filterEls");
+      /// Suppresses onStateChange while setState applies a stored arrangement.
+      __publicField(this, "_restoring");
       for (const col of options.columns) {
         if (col.exportable && !col.value && !col.exportValue)
           throw new Error(`DataGrid: column "${col.key}" is exportable but declares no value to export`);
@@ -410,13 +865,565 @@ var SSTradingControls = (() => {
       this._rows = [];
       this._rowEls = /* @__PURE__ */ new Map();
       this._cellEls = /* @__PURE__ */ new Map();
+      this._order = options.columns.map((col) => col.key);
+      this._hidden = /* @__PURE__ */ new Set();
+      this._dragKey = null;
+      this._filters = {};
+      this._filtersVisible = options.filtersVisible === true;
+      this._headerVisible = options.headerVisible !== false;
+      this._group = null;
+      this._collapsed = /* @__PURE__ */ new Set();
+      this._selected = /* @__PURE__ */ new Set();
+      this._anchorKey = null;
+      this._flashKnown = null;
+      this._menu = null;
+      this._filterDialog = null;
+      this._dragging = false;
+      this._collator = options.collator || new Intl.Collator(
+        options.locale || (typeof document !== "undefined" ? document.documentElement?.lang : "") || void 0,
+        // numeric so a text column of ids reads 1, 2, 10 rather than 1, 10, 2,
+        // and accent-sensitive so it folds case the way the text filters do.
+        { numeric: true, sensitivity: "accent" }
+      );
+      this._filterEls = /* @__PURE__ */ new Map();
+      this._restoring = false;
       const accessors = {};
       for (const col of options.columns) {
         if (col.value) accessors[col.key] = col.value;
       }
       this._renderHead();
-      this.sort = new TableSort(options.head, accessors, () => this.render(), options.defaultSort);
+      this.sort = new TableSort(options.head, accessors, () => this.render(), options.defaultSort, this._collator);
       this._paint();
+      if (options.contextMenu) this._bindContextMenu();
+      if ((options.selection || "none") !== "none") this._bindCopyShortcut();
+    }
+    /** Every declared column in display order, hidden ones included. */
+    columnKeys() {
+      return [...this._order];
+    }
+    /** The columns actually rendered, in the order they are rendered. */
+    visibleColumns() {
+      const byKey = new Map(this.options.columns.map((col) => [col.key, col]));
+      return this._order.filter((key) => !this._hidden.has(key)).map((key) => byKey.get(key));
+    }
+    isColumnHidden(key) {
+      return this._hidden.has(key);
+    }
+    /**
+     * Put the columns in this order. Keys the caller leaves out keep their relative
+     * order behind the ones named -- a layout stored before a column existed must
+     * not make that column disappear.
+     */
+    setColumnOrder(keys) {
+      const known = new Set(this.options.columns.map((col) => col.key));
+      for (const key of keys) {
+        if (!known.has(key)) throw new Error(`DataGrid: no column "${key}" to order`);
+      }
+      this._applyOrder(keys);
+      this._rerender();
+    }
+    hideColumn(key) {
+      if (this._hidden.has(key)) return;
+      this._hidden.add(key);
+      this._rerender();
+    }
+    showColumn(key) {
+      if (!this._hidden.delete(key)) return;
+      this._rerender();
+    }
+    filtersVisible() {
+      return this._filtersVisible;
+    }
+    /** Show or hide the filter row. The filters themselves are kept either way. */
+    showFilters(visible) {
+      if (this._filtersVisible === visible) return;
+      this._filtersVisible = visible;
+      this._rerender();
+    }
+    headerVisible() {
+      return this._headerVisible;
+    }
+    /** Show or hide the caption row. Sort, columns and filters are kept either way. */
+    showHeader(visible) {
+      if (this._headerVisible === visible) return;
+      this._headerVisible = visible;
+      this._rerender();
+    }
+    /** The filters in effect, by column key. Columns with none are absent. */
+    filters() {
+      return { ...this._filters };
+    }
+    /**
+     * Filter a column, or pass null to stop filtering it. A filter with nothing set
+     * -- a text box the user emptied -- is the same as null, so clearing an input
+     * brings the rows back instead of matching nothing.
+     */
+    setFilter(key, filter) {
+      const normalized = filter && _DataGrid._normalizeFilter(filter);
+      if (normalized) this._filters[key] = normalized;
+      else delete this._filters[key];
+      this._afterFilterChange();
+    }
+    clearFilters() {
+      if (Object.keys(this._filters).length === 0) return;
+      this._filters = {};
+      this._afterFilterChange();
+    }
+    /** The held rows that pass every filter, in the order they were handed over. */
+    filteredRows() {
+      const entries = Object.entries(this._filters);
+      if (entries.length === 0) return this._rows;
+      const byKey = new Map(this.options.columns.map((col) => [col.key, col]));
+      return this._rows.filter((row) => entries.every(([key, filter]) => {
+        const col = byKey.get(key);
+        if (!col || !col.value) return true;
+        return this._passes(col.value(row), filter);
+      }));
+    }
+    _afterFilterChange() {
+      this.render();
+      this._refreshFilterRow();
+      if (!this._restoring && this.options.onStateChange) this.options.onStateChange(this.getState());
+    }
+    static _normalizeFilter(filter) {
+      const out = {};
+      if (filter.op === "empty" || filter.op === "notEmpty") return { op: filter.op };
+      if (filter.op) out.op = filter.op;
+      const text = typeof filter.text === "string" ? filter.text.trim() : "";
+      if (text) out.text = text;
+      if (typeof filter.min === "number" && Number.isFinite(filter.min)) out.min = filter.min;
+      if (typeof filter.max === "number" && Number.isFinite(filter.max)) out.max = filter.max;
+      if (filter.values && filter.values.length) out.values = [...filter.values];
+      if (out.op && out.text === void 0 && out.min === void 0 && out.max === void 0 && !out.values) return null;
+      return Object.keys(out).length ? out : null;
+    }
+    _passes(value, filter) {
+      const op = _DataGrid._effectiveOp(filter);
+      if (!op) return true;
+      const text = _DataGrid._text(value);
+      if (op === "anyOf" || op === "noneOf") {
+        const listed = (filter.values || []).includes(text);
+        return op === "anyOf" ? listed : !listed;
+      }
+      if (op === "empty") return text === "";
+      if (op === "notEmpty") return text !== "";
+      if (op === "between") {
+        const n = Number(text);
+        if (!Number.isFinite(n)) return false;
+        if (filter.min !== void 0 && n < filter.min) return false;
+        if (filter.max !== void 0 && n > filter.max) return false;
+        return true;
+      }
+      const operandText = filter.text !== void 0 ? filter.text : filter.min !== void 0 ? String(filter.min) : "";
+      const left = Number(text);
+      const right = Number(operandText);
+      const numeric = text !== "" && operandText !== "" && Number.isFinite(left) && Number.isFinite(right);
+      const order = numeric ? Math.sign(left - right) : this._collator.compare(text, operandText);
+      switch (op) {
+        case "contains":
+          return text.toLowerCase().includes(operandText.toLowerCase());
+        case "notContains":
+          return !text.toLowerCase().includes(operandText.toLowerCase());
+        case "startsWith":
+          return text.toLowerCase().startsWith(operandText.toLowerCase());
+        case "endsWith":
+          return text.toLowerCase().endsWith(operandText.toLowerCase());
+        case "eq":
+          return numeric ? left === right : text.toLowerCase() === operandText.toLowerCase();
+        case "ne":
+          return numeric ? left !== right : text.toLowerCase() !== operandText.toLowerCase();
+        case "gt":
+          return order > 0;
+        case "ge":
+          return order >= 0;
+        case "lt":
+          return order < 0;
+        case "le":
+          return order <= 0;
+        default:
+          return true;
+      }
+    }
+    /// The rule actually in force. Absent `op` keeps the old meaning of the shape, so
+    /// a filter written by the inline row -- or stored before operators existed --
+    /// goes on meaning what it meant.
+    static _effectiveOp(filter) {
+      if (filter.op) return filter.op;
+      if (filter.values !== void 0) return "anyOf";
+      if (filter.min !== void 0 || filter.max !== void 0) return "between";
+      if (filter.text !== void 0) return "contains";
+      return null;
+    }
+    /**
+     * The items the grid offers for a right-click. Public so a host that replaces
+     * the menu can still reach for the parts of it that it wants to keep.
+     */
+    menuItems(context) {
+      const labels = { ...MENU_LABELS, ...this._menuOptions().labels || {} };
+      const items = [];
+      const col = context.column;
+      if (col && col.value) {
+        const sort = this.sort.current();
+        items.push(
+          { label: labels.sortAsc, checked: sort?.col === col.key && sort.dir === "asc", run: () => this.sort.set(col.key, "asc") },
+          { label: labels.sortDesc, checked: sort?.col === col.key && sort.dir === "desc", run: () => this.sort.set(col.key, "desc") },
+          { label: labels.sortClear, disabled: !sort, run: () => this.sort.set(null, null) },
+          {},
+          this._group === col.key ? { label: labels.ungroup, run: () => this.groupBy(null) } : { label: labels.groupBy, run: () => this.groupBy(col.key) }
+        );
+        if (col.filter) {
+          items.push({
+            label: labels.filterRule,
+            checked: this._filters[col.key] !== void 0,
+            run: () => this.openFilterDialog(col.key, context.x, context.y)
+          });
+        }
+        if (context.row !== null) {
+          const value = _DataGrid._text(col.value ? col.value(context.row) : null);
+          items.push({
+            label: labels.filterByValue(this._displayText(col, context.row)),
+            run: () => this.setFilter(col.key, { op: "anyOf", values: [value] })
+          });
+        }
+      }
+      if (this.options.columns.some((c) => c.filter)) {
+        items.push(
+          {
+            label: this._filtersVisible ? labels.hideFilters : labels.showFilters,
+            checked: this._filtersVisible,
+            run: () => this.showFilters(!this._filtersVisible)
+          },
+          { label: labels.clearFilters, disabled: Object.keys(this._filters).length === 0, run: () => this.clearFilters() },
+          {}
+        );
+      }
+      if (col) {
+        items.push({
+          label: labels.hideColumn,
+          // The last visible column cannot go: a table with no columns is a
+          // blank rectangle with no way back to itself.
+          disabled: this.visibleColumns().length <= 1,
+          run: () => this.hideColumn(col.key)
+        });
+      }
+      items.push({
+        label: labels.showAllColumns,
+        disabled: this._hidden.size === 0,
+        run: () => {
+          for (const key of [...this._hidden]) this.showColumn(key);
+        }
+      });
+      items.push({
+        label: this._headerVisible ? labels.hideHeader : labels.showHeader,
+        checked: this._headerVisible,
+        run: () => this.showHeader(!this._headerVisible)
+      });
+      if (context.row !== null) {
+        items.push(
+          {},
+          { label: labels.copyCell, run: () => _DataGrid._copy(context.text) },
+          {
+            // Names how many rows go, because "Copy row" over a selection of
+            // twelve would be a lie about what the click is about to do.
+            label: this._selected.size > 1 ? labels.copyRows(this._selected.size) : labels.copyRow,
+            run: () => this.copyRows(context.row)
+          }
+        );
+      }
+      items.push({}, { label: labels.exportXlsx, run: () => this.download("export", "Export") });
+      return items;
+    }
+    _menuOptions() {
+      const option = this.options.contextMenu;
+      return typeof option === "object" && option !== null ? option : {};
+    }
+    _bindContextMenu() {
+      this._menu = new GridContextMenu(this._menuOptions().classes);
+      const onContext = (event) => {
+        _DataGrid._active = this;
+        const target = event.target;
+        const cell = target && typeof target.closest === "function" ? target.closest("[data-col]") : null;
+        const rowEl = target && typeof target.closest === "function" ? target.closest("[data-row-key]") : null;
+        const column = cell ? this.options.columns.find((c) => c.key === cell.dataset.col) || null : null;
+        const rowKey = rowEl?.dataset.rowKey;
+        const row = rowKey === void 0 ? null : this.displayRows().find((r) => this.options.rowKey(r) === rowKey) || null;
+        const text = column && row && column.value ? _DataGrid._text(column.value(row)) : "";
+        const at = event;
+        const context = { column, row, text, x: at.clientX || 0, y: at.clientY || 0 };
+        const build = this._menuOptions().items;
+        const items = build ? build(context, this.menuItems(context)) : this.menuItems(context);
+        if (items.length === 0) return;
+        event.preventDefault();
+        this._menu.open(items, context.x, context.y);
+      };
+      this.options.head.addEventListener("contextmenu", onContext);
+      this.options.body.addEventListener("contextmenu", onContext);
+    }
+    /// The same columns and the same accessors the sheet uses. A row on the clipboard
+    /// and a row in the .xlsx are the same data going to the same place, so a column
+    /// that renders a button has nothing to contribute to either, and one that exports
+    /// "Buy" must not copy the 0 behind it.
+    _rowText(row) {
+      return this.visibleColumns().filter((col) => col.exportable).map((col) => _DataGrid._text((col.exportValue || col.value)(row))).join(TAB);
+    }
+    /// Put text on the clipboard, returning whether anything was written.
+    /// navigator.clipboard exists only in a secure context, so on a page served over
+    /// plain http to anything but localhost it is simply undefined -- which is how
+    /// Copy row came to do nothing at all on a LAN address while working locally. The
+    /// older execCommand path still works there, so it is the fallback rather than a
+    /// silent no-op.
+    static _copy(text) {
+      const clipboard = typeof navigator !== "undefined" ? navigator.clipboard : void 0;
+      if (clipboard && clipboard.writeText) {
+        clipboard.writeText(text).catch(() => _DataGrid._copyFallback(text));
+        return true;
+      }
+      return _DataGrid._copyFallback(text);
+    }
+    static _copyFallback(text) {
+      if (typeof document === "undefined" || !document.body) return false;
+      const area = document.createElement("textarea");
+      area.value = text;
+      area.style.position = "fixed";
+      area.style.left = "-9999px";
+      document.body.appendChild(area);
+      try {
+        area.select();
+        return typeof document.execCommand === "function" && document.execCommand("copy");
+      } catch {
+        return false;
+      } finally {
+        area.parentNode?.removeChild(area);
+      }
+    }
+    /**
+     * What Copy row and Ctrl+C put on the clipboard: the selected rows when there is
+     * a selection, otherwise the one row asked for. Tab-separated, one row per line,
+     * which is what a spreadsheet reads back as cells.
+     */
+    copyText(row) {
+      const selected = this.selectedRows();
+      const rows = selected.length > 0 ? selected : row === null ? [] : [row];
+      return rows.map((r) => this._rowText(r)).join(NEWLINE);
+    }
+    /** Copy the current selection, or the row given. True when anything was written. */
+    copyRows(row) {
+      const text = this.copyText(row);
+      return text === "" ? false : _DataGrid._copy(text);
+    }
+    /** Selected row keys, in the order they appear on screen. */
+    selectedKeys() {
+      const onScreen = this.displayRows().map((row) => this.options.rowKey(row));
+      const known = new Set(onScreen);
+      return [
+        ...onScreen.filter((key) => this._selected.has(key)),
+        ...[...this._selected].filter((key) => !known.has(key))
+      ];
+    }
+    /** The selected rows that are actually on screen. */
+    selectedRows() {
+      return this.displayRows().filter((row) => this._selected.has(this.options.rowKey(row)));
+    }
+    /**
+     * Forget the flash baseline: the next paint reads as a fresh seed and
+     * flashes nothing. For a host that replaces its rows wholesale — a tape
+     * moving to another instrument is a new history, not fifty arrivals at
+     * once.
+     */
+    flashReset() {
+      this._flashKnown = null;
+    }
+    setSelection(keys) {
+      this._replaceSelection(new Set(keys));
+    }
+    clearSelection() {
+      this._replaceSelection(/* @__PURE__ */ new Set());
+    }
+    _replaceSelection(next) {
+      const before = this.selectedKeys();
+      this._selected = next;
+      const after = this.selectedKeys();
+      if (before.length === after.length && before.every((key, i) => key === after[i])) return;
+      this.render();
+      if (this.options.onSelectionChange) this.options.onSelectionChange(after);
+    }
+    _beginDragSelect() {
+      this._dragging = true;
+      const end = () => {
+        this._dragging = false;
+        document.removeEventListener("mouseup", end, true);
+      };
+      document.addEventListener("mouseup", end, true);
+    }
+    _extendTo(key) {
+      if (this._anchorKey === null) return;
+      const order = this.displayRows().map((row) => this.options.rowKey(row));
+      const from = order.indexOf(this._anchorKey);
+      const to = order.indexOf(key);
+      if (from === -1 || to === -1) return;
+      this._replaceSelection(new Set(order.slice(Math.min(from, to), Math.max(from, to) + 1)));
+    }
+    /// Ctrl+C over the table copies the selected rows. Bound on the document because
+    /// a table has no focus of its own, and answered only by the grid the pointer last
+    /// touched -- otherwise every grid on the page would copy at once.
+    _bindCopyShortcut() {
+      const onKeyDown = (event) => {
+        const e = event;
+        if (!(e.ctrlKey || e.metaKey)) return;
+        const isC = e.code ? e.code === "KeyC" : (e.key || "").toLowerCase() === "c";
+        if (!isC) return;
+        if (_DataGrid._active !== this) return;
+        if (this._selected.size === 0) return;
+        const tag = e.target && e.target.tagName;
+        if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return;
+        if (this.copyRows(null)) event.preventDefault();
+      };
+      document.addEventListener("keydown", onKeyDown);
+      this._release.push(() => document.removeEventListener("keydown", onKeyDown));
+    }
+    /**
+     * Let the grid go. Everything it put outside its own two elements comes off: the
+     * Ctrl+C binding on the document, and any menu or filter popup still open.
+     *
+     * A host needs this whenever it replaces a grid rather than updating one -- the
+     * columns are declared once, so re-declaring them (translated headers, a different
+     * set of columns) means a new grid over the same table, and the old one would go
+     * on answering Ctrl+C from beyond the grave.
+     */
+    destroy() {
+      for (const release of this._release.splice(0)) release();
+      this._menu?.close();
+      this._filterDialog?.close();
+      if (_DataGrid._active === this) _DataGrid._active = null;
+    }
+    _clickRow(key, event) {
+      const mode = this.options.selection || "none";
+      if (mode === "none") return;
+      const modifiers = event;
+      const next = /* @__PURE__ */ new Set();
+      if (mode === "single" || !modifiers.ctrlKey && !modifiers.metaKey && !modifiers.shiftKey) {
+        next.add(key);
+        this._anchorKey = key;
+      } else if (modifiers.shiftKey && this._anchorKey !== null) {
+        const order = this.displayRows().map((row) => this.options.rowKey(row));
+        const from = order.indexOf(this._anchorKey);
+        const to = order.indexOf(key);
+        if (from === -1 || to === -1) next.add(key);
+        else for (const k of order.slice(Math.min(from, to), Math.max(from, to) + 1)) next.add(k);
+      } else {
+        for (const k of this._selected) next.add(k);
+        if (!next.delete(key)) next.add(key);
+        this._anchorKey = key;
+      }
+      this._replaceSelection(next);
+    }
+    /**
+     * Open the rule dialog for a column -- an operator and its operand, which is what
+     * the inline row cannot express without growing a second control per column.
+     */
+    openFilterDialog(key, x, y) {
+      const col = this.options.columns.find((c) => c.key === key);
+      if (!col || !col.filter) return;
+      const options = this._menuOptions().filterDialog || {};
+      if (!this._filterDialog) this._filterDialog = new GridFilterDialog(options.classes, options.labels);
+      this._filterDialog.open(
+        {
+          header: col.header,
+          kind: col.filter,
+          current: this._filters[key] || null,
+          // A set column is picked from, not typed into: the dialog needs the
+          // values the rows actually hold, each under the label it reads as.
+          values: col.filter === "set" ? this._distinctValues(col) : [],
+          x,
+          y
+        },
+        (filter) => this.setFilter(key, filter)
+      );
+    }
+    /** The column the rows are grouped under, or null. */
+    groupedBy() {
+      return this._group;
+    }
+    /** Group by a column, or pass null to go flat. */
+    groupBy(key) {
+      if (key !== null) {
+        const col = this.options.columns.find((c) => c.key === key);
+        if (!col || !col.value) throw new Error(`DataGrid: no column "${key}" with a value to group by`);
+      }
+      this._group = key;
+      this._collapsed.clear();
+      this._afterViewChange();
+    }
+    collapsedGroups() {
+      return [...this._collapsed];
+    }
+    toggleGroup(value) {
+      if (!this._collapsed.delete(value)) this._collapsed.add(value);
+      this._afterViewChange();
+    }
+    _afterViewChange() {
+      this.render();
+      if (!this._restoring && this.options.onStateChange) this.options.onStateChange(this.getState());
+    }
+    /** The arrangement, as a host would store it. */
+    getState() {
+      return {
+        order: [...this._order],
+        hidden: this._order.filter((key) => this._hidden.has(key)),
+        sort: this.sort.current(),
+        filters: this.filters(),
+        filtersVisible: this._filtersVisible,
+        headerVisible: this._headerVisible,
+        group: this._group,
+        collapsed: this.collapsedGroups()
+      };
+    }
+    /**
+     * Restore an arrangement. Unknown column keys are dropped rather than rejected:
+     * a view stored before a deploy has to survive one.
+     */
+    setState(state) {
+      const known = new Set(this.options.columns.map((col) => col.key));
+      this._restoring = true;
+      try {
+        if (state.order) this._applyOrder(state.order.filter((key) => known.has(key)));
+        if (state.hidden) this._hidden = new Set(state.hidden.filter((key) => known.has(key)));
+        if (state.sort !== void 0) {
+          if (state.sort) this.sort.set(state.sort.col, state.sort.dir);
+          else this.sort.set(null, null);
+        }
+        if (state.filtersVisible !== void 0) this._filtersVisible = state.filtersVisible;
+        if (state.headerVisible !== void 0) this._headerVisible = state.headerVisible;
+        if (state.group !== void 0) {
+          const col = state.group && this.options.columns.find((c) => c.key === state.group);
+          this._group = col && col.value ? state.group : null;
+          this._collapsed.clear();
+        }
+        if (state.collapsed) this._collapsed = new Set(state.collapsed);
+        if (state.filters) {
+          this._filters = {};
+          for (const [key, filter] of Object.entries(state.filters)) {
+            if (!known.has(key)) continue;
+            const normalized = _DataGrid._normalizeFilter(filter);
+            if (normalized) this._filters[key] = normalized;
+          }
+        }
+        this._rerender();
+      } finally {
+        this._restoring = false;
+      }
+    }
+    _applyOrder(keys) {
+      const named = keys.filter((key, i) => keys.indexOf(key) === i);
+      this._order = [...named, ...this._order.filter((key) => !named.includes(key))];
+    }
+    /// One place that repaints and tells the host, so no caller can do one without
+    /// the other.
+    _rerender() {
+      this._renderHead();
+      this.sort.refreshHeader();
+      this.render();
+      if (!this._restoring && this.options.onStateChange) this.options.onStateChange(this.getState());
     }
     /**
      * The rows the grid holds, in the order they were handed over. The grid keeps
@@ -431,11 +1438,23 @@ var SSTradingControls = (() => {
      * default). A sorted copy — the held array is never reordered.
      */
     sortedRows() {
-      return this.sort.apply(this._rows);
+      return this.sort.apply(this.filteredRows());
+    }
+    /**
+     * Every row that is on screen, in the order it appears there -- filtered, sorted,
+     * and gathered into groups when grouping is on. Collapsed groups are included:
+     * they are hidden, not excluded, and an export of a collapsed table that silently
+     * dropped rows would be worse than one that shows them.
+     */
+    displayRows() {
+      const sorted = this.sortedRows();
+      if (this._group === null) return sorted;
+      return [...this._groups(sorted).values()].flatMap((group) => group.rows);
     }
     setRows(rows) {
       this._rows = rows || [];
       this.render();
+      this._refreshFilterRow();
     }
     render() {
       this._paint();
@@ -446,17 +1465,39 @@ var SSTradingControls = (() => {
       this._cellEls.clear();
       const pinned = this.options.pinnedRows ? this.options.pinnedRows() : [];
       const sorted = this.sortedRows();
-      const painted = this.options.renderLimit != null ? sorted.slice(0, this.options.renderLimit) : sorted;
+      const limit = this.options.renderLimit != null ? this.options.renderLimit : Infinity;
       const children = [];
       for (const row of pinned) {
         if (row.place === GridPinnedPlacements.Top) children.push(this._pinnedRow(row));
       }
-      if (painted.length === 0 && pinned.length === 0) children.push(this._emptyRow());
-      for (const row of painted) children.push(this._bodyRow(row));
+      let painted = 0;
+      if (this._group === null) {
+        for (const row of sorted) {
+          if (painted >= limit) break;
+          children.push(this._bodyRow(row));
+          painted++;
+        }
+      } else {
+        for (const [key, group] of this._groups(sorted)) {
+          if (painted >= limit) break;
+          children.push(this._groupRow(key, group.label, group.rows.length));
+          if (this._collapsed.has(key)) continue;
+          for (const row of group.rows) {
+            if (painted >= limit) break;
+            children.push(this._bodyRow(row));
+            painted++;
+          }
+        }
+      }
+      if (painted === 0 && pinned.length === 0 && this._collapsed.size === 0) children.push(this._emptyRow());
       for (const row of pinned) {
         if (row.place === GridPinnedPlacements.Bottom) children.push(this._pinnedRow(row));
       }
       this.options.body.replaceChildren(...children);
+      if (this.options.flashNewClass) {
+        const keys = this.displayRows().map((row) => this.options.rowKey(row));
+        if (this._flashKnown !== null || keys.length > 0) this._flashKnown = new Set(keys);
+      }
     }
     /**
      * The rendered row with this key, or null when it is not on screen (filtered
@@ -478,10 +1519,13 @@ var SSTradingControls = (() => {
      * content can be asserted without a browser.
      */
     exportData() {
-      const columns = this.options.columns.filter((col) => col.exportable);
+      const columns = this.visibleColumns().filter((col) => col.exportable);
       return {
         headers: columns.map((col) => col.header),
-        rows: this.sortedRows().map((row) => columns.map((col) => {
+        // Grouped, the sheet follows the order on screen but without the header
+        // rows: a spreadsheet has its own grouping, and a label row in the middle
+        // of the data would break every formula pointed at the range.
+        rows: this.displayRows().map((row) => columns.map((col) => {
           const accessor = col.exportValue || col.value;
           return accessor ? accessor(row) : null;
         }))
@@ -493,10 +1537,17 @@ var SSTradingControls = (() => {
       TableExport.download(baseName, sheetName, data.headers, data.rows);
     }
     _renderHead() {
+      if (!this._headerVisible) {
+        const filterRow = this._filterRow();
+        if (filterRow) this.options.head.replaceChildren(filterRow);
+        else this.options.head.replaceChildren();
+        return;
+      }
       const tr = document.createElement("tr");
-      for (const col of this.options.columns) {
+      for (const col of this.visibleColumns()) {
         const th = document.createElement("th");
         th.setAttribute("scope", "col");
+        th.dataset.col = col.key;
         if (col.headerClass) th.className = col.headerClass;
         if (col.value) th.dataset.sort = col.key;
         if (col.headerHidden) {
@@ -507,9 +1558,142 @@ var SSTradingControls = (() => {
         } else {
           th.textContent = col.header;
         }
+        if (this.options.reorderable) this._bindHeaderDrag(th, col.key);
         tr.appendChild(th);
       }
-      this.options.head.replaceChildren(tr);
+      const filters = this._filterRow();
+      if (filters) this.options.head.replaceChildren(tr, filters);
+      else this.options.head.replaceChildren(tr);
+    }
+    /**
+     * The row of filter controls, or null when no visible column declares one.
+     *
+     * Every visible column gets a cell even when it has no filter, or the row would
+     * shear away from the captions above it. The cells carry no `data-sort`, so a
+     * click inside one does not reach the sort handler bound on the `<thead>`.
+     */
+    _filterRow() {
+      const columns = this.visibleColumns();
+      if (!this._filtersVisible || !columns.some((col) => col.filter)) return null;
+      const tr = document.createElement("tr");
+      tr.className = "grid-filters";
+      this._filterEls = /* @__PURE__ */ new Map();
+      for (const col of columns) {
+        const cell = document.createElement("th");
+        cell.dataset.filter = col.key;
+        if (col.filter) {
+          for (const el of this._filterControls(col)) cell.appendChild(el);
+        }
+        tr.appendChild(cell);
+      }
+      return tr;
+    }
+    _filterControls(col) {
+      const current = this._filters[col.key] || {};
+      if (col.filter === "text") {
+        const input = document.createElement("input");
+        input.type = "text";
+        input.className = "grid-filter grid-filter-text";
+        input.value = current.text || "";
+        input.addEventListener("input", () => this.setFilter(col.key, { text: input.value }));
+        this._filterEls.set(col.key, [input]);
+        return [input];
+      }
+      if (col.filter === "number") {
+        const read = (el) => {
+          const n = Number(el.value);
+          return el.value.trim() === "" || !Number.isFinite(n) ? void 0 : n;
+        };
+        const make = (className, value) => {
+          const input = document.createElement("input");
+          input.type = "number";
+          input.className = `grid-filter ${className}`;
+          input.value = value === void 0 ? "" : String(value);
+          return input;
+        };
+        const min = make("grid-filter-min", current.min);
+        const max = make("grid-filter-max", current.max);
+        const push = () => this.setFilter(col.key, { min: read(min), max: read(max) });
+        min.addEventListener("input", push);
+        max.addEventListener("input", push);
+        this._filterEls.set(col.key, [min, max]);
+        return [min, max];
+      }
+      const select = document.createElement("select");
+      select.className = "grid-filter grid-filter-set";
+      const blank = document.createElement("option");
+      blank.value = "";
+      blank.textContent = "";
+      select.appendChild(blank);
+      for (const { value, label } of this._distinctValues(col)) {
+        const option = document.createElement("option");
+        option.value = value;
+        option.textContent = label;
+        select.appendChild(option);
+      }
+      select.value = current.values && current.values.length ? current.values[0] : "";
+      select.addEventListener("change", () => this.setFilter(col.key, select.value ? { values: [select.value] } : null));
+      this._filterEls.set(col.key, [select]);
+      return [select];
+    }
+    /// Replaces the option list only when the values behind it changed, so a live
+    /// table that repaints on every tick does not rebuild a select the user is using.
+    _syncOptions(select, values) {
+      const current = Array.from(select.children).slice(1).map((el) => el.value);
+      if (current.length === values.length && current.every((v, i) => v === values[i].value)) return;
+      const blank = document.createElement("option");
+      blank.value = "";
+      blank.textContent = "";
+      const options = [blank];
+      for (const { value, label } of values) {
+        const option = document.createElement("option");
+        option.value = value;
+        option.textContent = label;
+        options.push(option);
+      }
+      select.replaceChildren(...options);
+    }
+    /// The value as a person reads it. One place, because a group header, a filter's
+    /// option list and the menu line that filters by a value all have to agree -- and
+    /// all of them have to disagree with `value`, which stays what the grid compares.
+    _displayText(col, row) {
+      if (col.text) return col.text(row);
+      return _DataGrid._text(col.value ? col.value(row) : null);
+    }
+    /// Every value the column holds, paired with the label it is picked by. Keyed by
+    /// the raw value: two rows reading "Buy" are one option, and the option carries
+    /// the 0 the filter will actually compare against.
+    _distinctValues(col) {
+      const seen = /* @__PURE__ */ new Map();
+      for (const row of this._rows) {
+        if (!col.value) continue;
+        const value = _DataGrid._text(col.value(row));
+        if (!seen.has(value)) seen.set(value, this._displayText(col, row));
+      }
+      return [...seen.entries()].map(([value, label]) => ({ value, label })).sort((a, b) => this._collator.compare(a.label, b.label));
+    }
+    /**
+     * Put the stored filters back into the controls without rebuilding the row.
+     * Rebuilding it would take the focus and the caret out of the box the user is
+     * still typing in.
+     */
+    _refreshFilterRow() {
+      for (const [key, els] of this._filterEls) {
+        const filter = this._filters[key] || {};
+        if (els.length === 2) {
+          els[0].value = filter.min === void 0 ? "" : String(filter.min);
+          els[1].value = filter.max === void 0 ? "" : String(filter.max);
+        } else if (els[0].tagName === "SELECT") {
+          const select = els[0];
+          const col = this.options.columns.find((c) => c.key === key);
+          if (col) this._syncOptions(select, this._distinctValues(col));
+          select.value = filter.values && filter.values.length ? filter.values[0] : "";
+        } else {
+          const input = els[0];
+          const want = filter.text || "";
+          if (input.value !== want) input.value = want;
+        }
+      }
     }
     _bodyRow(row) {
       const tr = document.createElement("tr");
@@ -518,7 +1702,7 @@ var SSTradingControls = (() => {
       if (rowClass) tr.className = rowClass;
       tr.dataset.rowKey = key;
       const cells = /* @__PURE__ */ new Map();
-      for (const col of this.options.columns) {
+      for (const col of this.visibleColumns()) {
         const td = document.createElement("td");
         td.dataset.col = col.key;
         const cellClass = col.cellClass ? col.cellClass(row) : "";
@@ -530,6 +1714,34 @@ var SSTradingControls = (() => {
         tr.appendChild(td);
         cells.set(col.key, td);
       }
+      if (this._selected.has(key)) {
+        const selectedClass = this.options.selectedClass || "is-selected";
+        tr.className = tr.className ? `${tr.className} ${selectedClass}` : selectedClass;
+      }
+      if (this.options.flashNewClass && this._flashKnown !== null && !this._flashKnown.has(key)) {
+        tr.className = tr.className ? `${tr.className} ${this.options.flashNewClass}` : this.options.flashNewClass;
+      }
+      const mode = this.options.selection || "none";
+      if (mode !== "none") {
+        tr.addEventListener("mousedown", (event) => {
+          const button = event.button;
+          if (button !== void 0 && button !== 0) return;
+          event.preventDefault();
+          _DataGrid._active = this;
+          this._clickRow(key, event);
+          const m = event;
+          if (mode === "multi" && !m.shiftKey && !m.ctrlKey && !m.metaKey) this._beginDragSelect();
+        });
+        tr.addEventListener("mouseenter", (event) => {
+          if (!this._dragging) return;
+          const buttons = event.buttons;
+          if (buttons !== void 0 && (buttons & 1) === 0) {
+            this._dragging = false;
+            return;
+          }
+          this._extendTo(key);
+        });
+      }
       if (this.options.bindRow) this.options.bindRow(tr, row);
       this._rowEls.set(key, tr);
       this._cellEls.set(key, cells);
@@ -542,12 +1754,16 @@ var SSTradingControls = (() => {
       const tr = document.createElement("tr");
       if (pinned.className) tr.className = pinned.className;
       tr.dataset.rowKey = pinned.key;
+      const byColumn = /* @__PURE__ */ new Map();
+      this.options.columns.forEach((col, i) => {
+        const cell = pinned.cells[i];
+        if (cell) byColumn.set(col.key, cell);
+      });
       const cells = /* @__PURE__ */ new Map();
-      for (let i = 0; i < this.options.columns.length; i++) {
-        const col = this.options.columns[i];
+      for (const col of this.visibleColumns()) {
         const td = document.createElement("td");
         td.dataset.col = col.key;
-        const cell = pinned.cells[i];
+        const cell = byColumn.get(col.key);
         if (cell) {
           if (cell.className) td.className = cell.className;
           if (typeof cell.content === "string") td.textContent = cell.content;
@@ -560,19 +1776,79 @@ var SSTradingControls = (() => {
       this._cellEls.set(pinned.key, cells);
       return tr;
     }
+    /// Rows by their group value, in value order, each group keeping the row order
+    /// it was handed.
+    _groups(rows) {
+      const col = this.options.columns.find((c) => c.key === this._group);
+      const groups = /* @__PURE__ */ new Map();
+      for (const row of rows) {
+        const key = _DataGrid._text(col && col.value ? col.value(row) : null);
+        const group = groups.get(key);
+        if (group) group.rows.push(row);
+        else groups.set(key, { label: col ? this._displayText(col, row) : key, rows: [row] });
+      }
+      return new Map([...groups.entries()].sort((a, b) => this._collator.compare(a[1].label, b[1].label)));
+    }
+    _groupRow(key, label, count) {
+      const tr = document.createElement("tr");
+      tr.className = this._collapsed.has(key) ? "grid-group is-collapsed" : "grid-group";
+      tr.dataset.group = key;
+      const collapsed = this._collapsed.has(key);
+      const td = document.createElement("td");
+      td.colSpan = this.visibleColumns().length;
+      const content = this.options.groupHeader ? this.options.groupHeader(label, count, collapsed) : `${collapsed ? "\u25B8" : "\u25BE"} ${label} (${count})`;
+      if (typeof content === "string") td.textContent = content;
+      else td.appendChild(content);
+      tr.appendChild(td);
+      tr.addEventListener("click", () => this.toggleGroup(key));
+      return tr;
+    }
     _emptyRow() {
       const tr = document.createElement("tr");
       const td = document.createElement("td");
       td.className = "grid-empty";
-      td.colSpan = this.options.columns.length;
+      td.colSpan = this.visibleColumns().length;
       td.textContent = this.options.emptyText;
       tr.appendChild(td);
       return tr;
     }
+    /**
+     * Drag a header to move its column in front of the one it is dropped on.
+     *
+     * The dragged key lives on the instance rather than in dataTransfer: the payload
+     * is this grid's, and reading it back out of the event would mean a header
+     * dragged from anywhere -- another grid, another window -- could reorder this one.
+     */
+    _bindHeaderDrag(th, key) {
+      th.setAttribute("draggable", "true");
+      th.addEventListener("dragstart", () => {
+        this._dragKey = key;
+      });
+      th.addEventListener("dragend", () => {
+        this._dragKey = null;
+      });
+      th.addEventListener("dragover", (event) => {
+        if (this._dragKey !== null && this._dragKey !== key) event.preventDefault();
+      });
+      th.addEventListener("drop", (event) => {
+        event.preventDefault();
+        const moved = this._dragKey;
+        this._dragKey = null;
+        if (moved === null || moved === key) return;
+        const order = this._order.filter((k) => k !== moved);
+        order.splice(order.indexOf(key), 0, moved);
+        this._applyOrder(order);
+        this._rerender();
+      });
+    }
     static _text(value) {
       return value === null || value === void 0 ? "" : String(value);
     }
   };
+  /// The grid a keyboard shortcut belongs to: the last one the pointer touched.
+  /// Two grids on a page both holding a selection would otherwise both answer Ctrl+C.
+  __publicField(_DataGrid, "_active", null);
+  var DataGrid = _DataGrid;
 
   // src/active-orders-widget.ts
   var OrderStates = {
@@ -674,11 +1950,17 @@ var SSTradingControls = (() => {
         rowKey: (o) => String(o.id),
         emptyText: this._host.t("NoActiveOrders"),
         // Terminal rows are greyed out so the live ones stay visually prominent.
-        rowClass: (o) => _ActiveOrdersWidget._rowClass(o)
+        rowClass: (o) => _ActiveOrdersWidget._rowClass(o),
+        contextMenu: makeGridMenu(this._host),
+        // Press to mark, drag or Shift to range, Ctrl to toggle, Ctrl+C
+        // to copy — all the grid's own; the press also claims the
+        // gesture from the browser's text selection.
+        selection: "multi"
       }) : null;
       this._host.register(this);
     }
     dispose() {
+      this._grid?.destroy();
       this._host.unregister(this);
       try {
         this.rootEl.remove();
@@ -995,11 +2277,17 @@ var SSTradingControls = (() => {
         emptyText: this._host.t("No positions"),
         // Re-read on every render, so the cash figures track the live balance
         // without the widget having to repaint the position rows itself.
-        pinnedRows: () => this._pinnedRows()
+        pinnedRows: () => this._pinnedRows(),
+        contextMenu: makeGridMenu(this._host),
+        // Press to mark, drag or Shift to range, Ctrl to toggle, Ctrl+C
+        // to copy — the pinned cash row stays outside the selection the
+        // same way it stays outside the sort.
+        selection: "multi"
       }) : null;
       this._host.register(this);
     }
     dispose() {
+      this._grid?.destroy();
       this._host.unregister(this);
       try {
         this.rootEl.remove();
@@ -1216,11 +2504,16 @@ var SSTradingControls = (() => {
         // Most recent fill on top by default — the natural way to read a trade blotter.
         defaultSort: { col: "time", dir: "desc" },
         rowKey: (t) => String(t.id),
-        emptyText: this._host.t("No trade history")
+        emptyText: this._host.t("No trade history"),
+        contextMenu: makeGridMenu(this._host),
+        // Press to mark, drag or Shift to range, Ctrl to toggle, Ctrl+C
+        // to copy — all the grid's own.
+        selection: "multi"
       }) : null;
       this._host.register(this);
     }
     dispose() {
+      this._grid?.destroy();
       this._host.unregister(this);
       try {
         this.rootEl.remove();
@@ -1417,7 +2710,8 @@ var SSTradingControls = (() => {
         afterRender: () => {
           this._syncSubs();
           this._publishVisible();
-        }
+        },
+        contextMenu: makeGridMenu(this._host)
       }) : null;
       this._bind();
       this._host.register(this);
@@ -1735,6 +3029,2033 @@ var SSTradingControls = (() => {
   _WatchlistWidget.RENDER_CAP = 300;
   _WatchlistWidget.TYPE = ControlTypes.Watchlist;
   var WatchlistWidget = _WatchlistWidget;
+
+  // src/order-entry-widget.ts
+  var OrderEntrySides = {
+    Buy: "buy",
+    Sell: "sell"
+  };
+  var OrderEntryTypes = {
+    Market: "market",
+    Limit: "limit",
+    Stop: "stop",
+    StopLimit: "stoplimit"
+  };
+  var WIRE_SIDES = { buy: 0, sell: 1 };
+  var PERCENT_STEPS = [25, 50, 75, 100];
+  var PRICE_INPUT = ".oe-field-price input";
+  var STOP_INPUT = ".oe-field-stop input";
+  var QTY_INPUT = ".oe-field-qty input";
+  var TP_INPUT = ".oe-field-tp input";
+  var SL_INPUT = ".oe-field-sl input";
+  var TPSL_CHECK = ".oe-tpsl-toggle input";
+  var AVAILABLE_VALUE = ".oe-avbl .oe-value";
+  var TOTAL_VALUE = ".oe-total .oe-value";
+  var MAX_VALUE = ".oe-foot .oe-value";
+  var VALUE_INPUTS = [PRICE_INPUT, STOP_INPUT, QTY_INPUT, TP_INPUT, SL_INPUT];
+  var _OrderEntryWidget = class _OrderEntryWidget {
+    static create(hostEl, state, deps) {
+      const host = assertHost(deps?.host, "OrderEntryWidget");
+      const root = _OrderEntryWidget._buildRoot(host);
+      root.id = makePanelId(_OrderEntryWidget.TYPE);
+      hostEl.appendChild(root);
+      return new _OrderEntryWidget(root, state || {}, deps);
+    }
+    // The pad's markup. The host stylesheet reads this structure, and a docking
+    // host lifts `.panel-header`'s children into its tab strip.
+    //
+    // There is no `+` button in the header: a second pad on the same portfolio
+    // is a host decision about the account, not a gesture the form offers.
+    static _buildRoot(host) {
+      const title = host.t("OrderEntry");
+      return makePanelRoot("order-entry-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", "order-entry-content", {}, [
+          _OrderEntryWidget._buildTypeTabs(host),
+          makeElement("div", "order-entry-split", {}, [
+            _OrderEntryWidget._buildColumn(host, OrderEntrySides.Buy),
+            _OrderEntryWidget._buildColumn(host, OrderEntrySides.Sell)
+          ])
+        ])
+      ]);
+    }
+    // Two pairs of type buttons, so each pair lines up with the column beneath
+    // it. Which one is active is decided by `setOrderType`, from the constructor
+    // and from a later click alike.
+    static _buildTypeTabs(host) {
+      const tab = (type, caption) => makeElement("button", "btn-ot", { type: "button", "data-type": type, "aria-pressed": "false" }, [caption]);
+      return makeElement("div", "order-type-tabs", { role: "group", "aria-label": host.t("OrderType") }, [
+        makeElement("div", "ot-pair", {}, [
+          tab(OrderEntryTypes.Market, host.t("Market")),
+          tab(OrderEntryTypes.Limit, host.t("Limit"))
+        ]),
+        makeElement("div", "ot-pair", {}, [
+          tab(OrderEntryTypes.Stop, host.t("Stop")),
+          tab(OrderEntryTypes.StopLimit, host.t("StopLimit"))
+        ])
+      ]);
+    }
+    // One column. The modifier class and the submit button's colour class are
+    // assigned as whole literals rather than composed, so the style contract can
+    // read this control's class list out of the source.
+    static _buildColumn(host, side) {
+      const isBuy = side === OrderEntrySides.Buy;
+      const sideText = host.presentation.sideText(WIRE_SIDES[side]);
+      const maxLabel = isBuy ? host.t("Max Buy") : host.t("Max Sell");
+      const hotkey = isBuy ? host.t("BuyHotkey") : host.t("SellHotkey");
+      const submit = makeElement("button", "btn-oe-submit", { type: "button", "aria-label": sideText }, [
+        sideText,
+        makeElement("span", "hotkey-hint", {}, [`[${hotkey}]`])
+      ]);
+      if (isBuy) submit.className = "btn-oe-submit btn-buy";
+      else submit.className = "btn-oe-submit btn-sell";
+      const column = makeElement("div", "oe-col", { "data-side": side }, [
+        makeElement("div", "oe-avbl", {}, [
+          makeElement("span", "oe-label", {}, [host.t("Avbl")]),
+          makeElement("span", "oe-value", {}, ["--"])
+        ]),
+        makeElement("div", "oe-field oe-field-price", {}, [
+          makeElement("span", "oe-label", {}, [host.t("Price")]),
+          makeElement("div", "oe-input-grp", {}, [
+            makeElement("input", "oe-input", { type: "number", "aria-label": host.t("Price") }, []),
+            makeElement("button", "btn-bbo", { type: "button", title: host.t("BestBidOrOffer") }, [host.t("BBO")])
+          ])
+        ]),
+        makeElement("div", "oe-field oe-field-stop", {}, [
+          makeElement("span", "oe-label", {}, [host.t("StopPrice")]),
+          makeElement("input", "oe-input", { type: "number", "aria-label": host.t("StopPrice") }, [])
+        ]),
+        makeElement("div", "oe-field oe-field-qty", {}, [
+          makeElement("span", "oe-label", {}, [host.t("Amount")]),
+          makeElement("input", "oe-input", { type: "number", "aria-label": host.t("OrderQuantity") }, [])
+        ]),
+        makeElement(
+          "div",
+          "oe-pct-row",
+          { role: "group", "aria-label": host.t("PercentageOfBalance") },
+          PERCENT_STEPS.map((pct) => makeElement("button", "btn-oe-pct", { type: "button", "data-pct": String(pct) }, [`${pct}%`]))
+        ),
+        makeElement("div", "oe-total", {}, [
+          makeElement("span", "oe-label", {}, [host.t("Total")]),
+          makeElement("span", "oe-value", {}, ["--"])
+        ]),
+        makeElement("label", "oe-tpsl-toggle", {}, [
+          makeElement("input", "", { type: "checkbox" }, []),
+          makeElement("span", "", {}, [host.t("TpSl")])
+        ]),
+        makeElement("div", "oe-tpsl oe-field-hidden", {}, [
+          makeElement("div", "oe-field oe-field-tp", {}, [
+            makeElement("span", "oe-label", {}, [host.t("TakeProfit")]),
+            makeElement("input", "oe-input", { type: "number", "aria-label": host.t("TakeProfit") }, [])
+          ]),
+          makeElement("div", "oe-field oe-field-sl", {}, [
+            makeElement("span", "oe-label", {}, [host.t("StopLoss")]),
+            makeElement("input", "oe-input", { type: "number", "aria-label": host.t("StopLoss") }, [])
+          ])
+        ]),
+        makeElement("div", "oe-foot", {}, [
+          makeElement("span", "oe-label", {}, [maxLabel]),
+          makeElement("span", "oe-value", {}, ["--"])
+        ]),
+        submit,
+        makeElement("div", "oe-estimate", { "aria-live": "polite" }, [])
+      ]);
+      if (isBuy) column.className = "oe-col oe-col-buy";
+      else column.className = "oe-col oe-col-sell";
+      return column;
+    }
+    constructor(rootEl, _state, deps) {
+      this._host = assertHost(deps?.host, "OrderEntryWidget");
+      for (const name of ["submitOrder"]) {
+        if (typeof deps?.[name] !== "function")
+          throw new Error(`OrderEntryWidget: dep "${name}" is required`);
+      }
+      this.rootEl = rootEl;
+      this._deps = deps;
+      this.el = this.rootEl.querySelector(".order-entry-content");
+      this._closeBtn = this.rootEl.querySelector(".panel-close-btn");
+      this._cols = {
+        buy: this.rootEl.querySelector(".oe-col-buy"),
+        sell: this.rootEl.querySelector(".oe-col-sell")
+      };
+      this._orderType = OrderEntryTypes.Market;
+      this._instrument = null;
+      this._lastPrice = 0;
+      this._bestBid = 0;
+      this._bestAsk = 0;
+      this._maxQuantity = { buy: null, sell: null };
+      this._focused = null;
+      this._enabled = true;
+      this._closeBtn?.addEventListener("click", (e) => {
+        e.preventDefault();
+        this._host.close();
+      });
+      this._bindTypeTabs();
+      for (const side of _OrderEntryWidget.SIDES) this._bindColumn(side);
+      this.setOrderType(OrderEntryTypes.Market);
+      this._host.register(this);
+    }
+    dispose() {
+      this._host.unregister(this);
+      try {
+        this.rootEl.remove();
+      } catch {
+      }
+    }
+    /// The type the form is on. A host reads it before deciding whether a
+    /// click-to-trade gesture has to switch the pad over first.
+    get orderType() {
+      return this._orderType;
+    }
+    /// The instrument the form is sized and priced against, or null before the
+    /// host has named one. Read for its tick by a host that has to quantize a
+    /// price of its own before handing it over.
+    getInstrument() {
+      return this._instrument;
+    }
+    /// Switch the form's order type and mark the matching tab. The tab lives
+    /// under this control's own root, so a host switches type by naming the
+    /// type rather than by handing over a button it looked up itself.
+    setOrderType(type) {
+      this._orderType = type;
+      for (const button of this.rootEl.querySelectorAll(".btn-ot")) {
+        const tab = button;
+        const on = tab.dataset.type === type;
+        tab.classList.toggle("active", on);
+        tab.setAttribute("aria-pressed", String(on));
+      }
+      this._applyTypeVisibility();
+      for (const side of _OrderEntryWidget.SIDES) this._recalculate(side);
+    }
+    /// Adopt the venue's size and price grid: the quantity input steps by the
+    /// lot, the price inputs by the tick, and the quantity resets to the minimum
+    /// lot — carrying the previous value across a switch yields nonsense like
+    /// "10 BTC" after a stock.
+    setInstrument(instrument) {
+      this._instrument = instrument;
+      if (!instrument) return;
+      const lotSize = Number(instrument.lotSize) || 1;
+      const tickSize = Number(instrument.tickSize) || 0.01;
+      const minVolume = Number(instrument.minVolume) > 0 ? Number(instrument.minVolume) : lotSize;
+      const maxVolume = instrument.maxVolume != null ? Number(instrument.maxVolume) : null;
+      for (const side of _OrderEntryWidget.SIDES) {
+        const qty = this._input(side, QTY_INPUT);
+        if (qty) {
+          qty.step = String(lotSize);
+          qty.min = String(minVolume);
+          qty.max = maxVolume != null ? String(maxVolume) : "";
+          qty.value = _OrderEntryWidget._formatQty(minVolume);
+        }
+        for (const selector of [PRICE_INPUT, STOP_INPUT, TP_INPUT, SL_INPUT]) {
+          const input = this._input(side, selector);
+          if (input) input.step = String(tickSize);
+        }
+      }
+      for (const side of _OrderEntryWidget.SIDES) this._recalculate(side);
+    }
+    /// The cash this side may still commit. Null reads as "not known yet",
+    /// which is not the same as zero.
+    setAvailable(side, available) {
+      const value = this._cols[side]?.querySelector(AVAILABLE_VALUE);
+      if (value) value.textContent = formatPrice(available);
+    }
+    /// The largest quantity this side can trade — what the percent buttons take
+    /// a percentage OF. Without it they have no denominator, so they report the
+    /// gap through `host.log` rather than inventing one (see `applyPercent`).
+    setMaxQuantity(side, max) {
+      this._maxQuantity[side] = max != null && isFinite(max) ? max : null;
+      const value = this._cols[side]?.querySelector(MAX_VALUE);
+      if (value) value.textContent = formatQty(this._maxQuantity[side]);
+    }
+    /// 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);
+    }
+    /// 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);
+    }
+    /// 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
+    /// form matches the spread in the book. The BBO button next to the field is
+    /// the opposite, explicit gesture: take what the other side is showing.
+    setBbo(bid, ask) {
+      if (bid > 0) this._bestBid = bid;
+      if (ask > 0) this._bestAsk = ask;
+      this._writePrices(
+        this._bestBid > 0 ? this._bestBid : this._lastPrice,
+        this._bestAsk > 0 ? this._bestAsk : this._lastPrice,
+        false
+      );
+    }
+    /// Fill one column's price with the best quote for that direction: Buy takes
+    /// the ask, Sell takes the bid.
+    applyBbo(side) {
+      const bbo = side === OrderEntrySides.Buy ? this._bestAsk : this._bestBid;
+      if (!(bbo > 0)) return;
+      this.setPrice(side, bbo);
+    }
+    /// 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) {
+      const input = this._input(side, PRICE_INPUT);
+      if (!input) return;
+      const text = this._formatPriceForInput(price);
+      if (!text) return;
+      input.dataset.userEdited = "0";
+      input.value = text;
+      this._recalculate(side);
+    }
+    /// The same quantity in both columns — a quick-size gesture applies to
+    /// whichever side the user goes on to press.
+    setQuantity(quantity) {
+      for (const side of _OrderEntryWidget.SIDES) {
+        const input = this._input(side, QTY_INPUT);
+        if (!input) continue;
+        input.value = _OrderEntryWidget._formatQty(quantity);
+        this._recalculate(side);
+      }
+    }
+    /// Take a percentage of this side's maximum quantity, rounded down to a
+    /// whole number of lots.
+    applyPercent(side, pct) {
+      const max = this._maxQuantity[side];
+      if (max == null) {
+        this._host.log(`OrderEntryWidget: no maximum quantity for the ${side} side, so ${pct}% of it is unknown`);
+        return;
+      }
+      const qty = this._input(side, QTY_INPUT);
+      if (!qty) return;
+      const step = Number(qty.step) || 0;
+      let target = max * (pct / 100);
+      if (step > 0) target = Math.floor(target / step) * step;
+      qty.value = _OrderEntryWidget._formatQty(target);
+      this._recalculate(side);
+    }
+    /// Show or hide one column's take-profit / stop-loss block, checkbox
+    /// included, so a host can set it without reaching for the input.
+    toggleTpSl(side, on) {
+      const check = this._input(side, TPSL_CHECK);
+      if (check) check.checked = on;
+      this._show(this._cols[side]?.querySelector(".oe-tpsl"), on);
+    }
+    /// Mark one column's submit button as the one a host-level gesture aimed at.
+    /// Null clears both.
+    preselect(side) {
+      for (const each of _OrderEntryWidget.SIDES) {
+        const button = this._cols[each]?.querySelector(".btn-oe-submit");
+        button?.classList.toggle("btn-preselected", each === side);
+      }
+    }
+    /// Turn submitting off while the host cannot send — a dropped socket, a
+    /// portfolio still loading. The form stays readable and editable; only the
+    /// two buttons stop.
+    setEnabled(enabled) {
+      this._enabled = enabled;
+      this.el?.classList.toggle("oe-offline", !enabled);
+      for (const side of _OrderEntryWidget.SIDES) this._validateSide(side);
+    }
+    /// The submit button, and whatever host gesture stands in for it. Validates
+    /// first, so a form the venue would reject never reaches the account.
+    submit(side) {
+      const error = this.validate(side);
+      this._validateSide(side);
+      if (error || !this._enabled) return;
+      this._deps.submitOrder(side, this.getValues(side));
+    }
+    /// What one column currently says.
+    getValues(side) {
+      const type = this._orderType;
+      const carriesLimit = type === OrderEntryTypes.Limit || type === OrderEntryTypes.StopLimit;
+      const carriesStop = type === OrderEntryTypes.Stop || type === OrderEntryTypes.StopLimit;
+      const tpSlOn = this._input(side, TPSL_CHECK)?.checked === true;
+      return {
+        type,
+        quantity: this._number(side, QTY_INPUT) ?? 0,
+        limitPrice: carriesLimit ? this._number(side, PRICE_INPUT) : null,
+        stopPrice: carriesStop ? this._number(side, STOP_INPUT) : null,
+        takeProfit: tpSlOn ? this._number(side, TP_INPUT) : null,
+        stopLoss: tpSlOn ? this._number(side, SL_INPUT) : null
+      };
+    }
+    /// The reason this column cannot be sent, worded by the host, or null when
+    /// it can. Nothing is checked before the instrument is known — the venue's
+    /// grid is what every rule below measures against.
+    validate(side) {
+      const instrument = this._instrument;
+      if (!instrument) return null;
+      const { quantity, limitPrice, stopPrice, type } = this.getValues(side);
+      if (quantity <= 0) return this._host.t("Quantity must be positive");
+      const lotSize = Number(instrument.lotSize) || 0;
+      if (lotSize > 0 && !_OrderEntryWidget._isMultipleOf(quantity, lotSize))
+        return this._host.t("Quantity must be a multiple of {0}", lotSize);
+      const minVolume = Number(instrument.minVolume) > 0 ? Number(instrument.minVolume) : lotSize;
+      if (minVolume > 0 && quantity < minVolume) return this._host.t("Quantity must be >= {0}", minVolume);
+      if (instrument.maxVolume != null && quantity > Number(instrument.maxVolume))
+        return this._host.t("Quantity must be <= {0}", instrument.maxVolume);
+      const tickSize = Number(instrument.tickSize) || 0;
+      if (type === OrderEntryTypes.Limit || type === OrderEntryTypes.StopLimit) {
+        if (!limitPrice || limitPrice <= 0) return this._host.t("Limit price must be positive");
+        if (tickSize > 0 && !_OrderEntryWidget._isMultipleOf(limitPrice, tickSize))
+          return this._host.t("Limit price must be a multiple of {0}", tickSize);
+      }
+      if (type === OrderEntryTypes.Stop || type === OrderEntryTypes.StopLimit) {
+        if (!stopPrice || stopPrice <= 0) return this._host.t("Stop price must be positive");
+        if (tickSize > 0 && !_OrderEntryWidget._isMultipleOf(stopPrice, tickSize))
+          return this._host.t("Stop price must be a multiple of {0}", tickSize);
+      }
+      return null;
+    }
+    /// Map a form type onto StockSharp's `OrderTypes`: Limit=0, Market=1,
+    /// Conditional=2. Static because a host needs it to word the order it is
+    /// about to send, which it can do before any instance exists.
+    static toApiType(uiType) {
+      switch (uiType) {
+        case OrderEntryTypes.Limit:
+          return 0;
+        case OrderEntryTypes.Market:
+          return 1;
+        case OrderEntryTypes.Stop:
+        case OrderEntryTypes.StopLimit:
+          return 2;
+        default:
+          return 1;
+      }
+    }
+    /// Is `value` a whole number of `step`s? Scaled to integers first: a crypto
+    /// lot of 1e-9 against a quantity of 0.001 is not a modulo binary floats can
+    /// answer directly.
+    static _isMultipleOf(value, step) {
+      if (!(step > 0)) return true;
+      if (value === 0) return true;
+      const maxDec = Math.max(_OrderEntryWidget._decimals(step), _OrderEntryWidget._decimals(value));
+      const scale = Math.pow(10, maxDec);
+      const scaledValue = Math.round(value * scale);
+      const scaledStep = Math.round(step * scale);
+      if (scaledStep <= 0) return true;
+      if (scaledValue === 0) return false;
+      return scaledValue % scaledStep === 0;
+    }
+    /// A quantity as an input's `value`: every significant decimal, no thousands
+    /// separator and no exponent, because the browser reads this string back as
+    /// a number.
+    static _formatQty(n) {
+      if (!isFinite(n) || n === 0) return "0";
+      const d = _OrderEntryWidget._decimals(n);
+      return n.toFixed(Math.min(d, 20));
+    }
+    /// How many decimals a number is written with, exponent form included.
+    static _decimals(n) {
+      if (!isFinite(n) || n === 0) return 0;
+      const s = Math.abs(n).toString();
+      const eIdx = s.indexOf("e-");
+      if (eIdx >= 0) {
+        const mantissaDec = s.slice(0, eIdx).split(".")[1]?.length ?? 0;
+        return parseInt(s.slice(eIdx + 2), 10) + mantissaDec;
+      }
+      const dot = s.indexOf(".");
+      return dot < 0 ? 0 : s.length - dot - 1;
+    }
+    _bindTypeTabs() {
+      for (const button of this.rootEl.querySelectorAll(".btn-ot")) {
+        const tab = button;
+        tab.addEventListener("click", (e) => {
+          e.preventDefault();
+          const type = tab.dataset.type;
+          if (type) this.setOrderType(type);
+        });
+      }
+    }
+    // Everything one column listens to. Scoped to the column element, which is
+    // what lets two pads coexist: an input is found by the field it belongs to
+    // under its own root, never by a page-wide id.
+    _bindColumn(side) {
+      const column = this._cols[side];
+      if (!column) return;
+      const qty = this._input(side, QTY_INPUT);
+      if (qty) {
+        qty.value = "1";
+        qty.min = "1";
+        qty.step = "1";
+      }
+      for (const selector of VALUE_INPUTS) {
+        const input = this._input(side, selector);
+        if (!input) continue;
+        input.addEventListener("input", () => this._recalculate(side));
+        input.addEventListener("focus", () => {
+          this._focused = input;
+        });
+        input.addEventListener("blur", () => {
+          if (this._focused === input) this._focused = null;
+        });
+        if (selector === PRICE_INPUT || selector === STOP_INPUT)
+          input.addEventListener("input", () => {
+            input.dataset.userEdited = "1";
+          });
+      }
+      column.querySelector(".btn-bbo")?.addEventListener("click", (e) => {
+        e.preventDefault();
+        this.applyBbo(side);
+      });
+      for (const button of column.querySelectorAll(".btn-oe-pct")) {
+        const pct = button;
+        pct.addEventListener("click", (e) => {
+          e.preventDefault();
+          this.applyPercent(side, Number(pct.dataset.pct) || 0);
+        });
+      }
+      const check = this._input(side, TPSL_CHECK);
+      check?.addEventListener("change", () => this.toggleTpSl(side, check.checked === true));
+      column.querySelector(".btn-oe-submit")?.addEventListener("click", (e) => {
+        e.preventDefault();
+        this.submit(side);
+      });
+    }
+    // Which price fields the current type makes meaningful. A class toggle, not
+    // a display style: the pad emits names and the stylesheet decides.
+    _applyTypeVisibility() {
+      const showLimit = this._orderType === OrderEntryTypes.Limit || this._orderType === OrderEntryTypes.StopLimit;
+      const showStop = this._orderType === OrderEntryTypes.Stop || this._orderType === OrderEntryTypes.StopLimit;
+      for (const side of _OrderEntryWidget.SIDES) {
+        this._show(this._cols[side]?.querySelector(".oe-field-price"), showLimit);
+        this._show(this._cols[side]?.querySelector(".oe-field-stop"), showStop);
+      }
+    }
+    _show(element, visible) {
+      element?.classList.toggle("oe-field-hidden", !visible);
+    }
+    // Write both price inputs. `reset` is the explicit gesture: it clears the
+    // "typed in" mark so the field follows the market again. Without it, a field
+    // the user is in or has already edited is left alone.
+    _writePrices(buyPrice, sellPrice, reset) {
+      this._writePrice(OrderEntrySides.Buy, buyPrice, reset);
+      this._writePrice(OrderEntrySides.Sell, sellPrice, reset);
+      for (const side of _OrderEntryWidget.SIDES) this._recalculate(side);
+    }
+    _writePrice(side, price, reset) {
+      const input = this._input(side, PRICE_INPUT);
+      if (!input) return;
+      const text = this._formatPriceForInput(price);
+      if (!text) return;
+      if (reset) {
+        input.dataset.userEdited = "0";
+        input.value = text;
+        return;
+      }
+      if (this._focused === input) return;
+      if (input.dataset.userEdited === "1") return;
+      input.value = text;
+    }
+    // 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);
+      if (!isFinite(n)) return "";
+      const tickSize = Number(this._instrument?.tickSize) || 0;
+      if (tickSize > 0)
+        return (Math.round(n / tickSize) * tickSize).toFixed(_OrderEntryWidget._decimals(tickSize));
+      return String(parseFloat(n.toPrecision(12)));
+    }
+    _recalculate(side) {
+      this._updateEstimate(side);
+      this._validateSide(side);
+    }
+    // What the order is worth at the price it would most likely fill at: the
+    // limit or stop the form names, else the side-appropriate BBO, else the last
+    // print.
+    _updateEstimate(side) {
+      const total = this._cols[side]?.querySelector(TOTAL_VALUE);
+      if (!total) return;
+      const quantity = this._number(side, QTY_INPUT) ?? 0;
+      let price;
+      if (this._orderType === OrderEntryTypes.Limit || this._orderType === OrderEntryTypes.StopLimit) {
+        price = this._number(side, PRICE_INPUT) ?? 0;
+      } else if (this._orderType === OrderEntryTypes.Stop) {
+        price = this._number(side, STOP_INPUT) ?? this._lastPrice;
+      } else {
+        const bbo = side === OrderEntrySides.Buy ? this._bestAsk : this._bestBid;
+        price = bbo > 0 ? bbo : this._lastPrice;
+      }
+      total.textContent = quantity > 0 && price > 0 ? (quantity * price).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
+    // nothing the button could do.
+    _validateSide(side) {
+      const error = this.validate(side);
+      const estimate = this._cols[side]?.querySelector(".oe-estimate");
+      const submit = this._cols[side]?.querySelector(".btn-oe-submit");
+      if (estimate) {
+        estimate.textContent = error || "";
+        estimate.classList.toggle("oe-estimate-error", !!error);
+      }
+      if (submit) submit.disabled = !!error || !this._enabled;
+    }
+    _input(side, selector) {
+      return this._cols[side]?.querySelector(selector) ?? null;
+    }
+    // An input's value as a number, or null when it is blank or unparseable —
+    // which is what "the user has not said" looks like on a number field.
+    _number(side, selector) {
+      const parsed = parseFloat(this._input(side, selector)?.value ?? "");
+      return isFinite(parsed) ? parsed : null;
+    }
+  };
+  _OrderEntryWidget.TYPE = ControlTypes.OrderEntry;
+  _OrderEntryWidget.SIDES = [OrderEntrySides.Buy, OrderEntrySides.Sell];
+  var OrderEntryWidget = _OrderEntryWidget;
+
+  // src/orderbook-depth.ts
+  function depthSide(levels, direction, 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 }];
+    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),
+        cumulative
+      });
+    }
+    return { points, total: cumulative };
+  }
+  function depthPolyline(side, maxTotal, geometry) {
+    const scale = maxTotal > 0 ? maxTotal : 1;
+    const yOf = (cumulative) => geometry.baseY - cumulative / scale * geometry.innerHeight;
+    const line = [[side.points[0].x, geometry.baseY]];
+    for (let i = 1; i < side.points.length; i++) {
+      const previous = side.points[i - 1];
+      const current = side.points[i];
+      line.push([current.x, yOf(previous.cumulative)]);
+      line.push([current.x, yOf(current.cumulative)]);
+    }
+    return line;
+  }
+
+  // src/orderbook-widget.ts
+  var RESTING_STATE = 3;
+  var HEAT_FLOOR_PCT = 6;
+  var HEAT_RANGE_PCT = 18;
+  var _OrderBookWidget = class _OrderBookWidget {
+    static create(hostEl, state, deps) {
+      const host = assertHost(deps?.host, "OrderBookWidget");
+      const root = _OrderBookWidget._buildRoot(host);
+      root.id = makePanelId(_OrderBookWidget.TYPE);
+      hostEl.appendChild(root);
+      return new _OrderBookWidget(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 — which
+    // is why the header holds every control the ladder has.
+    //
+    // The `+` is built here rather than left out: the port documents `spawn` as
+    // this control's gesture, and a button nothing renders is a capability
+    // nobody can reach.
+    static _buildRoot(host) {
+      const title = host.t("OrderBook");
+      return makePanelRoot("orderbook-panel", title, [
+        makeElement("div", "panel-header", {}, [
+          makeElement(
+            "span",
+            "ob-symbol-label",
+            { title: host.t("ClickToChangeSymbol"), role: "button", tabindex: "0" },
+            ["--"]
+          ),
+          makeElement(
+            "div",
+            "ob-depth-selector",
+            { role: "group", "aria-label": host.t("OrderBookDepth") },
+            _OrderBookWidget.DEPTHS.map((depth) => makeElement("button", "btn-ob-depth", {
+              type: "button",
+              "data-depth": String(depth),
+              "aria-label": host.t("LevelsCount", depth),
+              "aria-pressed": "false"
+            }, [String(depth)]))
+          ),
+          makeElement("div", "ob-view-selector", { role: "group", "aria-label": host.t("OrderBookView") }, [
+            makeIconButton(
+              "btn-ob-view",
+              host.t("OrderBookViewDiagonal"),
+              "bi-distribute-horizontal",
+              { type: "button", "data-view": "diagonal", "aria-pressed": "false" }
+            ),
+            makeIconButton(
+              "btn-ob-view",
+              host.t("OrderBookViewStacked"),
+              "bi-table",
+              { type: "button", "data-view": "stacked", "aria-pressed": "false" }
+            )
+          ]),
+          makeIconButton(
+            "btn-ob-invert",
+            host.t("OrderBookInvertSides"),
+            "bi-arrow-down-up",
+            { type: "button", "aria-pressed": "false" }
+          ),
+          makeIconButton(
+            "btn-ob-depthtoggle",
+            host.t("ToggleDepthChart"),
+            "bi-graph-up",
+            { type: "button", "aria-pressed": "false" }
+          ),
+          makeElement("span", "spread-label", { "aria-live": "polite" }, ["--"]),
+          makeIconButton("bt-icon-btn ob-add-btn", host.t("AddOrderbook"), "bi-plus-lg", { type: "button" }),
+          makeIconButton("bt-icon-btn bt-icon-cancel ob-close-btn", host.t("RemoveOrderbook"), "bi-x", { type: "button" })
+        ]),
+        makeElement("canvas", "ob-depth-chart", { "aria-hidden": "true" }, []),
+        makeElement("div", "ob-col-headers", { "aria-hidden": "true" }, [
+          makeElement("span", "ob-col-price", {}, [host.t("Price")]),
+          makeElement("span", "ob-col-qty", {}, [host.t("Qty")]),
+          makeElement("span", "ob-col-total", {}, [host.t("Total")])
+        ]),
+        makeElement("div", "orderbook-content", { "aria-live": "polite", "aria-atomic": "false" }, [
+          makeElement("div", "orderbook-asks", { "aria-label": host.t("AskOrders") }, []),
+          makeElement("div", "orderbook-mid", { "aria-label": host.t("MidPrice") }, [
+            makeElement("span", "ob-mid-price", {}, ["--"]),
+            makeElement("span", "ob-mid-spread", { "aria-live": "polite" }, [])
+          ]),
+          makeElement("div", "orderbook-bids", { "aria-label": host.t("BidOrders") }, [])
+        ]),
+        makeElement("div", "ob-sentiment", { "aria-label": host.t("OrderBookSentiment") }, [
+          makeElement("div", "ob-sent-bid", {}, [
+            makeElement("span", "ob-sent-label", {}, [host.t("BidShort")]),
+            makeElement("span", "ob-sent-bid-pct", {}, ["--"])
+          ]),
+          makeElement("div", "ob-sent-ask", {}, [
+            makeElement("span", "ob-sent-ask-pct", {}, ["--"]),
+            makeElement("span", "ob-sent-label", {}, [host.t("AskShort")])
+          ])
+        ])
+      ]);
+    }
+    constructor(rootEl, state, deps) {
+      this._host = assertHost(deps?.host, "OrderBookWidget");
+      for (const name of ["onPriceSelected", "onPriceExecuted", "maxDepth", "pixelRatio"]) {
+        if (typeof deps?.[name] !== "function")
+          throw new Error(`OrderBookWidget: dep "${name}" is required`);
+      }
+      this.rootEl = rootEl;
+      this._deps = deps;
+      this.asksEl = this.rootEl.querySelector(".orderbook-asks");
+      this.bidsEl = this.rootEl.querySelector(".orderbook-bids");
+      this.midEl = this.rootEl.querySelector(".ob-mid-price");
+      this.spreadEl = this.rootEl.querySelector(".spread-label");
+      this.contentEl = this.rootEl.querySelector(".orderbook-content");
+      this.depthChartEl = this.rootEl.querySelector(".ob-depth-chart");
+      this._midSpreadEl = this.rootEl.querySelector(".ob-mid-spread");
+      this._sentimentEl = this.rootEl.querySelector(".ob-sentiment");
+      this._sentBidPctEl = this.rootEl.querySelector(".ob-sent-bid-pct");
+      this._sentAskPctEl = this.rootEl.querySelector(".ob-sent-ask-pct");
+      this._symbolLabel = this.rootEl.querySelector(".ob-symbol-label");
+      this._depthBtns = Array.from(this.rootEl.querySelectorAll(".btn-ob-depth"));
+      this._viewBtns = Array.from(this.rootEl.querySelectorAll(".btn-ob-view"));
+      this._invertBtn = this.rootEl.querySelector(".btn-ob-invert");
+      this._depthToggleBtn = this.rootEl.querySelector(".btn-ob-depthtoggle");
+      this._addBtn = this.rootEl.querySelector(".ob-add-btn");
+      this._closeBtn = this.rootEl.querySelector(".ob-close-btn");
+      const saved = state;
+      this._prevQuantities = /* @__PURE__ */ new Map();
+      this._bidsByPrice = /* @__PURE__ */ new Map();
+      this._asksByPrice = /* @__PURE__ */ new Map();
+      this._lastSequence = 0;
+      this._currentSymbol = null;
+      this._followsActive = saved.followsActive === true;
+      this._view = saved.view === "diagonal" ? "diagonal" : "stacked";
+      this._invertSides = saved.invertSides === true;
+      this._showDepthChart = saved.showDepthChart !== false;
+      let depth = _OrderBookWidget._isDepth(saved.depth) ? saved.depth : _OrderBookWidget._deepest();
+      if (this._followsActive) {
+        const preferences = this._host.preferences;
+        const savedDepth = Number(preferences.get(_OrderBookWidget.DEPTH_KEY, null));
+        if (_OrderBookWidget._isDepth(savedDepth)) depth = savedDepth;
+        const savedView = preferences.get(_OrderBookWidget.VIEW_KEY, null);
+        if (savedView === "diagonal" || savedView === "stacked") this._view = savedView;
+        const savedInvert = preferences.get(_OrderBookWidget.INVERT_KEY, null);
+        if (savedInvert !== null) this._invertSides = savedInvert === "true";
+        const savedDepthChart = preferences.get(_OrderBookWidget.DEPTHCHART_KEY, null);
+        if (savedDepthChart !== null) this._showDepthChart = savedDepthChart === "true";
+      }
+      this._depth = this._fitDepth(depth);
+      this._wireHeader();
+      this._wireBookClicks();
+      this._refreshDepthButtons();
+      this._applyViewState();
+      this._refreshViewButtons();
+      this._refreshInvertButton();
+      this._refreshDepthToggleButton();
+      if (saved.symbol && !this._followsActive) this.setSymbol(saved.symbol);
+      this._host.register(this);
+    }
+    /// Release the market-data subscription, leave the fan-out and remove the
+    /// panel. Called by the host when the panel is destroyed.
+    dispose() {
+      if (this._currentSymbol)
+        void this._host.trading.marketData.removeSymbol(this._currentSymbol).catch(() => {
+        });
+      this._host.unregister(this);
+      try {
+        this.rootEl.remove();
+      } catch {
+      }
+    }
+    /// Switch to a new instrument: drop the old subscription, take a new one and
+    /// blank the ledger, because a diff for the old symbol must never be applied
+    /// to the new one.
+    setSymbol(symbol) {
+      if (!symbol) return;
+      const next = String(symbol).toUpperCase();
+      if (next === this._currentSymbol) return;
+      const previous = this._currentSymbol;
+      this._currentSymbol = next;
+      this._resetLedger();
+      if (this._symbolLabel) this._symbolLabel.textContent = next;
+      this._render();
+      const marketData = this._host.trading.marketData;
+      if (previous) void marketData.removeSymbol(previous).catch(() => {
+      });
+      void marketData.addSymbol(next, MarketDataLevels.Full).catch(() => {
+      });
+      if (!this._followsActive) this._persistState({ symbol: next });
+    }
+    getSymbol() {
+      return this._currentSymbol;
+    }
+    getDepth() {
+      return this._depth;
+    }
+    /// True for the instance that follows the host's active symbol. A page has
+    /// at most one, and a host that feeds a best-bid/ask from a ladder asks for
+    /// it by this.
+    isFollowsActive() {
+      return this._followsActive;
+    }
+    /// The ledger as levels, best price first. Public because a host reads the
+    /// touch off the ladder rather than keeping a second copy of the book.
+    getBids() {
+      return _OrderBookWidget._sorted(this._bidsByPrice, -1);
+    }
+    getAsks() {
+      return _OrderBookWidget._sorted(this._asksByPrice, 1);
+    }
+    // The three setters below repaint BEFORE they persist: `_persistState` ends
+    // in a layout flush and the host serializes the live panel to produce it, so
+    // persisting first would write out the panel as it looked before the change
+    // the user just made.
+    setDepth(depth) {
+      if (!_OrderBookWidget._isDepth(depth)) return;
+      this._depth = this._fitDepth(depth);
+      this._refreshDepthButtons();
+      this._render();
+      if (this._followsActive) this._host.preferences.set(_OrderBookWidget.DEPTH_KEY, String(this._depth));
+      else this._persistState({ depth: this._depth });
+    }
+    setView(view) {
+      if (view !== "diagonal" && view !== "stacked") return;
+      this._view = view;
+      this._applyViewState();
+      this._refreshViewButtons();
+      if (this._followsActive) this._host.preferences.set(_OrderBookWidget.VIEW_KEY, view);
+      else this._persistState({ view });
+    }
+    /// Put the bid block above the mid line and the ask block below it, the
+    /// reverse of the convention every Western exchange UI follows.
+    setInvertSides(invert) {
+      this._invertSides = invert === true;
+      this._applyViewState();
+      this._refreshInvertButton();
+      if (this._followsActive)
+        this._host.preferences.set(_OrderBookWidget.INVERT_KEY, this._invertSides ? "true" : "false");
+      else this._persistState({ invertSides: this._invertSides });
+    }
+    /// Show or hide the depth chart above the ladder. The canvas keeps its last
+    /// bitmap while hidden, so showing it again brings the chart straight back
+    /// and the next frame repaints it.
+    setShowDepthChart(show) {
+      this._showDepthChart = show === true;
+      this._applyViewState();
+      this._refreshDepthToggleButton();
+      if (this._followsActive)
+        this._host.preferences.set(_OrderBookWidget.DEPTHCHART_KEY, this._showDepthChart ? "true" : "false");
+      this._persistState({ showDepthChart: this._showDepthChart });
+    }
+    /// Apply one frame. A snapshot replaces the ledger; a diff merges into it,
+    /// with `quantity: 0` deleting a level. A break in the sequence means a
+    /// frame was missed, so the ladder asks for a fresh snapshot instead of
+    /// applying a diff to state it can no longer trust.
+    ///
+    /// Every instance receives every frame, so the symbol filter here is what
+    /// keeps a frame for one instrument out of a ladder watching another.
+    applyFrame(frame) {
+      if (!frame || !frame.symbol) return;
+      if (this._currentSymbol && frame.symbol !== this._currentSymbol) return;
+      if (this._currentSymbol !== frame.symbol) {
+        this._currentSymbol = frame.symbol;
+        if (this._symbolLabel) this._symbolLabel.textContent = frame.symbol;
+      }
+      const sequence = frame.sequence ?? 0;
+      if (frame.isSnapshot) {
+        this._resetLedger();
+        this._applySnapshotSide(this._bidsByPrice, frame.bids, "bid", frame.symbol, sequence);
+        this._applySnapshotSide(this._asksByPrice, frame.asks, "ask", frame.symbol, sequence);
+        this._lastSequence = sequence;
+      } else {
+        if (this._lastSequence !== 0 && sequence !== this._lastSequence + 1) {
+          this._anomaly(`sequence gap: expected ${this._lastSequence + 1}, got ${sequence} sym=${frame.symbol} \u2014 requesting snapshot`);
+          this._lastSequence = 0;
+          void this._requestResubscribe(frame.symbol);
+          return;
+        }
+        this._applyDiffSide(this._bidsByPrice, frame.bids, "bid", frame.symbol, sequence);
+        this._applyDiffSide(this._asksByPrice, frame.asks, "ask", frame.symbol, sequence);
+        this._lastSequence = sequence || this._lastSequence;
+      }
+      this._validateBookCross(frame.symbol, sequence, frame.isSnapshot === true);
+      this._render();
+    }
+    _wireHeader() {
+      for (const button of this._depthBtns) {
+        button.addEventListener("click", (e) => {
+          e.preventDefault();
+          this.setDepth(Number(button.dataset.depth));
+        });
+      }
+      for (const button of this._viewBtns) {
+        button.addEventListener("click", (e) => {
+          e.preventDefault();
+          const view = button.dataset.view;
+          if (view === "diagonal" || view === "stacked") this.setView(view);
+        });
+      }
+      this._invertBtn?.addEventListener("click", (e) => {
+        e.preventDefault();
+        this.setInvertSides(!this._invertSides);
+      });
+      this._depthToggleBtn?.addEventListener("click", (e) => {
+        e.preventDefault();
+        this.setShowDepthChart(!this._showDepthChart);
+      });
+      this._addBtn?.addEventListener("click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        this._host.spawn({
+          symbol: this._currentSymbol,
+          depth: this._depth,
+          view: this._view,
+          invertSides: this._invertSides,
+          showDepthChart: this._showDepthChart,
+          followsActive: false
+        });
+      });
+      this._closeBtn?.addEventListener("click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        this._host.close();
+      });
+      this._symbolLabel?.addEventListener("click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        this._host.trading.pickInstrument((symbol) => {
+          if (this._followsActive) {
+            this._followsActive = false;
+            this._persistState({ followsActive: false });
+          }
+          this.setSymbol(symbol);
+        });
+      });
+    }
+    // A click anywhere on a level, caught once on the container: the rows are
+    // rebuilt on every frame, so a listener per row would be re-bound dozens of
+    // times a second.
+    //
+    // Plain click prefills an order at that price and leaves the sending to the
+    // user. Ctrl/Cmd click sends at once — a single click doing that is how a
+    // sneeze on the bid becomes a fill.
+    _wireBookClicks() {
+      this.contentEl?.addEventListener("click", (e) => {
+        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 side = row.dataset.side === "buy" ? 0 : 1;
+        if (e.ctrlKey || e.metaKey) this._deps.onPriceExecuted(price, side);
+        else this._deps.onPriceSelected(price, side);
+      });
+    }
+    _refreshDepthButtons() {
+      for (const button of this._depthBtns) {
+        const on = Number(button.dataset.depth) === this._depth;
+        button.classList.toggle("active", on);
+        button.setAttribute("aria-pressed", on ? "true" : "false");
+      }
+    }
+    _refreshViewButtons() {
+      for (const button of this._viewBtns) {
+        const on = button.dataset.view === this._view;
+        button.classList.toggle("active", on);
+        button.setAttribute("aria-pressed", on ? "true" : "false");
+      }
+    }
+    _refreshInvertButton() {
+      this._invertBtn?.classList.toggle("active", this._invertSides);
+      this._invertBtn?.setAttribute("aria-pressed", this._invertSides ? "true" : "false");
+    }
+    _refreshDepthToggleButton() {
+      this._depthToggleBtn?.classList.toggle("active", this._showDepthChart);
+      this._depthToggleBtn?.setAttribute("aria-pressed", this._showDepthChart ? "true" : "false");
+    }
+    // The variant classes on the panel root the stylesheet keys the two layouts,
+    // the side order and the depth chart off.
+    _applyViewState() {
+      this.rootEl.classList.toggle("ob-view-stacked", this._view === "stacked");
+      this.rootEl.classList.toggle("ob-view-diagonal", this._view === "diagonal");
+      this.rootEl.classList.toggle("ob-invert", this._invertSides);
+      this.rootEl.classList.toggle("ob-hide-depth", !this._showDepthChart);
+    }
+    // Record what this panel remembers, then ask the host to flush the layout.
+    // Two calls because they are two decisions, and every caller here is a
+    // setting the user just changed by hand — so it is worth flushing.
+    _persistState(patch) {
+      this._host.persistState(patch);
+      this._host.saveLayout();
+    }
+    _resetLedger() {
+      this._bidsByPrice.clear();
+      this._asksByPrice.clear();
+      this._prevQuantities.clear();
+      this._lastSequence = 0;
+    }
+    // The host answers how many levels it has room for, so a phone-sized page
+    // narrows the ladder without this control knowing what a viewport is.
+    _fitDepth(depth) {
+      const room = Number(this._deps.maxDepth());
+      if (!Number.isFinite(room) || room < 1) return depth;
+      return Math.min(depth, room);
+    }
+    static _isDepth(depth) {
+      return typeof depth === "number" && _OrderBookWidget.DEPTHS.includes(depth);
+    }
+    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 }));
+    }
+    _applySnapshotSide(ledger, levels, side, symbol, sequence) {
+      for (const level of levels || []) {
+        const quantity = level.quantity ?? 0;
+        if (level.price == null || !Number.isFinite(level.price) || !(quantity > 0)) {
+          this._anomaly(`snapshot ${side} level dropped: price=${level.price} qty=${level.quantity} sym=${symbol} seq=${sequence}`);
+          continue;
+        }
+        ledger.set(level.price, quantity);
+      }
+    }
+    _applyDiffSide(ledger, levels, side, symbol, sequence) {
+      for (const level of levels || []) {
+        if (level.price == null || !Number.isFinite(level.price)) {
+          this._anomaly(`invalid ${side} price: price=${level.price} qty=${level.quantity} sym=${symbol} seq=${sequence} \u2014 ignoring`);
+          continue;
+        }
+        const quantity = level.quantity ?? 0;
+        if (quantity < 0) {
+          this._anomaly(`negative ${side} qty: price=${level.price} qty=${quantity} sym=${symbol} seq=${sequence} \u2014 ignoring`);
+          continue;
+        }
+        if (quantity === 0) {
+          if (!ledger.has(level.price)) {
+            this._anomaly(`delete missing ${side}: price=${level.price} sym=${symbol} seq=${sequence}`);
+            continue;
+          }
+          ledger.delete(level.price);
+        } else {
+          ledger.set(level.price, quantity);
+        }
+      }
+    }
+    // Best bid below best ask, or something upstream is broken — usually a diff
+    // applied to stale state after a gap the sequence check did not catch.
+    _validateBookCross(symbol, sequence, wasSnapshot) {
+      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;
+      if (bestBid >= bestAsk) {
+        this._anomaly(`crossed book: bid=${bestBid} >= ask=${bestAsk} sym=${symbol} seq=${sequence} ${wasSnapshot ? "snapshot" : "diff"}`);
+      }
+    }
+    // Ask for the symbol from scratch. Idempotent as far as the user is
+    // concerned: the ladder blanks for a frame and refills.
+    async _requestResubscribe(symbol) {
+      try {
+        await this._host.trading.marketData.resubscribe(symbol, MarketDataLevels.Full);
+      } catch (err) {
+        this._anomaly(`resubscribe after a gap failed for ${symbol}: ${err}`);
+      }
+    }
+    // Wire trouble the user cannot see and support has to, through the port.
+    _anomaly(message) {
+      this._host.log(`OrderBookWidget: ${message}`);
+    }
+    _render() {
+      this._paint(this.getBids(), this.getAsks());
+    }
+    _paint(bids, asks) {
+      if (!this.asksEl || !this.bidsEl) return;
+      const visibleAsks = asks.slice(0, this._depth);
+      const visibleBids = bids.slice(0, this._depth);
+      const maxBid = Math.max(...visibleBids.map((level) => level.quantity), 1);
+      const maxAsk = Math.max(...visibleAsks.map((level) => level.quantity), 1);
+      const maxBoth = Math.max(maxBid, maxAsk, 1);
+      const own = this._ownQuantities();
+      const painted = /* @__PURE__ */ new Map();
+      const askTotals = [];
+      let running = 0;
+      for (const level of visibleAsks) {
+        running += level.quantity;
+        askTotals.push(running);
+      }
+      const askRows = [];
+      for (let i = visibleAsks.length - 1; i >= 0; i--) {
+        askRows.push(this._levelRow(visibleAsks[i], {
+          rowClass: "ob-row ask",
+          orderSide: "buy",
+          key: `a_${visibleAsks[i].price}`,
+          cumulative: askTotals[i],
+          barPct: visibleAsks[i].quantity / maxAsk * 100,
+          heatPct: HEAT_FLOOR_PCT + HEAT_RANGE_PCT * (visibleAsks[i].quantity / maxBoth),
+          // More size on the offer is pressure downward, so a growing ask
+          // level flashes in the falling colour.
+          growthClass: "flash-red",
+          shrinkClass: "flash-green",
+          ownQuantity: own.asks.get(_OrderBookWidget._priceKey(visibleAsks[i].price)),
+          painted
+        }));
+      }
+      this.asksEl.replaceChildren(...askRows);
+      running = 0;
+      const bidRows = [];
+      for (const level of visibleBids) {
+        running += level.quantity;
+        bidRows.push(this._levelRow(level, {
+          rowClass: "ob-row bid",
+          orderSide: "sell",
+          key: `b_${level.price}`,
+          cumulative: running,
+          barPct: level.quantity / maxBid * 100,
+          heatPct: HEAT_FLOOR_PCT + HEAT_RANGE_PCT * (level.quantity / maxBoth),
+          growthClass: "flash-green",
+          shrinkClass: "flash-red",
+          ownQuantity: own.bids.get(_OrderBookWidget._priceKey(level.price)),
+          painted
+        }));
+      }
+      this.bidsEl.replaceChildren(...bidRows);
+      this._prevQuantities = painted;
+      if (asks.length > 0 && bids.length > 0) {
+        const bestAsk = asks[0].price;
+        const bestBid = bids[0].price;
+        const spread = bestAsk - bestBid;
+        if (this.midEl) this.midEl.textContent = formatPrice((bestAsk + bestBid) / 2);
+        if (this._midSpreadEl) this._midSpreadEl.textContent = formatPrice(spread);
+        if (this.spreadEl) this.spreadEl.textContent = this._host.t("Spread: {0}", formatPrice(spread));
+      }
+      this._paintSentiment(visibleBids, visibleAsks);
+      this._paintDepthChart(visibleBids, visibleAsks);
+    }
+    // One level. Every measurement it carries — the bar's share of its side, the
+    // heat tint — reaches the stylesheet as a custom property, so the widths and
+    // the colours are still declared in CSS.
+    _levelRow(level, options) {
+      const quantity = makeElement("span", "qty", {}, [formatQty(level.quantity)]);
+      if (options.ownQuantity) {
+        quantity.appendChild(makeElement(
+          "span",
+          "own-badge",
+          { title: this._host.t("YourOrder") },
+          [formatQty(options.ownQuantity)]
+        ));
+      }
+      const row = makeElement("div", options.rowClass, {
+        "data-side": options.orderSide,
+        "data-price": String(level.price)
+      }, [
+        makeElement("span", "price", {}, [formatPrice(level.price)]),
+        quantity,
+        makeElement("span", "total", {}, [formatQty(options.cumulative)]),
+        makeElement("span", "bar", {}, [])
+      ]);
+      row.style.setProperty("--t-ob-bar", `${options.barPct.toFixed(0)}%`);
+      row.style.setProperty("--t-ob-heat", `${options.heatPct.toFixed(1)}%`);
+      if (options.ownQuantity) row.classList.add("own");
+      const previous = this._prevQuantities.get(options.key);
+      if (previous !== void 0 && previous !== level.quantity)
+        row.classList.add(level.quantity > previous ? options.growthClass : options.shrinkClass);
+      options.painted.set(options.key, level.quantity);
+      return row;
+    }
+    // This session's resting orders on this symbol, summed per price — the "your
+    // size is here" badge is an overlay on the ledger, so it reads the client's
+    // own order cache rather than subscribing to anything.
+    //
+    // Prices are keyed as fixed-point text: two floats that print the same are
+    // the same level to a user, and `===` on them is not.
+    _ownQuantities() {
+      const bids = /* @__PURE__ */ new Map();
+      const asks = /* @__PURE__ */ new Map();
+      if (!this._currentSymbol) return { bids, asks };
+      for (const order of this._host.trading.marketData.getOrders() || []) {
+        if (!order || order.instrument !== this._currentSymbol) continue;
+        if (order.status !== RESTING_STATE) continue;
+        if (order.limitPrice == null || order.side == null) continue;
+        const side = this._host.presentation.isBuy(order.side) ? bids : asks;
+        const key = _OrderBookWidget._priceKey(order.limitPrice);
+        const left = Number(order.balance ?? order.quantity) || 0;
+        side.set(key, (side.get(key) || 0) + left);
+      }
+      return { bids, asks };
+    }
+    static _priceKey(price) {
+      return Number(price).toFixed(8);
+    }
+    // The bid/ask split under the ladder, as one measurement the stylesheet
+    // turns into two widths.
+    //
+    // It sums the VISIBLE levels only, so the figure moves when the user changes
+    // depth. A whole-book share needs the server to aggregate one, which the
+    // frame does not carry today.
+    _paintSentiment(bids, asks) {
+      if (!this._sentimentEl) return;
+      const bidSum = bids.reduce((sum, level) => sum + level.quantity, 0);
+      const askSum = asks.reduce((sum, level) => sum + level.quantity, 0);
+      const total = bidSum + askSum;
+      if (total <= 0) {
+        this._sentimentEl.style.setProperty("--t-ob-sent", "50%");
+        if (this._sentBidPctEl) this._sentBidPctEl.textContent = "--";
+        if (this._sentAskPctEl) this._sentAskPctEl.textContent = "--";
+        return;
+      }
+      const askPct = Math.round(askSum / total * 100);
+      const bidPct = 100 - askPct;
+      this._sentimentEl.style.setProperty("--t-ob-sent", `${bidPct}%`);
+      if (this._sentBidPctEl) this._sentBidPctEl.textContent = `${bidPct}%`;
+      if (this._sentAskPctEl) this._sentAskPctEl.textContent = `${askPct}%`;
+    }
+    // The depth curve above the ladder. Everything shaped is in
+    // `orderbook-depth.ts`; what is left here is the canvas plumbing and the
+    // host's palette, because a canvas takes colours as values and a class name
+    // cannot reach one.
+    _paintDepthChart(bids, asks) {
+      const canvas = this.depthChartEl;
+      if (!canvas || !this._showDepthChart) return;
+      const ratio = Number(this._deps.pixelRatio()) || 1;
+      const cssWidth = canvas.clientWidth || 0;
+      const cssHeight = canvas.clientHeight || 0;
+      if (cssWidth < 4 || cssHeight < 4) return;
+      const width = Math.floor(cssWidth * ratio);
+      const height = Math.floor(cssHeight * ratio);
+      if (canvas.width !== width) canvas.width = width;
+      if (canvas.height !== height) canvas.height = height;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      ctx.clearRect(0, 0, width, height);
+      if (bids.length === 0 && asks.length === 0) return;
+      const pad = 2 * ratio;
+      const midX = Math.floor(width / 2);
+      const geometry = {
+        midX,
+        pad,
+        halfWidth: midX - pad,
+        baseY: height - pad,
+        innerHeight: height - pad * 2
+      };
+      const bidSide = depthSide(bids, -1, geometry);
+      const askSide = depthSide(asks, 1, geometry);
+      const maxTotal = Math.max(bidSide ? bidSide.total : 0, askSide ? askSide.total : 0, 1);
+      const palette = this._host.presentation.canvasPalette();
+      if (bidSide) this._strokeDepthSide(ctx, depthPolyline(bidSide, maxTotal, geometry), palette.up, geometry, ratio);
+      if (askSide) this._strokeDepthSide(ctx, depthPolyline(askSide, maxTotal, geometry), palette.down, geometry, ratio);
+      ctx.globalAlpha = 0.4;
+      ctx.fillStyle = palette.grid;
+      ctx.fillRect(midX - Math.max(1, ratio / 2), 0, Math.max(1, ratio), height);
+      ctx.globalAlpha = 1;
+    }
+    // Area under the step curve, then the curve on top. Opacity is varied here
+    // rather than in the colour, so the host states one solid colour per
+    // direction and this decides how much of it a fill is worth.
+    _strokeDepthSide(ctx, line, color, geometry, ratio) {
+      if (line.length === 0) return;
+      ctx.beginPath();
+      ctx.moveTo(line[0][0], geometry.baseY);
+      for (const [x, y] of line) ctx.lineTo(x, y);
+      ctx.lineTo(line[line.length - 1][0], geometry.baseY);
+      ctx.closePath();
+      ctx.globalAlpha = 0.18;
+      ctx.fillStyle = color;
+      ctx.fill();
+      ctx.beginPath();
+      ctx.moveTo(line[0][0], line[0][1]);
+      for (let i = 1; i < line.length; i++) ctx.lineTo(line[i][0], line[i][1]);
+      ctx.lineWidth = Math.max(1.5, 1.5 * ratio);
+      ctx.lineJoin = "miter";
+      ctx.globalAlpha = 0.95;
+      ctx.strokeStyle = color;
+      ctx.stroke();
+      ctx.globalAlpha = 1;
+    }
+  };
+  _OrderBookWidget.TYPE = ControlTypes.OrderBook;
+  /// The depths the ladder offers, in the order the header shows them.
+  _OrderBookWidget.DEPTHS = [5, 10];
+  /// Persisted depth for the instance that follows the host's active symbol.
+  /// Pinned instances carry their depth in their own per-panel state instead,
+  /// which is what makes two ladders on one page able to differ.
+  _OrderBookWidget.DEPTH_KEY = "terminal.obDepth";
+  /// Persisted row layout for the follows-active instance.
+  _OrderBookWidget.VIEW_KEY = "terminal.obView";
+  /// Persisted "bids above the mid line" flag for the follows-active instance.
+  _OrderBookWidget.INVERT_KEY = "terminal.obInvert";
+  /// Persisted depth-chart visibility for the follows-active instance.
+  _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;
+      }
+      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 price = 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,
+      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 ? [] : 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 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
+      });
+    }
+    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
+    });
+  }
+
+  // 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 {
+    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]);
+      this._renderBubbles();
+    }
+    /// One print off the wire. Ignored unless this feed watches its symbol:
+    /// a host fans every tick to every feed and each decides for itself, which
+    /// is the only arrangement that supports per-instance extras.
+    addTrade(trade) {
+      if (!trade || !this._watches(trade.symbol)) return;
+      this._stamp(trade);
+      this.trades.unshift(trade);
+      if (this.trades.length > _TradeFeedWidget.MAX_ROWS) this.trades.length = _TradeFeedWidget.MAX_ROWS;
+      this.bubbleTrades.unshift(trade);
+      if (this.bubbleTrades.length > _TradeFeedWidget.MAX_BUBBLES) this.bubbleTrades.length = _TradeFeedWidget.MAX_BUBBLES;
+      this.avgQty = this.avgQty * 0.95 + (trade.quantity ?? 0) * 0.05;
+      this._marketGrid?.setRows([...this.trades]);
+      this._renderBubbles();
+    }
+    /// The account's own fills for the My-trades tab. The one thing this panel
+    /// pulls rather than being pushed.
+    async loadMyTrades(portfolioId, symbol) {
+      if (!portfolioId) {
+        this.myTrades = [];
+        this._renderMy();
+        return;
+      }
+      try {
+        this.myTrades = await this._host.trading.api.getExecutions(portfolioId, symbol, _TradeFeedWidget.MAX_ROWS) || [];
+      } catch (err) {
+        this._host.log(`TradeFeedWidget: failed to load own trades: ${err}`);
+        this.myTrades = [];
+      }
+      this._renderMy();
+    }
+    // ---------------------------------------------------------------- the grid
+    // One construction for both tapes: same columns, same chrome, different
+    // tbody. The container holds the scroll; the grid holds the rows.
+    _makeGrid(containerSelector) {
+      const head = this.rootEl.querySelector(`${containerSelector} thead`);
+      const body = this.rootEl.querySelector(`${containerSelector} tbody`);
+      if (!head || !body) return null;
+      return new DataGrid({
+        head,
+        body,
+        columns: this._columns(),
+        // Newest print on top — the only order a tape is read in at rest;
+        // a header click can still reorder, and clears back to this.
+        defaultSort: { col: "time", dir: "desc" },
+        rowKey: (t) => _TradeFeedWidget._key(t),
+        emptyText: this._host.t("No trades yet"),
+        rowClass: (t) => this._rowClass(t),
+        contextMenu: makeGridMenu(this._host),
+        selection: "multi",
+        // The grid marks what is new since the previous paint; the
+        // stylesheet decides what a flash looks like.
+        flashNewClass: "flash-new"
+      });
+    }
+    // Prints arrive anonymous; executions arrive with ids. Stamp the former
+    // once, on arrival, and key both without ever colliding.
+    _stamp(trade) {
+      const keyed = trade;
+      if (keyed._k == null && keyed.id == null) keyed._k = ++this._seq;
+      return trade;
+    }
+    static _key(trade) {
+      const keyed = trade;
+      return keyed.id != null ? String(keyed.id) : `p${keyed._k}`;
+    }
+    // The direction class sits on the row, so price and side inherit its
+    // colour while time and qty state their own — plus the "unusually large"
+    // mark, measured against the rolling average as of this paint.
+    _rowClass(trade) {
+      const classes = this._host.presentation.sideClass(trade.side).split(" ").filter(Boolean);
+      if ((trade.quantity ?? 0) > this.avgQty * 2) classes.push("large-trade");
+      return classes.join(" ");
+    }
+    // The tape's single column declaration, shared by both tabs. `time` sorts
+    // by the wire timestamp and shows the clock; the symbol column exists
+    // always and is hidden until a second instrument is in the feed.
+    _columns() {
+      const label = (key) => this._host.t(key);
+      const presentation = this._host.presentation;
+      return [
+        {
+          key: "time",
+          header: label("Time"),
+          exportable: true,
+          value: (t) => String(t.time || t.executedAt || ""),
+          render: (t) => formatTime(t.time || t.executedAt)
+        },
+        {
+          key: "symbol",
+          header: label("Sym"),
+          exportable: true,
+          value: (t) => t.symbol
+        },
+        {
+          key: "price",
+          header: label("Price"),
+          exportable: true,
+          value: (t) => t.price,
+          render: (t) => formatPrice(t.price)
+        },
+        {
+          key: "quantity",
+          header: label("Qty"),
+          exportable: true,
+          value: (t) => t.quantity,
+          render: (t) => formatQty(t.quantity)
+        },
+        {
+          key: "side",
+          header: label("Side"),
+          exportable: true,
+          value: (t) => t.side,
+          render: (t) => presentation.sideText(t.side),
+          exportValue: (t) => presentation.sideText(t.side)
+        }
+      ];
+    }
+    // Both tapes show the symbol column exactly while a second instrument is
+    // in the feed — through the grid's own column visibility, so the user's
+    // hide/show from the menu still works the rest of the time.
+    _syncSymbolColumn() {
+      const multi = this._extraSymbols.size > 0;
+      for (const grid of [this._marketGrid, this._myGrid]) {
+        if (!grid) continue;
+        if (multi) grid.showColumn("symbol");
+        else grid.hideColumn("symbol");
+      }
+    }
+    /// Pin an extra instrument to this feed: subscribe it, show it alongside
+    /// the primary, and remember it in the instance's state.
+    async addExtraSymbol(symbol) {
+      if (!symbol) return;
+      const sym = String(symbol).toUpperCase();
+      if (sym === this._activeSymbol || this._extraSymbols.has(sym)) return;
+      this._extraSymbols.add(sym);
+      try {
+        await this._host.trading.marketData.addSymbol(sym, MarketDataLevels.Tape);
+      } catch {
+      }
+      this._renderExtras();
+      this._renderBubbles();
+      this._persistExtras();
+    }
+    /// Unpin one, dropping its subscription and the prints already on screen.
+    async removeExtraSymbol(symbol) {
+      if (!symbol) return;
+      const sym = String(symbol).toUpperCase();
+      if (!this._extraSymbols.has(sym)) return;
+      this._extraSymbols.delete(sym);
+      try {
+        await this._host.trading.marketData.removeSymbol(sym);
+      } catch {
+      }
+      this.trades = this.trades.filter((t) => t.symbol !== sym);
+      this.bubbleTrades = this.bubbleTrades.filter((t) => t.symbol !== sym);
+      this._marketGrid?.setRows([...this.trades]);
+      this._renderExtras();
+      this._renderBubbles();
+      this._persistExtras();
+    }
+    getExtraSymbols() {
+      return [...this._extraSymbols];
+    }
+    // Record what this instance pins, then ask for the layout to be flushed.
+    // Two calls because they are two decisions: what the instance remembers,
+    // and whether that is worth writing out now. Pinning is — losing the pin on
+    // the next reload is exactly the complaint.
+    _persistExtras() {
+      this._host.persistState({ extras: [...this._extraSymbols] });
+      this._host.saveLayout();
+    }
+    // Does this feed show `symbol` — as the page's active one, or pinned?
+    _watches(symbol) {
+      if (!symbol) return false;
+      return symbol === this._activeSymbol || this._extraSymbols.has(symbol);
+    }
+    // ---------------------------------------------------------------- the list
+    _renderMy() {
+      this._myGrid?.setRows(this.myTrades.map((t) => this._stamp(t)));
+    }
+    _renderExtras() {
+      this._syncSymbolColumn();
+      if (!this.extrasEl) return;
+      if (this._extraSymbols.size === 0) {
+        this.extrasEl.replaceChildren();
+        this.extrasEl.setAttribute("hidden", "");
+        return;
+      }
+      this.extrasEl.removeAttribute("hidden");
+      const remove = this._host.t("Remove");
+      const chips = [...this._extraSymbols].map((symbol) => {
+        const button = makeIconButton("tf-extra-rm", remove, "bi-x", { type: "button" });
+        button.addEventListener("click", (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          void this.removeExtraSymbol(symbol);
+        });
+        return makeElement("span", "tf-extra-chip", { role: "listitem" }, [
+          makeElement("span", "tf-extra-sym", {}, [symbol]),
+          button
+        ]);
+      });
+      this.extrasEl.replaceChildren(...chips);
+    }
+    // --------------------------------------------------------------- the views
+    _bindTabs() {
+      this._tabsEl?.addEventListener("click", (e) => {
+        const button = e.target?.closest(".tf-tab");
+        if (!button) return;
+        this._selectTab(button.dataset.tab || "market");
+      });
+    }
+    _selectTab(tab) {
+      this.tab = tab === "my" ? "my" : "market";
+      this._tabsEl?.querySelectorAll(".tf-tab").forEach((b) => {
+        const selected = b.dataset.tab === this.tab;
+        b.classList.toggle("active", selected);
+        b.setAttribute("aria-selected", selected ? "true" : "false");
+      });
+      this.rootEl.classList.toggle("tf-tab-market", this.tab === "market");
+      this.rootEl.classList.toggle("tf-tab-my", this.tab === "my");
+      if (this.tab === "my") void this.loadMyTrades(this._host.trading.portfolioId(), this._activeSymbol);
+      else this._renderBubbles();
+    }
+    _bindViewToggle() {
+      this._viewToggleEl?.addEventListener("click", (e) => {
+        const button = e.target?.closest(".tf-view-btn");
+        if (!button) return;
+        const next = button.dataset.view;
+        if (next !== "list" && next !== "bubbles" || next === this.view) return;
+        this.view = next;
+        this._host.preferences.set(_TradeFeedWidget.VIEW_KEY, next);
+        this._applyView();
+      });
+    }
+    // Which rendering is showing is two class names on the root, not a display
+    // written onto elements: a narrow viewport forces the list back on, and
+    // that is a stylesheet's decision to make, not this control's.
+    _applyView() {
+      const list = this.view === "list";
+      this.rootEl.classList.toggle("tf-view-list", list);
+      this.rootEl.classList.toggle("tf-view-bubbles", !list);
+      this._viewToggleEl?.querySelectorAll(".tf-view-btn").forEach((b) => {
+        const selected = b.dataset.view === this.view;
+        b.classList.toggle("active", selected);
+        b.setAttribute("aria-pressed", selected ? "true" : "false");
+      });
+      if (!list) {
+        this._sizeCanvas();
+        this._renderBubbles();
+      }
+    }
+    // -------------------------------------------------------------- the chart
+    // The canvas in CSS pixels, and its backing store in device pixels. Without
+    // the second the chart is drawn at a third of the resolution the screen has.
+    _sizeCanvas() {
+      const canvas = this.bubbleCanvas;
+      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._bubbleCtx?.setTransform(ratio, 0, 0, ratio, 0, 0);
+      }
+      this._canvasSize = { width, height };
+    }
+    // The prints as the chart reads them: direction decided once by the host,
+    // and a position on the shared time axis. Newest first, as the tape holds
+    // them.
+    _feedTicks() {
+      const presentation = this._host.presentation;
+      return this.bubbleTrades.map((trade, index) => ({
+        symbol: trade.symbol || "",
+        side: trade.side,
+        buy: presentation.isBuy(trade.side),
+        price: Number(trade.price ?? 0),
+        quantity: Number(trade.quantity ?? 0),
+        time: trade.time || trade.executedAt || "",
+        index
+      }));
+    }
+    // One lane per watched symbol, active first. A feed with nothing pinned is
+    // one lane over everything it holds, which is also the only case where the
+    // lane needs no name.
+    _lanes(ticks) {
+      if (this._extraSymbols.size === 0)
+        return [{ symbol: this._activeSymbol || "", ticks }];
+      const symbols = this._activeSymbol ? [this._activeSymbol] : [];
+      for (const symbol of this._extraSymbols) if (!symbols.includes(symbol)) symbols.push(symbol);
+      return symbols.map((symbol) => ({ symbol, ticks: ticks.filter((t) => t.symbol === symbol) }));
+    }
+    _renderBubbles() {
+      const ctx = this._bubbleCtx;
+      if (!ctx || this.view !== "bubbles") return;
+      if (!this._canvasSize) this._sizeCanvas();
+      const size = this._canvasSize;
+      if (!size) return;
+      ctx.clearRect(0, 0, size.width, size.height);
+      this._bubbleHits = [];
+      const ticks = this._feedTicks();
+      if (ticks.length === 0) return;
+      const layout = layoutBubbles({ width: size.width, height: size.height, total: ticks.length, lanes: this._lanes(ticks) });
+      const palette = this._host.presentation.canvasPalette();
+      ctx.font = palette.font;
+      ctx.lineWidth = 1;
+      for (const lane of layout.lanes) {
+        if (lane.separatorY !== null) {
+          ctx.globalAlpha = SEPARATOR_ALPHA;
+          ctx.strokeStyle = palette.grid;
+          _TradeFeedWidget._rule(ctx, 0, size.width, lane.separatorY);
+        }
+        if (lane.label) {
+          ctx.globalAlpha = LABEL_ALPHA;
+          ctx.fillStyle = palette.grid;
+          ctx.textBaseline = "top";
+          ctx.textAlign = "left";
+          ctx.fillText(lane.symbol, lane.label.x, lane.label.y);
+        }
+        for (const tick of lane.ticks) {
+          ctx.globalAlpha = RULE_ALPHA;
+          ctx.strokeStyle = palette.grid;
+          _TradeFeedWidget._rule(ctx, 0, layout.axisX - 2, tick.y);
+          ctx.globalAlpha = LABEL_ALPHA;
+          ctx.fillStyle = palette.grid;
+          ctx.textBaseline = "middle";
+          ctx.textAlign = "left";
+          ctx.fillText(tick.text, layout.labelX, tick.y);
+        }
+      }
+      for (const shape of layout.bubbles) {
+        const colour = shape.bubble.buy ? palette.up : palette.down;
+        ctx.fillStyle = colour;
+        ctx.strokeStyle = colour;
+        ctx.beginPath();
+        ctx.arc(shape.x, shape.y, shape.radius, 0, Math.PI * 2);
+        ctx.globalAlpha = FILL_ALPHA;
+        ctx.fill();
+        ctx.globalAlpha = STROKE_ALPHA;
+        ctx.stroke();
+        this._bubbleHits.push(shape);
+      }
+      ctx.globalAlpha = 1;
+    }
+    static _rule(ctx, from, to, y) {
+      ctx.beginPath();
+      ctx.moveTo(from, y);
+      ctx.lineTo(to, y);
+      ctx.stroke();
+    }
+    _bindBubbleHover() {
+      const canvas = this.bubbleCanvas;
+      if (!canvas) return;
+      canvas.addEventListener("mousemove", (e) => {
+        if (this.view !== "bubbles") {
+          this._hideTooltip();
+          return;
+        }
+        const rect = canvas.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        const hit = this._hitTest(x, y);
+        if (hit) this._showTooltip(hit.bubble, x, y);
+        else this._hideTooltip();
+      });
+      canvas.addEventListener("mouseleave", () => this._hideTooltip());
+    }
+    // Backwards, so the circle drawn last — the newest print, on top — is the
+    // one a cursor over both picks.
+    _hitTest(x, y) {
+      for (let i = this._bubbleHits.length - 1; i >= 0; i--) {
+        const shape = this._bubbleHits[i];
+        const dx = x - shape.x;
+        const dy = y - shape.y;
+        const reach = Math.max(shape.radius, HOVER_SLACK);
+        if (dx * dx + dy * dy <= reach * reach) return shape;
+      }
+      return null;
+    }
+    _showTooltip(bubble, x, y) {
+      const tooltip = this._tooltipEl;
+      const canvas = this.bubbleCanvas;
+      if (!tooltip || !canvas) return;
+      const presentation = this._host.presentation;
+      const aggregated = bubble.count > 1;
+      const side = bubble.side;
+      const lines = [];
+      if (this._extraSymbols.size > 0) lines.push(this._tooltipLine(this._host.t("Symbol"), bubble.symbol, ""));
+      lines.push(this._tooltipLine(this._host.t("Time"), formatTime(bubble.time), ""));
+      lines.push(this._tooltipLine(aggregated ? this._host.t("VWAP") : this._host.t("Price"), formatPrice(bubble.price), ""));
+      lines.push(this._tooltipLine(aggregated ? this._host.t("Total qty") : this._host.t("Qty"), formatQty(bubble.quantity), ""));
+      lines.push(this._tooltipLine(this._host.t("Side"), presentation.sideText(side), presentation.sideClass(side)));
+      if (aggregated) lines.push(this._tooltipLine(this._host.t("Trades"), String(bubble.count), ""));
+      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, valueClass) {
+      const row = makeElement("div", "tf-bbtt-row", {}, [
+        makeElement("span", "tf-bbtt-label", {}, [label]),
+        makeElement("span", "tf-bbtt-value", {}, [value])
+      ]);
+      for (const name of valueClass.split(" ")) if (name) row.childNodes[1].classList.add(name);
+      return row;
+    }
+    _hideTooltip() {
+      this._tooltipEl?.setAttribute("hidden", "");
+    }
+  };
+  _TradeFeedWidget.TYPE = ControlTypes.TradeFeed;
+  /// Shared across every trade feed on the page: which of the two renderings
+  /// the user last chose. The value is what a user's stored settings already
+  /// hold, so it is spelled exactly as it always was.
+  _TradeFeedWidget.VIEW_KEY = "terminal.tradeFeedView";
+  /// Rows kept in the list, and prints kept for the chart. The chart holds
+  /// far more because it compacts them: a bubble stands for a slice.
+  _TradeFeedWidget.MAX_ROWS = 50;
+  _TradeFeedWidget.MAX_BUBBLES = 500;
+  var TradeFeedWidget = _TradeFeedWidget;
   return __toCommonJS(index_exports);
 })();
 //# sourceMappingURL=sstradingcontrols.js.map