react-native-tinyui 0.5.0 → 1.1.0

package/ios/Menu/TinyuiMenuView.mm

@@ -3,7 +3,6 @@
 #import "TinyuiMenuView.h"
 
 #import <React/RCTConversions.h>
-#import <React/UIView+React.h>
 #import <react/utils/FollyConvert.h>
 
 #import <react/renderer/components/TinyuiSpec/ComponentDescriptors.h>
@@ -44,24 +43,15 @@ using namespace facebook::react;
   return self;
 }
 
-- (void)didMoveToWindow
-{
-  [super didMoveToWindow];
-  if (self.window != nil) {
-    _menuProvider.parentViewController = [self reactViewController];
-  }
-}
-
 #pragma mark - React lifecycle
 
 - (void)mountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView
                           index:(NSInteger)index
 {
-  // TinyuiMenuView renders its trigger as a child; we hand it to the
-  // provider, which uses it as the SwiftUI `Menu` label.
+  // TinyuiMenuView renders its trigger as a child; the UIButton-backed
+  // provider uses it as the menu's visual content.
   _triggerView = childComponentView;
   _menuProvider.triggerView = childComponentView;
-  [_menuProvider addSubview:childComponentView];
 }
 
 - (void)unmountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView
@@ -74,6 +64,18 @@ using namespace facebook::react;
   }
 }
 
+#pragma mark - Commands
+
+- (void)handleCommand:(const NSString *)commandName args:(const NSArray *)args
+{
+  RCTTinyuiMenuViewHandleCommand(self, commandName, args);
+}
+
+- (void)open
+{
+  [_menuProvider openMenu];
+}
+
 #pragma mark - Props
 
 - (void)updateProps:(Props::Shared const &)props
@@ -82,17 +84,12 @@ using namespace facebook::react;
   const auto &oldMenuProps = *std::static_pointer_cast<TinyuiMenuViewProps const>(_props);
   const auto &newMenuProps = *std::static_pointer_cast<TinyuiMenuViewProps const>(props);
 
-  if (oldMenuProps.menuConfig != newMenuProps.menuConfig) {
-    _menuProvider.menuConfig = convertFollyDynamicToId(newMenuProps.menuConfig);
-  }
-  if (oldMenuProps.title != newMenuProps.title) {
-    _menuProvider.title = RCTNSStringFromString(newMenuProps.title);
-  }
-  if (oldMenuProps.hasPrimaryAction != newMenuProps.hasPrimaryAction) {
-    _menuProvider.hasPrimaryAction = newMenuProps.hasPrimaryAction;
-  }
-  if (oldMenuProps.disabled != newMenuProps.disabled) {
-    _menuProvider.disabled = newMenuProps.disabled;
+  if (oldMenuProps.menuConfig != newMenuProps.menuConfig ||
+      oldMenuProps.title != newMenuProps.title ||
+      oldMenuProps.disabled != newMenuProps.disabled) {
+    [_menuProvider updateWithMenuConfig:convertFollyDynamicToId(newMenuProps.menuConfig)
+                                 title:RCTNSStringFromString(newMenuProps.title)
+                              disabled:newMenuProps.disabled];
   }
 
   [super updateProps:props oldProps:oldProps];
@@ -100,23 +97,15 @@ using namespace facebook::react;
 
 #pragma mark - TinyuiMenuViewDelegate
 
-- (void)onItemPressWithId:(NSString *)identifier
-{
-  if (_eventEmitter == nullptr) {
-    return;
-  }
-  std::static_pointer_cast<const TinyuiMenuViewEventEmitter>(_eventEmitter)
-      ->onItemPress(TinyuiMenuViewEventEmitter::OnItemPress{
-          .id = std::string(identifier.UTF8String ?: "")});
-}
-
-- (void)onPrimaryAction
+- (void)onActionPressWithId:(NSString *)identifier title:(NSString *)title
 {
   if (_eventEmitter == nullptr) {
     return;
   }
   std::static_pointer_cast<const TinyuiMenuViewEventEmitter>(_eventEmitter)
-      ->onPrimaryAction(TinyuiMenuViewEventEmitter::OnPrimaryAction{});
+      ->onActionPress(TinyuiMenuViewEventEmitter::OnActionPress{
+          .id = std::string(identifier.UTF8String ?: ""),
+          .title = std::string(title.UTF8String ?: "")});
 }
 
 @end

package/ios/Popover/TinyuiPopoverProvider.swift

@@ -1,111 +1,265 @@
-import SwiftUI
 import UIKit
 
+@objc public protocol TinyuiPopoverViewDelegate: AnyObject {
+  func onIsPresentedChange(isPresented: Bool)
+}
+
 /**
- * UIKit bridge between the Fabric `TinyuiPopoverView` component and the
- * SwiftUI `TinyuiPopoverSwiftUIView`. Hosts the SwiftUI view through a
- * `UIHostingController`, mirroring react-native-pager-view's bridge.
+ * UIKit implementation used by the Fabric `TinyuiPopoverView` component.
+ * Presents the React Native content view with `UIPopoverPresentationController`
+ * and keeps the trigger view in the normal React Native view hierarchy.
  */
-@objc public class TinyuiPopoverProvider: UIView {
+@objc public final class TinyuiPopoverProvider: UIView,
+  UIPopoverPresentationControllerDelegate
+{
   private weak var delegate: TinyuiPopoverViewDelegate?
-  private var hostingController: UIHostingController<TinyuiPopoverSwiftUIView>?
-  private var props = TinyuiPopoverProps()
+  private var presentedViewController: UIViewController?
+  private var isDismissing = false
+  private var isPresentationUpdateScheduled = false
 
   /// Presenting view controller, resolved by the component view from its
   /// React view controller hierarchy.
   @objc public weak var parentViewController: UIViewController? {
     didSet {
-      if window != nil {
-        setupView()
-      }
+      guard oldValue !== parentViewController else { return }
+      schedulePresentationUpdate()
     }
   }
 
   @objc public var triggerView: UIView? {
     didSet {
-      props.triggerView = triggerView
+      guard oldValue !== triggerView else { return }
+      schedulePresentationUpdate()
     }
   }
 
   @objc public var contentView: UIView? {
     didSet {
-      props.contentView = contentView
+      guard oldValue !== contentView else { return }
+      oldValue?.removeFromSuperview()
+      contentSize = .zero
+      schedulePresentationUpdate()
+    }
+  }
+
+  /// The content wrapper's Yoga size, synchronized after each Fabric commit.
+  /// Keep it separate from the presentation controller's UIKit layout.
+  @objc public var contentSize: CGSize = .zero {
+    didSet {
+      guard oldValue != contentSize else { return }
+      schedulePresentationUpdate()
     }
   }
 
   @objc public var isPresented: Bool = false {
     didSet {
-      props.isPresented = isPresented
+      guard oldValue != isPresented else { return }
+      schedulePresentationUpdate()
     }
   }
 
   @objc public var attachmentAnchor: String = "center" {
     didSet {
-      props.attachmentAnchor = attachmentAnchor
+      guard oldValue != attachmentAnchor else { return }
+      schedulePresentationUpdate()
     }
   }
 
   @objc public var arrowEdge: String = "none" {
     didSet {
-      props.arrowEdge = arrowEdge
+      guard oldValue != arrowEdge else { return }
+      schedulePresentationUpdate()
     }
   }
 
   @objc public convenience init(delegate: TinyuiPopoverViewDelegate) {
-    self.init()
+    self.init(frame: .zero)
     self.delegate = delegate
   }
 
   override public func didMoveToWindow() {
     super.didMoveToWindow()
-    if window != nil {
-      setupView()
-    }
+    schedulePresentationUpdate()
   }
 
   override public func layoutSubviews() {
     super.layoutSubviews()
-    if window != nil {
-      setupView()
+    updatePresentedPopoverConfiguration()
+  }
+
+  private func schedulePresentationUpdate() {
+    guard !isPresentationUpdateScheduled else { return }
+    isPresentationUpdateScheduled = true
+
+    DispatchQueue.main.async { [weak self] in
+      guard let self else { return }
+      self.isPresentationUpdateScheduled = false
+      self.updatePresentation()
     }
   }
 
-  private func setupView() {
-    if hostingController != nil {
-      syncParentViewController()
+  private func updatePresentation() {
+    guard isPresented, window != nil else {
+      dismissPopoverIfNeeded()
       return
     }
 
-    guard let parentViewController else {
+    guard
+      presentedViewController == nil,
+      let parentViewController,
+      let triggerView,
+      triggerView.window != nil,
+      contentView != nil,
+      let preferredContentSize
+    else {
+      updatePresentedPopoverConfiguration()
       return
     }
 
-    let hostingController = UIHostingController(
-      rootView: TinyuiPopoverSwiftUIView(props: props, delegate: delegate)
-    )
-    self.hostingController = hostingController
+    let contentViewController = UIViewController()
+    // The system popover supplies its own material (Liquid Glass on iOS 26+).
+    // An opaque content background would cover it, including its adaptive tint.
+    contentViewController.view.backgroundColor = .clear
+    contentViewController.view.clipsToBounds = true
+    contentViewController.preferredContentSize = preferredContentSize
+    contentViewController.modalPresentationStyle = .popover
+    attachContent(to: contentViewController)
 
-    parentViewController.addChild(hostingController)
-    hostingController.view.backgroundColor = .clear
-    addSubview(hostingController.view)
-    hostingController.view.translatesAutoresizingMaskIntoConstraints = false
-    hostingController.view.pinEdges(to: self)
-    hostingController.didMove(toParent: parentViewController)
+    guard let popoverPresentationController = contentViewController.popoverPresentationController
+    else {
+      return
+    }
+
+    configure(popoverPresentationController, from: triggerView)
+    popoverPresentationController.delegate = self
+    presentedViewController = contentViewController
+
+    parentViewController.present(contentViewController, animated: true) { [weak self] in
+      guard let self else { return }
+      if !self.isPresented || self.window == nil {
+        self.dismissPopoverIfNeeded()
+      }
+    }
+  }
+
+  private func dismissPopoverIfNeeded() {
+    guard let presentedViewController, !isDismissing else { return }
+
+    isDismissing = true
+    presentedViewController.dismiss(animated: true) { [weak self] in
+      guard let self else { return }
+      self.presentedViewController = nil
+      self.isDismissing = false
+      self.delegate?.onIsPresentedChange(isPresented: false)
+      if self.isPresented, self.window != nil {
+        self.schedulePresentationUpdate()
+      }
+    }
   }
 
-  /// Keeps the hosting controller attached to the current view controller.
-  private func syncParentViewController(to parentViewController: UIViewController? = nil) {
+  private func updatePresentedPopoverConfiguration() {
     guard
-      let hostingController,
-      let parentViewController = parentViewController ?? self.parentViewController,
-      hostingController.parent !== parentViewController
+      let presentedViewController,
+      let triggerView,
+      let preferredContentSize,
+      let popoverPresentationController = presentedViewController.popoverPresentationController
     else {
       return
     }
 
-    hostingController.willMove(toParent: nil)
-    hostingController.removeFromParent()
-    parentViewController.addChild(hostingController)
-    hostingController.didMove(toParent: parentViewController)
+    attachContent(to: presentedViewController)
+    if presentedViewController.preferredContentSize != preferredContentSize {
+      presentedViewController.preferredContentSize = preferredContentSize
+    }
+    configure(popoverPresentationController, from: triggerView)
+  }
+
+  private func attachContent(to viewController: UIViewController) {
+    guard let contentView, contentView.superview !== viewController.view else { return }
+    contentView.removeFromSuperview()
+    // Fabric owns the content frame. Stretching it to the popover's bounds
+    // would overwrite the measured size and feed it back into presentation.
+    contentView.autoresizingMask = []
+    viewController.view.addSubview(contentView)
+  }
+
+  private func configure(
+    _ popoverPresentationController: UIPopoverPresentationController,
+    from triggerView: UIView
+  ) {
+    popoverPresentationController.sourceView = triggerView
+    popoverPresentationController.sourceRect = sourceRect(in: triggerView.bounds)
+    popoverPresentationController.permittedArrowDirections = permittedArrowDirections
+  }
+
+  private func sourceRect(in bounds: CGRect) -> CGRect {
+    let point: CGPoint
+    switch attachmentAnchor {
+    case "top":
+      point = CGPoint(x: bounds.midX, y: bounds.minY)
+    case "bottom":
+      point = CGPoint(x: bounds.midX, y: bounds.maxY)
+    case "leading":
+      point = CGPoint(x: bounds.minX, y: bounds.midY)
+    case "trailing":
+      point = CGPoint(x: bounds.maxX, y: bounds.midY)
+    default:
+      point = CGPoint(x: bounds.midX, y: bounds.midY)
+    }
+
+    return CGRect(x: point.x, y: point.y, width: 1, height: 1)
+  }
+
+  private var permittedArrowDirections: UIPopoverArrowDirection {
+    switch arrowEdge {
+    case "top":
+      return .up
+    case "bottom":
+      return .down
+    case "leading":
+      return .left
+    case "trailing":
+      return .right
+    default:
+      return .any
+    }
+  }
+
+  private var preferredContentSize: CGSize? {
+    guard contentSize.width.isFinite, contentSize.height.isFinite,
+      contentSize.width > 0, contentSize.height > 0
+    else {
+      // Wait for Fabric's first layout instead of presenting at an arbitrary
+      // fallback size that can become the content's next measured size.
+      return nil
+    }
+    return CGSize(width: ceil(contentSize.width), height: ceil(contentSize.height))
+  }
+
+  // Returning `.none` is UIKit's equivalent of keeping a SwiftUI popover as a
+  // popover in compact size classes (`presentationCompactAdaptation(.popover)`).
+  public func adaptivePresentationStyle(
+    for controller: UIPresentationController
+  ) -> UIModalPresentationStyle {
+    .none
+  }
+
+  public func adaptivePresentationStyle(
+    for controller: UIPresentationController,
+    traitCollection: UITraitCollection
+  ) -> UIModalPresentationStyle {
+    .none
+  }
+
+  public func presentationControllerDidDismiss(
+    _ presentationController: UIPresentationController
+  ) {
+    guard presentedViewController === presentationController.presentedViewController else {
+      return
+    }
+
+    presentedViewController = nil
+    isDismissing = false
+    delegate?.onIsPresentedChange(isPresented: false)
   }
 }

package/ios/Popover/TinyuiPopoverView.mm

@@ -3,6 +3,8 @@
 #import "TinyuiPopoverView.h"
 
 #import <React/RCTConversions.h>
+#import <React/RCTMountingTransactionObserving.h>
+#import <React/RCTSurfaceTouchHandler.h>
 #import <React/UIView+React.h>
 
 #import <react/renderer/components/TinyuiSpec/ComponentDescriptors.h>
@@ -18,13 +20,16 @@
 
 using namespace facebook::react;
 
-@interface TinyuiPopoverView () <RCTTinyuiPopoverViewViewProtocol, TinyuiPopoverViewDelegate>
+@interface TinyuiPopoverView () <RCTTinyuiPopoverViewViewProtocol,
+                                TinyuiPopoverViewDelegate,
+                                RCTMountingTransactionObserving>
 @end
 
 @implementation TinyuiPopoverView {
   TinyuiPopoverProvider *_popoverProvider;
   UIView *_triggerView;
   UIView<RCTComponentViewProtocol> *_contentComponentView;
+  RCTSurfaceTouchHandler *_contentTouchHandler;
 }
 
 + (ComponentDescriptorProvider)componentDescriptorProvider
@@ -39,6 +44,7 @@ using namespace facebook::react;
     _props = defaultProps;
 
     _popoverProvider = [[TinyuiPopoverProvider alloc] initWithDelegate:self];
+    _contentTouchHandler = [RCTSurfaceTouchHandler new];
     self.contentView = _popoverProvider;
   }
   return self;
@@ -68,6 +74,8 @@ using namespace facebook::react;
   // Second child is the popover content, presented inside the popover.
   NSAssert(_contentComponentView == nil, @"TinyuiPopoverView accepts one content child.");
   _contentComponentView = childComponentView;
+  // The popover is outside the React surface's native view hierarchy.
+  [_contentTouchHandler attachToView:childComponentView];
   _popoverProvider.contentView = childComponentView;
 }
 
@@ -79,11 +87,23 @@ using namespace facebook::react;
     _triggerView = nil;
     _popoverProvider.triggerView = nil;
   } else if (_contentComponentView == childComponentView) {
+    [_contentTouchHandler detachFromView:childComponentView];
     _contentComponentView = nil;
     _popoverProvider.contentView = nil;
   }
 }
 
+- (void)mountingTransactionDidMount:(const MountingTransaction &)transaction
+               withSurfaceTelemetry:(const SurfaceTelemetry &)surfaceTelemetry
+{
+  // Content can change size without changing the trigger's layout or props.
+  // Read only after Fabric has applied the entire transaction. UIKit must not
+  // resize this child, so its bounds remain the size computed by Yoga.
+  _popoverProvider.contentSize = _contentComponentView != nil
+      ? _contentComponentView.bounds.size
+      : CGSizeZero;
+}
+
 #pragma mark - Props
 
 - (void)updateProps:(Props::Shared const &)props
@@ -112,10 +132,15 @@ using namespace facebook::react;
 
 - (void)prepareForRecycle
 {
+  _popoverProvider.isPresented = NO;
+  if (_contentComponentView != nil) {
+    [_contentTouchHandler detachFromView:_contentComponentView];
+  }
   _triggerView = nil;
   _contentComponentView = nil;
   _popoverProvider.triggerView = nil;
   _popoverProvider.contentView = nil;
+  _popoverProvider.parentViewController = nil;
   [super prepareForRecycle];
 }
 

package/ios/SFSymbol/TinyuiSFSymbolEffects.h

@@ -0,0 +1,9 @@
+#pragma once
+
+#import <Symbols/Symbols.h>
+
+NS_ASSUME_NONNULL_BEGIN
+NSSymbolEffect * _Nullable TinyuiSFSymbolEffect(NSDictionary *configuration);
+NSSymbolEffectOptions *TinyuiSFSymbolOptions(NSDictionary * _Nullable configuration);
+NSSymbolContentTransition * _Nullable TinyuiSFSymbolTransition(NSDictionary *configuration);
+NS_ASSUME_NONNULL_END

package/ios/SFSymbol/TinyuiSFSymbolEffects.mm

@@ -0,0 +1,180 @@
+#if TINYUI_FEATURE_SF_SYMBOL
+
+#import "TinyuiSFSymbolEffects.h"
+#include <cmath>
+
+// Keep the concrete receiver types so the compiler checks every Symbols API.
+#define TINYUI_LAYER_SCOPE(effect) \
+  if ([scope isEqual:@"byLayer"]) effect = [effect effectWithByLayer]; \
+  if ([scope isEqual:@"wholeSymbol"]) effect = [effect effectWithWholeSymbol];
+
+NSSymbolEffect *TinyuiSFSymbolEffect(NSDictionary *configuration)
+{
+  NSString *type = configuration[@"type"];
+  NSString *scope = configuration[@"scope"];
+  NSString *direction = configuration[@"direction"];
+  if ([type isEqual:@"pulse"]) {
+    NSSymbolPulseEffect *effect = NSSymbolPulseEffect.effect;
+    TINYUI_LAYER_SCOPE(effect);
+    return effect;
+  }
+  if ([type isEqual:@"bounce"]) {
+    NSSymbolBounceEffect *effect = NSSymbolBounceEffect.effect;
+    if ([direction isEqual:@"up"]) effect = NSSymbolBounceEffect.bounceUpEffect;
+    if ([direction isEqual:@"down"]) effect = NSSymbolBounceEffect.bounceDownEffect;
+    TINYUI_LAYER_SCOPE(effect);
+    return effect;
+  }
+  if ([type isEqual:@"scale"]) {
+    NSSymbolScaleEffect *effect = NSSymbolScaleEffect.effect;
+    if ([direction isEqual:@"up"]) effect = NSSymbolScaleEffect.scaleUpEffect;
+    if ([direction isEqual:@"down"]) effect = NSSymbolScaleEffect.scaleDownEffect;
+    TINYUI_LAYER_SCOPE(effect);
+    return effect;
+  }
+  if ([type isEqual:@"appear"]) {
+    NSSymbolAppearEffect *effect = NSSymbolAppearEffect.effect;
+    if ([direction isEqual:@"up"]) effect = NSSymbolAppearEffect.appearUpEffect;
+    if ([direction isEqual:@"down"]) effect = NSSymbolAppearEffect.appearDownEffect;
+    TINYUI_LAYER_SCOPE(effect);
+    return effect;
+  }
+  if ([type isEqual:@"disappear"]) {
+    NSSymbolDisappearEffect *effect = NSSymbolDisappearEffect.effect;
+    if ([direction isEqual:@"up"]) effect = NSSymbolDisappearEffect.disappearUpEffect;
+    if ([direction isEqual:@"down"]) effect = NSSymbolDisappearEffect.disappearDownEffect;
+    TINYUI_LAYER_SCOPE(effect);
+    return effect;
+  }
+  if ([type isEqual:@"variableColor"]) {
+    NSSymbolVariableColorEffect *effect = NSSymbolVariableColorEffect.effect;
+    if ([configuration[@"iteration"] isEqual:@"iterative"]) effect = [effect effectWithIterative];
+    if ([configuration[@"iteration"] isEqual:@"cumulative"]) effect = [effect effectWithCumulative];
+    if ([configuration[@"reversing"] isKindOfClass:NSNumber.class]) {
+      effect = [configuration[@"reversing"] boolValue]
+          ? [effect effectWithReversing] : [effect effectWithNonReversing];
+    }
+    if ([configuration[@"inactiveLayers"] isEqual:@"hide"]) effect = [effect effectWithHideInactiveLayers];
+    if ([configuration[@"inactiveLayers"] isEqual:@"dim"]) effect = [effect effectWithDimInactiveLayers];
+    return effect;
+  }
+  if (@available(iOS 18.0, *)) {
+    if ([type isEqual:@"wiggle"]) {
+      NSSymbolWiggleEffect *effect = NSSymbolWiggleEffect.effect;
+      if ([direction isEqual:@"up"]) effect = NSSymbolWiggleEffect.wiggleUpEffect;
+      if ([direction isEqual:@"down"]) effect = NSSymbolWiggleEffect.wiggleDownEffect;
+      if ([direction isEqual:@"left"]) effect = NSSymbolWiggleEffect.wiggleLeftEffect;
+      if ([direction isEqual:@"right"]) effect = NSSymbolWiggleEffect.wiggleRightEffect;
+      if ([direction isEqual:@"forward"]) effect = NSSymbolWiggleEffect.wiggleForwardEffect;
+      if ([direction isEqual:@"backward"]) effect = NSSymbolWiggleEffect.wiggleBackwardEffect;
+      if ([direction isEqual:@"clockwise"]) effect = NSSymbolWiggleEffect.wiggleClockwiseEffect;
+      if ([direction isEqual:@"counterClockwise"]) effect = NSSymbolWiggleEffect.wiggleCounterClockwiseEffect;
+      id angle = configuration[@"angle"];
+      if ([angle isKindOfClass:NSNumber.class] && std::isfinite([angle doubleValue])) {
+        effect = [NSSymbolWiggleEffect wiggleCustomAngleEffect:[angle doubleValue]];
+      }
+      TINYUI_LAYER_SCOPE(effect);
+      return effect;
+    }
+    if ([type isEqual:@"rotate"]) {
+      NSSymbolRotateEffect *effect = NSSymbolRotateEffect.effect;
+      if ([direction isEqual:@"clockwise"]) effect = NSSymbolRotateEffect.rotateClockwiseEffect;
+      if ([direction isEqual:@"counterClockwise"]) effect = NSSymbolRotateEffect.rotateCounterClockwiseEffect;
+      TINYUI_LAYER_SCOPE(effect);
+      return effect;
+    }
+    if ([type isEqual:@"breathe"]) {
+      NSSymbolBreatheEffect *effect = NSSymbolBreatheEffect.effect;
+      if ([configuration[@"style"] isEqual:@"plain"]) effect = NSSymbolBreatheEffect.breathePlainEffect;
+      if ([configuration[@"style"] isEqual:@"pulse"]) effect = NSSymbolBreatheEffect.breathePulseEffect;
+      TINYUI_LAYER_SCOPE(effect);
+      return effect;
+    }
+  }
+  if (@available(iOS 26.0, *)) {
+    if ([type isEqual:@"drawOn"]) {
+      NSSymbolDrawOnEffect *effect = NSSymbolDrawOnEffect.effect;
+      TINYUI_LAYER_SCOPE(effect);
+      if ([scope isEqual:@"individually"]) effect = [effect effectWithIndividually];
+      return effect;
+    }
+    if ([type isEqual:@"drawOff"]) {
+      NSSymbolDrawOffEffect *effect = NSSymbolDrawOffEffect.effect;
+      TINYUI_LAYER_SCOPE(effect);
+      if ([scope isEqual:@"individually"]) effect = [effect effectWithIndividually];
+      if ([configuration[@"reversed"] isKindOfClass:NSNumber.class]) {
+        effect = [configuration[@"reversed"] boolValue]
+            ? [effect effectWithReversed] : [effect effectWithNonReversed];
+      }
+      return effect;
+    }
+  }
+  return nil;
+}
+
+#undef TINYUI_LAYER_SCOPE
+
+NSSymbolEffectOptions *TinyuiSFSymbolOptions(NSDictionary *configuration)
+{
+  NSSymbolEffectOptions *options = NSSymbolEffectOptions.options;
+  if (![configuration isKindOfClass:NSDictionary.class]) return options;
+  id speedValue = configuration[@"speed"];
+  double speed = [speedValue isKindOfClass:NSNumber.class] ? [speedValue doubleValue] : 1;
+  if (std::isfinite(speed) && speed > 0) options = [options optionsWithSpeed:speed];
+  id repeat = configuration[@"repeat"];
+  if ([repeat isEqual:@NO]) return [options optionsWithNonRepeating];
+  BOOL countProvided = [repeat isKindOfClass:NSNumber.class];
+  // JS validates safe integers; cap the conversion at the native integer range.
+  NSInteger count = countProvided ? (NSInteger)fmin([repeat doubleValue], (double)NSIntegerMax / 2) : 1;
+  count = MAX(1, count);
+  id behaviorValue = configuration[@"repeatBehavior"];
+  NSString *behavior = [behaviorValue isKindOfClass:NSString.class] ? behaviorValue : nil;
+  id delayValue = configuration[@"repeatDelay"];
+  BOOL hasDelay = [delayValue isKindOfClass:NSNumber.class];
+  double delay = hasDelay ? [delayValue doubleValue] : 0;
+  if (!std::isfinite(delay) || delay < 0) delay = 0;
+  BOOL forever = [repeat isEqual:@"forever"] || behavior != nil || hasDelay;
+
+  if (@available(iOS 18.0, *)) {
+    NSSymbolEffectOptionsRepeatBehavior *repetition = nil;
+    if ([behavior isEqual:@"continuous"]) {
+      repetition = NSSymbolEffectOptionsRepeatBehavior.behaviorContinuous;
+    } else if (countProvided) {
+      repetition = hasDelay
+          ? [NSSymbolEffectOptionsRepeatBehavior behaviorPeriodicWithCount:count delay:delay]
+          : [NSSymbolEffectOptionsRepeatBehavior behaviorPeriodicWithCount:count];
+    } else if (forever) {
+      repetition = hasDelay
+          ? [NSSymbolEffectOptionsRepeatBehavior behaviorPeriodicWithDelay:delay]
+          : NSSymbolEffectOptionsRepeatBehavior.behaviorPeriodic;
+    }
+    if (repetition != nil) options = [options optionsWithRepeatBehavior:repetition];
+  } else {
+    if (countProvided) options = [options optionsWithRepeatCount:count];
+    else if (forever) options = [options optionsWithRepeating];
+  }
+  return options;
+}
+
+NSSymbolContentTransition *TinyuiSFSymbolTransition(NSDictionary *configuration)
+{
+  NSString *type = configuration[@"type"];
+  if ([type isEqual:@"automatic"]) return NSSymbolAutomaticContentTransition.transition;
+  if (![type isEqual:@"replace"] && ![type isEqual:@"magicReplace"]) return nil;
+
+  NSSymbolReplaceContentTransition *transition = NSSymbolReplaceContentTransition.transition;
+  NSString *direction = configuration[@"direction"];
+  if ([direction isEqual:@"downUp"]) transition = NSSymbolReplaceContentTransition.replaceDownUpTransition;
+  if ([direction isEqual:@"upUp"]) transition = NSSymbolReplaceContentTransition.replaceUpUpTransition;
+  if ([direction isEqual:@"offUp"]) transition = NSSymbolReplaceContentTransition.replaceOffUpTransition;
+  if ([configuration[@"scope"] isEqual:@"byLayer"]) transition = [transition transitionWithByLayer];
+  if ([configuration[@"scope"] isEqual:@"wholeSymbol"]) transition = [transition transitionWithWholeSymbol];
+  if (@available(iOS 18.0, *)) {
+    if ([type isEqual:@"magicReplace"]) {
+      return [NSSymbolReplaceContentTransition magicTransitionWithFallback:transition];
+    }
+  }
+  return transition;
+}
+
+#endif