@appsent-co/react-native-watchos 0.1.0

package/apple/Sources/ReactNativeWatchOS/Registry/ColorParser.swift

@@ -0,0 +1,51 @@
+import SwiftUI
+
+/// Parses JS color strings into SwiftUI `Color`. Lives on the Swift side
+/// so named colors pick up adaptive dark-mode variants (`.primary`, system
+/// colors) — the C++ layer can't supply those.
+enum RNWColorParser {
+    static func parse(_ string: String) -> Color? {
+        switch string {
+        case "red":             return .red
+        case "blue":            return .blue
+        case "green":           return .green
+        case "yellow":          return .yellow
+        case "orange":          return .orange
+        case "purple":          return .purple
+        case "pink":            return .pink
+        case "white":           return .white
+        case "black":           return .black
+        case "gray", "grey":    return .gray
+        case "brown":           return .brown
+        case "mint":            return .mint
+        case "cyan":            return .cyan
+        case "indigo":          return .indigo
+        case "teal":            return .teal
+        case "primary":         return .primary
+        case "secondary":       return .secondary
+        case "accent":          return .accentColor
+        case "clear":           return .clear
+        default:
+            return string.hasPrefix("#") ? parseHex(string) : nil
+        }
+    }
+
+    private static func parseHex(_ s: String) -> Color? {
+        let hex = String(s.dropFirst())
+        guard hex.count == 6 || hex.count == 8,
+              let raw = UInt64(hex, radix: 16) else { return nil }
+        let r, g, b, a: Double
+        if hex.count == 8 {
+            r = Double((raw >> 24) & 0xff) / 255
+            g = Double((raw >> 16) & 0xff) / 255
+            b = Double((raw >> 8)  & 0xff) / 255
+            a = Double(raw         & 0xff) / 255
+        } else {
+            r = Double((raw >> 16) & 0xff) / 255
+            g = Double((raw >> 8)  & 0xff) / 255
+            b = Double(raw         & 0xff) / 255
+            a = 1
+        }
+        return Color(.sRGB, red: r, green: g, blue: b, opacity: a)
+    }
+}

package/apple/Sources/ReactNativeWatchOS/Registry/ImageModifierRegistry.swift

@@ -0,0 +1,31 @@
+import SwiftUI
+
+/// `Image → Image` applier. `.resizable()` / `.renderingMode(_:)` /
+/// `.interpolation(_:)` / `.antialiased(_:)` return `Image`, not `some
+/// View` — chaining them here keeps the type so subsequent Image-only
+/// modifiers still apply before generic AnyView erasure.
+public typealias RNWImageModifierApplier = (
+    _ image: Image,
+    _ params: [String: Any]
+) -> Image
+
+@MainActor
+public final class RNWImageModifierRegistry {
+    public static let shared = RNWImageModifierRegistry()
+    private var appliers: [String: RNWImageModifierApplier] = [:]
+    private init() {}
+
+    public func register(_ type: String, applier: @escaping RNWImageModifierApplier) {
+        appliers[type] = applier
+    }
+
+    public func apply(_ modifier: [String: Any], to image: Image) -> Image {
+        guard let type = modifier["$type"] as? String,
+              let applier = appliers[type] else { return image }
+        return applier(image, modifier)
+    }
+
+    public func contains(_ type: String) -> Bool {
+        appliers[type] != nil
+    }
+}

package/apple/Sources/ReactNativeWatchOS/Registry/ModifierRegistry.swift

@@ -0,0 +1,38 @@
+import SwiftUI
+
+/// Modifier applier shape. `ctx` exposes the event bus (callback
+/// modifiers) and originating node (content modifiers — sheet/overlay).
+public typealias RNWModifierApplier = (
+    _ view: AnyView,
+    _ params: [String: Any],
+    _ ctx: RNWModifierContext
+) -> AnyView
+
+/// Generic SwiftUI modifier registry. Text-only modifiers live in
+/// `RNWTextModifierRegistry` to preserve the `Text → Text` chain.
+@MainActor
+public final class RNWModifierRegistry {
+    public static let shared = RNWModifierRegistry()
+    private var appliers: [String: RNWModifierApplier] = [:]
+    private init() {}
+
+    public func register(_ type: String, applier: @escaping RNWModifierApplier) {
+        appliers[type] = applier
+    }
+
+    /// Unknown `$type` returns the view unchanged (forward-compat with
+    /// newer JS-side modifiers paired with an older native binary).
+    public func apply(
+        _ modifier: [String: Any],
+        to view: AnyView,
+        ctx: RNWModifierContext
+    ) -> AnyView {
+        guard let type = modifier["$type"] as? String,
+              let applier = appliers[type] else { return view }
+        return applier(view, modifier, ctx)
+    }
+
+    public func contains(_ type: String) -> Bool {
+        appliers[type] != nil
+    }
+}

package/apple/Sources/ReactNativeWatchOS/Registry/ParamCoercion.swift

@@ -0,0 +1,25 @@
+import Foundation
+
+/// Typed accessors over bridged `[String: Any]` dicts. Booleans must
+/// route through `NSNumber.boolValue` or `true` silently becomes `1.0`.
+extension Dictionary where Key == String, Value == Any {
+    func string(_ key: String) -> String? {
+        self[key] as? String
+    }
+
+    func double(_ key: String) -> Double? {
+        (self[key] as? NSNumber)?.doubleValue
+    }
+
+    func cgFloat(_ key: String) -> CGFloat? {
+        (self[key] as? NSNumber).map { CGFloat($0.doubleValue) }
+    }
+
+    func bool(_ key: String) -> Bool? {
+        (self[key] as? NSNumber)?.boolValue
+    }
+
+    func int(_ key: String) -> Int? {
+        (self[key] as? NSNumber)?.intValue
+    }
+}

package/apple/Sources/ReactNativeWatchOS/Registry/ParsersShared.swift

@@ -0,0 +1,166 @@
+import SwiftUI
+
+/// String → SwiftUI value parsers shared across modifiers. Add here when
+/// more than one modifier needs the same mapping. watchOS 9 baseline;
+/// newer APIs are `#available`-gated.
+
+enum RNWAlignmentParser {
+    static func alignment(_ s: String?) -> Alignment {
+        switch s {
+        case "leading":        return .leading
+        case "trailing":       return .trailing
+        case "top":            return .top
+        case "bottom":         return .bottom
+        case "topLeading":     return .topLeading
+        case "topTrailing":    return .topTrailing
+        case "bottomLeading":  return .bottomLeading
+        case "bottomTrailing": return .bottomTrailing
+        case "leadingFirstTextBaseline":  return .leadingFirstTextBaseline
+        case "trailingLastTextBaseline":  return .trailingLastTextBaseline
+        default:               return .center
+        }
+    }
+
+    static func horizontal(_ s: String?) -> HorizontalAlignment {
+        switch s {
+        case "leading":  return .leading
+        case "trailing": return .trailing
+        default:         return .center
+        }
+    }
+
+    static func vertical(_ s: String?) -> VerticalAlignment {
+        switch s {
+        case "top":               return .top
+        case "bottom":            return .bottom
+        case "firstTextBaseline": return .firstTextBaseline
+        case "lastTextBaseline":  return .lastTextBaseline
+        default:                  return .center
+        }
+    }
+
+    static func textAlignment(_ s: String?) -> TextAlignment {
+        switch s {
+        case "leading":  return .leading
+        case "trailing": return .trailing
+        default:         return .center
+        }
+    }
+}
+
+enum RNWVisibilityParser {
+    static func parse(_ s: String?) -> Visibility {
+        switch s {
+        case "visible": return .visible
+        case "hidden":  return .hidden
+        default:        return .automatic
+        }
+    }
+}
+
+enum RNWEdgeParser {
+    /// Single edge, "horizontal"/"vertical"/"all", or an array of edges.
+    static func edgeSet(_ value: Any?) -> Edge.Set {
+        if let s = value as? String { return single(s) }
+        if let arr = value as? [Any] {
+            var set: Edge.Set = []
+            for item in arr {
+                if let s = item as? String { set.insert(single(s)) }
+            }
+            return set.isEmpty ? .all : set
+        }
+        return .all
+    }
+
+    private static func single(_ s: String) -> Edge.Set {
+        switch s {
+        case "top":        return .top
+        case "bottom":     return .bottom
+        case "leading":    return .leading
+        case "trailing":   return .trailing
+        case "horizontal": return .horizontal
+        case "vertical":   return .vertical
+        default:           return .all
+        }
+    }
+}
+
+enum RNWFontParsers {
+    static func weight(_ s: String?) -> Font.Weight? {
+        switch s {
+        case "ultraLight": return .ultraLight
+        case "thin":       return .thin
+        case "light":      return .light
+        case "regular":    return .regular
+        case "medium":     return .medium
+        case "semibold":   return .semibold
+        case "bold":       return .bold
+        case "heavy":      return .heavy
+        case "black":      return .black
+        default:           return nil
+        }
+    }
+
+    static func design(_ s: String?) -> Font.Design? {
+        switch s {
+        case "default":    return .default
+        case "serif":      return .serif
+        case "rounded":    return .rounded
+        case "monospaced": return .monospaced
+        default:           return nil
+        }
+    }
+
+    static func textStyle(_ s: String?) -> Font.TextStyle? {
+        switch s {
+        case "largeTitle":  return .largeTitle
+        case "title":       return .title
+        case "title2":      return .title2
+        case "title3":      return .title3
+        case "headline":    return .headline
+        case "subheadline": return .subheadline
+        case "body":        return .body
+        case "callout":     return .callout
+        case "footnote":    return .footnote
+        case "caption":     return .caption
+        case "caption2":    return .caption2
+        default:            return nil
+        }
+    }
+}
+
+enum RNWShapeStyleParser {
+    /// Color (named/hex), hierarchical level, or (watchOS 10+) material.
+    /// Nil when unrecognized so callers can fall back.
+    static func parse(_ string: String?) -> AnyShapeStyle? {
+        guard let string else { return nil }
+        switch string {
+        case "primary":    return AnyShapeStyle(.primary)
+        case "secondary":  return AnyShapeStyle(.secondary)
+        case "tertiary":   return AnyShapeStyle(.tertiary)
+        case "quaternary": return AnyShapeStyle(.quaternary)
+        case "tint":       return AnyShapeStyle(.tint)
+        case "ultraThinMaterial",
+             "thinMaterial",
+             "regularMaterial",
+             "thickMaterial",
+             "ultraThickMaterial":
+            // watchOS 10+. `.bar` is iOS-only.
+            if #available(watchOS 10.0, *) {
+                switch string {
+                case "ultraThinMaterial":  return AnyShapeStyle(.ultraThinMaterial)
+                case "thinMaterial":       return AnyShapeStyle(.thinMaterial)
+                case "regularMaterial":    return AnyShapeStyle(.regularMaterial)
+                case "thickMaterial":      return AnyShapeStyle(.thickMaterial)
+                default:                   return AnyShapeStyle(.ultraThickMaterial)
+                }
+            }
+            return nil
+        default:
+            if let color = RNWColorParser.parse(string) {
+                return AnyShapeStyle(color)
+            }
+            return nil
+        }
+    }
+}

package/apple/Sources/ReactNativeWatchOS/Registry/RNWModifierContext.swift

@@ -0,0 +1,37 @@
+import SwiftUI
+import ReactNativeWatchOSCxx
+
+/// Per-apply context giving modifiers access to JS callbacks (`fire`) and
+/// content children (`content`). Modifier callbacks cross the bridge as
+/// numeric handler ids (raw functions are dropped by the JSI → NS
+/// converter); modifier content is hoisted into `__ModifierContent` child
+/// nodes by the JS `useModifiers` hook.
+@MainActor
+public struct RNWModifierContext {
+    public let bus: RNWEventBus
+    public let node: RNWShadowNodeSnapshot
+
+    public init(bus: RNWEventBus, node: RNWShadowNodeSnapshot) {
+        self.bus = bus
+        self.node = node
+    }
+
+    /// Nil handlerId is a no-op so callers can forward optionals:
+    /// `ctx.fire(params.int("handler"))`.
+    public func fire(_ handlerId: Int?, _ payload: Any? = nil) {
+        guard let handlerId else { return }
+        bus.fire(handlerId, payload: payload)
+    }
+
+    /// Nil when the slot is absent — callers fall back to `EmptyView()`
+    /// or skip the wrapping modifier.
+    public func content(_ slot: String?) -> AnyView? {
+        guard let slot else { return nil }
+        for child in node.children where child.viewName == "__ModifierContent" {
+            if (child.props?["slot"] as? String) == slot {
+                return RNWNodeRenderer.render(child, bus: bus)
+            }
+        }
+        return nil
+    }
+}

package/apple/Sources/ReactNativeWatchOS/Registry/RNWNodeRenderer.swift

@@ -0,0 +1,56 @@
+import SwiftUI
+import ReactNativeWatchOSCxx
+
+/// Recursive node → AnyView translator. Single source of truth used by
+/// `RNWRootView` and container builders (via the pre-rendered `children`).
+@MainActor
+public enum RNWNodeRenderer {
+    public static func render(
+        _ node: RNWShadowNodeSnapshot,
+        bus: RNWEventBus
+    ) -> AnyView {
+        // Standalone rawText shouldn't reach here — Text-like builders
+        // consume rawText children directly.
+        if node.kind == .rawText {
+            return AnyView(EmptyView())
+        }
+
+        // `viewChildren` skips `__ModifierContent` — those are pulled on
+        // demand by modifiers (sheet/overlay/…) via `ctx.content`.
+        let renderedChildren = AnyView(
+            ForEach(node.viewChildren, id: \.tag) { child in
+                render(child, bus: bus)
+            }
+        )
+
+        let builder = RNWViewRegistry.shared.builder(for: node.viewName)
+            ?? RNWNodeRenderer.fallback
+
+        let base = builder(node, renderedChildren, bus)
+
+        let ctx = RNWModifierContext(bus: bus, node: node)
+        let modified = node.modifiers.reduce(base) { acc, mod in
+            guard let dict = mod as? [String: Any] else { return acc }
+            return RNWModifierRegistry.shared.apply(dict, to: acc, ctx: ctx)
+        }
+
+        // AnyView erasure drops SwiftUI's structural identity tracking;
+        // `.id(node.tag)` restores it. Without this, every commit tears
+        // down @State, animations, and TextField focus.
+        return AnyView(modified.id(node.tag))
+    }
+
+    /// Red marker in DEBUG, EmptyView in release — surfaces missing
+    /// registrations during development.
+    private static let fallback: RNWViewBuilder = { node, _, _ in
+        #if DEBUG
+        return AnyView(
+            Text("?\(node.viewName ?? "<nil>")")
+                .font(.caption2)
+                .foregroundStyle(.red)
+        )
+        #else
+        return AnyView(EmptyView())
+        #endif
+    }
+}

package/apple/Sources/ReactNativeWatchOS/Registry/ShadowNodeSnapshot+Children.swift

@@ -0,0 +1,11 @@
+import ReactNativeWatchOSCxx
+
+extension RNWShadowNodeSnapshot {
+    /// Children excluding `__ModifierContent` (sheet/overlay/toolbar
+    /// bodies). Builders that walk children directly (Section, TabView,
+    /// LabeledContent, …) must use this so modifier content doesn't leak
+    /// into their layout — it's pulled on demand via `ctx.content(_:)`.
+    public var viewChildren: [RNWShadowNodeSnapshot] {
+        children.filter { $0.viewName != "__ModifierContent" }
+    }
+}

package/apple/Sources/ReactNativeWatchOS/Registry/TextModifierRegistry.swift

@@ -0,0 +1,30 @@
+import SwiftUI
+
+/// `Text → Text` applier. Preserves SwiftUI's typed Text chain so
+/// concatenation (`Text("a") + Text("b")`) and Text-only typographic
+/// optimizations survive — erasing to AnyView throws all that away.
+public typealias RNWTextModifierApplier = (
+    _ text: Text,
+    _ params: [String: Any]
+) -> Text
+
+@MainActor
+public final class RNWTextModifierRegistry {
+    public static let shared = RNWTextModifierRegistry()
+    private var appliers: [String: RNWTextModifierApplier] = [:]
+    private init() {}
+
+    public func register(_ type: String, applier: @escaping RNWTextModifierApplier) {
+        appliers[type] = applier
+    }
+
+    public func apply(_ modifier: [String: Any], to text: Text) -> Text {
+        guard let type = modifier["$type"] as? String,
+              let applier = appliers[type] else { return text }
+        return applier(text, modifier)
+    }
+
+    public func contains(_ type: String) -> Bool {
+        appliers[type] != nil
+    }
+}

package/apple/Sources/ReactNativeWatchOS/Registry/ViewRegistry.swift

@@ -0,0 +1,30 @@
+import SwiftUI
+import ReactNativeWatchOSCxx
+
+/// View-builder shape.
+///
+/// - `children` is pre-rendered through the modifier pipeline; leaves
+///   that need the raw tree (e.g. Text walking rawText) read
+///   `snapshot.children` directly instead.
+public typealias RNWViewBuilder = (
+    _ snapshot: RNWShadowNodeSnapshot,
+    _ children: AnyView,
+    _ bus: RNWEventBus
+) -> AnyView
+
+/// `viewName` (from JS) → SwiftUI builder.
+@MainActor
+public final class RNWViewRegistry {
+    public static let shared = RNWViewRegistry()
+    private var builders: [String: RNWViewBuilder] = [:]
+    private init() {}
+
+    public func register(_ name: String, builder: @escaping RNWViewBuilder) {
+        builders[name] = builder
+    }
+
+    public func builder(for name: String?) -> RNWViewBuilder? {
+        guard let name else { return nil }
+        return builders[name]
+    }
+}

package/apple/Sources/ReactNativeWatchOS/Views/AngularGradientView.swift

@@ -0,0 +1,41 @@
+import SwiftUI
+import ReactNativeWatchOSCxx
+
+enum RNWAngularGradientView {
+    @MainActor
+    static func register(into r: RNWViewRegistry) {
+        r.register("AngularGradient") { snapshot, _, _ in
+            let colors = parseColors(snapshot.props?["colors"])
+            let center = parseUnitPoint(snapshot.props?["center"]) ?? .center
+
+            if let angle = snapshot.props?.double("angle") {
+                return AnyView(
+                    AngularGradient(
+                        colors: colors,
+                        center: center,
+                        angle: .degrees(angle)
+                    )
+                )
+            }
+            if let start = snapshot.props?.double("startAngle"),
+               let end = snapshot.props?.double("endAngle") {
+                return AnyView(
+                    AngularGradient(
+                        colors: colors,
+                        center: center,
+                        startAngle: .degrees(start),
+                        endAngle: .degrees(end)
+                    )
+                )
+            }
+            return AnyView(
+                AngularGradient(
+                    colors: colors,
+                    center: center,
+                    startAngle: .zero,
+                    endAngle: .degrees(360)
+                )
+            )
+        }
+    }
+}