render side art as stacked per-color layers (fixes torn right panel, much lighter layout)

inc/art.php

@@ -43,7 +43,7 @@ function ansi_html_cached(string $file, bool $mirror = false): string
 {
     $dir = (defined('DATA_DIR') ? DATA_DIR : sys_get_temp_dir()) . '/art-cache';
     $base = $dir . '/' . md5($file . '|' . (int) $mirror);
-    $key = $base . '-' . filemtime($file) . '.html';
+    $key = $base . '-' . filemtime($file) . '-layers.html'; // bump the suffix when the markup changes
     if (is_file($key)) {
         return (string) file_get_contents($key);
     }
@@ -79,23 +79,37 @@ function ansi_html(string $file, bool $mirror = false): string
     }
 
     $width = max(array_map('count', $lines) ?: [0]);
-    $out = [];
-    foreach ($lines as $cells) {
+    foreach ($lines as &$cells) {
         $cells = array_pad($cells, $width, [' ', null]);
         if ($mirror) {
             $cells = array_map(static fn($c) => [$flip[$c[0]] ?? $c[0], $c[1]], array_reverse($cells));
         }
-        $html = '';
-        $open = null;
-        foreach ($cells as [$ch, $color]) {
-            // blanks have no color of their own; let them ride along in the open run
-            if ($ch !== ' ' && $color !== $open) {
-                $html .= ($open !== null ? '</i>' : '') . ($color !== null ? "<i style=\"color:#$color\">" : '');
-                $open = $color;
-            }
-            $html .= htmlspecialchars($ch);
-        }
-        $out[] = $html . ($open !== null ? '</i>' : '');
     }
-    return implode("\n", $out);
+    unset($cells);
+
+    // One full-size text layer per color, holding only that color's
+    // characters; CSS stacks them. A few dozen elements instead of a span per
+    // color run (thousands), which is what made the art slow to lay out.
+    $colors = [];
+    foreach ($lines as $cells) {
+        foreach ($cells as [$ch, $color]) {
+            if ($ch !== ' ') {
+                $colors[$color ?? ''] = true;
+            }
+        }
+    }
+    $html = '';
+    foreach (array_keys($colors) as $color) {
+        $rows = [];
+        foreach ($lines as $cells) {
+            $row = '';
+            foreach ($cells as [$ch, $c]) {
+                $row .= ($ch !== ' ' && ($c ?? '') === $color) ? $ch : ' ';
+            }
+            $rows[] = $row;
+        }
+        $style = $color !== '' ? " style=\"color:#$color\"" : '';
+        $html .= "<span$style>" . htmlspecialchars(implode("\n", $rows)) . '</span>';
+    }
+    return $html;
 }