Fix native navigation package docs

apps/docs/src/content/docs/docs/plugins/native-navigation/getting-started.mdx

@@ -1,6 +1,6 @@
 ---
 title: Getting Started
-description: Install @capgo/native-navigation and render native navigation chrome over a Capacitor WebView.
+description: Install @capgo/capacitor-native-navigation and render native navigation chrome over a Capacitor WebView.
 sidebar:
   order: 2
 ---
@@ -10,15 +10,15 @@ import { PackageManagers } from 'starlight-package-managers'
 
 <Steps>
 1. **Install the package**
-   <PackageManagers pkg="@capgo/native-navigation" pkgManagers={['bun']} />
+   <PackageManagers pkg="@capgo/capacitor-native-navigation" pkgManagers={['npm']} />
 
 2. **Sync native projects**
-   <PackageManagers type="exec" pkg="cap" args="sync" pkgManagers={['bun']} />
+   <PackageManagers type="exec" pkg="cap" args="sync" pkgManagers={['npm']} />
 
 3. **Configure native chrome**
 
    ```ts
-   import { NativeNavigation } from '@capgo/native-navigation';
+   import { NativeNavigation } from '@capgo/capacitor-native-navigation';
 
    await NativeNavigation.configure({
      contentInsetMode: 'css',
@@ -55,8 +55,13 @@ import { PackageManagers } from 'starlight-package-managers'
    ```ts
    await NativeNavigation.setTabbar({
      selectedId: 'home',
-     labels: true,
+     labelVisibilityMode: 'selected',
      icons: true,
+     colors: {
+       dynamic: true,
+       tint: '#0f172a',
+       inactiveTint: '#64748b',
+     },
      tabs: [
        {
          id: 'home',
@@ -117,6 +122,97 @@ await NativeNavigation.finishTransition({
 });
 ```
 
+## Zoom transition
+
+Use the zoom helpers for card-to-detail or media-preview flows. Pass the tapped element before your router changes content, then finish after the detail page is ready.
+
+```ts
+import { beginZoomTransition, finishZoomTransition } from '@capgo/capacitor-native-navigation';
+
+const card = document.querySelector('[data-message-card]');
+if (card) {
+  const transition = await beginZoomTransition(card, { cornerRadius: 18 });
+
+  router.push('/message/42');
+  await router.ready?.();
+
+  await NativeNavigation.setNavbar({
+    title: 'Message',
+    backButton: { visible: true, title: 'Inbox' },
+  });
+
+  await finishZoomTransition(undefined, {
+    id: transition.id,
+    cornerRadius: 18,
+  });
+}
+```
+
+## Use with @capgo/capacitor-transitions
+
+Use Native Navigation for the native navbar, tabbar, safe-area insets, and native intent events. Use `@capgo/capacitor-transitions` for the WebView page stack underneath the native chrome.
+
+```bash
+npm install @capgo/capacitor-native-navigation @capgo/capacitor-transitions
+npx cap sync
+```
+
+Initialize both packages once:
+
+```ts
+import { NativeNavigation } from '@capgo/capacitor-native-navigation';
+import '@capgo/capacitor-transitions';
+import { initTransitions, setupRouterOutlet, setDirection } from '@capgo/capacitor-transitions/react';
+
+initTransitions({ platform: 'auto' });
+
+const outlet = document.querySelector('cap-router-outlet');
+if (outlet) {
+  setupRouterOutlet(outlet, { platform: 'auto', swipeGesture: 'auto' });
+}
+
+await NativeNavigation.configure({
+  contentInsetMode: 'css',
+});
+```
+
+Keep `cap-router-outlet` focused on pages, not duplicate web bars:
+
+```html
+<cap-router-outlet platform="auto" swipe-gesture="auto">
+  <cap-page>
+    <cap-content slot="content" fullscreen>
+      <main class="page">Inbox content</main>
+    </cap-content>
+  </cap-page>
+</cap-router-outlet>
+```
+
+Drive both packages from the same router actions:
+
+```ts
+async function openMessage(id: string) {
+  setDirection('forward');
+  await router.push(`/messages/${id}`);
+  await NativeNavigation.setNavbar({
+    title: 'Message',
+    backButton: { visible: true, title: 'Inbox' },
+  });
+}
+
+await NativeNavigation.addListener('navbarBack', () => {
+  setDirection('back');
+  router.back();
+});
+
+await NativeNavigation.addListener('tabSelect', ({ id }) => {
+  setDirection('root');
+  router.push(`/${id}`);
+});
+```
+
+Pick one animation layer per route change. Let `@capgo/capacitor-transitions` animate normal page pushes, and use Native Navigation's zoom helpers only for shared-element or zoom routes.
+
 ## CSS insets
 
 With `contentInsetMode: 'css'`, the plugin writes native bar dimensions to `document.documentElement`.
@@ -168,7 +264,7 @@ Inline SVG supports the icon-focused subset used by common icon sets such as Luc
 The package can register custom elements for framework-agnostic declarative setup:
 
 ```ts
-import { defineNativeNavigationElements } from '@capgo/native-navigation';
+import { defineNativeNavigationElements } from '@capgo/capacitor-native-navigation';
 
 defineNativeNavigationElements();
 ```

apps/docs/src/content/docs/docs/plugins/native-navigation/index.mdx

@@ -1,5 +1,5 @@
 ---
-title: "@capgo/native-navigation"
+title: "@capgo/capacitor-native-navigation"
 description: Native navbar, tabbar, and transition shell chrome for Capacitor apps that keep content in one WebView.
 tableOfContents: false
 next: false
@@ -35,6 +35,9 @@ import { Card, CardGrid } from '@astrojs/starlight/components';
   <Card title="Native transition shell" icon="setting">
     Capture the current WebView, update content in JavaScript, then finish with a native snapshot-to-WebView animation.
   </Card>
+  <Card title="Zoom routes" icon="star">
+    Open card, grid, and media-detail routes with shared-element-style native zoom geometry.
+  </Card>
 </CardGrid>
 
 ## Core API
@@ -44,6 +47,7 @@ import { Card, CardGrid } from '@astrojs/starlight/components';
 - `setTabbar(options)` updates tabs, selected tab, badges, labels, icons, colors, and visibility.
 - `beginTransition(options?)` captures the outgoing WebView before the JavaScript route change.
 - `finishTransition(options?)` animates from the captured snapshot to the live WebView after route content is ready.
+- `beginZoomTransition(target, options?)` and `finishZoomTransition(target?, options?)` are JavaScript helpers for zoom transitions from elements or rectangles.
 - `getPluginVersion()` returns the native implementation version marker.
 
 ## Events

apps/web/src/config/plugins.ts

@@ -21,7 +21,7 @@ export interface Plugin extends Action {
 
 const actionDefinitionRows =
   String.raw`@capgo/native-market|github.com/Cap-go|Deep link users directly to your app page on Google Play Store or Apple App Store|https://github.com/Cap-go/capacitor-native-market/|Native Market
-@capgo/native-navigation|github.com/Cap-go|Render native navbars, tabbars, and transition shells over a full-screen Capacitor WebView|https://github.com/Cap-go/capacitor-native-navigation/|Native Navigation
+@capgo/capacitor-native-navigation|github.com/Cap-go|Render native navbars, tabbars, and transition shells over a full-screen Capacitor WebView|https://github.com/Cap-go/capacitor-native-navigation/|Native Navigation
 @capgo/capacitor-transitions|github.com/Cap-go|Add Ionic-style page transitions and iOS edge swipe-back gestures without Ionic UI|https://github.com/Cap-go/capacitor-transitions/|Transitions
 @capgo/capacitor-native-biometric|github.com/Cap-go|Secure authentication using Face ID, Touch ID, and Android biometric APIs|https://github.com/Cap-go/capacitor-native-biometric/|Native Biometric
 @capgo/camera-preview|github.com/Cap-go|Display live camera feed as overlay with customizable controls and capture capabilities|https://github.com/Cap-go/capacitor-camera-preview/|Camera Preview
@@ -158,7 +158,7 @@ const actionDefinitionRows =
 
 const pluginIconsByName: Record<string, string> = {
   '@capgo/native-market': 'ArchiveBoxArrowDown',
-  '@capgo/native-navigation': 'DevicePhoneMobile',
+  '@capgo/capacitor-native-navigation': 'DevicePhoneMobile',
   '@capgo/capacitor-transitions': 'ArrowsRightLeft',
   '@capgo/capacitor-native-biometric': 'FingerPrint',
   '@capgo/camera-preview': 'Camera',

apps/web/src/content/plugins-tutorials/en/capacitor-native-navigation.md

@@ -2,21 +2,21 @@
 locale: en
 published: true
 ---
-# Using @capgo/native-navigation
+# Using @capgo/capacitor-native-navigation
 
-`@capgo/native-navigation` renders native top navigation, bottom tab chrome, and route transition shells over a single full-screen Capacitor WebView. Your web framework still owns routes and content, while native owns the app frame.
+`@capgo/capacitor-native-navigation` renders native top navigation, bottom tab chrome, and route transition shells over a single full-screen Capacitor WebView. Your web framework still owns routes and content, while native owns the app frame.
 
 ## Install and sync
 
 ```bash
-bun add @capgo/native-navigation
-bunx cap sync
+npm install @capgo/capacitor-native-navigation
+npx cap sync
 ```
 
 ## Configure the native frame
 
 ```ts
-import { NativeNavigation } from '@capgo/native-navigation';
+import { NativeNavigation } from '@capgo/capacitor-native-navigation';
 
 await NativeNavigation.configure({
   contentInsetMode: 'css',
@@ -53,8 +53,13 @@ await NativeNavigation.setNavbar({
 ```ts
 await NativeNavigation.setTabbar({
   selectedId: 'inbox',
-  labels: true,
+  labelVisibilityMode: 'selected',
   icons: true,
+  colors: {
+    dynamic: true,
+    tint: '#0f172a',
+    inactiveTint: '#64748b',
+  },
   tabs: [
     {
       id: 'inbox',
@@ -115,6 +120,32 @@ await NativeNavigation.finishTransition({
 });
 ```
 
+## Add a zoom transition
+
+Use the zoom helpers for routes that open from a card, grid item, or media preview.
+
+```ts
+import { beginZoomTransition, finishZoomTransition } from '@capgo/capacitor-native-navigation';
+
+const card = document.querySelector('[data-message-card]');
+if (card) {
+  const transition = await beginZoomTransition(card, { cornerRadius: 18 });
+
+  router.push('/message/42');
+  await router.ready?.();
+
+  await NativeNavigation.setNavbar({
+    title: 'Message',
+    backButton: { visible: true, title: 'Inbox' },
+  });
+
+  await finishZoomTransition(undefined, {
+    id: transition.id,
+    cornerRadius: 18,
+  });
+}
+```
+
 ## Pad content with native insets
 
 When `contentInsetMode` is `css`, the plugin writes CSS variables for the native bars:
@@ -141,6 +172,71 @@ const icon = {
 
 Inline SVG supports `path`, `line`, `polyline`, `polygon`, `circle`, and `rect`, which covers common icon sets such as Lucide and Feather.
 
+## Combine with @capgo/capacitor-transitions
+
+Use Native Navigation for the native navbar, tabbar, safe-area insets, and native intent events. Use `@capgo/capacitor-transitions` for the WebView page stack underneath that native chrome.
+
+```bash
+npm install @capgo/capacitor-native-navigation @capgo/capacitor-transitions
+npx cap sync
+```
+
+Initialize both packages once:
+
+```ts
+import { NativeNavigation } from '@capgo/capacitor-native-navigation';
+import '@capgo/capacitor-transitions';
+import { initTransitions, setupRouterOutlet, setDirection } from '@capgo/capacitor-transitions/react';
+
+initTransitions({ platform: 'auto' });
+
+const outlet = document.querySelector('cap-router-outlet');
+if (outlet) {
+  setupRouterOutlet(outlet, { platform: 'auto', swipeGesture: 'auto' });
+}
+
+await NativeNavigation.configure({
+  contentInsetMode: 'css',
+});
+```
+
+Keep the transition outlet focused on pages, not duplicate web bars:
+
+```html
+<cap-router-outlet platform="auto" swipe-gesture="auto">
+  <cap-page>
+    <cap-content slot="content" fullscreen>
+      <main class="page">Inbox content</main>
+    </cap-content>
+  </cap-page>
+</cap-router-outlet>
+```
+
+Drive both packages from the same router actions:
+
+```ts
+async function openMessage(id: string) {
+  setDirection('forward');
+  await router.push(`/messages/${id}`);
+  await NativeNavigation.setNavbar({
+    title: 'Message',
+    backButton: { visible: true, title: 'Inbox' },
+  });
+}
+
+await NativeNavigation.addListener('navbarBack', () => {
+  setDirection('back');
+  router.back();
+});
+
+await NativeNavigation.addListener('tabSelect', ({ id }) => {
+  setDirection('root');
+  router.push(`/${id}`);
+});
+```
+
+Pick one animation layer per route change. Let `@capgo/capacitor-transitions` animate normal page pushes, and use Native Navigation's zoom helpers only for shared-element or zoom routes.
+
 ## Full Reference
 
 - GitHub: https://github.com/Cap-go/capacitor-native-navigation/