@forgecharts/sdk 1.5.24 → 1.5.26

package/dist/forgecharts.css

@@ -1554,6 +1554,19 @@ select {
   position: relative;
 }
 
+/* Build identity in the status bar. Muted and monospace so it reads as
+   metadata rather than a control, and never competes with the toolbar
+   buttons beside it. */
+.bottom-bar-version {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 10px;
+  line-height: 1;
+  padding: 0 6px 0 2px;
+  opacity: 0.5;
+  user-select: text;
+  white-space: nowrap;
+}
+
 .bottom-bar-right {
   display: flex;
   align-items: center;

package/dist/index.js

@@ -1,5 +1,5 @@
 import { TextStyle, Application, Container, Graphics, Text, FillGradient, CanvasTextMetrics } from 'pixi.js';
-import { forwardRef, useRef, useState, useImperativeHandle, useEffect, useCallback, createContext, useMemo, useContext } from 'react';
+import { forwardRef, useRef, useState, useEffect, useImperativeHandle, useCallback, createContext, useMemo, useContext } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import ReactDOM from 'react-dom';
 
@@ -7931,9 +7931,6 @@ var PixiTradingRenderer = class {
       } else {
         this._lineGfx.moveTo(0, y).lineTo(plotWidth, y).stroke({ color, width: lineCrisp.width, alpha });
       }
-      if (isDraggableRole(order.role)) {
-        this._drawDragHandle(plotWidth - 26, y, color, alpha);
-      }
       const boxY = y - LINE_H / 2;
       const roleStr = orderRoleLabel(order.role);
       const text = roleStr ? `${roleStr} ${order.qty}` : `${order.side.toUpperCase()} ${order.qty}`;
@@ -7942,6 +7939,9 @@ var PixiTradingRenderer = class {
       const pillX = Math.max(0, plotWidth - LABEL_GAP - pillW);
       this._boxGfx.roundRect(pillX, boxY, pillW, LINE_H, PILL_R).fill({ color, alpha });
       labelIdx = this._drawLabel(text, pillX + pillW / 2, y, labelIdx, labelStyle, true);
+      if (isDraggableRole(order.role)) {
+        this._drawPillDragArrows(pillX + pillW / 2, boxY, color, alpha);
+      }
       this._boxGfx.rect(plotWidth, boxY, psWidth, LINE_H).fill({ color, alpha });
       labelIdx = this._drawLabel(order.price.toFixed(2), plotWidth + 4, y, labelIdx, labelStyle);
       if (isDraggableRole(order.role)) {
@@ -8073,12 +8073,19 @@ var PixiTradingRenderer = class {
    * with an up and a down chevron, centred on the line. Signals "drag me
    * vertically" the way TradingView's order-line handles do.
    */
-  _drawDragHandle(x, y, color, alpha) {
-    const s = 4;
-    const gap = 3;
-    this._boxGfx.roundRect(x - 8, y - 13, 16, 26, 4).fill({ color, alpha: alpha * 0.18 });
-    this._boxGfx.poly([x, y - gap - 2 * s, x + s, y - gap, x - s, y - gap]).fill({ color, alpha });
-    this._boxGfx.poly([x, y + gap + 2 * s, x + s, y + gap, x - s, y + gap]).fill({ color, alpha });
+  /**
+   * Up/down chevrons hugging a label pill, marking it draggable.
+   *
+   * Anchored to the pill rather than a fixed x so the affordance stays with
+   * the label wherever it is laid out.
+   */
+  _drawPillDragArrows(cx, boxY, color, alpha) {
+    const s = 3.5;
+    const gap = 2;
+    const upBase = boxY - gap;
+    this._boxGfx.poly([cx, upBase - s * 1.6, cx + s, upBase, cx - s, upBase]).fill({ color, alpha: alpha * 0.9 });
+    const downBase = boxY + LINE_H + gap;
+    this._boxGfx.poly([cx, downBase + s * 1.6, cx + s, downBase, cx - s, downBase]).fill({ color, alpha: alpha * 0.9 });
   }
   /** Draws or reuses a label at the given position and returns the next label index. */
   _drawLabel(text, x, y, labelIdx, style, centered) {
@@ -23068,6 +23075,19 @@ var ChartCanvas = forwardRef(
     );
     const drawOverlayRef = useRef(null);
     const [priceFraction, setPriceFraction] = useState(priceFractionProp ?? 0.6);
+    const [effectiveTheme, setEffectiveTheme] = useState(theme);
+    useEffect(() => {
+      setEffectiveTheme(theme);
+    }, [theme]);
+    useEffect(() => {
+      const chart = chartRef.current;
+      if (!chart) return;
+      const onThemeChanged = ({ theme: t }) => setEffectiveTheme(t);
+      chart.on("themeChanged", onThemeChanged);
+      return () => {
+        chart.off?.("themeChanged", onThemeChanged);
+      };
+    }, [dataBlocked]);
     const selectPointerToolRef = useRef(() => {
     });
     useImperativeHandle(ref, () => ({
@@ -24190,29 +24210,41 @@ var ChartCanvas = forwardRef(
               },
               children: [
                 /* @__PURE__ */ jsx(
-                  "a",
+                  "div",
                   {
-                    href: "https://forgecharts.com",
-                    target: "_blank",
-                    rel: "noopener noreferrer",
                     style: {
                       position: "absolute",
                       bottom: 38,
                       left: 6,
                       zIndex: 5,
-                      lineHeight: 0
+                      display: "flex",
+                      flexDirection: "column",
+                      alignItems: "flex-start",
+                      gap: 1,
+                      // Never intercept clicks meant for the chart; the logo re-enables
+                      // pointer events on itself below.
+                      pointerEvents: "none"
                     },
                     children: /* @__PURE__ */ jsx(
-                      "img",
+                      "a",
                       {
-                        src: theme === "light" ? logo_light_default : logo_dark_default,
-                        alt: "ForgeCharts",
-                        style: {
-                          height: 48,
-                          width: "auto",
-                          opacity: 0.55,
-                          userSelect: "none"
-                        }
+                        href: "https://forgecharts.com",
+                        target: "_blank",
+                        rel: "noopener noreferrer",
+                        style: { lineHeight: 0, pointerEvents: "auto" },
+                        children: /* @__PURE__ */ jsx(
+                          "img",
+                          {
+                            src: effectiveTheme === "light" ? logo_light_default : logo_dark_default,
+                            alt: "ForgeCharts",
+                            style: {
+                              height: 48,
+                              width: "auto",
+                              opacity: 0.55,
+                              userSelect: "none"
+                            }
+                          }
+                        )
                       }
                     )
                   }