basalt-appkit 0.0.0-rc5 → 0.1.0

package/native/appkit/RnAppKitView.mm

@@ -2,8 +2,10 @@
 
 #include "ControlMetrics.h"
 #include "Backface.h"
+#include "ImageAnimation.h"
 #include "FocusRing.h"
 #include "ScrollIndicator.h"
+#include "ShadowShape.h"
 
 #include <vector>
 
@@ -11,10 +13,12 @@
 
 #include "PointerButtons.h"
 
+#include <algorithm>
 #include <cmath>
 
 #import "RnTextLayout.h"
 
+#import <CoreImage/CoreImage.h>
 #import <QuartzCore/QuartzCore.h>
 
 // Topmost first: AppKit's subviews array is back to front, and a hit test wants
@@ -58,7 +62,10 @@ RnAppKitView *RnAppKitHitTest(RnAppKitView *root, CGFloat x, CGFloat y) {
   const CGFloat bx = x + bounds.origin.x;
   const CGFloat by = y + bounds.origin.y;
 
-  if (!NSPointInRect(NSMakePoint(bx, by), bounds)) {
+  // `hitSlop` grows the box this test accepts, and only this test: the view is
+  // still drawn in its own frame. Children are reached through their own call,
+  // so each view's slop is applied to its own box on the way down.
+  if (!NSPointInRect(NSMakePoint(bx, by), [root rnHitArea])) {
     return nil;
   }
 
@@ -156,6 +163,209 @@ static CGPathRef RnAppKitCreateRoundedPath(CGRect rect, const CGFloat radii[8])
   return path;
 }
 
+// One gradient as the view keeps it: the two points and its own stops. A
+// transition hint turns three stops into eleven, so the lists are different
+// lengths for no reason the caller controls, and each gradient owns its own.
+struct RnAppKitGradientRecord {
+  RnAppKitGradientKind kind;
+  // Linear: the ends of the gradient line. Radial: the centre and the radii.
+  CGPoint start;
+  CGPoint end;
+  CGPoint center;
+  CGFloat radiusX;
+  CGFloat radiusY;
+  // Where the image goes and the tile it repeats in. See RnAppKitGradient.
+  CGRect area;
+  CGRect tile;
+  bool repeats;
+  std::vector<RnAppKitGradientStop> stops;
+};
+
+// The eight radii of a shadow's own box, each grown by the spread.
+//
+// The curve is `core/ShadowShape.h`'s, shared with the Win32 host, which builds
+// a Direct2D geometry where this builds a CGPath and needs the same arithmetic.
+// It lived here first; the comment about what the curve is and why it is not an
+// addition moved with it.
+static void RnAppKitSpreadRadii(const CGFloat radii[8], CGFloat spread, CGFloat out[8]) {
+  for (int i = 0; i < 8; i++) {
+    out[i] = static_cast<CGFloat>(basalt::spreadRadius(radii[i], spread));
+  }
+}
+
+// The same path, walked the other way, so that adding it to another one punches
+// a hole rather than filling it: `shadowPath` has no fill rule and winds
+// non-zero. NSBezierPath has reversal built in, and hand-rolling it means
+// reversing four elliptical corners in the right order, which is exactly the
+// kind of code that is wrong in one corner only.
+static CGPathRef RnAppKitCreateReversedPath(CGPathRef path) {
+  NSBezierPath *bezier = [NSBezierPath bezierPathWithCGPath:path];
+  return CGPathCreateCopy([bezier bezierPathByReversingPath].CGPath);
+}
+
+// A shadow cast outward by the view's box.
+//
+// The offset and the spread are baked into the path rather than set as
+// `shadowOffset`, which is what keeps a positive dy pointing down in this
+// flipped view, and the mask cuts the box itself out so the shadow is only ever
+// outside it -- a shadow painted under a translucent background would otherwise
+// show through it, which CSS does not do.
+// A `dropShadow()` beyond the first, as a layer of its own.
+//
+// A CALayer carries one shadow, so a list of them needs a layer each. The first
+// stays on the view's own layer, where it is cast from the content's *alpha* --
+// which is what makes a drop shadow a drop shadow. The rest are cast from the
+// view's box through a `shadowPath`, which is the one deviation here and is
+// exact for every opaque view: a rounded card with two shadows is the case this
+// exists for. backlog/platform-macos.md records the difference, which shows
+// only on a view whose content has holes in it.
+//
+// CSS applies a filter list left to right, each function working on what the
+// one before produced, so the second shadow is a shadow of the content *and*
+// the first shadow. These are drawn from the same box instead, which is the
+// same approximation and the same reason.
+static CALayer *RnAppKitFilterShadowLayer(const RnAppKitFilterShadow &shadow,
+                                          const CGFloat radii[8],
+                                          CGSize size) {
+  CALayer *layer = [CALayer layer];
+  layer.frame = CGRectMake(0, 0, size.width, size.height);
+  // The same conversions the view's own layer uses in -rnApplyFilterShadow:,
+  // so the second shadow of a pair is drawn by the same arithmetic as the
+  // first: the standard deviation crosses unchanged, the colour's alpha is the
+  // layer's opacity, and dy is turned over because the layer is not flipped
+  // where the view is.
+  layer.shadowRadius = shadow.standardDeviation;
+  layer.shadowOpacity = (float)shadow.color[3];
+  layer.shadowOffset = CGSizeMake(shadow.dx, -shadow.dy);
+
+  CGColorSpaceRef space = CGColorSpaceCreateWithName(kCGColorSpaceSRGB);
+  const CGFloat opaque[4] = {shadow.color[0], shadow.color[1], shadow.color[2], 1};
+  CGColorRef color = CGColorCreate(space, opaque);
+  layer.shadowColor = color;
+  CGColorRelease(color);
+  CGColorSpaceRelease(space);
+
+  CGPathRef shadowPath = RnAppKitCreateRoundedPath(layer.bounds, radii);
+  layer.shadowPath = shadowPath;
+  CGPathRelease(shadowPath);
+
+  // Everything outside the view's own box, the way the outset box shadows are
+  // masked: without it the shadow is drawn under the content as well, which
+  // darkens a translucent view from inside.
+  CAShapeLayer *mask = [CAShapeLayer layer];
+  mask.fillRule = kCAFillRuleEvenOdd;
+  CGMutablePathRef maskPath = CGPathCreateMutable();
+  CGPathRef viewPath = RnAppKitCreateRoundedPath(layer.bounds, radii);
+  const CGFloat reach = shadow.standardDeviation * 3 + std::abs(shadow.dx) + std::abs(shadow.dy);
+  CGPathAddRect(maskPath, nullptr, CGRectInset(layer.bounds, -reach - 1, -reach - 1));
+  CGPathAddPath(maskPath, nullptr, viewPath);
+  CGPathRelease(viewPath);
+  mask.path = maskPath;
+  CGPathRelease(maskPath);
+  layer.mask = mask;
+  return layer;
+}
+
+static CALayer *RnAppKitOutsetShadowLayer(const RnAppKitBoxShadow &shadow,
+                                          const CGFloat radii[8],
+                                          CGSize size) {
+  CALayer *layer = [CALayer layer];
+  layer.frame = CGRectMake(0, 0, size.width, size.height);
+  layer.shadowOffset = CGSizeZero;
+  layer.shadowOpacity = 1;
+  // Half the radius, which is the same conversion the image blur uses and the
+  // same one React Native's iOS half settled on: CSS's blur radius is twice the
+  // gaussian's sigma, and CALayer's shadowRadius is the sigma.
+  layer.shadowRadius = shadow.blur > 0 ? shadow.blur / 2 : 0;
+
+  CGColorSpaceRef space = CGColorSpaceCreateWithName(kCGColorSpaceSRGB);
+  CGColorRef color = CGColorCreate(space, shadow.color);
+  layer.shadowColor = color;
+  CGColorRelease(color);
+  CGColorSpaceRelease(space);
+
+  CGFloat spreadRadii[8];
+  RnAppKitSpreadRadii(radii, shadow.spread, spreadRadii);
+  CGRect box = CGRectInset(layer.bounds, -shadow.spread, -shadow.spread);
+  box = CGRectOffset(box, shadow.dx, shadow.dy);
+  CGPathRef shadowPath = RnAppKitCreateRoundedPath(box, spreadRadii);
+  layer.shadowPath = shadowPath;
+
+  // Everything outside the view's own box, as an even-odd pair: the box, and a
+  // rectangle big enough to hold the whole blur around it.
+  CAShapeLayer *mask = [CAShapeLayer layer];
+  mask.fillRule = kCAFillRuleEvenOdd;
+  CGMutablePathRef maskPath = CGPathCreateMutable();
+  CGPathRef viewPath = RnAppKitCreateRoundedPath(layer.bounds, radii);
+  CGPathAddPath(maskPath, NULL, viewPath);
+  const CGFloat room = 2 * (fabs(shadow.blur) + 1);
+  CGPathRef around = RnAppKitCreateRoundedPath(CGRectInset(box, -room, -room), spreadRadii);
+  CGPathAddPath(maskPath, NULL, around);
+  mask.path = maskPath;
+  layer.mask = mask;
+
+  CGPathRelease(maskPath);
+  CGPathRelease(viewPath);
+  CGPathRelease(around);
+  CGPathRelease(shadowPath);
+  return layer;
+}
+
+// A shadow cast inward from the box's own edge.
+//
+// Built from the hole it leaves: the shadow path is a wide rectangle with the
+// clear region punched out of it, so the blur spills inward from the edge of
+// that hole, and the mask keeps all of it inside the view. The clear region is
+// the box moved by the offset and shrunk by the spread, which is what makes an
+// inset shadow with no offset a ring and one with an offset a crescent.
+static CALayer *RnAppKitInsetShadowLayer(const RnAppKitBoxShadow &shadow,
+                                         const CGFloat radii[8],
+                                         CGSize size) {
+  CALayer *layer = [CALayer layer];
+  layer.frame = CGRectMake(0, 0, size.width, size.height);
+  layer.shadowOffset = CGSizeZero;
+  layer.shadowOpacity = 1;
+  layer.shadowRadius = shadow.blur > 0 ? shadow.blur / 2 : 0;
+
+  CGColorSpaceRef space = CGColorSpaceCreateWithName(kCGColorSpaceSRGB);
+  CGColorRef color = CGColorCreate(space, shadow.color);
+  layer.shadowColor = color;
+  CGColorRelease(color);
+  CGColorSpaceRelease(space);
+
+  const CGFloat room = fabs(shadow.blur) + 1;
+  CGMutablePathRef path = CGPathCreateMutable();
+  // Square, because this one is only there to be the outside of the hole: its
+  // own corners are beyond the mask and never seen.
+  const CGFloat square[8] = {0, 0, 0, 0, 0, 0, 0, 0};
+  CGPathRef outer = RnAppKitCreateRoundedPath(CGRectInset(layer.bounds, -room, -room), square);
+  CGPathAddPath(path, NULL, outer);
+
+  CGFloat holeRadii[8];
+  RnAppKitSpreadRadii(radii, -shadow.spread, holeRadii);
+  CGRect hole = CGRectOffset(layer.bounds, shadow.dx, shadow.dy);
+  hole = CGRectInset(hole, shadow.spread, shadow.spread);
+  if (CGRectIsNull(hole) || hole.size.width < 0 || hole.size.height < 0) {
+    hole = CGRectZero;
+  }
+  CGPathRef holePath = RnAppKitCreateRoundedPath(hole, holeRadii);
+  CGPathRef reversedHole = RnAppKitCreateReversedPath(holePath);
+  CGPathAddPath(path, NULL, reversedHole);
+  layer.shadowPath = path;
+
+  CAShapeLayer *mask = [CAShapeLayer layer];
+  CGPathRef viewPath = RnAppKitCreateRoundedPath(layer.bounds, radii);
+  mask.path = viewPath;
+  layer.mask = mask;
+
+  CGPathRelease(path);
+  CGPathRelease(outer);
+  CGPathRelease(holePath);
+  CGPathRelease(reversedHole);
+  CGPathRelease(viewPath);
+  return layer;
+}
+
 // Clips to the side of the line through `p` with direction `dir` that contains
 // `inside`. Two of these give an edge the sector it owns at a corner.
 //
@@ -204,6 +414,14 @@ static void RnAppKitClipToHalfPlane(CGContextRef context,
 @property(nonatomic) CGFloat rnVerticalLength;
 @property(nonatomic) CGFloat rnHorizontalOffset;
 @property(nonatomic) CGFloat rnHorizontalLength;
+// `indicatorStyle`, as the colour core resolved it to. Black and translucent
+// until something says otherwise.
+@property(nonatomic) NSColor *rnThumbColour;
+// The hairline around it, which `indicatorStyle: 'default'` has and the other
+// two do not: iOS's default thumb is black with a white border, and that
+// border is the whole difference between `default` and `black`. Nil, or a
+// transparent colour, means none.
+@property(nonatomic) NSColor *rnThumbBorderColour;
 @end
 
 @implementation RnAppKitScrollIndicatorView
@@ -228,6 +446,28 @@ static void RnAppKitClipToHalfPlane(CGContextRef context,
   CGPathRelease(path);
 }
 
+// The hairline, stroked inside the pill it belongs to: a stroke straddles its
+// path, so the rectangle is inset by half the width and the line lands on the
+// thumb rather than half outside it.
+- (void)rnStrokePill:(NSRect)bar inContext:(CGContextRef)context {
+  NSColor *const edge = _rnThumbBorderColour;
+  if (edge == nil || edge.alphaComponent <= 0) {
+    return;
+  }
+  const CGFloat width = basalt::kScrollIndicatorBorderWidth;
+  const NSRect inner = NSInsetRect(bar, width / 2.0, width / 2.0);
+  const CGFloat radius = MAX((CGFloat)0, basalt::kScrollIndicatorThickness / 2.0 - width / 2.0);
+  CGPathRef path = CGPathCreateWithRoundedRect(inner, radius, radius, NULL);
+  CGContextSaveGState(context);
+  CGContextSetRGBStrokeColor(context, edge.redComponent, edge.greenComponent, edge.blueComponent,
+                             edge.alphaComponent);
+  CGContextSetLineWidth(context, width);
+  CGContextAddPath(context, path);
+  CGContextStrokePath(context);
+  CGContextRestoreGState(context);
+  CGPathRelease(path);
+}
+
 - (void)drawRect:(NSRect)dirtyRect {
   (void)dirtyRect;
   if (_rnVerticalLength <= 0.0 && _rnHorizontalLength <= 0.0) {
@@ -237,23 +477,33 @@ static void RnAppKitClipToHalfPlane(CGContextRef context,
   const NSSize size = self.bounds.size;
   const CGFloat thickness = basalt::kScrollIndicatorThickness;
   const CGFloat inset = basalt::kScrollIndicatorInset;
-  // Neutral and translucent, so it reads over light and dark content alike --
-  // the same colour the GTK and Win32 hosts use.
-  CGContextSetRGBFillColor(context, 0.0, 0.0, 0.0, 0.35);
+  // Neutral and translucent, so it reads over light and dark content alike, and
+  // white instead when `indicatorStyle` asked for it. Core decides which, so
+  // the GTK and Win32 hosts answer the prop with the same colour.
+  NSColor *const thumb = _rnThumbColour != nil
+      ? _rnThumbColour
+      : [NSColor colorWithSRGBRed:0.0 green:0.0 blue:0.0 alpha:basalt::kScrollIndicatorAlpha];
+  CGContextSetRGBFillColor(context,
+                           thumb.redComponent,
+                           thumb.greenComponent,
+                           thumb.blueComponent,
+                           thumb.alphaComponent);
 
   if (_rnVerticalLength > 0.0) {
-    [self rnFillPill:NSMakeRect(size.width - thickness - inset,
-                                _rnVerticalOffset,
-                                thickness,
-                                _rnVerticalLength)
-           inContext:context];
+    const NSRect bar = NSMakeRect(size.width - thickness - inset,
+                                  _rnVerticalOffset,
+                                  thickness,
+                                  _rnVerticalLength);
+    [self rnFillPill:bar inContext:context];
+    [self rnStrokePill:bar inContext:context];
   }
   if (_rnHorizontalLength > 0.0) {
-    [self rnFillPill:NSMakeRect(_rnHorizontalOffset,
-                                size.height - thickness - inset,
-                                _rnHorizontalLength,
-                                thickness)
-           inContext:context];
+    const NSRect bar = NSMakeRect(_rnHorizontalOffset,
+                                  size.height - thickness - inset,
+                                  _rnHorizontalLength,
+                                  thickness);
+    [self rnFillPill:bar inContext:context];
+    [self rnStrokePill:bar inContext:context];
   }
 }
 
@@ -265,13 +515,34 @@ static void RnAppKitClipToHalfPlane(CGContextRef context,
   std::vector<float> _highlights;
   std::vector<bool> _highlightFilled;
   NSString *_roleName;
+  // The origin React Native gave this view, which is not where the view sits
+  // when its paragraph moved its text. See setRnFrameX:y:width:height:.
+  NSPoint _rnOrigin;
   RnTextLayout *_textLayout;
+  // `<Text selectable>`; the range itself lives on the layout, which is what
+  // draws it. See setRnTextSelectable.
+  BOOL _textSelectable;
   CGImageRef _image;
+  // An animated image's frames, their delays as the file carried them, and how
+  // many times round. See setRnImageFrames:delaysMs:loopCount:. `_image` is
+  // whichever frame is showing, so everything that draws stays unchanged.
+  NSArray *_imageFrames;
+  std::vector<unsigned> _imageDelays;
+  NSUInteger _imageLoopCount;
+  NSUInteger _imageFrame;
+  double _imageElapsedMs;
+  NSTimer *_imageTimer;
   NSColor *_imageTint;
   RnAppKitImageFit _imageFit;
+  CGFloat _imageBlur;
+  // The blurred copy of _image, at the device pixel size it was last drawn at,
+  // or NULL when there is none to reuse. See -rnBlurredImageForSize:scale:.
+  CGImageRef _imageBlurred;
   BOOL _hasBackgroundColor;
   CGFloat _backgroundComponents[4];
   CGFloat _opacity;
+  // The `opacity()` out of the filter list, 1 when there is none.
+  CGFloat _filterOpacity;
   BOOL _clipsChildren;
   CGFloat _cornerRadius;
   // Eight floats: a horizontal and a vertical radius per corner, in the order
@@ -285,6 +556,39 @@ static void RnAppKitClipToHalfPlane(CGContextRef context,
   // Four RGBA quadruples, in the same edge order.
   CGFloat _borderColors[16];
   BOOL _hasBorders;
+  // CSS's outline, and the layer it became. Zero width is none.
+  CGFloat _outlineWidth;
+  CGFloat _outlineOffset;
+  CGFloat _outlineColor[4];
+  RnAppKitBorderStyle _outlineStyle;
+  CAShapeLayer *_outlineLayer;
+  // The resolved `filter`, as the Core Image filters it became, or nil.
+  NSArray<CIFilter *> *_filters;
+  // `hitSlop`, top, right, bottom, left. Read only by the hit test.
+  CGFloat _hitSlop[4];
+  BOOL _hasHitSlop;
+  RnAppKitBorderStyle _borderStyle;
+  std::vector<RnAppKitBoxShadow> _boxShadows;
+  // The `backgroundImage` gradients, each with its own stops.
+  std::vector<RnAppKitGradientRecord> _gradients;
+  NSMutableArray<CALayer *> *_boxShadowLayers;
+  // The second and later `dropShadow()` entries, a layer each. See
+  // RnAppKitFilterShadowLayer.
+  NSMutableArray<CALayer *> *_filterShadowLayers;
+  std::vector<RnAppKitFilterShadow> _extraFilterShadows;
+  NSString *_cursorName;
+  // `mixBlendMode`: the keyword asked for, and the Core Image filter it became.
+  // The `dropShadow()` from `filter`, as the layer's own shadow.
+  RnAppKitFilterShadow _filterShadow;
+  NSString *_blendModeName;
+  NSString *_blendFilterName;
+  // The last text this view announced as a live region. See -rnAnnounce:.
+  NSString *_lastAnnouncement;
+  // The tags of the views in this one's labelled-by relation, for the tree dump.
+  std::vector<NSInteger> _labelledBy;
+  // The resolved `experimental_accessibilityOrder`, by tag, for the dump.
+  std::vector<NSInteger> _accessibilityOrder;
+  NSCursor *_cursor;
   CATransform3D _transform;
   BOOL _hasTransform;
   BOOL _hidesBackFace;
@@ -295,6 +599,13 @@ static void RnAppKitClipToHalfPlane(CGContextRef context,
   NSTrackingArea *_rnHoverTrackingArea;
   // Only a ScrollView with something to indicate has one.
   RnAppKitScrollIndicatorView *_indicators;
+  // `indicatorStyle`'s colour, held here because the overlay above is made and
+  // thrown away as the content grows past the viewport and shrinks back inside
+  // it. Nil until a prop says otherwise, which the drawing reads as the
+  // default.
+  NSColor *_rnIndicatorColour;
+  // The hairline around the thumb, which only `indicatorStyle: 'default'` has.
+  NSColor *_rnIndicatorBorderColour;
 }
 
 + (instancetype)viewWithTag:(NSInteger)tag {
@@ -305,12 +616,28 @@ static void RnAppKitClipToHalfPlane(CGContextRef context,
 
 - (void)dealloc {
   CGImageRelease(_image);
+  CGImageRelease(_imageBlurred);
+  // A scheduled timer holds its target; this one holds `self` weakly so a view
+  // released mid-animation is not kept alive by it, and the timer still has to
+  // go or it fires into nothing once a tenth of a second.
+  [_imageTimer invalidate];
+  // An outset shadow's layer lives in the superlayer, so it outlives this view
+  // unless it is taken out. Ordinarily -viewDidMoveToSuperview has already done
+  // it; this is for a view released without being unmounted first.
+  for (CALayer *layer in _boxShadowLayers) {
+    [layer removeFromSuperlayer];
+  }
+  // The outline can be in the parent's layer for the same reason, so it has to
+  // come out too.
+  [_outlineLayer removeFromSuperlayer];
 }
 
 - (instancetype)initWithFrame:(NSRect)frame {
   self = [super initWithFrame:frame];
   if (self != nil) {
+    _rnOrigin = frame.origin;
     _opacity = 1.0;
+    _filterOpacity = 1.0;
     _imageFit = RnAppKitImageFitCover;
     _transform = CATransform3DIdentity;
     // Layer-backed from the start rather than on demand: a view that acquires a
@@ -330,7 +657,15 @@ static void RnAppKitClipToHalfPlane(CGContextRef context,
 }
 
 - (void)setRnFrameX:(CGFloat)x y:(CGFloat)y width:(CGFloat)width height:(CGFloat)height {
-  self.frame = NSMakeRect(x, y, width, height);
+  // What React Native decided, kept because the view may not sit there: a view
+  // inline in a paragraph is moved by whatever `textAlignVertical` did to the
+  // text, and when that changes it has to be placed again from this rather
+  // than from where it currently is. See rnPlaceInlineChildren.
+  _rnOrigin = NSMakePoint(x, y);
+  self.frame = NSMakeRect(x, y + [self rnParentTextOffset], width, height);
+  // A box that changed height changes where a bottom- or middle-aligned
+  // paragraph sits, and therefore where the views inline in it sit.
+  [self rnPlaceInlineChildren];
   // A mask layer is built against the bounds, so a resize invalidates it. The
   // uniform case is a plain cornerRadius and needs nothing.
   if (self.layer.mask != nil) {
@@ -340,6 +675,16 @@ static void RnAppKitClipToHalfPlane(CGContextRef context,
   if (_hasBorders) {
     self.needsDisplay = YES;
   }
+  // And a box shadow's path is in the view's own coordinates, so every one of
+  // them has to be rebuilt: a card that grew would otherwise keep the shadow of
+  // the size it used to be. The outline is in the same position.
+  if (!_boxShadows.empty()) {
+    [self rnRebuildBoxShadowLayers];
+    [self rnRebuildFilterShadowLayers];
+  }
+  if (_outlineWidth > 0) {
+    [self rnRebuildOutlineLayer];
+  }
 }
 
 - (void)setRnBackgroundColorRed:(CGFloat)red
@@ -431,11 +776,43 @@ static NSAccessibilityRole RnAccessibilityRoleFor(NSString *name) {
   return role != nil ? role : NSAccessibilityGroupRole;
 }
 
+// The subrole for a React Native role, or nil.
+//
+// macOS says some things with a role and the rest with a *subrole*, and four of
+// React Native's roles are in the second group: the role above reports a search
+// field as a text field, a switch and a toggle button as check boxes, and a tab
+// as a radio button, each of which loses the part that says what it is. GTK
+// needs none of this -- `GTK_ACCESSIBLE_ROLE_SEARCH_BOX`, `_SWITCH` and `_TAB`
+// are roles there -- which is why this was a macOS entry.
+//
+// Nothing else gets one. A subrole that is not one of AppKit's own tells
+// VoiceOver less than no subrole, and a view with no subrole is read by its
+// role, which is already the nearest thing.
+static NSAccessibilitySubrole RnAccessibilitySubroleFor(NSString *name) {
+  static NSDictionary<NSString *, NSAccessibilitySubrole> *subroles = nil;
+  static dispatch_once_t once;
+  dispatch_once(&once, ^{
+    subroles = @{
+      @"search" : NSAccessibilitySearchFieldSubrole,
+      // A switch and a toggle button are both check boxes by role, and these
+      // are what tell them apart: "switch" and "toggle".
+      @"switch" : NSAccessibilitySwitchSubrole,
+      @"togglebutton" : NSAccessibilityToggleSubrole,
+      // A tab is a radio button by role, which reads oddly on its own.
+      @"tab" : NSAccessibilityTabButtonSubrole,
+    };
+  });
+  return subroles[name];
+}
+
 - (void)setRnAccessibleRole:(NSString *)role {
   _roleName = role.length > 0 ? [role copy] : nil;
 
   if (_roleName == nil) {
     self.accessibilityRole = NSAccessibilityGroupRole;
+    // Cleared as well as set: a view whose role prop goes away must not keep
+    // the subrole its last role carried.
+    self.accessibilitySubrole = nil;
     // A plain <View> is scenery. Leaving every one of them in the tree would
     // bury the handful that mean something under hundreds that do not.
     self.accessibilityElement = NO;
@@ -444,9 +821,207 @@ static NSAccessibilityRole RnAccessibilityRoleFor(NSString *name) {
 
   const NSAccessibilityRole mapped = RnAccessibilityRoleFor(_roleName);
   self.accessibilityRole = mapped;
+  self.accessibilitySubrole = RnAccessibilitySubroleFor(_roleName);
   self.accessibilityElement = mapped != NSAccessibilityUnknownRole;
 }
 
+// The text of one view and everything under it, appended to `out`.
+//
+// Paragraphs only. A label can stand in for text, and the mounting manager
+// prefers one before asking for this, as the GTK host does -- which keeps the
+// rule in one place per host rather than in the view layer, where the props are
+// not.
+static void RnAppKitCollectText(RnAppKitView *view, NSMutableString *out) {
+  NSString *own = view.rnOwnText;
+  if (own.length > 0) {
+    if (out.length > 0) {
+      [out appendString:@" "];
+    }
+    [out appendString:own];
+  }
+  for (RnAppKitView *child in [view rnChildrenInPaintOrder]) {
+    RnAppKitCollectText(child, out);
+  }
+}
+
+- (NSString *)rnOwnText {
+  return _textLayout.attributedString.string;
+}
+
+- (NSString *)rnCollectedText {
+  NSMutableString *out = [NSMutableString string];
+  RnAppKitCollectText(self, out);
+  return out;
+}
+
+- (void)rnAnnounce:(NSString *)text assertive:(BOOL)assertive {
+  if (text.length == 0) {
+    return;
+  }
+  _lastAnnouncement = [text copy];
+  // Posted against the application rather than this view: an announcement is not
+  // about an element, and AppKit documents the app as the element to post it on.
+  NSAccessibilityPostNotificationWithUserInfo(
+      NSApp,
+      NSAccessibilityAnnouncementRequestedNotification,
+      @{
+        NSAccessibilityAnnouncementKey : text,
+        NSAccessibilityPriorityKey : @(assertive ? NSAccessibilityPriorityHigh
+                                                 : NSAccessibilityPriorityMedium),
+      });
+}
+
+- (NSString *)rnLastAnnouncement {
+  return _lastAnnouncement;
+}
+
+// --- What a screen reader reads out of a paragraph ---------------------------
+//
+// A `<Text>` here is an `RnTextLayout` drawn into a view, not an NSTextField,
+// so VoiceOver saw an element with a label and nothing to move through: no
+// caret, no lines, and no sign of a selection the person had just dragged out
+// with the mouse. backlog/text.md's selection entry records that half as the
+// one left after the selecting worked, and these are the AppKit side of it.
+//
+// Every index is a UTF-16 code unit, which is what `NSAttributedString`
+// counts, what `RnTextLayout.selection` already holds, and what NSAccessibility
+// asks in -- so unlike the GTK half, which converts bytes to characters,
+// nothing here converts. The ranges are clamped rather than trusted:
+// VoiceOver asks about ranges a paragraph has shrunk out of.
+//
+// `accessibilityValue` is deliberately left alone. React Native models it as a
+// range for a slider and as the checked state for a checkbox, both of which
+// -applyAccessibility already puts there; a paragraph's string is its
+// accessibilityLabel, which is set from the same place.
+- (NSString *)rnAccessibilityText {
+  NSString *text = _textLayout.attributedString.string;
+  return text != nil ? text : @"";
+}
+
+- (NSRange)rnClampedRange:(NSRange)range {
+  const NSUInteger length = [self rnAccessibilityText].length;
+  if (range.location >= length) {
+    return NSMakeRange(length, 0);
+  }
+  return NSMakeRange(range.location, MIN(range.length, length - range.location));
+}
+
+- (NSInteger)accessibilityNumberOfCharacters {
+  return (NSInteger)[self rnAccessibilityText].length;
+}
+
+- (NSRange)accessibilityVisibleCharacterRange {
+  // All of it: a paragraph here is drawn whole or clipped by `numberOfLines`,
+  // and the clipped case already reports the shown lines through
+  // -lineRangesForWidth:, which is what the line queries below use.
+  return NSMakeRange(0, [self rnAccessibilityText].length);
+}
+
+- (NSString *)accessibilityStringForRange:(NSRange)range {
+  const NSRange wanted = [self rnClampedRange:range];
+  if (wanted.length == 0) {
+    return @"";
+  }
+  return [[self rnAccessibilityText] substringWithRange:wanted];
+}
+
+- (NSAttributedString *)accessibilityAttributedStringForRange:(NSRange)range {
+  const NSRange wanted = [self rnClampedRange:range];
+  if (_textLayout == nil || wanted.length == 0) {
+    return [[NSAttributedString alloc] initWithString:@""];
+  }
+  // The real attributed string, so the font and colour of each run reach
+  // VoiceOver rather than a plain copy of the characters.
+  return [_textLayout.attributedString attributedSubstringFromRange:wanted];
+}
+
+- (NSString *)accessibilitySelectedText {
+  NSString *selected = [_textLayout selectedText];
+  return selected != nil ? selected : @"";
+}
+
+- (NSRange)accessibilitySelectedTextRange {
+  if (_textLayout == nil) {
+    return NSMakeRange(0, 0);
+  }
+  return [self rnClampedRange:_textLayout.selection];
+}
+
+- (NSArray<NSValue *> *)accessibilitySelectedTextRanges {
+  return @[ [NSValue valueWithRange:[self accessibilitySelectedTextRange]] ];
+}
+
+// The lines are Core Text's own, at the width this view is, so they are the
+// ones on the screen rather than a second guess at where the text wrapped.
+- (NSArray<NSValue *> *)rnAccessibilityLineRanges {
+  if (_textLayout == nil) {
+    return @[];
+  }
+  return [_textLayout lineRangesForWidth:self.bounds.size.width];
+}
+
+- (NSInteger)accessibilityLineForIndex:(NSInteger)index {
+  NSArray<NSValue *> *lines = [self rnAccessibilityLineRanges];
+  for (NSUInteger line = 0; line < lines.count; line++) {
+    const NSRange range = lines[line].rangeValue;
+    if ((NSUInteger)index < NSMaxRange(range)) {
+      return (NSInteger)line;
+    }
+  }
+  // Past the end, which is where a caret after the last character sits.
+  return lines.count > 0 ? (NSInteger)lines.count - 1 : 0;
+}
+
+- (NSRange)accessibilityRangeForLine:(NSInteger)line {
+  NSArray<NSValue *> *lines = [self rnAccessibilityLineRanges];
+  if (line < 0 || (NSUInteger)line >= lines.count) {
+    return NSMakeRange(NSNotFound, 0);
+  }
+  return lines[(NSUInteger)line].rangeValue;
+}
+
+- (NSRange)accessibilityRangeForIndex:(NSInteger)index {
+  const NSUInteger length = [self rnAccessibilityText].length;
+  if (index < 0 || (NSUInteger)index >= length) {
+    return NSMakeRange(NSNotFound, 0);
+  }
+  // One composed character, so an emoji or a flag is one step rather than two
+  // halves of a surrogate pair.
+  return [[self rnAccessibilityText] rangeOfComposedCharacterSequenceAtIndex:(NSUInteger)index];
+}
+
+- (void)setRnLabelledBy:(NSArray<RnAppKitView *> *)labels {
+  _labelledBy.clear();
+  for (RnAppKitView *label in labels) {
+    _labelledBy.push_back(label.rnTag);
+  }
+  // The first, AppKit's property being one element rather than a list. Nil when
+  // there is none, which is how an element says it has no such relation.
+  self.accessibilityTitleUIElement = labels.firstObject;
+  // And a view named by another is worth announcing: the label is on the other
+  // view, so without this a field whose only name comes from its caption stays
+  // out of the tree.
+  if (labels.count > 0) {
+    self.accessibilityElement = YES;
+  }
+}
+
+- (void)setRnAccessibilityOrder:(NSArray<RnAppKitView *> *)children {
+  _accessibilityOrder.clear();
+  for (RnAppKitView *child in children) {
+    _accessibilityOrder.push_back(child.rnTag);
+  }
+  // `accessibilityChildren` replaces the children AppKit would have found by
+  // walking the view hierarchy, which is exactly what the prop asks for: a
+  // reading order that is not the mount order. Nil puts the hierarchy back,
+  // which is what a view that stopped asking means.
+  //
+  // GTK says the same thing as a relation -- `aria-flowto` from this view to
+  // each child -- rather than by replacing the children, because GTK's
+  // accessible tree follows the widget tree and has no equivalent override.
+  self.accessibilityChildren = children.count > 0 ? children : nil;
+}
+
 - (void)setRnAccessibleLabel:(NSString *)label hint:(NSString *)hint {
   self.accessibilityLabel = label.length > 0 ? label : nil;
   // `accessibilityHelp`, not `accessibilityValue`: React Native's hint is the
@@ -460,6 +1035,45 @@ static NSAccessibilityRole RnAccessibilityRoleFor(NSString *name) {
   }
 }
 
+// `accessibilityValue`, which React Native models as a range (min, max, now) and
+// a text form that a screen reader prefers over the number.
+//
+// AppKit has `accessibilityMinValue` and `accessibilityMaxValue` for the range,
+// and one `accessibilityValue` that carries either the number or the text.
+// Setting nil is how an element says it has no such value, which matters because
+// an absent part must stay absent: a view that never said what its range is must
+// not be announced as sitting at the bottom of one.
+//
+// **This shares `accessibilityValue` with the checked state**, which AppKit
+// expresses as an element's value the way a checkbox does. An explicit
+// accessibilityValue wins, the app having said it outright, and the order below
+// is what decides that: state is applied first and this second. Both reaching
+// for the same property is an AppKit fact rather than a choice here.
+- (void)setRnAccessibleValueMin:(NSNumber *)min
+                            max:(NSNumber *)max
+                            now:(NSNumber *)now
+                           text:(NSString *)text {
+  self.accessibilityMinValue = min;
+  self.accessibilityMaxValue = max;
+
+  // The text form first: "Tuesday" reads better than "3", which is the whole
+  // reason React Native carries both.
+  if (text.length > 0) {
+    self.accessibilityValue = text;
+  } else if (now != nil) {
+    self.accessibilityValue = now;
+  } else if (min != nil || max != nil) {
+    // A range with no position in it. Leaving a stale value here would be worse
+    // than leaving none.
+    self.accessibilityValue = nil;
+  }
+
+  if (min != nil || max != nil || now != nil || text.length > 0) {
+    // Worth announcing, the same reason a label alone makes a view an element.
+    self.accessibilityElement = YES;
+  }
+}
+
 - (void)setRnAccessibleStateDisabled:(RnAppKitAccessibleFlag)disabled
                              checked:(RnAppKitAccessibleFlag)checked
                             selected:(RnAppKitAccessibleFlag)selected
@@ -487,6 +1101,26 @@ static NSAccessibilityRole RnAccessibilityRoleFor(NSString *name) {
   (void)busy;
 }
 
+- (void)setRnTestId:(NSString *)testId {
+  if (_rnTestId == testId || [_rnTestId isEqualToString:testId]) {
+    return;
+  }
+  _rnTestId = [testId copy];
+  // The platform half, and the reason this is a setter rather than a plain
+  // property: `accessibilityIdentifier` is what XCTest and the Accessibility
+  // Inspector look a view up by, and it is the nearest thing macOS has to
+  // UIA's automation id. An empty `testID` sets nil rather than an empty
+  // string, which is what AppKit means by "no identifier".
+  self.accessibilityIdentifier = _rnTestId.length > 0 ? _rnTestId : nil;
+}
+
+- (void)setRnAccessibleModal:(BOOL)modal {
+  _rnAccessibleModal = modal;
+  // AppKit's own flag, which VoiceOver reads: inside a modal element it stops
+  // offering the siblings behind it.
+  self.accessibilityModal = modal;
+}
+
 - (void)setRnAccessibleHidden:(BOOL)hidden {
   if (hidden) {
     self.accessibilityElement = NO;
@@ -523,6 +1157,8 @@ static NSAccessibilityRole RnAccessibilityRoleFor(NSString *name) {
 
   if (_indicators == nil) {
     _indicators = [[RnAppKitScrollIndicatorView alloc] initWithFrame:self.bounds];
+    _indicators.rnThumbColour = _rnIndicatorColour;
+    _indicators.rnThumbBorderColour = _rnIndicatorBorderColour;
     [self addSubview:_indicators positioned:NSWindowAbove relativeTo:nil];
   }
 
@@ -544,6 +1180,42 @@ static NSAccessibilityRole RnAccessibilityRoleFor(NSString *name) {
   _indicators.needsDisplay = YES;
 }
 
+- (void)setRnScrollIndicatorColourRed:(CGFloat)red
+                                green:(CGFloat)green
+                                 blue:(CGFloat)blue
+                                alpha:(CGFloat)alpha {
+  // Held on this view rather than only on the overlay, because the overlay is
+  // made and thrown away as the content grows past the viewport and shrinks
+  // back inside it -- a colour kept only there would be lost each time.
+  _rnIndicatorColour = [NSColor colorWithSRGBRed:red green:green blue:blue alpha:alpha];
+  if (_indicators != nil && ![_indicators.rnThumbColour isEqual:_rnIndicatorColour]) {
+    _indicators.rnThumbColour = _rnIndicatorColour;
+    _indicators.needsDisplay = YES;
+  }
+}
+
+- (NSColor *)rnScrollIndicatorColour {
+  return _rnIndicatorColour;
+}
+
+- (void)setRnScrollIndicatorBorderColourRed:(CGFloat)red
+                                      green:(CGFloat)green
+                                       blue:(CGFloat)blue
+                                      alpha:(CGFloat)alpha {
+  // Held here for the reason the fill is: the overlay is made and thrown away
+  // as the content grows past the viewport and shrinks back inside it, so a
+  // colour kept only there would be lost each time.
+  _rnIndicatorBorderColour = [NSColor colorWithSRGBRed:red green:green blue:blue alpha:alpha];
+  if (_indicators != nil && ![_indicators.rnThumbBorderColour isEqual:_rnIndicatorBorderColour]) {
+    _indicators.rnThumbBorderColour = _rnIndicatorBorderColour;
+    _indicators.needsDisplay = YES;
+  }
+}
+
+- (NSColor *)rnScrollIndicatorBorderColour {
+  return _rnIndicatorBorderColour;
+}
+
 static const char *RnAppKitImageFitName(RnAppKitImageFit fit) {
   switch (fit) {
     case RnAppKitImageFitContain:
@@ -568,7 +1240,54 @@ static const char *RnAppKitImageFitName(RnAppKitImageFit fit) {
   [self setNeedsDisplay:YES];
 }
 
+- (void)setRnImageBlur:(CGFloat)radius {
+  const CGFloat wanted = radius > 0 ? radius : 0;
+  if (_imageBlur == wanted) {
+    return;
+  }
+  _imageBlur = wanted;
+  CGImageRelease(_imageBlurred);
+  _imageBlurred = nullptr;
+  [self setNeedsDisplay:YES];
+}
+
+// The blurred copy to draw in place of the image, or NULL when there is no blur
+// or Core Image would not produce one.
+//
+// Kept on the view because `drawRect:` runs on every frame of a live resize and
+// a Core Image round trip per frame is not free, where the GTK side's blur is a
+// render node the GPU applies for nothing. The cache is keyed by the pixel size
+// it was made at, and thrown away whenever the image or the radius changes.
+- (CGImageRef)rnBlurredImageForSize:(CGSize)size scale:(CGFloat)scale {
+  if (_image == nullptr || _imageBlur <= 0) {
+    return nullptr;
+  }
+  const size_t width = (size_t)lround(size.width * scale);
+  const size_t height = (size_t)lround(size.height * scale);
+  if (width == 0 || height == 0) {
+    return nullptr;
+  }
+  if (_imageBlurred != nullptr && CGImageGetWidth(_imageBlurred) == width &&
+      CGImageGetHeight(_imageBlurred) == height) {
+    return _imageBlurred;
+  }
+  CGImageRelease(_imageBlurred);
+  _imageBlurred = RnBlurredImageCreate(_image, width, height, _imageBlur * scale / 2.0);
+  return _imageBlurred;
+}
+
 - (void)setRnImage:(CGImageRef)image fit:(RnAppKitImageFit)fit {
+  // An animation owns `_image`, and the mounting manager re-applies the first
+  // frame on every mutation that touched this view -- a layout-only one
+  // included. Taking it would restart the GIF on every resize, so what is
+  // taken here is the fit alone.
+  if (_imageFrames.count > 1 && image == (__bridge CGImageRef)_imageFrames.firstObject) {
+    if (_imageFit != fit) {
+      _imageFit = fit;
+      self.needsDisplay = YES;
+    }
+    return;
+  }
   if (_image == image && _imageFit == fit) {
     return;
   }
@@ -577,10 +1296,176 @@ static const char *RnAppKitImageFitName(RnAppKitImageFit fit) {
   CGImageRef previous = _image;
   _image = image != nullptr ? CGImageRetain(image) : nullptr;
   CGImageRelease(previous);
+  CGImageRelease(_imageBlurred);
+  _imageBlurred = nullptr;
   _imageFit = fit;
   self.needsDisplay = YES;
 }
 
+// The frames of an animated image. See the header.
+- (void)setRnImageFrames:(NSArray *)frames
+                delaysMs:(NSArray<NSNumber *> *)delaysMs
+               loopCount:(NSUInteger)loopCount {
+  // The same animation again, which is what a layout-only mutation produces:
+  // the loader hands back the arrays it cached, so this is a pointer compare,
+  // and the animation keeps its place rather than starting over on every
+  // resize.
+  if (_imageFrames == frames && _imageLoopCount == loopCount) {
+    return;
+  }
+
+  [_imageTimer invalidate];
+  _imageTimer = nil;
+  _imageFrames = frames.count > 1 ? frames : nil;
+  _imageLoopCount = _imageFrames != nil ? loopCount : 0;
+  _imageFrame = 0;
+  _imageElapsedMs = 0.0;
+  _imageDelays.clear();
+  if (_imageFrames == nil) {
+    return;
+  }
+  for (NSNumber *delay in delaysMs) {
+    _imageDelays.push_back(delay.unsignedIntValue);
+  }
+
+  [self rnShowImageFrame:0];
+}
+
+- (void)rnStartImageAnimation {
+  if (_imageFrames.count < 2 || _imageTimer != nil) {
+    return;
+  }
+  [self rnScheduleImageFrameIn:[self rnAdvanceImageAnimationBy:0.0]];
+}
+
+- (NSUInteger)rnImageFrameIndex {
+  return _imageFrame;
+}
+
+- (double)rnAdvanceImageAnimationBy:(double)milliseconds {
+  if (_imageFrames.count < 2 || _imageDelays.size() != _imageFrames.count) {
+    return 0.0;
+  }
+  if (milliseconds > 0.0) {
+    _imageElapsedMs += milliseconds;
+  }
+
+  const basalt::ImageAnimationStep step =
+      basalt::imageAnimationStep(_imageDelays, static_cast<unsigned>(_imageLoopCount),
+                                 static_cast<std::uint64_t>(_imageElapsedMs));
+  if (step.frame != _imageFrame) {
+    [self rnShowImageFrame:step.frame];
+  }
+  return step.nextInMs;
+}
+
+// Puts one frame in `_image`, so that everything which draws an image draws
+// this one and nothing else in the view has to know about animation.
+- (void)rnShowImageFrame:(NSUInteger)index {
+  if (index >= _imageFrames.count) {
+    return;
+  }
+  _imageFrame = index;
+
+  CGImageRef previous = _image;
+  _image = CGImageRetain((__bridge CGImageRef)_imageFrames[index]);
+  CGImageRelease(previous);
+  // The blur is of a frame, so it goes with the frame.
+  CGImageRelease(_imageBlurred);
+  _imageBlurred = nullptr;
+  self.needsDisplay = YES;
+}
+
+- (void)rnScheduleImageFrameIn:(double)milliseconds {
+  [_imageTimer invalidate];
+  _imageTimer = nil;
+  if (milliseconds <= 0.0) {
+    return;
+  }
+
+  // An NSTimer rather than a CADisplayLink, which is what the scrolling uses.
+  // A frame is due at a time the file names, so there is nothing to interpolate
+  // and nothing to do on the frames in between; a display link would wake this
+  // view sixty times a second to show the same picture.
+  //
+  // Weakly, so a view released mid-animation is not kept alive by its own
+  // timer.
+  __weak RnAppKitView *weakSelf = self;
+  _imageTimer = [NSTimer scheduledTimerWithTimeInterval:milliseconds / 1000.0
+                                                repeats:NO
+                                                  block:^(NSTimer *timer) {
+                                                    RnAppKitView *view = weakSelf;
+                                                    if (view == nil) {
+                                                      [timer invalidate];
+                                                      return;
+                                                    }
+                                                    // By the delay asked for
+                                                    // rather than by the wall
+                                                    // clock: a late timer makes
+                                                    // the animation run slow
+                                                    // instead of skipping
+                                                    // frames, which is the
+                                                    // kinder failure for a
+                                                    // four-frame spinner.
+                                                    const double next =
+                                                        [view rnAdvanceImageAnimationBy:milliseconds];
+                                                    [view rnScheduleImageFrameIn:next];
+                                                  }];
+}
+
+// `image`, blurred, at `width` by `height` device pixels.
+//
+// Blurred at the size it will be drawn rather than in its own pixels, so that
+// the radius is a distance on screen. Blurring in the source's pixels instead
+// would make one prop almost invisible on a large photograph and overwhelming
+// on an icon, and would not agree with the GTK side, which pushes a GSK blur
+// node in widget coordinates.
+//
+// Sigma is half the radius, which is measured rather than chosen. A hard edge
+// blurred by `gtk_snapshot_push_blur` comes out at sigma = 0.47 * radius under
+// GTK's GL renderer, measured off a downloaded texture; React Native's own iOS
+// path blurs with three box convolutions of
+// `floor((radius * scale * 3 * sqrt(2 * pi) / 4 + 0.5) / 2) | 1`, whose variance
+// works out to the same 0.47. Half the radius is what both of those agree on,
+// within the few percent between a true gaussian and three boxes, and it is what
+// the test here measures on the same kind of edge.
+static CGImageRef RnBlurredImageCreate(CGImageRef image,
+                                       size_t width,
+                                       size_t height,
+                                       CGFloat sigma) {
+  CIImage *source = [CIImage imageWithCGImage:image];
+  const CGRect extent = source.extent;
+  if (extent.size.width <= 0 || extent.size.height <= 0) {
+    return nullptr;
+  }
+  CIImage *scaled = [source
+      imageByApplyingTransform:CGAffineTransformMakeScale((CGFloat)width / extent.size.width,
+                                                          (CGFloat)height / extent.size.height)];
+  // Clamped before the blur and cropped after it. Without the clamp the edges
+  // blur out into transparency, so a `cover` photograph would gain a soft frame
+  // it has on no other platform: iOS extends its edge pixels instead
+  // (kvImageEdgeExtend) and GSK blurs inside the clip.
+  CIImage *blurred =
+      [[scaled imageByClampingToExtent] imageByApplyingGaussianBlurWithSigma:sigma];
+  const CGRect box = CGRectMake(0, 0, (CGFloat)width, (CGFloat)height);
+
+  // One context for the process: building a CIContext is the expensive part of
+  // Core Image, not running the filter.
+  //
+  // Colour management off, which is the difference between this looking like the
+  // other two platforms and not. Core Image converts to linear light by default
+  // and blurs there; GSK blurs the encoded pixels, and React Native's iOS path
+  // runs vImageBoxConvolve over 8-bit sRGB bytes. Measured on a black-to-white
+  // edge, the managed blur spreads about 1.2 times as far as either. Unmanaged,
+  // the filter works on the sample values as given, like both of them.
+  static CIContext *renderer = nil;
+  static dispatch_once_t once;
+  dispatch_once(&once, ^{
+    renderer = [CIContext contextWithOptions:@{kCIContextWorkingColorSpace : (id)[NSNull null]}];
+  });
+  return [renderer createCGImage:blurred fromRect:box];
+}
+
 // Where the image lands inside the frame.
 //
 // The same arithmetic as the GTK side's, deliberately -- two platforms
@@ -622,11 +1507,131 @@ static const char *RnAppKitImageFitName(RnAppKitImageFit fit) {
 }
 
 - (void)setRnTextLayout:(id)layout {
-  _textLayout = (RnTextLayout *)layout;
+  // A selection survives a rebuild of the same text and not a change to it.
+  // Every mutation that touches a paragraph builds a new layout here -- a
+  // parent re-rendering is enough -- and dropping the selection each time would
+  // make it impossible to keep one in a live app; keeping it across *different*
+  // text would highlight whatever now sits at those offsets. The GTK side draws
+  // the same line in rn_view_set_text_layout.
+  RnTextLayout *replacement = (RnTextLayout *)layout;
+  const BOOL sameText = _textLayout != nil && replacement != nil &&
+      [_textLayout.attributedString.string isEqualToString:replacement.attributedString.string];
+  const NSRange carried = sameText ? _textLayout.selection : NSMakeRange(0, 0);
+
+  _textLayout = replacement;
+  if (_textLayout != nil) {
+    _textLayout.selection = carried;
+  }
   // A layer-backed view with a drawRect: gets its contents from that draw, and
   // only redraws when told. Without this the first paragraph appears and no
   // later one ever does.
   self.needsDisplay = YES;
+  // A new layout can be a new text height, and a bottom- or middle-aligned
+  // paragraph then sits somewhere else -- so the views inline in it do too.
+  [self rnPlaceInlineChildren];
+}
+
+- (void)setRnTextSelectable:(BOOL)selectable {
+  if (_textSelectable == selectable) {
+    return;
+  }
+  _textSelectable = selectable;
+  // A paragraph that stops being selectable keeps no highlight: the prop going
+  // false is an app saying this text is not to be selected, and leaving the
+  // last selection drawn would be the one state nothing can clear.
+  if (!selectable && _textLayout != nil && _textLayout.selection.length > 0) {
+    _textLayout.selection = NSMakeRange(0, 0);
+    self.needsDisplay = YES;
+  }
+}
+
+- (BOOL)rnTextSelectable {
+  return _textSelectable;
+}
+
+- (CGFloat)rnTextVerticalOffset {
+  if (_textLayout == nil) {
+    return 0;
+  }
+  const CGSize box = self.bounds.size;
+  return [_textLayout verticalOffsetForSize:CGSizeMake(box.width - _rnTextInset.left -
+                                                           _rnTextInset.right,
+                                                       box.height - _rnTextInset.top -
+                                                           _rnTextInset.bottom)];
+}
+
+// How far this view's parent moved its text, which is how far this view has to
+// move with it. Only the vertical alignment: an attachment's frame already
+// carries the paragraph's padding, React Native having added the content insets
+// to it in `ParagraphShadowNode::layout`.
+- (CGFloat)rnParentTextOffset {
+  RnAppKitView *parent = [self.superview isKindOfClass:[RnAppKitView class]]
+      ? (RnAppKitView *)self.superview
+      : nil;
+  return parent == nil ? 0 : [parent rnTextVerticalOffset];
+}
+
+// Puts every inline view back where this paragraph's text now is. Called when
+// anything that can move the text changes: the layout itself, and the box.
+- (void)rnPlaceInlineChildren {
+  if (_textLayout == nil || _textLayout.verticalFlush <= 0) {
+    // Nothing to move, and nothing was: a paragraph at the top of its box
+    // leaves its children where React Native put them.
+    return;
+  }
+  const CGFloat offset = [self rnTextVerticalOffset];
+  for (NSView *child in self.subviews) {
+    if (![child isKindOfClass:[RnAppKitView class]]) {
+      continue;
+    }
+    RnAppKitView *inlineChild = (RnAppKitView *)child;
+    const NSRect frame = inlineChild.frame;
+    const CGFloat wanted = inlineChild->_rnOrigin.y + offset;
+    if (frame.origin.y != wanted) {
+      inlineChild.frame =
+          NSMakeRect(frame.origin.x, wanted, frame.size.width, frame.size.height);
+    }
+  }
+}
+
+- (NSInteger)rnTextIndexAtPoint:(CGPoint)point {
+  if (_textLayout == nil) {
+    return -1;
+  }
+  // In the paragraph's own coordinates: the view's, minus its padding. The same
+  // move the draw makes, or a drag would select the character beside the one
+  // under the pointer.
+  const CGSize box = self.bounds.size;
+  const CGPoint inText =
+      CGPointMake(point.x - _rnTextInset.left, point.y - _rnTextInset.top);
+  const CGSize content = CGSizeMake(box.width - _rnTextInset.left - _rnTextInset.right,
+                                    box.height - _rnTextInset.top - _rnTextInset.bottom);
+  return (NSInteger)[_textLayout characterIndexAtPoint:inText size:content];
+}
+
+- (void)setRnTextSelectionStart:(NSInteger)start length:(NSInteger)length {
+  if (_textLayout == nil) {
+    return;
+  }
+  const NSRange range =
+      NSMakeRange((NSUInteger)MAX((NSInteger)0, start), (NSUInteger)MAX((NSInteger)0, length));
+  if (NSEqualRanges(_textLayout.selection, range)) {
+    return;
+  }
+  _textLayout.selection = range;
+  self.needsDisplay = YES;
+}
+
+- (NSInteger)rnTextSelectionStart {
+  return _textLayout == nil ? 0 : (NSInteger)_textLayout.selection.location;
+}
+
+- (NSInteger)rnTextSelectionLength {
+  return _textLayout == nil ? 0 : (NSInteger)_textLayout.selection.length;
+}
+
+- (nullable NSString *)rnSelectedText {
+  return _textLayout == nil ? nil : [_textLayout selectedText];
 }
 
 // Only views with text draw anything; the rest are pure CALayer properties and
@@ -651,14 +1656,39 @@ static const char *RnAppKitImageFitName(RnAppKitImageFit fit) {
   (void)dirtyRect;
   const BOOL ring = [self rnShowsFocusRing];
   if (_textLayout == nil && _image == nullptr && !_hasBorders && !ring &&
-      _highlightFilled.empty()) {
+      _highlightFilled.empty() && _gradients.empty()) {
     return;
   }
   CGContextRef context = [NSGraphicsContext currentContext].CGContext;
   const NSSize size = self.bounds.size;
 
+  // The background image, under everything this view draws and over the
+  // background colour, which is a layer property and so is painted below all of
+  // this. That is CSS's order.
+  [self rnDrawGradientsInContext:context size:size];
+
   if (_image != nullptr) {
     const NSRect destination = [self rnImageRectForSize:size];
+    // A blurred copy stands in for the image below, including as the tint's
+    // mask: blurring an alpha mask and filling it with one solid colour is the
+    // same picture as blurring the fill, because the colour is constant. That
+    // is what makes this match the GTK side, which pushes its blur around the
+    // tint rather than around the silhouette it is masked from.
+    //
+    // Made at the destination's size, which for `repeat` is one tile, so every
+    // tile blurs alike as it does on GTK. The device scale comes from the
+    // context rather than from the window, because a view drawn into a bitmap
+    // -- a test, a snapshot -- has no window to ask.
+    CGImageRef pixels = _image;
+    if (_imageBlur > 0) {
+      const CGFloat deviceScale =
+          CGContextConvertSizeToDeviceSpace(context, CGSizeMake(1, 1)).width;
+      CGImageRef blurred = [self rnBlurredImageForSize:destination.size
+                                                scale:deviceScale > 0 ? deviceScale : 1];
+      if (blurred != nullptr) {
+        pixels = blurred;
+      }
+    }
 
     CGContextSaveGState(context);
     // cover, center and repeat can all put pixels outside the frame, and an
@@ -689,21 +1719,21 @@ static const char *RnAppKitImageFitName(RnAppKitImageFit fit) {
                                      destination.size.width,
                                      destination.size.height);
       if (_imageTint != nil) {
-        CGContextClipToMask(context, tile, _image);
+        CGContextClipToMask(context, tile, pixels);
         CGContextSetFillColorWithColor(context, _imageTint.CGColor);
         CGContextFillRect(context, NSMakeRect(0, 0, size.width, size.height));
       } else {
-        CGContextDrawTiledImage(context, tile, _image);
+        CGContextDrawTiledImage(context, tile, pixels);
       }
     } else if (_imageTint != nil) {
       // The image becomes a stencil and the colour is what is drawn. Clipping
       // to the mask uses the image's alpha, which is what `tintColor` means:
       // recolour the silhouette rather than blend with the pixels.
-      CGContextClipToMask(context, drawn, _image);
+      CGContextClipToMask(context, drawn, pixels);
       CGContextSetFillColorWithColor(context, _imageTint.CGColor);
       CGContextFillRect(context, drawn);
     } else {
-      CGContextDrawImage(context, drawn, _image);
+      CGContextDrawImage(context, drawn, pixels);
     }
     CGContextRestoreGState(context);
   }
@@ -711,7 +1741,16 @@ static const char *RnAppKitImageFitName(RnAppKitImageFit fit) {
   // Text sits above the image and below any children, which is the order the
   // GTK side paints in too.
   if (_textLayout != nil) {
-    [_textLayout drawInContext:context size:size];
+    // Inside the padding, in a box the size of the content. See rnTextInset:
+    // the layout draws in a box with a top-left origin, so moving the origin is
+    // the whole of it, and the selection highlight moves with the glyphs
+    // because it is drawn in the same call.
+    const CGSize content = CGSizeMake(size.width - _rnTextInset.left - _rnTextInset.right,
+                                      size.height - _rnTextInset.top - _rnTextInset.bottom);
+    CGContextSaveGState(context);
+    CGContextTranslateCTM(context, _rnTextInset.left, _rnTextInset.top);
+    [_textLayout drawInContext:context size:content];
+    CGContextRestoreGState(context);
   }
 
   // Borders paint over the content, as they do on every other platform.
@@ -775,6 +1814,57 @@ static const char *RnAppKitImageFitName(RnAppKitImageFit fit) {
   CGPathRelease(path);
 }
 
+// A dotted or dashed border: one stroked path instead of four filled edges.
+//
+// The same shape of drawing as the GTK side's, down to the dash pattern, because
+// a dashed border that started its dashes in a different place on each desktop
+// would be a difference nobody asked for. The top edge's width and colour decide
+// the stroke: a stroked path has one pen.
+- (void)rnStrokeDashedBorderInContext:(CGContextRef)context size:(NSSize)size {
+  const CGFloat width = _borderWidths[0] > 0 ? _borderWidths[0] : 1.0;
+
+  // Inset by half the width, because a stroke straddles its path while the
+  // filled edges sit inside the box. Without that a 4pt dashed border would
+  // paint two points outside the view and over its neighbour.
+  //
+  // The corner radii are left as they are rather than shrunk by the inset, which
+  // is what GSK's own inset does on the other host: it pulls the corners in by
+  // about a third of the inset, and matching it keeps the two drawing one shape.
+  const CGRect centred = CGRectInset(CGRectMake(0, 0, size.width, size.height),
+                                     width / 2.0, width / 2.0);
+  if (centred.size.width <= 0 || centred.size.height <= 0) {
+    return;
+  }
+  CGPathRef path = RnAppKitCreateRoundedPath(centred, _borderRadii);
+
+  CGContextSaveGState(context);
+  CGColorSpaceRef space = CGColorSpaceCreateWithName(kCGColorSpaceSRGB);
+  const CGFloat components[4] = {_borderColors[0], _borderColors[1], _borderColors[2],
+                                 _borderColors[3]};
+  CGColorRef color = CGColorCreate(space, components);
+  CGContextSetStrokeColorWithColor(context, color);
+  CGContextSetLineWidth(context, width);
+
+  // Scaled to the width, the way a browser does it. Dotted is round caps on a
+  // zero-length dash, which is what makes a dot round rather than a short dash.
+  if (_borderStyle == RnAppKitBorderStyleDotted) {
+    const CGFloat dots[2] = {0, width * 2.0};
+    CGContextSetLineCap(context, kCGLineCapRound);
+    CGContextSetLineDash(context, 0, dots, 2);
+  } else {
+    const CGFloat dashes[2] = {width * 3.0, width * 2.0};
+    CGContextSetLineDash(context, 0, dashes, 2);
+  }
+
+  CGContextAddPath(context, path);
+  CGContextStrokePath(context);
+
+  CGColorRelease(color);
+  CGColorSpaceRelease(space);
+  CGContextRestoreGState(context);
+  CGPathRelease(path);
+}
+
 // The four edges, each its own width and colour.
 //
 // This is CSS's own algorithm rather than a stroke: an edge is the region
@@ -784,6 +1874,10 @@ static const char *RnAppKitImageFitName(RnAppKitImageFit fit) {
 // cannot do it -- which matters as soon as one edge differs, and is invisible
 // until then.
 - (void)rnDrawBordersInContext:(CGContextRef)context size:(NSSize)size {
+  if (_borderStyle != RnAppKitBorderStyleSolid) {
+    [self rnStrokeDashedBorderInContext:context size:size];
+    return;
+  }
   const CGFloat w = size.width;
   const CGFloat h = size.height;
   const CGFloat top = _borderWidths[0];
@@ -874,7 +1968,13 @@ static const char *RnAppKitImageFitName(RnAppKitImageFit fit) {
 
 - (void)setRnOpacity:(CGFloat)opacity {
   _opacity = opacity;
-  self.layer.opacity = (float)opacity;
+  [self rnApplyOpacity];
+}
+
+// The view's own opacity and any `opacity()` in its filter list, which CSS lets
+// an app ask for in both places at once.
+- (void)rnApplyOpacity {
+  self.layer.opacity = (float)(_opacity * _filterOpacity);
 }
 
 - (void)setRnHidesBackFace:(BOOL)hides {
@@ -945,6 +2045,15 @@ static const char *RnAppKitImageFitName(RnAppKitImageFit fit) {
 - (void)setRnClipsChildren:(BOOL)clips {
   _clipsChildren = clips;
   self.layer.masksToBounds = clips;
+  // Which decides where an outset shadow and an outline live, so both move with
+  // it.
+  if (!_boxShadows.empty()) {
+    [self rnRebuildBoxShadowLayers];
+    [self rnRebuildFilterShadowLayers];
+  }
+  if (_outlineWidth > 0) {
+    [self rnRebuildOutlineLayer];
+  }
 }
 
 - (void)setRnZIndex:(NSInteger)zIndex {
@@ -1089,6 +2198,15 @@ static const char *RnAppKitImageFitName(RnAppKitImageFit fit) {
   }
   // The border is drawn along these radii.
   self.needsDisplay = YES;
+  // And so is every shadow: a shadow follows the box it is cast by, and so does
+  // the outline.
+  if (!_boxShadows.empty()) {
+    [self rnRebuildBoxShadowLayers];
+    [self rnRebuildFilterShadowLayers];
+  }
+  if (_outlineWidth > 0) {
+    [self rnRebuildOutlineLayer];
+  }
 }
 
 - (void)rnUpdateRadiusMask {
@@ -1123,14 +2241,843 @@ static const char *RnAppKitImageFitName(RnAppKitImageFit fit) {
   self.needsDisplay = YES;
 }
 
+// The NSCursor for a CSS cursor keyword, or nil for one macOS has no cursor for.
+//
+// The mapping React Native's own macOS fork makes, which is worth matching to the
+// letter: an app moved from react-native-macos to this platform should get the
+// same pointer over the same view. That fork is also where the holes come from --
+// "all-scroll", "cell", "help", "move", "progress" and "wait" have no NSCursor,
+// public or otherwise, and nil here means the view installs no cursor rect, so
+// the cursor is inherited rather than forced back to an arrow.
+//
+// The resize family is the one place macOS 15 made this better: before it, the
+// only resize cursors were the four axis-aligned ones, so a corner handle had
+// nothing to show. `frameResizeCursorFromPosition:inDirections:` has the
+// diagonals, and the fallbacks below are what the older system can do.
+static NSCursor *RnAppKitCursorNamed(NSString *name) {
+  if ([name isEqualToString:@"default"]) {
+    return NSCursor.arrowCursor;
+  }
+  if ([name isEqualToString:@"pointer"]) {
+    return NSCursor.pointingHandCursor;
+  }
+  if ([name isEqualToString:@"text"]) {
+    return NSCursor.IBeamCursor;
+  }
+  if ([name isEqualToString:@"crosshair"]) {
+    return NSCursor.crosshairCursor;
+  }
+  if ([name isEqualToString:@"grab"]) {
+    return NSCursor.openHandCursor;
+  }
+  if ([name isEqualToString:@"grabbing"]) {
+    return NSCursor.closedHandCursor;
+  }
+  if ([name isEqualToString:@"alias"]) {
+    return NSCursor.dragLinkCursor;
+  }
+  if ([name isEqualToString:@"copy"]) {
+    return NSCursor.dragCopyCursor;
+  }
+  if ([name isEqualToString:@"context-menu"]) {
+    return NSCursor.contextualMenuCursor;
+  }
+  // CSS distinguishes "this is not a drop target" from "this is not allowed at
+  // all"; macOS has one cursor for both, as does react-native-macos.
+  if ([name isEqualToString:@"no-drop"] || [name isEqualToString:@"not-allowed"]) {
+    return NSCursor.operationNotAllowedCursor;
+  }
+  // An empty one-pixel image, which is how macOS hides the pointer over a view.
+  if ([name isEqualToString:@"none"]) {
+    static NSCursor *blank = nil;
+    static dispatch_once_t once;
+    dispatch_once(&once, ^{
+      blank = [[NSCursor alloc] initWithImage:[[NSImage alloc] initWithSize:NSMakeSize(1, 1)]
+                                      hotSpot:NSZeroPoint];
+    });
+    return blank;
+  }
+  if ([name isEqualToString:@"ew-resize"] || [name isEqualToString:@"e-resize"] ||
+      [name isEqualToString:@"w-resize"]) {
+    return NSCursor.resizeLeftRightCursor;
+  }
+  if ([name isEqualToString:@"ns-resize"] || [name isEqualToString:@"n-resize"] ||
+      [name isEqualToString:@"s-resize"]) {
+    return NSCursor.resizeUpDownCursor;
+  }
+  if ([name isEqualToString:@"col-resize"]) {
+    if (@available(macOS 15.0, *)) {
+      return NSCursor.columnResizeCursor;
+    }
+    return NSCursor.resizeLeftRightCursor;
+  }
+  if ([name isEqualToString:@"row-resize"]) {
+    if (@available(macOS 15.0, *)) {
+      return NSCursor.rowResizeCursor;
+    }
+    return NSCursor.resizeUpDownCursor;
+  }
+  if (@available(macOS 15.0, *)) {
+    // The diagonals, which only exist as frame-resize cursors. "nesw" and "nwse"
+    // are the two-headed pair and the single directions are one-headed, which is
+    // what Outward and All mean here.
+    if ([name isEqualToString:@"nesw-resize"]) {
+      return [NSCursor frameResizeCursorFromPosition:NSCursorFrameResizePositionTopRight
+                                        inDirections:NSCursorFrameResizeDirectionsAll];
+    }
+    if ([name isEqualToString:@"nwse-resize"]) {
+      return [NSCursor frameResizeCursorFromPosition:NSCursorFrameResizePositionTopLeft
+                                        inDirections:NSCursorFrameResizeDirectionsAll];
+    }
+    if ([name isEqualToString:@"ne-resize"]) {
+      return [NSCursor frameResizeCursorFromPosition:NSCursorFrameResizePositionTopRight
+                                        inDirections:NSCursorFrameResizeDirectionsOutward];
+    }
+    if ([name isEqualToString:@"nw-resize"]) {
+      return [NSCursor frameResizeCursorFromPosition:NSCursorFrameResizePositionTopLeft
+                                        inDirections:NSCursorFrameResizeDirectionsOutward];
+    }
+    if ([name isEqualToString:@"se-resize"]) {
+      return [NSCursor frameResizeCursorFromPosition:NSCursorFrameResizePositionBottomRight
+                                        inDirections:NSCursorFrameResizeDirectionsOutward];
+    }
+    if ([name isEqualToString:@"sw-resize"]) {
+      return [NSCursor frameResizeCursorFromPosition:NSCursorFrameResizePositionBottomLeft
+                                        inDirections:NSCursorFrameResizeDirectionsOutward];
+    }
+    if ([name isEqualToString:@"zoom-in"]) {
+      return NSCursor.zoomInCursor;
+    }
+    if ([name isEqualToString:@"zoom-out"]) {
+      return NSCursor.zoomOutCursor;
+    }
+  }
+  return nil;
+}
+
+- (void)setRnCursorName:(NSString *)name {
+  NSString *wanted = name.length > 0 ? name : nil;
+  if (_cursorName == wanted || [_cursorName isEqualToString:wanted]) {
+    return;
+  }
+  _cursorName = [wanted copy];
+  _cursor = wanted != nil ? RnAppKitCursorNamed(wanted) : nil;
+  // Cursor rects are cached by the window and only rebuilt when it is told to,
+  // so a prop that changes while the pointer is already inside the view would
+  // otherwise keep the old cursor until the pointer left and came back.
+  [self.window invalidateCursorRectsForView:self];
+}
+
+- (NSCursor *)rnResolvedCursor {
+  return _cursor;
+}
+
+// `mixBlendMode`, which on macOS is one property: a Core Image blend-mode filter
+// on the layer, blending it with whatever is already beneath it.
+//
+// Public API here, as `CALayer.filters` is, and private on iOS -- React Native's
+// own iOS half sets `compositingFilter` to a bare string, which is undocumented
+// there. This sets the `CIFilter` the property is documented to take.
+//
+// The CSS names map one to one, `plus-lighter` included: it is linear dodge,
+// which is clamped addition, and that is what the keyword means.
+static NSString *RnAppKitBlendFilterNamed(NSString *keyword) {
+  static NSDictionary<NSString *, NSString *> *names = nil;
+  static dispatch_once_t once;
+  dispatch_once(&once, ^{
+    names = @{
+      @"multiply" : @"CIMultiplyBlendMode",
+      @"screen" : @"CIScreenBlendMode",
+      @"overlay" : @"CIOverlayBlendMode",
+      @"darken" : @"CIDarkenBlendMode",
+      @"lighten" : @"CILightenBlendMode",
+      @"color-dodge" : @"CIColorDodgeBlendMode",
+      @"color-burn" : @"CIColorBurnBlendMode",
+      @"hard-light" : @"CIHardLightBlendMode",
+      @"soft-light" : @"CISoftLightBlendMode",
+      @"difference" : @"CIDifferenceBlendMode",
+      @"exclusion" : @"CIExclusionBlendMode",
+      @"hue" : @"CIHueBlendMode",
+      @"saturation" : @"CISaturationBlendMode",
+      @"color" : @"CIColorBlendMode",
+      @"luminosity" : @"CILuminosityBlendMode",
+      @"plus-lighter" : @"CILinearDodgeBlendMode",
+    };
+  });
+  return names[keyword];
+}
+
+- (void)setRnBlendModeName:(NSString *)name {
+  NSString *wanted = name.length > 0 ? name : nil;
+  if (_blendModeName == wanted || [_blendModeName isEqualToString:wanted]) {
+    return;
+  }
+  _blendModeName = [wanted copy];
+  _blendFilterName = wanted != nil ? RnAppKitBlendFilterNamed(wanted) : nil;
+  // A keyword Core Image has no filter for leaves the layer unblended rather
+  // than wrongly blended, and the keyword is still reported: the dump says what
+  // the app asked for, which is the rule the cursor name follows too.
+  self.layer.compositingFilter =
+      _blendFilterName != nil ? [CIFilter filterWithName:_blendFilterName] : nil;
+}
+
+- (NSString *)rnBlendModeName {
+  return _blendModeName;
+}
+
+- (NSString *)rnBlendFilterName {
+  return _blendFilterName;
+}
+
+// AppKit asks for the rects rather than being told, which is why the cursor is
+// held and applied here: one rect over the whole view, discarded and rebuilt
+// each time, as react-native-macos does it. A child with its own cursor adds its
+// own rect and wins inside its own bounds, which is what CSS does.
+- (void)resetCursorRects {
+  [self discardCursorRects];
+  if (_cursor != nil) {
+    [self addCursorRect:self.bounds cursor:_cursor];
+  }
+}
+
+- (void)setRnGradients:(const RnAppKitGradient *)gradients count:(NSInteger)count {
+  std::vector<RnAppKitGradientRecord> wanted;
+  if (gradients != nullptr && count > 0) {
+    wanted.reserve((size_t)count);
+    for (NSInteger i = 0; i < count; i++) {
+      RnAppKitGradientRecord record{gradients[i].kind,
+                                    gradients[i].start,
+                                    gradients[i].end,
+                                    gradients[i].center,
+                                    gradients[i].radiusX,
+                                    gradients[i].radiusY,
+                                    gradients[i].area,
+                                    gradients[i].tile,
+                                    gradients[i].repeats,
+                                    {}};
+      if (gradients[i].stops != nullptr && gradients[i].stopCount > 0) {
+        record.stops.assign(gradients[i].stops, gradients[i].stops + gradients[i].stopCount);
+      }
+      wanted.push_back(std::move(record));
+    }
+  }
+
+  // Compared before it is kept, for the reason the shadows are: a view re-sends
+  // identical props on every mutation, and a redraw per mutation is a gradient
+  // rasterised again for nothing.
+  if (wanted.size() == _gradients.size()) {
+    bool same = true;
+    for (size_t i = 0; i < wanted.size() && same; i++) {
+      same = wanted[i].kind == _gradients[i].kind &&
+             CGRectEqualToRect(wanted[i].area, _gradients[i].area) &&
+             CGRectEqualToRect(wanted[i].tile, _gradients[i].tile) &&
+             wanted[i].repeats == _gradients[i].repeats &&
+             CGPointEqualToPoint(wanted[i].start, _gradients[i].start) &&
+             CGPointEqualToPoint(wanted[i].end, _gradients[i].end) &&
+             CGPointEqualToPoint(wanted[i].center, _gradients[i].center) &&
+             wanted[i].radiusX == _gradients[i].radiusX &&
+             wanted[i].radiusY == _gradients[i].radiusY &&
+             wanted[i].stops.size() == _gradients[i].stops.size() &&
+             (wanted[i].stops.empty() ||
+              memcmp(wanted[i].stops.data(),
+                     _gradients[i].stops.data(),
+                     wanted[i].stops.size() * sizeof(RnAppKitGradientStop)) == 0);
+    }
+    if (same) {
+      return;
+    }
+  }
+  _gradients = std::move(wanted);
+  self.needsDisplay = YES;
+}
+
+- (NSInteger)rnGradientCount {
+  return (NSInteger)_gradients.size();
+}
+
+// The gradients, back to front, clipped to the view's own rounded box.
+//
+// `drawRect:` is already clipped to the bounds, so only the rounded case needs a
+// path; a gradient with square corners on a rounded card is the kind of
+// difference a screenshot shows and a tree does not.
+//
+// Drawn beyond both ends of its line, which is what CSS does: the first and last
+// colours extend to the edges of the box rather than leaving it unpainted, and
+// the gradient line is often shorter than the box's diagonal.
+- (void)rnDrawGradientsInContext:(CGContextRef)context size:(NSSize)size {
+  if (_gradients.empty()) {
+    return;
+  }
+  CGColorSpaceRef space = CGColorSpaceCreateWithName(kCGColorSpaceSRGB);
+  for (auto gradient = _gradients.rbegin(); gradient != _gradients.rend(); ++gradient) {
+    if (gradient->stops.empty()) {
+      continue;
+    }
+    std::vector<CGFloat> components;
+    std::vector<CGFloat> locations;
+    components.reserve(gradient->stops.size() * 4);
+    locations.reserve(gradient->stops.size());
+    for (const RnAppKitGradientStop &stop : gradient->stops) {
+      components.insert(components.end(), stop.color, stop.color + 4);
+      locations.push_back(stop.offset);
+    }
+    CGGradientRef ramp = CGGradientCreateWithColorComponents(
+        space, components.data(), locations.data(), locations.size());
+    if (ramp == nullptr) {
+      continue;
+    }
+
+    if (gradient->area.size.width <= 0 || gradient->area.size.height <= 0) {
+      CGGradientRelease(ramp);
+      continue;
+    }
+
+    CGContextSaveGState(context);
+    if (_hasBorderRadii || _cornerRadius > 0) {
+      CGFloat radii[8];
+      for (int i = 0; i < 8; i++) {
+        radii[i] = _hasBorderRadii ? _borderRadii[i] : _cornerRadius;
+      }
+      CGPathRef path = RnAppKitCreateRoundedPath(CGRectMake(0, 0, size.width, size.height), radii);
+      CGContextAddPath(context, path);
+      CGContextClip(context);
+      CGPathRelease(path);
+    }
+
+    // Where the tiles go. Core Graphics has no repeat, so this is the loop GSK's
+    // repeat node is on the other host: from the first tile, stepping by the
+    // period until past the painting area. An axis that does not repeat arrives
+    // with the painting area as its tile, so it steps once.
+    const CGRect painting = CGRectMake(0, 0, size.width, size.height);
+    // Nothing repeating is one tile, whatever the tile says: the flag is what
+    // core resolved, and the GTK side reads it the same way by pushing no repeat
+    // node at all. Stepping by a tile that happens to equal the image would draw
+    // a grid for a `no-repeat` background, which is what the test for an image
+    // filling its own rectangle caught.
+    const CGFloat stepX = gradient->repeats && gradient->tile.size.width > 0
+        ? gradient->tile.size.width
+        : painting.size.width;
+    const CGFloat stepY = gradient->repeats && gradient->tile.size.height > 0
+        ? gradient->tile.size.height
+        : painting.size.height;
+    // Capped, because a stylesheet may ask for a one-point tile over a window:
+    // 256 steps per axis is past the point where another tile changes a pixel on
+    // any screen this runs on, and it keeps a pathological style from costing
+    // minutes a frame. GSK's node has its own bound for the same reason.
+    constexpr int kMaxTiles = 256;
+    const CGFloat originX = gradient->repeats ? gradient->tile.origin.x : gradient->area.origin.x;
+    const CGFloat originY = gradient->repeats ? gradient->tile.origin.y : gradient->area.origin.y;
+    const int countX = gradient->repeats && stepX > 0
+        ? (int)std::min<double>(kMaxTiles,
+                                std::floor((CGRectGetMaxX(painting) - originX) / stepX) + 1)
+        : 1;
+    const int countY = gradient->repeats && stepY > 0
+        ? (int)std::min<double>(kMaxTiles,
+                                std::floor((CGRectGetMaxY(painting) - originY) / stepY) + 1)
+        : 1;
+
+    for (int row = 0; row < std::max(countY, 1); row++) {
+      for (int column = 0; column < std::max(countX, 1); column++) {
+        const CGFloat dx = column * stepX;
+        const CGFloat dy = row * stepY;
+        const CGRect imageRect = CGRectOffset(gradient->area, dx, dy);
+        if (!CGRectIntersectsRect(imageRect, painting)) {
+          continue;
+        }
+
+        CGContextSaveGState(context);
+        // Clipped to the image's own rectangle: the gradient is drawn with
+        // `kCGGradientDrawsBeforeStartLocation` and its `After` twin, which fill
+        // the whole clip with the end colours -- so the clip is what keeps one
+        // tile inside its tile.
+        CGContextClipToRect(context, imageRect);
+        CGContextTranslateCTM(context, dx, dy);
+        [self rnDrawOneGradient:*gradient ramp:ramp context:context];
+        CGContextRestoreGState(context);
+      }
+    }
+    CGContextRestoreGState(context);
+    CGGradientRelease(ramp);
+  }
+  CGColorSpaceRelease(space);
+}
+
+// One gradient, at the rectangle its geometry was resolved against. The caller
+// has clipped and translated to the tile.
+- (void)rnDrawOneGradient:(const RnAppKitGradientRecord &)gradientRef
+                     ramp:(CGGradientRef)ramp
+                  context:(CGContextRef)context {
+  const RnAppKitGradientRecord *gradient = &gradientRef;
+  if (gradient->kind == RnAppKitGradientKindRadial) {
+    // Core Graphics draws radial gradients between two *circles*, so an ellipse
+    // is a scaled coordinate system rather than a different call: squash the y
+    // axis around the centre by the ratio of the radii and draw a circle of the
+    // horizontal radius. A host that drew a circle of one radius would be
+    // drawing a plausible gradient of the wrong shape.
+    const CGFloat radiusX = gradient->radiusX;
+    const CGFloat radiusY = gradient->radiusY;
+    if (radiusX <= 0 || radiusY <= 0) {
+      // An ending shape with no size. The caller's clip and state are undone by
+      // its own restore.
+      return;
+    }
+    // Scaled *about the centre*, so the centre itself does not move and the
+    // circle of the horizontal radius comes out as an ellipse with the vertical
+    // one. Scaling about the origin instead would need the centre divided by the
+    // same ratio, which is the mistake this comment exists to stop: it draws an
+    // ellipse of the right shape in the wrong place.
+    CGContextTranslateCTM(context, gradient->center.x, gradient->center.y);
+    CGContextScaleCTM(context, 1.0, radiusY / radiusX);
+    CGContextTranslateCTM(context, -gradient->center.x, -gradient->center.y);
+    CGContextDrawRadialGradient(context,
+                                ramp,
+                                gradient->center,
+                                0.0,
+                                gradient->center,
+                                radiusX,
+                                kCGGradientDrawsBeforeStartLocation |
+                                    kCGGradientDrawsAfterEndLocation);
+  } else {
+    CGContextDrawLinearGradient(context,
+                                ramp,
+                                gradient->start,
+                                gradient->end,
+                                kCGGradientDrawsBeforeStartLocation |
+                                    kCGGradientDrawsAfterEndLocation);
+  }
+}
+
+- (void)setRnBoxShadows:(const RnAppKitBoxShadow *)shadows count:(NSInteger)count {
+  std::vector<RnAppKitBoxShadow> wanted;
+  if (shadows != nullptr && count > 0) {
+    wanted.assign(shadows, shadows + count);
+  }
+  // Compared rather than rebuilt blindly: a view re-sends identical props on
+  // every mutation, and a layer rebuilt per mutation is a shadow recomputed for
+  // nothing on every keystroke.
+  if (wanted.size() == _boxShadows.size() &&
+      (wanted.empty() || memcmp(wanted.data(), _boxShadows.data(),
+                                wanted.size() * sizeof(RnAppKitBoxShadow)) == 0)) {
+    return;
+  }
+  _boxShadows = std::move(wanted);
+  [self rnRebuildBoxShadowLayers];
+  [self rnRebuildFilterShadowLayers];
+}
+
+- (NSInteger)rnBoxShadowCount {
+  return (NSInteger)_boxShadows.size();
+}
+
+- (NSArray<CALayer *> *)rnBoxShadowLayers {
+  return _boxShadowLayers != nil ? [_boxShadowLayers copy] : @[];
+}
+
+// One layer per shadow, rebuilt whenever the list, the view's size, its radii or
+// its place in the tree changes -- a shadow's path is in the view's own
+// coordinates and an outset one lives in its parent, so all four invalidate it.
+//
+// Added back to front, because CSS says the first shadow in the list is the one
+// on top and sublayers composite in order.
+//
+// **Where an outset shadow goes depends on whether this view clips itself.**
+//
+// Normally it is a sublayer of the view, which is what React Native's iOS half
+// does: the mask cuts the box out of the shadow, so it only ever paints outside,
+// and being inside the view's own layer it composites exactly where the view
+// does -- above earlier siblings, below later ones.
+//
+// That arrangement loses the shadow entirely when the view clips its own layer,
+// which `overflow: 'hidden'` does through `masksToBounds` and non-uniform radii
+// do through a mask layer. CSS clips neither: an element's own shadow is outside
+// its box and is not subject to its overflow. So a clipping view casts its
+// shadow into the *parent's* layer instead, below its own.
+//
+// The cost of that path is z-order among siblings: AppKit attaches a subview's
+// layer lazily, at the first display, and these are built while mounting -- so
+// `below:self.layer` has nothing to aim at yet and the shadow lands at the
+// bottom of the parent, below every sibling rather than below this view alone.
+// Visible only where a sibling overlaps the shadow of a clipping view, which is
+// the narrower case of the two.
+//
+// Inset shadows are always sublayers of this view, where clipping is harmless
+// and right. They do paint above this view's own drawn text rather than under
+// it, which the GTK host gets right for free; backlog/correctness.md records
+// both of these.
+// Whether this view's own layer clips what is inside it, which decides where an
+// outset shadow can live. Both answers come from props: `overflow: 'hidden'` and
+// a set of radii too elliptical for CALayer's cornerRadius.
+- (BOOL)rnClipsItsOwnLayer {
+  return _clipsChildren || self.layer.mask != nil;
+}
+
+// The drop shadows a CALayer cannot hold, one layer each.
+//
+// Rebuilt rather than updated, the way the box shadows are: the geometry
+// depends on the view's size and corner radii, both of which change under it.
+- (void)rnRebuildFilterShadowLayers {
+  for (CALayer *layer in _filterShadowLayers) {
+    [layer removeFromSuperlayer];
+  }
+  [_filterShadowLayers removeAllObjects];
+  if (_extraFilterShadows.empty()) {
+    return;
+  }
+  if (_filterShadowLayers == nil) {
+    _filterShadowLayers = [NSMutableArray array];
+  }
+
+  const CGSize size = self.bounds.size;
+  if (size.width <= 0 || size.height <= 0) {
+    return;
+  }
+  CGFloat radii[8];
+  for (int i = 0; i < 8; i++) {
+    radii[i] = _hasBorderRadii ? _borderRadii[i] : 0;
+  }
+
+  // Back to front: the last function in the list is the outermost, so it is
+  // added first and the earlier ones are drawn over it.
+  for (auto shadow = _extraFilterShadows.rbegin(); shadow != _extraFilterShadows.rend();
+       ++shadow) {
+    if (shadow->color[3] <= 0) {
+      continue;
+    }
+    CALayer *layer = RnAppKitFilterShadowLayer(*shadow, radii, size);
+    [self.layer insertSublayer:layer atIndex:0];
+    [_filterShadowLayers addObject:layer];
+  }
+}
+
+- (void)rnRebuildBoxShadowLayers {
+  for (CALayer *layer in _boxShadowLayers) {
+    [layer removeFromSuperlayer];
+  }
+  [_boxShadowLayers removeAllObjects];
+  if (_boxShadows.empty()) {
+    return;
+  }
+  if (_boxShadowLayers == nil) {
+    _boxShadowLayers = [NSMutableArray array];
+  }
+
+  const CGSize size = self.bounds.size;
+  if (size.width <= 0 || size.height <= 0) {
+    return;
+  }
+  CGFloat radii[8];
+  for (int i = 0; i < 8; i++) {
+    radii[i] = _hasBorderRadii ? _borderRadii[i] : 0;
+  }
+
+  for (auto shadow = _boxShadows.rbegin(); shadow != _boxShadows.rend(); ++shadow) {
+    // A shadow React Native could not parse a colour for arrives with none.
+    // Painting it would put a black shadow under a view that asked for nothing.
+    if (shadow->color[3] <= 0) {
+      continue;
+    }
+    if (shadow->inset) {
+      CALayer *layer = RnAppKitInsetShadowLayer(*shadow, radii, size);
+      [self.layer addSublayer:layer];
+      [_boxShadowLayers addObject:layer];
+      continue;
+    }
+    CALayer *layer = RnAppKitOutsetShadowLayer(*shadow, radii, size);
+    if (![self rnClipsItsOwnLayer]) {
+      [self.layer addSublayer:layer];
+      [_boxShadowLayers addObject:layer];
+      continue;
+    }
+    CALayer *parent = self.superview.layer;
+    if (parent == nil) {
+      // A clipping surface root, or one not yet mounted. Nothing to cast onto;
+      // the next move into a superview rebuilds this.
+      continue;
+    }
+    // In the parent's coordinates, which are this view's frame. Both are flipped
+    // the same way, so the frame carries over as it stands.
+    layer.frame = self.frame;
+    [parent insertSublayer:layer below:self.layer];
+    [_boxShadowLayers addObject:layer];
+  }
+}
+
+// A view that moves, or is removed, takes its shadows with it. Without this an
+// unmounted card leaves its shadow behind in the parent, which is the one bug
+// this arrangement can have that the simpler one cannot.
+- (void)viewDidMoveToSuperview {
+  [super viewDidMoveToSuperview];
+  if (!_boxShadows.empty()) {
+    [self rnRebuildBoxShadowLayers];
+    [self rnRebuildFilterShadowLayers];
+  }
+  if (_outlineWidth > 0) {
+    [self rnRebuildOutlineLayer];
+  }
+}
+
+- (void)setRnOutlineWidth:(CGFloat)width
+                   offset:(CGFloat)offset
+                    color:(const CGFloat *)color
+                    style:(RnAppKitBorderStyle)style {
+  const CGFloat wanted = width > 0 ? width : 0;
+  CGFloat components[4] = {0, 0, 0, 0};
+  for (int i = 0; i < 4; i++) {
+    components[i] = color != nullptr ? color[i] : 0;
+  }
+  if (_outlineWidth == wanted && _outlineOffset == offset && _outlineStyle == style &&
+      memcmp(_outlineColor, components, sizeof(components)) == 0) {
+    return;
+  }
+  _outlineWidth = wanted;
+  _outlineOffset = offset;
+  memcpy(_outlineColor, components, sizeof(components));
+  _outlineStyle = style;
+  [self rnRebuildOutlineLayer];
+}
+
+- (CAShapeLayer *)rnOutlineLayer {
+  return _outlineLayer;
+}
+
+// The outline, as a stroked shape outside the box.
+//
+// Stroked rather than a layer border, which is what React Native's iOS half uses
+// for the solid case: a stroke takes a dash pattern, so dotted and dashed need no
+// second mechanism, and it takes an arbitrary path, so elliptical radii need no
+// special case either. The path sits half a width outside the offset, a stroke
+// straddling its path.
+//
+// Placed by the same rule the box shadows use -- inside the view, or in the
+// parent when the view clips its own layer -- so an outline on a card with
+// `overflow: 'hidden'` is not quietly clipped away.
+- (void)rnRebuildOutlineLayer {
+  [_outlineLayer removeFromSuperlayer];
+  _outlineLayer = nil;
+  if (_outlineWidth <= 0 || _outlineColor[3] <= 0) {
+    return;
+  }
+  const NSRect bounds = self.bounds;
+  if (bounds.size.width <= 0 || bounds.size.height <= 0) {
+    return;
+  }
+
+  const CGFloat grow = _outlineOffset + _outlineWidth / 2;
+  CGFloat radii[8];
+  for (int i = 0; i < 8; i++) {
+    // Each non-zero radius grows with the ring so it stays concentric; a corner
+    // that was square stays square, as it does on the GTK side.
+    radii[i] = _hasBorderRadii ? (_borderRadii[i] > 0 ? _borderRadii[i] + grow : 0)
+                               : (_cornerRadius > 0 ? _cornerRadius + grow : 0);
+  }
+  CGPathRef path =
+      RnAppKitCreateRoundedPath(CGRectInset(bounds, -grow, -grow), radii);
+
+  CAShapeLayer *layer = [CAShapeLayer layer];
+  layer.path = path;
+  layer.fillColor = nil;
+  layer.lineWidth = _outlineWidth;
+  CGColorSpaceRef space = CGColorSpaceCreateWithName(kCGColorSpaceSRGB);
+  CGColorRef colour = CGColorCreate(space, _outlineColor);
+  layer.strokeColor = colour;
+  CGColorRelease(colour);
+  CGColorSpaceRelease(space);
+
+  if (_outlineStyle == RnAppKitBorderStyleDotted) {
+    layer.lineCap = kCALineCapRound;
+    layer.lineDashPattern = @[ @0, @(_outlineWidth * 2) ];
+  } else if (_outlineStyle == RnAppKitBorderStyleDashed) {
+    layer.lineDashPattern = @[ @(_outlineWidth * 3), @(_outlineWidth * 2) ];
+  }
+
+  if ([self rnClipsItsOwnLayer]) {
+    CALayer *parent = self.superview.layer;
+    if (parent != nil) {
+      layer.frame = self.frame;
+      [parent insertSublayer:layer below:self.layer];
+      _outlineLayer = layer;
+    }
+  } else {
+    layer.frame = bounds;
+    [self.layer addSublayer:layer];
+    _outlineLayer = layer;
+  }
+  CGPathRelease(path);
+}
+
+- (void)setRnFilters:(const RnAppKitFilters *)filters {
+  if (filters == nullptr) {
+    // Every half has to come off, and there are three. A list of nothing but
+    // `opacity()` leaves no Core Image filter behind, and so does a list of
+    // nothing but `dropShadow()` -- so an early return on `_filters` alone keeps
+    // the view faded, or shadowed, for good. The first of those two was caught
+    // by the test for taking a filter away; the second was caught by the same
+    // test written again for the shadow, which is the argument for writing it.
+    if (_filters == nil && _filterOpacity == 1 && _filterShadow.color[3] == 0 &&
+        _filterShadow.standardDeviation == 0 && _extraFilterShadows.empty()) {
+      return;
+    }
+    _filters = nil;
+    self.layer.filters = nil;
+    _filterOpacity = 1;
+    [self rnApplyOpacity];
+    [self rnApplyFilterShadow:nullptr];
+    _extraFilterShadows.clear();
+    [self rnRebuildFilterShadowLayers];
+    return;
+  }
+
+  NSMutableArray<CIFilter *> *built = [NSMutableArray array];
+  if (filters->hasMatrix) {
+    // CIColorMatrix takes the matrix as four input vectors, one per *output*
+    // channel's weights, plus a bias -- which is this matrix row by row.
+    CIFilter *matrix = [CIFilter filterWithName:@"CIColorMatrix"];
+    const auto row = [filters](int index) {
+      return [CIVector vectorWithX:filters->matrix[index * 4 + 0]
+                                Y:filters->matrix[index * 4 + 1]
+                                Z:filters->matrix[index * 4 + 2]
+                                W:filters->matrix[index * 4 + 3]];
+    };
+    [matrix setValue:row(0) forKey:@"inputRVector"];
+    [matrix setValue:row(1) forKey:@"inputGVector"];
+    [matrix setValue:row(2) forKey:@"inputBVector"];
+    [matrix setValue:row(3) forKey:@"inputAVector"];
+    [matrix setValue:[CIVector vectorWithX:filters->offset[0]
+                                         Y:filters->offset[1]
+                                         Z:filters->offset[2]
+                                         W:filters->offset[3]]
+              forKey:@"inputBiasVector"];
+    [built addObject:matrix];
+  }
+  if (filters->blurRadius > 0) {
+    CIFilter *blur = [CIFilter filterWithName:@"CIGaussianBlur"];
+    // Sigma is half the radius, the same conversion the image blur and the box
+    // shadows use.
+    [blur setValue:@(filters->blurRadius / 2) forKey:@"inputRadius"];
+    [built addObject:blur];
+  }
+  _filters = built.count > 0 ? built : nil;
+  self.layer.filters = _filters;
+
+  // `opacity()` is not a Core Image filter here: it multiplies the view's own
+  // opacity, which is a layer property and cheaper than a filter pass. The GTK
+  // side folds it into its opacity node for the same reason.
+  _filterOpacity = filters->opacity;
+  [self rnApplyOpacity];
+
+  // The first is the view's own layer's, where it is cast from the content's
+  // alpha. The rest are layers of their own; see RnAppKitFilterShadowLayer.
+  [self rnApplyFilterShadow:filters->shadowCount > 0 ? filters->shadows : nullptr];
+  _extraFilterShadows.assign(filters->shadows + (filters->shadowCount > 0 ? 1 : 0),
+                             filters->shadows + MAX((NSInteger)0, filters->shadowCount));
+  [self rnRebuildFilterShadowLayers];
+}
+
+// `dropShadow()`, which is the layer's own shadow rather than a Core Image
+// filter: with no `shadowPath`, Core Animation casts the shadow from the
+// layer's *alpha*, which is what the filter function means and what a box shadow
+// cannot do. The box shadows beside it are separate layers with a path each, so
+// the two mechanisms do not collide.
+//
+// `CALayer.shadowRadius` is the gaussian's standard deviation, so what React
+// Native parsed crosses unchanged -- where the GTK side doubles it, GSK's radius
+// being CSS's. React Native's own iOS half passes the same number to SwiftUI's
+// `.shadow(radius:)`.
+//
+// One shadow, because a layer has one. A list of several needs a wrapper layer
+// each and is recorded in backlog/platform-macos.md rather than half done.
+- (void)rnApplyFilterShadow:(const RnAppKitFilterShadow *)shadow {
+  if (shadow == nullptr) {
+    if (_filterShadow.color[3] == 0 && _filterShadow.standardDeviation == 0) {
+      return;
+    }
+    _filterShadow = RnAppKitFilterShadow{};
+    self.layer.shadowOpacity = 0;
+    self.layer.shadowColor = nil;
+    self.layer.shadowRadius = 0;
+    self.layer.shadowOffset = CGSizeZero;
+    return;
+  }
+  if (memcmp(&_filterShadow, shadow, sizeof(RnAppKitFilterShadow)) == 0) {
+    return;
+  }
+  _filterShadow = *shadow;
+
+  CGColorSpaceRef space = CGColorSpaceCreateWithName(kCGColorSpaceSRGB);
+  const CGFloat opaque[4] = {shadow->color[0], shadow->color[1], shadow->color[2], 1};
+  CGColorRef colour = CGColorCreate(space, opaque);
+  self.layer.shadowColor = colour;
+  CGColorRelease(colour);
+  CGColorSpaceRelease(space);
+  // The colour's alpha is the layer's shadowOpacity, which is where Core
+  // Animation keeps it: a shadowColor with an alpha and an opacity of 1 would
+  // multiply the two.
+  self.layer.shadowOpacity = (float)shadow->color[3];
+  self.layer.shadowRadius = shadow->standardDeviation;
+  // This view is flipped, so a positive dy is down, as CSS means it. The layer
+  // is not, which is why the sign is flipped here and not in the shadow path the
+  // box shadows build.
+  self.layer.shadowOffset = CGSizeMake(shadow->dx, -shadow->dy);
+  // No path: the shadow is cast from the alpha, which is the whole point.
+  self.layer.shadowPath = nil;
+}
+
+- (RnAppKitFilterShadow)rnFilterShadow {
+  return _filterShadow;
+}
+
+- (NSArray<CIFilter *> *)rnFilters {
+  return _filters != nil ? _filters : @[];
+}
+
+- (void)setRnHitSlop:(const CGFloat *)insets {
+  BOOL any = NO;
+  for (int edge = 0; edge < 4; edge++) {
+    _hitSlop[edge] = insets != nullptr ? insets[edge] : 0;
+    if (_hitSlop[edge] != 0) {
+      any = YES;
+    }
+  }
+  _hasHitSlop = any;
+  // Nothing to redraw: the prop moves no pixels.
+}
+
+// The box a press has to land in, which is the bounds unless `hitSlop` says
+// otherwise. In the view's own coordinates, so a scrolled view's offset is
+// already in `bounds`.
+- (NSRect)rnHitArea {
+  const NSRect bounds = self.bounds;
+  if (!_hasHitSlop) {
+    return bounds;
+  }
+  return NSMakeRect(bounds.origin.x - _hitSlop[3],
+                    bounds.origin.y - _hitSlop[0],
+                    bounds.size.width + _hitSlop[1] + _hitSlop[3],
+                    bounds.size.height + _hitSlop[0] + _hitSlop[2]);
+}
+
+- (void)setRnBorderStyle:(RnAppKitBorderStyle)style {
+  if (_borderStyle == style) {
+    return;
+  }
+  _borderStyle = style;
+  self.needsDisplay = YES;
+}
+
 - (void)insertRnChild:(RnAppKitView *)child atIndex:(NSInteger)index {
   NSArray<NSView *> *children = self.subviews;
   if (index >= (NSInteger)children.count) {
     [self addSubview:child];
     [self rnRaiseIndicators];
+    [self rnPlaceInlineChildren];
     return;
   }
   [self addSubview:child positioned:NSWindowBelow relativeTo:children[(NSUInteger)index]];
+  // A view inline in a paragraph is given its frame before it is inserted --
+  // the mounting walk creates a view, applies its props and only then attaches
+  // it -- so at that moment it has no parent to ask where the text went. This
+  // is where it finds out.
+  [self rnPlaceInlineChildren];
 }
 
 // A child added at or past the end lands above the overlay, so put it back on
@@ -1156,6 +3103,10 @@ static const char *RnAppKitImageFitName(RnAppKitImageFit fit) {
     [out appendString:@"  "];
   }
   const NSRect frame = self.frame;
+  // Where the view sits, which for one inline in a paragraph is not the origin
+  // React Native gave it: `textAlignVertical` is the host's own answer to a box
+  // taller than its text, and the other two hosts print the same number. See
+  // rnPlaceInlineChildren.
   [out appendFormat:@"view tag=%ld frame=(%g,%g %gx%g)",
                     (long)self.rnTag,
                     frame.origin.x,
@@ -1212,6 +3163,69 @@ static const char *RnAppKitImageFitName(RnAppKitImageFit fit) {
                         (unsigned)(_borderColors[edge * 4 + 3] * 255.0 + 0.5)];
     }
     [out appendString:@")"];
+    // The style, when it is not solid. Printed for the same reason the widths
+    // are: a dashed border and a solid one are the same four widths and the same
+    // four colours, and this is the only thing that can say the prop arrived.
+    if (_borderStyle != RnAppKitBorderStyleSolid) {
+      [out appendFormat:@" border-style=%s",
+                        _borderStyle == RnAppKitBorderStyleDotted ? "dotted" : "dashed"];
+    }
+  }
+  // Gradients: how many, each one's line and stop count, where the image goes
+  // and the tile it repeats in, spelled as GTK spells them. Not every stop,
+  // which a transition hint can turn into eleven of: what a cross-host diff
+  // needs is that the same gradient arrived with the same geometry, and the stop
+  // fixup is asserted in core's own tests.
+  //
+  // `at=` is the rectangle the image fills and `tile=` is the period, printed
+  // only when it repeats, so a `no-repeat` background is the line without a
+  // tile. The three background props are invisible in every other line here.
+  for (const RnAppKitGradientRecord &gradient : _gradients) {
+    if (gradient.kind == RnAppKitGradientKindRadial) {
+      [out appendFormat:@" gradient=(radial (%g,%g) %gx%g,%lu stops",
+                        (double)gradient.center.x,
+                        (double)gradient.center.y,
+                        (double)gradient.radiusX,
+                        (double)gradient.radiusY,
+                        (unsigned long)gradient.stops.size()];
+    } else {
+      [out appendFormat:@" gradient=((%g,%g)-(%g,%g),%lu stops",
+                        (double)gradient.start.x,
+                        (double)gradient.start.y,
+                        (double)gradient.end.x,
+                        (double)gradient.end.y,
+                        (unsigned long)gradient.stops.size()];
+    }
+    [out appendFormat:@",at=(%g,%g %gx%g)",
+                      (double)gradient.area.origin.x,
+                      (double)gradient.area.origin.y,
+                      (double)gradient.area.size.width,
+                      (double)gradient.area.size.height];
+    if (gradient.repeats) {
+      [out appendFormat:@",tile=(%g,%g %gx%g)",
+                        (double)gradient.tile.origin.x,
+                        (double)gradient.tile.origin.y,
+                        (double)gradient.tile.size.width,
+                        (double)gradient.tile.size.height];
+    }
+    [out appendString:@")"];
+  }
+
+  // Box shadows, each in full and spelled as GTK spells them. Nothing else in
+  // this dump can say a shadow is there, and the numbers are the whole feature:
+  // an offset that went to the wrong axis or a spread read as a blur still draws
+  // a plausible shadow.
+  for (const RnAppKitBoxShadow &shadow : _boxShadows) {
+    [out appendFormat:@" shadow=(%s%g,%g,%g,%g,#%02x%02x%02x%02x)",
+                      shadow.inset ? "inset " : "",
+                      (double)shadow.dx,
+                      (double)shadow.dy,
+                      (double)shadow.blur,
+                      (double)shadow.spread,
+                      (unsigned)(shadow.color[0] * 255.0 + 0.5),
+                      (unsigned)(shadow.color[1] * 255.0 + 0.5),
+                      (unsigned)(shadow.color[2] * 255.0 + 0.5),
+                      (unsigned)(shadow.color[3] * 255.0 + 0.5)];
   }
   if (_hasTransform) {
     // The 2D affine part, which is all either platform draws, in the order
@@ -1232,6 +3246,12 @@ static const char *RnAppKitImageFitName(RnAppKitImageFit fit) {
   if (scroll.x != 0 || scroll.y != 0) {
     [out appendFormat:@" scroll=(%g,%g)", scroll.x, scroll.y];
   }
+  // `pagingEnabled`, `snapToInterval`, `snapToOffsets` and the rest, which
+  // decide where a fling ends and so are invisible to a dump taken while
+  // nothing moves. Formatted in core, so all three hosts print the same words.
+  if (self.rnScrollSnap.length > 0) {
+    [out appendString:self.rnScrollSnap];
+  }
   // The overlay scrollbars, which are otherwise pure paint and so invisible to
   // every test this project has. Printed only when there is one, so a view that
   // does not scroll stays as short as it was.
@@ -1245,6 +3265,18 @@ static const char *RnAppKitImageFitName(RnAppKitImageFit fit) {
                       _indicators.rnHorizontalOffset,
                       _indicators.rnHorizontalLength];
   }
+  // The thumb's colour, printed only when it is not the default black: a white
+  // one is `indicatorStyle` having arrived, and the colour is the only part of
+  // that a tree dump can see.
+  if (_rnIndicatorColour != nil
+      && (_rnIndicatorColour.redComponent != 0.0 || _rnIndicatorColour.greenComponent != 0.0
+          || _rnIndicatorColour.blueComponent != 0.0)) {
+    [out appendFormat:@" scrollbar-colour=(%g,%g,%g,%g)",
+                      _rnIndicatorColour.redComponent,
+                      _rnIndicatorColour.greenComponent,
+                      _rnIndicatorColour.blueComponent,
+                      _rnIndicatorColour.alphaComponent];
+  }
   // Printed only when it is not the default, like every other field here.
   // Worth printing at all because it is invisible: a view with
   // `pointerEvents: none` is drawn exactly like one without, and the only way
@@ -1253,6 +3285,117 @@ static const char *RnAppKitImageFitName(RnAppKitImageFit fit) {
   if (self.rnPointerEvents != RnAppKitPointerEventsAuto) {
     [out appendFormat:@" pe=%s", RnAppKitPointerEventsName(self.rnPointerEvents)];
   }
+  // Printed for the reason pointerEvents is, and spelled as GTK spells it: the
+  // prop is invisible in a still picture, so a dump is the only thing that can
+  // say it arrived on both hosts.
+  if (_cursorName != nil) {
+    [out appendFormat:@" cursor=%@", _cursorName];
+  }
+  // The blend mode the app asked for, spelled as GTK spells it: the keyword,
+  // not the Core Image filter it became.
+  if (_blendModeName != nil) {
+    [out appendFormat:@" blend=%@", _blendModeName];
+  }
+  // The outline, which is invisible in every other line: it is not a border and
+  // a view with one has the same frame and the same colours without it. Spelled
+  // as GTK spells it.
+  if (_outlineWidth > 0) {
+    [out appendFormat:@" outline=(%g,%g,#%02x%02x%02x%02x",
+                      (double)_outlineWidth,
+                      (double)_outlineOffset,
+                      (unsigned)(_outlineColor[0] * 255.0 + 0.5),
+                      (unsigned)(_outlineColor[1] * 255.0 + 0.5),
+                      (unsigned)(_outlineColor[2] * 255.0 + 0.5),
+                      (unsigned)(_outlineColor[3] * 255.0 + 0.5)];
+    if (_outlineStyle != RnAppKitBorderStyleSolid) {
+      [out appendFormat:@",%s",
+                        _outlineStyle == RnAppKitBorderStyleDotted ? "dotted" : "dashed"];
+    }
+    [out appendString:@")"];
+  }
+
+  // `filter`, as the pieces it came to plus what its matrix makes of one probe
+  // colour, spelled exactly as GTK spells it: sixteen numbers would drown the
+  // line, and one colour still fails when a matrix is wrong. The probe is
+  // (1, 0.5, 0.25) so no two channels can be swapped unnoticed.
+  if (_filters != nil || _filterOpacity < 1 || _filterShadow.color[3] > 0) {
+    [out appendString:@" filter=("];
+    BOOL first = YES;
+    for (CIFilter *filter in _filters) {
+      if ([filter.name isEqualToString:@"CIColorMatrix"]) {
+        const CGFloat probe[4] = {1.0, 0.5, 0.25, 1.0};
+        CGFloat result[4] = {0, 0, 0, 0};
+        NSArray<NSString *> *keys =
+            @[ @"inputRVector", @"inputGVector", @"inputBVector", @"inputAVector" ];
+        CIVector *bias = [filter valueForKey:@"inputBiasVector"];
+        for (int row = 0; row < 4; row++) {
+          CIVector *weights = [filter valueForKey:keys[(NSUInteger)row]];
+          result[row] = [bias valueAtIndex:(size_t)row] + weights.X * probe[0] +
+                        weights.Y * probe[1] + weights.Z * probe[2] + weights.W * probe[3];
+        }
+        const auto byte = [](CGFloat value) {
+          const CGFloat clamped = value < 0 ? 0 : (value > 1 ? 1 : value);
+          return (unsigned)(clamped * 255.0 + 0.5);
+        };
+        [out appendFormat:@"probe=#%02x%02x%02x%02x",
+                          byte(result[0]),
+                          byte(result[1]),
+                          byte(result[2]),
+                          byte(result[3])];
+        first = NO;
+      } else if ([filter.name isEqualToString:@"CIGaussianBlur"]) {
+        const double sigma = [[filter valueForKey:@"inputRadius"] doubleValue];
+        [out appendFormat:@"%sblur=%g", first ? "" : ",", sigma * 2.0];
+        first = NO;
+      }
+    }
+    if (_filterOpacity < 1) {
+      [out appendFormat:@"%sopacity=%g", first ? "" : ",", (double)_filterOpacity];
+      first = NO;
+    }
+    // The drop shadow, with the standard deviation React Native parsed, which is
+    // also what this layer was given. GTK prints the same number from a radius
+    // it doubled.
+    if (_filterShadow.color[3] > 0) {
+      [out appendFormat:@"%sshadow=(%g,%g,%g,#%02x%02x%02x%02x)",
+                        first ? "" : ",",
+                        (double)_filterShadow.dx,
+                        (double)_filterShadow.dy,
+                        (double)_filterShadow.standardDeviation,
+                        (unsigned)(_filterShadow.color[0] * 255.0 + 0.5),
+                        (unsigned)(_filterShadow.color[1] * 255.0 + 0.5),
+                        (unsigned)(_filterShadow.color[2] * 255.0 + 0.5),
+                        (unsigned)(_filterShadow.color[3] * 255.0 + 0.5)];
+    }
+    [out appendString:@")"];
+  }
+
+  // `hitSlop`, which is invisible in every other line of this dump: a view with
+  // a bigger target is drawn exactly like one without.
+  if (_hasHitSlop) {
+    [out appendFormat:@" hit-slop=(%g,%g,%g,%g)",
+                      (double)_hitSlop[0],
+                      (double)_hitSlop[1],
+                      (double)_hitSlop[2],
+                      (double)_hitSlop[3]];
+  }
+  // The resolved labelled-by relation, by tag, spelled as GTK spells it. Every
+  // tag that resolved, not only the one AppKit could use, so the two hosts print
+  // the same line and the difference stays in what each platform does with it.
+  if (!_labelledBy.empty()) {
+    [out appendString:@" labelled-by="];
+    for (size_t i = 0; i < _labelledBy.size(); i++) {
+      [out appendFormat:@"%s%ld", i == 0 ? "" : ",", (long)_labelledBy[i]];
+    }
+  }
+  // The resolved reading order, by tag and in the order the app asked for,
+  // spelled as GTK spells it so the two dumps compare.
+  if (!_accessibilityOrder.empty()) {
+    [out appendString:@" a11y-order="];
+    for (size_t i = 0; i < _accessibilityOrder.size(); i++) {
+      [out appendFormat:@"%s%ld", i == 0 ? "" : ",", (long)_accessibilityOrder[i]];
+    }
+  }
   if (_image != nullptr) {
     // The same `texture=WxH fit=<name>` the GTK side emits, so an <Image> shows
     // up in the cross-platform diff and the end-to-end suite can assert on it.
@@ -1261,6 +3404,14 @@ static const char *RnAppKitImageFitName(RnAppKitImageFit fit) {
     // identical in every other line of this dump and different on screen.
     [out appendFormat:@" texture=%zux%zu", CGImageGetWidth(_image), CGImageGetHeight(_image)];
     [out appendFormat:@" fit=%s", RnAppKitImageFitName(_imageFit)];
+    // That this image moves, which no other line can show: an animated GIF and
+    // its first frame are the same size and the same picture in a snapshot.
+    // Not which frame, deliberately -- the two hosts tick on their own clocks
+    // and a cross-host diff would then be a race. Each suite asserts the frames
+    // itself.
+    if (_imageFrames.count > 1) {
+      [out appendString:@" animated=1"];
+    }
     // Printed for the same reason the fit is: a tinted image and an untinted
     // one are identical in every other line of this dump and different on
     // screen. Formatted exactly as GTK formats a colour, so the cross-host diff
@@ -1273,6 +3424,13 @@ static const char *RnAppKitImageFitName(RnAppKitImageFit fit) {
                         (unsigned)(rgb.blueComponent * 255.0 + 0.5),
                         (unsigned)(rgb.alphaComponent * 255.0 + 0.5)];
     }
+    // And the blur, spelled as GTK spells it. Invisible in this dump for the
+    // reason the tint is, and in one more: the prop is read in a branch that
+    // knows ImageProps, and a line here is the only thing that can say it got
+    // out of that branch and onto the view.
+    if (_imageBlur > 0) {
+      [out appendFormat:@" blur=%g", (double)_imageBlur];
+    }
   }
   if (_textLayout != nil) {
     NSString *text = _textLayout.attributedString.string;
@@ -1289,6 +3447,80 @@ static const char *RnAppKitImageFitName(RnAppKitImageFit fit) {
       [out appendFormat:@" text=\"%@\"", escaped];
     }
   }
+  // The paragraph's writing direction, when an app asked for one. Nothing else
+  // here shows it: a right-to-left paragraph of Latin text has the same box and
+  // the same string, and only the pixels differ. `natural` is printed too,
+  // asking for the algorithm's answer not being the same as saying nothing.
+  if (self.rnTextAlign.length > 0) {
+    [out appendFormat:@" text-align=%@", self.rnTextAlign];
+  }
+  if (self.rnTextVerticalAlign.length > 0) {
+    [out appendFormat:@" text-valign=%@", self.rnTextVerticalAlign];
+  }
+  // A <Text>'s own padding and border. Invisible in every other line here --
+  // the frame is the box including the padding, and the string is the same
+  // string -- and it decides where the text is drawn and how wide it wraps.
+  if (_rnTextInset.left != 0 || _rnTextInset.top != 0 || _rnTextInset.right != 0 ||
+      _rnTextInset.bottom != 0) {
+    [out appendFormat:@" text-inset=%g,%g,%g,%g", _rnTextInset.left, _rnTextInset.top,
+                      _rnTextInset.right, _rnTextInset.bottom];
+  }
+  // `<Text selectable>`, and what is selected in it. Neither can be seen any
+  // other way in a dump: the prop changes no box and the highlight is a wash
+  // under the glyphs. The range is in this host's own unit -- UTF-16 code
+  // units, where GTK counts bytes -- so an end-to-end scenario compares
+  // "something is selected" rather than the numbers.
+  if (self.rnTextSelectable) {
+    [out appendString:@" selectable"];
+  }
+  if ([self rnTextSelectionLength] > 0) {
+    [out appendFormat:@" selection=%ld,%ld", (long)[self rnTextSelectionStart],
+                      (long)[self rnTextSelectionLength]];
+  }
+  if (self.rnWritingDirection.length > 0) {
+    [out appendFormat:@" writing-dir=%@", self.rnWritingDirection];
+  }
+  // What a field asked for about spelling, in the same words GTK prints.
+  // Neither appears for a field that said nothing.
+  if (self.rnSpellCheck.length > 0) {
+    [out appendFormat:@" spellcheck=%@", self.rnSpellCheck];
+  }
+  if (self.rnAutoCorrect.length > 0) {
+    [out appendFormat:@" autocorrect=%@", self.rnAutoCorrect];
+  }
+  // What the app asked for about capitalisation and the keyboard, neither of
+  // which this platform can act on. The words are GTK's so the dumps compare.
+  if (self.rnAutoCapitalize.length > 0) {
+    [out appendFormat:@" autocapitalize=%@", self.rnAutoCapitalize];
+  }
+  if (self.rnKeyboardType.length > 0) {
+    [out appendFormat:@" keyboard=%@", self.rnKeyboardType];
+  }
+  // `caretHidden` and `contextMenuHidden`, printed only when asked for. Each is
+  // the absence of something -- a blink, a menu -- so there is nothing else for
+  // a test or the cross-host diff to look at.
+  if (self.rnCaretHidden) {
+    [out appendString:@" caret=hidden"];
+  }
+  if (self.rnContextMenuHidden) {
+    [out appendString:@" context-menu=hidden"];
+  }
+  // The paragraph's text shadow, spelled as GTK spells it: no other line can
+  // show it, a shadowed paragraph having the same text, colour and box. The
+  // standard deviation React Native parsed, which is also what this context was
+  // given.
+  if (_textLayout != nil && _textLayout.shadowColor != nil) {
+    NSColor *colour = [_textLayout.shadowColor
+        colorUsingColorSpace:[NSColorSpace sRGBColorSpace]];
+    [out appendFormat:@" text-shadow=(%g,%g,%g,#%02x%02x%02x%02x)",
+                      (double)_textLayout.shadowOffset.width,
+                      (double)_textLayout.shadowOffset.height,
+                      (double)_textLayout.shadowStandardDeviation,
+                      (unsigned)(colour.redComponent * 255.0 + 0.5),
+                      (unsigned)(colour.greenComponent * 255.0 + 0.5),
+                      (unsigned)(colour.blueComponent * 255.0 + 0.5),
+                      (unsigned)(colour.alphaComponent * 255.0 + 0.5)];
+  }
 
   // A text field's content lives in its NSTextField peer, not in anything this
   // view draws, so it would otherwise be invisible to every test that reads
@@ -1339,6 +3571,12 @@ static const char *RnAppKitImageFitName(RnAppKitImageFit fit) {
   if (_roleName != nil) {
     [out appendFormat:@" role=%@", _roleName];
   }
+  // `testID`, as React Native spelled it rather than as AppKit publishes it,
+  // which is the same division as the role: that this platform really set
+  // `accessibilityIdentifier` is asserted in tests/test_appkit_accessibility.mm.
+  if (self.rnTestId.length > 0) {
+    [out appendFormat:@" testid=%@", self.rnTestId];
+  }
   // Whether Tab stops here, after `role=` because that is where the GTK side
   // prints it and this dump is diffed line by line. Whether it is focused *now*
   // is deliberately not printed: that depends on what the window server did
@@ -1347,6 +3585,11 @@ static const char *RnAppKitImageFitName(RnAppKitImageFit fit) {
   if (self.rnFocusable) {
     [out appendString:@" focusable"];
   }
+  // `accessibilityViewIsModal`, after `focusable` because that is the order the
+  // GTK side prints and this dump is diffed line by line.
+  if (self.rnAccessibleModal) {
+    [out appendString:@" modal"];
+  }
   [out appendString:@"\n"];
 
   for (NSView *child in self.subviews) {