A prebuilt tool, bin/ludic-ui-preview (built by ludic-dev build, shipped beside ludic-lsp, run as
`ludic ui-preview [--font DIR]`): ludic.ui with a backend that records every draw call as a line,
and mock component classes the studio describes (load / model / calls). frame t runs ui_show at
interface time t; text is measured on the CPU with the game's font.json metrics; locale goes
through ludic.i18n; tree / box / rules inspect the frame. No game code, no GPU, no network. The wire
protocol is frozen as tools/ui-preview/protocol-v1.md; smoke.txt is a transcript to run.
ludic.ui gains, all additive: UiClass.make_of, UiBackend.said / emitted, UiRule.text / at (with
comment line breaks kept so rule lines count true, and a class's styles read under its .lss path),
and ui_root, ui_find, ui_rules_of, ui_rule_value, ui_building, ui_class, ui_class_load,
ui_file_forget, ui_errors_clear; ui_nine_cuts_into exported.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- The arrows, a press on the select and the pad step past a disabled option (ct_opt_step), wrapping
as before.
- A value naming a disabled option is shown as the nearest enabled one (the lower of two as near) and
set to it once the build is done: an event fired while the tree is built is cleared with the frame's,
so the clamp is queued (ct_clamp_n / _i) and fired after nt_fired_clear.
- The < or > whose next option is disabled is drawn disabled (its part's :disabled), so a cycler shows
where the options stop being on; it still steps past them.
- ct_build_select moves to controls_opts.ludic with the rest (controls_build.ludic 119 -> 104 lines).
Golden ui_select_disabled: options 3 and 4 disabled, a value of 4 clamps to 2, > is drawn disabled
there, > wraps to 0 and < from 0 steps back to 2. The 38 ui examples pass.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- ludic.ui cv_join (units_pieces.ludic:93): a var() value's pieces were joined by +, a text left
behind per piece on every memo miss; it is written at its length at once (units_join.ludic), and
the miss is its own declared function (cs_vars_miss), bounded by the memo.
- ludic.hints hn_slots (rail.ludic:41): hints_reset made a new rail every time; the rail is
emptied in place, made again only for another count (rail_slots.ludic).
- value_spare_put (value.ludic:138): a list's spares grow only past the most it has ever cut off;
declared as such.
- ludic.save: save_read reads, parses and frees the file's text - the tree's strings are the
parser's own - and says whether the text was whole (SaveRead.intact) for the words of a refusal.
Maroon Lake's trip and home reads kept the whole file on every load and every menu card read.
Tests: ludic.save (10), ludic.hints (8); the 36 ui examples; value_list_regrow, json_saves and
alloc_fence_declared unchanged.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
From the fence's kept frames in 22 minutes of play:
- A component field that is a record or a list of records was `value_put(o, k, view_val_T(x))`,
a whole new tree every frame (HudPrompt's notifications). view_fill.ludic generates view_set_T /
view_set_list_T / view_fill_T that fill the object and list under the key in place.
- value_list_fit dropped the items it cut off and value_item made new ones as the list grew back,
a Value per item per regrowth (value_item / value_set_strs); the cut-off items are now the
list's spares (Val.spare), and an item of another kind is turned rather than replaced.
- ludic.ui: a scroll box's "scroll" and a slider's "change" fired a fresh Value.float a frame
(sc_walk, scroll.ludic:36); ui_fire_float takes one from a ring kept with the state (fired.ludic).
ui_object_fit_into is exported, for a draw that keeps its list.
- Json.read_file(path): read, parsed, and the file's text given back - Json.parse(Fs.read_text())
kept the whole file on every read (Maroon Lake's settings peeks).
Golden value_list_regrow: a list alternating 6 and 2 items every frame keeps nothing (the toolchain
before this fails it: +128 B new Val from value_item). Game compiles; ludic.i18n/settings/hints/
base tests pass (ludic.ui has none); arena and fence goldens unchanged.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- the scrollbar is .ui-scrollbar with a .ui-thumb, styled by the default sheet or a theme; a press
on the thumb holds it at the point it was taken and the pointer moves it in proportion, a press on
the track jumps the thumb's middle there and holds it, and neither presses what is under the bar
(it used to centre the thumb on the pointer and press the row beneath as well);
- while a popover is up only scroll boxes inside it take the pointer, and a press outside it that
closes it forgets any press in progress;
- a transition ends exactly on its value (it stopped a rounding error short, at every frame rate).
Tests: ui_popover_mouse, ui_scrollbar, ui_ease (60/120/180/240 Hz).
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- <input type="number" min max step>: typed digits replace its value (a minus when min allows one,
a point when step has a fraction), Enter or leaving the field commits them held between min and
max, the left and right arrows step it.
- <input type="key">: Enter or a click starts it listening and the next key is its value, Tab, the
arrows and Enter included; Esc stops it listening, Backspace clears it, `shown` names the value,
and ui_capturing() tells the host to leave its keys alone (through the frame that ended it).
- note="..." under any control's label (.ui-labels > .ui-label + .ui-note); a range's (or number's)
value with decimals, format="percent" and a unit.
- A popover with `anchor="id"` (the nearest element of that id) or a bare `anchor` (the element
before it) sits beside it by `placement` (right, left, bottom, top), its margin the gap, opens to
the other side where it would leave the screen, and is kept on it.
- A tooltip's title splits into lines at a newline or a written \n.
- text-shadow, inherited, drawn sharp under the text.
- ui_opacity(): the group opacity a native's draw is at.
- border-image is drawn as painted with no background colour, tinted by one, and not at all when
that colour is transparent (it drew a white nine-slice).
- A picture file is drawn untinted, as a browser draws one; an atlas cell (prefix:name) still takes
the color around it, and an <img> with its own color is tinted by it.
- The render3d backend loads a picture again when its file changes or appears (a failed load was
kept for ever), and at once after ui_image_reload(path); takes a path with a drive letter (C:/...)
as a path rather than an atlas; and slices a nine-slice by its texture's own width and height.
- ui_inputs.ludic and ui_look.ludic; LANGUAGE.md and the changeset say all of it.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- 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>
- `popover`: a top layer that keeps the pointer and the keyboard, closed by a press outside or Esc.
- `title` tooltips after half a second's rest, styled by .ui-tooltip.
- `<progress>` and `<meter>`.
- Atlases take rows and number cells, and importing ludic.ui/render3d.ludic is enough to draw with
render3d.
- The compiler reports two declarations of one name before it type-checks, so a package global
clashing with a program's reads as that, not as 29 type errors.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
A game no longer writes a host:
- The runtime reads Input itself: focus and keyboard navigation (Tab, arrows, Enter/Space,
autofocus), the pointer (hover, :active, click on release, drag), and scroll boxes with the
wheel, a draggable scrollbar, clipping and scroll-into-view.
- HTML's controls are built in (button, checkbox, radio, range, select, text, key capture), made
of plain parts a stylesheet styles, each reporting with on-change and event.value.
- ludic.ui/render3d.ludic draws with render3d's overlay: textures, named atlases (icon:NAME),
nine-slice border-image, rounded rects and rings, clipping, and a scale.
- Hooks for the program's language, sounds and clock (ui_translator, ui_sounds, ui_clock).
- ui_dev: hot reload, errors on screen, LUDIC_UI_DUMP.
- CSS:
- colours as #rgb / #rrggbbaa / rgb() / rgba() / names;
- border-radius and outline (following the radius), box-shadow, background-image and a tinted
border-image;
- group opacity, @keyframes / animation, transition;
- :focus, :focus-visible and :focus-within.
- HTML mixed content, and boolean attributes.
- render3d gains tex_width / tex_height, and the XML reader keeps text runs in order.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The compiler turns a component declaration into:
- a record of its props and state;
- a constructor, a props setter, a model and a call;
- a class, registered with ludic.ui at start.
Its template and styles are read from beside it and compiled in, with @import inlined, and a
missing template fails the build.
In the runtime:
- each mounted instance keeps its own props and state, and `set` in a template writes the state;
- styles are scoped to the component;
- class, style and id on a component's tag land on its root, styled by the parent's sheet too;
- ui_reload re-reads a component's files from disk and keeps instances.
The package's own module is now ludic_ui, so a program may call a directory of its own ui.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- Natives: ui_native(tag, measure, draw) makes an element the program draws itself; ui_fire
runs its on-<event> with event.value. input, select and textarea have simple defaults.
- React:
- keyed <each>, <let>, <provide> context through components, <fragment>;
- named slots, default props on <component>;
- on-mount / on-unmount;
- inline text inside text elements.
- CSS:
- custom properties and var();
- position relative/absolute/fixed with insets and z-index;
- em/rem/vw/vh and @media;
- wrapping text and ellipsis, overflow;
- + and ~ combinators, :nth-child(an+b), :checked, :active.
- Developing: errors with file:line, ui_errors(), ui_reload() keeping state, and an
inspector-style ui_dump.
- view fields infer the type of a literal or a named function's result.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
A `view Name { field = x; function q(..); on e(..) }` declaration is the one bridge between a
program and its UI: it writes view_<name>() -> UiView, whose model is a Value of every field and
whose call runs a query or an event by name.
ludic.ui is a template runtime:
- HTML-shaped XML screens and components, loaded at run time;
- {expression} bindings, if/else/each, props, slots, per-instance state;
- on-press / onclick actions (event, set, emit);
- component libraries (export="true", <import src as>).
Styling:
- stylesheets in <style> or importable .lss files (@import);
- CSS selectors (#id, .class, [attr=v], descendant and > combinators, :hover, :disabled,
:first-child, :last-child, :nth-child, :not) weighed by specificity;
- the box model and flex under CSS's property names.
Also:
- default parameters, and positional-then-named calls;
- Value gains a float kind;
- a function shadowing a runtime one is refused;
- an index is evaluated before the slice is read;
- runtime errors name the right file.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
