fix(runtime): a 0-width box wraps its text onto its own line, not drops it (Ink parity) (#103)

A 0-width text container (flexBasis=0, width=0, width="0%", a negative parsed
percent) DROPPED its text in vue where Ink wraps it onto its own row. Ink's wrapText
has no width<=0 guard: wrapAnsi("A", 0, {hard:true, trim:false}) = "\nA" (height 2),
so the glyph occupies a second row and a row-sibling renders "B\nA". vue collapsed it
to height 1 (wrapText's `width <= 0 -> [""]` guard), then the paint clamp re-collapsed
the wrap, so the sibling overwrote the text -> "B".

Fixes, all confined to the width<=0 branch:
- text-measure.ts: drop the `width <= 0 -> [""]` guard. A styled string can't go
  through wrapAnsi at width 0 (wrap-ansi@10 byte-splits SGR codes -> garbage like
  "B\n["), so the wrap/hard branch routes through a new wrapZeroWidthAnsi that
  derives its line STRUCTURE from wrapAnsi on the PLAIN (stripped) text — which is
  correct for zero-width graphemes (ZWSP/ZWNJ/ZWJ/combining/VS16/BOM, interior and
  trailing) — then re-applies SGR per grapheme via slice-ansi's slot model, keeping
  wide glyphs whole. Input is NFC-normalized first so combining sequences compose to
  match wrap-ansi (and vue's own normal-width path), not the decomposed source bytes.
- paint.ts: pad the bg to the TRUE wrap width (0), not a >=1-clamped width — a 0-width
  box pads nothing (Ink getMaxWidth=0); clamping bg-padded the empty leading wrap line
  into a stray cell that collided with a row-sibling.

A comparison-battery test locks wrapZeroWidthAnsi's plain output to wrapAnsi's
width-0 layout for ~22 inputs (zero-width, wide, emoji, ZWJ, combining decomposed +
composed, multiline). The full layout suite is byte-unchanged for all width>=1 cases.

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

packages/runtime-tests/integration/layout/flex.test.tsx

@@ -207,20 +207,13 @@ test("non-number/non-string flexBasis falls back to auto (Ink parity), does not
   expect(lastFrame({ trimLines: true })).toBe("AB");
 });
 
-// PRE-EXISTING DOWNSTREAM DIVERGENCE — out of scope for the string→percent setter.
-// A zero/negative parsed percent ("0"→0%, "-5"→-5%, "0x10"→parseInt=0→0%) produces
-// a 0-width inner box. Ink renders "B\nA" (B on the row, A wraps onto the next line);
-// vue renders "B" (A dropped). EVIDENCE: with width=6 and this exact tree, the frame is
-//   input    vue-OLD (setFlexBasis(string))   vue-NEW (setFlexBasisPercent)   Ink v7.0.4
-//   "0"      "B"                              "B"                             "B\nA"
-//   "-5"     "B"                              "B"                             "B\nA"
-//   "0x10"   "B"                              "B"                             "B\nA"
-// vue-OLD already differed from Ink here, so this PR's setter change neither caused nor
-// fixed it — the two setters yield byte-identical yoga COMPUTED layout for these inputs;
-// the "B" vs "B\nA" gap is a separate downstream paint/wrap divergence. Skipped (not
-// xfail-asserted as "B") so we don't lock vue's current behavior as correct: the target
-// is Ink's "B\nA". Tracked separately from the flexBasis-percent setter work.
-test.skip("zero/negative flexBasis% wraps the sibling in Ink (downstream divergence)", async () => {
+// A zero/negative parsed percent ("0"→0%, "-5"→-5%, "0x10"→parseInt=0→0%) produces a
+// 0-width inner box. Ink renders "B\nA" (B on the row, A wraps onto the next line). The
+// 0-width text measures via wrapAnsi("A", 0, {hard:true, trim:false}) = "\nA" → height 2,
+// so A occupies a second row. vue previously dropped the text ("B") because wrapText's
+// `width <= 0 → [""]` guard collapsed the measure to height 1. Verified against Ink v7.0.4
+// (@40b3a75): all four of flexBasis=0/"0%" and width=0/"0%" render "B\nA".
+test("zero/negative flexBasis% wraps the sibling in Ink (downstream divergence)", async () => {
   const { lastFrame } = await render(
     defineComponent(() => () => (
       <Box flexDirection="row" width={6}>
@@ -232,6 +225,86 @@ test.skip("zero/negative flexBasis% wraps the sibling in Ink (downstream diverge
     )),
     { columns: 100 },
   );
-  // Ink v7.0.4 renders "B\nA"; vue currently renders "B" (see comment above).
+  // Ink v7.0.4 renders "B\nA".
   expect(lastFrame({ trimLines: true })).toBe("B\nA");
 });
+
+test("zero-width Box wraps its text onto its own line (width={0})", async () => {
+  const { lastFrame } = await render(
+    defineComponent(() => () => (
+      <Box width={6}>
+        <Box width={0}>
+          <Text>A</Text>
+        </Box>
+        <Text>B</Text>
+      </Box>
+    )),
+    { columns: 100 },
+  );
+  // Ink v7.0.4 renders "B\nA": the 0-width text measures height 2 via
+  // wrapAnsi("A", 0, {hard:true}) = "\nA", so A wraps below sibling B.
+  expect(lastFrame({ trimLines: true })).toBe("B\nA");
+});
+
+test('zero-percent-width Box wraps its text onto its own line (width="0%")', async () => {
+  const { lastFrame } = await render(
+    defineComponent(() => () => (
+      <Box width={6}>
+        <Box width="0%">
+          <Text>A</Text>
+        </Box>
+        <Text>B</Text>
+      </Box>
+    )),
+    { columns: 100 },
+  );
+  // Ink v7.0.4 renders "B\nA" — same as width={0}; a 0% resolved width is also 0px.
+  expect(lastFrame({ trimLines: true })).toBe("B\nA");
+});
+
+test("zero-width Box with EMPTY text adds no spurious row", async () => {
+  const { lastFrame } = await render(
+    defineComponent(() => () => (
+      <Box width={6}>
+        <Box width={0}>
+          <Text>{""}</Text>
+        </Box>
+        <Text>B</Text>
+      </Box>
+    )),
+    { columns: 100 },
+  );
+  // Ink v7.0.4 renders "B": empty text measures width 0 (≤ 0), so it never wraps and
+  // never gains a second row. The 0-width fix must NOT add a blank row here.
+  expect(lastFrame({ trimLines: true })).toBe("B");
+});
+
+test("zero-width Box with backgroundColor wraps cleanly, keeping the bg glyph (Ink parity)", async () => {
+  // Regression guard for the wrap-ansi width<=0 byte-split: at width 0 the 0-width Box's
+  // text wraps onto its own row, but vue bakes the bg color INTO the string before wrapping,
+  // and wrap-ansi@10 byte-splits the SGR escapes of a STYLED string at width<=0
+  // (wrapAnsi("\x1b[41mA\x1b[49m", 0) = "\x1b\n[\n4\n1\nm\nA\n…"). That scattered the escape
+  // bytes across rows and rendered a garbage "B\n[" (the 2nd byte of "\x1b[41m"). wrapText
+  // now routes width<=0 styled text through an ANSI-aware per-grapheme split, matching Ink,
+  // which wraps PLAIN text and colorizes per line afterwards.
+  const { lastFrame } = await render(
+    defineComponent(() => () => (
+      <Box flexDirection="row" width={6}>
+        <Box width={0} backgroundColor="red">
+          <Text>A</Text>
+        </Box>
+        <Text>B</Text>
+      </Box>
+    )),
+    { columns: 100 },
+  );
+  // RAW-byte parity target captured from Ink v7.0.4 (@40b3a75) with chalk level 3:
+  // "B\n\x1b[41mA\x1b[49m\n" — row 2 keeps the FULL bg-colored glyph (overflow:visible).
+  // vue trims trailing whitespace/newlines per frame line, so the equivalent raw frame is
+  // "B\n\x1b[41mA\x1b[49m" (no trailing newline). The bg glyph must survive intact.
+  expect(lastFrame({ raw: true })).toBe("B\n\x1b[41mA\x1b[49m");
+  // And the stripped visible layout is "B\nA" (sanity check on the wrap position).
+  // eslint-disable-next-line no-control-regex -- strip ANSI to assert the visible layout
+  const visible = lastFrame({ trimLines: true })!.replace(/\x1b\[[0-9;]*m/g, "");
+  expect(visible).toBe("B\nA");
+});