expo-tvos-search 1.2.3 → 1.3.0

package/ios/ExpoTvosSearchModule.swift

@@ -12,17 +12,32 @@ public class ExpoTvosSearchModule: Module {
         Name("ExpoTvosSearch")
 
         View(ExpoTvosSearchView.self) {
-            Events("onSearch", "onSelectItem")
+            Events("onSearch", "onSelectItem", "onError", "onValidationWarning")
 
             Prop("results") { (view: ExpoTvosSearchView, results: [[String: Any]]) in
                 // Limit results array size to prevent memory issues
                 let limitedResults = Array(results.prefix(Self.maxResults))
+                if results.count > Self.maxResults {
+                    view.onValidationWarning([
+                        "type": "value_clamped",
+                        "message": "Results array truncated from \(results.count) to \(Self.maxResults) items",
+                        "context": "maxResults=\(Self.maxResults)"
+                    ])
+                }
                 view.updateResults(limitedResults)
             }
 
             Prop("columns") { (view: ExpoTvosSearchView, columns: Int) in
                 // Clamp columns between min and max for safe grid layout
-                view.columns = min(max(Self.minColumns, columns), Self.maxColumns)
+                let clampedValue = min(max(Self.minColumns, columns), Self.maxColumns)
+                if clampedValue != columns {
+                    view.onValidationWarning([
+                        "type": "value_clamped",
+                        "message": "columns value \(columns) was clamped to range [\(Self.minColumns), \(Self.maxColumns)]",
+                        "context": "columns=\(clampedValue)"
+                    ])
+                }
+                view.columns = clampedValue
             }
 
             Prop("placeholder") { (view: ExpoTvosSearchView, placeholder: String) in
@@ -48,7 +63,15 @@ public class ExpoTvosSearchModule: Module {
 
             Prop("topInset") { (view: ExpoTvosSearchView, topInset: Double) in
                 // Clamp to non-negative values (max 500 points reasonable for any screen)
-                view.topInset = CGFloat(min(max(0, topInset), 500))
+                let clampedValue = min(max(0, topInset), 500)
+                if clampedValue != topInset {
+                    view.onValidationWarning([
+                        "type": "value_clamped",
+                        "message": "topInset value \(topInset) was clamped to range [0, 500]",
+                        "context": "topInset=\(clampedValue)"
+                    ])
+                }
+                view.topInset = CGFloat(clampedValue)
             }
 
             Prop("showTitleOverlay") { (view: ExpoTvosSearchView, show: Bool) in
@@ -61,7 +84,15 @@ public class ExpoTvosSearchModule: Module {
 
             Prop("marqueeDelay") { (view: ExpoTvosSearchView, delay: Double) in
                 // Clamp between 0 and maxMarqueeDelay seconds
-                view.marqueeDelay = min(max(0, delay), Self.maxMarqueeDelay)
+                let clampedValue = min(max(0, delay), Self.maxMarqueeDelay)
+                if clampedValue != delay {
+                    view.onValidationWarning([
+                        "type": "value_clamped",
+                        "message": "marqueeDelay value \(delay) was clamped to range [0, \(Self.maxMarqueeDelay)]",
+                        "context": "marqueeDelay=\(clampedValue)"
+                    ])
+                }
+                view.marqueeDelay = clampedValue
             }
 
             Prop("emptyStateText") { (view: ExpoTvosSearchView, text: String) in
@@ -79,6 +110,38 @@ public class ExpoTvosSearchModule: Module {
             Prop("noResultsHintText") { (view: ExpoTvosSearchView, text: String) in
                 view.noResultsHintText = String(text.prefix(Self.maxStringLength))
             }
+
+            Prop("textColor") { (view: ExpoTvosSearchView, colorHex: String?) in
+                view.textColor = colorHex
+            }
+
+            Prop("accentColor") { (view: ExpoTvosSearchView, colorHex: String) in
+                view.accentColor = colorHex
+            }
+
+            Prop("cardWidth") { (view: ExpoTvosSearchView, width: Double) in
+                view.cardWidth = CGFloat(max(50, min(1000, width)))  // Clamp to reasonable range
+            }
+
+            Prop("cardHeight") { (view: ExpoTvosSearchView, height: Double) in
+                view.cardHeight = CGFloat(max(50, min(1000, height)))  // Clamp to reasonable range
+            }
+
+            Prop("imageContentMode") { (view: ExpoTvosSearchView, mode: String) in
+                view.imageContentMode = mode
+            }
+
+            Prop("cardMargin") { (view: ExpoTvosSearchView, margin: Double) in
+                view.cardMargin = CGFloat(max(0, min(200, margin)))  // Clamp to reasonable range
+            }
+
+            Prop("cardPadding") { (view: ExpoTvosSearchView, padding: Double) in
+                view.cardPadding = CGFloat(max(0, min(100, padding)))  // Clamp to reasonable range
+            }
+
+            Prop("overlayTitleSize") { (view: ExpoTvosSearchView, size: Double) in
+                view.overlayTitleSize = CGFloat(max(8, min(72, size)))  // Clamp to reasonable font size range
+            }
         }
     }
 }

package/ios/ExpoTvosSearchView.swift

@@ -3,6 +3,41 @@ import SwiftUI
 
 #if os(tvOS)
 
+/// Custom shape for cards with selectively rounded corners
+/// Provides backwards compatibility for tvOS versions before 16.0
+struct SelectiveRoundedRectangle: Shape {
+    var topLeadingRadius: CGFloat
+    var topTrailingRadius: CGFloat
+    var bottomLeadingRadius: CGFloat
+    var bottomTrailingRadius: CGFloat
+
+    func path(in rect: CGRect) -> Path {
+        var path = Path()
+
+        let tl = min(topLeadingRadius, min(rect.width, rect.height) / 2)
+        let tr = min(topTrailingRadius, min(rect.width, rect.height) / 2)
+        let bl = min(bottomLeadingRadius, min(rect.width, rect.height) / 2)
+        let br = min(bottomTrailingRadius, min(rect.width, rect.height) / 2)
+
+        path.move(to: CGPoint(x: rect.minX + tl, y: rect.minY))
+        path.addLine(to: CGPoint(x: rect.maxX - tr, y: rect.minY))
+        path.addArc(center: CGPoint(x: rect.maxX - tr, y: rect.minY + tr),
+                   radius: tr, startAngle: .degrees(-90), endAngle: .degrees(0), clockwise: false)
+        path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY - br))
+        path.addArc(center: CGPoint(x: rect.maxX - br, y: rect.maxY - br),
+                   radius: br, startAngle: .degrees(0), endAngle: .degrees(90), clockwise: false)
+        path.addLine(to: CGPoint(x: rect.minX + bl, y: rect.maxY))
+        path.addArc(center: CGPoint(x: rect.minX + bl, y: rect.maxY - bl),
+                   radius: bl, startAngle: .degrees(90), endAngle: .degrees(180), clockwise: false)
+        path.addLine(to: CGPoint(x: rect.minX, y: rect.minY + tl))
+        path.addArc(center: CGPoint(x: rect.minX + tl, y: rect.minY + tl),
+                   radius: tl, startAngle: .degrees(180), endAngle: .degrees(270), clockwise: false)
+        path.closeSubpath()
+
+        return path
+    }
+}
+
 struct SearchResultItem: Identifiable, Equatable {
     let id: String
     let title: String
@@ -38,13 +73,29 @@ class SearchViewModel: ObservableObject {
     var searchingText: String = "Searching..."
     var noResultsText: String = "No results found"
     var noResultsHintText: String = "Try a different search term"
+
+    // Color customization options (configurable from JS)
+    var textColor: Color? = nil
+    var accentColor: Color = Color(red: 1, green: 0.765, blue: 0.07) // #FFC312 (gold)
+
+    // Card dimension options (configurable from JS)
+    var cardWidth: CGFloat = 280
+    var cardHeight: CGFloat = 420
+
+    // Image display options (configurable from JS)
+    var imageContentMode: ContentMode = .fill
+
+    // Layout spacing options (configurable from JS)
+    var cardMargin: CGFloat = 40  // Spacing between cards
+    var cardPadding: CGFloat = 16  // Padding inside cards
+    var overlayTitleSize: CGFloat = 20  // Font size for overlay title
 }
 
 struct TvosSearchContentView: View {
     @ObservedObject var viewModel: SearchViewModel
 
     private var gridColumns: [GridItem] {
-        Array(repeating: GridItem(.flexible(), spacing: 40), count: viewModel.columns)
+        Array(repeating: GridItem(.flexible(), spacing: viewModel.cardMargin), count: viewModel.columns)
     }
 
     var body: some View {
@@ -82,10 +133,10 @@ struct TvosSearchContentView: View {
         VStack(spacing: 20) {
             Image(systemName: "magnifyingglass")
                 .font(.system(size: 80))
-                .foregroundColor(.secondary)
+                .foregroundColor(viewModel.textColor ?? .secondary)
             Text(viewModel.emptyStateText)
                 .font(.headline)
-                .foregroundColor(.secondary)
+                .foregroundColor(viewModel.textColor ?? .secondary)
         }
         .frame(maxWidth: .infinity, maxHeight: .infinity)
     }
@@ -96,7 +147,7 @@ struct TvosSearchContentView: View {
                 .scaleEffect(1.5)
             Text(viewModel.searchingText)
                 .font(.headline)
-                .foregroundColor(.secondary)
+                .foregroundColor(viewModel.textColor ?? .secondary)
         }
         .frame(maxWidth: .infinity, maxHeight: .infinity)
     }
@@ -105,13 +156,13 @@ struct TvosSearchContentView: View {
         VStack(spacing: 20) {
             Image(systemName: "film.stack")
                 .font(.system(size: 80))
-                .foregroundColor(.secondary)
+                .foregroundColor(viewModel.textColor ?? .secondary)
             Text(viewModel.noResultsText)
                 .font(.headline)
-                .foregroundColor(.secondary)
+                .foregroundColor(viewModel.textColor ?? .secondary)
             Text(viewModel.noResultsHintText)
                 .font(.subheadline)
-                .foregroundColor(.secondary)
+                .foregroundColor(viewModel.textColor ?? .secondary)
         }
         .frame(maxWidth: .infinity, maxHeight: .infinity)
     }
@@ -133,7 +184,7 @@ struct TvosSearchContentView: View {
 
     private var resultsGridView: some View {
         ScrollView {
-            LazyVGrid(columns: gridColumns, spacing: 50) {
+            LazyVGrid(columns: gridColumns, spacing: viewModel.cardMargin) {
                 ForEach(viewModel.results) { item in
                     SearchResultCard(
                         item: item,
@@ -143,6 +194,13 @@ struct TvosSearchContentView: View {
                         showTitleOverlay: viewModel.showTitleOverlay,
                         enableMarquee: viewModel.enableMarquee,
                         marqueeDelay: viewModel.marqueeDelay,
+                        textColor: viewModel.textColor,
+                        accentColor: viewModel.accentColor,
+                        cardWidth: viewModel.cardWidth,
+                        cardHeight: viewModel.cardHeight,
+                        imageContentMode: viewModel.imageContentMode,
+                        cardPadding: viewModel.cardPadding,
+                        overlayTitleSize: viewModel.overlayTitleSize,
                         onSelect: { viewModel.onSelectItem?(item.id) }
                     )
                 }
@@ -161,21 +219,20 @@ struct SearchResultCard: View {
     let showTitleOverlay: Bool
     let enableMarquee: Bool
     let marqueeDelay: Double
+    let textColor: Color?
+    let accentColor: Color
+    let cardWidth: CGFloat
+    let cardHeight: CGFloat
+    let imageContentMode: ContentMode
+    let cardPadding: CGFloat
+    let overlayTitleSize: CGFloat
     let onSelect: () -> Void
     @FocusState private var isFocused: Bool
 
     private let placeholderColor = Color(white: 0.2)
-    private let focusedBorderColor = Color(red: 1, green: 0.765, blue: 0.07) // #FFC312
-
-    // Fixed card dimensions for consistent grid layout
-    // Width calculated for 5 columns: (1920 - 120 padding - 160 spacing) / 5 ≈ 280
-    private let cardWidth: CGFloat = 280
-    private var cardHeight: CGFloat { cardWidth * 1.5 } // 2:3 aspect ratio
 
     // Title overlay constants
-    private let overlayGradientHeight: CGFloat = 30
-    private let titleBarHeight: CGFloat = 36
-    private let overlayOpacity: Double = 0.8
+    private var overlayHeight: CGFloat { cardHeight * 0.25 }  // 25% of card
 
     var body: some View {
         Button(action: onSelect) {
@@ -193,7 +250,7 @@ struct SearchResultCard: View {
                                 case .success(let image):
                                     image
                                         .resizable()
-                                        .aspectRatio(contentMode: .fill)
+                                        .aspectRatio(contentMode: imageContentMode)
                                         .frame(width: cardWidth, height: cardHeight)
                                 case .failure:
                                     placeholderIcon
@@ -209,47 +266,53 @@ struct SearchResultCard: View {
                     .frame(width: cardWidth, height: cardHeight)
                     .clipped()
 
-                    // Title overlay (gradient + title bar)
+                    // Title overlay with native material blur
                     if showTitleOverlay {
-                        VStack(spacing: 0) {
-                            // Gradient fade
-                            LinearGradient(
-                                colors: [.clear, .black.opacity(overlayOpacity)],
-                                startPoint: .top,
-                                endPoint: .bottom
-                            )
-                            .frame(height: overlayGradientHeight)
-
-                            // Title bar
-                            HStack {
-                                if enableMarquee {
-                                    MarqueeText(
-                                        item.title,
-                                        font: .callout,
-                                        leftFade: 8,
-                                        rightFade: 8,
-                                        startDelay: marqueeDelay,
-                                        animate: isFocused
-                                    )
+                        ZStack {
+                            Rectangle()
+                                .fill(.ultraThinMaterial)
+                                .frame(width: cardWidth, height: overlayHeight)
+
+                            if enableMarquee {
+                                MarqueeText(
+                                    item.title,
+                                    font: .system(size: overlayTitleSize, weight: .semibold),
+                                    leftFade: 12,
+                                    rightFade: 12,
+                                    startDelay: marqueeDelay,
+                                    animate: isFocused
+                                )
+                                .foregroundColor(.white)
+                                .padding(.horizontal, cardPadding)
+                            } else {
+                                Text(item.title)
+                                    .font(.system(size: overlayTitleSize, weight: .semibold))
                                     .foregroundColor(.white)
-                                } else {
-                                    Text(item.title)
-                                        .font(.callout)
-                                        .foregroundColor(.white)
-                                        .lineLimit(1)
-                                }
+                                    .lineLimit(2)
+                                    .multilineTextAlignment(.center)
+                                    .padding(.horizontal, cardPadding)
                             }
-                            .padding(.horizontal, 12)
-                            .frame(width: cardWidth, height: titleBarHeight, alignment: .leading)
-                            .background(Color.black.opacity(overlayOpacity))
                         }
+                        .frame(width: cardWidth, height: overlayHeight)
                     }
                 }
                 .frame(width: cardWidth, height: cardHeight)
-                .clipShape(RoundedRectangle(cornerRadius: 12))
+                .clipShape(
+                    SelectiveRoundedRectangle(
+                        topLeadingRadius: 12,
+                        topTrailingRadius: 12,
+                        bottomLeadingRadius: (showTitle || showSubtitle) ? 0 : 12,
+                        bottomTrailingRadius: (showTitle || showSubtitle) ? 0 : 12
+                    )
+                )
                 .overlay(
-                    RoundedRectangle(cornerRadius: 12)
-                        .stroke(showFocusBorder && isFocused ? focusedBorderColor : Color.clear, lineWidth: 4)
+                    SelectiveRoundedRectangle(
+                        topLeadingRadius: 12,
+                        topTrailingRadius: 12,
+                        bottomLeadingRadius: (showTitle || showSubtitle) ? 0 : 12,
+                        bottomTrailingRadius: (showTitle || showSubtitle) ? 0 : 12
+                    )
+                    .stroke(showFocusBorder && isFocused ? accentColor : Color.clear, lineWidth: 4)
                 )
 
                 if showTitle || showSubtitle {
@@ -266,10 +329,11 @@ struct SearchResultCard: View {
                         if showSubtitle, let subtitle = item.subtitle {
                             Text(subtitle)
                                 .font(.caption)
-                                .foregroundColor(.secondary)
+                                .foregroundColor(textColor ?? .secondary)
                                 .lineLimit(1)
                         }
                     }
+                    .padding(cardPadding)
                     .frame(width: cardWidth, alignment: .leading)
                 }
             }
@@ -279,9 +343,15 @@ struct SearchResultCard: View {
     }
 
     private var placeholderIcon: some View {
-        Image(systemName: "film")
-            .font(.system(size: 50))
-            .foregroundColor(.secondary)
+        ZStack {
+            Circle()
+                .fill(Color.white.opacity(0.1))
+                .frame(width: 120, height: 120)
+
+            Image(systemName: "photo")
+                .font(.system(size: 60, weight: .light))
+                .foregroundColor(.white.opacity(0.7))
+        }
     }
 }
 
@@ -373,8 +443,69 @@ class ExpoTvosSearchView: ExpoView {
         }
     }
 
+    var textColor: String? = nil {
+        didSet {
+            if let hexColor = textColor {
+                viewModel.textColor = Color(hex: hexColor)
+            } else {
+                viewModel.textColor = nil
+            }
+        }
+    }
+
+    var accentColor: String = "#FFC312" {
+        didSet {
+            viewModel.accentColor = Color(hex: accentColor) ?? Color(red: 1, green: 0.765, blue: 0.07)
+        }
+    }
+
+    var cardWidth: CGFloat = 280 {
+        didSet {
+            viewModel.cardWidth = cardWidth
+        }
+    }
+
+    var cardHeight: CGFloat = 420 {
+        didSet {
+            viewModel.cardHeight = cardHeight
+        }
+    }
+
+    var imageContentMode: String = "fill" {
+        didSet {
+            switch imageContentMode.lowercased() {
+            case "fit":
+                viewModel.imageContentMode = .fit
+            case "contain":
+                viewModel.imageContentMode = .fit  // SwiftUI uses .fit for contain
+            default:
+                viewModel.imageContentMode = .fill
+            }
+        }
+    }
+
+    var cardMargin: CGFloat = 40 {
+        didSet {
+            viewModel.cardMargin = cardMargin
+        }
+    }
+
+    var cardPadding: CGFloat = 16 {
+        didSet {
+            viewModel.cardPadding = cardPadding
+        }
+    }
+
+    var overlayTitleSize: CGFloat = 20 {
+        didSet {
+            viewModel.overlayTitleSize = overlayTitleSize
+        }
+    }
+
     let onSearch = EventDispatcher()
     let onSelectItem = EventDispatcher()
+    let onError = EventDispatcher()
+    let onValidationWarning = EventDispatcher()
 
     required init(appContext: AppContext? = nil) {
         super.init(appContext: appContext)
@@ -417,11 +548,24 @@ class ExpoTvosSearchView: ExpoView {
     func updateResults(_ results: [[String: Any]]) {
         var validResults: [SearchResultItem] = []
         var skippedCount = 0
+        var urlValidationFailures = 0
+        var truncatedFields = 0
 
-        for dict in results {
-            guard let id = dict["id"] as? String, !id.isEmpty,
-                  let title = dict["title"] as? String, !title.isEmpty else {
+        for (index, dict) in results.enumerated() {
+            // Validate required fields
+            guard let id = dict["id"] as? String, !id.isEmpty else {
                 skippedCount += 1
+                #if DEBUG
+                print("[expo-tvos-search] Result at index \(index) skipped: missing or empty 'id' field")
+                #endif
+                continue
+            }
+
+            guard let title = dict["title"] as? String, !title.isEmpty else {
+                skippedCount += 1
+                #if DEBUG
+                print("[expo-tvos-search] Result at index \(index) (id: '\(id)') skipped: missing or empty 'title' field")
+                #endif
                 continue
             }
 
@@ -433,6 +577,11 @@ class ExpoTvosSearchView: ExpoView {
                    let scheme = url.scheme?.lowercased(),
                    scheme == "http" || scheme == "https" {
                     validatedImageUrl = imageUrl
+                } else {
+                    urlValidationFailures += 1
+                    #if DEBUG
+                    print("[expo-tvos-search] Result '\(title)' (id: '\(id)'): invalid imageUrl '\(imageUrl)'. Only HTTP/HTTPS URLs are supported for security reasons.")
+                    #endif
                 }
             }
 
@@ -441,21 +590,126 @@ class ExpoTvosSearchView: ExpoView {
             let maxTitleLength = 500
             let maxSubtitleLength = 500
 
+            // Track if any fields were truncated
+            let idTruncated = id.count > maxIdLength
+            let titleTruncated = title.count > maxTitleLength
+            let subtitle = dict["subtitle"] as? String
+            let subtitleTruncated = (subtitle?.count ?? 0) > maxSubtitleLength
+
+            if idTruncated || titleTruncated || subtitleTruncated {
+                truncatedFields += 1
+                #if DEBUG
+                var truncatedList: [String] = []
+                if idTruncated { truncatedList.append("id (\(id.count) chars)") }
+                if titleTruncated { truncatedList.append("title (\(title.count) chars)") }
+                if subtitleTruncated { truncatedList.append("subtitle (\(subtitle?.count ?? 0) chars)") }
+                print("[expo-tvos-search] Result '\(title)' (id: '\(id)'): truncated fields: \(truncatedList.joined(separator: ", "))")
+                #endif
+            }
+
             validResults.append(SearchResultItem(
                 id: String(id.prefix(maxIdLength)),
                 title: String(title.prefix(maxTitleLength)),
-                subtitle: (dict["subtitle"] as? String).map { String($0.prefix(maxSubtitleLength)) },
+                subtitle: subtitle.map { String($0.prefix(maxSubtitleLength)) },
                 imageUrl: validatedImageUrl
             ))
         }
 
+        // Log summary of validation issues and emit warnings
         #if DEBUG
         if skippedCount > 0 {
-            print("[expo-tvos-search] Skipped \(skippedCount) invalid result(s) missing required id or title")
+            print("[expo-tvos-search] ⚠️ Skipped \(skippedCount) result(s) due to missing required fields (id or title)")
+        }
+        if urlValidationFailures > 0 {
+            print("[expo-tvos-search] ⚠️ \(urlValidationFailures) image URL(s) failed validation (non-HTTP/HTTPS or malformed)")
+        }
+        if truncatedFields > 0 {
+            print("[expo-tvos-search] ℹ️ Truncated \(truncatedFields) result(s) with fields exceeding maximum length (500 chars)")
+        }
+        if validResults.count > 0 {
+            print("[expo-tvos-search] ✓ Processed \(validResults.count) valid result(s)")
         }
         #endif
 
-        viewModel.results = validResults
+        // Emit validation warnings for production monitoring
+        if skippedCount > 0 {
+            #if DEBUG
+            let skipContext = "validResults=\(validResults.count), skipped=\(skippedCount)"
+            #else
+            let skipContext = "validation completed"
+            #endif
+
+            onValidationWarning([
+                "type": "validation_failed",
+                "message": "Skipped \(skippedCount) result(s) due to missing required fields",
+                "context": skipContext
+            ])
+        }
+        if urlValidationFailures > 0 {
+            #if DEBUG
+            let urlContext = "Non-HTTP/HTTPS or malformed URLs"
+            #else
+            let urlContext = "validation completed"
+            #endif
+
+            onValidationWarning([
+                "type": "url_invalid",
+                "message": "\(urlValidationFailures) image URL(s) failed validation",
+                "context": urlContext
+            ])
+        }
+        if truncatedFields > 0 {
+            #if DEBUG
+            let truncContext = "Check id, title, or subtitle field lengths"
+            #else
+            let truncContext = "validation completed"
+            #endif
+
+            onValidationWarning([
+                "type": "field_truncated",
+                "message": "Truncated \(truncatedFields) result(s) with fields exceeding 500 characters",
+                "context": truncContext
+            ])
+        }
+
+        // Ensure UI updates happen on main thread
+        DispatchQueue.main.async { [weak self] in
+            self?.viewModel.results = validResults
+        }
+    }
+}
+
+// MARK: - Color Extension for Hex String Parsing
+extension Color {
+    /// Initialize a Color from a hex string (e.g., "#FFFFFF", "#FF5733", "FFC312")
+    /// Returns nil if the string cannot be parsed as a valid hex color
+    init?(hex: String) {
+        let hex = hex.trimmingCharacters(in: CharacterSet.alphanumerics.inverted)
+        var int: UInt64 = 0
+
+        guard Scanner(string: hex).scanHexInt64(&int) else {
+            return nil
+        }
+
+        let a, r, g, b: UInt64
+        switch hex.count {
+        case 3: // RGB (12-bit)
+            (a, r, g, b) = (255, (int >> 8) * 17, (int >> 4 & 0xF) * 17, (int & 0xF) * 17)
+        case 6: // RGB (24-bit)
+            (a, r, g, b) = (255, int >> 16, int >> 8 & 0xFF, int & 0xFF)
+        case 8: // ARGB (32-bit)
+            (a, r, g, b) = (int >> 24, int >> 16 & 0xFF, int >> 8 & 0xFF, int & 0xFF)
+        default:
+            return nil
+        }
+
+        self.init(
+            .sRGB,
+            red: Double(r) / 255,
+            green: Double(g) / 255,
+            blue: Double(b) / 255,
+            opacity: Double(a) / 255
+        )
     }
 }
 
@@ -477,9 +731,19 @@ class ExpoTvosSearchView: ExpoView {
     var searchingText: String = "Searching..."
     var noResultsText: String = "No results found"
     var noResultsHintText: String = "Try a different search term"
+    var textColor: String? = nil
+    var accentColor: String = "#FFC312"
+    var cardWidth: CGFloat = 280
+    var cardHeight: CGFloat = 420
+    var imageContentMode: String = "fill"
+    var cardMargin: CGFloat = 40
+    var cardPadding: CGFloat = 16
+    var overlayTitleSize: CGFloat = 20
 
     let onSearch = EventDispatcher()
     let onSelectItem = EventDispatcher()
+    let onError = EventDispatcher()
+    let onValidationWarning = EventDispatcher()
 
     required init(appContext: AppContext? = nil) {
         super.init(appContext: appContext)

package/ios/MarqueeText.swift

@@ -41,7 +41,7 @@ struct MarqueeText: View {
 
     var body: some View {
         GeometryReader { geometry in
-            ZStack(alignment: .leading) {
+            ZStack(alignment: Alignment(horizontal: .leading, vertical: .center)) {
                 // Hidden text to measure actual width
                 Text(text)
                     .font(font)
@@ -69,7 +69,7 @@ struct MarqueeText: View {
                     }
                 }
             }
-            .frame(width: geometry.size.width, alignment: .leading)
+            .frame(width: geometry.size.width, height: geometry.size.height, alignment: Alignment(horizontal: .leading, vertical: .center))
             .clipped()
             .mask(fadeMask)
             .onPreferenceChange(TextWidthKey.self) { width in