nandi/frq · nim_renderer.dart

nandi/frqpublic⑂ Fork 0
⑂ 23846db48565a450ee8a6a689892db23663ad48e
nim_renderer.dart · 862 lines · 33.8 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';
Lay every screen out in a test, and fix what that found   15import 'package:flutter/gestures.dart';
The data model, in Nim   17import 'package:flutter/material.dart';
18import 'package:frq_core/frq_core.dart' as core;
A web version, from the same core   19import 'src/host.dart' as host;
The data model, in Nim   20
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>{};
Jump to present, which was never on screen   76  // Whether each scroll is at the present, as last reported to the core.
// Only the changes are sent: a notification arrives per pixel of a drag,
// and the core has one question, not a thousand.
final _atPresent = <String, bool>{};
The data model, in Nim   81  @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   85    // callback into Dart. At ~70µs a render a 100ms timer costs nothing.
The data model, in Nim   86    _poll = Timer.periodic(const Duration(milliseconds: 100), (_) {
Quality pass: reuse, dead weight, and two real costs   87      // 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   93
void _send(String id, [String value = '']) {
The renderer, and a transport bug that took four tries   97    if (id.isEmpty) return;
Quality pass: reuse, dead weight, and two real costs   98    setState(() => _frame = core.dispatchFrame(id, value));
The data model, in Nim   99    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   111    for (final r in _linkTaps.values) {
    r.dispose();
Both ends of a scroll, on the same controller   114    for (final c in _scrollers.values) {
    c.dispose();
The data model, in Nim   117    super.dispose();
@override
Widget build(BuildContext context) => MaterialApp(
      title: 'frq',
The renderer, and a transport bug that took four tries   123        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   135
Text can be selected   136        // 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   149
The renderer, and a transport bug that took four tries   151  // ---------------------------------------------------------------- helpers
TextStyle _style(double size, Color color) =>
    TextStyle(fontSize: size, color: color, height: 1.35);
The pencil was drawn by a text font   156  /// 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.
TextStyle _emojiStyle(double size) => TextStyle(
      fontSize: size,
A web version, from the same core   170        fontFamily: host.emojiFonts.isEmpty ? null : host.emojiFonts.first,
      fontFamilyFallback: host.emojiFonts.isEmpty ? null : host.emojiFonts,
The pencil was drawn by a text font   172
The renderer, and a transport bug that took four tries   174  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);
A web version, from the same core   200    return host.localImage(src);
The renderer, and a transport bug that took four tries   201
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   214  /// 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   223  /// 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   232  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   237    // 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   245    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');
265
A row is named for its message, not its place   267    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   271    final spacing = _d(n.props['spacing'], 0);
Expanded only where a Flex can hold it   272    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,
Jump to present, which was never on screen   277      // A stack's children are laid out by the stack, not by a flex: an
    // `Expanded` among them is illegal, so they must not think they are
    // in one.
    'overlay' => _noAxis,
Quality pass: reuse, dead weight, and two real costs   281      // 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   285      'hbox' => n.prop('wrap', true) ? _noAxis : _row,
    _ => _noAxis,
Quality pass: reuse, dead weight, and two real costs   288    // 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   299
  switch (n.tag) {
    case 'page':
The renderer, and a transport bug that took four tries   302        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   313
Jump to present, which was never on screen   317      /// A node with others floating over it — the backlog, with the button
    /// that takes you back to the present sitting on top of it.
319
    /// The floating children are given no height of their own, which is
    /// the whole point: a control that belongs to the backlog should not
    /// take a row away from it, and on a short window that row is what
    /// makes the screen overflow.
    case 'overlay':
        final base = kids.isNotEmpty ? kids.first : const SizedBox.shrink();
        final over = kids.skip(1).toList();
        return expanded(Stack(
          children: [
            Positioned.fill(child: base),
            for (final o in over)
              Positioned(
                left: 0,
                right: 0,
                bottom: t.spaceS,
                child: Align(alignment: Alignment.bottomCenter, child: o),
The data model, in Nim   342      case 'vbox':
The renderer, and a transport bug that took four tries   343
        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   352          return expanded(col);
The renderer, and a transport bug that took four tries   353
The data model, in Nim   354
Quality pass: reuse, dead weight, and two real costs   355      // 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   356      // 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   358      // 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   360        return Text.rich(
        TextSpan(children: n.children.map(_span).toList()),
        softWrap: true,
The data model, in Nim   365      case 'hbox':
The renderer, and a transport bug that took four tries   366
        // 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   374            // 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   379            final row = Row(
Quality pass: reuse, dead weight, and two real costs   380              crossAxisAlignment: fills
Lay every screen out in a test, and fix what that found   381                  ? CrossAxisAlignment.stretch
                : (align == 'end'
                    ? CrossAxisAlignment.end
                    : CrossAxisAlignment.center),
            children: _spaced(kids, spacing, vertical: false),
The renderer, and a transport bug that took four tries   386
Quality pass: reuse, dead weight, and two real costs   387            return expanded(_margins(n, row));
The renderer, and a transport bug that took four tries   388
        return _margins(
          Wrap(
            spacing: spacing,
            runSpacing: spacing,
            crossAxisAlignment: align == 'end'
                ? WrapCrossAlignment.end
                : WrapCrossAlignment.center,
            children: kids,
The data model, in Nim   398
The renderer, and a transport bug that took four tries   399
The data model, in Nim   401
The renderer, and a transport bug that took four tries   402      // Container::Card in the Clojure: padding 12, fills its width.
The data model, in Nim   403      case 'card':
The renderer, and a transport bug that took four tries   404        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   411
The renderer, and a transport bug that took four tries   412          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: _spaced(kids, spacing > 0 ? spacing : t.spaceXxs,
                vertical: true)),
The data model, in Nim   416
    case 'title':
      return Text(n.prop('label', ''),
The renderer, and a transport bug that took four tries   420            style: _style(t.textTitle3, t.onBg)
              .copyWith(fontWeight: FontWeight.bold));
The data model, in Nim   422
    case 'title-2':
      return Padding(
The renderer, and a transport bug that took four tries   425          padding: const EdgeInsets.only(top: t.spaceXxs, bottom: t.spaceXxxs),
The data model, in Nim   426          child: Text(n.prop('label', ''),
The renderer, and a transport bug that took four tries   427              style: _style(t.textTitle4, t.onBg)
                .copyWith(fontWeight: FontWeight.w600)),
The data model, in Nim   429
    case 'label':
The renderer, and a transport bug that took four tries   432        return Text(n.prop('label', ''), style: _style(t.textBody, t.onBg));
The data model, in Nim   433
    case 'dim-label':
The renderer, and a transport bug that took four tries   435        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   462
    case 'spinner':
The renderer, and a transport bug that took four tries   464        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   496
    case 'button':
The renderer, and a transport bug that took four tries   498
        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   506          // 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   516          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   527
    case 'checkbutton':
The renderer, and a transport bug that took four tries   529
        // 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   542                // 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   549
    case 'emoji':
      return _wrapTap(
        n.prop('onClick', ''),
        Text(n.prop('glyph', n.prop('emoji', '')),
The pencil was drawn by a text font   558              style: _emojiStyle(_d(n.props['size'], 16))),
The renderer, and a transport bug that took four tries   559
    /// 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.
566
    /// 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   588                  Text(n.prop('emoji', ''), style: _emojiStyle(size)),
The renderer, and a transport bug that took four tries   589                  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);
A web version, from the same core   607          final url = n.prop('url', '');
The renderer, and a transport bug that took four tries   608          final fallback = n.prop('fallback', '');
A web version, from the same core   609          final initial = Text(
            fallback.isNotEmpty ? fallback.substring(0, 1).toUpperCase() : '?',
            style: _style(t.textBody, t.onBg));
        // Through the host rather than as a `backgroundImage`: on the web a
        // face is an <img> the browser fetches, which is the only kind CORS
        // lets through, and an element cannot be a decoration.
The renderer, and a transport bug that took four tries   615          final face = CircleAvatar(
          radius: size / 2,
          backgroundColor: t.component,
A web version, from the same core   618            child: url.isEmpty
              ? initial
              : ClipOval(
                  child: SizedBox(
                    width: size,
                    height: size,
                    child: host.networkImage(url,
                        fit: BoxFit.cover, onError: () => initial),
The renderer, and a transport bug that took four tries   628
        final onClick = n.prop('onClick', '');
        if (onClick.isEmpty) return face;
        return InkWell(
          onTap: () => _send(onClick),
          customBorder: const CircleBorder(),
          child: face,
    case 'image':
A web version, from the same core   640          final src = n.prop('src', '');
        if (src.isEmpty) return const SizedBox.shrink();
The renderer, and a transport bug that took four tries   642          final maxW = _d(n.props['maxWidth'], 0);
        final maxH = _d(n.props['maxHeight'], 0);
A web version, from the same core   644          // 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.
        Widget img;
        if (src.startsWith('http://') || src.startsWith('https://')) {
          img = host.networkImage(src);
        } else {
          final provider = _imageProvider(src);
          if (provider == null) return const SizedBox.shrink();
          img = Image(
            image: provider,
            fit: BoxFit.contain,
            errorBuilder: (_, _, _) => const SizedBox.shrink(),
The renderer, and a transport bug that took four tries   660          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   671
    case 'entry':
The renderer, and a transport bug that took four tries   673
        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   705          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   713              : SizedBox(width: _unsizedEntry, child: field);
The renderer, and a transport bug that took four tries   714
    case 'scroll':
Both ends of a scroll, on the same controller   718          // Both ends of the same scroll, named so they are the same one.
The arrow goes to the message   719          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,
Jump to present, which was never on screen   739          // How far from the present counts as having left it. Enough that
        // the last line being taller than the gap does not toggle this on
        // its own, and little enough that a nudge upward and back does not
        // leave the button on screen.
        const away = 120.0;
The renderer, and a transport bug that took four tries   744          Widget body = SingleChildScrollView(
Both ends of a scroll, on the same controller   745            controller: c,
The renderer, and a transport bug that took four tries   746            // The backlog reads from the bottom; a settings list from the top.
The arrow goes to the message   747            reverse: stick,
The renderer, and a transport bug that took four tries   748            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: _spaced(kids, spacing, vertical: true)),
The data model, in Nim   751
Both ends of a scroll, on the same controller   752          body = Scrollbar(controller: c, child: body);
Jump to present, which was never on screen   753
        // Only the backlog reports this. A settings list has no present to
        // be at, and telling the core about one would put the chat
        // screen's button on the wrong screen's scrolling.
        if (stick) {
          body = NotificationListener<ScrollNotification>(
            onNotification: (note) {
              if (note.depth != 0) return false;
              final m = note.metrics;
              // Reversed, so the present is the zero end.
              final here = m.pixels <= m.minScrollExtent + away;
              if (_atPresent[scrollKey] != here) {
                _atPresent[scrollKey] = here;
                _send(here ? 'present.back' : 'present.left');
              return false;
            child: body,
Quality pass: reuse, dead weight, and two real costs   773          // 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   780
The renderer, and a transport bug that took four tries   781
    /// 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   802
    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   808        // is what makes the boundary pleasant to work across.
The data model, in Nim   809        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   817  /// 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   847  /// `margin` and its four sides — the props the
The renderer, and a transport bug that took four tries   848  /// 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   861