@mmflow/react 0.1.0

package/dist/index.cjs

@@ -0,0 +1,91 @@
+'use strict';
+
+var react = require('react');
+var charts = require('@mmflow/charts');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/Chart.tsx
+var Chart = react.forwardRef(function Chart2(props, ref) {
+  const containerRef = react.useRef(null);
+  const apiRef = react.useRef(null);
+  react.useImperativeHandle(
+    ref,
+    () => ({
+      get api() {
+        return apiRef.current;
+      },
+      screenshot: () => apiRef.current?.takeScreenshot() ?? null
+    }),
+    []
+  );
+  react.useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const api = charts.createChart({
+      container,
+      theme: props.theme,
+      autosize: props.autosize
+    });
+    apiRef.current = api;
+    if (props.candles !== false) api.addCandleSeries();
+    if (props.volume) api.addVolumeSeries();
+    for (const inst of props.indicators ?? []) api.addIndicator(inst);
+    props.onReady?.(api);
+    return () => {
+      api.dispose();
+      apiRef.current = null;
+    };
+  }, []);
+  react.useEffect(() => {
+    const api = apiRef.current;
+    if (!api || !props.feed) return;
+    void api.setData(props.feed, {
+      symbol: props.symbol,
+      resolution: props.resolution
+    });
+  }, [props.feed, props.symbol, props.resolution]);
+  react.useEffect(() => {
+    if (props.theme) apiRef.current?.applyTheme(props.theme);
+  }, [props.theme]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: props.className,
+      style: { width: "100%", height: "100%", ...props.style }
+    }
+  );
+});
+function useIndicator(factory, overrides) {
+  const key = overrides ? JSON.stringify(overrides) : "";
+  return react.useMemo(() => factory(overrides), [factory, key]);
+}
+
+Object.defineProperty(exports, "composeFeeds", {
+  enumerable: true,
+  get: function () { return charts.composeFeeds; }
+});
+Object.defineProperty(exports, "createDataFeed", {
+  enumerable: true,
+  get: function () { return charts.createDataFeed; }
+});
+Object.defineProperty(exports, "defineIndicator", {
+  enumerable: true,
+  get: function () { return charts.defineIndicator; }
+});
+Object.defineProperty(exports, "defineTheme", {
+  enumerable: true,
+  get: function () { return charts.defineTheme; }
+});
+Object.defineProperty(exports, "getControls", {
+  enumerable: true,
+  get: function () { return charts.getControls; }
+});
+Object.defineProperty(exports, "resolveTheme", {
+  enumerable: true,
+  get: function () { return charts.resolveTheme; }
+});
+exports.Chart = Chart;
+exports.useIndicator = useIndicator;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Chart.tsx","../src/useIndicator.ts"],"names":["forwardRef","Chart","useRef","useImperativeHandle","useEffect","createChart","jsx","useMemo"],"mappings":";;;;;;;AAmDO,IAAM,KAAA,GAAQA,gBAAA,CAAoC,SAASC,MAAAA,CAChE,OACA,GAAA,EACA;AACA,EAAA,MAAM,YAAA,GAAeC,aAAuB,IAAI,CAAA;AAChD,EAAA,MAAM,MAAA,GAASA,aAAyB,IAAI,CAAA;AAE5C,EAAAC,yBAAA;AAAA,IACE,GAAA;AAAA,IACA,OAAO;AAAA,MACL,IAAI,GAAA,GAAM;AACR,QAAA,OAAO,MAAA,CAAO,OAAA;AAAA,MAChB,CAAA;AAAA,MACA,UAAA,EAAY,MAAM,MAAA,CAAO,OAAA,EAAS,gBAAe,IAAK;AAAA,KACxD,CAAA;AAAA,IACA;AAAC,GACH;AAKA,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,YAAY,YAAA,CAAa,OAAA;AAC/B,IAAA,IAAI,CAAC,SAAA,EAAW;AAChB,IAAA,MAAM,MAAMC,kBAAA,CAAY;AAAA,MACtB,SAAA;AAAA,MACA,OAAO,KAAA,CAAM,KAAA;AAAA,MACb,UAAU,KAAA,CAAM;AAAA,KACjB,CAAA;AACD,IAAA,MAAA,CAAO,OAAA,GAAU,GAAA;AACjB,IAAA,IAAI,KAAA,CAAM,OAAA,KAAY,KAAA,EAAO,GAAA,CAAI,eAAA,EAAgB;AACjD,IAAA,IAAI,KAAA,CAAM,MAAA,EAAQ,GAAA,CAAI,eAAA,EAAgB;AACtC,IAAA,KAAA,MAAW,QAAQ,KAAA,CAAM,UAAA,IAAc,EAAC,EAAG,GAAA,CAAI,aAAa,IAAI,CAAA;AAChE,IAAA,KAAA,CAAM,UAAU,GAAG,CAAA;AACnB,IAAA,OAAO,MAAM;AACX,MAAA,GAAA,CAAI,OAAA,EAAQ;AACZ,MAAA,MAAA,CAAO,OAAA,GAAU,IAAA;AAAA,IACnB,CAAA;AAAA,EAGF,CAAA,EAAG,EAAE,CAAA;AAGL,EAAAD,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,MAAM,MAAA,CAAO,OAAA;AACnB,IAAA,IAAI,CAAC,GAAA,IAAO,CAAC,KAAA,CAAM,IAAA,EAAM;AACzB,IAAA,KAAK,GAAA,CAAI,OAAA,CAAQ,KAAA,CAAM,IAAA,EAAM;AAAA,MAC3B,QAAQ,KAAA,CAAM,MAAA;AAAA,MACd,YAAY,KAAA,CAAM;AAAA,KACnB,CAAA;AAAA,EACH,CAAA,EAAG,CAAC,KAAA,CAAM,IAAA,EAAM,MAAM,MAAA,EAAQ,KAAA,CAAM,UAAU,CAAC,CAAA;AAG/C,EAAAA,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,MAAM,KAAA,EAAO,MAAA,CAAO,OAAA,EAAS,UAAA,CAAW,MAAM,KAAK,CAAA;AAAA,EACzD,CAAA,EAAG,CAAC,KAAA,CAAM,KAAK,CAAC,CAAA;AAEhB,EAAA,uBACEE,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,YAAA;AAAA,MACL,WAAW,KAAA,CAAM,SAAA;AAAA,MACjB,KAAA,EAAO,EAAE,KAAA,EAAO,MAAA,EAAQ,QAAQ,MAAA,EAAQ,GAAG,MAAM,KAAA;AAAM;AAAA,GACzD;AAEJ,CAAC;ACxGM,SAAS,YAAA,CACd,SACA,SAAA,EACmB;AACnB,EAAA,MAAM,GAAA,GAAM,SAAA,GAAY,IAAA,CAAK,SAAA,CAAU,SAAS,CAAA,GAAI,EAAA;AAEpD,EAAA,OAAOC,aAAA,CAAQ,MAAM,OAAA,CAAQ,SAAS,GAAG,CAAC,OAAA,EAAS,GAAG,CAAC,CAAA;AACzD","file":"index.cjs","sourcesContent":["\"use client\";\n\nimport {\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  type CSSProperties,\n} from \"react\";\nimport {\n  createChart,\n  type IChartApi,\n  type DataFeed,\n  type IndicatorInstance,\n  type ThemeTokens,\n} from \"@mmflow/charts\";\n\nexport interface ChartProps {\n  /** Bring-your-own-data feed. When provided with `symbol`, the chart loads\n   *  history and subscribes to live updates automatically. */\n  feed?: DataFeed;\n  symbol?: string;\n  resolution?: string; // default \"1m\"\n  /** White-label theme tokens (hex + font). Applied live on change. */\n  theme?: ThemeTokens;\n  /** Indicators to mount on first render (overlay or sub-pane is decided by\n   *  each instance's `overlay` flag). */\n  indicators?: IndicatorInstance[];\n  /** Add the default candle series (default true). */\n  candles?: boolean;\n  /** Add a volume sub-pane. */\n  volume?: boolean;\n  autosize?: boolean;\n  className?: string;\n  style?: CSSProperties;\n  /** Called once the engine is constructed — escape hatch to the imperative\n   *  API for anything the declarative props don't cover. */\n  onReady?: (api: IChartApi) => void;\n}\n\nexport interface ChartHandle {\n  /** The live imperative chart API (null before mount / after unmount). */\n  api: IChartApi | null;\n  screenshot: () => HTMLCanvasElement | null;\n}\n\n/**\n * A declarative, typed React wrapper over the @mmflow/charts engine. The\n * engine is client-only (WebGL); in Next.js App Router, render this in a\n * client component or via `next/dynamic({ ssr: false })`.\n */\nexport const Chart = forwardRef<ChartHandle, ChartProps>(function Chart(\n  props,\n  ref,\n) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const apiRef = useRef<IChartApi | null>(null);\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      get api() {\n        return apiRef.current;\n      },\n      screenshot: () => apiRef.current?.takeScreenshot() ?? null,\n    }),\n    [],\n  );\n\n  // Construct the engine once on mount; tear it down on unmount. Series and\n  // indicators declared at mount time are added here. Strict-mode double\n  // invoke is safe — dispose() fully releases the GL context.\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n    const api = createChart({\n      container,\n      theme: props.theme,\n      autosize: props.autosize,\n    });\n    apiRef.current = api;\n    if (props.candles !== false) api.addCandleSeries();\n    if (props.volume) api.addVolumeSeries();\n    for (const inst of props.indicators ?? []) api.addIndicator(inst);\n    props.onReady?.(api);\n    return () => {\n      api.dispose();\n      apiRef.current = null;\n    };\n    // Intentionally mount-once: live updates flow through the effects below.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  // (Re)load data whenever the feed/symbol/resolution changes.\n  useEffect(() => {\n    const api = apiRef.current;\n    if (!api || !props.feed) return;\n    void api.setData(props.feed, {\n      symbol: props.symbol,\n      resolution: props.resolution,\n    });\n  }, [props.feed, props.symbol, props.resolution]);\n\n  // Re-skin live.\n  useEffect(() => {\n    if (props.theme) apiRef.current?.applyTheme(props.theme);\n  }, [props.theme]);\n\n  return (\n    <div\n      ref={containerRef}\n      className={props.className}\n      style={{ width: \"100%\", height: \"100%\", ...props.style }}\n    />\n  );\n});\n","import { useMemo } from \"react\";\nimport type { IndicatorInstance } from \"@mmflow/charts\";\n\n/**\n * Memoize an indicator instance from a `defineIndicator` factory so it isn't\n * rebuilt on every render. Re-evaluates only when the overrides change.\n *\n *   const myVWAP = defineIndicator({ ... });\n *   const inst = useIndicator(myVWAP, { period: 20 });\n *   <Chart indicators={[inst]} ... />\n */\nexport function useIndicator<O extends Record<string, unknown>>(\n  factory: (overrides?: O) => IndicatorInstance,\n  overrides?: O,\n): IndicatorInstance {\n  const key = overrides ? JSON.stringify(overrides) : \"\";\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  return useMemo(() => factory(overrides), [factory, key]);\n}\n"]}

package/dist/index.d.cts

@@ -0,0 +1,50 @@
+import * as react from 'react';
+import { CSSProperties } from 'react';
+import { DataFeed, ThemeTokens, IndicatorInstance, IChartApi } from '@mmflow/charts';
+export { Candle, CandleRange, ControlDescriptor, DataFeed, FeedUpdate, IChartApi, IndicatorDefinition, IndicatorInstance, ParamSpec, ThemeTokens, composeFeeds, createDataFeed, defineIndicator, defineTheme, getControls, resolveTheme } from '@mmflow/charts';
+
+interface ChartProps {
+    /** Bring-your-own-data feed. When provided with `symbol`, the chart loads
+     *  history and subscribes to live updates automatically. */
+    feed?: DataFeed;
+    symbol?: string;
+    resolution?: string;
+    /** White-label theme tokens (hex + font). Applied live on change. */
+    theme?: ThemeTokens;
+    /** Indicators to mount on first render (overlay or sub-pane is decided by
+     *  each instance's `overlay` flag). */
+    indicators?: IndicatorInstance[];
+    /** Add the default candle series (default true). */
+    candles?: boolean;
+    /** Add a volume sub-pane. */
+    volume?: boolean;
+    autosize?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    /** Called once the engine is constructed — escape hatch to the imperative
+     *  API for anything the declarative props don't cover. */
+    onReady?: (api: IChartApi) => void;
+}
+interface ChartHandle {
+    /** The live imperative chart API (null before mount / after unmount). */
+    api: IChartApi | null;
+    screenshot: () => HTMLCanvasElement | null;
+}
+/**
+ * A declarative, typed React wrapper over the @mmflow/charts engine. The
+ * engine is client-only (WebGL); in Next.js App Router, render this in a
+ * client component or via `next/dynamic({ ssr: false })`.
+ */
+declare const Chart: react.ForwardRefExoticComponent<ChartProps & react.RefAttributes<ChartHandle>>;
+
+/**
+ * Memoize an indicator instance from a `defineIndicator` factory so it isn't
+ * rebuilt on every render. Re-evaluates only when the overrides change.
+ *
+ *   const myVWAP = defineIndicator({ ... });
+ *   const inst = useIndicator(myVWAP, { period: 20 });
+ *   <Chart indicators={[inst]} ... />
+ */
+declare function useIndicator<O extends Record<string, unknown>>(factory: (overrides?: O) => IndicatorInstance, overrides?: O): IndicatorInstance;
+
+export { Chart, type ChartHandle, type ChartProps, useIndicator };

package/dist/index.d.ts

@@ -0,0 +1,50 @@
+import * as react from 'react';
+import { CSSProperties } from 'react';
+import { DataFeed, ThemeTokens, IndicatorInstance, IChartApi } from '@mmflow/charts';
+export { Candle, CandleRange, ControlDescriptor, DataFeed, FeedUpdate, IChartApi, IndicatorDefinition, IndicatorInstance, ParamSpec, ThemeTokens, composeFeeds, createDataFeed, defineIndicator, defineTheme, getControls, resolveTheme } from '@mmflow/charts';
+
+interface ChartProps {
+    /** Bring-your-own-data feed. When provided with `symbol`, the chart loads
+     *  history and subscribes to live updates automatically. */
+    feed?: DataFeed;
+    symbol?: string;
+    resolution?: string;
+    /** White-label theme tokens (hex + font). Applied live on change. */
+    theme?: ThemeTokens;
+    /** Indicators to mount on first render (overlay or sub-pane is decided by
+     *  each instance's `overlay` flag). */
+    indicators?: IndicatorInstance[];
+    /** Add the default candle series (default true). */
+    candles?: boolean;
+    /** Add a volume sub-pane. */
+    volume?: boolean;
+    autosize?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    /** Called once the engine is constructed — escape hatch to the imperative
+     *  API for anything the declarative props don't cover. */
+    onReady?: (api: IChartApi) => void;
+}
+interface ChartHandle {
+    /** The live imperative chart API (null before mount / after unmount). */
+    api: IChartApi | null;
+    screenshot: () => HTMLCanvasElement | null;
+}
+/**
+ * A declarative, typed React wrapper over the @mmflow/charts engine. The
+ * engine is client-only (WebGL); in Next.js App Router, render this in a
+ * client component or via `next/dynamic({ ssr: false })`.
+ */
+declare const Chart: react.ForwardRefExoticComponent<ChartProps & react.RefAttributes<ChartHandle>>;
+
+/**
+ * Memoize an indicator instance from a `defineIndicator` factory so it isn't
+ * rebuilt on every render. Re-evaluates only when the overrides change.
+ *
+ *   const myVWAP = defineIndicator({ ... });
+ *   const inst = useIndicator(myVWAP, { period: 20 });
+ *   <Chart indicators={[inst]} ... />
+ */
+declare function useIndicator<O extends Record<string, unknown>>(factory: (overrides?: O) => IndicatorInstance, overrides?: O): IndicatorInstance;
+
+export { Chart, type ChartHandle, type ChartProps, useIndicator };

package/dist/index.js

@@ -0,0 +1,65 @@
+import { forwardRef, useRef, useImperativeHandle, useEffect, useMemo } from 'react';
+import { createChart } from '@mmflow/charts';
+export { composeFeeds, createDataFeed, defineIndicator, defineTheme, getControls, resolveTheme } from '@mmflow/charts';
+import { jsx } from 'react/jsx-runtime';
+
+// src/Chart.tsx
+var Chart = forwardRef(function Chart2(props, ref) {
+  const containerRef = useRef(null);
+  const apiRef = useRef(null);
+  useImperativeHandle(
+    ref,
+    () => ({
+      get api() {
+        return apiRef.current;
+      },
+      screenshot: () => apiRef.current?.takeScreenshot() ?? null
+    }),
+    []
+  );
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const api = createChart({
+      container,
+      theme: props.theme,
+      autosize: props.autosize
+    });
+    apiRef.current = api;
+    if (props.candles !== false) api.addCandleSeries();
+    if (props.volume) api.addVolumeSeries();
+    for (const inst of props.indicators ?? []) api.addIndicator(inst);
+    props.onReady?.(api);
+    return () => {
+      api.dispose();
+      apiRef.current = null;
+    };
+  }, []);
+  useEffect(() => {
+    const api = apiRef.current;
+    if (!api || !props.feed) return;
+    void api.setData(props.feed, {
+      symbol: props.symbol,
+      resolution: props.resolution
+    });
+  }, [props.feed, props.symbol, props.resolution]);
+  useEffect(() => {
+    if (props.theme) apiRef.current?.applyTheme(props.theme);
+  }, [props.theme]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: props.className,
+      style: { width: "100%", height: "100%", ...props.style }
+    }
+  );
+});
+function useIndicator(factory, overrides) {
+  const key = overrides ? JSON.stringify(overrides) : "";
+  return useMemo(() => factory(overrides), [factory, key]);
+}
+
+export { Chart, useIndicator };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Chart.tsx","../src/useIndicator.ts"],"names":["Chart"],"mappings":";;;;;;AAmDO,IAAM,KAAA,GAAQ,UAAA,CAAoC,SAASA,MAAAA,CAChE,OACA,GAAA,EACA;AACA,EAAA,MAAM,YAAA,GAAe,OAAuB,IAAI,CAAA;AAChD,EAAA,MAAM,MAAA,GAAS,OAAyB,IAAI,CAAA;AAE5C,EAAA,mBAAA;AAAA,IACE,GAAA;AAAA,IACA,OAAO;AAAA,MACL,IAAI,GAAA,GAAM;AACR,QAAA,OAAO,MAAA,CAAO,OAAA;AAAA,MAChB,CAAA;AAAA,MACA,UAAA,EAAY,MAAM,MAAA,CAAO,OAAA,EAAS,gBAAe,IAAK;AAAA,KACxD,CAAA;AAAA,IACA;AAAC,GACH;AAKA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,YAAY,YAAA,CAAa,OAAA;AAC/B,IAAA,IAAI,CAAC,SAAA,EAAW;AAChB,IAAA,MAAM,MAAM,WAAA,CAAY;AAAA,MACtB,SAAA;AAAA,MACA,OAAO,KAAA,CAAM,KAAA;AAAA,MACb,UAAU,KAAA,CAAM;AAAA,KACjB,CAAA;AACD,IAAA,MAAA,CAAO,OAAA,GAAU,GAAA;AACjB,IAAA,IAAI,KAAA,CAAM,OAAA,KAAY,KAAA,EAAO,GAAA,CAAI,eAAA,EAAgB;AACjD,IAAA,IAAI,KAAA,CAAM,MAAA,EAAQ,GAAA,CAAI,eAAA,EAAgB;AACtC,IAAA,KAAA,MAAW,QAAQ,KAAA,CAAM,UAAA,IAAc,EAAC,EAAG,GAAA,CAAI,aAAa,IAAI,CAAA;AAChE,IAAA,KAAA,CAAM,UAAU,GAAG,CAAA;AACnB,IAAA,OAAO,MAAM;AACX,MAAA,GAAA,CAAI,OAAA,EAAQ;AACZ,MAAA,MAAA,CAAO,OAAA,GAAU,IAAA;AAAA,IACnB,CAAA;AAAA,EAGF,CAAA,EAAG,EAAE,CAAA;AAGL,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,MAAM,MAAA,CAAO,OAAA;AACnB,IAAA,IAAI,CAAC,GAAA,IAAO,CAAC,KAAA,CAAM,IAAA,EAAM;AACzB,IAAA,KAAK,GAAA,CAAI,OAAA,CAAQ,KAAA,CAAM,IAAA,EAAM;AAAA,MAC3B,QAAQ,KAAA,CAAM,MAAA;AAAA,MACd,YAAY,KAAA,CAAM;AAAA,KACnB,CAAA;AAAA,EACH,CAAA,EAAG,CAAC,KAAA,CAAM,IAAA,EAAM,MAAM,MAAA,EAAQ,KAAA,CAAM,UAAU,CAAC,CAAA;AAG/C,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,MAAM,KAAA,EAAO,MAAA,CAAO,OAAA,EAAS,UAAA,CAAW,MAAM,KAAK,CAAA;AAAA,EACzD,CAAA,EAAG,CAAC,KAAA,CAAM,KAAK,CAAC,CAAA;AAEhB,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,YAAA;AAAA,MACL,WAAW,KAAA,CAAM,SAAA;AAAA,MACjB,KAAA,EAAO,EAAE,KAAA,EAAO,MAAA,EAAQ,QAAQ,MAAA,EAAQ,GAAG,MAAM,KAAA;AAAM;AAAA,GACzD;AAEJ,CAAC;ACxGM,SAAS,YAAA,CACd,SACA,SAAA,EACmB;AACnB,EAAA,MAAM,GAAA,GAAM,SAAA,GAAY,IAAA,CAAK,SAAA,CAAU,SAAS,CAAA,GAAI,EAAA;AAEpD,EAAA,OAAO,OAAA,CAAQ,MAAM,OAAA,CAAQ,SAAS,GAAG,CAAC,OAAA,EAAS,GAAG,CAAC,CAAA;AACzD","file":"index.js","sourcesContent":["\"use client\";\n\nimport {\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  type CSSProperties,\n} from \"react\";\nimport {\n  createChart,\n  type IChartApi,\n  type DataFeed,\n  type IndicatorInstance,\n  type ThemeTokens,\n} from \"@mmflow/charts\";\n\nexport interface ChartProps {\n  /** Bring-your-own-data feed. When provided with `symbol`, the chart loads\n   *  history and subscribes to live updates automatically. */\n  feed?: DataFeed;\n  symbol?: string;\n  resolution?: string; // default \"1m\"\n  /** White-label theme tokens (hex + font). Applied live on change. */\n  theme?: ThemeTokens;\n  /** Indicators to mount on first render (overlay or sub-pane is decided by\n   *  each instance's `overlay` flag). */\n  indicators?: IndicatorInstance[];\n  /** Add the default candle series (default true). */\n  candles?: boolean;\n  /** Add a volume sub-pane. */\n  volume?: boolean;\n  autosize?: boolean;\n  className?: string;\n  style?: CSSProperties;\n  /** Called once the engine is constructed — escape hatch to the imperative\n   *  API for anything the declarative props don't cover. */\n  onReady?: (api: IChartApi) => void;\n}\n\nexport interface ChartHandle {\n  /** The live imperative chart API (null before mount / after unmount). */\n  api: IChartApi | null;\n  screenshot: () => HTMLCanvasElement | null;\n}\n\n/**\n * A declarative, typed React wrapper over the @mmflow/charts engine. The\n * engine is client-only (WebGL); in Next.js App Router, render this in a\n * client component or via `next/dynamic({ ssr: false })`.\n */\nexport const Chart = forwardRef<ChartHandle, ChartProps>(function Chart(\n  props,\n  ref,\n) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const apiRef = useRef<IChartApi | null>(null);\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      get api() {\n        return apiRef.current;\n      },\n      screenshot: () => apiRef.current?.takeScreenshot() ?? null,\n    }),\n    [],\n  );\n\n  // Construct the engine once on mount; tear it down on unmount. Series and\n  // indicators declared at mount time are added here. Strict-mode double\n  // invoke is safe — dispose() fully releases the GL context.\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n    const api = createChart({\n      container,\n      theme: props.theme,\n      autosize: props.autosize,\n    });\n    apiRef.current = api;\n    if (props.candles !== false) api.addCandleSeries();\n    if (props.volume) api.addVolumeSeries();\n    for (const inst of props.indicators ?? []) api.addIndicator(inst);\n    props.onReady?.(api);\n    return () => {\n      api.dispose();\n      apiRef.current = null;\n    };\n    // Intentionally mount-once: live updates flow through the effects below.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  // (Re)load data whenever the feed/symbol/resolution changes.\n  useEffect(() => {\n    const api = apiRef.current;\n    if (!api || !props.feed) return;\n    void api.setData(props.feed, {\n      symbol: props.symbol,\n      resolution: props.resolution,\n    });\n  }, [props.feed, props.symbol, props.resolution]);\n\n  // Re-skin live.\n  useEffect(() => {\n    if (props.theme) apiRef.current?.applyTheme(props.theme);\n  }, [props.theme]);\n\n  return (\n    <div\n      ref={containerRef}\n      className={props.className}\n      style={{ width: \"100%\", height: \"100%\", ...props.style }}\n    />\n  );\n});\n","import { useMemo } from \"react\";\nimport type { IndicatorInstance } from \"@mmflow/charts\";\n\n/**\n * Memoize an indicator instance from a `defineIndicator` factory so it isn't\n * rebuilt on every render. Re-evaluates only when the overrides change.\n *\n *   const myVWAP = defineIndicator({ ... });\n *   const inst = useIndicator(myVWAP, { period: 20 });\n *   <Chart indicators={[inst]} ... />\n */\nexport function useIndicator<O extends Record<string, unknown>>(\n  factory: (overrides?: O) => IndicatorInstance,\n  overrides?: O,\n): IndicatorInstance {\n  const key = overrides ? JSON.stringify(overrides) : \"\";\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  return useMemo(() => factory(overrides), [factory, key]);\n}\n"]}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@mmflow/react",
+  "version": "0.1.0",
+  "description": "React bindings for @mmflow/charts — a typed <Chart/> component with bring-your-own-data feeds, declarative custom indicators, and white-label theming.",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@mmflow/charts": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts --treeshake --external react --external @mmflow/charts",
+    "typecheck": "tsc --noEmit"
+  }
+}