@forgecharts/sdk 1.1.23 → 1.1.27

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

@@ -0,0 +1,431 @@
+import { useState, useEffect, useRef } from 'react';
+import type { ChartTheme, IndicatorConfig } from '@forgecharts/types';
+import { LayoutMenu } from '../LayoutMenu';
+import { SymbolSearchDialog } from '../SymbolSearchDialog';
+import type { ISymbolResolver } from '@forgecharts/types';
+import { IndicatorsDialog } from '../IndicatorsDialog';
+
+// ─── Timeframe data ───────────────────────────────────────────────────────────
+
+export const DEFAULT_FAVORITES: string[] = ['1m', '5m', '15m', '30m', '1h', '4h', '1d', '1w'];
+
+const TF_LABELS: Record<string, string> = {
+  '1m': '1 minute',  '2m': '2 minutes',   '3m': '3 minutes',    '4m': '4 minutes',
+  '5m': '5 minutes', '10m': '10 minutes', '15m': '15 minutes',  '20m': '20 minutes',
+  '30m': '30 minutes', '45m': '45 minutes',
+  '1h': '1 hour',    '2h': '2 hours',     '3h': '3 hours',      '4h': '4 hours',
+  '6h': '6 hours',   '8h': '8 hours',     '12h': '12 hours',
+  '1d': '1 day',     '2d': '2 days',      '3d': '3 days',       '1w': '1 week',
+  '2w': '2 weeks',   '1M': '1 month',     '3M': '3 months',     '6M': '6 months',  '12M': '12 months',
+};
+
+const TF_GROUPS_ALL: { label: string; items: string[] }[] = [
+  { label: 'Minutes', items: ['1m', '2m', '3m', '4m', '5m', '10m', '15m', '20m', '30m', '45m'] },
+  { label: 'Hours',   items: ['1h', '2h', '3h', '4h', '6h', '8h', '12h'] },
+  { label: 'Days',    items: ['1d', '2d', '3d', '1w', '2w', '1M', '3M', '6M', '12M'] },
+];
+
+// ─── Timeframe dropdown ───────────────────────────────────────────────────────
+
+function TimeframeDropdown({
+  timeframe,
+  customTimeframes,
+  favorites,
+  onSelect,
+  onToggleFavorite,
+  onAddCustom,
+  onClose,
+}: {
+  timeframe: string;
+  customTimeframes: string[];
+  favorites: string[];
+  onSelect: (tf: string) => void;
+  onToggleFavorite: (tf: string) => void;
+  onAddCustom: (tf: string) => void;
+  onClose: () => void;
+}) {
+  const [collapsed, setCollapsed] = useState<Record<string, boolean>>({});
+  const [addingCustom, setAddingCustom] = useState(false);
+  const [input, setInput] = useState('');
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) onClose();
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [onClose]);
+
+  const commit = () => {
+    const val = input.trim();
+    if (!val) return;
+    onAddCustom(val);
+    onSelect(val);
+    setInput('');
+    onClose();
+  };
+
+  const toggleGroup = (label: string) =>
+    setCollapsed((prev) => ({ ...prev, [label]: !prev[label] }));
+
+  return (
+    <div ref={ref} className="tf-dropdown">
+      <button
+        className="tf-dropdown-add-custom"
+        onClick={() => setAddingCustom((a) => !a)}
+      >
+        + Add custom interval...
+      </button>
+
+      {addingCustom && (
+        <div className="tf-dropdown-add-row">
+          <input
+            className="tf-dropdown-input"
+            type="text"
+            value={input}
+            placeholder="e.g. 2h, 45m"
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={(e) => { if (e.key === 'Enter') commit(); }}
+            autoFocus
+          />
+          <button
+            className="tf-dropdown-add-btn"
+            disabled={!input.trim()}
+            onClick={commit}
+          >
+            Add
+          </button>
+        </div>
+      )}
+
+      {TF_GROUPS_ALL.map((group) => (
+        <div key={group.label}>
+          <button
+            className="tf-dropdown-group-hdr"
+            onClick={() => toggleGroup(group.label)}
+          >
+            <span>{group.label}</span>
+            <span className={`tf-dropdown-chevron${collapsed[group.label] ? ' collapsed' : ''}`}>∧</span>
+          </button>
+          {!collapsed[group.label] && group.items.map((tf) => (
+            <button
+              key={tf}
+              className="tf-dropdown-row"
+              onClick={() => { onSelect(tf); onClose(); }}
+            >
+              <span>{TF_LABELS[tf] ?? tf}</span>
+              <button
+                className="tf-star-btn"
+                title={favorites.includes(tf) ? 'Remove from toolbar' : 'Add to toolbar'}
+                onClick={(e) => { e.stopPropagation(); onToggleFavorite(tf); }}
+              >
+                <span className={`tf-star${favorites.includes(tf) ? ' favorited' : ''}`}>★</span>
+              </button>
+            </button>
+          ))}
+        </div>
+      ))}
+
+      {customTimeframes.length > 0 && (
+        <div>
+          <button
+            className="tf-dropdown-group-hdr"
+            onClick={() => toggleGroup('Custom')}
+          >
+            <span>Custom</span>
+            <span className={`tf-dropdown-chevron${collapsed['Custom'] ? ' collapsed' : ''}`}>∧</span>
+          </button>
+          {!collapsed['Custom'] && customTimeframes.map((tf) => (
+            <button
+              key={tf}
+              className="tf-dropdown-row"
+              onClick={() => { onSelect(tf); onClose(); }}
+            >
+              <span>{tf}</span>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── TopToolbar ─────────────────────────────────────────────────────────────
+
+type Props = {
+  symbol: string;
+  timeframe: string;
+  theme: ChartTheme;
+  customTimeframes: string[];
+  favorites: string[];
+  onSymbolChange: (s: string) => void;
+  onTimeframeChange: (tf: string) => void;
+  onAddCustomTimeframe: (tf: string) => void;
+  onFavoritesChange: (favs: string[]) => void;
+  onAddIndicator: (config: IndicatorConfig) => void;
+  onToggleTheme: () => void;
+  onCopyScreenshot: () => void;
+  onDownloadScreenshot: () => void;
+  onFullscreen: () => void;
+  isFullscreen: boolean;
+  currentLayoutName?: string | undefined;
+  currentLayoutId?: string | undefined;
+  autoSave: boolean;
+  onSaveLayout: (name: string) => Promise<void>;
+  onLoadLayout: (layoutId: string) => Promise<void>;
+  onRenameLayout: (newName: string) => Promise<void>;
+  onCopyLayout: (newName: string) => Promise<void>;
+  onToggleAutoSave: (enabled: boolean) => void;
+  onDeleteLayout: (id: string) => Promise<void>;
+  onOpenLayoutInNewTab: (id: string) => Promise<void>;
+  /** Called to fetch current saved layouts. Passed through to LayoutMenu. */
+  onFetchLayouts: () => Promise<import('../LayoutMenu').LayoutRecord[]>;
+  /** Resolver used by the symbol search dialog. */
+  symbolResolver: ISymbolResolver;
+  /** Only rendered when a managed license is active */
+  showTradeButton?: boolean;
+  tradeDrawerOpen?: boolean;
+  onToggleTradeDrawer?: () => void;
+};
+
+export function TopToolbar({
+  symbol, timeframe, theme, customTimeframes, favorites,
+  onSymbolChange, onTimeframeChange, onAddCustomTimeframe, onFavoritesChange,
+  onAddIndicator,
+  onToggleTheme,
+  onCopyScreenshot, onDownloadScreenshot, onFullscreen, isFullscreen,
+  currentLayoutName, currentLayoutId, autoSave,
+  onSaveLayout, onLoadLayout, onRenameLayout, onCopyLayout, onToggleAutoSave,
+  onDeleteLayout, onOpenLayoutInNewTab, onFetchLayouts, symbolResolver,
+  showTradeButton, tradeDrawerOpen, onToggleTradeDrawer,
+}: Props) {
+  const [tfOpen, setTfOpen] = useState(false);
+  const [symOpen, setSymOpen] = useState(false);
+  const [indOpen, setIndOpen] = useState(false);
+  const [ssOpen, setSsOpen] = useState(false);
+  const ssRef = useRef<HTMLDivElement>(null);
+  const tfRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!ssOpen) return;
+    const handler = (e: MouseEvent) => {
+      if (ssRef.current && !ssRef.current.contains(e.target as Node)) setSsOpen(false);
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [ssOpen]);
+
+  // Close dropdown on outside click is handled inside TimeframeDropdown itself.
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 8,
+        padding: '6px 12px',
+        background: 'var(--toolbar-bg)',
+        borderRadius: 8,
+        flexShrink: 0,
+      }}
+    >
+      {/* Logo */}
+      <span style={{ fontWeight: 700, letterSpacing: '-0.5px', color: 'var(--accent)' }}>
+        ForgeCharts
+      </span>
+
+      <div className="toolbar-sep" />
+
+      {/* Symbol picker */}
+      <button
+        className="sym-trigger"
+        onClick={() => setSymOpen(true)}
+        title="Search symbols"
+      >
+        <svg viewBox="0 0 14 14" width="12" height="12" stroke="currentColor"
+          fill="none" strokeWidth="1.8" strokeLinecap="round">
+          <circle cx="5.5" cy="5.5" r="4" />
+          <line x1="9" y1="9" x2="13" y2="13" />
+        </svg>
+        <span>{symbol}</span>
+        <svg viewBox="0 0 10 6" width="8" height="6" fill="currentColor">
+          <path d="M0 0l5 6 5-6z" />
+        </svg>
+      </button>
+
+      {symOpen && (
+        <SymbolSearchDialog
+          current={symbol}
+          onSelect={onSymbolChange}
+          onClose={() => setSymOpen(false)}
+          symbolResolver={symbolResolver}
+        />
+      )}
+
+      <div className="toolbar-sep" />
+
+      {/* Timeframe buttons + dropdown */}
+      <div ref={tfRef} style={{ display: 'flex', gap: 2, position: 'relative' }}>
+        {favorites.map((tf) => (
+          <button
+            key={tf}
+            className={tf === timeframe ? 'active' : undefined}
+            onClick={() => onTimeframeChange(tf)}
+          >
+            {tf}
+          </button>
+        ))}
+
+        {/* Extra button for active non-favorited timeframe */}
+        {!favorites.includes(timeframe) && timeframe && (
+          <button className="active" style={{ fontStyle: 'italic' }}>
+            {timeframe}
+          </button>
+        )}
+
+        {/* More timeframes trigger */}
+        <button
+          className={tfOpen ? 'active' : undefined}
+          onClick={() => setTfOpen((o) => !o)}
+          title="More timeframes"
+          style={{ fontSize: 11, padding: '4px 7px' }}
+        >
+          ▾
+        </button>
+
+        {tfOpen && (
+          <TimeframeDropdown
+            timeframe={timeframe}
+            customTimeframes={customTimeframes}
+            favorites={favorites}
+            onSelect={onTimeframeChange}
+            onToggleFavorite={(tf) => {
+              const next = favorites.includes(tf)
+                ? favorites.filter((f) => f !== tf)
+                : [...favorites, tf];
+              onFavoritesChange(next);
+            }}
+            onAddCustom={onAddCustomTimeframe}
+            onClose={() => setTfOpen(false)}
+          />
+        )}
+      </div>
+
+      <div className="toolbar-sep" />
+
+      {/* Indicators button */}
+      <button
+        className={`ind-trigger${indOpen ? ' active' : ''}`}
+        onClick={() => setIndOpen((o) => !o)}
+        title="Indicators"
+      >
+        <svg viewBox="0 0 16 16" width="13" height="13" stroke="currentColor" fill="none" strokeWidth="1.6" strokeLinecap="round">
+          <polyline points="2,12 6,7 9,10 14,4" />
+          <line x1="11" y1="2" x2="14" y2="2" />
+          <line x1="14" y1="2" x2="14" y2="5" />
+        </svg>
+        Indicators
+      </button>
+
+      {indOpen && (
+        <IndicatorsDialog
+          onAdd={(config: IndicatorConfig) => { onAddIndicator(config); }}
+          onClose={() => setIndOpen(false)}
+        />
+      )}
+
+      {/* Layout + theme toggle — pinned to right edge */}
+      <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 4 }}>
+        {showTradeButton && (
+          <>
+            <button
+              className={`top-trade-btn${tradeDrawerOpen ? ' active' : ''}`}
+              onClick={onToggleTradeDrawer}
+              title="Trade — Connect your broker"
+              style={{ display: 'inline-flex', alignItems: 'center', gap: 5, padding: '4px 8px', fontSize: 12 }}
+            >
+              <svg viewBox="0 0 16 16" width="11" height="11" fill="none" stroke="currentColor" strokeWidth="1.6">
+                <rect x="1.5" y="3" width="13" height="10" rx="1.5" />
+                <line x1="5" y1="8" x2="11" y2="8" />
+                <line x1="8" y1="5" x2="8" y2="11" />
+              </svg>
+              Trade
+            </button>
+            <div className="toolbar-sep" />
+          </>
+        )}
+        <LayoutMenu
+          currentName={currentLayoutName}
+          currentLayoutId={currentLayoutId}
+          autoSave={autoSave}
+          onFetchLayouts={onFetchLayouts}
+          onSave={onSaveLayout}
+          onLoad={onLoadLayout}
+          onRename={onRenameLayout}
+          onCopy={onCopyLayout}
+          onToggleAutoSave={onToggleAutoSave}
+          onDelete={onDeleteLayout}
+          onOpenInNewTab={onOpenLayoutInNewTab}
+        />
+        <button
+          onClick={onToggleTheme}
+          title={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
+          style={{ fontSize: 14, padding: '4px 8px' }}
+        >
+          {theme === 'dark' ? '☀' : '☾'}
+        </button>
+        {/* Screenshot */}
+        <div ref={ssRef} style={{ position: 'relative' }}>
+          <button
+            className={ssOpen ? 'active' : undefined}
+            onClick={() => setSsOpen((o) => !o)}
+            title="Screenshot"
+            style={{ display: 'inline-flex', alignItems: 'center', padding: '4px 7px' }}
+          >
+            <svg viewBox="0 0 16 16" width="14" height="14" stroke="currentColor" fill="none" strokeWidth="1.5">
+              <rect x="2" y="4" width="12" height="9" rx="1" />
+              <circle cx="8" cy="8.5" r="2.5" />
+              <path d="M6 4l1-2h2l1 2" />
+            </svg>
+          </button>
+          {ssOpen && (
+            <div className="ss-dropdown">
+              <button className="ss-dropdown-item" onClick={() => { setSsOpen(false); onCopyScreenshot(); }}>
+                <svg viewBox="0 0 16 16" width="13" height="13" stroke="currentColor" fill="none" strokeWidth="1.5">
+                  <rect x="5" y="5" width="9" height="9" rx="1" />
+                  <path d="M3 11H2a1 1 0 01-1-1V2a1 1 0 011-1h8a1 1 0 011 1v1" />
+                </svg>
+                Copy to Clipboard
+              </button>
+              <button className="ss-dropdown-item" onClick={() => { setSsOpen(false); onDownloadScreenshot(); }}>
+                <svg viewBox="0 0 16 16" width="13" height="13" stroke="currentColor" fill="none" strokeWidth="1.5" strokeLinecap="round">
+                  <line x1="8" y1="2" x2="8" y2="11" />
+                  <polyline points="4,7 8,11 12,7" />
+                  <line x1="2" y1="14" x2="14" y2="14" />
+                </svg>
+                Download PNG
+              </button>
+            </div>
+          )}
+        </div>
+        {/* Fullscreen */}
+        <button
+          onClick={onFullscreen}
+          title={isFullscreen ? 'Exit Fullscreen' : 'Fullscreen'}
+          style={{ display: 'inline-flex', alignItems: 'center', padding: '4px 7px' }}
+        >
+          {isFullscreen ? (
+            <svg viewBox="0 0 16 16" width="14" height="14" stroke="currentColor" fill="none" strokeWidth="1.5">
+              <path d="M6 2v4H2M10 2v4h4M10 14v-4h4M6 14v-4H2" />
+            </svg>
+          ) : (
+            <svg viewBox="0 0 16 16" width="14" height="14" stroke="currentColor" fill="none" strokeWidth="1.5">
+              <path d="M2 6V2h4M10 2h4v4M14 10v4h-4M6 14H2v-4" />
+            </svg>
+          )}
+        </button>
+      </div>
+    </div>
+  );
+}

package/tsconfig.json

@@ -4,6 +4,7 @@
     "outDir": "./dist",
     "rootDir": "./src",
     "composite": true,
+    "jsx": "react-jsx",
     "lib": ["ES2022", "DOM", "DOM.Iterable"],
     "baseUrl": ".",
     "paths": {
@@ -18,5 +19,5 @@
     { "path": "../types" },
     { "path": "../utils" }
   ],
-  "include": ["src/**/*.ts"]
+  "include": ["src/**/*.ts", "src/**/*.tsx"]
 }

package/tsup.config.ts

@@ -1,7 +1,7 @@
 import { defineConfig } from 'tsup';
 
 export default defineConfig({
-  entry: ['src/index.ts', 'src/internal.ts'],
+  entry: ['src/index.ts', 'src/internal.ts', 'src/react/index.ts', 'src/react/internal.ts'],
   format: ['esm'],
   dts: false,
   sourcemap: true,
@@ -10,6 +10,7 @@ export default defineConfig({
   treeshake: true,
   // Force .js extension so package.json exports map ("./dist/index.js") resolves correctly
   outExtension: () => ({ js: '.js' }),
-  // No bundling of @forgecharts/* siblings — consumers share the same workspace  
-  external: ['@forgecharts/types', '@forgecharts/utils'],
+  // Only pixi.js and React are true external runtime deps for consumers.
+  // @forgecharts/types, utils, shared are bundled in.
+  external: ['pixi.js', 'react', 'react-dom'],
 });