minterm 0.1.0

package/src/themes.js

@@ -0,0 +1,149 @@
+/** Built-in color schemes — apply via applyTheme('amber') or pass a custom object */
+
+export const themes = {
+  // ── Default — the original vivid cyan ──
+  cyber: {
+    '--mt-font': "'Courier New', 'Consolas', monospace",
+    '--mt-font-size': '15px',
+    '--mt-accent': '#0aa',
+    '--mt-accent-bright': '#0ff',
+    '--mt-bg': '#0a0a0a',
+    '--mt-border': '#0aa',
+    '--mt-green': '#0f0',
+    '--mt-red': '#f44',
+    '--mt-yellow': '#ff0',
+    '--mt-cyan': '#0ff',
+    '--mt-magenta': '#f0f',
+    '--mt-orange': '#f80',
+    '--mt-white': '#fff',
+    '--mt-dim': '#666',
+    '--mt-text': '#ccc',
+    '--mt-titlebar-bg': '#0aa',
+    '--mt-titlebar-fg': '#000',
+    '--mt-glow': 'rgba(0, 170, 170, 0.12)',
+    '--mt-glow-strong': 'rgba(0, 170, 170, 0.3)',
+  },
+
+  // ── Muted / low-fatigue themes for long sessions ──
+
+  amber: {
+    '--mt-font': "'VT323', 'Courier New', monospace",
+    '--mt-font-size': '16px',
+    '--mt-accent': '#a08030',
+    '--mt-accent-bright': '#c8a048',
+    '--mt-bg': '#0e0c08',
+    '--mt-border': '#7a6428',
+    '--mt-green': '#6a9a4a',
+    '--mt-red': '#a04a3a',
+    '--mt-yellow': '#c8a048',
+    '--mt-cyan': '#a08858',
+    '--mt-magenta': '#9a6878',
+    '--mt-orange': '#b07838',
+    '--mt-white': '#d0c8a8',
+    '--mt-dim': '#5a5038',
+    '--mt-text': '#a89878',
+    '--mt-titlebar-bg': '#7a6428',
+    '--mt-titlebar-fg': '#0e0c08',
+    '--mt-glow': 'rgba(160, 128, 48, 0.08)',
+    '--mt-glow-strong': 'rgba(160, 128, 48, 0.18)',
+  },
+  phosphor: {
+    '--mt-font': "'IBM Plex Mono', 'Consolas', monospace",
+    '--mt-font-size': '14px',
+    '--mt-accent': '#3a8a3a',
+    '--mt-accent-bright': '#58b858',
+    '--mt-bg': '#080e08',
+    '--mt-border': '#2e6e2e',
+    '--mt-green': '#58b858',
+    '--mt-red': '#a85050',
+    '--mt-yellow': '#90a838',
+    '--mt-cyan': '#58a868',
+    '--mt-magenta': '#7a6a98',
+    '--mt-orange': '#a88038',
+    '--mt-white': '#b0c8a8',
+    '--mt-dim': '#385838',
+    '--mt-text': '#7a9a70',
+    '--mt-titlebar-bg': '#2e6e2e',
+    '--mt-titlebar-fg': '#080e08',
+    '--mt-glow': 'rgba(58, 138, 58, 0.08)',
+    '--mt-glow-strong': 'rgba(58, 138, 58, 0.18)',
+  },
+  hotline: {
+    '--mt-font': "'Share Tech Mono', 'Courier New', monospace",
+    '--mt-font-size': '15px',
+    '--mt-accent': '#9a4070',
+    '--mt-accent-bright': '#c05888',
+    '--mt-bg': '#0e080c',
+    '--mt-border': '#7a3058',
+    '--mt-green': '#5a9a68',
+    '--mt-red': '#b05050',
+    '--mt-yellow': '#b8a050',
+    '--mt-cyan': '#6898a8',
+    '--mt-magenta': '#c05888',
+    '--mt-orange': '#b07848',
+    '--mt-white': '#d0c0c8',
+    '--mt-dim': '#5a4050',
+    '--mt-text': '#a88898',
+    '--mt-titlebar-bg': '#7a3058',
+    '--mt-titlebar-fg': '#0e080c',
+    '--mt-glow': 'rgba(154, 64, 112, 0.08)',
+    '--mt-glow-strong': 'rgba(154, 64, 112, 0.18)',
+  },
+  ice: {
+    '--mt-font': "'Fira Code', 'Consolas', monospace",
+    '--mt-font-size': '14px',
+    '--mt-accent': '#5068a0',
+    '--mt-accent-bright': '#7088c0',
+    '--mt-bg': '#08090e',
+    '--mt-border': '#405080',
+    '--mt-green': '#509878',
+    '--mt-red': '#a85858',
+    '--mt-yellow': '#b0a060',
+    '--mt-cyan': '#6890b0',
+    '--mt-magenta': '#8868a8',
+    '--mt-orange': '#a88050',
+    '--mt-white': '#c0c4d0',
+    '--mt-dim': '#484e60',
+    '--mt-text': '#909ab0',
+    '--mt-titlebar-bg': '#405080',
+    '--mt-titlebar-fg': '#08090e',
+    '--mt-glow': 'rgba(80, 104, 160, 0.08)',
+    '--mt-glow-strong': 'rgba(80, 104, 160, 0.18)',
+  },
+  slate: {
+    '--mt-font': "'JetBrains Mono', 'Menlo', monospace",
+    '--mt-font-size': '14px',
+    '--mt-accent': '#6a7a88',
+    '--mt-accent-bright': '#8898a8',
+    '--mt-bg': '#0c0d0e',
+    '--mt-border': '#4a5a68',
+    '--mt-green': '#58906a',
+    '--mt-red': '#985858',
+    '--mt-yellow': '#a89858',
+    '--mt-cyan': '#6888a0',
+    '--mt-magenta': '#886888',
+    '--mt-orange': '#a08050',
+    '--mt-white': '#b8bcc0',
+    '--mt-dim': '#484c50',
+    '--mt-text': '#8a9098',
+    '--mt-titlebar-bg': '#4a5a68',
+    '--mt-titlebar-fg': '#0c0d0e',
+    '--mt-glow': 'rgba(106, 122, 136, 0.06)',
+    '--mt-glow-strong': 'rgba(106, 122, 136, 0.14)',
+  },
+};
+
+/**
+ * Apply a theme by name or custom object.
+ * @param {string|object} theme — name from built-in themes, or { '--mt-accent': '#f00', ... }
+ * @param {HTMLElement} [root=document.documentElement] — element to set CSS vars on
+ */
+export function applyTheme(theme, root) {
+  const el = root || document.documentElement;
+  const vars = typeof theme === 'string' ? themes[theme] : theme;
+  if (!vars) return;
+  const keys = Object.keys(vars);
+  for (let i = 0, n = keys.length; i < n; i++) {
+    el.style.setProperty(keys[i], vars[keys[i]]);
+  }
+}

package/src/widgets/activity-bars.js

@@ -0,0 +1,55 @@
+/** Animated pulsing activity bars — pure CSS animation */
+
+import { BaseWidget } from './base-widget.js';
+
+export class ActivityBars extends BaseWidget {
+  /**
+   * @param {HTMLElement} container
+   * @param {object} [opts]
+   * @param {number} [opts.count=8] — number of bars
+   * @param {string} [opts.classPrefix='mt']
+   */
+  constructor(container, opts = {}) {
+    super(container, opts);
+    this._count = opts.count ?? 8;
+    this._data = null;
+  }
+
+  /**
+   * Update bars. data = { bars: [{ height, color?, opacity? }] } or just an array.
+   */
+  update(data) {
+    this._data = data;
+    this._schedulePaint();
+  }
+
+  /** Generate random bars (for decorative use) */
+  randomize() {
+    const bars = [];
+    for (let i = 0; i < this._count; i++) {
+      bars.push({
+        height: 12 + Math.random() * 75,
+        color: Math.random() > 0.45 ? 'var(--mt-green, #0f0)' : 'var(--mt-red, #f44)',
+      });
+    }
+    this.update(bars);
+  }
+
+  _onData(val) {
+    this.update(val);
+  }
+
+  _paint() {
+    const pfx = this._pfx;
+    let bars = Array.isArray(this._data) ? this._data : (this._data?.bars || []);
+    if (!bars.length) {
+      bars = [];
+      for (let i = 0; i < this._count; i++) {
+        bars.push({ height: 12 + Math.random() * 75, color: Math.random() > 0.45 ? 'var(--mt-green, #0f0)' : 'var(--mt-red, #f44)' });
+      }
+    }
+    this._container.innerHTML = `<div class="${pfx}-bars">${bars.map(b =>
+      `<div class="${pfx}-bar" style="height:${(b.height || 50).toFixed(0)}%;background:${b.color || 'var(--mt-accent, #0aa)'};${b.opacity != null ? `opacity:${b.opacity}` : ''}"></div>`
+    ).join('')}</div>`;
+  }
+}

package/src/widgets/base-widget.js

@@ -0,0 +1,49 @@
+/** Base widget — rAF batching + bind + destroy. All widgets extend this. */
+
+import { Emitter } from '../emitter.js';
+
+export class BaseWidget extends Emitter {
+  constructor(container, opts = {}) {
+    super();
+    this._container = container;
+    this._pfx = opts.classPrefix || 'mt';
+    this._dirty = false;
+    this._rafId = 0;
+  }
+
+  _schedulePaint() {
+    if (this._dirty) return;
+    this._dirty = true;
+    this._rafId = requestAnimationFrame(() => {
+      this._dirty = false;
+      this._paint();
+    });
+  }
+
+  /** Override in subclass */
+  _paint() {}
+
+  bind(adapter, transformKey) {
+    adapter.on('data', (d) => {
+      const val = transformKey ? d[transformKey] : d;
+      this._onData(val);
+    });
+  }
+
+  /** Override in subclass to handle adapter data. Default: push scalars, update arrays. */
+  _onData(val) {
+    if (Array.isArray(val)) this.update(val);
+    else this.push(val);
+  }
+
+  /** Override in subclass */
+  update() {}
+  /** Override in subclass */
+  push() {}
+
+  destroy() {
+    if (this._rafId) cancelAnimationFrame(this._rafId);
+    this._container.innerHTML = '';
+    super.destroy();
+  }
+}

package/src/widgets/message-log.js

@@ -0,0 +1,81 @@
+/** Scrolling message log widget with typed entries and rAF batching */
+
+import { BaseWidget } from './base-widget.js';
+
+export class MessageLog extends BaseWidget {
+  /**
+   * @param {HTMLElement} container
+   * @param {object} [opts]
+   * @param {number} [opts.maxMessages=50] — max visible messages
+   * @param {Record<string,string>} [opts.typeClasses] — map of type→CSS class
+   * @param {string} [opts.classPrefix='mt']
+   */
+  constructor(container, opts = {}) {
+    super(container, opts);
+    this._max = opts.maxMessages ?? 50;
+    this._typeClasses = opts.typeClasses || {
+      bad: 'mt-red', good: 'mt-green', trade: 'mt-yellow',
+      listing: 'mt-cyan', info: '', error: 'mt-red', warn: 'mt-yellow',
+    };
+    this._messages = [];
+    this._fullRepaint = true;
+  }
+
+  /** Replace all messages. Each: { text, type?, timestamp? } or string */
+  update(messages) {
+    this._messages = messages.slice(0, this._max);
+    this._fullRepaint = true;
+    this._schedulePaint();
+  }
+
+  /** Push a single message (prepends). Only inserts one DOM node when possible. */
+  push(msg) {
+    this._messages.unshift(typeof msg === 'string' ? { text: msg } : msg);
+    if (this._messages.length > this._max) this._messages.length = this._max;
+    this._schedulePaint();
+  }
+
+  _onData(val) {
+    if (Array.isArray(val)) this.update(val);
+    else this.push(val);
+  }
+
+  _renderMsg(m) {
+    const pfx = this._pfx;
+    const text = typeof m === 'string' ? m : m.text;
+    const type = (typeof m === 'object' && m.type) || 'info';
+    const cls = this._typeClasses[type] || '';
+    const ts = typeof m === 'object' && m.timestamp != null
+      ? `<span class="${pfx}-dim">[${m.timestamp}]</span> `
+      : '';
+    return `<div class="${pfx}-message">${ts}<span class="${cls}">${text}</span></div>`;
+  }
+
+  _paint() {
+    const pfx = this._pfx;
+    const msgs = this._messages;
+
+    if (!msgs.length) {
+      this._container.innerHTML = `<span class="${pfx}-dim">No messages.</span>`;
+      this._fullRepaint = true;
+      return;
+    }
+
+    // Incremental: if only a push happened, insert at top and trim bottom
+    if (!this._fullRepaint && this._container.children.length > 0) {
+      const newDiv = document.createElement('div');
+      newDiv.innerHTML = this._renderMsg(msgs[0]);
+      const child = newDiv.firstElementChild;
+      if (child) this._container.insertBefore(child, this._container.firstChild);
+      // Trim excess
+      while (this._container.children.length > this._max) {
+        this._container.removeChild(this._container.lastChild);
+      }
+      return;
+    }
+
+    // Full repaint
+    this._fullRepaint = false;
+    this._container.innerHTML = msgs.map(m => this._renderMsg(m)).join('');
+  }
+}

package/src/widgets/mini-chart.js

@@ -0,0 +1,144 @@
+/** ASCII sparkline / line chart widget with rAF batching */
+
+import { BaseWidget } from './base-widget.js';
+
+const BLOCK = '\u25CF';  // ●
+const VLINE = '\u2502';  // │
+
+export class MiniChart extends BaseWidget {
+  /**
+   * @param {HTMLElement} container
+   * @param {object} [opts]
+   * @param {number} [opts.width=50] — chart columns
+   * @param {number} [opts.height=10] — chart rows
+   * @param {number} [opts.maxPoints=500] — max data points kept
+   * @param {(v:number)=>string} [opts.formatLabel] — label formatter
+   * @param {string} [opts.upClass='mt-green'] — CSS class for up moves
+   * @param {string} [opts.downClass='mt-red'] — CSS class for down moves
+   * @param {string} [opts.dimClass='mt-dim'] — CSS class for axis
+   */
+  constructor(container, opts = {}) {
+    super(container, opts);
+    this._W = opts.width ?? 50;
+    this._H = opts.height ?? 10;
+    this._maxPoints = opts.maxPoints ?? 500;
+    this._fmt = opts.formatLabel || defaultFmt;
+    this._upCls = opts.upClass || 'mt-green';
+    this._downCls = opts.downClass || 'mt-red';
+    this._dimCls = opts.dimClass || 'mt-dim';
+    this._data = [];
+    // Pre-allocate reusable arrays
+    this._yPos = new Array(this._W);
+    this._preEl = null;
+  }
+
+  /** Bulk update with array of values */
+  update(data) {
+    if (Array.isArray(data)) this._data = data.slice(-this._maxPoints);
+    else if (data && Array.isArray(data.values)) this._data = data.values.slice(-this._maxPoints);
+    this._schedulePaint();
+  }
+
+  /** Push a single value (streaming). Safe to call at 1000+ Hz — rAF batched. */
+  push(value) {
+    this._data.push(value);
+    if (this._data.length > this._maxPoints) this._data.shift();
+    this._schedulePaint();
+  }
+
+  _onData(val) {
+    if (typeof val === 'number') this.push(val);
+    else if (Array.isArray(val)) this.update(val);
+  }
+
+  _paint() {
+    const data = this._resample(this._data, this._W);
+    if (data.length < 2) { this._container.textContent = ''; return; }
+
+    let min = data[0], max = data[0];
+    for (let i = 1, n = data.length; i < n; i++) {
+      if (data[i] < min) min = data[i];
+      if (data[i] > max) max = data[i];
+    }
+    const range = max - min || 1;
+    const H = this._H, W = this._W;
+    const yPos = this._yPos;
+
+    // Compute y positions
+    for (let i = 0; i < W; i++) yPos[i] = Math.round((1 - (data[i] - min) / range) * (H - 1));
+
+    // Build grid — flat array for speed
+    const grid = new Array(H * W);
+    grid.fill(0); // 0 = space, otherwise a string
+
+    const upCls = this._upCls;
+    const downCls = this._downCls;
+
+    for (let col = 0; col < W; col++) {
+      const y = yPos[col];
+      const isUp = col > 0 ? data[col] >= data[col - 1] : true;
+      const cls = isUp ? upCls : downCls;
+      grid[y * W + col] = `<span class="${cls}">${BLOCK}</span>`;
+      if (col > 0) {
+        const prevY = yPos[col - 1];
+        const lo = prevY < y ? prevY : y;
+        const hi = prevY > y ? prevY : y;
+        for (let r = lo + 1; r < hi; r++) {
+          if (grid[r * W + col] === 0) grid[r * W + col] = `<span class="${cls}">${VLINE}</span>`;
+        }
+      }
+    }
+
+    const topLabel = this._fmt(max);
+    const botLabel = this._fmt(min);
+    const pw = topLabel.length > botLabel.length ? topLabel.length : botLabel.length;
+    const dim = this._dimCls;
+
+    // Build output lines
+    const parts = [];
+    for (let r = 0; r < H; r++) {
+      let label;
+      if (r === 0) label = topLabel.padStart(pw);
+      else if (r === H - 1) label = botLabel.padStart(pw);
+      else label = ''.padStart(pw);
+      parts.push(`<span class="${dim}">${label} \u2502</span>`);
+      const rowStart = r * W;
+      for (let c = 0; c < W; c++) {
+        const cell = grid[rowStart + c];
+        parts.push(cell === 0 ? ' ' : cell);
+      }
+      if (r < H - 1) parts.push('\n');
+    }
+
+    // Reuse <pre> element
+    if (!this._preEl || !this._container.contains(this._preEl)) {
+      this._preEl = document.createElement('pre');
+      this._preEl.className = 'mt-chart-canvas';
+      this._container.textContent = '';
+      this._container.appendChild(this._preEl);
+    }
+    this._preEl.innerHTML = parts.join('');
+  }
+
+  _resample(arr, targetLen) {
+    const len = arr.length;
+    if (len <= 1) return len === 1 ? new Array(targetLen).fill(arr[0]) : [];
+    const result = new Array(targetLen);
+    const scale = (len - 1) / (targetLen - 1);
+    for (let i = 0; i < targetLen; i++) {
+      const srcIdx = i * scale;
+      const lo = srcIdx | 0; // fast floor
+      const hi = lo + 1 < len ? lo + 1 : lo;
+      const frac = srcIdx - lo;
+      result[i] = arr[lo] + (arr[hi] - arr[lo]) * frac;
+    }
+    return result;
+  }
+}
+
+function defaultFmt(v) {
+  if (v >= 1000) return v.toFixed(0);
+  if (v >= 1) return v.toFixed(2);
+  if (v >= 0.01) return v.toFixed(4);
+  return String(v);
+}

package/src/widgets/range-bar.js

@@ -0,0 +1,94 @@
+/** Horizontal range bar with markers, zones, and interactive ghost hover */
+
+import { BaseWidget } from './base-widget.js';
+
+export class RangeBar extends BaseWidget {
+  /**
+   * @param {HTMLElement} container
+   * @param {object} [opts]
+   * @param {string} [opts.classPrefix='mt']
+   * @param {(v:number)=>string} [opts.formatLabel] — value formatter
+   */
+  constructor(container, opts = {}) {
+    super(container, opts);
+    this._fmt = opts.formatLabel || ((v) => v.toFixed(2));
+    this._data = null;
+    this._ghostBound = false;
+  }
+
+  /**
+   * Update the bar.
+   * @param {object} data
+   * @param {number} data.lo — range minimum
+   * @param {number} data.hi — range maximum
+   * @param {Array} [data.markers] — [{ position, label, type?, className? }]
+   * @param {Array} [data.zones] — [{ from, to, className }]
+   */
+  update(data) {
+    this._data = data;
+    this._schedulePaint();
+  }
+
+  _onData(val) {
+    if (val && typeof val === 'object') this.update(val);
+  }
+
+  _paint() {
+    const d = this._data;
+    if (!d) return;
+    const pfx = this._pfx;
+    const { lo, hi, markers = [], zones = [] } = d;
+    const range = hi - lo || 1;
+    const pct = (v) => ((v - lo) / range * 100).toFixed(1);
+
+    let html = `<div class="${pfx}-pb" data-pb-lo="${lo}" data-pb-hi="${hi}">`;
+    html += `<div class="${pfx}-pb-track">`;
+
+    for (let i = 0; i < zones.length; i++) {
+      const z = zones[i];
+      const left = pct(z.from);
+      const width = (((z.to - z.from) / range) * 100).toFixed(1);
+      html += `<div class="${pfx}-pb-fill ${z.className || ''}" style="left:${left}%;width:${width}%"></div>`;
+    }
+
+    for (let i = 0; i < markers.length; i++) {
+      const m = markers[i];
+      const left = pct(m.position);
+      const cls = m.className || `${pfx}-pb-${m.type || 'default'}`;
+      html += `<div class="${pfx}-pb-marker ${cls}" style="left:${left}%"><span class="${pfx}-pb-line"></span><span class="${pfx}-pb-label">${m.label || ''}</span></div>`;
+    }
+
+    html += `<div class="${pfx}-pb-ghost" style="display:none"><span class="${pfx}-pb-ghost-line"></span><span class="${pfx}-pb-ghost-label"></span></div>`;
+    html += `</div></div>`;
+    this._container.innerHTML = html;
+    this._ghostBound = false;
+    this._bindGhost();
+  }
+
+  _bindGhost() {
+    if (this._ghostBound) return;
+    const pfx = this._pfx;
+    const track = this._container.querySelector(`.${pfx}-pb-track`);
+    const ghost = this._container.querySelector(`.${pfx}-pb-ghost`);
+    const bar = this._container.querySelector(`.${pfx}-pb`);
+    if (!track || !ghost || !bar) return;
+    this._ghostBound = true;
+
+    const fmt = this._fmt;
+    const self = this;
+
+    track.addEventListener('mousemove', (e) => {
+      const rect = track.getBoundingClientRect();
+      const xPct = ((e.clientX - rect.left) / rect.width) * 100;
+      const clamped = xPct < 0 ? 0 : xPct > 100 ? 100 : xPct;
+      const lo = parseFloat(bar.dataset.pbLo);
+      const hi = parseFloat(bar.dataset.pbHi);
+      const hoverValue = lo + (clamped / 100) * (hi - lo);
+      ghost.style.display = '';
+      ghost.style.transform = `translateX(${(clamped / 100 * rect.width).toFixed(1)}px)`;
+      ghost.querySelector(`.${pfx}-pb-ghost-label`).textContent = fmt(hoverValue);
+      self.emit('hover', { value: hoverValue, pct: clamped });
+    });
+    track.addEventListener('mouseleave', () => { ghost.style.display = 'none'; });
+  }
+}

package/src/widgets/ticker.js

@@ -0,0 +1,53 @@
+/** Scrolling ticker tape widget — CSS-driven animation */
+
+import { BaseWidget } from './base-widget.js';
+
+export class Ticker extends BaseWidget {
+  /**
+   * @param {HTMLElement} container — mount point
+   * @param {object} [opts]
+   * @param {number} [opts.baseDuration=8] — seconds for a full scroll cycle
+   * @param {number} [opts.durationPerItem=2] — added seconds per item
+   * @param {string} [opts.classPrefix='mt'] — CSS class prefix
+   */
+  constructor(container, opts = {}) {
+    super(container, opts);
+    this._baseDuration = opts.baseDuration ?? 8;
+    this._durationPerItem = opts.durationPerItem ?? 2;
+    this._items = [];
+    this._lastItemCount = -1;
+  }
+
+  /** Replace all ticker items. Each item: { label, value, className? } */
+  update(items) {
+    this._items = items;
+    this._schedulePaint();
+  }
+
+  /** Push a single item (appends) */
+  push(item) {
+    this._items.push(item);
+    this._schedulePaint();
+  }
+
+  _paint() {
+    const pfx = this._pfx;
+    const items = this._items;
+    if (!items.length) {
+      this._container.innerHTML = '';
+      return;
+    }
+    const inner = items.map(it =>
+      `<span class="${pfx}-ticker-item">${it.label ? `<span class="${pfx}-ticker-label">${it.label}</span> ` : ''}${it.value ? `<span class="${it.className || ''}">${it.value}</span>` : ''}</span>`
+    ).join('');
+    const duration = Math.max(this._baseDuration, items.length * this._durationPerItem);
+    // Only rebuild DOM when item count changes; update track content otherwise
+    if (items.length !== this._lastItemCount) {
+      this._container.innerHTML = `<div class="${pfx}-ticker-wrap" style="--ticker-duration:${duration}s"><div class="${pfx}-ticker-track">${inner}${inner}</div></div>`;
+      this._lastItemCount = items.length;
+    } else {
+      const track = this._container.querySelector(`.${pfx}-ticker-track`);
+      if (track) track.innerHTML = inner + inner;
+    }
+  }
+}