Indicate reserved codepoints in demo

demo/client.ts

@@ -898,7 +898,7 @@ function customGlyphRangesHandler(): void {
     ['Block elements', 0x1FB70, 0x1FB80],
     ['Window title bar', 0x1FB81, 0x1FB81],
     ['Block elements', 0x1FB82, 0x1FB8B],
-    ['Rectangular shade characters', 0x1FB8C, 0x1FB94],
+    ['Rectangular shade characters', 0x1FB8C, 0x1FB94, [0x1FB93]],
     ['Fill characters', 0x1FB95, 0x1FB97],
     ['Diagonal fill characters', 0x1FB98, 0x1FB99],
     ['Smooth mosaic terminal graphic characters', 0x1FB9A, 0x1FB9B],

demo/unicodeTable.ts

@@ -6,6 +6,7 @@ export type UnicodeRangeDefinition = [
   label: string,
   start: number,
   end: number,
+  reserved?: number[],
 ];
 
 /**
@@ -39,15 +40,23 @@ export function writeUnicodeTable(term: Terminal, name: string, start: number, e
   const labelStartMap = new Map<number, { label: string, colorIndex: number }>();
   // Build a map of codepoint -> colorIndex for all codepoints in each range
   const codePointColorMap = new Map<number, number>();
+  // Build a set of reserved codepoints
+  const reservedSet = new Set<number>();
   let lastDefinitionEnd = start; // Track the last definition's end to stop printing there
   if (definitions) {
     for (let i = 0; i < definitions.length; i++) {
-      const [label, labelStart, labelEnd] = definitions[i];
+      const [label, labelStart, labelEnd, reserved] = definitions[i];
       labelStartMap.set(labelStart, { label, colorIndex: i });
       // Map all codepoints in the range to this color
       for (let cp = labelStart; cp <= labelEnd; cp++) {
         codePointColorMap.set(cp, i);
       }
+      // Track reserved codepoints
+      if (reserved) {
+        for (const cp of reserved) {
+          reservedSet.add(cp);
+        }
+      }
       if (labelEnd > lastDefinitionEnd) {
         lastDefinitionEnd = labelEnd;
       }
@@ -60,12 +69,18 @@ export function writeUnicodeTable(term: Terminal, name: string, start: number, e
   for (let row = startRow; row <= endRow; row++) {
     // Collect labels for this row with their column positions and color
     const rowLabels: { col: number, label: string, colorIndex: number }[] = [];
+    // Collect reserved codepoints for this row
+    const rowReserved: { col: number, colorIndex: number }[] = [];
     for (let col = 0; col < 16; col++) {
       const codePoint = row * 16 + col;
       const labelInfo = labelStartMap.get(codePoint);
       if (labelInfo) {
         rowLabels.push({ col, label: labelInfo.label, colorIndex: labelInfo.colorIndex });
       }
+      if (reservedSet.has(codePoint)) {
+        const charColorIndex = codePointColorMap.get(codePoint);
+        rowReserved.push({ col, colorIndex: charColorIndex ?? -1 });
+      }
     }
 
     // If labels exist and don't start at column 0, first output chars before first label
@@ -88,6 +103,40 @@ export function writeUnicodeTable(term: Terminal, name: string, start: number, e
         }
       }
       term.write('\n\r');
+
+      // Render reserved labels that appear before the first label (below the first part of row)
+      const earlyReserved = rowReserved.filter(r => r.col < rowLabels[0].col);
+      if (earlyReserved.length > 0) {
+        for (let i = earlyReserved.length - 1; i >= 0; i--) {
+          const prefix = ' '.repeat(8);
+          let line = '';
+          let visualLen = 0;
+          for (let col = 0; col < rowLabels[0].col; col++) {
+            const colPos = col * 2 + 1; // +1 to align with character position
+            const reservedAtCol = earlyReserved.findIndex(r => r.col === col);
+            if (reservedAtCol === i) {
+              const padding = ' '.repeat(colPos - visualLen);
+              const reservedItem = earlyReserved[i];
+              if (reservedItem.colorIndex >= 0) {
+                line += padding + color('└<reserved>', reservedItem.colorIndex);
+              } else {
+                line += padding + '└<reserved>';
+              }
+              break;
+            } else if (reservedAtCol !== -1 && reservedAtCol < i) {
+              const padding = ' '.repeat(colPos - visualLen);
+              const prevReserved = earlyReserved[reservedAtCol];
+              if (prevReserved.colorIndex >= 0) {
+                line += padding + color('│', prevReserved.colorIndex);
+              } else {
+                line += padding + '│';
+              }
+              visualLen = colPos + 1;
+            }
+          }
+          term.write(faint(prefix + line) + '\n\r');
+        }
+      }
     }
 
     // If labels exist, render them above the row