rsc-universal 0.1.1

package/skills/flutter/references/performance.md

@@ -0,0 +1,299 @@
+# Performance: rebuilds, paint, jank & flavors (deep dive)
+
+Back to [`../SKILL.md`](../SKILL.md).
+
+A hunting workflow, not a checklist: minimize rebuilds, cut unnecessary paint, keep lists and
+images cheap, push CPU-bound work off the UI thread, profile in the right mode, and ship
+flavored builds. All code targets **Flutter 3.44 / Dart 3.12**. Impeller is the default
+renderer on iOS and Android in 3.44 — most legacy shader-compilation jank is gone, but the
+rebuild/paint rules below still decide whether you hold 60/120fps.
+
+## Rebuild minimization
+
+The cheapest frame is the one that doesn't rebuild. Two levers do most of the work: `const`
+constructors and extracting subtrees to widget classes so only the changing leaf rebuilds.
+
+```dart
+// BAD — watch() at the top rebuilds the whole page, including the static header/footer.
+class CounterPage extends ConsumerWidget {
+  const CounterPage({super.key});
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final count = ref.watch(counterProvider);
+    return Scaffold(
+      body: Column(children: [
+        const ExpensiveHeader(),  // rebuilt for nothing
+        Text('$count'),
+        const ExpensiveFooter(),  // rebuilt for nothing
+      ]),
+    );
+  }
+}
+
+// GOOD — the page is const; only the leaf that watches rebuilds.
+class CounterPage extends StatelessWidget {
+  const CounterPage({super.key});
+  @override
+  Widget build(BuildContext context) => const Scaffold(
+        body: Column(children: [ExpensiveHeader(), _CounterText(), ExpensiveFooter()]),
+      );
+}
+
+class _CounterText extends ConsumerWidget {
+  const _CounterText();
+  @override
+  Widget build(BuildContext context, WidgetRef ref) => Text('${ref.watch(counterProvider)}');
+}
+```
+
+Scope consumers to the exact field they need. Across solutions:
+
+```dart
+// Riverpod — rebuild only when the count changes, not on any cart mutation.
+final count = ref.watch(cartControllerProvider.select((s) => s.valueOrNull?.items.length ?? 0));
+
+// Bloc — BlocSelector narrows to one derived value.
+BlocSelector<CartBloc, CartState, int>(
+  selector: (state) => state is CartLoaded ? state.cart.items.length : 0,
+  builder: (context, count) => Text('$count'),
+);
+
+// Bloc — buildWhen skips rebuilds that don't matter.
+BlocBuilder<CartBloc, CartState>(
+  buildWhen: (prev, next) => prev.runtimeType != next.runtimeType,
+  builder: (context, state) => CartView(state),
+);
+```
+
+For a single leaf value, `ValueListenableBuilder` rebuilds nothing else:
+
+```dart
+final _selected = ValueNotifier<int>(0);
+
+ValueListenableBuilder<int>(
+  valueListenable: _selected,
+  builder: (context, value, child) => Tab(active: value == index, child: child),
+  child: const TabLabel(), // built once, passed through every rebuild
+);
+```
+
+Animations are the classic rebuild trap — use the `child:` escape hatch so the subtree builds
+once and only the transform/opacity re-evaluates per frame:
+
+```dart
+// GOOD — Icon is built once; only the rotation re-evaluates each frame.
+AnimatedBuilder(
+  animation: _controller,
+  child: const Icon(Icons.refresh),
+  builder: (context, child) => Transform.rotate(angle: _controller.value * 6.28, child: child),
+);
+```
+
+## Paint
+
+Rebuild and repaint are separate phases — a widget can repaint without rebuilding. Wrap a
+subtree that repaints independently (a spinner, a progress ring, a blinking cursor) in a
+`RepaintBoundary` so its repaint doesn't dirty its neighbors:
+
+```dart
+RepaintBoundary(child: CircularProgressIndicator(value: _progress));
+```
+
+Trade-off: a `RepaintBoundary` allocates a separate layer (memory + a compositing step). Add
+it only where a subtree genuinely repaints on a different cadence than its siblings — wrapping
+everything is a net loss. Confirm with DevTools "Highlight Repaints" before and after.
+
+Avoid `Opacity` and `ClipRRect` *inside animations* — both force an offscreen buffer every
+frame. Use the animated/transition variants or pre-clipped assets:
+
+```dart
+// BAD — Opacity in an animation re-composites an offscreen layer every frame.
+Opacity(opacity: _controller.value, child: child);
+// GOOD — FadeTransition animates on the compositor, no per-frame buffer.
+FadeTransition(opacity: _controller, child: child);
+```
+
+`IntrinsicHeight`/`IntrinsicWidth` force a second layout pass (the framework lays the child out
+twice to measure it). Cheap once, expensive in a scrolling list — prefer a fixed extent or
+`Flexible` weighting instead.
+
+## Lists & images
+
+`ListView.builder` / `SliverList.builder` build only visible rows; the concrete
+`ListView(children: [...])` builds every child eagerly. For fixed-height rows, give the list an
+extent so it can skip per-item layout while scrolling:
+
+```dart
+ListView.builder(
+  itemCount: items.length,
+  itemExtent: 72,                 // every row is 72px tall — skip measuring each one
+  itemBuilder: (context, i) => ProductRow(key: ValueKey(items[i].id), product: items[i]),
+);
+
+// When rows vary but share a representative shape, use prototypeItem instead of itemExtent.
+ListView.builder(
+  prototypeItem: const ProductRow.placeholder(),
+  itemCount: items.length,
+  itemBuilder: (context, i) => ProductRow(product: items[i]),
+);
+```
+
+Paginate large feeds — fetch the next page near the end, don't load 10k rows at once:
+
+```dart
+NotificationListener<ScrollEndNotification>(
+  onNotification: (notification) {
+    final m = notification.metrics;
+    if (m.pixels >= m.maxScrollExtent - 600) ref.read(feedControllerProvider.notifier).loadMore();
+    return false;
+  },
+  child: ListView.builder(itemCount: items.length, itemBuilder: _row),
+);
+```
+
+`addAutomaticKeepAlives: false` drops offscreen row state to save memory — but only when rows
+hold no scroll position or form input worth preserving; the default `true` is safer.
+
+Decode images at display size (`cacheWidth`/`cacheHeight`) so a 4K asset doesn't become a
+12MB texture for a 200px thumbnail:
+
+```dart
+Image.asset('assets/hero.jpg', cacheWidth: 400, cacheHeight: 400);
+```
+
+Network images: cache, and always provide placeholder + error widgets:
+
+```dart
+CachedNetworkImage(
+  imageUrl: product.imageUrl,
+  memCacheWidth: 400,
+  placeholder: (context, url) => const ColoredBox(color: Colors.black12),
+  errorWidget: (context, url, error) => const Icon(Icons.broken_image),
+);
+```
+
+Warm above-the-fold images before the first frame to avoid a pop-in:
+
+```dart
+@override
+void didChangeDependencies() {
+  super.didChangeDependencies();
+  precacheImage(const AssetImage('assets/hero.jpg'), context);
+}
+```
+
+## Off-thread work
+
+Anything CPU-bound longer than a few milliseconds (large JSON parse, image transform, crypto)
+blocks the UI isolate and drops frames. Move it with `Isolate.run` (Dart 3) or `compute`:
+
+```dart
+// One-shot — the closure runs on a fresh isolate, result is returned.
+final products = await Isolate.run(() => _parseProducts(rawJson));
+
+// compute() — top-level/static function + a single argument.
+final products = await compute(_parseProducts, rawJson);
+
+List<Product> _parseProducts(String raw) =>
+    (jsonDecode(raw) as List).map((e) => ProductDto.fromJson(e).toDomain()).toList();
+```
+
+Keep heavy `dart:ui` effects out of animated paths: `ImageFilter.blur` (frosted-glass
+`BackdropFilter`) re-renders the blurred region every frame and is one of the most expensive
+operations on screen — render it statically, or behind a `RepaintBoundary`, never per scroll
+tick.
+
+## Profiling workflow
+
+**Profile in profile mode. Debug-mode numbers are meaningless** — the VM runs unoptimized and
+asserts are on:
+
+```bash
+flutter run --profile
+```
+
+Then in DevTools → Performance:
+
+- Enable **"Track Widget Rebuilds"** to find widgets rebuilding more than they should — the fix
+  is almost always a missing `const` or a too-wide `watch`.
+- Read the **Timeline**: the **UI thread** runs your Dart (build/layout); the **raster thread**
+  rasterizes the layer tree. A long UI bar = expensive build/layout; a long raster bar =
+  expensive paint/shaders/blur.
+- Wrap suspect code in custom timeline events to see it in the trace:
+
+```dart
+import 'dart:developer';
+
+Timeline.startSync('parseFeed');
+final feed = parseFeed(raw);
+Timeline.finishSync();
+```
+
+Jank checklist: a frame budget is **16ms at 60Hz**, **8ms at 120Hz** — anything longer is a
+dropped frame. If the raster thread spikes on first display of a new effect, that's
+shader-compilation jank; Impeller (default on iOS/Android in 3.44) precompiles and eliminates
+most of it. On a legacy Skia build, capture the SkSL with `flutter run --profile --trace-skia`
+and, as a last resort, clear a stale shader cache with `--purge-persistent-cache`.
+
+## Build flavors
+
+Run a flavor with a config file instead of scattering `if (kDebugMode)` checks:
+
+```bash
+flutter run --flavor dev  --dart-define-from-file=config/dev.json
+flutter run --flavor prod --dart-define-from-file=config/prod.json
+```
+
+Flavored entrypoints select config at launch:
+
+```dart
+// lib/main_dev.dart
+void main() => runApp(const App(flavor: Flavor.dev));
+
+// lib/main_prod.dart
+void main() => runApp(const App(flavor: Flavor.prod));
+```
+
+Read injected config via compile-time `String.fromEnvironment` — values come from the
+`--dart-define-from-file` JSON:
+
+```dart
+abstract final class Env {
+  static const apiUrl = String.fromEnvironment('API_URL');
+  static const sentryDsn = String.fromEnvironment('SENTRY_DSN');
+}
+```
+
+```json
+{
+  "API_URL": "https://api.dev.example.com",
+  "SENTRY_DSN": "https://abc@o0.ingest.sentry.io/0"
+}
+```
+
+Wire the native side once. Android `productFlavors` in `android/app/build.gradle`:
+
+```text
+android {
+  flavorDimensions += "env"
+  productFlavors {
+    dev  { dimension "env"; applicationIdSuffix ".dev"; resValue "string", "app_name", "App Dev" }
+    prod { dimension "env"; resValue "string", "app_name", "App" }
+  }
+}
+```
+
+iOS uses Xcode schemes + per-flavor `.xcconfig` files (`Dev.xcconfig`, `Prod.xcconfig`)
+selected by the `--flavor` flag; commit the schemes so CI can build them.
+
+Release builds: measure size, split debug symbols, and obfuscate so the shipped binary leaks no
+Dart identifiers and stays small:
+
+```bash
+flutter build apk --release --analyze-size \
+  --obfuscate --split-debug-info=build/symbols
+```
+
+Keep `config/*.json` out of VCS if they contain secrets (`.gitignore` them, commit a
+`config/dev.example.json`); truly secret keys belong behind your backend, never in the app
+bundle.

package/skills/flutter/references/testing.md

@@ -0,0 +1,385 @@
+# Testing the full pyramid (deep dive)
+
+Back to [`../SKILL.md`](../SKILL.md).
+
+Unit, repository, Bloc, widget, golden, and integration tests with runnable code, plus
+coverage. Targets **Flutter 3.44 / Dart 3.12**, **Riverpod 3.0**, **mocktail 1.x**. The
+non-negotiable rule: **every async state transition has a test** — loading → data and
+loading → error, separately.
+
+## Setup
+
+```yaml
+# pubspec.yaml
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
+  integration_test:
+    sdk: flutter
+  mocktail: ^1.0.0
+  bloc_test: ^10.0.0
+```
+
+`test/` mirrors `lib/src/` one-to-one: `lib/src/features/cart/domain/cart.dart` →
+`test/features/cart/domain/cart_test.dart`. Golden images live beside the test that produces
+them, in a `goldens/` subfolder. Built-in `matchesGoldenFile` needs no extra package; the
+optional `golden_toolkit` only helps with multi-device builders and font loading.
+
+## Unit tests
+
+Pure domain logic needs no Flutter binding:
+
+```dart
+import 'package:flutter_test/flutter_test.dart';
+
+void main() {
+  test('cart total sums quantity * unitPrice', () {
+    final cart = Cart(id: '1', total: 0, items: const [
+      CartItem(id: 'a', name: 'Pen', quantity: 2, unitPrice: 1.5),
+      CartItem(id: 'b', name: 'Pad', quantity: 1, unitPrice: 4.0),
+    ]);
+    final total = cart.items.fold<double>(0, (s, i) => s + i.quantity * i.unitPrice);
+    expect(total, 7.0);
+  });
+}
+```
+
+Test an `AsyncNotifier` with the v3 `ProviderContainer.test()` helper, which auto-disposes:
+
+```dart
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:mocktail/mocktail.dart';
+
+class MockCartRepository extends Mock implements CartRepository {}
+
+void main() {
+  late MockCartRepository repo;
+
+  setUpAll(() => registerFallbackValue(const Ok<Cart, Failure>(_emptyCart)));
+  setUp(() => repo = MockCartRepository());
+
+  test('loads cart on build', () async {
+    when(repo.getCart).thenAnswer((_) async => const Ok(_emptyCart));
+
+    final container = ProviderContainer.test(
+      overrides: [cartRepositoryProvider.overrideWithValue(repo)],
+    );
+
+    final cart = await container.read(cartControllerProvider.future);
+    expect(cart.id, _emptyCart.id);
+    verify(repo.getCart).called(1);
+  });
+
+  test('addItem transitions loading -> data', () async {
+    when(repo.getCart).thenAnswer((_) async => const Ok(_emptyCart));
+    when(() => repo.addItem(any())).thenAnswer((_) async => const Ok(_fullCart));
+
+    final container = ProviderContainer.test(
+      overrides: [cartRepositoryProvider.overrideWithValue(repo)],
+    );
+
+    await container.read(cartControllerProvider.future);
+    final transitions = <AsyncValue<Cart>>[];
+    container.listen(cartControllerProvider, (_, next) => transitions.add(next));
+
+    await container.read(cartControllerProvider.notifier).addItem('x');
+
+    expect(transitions.first, isA<AsyncLoading<Cart>>());
+    expect(transitions.last, isA<AsyncData<Cart>>());
+  });
+}
+
+const _emptyCart = Cart(id: 'c1', total: 0, items: const []);
+const _fullCart = Cart(id: 'c1', total: 9, items: const [
+  CartItem(id: 'x', name: 'Mug', quantity: 1, unitPrice: 9),
+]);
+```
+
+`mocktail` essentials: subclass `Mock implements`; call `registerFallbackValue` for any type
+used inside an `any()` matcher; stub with `when(...).thenAnswer(...)`; assert calls with
+`verify(...).called(n)`.
+
+Fakes over mocks: for a repository, an in-memory `FakeCartRepository implements CartRepository`
+with a real `Map` is more robust than a mock — it survives refactors and exercises real call
+sequences. Reserve mocks for verifying *interaction counts* (was the analytics call made
+once?).
+
+## Repository test
+
+Mock `Dio` and cover both the success and the error mapping path:
+
+```dart
+import 'package:dio/dio.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:mocktail/mocktail.dart';
+
+class MockDio extends Mock implements Dio {}
+
+void main() {
+  late MockDio dio;
+  late CartRepositoryImpl repo;
+
+  setUp(() {
+    dio = MockDio();
+    repo = CartRepositoryImpl(CartRemoteDataSource(dio), InMemoryCartCache());
+  });
+
+  test('getCart maps 200 to Ok', () async {
+    when(() => dio.get<Map<String, dynamic>>('/cart')).thenAnswer(
+      (_) async => Response(
+        requestOptions: RequestOptions(path: '/cart'),
+        statusCode: 200,
+        data: const {'id': 'c1', 'total_amount': 0.0, 'items': <dynamic>[]},
+      ),
+    );
+
+    final result = await repo.getCart();
+    expect(result, isA<Ok<Cart, Failure>>());
+    expect((result as Ok).value.id, 'c1');
+  });
+
+  test('getCart maps 401 to Err(AuthFailure)', () async {
+    when(() => dio.get<Map<String, dynamic>>('/cart')).thenThrow(
+      DioException(
+        requestOptions: RequestOptions(path: '/cart'),
+        response: Response(requestOptions: RequestOptions(path: '/cart'), statusCode: 401),
+      ),
+    );
+
+    final result = await repo.getCart();
+    expect(result, isA<Err<Cart, Failure>>());
+    expect((result as Err).failure, isA<AuthFailure>());
+  });
+}
+```
+
+## Bloc test
+
+`blocTest` asserts the exact emitted sequence for both happy and error paths:
+
+```dart
+import 'package:bloc_test/bloc_test.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:mocktail/mocktail.dart';
+
+void main() {
+  late MockCartRepository repo;
+  setUp(() => repo = MockCartRepository());
+
+  blocTest<CartBloc, CartState>(
+    'emits [Loading, Loaded] on CartStarted success',
+    setUp: () => when(repo.getCart).thenAnswer((_) async => const Ok(_emptyCart)),
+    build: () => CartBloc(repo),
+    act: (bloc) => bloc.add(CartStarted()),
+    expect: () => [isA<CartLoaded>()],
+  );
+
+  blocTest<CartBloc, CartState>(
+    'emits [Error] on CartStarted failure',
+    setUp: () => when(repo.getCart).thenAnswer((_) async => const Err(NetworkFailure())),
+    build: () => CartBloc(repo),
+    act: (bloc) => bloc.add(CartStarted()),
+    expect: () => [isA<CartError>()],
+  );
+}
+```
+
+## Widget tests
+
+Override the controller with a fake, wrap in `ProviderScope` + `MaterialApp`:
+
+```dart
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:flutter_test/flutter_test.dart';
+
+class FakeCartController extends CartController {
+  FakeCartController(this._value);
+  final Cart _value;
+  @override
+  Future<Cart> build() async => _value;
+}
+
+void main() {
+  testWidgets('renders cart items', (tester) async {
+    await tester.pumpWidget(ProviderScope(
+      overrides: [cartControllerProvider.overrideWith(() => FakeCartController(_fullCart))],
+      child: const MaterialApp(home: CartScreen()),
+    ));
+
+    await tester.pump(); // let the Future resolve one frame
+    expect(find.text('Mug'), findsOneWidget);
+    expect(find.byType(CircularProgressIndicator), findsNothing);
+  });
+}
+```
+
+`pump` vs `pumpAndSettle` discipline. `pump()` advances exactly one frame (or a fixed
+duration); `pumpAndSettle()` pumps until no frames are scheduled. **`pumpAndSettle` hangs
+forever on infinite animations** — a `CircularProgressIndicator` schedules a frame every
+tick, so the future never completes and the test times out. On any screen with an indeterminate
+spinner, drive time explicitly:
+
+```dart
+// BAD — hangs while the spinner is on screen.
+await tester.pumpAndSettle();
+// GOOD — advance a known duration past the animation.
+await tester.pump(const Duration(milliseconds: 300));
+```
+
+Finders: `find.byType(CartCard)`, `find.text('Mug')`, `find.byKey(const Key('add'))`. Drive
+interaction then assert the rebuild:
+
+```dart
+testWidgets('tapping add increments the badge', (tester) async {
+  await tester.pumpWidget(/* ... ProviderScope as above ... */);
+  await tester.pump();
+  await tester.tap(find.byKey(const Key('add')));
+  await tester.pump();
+  expect(find.text('1'), findsOneWidget);
+});
+```
+
+Test the error UI by overriding the controller to surface an `AsyncError`:
+
+```dart
+class ErroringCartController extends CartController {
+  @override
+  Future<Cart> build() async => throw const NetworkFailure();
+}
+
+testWidgets('shows error view on failure', (tester) async {
+  await tester.pumpWidget(ProviderScope(
+    overrides: [cartControllerProvider.overrideWith(ErroringCartController.new)],
+    child: const MaterialApp(home: CartScreen()),
+  ));
+  await tester.pump();
+  expect(find.byType(ErrorView), findsOneWidget);
+});
+```
+
+## Golden tests
+
+Compare a widget's pixels against a checked-in PNG:
+
+```dart
+testWidgets('CartCard golden', (tester) async {
+  await tester.pumpWidget(MaterialApp(
+    home: Scaffold(body: Center(child: CartCard(item: _fullCart.items.first))),
+  ));
+  await expectLater(find.byType(CartCard), matchesGoldenFile('goldens/cart_card.png'));
+});
+```
+
+Determinism is everything — goldens flake on fonts, surface size, and async images. Pin all
+three. Load real fonts once via `flutter_test_config.dart` (auto-loaded for the whole suite):
+
+```dart
+// test/flutter_test_config.dart
+import 'dart:async';
+import 'package:flutter/services.dart';
+import 'package:flutter_test/flutter_test.dart';
+
+Future<void> testExecutable(FutureOr<void> Function() testMain) async {
+  TestWidgetsFlutterBinding.ensureInitialized();
+  final fontData = rootBundle.load('assets/fonts/Inter-Regular.ttf');
+  final loader = FontLoader('Inter')..addFont(fontData);
+  await loader.load();
+  await testMain();
+}
+```
+
+Fix the surface and let decoded network/asset images finish inside `runAsync`:
+
+```dart
+testWidgets('list golden, fixed surface', (tester) async {
+  tester.view.physicalSize = const Size(1170, 2532);
+  tester.view.devicePixelRatio = 3.0;
+  addTearDown(tester.view.resetPhysicalSize);
+
+  await tester.runAsync(() async {
+    await tester.pumpWidget(const MaterialApp(home: CartScreen()));
+    await tester.pumpAndSettle(); // safe here: no infinite animation after images settle
+  });
+
+  await expectLater(find.byType(CartScreen), matchesGoldenFile('goldens/cart_screen.png'));
+});
+```
+
+Multi-device coverage with a small helper:
+
+```dart
+Future<void> goldenForDevices(WidgetTester tester, Widget child, String name) async {
+  for (final (label, size) in const [('phone', Size(390, 844)), ('tablet', Size(820, 1180))]) {
+    tester.view.physicalSize = size;
+    tester.view.devicePixelRatio = 2.0;
+    await tester.pumpWidget(MaterialApp(home: child));
+    await tester.pump();
+    await expectLater(find.byWidget(child), matchesGoldenFile('goldens/${name}_$label.png'));
+  }
+  addTearDown(tester.view.resetPhysicalSize);
+}
+```
+
+Update goldens after an intentional visual change:
+
+```bash
+flutter test --update-goldens
+```
+
+CI gotcha: font and text rendering differ across host platforms (macOS vs Linux), so a golden
+generated locally will mismatch on CI. Tag golden tests and gate them on one canonical image
+only:
+
+```bash
+# tag with @Tags(['golden']) and run on the pinned CI image only:
+flutter test --tags golden
+```
+
+## integration_test
+
+Drive the real app on a device/emulator:
+
+```dart
+import 'package:flutter_test/flutter_test.dart';
+import 'package:integration_test/integration_test.dart';
+
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  testWidgets('login -> home flow', (tester) async {
+    await tester.pumpWidget(const App());
+    await tester.pumpAndSettle();
+
+    await tester.enterText(find.byKey(const Key('email')), 'ada@example.com');
+    await tester.enterText(find.byKey(const Key('password')), 'hunter2');
+    await tester.tap(find.byKey(const Key('submit')));
+    await tester.pumpAndSettle();
+
+    expect(find.byType(HomeScreen), findsOneWidget);
+  });
+}
+```
+
+```bash
+flutter test integration_test
+```
+
+## Coverage
+
+```bash
+flutter test --coverage          # writes coverage/lcov.info
+```
+
+Generated files inflate coverage — strip them before reporting:
+
+```bash
+lcov --remove coverage/lcov.info \
+  '*.g.dart' '*.freezed.dart' '*.config.dart' \
+  -o coverage/lcov.info
+genhtml coverage/lcov.info -o coverage/html
+```
+
+Target 80%+ on `domain/` and state (`*_controller.dart`, Blocs) — that's where the logic
+lives. UI coverage comes from widget + golden tests, not from chasing a number on layout code.