nandi/frq · nim_renderer.dart

nandi/frqpublic⑂ Fork 0
⑂ abb8e366325685adc993796ccc13a0ac72d009dd
nim_renderer.dart · 730 lines · 27.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 data model, in Nim   63  @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   67    // callback into Dart. At ~70µs a render a 100ms timer costs nothing.
The data model, in Nim   68    _poll = Timer.periodic(const Duration(milliseconds: 100), (_) {
Quality pass: reuse, dead weight, and two real costs   69      // 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   75
void _send(String id, [String value = '']) {
The renderer, and a transport bug that took four tries   79    if (id.isEmpty) return;
Quality pass: reuse, dead weight, and two real costs   80    setState(() => _frame = core.dispatchFrame(id, value));
The data model, in Nim   81    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   93    for (final r in _linkTaps.values) {
    r.dispose();
Both ends of a scroll, on the same controller   96    for (final c in _scrollers.values) {
    c.dispose();
The data model, in Nim   99    super.dispose();
@override
Widget build(BuildContext context) => MaterialApp(
      title: 'frq',
The renderer, and a transport bug that took four tries   105        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   117
Text can be selected   118        // 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   131
The renderer, and a transport bug that took four tries   133  // ---------------------------------------------------------------- helpers
TextStyle _style(double size, Color color) =>
    TextStyle(fontSize: size, color: color, height: 1.35);
The pencil was drawn by a text font   138  /// 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   162  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   202  /// 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   211  /// 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   220  static const _noAxis = '';
static const _row = 'row';
static const _column = 'column';
Widget _build(core.UiNode n, [String axis = _noAxis]) {
The renderer, and a transport bug that took four tries   225    final spacing = _d(n.props['spacing'], 0);
Expanded only where a Flex can hold it   226    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   231      // 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   235      'hbox' => n.prop('wrap', true) ? _noAxis : _row,
    _ => _noAxis,
Quality pass: reuse, dead weight, and two real costs   238    // 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   249
  switch (n.tag) {
    case 'page':
The renderer, and a transport bug that took four tries   252        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   263
    case 'vbox':
The renderer, and a transport bug that took four tries   268
        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   277          return expanded(col);
The renderer, and a transport bug that took four tries   278
The data model, in Nim   279
Quality pass: reuse, dead weight, and two real costs   280      // 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   281      // 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   283      // 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   285        return Text.rich(
        TextSpan(children: n.children.map(_span).toList()),
        softWrap: true,
The data model, in Nim   290      case 'hbox':
The renderer, and a transport bug that took four tries   291
        // 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   299            // 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   304            final row = Row(
Quality pass: reuse, dead weight, and two real costs   305              crossAxisAlignment: fills
Lay every screen out in a test, and fix what that found   306                  ? CrossAxisAlignment.stretch
                : (align == 'end'
                    ? CrossAxisAlignment.end
                    : CrossAxisAlignment.center),
            children: _spaced(kids, spacing, vertical: false),
The renderer, and a transport bug that took four tries   311
Quality pass: reuse, dead weight, and two real costs   312            return expanded(_margins(n, row));
The renderer, and a transport bug that took four tries   313
        return _margins(
          Wrap(
            spacing: spacing,
            runSpacing: spacing,
            crossAxisAlignment: align == 'end'
                ? WrapCrossAlignment.end
                : WrapCrossAlignment.center,
            children: kids,
The data model, in Nim   323
The renderer, and a transport bug that took four tries   324
The data model, in Nim   326
The renderer, and a transport bug that took four tries   327      // Container::Card in the Clojure: padding 12, fills its width.
The data model, in Nim   328      case 'card':
The renderer, and a transport bug that took four tries   329        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   336
The renderer, and a transport bug that took four tries   337          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: _spaced(kids, spacing > 0 ? spacing : t.spaceXxs,
                vertical: true)),
The data model, in Nim   341
    case 'title':
      return Text(n.prop('label', ''),
The renderer, and a transport bug that took four tries   345            style: _style(t.textTitle3, t.onBg)
              .copyWith(fontWeight: FontWeight.bold));
The data model, in Nim   347
    case 'title-2':
      return Padding(
The renderer, and a transport bug that took four tries   350          padding: const EdgeInsets.only(top: t.spaceXxs, bottom: t.spaceXxxs),
The data model, in Nim   351          child: Text(n.prop('label', ''),
The renderer, and a transport bug that took four tries   352              style: _style(t.textTitle4, t.onBg)
                .copyWith(fontWeight: FontWeight.w600)),
The data model, in Nim   354
    case 'label':
The renderer, and a transport bug that took four tries   357        return Text(n.prop('label', ''), style: _style(t.textBody, t.onBg));
The data model, in Nim   358
    case 'dim-label':
The renderer, and a transport bug that took four tries   360        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   387
    case 'spinner':
The renderer, and a transport bug that took four tries   389        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   421
    case 'button':
The renderer, and a transport bug that took four tries   423
        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   431          // 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   441          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   452
    case 'checkbutton':
The renderer, and a transport bug that took four tries   454
        // 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   467                // 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   474
    case 'emoji':
      return _wrapTap(
        n.prop('onClick', ''),
        Text(n.prop('glyph', n.prop('emoji', '')),
The pencil was drawn by a text font   483              style: _emojiStyle(_d(n.props['size'], 16))),
The renderer, and a transport bug that took four tries   484
    /// 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.
491
    /// 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   513                  Text(n.prop('emoji', ''), style: _emojiStyle(size)),
The renderer, and a transport bug that took four tries   514                  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   538            onBackgroundImageError: provider == null ? null : (_, _) {},
The renderer, and a transport bug that took four tries   539            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   569            errorBuilder: (_, _, _) => const SizedBox.shrink(),
The renderer, and a transport bug that took four tries   570
        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   582
    case 'entry':
The renderer, and a transport bug that took four tries   584
        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   616          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   624              : SizedBox(width: _unsizedEntry, child: field);
The renderer, and a transport bug that took four tries   625
    case 'scroll':
Both ends of a scroll, on the same controller   629          // Both ends of the same scroll, named so they are the same one.
        final c = _scrollers.putIfAbsent(
            n.prop('scrollKey', 'scroll'), ScrollController.new);
The renderer, and a transport bug that took four tries   632          Widget body = SingleChildScrollView(
Both ends of a scroll, on the same controller   633            controller: c,
The renderer, and a transport bug that took four tries   634            // The backlog reads from the bottom; a settings list from the top.
          reverse: n.prop('stickToBottom', false),
          child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: _spaced(kids, spacing, vertical: true)),
The data model, in Nim   639
Both ends of a scroll, on the same controller   640          body = Scrollbar(controller: c, child: body);
Quality pass: reuse, dead weight, and two real costs   641          // 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   648
The renderer, and a transport bug that took four tries   649
    /// 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   670
    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   676        // is what makes the boundary pleasant to work across.
The data model, in Nim   677        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   685  /// 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   715  /// `margin` and its four sides — the props the
The renderer, and a transport bug that took four tries   716  /// 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   729