@symbiote-native/vue 0.4.0 → 1.0.0

package/README.md

@@ -1,7 +1,7 @@
 # @symbiote-native/vue
 
 The **Vue 3 adapter** for [SymbioteNative](../../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
+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.
 
@@ -34,9 +34,23 @@ additionally needs a Metro transformer for `.vue` files (see
 
 ## 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`:
+The zero-config entry mirrors real Vue's own `createApp(App).mount(...)` idiom and wires the same
+RN-backed host seams React's `registerApp` does — this is what
+[`examples/vue-tsx`](../../examples/vue-tsx) and [`examples/vue-sfc`](../../examples/vue-sfc)
+actually use:
+
+```js
+// index.js
+import { createApp } from '@symbiote-native/vue/bootstrap';
+import App from './App';
+import { name as appName } from './app.json';
+
+createApp(App).mount(appName);
+```
+
+For anything the defaults don't cover, drive the lower-level seam directly — the same
+`registerRunnable` seam React uses, with `mount` from `@symbiote-native/vue` driving the engine
+through Vue's `createRenderer`:
 
 ```js
 // index.js
@@ -95,19 +109,19 @@ and each adapter supplies only its lifecycle (Vue's `ref`/`watch` + the descript
 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. SymbioteNative makes the *native view* framework-agnostic, not the library's React *component*; such
+throw. SymbioteNative 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 SymbioteNative 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
+`@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.
+_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
+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.
@@ -115,7 +129,8 @@ 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; the
-implementation is in `core/engine/src/post-commit.ts`.
+implementation is `whenCommitted` in `core/engine/src/commit.ts`, built on the generic hook
+registry in `core/engine/src/post-commit.ts`.
 
 ---
 

package/babel-jsx.cjs

@@ -0,0 +1,53 @@
+// The Babel plugins a Vue TSX/JSX app puts in its babel.config.js, as ONE list:
+//
+//   const symbioteVueJsx = require('@symbiote-native/vue/babel-jsx');
+//   module.exports = {
+//     presets: ['module:@react-native/babel-preset'],
+//     plugins: [...symbioteVueJsx(), myOtherPlugin],
+//   };
+//
+// A list rather than a preset, on purpose. `@vue/babel-plugin-jsx` MUST run before the RN preset's
+// React-JSX transform claims the same JSXElements, and Babel applies `plugins` before `presets` —
+// so it has to stay in the app's plugins array, where the app also controls its position relative
+// to its own plugins. A preset would move it after every plugin and silently change that order.
+//
+// The two entries are handed out together because either alone is broken:
+//
+//   lowering only        -> `symbiote-view` compiles to resolveComponent("symbiote-view"), a
+//                           component that resolves to nothing, with SLOT children an element path
+//                           never mounts. Blank subtree, no error.
+//   isCustomElement only -> nothing was rewritten, so <View> is still a Vue component and the whole
+//                           point (one component instance per node on ~73% of the tree) is unpaid.
+//
+// Same "both halves or nothing" invariant the SFC path states in metro-vue-transformer.cjs, and the
+// reason it is expressed as one require() here rather than two lines of documentation.
+//
+// @vue/babel-plugin-jsx is OUR dependency and require() resolves relative to this file, so the app
+// declares no extra devDependency — same reasoning as ./metro-css-parser.cjs.
+
+const vueJsx = require('@vue/babel-plugin-jsx');
+const lowerHostPrimitives = require('./babel-lower-host-primitives.cjs');
+
+// Every `symbiote-*` tag is an intrinsic the renderer resolves through descriptorFor, never a Vue
+// component — including one an app writes by hand, which is why this is a prefix test rather than a
+// list of the two tags the lowering emits.
+const SYMBIOTE_TAG_PREFIX = 'symbiote-';
+
+function isSymbioteIntrinsic(tag) {
+  return tag.startsWith(SYMBIOTE_TAG_PREFIX);
+}
+
+module.exports = function symbioteVueJsx(options = {}) {
+  return [
+    lowerHostPrimitives,
+    [
+      vueJsx,
+      {
+        ...options,
+        // Last, deliberately: an app may pass other @vue/babel-plugin-jsx options through, but
+        // overriding this one silently produces output this adapter cannot render.
+        isCustomElement: isSymbioteIntrinsic,
+      },
+    ],
+  ];
+};

package/babel-lower-host-primitives.cjs

@@ -0,0 +1,225 @@
+// Compile-time lowering of <View>/<Text> to the intrinsic tags the renderer maps to Fabric, for the
+// TSX/JSX authoring path. The SFC twin is the nodeTransform in metro-vue-transformer.cjs — same
+// rewrite, different vehicle, and until this existed TSX paid a tax SFC no longer did.
+//
+// WHY. Vue charges a full component instance even for a FUNCTIONAL component
+// (createComponentInstance + initProps + initSlots + setupRenderEffect). View and Text are ~73% of
+// the static tags in a real screen, so that is one instance per node on nearly three quarters of
+// the tree. Lowered, they become plain element vnodes the renderer's nodeOps handle directly.
+// Measured on the SFC path: 25-29% off all three create-shaped rows on device.
+//
+// Do NOT ship this plugin without also configuring @vue/babel-plugin-jsx's `isCustomElement` to
+// answer true for `symbiote-*` — see ./babel-jsx.cjs, which is why the two are handed out together
+// and should not be wired separately. Without it a lowered tag compiles to
+// `createVNode(resolveComponent("symbiote-view"), …, {default: () => […]})`: a component that
+// resolves to nothing, with slot children an element path would never mount.
+//
+// .cjs because Babel require()s it and this package is "type": "module".
+
+const SOURCE = '@symbiote-native/vue';
+
+// The tag map is the SHARED SPEC's, not this file's — four transforms each carried a copy before
+// it existed and they had already drifted. Only `intrinsic` is read: Vue applies the `id` ->
+// `nativeID` alias at RUNTIME (patchProp), because compile time reaches two of Vue's four paths to
+// a node. See the spec's own `aliases` comment.
+const {
+  HOST_PRIMITIVES,
+} = require('@symbiote-native/components/host-primitives');
+
+// A functional `style` keeps the RN idiom AND lowers, by being CALLED once per state at bag-build
+// time instead of being handed to a component that calls it per press.
+//
+
+const LOWERABLE = new Map(
+  Object.entries(HOST_PRIMITIVES).map(([name, spec]) => [
+    name,
+    {
+      intrinsic: spec.intrinsic,
+      observesState: spec.observesState === true,
+      intrinsicWhen: spec.intrinsicWhen,
+    },
+  ]),
+);
+
+// REFUSAL_CATEGORIES.dynamicIntrinsicChoice. A primitive whose spec entry carries `intrinsicWhen`
+// picks between TWO Fabric views by the value of one prop, and the transform prints a STATIC tag
+// name — so it can only choose when that value is a compile-time literal.
+//
+// This is not the unreadable-VALUE hazard wearing a new hat, and the difference decides how hard to
+// refuse: an unreadable value lands a prop wrong, which a later write can still correct; the wrong
+// choice here commits the wrong native view, and no prop write moves a node between views. So only
+// the two provable shapes resolve and everything else keeps the component.
+//
+// `multiline="true"` — a STRING attribute — is deliberately NOT one of them, though the component
+// would treat it as truthy. A string that reads as a boolean is the shape where an author and the
+// runtime disagree most often (`multiline="false"` is truthy), and refusing costs only the
+// optimisation while guessing costs the right view.
+//
+// Returns the tag to emit, or undefined to refuse.
+function intrinsicWhenFor(openingElement, entry) {
+  const choice = entry.intrinsicWhen;
+  if (choice === undefined) return entry.intrinsic;
+
+  let resolved = false;
+  for (const attribute of openingElement.attributes) {
+    // A spread may carry the selector prop, and the transform cannot see inside it. Nothing else
+    // in this loop can tell that apart from "the prop is absent", so it must refuse outright.
+    if (attribute.type === 'JSXSpreadAttribute') return undefined;
+    if (attribute.type !== 'JSXAttribute') continue;
+    if (attribute.name.type !== 'JSXIdentifier') continue;
+    if (attribute.name.name !== choice.prop) continue;
+
+    // A bare `multiline` with no value is JSX for `true`.
+    if (attribute.value === null || attribute.value === undefined) {
+      resolved = true;
+      continue;
+    }
+    if (attribute.value.type !== 'JSXExpressionContainer') return undefined;
+    const expression = attribute.value.expression;
+    if (expression.type !== 'BooleanLiteral') return undefined;
+    resolved = expression.value;
+  }
+
+  return resolved ? choice.intrinsic : entry.intrinsic;
+}
+
+// The shared spec's allow-list for `stateInTemplate`, spelled the same in all five transforms:
+// only a provably inert value shape lowers. `style={styleFn}` is an Identifier at compile time and
+// no transform can tell an object from a function, so anything that is not one of these refuses. A
+// narrow "refuse a function literal" reading passes every obvious test and then fails on the one
+// call site that hoists its style into a variable — which is what ActionButton does.
+const INERT_VALUE_TYPES = new Set([
+  'ObjectExpression',
+  'ArrayExpression',
+  'StringLiteral',
+  'NumericLiteral',
+  'BooleanLiteral',
+  'NullLiteral',
+  'TemplateLiteral',
+]);
+
+// A bare `style="x"` attribute value is a JSXText-ish literal and inert; `style={…}` is inert only
+// when the expression inside is.
+function isInertValueAttribute(value) {
+  if (value === null || value === undefined) return true;
+  if (value.type !== 'JSXExpressionContainer')
+    return INERT_VALUE_TYPES.has(value.type);
+  return INERT_VALUE_TYPES.has(value.expression.type);
+}
+
+// The JSX twin of metro-vue-transformer.cjs's refusesLowering — same three categories, different
+// AST. A primitive that owns state can lower only when the template does not read that state,
+// because a lowered element has no instance to read it from. Refusing is always safe; lowering a
+// button that reads `pressed` gives a button that renders and does not respond, on device, with
+// nothing red.
+function refusesLowering(openingElement, children, types) {
+  for (const attribute of openingElement.attributes) {
+    // `{...props}` — an attribute set this pass cannot enumerate, so it may hide a functional
+    // `style`. REFUSAL_CATEGORIES.unreadableAttributeSet.
+    if (attribute.type === 'JSXSpreadAttribute') return true;
+    if (attribute.type !== 'JSXAttribute') continue;
+    if (attribute.name.type !== 'JSXIdentifier') continue;
+
+    // REFUSAL_CATEGORIES.instanceBoundDirective. `ref` on a COMPONENT yields the component
+    // instance; on an element it yields the host node. Lowering silently changes which one the app
+    // receives, so a `pressableRef.value.measure()` starts reaching a different object — a runtime
+    // failure with nothing red at build time. Found by the shared verdict table, not by a Vue test.
+    if (attribute.name.name === 'ref') return true;
+
+    if (attribute.name.name !== 'style') continue;
+
+    // REFUSAL_CATEGORIES.stateInTemplate no longer fires on a `style` at all. Every shape is
+    // covered: an inert value rides through, and anything else is either called directly or handed
+    // to the runtime helper, which decides with a `typeof` what no compile-time analysis could.
+    // What still refuses is above (an unreadable attribute set) and below (a child reading state).
+    if (!isInertValueAttribute(attribute.value)) continue;
+  }
+
+  // A function child that TAKES an argument is the render-prop form, i.e. children as a function
+  // of press state. A zero-arity function child is an ordinary lazy child and lowers fine — the
+  // distinction the shared spec spells out for renderPropChild.
+  return children.some(child => {
+    if (child.type !== 'JSXExpressionContainer') return false;
+    const { expression } = child;
+    return (
+      (expression.type === 'ArrowFunctionExpression' ||
+        expression.type === 'FunctionExpression') &&
+      expression.params.length >= 1
+    );
+  });
+}
+
+// Every local name bound to a lowerable export of @symbiote-native/vue in THIS file, honouring
+// `import { View as Box }`. Matching bare tag names instead would rewrite an app's own <View>.
+function lowerableLocalNames(programPath) {
+  const names = new Map();
+  programPath.node.body.forEach(statement => {
+    if (
+      statement.type !== 'ImportDeclaration' ||
+      statement.source.value !== SOURCE
+    )
+      return;
+    statement.specifiers.forEach(specifier => {
+      if (specifier.type !== 'ImportSpecifier') return;
+      const imported =
+        specifier.imported.type === 'Identifier'
+          ? specifier.imported.name
+          : specifier.imported.value;
+      const entry = LOWERABLE.get(imported);
+      if (entry !== undefined) names.set(specifier.local.name, entry);
+    });
+  });
+  return names;
+}
+
+// Refusals apply ONLY to a primitive that owns state. View and Text still lower unconditionally,
+// and that remains deliberate: their only folds are kebab->camel and RN's Text defaults, both of
+// which moved into the renderer (normalizeVueAttrKey in patchProp, seedTextDefaults/textDefaultFor
+// in createElement) when the SFC lowering landed, so nothing a spread could hide is left. Adding a
+// refusal for them would make TSX diverge from SFC, which lowers them unconditionally too.
+module.exports = function lowerHostPrimitives({ types }) {
+  return {
+    name: 'symbiote-vue-lower-host-primitives',
+    visitor: {
+      Program(programPath) {
+        const names = lowerableLocalNames(programPath);
+        if (names.size === 0) return;
+        programPath.traverse({
+          JSXElement(elementPath) {
+            const { openingElement, closingElement } = elementPath.node;
+            const tag = openingElement.name;
+            if (tag.type !== 'JSXIdentifier') return;
+            const entry = names.get(tag.name);
+            if (entry === undefined) return;
+            // Resolved BEFORE the state refusal and outside its `observesState` gate: the two
+            // guard different things, and this one applies to a primitive that owns no state at
+            // all. Reading it as "another case for refusesLowering" would put it behind that flag
+            // and it would never run for TextInput.
+            const intrinsic = intrinsicWhenFor(openingElement, entry);
+            if (intrinsic === undefined) return;
+            if (
+              entry.observesState &&
+              refusesLowering(openingElement, elementPath.node.children, types)
+            )
+              return;
+            // A shadowing local binding (a parameter, or a `const View = …` in scope) is NOT our
+            // import even though the name matches. Only rewrite where the binding at this use site
+            // is still the module-level import.
+            const binding = elementPath.scope.getBinding(tag.name);
+            if (binding === undefined || binding.kind !== 'module') return;
+            // NO state-style expansion. A functional `style` reaches `routeProp` untouched and
+            // the engine resolves it at both values of `pressed` (`isStyleCallback`), so rewriting
+            // the attribute into a pair here would be this transform carrying BEHAVIOUR — what
+            // `tests/lowering-transform-carries-no-behaviour.test.ts` exists to keep out. Removed
+            // from BOTH Vue paths in one change: the SFC twin sees an expression as source text
+            // where this one has the AST, so a split removed from one and not the other is the
+            // exact drift `.claude/rules/adapter-parity-audit.md` records for this pair.
+            openingElement.name = types.jsxIdentifier(intrinsic);
+            if (closingElement)
+              closingElement.name = types.jsxIdentifier(intrinsic);
+          },
+        });
+      },
+    },
+  };
+};

package/build/bootstrap.js

@@ -3,7 +3,7 @@
 // AppRegistry actually get wired. Lives OUTSIDE the package's main barrel — see that file's
 // header for why anything importing react-native must stay there.
 import { AppRegistry as RNAppRegistry } from 'react-native';
-import { bootstrapHost } from '@symbiote-native/components/bootstrap';
+import { bootstrapHost, } from '@symbiote-native/components/bootstrap';
 import { AppRegistry, setHostRegistrar } from './modules/app-registry/index.js';
 // Mirrors real Vue's createApp(App).mount(selector) two-step idiom.
 export function createApp(App, options = {}) {

package/build/components/button.js

@@ -4,7 +4,7 @@
 // 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.js';
+import { HOST_TEXT } from '../components.js';
 import { TouchableOpacity } from './touchable.js';
 import { normalizeVueAttrs } from '../utils/normalize-attrs.js';
 // The props Button consumes / re-maps itself; everything else (accessibility, aria, TV-focus,
@@ -47,7 +47,9 @@ export const Button = defineComponent((_props, { attrs: rawAttrs, emit }) => {
             onPress: (event) => emit('press', event),
         };
         return h(TouchableOpacity, touchableProps, {
-            default: () => [h(Text, { style: textStyle }, () => title)],
+            // The intrinsic tag, not our <Text> component — see the note at HOST_VIEW. RN's Text
+            // defaults are seeded by the renderer for a bare tag (seedTextDefaults).
+            default: () => [h(HOST_TEXT, { style: textStyle }, title)],
         });
     };
 }, {

package/build/components/flat-list/index.js

@@ -56,7 +56,7 @@ function buildDelegateHandle(getInner) {
         recordInteraction: () => getInner()?.recordInteraction(),
     };
 }
-export const FlatList = defineComponent((props, { attrs, expose, emit, slots }) => {
+export const FlatList = defineComponent((props, { attrs, expose, emit, slots, }) => {
     const inner = shallowRef(null);
     const setInner = (instance) => {
         inner.value = isVirtualizedListHandle(instance) ? instance : null;
@@ -70,11 +70,17 @@ export const FlatList = defineComponent((props, { attrs, expose, emit, slots })
         return vnodeProps != null && typeof vnodeProps[onName] === 'function';
     };
     return () => {
-        const data = Array.isArray(props.data) ? props.data : [];
+        const data = Array.isArray(props.data)
+            ? props.data
+            : [];
         const keyExtractor = props.keyExtractor;
         const numColumns = typeof props.numColumns === 'number' ? props.numColumns : SINGLE_COLUMN;
         const viewabilityPairs = props.viewabilityConfigCallbackPairs;
-        const chromeSlots = { header: slots.header, footer: slots.footer, empty: slots.empty };
+        const chromeSlots = {
+            header: slots.header,
+            footer: slots.footer,
+            empty: slots.empty,
+        };
         const forwarded = normalizeVueAttrs(attrs);
         dlog(`Vue FlatList over ${data.length} items, ${numColumns} column(s)`);
         const endReached = listens('onEndReached')
@@ -83,7 +89,9 @@ export const FlatList = defineComponent((props, { attrs, expose, emit, slots })
         const startReached = listens('onStartReached')
             ? (info) => emit('startReached', info)
             : undefined;
-        const refresh = listens('onRefresh') ? () => emit('refresh') : undefined;
+        const refresh = listens('onRefresh')
+            ? () => emit('refresh')
+            : undefined;
         const scrollToIndexFailed = listens('onScrollToIndexFailed')
             ? (info) => emit('scrollToIndexFailed', info)
             : undefined;
@@ -114,7 +122,8 @@ export const FlatList = defineComponent((props, { attrs, expose, emit, slots })
             { flexDirection: 'row' },
             typeof props.columnWrapperStyle === 'string'
                 ? resolveClassName(props.columnWrapperStyle)
-                : isRecord(props.columnWrapperStyle) || Array.isArray(props.columnWrapperStyle)
+                : isRecord(props.columnWrapperStyle) ||
+                    Array.isArray(props.columnWrapperStyle)
                     ? props.columnWrapperStyle
                     : undefined,
         ];

package/build/components/image-background.js

@@ -34,7 +34,9 @@ function asResizeMode(value) {
     return isResizeMode(value) ? value : undefined;
 }
 function asCrossOrigin(value) {
-    return value === 'anonymous' || value === 'use-credentials' ? value : undefined;
+    return value === 'anonymous' || value === 'use-credentials'
+        ? value
+        : undefined;
 }
 function isStyleProp(value) {
     return typeof value === 'object' && value !== null;
@@ -94,10 +96,7 @@ const ImageBackgroundComponent = (_props, { attrs: rawAttrs, slots }) => {
     });
     // wrapper = symbiote-view > [imageDescriptor]; the slot children paint AFTER the image (on top).
     const slotChildren = slots.default !== undefined ? slots.default() : [];
-    return h(wrapper.type, { ...wrapper.props, key: wrapper.key, class: attrs.class }, [
-        ...wrapper.children.map(toChildVNode),
-        ...slotChildren,
-    ]);
+    return h(wrapper.type, { ...wrapper.props, key: wrapper.key, class: attrs.class }, [...wrapper.children.map(toChildVNode), ...slotChildren]);
 };
 ImageBackgroundComponent.displayName = 'ImageBackground';
 ImageBackgroundComponent.inheritAttrs = false;

package/build/components/image.js

@@ -35,7 +35,9 @@ function asResizeMode(value) {
     return isResizeMode(value) ? value : undefined;
 }
 function asCrossOrigin(value) {
-    return value === 'anonymous' || value === 'use-credentials' ? value : undefined;
+    return value === 'anonymous' || value === 'use-credentials'
+        ? value
+        : undefined;
 }
 function isStyleProp(value) {
     return typeof value === 'object' && value !== null;

package/build/components/keyboard-avoiding-view.js

@@ -1,20 +1,23 @@
 // KeyboardAvoidingView: the Vue lifecycle half. The inset math + the behavior->style/structure
 // decision live in @symbiote-native/components (render-keyboard-avoiding-view), shared verbatim
 // with React; Vue supplies only the reactivity: a ref holds the inset, onMounted subscribes to
-// the Keyboard module (show/changeFrame/hide), onUnmounted tears the subscriptions down, and
-// onLayout measures the wrapper frame that feeds the next event's inset.
+// this host's two keyboard notifications (keyboardAvoidingEventNamesFor — will* on iOS, did* on
+// Android, and never changeFrame), onUnmounted tears the subscriptions down, and onLayout
+// measures the wrapper frame that feeds the next event's inset.
 //
 // Inputs arrive as attrs (untyped), so each is narrowed with a runtime guard, never a cast.
 // rawAttrs runs through normalizeVueAttrs so a template `:keyboard-vertical-offset` resolves.
-import { defineComponent, h, ref, onMounted, onUnmounted } from '@vue/runtime-core';
-import { Keyboard, KEYBOARD_EVENT, dlog, } from '@symbiote-native/engine';
-import { computeInset, readKeyboardFrame, readLayoutFrame, resolveKeyboardAvoidingLayout, resolveAccessibilityProps, DEFAULT_VERTICAL_OFFSET, } from '@symbiote-native/components';
+import { defineComponent, h, ref, onMounted, onUnmounted, } from '@vue/runtime-core';
+import { Keyboard, Platform, dlog, } from '@symbiote-native/engine';
+import { computeInset, keyboardAvoidingEventNamesFor, readKeyboardFrame, readPrefersCrossFadeTransitions, readLayoutFrame, resolveKeyboardAvoidingLayout, resolveAccessibilityProps, DEFAULT_VERTICAL_OFFSET, } from '@symbiote-native/components';
 import { normalizeVueAttrs } from '../utils/normalize-attrs.js';
 function isStyleProp(value) {
     return typeof value === 'object' && value !== null;
 }
 function asBehavior(value) {
-    return value === 'height' || value === 'position' || value === 'padding' ? value : undefined;
+    return value === 'height' || value === 'position' || value === 'padding'
+        ? value
+        : undefined;
 }
 const HANDLED_ATTRS = [
     'behavior',
@@ -38,12 +41,26 @@ export const KeyboardAvoidingView = defineComponent((_props, { attrs: rawAttrs,
     // next keyboard event's inset math.
     let frame;
     let initialHeight;
-    const verticalOffset = () => typeof rawAttrs.keyboardVerticalOffset === 'number'
-        ? rawAttrs.keyboardVerticalOffset
-        : DEFAULT_VERTICAL_OFFSET;
+    // A device accessibility setting, read once per mount. Deliberately a plain variable, not a
+    // ref: it cannot change during a session, so nothing should re-render when it resolves.
+    let prefersCrossFadeTransitions = false;
+    // Read at EVENT time rather than captured once: attrs is live, and both the offset and the
+    // behavior feed every keyboard notification's inset math.
+    const currentAttrs = () => normalizeVueAttrs(rawAttrs);
+    const verticalOffset = () => {
+        const offset = currentAttrs().keyboardVerticalOffset;
+        return typeof offset === 'number' ? offset : DEFAULT_VERTICAL_OFFSET;
+    };
     const onShow = (payload) => {
         const keyboard = readKeyboardFrame(payload);
-        const next = computeInset(frame, keyboard, verticalOffset());
+        const next = computeInset(frame, keyboard, verticalOffset(), {
+            behavior: asBehavior(currentAttrs().behavior),
+            // The inset CURRENTLY applied (RN's this.state.bottom), read live off the reactive cell:
+            // in 'height' mode the wrapper is shrunk by it, so the next onLayout under-reports the
+            // frame by exactly that much and core adds it back.
+            previousInset: inset.value,
+            prefersCrossFadeTransitions,
+        });
         dlog(`KeyboardAvoidingView show -> inset ${next}`);
         inset.value = next;
     };
@@ -53,11 +70,19 @@ export const KeyboardAvoidingView = defineComponent((_props, { attrs: rawAttrs,
     };
     let subscriptions = [];
     onMounted(() => {
+        // TWO notifications, per host: iOS takes the will* pair so the view rides up with the
+        // keyboard animation, Android the did* pair. changeFrame is deliberately absent — with an
+        // undocked/split/floating iOS keyboard it fires BEFORE the hide, mid-dismissal.
+        const events = keyboardAvoidingEventNamesFor(Platform.OS);
         subscriptions = [
-            Keyboard.addListener(KEYBOARD_EVENT.didShow, onShow),
-            Keyboard.addListener(KEYBOARD_EVENT.didChangeFrame, onShow),
-            Keyboard.addListener(KEYBOARD_EVENT.didHide, onHide),
+            Keyboard.addListener(events.show, onShow),
+            Keyboard.addListener(events.hide, onHide),
         ];
+        // Nobody awaits this, so it goes through the core wrapper, which answers false on a failed
+        // native read instead of leaving an unhandled rejection.
+        void readPrefersCrossFadeTransitions().then(enabled => {
+            prefersCrossFadeTransitions = enabled;
+        });
     });
     onUnmounted(() => {
         for (const subscription of subscriptions)
@@ -74,7 +99,7 @@ export const KeyboardAvoidingView = defineComponent((_props, { attrs: rawAttrs,
         emit('layout', event);
     };
     return () => {
-        const attrs = normalizeVueAttrs(rawAttrs);
+        const attrs = currentAttrs();
         const behavior = asBehavior(attrs.behavior);
         // RN gates every inset on `enabled ?? true`; only an explicit `false` disables.
         const isEnabled = attrs.enabled !== false;

package/build/components/modal/index.js

@@ -21,7 +21,9 @@ function asString(value) {
     return typeof value === 'string' ? value : undefined;
 }
 function asAnimationType(value) {
-    return value === 'none' || value === 'slide' || value === 'fade' ? value : undefined;
+    return value === 'none' || value === 'slide' || value === 'fade'
+        ? value
+        : undefined;
 }
 function asPresentationStyle(value) {
     return value === 'fullScreen' ||
@@ -41,7 +43,8 @@ const ORIENTATIONS = [
 function isOrientation(value) {
     // .includes() types its arg as IModalOrientation, so a bare string won't pass; .some keeps the
     // ORIENTATIONS list as the single source of truth without an `as` cast.
-    return typeof value === 'string' && ORIENTATIONS.some(orientation => orientation === value);
+    return (typeof value === 'string' &&
+        ORIENTATIONS.some(orientation => orientation === value));
 }
 function asSupportedOrientations(value) {
     if (!Array.isArray(value))

package/build/components/pressable.d.ts

@@ -1,7 +1,7 @@
 import { type EmitFn, type VNode } from '@vue/runtime-core';
 import { type IPressState, type IRectOffset, type IPressableAndroidRippleConfig, type IAccessibilityProps, type IAriaProps } from '@symbiote-native/components';
 import { type IClassNameValue, type ISymbioteEvent, type IStyleProp, type IViewStyle } from '@symbiote-native/engine';
-export type { IPressState, IPressableAndroidRippleConfig } from '@symbiote-native/components';
+export type { IPressState, IPressableAndroidRippleConfig, } from '@symbiote-native/components';
 export type IPressableEmits = {
     press: (event: ISymbioteEvent) => boolean;
     pressIn: (event: ISymbioteEvent) => boolean;