@symbiote-native/vue 0.3.7 → 0.4.0

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

@@ -1,30 +1,25 @@
-// FlatList, the Vue convenience surface over VirtualizedList. It takes a plain `data` array
-// and derives getItem/getItemCount; numColumns packs items into rows (a horizontal sub-View),
-// so the virtualized stream is rows, not items (RN's FlatList). All windowing / viewability /
-// batching / imperative scrolling are inherited from VirtualizedList; the data shaping and the
-// row/viewability/separator transforms are shared from @symbiote-native/components.
+// FlatList, the Vue convenience surface over VirtualizedList. Takes a plain `data` array and
+// derives getItem/getItemCount; numColumns packs items into rows (a horizontal sub-View), so the
+// virtualized stream is rows, not items. All windowing/viewability/batching/imperative scrolling
+// are inherited from VirtualizedList; the data shaping and row/viewability/separator transforms
+// are shared from @symbiote-native/components.
 //
-// This is the FIRST generic component on the typed-emits pattern (the symbiote port of pd-web-kit):
-// a GENERIC setup function `<ItemT,>(props, ctx: ICtx<IFlatListEmits<ItemT>>)` so the events emit
-// with ItemT-typed payloads (`@viewable-items-changed` carries `ItemT`, not `unknown`). For that to
-// infer at the call site, the generic INPUTS (data/renderItem/keyExtractor/…) must be typed `props`,
-// not `$attrs` — so they are declared in the runtime `props` array; the long passthrough tail
-// (horizontal/inverted/style/getItemLayout/raw scroll/…) still rides through `$attrs` onto the inner
-// VirtualizedList. The inner list still GATES RefreshControl + viewability on callback presence, so
-// each emit bridge is wired to it ONLY when the consumer actually listens (read off the instance
-// vnode props), keeping behavior identical to the prop-callback era.
+// Typed-emits generic component: a GENERIC setup function so events emit with ItemT-typed
+// payloads. For that to infer at the call site, the generic INPUTS must be typed `props`, not
+// $attrs - so they are declared in the runtime `props` array; the passthrough tail rides through
+// $attrs onto the inner VirtualizedList. The inner list still GATES RefreshControl + viewability
+// on callback presence, so each emit bridge is wired ONLY when the consumer actually listens.
 import { defineComponent, getCurrentInstance, h, shallowRef, } from '@vue/runtime-core';
 import { SINGLE_COLUMN, chunkIntoRows, expandRowViewability, firstItemOfRow, lastItemOfRow, rowKeyExtractor, } from '@symbiote-native/components';
 import { dlog, resolveClassName, } from '@symbiote-native/engine';
 import { VirtualizedList } from '../virtualized-list/index.js';
 import { normalizeVueAttrs } from '../../utils/normalize-attrs.js';
-// VirtualizedList is itself a generic component (generic construct signature), which h()'s overloads
-// can't resolve. Drive it through a loose functional-component handle (generic-component h()
-// limitation — the ItemT surface is proven at the typed FlatList boundary above).
+// VirtualizedList's generic construct signature can't be resolved by h()'s overloads, so drive
+// it through a loose functional-component handle (the ItemT surface is proven at the typed
+// FlatList boundary above).
 const VirtualizedListHost = VirtualizedList;
-// The typed inputs FlatList reads off `props`; everything else falls through $attrs onto the inner
-// VirtualizedList. Listed for the runtime `props` declaration (keyof can't derive it: the index
-// signature widens keyof to `string`).
+// Listed for the runtime `props` declaration (keyof can't derive it: the index signature widens
+// keyof to `string`).
 const PROP_KEYS = [
     'data',
     'keyExtractor',
@@ -67,9 +62,8 @@ export const FlatList = defineComponent((props, { attrs, expose, emit, slots })
         inner.value = isVirtualizedListHandle(instance) ? instance : null;
     };
     expose(buildDelegateHandle(() => inner.value));
-    // VirtualizedList gates RefreshControl + viewability on callback presence, so a bridge is wired
-    // ONLY when the consumer actually listens. Declared emits are stripped from $attrs, so read the
-    // listener off the instance's own vnode props (what the parent passed) instead.
+    // Declared emits are stripped from $attrs, so read the listener off the instance's own vnode
+    // props instead, gating each bridge to when the consumer actually listens.
     const instance = getCurrentInstance();
     const listens = (onName) => {
         const vnodeProps = instance?.vnode.props;
@@ -80,15 +74,9 @@ export const FlatList = defineComponent((props, { attrs, expose, emit, slots })
         const keyExtractor = props.keyExtractor;
         const numColumns = typeof props.numColumns === 'number' ? props.numColumns : SINGLE_COLUMN;
         const viewabilityPairs = props.viewabilityConfigCallbackPairs;
-        // The chrome slots ride straight down to the inner list; #item/#separator are forwarded as-is
-        // for a single column and re-wrapped per cell for multi-column below.
         const chromeSlots = { header: slots.header, footer: slots.footer, empty: slots.empty };
-        // The passthrough tail: declared props + declared emits' onX are already removed from $attrs,
-        // so what's left is the VirtualizedList passthrough (kebab-folded for the inner list).
         const forwarded = normalizeVueAttrs(attrs);
         dlog(`Vue FlatList over ${data.length} items, ${numColumns} column(s)`);
-        // The synthesized list events become VL handlers ONLY when listened, so the inner list keeps
-        // gating (no parasitic RefreshControl / viewability work for an unlistened event).
         const endReached = listens('onEndReached')
             ? (info) => emit('endReached', info)
             : undefined;
@@ -117,15 +105,11 @@ export const FlatList = defineComponent((props, { attrs, expose, emit, slots })
                 onScrollToIndexFailed: scrollToIndexFailed,
                 onViewableItemsChanged,
                 viewabilityConfigCallbackPairs: viewabilityPairs,
-            }, 
-            // A single column forwards the consumer's slots untouched (#item info shape is identical).
-            { ...chromeSlots, item: slots.item, separator: slots.separator });
+            }, { ...chromeSlots, item: slots.item, separator: slots.separator });
         }
         // Multi-column: the virtualized stream is rows. Each cell renders its items side by side
         // in a flex-row View so windowing accounts for whole rows.
         const rows = chunkIntoRows(data, numColumns);
-        // A class-name string resolves through the shared style registry; an object/array is
-        // already style-shaped and passes through as-is.
         const rowStyle = [
             { flexDirection: 'row' },
             typeof props.columnWrapperStyle === 'string'

package/build/components/image-background.js

@@ -1,12 +1,10 @@
 // ImageBackground: the Vue lifecycle half. The composition (the absolute-fill Image behind the
 // children, the dimension-proxy + style-merge math) lives framework-agnostic in
-// @symbiote-native/components/renderImageBackground and is shared verbatim with React; here Vue only
-// narrows the untyped attrs into the typed Image view, folds aria/role, bridges the Descriptor to
-// vnodes, and appends the slot children ON TOP of the inner image.
+// @symbiote-native/components/renderImageBackground, shared verbatim with React; Vue narrows the
+// untyped attrs into the typed Image view, folds aria/role, bridges the Descriptor to vnodes, and
+// appends the slot children ON TOP of the inner image.
 //
-// FUNCTIONAL, not a stateful defineComponent: ImageBackground is render-only (no state). Inputs
-// arrive as attrs (untyped); the typed transform fields are narrowed with runtime guards, the
-// forward-only rest is folded so resolveAccessibilityProps lands aria-* onto the inner image.
+// FUNCTIONAL, not a stateful defineComponent: render-only, no state.
 import { h } from '@vue/runtime-core';
 import { renderImageBackground, resolveAccessibilityProps, } from '@symbiote-native/components';
 import { resolveClassName, } from '@symbiote-native/engine';
@@ -18,8 +16,6 @@ function asString(value) {
 function asNumber(value) {
     return typeof value === 'number' ? value : undefined;
 }
-// A source is a structured object/array or an opaque require() id (number) the engine's injected
-// resolver expands; any object/array/number is a valid source to forward.
 function asSource(value) {
     if (typeof value === 'number')
         return value;
@@ -40,16 +36,12 @@ function asResizeMode(value) {
 function asCrossOrigin(value) {
     return value === 'anonymous' || value === 'use-credentials' ? value : undefined;
 }
-// Object OR array (a style list) passes through: the engine flattens either; primitives degrade
-// to undefined (parity with React, which preserves the StyleProp).
 function isStyleProp(value) {
     return typeof value === 'object' && value !== null;
 }
 function toChildVNode(child) {
     return typeof child === 'string' ? child : descriptorToVue(child);
 }
-// `style` is the WRAPPER View style; `imageStyle` targets the inner Image. The image transform
-// fields are consumed by the source/style fold; everything else forwards onto the inner image.
 const HANDLED_ATTRS = [
     'style',
     'imageStyle',
@@ -79,8 +71,6 @@ const ImageBackgroundComponent = (_props, { attrs: rawAttrs, slots }) => {
     const attrs = normalizeVueAttrs(rawAttrs);
     const wrapper = renderImageBackground({
         style: isStyleProp(attrs.style) ? attrs.style : undefined,
-        // A class-name string resolves through the shared style registry, same as `class` above;
-        // an object/array is already style-shaped and passes through as-is.
         imageStyle: typeof attrs.imageStyle === 'string'
             ? resolveClassName(attrs.imageStyle)
             : isStyleProp(attrs.imageStyle)

package/build/components/image.js

@@ -1,17 +1,12 @@
-// Image: the Vue lifecycle half. The full fold (source / src / srcSet resolution, the
-// width/height → style fold, resizeMode/tintColor, alt → accessibility, and the native source
-// array) lives framework-agnostic in @symbiote-native/components and is shared verbatim with React;
-// here Vue only narrows the untyped attrs into renderImage's typed view, folds aria/role, bridges
-// the Descriptor to a vnode, and carries the Image statics (getSize / prefetch / queryCache / …).
+// Image: the Vue lifecycle half. The full fold (source/src/srcSet resolution, width/height ->
+// style fold, resizeMode/tintColor, alt -> accessibility, and the native source array) lives
+// framework-agnostic in @symbiote-native/components, shared verbatim with React; Vue narrows the
+// untyped attrs into renderImage's typed view, folds aria/role, bridges the Descriptor to a
+// vnode, and carries the Image statics (getSize/prefetch/queryCache/...).
 //
-// FUNCTIONAL, not a stateful defineComponent: Image is render-only, and Animated.Image wraps it
-// via createAnimatedComponent, which captures the host
-// node through a ref that only falls through on a functional component (a defineComponent's ref
-// resolves to a useless component proxy; see components.ts). So Image must stay functional.
-//
-// Inputs arrive as attrs (untyped). The typed transform fields are narrowed with runtime guards;
-// the forward-only rest (events, blurRadius, capInsets, testID, accessibility*) is typed as the
-// a11y intersection so resolveAccessibilityProps folds aria-* into accessibility* over it.
+// FUNCTIONAL, not a stateful defineComponent: Animated.Image wraps it via createAnimatedComponent,
+// which captures the host node through a ref that only falls through on a functional component
+// (a defineComponent's ref resolves to a useless component proxy; see components.ts).
 import { imageStatics, renderImage, resolveAccessibilityProps, } from '@symbiote-native/components';
 import { descriptorToVue } from '../descriptor-to-vue.js';
 import { normalizeVueAttrs } from '../utils/normalize-attrs.js';
@@ -22,8 +17,6 @@ function asString(value) {
 function asNumber(value) {
     return typeof value === 'number' ? value : undefined;
 }
-// A source is a structured object/array or an opaque require() id (number) the engine's injected
-// resolver expands; any object/array/number is a valid source to forward (IImageSource is all-optional).
 function asSource(value) {
     if (typeof value === 'number')
         return value;
@@ -44,12 +37,9 @@ function asResizeMode(value) {
 function asCrossOrigin(value) {
     return value === 'anonymous' || value === 'use-credentials' ? value : undefined;
 }
-// Object OR array (a style list) passes through; readStyleString flattens either, and arrays must
-// survive so `style={[a, b]}` reaches Fabric (parity with React, which preserves the StyleProp).
 function isStyleProp(value) {
     return typeof value === 'object' && value !== null;
 }
-// The typed transform fields renderImage folds; everything else forwards via passthrough.
 const HANDLED_ATTRS = [
     'source',
     'defaultSource',
@@ -94,6 +84,5 @@ const ImageComponent = (_props, { attrs: rawAttrs }) => {
 };
 ImageComponent.displayName = 'Image';
 ImageComponent.inheritAttrs = false;
-// Statics attached like RN (Image.getSize / prefetch / …), shared verbatim with React via
-// the engine-resolved imageStatics. The component value doubles as the statics namespace.
+// Statics attached like RN (Image.getSize/prefetch/...), shared verbatim with React.
 export const Image = Object.assign(ImageComponent, imageStatics);

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

@@ -1,28 +1,21 @@
-// 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 the
-// React adapter; Vue supplies only the reactivity: a ref holds the inset, onMounted subscribes to
-// the now-core Keyboard module (show / changeFrame / hide), onUnmounted tears the subscriptions
-// down, and onLayout measures the wrapper frame that feeds the next event's inset. This is the Vue
-// twin of React's useState + useEffect + onLayout. Full parity: behavior 'height'|'position'|
-// 'padding', enabled, keyboardVerticalOffset, contentContainerStyle, onLayout.
+// 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.
 //
-// Inputs arrive as attrs (untyped), so each is narrowed with a runtime guard rather than a cast.
-// rawAttrs runs through normalizeVueAttrs (kebab→camel) so a template `:keyboard-vertical-offset`
-// and `:content-container-style` resolve; aria-*/data-* are preserved and forwarded to the host.
+// 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 { normalizeVueAttrs } from '../utils/normalize-attrs.js';
-// A style prop is an object (a style record) or an array of them; numbers/strings/null degrade
-// to undefined (the engine flattens what it gets). A runtime guard, not a cast.
 function isStyleProp(value) {
     return typeof value === 'object' && value !== null;
 }
 function asBehavior(value) {
     return value === 'height' || value === 'position' || value === 'padding' ? value : undefined;
 }
-// The prop/handler keys the lifecycle consumes itself; everything else (accessibility, testID,
-// aria-*/data-*) forwards onto the wrapper host node.
 const HANDLED_ATTRS = [
     'behavior',
     'enabled',
@@ -40,11 +33,9 @@ function forwardAttrs(attrs) {
     return result;
 }
 export const KeyboardAvoidingView = defineComponent((_props, { attrs: rawAttrs, slots, emit }) => {
-    // The inset is a number (plain data), so a plain ref is correct; no engine node is held here
-    // (onLayout delivers the frame, so no imperative measure / host-node capture is needed).
     const inset = ref(0);
     // Mutable, not reactive: changing the measured frame alone shouldn't re-render; it feeds the
-    // next keyboard event's inset math (React's frameRef / initialHeightRef).
+    // next keyboard event's inset math.
     let frame;
     let initialHeight;
     const verticalOffset = () => typeof rawAttrs.keyboardVerticalOffset === 'number'
@@ -103,8 +94,8 @@ export const KeyboardAvoidingView = defineComponent((_props, { attrs: rawAttrs,
             style: layout.wrapperStyle,
             onLayout: handleLayout,
         };
-        // 'nested' ('position') pushes the children in an inner view by `bottom: inset`; the wrapper
-        // modes adjust the single wrapper directly.
+        // 'nested' pushes the children in an inner view by `bottom: inset`; the wrapper modes
+        // adjust the single wrapper directly.
         if (layout.kind === 'nested') {
             return h('symbiote-view', wrapperProps, [
                 h('symbiote-view', { style: layout.innerStyle }, childNodes),

package/build/components/modal/index.d.ts

@@ -1,5 +1,5 @@
-import { type IAccessibilityProps, type IAriaProps, type IModalAnimationType, type IModalOrientation, type IModalOrientationChangeEvent, type IModalPresentationStyle } from '@symbiote-native/components';
-import { type IClassNameValue, type IStyleProp, type IViewStyle } from '@symbiote-native/engine';
+import { type IAccessibilityProps, type IAriaProps, type IModalAnimationType, type IModalOrientation, type IModalPresentationStyle } from '@symbiote-native/components';
+import { type IClassNameValue, type IStyleProp, type ISymbioteEvent, type IViewStyle } from '@symbiote-native/engine';
 export type { IModalAnimationType, IModalPresentationStyle, IModalOrientation, IModalOrientationChangeEvent, } from '@symbiote-native/components';
 export interface IModalProps extends IAccessibilityProps, IAriaProps {
     visible?: boolean;
@@ -19,11 +19,11 @@ export type IModalEmits = {
     show: () => boolean;
     dismiss: () => boolean;
     requestClose: () => boolean;
-    orientationChange: (event: IModalOrientationChangeEvent) => boolean;
+    orientationChange: (event: ISymbioteEvent) => boolean;
 };
 export declare const Modal: import("vue").DefineSetupFnComponent<IModalProps, IModalEmits, {}, IModalProps & {
     onShow?: (() => any) | undefined;
     onDismiss?: (() => any) | undefined;
     onRequestClose?: (() => any) | undefined;
-    onOrientationChange?: ((event: IModalOrientationChangeEvent) => any) | undefined;
+    onOrientationChange?: ((event: ISymbioteEvent) => any) | undefined;
 }, import("vue").PublicProps>;

package/build/components/pressable.js

@@ -1,24 +1,22 @@
-// Pressable, the Vue lifecycle half. The press lifecycle (the long-press timer, unstable_press-
-// Delay deferral, the pressRetentionOffset drift test, the suppression flags) lives in
-// @symbiote-native/components/state as a pure machine over a runtime + host; the render decisions (the
-// responder listeners, the disabled→accessibilityState fold, the ripple prop) in
-// @symbiote-native/components/view, both shared verbatim with the React adapter. Here Vue supplies the
+// Pressable, the Vue lifecycle half. The press lifecycle (long-press timer, unstable_press-
+// Delay deferral, pressRetentionOffset drift test, suppression flags) lives in
+// @symbiote-native/components/state as a pure machine over a runtime + host; the render
+// decisions (responder listeners, disabled->accessibilityState fold, ripple prop) in
+// @symbiote-native/components/view, both shared verbatim with React. Vue supplies the
 // reactivity: a `ref` holds `pressed`, a setup-scope object holds the press runtime, a function
-// ref grabs the responder View's host node, and the machine measures through it. This is the Vue
-// twin of the React adapter's useState + useRef(runtime) + useRef(viewRef).
+// ref grabs the responder View's host node.
 //
-// Inputs arrive as attrs (untyped), so each is narrowed with a runtime guard rather than a cast.
-// The user's onPress / onPressIn / … are consumed by the machine and MUST be stripped from the
-// forwarded attrs (they are pure-JS callbacks; the machine's SYNTHESIZED handlers go on the View,
-// where routeProp turns press/pressIn/pressOut + the responder events into listeners). Children
-// arrive as a (scoped) default slot so `v-slot="{ pressed }"` mirrors React's children-as-function.
+// Inputs arrive as attrs (untyped), so each is narrowed with a runtime guard, never a cast. The
+// user's onPress/onPressIn/... are consumed by the machine and MUST be stripped from the
+// 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 { measure, isSymbioteNode, } from '@symbiote-native/engine';
 import { View } from '../components.js';
 import { normalizeVueAttrs } from '../utils/normalize-attrs.js';
-// The emits-options validator for the full press surface. Reused verbatim as the `emits` of every
-// Touchable* wrapper (they expose the same events), so the runtime list lives in exactly one place.
+// Reused verbatim as the `emits` of every Touchable* wrapper, so the runtime list lives once.
 export const PRESSABLE_EMITS = {
     press: (_event) => true,
     pressIn: (_event) => true,
@@ -29,9 +27,8 @@ export const PRESSABLE_EMITS = {
     hoverOut: (_event) => true,
 };
 // Bridge the whole press surface onto a child Pressable: each host onX callback re-emits the
-// matching event on the wrapper. Every Touchable* wraps Pressable, so spread this onto the child's
-// props. A wrapper that intercepts an event for its own state (e.g. TouchableOpacity's opacity
-// animation on press-in/out) overrides that one key AFTER the spread.
+// matching event on the wrapper. A wrapper that intercepts an event for its own state (e.g.
+// TouchableOpacity's opacity animation on press-in/out) overrides that one key AFTER the spread.
 export function emitPressableEvents(emit) {
     return {
         onPress: event => emit('press', event),
@@ -53,7 +50,7 @@ function numberOr(value, fallback) {
     return typeof value === 'number' ? value : fallback;
 }
 // A scalar offset, or the per-edge object; anything else is dropped (the machine reads undefined
-// as "no offset" → RN's defaults).
+// as "no offset" -> RN's defaults).
 function asRectOffset(value) {
     if (typeof value === 'number')
         return value;
@@ -107,9 +104,8 @@ function resolveStyle(value, state) {
         return value(state);
     return value;
 }
-// The prop/handler keys the lifecycle consumes itself; everything else (aria/accessibility/
-// testID/nativeID/native props) forwards onto the View. The user press callbacks are pure JS and
-// must never reach the host; the machine's synthesized handlers go on via buildPressableListeners.
+// 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 = [
     'onPress',
     'onPressIn',
@@ -141,16 +137,16 @@ function forwardAttrs(attrs) {
 export const Pressable = defineComponent((_props, { slots, attrs: rawAttrs, emit }) => {
     const pressed = ref(false);
     // The mutable press runtime (timers, suppression flags, measured region). A plain setup-scope
-    // object, never a ref: it is mutated by the machine, never reactively read.
+    // object, never a ref: mutated by the machine, never reactively read.
     const runtime = createPressRuntime();
-    // shallowRef, NOT ref: the engine node is held by IDENTITY so measure() hits the engine's
-    // WeakMap mirror (a plain ref would wrap it in a reactive Proxy → mirror miss → measure no-op).
+    // shallowRef, NOT ref: a plain ref would wrap the node in a reactive Proxy, missing the
+    // engine's WeakMap mirror and making measure() no-op.
     const nodeRef = shallowRef(null);
     const setNodeRef = (el) => {
         nodeRef.value = isSymbioteNode(el) ? el : null;
     };
     // The lifecycle seam the machine fills: flip the reactive `pressed`, and expose the responder
-    // View's raw frame-measure (or undefined before the node commits → radius fallback).
+    // View's raw frame-measure (or undefined before the node commits, a radius fallback).
     const host = {
         setPressed: next => {
             pressed.value = next;
@@ -184,9 +180,8 @@ export const Pressable = defineComponent((_props, { slots, attrs: rawAttrs, emit
         const handlers = createPressHandlers(config, runtime, host);
         noteHoverNoop(undefined, undefined);
         const state = { pressed: pressed.value };
-        // Fold the disabled state into the user's accessibilityState, then fold aria/role over the
-        // forwarded attrs (the Vue View is a bare host primitive, so Pressable folds; React's View
-        // folds for it). resolveAccessibilityProps merges aria into the accessibilityState we set.
+        // 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).
         const forwarded = forwardAttrs(attrs);
         forwarded.accessibilityState = resolveDisabledAccessibilityState(asAccessibilityState(attrs.accessibilityState), disabled);
         const folded = resolveAccessibilityProps(forwarded);
@@ -198,11 +193,9 @@ export const Pressable = defineComponent((_props, { slots, attrs: rawAttrs, emit
         if (typeof attrs.android_disableSound === 'boolean')
             viewProps.android_disableSound = attrs.android_disableSound;
         Object.assign(viewProps, buildPressableListeners(handlers, { disabled, cancelable }));
-        // Children come from the (scoped) default slot, receiving the press state so a render-prop
-        // child (`v-slot="{ pressed }"`) mirrors React's children-as-function.
         const content = slots.default !== undefined ? slots.default(state) : [];
         // android_ripple rides a dedicated inner View; on iOS the prop is undefined, so the child
-        // renders unwrapped, no extra node. Mirrors the React Pressable + touchable-native-feedback.
+        // renders unwrapped, no extra node.
         const ripple = isRecord(attrs.android_ripple)
             ? rippleProps(asRippleConfig(attrs.android_ripple) ?? {})
             : undefined;

package/build/components/refresh-control.js

@@ -1,24 +1,20 @@
-// RefreshControl, the Vue lifecycle half. On iOS this is the PullToRefreshView
-// Fabric node that lives INSIDE a ScrollView (a sibling before the content container); on Android it
-// is AndroidSwipeRefreshLayout and WRAPS the scroll view (a ScrollView there hosts one child). The
-// Vue twin of the React adapter's RefreshControl. Vue takes the wrapped child via its DEFAULT SLOT
-// (the seam the Android scroll-view wrap re-invokes to host the scroll view inside it; iOS leaves the
-// slot empty), folds aria/role through the shared resolveAccessibilityProps, and forwards the native
-// props onto the symbiote-refresh-control host node.
+// RefreshControl, the Vue lifecycle half. On iOS this is the PullToRefreshView Fabric node that
+// lives INSIDE a ScrollView (a sibling before the content container); on Android it is
+// AndroidSwipeRefreshLayout and WRAPS the scroll view (a ScrollView there hosts one child). Vue
+// takes the wrapped child via its DEFAULT SLOT (the seam the Android scroll-view wrap re-invokes
+// to host the scroll view inside it; iOS leaves the slot empty), folds aria/role through the
+// shared resolveAccessibilityProps, and forwards the native props onto the
+// symbiote-refresh-control host node.
 //
-// `refreshing` is a controlled prop: the parent owns it and pushes it down each commit; native
-// reports the gesture via the direct `topRefresh` event, which the engine routes to the host
-// onRefresh prop; the adapter turns that into the typed Vue `refresh` emit. Inputs arrive as attrs
-// (untyped), so the forwarded bag is BUILT at the a11y-intersection type (a genuine narrowing, not
-// a cast) before the aria fold.
+// `refreshing` is a controlled prop the parent pushes down each commit; native reports the
+// gesture via the direct `topRefresh` event, routed to the host onRefresh prop and turned into
+// the typed Vue `refresh` emit.
 import { defineComponent, h } from '@vue/runtime-core';
 import { dlog } from '@symbiote-native/engine';
 import { resolveAccessibilityProps, } from '@symbiote-native/components';
 import { normalizeVueAttrs } from '../utils/normalize-attrs.js';
-// Copy every non-consumed attr into a bag typed as the a11y intersection (the accumulator is BUILT
-// at that type, a real narrowing, not a cast), then fold aria-*/role into the canonical
-// accessibility* props. Children cross via slots, never attrs. When the Android wrap re-invokes
-// this component, the injected `style` (the outer/layout half) rides through too.
+// Built at the a11y-intersection type (a real narrowing, not a cast), then fold aria-*/role into
+// the canonical accessibility* props. Children cross via slots, never attrs.
 function foldAttrs(attrs) {
     const bag = {};
     for (const key of Object.keys(attrs)) {
@@ -35,8 +31,6 @@ export const RefreshControl = defineComponent((_props, { attrs: rawAttrs, emit,
         if (nativeProps.enabled !== undefined)
             dlog(`RefreshControl enabled=${String(nativeProps.enabled)} (Android-only)`);
         dlog('RefreshControl refresh emit wired');
-        // The default slot is the seam: empty on iOS (childless sibling), but the Android scroll-view
-        // wrap re-invokes this component with the scroll view as its default slot, so it hosts it.
         return h('symbiote-refresh-control', {
             ...nativeProps,
             onRefresh: () => {

package/build/components/scroll-view/index.android.js

@@ -1,15 +1,14 @@
-// ScrollView on Android. An Android ScrollView accepts only ONE child, so a
-// RefreshControl can't be a sibling of the content the way iOS allows ("addViewAt: failed to insert
-// view ... at index 1"). Instead the RefreshControl (AndroidSwipeRefreshLayout) WRAPS the scroll
-// view, with the scroll view nested inside and nestedScrollEnabled so the inner scroll handles the
-// gesture before the refresh parent, mirroring RN's ScrollView.js android branch.
+// ScrollView on Android. An Android ScrollView accepts only ONE child, so a RefreshControl can't
+// be a sibling of the content the way iOS allows ("addViewAt: failed to insert view ... at index
+// 1"). Instead the RefreshControl (AndroidSwipeRefreshLayout) WRAPS the scroll view, nested
+// inside with nestedScrollEnabled so it handles the gesture before the refresh parent, mirroring
+// RN's ScrollView.js android branch.
 //
-// React does this with cloneElement(refreshControl, {style}, scrollView). Vue has NO cloneElement,
-// so the analog is to RE-INVOKE the user's RefreshControl component type via h(): same .type, its
-// own .props plus the injected outer/layout style, and the inner scroll view as its DEFAULT SLOT.
-// The slot is the seam: RefreshControl renders slots.default() as the host node's children. The
-// node ref stays on the INNER scroll view (not the wrapper), so dispatchViewCommand targets it.
-// Metro picks this on an Android host; no Platform.OS read.
+// React does this with cloneElement(refreshControl, {style}, scrollView). Vue has no
+// cloneElement, so the analog is to RE-INVOKE the user's RefreshControl component type via h():
+// same .type, its own .props plus the injected outer/layout style, and the inner scroll view as
+// its DEFAULT SLOT. The node ref stays on the INNER scroll view (not the wrapper), so
+// dispatchViewCommand targets it. Metro picks this file on an Android host; no Platform.OS read.
 // device-verify-pending: the wrap shape mirrors RN, proven on a real host by the absence of the
 // "addViewAt: failed to insert" crash.
 import { h, isVNode } from '@vue/runtime-core';
@@ -19,11 +18,8 @@ import { createScrollView } from './shared.js';
 function isRecord(value) {
     return typeof value === 'object' && value !== null && !Array.isArray(value);
 }
-// A Vue VNode's `.type` is VNodeTypes (string | Component | nested VNode | the Fragment/Text/…
-// symbol constants). Re-invoking via h() needs it narrowed to what h accepts (string | Component):
-// the symbol constants fail the typeof checks and a nested VNode is ruled out by isVNode. A type
-// predicate (not a plain return) sidesteps the assignability gap; refreshControl is always a real
-// component element in practice.
+// Narrows VNodeTypes (string | Component | nested VNode | the Fragment/Text/... symbol
+// constants) to what h() accepts. refreshControl is always a real component element in practice.
 function isHostType(type) {
     if (typeof type === 'string')
         return true;
@@ -32,25 +28,20 @@ function isHostType(type) {
 export const ScrollView = createScrollView({
     assemble: input => {
         if (input.refreshControl === undefined) {
-            // No refresh: the same single-child path as Phase 1; the node ref rides input.scrollProps.
             dlog('Vue ScrollView.ANDROID refreshControl=NONE(1child)');
             return h(input.scrollViewIntrinsic, input.scrollProps, [input.content]);
         }
-        // RN splits the flattened style across the two boxes (splitLayoutProps): LAYOUT props
-        // (margin/flex/size/position/…) drive the outer AndroidSwipeRefreshLayout frame; VISUAL props
-        // (background/padding/border/…) paint the inner scroll view. So the wrapper carries `outer`, and
-        // the inner scroll view its base (flexDirection/overflow) plus the visual `inner` composed over
-        // it, NOT a hardcoded flex:1 that would override an explicit user height/width.
+        // RN splits the flattened style across the two boxes: LAYOUT props (margin/flex/size/
+        // position/...) drive the outer AndroidSwipeRefreshLayout frame; VISUAL props (background/
+        // padding/border/...) paint the inner scroll view - not a hardcoded flex:1 that would
+        // override an explicit user height/width.
         //
-        // layoutSplitStyle (not userStyle): a class-only layout prop (flex/height/gap/…) is invisible
-        // to userStyle (it never carries the resolved `class` value — see isClassNameProp in
-        // shared.ts), so splitting on userStyle alone starves the wrapper of its layout style and it
-        // collapses to nothing. layoutSplitStyle is userStyle merged with the resolved class style.
+        // layoutSplitStyle (not userStyle): a class-only layout prop is invisible to userStyle (it
+        // never carries the resolved `class` value - see isClassNameProp in shared.ts), so splitting
+        // on userStyle alone would starve the wrapper of its layout style.
         const { outer, inner } = splitLayoutProps(input.layoutSplitStyle);
-        // `class` is stripped from the spread here: layoutSplitStyle already folded its resolved
-        // value into `outer`/`inner` above, so forwarding the raw prop too would re-apply its LAYOUT
-        // half onto the inner scroll view a second time (on top of the outer wrapper), the same
-        // wrapper/inner leak `style` already avoids by living in HANDLED_ATTRS.
+        // `class` is stripped here: layoutSplitStyle already folded its resolved value into
+        // outer/inner above, so forwarding the raw prop too would re-apply its LAYOUT half a second time.
         const { class: _classAppliedViaSplit, ...innerScrollOuterProps } = input.scrollOuterProps;
         const innerScrollView = h(input.scrollViewIntrinsic, {
             ...innerScrollOuterProps,
@@ -60,15 +51,12 @@ export const ScrollView = createScrollView({
         }, [input.content]);
         const rc = input.refreshControl;
         if (!isHostType(rc.type)) {
-            // refreshControl is always a component VNode; a symbol/nested-VNode type can't host children.
             // Degrade to the unwrapped scroll view rather than crash (the node ref is already on it).
             dlog('Vue ScrollView.ANDROID refreshControl has no hostable type, rendering scroll view unwrapped');
             return innerScrollView;
         }
         const rcProps = isRecord(rc.props) ? rc.props : {};
         dlog('Vue ScrollView.ANDROID refreshControl=WRAP');
-        // Re-invoke the user's RefreshControl: same type, its own props + the outer/layout style, and the
-        // inner scroll view as the default slot (the Vue analog of cloneElement(refreshControl, {style}, sv)).
         return h(rc.type, { ...rcProps, style: outer }, { default: () => [innerScrollView] });
     },
 });