@iccandle/vuejs-widget 0.1.5 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +190 -106
  2. package/dist/index.d.ts +4 -0
  3. package/dist/widget-iccandle.cjs +7 -7
  4. package/dist/widget-iccandle.js +730 -583
  5. package/package.json +1 -1
package/README.md CHANGED
@@ -1,8 +1,8 @@
1
1
  # @iccandle/vuejs-widget
2
2
 
3
- Vue 3 component that wraps an existing [TradingView Charting Library](https://www.tradingview.com/charting-library-docs/) widget and adds ICCandle’s **scanner UI**: a draggable popup to run pattern search over a user-selected bar range, with theming loaded from ICCandle’s API.
3
+ Vue 3 scanner overlay for an existing [TradingView Charting Library](https://www.tradingview.com/charting-library-docs/) widget. It adds ICCandle’s draggable scanner popup, pattern search, replay of predicted candles, and a results embed.
4
4
 
5
- Published as ESM and CommonJS; component styles are bundled and injected at runtime (no separate CSS import).
5
+ Published as ESM and CommonJS. Component styles are bundled and injected at runtime — no separate CSS import.
6
6
 
7
7
  ## Install
8
8
 
@@ -12,73 +12,90 @@ npm install @iccandle/vuejs-widget
12
12
  pnpm add @iccandle/vuejs-widget
13
13
  ```
14
14
 
15
- ### How to get an API key
15
+ `vue` `^3.5.0` is a **peer dependency**. Install it in your app. `axios` is a runtime dependency of this package.
16
16
 
17
- 1. Register or sign in at the [ICCandle corporate portal](https://corporate-iccandle.vercel.app/).
18
- 2. Use **Create API key** in the dashboard.
19
- 3. When selecting a service, choose **search** so the key is valid for this widget (remote theming, candle cache, and scanner validation).
17
+ ## Prerequisites
20
18
 
21
- Issued keys use the format `icc_search_` followed by 48 hexadecimal characters.
22
-
23
- ### Prerequisites
24
-
25
- - **Vue 3.5+** — `vue` is a **peer dependency** (install it in your app).
26
- - **TradingView Charting Library** — obtain it under your own license from TradingView, host the static assets (e.g. under `/charting_library/` in your public folder), and load the library at runtime. **This package does not ship the charting library.**
27
- - **ICCandle API key** — required for theme, candle cache, and scanner validation; format `icc_search_` plus 48 hex characters. See [How to get an API key](#how-to-get-an-api-key) above.
19
+ - **Vue 3.5+**
20
+ - **TradingView Charting Library** — obtain it under your own license, host the static assets (for example `/charting_library/`), and load it at runtime via `library_path`. **This package does not ship the charting library.**
21
+ - A **results iframe** (or equivalent) that loads ICCandle’s embed app. Scan/tracker actions require the user to sign in inside that embed; the widget stores the session as `iccandle_token` in `localStorage`.
28
22
 
29
23
  ## Quick start
30
24
 
31
25
  ```vue
32
26
  <script setup lang="ts">
33
- import { shallowRef } from "vue";
27
+ import { ref, shallowRef, watch } from "vue";
34
28
  import type { IChartingLibraryWidget } from "charting_library/charting_library";
35
- import { WidgetIccandle } from "@iccandle/vuejs-widget";
29
+ import {
30
+ WidgetIccandle,
31
+ WIDGET_RESULT_URL,
32
+ handleResultIframeLoad,
33
+ } from "@iccandle/vuejs-widget";
36
34
 
37
35
  const chartWidget = shallowRef<IChartingLibraryWidget | null>(null);
38
- const widgetKey = "icc_search_..."; // ICCandle-issued key (48 hex chars after prefix)
39
- const iframeSrc = shallowRef("");
36
+ const language = "en" as const;
37
+ const theme = "dark" as const;
38
+
39
+ const iframeSrc = ref(`${WIDGET_RESULT_URL}/${language}?theme=${theme}&header=true`);
40
+ const iframeLoaded = ref(false);
41
+ const resultIframeRef = ref<HTMLIFrameElement | null>(null);
42
+ const resultIframeBox = { current: null as HTMLIFrameElement | null };
43
+
44
+ watch(
45
+ resultIframeRef,
46
+ (el) => {
47
+ resultIframeBox.current = el;
48
+ },
49
+ { immediate: true },
50
+ );
40
51
 
41
52
  function handleSubmit(src: string) {
42
53
  iframeSrc.value = src;
43
54
  }
55
+
56
+ function handleIframeLoad() {
57
+ iframeLoaded.value = true;
58
+ handleResultIframeLoad(resultIframeRef.value);
59
+ }
44
60
  </script>
45
61
 
46
62
  <template>
47
- <WidgetIccandle
48
- :chart-widget="chartWidget"
49
- :widget-key="widgetKey"
50
- theme="system"
51
- user-id="your-user-id"
52
- email="you@example.com"
53
- :submit-callback="handleSubmit"
54
- >
55
- <template #default="{ chartRefs }">
56
- <!-- Your chart container + TradingView bootstrap; set chartWidget when ready -->
57
- <div id="tv_chart_container" style="height: 100%" />
58
- </template>
59
- </WidgetIccandle>
60
- <iframe v-if="iframeSrc" :src="iframeSrc" title="ICCandle results" />
63
+ <div class="iccandle-selector-widget__container">
64
+ <div class="iccandle-selector-widget__chart-pane">
65
+ <WidgetIccandle
66
+ :chart-widget="chartWidget"
67
+ :submit-callback="handleSubmit"
68
+ :theme="theme"
69
+ :language="language"
70
+ :iframe-loaded="iframeLoaded"
71
+ :result-iframe-ref="resultIframeBox"
72
+ >
73
+ <!-- Bootstrap TradingView here and assign chartWidget when ready -->
74
+ <div id="tv_chart_container" style="height: 100%" />
75
+ </WidgetIccandle>
76
+ </div>
77
+ <iframe
78
+ ref="resultIframeRef"
79
+ :src="iframeSrc"
80
+ class="iccandle-selector-widget__iframe"
81
+ title="ICCandle results"
82
+ @load="handleIframeLoad"
83
+ />
84
+ </div>
61
85
  </template>
62
86
  ```
63
87
 
64
- Replace the chart placeholder with your TradingView initialization and pass the `IChartingLibraryWidget` instance when `onChartReady` (or equivalent) fires.
88
+ Replace the chart placeholder with your TradingView initialization and pass the `IChartingLibraryWidget` instance when the widget is created (typically right after `new widget(options)`).
65
89
 
66
- ## Usage guide
67
-
68
- ### Step 1 — Install the package
69
-
70
- ```bash
71
- npm install @iccandle/vuejs-widget
72
- ```
90
+ ## Usage
73
91
 
74
- Ensure `vue` is installed and meets the peer version range.
92
+ ### 1. Host the Charting Library
75
93
 
76
- ### Step 2 — Host the Charting Library
94
+ Copy the TradingView Charting Library build into a path your app can serve as static files (for example `public/charting_library/` in Vite). Point `library_path` at that URL. The library is **not** bundled inside `@iccandle/vuejs-widget`.
77
95
 
78
- 1. Copy the TradingView Charting Library build into a path your app can serve as static files (e.g. `public/charting_library/` in Vite).
79
- 2. Import the library constructor from that path in your bundler setup (see TradingView’s integration docs for your framework). The library is **not** bundled inside `@iccandle/vuejs-widget`; it loads at runtime via `library_path` (or equivalent) on the widget options.
96
+ ### 2. Bootstrap TradingView with replay support
80
97
 
81
- ### Step 3 — Bootstrap TradingView and capture the widget instance
98
+ Wrap your datafeed with `withPlayChart` so the widget can inject predicted bars during replay. Register `getCustomIndicators` so those bars render as generated-candle studies:
82
99
 
83
100
  ```ts
84
101
  import { onMounted, onBeforeUnmount, ref, shallowRef } from "vue";
@@ -88,8 +105,9 @@ import type {
88
105
  ResolutionString,
89
106
  } from "charting_library/charting_library";
90
107
  import { widget } from "charting_library/charting_library";
108
+ import { withPlayChart, getCustomIndicators } from "@iccandle/vuejs-widget";
91
109
 
92
- const LIBRARY_PATH = "/charting_library/"; // must match your hosted assets
110
+ const LIBRARY_PATH = "/charting_library/";
93
111
 
94
112
  const containerRef = ref<HTMLDivElement | null>(null);
95
113
  const chartWidget = shallowRef<IChartingLibraryWidget | null>(null);
@@ -103,9 +121,14 @@ onMounted(() => {
103
121
  library_path: LIBRARY_PATH,
104
122
  symbol: "EURUSD",
105
123
  interval: "60" as ResolutionString,
106
- datafeed: yourDatafeed,
124
+ datafeed: withPlayChart(yourDatafeed),
107
125
  locale: "en",
108
126
  autosize: true,
127
+ drawings_access: {
128
+ type: "black",
129
+ tools: [{ name: "Date Range" }],
130
+ },
131
+ custom_indicators_getter: () => getCustomIndicators("dark"),
109
132
  };
110
133
 
111
134
  const tv = new widget(options);
@@ -122,111 +145,172 @@ onMounted(() => {
122
145
  });
123
146
  ```
124
147
 
125
- You must supply a valid `datafeed`, `symbol`, `interval`, `locale`, and any other options required by your TradingView license and app.
148
+ `withPlayChart` also accepts a factory plus its arguments: `withPlayChart(createDatafeed, arg1, arg2)`.
149
+
150
+ You must supply a valid `datafeed`, `symbol`, `interval`, `locale`, and any other options required by your TradingView license.
126
151
 
127
- ### Step 4 — Wrap the chart with `WidgetIccandle`
152
+ ### 3. Wrap the chart with `WidgetIccandle`
128
153
 
129
- `WidgetIccandle` must wrap the same subtree that contains the chart container so the scanner overlay positions correctly. Pass the live widget instance (or `null` while mounting):
154
+ The component must wrap the same subtree that contains the chart container so the scanner overlay positions correctly. Pass `null` for `chartWidget` until the instance is ready.
130
155
 
131
156
  ```vue
132
157
  <WidgetIccandle
133
158
  :chart-widget="chartWidget"
134
- :widget-key="widgetKey"
135
- theme="system"
136
- user-id="your-user-id"
137
- email="you@example.com"
138
- :submit-callback="(iframeSrc) => { /* see Step 5 */ }"
159
+ :submit-callback="handleSubmit"
160
+ theme="dark"
161
+ language="en"
162
+ :iframe-loaded="iframeLoaded"
163
+ :result-iframe-ref="resultIframeBox"
164
+ :available-intervals="['1', '5', '15', '30', '60']"
139
165
  >
140
166
  <div ref="containerRef" style="height: 100%; min-height: 400px" />
141
167
  </WidgetIccandle>
142
168
  ```
143
169
 
144
- ### Step 5 — Handle the plugin iframe URL
170
+ ### 4. Handle the results iframe URL
171
+
172
+ After a successful scan, `submitCallback` receives a full HTTPS URL for the ICCandle embed. Typical query parameters include symbol, reference resolution, scan resolution, candle cache id (`cid`), time window (`from` / `to`), theme, and optional filters (`fs`, `period`, `model`, `temp`).
173
+
174
+ **Split pane (recommended)** — keep an iframe beside the chart and update its `src`:
145
175
 
146
- After a successful scan setup, `submitCallback` receives a **full HTTPS URL** for the ICCandle plugin iframe. The query string typically includes the bar window (timestamps / size), symbol, `candle_id`, `apiKey` (your widget key), resolved theme, and any active filters—use it as-is in an iframe `src` or deep link.
176
+ ```ts
177
+ const submitCallback = (nextSrc: string) => {
178
+ iframeSrc.value = nextSrc;
179
+ };
180
+ ```
147
181
 
148
182
  **Open in a new tab**
149
183
 
150
184
  ```ts
151
185
  submitCallback: (iframeSrc) => {
152
186
  window.open(iframeSrc, "_blank", "noopener,noreferrer");
153
- }
187
+ };
154
188
  ```
155
189
 
156
- **Show in a modal or side panel**
190
+ On iframe `load`, call `handleResultIframeLoad(iframe)` so the embed knows the parent origin (required for sign-in to write `iccandle_token`) and so a Stripe return of `?payment=success` can refresh the subscription without a full reload.
157
191
 
158
- Store the URL in state and render:
192
+ `result-iframe-ref` is a mutable `{ current }` box, not a Vue `ref`. Sync it from the iframe element:
159
193
 
160
- ```vue
161
- <iframe v-if="iframeSrc" title="ICCandle pattern search" :src="iframeSrc" />
194
+ ```ts
195
+ const resultIframeRef = ref<HTMLIFrameElement | null>(null);
196
+ const resultIframeBox = { current: null as HTMLIFrameElement | null };
197
+
198
+ watch(resultIframeRef, (el) => {
199
+ resultIframeBox.current = el;
200
+ }, { immediate: true });
162
201
  ```
163
202
 
164
- ### Theme and remote branding
203
+ ### Sign-in
165
204
 
166
- - **`theme="light"` / `"dark"`** — forces that palette for the scanner chrome and for values forwarded into the plugin URL.
167
- - **`theme="system"`** — follows `prefers-color-scheme` for light/dark resolution.
168
- - On mount, the widget fetches your org’s tokens from ICCandle and sets CSS custom properties on the widget root, e.g. `--iccandle-primary`, `--iccandle-border`.
205
+ Scan and Pattern Tracker require `localStorage.iccandle_token`. The results iframe posts `auth.signIn` / `auth.signOut`; the widget listens and stores or clears the token. Until the user signs in, those actions show a login prompt.
169
206
 
170
- ### Full working example
207
+ ### Theme
171
208
 
172
- See [`src/App.vue`](src/App.vue) and [`src/tradingview/TradingviewChart.vue`](src/tradingview/TradingviewChart.vue) in this repository’s dev app for a concrete in-repo reference (custom datafeed, timezone, visibility handling).
209
+ | `theme` | Behavior |
210
+ | ------- | -------- |
211
+ | `"light"` (default) | Light scanner chrome and embed theme. |
212
+ | `"dark"` | Dark scanner chrome; adds `.iccandle-dark` on the root. |
213
+ | `"system"` | Follows `prefers-color-scheme`. |
173
214
 
174
- ## API
215
+ The root uses CSS custom properties you can override: `--iccandle-primary`, `--iccandle-border`, `--iccandle-text`, `--iccandle-background`, `--iccandle-primary-gradient-end`, `--iccandle-font`.
175
216
 
176
- ### Exports
217
+ ### Language
177
218
 
178
- | Name | Kind | Description |
179
- | ---- | ---- | ----------- |
180
- | `WidgetIccandle` | Component | Scanner overlay around your chart subtree |
181
- | `SelectorWidget` | Component | Deprecated alias of `WidgetIccandle` |
182
- | `WidgetIccandleChartRefs` | Type | Chart study refs for generated candles |
183
- | `withPlayChart` | Function | Wrap a datafeed for replay / predicted candles |
184
- | `getCustomIndicators` | Function | TradingView custom indicators for generated candles |
185
- | `getGeneratedCandlesMaskColor` | Function | Theme-aware mask color for predicted bars |
219
+ `language` accepts `"en"` | `"zh"` | `"vi"` | `"th"` | `"ko"` | `"ja"` | `"mn"` | `"ru"`. Unknown values fall back to `"en"`. The value is used for scanner copy and is forwarded into embed URLs.
186
220
 
187
- ### `WidgetIccandle` props
221
+ ### Layout helpers
188
222
 
189
- | Prop | Type | Required | Description |
190
- | ---- | ---- | -------- | ----------- |
191
- | `chartWidget` | `IChartingLibraryWidget \| null` | Yes | Live TradingView widget instance (`null` until ready). |
192
- | `widgetKey` | `string` | Yes | ICCandle API key (`icc_search_` + 48 hex chars). |
193
- | `submitCallback` | `(iframeSrc: string) => void` | Yes | Called after a successful scan setup with the plugin iframe URL. |
194
- | `userId` | `string` | Yes | User id forwarded to the results plugin. |
195
- | `email` | `string` | Yes | User email (pattern tracker). |
196
- | `widgetKeyPatternTracker` | `string` | No | Optional tracker API key (`icc_tracker_…`). |
197
- | `theme` | `"light" \| "dark" \| "system"` | No | Defaults to `"light"`. `"system"` follows `prefers-color-scheme`. |
198
- | `language` | `WidgetLanguage` | No | Scanner UI language (`en`, `zh`, `vi`, …). |
199
- | `onCloseResult` | `() => void` | No | Called when the results iframe posts `close-result`. |
200
- | `iframeLoaded` | `boolean` | No | Disables scanner actions while results iframe is loading. |
223
+ Injected CSS includes split-pane classes used in the demo:
201
224
 
202
- Default slot receives `{ chartRefs }` for wiring custom indicators / generated-candle studies.
225
+ | Class | Role |
226
+ | ----- | ---- |
227
+ | `.iccandle-selector-widget__container` | Flex row (stacks below 1024px). `--chart-pane-size` defaults to `60%`. |
228
+ | `.iccandle-selector-widget__chart-pane` | Chart column. |
229
+ | `.iccandle-selector-widget__resize-handle` | Drag handle; add `--stacked` for the stacked layout. |
230
+ | `.iccandle-selector-widget__iframe` | Results pane. |
203
231
 
204
- ### Widget key and remote theming
205
-
206
- On mount, the component loads branding colors from ICCandle:
232
+ ### Full working example
207
233
 
208
- - **URL:** `https://api.iccandle.ai/corporate-client/v1/widgetStyle/search/user/?service_type=search`
209
- - **Header:** `api-key: <widgetKey>`
234
+ See [`src/App.vue`](src/App.vue), [`src/tradingview/TradingviewChart.vue`](src/tradingview/TradingviewChart.vue), and [`src/tradingview/TradingviewChartContainer.vue`](src/tradingview/TradingviewChartContainer.vue) in this repository.
210
235
 
211
- CSS custom properties (`--iccandle-primary`, `--iccandle-border`, etc.) are applied on the widget root so the scanner matches your configured light/dark tokens.
236
+ ## API
212
237
 
213
- ### Behavior summary
238
+ ### Exports
214
239
 
215
- - Subscribes to chart readiness, resolution, symbol changes, and drawing events.
216
- - Manages a `date_range` multipoint drawing so the user can adjust the bar window; window size and exported candles drive the scanner.
217
- - Posts candles to ICCandle’s cache endpoint before opening the plugin URL.
218
- - Listens for `window` `message` events for chart/news/pattern integration (replay, event marks, pattern selection) and can clear persisted news mark selections (`localStorage` keys `tv:selected-news-events`, `tv:clicked-news-event`) when starting a scan.
240
+ | Name | Kind | Description |
241
+ | ---- | ---- | ----------- |
242
+ | `WidgetIccandle` | Component | Scanner overlay around your chart subtree. |
243
+ | `WidgetIccandleProps` | Type | Public props of `WidgetIccandle`. |
244
+ | `WidgetLanguage` | Type | Supported UI languages. |
245
+ | `withPlayChart` | Function | Wrap a TradingView datafeed (or factory) so replay can inject bars and block live ticks. |
246
+ | `getCustomIndicators` | Function | Returns custom studies used to draw generated / predicted candles. Pass `"light"` or `"dark"`. |
247
+ | `GeneratedCandlesTheme` | Type | `"light"` \| `"dark"` for `getCustomIndicators`. |
248
+ | `handleResultIframeLoad` | Function | Post parent origin (and optional payment-success) to the results iframe. |
249
+ | `WIDGET_RESULT_URL` | Constant | Default embed origin: `https://embed-iccandle-app.iccandle.ai`. |
250
+ | `OPEN_PRICING_MESSAGE_TYPE` | Constant | `"open-pricing"` postMessage type. |
251
+ | `postOpenPricingToEmbed` | Function | Ask the results iframe to open pricing. Returns `false` if no `contentWindow`. |
252
+ | `postOpenPricingToParent` | Function | Forward pricing to `window.parent` when this widget is itself embedded. |
253
+ | `postOpenPricingToWindow` | Function | Post an `open-pricing` message to an arbitrary `Window`. |
254
+ | `OpenPricingMessage` | Type | `{ type, theme?, language? }`. |
219
255
 
220
- ## Optional: timescale marks (news/events)
256
+ ### `WidgetIccandle` props
221
257
 
222
- If your data feed implements `getTimescaleMarks`, you can surface stored events (e.g. from `localStorage` under `tv:selected-news-events`) as marks on the time axis. See the React sibling docs or `src/lib/data-feed.ts` in this repo for a working example.
258
+ | Prop | Type | Required | Default | Description |
259
+ | ---- | ---- | -------- | ------- | ----------- |
260
+ | `chartWidget` | `IChartingLibraryWidget \| null` | Yes | — | Live TradingView widget (`null` until ready). |
261
+ | `submitCallback` | `(iframeSrc: string) => void` | Yes | — | Called with the embed URL after a scan (and for some pricing / news navigations). |
262
+ | `theme` | `"light" \| "dark" \| "system"` | No | `"light"` | Scanner and forwarded embed theme. |
263
+ | `language` | `WidgetLanguage` | No | `"en"` | Scanner UI language. |
264
+ | `onCloseResult` | `() => void` | No | — | Called when the embed posts `selector.closeResult`. |
265
+ | `iframeLoaded` | `boolean` | No | `true` | When `false`, Scan and Pattern Tracker are disabled. Set `true` after the results iframe has loaded. |
266
+ | `resultIframeRef` | `{ current: HTMLIFrameElement \| null } \| null` | No | — | Results iframe box. Receives `open-pricing` and chart-resolution postMessages. |
267
+ | `isShowScanButton` | `boolean` | No | `true` | Show Scan inside the popup. |
268
+ | `isShowTrackerButton` | `boolean` | No | `true` | Show Pattern Tracker inside the popup. |
269
+ | `isShowScannerPopup` | `boolean` | No | `true` | Show the scanner popup. |
270
+ | `availableIntervals` | `string[]` | No | — | Resolutions allowed when drawing a pattern date range from embed selection. |
271
+ | `onScanClick` | `() => void` | No | — | Fired when the user clicks Scan, before login / config / scan logic. |
272
+
273
+ Default slot receives `{ chartRefs }` (`highlightBarsRef`, generated-candle study ids). The same object is exposed on the component instance as `chartRefs`.
274
+
275
+ ### Behavior
276
+
277
+ - Subscribes to chart readiness, resolution, symbol, visible range, drawings, and timescale-mark clicks.
278
+ - Draws a `date_range` shape for the scan window; bar count and exported candles drive the scanner.
279
+ - Posts selected candles to ICCandle’s cache, then calls `submitCallback` with the embed URL.
280
+ - Listens for `window` `message` events from the embed (replay, auth, news, pattern selection, navigation, loading).
281
+ - Clears persisted news mark keys (`tv:selected-news-events`, `tv:clicked-news-event`) when a scan starts.
282
+
283
+ ### Embed `postMessage` names
284
+
285
+ The widget handles JSON messages with a `name` (and optional `data`) from the results iframe:
286
+
287
+ | Name | Effect |
288
+ | ---- | ------ |
289
+ | `chart.play` | Replay / predicted candles on the chart. |
290
+ | `chart.stop` | Stop replay and restore live ticks. |
291
+ | `chart.requestResolution` | Re-post the current chart resolution to the iframe. |
292
+ | `selector.closeResult` | Invoke `onCloseResult`. |
293
+ | `selector.loading` | Toggle scanner loading state. |
294
+ | `auth.signIn` | Store `data.idToken` as `iccandle_token`. |
295
+ | `auth.signOut` | Remove `iccandle_token`. |
296
+ | `news.eventClicked` | Draw event marks / target window on the chart. |
297
+ | `news.back` / `news.backToSimilarEvents` | Clear event overlay / replay. |
298
+ | `pattern.classicPatternSelected` / `pattern.custom_pattern_selected` | Draw the compared pattern’s date range. |
299
+ | `pattern.clearClassicPatternSelected` / `pattern.clear_custom_pattern_selected` | Clear pattern overlay. |
300
+ | `nav.click` | Handle embed navigation (clears date range on `/news` routes). |
301
+
302
+ The host → embed helpers use a different shape: `{ type: "parent-origin" | "payment-success" | "open-pricing" | "chart-resolution", ... }`.
303
+
304
+ ## Optional: timescale marks (news / events)
305
+
306
+ If your datafeed implements `getTimescaleMarks`, you can surface stored events from `localStorage` (`tv:selected-news-events`, `tv:clicked-news-event`) as marks on the time axis. See [`src/lib/data-feed.ts`](src/lib/data-feed.ts) in this repo.
223
307
 
224
308
  ## Development (this repo)
225
309
 
226
310
  | Script | Command | Purpose |
227
311
  | ------ | ------- | ------- |
228
- | Dev demo | `pnpm dev` | Vite app with local charting library. |
229
- | Library build | `pnpm build` | Emits `dist/` (JS, CJS, bundled CSS injection, declarations). |
312
+ | Dev demo | `pnpm dev` | Vite app with a local charting library. |
313
+ | Library build | `pnpm build` | Emits `dist/` (ESM, CJS, injected CSS, declarations). |
230
314
  | App build | `pnpm build:app` | Full demo app build. |
231
315
 
232
316
  `prepublishOnly` runs `build` before publish.
package/dist/index.d.ts CHANGED
@@ -39,6 +39,8 @@ declare type __VLS_Props = {
39
39
  isShowScannerPopup?: boolean;
40
40
  /** Chart resolutions allowed for pattern date-range drawing. */
41
41
  availableIntervals?: string[];
42
+ /** Called when the user clicks Scan in the scanner popup. */
43
+ onScanClick?: () => void;
42
44
  };
43
45
 
44
46
  declare function __VLS_template(): {
@@ -120,6 +122,8 @@ export declare type WidgetIccandleProps = {
120
122
  isShowScannerPopup?: boolean;
121
123
  /** Chart resolutions allowed for pattern date-range drawing. */
122
124
  availableIntervals?: string[];
125
+ /** Called when the user clicks Scan in the scanner popup. */
126
+ onScanClick?: () => void;
123
127
  };
124
128
 
125
129
  export declare type WidgetLanguage = (typeof WIDGET_LANGUAGES)[number];