acme looks like acme; every theme gets acme's button, scroll column and 2px rules

acme takes plan9port's own colours (acme.c iconinit, draw.h): selections
#eeee9e in the body and #9eeeee in the tag, black ink; exec and look sweeps
#aa0000 and #006600, white ink; a #99994c scrollbar under a #ffffea thumb;
black rules; a #8888cc tag/body rule and column button.

Every theme: the grip is acme's button, its tag row's full height, in one
scroll column with the scrollbar (rail_px, 12 at a 17px tagline, scaled,
times GripWidth, a percent, default 150; same x0/x1 to the pixel):
focused clean = solid box; focused dirty = box_dirty filled to a box ring
(acme's modbutton); unfocused clean = a box_border ring round the tag's
ground; unfocused dirty = box_dirty a pixel inside that ring. The grid, which
has no ring, marks dirty with a bold * on box_dirty in the grip's second cell
and fills an unfocused grip halfway to its ring. Regions carry a dirty flag.
Column buttons are the same shape, solid. 2px rules between columns and
stacked panes (inside the tag band's slack), none at the window edge; a 1px
tag/body rule halfway between tag and page.

Theme data: tag_sel_bg, sweep_bg/fg, tag_rule, rule_px, rail_px, box_border,
box_dirty. Chrome: rule_px, tag_rule, rail_px, grip_border, grip_focus_ring;
a comptime guard on Chrome's layout forces a wire bump once v8 ships.
Structural rules are exempt from the focus-indicator rule (docs/effects.md).

Tests: acme widths; stacked rule in the slack at two tagline sizes; every
grip-column pixel is band, button, ring or rule, and the button shares the
scrollbar's x0/x1 (4 metrics x top/bottom x focus x dirty); the four grip
states distinct in every native theme with a non-colour dirty cue in the
grid; wire round-trip of the new fields.

Shared files: src/colors.zig, src/surface.zig, src/body_layer.zig,
src/tagline.zig, src/detached/wire.zig, docs/themes.md, docs/config.md,
docs/effects.md, 21 snapshot goldens (the grip cells only),
test/gui-goldens.txt.

Motion flavours differ by design, and drive notice drops and pane moves

1 files changed, 427 insertions, 34 deletions

diff --git a/src/gui/gui.zig b/src/gui/gui.zig
index d8bae6dc..1a1b1f99 100644
--- a/src/gui/gui.zig
+++ b/src/gui/gui.zig
@@ -2111,7 +2111,13 @@ const Cover = packed struct(u16) {
     focus: bool = false,
     /// At a column's left edge, where a tag's anchor is inset.
     anchor: bool = false,
-    _: u7 = 0,
+    /// In a dirty pane's grip.
+    dirty: bool = false,
+    /// In a pane's grip (not a column's).
+    pane_grip: bool = false,
+    /// In a grip's first row, where its button is.
+    grip_top: bool = false,
+    _: u4 = 0,
 };
 
 /// Marks the grid cells a body or tag layer covers, which the layers paint
@@ -2143,10 +2149,13 @@ fn coverFrame(cover: []Cover, cols: u16, rows: u16, body_layers: []const pardes.
         if (region.kind == .column_grip) bar = region.rect;
     }
     for (regions) |region| switch (region.kind) {
-        .grip => {
+        .grip, .column_grip => {
             mark.rect(cover, cols, rows, region.rect, "grip", true);
             for (0..@min(region.rect.w, 16)) |offset| mark.rect(cover, cols, rows, .{ .x = region.rect.x +| @as(u16, @intCast(offset)), .y = region.rect.y, .w = 1, .h = region.rect.h }, "grip_offset", @as(u4, @intCast(offset)));
-            if (region.active) mark.rect(cover, cols, rows, region.rect, "focus", true);
+            if (region.kind == .grip and region.active) mark.rect(cover, cols, rows, region.rect, "focus", true);
+            if (region.dirty) mark.rect(cover, cols, rows, region.rect, "dirty", true);
+            if (region.kind == .grip) mark.rect(cover, cols, rows, region.rect, "pane_grip", true);
+            mark.rect(cover, cols, rows, .{ .x = region.rect.x, .y = region.rect.y, .w = region.rect.w, .h = @min(1, region.rect.h) }, "grip_top", true);
         },
         .tag => if (region.active) mark.rect(cover, cols, rows, region.rect, "focus", true),
         .column => {
@@ -6022,6 +6031,67 @@ fn anchorInset(g: *const Gui, row: u16, win_h: f32) u32 {
     return taglineBandOffset(row, win_h, g.cell_h, g.tagline_height);
 }
 
+/// acme's Scrollwid column at a pane's or column's left edge, in window
+/// pixels: where its button sits over its scrollbar, one width for both
+/// (`rail_px` at acme's 17px font, scaled with the tagline, and always
+/// short of the cell so the text keeps a gap), right of the column's rule.
+fn scrollColumn(g: *const Gui, chrome: *const pardes.Chrome, col: u16, layout: CellLayout) [2]f32 {
+    const rule: f32 = if (col == 0) 0 else rulePx(chrome);
+    const x0 = @round(@as(f32, @floatFromInt(col)) * layout.w + rule);
+    const scaled: f32 = @round(@as(f32, @floatFromInt(@max(1, chrome.rail_px))) * @as(f32, @floatFromInt(g.tagline_height)) / 17);
+    // The rail and the grip are GUTTER cells wide; the text starts after.
+    const w = std.math.clamp(scaled, 4, @max(4, @floor(layout.w * @as(f32, @floatFromInt(config.GUTTER))) - rule - 3));
+    return .{ x0, x0 + w };
+}
+
+/// acme's button for the grip whose first cell is (col, row), in window
+/// pixels: the scroll column wide, its tag row tall, from the rule above to
+/// the rule below, so button and scrollbar read as one strip.
+fn gripButton(g: *const Gui, chrome: *const pardes.Chrome, col: u16, row: u16, layout: CellLayout, win_h: f32) [4]f32 {
+    _ = win_h;
+    const x = scrollColumn(g, chrome, col, layout);
+    const y0 = @round(@as(f32, @floatFromInt(row)) * layout.h);
+    return .{ x[0], y0, x[1], @round(@as(f32, @floatFromInt(row + 1)) * layout.h) };
+}
+
+/// A pane's button fill, from its region's state, not the grid's cells
+/// (which are drawn for cell shells): dirty, focused, or the tag's ground.
+fn gripFill(chrome: *const pardes.Chrome, focus: bool, dirty: bool) [3]u8 {
+    if (dirty) return chrome.grip_dirty;
+    return if (focus) chrome.grip_focus_ring else chrome.tag_bg;
+}
+
+fn inkOn(bg: [3]u8) [3]u8 {
+    const lum = (@as(u16, bg[0]) * 3 + @as(u16, bg[1]) * 6 + @as(u16, bg[2])) / 10;
+    return if (lum > 140) .{ 0x00, 0x00, 0x00 } else .{ 0xff, 0xff, 0xff };
+}
+
+/// Cuts an instance's quad to a pixel rectangle, its atlas window with it so
+/// the glyph neither moves nor stretches; nothing left, an empty quad.
+fn clipInstance(instance: *CellInstance, r: [4]f32, win_w: f32, win_h: f32) void {
+    const x0 = (instance.x0 + 1) / 2 * win_w;
+    const x1 = (instance.x1 + 1) / 2 * win_w;
+    const y0 = (1 - instance.y0) / 2 * win_h;
+    const y1 = (1 - instance.y1) / 2 * win_h;
+    const left = @max(0, r[0] - x0);
+    const right = @max(0, x1 - r[2]);
+    const top = @max(0, r[1] - y0);
+    const bottom = @max(0, y1 - r[3]);
+    if (x1 - right <= x0 + left or y1 - bottom <= y0 + top) {
+        instance.x1 = instance.x0;
+        instance.y1 = instance.y0;
+        return;
+    }
+    instance.x0 += left / win_w * 2;
+    instance.u0 += left / atlas_w;
+    instance.x1 -= right / win_w * 2;
+    instance.u1 -= right / atlas_w;
+    instance.y0 -= top / win_h * 2;
+    instance.v0 += top / atlas_h;
+    instance.y1 += bottom / win_h * 2;
+    instance.v1 -= bottom / atlas_h;
+}
+
 fn emitSurfaceCell(
     g: *Gui,
     chrome: *const pardes.Chrome,
@@ -6054,33 +6124,82 @@ fn emitSurfaceCell(
         emitInstance(g, instances, next.*, col, row, body_layout, win_w, win_h, track, .body, (&band_base)[0..1], 0, null, old_layer, false, page);
         next.* += 1;
         // Tag glyphs keep their font size inside a full physical-width grip.
-        emitInstance(g, instances, next.*, col, row, body_layout, win_w, win_h, track, .tagline, line, at, cursor, old_layer, is_cursor, page);
+        // A pane's grip cells are the cell shells' form (a dirty `*`): the
+        // button draws its own glyph over a blank of them.
+        var blank = line[at];
+        blank.text[0] = ' ';
+        blank.len = 1;
+        if (here.pane_grip)
+            emitInstance(g, instances, next.*, col, row, body_layout, win_w, win_h, track, .tagline, (&blank)[0..1], 0, null, old_layer, false, page)
+        else
+            emitInstance(g, instances, next.*, col, row, body_layout, win_w, win_h, track, .tagline, line, at, cursor, old_layer, is_cursor, page);
         // A grip's glyph is the cell at its left edge, and a blank one is
         // no glyph: its marks are decor.
         const glyph = &line[at - @min(here.grip_offset, at)];
-        const grip = here.grip and !glyph.default and glyph.printableAscii() != ' ' and !glyph.style.invisible;
+        const grip = here.grip and here.grip_top and !glyph.default and glyph.printableAscii() != ' ' and !glyph.style.invisible;
         const offset: u16 = if (grip) @min(here.grip_offset, at) else 0;
         // An anchor starts at its column's rule: its left edge is inset by
         // its top margin so the band frames it on the left as above and
         // below, and its mark moves right by half that to stay centered.
         const inset: u32 = if (line_cover[at - offset].anchor) anchorInset(g, row, win_h) else 0;
+        // A grip is acme's button: its fill is this cell's ground, cut to
+        // the button (and a dirty one's inset a pixel inside its ring, so
+        // the ring reads round it), its glyph centered in it.
+        const button = if (here.grip and here.grip_top) gripButton(g, chrome, col - @min(here.grip_offset, @as(u16, @intCast(at))), row, body_layout, win_h) else null;
         if (grip) {
             // A grip is one glyph centered across the gutter, not text: it is
             // looked up by its codepoint's glyph, never shaped.
             const drawn = glyphForCodepoint(g, cellCodepoint(glyph));
             const cached = cachedGlyph(g, .{ .face = drawn.face, .glyph = drawn.glyph, .role = .tagline, .decoration = GlyphDecoration.fromCell(glyph), .centered = true });
             const slot = cached orelse g.space_slot;
-            const shift: f32 = if (cached != null) @as(f32, @floatFromInt(@as(u32, offset) * g.cell_w)) - @as(f32, @floatFromInt(inset / 2)) else 0;
+            const b = button.?;
+            const center = (b[0] + b[2]) / 2 - @as(f32, @floatFromInt(col - offset)) * body_layout.w;
+            const shift: f32 = if (cached != null) @as(f32, @floatFromInt(@as(u32, offset) * g.cell_w)) + @as(f32, @floatFromInt(config.GUTTER * g.cell_w)) / 2 - center else 0;
             const resolved = resolveCell(g, glyph[0..1], 0, null, .tagline, false, page);
-            instances[next.*].fr = @as(f32, @floatFromInt(resolved.fg[0])) / 255;
-            instances[next.*].fg = @as(f32, @floatFromInt(resolved.fg[1])) / 255;
-            instances[next.*].fb = @as(f32, @floatFromInt(resolved.fg[2])) / 255;
+            const ink = if (here.pane_grip) inkOn(gripFill(chrome, here.focus, here.dirty)) else resolved.fg;
+            instances[next.*].fr = @as(f32, @floatFromInt(ink[0])) / 255;
+            instances[next.*].fg = @as(f32, @floatFromInt(ink[1])) / 255;
+            instances[next.*].fb = @as(f32, @floatFromInt(ink[2])) / 255;
             instances[next.*].u0 = (@as(f32, @floatFromInt(slot.u)) + shift) / atlas_w;
             instances[next.*].v0 = @as(f32, @floatFromInt(slot.v)) / atlas_h;
             instances[next.*].v1 = @as(f32, @floatFromInt(slot.v + g.tagline_height)) / atlas_h;
         }
         instances[next.*].u1 = instances[next.*].u0 + @as(f32, @floatFromInt(g.cell_w)) / atlas_w;
-        if (inset > 0 and (!grip or offset == 0)) {
+        if (button) |b| {
+            // acme's button fills its tag row from the rule above to the rule
+            // below: the underlay is its fill, cut to its columns; a pane's
+            // from its region's state, not the grid's cell form (whose dirty
+            // `*` is the cell shells'), a column's its cell's own ground.
+            const base = &instances[next.* - 1];
+            const own: [3]f32 = .{ instances[next.*].br, instances[next.*].bg, instances[next.*].bb };
+            if (here.pane_grip) {
+                const fill = gripFill(chrome, here.focus, here.dirty);
+                base.br = @as(f32, @floatFromInt(fill[0])) / 255;
+                base.bg = @as(f32, @floatFromInt(fill[1])) / 255;
+                base.bb = @as(f32, @floatFromInt(fill[2])) / 255;
+            } else {
+                base.br = own[0];
+                base.bg = own[1];
+                base.bb = own[2];
+            }
+            base.effect &= ~clear_bg_bit;
+            clipInstance(base, .{ b[0], -1e9, b[2], 1e9 }, win_w, win_h);
+            // Over it, only its own glyph; the band round it and the ring
+            // are decor (gripDecor).
+            if (here.pane_grip and !grip) {
+                instances[next.*].u0 = @as(f32, @floatFromInt(g.space_slot.u)) / atlas_w;
+                instances[next.*].u1 = instances[next.*].u0 + @as(f32, @floatFromInt(g.cell_w)) / atlas_w;
+                instances[next.*].v0 = @as(f32, @floatFromInt(g.space_slot.v)) / atlas_h;
+                instances[next.*].v1 = @as(f32, @floatFromInt(g.space_slot.v + g.tagline_height)) / atlas_h;
+            }
+            // Its ground is the fill again (a see-through ground would be
+            // written, not blended, in an opaque window).
+            instances[next.*].br = base.br;
+            instances[next.*].bg = base.bg;
+            instances[next.*].bb = base.bb;
+            instances[next.*].effect &= ~clear_bg_bit;
+            clipInstance(&instances[next.*], b, win_w, win_h);
+        } else if (inset > 0) {
             instances[next.*].x0 += @as(f32, @floatFromInt(inset)) / win_w * 2;
             instances[next.*].u0 += @as(f32, @floatFromInt(inset)) / atlas_w;
         }
@@ -6091,6 +6210,102 @@ fn emitSurfaceCell(
     next.* += 1;
 }
 
+test "every pixel of a grip column is band, button or ring, and the button sits over the scrollbar" {
+    const gpa = std.testing.allocator;
+    const core = try pardes.Pardes.init(gpa, .{ .cols = 60, .rows = 20 });
+    defer core.deinit();
+    const pane = try core.setTestFile("text\n" ** 60);
+    pane.tag.own = try gpa.dupe(u8, "second\nthird");
+    core.newScratchBelow(0);
+    for ([_]struct { w: u32, h: u32, tag: u32 }{ .{ .w = 10, .h = 20, .tag = 12 }, .{ .w = 17, .h = 35, .tag = 30 }, .{ .w = 9, .h = 19, .tag = 15 }, .{ .w = 12, .h = 24, .tag = 24 } }) |m| for ([_]bool{ false, true }) |bottom| for ([_]usize{ 0, 1 }) |focus| for ([_]bool{ false, true }) |dirty| {
+        core.settings.tag_bottom = bottom;
+        core.active = focus;
+        pane.file.?.revision = pane.file.?.saved_revision + @intFromBool(dirty);
+        pardes.test_api.sync(core);
+        const s = try core.render(core.scratch.allocator());
+        var g: Gui = undefined;
+        g.words = .{};
+        g.decor = .empty;
+        defer g.decor.deinit(gpa);
+        g.cell_w = m.w;
+        g.cell_h = m.h;
+        g.tagline_width = m.w;
+        g.tagline_height = m.tag;
+        g.space_slot = .{ .u = 0, .v = 0 };
+        const layout = fixedCellLayout(&g);
+        const win_w: f32 = @floatFromInt(60 * m.w);
+        const win_h: f32 = @floatFromInt(20 * m.h);
+        const cover = try gpa.alloc(Cover, @as(usize, s.cols) * s.rows);
+        defer gpa.free(cover);
+        coverFrame(cover, s.cols, s.rows, s.bodyLayers(), s.tagLayers(), s.regionList());
+        var groups = makeGroups(&.{}, false);
+        try buildDecor(&g, gpa, s, &groups, layout, win_w, win_h, true);
+        const grip = s.region(.grip, 0).?;
+        // The grip column's pixels, band first, then its cells, then decor.
+        const x_px: u32 = grip.rect.x * m.w;
+        const w_px: u32 = config.GUTTER * m.w;
+        const y_px: u32 = grip.rect.y * m.h;
+        const h_px: u32 = grip.rect.h * m.h;
+        const pixels = try gpa.alloc(?[3]f32, w_px * h_px);
+        defer gpa.free(pixels);
+        @memset(pixels, null);
+        const paint = struct {
+            fn quad(into: []?[3]f32, x0n: f32, y0n: f32, x1n: f32, y1n: f32, rgb: [3]f32, ww: f32, wh: f32, ox: u32, oy: u32, pw: u32, ph: u32) void {
+                const px0: i64 = @intFromFloat(@round((x0n + 1) / 2 * ww));
+                const px1: i64 = @intFromFloat(@round((x1n + 1) / 2 * ww));
+                const py0: i64 = @intFromFloat(@round((1 - y0n) / 2 * wh));
+                const py1: i64 = @intFromFloat(@round((1 - y1n) / 2 * wh));
+                var y = @max(py0, oy);
+                while (y < @min(py1, oy + ph)) : (y += 1) {
+                    var x = @max(px0, ox);
+                    while (x < @min(px1, ox + pw)) : (x += 1) into[@intCast((y - oy) * pw + (x - ox))] = rgb;
+                }
+            }
+        };
+        var instances: [4]CellInstance = undefined;
+        for (0..grip.rect.h) |line| for (0..config.GUTTER) |dx| {
+            const col: u16 = grip.rect.x + @as(u16, @intCast(dx));
+            const row: u16 = grip.rect.y + @as(u16, @intCast(line));
+            const at = @as(usize, row) * s.cols;
+            var next: u32 = 0;
+            emitSurfaceCell(&g, &s.chrome, &instances, &next, col, row, layout, win_w, win_h, null, s.cells[at..][0..s.cols], cover[at..][0..s.cols], col, null, false, false, Ground.opaqueRgb(bg_default));
+            for (instances[0..next]) |i| paint.quad(pixels, i.x0, i.y0, i.x1, i.y1, .{ i.br, i.bg, i.bb }, win_w, win_h, x_px, y_px, w_px, h_px);
+        };
+        for (g.decor.items) |i| if (i.fr >= 1 and i.clip_x1 < i.clip_x0) paint.quad(pixels, i.x0, i.y0, i.x1, i.y1, .{ i.br, i.bg, i.bb }, win_w, win_h, x_px, y_px, w_px, h_px);
+        const rgb = struct {
+            fn of(v: [3]u8) [3]f32 {
+                return .{ @as(f32, @floatFromInt(v[0])) / 255, @as(f32, @floatFromInt(v[1])) / 255, @as(f32, @floatFromInt(v[2])) / 255 };
+            }
+        }.of;
+        const chrome = &s.chrome;
+        const band = if (focus == 0) chrome.tag_focus_bg else chrome.tag_bg;
+        // Band, fills, rings, the rules between stacked panes and under the
+        // tag, and the mode marks' ink (the grip's first cell's).
+        const ink = inkOn(gripFill(chrome, grip.active, grip.dirty));
+        const allowed = [_][3]f32{ rgb(band), rgb(core.chromeTheme().box), rgb(pardes.draw.boxDirty(core)), rgb(chrome.grip_border), rgb(chrome.grip_focus_ring), rgb(chrome.border), rgb(ink), rgb(chrome.tag_rule orelse mixRgb(chrome.tag_bg, chrome.page orelse bg_default)) };
+        for (pixels, 0..) |pixel, n| {
+            const got = pixel orelse return error.TestUnpaintedGripPixel;
+            const known = for (allowed) |a| {
+                if (std.meta.eql(a, got)) break true;
+            } else false;
+            // Under the first row there is no button: band and rules only.
+            if (n / w_px >= m.h and n / w_px < h_px - 1 and !std.meta.eql(got, rgb(band)) and !std.meta.eql(got, rgb(chrome.border)))
+                return error.TestButtonUnderFirstRow;
+            if (!known) std.debug.print("sliver {any} at {d},{d} of {d}x{d} (metrics {d}x{d}/{d}, bottom {}, focus {d}, dirty {}) page {any}\n", .{ got, n % w_px, n / w_px, w_px, h_px, m.w, m.h, m.tag, bottom, focus, dirty, s.chrome.page });
+            try std.testing.expect(known);
+        }
+        // The rule under the tag runs unbroken across the grip column.
+        if (!bottom) for (pixels[(h_px - 1) * w_px ..][0..w_px]) |pixel|
+            try std.testing.expectEqual(rgb(chrome.tag_rule orelse mixRgb(chrome.tag_bg, chrome.page orelse bg_default)), pixel.?);
+        // The button's edges are the scrollbar's.
+        const button = gripButton(&g, chrome, grip.rect.x, grip.rect.y, layout, win_h);
+        const column = scrollColumn(&g, chrome, s.region(.rail, 0).?.rect.x, layout);
+        try std.testing.expectEqual(column[0], button[0]);
+        try std.testing.expectEqual(column[1], button[2]);
+    };
+    pane.file.?.revision = pane.file.?.saved_revision;
+}
+
 test "small tagline fonts leave no background gutters between adjacent tags" {
     const chrome: pardes.Chrome = .{};
     var g: Gui = undefined;
@@ -6778,9 +6993,9 @@ test "pane indicator halves share dissolve changes and safe exhausted atlas" {
     try std.testing.expect(gripCellChanged(&surface, &cover, &previous_cover, 1, 0));
     try std.testing.expect(!gripCellChanged(&surface, &cover, &previous_cover, 2, 0));
     try std.testing.expect(!cover[2].grip);
-    // A column's grip has no glyph of a pane's.
+    // A column's grip is a button too, cut the same way (it has no glyph).
     coverFrame(&cover, 6, 2, &.{}, &.{}, &.{.{ .kind = .column_grip, .rect = .{ .x = 0, .y = 0, .w = 2, .h = 1 } }});
-    try std.testing.expect(!cover[0].grip);
+    try std.testing.expect(cover[0].grip);
     coverFrame(&cover, 6, 2, &.{}, &.{}, &grip);
     const chrome: pardes.Chrome = .{};
 
@@ -7714,6 +7929,12 @@ fn buildDecor(g: *Gui, gpa: std.mem.Allocator, surface: *const pardes.Surface, g
     for (groups.items[0..groups.len], 0..) |*group, index| {
         group.decor_start = @intCast(g.decor.items.len);
         defer group.decor_count = @as(u32, @intCast(g.decor.items.len)) - group.decor_start;
+        // The grips' buttons before any rule: the rules over their rows cut
+        // them, and the band round them never covers a rule.
+        if (index <= groups.tracks) {
+            const closing = if (group.track) |active| active.phase == .closing else false;
+            try gripDecor(g, gpa, if (closing) surface.previous_regions else regions, if (closing) surface.previous_cells else surface.cells, groups, index, chrome, layout, surface.cols, surface.rows, win_w, win_h, group.track);
+        }
         if (index == 0) {
             const top = for (regions) |region| {
                 if (region.kind == .workspace_tag) break region.rect.h;
@@ -7723,7 +7944,8 @@ fn buildDecor(g: *Gui, gpa: std.mem.Allocator, surface: *const pardes.Surface, g
                 .grip, .tag, .column_grip, .column_tag => if (region.rect.y == top) break true,
                 else => {},
             } else false;
-            const height = topbarPaneBorderPixels(g.cell_h, g.tagline_height);
+            // As wide as the other rules, where the tagline leaves the room.
+            const height: u32 = @max(1, @min(chrome.rule_px, (g.cell_h -| g.tagline_height) * 2));
             if (top != 0 and top < surface.rows and tag_under and height != 0) {
                 const y0: f32 = @floatFromInt(top * g.cell_h - height / 2);
                 try addDecor(g, gpa, 0, y0, win_w, y0 + @as(f32, @floatFromInt(height)), chrome.topbar_rule, 1, null, win_w, win_h);
@@ -7732,7 +7954,7 @@ fn buildDecor(g: *Gui, gpa: std.mem.Allocator, surface: *const pardes.Surface, g
             for (regions) |bar| {
                 if (bar.kind != .column_grip) continue;
                 const y = @as(f32, @floatFromInt(bar.rect.y + bar.rect.h)) * layout.h;
-                try addDecor(g, gpa, 0, y - 1, win_w, y, chrome.border, 1, null, win_w, win_h);
+                try addDecor(g, gpa, 0, y - rulePx(chrome), win_w, y, chrome.border, 1, null, win_w, win_h);
                 break;
             }
             // A tag on the last row runs on through the pixels under the grid.
@@ -7756,7 +7978,6 @@ fn buildDecor(g: *Gui, gpa: std.mem.Allocator, surface: *const pardes.Surface, g
                 nbodies += 1;
             };
             const bodies = body_buf[0..nbodies];
-            const grid = if (closing) surface.previous_cells else surface.cells;
             try paneDecor(g, gpa, placed, groups, index, chrome, layout, surface.cols, surface.rows, win_w, win_h, track);
             // A single spine runs down each column, through every tag and body.
             if (index == 0) for (regions) |column| {
@@ -7765,9 +7986,10 @@ fn buildDecor(g: *Gui, gpa: std.mem.Allocator, surface: *const pardes.Surface, g
                 const y0 = @as(f32, @floatFromInt(column.rect.y)) * layout.h;
                 const grid_y1 = @as(f32, @floatFromInt(surface.rows)) * layout.h;
                 const y1 = if (win_h - grid_y1 < layout.h) @max(grid_y1, win_h) else grid_y1;
-                if (y1 > y0) try addDecor(g, gpa, x, y0, x + 1, y1, chrome.border, 1, null, win_w, win_h);
+                // None at the window's edge: nothing to rule apart there.
+                if (column.rect.x == 0) continue;
+                if (y1 > y0) try addDecor(g, gpa, x, y0, x + rulePx(chrome), y1, chrome.border, 1, null, win_w, win_h);
             };
-            try gripDecor(g, gpa, placed, grid, groups, index, layout, surface.cols, surface.rows, win_w, win_h, track);
             // Cast last in the group, over its cells, images and chrome: a
             // lifted pane's shadow darkens its neighbours' rails and rules
             // as it darkens their text, and never the pane itself.
@@ -7837,47 +8059,210 @@ fn paneDecor(g: *Gui, gpa: std.mem.Allocator, regions: []const pardes.Region, gr
         const rule_x1 = if (win_w - x1 < layout.w) @max(x1, win_w) else x1;
         const tag_bottom = tag.rect.y > rail.rect.y;
         const rule_y = @as(f32, @floatFromInt(if (tag_bottom) tag.rect.y else tag.rect.y + tag.rect.h)) * layout.h;
-        try addDecor(g, gpa, x0, if (tag_bottom) rule_y else rule_y - 1, rule_x1, if (tag_bottom) rule_y + 1 else rule_y, chrome.border, 1, track, win_w, win_h);
+        try addDecor(g, gpa, x0, if (tag_bottom) rule_y else rule_y - 1, rule_x1, if (tag_bottom) rule_y + 1 else rule_y, chrome.tag_rule orelse mixRgb(chrome.tag_bg, page), 1, track, win_w, win_h);
+        // Stacked panes are ruled apart as columns are, where one pane's
+        // body meets the next one's tag (acme's Border).
+        {
+            const pane_top = @min(tag.rect.y, rail.rect.y);
+            const stacked = for (regions) |other| {
+                if ((other.kind == .body or other.kind == .tag) and other.owner != rail.owner and other.rect.y + other.rect.h == pane_top and
+                    other.rect.x < tag.rect.x + tag.rect.w and tag.rect.x < other.rect.x + other.rect.w) break true;
+            } else false;
+            // Inside the tag band's slack, never over its glyphs: the top
+            // slack of a tag on top, the bottom slack of the one above when
+            // tags are at the bottom; a pixel at least.
+            const y = @as(f32, @floatFromInt(pane_top)) * layout.h;
+            const spare = g.cell_h -| g.tagline_height;
+            if (stacked and !tag_bottom) {
+                const room = taglineBandOffset(pane_top, win_h, g.cell_h, g.tagline_height);
+                try addDecor(g, gpa, x0, y, rule_x1, y + @as(f32, @floatFromInt(@max(1, @min(chrome.rule_px, room)))), chrome.border, 1, track, win_w, win_h);
+            } else if (stacked and pane_top > 0) {
+                const room = spare - taglineBandOffset(pane_top - 1, win_h, g.cell_h, g.tagline_height);
+                try addDecor(g, gpa, x0, y - @as(f32, @floatFromInt(@max(1, @min(chrome.rule_px, room)))), rule_x1, y, chrome.border, 1, track, win_w, win_h);
+            }
+        }
 
         const y0 = @as(f32, @floatFromInt(rail.rect.y)) * layout.h;
         const body_end = rail.rect.y + rail.rect.h;
         const body_y1 = @as(f32, @floatFromInt(body_end)) * layout.h;
         const y1 = if (body_end == rows and win_h - body_y1 < layout.h) @max(body_y1, win_h) else body_y1;
+        // A theme's own track fills its width, the thumb one pixel short
+        // of it so the track edges it (acme's scrollbar); else a thin rail.
+        // acme's scrollbar: the track fills the scroll column, under the
+        // grip's button; the thumb is a pixel short of its right edge, so
+        // the track edges it.
+        const column = scrollColumn(g, chrome, rail.rect.x, layout);
         try addDecor(g, gpa, x0, y0, x0 + layout.w, y1, page, 1, track, win_w, win_h);
-        try addDecor(g, gpa, x0, y0, x0 + @min(layout.w, 2), y1, chrome.scroll_track, 1, track, win_w, win_h);
+        try addDecor(g, gpa, column[0], y0, column[1], y1, chrome.scroll_track, 1, track, win_w, win_h);
         if (rail.thumb_h != 0) {
             const thumb_y0 = @as(f32, @floatFromInt(rail.rect.y + rail.thumb_y)) * layout.h;
             const thumb_y1 = if (rail.thumb_y + rail.thumb_h == rail.rect.h) y1 else @as(f32, @floatFromInt(rail.rect.y + rail.thumb_y + rail.thumb_h)) * layout.h;
-            try addDecor(g, gpa, x0, thumb_y0, x0 + @min(layout.w, @max(2, @floor(layout.w * 0.5))), thumb_y1, chrome.scroll_thumb, 1, track, win_w, win_h);
+            try addDecor(g, gpa, column[0], thumb_y0, column[1] - 1, thumb_y1, chrome.scroll_thumb, 1, track, win_w, win_h);
         }
     }
 }
 
+/// Halfway between two colours.
+fn mixRgb(a: [3]u8, b: [3]u8) [3]u8 {
+    var out: [3]u8 = undefined;
+    for (&out, a, b) |*o, x, y| o.* = @intCast((@as(u16, x) + y) / 2);
+    return out;
+}
+
+/// A rule's width: the theme's own, or one pixel.
+fn rulePx(chrome: *const pardes.Chrome) f32 {
+    return @floatFromInt(@max(1, chrome.rule_px));
+}
+
 /// The two short bars on each row of a grip with no mode glyph there,
 /// centered in its anchor. Only the panes of group `index`.
-fn gripDecor(g: *Gui, gpa: std.mem.Allocator, regions: []const pardes.Region, cells: []const pardes.Cell, groups: *const Groups, index: usize, layout: CellLayout, cols: u16, rows: u16, win_w: f32, win_h: f32, track: ?pardes.animation.Track) !void {
+fn gripDecor(g: *Gui, gpa: std.mem.Allocator, regions: []const pardes.Region, cells: []const pardes.Cell, groups: *const Groups, index: usize, chrome: *const pardes.Chrome, layout: CellLayout, cols: u16, rows: u16, win_w: f32, win_h: f32, track: ?pardes.animation.Track) !void {
     if (g.tagline_height < 6 or g.tagline_width < 3) return;
     for (regions) |grip| {
-        if (grip.kind != .grip or groupOf(groups, grip.serial) != index) continue;
+        if ((grip.kind != .grip and grip.kind != .column_grip) or groupOf(groups, grip.serial) != index) continue;
+        if (grip.rect.h == 0 or grip.rect.y >= rows) continue;
+        const button = gripButton(g, chrome, grip.rect.x, grip.rect.y, layout, win_h);
+        // Round the button, its first row is the tag's band: nothing of the
+        // cells under it shows there.
+        const band = if (grip.active) chrome.tag_focus_bg else chrome.tag_bg;
+        const left = @as(f32, @floatFromInt(grip.rect.x)) * layout.w;
+        const right = @as(f32, @floatFromInt(grip.rect.x + grip.rect.w)) * layout.w;
+        try addDecor(g, gpa, left, button[1], button[0], button[3], band, 1, track, win_w, win_h);
+        try addDecor(g, gpa, button[2], button[1], right, button[3], band, 1, track, win_w, win_h);
+        if (grip.kind != .grip) continue;
+        // acme's button ring, two pixels (ButtonBorder) inside the button:
+        // the focused one's in its own fill. An unfocused dirty one keeps a
+        // pixel of band inside its ring, so the four states differ in shape
+        // whatever a theme's colours (a focused dirty one is acme's
+        // modbutton, filled up to its ring).
+        {
+            // The rules drawn over the row (paneDecor, after this) cut into
+            // it: the ring runs inside them, from rule to rule.
+            const tag = for (regions) |part| {
+                if (part.kind == .tag and part.owner == grip.owner) break part;
+            } else grip;
+            const tag_bottom = for (regions) |part| {
+                if (part.kind == .rail and part.owner == grip.owner) break part.rect.y < tag.rect.y;
+            } else false;
+            const stacked = !tag_bottom and for (regions) |other| {
+                if ((other.kind == .body or other.kind == .tag) and other.owner != grip.owner and other.rect.y + other.rect.h == grip.rect.y and
+                    other.rect.x < tag.rect.x + tag.rect.w and tag.rect.x < other.rect.x + other.rect.w) break true;
+            } else false;
+            const top_rule: f32 = if (tag_bottom) 1 else if (stacked) @floatFromInt(@max(1, @min(chrome.rule_px, taglineBandOffset(grip.rect.y, win_h, g.cell_h, g.tagline_height)))) else 0;
+            const bottom_rule: f32 = if (!tag_bottom and grip.rect.h == 1) 1 else 0;
+            const x0 = button[0];
+            const x1 = button[2];
+            const y0 = button[1] + top_rule;
+            const y1 = button[3] - bottom_rule;
+            const ring = if (grip.active) chrome.grip_focus_ring else chrome.grip_border;
+            try addDecor(g, gpa, x0, y0, x1, y0 + 2, ring, 1, track, win_w, win_h);
+            try addDecor(g, gpa, x0, y1 - 2, x1, y1, ring, 1, track, win_w, win_h);
+            try addDecor(g, gpa, x0, y0 + 2, x0 + 2, y1 - 2, ring, 1, track, win_w, win_h);
+            try addDecor(g, gpa, x1 - 2, y0 + 2, x1, y1 - 2, ring, 1, track, win_w, win_h);
+            if (grip.dirty and !grip.active) {
+                try addDecor(g, gpa, x0 + 2, y0 + 2, x1 - 2, y0 + 3, band, 1, track, win_w, win_h);
+                try addDecor(g, gpa, x0 + 2, y1 - 3, x1 - 2, y1 - 2, band, 1, track, win_w, win_h);
+                try addDecor(g, gpa, x0 + 2, y0 + 3, x0 + 3, y1 - 3, band, 1, track, win_w, win_h);
+                try addDecor(g, gpa, x1 - 3, y0 + 3, x1 - 2, y1 - 3, band, 1, track, win_w, win_h);
+            }
+        }
         const x = grip.rect.x;
         for (0..grip.rect.h) |line| {
             const y = grip.rect.y + @as(u16, @intCast(line));
             if (x >= cols or y >= rows) continue;
             const cell = &cells[@as(usize, y) * cols + x];
             if (cell.default or cell.printableAscii() != ' ') continue;
-            const rgb = switch (cell.style.fg) {
-                .rgb => |rgb| rgb,
-                else => continue,
-            };
-            const center_x = (@as(f32, @floatFromInt(x)) + @as(f32, @floatFromInt(config.GUTTER)) / 2) * layout.w + @as(f32, @floatFromInt(anchorInset(g, y, win_h) / 2));
+            // The marks are in the button's ink, from the region's state.
+            const rgb = inkOn(gripFill(chrome, grip.active, grip.dirty));
+            // The marks are the first row's alone, centered in the button.
+            if (line != 0) continue;
+            const center_x = @floor((button[0] + button[2]) / 2);
             const center_y = @as(f32, @floatFromInt(y)) * layout.h + @as(f32, @floatFromInt(taglineBandOffset(y, win_h, g.cell_h, g.tagline_height))) + @as(f32, @floatFromInt(g.tagline_height)) / 2;
-            const half_w = @max(1, @min(3, layout.w - 2));
+            const half_w = @max(1, @min(3, @floor((button[2] - button[0] - 6) / 2)));
             try addDecor(g, gpa, @floor(center_x - half_w), @floor(center_y - 2), @floor(center_x + half_w), @floor(center_y - 1), rgb, 1, track, win_w, win_h);
             try addDecor(g, gpa, @floor(center_x - half_w), @floor(center_y + 1), @floor(center_x + half_w), @floor(center_y + 2), rgb, 1, track, win_w, win_h);
         }
     }
 }
 
+test "a theme's own rules and scrollbar are drawn at its widths: acme's 2px black rules and 12px track" {
+    const gpa = std.testing.allocator;
+    const core = try pardes.Pardes.init(gpa, .{ .cols = 80, .rows = 24 });
+    defer core.deinit();
+    _ = try core.newShell(1, "");
+    try std.testing.expect(pardes.layout.splitColumn(core, 0, 1, false));
+    try std.testing.expect(core.executeBuiltinLine(0, "Theme acme"));
+    for (0..40) |_| core.update(.tick);
+    pardes.test_api.sync(core);
+    const s = try core.render(core.scratch.allocator());
+    try std.testing.expectEqual(@as(u8, 2), s.chrome.rule_px);
+    // acme's 12px, at GripWidth's 150% default.
+    try std.testing.expectEqual(@as(u8, 18), s.chrome.rail_px);
+    var g: Gui = undefined;
+    g.decor = .empty;
+    defer g.decor.deinit(gpa);
+    g.cell_w = 16;
+    g.cell_h = 20;
+    g.tagline_width = 10;
+    g.tagline_height = 12;
+    var groups = makeGroups(&.{}, false);
+    try buildDecor(&g, gpa, s, &groups, fixedCellLayout(&g), 1280, 480, true);
+    const px = struct {
+        fn w(item: CellInstance) f32 {
+            return (item.x1 - item.x0) / 2 * 1280;
+        }
+    };
+    var spines: usize = 0;
+    var tracks: usize = 0;
+    for (g.decor.items) |item| {
+        const black = item.br == 0 and item.bg == 0 and item.bb == 0;
+        // No rule at the window's left edge; one 2px spine where columns meet.
+        if (black and @abs(px.w(item) - 2) < 0.01 and item.y1 < -0.9) {
+            try std.testing.expect(item.x0 > -1);
+            spines += 1;
+        }
+        const column = scrollColumn(&g, &s.chrome, 40, fixedCellLayout(&g));
+        if (@abs(item.br - @as(f32, 0x99) / 255) < 1e-3 and @abs(item.bb - @as(f32, 0x4c) / 255) < 1e-3 and @abs(px.w(item) - (column[1] - column[0])) < 0.01) tracks += 1;
+    }
+    try std.testing.expectEqual(@as(usize, 1), spines);
+    try std.testing.expect(tracks >= 2);
+}
+
+test "the rule between stacked panes stays in the tag band's slack, at any tagline size" {
+    const gpa = std.testing.allocator;
+    const core = try pardes.Pardes.init(gpa, .{ .cols = 80, .rows = 24 });
+    defer core.deinit();
+    _ = try core.newShell(1, "");
+    core.newScratchBelow(0);
+    pardes.test_api.sync(core);
+    const s = try core.render(core.scratch.allocator());
+    const lower = for (s.regionList()) |region| {
+        if (region.kind == .tag and region.rect.y > 2) break region;
+    } else return error.TestExpectedStackedTag;
+    for ([_]u32{ 12, 20 }) |tagline_h| {
+        var g: Gui = undefined;
+        g.decor = .empty;
+        defer g.decor.deinit(gpa);
+        g.cell_w = 10;
+        g.cell_h = 20;
+        g.tagline_width = 6;
+        g.tagline_height = tagline_h;
+        var groups = makeGroups(&.{}, false);
+        try buildDecor(&g, gpa, s, &groups, fixedCellLayout(&g), 800, 480, true);
+        const top = @as(f32, @floatFromInt(lower.rect.y)) * 20;
+        const slack: f32 = @floatFromInt(@max(1, pardes.taglineBandOffset(lower.rect.y, 480, 20, tagline_h)));
+        var found = false;
+        for (g.decor.items) |item| {
+            const y0 = (1 - item.y0) / 2 * 480;
+            const y1 = (1 - item.y1) / 2 * 480;
+            if (@abs(y0 - top) > 0.01 or @abs(item.br - @as(f32, @floatFromInt(s.chrome.border[0])) / 255) > 1e-3) continue;
+            found = true;
+            try std.testing.expect(y1 - y0 <= slack + 0.01);
+        }
+        try std.testing.expect(found);
+    }
+}
+
 test "decor is read from the regions, each pane's in its own group" {
     const gpa = std.testing.allocator;
     const core = try pardes.Pardes.init(gpa, .{ .cols = 80, .rows = 24 });
@@ -7905,15 +8290,23 @@ test "decor is read from the regions, each pane's in its own group" {
     // workspace tag; a rail two pixels wide at each pane's.
     for (core.col_x[0..core.ncol]) |x| {
         const left = ndc.x(@as(f32, @floatFromInt(x)) * 10);
+        // Two pixels (rule_px), and none at the window's own edge.
         const spine = for (g.decor.items) |item| {
-            if (item.x0 == left and @abs(item.x1 - ndc.x(@as(f32, @floatFromInt(x)) * 10 + 1)) < 0.0001) break item;
-        } else return error.TestExpectedSpine;
-        try std.testing.expectApproxEqAbs(@as(f32, 1 - 20.0 / 480.0 * 2), spine.y0, 0.0001);
-        try std.testing.expectEqual(@as(f32, -1), spine.y1);
+            if (item.x0 == left and @abs(item.x1 - ndc.x(@as(f32, @floatFromInt(x)) * 10 + 2)) < 0.0001 and
+                @abs(item.y0 - (1 - 20.0 / 480.0 * 2)) < 0.0001 and std.mem.eql(f32, &.{ item.br, item.bg, item.bb }, &.{ @as(f32, @floatFromInt(s.chrome.border[0])) / 255, @as(f32, @floatFromInt(s.chrome.border[1])) / 255, @as(f32, @floatFromInt(s.chrome.border[2])) / 255 })) break item;
+        } else null;
+        try std.testing.expectEqual(x == 0, spine == null);
+        if (spine) |rule| {
+            try std.testing.expectApproxEqAbs(@as(f32, 1 - 20.0 / 480.0 * 2), rule.y0, 0.0001);
+            try std.testing.expectEqual(@as(f32, -1), rule.y1);
+        }
+        // The scrollbar fills the scroll column right of the rule.
+        const column = scrollColumn(&g, &s.chrome, x, layout);
         const rail = for (g.decor.items) |item| {
-            if (item.x0 == left and @abs(item.x1 - ndc.x(@as(f32, @floatFromInt(x)) * 10 + 2)) < 0.0001) break item;
+            if (@abs(item.x0 - ndc.x(column[0])) < 0.0001 and @abs(item.x1 - ndc.x(column[1])) < 0.0001 and
+                @abs(item.br - @as(f32, @floatFromInt(s.chrome.scroll_track[0])) / 255) < 0.0001) break item;
         } else return error.TestExpectedRail;
-        try std.testing.expectApproxEqAbs(@as(f32, s.chrome.scroll_track[0]) / 255, rail.br, 0.0001);
+        _ = rail;
     }
     try std.testing.expectEqual(@as(u32, 0), groups.items[groups.notices].decor_count);
     const still = groups.items[0].decor_count;