@forgecharts/sdk 1.1.27 → 1.1.28

package/src/react/workspace/IndicatorsDialog.tsx

@@ -1,246 +0,0 @@
-import { useState, useEffect, useRef } from 'react';
-import type { IndicatorConfig } from '@forgecharts/types';
-
-// ── Indicator catalogue ───────────────────────────────────────────────────────
-
-type CatalogEntry = {
-  type: IndicatorConfig['type'];
-  label: string;
-  description: string;
-  author: string;
-  category: Category;
-  defaultConfig: IndicatorConfig;
-};
-
-type Category = 'All' | 'Trend' | 'Momentum' | 'Volume' | 'Volatility';
-const CATEGORIES: Category[] = ['All', 'Trend', 'Momentum', 'Volume', 'Volatility'];
-
-// Sorted alphabetically by label
-const CATALOGUE: CatalogEntry[] = [
-  {
-    type: 'atr',
-    label: 'ATR',
-    description: 'Average True Range — measures market volatility as the average of true ranges.',
-    author: 'ForgeCharts',
-    category: 'Volatility',
-    defaultConfig: { type: 'atr', params: { period: 14 }, overlay: false },
-  },
-  {
-    type: 'bbands',
-    label: 'Bollinger Bands',
-    description: 'Volatility bands placed above and below an SMA at ±N standard deviations.',
-    author: 'ForgeCharts',
-    category: 'Trend',
-    defaultConfig: { type: 'bbands', params: { period: 20, multiplier: 2 }, overlay: true },
-  },
-  {
-    type: 'ema',
-    label: 'EMA',
-    description: 'Exponential Moving Average — weights recent bars more heavily.',
-    author: 'ForgeCharts',
-    category: 'Trend',
-    defaultConfig: { type: 'ema', params: { period: 20 }, overlay: true },
-  },
-  {
-    type: 'macd',
-    label: 'MACD',
-    description: 'Moving Average Convergence/Divergence — trend-following momentum oscillator.',
-    author: 'ForgeCharts',
-    category: 'Momentum',
-    defaultConfig: { type: 'macd', params: { fast: 12, slow: 26, signal: 9 }, overlay: false },
-  },
-  {
-    type: 'obv',
-    label: 'OBV',
-    description: 'On-Balance Volume — running tally that adds/subtracts volume based on direction.',
-    author: 'ForgeCharts',
-    category: 'Volume',
-    defaultConfig: { type: 'obv', overlay: false },
-  },
-  {
-    type: 'rsi',
-    label: 'RSI',
-    description: 'Relative Strength Index — measures speed and magnitude of price changes (0–100).',
-    author: 'ForgeCharts',
-    category: 'Momentum',
-    defaultConfig: { type: 'rsi', params: { period: 14 }, overlay: false },
-  },
-  {
-    type: 'sma',
-    label: 'SMA',
-    description: 'Simple Moving Average — average closing price over N bars.',
-    author: 'ForgeCharts',
-    category: 'Trend',
-    defaultConfig: { type: 'sma', params: { period: 20 }, overlay: true },
-  },
-  {
-    type: 'stochastic',
-    label: 'Stochastic',
-    description: 'Stochastic Oscillator — compares closing price to high-low range over N bars.',
-    author: 'ForgeCharts',
-    category: 'Momentum',
-    defaultConfig: { type: 'stochastic', params: { k: 14, d: 3 }, overlay: false },
-  },
-  {
-    type: 'volume',
-    label: 'Volume',
-    description: 'Bar volume rendered as a histogram in a separate sub-pane.',
-    author: 'ForgeCharts',
-    category: 'Volume',
-    defaultConfig: { type: 'volume', overlay: false },
-  },
-  {
-    type: 'wma',
-    label: 'WMA',
-    description: 'Weighted Moving Average — linearly weighted toward recent bars.',
-    author: 'ForgeCharts',
-    category: 'Trend',
-    defaultConfig: { type: 'wma', params: { period: 20 }, overlay: true },
-  },
-];
-
-// ── Props ─────────────────────────────────────────────────────────────────────
-
-type Props = {
-  onAdd: (config: IndicatorConfig) => void;
-  onClose: () => void;
-};
-
-// ── Component ─────────────────────────────────────────────────────────────────
-
-export function IndicatorsDialog({ onAdd, onClose }: Props) {
-  const [category, setCategory] = useState<Category>('All');
-  const [query, setQuery] = useState('');
-  const [added, setAdded] = useState<string | null>(null);
-  const dialogRef = useRef<HTMLDivElement>(null);
-  const inputRef  = useRef<HTMLInputElement>(null);
-
-  useEffect(() => { inputRef.current?.focus(); }, []);
-
-  useEffect(() => {
-    const handler = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
-    window.addEventListener('keydown', handler);
-    return () => window.removeEventListener('keydown', handler);
-  }, [onClose]);
-
-  const handleBackdrop = (e: React.MouseEvent) => {
-    if (dialogRef.current && !dialogRef.current.contains(e.target as Node)) onClose();
-  };
-
-  const q = query.trim().toLowerCase();
-  const visible = CATALOGUE.filter((entry) => {
-    const matchesCat = category === 'All' || entry.category === category;
-    const matchesQ   = !q || entry.label.toLowerCase().includes(q) || entry.description.toLowerCase().includes(q);
-    return matchesCat && matchesQ;
-  });
-
-  const handleAdd = (entry: CatalogEntry) => {
-    onAdd(entry.defaultConfig);
-    setAdded(entry.type);
-    setTimeout(() => setAdded(null), 1400);
-  };
-
-  return (
-    <div className="ind-backdrop" onMouseDown={handleBackdrop}>
-      <div className="ind-dialog" ref={dialogRef} role="dialog" aria-modal="true" aria-label="Indicators">
-
-        {/* Header */}
-        <div className="ind-header">
-          <span className="ind-title">Indicators</span>
-          <button className="ind-close" onClick={onClose} aria-label="Close">
-            <svg viewBox="0 0 14 14" width="12" height="12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" fill="none">
-              <line x1="2" y1="2" x2="12" y2="12" /><line x1="12" y1="2" x2="2" y2="12" />
-            </svg>
-          </button>
-        </div>
-
-        {/* Search */}
-        <div className="ind-search-row">
-          <svg viewBox="0 0 16 16" width="13" height="13" stroke="currentColor" fill="none" strokeWidth="1.8" strokeLinecap="round" style={{ opacity: 0.5, flexShrink: 0 }}>
-            <circle cx="6.5" cy="6.5" r="4.5" /><line x1="10.5" y1="10.5" x2="14" y2="14" />
-          </svg>
-          <input
-            ref={inputRef}
-            className="ind-search-input"
-            type="text"
-            value={query}
-            onChange={(e) => setQuery(e.target.value)}
-            placeholder="Search indicators…"
-            autoComplete="off"
-            spellCheck={false}
-          />
-          {query && (
-            <button className="ind-search-clear" onClick={() => setQuery('')} aria-label="Clear">
-              <svg viewBox="0 0 12 12" width="10" height="10" stroke="currentColor" strokeWidth="2" strokeLinecap="round" fill="none">
-                <line x1="2" y1="2" x2="10" y2="10" /><line x1="10" y1="2" x2="2" y2="10" />
-              </svg>
-            </button>
-          )}
-        </div>
-
-        {/* Category tabs */}
-        <div className="ind-tabs">
-          {CATEGORIES.map((cat) => (
-            <button
-              key={cat}
-              className={`ind-tab${cat === category ? ' active' : ''}`}
-              onClick={() => setCategory(cat)}
-            >
-              {cat}
-            </button>
-          ))}
-        </div>
-
-        {/* Indicator list */}
-        <div className="ind-list-wrap">
-          {visible.length === 0 ? (
-            <div className="ind-empty">No indicators match "{query}"</div>
-          ) : (
-            <>
-              <div className="ind-section-hdr">
-                <span>Built-in</span>
-                <span className="ind-section-count">{visible.length}</span>
-              </div>
-              {visible.map((entry) => {
-                const isAdded = added === entry.type;
-                return (
-                  <button
-                    key={entry.type}
-                    className={`ind-list-row${isAdded ? ' added' : ''}`}
-                    onClick={() => handleAdd(entry)}
-                  >
-                    <div className="ind-list-info">
-                      <span className="ind-list-name">{entry.label}</span>
-                      <span className="ind-list-meta">{entry.author} · {entry.category}</span>
-                    </div>
-                    <span className={`ind-list-badge${entry.defaultConfig.overlay ? ' overlay' : ' pane'}`}>
-                      {entry.defaultConfig.overlay ? 'Overlay' : 'Pane'}
-                    </span>
-                    <span className="ind-list-add">
-                      {isAdded ? (
-                        <>
-                          <svg viewBox="0 0 12 10" width="11" height="10" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" fill="none">
-                            <polyline points="1,5 4,8 11,1" />
-                          </svg>
-                          Added
-                        </>
-                      ) : (
-                        <>
-                          <svg viewBox="0 0 12 12" width="11" height="11" stroke="currentColor" strokeWidth="2" strokeLinecap="round" fill="none">
-                            <line x1="6" y1="1" x2="6" y2="11" /><line x1="1" y1="6" x2="11" y2="6" />
-                          </svg>
-                          Add to Chart
-                        </>
-                      )}
-                    </span>
-                  </button>
-                );
-              })}
-            </>
-          )}
-        </div>
-
-      </div>
-    </div>
-  );
-}

package/src/react/workspace/LayoutMenu.tsx

@@ -1,345 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-
-export type LayoutRecord = {
-  id: string;
-  name: string;
-  symbol: string;
-  timeframe: string;
-  config: Record<string, unknown>;
-  is_default: boolean;
-  created_at: string;
-  updated_at: string;
-};
-
-type Props = {
-  /** Name of the currently loaded layout (if saved). */
-  currentName?: string | undefined;
-  /** DB id of the currently active layout — used to highlight it in the list. */
-  currentLayoutId?: string | undefined;
-  /** Whether auto-save is currently enabled for the active tab. */
-  autoSave: boolean;
-  /**
-   * Called by LayoutMenu to fetch the current list of saved layouts when the
-   * menu opens. Should return the full list from the server.
-   */
-  onFetchLayouts: () => Promise<LayoutRecord[]>;
-  onSave: (name: string) => Promise<void>;
-  onLoad: (layoutId: string) => Promise<void>;
-  onRename: (newName: string) => Promise<void>;
-  onCopy: (newName: string) => Promise<void>;
-  onToggleAutoSave: (enabled: boolean) => void;
-  onDelete: (id: string) => Promise<void>;
-  onOpenInNewTab: (id: string) => Promise<void>;
-};
-
-type View = 'menu' | 'save' | 'rename' | 'copy';
-
-export function LayoutMenu({
-  currentName,
-  currentLayoutId,
-  autoSave,
-  onFetchLayouts,
-  onSave,
-  onLoad,
-  onRename,
-  onCopy,
-  onToggleAutoSave,
-  onDelete,
-  onOpenInNewTab,
-}: Props) {
-  const [open, setOpen] = useState(false);
-  const [view, setView] = useState<View>('menu');
-  const [inputVal, setInputVal] = useState('');
-  const [busy, setBusy] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [layouts, setLayouts] = useState<LayoutRecord[]>([]);
-  const [loadError, setLoadError] = useState<string | null>(null);
-  const [fetching, setFetching] = useState(false);
-  const [confirmDelete, setConfirmDelete] = useState<{ id: string; name: string } | null>(null);
-  const menuRef = useRef<HTMLDivElement>(null);
-
-  // Close on outside click
-  useEffect(() => {
-    if (!open) return;
-    const handler = (e: MouseEvent) => {
-      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
-        setOpen(false);
-        setView('menu');
-      }
-    };
-    document.addEventListener('mousedown', handler);
-    return () => document.removeEventListener('mousedown', handler);
-  }, [open]);
-
-  // Fetch saved layouts when menu opens
-  useEffect(() => {
-    if (!open) return;
-    setLoadError(null);
-    setFetching(true);
-    onFetchLayouts()
-      .then(setLayouts)
-      .catch((err: Error) => setLoadError(err.message))
-      .finally(() => setFetching(false));
-  }, [open]);
-
-  const isSaved = !!currentLayoutId;
-
-  function openMenu() {
-    setError(null);
-    setView('menu');
-    setOpen((o) => !o);
-  }
-
-  function startView(v: View, prefill: string) {
-    setInputVal(prefill);
-    setError(null);
-    setView(v);
-  }
-
-  async function handleSubmit(action: (name: string) => Promise<void>) {
-    const name = inputVal.trim();
-    if (!name) return;
-    setBusy(true);
-    setError(null);
-    try {
-      await action(name);
-      setOpen(false);
-      setView('menu');
-    } catch (err: unknown) {
-      setError(err instanceof Error ? err.message : 'Action failed');
-    } finally {
-      setBusy(false);
-    }
-  }
-
-  async function handleLoad(id: string) {
-    setOpen(false);
-    try {
-      await onLoad(id);
-    } catch (err: unknown) {
-      // Silently ignore — App.tsx surfaces errors via tab state
-      console.error('Load layout error:', err);
-    }
-  }
-
-  async function handleOpenInNewTabLocal(id: string) {
-    setOpen(false);
-    try {
-      await onOpenInNewTab(id);
-    } catch (err: unknown) {
-      console.error('Open layout in new tab error:', err);
-    }
-  }
-
-  async function handleConfirmDelete() {
-    if (!confirmDelete) return;
-    try {
-      await onDelete(confirmDelete.id);
-      setLayouts((prev) => prev.filter((l) => l.id !== confirmDelete.id));
-      setConfirmDelete(null);
-    } catch {
-      setConfirmDelete(null);
-    }
-  }
-
-  function fmtError(msg: string) {
-    return msg.includes('401') || msg.includes('Missing authorization')
-      ? 'Sign in to use layouts'
-      : msg;
-  }
-
-  function renderForm(
-    label: string,
-    placeholder: string,
-    action: (name: string) => Promise<void>,
-    note?: string,
-  ) {
-    return (
-      <div className="layout-save-form">
-        <div className="layout-save-label">{label}</div>
-        {note && <div className="layout-dropdown-empty" style={{ padding: '0 0 4px' }}>{note}</div>}
-        <input
-          className="layout-save-input"
-          value={inputVal}
-          onChange={(e) => setInputVal(e.target.value)}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter') handleSubmit(action);
-            if (e.key === 'Escape') setView('menu');
-          }}
-          placeholder={placeholder}
-          autoFocus
-        />
-        {error && (
-          <div className="layout-dropdown-error" style={{ padding: 0, fontSize: 11 }}>
-            {fmtError(error)}
-          </div>
-        )}
-        <div className="layout-save-actions">
-          <button onClick={() => setView('menu')}>Cancel</button>
-          <button
-            className={inputVal.trim() && !busy ? 'active' : undefined}
-            onClick={() => handleSubmit(action)}
-            disabled={busy || !inputVal.trim()}
-          >
-            {busy ? 'Saving…' : 'Save'}
-          </button>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="layout-menu-root" ref={menuRef}>
-      <button
-        className={open ? 'active' : undefined}
-        onClick={openMenu}
-        title="Manage chart layouts"
-        style={{ display: 'flex', alignItems: 'center', gap: 4 }}
-      >
-        <svg viewBox="0 0 14 14" width="12" height="12" fill="currentColor">
-          <rect x="1" y="1" width="5" height="5" rx="1" />
-          <rect x="8" y="1" width="5" height="5" rx="1" />
-          <rect x="1" y="8" width="5" height="5" rx="1" />
-          <rect x="8" y="8" width="5" height="5" rx="1" />
-        </svg>
-        {currentName ?? 'Layout'} ▾
-        {autoSave && isSaved && (
-          <span className="layout-autosave-dot" title="Auto-save enabled" />
-        )}
-      </button>
-
-      {open && (
-        <div className="layout-dropdown">
-          {view === 'menu' && (
-            <>
-              {/* ── Auto-save toggle ──────────────────────────────────── */}
-              <label className="layout-dropdown-item layout-autosave-row">
-                <svg className="layout-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-                  <polyline points="23 4 23 10 17 10"/>
-                  <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/>
-                </svg>
-                Auto-save
-                <span className="layout-autosave-status">
-                  {autoSave && isSaved && <span style={{ color: 'var(--up)' }}>ON</span>}
-                  {autoSave && !isSaved && <span style={{ color: 'var(--text-muted)' }}>save first</span>}
-                </span>
-                <span
-                  className={`layout-toggle-switch${autoSave ? ' on' : ''}`}
-                  onClick={(e) => { e.preventDefault(); onToggleAutoSave(!autoSave); }}
-                  role="switch"
-                  aria-checked={autoSave}
-                >
-                  <span className="layout-toggle-thumb" />
-                </span>
-              </label>
-
-              <div className="layout-dropdown-divider" />
-
-              {/* ── Action buttons ────────────────────────────────────── */}
-              <button
-                className="layout-dropdown-item"
-                onClick={() => startView('save', currentName ?? '')}
-              >
-                <svg className="layout-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-                  <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
-                  <polyline points="17 21 17 13 7 13 7 21"/>
-                  <polyline points="7 3 7 8 15 8"/>
-                </svg>
-                Save layout…
-              </button>
-
-              {isSaved && (
-                <button
-                  className="layout-dropdown-item"
-                  onClick={() => startView('rename', currentName ?? '')}
-                >
-                  <svg className="layout-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-                    <path d="M12 20h9"/>
-                    <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z"/>
-                  </svg>
-                  Rename…
-                </button>
-              )}
-
-              <button
-                className="layout-dropdown-item"
-                onClick={() => startView('copy', `${currentName ?? 'Layout'} copy`)}
-              >
-                <svg className="layout-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-                  <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
-                  <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
-                </svg>
-                Copy layout…
-              </button>
-
-              <div className="layout-dropdown-divider" />
-
-              {/* ── Saved layouts list ────────────────────────────────── */}
-              {fetching && <div className="layout-dropdown-empty">Loading…</div>}
-              {!fetching && loadError && (
-                <div className="layout-dropdown-error">{fmtError(loadError)}</div>
-              )}
-              {!fetching && !loadError && layouts.length === 0 && (
-                <div className="layout-dropdown-empty">No saved layouts yet</div>
-              )}
-              {!fetching && !loadError && layouts.length > 0 && (
-                <>
-                  <div className="layout-dropdown-section">Saved layouts</div>
-                  {layouts.map((l) => (
-                    <div key={l.id} style={{ display: 'flex', alignItems: 'center' }}>
-                      <button
-                        className={`layout-dropdown-item${l.id === currentLayoutId ? ' layout-dropdown-item--current' : ''}`}
-                        onClick={() => l.id === currentLayoutId ? handleLoad(l.id) : handleOpenInNewTabLocal(l.id)}
-                        title={`${l.symbol} · ${l.timeframe} · ${new Date(l.updated_at).toLocaleDateString()}`}
-                        style={{ flex: 1, textAlign: 'left' }}
-                      >
-                        {l.id === currentLayoutId ? (
-                          <svg className="layout-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-                            <polyline points="20 6 9 17 4 12"/>
-                          </svg>
-                        ) : (
-                          <svg className="layout-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-                            <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
-                          </svg>
-                        )}
-                        <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', minWidth: 0 }}>{l.name}</span>
-                      </button>
-                      <button
-                        onClick={(e) => { e.stopPropagation(); setConfirmDelete({ id: l.id, name: l.name }); }}
-                        title="Delete layout"
-                        style={{ padding: '4px 8px', opacity: 0.45, flexShrink: 0, lineHeight: 1, width: 'auto' }}
-                        className="layout-dropdown-item"
-                      >
-                        ✕
-                      </button>
-                    </div>
-                  ))}
-                </>
-              )}
-              {confirmDelete && (
-                <div style={{ padding: '8px 12px', borderTop: '1px solid var(--border)' }}>
-                  <div style={{ fontSize: 12, marginBottom: 8 }}>
-                    Delete <strong>{confirmDelete.name}</strong>? This cannot be undone.
-                  </div>
-                  <div style={{ display: 'flex', gap: 6, justifyContent: 'flex-end' }}>
-                    <button onClick={() => setConfirmDelete(null)}>Cancel</button>
-                    <button onClick={handleConfirmDelete} style={{ color: 'var(--down, #ef5350)' }}>Delete</button>
-                  </div>
-                </div>
-              )}
-            </>
-          )}
-
-          {view === 'save' && renderForm('Layout name', 'My layout', onSave)}
-          {view === 'rename' && renderForm('Rename layout', currentName ?? 'Layout', onRename)}
-          {view === 'copy' && renderForm(
-            'Copy to new layout',
-            `${currentName ?? 'Layout'} copy`,
-            onCopy,
-            'Creates a copy of the current layout in a new tab.',
-          )}
-        </div>
-      )}
-    </div>
-  );
-}