@@ -40,6 +40,45 @@ enum ScaleMode {
   const ScaleMode(this.label);
 }
 
+/// The screen size classes a layout can adapt to: mobile, tablet and desktop.
+///
+/// A width picks one by the rule the runtime's `screen` variable uses: below
+/// [tablet]'s [minWidth] is mobile, below [desktop]'s is tablet, and anything
+/// wider is desktop. A responsive [VarianceNode] maps each of its variants to
+/// one of these (see [Variant.breakpoint]).
+enum ScreenBreakpoint {
+  /// Phones: narrower than 600.
+  mobile('Mobile', minWidth: 0, defaultWidth: 390),
+
+  /// Tablets: from 600 up to 1024.
+  tablet('Tablet', minWidth: 600, defaultWidth: 834),
+
+  /// Desktops: 1024 and wider.
+  desktop('Desktop', minWidth: 1024, defaultWidth: 1440);
+
+  /// Displayable name.
+  final String label;
+
+  /// The narrowest width this breakpoint covers, inclusive.
+  final double minWidth;
+
+  /// The width a design canvas takes to show this breakpoint.
+  final double defaultWidth;
+
+  const ScreenBreakpoint(
+    this.label, {
+    required this.minWidth,
+    required this.defaultWidth,
+  });
+
+  /// The breakpoint a screen or canvas [width] wide falls in.
+  static ScreenBreakpoint forWidth(double width) {
+    if (width >= desktop.minWidth) return desktop;
+    if (width >= tablet.minWidth) return tablet;
+    return mobile;
+  }
+}
+
 /// Represents a breakpoint for responsiveness.
 @JsonSerializable()
 class Breakpoint with Equatable, SerializableMixin {
 
@@ -38,6 +38,37 @@ class VarianceNode extends SinglePlaceholderNode with CustomPropertiesMixin {
       .expand((e) => e.children)
       .toList();
 
+  /// Whether this node is a responsive layout: its variants map to screen
+  /// breakpoints ([Variant.breakpoint]) and the one shown follows the width of
+  /// the canvas it is on, instead of [currentVariantId] or a variable.
+  bool get isResponsive =>
+      variants.any((variant) => variant.breakpoint != null);
+
+  /// The variant mapped to [breakpoint], or the nearest one when none is:
+  /// the variant whose breakpoint is fewest steps away, the smaller one on a
+  /// tie (a narrower layout fits a wider screen better than the reverse).
+  /// Null when no variant has a breakpoint.
+  Variant? variantForBreakpoint(ScreenBreakpoint breakpoint) {
+    Variant? best;
+    int bestDistance = 1 << 30;
+    for (final Variant variant in variants) {
+      final ScreenBreakpoint? own = variant.breakpoint;
+      if (own == null) continue;
+      final int distance = (own.index - breakpoint.index).abs();
+      if (distance < bestDistance ||
+          (distance == bestDistance && own.index < best!.breakpoint!.index)) {
+        best = variant;
+        bestDistance = distance;
+      }
+    }
+    return best;
+  }
+
+  /// The variant a responsive node shows on a canvas [width] wide, or the
+  /// current variant when the node is not responsive.
+  Variant variantForWidth(double width) =>
+      variantForBreakpoint(ScreenBreakpoint.forWidth(width)) ?? currentVariant;
+
   /// The variant that is loaded by default.
   Variant get defaultVariant => variants.firstWhere((e) => e.id == 'default');
 
@@ -143,11 +174,24 @@ class Variant with SerializableMixin, Equatable {
   /// All the child nodes' IDs that the variant contains.
   List<String> children;
 
+  /// The screen breakpoint this variant is the layout for, when its
+  /// [VarianceNode] is responsive. Null for an ordinary state.
+  ScreenBreakpoint? breakpoint;
+
   /// Creates a [Variant] instance with the given data.
-  Variant({required this.id, required this.name, required this.children});
+  Variant({
+    required this.id,
+    required this.name,
+    required this.children,
+    this.breakpoint,
+  });
+
+  /// The name to show for this variant: its breakpoint's label when it has
+  /// one, otherwise its [name].
+  String get label => breakpoint?.label ?? name;
 
   @override
-  List<Object?> get props => [id, name, children];
+  List<Object?> get props => [id, name, children, breakpoint];
 
   @override
   Map toJson() => _$VariantOmitDefaults(this, _$VariantToJson(this));
 
@@ -0,0 +1,132 @@
+import 'dart:convert';
+
+import 'package:codelessly_api/codelessly_api.dart';
+import 'package:test/test.dart';
+
+VarianceNode responsive(List<Variant> variants, {String? current}) =>
+    VarianceNode(
+      id: 'layout',
+      name: 'Responsive layout',
+      basicBoxLocal: NodeBox(0, 0, 390, 844),
+      variants: variants,
+      currentVariantId: current,
+    );
+
+Variant variant(String id, [ScreenBreakpoint? breakpoint]) =>
+    Variant(id: id, name: id, children: ['$id-root'], breakpoint: breakpoint);
+
+void main() {
+  group('ScreenBreakpoint.forWidth', () {
+    test('follows the screen variable rule (600 and 1024)', () {
+      expect(ScreenBreakpoint.forWidth(0), ScreenBreakpoint.mobile);
+      expect(ScreenBreakpoint.forWidth(390), ScreenBreakpoint.mobile);
+      expect(ScreenBreakpoint.forWidth(599.9), ScreenBreakpoint.mobile);
+      expect(ScreenBreakpoint.forWidth(600), ScreenBreakpoint.tablet);
+      expect(ScreenBreakpoint.forWidth(834), ScreenBreakpoint.tablet);
+      expect(ScreenBreakpoint.forWidth(1023.9), ScreenBreakpoint.tablet);
+      expect(ScreenBreakpoint.forWidth(1024), ScreenBreakpoint.desktop);
+      expect(ScreenBreakpoint.forWidth(1440), ScreenBreakpoint.desktop);
+    });
+
+    test('default widths fall in their own breakpoint', () {
+      for (final ScreenBreakpoint breakpoint in ScreenBreakpoint.values) {
+        expect(ScreenBreakpoint.forWidth(breakpoint.defaultWidth), breakpoint);
+      }
+    });
+  });
+
+  group('Variant.breakpoint JSON', () {
+    test('round-trips and is omitted when unset', () {
+      final Variant plain = variant('plain');
+      expect(plain.toJson().containsKey('breakpoint'), isFalse);
+      expect(Variant.fromJson(plain.toJson()), plain);
+
+      final Variant tablet = variant('tablet', ScreenBreakpoint.tablet);
+      expect(tablet.toJson()['breakpoint'], 'tablet');
+      expect(Variant.fromJson(tablet.toJson()), tablet);
+      expect(
+        Variant.fromJson(tablet.toJson()).breakpoint,
+        ScreenBreakpoint.tablet,
+      );
+    });
+
+    test('a variance from before breakpoints reads as not responsive', () {
+      // JSON written before breakpoints existed: no `breakpoint` keys.
+      final Map json = jsonDecode(
+        jsonEncode(responsive([variant('default')]).toJson()),
+      ) as Map;
+      expect(jsonEncode(json).contains('breakpoint'), isFalse);
+      final VarianceNode node = VarianceNode.fromJson(json);
+      expect(node.isResponsive, isFalse);
+      expect(node.variants.single.breakpoint, isNull);
+      expect(node.toJson()['variants'][0].containsKey('breakpoint'), isFalse);
+    });
+
+    test('a responsive variance survives a JSON-encoded round trip', () {
+      final VarianceNode node = responsive([
+        variant('m', ScreenBreakpoint.mobile),
+        variant('t', ScreenBreakpoint.tablet),
+        variant('d', ScreenBreakpoint.desktop),
+      ], current: 't');
+      final Map decoded = jsonDecode(jsonEncode(node.toJson())) as Map;
+      final VarianceNode back = VarianceNode.fromJson(decoded);
+      expect(back.isResponsive, isTrue);
+      expect(back.variants.map((Variant v) => v.breakpoint).toList(), [
+        ScreenBreakpoint.mobile,
+        ScreenBreakpoint.tablet,
+        ScreenBreakpoint.desktop,
+      ]);
+      expect(back.currentVariantId, 't');
+      expect(back.variants, node.variants);
+      // Read through the registry, as a page document is loaded.
+      final BaseNode viaRegistry = NodeJsonConverter().fromJson(decoded)!;
+      expect((viaRegistry as VarianceNode).variantForWidth(1440).id, 'd');
+    });
+  });
+
+  group('VarianceNode.variantForWidth', () {
+    test('picks the exact breakpoint', () {
+      final VarianceNode node = responsive([
+        variant('m', ScreenBreakpoint.mobile),
+        variant('t', ScreenBreakpoint.tablet),
+        variant('d', ScreenBreakpoint.desktop),
+      ]);
+      expect(node.variantForWidth(390).id, 'm');
+      expect(node.variantForWidth(834).id, 't');
+      expect(node.variantForWidth(1440).id, 'd');
+      expect(node.children, ['m-root']);
+    });
+
+    test('falls back to the nearest, the smaller one on a tie', () {
+      final VarianceNode mobileDesktop = responsive([
+        variant('m', ScreenBreakpoint.mobile),
+        variant('d', ScreenBreakpoint.desktop),
+      ]);
+      expect(mobileDesktop.variantForWidth(834).id, 'm');
+      expect(mobileDesktop.variantForWidth(1440).id, 'd');
+
+      final VarianceNode tabletOnly = responsive([
+        variant('plain'),
+        variant('t', ScreenBreakpoint.tablet),
+      ]);
+      expect(tabletOnly.variantForWidth(390).id, 't');
+      expect(tabletOnly.variantForWidth(1440).id, 't');
+
+      final VarianceNode mobileTablet = responsive([
+        variant('m', ScreenBreakpoint.mobile),
+        variant('t', ScreenBreakpoint.tablet),
+      ]);
+      expect(mobileTablet.variantForWidth(1440).id, 't');
+    });
+
+    test('an ordinary variance keeps its current variant', () {
+      final VarianceNode node = responsive([
+        variant('a'),
+        variant('b'),
+      ], current: 'b');
+      expect(node.isResponsive, isFalse);
+      expect(node.variantForBreakpoint(ScreenBreakpoint.mobile), isNull);
+      expect(node.variantForWidth(390).id, 'b');
+    });
+  });
+}