nandi/frq · nim_renderer.dart

nandi/frqpublic⑂ Fork 0
⑂ 4925e54c9cbf2c2fa55214ac147d458c00384a20
nim_renderer.dart · 795 lines · 30.9 KBDart    Blame HistoryRaw
The data model, in Nim   1/// The renderer: a Nim widget tree, walked into Flutter widgets.
The renderer, and a transport bug that took four tries   3/// This knows the tag vocabulary and nothing else — no screens, no state, no
4/// idea what "connect" means. Nim decides what the screen is; this decides
5/// what a `vbox` looks like.
The data model, in Nim   6
The renderer, and a transport bug that took four tries   7/// The measure of whether the split is honest is how boring this file is. If a
8/// feature ever needs a change here AND in Nim, the boundary is in the wrong
9/// place. The treatments are `flutter/src/frq/hiccup.cljd`'s, so a tree from
10/// Nim paints the way the same tree painted under ClojureDart.
The data model, in Nim   13import 'dart:async';
The renderer, and a transport bug that took four tries   14import 'dart:io';
The data model, in Nim   15
Lay every screen out in a test, and fix what that found   16import 'package:flutter/gestures.dart';
The data model, in Nim   18import 'package:flutter/material.dart';
19import 'package:frq_core/frq_core.dart' as core;
The renderer, and a transport bug that took four tries   21import 'nim_theme.dart' as t;
The data model, in Nim   23class NimApp extends StatefulWidget {
const NimApp({super.key});
@override
State<NimApp> createState() => _NimAppState();
29class _NimAppState extends State<NimApp> {
Quality pass: reuse, dead weight, and two real costs   30  late core.UiFrame _frame = core.renderFrame();
core.UiNode get _tree => _frame.tree;
The data model, in Nim   32  Timer? _poll;
The renderer, and a transport bug that took four tries   34  // One controller and one focus node per keyed entry, kept across rebuilds.
// This is why `:key` is on every entry in both the Clojure and the Nim: a
// controller identified by position instead of name meant the host field and
// the port field shared one and both showed the port. The focus node is the
// same bug one layer up — the field is rebuilt from a fresh tree on every
// keystroke, so without a node held per key the caret goes nowhere after the
// first line.
final _controllers = <String, TextEditingController>{};
final _focus = <String, FocusNode>{};
Lay every screen out in a test, and fix what that found   45  // One tap recogniser per link URL, kept across rebuilds and disposed with
// the state. A recogniser made during build and dropped on the next frame
// leaks, and this tree is rebuilt on every keystroke.
final _linkTaps = <String, TapGestureRecognizer>{};
Both ends of a scroll, on the same controller   50  // One ScrollController per `scrollKey`, for the same reason the entries
// have one per key — and for a second reason of its own. A `Scrollbar` with
// no controller of its own asks the PrimaryScrollController, and a
// SingleChildScrollView is only primary on mobile: on a desktop the two
// ends looked at different controllers, so the first wheel event over any
// scroll threw "The Scrollbar's ScrollController has no ScrollPosition
// attached" and went on throwing it. Naming the controller joins them.
// Two positions must never share one, which is what makes `scrollKey` a
// requirement rather than a nicety — the chat screen's is per room, since
// switching rooms is a different backlog at a different offset.
final _scrollers = <String, ScrollController>{};
The arrow goes to the message   63  // Where a "go to that message" is pointing, for the one frame it is
// pointing there. The core marks the row with `scrollHere`, this finds it
// after the frame is laid out — `ensureVisible` needs a built element, so
// it cannot happen during the build that asks for it — and then tells the
// core it has arrived, which takes the mark off. Leaving it on would pin
// the view to that row and take scrolling away from the reader.
final _jumpKey = GlobalKey();
// The last `scrollToBottom` tick acted on, per scroll. The core counts up
// when "Jump to present" is pressed; an unchanged count is a frame where
// nobody asked to be moved.
final _bottomTicks = <String, int>{};
The data model, in Nim   76  @override
void initState() {
  super.initState();
  // Polling, because the socket lives on a Nim thread and there is no
The renderer, and a transport bug that took four tries   80    // callback into Dart. At ~70µs a render a 100ms timer costs nothing.
The data model, in Nim   81    _poll = Timer.periodic(const Duration(milliseconds: 100), (_) {
Quality pass: reuse, dead weight, and two real costs   82      // Compared as the JSON Nim already produced, and decoded only when it
    // differs. Stringifying both trees to answer "did anything change" was
    // ~1MB of string churn per poll in a busy room, ten times a second, for
    // an answer that is almost always no.
    final next = core.pollIfChanged(_frame.json);
    if (next != null) setState(() => _frame = next);
The data model, in Nim   88
void _send(String id, [String value = '']) {
The renderer, and a transport bug that took four tries   92    if (id.isEmpty) return;
Quality pass: reuse, dead weight, and two real costs   93    setState(() => _frame = core.dispatchFrame(id, value));
The data model, in Nim   94    if (id == 'send') _focus['draft']?.requestFocus();
@override
void dispose() {
  _poll?.cancel();
  for (final c in _controllers.values) {
    c.dispose();
  for (final f in _focus.values) {
    f.dispose();
Lay every screen out in a test, and fix what that found   106    for (final r in _linkTaps.values) {
    r.dispose();
Both ends of a scroll, on the same controller   109    for (final c in _scrollers.values) {
    c.dispose();
The data model, in Nim   112    super.dispose();
@override
Widget build(BuildContext context) => MaterialApp(
      title: 'frq',
The renderer, and a transport bug that took four tries   118        debugShowCheckedModeBanner: false,
      theme: ThemeData(
        useMaterial3: true,
        brightness: Brightness.dark,
        scaffoldBackgroundColor: t.bg,
        colorScheme: const ColorScheme.dark(
          primary: t.accent,
          onPrimary: t.onAccent,
          surface: t.bg,
          onSurface: t.onBg,
          error: t.destructive,
The data model, in Nim   130
Text can be selected   131        // Everything inside one SelectionArea, so a message can be selected
      // and copied — and so can a nick, a timestamp, or a line of an error.
      // Per-widget `SelectableText` was the alternative and is worse: it
      // selects within one widget only, so a two-line answer and the name
      // above it cannot be dragged across, which is most of what anyone
      // wants to copy out of a chat.
      // Taps still arrive: a selection starts on a drag, and the buttons,
      // faces and reaction pills under here keep their gestures.
      home: Scaffold(
        backgroundColor: t.bg,
        body: SafeArea(child: SelectionArea(child: _build(_tree))),
The data model, in Nim   144
The renderer, and a transport bug that took four tries   146  // ---------------------------------------------------------------- helpers
TextStyle _style(double size, Color color) =>
    TextStyle(fontSize: size, color: color, height: 1.35);
The pencil was drawn by a text font   151  /// The style for a widget whose whole content is an emoji glyph.
/// Naming the colour emoji font is not belt and braces: a glyph like ✏️ is
/// U+270F plus U+FE0F, and the variation selector is a *request* for emoji
/// presentation, not a guarantee. DejaVu Sans claims U+270F, so ordinary
/// fallback stops there and draws the monochrome pencil the text era had —
/// while 🙂, which no text font covers, falls all the way through to the
/// emoji font and looks right. That is why only some of the chips were
/// wrong.
/// A family list rather than one name, because the font that has them
/// differs by platform, and a name nothing matches costs nothing.
static const List<String> _emojiFonts = <String>[
  'Noto Color Emoji',      // Linux, Android
  'Apple Color Emoji',     // macOS, iOS
  'Segoe UI Emoji',        // Windows
TextStyle _emojiStyle(double size) => TextStyle(
      fontSize: size,
      fontFamily: _emojiFonts.first,
      fontFamilyFallback: _emojiFonts,
The renderer, and a transport bug that took four tries   175  double _d(dynamic v, double fallback) =>
    v is num ? v.toDouble() : fallback;
/// Gaps between children, as real widgets rather than a `spacing:` — the
/// same layout on every Flutter version this might be built against.
List<Widget> _spaced(List<Widget> kids, double gap, {required bool vertical}) {
  if (gap <= 0 || kids.length < 2) return kids;
  final out = <Widget>[];
  for (var i = 0; i < kids.length; i++) {
    if (i > 0) {
      out.add(vertical ? SizedBox(height: gap) : SizedBox(width: gap));
    out.add(kids[i]);
  return out;
/// A source that may be a bundled asset, a file on disk, or a URL — the
/// three the screens hand over, named apart by an `asset:` prefix so they
/// stay one property.
ImageProvider? _imageProvider(String src) {
  if (src.isEmpty) return null;
  if (src.startsWith('asset:')) return AssetImage(src.substring(6));
  if (src.startsWith('http://') || src.startsWith('https://')) {
    return NetworkImage(src);
  return FileImage(File(src));
Widget _wrapTap(String onClick, Widget child, {BorderRadius? radius}) {
  if (onClick.isEmpty) return child;
  return InkWell(
    onTap: () => _send(onClick),
    borderRadius: radius,
    child: child,
// ------------------------------------------------------------------ build
Expanded only where a Flex can hold it   215  /// The axis of the widget a node is being built *into*, because `Expanded`
/// is only legal inside a Flex and there is no way to ask Flutter after the
/// fact.
/// Getting this wrong is what "Cannot hit test a render box that has never
/// been laid out" means, in a pile: an `Expanded` inside a `Wrap` fails the
/// layout, and every box under it is then asked to hit-test without ever
/// having been laid out. The chats screen did exactly that — two unsized
/// entries in an `hbox`, which is a Wrap.
Quality pass: reuse, dead weight, and two real costs   224  /// What an unsized entry or a stranded scroll falls back to.
/// Both are only reachable when the tree has put one outside a Flex, which
/// is a tree bug rather than a rendering choice. The numbers exist so that
/// bug renders as something a person can see and a test can catch, not so
/// that it renders correctly.
static const _unsizedEntry = 320.0;
static const _strandedScroll = 400.0;
Expanded only where a Flex can hold it   233  static const _noAxis = '';
static const _row = 'row';
static const _column = 'column';
Widget _build(core.UiNode n, [String axis = _noAxis]) {
A row is named for its message, not its place   238    // A node that names itself keeps its element across rebuilds.
  // The tree is rebuilt wholesale from the core, so Flutter matches
  // children by position unless something says otherwise — and a position
  // is not an identity when a line can arrive above. Everything Flutter
  // holds per element is at stake: text controllers, scroll offsets, and
  // the selectables a live text selection is made of.
  final key = n.prop('key', '');
The arrow goes to the message   246    var w = _buildNode(n, axis);
  // The row a reply's arrow is aiming at. Two keys on one widget is not a
  // thing, so they nest: the ValueKey keeps the element across rebuilds,
  // and the GlobalKey is how this frame finds it afterwards.
  if (n.prop('scrollHere', false)) {
    w = KeyedSubtree(key: _jumpKey, child: w);
    WidgetsBinding.instance.addPostFrameCallback((_) {
      final ctx = _jumpKey.currentContext;
      if (ctx == null || !mounted) return;
      Scrollable.ensureVisible(
        ctx,
        duration: const Duration(milliseconds: 250),
        curve: Curves.easeOut,
        // A little down from the top, so the message that was replied to
        // is read with what came after it rather than alone against the
        // ceiling.
        alignment: 0.2,
      _send('jump.done');
266
A row is named for its message, not its place   268    return key.isEmpty ? w : KeyedSubtree(key: ValueKey(key), child: w);
Widget _buildNode(core.UiNode n, String axis) {
The renderer, and a transport bug that took four tries   272    final spacing = _d(n.props['spacing'], 0);
Expanded only where a Flex can hold it   273    final flex = axis == _row || axis == _column;
  // What this node's own children are being built into.
  final childAxis = switch (n.tag) {
    'page' || 'vbox' || 'card' || 'scroll' || 'dialog' => _column,
Quality pass: reuse, dead weight, and two real costs   278      // Wrapping unless the row says otherwise. Flipping this default was
    // tried and reverted: only 4 of 15 `hbox` call sites state `wrap` at
    // all, so the other 11 became Rows and overflowed — the tree's habit is
    // to wrap, and the default has to match it.
Expanded only where a Flex can hold it   282      'hbox' => n.prop('wrap', true) ? _noAxis : _row,
    _ => _noAxis,
Quality pass: reuse, dead weight, and two real costs   285    // A paragraph's children are spans, not widgets — building them as
  // widgets and throwing them away is what the `inline` special case did.
  final kids = n.tag == 'paragraph'
      ? const <Widget>[]
      : n.children.map((c) => _build(c, childAxis)).toList();
  // One rule for "take the remaining main-axis extent", stated by the node
  // that expands. It used to be three: a vbox prop, a scroll with no
  // height, and a row peering at its children's props to infer it.
  Widget expanded(Widget w) =>
      (n.prop('expand', false) && flex) ? Expanded(child: w) : w;
The data model, in Nim   296
  switch (n.tag) {
    case 'page':
The renderer, and a transport bug that took four tries   299        return SingleChildScrollView(
        child: Center(
          child: ConstrainedBox(
            constraints:
                BoxConstraints(maxWidth: _d(n.props['maxWidth'], 520)),
            child: Padding(
              padding: const EdgeInsets.all(t.spaceM),
              child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: _spaced(kids, spacing, vertical: true)),
The data model, in Nim   310
    case 'vbox':
The renderer, and a transport bug that took four tries   315
        Widget col = Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: _spaced(kids, spacing, vertical: true),
        col = _margins(n, col);
        final w = _d(n.props['widthRequest'], 0);
        if (w > 0) col = SizedBox(width: w, child: col);
Quality pass: reuse, dead weight, and two real costs   324          return expanded(col);
The renderer, and a transport bug that took four tries   325
The data model, in Nim   326
Quality pass: reuse, dead weight, and two real costs   327      // Prose with links in it. NOT a Wrap: children of a Wrap are given
Lay every screen out in a test, and fix what that found   328      // unbounded width, so a long URL or a long word can never wrap — it
    // overflows, the layout fails, and every box under it is then hit-tested
Quality pass: reuse, dead weight, and two real costs   330      // having never been laid out. Spans in one RichText wrap properly.
    case 'paragraph':
Lay every screen out in a test, and fix what that found   332        return Text.rich(
        TextSpan(children: n.children.map(_span).toList()),
        softWrap: true,
The data model, in Nim   337      case 'hbox':
The renderer, and a transport bug that took four tries   338
        // Wrap and not Row: `:hbox` in the screens means "these go together
        // across", not "these fit". The head row of the chat screen asks for
        // more than 360 points has, and a Row answers that with an overflow
        // rather than a second line.
        final wrapping = n.prop('wrap', true);
        final align = n.prop('align', 'center');
        if (!wrapping) {
Quality pass: reuse, dead weight, and two real costs   346            // An expanding row stretches on its cross axis, which is where a
          // child's height comes from — Expanded in a Row is about width.
          // Stretch needs a bounded height, and `expanded()` below is what
          // gives the row one; without it the stretch resolves to infinity.
          final fills = n.prop('expand', false);
Lay every screen out in a test, and fix what that found   351            final row = Row(
Quality pass: reuse, dead weight, and two real costs   352              crossAxisAlignment: fills
Lay every screen out in a test, and fix what that found   353                  ? CrossAxisAlignment.stretch
                : (align == 'end'
                    ? CrossAxisAlignment.end
                    : CrossAxisAlignment.center),
            children: _spaced(kids, spacing, vertical: false),
The renderer, and a transport bug that took four tries   358
Quality pass: reuse, dead weight, and two real costs   359            return expanded(_margins(n, row));
The renderer, and a transport bug that took four tries   360
        return _margins(
          Wrap(
            spacing: spacing,
            runSpacing: spacing,
            crossAxisAlignment: align == 'end'
                ? WrapCrossAlignment.end
                : WrapCrossAlignment.center,
            children: kids,
The data model, in Nim   370
The renderer, and a transport bug that took four tries   371
The data model, in Nim   373
The renderer, and a transport bug that took four tries   374      // Container::Card in the Clojure: padding 12, fills its width.
The data model, in Nim   375      case 'card':
The renderer, and a transport bug that took four tries   376        return Container(
        width: double.infinity,
        margin: const EdgeInsets.symmetric(vertical: t.spaceXxxs),
        padding: const EdgeInsets.all(t.spaceXs),
        decoration: BoxDecoration(
          color: t.card,
          borderRadius: BorderRadius.circular(t.radiusS),
The data model, in Nim   383
The renderer, and a transport bug that took four tries   384          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: _spaced(kids, spacing > 0 ? spacing : t.spaceXxs,
                vertical: true)),
The data model, in Nim   388
    case 'title':
      return Text(n.prop('label', ''),
The renderer, and a transport bug that took four tries   392            style: _style(t.textTitle3, t.onBg)
              .copyWith(fontWeight: FontWeight.bold));
The data model, in Nim   394
    case 'title-2':
      return Padding(
The renderer, and a transport bug that took four tries   397          padding: const EdgeInsets.only(top: t.spaceXxs, bottom: t.spaceXxxs),
The data model, in Nim   398          child: Text(n.prop('label', ''),
The renderer, and a transport bug that took four tries   399              style: _style(t.textTitle4, t.onBg)
                .copyWith(fontWeight: FontWeight.w600)),
The data model, in Nim   401
    case 'label':
The renderer, and a transport bug that took four tries   404        return Text(n.prop('label', ''), style: _style(t.textBody, t.onBg));
The data model, in Nim   405
    case 'dim-label':
The renderer, and a transport bug that took four tries   407        return Text(n.prop('label', ''), style: _style(t.textCaption, t.dim));
    /// Prose, as opposed to a label: this is what a message is, and it
    /// wraps. Kept apart from `label` because a wrapping label in a row
    /// lays out against the row's width rather than the column's.
    case 'text':
      return Text(n.prop('text', ''), style: _style(t.textBody, t.onBg));
    case 'link':
      return _wrapTap(
        n.prop('onClick', ''),
        Text(
          n.prop('label', ''),
          style: _style(t.textBody, t.accent)
              .copyWith(decoration: TextDecoration.underline,
                        decorationColor: t.accent),
    case 'separator':
      return const Divider(height: 1, thickness: 1, color: t.divider);
    case 'spacer':
        final s = _d(n.props['size'], t.spaceXxs);
        return SizedBox(width: s, height: s);
The data model, in Nim   434
    case 'spinner':
The renderer, and a transport bug that took four tries   436        return Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          const SizedBox(
              width: 16,
              height: 16,
              child: CircularProgressIndicator(
                  strokeWidth: 2, color: t.accent)),
          if (n.prop('label', '').isNotEmpty) ...[
            const SizedBox(width: t.spaceXxs),
            Text(n.prop('label', ''), style: _style(t.textCaption, t.dim)),
    /// A dot that says whether the thing is live, and the words beside it.
    case 'status':
      return Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            width: 8,
            height: 8,
            decoration: BoxDecoration(
              color: n.prop('live', false) ? t.success : t.dim,
              borderRadius: BorderRadius.circular(t.radiusXs),
          const SizedBox(width: 6),
          Text(n.prop('label', ''), style: _style(t.textCaption, t.dim)),
The data model, in Nim   468
    case 'button':
The renderer, and a transport bug that took four tries   470
        final onClick = n.prop('onClick', '');
        final kind = n.prop('kind', 'default');
        final label = Text(n.prop('label', ''));
        if (kind == 'primary') {
          return FilledButton(
              onPressed: () => _send(onClick), child: label);
A face that opens someone   478          // A sender's name: a way in to who someone is, but it sits in the
        // middle of a line and must not look like a control. Text that
        // takes a press, with no chrome at all.
        if (kind == 'plain') {
          return InkWell(
            onTap: () => _send(onClick),
            child: Text(n.prop('label', ''),
                style: _style(t.textBody, t.onBg)),
The renderer, and a transport bug that took four tries   488          if (kind == 'destructive') {
          return FilledButton(
            style: FilledButton.styleFrom(
                backgroundColor: t.destructive,
                foregroundColor: t.onDestructive),
            onPressed: () => _send(onClick),
            child: label,
        return OutlinedButton(onPressed: () => _send(onClick), child: label);
The data model, in Nim   499
    case 'checkbutton':
The renderer, and a transport bug that took four tries   501
        // The label is part of the target. 20 logical pixels is a fine tick
        // on a desktop pointer and a miss on a thumb, so the whole row taps.
        final onToggled = n.prop('onToggled', '');
        return InkWell(
          onTap: () => _send(onToggled),
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Checkbox(
                value: n.prop('active', false),
                onChanged: (_) => _send(onToggled),
Lay every screen out in a test, and fix what that found   514                // Flexible, because the label is prose and the row is as wide
              // as the window: "Hide join/part messages" beside a checkbox
              // overflows a phone otherwise.
              Flexible(
                child: Text(n.prop('label', ''),
                    style: _style(t.textBody, t.onBg)),
The renderer, and a transport bug that took four tries   521
    case 'emoji':
      return _wrapTap(
        n.prop('onClick', ''),
        Text(n.prop('glyph', n.prop('emoji', '')),
The pencil was drawn by a text font   530              style: _emojiStyle(_d(n.props['size'], 16))),
The renderer, and a transport bug that took four tries   531
    /// A reaction pill: the glyph, and the tally beside it where there is
    /// one to show. The same shape whether it is a reaction under a message,
    /// a swatch in the picker, or a chip on the sender's row — which is the
    /// point: what you press to react and what appears once you have should
    /// look like one family.
538
    /// A count of zero is no count. The picker passes 0 for every swatch,
    /// and a grid of little grey zeroes is noise where a reader is scanning
    /// for a face. `mine` is the accent, because the only thing a pill has
    /// to say at a glance is whether pressing it again takes yours off.
    case 'reaction':
        final size = _d(n.props['size'], 14);
        final count = n.prop('count', 0);
        final mine = n.prop('mine', false);
        final pad = (0.25 * size).clamp(2.0, 8.0);
        return _wrapTap(
          n.prop('onClick', ''),
          Container(
            padding: EdgeInsets.symmetric(horizontal: pad, vertical: pad / 2),
            decoration: BoxDecoration(
              color: mine ? t.accent : t.component,
              borderRadius: BorderRadius.circular(t.radiusS),
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
The pencil was drawn by a text font   560                  Text(n.prop('emoji', ''), style: _emojiStyle(size)),
The renderer, and a transport bug that took four tries   561                  if (count > 0) ...[
                  const SizedBox(width: 4),
                  Text('$count',
                      style: _style(t.textCaption,
                          mine ? t.onAccent : t.dim)),
    /// A face is a way in to who someone is, so it takes the press that
    /// opens their profile. A picture that will not load is a face that
    /// stays its initial and nothing else.
    case 'avatar':
        final size = _d(n.props['size'], 32);
        final provider = _imageProvider(n.prop('url', ''));
        final fallback = n.prop('fallback', '');
        final face = CircleAvatar(
          radius: size / 2,
          backgroundColor: t.component,
          backgroundImage: provider,
Quality pass: reuse, dead weight, and two real costs   585            onBackgroundImageError: provider == null ? null : (_, _) {},
The renderer, and a transport bug that took four tries   586            child: provider == null
              ? Text(
                  fallback.isNotEmpty
                      ? fallback.substring(0, 1).toUpperCase()
                  style: _style(t.textBody, t.onBg))
              : null,
        final onClick = n.prop('onClick', '');
        if (onClick.isEmpty) return face;
        return InkWell(
          onTap: () => _send(onClick),
          customBorder: const CircleBorder(),
          child: face,
    case 'image':
        final provider = _imageProvider(n.prop('src', ''));
        if (provider == null) return const SizedBox.shrink();
        final maxW = _d(n.props['maxWidth'], 0);
        final maxH = _d(n.props['maxHeight'], 0);
        Widget img = Image(
          image: provider,
          fit: BoxFit.contain,
          // A half-written cache file, or one deleted under us: the decoder
          // throws during the build, and an exception in a build is a red
          // screen for the whole conversation rather than a gap where one
          // picture was.
Quality pass: reuse, dead weight, and two real costs   616            errorBuilder: (_, _, _) => const SizedBox.shrink(),
The renderer, and a transport bug that took four tries   617
        if (maxW > 0 || maxH > 0) {
          img = ConstrainedBox(
            constraints: BoxConstraints(
              maxWidth: maxW > 0 ? maxW : double.infinity,
              maxHeight: maxH > 0 ? maxH : double.infinity,
            child: img,
        return _wrapTap(n.prop('onClick', ''), img);
The data model, in Nim   629
    case 'entry':
The renderer, and a transport bug that took four tries   631
        final key = n.prop('key', '');
        final value = n.prop('text', '');
        final c = _controllers.putIfAbsent(
            key, () => TextEditingController(text: value));
        // Only when it actually differs: assigning unconditionally moves the
        // caret to the end on every keystroke.
        if (c.text != value) {
          c.value = c.value.copyWith(
            text: value,
            selection: TextSelection.collapsed(offset: value.length),
        final field = TextField(
          controller: c,
          focusNode: _focus.putIfAbsent(key, FocusNode.new),
          style: _style(t.textBody, t.onBg),
          decoration: InputDecoration(
            hintText: n.prop('placeholder', ''),
            hintStyle: _style(t.textBody, t.dim),
            isDense: true,
            filled: true,
            fillColor: t.component,
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(t.radiusS),
              borderSide: BorderSide.none,
          onChanged: (v) => _send(n.prop('onChange', ''), v),
          onSubmitted: (_) => _send(n.prop('onSubmit', '')),
        final w = _d(n.props['widthRequest'], 0);
Expanded only where a Flex can hold it   663          if (w > 0) return SizedBox(width: w, child: field);
        // No width asked for: take the rest of the row where there is a row
        // to take it from, and otherwise a definite width. NOT Expanded
        // unconditionally — a TextField has no intrinsic width, so in a Wrap
        // it is both illegal and unmeasurable, and that combination is what
        // took the whole screen down rather than one field.
        return axis == _row
            ? Expanded(child: field)
Quality pass: reuse, dead weight, and two real costs   671              : SizedBox(width: _unsizedEntry, child: field);
The renderer, and a transport bug that took four tries   672
    case 'scroll':
Both ends of a scroll, on the same controller   676          // Both ends of the same scroll, named so they are the same one.
The arrow goes to the message   677          final scrollKey = n.prop('scrollKey', 'scroll');
        final c = _scrollers.putIfAbsent(scrollKey, ScrollController.new);
        final stick = n.prop('stickToBottom', false);
        // "Jump to present": a tick that goes up, rather than a flag that
        // would have to be cleared. A reverse scroll holds the present at
        // offset zero, which is why this is not maxScrollExtent.
        final tick = n.prop('scrollToBottom', 0);
        if (_bottomTicks[scrollKey] != tick) {
          _bottomTicks[scrollKey] = tick;
          WidgetsBinding.instance.addPostFrameCallback((_) {
            if (!c.hasClients) return;
            c.animateTo(
              stick ? c.position.minScrollExtent
                    : c.position.maxScrollExtent,
              duration: const Duration(milliseconds: 250),
              curve: Curves.easeOut,
The renderer, and a transport bug that took four tries   697          Widget body = SingleChildScrollView(
Both ends of a scroll, on the same controller   698            controller: c,
The renderer, and a transport bug that took four tries   699            // The backlog reads from the bottom; a settings list from the top.
The arrow goes to the message   700            reverse: stick,
The renderer, and a transport bug that took four tries   701            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: _spaced(kids, spacing, vertical: true)),
The data model, in Nim   704
Both ends of a scroll, on the same controller   705          body = Scrollbar(controller: c, child: body);
Quality pass: reuse, dead weight, and two real costs   706          // A scroll takes what the column has left. Outside a Flex there is
        // nothing to take, and the tree is malformed — `_strandedScroll` is
        // a visible size rather than a correct one, so the layout tests see
        // a screen instead of an exception.
        return flex
            ? Expanded(child: body)
            : const SizedBox(height: _strandedScroll);
The data model, in Nim   713
The renderer, and a transport bug that took four tries   714
    /// A panel over the screen rather than a screen of its own.
    case 'dialog':
      return Card(
        color: t.cardComponent,
        child: Padding(
          padding: const EdgeInsets.all(t.spaceS),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              if (n.prop('title', '').isNotEmpty)
                Padding(
                  padding: const EdgeInsets.only(bottom: t.spaceXxs),
                  child: Text(n.prop('title', ''),
                      style: _style(t.textTitle4, t.onCard)
                          .copyWith(fontWeight: FontWeight.w600)),
              ..._spaced(kids, spacing, vertical: true),
The data model, in Nim   735
    default:
      // An unknown tag paints as itself rather than crashing or vanishing.
      // Nim can add one and see it before this file has heard of it, which
The renderer, and a transport bug that took four tries   741        // is what makes the boundary pleasant to work across.
The data model, in Nim   742        return Container(
        padding: const EdgeInsets.all(4),
        color: Colors.orange.withValues(alpha: 0.3),
        child: Text('?${n.tag}'),
Lay every screen out in a test, and fix what that found   750  /// One node of an inline paragraph, as a span.
/// Only `text` and `link` appear here — they are the only things `runNodes`
/// emits — and anything else falls back to its plain text so an unexpected
/// tag degrades to something readable rather than vanishing.
InlineSpan _span(core.UiNode n) {
  switch (n.tag) {
    case 'link':
      final url = n.prop('url', n.prop('label', ''));
      final onClick = n.prop('onClick', '');
      return TextSpan(
        text: n.prop('label', ''),
        style: _style(t.textBody, t.accent)
            .copyWith(decoration: TextDecoration.underline,
                      decorationColor: t.accent),
        recognizer: onClick.isEmpty
            ? null
            : (_linkTaps[url] ??= TapGestureRecognizer()
              ..onTap = () => _send(onClick)),
    case 'text':
      return TextSpan(
          text: n.prop('text', ''), style: _style(t.textBody, t.onBg));
    default:
      return TextSpan(
          text: n.prop('label', n.prop('text', '')),
          style: _style(t.textBody, t.onBg));
Quality pass: reuse, dead weight, and two real costs   780  /// `margin` and its four sides — the props the
The renderer, and a transport bug that took four tries   781  /// screens use to buy air without a wrapper each time.
Widget _margins(core.UiNode n, Widget child) {
  final all = _d(n.props['margin'], 0);
  final top = _d(n.props['marginTop'], all);
  final bottom = _d(n.props['marginBottom'], all);
  final right = _d(n.props['marginRight'], all);
  final left = _d(n.props['marginLeft'], all);
  if (top == 0 && bottom == 0 && right == 0 && left == 0) return child;
  return Padding(
    padding: EdgeInsets.only(
        top: top, bottom: bottom, right: right, left: left),
    child: child,
The data model, in Nim   794