@tradecanvas/chart 1.3.0 → 1.7.0

package/README.md

@@ -9,20 +9,24 @@ High-performance canvas trading chart with built-in indicators, drawing tools, a
 Most chart libraries make you choose: pretty charts with no trading features, or trading features with an ugly API. TradeCanvas gives you both.
 
 - **70 built-in indicators** — SMA, EMA, TEMA, VWMA, Hull MA, RSI, MACD, Bollinger, Envelope, Ichimoku, Pivot Points, Anchored VWAP, ZigZag, Linear Regression Channel, Awesome / Chaikin Oscillator, and more. No separate calculation library needed.
-- **40 drawing tools** — Trendlines (info line, trend angle, cross line), Fibonacci (retracement, extension, channel, time zones, speed resistance fan), horizontal/vertical lines, channels, pitchforks (Andrews, Schiff, modified Schiff), Gann fans / boxes, cyclic lines, harmonic patterns (XABCD, ABCD, head and shoulders, Elliott waves), date & price range, Long/Short Position, Volume Profile range. With undo/redo and full serialization.
-- **17 chart types** — Candlestick, line, area, bar, hollow candle, baseline, Heikin-Ashi, Renko, Kagi, Line Break, Point & Figure, Range Bars, Volume Candles, **Equivolume**, HLC Area, Step Line, Line+Markers.
+- **69 drawing tools** — Trendlines (info line, trend angle, cross line), Fibonacci (retracement, extension, channel, time zones, speed resistance fan and arcs, circles, spiral, wedge), horizontal/vertical lines, channels, pitchforks and pitchfan, Gann fan / box / square, cycles, harmonic patterns (XABCD, cypher, ABCD, three drives, head and shoulders), Elliott waves, notes, callouts and marks, brush and path, forecast and projection, Long/Short Position with position sizing, Volume Profile range. Each with its own settings, alerts on trend lines, groups and layers, undo/redo and full serialization.
+- **18 chart types** — Candlestick, line, area, bar, hollow candle, baseline, High-Low, Heikin-Ashi, Renko, Kagi, Line Break, Point & Figure, Range Bars, Volume Candles, **Equivolume**, HLC Area, Step Line, Line+Markers. Renko's box, Kagi's reversal and the like are yours to set.
 - **Pro-grade interaction** — pan freely past the last bar into empty future space (drawings can go there too), drag the price/time axes to scale, double-click to auto-fit, `Ctrl/⌘+drag` to select several drawings (then move, restyle or delete them together), `Shift+drag` to measure (bars × price Δ × %), `Alt+click` to pin a comparison tooltip, context cursors (crosshair, grabbing hand, resize arrows), axis-following price/time pill labels under the cursor, bar-hover highlight.
-- **Trading overlay** — Render open positions with entry line, P&L zone, and SL/TP markers. Orders as dashed lines. Drag SL/TP to modify. Cleanly opt-out via `features.trading: false` for non-trading projects.
+- **Trading overlay** — Render open positions with entry line, P&L zone, and SL/TP markers. Orders as dashed lines. Drag SL/TP to modify, cancel / close / reverse from the buttons on each line, and see every fill marked on its bar. ChartWidget adds an order ticket that checks the order as you fill it in, and an account panel with positions, working orders and history. Cleanly opt-out via `features.trading: false` for non-trading projects.
 - **Real-time streaming** — Built-in Binance adapter. Plug in your own data source with the adapter interface.
 - **Strategy backtester** — `@tradecanvas/analytics` ships a bar-by-bar `Backtester` with virtual fills, commission/slippage models, portfolio tracking, and risk metrics (Sharpe, Sortino, Calmar, max drawdown). **Now with 4 ready-to-use reference strategies + Monte Carlo path-dependence analysis.**
-- **Replay mode** — `ReplayController` drives historical bars forward at controlled speed with start / pause / step / seek / setSpeed. *(new in 0.9)* The widget now ships a floating bottom scrubber UI (play/pause/step/seek + 0.5×–100× speed) on top of it.
+- **Replay mode** — replay the chart's own bars from any point, in finer steps if you like (an hourly chart forming from 5-minute bars), with play / pause / step / seek / speed, and paper-trade on the replayed prices. The widget has a replay bar for it; `ReplayController` drives bars headless too.
+- **Alerts** — on a price level, an indicator line, a drawing, or one line crossing another; on a move of some percent within some bars; only on closed bars; with an expiry. The widget's alerts panel sets all of them.
+- **Compare and spread** — other symbols in percent on the price scale, on a scale or pane of their own, or as a spread or ratio, lined up with the chart by time.
+- **Price formats** — prices in your own format or in fractions of a point (a bond in 32nds: 110'165) on every label; times your way; extended hours on or off; data export with the indicator lines.
 - **Volume Profile** *(new in 0.9)* — optional horizontal histogram of traded volume bucketed by price over the visible range, with point-of-control highlighting.
 - **Watchlist sidebar** *(new in 0.9)* — opt-in vertical panel listing symbols with last price, % change, mini sparkline. Click a row to switch chart.
 - **CSV / JSON drag-and-drop** *(new in 0.9)* — drop a file onto the chart, it parses and loads instantly. Detects header layouts, ISO/unix-s/unix-ms timestamps, and array-vs-object JSON shapes.
-- **Saved layouts** *(new in 0.9)* — opt-in per-symbol persistence of chart type + indicator stack + drawings + alerts to localStorage. Switch symbol, switch back, your setup is intact.
-- **Multi-chart grid** — `ChartGrid` for synchronized 2×2 / 2×3 layouts with linked crosshairs and shared time axis.
+- **Named layouts** — save the chart under a name (symbol, interval, scale, indicators, drawings, alerts), open, rename, delete, auto-save the open one, `Ctrl/⌘+S`. Kept in the browser, or on your server through a four-call `LayoutStorage`. Per-symbol auto-persistence (`persistLayouts`) is there too.
+- **Multi-chart** — `ChartWidgetGrid` puts up to six full widgets side by side, linked by symbol, interval, crosshair, time or drawings as you choose, and saves them as one layout. `ChartGrid` does the same for bare charts.
 - **Signal markers & trade zones** — render bot/algorithm output (directional arrows, entry→exit rectangles) as a first-class chart layer.
 - **Hotkey sheet** *(new in 0.9)* — press `?` in the widget to open a categorized keyboard-shortcut reference.
+- **Extensible widget** — add your own toolbar buttons and right-click menu entries (`addToolbarButton`, `chartMenuItems`).
 - **Save/load chart state** — Persist drawings, indicators, theme, and chart type to JSON. Restore with one call.
 - **Zero dependencies** — The entire library is self-contained. No `d3`, no `chart.js`, no `fancy-canvas`.
 
@@ -53,7 +57,7 @@ const widget = new ChartWidget(document.getElementById('chart')!, {
 })
 ```
 
-That's it. Live data, all 70 indicators, all 40 drawing tools, command palette (`Ctrl+K`), symbol search (`Ctrl+P`), hotkey sheet (`?`), shift-drag measure, alt-click tooltip pin, and drag-drop CSV/JSON loading.
+That's it. Live data, all 95 indicators, all 69 drawing tools, command palette (`Ctrl+K`), symbol search (`Ctrl+P`), hotkey sheet (`?`), shift-drag measure, alt-click tooltip pin, and drag-drop CSV/JSON loading.
 
 ## Headless Chart
 
@@ -91,9 +95,12 @@ chart.connect({ adapter, symbol: 'BTCUSDT', timeframe: '5m', historyLimit: 300 }
 | `settings` | `boolean` | `true` | Show settings button |
 | `trading` | `boolean` | `true` | Enable trading overlay |
 | `statusBar` | `boolean` | `true` | Show bottom status bar |
+| `rangeBar` | `boolean` | `true` | Range presets (1D … All) and go to date (Alt+G) on the status bar |
+| `indicatorLegend` | `boolean` | `true` | Indicators listed on the chart (under the OHLCV legend and atop their panes) with show / settings / remove |
+| `fullscreen` | `boolean` | `true` | Fullscreen button in the toolbar |
 | `symbols` | `string[]` | BTC/ETH/SOL/BNB | Searchable symbol catalog |
-| `timeframes` | `TimeFrame[]` | 1m to 1d | Available timeframes |
-| `chartTypes` | `ChartType[]` | 11 types | Available chart types |
+| `timeframes` | `TimeFrame[]` | 1m to 1M | Timeframes on offer; pin favourites from the ▾ menu |
+| `chartTypes` | `ChartType[]` | 18 types | Available chart types |
 | `watchlist` | `boolean` | `false` | Right-side watchlist sidebar |
 | `dragDropImport` | `boolean` | `true` | Drop CSV / JSON files onto the chart to load data |
 | `persistLayouts` | `boolean \| { keyPrefix, debounceMs }` | `false` | Save per-symbol indicators / drawings / chart type to localStorage |
@@ -103,6 +110,17 @@ chart.connect({ adapter, symbol: 'BTCUSDT', timeframe: '5m', historyLimit: 300 }
 | `locale` | `string` | `'en'` | UI chrome language — built-in `'en'` / `'vi'`, see **Widget i18n** below |
 | `messages` | `Partial<Record<MessageKey, string>>` | — | Override or add individual UI strings on top of `locale` |
 
+### Icons
+
+The widget's icon set is exported for your own UI: `createIcon(name)`,
+`createToolIcon(drawingTool)`, `createChartTypeIcon(chartType)` return inline
+SVG strings drawn in `currentColor` (24 px grid, 1.75 px strokes).
+
+```ts
+import { createToolIcon } from '@tradecanvas/chart/widget'
+button.innerHTML = createToolIcon('fibRetracement', 16)
+```
+
 ### Widget i18n
 
 `locale` and `messages` translate `ChartWidget`'s own chrome — toolbar, watchlist, indicator-picker section headers (Popular/All, overlay/panel tags), status bar, settings panel (titles/tabs/section headers), and hotkey sheet (title/group headers). Set at construction; not currently hot-swappable at runtime.
@@ -136,6 +154,17 @@ See `packages/library/src/widget/i18n.ts` for the full key list (`MessageKey`) a
 | Customization | Full control | Toggle sections on/off |
 | Advanced access | Direct API | `widget.getChart()` for direct API |
 
+### Widget Look
+
+The widget's shapes and sizes — corners, control heights, type, borders, shadows, how a chosen button shows, bars docked or floating — are a look of their own, apart from the colours. Three presets: **Studio** (the default), **Terminal** (dense and square) and **Capsule** (pills, floating bars). Start from one and change what you like:
+
+```ts
+const widget = new ChartWidget(host, { ui: 'terminal' });
+widget.setUI({ preset: 'studio', radius: { md: 10 }, density: 'compact', toolbar: 'floating', active: 'solid' });
+```
+
+The chart's price tags take the same corners (`tagRadius`; on a bare `Chart`, `chart.setShapes({ tagRadius })`). The widget loads no fonts: load the ones a look names. See [Styling](https://bonguynvan.github.io/tradecanvas/docs/styling).
+
 ### Widget Theming
 
 `ChartWidget`'s own chrome (toolbar, sidebars, settings panel, watchlist — everything *outside* the canvas) is styled entirely through CSS custom properties on `.tcw-root`, the widget's own root element. These are a **stable, documented contract**: additive-only across minor/patch releases — a property is never renamed or removed without a major version bump. Override them from the host page; no build step or theme object needed.
@@ -175,12 +204,19 @@ See `packages/library/src/widget/i18n.ts` for the full key list (`MessageKey`) a
 | `--tcw-divider` | `rgba(255,255,255,.06)` | Hairline dividers |
 | `--tcw-ease` / `--tcw-ease-out` | cubic-bezier | Transition easing |
 | `--tcw-dur-fast` / `-normal` / `-slow` | `120ms` / `180ms` / `260ms` | Transition durations |
-| `--tcw-radius-sm` / `-base` / `-lg` / `-xl` | `4px` / `6px` / `10px` / `14px` | Corner radii — set to `0` for a square look |
+| `--tcw-radius-xs` / `-sm` / `--tcw-radius` / `-lg` / `-xl` | `3px` / `5px` / `7px` / `11px` / `16px` | The corner scale — set to `0` for a square look |
+| `--tcw-control-radius` / `--tcw-input-radius` / `--tcw-menu-radius` / `--tcw-dialog-radius` / `--tcw-panel-radius` / `--tcw-tooltip-radius` / `--tcw-tag-radius` / `--tcw-toast-radius` | from the scale | Each kind of part's corners |
+| `--tcw-toolbar-h` / `--tcw-control-h` / `--tcw-control-h-sm` / `--tcw-icon` / `--tcw-sidebar-w` / `--tcw-menu-item-h` | `46px` / `30px` / `24px` / `18px` / `48px` / `30px` | Sizes |
+| `--tcw-font` / `--tcw-font-size` / `--tcw-weight` / `--tcw-weight-strong` | `'Manrope', 'Inter', …` / `13px` / `500` / `600` | Type |
+| `--tcw-label-case` / `--tcw-label-tracking` | `none` / `0em` | Small labels (section titles) |
+| `--tcw-border-w` / `--tcw-sep-w` | `1px` / `0px` | Border width; rules between toolbar groups |
+| `--tcw-menu-shadow` / `--tcw-dialog-shadow` / `--tcw-tooltip-shadow` | the elevation shadows | Shadows of menus, dialogs, tooltips |
+| `--tcw-blur` / `--tcw-surface-opacity` | `0px` / `100%` | Frosted menus |
 | `--tcw-shadow-sm` / `-md` / `-lg` / `-xl` | box-shadow values | Elevation |
 | `--tcw-ring` | `0 0 0 2px rgba(242,169,59,.45)` | Focus ring |
 | `--tcw-font-mono` | `'JetBrains Mono', …` | Monospace font stack (price ladder, code) |
 
-Light theme (`[data-tcw-theme="light"]`) redefines the color group (`--tcw-bg*`, `--tcw-border*`, `--tcw-text*`, `--tcw-accent*`, `--tcw-hover-bg`, `--tcw-active-bg`, `--tcw-divider`, `--tcw-shadow*`) with its own defaults — override both selectors if you support both themes.
+Light theme (`[data-tcw-theme="light"]`) redefines the color group (`--tcw-bg*`, `--tcw-border*`, `--tcw-text*`, `--tcw-accent*`, `--tcw-hover-bg`, `--tcw-active-bg`, `--tcw-divider`, `--tcw-shadow*`) with its own defaults — override both selectors if you support both themes. With the `ui` option set, the widget writes its look's variables on the element, so they win over your CSS; without it they stay yours to set.
 
 ## Features
 
@@ -219,8 +255,22 @@ const grid = new ChartGrid(document.getElementById('grid')!, {
   syncTimeAxis: true,
 })
 
-const adapter = new BinanceAdapter()
-grid.connectAll(adapter, ['BTCUSDT', 'ETHUSDT', 'SOLUSDT', 'BNBUSDT'], '5m')
+// An adapter keeps one stream: give each chart its own
+grid.connectAll(() => new BinanceAdapter(), ['BTCUSDT', 'ETHUSDT', 'SOLUSDT', 'BNBUSDT'], '5m')
+```
+
+With the full widget on each chart, a bar to pick the arrangement and sync, and the whole grid saved as a named layout:
+
+```typescript
+import { ChartWidgetGrid } from '@tradecanvas/chart/widget'
+
+const workspace = new ChartWidgetGrid(document.getElementById('grid')!, {
+  layout: '1x2',
+  adapter: () => new BinanceAdapter(),
+  cells: [{ symbol: 'BTCUSDT' }, { symbol: 'ETHUSDT', timeframe: '1h' }],
+  sync: { crosshair: true, interval: false, symbol: false, time: false, drawings: false },
+})
+workspace.setSync({ time: true })
 ```
 
 Supported layouts: `'1x1'`, `'1x2'`, `'2x1'`, `'2x2'`, `'1x3'`, `'3x1'`, `'2x3'`, `'3x2'`.
@@ -286,13 +336,34 @@ gauge.setValue(85) // animates smoothly
 
 ### Indicators (built-in)
 
-**Overlay** (drawn on the price chart):
-SMA, EMA, Hull MA, Bollinger Bands, Keltner Channel, Donchian Channel, Ichimoku Cloud, Parabolic SAR, Supertrend, VWAP, Anchored VWAP, Pivot Points (Classic), ZigZag, Linear Regression Channel
+95 indicators — moving averages (SMA, EMA, WMA, Hull, DEMA, TEMA, ALMA, KAMA,
+LSMA, McGinley, SMMA, MA Cross, MTF MA), bands and channels (Bollinger,
+Keltner, Donchian, Envelope, Linear Regression), trend and stops (Ichimoku,
+Supertrend, Parabolic SAR, Chandelier, Chande Kroll Stop, Alligator, ZigZag,
+Fractals, Pivot Points), VWAPs and Volume Profile on the price pane; RSI, MACD,
+Stochastic, ATR, ADX, CCI, OBV, MFI, Bollinger %B and BandWidth, Historical
+Volatility, Ulcer Index and 40 more oscillators, volume and volatility
+indicators in panes. The [indicator catalog](https://bonguynvan.github.io/tradecanvas/docs/indicators)
+lists every id with its inputs, lines and levels.
+
+```typescript
+import { indicatorSource } from '@tradecanvas/chart'
+
+const rsi = chart.addIndicator('rsi', { period: 14 })!
+chart.addIndicator('ema', { period: 21, source: 'hlc3' })                     // another price
+chart.addIndicator('sma', { period: 9, source: indicatorSource(rsi, 'value') }) // RSI's own average, in RSI's pane
+chart.setIndicatorLevels(rsi, [20, 50, 80])
+```
 
-**Panel** (separate sub-chart):
-RSI, MACD, Stochastic, ATR, ADX, CCI, CMF, MFI, OBV, ROC, TSI, Williams %R, Awesome Oscillator, Chaikin Oscillator, Volume Profile, VROC, Standard Deviation, Accumulation/Distribution, Aroon
+- **Sources**: close, open, high, low, hl2, hlc3, ohlc4, hlcc4, or another indicator's line.
+- **Panes**: one value scale per pane for lines, levels, axis and crosshair; move an indicator into another pane, a new one or back to the price pane; fold, maximise and reorder panes (`moveIndicatorToPane`, `setPaneCollapsed`, `setMaximizedPane`, `movePane`).
+- **Undo and templates**: Ctrl/Cmd+Z undoes indicator changes, in the same history as drawings; ChartWidget saves the indicators as named templates (`getIndicatorSetup` / `applyIndicatorSetup`).
+- **Levels**: editable per instance (RSI 30/70, CCI ±100 …), kept in saved layouts.
+- **Value tags**: each line's latest value on its axis, in its colour.
+- **Custom indicators** declare their lines (`plots`), scale, levels and inputs; the chart draws and labels them.
 
-All indicator parameters are validated at runtime — invalid values (NaN, Infinity, non-numeric strings, missing keys) fall back to documented defaults instead of silently propagating to calculations.
+Invalid parameters (NaN, Infinity, non-numeric strings, missing keys) fall back
+to the defaults instead of reaching the calculations.
 
 ### Drawing Tools
 
@@ -346,6 +417,11 @@ chart.setTradingConfig({
 // Listen for user drag-to-modify
 chart.on('positionModify', (e) => console.log('SL/TP moved:', e.payload))
 chart.on('orderModify', (e) => console.log('Order moved:', e.payload))
+
+// The × and ⇅ buttons on the lines raise these; so can your own UI
+chart.cancelOrderIntent('order-1')
+chart.reversePositionIntent('pos-1')
+chart.on('executionFill', (e) => console.log(e.payload.reason, e.payload.pnl))
 ```
 
 ### Signal Markers
@@ -413,43 +489,21 @@ chart.updateLastBar(updatedBar)
 chart.setCurrentPrice(3500.42)
 ```
 
-### Web Worker indicator pipeline
-
-Heavy charts (1,000+ bars × 10+ indicators) can stutter when `calculate()` runs on the main thread. `IndicatorWorkerHost` offloads calculation to a worker so the render loop stays smooth.
+### Indicators outside the chart
 
-```typescript
-import { IndicatorWorkerHost } from '@tradecanvas/core'
-
-// Bundler-supported worker URL (Vite, webpack 5, esbuild, etc.)
-const worker = new Worker(
-  new URL('@tradecanvas/core/dist/indicator.worker.js', import.meta.url),
-  { type: 'module' },
-)
-const host = new IndicatorWorkerHost(worker, { timeoutMs: 30_000 })
-
-const output = await host.calculate(
-  'rsi',
-  { id: 'rsi', instanceId: 'rsi-1', params: { period: 14 } },
-  bars,
-)
-
-// Health check / cleanup
-await host.ping()
-host.terminate()
-```
-
-No worker available (SSR, tests, or as a safety net)? Pass `null` and register fallback plugins for synchronous calculation:
+`IndicatorWorkerHost` computes an indicator from bars with the same messages a
+Web Worker would use. The worker script is not part of the published packages
+yet; pass `null` and register the plugins to compute in place (SSR, tests,
+scripts):
 
 ```typescript
 import { IndicatorWorkerHost, RSIIndicator } from '@tradecanvas/core'
 
 const host = new IndicatorWorkerHost(null)
 host.registerFallbackPlugin(new RSIIndicator())
-const output = await host.calculate('rsi', config, bars)  // runs synchronously
+const output = await host.calculate('rsi', { id: 'rsi', instanceId: 'rsi-1', params: { period: 14 } }, bars)
 ```
 
-Render still happens on the main thread (it needs `CanvasRenderingContext2D`). Only the heavy compute moves off-thread.
-
 ### Save / Load
 
 ```typescript
@@ -461,8 +515,14 @@ chart.loadState(localStorage.getItem('my-chart')!)
 // Download / upload files
 chart.downloadState('my-chart.json')
 await chart.loadStateFromFile()
+
+// Or keep a layout saved as it changes (debounced)
+chart.setAutoSave('my-chart', 1500)
 ```
 
+A saved layout holds the chart type, theme, drawings, indicators (inputs, pane,
+colours, visibility) and alerts, including alerts on indicator lines.
+
 ### Themes
 
 ```typescript
@@ -483,7 +543,12 @@ chart.setTheme({
 ### Events
 
 ```typescript
-chart.on('crosshairMove', (e) => { /* { point, bar, barIndex, indicatorValues } */ })
+chart.on('crosshairMove', (e) => { /* { point, bar, barIndex, indicatorValues } — also over indicator panes */ })
+chart.on('crosshairLeave', () => { /* the pointer left the plot */ })
+chart.on('drawingToolChange', (e) => { /* { tool } — null once a drawing is finished or cancelled */ })
+chart.on('indicatorUpdate', (e) => { /* { from } — indicator values recomputed from this bar on */ })
+chart.on('paneResize', (e) => { /* { instanceId, size } — an indicator pane was resized */ })
+chart.on('indicatorChange', (e) => { /* { instanceId, change } — shown/hidden, restyled, levels, inputs or pane changed */ })
 chart.on('barClick', (e) => { /* { bar, barIndex, point } */ })
 chart.on('visibleRangeChange', (e) => { /* { from, to } — bar indices, not timestamps */ })
 chart.on('priceRangeChange', (e) => { /* { min, max } — visible price bounds */ })
@@ -626,7 +691,7 @@ mc.worstMaxDrawdownPct
 
 | Feature | @tradecanvas/chart | lightweight-charts | chart.js | Highcharts Stock |
 |---|---|---|---|---|
-| Chart types | 17 + 6 finance | 4 | 8 (non-financial) | 10+ |
+| Chart types | 18 + 6 finance | 4 | 8 (non-financial) | 10+ |
 | Finance charts | Sparkline, Depth, Equity, Heatmap, Waterfall, Gauge | None | None | Some |
 | Built-in indicators | 33 | 0 | 0 | ~30 |
 | Drawing tools | 24 | 0 | 0 | Some |
@@ -683,7 +748,13 @@ chart.setNumberLocale('de-DE')  // 65.234,00
 | `setVolumeProfileVisible(v)` | Toggle the horizontal volume-profile overlay |
 | `setVolumeProfileConfig({ buckets, widthRatio, opacity, highlightPoC })` | Tune the volume profile |
 | `setAutoScale(v)` / `setLogScale(v)` | Lock or change price-scale mode |
+| `setInvertScale(v)` | Turn the price scale upside down |
 | `fitContent()` / `scrollToEnd()` | Fit all data / jump to live edge |
+| `setVisibleRangePreset(p)` | Show `1D`, `5D`, `1M`, `3M`, `6M`, `YTD`, `1Y`, `5Y` or `All` |
+| `goToTime(time)` | Centre the bar at a time |
+| `setCrosshairTime(time)` | Mirror another chart's crosshair (vertical line only) |
+| `copyDrawings()` / `pasteDrawings()` | Copy the selection, paste into this or another chart |
+| `setStayInDrawingMode(v)` | Keep the drawing tool after each drawing |
 | `saveState(key?)` | Serialize chart state |
 | `loadState(json)` | Restore chart state |
 | `screenshot()` | Download chart as image |
@@ -694,7 +765,7 @@ chart.setNumberLocale('de-DE')  // 65.234,00
 
 ```typescript
 interface OHLCBar {
-  time: number    // Unix timestamp (seconds)
+  time: number    // Unix time in ms or seconds (up to 1e12 is read as seconds); ascending
   open: number
   high: number
   low: number
@@ -711,6 +782,17 @@ interface OHLCBar {
 | [StackBlitz sandboxes](https://bonguynvan.github.io/tradecanvas/examples/) | One-click, forkable: vanilla `Chart`, `ChartWidget`, React / Vue / Svelte wrappers, finance charts |
 | [`@tradecanvas/react`](https://www.npmjs.com/package/@tradecanvas/react) · [`/vue`](https://www.npmjs.com/package/@tradecanvas/vue) · [`/svelte`](https://www.npmjs.com/package/@tradecanvas/svelte) | Framework components — reactive props, typed, zero boilerplate |
 
+## AI coding tools
+
+- [`llms.txt`](https://bonguynvan.github.io/tradecanvas/llms.txt) and
+  [`llms-full.txt`](https://bonguynvan.github.io/tradecanvas/llms-full.txt) give
+  assistants the docs in one place.
+- An agent skill, [`skills/tradecanvas`](https://github.com/bonguynvan/tradecanvas/blob/main/skills/tradecanvas/SKILL.md), teaches
+  coding agents to build with TradeCanvas: the entry points, the rules that
+  avoid most bugs, and worked examples that CI type-checks against the library.
+  Copy the folder into your project's `.claude/skills/` (or your agent's skills
+  folder) to use it.
+
 ## Browser Support
 
 Chrome 80+, Firefox 80+, Safari 14+, Edge 80+