Feature Request: Add face and keymap setters for container components (e.g. vui-stack)

[kilesduli]

I've been trying to build a small project using vui.el, and overall it's been very easy and pleasant to work with. The declarative style makes UI composition much more straightforward. Thanks for your work.

However, I ran into a small issue during use. Currently, there doesn't seem to be a way to modify face and keymap at the container level. For example, when using vui-hstack, I can only assign a face to each child component individually. The padding or fill characters inserted by vui-hstack itself cannot be styled or modified.

Is this something you would consider adding in the future?

[d12frosted]

Thanks for the kind words and the great suggestion! You're right — currently there's no way to style the structural elements (spacing, padding, borders) that containers produce.

Here's what I'm thinking:

Face support on containers. Add :face to vui-hstack, vui-vstack, and vui-box. The face applies to the entire rendered region (structural characters + children). Faces cascade from parent to child — a child's face takes priority for attributes it defines and inherits the rest from the container. So a container with :background "gray" gives all children that background unless a child sets its own. Nested containers compose naturally, innermost wins per-attribute.

(vui-hstack :face 'my-panel-face :spacing 2
  (vui-text "Name:")
  (vui-text "Alice" :face 'vui-strong))
;; "Alice" gets panel background + bold foreground

Keymap support on containers. Bindings cascade down the tree — innermost wins, unbound keys fall through to the parent container, then to vui-mode-map. A button's own keymap takes precedence over its container's keymap for keys it defines.

(vui-region :keymap my-section-map
  (vui-vstack
    (vui-text "Section content")
    (vui-button "Action" :keymap my-button-map)))
;; On the button: my-button-map > my-section-map > vui-mode-map
;; On the text: my-section-map > vui-mode-map

Table-specific faces. The table header face is currently hardcoded to bold — this should be customizable via :header-face. Similarly, :border-face for border characters. Default faces would be provided via defface so users can theme them globally.

General-purpose vui-region wrapper. For applying face or keymap to arbitrary content, not just containers:

(vui-region :face 'highlighted :keymap my-map
  (vui-hstack child1 child2))

Global structural faces. defface declarations for common structural elements (indentation, spacing, table borders) so users can theme all containers at once. Per-instance :face props would override these defaults.

Could you share more about your specific use case? Knowing what you're building and which containers you need to style would help prioritize.

[kilesduli]

Thanks for the detailed response.

My use case is relatively simple. I'm trying to add a background highlight after selecting an item from a list. So it's not a very complex scenario. That said, there's no need to prioritize my specific case. Feel free to implement things at your own pace and according to your overall design direction. :)