From 104e23ec5a28ebaf06f9931846c96b275272a42b Mon Sep 17 00:00:00 2001
From: Nathan Walker <walkerrunpdx@gmail.com>
Date: Tue, 2 Dec 2025 18:45:27 -0800
Subject: [PATCH 1/3] feat: SplitView phase 1

---
 .../src/app/app.routes.ts                     |  5 +++
 .../split-view-demo.component.html            | 17 ++++++++
 .../split-view-demo.component.ts              | 11 +++++
 .../split-view-inspector.component.ts         | 14 +++++++
 .../split-view-primary.component.ts           | 14 +++++++
 .../split-view-secondary.component.ts         | 14 +++++++
 .../split-view-supplementary.component.ts     | 14 +++++++
 .../app/split-view-demo/split-view.routes.ts  | 40 +++++++++++++++++++
 .../src/lib/element-registry/common-views.ts  |  3 +-
 9 files changed, 131 insertions(+), 1 deletion(-)
 create mode 100644 apps/nativescript-demo-ng/src/app/split-view-demo/split-view-demo.component.html
 create mode 100644 apps/nativescript-demo-ng/src/app/split-view-demo/split-view-demo.component.ts
 create mode 100644 apps/nativescript-demo-ng/src/app/split-view-demo/split-view-inspector.component.ts
 create mode 100644 apps/nativescript-demo-ng/src/app/split-view-demo/split-view-primary.component.ts
 create mode 100644 apps/nativescript-demo-ng/src/app/split-view-demo/split-view-secondary.component.ts
 create mode 100644 apps/nativescript-demo-ng/src/app/split-view-demo/split-view-supplementary.component.ts
 create mode 100644 apps/nativescript-demo-ng/src/app/split-view-demo/split-view.routes.ts

diff --git a/apps/nativescript-demo-ng/src/app/app.routes.ts b/apps/nativescript-demo-ng/src/app/app.routes.ts
index 2ed3853..3099fef 100644
--- a/apps/nativescript-demo-ng/src/app/app.routes.ts
+++ b/apps/nativescript-demo-ng/src/app/app.routes.ts
@@ -2,6 +2,7 @@ import { Routes } from '@angular/router';
 import { ItemDetailComponent } from './item/item-detail.component';
 import { ItemsComponent } from './item/items.component';
 import { ListViewStickyComponent } from './list-view-sticky/list-view-sticky.component';
+import { SPLIT_VIEW_ROUTES } from './split-view-demo/split-view.routes';
 // import { HomeComponent } from './home/home.component';
 // import { BootGuardService } from './boot-guard.service';
 
@@ -15,6 +16,10 @@ export const routes: Routes = [
     path: 'list-view-sticky',
     component: ListViewStickyComponent,
   },
+  {
+    path: 'split-view-demo',
+    children: SPLIT_VIEW_ROUTES,
+  },
 
   /**
    * Test tab named outlets
diff --git a/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-demo.component.html b/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-demo.component.html
new file mode 100644
index 0000000..a554dac
--- /dev/null
+++ b/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-demo.component.html
@@ -0,0 +1,17 @@
+<ActionBar title="SplitView Demo"></ActionBar>
+
+<GridLayout rows="*, *" columns="*">
+  <SplitView
+    row="0"
+    displayMode="twoBesideSecondary"
+    splitBehavior="tile"
+    preferredPrimaryColumnWidthFraction="0.25"
+    preferredSupplementaryColumnWidthFraction="0.33"
+    preferredInspectorColumnWidthFraction="0.2"
+  >
+    <page-router-outlet name="primary"></page-router-outlet>
+    <page-router-outlet name="secondary"></page-router-outlet>
+    <page-router-outlet name="supplementary"></page-router-outlet>
+    <page-router-outlet name="inspector"></page-router-outlet>
+  </SplitView>
+</GridLayout>
diff --git a/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-demo.component.ts b/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-demo.component.ts
new file mode 100644
index 0000000..d83f789
--- /dev/null
+++ b/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-demo.component.ts
@@ -0,0 +1,11 @@
+import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
+import { NativeScriptCommonModule, NativeScriptRouterModule } from '@nativescript/angular';
+
+@Component({
+  selector: 'ns-split-view-demo',
+  templateUrl: './split-view-demo.component.html',
+  imports: [NativeScriptCommonModule, NativeScriptRouterModule],
+  standalone: true,
+  schemas: [NO_ERRORS_SCHEMA],
+})
+export class SplitViewDemoComponent {}
diff --git a/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-inspector.component.ts b/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-inspector.component.ts
new file mode 100644
index 0000000..b902b2b
--- /dev/null
+++ b/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-inspector.component.ts
@@ -0,0 +1,14 @@
+import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
+import { NativeScriptCommonModule } from '@nativescript/angular';
+
+@Component({
+  selector: 'ns-split-view-inspector',
+  template: `<GridLayout rows="auto,*" class="p-16">
+    <Label row="0" text="Inspector" class="h2 mb-8"></Label>
+    <Label row="1" text="This is the inspector column." class="text-center"></Label>
+  </GridLayout>`,
+  standalone: true,
+  imports: [NativeScriptCommonModule],
+  schemas: [NO_ERRORS_SCHEMA],
+})
+export class SplitViewInspectorComponent {}
diff --git a/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-primary.component.ts b/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-primary.component.ts
new file mode 100644
index 0000000..fc88e39
--- /dev/null
+++ b/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-primary.component.ts
@@ -0,0 +1,14 @@
+import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
+import { NativeScriptCommonModule } from '@nativescript/angular';
+
+@Component({
+  selector: 'ns-split-view-primary',
+  template: `<GridLayout rows="auto,*" class="p-16">
+    <Label row="0" text="Primary" class="h2 mb-8"></Label>
+    <Label row="1" text="This is the primary column." class="text-center"></Label>
+  </GridLayout>`,
+  standalone: true,
+  imports: [NativeScriptCommonModule],
+  schemas: [NO_ERRORS_SCHEMA],
+})
+export class SplitViewPrimaryComponent {}
diff --git a/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-secondary.component.ts b/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-secondary.component.ts
new file mode 100644
index 0000000..84ac925
--- /dev/null
+++ b/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-secondary.component.ts
@@ -0,0 +1,14 @@
+import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
+import { NativeScriptCommonModule } from '@nativescript/angular';
+
+@Component({
+  selector: 'ns-split-view-secondary',
+  template: `<GridLayout rows="auto,*" class="p-16">
+    <Label row="0" text="Secondary" class="h2 mb-8"></Label>
+    <Label row="1" text="This is the secondary column." class="text-center"></Label>
+  </GridLayout>`,
+  standalone: true,
+  imports: [NativeScriptCommonModule],
+  schemas: [NO_ERRORS_SCHEMA],
+})
+export class SplitViewSecondaryComponent {}
diff --git a/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-supplementary.component.ts b/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-supplementary.component.ts
new file mode 100644
index 0000000..72e7969
--- /dev/null
+++ b/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-supplementary.component.ts
@@ -0,0 +1,14 @@
+import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
+import { NativeScriptCommonModule } from '@nativescript/angular';
+
+@Component({
+  selector: 'ns-split-view-supplementary',
+  template: `<GridLayout rows="auto,*" class="p-16">
+    <Label row="0" text="Supplementary" class="h2 mb-8"></Label>
+    <Label row="1" text="This is the supplementary column." class="text-center"></Label>
+  </GridLayout>`,
+  standalone: true,
+  imports: [NativeScriptCommonModule],
+  schemas: [NO_ERRORS_SCHEMA],
+})
+export class SplitViewSupplementaryComponent {}
diff --git a/apps/nativescript-demo-ng/src/app/split-view-demo/split-view.routes.ts b/apps/nativescript-demo-ng/src/app/split-view-demo/split-view.routes.ts
new file mode 100644
index 0000000..802c72f
--- /dev/null
+++ b/apps/nativescript-demo-ng/src/app/split-view-demo/split-view.routes.ts
@@ -0,0 +1,40 @@
+import { Routes } from '@angular/router';
+import { SplitViewDemoComponent } from './split-view-demo.component';
+import { SplitViewPrimaryComponent } from './split-view-primary.component';
+import { SplitViewSecondaryComponent } from './split-view-secondary.component';
+import { SplitViewSupplementaryComponent } from './split-view-supplementary.component';
+import { SplitViewInspectorComponent } from './split-view-inspector.component';
+
+export const SPLIT_VIEW_ROUTES: Routes = [
+  {
+    path: '',
+    component: SplitViewDemoComponent,
+    children: [
+      {
+        path: '',
+        redirectTo: '/split-view-demo/(primary:primary//secondary:secondary//supplementary:supplementary//inspector:inspector)',
+        pathMatch: 'full',
+      },
+      {
+        path: 'primary',
+        component: SplitViewPrimaryComponent,
+        outlet: 'primary',
+      },
+      {
+        path: 'secondary',
+        component: SplitViewSecondaryComponent,
+        outlet: 'secondary',
+      },
+      {
+        path: 'supplementary',
+        component: SplitViewSupplementaryComponent,
+        outlet: 'supplementary',
+      },
+      {
+        path: 'inspector',
+        component: SplitViewInspectorComponent,
+        outlet: 'inspector',
+      },
+    ],
+  },
+];
diff --git a/packages/angular/src/lib/element-registry/common-views.ts b/packages/angular/src/lib/element-registry/common-views.ts
index 3d8283c..f4436ec 100644
--- a/packages/angular/src/lib/element-registry/common-views.ts
+++ b/packages/angular/src/lib/element-registry/common-views.ts
@@ -1,4 +1,4 @@
-import { AbsoluteLayout, ActivityIndicator, Button, ContentView, DatePicker, DockLayout, FlexboxLayout, FormattedString, Frame, GridLayout, HtmlView, Image, Label, ListPicker, ListView, Page, Placeholder, Progress, ProxyViewContainer, Repeater, RootLayout, ScrollView, SearchBar, SegmentedBar, SegmentedBarItem, Slider, Span, StackLayout, Switch, TabView, TextField, TextView, TimePicker, WebView, WrapLayout } from '@nativescript/core';
+import { AbsoluteLayout, ActivityIndicator, Button, ContentView, DatePicker, DockLayout, FlexboxLayout, FormattedString, Frame, GridLayout, HtmlView, Image, Label, ListPicker, ListView, Page, Placeholder, Progress, ProxyViewContainer, Repeater, RootLayout, ScrollView, SearchBar, SegmentedBar, SegmentedBarItem, Slider, Span, SplitView, StackLayout, Switch, TabView, TextField, TextView, TimePicker, WebView, WrapLayout } from '@nativescript/core';
 import { formattedStringMeta, frameMeta, textBaseMeta } from './metas';
 import { registerElement } from './registry';
 
@@ -33,6 +33,7 @@ export function registerNativeScriptViewComponents() {
     registerElement('SegmentedBar', () => SegmentedBar);
     registerElement('SegmentedBarItem', () => SegmentedBarItem);
     registerElement('Slider', () => Slider);
+    registerElement('SplitView', () => SplitView);
     registerElement('StackLayout', () => StackLayout);
     registerElement('FlexboxLayout', () => FlexboxLayout);
     registerElement('Switch', () => Switch);

From 8c1467f5f37de7ec9d9e96237ba498f42229eb0a Mon Sep 17 00:00:00 2001
From: Nathan Walker <walkerrunpdx@gmail.com>
Date: Mon, 8 Dec 2025 09:52:25 -0800
Subject: [PATCH 2/3] feat: demo wip

---
 .../split-view-demo.component.html            | 29 +++++++---------
 .../split-view-demo.component.ts              | 33 ++++++++++++++++---
 .../split-view-inspector.component.ts         |  1 -
 .../split-view-primary.component.ts           |  1 -
 .../split-view-secondary.component.ts         |  1 -
 .../split-view-supplementary.component.ts     |  1 -
 .../app/split-view-demo/split-view.routes.ts  | 10 +++---
 apps/nativescript-demo-ng/src/main.ts         | 10 +++---
 8 files changed, 51 insertions(+), 35 deletions(-)

diff --git a/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-demo.component.html b/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-demo.component.html
index a554dac..c9199ee 100644
--- a/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-demo.component.html
+++ b/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-demo.component.html
@@ -1,17 +1,12 @@
-<ActionBar title="SplitView Demo"></ActionBar>
-
-<GridLayout rows="*, *" columns="*">
-  <SplitView
-    row="0"
-    displayMode="twoBesideSecondary"
-    splitBehavior="tile"
-    preferredPrimaryColumnWidthFraction="0.25"
-    preferredSupplementaryColumnWidthFraction="0.33"
-    preferredInspectorColumnWidthFraction="0.2"
-  >
-    <page-router-outlet name="primary"></page-router-outlet>
-    <page-router-outlet name="secondary"></page-router-outlet>
-    <page-router-outlet name="supplementary"></page-router-outlet>
-    <page-router-outlet name="inspector"></page-router-outlet>
-  </SplitView>
-</GridLayout>
+<SplitView
+  displayMode="twoBesideSecondary"
+  splitBehavior="tile"
+  preferredPrimaryColumnWidthFraction="0.25"
+  preferredSupplementaryColumnWidthFraction="0.33"
+  preferredInspectorColumnWidthFraction="0.2"
+>
+  <page-router-outlet name="primary"></page-router-outlet>
+  <page-router-outlet name="secondary"></page-router-outlet>
+  <page-router-outlet name="supplementary"></page-router-outlet>
+  <page-router-outlet name="inspector"></page-router-outlet>
+</SplitView>
diff --git a/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-demo.component.ts b/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-demo.component.ts
index d83f789..8645aa8 100644
--- a/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-demo.component.ts
+++ b/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-demo.component.ts
@@ -1,11 +1,34 @@
-import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
-import { NativeScriptCommonModule, NativeScriptRouterModule } from '@nativescript/angular';
+import { Component, inject, NO_ERRORS_SCHEMA, OnInit } from '@angular/core';
+import {
+  NativeScriptCommonModule,
+  NativeScriptRouterModule,
+  PageRouterOutlet,
+  RouterExtensions,
+} from '@nativescript/angular';
 
 @Component({
   selector: 'ns-split-view-demo',
   templateUrl: './split-view-demo.component.html',
-  imports: [NativeScriptCommonModule, NativeScriptRouterModule],
-  standalone: true,
+  imports: [NativeScriptCommonModule, NativeScriptRouterModule, PageRouterOutlet],
   schemas: [NO_ERRORS_SCHEMA],
 })
-export class SplitViewDemoComponent {}
+export class SplitViewDemoComponent implements OnInit {
+  router = inject(RouterExtensions);
+
+  ngOnInit() {
+    this.router.navigate(
+      [
+        '/',
+        {
+          outlets: {
+            primary: ['primary'],
+            secondary: ['secondary'],
+            supplementary: ['supplementary'],
+            inspector: ['inspector'],
+          },
+        },
+      ],
+      { animated: false },
+    );
+  }
+}
diff --git a/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-inspector.component.ts b/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-inspector.component.ts
index b902b2b..d9efbe3 100644
--- a/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-inspector.component.ts
+++ b/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-inspector.component.ts
@@ -7,7 +7,6 @@ import { NativeScriptCommonModule } from '@nativescript/angular';
     <Label row="0" text="Inspector" class="h2 mb-8"></Label>
     <Label row="1" text="This is the inspector column." class="text-center"></Label>
   </GridLayout>`,
-  standalone: true,
   imports: [NativeScriptCommonModule],
   schemas: [NO_ERRORS_SCHEMA],
 })
diff --git a/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-primary.component.ts b/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-primary.component.ts
index fc88e39..ba56190 100644
--- a/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-primary.component.ts
+++ b/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-primary.component.ts
@@ -7,7 +7,6 @@ import { NativeScriptCommonModule } from '@nativescript/angular';
     <Label row="0" text="Primary" class="h2 mb-8"></Label>
     <Label row="1" text="This is the primary column." class="text-center"></Label>
   </GridLayout>`,
-  standalone: true,
   imports: [NativeScriptCommonModule],
   schemas: [NO_ERRORS_SCHEMA],
 })
diff --git a/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-secondary.component.ts b/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-secondary.component.ts
index 84ac925..a81e6bd 100644
--- a/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-secondary.component.ts
+++ b/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-secondary.component.ts
@@ -7,7 +7,6 @@ import { NativeScriptCommonModule } from '@nativescript/angular';
     <Label row="0" text="Secondary" class="h2 mb-8"></Label>
     <Label row="1" text="This is the secondary column." class="text-center"></Label>
   </GridLayout>`,
-  standalone: true,
   imports: [NativeScriptCommonModule],
   schemas: [NO_ERRORS_SCHEMA],
 })
diff --git a/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-supplementary.component.ts b/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-supplementary.component.ts
index 72e7969..5a248cd 100644
--- a/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-supplementary.component.ts
+++ b/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-supplementary.component.ts
@@ -7,7 +7,6 @@ import { NativeScriptCommonModule } from '@nativescript/angular';
     <Label row="0" text="Supplementary" class="h2 mb-8"></Label>
     <Label row="1" text="This is the supplementary column." class="text-center"></Label>
   </GridLayout>`,
-  standalone: true,
   imports: [NativeScriptCommonModule],
   schemas: [NO_ERRORS_SCHEMA],
 })
diff --git a/apps/nativescript-demo-ng/src/app/split-view-demo/split-view.routes.ts b/apps/nativescript-demo-ng/src/app/split-view-demo/split-view.routes.ts
index 802c72f..aa687e5 100644
--- a/apps/nativescript-demo-ng/src/app/split-view-demo/split-view.routes.ts
+++ b/apps/nativescript-demo-ng/src/app/split-view-demo/split-view.routes.ts
@@ -10,11 +10,11 @@ export const SPLIT_VIEW_ROUTES: Routes = [
     path: '',
     component: SplitViewDemoComponent,
     children: [
-      {
-        path: '',
-        redirectTo: '/split-view-demo/(primary:primary//secondary:secondary//supplementary:supplementary//inspector:inspector)',
-        pathMatch: 'full',
-      },
+      // {
+      //   path: '',
+      //   redirectTo: '/(primary:primary//secondary:secondary//supplementary:supplementary//inspector:inspector)',
+      //   pathMatch: 'full',
+      // },
       {
         path: 'primary',
         component: SplitViewPrimaryComponent,
diff --git a/apps/nativescript-demo-ng/src/main.ts b/apps/nativescript-demo-ng/src/main.ts
index e725d50..bcb4e59 100644
--- a/apps/nativescript-demo-ng/src/main.ts
+++ b/apps/nativescript-demo-ng/src/main.ts
@@ -9,9 +9,11 @@ import { Trace, Utils } from '@nativescript/core';
 
 // import { AppModule } from './app/app.module';
 import { withInterceptorsFromDi } from '@angular/common/http';
-import { AppComponent } from './app/app.component';
-import { routes } from './app/app.routes';
+// import { AppComponent } from './app/app.component';
+// import { routes } from './app/app.routes';
 import { provideZonelessChangeDetection } from '@angular/core';
+import { SPLIT_VIEW_ROUTES } from './app/split-view-demo/split-view.routes';
+import { SplitViewDemoComponent } from './app/split-view-demo/split-view-demo.component';
 
 const ZONELESS = true;
 
@@ -23,10 +25,10 @@ runNativeScriptAngularApp({
     if (__APPLE__) {
       Utils.ios.setWindowBackgroundColor('#a6120d');
     }
-    return bootstrapApplication(AppComponent, {
+    return bootstrapApplication(SplitViewDemoComponent, {
       providers: [
         provideNativeScriptHttpClient(withInterceptorsFromDi()),
-        provideNativeScriptRouter(routes),
+        provideNativeScriptRouter(SPLIT_VIEW_ROUTES),
         ZONELESS ? provideZonelessChangeDetection() : provideNativeScriptNgZone(),
       ],
     });

From 9402cdd482b5a1d93ce63040d05235098414ca5b Mon Sep 17 00:00:00 2001
From: Nathan Walker <walkerrunpdx@gmail.com>
Date: Thu, 18 Dec 2025 19:50:35 -0800
Subject: [PATCH 3/3] feat: splitview working impl

---
 .../split-view-demo.component.html            |  9 +-
 .../split-view-demo.component.ts              | 50 +++++++---
 .../split-view-inspector.component.ts         | 39 +++++++-
 .../split-view-primary.component.ts           | 52 +++++++++-
 .../split-view-secondary.component.ts         | 97 +++++++++++++++++--
 .../split-view-supplementary.component.ts     | 59 ++++++++++-
 .../app/split-view-demo/split-view.routes.ts  | 51 ++++------
 .../app/split-view-demo/split-view.state.ts   | 21 ++++
 apps/nativescript-demo-ng/src/main.ts         |  5 +-
 9 files changed, 314 insertions(+), 69 deletions(-)
 create mode 100644 apps/nativescript-demo-ng/src/app/split-view-demo/split-view.state.ts

diff --git a/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-demo.component.html b/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-demo.component.html
index c9199ee..ad72418 100644
--- a/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-demo.component.html
+++ b/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-demo.component.html
@@ -4,9 +4,10 @@
   preferredPrimaryColumnWidthFraction="0.25"
   preferredSupplementaryColumnWidthFraction="0.33"
   preferredInspectorColumnWidthFraction="0.2"
+  (inspectorChange)="splitViewState.onInspectorChange($event)"
 >
-  <page-router-outlet name="primary"></page-router-outlet>
-  <page-router-outlet name="secondary"></page-router-outlet>
-  <page-router-outlet name="supplementary"></page-router-outlet>
-  <page-router-outlet name="inspector"></page-router-outlet>
+  <page-router-outlet name="primary" splitRole="primary"></page-router-outlet>
+  <page-router-outlet name="secondary" splitRole="secondary"></page-router-outlet>
+  <page-router-outlet name="supplementary" splitRole="supplementary"></page-router-outlet>
+  <page-router-outlet name="inspector" splitRole="inspector"></page-router-outlet>
 </SplitView>
diff --git a/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-demo.component.ts b/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-demo.component.ts
index 8645aa8..6a0a561 100644
--- a/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-demo.component.ts
+++ b/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-demo.component.ts
@@ -1,10 +1,11 @@
-import { Component, inject, NO_ERRORS_SCHEMA, OnInit } from '@angular/core';
+import { Component, inject, NO_ERRORS_SCHEMA, OnInit, AfterViewInit } from '@angular/core';
 import {
   NativeScriptCommonModule,
   NativeScriptRouterModule,
   PageRouterOutlet,
   RouterExtensions,
 } from '@nativescript/angular';
+import { SplitViewState } from './split-view.state';
 
 @Component({
   selector: 'ns-split-view-demo',
@@ -12,23 +13,40 @@ import {
   imports: [NativeScriptCommonModule, NativeScriptRouterModule, PageRouterOutlet],
   schemas: [NO_ERRORS_SCHEMA],
 })
-export class SplitViewDemoComponent implements OnInit {
+export class SplitViewDemoComponent implements OnInit, AfterViewInit {
   router = inject(RouterExtensions);
+  splitViewState = inject(SplitViewState);
 
   ngOnInit() {
-    this.router.navigate(
-      [
-        '/',
-        {
-          outlets: {
-            primary: ['primary'],
-            secondary: ['secondary'],
-            supplementary: ['supplementary'],
-            inspector: ['inspector'],
-          },
-        },
-      ],
-      { animated: false },
-    );
+    console.log('[SplitViewDemo] ngOnInit');
+  }
+
+  ngAfterViewInit() {
+    console.log('[SplitViewDemo] ngAfterViewInit - view is initialized, navigating to outlets');
+    // Use setTimeout to ensure the view is fully rendered and outlets are registered
+    setTimeout(() => {
+      console.log('[SplitViewDemo] Navigating to outlets...');
+      this.router
+        .navigate(
+          [
+            '/',
+            {
+              outlets: {
+                primary: ['primary'],
+                secondary: ['secondary'],
+                supplementary: ['supplementary'],
+                inspector: ['inspector'],
+              },
+            },
+          ],
+          { animated: false },
+        )
+        .then((success) => {
+          console.log(`[SplitViewDemo] navigation result: ${success}`);
+        })
+        .catch((err) => {
+          console.error(`[SplitViewDemo] navigation error: ${err}`);
+        });
+    }, 0);
   }
 }
diff --git a/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-inspector.component.ts b/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-inspector.component.ts
index d9efbe3..0e055d4 100644
--- a/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-inspector.component.ts
+++ b/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-inspector.component.ts
@@ -3,10 +3,41 @@ import { NativeScriptCommonModule } from '@nativescript/angular';
 
 @Component({
   selector: 'ns-split-view-inspector',
-  template: `<GridLayout rows="auto,*" class="p-16">
-    <Label row="0" text="Inspector" class="h2 mb-8"></Label>
-    <Label row="1" text="This is the inspector column." class="text-center"></Label>
-  </GridLayout>`,
+  template: `
+    <ActionBar title="Inspector" flat="true"></ActionBar>
+    <GridLayout rows="*" class="h-full bg-slate-50 dark:bg-slate-950">
+      <ScrollView>
+        <StackLayout class="p-5">
+          <StackLayout class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900">
+            <GridLayout rows="auto" columns="*,auto" class="px-4 py-3 border-b border-slate-200 dark:border-slate-800">
+              <Label col="0" text="Pinned" class="text-sm text-slate-700 dark:text-slate-200"></Label>
+              <Switch col="1" checked="true"></Switch>
+            </GridLayout>
+            <GridLayout rows="auto" columns="*,auto" class="px-4 py-3 border-b border-slate-200 dark:border-slate-800">
+              <Label col="0" text="Show badges" class="text-sm text-slate-700 dark:text-slate-200"></Label>
+              <Switch col="1" checked="false"></Switch>
+            </GridLayout>
+            <GridLayout rows="auto" columns="*,auto" class="px-4 py-3">
+              <Label col="0" text="Compact" class="text-sm text-slate-700 dark:text-slate-200"></Label>
+              <Switch col="1" checked="true"></Switch>
+            </GridLayout>
+          </StackLayout>
+
+          <StackLayout
+            class="mt-5 rounded-2xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900 p-4"
+          >
+            <Label text="Opacity" class="text-base font-semibold text-slate-900 dark:text-slate-100"></Label>
+            <Label
+              text="Use the inspector for controls and metadata."
+              class="mt-2 text-sm text-slate-700 dark:text-slate-200 leading-[3]"
+              textWrap="true"
+            ></Label>
+            <Slider class="mt-3" minValue="0" maxValue="100" value="85"></Slider>
+          </StackLayout>
+        </StackLayout>
+      </ScrollView>
+    </GridLayout>
+  `,
   imports: [NativeScriptCommonModule],
   schemas: [NO_ERRORS_SCHEMA],
 })
diff --git a/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-primary.component.ts b/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-primary.component.ts
index ba56190..a663614 100644
--- a/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-primary.component.ts
+++ b/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-primary.component.ts
@@ -3,10 +3,54 @@ import { NativeScriptCommonModule } from '@nativescript/angular';
 
 @Component({
   selector: 'ns-split-view-primary',
-  template: `<GridLayout rows="auto,*" class="p-16">
-    <Label row="0" text="Primary" class="h2 mb-8"></Label>
-    <Label row="1" text="This is the primary column." class="text-center"></Label>
-  </GridLayout>`,
+  template: `
+    <ActionBar title="Primary" flat="true"></ActionBar>
+    <GridLayout rows="auto,*" class="h-full bg-slate-50 dark:bg-slate-950">
+      <StackLayout row="0" class="px-5 pt-5 pb-4 border-b border-slate-200 dark:border-slate-800">
+        <Label text="Split View" class="text-xl font-semibold text-slate-900 dark:text-slate-100"></Label>
+        <Label text="Primary" class="text-sm text-slate-500 dark:text-slate-400"></Label>
+      </StackLayout>
+
+      <ScrollView row="1">
+        <StackLayout class="p-5">
+          <GridLayout columns="*,auto" class="mb-4">
+            <Label col="0" text="Navigation" class="text-base font-semibold text-slate-900 dark:text-slate-100"></Label>
+            <Label col="1" text="4 items" class="text-xs text-slate-500 dark:text-slate-400"></Label>
+          </GridLayout>
+
+          <StackLayout class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900">
+            <GridLayout rows="auto" columns="auto,*" class="px-4 py-3 border-b border-slate-200 dark:border-slate-800">
+              <Label col="0" text="•" class="text-lg text-slate-500 dark:text-slate-400"></Label>
+              <Label col="1" text="Overview" class="text-base text-slate-900 dark:text-slate-100"></Label>
+            </GridLayout>
+            <GridLayout rows="auto" columns="auto,*" class="px-4 py-3 border-b border-slate-200 dark:border-slate-800">
+              <Label col="0" text="•" class="text-lg text-slate-500 dark:text-slate-400"></Label>
+              <Label col="1" text="Accounts" class="text-base text-slate-900 dark:text-slate-100"></Label>
+            </GridLayout>
+            <GridLayout rows="auto" columns="auto,*" class="px-4 py-3 border-b border-slate-200 dark:border-slate-800">
+              <Label col="0" text="•" class="text-lg text-slate-500 dark:text-slate-400"></Label>
+              <Label col="1" text="Reports" class="text-base text-slate-900 dark:text-slate-100"></Label>
+            </GridLayout>
+            <GridLayout rows="auto" columns="auto,*" class="px-4 py-3">
+              <Label col="0" text="•" class="text-lg text-slate-500 dark:text-slate-400"></Label>
+              <Label col="1" text="Settings" class="text-base text-slate-900 dark:text-slate-100"></Label>
+            </GridLayout>
+          </StackLayout>
+
+          <StackLayout
+            class="mt-5 rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-4"
+          >
+            <Label text="Tip" class="text-xs font-semibold text-slate-500 dark:text-slate-400"></Label>
+            <Label
+              text="On iPad, keep Primary lightweight. Use Secondary for details and Inspector for properties."
+              class="mt-1 text-sm text-slate-700 dark:text-slate-200 leading-[3]"
+              textWrap="true"
+            ></Label>
+          </StackLayout>
+        </StackLayout>
+      </ScrollView>
+    </GridLayout>
+  `,
   imports: [NativeScriptCommonModule],
   schemas: [NO_ERRORS_SCHEMA],
 })
diff --git a/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-secondary.component.ts b/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-secondary.component.ts
index a81e6bd..047cd5a 100644
--- a/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-secondary.component.ts
+++ b/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-secondary.component.ts
@@ -1,13 +1,98 @@
-import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
+import { Component, inject, NO_ERRORS_SCHEMA } from '@angular/core';
 import { NativeScriptCommonModule } from '@nativescript/angular';
+import { SplitViewState } from './split-view.state';
 
 @Component({
   selector: 'ns-split-view-secondary',
-  template: `<GridLayout rows="auto,*" class="p-16">
-    <Label row="0" text="Secondary" class="h2 mb-8"></Label>
-    <Label row="1" text="This is the secondary column." class="text-center"></Label>
-  </GridLayout>`,
+  template: `
+    <GridLayout rows="*" class="h-full bg-white dark:bg-slate-950">
+      <ScrollView>
+        <StackLayout class="p-5">
+          <GridLayout columns="*,*" class="mb-4" columnGap="12">
+            <StackLayout
+              col="0"
+              class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900 p-4 mr-1"
+            >
+              <Label text="Active" class="text-xs font-semibold  text-slate-500 dark:text-slate-400"></Label>
+              <Label text="12" class="mt-1 text-3xl font-semibold text-slate-900 dark:text-slate-100"></Label>
+              <Label text="items" class="text-xs text-slate-500 dark:text-slate-400"></Label>
+            </StackLayout>
+            <StackLayout
+              col="1"
+              class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900 p-4 ml-1"
+            >
+              <Label text="Updated" class="text-xs font-semibold  text-slate-500 dark:text-slate-400"></Label>
+              <Label text="2m" class="mt-1 text-3xl font-semibold text-slate-900 dark:text-slate-100"></Label>
+              <Label text="ago" class="text-xs text-slate-500 dark:text-slate-400"></Label>
+            </StackLayout>
+          </GridLayout>
+
+          <StackLayout class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-4">
+            <Label text="Summary" class="text-base font-semibold text-slate-900 dark:text-slate-100"></Label>
+            <Label
+              text="This column is ideal for the main content. Put your routed page content here."
+              class="mt-2 text-sm text-slate-700 dark:text-slate-200 leading-[3]"
+              textWrap="true"
+            ></Label>
+
+            <GridLayout rows="auto,auto,auto" columns="*,auto" class="mt-4" rowGap="10">
+              <Label row="0" col="0" text="Status" class="text-sm text-slate-500 dark:text-slate-400"></Label>
+              <Label
+                row="0"
+                col="1"
+                text="Ready"
+                class="text-sm font-semibold text-slate-900 dark:text-slate-100"
+              ></Label>
+
+              <Label row="1" col="0" text="Owner" class="text-sm text-slate-500 dark:text-slate-400"></Label>
+              <Label
+                row="1"
+                col="1"
+                text="Demo"
+                class="text-sm font-semibold text-slate-900 dark:text-slate-100"
+              ></Label>
+
+              <Label row="2" col="0" text="Mode" class="text-sm text-slate-500 dark:text-slate-400"></Label>
+              <Label
+                row="2"
+                col="1"
+                text="Two-beside"
+                class="text-sm font-semibold text-slate-900 dark:text-slate-100"
+              ></Label>
+            </GridLayout>
+          </StackLayout>
+
+          <StackLayout
+            class="mt-5 rounded-2xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900 p-4"
+          >
+            <Label text="Next" class="text-xs font-semibold text-slate-500 dark:text-slate-400"></Label>
+            <Label
+              text="Add your real detail view here (lists, charts, forms)."
+              class="mt-1 text-sm text-slate-700 dark:text-slate-200"
+              textWrap="true"
+            ></Label>
+          </StackLayout>
+
+          @if (!splitViewState.inspectorVisible()) {
+            <StackLayout
+              class="mt-5 rounded-2xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900 p-4"
+              (tap)="splitViewState.setInspectorVisible(true)"
+            >
+              <Label text="Open Inspector" class="text-xs font-semibold text-slate-500 dark:text-slate-400"></Label>
+              <Label
+                text="You can open the Inspector to adjust properties."
+                class="mt-1 text-sm text-slate-700 dark:text-slate-200"
+                textWrap="true"
+              ></Label>
+            </StackLayout>
+          }
+        </StackLayout>
+      </ScrollView>
+    </GridLayout>
+  `,
   imports: [NativeScriptCommonModule],
   schemas: [NO_ERRORS_SCHEMA],
 })
-export class SplitViewSecondaryComponent {}
+export class SplitViewSecondaryComponent {
+  splitViewState = inject(SplitViewState);
+}
diff --git a/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-supplementary.component.ts b/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-supplementary.component.ts
index 5a248cd..ec085dc 100644
--- a/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-supplementary.component.ts
+++ b/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-supplementary.component.ts
@@ -3,10 +3,61 @@ import { NativeScriptCommonModule } from '@nativescript/angular';
 
 @Component({
   selector: 'ns-split-view-supplementary',
-  template: `<GridLayout rows="auto,*" class="p-16">
-    <Label row="0" text="Supplementary" class="h2 mb-8"></Label>
-    <Label row="1" text="This is the supplementary column." class="text-center"></Label>
-  </GridLayout>`,
+  template: `
+    <GridLayout rows="auto,*" class="h-full bg-slate-50 dark:bg-slate-950">
+      <StackLayout row="0" class="px-5 pt-5 pb-4 border-b border-slate-200 dark:border-slate-800">
+        <Label text="Activity" class="text-xl font-semibold text-slate-900 dark:text-slate-100"></Label>
+        <Label text="Supplementary" class="text-sm text-slate-500 dark:text-slate-400"></Label>
+      </StackLayout>
+
+      <ScrollView row="1">
+        <StackLayout class="p-5">
+          <StackLayout class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-4">
+            <Label text="Today" class="text-base font-semibold text-slate-900 dark:text-slate-100"></Label>
+
+            <GridLayout columns="auto,*" class="mt-3" columnGap="10">
+              <Label col="0" text="•" class="text-lg text-slate-500 dark:text-slate-400"></Label>
+              <Label
+                col="1"
+                text="Opened the split view demo"
+                class="text-sm text-slate-700 leading-[3] dark:text-slate-200"
+                textWrap="true"
+              ></Label>
+            </GridLayout>
+            <GridLayout columns="auto,*" class="mt-2" columnGap="10">
+              <Label col="0" text="•" class="text-lg text-slate-500 dark:text-slate-400"></Label>
+              <Label
+                col="1"
+                text="Routed pages into named outlets"
+                class="text-sm text-slate-700 leading-[3] dark:text-slate-200"
+                textWrap="true"
+              ></Label>
+            </GridLayout>
+            <GridLayout columns="auto,*" class="mt-2" columnGap="10">
+              <Label col="0" text="•" class="text-lg text-slate-500 dark:text-slate-400"></Label>
+              <Label
+                col="1"
+                text="Verified controller mapping on iOS"
+                class="text-sm text-slate-700 leading-[3] dark:text-slate-200"
+                textWrap="true"
+              ></Label>
+            </GridLayout>
+          </StackLayout>
+
+          <StackLayout
+            class="mt-5 rounded-2xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900 p-4"
+          >
+            <Label text="Notes" class="text-base font-semibold text-slate-900 dark:text-slate-100"></Label>
+            <Label
+              text="Supplementary is great for context: recent items, related data, or quick shortcuts."
+              class="mt-2 text-sm text-slate-700 dark:text-slate-200 leading-[3]"
+              textWrap="true"
+            ></Label>
+          </StackLayout>
+        </StackLayout>
+      </ScrollView>
+    </GridLayout>
+  `,
   imports: [NativeScriptCommonModule],
   schemas: [NO_ERRORS_SCHEMA],
 })
diff --git a/apps/nativescript-demo-ng/src/app/split-view-demo/split-view.routes.ts b/apps/nativescript-demo-ng/src/app/split-view-demo/split-view.routes.ts
index aa687e5..db72531 100644
--- a/apps/nativescript-demo-ng/src/app/split-view-demo/split-view.routes.ts
+++ b/apps/nativescript-demo-ng/src/app/split-view-demo/split-view.routes.ts
@@ -1,40 +1,31 @@
 import { Routes } from '@angular/router';
-import { SplitViewDemoComponent } from './split-view-demo.component';
 import { SplitViewPrimaryComponent } from './split-view-primary.component';
 import { SplitViewSecondaryComponent } from './split-view-secondary.component';
 import { SplitViewSupplementaryComponent } from './split-view-supplementary.component';
 import { SplitViewInspectorComponent } from './split-view-inspector.component';
 
+// Since SplitViewDemoComponent is bootstrapped directly, we don't include it in routes.
+// The named outlets are defined in SplitViewDemoComponent's template,
+// and these child routes activate into those outlets.
 export const SPLIT_VIEW_ROUTES: Routes = [
   {
-    path: '',
-    component: SplitViewDemoComponent,
-    children: [
-      // {
-      //   path: '',
-      //   redirectTo: '/(primary:primary//secondary:secondary//supplementary:supplementary//inspector:inspector)',
-      //   pathMatch: 'full',
-      // },
-      {
-        path: 'primary',
-        component: SplitViewPrimaryComponent,
-        outlet: 'primary',
-      },
-      {
-        path: 'secondary',
-        component: SplitViewSecondaryComponent,
-        outlet: 'secondary',
-      },
-      {
-        path: 'supplementary',
-        component: SplitViewSupplementaryComponent,
-        outlet: 'supplementary',
-      },
-      {
-        path: 'inspector',
-        component: SplitViewInspectorComponent,
-        outlet: 'inspector',
-      },
-    ],
+    path: 'primary',
+    component: SplitViewPrimaryComponent,
+    outlet: 'primary',
+  },
+  {
+    path: 'secondary',
+    component: SplitViewSecondaryComponent,
+    outlet: 'secondary',
+  },
+  {
+    path: 'supplementary',
+    component: SplitViewSupplementaryComponent,
+    outlet: 'supplementary',
+  },
+  {
+    path: 'inspector',
+    component: SplitViewInspectorComponent,
+    outlet: 'inspector',
   },
 ];
diff --git a/apps/nativescript-demo-ng/src/app/split-view-demo/split-view.state.ts b/apps/nativescript-demo-ng/src/app/split-view-demo/split-view.state.ts
new file mode 100644
index 0000000..3b9cfa8
--- /dev/null
+++ b/apps/nativescript-demo-ng/src/app/split-view-demo/split-view.state.ts
@@ -0,0 +1,21 @@
+import { Injectable, signal } from '@angular/core';
+import { SplitView } from '@nativescript/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class SplitViewState {
+  inspectorVisible = signal(true);
+
+  onInspectorChange(event: any) {
+    console.log(`[SplitViewState] Inspector visibility changed: ${event.data.showing}`);
+    if (!event.data.showing) {
+      this.inspectorVisible.set(event.data.showing);
+    }
+  }
+
+  setInspectorVisible(visible: boolean) {
+    this.inspectorVisible.set(visible);
+    SplitView.getInstance().showInspector();
+  }
+}
diff --git a/apps/nativescript-demo-ng/src/main.ts b/apps/nativescript-demo-ng/src/main.ts
index bcb4e59..8083544 100644
--- a/apps/nativescript-demo-ng/src/main.ts
+++ b/apps/nativescript-demo-ng/src/main.ts
@@ -5,7 +5,7 @@ import {
   provideNativeScriptRouter,
   runNativeScriptAngularApp,
 } from '@nativescript/angular';
-import { Trace, Utils } from '@nativescript/core';
+import { Trace, Utils, SplitView } from '@nativescript/core';
 
 // import { AppModule } from './app/app.module';
 import { withInterceptorsFromDi } from '@angular/common/http';
@@ -20,6 +20,9 @@ const ZONELESS = true;
 Trace.enable();
 Trace.setCategories('ns-route-reuse-strategy,ns-router');
 
+// Set the split style before bootstrapping - 'triple' is needed for primary/supplementary/secondary layout
+SplitView.SplitStyle = 'triple';
+
 runNativeScriptAngularApp({
   appModuleBootstrap: () => {
     if (__APPLE__) {