Ranger tree literals — Radix components

controls

demo

open menu

submenu

show it

collisions

bar at the bottom

checkbox items

profile

format

align

order

what to try

Click a header three times: ascending, descending, then back to the order the data arrived in. A two-way toggle can never reach that third state.

Spend is numeric, so its first click sorts descending — biggest first is the useful first answer for a quantity, A-to-Z for a name.

The header checkbox is page-scoped: select page one, go to page two, and the first page stays selected.

what to try

Click a row, then use the arrows. → on a closed folder opens it and stays put; on an open one it steps to the first child. Two meanings, one key, decided by the row.

→ on a leaf is not a no-op — it steps down, the same as on an open folder. That is what the library does, and the first reading here said otherwise.

End goes to the last visible row, which is the deepest open descendant and not the last top-level item. Enter and Space toggle a folder and select nothing.

what to try

Open the menu, then rest the pointer on Available. The submenu waits 100 ms before opening — measured off Radix, and the reason dragging down a menu does not flash every submenu on the way past. Moving away closes it at once.

From the keyboard: ↓ to step, → or Enter to go in, ← to come back out, Esc to close everything. Arrowing in puts you on the submenu’s first item; hovering in leaves you on the row you are pointing at. The asymmetry is Radix’s, not ours.

→ on an ordinary row does nothing, and neither does ← at the top level. A vertical menu’s horizontal arrows are for nesting and nothing else.

theme

One name, handed to applyTree. The sheet holds all three palettes — @vars marine { --page: … } beats the unscoped @vars — and every rule in the file names a role rather than a colour. So nothing in the tree gains or loses a class and nothing moves: a theme is forty-one colours, not a second set of rules. ?theme=sunrise lands on one directly.

what to try

Press a range button, or focus one and use the arrows. The chart is not a picture: it is a Vega specification run by Vela, turned into draw commands, and appended to this page’s display list by VlEvgList. Ninety points go in as data and the outline that comes out is the one Vela computed.

There were two routes. An element can carry the SVG in svgSource and EVGDisplayList imports it — and that drops every label, because the importer walks vector items and a <text> is not one: forty-seven commands of geometry and not one axis tick. A picture with no numbers on its axes still looks like a chart, which is why the gate counts words as well as outlines.

The chart is therefore not in the element tree. It is painted at the box the layout reserved, which is why the placeholder has an id and no children: the tree owns where it goes and Vela owns what is drawn there.

The range is a radio group and not a toggle group, and the difference is measured: clicking the chosen item of a toggle group deselects it, and a range picker with no range picked is a chart with nothing to draw.

what to try

The other form shape: label to the left, every control’s left edge on one column. The rows are deliberately three different heights — a text box is 38, the photo row 40, the switch row 22 — so a layout that only worked when they matched would have nowhere to hide.

Tab and type. The clock in the time field is a leading icon and the calendar a trailing one, and the caret has to know: a leading icon moves where the run starts.

The date and time boxes are text fields with an icon. Segmented editing — where ArrowUp on the month changes the month and not the caret — is its own contract, and it is not built here rather than half-built.

effects

The background, from lib/evg/gl/effect-presets.css — eleven blocks that are already a look. Picking one types it into the stylesheet below and the cascade reads it from there; a raindrop lands on the pane rather than on the sky, because it draws what is behind an element and the sky would paint over it.

Each one is an element that declared an effect. Turning one off sets a flag the painter reads: the pass is skipped, the shader never runs, and a press on a sleeping card goes nowhere. Nothing is rebuilt to stop drawing one shader.

what to try

Three effects, each one line of CSS on the element that has it. Press either dark card and the water is that card’s alone — the third declares nothing and stays still. The sky drifts on its own; the pane over it refracts what is behind it rather than blurring it, and the two lines inside the pane are drawn after it, so they stay sharp. Nothing in the demo’s code holds a shader, a clock or a coordinate: evg-surface-effect says what runs, evg-effect-on what starts it, and the box comes from the layout.

A surface effect is a GPU pass, so the PNG snapshots of this page and the software rasteriser draw the boxes and the text and none of the effects.

what to try

The M-Files metadata card, on the kit. Customer is a combobox with chips: click it and type, pick with the arrows and Enter (the list stays open), press Backspace in the empty box to take the last chip, or ArrowLeft onto the chips and Delete one. Class is the same control with one value: type “zz” and Tab away and it reverts to the chosen label. Every one of those rules was measured on Base UI’s Combobox.

Save with an emptied required field: the error takes the hint’s line, and the control announces it instead of the hint. Discard puts everything back.

what to try

Tab between the fields and type. The caret and the blue selection band are positioned with measureRun(value[0..i]) — the same measurement the painter makes of the same string, so the bar is between the two characters it claims to be between rather than near them.

The Amount field opens focused with its contents selected, which is the one state that shows a caret and a band at once. The controller was measuring at 14px against text drawn at 13, and the band ran four pixels past the number it was selecting — the breadcrumb’s font-family bug, repeated with the size.

The password’s value is never its glyphs: value is what a reader and the conformance trace get, glyphText() is what is drawn, and nothing joins them. The eye flips the second and leaves the first alone.

A field in error is described by its error and not also by its hint. Reading both leaves a reader to work out which one still applies — and the hint’s line is where the error goes, so the picture says the same thing.

Fix the Email field. Its error is decided from the value on every rebuild, not written once: type an @ and a dot and the ring, the sentence and aria-invalid all stop claiming it is wrong together. Each message says what is wrong rather than that something is.

Find a customer is a ComboboxCtl. Type a few letters to filter the list, ↑ ↓ to walk it, Enter to take a row into the box; leaving it with a half-typed query puts the chosen label back. The arrows reach the list rather than the caret because the demo asks for them — the text bridge leaves them with the platform everywhere else.

what to try

Click a day, then click it again. A single-select calendar toggles — choosing the chosen day clears it — and the field above empties to show that it did. Measured against react-day-picker, which is what shadcn’s Calendar wraps; guessing here gives you a date you cannot un-set.

Home and End move within the week, not the month. From Friday the 1st, Home is April’s 26th — an outside day — and the caption follows it. That one row of the capture is the reason this component has an oracle at all: “Home goes to the 1st” is the obvious implementation and it is wrong.

PageUp from the 31st lands on the 30th of April, because April has no 31st. The page keys carry the day number and clamp it; subtracting thirty-one days agrees here by luck and disagrees in most other months.

Type into the date field. It is a mm/dd/yyyy editor now, not a label: “1” then “3” in the month gives 12 and moves to the day, ArrowUp on 12 wraps to 01, Backspace empties a segment without moving, and a complete date turns the grid to its month with the day chosen. Measured against Chromium’s own <input type="date">, segment by segment through the accessibility tree, in ui:datefield:check.

The tab stop at rest is today, not the first of the month — also measured, and also not what this was first written as. Two behaviours are deliberately not copied: the reference’s roving tabindex loses track of focus, and it emits no aria-selected. Both are recorded as divergences and counted as such rather than quietly scored as parity.

what to try

Click a slot and type six digits. The active slot is ringed, the first empty one carries the caret, and Verify lights when the sixth digit lands. A seventh digit replaces the sixth rather than being refused — measured against input-otp, the library behind shadcn’s Input OTP.

Home, then a digit. The selection in this component is never a bare caret inside the value: a caret on a character becomes a range over it, so typing there replaces and moves on. Backspace on a middle slot leaves the slot before it active, because a caret that moved left settles on the character to its left. Both are the reference’s rules, reproduced.

A letter into the code does nothing; the invite field below takes any character. Tab leaves the code and Shift+Tab comes back at the end, wherever you left from — the reference’s focus handler puts it there. One thing is deliberately not copied: a click on a slot while the field already has focus selects that slot here; the reference lets the browser place a caret in its invisible squeezed text and the capture shows slot 0 clicked selecting slot 3.

Not wired on this page: the clipboard. The controller’s paste is measured (a code over a half-filled field, a code with punctuation refused whole, a long one cut to fit), but this field has no text-input session yet, so Ctrl+V on the canvas does not reach it.

what to try

Click a value, pick something else, and watch the list under it. The count and the rows are FilterCtl’s answer, not a second one drawn to look like one — which is the only way to tell a filter bar from a picture of a filter bar.

Deselect everything in a chip. It does not empty the list. TanStack drops a filter whose value is empty rather than matching nothing, so a half-built chip shows every row — and the obvious code goes the other way, because [].includes(x) is false. Measured down both of TanStack’s routes, which disagree: that cleanup lives in setColumnFilters and nowhere else, so a bar holding its own rule tree never gets it for free.

The assignee chip holds four people and draws three. “+1” is the overflow rule from the reference screenshot, on the page rather than only in a gate.

Arrow keys move between chips; Backspace removes the focused one. The first ArrowRight moves — the tab stop is already on the first chip, and a version that spent it adopting focus is the defect the controller’s gate caught.

what to try

Look at the three boxes stacked at 16:00. They all end at the same right edge, and each one is narrower than the last — 100%, 66.67%, 33.33%. Almost every hand-written calendar gives three overlapping events a third of the width each, and that is a visibly different calendar. Measured from a rendered @schedule-x/calendar, with three events rather than two, because two are 50/50 under either rule.

The 10:00 event is full width. It starts exactly when the 09:00 one ends, so it takes that column back rather than opening a fourth. Touching is not overlapping — a calendar testing with >= squeezes the whole morning to a quarter for no reason a person can see.

“On call” runs 23:00 to 01:00 and is in the all-day band, not the grid. A timed event crossing midnight is promoted to a multi-day span. The plausible guess is two boxes, and the plausible guess is wrong.

The bands use the other overlap rule. They stack by first fit over inclusive dates, so two that share a single day cannot share a lane. Two overlap rules in one component, and using either one twice is wrong in one place.

ReUI’s own chrome is not drawn here: reui.io is refused by the egress proxy, so its view switcher and its colours were never seen. What is measured is where the events go.

what to try

Click anywhere to step the timeline on, and watch the rail. The dot and the line do not flip together: at step 3 the third dot is filled and the line under it is still pale, because the two are different predicates — step <= value for the dot, step < value for the line.

That is the whole finding, and it came off a picture of the reference rather than its source, which could not be reached. The obvious implementation gives both the same flag and draws a dark line under the current step.

The icons are lucide's own files, imported whole. stroke="currentColor" resolves to the hosting element's fill, so one copy of the artwork is dark on a pale dot and white on a filled one.

what to try

Drag the Filters window by its title bar. It is the same class as the dialog beside it with one flag different — and it is the one you can push aside to see what is underneath, which is the thing a modal cannot do.

Tab to the title bar and use the arrow keys: a gesture only a pointer can make is a gesture a keyboard cannot make, so the window moves 16 px a press.

The page behind the dialog is blurred, not just dimmed — backdrop-filter: blur(10px), painted by copying what is behind the scrim and running the same three-box kernel a browser uses. Both are declared, so a backend without the blur still dims.

what to look at

The seven dots leave together and arrive together. Everything between is the timing function, and the curve beside each one is sampled from the very function that moves it.

The cubic-bezier row goes past its target and comes back — its control points leave 0..1, and a solver that clamps would show a straight arrival instead.

effects.css — live

Try evg-fx-density, -hue, -speed on .fx-sky, or -sweep-speed on .fx-glass. Change evg-surface-effect to plasma-wave, raindrop or ambient-light and paste a block from lib/evg/gl/effect-presets.css to see another one.

Drag a row onto another and the list reorders — and it is rebuilt, not moved: the page holds an order and hands it over, and the tree literal builds whatever it is given. Click a row and use Space, ↑ ↓ and Escape for the same thing from the keyboard. The behaviour is the one gallery/ui/src/SortableCtl.rgr is measured against, item for item, with @dnd-kit/sortable as the reference.

The state is not this demo's. Sorting, page-scoped selection and the paging arithmetic all live in gallery/ui/src/TableCtl.rgr, which the conformance harness measures against @tanstack/react-table — the library ReUI's table is built on. This file is the other half: a treefactory and a stylesheet, and nothing else. The controller decides what is true; the tree literal decides what it looks like.

The rows are siblings. There is no group per folder: the visible rows are one flat list and the nesting is carried by aria-level alone, because that is what @headless-tree/core renders and therefore what ReUI's tree renders. The indent is a spacer this demo adds; a reader never sees it and does not need to. Open/closed, focus and every key are gallery/ui/src/TreeCtl.rgr’s.

This demo owns no state at all. Open/closed, the roving focus, the submenu stack, the 100 ms hover delay and every key are gallery/ui/src/MenuCtl.rgr’s, which five conformance specs measure against @radix-ui/react-dropdown-menu. What is here is a treefactory, a stylesheet, and which icon goes on which row. Compare it with the menubar demo above, whose keyboard is hand-written and matched against nothing.

Anything can go inside. WindowCtl owns a frame and a title bar; bodyEl is an ordinary EVGElement the caller fills, and build() re-makes the chrome around it without touching it. Here one holds a form and the other a small table, from two unrelated tree literals. The older EVGWindow could hold neither: its vocabulary is label, button, radio, checkbox, and one rectangle whose pixels the owner paints by hand.

Hover the cards at the bottom. Nothing in MotionDemo.rgr knows what a pointer is: the tree is boxes with class names, and every hover, press and journey on this page is a rule in motion.css. The page’s only job is to turn a theme over every 1.7 seconds and to hand the engine the real elapsed time each frame.

Cross the slow card quickly. Its transition is 900ms, and leaving half way through does not take another 900ms to come back — a reversal is shortened by how far the value actually got, measured after the easing curve rather than off the clock. On ease-in at the midpoint those differ by nearly a factor of two.

Click it. The canvas answers the pointer through EVG’s own hit testing: a press is resolved against the same laid-out tree that was drawn, topmost first, so a click inside an open panel reaches the panel and not the trigger it covers. Hovering Share opens the submenu; Escape closes; ← and → walk the bar, ↑ and ↓ the rows. The sidebar is a second view of the same state.

And read it. A canvas hands a screen reader one empty graphic no matter what was drawn into it, so the page also publishes what the frame means: EVGA11yFromTree walks the same elements and emits roles, names, states and rectangles, and evg-a11y.js mirrors those into transparent DOM over the canvas — which is what a reader actually walks. Nothing is described twice: the roles are on the treefactory tags beside the classes. A reader activating a node is answered by pressing the app at that node’s rectangle, so it takes the same path as the mouse.

The dropdowns float under their triggers because EVG has overlay surfaces: Content is still the Menu’s child, and layout takes it out of the parent’s flow, finds the anchor among its own siblings and moves it and its subtree there. A submenu is a Menu like any other — there is no submenu case in the demo. A surface near an edge flips to the other side of its anchor and slides along the edge to stay on the page. The toolbar’s italic and underlined buttons are missing for an unrelated reason: EVG has no font-style and no text-decoration.