@stocksharp/trading-controls 0.1.0

package/LICENSE

@@ -0,0 +1,30 @@
+StockSharp Custom License Notice
+
+Copyright (c) 2010-present StockSharp Platform LLC and/or its affiliates.
+All rights reserved.
+
+All source code, binaries, documentation, examples, media assets,
+configuration files, and other materials contained in this repository are
+the proprietary property of StockSharp, unless a file or third-party notice
+explicitly states otherwise.
+
+This repository is not licensed under the Apache License, the MIT License,
+or any other general-purpose open source license.
+Viewing, downloading, copying, building, modifying, using, distributing, or
+otherwise accessing any part of this repository is permitted only under the
+StockSharp End User License Agreement and other applicable StockSharp terms
+published on the official StockSharp website:
+
+https://stocksharp.com/en/products/eula/
+
+StockSharp may update its license terms on the official website. Users are
+responsible for monitoring the official StockSharp website and complying
+with the then-current terms. If this notice conflicts with the EULA or other
+terms published on the official StockSharp website, the website terms control.
+
+Nothing in this repository grants any rights to StockSharp trademarks,
+service marks, product names, logos, or other brand assets except as
+expressly permitted by StockSharp in writing.
+
+Third-party components, if any, remain subject to their respective license
+terms and notices.

package/NOTICE

@@ -0,0 +1,21 @@
+StockSharp Notice
+
+StockSharp Platform LLC
+https://stocksharp.com/
+
+Copyright (c) 2010-present StockSharp Platform LLC and/or its affiliates.
+All rights reserved.
+
+The materials in this repository are proprietary to StockSharp unless a file
+or third-party notice explicitly states otherwise. Use of these materials is
+governed by the StockSharp End User License Agreement and other applicable
+terms published on the official StockSharp website:
+
+https://stocksharp.com/en/products/eula/
+
+StockSharp may update its license terms on the official website. Users are
+responsible for monitoring the official StockSharp website and complying
+with the then-current terms.
+
+This repository may include third-party components. Those components remain
+subject to their respective license terms and notices.

package/README.md

@@ -0,0 +1,240 @@
+# StockSharp JS Trading Controls
+
+[![Build and test](https://github.com/StockSharp/JS-TradingControls/actions/workflows/ci.yml/badge.svg)](https://github.com/StockSharp/JS-TradingControls/actions/workflows/ci.yml)
+[![npm version](https://img.shields.io/npm/v/%40stocksharp%2Ftrading-controls.svg)](https://www.npmjs.com/package/@stocksharp/trading-controls)
+[![License](https://img.shields.io/badge/license-StockSharp%20EULA-c8202f.svg)](LICENSE)
+
+**StockSharp JS Trading Controls** are the browser panels a trading screen is
+made of: an **active orders** blotter with inline edit, a **positions** blotter
+with a pinned cash balance, a **trade history** blotter, and a **watchlist**
+with live quotes, favourites and category tabs.
+
+Each control builds its own DOM, renders its own table through
+[`@stocksharp/grids`](https://www.npmjs.com/package/@stocksharp/grids), and reaches
+the outside world through exactly one object — a `TradingHost`.
+
+[StockSharp website](https://stocksharp.com/) ·
+[GitHub repository](https://github.com/StockSharp/JS-TradingControls) ·
+[Issue tracker](https://github.com/StockSharp/JS-TradingControls/issues)
+
+## Quick start
+
+```sh
+npm install @stocksharp/trading-controls
+```
+
+```ts
+import { PositionsWidget } from '@stocksharp/trading-controls';
+import '@stocksharp/trading-controls/styles.css';
+// Optional: a working dark/light palette, if your page has none of its own.
+import '@stocksharp/trading-controls/theme.css';
+
+const panel = PositionsWidget.create(document.querySelector('#positions')!, {}, {
+  host,                                        // see "The host port" below
+  closePosition: (pf, instrument, symbol) => api.close(pf, instrument),
+  reversePosition: (pf, instrument, symbol) => api.reverse(pf, instrument),
+  refreshPositions: () => reload(),
+});
+
+panel.update(positions);
+panel.updateBalance({ available: 1000, locked: 250, total: 1250 });
+```
+
+The package also ships a ready-to-use browser bundle exposed as
+`window.SSTradingControls`:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@stocksharp/trading-controls@0.1.0/dist/sstradingcontrols.js"></script>
+<script>
+  const { PositionsWidget } = window.SSTradingControls;
+</script>
+```
+
+## The host port is the whole API surface
+
+A control imports no translator, no settings singleton, no panel registry and no
+docking manager, and it never reads a `window` global. Everything it needs
+arrives as one `TradingHost`:
+
+| member | what the host answers |
+|---|---|
+| `isPrimary` | is this the instance that speaks for the page? |
+| `t(key, …args)` | translate; see [Text](#everything-a-control-shows-is-the-hosts) for what a key looks like |
+| `presentation` | word and colour a side, an order type, a status, a P&L sign |
+| `preferences` / `cache` | two stores — settings that must survive, and scratch |
+| `trading` | the API, the market-data client, the active portfolio, an instrument picker |
+| `ticker` | where a control reports the symbols it is showing |
+| `allow(action)` | may the user do this? |
+| `log(message)` | where diagnostics go |
+| `close()` `spawn(state)` `persistState(patch)` `saveLayout()` | lifecycle calls back |
+| `register` `unregister` `broadcast<T>` | the host's handle on live instances |
+
+**Every member is required, and `assertHost` proves it before the control
+renders anything.** A half-supplied host is how a control half-works: it draws,
+it looks alive, and the one capability nobody wired is discovered by a user
+clicking something that does nothing. So a missing member throws at construction
+naming the path — `WatchlistWidget: host.trading.api.getExecutions is required` —
+nested members included.
+
+**Seven of them no shipped control calls**: `spawn`, `persistState`,
+`saveLayout`, `log`, `trading.pickInstrument`, `marketData.resubscribe` and
+`marketData.getOrders`. They are required anyway, and not on speculation — the
+terminal this was extracted from has seven controls, and the three still on its
+side of the boundary (order book, order entry, trade feed) are already written
+against this same interface and call every one of those members. Narrowing the
+port now and widening it again as each moves in would break every host twice.
+If you are adopting only the four controls here, stubs are a correct answer: a
+no-op `spawn`, a `log` that forwards to the console.
+
+Two pairs are deliberately separate rather than merged:
+
+- **`preferences` and `cache` are two stores.** The watchlist's per-symbol,
+  per-day price baseline is scratch. Routing it through a server-synced settings
+  blob is how a settings row becomes a cache.
+- **`persistState` and `saveLayout` are two calls.** One records into the panel's
+  bag, the other flushes. Hiding a disk write inside "remember this" is exactly
+  the invisible coupling the port exists to remove.
+
+## Everything a control shows is the host's
+
+- **Text** arrives through `t()`. There is no dictionary here and no string the
+  package decides the wording of — see below for the keys you have to answer.
+- **Colour** is class names the control emits; `styles/trading-controls.css`
+  gives them meaning and reads its values from `--t-*` custom properties. Four
+  names go the other way: `presentation.sideClass` and `pnlClass` are the
+  *host's* answer, and a control forwards the string to the cell without
+  looking at it. The shipped stylesheet paints `side-buy` / `side-sell` and
+  `pnl-positive` / `pnl-negative`; answer with those, or answer with your own
+  names and style those yourself. The port exports the list as
+  `PRESENTATION_CLASSES`, and `npm test` asserts the stylesheet styles all four.
+- **Data** is handed in. A control never fetches on its own — except the two
+  reads the port names (`getExecutions`, `searchInstruments`), which the host
+  implements.
+
+### The 52 keys a host has to answer
+
+`t()` cannot fail. A key the host does not know is rendered to the user as
+itself, so `NoActiveOrders` appears in the empty blotter and `ClosePanel`
+becomes a tooltip — a missing translation looks like a typo, never like an
+error. The complete list ships with the package:
+
+```ts
+import keys from '@stocksharp/trading-controls/translation-keys.json';
+// { count: 52, keys: ['Actions', 'ActiveOrders', …] }
+```
+
+It is **generated from the sources** (`npm run i18n:update`) and re-checked by
+`npm test`, so it cannot drift from what the controls actually ask for.
+
+The keys are not derivable, which is why the list is shipped rather than
+described. Most are resource identifiers (`ClosePanel`, `ExportToExcel`,
+`NoActiveOrders`, `Change24hPct`); some are English phrases, because that is the
+form the terminal's dictionary already held them in (`Close position on {0}`,
+`No trade history`, `Locked: ${0}`). `{0}`, `{1}` … are replaced positionally
+from the `args` of the same `t()` call, so a translation may reorder them.
+
+Controls render elements, never HTML strings, so nothing here can be an
+injection site. A cell that holds a button holds a real element with its own
+listener rather than an `onclick` attribute reaching a global.
+
+## The stylesheet contract
+
+The package **ships its stylesheet** — `@stocksharp/trading-controls/styles.css`.
+Documenting the class names instead would have left an adopting page to
+re-author about six hundred lines of CSS before it could see a table, which is
+not "renders outside its original host" in any useful sense.
+
+It is split in two so a host does not have to take a palette it disagrees with:
+
+| file | what it is | when to import |
+|---|---|---|
+| `@stocksharp/trading-controls/styles.css` | every rule, reading `var(--t-*)` and declaring none | always |
+| `@stocksharp/trading-controls/theme.css` | a working dark + light palette (`:root`, and `:root[data-bs-theme="light"]`) | only if your page has no `--t-*` tokens of its own |
+
+**The 22 properties a host must supply** if it skips `theme.css`:
+
+| group | properties |
+|---|---|
+| surfaces | `--t-bg` `--t-panel` `--t-header` `--t-hover` `--t-border` |
+| text | `--t-text` `--t-text-dim` `--t-text-bright` |
+| accent | `--t-accent` `--t-accent-hover` `--t-accent-text` `--t-accent-glow-soft` |
+| direction | `--t-green` `--t-red` `--t-green-flash` `--t-red-flash` |
+| warning | `--t-orange` (destructive but not a cancel) `--t-warning` (read this) |
+| type and shape | `--t-font` `--t-mono` `--t-radius` `--t-transition` |
+
+All 22 are required — none of them has a fallback baked into the rule that
+reads it. A `var(--t-orange, #f0b90b)` would keep the rule working on a host
+that never declared the token, which means the host never finds out, and the
+control quietly paints a shade from a palette nobody chose. `--t-orange` and
+`--t-warning` were the two that did, and no longer do.
+
+`npm test` runs `tools/check-style-contract.mjs`, which fails if a control emits
+a class the stylesheet never styles, if the stylesheet misses one of the
+`PRESENTATION_CLASSES` the host may return, if a rule reads a property
+`theme.css` does not declare, if `theme.css` declares one no rule reads, or if
+any rule reads a property with a fallback. The contract above is therefore
+checked, not just written down.
+
+Two things the page still owns:
+
+- **Bootstrap Icons.** A control says which glyph a button wears (`bi bi-x`,
+  `bi bi-arrow-clockwise`) but does not draw it, exactly as it names a colour
+  token without defining it.
+- **`grid-empty`, `visually-hidden`, `sort-asc` / `sort-desc`** come out of
+  `@stocksharp/grids`. This stylesheet carries them so an adopting page does not
+  have to know that; the second is spelled the way Bootstrap spells it.
+
+## What each control is
+
+### `ActiveOrdersWidget`
+
+The session's whole order list — nothing drops out on its own, so a user can
+watch an order's transitions instead of having a row vanish. A terminal row is
+greyed; a rejected one carries its reason on a hover icon (unwrapped out of the
+venue's JSON blob when it arrives that way) and its × dismisses locally rather
+than sending a cancel with nothing to cancel. Quantity, price and stop are
+editable in place while the venue still holds the order; committing an edit
+restates the whole triple, because a replace is not a field patch.
+
+### `PositionsWidget`
+
+Alphabetical at rest — positions have no natural "newest". Cash sits above them
+as a pinned row: a different shape from a position, so it supplies its own cells,
+stays out of the sort and out of the exported sheet, and being content it
+suppresses the "no positions" row. Close and reverse are per-row buttons wired to
+deps.
+
+### `TradeHistoryWidget`
+
+Read-only, newest fill on top, loaded against whichever portfolio the host names
+at refresh time rather than one captured at construction.
+
+### `WatchlistWidget`
+
+Live quotes with a search box, favourites and one tab per instrument category
+found in the data. A quote patches the two affected cells through the grid's
+`(rowKey, columnKey)` lookup instead of repainting — a repaint would cancel the
+flash animation it just started. It paints a screenful (`RENDER_CAP`) while the
+export and the subscription sync work over the whole filtered set, and only the
+primary instance reports to the host's ticker.
+
+## Exported sheets say what the screen says
+
+Every blotter exports to `.xlsx` through the grid, and a column states both
+forms: the localized text the user reads (`Sell`, `Filled`) and the raw figure
+under it (`2000` rather than the formatted `2,000.00`), so a sheet is sortable as
+numbers and cannot drift from the table it came from.
+
+## Development
+
+```sh
+npm install
+npm test     # typecheck + public-API snapshot + style contract + unit tests
+npm run build
+```
+
+`dist/` and `tests/_dist/` are build outputs and are gitignored.
+
+There is no browser in the test process: `tests/fake-dom.ts` implements the slice
+of DOM the controls touch, and its size is the statement of how narrow that
+slice is.

package/dist/esm/active-orders-widget.js

@@ -0,0 +1,382 @@
+// Active orders — multi-instance.
+//
+// Builds its own DOM (see `_buildRoot`) rather than cloning a <template> out of
+// the page, so it can be constructed by any host that supplies a `TradingHost`.
+// Every instance shares the same data source (a host refresh / an order update
+// off the socket); each update fans through the host's broadcast so duplicates
+// stay in sync.
+//
+// The table itself is `DataGrid` from `@stocksharp/grids`: the columns below are
+// the single declaration of this blotter — caption, value, rendering, colour
+// class and export all live together, and the <thead> is left empty for the
+// grid to fill. Cells that hold a control return a real Node with its own
+// listener, so nothing here reaches a global through an inline onclick
+// attribute; the callbacks arrive as deps instead.
+import { cleanRejectReason, formatPrice, formatQty } from './formatters.js';
+import { makeElement, makeIconButton, makePanelId, makePanelRoot } from './dom.js';
+import { ControlTypes } from './control-types.js';
+import { assertHost } from './trading-host.js';
+import { DataGrid } from '@stocksharp/grids/data-grid';
+/// StockSharp order states as they arrive on the wire. The blotter branches on
+/// them for row colour, for whether a cell can be edited in place and for what
+/// the × button does, so they are named once here instead of appearing as bare
+/// numbers at each branch.
+export const OrderStates = {
+    PendingRisk: 1,
+    Sent: 2,
+    Active: 3,
+    PartiallyFilled: 4,
+    Filled: 5,
+    Rejected: 6,
+    Cancelled: 7,
+};
+export class ActiveOrdersWidget {
+    static create(hostEl, state, deps) {
+        // Assert before building: the markup below is localized through the
+        // host, so a missing host has to fail here rather than render a panel
+        // captioned with raw English keys.
+        const host = assertHost(deps?.host, 'ActiveOrdersWidget');
+        const root = ActiveOrdersWidget._buildRoot(host);
+        root.id = makePanelId(ActiveOrdersWidget.TYPE);
+        hostEl.appendChild(root);
+        return new ActiveOrdersWidget(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.
+    //
+    // The rail's first two buttons are the ones that could not come across
+    // unchanged from the terminal's Razor template: they were inline
+    // `onclick="terminalApp.cancelAll()"` / `refreshOrders()`, references to a
+    // global this control must not have. They carry `.panel-cancel-all-btn` and
+    // `.panel-refresh-btn` now — the latter the name the other blotters' rails
+    // already give the identical button — and are wired to deps. Cancel-all
+    // keeps a distinct accessible name from its tooltip, which is why it states
+    // `aria-label` rather than taking the tooltip for both.
+    static _buildRoot(host) {
+        return makePanelRoot('active-orders-panel', host.t('ActiveOrders'), [
+            makeElement('div', 'panel-header', {}, [
+                makeElement('span', '', {}, [host.t('OpenOrders')]),
+                makeIconButton('bt-icon-btn bt-icon-cancel panel-close-btn', host.t('ClosePanel'), 'bi-x', { type: 'button' }),
+            ]),
+            makeElement('div', 'panel-body panel-body-with-rail', {}, [
+                makeElement('div', 'panel-body-content', {}, [
+                    makeElement('table', 'terminal-table active-orders-table', { role: 'table', 'aria-label': host.t('ActiveOrdersList') }, [
+                        makeElement('thead', '', {}, []),
+                        makeElement('tbody', 'active-orders-body', {}, []),
+                    ]),
+                ]),
+                makeElement('div', 'panel-rail', { role: 'toolbar', 'aria-label': host.t('ActiveOrdersActions') }, [
+                    makeIconButton('bt-icon-btn bt-icon-cancel-all panel-cancel-all-btn', host.t('CancelAll'), 'bi-x-circle', { 'aria-label': host.t('CancelAllOrders') }),
+                    makeIconButton('bt-icon-btn panel-refresh-btn', host.t('Refresh'), 'bi-arrow-clockwise', {}),
+                    makeIconButton('bt-icon-btn panel-export-btn', host.t('ExportToExcel'), 'bi-file-earmark-spreadsheet', {}),
+                ]),
+            ]),
+        ]);
+    }
+    constructor(rootEl, _state, deps) {
+        this._host = assertHost(deps?.host, 'ActiveOrdersWidget');
+        for (const name of ['cancelOrder', 'dismissOrder', 'editOrderField', 'replaceOrder', 'cancelAllOrders', 'refreshOrders']) {
+            if (typeof deps?.[name] !== 'function')
+                throw new Error(`ActiveOrdersWidget: dep "${name}" is required`);
+        }
+        this.rootEl = rootEl;
+        this._deps = deps;
+        this.el = this.rootEl.querySelector('.active-orders-body');
+        this._closeBtn = this.rootEl.querySelector('.panel-close-btn');
+        this._cancelAllBtn = this.rootEl.querySelector('.panel-cancel-all-btn');
+        this._refreshBtn = this.rootEl.querySelector('.panel-refresh-btn');
+        this._exportBtn = this.rootEl.querySelector('.panel-export-btn');
+        this._orders = [];
+        this._closeBtn?.addEventListener('click', (e) => {
+            e.preventDefault();
+            this._host.close();
+        });
+        this._cancelAllBtn?.addEventListener('click', (e) => {
+            e.preventDefault();
+            this._deps.cancelAllOrders();
+        });
+        this._refreshBtn?.addEventListener('click', (e) => {
+            e.preventDefault();
+            this._deps.refreshOrders();
+        });
+        this._exportBtn?.addEventListener('click', (e) => {
+            e.preventDefault();
+            this._export();
+        });
+        const head = this.rootEl.querySelector('.active-orders-table thead');
+        this._grid = head && this.el
+            ? new DataGrid({
+                head: head,
+                body: this.el,
+                columns: this._columns(),
+                // Newest order on top by default (localId is monotonic) — the resting view puts the
+                // user's most recent actions where they look, instead of raw cache order. Natural
+                // array order is "newest first" too (deltas unshift), but only by accident; any
+                // header click re-renders the same array through the sorter.
+                defaultSort: { col: 'id', dir: 'desc' },
+                // The register tx, not the friendly localId shown in the ID column: it is what
+                // cancel / replace / inline edit address an order by.
+                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),
+            })
+            : null;
+        this._host.register(this);
+    }
+    dispose() {
+        this._host.unregister(this);
+        try {
+            this.rootEl.remove();
+        }
+        catch { /* already detached */ }
+    }
+    update(orders) {
+        this._orders = orders || [];
+        this._grid?.setRows(this._orders);
+    }
+    // Export the table to .xlsx in the currently rendered (sorted) order, with the
+    // same localized side/type/status texts the user sees on screen — the columns
+    // carry both forms, so the sheet cannot drift from the table.
+    _export() {
+        this._grid?.download('orders', this._host.t('OpenOrders'));
+    }
+    /// Apply a single order delta from the feed. Insert if new, merge if known.
+    /// Nothing drops out of the list: Filled and Cancelled rows stay so the user
+    /// can watch an order's transitions instead of having a row vanish, and a
+    /// Rejected row stays so its reason can be read on hover and dismissed
+    /// explicitly through the × button.
+    applyDelta(order) {
+        if (!order || order.id == null)
+            return;
+        const idx = this._orders.findIndex(o => o.id === order.id);
+        if (idx >= 0)
+            this._orders[idx] = { ...this._orders[idx], ...order };
+        else
+            this._orders.unshift(order);
+        this.update(this._orders);
+    }
+    /// Remove a row from the local view without touching the server. Used by the
+    /// × button on a terminal order (nothing left to cancel), and in any other
+    /// client-side dismiss path.
+    removeOrder(orderId) {
+        const idx = this._orders.findIndex(o => o.id === orderId);
+        if (idx >= 0) {
+            this._orders.splice(idx, 1);
+            this.update(this._orders);
+        }
+    }
+    getOrder(orderId) {
+        return this._orders.find(o => o.id === orderId);
+    }
+    startInlineEdit(orderId, field) {
+        const order = this.getOrder(orderId);
+        if (!order)
+            return;
+        // Addressed by the grid's row key (the register tx) and the column key, so
+        // the edit lands on the right cell whatever the sort is. A lookup that
+        // scanned the rendered ID column for the order id would never match, because
+        // that column shows the friendly counter.
+        const cell = this._grid?.cellElement(String(orderId), field);
+        if (!cell || cell.querySelector('input'))
+            return;
+        const currentValue = order[field];
+        const input = document.createElement('input');
+        input.type = 'number';
+        input.className = 'inline-edit-input';
+        input.value = String(currentValue ?? '');
+        input.step = field === 'quantity' ? '1' : '0.01';
+        input.min = field === 'quantity' ? '1' : '0.01';
+        cell.textContent = '';
+        cell.appendChild(input);
+        input.focus();
+        input.select();
+        const commit = () => {
+            const newVal = parseFloat(input.value);
+            if (isNaN(newVal) || newVal <= 0) {
+                this.update(this._orders);
+                return;
+            }
+            if (newVal === currentValue) {
+                this.update(this._orders);
+                return;
+            }
+            const updated = { quantity: order.quantity, limitPrice: order.limitPrice, stopPrice: order.stopPrice };
+            updated[field] = newVal;
+            this._deps.replaceOrder(orderId, updated.quantity, updated.limitPrice, updated.stopPrice);
+        };
+        input.addEventListener('blur', commit);
+        input.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                input.blur();
+            }
+            if (e.key === 'Escape') {
+                this.update(this._orders);
+            }
+        });
+    }
+    // The blotter's single column declaration: what the header says, what the
+    // grid sorts on, what the cell shows, how it is coloured, and what reaches
+    // the exported sheet.
+    _columns() {
+        // `label`, not `t` — every row lambda below binds `o` for the order,
+        // but keeping the translator under a name of its own reads clearer
+        // next to the presentation object it sits beside.
+        const label = (key) => this._host.t(key);
+        const presentation = this._host.presentation;
+        return [
+            {
+                key: 'id',
+                header: label('ID'),
+                exportable: true,
+                // Per-user friendly counter (1, 2, 3, …) issued by the host. `o.id`
+                // keeps the register tx for cancel / replace routing; `o.localId` is
+                // just the badge the user wants to see. Rows cached from before the
+                // counter shipped have no localId — fall back to id so they don't go
+                // blank until the next snapshot replay reassigns one.
+                value: (o) => o.localId ?? o.id,
+            },
+            {
+                key: 'instrument',
+                header: label('Sym'),
+                exportable: true,
+                value: (o) => o.instrument,
+            },
+            {
+                key: 'side',
+                header: label('Side'),
+                exportable: true,
+                value: (o) => o.side,
+                render: (o) => presentation.sideText(o.side),
+                cellClass: (o) => presentation.sideClass(o.side),
+                exportValue: (o) => presentation.sideText(o.side),
+            },
+            {
+                key: 'type',
+                header: label('Type'),
+                exportable: true,
+                value: (o) => o.type,
+                render: (o) => presentation.typeText(o.type, o.limitPrice, o.stopPrice),
+                exportValue: (o) => presentation.typeText(o.type, o.limitPrice, o.stopPrice),
+            },
+            {
+                key: 'quantity',
+                header: label('Qty'),
+                exportable: true,
+                value: (o) => o.quantity,
+                render: (o) => formatQty(o.quantity),
+                cellClass: (o) => ActiveOrdersWidget._editableClass(o, 'quantity'),
+                bindCell: (td, o) => this._bindInlineEdit(td, o, 'quantity'),
+            },
+            {
+                key: 'limitPrice',
+                header: label('Price'),
+                exportable: true,
+                value: (o) => o.limitPrice,
+                render: (o) => o.limitPrice ? formatPrice(o.limitPrice) : label('MKT'),
+                cellClass: (o) => ActiveOrdersWidget._editableClass(o, 'limitPrice'),
+                bindCell: (td, o) => this._bindInlineEdit(td, o, 'limitPrice'),
+                exportValue: (o) => o.limitPrice ?? label('MKT'),
+            },
+            {
+                key: 'stopPrice',
+                header: label('Stop'),
+                exportable: true,
+                value: (o) => o.stopPrice,
+                render: (o) => o.stopPrice ? formatPrice(o.stopPrice) : '--',
+                cellClass: (o) => ActiveOrdersWidget._editableClass(o, 'stopPrice'),
+                bindCell: (td, o) => this._bindInlineEdit(td, o, 'stopPrice'),
+                exportValue: (o) => o.stopPrice ?? '',
+            },
+            {
+                key: 'status',
+                header: label('Status'),
+                exportable: true,
+                value: (o) => o.status,
+                render: (o) => this._statusCell(o),
+                exportValue: (o) => presentation.statusText(o.status),
+            },
+            {
+                key: 'actions',
+                header: label('Actions'),
+                headerHidden: true,
+                exportable: false,
+                cellClass: () => 'position-actions',
+                render: (o) => this._actionButton(o),
+            },
+        ];
+    }
+    static _rowClass(order) {
+        if (order.status === OrderStates.Filled)
+            return 'order-filled';
+        if (order.status === OrderStates.Rejected)
+            return 'order-rejected';
+        if (order.status === OrderStates.Cancelled)
+            return 'order-cancelled';
+        return '';
+    }
+    // An order can still be modified while the venue holds it. A market order has
+    // no limit price and an unconditional order no stop price, so those cells have
+    // nothing to edit even then.
+    static _canEdit(order, field) {
+        const modifiable = order.status === OrderStates.Active || order.status === OrderStates.Sent;
+        return modifiable && (field === 'quantity' || !!order[field]);
+    }
+    static _editableClass(order, field) {
+        return ActiveOrdersWidget._canEdit(order, field) ? 'cell-editable' : '';
+    }
+    // Double-click to edit belongs to the whole cell rather than to a control
+    // inside it, which is why it is wired here instead of returned by render().
+    _bindInlineEdit(td, order, field) {
+        if (!ActiveOrdersWidget._canEdit(order, field))
+            return;
+        td.addEventListener('dblclick', () => this._deps.editOrderField(order.id, field));
+    }
+    // Status text, plus a hoverable icon carrying the rejection reason. Some
+    // venues wrap the human-readable rejection inside a JSON blob;
+    // cleanRejectReason extracts `.message` and falls back to the raw string.
+    // The reason goes on the element's title property, so no quote escaping is
+    // involved the way it was when this row was built as markup.
+    _statusCell(order) {
+        const text = this._host.presentation.statusText(order.status);
+        const reason = order.status === OrderStates.Rejected ? cleanRejectReason(order.rejectReason) : '';
+        if (!reason)
+            return text;
+        const cell = document.createDocumentFragment();
+        cell.appendChild(document.createTextNode(text + ' '));
+        const icon = document.createElement('i');
+        icon.className = 'bi bi-question-circle reject-reason-icon';
+        icon.title = reason;
+        cell.appendChild(icon);
+        return cell;
+    }
+    // The × button, wired to the controller through deps. Status decides what it
+    // means: Pending / Active is a real cancel over the wire, while Filled /
+    // Rejected / Cancelled have nothing left to cancel — the row is history kept
+    // around so the user can read its final state, so the button dismisses it
+    // locally.
+    _actionButton(order) {
+        const isTerminal = order.status === OrderStates.Filled
+            || order.status === OrderStates.Rejected
+            || order.status === OrderStates.Cancelled;
+        const title = isTerminal ? this._host.t('Dismiss') : this._host.t('Cancel order');
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.className = 'bt-icon-btn bt-icon-cancel';
+        button.title = title;
+        button.setAttribute('aria-label', `${title} #${order.id}`);
+        const icon = document.createElement('i');
+        icon.className = 'bi bi-x-circle';
+        button.appendChild(icon);
+        button.addEventListener('click', () => {
+            if (isTerminal)
+                this._deps.dismissOrder(order.id);
+            else
+                this._deps.cancelOrder(order.id);
+        });
+        return button;
+    }
+}
+ActiveOrdersWidget.TYPE = ControlTypes.ActiveOrders;
+//# sourceMappingURL=active-orders-widget.js.map