feat: add recursive nested box handling

- Detect and fix inner boxes within outer boxes recursively
- Process inner boxes right-to-left to avoid column invalidation
- Validate inner box alignment before processing
- Maintain outer box dimensions when fixing inner boxes
- Support arbitrary nesting depth and multiple side-by-side boxes

New functions:
- findInnerBoxRegions: detect inner box boundaries
- extractInnerBox: extract inner box content with validation
- reinsertInnerBox: reinsert fixed content while preserving spacing
- hasInnerBoundary, findInnerTopCornerColumn, etc.: detection helpers
- sliceByDisplayColumn, replaceByDisplayColumn: column-based string ops

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: kmelve

src/boxfix.ts

@@ -1,28 +1,227 @@
-import { BoxfixResult, BoxfixStats, RIGHT_BORDER_CHARS } from "./types.js";
-import { getDisplayWidth, expandTabs, padBeforeLastChar } from "./width.js";
+import { BoxfixResult, BoxfixStats, RIGHT_BORDER_CHARS, BoxRegion } from "./types.js";
+import {
+  getDisplayWidth,
+  expandTabs,
+  padBeforeLastChar,
+  sliceByDisplayColumn,
+  replaceByDisplayColumn,
+} from "./width.js";
 import {
   isDiagram,
   isBoundaryLine,
   isContentLine,
   isTreeLine,
+  hasInnerBoundary,
+  findInnerTopCornerColumn,
+  hasBottomCornerAtColumn,
+  findBoundaryEndColumn,
 } from "./diagram-detector.js";
 
+/**
+ * Find all inner box regions within a diagram
+ * An inner box is detected by finding a top-left corner (┌ or +) not at column 0,
+ * then tracking until we find the matching bottom-left corner (└ or +) at the same column
+ */
+function findInnerBoxRegions(lines: string[]): BoxRegion[] {
+  const regions: BoxRegion[] = [];
+
+  for (let lineIdx = 0; lineIdx < lines.length; lineIdx++) {
+    const line = lines[lineIdx];
+
+    // Look for inner top boundaries in this line
+    if (!hasInnerBoundary(line)) {
+      continue;
+    }
+
+    // Find all inner top corners in this line
+    let searchCol = 0;
+    while (true) {
+      const startCol = findInnerTopCornerColumn(line, searchCol);
+      if (startCol === -1) {
+        break;
+      }
+
+      // Find the end column of this boundary
+      const endCol = findBoundaryEndColumn(line, startCol);
+
+      // Look for the matching bottom boundary
+      let endLine = -1;
+      for (let bottomIdx = lineIdx + 1; bottomIdx < lines.length; bottomIdx++) {
+        if (hasBottomCornerAtColumn(lines[bottomIdx], startCol)) {
+          // Verify it's a complete bottom boundary by checking end column too
+          const bottomEndCol = findBoundaryEndColumn(lines[bottomIdx], startCol);
+          if (bottomEndCol === endCol) {
+            endLine = bottomIdx;
+            break;
+          }
+        }
+      }
+
+      if (endLine !== -1) {
+        regions.push({
+          startLine: lineIdx,
+          endLine,
+          startCol,
+          endCol,
+        });
+      }
+
+      // Continue searching for more inner boxes on this line
+      searchCol = endCol;
+    }
+  }
+
+  return regions;
+}
+
+/**
+ * Result of extracting an inner box
+ */
+interface ExtractedBox {
+  content: string;
+  /** Width of each extracted line (may differ from boundary width for content lines) */
+  lineWidths: number[];
+}
+
+/**
+ * Extract an inner box as a standalone diagram
+ * For content lines, finds the actual right border position to avoid including outer box padding
+ * Returns null if the extraction doesn't produce a valid box
+ */
+function extractInnerBox(lines: string[], region: BoxRegion): ExtractedBox | null {
+  const extractedLines: string[] = [];
+  const lineWidths: number[] = [];
+  const verticalChars = ["│", "┃", "|"];
+
+  for (let i = region.startLine; i <= region.endLine; i++) {
+    const line = lines[i];
+    let extracted = sliceByDisplayColumn(line, region.startCol, region.endCol);
+    let extractedWidth = getDisplayWidth(extracted);
+
+    // For content lines (not top/bottom boundary), trim to the actual right border
+    if (i !== region.startLine && i !== region.endLine) {
+      // Find the last vertical border character in the extracted content
+      let lastBorderIdx = -1;
+      for (let j = extracted.length - 1; j >= 0; j--) {
+        if (verticalChars.includes(extracted[j])) {
+          lastBorderIdx = j;
+          break;
+        }
+      }
+      if (lastBorderIdx !== -1 && lastBorderIdx < extracted.length - 1) {
+        // Trim to end at the border character and track the actual width
+        extracted = extracted.slice(0, lastBorderIdx + 1);
+        extractedWidth = getDisplayWidth(extracted);
+      }
+    }
+
+    extractedLines.push(extracted);
+    lineWidths.push(extractedWidth);
+  }
+
+  const content = extractedLines.join("\n");
+
+  // Validate that the extraction produced a valid box
+  // The first line should be a boundary line (start with corner character)
+  const firstLine = extractedLines[0];
+  const topCorners = ["┌", "+"];
+  if (!firstLine || !topCorners.includes(firstLine[0])) {
+    // Extraction didn't produce a valid box (misaligned inner box)
+    return null;
+  }
+
+  // Also validate that content lines start with vertical border
+  // (they might be offset if the inner box is misaligned)
+  for (let i = 1; i < extractedLines.length - 1; i++) {
+    const contentLine = extractedLines[i];
+    if (contentLine && !verticalChars.includes(contentLine[0])) {
+      // Content line doesn't start with border - misaligned inner box
+      return null;
+    }
+  }
+
+  return { content, lineWidths };
+}
+
+/**
+ * Reinsert a fixed inner box back at its original position
+ * Uses the original extracted widths and adjusts for width changes to maintain outer spacing
+ */
+function reinsertInnerBox(
+  lines: string[],
+  region: BoxRegion,
+  fixedInner: string,
+  originalWidths: number[]
+): string[] {
+  const fixedLines = fixedInner.split("\n");
+  const result = [...lines];
+
+  for (let i = 0; i < fixedLines.length; i++) {
+    const lineIdx = region.startLine + i;
+    if (lineIdx < result.length) {
+      const originalWidth = originalWidths[i] || 0;
+      const fixedWidth = getDisplayWidth(fixedLines[i]);
+      const widthDiff = fixedWidth - originalWidth;
+
+      // Extend the end column to consume trailing space if the fixed content is wider
+      // This maintains the total line width by taking space from after the inner box
+      const endCol = region.startCol + originalWidth + Math.max(0, widthDiff);
+
+      result[lineIdx] = replaceByDisplayColumn(
+        result[lineIdx],
+        region.startCol,
+        endCol,
+        fixedLines[i]
+      );
+    }
+  }
+
+  return result;
+}
+
 /**
  * Fix a single ASCII diagram by correcting right border alignment
  *
  * Algorithm:
- * 1. Process the diagram top to bottom, tracking current box context
- * 2. When we see a boundary line, update the target width for subsequent lines
- * 3. For content lines shorter than target (by small margin), pad them
- * 4. This handles nested/stacked boxes correctly by using local context
+ * 1. Find and recursively fix any inner boxes first
+ * 2. Process the diagram top to bottom, tracking current box context
+ * 3. When we see a boundary line, update the target width for subsequent lines
+ * 4. For content lines shorter than target (by small margin), pad them
+ * 5. This handles nested/stacked boxes correctly by using local context
  */
 export function boxfixDiagram(content: string): {
   result: string;
   linesFixed: number;
 } {
   // Expand tabs first
   const expanded = expandTabs(content);
-  const lines = expanded.split("\n");
+  let lines = expanded.split("\n");
+  let totalLinesFixed = 0;
+
+  // Phase 1: Find and recursively fix inner boxes
+  const regions = findInnerBoxRegions(lines);
+
+  // Sort regions: process right-to-left (higher startCol first) to avoid column invalidation
+  // Also process deeper boxes first (those that start on later lines)
+  regions.sort((a, b) => {
+    if (a.startCol !== b.startCol) {
+      return b.startCol - a.startCol; // Right to left
+    }
+    return b.startLine - a.startLine; // Later lines first
+  });
+
+  for (const region of regions) {
+    const extracted = extractInnerBox(lines, region);
+    // Skip if extraction didn't produce a valid box (misaligned inner box)
+    if (extracted === null) {
+      continue;
+    }
+    const { result: fixedInner, linesFixed: innerFixed } = boxfixDiagram(extracted.content);
+    totalLinesFixed += innerFixed;
+    lines = reinsertInnerBox(lines, region, fixedInner, extracted.lineWidths);
+  }
+
+  // Phase 2: Fix outer box (existing logic)
 
   // Find all boundary line widths to use as reference
   const boundaryWidths = new Set<number>();
@@ -32,13 +231,13 @@ export function boxfixDiagram(content: string): {
     }
   }
 
-  // If no boundary lines found, return unchanged
+  // If no boundary lines found, return with just inner fixes
   if (boundaryWidths.size === 0) {
-    return { result: content, linesFixed: 0 };
+    return { result: lines.join("\n"), linesFixed: totalLinesFixed };
   }
 
   // Process each line, tracking current box context
-  let linesFixed = 0;
+  let outerLinesFixed = 0;
   let currentTargetWidth = 0;
 
   const fixedLines = lines.map((line) => {
@@ -91,7 +290,7 @@ export function boxfixDiagram(content: string): {
     const { padded, spacesAdded } = padBeforeLastChar(trimmed, targetWidth);
 
     if (spacesAdded > 0) {
-      linesFixed++;
+      outerLinesFixed++;
       return padded + trailingWhitespace;
     }
 
@@ -100,7 +299,7 @@ export function boxfixDiagram(content: string): {
 
   return {
     result: fixedLines.join("\n"),
-    linesFixed,
+    linesFixed: totalLinesFixed + outerLinesFixed,
   };
 }
 

src/diagram-detector.ts

@@ -1,4 +1,5 @@
 import { BOX_CHARS, CORNER_CHARS } from "./types.js";
+import { getDisplayWidth } from "./width.js";
 
 /**
  * Check if content appears to be an ASCII diagram (as opposed to regular code)
@@ -119,3 +120,92 @@ export function isContentLine(line: string): boolean {
 
   return verticalChars.includes(firstChar) && verticalChars.includes(lastChar);
 }
+
+/**
+ * Check if a content line contains an inner box boundary
+ * (a corner character that is not at the start of the line)
+ */
+export function hasInnerBoundary(line: string): boolean {
+  const trimmed = line.trim();
+
+  // Must be a content line first
+  if (!isContentLine(line)) {
+    return false;
+  }
+
+  // Check for corner chars not at position 0
+  const topCorners = ["┌", "+"];
+
+  // Skip first character (the outer border) and look for inner boundaries
+  for (let i = 1; i < trimmed.length - 1; i++) {
+    if (topCorners.includes(trimmed[i])) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+/**
+ * Find the display column of a top-left corner character in a line
+ * Returns -1 if not found
+ */
+export function findInnerTopCornerColumn(line: string, startSearchCol = 0): number {
+  const topCorners = ["┌", "+"];
+  let currentCol = 0;
+
+  for (const char of line) {
+    if (currentCol > startSearchCol && topCorners.includes(char)) {
+      return currentCol;
+    }
+    currentCol += getDisplayWidth(char);
+  }
+
+  return -1;
+}
+
+/**
+ * Find the display column of a bottom-left corner character at a specific column
+ * Returns true if a bottom corner exists at the given column
+ */
+export function hasBottomCornerAtColumn(line: string, col: number): boolean {
+  const bottomCorners = ["└", "+"];
+  let currentCol = 0;
+
+  for (const char of line) {
+    if (currentCol === col) {
+      return bottomCorners.includes(char);
+    }
+    if (currentCol > col) {
+      return false;
+    }
+    currentCol += getDisplayWidth(char);
+  }
+
+  return false;
+}
+
+/**
+ * Find the right edge of a box boundary starting at a given column
+ * Returns the column after the last character of the boundary
+ */
+export function findBoundaryEndColumn(line: string, startCol: number): number {
+  const horizontalChars = ["─", "━", "-", "="];
+  const endCorners = ["┐", "┘", "+"];
+  let currentCol = 0;
+  let lastBoundaryCol = startCol;
+
+  for (const char of line) {
+    if (currentCol > startCol) {
+      if (endCorners.includes(char)) {
+        return currentCol + getDisplayWidth(char);
+      }
+      if (horizontalChars.includes(char) || char === " ") {
+        lastBoundaryCol = currentCol + getDisplayWidth(char);
+      }
+    }
+    currentCol += getDisplayWidth(char);
+  }
+
+  return lastBoundaryCol;
+}

src/types.ts

@@ -60,3 +60,17 @@ export const RIGHT_BORDER_CHARS: string[] = [...BOX_CHARS.vertical, ...BOX_CHARS
  * Characters that indicate a boundary line (top/bottom of box)
  */
 export const CORNER_CHARS: string[] = [...BOX_CHARS.corners, ...BOX_CHARS.asciiCorners];
+
+/**
+ * A detected inner box region within a diagram
+ */
+export interface BoxRegion {
+  /** Line index where inner box starts (top boundary) */
+  startLine: number;
+  /** Line index where inner box ends (bottom boundary) */
+  endLine: number;
+  /** Display column where inner box starts */
+  startCol: number;
+  /** Display column where inner box ends */
+  endCol: number;
+}