ContainerBox uses slices.Remove correctly

The convention within Tomo is that On*Change events only fire when
the user interacts with something

go.mod

@@ -1,10 +1,13 @@
 module git.tebibyte.media/tomo/backend
 
-go 1.20
+go 1.21.0
+
+toolchain go1.22.2
 
 require (
-	git.tebibyte.media/tomo/tomo v0.36.0
+	git.tebibyte.media/sashakoshka/goutil v0.3.0
-	git.tebibyte.media/tomo/typeset v0.7.1
+	git.tebibyte.media/tomo/tomo v0.48.0
+	git.tebibyte.media/tomo/typeset v0.8.0
 	git.tebibyte.media/tomo/xgbkb v1.0.1
 	github.com/jezek/xgb v1.1.1
 	github.com/jezek/xgbutil v0.0.0-20231116234834-47f30c120111

go.sum

@@ -1,8 +1,10 @@
+git.tebibyte.media/sashakoshka/goutil v0.3.0 h1:dcZ/9/or7m8eTpf2B1Pu4CscplXh2INTXFartz+ExwE=
+git.tebibyte.media/sashakoshka/goutil v0.3.0/go.mod h1:e1OXLa+wX7x/F8n8gyxz2hnfVCEkWzGrZNX8/k/lR/M=
 git.tebibyte.media/sashakoshka/xgbkb v1.0.0/go.mod h1:pNcE6TRO93vHd6q42SdwLSTTj25L0Yzggz7yLe0JV6Q=
-git.tebibyte.media/tomo/tomo v0.36.0 h1:V9vyPYb4kpUceBhcDF/XyLDACzE5lY8kYEGHAkIsqs0=
+git.tebibyte.media/tomo/tomo v0.48.0 h1:AE21ElHwUSPsX82ZWCnoNxJFi9Oswyd3dPDPMbxTueQ=
-git.tebibyte.media/tomo/tomo v0.36.0/go.mod h1:C9EzepS9wjkTJjnZaPBh22YvVPyA4hbBAJVU20Rdmps=
+git.tebibyte.media/tomo/tomo v0.48.0/go.mod h1:WrtilgKB1y8O2Yu7X4mYcRiqOlPR8NuUnoA/ynkQWrs=
-git.tebibyte.media/tomo/typeset v0.7.1 h1:aZrsHwCG5ZB4f5CruRFsxLv5ezJUCFUFsQJJso2sXQ8=
+git.tebibyte.media/tomo/typeset v0.8.0 h1:4qA6oW4/3oPHj6/Zrp+JFJ53OmFSDvxs+J6BhO3DW00=
-git.tebibyte.media/tomo/typeset v0.7.1/go.mod h1:PwDpSdBF3l/EzoIsa2ME7QffVVajnTHZN6l3MHEGe1g=
+git.tebibyte.media/tomo/typeset v0.8.0/go.mod h1:PwDpSdBF3l/EzoIsa2ME7QffVVajnTHZN6l3MHEGe1g=
 git.tebibyte.media/tomo/xgbkb v1.0.1 h1:b3HDUopjdQp1MZrb5Vpil4bOtk3NnNXtfQW27Blw2kE=
 git.tebibyte.media/tomo/xgbkb v1.0.1/go.mod h1:P5Du0yo5hUsojchW08t+Mds0XPIJXwMi733ZfklzjRw=
 github.com/BurntSushi/freetype-go v0.0.0-20160129220410-b763ddbfe298 h1:1qlsVAQJXZHsaM8b6OLVo6muQUQd4CwkH/D3fnnbHXA=

internal/system/attribute.go

@@ -0,0 +1,70 @@
+package system
+
+import "git.tebibyte.media/tomo/tomo"
+import "git.tebibyte.media/sashakoshka/goutil/container"
+
+type attrHierarchy [T tomo.Attr] struct {
+	fallback T
+	style    ucontainer.Optional[T]
+	user     ucontainer.Optional[T]
+}
+
+func (this *attrHierarchy[T]) SetFallback (fallback T) {
+	this.fallback = fallback
+}
+
+func (this *attrHierarchy[T]) SetStyle (style T) (different bool) {
+	styleEquals := false
+	if previous, ok := this.style.Value(); ok {
+		styleEquals = previous.Equals(style)
+	}
+	this.style.Set(style)
+	return !styleEquals && !this.user.Exists()
+}
+
+func (this *attrHierarchy[T]) UnsetStyle () (different bool) {
+	different = this.style.Exists()
+	this.style.Unset()
+	return different
+}
+
+func (this *attrHierarchy[T]) SetUser (user T) (different bool) {
+	userEquals := false
+	if previous, ok := this.user.Value(); ok {
+		userEquals = previous.Equals(user)
+	}
+	this.user.Set(user)
+	return !userEquals
+}
+
+func (this *attrHierarchy[T]) UnsetUser () (different bool) {
+	different = this.user.Exists()
+	this.user.Unset()
+	return different
+}
+
+func (this *attrHierarchy[T]) Set (attr T, user bool) (different bool) {
+	if user {
+		return this.SetUser(attr)
+	} else {
+		return this.SetStyle(attr)
+	}
+}
+
+func (this *attrHierarchy[T]) Unset (user bool) (different bool) {
+	if user {
+		return this.UnsetUser()
+	} else {
+		return this.UnsetStyle()
+	}
+}
+
+func (this *attrHierarchy[T]) Value () T {
+	if user, ok := this.user.Value(); ok {
+		return user
+	} else if style, ok := this.style.Value(); ok{
+		return style
+	} else {
+		return this.fallback
+	}
+}

internal/system/box.go

@@ -7,40 +7,42 @@ import "git.tebibyte.media/tomo/tomo/data"
 import "git.tebibyte.media/tomo/tomo/input"
 import "git.tebibyte.media/tomo/tomo/event"
 import "git.tebibyte.media/tomo/tomo/canvas"
-import "git.tebibyte.media/tomo/backend/internal/util"
+import "git.tebibyte.media/sashakoshka/goutil/container"
-
+import "git.tebibyte.media/sashakoshka/goutil/image/color"
-type textureMode int; const (
-	textureModeTile textureMode = iota
-	textureModeCenter
-)
 
 type box struct {
 	system *System
 	parent parent
 	outer  anyBox
 
+	tags             ucontainer.Set[string]
 	role             tomo.Role
+	lastStyleNonce   int
+	lastIconSetNonce int
+	styleApplicator  *styleApplicator
 
+	minSize             ucontainer.Memo[image.Point]
 	bounds              image.Rectangle
-	minSize             image.Point
-	userMinSize         image.Point
 	innerClippingBounds image.Rectangle
 	
-	minSizeQueued bool
 	focusQueued *bool
 
-	padding     tomo.Inset
+	attrColor       attrHierarchy[tomo.AttrColor]
-	border      []tomo.Border
+	attrTexture     attrHierarchy[tomo.AttrTexture]
-	color       color.Color
+	attrTextureMode attrHierarchy[tomo.AttrTextureMode]
-	texture     canvas.Texture
+	attrBorder      attrHierarchy[tomo.AttrBorder]
-	textureMode textureMode
+	attrMinimumSize attrHierarchy[tomo.AttrMinimumSize]
+	attrPadding     attrHierarchy[tomo.AttrPadding]
 
 	dndData   data.Data
 	dndAccept []data.Mime
-	focused   bool
 	focusable bool
 
-	canvas util.Memo[canvas.Canvas]
+	hovered bool
+	focused bool
+	pressed bool
+	
+	canvas ucontainer.Memo[canvas.Canvas]
 	drawer canvas.Drawer
 
 	on struct {
@@ -51,41 +53,46 @@ type box struct {
 		dndDrop       event.Broadcaster[func (data.Data)]
 		mouseEnter    event.FuncBroadcaster
 		mouseLeave    event.FuncBroadcaster
-		mouseMove  event.FuncBroadcaster
+		mouseMove     event.Broadcaster[func ()                 bool]
-		mouseDown  event.Broadcaster[func (input.Button)]
+		buttonDown    event.Broadcaster[func (input.Button)     bool]
-		mouseUp    event.Broadcaster[func (input.Button)]
+		buttonUp      event.Broadcaster[func (input.Button)     bool]
-		scroll     event.Broadcaster[func (float64, float64)]
+		scroll        event.Broadcaster[func (float64, float64) bool]
-		keyDown    event.Broadcaster[func (input.Key, bool)]
+		keyDown       event.Broadcaster[func (input.Key, bool)  bool]
-		keyUp      event.Broadcaster[func (input.Key, bool)]
+		keyUp         event.Broadcaster[func (input.Key, bool)  bool]
+		styleChange   event.FuncBroadcaster
+		iconSetChange event.FuncBroadcaster
 	}
 }
 
 func (this *System) newBox (outer anyBox) *box {
 	box := &box {
 		system:  this,
-		color:   color.Transparent,
 		outer:   outer,
 		drawer:  outer,
+		tags:    make(ucontainer.Set[string]),
 	}
-	box.canvas = util.NewMemo (func () canvas.Canvas {
+	box.attrColor.SetFallback(tomo.AColor(color.Transparent))
+	box.canvas = ucontainer.NewMemo (func () canvas.Canvas {
 		if box.parent == nil { return nil }
 		parentCanvas := box.parent.getCanvas()
 		if parentCanvas == nil { return nil }
-		return parentCanvas.SubCanvas(box.bounds)
+		drawableArea := box.bounds.Intersect(box.parent.getInnerClippingBounds())
+		return parentCanvas.SubCanvas(drawableArea)
 	})
 	if outer == nil {
 		box.drawer = box
 		box.outer  = box
 	}
-	box.invalidateMinimum()
+	box.minSize = ucontainer.NewMemo(box.calculateMinimumSize)
 	return box
-
 }
 
 func (this *System) NewBox () tomo.Box {
 	return this.newBox(nil)
 }
 
+// ----- public methods ----------------------------------------------------- //
+
 func (this *box) GetBox () tomo.Box {
 	return this.outer
 }
@@ -101,95 +108,47 @@ func (this *box) Bounds () image.Rectangle {
 }
 
 func (this *box) InnerBounds () image.Rectangle {
-	return this.padding.Apply(this.innerClippingBounds)
+	return tomo.Inset(this.attrPadding.Value()).Apply(this.innerClippingBounds)
-}
-
-func (this *box) MinimumSize () image.Point {
-	return this.minSize
 }
 
 func (this *box) Role () tomo.Role {
 	return this.role
 }
 
-func (this *box) borderSum () tomo.Inset {
-	sum := tomo.Inset { }
-	for _, border := range this.border {
-		sum[0] += border.Width[0]
-		sum[1] += border.Width[1]
-		sum[2] += border.Width[2]
-		sum[3] += border.Width[3]
-	}
-	return sum
-}
-
-func (this *box) SetBounds (bounds image.Rectangle) {
-	if this.bounds == bounds { return }
-	this.bounds = bounds
-	this.invalidateLayout()
-}
-
-func (this *box) SetColor (c color.Color) {
-	if c == nil { c = color.Transparent }
-	if this.color == c { return }
-	this.color = c
-	this.invalidateDraw()
-}
-
-func (this *box) SetTextureTile (texture canvas.Texture) {
-	if this.texture == texture && this.textureMode == textureModeTile { return }
-	this.textureMode = textureModeTile
-	this.texture = texture
-	this.invalidateDraw()
-}
-
-func (this *box) SetTextureCenter (texture canvas.Texture) {
-	if this.texture == texture && this.textureMode == textureModeCenter { return }
-	this.texture = texture
-	this.textureMode = textureModeCenter
-	this.invalidateDraw()
-}
-
-func (this *box) SetBorder (borders ...tomo.Border) {
-	previousBorderSum := this.borderSum()
-	previousBorders   := this.border
-	this.border = borders
-
-	// only invalidate the layout if the border is sized differently
-	if this.borderSum() != previousBorderSum {
-		this.invalidateLayout()
-		this.invalidateMinimum()
-		return
-	}
-
-	// if the border takes up the same amount of space, only invalidate the
-	// drawing if it looks different
-	for index, newBorder := range this.border {
-		different :=
-			index >= len(previousBorders) ||
-			newBorder != previousBorders[index]
-		if different {
-			this.invalidateDraw()
-			return
-		}
-	}
-}
-
-func (this *box) SetMinimumSize (size image.Point) {
-	if this.userMinSize == size { return }
-	this.userMinSize = size
-	this.invalidateMinimum()
-}
-
-func (this *box) SetPadding (padding tomo.Inset) {
-	if this.padding == padding { return }
-	this.padding = padding
-	this.invalidateLayout()
-	this.invalidateMinimum()
-}
-
 func (this *box) SetRole (role tomo.Role) {
+	if this.role == role { return }
 	this.role = role
+	this.lastStyleNonce = -1
+	this.outer.recursiveReApply()
+}
+
+func (this *box) Tag (tag string) bool {
+	switch tag {
+	case "hovered": return this.hovered
+	case "focused": return this.focused
+	case "pressed": return this.pressed
+	default:        return this.tags.Has(tag)
+	}
+}
+
+func (this *box) SetTag (tag string, on bool) {
+	wasOn := this.tags.Has(tag)
+	if on {
+		this.tags.Add(tag)
+	} else {
+		delete(this.tags, tag)
+	}
+	if wasOn != on {
+		this.invalidateStyle()
+	}
+}
+
+func (this *box) SetAttr (attr tomo.Attr) {
+	this.outer.setAttr(attr, true)
+}
+
+func (this *box) UnsetAttr (kind tomo.AttrKind) {
+	this.outer.unsetAttr(kind, true)
 }
 
 func (this *box) SetDNDData (dat data.Data) {
@@ -216,6 +175,12 @@ func (this *box) SetFocused (focused bool) {
 	}
 }
 
+func (this *box) Focused () bool {
+	hierarchy := this.getHierarchy()
+	if hierarchy == nil { return false }
+	return hierarchy.isFocused(this.outer)
+}
+
 func (this *box) SetFocusable (focusable bool) {
 	if this.focusable == focusable { return }
 	this.focusable = focusable
@@ -224,22 +189,125 @@ func (this *box) SetFocusable (focusable bool) {
 	}
 }
 
-func (this *box) Focused () bool {
+// ----- private methods ---------------------------------------------------- //
-	hierarchy := this.getHierarchy()
+
-	if hierarchy == nil { return false }
+func (this *box) setAttr (attr tomo.Attr, user bool) {
-	return hierarchy.isFocused(this.outer)
+	switch attr := attr.(type) {
+	case tomo.AttrColor:
+		if this.attrColor.Set(attr, user) {
+			this.invalidateDraw()
 		}
 		
-func (this *box) Modifiers () input.Modifiers {
+	case tomo.AttrTexture:
-	hierarchy := this.getHierarchy()
+		if this.attrTexture.Set(attr, user) {
-	if hierarchy == nil { return input.Modifiers { } }
+			this.invalidateDraw()
-	return hierarchy.getModifiers()
 		}
 		
-func (this *box) MousePosition () image.Point {
+	case tomo.AttrTextureMode:
-	hierarchy := this.getHierarchy()
+		if this.attrTextureMode.Set(attr, user) {
-	if hierarchy == nil { return image.Point { } }
+			this.invalidateDraw()
-	return hierarchy.getMousePosition()
+		}
+		
+	case tomo.AttrBorder:
+		previousBorderSum := this.borderSum()
+		different         := this.attrBorder.Set(attr, user)
+		this.handleBorderChange(previousBorderSum, different)
+		
+	case tomo.AttrMinimumSize:
+		if this.attrMinimumSize.Set(attr, user) {
+			this.invalidateMinimum()
+		}
+		
+	case tomo.AttrPadding:
+		if this.attrPadding.Set(attr, user) {
+			this.invalidateLayout()
+			this.invalidateMinimum()
+		}
+	}
+}
+
+func (this *box) unsetAttr (kind tomo.AttrKind, user bool) {
+	switch kind {
+	case tomo.AttrKindColor:
+		if this.attrColor.Unset(user) {
+			this.invalidateDraw()
+		}
+		
+	case tomo.AttrKindTexture:
+		if this.attrTexture.Unset(user) {
+			this.invalidateDraw()
+		}
+		
+	case tomo.AttrKindTextureMode:
+		if this.attrTextureMode.Unset(user) {
+			this.invalidateDraw()
+		}
+		
+	case tomo.AttrKindBorder:
+		previousBorderSum := this.borderSum()
+		different         := this.attrBorder.Unset(user)
+		this.handleBorderChange(previousBorderSum, different)
+	
+	case tomo.AttrKindMinimumSize:
+		if this.attrMinimumSize.Unset(user) {
+			this.invalidateMinimum()
+		}
+		
+	case tomo.AttrKindPadding:
+		if this.attrPadding.Unset(user) {
+			this.invalidateLayout()
+			this.invalidateMinimum()
+		}
+	}
+}
+
+func (this *box) unsetAllAttrs (user bool) {
+	// keep this in sync with tomo.AttrKind!
+	this.outer.unsetAttr(tomo.AttrKindColor, user)
+	this.outer.unsetAttr(tomo.AttrKindTexture, user)
+	this.outer.unsetAttr(tomo.AttrKindTextureMode, user)
+	this.outer.unsetAttr(tomo.AttrKindBorder, user)
+	this.outer.unsetAttr(tomo.AttrKindMinimumSize, user)
+	this.outer.unsetAttr(tomo.AttrKindPadding, user)
+	this.outer.unsetAttr(tomo.AttrKindGap, user)
+	this.outer.unsetAttr(tomo.AttrKindTextColor, user)
+	this.outer.unsetAttr(tomo.AttrKindDotColor, user)
+	this.outer.unsetAttr(tomo.AttrKindFace, user)
+	this.outer.unsetAttr(tomo.AttrKindWrap, user)
+	this.outer.unsetAttr(tomo.AttrKindAlign, user)
+	this.outer.unsetAttr(tomo.AttrKindOverflow, user)
+	this.outer.unsetAttr(tomo.AttrKindLayout, user)
+}
+
+func (this *box) setBounds (bounds image.Rectangle) {
+	if this.bounds == bounds { return }
+	this.bounds = bounds
+	this.invalidateLayout()
+}
+
+func (this *box) minimumSize () image.Point {
+	return this.minSize.Value()
+}
+
+func (this *box) borderSum () tomo.Inset {
+	sum := tomo.Inset { }
+	for _, border := range this.attrBorder.Value() {
+		sum[0] += border.Width[0]
+		sum[1] += border.Width[1]
+		sum[2] += border.Width[2]
+		sum[3] += border.Width[3]
+	}
+	return sum
+}
+
+func (this *box) borderAndPaddingSum () tomo.Inset {
+	sum := this.borderSum()
+	padding := this.attrPadding.Value()
+	sum[0] += padding[0]
+	sum[1] += padding[1]
+	sum[2] += padding[2]
+	sum[3] += padding[3]
+	return sum
 }
 
 // ----- event handler setters ---------------------------------------------- //
@@ -264,70 +332,95 @@ func (this *box) OnMouseEnter (callback func()) event.Cookie {
 func (this *box) OnMouseLeave (callback func()) event.Cookie {
 	return this.on.mouseLeave.Connect(callback)
 }
-func (this *box) OnMouseMove (callback func()) event.Cookie {
+func (this *box) OnMouseMove (callback func() bool) event.Cookie {
 	return this.on.mouseMove.Connect(callback)
 }
-func (this *box) OnMouseDown (callback func(input.Button)) event.Cookie {
+func (this *box) OnButtonDown (callback func(input.Button) bool) event.Cookie {
-	return this.on.mouseDown.Connect(callback)
+	return this.on.buttonDown.Connect(callback)
 }
-func (this *box) OnMouseUp (callback func(input.Button)) event.Cookie {
+func (this *box) OnButtonUp (callback func(input.Button) bool) event.Cookie {
-	return this.on.mouseUp.Connect(callback)
+	return this.on.buttonUp.Connect(callback)
 }
-func (this *box) OnScroll (callback func(deltaX, deltaY float64)) event.Cookie {
+func (this *box) OnScroll (callback func(float64, float64) bool) event.Cookie {
 	return this.on.scroll.Connect(callback)
 }
-func (this *box) OnKeyDown (callback func(key input.Key, numberPad bool)) event.Cookie {
+func (this *box) OnKeyDown (callback func(input.Key, bool) bool) event.Cookie {
 	return this.on.keyDown.Connect(callback)
 }
-func (this *box) OnKeyUp (callback func(key input.Key, numberPad bool)) event.Cookie {
+func (this *box) OnKeyUp (callback func(input.Key, bool) bool) event.Cookie {
 	return this.on.keyUp.Connect(callback)
 }
+func (this *box) OnStyleChange (callback func()) event.Cookie {
+	return this.on.styleChange.Connect(callback)
+}
+func (this *box) OnIconSetChange (callback func()) event.Cookie {
+	return this.on.iconSetChange.Connect(callback)
+}
 func (this *box) handleFocusEnter () {
+	this.focused = true
+	this.invalidateStyle()
 	this.on.focusEnter.Broadcast()
 }
 func (this *box) handleFocusLeave () {
+	this.focused = false
+	this.invalidateStyle()
 	this.on.focusLeave.Broadcast()
 }
 func (this *box) handleMouseEnter () {
+	this.hovered = true
+	this.invalidateStyle()
 	this.on.mouseEnter.Broadcast()
 }
 func (this *box) handleMouseLeave () {
+	this.hovered = false
+	this.invalidateStyle()
 	this.on.mouseLeave.Broadcast()
 }
-func (this *box) handleMouseMove () {
+func (this *box) handleMouseMove () (caught bool) {
-	this.on.mouseMove.Broadcast()
+	for _, listener := range this.on.mouseMove.Listeners() {
+		if listener() { caught = true }
 	}
-func (this *box) handleMouseDown (button input.Button) {
+	return
-	if this.focusable {
-		this.SetFocused(true)
-	} else {
-		hierarchy := this.getHierarchy()
-		if hierarchy == nil { return }
-		hierarchy.focus(nil)
 }
-	for _, listener := range this.on.mouseDown.Listeners() {
+func (this *box) handleMouseDown (button input.Button) (caught bool) {
-		listener(button)
+	if button == input.ButtonLeft {
+		this.pressed = true
+		this.invalidateStyle()
 	}
+	
+	for _, listener := range this.on.buttonDown.Listeners() {
+		if listener(button) { caught = true }
 	}
-func (this *box) handleMouseUp (button input.Button) {
+	return
-	for _, listener := range this.on.mouseUp.Listeners() {
-		listener(button)
 }
+func (this *box) handleMouseUp (button input.Button) (caught bool) {
+	if button == input.ButtonLeft {
+		this.pressed = false
+		this.invalidateStyle()
 	}
-func (this *box) handleScroll (x, y float64) {
+	
+	for _, listener := range this.on.buttonUp.Listeners() {
+		if listener(button) { caught = true }
+	}
+	return
+}
+func (this *box) handleScroll (x, y float64) (caught bool) {
 	for _, listener := range this.on.scroll.Listeners() {
-		listener(x, y)
+		if listener(x, y) { caught = true }
 	}
+	return
 }
-func (this *box) handleKeyDown (key input.Key, numberPad bool) {
+func (this *box) handleKeyDown (key input.Key, numberPad bool) (caught bool) {
 	for _, listener := range this.on.keyDown.Listeners() {
-		listener(key, numberPad)
+		if listener(key, numberPad) { caught = true }
 	}
+	return
 }
-func (this *box) handleKeyUp (key input.Key, numberPad bool) {
+func (this *box) handleKeyUp (key input.Key, numberPad bool) (caught bool) {
 	for _, listener := range this.on.keyUp.Listeners() {
-		listener(key, numberPad)
+		if listener(key, numberPad) { caught = true }
 	}
+	return
 }
 // -------------------------------------------------------------------------- //
 
@@ -336,19 +429,32 @@ func (this *box) Draw (can canvas.Canvas) {
 	pen := can.Pen()
 	bounds := this.Bounds()
 
+	// get values
+	textureMode := tomo.TextureMode(this.attrTextureMode.Value())
+	texture     := this.attrTexture.Value().Texture
+	col         := this.attrColor.Value().Color
+	if col == nil { col = color.Transparent }
+
 	// background
-	pen.Fill(this.color)
-	if this.textureMode == textureModeTile {
-		pen.Texture(this.texture)
-	}
 	if this.transparent() && this.parent != nil {
 		this.parent.drawBackgroundPart(can)
 	}
+	pen.Fill(col)
+	if textureMode == tomo.TextureModeTile && texture != nil {
+		pen.Texture(texture)
+	}
 	pen.Rectangle(bounds)
 
 	// centered texture
-	if this.textureMode == textureModeCenter && this.texture != nil {
+	if textureMode == tomo.TextureModeCenter && texture != nil {
-		textureBounds := this.texture.Bounds()
+		this.centeredTexture(can, texture)
+	}
+}
+
+func (this *box) centeredTexture (can canvas.Canvas, texture canvas.Texture) {
+	pen           := can.Pen()
+	bounds        := this.Bounds()
+	textureBounds := texture.Bounds()
 	textureOrigin :=
 		bounds.Min.
 		Add(image.Pt (
@@ -359,10 +465,9 @@ func (this *box) Draw (can canvas.Canvas) {
 			textureBounds.Dy() / 2))
 
 	pen.Fill(color.Transparent)
-		pen.Texture(this.texture)
+	pen.Texture(texture)
 	pen.Rectangle(textureBounds.Sub(textureBounds.Min).Add(textureOrigin))
 }
-}
 
 func (this *box) drawBorders (can canvas.Canvas) {
 	if can == nil { return }
@@ -371,14 +476,15 @@ func (this *box) drawBorders (can canvas.Canvas) {
 
 	rectangle := func (x0, y0, x1, y1 int, c color.Color) {
 		area := image.Rect(x0, y0, x1, y1)
-		if util.Transparent(c) && this.parent != nil {
+		if area.Empty() { return }
+		if ucolor.Transparent(c) && this.parent != nil {
 			this.parent.drawBackgroundPart(can.SubCanvas(area))
 		}
 		pen.Fill(c)
 		pen.Rectangle(area)
 	}
 	
-	for _, border := range this.border {
+	for _, border := range this.attrBorder.Value() {
 		rectangle (
 			bounds.Min.X,
 			bounds.Min.Y,
@@ -410,26 +516,26 @@ func (this *box) drawBorders (can canvas.Canvas) {
 
 func (this *box) contentMinimum () image.Point {
 	var minimum image.Point
-	minimum.X += this.padding.Horizontal()
+	padding := tomo.Inset(this.attrPadding.Value())
-	minimum.Y += this.padding.Vertical()
+	minimum.X += padding.Horizontal()
+	minimum.Y += padding.Vertical()
 	borderSum := this.borderSum()
 	minimum.X += borderSum.Horizontal()
 	minimum.Y += borderSum.Vertical()
 	return minimum
 }
 
-func (this *box) doMinimumSize () {
+func (this *box) calculateMinimumSize () image.Point {
-	this.minSize = this.outer.contentMinimum()
+	userMinSize := this.attrMinimumSize.Value()
-	if this.minSize.X < this.userMinSize.X {
+	minSize := this.outer.contentMinimum()
-		this.minSize.X = this.userMinSize.X
+	if minSize.X < userMinSize.X {
+		minSize.X = userMinSize.X
 	}
-	if this.minSize.Y < this.userMinSize.Y {
+	if minSize.Y < userMinSize.Y {
-		this.minSize.Y = this.userMinSize.Y
+		minSize.Y = userMinSize.Y
 	}
 	
-	if this.parent != nil {
+	return minSize
-		this.parent.notifyMinimumSizeChange(this)
-	}
 }
 
 // var drawcnt int
@@ -451,7 +557,11 @@ func (this *box) doLayout () {
 	// laycnt ++
 	
 	this.innerClippingBounds = this.borderSum().Apply(this.bounds)
-	this.loseCanvas()
+	this.outer.recursiveLoseCanvas()
+}
+
+func (this *box) doStyle () {
+	this.styleApplicator.apply(this.outer)
 }
 
 func (this *box) setParent (parent parent) {
@@ -459,6 +569,7 @@ func (this *box) setParent (parent parent) {
 		this.SetFocused(false)
 	}
 	this.parent = parent
+	this.outer.recursiveReApply()
 }
 
 func (this *box) getParent () parent {
@@ -467,10 +578,6 @@ func (this *box) getParent () parent {
 
 func (this *box) flushActionQueue () {
 	if this.getHierarchy() == nil { return }
-
-	if this.minSizeQueued {
-		this.invalidateMinimum()
-	}
 	if this.focusQueued != nil {
 		this.SetFocused(*this.focusQueued)
 	}
@@ -481,8 +588,28 @@ func (this *box) recursiveRedo () {
 	this.doDraw()
 }
 
-func (this *box) loseCanvas () {
+func (this *box) recursiveLoseCanvas () {
-	this.canvas.InvalidateTo(nil)
+	this.canvas.Invalidate()
+}
+
+func (this *box) handleBorderChange (previousBorderSum tomo.Inset, different bool) {
+	// only invalidate the layout if the border is sized differently
+	if this.borderSum() != previousBorderSum {
+		this.invalidateLayout()
+		this.invalidateMinimum()
+	}
+
+	// if the border takes up the same amount of space, only invalidate the
+	// drawing if it looks different
+	if different {
+		this.invalidateDraw()
+	}
+}
+
+func (this *box) invalidateStyle () {
+	hierarchy := this.getHierarchy()
+	if hierarchy == nil { return }
+	hierarchy.invalidateStyle(this.outer)
 }
 
 func (this *box) invalidateLayout () {
@@ -498,11 +625,37 @@ func (this *box) invalidateDraw () {
 }
 
 func (this *box) invalidateMinimum () {
+	this.minSize.Invalidate()
+	if this.parent != nil {
+		this.parent.notifyMinimumSizeChange(this)
+	}
+}
+
+func (this *box) recursiveReApply () {
 	hierarchy := this.getHierarchy()
-	if hierarchy == nil {
+	if hierarchy == nil { return }
-		this.minSizeQueued = true
+	
-	} else {
+	// re-apply styling, icons *if needed*
-		hierarchy.invalidateMinimum(this.outer)
+
+	// style
+	hierarchyStyleNonce := this.getStyleNonce()
+	if this.lastStyleNonce != hierarchyStyleNonce {
+		// i should probably explain why we have a specific style
+		// applicator for every box, it's so style applicators can cache
+		// information about the boxes they're linked to (like all rules
+		// with a matching role).
+		this.unsetAllAttrs(false)
+		this.lastStyleNonce = hierarchyStyleNonce
+		this.styleApplicator = hierarchy.newStyleApplicator()
+		this.invalidateStyle()
+		this.on.styleChange.Broadcast()
+	}
+
+	// icons
+	hierarchyIconSetNonce := this.getIconSetNonce()
+	if this.lastIconSetNonce != hierarchyIconSetNonce {
+		this.lastIconSetNonce = hierarchyIconSetNonce
+		this.on.iconSetChange.Broadcast()
 	}
 }
 
@@ -510,7 +663,7 @@ func (this *box) canBeFocused () bool {
 	return this.focusable
 }
 
-func (this *box) boxUnder (point image.Point, category eventCategory) anyBox {
+func (this *box) boxUnder (point image.Point) anyBox {
 	if point.In(this.bounds) {
 		return this.outer
 	} else {
@@ -529,7 +682,8 @@ func (this *box) propagateAlt (callback func (anyBox) bool) bool {
 func (this *box) transparent () bool {
 	// TODO uncomment once we have
 	// a way to detect texture transparency
-	return util.Transparent(this.color) /*&&
+	col := this.attrColor.Value().Color
+	return col == nil || ucolor.Transparent(col) /*&&
 		(this.texture == nil || !this.texture.Opaque())*/
 }
 
@@ -543,3 +697,13 @@ func (this *box) getHierarchy () *Hierarchy {
 	if this.parent == nil { return nil }
 	return this.parent.getHierarchy()
 }
+
+func (this *box) getStyleNonce () int {
+	// should panic if not in the tree
+	return this.getHierarchy().getStyleNonce()
+}
+
+func (this *box) getIconSetNonce () int {
+	// should panic if not in the tree
+	return this.getHierarchy().getIconSetNonce()
+}

internal/system/boxquerier.go

@@ -0,0 +1,65 @@
+package system
+
+import "image"
+
+type boxQuerier []anyBox
+
+func (querier boxQuerier) Len () int {
+	return len(querier)
+}
+
+func (querier boxQuerier) MinimumSize (index int) image.Point {
+	if box, ok := querier.box(index); ok {
+		return box.minimumSize()
+	}
+	return image.Point { }
+}
+
+func (querier boxQuerier) RecommendedWidth (index int, height int) int {
+	if box, ok := querier.box(index); ok {
+		if box, ok := box.(anyContentBox); ok {
+			return box.recommendedWidth(height)
+		}
+		return box.minimumSize().X
+	}
+	return 0
+}
+
+func (querier boxQuerier) RecommendedHeight (index int, width int) int {
+	if box, ok := querier.box(index); ok {
+		if box, ok := box.(anyContentBox); ok {
+			return box.recommendedHeight(width)
+		}
+		return box.minimumSize().Y
+	}
+	return 0
+}
+
+func (querier boxQuerier) box (index int) (anyBox, bool) {
+	if index < 0 || index >= len(querier) { return nil, false }
+	return querier[index], true
+}
+
+type boxArranger []anyBox
+
+func (arranger boxArranger) Len () int {
+	return boxQuerier(arranger).Len()
+}
+
+func (arranger boxArranger) MinimumSize (index int) image.Point {
+	return boxQuerier(arranger).MinimumSize(index)
+}
+
+func (arranger boxArranger) RecommendedWidth (index int, height int) int {
+	return boxQuerier(arranger).RecommendedWidth(index, height)
+}
+
+func (arranger boxArranger) RecommendedHeight (index int, width int) int {
+	return boxQuerier(arranger).RecommendedHeight(index, width)
+}
+
+func (arranger boxArranger) SetBounds (index int, bounds image.Rectangle) {
+	if box, ok := boxQuerier(arranger).box(index); ok {
+		box.setBounds(bounds)
+	}
+}

internal/system/canvasbox.go

@@ -15,10 +15,6 @@ func (this *System) NewCanvasBox () tomo.CanvasBox {
 	return box
 }
 
-func (this *canvasBox) Box () tomo.Box {
-	return this
-}
-
 func (this *canvasBox) SetDrawer (drawer canvas.Drawer) {
 	this.userDrawer = drawer
 	this.invalidateDraw()
@@ -29,7 +25,11 @@ func (this *canvasBox) Invalidate () {
 }
 
 func (this *canvasBox) Draw (can canvas.Canvas) {
+	if can == nil { return }
 	this.box.Draw(can)
+	if this.userDrawer != nil {
+		padding := tomo.Inset(this.attrPadding.Value())
 		this.userDrawer.Draw (
-		can.SubCanvas(this.padding.Apply(this.innerClippingBounds)))
+			can.SubCanvas(padding.Apply(this.innerClippingBounds)))
+	}
 }

internal/system/containerbox.go

@@ -1,24 +1,25 @@
 package system
 
 import "image"
+import "slices"
 import "image/color"
 import "git.tebibyte.media/tomo/tomo"
 import "git.tebibyte.media/tomo/tomo/event"
 import "git.tebibyte.media/tomo/tomo/canvas"
-import "git.tebibyte.media/tomo/backend/internal/util"
 
 type containerBox struct {
 	*box
 
-	hOverflow, vOverflow bool
-	hAlign, vAlign       tomo.Align
 	contentBounds image.Rectangle
 	scroll        image.Point
-	capture              [4]bool
+	mask          bool
 
-	gap      image.Point
+	attrGap      attrHierarchy[tomo.AttrGap]
-	children []tomo.Box
+	attrAlign    attrHierarchy[tomo.AttrAlign]
-	layout   tomo.Layout
+	attrOverflow attrHierarchy[tomo.AttrOverflow]
+	attrLayout   attrHierarchy[tomo.AttrLayout]
+
+	children []anyBox
 
 	on struct {
 		contentBoundsChange event.FuncBroadcaster
@@ -31,37 +32,7 @@ func (this *System) NewContainerBox () tomo.ContainerBox {
 	return box
 }
 
-func (this *containerBox) SetColor (c color.Color) {
+// ----- public methods ----------------------------------------------------- //
-	if this.color == c { return }
-	this.box.SetColor(c)
-	this.invalidateTransparentChildren()
-}
-
-func (this *containerBox) SetTextureTile (texture canvas.Texture) {
-	if this.texture == texture { return }
-	this.box.SetTextureTile(texture)
-	this.invalidateTransparentChildren()
-}
-
-func (this *containerBox) SetTextureCenter (texture canvas.Texture) {
-	if this.texture == texture { return }
-	this.box.SetTextureTile(texture)
-	this.invalidateTransparentChildren()
-}
-
-func (this *containerBox) SetOverflow (horizontal, vertical bool) {
-	if this.hOverflow == horizontal && this.vOverflow == vertical { return }
-	this.hOverflow = horizontal
-	this.vOverflow = vertical
-	this.invalidateLayout()
-}
-
-func (this *containerBox) SetAlign (x, y tomo.Align) {
-	if this.hAlign == x && this.vAlign == y { return }
-	this.hAlign = x
-	this.vAlign = y
-	this.invalidateLayout()
-}
 
 func (this *containerBox) ContentBounds () image.Rectangle {
 	return this.contentBounds
@@ -77,32 +48,9 @@ func (this *containerBox) OnContentBoundsChange (callback func()) event.Cookie {
 	return this.on.contentBoundsChange.Connect(callback)
 }
 
-func (this *containerBox) CaptureDND (capture bool) {
-	this.capture[eventCategoryDND] = capture
-}
-
-func (this *containerBox) CaptureMouse (capture bool) {
-	this.capture[eventCategoryMouse] = capture
-}
-
-func (this *containerBox) CaptureScroll (capture bool) {
-	this.capture[eventCategoryScroll] = capture
-}
-
-func (this *containerBox) CaptureKeyboard (capture bool) {
-	this.capture[eventCategoryKeyboard] = capture
-}
-
-func (this *containerBox) SetGap (gap image.Point) {
-	if this.gap == gap { return }
-	this.gap = gap
-	this.invalidateLayout()
-	this.invalidateMinimum()
-}
-
 func (this *containerBox) Add (child tomo.Object) {
 	box := assertAnyBox(child.GetBox())
-	if util.IndexOf(this.children, tomo.Box(box)) > -1 { return }
+	if slices.Index(this.children, box) > -1 { return }
 
 	box.setParent(this)
 	box.flushActionQueue()
@@ -113,26 +61,26 @@ func (this *containerBox) Add (child tomo.Object) {
 
 func (this *containerBox) Remove (child tomo.Object) {
 	box := assertAnyBox(child.GetBox())
-	index := util.IndexOf(this.children, tomo.Box(box))
+	index := slices.Index(this.children, box)
 	if index < 0 { return }
 
 	box.setParent(nil)
-	this.children = util.Remove(this.children, index)
+	this.children = slices.Delete(this.children, index, index + 1)
 	this.invalidateLayout()
 	this.invalidateMinimum()
 }
 
 func (this *containerBox) Insert (child, before tomo.Object) {
 	box := assertAnyBox(child.GetBox())
-	if util.IndexOf(this.children, tomo.Box(box)) > -1 { return }
+	if slices.Index(this.children, box) > -1 { return }
 
 	beforeBox := assertAnyBox(before.GetBox())
-	index     := util.IndexOf(this.children, tomo.Box(beforeBox))
+	index     := slices.Index(this.children, beforeBox)
 	
 	if index < 0 {
-		this.children = append(this.children, tomo.Box(box))
+		this.children = append(this.children, box)
 	} else {
-		this.children = util.Insert(this.children, index, tomo.Box(box))
+		this.children = slices.Insert(this.children, index, box)
 	}
 	box.setParent(this)
 
@@ -149,7 +97,7 @@ func (this *containerBox) Clear () {
 	this.invalidateMinimum()
 }
 
-func (this *containerBox) Length () int {
+func (this *containerBox) Len () int {
 	return len(this.children)
 }
 
@@ -160,15 +108,20 @@ func (this *containerBox) At (index int) tomo.Object {
 	return this.children[index]
 }
 
-func (this *containerBox) SetLayout (layout tomo.Layout) {
+func (this *containerBox) SetInputMask (mask bool) {
-	this.layout = layout
+	this.mask = mask
-	this.invalidateLayout()
-	this.invalidateMinimum()
 }
 
+// ----- private methods ---------------------------------------------------- //
+
 func (this *containerBox) Draw (can canvas.Canvas) {
 	if can == nil { return }
 	
+	// textureMode := tomo.TextureMode(this.attrTextureMode.Value())
+	texture     := this.attrTexture.Value().Texture
+	col         := this.attrColor.Value().Color
+	if col == nil { col = color.Transparent }
+
 	rocks := make([]image.Rectangle, len(this.children))
 	for index, box := range this.children {
 		rocks[index] = box.Bounds()
@@ -180,17 +133,137 @@ func (this *containerBox) Draw (can canvas.Canvas) {
 		}
 		if clipped == nil { continue }
 		pen := clipped.Pen()
-		pen.Fill(this.color)
+		pen.Fill(col)
-		pen.Texture(this.texture)
+		pen.Texture(texture)
 		pen.Rectangle(this.innerClippingBounds)
 	}
 }
 
+func (this *containerBox) setAttr (attr tomo.Attr, user bool) {
+	switch attr := attr.(type) {
+	case tomo.AttrColor:
+		if this.attrColor.Set(attr, user) {
+			this.invalidateTransparentChildren()
+			this.invalidateDraw()
+		}
+		
+	case tomo.AttrTexture:
+		if this.attrTexture.Set(attr, user) {
+			this.invalidateTransparentChildren()
+			this.invalidateDraw()
+		}
+		
+	case tomo.AttrTextureMode:
+		if this.attrTextureMode.Set(attr, user) {
+			this.invalidateTransparentChildren()
+			this.invalidateDraw()
+		}
+
+	case tomo.AttrGap:
+		if this.attrGap.Set(attr, user) {
+			this.invalidateLayout()
+			this.invalidateMinimum()
+		}
+		
+	case tomo.AttrAlign:
+		if this.attrAlign.Set(attr, user) {
+			this.invalidateLayout()
+		}
+		
+	case tomo.AttrOverflow:
+		if this.attrOverflow.Set(attr, user) {
+			this.invalidateLayout()
+			this.invalidateMinimum()
+		}
+		
+	case tomo.AttrLayout:
+		if this.attrLayout.Set(attr, user) {
+			this.invalidateLayout()
+			this.invalidateMinimum()
+		}
+
+	default: this.box.setAttr(attr, user)
+	}
+}
+
+func (this *containerBox) unsetAttr (kind tomo.AttrKind, user bool) {
+	switch kind {
+	case tomo.AttrKindColor:
+		if this.attrColor.Unset(user) {
+			this.invalidateTransparentChildren()
+			this.invalidateDraw()
+		}
+		
+	case tomo.AttrKindTexture:
+		if this.attrTexture.Unset(user) {
+			this.invalidateTransparentChildren()
+			this.invalidateDraw()
+		}
+		
+	case tomo.AttrKindTextureMode:
+		if this.attrTextureMode.Unset(user) {
+			this.invalidateTransparentChildren()
+			this.invalidateDraw()
+		}
+
+	case tomo.AttrKindGap:
+		if this.attrGap.Unset(user) {
+			this.invalidateLayout()
+			this.invalidateMinimum()
+		}
+		
+	case tomo.AttrKindAlign:
+		if this.attrAlign.Unset(user) {
+			this.invalidateLayout()
+		}
+		
+	case tomo.AttrKindOverflow:
+		if this.attrOverflow.Unset(user) {
+			this.invalidateLayout()
+			this.invalidateMinimum()
+		}
+		
+	case tomo.AttrKindLayout:
+		if this.attrLayout.Unset(user) {
+			this.invalidateLayout()
+			this.invalidateMinimum()
+		}
+
+	default: this.box.unsetAttr(kind, user)
+	}
+}
+
+func (this *containerBox) recommendedHeight (width int) int {
+	layout := this.attrLayout.Value().Layout
+	if layout == nil || !this.attrOverflow.Value().Y {
+		return this.minSize.Value().Y
+	} else {
+		return layout.RecommendedHeight(this.layoutHints(), this.boxQuerier(), width) +
+			this.borderAndPaddingSum().Vertical()
+	}
+}
+
+func (this *containerBox) recommendedWidth (height int) int {
+	layout := this.attrLayout.Value().Layout
+	if layout == nil || !this.attrOverflow.Value().X {
+		return this.minSize.Value().X
+	} else {
+		return layout.RecommendedWidth(this.layoutHints(), this.boxQuerier(), height) +
+			this.borderAndPaddingSum().Horizontal()
+	}
+}
+
 func (this *containerBox) drawBackgroundPart (can canvas.Canvas) {
 	if can == nil { return }
 	pen := can.Pen()
-	pen.Fill(this.color)
+	
-	pen.Texture(this.texture)
+	// textureMode := tomo.TextureMode(this.attrTextureMode.Value())
+	texture     := this.attrTexture.Value().Texture
+	col         := this.attrColor.Value().Color
+	if col == nil { col = color.Transparent }
+	
+	pen.Fill(col)
+	pen.Texture(texture)
 
 	if this.transparent() && this.parent != nil {
 		this.parent.drawBackgroundPart(can)
@@ -225,9 +298,13 @@ func (this *containerBox) getCanvas () canvas.Canvas {
 	return this.canvas.Value()
 }
 
+func (this *containerBox) getInnerClippingBounds () image.Rectangle {
+	return this.innerClippingBounds
+}
+
 func (this *containerBox) notifyMinimumSizeChange (child anyBox) {
 	this.invalidateMinimum()
-	size   := child.MinimumSize()
+	size   := child.minimumSize()
 	bounds := child.Bounds()
 	if bounds.Dx() < size.X || bounds.Dy() < size.Y {
 		this.invalidateLayout()
@@ -235,23 +312,28 @@ func (this *containerBox) notifyMinimumSizeChange (child anyBox) {
 }
 
 func (this *containerBox) layoutHints () tomo.LayoutHints {
+	overflow := this.attrOverflow.Value()
+	align    := this.attrAlign.Value()
+	gap      := image.Point(this.attrGap.Value())
 	return tomo.LayoutHints {
-		OverflowX: this.hOverflow,
+		OverflowX: overflow.X,
-		OverflowY: this.vOverflow,
+		OverflowY: overflow.Y,
-		AlignX:    this.hAlign,
+		AlignX:    align.X,
-		AlignY:    this.vAlign,
+		AlignY:    align.Y,
-		Gap:       this.gap,
+		Gap:       gap,
 	}
 }
 
 func (this *containerBox) contentMinimum () image.Point {
+	overflow := this.attrOverflow.Value()
 	minimum  := this.box.contentMinimum()
-	if this.layout != nil {
+	layout := this.attrLayout.Value().Layout
-		layoutMinimum := this.layout.MinimumSize (
+	if layout != nil {
+		layoutMinimum := layout.MinimumSize (
 			this.layoutHints(),
-			this.children)
+			this.boxQuerier())
-		if this.hOverflow { layoutMinimum.X = 0 }
+		if overflow.X { layoutMinimum.X = 0 }
-		if this.vOverflow { layoutMinimum.Y = 0 }
+		if overflow.Y { layoutMinimum.Y = 0 }
 		minimum = minimum.Add(layoutMinimum)
 	}
 	return minimum
@@ -260,25 +342,27 @@ func (this *containerBox) contentMinimum () image.Point {
 func (this *containerBox) doLayout () {
 	this.box.doLayout()
 	previousContentBounds := this.contentBounds
+	layout := this.attrLayout.Value().Layout
 
 	// by default, use innerBounds (translated to 0, 0) for contentBounds.
 	// if a direction overflows, use the layout's minimum size for it.
 	var minimum image.Point
-	if this.layout != nil {
+	if layout != nil {
-		minimum = this.layout.MinimumSize (
+		minimum = layout.MinimumSize (
 			this.layoutHints(),
-			this.children)
+			this.boxQuerier())
 	}
 	innerBounds := this.InnerBounds()
+	overflow    := this.attrOverflow.Value()
 	this.contentBounds = innerBounds.Sub(innerBounds.Min)
-	if this.hOverflow { this.contentBounds.Max.X = this.contentBounds.Min.X + minimum.X }
+	if overflow.X { this.contentBounds.Max.X = this.contentBounds.Min.X + minimum.X }
-	if this.vOverflow { this.contentBounds.Max.Y = this.contentBounds.Min.Y + minimum.Y }
+	if overflow.Y { this.contentBounds.Max.Y = this.contentBounds.Min.Y + minimum.Y }
 	
 	// arrange children
-	if this.layout != nil {
+	if layout != nil {
 		layoutHints := this.layoutHints()
 		layoutHints.Bounds = this.contentBounds
-		this.layout.Arrange(layoutHints, this.children)
+		layout.Arrange(layoutHints, this.boxArranger())
 	}
 
 	// build an accurate contentBounds by unioning the bounds of all child
@@ -294,7 +378,7 @@ func (this *containerBox) doLayout () {
 
 	// offset children and contentBounds by scroll
 	for _, box := range this.children {
-		box.SetBounds(box.Bounds().Add(this.scroll).Add(innerBounds.Min))
+		box.setBounds(box.Bounds().Add(this.scroll).Add(innerBounds.Min))
 	}
 	this.contentBounds = this.contentBounds.Add(this.scroll)
 	
@@ -327,6 +411,14 @@ func (this *containerBox) constrainScroll () {
 	}
 }
 
+func (this *containerBox) boxQuerier () boxQuerier {
+	return boxQuerier(this.children)
+}
+
+func (this *containerBox) boxArranger () boxArranger {
+	return boxArranger(this.children)
+}
+
 func (this *containerBox) recursiveRedo () {
 	this.doLayout()
 	this.doDraw()
@@ -335,12 +427,26 @@ func (this *containerBox) recursiveRedo () {
 	}
 }
 
-func (this *containerBox) boxUnder (point image.Point, category eventCategory) anyBox {
+func (this *containerBox) recursiveLoseCanvas () {
+	this.box.recursiveLoseCanvas()
+	for _, child := range this.children {
+		child.(anyBox).recursiveLoseCanvas()
+	}
+}
+
+func (this *containerBox) recursiveReApply () {
+	this.box.recursiveReApply()
+	for _, child := range this.children {
+		child.(anyBox).recursiveReApply()
+	}
+}
+
+func (this *containerBox) boxUnder (point image.Point) anyBox {
 	if !point.In(this.bounds) { return nil }
 
-	if !this.capture[category] {
+	if !this.mask {
 		for _, box := range this.children {
-			candidate := box.(anyBox).boxUnder(point, category)
+			candidate := box.(anyBox).boxUnder(point)
 			if candidate != nil { return candidate }
 		}
 	}
@@ -368,6 +474,6 @@ func (this *containerBox) propagateAlt (callback func (anyBox) bool) bool {
 	return true
 }
 
-func (this *containerBox) captures (category eventCategory) bool {
+func (this *containerBox) masks () bool {
-	return this.capture[category]
+	return this.mask
 }

internal/system/event.go

@@ -2,6 +2,10 @@ package system
 
 import "image"
 import "git.tebibyte.media/tomo/tomo/input"
+import "git.tebibyte.media/tomo/tomo/config"
+
+// TODO: once go v1.23 comes out, replace the explicit iterator calls here with
+// range loops
 
 // HandleFocusChange sets whether or not the window containing this Hierarchy
 // has input focus.
@@ -20,14 +24,30 @@ func (this *Hierarchy) HandleModifiers (modifiers input.Modifiers) {
 // event which triggers this comes with modifier key information,
 // HandleModifiers must be called *before* HandleKeyDown.
 func (this *Hierarchy) HandleKeyDown (key input.Key, numberPad bool) {
-	if key == input.KeyTab && this.modifiers.Alt {
+	caught := false
-		if this.modifiers.Shift {
+	if this.anyFocused() {
-			this.focusPrevious()
+		this.keyboardTargets(func (target anyBox) bool {
-		} else {
+			if target.handleKeyDown(key, numberPad) {
-			this.focusNext()
+				caught = true
+				return false
 			}
-	} else if target := this.keyboardTarget(); target != nil {
+			return true
-		target.handleKeyDown(key, numberPad)
+		})
+	} else {
+		if this.root != nil {
+			caught = this.root.handleKeyDown(key, numberPad)
+		}
+	}
+	if caught { return }
+
+	switch input.KC(key, this.modifiers) {
+	case config.KeyChordFocusNext:                this.focusNext()
+	case config.KeyChordFocusPrevious:            this.focusPrevious()
+	// TODO: up, down, left, and right should find a box to the top, bottom,
+	// left, and right respectively to move the focus to. we might want to
+	// have four corresponding key chords in tomo/config.
+	case input.KC(input.KeyDown, input.ModNone):  this.focusNext()
+	case input.KC(input.KeyUp,   input.ModNone):  this.focusPrevious()
 	}
 }
 
@@ -35,63 +55,88 @@ func (this *Hierarchy) HandleKeyDown (key input.Key, numberPad bool) {
 // which triggers this comes with modifier key information, HandleModifiers must
 // be called *before* HandleKeyUp.
 func (this *Hierarchy) HandleKeyUp (key input.Key, numberPad bool) {
-	if target := this.keyboardTarget(); target != nil {
+	if this.anyFocused() {
-		target.handleKeyUp(key, numberPad)
+		this.keyboardTargets(func (target anyBox) bool {
+			if target.handleKeyUp(key, numberPad) {
+				return false
+			}
+			return true
+		})
+	} else {
+		if this.root != nil {
+			this.root.handleKeyUp(key, numberPad)
+		}
 	}
 }
 
-// HandleMouseDown sends a mouse down event to the Box positioned underneath the
+// HandleMouseDown sends a mouse down event to the Boxes positioned underneath
-// mouse cursor and marks it as being "dragged" by that mouse button. If the
+// the mouse cursor and marks them as being "dragged" by that mouse button,
-// event which triggers this comes with mouse position information,
+// starting at the first Box to mask events and ending at the first box to
-// HandleMouseMove must be called *before* HandleMouseDown.
+// catch the event. If the event which triggers this comes with mouse position
+// information, HandleMouseMove must be called *before* HandleMouseDown.
 func (this *Hierarchy) HandleMouseDown (button input.Button) {
-	underneath := this.boxUnder(this.mousePosition, eventCategoryMouse)
+	boxes := []anyBox { }
-	this.drags[button] = underneath
+	first := true
-	if underneath != nil {
+	this.boxesUnder(this.mousePosition)(func (box anyBox) bool {
-		underneath.handleMouseDown(button)
+		if first {
+			if box.canBeFocused() {
+				this.focus(box)
+			} else {
+				this.focus(nil)
 			}
+			first = false
+		}
+		boxes = append(boxes, box)
+		return !box.handleMouseDown(button)
+	})
+	this.drags[button] = boxes
 }
 
-// HandleMouseUp sends a mouse up event to the Box currently being "dragged" by
+// HandleMouseUp sends a mouse up event to the Boxes currently being "dragged"
-// the specified mouse button, and marks it as being "not dragged" by that mouse
+// by the specified mouse button, and marks them as being "not dragged" by that
-// button. If the event which triggers this comes with mouse position
+// mouse button. If the event which triggers this comes with mouse position
 // information, HandleMouseMove must be caleld *before* HandleMouseUp
 func (this *Hierarchy) HandleMouseUp (button input.Button) {
-	dragging := this.drags[button]
+	for _, box := range this.drags[button] {
-	this.drags[button] = nil
+		box.handleMouseUp(button)
-	if dragging != nil {
-		dragging.handleMouseUp(button)
 	}
+	this.drags[button] = nil
 }
 
 // HandleMouseMove sends a mouse move event to any Boxes currently being
-// "dragged" by a mouse button. If none are, it sends the event to the Box which
+// "dragged" by a mouse button. If none are, it sends the event to the Boxes
-// is underneath the mouse pointer.
+// which are underneath the mouse pointer, starting at the first Box to mask
+// events and ending at the first box to catch the event.
 func (this *Hierarchy) HandleMouseMove (position image.Point) {
 	if this.mousePosition == position { return }
 	this.mousePosition = position
 
-	handled := false
+	dragged := false
-	for _, child := range this.drags {
+	for _, dragSet := range this.drags {
-		if child == nil { continue }
+		for _, box := range dragSet {
-		child.handleMouseMove()
+			if box.handleMouseMove() { break }
-		handled = true
+			dragged = true
 		}
+	}
+	if dragged { return }
 
-	underneath := this.boxUnder(position, eventCategoryMouse)
+	// TODO we can hover over multiple boxes at once. however, any way of
-	if underneath != nil {
+	// detecting this involves several slice allocations every time we
-		this.hover(underneath)
+	// process a MouseMove event. perhaps we just ought to suck it up and do
-		if !handled {
+	// it. or perhaps doing *this* is the better way? we may never know.
-			underneath.handleMouseMove()
+	box := this.boxUnder(position)
-		}
+	if box != nil {
+		box := this.considerMaskingParents(box)
+		this.hover(box)
+		box.handleMouseMove()
 	}
 }
 
 // HandleScroll sends a scroll event to the Box currently underneath the mouse
-// cursor. 
+// cursor. If the event which triggers this comes with mouse position
+// information, HandleMouseMove must be called *before* HandleScroll.
 func (this *Hierarchy) HandleScroll (x, y float64) {
-	underneath := this.boxUnder(this.mousePosition, eventCategoryScroll)
+	this.boxesUnder(this.mousePosition)(func (box anyBox) bool {
-	if underneath != nil {
+		return !box.handleScroll(x, y)
-		underneath.handleScroll(x, y)
+	})
-	}
 }

internal/system/hierarchy.go

@@ -4,7 +4,8 @@ import "image"
 import "git.tebibyte.media/tomo/tomo"
 import "git.tebibyte.media/tomo/tomo/input"
 import "git.tebibyte.media/tomo/tomo/canvas"
-import "git.tebibyte.media/tomo/backend/internal/util"
+import "git.tebibyte.media/tomo/backend/style"
+import "git.tebibyte.media/sashakoshka/goutil/container"
 
 // Hierarchy is coupled to a tomo.Window implementation, and manages a tree of
 // Boxes.
@@ -21,12 +22,12 @@ type Hierarchy struct {
 	
 	modifiers     input.Modifiers
 	mousePosition image.Point
-	drags         [10]anyBox
+	drags         [10][]anyBox
 	minimumSize   image.Point
 
-	needMinimum  util.Set[anyBox]
+	needStyle    ucontainer.Set[anyBox]
-	needLayout   util.Set[anyBox]
+	needLayout   ucontainer.Set[anyBox]
-	needDraw     util.Set[anyBox]
+	needDraw     ucontainer.Set[anyBox]
 	needRedo     bool
 	minimumClean bool
 }
@@ -52,10 +53,11 @@ func (this *System) NewHierarchy (link WindowLink) *Hierarchy {
 	hierarchy := &Hierarchy {
 		system:      this,
 		link:        link,
-		needMinimum: make(util.Set[anyBox]),
+		needStyle:   make(ucontainer.Set[anyBox]),
-		needLayout:  make(util.Set[anyBox]),
+		needLayout:  make(ucontainer.Set[anyBox]),
-		needDraw:    make(util.Set[anyBox]),
+		needDraw:    make(ucontainer.Set[anyBox]),
 	}
+	this.hierarchies.Add(hierarchy)
 	return hierarchy
 }
 
@@ -85,7 +87,7 @@ func (this *Hierarchy) Empty () bool {
 // draw to. The Hierarchy will use the canvas.Canvas's bounds to lay itself out.
 func (this *Hierarchy) SetCanvas (can canvas.Canvas) {
 	this.canvas = can
-	if this.root != nil { this.root.loseCanvas() }
+	if this.root != nil { this.root.recursiveLoseCanvas() }
 	this.needRedo = true
 }
 
@@ -94,6 +96,16 @@ func (this *Hierarchy) MinimumSize () image.Point {
 	return this.minimumSize
 }
 
+// Modifiers returns the current modifier keys being held.
+func (this *Hierarchy) Modifiers () input.Modifiers {
+	return this.modifiers
+}
+
+// MousePosition returns the current mouse position.
+func (this *Hierarchy) MousePosition () image.Point {
+	return this.mousePosition
+}
+
 // AfterEvent should be called at the end of every event cycle.
 func (this *Hierarchy) AfterEvent () {
 	if this.canvas == nil { return }
@@ -103,7 +115,7 @@ func (this *Hierarchy) AfterEvent () {
 		childBounds := this.canvas.Bounds()
 		childBounds = childBounds.Sub(childBounds.Min)
 		if this.root != nil {
-			this.root.SetBounds(childBounds)	
+			this.root.setBounds(childBounds)	
 		}
 
 		// full relayout/redraw
@@ -115,8 +127,8 @@ func (this *Hierarchy) AfterEvent () {
 		return
 	}
 
-	for len(this.needMinimum) > 0 {
+	for len(this.needStyle) > 0 {
-		this.needMinimum.Pop().doMinimumSize()
+		this.needStyle.Pop().doStyle()
 	}
 	if !this.minimumClean {
 		this.doMinimumSize()
@@ -135,6 +147,20 @@ func (this *Hierarchy) AfterEvent () {
 	}
 }
 
+// Close closes the Hierarchy. This should be called when the Window that
+// contains it has been closed.
+func (this *Hierarchy) Close () {
+	this.system.removeHierarchy(this)
+}
+
+func (this *Hierarchy) setStyle () {
+	if this.root != nil { this.root.recursiveReApply() }
+}
+
+func (this *Hierarchy) setIconSet () {
+	if this.root != nil { this.root.recursiveReApply() }
+}
+
 func (this *Hierarchy) getHierarchy () *Hierarchy {
 	return this
 }
@@ -143,10 +169,34 @@ func (this *Hierarchy) getWindow () tomo.Window {
 	return this.link.GetWindow()
 }
 
+func (this *Hierarchy) getStyle () *style.Style {
+	return this.system.style
+}
+
+func (this *Hierarchy) getIconSet () style.IconSet {
+	return this.system.iconSet
+}
+
+func (this *Hierarchy) getFaceSet () style.FaceSet {
+	return this.system.faceSet
+}
+
+func (this *Hierarchy) getStyleNonce () int {
+	return this.system.styleNonce
+}
+
+func (this *Hierarchy) getIconSetNonce () int {
+	return this.system.iconSetNonce
+}
+
 func (this *Hierarchy) getCanvas () canvas.Canvas {
 	return this.canvas
 }
 
+func (this *Hierarchy) getInnerClippingBounds () image.Rectangle {
+	return this.canvas.Bounds()
+}
+
 func (this *Hierarchy) getModifiers () input.Modifiers {
 	return this.modifiers
 }
@@ -159,8 +209,8 @@ func (this *Hierarchy) notifyMinimumSizeChange (anyBox) {
 	this.minimumClean = false
 }
 
-func (this *Hierarchy) invalidateMinimum (box anyBox) {
+func (this *Hierarchy) invalidateStyle (box anyBox) {
-	this.needMinimum.Add(box)
+	this.needStyle.Add(box)
 }
 
 func (this *Hierarchy) invalidateDraw (box anyBox) {
@@ -208,29 +258,59 @@ func (this *Hierarchy) anyFocused () bool {
 	return this.focused != nil
 }
 
-func (this *Hierarchy) boxUnder (point image.Point, category eventCategory) anyBox {
+func (this *Hierarchy) masks () bool {
-	if this.root == nil { return nil }
-	return this.root.boxUnder(point, category)
-}
-
-func (this *Hierarchy) captures (eventCategory) bool {
 	return false
 }
 
-func (this *Hierarchy) keyboardTarget () anyBox {
+func (this *Hierarchy) boxUnder (point image.Point) anyBox {
+	if this.root == nil { return nil }
+	return this.root.boxUnder(point)
+}
+
+func (this *Hierarchy) parents (box anyBox) func (func (anyBox) bool) {
+	return func (yield func (anyBox) bool) {
+		for box != nil && yield(box) {
+			parent, ok := box.getParent().(anyBox)
+			if !ok { break }
+			box = parent
+		}
+	}
+}
+
+func (this *Hierarchy) boxesUnder (point image.Point) func (func (anyBox) bool) {
+	return this.parents(this.boxUnder(point))
+}
+
+func (this *Hierarchy) keyboardTargets (yield func (anyBox) bool) {
 	focused := this.focused
-	if focused == nil { return nil }
+	if focused == nil { return }
-	parent := focused.getParent()
+	this.parents(this.considerMaskingParents(focused))(yield)
+}
+
+func (this *Hierarchy) considerMaskingParents (box anyBox) anyBox {
+	parent := box.getParent()
 	for {
 		parentBox, ok := parent.(anyBox)
 		if !ok { break }
-		if parent.captures(eventCategoryKeyboard) {
+		if parent.masks() {
 			return parentBox
 		}
 		parent = parentBox.getParent()
 	}
+	return box
+}
 
-	return focused
+func (this *Hierarchy) isMasked (box anyBox) bool {
+	parent := box.getParent()
+	for {
+		parentBox, ok := parent.(anyBox)
+		if !ok { break }
+		if parent.masks() {
+			return true
+		}
+		parent = parentBox.getParent()
+	}
+	return false
 }
 
 func (this *Hierarchy) focusNext () {
@@ -239,7 +319,7 @@ func (this *Hierarchy) focusNext () {
 	this.propagateAlt(func (box anyBox) bool {
 		if found {
 			// looking for the next box to select
-			if box.canBeFocused() {
+			if box.canBeFocused() && !this.isMasked(box) {
 				// found it
 				this.focus(box)
 				focused = true
@@ -264,7 +344,7 @@ func (this *Hierarchy) focusPrevious () {
 		if box == this.focused {
 			return false
 		}
-		if box.canBeFocused() { behind = box }
+		if box.canBeFocused() && !this.isMasked(box) { behind = box }
 		return true
 	})
 	this.focus(behind)
@@ -287,13 +367,25 @@ func (this *Hierarchy) drawBackgroundPart (canvas.Canvas) {
 	// if so, windows should be transparent if the color has transparency
 }
 
+// var minimumSizeCount = 0
 func (this *Hierarchy) doMinimumSize () {
 	this.minimumClean = true
+	// println("doMinimumSize", minimumSizeCount)
+	// minimumSizeCount ++
 
+	previousMinimumSize := this.minimumSize
 	this.minimumSize = image.Point { }
 	if this.root != nil {
-		this.minimumSize = this.root.MinimumSize()
+		this.minimumSize = this.root.minimumSize()
 	}
 
+	if previousMinimumSize != this.minimumSize {
 		this.link.NotifyMinimumSizeChange()
 	}
+}
+
+func (this *Hierarchy) newStyleApplicator () *styleApplicator {
+	return &styleApplicator {
+		style: this.getStyle(),
+	}
+}

internal/system/internal-iface.go

@@ -5,14 +5,6 @@ import "git.tebibyte.media/tomo/tomo"
 import "git.tebibyte.media/tomo/tomo/input"
 import "git.tebibyte.media/tomo/tomo/canvas"
 
-// eventCategory lists kinds of Tomo events.
-type eventCategory int; const (
-	eventCategoryDND eventCategory = iota
-	eventCategoryMouse
-	eventCategoryScroll
-	eventCategoryKeyboard
-)
-
 // parent is any hierarchical type which contains other boxes. This can be a
 // Hierarchy, containerBox, etc.
 type parent interface {
@@ -20,6 +12,9 @@ type parent interface {
 	getHierarchy            () *Hierarchy
 	// canvas returns the canvas held by the parent.
 	getCanvas               () canvas.Canvas
+	// getInnerClippingBounds returns the area of the canvas that children
+	// can draw to.
+	getInnerClippingBounds  () image.Rectangle
 	// notifyMinimumSizeChange informs the parent that the minimum size of
 	// one of its children has changed.
 	notifyMinimumSizeChange (anyBox)
@@ -27,9 +22,8 @@ type parent interface {
 	// given Canvas, filling the Canvas's entire bounds. The origin (0, 0)
 	// of the given Canvas is assumed to be the same as the parent's canvas.
 	drawBackgroundPart      (canvas.Canvas)
-	// captures returns whether or not this parent captures the given event
+	// catches returns whether or not this parent masks events.
-	// category.
+	masks                   () bool
-	captures                (eventCategory) bool
 }
 
 // anyBox is any tomo.Box type that is implemented by this package.
@@ -44,10 +38,10 @@ type anyBox interface {
 	
 	// doDraw re-paints the anyBox onto its currently held Canvas non-recursively
 	// doLayout re-calculates the layout of the anyBox non-recursively
-	// doMinimumSize re-calculates the minimum size of the anyBox non-recursively
+	// doStyle re-applies the box's style non-recursively
 	doDraw   ()
 	doLayout ()
-	doMinimumSize ()
+	doStyle  ()
 
 	// flushActionQueue performs any queued actions, like invalidating the
 	// minimum size or grabbing input focus.
@@ -57,8 +51,14 @@ type anyBox interface {
 	recursiveRedo       ()
 	// loseCanvas causes this anyBox and its children (if applicable) to
 	// lose their canvases and re-cut them as needed.
-	loseCanvas       ()
+	recursiveLoseCanvas ()
+	// recursiveReAppply causes this anyBox and its children (if applicable)
+	// to check whether they have an outdated style or icon set, and if so,
+	// update it and trigger the appropriate event broadcasters.
+	recursiveReApply    ()
 
+	// minimumSize returns the box's minimum size
+	minimumSize      () image.Point
 	// contentMinimum returns the minimum dimensions of this box's content
 	contentMinimum   () image.Point
 	// canBeFocused returns whether or not this anyBox is capable of holding
@@ -67,12 +67,21 @@ type anyBox interface {
 	// boxUnder returns the anyBox under the mouse pointer. It can be this
 	// anyBox, one of its children (if applicable). It must return nil if
 	// the mouse pointer is outside of this anyBox's bounds.
-	boxUnder         (image.Point, eventCategory) anyBox
+	boxUnder         (image.Point) anyBox
 	// transparent returns whether or not this anyBox contains transparent
 	// pixels or not, and thus needs its parent's backround to be painted
 	// underneath it.
 	transparent      () bool
 
+	// setBounds sets the box's bounds.
+	setBounds (image.Rectangle)
+	// setAttr sets an attribute at the user or style level depending
+	// on the value of user.
+	setAttr   (attr tomo.Attr, user bool)
+	// unsetAttr unsets an attribute at the user or style level depending
+	// on the value of user.
+	unsetAttr (kind tomo.AttrKind, user bool)
+
 	// propagate recursively calls a function on this anyBox, and all of its
 	// children (if applicable) The normal propagate behavior calls the
 	// callback on all children before calling it on this anyBox, and
@@ -88,12 +97,21 @@ type anyBox interface {
 	// handleDndDrop     (data.Data)
 	handleMouseEnter  ()
 	handleMouseLeave  ()
-	handleMouseMove  ()
+	handleMouseMove   ()                 bool
-	handleMouseDown  (input.Button)
+	handleMouseDown   (input.Button)     bool
-	handleMouseUp    (input.Button)
+	handleMouseUp     (input.Button)     bool
-	handleScroll     (float64, float64)
+	handleScroll      (float64, float64) bool
-	handleKeyDown    (input.Key, bool)
+	handleKeyDown     (input.Key, bool)  bool
-	handleKeyUp      (input.Key, bool)
+	handleKeyUp       (input.Key, bool)  bool
+}
+
+type anyContentBox interface {
+	anyBox
+
+	// recommendedWidth returns the recommended width for a given height.
+	recommendedWidth (int) int
+	// recommendedHeight returns the recommended height for a given height.
+	recommendedHeight (int) int
 }
 
 func assertAnyBox (unknown tomo.Box) anyBox {

internal/system/style.go

@@ -0,0 +1,60 @@
+package system
+
+import "git.tebibyte.media/tomo/tomo"
+import "git.tebibyte.media/tomo/backend/style"
+
+type styleApplicator struct {
+	style      *style.Style
+	role       tomo.Role
+	rules      []style.Rule
+	currentSet style.AttrSet
+}
+
+func (this *styleApplicator) apply (box anyBox) {
+	if box.Role() != this.role {
+		this.role = box.Role()
+		// the role has changed, so re-cache the list of rules
+		this.rules = nil
+		for _, rule := range this.style.Rules {
+			role := box.Role()
+			// blank fields match anything
+			if rule.Role.Package == "" { role.Package = "" }
+			if rule.Role.Object  == "" { role.Object  = "" }
+			if rule.Role == role {
+				this.rules = append(this.rules, rule)
+			}
+		}
+	}
+
+	// compile list of attributes by searching through the cached ruleset
+	attrs := make(style.AttrSet)
+	for _, rule := range this.rules {
+		satisifed := true
+		for _, tag := range rule.Tags {
+			if !box.Tag(tag) {
+				satisifed = false
+				break
+			}
+		}
+
+		if satisifed {
+			attrs.MergeOver(rule.Set)
+		}
+	}
+
+	// reset an attribute if it is no longer specified
+	if this.currentSet != nil {
+		for kind := range this.currentSet {
+			_, exists := attrs[kind]
+			if !exists {
+				box.unsetAttr(kind, false)
+			}
+		}
+	}
+
+	// apply that list of attributes
+	this.currentSet = attrs
+	for _, attr := range attrs {
+		box.setAttr(attr, false)
+	}
+}

internal/system/system.go

@@ -3,11 +3,21 @@ package system
 import "io"
 import "image"
 import "git.tebibyte.media/tomo/tomo/canvas"
+import "git.tebibyte.media/tomo/backend/style"
+import "git.tebibyte.media/sashakoshka/goutil/container"
 
 // System is coupled to a tomo.Backend implementation, and manages Hierarchies
 // and Boxes.
 type System struct {
 	link BackendLink
+
+	style        *style.Style
+	iconSet      style.IconSet
+	faceSet      style.FaceSet
+	styleNonce   int
+	iconSetNonce int
+	
+	hierarchies ucontainer.Set[*Hierarchy]
 }
 
 // BackendLink allows the System to call up into the tomo.Backend implementation
@@ -31,5 +41,35 @@ type SurfaceLink interface {
 func New (link BackendLink) *System {
 	return &System {
 		link:        link,
+		hierarchies: make(ucontainer.Set[*Hierarchy]),
 	}
 }
+
+// SetStyle sets the style that is applied to objects, and notifies them
+// that the style has changed.
+func (this *System) SetStyle (style *style.Style) {
+	this.style = style
+	this.styleNonce ++
+	for hierarchy := range this.hierarchies {
+		hierarchy.setStyle()
+	}
+}
+
+// SetIconSet sets the icon set that provides icon textures, and notifies
+// objects that the icons have changed.
+func (this *System) SetIconSet (iconSet style.IconSet) {
+	this.iconSet = iconSet
+	this.iconSetNonce ++
+	for hierarchy := range this.hierarchies {
+		hierarchy.setIconSet()
+	}
+}
+
+// SetFaceSet sets the face set that provides font faces.
+func (this *System) SetFaceSet (faceSet style.FaceSet) {
+	this.faceSet = faceSet
+}
+
+func (this *System) removeHierarchy (hierarchy *Hierarchy) {
+	delete(this.hierarchies, hierarchy)
+}

internal/system/textbox.go

@@ -1,6 +1,7 @@
 package system
 
 import "image"
+import "unicode"
 import "image/color"
 import "golang.org/x/image/font"
 import "git.tebibyte.media/tomo/tomo"
@@ -10,28 +11,33 @@ import "git.tebibyte.media/tomo/tomo/text"
 import "git.tebibyte.media/tomo/tomo/input"
 import "git.tebibyte.media/tomo/tomo/event"
 import "git.tebibyte.media/tomo/tomo/canvas"
+import "git.tebibyte.media/tomo/backend/internal/util"
+import "git.tebibyte.media/sashakoshka/goutil/container"
 
 type textBox struct {
 	*box
 
-	hOverflow, vOverflow bool
 	contentBounds image.Rectangle
 	scroll        image.Point
 
-	text      string
+	attrTextColor attrHierarchy[tomo.AttrTextColor]
-	textColor color.Color
+	attrDotColor  attrHierarchy[tomo.AttrDotColor]
-	face      font.Face
+	attrFace      attrHierarchy[tomo.AttrFace]
-	wrap      bool
+	attrWrap      attrHierarchy[tomo.AttrWrap]
-	hAlign    tomo.Align
+	attrAlign     attrHierarchy[tomo.AttrAlign]
-	vAlign    tomo.Align
+	attrOverflow  attrHierarchy[tomo.AttrOverflow]
 
+	text        string
+	runes       []rune
 	selectable  bool
 	selecting   bool
 	selectStart int
 	dot         text.Dot
-	dotColor    color.Color
+	desiredX    fixed.Int26_6
 
 	drawer     typeset.Drawer
+	face       util.Cycler[font.Face]
+	lineHeight ucontainer.Memo[fixed.Int26_6]
 
 	on struct {
 		contentBoundsChange event.FuncBroadcaster
@@ -40,20 +46,20 @@ type textBox struct {
 }
 
 func (this *System) NewTextBox () tomo.TextBox {
-	box := &textBox {
+	box := &textBox { }
-		textColor: color.Black,
-		dotColor:  color.RGBA { B: 255, G: 255, A: 255 },
-	}
 	box.box = this.newBox(box)
+	box.attrTextColor.SetFallback(tomo.ATextColor(color.Black))
+	box.attrDotColor.SetFallback(tomo.ADotColor(color.RGBA { G: 255, B: 255, A: 255}))
+	box.lineHeight = ucontainer.NewMemo(func () fixed.Int26_6 {
+		face := box.face.Value()
+		if face == nil { return 0 }
+		metrics := face.Metrics()
+		return metrics.Height
+	})
 	return box
 }
 
-func (this *textBox) SetOverflow (horizontal, vertical bool) {
+// ----- public methods ----------------------------------------------------- //
-	if this.hOverflow == horizontal && this.vOverflow == vertical { return }
-	this.hOverflow = horizontal
-	this.vOverflow = vertical
-	this.invalidateLayout()
-}
 
 func (this *textBox) ContentBounds () image.Rectangle {
 	return this.contentBounds
@@ -65,6 +71,15 @@ func (this *textBox) ScrollTo (point image.Point) {
 	this.invalidateLayout()
 }
 
+func (this *textBox) RecommendedHeight (width int) int {
+	return this.drawer.ReccomendedHeightFor(width) + this.borderAndPaddingSum().Vertical()
+}
+
+func (this *textBox) RecommendedWidth (height int) int {
+	// TODO maybe not the best idea?
+	return this.minimumSize().X
+}
+
 func (this *textBox) OnContentBoundsChange (callback func()) event.Cookie {
 	return this.on.contentBoundsChange.Connect(callback)
 }
@@ -72,28 +87,8 @@ func (this *textBox) OnContentBoundsChange (callback func()) event.Cookie {
 func (this *textBox) SetText (text string) {
 	if this.text == text { return }
 	this.text  = text
-	this.drawer.SetText([]rune(text))
+	this.runes = []rune(text)
-	this.invalidateMinimum()
+	this.drawer.SetText(this.runes)
-	this.invalidateLayout()
-}
-
-func (this *textBox) SetTextColor (c color.Color) {
-	if this.textColor == c { return }
-	this.textColor = c
-	this.invalidateDraw()
-}
-
-func (this *textBox) SetFace (face font.Face) {
-	if this.face == face { return }
-	this.face = face
-	this.drawer.SetFace(face)
-	this.invalidateMinimum()
-	this.invalidateLayout()
-}
-
-func (this *textBox) SetWrap (wrap bool) {
-	if this.wrap == wrap { return }
-	this.drawer.SetWrap(wrap)
 	this.invalidateMinimum()
 	this.invalidateLayout()
 }
@@ -103,22 +98,42 @@ func (this *textBox) SetSelectable (selectable bool) {
 	this.selectable = selectable
 }
 
-func (this *textBox) SetDotColor (c color.Color) {
+func (this *textBox) Select (dot text.Dot) {
-	if this.dotColor == c { return }
+	this.selec(dot)
-	this.dotColor = c
-	if !this.dot.Empty() {
-		this.invalidateDraw()
-	}
 }
 
-func (this *textBox) Select (dot text.Dot) {
+func (this *textBox) selec (dot text.Dot) bool {
-	if !this.selectable { return }
+	if this.selectWithoutResettingDesiredX(dot) {
-	if this.dot == dot  { return }
+		this.desiredX = fixed.I(0)
+		return true
+	}
+	return false
+}
+
+func (this *textBox) selectWithoutResettingDesiredX (dot text.Dot) bool {
+	if !this.selectable { return false }
+	if this.dot == dot  { return false }
 	this.SetFocused(true)
 	this.dot = dot
 	this.scrollToDot()
-	this.on.dotChange.Broadcast()
 	this.invalidateDraw()
+	return true
+}
+
+func (this *textBox) userSelect (dot text.Dot) bool {
+	if this.selec(dot) {
+		this.on.dotChange.Broadcast()
+		return true
+	}
+	return false
+}
+
+func (this *textBox) userSelectWithoutResettingDesiredX (dot text.Dot) bool {
+	if this.selectWithoutResettingDesiredX(dot) {
+		this.on.dotChange.Broadcast()
+		return true
+	}
+	return false
 }
 
 func (this *textBox) Dot () text.Dot {
@@ -129,21 +144,19 @@ func (this *textBox) OnDotChange (callback func ()) event.Cookie {
 	return this.on.dotChange.Connect(callback)
 }
 
-func (this *textBox) SetAlign (x, y tomo.Align) {
+// ----- private methods ---------------------------------------------------- //
-	if this.hAlign == x && this.vAlign == y { return }
-	this.hAlign = x
-	this.vAlign = y
-	this.drawer.SetAlign(typeset.Align(x), typeset.Align(y))
-	this.invalidateDraw()
-}
 
 func (this *textBox) Draw (can canvas.Canvas) {
 	if can == nil { return }
-	this.drawBorders(can)
-	pen := can.Pen()
-	pen.Fill(this.color)
-	pen.Texture(this.texture)
 
+	texture := this.attrTexture.Value().Texture
+	col     := this.attrColor.Value().Color
+	
+	this.drawBorders(can)
+	
+	pen := can.Pen()
+	pen.Fill(col)
+	pen.Texture(texture)
 	if this.transparent() && this.parent != nil {
 		this.parent.drawBackgroundPart(can)
 	}
@@ -153,8 +166,96 @@ func (this *textBox) Draw (can canvas.Canvas) {
 		this.drawDot(can)
 	}
 
-	if this.face == nil { return }
+	if this.face.Value() != nil {
-	this.drawer.Draw(can, this.textColor, this.textOffset())
+		textColor := this.attrTextColor.Value().Color
+		this.drawer.Draw(can, textColor, this.textOffset())
+	}
+}
+
+func (this *textBox) setAttr (attr tomo.Attr, user bool) {
+	switch attr := attr.(type) {
+	case tomo.AttrTextColor:
+		if this.attrTextColor.Set(attr, user) && !this.dot.Empty() {
+			this.invalidateDraw()
+		}
+		
+	case tomo.AttrDotColor:
+		if this.attrDotColor.Set(attr, user) && !this.dot.Empty() {
+			this.invalidateDraw()
+		}
+		
+	case tomo.AttrFace:
+		if this.attrFace.Set(attr, user) {
+			this.handleFaceChange()
+		}
+		
+	case tomo.AttrWrap:
+		if this.attrWrap.Set(attr, user) {
+			this.drawer.SetWrap(bool(this.attrWrap.Value()))
+			this.invalidateMinimum()
+			this.invalidateLayout()
+		}
+		
+	case tomo.AttrAlign:
+		if this.attrAlign.Set(attr, user) {
+			align := this.attrAlign.Value()
+			this.drawer.SetAlign (
+				typeset.Align(align.X),
+				typeset.Align(align.Y))
+			this.invalidateDraw()
+		}
+		
+	case tomo.AttrOverflow:
+		if this.attrOverflow.Set(attr, user) {
+			this.invalidateMinimum()
+			this.invalidateLayout()
+		}
+		
+	default: this.box.setAttr(attr, user)
+	}
+}
+
+func (this *textBox) unsetAttr (kind tomo.AttrKind, user bool) {
+	switch kind {
+	case tomo.AttrKindTextColor:
+		if this.attrTextColor.Unset(user) && !this.dot.Empty() {
+			this.invalidateDraw()
+		}
+		
+	case tomo.AttrKindDotColor:
+		if this.attrDotColor.Unset(user) && !this.dot.Empty() {
+			this.invalidateDraw()
+		}
+		
+	case tomo.AttrKindFace:
+		if this.attrFace.Unset(user) {
+			this.handleFaceChange()
+		}
+		
+	case tomo.AttrKindWrap:
+		if this.attrWrap.Unset(user) {
+			this.drawer.SetWrap(bool(this.attrWrap.Value()))
+			this.invalidateMinimum()
+			this.invalidateLayout()
+		}
+		
+	case tomo.AttrKindAlign:
+		if this.attrAlign.Unset(user) {
+			align := this.attrAlign.Value()
+			this.drawer.SetAlign (
+				typeset.Align(align.X),
+				typeset.Align(align.Y))
+			this.invalidateDraw()
+		}
+		
+	case tomo.AttrKindOverflow:
+		if this.attrOverflow.Unset(user) {
+			this.invalidateMinimum()
+			this.invalidateLayout()
+		}
+		
+	default: this.box.unsetAttr(kind, user)
+	}
 }
 
 func roundPt (point fixed.Point26_6) image.Point {
@@ -166,28 +267,30 @@ func fixPt (point image.Point) fixed.Point26_6 {
 }
 
 func (this *textBox) drawDot (can canvas.Canvas) {
-	if this.face == nil { return }
+	face := this.face.Value()
+	if face == nil { return }
+
+	textColor := this.attrTextColor.Value().Color
+	dotColor  := this.attrDotColor.Value().Color
 	
 	pen := can.Pen()
-	pen.Fill(color.Transparent)
-	pen.Stroke(this.textColor)
 
 	bounds   := this.InnerBounds()
-	metrics := this.face.Metrics()
+	metrics  := face.Metrics()
-	dot     := this.dot.Canon()
+	dot      := this.dot
-	start   := this.drawer.PositionAt(dot.Start).Add(fixPt(this.textOffset()))
+	canonDot := dot.Canon()
-	end     := this.drawer.PositionAt(dot.End  ).Add(fixPt(this.textOffset()))
+	start    := this.drawer.PositionAt(canonDot.Start).Add(fixPt(this.textOffset()))
+	end      := this.drawer.PositionAt(canonDot.End  ).Add(fixPt(this.textOffset()))
+	canonEnd := this.drawer.PositionAt(dot.End       ).Add(fixPt(this.textOffset()))
 	height   := this.drawer.LineHeight().Round()
 	ascent   := fixed.Point26_6 { Y: metrics.Descent }
 	descent  := fixed.Point26_6 { Y: metrics.Ascent  }
 
 	switch {
-	case dot.Empty():
+	case canonDot.Empty():
-		pen.StrokeWeight(1)
-		pen.Path(roundPt(start.Add(ascent)), roundPt(start.Sub(descent)))
 
 	case start.Y == end.Y:
-		pen.Fill(this.dotColor)
+		pen.Fill(dotColor)
 		pen.StrokeWeight(0)
 		pen.Rectangle(image.Rectangle {
 			Min: roundPt(start.Add(ascent)),
@@ -195,7 +298,7 @@ func (this *textBox) drawDot (can canvas.Canvas) {
 		})
 
 	default:
-		pen.Fill(this.dotColor)
+		pen.Fill(dotColor)
 		pen.StrokeWeight(0)
 
 		rect := image.Rectangle {
@@ -218,6 +321,19 @@ func (this *textBox) drawDot (can canvas.Canvas) {
 		rect.Min.X = bounds.Min.X
 		pen.Rectangle(rect)
 	}
+	
+	pen.Stroke(textColor)
+	pen.StrokeWeight(1)
+	beamTop    := roundPt(canonEnd.Add(ascent)).Sub(image.Pt(0, 1))
+	beamBottom := roundPt(canonEnd.Sub(descent))
+	beamSerif  := 3
+	pen.Path(beamTop, beamBottom)
+	pen.Path (
+		beamTop.Sub(image.Pt(beamSerif - 1, 0)),
+		beamTop.Add(image.Pt(beamSerif, 0)))
+	pen.Path (
+		beamBottom.Sub(image.Pt(beamSerif - 1, 0)),
+		beamBottom.Add(image.Pt(beamSerif, 0)))
 }
 
 func (this *textBox) textOffset () image.Point {
@@ -226,44 +342,177 @@ func (this *textBox) textOffset () image.Point {
 		Sub(this.drawer.LayoutBoundsSpace().Min)
 }
 
+func (this *textBox) handleFocusEnter () {
+	this.invalidateDraw()
+	this.box.handleFocusEnter()
+}
+
 func (this *textBox) handleFocusLeave () {
-	this.on.dotChange.Broadcast()
 	this.invalidateDraw()
 	this.box.handleFocusLeave()
 }
 
-func (this *textBox) handleMouseDown (button input.Button) {
+func (this *textBox) handleMouseDown (button input.Button) bool {
-	if button == input.ButtonLeft {
+	if this.mouseButtonCanDrag(button) {
 		index           := this.runeUnderMouse()
 		this.selectStart = index
 		this.selecting   = true
-		this.Select(text.Dot { Start: this.selectStart, End: index })
+		this.userSelect(text.Dot { Start: this.selectStart, End: index })
 	}
-	this.box.handleMouseDown(button)
+	return this.box.handleMouseDown(button)
 }
 
-func (this *textBox) handleMouseUp (button input.Button) {
+func (this *textBox) handleMouseUp (button input.Button) bool {
-	if button == input.ButtonLeft && this.selecting {
+	if this.mouseButtonCanDrag(button) && this.selecting {
 		index         := this.runeUnderMouse()
 		this.selecting = false
-		this.Select(text.Dot { Start: this.selectStart, End: index })
+		this.userSelect(text.Dot { Start: this.selectStart, End: index })
 	}
-	this.box.handleMouseUp(button)
+	return this.box.handleMouseUp(button)
 }
 
-func (this *textBox) handleMouseMove () {
+func (this *textBox) mouseButtonCanDrag (button input.Button) bool {
+	 return button == input.ButtonLeft   ||
+	 	button == input.ButtonMiddle ||
+	 	button == input.ButtonRight
+}
+
+func (this *textBox) handleMouseMove () bool {
 	if this.selecting {
 		index := this.runeUnderMouse()
-		this.Select(text.Dot { Start: this.selectStart, End: index })
+		this.userSelect(text.Dot { Start: this.selectStart, End: index })
 	}
-	this.box.handleMouseMove()
+	return this.box.handleMouseMove()
 }
 
 func (this *textBox) runeUnderMouse () int {
-	position := this.MousePosition().Sub(this.textOffset())
+	window := this.Window()
+	if window == nil { return 0 }
+	position := window.MousePosition().Sub(this.textOffset())
 	return this.drawer.AtPosition(fixPt(position))
 }
 
+// TODO the keynav here should make better use of input key chords.
+
+func (this *textBox) handleKeyDown (key input.Key, numberPad bool) bool {
+	if this.box.handleKeyDown(key, numberPad) { return true  }
+	if !this.selectable                       { return false }
+
+	// because fuck you thats why!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+	modifiers := this.Window().Modifiers()
+	dot       := this.Dot()
+	sel       := modifiers.Shift()
+	word      := modifiers.Control()
+
+	moveVertically := func (delta fixed.Int26_6) {
+		currentDot := 0
+		if sel {
+			currentDot = dot.End
+		} else {
+			currentDot = dot.Canon().Start
+			if delta > fixed.I(0) { currentDot = dot.Canon().End }
+		}
+
+		nextDot := 0
+		if word {
+			if delta > fixed.I(0) {
+				nextDot = nextParagraph(this.runes, currentDot)
+			} else {
+				nextDot = previousParagraph(this.runes, currentDot)
+			}
+		} else {
+			currentPosition := this.drawer.PositionAt(currentDot)
+			if this.desiredX != fixed.I(0) {
+				currentPosition.X = this.desiredX
+			}
+			nextPosition   := currentPosition
+			nextPosition.Y += this.lineHeight.Value().Mul(delta)
+			this.desiredX   = nextPosition.X
+			nextDot         = this.drawer.AtPosition(nextPosition)
+		}
+
+		if sel {
+			dot.End = nextDot
+			this.userSelectWithoutResettingDesiredX(dot)
+		} else {
+			this.userSelectWithoutResettingDesiredX(text.EmptyDot(nextDot))
+		}
+	}
+	
+	switch {
+	case key == input.KeyHome || (modifiers.Alt() && key == input.KeyLeft):
+		if word {
+			dot.End = 0
+		} else {
+			dot.End = lineHomeSoft(this.runes, dot.End)
+		}
+		if !sel { dot.Start = dot.End }
+		this.userSelect(dot)
+		return true
+	case key == input.KeyEnd || (modifiers.Alt() && key == input.KeyRight):
+		if word {
+			dot.End = len(this.runes)
+		} else {
+			dot.End = lineEnd(this.runes, dot.End)
+		}
+		if !sel { dot.Start = dot.End }
+		this.userSelect(dot)
+		return true
+	case key == input.KeyLeft:
+		if sel {
+			this.userSelect(text.SelectLeft(this.runes, dot, word))
+		} else {
+			this.userSelect(text.MoveLeft(this.runes, dot, word))
+		}
+		return true
+	case key == input.KeyRight:
+		if sel {
+			this.userSelect(text.SelectRight(this.runes, dot, word))
+		} else {
+			this.userSelect(text.MoveRight(this.runes, dot, word))
+		}
+		return true
+	case key == input.KeyUp:
+		moveVertically(fixed.I(-1))
+		return true
+	case key == input.KeyDown:
+		moveVertically(fixed.I(1))
+		return true
+	case key == input.Key('a') && modifiers.Control():
+		dot.Start = 0
+		dot.End   = len(this.runes)
+		this.userSelect(dot)
+		return true
+	default:
+		return false
+	}
+}
+
+func (this *textBox) handleKeyUp (key input.Key, numberPad bool) bool {
+	if this.box.handleKeyUp(key, numberPad) { return true  }
+	if !this.selectable                     { return false }
+	
+	modifiers := this.Window().Modifiers()
+	switch {
+	case key == input.KeyHome || (modifiers.Alt() && key == input.KeyLeft):
+		return true
+	case key == input.KeyEnd || (modifiers.Alt() && key == input.KeyRight):
+		return true
+	case key == input.KeyUp:
+		return true
+	case key == input.KeyDown:
+		return true
+	case key == input.KeyLeft:
+		return true
+	case key == input.KeyRight:
+		return true
+	case key == input.Key('a') && modifiers.Control():
+		return true
+	default:
+		return false
+	}
+}
+
 func (this *textBox) normalizedLayoutBoundsSpace () image.Rectangle {
 	bounds := this.drawer.LayoutBoundsSpace()
 	return bounds.Sub(bounds.Min)
@@ -272,10 +521,10 @@ func (this *textBox) normalizedLayoutBoundsSpace () image.Rectangle {
 func (this *textBox) contentMinimum () image.Point {
 	minimum := this.drawer.MinimumSize()
 
-	if this.hOverflow || this.wrap {
+	if this.attrOverflow.Value().X || bool(this.attrWrap.Value()) {
 		minimum.X = this.drawer.Em().Round()
 	}
-	if this.vOverflow {
+	if this.attrOverflow.Value().Y {
 		minimum.Y = this.drawer.LineHeight().Round()
 	}
 
@@ -347,3 +596,104 @@ func (this *textBox) scrollToDot () {
 	
 	this.ScrollTo(scroll)
 }
+
+func (this *textBox) handleFaceChange () {
+	hierarchy := this.getHierarchy()
+	if hierarchy == nil { return }
+	faceSet := hierarchy.getFaceSet()
+	if faceSet == nil { return }
+	
+	face := faceSet.Face(tomo.Face(this.attrFace.Value()))
+	this.face.Set(face, face)
+	this.drawer.SetFace(face)
+	this.invalidateMinimum()
+	this.invalidateLayout()
+	this.lineHeight.Invalidate()
+}
+
+func (this *textBox) recursiveReApply () {
+	this.box.recursiveReApply()
+	
+	hierarchy := this.getHierarchy()
+	if hierarchy == nil { return }
+	
+	previousFace := this.face.Value()
+	if previousFace == nil {
+		faceSet := hierarchy.getFaceSet()
+		if faceSet == nil { return }
+		face := faceSet.Face(tomo.Face(this.attrFace.Value()))
+		if face != previousFace {
+			this.face.Set(face, face)
+			this.drawer.SetFace(face)
+			this.invalidateMinimum()
+			this.invalidateLayout()
+		}
+	}
+}
+
+// TODO: these two functions really could be better.
+
+func previousParagraph (text []rune, index int) int {
+	consecLF := 0
+	if index >= len(text) { index = len(text) - 1 }
+	for ; index > 0; index -- {
+		char := text[index]
+		if char == '\n' {
+			consecLF ++
+		} else if !unicode.IsSpace(char) {
+			if consecLF >= 2 { return index + 1 }
+			consecLF  = 0
+		}
+	}
+	return index
+}
+
+func nextParagraph (text []rune, index int) int {
+	consecLF := 0
+	for ; index < len(text); index ++ {
+		char := text[index]
+		if char == '\n' {
+			consecLF ++
+		} else if !unicode.IsSpace(char) {
+			if consecLF >= 2 { return index }
+			consecLF = 0
+		}
+	}
+	return index
+}
+
+func lineHome (text []rune, index int) int {
+	liminal := index < len(text) && text[index] == '\n'
+	if index >= len(text) { index = len(text) - 1 }
+	for index := index; index >= 0; index -- {
+		char := text[index]
+		if char == '\n' && !liminal {
+			return index + 1
+		}
+		liminal = false
+	}
+	return 0
+}
+
+func lineHomeSoft (text []rune, index int) int {
+	home  := lineHome(text, index)
+	start := home
+	for start < len(text) && unicode.IsSpace(text[start]) {
+		start ++
+	}
+	if index == start {
+		return home
+	} else {
+		return start
+	}
+}
+
+func lineEnd (text []rune, index int) int {
+	for ; index < len(text); index ++ {
+		char := text[index]
+		if char == '\n' {
+			return index
+		}
+	}
+	return index
+}

internal/util/util.go

@@ -1,101 +1,32 @@
 package util
 
-import "image/color"
+import "io"
 
-// IndexOf returns the index of needle within haystack. If needle does not exist
+// Cycler stores a value and an accompanying io.Closer. When the value is set,
-// within haystack, it returns -1.
+// the closer associated with the previous value is closed.
-func IndexOf[T comparable] (haystack []T, needle T) int {
+type Cycler[T any] struct {
-	for index, test := range haystack {
+	value  T
-		if test == needle {
+	closer io.Closer
-			return index
-		}
-	}
-	return -1
 }
 
-// Remove removes an element from slice at index.
+// Value returns the cycler's value.
-func Remove[T any] (slice []T, index int) []T {
+func (this *Cycler[T]) Value () T {
-	return append(slice[:index], slice[index + 1:]...)
+	return this.value
 }
 
-// Insert inserts an element into slice at index.
+// Set sets the value and associated closer, closing the previous one.
-func Insert[T any] (slice []T, index int, element T) []T {
+func (this *Cycler[T]) Set (value T, closer io.Closer) (err error) {
-	slice = append(slice[:index + 1], slice[index:]...)
+	if this.closer != nil {
-	slice[index] = element
+		err = this.closer.Close()
-	return slice
+	}
+	this.value  = value
+	this.closer = closer
+	return err
 }
 
-// Transparent returns whether or not a color has transparency.
+// Close closes the associated closer early.
-func Transparent (c color.Color) bool {
+func (this *Cycler[T]) Close () error {
-	_, _, _, a := c.RGBA()
+	err := this.closer.Close()
-	return a != 0xFFFF
+	this.closer = nil
-}
+	return err
-
-// Set is a set of unique items, built on top of map.
-type Set[T comparable] map[T] struct { }
-
-// Empty returns true if there are no items in the set.
-func (set Set[T]) Empty () bool {
-	return set == nil || len(set) == 0
-}
-
-// Has returns true if the set contains item.
-func (set Set[T]) Has (item T) bool {
-	if set == nil {
-		return false
-	}
-	_, ok := set[item]
-	return ok
-}
-
-// Add adds an item to the set.
-func (set Set[T]) Add (item T) {
-	set[item] = struct { } { }
-}
-
-// Pop removes the first accessible item from the set and returns it.
-func (set Set[T]) Pop () (item T) {
-	for item := range set {
-		delete(set, item)
-		return item
-	}
-	return
-}
-
-// Memo holds a cached value.
-type Memo[T any] struct {
-	cache  T
-	valid  bool
-	update func () T
-}
-
-// NewMemo creates a new Memo which will take its value from the specified
-// update callback.
-func NewMemo[T any] (update func () T) Memo[T] {
-	return Memo[T] {
-		update: update,
-	}
-}
-
-// Value returns the Memo's value, updating it if the current cached value is
-// invalid.
-func (this *Memo[T]) Value () T {
-	if !this.valid {
-		this.cache = this.update()
-	}
-	return this.cache
-}
-
-// Invalidate marks the Memo's value as invalid, which will cause it to be
-// updated the next time Value is called.
-func (this *Memo[T]) Invalidate () {
-	this.valid = false
-}
-
-// InvalidateTo invalidates the Memo and sets its value. The new value will be
-// entirely inaccessible. This is only intended to be used for setting a
-// reference to nil
-func (this *Memo[T]) InvalidateTo (value T) {
-	this.Invalidate()
-	this.cache = value
 }

style/faceset.go

@@ -0,0 +1,13 @@
+package style
+
+import "golang.org/x/image/font"
+import "git.tebibyte.media/tomo/tomo"
+
+// FaceSet holds a set of font faces.
+type FaceSet interface {
+	// Face returns the font face which most closely matches the given
+	// tomo.Face. The face must be closed when it is done being used. If no
+	// suitable face could be found, This behavior must return a fallback
+	// face (such as basicfont.Face7x13) instead of nil.
+	Face (tomo.Face) font.Face
+}

style/iconset.go

@@ -0,0 +1,28 @@
+package style
+
+import "git.tebibyte.media/tomo/tomo"
+import "git.tebibyte.media/tomo/tomo/data"
+import "git.tebibyte.media/tomo/tomo/canvas"
+
+// IconSet holds a set of icon textures.
+type IconSet interface {
+	// A word on textures:
+	//
+	// Because textures can be linked to some resource that is outside of
+	// the control of Go's garbage collector, methods of IconSet must not
+	// allocate new copies of a texture each time they are called. It is
+	// fine to lazily load textures and save them for later use, but the
+	// same texture must never be allocated multiple times as this could
+	// cause a memory leak.
+	//
+	// As such, textures returned by these methods must be protected.
+	
+	// Icon returns a texture of the corresponding icon ID. If there is no
+	// suitable option, it should return nil.
+	Icon (tomo.Icon, tomo.IconSize) canvas.Texture
+
+	// MimeIcon returns a texture of an icon corresponding to a MIME type.
+	// If there is no suitable specific option, it should return a more
+	// generic icon or a plain file icon.
+	MimeIcon (data.Mime, tomo.IconSize) canvas.Texture
+}

style/style.go

@@ -0,0 +1,70 @@
+package style
+
+import "image/color"
+import "git.tebibyte.media/tomo/tomo"
+
+// Style can apply a visual style to different objects.
+type Style struct {
+	// Rules determines which styles get applied to which Objects.
+	Rules []Rule
+
+	// Colors maps tomo.Color values to color.RGBA values.
+	Colors map[tomo.Color] color.Color
+}
+
+// Rule describes under what circumstances should certain style attributes be
+// active.
+type Rule struct {
+	Role tomo.Role
+	Tags []string
+	Set  AttrSet
+}
+
+// Ru is shorthand for creating a rule structure
+func Ru (set AttrSet, role tomo.Role, tags ...string) Rule {
+	return Rule {
+		Role: role,
+		Tags: tags,
+		Set:  set,
+	}
+}
+
+// AttrSet is a set of attributes wherein only one/zero of each attribute type
+// can exist. It is keyed by the AttrKind of each attribute and must not be
+// modified directly.
+type AttrSet map[tomo.AttrKind] tomo.Attr
+
+// AS builds an AttrSet out of a vararg list of Attr values. If multiple Attrs
+// of the same kind are specified, the last one will override the others.
+func AS (attrs ...tomo.Attr) AttrSet {
+	set := AttrSet { }
+	set.Add(attrs...)
+	return set
+}
+
+// Add adds attributes to the set.
+func (this AttrSet) Add (attrs ...tomo.Attr) {
+	for _, attr := range attrs {
+		this[attr.Kind()] = attr
+	}
+}
+
+// MergeUnder takes attributes from another set and adds them if they don't
+// already exist in this one.
+func (this AttrSet) MergeUnder (other AttrSet) {
+	if other == nil { return }
+	for _, attr := range other {
+		if _, exists := this[attr.Kind()]; !exists {
+			this.Add(attr)
+		}
+	}
+}
+
+// MergeOver takes attributes from another set and adds them, overriding this
+// one.
+func (this AttrSet) MergeOver (other AttrSet) {
+	if other == nil { return }
+	for _, attr := range other {
+		this.Add(attr)
+	}
+}

x/backend.go

@@ -4,7 +4,9 @@ import "image"
 import "errors"
 import "git.tebibyte.media/tomo/tomo"
 import "git.tebibyte.media/tomo/xgbkb"
+import "git.tebibyte.media/tomo/tomo/data"
 import "git.tebibyte.media/tomo/tomo/canvas"
+import "git.tebibyte.media/tomo/backend/style"
 import "git.tebibyte.media/tomo/backend/x/canvas"
 import "git.tebibyte.media/tomo/backend/internal/system"
 
@@ -18,6 +20,9 @@ type Backend struct {
 	x         *xgbutil.XUtil
 	system    *system.System
 
+	style     *style.Style
+	iconSet   style.IconSet
+	
 	doChannel chan func()
 	windows   map[xproto.Window] *window
 	open      bool
@@ -102,20 +107,20 @@ func (this *Backend) NewBox () tomo.Box {
 	return this.system.NewBox()
 }
 
-func (this *Backend) NewCanvasBox () tomo.CanvasBox {
+func (this *Backend) NewTextBox () tomo.TextBox {
-	return this.system.NewCanvasBox()
+	return this.system.NewTextBox()
 }
 
-func (this *Backend) NewContainerBox () tomo.ContainerBox {
+func (this *Backend) NewCanvasBox () tomo.CanvasBox {
-	return this.system.NewContainerBox()
+	return this.system.NewCanvasBox()
 }
 
 func (this *Backend) NewSurfaceBox () (tomo.SurfaceBox, error) {
 	return this.system.NewSurfaceBox()
 }
 
-func (this *Backend) NewTextBox () tomo.TextBox {
+func (this *Backend) NewContainerBox () tomo.ContainerBox {
-	return this.system.NewTextBox()
+	return this.system.NewContainerBox()
 }
 
 func (this *Backend) NewTexture (source image.Image) canvas.TextureCloser {
@@ -126,6 +131,35 @@ func (this *Backend) NewCanvas (bounds image.Rectangle) canvas.CanvasCloser {
 	return xcanvas.NewCanvas(this.x, bounds)
 }
 
+func (this *Backend) ColorRGBA (id tomo.Color) (r, g, b, a uint32) {
+	if col, ok := this.style.Colors[id]; ok {
+		return col.RGBA()
+	}
+	return 0xFFFF, 0, 0xFFFF, 0xFFFF // punish bad styles
+}
+
+func (this *Backend) IconTexture (id tomo.Icon, size tomo.IconSize) canvas.Texture {
+	return this.iconSet.Icon(id, size)
+}
+
+func (this *Backend) MimeIconTexture (mime data.Mime, size tomo.IconSize) canvas.Texture {
+	return this.iconSet.MimeIcon(mime, size)
+}
+
+func (this *Backend) SetStyle (style *style.Style) {
+	this.style = style
+	this.system.SetStyle(style)
+}
+
+func (this *Backend) SetIconSet (iconSet style.IconSet) {
+	this.iconSet = iconSet
+	this.system.SetIconSet(iconSet)
+}
+
+func (this *Backend) SetFaceSet (faceSet style.FaceSet) {
+	this.system.SetFaceSet(faceSet)
+}
+
 func (this *Backend) assert () {
 	if this == nil { panic("x: nil backend") }
 }

x/canvas/canvas.go

@@ -132,3 +132,32 @@ func convertColor (c color.Color) xgraphics.BGRA {
 		A: uint8(a >> 8),
 	}
 }
+
+// For some reason, xgraphics.BGRA does not specify whether or not it uses
+// premultiplied alpha, and information regarding this is contradictory.
+// Basically:
+//   - BGRAModel just takes the result of c.RGBA and bit shifts it, without
+//     un-doing the aplha premultiplication that is required by Color.RGBA,
+//     suggesting that xgraphics.BGRA stores alpha-premultiplied color.
+//   - xgraphics.BlendBGRA lerps between dest and src using only the alpha of
+//     src (temporarily converting the colors to fucking floats for some reason)
+//     which seems to suggest that xgraphics.BGRA *does not* store alpha-
+//     premultiplied color.
+// There is no issues page on xgbutil so we may never get an answer to this
+// question. However, in this package we just use xgraphics.BGRA to store alpha-
+// premultiplied color anyway because its way faster, and I would sooner eat
+// spaghetti with a spoon than convert to and from float64 to blend pixels.
+func blendPremultipliedBGRA (dst, src xgraphics.BGRA) xgraphics.BGRA {
+	// https://en.wikipedia.org/wiki/Alpha_compositing
+	return xgraphics.BGRA {
+		B: blendPremultipliedChannel(dst.B, src.B, src.A),
+		G: blendPremultipliedChannel(dst.G, src.G, src.A),
+		R: blendPremultipliedChannel(dst.R, src.R, src.A),
+		A: blendPremultipliedChannel(dst.A, src.A, src.A),
+	}
+}
+
+func blendPremultipliedChannel (dst, src, a uint8) uint8 {
+	dst16, src16, a16 := uint16(dst), uint16(src), uint16(a)
+	return uint8(src16 + ((dst16 * (255 - a16)) >> 8))
+}

x/canvas/draw.go

@@ -1,6 +1,7 @@
 package xcanvas
 
 import "sort"
+import "math"
 import "image"
 import "github.com/jezek/xgbutil/xgraphics"
 
@@ -45,7 +46,7 @@ func (this *pen) textureRectangleTransparent (bounds image.Rectangle) {
 		srcPos := pos.Add(offset)
 		dstIndex := this.image.PixOffset(pos.X, pos.Y)
 		srcIndex := this.texture.PixOffset(srcPos.X, srcPos.Y)
-		pixel := xgraphics.BlendBGRA(xgraphics.BGRA {
+		pixel := blendPremultipliedBGRA(xgraphics.BGRA {
 			B: dst[dstIndex + 0],
 			G: dst[dstIndex + 1],
 			R: dst[dstIndex + 2],
@@ -92,7 +93,7 @@ func (this *pen) fillRectangleTransparent (c xgraphics.BGRA, bounds image.Rectan
 	for pos.Y = bounds.Min.Y; pos.Y < bounds.Max.Y; pos.Y ++ {
 	for pos.X = bounds.Min.X; pos.X < bounds.Max.X; pos.X ++ {
 		index := this.image.PixOffset(pos.X, pos.Y)
-		pixel := xgraphics.BlendBGRA(xgraphics.BGRA {
+		pixel := blendPremultipliedBGRA(xgraphics.BGRA {
 			B: this.image.Pix[index + 0],
 			G: this.image.Pix[index + 1],
 			R: this.image.Pix[index + 2],
@@ -158,12 +159,12 @@ func (this *pen) fillPolygon (c xgraphics.BGRA, points ...image.Point) {
 	area = this.image.Bounds().Intersect(area)
 	if area.Empty() { return }
 
+	boundaries := make([]int, len(points))
 	context := fillingContext {
 		image:      this.image,
 		color:      this.fill,
 		min:        area.Min.X,
 		max:        area.Max.X,
-		boundaries: make([]int, len(points)),
 		points:     points,
 	}
 
@@ -181,19 +182,19 @@ func (this *pen) fillPolygon (c xgraphics.BGRA, points ...image.Point) {
 				(fPointY < fy && fPrevY  >= fy) ||
 				(fPrevY  < fy && fPointY >= fy)
 			if addboundary {
-				context.boundaries[boundaryCount] = int (
+				boundaries[boundaryCount] = int(math.Round (
 					fPointX +
 					(fy - fPointY) /
 					(fPrevY - fPointY) *
-					(fPrevX - fPointX))
+					(fPrevX - fPointX)))
 				boundaryCount ++
 			}
 			prevPoint = point
 		}
 
 		// sort boundary list
-		cutBoundaries := context.boundaries[:boundaryCount]
+		context.boundaries = boundaries[:boundaryCount]
-		sort.Ints(cutBoundaries)
+		sort.Ints(context.boundaries)
 
 		// fill pixels between boundary pairs
 		if c.A == 255 {
@@ -215,7 +216,7 @@ type fillingContext struct {
 }
 
 func (context *fillingContext) fillPolygonHotOpaque () {
-	for index := 0; index < len(context.boundaries); index += 2 {
+	for index := 0; index < len(context.boundaries) - 1; index += 2 {
 		left  := context.boundaries[index]
 		right := context.boundaries[index + 1]
 
@@ -240,7 +241,7 @@ func (context *fillingContext) fillPolygonHotOpaque () {
 }
 
 func (context *fillingContext) fillPolygonHotTransparent () {
-	for index := 0; index < len(context.boundaries); index += 2 {
+	for index := 0; index < len(context.boundaries) - 1; index += 2 {
 		left  := context.boundaries[index]
 		right := context.boundaries[index + 1]
 
@@ -255,7 +256,7 @@ func (context *fillingContext) fillPolygonHotTransparent () {
 			// fill pixels in between
 			for x := left; x < right; x ++ {
 				index := context.image.PixOffset(x, context.y)
-				pixel := xgraphics.BlendBGRA(xgraphics.BGRA {
+				pixel := blendPremultipliedBGRA(xgraphics.BGRA {
 					B: context.image.Pix[index + 0],
 					G: context.image.Pix[index + 1],
 					R: context.image.Pix[index + 2],

x/canvas/plot.go

@@ -32,7 +32,7 @@ func (context plottingContext) plot (center image.Point) {
 		for y := square.Min.Y; y < square.Max.Y; y ++ {
 		for x := square.Min.X; x < square.Max.X; x ++ {
 			index := context.image.PixOffset(x, y)
-			pixel := xgraphics.BlendBGRA(xgraphics.BGRA {
+			pixel := blendPremultipliedBGRA(xgraphics.BGRA {
 				B: context.image.Pix[index + 0],
 				G: context.image.Pix[index + 1],
 				R: context.image.Pix[index + 2],

x/event.go

@@ -7,6 +7,7 @@ import "github.com/jezek/xgb/xproto"
 import "git.tebibyte.media/tomo/xgbkb"
 import "github.com/jezek/xgbutil/xevent"
 import "git.tebibyte.media/tomo/tomo/input"
+import "git.tebibyte.media/tomo/tomo/config"
 
 type scrollSum struct {
 	x, y int
@@ -146,11 +147,14 @@ func (window *window) updateBounds () {
 	decorGeometry, _ := window.xWindow.DecorGeometry()
 	windowGeometry, _ := window.xWindow.Geometry()
 	origin := image.Pt (
-		windowGeometry.X() + decorGeometry.X(),
+		decorGeometry.X(),
-		windowGeometry.Y() + decorGeometry.Y())
+		decorGeometry.Y())
-	window.metrics.bounds = image.Rectangle {
+	innerOrigin := origin.Add(image.Pt (
-		Min: origin,
+		windowGeometry.X(),
-		Max: origin.Add(image.Pt(windowGeometry.Width(), windowGeometry.Height())),
+		windowGeometry.Y()))
+	window.metrics.innerBounds = image.Rectangle {
+		Min: innerOrigin,
+		Max: innerOrigin.Add(image.Pt(windowGeometry.Width(), windowGeometry.Height())),
 	}
 }
 
@@ -161,9 +165,9 @@ func (window *window) handleConfigureNotify (
 	configureEvent := *event.ConfigureNotifyEvent
 	configureEvent = window.compressConfigureNotify(configureEvent)
 	
-	oldBounds := window.metrics.bounds
+	oldBounds := window.metrics.innerBounds
 	window.updateBounds()
-	newBounds := window.metrics.bounds
+	newBounds := window.metrics.innerBounds
 
 	sizeChanged :=
 		oldBounds.Dx() != newBounds.Dx() ||
@@ -223,7 +227,7 @@ func (window *window) handleKeyPress (
 	key, numberPad := keycodeToKey(keyEvent.Detail, keyEvent.State)
 	window.updateModifiers(keyEvent.State)
 
-	if key == input.KeyEscape && window.shy {
+	if config.KeyChordClose.Pressed(key, window.Modifiers()) && window.shy {
 		window.Close()
 	} else {
 		window.hierarchy.HandleKeyDown(key, numberPad)
@@ -430,14 +434,15 @@ func (window *window) compressMotionNotify (
 
 func (window *window) updateModifiers (state uint16) {
 	xModifiers := xgbkb.StateToModifiers(state)
-	window.hierarchy.HandleModifiers(input.Modifiers {
+	var modifiers input.Modifiers
-		Shift:   xModifiers.Shift || xModifiers.ShiftLock,
+	if xModifiers.Shift     { modifiers |= input.ModShift   }
-		Control: xModifiers.Control,
+	if xModifiers.ShiftLock { modifiers |= input.ModShift   }
-		Alt:     xModifiers.Alt,
+	if xModifiers.Control   { modifiers |= input.ModControl }
-		Meta:    xModifiers.Meta,
+	if xModifiers.Alt       { modifiers |= input.ModAlt     }
-		Super:   xModifiers.Super,
+	if xModifiers.Meta      { modifiers |= input.ModMeta    }
-		Hyper:   xModifiers.Hyper,
+	if xModifiers.Super     { modifiers |= input.ModSuper   }
-	})
+	if xModifiers.Hyper     { modifiers |= input.ModHyper   }
+	window.hierarchy.HandleModifiers(modifiers)
 }
 
 func (window *window) updateMousePosition (x, y int16) {

x/window.go

@@ -1,9 +1,11 @@
 package x
 
 import "image"
+import "strings"
 
 import "git.tebibyte.media/tomo/tomo"
 import "git.tebibyte.media/tomo/tomo/data"
+import "git.tebibyte.media/tomo/tomo/input"
 import "git.tebibyte.media/tomo/tomo/event"
 import "git.tebibyte.media/tomo/tomo/canvas"
 import "git.tebibyte.media/tomo/backend/x/canvas"
@@ -32,12 +34,18 @@ type window struct {
 	hasModal    bool
 	shy         bool
 	visible     bool
+	resizeX     bool
+	resizeY     bool
 
 	metrics struct {
-		bounds image.Rectangle
+		bounds      image.Rectangle // bounds, including frame
+		innerBounds image.Rectangle // bounds of the drawable area
 	}
 
-	onClose event.FuncBroadcaster
+	on struct {
+		close    event.FuncBroadcaster
+		tryClose event.Broadcaster[func () bool]
+	}
 }
 
 type windowLink struct {
@@ -60,27 +68,12 @@ func (this *windowLink) NotifyMinimumSizeChange () {
 	this.window.doMinimumSize()
 }
 
-func (this *Backend) NewWindow (
+func (this *Backend) NewWindow (kind tomo.WindowKind, bounds image.Rectangle) (tomo.Window, error) {
-	bounds image.Rectangle,
-) (
-	output tomo.Window,
-	err error,
-) {
 	this.assert()
-	return this.newWindow(bounds, false)
+	window, err := this.newWindow(bounds, kind == tomo.WindowKindMenu)
-}
+	if err != nil { return nil, err }
-
+	window.setKind(kind)
-func (this *Backend) NewPlainWindow (
+	return window, nil
-	bounds image.Rectangle,
-) (
-	output tomo.Window,
-	err error,
-) {
-	this.assert()
-	window, err := this.newWindow(bounds, false)
-	window.setType("dock")
-	
-	return window, err
 }
 
 func (this *Backend) newWindow (
@@ -97,6 +90,8 @@ func (this *Backend) newWindow (
 	link   := &windowLink { window:  window }
 	window.hierarchy = this.system.NewHierarchy(link)
 	window.leader    = window
+	window.resizeX   = true
+	window.resizeY   = true
 
 	window.xWindow, err = xwindow.Generate(this.x)
 	if err != nil { return }
@@ -125,7 +120,11 @@ func (this *Backend) newWindow (
 	if err != nil { return }
 
 	window.xWindow.WMGracefulClose (func (xWindow *xwindow.Window) {
-		window.Close()
+		holdOff := false
+		for _, callback := range window.on.tryClose.Listeners() {
+			if !callback() { holdOff = true }
+		}
+		if !holdOff { window.Close() }
 	})
 
 	xevent.ExposeFun(window.handleExpose).
@@ -151,7 +150,7 @@ func (this *Backend) newWindow (
 	// xevent.SelectionRequestFun(window.handleSelectionRequest).
 		// Connect(this.x, window.xWindow.Id)
 	
-	window.metrics.bounds = bounds
+	window.metrics.innerBounds = bounds
 	window.doMinimumSize()
 
 	this.windows[window.xWindow.Id] = window
@@ -160,6 +159,14 @@ func (this *Backend) newWindow (
 	return
 }
 
+func (this *window) Bounds () image.Rectangle {
+	return this.metrics.bounds.Sub(this.metrics.innerBounds.Min)
+}
+
+func (this *window) InnerBounds () image.Rectangle {
+	return this.metrics.innerBounds.Sub(this.metrics.innerBounds.Min)
+}
+
 func (this *window) SetRoot (root tomo.Object) {
 	if root == nil {
 		this.hierarchy.SetRoot(nil)
@@ -175,13 +182,21 @@ func (this *window) SetTitle (title string) {
 	icccm.WmIconNameSet (this.backend.x, this.xWindow.Id, title)
 }
 
-func (this *window) SetIcon (sizes ...canvas.Texture) {
+func (this *window) SetIcon (icon tomo.Icon) {
+	textures := []canvas.Texture {
+		icon.Texture(tomo.IconSizeSmall),
+		icon.Texture(tomo.IconSizeMedium),
+		icon.Texture(tomo.IconSizeLarge),
+	}
+	
 	wmIcons := []ewmh.WmIcon { }
 
-	for _, icon := range sizes {
+	for _, icon := range textures {
-		// TODO we use textures now. make this better
+		icon := xcanvas.AssertTexture(icon)
-		width  := icon.Bounds().Max.X
+		
-		height := icon.Bounds().Max.Y
+		bounds := icon.Bounds()
+		width  := bounds.Dx()
+		height := bounds.Dy()
 		wmIcon := ewmh.WmIcon {
 			Width:  uint(width),
 			Height: uint(height),
@@ -191,18 +206,14 @@ func (this *window) SetIcon (sizes ...canvas.Texture) {
 		// manually convert image data beacuse of course we have to do
 		// this
 		index := 0
-		for y := 0; y < height; y ++ {
+		for y := bounds.Min.Y; y < bounds.Max.Y; y ++ {
-		for x := 0; x < width;  x ++ {
+		for x := bounds.Min.X; x < bounds.Max.X; x ++ {
-			r, g, b, a := icon.At(x, y).RGBA()
+			pixel := icon.BGRAAt(x, y)
-			r >>= 8
-			g >>= 8
-			b >>= 8
-			a >>= 8
 			wmIcon.Data[index] =
-				(uint(a) << 24) |
+				(uint(pixel.A) << 24) |
-				(uint(r) << 16) |
+				(uint(pixel.R) << 16) |
-				(uint(g) << 8)  |
+				(uint(pixel.G) << 8)  |
-				(uint(b) << 0)
+				(uint(pixel.B) << 0)
 			index ++
 		}}
 		
@@ -215,59 +226,49 @@ func (this *window) SetIcon (sizes ...canvas.Texture) {
 		wmIcons)
 }
 
-func (this *window) NewMenu (bounds image.Rectangle) (tomo.Window, error) {
+func (this *window) SetResizable (x, y bool) {
-	menu, err := this.backend.newWindow (
+	if this.resizeX == x && this.resizeY == y { return }
-		bounds.Add(this.metrics.bounds.Min), true)
+	this.resizeX = x
-	menu.shy = true
+	this.resizeY = y
-	icccm.WmTransientForSet (
+	this.doMinimumSize()
-		this.backend.x,
-		menu.xWindow.Id,
-		this.xWindow.Id)
-	menu.setType("POPUP_MENU")
-	// menu.inheritProperties(this)
-	return menu, err
 }
 
-func (this *window) NewModal (bounds image.Rectangle) (tomo.Window, error) {
+func (this *window) SetBounds (bounds image.Rectangle) {
-	modal, err := this.backend.newWindow (
+	this.xWindow.WMMoveResize (
-		bounds.Add(this.metrics.bounds.Min), false)
+		bounds.Min.X, bounds.Min.Y,
-	icccm.WmTransientForSet (
+		bounds.Min.X + bounds.Dx(),
-		this.backend.x,
+		bounds.Min.Y + bounds.Dy())
-		modal.xWindow.Id,
-		this.xWindow.Id)
-	ewmh.WmStateSet (
-		this.backend.x,
-		modal.xWindow.Id,
-		[]string { "_NET_WM_STATE_MODAL" })
-	modal.modalParent = this
-	this.hasModal     = true
-	// modal.inheritProperties(window)
-	return modal, err
 }
 
-func (this *window) NewChild (bounds image.Rectangle) (tomo.Window, error) {
+func (this *window) NewChild (kind tomo.WindowKind, bounds image.Rectangle) (tomo.Window, error) {
 	leader := this.leader
 	
 	child, err := this.backend.newWindow (
-		bounds.Add(this.metrics.bounds.Min), false)
+		bounds.Add(this.metrics.innerBounds.Min), kind == tomo.WindowKindMenu)
-	child.leader = leader
 	if err != nil { return nil, err }
 	
-	child.setClientLeader(leader)
+	child.leader = leader
-	leader.setClientLeader(leader)
+	err = child.setKind(kind)
+	if err != nil { return nil, err }
+	if kind == tomo.WindowKindModal {
+		this.hasModal     = true
+		child.modalParent = this
+	}
 	
 	icccm.WmTransientForSet (
 		this.backend.x,
 		child.xWindow.Id,
 		leader.xWindow.Id)
-	child.setType("UTILITY")
 	// child.inheritProperties(leader.window)
 	return child, err
 }
 
-func (this *window) Widget () (tomo.Window, error) {
+func (this *window) Modifiers () input.Modifiers {
-	// TODO
+	return this.hierarchy.Modifiers()
-	return nil, nil
+}
+
+func (this *window) MousePosition () image.Point {
+	return this.hierarchy.MousePosition()
 }
 
 func (this *window) Copy (data.Data) {
@@ -295,12 +296,12 @@ func (this *window) Visible () bool {
 	return this.visible
 }
 
-func (this *window) Close () {
+func (this *window) Close () error {
 	xevent   .Detach(this.backend.x, this.xWindow.Id)
 	keybind  .Detach(this.backend.x, this.xWindow.Id)
 	mousebind.Detach(this.backend.x, this.xWindow.Id)
 
-	this.onClose.Broadcast()
+	this.on.close.Broadcast()
 	if this.modalParent != nil {
 		// we are a modal dialog, so unlock the parent
 		this.modalParent.hasModal = false
@@ -309,10 +310,16 @@ func (this *window) Close () {
 	this.SetRoot(nil)
 	delete(this.backend.windows, this.xWindow.Id)
 	this.xWindow.Destroy()
+	this.hierarchy.Close()
+	return nil // TODO maybe return an error? maybe join them?
 }
 
 func (this *window) OnClose (callback func ()) event.Cookie {
-	return this.onClose.Connect(callback)
+	return this.on.close.Connect(callback)
+}
+
+func (this *window) OnTryClose (callback func () bool) event.Cookie {
+	return this.on.tryClose.Connect(callback)
 }
 
 func (this *window) grabInput () {
@@ -328,6 +335,19 @@ func (this *window) ungrabInput () {
 	mousebind.UngrabPointer(this.backend.x)
 }
 
+func (this *window) setKind (kind tomo.WindowKind) error {
+	err := this.setType(windowKindToType(kind))
+	if err != nil { return err }
+	if kind == tomo.WindowKindModal {
+		err = this.setState("MODAL")
+		if err != nil { return err }
+	}
+	if kind == tomo.WindowKindMenu {
+		this.shy = true
+	}
+	return nil
+}
+
 func (this *window) setType (ty string) error {
 	return ewmh.WmWindowTypeSet (
 		this.backend.x,
@@ -335,6 +355,13 @@ func (this *window) setType (ty string) error {
 		[]string { "_NET_WM_WINDOW_TYPE_" + ty })
 }
 
+func (this *window) setState (state string) error {	
+	return ewmh.WmStateSet (
+		this.backend.x,
+		this.xWindow.Id,
+		[]string { "_NET_WM_STATE_" + state })
+}
+
 func (this *window) setClientLeader (leader *window) error {
 	hints, _ := icccm.WmHintsGet(this.backend.x, this.xWindow.Id)
 	if hints == nil {
@@ -355,8 +382,8 @@ func (this *window) reallocateCanvas () {
 		previousHeight = this.xCanvas.Bounds().Dy()
 	}
 	
-	newWidth  := this.metrics.bounds.Dx()
+	newWidth  := this.metrics.innerBounds.Dx()
-	newHeight := this.metrics.bounds.Dy()
+	newHeight := this.metrics.innerBounds.Dy()
 	larger    := newWidth > previousWidth || newHeight > previousHeight
 	smaller   := newWidth < previousWidth / 2 || newHeight < previousHeight / 2
 
@@ -376,7 +403,7 @@ func (this *window) reallocateCanvas () {
 	}
 
 	this.hierarchy.SetCanvas(this.xCanvas.SubCanvas (
-		this.metrics.bounds.Sub(this.metrics.bounds.Min)))
+		this.metrics.innerBounds.Sub(this.metrics.innerBounds.Min)))
 }
 
 func (this *window) pushAll () {
@@ -407,20 +434,48 @@ func (this *window) doMinimumSize () {
 	
 	if size.X < 8 { size.X = 8 }
 	if size.Y < 8 { size.Y = 8 }
-	icccm.WmNormalHintsSet (
+
-		this.backend.x,
+	hints := icccm.NormalHints {
-		this.xWindow.Id,
-		&icccm.NormalHints {
 		Flags:     icccm.SizeHintPMinSize,
 		MinWidth:  uint(size.X),
 		MinHeight: uint(size.Y),
-		})
+		// now you can tell your friends that the max size of a Tomo
-	newWidth  := this.metrics.bounds.Dx()
+		// window under X when one of the dimensions is constrained is
-	newHeight := this.metrics.bounds.Dy()
+		// 99999999999
+		MaxWidth:  uint(99999999999),
+		MaxHeight: uint(99999999999),
+	}
+	if !this.resizeX {
+		hints.Flags   |= icccm.SizeHintPMaxSize
+		hints.MaxWidth = uint(size.X)
+	}
+	if !this.resizeY {
+		hints.Flags    |= icccm.SizeHintPMaxSize
+		hints.MaxHeight = uint(size.Y)
+	}
+	
+	icccm.WmNormalHintsSet (
+		this.backend.x,
+		this.xWindow.Id,
+		&hints)
+	newWidth  := this.metrics.innerBounds.Dx()
+	newHeight := this.metrics.innerBounds.Dy()
 	if newWidth  < size.X { newWidth  = size.X }
 	if newHeight < size.Y { newHeight = size.Y }
-	if newWidth != this.metrics.bounds.Dx() ||
+	if newWidth != this.metrics.innerBounds.Dx() ||
-		newHeight != this.metrics.bounds.Dy() {
+		newHeight != this.metrics.innerBounds.Dy() {
 		this.xWindow.Resize(newWidth, newHeight)
 	}
 }
+
+func windowKindToType (kind tomo.WindowKind) string {
+	switch kind {
+	case tomo.WindowKindNormal:  return "NORMAL"
+	case tomo.WindowKindPlain:   return "DOCK"
+	case tomo.WindowKindUtility: return "UTILITY"
+	case tomo.WindowKindToolbar: return "MENU"
+	case tomo.WindowKindMenu:    return "POPUP_MENU"
+	case tomo.WindowKindModal:   return "NORMAL"
+	default:                     return strings.ReplaceAll(strings.ToUpper(string(kind)), " ", "_")
+	}
+}