@hex1b/web-terminal 0.172.0 → 0.173.0-alpha.1801.1.3dc2d9b

package/dist/index.js

@@ -557,6 +557,11 @@ function validateMetadata(metadata2) {
   if (commandMark !== null) validateCommandMark(commandMark);
   const columns = integer(metadata2.columns, "columns", 1, 1024);
   const rows = integer(metadata2.rows, "rows", 1, 512);
+  if (metadata2.lineRenditions !== void 0) {
+    array(metadata2.lineRenditions, "line renditions", rows);
+    if (metadata2.lineRenditions.length !== rows) throw new Error("Invalid line rendition count");
+    for (const rendition of metadata2.lineRenditions) integer(rendition, "line rendition", 0, 3);
+  }
   if (typeof metadata2.mouseTracking !== "number" || ![0, 9, 1e3, 1002, 1003].includes(metadata2.mouseTracking)) {
     throw new Error("Unsupported mouse tracking mode");
   }
@@ -2154,32 +2159,45 @@ var init_renderer = __esm({
           [left, top, Math.max(0, right - left), Math.max(0, bottom - top)]
         );
       }
-      decorations(cell, x, y, width, foreground, underline = cell.underlineColor, clip) {
-        if (cell.attributes & 128) this.solid(x, y + 10, width, 1, foreground, clip);
-        if (cell.attributes & 256) this.solid(x, y + 1, width, 1, foreground, clip);
+      decorations(cell, x, y, width, foreground, underline = cell.underlineColor, clip, scaleY = 1) {
+        if (cell.attributes & 128) this.solid(x, y + 10 * scaleY, width, scaleY, foreground, clip);
+        if (cell.attributes & 256) this.solid(x, y + scaleY, width, scaleY, foreground, clip);
         const style = cell.underlineStyle || (cell.attributes & 8 ? 1 : 0);
-        this.underline(style, x, y, width, rgba(underline), clip);
+        this.underline(style, x, y, width, rgba(underline), clip, scaleY);
       }
-      underline(style, x, y, width, color2, clip) {
-        if (style === 1) this.solid(x, y + 18, width, 1, color2, clip);
+      underline(style, x, y, width, color2, clip, scaleY = 1) {
+        if (style === 1) this.solid(x, y + 18 * scaleY, width, scaleY, color2, clip);
         else if (style === 2) {
-          this.solid(x, y + 16, width, 1, color2, clip);
-          this.solid(x, y + 18, width, 1, color2, clip);
+          this.solid(x, y + 16 * scaleY, width, scaleY, color2, clip);
+          this.solid(x, y + 18 * scaleY, width, scaleY, color2, clip);
         } else if (style === 3) {
           for (let dx = 0; dx < width; dx++) {
-            this.solid(x + dx, y + 17 + Math.round(Math.sin((x + dx) * Math.PI / 4)), 1, 1, color2, clip);
+            this.solid(x + dx, y + (17 + Math.round(Math.sin((x + dx) * Math.PI / 4))) * scaleY, 1, scaleY, color2, clip);
           }
         } else if (style === 4 || style === 5) {
           const step = style === 4 ? 2 : 5;
           const segment = style === 4 ? 1 : 3;
-          for (let dx = 0; dx < width; dx += step) this.solid(x + dx, y + 18, Math.min(segment, width - dx), 1, color2, clip);
+          for (let dx = 0; dx < width; dx += step) this.solid(x + dx, y + 18 * scaleY, Math.min(segment, width - dx), scaleY, color2, clip);
         }
       }
       renderCell(cell, index, metadata2, blinkOn, palette2, linkDecoration, selectionClip) {
         if (!cell.width || cell.attributes & 64 || cell.attributes & 16 && !blinkOn) return;
-        const x = index % this.columns * CELL_WIDTH;
-        const y = Math.floor(index / this.columns) * CELL_HEIGHT;
-        const width = Math.min(cell.width * CELL_WIDTH, this.width - x);
+        const row = Math.floor(index / this.columns);
+        const rendition = metadata2.lineRenditions?.[row] ?? 0;
+        const scaleX = rendition ? 2 : 1;
+        const scaleY = rendition >= 2 ? 2 : 1;
+        const column = index % this.columns;
+        if (column >= Math.max(1, Math.floor(this.columns / scaleX))) return;
+        const x = column * CELL_WIDTH * scaleX;
+        const rowY = row * CELL_HEIGHT;
+        const y = rowY - (rendition === 3 ? CELL_HEIGHT : 0);
+        const width = Math.min(cell.width * CELL_WIDTH * scaleX, this.width - x);
+        const clip = !rendition ? selectionClip : selectionClip ? [
+          selectionClip[0],
+          Math.max(rowY, selectionClip[1]),
+          selectionClip[2],
+          Math.min(rowY + CELL_HEIGHT, selectionClip[1] + selectionClip[3]) - Math.max(rowY, selectionClip[1])
+        ] : [0, rowY, this.width, CELL_HEIGHT];
         const foreground = rgba(selectionClip ? palette2.selectionForeground : foregroundColor(cell, metadata2, palette2));
         const glyph = isKgpPlaceholder(cell) ? void 0 : this.glyphs.get(glyphKey(cell));
         if (glyph) {
@@ -2188,12 +2206,12 @@ var init_renderer = __esm({
             this.atlas,
             x,
             y,
-            cell.width * CELL_WIDTH,
-            CELL_HEIGHT,
+            cell.width * CELL_WIDTH * scaleX,
+            CELL_HEIGHT * scaleY,
             tint,
             glyph.colored ? 2 : 1,
             [glyph.u0, glyph.v0, glyph.u1, glyph.v1],
-            selectionClip
+            clip
           );
         }
         this.decorations(
@@ -2203,10 +2221,11 @@ var init_renderer = __esm({
           width,
           foreground,
           selectionClip ? palette2.selectionForeground : underlineColor(cell, metadata2, palette2),
-          selectionClip
+          clip,
+          scaleY
         );
         if (linkDecoration && !cell.underlineStyle && !(cell.attributes & 8) && !isKgpPlaceholder(cell)) {
-          this.underline(linkDecoration, x, y, width, foreground, selectionClip);
+          this.underline(linkDecoration, x, y, width, foreground, clip, scaleY);
         }
       }
       render(cells2, metadata2, blinkOn, linkDecorations, palette2 = DEFAULT_PALETTE) {
@@ -2222,10 +2241,13 @@ var init_renderer = __esm({
         for (let i = 0; i < cells2.length; i++) {
           const cell = cells2[i];
           if (!cell) continue;
+          const row = Math.floor(i / this.columns);
+          const scaleX = metadata2.lineRenditions?.[row] ? 2 : 1;
+          if (i % this.columns >= Math.max(1, Math.floor(this.columns / scaleX))) continue;
           this.solid(
-            i % this.columns * CELL_WIDTH,
-            Math.floor(i / this.columns) * CELL_HEIGHT,
-            CELL_WIDTH,
+            i % this.columns * CELL_WIDTH * scaleX,
+            row * CELL_HEIGHT,
+            CELL_WIDTH * scaleX,
             CELL_HEIGHT,
             rgba(backgroundColor(cell, metadata2, palette2))
           );
@@ -2239,10 +2261,11 @@ var init_renderer = __esm({
         const selection = metadata2.history?.selection;
         if (selection?.status === "valid") {
           for (const range of selection.ranges) {
+            const scaleX = metadata2.lineRenditions?.[range.row] ? 2 : 1;
             const clip = [
-              range.startColumn * CELL_WIDTH,
+              range.startColumn * CELL_WIDTH * scaleX,
               range.row * CELL_HEIGHT,
-              (range.endColumn - range.startColumn) * CELL_WIDTH,
+              (range.endColumn - range.startColumn) * CELL_WIDTH * scaleX,
               CELL_HEIGHT
             ];
             this.solid(...clip, rgba(palette2.selectionBackground));
@@ -2260,13 +2283,14 @@ var init_renderer = __esm({
         if (cursor.visible && (!cursorBlink || blinkOn) && cursor.x >= 0 && cursor.x < this.columns && cursor.y >= 0 && cursor.y < this.rows) {
           const cell = cells2[cursor.y * this.columns + cursor.x];
           const color2 = rgba(palette2.cursor ?? (cell ? foregroundColor(cell, metadata2, palette2) : palette2.foreground));
-          const x = cursor.x * CELL_WIDTH;
+          const scaleX = metadata2.lineRenditions?.[cursor.y] ? 2 : 1;
+          const x = cursor.x * CELL_WIDTH * scaleX;
           const y = cursor.y * CELL_HEIGHT;
-          if (cursor.shape === 3 || cursor.shape === 4) this.solid(x, y + 18, CELL_WIDTH, 2, color2);
+          if (cursor.shape === 3 || cursor.shape === 4) this.solid(x, y + 18, CELL_WIDTH * scaleX, 2, color2);
           else if (cursor.shape === 5 || cursor.shape === 6) this.solid(x, y, 2, CELL_HEIGHT, color2);
           else {
             color2[3] *= 0.55;
-            this.solid(x, y, CELL_WIDTH, CELL_HEIGHT, color2);
+            this.solid(x, y, CELL_WIDTH * scaleX, CELL_HEIGHT, color2);
           }
         }
         const base = rgba(metadata2.colorEncoding === "indexed-v1" ? palette2.background : metadata2.defaultBackground ?? cells2[0]?.background ?? 4278190080);
@@ -2562,6 +2586,7 @@ async function drawFrame() {
         commandMark: metadata.commandMark,
         text,
         hyperlinks: metadata.hyperlinks,
+        lineRenditions: metadata.lineRenditions,
         ...links.present(cells, metadata)
       });
       send({ type: "ack", revision: frame.revision });
@@ -3199,7 +3224,10 @@ function captureMouse(canvas, send2, focus, inspection = {}) {
   const originalCursor = canvas.style.cursor;
   const state = () => ({ tracking, ...inspection.state?.() });
   function point(event, clamp2 = false) {
-    return cellPoint(event, canvas.getBoundingClientRect(), columns, rows, clamp2);
+    const position = cellPoint(event, canvas.getBoundingClientRect(), columns, rows, clamp2);
+    if (position && inspection.lineRenditions?.()[position.y])
+      position.x = Math.min(Math.max(0, Math.floor(columns / 2) - 1), Math.floor(position.x / 2));
+    return position;
   }
   function refreshHover(modifiers = hoverModifiers) {
     if (!inspection.hyperlink) return;
@@ -5508,6 +5536,7 @@ var WebTerminal = class _WebTerminal {
   #selectionUIError = "";
   #canvasSize = { width: 0, height: 0 };
   #hyperlinks = new Hyperlinks();
+  #lineRenditions = [];
   #links;
   #linkDetector;
   #linkGeneration = 1;
@@ -5796,6 +5825,7 @@ var WebTerminal = class _WebTerminal {
       }
     };
     this.#mouse = captureMouse(this.#canvas, (command) => this.#inputCommand(command), () => this.focus(), {
+      lineRenditions: () => this.#lineRenditions,
       state: () => ({
         historical: !this.viewport.following || this.viewport.pending,
         readOnly: this.#readOnly,
@@ -5914,6 +5944,7 @@ var WebTerminal = class _WebTerminal {
       }
       this.#options.onStatus?.(message.message, message.level);
     } else if (message.type === "geometry") {
+      this.#lineRenditions = message.lineRenditions ?? [];
       this.#linkRevision = message.revision;
       this.#osc8Rows.clear();
       for (const range of message.hyperlinks) {
@@ -6075,7 +6106,8 @@ var WebTerminal = class _WebTerminal {
         const element = document.createElement("span");
         element.className = "highlight";
         element.setAttribute("part", "selection-highlight");
-        element.style.cssText = `left:${range.startColumn / this.#geometry.columns * 100}%;top:${range.row / this.#geometry.rows * 100}%;width:${(range.endColumn - range.startColumn) / this.#geometry.columns * 100}%;height:${100 / this.#geometry.rows}%`;
+        const scaleX = this.#lineRenditions[range.row] ? 2 : 1;
+        element.style.cssText = `left:${range.startColumn * scaleX / this.#geometry.columns * 100}%;top:${range.row / this.#geometry.rows * 100}%;width:${(range.endColumn - range.startColumn) * scaleX / this.#geometry.columns * 100}%;height:${100 / this.#geometry.rows}%`;
         return element;
       }));
       const live = requiredElement(this.#inspection, ".return-live", HTMLButtonElement);