{#
  Shared CP437/ANSI grid editor widget -- CSS, canvas/tools panel, and the
  full pencil/line/rect/fill/text/select/copy-paste/undo-redo JS engine.
  Extracted from the original single-file ansi_editor/edit.html (the
  admin art-library editor) so a second, non-admin caller (postcards) can
  reuse the exact same editing engine instead of a second copy of it
  quietly drifting out of sync.

  Included with the calling template's own Jinja context (Jinja's default
  include behavior), so the caller must set, before including this file:
    grid_json   -- JSON string, {width, height, cells:[{c,fg,bg}, ...]}
    save_url    -- POST target; body is {grid: {width,height,cells}},
                    expected JSON response {ok: true} or {ok:false,error}
    preview_url -- GET target opened in a new tab by the Preview button

  Renders its own action bar (Save/Undo/Redo/Clear/Preview + cursor
  position), the canvas + tools panel, and the JS. The caller adds any
  extra buttons/panels of its own (e.g. admin's Duplicate/Apply-to-Menu,
  or postcards' Publish/shareable-link) around this include.
#}
<style>
<style>
.ansi-editor { display:grid; grid-template-columns:1fr 280px; gap:8px; }
@media (max-width:1100px) { .ansi-editor { grid-template-columns:1fr; } }

.ansi-grid-wrap { background:#000; padding:6px; overflow:auto; border:1px solid #333; }
.ansi-grid {
    position: relative;        /* containing block for #refImage below */
    display: grid;
    gap: 0;
    width: max-content;        /* shrink-wrap to columns × cell width */
    user-select: none;
    cursor: crosshair;
    font-family: 'Courier New', 'DejaVu Sans Mono', monospace;
}
.ansi-grid .cell {
    position: relative;        /* explicit stacking above #refImage, not DOM-order-dependent */
    z-index: 1;
    width: var(--cell-w, 10px);
    height: var(--cell-h, 18px);
    box-sizing: border-box;
    text-align: center;
    line-height: var(--cell-h, 18px);
    font-size: var(--cell-font, 14px);
    overflow: hidden;
    padding: 0;
    margin: 0;
    opacity: 1;
}
/* Reference-image trace mode (Part C): dims every cell uniformly so the
   image positioned behind the grid (#refImage, z-index:0) shows through
   -- same "lower this layer's opacity to see the one below" idea any
   paint program's reference-layer feature already uses, applied here
   via a single CSS custom property rather than per-cell JS, matching
   how zoom already drives --cell-w/--cell-h the same way. */
.ansi-grid.tracing .cell { opacity: var(--trace-opacity, 0.5); }
#refImage {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;   /* stretch-fit, matching Part B's own import -- see its own comment for why that's the correct (not simplified) choice here */
    pointer-events: none;
    z-index: 0;
    display: none;
}
.ansi-grid .cell.cur {
    outline: 1px solid #ff0;
    outline-offset: -1px;
    z-index: 1;
}
.ansi-grid .cell.sel {
    box-shadow: inset 0 0 0 1px #0ff;
}

.ansi-tools { background:var(--theme-bg-dark, #111); padding:8px; border:1px solid #333; }
.ansi-tools h6 { color:var(--theme-primary,#0f0); font-size:0.85rem; margin:6px 0 4px; }

.swatches { display:grid; grid-template-columns:repeat(8, 1fr); gap:2px; }
.swatch { width:100%; height:22px; cursor:pointer; border:1px solid #333; box-sizing:border-box; }
.swatch.active { outline:2px solid #ff0; outline-offset:-1px; }

.charset { display:grid; grid-template-columns:repeat(16, 1fr); gap:1px; max-height:200px; overflow-y:auto;
           background:#000; padding:2px; }
.charset .ch {
    text-align: center; cursor: pointer;
    color:#ccc; background:#000;
    font-family: 'Courier New', monospace;
    font-size: 14px; line-height: 18px;
    width: 18px; height: 18px;
}
.charset .ch:hover, .charset .ch.active { background:#333; color:#fff; }

.tool-btn { width:36px; height:36px; margin:2px; }
.tool-btn.active { background:#ff0; color:#000; }
</style>
</style>

<div class="mb-2 d-flex flex-wrap gap-1 align-items-center">
    <button id="btnSave" class="btn btn-primary btn-sm"><i class="bi bi-save"></i> Save</button>
    <button id="btnUndo" class="btn btn-outline-light btn-sm" title="Undo (Ctrl+Z)"><i class="bi bi-arrow-counterclockwise"></i></button>
    <button id="btnRedo" class="btn btn-outline-light btn-sm" title="Redo (Ctrl+Shift+Z)"><i class="bi bi-arrow-clockwise"></i></button>
    <button id="btnClear" class="btn btn-outline-warning btn-sm" title="Clear canvas"><i class="bi bi-trash"></i> Clear</button>
    <button id="btnImportImage" class="btn btn-outline-light btn-sm" title="Convert a .jpg/.png/.gif into CP437 art, filling the whole canvas"><i class="bi bi-image"></i> Import Image</button>
    <input type="file" id="importImageInput" accept="image/*" style="display:none;">
    <button id="btnPreview" class="btn btn-outline-info btn-sm" title="Preview as terminal would render"><i class="bi bi-eye"></i> Preview</button>
    <span id="saveStatus" class="text-muted small">unsaved</span>
    <span class="ms-3 text-muted small" id="cursorPos">row 0 col 0</span>
</div>

<div class="ansi-editor">
    <div class="ansi-grid-wrap">
        <div id="grid" class="ansi-grid"></div>
    </div>
    <div class="ansi-tools">
        <h6>TOOLS</h6>
        <button class="btn btn-sm btn-outline-light tool-btn active" data-tool="pencil" title="Pencil"><i class="bi bi-pencil"></i></button>
        <button class="btn btn-sm btn-outline-light tool-btn" data-tool="eraser" title="Eraser"><i class="bi bi-eraser"></i></button>
        <button class="btn btn-sm btn-outline-light tool-btn" data-tool="line" title="Line"><i class="bi bi-slash-lg"></i></button>
        <button class="btn btn-sm btn-outline-light tool-btn" data-tool="rect" title="Rectangle"><i class="bi bi-square"></i></button>
        <button class="btn btn-sm btn-outline-light tool-btn" data-tool="ellipse" title="Ellipse"><i class="bi bi-circle"></i></button>
        <button class="btn btn-sm btn-outline-light tool-btn" data-tool="fill" title="Fill"><i class="bi bi-paint-bucket"></i></button>
        <button class="btn btn-sm btn-outline-light tool-btn" data-tool="shade" title="Shading brush -- drag to build up density (blank -> &#9617; -> &#9618; -> &#9619; -> &#9608;)"><i class="bi bi-brush"></i></button>
        <button class="btn btn-sm btn-outline-light tool-btn" data-tool="colorize" title="Colorize -- recolor a cell without changing its character"><i class="bi bi-palette"></i></button>
        <button class="btn btn-sm btn-outline-light tool-btn" data-tool="text" title="Text typing"><i class="bi bi-fonts"></i></button>
        <button class="btn btn-sm btn-outline-light tool-btn" data-tool="select" title="Select rectangle"><i class="bi bi-bounding-box"></i></button>
        <button class="btn btn-sm btn-outline-light tool-btn" id="btnCopy" title="Copy selection (Ctrl+C)"><i class="bi bi-clipboard"></i></button>
        <button class="btn btn-sm btn-outline-light tool-btn" id="btnPaste" title="Paste (Ctrl+V)"><i class="bi bi-clipboard-check"></i></button>
        <button class="btn btn-sm btn-outline-light tool-btn" id="btnFlipH" title="Flip selection horizontally"><i class="bi bi-symmetry-vertical"></i></button>
        <button class="btn btn-sm btn-outline-light tool-btn" id="btnFlipV" title="Flip selection vertically"><i class="bi bi-symmetry-horizontal"></i></button>
        <button class="btn btn-sm btn-outline-light tool-btn" id="btnSwapColors" title="Swap foreground/background colors in the selection (or whole canvas if nothing selected)"><i class="bi bi-arrow-left-right"></i></button>
        <button class="btn btn-sm btn-outline-light tool-btn" id="btnReplaceColor" title="Replace one foreground color with another, in the selection (or whole canvas if nothing selected)"><i class="bi bi-eyedropper"></i></button>
        <button class="btn btn-sm btn-outline-light tool-btn" id="btnCenter" title="Center the selection's content horizontally on the canvas"><i class="bi bi-distribute-horizontal"></i></button>
        <button class="btn btn-sm btn-outline-light tool-btn" id="btnInsertRow" title="Insert a blank row at the cursor (rows below shift down; the bottom row is dropped)"><i class="bi bi-arrow-bar-down"></i></button>
        <button class="btn btn-sm btn-outline-light tool-btn" id="btnDeleteRow" title="Delete the row at the cursor (rows below shift up)"><i class="bi bi-arrow-bar-up"></i></button>
        <button class="btn btn-sm btn-outline-light tool-btn" id="btnInsertCol" title="Insert a blank column at the cursor (columns to the right shift right; the rightmost column is dropped)"><i class="bi bi-arrow-bar-right"></i></button>
        <button class="btn btn-sm btn-outline-light tool-btn" id="btnDeleteCol" title="Delete the column at the cursor (columns to the right shift left)"><i class="bi bi-arrow-bar-left"></i></button>
        <button class="btn btn-sm btn-outline-light tool-btn" data-tool="eyedrop" title="Eyedropper (click to grab a cell's char + colors)"><i class="bi bi-droplet"></i></button>
        <button class="btn btn-sm btn-outline-light tool-btn" id="btnZoomIn" title="Zoom in"><i class="bi bi-zoom-in"></i></button>
        <button class="btn btn-sm btn-outline-light tool-btn" id="btnZoomOut" title="Zoom out"><i class="bi bi-zoom-out"></i></button>

        <h6 class="mt-3">BRUSH SIZE</h6>
        <div class="d-flex gap-1">
            <button class="btn btn-sm btn-outline-light tool-btn brush-btn active" data-brush="1">1×1</button>
            <button class="btn btn-sm btn-outline-light tool-btn brush-btn" data-brush="2">2×2</button>
            <button class="btn btn-sm btn-outline-light tool-btn brush-btn" data-brush="3">3×3</button>
        </div>

        <h6 class="mt-3">MODES</h6>
        <div class="form-check form-check-sm">
            <input class="form-check-input" type="checkbox" id="mirrorMode">
            <label class="form-check-label small text-light" for="mirrorMode">
                Mirror (left/right)
            </label>
        </div>
        <div class="form-check form-check-sm">
            <input class="form-check-input" type="checkbox" id="halfBlockMode">
            <label class="form-check-label small text-light" for="halfBlockMode"
                   title="Pencil/eraser paint the top or bottom half of a cell independently, doubling vertical resolution">
                Half-block pixels
            </label>
        </div>

        <h6 class="mt-3">FOREGROUND</h6>
        <div class="swatches" id="fgSwatches"></div>
        <h6 class="mt-2">BACKGROUND</h6>
        <div class="swatches" id="bgSwatches" style="grid-template-columns:repeat(8,1fr);"></div>

        <h6 class="mt-3">SELECTED CHAR</h6>
        <div class="d-flex align-items-center gap-2">
            <div id="curCharPreview" style="font-family:monospace;font-size:24px;width:32px;height:32px;background:#000;color:#fff;text-align:center;line-height:32px;border:1px solid #333;">█</div>
            <small class="text-muted">code <span id="curCharCode">219</span></small>
        </div>

        <h6 class="mt-3">THEDRAW FONTS</h6>
        <div id="tdfInstallPanel" class="mb-1" style="display:none;">
            <p class="small text-muted mb-1">No fonts installed yet.</p>
            <button id="btnTdfInstall" class="btn btn-sm btn-outline-light w-100">
                <i class="bi bi-cloud-download"></i> Download &amp; Install Fonts
            </button>
            <div id="tdfInstallStatus" class="small text-muted mt-1"></div>
        </div>
        <div class="mb-1">
            <input type="text" id="tdfSearch" class="form-control form-control-sm"
                   placeholder="Search fonts...">
        </div>
        <div id="tdfFontList" style="max-height:120px;overflow-y:auto;background:#000;border:1px solid #333;font-size:0.8rem;"></div>
        <div class="mt-1">
            <input type="text" id="tdfText" class="form-control form-control-sm"
                   placeholder="Banner text" maxlength="200">
        </div>
        <div id="tdfPreview" style="background:#000;padding:4px;margin-top:4px;overflow-x:auto;white-space:pre;font-family:monospace;line-height:1;min-height:1.2em;"></div>
        <button id="btnTdfInsert" class="btn btn-sm btn-outline-light w-100 mt-1" disabled>
            <i class="bi bi-fonts"></i> Insert at cursor
        </button>

        <h6 class="mt-3">REFERENCE IMAGE</h6>
        <p class="small text-muted mb-1">Trace over a photo/sketch --
            never saved or exported, purely an editing aid.</p>
        <button id="btnRefImageLoad" class="btn btn-sm btn-outline-light w-100">
            <i class="bi bi-image"></i> Load reference image
        </button>
        <input type="file" id="refImageInput" accept="image/*" style="display:none;">
        <div id="refImageControls" style="display:none;">
            <div class="form-check form-check-sm mt-2">
                <input class="form-check-input" type="checkbox" id="refImageShow" checked>
                <label class="form-check-label small text-light" for="refImageShow">Show image</label>
            </div>
            <div class="form-check form-check-sm">
                <input class="form-check-input" type="checkbox" id="refImageDim">
                <label class="form-check-label small text-light" for="refImageDim"
                       title="Lowers the whole grid's opacity so the image shows through what you've already drawn, not just blank cells">
                    Dim canvas while tracing
                </label>
            </div>
            <label class="small text-muted d-block mt-1">Image opacity</label>
            <input type="range" id="refImageOpacity" class="form-range" min="10" max="100" value="60">
            <button id="btnRefImageRemove" class="btn btn-sm btn-outline-warning w-100 mt-1">
                <i class="bi bi-x-circle"></i> Remove image
            </button>
        </div>

        <h6 class="mt-3">CHARACTER PALETTE</h6>
        <div class="charset" id="charset"></div>

        <h6 class="mt-3">QUICK GLYPHS</h6>
        <div>
            <button class="btn btn-sm btn-outline-light tool-btn" data-quickch="█">█</button>
            <button class="btn btn-sm btn-outline-light tool-btn" data-quickch="▓">▓</button>
            <button class="btn btn-sm btn-outline-light tool-btn" data-quickch="▒">▒</button>
            <button class="btn btn-sm btn-outline-light tool-btn" data-quickch="░">░</button>
            <button class="btn btn-sm btn-outline-light tool-btn" data-quickch="▀">▀</button>
            <button class="btn btn-sm btn-outline-light tool-btn" data-quickch="▄">▄</button>
            <button class="btn btn-sm btn-outline-light tool-btn" data-quickch="▌">▌</button>
            <button class="btn btn-sm btn-outline-light tool-btn" data-quickch="▐">▐</button>
        </div>
        <div class="mt-1">
            <button class="btn btn-sm btn-outline-light tool-btn" data-quickch="┌">┌</button>
            <button class="btn btn-sm btn-outline-light tool-btn" data-quickch="┐">┐</button>
            <button class="btn btn-sm btn-outline-light tool-btn" data-quickch="└">└</button>
            <button class="btn btn-sm btn-outline-light tool-btn" data-quickch="┘">┘</button>
            <button class="btn btn-sm btn-outline-light tool-btn" data-quickch="─">─</button>
            <button class="btn btn-sm btn-outline-light tool-btn" data-quickch="│">│</button>
            <button class="btn btn-sm btn-outline-light tool-btn" data-quickch="┼">┼</button>
        </div>
        <div class="mt-1">
            <button class="btn btn-sm btn-outline-light tool-btn" data-quickch="╔">╔</button>
            <button class="btn btn-sm btn-outline-light tool-btn" data-quickch="╗">╗</button>
            <button class="btn btn-sm btn-outline-light tool-btn" data-quickch="╚">╚</button>
            <button class="btn btn-sm btn-outline-light tool-btn" data-quickch="╝">╝</button>
            <button class="btn btn-sm btn-outline-light tool-btn" data-quickch="═">═</button>
            <button class="btn btn-sm btn-outline-light tool-btn" data-quickch="║">║</button>
            <button class="btn btn-sm btn-outline-light tool-btn" data-quickch="╬">╬</button>
        </div>
    </div>
</div>

<script>
(function() {
    {# Security fix (templates audit): grid_json is a json.dumps()'d string
       built server-side from raw client POST data with no per-cell
       validation (web/ansi_editor.py's save(), web/postcards.py's save())
       -- a cell's "c" character field can be an arbitrary-length string, not
       just one char, so a crafted save (a direct POST, not through the JS
       UI) could plant a literal "</script>" in it. Piped through |safe
       here, that closed the real <script> tag early and let injected
       markup execute -- self-XSS on this editor's own reload for
       ansi_editor.py's admin-only art library, but postcards.py reuses this
       exact widget for ANY logged-in user's postcard, and postcards.py's
       _require_owner_or_403() lets an admin open and edit someone else's
       postcard too, so this could execute in a reviewing admin's session.
       |tojson is Flask/Jinja's HTML-safe JSON encoder (escapes <, >, &, '
       so none of that can break out of the script context); from_json
       round-trips the already-serialized string back into a real object
       first so tojson re-encodes it correctly instead of double-encoding
       a string literal. #}
    const initial = {{ grid_json | from_json | tojson }};
    const W = initial.width;
    const H = initial.height;
    let cells = initial.cells.map(c => ({c: c.c || ' ', fg: c.fg|0, bg: c.bg|0}));

    // 16-color CSS palette (mIRC-like)
    const palette = [
        '#ffffff','#000000','#00007f','#009300',
        '#ff0000','#7f0000','#9c009c','#fc7f00',
        '#ffff00','#00fc00','#009393','#00ffff',
        '#0000fc','#ff00ff','#7f7f7f','#d2d2d2'
    ];

    // Editor state
    let curFg = 7;          // light grey
    let curBg = 0;          // black
    let curChar = '█';
    let tool = 'pencil';
    let cursorR = 0, cursorC = 0;
    let dirty = false;
    let mouseDown = false;
    let lineStart = null;     // for line/rect tools
    let selStart = null;      // [r,c] when selection drag begins
    let selRect  = null;      // {r0,c0,r1,c1} after drag completes
    let clipboard = null;     // 2D array of cells
    let brushSize = 1;        // 1×1, 2×2, 3×3

    const grid = document.getElementById('grid');
    const cursorPos = document.getElementById('cursorPos');

    // Flat grid: cells go directly into #grid via CSS Grid.
    // Track them in a flat array for O(1) lookup by index.
    let cellNodes = [];

    function buildGrid() {
        grid.innerHTML = '';
        grid.style.gridTemplateColumns = `repeat(${W}, 10px)`;
        grid.style.gridTemplateRows    = `repeat(${H}, 18px)`;
        cellNodes = new Array(W * H);
        for (let i = 0; i < W * H; i++) {
            const span = document.createElement('span');
            span.className = 'cell';
            const r = Math.floor(i / W);
            const c = i % W;
            span.dataset.r = r;
            span.dataset.c = c;
            grid.appendChild(span);
            cellNodes[i] = span;
        }
        for (let i = 0; i < cells.length; i++) drawCell(i);
        updateCursorMark();
    }

    function drawCell(i) {
        const node = cellNodes[i];
        if (!node) return;
        const c = cells[i];
        node.textContent = c.c;
        node.style.color = palette[c.fg & 0x0F];
        node.style.background = palette[c.bg & 0x07];
    }

    function updateCursorMark() {
        document.querySelectorAll('.cell.cur').forEach(el => el.classList.remove('cur'));
        const idx = cursorR * W + cursorC;
        const node = cellNodes[idx];
        if (node) node.classList.add('cur');
        cursorPos.textContent = `row ${cursorR} col ${cursorC}`;
    }

    function paint(r, c, ch, _isMirrorPass) {
        // Apply across the brush footprint
        const off = Math.floor(brushSize / 2);
        for (let dr = 0; dr < brushSize; dr++) {
            for (let dc = 0; dc < brushSize; dc++) {
                const tr = r + dr - off;
                const tc = c + dc - off;
                if (tr < 0 || tr >= H || tc < 0 || tc >= W) continue;
                const i = tr * W + tc;
                const cell = cells[i];
                const newCh = ch === undefined ? curChar : ch;
                if (cell.c === newCh && cell.fg === curFg && cell.bg === curBg) continue;
                cell.c = newCh; cell.fg = curFg; cell.bg = curBg;
                drawCell(i);
            }
        }
        // Mirror mode: also paint the horizontally-opposite column, one
        // level of recursion only (_isMirrorPass guards against ever
        // mirroring a mirror pass) -- skipped when c is already the
        // center column of an odd width, which would otherwise repaint
        // the exact same cell(s) redundantly.
        if (!_isMirrorPass && document.getElementById('mirrorMode').checked) {
            const mc = W - 1 - c;
            if (mc !== c) paint(r, mc, ch, true);
        }
        dirty = true;
        document.getElementById('saveStatus').textContent = 'unsaved';
    }

    function erase(r, c) {
        if (r < 0 || r >= H || c < 0 || c >= W) return;
        const i = r * W + c;
        cells[i] = {c: ' ', fg: 7, bg: 0};
        drawCell(i);
        dirty = true;
    }

    function drawLine(r0, c0, r1, c1, ch) {
        // Bresenham
        const dx = Math.abs(c1 - c0);
        const dy = Math.abs(r1 - r0);
        const sx = c0 < c1 ? 1 : -1;
        const sy = r0 < r1 ? 1 : -1;
        let err = dx - dy;
        let r = r0, c = c0;
        while (true) {
            paint(r, c, ch);
            if (r === r1 && c === c1) break;
            const e2 = 2 * err;
            if (e2 > -dy) { err -= dy; c += sx; }
            if (e2 < dx)  { err += dx; r += sy; }
        }
    }

    function drawRect(r0, c0, r1, c1) {
        const top = Math.min(r0, r1), bot = Math.max(r0, r1);
        const lft = Math.min(c0, c1), rgt = Math.max(c0, c1);
        for (let c = lft; c <= rgt; c++) {
            paint(top, c); paint(bot, c);
        }
        for (let r = top; r <= bot; r++) {
            paint(r, lft); paint(r, rgt);
        }
    }

    // Pure point sampler for an ellipse bounded by r0/c0..r1/c1 (no DOM,
    // no `cells` access) -- angle-sampled rather than a classic integer
    // midpoint algorithm, which needs separate per-region handling to
    // get right; sampling by angle is simple and correct for any aspect
    // ratio, with a dense-enough step (relative to the larger radius)
    // to avoid gaps around the perimeter. Split out from drawEllipse()
    // below so it's independently testable under plain Node, the same
    // way this file's splitForWire()-style functions already are (see
    // tests/test_mrc_web_multiline_split_parity.py for the established
    // pattern this follows).
    function ellipsePoints(r0, c0, r1, c1) {
        const cx = (c0 + c1) / 2, cy = (r0 + r1) / 2;
        const rx = Math.max(1, Math.abs(c1 - c0) / 2);
        const ry = Math.max(1, Math.abs(r1 - r0) / 2);
        const plotted = new Set();
        const steps = Math.max(16, Math.ceil(2 * Math.PI * Math.max(rx, ry)));
        for (let i = 0; i < steps; i++) {
            const t = (i / steps) * 2 * Math.PI;
            const r = Math.round(cy + ry * Math.sin(t));
            const c = Math.round(cx + rx * Math.cos(t));
            plotted.add(r + ',' + c);
        }
        return plotted;
    }

    function drawEllipse(r0, c0, r1, c1, ch) {
        // Terminal cells aren't square (roughly 10x18 here), but
        // working in row/col space rather than compensating for that
        // keeps this consistent with every other shape tool -- a
        // caller who wants a visually round ellipse just drags a
        // wider-than-tall box, same as ANetDRAW.
        for (const key of ellipsePoints(r0, c0, r1, c1)) {
            const [r, c] = key.split(',').map(Number);
            paint(r, c, ch);
        }
    }

    // Shading brush: each stroke over the same cell advances one step
    // denser (blank -> light -> medium -> dark -> solid), matching
    // ANetDRAW's shading brush. Reads the EXISTING character to decide
    // the next step, so repeated strokes over the same spot build up
    // density rather than just stamping one fixed glyph.
    const SHADE_SEQUENCE = [' ', '░', '▒', '▓', '█'];
    function nextShadeChar(curChar) {
        const idx = SHADE_SEQUENCE.indexOf(curChar);
        return SHADE_SEQUENCE[Math.min(SHADE_SEQUENCE.length - 1, (idx < 0 ? 0 : idx) + 1)];
    }
    function shadeBrush(r, c) {
        if (r < 0 || r >= H || c < 0 || c >= W) return;
        const off = Math.floor(brushSize / 2);
        for (let dr = 0; dr < brushSize; dr++) {
            for (let dc = 0; dc < brushSize; dc++) {
                const tr = r + dr - off, tc = c + dc - off;
                if (tr < 0 || tr >= H || tc < 0 || tc >= W) continue;
                const i = tr * W + tc;
                cells[i] = { c: nextShadeChar(cells[i].c), fg: curFg, bg: curBg };
                drawCell(i);
            }
        }
        dirty = true;
        document.getElementById('saveStatus').textContent = 'unsaved';
    }

    // Colorize: recolors a cell (fg/bg only) without touching its
    // character -- "Colorize, which recolors without redrawing" per
    // ANetDRAW's own feature list.
    function colorizeCell(r, c) {
        if (r < 0 || r >= H || c < 0 || c >= W) return;
        const off = Math.floor(brushSize / 2);
        for (let dr = 0; dr < brushSize; dr++) {
            for (let dc = 0; dc < brushSize; dc++) {
                const tr = r + dr - off, tc = c + dc - off;
                if (tr < 0 || tr >= H || tc < 0 || tc >= W) continue;
                const i = tr * W + tc;
                const cell = cells[i];
                if (cell.fg === curFg && cell.bg === curBg) continue;
                cell.fg = curFg; cell.bg = curBg;
                drawCell(i);
            }
        }
        dirty = true;
        document.getElementById('saveStatus').textContent = 'unsaved';
    }

    // Half-block pixel mode: a cell holds two independently-colored
    // "pixels" (top/bottom) via the upper/lower half-block characters
    // (U+2580/U+2584) and its existing fg/bg pair -- no new per-cell
    // fields needed, this is exactly what those two characters already
    // encode. Always WRITES using U+2580 (upper half block, fg=top
    // color/bg=bottom color) for any two-toned cell, and only emits a
    // solid U+2588 when both halves end up the same color -- but READS
    // U+2584 too (bg=top/fg=bottom), so a cell already using the lower
    // variant (e.g. hand-picked from the character palette, or loaded
    // from existing art) still reports its real colors correctly.
    function halfBlockColors(cell) {
        if (cell.c === '▀') return { top: cell.fg, bottom: cell.bg };   // ▀
        if (cell.c === '▄') return { top: cell.bg, bottom: cell.fg };   // ▄
        if (cell.c === '█') return { top: cell.fg, bottom: cell.fg };   // █
        return { top: cell.bg, bottom: cell.bg };  // anything else: treat as its bg, both halves
    }

    // Pure: given a cell's current state, which half was painted, and
    // the new color, returns the new {c, fg, bg} -- no DOM/`cells`
    // access, split out for the same reason ellipsePoints() is.
    function computeHalfBlockCell(cell, which, color) {
        const cur = halfBlockColors(cell);
        const top = which === 'top' ? color : cur.top;
        const bottom = which === 'bottom' ? color : cur.bottom;
        if (top === bottom) return { c: '█', fg: top, bg: cell.bg };
        return { c: '▀', fg: top, bg: bottom };
    }

    function paintHalfBlock(r, c, which, color) {
        if (r < 0 || r >= H || c < 0 || c >= W) return;
        const i = r * W + c;
        cells[i] = computeHalfBlockCell(cells[i], which, color);
        drawCell(i);
        dirty = true;
        document.getElementById('saveStatus').textContent = 'unsaved';
    }

    function cellHalfAtEvent(e, cellEl) {
        const rect = cellEl.getBoundingClientRect();
        return (e.clientY - rect.top) < rect.height / 2 ? 'top' : 'bottom';
    }

    function clearSelection() {
        selRect = null;
        document.querySelectorAll('.cell.sel').forEach(el => el.classList.remove('sel'));
    }

    function highlightSelection() {
        document.querySelectorAll('.cell.sel').forEach(el => el.classList.remove('sel'));
        if (!selRect) return;
        for (let r = selRect.r0; r <= selRect.r1; r++) {
            for (let c = selRect.c0; c <= selRect.c1; c++) {
                const node = cellNodes[r * W + c];
                if (node) node.classList.add('sel');
            }
        }
    }

    function copySelection() {
        if (!selRect) return;
        const w = selRect.c1 - selRect.c0 + 1;
        const h = selRect.r1 - selRect.r0 + 1;
        const data = [];
        for (let r = 0; r < h; r++) {
            for (let c = 0; c < w; c++) {
                const cell = cells[(selRect.r0 + r) * W + (selRect.c0 + c)];
                data.push({ c: cell.c, fg: cell.fg, bg: cell.bg });
            }
        }
        clipboard = { width: w, height: h, cells: data };
    }

    function pasteAt(rTop, cLeft) {
        if (!clipboard) return;
        pushHistory();
        for (let r = 0; r < clipboard.height; r++) {
            for (let c = 0; c < clipboard.width; c++) {
                const tr = rTop + r, tc = cLeft + c;
                if (tr < 0 || tr >= H || tc < 0 || tc >= W) continue;
                const src = clipboard.cells[r * clipboard.width + c];
                const i = tr * W + tc;
                cells[i] = { c: src.c, fg: src.fg, bg: src.bg };
                drawCell(i);
            }
        }
        dirty = true;
        document.getElementById('saveStatus').textContent = 'unsaved';
    }

    // Pastes a TDF font render ({width,height,cells}, from /fonts/
    // render) at rTop/cLeft -- like pasteAt() above, but a TDF cell can
    // be null (transparent: no glyph reaches that spot), which must
    // leave the existing grid content showing through rather than
    // being overwritten with a blank, matching TheDraw's own behavior.
    function insertTdfResult(rTop, cLeft, result) {
        pushHistory();
        for (let r = 0; r < result.height; r++) {
            for (let c = 0; c < result.width; c++) {
                const src = result.cells[r * result.width + c];
                if (!src) continue;  // transparent
                const tr = rTop + r, tc = cLeft + c;
                if (tr < 0 || tr >= H || tc < 0 || tc >= W) continue;
                const i = tr * W + tc;
                cells[i] = { c: src.c, fg: src.fg, bg: src.bg };
                drawCell(i);
            }
        }
        dirty = true;
        document.getElementById('saveStatus').textContent = 'unsaved';
    }

    // ---- Image -> ANSI import ----
    // Stretch-fits an uploaded .jpg/.png/.gif/etc onto the CURRENT
    // W x H grid (never resizes the grid itself -- this edits an
    // existing, fixed-size piece of art in place, unlike a from-
    // scratch converter) -- 2 source pixel rows per cell row, each
    // cell becoming a half-block (▀, independent top/bottom color) or
    // a solid block (█) when both halves match closely enough.
    // Stretching to exactly W x (H*2) rather than preserving the
    // source image's own aspect ratio is the visually-correct choice
    // here, not a simplification: this editor's own cell geometry
    // (10x18 CSS pixels per cell, halved vertically by half-block
    // mode) already makes each resulting "pixel" roughly square, the
    // same compensation a classic image-to-ANSI converter's own
    // width/height formula exists to provide.
    //
    // Nearest-color matching runs against this editor's own real
    // palette array above (NOT a generic VGA table) -- fg searches
    // all 16 entries (matching the FOREGROUND swatch panel's own full
    // range), bg is restricted to the first 8 (matching the
    // BACKGROUND swatch panel's own 8-swatch range, and the `& 0x07`
    // mask every export format and drawCell() itself already apply --
    // producing bg 8-15 here would just be silently mangled later,
    // so it's never produced in the first place).
    //
    // A scratch <canvas> is used purely as getImageData() scratch
    // space -- created fresh per import, never added to the page.
    const paletteRgb = palette.map(hex => {
        const n = parseInt(hex.slice(1), 16);
        return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
    });

    function nearestPaletteIndex(rgb, maxIndex) {
        let best = 0, bestDist = Infinity;
        for (let i = 0; i <= maxIndex; i++) {
            const p = paletteRgb[i];
            const dr = rgb[0] - p[0], dg = rgb[1] - p[1], db = rgb[2] - p[2];
            const d = dr * dr + dg * dg + db * db;
            if (d < bestDist) { bestDist = d; best = i; }
        }
        return best;
    }

    function importImageFile(file) {
        if (!file) return;
        const url = URL.createObjectURL(file);
        const im = new Image();
        im.onerror = () => {
            URL.revokeObjectURL(url);
            alert('Could not read that image file.');
        };
        im.onload = () => {
            try {
                const scratch = document.createElement('canvas');
                scratch.width = W;
                scratch.height = H * 2;
                const sctx = scratch.getContext('2d', { willReadFrequently: true });
                sctx.imageSmoothingEnabled = true;
                sctx.drawImage(im, 0, 0, W, H * 2);
                const d = sctx.getImageData(0, 0, W, H * 2).data;

                pushHistory();
                for (let r = 0; r < H; r++) {
                    for (let c = 0; c < W; c++) {
                        const ti = ((r * 2) * W + c) * 4;
                        const bi = ((r * 2 + 1) * W + c) * 4;
                        const topIdx = nearestPaletteIndex([d[ti], d[ti + 1], d[ti + 2]], 15);
                        const botIdx = nearestPaletteIndex([d[bi], d[bi + 1], d[bi + 2]], 7);
                        const i = r * W + c;
                        cells[i] = topIdx === botIdx
                            ? { c: '█', fg: topIdx, bg: botIdx }
                            : { c: '▀', fg: topIdx, bg: botIdx };
                        drawCell(i);
                    }
                }
                dirty = true;
                document.getElementById('saveStatus').textContent = 'unsaved';
            } catch (e) {
                alert('Image import failed: ' + e.message);
            } finally {
                URL.revokeObjectURL(url);
            }
        };
        im.src = url;
    }

    document.getElementById('btnImportImage').addEventListener('click', () => {
        if (!confirm('Import an image? This replaces the entire canvas. (Undo will restore it.)')) return;
        document.getElementById('importImageInput').click();
    });
    document.getElementById('importImageInput').addEventListener('change', (e) => {
        const file = e.target.files[0];
        e.target.value = '';
        importImageFile(file);
    });

    // ---- Reference image / trace-over mode ----
    // A real <img>, created here (not in the static HTML) and inserted
    // as #grid's own first child -- buildGrid() (called once, at page
    // init, below) wipes #grid's innerHTML on every call, so anything
    // placed there in markup would be destroyed; creating it in JS
    // AFTER that one-time call sidesteps the problem entirely rather
    // than teaching buildGrid() to preserve a child it doesn't know
    // about. Positioned via #refImage's own CSS (position:absolute,
    // inset:0, 100%/100% -- see the stylesheet above) so it always
    // exactly matches #grid's current on-screen size, including
    // through zoom changes (driven by the same --cell-w/--cell-h
    // custom properties applyZoom() already sets) with no JS
    // recalculation needed here at all.
    //
    // Purely a client-side editing aid: never added to `cells`, never
    // touches grid_json, never part of any export -- removing it (or
    // just never loading one) leaves everything else completely
    // unaffected.
    function initRefImage() {
        const refImg = document.createElement('img');
        refImg.id = 'refImage';
        grid.insertBefore(refImg, grid.firstChild);

        const loadBtn = document.getElementById('btnRefImageLoad');
        const fileInput = document.getElementById('refImageInput');
        const controls = document.getElementById('refImageControls');
        const showChk = document.getElementById('refImageShow');
        const dimChk = document.getElementById('refImageDim');
        const opacitySlider = document.getElementById('refImageOpacity');
        const removeBtn = document.getElementById('btnRefImageRemove');
        let objectUrl = null;

        function applyOpacity() {
            refImg.style.opacity = (opacitySlider.value / 100).toString();
        }
        function applyShow() {
            refImg.style.display = showChk.checked ? 'block' : 'none';
        }
        function applyDim() {
            grid.classList.toggle('tracing', dimChk.checked);
            grid.style.setProperty('--trace-opacity', (opacitySlider.value / 100).toString());
        }

        loadBtn.addEventListener('click', () => fileInput.click());
        fileInput.addEventListener('change', (e) => {
            const file = e.target.files[0];
            e.target.value = '';
            if (!file) return;
            if (objectUrl) URL.revokeObjectURL(objectUrl);
            objectUrl = URL.createObjectURL(file);
            refImg.src = objectUrl;
            controls.style.display = '';
            showChk.checked = true;
            applyShow();
            applyOpacity();
        });
        showChk.addEventListener('change', applyShow);
        dimChk.addEventListener('change', applyDim);
        opacitySlider.addEventListener('input', () => { applyOpacity(); applyDim(); });
        removeBtn.addEventListener('click', () => {
            if (objectUrl) { URL.revokeObjectURL(objectUrl); objectUrl = null; }
            refImg.removeAttribute('src');
            controls.style.display = 'none';
            dimChk.checked = false;
            applyDim();
        });
    }

    function flipSelectionHorizontal() {
        if (!selRect) return;
        pushHistory();
        const w = selRect.c1 - selRect.c0 + 1;
        const h = selRect.r1 - selRect.r0 + 1;
        for (let r = 0; r < h; r++) {
            for (let c = 0; c < Math.floor(w / 2); c++) {
                const a = (selRect.r0 + r) * W + (selRect.c0 + c);
                const b = (selRect.r0 + r) * W + (selRect.c0 + (w - 1 - c));
                const tmp = cells[a]; cells[a] = cells[b]; cells[b] = tmp;
                drawCell(a); drawCell(b);
            }
        }
        dirty = true;
        document.getElementById('saveStatus').textContent = 'unsaved';
    }

    function flipSelectionVertical() {
        if (!selRect) return;
        pushHistory();
        const w = selRect.c1 - selRect.c0 + 1;
        const h = selRect.r1 - selRect.r0 + 1;
        for (let c = 0; c < w; c++) {
            for (let r = 0; r < Math.floor(h / 2); r++) {
                const a = (selRect.r0 + r) * W + (selRect.c0 + c);
                const b = (selRect.r0 + (h - 1 - r)) * W + (selRect.c0 + c);
                const tmp = cells[a]; cells[a] = cells[b]; cells[b] = tmp;
                drawCell(a); drawCell(b);
            }
        }
        dirty = true;
        document.getElementById('saveStatus').textContent = 'unsaved';
    }

    function activeRegion() {
        // Every block op below works on the current selection, or the
        // whole canvas when nothing is selected -- matches how the
        // reference editor's block tools behave with no active
        // selection (operate on everything rather than doing nothing).
        return selRect || { r0: 0, c0: 0, r1: H - 1, c1: W - 1 };
    }

    // Pure: new {c,fg,bg} with fg/bg swapped. bg is masked to 0-7 (this
    // editor's background palette only has 8 entries -- see _BG_CODES
    // in ansi_editor.py) so swapping a bright (8-15) fg into bg can't
    // produce an out-of-range value.
    function swapFgBg(cell) {
        return { c: cell.c, fg: cell.bg & 0x0F, bg: cell.fg & 0x07 };
    }

    function swapColorsInSelection() {
        const region = activeRegion();
        pushHistory();
        for (let r = region.r0; r <= region.r1; r++) {
            for (let c = region.c0; c <= region.c1; c++) {
                const i = r * W + c;
                cells[i] = swapFgBg(cells[i]);
                drawCell(i);
            }
        }
        dirty = true;
        document.getElementById('saveStatus').textContent = 'unsaved';
    }

    // Pure: new {c,fg,bg} with fg recolored from fromFg to toFg,
    // untouched otherwise. Non-matching cells return the SAME object
    // reference (not a copy) so a caller can cheaply skip a redraw.
    function replaceFgColor(cell, fromFg, toFg) {
        if ((cell.fg & 0x0F) !== fromFg) return cell;
        return { c: cell.c, fg: toFg, bg: cell.bg };
    }

    function replaceColorInSelection() {
        const fromStr = prompt('Replace which foreground color? (0-15)', '');
        if (fromStr === null) return;
        const fromFg = parseInt(fromStr, 10);
        if (isNaN(fromFg) || fromFg < 0 || fromFg > 15) {
            alert('Enter a color number from 0 to 15.');
            return;
        }
        const region = activeRegion();
        pushHistory();
        for (let r = region.r0; r <= region.r1; r++) {
            for (let c = region.c0; c <= region.c1; c++) {
                const i = r * W + c;
                const next = replaceFgColor(cells[i], fromFg, curFg);
                if (next !== cells[i]) { cells[i] = next; drawCell(i); }
            }
        }
        dirty = true;
        document.getElementById('saveStatus').textContent = 'unsaved';
    }

    // Pure: given the leftmost/rightmost occupied columns (inclusive)
    // within a region of width regionWidth, and the region's own
    // starting column c0 on the canvas, returns the column shift
    // needed to center that occupied span within the region. Zero
    // width occupied span (nothing but blanks) or an already-centered
    // span both correctly return 0.
    function computeCenterShift(occupiedMinCol, occupiedMaxCol, c0, regionWidth) {
        if (occupiedMaxCol < occupiedMinCol) return 0;  // nothing occupied
        const spanWidth = occupiedMaxCol - occupiedMinCol + 1;
        const wantMinCol = c0 + Math.floor((regionWidth - spanWidth) / 2);
        return wantMinCol - occupiedMinCol;
    }

    function centerSelection() {
        const region = activeRegion();
        const regionWidth = region.c1 - region.c0 + 1;
        let occMin = region.c1 + 1, occMax = region.c0 - 1;
        for (let r = region.r0; r <= region.r1; r++) {
            for (let c = region.c0; c <= region.c1; c++) {
                if (cells[r * W + c].c !== ' ') {
                    if (c < occMin) occMin = c;
                    if (c > occMax) occMax = c;
                }
            }
        }
        const shift = computeCenterShift(occMin, occMax, region.c0, regionWidth);
        if (shift === 0) return;
        pushHistory();
        for (let r = region.r0; r <= region.r1; r++) {
            const rowCopy = [];
            for (let c = region.c0; c <= region.c1; c++) rowCopy.push(cells[r * W + c]);
            for (let c = region.c0; c <= region.c1; c++) {
                const srcCol = c - shift;
                const i = r * W + c;
                cells[i] = (srcCol >= region.c0 && srcCol <= region.c1)
                    ? rowCopy[srcCol - region.c0] : { c: ' ', fg: 7, bg: 0 };
                drawCell(i);
            }
        }
        dirty = true;
        document.getElementById('saveStatus').textContent = 'unsaved';
    }

    // Insert/delete a row or column at the cursor position -- shifts
    // everything past it by one, and either drops (delete) or
    // fabricates (insert) the row/column that falls off the far edge.
    // The canvas itself never resizes; this is a "ripple" operation
    // within the existing W×H, matching how a fixed-size terminal
    // screen's content actually behaves when you push text up or over.
    function insertRowAt(row) {
        pushHistory();
        for (let r = H - 1; r > row; r--) {
            for (let c = 0; c < W; c++) cells[r * W + c] = { ...cells[(r - 1) * W + c] };
        }
        for (let c = 0; c < W; c++) cells[row * W + c] = { c: ' ', fg: 7, bg: 0 };
        for (let i = 0; i < cells.length; i++) drawCell(i);
        dirty = true;
        document.getElementById('saveStatus').textContent = 'unsaved';
    }

    function deleteRowAt(row) {
        pushHistory();
        for (let r = row; r < H - 1; r++) {
            for (let c = 0; c < W; c++) cells[r * W + c] = { ...cells[(r + 1) * W + c] };
        }
        for (let c = 0; c < W; c++) cells[(H - 1) * W + c] = { c: ' ', fg: 7, bg: 0 };
        for (let i = 0; i < cells.length; i++) drawCell(i);
        dirty = true;
        document.getElementById('saveStatus').textContent = 'unsaved';
    }

    function insertColAt(col) {
        pushHistory();
        for (let r = 0; r < H; r++) {
            for (let c = W - 1; c > col; c--) cells[r * W + c] = { ...cells[r * W + c - 1] };
            cells[r * W + col] = { c: ' ', fg: 7, bg: 0 };
        }
        for (let i = 0; i < cells.length; i++) drawCell(i);
        dirty = true;
        document.getElementById('saveStatus').textContent = 'unsaved';
    }

    function deleteColAt(col) {
        pushHistory();
        for (let r = 0; r < H; r++) {
            for (let c = col; c < W - 1; c++) cells[r * W + c] = { ...cells[r * W + c + 1] };
            cells[r * W + (W - 1)] = { c: ' ', fg: 7, bg: 0 };
        }
        for (let i = 0; i < cells.length; i++) drawCell(i);
        dirty = true;
        document.getElementById('saveStatus').textContent = 'unsaved';
    }

    function fillFlood(r, c) {
        if (r < 0 || r >= H || c < 0 || c >= W) return;
        const i = r * W + c;
        const target = {c: cells[i].c, fg: cells[i].fg, bg: cells[i].bg};
        if (target.c === curChar && target.fg === curFg && target.bg === curBg) return;
        const stack = [[r, c]];
        while (stack.length) {
            const [rr, cc] = stack.pop();
            if (rr < 0 || rr >= H || cc < 0 || cc >= W) continue;
            const ii = rr * W + cc;
            const cell = cells[ii];
            if (cell.c !== target.c || cell.fg !== target.fg || cell.bg !== target.bg) continue;
            paint(rr, cc);
            stack.push([rr+1, cc], [rr-1, cc], [rr, cc+1], [rr, cc-1]);
        }
    }

    // ---- Mouse interaction ----
    grid.addEventListener('mousedown', e => {
        const cell = e.target.closest('.cell');
        if (!cell) return;
        const r = parseInt(cell.dataset.r, 10);
        const c = parseInt(cell.dataset.c, 10);
        cursorR = r; cursorC = c; updateCursorMark();
        const halfMode = document.getElementById('halfBlockMode').checked;
        if (tool === 'pencil' && halfMode) {
            paintHalfBlock(r, c, cellHalfAtEvent(e, cell), curFg);
            mouseDown = true;
        }
        else if (tool === 'eraser' && halfMode) {
            paintHalfBlock(r, c, cellHalfAtEvent(e, cell), curBg);
            mouseDown = true;
        }
        else if (tool === 'pencil') { paint(r, c); mouseDown = true; }
        else if (tool === 'eraser') { erase(r, c); mouseDown = true; }
        else if (tool === 'shade') { shadeBrush(r, c); mouseDown = true; }
        else if (tool === 'colorize') { colorizeCell(r, c); mouseDown = true; }
        else if (tool === 'fill') { fillFlood(r, c); }
        else if (tool === 'line') { lineStart = [r, c]; }
        else if (tool === 'rect') { lineStart = [r, c]; }
        else if (tool === 'ellipse') { lineStart = [r, c]; }
        else if (tool === 'select') { selStart = [r, c]; clearSelection(); }
        else if (tool === 'eyedrop') {
            const cell = cells[r * W + c];
            curChar = cell.c || ' ';
            curFg = cell.fg & 0x0F;
            curBg = cell.bg & 0x07;
            buildSwatches();
            updateCharPreview();
        }
        else if (tool === 'text') { /* cursor placement only */ }
    });
    grid.addEventListener('mouseup', e => {
        const cell = e.target.closest('.cell');
        if (cell && (tool === 'line' || tool === 'rect' || tool === 'ellipse') && lineStart) {
            const r = parseInt(cell.dataset.r, 10);
            const c = parseInt(cell.dataset.c, 10);
            if (tool === 'line') drawLine(lineStart[0], lineStart[1], r, c);
            else if (tool === 'rect') drawRect(lineStart[0], lineStart[1], r, c);
            else if (tool === 'ellipse') drawEllipse(lineStart[0], lineStart[1], r, c);
            lineStart = null;
        }
        if (cell && tool === 'select' && selStart) {
            const r = parseInt(cell.dataset.r, 10);
            const c = parseInt(cell.dataset.c, 10);
            selRect = {
                r0: Math.min(selStart[0], r), c0: Math.min(selStart[1], c),
                r1: Math.max(selStart[0], r), c1: Math.max(selStart[1], c),
            };
            highlightSelection();
            selStart = null;
        }
        mouseDown = false;
    });
    grid.addEventListener('mouseover', e => {
        const cell = e.target.closest('.cell');
        if (!cell) return;
        if (mouseDown) {
            const r = parseInt(cell.dataset.r, 10);
            const c = parseInt(cell.dataset.c, 10);
            const halfMode = document.getElementById('halfBlockMode').checked;
            if (tool === 'pencil' && halfMode) paintHalfBlock(r, c, cellHalfAtEvent(e, cell), curFg);
            else if (tool === 'eraser' && halfMode) paintHalfBlock(r, c, cellHalfAtEvent(e, cell), curBg);
            else if (tool === 'pencil') paint(r, c);
            else if (tool === 'eraser') erase(r, c);
            else if (tool === 'shade') shadeBrush(r, c);
            else if (tool === 'colorize') colorizeCell(r, c);
        }
    });
    document.addEventListener('mouseup', () => { mouseDown = false; });

    // ---- Keyboard for text mode ----
    document.addEventListener('keydown', e => {
        if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
        if (tool === 'text') {
            if (e.key === 'ArrowUp')   { cursorR = Math.max(0, cursorR-1); updateCursorMark(); e.preventDefault(); }
            else if (e.key === 'ArrowDown') { cursorR = Math.min(H-1, cursorR+1); updateCursorMark(); e.preventDefault(); }
            else if (e.key === 'ArrowLeft') { cursorC = Math.max(0, cursorC-1); updateCursorMark(); e.preventDefault(); }
            else if (e.key === 'ArrowRight'){ cursorC = Math.min(W-1, cursorC+1); updateCursorMark(); e.preventDefault(); }
            else if (e.key === 'Backspace') {
                cursorC = Math.max(0, cursorC-1);
                erase(cursorR, cursorC);
                updateCursorMark(); e.preventDefault();
            } else if (e.key === 'Enter') {
                cursorR = Math.min(H-1, cursorR+1); cursorC = 0;
                updateCursorMark(); e.preventDefault();
            } else if (e.key.length === 1 && !e.ctrlKey && !e.metaKey) {
                paint(cursorR, cursorC, e.key);
                if (cursorC < W-1) cursorC++;
                else if (cursorR < H-1) { cursorC = 0; cursorR++; }
                updateCursorMark();
                e.preventDefault();
            }
        }
    });

    // ---- UI: tool buttons ----
    document.querySelectorAll('[data-tool]').forEach(btn => {
        btn.addEventListener('click', () => {
            tool = btn.dataset.tool;
            document.querySelectorAll('[data-tool]').forEach(b => b.classList.remove('active'));
            btn.classList.add('active');
        });
    });
    document.querySelectorAll('[data-quickch]').forEach(btn => {
        btn.addEventListener('click', () => {
            curChar = btn.dataset.quickch;
            updateCharPreview();
        });
    });

    // ---- Color swatches ----
    function buildSwatches() {
        const fg = document.getElementById('fgSwatches');
        const bg = document.getElementById('bgSwatches');
        fg.innerHTML = ''; bg.innerHTML = '';
        for (let i = 0; i < 16; i++) {
            const s = document.createElement('div');
            s.className = 'swatch' + (i === curFg ? ' active' : '');
            s.style.background = palette[i];
            s.dataset.fg = i;
            s.addEventListener('click', () => {
                curFg = i;
                document.querySelectorAll('#fgSwatches .swatch').forEach(x => x.classList.remove('active'));
                s.classList.add('active');
                updateCharPreview();
            });
            fg.appendChild(s);
        }
        for (let i = 0; i < 8; i++) {
            const s = document.createElement('div');
            s.className = 'swatch' + (i === curBg ? ' active' : '');
            s.style.background = palette[i];
            s.dataset.bg = i;
            s.addEventListener('click', () => {
                curBg = i;
                document.querySelectorAll('#bgSwatches .swatch').forEach(x => x.classList.remove('active'));
                s.classList.add('active');
                updateCharPreview();
            });
            bg.appendChild(s);
        }
    }

    function updateCharPreview() {
        const p = document.getElementById('curCharPreview');
        p.textContent = curChar;
        p.style.color = palette[curFg];
        p.style.background = palette[curBg];
        document.getElementById('curCharCode').textContent = curChar.charCodeAt(0);
    }

    // ---- Character palette (printable ASCII + common CP437 box chars) ----
    function buildCharset() {
        const cs = document.getElementById('charset');
        const chars = [];
        // Printable ASCII 32-126
        for (let i = 32; i < 127; i++) chars.push(String.fromCharCode(i));
        // CP437 high glyphs (use Unicode equivalents)
        const high = '░▒▓█▀▄▌▐♠♣♥♦☺☻☼♀♂♪♫¤§∙√∞׃' +
                     '┌┐└┘─│┬┴├┤┼' +
                     '╔╗╚╝═║╦╩╠╣╬' +
                     '╓╖╙╜╤╧╟╢╫╪╕╛╞╡' +
                     '←→↑↓↔↕▲▼◄►■□●○◆';
        for (const c of high) chars.push(c);
        cs.innerHTML = '';
        for (const ch of chars) {
            const el = document.createElement('div');
            el.className = 'ch';
            el.textContent = ch;
            el.title = `code ${ch.charCodeAt(0)}`;
            el.addEventListener('click', () => {
                curChar = ch;
                document.querySelectorAll('#charset .ch').forEach(x => x.classList.remove('active'));
                el.classList.add('active');
                updateCharPreview();
            });
            cs.appendChild(el);
        }
    }

    // ---- Undo/Redo stack ----
    // Snapshot whole `cells` array on every "stroke boundary" (mousedown,
    // text-mode keypress) — chunky but simple. Cap at 50 history entries.
    const undoStack = [];
    const redoStack = [];
    const HISTORY_MAX = 50;

    function snapshot() {
        // Deep-clone cells so future mutations don't mutate this snapshot.
        return cells.map(c => ({ c: c.c, fg: c.fg, bg: c.bg }));
    }

    function pushHistory() {
        undoStack.push(snapshot());
        if (undoStack.length > HISTORY_MAX) undoStack.shift();
        redoStack.length = 0;        // any new edit invalidates redo
    }

    function applySnapshot(snap) {
        cells = snap.map(c => ({ c: c.c, fg: c.fg, bg: c.bg }));
        for (let i = 0; i < cells.length; i++) drawCell(i);
        dirty = true;
        document.getElementById('saveStatus').textContent = 'unsaved';
    }

    function doUndo() {
        if (!undoStack.length) return;
        redoStack.push(snapshot());
        applySnapshot(undoStack.pop());
    }

    function doRedo() {
        if (!redoStack.length) return;
        undoStack.push(snapshot());
        applySnapshot(redoStack.pop());
    }

    document.getElementById('btnUndo').addEventListener('click', doUndo);
    document.getElementById('btnRedo').addEventListener('click', doRedo);
    document.getElementById('btnCopy').addEventListener('click', copySelection);
    document.getElementById('btnPaste').addEventListener('click', () => {
        if (!clipboard) return;
        // Paste at the cursor or top-left of selection.
        const rTop = selRect ? selRect.r0 : cursorR;
        const cLeft = selRect ? selRect.c0 : cursorC;
        pasteAt(rTop, cLeft);
    });
    document.getElementById('btnFlipH').addEventListener('click', flipSelectionHorizontal);
    document.getElementById('btnFlipV').addEventListener('click', flipSelectionVertical);
    document.getElementById('btnSwapColors').addEventListener('click', swapColorsInSelection);
    document.getElementById('btnReplaceColor').addEventListener('click', replaceColorInSelection);
    document.getElementById('btnCenter').addEventListener('click', centerSelection);
    document.getElementById('btnInsertRow').addEventListener('click', () => insertRowAt(cursorR));
    document.getElementById('btnDeleteRow').addEventListener('click', () => deleteRowAt(cursorR));
    document.getElementById('btnInsertCol').addEventListener('click', () => insertColAt(cursorC));
    document.getElementById('btnDeleteCol').addEventListener('click', () => deleteColAt(cursorC));

    // ---- TheDraw (.TDF) font picker: list, search, live preview, insert ----
    (function() {
        let fonts = [];        // [{index, name, type}, ...] from /fonts
        let selected = null;   // currently-picked font entry
        let lastResult = null; // most recent /fonts/render response
        let previewTimer = null;
        const listEl = document.getElementById('tdfFontList');
        const searchEl = document.getElementById('tdfSearch');
        const textEl = document.getElementById('tdfText');
        const previewEl = document.getElementById('tdfPreview');
        const insertBtn = document.getElementById('btnTdfInsert');

        function renderList(filter) {
            const q = (filter || '').toLowerCase();
            const matches = q ? fonts.filter(f => f.name.toLowerCase().includes(q)) : fonts;
            listEl.innerHTML = '';
            // Cap rendered rows -- a 3,716-font pack with no filter
            // would otherwise build that many DOM nodes on every
            // keystroke; the search box narrows it down fast.
            matches.slice(0, 300).forEach(f => {
                const row = document.createElement('div');
                row.textContent = f.name;
                row.style.cssText = 'padding:2px 4px;cursor:pointer;color:#0f0;';
                row.addEventListener('click', () => {
                    selected = f;
                    Array.from(listEl.children).forEach(el => el.style.background = '');
                    row.style.background = '#333';
                    requestPreview();
                });
                listEl.appendChild(row);
            });
        }

        function requestPreview() {
            if (!selected || !textEl.value) {
                previewEl.textContent = '';
                lastResult = null;
                insertBtn.disabled = true;
                return;
            }
            const url = `{{ url_for('ansi_editor.render_font_preview') }}` +
                        `?index=${selected.index}&text=${encodeURIComponent(textEl.value)}` +
                        `&fg=${curFg}&bg=${curBg}`;
            fetch(url).then(r => r.json()).then(result => {
                if (result.error || !result.cells) {
                    previewEl.textContent = result.error || '(no output)';
                    lastResult = null;
                    insertBtn.disabled = true;
                    return;
                }
                lastResult = result;
                insertBtn.disabled = false;
                const lines = [];
                for (let r = 0; r < result.height; r++) {
                    let line = '';
                    for (let c = 0; c < result.width; c++) {
                        const cell = result.cells[r * result.width + c];
                        line += cell ? cell.c : ' ';
                    }
                    lines.push(line);
                }
                previewEl.textContent = lines.join('\n');
            }).catch(() => {
                previewEl.textContent = '(preview failed)';
                lastResult = null;
                insertBtn.disabled = true;
            });
        }

        searchEl.addEventListener('input', () => renderList(searchEl.value));
        textEl.addEventListener('input', () => {
            clearTimeout(previewTimer);
            previewTimer = setTimeout(requestPreview, 250);  // debounce
        });
        insertBtn.addEventListener('click', () => {
            if (!lastResult) return;
            insertTdfResult(cursorR, cursorC, lastResult);
        });

        // "Download & Install Fonts" -- shown whenever the picker comes
        // back empty (fresh install, nobody's set up a font pack yet),
        // hidden again the moment it finds real fonts. Clicking it hits
        // the new /fonts/install route (anetbbs/web/ansi_editor.py),
        // which fetches TDF_FONTS_PACK_URL and extracts it into
        // TDF_FONTS_DIR server-side -- this just re-runs loadFonts()
        // afterward to pick up the result, same request the page
        // already makes on its own load.
        const installPanel = document.getElementById('tdfInstallPanel');
        const installBtn = document.getElementById('btnTdfInstall');
        const installStatus = document.getElementById('tdfInstallStatus');

        function loadFonts() {
            fetch(`{{ url_for('ansi_editor.list_fonts') }}`).then(r => r.json()).then(data => {
                fonts = data || [];
                installPanel.style.display = fonts.length ? 'none' : '';
                renderList('');
            }).catch(() => { listEl.textContent = '(font list unavailable)'; });
        }

        installBtn.addEventListener('click', async () => {
            installBtn.disabled = true;
            installStatus.textContent = 'Downloading and installing…';
            try {
                const csrfMeta = document.querySelector('meta[name="csrf-token"]');
                const csrf = csrfMeta ? csrfMeta.getAttribute('content') : '';
                const r = await fetch(`{{ url_for('ansi_editor.install_fonts') }}`, {
                    method: 'POST',
                    headers: {'X-CSRFToken': csrf},
                    credentials: 'same-origin',
                });
                const data = await r.json();
                if (!r.ok || data.error) throw new Error(data.error || ('HTTP ' + r.status));
                installStatus.textContent = `Installed ${data.installed} fonts.`;
                loadFonts();
            } catch (e) {
                installStatus.textContent = 'Install failed: ' + e.message;
            } finally {
                installBtn.disabled = false;
            }
        });

        loadFonts();
    })();

    // Zoom — scales cell width/height/font via CSS variables.
    let zoom = 1;
    function applyZoom() {
        const w = Math.round(10 * zoom);
        const h = Math.round(18 * zoom);
        const f = Math.round(14 * zoom);
        const wrap = document.querySelector('.ansi-grid-wrap');
        wrap.style.setProperty('--cell-w', w + 'px');
        wrap.style.setProperty('--cell-h', h + 'px');
        wrap.style.setProperty('--cell-font', f + 'px');
        // Refresh grid template
        grid.style.gridTemplateColumns = `repeat(${W}, ${w}px)`;
        grid.style.gridTemplateRows    = `repeat(${H}, ${h}px)`;
    }
    document.getElementById('btnZoomIn').addEventListener('click', () => {
        zoom = Math.min(3, zoom + 0.25); applyZoom();
    });
    document.getElementById('btnZoomOut').addEventListener('click', () => {
        zoom = Math.max(0.5, zoom - 0.25); applyZoom();
    });

    document.querySelectorAll('.brush-btn').forEach(btn => {
        btn.addEventListener('click', () => {
            brushSize = parseInt(btn.dataset.brush, 10) || 1;
            document.querySelectorAll('.brush-btn').forEach(b => b.classList.remove('active'));
            btn.classList.add('active');
        });
    });

    // Hijack mousedown to snapshot before any draw happens.
    grid.addEventListener('mousedown', () => pushHistory(), true);

    // Clear canvas
    document.getElementById('btnClear').addEventListener('click', () => {
        if (!confirm('Clear the entire canvas? (Undo will restore it.)')) return;
        pushHistory();
        for (let i = 0; i < cells.length; i++) {
            cells[i] = { c: ' ', fg: 7, bg: 0 };
            drawCell(i);
        }
        dirty = true;
        document.getElementById('saveStatus').textContent = 'unsaved';
    });

    // Preview window — opens the rendered .ans in a new tab.
    document.getElementById('btnPreview').addEventListener('click', () => {
        // Save first so the preview reflects the latest edits.
        document.getElementById('btnSave').click();
        setTimeout(() => {
            window.open('{{ preview_url }}',
                        '_blank');
        }, 400);
    });

    // Keyboard shortcuts (when not in text-typing mode)
    document.addEventListener('keydown', e => {
        if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
        if (tool === 'text') return;
        if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'z') {
            e.preventDefault();
            if (e.shiftKey) doRedo(); else doUndo();
        } else if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'y') {
            e.preventDefault();
            doRedo();
        } else if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 's') {
            e.preventDefault();
            document.getElementById('btnSave').click();
        } else if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'c') {
            e.preventDefault();
            copySelection();
        } else if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'v') {
            e.preventDefault();
            const rTop = selRect ? selRect.r0 : cursorR;
            const cLeft = selRect ? selRect.c0 : cursorC;
            pasteAt(rTop, cLeft);
        } else if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'a') {
            e.preventDefault();
            selRect = { r0: 0, c0: 0, r1: H - 1, c1: W - 1 };
            highlightSelection();
        } else if (e.key === 'Escape') {
            clearSelection();
        }
    });

    // ---- Save ----
    document.getElementById('btnSave').addEventListener('click', async () => {
        const status = document.getElementById('saveStatus');
        status.textContent = 'saving…';
        try {
            const csrfMeta = document.querySelector('meta[name="csrf-token"]');
            const csrf = csrfMeta ? csrfMeta.getAttribute('content') : '';
            const r = await fetch('{{ save_url }}', {
                method: 'POST',
                headers: {'Content-Type': 'application/json', 'X-CSRFToken': csrf},
                credentials: 'same-origin',
                body: JSON.stringify({
                    grid: { width: W, height: H, cells: cells },
                }),
            });
            if (!r.ok) throw new Error('HTTP ' + r.status);
            const data = await r.json();
            if (!data.ok) throw new Error(data.error || 'save failed');
            status.textContent = 'saved ' + new Date().toLocaleTimeString();
            dirty = false;
        } catch (e) {
            status.textContent = 'save failed: ' + e.message;
        }
    });

    // Warn if leaving with unsaved changes
    window.addEventListener('beforeunload', e => {
        if (dirty) { e.preventDefault(); return ''; }
    });

    // ---- Initialize ----
    buildGrid();
    initRefImage();
    buildSwatches();
    buildCharset();
    updateCharPreview();
})();
</script>