expo-tvos-search 1.3.0 → 1.4.0

package/ios/HexColorParser.swift

@@ -0,0 +1,55 @@
+import Foundation
+
+/// Parses hex color strings into RGBA components.
+/// Extracted from the Color extension to enable unit testing without tvOS target.
+struct HexColorParser {
+    struct RGBA: Equatable {
+        let red: Double
+        let green: Double
+        let blue: Double
+        let alpha: Double
+    }
+
+    /// Maximum input length for hex color strings to prevent DoS from very long strings.
+    static let maxInputLength = 20
+
+    /// Parses a hex color string into RGBA components (0.0–1.0 range).
+    /// Supports 3-char (RGB), 6-char (RRGGBB), and 8-char (AARRGGBB) formats.
+    /// Leading "#" or other non-alphanumeric characters are stripped.
+    /// Returns nil if the string cannot be parsed.
+    static func parse(_ hex: String) -> RGBA? {
+        guard hex.count <= maxInputLength else {
+            return nil
+        }
+
+        let hex = hex.trimmingCharacters(in: CharacterSet.alphanumerics.inverted)
+
+        guard hex.count == 3 || hex.count == 6 || hex.count == 8 else {
+            return nil
+        }
+
+        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
+        }
+
+        return RGBA(
+            red: Double(r) / 255,
+            green: Double(g) / 255,
+            blue: Double(b) / 255,
+            alpha: Double(a) / 255
+        )
+    }
+}

package/ios/MarqueeText.swift

@@ -15,7 +15,6 @@ struct MarqueeText: View {
     @State private var textWidth: CGFloat = 0
     @State private var containerWidth: CGFloat = 0
     @State private var offset: CGFloat = 0
-    @State private var animationTask: Task<Void, Never>?
 
     private let calculator = MarqueeAnimationCalculator()
 
@@ -39,6 +38,10 @@ struct MarqueeText: View {
         calculator.shouldScroll(textWidth: textWidth, containerWidth: containerWidth)
     }
 
+    private var shouldAnimate: Bool {
+        animate && needsScroll
+    }
+
     var body: some View {
         GeometryReader { geometry in
             ZStack(alignment: Alignment(horizontal: .leading, vertical: .center)) {
@@ -57,11 +60,11 @@ struct MarqueeText: View {
                 // Visible text content
                 Group {
                     if needsScroll {
-                        // Duplicated text for seamless scroll loop
-                        Text(text + "     " + text)
-                            .font(font)
-                            .fixedSize()
-                            .offset(x: offset)
+                        HStack(spacing: calculator.spacing) {
+                            Text(text).font(font).fixedSize()
+                            Text(text).font(font).fixedSize()
+                        }
+                        .offset(x: offset)
                     } else {
                         Text(text)
                             .font(font)
@@ -81,24 +84,29 @@ struct MarqueeText: View {
             .onAppear {
                 containerWidth = geometry.size.width
             }
-            .onChange(of: animate) { shouldAnimate in
-                if shouldAnimate && needsScroll {
-                    startScrolling()
-                } else {
-                    stopScrolling()
-                }
-            }
-            .onChange(of: needsScroll) { scrollNeeded in
-                if animate && scrollNeeded {
-                    startScrolling()
+            .task(id: shouldAnimate) {
+                if shouldAnimate {
+                    do {
+                        try await Task.sleep(nanoseconds: UInt64(startDelay * 1_000_000_000))
+                    } catch {
+                        return
+                    }
+                    guard !Task.isCancelled else { return }
+                    let distance = calculator.scrollDistance(textWidth: textWidth)
+                    let duration = calculator.animationDuration(for: distance)
+                    withAnimation(.linear(duration: duration).repeatForever(autoreverses: false)) {
+                        offset = -distance
+                    }
                 } else {
-                    stopScrolling()
+                    if offset != 0 {
+                        withAnimation(.easeOut(duration: 0.2)) {
+                            offset = 0
+                        }
+                    }
                 }
             }
             .onDisappear {
-                // Cancel animation task when view disappears to prevent memory leaks
-                animationTask?.cancel()
-                animationTask = nil
+                offset = 0
             }
         }
     }
@@ -123,37 +131,6 @@ struct MarqueeText: View {
         }
     }
 
-    private func startScrolling() {
-        animationTask?.cancel()
-        offset = 0
-
-        let distance = calculator.scrollDistance(textWidth: textWidth)
-        let duration = calculator.animationDuration(for: distance)
-
-        animationTask = Task {
-            do {
-                try await Task.sleep(nanoseconds: UInt64(startDelay * 1_000_000_000))
-            } catch {
-                return // Task was cancelled
-            }
-
-            guard !Task.isCancelled else { return }
-
-            await MainActor.run {
-                withAnimation(.linear(duration: duration).repeatForever(autoreverses: false)) {
-                    offset = -distance
-                }
-            }
-        }
-    }
-
-    private func stopScrolling() {
-        animationTask?.cancel()
-        animationTask = nil
-        withAnimation(.easeOut(duration: 0.2)) {
-            offset = 0
-        }
-    }
 }
 
 /// PreferenceKey for measuring text width reactively

package/ios/SearchResultCard.swift

@@ -0,0 +1,172 @@
+#if os(tvOS)
+
+import SwiftUI
+
+/// 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 SearchResultCard: View {
+    let item: SearchResultItem
+    let showTitle: Bool
+    let showSubtitle: Bool
+    let showFocusBorder: Bool
+    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)
+
+    /// Computed shape for the card with selective rounded corners.
+    /// Bottom corners are rounded only when no title/subtitle section is displayed.
+    private var cardShape: SelectiveRoundedRectangle {
+        SelectiveRoundedRectangle(
+            topLeadingRadius: 12,
+            topTrailingRadius: 12,
+            bottomLeadingRadius: (showTitle || showSubtitle) ? 0 : 12,
+            bottomTrailingRadius: (showTitle || showSubtitle) ? 0 : 12
+        )
+    }
+
+    // Title overlay height
+    private var overlayHeight: CGFloat { cardHeight * 0.25 }  // 25% of card
+
+    var body: some View {
+        Button(action: onSelect) {
+            VStack(alignment: .leading, spacing: showTitle || showSubtitle ? 12 : 0) {
+                ZStack(alignment: .bottom) {
+                    // Card image content
+                    ZStack {
+                        placeholderColor
+
+                        if let imageUrl = item.imageUrl, let url = URL(string: imageUrl) {
+                            CachedAsyncImage(
+                                url: url,
+                                contentMode: imageContentMode,
+                                width: cardWidth,
+                                height: cardHeight
+                            )
+                        } else {
+                            placeholderIcon
+                        }
+                    }
+                    .frame(width: cardWidth, height: cardHeight)
+                    .clipped()
+
+                    // Title overlay with native material blur
+                    if showTitleOverlay {
+                        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)
+                                    .lineLimit(2)
+                                    .multilineTextAlignment(.center)
+                                    .padding(.horizontal, cardPadding)
+                            }
+                        }
+                        .frame(width: cardWidth, height: overlayHeight)
+                    }
+                }
+                .frame(width: cardWidth, height: cardHeight)
+                .clipShape(cardShape)
+                .overlay(
+                    cardShape.stroke(showFocusBorder && isFocused ? accentColor : Color.clear, lineWidth: 4)
+                )
+
+                if showTitle || showSubtitle {
+                    VStack(alignment: .leading, spacing: 4) {
+                        if showTitle {
+                            Text(item.title)
+                                .font(.callout)
+                                .fontWeight(.medium)
+                                .lineLimit(2)
+                                .multilineTextAlignment(.leading)
+                                .foregroundColor(.primary)
+                        }
+
+                        if showSubtitle, let subtitle = item.subtitle {
+                            Text(subtitle)
+                                .font(.caption)
+                                .foregroundColor(textColor ?? .secondary)
+                                .lineLimit(1)
+                        }
+                    }
+                    .padding(cardPadding)
+                    .frame(width: cardWidth, alignment: .leading)
+                }
+            }
+        }
+        .buttonStyle(.card)
+        .focused($isFocused)
+    }
+
+    private var placeholderIcon: some View {
+        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))
+        }
+    }
+}
+
+#endif

package/ios/SearchResultItem.swift

@@ -0,0 +1,8 @@
+import Foundation
+
+struct SearchResultItem: Identifiable, Equatable {
+    let id: String
+    let title: String
+    let subtitle: String?
+    let imageUrl: String?
+}

package/ios/Tests/HexColorParserTests.swift

@@ -0,0 +1,183 @@
+import XCTest
+
+/// Unit tests for HexColorParser
+final class HexColorParserTests: XCTestCase {
+
+    // MARK: - 6-character hex (RRGGBB)
+
+    func testParse_6charWithHash_white() {
+        let rgba = HexColorParser.parse("#FFFFFF")
+        XCTAssertNotNil(rgba)
+        XCTAssertEqual(rgba!.red, 1.0, accuracy: 0.001)
+        XCTAssertEqual(rgba!.green, 1.0, accuracy: 0.001)
+        XCTAssertEqual(rgba!.blue, 1.0, accuracy: 0.001)
+        XCTAssertEqual(rgba!.alpha, 1.0, accuracy: 0.001)
+    }
+
+    func testParse_6charWithHash_black() {
+        let rgba = HexColorParser.parse("#000000")
+        XCTAssertNotNil(rgba)
+        XCTAssertEqual(rgba!.red, 0.0, accuracy: 0.001)
+        XCTAssertEqual(rgba!.green, 0.0, accuracy: 0.001)
+        XCTAssertEqual(rgba!.blue, 0.0, accuracy: 0.001)
+        XCTAssertEqual(rgba!.alpha, 1.0, accuracy: 0.001)
+    }
+
+    func testParse_6charWithHash_red() {
+        let rgba = HexColorParser.parse("#FF0000")
+        XCTAssertNotNil(rgba)
+        XCTAssertEqual(rgba!.red, 1.0, accuracy: 0.001)
+        XCTAssertEqual(rgba!.green, 0.0, accuracy: 0.001)
+        XCTAssertEqual(rgba!.blue, 0.0, accuracy: 0.001)
+    }
+
+    func testParse_6charWithoutHash() {
+        let rgba = HexColorParser.parse("FFC312")
+        XCTAssertNotNil(rgba)
+        XCTAssertEqual(rgba!.red, 1.0, accuracy: 0.001)
+        XCTAssertEqual(rgba!.green, 0.765, accuracy: 0.001)
+        XCTAssertEqual(rgba!.blue, Double(0x12) / 255, accuracy: 0.001)
+    }
+
+    func testParse_6charLowercase() {
+        let rgba = HexColorParser.parse("#ff5733")
+        XCTAssertNotNil(rgba)
+        XCTAssertEqual(rgba!.red, 1.0, accuracy: 0.001)
+        XCTAssertEqual(rgba!.green, Double(0x57) / 255, accuracy: 0.001)
+        XCTAssertEqual(rgba!.blue, Double(0x33) / 255, accuracy: 0.001)
+    }
+
+    // MARK: - 3-character hex (RGB shorthand)
+
+    func testParse_3charWithHash_white() {
+        let rgba = HexColorParser.parse("#FFF")
+        XCTAssertNotNil(rgba)
+        XCTAssertEqual(rgba!.red, 1.0, accuracy: 0.001)
+        XCTAssertEqual(rgba!.green, 1.0, accuracy: 0.001)
+        XCTAssertEqual(rgba!.blue, 1.0, accuracy: 0.001)
+        XCTAssertEqual(rgba!.alpha, 1.0, accuracy: 0.001)
+    }
+
+    func testParse_3charWithHash_black() {
+        let rgba = HexColorParser.parse("#000")
+        XCTAssertNotNil(rgba)
+        XCTAssertEqual(rgba!.red, 0.0, accuracy: 0.001)
+        XCTAssertEqual(rgba!.green, 0.0, accuracy: 0.001)
+        XCTAssertEqual(rgba!.blue, 0.0, accuracy: 0.001)
+    }
+
+    func testParse_3char_expandsCorrectly() {
+        // #F80 should expand to #FF8800
+        let rgba = HexColorParser.parse("#F80")
+        XCTAssertNotNil(rgba)
+        XCTAssertEqual(rgba!.red, 1.0, accuracy: 0.001)
+        XCTAssertEqual(rgba!.green, Double(0x88) / 255, accuracy: 0.001)
+        XCTAssertEqual(rgba!.blue, 0.0, accuracy: 0.001)
+    }
+
+    // MARK: - 8-character hex (AARRGGBB)
+
+    func testParse_8charWithHash_fullAlpha() {
+        let rgba = HexColorParser.parse("#FFFF0000")
+        XCTAssertNotNil(rgba)
+        XCTAssertEqual(rgba!.alpha, 1.0, accuracy: 0.001)
+        XCTAssertEqual(rgba!.red, 1.0, accuracy: 0.001)
+        XCTAssertEqual(rgba!.green, 0.0, accuracy: 0.001)
+        XCTAssertEqual(rgba!.blue, 0.0, accuracy: 0.001)
+    }
+
+    func testParse_8charWithHash_halfAlpha() {
+        let rgba = HexColorParser.parse("#80FF0000")
+        XCTAssertNotNil(rgba)
+        XCTAssertEqual(rgba!.alpha, Double(0x80) / 255, accuracy: 0.001)
+        XCTAssertEqual(rgba!.red, 1.0, accuracy: 0.001)
+    }
+
+    func testParse_8charWithHash_zeroAlpha() {
+        let rgba = HexColorParser.parse("#00FFFFFF")
+        XCTAssertNotNil(rgba)
+        XCTAssertEqual(rgba!.alpha, 0.0, accuracy: 0.001)
+        XCTAssertEqual(rgba!.red, 1.0, accuracy: 0.001)
+        XCTAssertEqual(rgba!.green, 1.0, accuracy: 0.001)
+        XCTAssertEqual(rgba!.blue, 1.0, accuracy: 0.001)
+    }
+
+    // MARK: - Invalid inputs
+
+    func testParse_emptyString_returnsNil() {
+        XCTAssertNil(HexColorParser.parse(""))
+    }
+
+    func testParse_hashOnly_returnsNil() {
+        XCTAssertNil(HexColorParser.parse("#"))
+    }
+
+    func testParse_invalidHexChars_returnsNil() {
+        XCTAssertNil(HexColorParser.parse("#GGGGGG"))
+    }
+
+    func testParse_wrongLength_4chars_returnsNil() {
+        XCTAssertNil(HexColorParser.parse("#ABCD"))
+    }
+
+    func testParse_wrongLength_5chars_returnsNil() {
+        XCTAssertNil(HexColorParser.parse("#ABCDE"))
+    }
+
+    func testParse_wrongLength_7chars_returnsNil() {
+        XCTAssertNil(HexColorParser.parse("#ABCDEFF"))
+    }
+
+    func testParse_tooLongString_returnsNil() {
+        let longString = String(repeating: "A", count: 21)
+        XCTAssertNil(HexColorParser.parse(longString))
+    }
+
+    func testParse_maxLengthString_stillParsed() {
+        // 20 chars is at the limit. After stripping "#", we get 19 chars which is > 8, so nil.
+        let atLimit = "#" + String(repeating: "F", count: 19)
+        XCTAssertEqual(atLimit.count, 20)
+        XCTAssertNil(HexColorParser.parse(atLimit)) // 19 hex chars is not 3, 6, or 8
+    }
+
+    func testParse_exactlyMaxLength_valid8char() {
+        // A valid 8-char hex within the 20-char limit
+        let valid = "#FFAABBCC"
+        XCTAssertEqual(valid.count, 9) // well under 20
+        XCTAssertNotNil(HexColorParser.parse(valid))
+    }
+
+    // MARK: - Edge cases
+
+    func testParse_mixedCase() {
+        let rgba = HexColorParser.parse("#aAbBcC")
+        XCTAssertNotNil(rgba)
+        XCTAssertEqual(rgba!.red, Double(0xAA) / 255, accuracy: 0.001)
+        XCTAssertEqual(rgba!.green, Double(0xBB) / 255, accuracy: 0.001)
+        XCTAssertEqual(rgba!.blue, Double(0xCC) / 255, accuracy: 0.001)
+    }
+
+    func testParse_defaultAccentColor_FFC312() {
+        // This is the actual default accent color used by the library
+        let rgba = HexColorParser.parse("#FFC312")
+        XCTAssertNotNil(rgba)
+        XCTAssertEqual(rgba!.red, 1.0, accuracy: 0.001)
+        XCTAssertEqual(rgba!.green, 0.765, accuracy: 0.001)
+        XCTAssertEqual(rgba!.blue, Double(0x12) / 255, accuracy: 0.001)
+        XCTAssertEqual(rgba!.alpha, 1.0, accuracy: 0.001)
+    }
+
+    // MARK: - RGBA Equatable conformance
+
+    func testRGBA_equality() {
+        let a = HexColorParser.RGBA(red: 1.0, green: 0.5, blue: 0.0, alpha: 1.0)
+        let b = HexColorParser.RGBA(red: 1.0, green: 0.5, blue: 0.0, alpha: 1.0)
+        XCTAssertEqual(a, b)
+    }
+
+    func testRGBA_inequality() {
+        let a = HexColorParser.RGBA(red: 1.0, green: 0.5, blue: 0.0, alpha: 1.0)
+        let b = HexColorParser.RGBA(red: 0.0, green: 0.5, blue: 0.0, alpha: 1.0)
+        XCTAssertNotEqual(a, b)
+    }
+}

package/ios/Tests/SearchViewModelTests.swift

@@ -35,7 +35,7 @@ final class SearchViewModelTests: XCTestCase {
     }
 
     func testInitialState_defaultPlaceholder() {
-        XCTAssertEqual(viewModel.placeholder, "Search movies and videos...")
+        XCTAssertEqual(viewModel.placeholder, "Search...")
     }
 
     func testInitialState_showTitleFalse() {

package/ios/TvosSearchContentView.swift

@@ -0,0 +1,125 @@
+#if os(tvOS)
+
+import SwiftUI
+
+struct TvosSearchContentView: View {
+    @ObservedObject var viewModel: SearchViewModel
+
+    private var gridColumns: [GridItem] {
+        Array(repeating: GridItem(.flexible(), spacing: viewModel.cardMargin), count: viewModel.columns)
+    }
+
+    var body: some View {
+        NavigationView {
+            ZStack {
+                Group {
+                    if viewModel.results.isEmpty && viewModel.searchText.isEmpty {
+                        emptyStateView
+                    } else if viewModel.results.isEmpty && !viewModel.searchText.isEmpty {
+                        if viewModel.isLoading {
+                            searchingStateView
+                        } else {
+                            noResultsView
+                        }
+                    } else {
+                        resultsGridView
+                    }
+                }
+
+                // Loading overlay when loading with results
+                if viewModel.isLoading && !viewModel.results.isEmpty {
+                    loadingOverlay
+                }
+            }
+            .searchable(text: $viewModel.searchText, prompt: viewModel.placeholder)
+            .onChange(of: viewModel.searchText) { newValue in
+                viewModel.onSearch?(newValue)
+            }
+        }
+        .padding(.top, viewModel.topInset)
+        .ignoresSafeArea(.all, edges: .top)
+    }
+
+    private var emptyStateView: some View {
+        VStack(spacing: 20) {
+            Image(systemName: "magnifyingglass")
+                .font(.system(size: 80))
+                .foregroundColor(viewModel.textColor ?? .secondary)
+            Text(viewModel.emptyStateText)
+                .font(.headline)
+                .foregroundColor(viewModel.textColor ?? .secondary)
+        }
+        .frame(maxWidth: .infinity, maxHeight: .infinity)
+    }
+
+    private var searchingStateView: some View {
+        VStack(spacing: 20) {
+            ProgressView()
+                .scaleEffect(1.5)
+            Text(viewModel.searchingText)
+                .font(.headline)
+                .foregroundColor(viewModel.textColor ?? .secondary)
+        }
+        .frame(maxWidth: .infinity, maxHeight: .infinity)
+    }
+
+    private var noResultsView: some View {
+        VStack(spacing: 20) {
+            Image(systemName: "film.stack")
+                .font(.system(size: 80))
+                .foregroundColor(viewModel.textColor ?? .secondary)
+            Text(viewModel.noResultsText)
+                .font(.headline)
+                .foregroundColor(viewModel.textColor ?? .secondary)
+            Text(viewModel.noResultsHintText)
+                .font(.subheadline)
+                .foregroundColor(viewModel.textColor ?? .secondary)
+        }
+        .frame(maxWidth: .infinity, maxHeight: .infinity)
+    }
+
+    private var loadingOverlay: some View {
+        VStack {
+            HStack {
+                Spacer()
+                ProgressView()
+                    .padding(16)
+                    .background(Color.black.opacity(0.6))
+                    .clipShape(RoundedRectangle(cornerRadius: 12))
+            }
+            .padding(.trailing, 60)
+            .padding(.top, 20)
+            Spacer()
+        }
+    }
+
+    private var resultsGridView: some View {
+        ScrollView {
+            LazyVGrid(columns: gridColumns, spacing: viewModel.cardMargin) {
+                ForEach(viewModel.results) { item in
+                    SearchResultCard(
+                        item: item,
+                        showTitle: viewModel.showTitle,
+                        showSubtitle: viewModel.showSubtitle,
+                        showFocusBorder: viewModel.showFocusBorder,
+                        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) }
+                    )
+                }
+            }
+            .padding(.horizontal, 60)
+            .padding(.vertical, 40)
+        }
+    }
+}
+
+#endif

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "expo-tvos-search",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Native tvOS search view using SwiftUI .searchable modifier for Expo/React Native",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -73,6 +73,7 @@
     "ios",
     "expo-module.config.json",
     "README.md",
+    "CHANGELOG.md",
     "LICENSE"
   ],
   "engines": {