fix: skip painting display:none subtrees (closes #21 display-none class)

Adds an early-return guard in paintNode so nodes with DISPLAY_NONE
(already set on their Yoga node) are entirely skipped during paint,
matching Ink's renderNodeToOutput behavior. Without the guard, hidden
text/borders leaked onto visible siblings at x=0.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

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

@@ -32,3 +32,51 @@ test("display none", async () => {
 
 // Skipped: display flex - concurrent
 // Skipped: display none - concurrent
+
+test("display none after visible sibling does not corrupt output", async () => {
+  const { lastFrame } = await render(
+    defineComponent(() => () => (
+      <Box flexDirection="row">
+        <Text>AAA</Text>
+        <Box display="none">
+          <Text>BBBBB</Text>
+        </Box>
+        <Text>ZZ</Text>
+      </Box>
+    )),
+    { columns: 100 },
+  );
+  expect(lastFrame({ trimLines: true })).toBe("AAAZZ");
+});
+
+test("display none multi-line text adds no extra rows", async () => {
+  const { lastFrame } = await render(
+    defineComponent(() => () => (
+      <Box flexDirection="column">
+        <Text>top</Text>
+        <Box display="none">
+          <Text>{"h1\nh2\nh3"}</Text>
+        </Box>
+        <Text>bottom</Text>
+      </Box>
+    )),
+    { columns: 100 },
+  );
+  expect(lastFrame({ trimLines: true })).toBe("top\nbottom");
+});
+
+test("display none box does not paint its border", async () => {
+  const { lastFrame } = await render(
+    defineComponent(() => () => (
+      <Box flexDirection="row">
+        <Text>AAA</Text>
+        <Box display="none" borderStyle="round">
+          <Text>X</Text>
+        </Box>
+        <Text>ZZ</Text>
+      </Box>
+    )),
+    { columns: 100 },
+  );
+  expect(lastFrame({ trimLines: true })).toBe("AAAZZ");
+});

packages/runtime/src/paint/paint.ts

@@ -408,6 +408,12 @@ function paintNode(
   transformers: Transformer[],
   inheritedBg?: string,
 ): void {
+  // display:none — yoga collapses the node to zero size but still reports a
+  // layout; skip painting the subtree entirely (matches Ink's renderNodeToOutput
+  // early-return) so hidden content never leaks onto visible siblings.
+  const yogaNode = (node as { yoga?: { getDisplay?: () => number } }).yoga;
+  if (yogaNode?.getDisplay?.() === Yoga.DISPLAY_NONE) return;
+
   switch (node.type) {
     case "root": {
       for (const child of node.children) paintNode(child, output, x0, y0, transformers);