Implement remaining powerline extra symbols

- Uses fontforge + helper bin/convert_svg_to_custom_glyph.js
- Some of these are very large. They'll be much smaller after gzip but
  if this becomes a problem we can compile the svgs into a binary format

Fixes #5479

demo/client.ts

@@ -895,11 +895,11 @@ function customGlyphRangesHandler(): void {
     ['Terminal graphic characters', 0x2596, 0x259F],
   ]);
   // Powerline Symbols
-  // Range: E0A0–E0BF
+  // Range: E0A0–E0D4
   // https://github.com/ryanoasis/nerd-fonts
   writeUnicodeTable(term, 'Powerline Symbols', 0xE0A0, 0xE0BF, [
     ['Powerline Symbols', 0xE0A0, 0xE0B3, [0xE0A4, 0xE0A5, 0xE0A6, 0xE0A7, 0xE0A8, 0xE0A9, 0xE0AA, 0xE0AB, 0xE0AC, 0xE0AD, 0xE0AE, 0xE0AF]],
-    ['Powerline Extra Symbols', 0xE0B4, 0xE0BF],
+    ['Powerline Extra Symbols', 0xE0B4, 0xE0D4, [0xE0C9, 0xE0CB, 0xE0D3]],
   ]);
   // Symbols for Legacy Computing
   // Range: 1FB00–1FBFF

demo/unicodeTable.ts

@@ -218,22 +218,50 @@ export function writeUnicodeTable(term: Terminal, name: string, start: number, e
     term.write('\n\r');
 
     // Render reserved labels that appear after the first label (below the row)
-    // Only show one label pointing to the first reserved item when there are multiple
+    // Show one label per non-contiguous reserved range
     const lateReserved = rowLabels.length > 0
       ? rowReserved.filter(r => r.col >= rowLabels[0].col)
       : rowReserved;
     if (lateReserved.length > 0) {
-      const prefix = ' '.repeat(8);
-      const firstReserved = lateReserved[0];
-      const colPos = firstReserved.col * 2 + 1;
-      const padding = ' '.repeat(colPos);
-      let line: string;
-      if (firstReserved.colorIndex >= 0) {
-        line = padding + color('└<reserved>', firstReserved.colorIndex);
-      } else {
-        line = padding + '└<reserved>';
+      // Group contiguous reserved ranges
+      const reservedGroups: { startCol: number, colorIndex: number }[] = [];
+      for (let i = 0; i < lateReserved.length; i++) {
+        const curr = lateReserved[i];
+        const prev = lateReserved[i - 1];
+        // Start a new group if not contiguous (gap of more than 1 column)
+        if (i === 0 || curr.col > prev.col + 1) {
+          reservedGroups.push({ startCol: curr.col, colorIndex: curr.colorIndex });
+        }
+      }
+
+      // Render from bottom to top (last group at bottom with └, earlier groups with │)
+      for (let i = reservedGroups.length - 1; i >= 0; i--) {
+        const prefix = ' '.repeat(8);
+        let line = '';
+        let visualLen = 0;
+        for (let g = 0; g <= i; g++) {
+          const group = reservedGroups[g];
+          const colPos = group.startCol * 2 + 1;
+          const padding = ' '.repeat(colPos - visualLen);
+          if (g === i) {
+            // This is the label for this line
+            if (group.colorIndex >= 0) {
+              line += padding + color('└<reserved>', group.colorIndex);
+            } else {
+              line += padding + '└<reserved>';
+            }
+          } else {
+            // Vertical connector for groups below
+            if (group.colorIndex >= 0) {
+              line += padding + color('│', group.colorIndex);
+            } else {
+              line += padding + '│';
+            }
+            visualLen = colPos + 1;
+          }
+        }
+        term.write(faint(prefix + line) + '\n\r');
       }
-      term.write(faint(prefix + line) + '\n\r');
     }
   }
 }