@tn3270/gui 0.0.0-stage → 0.1.0

package/app/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@tn3270/gui",
+  "version": "0.1.0",
+  "description": "An Electron TN3270 emulator with a canvas renderer that blits glyphs from an atlas baked out of x3270's own 3270 bitmap font.",
+  "license": "MIT",
+  "author": "Adam Thornton <athornton@gmail.com>",
+  "type": "module",
+  "main": "main.js"
+}

package/app/preload.cjs

@@ -0,0 +1,37 @@
+"use strict";
+
+// packages/gui/dist/preload.cjs
+Object.defineProperty(exports, "__esModule", { value: true });
+var electron_1 = require("electron");
+electron_1.contextBridge.exposeInMainWorld("tn3270", {
+  /** Receive the glyph atlas once: geometry, coverage bytes and the blank-column set. */
+  onAtlas: (fn) => {
+    electron_1.ipcRenderer.on("atlas", (_e, atlas) => {
+      fn(atlas);
+    });
+  },
+  /**
+   * Receive a finished draw list.
+   *
+   * The LIST, not the snapshot: `drawList` needs core's palette and code page, and a
+   * browser cannot resolve a bare specifier like `@tn3270/core` without a bundler. Doing
+   * the work in main means the renderer imports nothing but its own relative modules --
+   * which is also less for it to know, and it already owns no protocol state.
+   */
+  onFrame: (fn) => {
+    electron_1.ipcRenderer.on("frame", (_e, frame) => {
+      fn(frame);
+    });
+  },
+  /** Receive a message to show instead of a screen (connect and TLS failures). */
+  onError: (fn) => {
+    electron_1.ipcRenderer.on("error-message", (_e, message) => {
+      fn(message);
+    });
+  },
+  /** Send one named 3270 action up to the session. */
+  sendAction: (action) => {
+    electron_1.ipcRenderer.send("action", action);
+  }
+});
+//# sourceMappingURL=preload.cjs.map

package/app/preload.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/preload.cts"],
+  "sourcesContent": ["import { contextBridge, ipcRenderer } from 'electron';\n\n/**\n * A `.cts` FILE ON PURPOSE. Electron preload scripts are CommonJS -- an ESM preload fails\n * with \"Cannot use import statement outside a module\" and the bridge silently never\n * appears, leaving a blank window and no error in the renderer. TypeScript compiles `.cts`\n * to `.cjs` with CommonJS semantics, so this stays typechecked instead of becoming a\n * hand-written JavaScript file.\n */\n\n/**\n * The ONLY bridge between the protocol and the canvas: frames down, actions up.\n *\n * `contextIsolation` is on and `nodeIntegration` off, so the renderer cannot reach a socket\n * even if it tried. That is not ceremony -- the renderer parses nothing and owns no protocol\n * state, so a compromise there costs a repaint. Widening this surface is what would change\n * that, which is why it is two functions and not an object graph.\n */\ncontextBridge.exposeInMainWorld('tn3270', {\n  /** Receive the glyph atlas once: geometry, coverage bytes and the blank-column set. */\n  onAtlas: (fn: (atlas: unknown) => void) => {\n    ipcRenderer.on('atlas', (_e, atlas) => { fn(atlas); });\n  },\n  /**\n   * Receive a finished draw list.\n   *\n   * The LIST, not the snapshot: `drawList` needs core's palette and code page, and a\n   * browser cannot resolve a bare specifier like `@tn3270/core` without a bundler. Doing\n   * the work in main means the renderer imports nothing but its own relative modules --\n   * which is also less for it to know, and it already owns no protocol state.\n   */\n  onFrame: (fn: (frame: unknown) => void) => {\n    ipcRenderer.on('frame', (_e, frame) => { fn(frame); });\n  },\n  /** Receive a message to show instead of a screen (connect and TLS failures). */\n  onError: (fn: (message: string) => void) => {\n    ipcRenderer.on('error-message', (_e, message: string) => { fn(message); });\n  },\n  /** Send one named 3270 action up to the session. */\n  sendAction: (action: unknown) => { ipcRenderer.send('action', action); },\n});\n"],
+  "mappings": ";;;;AAAA,IAAA,aAAA,QAAA,UAAA;AAkBA,WAAA,cAAc,kBAAkB,UAAU;;EAExC,SAAS,CAAC,OAAgC;AACxC,eAAA,YAAY,GAAG,SAAS,CAAC,IAAI,UAAS;AAAG,SAAG,KAAK;IAAG,CAAC;EACvD;;;;;;;;;EASA,SAAS,CAAC,OAAgC;AACxC,eAAA,YAAY,GAAG,SAAS,CAAC,IAAI,UAAS;AAAG,SAAG,KAAK;IAAG,CAAC;EACvD;;EAEA,SAAS,CAAC,OAAiC;AACzC,eAAA,YAAY,GAAG,iBAAiB,CAAC,IAAI,YAAmB;AAAG,SAAG,OAAO;IAAG,CAAC;EAC3E;;EAEA,YAAY,CAAC,WAAmB;AAAG,eAAA,YAAY,KAAK,UAAU,MAAM;EAAG;CACxE;",
+  "names": []
+}

package/app/renderer.js

@@ -0,0 +1,559 @@
+// packages/canvas/dist/keys.js
+function layoutCharacter(e) {
+  if (e.getModifierState?.("AltGraph") !== true)
+    return null;
+  if ([...e.key].length === 1)
+    return { kind: "type", text: e.key };
+  return null;
+}
+var NAMED = Object.freeze({
+  Enter: { kind: "enter" },
+  ArrowLeft: { kind: "left" },
+  ArrowRight: { kind: "right" },
+  ArrowUp: { kind: "up" },
+  ArrowDown: { kind: "down" },
+  Home: { kind: "home" },
+  Backspace: { kind: "backspace" },
+  Delete: { kind: "delete" },
+  // vt220 Select/End bound to EraseEOF, following c3270 -- a CHOICE, not a derivation.
+  End: { kind: "eraseEOF" },
+  // x3270's Toggle(insertMode), fb-x3270:210.
+  Insert: { kind: "toggleInsert" }
+});
+var MODIFIERS = /* @__PURE__ */ new Set([
+  "Shift",
+  "Control",
+  "Alt",
+  "Meta",
+  "CapsLock",
+  "AltGraph",
+  "NumLock",
+  "ScrollLock"
+]);
+var CTRL = Object.freeze({
+  c: { kind: "clear" },
+  r: { kind: "reset" },
+  u: { kind: "eraseInput" },
+  "]": { kind: "quit" },
+  a: { kind: "attn" },
+  d: { kind: "dup" },
+  f: { kind: "fieldMark" },
+  k: { kind: "toggleKeypad" },
+  // The full 122-key keyboard, 2026-10-22. Free in both mappers -- the taken chords are
+  // C R U ] A D F K T -- and claiming it also suppresses Firefox's bookmarks sidebar, which is
+  // correct: `renderer.ts` calls `preventDefault` only for keys we claimed, so claiming it is
+  // what makes it ours. Intercepted CLIENT-SIDE in both DOM front ends, exactly as `toggleKeypad`
+  // is, and the gateway returns before `applyAction` for it -- see `web/src/main.ts`.
+  b: { kind: "toggleKeyboard" },
+  /**
+   * Ctrl-T, the transfer form -- `BINDING_INTENT`'s own spelling, now that the GUI has a dialog.
+   *
+   * THE GUI HAD THIS CHORD DEAD WHILE THE WINDOW WORKED, which is how this was found: a real
+   * Electron run with `TN3270_GUI_KEYS=Ctrl+T` printed `keys: sent Ctrl+T` and NO `action:` line
+   * at all, where a click on the `Xfer` keypad button opened the window fine. The keypad route
+   * went through `KEYPAD_KEYS` and never through this table, so the one that was missing was also
+   * the one no harness drove.
+   *
+   * ACCEPTED BY THE WEB FRONT END TOO, since this mapper is shared, and that is safe rather than
+   * merely tolerable: `protocol.ts:129-131` REJECTS the kind at decode with a per-client `error`
+   * frame, and `web/src/main.ts:151-154` answers a decode failure on that one socket without
+   * touching the session or the process. The browser could already produce this kind from the
+   * `Xfer` button it draws today, so this adds a second route to an answer that already exists --
+   * no new failure mode, and the refusal names its reason. When stage 4 gives the gateway a
+   * transfer path that rejection becomes an interception, and this entry needs no change.
+   */
+  t: { kind: "transferForm" }
+});
+var PA_CODES = Object.freeze({
+  Digit1: { kind: "pa", n: 1 },
+  Digit2: { kind: "pa", n: 2 },
+  Digit3: { kind: "pa", n: 3 }
+});
+function actionForKey(e) {
+  if (MODIFIERS.has(e.key))
+    return null;
+  if (e.shiftKey && !e.altKey && e.ctrlKey !== e.metaKey && e.code === "KeyC") {
+    return { kind: "requestCopy" };
+  }
+  if (e.ctrlKey && !e.altKey && !e.metaKey) {
+    return CTRL[e.key.toLowerCase()] ?? null;
+  }
+  if (e.altKey && !e.ctrlKey && !e.metaKey) {
+    if (e.code === "KeyK")
+      return { kind: "toggleKeypad" };
+    if (e.code === "KeyM")
+      return { kind: "geometryMenu" };
+    return PA_CODES[e.code] ?? layoutCharacter(e);
+  }
+  if (e.metaKey || e.altKey)
+    return layoutCharacter(e);
+  if (e.key === "Tab")
+    return e.shiftKey ? { kind: "backTab" } : { kind: "tab" };
+  const fn = /^F(\d{1,2})$/.exec(e.key);
+  if (fn !== null) {
+    const n = Number(fn[1]);
+    if (n < 1 || n > 12)
+      return null;
+    return { kind: "pf", n: e.shiftKey ? n + 12 : n };
+  }
+  const named = NAMED[e.key];
+  if (named !== void 0)
+    return named;
+  if ([...e.key].length === 1)
+    return { kind: "type", text: e.key };
+  return null;
+}
+
+// packages/canvas/dist/forwardKeys.js
+function isEditableTarget(target) {
+  const tag = typeof target?.tagName === "string" ? target.tagName : "";
+  return tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || target?.isContentEditable === true;
+}
+var PASTE_HOSTS = /* @__PURE__ */ new Set(["http:", "https:"]);
+function forwardPaste(deps) {
+  if (!PASTE_HOSTS.has(deps.protocol))
+    return;
+  deps.on("paste", (e) => {
+    if (isEditableTarget(e.target))
+      return;
+    const text = e.clipboardData?.getData("text/plain") ?? "";
+    if (text === "")
+      return;
+    e.preventDefault();
+    deps.clearSelection();
+    deps.sendAction({ kind: "paste", text });
+  });
+}
+function forwardCopy(deps) {
+  if (!PASTE_HOSTS.has(deps.protocol))
+    return;
+  deps.on("copy", (e) => {
+    if (isEditableTarget(e.target))
+      return;
+    deps.onHandled();
+    const text = deps.cached();
+    if (text !== void 0 && text !== "" && e.clipboardData) {
+      e.clipboardData.setData("text/plain", text);
+      e.preventDefault();
+      deps.onCopied?.();
+      return;
+    }
+    deps.copySelection();
+  });
+}
+
+// packages/canvas/dist/blit.js
+var rgbCss = ([r, g, b]) => `rgb(${r},${g},${b})`;
+var tintKey = ([r, g, b]) => `${r},${g},${b}`;
+function bestScale(list, within) {
+  const byWidth = Math.floor(within.width / list.width);
+  const byHeight = Math.floor(within.height / list.height);
+  return Math.max(1, Math.min(byWidth, byHeight));
+}
+function center(list, within, scale) {
+  return {
+    x: Math.max(0, Math.floor((within.width - list.width * scale) / 2)),
+    y: Math.max(0, Math.floor((within.height - list.height * scale) / 2))
+  };
+}
+function blit(ctx2, list, opts) {
+  const { atlas: atlas2, scale, offsetX, offsetY } = opts;
+  ctx2.imageSmoothingEnabled = false;
+  const w = atlas2.cellWidth * scale;
+  const h = atlas2.cellHeight * scale;
+  for (const cell of list.cells) {
+    const dx = offsetX + cell.x * scale;
+    const dy = offsetY + cell.y * scale;
+    ctx2.fillStyle = rgbCss(cell.bg);
+    ctx2.fillRect(dx, dy, w, h);
+    if (!opts.blank.has(cell.glyph)) {
+      const image = opts.tinted(cell.fg);
+      if (image !== void 0) {
+        ctx2.drawImage(image, cell.glyph * atlas2.cellWidth, 0, atlas2.cellWidth, atlas2.cellHeight, dx, dy, w, h);
+      }
+    }
+    if (cell.underline) {
+      ctx2.fillStyle = rgbCss(cell.fg);
+      ctx2.fillRect(dx, dy + h - scale, w, scale);
+    }
+    if (cell.cursor) {
+      ctx2.fillStyle = rgbCss(cell.fg);
+      ctx2.fillRect(dx, dy + h - Math.max(scale, Math.floor(h / 4)), w, Math.max(scale, Math.floor(h / 4)));
+    }
+  }
+}
+
+// packages/canvas/dist/selection.js
+function normalizeRect(anchor2, focus2) {
+  return {
+    top: Math.min(anchor2.row, focus2.row),
+    left: Math.min(anchor2.col, focus2.col),
+    bottom: Math.max(anchor2.row, focus2.row),
+    right: Math.max(anchor2.col, focus2.col)
+  };
+}
+var DRAG_THRESHOLD_PX = 4;
+function movedPastThreshold(press, now) {
+  return Math.abs(now.x - press.x) >= DRAG_THRESHOLD_PX || Math.abs(now.y - press.y) >= DRAG_THRESHOLD_PX;
+}
+
+// packages/canvas/dist/copyCache.js
+function createCopyCache() {
+  let gen = 0;
+  let asked;
+  let text;
+  const same = (a, b) => a.top === b.top && a.left === b.left && a.bottom === b.bottom && a.right === b.right;
+  return {
+    begin(rect) {
+      gen += 1;
+      asked = { ...rect };
+      text = void 0;
+      return gen;
+    },
+    accept(g, t) {
+      if (g !== gen || t === "")
+        return;
+      text = t;
+    },
+    invalidate() {
+      gen += 1;
+      asked = void 0;
+      text = void 0;
+    },
+    take(rect) {
+      if (asked === void 0 || text === void 0 || !same(asked, rect))
+        return void 0;
+      return text;
+    }
+  };
+}
+
+// packages/canvas/dist/renderer.js
+var canvas = document.querySelector("#screen");
+if (canvas === null)
+  throw new Error("no #screen canvas in the document");
+var real = canvas.getContext("2d");
+if (real === null)
+  throw new Error("no 2D context: the window cannot draw");
+var ctx = real;
+var atlas;
+var blank = /* @__PURE__ */ new Set();
+var last;
+var anchor = null;
+var focus = null;
+var dragging = false;
+var pressAt = null;
+var moved = false;
+var copyCache = createCopyCache();
+var copyHandled = false;
+function clearSelection() {
+  anchor = null;
+  focus = null;
+  dragging = false;
+  pressAt = null;
+  moved = false;
+  copyCache.invalidate();
+}
+function selectedRect() {
+  if (anchor === null || focus === null || !moved)
+    return null;
+  return normalizeRect(anchor, focus);
+}
+var errored = false;
+var noticeOnly = false;
+var tints = /* @__PURE__ */ new Map();
+var building = /* @__PURE__ */ new Set();
+function tintOf(color) {
+  if (atlas === void 0)
+    return void 0;
+  const key = tintKey(color);
+  const got = tints.get(key);
+  if (got !== void 0)
+    return got;
+  if (building.has(key))
+    return void 0;
+  building.add(key);
+  const w = atlas.geometry.cols * atlas.geometry.cellWidth;
+  const h = atlas.geometry.cellHeight;
+  const data = new Uint8ClampedArray(w * h * 4);
+  for (let i = 0; i < atlas.coverage.length; i++) {
+    data[i * 4] = color[0];
+    data[i * 4 + 1] = color[1];
+    data[i * 4 + 2] = color[2];
+    data[i * 4 + 3] = atlas.coverage[i];
+  }
+  void createImageBitmap(new ImageData(data, w, h)).then((bmp) => {
+    tints.set(key, bmp);
+    building.delete(key);
+    if (last !== void 0)
+      paint(last);
+  });
+  return void 0;
+}
+function paint(list) {
+  last = list;
+  if (atlas === void 0 || canvas === null)
+    return;
+  const within = { width: window.innerWidth, height: window.innerHeight };
+  const scale = bestScale(list, within);
+  const at = center(list, within, scale);
+  canvas.width = Math.max(within.width, list.width * scale);
+  canvas.height = Math.max(within.height, list.height * scale);
+  ctx.fillStyle = "#000";
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  const options = {
+    atlas: atlas.geometry,
+    scale,
+    offsetX: at.x,
+    offsetY: at.y,
+    blank,
+    // undefined skips the glyph this frame; tintOf repaints when the bitmap is ready.
+    tinted: (color) => tintOf(color)
+  };
+  blit(ctx, list, options);
+  if (list.oia !== void 0) {
+    blit(ctx, { cells: list.oia.cells, width: list.width, height: list.height }, options);
+  }
+  const rect = selectedRect();
+  if (rect !== null && atlas !== void 0) {
+    const g = atlas.geometry;
+    ctx.save();
+    ctx.globalCompositeOperation = "difference";
+    ctx.fillStyle = "#ffffff";
+    ctx.fillRect(at.x + rect.left * g.cellWidth * scale, at.y + rect.top * g.cellHeight * scale, (rect.right - rect.left + 1) * g.cellWidth * scale, (rect.bottom - rect.top + 1) * g.cellHeight * scale);
+    ctx.restore();
+  }
+}
+window.tn3270.onAtlas((message) => {
+  atlas = message;
+  blank = new Set(message.blank);
+  if (last !== void 0) {
+    errored = false;
+    noticeOnly = false;
+    paint(last);
+  }
+});
+window.tn3270.onFrame((list) => {
+  errored = false;
+  noticeOnly = false;
+  clearSelection();
+  paint(list);
+});
+function paintMessage(message) {
+  if (canvas === null || real === null)
+    return;
+  errored = true;
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+  real.fillStyle = "#000";
+  real.fillRect(0, 0, canvas.width, canvas.height);
+  real.fillStyle = "#ff5555";
+  real.font = "15px monospace";
+  let y = 40;
+  for (const line of wrap(message, Math.max(20, Math.floor(canvas.width / 9)))) {
+    real.fillText(line, 20, y);
+    y += 21;
+  }
+}
+window.tn3270.onError((message) => {
+  noticeOnly = false;
+  clearSelection();
+  paintMessage(message);
+});
+window.tn3270.onCopyFailed?.((message) => {
+  if (errored && !noticeOnly)
+    return;
+  noticeOnly = true;
+  paintMessage(message);
+});
+window.addEventListener("keydown", (e) => {
+  if (isEditableTarget(e.target)) {
+    return;
+  }
+  const action = actionForKey(e);
+  if (action === null)
+    return;
+  e.preventDefault();
+  if (action.kind === "requestCopy") {
+    copyByChord();
+    return;
+  }
+  clearSelection();
+  window.tn3270.sendAction(action);
+});
+forwardPaste({
+  on: (type, handler) => {
+    window.addEventListener(type, handler);
+  },
+  sendAction: (action) => {
+    window.tn3270.sendAction(action);
+  },
+  protocol: location.protocol,
+  clearSelection
+});
+forwardCopy({
+  on: (type, handler) => {
+    window.addEventListener(type, handler);
+  },
+  protocol: location.protocol,
+  cached: cachedSelection,
+  copySelection,
+  onHandled: () => {
+    copyHandled = true;
+  },
+  onCopied: copiedFromCache
+});
+function copiedFromCache() {
+  if (!errored || !noticeOnly || last === void 0)
+    return;
+  errored = false;
+  noticeOnly = false;
+  paint(last);
+}
+function cellAt(offsetX, offsetY, list) {
+  if (atlas === void 0)
+    return null;
+  const g = atlas.geometry;
+  const within = { width: window.innerWidth, height: window.innerHeight };
+  const scale = bestScale(list, within);
+  const at = center(list, within, scale);
+  const x = (offsetX - at.x) / scale;
+  const y = (offsetY - at.y) / scale;
+  if (x < 0 || y < 0)
+    return null;
+  const screenBottom = list.oia?.y ?? list.height;
+  const cols = Math.floor(list.width / g.cellWidth);
+  const rows = Math.floor(screenBottom / g.cellHeight);
+  const col = Math.floor(x / g.cellWidth);
+  const row = Math.floor(y / g.cellHeight);
+  if (col >= cols || row >= rows)
+    return null;
+  return { row, col };
+}
+canvas.addEventListener("mousedown", (e) => {
+  if (e.button !== 0)
+    return;
+  const list = last;
+  if (errored && !noticeOnly || list === void 0)
+    return;
+  const cell = cellAt(e.offsetX, e.offsetY, list);
+  if (cell === null)
+    return;
+  copyCache.invalidate();
+  anchor = cell;
+  focus = cell;
+  dragging = true;
+  pressAt = { x: e.clientX, y: e.clientY };
+  moved = false;
+  errored = false;
+  noticeOnly = false;
+  paint(list);
+});
+function release() {
+  dragging = false;
+}
+function prefetchSelection() {
+  const fetchSelection = window.tn3270.fetchSelection;
+  if (errored && !noticeOnly || fetchSelection === void 0)
+    return;
+  const rect = selectedRect();
+  if (rect === null)
+    return;
+  const gen = copyCache.begin(rect);
+  fetchSelection.call(window.tn3270, rect).then((text) => {
+    copyCache.accept(gen, text);
+  }).catch(() => {
+  });
+}
+window.addEventListener("mouseup", () => {
+  const ended = dragging;
+  release();
+  if (ended)
+    prefetchSelection();
+});
+window.addEventListener("blur", release);
+window.addEventListener("mousemove", (e) => {
+  if (!dragging)
+    return;
+  const list = last;
+  if (list === void 0)
+    return;
+  let crossed = false;
+  if (!moved && pressAt !== null && movedPastThreshold(pressAt, { x: e.clientX, y: e.clientY })) {
+    moved = true;
+    crossed = true;
+  }
+  const cell = cellAt(e.offsetX, e.offsetY, list);
+  if (cell === null) {
+    if (crossed)
+      paint(list);
+    return;
+  }
+  if (!crossed && focus !== null && focus.row === cell.row && focus.col === cell.col)
+    return;
+  focus = cell;
+  paint(list);
+});
+window.addEventListener("resize", () => {
+  if (last !== void 0)
+    paint(last);
+});
+function copySelection() {
+  const rect = selectedRect();
+  if (rect === null)
+    return false;
+  window.tn3270.sendAction({ kind: "copy", rect });
+  return true;
+}
+function cachedSelection() {
+  const rect = selectedRect();
+  return rect === null ? void 0 : copyCache.take(rect);
+}
+function copyByChord() {
+  if (cachedSelection() !== void 0) {
+    copyHandled = false;
+    try {
+      document.execCommand("copy");
+    } catch {
+    }
+    if (copyHandled)
+      return;
+  }
+  copySelection();
+}
+window.__tn3270Copy = () => copySelection();
+window.__tn3270CellCenter = (row, col) => {
+  const list = last;
+  if (list === void 0 || atlas === void 0)
+    return null;
+  const g = atlas.geometry;
+  const within = { width: window.innerWidth, height: window.innerHeight };
+  const scale = bestScale(list, within);
+  const at = center(list, within, scale);
+  const screenBottom = list.oia?.y ?? list.height;
+  if (row < 0 || col < 0)
+    return null;
+  if (col >= Math.floor(list.width / g.cellWidth))
+    return null;
+  if (row >= Math.floor(screenBottom / g.cellHeight))
+    return null;
+  return {
+    x: at.x + (col + 0.5) * g.cellWidth * scale,
+    y: at.y + (row + 0.5) * g.cellHeight * scale
+  };
+};
+function wrap(text, cols) {
+  const out = [];
+  let line = "";
+  for (const word of text.split(/\s+/)) {
+    if (line !== "" && `${line} ${word}`.length > cols) {
+      out.push(line);
+      line = word;
+    } else
+      line = line === "" ? word : `${line} ${word}`;
+  }
+  if (line !== "")
+    out.push(line);
+  return out;
+}
+//# sourceMappingURL=renderer.js.map