@symbiote-native/navigation 2.2.0 → 3.0.0

package/README.md

@@ -142,9 +142,54 @@ export class AppComponent {
 }
 ```
 
+```svelte
+<!-- Svelte — examples/svelte/App.svelte -->
+<script lang="ts">
+  import { Screen, Stack } from '@symbiote-native/navigation/svelte';
+  import type { INavigatorHandle } from '@symbiote-native/navigation/svelte';
+
+  let stackInstance = $state.raw<INavigatorHandle | null>(null);
+</script>
+
+<Stack bind:this={stackInstance} initialRouteName="Menu">
+  <Screen name="Menu" component={MenuScreen} options={{ title: 'Navigation Demos' }} />
+  <Screen name="Details" component={DetailsScreen} options={{ title: 'Details' }} />
+</Stack>
+```
+
+```tsx
+// Solid — examples/solid/App.tsx
+import { createSignal } from 'solid-js';
+import { Stack } from '@symbiote-native/navigation/solid';
+import type { INavigatorHandle } from '@symbiote-native/navigation/solid';
+
+export default function App() {
+  const [stackHandle, setStackHandle] = createSignal<INavigatorHandle | null>(
+    null,
+  );
+
+  return (
+    <Stack ref={handle => setStackHandle(handle)} initialRouteName="Menu">
+      <Stack.Screen
+        name="Menu"
+        component={MenuScreen}
+        options={{ title: 'Navigation Demos' }}
+      />
+      <Stack.Screen
+        name="Details"
+        component={DetailsScreen}
+        options={{ title: 'Details' }}
+      />
+    </Stack>
+  );
+}
+```
+
 `Stack` itself implements `INavigatorHandle` in Angular — `@ViewChild` gives you the handle
-directly, no separate ref callback. In React/Vue, the ref only attaches during commit — code that
-needs the handle (e.g. `useLinkingIntegration` below) must gate on it being non-null first.
+directly, no separate ref callback. In React/Vue/Svelte/Solid, the ref only attaches during
+commit — code that needs the handle (e.g. `useLinkingIntegration` below) must gate on it being
+non-null first (Svelte's `bind:this` binds during mount, so `$effect`-gate on it; Solid's `ref`
+callback fires during creation, strictly before any effect runs).
 
 ### Tabs, Drawer, hooks, deep linking, and state persistence
 

package/build/angular/index.js

@@ -3,7 +3,7 @@
 // views' ViewConfigs (../register, a side-effect import of the three codegen specs - never
 // react-native-screens' own React components), then exposes Stack/Tab/Drawer with their Screen
 // directives and navigator handles. Mirrors react/index.ts's barrel shape.
-import '../register';
+import '../register.js';
 export { Stack } from './stack/index.js';
 export { ScreenDirective } from './screen.directive.js';
 export { injectNavigation, injectStackNavigation, injectTabNavigation, injectDrawerNavigation, injectRoute, injectIsFocused, injectFocusEffect, injectNavigationState, } from './injectors/index.js';

package/build/react/index.js

@@ -2,7 +2,7 @@
 // native view primitives. Importing this barrel first registers the native views' ViewConfigs
 // (../register, a side-effect import of the three codegen specs - never react-native-screens' own
 // React components), then exposes Stack (with Stack.Screen attached) and the navigator handle.
-import '../register';
+import '../register.js';
 export { Stack } from './stack/index.js';
 export { Screen } from './screen.js';
 export { useNavigation, useRoute, useIsFocused, useFocusEffect, useNavigationState, } from './hooks/index.js';

package/build/solid/index.js

@@ -10,7 +10,7 @@
 // signal, an effect or a subscription (createIsFocused / createFocusEffect / createNavigationState
 // / createLinkingIntegration). Same rule the adapter's `createColorScheme` follows; a blanket `use`
 // would read as a foreign ecosystem's convention (<adapter_src_follows_framework_idioms>).
-import '../register';
+import '../register.js';
 export { Stack } from './stack/index.js';
 export { Screen, TabScreen, DrawerScreen } from './screen.js';
 export { useNavigation, useStackNavigation, useTabNavigation, useDrawerNavigation, useRoute, createIsFocused, createFocusEffect, createNavigationState, } from './primitives/index.js';

package/build/svelte/index.js

@@ -3,7 +3,7 @@
 // views' ViewConfigs (../register, a side-effect import of the codegen specs - never
 // react-native-screens' own React components), then exposes Stack (with Stack.Screen attached)
 // and the navigator handle. Mirrors vue/index.ts's barrel shape.
-import '../register';
+import '../register.js';
 export { Stack } from './stack/index.js';
 export { default as Screen } from './screen.svelte';
 export { useNavigation, useStackNavigation, useTabNavigation, useDrawerNavigation, useRoute, useIsFocused, useFocusEffect, useNavigationState, } from './runes/index.js';

package/build/vue/index.js

@@ -2,7 +2,7 @@
 // native view primitives. Importing this barrel first registers the native views' ViewConfigs
 // (../register, a side-effect import of the three codegen specs - never react-native-screens' own
 // React components), then exposes Stack (with Stack.Screen attached) and the navigator handle.
-import '../register';
+import '../register.js';
 export { Stack } from './stack/index.js';
 export { Screen } from './screen.js';
 export { useNavigation, useStackNavigation, useTabNavigation, useDrawerNavigation, useRoute, useIsFocused, useFocusEffect, useNavigationState, } from './composables/index.js';

package/package.json

@@ -1,7 +1,18 @@
 {
   "name": "@symbiote-native/navigation",
-  "version": "2.2.0",
+  "version": "3.0.0",
   "description": "Native stack navigator for SymbioteNative, built on react-native-screens' native view primitives (RNSScreen/RNSScreenStack) — one framework-agnostic core, reachable from the React, Vue, Svelte, Solid, and Angular adapters.",
+  "keywords": [
+    "react-native",
+    "symbiote-native",
+    "react",
+    "vue",
+    "svelte",
+    "solid",
+    "angular",
+    "native-stack",
+    "react-native-screens"
+  ],
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -149,23 +160,23 @@
   },
   "dependencies": {
     "react-native-screens": "4.26.0",
-    "@symbiote-native/components": "0.5.0"
+    "@symbiote-native/components": "1.0.0"
   },
   "peerDependencies": {
     "@angular/common": ">=20",
     "@angular/core": ">=20",
-    "@symbiote-native/angular": ">=0.6.2",
-    "@symbiote-native/engine": ">=0.1.7",
-    "@symbiote-native/react": ">=0.2.8",
-    "@symbiote-native/solid": ">=0.0.1",
-    "@symbiote-native/svelte": ">=0.1.0",
-    "@symbiote-native/vue": ">=0.3.8",
     "@vue/runtime-core": "^3.5.13",
     "react": ">=19.0.0",
     "react-native": ">=0.86",
     "solid-js": ">=1.9.0",
     "svelte": ">=5.56.0",
-    "vue": ">=3.5.0"
+    "vue": ">=3.5.0",
+    "@symbiote-native/angular": "^1.0.0",
+    "@symbiote-native/engine": "^0.4.0",
+    "@symbiote-native/react": "^1.0.0",
+    "@symbiote-native/solid": "^1.0.0",
+    "@symbiote-native/svelte": "^1.0.0",
+    "@symbiote-native/vue": "^1.0.0"
   },
   "peerDependenciesMeta": {
     "@angular/common": {
@@ -217,13 +228,13 @@
     "solid-js": "^1.9.14",
     "svelte": "^5.56.0",
     "typescript": "~6.0.0",
-    "@symbiote-native/angular": "0.8.0",
-    "@symbiote-native/engine": "0.3.0",
-    "@symbiote-native/react": "0.4.0",
-    "@symbiote-native/solid": "0.1.0",
-    "@symbiote-native/svelte": "0.3.0",
-    "@symbiote-native/test-utils": "0.2.0",
-    "@symbiote-native/vue": "0.5.0"
+    "@symbiote-native/angular": "1.0.0",
+    "@symbiote-native/engine": "0.4.0",
+    "@symbiote-native/react": "1.0.0",
+    "@symbiote-native/solid": "1.0.0",
+    "@symbiote-native/svelte": "1.0.0",
+    "@symbiote-native/test-utils": "0.3.0",
+    "@symbiote-native/vue": "1.0.0"
   },
   "scripts": {
     "clean": "rm -rf build-ngc",