basalt-appkit 0.0.0-rc5 → 0.2.0

package/native/appkit/AppKitMountingManager.mm

@@ -6,16 +6,32 @@
 #import <CoreImage/CoreImage.h>
 
 #include "ComponentRegistry.h"
+#include "BackgroundLayers.h"
+#include "TextShadows.h"
+#include "TextAlignments.h"
+#include "WritingDirections.h"
+#include "BlendModes.h"
+#include "LegacyShadow.h"
+#include "CursorNames.h"
+#include "Filters.h"
+#include "Gradients.h"
 #include "ExpoImageComponent.h"
-#ifdef BASALT_HAS_SKIA
+#include "ImageProgress.h"
+// Either Skia: the 2.x peer in this package or the 3.x one in basalt-skia,
+// which share this header's two functions and are never both linked. See
+// AppKitSkiaPeer.h.
+#if defined(BASALT_HAS_SKIA) || BASALT_HAS_SKIA_GRAPHITE
 #include "AppKitSkiaPeer.h"
 #endif
 #include "UIManagerAccess.h"
 
+#include <cstdint>
+
 #include <react/renderer/components/view/AccessibilityProps.h>
 #include <react/renderer/components/image/ImageEventEmitter.h>
 #include <react/renderer/components/image/ImageProps.h>
 #include <react/renderer/components/scrollview/ScrollViewProps.h>
+#include <react/renderer/components/text/ParagraphProps.h>
 #include <react/renderer/components/text/ParagraphState.h>
 #include <react/renderer/components/view/ViewProps.h>
 #include <react/renderer/core/ConcreteState.h>
@@ -107,10 +123,22 @@ struct PendingMount {
   AppKitMountingManager *manager;
   SurfaceId surfaceId;
   MountingTransaction transaction;
+  // Whether `manager` is still there, and which instance this came from. See
+  // MountingWalk::mountGuard.
+  std::weak_ptr<bool> alive;
+  std::uint64_t epoch;
 };
 
 void applyPendingMount(void *data) {
   std::unique_ptr<PendingMount> pending{static_cast<PendingMount *>(data)};
+  // The guard first: dereferencing `manager` to read its epoch is itself the
+  // use-after-free when the host has already torn it down.
+  if (pending->alive.expired()) {
+    return;
+  }
+  if (pending->manager->mountEpoch() != pending->epoch) {
+    return;
+  }
   pending->manager->applyTransaction(pending->surfaceId, std::move(pending->transaction));
 }
 
@@ -127,15 +155,30 @@ void AppKitMountingManager::executeMount(SurfaceId surfaceId, MountingTransactio
   // The main queue is FIFO, which is what keeps mutation ordering intact, and
   // running one transaction inline while another is queued would break it. iOS
   // and Android marshal here too.
-  auto *pending = new PendingMount{this, surfaceId, std::move(transaction)};
+  auto *pending =
+      new PendingMount{this, surfaceId, std::move(transaction), mountGuard(), mountEpoch()};
   dispatch_async_f(dispatch_get_main_queue(), pending, applyPendingMount);
 }
 
 void AppKitMountingManager::applyTransaction(SurfaceId surfaceId, MountingTransaction &&transaction) {
+  // `maintainVisibleContentPosition` is measured before the mutations and acted
+  // on after them, which is the only place either half can go: the prop is
+  // about how far a child moved *during* a transaction. iOS hangs the same pair
+  // off `mountingTransactionWillMount` and `...DidMount`.
+  scrollViews_.prepareMaintainVisiblePosition();
+
   // The walk itself is in core/MountingWalk.h and is shared with GTK; what is
   // AppKit about mounting is below, in the operations it calls back into.
   applyMutations(transaction.getMutations());
 
+  // And the other half, before anything repaints: the offset moves so that the
+  // child the list was looking at is still under the eye.
+  scrollViews_.adjustForMaintainVisiblePosition();
+
+  // Now that the tree is on screen, anything `autoFocus` asked for can be given
+  // focus. Not before: see AppKitTextInput.h.
+  textInputs_.flushAutoFocus();
+
   // Tell the UIManager the transaction is on screen. Anything registered as a
   // mount hook -- Reanimated's is the one that matters here -- is waiting for
   // this, and without it an animated style is computed every frame, committed
@@ -145,8 +188,81 @@ void AppKitMountingManager::applyTransaction(SurfaceId surfaceId, MountingTransa
   // manager. ReactCxxPlatform does it nowhere, which is a gap in the shared
   // platform rather than in either host: nothing in it had a mount hook until
   // a third-party library brought one.
-  if (auto uiManager = sharedUIManager()) {
-    uiManager->reportMount(surfaceId);
+  // Refuses a surface the UIManager no longer has, which is what a reload's
+  // teardown leaves behind. See core/UIManagerAccess.h.
+  reportMountedSurface(surfaceId);
+
+  // After the mutations, because a view can be labelled by one that mounts after
+  // it: Fabric mounts in tree order, and the label of a field often follows it.
+  applyLabelRelations();
+
+  // And after those, because an announcement is the last word on a transaction:
+  // the text a live region says now is what every mutation in this batch has left
+  // it saying.
+  announceLiveRegions();
+}
+
+void AppKitMountingManager::announceLiveRegions() {
+  if (liveRegions_.empty()) {
+    return;
+  }
+  for (const facebook::react::Tag tag : liveRegions_.tags()) {
+    RnAppKitView *view = viewForTag(tag);
+    if (view == nil) {
+      continue;
+    }
+    // A label stands in for the text when the app set one: an icon-only status
+    // has no paragraph of its own, and the label is what would be read. The GTK
+    // host makes the same choice in the same order.
+    const auto label = liveRegionLabels_.find(tag);
+    std::string text = label != liveRegionLabels_.end() ? label->second : std::string();
+    if (text.empty()) {
+      text = view.rnCollectedText.UTF8String != nullptr ? view.rnCollectedText.UTF8String : "";
+    }
+    const auto politeness = liveRegions_.noticed(tag, text);
+    if (!politeness.has_value()) {
+      continue;
+    }
+    const BOOL assertive = *politeness == basalt::LiveRegionPoliteness::Assertive ? YES : NO;
+    [view rnAnnounce:[NSString stringWithUTF8String:text.c_str()] assertive:assertive];
+    // Logged as well as announced: nothing in an automated run is running
+    // VoiceOver, so this line is how an end-to-end test sees that it happened.
+    LOG(INFO) << "announced" << (assertive ? " (assertive): " : ": ") << text;
+  }
+}
+
+void AppKitMountingManager::applyLabelRelations() {
+  if (labels_.empty()) {
+    return;
+  }
+  for (const auto &change : labels_.changes()) {
+    RnAppKitView *view = viewForTag(change.tag);
+    if (view == nil) {
+      continue;
+    }
+    NSMutableArray<RnAppKitView *> *resolved = [NSMutableArray array];
+    for (const facebook::react::Tag tag : change.labels) {
+      if (RnAppKitView *label = viewForTag(tag); label != nil) {
+        [resolved addObject:label];
+      }
+    }
+    [view setRnLabelledBy:resolved];
+  }
+
+  // The reading order, from the same registry and on the same terms: only what
+  // changed, and an empty list is a view that stopped asking.
+  for (const auto &change : labels_.orderChanges()) {
+    RnAppKitView *view = viewForTag(change.tag);
+    if (view == nil) {
+      continue;
+    }
+    NSMutableArray<RnAppKitView *> *children = [NSMutableArray array];
+    for (const facebook::react::Tag tag : change.labels) {
+      if (RnAppKitView *child = viewForTag(tag); child != nil) {
+        [children addObject:child];
+      }
+    }
+    [view setRnAccessibilityOrder:children];
   }
 }
 
@@ -204,6 +320,17 @@ void AppKitMountingManager::setUIManager(std::weak_ptr<facebook::react::UIManage
   setSharedUIManager(std::move(uiManager));
 }
 
+void AppKitMountingManager::setSchedulerTaskExecutor(
+    facebook::react::SchedulerTaskExecutor &&schedulerTaskExecutor) noexcept {
+  // A null executor means `destroyReactInstance`: the Scheduler and the
+  // SurfaceManager are about to go, and anything this already queued to the main
+  // queue would be applied against them. Non-null means a new instance, which
+  // needs nothing from here.
+  if (!schedulerTaskExecutor) {
+    invalidatePendingMounts();
+  }
+}
+
 ComponentRegistryFactory AppKitMountingManager::getComponentRegistryFactory() {
   return facebook::react::getDefaultComponentRegistryFactory();
 }
@@ -261,11 +388,17 @@ void AppKitMountingManager::removeChild(RnAppKitView *parent, RnAppKitView *chil
 }
 
 void AppKitMountingManager::forgetTag(Tag tag) {
+  liveRegions_.forget(tag);
+  liveRegionLabels_.erase(tag);
+  // Both sides of a label relation: a view that goes away stops naming anything
+  // and stops being nameable, and a relation left pointing at it would have
+  // VoiceOver read a view that is no longer on screen.
+  labels_.forget(tag);
   scrollViews_.remove(tag);
   textInputs_.remove(tag);
   imageUris_.erase(tag);
   switchValues_.erase(tag);
-#ifdef BASALT_HAS_SKIA
+#if defined(BASALT_HAS_SKIA) || BASALT_HAS_SKIA_GRAPHITE
   // Unregisters the canvas and takes its layer off the view. This is the one
   // moment a view is known to be finished with, which matters more here than
   // elsewhere: a canvas left registered keeps a Metal layer and a GPU surface
@@ -276,6 +409,31 @@ void AppKitMountingManager::forgetTag(Tag tag) {
 
 namespace {
 
+// Hands a view the frames of an animated image, or clears any it had.
+//
+// Asked of the loader rather than carried in the load callback, because being
+// animated is a property of the file and the callback's job is the pixels. The
+// arrays are the loader's and are the same arrays each time, which is what lets
+// the view tell a re-mount from a new animation.
+void applyImageAnimation(AppKitImageLoader *loader, RnAppKitView *view, const std::string &uri) {
+  if (view == nil) {
+    return;
+  }
+  const AppKitImageLoader::Animation *animation =
+      uri.empty() ? nullptr : loader->animation(uri);
+  if (animation == nullptr) {
+    [view setRnImageFrames:nil delaysMs:nil loopCount:0];
+    return;
+  }
+  [view setRnImageFrames:animation->frames
+               delaysMs:animation->delaysMs
+              loopCount:animation->loopCount];
+  // And drive it, which the view deliberately does not do for itself; see
+  // rnStartImageAnimation. Idempotent, so the re-apply on every mutation costs
+  // nothing.
+  [view rnStartImageAnimation];
+}
+
 RnAppKitImageFit toImageFit(ImageResizeMode mode) {
   switch (mode) {
     case ImageResizeMode::Contain:
@@ -319,6 +477,10 @@ void AppKitMountingManager::applyImage(RnAppKitView *view, const ShadowView &sha
   // unqualified ImageSource resolves to that one.
   facebook::react::ImageSource source{};
   facebook::react::SharedColor tint{};
+  // blurRadius alongside the tint, captured the same way: each branch below
+  // knows its own props type, and both props are applied together after them.
+  // expo-image has no blur prop, so that branch leaves this at zero.
+  CGFloat blurRadius = 0;
 
   if (isExpoImage) {
     const auto props = std::dynamic_pointer_cast<const facebook::react::ExpoImageProps>(shadowView.props);
@@ -344,13 +506,14 @@ void AppKitMountingManager::applyImage(RnAppKitView *view, const ShadowView &sha
     if (props->tintColor) {
       tint = *props->tintColor;
     }
+    blurRadius = (CGFloat)props->blurRadius;
   }
 
   const std::string uri = source.uri;
   const Tag tag = shadowView.tag;
 
-  // Applied before the load rather than in its callback: the tint is a prop and
-  // the image is a loader's answer, and either can arrive first.
+  // Applied before the load rather than in its callback: the tint and the blur
+  // are props where the image is a loader's answer, and either can arrive first.
   if (RnAppKitView *tinted = viewForTag(tag); tinted != nil) {
     if (tint) {
       const ColorComponents components = colorComponentsFromColor(tint);
@@ -361,6 +524,7 @@ void AppKitMountingManager::applyImage(RnAppKitView *view, const ShadowView &sha
     } else {
       [tinted setRnImageTint:nil];
     }
+    [tinted setRnImageBlur:blurRadius];
   }
 
   // A mutation that changed only layout must not restart the load, or an
@@ -370,9 +534,10 @@ void AppKitMountingManager::applyImage(RnAppKitView *view, const ShadowView &sha
   const auto known = imageUris_.find(tag);
   if (known != imageUris_.end() && known->second == uri) {
     if (!uri.empty()) {
-      imageLoader_->load(uri, [this, tag, fit](CGImageRef image, const std::string &) {
+      imageLoader_->load(uri, [this, tag, fit, uri](CGImageRef image, const std::string &) {
         if (RnAppKitView *target = viewForTag(tag); target != nil) {
           [target setRnImage:image fit:fit];
+          applyImageAnimation(imageLoader_.get(), target, uri);
         }
       });
     }
@@ -383,6 +548,7 @@ void AppKitMountingManager::applyImage(RnAppKitView *view, const ShadowView &sha
 
   if (uri.empty()) {
     [view setRnImage:nullptr fit:fit];
+    applyImageAnimation(imageLoader_.get(), view, uri);
     return;
   }
 
@@ -411,12 +577,34 @@ void AppKitMountingManager::applyImage(RnAppKitView *view, const ShadowView &sha
     emitter->onLoadStart();
   }
 
+  // `<Image onProgress>`, for an http source: the bytes as they arrive, from
+  // the fetching thread. The emitter is looked up *here*, on the main thread,
+  // and captured -- `eventEmitterForTag` reads a map only this thread may touch
+  // (see core/MountingWalk.h), and a progress tick arrives on another.
+  //
+  // Which ticks become events is core/ImageProgress.h's: all three hosts gate
+  // them the same way, and the arithmetic is testable where the lambda is not.
+  // expo-image has no progress event, so its branch reports nothing.
+  basalt::ImageProgress reportProgress;
+  if (!isExpoImage) {
+    if (auto emitter =
+            std::dynamic_pointer_cast<const ImageEventEmitter>(eventEmitterForTag(tag))) {
+      auto ticker = std::make_shared<basalt::ImageProgressTicker>();
+      reportProgress = [emitter, ticker](long long loaded, long long total) {
+        if (const auto progress = ticker->tick(loaded, total)) {
+          emitter->onProgress(*progress, loaded, total);
+        }
+      };
+    }
+  }
+
   imageLoader_->load(uri, [this, tag, fit, source, isExpoImage](CGImageRef image,
                                                               const std::string &error) {
     // The view may have been deleted while the image was in flight, which is
     // why this looks the tag up again rather than capturing the view.
     if (RnAppKitView *target = viewForTag(tag); target != nil) {
       [target setRnImage:image fit:fit];
+      applyImageAnimation(imageLoader_.get(), target, source.uri);
     }
 
     if (image == nullptr) {
@@ -446,12 +634,26 @@ void AppKitMountingManager::applyImage(RnAppKitView *view, const ShadowView &sha
       return;
     }
     if (image != nullptr) {
-      emitter->onLoad(source);
+      // The decoded size, which the props do not carry for a remote image:
+      // `onLoad`'s payload is `source.size` times `source.scale`, so a source
+      // that arrived as `{uri}` and nothing else reported zero by zero on
+      // every host. iOS fills it in the same place and the same way, from the
+      // image it has just decoded -- `RCTImageComponentView`'s
+      // `didReceiveImage:` assigns `imageSource.size` before emitting.
+      //
+      // Divided by the scale because the payload multiplies by it: the event
+      // reports pixels, and a 2x asset is half as many points.
+      facebook::react::ImageSource loaded = source;
+      const double scale = loaded.scale > 0 ? loaded.scale : 1.0;
+      loaded.size = {static_cast<facebook::react::Float>(CGImageGetWidth(image) / scale),
+                     static_cast<facebook::react::Float>(CGImageGetHeight(image) / scale)};
+      emitter->onLoad(loaded);
     } else {
       emitter->onError(facebook::react::ImageErrorInfo{.error = error});
     }
     emitter->onLoadEnd();
-  });
+  },
+                     std::move(reportProgress));
 }
 
 void AppKitMountingManager::updateView(RnAppKitView *view, const ShadowView &shadowView) {
@@ -464,7 +666,7 @@ void AppKitMountingManager::updateView(RnAppKitView *view, const ShadowView &sha
   // needed the same swap for the same reason.
   applyTextInput(view, shadowView);
   applyAccessibility(view, shadowView);
-#ifdef BASALT_HAS_SKIA
+#if defined(BASALT_HAS_SKIA) || BASALT_HAS_SKIA_GRAPHITE
   // After applyProps, which is what puts nativeID on the view -- a canvas
   // registers itself by that id and cannot be attached before it is there. And
   // before applyLayoutMetrics only incidentally: the size it reads comes from the
@@ -658,7 +860,63 @@ void AppKitMountingManager::applyText(RnAppKitView *view, const ShadowView &shad
   // Built through the same function the measurement seam uses, which is what
   // makes the painted lines break where the measured ones did. The width is not
   // baked in -- the view draws at whatever size Yoga gave it.
-  [view setRnTextLayout:basalt::buildTextLayout(data.attributedString, data.paragraphAttributes)];
+  // `adjustsFontSizeToFit` again, against the frame rather than the constraint:
+  // the text is painted into the box Yoga assigned, which is the box it has to
+  // fit. Measuring and painting run the same search through the same builder,
+  // which is what keeps the painted size the measured one.
+  // The *content* box, not the frame: a <Text> may carry padding and a border,
+  // and Yoga measured the paragraph against the size inside them. See
+  // RnAppKitView's rnTextInset.
+  const auto &insets = shadowView.layoutMetrics.contentInsets;
+  const basalt::FontFit fit =
+      basalt::textFitScale(data.attributedString,
+                           data.paragraphAttributes,
+                           static_cast<float>(shadowView.layoutMetrics.frame.size.width -
+                                              insets.left - insets.right),
+                           static_cast<float>(shadowView.layoutMetrics.frame.size.height -
+                                              insets.top - insets.bottom));
+  RnTextLayout *layout =
+      basalt::buildTextLayout(data.attributedString, data.paragraphAttributes, fit);
+
+  // The paragraph's text shadow, resolved in core/TextShadows.h: the props are
+  // per fragment and one Core Text frame draws them all, so the first fragment
+  // that asks for a shadow decides it. The standard deviation crosses unchanged,
+  // `CGContextSetShadowWithColor`'s blur being one, where the GTK side doubles
+  // it for GSK.
+  // The paragraph's writing direction, for the dump: the paragraph style the
+  // layout carries is what actually decides it.
+  const char *const direction =
+      basalt::writingDirectionName(basalt::writingDirection(data.attributedString));
+  view.rnWritingDirection = direction != nullptr ? @(direction) : nil;
+  // And the edge its text sits against, resolved: `textAlign` is relative in
+  // two of its five spellings, so the prop is not the answer. See
+  // core/TextAlignments.h.
+  view.rnTextAlign = @(basalt::paragraphTextAlignmentName(data.attributedString));
+  const char *const verticalAlign =
+      basalt::textAlignVerticalName(data.paragraphAttributes.textAlignVertical);
+  view.rnTextVerticalAlign = verticalAlign != nullptr ? @(verticalAlign) : nil;
+  // The padding and border the paragraph sits inside, which the view draws at
+  // and hit-tests against. Yoga has already laid the box out with them; this is
+  // what stops the text being drawn underneath its own padding.
+  view.rnTextInset = NSEdgeInsetsMake(insets.top, insets.left, insets.bottom, insets.right);
+
+  // `<Text selectable>`, which `userSelect` also arrives in: React Native's own
+  // `Text.js` maps the style onto the prop. From the props rather than the
+  // state, unlike the text itself.
+  const auto paragraphProps =
+      std::dynamic_pointer_cast<const facebook::react::ParagraphProps>(shadowView.props);
+  [view setRnTextSelectable:paragraphProps != nullptr && paragraphProps->isSelectable ? YES : NO];
+
+  if (const auto shadow = basalt::textShadow(data.attributedString)) {
+    layout.shadowOffset = CGSizeMake(shadow->dx, shadow->dy);
+    layout.shadowStandardDeviation = shadow->standardDeviation;
+    layout.shadowColor = [NSColor colorWithSRGBRed:shadow->red
+                                             green:shadow->green
+                                              blue:shadow->blue
+                                             alpha:shadow->alpha];
+  }
+
+  [view setRnTextLayout:layout];
 }
 
 void AppKitMountingManager::applyProps(RnAppKitView *view, const ShadowView &shadowView) {
@@ -752,6 +1010,24 @@ void AppKitMountingManager::applyProps(RnAppKitView *view, const ShadowView &sha
   // The app's nativeID, which marks a view for a behaviour React Native has
   // no prop for -- a drop target today. See core/DragAndDrop.h, and
   // core/TitleBarRegions.h for the older use of the same idea.
+  // Which view this nativeID names, which is what `accessibilityLabelledBy`
+  // needs: that prop names other views by their nativeID and nothing else here
+  // can look one up. See core/LabelRegistry.h.
+  labels_.setNativeId(shadowView.tag, props->nativeId);
+  // `experimental_accessibilityOrder`, which names children by their nativeID
+  // the way `accessibilityLabelledBy` names labels, and is resolved by the same
+  // registry for the same reason: a view can be named before it mounts.
+  labels_.setAccessibilityOrder(shadowView.tag, props->accessibilityOrder);
+
+  // `testID`, which is not `nativeID`: one is how an app names a view to
+  // itself, the other is how something outside the process finds it.
+  view.rnTestId = props->testId.empty()
+      ? nil
+      : [NSString stringWithUTF8String:props->testId.c_str()];
+
+  // `accessibilityViewIsModal`, which keeps VoiceOver inside a <Modal>.
+  view.rnAccessibleModal = props->accessibilityViewIsModal ? YES : NO;
+
   view.rnNativeId = props->nativeId.empty()
       ? nil
       : [NSString stringWithUTF8String:props->nativeId.c_str()];
@@ -774,6 +1050,269 @@ void AppKitMountingManager::applyProps(RnAppKitView *view, const ShadowView &sha
       view.rnPointerEvents = RnAppKitPointerEventsAuto;
       break;
   }
+
+  // backgroundImage: linear and radial gradients. The angle or the ending shape,
+  // the box size and CSS's colour-stop fixup are resolved here through
+  // core/Gradients.h, shared with the GTK host, and the view is handed points
+  // and radii and a list of stops.
+  //
+  // One list rather than two, because `background-image` is one list and the
+  // first in it is the one on top: two lists would lose the order between a
+  // radial gradient and a linear one.
+  //
+  // Against this mutation's own frame, and applyProps runs on every update, so a
+  // resized view gets a resized gradient without the view layer knowing anything
+  // about angles or corners.
+  {
+    const auto &metrics = shadowView.layoutMetrics;
+    // The two areas CSS gives a background: the painting area is the border box,
+    // which it is clipped to, and the positioning area is the padding box, which
+    // sizes and positions it. getPaddingFrame's origin is already relative to
+    // the view, being the border widths.
+    const basalt::BackgroundArea painting{
+        0.0F, 0.0F, (float)metrics.frame.size.width, (float)metrics.frame.size.height};
+    const auto paddingFrame = metrics.getPaddingFrame();
+    const basalt::BackgroundArea positioning{(float)paddingFrame.origin.x,
+                                             (float)paddingFrame.origin.y,
+                                             (float)paddingFrame.size.width,
+                                             (float)paddingFrame.size.height};
+
+    std::vector<RnAppKitGradient> gradients;
+    std::vector<std::vector<RnAppKitGradientStop>> stops;
+    gradients.reserve(props->backgroundImage.size());
+    stops.reserve(props->backgroundImage.size());
+    for (size_t index = 0; index < props->backgroundImage.size(); index++) {
+      const auto &image = props->backgroundImage[index];
+      // Each list is indexed modulo its own length, which is CSS's rule for a
+      // list shorter than the image list and is what iOS does.
+      const basalt::BackgroundLayer layer = basalt::resolveBackgroundLayer(
+          positioning,
+          painting,
+          basalt::backgroundSizeAt(props->backgroundSize, index),
+          basalt::backgroundPositionAt(props->backgroundPosition, index),
+          basalt::backgroundRepeatAt(props->backgroundRepeat, index));
+      if (layer.empty()) {
+        continue;
+      }
+      // The gradient is resolved against the image's size and then offset to
+      // where the image goes: resolving against the view would ignore
+      // `backgroundSize` even with the rectangle right.
+      const auto width = layer.width;
+      const auto height = layer.height;
+
+      RnAppKitGradient converted{};
+      converted.area = CGRectMake(layer.x, layer.y, layer.width, layer.height);
+      converted.tile = CGRectMake(layer.tileX, layer.tileY, layer.tileWidth, layer.tileHeight);
+      converted.repeats = layer.repeats();
+      const std::vector<facebook::react::ColorStop> *colorStops = nullptr;
+      float rayLength = 0.0F;
+
+      if (std::holds_alternative<facebook::react::LinearGradient>(image)) {
+        const auto &gradient = std::get<facebook::react::LinearGradient>(image);
+        const basalt::GradientLine line = basalt::linearGradientLine(gradient, width, height);
+        converted.kind = RnAppKitGradientKindLinear;
+        converted.start = CGPointMake(line.startX + layer.x, line.startY + layer.y);
+        converted.end = CGPointMake(line.endX + layer.x, line.endY + layer.y);
+        colorStops = &gradient.colorStops;
+        rayLength = line.length();
+      } else {
+        const auto &gradient = std::get<facebook::react::RadialGradient>(image);
+        const basalt::GradientEllipse shape =
+            basalt::radialGradientEllipse(gradient, width, height);
+        converted.kind = RnAppKitGradientKindRadial;
+        converted.center = CGPointMake(shape.centerX + layer.x, shape.centerY + layer.y);
+        converted.radiusX = shape.radiusX;
+        converted.radiusY = shape.radiusY;
+        colorStops = &gradient.colorStops;
+        rayLength = shape.rayLength();
+      }
+
+      const auto resolved = basalt::resolveGradientStops(*colorStops, rayLength);
+      if (resolved.empty()) {
+        continue;
+      }
+      std::vector<RnAppKitGradientStop> stopList;
+      stopList.reserve(resolved.size());
+      for (const auto &stop : resolved) {
+        RnAppKitGradientStop one{};
+        one.offset = stop.offset;
+        one.color[0] = stop.red;
+        one.color[1] = stop.green;
+        one.color[2] = stop.blue;
+        one.color[3] = stop.alpha;
+        stopList.push_back(one);
+      }
+      // Reserved above, so pushing cannot reallocate and the pointer handed over
+      // below stays good for this block. The view copies what it is given.
+      stops.push_back(std::move(stopList));
+      converted.stops = stops.back().data();
+      converted.stopCount = (NSInteger)stops.back().size();
+      gradients.push_back(converted);
+    }
+    [view setRnGradients:gradients.data() count:(NSInteger)gradients.size()];
+  }
+
+  // boxShadow. React Native's BoxShadow carries the six CSS fields and the view
+  // layer takes the same six, so nothing is converted here: it decides what a
+  // shadow is made of on this platform, and this decides nothing.
+  //
+  // The list also carries the older iOS shadow props, converted in
+  // core/LegacyShadow.h: one mechanism from here down, so a view with
+  // `shadowOpacity` and a view with `boxShadow` take the same path.
+  {
+    const std::vector<facebook::react::BoxShadow> all = basalt::allShadows(*props);
+    std::vector<RnAppKitBoxShadow> shadows;
+    shadows.reserve(all.size());
+    for (const auto &shadow : all) {
+      RnAppKitBoxShadow converted{};
+      converted.dx = (CGFloat)shadow.offsetX;
+      converted.dy = (CGFloat)shadow.offsetY;
+      converted.blur = (CGFloat)shadow.blurRadius;
+      converted.spread = (CGFloat)shadow.spreadDistance;
+      converted.inset = shadow.inset;
+      if (shadow.color) {
+        const ColorComponents components = colorComponentsFromColor(shadow.color);
+        converted.color[0] = components.red;
+        converted.color[1] = components.green;
+        converted.color[2] = components.blue;
+        converted.color[3] = components.alpha;
+      }
+      shadows.push_back(converted);
+    }
+    [view setRnBoxShadows:shadows.data() count:(NSInteger)shadows.size()];
+  }
+
+  // The outline: CSS's, drawn outside the box and taking no layout space, so
+  // nothing about it touches the frame. One width, one colour, one offset and one
+  // style for the whole ring, unlike the border's four of each.
+  {
+    CGFloat colour[4] = {0, 0, 0, 0};
+    if (props->outlineColor) {
+      const ColorComponents components = colorComponentsFromColor(props->outlineColor);
+      colour[0] = components.red;
+      colour[1] = components.green;
+      colour[2] = components.blue;
+      colour[3] = components.alpha;
+    }
+    RnAppKitBorderStyle style = RnAppKitBorderStyleSolid;
+    switch (props->outlineStyle) {
+      case facebook::react::OutlineStyle::Dotted:
+        style = RnAppKitBorderStyleDotted;
+        break;
+      case facebook::react::OutlineStyle::Dashed:
+        style = RnAppKitBorderStyleDashed;
+        break;
+      case facebook::react::OutlineStyle::Solid:
+        break;
+    }
+    [view setRnOutlineWidth:(CGFloat)props->outlineWidth
+                     offset:(CGFloat)props->outlineOffset
+                      color:colour
+                      style:style];
+  }
+
+  // filter. The arithmetic is core/Filters.h's and is shared with the GTK host:
+  // the list of CSS functions comes to one colour matrix, one blur and one
+  // opacity, and the view layer turns the first two into Core Image filters.
+  //
+  // A dropShadow() in the list is reported rather than applied -- it is the one
+  // function that does not commute with the others. Logged once per view that
+  // asks, because silence here looks like a working filter.
+  {
+    const basalt::ResolvedFilters resolved = basalt::resolveFilters(props->filter);
+    if (resolved.empty()) {
+      [view setRnFilters:nullptr];
+    } else {
+      RnAppKitFilters filters{};
+      filters.hasMatrix = resolved.hasMatrix;
+      for (int i = 0; i < 16; i++) {
+        filters.matrix[i] = resolved.matrix.m[i];
+      }
+      for (int i = 0; i < 4; i++) {
+        filters.offset[i] = resolved.matrix.offset[i];
+      }
+      filters.blurRadius = resolved.blurRadius;
+      filters.opacity = resolved.opacity;
+
+      // `dropShadow()`, which this host draws as the layer's own shadow. The
+      // standard deviation crosses unchanged, `CALayer.shadowRadius` being one,
+      // where the GTK side doubles it for GSK.
+      std::vector<RnAppKitFilterShadow> shadows;
+      shadows.reserve(resolved.dropShadows.size());
+      for (const auto &shadow : resolved.dropShadows) {
+        RnAppKitFilterShadow converted{};
+        converted.dx = (CGFloat)shadow.dx;
+        converted.dy = (CGFloat)shadow.dy;
+        converted.standardDeviation = (CGFloat)shadow.standardDeviation;
+        converted.color[0] = shadow.red;
+        converted.color[1] = shadow.green;
+        converted.color[2] = shadow.blue;
+        converted.color[3] = shadow.alpha;
+        shadows.push_back(converted);
+      }
+      filters.shadows = shadows.data();
+      filters.shadowCount = (NSInteger)shadows.size();
+      // The view copies what it keeps, so the vector may go out of scope.
+      [view setRnFilters:&filters];
+
+    }
+  }
+
+  // hitSlop, which grows what a press can land on without moving a pixel.
+  // RnAppKitHitTest is the only reader; see -rnHitArea.
+  {
+    const CGFloat insets[4] = {
+        (CGFloat)props->hitSlop.top,
+        (CGFloat)props->hitSlop.right,
+        (CGFloat)props->hitSlop.bottom,
+        (CGFloat)props->hitSlop.left,
+    };
+    [view setRnHitSlop:insets];
+  }
+
+  // The `cursor` style property, as a CSS keyword. core/CursorNames.h is shared
+  // with the GTK host, which hands the same keyword to GDK; what macOS has no
+  // cursor for is decided in the view layer, beside the NSCursors.
+  {
+    const char *name = basalt::cursorName(props->cursor);
+    [view setRnCursorName:name != nullptr ? [NSString stringWithUTF8String:name] : nil];
+  }
+
+  // `mixBlendMode`, also as a CSS keyword and also shared: Core Image has a
+  // blend-mode filter per CSS mode, so the view layer maps the keyword onto one
+  // and Core Animation does the blending.
+  {
+    const char *name = basalt::blendModeName(props->mixBlendMode);
+    [view setRnBlendModeName:name != nullptr ? [NSString stringWithUTF8String:name] : nil];
+  }
+
+  // borderStyle. React Native carries one per side and a stroked path carries
+  // one dash pattern, so the first side that asks for something other than solid
+  // decides the whole outline, exactly as on GTK. A border with different styles
+  // per side is rare enough to be worth that; see backlog/correctness.md.
+  //
+  // From the *resolved* metrics, like the widths and the colours: the raw
+  // `props->borderStyles` is a cascade of optionals with a slot per spelling, and
+  // `borderStyle: 'dashed'` sets the `all` slot rather than the four sides. The
+  // GTK side read the sides and so drew every dashed border solid.
+  {
+    const auto &styles =
+        props->resolveBorderMetrics(shadowView.layoutMetrics).borderStyles;
+    RnAppKitBorderStyle style = RnAppKitBorderStyleSolid;
+    const facebook::react::BorderStyle sides[4] = {
+        styles.top, styles.right, styles.bottom, styles.left};
+    for (const auto &side : sides) {
+      if (side == facebook::react::BorderStyle::Dotted) {
+        style = RnAppKitBorderStyleDotted;
+        break;
+      }
+      if (side == facebook::react::BorderStyle::Dashed) {
+        style = RnAppKitBorderStyleDashed;
+        break;
+      }
+    }
+    [view setRnBorderStyle:style];
+  }
 }
 
 namespace {
@@ -821,6 +1360,21 @@ void AppKitMountingManager::applyAccessibility(RnAppKitView *view, const ShadowV
   const std::string role = effectiveRole(shadowView);
   [view setRnAccessibleRole:role.empty() ? nil : [NSString stringWithUTF8String:role.c_str()]];
 
+  // `accessibilityLiveRegion`: a status message to read out when it changes.
+  // Recorded here and acted on after the transaction, the text being whatever the
+  // region says once every mutation in the batch has landed.
+  liveRegions_.setPoliteness(shadowView.tag, props->accessibilityLiveRegion);
+  if (props->accessibilityLiveRegion == facebook::react::AccessibilityLiveRegion::None) {
+    liveRegionLabels_.erase(shadowView.tag);
+  } else {
+    liveRegionLabels_[shadowView.tag] = props->accessibilityLabel;
+  }
+
+  // `accessibilityLabelledBy`: other views, named by their nativeID, whose text
+  // names this one. Only recorded here -- the resolution needs every view in the
+  // transaction to have been seen, so it happens once at the end of the mount.
+  labels_.setLabelledBy(shadowView.tag, props->accessibilityLabelledBy.value);
+
   // A label given in props wins. Falling back to a Paragraph's own text means a
   // plain <Text> announces itself without the app having to repeat the string
   // in an accessibilityLabel.
@@ -898,6 +1452,22 @@ void AppKitMountingManager::applyAccessibility(RnAppKitView *view, const ShadowV
                                   busy:RnAppKitAccessibleUnset];
   }
 
+  // After the state, deliberately: AppKit carries both `checked` and
+  // accessibilityValue in one property, and an explicit value is the app's own
+  // word so it wins over one derived from a checkbox. See the setter.
+  //
+  // Each part passed as nil when absent, so a view that gave only `now` is not
+  // announced as sitting at the bottom of a range it never mentioned.
+  {
+    const auto &value = props->accessibilityValue;
+    [view setRnAccessibleValueMin:value.min.has_value() ? @(*value.min) : nil
+                              max:value.max.has_value() ? @(*value.max) : nil
+                              now:value.now.has_value() ? @(*value.now) : nil
+                             text:value.text.has_value()
+                                      ? [NSString stringWithUTF8String:value.text->c_str()]
+                                      : nil];
+  }
+
   // Keyboard focus. `accessible` is the signal because React Native's
   // `focusable` prop never reaches this platform -- see AppKitFocus.h -- and
   // because it is what <Pressable> sets on everything it renders. A hidden view