@forgecharts/sdk 1.1.27 → 1.1.28

package/src/react/workspace/toolbars/BottomToolbar.tsx

@@ -1,372 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-
-// ─── Timezone list ─────────────────────────────────────────────────────────────
-
-export type TimezoneOption = {
-  label: string;
-  value: string; // IANA tz id, or 'UTC' / 'exchange'
-};
-
-export const TIMEZONE_OPTIONS: TimezoneOption[] = [
-  { label: 'UTC',               value: 'UTC' },
-  { label: 'Exchange',          value: 'exchange' },
-  // Americas
-  { label: '(UTC-10) Honolulu',          value: 'Pacific/Honolulu' },
-  { label: '(UTC-9) Anchorage',          value: 'America/Anchorage' },
-  { label: '(UTC-9) Juneau',             value: 'America/Juneau' },
-  { label: '(UTC-8) Los Angeles',        value: 'America/Los_Angeles' },
-  { label: '(UTC-8) Vancouver',          value: 'America/Vancouver' },
-  { label: '(UTC-7) Denver',             value: 'America/Denver' },
-  { label: '(UTC-7) Phoenix',            value: 'America/Phoenix' },
-  { label: '(UTC-6) Chicago',            value: 'America/Chicago' },
-  { label: '(UTC-6) Mexico City',        value: 'America/Mexico_City' },
-  { label: '(UTC-6) San Salvador',       value: 'America/El_Salvador' },
-  { label: '(UTC-5) Bogota',             value: 'America/Bogota' },
-  { label: '(UTC-5) Lima',               value: 'America/Lima' },
-  { label: '(UTC-5) New York',           value: 'America/New_York' },
-  { label: '(UTC-5) Toronto',            value: 'America/Toronto' },
-  { label: '(UTC-4) Caracas',            value: 'America/Caracas' },
-  { label: '(UTC-4) Halifax',            value: 'America/Halifax' },
-  { label: '(UTC-3) Buenos Aires',       value: 'America/Argentina/Buenos_Aires' },
-  { label: '(UTC-3) Santiago',           value: 'America/Santiago' },
-  { label: '(UTC-3) Sao Paulo',          value: 'America/Sao_Paulo' },
-  { label: '(UTC-2) Mid-Atlantic',       value: 'Atlantic/South_Georgia' },
-  { label: '(UTC-1) Azores',             value: 'Atlantic/Azores' },
-  // Europe / Africa (UTC / UTC+0)
-  { label: '(UTC) Casablanca',           value: 'Africa/Casablanca' },
-  { label: '(UTC) Dublin',               value: 'Europe/Dublin' },
-  { label: '(UTC) Lisbon',               value: 'Europe/Lisbon' },
-  { label: '(UTC) London',               value: 'Europe/London' },
-  { label: '(UTC) Reykjavik',            value: 'Atlantic/Reykjavik' },
-  // UTC+1
-  { label: '(UTC+1) Amsterdam',          value: 'Europe/Amsterdam' },
-  { label: '(UTC+1) Belgrade',           value: 'Europe/Belgrade' },
-  { label: '(UTC+1) Berlin',             value: 'Europe/Berlin' },
-  { label: '(UTC+1) Bratislava',         value: 'Europe/Bratislava' },
-  { label: '(UTC+1) Brussels',           value: 'Europe/Brussels' },
-  { label: '(UTC+1) Budapest',           value: 'Europe/Budapest' },
-  { label: '(UTC+1) Copenhagen',         value: 'Europe/Copenhagen' },
-  { label: '(UTC+1) Lagos',              value: 'Africa/Lagos' },
-  { label: '(UTC+1) Luxembourg',         value: 'Europe/Luxembourg' },
-  { label: '(UTC+1) Madrid',             value: 'Europe/Madrid' },
-  { label: '(UTC+1) Malta',              value: 'Europe/Malta' },
-  { label: '(UTC+1) Oslo',               value: 'Europe/Oslo' },
-  { label: '(UTC+1) Paris',              value: 'Europe/Paris' },
-  { label: '(UTC+1) Prague',             value: 'Europe/Prague' },
-  { label: '(UTC+1) Rome',               value: 'Europe/Rome' },
-  { label: '(UTC+1) Sarajevo',           value: 'Europe/Sarajevo' },
-  { label: '(UTC+1) Stockholm',          value: 'Europe/Stockholm' },
-  { label: '(UTC+1) Vienna',             value: 'Europe/Vienna' },
-  { label: '(UTC+1) Warsaw',             value: 'Europe/Warsaw' },
-  { label: '(UTC+1) Zurich',             value: 'Europe/Zurich' },
-  // UTC+2
-  { label: '(UTC+2) Athens',             value: 'Europe/Athens' },
-  { label: '(UTC+2) Bucharest',          value: 'Europe/Bucharest' },
-  { label: '(UTC+2) Cairo',              value: 'Africa/Cairo' },
-  { label: '(UTC+2) Helsinki',           value: 'Europe/Helsinki' },
-  { label: '(UTC+2) Istanbul',           value: 'Europe/Istanbul' },
-  { label: '(UTC+2) Jerusalem',          value: 'Asia/Jerusalem' },
-  { label: '(UTC+2) Johannesburg',       value: 'Africa/Johannesburg' },
-  { label: '(UTC+2) Kyiv',               value: 'Europe/Kiev' },
-  { label: '(UTC+2) Riga',               value: 'Europe/Riga' },
-  { label: '(UTC+2) Sofia',              value: 'Europe/Sofia' },
-  { label: '(UTC+2) Tallinn',            value: 'Europe/Tallinn' },
-  { label: '(UTC+2) Vilnius',            value: 'Europe/Vilnius' },
-  // UTC+3
-  { label: '(UTC+3) Baghdad',            value: 'Asia/Baghdad' },
-  { label: '(UTC+3) Kuwait',             value: 'Asia/Kuwait' },
-  { label: '(UTC+3) Moscow',             value: 'Europe/Moscow' },
-  { label: '(UTC+3) Nairobi',            value: 'Africa/Nairobi' },
-  { label: '(UTC+3) Qatar',              value: 'Asia/Qatar' },
-  { label: '(UTC+3) Riyadh',             value: 'Asia/Riyadh' },
-  // UTC+3:30 / UTC+4
-  { label: '(UTC+3:30) Tehran',          value: 'Asia/Tehran' },
-  { label: '(UTC+4) Abu Dhabi',          value: 'Asia/Dubai' },
-  { label: '(UTC+4) Baku',               value: 'Asia/Baku' },
-  { label: '(UTC+4) Dubai',              value: 'Asia/Dubai' },
-  { label: '(UTC+4) Muscat',             value: 'Asia/Muscat' },
-  { label: '(UTC+4) Tbilisi',            value: 'Asia/Tbilisi' },
-  { label: '(UTC+4:30) Kabul',           value: 'Asia/Kabul' },
-  // UTC+5
-  { label: '(UTC+5) Islamabad',          value: 'Asia/Karachi' },
-  { label: '(UTC+5) Karachi',            value: 'Asia/Karachi' },
-  { label: '(UTC+5) Tashkent',           value: 'Asia/Tashkent' },
-  { label: '(UTC+5:30) Chennai',         value: 'Asia/Kolkata' },
-  { label: '(UTC+5:30) Mumbai',          value: 'Asia/Kolkata' },
-  { label: '(UTC+5:30) New Delhi',       value: 'Asia/Kolkata' },
-  { label: '(UTC+5:45) Kathmandu',       value: 'Asia/Kathmandu' },
-  // UTC+6
-  { label: '(UTC+6) Almaty',             value: 'Asia/Almaty' },
-  { label: '(UTC+6) Dhaka',              value: 'Asia/Dhaka' },
-  // UTC+7
-  { label: '(UTC+7) Bangkok',            value: 'Asia/Bangkok' },
-  { label: '(UTC+7) Hanoi',              value: 'Asia/Ho_Chi_Minh' },
-  { label: '(UTC+7) Jakarta',            value: 'Asia/Jakarta' },
-  // UTC+8
-  { label: '(UTC+8) Beijing',            value: 'Asia/Shanghai' },
-  { label: '(UTC+8) Hong Kong',          value: 'Asia/Hong_Kong' },
-  { label: '(UTC+8) Kuala Lumpur',       value: 'Asia/Kuala_Lumpur' },
-  { label: '(UTC+8) Perth',              value: 'Australia/Perth' },
-  { label: '(UTC+8) Shanghai',           value: 'Asia/Shanghai' },
-  { label: '(UTC+8) Singapore',          value: 'Asia/Singapore' },
-  { label: '(UTC+8) Taipei',             value: 'Asia/Taipei' },
-  // UTC+9
-  { label: '(UTC+9) Osaka',              value: 'Asia/Tokyo' },
-  { label: '(UTC+9) Seoul',              value: 'Asia/Seoul' },
-  { label: '(UTC+9) Tokyo',              value: 'Asia/Tokyo' },
-  { label: '(UTC+9:30) Adelaide',        value: 'Australia/Adelaide' },
-  { label: '(UTC+9:30) Darwin',          value: 'Australia/Darwin' },
-  // UTC+10
-  { label: '(UTC+10) Brisbane',          value: 'Australia/Brisbane' },
-  { label: '(UTC+10) Canberra',          value: 'Australia/Sydney' },
-  { label: '(UTC+10) Melbourne',         value: 'Australia/Melbourne' },
-  { label: '(UTC+10) Sydney',            value: 'Australia/Sydney' },
-  // UTC+12
-  { label: '(UTC+12) Auckland',          value: 'Pacific/Auckland' },
-  { label: '(UTC+12) Fiji',              value: 'Pacific/Fiji' },
-];
-
-// ─── DST-aware offset helpers ─────────────────────────────────────────────────
-
-/**
- * Returns the current UTC offset label for an IANA timezone, e.g. "(UTC-7)" or "(UTC+5:30)".
- * Because it reads `new Date()` it is automatically DST-aware.
- */
-function getUtcOffsetLabel(iana: string): string {
-  try {
-    const parts = new Intl.DateTimeFormat('en', {
-      timeZone: iana,
-      timeZoneName: 'shortOffset',
-    }).formatToParts(new Date());
-    const tzName = parts.find((p) => p.type === 'timeZoneName')?.value ?? 'GMT';
-    const offset = tzName.replace(/^GMT/, '');
-    return offset ? `(UTC${offset})` : '(UTC)';
-  } catch {
-    return '(UTC)';
-  }
-}
-
-/**
- * Returns a DST-aware display string for a timezone option.
- * For UTC / Exchange the label is returned unchanged.
- * For all IANA entries the offset prefix is recomputed live.
- */
-function getDisplayLabel(opt: TimezoneOption): string {
-  if (opt.value === 'UTC' || opt.value === 'exchange') return opt.label;
-  // Extract city name from static label like "(UTC-9) Anchorage" → "Anchorage"
-  const city = opt.label.replace(/^\(UTC[^)]*\)\s*/, '');
-  return `${getUtcOffsetLabel(opt.value)} ${city}`;
-}
-
-// ─── BottomToolbar ──────────────────────────────────────────────────────────
-
-export type TradingSession = 'regular' | 'extended';
-
-/**
- * Returns true when the given symbol trades on a session-aware exchange
- * (stocks, futures, forex) where RTH/ETH distinction makes sense.
- * Crypto exchanges trade 24/7 and have no session concept.
- */
-const CRYPTO_EXCHANGES = new Set([
-  'BINANCE', 'BINANCEUS', 'BINANCEUSDM', 'BINANCECOINM',
-  'COINBASE', 'COINBASEPRO',
-  'KRAKEN', 'KRAKENFX',
-  'BYBIT', 'BITGET',
-  'OKX', 'OKEX',
-  'HUOBI', 'HTX',
-  'KUCOIN',
-  'GEMINI',
-  'BITSTAMP',
-  'BITFINEX',
-  'MEXC',
-  'GATEIO', 'GATE',
-  'BITMEX',
-  'DERIBIT',
-]);
-
-export function symbolSupportsSession(symbol: string): boolean {
-  const exchange = symbol.includes(':') ? symbol.split(':')[0]!.toUpperCase() : '';
-  return exchange !== '' && !CRYPTO_EXCHANGES.has(exchange);
-}
-
-type Props = {
-  symbol: string;
-  timezone: string;
-  onTimezoneChange: (tz: string) => void;
-  session: TradingSession;
-  onSessionChange: (s: TradingSession) => void;
-  onToggleScriptDrawer: () => void;
-  scriptDrawerOpen: boolean;
-};
-
-function useClockTime(timezone: string): string {
-  const [time, setTime] = useState(() => _formatClock(timezone));
-
-  useEffect(() => {
-    setTime(_formatClock(timezone));
-    const id = setInterval(() => setTime(_formatClock(timezone)), 1000);
-    return () => clearInterval(id);
-  }, [timezone]);
-
-  return time;
-}
-
-function _formatClock(timezone: string): string {
-  const tz = timezone === 'exchange' ? 'UTC' : timezone;
-  try {
-    return new Intl.DateTimeFormat('en-GB', {
-      timeZone: tz,
-      hour:     '2-digit',
-      minute:   '2-digit',
-      second:   '2-digit',
-      hour12:   false,
-    }).format(new Date());
-  } catch {
-    return new Intl.DateTimeFormat('en-GB', {
-      timeZone: 'UTC',
-      hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false,
-    }).format(new Date());
-  }
-}
-
-export function BottomToolbar({ symbol, timezone, onTimezoneChange, session, onSessionChange, onToggleScriptDrawer, scriptDrawerOpen }: Props) {
-  const showSession = symbolSupportsSession(symbol);
-  const [open, setOpen] = useState(false);
-  const [sessionOpen, setSessionOpen] = useState(false);
-  const rootRef = useRef<HTMLDivElement>(null);
-  const sessionRef = useRef<HTMLDivElement>(null);
-  const clockTime = useClockTime(timezone);
-
-  const current = TIMEZONE_OPTIONS.find((o) => o.value === timezone) ?? TIMEZONE_OPTIONS[0]!
-
-  // Close timezone dropdown on outside click
-  useEffect(() => {
-    if (!open) return;
-    const handler = (e: MouseEvent) => {
-      if (rootRef.current && !rootRef.current.contains(e.target as Node)) setOpen(false);
-    };
-    document.addEventListener('mousedown', handler);
-    return () => document.removeEventListener('mousedown', handler);
-  }, [open]);
-
-  // Close session dropdown on outside click
-  useEffect(() => {
-    if (!sessionOpen) return;
-    const handler = (e: MouseEvent) => {
-      if (sessionRef.current && !sessionRef.current.contains(e.target as Node)) setSessionOpen(false);
-    };
-    document.addEventListener('mousedown', handler);
-    return () => document.removeEventListener('mousedown', handler);
-  }, [sessionOpen]);
-
-  return (
-    <div className="bottom-bar">
-      {/* ── Left side: script button ─────────────────────────────────────────────────── */}
-      <div className="bottom-bar-left">
-        {/* Script Engine toggle */}
-        <button
-          className={`bottom-bar-btn${scriptDrawerOpen ? ' active' : ''}`}
-          onClick={onToggleScriptDrawer}
-          title="Script Engine"
-        >
-          <svg viewBox="0 0 16 16" width="11" height="11" fill="none"
-            stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
-            <polyline points="4,6 2,8 4,10" />
-            <polyline points="12,6 14,8 12,10" />
-            <line x1="9" y1="3" x2="7" y2="13" />
-          </svg>
-          Script
-        </button>
-        {/* Trade button — managed license only */}
-      </div>
-
-      {/* ── Right side: timezone + clock + session picker ────────── */}
-      <div className="bottom-bar-right">
-        {/* Timezone picker trigger */}
-        <div ref={rootRef} style={{ position: 'relative', display: 'flex', alignItems: 'center' }}>
-          <button
-            className={`bottom-bar-btn${open ? ' active' : ''}`}
-            onClick={() => setOpen((o) => !o)}
-            title="Chart timezone"
-          >
-            <svg viewBox="0 0 14 14" width="11" height="11" fill="none" stroke="currentColor" strokeWidth="1.2">
-              <circle cx="7" cy="7" r="5.5" />
-              <path d="M7 1.5C7 1.5 9 4 9 7s-2 5.5-2 5.5M7 1.5C7 1.5 5 4 5 7s2 5.5 2 5.5" />
-              <line x1="1.5" y1="7" x2="12.5" y2="7" />
-              <line x1="2" y1="4.5" x2="12" y2="4.5" />
-              <line x1="2" y1="9.5" x2="12" y2="9.5" />
-            </svg>
-            {getDisplayLabel(current)}
-          </button>
-
-          {/* Live clock for the selected timezone */}
-          <span className="bottom-bar-clock" title={`Current time in ${getDisplayLabel(current)}`}>
-            {clockTime}
-          </span>
-
-          {/* Timezone dropdown — opens upward, aligned to right */}
-          {open && (
-            <div className="bottom-bar-dropdown bottom-bar-dropdown--right">
-              <div className="bottom-bar-dropdown-section">Timezone</div>
-              {TIMEZONE_OPTIONS.map((opt) => (
-                <button
-                  key={opt.value + opt.label}
-                  className={`bottom-bar-dropdown-item${opt.value === timezone ? ' current' : ''}`}
-                  onClick={() => { onTimezoneChange(opt.value); setOpen(false); }}
-                >
-                  {opt.value === timezone && (
-                    <span className="bottom-bar-check">✓</span>
-                  )}
-                  {getDisplayLabel(opt)}
-                </button>
-              ))}
-            </div>
-          )}
-        </div>
-
-        {/* Session picker (hidden for 24/7 assets like crypto) */}
-        {showSession && <div ref={sessionRef} style={{ position: 'relative', display: 'flex', alignItems: 'center' }}>
-        <button
-          className={`bottom-bar-btn${sessionOpen ? ' active' : ''}`}
-          onClick={() => setSessionOpen((o) => !o)}
-          title="Trading session"
-        >
-          <svg viewBox="0 0 14 14" width="11" height="11" fill="none" stroke="currentColor" strokeWidth="1.2">
-            <rect x="1.5" y="2.5" width="11" height="9" rx="1" />
-            <line x1="1.5" y1="5.5" x2="12.5" y2="5.5" />
-            <line x1="4.5" y1="2.5" x2="4.5" y2="1" />
-            <line x1="9.5" y1="2.5" x2="9.5" y2="1" />
-          </svg>
-          {session === 'extended' ? 'Extended hours' : 'Regular hours'}
-        </button>
-
-        {sessionOpen && (
-          <div className="bottom-bar-dropdown bottom-bar-dropdown--right">
-            <div className="bottom-bar-dropdown-section">Sessions</div>
-            <button
-              className={`bottom-bar-dropdown-item${session === 'regular' ? ' current' : ''}`}
-              onClick={() => { onSessionChange('regular'); setSessionOpen(false); }}
-            >
-              {session === 'regular' && <span className="bottom-bar-check">✓</span>}
-              <span className="bottom-bar-session-label">
-                <strong>Regular trading hours</strong>
-                <span>Exchange session only (RTH) — cleaner signals, higher liquidity</span>
-              </span>
-            </button>
-            <button
-              className={`bottom-bar-dropdown-item${session === 'extended' ? ' current' : ''}`}
-              onClick={() => { onSessionChange('extended'); setSessionOpen(false); }}
-            >
-              {session === 'extended' && <span className="bottom-bar-check">✓</span>}
-              <span className="bottom-bar-session-label">
-                <strong>Extended / electronic hours</strong>
-                <span>Includes pre-market &amp; after-hours (ETH) — full price range</span>
-              </span>
-            </button>
-          </div>
-        )}
-        </div>}
-      </div>
-    </div>
-  );
-}

package/src/react/workspace/toolbars/RightToolbar.tsx

@@ -1,46 +0,0 @@
-import React from 'react';
-
-const WatchListIcon = () => (
-  <svg viewBox="0 0 16 16" width="16" height="16" stroke="currentColor" fill="none" strokeWidth="1.5">
-    <rect x="2" y="3" width="12" height="1.5" rx="0.5" fill="currentColor" stroke="none" />
-    <rect x="2" y="7" width="9" height="1.5" rx="0.5" fill="currentColor" stroke="none" />
-    <rect x="2" y="11" width="10" height="1.5" rx="0.5" fill="currentColor" stroke="none" />
-    <circle cx="13" cy="11.75" r="2.5" />
-    <line x1="13" y1="10.75" x2="13" y2="12.75" strokeWidth="1.2" />
-    <line x1="12" y1="11.75" x2="14" y2="11.75" strokeWidth="1.2" />
-  </svg>
-);
-
-type Props = {
-  watchlistOpen: boolean;
-  onToggleWatchlist: () => void;
-};
-
-// ─── RightToolbar ────────────────────────────────────────────────────────────────────────────────
-
-export function RightToolbar({ watchlistOpen, onToggleWatchlist }: Props): React.ReactElement {
-  return (
-    <div
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        gap: 2,
-        padding: '6px 4px',
-        background: 'var(--toolbar-bg)',
-        borderRadius: 8,
-        width: 40,
-        flexShrink: 0,
-        userSelect: 'none',
-      }}
-    >
-      <button
-        title="Watch List"
-        className={`drawing-tool-btn${watchlistOpen ? ' is-active' : ''}`}
-        onClick={onToggleWatchlist}
-      >
-        <WatchListIcon />
-      </button>
-    </div>
-  );
-}