feat(ui): per-side borders (border-top/right/bottom/left)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

packages/ludic.ui/attr.ludic

@@ -62,7 +62,7 @@ function el_look(n: UiNode, key: string, v: Val) -> bool {
   } else if key == "alpha" { n.alpha = el_num(s) } else if key == "enabled" { n.enabled = vl_truthy(v) and s != "false" } else if key == "border-color" {
     n.border_c = ui_color(s)
     n.border_a = cl_alpha
-  } else if key == "border-width" { n.border = el_len(v) } else if key == "border" { el_border(n, s) } else { return false }
+  } else if key == "border-width" { el_sides_border(n, el_len(v)) } else if key == "border" { el_border(n, s) } else if key == "border-top" or key == "border-right" or key == "border-bottom" or key == "border-left" { el_border_side(n, key, s) } else { return false }
   return true
 }
 # border: 1 #ffcc00, or 1px solid accent
@@ -70,7 +70,7 @@ function el_border(n: UiNode, s: string) -> void {
   let parts = lss_split(s, 32)
   for i in 0 .. len(parts) {
     let p = parts[i]
-    if len(p) > 0 and ((p[0] >= 48 and p[0] <= 57) or p[0] == 46) { n.border = el_unit(p) } else if p == "none" { n.border = 0.0 } else if len(p) > 0 and p != "solid" {
+    if len(p) > 0 and ((p[0] >= 48 and p[0] <= 57) or p[0] == 46) { el_sides_border(n, el_unit(p)) } else if p == "none" { el_sides_border(n, 0.0) } else if len(p) > 0 and p != "solid" {
       n.border_c = ui_color(p)
       n.border_a = cl_alpha
     }

packages/ludic.ui/attr_border.ludic

@@ -0,0 +1,26 @@
+# attr_border.ludic - border widths, all sides or one
+# every side's border the same width
+function el_sides_border(n: UiNode, w: float) -> void {
+  n.border = w
+  n.bt = w
+  n.br = w
+  n.bb = w
+  n.bl = w
+}
+# border-bottom: 3px solid var(--accent) - one side's width, and the colour for the border
+function el_border_side(n: UiNode, key: string, s: string) -> void {
+  let keep_t = n.bt
+  let keep_r = n.br
+  let keep_b = n.bb
+  let keep_l = n.bl
+  el_border(n, s)
+  let w = n.bt
+  n.bt = keep_t
+  n.br = keep_r
+  n.bb = keep_b
+  n.bl = keep_l
+  if key == "border-top" { n.bt = w }
+  if key == "border-right" { n.br = w }
+  if key == "border-bottom" { n.bb = w }
+  if key == "border-left" { n.bl = w }
+}

packages/ludic.ui/draw.ludic

@@ -16,7 +16,7 @@ function fr_draw_in(n: UiNode) -> void {
   fr_background(n)
   fr_border(n)
   if n.kind == UI_TEXT { fr_text(n) }
-  if n.kind == UI_IMAGE and ui_be.image != null { ui_be.image(n.src, n.x + n.pl + n.border, n.y + n.pt + n.border, n.cw - ly_hin(n), n.ch - ly_vin(n), n.rfg, fr_ga * n.rfg_a) }
+  if n.kind == UI_IMAGE and ui_be.image != null { ui_be.image(n.src, n.x + n.pl + n.bl, n.y + n.pt + n.bt, n.cw - ly_hin(n), n.ch - ly_vin(n), n.rfg, fr_ga * n.rfg_a) }
   let clipped = n.kind == UI_SCROLL and ui_be.clip != null
   if clipped { fr_clip_push(n.x, n.y, n.cw, n.ch) }
   if n.children != null { fr_children(n) }
@@ -50,14 +50,17 @@ function fr_box(x: float, y: float, w: float, h: float, r: float, c: int, a: flo
   if r > 0.0 and ui_be.round != null { ui_be.round(x, y, w, h, r, c, a) } else if ui_be.rect != null { ui_be.rect(x, y, w, h, c, a) }
 }
 function fr_border(n: UiNode) -> void {
-  if n.border <= 0.0 or ui_be.rect == null { return }
+  if n.bt + n.br + n.bb + n.bl <= 0.0 or ui_be.rect == null { return }
   var c = n.border_c
   var ca = fr_ga * n.border_a
   if c < 0 {
     c = n.rfg
     ca = fr_ga * n.rfg_a
   }
-  fr_frame(n.x, n.y, n.cw, n.ch, n.border, c, ca)
+  if n.bt > 0.0 { ui_be.rect(n.x, n.y, n.cw, n.bt, c, ca) }
+  if n.bb > 0.0 { ui_be.rect(n.x, n.y + n.ch - n.bb, n.cw, n.bb, c, ca) }
+  if n.bl > 0.0 { ui_be.rect(n.x, n.y + n.bt, n.bl, n.ch - n.bt - n.bb, c, ca) }
+  if n.br > 0.0 { ui_be.rect(n.x + n.cw - n.br, n.y + n.bt, n.br, n.ch - n.bt - n.bb, c, ca) }
 }
 function fr_frame(x: float, y: float, w: float, h: float, b: float, c: int, a: float) -> void {
   ui_be.rect(x, y, w, b, c, a)
@@ -79,7 +82,7 @@ function fr_outline(n: UiNode) -> void {
 }
 # a text's lines (one, or the wrapped ones), each placed by text-align, the last cut by an ellipsis
 function fr_text(n: UiNode) -> void {
-  let y = n.y + n.pt + n.border
+  let y = n.y + n.pt + n.bt
   let a = n.rfg_a * fr_ga
   if n.lines == null {
     var s = n.text
@@ -91,7 +94,7 @@ function fr_text(n: UiNode) -> void {
 }
 # where a line starts: text-align within the room the box gives it
 function fr_line_x(n: UiNode, s: string) -> float {
-  let x = n.x + n.pl + n.border
+  let x = n.x + n.pl + n.bl
   if n.talign == UI_START { return x }
   let spare = n.cw - ly_hin(n) - ly_text_w(s, n.rsize)
   if n.talign == UI_CENTER { return x + spare / 2.0 }

packages/ludic.ui/index.ludic

@@ -39,6 +39,7 @@ import "elem.ludic"
 import "color.ludic"
 import "attr.ludic"
 import "attr_box.ludic"
+import "attr_border.ludic"
 import "attr_place.ludic"
 import "attr_edge.ludic"
 import "ua.ludic"

packages/ludic.ui/layout.ludic

@@ -42,8 +42,8 @@ function ly_measure(n: UiNode, avail: float, size: float, fg: int) -> void {
   n.mh = ly_clamp(n.mh, n.min_h, n.max_h)
 }
 var ly_fg_a: float = 1.0
-function ly_hin(n: UiNode) -> float { return n.pl + n.pr + n.border * 2.0 }
+function ly_hin(n: UiNode) -> float { return n.pl + n.pr + n.bl + n.br }
-function ly_vin(n: UiNode) -> float { return n.pt + n.pb + n.border * 2.0 }
+function ly_vin(n: UiNode) -> float { return n.pt + n.pb + n.bt + n.bb }
 function ly_clamp(v: float, lo: float, hi: float) -> float {
   var out = v
   if hi > 0.0 and out > hi { out = hi }

packages/ludic.ui/layout_run.ludic

@@ -11,7 +11,7 @@ function ly_place(n: UiNode, x: float, y: float, w: float, h: float) -> void {
   let inner_w = w - ly_hin(n)
   var inner_h = h - ly_vin(n)
   if n.kind == UI_SCROLL { inner_h = Math.max(n.content_h, h) - ly_vin(n) }
-  let top = n.y + n.pt + n.border
+  let top = n.y + n.pt + n.bt
   if n.dir == UI_ROW and n.wrap { ly_place_wrap(n, top, inner_w) } else if n.dir == UI_ROW { ly_place_line(n, 0, len(n.children), top, inner_w, inner_h) } else { ly_place_line(n, 0, len(n.children), top, inner_h, inner_w) }
   for i in 0 .. len(n.children) {
     if n.children[i].pos >= 2 { ly_place_abs(n, n.children[i]) }
@@ -76,7 +76,7 @@ function ly_place_child(n: UiNode, c: UiNode, at: float, top: float, m: float, c
   var off = 0.0
   if a == UI_CENTER { off = (cross_room - cr) / 2.0 }
   if a == UI_END { off = cross_room - cr }
-  let left = n.x + n.pl + n.border
+  let left = n.x + n.pl + n.bl
   if n.dir == UI_ROW {
     let cw = ly_clamp(m - c.ml - c.mr, c.min_w, c.max_w)
     ly_place(c, left + at + c.ml, top + off + c.mt, cw, ly_clamp(cr - c.mt - c.mb, c.min_h, c.max_h))

packages/ludic.ui/layout_wrap.ludic

@@ -24,10 +24,10 @@ function ly_place_wrap(n: UiNode, top0: float, inner_w: float) -> void {
 # position: absolute (in the parent's padding box) or fixed (in the screen): the insets say where,
 # and two opposite ones say how big; relative is placed as usual and moved by its insets
 function ly_place_abs(n: UiNode, c: UiNode) -> void {
-  var bx = n.x + n.border
+  var bx = n.x + n.bl
-  var by = n.y + n.border
+  var by = n.y + n.bt
-  var bw = n.cw - n.border * 2.0
+  var bw = n.cw - n.bl - n.br
-  var bh = n.ch - n.border * 2.0
+  var bh = n.ch - n.bt - n.bb
   if c.pos == 3 {
     bx = ly_vp_x
     by = ly_vp_y

packages/ludic.ui/node.ludic

@@ -31,7 +31,11 @@ export property UiNode {
   mr: float = 0.0
   mb: float = 0.0
   ml: float = 0.0
-  border: float = 0.0
+  border: float = 0.0           # border-width, all four sides; bt br bb bl are each side's own
+  bt: float = 0.0
+  br: float = 0.0
+  bb: float = 0.0
+  bl: float = 0.0
   border_c: int = -2
   gap: float = 0.0
   align: int = 0