@livo-build/charts 0.2.2 → 0.2.4

package/dist/react/ui.d.ts

@@ -1,5 +1,5 @@
-import type { CSSProperties } from "react";
-import type { ChartTheme } from "../core/types";
+import type { CSSProperties, ReactNode } from "react";
+import type { ChartTheme, ChartType, DrawMode } from "../core/types";
 /**
  * Toolbar/legend styling derived from the chart {@link ChartTheme}, so the chrome tracks
  * the chart instead of being hardcoded dark. Active buttons reuse the crosshair-pill
@@ -11,3 +11,14 @@ export declare function toolbarUi(theme: ChartTheme): {
     barStyle: CSSProperties;
     muted: string;
 };
+/**
+ * A centered loading overlay (themed SVG spinner + label) for the feed charts — render it
+ * over the chart host while the first page is in flight. Absolutely positioned (the host's
+ * wrapper is `position: relative`), pointer-events-none, and self-styled (no CSS needed).
+ * The spinner animates via inline SVG SMIL, so it works without a stylesheet or @keyframes.
+ */
+export declare function loadingOverlay(theme: ChartTheme, label?: string): ReactNode;
+/** The chart-type button group: candle / line / baseline / Heikin-Ashi. */
+export declare function typeButtons(theme: ChartTheme, type: ChartType, setType: (t: ChartType) => void): ReactNode;
+/** The drawing-tool button group: trendline / h-line / fib / rectangle / clear. */
+export declare function drawButtons(theme: ChartTheme, mode: DrawMode, setMode: (fn: (prev: DrawMode) => DrawMode) => void, onClear: () => void): ReactNode;

package/dist/react/ui.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Toolbar/legend styling derived from the chart {@link ChartTheme}, so the chrome tracks
  * the chart instead of being hardcoded dark. Active buttons reuse the crosshair-pill
@@ -27,3 +28,48 @@ export function toolbarUi(theme) {
     };
     return { btn, sepStyle, barStyle, muted: theme.axis };
 }
+/**
+ * A centered loading overlay (themed SVG spinner + label) for the feed charts — render it
+ * over the chart host while the first page is in flight. Absolutely positioned (the host's
+ * wrapper is `position: relative`), pointer-events-none, and self-styled (no CSS needed).
+ * The spinner animates via inline SVG SMIL, so it works without a stylesheet or @keyframes.
+ */
+export function loadingOverlay(theme, label = "Loading…") {
+    return (_jsxs("div", { style: {
+            position: "absolute",
+            inset: 0,
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: 11,
+            pointerEvents: "none",
+            color: theme.axis,
+            fontFamily: "ui-monospace, monospace",
+            fontSize: 12,
+            letterSpacing: 0.3,
+        }, children: [_jsxs("svg", { width: "32", height: "32", viewBox: "0 0 50 50", style: { display: "block" }, "aria-label": "loading", children: [_jsx("circle", { cx: "25", cy: "25", r: "20", fill: "none", stroke: theme.grid, strokeWidth: "5" }), _jsx("path", { d: "M25 5 a 20 20 0 0 1 20 20", fill: "none", stroke: theme.line, strokeWidth: "5", strokeLinecap: "round", children: _jsx("animateTransform", { attributeName: "transform", type: "rotate", from: "0 25 25", to: "360 25 25", dur: "0.85s", repeatCount: "indefinite" }) })] }), _jsx("span", { style: { opacity: 0.75 }, children: label })] }));
+}
+/** The chart-type button group: candle / line / baseline / Heikin-Ashi. */
+export function typeButtons(theme, type, setType) {
+    const { btn } = toolbarUi(theme);
+    const items = [
+        ["candle", "▮▯", "Candles"],
+        ["line", "╱", "Line"],
+        ["baseline", "⎓", "Baseline area"],
+        ["heikin", "HA", "Heikin-Ashi"],
+    ];
+    return items.map(([t, label, title]) => (_jsx("button", { style: btn(type === t), title: title, onClick: () => setType(t), children: label }, t)));
+}
+/** The drawing-tool button group: trendline / h-line / fib / rectangle / clear. */
+export function drawButtons(theme, mode, setMode, onClear) {
+    const { btn } = toolbarUi(theme);
+    const tool = (m, label, title) => (_jsx("button", { style: btn(mode === m), title: title, onClick: () => setMode((prev) => (prev === m ? "none" : m)), children: label }, m));
+    return [
+        tool("trendline", "↗", "Draw trendline (drag)"),
+        tool("hline", "—", "Draw horizontal line (click)"),
+        tool("fib", "fib", "Fibonacci retracement (drag)"),
+        tool("rect", "▭", "Rectangle (drag)"),
+        _jsx("button", { style: btn(false), title: "Clear drawings (double-click a line to delete one)", onClick: onClear, children: "\u232B" }, "clear"),
+    ];
+}

package/dist/react.d.ts

@@ -2,3 +2,7 @@ export { PriceChart } from "./react/PriceChart";
 export type { PriceChartProps } from "./react/PriceChart";
 export { HyperliquidChart } from "./react/HyperliquidChart";
 export type { HyperliquidChartProps } from "./react/HyperliquidChart";
+export { PolymarketChart } from "./react/PolymarketChart";
+export type { PolymarketChartProps } from "./react/PolymarketChart";
+export { SignalsChart } from "./react/SignalsChart";
+export type { SignalsChartProps } from "./react/SignalsChart";

package/dist/react.js

@@ -1,3 +1,5 @@
 // livo-charts — React bindings. Import from `@livo-build/charts/react`.
 export { PriceChart } from "./react/PriceChart";
 export { HyperliquidChart } from "./react/HyperliquidChart";
+export { PolymarketChart } from "./react/PolymarketChart";
+export { SignalsChart } from "./react/SignalsChart";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@livo-build/charts",
-  "version": "0.2.2",
-  "description": "livo-charts — a lightweight, dependency-free canvas charting library (candlesticks, zoom/pan, crosshair, moving-average indicators, live Hyperliquid feed) with a framework-agnostic core and a React wrapper.",
+  "version": "0.2.4",
+  "description": "livo-charts — a lightweight, dependency-free canvas charting library (candlesticks/line/baseline/Heikin-Ashi, zoom/pan, crosshair, MA/RSI/MACD/Stochastic/ATR indicators, volume profile, drawing tools, and live Hyperliquid/Polymarket/Signal-Radar feeds) with a framework-agnostic core and a React wrapper.",
   "type": "module",
   "license": "UNLICENSED",
   "main": "./dist/index.js",