Border Healing

When border elements for certain border types are adjacent to each other and appear as if they should "join up", but don't because they belong to different elements, they will be joined up.

from counterweight.app import app
from counterweight.components import component
from counterweight.controls import AnyControl, Quit, Screenshot, ToggleBorderHealing
from counterweight.elements import Div, Text
from counterweight.events import KeyPressed
from counterweight.keys import Key
from counterweight.styles.utilities import *

container_style = grow(1) | align_self_stretch | border_collapse
box_style = grow(1) | align_self_stretch | justify_children_center | align_children_center


def box(s: str) -> Div:
    return Div(
        style=box_style | border_double,
        children=[
            Text(
                style=text_justify_center | text_color("cyan", 500),
                content=s,
            )
        ],
    )


@component
def root() -> Div:
    def on_key(event: KeyPressed) -> AnyControl | None:
        match event.key:
            case Key.Space:
                return ToggleBorderHealing()
            case _:
                return None

    return Div(
        style=row | container_style,
        on_key=on_key,
        children=[
            Div(
                style=col | container_style,
                children=[box("A1"), box("A2")],
            ),
            Div(
                style=col | container_style,
                children=[
                    Div(style=row | container_style, children=[box("B1"), box("B2")]),
                    Div(style=row | container_style, children=[box("C1"), box("C2"), box("C3"), box("C4")]),
                    Div(style=row | container_style, children=[box("D1"), box("D2"), box("D3")]),
                ],
            ),
        ],
    )

With border healing enabled:

With border healing disabled: