Selkie.git | xt/snapshots/ | 53-vbox-cross-center.raku

---

use lib 'lib';
use Selkie::Test::Snapshot;
use Selkie::Align;
use Selkie::Layout::VBox;
use Selkie::Widget::Border;
use Selkie::Sizing;

# VBox cross-axis alignment: `align-items => CrossCenter` places every
# child horizontally, `cross-sizing` decides how wide it is.
#
#   * 'full'   — no cross-sizing, so it fills all 30 columns. This is
#                the pane every existing app has, and it must render
#                exactly where it always did.
#   * 'card'   — cross-sizing fixed(14), centred: (30 - 14) / 2 = 8.
#   * 'stamp'  — cross-sizing fixed(10) but align-self CrossEnd, so it
#                ignores the container's rule and sits at column 20.
#
# `gap => 1` is on at the same time, which is the orthogonality check:
# the gutters take rows off the *main* axis while the columns above are
# untouched by them.

my $box = Selkie::Layout::VBox.new(
    sizing      => Sizing.flex,
    gap         => 1,
    align-items => CrossCenter,
);

$box.add: Selkie::Widget::Border.new(title => 'full', sizing => Sizing.fixed(3));
$box.add: Selkie::Widget::Border.new(
    title        => 'card',
    sizing       => Sizing.fixed(3),
    cross-sizing => Sizing.fixed(14),
);
$box.add: Selkie::Widget::Border.new(
    title        => 'stamp',
    sizing       => Sizing.fixed(3),
    cross-sizing => Sizing.fixed(10),
    align-self   => CrossEnd,
);

print render-to-string($box, rows => 11, cols => 30);