coneko-term 0.0.0-stage → 0.1.0

package/dist/renderer.js

@@ -0,0 +1,870 @@
+import { CELL_STRIDE, CLUSTER_FLAG, } from "./terminal.js";
+import { ImageCache, Z_UNDER_BACKGROUND, browserImageDecoder, parsePlacements, } from "./images.js";
+/** スクロールバーの幅（CSS ピクセル）。xterm.js 6.0.0 と同じ。 */
+export const SCROLLBAR_WIDTH = 14;
+/** カーソルが点滅する間隔（ミリ秒）。xterm.js 6.0.0 と同じ。 */
+const BLINK_MS = 600;
+/**
+ * 欄の大きさから列と行の数を出す。xterm.js 6.0.0 の FitAddon（`proposeDimensions`）と同じ式:
+ * 幅からスクロールバーの幅を引いてセルの幅で割り、切り捨てる。列は 2 以上、行は 1 以上。
+ * セルの大きさが分からない（0 以下）、または欄が見えていない（幅か高さが 0 以下）ときは
+ * `undefined`。
+ */
+export function proposeDimensions(input) {
+    const { width, height, cellWidth, cellHeight, scrollbarWidth } = input;
+    if (!(cellWidth > 0) || !(cellHeight > 0))
+        return undefined;
+    if (!(width > 0) || !(height > 0))
+        return undefined;
+    return {
+        cols: Math.max(2, Math.floor((width - scrollbarWidth) / cellWidth)),
+        rows: Math.max(1, Math.floor(height / cellHeight)),
+    };
+}
+/** 256 色のうち、16 から 255 の色（6x6x6 の立方体と 24 段階の灰色）。 */
+function extendedPaletteColor(index) {
+    let r, g, b;
+    if (index < 232) {
+        const i = index - 16;
+        const level = (n) => (n === 0 ? 0 : 55 + n * 40);
+        r = level(Math.floor(i / 36));
+        g = level(Math.floor(i / 6) % 6);
+        b = level(i % 6);
+    }
+    else {
+        r = g = b = 8 + (index - 232) * 10;
+    }
+    const hex = (n) => n.toString(16).padStart(2, "0");
+    return `#${hex(r)}${hex(g)}${hex(b)}`;
+}
+/** 色の語（`RowView.cells` の色の並び）から作る、描画に使う色の表。 */
+export class Palette {
+    foreground;
+    background;
+    cursor;
+    selection;
+    cursorText;
+    colors;
+    /** `ansi` は先頭の 16 色か、256 色すべて。 */
+    constructor(ansi, foreground, background, cursor, 
+    /** 選択範囲の色。半透明でよい（CSS の色）。 */
+    selection = "#ffffff4d", 
+    /** ブロックカーソルの下の字の色。省略したら背景の色。 */
+    cursorText = background) {
+        this.foreground = foreground;
+        this.background = background;
+        this.cursor = cursor;
+        this.selection = selection;
+        this.cursorText = cursorText;
+        this.colors = [...ansi];
+        for (let i = ansi.length; i < 256; i++)
+            this.colors.push(extendedPaletteColor(i));
+    }
+    /** パレットの `index` 番の色。 */
+    get(index) {
+        return this.colors[index] ?? this.foreground;
+    }
+    /**
+     * 色の語を CSS の色にする。上位 8 ビットが種類（0 既定、1 パレット、2 RGB）。
+     * `bold` のときは、パレットの 0 から 7 を明るい色（8 から 15）にする（xterm.js の既定）。
+     */
+    resolve(word, isBackground, bold = false) {
+        const kind = word >>> 24;
+        const value = word & 0xff_ffff;
+        if (kind === 1)
+            return this.get(bold && value < 8 ? value + 8 : value);
+        if (kind === 2) {
+            return `#${value.toString(16).padStart(6, "0")}`;
+        }
+        return isBackground ? this.background : this.foreground;
+    }
+}
+/** ブラウザーの `devicePixelRatio` と `requestAnimationFrame` を使う、既定の `RenderEnv`。 */
+export const browserEnv = {
+    devicePixelRatio: () => globalThis.devicePixelRatio || 1,
+    requestFrame: (cb) => requestAnimationFrame(cb),
+    cancelFrame: (id) => cancelAnimationFrame(id),
+};
+/**
+ * Canvas 2D でターミナルの画面を描く。
+ *
+ * - 座標はすべてデバイスピクセルの整数で扱い、canvas の実際の大きさを
+ *   `devicePixelRatio` 倍にする。にじまない。
+ * - 描くのは `requestAnimationFrame` でまとめる。変わった行（と、カーソルが動いた行）だけを描く。
+ *   表示位置が動いたり、大きさ・フォント・色が変わったときは全部を描く。
+ */
+export class CanvasRenderer {
+    canvas;
+    source;
+    options;
+    env;
+    ctx;
+    dpr = 1;
+    /** デバイスピクセルでのセルの大きさ。 */
+    cellW = 1;
+    cellH = 1;
+    /** セルの上端から、ベースラインまでの距離（デバイスピクセル）。 */
+    baseline = 1;
+    descent = 0;
+    frame;
+    needsFull = true;
+    extraRows = new Set();
+    lastCursor;
+    /** いま描く追加のカーソル。行ごと。 */
+    extra = new Map();
+    /** 追加のカーソルの色の語 `[字の色, カーソルの色]`。 */
+    extraColors = [0, 0];
+    /** 直前の描画で追加のカーソルがあった行。消えたときに描き直す。 */
+    lastExtraRows = new Set();
+    blinkOn = true;
+    blinkTimer;
+    disposed = false;
+    cellSizeListeners = new Set();
+    /** 直前の描画で、スクロールバックを見ていたか。 */
+    lastOffset = 0;
+    imageCache;
+    /** 今のフレームで描く画像（読み解き済みのもの）。層ごと、`z` と ID の順。 */
+    layers = { under: [], below: [], above: [] };
+    /** 直前のフレームで描いた画像の印。変わったら全部を描き直す。 */
+    lastImageKey = "";
+    /** 直前のフレームで、回している画像があったか（あれば次のフレームも描く）。 */
+    animating = false;
+    constructor(canvas, source, options, env = browserEnv) {
+        this.canvas = canvas;
+        this.source = source;
+        this.options = options;
+        this.env = env;
+        const ctx = canvas.getContext("2d", { alpha: false });
+        if (!ctx)
+            throw new Error("coneko-term: canvas 2d context is unavailable");
+        this.ctx = ctx;
+        this.measure();
+    }
+    /** セルの大きさ（CSS ピクセル）。 */
+    get cellSize() {
+        return { width: this.cellW / this.dpr, height: this.cellH / this.dpr };
+    }
+    /** デバイスピクセルでのセルの大きさ。 */
+    get deviceCellSize() {
+        return { width: this.cellW, height: this.cellH };
+    }
+    /** セルの大きさが変わった（フォントの読み込みや `devicePixelRatio` の変化のあと）。 */
+    onCellSizeChange(listener) {
+        this.cellSizeListeners.add(listener);
+        return { dispose: () => void this.cellSizeListeners.delete(listener) };
+    }
+    /** 設定を入れ替えて測り直す。 */
+    setOptions(options) {
+        this.options = options;
+        this.measure();
+    }
+    font(bold, italic, scale = 1) {
+        const { fontFamily, fontSize } = this.options;
+        return `${italic ? "italic " : ""}${bold ? "bold " : ""}${fontSize * this.dpr * scale}px ${fontFamily}`;
+    }
+    /**
+     * 字の幅と高さを測る。フォントを読み終える前に測ると代わりのフォントの値になるので、
+     * 読み終えたら呼び直す（`Terminal.open` がそうする）。
+     */
+    measure() {
+        const ctx = this.ctx;
+        this.dpr = this.env.devicePixelRatio();
+        const size = this.options.fontSize * this.dpr;
+        ctx.font = this.font(false, false);
+        ctx.textBaseline = "alphabetic";
+        const sample = ctx.measureText("W".repeat(32));
+        const m = ctx.measureText("Mg");
+        const width = Math.max(1, Math.round(sample.width / 32) || Math.round(size * 0.6));
+        const ascent = m.fontBoundingBoxAscent ?? m.actualBoundingBoxAscent ?? size * 0.8;
+        const descent = m.fontBoundingBoxDescent ?? m.actualBoundingBoxDescent ?? size * 0.2;
+        const charH = Math.max(1, Math.ceil(ascent + descent));
+        const height = Math.max(1, Math.floor(charH * this.options.lineHeight));
+        const changed = width !== this.cellW || height !== this.cellH;
+        this.cellW = width;
+        this.cellH = height;
+        this.descent = Math.ceil(descent);
+        // 字の高さより行が高いぶんは、上下に半分ずつ余白にする
+        this.baseline = Math.floor((height - charH) / 2) + Math.ceil(ascent);
+        this.applySize();
+        this.needsFull = true;
+        this.requestRender();
+        if (changed) {
+            const size = this.cellSize;
+            for (const l of [...this.cellSizeListeners])
+                l(size);
+        }
+    }
+    /** 列と行の数に合わせて canvas の大きさを決める。 */
+    applySize() {
+        const c = this.canvas;
+        const w = this.source.cols * this.cellW;
+        const h = this.source.rows * this.cellH;
+        if (c.width !== w)
+            c.width = w;
+        if (c.height !== h)
+            c.height = h;
+        c.style.width = `${w / this.dpr}px`;
+        c.style.height = `${h / this.dpr}px`;
+        // canvas の大きさを変えると、2D の状態（font など）が初期に戻る
+        this.ctx.textBaseline = "alphabetic";
+    }
+    /** 列と行の数が変わった。 */
+    resize() {
+        this.applySize();
+        this.needsFull = true;
+        this.requestRender();
+    }
+    /** 全部を描き直す。 */
+    invalidate() {
+        this.needsFull = true;
+        this.requestRender();
+    }
+    /** 行 `ys`（見えている画面の行番号）を次のフレームで描き直す。 */
+    invalidateRows(ys) {
+        for (const y of ys)
+            this.extraRows.add(y);
+        this.requestRender();
+    }
+    /** 次のフレームで描く。何回呼んでも 1 回にまとめる。 */
+    requestRender() {
+        if (this.frame !== undefined || this.disposed)
+            return;
+        this.frame = this.env.requestFrame(() => {
+            this.frame = undefined;
+            this.render();
+        });
+    }
+    /** 画面に何か起きた（書き込みなど）。カーソルの点滅を最初に戻して描く。 */
+    touch() {
+        this.blinkOn = true;
+        if (this.blinkTimer !== undefined)
+            this.restartBlink();
+        this.requestRender();
+    }
+    restartBlink() {
+        this.stopBlink();
+        this.blinkTimer = setInterval(() => {
+            this.blinkOn = !this.blinkOn;
+            this.requestRender();
+        }, BLINK_MS);
+    }
+    stopBlink() {
+        if (this.blinkTimer !== undefined)
+            clearInterval(this.blinkTimer);
+        this.blinkTimer = undefined;
+    }
+    updateBlink() {
+        const { cursor, isFocused: focused } = this.source;
+        // 追加のカーソルは、主のカーソルが見えなくても、同じ点滅に従う
+        const want = cursor.blinking && (cursor.visible || this.extra.size > 0) && focused;
+        if (want && this.blinkTimer === undefined)
+            this.restartBlink();
+        if (!want && this.blinkTimer !== undefined) {
+            this.stopBlink();
+            this.blinkOn = true;
+        }
+    }
+    /** いま描く。通常は `requestRender` で足りる。 */
+    render() {
+        if (this.disposed)
+            return;
+        const src = this.source;
+        const dirty = src.takeDirtyRows();
+        const offset = src.viewportOffset;
+        this.collectExtraCursors(offset);
+        this.updateBlink();
+        const cursor = src.cursor;
+        const showCursor = this.cursorShown(offset);
+        const rows = new Set();
+        let full = this.needsFull || offset !== this.lastOffset;
+        // 画像の置き場所や中身が変わったら、全部を描き直す
+        this.animating = false;
+        if (this.collectImages(offset))
+            full = true;
+        // 過去の行を見ているときは、書き込みでずれる行を全部描き直す
+        if (offset > 0 && dirty.length > 0)
+            full = true;
+        if (!full) {
+            for (const y of dirty)
+                rows.add(y);
+            for (const y of this.extraRows)
+                rows.add(y);
+            if (this.lastCursor)
+                rows.add(this.lastCursor.y);
+            if (showCursor || this.lastCursor)
+                rows.add(cursor.y);
+            // 追加のカーソルは、点滅と主の形に従うので、いる行を毎回描く
+            for (const y of this.extra.keys())
+                rows.add(y);
+            for (const y of this.lastExtraRows)
+                rows.add(y);
+        }
+        this.extraRows.clear();
+        this.needsFull = false;
+        this.lastOffset = offset;
+        this.lastCursor = showCursor ? { x: cursor.x, y: cursor.y } : undefined;
+        this.lastExtraRows = new Set(this.extra.keys());
+        if (full) {
+            for (let y = 0; y < src.rows; y++)
+                this.drawRow(y, offset);
+        }
+        else {
+            for (const y of [...rows].sort((a, b) => a - b)) {
+                if (y < src.rows)
+                    this.drawRow(y, offset);
+            }
+        }
+        // アニメーションを回している間は、止まるまで毎フレーム時刻を確かめる
+        if (this.animating)
+            this.requestRender();
+    }
+    /**
+     * 見えている画像の配置を集めて層に分ける。前のフレームから変わったら `true`。
+     * 読み解きが終わっていない画像は、終わるまで描かない（終わったら描き直す）。
+     */
+    collectImages(offset) {
+        const src = this.source;
+        const flat = src.readPlacements?.();
+        const layers = { under: [], below: [], above: [] };
+        let key = "";
+        if (flat && flat.length > 0) {
+            const cache = (this.imageCache ??= new ImageCache(src, this.env.imageDecoder ?? browserImageDecoder, () => this.invalidate()));
+            cache.sync();
+            const placed = parsePlacements(flat)
+                .filter((p) => p.row + offset < src.rows && p.row + offset + p.rows > 0)
+                .sort((a, b) => a.z - b.z || a.imageId - b.imageId);
+            const ticked = new Set();
+            const now = (this.env.now ?? (() => performance.now()))();
+            for (const p of placed) {
+                if (!ticked.has(p.imageId)) {
+                    ticked.add(p.imageId);
+                    if (cache.tick(p.imageId, now))
+                        this.animating = true;
+                }
+                const image = cache.get(p.imageId);
+                if (!image)
+                    continue;
+                const layer = p.z < Z_UNDER_BACKGROUND ? layers.under : p.z < 0 ? layers.below : layers.above;
+                layer.push({ p, image });
+                key += `${p.imageId}:${p.row}:${p.col}:${p.srcX}:${p.srcY}:${p.srcW}:${p.srcH}:${p.offsetX}:${p.offsetY}:${p.cols}:${p.rows}:${p.z}:${p.native}:${p.destW}:${p.destH}@${cache.version(p.imageId)};`;
+            }
+        }
+        else {
+            this.imageCache?.sync();
+        }
+        this.layers = layers;
+        const changed = key !== this.lastImageKey;
+        this.lastImageKey = key;
+        return changed;
+    }
+    /** 行 `y` にかかる画像を、`top` から始まる 1 行ぶんだけ描く。 */
+    drawImages(list, y, offset) {
+        if (list.length === 0)
+            return;
+        const ctx = this.ctx;
+        const top = y * this.cellH;
+        const bottom = top + this.cellH;
+        const limit = this.source.cols * this.cellW;
+        ctx.globalAlpha = 1;
+        for (const { p, image } of list) {
+            const srcX = p.srcX;
+            const srcY = p.srcY;
+            const srcW = p.srcW > 0 ? p.srcW : image.width - srcX;
+            const srcH = p.srcH > 0 ? p.srcH : image.height - srcY;
+            if (srcW <= 0 || srcH <= 0)
+                continue;
+            // 隣の行と継ぎ目が出ないよう、置く場所は整数のデバイスピクセルにする
+            const dx = Math.round(p.col * this.cellW + p.offsetX);
+            const dy = Math.round((p.row + offset) * this.cellH + p.offsetY);
+            const dw = Math.round(p.destW > 0 ? p.destW : p.native ? srcW : p.cols * this.cellW);
+            const dh = Math.round(p.destH > 0 ? p.destH : p.native ? srcH : p.rows * this.cellH);
+            if (dw <= 0 || dh <= 0)
+                continue;
+            const x0 = Math.max(dx, 0);
+            const x1 = Math.min(dx + dw, limit);
+            const y0 = Math.max(dy, top);
+            const y1 = Math.min(dy + dh, bottom);
+            if (x1 <= x0 || y1 <= y0)
+                continue;
+            ctx.drawImage(image, srcX + ((x0 - dx) * srcW) / dw, srcY + ((y0 - dy) * srcH) / dh, ((x1 - x0) * srcW) / dw, ((y1 - y0) * srcH) / dh, x0, y0, x1 - x0, y1 - y0);
+        }
+    }
+    /** 追加のカーソルを、いま見える行ごとに集める。さかのぼって見ているときは出さない。 */
+    collectExtraCursors(offset) {
+        const src = this.source;
+        this.extra.clear();
+        this.extraColors = src.readExtraCursorColors?.() ?? [0, 0];
+        const flat = offset === 0 ? src.readExtraCursors?.() : undefined;
+        if (!flat)
+            return;
+        for (let i = 0; i + 2 < flat.length; i += 3) {
+            const x = flat[i];
+            const y = flat[i + 1];
+            if (x >= src.cols || y >= src.rows)
+                continue;
+            const list = this.extra.get(y);
+            if (list)
+                list.push({ x, shape: flat[i + 2] });
+            else
+                this.extra.set(y, [{ x, shape: flat[i + 2] }]);
+        }
+    }
+    cursorShown(offset) {
+        const c = this.source.cursor;
+        return c.visible && offset === 0;
+    }
+    drawRow(y, offset) {
+        const ctx = this.ctx;
+        const { palette } = this.options;
+        const src = this.source;
+        const row = src.readViewportRow(y);
+        const cellW = this.cellW;
+        const cellH = this.cellH;
+        const top = y * cellH;
+        const cols = src.cols;
+        const cursor = src.cursor;
+        const cursorOn = offset === 0 && cursor.visible && cursor.y === y && cursor.x < cols;
+        const blinkVisible = !cursor.blinking || !src.isFocused || this.blinkOn;
+        // フォーカスが無いときは、点滅せず中抜きのブロックにする
+        const solidBlock = cursorOn && cursor.shape === "block" && src.isFocused && blinkVisible;
+        // 追加のカーソル。主のカーソルの点滅に従う（主が見えなくても出る）
+        const extras = blinkVisible ? this.extra.get(y) : undefined;
+        const solidExtra = new Set();
+        if (extras && src.isFocused) {
+            for (const e of extras) {
+                if (this.extraShape(e.shape) === "block")
+                    solidExtra.add(e.x);
+            }
+        }
+        ctx.globalAlpha = 1;
+        ctx.fillStyle = palette.background;
+        ctx.fillRect(0, top, cols * cellW, cellH);
+        // 下から順に: 背景色の下の画像、背景色、字の下の画像、選択範囲、字、字の上の画像
+        this.drawImages(this.layers.under, y, offset);
+        const n = Math.min(row.length, cols);
+        const colors = this.resolveRowColors(row.cells, n, solidBlock ? cursor.x : -1, solidExtra);
+        this.fillBackgroundRuns(row.cells, colors, n, top);
+        this.drawImages(this.layers.below, y, offset);
+        this.fillSelection(y, top);
+        this.drawGlyphsAndLines(row, colors, n, top);
+        ctx.globalAlpha = 1;
+        this.drawImages(this.layers.above, y, offset);
+        if (cursorOn && blinkVisible)
+            this.drawCursorShape(cursor, row.cells, top);
+        if (extras) {
+            for (const e of extras) {
+                if (e.x >= cols || solidExtra.has(e.x))
+                    continue;
+                this.drawExtraCursorShape(e, row.cells, colors, top);
+            }
+        }
+    }
+    /** 追加のカーソルの形（主のカーソルに従うものは、いまの主の形にする）。 */
+    extraShape(shape) {
+        return (["block", "underline", "bar"][shape] ??
+            this.source.cursor.shape);
+    }
+    /** 追加のカーソルのブロックの、字の色と背景色。`fg`・`bg` はそのセルの色。 */
+    extraBlockColors(fg, bg) {
+        const { palette } = this.options;
+        const textWord = this.extraColors[0];
+        const cursorWord = this.extraColors[1];
+        const cursorKind = cursorWord >>> 24;
+        const textKind = textWord >>> 24;
+        // カーソルの色が反転のときは、字の色の指定を使わない
+        if (cursorKind === 3)
+            return [bg, fg];
+        const cursorBg = cursorKind === 0 ? palette.cursor : palette.resolve(cursorWord, true);
+        let text = palette.cursorText;
+        if (textKind === 3)
+            text = bg;
+        else if (textKind !== 0)
+            text = palette.resolve(textWord, false);
+        return [text, cursorBg];
+    }
+    /** 追加のカーソルのうち、ブロックで塗らないもの（中抜き・下線・縦棒）を描く。 */
+    drawExtraCursorShape(e, cells, colors, top) {
+        const ctx = this.ctx;
+        const { palette } = this.options;
+        const word = this.extraColors[1];
+        const kind = word >>> 24;
+        const color = kind === 0
+            ? palette.cursor
+            : kind === 3
+                ? (colors[e.x]?.fg ?? palette.cursor)
+                : palette.resolve(word, true);
+        const width = Math.max(1, cells[e.x * CELL_STRIDE + 1] || 1);
+        const left = e.x * this.cellW;
+        const w = width * this.cellW;
+        const t = this.lineThickness();
+        const shape = this.extraShape(e.shape);
+        ctx.fillStyle = color;
+        ctx.strokeStyle = color;
+        if (!this.source.isFocused) {
+            // 中抜きのブロック
+            ctx.lineWidth = t;
+            ctx.strokeRect(left + t / 2, top + t / 2, w - t, this.cellH - t);
+        }
+        else if (shape === "underline") {
+            ctx.fillRect(left, top + this.cellH - t, w, t);
+        }
+        else if (shape === "bar") {
+            ctx.fillRect(left, top, t, this.cellH);
+        }
+    }
+    /**
+     * 行のセルごとの前景色・背景色・属性を決める（反転を適用し、太字なら明るい色にする）。
+     * `blockX` 列は、ブロックカーソルの色にする（なければ -1）。`extraBlocks` の列は、
+     * 追加のカーソルのブロックの色にする。
+     */
+    resolveRowColors(cells, n, blockX, extraBlocks = new Set()) {
+        const { palette } = this.options;
+        const colors = new Array(n);
+        for (let x = 0; x < n; x++) {
+            const o = x * CELL_STRIDE;
+            const flags = cells[o + 4];
+            let fg = palette.resolve(cells[o + 2], false, (flags & 1) !== 0);
+            let bg = palette.resolve(cells[o + 3], true);
+            if (flags & 16)
+                [fg, bg] = [bg, fg];
+            if (x === blockX) {
+                bg = palette.cursor;
+                fg = palette.cursorText;
+            }
+            else if (extraBlocks.has(x)) {
+                [fg, bg] = this.extraBlockColors(fg, bg);
+            }
+            colors[x] = { fg, bg, flags };
+        }
+        return colors;
+    }
+    /** 背景を塗る。同じ色が続くところは 1 回で塗る。 */
+    fillBackgroundRuns(cells, colors, n, top) {
+        const ctx = this.ctx;
+        const defaultBg = this.options.palette.background;
+        let runStart = 0;
+        let runColor;
+        const flush = (end) => {
+            if (runColor !== undefined && runColor !== defaultBg) {
+                ctx.fillStyle = runColor;
+                ctx.fillRect(runStart * this.cellW, top, (end - runStart) * this.cellW, this.cellH);
+            }
+        };
+        for (let x = 0; x < n; x++) {
+            // 全角の右半分（幅 0）は、左半分と一緒に塗る
+            if (cells[x * CELL_STRIDE + 1] === 0)
+                continue;
+            const bg = colors[x].bg;
+            if (bg !== runColor) {
+                flush(x);
+                runColor = bg;
+                runStart = x;
+            }
+        }
+        flush(n);
+    }
+    /** 選択範囲を、背景の上に半透明で重ねる。字はこの上に描く。 */
+    fillSelection(y, top) {
+        const span = this.source.selectionSpan?.(y);
+        if (!span)
+            return;
+        const [c0, c1] = span;
+        const end = Math.min(c1, this.source.cols);
+        if (end <= c0)
+            return;
+        const ctx = this.ctx;
+        ctx.fillStyle = this.options.palette.selection;
+        ctx.fillRect(c0 * this.cellW, top, (end - c0) * this.cellW, this.cellH);
+    }
+    /** 字と、下線・取り消し線を描く。 */
+    drawGlyphsAndLines(row, colors, n, top) {
+        const ctx = this.ctx;
+        const cells = row.cells;
+        let lastFont = "";
+        for (let x = 0; x < n; x++) {
+            const o = x * CELL_STRIDE;
+            const width = cells[o + 1];
+            if (width === 0)
+                continue;
+            const { fg, flags } = colors[x];
+            if (flags & 32)
+                continue; // 不可視
+            const mark = cells[o + 6];
+            // 複数のセルにまたがる字は、この行にかかる四角の一番左のセルで、四角ごと描く
+            if ((mark & 0xffff) !== 0 && ((mark >>> 16) & 0xff) === 0) {
+                ctx.globalAlpha = flags & 2 ? 0.5 : 1;
+                this.drawSized(row.sized((mark & 0xffff) - 1), mark >>> 24, x, top, fg);
+            }
+            const cp = cells[o];
+            const ul = (flags >>> 8) & 7;
+            const strike = (flags & 64) !== 0;
+            const hasText = cp !== 0 && cp !== 0x20;
+            if (!hasText && ul === 0 && !strike)
+                continue;
+            const left = x * this.cellW;
+            ctx.globalAlpha = flags & 2 ? 0.5 : 1;
+            if (hasText) {
+                const font = this.font((flags & 1) !== 0, (flags & 4) !== 0);
+                if (font !== lastFont) {
+                    ctx.font = font;
+                    lastFont = font;
+                }
+                ctx.fillStyle = fg;
+                const text = cp & CLUSTER_FLAG
+                    ? row.cluster(cp & ~CLUSTER_FLAG)
+                    : String.fromCodePoint(cp);
+                // Unicode placeholder の字は描かない（画像が代わりに描かれる）
+                if (text.codePointAt(0) !== 0x10eeee) {
+                    ctx.fillText(text, left, top + this.baseline);
+                }
+            }
+            const spanW = width * this.cellW;
+            if (ul !== 0) {
+                const word = cells[o + 5];
+                const color = word >>> 24 === 0 ? fg : this.options.palette.resolve(word, false);
+                this.drawUnderline(ul, color, left, top, spanW);
+            }
+            if (strike) {
+                ctx.fillStyle = fg;
+                ctx.fillRect(left, top + this.baseline - Math.round(this.baseline * 0.35), spanW, this.lineThickness());
+            }
+        }
+    }
+    /**
+     * 複数のセルにまたがる字（OSC 66）を描く。`dy` は、いまの行が四角の上から何行目か。
+     * 描くのは四角のうち、いまの行にかかる横長の帯だけ（行ごとに描き直すため）。
+     * 分数の大きさのときだけ、`v`・`h` の寄せ方で四角の中に置く。
+     */
+    drawSized(info, dy, x, top, fill) {
+        const frac = info.denominator > info.numerator ? info.numerator / info.denominator : 1;
+        const k = info.scale * frac;
+        if (k <= 0)
+            return;
+        const ctx = this.ctx;
+        const left = x * this.cellW;
+        const blockW = info.cols * this.cellW;
+        const blockH = info.scale * this.cellH;
+        const blockTop = top - dy * this.cellH;
+        ctx.save();
+        ctx.beginPath();
+        ctx.rect(left, top, blockW, this.cellH);
+        ctx.clip();
+        ctx.font = this.font(false, false, k);
+        ctx.fillStyle = fill;
+        const align = (a, space, size) => a === 1 ? space - size : a === 2 ? (space - size) / 2 : 0;
+        const textW = ctx.measureText(info.text).width;
+        const x0 = left + (frac < 1 ? align(info.horizontal, blockW, textW) : 0);
+        const y0 = blockTop + (frac < 1 ? align(info.vertical, blockH, this.cellH * k) : 0);
+        ctx.fillText(info.text, x0, y0 + this.baseline * k);
+        ctx.restore();
+    }
+    lineThickness() {
+        return Math.max(1, Math.round(this.dpr));
+    }
+    drawUnderline(style, color, left, top, width) {
+        const ctx = this.ctx;
+        const t = this.lineThickness();
+        ctx.fillStyle = color;
+        const bottom = top + this.cellH;
+        // ベースラインの少し下。セルに収まるようにする
+        const y = Math.min(bottom - t, top + this.baseline + Math.max(1, Math.round(this.descent / 3)));
+        switch (style) {
+            case 1:
+                ctx.fillRect(left, y, width, t);
+                break;
+            case 2: {
+                const y1 = Math.max(top, y - t - 1);
+                ctx.fillRect(left, y1, width, t);
+                ctx.fillRect(left, Math.min(bottom - t, y1 + t + 1), width, t);
+                break;
+            }
+            case 3: {
+                // 波線: 1 セルで 1 周期
+                ctx.strokeStyle = color;
+                ctx.lineWidth = t;
+                const amp = Math.max(1, Math.min(this.descent / 2, (bottom - y) / 2));
+                const mid = Math.min(bottom - t - amp, y);
+                ctx.beginPath();
+                const step = Math.max(2, width / 8);
+                for (let px = 0; px <= width; px += step) {
+                    const py = mid + amp * Math.sin((px / this.cellW) * Math.PI * 2);
+                    if (px === 0)
+                        ctx.moveTo(left + px, py);
+                    else
+                        ctx.lineTo(left + px, py);
+                }
+                ctx.stroke();
+                break;
+            }
+            case 4: {
+                // 点線
+                const dot = t;
+                for (let px = 0; px < width; px += dot * 2) {
+                    ctx.fillRect(left + px, y, Math.min(dot, width - px), t);
+                }
+                break;
+            }
+            case 5: {
+                // 破線
+                const dash = Math.max(2, Math.round(this.cellW / 2));
+                for (let px = 0; px < width; px += dash * 2) {
+                    ctx.fillRect(left + px, y, Math.min(dash, width - px), t);
+                }
+                break;
+            }
+            default:
+                ctx.fillRect(left, y, width, t);
+        }
+    }
+    /** ブロックで塗る場合は字ごと `drawRow` が塗るので、ここは中抜きと下線・縦棒。 */
+    drawCursorShape(cursor, cells, top) {
+        const ctx = this.ctx;
+        const focused = this.source.isFocused;
+        const color = this.options.palette.cursor;
+        const x = cursor.x;
+        const width = Math.max(1, cells[x * CELL_STRIDE + 1] || 1);
+        const left = x * this.cellW;
+        const w = width * this.cellW;
+        const t = this.lineThickness();
+        ctx.fillStyle = color;
+        ctx.strokeStyle = color;
+        if (!focused) {
+            // 中抜きのブロック
+            ctx.lineWidth = t;
+            ctx.strokeRect(left + t / 2, top + t / 2, w - t, this.cellH - t);
+        }
+        else if (cursor.shape === "underline") {
+            ctx.fillRect(left, top + this.cellH - t, w, t);
+        }
+        else if (cursor.shape === "bar") {
+            ctx.fillRect(left, top, t, this.cellH);
+        }
+        // フォーカスがあるブロックは drawRow で塗り済み
+    }
+    /** 後始末。 */
+    dispose() {
+        this.disposed = true;
+        this.stopBlink();
+        if (this.frame !== undefined)
+            this.env.cancelFrame(this.frame);
+        this.frame = undefined;
+        this.cellSizeListeners.clear();
+        this.imageCache?.dispose();
+        this.imageCache = undefined;
+    }
+}
+/** スクロールバー。DOM で作る。見た目は xterm.js 6.0.0（VS Code のスクロールバー）に近づける。 */
+export class Scrollbar {
+    api;
+    track;
+    slider;
+    cleanups = [];
+    dragging = false;
+    /** いまのドラッグを終える関数。 */
+    endDrag;
+    constructor(host, api) {
+        this.api = api;
+        const doc = host.ownerDocument;
+        this.track = doc.createElement("div");
+        this.track.className = "coneko-term-scrollbar";
+        Object.assign(this.track.style, {
+            position: "absolute",
+            top: "0",
+            right: "0",
+            width: `${SCROLLBAR_WIDTH}px`,
+            display: "none",
+            userSelect: "none",
+        });
+        this.slider = doc.createElement("div");
+        this.slider.className = "coneko-term-scrollbar-slider";
+        Object.assign(this.slider.style, {
+            position: "absolute",
+            left: "0",
+            width: "100%",
+            background: "rgba(121, 121, 121, 0.4)",
+        });
+        this.track.appendChild(this.slider);
+        host.appendChild(this.track);
+        this.bind();
+    }
+    bind() {
+        const slider = this.slider;
+        const track = this.track;
+        const setBg = (v) => (slider.style.background = v);
+        const onEnter = () => !this.dragging && setBg("rgba(100, 100, 100, 0.7)");
+        const onLeave = () => !this.dragging && setBg("rgba(121, 121, 121, 0.4)");
+        slider.addEventListener("pointerenter", onEnter);
+        slider.addEventListener("pointerleave", onLeave);
+        const onDown = (e) => {
+            if (e.button !== 0)
+                return;
+            e.preventDefault();
+            if (e.target === slider) {
+                this.startDrag(e);
+            }
+            else {
+                // トラックを押したら、その向きに 1 画面ぶん動く
+                const rect = slider.getBoundingClientRect();
+                this.api.scrollLines(e.clientY < rect.top ? -this.api.rows() : this.api.rows());
+            }
+        };
+        track.addEventListener("pointerdown", onDown);
+        this.cleanups.push(() => {
+            slider.removeEventListener("pointerenter", onEnter);
+            slider.removeEventListener("pointerleave", onLeave);
+            track.removeEventListener("pointerdown", onDown);
+        });
+    }
+    startDrag(e) {
+        const slider = this.slider;
+        this.dragging = true;
+        slider.style.background = "rgba(121, 121, 121, 0.6)";
+        const startY = e.clientY;
+        const startLine = this.api.viewportY();
+        const trackH = this.track.clientHeight;
+        const sliderH = slider.offsetHeight;
+        const maxLine = this.api.total() - this.api.rows();
+        const range = Math.max(1, trackH - sliderH);
+        const doc = this.track.ownerDocument;
+        const move = (ev) => {
+            const dy = ev.clientY - startY;
+            this.api.scrollToLine(Math.round(startLine + (dy / range) * maxLine));
+        };
+        const up = () => {
+            this.endDrag = undefined;
+            this.dragging = false;
+            slider.style.background = "rgba(121, 121, 121, 0.4)";
+            doc.removeEventListener("pointermove", move);
+            doc.removeEventListener("pointerup", up);
+            doc.removeEventListener("pointercancel", up);
+        };
+        doc.addEventListener("pointermove", move);
+        doc.addEventListener("pointerup", up);
+        doc.addEventListener("pointercancel", up);
+        this.endDrag = up;
+    }
+    /** 高さ（CSS ピクセル）と中身に合わせて、つまみの位置と大きさを決める。 */
+    update(heightPx, enabled) {
+        const total = this.api.total();
+        const rows = this.api.rows();
+        const scrollable = total - rows;
+        if (!enabled || scrollable <= 0 || heightPx <= 0) {
+            this.track.style.display = "none";
+            return;
+        }
+        this.track.style.display = "block";
+        this.track.style.height = `${heightPx}px`;
+        const sliderH = Math.min(heightPx, Math.max(20, Math.round((heightPx * rows) / total)));
+        const pos = Math.round(((heightPx - sliderH) * this.api.viewportY()) / scrollable);
+        this.slider.style.height = `${sliderH}px`;
+        this.slider.style.top = `${pos}px`;
+    }
+    /** 後始末。DOM から外し、ドラッグ中なら終える。 */
+    dispose() {
+        this.endDrag?.();
+        for (const c of this.cleanups)
+            c();
+        this.cleanups.length = 0;
+        this.track.remove();
+    }
+}