feat(ui): min(), max() and clamp(); insets as percentages of the containing block

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

LANGUAGE.md

@@ -376,8 +376,12 @@ applies to both:
   - A length is `12`, `12px`, `50%`, `fit`/`auto`, `fill` or `calc()`. `width: 0` and `height: 0`
     are 0, not unset.
   - `calc()` takes `+`, `-`, `*` and `/` and brackets over `px`, `em`, `rem`, `vw`, `vh`, plain
-    numbers and `var()`; in a `width` or `height` it may also hold a percentage of the room
-    (`calc(50% - 10px)`).
+    numbers and `var()`; in a `width`, `height`, `top`, `right`, `bottom` or `left` it may also hold
+    a percentage of the room or of the containing block (`calc(50% - 10px)`). `min()`, `max()` and
+    `clamp(least, want, most)` pick among lengths, inside `calc()` or on their own
+    (`width: min(300px, 50vw)`); a percentage cannot be compared there.
+  - `top`, `right`, `bottom` and `left` take a percentage of the containing block: its width for
+    left and right, its height for top and bottom.
   - `flex-grow` (or `flex`) shares out the spare room along `flex-direction`, and `fill` is a share
     of 1. `justify-content` takes `flex-start`/`start`, `center`, `end`, `space-between`,
     `space-around` or `space-evenly`.

changes/defaults-views-templates.md

@@ -92,6 +92,8 @@ What a game's screens found missing, now in `ludic.ui`:
 - `text-fit: shrink MIN` shrinks a line to its box, then cuts it with an ellipsis; `line-height`;
   an `em` reads the font size the element ends with (a `font-size` later in the rule, or in a later
   rule), not the one it had so far;
+- `min()`, `max()` and `clamp()`, in `calc()` or on their own; `top` / `right` / `bottom` / `left`
+  as a percentage or a `calc()` of one, of the containing block;
 - a transition lands exactly on its end value (it had stopped a rounding error short of it, at every
   frame rate).
 

examples/library/ui_calc.ludic

@@ -0,0 +1,20 @@
+# ui_calc.ludic — min(), max() and clamp() (on their own and inside calc()), and top, right, bottom
+# and left as percentages and calc() of the containing block, for absolute and relative elements.
+import "ludic.ui"
+program UiCalc {
+  numbers float
+  const STYLE: string = "<style>.a { width: min(300px, 50vw) }\n.b { width: max(10px, calc(5em + 2px)) }\n.c { width: clamp(50px, 10vw, 100px) }\n.d { height: calc(clamp(1px, 2em, 20px) + 1px) }\n.box { width: 300px; height: 200px; position: relative }\n.p { position: absolute; left: 50%; top: calc(25% + 10px); width: 20px; height: 20px }\n.q { position: absolute; right: calc(10% - 5px); bottom: 50%; width: 20px; height: 20px }\n.r { position: relative; left: 10%; width: 20px; height: 20px }</style>"
+  const BODY: string = "<screen name='c'><div class='a'/><div class='b'/><div class='c'/><div class='d'/><div class='box'><div class='p'/><div class='q'/><div class='r'/></div></screen>"
+  entry {
+    ui_backend(new UiBackend)
+    ui_load_text("<ui>" + STYLE + BODY + "</ui>", "c.xml")
+    ui_show("c", null, 0.0, 0.0, 400.0, 600.0)
+    let r: UiNode = ui_nodes("c", null)
+    ui_place(r, 0.0, 0.0, 400.0, 600.0)
+    let box = r.children[4]
+    let p = box.children[0]
+    let q = box.children[1]
+    let rel = box.children[2]
+    print(`min {int(r.children[0].cw)} max {int(r.children[1].cw)} clamp {int(r.children[2].cw)} {int(r.children[3].ch)} | p {int(p.x - box.x)},{int(p.y - box.y)} q {int(q.x - box.x)},{int(q.y - box.y)} r {int(rel.x - box.x)}`)
+  }
+}

packages/ludic.ui/attr_inset.ludic

@@ -0,0 +1,47 @@
+# attr_inset.ludic - top, right, bottom and left as lengths, percentages or calc() of both: the
+# percentage is kept apart and taken of the containing block's width (left, right) or height (top,
+# bottom) when the element is placed
+function el_inset(n: UiNode, side: int, v: Val) -> float {
+  let s = vl_text(v)
+  var pct = 0.0
+  var px = UI_AUTO
+  if s != "auto" {
+    if ca_is(s) {
+      px = 0.0
+      if ca_eval(s) {
+        pct = ca_pct
+        px = ca_px
+      }
+    } else if len(s) > 1 and s[len(s) - 1] == 37 {
+      pct = el_num(s)
+      px = 0.0
+    } else { px = el_len(v) }
+  }
+  if pct != 0.0 or n.ex != null {
+    let x = nx(n)
+    if side == 0 { x.ip_t = pct }
+    if side == 1 { x.ip_r = pct }
+    if side == 2 { x.ip_b = pct }
+    if side == 3 { x.ip_l = pct }
+  }
+  return px
+}
+# an inset in px against a containing block `base` wide (or high), or UI_AUTO
+function ly_ins(c: UiNode, side: int, base: float) -> float {
+  var v = c.top
+  if side == 1 { v = c.right }
+  if side == 2 { v = c.bottom }
+  if side == 3 { v = c.left }
+  if v == UI_AUTO or c.ex == null { return v }
+  var p = c.ex.ip_t
+  if side == 1 { p = c.ex.ip_r }
+  if side == 2 { p = c.ex.ip_b }
+  if side == 3 { p = c.ex.ip_l }
+  return v + base * p / 100.0
+}
+# position: relative moves an element by its insets, a percentage taken of its parent's content box
+function ly_nudge(n: UiNode, c: UiNode) -> void {
+  let bw = n.cw - ly_hin(n)
+  let bh = n.ch - ly_vin(n)
+  ly_offset(c, ly_or0(ly_ins(c, 3, bw)) - ly_or0(ly_ins(c, 1, bw)), ly_or0(ly_ins(c, 0, bh)) - ly_or0(ly_ins(c, 2, bh)))
+}

packages/ludic.ui/attr_place.ludic

@@ -6,7 +6,7 @@ function el_place_prop(n: UiNode, key: string, v: Val) -> bool {
     if s == "relative" { n.pos = 1 }
     if s == "absolute" { n.pos = 2 }
     if s == "fixed" { n.pos = 3 }
-  } else if key == "top" { n.top = el_inset(v) } else if key == "right" { n.right = el_inset(v) } else if key == "bottom" { n.bottom = el_inset(v) } else if key == "left" { n.left = el_inset(v) } else if key == "inset" {
+  } else if key == "top" { n.top = el_inset(n, 0, v) } else if key == "right" { n.right = el_inset(n, 1, v) } else if key == "bottom" { n.bottom = el_inset(n, 2, v) } else if key == "left" { n.left = el_inset(n, 3, v) } else if key == "inset" {
     el_sides(v)
     n.top = el_s0
     n.right = el_s1
@@ -17,7 +17,3 @@ function el_place_prop(n: UiNode, key: string, v: Val) -> bool {
   } else if key == "white-space" { n.nowrap = s == "nowrap" or s == "pre" } else if key == "text-overflow" { n.ellipsis = s == "ellipsis" } else { return false }
   return true
 }
-function el_inset(v: Val) -> float {
-  if vl_text(v) == "auto" { return UI_AUTO }
-  return el_len(v)
-}

packages/ludic.ui/calc.ludic

@@ -1,21 +1,20 @@
-# calc.ludic - CSS's calc(): + - * / and brackets over lengths (px, em, rem, vw, vh, or a bare
-# number, which is px as everywhere here), percentages and plain numbers; var() is already read by
-# then. A width or height keeps its percentage apart (w_pct plus an offset) to be taken of the room
-# the element is given; anywhere else a percentage in calc() has nothing to be a share of.
+# calc.ludic - CSS's calc(), min(), max() and clamp(): + - * / and brackets over lengths (px, em, rem,
+# vw, vh, a bare number is px), percentages and plain numbers. A width, height or inset keeps its
+# percentage apart, to be taken of the room it is given; elsewhere a percentage has nothing to share.
 var ca_s: string = ""
 var ca_i: int = 0
 var ca_bad: string = ""
 var ca_px: float = 0.0            # the result: its lengths, its percentage, and whether it had units
 var ca_pct: float = 0.0
-function ca_is(s: string) -> bool { return len(s) > 5 and s[0..5] == "calc(" }
+function ca_is(s: string) -> bool { return ca_fn_at(s, 0) != "" }
 # calc(...) worked out into ca_px and ca_pct; false (with the reason said) when it cannot be
 function ca_eval(s: string) -> bool {
-  ca_s = s[5..len(s)]
+  ca_s = s
   ca_i = 0
   ca_bad = ""
-  let v = ca_sum()
+  let v = ca_factor()
   ca_ws()
-  if ca_bad == "" and (ca_i >= len(ca_s) or ca_s[ca_i] != 41) { ca_bad = "a closing )" }
+  if ca_bad == "" and ca_i < len(ca_s) { ca_bad = "nothing after its closing )" }
   if ca_bad != "" {
     ui_err(`{s}: calc() expected {ca_bad}`)
     return false

packages/ludic.ui/calc_fns.ludic

@@ -0,0 +1,48 @@
+# calc_fns.ludic - min(a, b, ...), max(a, b, ...) and clamp(least, want, most) over lengths or plain
+# numbers, inside calc() or on their own. Comparing needs a length: a percentage there has no room yet.
+# the function a value starts with at `at` (calc, min, max or clamp), or ""
+function ca_fn_at(s: string, at: int) -> string {
+  if ca_word(s, at, "calc(") { return "calc" }
+  if ca_word(s, at, "min(") { return "min" }
+  if ca_word(s, at, "max(") { return "max" }
+  if ca_word(s, at, "clamp(") { return "clamp" }
+  return ""
+}
+function ca_word(s: string, at: int, w: string) -> bool { return at + len(w) <= len(s) and s[at..at + len(w)] == w }
+function ca_fn(f: string) -> CaVal {
+  ca_i = ca_i + len(f) + 1
+  let args = new []CaVal
+  while ca_bad == "" {
+    push(args, ca_sum())
+    ca_ws()
+    if ca_i < len(ca_s) and ca_s[ca_i] == 44 { ca_i += 1 } else { break }
+  }
+  if ca_bad == "" and (ca_i >= len(ca_s) or ca_s[ca_i] != 41) { ca_bad = "a closing )" }
+  ca_i += 1
+  if ca_bad != "" { return new CaVal }
+  if f == "clamp" and len(args) != 3 {
+    ca_bad = "clamp(least, want, most)"
+    return new CaVal
+  }
+  for i in 0 .. len(args) {
+    if args[i].pct != 0.0 {
+      ca_bad = `lengths in {f}(), not a percentage`
+      return new CaVal
+    }
+  }
+  if f == "clamp" { return ca_pick(ca_pick(args[1], args[0], false), args[2], true) }
+  var r = args[0]
+  for i in 1 .. len(args) { r = ca_pick(r, args[i], f == "min") }
+  return r
+}
+# the smaller (or the larger) of two, a bare number beside a length being px
+function ca_pick(a: CaVal, b: CaVal, smaller: bool) -> CaVal {
+  if a.bare and b.bare {
+    if (b.n < a.n) == smaller and b.n != a.n { return b }
+    return a
+  }
+  let la = ca_len(a)
+  let lb = ca_len(b)
+  if (lb.px < la.px) == smaller and lb.px != la.px { return lb }
+  return la
+}

packages/ludic.ui/calc_terms.ludic

@@ -43,7 +43,9 @@ function ca_factor() -> CaVal {
     ca_i += 1
     return ca_scale(ca_factor(), -1.0)
   }
-  if c == 40 or (ca_i + 5 <= len(ca_s) and ca_s[ca_i..ca_i + 5] == "calc(") {
+  let f = ca_fn_at(ca_s, ca_i)
+  if f == "min" or f == "max" or f == "clamp" { return ca_fn(f) }
+  if c == 40 or f == "calc" {
     while ca_s[ca_i] != 40 { ca_i += 1 }
     ca_i += 1
     let v = ca_sum()

packages/ludic.ui/index.ludic

@@ -49,10 +49,12 @@ import "attr.ludic"
 import "attr_box.ludic"
 import "attr_border.ludic"
 import "attr_place.ludic"
+import "attr_inset.ludic"
 import "attr_edge.ludic"
 import "attr_more.ludic"
 import "calc.ludic"
 import "calc_terms.ludic"
+import "calc_fns.ludic"
 import "ua.ludic"
 import "anim.ludic"
 import "transition.ludic"

packages/ludic.ui/layout_run.ludic

@@ -64,7 +64,7 @@ function ly_place_line(n: UiNode, from: int, to: int, top: float, main_room: flo
     var m = sizes[i - from]
     if grows > 0.0 and free > 0.0 { m = m + free * ly_grow(c, n.dir) / grows }
     ly_place_child(n, c, at, top, m, cross_room)
-    if c.pos == 1 { ly_offset(c, ly_or0(c.left) - ly_or0(c.right), ly_or0(c.top) - ly_or0(c.bottom)) }
+    if c.pos == 1 { ly_nudge(n, c) }
     at = at + m + n.gap + extra
   }
 }

packages/ludic.ui/layout_wrap.ludic

@@ -38,12 +38,16 @@ function ly_place_abs(n: UiNode, c: UiNode) -> void {
   var h = c.mh
   if c.w_pct > 0.0 { w = ly_pw(c, bw) }
   if c.h_pct > 0.0 { h = ly_ph(c, bh) }
-  if c.w == UI_FILL or (c.left != UI_AUTO and c.right != UI_AUTO and c.w == UI_AUTO) { w = bw - ly_or0(c.left) - ly_or0(c.right) - c.ml - c.mr }
-  if c.h == UI_FILL or (c.top != UI_AUTO and c.bottom != UI_AUTO and c.h == UI_AUTO) { h = bh - ly_or0(c.top) - ly_or0(c.bottom) - c.mt - c.mb }
+  let l = ly_ins(c, 3, bw)
+  let r = ly_ins(c, 1, bw)
+  let t = ly_ins(c, 0, bh)
+  let b = ly_ins(c, 2, bh)
+  if c.w == UI_FILL or (l != UI_AUTO and r != UI_AUTO and c.w == UI_AUTO) { w = bw - ly_or0(l) - ly_or0(r) - c.ml - c.mr }
+  if c.h == UI_FILL or (t != UI_AUTO and b != UI_AUTO and c.h == UI_AUTO) { h = bh - ly_or0(t) - ly_or0(b) - c.mt - c.mb }
   var x = bx + n.pl + c.ml
-  if c.left != UI_AUTO { x = bx + c.left + c.ml } else if c.right != UI_AUTO { x = bx + bw - c.right - c.mr - w }
+  if l != UI_AUTO { x = bx + l + c.ml } else if r != UI_AUTO { x = bx + bw - r - c.mr - w }
   var y = by + n.pt + c.mt
-  if c.top != UI_AUTO { y = by + c.top + c.mt } else if c.bottom != UI_AUTO { y = by + bh - c.bottom - c.mb - h }
+  if t != UI_AUTO { y = by + t + c.mt } else if b != UI_AUTO { y = by + bh - b - c.mb - h }
   ly_place(c, x, y, w, h)
 }
 function ly_or0(v: float) -> float {

packages/ludic.ui/node_more.ludic

@@ -22,6 +22,10 @@ export property UiNodeX {
   fit_min: float = 0.0          # text-fit: shrink MIN - the smallest a line is shrunk to fit its box
   lh_kind: int = 0              # line-height: 0 normal, 1 a multiple of the font size, 2 px
   lh_v: float = 0.0
+  ip_t: float = 0.0             # an inset's percentage of its containing block (top right bottom left)
+  ip_r: float = 0.0
+  ip_b: float = 0.0
+  ip_l: float = 0.0
 }
 function nx(n: UiNode) -> UiNodeX {
   if n.ex == null { n.ex = new UiNodeX }

tools/ludic-cli/test.ludic

@@ -767,6 +767,7 @@ function cmd_dev_test() -> int {
   controller_case("library/ui_pointer", "", "pointerdown 100,80 0 0; pointerup 300,300 0 0; wheel 50,50 0 1; dragged 200 | zoomed 1 pad 7 10 1 2 hold true 0 0 active 16711680 | zoomed 1 pad 7 10 1 2 hold false 1 0 | zoomed 1 pad 7 10 1 2 hold true 1 0 | zoomed 1 pad 7 10 1 2 hold false 2 0 3817286", "ui_pointer.ludic (L11: pointer events for natives and markup, capture until release, a button over a native keeps its press; on-down, on-up and :active)")
   controller_case("library/ui_popover_align", "", "centred, flipped in the panel 90,40 | end below 110,70 | above b in the list 0 inside 1", "ui_popover_align.ludic (L11: anchored popovers aligned along their side, flipped and kept within a named container or their scroll box)")
   controller_case("library/ui_text", "", "Photograph the Be...@100 y0 | Short@160 y20 | Medium words@133 y40 | lines 5 160 one two@160 y66 three@160 y98 | tall 30 | em 20 24 | tie #00ff00", "ui_text.ludic (L11: text-fit shrinks then cuts, line-height, em against the final font size, a sheet over its imports on a tie)")
+  controller_case("library/ui_calc", "", "min 200 max 82 clamp 50 21 | p 150,60 q 255,80 r 30", "ui_calc.ludic (L11: min(), max() and clamp(), and insets as percentages and calc() of the containing block)")
   controller_case("library/ui_inputs", "", "count 12 12 32 0.5 0 | 20 32 0.5 0 | 19 32 0.5 0 | How many to carry | Space bar listening 1 19 9 0.5 0 | 19 9 0.5 0 | 19 0 0.5 0 | 60% 0.50 s | 19 0 0.6 9 | 7!", "ui_inputs.ludic (L11: number fields, key capture with Esc and Backspace, notes, range formats, an event named set, a string prop given a number)")
   controller_case("library/ui_boxes", "", "list 120 of 200 | text at 32 152 wide, 3 lines, row 60 | zero 0x0 | half 140x36 pad 4 2 | order abc at 16 | fill 98x8 of 200x12", "ui_boxes.ludic (L11: flex-shrink to the leftover room, text wrapping beside its siblings, zero sizes, calc(), order, the range track as a row)")
   controller_case("library/ui_look", "", "root div.in.i.m pad 5 margin 9 color #ff0000 text Hi 2,53 #102030 | text Hi 0,50 #eeeeee | opacity 0.25 | nine 40 #ffffff nine 40 #ff0000 of 2 image photo.png #ffffff | image icon:tent #00ff00 | text first line 29,205 #eeeeee | text second line 29,223 #eeeeee by id at 84,50 | flipped at 246,268 100x32", "ui_look.ludic (L11: nested components styled by specificity, text-shadow, ui_opacity, border-image tints, pictures, tooltip lines, anchored popovers)")