feat(ui): flex-shrink, text that wraps beside its siblings, calc(), order, and 0 as a size

- flex-shrink: a line whose children want more room than it has takes it back from those that
  shrink, in proportion to shrink times size and never below a min size, a fixed size or the
  content. A scroll box shrinks (and scrolls), and a box in a column shrinks as far as the scroll
  boxes inside it let it, so a list in a column takes the room its siblings leave with no height.
  `flex: grow shrink`, and `flex-shrink` by name.
- A row wider than its room measures its texts (and boxes without a width) again in the room the
  rest leave them, so a line wraps beside an icon.
- calc() with + - * / and brackets over px, %, em, rem, vw, vh, plain numbers and var(); a width
  or height keeps its percentage, taken of the room it is given. Lengths lists (padding, margin)
  keep a calc()'s spaces.
- `order` places a box's children without touching the tree.
- width: 0 and height: 0 are 0: an unset size is UI_AUTO now, not 0.
- A component root that is itself a component takes each user's class, style and id in turn (the
  outermost's id wins), and the rules of all their sheets are weighed by specificity together; a
  user's rule wins a tie. The parent's sheet used to override the child's whatever its specificity,
  and a middle component's sheet was lost.
- The default sheet lays .ui-track out as a row, so a range's fill is as tall as its track and a
  checked box's knob goes right; a range's thumb is centred on the fill's end.
- ui_boxes.ludic.

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

examples/library/ui_boxes.ludic

@@ -0,0 +1,25 @@
+# ui_boxes.ludic — ludic.ui's flex and sizes: a scroll box in a column shrinks to the room its
+# siblings leave (flex-shrink) and scrolls what it cannot show; text in a row wraps in the room left
+# after the icon beside it; width and height 0 are 0; calc() mixes a percentage with lengths; order
+# rearranges a row; and a range's track is a row, its fill as tall as the track.
+import "ludic.ui"
+import "ui_boxes_parts/Boxes.ludic"
+program UiBoxes {
+  numbers float
+  entry {
+    ui_backend(new UiBackend)
+    ui_show("Boxes", null, 0.0, 0.0, 400.0, 600.0)
+    let root: UiNode = ui_nodes("Boxes", null)
+    ui_place(root, 0.0, 0.0, 400.0, 600.0)
+    let page = root.children[0]
+    let list = page.children[0].children[1]
+    let line = page.children[1]
+    let text = line.children[1]
+    let zero = page.children[2]
+    let half = page.children[3]
+    let ord = page.children[4]
+    let track = page.children[5].children[0]
+    let fill = track.children[0]
+    print(`list {int(list.ch)} of {int(list.content_h)} | text at {int(text.x)} {int(text.cw)} wide, {len(text.lines)} lines, row {int(line.ch)} | zero {int(zero.cw)}x{int(zero.ch)} | half {int(half.cw)}x{int(half.ch)} pad {int(half.pt)} {int(half.pr)} | order {ord.children[0].text}{ord.children[1].text}{ord.children[2].text} at {int(ord.children[2].x)} | fill {int(fill.cw)}x{int(fill.ch)} of {int(track.cw)}x{int(track.ch)}`)
+  }
+}

examples/library/ui_boxes_parts/Boxes.lss

@@ -0,0 +1,14 @@
+.page { width: 300px; gap: 4px }
+.panel { height: 200px; gap: 10px }
+.bar { height: 30px }
+.list { overflow: auto }
+.item { height: 20px }
+.line { width: 200px; gap: 8px }
+.line img { width: 24px; height: 24px }
+.zero { width: 0; height: 0 }
+.half { --gap: 10px; width: calc(50% - var(--gap)); height: calc(2 * var(--gap) + 1em); padding: calc(1em / 4) 2px }
+.ordered { gap: 0 }
+.a { order: 1 }
+.b { order: 2 }
+.c { order: 3 }
+.ui-track { height: 12px; padding: 2px }

examples/library/ui_boxes_parts/Boxes.ludic

@@ -0,0 +1,5 @@
+# Boxes.ludic - a panel with a list that takes the room its header and footer leave, a line of text
+# beside an icon, zero sizes, calc(), order, and a range's track
+component Boxes {
+  state rows: int = 10
+}

examples/library/ui_boxes_parts/Boxes.xml

@@ -0,0 +1,12 @@
+<div class="page">
+  <div class="panel">
+    <p class="bar">Head</p>
+    <div class="list"><each in="{range(rows)}" as="r"><p class="item">{r}</p></each></div>
+    <p class="bar">Foot</p>
+  </div>
+  <row class="line"><img src="icon:tent"/><p>A line long enough that it has to wrap beside the icon</p></row>
+  <div class="zero"><p>hidden</p></div>
+  <div class="half"></div>
+  <row class="ordered"><span class="c">c</span><span class="a">a</span><span class="b">b</span></row>
+  <input type="range" min="{0}" max="{10}" value="{5}"/>
+</div>