minterm 0.1.0

package/LICENSE

@@ -0,0 +1,24 @@
+This is free and unencumbered software released into the public domain.
+
+Anyone is free to copy, modify, publish, use, compile, sell, or
+distribute this software, either in source code form or as a compiled
+binary, for any purpose, commercial or non-commercial, and by any
+means.
+
+In jurisdictions that recognize copyright laws, the author or authors
+of this software dedicate any and all copyright interest in the
+software to the public domain. We make this dedication for the benefit
+of the public at large and to the detriment of our heirs and
+successors. We intend this dedication to be an overt act of
+relinquishment in perpetuity of all present and future rights to this
+software under copyright law.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
+
+For more information, please refer to <https://unlicense.org>

package/README.md

@@ -0,0 +1,194 @@
+# minterm
+
+Zero-dependency DOS-style windowing UI for the browser. Draggable, resizable windows with rAF-batched widgets and pluggable data adapters.
+
+`npm install minterm`
+
+## Quick start
+
+```html
+<link rel="stylesheet" href="minterm/css/minterm.css">
+```
+```js
+import { WindowManager, MiniChart } from 'minterm';
+const wm = new WindowManager();
+const chart = wm.addWidget('chart', MiniChart,
+  { width: 50, height: 10 },
+  { x: 20, y: 20, width: 500, height: 300, title: 'Sparkline', closable: true }
+);
+chart.push(42.5); // safe to call 1000x/sec — rAF batched
+```
+
+## Architecture
+
+```
+DataSource -> Adapter.emit('data', payload) -> Widget.update(payload) -> rAF batched DOM render
+```
+
+Everything extends `Emitter` (on/off/emit/once/destroy). Data flows one way — sources into adapters, adapters emit events, widgets render. Skip adapters and call `.push()` directly if preferred.
+
+## WindowManager
+
+Creates draggable, resizable, focusable windows with pinning, layout snapshots, and keyboard shortcuts.
+
+**Constructor options:** `container` (HTMLElement, default: body), `classPrefix` (string, default: 'mt'), `lockable` (bool), `layoutBar` (bool), `layoutSlots` (number, default: 5), `escapeClose` (bool, default: true).
+
+**Window options:** `x`, `y`, `width`, `height`, `title`, `closable`, `lockable`, `minWidth` (default: 200), `minHeight` (default: 60).
+
+### API
+
+| Method | Returns | Description |
+|--------|---------|-------------|
+| `createWindow(id, opts)` | HTMLElement | Create a window |
+| `addWidget(id, WidgetClass, widgetOpts, windowOpts)` | Widget | Create window + mount widget |
+| `closeWindow(id)` | void | Remove a window |
+| `closeAll()` | void | Close all unlocked closable windows |
+| `setContent(id, title, html)` | void | Replace title and body HTML |
+| `getBody(id)` | HTMLElement | The `.mt-win-body` div |
+| `getWindow(id)` | HTMLElement | The whole `.mt-win` div |
+| `has(id)` | boolean | Check if window exists |
+| `getIds()` | string[] | All window IDs |
+| `focus(id)` | void | Bring to front |
+| `lockWindow(id)` / `unlockWindow(id)` / `toggleLock(id)` | void | Pin/unpin (prevents drag/resize) |
+| `isLocked(id)` | boolean | Check lock state |
+| `showLockButtons()` / `hideLockButtons()` | void | Toggle pin button visibility |
+| `saveLayout(slot)` / `restoreLayout(slot)` | void | Save/restore positions, sizes, lock states |
+| `hasLayout(slot)` | boolean | Check if slot has a snapshot |
+
+### Keyboard shortcuts
+
+`Ctrl+1`–`Ctrl+5` save layout, `1`–`5` restore (not in inputs), `Escape` closes all.
+
+### Events
+
+`window:create` `{id, el}`, `window:close` `{id}`, `window:focus` `{id, el}`, `window:move` `{id, el}`, `window:resize` `{id, el}`, `window:lock` `{id, locked}`, `layout:save` `{slot}`, `layout:restore` `{slot}`.
+
+## Widgets
+
+Shared API: `update(data)`, `push(value)`, `bind(adapter, 'key')`, `destroy()`. All renders are rAF-batched.
+
+### Ticker — scrolling tape, CSS animated
+
+Options: `baseDuration` (default: 8), `durationPerItem` (default: 2).
+Items: `{ label, value, className }`.
+
+### MiniChart — ASCII sparkline, auto-scaling
+
+Options: `width` (cols), `height` (rows), `maxPoints` (default: 500), `formatLabel`, `upClass` (default: 'mt-green'), `downClass` (default: 'mt-red').
+Data: array of numbers via `update([...])` or `push(num)`.
+
+### MessageLog — scrolling color-coded log
+
+Options: `maxMessages` (default: 50), `typeClasses` (map of type -> CSS class, defaults: bad=mt-red, good=mt-green, trade=mt-yellow, info='', error=mt-red, warn=mt-yellow).
+Items: `{ text, type, timestamp }` or plain string.
+
+### RangeBar — horizontal bar with markers and zones
+
+Options: `formatLabel` (value formatter).
+Data: `{ lo, hi, markers: [{ position, label, type?, className? }], zones: [{ from, to, className }] }`.
+Events: `hover` `{ value, pct }`.
+
+### ActivityBars — animated pulsing bars, pure CSS
+
+Options: `count` (default: 8).
+Data: `[{ height, color?, opacity? }]` or call `randomize()`.
+
+### Custom widgets
+
+Extend `BaseWidget`, implement `_paint()`, call `this._schedulePaint()` from `update()`/`push()`. Gets free rAF batching, adapter binding, and cleanup.
+
+## Data Adapters
+
+All emit `'data'`. All support `throttle` (ms) and `transform` (fn).
+
+| Adapter | Constructor args | Description |
+|---------|-----------------|-------------|
+| `ManualAdapter` | `{ throttle?, transform? }` | Push data manually via `.push(data)` |
+| `WebSocketAdapter` | `url, { reconnect?, reconnectDelay?, throttle?, transform? }` | Auto-reconnecting WS, JSON parsed. Methods: `connect()`, `disconnect()`, `send(data)` |
+| `RestPoller` | `url, { interval?, fetchOpts?, transform? }` | Polls endpoint on interval. Methods: `connect()`, `disconnect()` |
+| `RedisAdapter` | `{ client, channels?, patterns?, transform? }` | Redis Pub/Sub. Inject ioredis client (no hard dep) |
+| `NatsAdapter` | `{ natsConnect, servers, subject, transform? }` | NATS messaging. Inject `connect` from nats.ws |
+
+**Binding:** `widget.bind(adapter, 'key')` — auto-updates widget when adapter emits, extracting `d[key]`.
+
+## ArrowOverlay
+
+SVG arrows between windows. Auto-updates on drag/resize.
+
+```js
+const arrows = new ArrowOverlay(wm, { defaultColor: '#0ff' });
+arrows.setArrow('id', { fromWindow, toWindow, progress?, label?, color? });
+arrows.removeArrow('id');
+arrows.clearArrows();
+arrows.destroy();
+```
+
+## ModalManager
+
+```js
+const modal = new ModalManager(wm);
+modal.show(html, { title, width });
+modal.hide();
+const ok = await modal.confirm(message, { title, okText, cancelText }); // -> boolean
+const val = await modal.prompt(message, { title, defaultValue }); // -> string|null
+modal.isOpen; // boolean
+```
+
+## Themes
+
+6 built-in themes. Each sets colors, font, and font size. Apply by name or custom object.
+
+```js
+applyTheme('phosphor');
+applyTheme({ '--mt-accent': '#f80', '--mt-font': "'Fira Code', monospace" });
+```
+
+| Theme | Font | Description |
+|-------|------|-------------|
+| `cyber` | Courier New 15px | Vivid cyan/teal (default) |
+| `amber` | VT323 16px | Warm gold retro CRT |
+| `phosphor` | IBM Plex Mono 14px | Soft green terminal |
+| `hotline` | Share Tech Mono 15px | Desaturated pink/mauve |
+| `ice` | Fira Code 14px | Muted blue-grey |
+| `slate` | JetBrains Mono 14px | Neutral grey |
+
+### CSS custom properties
+
+- **Colors:** `--mt-accent`, `--mt-accent-bright`, `--mt-bg`, `--mt-border`, `--mt-green`, `--mt-red`, `--mt-yellow`, `--mt-cyan`, `--mt-magenta`, `--mt-orange`, `--mt-white`, `--mt-dim`, `--mt-text`, `--mt-titlebar-bg`, `--mt-titlebar-fg`, `--mt-glow`, `--mt-glow-strong`
+- **Typography:** `--mt-font`, `--mt-font-size`
+- **Sizing:** `--mt-win-min-w`, `--mt-win-min-h`, `--mt-win-padding`, `--mt-bar-width`, `--mt-bar-height`, `--mt-resize-handle`, `--mt-pb-height`, `--mt-scrollbar-width`
+- **Animation:** `--mt-ticker-speed`, `--mt-bar-speed`, `--mt-arrow-dash-speed`, `--mt-arrow-dot-speed`
+
+## Formatters
+
+`formatNum(n)` — adaptive: 1.50bil / 12.3mil / 50.0k / 1,234.56 / 0.0500. `formatQty(n)` — comma-separated or 4dp for small. `formatPct(n)` — signed percentage with 1dp.
+
+## File structure
+
+```
+index.js                          # barrel export
+css/minterm.css                   # all styles + CSS custom properties
+src/
+  emitter.js                      # Emitter base class
+  z-index.js                      # z-index management
+  window-manager.js               # WindowManager
+  modal-manager.js                # ModalManager
+  arrow-overlay.js                # ArrowOverlay
+  formatters.js                   # formatNum, formatQty, formatPct
+  themes.js                       # built-in themes + applyTheme
+  widgets/{base-widget,ticker,mini-chart,message-log,range-bar,activity-bars}.js
+  adapters/{base-adapter,manual-adapter,websocket-adapter,rest-poller,nats-adapter,redis-adapter}.js
+```
+
+Every file is independently importable: `import { MiniChart } from 'minterm/src/widgets/mini-chart.js'`.
+
+## Performance
+
+- **rAF batching** — 1000 `.push()` calls/sec = 60 renders/sec
+- **Incremental DOM** — MessageLog appends nodes, doesn't rebuild innerHTML
+- **SVG reuse** — ArrowOverlay caches elements, updates attributes only
+- **CSS-only animation** — ticker, bars, arrows use `@keyframes`, no JS animation loop
+- **GPU-composited drag** — windows use `transform: translate()` during drag, baked to `left/top` on drop
+- **CSS containment** — `.mt-win` uses `contain: layout style` to isolate style recalc scope
+- **Flat grid** — MiniChart uses `Array(H*W)` with indexed access, no nested arrays
+- **Adapter throttle** — `{ throttle: 16 }` caps at ~60 emissions/sec, drops intermediates, keeps latest value

package/css/minterm.css

@@ -0,0 +1,400 @@
+/* minterm — DOS-style windowing CSS
+   All classes prefixed mt-. Retheme via CSS custom properties. */
+
+:root {
+  /* ── Colors ── */
+  --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;
+
+  /* ── Typography ── */
+  --mt-font: 'Courier New', 'Consolas', monospace;
+  --mt-font-size: 15px;
+
+  /* ── Titlebar ── */
+  --mt-titlebar-bg: var(--mt-accent);
+  --mt-titlebar-fg: #000;
+  --mt-titlebar-padding: 3px 8px;
+
+  /* ── Window chrome ── */
+  --mt-win-min-w: 200px;
+  --mt-win-min-h: 60px;
+  --mt-win-padding: 6px 8px;
+  --mt-glow: rgba(0, 170, 170, 0.12);
+  --mt-glow-strong: rgba(0, 170, 170, 0.3);
+
+  /* ── Scrollbar ── */
+  --mt-scrollbar-track: var(--mt-bg);
+  --mt-scrollbar-thumb: var(--mt-accent);
+  --mt-scrollbar-width: 6px;
+
+  /* ── Animation speeds ── */
+  --mt-ticker-speed: 8s;         /* base ticker scroll duration */
+  --mt-bar-speed: 0.8s;          /* activity bar pulse cycle */
+  --mt-arrow-dash-speed: 1.2s;   /* arrow dash animation */
+  --mt-arrow-dot-speed: 1.5s;    /* arrow traveling dot pulse */
+
+  /* ── Sizing ── */
+  --mt-bar-width: 3px;           /* activity bar column width */
+  --mt-bar-height: 28px;         /* activity bars container height */
+  --mt-resize-handle: 16px;      /* resize grip size */
+  --mt-pb-height: 32px;         /* price bar height */
+}
+
+/* ─── Color utilities ────────────────────────────────────────── */
+.mt-cyan    { color: var(--mt-cyan); }
+.mt-yellow  { color: var(--mt-yellow); }
+.mt-white   { color: var(--mt-white); }
+.mt-green   { color: var(--mt-green); }
+.mt-red     { color: var(--mt-red); }
+.mt-magenta { color: var(--mt-magenta); }
+.mt-dim     { color: var(--mt-dim); }
+.mt-orange  { color: var(--mt-orange); }
+
+/* ─── Window ─────────────────────────────────────────────────── */
+.mt-win {
+  position: fixed;
+  background: var(--mt-bg);
+  border: 1px solid var(--mt-border);
+  font-family: var(--mt-font);
+  font-size: var(--mt-font-size);
+  box-shadow: 0 0 12px var(--mt-glow), 0 0 2px var(--mt-glow-strong);
+  display: flex;
+  flex-direction: column;
+  min-width: var(--mt-win-min-w);
+  min-height: var(--mt-win-min-h);
+  overflow: hidden;
+  color: var(--mt-text);
+  contain: layout style;
+}
+
+.mt-win-dragging { will-change: transform; }
+
+.mt-win-titlebar {
+  background: var(--mt-titlebar-bg);
+  color: var(--mt-titlebar-fg);
+  padding: var(--mt-titlebar-padding);
+  cursor: grab;
+  font-weight: bold;
+  font-size: var(--mt-font-size);
+  user-select: none;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+
+.mt-win-title { pointer-events: none; flex: 1; }
+
+.mt-win-lock {
+  cursor: pointer;
+  padding: 0 4px;
+  margin-left: auto;
+  color: inherit;
+  opacity: 0.35;
+  transition: opacity 0.15s, color 0.15s;
+  display: inline-flex;
+  align-items: center;
+}
+.mt-win-lock svg { display: block; transition: transform 0.15s; }
+.mt-win-lock-hidden { display: none; }
+.mt-win-lock:hover { opacity: 0.8; }
+.mt-win-locked .mt-win-lock { opacity: 1; color: var(--mt-accent-bright); filter: drop-shadow(0 0 3px var(--mt-accent)); }
+.mt-win-locked .mt-win-lock svg { transform: rotate(-45deg); }
+.mt-win-locked .mt-win-titlebar { cursor: default; }
+.mt-win-locked .mt-win-resize { display: none; }
+
+.mt-win-close {
+  cursor: pointer;
+  padding: 0 4px;
+  font-size: 14px;
+}
+.mt-win-close:hover { background: var(--mt-red); color: var(--mt-white); }
+
+.mt-win-body {
+  padding: var(--mt-win-padding);
+  overflow: auto;
+  flex: 1;
+  scrollbar-width: thin;
+  scrollbar-color: var(--mt-scrollbar-thumb) var(--mt-scrollbar-track);
+}
+.mt-win-body::-webkit-scrollbar { width: var(--mt-scrollbar-width); }
+.mt-win-body::-webkit-scrollbar-track { background: var(--mt-scrollbar-track); }
+.mt-win-body::-webkit-scrollbar-thumb { background: var(--mt-scrollbar-thumb); border-radius: 3px; }
+.mt-win-body::-webkit-scrollbar-thumb:hover { background: var(--mt-accent-bright); }
+
+.mt-win-resize {
+  position: absolute;
+  right: 0; bottom: 0;
+  width: var(--mt-resize-handle); height: var(--mt-resize-handle);
+  cursor: nwse-resize;
+  background:
+    linear-gradient(135deg,
+      transparent 50%, var(--mt-accent) 50%, var(--mt-accent) 58%, transparent 58%,
+      transparent 66%, var(--mt-accent) 66%, var(--mt-accent) 74%, transparent 74%,
+      transparent 82%, var(--mt-accent) 82%, var(--mt-accent) 90%, transparent 90%);
+  opacity: 0.5;
+}
+.mt-win-resize:hover { opacity: 1; }
+
+/* ─── Ticker ─────────────────────────────────────────────────── */
+.mt-ticker-wrap {
+  overflow: hidden;
+  white-space: nowrap;
+  border-bottom: 1px solid color-mix(in srgb, var(--mt-accent) 25%, transparent);
+  padding: 3px 0;
+  margin-bottom: 2px;
+  font-size: 11px;
+  position: relative;
+  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
+  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
+}
+
+.mt-ticker-track {
+  display: inline-block;
+  animation: mt-tickerScroll var(--ticker-duration, var(--mt-ticker-speed)) linear infinite;
+  will-change: transform;
+}
+.mt-ticker-track:hover { animation-play-state: paused; }
+
+.mt-ticker-item { display: inline-block; margin-right: 16px; }
+.mt-ticker-label { color: var(--mt-white); }
+
+@keyframes mt-tickerScroll {
+  0%   { transform: translateX(0); }
+  100% { transform: translateX(-50%); }
+}
+
+/* ─── Activity Bars ──────────────────────────────────────────── */
+.mt-bars {
+  display: flex;
+  align-items: flex-end;
+  gap: 1px;
+  height: var(--mt-bar-height);
+  flex-shrink: 0;
+  padding: 0 2px;
+}
+
+.mt-bar {
+  width: var(--mt-bar-width);
+  border-radius: 1px 1px 0 0;
+  animation: mt-barPulse var(--mt-bar-speed) ease-in-out infinite alternate;
+  transform-origin: bottom;
+  will-change: transform;
+}
+.mt-bar:nth-child(2) { animation-duration: 0.65s; animation-delay: 0.08s; }
+.mt-bar:nth-child(3) { animation-duration: 0.9s; animation-delay: 0.18s; }
+.mt-bar:nth-child(4) { animation-duration: 0.55s; animation-delay: 0.25s; }
+.mt-bar:nth-child(5) { animation-duration: 0.75s; animation-delay: 0.12s; }
+.mt-bar:nth-child(6) { animation-duration: 0.6s; animation-delay: 0.32s; }
+.mt-bar:nth-child(7) { animation-duration: 0.85s; animation-delay: 0.05s; }
+.mt-bar:nth-child(8) { animation-duration: 0.7s; animation-delay: 0.2s; }
+
+@keyframes mt-barPulse {
+  0%   { transform: scaleY(1); }
+  25%  { transform: scaleY(0.4); }
+  50%  { transform: scaleY(0.85); }
+  75%  { transform: scaleY(0.3); }
+  100% { transform: scaleY(1); }
+}
+
+/* ─── Price Bar ──────────────────────────────────────────────── */
+.mt-pb {
+  height: var(--mt-pb-height);
+  position: relative;
+  margin: 2px 0;
+  cursor: crosshair;
+}
+
+.mt-pb-track {
+  position: absolute;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background: var(--mt-bg);
+  border: 1px solid #222;
+  overflow: hidden;
+}
+
+.mt-pb-fill {
+  position: absolute;
+  top: 0; bottom: 0;
+  pointer-events: none;
+}
+
+.mt-pb-marker {
+  position: absolute;
+  top: 0; bottom: 0;
+  width: 1px;
+  z-index: 2;
+}
+
+.mt-pb-line {
+  position: absolute;
+  top: 0; bottom: 0;
+  left: 0; width: 2px;
+  background: var(--mt-accent);
+}
+
+.mt-pb-label {
+  position: absolute;
+  top: -1px; left: 4px;
+  font-size: 9px;
+  white-space: nowrap;
+  line-height: 32px;
+  color: var(--mt-accent);
+}
+
+.mt-pb-current .mt-pb-line { background: var(--mt-white); width: 3px; }
+.mt-pb-current .mt-pb-label { color: var(--mt-white); font-weight: bold; font-size: 10px; }
+
+.mt-pb-danger .mt-pb-line { background: var(--mt-red); }
+.mt-pb-danger .mt-pb-label { color: var(--mt-red); }
+
+.mt-pb-ghost {
+  position: absolute;
+  top: 0; bottom: 0;
+  width: 1px;
+  z-index: 5;
+  pointer-events: none;
+}
+
+.mt-pb-ghost-line {
+  position: absolute;
+  top: 0; bottom: 0;
+  left: 0; width: 1px;
+  border-left: 1px dashed var(--mt-dim);
+}
+
+.mt-pb-ghost-label {
+  position: absolute;
+  top: 1px; left: 6px;
+  font-size: 11px;
+  font-weight: bold;
+  white-space: nowrap;
+  line-height: 14px;
+  text-shadow: 0 0 4px #000, 0 0 8px #000;
+}
+
+/* ─── Chart Canvas ───────────────────────────────────────────── */
+.mt-chart-canvas {
+  font-family: var(--mt-font);
+  font-size: 11px;
+  line-height: 1.1;
+  letter-spacing: 0;
+  margin: 0; padding: 0;
+  color: var(--mt-dim);
+  overflow: hidden;
+}
+
+/* ─── Message Log ────────────────────────────────────────────── */
+.mt-message { padding: 1px 0; color: #aaa; }
+
+/* ─── Arrow Overlay ──────────────────────────────────────────── */
+.mt-arrow-svg {
+  position: fixed;
+  top: 0; left: 0;
+  width: 100vw; height: 100vh;
+  pointer-events: none;
+  z-index: 1;
+  overflow: visible;
+}
+
+.mt-arrow-line {
+  animation: mt-arrowDash var(--mt-arrow-dash-speed) linear infinite;
+}
+
+@keyframes mt-arrowDash {
+  0%   { stroke-dashoffset: 0; }
+  100% { stroke-dashoffset: -20; }
+}
+
+.mt-arrow-dot {
+  animation: mt-arrowDotPulse var(--mt-arrow-dot-speed) ease-in-out infinite;
+}
+
+@keyframes mt-arrowDotPulse {
+  0%, 100% { opacity: 1; r: 3; }
+  50%      { opacity: 0.5; r: 5; }
+}
+
+.mt-arrow-label {
+  font-family: var(--mt-font);
+  font-size: 10px;
+  text-anchor: middle;
+  paint-order: stroke;
+  stroke: #000;
+  stroke-width: 3px;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+/* ─── Modal ──────────────────────────────────────────────────── */
+.mt-modal-body { margin: 6px 0; }
+.mt-modal-footer { display: flex; gap: 8px; margin-top: 8px; justify-content: center; }
+
+.mt-btn {
+  font-family: var(--mt-font);
+  font-size: 12px;
+  background: var(--mt-bg);
+  color: var(--mt-accent-bright);
+  border: 1px solid var(--mt-accent);
+  padding: 4px 12px;
+  cursor: pointer;
+}
+.mt-btn:hover { background: var(--mt-accent); color: var(--mt-titlebar-fg); }
+
+.mt-input {
+  font-family: var(--mt-font);
+  font-size: 12px;
+  background: var(--mt-bg);
+  color: var(--mt-accent-bright);
+  border: 1px solid var(--mt-accent);
+  padding: 4px 8px;
+  width: 100%;
+  box-sizing: border-box;
+  margin-top: 4px;
+}
+.mt-input:focus { outline: none; border-color: var(--mt-accent-bright); }
+
+/* ─── Layout Bar ─────────────────────────────────────────────── */
+.mt-layout-bar {
+  position: fixed;
+  top: 6px; left: 40px;
+  z-index: 999999;
+  display: flex; gap: 4px;
+  font-family: var(--mt-font);
+  font-size: 11px;
+  user-select: none;
+}
+
+.mt-layout-slot {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 20px; height: 20px;
+  border: 1px solid var(--mt-dim);
+  color: var(--mt-dim);
+  background: var(--mt-bg);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+.mt-layout-slot:hover { border-color: var(--mt-accent); color: var(--mt-accent); }
+
+.mt-layout-saved {
+  border-color: var(--mt-accent);
+  color: var(--mt-accent-bright);
+  text-shadow: 0 0 4px var(--mt-accent);
+}
+.mt-layout-saved:hover { background: var(--mt-accent); color: var(--mt-titlebar-fg); text-shadow: none; }
+
+@keyframes mt-layoutFlash {
+  0%, 100% { background: var(--mt-bg); }
+  50% { background: var(--mt-accent); color: var(--mt-titlebar-fg); }
+}
+.mt-layout-flash { animation: mt-layoutFlash 0.3s ease 2; }

package/index.js

@@ -0,0 +1,27 @@
+// minterm — modular DOS-style windowing UI
+// Import only what you need, or use this barrel export.
+
+// Core
+export { Emitter } from './src/emitter.js';
+export { getNextZ, bringToFront, getAllWindows, cycleWindow } from './src/z-index.js';
+export { WindowManager } from './src/window-manager.js';
+export { ModalManager } from './src/modal-manager.js';
+export { ArrowOverlay } from './src/arrow-overlay.js';
+export { formatNum, formatPrice, formatQty, formatPct } from './src/formatters.js';
+export { themes, applyTheme } from './src/themes.js';
+
+// Widgets
+export { BaseWidget } from './src/widgets/base-widget.js';
+export { Ticker } from './src/widgets/ticker.js';
+export { MiniChart } from './src/widgets/mini-chart.js';
+export { MessageLog } from './src/widgets/message-log.js';
+export { RangeBar } from './src/widgets/range-bar.js';
+export { ActivityBars } from './src/widgets/activity-bars.js';
+
+// Adapters
+export { BaseAdapter } from './src/adapters/base-adapter.js';
+export { ManualAdapter } from './src/adapters/manual-adapter.js';
+export { WebSocketAdapter } from './src/adapters/websocket-adapter.js';
+export { RestPoller } from './src/adapters/rest-poller.js';
+export { NatsAdapter } from './src/adapters/nats-adapter.js';
+export { RedisAdapter } from './src/adapters/redis-adapter.js';

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "minterm",
+  "version": "0.1.0",
+  "description": "Minimal DOS-style windowing UI — zero deps, rAF-batched widgets, data adapters",
+  "type": "module",
+  "main": "index.js",
+  "exports": {
+    ".": "./index.js",
+    "./css": "./css/minterm.css"
+  },
+  "files": [
+    "index.js",
+    "src/",
+    "css/",
+    "LICENSE"
+  ],
+  "sideEffects": ["./css/minterm.css"],
+  "scripts": {
+    "lint": "eslint src/ index.js",
+    "lint:fix": "eslint src/ index.js --fix",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "devDependencies": {
+    "eslint": "^9.0.0",
+    "jsdom": "^25.0.0",
+    "vitest": "^3.0.0"
+  },
+  "keywords": ["terminal", "retro", "ui", "windowing", "dos", "widgets", "minterm"],
+  "author": "haiyanghe",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/haiyanghe/minterm.git"
+  },
+  "homepage": "https://github.com/haiyanghe/minterm#readme",
+  "bugs": {
+    "url": "https://github.com/haiyanghe/minterm/issues"
+  },
+  "license": "Unlicense"
+}