From c36c6bf251c150f82da1844bbd715b01026da067 Mon Sep 17 00:00:00 2001
From: Wessel Verheij <info@nightworks.io>
Date: Thu, 10 Sep 2026 22:11:07 +0200
Subject: [PATCH 1/4] feat: add Edge Component showcase screens for top bar,
 bottom nav, and side nav

Adds 9 screens under app/NativeComponents/EdgeComponents demonstrating every
Edge Component prop variant (display modes, scroll behavior, search fields,
destructive actions, a logo title slot, a search tab item, and a header
background image), listed in the demo launcher's own "Edge Components"
group and registered under /edge-components/*.

Repeated placeholder markup is factored into a shared partial
(native.partials.edge-component-note) instead of being copy-pasted across
files. Each screen is covered by a dedicated feature test asserting the
actual rendered props, not just that it mounts without error.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 app/NativeComponents/DemoLauncher.php         |  14 +++
 .../EdgeComponents/BottomNav.php              |  21 ++++
 .../EdgeComponents/BottomNavSearchItem.php    |  21 ++++
 .../EdgeComponents/SideNav.php                |  30 +++++
 .../EdgeComponents/SideNavHeaderImage.php     |  30 +++++
 .../EdgeComponents/TopBar.php                 |  16 +++
 .../TopBarDestructiveAction.php               |  16 +++
 .../EdgeComponents/TopBarLargeTitle.php       |  16 +++
 .../EdgeComponents/TopBarLogo.php             |  16 +++
 .../EdgeComponents/TopBarSearch.php           |  16 +++
 .../bottom-nav-search-item.blade.php          |  13 +++
 .../edge-components/bottom-nav.blade.php      |   7 ++
 .../edge-components/side-nav-body.blade.php   |   1 +
 .../edge-components/side-nav-drawer.blade.php |  12 ++
 .../side-nav-header-image.blade.php           |   7 ++
 .../top-bar-destructive-action.blade.php      |   5 +
 .../top-bar-large-title.blade.php             |   5 +
 .../edge-components/top-bar-logo.blade.php    |   7 ++
 .../edge-components/top-bar-search.blade.php  |   3 +
 .../native/edge-components/top-bar.blade.php  |   6 +
 .../partials/edge-component-note.blade.php    |   5 +
 routes/mobile.php                             |  23 ++++
 tests/Feature/Native/DemoLauncherTest.php     |   6 +-
 tests/Feature/Native/DemoScreensSmokeTest.php |   9 ++
 tests/Feature/Native/EdgeComponentsTest.php   | 106 ++++++++++++++++++
 25 files changed, 408 insertions(+), 3 deletions(-)
 create mode 100644 app/NativeComponents/EdgeComponents/BottomNav.php
 create mode 100644 app/NativeComponents/EdgeComponents/BottomNavSearchItem.php
 create mode 100644 app/NativeComponents/EdgeComponents/SideNav.php
 create mode 100644 app/NativeComponents/EdgeComponents/SideNavHeaderImage.php
 create mode 100644 app/NativeComponents/EdgeComponents/TopBar.php
 create mode 100644 app/NativeComponents/EdgeComponents/TopBarDestructiveAction.php
 create mode 100644 app/NativeComponents/EdgeComponents/TopBarLargeTitle.php
 create mode 100644 app/NativeComponents/EdgeComponents/TopBarLogo.php
 create mode 100644 app/NativeComponents/EdgeComponents/TopBarSearch.php
 create mode 100644 resources/views/native/edge-components/bottom-nav-search-item.blade.php
 create mode 100644 resources/views/native/edge-components/bottom-nav.blade.php
 create mode 100644 resources/views/native/edge-components/side-nav-body.blade.php
 create mode 100644 resources/views/native/edge-components/side-nav-drawer.blade.php
 create mode 100644 resources/views/native/edge-components/side-nav-header-image.blade.php
 create mode 100644 resources/views/native/edge-components/top-bar-destructive-action.blade.php
 create mode 100644 resources/views/native/edge-components/top-bar-large-title.blade.php
 create mode 100644 resources/views/native/edge-components/top-bar-logo.blade.php
 create mode 100644 resources/views/native/edge-components/top-bar-search.blade.php
 create mode 100644 resources/views/native/edge-components/top-bar.blade.php
 create mode 100644 resources/views/native/partials/edge-component-note.blade.php
 create mode 100644 tests/Feature/Native/EdgeComponentsTest.php

diff --git a/app/NativeComponents/DemoLauncher.php b/app/NativeComponents/DemoLauncher.php
index 5b72034..9ea603d 100644
--- a/app/NativeComponents/DemoLauncher.php
+++ b/app/NativeComponents/DemoLauncher.php
@@ -59,6 +59,20 @@ class DemoLauncher extends NativeComponent
                 ['id' => 'numberswitcher', 'title' => 'Number Switcher', 'subtitle' => 'content-transition — rolling in-place digit changes', 'icon' => 'textformat.123', 'color' => '#14B8A6', 'url' => '/number-switcher'],
             ],
         ],
+        [
+            'title' => 'Edge Components',
+            'demos' => [
+                ['id' => 'edge-top-bar', 'title' => 'Top Bar', 'subtitle' => 'Title, subtitle, and trailing actions', 'icon' => 'rectangle.topthird.inset.filled', 'color' => '#0EA5E9', 'url' => '/edge-components/top-bar'],
+                ['id' => 'edge-top-bar-large-title', 'title' => 'Top Bar — Large Title', 'subtitle' => 'The large display mode', 'icon' => 'textformat.size.larger', 'color' => '#0EA5E9', 'url' => '/edge-components/top-bar-large-title'],
+                ['id' => 'edge-top-bar-search', 'title' => 'Top Bar — Search', 'subtitle' => 'An attached native search field', 'icon' => 'magnifyingglass', 'color' => '#0EA5E9', 'url' => '/edge-components/top-bar-search'],
+                ['id' => 'edge-top-bar-destructive-action', 'title' => 'Top Bar — Destructive Action', 'subtitle' => 'An action tinted for a destructive tap', 'icon' => 'trash', 'color' => '#EF4444', 'url' => '/edge-components/top-bar-destructive-action'],
+                ['id' => 'edge-top-bar-logo', 'title' => 'Top Bar — Logo', 'subtitle' => 'An image in the title slot', 'icon' => 'photo', 'color' => '#0EA5E9', 'url' => '/edge-components/top-bar-logo'],
+                ['id' => 'edge-bottom-nav', 'title' => 'Bottom Nav', 'subtitle' => 'Active, news, and badge items', 'icon' => 'square.grid.2x2', 'color' => '#22C55E', 'url' => '/edge-components/bottom-nav'],
+                ['id' => 'edge-bottom-nav-search-item', 'title' => 'Bottom Nav — Search Item', 'subtitle' => 'A dedicated search tab', 'icon' => 'magnifyingglass.circle', 'color' => '#22C55E', 'url' => '/edge-components/bottom-nav-search-item'],
+                ['id' => 'edge-side-nav', 'title' => 'Side Nav', 'subtitle' => 'Header, collapsed group, and a divider', 'icon' => 'sidebar.left', 'color' => '#A855F7', 'url' => '/edge-components/side-nav'],
+                ['id' => 'edge-side-nav-header-image', 'title' => 'Side Nav — Header Image', 'subtitle' => 'A background image behind the header', 'icon' => 'photo.on.rectangle', 'color' => '#A855F7', 'url' => '/edge-components/side-nav-header-image'],
+            ],
+        ],
         [
             'title' => 'Mini Apps',
             'demos' => [
diff --git a/app/NativeComponents/EdgeComponents/BottomNav.php b/app/NativeComponents/EdgeComponents/BottomNav.php
new file mode 100644
index 0000000..27fa2f1
--- /dev/null
+++ b/app/NativeComponents/EdgeComponents/BottomNav.php
@@ -0,0 +1,21 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\NativeComponents\EdgeComponents;
+
+use Illuminate\View\View;
+use Native\Mobile\Edge\NativeComponent;
+
+final class BottomNav extends NativeComponent
+{
+    public function navTitle(): string
+    {
+        return 'Bottom Nav';
+    }
+
+    public function render(): View
+    {
+        return view('native.edge-components.bottom-nav');
+    }
+}
diff --git a/app/NativeComponents/EdgeComponents/BottomNavSearchItem.php b/app/NativeComponents/EdgeComponents/BottomNavSearchItem.php
new file mode 100644
index 0000000..7e5fa88
--- /dev/null
+++ b/app/NativeComponents/EdgeComponents/BottomNavSearchItem.php
@@ -0,0 +1,21 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\NativeComponents\EdgeComponents;
+
+use Illuminate\View\View;
+use Native\Mobile\Edge\NativeComponent;
+
+final class BottomNavSearchItem extends NativeComponent
+{
+    public function navTitle(): string
+    {
+        return 'Bottom Nav Search Item';
+    }
+
+    public function render(): View
+    {
+        return view('native.edge-components.bottom-nav-search-item');
+    }
+}
diff --git a/app/NativeComponents/EdgeComponents/SideNav.php b/app/NativeComponents/EdgeComponents/SideNav.php
new file mode 100644
index 0000000..50d6ed3
--- /dev/null
+++ b/app/NativeComponents/EdgeComponents/SideNav.php
@@ -0,0 +1,30 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\NativeComponents\EdgeComponents;
+
+use Illuminate\View\View;
+use Native\Mobile\Edge\NativeComponent;
+use Native\Mobile\UI\Builders\Drawer;
+use Native\Mobile\UI\Concerns\InteractsWithDrawer;
+
+final class SideNav extends NativeComponent
+{
+    use InteractsWithDrawer;
+
+    public function navTitle(): string
+    {
+        return 'Side Nav';
+    }
+
+    public function drawerOverride(): ?Drawer
+    {
+        return Drawer::make(view('native.edge-components.side-nav-drawer'));
+    }
+
+    public function render(): View
+    {
+        return view('native.edge-components.side-nav-body');
+    }
+}
diff --git a/app/NativeComponents/EdgeComponents/SideNavHeaderImage.php b/app/NativeComponents/EdgeComponents/SideNavHeaderImage.php
new file mode 100644
index 0000000..5a4b777
--- /dev/null
+++ b/app/NativeComponents/EdgeComponents/SideNavHeaderImage.php
@@ -0,0 +1,30 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\NativeComponents\EdgeComponents;
+
+use Illuminate\View\View;
+use Native\Mobile\Edge\NativeComponent;
+use Native\Mobile\UI\Builders\Drawer;
+use Native\Mobile\UI\Concerns\InteractsWithDrawer;
+
+final class SideNavHeaderImage extends NativeComponent
+{
+    use InteractsWithDrawer;
+
+    public function navTitle(): string
+    {
+        return 'Side Nav Header Image';
+    }
+
+    public function drawerOverride(): ?Drawer
+    {
+        return Drawer::make(view('native.edge-components.side-nav-header-image'));
+    }
+
+    public function render(): View
+    {
+        return view('native.edge-components.side-nav-body');
+    }
+}
diff --git a/app/NativeComponents/EdgeComponents/TopBar.php b/app/NativeComponents/EdgeComponents/TopBar.php
new file mode 100644
index 0000000..7e8a75d
--- /dev/null
+++ b/app/NativeComponents/EdgeComponents/TopBar.php
@@ -0,0 +1,16 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\NativeComponents\EdgeComponents;
+
+use Illuminate\View\View;
+use Native\Mobile\Edge\NativeComponent;
+
+final class TopBar extends NativeComponent
+{
+    public function render(): View
+    {
+        return view('native.edge-components.top-bar');
+    }
+}
diff --git a/app/NativeComponents/EdgeComponents/TopBarDestructiveAction.php b/app/NativeComponents/EdgeComponents/TopBarDestructiveAction.php
new file mode 100644
index 0000000..fef27d1
--- /dev/null
+++ b/app/NativeComponents/EdgeComponents/TopBarDestructiveAction.php
@@ -0,0 +1,16 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\NativeComponents\EdgeComponents;
+
+use Illuminate\View\View;
+use Native\Mobile\Edge\NativeComponent;
+
+final class TopBarDestructiveAction extends NativeComponent
+{
+    public function render(): View
+    {
+        return view('native.edge-components.top-bar-destructive-action');
+    }
+}
diff --git a/app/NativeComponents/EdgeComponents/TopBarLargeTitle.php b/app/NativeComponents/EdgeComponents/TopBarLargeTitle.php
new file mode 100644
index 0000000..4145f8d
--- /dev/null
+++ b/app/NativeComponents/EdgeComponents/TopBarLargeTitle.php
@@ -0,0 +1,16 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\NativeComponents\EdgeComponents;
+
+use Illuminate\View\View;
+use Native\Mobile\Edge\NativeComponent;
+
+final class TopBarLargeTitle extends NativeComponent
+{
+    public function render(): View
+    {
+        return view('native.edge-components.top-bar-large-title');
+    }
+}
diff --git a/app/NativeComponents/EdgeComponents/TopBarLogo.php b/app/NativeComponents/EdgeComponents/TopBarLogo.php
new file mode 100644
index 0000000..ef74a34
--- /dev/null
+++ b/app/NativeComponents/EdgeComponents/TopBarLogo.php
@@ -0,0 +1,16 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\NativeComponents\EdgeComponents;
+
+use Illuminate\View\View;
+use Native\Mobile\Edge\NativeComponent;
+
+final class TopBarLogo extends NativeComponent
+{
+    public function render(): View
+    {
+        return view('native.edge-components.top-bar-logo');
+    }
+}
diff --git a/app/NativeComponents/EdgeComponents/TopBarSearch.php b/app/NativeComponents/EdgeComponents/TopBarSearch.php
new file mode 100644
index 0000000..2d98bb9
--- /dev/null
+++ b/app/NativeComponents/EdgeComponents/TopBarSearch.php
@@ -0,0 +1,16 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\NativeComponents\EdgeComponents;
+
+use Illuminate\View\View;
+use Native\Mobile\Edge\NativeComponent;
+
+final class TopBarSearch extends NativeComponent
+{
+    public function render(): View
+    {
+        return view('native.edge-components.top-bar-search');
+    }
+}
diff --git a/resources/views/native/edge-components/bottom-nav-search-item.blade.php b/resources/views/native/edge-components/bottom-nav-search-item.blade.php
new file mode 100644
index 0000000..ea1b368
--- /dev/null
+++ b/resources/views/native/edge-components/bottom-nav-search-item.blade.php
@@ -0,0 +1,13 @@
+@include('native.partials.edge-component-note', ['caption' => 'Edge Component showcase — this screen exists to show off the bottom nav below.'])
+
+<native:bottom-nav>
+    <native:bottom-nav-item id="home" icon="home" label="Home" url="/edge-components/bottom-nav-search-item" :active="true" />
+    <native:bottom-nav-item
+        id="search"
+        icon="search"
+        label="Search"
+        search="true"
+        search-placeholder="Search"
+    />
+    <native:bottom-nav-item id="profile" icon="person" label="Profile" url="/edge-components/bottom-nav-search-item" />
+</native:bottom-nav>
diff --git a/resources/views/native/edge-components/bottom-nav.blade.php b/resources/views/native/edge-components/bottom-nav.blade.php
new file mode 100644
index 0000000..f6cbf46
--- /dev/null
+++ b/resources/views/native/edge-components/bottom-nav.blade.php
@@ -0,0 +1,7 @@
+@include('native.partials.edge-component-note', ['caption' => 'Edge Component showcase — this screen exists to show off the bottom nav below.'])
+
+<native:bottom-nav>
+    <native:bottom-nav-item id="home" icon="home" label="Home" url="/edge-components/bottom-nav" :active="true" />
+    <native:bottom-nav-item id="friends" icon="person" label="Friends" url="/edge-components/bottom-nav" :news="true" />
+    <native:bottom-nav-item id="profile" icon="person" label="Profile" url="/edge-components/bottom-nav" badge="3" />
+</native:bottom-nav>
diff --git a/resources/views/native/edge-components/side-nav-body.blade.php b/resources/views/native/edge-components/side-nav-body.blade.php
new file mode 100644
index 0000000..d13a445
--- /dev/null
+++ b/resources/views/native/edge-components/side-nav-body.blade.php
@@ -0,0 +1 @@
+@include('native.partials.edge-component-note', ['caption' => 'Edge Component showcase — this screen exists to show off the side drawer.'])
diff --git a/resources/views/native/edge-components/side-nav-drawer.blade.php b/resources/views/native/edge-components/side-nav-drawer.blade.php
new file mode 100644
index 0000000..375d530
--- /dev/null
+++ b/resources/views/native/edge-components/side-nav-drawer.blade.php
@@ -0,0 +1,12 @@
+<native:side-nav-header title="My App" subtitle="user@example.com" icon="person" />
+
+<native:side-nav-item id="home" label="Home" icon="home" url="/edge-components/side-nav" :active="true" />
+
+<native:side-nav-group heading="Account" :expanded="false">
+    <native:side-nav-item id="profile" label="Profile" icon="person" url="/edge-components/side-nav" />
+    <native:side-nav-item id="settings" label="Settings" icon="settings" url="/edge-components/side-nav" />
+</native:side-nav-group>
+
+<native:divider />
+
+<native:side-nav-item id="help" label="Help" icon="help" url="https://nativephp.com/docs" open-in-browser="true" />
diff --git a/resources/views/native/edge-components/side-nav-header-image.blade.php b/resources/views/native/edge-components/side-nav-header-image.blade.php
new file mode 100644
index 0000000..9f7117d
--- /dev/null
+++ b/resources/views/native/edge-components/side-nav-header-image.blade.php
@@ -0,0 +1,7 @@
+<native:side-nav-header
+    title="My App"
+    subtitle="user@example.com"
+    image-url="https://images.nationalgeographic.org/image/upload/v1638892520/EducationHub/photos/stream-in-colorado.jpg"
+/>
+
+<native:side-nav-item id="home" label="Home" icon="home" url="/edge-components/side-nav-header-image" :active="true" />
diff --git a/resources/views/native/edge-components/top-bar-destructive-action.blade.php b/resources/views/native/edge-components/top-bar-destructive-action.blade.php
new file mode 100644
index 0000000..3a69cd3
--- /dev/null
+++ b/resources/views/native/edge-components/top-bar-destructive-action.blade.php
@@ -0,0 +1,5 @@
+<native:top-bar title="Conversation" back="true">
+    <native:top-bar-action id="delete" icon="delete" label="Delete" destructive="true" />
+</native:top-bar>
+
+@include('native.partials.edge-component-note', ['caption' => 'Edge Component showcase — this screen exists to show off the top bar above.'])
diff --git a/resources/views/native/edge-components/top-bar-large-title.blade.php b/resources/views/native/edge-components/top-bar-large-title.blade.php
new file mode 100644
index 0000000..f2e92db
--- /dev/null
+++ b/resources/views/native/edge-components/top-bar-large-title.blade.php
@@ -0,0 +1,5 @@
+<native:top-bar title="Dashboard" display-mode="large" back="true">
+    <native:top-bar-action id="search" icon="search" label="Search" />
+</native:top-bar>
+
+@include('native.partials.edge-component-note', ['caption' => 'Edge Component showcase — this screen exists to show off the top bar above.'])
diff --git a/resources/views/native/edge-components/top-bar-logo.blade.php b/resources/views/native/edge-components/top-bar-logo.blade.php
new file mode 100644
index 0000000..aa2407d
--- /dev/null
+++ b/resources/views/native/edge-components/top-bar-logo.blade.php
@@ -0,0 +1,7 @@
+<native:top-bar display-mode="inline" back="true">
+    <native:top-bar-title>
+        <native:image src="https://nativephp.com/favicon.svg" height="28" />
+    </native:top-bar-title>
+</native:top-bar>
+
+@include('native.partials.edge-component-note', ['caption' => 'Edge Component showcase — this screen exists to show off the top bar above.'])
diff --git a/resources/views/native/edge-components/top-bar-search.blade.php b/resources/views/native/edge-components/top-bar-search.blade.php
new file mode 100644
index 0000000..3ccd3cb
--- /dev/null
+++ b/resources/views/native/edge-components/top-bar-search.blade.php
@@ -0,0 +1,3 @@
+<native:top-bar title="Dashboard" search-placeholder="Search" scroll-behavior="pinned" back="true" />
+
+@include('native.partials.edge-component-note', ['caption' => 'Edge Component showcase — this screen exists to show off the top bar above.'])
diff --git a/resources/views/native/edge-components/top-bar.blade.php b/resources/views/native/edge-components/top-bar.blade.php
new file mode 100644
index 0000000..53ff566
--- /dev/null
+++ b/resources/views/native/edge-components/top-bar.blade.php
@@ -0,0 +1,6 @@
+<native:top-bar title="Dashboard" subtitle="Welcome back" back="true">
+    <native:top-bar-action id="search" icon="search" label="Search" />
+    <native:top-bar-action id="settings" icon="settings" label="Settings" />
+</native:top-bar>
+
+@include('native.partials.edge-component-note', ['caption' => 'Edge Component showcase — this screen exists to show off the top bar above.'])
diff --git a/resources/views/native/partials/edge-component-note.blade.php b/resources/views/native/partials/edge-component-note.blade.php
new file mode 100644
index 0000000..d0f5c22
--- /dev/null
+++ b/resources/views/native/partials/edge-component-note.blade.php
@@ -0,0 +1,5 @@
+<scroll-view>
+    <column padding="16">
+        <text>{{ $caption }}</text>
+    </column>
+</scroll-view>
diff --git a/routes/mobile.php b/routes/mobile.php
index 2c6d5d2..e689eb7 100644
--- a/routes/mobile.php
+++ b/routes/mobile.php
@@ -6,6 +6,15 @@
 use App\NativeComponents\Counter;
 use App\NativeComponents\DemoLauncher;
 use App\NativeComponents\EdgeChildTest;
+use App\NativeComponents\EdgeComponents\BottomNav;
+use App\NativeComponents\EdgeComponents\BottomNavSearchItem;
+use App\NativeComponents\EdgeComponents\SideNav;
+use App\NativeComponents\EdgeComponents\SideNavHeaderImage;
+use App\NativeComponents\EdgeComponents\TopBar;
+use App\NativeComponents\EdgeComponents\TopBarDestructiveAction;
+use App\NativeComponents\EdgeComponents\TopBarLargeTitle;
+use App\NativeComponents\EdgeComponents\TopBarLogo;
+use App\NativeComponents\EdgeComponents\TopBarSearch;
 use App\NativeComponents\EventChannelTest;
 use App\NativeComponents\ExploreButtons;
 use App\NativeComponents\ExploreCards;
@@ -172,3 +181,17 @@
         'hits' => session()->increment('webview_embedded_hits'),
     ]);
 })->name('webview.embedded');
+
+// Edge Component showcase — one screen per component and prop variant,
+// listed in the demo launcher's "Edge Components" group.
+Route::nativeGroup(NativeStackLayout::class, function () {
+    Route::native('/edge-components/top-bar', TopBar::class)->name('edge-components.top-bar');
+    Route::native('/edge-components/top-bar-large-title', TopBarLargeTitle::class)->name('edge-components.top-bar-large-title');
+    Route::native('/edge-components/top-bar-search', TopBarSearch::class)->name('edge-components.top-bar-search');
+    Route::native('/edge-components/top-bar-destructive-action', TopBarDestructiveAction::class)->name('edge-components.top-bar-destructive-action');
+    Route::native('/edge-components/top-bar-logo', TopBarLogo::class)->name('edge-components.top-bar-logo');
+    Route::native('/edge-components/bottom-nav', BottomNav::class)->name('edge-components.bottom-nav');
+    Route::native('/edge-components/bottom-nav-search-item', BottomNavSearchItem::class)->name('edge-components.bottom-nav-search-item');
+    Route::native('/edge-components/side-nav', SideNav::class)->name('edge-components.side-nav');
+    Route::native('/edge-components/side-nav-header-image', SideNavHeaderImage::class)->name('edge-components.side-nav-header-image');
+});
diff --git a/tests/Feature/Native/DemoLauncherTest.php b/tests/Feature/Native/DemoLauncherTest.php
index 3e5beb9..dd877ff 100644
--- a/tests/Feature/Native/DemoLauncherTest.php
+++ b/tests/Feature/Native/DemoLauncherTest.php
@@ -11,7 +11,7 @@
         ->assertSee('Webview')
         ->assertSee('Twitter / X');
 
-    expect($screen->get('groups'))->toHaveCount(4);
+    expect($screen->get('groups'))->toHaveCount(5);
 });
 
 it('filters the demo list by search query', function () {
@@ -37,7 +37,7 @@
         ->call('findADemo', 'spotify')
         ->call('findADemo', '');
 
-    expect($screen->get('groups'))->toHaveCount(4);
+    expect($screen->get('groups'))->toHaveCount(5);
 });
 
 it('restores the full list when resuming from a pushed demo', function () {
@@ -45,5 +45,5 @@
         ->call('findADemo', 'counter')
         ->call('onResume');
 
-    expect($screen->get('groups'))->toHaveCount(4);
+    expect($screen->get('groups'))->toHaveCount(5);
 });
diff --git a/tests/Feature/Native/DemoScreensSmokeTest.php b/tests/Feature/Native/DemoScreensSmokeTest.php
index 6e9d307..6a49b55 100644
--- a/tests/Feature/Native/DemoScreensSmokeTest.php
+++ b/tests/Feature/Native/DemoScreensSmokeTest.php
@@ -45,4 +45,13 @@
     'syncup login' => '/syncup-native/login',
     'syncup friends' => '/syncup-native/friends',
     'syncup profile' => '/syncup-native/profile',
+    'edge components: top bar' => '/edge-components/top-bar',
+    'edge components: top bar large title' => '/edge-components/top-bar-large-title',
+    'edge components: top bar search' => '/edge-components/top-bar-search',
+    'edge components: top bar destructive action' => '/edge-components/top-bar-destructive-action',
+    'edge components: top bar logo' => '/edge-components/top-bar-logo',
+    'edge components: bottom nav' => '/edge-components/bottom-nav',
+    'edge components: bottom nav search item' => '/edge-components/bottom-nav-search-item',
+    'edge components: side nav' => '/edge-components/side-nav',
+    'edge components: side nav header image' => '/edge-components/side-nav-header-image',
 ]);
diff --git a/tests/Feature/Native/EdgeComponentsTest.php b/tests/Feature/Native/EdgeComponentsTest.php
new file mode 100644
index 0000000..4395356
--- /dev/null
+++ b/tests/Feature/Native/EdgeComponentsTest.php
@@ -0,0 +1,106 @@
+<?php
+
+use App\NativeComponents\EdgeComponents\BottomNav;
+use App\NativeComponents\EdgeComponents\BottomNavSearchItem;
+use App\NativeComponents\EdgeComponents\SideNav;
+use App\NativeComponents\EdgeComponents\SideNavHeaderImage;
+use App\NativeComponents\EdgeComponents\TopBar;
+use App\NativeComponents\EdgeComponents\TopBarDestructiveAction;
+use App\NativeComponents\EdgeComponents\TopBarLargeTitle;
+use App\NativeComponents\EdgeComponents\TopBarLogo;
+use App\NativeComponents\EdgeComponents\TopBarSearch;
+use Native\Mobile\Testing\Native;
+
+it('renders a top bar with a subtitle, two actions, and a back chevron', function () {
+    Native::visit('/edge-components/top-bar')
+        ->assertScreen(TopBar::class)
+        ->assertNavTitle('Dashboard')
+        ->assertSee('Welcome back')
+        ->assertElement('top_bar_action', fn (array $node): bool => ($node['props']['id'] ?? null) === 'search')
+        ->assertElement('top_bar_action', fn (array $node): bool => ($node['props']['id'] ?? null) === 'settings')
+        ->assertElement('native_root_stack', fn (array $node): bool => $node['props']['back'] ?? false);
+});
+
+it('renders a top bar with the large-title display mode and a back chevron', function () {
+    Native::visit('/edge-components/top-bar-large-title')
+        ->assertScreen(TopBarLargeTitle::class)
+        ->assertNavTitle('Dashboard')
+        ->assertElement('native_root_stack', fn (array $node): bool => ($node['props']['display_mode'] ?? null) === 'large'
+            && ($node['props']['back'] ?? false));
+});
+
+it('renders a top bar with an inline search field and a back chevron', function () {
+    Native::visit('/edge-components/top-bar-search')
+        ->assertScreen(TopBarSearch::class)
+        ->assertElement('native_root_stack', fn (array $node): bool => ($node['props']['scroll_behavior'] ?? null) === 'pinned'
+            && ($node['props']['search_placeholder'] ?? null) === 'Search'
+            && ($node['props']['back'] ?? false));
+});
+
+it('renders a top bar with a destructive action and a back chevron', function () {
+    Native::visit('/edge-components/top-bar-destructive-action')
+        ->assertScreen(TopBarDestructiveAction::class)
+        ->assertNavTitle('Conversation')
+        ->assertElement('top_bar_action', fn (array $node): bool => $node['props']['destructive'] ?? false)
+        ->assertElement('native_root_stack', fn (array $node): bool => $node['props']['back'] ?? false);
+});
+
+it('renders a top bar with a logo in the title slot and a back chevron', function () {
+    Native::visit('/edge-components/top-bar-logo')
+        ->assertScreen(TopBarLogo::class)
+        ->assertElement('top_bar_title')
+        ->assertElement('image', fn (array $node): bool => ($node['props']['src'] ?? null) === 'https://nativephp.com/favicon.svg')
+        ->assertElement('native_root_stack', fn (array $node): bool => $node['props']['back'] ?? false)
+        ->assertMissingElement('top_bar_action');
+});
+
+it('renders a bottom nav with active, news, and badge items', function () {
+    Native::visit('/edge-components/bottom-nav')
+        ->assertScreen(BottomNav::class)
+        ->assertNavTitle('Bottom Nav')
+        ->assertElement('bottom_nav_item', fn (array $node): bool => ($node['props']['id'] ?? null) === 'home'
+            && ($node['props']['active'] ?? false))
+        ->assertElement('bottom_nav_item', fn (array $node): bool => ($node['props']['id'] ?? null) === 'friends'
+            && ($node['props']['news'] ?? false))
+        ->assertElement('bottom_nav_item', fn (array $node): bool => ($node['props']['id'] ?? null) === 'profile'
+            && ($node['props']['badge'] ?? null) === '3');
+});
+
+it('renders a bottom nav with a search tab item', function () {
+    Native::visit('/edge-components/bottom-nav-search-item')
+        ->assertScreen(BottomNavSearchItem::class)
+        ->assertElement('bottom_nav_item', fn (array $node): bool => ($node['props']['id'] ?? null) === 'home'
+            && ($node['props']['active'] ?? false))
+        ->assertElement('bottom_nav_item', fn (array $node): bool => ($node['props']['id'] ?? null) === 'search'
+            && ($node['props']['search'] ?? false)
+            && ($node['props']['search_placeholder'] ?? null) === 'Search')
+        ->assertElement('bottom_nav_item', fn (array $node): bool => ($node['props']['id'] ?? null) === 'profile');
+});
+
+it('renders a side nav drawer with a header, an active item, a collapsed group, and a divider', function () {
+    Native::visit('/edge-components/side-nav')
+        ->assertScreen(SideNav::class)
+        ->assertNavTitle('Side Nav')
+        ->assertElement('side_nav_header', fn (array $node): bool => ($node['props']['title'] ?? null) === 'My App'
+            && ($node['props']['subtitle'] ?? null) === 'user@example.com'
+            && ($node['props']['icon'] ?? null) === 'person')
+        ->assertElement('side_nav_item', fn (array $node): bool => ($node['props']['id'] ?? null) === 'home'
+            && ($node['props']['active'] ?? false))
+        ->assertElement('side_nav_group', fn (array $node): bool => ($node['props']['heading'] ?? null) === 'Account'
+            && ! ($node['props']['expanded'] ?? true))
+        ->assertElement('side_nav_item', fn (array $node): bool => ($node['props']['id'] ?? null) === 'profile')
+        ->assertElement('side_nav_item', fn (array $node): bool => ($node['props']['id'] ?? null) === 'settings')
+        ->assertElement('divider')
+        ->assertElement('side_nav_item', fn (array $node): bool => ($node['props']['id'] ?? null) === 'help'
+            && ($node['props']['url'] ?? null) === 'https://nativephp.com/docs'
+            && ($node['props']['open_in_browser'] ?? false));
+});
+
+it('renders a side nav header with a background image', function () {
+    Native::visit('/edge-components/side-nav-header-image')
+        ->assertScreen(SideNavHeaderImage::class)
+        ->assertElement('side_nav_header', fn (array $node): bool => ($node['props']['image_url'] ?? null)
+            === 'https://images.nationalgeographic.org/image/upload/v1638892520/EducationHub/photos/stream-in-colorado.jpg')
+        ->assertElement('side_nav_item', fn (array $node): bool => ($node['props']['id'] ?? null) === 'home'
+            && ($node['props']['active'] ?? false));
+});

From c474d517079b0fa23b24fe16b2a1b0e3ec816acb Mon Sep 17 00:00:00 2001
From: Wessel Verheij <info@nightworks.io>
Date: Thu, 10 Sep 2026 22:57:25 +0200
Subject: [PATCH 2/4] fix: bring top-bar and bottom-nav reference screens to
 parity with docs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The docs' own hand-rolled examples for top-bar and bottom-nav already
demonstrate a @tap-bound search action, a URL-bound settings action, and
label-visibility on the bottom nav — none of which the reference screens
rendered, so regenerating docs screenshots from them would have silently
dropped those illustrations.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 app/NativeComponents/EdgeComponents/TopBar.php     |  2 ++
 .../native/edge-components/bottom-nav.blade.php    |  2 +-
 .../views/native/edge-components/top-bar.blade.php | 14 ++++++++++++--
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/app/NativeComponents/EdgeComponents/TopBar.php b/app/NativeComponents/EdgeComponents/TopBar.php
index 7e8a75d..a67ea5d 100644
--- a/app/NativeComponents/EdgeComponents/TopBar.php
+++ b/app/NativeComponents/EdgeComponents/TopBar.php
@@ -9,6 +9,8 @@
 
 final class TopBar extends NativeComponent
 {
+    public function openSearch(): void {}
+
     public function render(): View
     {
         return view('native.edge-components.top-bar');
diff --git a/resources/views/native/edge-components/bottom-nav.blade.php b/resources/views/native/edge-components/bottom-nav.blade.php
index f6cbf46..1e034d6 100644
--- a/resources/views/native/edge-components/bottom-nav.blade.php
+++ b/resources/views/native/edge-components/bottom-nav.blade.php
@@ -1,6 +1,6 @@
 @include('native.partials.edge-component-note', ['caption' => 'Edge Component showcase — this screen exists to show off the bottom nav below.'])
 
-<native:bottom-nav>
+<native:bottom-nav label-visibility="labeled">
     <native:bottom-nav-item id="home" icon="home" label="Home" url="/edge-components/bottom-nav" :active="true" />
     <native:bottom-nav-item id="friends" icon="person" label="Friends" url="/edge-components/bottom-nav" :news="true" />
     <native:bottom-nav-item id="profile" icon="person" label="Profile" url="/edge-components/bottom-nav" badge="3" />
diff --git a/resources/views/native/edge-components/top-bar.blade.php b/resources/views/native/edge-components/top-bar.blade.php
index 53ff566..3a1212f 100644
--- a/resources/views/native/edge-components/top-bar.blade.php
+++ b/resources/views/native/edge-components/top-bar.blade.php
@@ -1,6 +1,16 @@
 <native:top-bar title="Dashboard" subtitle="Welcome back" back="true">
-    <native:top-bar-action id="search" icon="search" label="Search" />
-    <native:top-bar-action id="settings" icon="settings" label="Settings" />
+    <native:top-bar-action
+        id="search"
+        label="Search"
+        icon="search"
+        @tap="openSearch"
+    />
+    <native:top-bar-action
+        id="settings"
+        icon="settings"
+        label="Settings"
+        url="https://yourapp.com/my-account"
+    />
 </native:top-bar>
 
 @include('native.partials.edge-component-note', ['caption' => 'Edge Component showcase — this screen exists to show off the top bar above.'])

From d20f710468698c88536da3bc00177b1e66801a4f Mon Sep 17 00:00:00 2001
From: Wessel Verheij <info@nightworks.io>
Date: Thu, 10 Sep 2026 23:52:50 +0200
Subject: [PATCH 3/4] style: match the edge component showcase caption to house
 typography

It was plain unstyled text, unlike every other demo screen's caption
copy, and stood out for the wrong reason in a docs screenshot.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 resources/views/native/partials/edge-component-note.blade.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/views/native/partials/edge-component-note.blade.php b/resources/views/native/partials/edge-component-note.blade.php
index d0f5c22..0170220 100644
--- a/resources/views/native/partials/edge-component-note.blade.php
+++ b/resources/views/native/partials/edge-component-note.blade.php
@@ -1,5 +1,5 @@
 <scroll-view>
-    <column padding="16">
-        <text>{{ $caption }}</text>
+    <column class="px-4 py-3">
+        <text class="text-sm text-theme-on-surface-variant">{{ $caption }}</text>
     </column>
 </scroll-view>

From 4a3bd1ed9c870faed7c43ab05cfc32218ce41f49 Mon Sep 17 00:00:00 2001
From: Wessel Verheij <info@nightworks.io>
Date: Fri, 11 Sep 2026 15:34:35 +0200
Subject: [PATCH 4/4] Polish side-nav showcase and re-enable live form
 component demos
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Hide the side-nav reference screen's own nav bar so the drawer's ☰
affordance is the only leading icon on screen, and swap its drawer rows
to plain list items for a cleaner docs screenshot.

Re-enable the previously-disabled checkbox/toggle/select/radio-group
sections in ExploreForms using the real <native:checkbox>,
<native:toggle>, <native:select>, and <native:radio-group> components
instead of the old hand-rolled pressable/icon fakes.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../EdgeComponents/SideNav.php                |   2 +
 .../edge-components/side-nav-body.blade.php   |   6 +-
 .../edge-components/side-nav-drawer.blade.php |  19 +-
 .../views/native/explore/forms.blade.php      | 166 ++++++------------
 tests/Feature/Native/EdgeComponentsTest.php   |  24 ++-
 5 files changed, 82 insertions(+), 135 deletions(-)

diff --git a/app/NativeComponents/EdgeComponents/SideNav.php b/app/NativeComponents/EdgeComponents/SideNav.php
index 50d6ed3..278a106 100644
--- a/app/NativeComponents/EdgeComponents/SideNav.php
+++ b/app/NativeComponents/EdgeComponents/SideNav.php
@@ -13,6 +13,8 @@ final class SideNav extends NativeComponent
 {
     use InteractsWithDrawer;
 
+    protected bool $hidesNavBar = true;
+
     public function navTitle(): string
     {
         return 'Side Nav';
diff --git a/resources/views/native/edge-components/side-nav-body.blade.php b/resources/views/native/edge-components/side-nav-body.blade.php
index d13a445..acca81c 100644
--- a/resources/views/native/edge-components/side-nav-body.blade.php
+++ b/resources/views/native/edge-components/side-nav-body.blade.php
@@ -1 +1,5 @@
-@include('native.partials.edge-component-note', ['caption' => 'Edge Component showcase — this screen exists to show off the side drawer.'])
+<scroll-view>
+    <column class="px-4 pb-3 pt-16 safe-area-top">
+        <text class="text-sm text-theme-on-surface-variant">Edge Component showcase — this screen exists to show off the side drawer. Its nav bar is hidden so the drawer's own ☰ affordance is the only leading icon on screen.</text>
+    </column>
+</scroll-view>
diff --git a/resources/views/native/edge-components/side-nav-drawer.blade.php b/resources/views/native/edge-components/side-nav-drawer.blade.php
index 375d530..e8f3dcf 100644
--- a/resources/views/native/edge-components/side-nav-drawer.blade.php
+++ b/resources/views/native/edge-components/side-nav-drawer.blade.php
@@ -1,12 +1,15 @@
-<native:side-nav-header title="My App" subtitle="user@example.com" icon="person" />
+<native:column class="safe-area-top">
+    <native:list-item headline="My App" supporting="user@example.com" leadingIcon="person" disabled="true" />
 
-<native:side-nav-item id="home" label="Home" icon="home" url="/edge-components/side-nav" :active="true" />
+    <native:divider />
 
-<native:side-nav-group heading="Account" :expanded="false">
-    <native:side-nav-item id="profile" label="Profile" icon="person" url="/edge-components/side-nav" />
-    <native:side-nav-item id="settings" label="Settings" icon="settings" url="/edge-components/side-nav" />
-</native:side-nav-group>
+    <native:list-item headline="Home" leadingIcon="home" containerColor="blue-50" leadingIconColor="blue-600" headlineColor="blue-600" />
 
-<native:divider />
+    <native:list-item headline="Profile" leadingIcon="person" />
 
-<native:side-nav-item id="help" label="Help" icon="help" url="https://nativephp.com/docs" open-in-browser="true" />
+    <native:list-item headline="Settings" leadingIcon="settings" />
+
+    <native:divider />
+
+    <native:list-item headline="Help" leadingIcon="help" trailingIcon="forward" />
+</native:column>
diff --git a/resources/views/native/explore/forms.blade.php b/resources/views/native/explore/forms.blade.php
index db1647a..f985882 100644
--- a/resources/views/native/explore/forms.blade.php
+++ b/resources/views/native/explore/forms.blade.php
@@ -1,3 +1,4 @@
+<scroll-view class="w-full h-full">
     <column class="w-full p-5 gap-5">
 
         <text class="text-2xl font-semibold text-theme-on-background">Slider</text>
@@ -20,119 +21,60 @@
             <text class="text-[20] text-theme-on-surface font-bold bg-theme-surface-variant rounded-full text-center p-2 mt-4">{{ number_format($slideValue * 10000000, 2) }}</text>
         </column>
 
-
-
-
-
-
-
-
-
+        <divider class="my-2" />
+
+        {{-- TOGGLE --}}
+        <text class="text-xl font-semibold text-theme-on-background">Toggle</text>
+        <toggle native:model="notificationsOn" label="Notifications"            class="w-full"/>
+        <toggle native:model="subscribed"      label="Subscribe to newsletter"  class="w-full"/>
+        <toggle :value="true" label="Disabled (always on)" disabled              class="w-full"/>
+
+        <divider class="my-2" />
+
+        {{-- CHECKBOX --}}
+        <text class="text-xl font-semibold text-theme-on-background">Checkbox</text>
+        <checkbox native:model="subscribed"    label="Subscribe to newsletter"           class="w-full"/>
+        <checkbox native:model="termsAccepted" label="I accept the terms and conditions" class="w-full"/>
+        <text class="text-xl text-theme-on-surface-variant">
+            subscribed: {{ $subscribed ? 'yes' : 'no' }} - terms: {{ $termsAccepted ? 'yes' : 'no' }}
+        </text>
+
+        <divider class="my-2" />
+
+        {{-- SELECT --}}
+        <text class="text-xl font-semibold text-theme-on-background">Select</text>
+        <select
+            native:model="favoriteLanguage"
+            label="Favorite language"
+            placeholder="Pick one..."
+            :options="['PHP', 'Swift', 'Kotlin', 'TypeScript', 'Rust', 'Go']"
+            class="w-full"
+        />
+        <text class="text-xl text-theme-on-surface-variant">Selected: {{ $favoriteLanguage }}</text>
+
+        <divider class="my-2" />
+
+        {{-- RADIO GROUP --}}
+        <text class="text-xl font-semibold text-theme-on-background">Radio Group</text>
+        <radio-group native:model="pricingPlan" label="Pricing plan" class="w-full gap-2">
+            <radio value="free" label="Free - $0/mo" />
+            <radio value="pro"  label="Pro - $19/mo" />
+            <radio value="team" label="Team - $49/mo" />
+        </radio-group>
+        <text class="text-xl text-theme-on-surface-variant">Chosen: {{ $pricingPlan }}</text>
+
+        <divider class="my-2" />
 
         {{-- TEXT INPUT --}}
-{{--        <text class="text-xl font-semibold text-theme-on-background">Text Input — Outlined</text>--}}
-{{--        <outlined-text-input class="w-full" label="Name"     placeholder="Jane Doe" native:model="name" />--}}
-{{--        <outlined-text-input class="w-full" label="Email"    placeholder="you@example.com" keyboard="email" leading-icon="email" native:model="email" />--}}
-{{--        <outlined-text-input class="w-full" label="Password" placeholder="••••••••" secure leading-icon="lock"/>--}}
-{{--        <outlined-text-input class="w-full" label="Bio"      placeholder="Tell us about yourself..." multiline :max-lines="4"/>--}}
-
-{{--        <text class="text-xl font-semibold mt-4 text-theme-on-background">Text Input — Filled</text>--}}
-{{--        <filled-text-input class="w-full" label="Search"  placeholder="Search anything..." leading-icon="search"/>--}}
-{{--        <filled-text-input class="w-full" label="Price"   prefix="$" suffix=".00" keyboard="decimal"/>--}}
-
-{{--        <divider class="my-2" />--}}
-
-{{--        --}}{{-- SLIDER --}}
-{{--        <text class="text-xl font-semibold text-theme-on-background">Slider</text>--}}
-
-{{--        <column class="gap-1">--}}
-{{--            <text class="text-xl text-theme-on-surface-variant">Live (every drag tick)</text>--}}
-{{--            <slider native:model.live="slideValue" :min="0" :max="100" class="w-full"/>--}}
-{{--            <text class="text-[20] text-theme-on-background">Value 1: {{ number_format($slideValue, 3) }}</text>--}}
-{{--            <text class="text-[20] text-theme-on-background">Value 2: {{ number_format($slideValue * 2, 3) }}</text>--}}
-{{--        </column>--}}
-
-{{--        <column class="gap-1">--}}
-{{--            <text class="text-xl text-theme-on-surface-variant">Debounced (150ms)</text>--}}
-{{--            <slider native:model.debounce.150ms="slideDebounced" :min="0" :max="100" class="w-full"/>--}}
-{{--            <text class="text-[20] text-theme-on-background">{{ number_format($slideDebounced, 1) }}</text>--}}
-{{--        </column>--}}
-
-{{--        <column class="gap-1">--}}
-{{--            <text class="text-xl text-theme-on-surface-variant">On release (blur)</text>--}}
-{{--            <slider native:model.blur="slideBlur" :min="0" :max="100" class="w-full"/>--}}
-{{--            <text class="text-[20] text-theme-on-background">{{ number_format($slideBlur, 1) }}</text>--}}
-{{--        </column>--}}
-
-{{--        <divider class="my-2" />--}}
-
-{{--        --}}{{-- TOGGLE --}}
-{{--        <text class="text-xl font-semibold text-theme-on-background">Toggle</text>--}}
-{{--        <toggle native:model="notificationsOn" label="Notifications"            class="w-full"/>--}}
-{{--        <toggle native:model="subscribed"      label="Subscribe to newsletter"  class="w-full"/>--}}
-{{--        <toggle :value="true" label="Disabled (always on)" disabled              class="w-full"/>--}}
-
-{{--        <divider class="my-2" />--}}
-
-{{--        --}}{{-- CHECKBOX --}}
-{{--        <text class="text-xl font-semibold text-theme-on-background">Checkbox (composed)</text>--}}
-{{--        @foreach ([--}}
-{{--            ['field' => 'subscribed',    'label' => 'Subscribe to newsletter'],--}}
-{{--            ['field' => 'termsAccepted', 'label' => 'I accept the terms and conditions'],--}}
-{{--        ] as $row)--}}
-{{--            <pressable @tap="toggleField('{{ $row['field'] }}')">--}}
-{{--                <row class="items-center gap-2">--}}
-{{--                    <icon--}}
-{{--                        :name="$this->{$row['field']} ? 'check_box' : 'check_box_outline'"--}}
-{{--                        :size="22"--}}
-{{--                        :color="$this->{$row['field']} ? '#0F766E' : '#475569'"--}}
-{{--                        :dark-color="$this->{$row['field']} ? '#14B8A6' : '#94A3B8'"/>--}}
-{{--                    <text class="text-theme-on-background">{{ $row['label'] }}</text>--}}
-{{--                </row>--}}
-{{--            </pressable>--}}
-{{--        @endforeach--}}
-{{--        <text class="text-xl text-theme-on-surface-variant">--}}
-{{--            subscribed: {{ $subscribed ? 'yes' : 'no' }} · terms: {{ $termsAccepted ? 'yes' : 'no' }}--}}
-{{--        </text>--}}
-
-{{--        <divider class="my-2" />--}}
-
-{{--        --}}{{-- SELECT --}}
-{{--        <text class="text-xl font-semibold text-theme-on-background">Select</text>--}}
-{{--        <select--}}
-{{--            native:model="favoriteLanguage"--}}
-{{--            label="Favorite language"--}}
-{{--            placeholder="Pick one..."--}}
-{{--            :options="['PHP', 'Swift', 'Kotlin', 'TypeScript', 'Rust', 'Go']"--}}
-{{--            class="w-full"--}}
-{{--        />--}}
-{{--        <text class="text-xl text-theme-on-surface-variant">Selected: {{ $favoriteLanguage }}</text>--}}
-
-{{--        <divider class="my-2" />--}}
-
-{{--        --}}{{-- RADIO GROUP --}}
-{{--        <text class="text-xl font-semibold text-theme-on-background">Radio Group (composed)</text>--}}
-{{--        <column class="gap-2 w-full">--}}
-{{--            <text class="text-xl text-theme-on-surface-variant">Pricing plan</text>--}}
-
-{{--            @foreach ([--}}
-{{--                ['value' => 'free', 'label' => 'Free — $0/mo'],--}}
-{{--                ['value' => 'pro',  'label' => 'Pro — $19/mo'],--}}
-{{--                ['value' => 'team', 'label' => 'Team — $49/mo'],--}}
-{{--            ] as $row)--}}
-{{--                @php $checked = $pricingPlan === $row['value']; @endphp--}}
-{{--                <pressable @tap="selectPricingPlan('{{ $row['value'] }}')">--}}
-{{--                    <row class="items-center gap-2">--}}
-{{--                        <icon--}}
-{{--                            :name="$checked ? 'radio_button_checked' : 'radio_button_unchecked'"--}}
-{{--                            :size="22"--}}
-{{--                            :color="$checked ? '#0F766E' : '#475569'"--}}
-{{--                            :dark-color="$checked ? '#14B8A6' : '#94A3B8'"/>--}}
-{{--                        <text class="text-theme-on-background">{{ $row['label'] }}</text>--}}
-{{--                    </row>--}}
-{{--                </pressable>--}}
-{{--            @endforeach--}}
-{{--        </column>--}}
-{{--        <text class="text-xl text-theme-on-surface-variant">Chosen: {{ $pricingPlan }}</text>--}}
+        <text class="text-xl font-semibold text-theme-on-background">Text Input - Outlined</text>
+        <outlined-text-input class="w-full" label="Name"     placeholder="Jane Doe" native:model="name" />
+        <outlined-text-input class="w-full" label="Email"    placeholder="you@example.com" keyboard="email" leading-icon="email" native:model="email" />
+        <outlined-text-input class="w-full" label="Password" placeholder="********" secure leading-icon="lock"/>
+        <outlined-text-input class="w-full" label="Bio"      placeholder="Tell us about yourself..." multiline :max-lines="4"/>
+
+        <text class="text-xl font-semibold mt-4 text-theme-on-background">Text Input - Filled</text>
+        <filled-text-input class="w-full" label="Search"  placeholder="Search anything..." leading-icon="search"/>
+        <filled-text-input class="w-full" label="Price"   prefix="$" suffix=".00" keyboard="decimal"/>
 
     </column>
+</scroll-view>
diff --git a/tests/Feature/Native/EdgeComponentsTest.php b/tests/Feature/Native/EdgeComponentsTest.php
index 4395356..4ccae3a 100644
--- a/tests/Feature/Native/EdgeComponentsTest.php
+++ b/tests/Feature/Native/EdgeComponentsTest.php
@@ -77,23 +77,19 @@
         ->assertElement('bottom_nav_item', fn (array $node): bool => ($node['props']['id'] ?? null) === 'profile');
 });
 
-it('renders a side nav drawer with a header, an active item, a collapsed group, and a divider', function () {
+it('renders a side nav drawer with a header, an active item, and a divider', function () {
     Native::visit('/edge-components/side-nav')
         ->assertScreen(SideNav::class)
-        ->assertNavTitle('Side Nav')
-        ->assertElement('side_nav_header', fn (array $node): bool => ($node['props']['title'] ?? null) === 'My App'
-            && ($node['props']['subtitle'] ?? null) === 'user@example.com'
-            && ($node['props']['icon'] ?? null) === 'person')
-        ->assertElement('side_nav_item', fn (array $node): bool => ($node['props']['id'] ?? null) === 'home'
-            && ($node['props']['active'] ?? false))
-        ->assertElement('side_nav_group', fn (array $node): bool => ($node['props']['heading'] ?? null) === 'Account'
-            && ! ($node['props']['expanded'] ?? true))
-        ->assertElement('side_nav_item', fn (array $node): bool => ($node['props']['id'] ?? null) === 'profile')
-        ->assertElement('side_nav_item', fn (array $node): bool => ($node['props']['id'] ?? null) === 'settings')
+        ->assertElement('list_item', fn (array $node): bool => ($node['props']['headline'] ?? null) === 'My App'
+            && ($node['props']['supporting'] ?? null) === 'user@example.com'
+            && ($node['props']['leading_icon'] ?? null) === 'person')
+        ->assertElement('list_item', fn (array $node): bool => ($node['props']['headline'] ?? null) === 'Home'
+            && ($node['props']['leading_icon'] ?? null) === 'home')
+        ->assertElement('list_item', fn (array $node): bool => ($node['props']['headline'] ?? null) === 'Profile')
+        ->assertElement('list_item', fn (array $node): bool => ($node['props']['headline'] ?? null) === 'Settings')
         ->assertElement('divider')
-        ->assertElement('side_nav_item', fn (array $node): bool => ($node['props']['id'] ?? null) === 'help'
-            && ($node['props']['url'] ?? null) === 'https://nativephp.com/docs'
-            && ($node['props']['open_in_browser'] ?? false));
+        ->assertElement('list_item', fn (array $node): bool => ($node['props']['headline'] ?? null) === 'Help'
+            && ($node['props']['leading_icon'] ?? null) === 'help');
 });
 
 it('renders a side nav header with a background image', function () {