nandi/frq · nim_renderer.dart

nandi/frqpublic⑂ Fork 0
⑂ bd10e816d10d09c3dbe1256c1b7c661d8e190ee6
nim_renderer.dart · 908 lines · 36.0 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>{};
A window with two edges, and something against each of them   63  // The last size reported to the core, so a rebuild that changed nothing
// does not dispatch.
int _reportedW = 0;
int _reportedH = 0;
The arrow goes to the message   68  // 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   81  // 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   86  @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   90    // callback into Dart. At ~70µs a render a 100ms timer costs nothing.
The data model, in Nim   91    _poll = Timer.periodic(const Duration(milliseconds: 100), (_) {
Quality pass: reuse, dead weight, and two real costs   92      // 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   98
void _send(String id, [String value = '']) {
The renderer, and a transport bug that took four tries   102    if (id.isEmpty) return;
Quality pass: reuse, dead weight, and two real costs   103    setState(() => _frame = core.dispatchFrame(id, value));
The data model, in Nim   104    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   116    for (final r in _linkTaps.values) {
    r.dispose();
Both ends of a scroll, on the same controller   119    for (final c in _scrollers.values) {
    c.dispose();
The data model, in Nim   122    super.dispose();
@override
Widget build(BuildContext context) => MaterialApp(
      title: 'frq',
The renderer, and a transport bug that took four tries   128        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   140
Text can be selected   141        // 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,
A window with two edges, and something against each of them   152          // The core decides what a window this size can hold — whether the
        // room list rides beside the conversation, whether there is a back
        // button — and it cannot measure one. A window is the host's, like
        // a socket or a clock, so the host says.
        // From the constraints rather than MediaQuery: this is the space
        // the tree is actually given, which is what the decision is about.
        // Reported after the frame, because a dispatch is a setState and a
        // setState during build is an error.
        body: SafeArea(
          child: LayoutBuilder(
            builder: (context, constraints) {
              final w = constraints.maxWidth.round();
              final h = constraints.maxHeight.round();
              if (w != _reportedW || h != _reportedH) {
                _reportedW = w;
                _reportedH = h;
                WidgetsBinding.instance.addPostFrameCallback((_) {
                  if (mounted) _send('window.size', '${w}x$h');
              return SelectionArea(child: _build(_tree));
Text can be selected   177
The data model, in Nim   178
The renderer, and a transport bug that took four tries   180  // ---------------------------------------------------------------- helpers
TextStyle _style(double size, Color color) =>
    TextStyle(fontSize: size, color: color, height: 1.35);
The pencil was drawn by a text font   185  /// 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   199        fontFamily: host.emojiFonts.isEmpty ? null : host.emojiFonts.first,
      fontFamilyFallback: host.emojiFonts.isEmpty ? null : host.emojiFonts,
The pencil was drawn by a text font   201
The renderer, and a transport bug that took four tries   203  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   229    return host.localImage(src);
The renderer, and a transport bug that took four tries   230
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   243  /// 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   252  /// 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   261  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   266    // 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   274    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');
294
A row is named for its message, not its place   296    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   300    final spacing = _d(n.props['spacing'], 0);
Expanded only where a Flex can hold it   301    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   306      // 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   310      // 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   314      'hbox' => n.prop('wrap', true) ? _noAxis : _row,
    _ => _noAxis,
Quality pass: reuse, dead weight, and two real costs   317    // 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   328
  switch (n.tag) {
    case 'page':
The renderer, and a transport bug that took four tries   331        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   342
Jump to present, which was never on screen   346      /// A node with others floating over it — the backlog, with the button
    /// that takes you back to the present sitting on top of it.
348
    /// 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   371      case 'vbox':
The renderer, and a transport bug that took four tries   372
        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   381          return expanded(col);
The renderer, and a transport bug that took four tries   382
The data model, in Nim   383
Quality pass: reuse, dead weight, and two real costs   384      // 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   385      // 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   387      // 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   389        return Text.rich(
        TextSpan(children: n.children.map(_span).toList()),
        softWrap: true,
The data model, in Nim   394      case 'hbox':
The renderer, and a transport bug that took four tries   395
        // 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   403            // 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   408            final row = Row(
Quality pass: reuse, dead weight, and two real costs   409              crossAxisAlignment: fills
Lay every screen out in a test, and fix what that found   410                  ? CrossAxisAlignment.stretch
                : (align == 'end'
                    ? CrossAxisAlignment.end
                    : CrossAxisAlignment.center),
            children: _spaced(kids, spacing, vertical: false),
The renderer, and a transport bug that took four tries   415
Quality pass: reuse, dead weight, and two real costs   416            return expanded(_margins(n, row));
The renderer, and a transport bug that took four tries   417
        return _margins(
          Wrap(
            spacing: spacing,
            runSpacing: spacing,
            crossAxisAlignment: align == 'end'
                ? WrapCrossAlignment.end
                : WrapCrossAlignment.center,
            children: kids,
The data model, in Nim   427
The renderer, and a transport bug that took four tries   428
The data model, in Nim   430
The renderer, and a transport bug that took four tries   431      // Container::Card in the Clojure: padding 12, fills its width.
The data model, in Nim   432      case 'card':
The renderer, and a transport bug that took four tries   433        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   440
The renderer, and a transport bug that took four tries   441          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: _spaced(kids, spacing > 0 ? spacing : t.spaceXxs,
                vertical: true)),
The data model, in Nim   445
    case 'title':
      return Text(n.prop('label', ''),
The renderer, and a transport bug that took four tries   449            style: _style(t.textTitle3, t.onBg)
              .copyWith(fontWeight: FontWeight.bold));
The data model, in Nim   451
    case 'title-2':
      return Padding(
The renderer, and a transport bug that took four tries   454          padding: const EdgeInsets.only(top: t.spaceXxs, bottom: t.spaceXxxs),
The data model, in Nim   455          child: Text(n.prop('label', ''),
The renderer, and a transport bug that took four tries   456              style: _style(t.textTitle4, t.onBg)
                .copyWith(fontWeight: FontWeight.w600)),
The data model, in Nim   458
    case 'label':
The renderer, and a transport bug that took four tries   461        return Text(n.prop('label', ''), style: _style(t.textBody, t.onBg));
The data model, in Nim   462
    case 'dim-label':
The renderer, and a transport bug that took four tries   464        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':
A window with two edges, and something against each of them   488          // A gap that takes whatever is left, when it says so. That is what
        // carries a row's last children to its far edge: `align: end` on a
        // row cannot, because a Row with no slack has nothing to align.
        if (n.prop('expand', false) && flex) {
          return const Spacer();
The renderer, and a transport bug that took four tries   494          final s = _d(n.props['size'], t.spaceXxs);
        return SizedBox(width: s, height: s);
The data model, in Nim   497
    case 'spinner':
The renderer, and a transport bug that took four tries   499        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   531
    case 'button':
The renderer, and a transport bug that took four tries   533
        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   541          // 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') {
A window with two edges, and something against each of them   545            final plain = InkWell(
A face that opens someone   546              onTap: () => _send(onClick),
            child: Text(n.prop('label', ''),
A window with two edges, and something against each of them   548                  maxLines: 1,
                overflow: TextOverflow.ellipsis,
A face that opens someone   550                  style: _style(t.textBody, t.onBg)),
A window with two edges, and something against each of them   552            // `Flexible` and not `Expanded`: a name takes the width it needs
          // and gives the rest back, but on a row too narrow for everything
          // it is the part that should shrink. A handle is long, and the
          // time and the chips beside it are not negotiable — so without
          // this the sender's row overflowed by however much the name was
          // over, which on a phone was most handles.
          return (n.prop('expand', false) && flex)
              ? Flexible(child: plain)
              : plain;
A face that opens someone   561
The renderer, and a transport bug that took four tries   562          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   573
    case 'checkbutton':
The renderer, and a transport bug that took four tries   575
        // 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   588                // 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   595
    case 'emoji':
      return _wrapTap(
        n.prop('onClick', ''),
        Text(n.prop('glyph', n.prop('emoji', '')),
The pencil was drawn by a text font   604              style: _emojiStyle(_d(n.props['size'], 16))),
The renderer, and a transport bug that took four tries   605
    /// 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.
612
    /// 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   634                  Text(n.prop('emoji', ''), style: _emojiStyle(size)),
The renderer, and a transport bug that took four tries   635                  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   653          final url = n.prop('url', '');
The renderer, and a transport bug that took four tries   654          final fallback = n.prop('fallback', '');
A web version, from the same core   655          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   661          final face = CircleAvatar(
          radius: size / 2,
          backgroundColor: t.component,
A web version, from the same core   664            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   674
        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   686          final src = n.prop('src', '');
        if (src.isEmpty) return const SizedBox.shrink();
The renderer, and a transport bug that took four tries   688          final maxW = _d(n.props['maxWidth'], 0);
        final maxH = _d(n.props['maxHeight'], 0);
A web version, from the same core   690          // 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   706          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   717
    case 'entry':
The renderer, and a transport bug that took four tries   719
        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   751          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   759              : SizedBox(width: _unsizedEntry, child: field);
The renderer, and a transport bug that took four tries   760
    case 'scroll':
Both ends of a scroll, on the same controller   764          // Both ends of the same scroll, named so they are the same one.
The arrow goes to the message   765          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   785          // 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   790          Widget body = SingleChildScrollView(
Both ends of a scroll, on the same controller   791            controller: c,
The renderer, and a transport bug that took four tries   792            // The backlog reads from the bottom; a settings list from the top.
The arrow goes to the message   793            reverse: stick,
The renderer, and a transport bug that took four tries   794            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: _spaced(kids, spacing, vertical: true)),
The data model, in Nim   797
Both ends of a scroll, on the same controller   798          body = Scrollbar(controller: c, child: body);
Jump to present, which was never on screen   799
        // 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   819          // 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   826
The renderer, and a transport bug that took four tries   827
    /// 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   848
    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   854        // is what makes the boundary pleasant to work across.
The data model, in Nim   855        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   863  /// 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   893  /// `margin` and its four sides — the props the
The renderer, and a transport bug that took four tries   894  /// 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   907