React-style layer hits a milestone: working app, lots of polish, new components

[oyvindberg]

So what's this

The React-ish layer in jatatui-react is now working well enough to drive a real app end-to-end — a multi-screen TUI config editor. Components, hooks, focus, event bubbling, portals, reconciliation: all behaving. We're not just shipping a prototype anymore — there's a real consumer driving real bug reports, and the layer is responding to them gracefully.

That's the good news. The honest caveat: this is still proof-of-concept code. The patterns that have proven out (Renderer as host-friendly engine, controlled selection, generic T everywhere, fiber-keyed hook reconciliation) are stable enough to merge. But the surface is small and expect more sweeping changes as the layer keeps shaking out real-world wrinkles. There's now a callout to that effect at the top of the React section in the readme.

What this looks like in code

A two-screen app with a router, a focusable button, an autofocused field, and a confirmation modal — covering most of the new layer at once:

import static jatatui.components.Components.*;
import static jatatui.react.Components.*;

import jatatui.components.router.RouterApi;
import jatatui.components.router.Screen;
import jatatui.react.Element;
import jatatui.react.ReactApp;
import java.util.Optional;

public final class Demo {
  public static void main(String[] args) throws java.io.IOException {
    ReactApp.run(router(Screen.of("home", home())));
  }

  static Element home() {
    return component(ctx -> {
      var router = RouterApi.useRouter(ctx);
      return screenFrame("quit", () -> System.exit(0),
          column(
              length(1, text(" Welcome ")),
              length(3, button("Add source", "add", true,
                  () -> router.push("add-source", addSource()))),
              fill(1, empty())));
    });
  }

  static Element addSource() {
    return component(ctx -> {
      var name           = ctx.useState(() -> "");
      var confirmCancel  = ctx.useState(() -> false);
      var router         = RouterApi.useRouter(ctx);

      return screenFrame("back", () -> confirmCancel.set(true),
          column(
              length(1, text(" Add source ")),
              length(3, titledTextInput("Name", name.get(), name::set, "my-db", "name")),
              fill(1, empty()),
              length(3, button("Save", "save", true, () -> {
                  // ... persist name.get() ...
                  router.pop();
              })),

              confirmDialog(
                  confirmCancel.get(),
                  " Discard? ",
                  "Throw away unsaved changes?",
                  "Discard", "Keep editing", true,
                  () -> { confirmCancel.set(false); router.pop(); },
                  () -> confirmCancel.set(false))));
    });
  }
}

Reads roughly like a React/Ink app. ctx.useState, focusable button(...), titledTextInput(...) with controlled value + onChange, confirmDialog(...) driven by a state flag. The router is a Context-provided service descendants pull via RouterApi.useRouter(ctx). Tab cycles focus across the focusables; Enter activates buttons; Esc on the back chip pops the stack.

What changed

jatatui-react core

• Reconciliation — drop hook state when the component type at a fiber slot changes. Fixes the canonical router-state-bleed bug where useState would return a previous screen's value when the router swapped a different screen into the same fiber slot. Uses lambda class identity so it works even for inline component(c -> ...) functions.
• Eager autoFocus + post-commit rerender — FocusManager.register claims focus same-frame when nothing else holds it; Renderer.render requests a rerender if commit() chose a new winner. No more two-frame flicker on first render or after blur.
• Imperative focus — ctx.focus(id) / ctx.blur(). TextInputComponent registers click-to-focus by default.
• useTimeout(delayMs, callback, deps...) — fires once on the render thread; single shared daemon scheduler; auto-cleanup on unmount; deps follow useEffect convention.
• EventRegistry: globalKeys phase honors Predicate matchers (was identity-equals, silently dropping ANY_KEY).

jatatui-components revisions

• Router clears focus on every stack transition — new screen's autoFocus claims same-frame.
• Dropdown got the full treatment: clickable rows, working keys (handlers moved to the dropdown's own fiber so they sit in the focused bubble chain), auto-close on focus loss, opaque overlay (Clear under the list), Tab-while-open commits the current highlight, now generic over option type with a labelFn (was stringly-typed; matches Picker/SelectableList/ListProps/TableProps).
• Modal: replaced (int width, int height) with Size, matching Picker. Backwards-compat helper preserves the old signature.

New components in jatatui-components

• picker.Picker — Quick-Pick / Go-To-Symbol search modal. Host-supplied Filter<T> and RowRenderer<T>. Forcibly claims focus on mount so keystrokes don't leak to host handlers.
• selectablelist.SelectableList — Heterogeneous-row list. Predicate<T> isActivatable lets headers / dividers / decorative rows coexist with selectable rows; Up/Down skips non-activatable, click activates only activatable. Auto-scroll gated on selection change so wheel scrolls aren't reverted. Default double-click to activate (legacy single-click-activate via withActivateOnDoubleClick(false)). Vertical scrollbar in the rightmost column on overflow.
• button.Button — Bordered, Tab-focusable, Enter + click activate, primary/secondary variants.
• chrome.BackButton + chrome.ScreenFrame — Standard "← label" chip + the top-of-screen layout that uses it. Blurs focus on back so the destination's autoFocus claims same-frame.
• modal.ConfirmDialog — Yes/No modal with danger variant, built on Modal.
• link.Link — Focusable + clickable + Enter-activatable. Router-agnostic via Runnable onActivate.
• search.FuzzyMatch — IntelliJ-style fuzzy scoring with word-boundary bonus. Algorithm only, plugs into PickerProps.Filter. Includes Indexed<A> for precomputed corpora and rank() for filter+sort.
• scrollable.Scrollable — Wheel-scrollable column with proper max-offset clamping against the assigned area height.

Test plan

• bleep test jatatui-tests — 2044 tests green
• bleep publish local-ivy — 0.30.0+15-e582d175 consumed by the downstream app without errors
• All public-API renames have source-compat helpers (Modal.withSize(int, int), DropdownProps.ofStrings)
• Readme PoC warning callout added on the React section

🤖 Generated with Claude Code