@symbiote-native/navigation 3.0.0 → 4.0.1

package/README.md

@@ -152,8 +152,16 @@ export class AppComponent {
 </script>
 
 <Stack bind:this={stackInstance} initialRouteName="Menu">
-  <Screen name="Menu" component={MenuScreen} options={{ title: 'Navigation Demos' }} />
-  <Screen name="Details" component={DetailsScreen} options={{ title: 'Details' }} />
+  <Screen
+    name="Menu"
+    component={MenuScreen}
+    options={{ title: 'Navigation Demos' }}
+  />
+  <Screen
+    name="Details"
+    component={DetailsScreen}
+    options={{ title: 'Details' }}
+  />
 </Stack>
 ```
 

package/build/angular/drawer/index.js

@@ -21,7 +21,15 @@
 //
 // RESOLVED (see stack.ts's header, identical reasoning): `'Drawer'` has an `ANCHOR_HOST_COMPONENTS`
 // entry in `adapters/angular/src/renderer.ts`, so a real device build paints `<Drawer>` correctly
-// as a nested tag. `View`/`AnimatedView`, imported below, were already anchor-hosted.
+// as a nested tag. `AnimatedView`, imported below, was already anchor-hosted.
+//
+// RAW NATIVE TAGS + NO_ERRORS_SCHEMA (see stack.ts's and tabs.ts's identical header note):
+// `<view>` is a non-dashed raw tag, and `CUSTOM_ELEMENTS_SCHEMA` only relaxes tags containing a
+// "-" (confirmed against `.vendors/angular/packages/compiler/src/schema/
+// dom_element_schema_registry.ts`'s `hasElement`). The previous `View` import (`ViewHost`
+// re-exported under that alias) never actually matched `<view>` here despite the identical
+// selector — device-observed via `ngc`, not `tsc`/vitest — and was removed as dead (ngc's own
+// NG8113 flagged it unused).
 //
 // DRAWER CONTENT PROJECTION: react/drawer.ts's `renderDrawerContent` is a render-PROP callback
 // (`(props) => ReactNode`) - per CLAUDE.md's <prop_types_split_agnostic_vs_per_adapter>, a
@@ -64,10 +72,10 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     }
     return useValue ? value : void 0;
 };
-import { ChangeDetectionStrategy, Component, ContentChild, ContentChildren, Input, QueryList, TemplateRef, computed, inject, signal, untracked, } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ContentChild, ContentChildren, Input, NO_ERRORS_SCHEMA, QueryList, TemplateRef, computed, inject, signal, untracked, } from '@angular/core';
 import { NgComponentOutlet, NgTemplateOutlet } from '@angular/common';
 import { PanResponder, dlog, flattenStyle, } from '@symbiote-native/engine';
-import { Animated, AnimatedView, SymbioteHostPropsDirective, View, WindowDimensionsService, } from '@symbiote-native/angular';
+import { Animated, AnimatedView, SymbioteHostPropsDirective, WindowDimensionsService, } from '@symbiote-native/angular';
 import { DRAWER_DEFAULT_OVERLAY_COLOR, NAVIGATION_EVENT_BLUR, NAVIGATION_EVENT_FOCUS, createInitialDrawerRouterState, createNavigationEmitter, diffFocusedRoute, drawerChildOrder, drawerRouterReducer, isDrawerAnimated, renderDrawer, resolveDragProgress, resolveDrawerGeometry, resolveDrawerSlotInterpolation, resolveSwipeIntent, shouldClaimDrawerSwipe, } from '../../core/index.js';
 import { NavigationScopeDirective } from '../navigation-scope.directive.js';
 import { DrawerScreenDirective } from '../drawer-screen.directive.js';
@@ -77,18 +85,18 @@ let Drawer = (() => {
     let _classDecorators = [Component({
             selector: 'Drawer',
             standalone: true,
+            schemas: [NO_ERRORS_SCHEMA],
             imports: [
                 NgComponentOutlet,
                 NgTemplateOutlet,
                 NavigationScopeDirective,
                 SymbioteHostPropsDirective,
-                View,
                 AnimatedView,
             ],
             changeDetection: ChangeDetectionStrategy.OnPush,
             template: `
     @if (state(); as currentState) {
-      <View [style]="rootStyle()" [symbioteHostProps]="rootPanHandlers()">
+      <view [style]="rootStyle()" [symbioteHostProps]="rootPanHandlers()">
         @for (slot of slotOrder(); track slot) {
           @switch (slot) {
             @case ('content') {
@@ -132,7 +140,7 @@ let Drawer = (() => {
             }
           }
         }
-      </View>
+      </view>
     }
   `,
         })];

package/build/angular/tabs/index.js

@@ -6,11 +6,16 @@
 // implements ITabNavigatorHandle`) - plus the descriptor bridge (`symbiote-descriptor-outlet`,
 // `@symbiote-native/angular`) for the tab-bar leaf, exactly like Stack bridges its header config.
 // Unlike Stack, a bottom-tabs bar is a PURE-JS UI: it paints
-// ordinary `symbiote-view`/`symbiote-text` primitives via the shared render fn, so there is no
-// react-native-screens ViewConfig to register - Tab needs no `../register` import. Every tag this
-// template names (`View`, `symbiote-descriptor-outlet`) is a REAL imported Angular component (no
-// raw non-dashed native tag names the way stack.ts needs `NO_ERRORS_SCHEMA` for), so no loosened
-// schema is needed here at all.
+// ordinary `view`/`text` primitives via the shared render fn, so there is no
+// react-native-screens ViewConfig to register - Tab needs no `../register` import.
+//
+// RAW NATIVE TAGS + NO_ERRORS_SCHEMA (see stack.ts's identical header note): `<view>` is a
+// non-dashed raw tag, and `CUSTOM_ELEMENTS_SCHEMA` only relaxes tags containing a "-" (confirmed
+// against `.vendors/angular/packages/compiler/src/schema/dom_element_schema_registry.ts`'s
+// `hasElement`) — it does NOT rescue this the way it does `symbiote-*`-prefixed selectors. The
+// previous `View` import (`ViewHost` re-exported under that alias) never actually matched `<view>`
+// here despite the identical selector — device-observed via `ngc`, not `tsc`/vitest — and was
+// removed as dead (ngc's own NG8113 flagged it unused).
 //
 // RESOLVED (see stack.ts's header, identical reasoning): `'Tab'` has an `ANCHOR_HOST_COMPONENTS`
 // entry in `adapters/angular/src/renderer.ts`, so a real device build paints `<Tab>` correctly as
@@ -49,10 +54,10 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     }
     return useValue ? value : void 0;
 };
-import { ChangeDetectionStrategy, Component, ContentChildren, Input, QueryList, signal, untracked, } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ContentChildren, Input, NO_ERRORS_SCHEMA, QueryList, signal, untracked, } from '@angular/core';
 import { NgComponentOutlet } from '@angular/common';
 import { dlog } from '@symbiote-native/engine';
-import { DescriptorOutlet, View } from '@symbiote-native/angular';
+import { DescriptorOutlet } from '@symbiote-native/angular';
 import { NAVIGATION_EVENT_BLUR, NAVIGATION_EVENT_FOCUS, createInitialTabState, createNavigationEmitter, diffFocusedRoute, isFocusedRoute, reconcileTabRoutes, renderTabBar, tabRouterReducer, } from '../../core/index.js';
 import { NavigationScopeDirective } from '../navigation-scope.directive.js';
 import { TabScreenDirective } from '../tab-screen.directive.js';
@@ -63,16 +68,12 @@ let Tab = (() => {
     let _classDecorators = [Component({
             selector: 'Tab',
             standalone: true,
-            imports: [
-                NgComponentOutlet,
-                NavigationScopeDirective,
-                DescriptorOutlet,
-                View,
-            ],
+            schemas: [NO_ERRORS_SCHEMA],
+            imports: [NgComponentOutlet, NavigationScopeDirective, DescriptorOutlet],
             changeDetection: ChangeDetectionStrategy.OnPush,
             template: `
-    <View [style]="rootStyle">
-      <View [style]="contentStyle">
+    <view [style]="rootStyle">
+      <view [style]="contentStyle">
         @if (focusedRoute(); as route) {
           @if (componentForRoute(route); as component) {
             <ng-container
@@ -84,9 +85,9 @@ let Tab = (() => {
             </ng-container>
           }
         }
-      </View>
+      </view>
       <symbiote-descriptor-outlet [node]="tabBarDescriptor()" />
-    </View>
+    </view>
   `,
         })];
     let _classDescriptor;

package/build/core/render-drawer.js

@@ -68,14 +68,14 @@ function panelBaseStyle(options) {
 }
 export function renderDrawer(view, options) {
     const type = resolveDrawerType(options);
-    const content = el('symbiote-view', { ...view.contentPassthrough, style: CONTENT_STYLE }, []);
-    const panel = el('symbiote-view', {
+    const content = el('view', { ...view.contentPassthrough, style: CONTENT_STYLE }, []);
+    const panel = el('view', {
         ...view.panelPassthrough,
         style: [panelBaseStyle(options), view.drawerStyle],
     }, []);
     const slots = { content, panel };
     if (isDrawerOverlayVisible(options)) {
-        slots.overlay = el('symbiote-view', {
+        slots.overlay = el('view', {
             ...view.overlayPassthrough,
             style: [OVERLAY_BASE_STYLE, { backgroundColor: view.overlayColor }],
         }, []);
@@ -87,5 +87,5 @@ export function renderDrawer(view, options) {
         return acc;
     }, []);
     const rootStyle = type === 'permanent' ? { ...ROOT_STYLE, flexDirection: 'row' } : ROOT_STYLE;
-    return el('symbiote-view', { style: rootStyle }, children);
+    return el('view', { style: rootStyle }, children);
 }

package/build/core/render-tabs.js

@@ -1,6 +1,6 @@
 // TabBar: the render half (framework-agnostic). A bottom-tabs bar is a PURE-JS UI - unlike
 // Stack, which drives real native RNSScreen/RNSScreenStack views, this paints ordinary
-// `symbiote-view`/`symbiote-text` primitives, so it needs no react-native-screens ViewConfig
+// `view`/`text` primitives, so it needs no react-native-screens ViewConfig
 // work at all (see the task brief in packages/navigation's skill notes). Mirrors renderSwitch's
 // shape: pure prop-driven functions building a `Descriptor` tree from pre-resolved view props;
 // the adapter supplies focus state, tint-color resolution inputs, and the press wiring via
@@ -72,7 +72,7 @@ function renderIcon(icon, color) {
 function renderBadge(badge) {
     if (badge === undefined)
         return undefined;
-    return el('symbiote-view', { style: BADGE_STYLE }, [
+    return el('view', { style: BADGE_STYLE }, [
         txt({ style: BADGE_TEXT_STYLE }, [String(badge)]),
     ]);
 }
@@ -87,11 +87,11 @@ export function renderTabBarItem(item) {
         iconChildren.push(badge);
     const children = [];
     if (iconChildren.length > 0)
-        children.push(el('symbiote-view', { style: ICON_WRAPPER_STYLE }, iconChildren));
+        children.push(el('view', { style: ICON_WRAPPER_STYLE }, iconChildren));
     children.push(txt({ style: { color, fontSize: TAB_LABEL_FONT_SIZE } }, [item.label]));
-    return el('symbiote-view', { ...item.passthrough, style: TAB_ITEM_STYLE, accessibilityRole: 'tab' }, children, item.key);
+    return el('view', { ...item.passthrough, style: TAB_ITEM_STYLE, accessibilityRole: 'tab' }, children, item.key);
 }
 export function renderTabBar(view) {
     const items = view.items.map(renderTabBarItem);
-    return el('symbiote-view', { ...view.passthrough, style: [TAB_BAR_STYLE, view.style] }, items);
+    return el('view', { ...view.passthrough, style: [TAB_BAR_STYLE, view.style] }, items);
 }

package/build/react/drawer/index.js

@@ -290,7 +290,7 @@ const DrawerImpl = forwardRef((props, forwardedRef) => {
     const drawerChildren = order
         .map(renderSlot)
         .filter((element) => element !== null);
-    return createElement('symbiote-view', { style: root.props.style, ...panResponder.panHandlers }, ...drawerChildren);
+    return createElement('view', { style: root.props.style, ...panResponder.panHandlers }, ...drawerChildren);
 });
 export const Drawer = Object.assign(DrawerImpl, { Screen: DrawerScreen });
 // --- Explicit gap list vs the real react-native-gesture-handler + react-native-reanimated

package/build/react/tabs/index.js

@@ -4,7 +4,7 @@
 // router state, useId for route-key generation, useImperativeHandle for the jumpTo/setParams
 // handle - plus the descriptor bridge for the tab-bar leaf, exactly like Stack bridges its header
 // config (react/stack.ts). Unlike Stack, a bottom-tabs bar is a PURE-JS UI: it paints ordinary
-// `symbiote-view`/`symbiote-text` primitives via the shared render fn, so there is no
+// `view`/`text` primitives via the shared render fn, so there is no
 // react-native-screens ViewConfig to register here - Tab needs no `../register` import.
 import { createElement, forwardRef, isValidElement, useCallback, useContext, useEffect, useId, useImperativeHandle, useMemo, useState, } from 'react';
 import { descriptorToReact } from '@symbiote-native/react';
@@ -135,6 +135,6 @@ const TabImpl = forwardRef((props, forwardedRef) => {
             },
         }, createElement(focusedEntry.component))
         : null;
-    return createElement('symbiote-view', { style: TAB_ROOT_STYLE }, createElement('symbiote-view', { style: TAB_CONTENT_STYLE }, content), tabBar);
+    return createElement('view', { style: TAB_ROOT_STYLE }, createElement('view', { style: TAB_CONTENT_STYLE }, content), tabBar);
 });
 export const Tab = Object.assign(TabImpl, { Screen: TabScreen });

package/build/solid/drawer/index.js

@@ -24,7 +24,7 @@
 // value: §4 of the same rules file. A value snapshot would freeze the drawer's own content at the
 // state it was built with, and re-invoking it from inside a tracked scope would replace the whole
 // panel subtree mid-gesture.
-import { createEffect, createMemo, createSignal, mergeProps, onCleanup, untrack, } from 'solid-js';
+import { createEffect, createMemo, createSignal, onCleanup, untrack, } from 'solid-js';
 import { Animated, createWindowDimensions } from '@symbiote-native/solid';
 // createComponent from solid-js, insert from the renderer - see stack/index.ts's note.
 import { createComponent } from 'solid-js';
@@ -342,21 +342,24 @@ function DrawerImpl(props) {
                     insert(node, children);
                 return node;
             }
-            // ONE source, never a spread followed by an explicit prop: mergeProps takes the first
-            // NON-undefined value scanning back-to-front, so a later `undefined` silently loses to an
-            // earlier value (.claude/rules/solid-descriptor-bridge.md §6). Collapsing to a single bag
-            // removes the question. mergeProps still earns its place - it wraps the function source in a
-            // memo and hands Animated.View a reactive proxy, which is what keeps the slot's props live
-            // without rebuilding the node.
-            return createComponent(Animated.View, mergeProps(() => ({
+            // ONE source, never a spread followed by an explicit prop: mergeProps took the first
+            // NON-undefined value scanning back-to-front, so a later `undefined` silently lost to an
+            // earlier one (.claude/rules/solid-descriptor-bridge.md §6). A single bag removes the
+            // question, and the thunk is what keeps the slot's props live without rebuilding the node.
+            //
+            // No Animated.View: the engine resolves an AnimatedNode written into any prop of any host
+            // node, so the interpolation in `animatedStyle` binds from a plain `view`.
+            const animated = hostElement('view', () => ({
                 ...slotDescriptor(slot).props,
                 style: [slotDescriptor(slot).props.style, animatedStyle(slot)],
-                get children() {
-                    return slotChildren(slot);
-                },
-            })));
+            }));
+            // An ACCESSOR, not a value: the slot's children are the focused screen, which mounts after
+            // this node is built. Reading once here yields the pre-mount slot and the screen never
+            // arrives — where the branch above may read eagerly, because its children are already built.
+            insert(animated, () => slotChildren(slot));
+            return animated;
         }
-        const root = hostElement('symbiote-view', () => ({
+        const root = hostElement('view', () => ({
             ...rootDescriptor().props,
             ...panResponder.panHandlers,
         }));
@@ -367,7 +370,7 @@ function DrawerImpl(props) {
         const current = shape();
         return untrack(() => buildDrawer(current));
     });
-    const host = hostElement('symbiote-view', () => ({ style: { flex: 1 } }));
+    const host = hostElement('view', () => ({ style: { flex: 1 } }));
     insert(host, drawer);
     return createComponent(ScreenCollectorProvider, {
         value: collector,

package/build/solid/tabs/index.js

@@ -3,7 +3,7 @@
 // every other adapter; here Solid supplies the lifecycle - a signal for the dispatched router
 // state, a callback `ref` for the jumpTo/setParams handle - plus the descriptor bridge for the
 // tab-bar leaf. Unlike Stack, a bottom-tabs bar is a PURE-JS UI painting ordinary
-// `symbiote-view`/`symbiote-text` primitives, so there is no react-native-screens ViewConfig to
+// `view`/`text` primitives, so there is no react-native-screens ViewConfig to
 // register here.
 //
 // TWO SOLID-ONLY REBUILD BOUNDARIES, both invisible in every other adapter:
@@ -209,11 +209,11 @@ function TabImpl(props) {
         const found = state().routes.find(route => route.key === routeKey);
         return found ?? { key: routeKey, name: '', params: undefined };
     }
-    const contentHost = hostElement('symbiote-view', () => ({
+    const contentHost = hostElement('view', () => ({
         style: TAB_CONTENT_STYLE,
     }));
     insert(contentHost, content);
-    const root = hostElement('symbiote-view', () => ({ style: TAB_ROOT_STYLE }));
+    const root = hostElement('view', () => ({ style: TAB_ROOT_STYLE }));
     // ONE array insert rather than two: a second `insert` on the same parent would find the first
     // child already there and REPLACE it (solid-js/universal's insertExpression), while an array is
     // reconciled by identity - contentHost keeps its node, only the bar is swapped when it rebuilds.

package/build/svelte/drawer/index.svelte

@@ -35,10 +35,6 @@
     IPanResponderGestureState,
     ISymbioteEvent,
   } from '@symbiote-native/engine';
-  // The ONLY import from the adapter's main barrel: `Animated.View` is a compiled `.svelte`
-  // component, so unlike PanResponder/Dimensions/AnimatedValue (pure engine re-exports, taken
-  // from the engine directly here) it has no `.svelte`-free home to import from.
-  import { Animated } from '@symbiote-native/svelte';
   import {
     DRAWER_DEFAULT_OVERLAY_COLOR,
     NAVIGATION_EVENT_BLUR,
@@ -471,16 +467,18 @@
   {@const descriptor = slotDescriptors.content}
   {#if descriptor !== undefined}
     {#if contentStyle !== undefined}
-      <Animated.View
-        {...descriptor.props}
-        style={[descriptor.props.style, contentStyle]}
+      <view
+        p={{
+          ...descriptor.props,
+          style: [descriptor.props.style, contentStyle],
+        }}
       >
         {@render screenContent()}
-      </Animated.View>
+      </view>
     {:else}
-      <symbiote-view p={descriptor.props}>
+      <view p={descriptor.props}>
         {@render screenContent()}
-      </symbiote-view>
+      </view>
     {/if}
   {/if}
 {/snippet}
@@ -489,12 +487,14 @@
   {@const descriptor = slotDescriptors.overlay}
   {#if descriptor !== undefined}
     {#if overlayStyle !== undefined}
-      <Animated.View
-        {...descriptor.props}
-        style={[descriptor.props.style, overlayStyle]}
+      <view
+        p={{
+          ...descriptor.props,
+          style: [descriptor.props.style, overlayStyle],
+        }}
       />
     {:else}
-      <symbiote-view p={descriptor.props} />
+      <view p={descriptor.props} />
     {/if}
   {/if}
 {/snippet}
@@ -503,32 +503,31 @@
   {@const descriptor = slotDescriptors.panel}
   {#if descriptor !== undefined}
     {#if panelStyle !== undefined}
-      <Animated.View
-        {...descriptor.props}
-        style={[descriptor.props.style, panelStyle]}
+      <view
+        p={{ ...descriptor.props, style: [descriptor.props.style, panelStyle] }}
       >
         {@render drawerContent?.({
           state,
           descriptors,
           navigation: handle,
         })}
-      </Animated.View>
+      </view>
     {:else}
-      <symbiote-view p={descriptor.props}>
+      <view p={descriptor.props}>
         {@render drawerContent?.({
           state,
           descriptors,
           navigation: handle,
         })}
-      </symbiote-view>
+      </view>
     {/if}
   {/if}
 {/snippet}
 
-<symbiote-view p={rootProps}>
-  <symbiote-text p={SCREEN_REGISTRY_HOST_PROPS}>
+<view p={rootProps}>
+  <text p={SCREEN_REGISTRY_HOST_PROPS}>
     {@render children?.()}
-  </symbiote-text>
+  </text>
   {#each order as slot (slot)}
     {#if slot === 'content'}
       {@render contentSlot()}
@@ -538,7 +537,7 @@
       {@render panelSlot()}
     {/if}
   {/each}
-</symbiote-view>
+</view>
 
 <!-- --- Explicit gap list vs the real react-native-gesture-handler + react-native-reanimated
      @react-navigation/drawer (confirmed against its current docs, mirrored verbatim from the

package/build/svelte/registry-host.js

@@ -12,11 +12,11 @@
 //
 // therefore compiles to `from_tree([marker, ' ', marker])`, and each ' ' becomes an RCTRawText
 // engine node parented to whatever host tag holds the `{@render children?.()}` call. Inside a
-// plain `symbiote-view` that is the invalid "text outside a <Text> component" shape; inside
+// plain `view` that is the invalid "text outside a <text> component" shape; inside
 // RNSScreenStack it is worse, since react-native-screens' native side expects only RNSScreen
 // children there.
 //
-// So the markers are rendered inside a zero-size `symbiote-text` instead: raw text inside an
+// So the markers are rendered inside a zero-size `text` instead: raw text inside an
 // RCTText is LEGAL, which turns the hazard from a device crash into a no-op and makes it
 // structurally impossible rather than a rule app authors have to remember. The cost is one
 // collapsed, non-interactive RCTText per navigator.

package/build/svelte/stack/index.svelte

@@ -15,7 +15,7 @@
   // HOW SCREENS ARE DISCOVERED: not by reading `children`, which Svelte hands over as an opaque
   // Snippet - the markers register themselves through the context collector (../screen-registry.ts)
   // while the snippet renders, and the route list derives from that. The snippet is rendered
-  // inside a collapsed `symbiote-text` (../registry-host.ts) so whitespace between two markers
+  // inside a collapsed `text` (../registry-host.ts) so whitespace between two markers
   // can never become an illegal raw-text child of a native view.
 
   // Route keys must be unique per Stack INSTANCE (Svelte has no useId); a module counter is the
@@ -233,10 +233,10 @@
   }
 </script>
 
-<symbiote-view p={STACK_ROOT_PROPS}>
-  <symbiote-text p={SCREEN_REGISTRY_HOST_PROPS}>
+<view p={STACK_ROOT_PROPS}>
+  <text p={SCREEN_REGISTRY_HOST_PROPS}>
     {@render children?.()}
-  </symbiote-text>
+  </text>
   <svelte:element
     this={RNS_SCREEN_STACK_VIEW_NAME}
     {@attach hostProps(stackProps)}
@@ -258,4 +258,4 @@
       {/if}
     {/each}
   </svelte:element>
-</symbiote-view>
+</view>

package/build/svelte/tabs/index.svelte

@@ -4,8 +4,8 @@
   // with the React/Vue/Angular entries; here Svelte supplies the lifecycle - `$state.raw` for the
   // router (its twin of useReducer), a module counter for route-key generation, `export
   // function`s for the jumpTo/setParams handle - plus the Descriptor bridge for the tab-bar leaf.
-  // Unlike Stack, a bottom-tabs bar is a PURE-JS UI: it paints ordinary `symbiote-view`/
-  // `symbiote-text` primitives via the shared render fn, so there is no react-native-screens
+  // Unlike Stack, a bottom-tabs bar is a PURE-JS UI: it paints ordinary `view`/
+  // `text` primitives via the shared render fn, so there is no react-native-screens
   // ViewConfig to register here - Tab needs no `../../register` import.
   //
   // Screens are discovered through the context collector (../screen-registry.ts), not by reading
@@ -253,17 +253,17 @@
   });
 </script>
 
-<symbiote-view p={TAB_ROOT_PROPS}>
-  <symbiote-text p={SCREEN_REGISTRY_HOST_PROPS}>
+<view p={TAB_ROOT_PROPS}>
+  <text p={SCREEN_REGISTRY_HOST_PROPS}>
     {@render children?.()}
-  </symbiote-text>
-  <symbiote-view p={TAB_CONTENT_PROPS}>
+  </text>
+  <view p={TAB_CONTENT_PROPS}>
     {#if focusedScreen !== undefined}
       {@const FocusedComponent = focusedScreen.component}
       <NavigationScope value={focusedScreen.scope}>
         <FocusedComponent />
       </NavigationScope>
     {/if}
-  </symbiote-view>
-  <symbiote-view p={tabBar.props} bind:this={tabBarHost} />
-</symbiote-view>
+  </view>
+  <view p={tabBar.props} bind:this={tabBarHost} />
+</view>

package/build/vue/drawer/index.js

@@ -391,7 +391,7 @@ const DrawerImpl = defineComponent((_props, { attrs: rawAttrs, slots, expose })
         const drawerChildren = order
             .map(renderSlot)
             .filter((element) => element !== null);
-        return h('symbiote-view', { style: root.props.style, ...panResponder.panHandlers }, drawerChildren);
+        return h('view', { style: root.props.style, ...panResponder.panHandlers }, drawerChildren);
     };
 }, { name: 'Drawer', inheritAttrs: false });
 export const Drawer = Object.assign(DrawerImpl, { Screen: DrawerScreen });

package/build/vue/tabs/index.js

@@ -4,7 +4,7 @@
 // router state (Vue's twin of useReducer), useId for route-key generation, expose() for the
 // jumpTo/setParams handle - plus the descriptor bridge for the tab-bar leaf, like Stack's header
 // config (stack.ts). Unlike Stack, a bottom-tabs bar is a PURE-JS UI: it paints ordinary
-// `symbiote-view`/`symbiote-text` primitives via the shared render fn, so there is no
+// `view`/`text` primitives via the shared render fn, so there is no
 // react-native-screens ViewConfig to register here - Tab needs no `../register` import.
 import { defineComponent, h, nextTick, onUnmounted, shallowRef, useId, } from '@vue/runtime-core';
 import { descriptorToVue, normalizeVueAttrs } from '@symbiote-native/vue';
@@ -226,8 +226,8 @@ const TabImpl = defineComponent((_props, { attrs: rawAttrs, slots, expose }) =>
             // NavigationScope provided just above (useRoute / useTabNavigation).
             () => h(focusedEntry.component))
             : null;
-        return h('symbiote-view', { style: TAB_ROOT_STYLE }, [
-            h('symbiote-view', { style: TAB_CONTENT_STYLE }, content === null ? [] : [content]),
+        return h('view', { style: TAB_ROOT_STYLE }, [
+            h('view', { style: TAB_CONTENT_STYLE }, content === null ? [] : [content]),
             tabBar,
         ]);
     };

package/build-ngc/angular/drawer/index.js

@@ -21,7 +21,15 @@
 //
 // RESOLVED (see stack.ts's header, identical reasoning): `'Drawer'` has an `ANCHOR_HOST_COMPONENTS`
 // entry in `adapters/angular/src/renderer.ts`, so a real device build paints `<Drawer>` correctly
-// as a nested tag. `View`/`AnimatedView`, imported below, were already anchor-hosted.
+// as a nested tag. `AnimatedView`, imported below, was already anchor-hosted.
+//
+// RAW NATIVE TAGS + NO_ERRORS_SCHEMA (see stack.ts's and tabs.ts's identical header note):
+// `<view>` is a non-dashed raw tag, and `CUSTOM_ELEMENTS_SCHEMA` only relaxes tags containing a
+// "-" (confirmed against `.vendors/angular/packages/compiler/src/schema/
+// dom_element_schema_registry.ts`'s `hasElement`). The previous `View` import (`ViewHost`
+// re-exported under that alias) never actually matched `<view>` here despite the identical
+// selector — device-observed via `ngc`, not `tsc`/vitest — and was removed as dead (ngc's own
+// NG8113 flagged it unused).
 //
 // DRAWER CONTENT PROJECTION: react/drawer.ts's `renderDrawerContent` is a render-PROP callback
 // (`(props) => ReactNode`) - per CLAUDE.md's <prop_types_split_agnostic_vs_per_adapter>, a
@@ -30,10 +38,10 @@
 // context object, NOT a callback @Input(): `<Drawer><ng-template #drawerContent let-ctx>...
 // {{ ctx.state }}...</ng-template></Drawer>`, read here via `@ContentChild('drawerContent', {read:
 // TemplateRef})`.
-import { ChangeDetectionStrategy, Component, ContentChild, ContentChildren, Input, QueryList, TemplateRef, computed, inject, signal, untracked, } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ContentChild, ContentChildren, Input, NO_ERRORS_SCHEMA, QueryList, TemplateRef, computed, inject, signal, untracked, } from '@angular/core';
 import { NgComponentOutlet, NgTemplateOutlet } from '@angular/common';
 import { PanResponder, dlog, flattenStyle, } from '@symbiote-native/engine';
-import { Animated, AnimatedView, SymbioteHostPropsDirective, View, WindowDimensionsService, } from '@symbiote-native/angular';
+import { Animated, AnimatedView, SymbioteHostPropsDirective, WindowDimensionsService, } from '@symbiote-native/angular';
 import { DRAWER_DEFAULT_OVERLAY_COLOR, NAVIGATION_EVENT_BLUR, NAVIGATION_EVENT_FOCUS, createInitialDrawerRouterState, createNavigationEmitter, diffFocusedRoute, drawerChildOrder, drawerRouterReducer, isDrawerAnimated, renderDrawer, resolveDragProgress, resolveDrawerGeometry, resolveDrawerSlotInterpolation, resolveSwipeIntent, shouldClaimDrawerSwipe, } from '../../core';
 import { NavigationScopeDirective } from '../navigation-scope.directive';
 import { DrawerScreenDirective } from '../drawer-screen.directive';
@@ -359,7 +367,7 @@ export class Drawer {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: Drawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: Drawer, isStandalone: true, selector: "Drawer", inputs: { initialRouteName: "initialRouteName", drawerStyle: "drawerStyle", drawerType: "drawerType", drawerPosition: "drawerPosition", drawerWidth: "drawerWidth", overlayColor: "overlayColor", swipeEnabled: "swipeEnabled", swipeEdgeWidth: "swipeEdgeWidth", swipeMinDistance: "swipeMinDistance", swipeMinVelocity: "swipeMinVelocity" }, queries: [{ propertyName: "drawerContentTemplate", first: true, predicate: ["drawerContent"], descendants: true, read: TemplateRef }, { propertyName: "drawerScreenChildren", predicate: DrawerScreenDirective }], usesOnChanges: true, ngImport: i0, template: `
     @if (state(); as currentState) {
-      <View [style]="rootStyle()" [symbioteHostProps]="rootPanHandlers()">
+      <view [style]="rootStyle()" [symbioteHostProps]="rootPanHandlers()">
         @for (slot of slotOrder(); track slot) {
           @switch (slot) {
             @case ('content') {
@@ -403,27 +411,27 @@ export class Drawer {
             }
           }
         }
-      </View>
+      </view>
     }
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NavigationScopeDirective, selector: "[symbioteNavigationScope]", inputs: ["symbioteNavigationScope", "navigation", "emitter"] }, { kind: "directive", type: SymbioteHostPropsDirective, selector: "[symbioteHostProps]", inputs: ["symbioteHostProps"], exportAs: ["symbioteHost"] }, { kind: "component", type: View, selector: "symbiote-view, View" }, { kind: "component", type: AnimatedView, selector: "AnimatedView, symbiote-animated-view", inputs: ["style", "animatedProps", "passthroughAnimatedPropExplicitValues"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NavigationScopeDirective, selector: "[symbioteNavigationScope]", inputs: ["symbioteNavigationScope", "navigation", "emitter"] }, { kind: "directive", type: SymbioteHostPropsDirective, selector: "[symbioteHostProps]", inputs: ["symbioteHostProps"], exportAs: ["symbioteHost"] }, { kind: "component", type: AnimatedView, selector: "AnimatedView, symbiote-animated-view", inputs: ["style", "testID", "animatedProps", "passthroughAnimatedPropExplicitValues"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: Drawer, decorators: [{
             type: Component,
             args: [{
                     selector: 'Drawer',
                     standalone: true,
+                    schemas: [NO_ERRORS_SCHEMA],
                     imports: [
                         NgComponentOutlet,
                         NgTemplateOutlet,
                         NavigationScopeDirective,
                         SymbioteHostPropsDirective,
-                        View,
                         AnimatedView,
                     ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
     @if (state(); as currentState) {
-      <View [style]="rootStyle()" [symbioteHostProps]="rootPanHandlers()">
+      <view [style]="rootStyle()" [symbioteHostProps]="rootPanHandlers()">
         @for (slot of slotOrder(); track slot) {
           @switch (slot) {
             @case ('content') {
@@ -467,7 +475,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             }
           }
         }
-      </View>
+      </view>
     }
   `,
                 }]