@symbiote-native/vue 0.5.0 → 1.0.0

package/README.md

@@ -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
@@ -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/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/pressable.js

@@ -11,10 +11,11 @@
 // forwarded attrs (pure-JS callbacks); the machine's SYNTHESIZED handlers go on the View instead.
 // Children arrive as a (scoped) default slot so `v-slot="{ pressed }"` mirrors React's
 // children-as-function.
-import { defineComponent, h, ref, shallowRef, } from '@vue/runtime-core';
-import { createPressHandlers, createPressRuntime, rippleProps, buildPressableListeners, resolveDisabledAccessibilityState, noteHoverNoop, resolveAccessibilityProps, DEFAULT_DELAY_LONG_PRESS_MS, } from '@symbiote-native/components';
+import { defineComponent, h, onUnmounted, ref, shallowRef, } from '@vue/runtime-core';
+import { createPressHandlers, createPressRuntime, disposePressRuntime, rippleProps, buildPressableListeners, resolveDisabledAccessibilityState, noteHoverNoop, resolveAccessibilityProps, DEFAULT_DELAY_LONG_PRESS_MS, DEFAULT_MIN_PRESS_DURATION_MS, } from '@symbiote-native/components';
 import { measure, isSymbioteNode, } from '@symbiote-native/engine';
-import { View } from '../components.js';
+import { HOST_VIEW } from '../components.js';
+import { useRawAttrs } from '../composables/use-raw-attrs.js';
 import { normalizeVueAttrs } from '../utils/normalize-attrs.js';
 // Reused verbatim as the `emits` of every Touchable* wrapper, so the runtime list lives once.
 export const PRESSABLE_EMITS = {
@@ -106,7 +107,10 @@ function resolveStyle(value, state) {
 }
 // Everything else forwards onto the View. User press callbacks are pure JS and must never reach
 // the host; the machine's synthesized handlers go on via buildPressableListeners.
-const HANDLED_ATTRS = [
+// A Set, not an array: forwardAttrs asks this question once per attr per Pressable instance, and
+// `Array.prototype.includes` walks all eighteen entries for every key that is NOT handled — which
+// is most of them. Membership is the whole use; the order never mattered.
+const HANDLED_ATTRS = new Set([
     'onPress',
     'onPressIn',
     'onPressOut',
@@ -117,6 +121,7 @@ const HANDLED_ATTRS = [
     'cancelable',
     'pressRetentionOffset',
     'unstable_pressDelay',
+    '__minPressDuration',
     'android_ripple',
     'android_disableSound',
     'onHoverIn',
@@ -125,16 +130,19 @@ const HANDLED_ATTRS = [
     'delayHoverOut',
     'style',
     'accessibilityState',
-];
+]);
 function forwardAttrs(attrs) {
     const result = {};
     for (const key of Object.keys(attrs)) {
-        if (!HANDLED_ATTRS.includes(key))
+        if (!HANDLED_ATTRS.has(key))
             result[key] = attrs[key];
     }
     return result;
 }
-export const Pressable = defineComponent((_props, { slots, attrs: rawAttrs, emit }) => {
+export const Pressable = defineComponent((_props, { slots, attrs: contextAttrs, emit, }) => {
+    // The unproxied bag, captured once. See use-raw-attrs.ts for why the context's own attrs cost
+    // a track() per read and why capturing here (a setup body) is the only safe place to do it.
+    const rawAttrs = useRawAttrs(contextAttrs);
     const pressed = ref(false);
     // The mutable press runtime (timers, suppression flags, measured region). A plain setup-scope
     // object, never a ref: mutated by the machine, never reactively read.
@@ -161,7 +169,11 @@ export const Pressable = defineComponent((_props, { slots, attrs: rawAttrs, emit
             const id = setTimeout(callback, ms);
             return () => clearTimeout(id);
         },
+        now: Date.now,
     };
+    onUnmounted(() => {
+        disposePressRuntime(runtime);
+    });
     return () => {
         const attrs = normalizeVueAttrs(rawAttrs);
         const disabled = attrs.disabled === true ? true : undefined;
@@ -174,6 +186,7 @@ export const Pressable = defineComponent((_props, { slots, attrs: rawAttrs, emit
             onLongPress: event => emit('longPress', event),
             delayLongPress: numberOr(attrs.delayLongPress, DEFAULT_DELAY_LONG_PRESS_MS),
             unstable_pressDelay: numberOr(attrs.unstable_pressDelay, 0),
+            minPressDuration: numberOr(attrs.__minPressDuration, DEFAULT_MIN_PRESS_DURATION_MS),
             hitSlop: asRectOffset(attrs.hitSlop),
             pressRetentionOffset: asRectOffset(attrs.pressRetentionOffset),
         };
@@ -182,14 +195,15 @@ export const Pressable = defineComponent((_props, { slots, attrs: rawAttrs, emit
         const state = { pressed: pressed.value };
         // Vue's View is a bare host primitive, so Pressable folds disabled into accessibilityState
         // and aria/role itself, rather than the View folding it (as React's does).
+        // One bag, built once and then written into. The spread this replaces rebuilt the whole
+        // forwarded set a second time just to add three keys; resolveAccessibilityProps hands back
+        // the SAME object whenever no aria key is present, which is the common case, so on that path
+        // the render now allocates one bag instead of two.
         const forwarded = forwardAttrs(attrs);
         forwarded.accessibilityState = resolveDisabledAccessibilityState(asAccessibilityState(attrs.accessibilityState), disabled);
-        const folded = resolveAccessibilityProps(forwarded);
-        const viewProps = {
-            ...folded,
-            ref: setNodeRef,
-            style: resolveStyle(attrs.style, state),
-        };
+        const viewProps = resolveAccessibilityProps(forwarded);
+        viewProps.ref = setNodeRef;
+        viewProps.style = resolveStyle(attrs.style, state);
         if (typeof attrs.android_disableSound === 'boolean')
             viewProps.android_disableSound = attrs.android_disableSound;
         Object.assign(viewProps, buildPressableListeners(handlers, { disabled, cancelable }));
@@ -199,13 +213,18 @@ export const Pressable = defineComponent((_props, { slots, attrs: rawAttrs, emit
         const ripple = isRecord(attrs.android_ripple)
             ? rippleProps(asRippleConfig(attrs.android_ripple) ?? {})
             : undefined;
-        const inner = ripple !== undefined ? [h(View, ripple, () => content)] : content;
-        // Children go to the host View as a FUNCTION slot, never a raw array: View is a
-        // functional component, and an array child makes Vue normalize it to a default
-        // slot with a dev warn ("Prefer function slots"). Benign under SFC, but in JSX the
-        // warn's trace formats the __self/__source dev props (native HostObjects) and that
-        // read throws, unwinding the whole mount → blank screen. A function slot skips it.
-        return h(View, viewProps, () => inner);
+        const inner = ripple !== undefined ? [h(HOST_VIEW, ripple, content)] : content;
+        // The host node is the intrinsic TAG, not our <View> component: a Vue component instance
+        // costs createComponentInstance + initProps + initSlots + setupRenderEffect even when the
+        // component is functional, and this one only forwards attrs to the same tag. Pressable is
+        // 2 of the 6 primitives in a benchmark row, so this is one instance per row, twice.
+        //
+        // Children are therefore an ARRAY, and that also RETIRES a hazard: passing an array to the
+        // functional <View> made Vue normalize it to a default slot with a "Prefer function slots"
+        // dev warn, whose trace formats the __self/__source dev props (native HostObjects) — a read
+        // that throws under JSX and unwinds the whole mount into a blank screen. An element takes
+        // array children natively and never reaches that path.
+        return h(HOST_VIEW, viewProps, inner);
     };
 }, {
     name: 'Pressable',

package/build/components/safe-area-view.d.ts

@@ -1,6 +1,7 @@
 import { type IClassNameValue } from '@symbiote-native/engine';
 import { type IAccessibilityProps, type IAriaProps } from '@symbiote-native/components';
 export type ISafeAreaViewProps = IAccessibilityProps & IAriaProps & {
+    id?: string;
     class?: IClassNameValue;
 };
 export declare const SafeAreaView: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {

package/build/components/text-input/index.js

@@ -191,6 +191,24 @@ export const TextInput = defineComponent((_props, { attrs: rawAttrs, emit, expos
                 end,
             ]);
         },
+        // Forwarded from the node, because `expose()` REPLACES the public instance rather than
+        // extending it: without these four, a `<TextInput>` ref could not measure while a `<View>`
+        // ref could, and an app moved between the component and lowered paths — which it does by
+        // writing `:multiline="isLong"` instead of `multiline` — silently swapped which four methods
+        // it had. The lowered path answers all nine through `buildTextInputHandle`; this is the same
+        // set on the component path, so the two surfaces are one.
+        measure: (callback) => {
+            nodeRef.value?.measure(callback);
+        },
+        measureInWindow: (callback) => {
+            nodeRef.value?.measureInWindow(callback);
+        },
+        measureLayout: (relativeToNativeNode, onSuccess, onFail) => {
+            nodeRef.value?.measureLayout(relativeToNativeNode, onSuccess, onFail);
+        },
+        setNativeProps: (nativeProps) => {
+            nodeRef.value?.setNativeProps(nativeProps);
+        },
     });
     return () => {
         const attrs = normalizeVueAttrs(rawAttrs);

package/build/components/touchable-native-feedback.js

@@ -6,7 +6,7 @@
 import { defineComponent, h } from '@vue/runtime-core';
 import { backgroundProps, canUseNativeForeground, rippleBackground, selectableBackground, selectableBackgroundBorderless, } from '@symbiote-native/components';
 import { dlog } from '@symbiote-native/engine';
-import { View } from '../components.js';
+import { HOST_VIEW } from '../components.js';
 import { Pressable, emitPressableEvents, PRESSABLE_EMITS, } from './pressable.js';
 import { normalizeVueAttrs } from '../utils/normalize-attrs.js';
 const HANDLED = ['background', 'useForeground'];
@@ -59,8 +59,13 @@ const TouchableNativeFeedbackImpl = defineComponent((_props, { slots, attrs: raw
         dlog(`TouchableNativeFeedback render ${resolved.type} useForeground ${useForeground}`);
         const nativeProps = backgroundProps(resolved, useForeground);
         const children = slots.default !== undefined ? slots.default() : [];
-        const feedback = h(View, nativeProps, () => children);
-        return h(Pressable, { ...forwardAttrs(attrs), ...emitPressableEvents(emit) }, { default: () => [feedback] });
+        // The intrinsic tag, not our <View> component — see the note at HOST_VIEW.
+        const feedback = h(HOST_VIEW, nativeProps, children);
+        return h(Pressable, {
+            ...forwardAttrs(attrs),
+            ...emitPressableEvents(emit),
+            __minPressDuration: 0,
+        }, { default: () => [feedback] });
     };
 }, {
     name: 'TouchableNativeFeedback',

package/build/components/touchable.js

@@ -112,6 +112,7 @@ export const TouchableOpacity = defineComponent((_props, { slots, attrs: rawAttr
             },
         });
         const pressableProps = {
+            __minPressDuration: 0,
             ...forwardExcept(attrs, TOUCHABLE_OPACITY_HANDLED),
             ...emitPressableEvents(emit),
             onPressIn: handlePressIn,
@@ -211,6 +212,7 @@ export const TouchableHighlight = defineComponent((_props, { slots, attrs: rawAt
                 ? [attrs.style, extra.underlay]
                 : [attrs.style, extra.underlay, extra.child];
         const pressableProps = {
+            __minPressDuration: 0,
             ...forwardExcept(attrs, TOUCHABLE_HIGHLIGHT_HANDLED),
             ...emitPressableEvents(emit),
             style: containerStyle,
@@ -263,6 +265,7 @@ export const TouchableWithoutFeedback = defineComponent((_props, { slots, attrs:
             },
         });
         const pressableProps = {
+            __minPressDuration: 0,
             ...forwardExcept(attrs, TOUCHABLE_WITHOUT_FEEDBACK_HANDLED),
             ...emitPressableEvents(emit),
             onPressIn: handlePressIn,

package/build/components.d.ts

@@ -47,5 +47,7 @@ export interface ITextProps extends IAccessibilityProps, IAriaProps {
     ref?: VNodeRef;
     key?: string | number | symbol;
 }
+export declare const HOST_VIEW = "symbiote-view";
+export declare const HOST_TEXT = "symbiote-text";
 export declare const View: FunctionalComponent<IViewProps, {}, any, {}>;
 export declare const Text: FunctionalComponent<ITextProps, {}, any, {}>;

package/build/components.js

@@ -21,8 +21,24 @@ fold = attrs => attrs) {
     component.inheritAttrs = false;
     return component;
 }
-export const View = hostComponent('symbiote-view', 'View');
-export const Text = hostComponent('symbiote-text', 'Text', resolveTextProps);
+// The intrinsic tags the two bare primitives wrap. Exported because ADAPTER-INTERNAL renders must
+// use the TAG, never the component: Vue charges a full component instance even for a functional
+// one, so `h(View, …)` inside our own Pressable/Button costs an instance per node for a wrapper
+// that only forwards attrs.
+//
+// These stay LITERALS rather than being read out of `@symbiote-native/components/host-primitives`,
+// which is where the two transforms now get them: the spec types `intrinsic` as `string`, and
+// reading it here would widen `HOST_VIEW` from the literal type that `hostComponent` and every
+// adapter-internal `h(HOST_VIEW, …)` rely on. So this is the last remaining second encoding, and
+// `components.test.ts` pins it against the spec rather than trusting the two to stay in step.
+//
+// Children go to a tag as an ARRAY (or a bare string / vnode), never a slot function — an element
+// ignores slot children entirely and renders nothing. The reverse of the rule that applies to a
+// component.
+export const HOST_VIEW = 'symbiote-view';
+export const HOST_TEXT = 'symbiote-text';
+export const View = hostComponent(HOST_VIEW, 'View');
+export const Text = hostComponent(HOST_TEXT, 'Text', resolveTextProps);
 // Text is no longer bare either — it carries RN's Text.js defaults through resolveTextProps.
 // Image is NOT a bare host primitive: it needs the shared fold (source/src/srcSet resolution,
 // width/height -> style, alt -> accessibility) + the Image statics, so it lives in ./image as a

package/build/composables/use-raw-attrs.d.ts

@@ -0,0 +1 @@
+export declare function useRawAttrs(contextAttrs: Record<string, unknown>): Record<string, unknown>;

package/build/composables/use-raw-attrs.js

@@ -0,0 +1,26 @@
+// The unproxied twin of a setup context's `attrs`.
+//
+// Vue hands `setupContext.attrs` out as `new Proxy(instance.attrs, attrsProxyHandlers)`, and in
+// PRODUCTION as well as dev that proxy's only trap is `get(target, key) { track(target, "get", "");
+// return target[key]; }` (runtime-core.esm-bundler.js:8357). So every attribute read costs a
+// WeakMap get, a Map get and a `dep.track()`, and the first read of each instance also allocates
+// a Map and a Dep into the module-global `targetMap` that live as long as the component does.
+// Pressable reads ~16 attrs per render and a benchmark create mounts 2 000 of them.
+//
+// `instance.attrs` is the raw object behind that proxy. Capturing it is safe because its identity
+// never changes: `initProps` assigns it once (:4907) and `updateProps` mutates that same object in
+// place (`attrs[key] = value` / `delete attrs[key]`), so a reference taken at setup always reads
+// current values. The tracking the proxy performs is for reads in a setup BODY; a render fn does
+// not need it, because the parent's patch re-runs the child render through `updateComponentPreRender`
+// whether or not the child subscribed.
+//
+// CALL THIS FROM A SETUP BODY ONLY, never from a render fn, a `computed`, or any other deferred
+// callback. `getCurrentInstance()` resolves to `currentInstance || currentRenderingInstance`, so in
+// a callback that runs while a DIFFERENT component is rendering it returns that component and this
+// would silently hand back the wrong bag. `virtualized-list/index.ts` calls normalizeVueAttrs
+// inside a `computed` for exactly that reason and must keep using the context attrs.
+import { getCurrentInstance } from '@vue/runtime-core';
+export function useRawAttrs(contextAttrs) {
+    const instance = getCurrentInstance();
+    return instance === null ? contextAttrs : instance.attrs;
+}

package/build/host-instance/index.js

@@ -1,11 +1,10 @@
 // findNodeHandle, the Vue adapter twin of adapters/react/src/host-instance.ts. RN's
 // "ref/instance -> native reactTag" lookup, the seam imperative-interop libraries
 // (reanimated, gesture-handler, react-navigation) reach through. A Vue template/function ref
-// to a symbiote host element falls through to the raw engine SymbioteNode, and the Vue
-// renderer grafts the public-instance API onto it (toPublicInstance in renderer.ts), so the
-// node a ref receives carries measure / setNativeProps / focus exactly like React's
-// getPublicInstance. IHostInstance is therefore that grafted node — re-exported from the
-// engine so React and Vue share one definition.
+// to a symbiote host element falls through to the raw engine SymbioteNode, which already carries
+// measure / setNativeProps / focus on its prototype, exactly like React's getPublicInstance.
+// IHostInstance is therefore that node — re-exported from the engine so React and Vue share one
+// definition.
 //
 // The node -> tag resolution itself belongs to the engine (getNativeTag, keyed on the raw
 // node in the commit mirror); this only unwraps the Vue-shaped inputs (a Ref or a bare node)

package/build/index.d.ts

@@ -1,3 +1,4 @@
+import './register';
 export { mount, unmount, setAppConfigurator } from './render';
 export type { IAppConfigurator } from './render';
 export { Teleport, type ITeleportTarget } from './create-portal';