wickchart 0.4.0 → 1.2.0

package/README.md

@@ -1,6 +1,6 @@
-# HabView
+# WickChart
 
-**`<hab-chart>` — a modern, simpler, more useful charting web component.**
+**`<wick-chart>` — a modern, simpler, more useful charting web component.**
 
 A TradingView-style financial chart as a single framework-agnostic Web Component.
 One file, zero dependencies, one HTML tag. Canvas-rendered, fast, themeable, and
@@ -14,9 +14,10 @@ npm install wickchart
 
 ```js
 // any bundler / framework — TypeScript types included
-import 'wickchart';                       // registers <hab-chart>
-import HabChart from 'wickchart';         // for HabChart.registerIndicator(...)
+import 'wickchart';                       // registers <wick-chart>
+import WickChart from 'wickchart';         // for WickChart.registerIndicator(...)
 import { encodeStateQuery } from 'wickchart/core';  // pure helpers
+import { WickChart } from 'wickchart/react';        // React bindings (optional)
 ```
 
 Or straight from a CDN — no install, no build:
@@ -24,10 +25,10 @@ Or straight from a CDN — no install, no build:
 ```html
 <script type="module" src="https://unpkg.com/wickchart"></script>
 
-<hab-chart label="BTC · 1h" type="candles" indicators="sma:20 volume"></hab-chart>
+<wick-chart label="BTC · 1h" type="candles" indicators="sma:20 volume"></wick-chart>
 
 <script type="module">
-  const chart = document.querySelector('hab-chart');
+  const chart = document.querySelector('wick-chart');
   chart.setData(bars);   // [{ time, open, high, low, close, volume }]
   chart.update(bar);     // stream live updates
 </script>
@@ -37,7 +38,7 @@ Works in plain HTML, React, Vue, Svelte, Angular — anywhere a `<div>` works.
 TypeScript declarations ship inside the package (generated at pack time from
 the JSDoc-annotated source — the repo itself stays 100% dependency-free JS).
 
-## Declarative live charts with `<hab-feed>`
+## Declarative live charts with `<wick-feed>`
 
 One more script tag and your chart is fully live — data, backfill, streaming —
 with **zero JavaScript written**:
@@ -45,13 +46,13 @@ with **zero JavaScript written**:
 ```html
 <script type="module" src="https://unpkg.com/wickchart/feed"></script>
 
-<hab-feed for="chart" binance="BTCUSDT" tf="1h"></hab-feed>
-<hab-chart id="chart" indicators="sma:20 volume" profile></hab-chart>
+<wick-feed for="chart" binance="BTCUSDT" tf="1h"></wick-feed>
+<wick-chart id="chart" indicators="sma:20 volume" profile></wick-chart>
 ```
 
 | Attribute   | Meaning                                                                 |
 | ----------- | ----------------------------------------------------------------------- |
-| `for`       | target `<hab-chart>` id (auto-pairs with the first chart when omitted)   |
+| `for`       | target `<wick-chart>` id (auto-pairs with the first chart when omitted)   |
 | `binance`   | Binance symbol (`BTCUSDT`) — REST load + WebSocket live + backfill       |
 | `demo`      | deterministic offline synthetic feed (`demo="ETH"` picks a base price)   |
 | `url`       | generic REST endpoint returning a JSON array of bars (+ `poll="10"` sec) |
@@ -61,7 +62,7 @@ with **zero JavaScript written**:
 
 The element reflects its state in the `status` attribute (`loading`, `live`,
 `polling`, `fallback`, `loaded`, `waiting`, `idle`) and emits
-`hab-feed:status` / `hab-feed:fallback` events. When Binance is unreachable
+`wick-feed:status` / `wick-feed:fallback` events. When Binance is unreachable
 (geo-blocked, offline), it degrades gracefully: WebSocket → REST polling → a
 synthetic stream bridged from the last real price, so the chart never goes
 blank. It also wires `chart.onloadmore` for infinite backfill automatically.
@@ -71,7 +72,7 @@ blank. It also wires `chart.onloadmore` for infinite backfill automatically.
 ## Why another chart library?
 
 TradingView's charting library is powerful but heavy and enterprise-licensed;
-most wrappers add build steps and framework lock-in. HabView takes the opposite
+most wrappers add build steps and framework lock-in. WickChart takes the opposite
 bet:
 
 - **Zero dependencies, single file** (~40 KB unminified, no build step required)
@@ -82,7 +83,20 @@ bet:
   outside the component (Shadow DOM friendly)
 - **Accessible** — focusable, arrow-key crosshair, ARIA summary of the data
 
-## Run the demo
+## Try it online
+
+The demo site is deployed to GitHub Pages:
+**https://benyblack.github.io/wickchart/** — a landing page with a live hero
+chart, the full interactive demo, the zero-JavaScript declarative page, and a
+[React demo](./demo/react.html) driven entirely by React state.
+
+**Full documentation lives at
+[benyblack.github.io/wickchart/docs.html](./docs.html)** — every attribute,
+method, event, the WickScript reference, overlays (with a live JSON
+playground), feeds, theming and framework bindings, each with runnable
+examples. This README covers the same ground in plain markdown.
+
+## Run the demo locally
 
 ```bash
 npm run dev        # serves on http://localhost:5173
@@ -99,6 +113,101 @@ with graceful fallback to synthetic data if it isn't.
 
 ---
 
+## Frameworks
+
+`<wick-chart>` is framework-agnostic — attributes, one `data` property,
+standard DOM events. The one opinionated wrapper ships as `wickchart/react`,
+which turns that contract into idiomatic React with proper event
+subscription/cleanup. `react` is an **optional** peer dependency: nothing
+changes if you never import `wickchart/react`.
+
+### React
+
+```bash
+npm install wickchart react
+```
+
+```jsx
+import { WickChart, useWickChart } from 'wickchart/react';
+
+// drop-in component — props map 1:1 onto the element
+export function PriceChart({ bars, onRange }) {
+  return (
+    <WickChart
+      type="candles"
+      indicators="sma:20 ema:50 volume"
+      volshading
+      label="BTC · 1h"
+      data={bars}                 // bars are assigned as a property
+      onRange={onRange}           // subscribes to wick:range
+      onAlert={(e) => toast(`crossed ${e.detail.price}`)}
+      style={{ height: 420 }}
+    />
+  );
+}
+
+// or the hook, when you need the imperative API
+function PracticeChart({ bars }) {
+  const { ref, chart } = useWickChart({ data: bars, indicators: 'sma:20' });
+  // chart.getDataWindow(), chart.addAlert(...), chart.getState() … after mount
+  return <wick-chart ref={ref} style={{ height: 420 }} />;
+}
+```
+
+Rules of thumb:
+
+- **Pass a fresh array** to `data` when the bars change — the binding compares
+  by reference, and reassignment is what triggers a redraw (don't mutate).
+  The same rule applies to `overlays` (see
+  [Server-side overlays](#server-side-overlays-zones--levels)).
+- **String/number/boolean props become attributes** (`type`, `indicators`,
+  `volshading`, …); `className`/`style`/`id` reach React as usual.
+- **`onXxx` subscribes to `wick:xxx`** with cleanup on unmount; an
+  `events={{ range: fn }}` object works too.
+- Works the same on React 16.8 → 19 — no custom-element event caveats.
+
+No build step? The [React demo](./demo/react.html) runs straight off a CDN
+import map — `react` and `react-dom` from esm.sh, the bindings from the
+package source.
+
+### Vue 3
+
+```vue
+<script setup>
+import { ref, onMounted } from 'vue';
+import 'wickchart';
+const chart = ref(null);
+const bars = ref([]);
+onMounted(async () => {
+  bars.value = await loadBars();
+  chart.value.data = bars.value;
+  chart.value.addEventListener('wick:range', (e) => console.log(e.detail));
+});
+</script>
+
+<template>
+  <wick-chart ref="chart" type="candles" indicators="sma:20"
+              style="height: 420px"></wick-chart>
+</template>
+```
+
+### Svelte
+
+```svelte
+<script>
+  import 'wickchart';
+  let el;
+  let bars = [];
+  $: if (el && bars.length) el.data = bars;
+</script>
+
+<wick-chart bind:this={el} type="candles" indicators="sma:20"
+            on:wick:alert={(e) => console.log(e.detail)}
+            style="height: 420px"></wick-chart>
+```
+
+---
+
 ## Data format
 
 Bars are plain objects; `time` accepts **milliseconds or seconds** (auto-detected).
@@ -126,6 +235,7 @@ chart.setData([
 | `profile`     | off        | Volume profile overlay (POC + 70% value area)       |
 | `annotations` | off        | Smart annotations (volume spikes, gaps, pivots, RSI divergences) |
 | `volshading`  | off        | Volatility-regime background shading (see below)    |
+| `overlays`    | –          | JSON array of server-side zones & levels (see below) |
 
 \* `indicators=""` disables everything, including volume. Token syntax:
 `name[:param[/param…]][@color]` — e.g. `sma:20@#ff0000`, `macd:12/26/9`.
@@ -147,7 +257,7 @@ Register your own — anything from a one-liner moving average to a multi-line
 pane:
 
 ```js
-HabChart.registerIndicator('vwap', {
+WickChart.registerIndicator('vwap', {
   kind: 'overlay',               // or 'pane'
   params: { period: 20 },        // defaults; set via indicators="vwap:30"
   compute(bars, params) {        // bars: normalized {time,open,high,low,close,volume}
@@ -165,11 +275,11 @@ HabChart.registerIndicator('vwap', {
 chart.indicators = 'vwap:20';
 ```
 
-`import HabChart from 'wickchart'` gives you the class for
-`HabChart.registerIndicator(...)` (the element is registered as a side effect
+`import WickChart from 'wickchart'` gives you the class for
+`WickChart.registerIndicator(...)` (the element is registered as a side effect
 of importing the package).
 
-### HabScript — custom indicators as expressions
+### WickScript — custom indicators as expressions
 
 No build step, no JS: write an indicator inline in the attribute. `expr:{…}`
 draws on the price chart; `pexpr:{…}` gets its own pane. Add an optional
@@ -177,10 +287,10 @@ draws on the price chart; `pexpr:{…}` gets its own pane. Add an optional
 shareable URLs.
 
 ```html
-<hab-chart indicators="sma:20 expr:{(close - sma(close,20)) / sma(close,20) * 100}@ff6a00"></hab-chart>
+<wick-chart indicators="sma:20 expr:{(close - sma(close,20)) / sma(close,20) * 100}@ff6a00"></wick-chart>
 
 <!-- oscillator in its own pane -->
-<hab-chart indicators="pexpr:{rsi(close,14)} pexpr:{change(close) / close * 100}"></hab-chart>
+<wick-chart indicators="pexpr:{rsi(close,14)} pexpr:{change(close) / close * 100}"></wick-chart>
 ```
 
 | Series variables | |
@@ -213,7 +323,7 @@ attribute syntax:
 ```js
 import { scriptIndicator } from 'wickchart/core';
 
-HabChart.registerIndicator('spread', scriptIndicator('close - ema(close,21)'));
+WickChart.registerIndicator('spread', scriptIndicator('close - ema(close,21)'));
 chart.indicators = 'spread';   // now usable like any built-in
 ```
 
@@ -222,7 +332,7 @@ press **+ Expr** — invalid expressions show the compiler's error inline).
 
 ### Volatility-regime shading
 
-`<hab-chart volshading>` tints the price pane background by realized
+`<wick-chart volshading>` tints the price pane background by realized
 volatility — the rolling stddev of log returns (20 bars by default),
 classified against its own full-history percentiles: **calm** (≤ 30th
 percentile, subtle blue), **normal** (untinted), **hot** (≥ 70th percentile,
@@ -231,9 +341,9 @@ read instantly, and the legend shows the hovered bar's regime and
 percentile (`VOL 30/70 · hot · 94%ile`).
 
 ```html
-<hab-chart volshading></hab-chart>                 <!-- defaults 30/70, 20 bars -->
-<hab-chart volshading="20/85"></hab-chart>         <!-- custom cutoffs -->
-<hab-chart volshading="20/85/50"></hab-chart>      <!-- + 50-bar vol window -->
+<wick-chart volshading></wick-chart>                 <!-- defaults 30/70, 20 bars -->
+<wick-chart volshading="20/85"></wick-chart>         <!-- custom cutoffs -->
+<wick-chart volshading="20/85/50"></wick-chart>      <!-- + 50-bar vol window -->
 ```
 
 Cutoffs are clamped so the low percentile always stays at least 2 points
@@ -243,6 +353,69 @@ classifies everything as normal. The pieces are exported from
 `wickchart/core` (`calcRealizedVol`, `volRegimeBands`, `percentileOfSorted`)
 if you want to build on them.
 
+### Server-side overlays (zones & levels)
+
+Draw analysis from your own API straight onto the chart: supply/demand
+**zones** (time × price rectangles) and horizontal **levels**, rendered
+behind the candles. Zones without a `to` extend into future space past the
+last bar, like TradingView drawings.
+
+```js
+const res = await fetch('https://api.example.com/analysis?symbol=BTC');
+chart.setOverlays(await res.json());
+```
+
+```js
+[
+  // zone: from/to are timestamps (ms or s); null → chart edge
+  { type: 'zone', from: 1753920000000, priceFrom: 33000, priceTo: 35600,
+    color: '#ef5350', alpha: 0.25, label: 'demand' },
+  { type: 'zone', from: 1753920000000,                    // no `to` → extends
+    priceFrom: 37700, priceTo: 40900, color: '#26a69a' }, // to the right edge
+  // level: horizontal price line, full width by default
+  { type: 'level', price: 28700, color: '#3f51b5', label: 'S1' },
+  { type: 'level', price: 22800, color: '#3f51b5', dash: true },
+]
+```
+
+- `addOverlay(o)` upserts one (by `id`), `removeOverlay(id)`,
+  `clearOverlays()`, and `chart.overlays` reads them back.
+- Colors accept hex / `rgb()` / CSS names plus the palette keys
+  `up` | `down` | `accent`; `alpha` clamps to 0.02–0.8 (default 0.22).
+- Timestamps snap to bars (before the first bar clamps left, after the last
+  clamps right); invalid entries are dropped, never thrown — it's API data.
+- Fully declarative, too — the same JSON as an attribute:
+
+```html
+<wick-chart overlays='[{"type":"level","price":28700,"color":"#3f51b5","label":"S1"}]'></wick-chart>
+```
+
+The React binding takes `overlays` as a prop (fresh array → re-apply), and
+`normalizeOverlays` / `barIndexForTime` / `resolveOverlayColor` are exported
+from `wickchart/core`.
+
+### Scenario mode — ghost paths & volatility cones
+
+Project what-if into future space: a ghost path of hypothetical prices plus
+a volatility cone (±1σ/±2σ bands widening with √h from realized vol).
+
+```js
+chart.setScenario({
+  path: [64000, 65500, 66800, 68000], // prices for future bars 1..N
+  cone: true,                         // σ-bands from realized vol (default)
+  label: 'bull case',
+  color: 'up',                        // up | down | accent or safe colors
+});
+chart.setScenario({ horizon: 48 });   // cone-only projection
+chart.clearScenario();
+```
+
+Setting a scenario reserves future space on the right so the cone stays
+visible; the horizon defaults to the path length (1–500) and `levels` are σ
+multipliers (default `[1, 2]`). Like overlays, scenarios are analysis data —
+excluded from shareable state, and the same shape a server-side model could
+push. `calcVolCone` / `normalizeScenario` are exported from `wickchart/core`.
+
 ### AI-ready data window — `getDataWindow()`
 
 One call turns whatever is on screen into a compact, LLM-pasteable summary.
@@ -260,6 +433,31 @@ s.volPctile; // 84 → hot regime relative to the window itself
 s.patterns;  // [{ time, note }] — most recent first
 ```
 
+### AI agent interface — the chart as a tool surface
+
+The chart can publish its own **tool manifest** and accept validated
+tool-calls, so any LLM can operate it with zero glue code — the chart never
+touches the network; you supply the model call.
+
+```js
+chart.aiTools();    // manifest: get_data_window, set_indicators, set_overlays, add_alert, …
+chart.aiPrompt();   // system prompt demanding JSON [{tool, args}] ops
+chart.aiContext();  // grounding: current state + visible-window summary
+chart.applyAI(ops); // validated dispatcher — per-op {ok, result} / {ok:false, error}
+
+const { results } = await chart.ask(
+  'add RSI, mark the demand zone, and alert me on volume spikes',
+  { run: async (payload) => (await callMyLLM(payload)).ops }
+);
+```
+
+Every op is whitelisted and its args validated (indicator names checked
+against the registry, overlays through the sanitizer, enums enforced) — LLM
+output is treated as untrusted input, and a bad op returns an error the
+model can self-correct from instead of throwing. The
+[docs page](./docs.html) has a live playground driving `applyAI()` with an
+offline demo agent (no network, no keys).
+
 `text` renders like:
 
 ```
@@ -277,7 +475,7 @@ from `wickchart/core` for server-side use.
 
 ### Sonification — the chart by ear
 
-`<hab-chart sonify>` maps price to pitch (180–880 Hz across the visible
+`<wick-chart sonify>` maps price to pitch (180–880 Hz across the visible
 scale, log-aware): moving the crosshair with the mouse or **arrow keys** plays
 a short tone per bar, so trend and shape are audible — a rare accessibility
 win for screen-reader users. `chart.playRange()` sweeps the whole visible
@@ -291,7 +489,7 @@ Tag charts with the same channel and they share pointers — across browser
 tabs, or between multiple charts on one page:
 
 ```html
-<hab-chart co-view="btc-room"></hab-chart>
+<wick-chart co-view="btc-room"></wick-chart>
 ```
 
 Hovering in one tab draws a ghost crosshair (accent, dotted, with the time
@@ -302,12 +500,12 @@ stops moving. Same-origin only (BroadcastChannel); the connection follows the
 
 ### Smart annotations
 
-`<hab-chart annotations>` marks notable events on the visible range — volume
+`<wick-chart annotations>` marks notable events on the visible range — volume
 spikes (>3× average), price gaps, 41-bar pivot highs/lows, and RSI
 divergences — with lettered badges (V/G/H/L/D). Hover a badged bar and the
 legend shows a one-line insight ("Volume 4.2× average", "Bearish RSI
 divergence"). The current set is emitted on every recompute via the
-`hab:annotations` event, so hosts can build their own UI from it. Badges are
+`wick:annotations` event, so hosts can build their own UI from it. Badges are
 hidden at extreme zoom-out, where bars collapse into columns.
 
 ### Example: VWAP via the registry
@@ -316,9 +514,9 @@ VWAP ships in the demo but *not* as a builtin — it's the reference for writing
 your own (session-anchored, resets each trading day):
 
 ```js
-import HabChart from 'wickchart';
+import WickChart from 'wickchart';
 
-HabChart.registerIndicator('vwap', {
+WickChart.registerIndicator('vwap', {
   kind: 'overlay',
   params: {},
   compute(bars) {
@@ -381,22 +579,29 @@ chart.addPosition({ id: 'x1', side: 'short', entry: 66000, qty: 1 });
 chart.removePosition('x1');
 
 chart.addAlert({ price: 65000, direction: 'above' }); // 'above' | 'below' | 'cross'
-chart.addEventListener('hab:alert', (e) => {
+chart.addEventListener('wick:alert', (e) => {
   console.log('crossed!', e.detail.id, e.detail.price);
 });
+
+// scripted alerts — any WickScript predicate, fired on its false→true edge
+chart.addAlert({ when: 'crossup(rsi(close,14), 30)' });
+chart.addAlert({ when: 'volume > sma(volume,20) * 3', once: false }); // re-arms
 ```
 
 The P&L chip recalculates on every streamed bar. Alerts are edge-triggered
 (fire once per crossing) and one-shot by default (`once: false` to re-arm).
+Scripted alerts are evaluated locally on every streamed bar — the event
+carries the triggering close as `price` plus the `when` source; an invalid
+predicate is rejected (`addAlert` returns `null`), never thrown.
 
 ### Stats & measure
 
-`<hab-chart stats>` shows live statistics of the visible range — return %,
+`<wick-chart stats>` shows live statistics of the visible range — return %,
 max drawdown, annualized volatility, up/down bar counts, average volume —
 recalculated as you pan and zoom.
 
 Hold **Shift and drag** across the chart to measure a move: an overlay shows
-Δprice, Δ%, bar count and elapsed time, and a `hab:measure` event fires on
+Δprice, Δ%, bar count and elapsed time, and a `wick:measure` event fires on
 release (`detail.from` / `detail.to` carry index, time and price). Click or
 press `Esc` to clear.
 
@@ -423,9 +628,9 @@ Reflected properties (`chart.type = 'line'`) work for `theme`, `type`, `label`,
 
 | Event           | Detail                                                     |
 | --------------- | ---------------------------------------------------------- |
-| `hab:crosshair` | `{ index, bar, x, y, price }` on hover / arrows, `null` on leave |
-| `hab:range`     | `{ from, to }` after zoom / pan / jump                      |
-| `hab:select`    | `{ index, bar, price }` on click/tap (e.g. open an order form at that price) |
+| `wick:crosshair` | `{ index, bar, x, y, price }` on hover / arrows, `null` on leave |
+| `wick:range`     | `{ from, to }` after zoom / pan / jump                      |
+| `wick:select`    | `{ index, bar, price }` on click/tap (e.g. open an order form at that price) |
 
 ## Theming
 
@@ -433,18 +638,18 @@ All colors are CSS custom properties settable on the element (they pierce the
 Shadow DOM):
 
 ```css
-hab-chart {
-  --hab-bg: #0d1117;          /* transparent works too */
-  --hab-up: #16c784;
-  --hab-down: #ea3943;
-  --hab-accent: #4c8dff;      /* line & area color */
-  --hab-text: #8b949e;        /* axis text */
-  --hab-text-strong: #e6edf3; /* legend values */
-  --hab-grid: rgba(230,237,243,.05);
-  --hab-border: rgba(230,237,243,.09);
-  --hab-crosshair: rgba(230,237,243,.42);
-  --hab-rsi: #a78bfa;
-  --hab-overlay-0: #f0b429;   /* SMA color, …-1, -2, … for more overlays */
+wick-chart {
+  --wick-bg: #0d1117;          /* transparent works too */
+  --wick-up: #16c784;
+  --wick-down: #ea3943;
+  --wick-accent: #4c8dff;      /* line & area color */
+  --wick-text: #8b949e;        /* axis text */
+  --wick-text-strong: #e6edf3; /* legend values */
+  --wick-grid: rgba(230,237,243,.05);
+  --wick-border: rgba(230,237,243,.09);
+  --wick-crosshair: rgba(230,237,243,.42);
+  --wick-rsi: #a78bfa;
+  --wick-overlay-0: #f0b429;   /* SMA color, …-1, -2, … for more overlays */
 }
 ```
 
@@ -507,6 +712,27 @@ column, and an offscreen layer so hover only repaints the crosshair.
 - Incremental (O(1)) indicator updates for high-frequency streaming
 - Min/max downsampling and/or an offscreen hover layer if profiling ever demands
 
+## Migrating from 0.x (HabView)
+
+1.0 renames the public surface to the WickChart brand. The 0.x names keep
+working as **deprecated aliases** (removed in 2.0), so upgrading is safe to
+do lazily:
+
+| 0.x (deprecated alias) | 1.0 canonical |
+|---|---|
+| `<hab-chart>` / `<hab-feed>` | `<wick-chart>` / `<wick-feed>` |
+| `hab:range`, `hab:select`, `hab:alert`, `hab:crosshair`, `hab:measure`, `hab:annotations` | `wick:*` of the same name (both fire during 1.x) |
+| `hab-feed:status` / `hab-feed:fallback` | `wick-feed:status` / `wick-feed:fallback` (both fire during 1.x) |
+| `--hab-bg`, `--hab-up`, … | `--wick-*` of the same name (`--wick-*` wins; `--hab-*` is the fallback) |
+| `HabChart` / `HabFeed` classes | `WickChart` / `WickFeed` (also as named exports) |
+| HabScript (the `expr:{…}` language) | WickScript — syntax unchanged |
+| `import … from 'wickchart/src/hab-chart.js'` | use the package entry points (`wickchart`, `wickchart/core`, `wickchart/feed`) — module files are renamed |
+
+Two behavioral notes: custom indicators registered via
+`WickChart.registerIndicator()` are shared with the legacy `<hab-chart>`
+alias (one registry), and cross-tab co-view channels are now prefixed
+`wick-co-view:` (a 0.x tab and a 1.x tab won't pair — refresh both).
+
 ## License
 
 MIT

package/package.json

@@ -1,23 +1,27 @@
 {
   "name": "wickchart",
-  "version": "0.4.0",
-  "description": "<hab-chart> — a modern, dependency-free financial charting web component. Candles, line & area charts, crosshair, zoom/pan, indicators, live streaming, theming.",
+  "version": "1.2.0",
+  "description": "<wick-chart> — a modern, dependency-free financial charting web component. Candles, line & area charts, crosshair, zoom/pan, indicators (incl. a safe expression mini-language), live streaming via <wick-feed>, theming.",
   "type": "module",
-  "main": "src/hab-chart.js",
-  "module": "src/hab-chart.js",
-  "types": "types/hab-chart.d.ts",
+  "main": "src/wick-chart.js",
+  "module": "src/wick-chart.js",
+  "types": "types/wick-chart.d.ts",
   "exports": {
     ".": {
-      "types": "./types/hab-chart.d.ts",
-      "default": "./src/hab-chart.js"
+      "types": "./types/wick-chart.d.ts",
+      "default": "./src/wick-chart.js"
     },
     "./core": {
       "types": "./types/core.d.ts",
       "default": "./src/core.js"
     },
     "./feed": {
-      "types": "./types/hab-feed.d.ts",
-      "default": "./src/hab-feed.js"
+      "types": "./types/wick-feed.d.ts",
+      "default": "./src/wick-feed.js"
+    },
+    "./react": {
+      "types": "./types/react.d.ts",
+      "default": "./src/react.js"
     }
   },
   "files": [
@@ -25,14 +29,23 @@
     "types"
   ],
   "sideEffects": [
-    "src/hab-chart.js"
+    "src/wick-chart.js",
+    "src/react.js"
   ],
+  "peerDependencies": {
+    "react": ">=16.8"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
   "scripts": {
     "dev": "npx --yes serve . -l 5173",
     "test": "node --test \"tests/*.test.mjs\"",
-    "build:types": "tsc -p tsconfig.json",
+    "build:types": "node -e \"require('fs').rmSync('types', { recursive: true, force: true });\" && tsc -p tsconfig.json",
     "prepack": "npm run build:types",
-    "ci": "npm run build:types && npm test && node --check src/hab-chart.js && node --check src/core.js && node --check demo/app.js"
+    "ci": "npm run build:types && npm test && node --check src/wick-chart.js && node --check src/wick-feed.js && node --check src/core.js && node --check src/react.js && node --check src/react-core.js && node --check demo/app.js"
   },
   "keywords": [
     "chart",
@@ -52,6 +65,10 @@
     "url": "git+https://github.com/benyblack/wickchart.git"
   },
   "devDependencies": {
+    "@types/react": "^19.1.0",
+    "jsdom": "^26.1.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "typescript": "^7.0.2"
   }
 }