@forgecharts/sdk 1.1.27 → 1.1.28

package/src/react/trading/TradingBridge.ts

@@ -1,156 +0,0 @@
-/**
- * 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

@@ -1,228 +0,0 @@
-/**
- * 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

@@ -1,131 +0,0 @@
-/**
- * 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>
-  );
-}