@symbiote-native/vue 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 A. Prokopenko
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,142 @@
+# @symbiote-native/vue
+
+The **Vue 3 adapter** for [SymbioteJS](../../README.md) — render real native iOS/Android views from
+Vue, on the *same* untouched core as React, with React Native's own renderer never in the path. It
+is a `@vue/runtime-core` `createRenderer` whose nodeOps map each mutation onto the engine's
+four-call API; `@symbiote-native/engine` does the clone-on-write commit into Fabric.
+
+Vue is the **proof the core is genuinely framework-agnostic** (milestone R4): a second, non-React,
+mutation-oriented framework driving the already-validated engine.
+
+<div align="center">
+
+![Vue 3 driving real native iOS views through SymbioteJS](../../assets/vue-demo.gif)
+
+</div>
+
+> New to SymbioteJS? The [root README](../../README.md) has the architecture.
+
+---
+
+## Use it
+
+The native entry reaches the *same* `registerRunnable` seam as React — only the adapter changes. It
+hands the surface's `rootTag` to `mount` from `@symbiote-native/vue`, which drives the engine through Vue's
+`createRenderer`:
+
+```js
+// index.js
+import { AppRegistry as RNAppRegistry } from 'react-native';
+import { mount } from '@symbiote-native/vue';
+import App from './App';
+import { name as appName } from './app.json';
+
+// registerRunnable (not registerComponent): RN stores a raw mount callback and never renders
+// it with its own renderer. We mount the Vue app onto the surface's rootTag.
+RNAppRegistry.registerRunnable(appName, ({ rootTag }) => {
+  mount(rootTag, App);
+});
+```
+
+The app is ordinary Vue — it just imports primitives from `@symbiote-native/vue` instead of
+`react-native`. A tap→increment counter, authored in TSX:
+
+```jsx
+import { ref } from '@vue/runtime-core';
+import { View, Text, Pressable } from '@symbiote-native/vue';
+
+export default {
+  setup() {
+    const count = ref(0);
+    return () => (
+      <View style={{ padding: 24 }}>
+        <Text>Taps: {count.value}</Text>
+        <Pressable onPress={() => count.value++}>
+          <Text>Tap me</Text>
+        </Pressable>
+      </View>
+    );
+  },
+};
+```
+
+### Two example apps
+
+The full canary exists in two flavors — both render the same surface as the React reference, and
+the demo above is the first one running on the iOS simulator:
+
+- [`examples/vue-tsx`](../../examples/vue-tsx) — authored in **TSX**.
+- [`examples/vue-sfc`](../../examples/vue-sfc) — authored in **single-file components**, compiled by
+  a per-framework Metro transformer.
+
+---
+
+## Parity — and the one gap
+
+Both adapters reach the same primitives, runtime modules, `Animated` on both drivers, gestures,
+accessibility, and the `VirtualizedList` family. That parity is **structural, not hand-copied**: the
+component logic (state machines + render functions) is written **once** in `@symbiote-native/components`,
+and each adapter supplies only its lifecycle (Vue's `ref`/`watch` + the descriptor→`h()` bridge).
+
+The one deliberate gap is third-party **React component** packages such as
+`@react-native-community/slider` used directly. Their body calls React hooks off the React
+dispatcher, so they run only under the React adapter — under Vue the dispatcher is null and they
+throw. SymbioteJS makes the *native view* framework-agnostic, not the library's React *component*; such
+a view becomes reachable from Vue only through a thin wrapper over the same `createNode`-by-ViewConfig
+path SymbioteJS uses for its own primitives. `@symbiote-native/slider` (this repo's own wrapper around
+`@react-native-community/slider`) *does* ship a real Vue build (`@symbiote-native/slider/vue`) through
+exactly that path — it's what makes this one third-party native view usable from Vue at all; any
+*other* React-only component package stays React-adapter-only until it gets the same treatment.
+
+---
+
+## A Vue-specific gotcha — async commit timing
+
+Vue batches commits on a microtask (every mutation schedules one `completeRoot`), so a node's
+Fabric tag is assigned *after* `onMounted` / `watch(flush:'post')` runs. A native bind that reads
+the tag at lifecycle time (native-driver `Animated`, sticky-header scroll attach, `TextInput`
+autoFocus) would race the commit and silently no-op — while the JS-path headless test stays green.
+React doesn't hit this because `react-reconciler` commits synchronously.
+
+The fix lives in the engine: `whenCommitted(node, action)` runs `action` now if the node already
+has a tag, else after the commit that assigns it. Any native/imperative call wired at Vue lifecycle
+time must go through it. This is the only place the Vue adapter's timing differs from React's — see
+the `vue-adapter-reactivity` notes and `core/engine/src/post-commit.ts`.
+
+---
+
+## Run it
+
+Each example is a stock React Native 0.86 app — the steps are identical to the
+[React adapter](../react/README.md#run-it), just swap the directory:
+
+```bash
+cd examples/vue-tsx            # or examples/vue-sfc
+npm install
+bundle install                 # first time only — installs CocoaPods itself
+bundle exec pod install        # fetch native pods
+
+# terminal 1 — Metro (DEBUG=1 turns on diagnostic logs)
+DEBUG=1 npm start --reset-cache
+
+# terminal 2 — build + launch
+npm run ios                    # iOS simulator
+npm run android                # Android emulator
+```
+
+---
+
+## Test it
+
+```bash
+pnpm test                      # vitest, from the workspace root — headless, fake Fabric slot
+
+cd examples/vue-tsx
+npm run e2e:build:ios          # build the app for Detox
+npm run e2e:test:ios           # run the canary journeys on the iOS simulator
+# …or the android equivalents: e2e:build:android / e2e:test:android
+```
+
+The headless suite includes Vue regression guards for the async-commit gotcha above (native-driver
+`Animated`, sticky scroll, autoFocus). Why testing comes for free: see
+[Testing](../../README.md#testing).

package/build/components/activity-indicator/index.android.d.ts

@@ -0,0 +1,4 @@
+export type { IActivityIndicatorProps } from './shared';
+export declare const ActivityIndicator: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/build/components/activity-indicator/index.android.js

@@ -0,0 +1,10 @@
+// ActivityIndicator on Android: AndroidProgressBar needs `styleAttr` (it drives the
+// ProgressBar's setStyle(); without it the view throws "setStyle() not called") and
+// `indeterminate: true`, and its default color is the theme (null). Metro picks this on an
+// Android host; no Platform.OS read. Mirrors the React adapter's Android binding. See ADR 0020.
+import { createActivityIndicator } from './shared';
+export const ActivityIndicator = createActivityIndicator({
+    // RN: `color = Platform.OS === 'ios' ? GRAY : null`. Android lets the theme color it.
+    defaultColor: null,
+    nativeExtras: { styleAttr: 'Normal', indeterminate: true },
+});

package/build/components/activity-indicator/index.d.ts

@@ -0,0 +1 @@
+export * from './index.ios';

package/build/components/activity-indicator/index.ios.d.ts

@@ -0,0 +1,4 @@
+export type { IActivityIndicatorProps } from './shared';
+export declare const ActivityIndicator: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/build/components/activity-indicator/index.ios.js

@@ -0,0 +1,10 @@
+// ActivityIndicator on iOS: RCTActivityIndicatorView takes the size enum + a GRAY default
+// color and no extra native props. Also the base (activity-indicator.ts re-exports it) for
+// headless / web. Mirrors the React adapter's iOS binding. See ADR 0020.
+import { createActivityIndicator } from './shared';
+// RN's iOS default spinner color (Libraries/.../ActivityIndicator.js GRAY).
+const IOS_DEFAULT_COLOR = '#999999';
+export const ActivityIndicator = createActivityIndicator({
+    defaultColor: IOS_DEFAULT_COLOR,
+    nativeExtras: {},
+});

package/build/components/activity-indicator/index.js

@@ -0,0 +1,4 @@
+// Base / default ActivityIndicator. Re-exports the iOS build. Metro overrides this with
+// activity-indicator.ios.ts / .android.ts on a real host; under tsx / tsc / web the host
+// resolves here. Filename is the selector, no Platform.OS read. See ADR 0020.
+export * from './index.ios';

package/build/components/activity-indicator/shared.d.ts

@@ -0,0 +1,8 @@
+import type { IActivityIndicatorPlatform, IActivityIndicatorProps as IActivityIndicatorBaseProps } from '@symbiote-native/components';
+import type { IClassNameValue } from '@symbiote-native/engine';
+export type IActivityIndicatorProps = IActivityIndicatorBaseProps & {
+    class?: IClassNameValue;
+};
+export declare function createActivityIndicator(platform: IActivityIndicatorPlatform): import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/build/components/activity-indicator/shared.js

@@ -0,0 +1,48 @@
+// ActivityIndicator, the Vue lifecycle half. The render (size translation, wrapper +
+// spinner, color omission) lives framework-agnostic in @symbiote-native/components and is shared
+// verbatim with the React adapter; here Vue only normalizes inputs, calls the render fn,
+// and bridges the Descriptor to a vnode. No reactivity of its own; this component is
+// render-only (the spinner animates natively).
+//
+// Inputs arrive as attrs, not a typed props block, the same passthrough shape as
+// components.ts. RN's per-platform bits (iOS GRAY default; Android theme/null + styleAttr +
+// indeterminate) are supplied by the .ios/.android files via `IActivityIndicatorPlatform`.
+import { defineComponent } from '@vue/runtime-core';
+import { renderActivityIndicator } from '@symbiote-native/components';
+import { descriptorToVue } from '../../descriptor-to-vue';
+import { normalizeVueAttrs } from '../../utils/normalize-attrs';
+function normalizeSize(size) {
+    if (size === 'large')
+        return 'large';
+    if (typeof size === 'number')
+        return size;
+    return 'small';
+}
+// Narrow attrs.style to a plain ViewStyle object (assignable to the render fn's StyleProp
+// param) without a cast. Array/registered styles degrade to undefined; the engine's own
+// flatten handles those when an app passes them; the wrapper only needs the object form.
+function isViewStyleObject(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+export function createActivityIndicator(platform) {
+    return defineComponent({
+        name: 'ActivityIndicator',
+        inheritAttrs: false,
+        setup(_props, { attrs: rawAttrs }) {
+            return () => {
+                // Defaults match RN (animating / hidesWhenStopped true, size 'small'); the rest of
+                // attrs (testID, accessibility, onLayout) forwards onto the wrapper via passthrough.
+                const attrs = normalizeVueAttrs(rawAttrs);
+                const { animating, color, hidesWhenStopped, size, style, ...passthrough } = attrs;
+                return descriptorToVue(renderActivityIndicator({
+                    animating: animating !== false,
+                    hidesWhenStopped: hidesWhenStopped !== false,
+                    size: normalizeSize(size),
+                    color: typeof color === 'string' ? color : undefined,
+                    style: isViewStyleObject(style) ? style : undefined,
+                    passthrough,
+                }, platform));
+            };
+        },
+    });
+}

package/build/components/button.d.ts

@@ -0,0 +1,14 @@
+import { type IButtonProps as ICoreButtonProps } from '@symbiote-native/components';
+import type { IClassNameValue, ISymbioteEvent } from '@symbiote-native/engine';
+export type IButtonProps = Omit<ICoreButtonProps, 'onPress'> & {
+    class?: IClassNameValue;
+};
+type IButtonEmits = {
+    press: (event: ISymbioteEvent) => boolean;
+};
+export declare const Button: import("vue").DefineSetupFnComponent<IButtonProps, IButtonEmits, {}, Omit<ICoreButtonProps, "onPress"> & {
+    class?: IClassNameValue;
+} & {
+    onPress?: ((event: ISymbioteEvent) => any) | undefined;
+}, import("vue").PublicProps>;
+export {};

package/build/components/button.js

@@ -0,0 +1,59 @@
+// Button for Vue. The minimal cross-platform button in RN's iOS shape (Button.js): a
+// TouchableOpacity wrapping a Text. The base text style, the role constant, and the color fold are
+// shared in @symbiote-native/components/view; here Vue only composes its TouchableOpacity + Text and
+// forwards the native-only props. The Vue twin of the React adapter's Button.
+import { defineComponent, h } from '@vue/runtime-core';
+import { BUTTON_ACCESSIBILITY_ROLE, resolveButtonTextStyle, } from '@symbiote-native/components';
+import { Text } from '../components';
+import { TouchableOpacity } from './touchable';
+import { normalizeVueAttrs } from '../utils/normalize-attrs';
+// The props Button consumes / re-maps itself; everything else (accessibility, aria, TV-focus,
+// testID, nativeID) forwards to the TouchableOpacity. `title` becomes the Text child; onPress and
+// disabled re-map; touchSoundDisabled maps to the pressable's android_disableSound.
+const HANDLED = [
+    'title',
+    'color',
+    'touchSoundDisabled',
+    'accessibilityRole',
+    'accessible',
+    'accessibilityState',
+];
+function forwardAttrs(attrs) {
+    const result = {};
+    for (const key of Object.keys(attrs)) {
+        if (!HANDLED.includes(key))
+            result[key] = attrs[key];
+    }
+    return result;
+}
+export const Button = defineComponent((_props, { attrs: rawAttrs, emit }) => {
+    return () => {
+        const attrs = normalizeVueAttrs(rawAttrs);
+        const title = typeof attrs.title === 'string' ? attrs.title : '';
+        const color = typeof attrs.color === 'string' ? attrs.color : undefined;
+        const disabled = attrs.disabled === true ? true : undefined;
+        const touchSoundDisabled = attrs.touchSoundDisabled === true ? true : undefined;
+        const textStyle = resolveButtonTextStyle(color, disabled);
+        // RN's Button sets role=button, is accessible, and propagates the disabled accessibility
+        // state. The caller's props pass through, but Button's fixed role / accessible / disabled-
+        // state win, applied after the forwarded spread. touchSoundDisabled → android_disableSound.
+        const touchableProps = {
+            ...forwardAttrs(attrs),
+            disabled,
+            android_disableSound: touchSoundDisabled,
+            accessibilityRole: BUTTON_ACCESSIBILITY_ROLE,
+            accessible: true,
+            accessibilityState: { disabled },
+            onPress: (event) => emit('press', event),
+        };
+        return h(TouchableOpacity, touchableProps, {
+            default: () => [h(Text, { style: textStyle }, () => title)],
+        });
+    };
+}, {
+    name: 'Button',
+    inheritAttrs: false,
+    emits: {
+        press: (_event) => true,
+    },
+});

package/build/components/drawer-layout-android/index.android.d.ts

@@ -0,0 +1,8 @@
+import type { IDrawerLayoutAndroidEmits, IDrawerLayoutAndroidProps } from './shared';
+export type { IDrawerPosition, IDrawerLockMode, IKeyboardDismissMode, IDrawerState, IDrawerSlideEvent, IDrawerLayoutAndroidEmits, IDrawerLayoutAndroidProps, IDrawerLayoutAndroidHandle, } from './shared';
+export declare const DrawerLayoutAndroid: import("vue").DefineSetupFnComponent<IDrawerLayoutAndroidProps, IDrawerLayoutAndroidEmits, {}, IDrawerLayoutAndroidProps & {
+    onDrawerOpen?: (() => any) | undefined;
+    onDrawerClose?: (() => any) | undefined;
+    onDrawerSlide?: ((event: import("@symbiote/components").IDrawerSlideEvent) => any) | undefined;
+    onDrawerStateChanged?: ((state: import("@symbiote/components").IDrawerState) => any) | undefined;
+}, import("vue").PublicProps>;

package/build/components/drawer-layout-android/index.android.js

@@ -0,0 +1,144 @@
+// DrawerLayoutAndroid on Android: the real build, the Vue twin of the React adapter's
+// index.android.ts. AndroidDrawerLayout is an ordinary Fabric host node committing through the same
+// childSet as the rest of the tree (no per-library glue; shared derives the view's events from its
+// ViewConfig, so we render the RAW Fabric name 'AndroidDrawerLayout'). The platform-invariant math —
+// the host prop bag + the content/navigation wrapper styles, the slide/state event normalization,
+// the imperative open/close handle, and the view/command NAMES — lives in @symbiote/components,
+// shared verbatim with React; here Vue supplies only the lifecycle: a shallowRef holds the host node
+// (so the engine's mirror resolves it for the imperative commands), a `drawerOpened` ref gates the
+// navigation wrapper's pointerEvents, and expose() wires the imperative handle.
+//
+// Child order matches RN exactly: content FIRST, navigation SECOND ({childrenWrapper}{drawerViewWrapper}).
+// Content is the DEFAULT slot; the drawer is the `navigationView` slot (the Vue twin of React's
+// children / renderNavigationView). Inputs arrive as attrs (untyped), each narrowed with a runtime
+// guard rather than a cast. The onDrawer* handlers are wrapped (drawerOpened + normalization), so they
+// are stripped from the forwarded attrs; everything else (testID / accessibility / aria-*) folds via
+// resolveAccessibilityProps onto the host. Metro picks this file on an Android host; no Platform.OS read.
+// device-verify-pending: the AndroidDrawerLayout name + openDrawer/closeDrawer commands are
+// RN-source-confirmed, not yet exercised on a real Android host.
+import { defineComponent, h, ref, shallowRef } from '@vue/runtime-core';
+import { buildDrawerHandle, offsetFromSlide, resolveAccessibilityProps, resolveDrawerLayout, stateFromChange, } from '@symbiote/components';
+import { dlog, isSymbioteNode, } from '@symbiote/engine';
+import { View } from '../../components';
+import { normalizeVueAttrs } from '../../utils/normalize-attrs';
+function asNumber(value) {
+    return typeof value === 'number' ? value : undefined;
+}
+function asString(value) {
+    return typeof value === 'string' ? value : undefined;
+}
+function asDrawerPosition(value) {
+    return value === 'left' || value === 'right' ? value : undefined;
+}
+function asDrawerLockMode(value) {
+    return value === 'unlocked' || value === 'locked-closed' || value === 'locked-open'
+        ? value
+        : undefined;
+}
+function asKeyboardDismissMode(value) {
+    return value === 'none' || value === 'on-drag' ? value : undefined;
+}
+function isStyleProp(value) {
+    return typeof value === 'object' && value !== null;
+}
+// The typed fields the lifecycle consumes/re-emits (resolveDrawerLayout folds the drawer* props onto
+// the host) and the onDrawer* handlers (wrapped here, never forwarded raw); everything else (testID,
+// accessibility, aria-*) forwards onto the host via passthrough.
+const HANDLED_ATTRS = [
+    'drawerWidth',
+    'drawerPosition',
+    'drawerLockMode',
+    'keyboardDismissMode',
+    'drawerBackgroundColor',
+    'statusBarBackgroundColor',
+    'style',
+    'onDrawerOpen',
+    'onDrawerClose',
+    'onDrawerSlide',
+    'onDrawerStateChanged',
+];
+function forwardAttrs(attrs) {
+    const result = {};
+    for (const key of Object.keys(attrs)) {
+        if (!HANDLED_ATTRS.includes(key))
+            result[key] = attrs[key];
+    }
+    return result;
+}
+export const DrawerLayoutAndroid = defineComponent((_props, { slots, attrs: rawAttrs, expose, emit }) => {
+    // shallowRef, NOT ref: the engine node must be held by IDENTITY. A plain ref() runs the node
+    // through Vue's toReactive(), handing back a reactive Proxy the engine's mirror (a WeakMap keyed
+    // on the raw node) can't resolve, so openDrawer/closeDrawer would silently no-op. Same rule as
+    // the Switch / ScrollView host node (see .claude/skills/vue-adapter-reactivity).
+    const nodeRef = shallowRef(null);
+    const setNodeRef = (el) => {
+        nodeRef.value = isSymbioteNode(el) ? el : null;
+    };
+    // drawerOpened gates the navigation wrapper's pointerEvents (RN _onDrawerOpen/_onDrawerClose
+    // setState): closed -> 'none' so the off-screen drawer never intercepts touches. A plain ref is
+    // fine here — it holds a boolean, not an engine node; the shallowRef rule is only for the node.
+    const drawerOpened = ref(false);
+    // The imperative handle reads the node through a LAZY getter (() => nodeRef.value), not the node
+    // captured once: it is null until the element commits. expose() makes it the value a parent ref
+    // sees — the Vue twin of React's useImperativeHandle(ref, buildDrawerHandle(…)).
+    expose(buildDrawerHandle(() => nodeRef.value));
+    return () => {
+        const attrs = normalizeVueAttrs(rawAttrs);
+        const handleDrawerOpen = () => {
+            dlog('Vue DrawerLayoutAndroid onDrawerOpen');
+            drawerOpened.value = true;
+            emit('drawerOpen');
+        };
+        const handleDrawerClose = () => {
+            dlog('Vue DrawerLayoutAndroid onDrawerClose');
+            drawerOpened.value = false;
+            emit('drawerClose');
+        };
+        const handleDrawerSlide = (event) => {
+            dlog('Vue DrawerLayoutAndroid onDrawerSlide');
+            emit('drawerSlide', { offset: offsetFromSlide(event) });
+        };
+        const handleDrawerStateChanged = (event) => {
+            emit('drawerStateChanged', stateFromChange(event));
+        };
+        const resolved = resolveDrawerLayout({
+            drawerWidth: asNumber(attrs.drawerWidth),
+            drawerPosition: asDrawerPosition(attrs.drawerPosition),
+            drawerLockMode: asDrawerLockMode(attrs.drawerLockMode),
+            keyboardDismissMode: asKeyboardDismissMode(attrs.keyboardDismissMode),
+            drawerBackgroundColor: asString(attrs.drawerBackgroundColor),
+            statusBarBackgroundColor: asString(attrs.statusBarBackgroundColor),
+            drawerOpened: drawerOpened.value,
+            style: isStyleProp(attrs.style) ? attrs.style : undefined,
+            passthrough: resolveAccessibilityProps(forwardAttrs(attrs)),
+        });
+        // RN's mainSubview: content wrapped in an absolute full-screen box (the default slot).
+        const content = h(View, { style: resolved.contentWrapperStyle }, () => slots.default !== undefined ? slots.default() : []);
+        // RN's drawerSubview: the navigation view (the `navigationView` slot) wrapped, drawerWidth-wide,
+        // painted with drawerBackgroundColor, untouchable until opened.
+        const navigation = h(View, {
+            style: resolved.navigationWrapperStyle,
+            pointerEvents: resolved.navigationPointerEvents,
+        }, () => (slots.navigationView !== undefined ? slots.navigationView() : []));
+        dlog(`Vue DrawerLayoutAndroid render width=${String(asNumber(attrs.drawerWidth))} ` +
+            `opened=${drawerOpened.value}`);
+        // Child order matches RN exactly: content FIRST, navigation SECOND.
+        return h(resolved.viewName, {
+            ...resolved.hostProps,
+            ref: setNodeRef,
+            onDrawerOpen: handleDrawerOpen,
+            onDrawerClose: handleDrawerClose,
+            onDrawerSlide: handleDrawerSlide,
+            onDrawerStateChanged: handleDrawerStateChanged,
+        }, [content, navigation]);
+    };
+}, {
+    name: 'DrawerLayoutAndroid',
+    inheritAttrs: false,
+    emits: {
+        drawerOpen: () => true,
+        drawerClose: () => true,
+        drawerSlide: (_event) => true,
+        drawerStateChanged: (_state) => true,
+    },
+});

package/build/components/drawer-layout-android/index.d.ts

@@ -0,0 +1,8 @@
+import type { IDrawerLayoutAndroidEmits, IDrawerLayoutAndroidProps } from './shared';
+export type { IDrawerPosition, IDrawerLockMode, IKeyboardDismissMode, IDrawerState, IDrawerSlideEvent, IDrawerLayoutAndroidEmits, IDrawerLayoutAndroidProps, IDrawerLayoutAndroidHandle, } from './shared';
+export declare const DrawerLayoutAndroid: import("vue").DefineSetupFnComponent<IDrawerLayoutAndroidProps, IDrawerLayoutAndroidEmits, {}, IDrawerLayoutAndroidProps & {
+    onDrawerOpen?: (() => any) | undefined;
+    onDrawerClose?: (() => any) | undefined;
+    onDrawerSlide?: ((event: import("@symbiote/components").IDrawerSlideEvent) => any) | undefined;
+    onDrawerStateChanged?: ((state: import("@symbiote/components").IDrawerState) => any) | undefined;
+}, import("vue").PublicProps>;

package/build/components/drawer-layout-android/index.js

@@ -0,0 +1,36 @@
+// DrawerLayoutAndroid: base / off-Android fallback (the Vue twin of the React adapter's index.ts).
+// AndroidDrawerLayout is Android-only, so everywhere except an Android host — where Metro picks
+// index.android.ts — we render the content (the default slot) in a plain container and drop the
+// navigation slot (RN's DrawerLayoutAndroidFallback shape). The imperative open/close are silent
+// no-ops; there is no drawer to drive. The filename is the selector; no Platform.OS read. The Vue
+// barrel imports './drawer-layout-android', which resolves here under tsx/tsc and to the .android
+// file under Metro. See ADR 0019.
+import { defineComponent, h } from '@vue/runtime-core';
+import { dlog } from '@symbiote/engine';
+import { View } from '../../components';
+import { normalizeVueAttrs } from '../../utils/normalize-attrs';
+function isStyleProp(value) {
+    return typeof value === 'object' && value !== null;
+}
+export const DrawerLayoutAndroid = defineComponent((_props, { slots, attrs, expose }) => {
+    const handle = {
+        openDrawer: () => dlog('Vue DrawerLayoutAndroid.openDrawer no-op: off Android'),
+        closeDrawer: () => dlog('Vue DrawerLayoutAndroid.closeDrawer no-op: off Android'),
+    };
+    expose(handle);
+    return () => {
+        dlog('Vue DrawerLayoutAndroid fallback: off-Android host, rendering content only');
+        const normalized = normalizeVueAttrs(attrs);
+        const style = isStyleProp(normalized.style) ? normalized.style : undefined;
+        return h(View, { style }, () => (slots.default !== undefined ? slots.default() : []));
+    };
+}, {
+    name: 'DrawerLayoutAndroid',
+    inheritAttrs: false,
+    emits: {
+        drawerOpen: () => true,
+        drawerClose: () => true,
+        drawerSlide: (_event) => true,
+        drawerStateChanged: (_state) => true,
+    },
+});

package/build/components/drawer-layout-android/shared.d.ts

@@ -0,0 +1,18 @@
+import type { IStyleProp, IViewStyle } from '@symbiote/engine';
+import type { IAccessibilityProps, IAriaProps, IDrawerLockMode, IDrawerPosition, IDrawerSlideEvent, IDrawerState, IKeyboardDismissMode } from '@symbiote/components';
+export type { IDrawerPosition, IDrawerLockMode, IKeyboardDismissMode, IDrawerState, IDrawerSlideEvent, IDrawerLayoutAndroidHandle, } from '@symbiote/components';
+export interface IDrawerLayoutAndroidProps extends IAccessibilityProps, IAriaProps {
+    drawerWidth?: number;
+    drawerPosition?: IDrawerPosition;
+    drawerLockMode?: IDrawerLockMode;
+    keyboardDismissMode?: IKeyboardDismissMode;
+    drawerBackgroundColor?: string;
+    statusBarBackgroundColor?: string;
+    style?: IStyleProp<IViewStyle>;
+}
+export type IDrawerLayoutAndroidEmits = {
+    drawerOpen: () => boolean;
+    drawerClose: () => boolean;
+    drawerSlide: (event: IDrawerSlideEvent) => boolean;
+    drawerStateChanged: (state: IDrawerState) => boolean;
+};

package/build/components/drawer-layout-android/shared.js

@@ -0,0 +1,6 @@
+// Shared types for the Vue DrawerLayoutAndroid: the same Props/Handle contract the real Android
+// build (index.android.ts) and the off-Android fallback (index.ts) both implement. The
+// platform-agnostic enums + the imperative handle live in @symbiote/components (shared verbatim with
+// the React adapter, the single source of truth); this file adds only the Vue-facing prop surface.
+// Per ADR 0019 the filename selects the build; no Platform.OS read anywhere.
+export {};