Rux

Rux v0.2.0 — selection, scrollbars, and a lot of CSS

2026-07-20T00:00:00+00:00

v0.1 could open a window and edit a field. v0.2 is about making that field feel like a field — and about closing the gap between "valid CSS" and "CSS that does something."

Four things landed: text selection + clipboard, the last two input types, scrolling polish, and a serious CSS push. 74 tests pass, and every item below was driven in the window before it was called done.

Text selection and the clipboard</h2>
A focused input now has a selection, not just a caret.

Drag across text to select it; double-click selects a word.</li>
Shift + any movement (arrows, Home/End, Up/Down in a textarea) extends from the anchor; the same movement without Shift collapses.</li>
Typing, pasting, Backspace and Delete replace what's selected.</li>
Ctrl+A / C / X / V against the real system clipboard, via arboard</a>. Paste three lines into a single-line input and it keeps the first, which is what you'd expect and not what a naive implementation does.</li> </ul>
The modelling decision that made this clean: a selection isn't a second thing to track alongside the caret, it's the range between a caret and an anchor. So focus became `{ model, caret, anchor }</code>, and the one restore pass that puts the caret back after a rebuild puts the selection back too. Given that v0.1's nastiest bug was a restore pass that only handled half its job, not adding a second one mattered.`
The trap worth writing down: parley will hand you selection rectangles, and they're laid out on parley's line pitch. Rux draws lines with the leading trimmed, which is a different pitch. Take those rects as-is and the highlight drifts a little further off the glyphs with every wrapped line. It's invisible in a one-line field, obvious the moment you drag through a textarea. So Rux takes only the horizontal extent from parley and recomputes the vertical from its own line stepping, keyed by the line index parley helpfully returns beside each rect.
select, textarea, and keyboard focus</h2> type="textarea"</code> — multi-line: Enter inserts a newline, the value wraps, Up/Down move the caret between lines, and it scrolls vertically with the caret kept in view as you type.</li> type="select"</code> — shows the bound value and opens a dropdown of :options</code>: one floating panel with a shadow, the current value as a pill, hairline separators.</li> Tab / Shift+Tab now move a focus ring through every focusable: text inputs, buttons, checkboxes, radios, selects. Space/Enter activates the focused one. Tabbing to something below the fold scrolls it into view.</li> </ul> Two fixes came straight out of using it: inputs were hugging their text and shrinking as you typed (they now default to width: 100%</code>), and single-line inputs wrapped when they should clip. Scrolling that behaves like scrolling</h2> v0.1's scrolling was wheel-only and vertical-only. Now: Horizontal scrolling — the offset is two-axis, so a box scrolls whichever way its content actually overflows. Shift+wheel goes sideways.</li> Scrollbars — an overlay on the box's trailing edge, only on an axis that has travel, with the thumb sized as the box's fraction of the content (floored so it stays grabbable). When both axes scroll, the tracks stop short of the corner.</li> Drag a thumb, and a press on a thumb never becomes a tap on the content underneath it.</li> Keyboard — arrows, PageUp/PageDown, Home/End scroll the box under the pointer, reached only after a focused input has declined the key.</li> Touch — a finger drags the content. This is the one piece here that has not been verified on real hardware; there's no touch device on the machine it was written on.</li> </ul> The bug in this batch is a good advertisement for looking at things. The horizontal thumb was painted using the track's length as its thickness: a pale slab across the entire box, impossible to miss on screen, and completely invisible to a test suite that only ever checked the vertical bar. The axis you didn't test is the axis that's broken. The CSS push</h2> The biggest gap in v0.1 wasn't a missing feature, it was silence: you wrote valid CSS, nothing happened, and nothing told you why. v0.2 attacks that from both ends: more honored properties, and a warning when a declaration is ignored. Newly honored: font-family</code> (you could not choose a font at all before, the single most visible gap), font-style</code>, letter-spacing</code>, word-spacing</code>, line-height</code>, text-decoration</code>, white-space: nowrap</code>, box-shadow</code>, linear and radial gradients</code>, background-image: url()</code>, transform</code> (translate/scale/rotate), per-corner border-radius</code>, grid-column</code> / grid-row</code> / grid-auto-*</code>, aspect-ratio</code>, position</code> + inset, align-self</code> / justify-self</code> / align-content</code>, row-gap</code> / column-gap</code>, and cursor: pointer</code>. And two silent-wrongness bugs, which are worse than gaps: ></code>, +</code> and ~</code> were all matched as descendant combinators. .a > .b</code> was quietly styling grandchildren. Selectors now record a combinator per compound pair and match accordingly, siblings included.</li> Named colours didn't resolve. Worse, lightningcss minifies #ff0000</code> into red</code>, so writing plain hex red got you the default colour. A full CSS named-colour table now backs the parser.</li> </ul> transform</code> came with a caveat that's documented rather than hidden: hit, focus and scroll regions are computed untransformed, so a transformed element still taps at its original position. Still missing</h2> Written as plainly as the wins: CSS: variables and var()</code>, @media</code>, pseudo-classes (:hover</code>, :focus</code>, :checked</code>; the synthetic checked</code> class is a stopgap waiting for them), !important</code>, per-side border colours, box-sizing</code>, text-overflow</code>.</li> Text: no word-wise movement (Ctrl+arrows), no triple-click line select, no drag-and-drop of a selection, no ::selection</code> styling.</li> Scrolling: no track-click paging, no kinetic touch fling, and overflow-x</code> can't differ from overflow-y</code>.</li> The big one: a signal change still rebuilds the whole tree.</li> </ul> Next: fine-grained reactivity</h2> v0.2 shipped four features that each needed their own restore pass: put the caret back, put the selection back, put the scroll offsets back, remember which dropdown was open, remember where focus was. That list is now six entries long, and every entry is a chance to reproduce v0.1's caret bug. Per-binding subscriptions delete the entire category. That's v0.3, and it's the last real divergence between the architecture doc and the code.


Rux v0.1.0 — it runs
2026-07-15T00:00:00+00:00
Rux v0.1.0 is tagged. It opens a native window, lays a .rux</code> file out with real
flexbox and CSS grid, shapes text, edits inputs with a blinking caret, scrolls
lists, draws images, and reloads live when you save. No browser, no webview, no
JavaScript.</p>
That's the announcement. The more useful part of this post is what building it
taught, so let's do both.</p>
What v0.1 is</h2>
Nine milestones' worth of runtime, in ten crates and about 6,000 lines:</p>

Layout</strong> — flexbox and</em> CSS grid via taffy</a>, the full box model
(per-side padding/margin/border, shorthands, longhand overrides), sizing in
px</code> / %</code> / rem</code> / vw</code> / vh</code>, and minmax(0, 1fr)</code> grid tracks.</li>
Text</strong> — parley</a> shaping with system fonts, font-weight</code>, text-align</code>,
overflow-wrap</code> / word-break</code>, and leading trimmed so text hugs its box.</li>
Inputs</strong> — <input r-model="sig"></code> is a real text field: tap to focus,
click-to-position, arrows, Home/End, Backspace/Delete, and a caret that blinks
at 530 ms and survives the rebuild after every keystroke. Plus checkbox and
radio as tap-toggles.</li>
Scrolling</strong> — overflow: auto</code> scrolls with the wheel, and offsets survive a
rebuild, so tapping a row doesn't jump the list to the top.</li>
Images, opacity, clipping</strong>, HiDPI, and a recursive file watcher so imported
components hot-reload too.</li>
Signals</strong> driving {{ }}</code> bindings, r-for</code>, r-if</code>, r-model</code>.</li>
</ul>
56 tests pass. Every example has been driven on screen — which brings us to the
thing worth writing down.</p>
The lesson: tests didn't catch anything that mattered</h2>
For most of the build, Rux was verified by cargo test</code>. The suite was green and
growing, and it inspired a confidence that turned out to be completely
unearned. The first time the examples were actually run and looked at</em>, bugs
fell out within seconds — and every single one had been invisible to the tests</strong>:</p>

Text re-wrapped over its own siblings.</strong> measure</code> returned a fractional
natural width (98.001px), taffy rounded the box down to 98px, and paint
re-wrapped the text at the box width it was given — breaking the last word onto
a line the box had no height for. It looked random because it depended on which
way each string's width happened to round. The fix is one ceil()</code> and
disable_rounding()</code>; the invariant is a text box must never be narrower than
the text measured</em>.</li>
Boxes burst out of their parents.</strong> A box with no width took its full
max-content size, so a row of three 320px cards inside a 320px card laid out at
976px and hung off the side. "Hug" had to mean CSS fit-content</code>, not
max-content.</li>
A wrapping grid mis-measured its own height</strong>, reserving one row while
painting two, so the thing below rode up over it. That one is a taffy bug that
is still present in 0.12; Rux works around it in the to_taffy</code> mapping.</li>
@tap</code> inside r-for</code> silently did nothing.</strong> @tap="picked = item"</code> couldn't
see the loop variable, because handlers run later in global scope where item</code>
no longer exists. Loop bindings are now baked into the handler as a let</code>
prelude at build time. Nothing in the suite ever tested a handler that used a
loop variable.</li>
The caret stayed in the input you'd just left.</strong> The restore pass that puts
the caret back after a rebuild only ever set</em> a caret — it never cleared one.
The test asserted the caret appeared in the focused input; it never asserted it
disappeared</em> from the other.</li>
</ul>
That last one is the pattern: the test checked the positive case and stopped.
Tests protect against regression. They do not tell you it works. A feature is
not done until it has been driven in the window</strong> — that's now the rule, and it
has paid for itself in every release since.</p>
The renderer upgrade that looked like a disaster</h2>
v0.1 needed OverflowWrap</code>, WordBreak</code> and a real text Cursor</code>, none of which
parley 0.2 had. So: vello 0.3 → 0.9, parley 0.2 → 0.11.</p>
It exploded immediately with wgpu-hal errors that looked exactly like a
windows</code>-crate version split — the kind of dependency knot that eats a day. It
wasn't. It was a stale lockfile</strong>: an old gpu-allocator</code> pinned in place.
cargo update -p gpu-allocator</code> fixed the whole thing. The real API churn was
confined to three crates, and the one genuine trap was that vello 0.9 dropped
render_to_surface</code> — you now render into the surface's intermediate target and
blit, because rendering straight to a surface texture panics (Bgra8 vs Rgba8
storage).</p>
What v0.1 is not</h2>
Being clear about this, because a first release invites the wrong expectations:</p>

No text selection and no clipboard.</strong> You can edit a field; you can't select
in it, copy from it, or paste into it.</li>
No select</code> or textarea</code></strong>, and checkboxes and radios can't be reached by
keyboard.</li>
Scrolling is wheel-only and vertical-only.</strong> No scrollbars, no drag, no
keyboard, no horizontal.</li>
CSS has real holes</strong> — no variables, no @media</code>, no pseudo-classes, and no
way to pick a font at all. Worse, unknown properties are silently ignored</em>,
which is the worst failure mode the project has.</li>
A signal change rebuilds the whole tree.</strong> Fine at these sizes, but it's why
every piece of ephemeral state needs restoring by hand.</li>
Cross-DPI dragging is unverified</strong> — the machine here has one monitor.</li>
</ul>
And the honest framing question, which a group of developers put bluntly when they
saw it: this isn't novel.</em> Flutter, Slint and Lynx all render GPU UI without a
browser. That's true, and worth repeating on the front page rather than hiding:
Rux's only real claim is the ergonomic one — literal CSS, pure Rust, no DSL, no
JS. Whether that combination is genuinely nicer is the thing v0.1 exists to find
out.</p>
Next</h2>
v0.2: text selection and clipboard, the last two input types, scrolling polish,
and a serious CSS push — starting with font-family</code>, because "you cannot choose a
font" is the most visible gap on the list.</p>

Rux

Rux v0.2.0 — selection, scrollbars, and a lot of CSS

Rux v0.1.0 — it runs

Next</h2> v0.2: text selection and clipboard, the last two input types, scrolling polish, and a serious CSS push — starting with font-family</code>, because "you cannot choose a font" is the most visible gap on the list.</p>

Next</h2>
v0.2: text selection and clipboard, the last two input types, scrolling polish, and a serious CSS push — starting with `font-family</code>, because "you cannot choose a font" is the most visible gap on the list.</p>`