@forgecharts/sdk 1.1.27 → 1.1.28

package/src/react/canvas/ChartContextMenu.tsx

@@ -1,60 +0,0 @@
-/**
- * ChartContextMenu — right-click context menu for the chart canvas.
- *
- * Placed at fixed (x, y) on screen. Clicking outside dismisses it via the
- * transparent backdrop. The parent is responsible for calling onClose.
- */
-
-type Props = {
-  x: number;
-  y: number;
-  onClose: () => void;
-  onSettings: () => void;
-  onClearDrawings: () => void;
-  onClearIndicators: () => void;
-  onResetView: () => void;
-};
-
-export function ChartContextMenu({
-  x,
-  y,
-  onClose,
-  onSettings,
-  onClearDrawings,
-  onClearIndicators,
-  onResetView,
-}: Props) {
-  return (
-    <>
-      <div className="chart-ctx-backdrop" onClick={onClose} onContextMenu={(e) => { e.preventDefault(); onClose(); }} />
-      <div className="chart-ctx-menu" style={{ left: x, top: y }}>
-        <button
-          className="chart-ctx-item"
-          onClick={() => { onSettings(); onClose(); }}
-        >
-          Settings…
-        </button>
-        <div className="chart-ctx-divider" />
-        <button
-          className="chart-ctx-item"
-          onClick={() => { onResetView(); onClose(); }}
-        >
-          Reset Chart View
-        </button>
-        <div className="chart-ctx-divider" />
-        <button
-          className="chart-ctx-item chart-ctx-item--danger"
-          onClick={() => { onClearIndicators(); onClose(); }}
-        >
-          Clear Indicators
-        </button>
-        <button
-          className="chart-ctx-item chart-ctx-item--danger"
-          onClick={() => { onClearDrawings(); onClose(); }}
-        >
-          Clear Drawings
-        </button>
-      </div>
-    </>
-  );
-}

package/src/react/canvas/ChartSettingsDialog.tsx

@@ -1,133 +0,0 @@
-/**
- * ChartSettingsDialog — canvas settings modal.
- *
- * Sections (sidebar nav):
- *  • Canvas — background color, grid visibility, grid color
- *
- * Additional sections can be added by extending SECTIONS and adding a matching
- * content renderer in renderContent().
- *
- * The parent passes `initialSettings` and receives the final values via `onApply`.
- * Nothing is persisted here; persistence (localStorage / DB) lives in the parent.
- */
-
-import { useState } from 'react';
-
-export type CanvasSettings = {
-  background: string;
-  gridColor: string;
-  gridVisible: boolean;
-};
-
-type Section = 'canvas';
-
-const SECTIONS: { id: Section; label: string }[] = [
-  { id: 'canvas', label: 'Canvas' },
-];
-
-type Props = {
-  initialSettings: CanvasSettings;
-  onApply: (settings: CanvasSettings) => void;
-  onClose: () => void;
-};
-
-export function ChartSettingsDialog({ initialSettings, onApply, onClose }: Props) {
-  const [activeSection, setActiveSection] = useState<Section>('canvas');
-  const [settings, setSettings] = useState<CanvasSettings>(initialSettings);
-
-  const update = <K extends keyof CanvasSettings>(key: K, value: CanvasSettings[K]) =>
-    setSettings((prev) => ({ ...prev, [key]: value }));
-
-  const handleApply = () => {
-    onApply(settings);
-    onClose();
-  };
-
-  return (
-    <div className="csettings-backdrop" onClick={onClose}>
-      <div className="csettings-dialog" onClick={(e) => e.stopPropagation()}>
-
-        {/* ── Header ──────────────────────────────────────────────────── */}
-        <div className="csettings-header">
-          <span className="csettings-title">Chart Settings</span>
-          <button className="csettings-close" onClick={onClose} aria-label="Close">✕</button>
-        </div>
-
-        <div className="csettings-body">
-          {/* ── Sidebar ─────────────────────────────────────────────── */}
-          <nav className="csettings-sidebar">
-            {SECTIONS.map(({ id, label }) => (
-              <button
-                key={id}
-                className={`csettings-nav-item${activeSection === id ? ' is-active' : ''}`}
-                onClick={() => setActiveSection(id)}
-              >
-                {label}
-              </button>
-            ))}
-          </nav>
-
-          {/* ── Content ─────────────────────────────────────────────── */}
-          <div className="csettings-content">
-            {activeSection === 'canvas' && (
-              <div className="csettings-section">
-
-                <div className="csettings-row">
-                  <label className="csettings-label">Background</label>
-                  <div className="csettings-color-wrap">
-                    <input
-                      type="color"
-                      className="csettings-color-input"
-                      value={settings.background}
-                      onChange={(e) => update('background', e.target.value)}
-                    />
-                    <span className="csettings-color-hex">{settings.background}</span>
-                  </div>
-                </div>
-
-                <div className="csettings-row">
-                  <label className="csettings-label">Grid Lines</label>
-                  <label className="csettings-toggle">
-                    <input
-                      type="checkbox"
-                      checked={settings.gridVisible}
-                      onChange={(e) => update('gridVisible', e.target.checked)}
-                    />
-                    <span className="csettings-toggle-track" />
-                  </label>
-                </div>
-
-                {settings.gridVisible && (
-                  <div className="csettings-row">
-                    <label className="csettings-label">Grid Color</label>
-                    <div className="csettings-color-wrap">
-                      <input
-                        type="color"
-                        className="csettings-color-input"
-                        value={settings.gridColor}
-                        onChange={(e) => update('gridColor', e.target.value)}
-                      />
-                      <span className="csettings-color-hex">{settings.gridColor}</span>
-                    </div>
-                  </div>
-                )}
-
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* ── Footer ──────────────────────────────────────────────────── */}
-        <div className="csettings-footer">
-          <button className="csettings-btn csettings-btn--ghost" onClick={onClose}>
-            Cancel
-          </button>
-          <button className="csettings-btn csettings-btn--primary" onClick={handleApply}>
-            Apply
-          </button>
-        </div>
-
-      </div>
-    </div>
-  );
-}

package/src/react/canvas/IndicatorLabel.tsx

@@ -1,347 +0,0 @@
-/**
- * IndicatorLabel — hover-menu label rendered over a chart pane.
- *
- * Shows the indicator display name in the top-left of a pane.
- * On hover a gear (configure) and × (remove) button appear inline, giving the
- * appearance that the menu is part of the label pill.
- */
-
-import { useState } from 'react';
-import type { IndicatorConfig, IndicatorInstance } from '@forgecharts/types';
-
-// ─── Script title extractor ────────────────────────────────────────────────────
-
-function _scriptTitle(src: string): string {
-  const m = src.match(/indicator\s*\(\s*["']([^"']+)["']/);
-  return m ? m[1]! : 'Script';
-}
-
-// ─── Display name helper ──────────────────────────────────────────────────────
-
-export function indicatorDisplayName(config: IndicatorConfig): string {
-  const p = (config.params ?? {}) as Record<string, unknown>;
-  switch (config.type) {
-    case 'sma':        return `SMA(${p['period'] ?? 20})`;
-    case 'ema':        return `EMA(${p['period'] ?? 20})`;
-    case 'wma':        return `WMA(${p['period'] ?? 20})`;
-    case 'rsi':        return `RSI(${p['period'] ?? 14})`;
-    case 'macd':       return `MACD(${p['fast'] ?? 12},${p['slow'] ?? 26},${p['signal'] ?? 9})`;
-    case 'bbands':     return `BB(${p['period'] ?? 20},${p['multiplier'] ?? 2})`;
-    case 'stochastic': return `Stoch(${p['k'] ?? 14},${p['d'] ?? 3})`;
-    case 'atr':        return `ATR(${p['period'] ?? 14})`;
-    case 'obv':        return 'OBV';
-    case 'volume':     return 'Volume';
-    case 'script':     return config.script ? _scriptTitle(config.script) : 'Script';
-    default:           return (config.type as string).toUpperCase();
-  }
-}
-
-// ─── Param definitions for config dialog ─────────────────────────────────────
-
-type ParamDef = { key: string; label: string; min?: number; step?: number };
-
-const PARAM_DEFS: Record<string, ParamDef[]> = {
-  sma:        [{ key: 'period',     label: 'Period',     min: 1 }],
-  ema:        [{ key: 'period',     label: 'Period',     min: 1 }],
-  wma:        [{ key: 'period',     label: 'Period',     min: 1 }],
-  rsi:        [{ key: 'period',     label: 'Period',     min: 1 }],
-  macd:       [
-    { key: 'fast',       label: 'Fast',       min: 1 },
-    { key: 'slow',       label: 'Slow',       min: 1 },
-    { key: 'signal',     label: 'Signal',     min: 1 },
-  ],
-  bbands:     [
-    { key: 'period',     label: 'Period',     min: 1 },
-    { key: 'multiplier', label: 'Multiplier', min: 0.1, step: 0.1 },
-  ],
-  stochastic: [
-    { key: 'k',          label: 'K Period',   min: 1 },
-    { key: 'd',          label: 'D Period',   min: 1 },
-  ],
-  atr:        [{ key: 'period',     label: 'Period',     min: 1 }],
-};
-
-// ─── IndicatorLabel ────────────────────────────────────────────────────────────
-
-export function IndicatorLabel({
-  indicator,
-  color,
-  onRemove,
-  onConfigure,
-}: {
-  indicator: IndicatorInstance;
-  color?: string;
-  onRemove: () => void;
-  onConfigure: () => void;
-}) {
-  const [hovered, setHovered] = useState(false);
-  const name = indicatorDisplayName(indicator.config);
-  const hasDefs = Boolean(PARAM_DEFS[indicator.config.type]);
-
-  const btnStyle: React.CSSProperties = {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: 18,
-    height: '100%',
-    border: 'none',
-    borderLeft: '1px solid rgba(255,255,255,0.08)',
-    background: 'transparent',
-    color: '#787b86',
-    cursor: 'pointer',
-    fontSize: 10,
-    padding: 0,
-    lineHeight: 1,
-    flexShrink: 0,
-  };
-
-  return (
-    <div
-      style={{
-        display: 'inline-flex',
-        alignItems: 'stretch',
-        height: 18,
-        borderRadius: 3,
-        overflow: 'hidden',
-        background: 'rgba(0,0,0,0.5)',
-        cursor: 'default',
-        userSelect: 'none',
-      }}
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
-    >
-      {/* Name */}
-      <span
-        style={{
-          color: color ?? '#d1d4dc',
-          fontSize: 11,
-          fontFamily: '-apple-system, BlinkMacSystemFont, sans-serif',
-          fontWeight: 500,
-          padding: '0 5px',
-          display: 'flex',
-          alignItems: 'center',
-        }}
-      >
-        {name}
-      </span>
-
-      {/* Hover actions */}
-      {hovered && (
-        <>
-          {hasDefs && (
-            <button
-              onClick={(e) => { e.stopPropagation(); onConfigure(); }}
-              title="Configure"
-              style={btnStyle}
-            >
-              ⚙
-            </button>
-          )}
-          <button
-            onClick={(e) => { e.stopPropagation(); onRemove(); }}
-            title="Remove"
-            style={{ ...btnStyle, borderRadius: '0 3px 3px 0' }}
-          >
-            ✕
-          </button>
-        </>
-      )}
-    </div>
-  );
-}
-
-// ─── IndicatorConfigDialog ─────────────────────────────────────────────────────
-
-export function IndicatorConfigDialog({
-  indicator,
-  onSave,
-  onClose,
-}: {
-  indicator: IndicatorInstance;
-  onSave: (newConfig: IndicatorConfig) => void;
-  onClose: () => void;
-}) {
-  const defs = PARAM_DEFS[indicator.config.type] ?? [];
-  const [values, setValues] = useState<Record<string, string>>(() => {
-    const p = (indicator.config.params ?? {}) as Record<string, unknown>;
-    return Object.fromEntries(defs.map((d) => [d.key, String(p[d.key] ?? '')]));
-  });
-
-  const handleSave = () => {
-    const newParams: Record<string, number | string | boolean> = {
-      ...(indicator.config.params ?? {}),
-    };
-    for (const def of defs) {
-      const v = parseFloat(values[def.key] ?? '');
-      if (!isNaN(v)) newParams[def.key] = v;
-    }
-    onSave({ ...indicator.config, params: newParams });
-  };
-
-  const name = indicatorDisplayName(indicator.config);
-
-  return (
-    <div
-      style={{
-        position: 'fixed',
-        inset: 0,
-        zIndex: 1000,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
-    >
-      {/* Backdrop */}
-      <div
-        onClick={onClose}
-        style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.55)' }}
-      />
-
-      {/* Panel */}
-      <div
-        style={{
-          position: 'relative',
-          background: '#1c2030',
-          border: '1px solid #2a2e39',
-          borderRadius: 8,
-          padding: '20px 24px',
-          minWidth: 280,
-          zIndex: 1,
-          boxShadow: '0 8px 32px rgba(0,0,0,0.6)',
-        }}
-      >
-        {/* Header */}
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            marginBottom: 20,
-          }}
-        >
-          <span
-            style={{
-              color: '#d1d4dc',
-              fontSize: 14,
-              fontWeight: 600,
-              fontFamily: '-apple-system, BlinkMacSystemFont, sans-serif',
-            }}
-          >
-            {name}
-          </span>
-          <button
-            onClick={onClose}
-            style={{
-              background: 'transparent',
-              border: 'none',
-              color: '#787b86',
-              cursor: 'pointer',
-              fontSize: 16,
-              lineHeight: 1,
-              padding: 0,
-            }}
-          >
-            ✕
-          </button>
-        </div>
-
-        {/* Fields */}
-        {defs.map((def) => (
-          <div key={def.key} style={{ marginBottom: 14 }}>
-            <label
-              style={{
-                display: 'block',
-                color: '#787b86',
-                fontSize: 11,
-                marginBottom: 4,
-                textTransform: 'uppercase',
-                letterSpacing: '0.05em',
-                fontFamily: '-apple-system, BlinkMacSystemFont, sans-serif',
-              }}
-            >
-              {def.label}
-            </label>
-            <input
-              type="number"
-              value={values[def.key] ?? ''}
-              min={def.min}
-              step={def.step ?? 1}
-              onChange={(e) =>
-                setValues((v) => ({ ...v, [def.key]: e.target.value }))
-              }
-              style={{
-                width: '100%',
-                background: '#131722',
-                border: '1px solid #2a2e39',
-                borderRadius: 4,
-                padding: '6px 8px',
-                color: '#d1d4dc',
-                fontSize: 13,
-                outline: 'none',
-                boxSizing: 'border-box',
-                fontFamily: '-apple-system, BlinkMacSystemFont, sans-serif',
-              }}
-            />
-          </div>
-        ))}
-
-        {defs.length === 0 && (
-          <p
-            style={{
-              color: '#787b86',
-              fontSize: 12,
-              margin: '0 0 16px',
-              fontFamily: '-apple-system, BlinkMacSystemFont, sans-serif',
-            }}
-          >
-            No configurable parameters.
-          </p>
-        )}
-
-        {/* Actions */}
-        <div
-          style={{
-            display: 'flex',
-            gap: 8,
-            justifyContent: 'flex-end',
-            marginTop: defs.length > 0 ? 8 : 0,
-          }}
-        >
-          <button
-            onClick={onClose}
-            style={{
-              background: 'transparent',
-              border: '1px solid #2a2e39',
-              borderRadius: 4,
-              color: '#787b86',
-              padding: '6px 16px',
-              cursor: 'pointer',
-              fontSize: 13,
-              fontFamily: '-apple-system, BlinkMacSystemFont, sans-serif',
-            }}
-          >
-            Cancel
-          </button>
-          {defs.length > 0 && (
-            <button
-              onClick={handleSave}
-              style={{
-                background: '#2962ff',
-                border: 'none',
-                borderRadius: 4,
-                color: '#fff',
-                padding: '6px 16px',
-                cursor: 'pointer',
-                fontSize: 13,
-                fontWeight: 500,
-                fontFamily: '-apple-system, BlinkMacSystemFont, sans-serif',
-              }}
-            >
-              Apply
-            </button>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}