@forgecharts/sdk 1.1.23 → 1.1.27

package/src/react/trading/TradingBridge.ts

@@ -0,0 +1,156 @@
+/**
+ * TradingBridge — host-side trading callback contract for Unmanaged mode.
+ *
+ * When a chart user performs a trading action (drag-to-place, cancel, bracket
+ * adjust, etc.) the chart emits a typed Intent and defers all confirmation to
+ * the host.  The chart NEVER self-confirms order state.  The host must push
+ * the resulting confirmed ChartOrder back via TradingOverlayStore.
+ *
+ * Usage (consumer / host app):
+ *
+ * ```tsx
+ * import type { TradingBridgeCallbacks } from '@forgecharts/sdk/react';
+ *
+ * const bridge: TradingBridgeCallbacks = {
+ *   onPlaceOrderIntent:    (intent) => myBroker.placeOrder(intent),
+ *   onModifyOrderIntent:   (intent) => myBroker.modifyOrder(intent),
+ *   onCancelOrderIntent:   (intent) => myBroker.cancelOrder(intent),
+ *   onBracketAdjustIntent: (intent) => myBroker.adjustBracket(intent),
+ * };
+ *
+ * <ChartCanvas
+ *   symbol="BTCUSDT"
+ *   timeframe="1h"
+ *   tradingBridge={bridge}
+ * />
+ * ```
+ *
+ * Debug logging:
+ * Wrap your callbacks with `createTradingBridgeLogger` to get structured
+ * console output in development:
+ *
+ * ```ts
+ * tradingBridge={createTradingBridgeLogger(bridge, 'MyChart')}
+ * ```
+ */
+
+import type {
+  PlaceOrderIntent,
+  ModifyOrderIntent,
+  CancelOrderIntent,
+  BracketAdjustIntent,
+} from '@forgecharts/types';
+
+// ─── Public callback contract ─────────────────────────────────────────────────
+
+/**
+ * Injectable callback bag for the chart-to-host trading bridge.
+ *
+ * All callbacks are optional — omit any you do not handle.  The chart will
+ * still emit the intent but silently discard it if the corresponding callback
+ * is not provided.
+ *
+ * The return types are `void | Promise<void>` so hosts can fire-and-forget or
+ * await before side-effects.  The chart does not await the returned promise —
+ * confirmation always flows back through `TradingOverlayStore`.
+ */
+export interface TradingBridgeCallbacks {
+  /**
+   * Called when the user triggers a new order placement.
+   * The host should validate, forward to the broker, and then call
+   * `overlayStore.upsertOrder(confirmedOrder)` once acknowledged.
+   */
+  onPlaceOrderIntent?:    (intent: PlaceOrderIntent)    => void | Promise<void>;
+
+  /**
+   * Called when the user drags an order line to a new price or edits it via UI.
+   * The host should send the modification to the broker and update the overlay
+   * store with the modified order.
+   */
+  onModifyOrderIntent?:   (intent: ModifyOrderIntent)   => void | Promise<void>;
+
+  /**
+   * Called when the user clicks the cancel control on an order line.
+   * The host should cancel at the venue and call `overlayStore.removeOrder(id)`.
+   */
+  onCancelOrderIntent?:   (intent: CancelOrderIntent)   => void | Promise<void>;
+
+  /**
+   * Called when the user drags a bracket leg (stop-loss or take-profit).
+   * The host adjusts both legs atomically and updates the overlay store.
+   */
+  onBracketAdjustIntent?: (intent: BracketAdjustIntent) => void | Promise<void>;
+}
+
+// ─── Debug logger ─────────────────────────────────────────────────────────────
+
+/**
+ * Wraps a `TradingBridgeCallbacks` object and logs all emitted intents to the
+ * console.  Only active when `process.env.NODE_ENV !== 'production'`.
+ *
+ * @param callbacks  The real callbacks to delegate to after logging.
+ * @param label      Optional label prepended to log messages (e.g. chart id or symbol).
+ * @returns A new `TradingBridgeCallbacks` that logs then delegates.
+ *
+ * @example
+ * ```ts
+ * tradingBridge={createTradingBridgeLogger(bridge, 'BTCUSDT')}
+ * ```
+ */
+export function createTradingBridgeLogger(
+  callbacks: TradingBridgeCallbacks,
+  label?: string,
+): TradingBridgeCallbacks {
+  if (process.env.NODE_ENV === 'production') return callbacks;
+
+  const tag = label ? `[TradingBridge:${label}]` : '[TradingBridge]';
+
+  return {
+    onPlaceOrderIntent: (intent) => {
+      console.debug(
+        `${tag} PLACE  side=%s type=%s qty=%s price=%s stopPrice=%s correlationId=%s`,
+        intent.side,
+        intent.orderType,
+        intent.qty,
+        intent.limitPrice ?? '—',
+        intent.stopPrice  ?? '—',
+        intent.correlationId,
+        intent,
+      );
+      return callbacks.onPlaceOrderIntent?.(intent);
+    },
+
+    onModifyOrderIntent: (intent) => {
+      console.debug(
+        `${tag} MODIFY orderId=%s limitPrice=%s stopPrice=%s qty=%s`,
+        intent.orderId,
+        intent.limitPrice ?? '—',
+        intent.stopPrice  ?? '—',
+        intent.qty        ?? '—',
+        intent,
+      );
+      return callbacks.onModifyOrderIntent?.(intent);
+    },
+
+    onCancelOrderIntent: (intent) => {
+      console.debug(
+        `${tag} CANCEL orderId=%s symbol=%s`,
+        intent.orderId,
+        intent.symbol,
+        intent,
+      );
+      return callbacks.onCancelOrderIntent?.(intent);
+    },
+
+    onBracketAdjustIntent: (intent) => {
+      console.debug(
+        `${tag} BRACKET_ADJUST entry=%s sl=%s tp=%s`,
+        intent.entryOrderId,
+        intent.stopLossPrice    ?? '—',
+        intent.takeProfitPrice  ?? '—',
+        intent,
+      );
+      return callbacks.onBracketAdjustIntent?.(intent);
+    },
+  };
+}

package/src/react/workspace/ChartWorkspace.tsx

@@ -0,0 +1,228 @@
+/**
+ * ChartWorkspace — structural layout assembly.
+ *
+ * Renders: TabBar + TopToolbar + (ChartCanvas slots + RightToolbar) + BottomToolbar.
+ *
+ * This component is intentionally stateless — all state lives in the parent
+ * (ManagedAppShell). It provides the visual skeleton and prop routing only.
+ */
+
+import React from 'react';
+import { TabBar } from './TabBar';
+import type { TabItem } from './TabBar';
+import { TopToolbar } from './toolbars/TopToolbar';
+import { RightToolbar } from './toolbars/RightToolbar';
+import { BottomToolbar } from './toolbars/BottomToolbar';
+import type { TradingSession } from './toolbars/BottomToolbar';
+import type { LayoutRecord } from './LayoutMenu';
+import type { ChartTheme, IndicatorConfig, ISymbolResolver } from '@forgecharts/types';
+
+export type { TradingSession };
+
+export type ChartWorkspaceProps = {
+  // ── TabBar ─────────────────────────────────────────────────────────────────
+  tabs: Array<{ id: string; label: string; isSaved?: boolean }>;
+  activeTabId: string;
+  onSelectTab: (id: string) => void;
+  onAddTab: () => void;
+  onCloseTab: (id: string) => void;
+  onRenameTab: (id: string, label: string) => void;
+  // ── TopToolbar ─────────────────────────────────────────────────────────────
+  symbol: string;
+  timeframe: string;
+  theme: ChartTheme;
+  customTimeframes: string[];
+  favoriteTfs: string[];
+  onSymbolChange: (s: string) => void;
+  onTimeframeChange: (tf: string) => void;
+  onAddCustomTimeframe: (tf: string) => void;
+  onFavoriteTfsChange: (favs: string[]) => void;
+  onAddIndicator: (config: IndicatorConfig) => void;
+  onToggleTheme: () => void;
+  onCopyScreenshot: () => void;
+  onDownloadScreenshot: () => void;
+  onFullscreen: () => void;
+  isFullscreen: boolean;
+  currentLayoutName?: string;
+  currentLayoutId?: string;
+  autoSave: boolean;
+  onFetchLayouts: () => Promise<LayoutRecord[]>;
+  onSaveLayout: (name: string) => Promise<void>;
+  onLoadLayout: (id: string) => Promise<void>;
+  onRenameLayout: (name: string) => Promise<void>;
+  onCopyLayout: (name: string) => Promise<void>;
+  onToggleAutoSave: (enabled: boolean) => void;
+  /** Resolver used by the symbol search dialog. */
+  symbolResolver: ISymbolResolver;
+  onDeleteLayout: (id: string) => Promise<void>;
+  onOpenLayoutInNewTab: (id: string) => Promise<void>;
+  // ── RightToolbar ────────────────────────────────────────────────────────────
+
+  watchlistOpen: boolean;
+  onToggleWatchlist: () => void;
+  // ── BottomToolbar ───────────────────────────────────────────────────────────
+  activeSymbol: string;
+  timezone: string;
+  onTimezoneChange: (tz: string) => void;
+  session: TradingSession;
+  onSessionChange: (s: TradingSession) => void;
+  scriptDrawerOpen: boolean;
+  onToggleScriptDrawer: () => void;
+  // ── Trade button (TopToolbar) ────────────────────────────────────────────────
+  showTradeButton?: boolean;
+  tradeDrawerOpen?: boolean;
+  onToggleTradeDrawer?: () => void;
+  // ── Chart slot (parent renders all tab charts) ───────────────────────────────
+  chartSlots: React.ReactNode;
+  // ── Unlicensed overlay ───────────────────────────────────────────────────────
+  isLicensed: boolean;
+  // ── Loading overlay ──────────────────────────────────────────────────────────
+  wsLoaded: boolean;
+  // ── Drawers (passed through as assembled React nodes) ────────────────────────
+  drawers?: React.ReactNode;
+};
+
+// ─── Re-export TabItem for consumers ─────────────────────────────────────────
+export type { TabItem };
+
+export function ChartWorkspace({
+  // TabBar
+  tabs, activeTabId, onSelectTab, onAddTab, onCloseTab, onRenameTab,
+  // TopToolbar
+  symbol, timeframe, theme, customTimeframes, favoriteTfs,
+  onSymbolChange, onTimeframeChange, onAddCustomTimeframe, onFavoriteTfsChange,
+  onAddIndicator, onToggleTheme, onCopyScreenshot, onDownloadScreenshot,
+  onFullscreen, isFullscreen, currentLayoutName, currentLayoutId, autoSave,
+  onFetchLayouts, onSaveLayout, onLoadLayout, onRenameLayout, onCopyLayout,
+  onToggleAutoSave, onDeleteLayout, onOpenLayoutInNewTab,
+  showTradeButton, tradeDrawerOpen, onToggleTradeDrawer, symbolResolver,
+  // RightToolbar
+  watchlistOpen, onToggleWatchlist,
+  // BottomToolbar
+  activeSymbol, timezone, onTimezoneChange, session, onSessionChange,
+  scriptDrawerOpen, onToggleScriptDrawer,
+  // Chart + state
+  chartSlots, isLicensed, wsLoaded, drawers,
+}: ChartWorkspaceProps) {
+  const tabItems: TabItem[] = tabs.map((t) => ({
+    id: t.id,
+    label: t.label,
+    ...(t.isSaved !== undefined ? { isSaved: t.isSaved } : {}),
+  }));
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        background: 'var(--shelf-bg)',
+        padding: 6,
+        gap: 4,
+      }}
+    >
+      {/* ── Loading overlay ──────────────────────────────────────────────── */}
+      {!wsLoaded && (
+        <div style={{
+          position: 'absolute', inset: 0, display: 'flex',
+          alignItems: 'center', justifyContent: 'center',
+          background: 'var(--bg)', zIndex: 1000,
+        }}>
+          <svg width="32" height="32" viewBox="0 0 32 32" style={{ animation: 'spin 0.9s linear infinite' }}>
+            <circle cx="16" cy="16" r="12" fill="none" stroke="var(--border)" strokeWidth="3" />
+            <path d="M16 4 A12 12 0 0 1 28 16" fill="none" stroke="var(--primary)" strokeWidth="3" strokeLinecap="round" />
+          </svg>
+          <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
+        </div>
+      )}
+
+      <TabBar
+        tabs={tabItems}
+        activeId={activeTabId}
+        onSelect={onSelectTab}
+        onAdd={onAddTab}
+        onClose={onCloseTab}
+        onRename={onRenameTab}
+      />
+
+      {/* ── Top toolbar ──────────────────────────────────────────────────── */}
+      <TopToolbar
+        symbol={symbol}
+        timeframe={timeframe}
+        theme={theme}
+        customTimeframes={customTimeframes}
+        favorites={favoriteTfs}
+        onSymbolChange={onSymbolChange}
+        onTimeframeChange={onTimeframeChange}
+        onAddCustomTimeframe={onAddCustomTimeframe}
+        onFavoritesChange={onFavoriteTfsChange}
+        onAddIndicator={onAddIndicator}
+        onToggleTheme={onToggleTheme}
+        onCopyScreenshot={onCopyScreenshot}
+        onDownloadScreenshot={onDownloadScreenshot}
+        onFullscreen={onFullscreen}
+        isFullscreen={isFullscreen}
+        currentLayoutName={currentLayoutName}
+        currentLayoutId={currentLayoutId}
+        autoSave={autoSave}
+        onFetchLayouts={onFetchLayouts}
+        onSaveLayout={onSaveLayout}
+        onLoadLayout={onLoadLayout}
+        onRenameLayout={onRenameLayout}
+        onCopyLayout={onCopyLayout}
+        onToggleAutoSave={onToggleAutoSave}
+        onDeleteLayout={onDeleteLayout}
+        onOpenLayoutInNewTab={onOpenLayoutInNewTab}
+        symbolResolver={symbolResolver}
+        {...(showTradeButton !== undefined ? { showTradeButton } : {})}
+        {...(tradeDrawerOpen !== undefined ? { tradeDrawerOpen } : {})}
+        {...(onToggleTradeDrawer !== undefined ? { onToggleTradeDrawer } : {})}
+      />
+
+      {/* ── Chart area ───────────────────────────────────────────────────── */}
+      <div style={{ flex: 1, display: 'flex', gap: 8, minHeight: 0, overflow: 'hidden' }}>
+        <div style={{ position: 'relative', flex: 1, display: 'flex', gap: 8, minWidth: 0, minHeight: 0 }}>
+          {/* Unlicensed overlay */}
+          {!isLicensed && (
+            <div style={{
+              position: 'absolute', inset: 0, zIndex: 100,
+              background: 'rgba(0,0,0,0.6)',
+              backdropFilter: 'blur(4px)',
+              display: 'flex', flexDirection: 'column',
+              alignItems: 'center', justifyContent: 'center',
+              gap: 12,
+            }}>
+              <svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="rgba(255,255,255,0.7)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
+                <rect x="3" y="11" width="18" height="11" rx="2" />
+                <path d="M7 11V7a5 5 0 0110 0v4" />
+              </svg>
+              <div style={{ color: '#fff', fontWeight: 700, fontSize: 18, letterSpacing: '0.01em' }}>Unlicensed</div>
+              <div style={{ color: 'rgba(255,255,255,0.65)', fontSize: 13 }}>Please activate your license in the admin studio</div>
+            </div>
+          )}
+          {/* Chart instance slots */}
+          <div style={{ position: 'relative', flex: 1, minWidth: 0, minHeight: 0 }}>
+            {chartSlots}
+          </div>
+          <RightToolbar
+            watchlistOpen={watchlistOpen}
+            onToggleWatchlist={onToggleWatchlist}
+          />
+        </div>
+        {/* Drawer panels passed from parent (ScriptDrawer, WatchlistDrawer) */}
+        {drawers}
+      </div>
+
+      {/* ── Bottom bar ───────────────────────────────────────────────────── */}
+      <BottomToolbar
+        symbol={activeSymbol}
+        timezone={timezone}
+        onTimezoneChange={onTimezoneChange}
+        session={session}
+        onSessionChange={onSessionChange}
+        onToggleScriptDrawer={onToggleScriptDrawer}
+        scriptDrawerOpen={scriptDrawerOpen}
+      />
+    </div>
+  );
+}

package/src/react/workspace/FloatingPanel.tsx

@@ -0,0 +1,131 @@
+/**
+ * FloatingPanel — a draggable, resizable floating panel shell.
+ *
+ * Renders `position: fixed` with a title bar (drag to move) and 8 resize
+ * handles (edges + corners). Pass panel content as `children`.
+ */
+
+import { useRef, useState } from 'react';
+
+type Pos  = { x: number; y: number };
+type Size = { w: number; h: number };
+
+type Props = {
+  title: React.ReactNode;
+  onClose: () => void;
+  defaultWidth?:  number;
+  defaultHeight?: number;
+  minWidth?:      number;
+  minHeight?:     number;
+  children: React.ReactNode;
+};
+
+export function FloatingPanel({
+  title,
+  onClose,
+  defaultWidth  = 380,
+  defaultHeight = 520,
+  minWidth      = 200,
+  minHeight     = 120,
+  children,
+}: Props) {
+  const [pos,  setPos]  = useState<Pos>(() => ({
+    x: Math.max(0, window.innerWidth - defaultWidth - 24),
+    y: 72,
+  }));
+  const [size, setSize] = useState<Size>({ w: defaultWidth, h: defaultHeight });
+
+  // Refs capture drag-start values to avoid stale-closure accumulation
+  const moveRef   = useRef<{ ox: number; oy: number; px: number; py: number } | null>(null);
+  const resizeRef = useRef<{
+    edges: string;
+    ox: number; oy: number;
+    pw: number; ph: number;
+    px: number; py: number;
+  } | null>(null);
+
+  // ── Drag to move ──────────────────────────────────────────────────────────
+  const startMove = (e: React.MouseEvent) => {
+    if ((e.target as HTMLElement).closest('.fp-close')) return;
+    e.preventDefault();
+    moveRef.current = { ox: e.clientX, oy: e.clientY, px: pos.x, py: pos.y };
+    const onMove = (ev: MouseEvent) => {
+      if (!moveRef.current) return;
+      setPos({
+        x: moveRef.current.px + ev.clientX - moveRef.current.ox,
+        y: moveRef.current.py + ev.clientY - moveRef.current.oy,
+      });
+    };
+    const onUp = () => {
+      moveRef.current = null;
+      window.removeEventListener('mousemove', onMove);
+      window.removeEventListener('mouseup',   onUp);
+    };
+    window.addEventListener('mousemove', onMove);
+    window.addEventListener('mouseup',   onUp);
+  };
+
+  // ── Resize from any edge/corner ───────────────────────────────────────────
+  const startResize = (e: React.MouseEvent, edges: string) => {
+    e.preventDefault();
+    e.stopPropagation();
+    resizeRef.current = {
+      edges,
+      ox: e.clientX, oy: e.clientY,
+      pw: size.w,    ph: size.h,
+      px: pos.x,     py: pos.y,
+    };
+    const onMove = (ev: MouseEvent) => {
+      if (!resizeRef.current) return;
+      const { edges: ed, ox, oy, pw, ph, px, py } = resizeRef.current;
+      const dx = ev.clientX - ox;
+      const dy = ev.clientY - oy;
+      let nx = px, ny = py, nw = pw, nh = ph;
+      if (ed.includes('e')) nw = Math.max(minWidth,  pw + dx);
+      if (ed.includes('s')) nh = Math.max(minHeight, ph + dy);
+      if (ed.includes('w')) { nw = Math.max(minWidth,  pw - dx); nx = px + pw - nw; }
+      if (ed.includes('n')) { nh = Math.max(minHeight, ph - dy); ny = py + ph - nh; }
+      setSize({ w: nw, h: nh });
+      setPos({ x: nx, y: ny });
+    };
+    const onUp = () => {
+      resizeRef.current = null;
+      window.removeEventListener('mousemove', onMove);
+      window.removeEventListener('mouseup',   onUp);
+    };
+    window.addEventListener('mousemove', onMove);
+    window.addEventListener('mouseup',   onUp);
+  };
+
+  return (
+    <div
+      className="fp-shell"
+      style={{ left: pos.x, top: pos.y, width: size.w, height: size.h }}
+    >
+      {/* Title bar — drag handle */}
+      <div className="fp-titlebar" onMouseDown={startMove}>
+        <span className="fp-title">{title}</span>
+        <button className="fp-close" onClick={onClose} title="Close">
+          <svg viewBox="0 0 14 14" width="12" height="12" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round">
+            <line x1="2" y1="2" x2="12" y2="12" />
+            <line x1="12" y1="2" x2="2" y2="12" />
+          </svg>
+        </button>
+      </div>
+
+      {/* Content */}
+      <div className="fp-content">{children}</div>
+
+      {/* Edge resize handles */}
+      <div className="fp-resize fp-resize-n"  onMouseDown={(e) => startResize(e, 'n')} />
+      <div className="fp-resize fp-resize-s"  onMouseDown={(e) => startResize(e, 's')} />
+      <div className="fp-resize fp-resize-e"  onMouseDown={(e) => startResize(e, 'e')} />
+      <div className="fp-resize fp-resize-w"  onMouseDown={(e) => startResize(e, 'w')} />
+      {/* Corner resize handles */}
+      <div className="fp-resize fp-resize-nw" onMouseDown={(e) => startResize(e, 'nw')} />
+      <div className="fp-resize fp-resize-ne" onMouseDown={(e) => startResize(e, 'ne')} />
+      <div className="fp-resize fp-resize-sw" onMouseDown={(e) => startResize(e, 'sw')} />
+      <div className="fp-resize fp-resize-se" onMouseDown={(e) => startResize(e, 'se')} />
+    </div>
+  );
+}