@symbiote-native/vue 0.1.0

package/build/components/scroll-view/sticky-header.js

@@ -0,0 +1,195 @@
+// Sticky headers: the Vue twin of adapters/react/src/scroll-view-sticky-header.tsx, the JS layer
+// RN implements in ScrollView.js / ScrollViewStickyHeader.js.
+//
+// Source-based: RN does stickiness PURELY IN JS. ScrollView.js (render, ~line 1690)
+// wraps each child whose index is in `stickyHeaderIndices` in a ScrollViewStickyHeader, fed by a
+// single `_scrollAnimatedValue` an Animated.event drives from `onScroll` (ScrollView.js ~line
+// 1095). The native Fabric scroll view does NOT honor the index array on its own, so forwarding
+// `stickyHeaderIndices` to native is a silent no-op. So we replicate the JS layer: subscribe each
+// flagged child to the scroll offset and translate it to stay pinned. The interpolation mirrors
+// ScrollViewStickyHeader.js (non-inverted + inverted branches) and lives, framework-agnostic, in
+// @symbiote-native/components (computeStickyInterpolation, ADR 0024); this file holds the Vue component
+// shell, the layout state, and the child-wrapping. Render shared verbatim with React via the math.
+// Vue supplies only the reactive lifecycle (refs/watch instead of useState/useEffect).
+import { defineComponent, h, isVNode, ref, shallowRef, watch, watchEffect, markRaw, } from '@vue/runtime-core';
+import { AnimatedValue, AnimatedInterpolation, Platform, dlog, } from '@symbiote-native/engine';
+import { computeStickyInterpolation, nextStickyHeaderY, readLayoutNumber, stickyDebounceMs, STICKY_HEADER_Z_INDEX, } from '@symbiote-native/components';
+import { Animated } from '../../modules/animated';
+function isHandler(value) {
+    return typeof value === 'function';
+}
+function isRecord(value) {
+    return typeof value === 'object' && value !== null;
+}
+function isAnimatedValue(value) {
+    return value instanceof AnimatedValue;
+}
+// Read this header's wrapped child's own onLayout off its VNode props, so the sticky wrapper can
+// forward layout to it (RN ScrollViewStickyHeader.js calls the child's onLayout after its own).
+function readChildOnLayout(child) {
+    if (!isRecord(child.props))
+        return undefined;
+    const handler = child.props.onLayout;
+    return isHandler(handler) ? handler : undefined;
+}
+// One sticky header. Measures its own y/height via onLayout, interpolates the shared scroll offset
+// into a translateY that keeps it pinned to the top (or bottom, inverted) until the next header
+// collides with it, and drives that translate through the native driver when available so the pin
+// tracks scroll on the UI thread (no JS jitter). Ported from ScrollViewStickyHeader.js,
+// including the Fabric ShadowTree debounce path. inheritAttrs:false so the IStickyHeaderProps
+// inputs (scrollAnimatedValue/nextHeaderLayoutY/…) never fall through onto Animated.View and reach
+// Fabric as props (scrollAnimatedValue on a host node would crash Android's folly::dynamic).
+export const ScrollViewStickyHeader = defineComponent({
+    name: 'ScrollViewStickyHeader',
+    inheritAttrs: false,
+    setup(_props, { attrs, slots }) {
+        // The scroll-offset value the parent shares, read once (it is stable across renders, the same
+        // markRaw'd AnimatedValue), held by IDENTITY in a const (never run through toReactive). A fresh
+        // fallback keeps working if the invariant (wrapStickyHeaders always supplies it) ever breaks.
+        const scrollAnimatedValue = isAnimatedValue(attrs.scrollAnimatedValue)
+            ? attrs.scrollAnimatedValue
+            : markRaw(new AnimatedValue(0));
+        const measured = ref(false);
+        const layoutY = ref(0);
+        const layoutHeight = ref(0);
+        // The animated node that drives the transform (RN's animatedTranslateY). When the scroll value
+        // is native (attachStickyScroll), this interpolation runs on the UI thread: the smooth pin.
+        // Engine node → shallowRef (held by identity, the reactivity rule); the un-measured identity
+        // stub until the effect below rebuilds it. See .claude/skills/vue-adapter-reactivity.
+        const animatedTranslateY = shallowRef(scrollAnimatedValue.interpolate({ inputRange: [-1, 0], outputRange: [0, 0] }));
+        // The debounced EXPLICIT translateY pushed to the committed transform via
+        // passthroughAnimatedPropExplicitValues, so the Fabric ShadowTree (hit-testing) knows the pinned
+        // position while the native driver animates. null until the listener first fires.
+        const translateY = ref(null);
+        let haveReceivedInitialZeroTranslateY = true;
+        let debounceTimer;
+        watch(translateY, value => {
+            if (value !== 0 && value !== null)
+                haveReceivedInitialZeroTranslateY = false;
+        });
+        // The animated value updates several times per frame during scroll; debounce it and push the
+        // settled value into the committed transform so hit detection stays current (RN: a Fabric-only
+        // issue; symbiote is always Fabric, and worse on Android).
+        const animatedValueListener = ({ value }) => {
+            if (typeof value !== 'number')
+                return;
+            const timeout = stickyDebounceMs(Platform.OS);
+            // A freshly-rebuilt interpolation re-emits 0 to its listeners; swallow that first zero (RN).
+            if (value === 0 && !haveReceivedInitialZeroTranslateY) {
+                haveReceivedInitialZeroTranslateY = true;
+                return;
+            }
+            if (debounceTimer !== undefined)
+                clearTimeout(debounceTimer);
+            debounceTimer = setTimeout(() => {
+                translateY.value = value;
+            }, timeout);
+        };
+        // Rebuild the interpolation whenever the layout / collision inputs change (the Vue twin of RN's
+        // effect, deps [measured, layoutY, layoutHeight, scrollViewHeight, nextHeaderLayoutY, inverted]).
+        // symbiote is always Fabric: listen to the settled value to keep the ShadowTree transform current
+        // for hit-testing (RN attaches this listener only under Fabric). scrollAnimatedValue is the stable
+        // const (RN lists it in deps; it never changes for one ScrollView, so the const is faithful).
+        watchEffect(onCleanup => {
+            const inverted = typeof attrs.inverted === 'boolean' ? attrs.inverted : undefined;
+            const scrollViewHeight = typeof attrs.scrollViewHeight === 'number' ? attrs.scrollViewHeight : undefined;
+            const nextHeaderLayoutY = typeof attrs.nextHeaderLayoutY === 'number' ? attrs.nextHeaderLayoutY : undefined;
+            const { inputRange, outputRange } = computeStickyInterpolation({
+                measured: measured.value,
+                inverted,
+                scrollViewHeight,
+                layoutY: layoutY.value,
+                layoutHeight: layoutHeight.value,
+                nextHeaderLayoutY,
+            });
+            const interpolation = scrollAnimatedValue.interpolate({ inputRange, outputRange });
+            const listenerId = interpolation.addListener(animatedValueListener);
+            animatedTranslateY.value = interpolation;
+            onCleanup(() => {
+                interpolation.removeListener(listenerId);
+                if (debounceTimer !== undefined)
+                    clearTimeout(debounceTimer);
+            });
+        });
+        // Stable function ref (defined once, not re-created per render): record own y/height, mark
+        // measured, fire the wrapper's recorder (onHeaderLayoutY, in attrs.onLayout), then the child's
+        // own onLayout. Matches RN ScrollViewStickyHeader.js._onLayout order.
+        const onLayout = (event) => {
+            const y = readLayoutNumber(event, 'y');
+            const height = readLayoutNumber(event, 'height');
+            if (y !== undefined)
+                layoutY.value = y;
+            if (height !== undefined)
+                layoutHeight.value = height;
+            measured.value = true;
+            const recorder = attrs.onLayout;
+            if (isHandler(recorder))
+                recorder(event);
+            const children = slots.default !== undefined ? slots.default() : [];
+            const child = children[0];
+            const childOnLayout = isVNode(child) ? readChildOnLayout(child) : undefined;
+            if (childOnLayout !== undefined)
+                childOnLayout(event);
+        };
+        return () => {
+            // The EXPLICIT debounced translateY overrides the committed transform for hit-testing, while
+            // `animatedTranslateY` does the smooth (native-driven) pin. See RN ScrollViewStickyHeader.js.
+            const passthroughAnimatedPropExplicitValues = translateY.value !== null
+                ? { style: { transform: [{ translateY: translateY.value }] } }
+                : null;
+            // collapsable:false keeps the wrapper a real Yoga node; zIndex makes the pinned header paint
+            // OVER the rows scrolling under it. The interpolation node passes inside the transform; the
+            // Animated wrapper's reduceProps rasterizes it into a numeric translateY for the committed tree.
+            return h(Animated.View, {
+                style: {
+                    transform: [{ translateY: animatedTranslateY.value }],
+                    zIndex: STICKY_HEADER_Z_INDEX,
+                },
+                onLayout,
+                collapsable: false,
+                passthroughAnimatedPropExplicitValues,
+            }, { default: () => (slots.default !== undefined ? slots.default() : []) });
+        };
+    },
+});
+// Wrap each child flagged by `stickyHeaderIndices` in the sticky header component, fed by the
+// shared scroll AnimatedValue. Mirrors ScrollView.js's render-time children.map (~line 1690) and
+// the React adapter's wrapStickyHeaders. Returns the children unchanged when no indices are flagged.
+//
+// Cross-talk plumbing (RN's _headerLayoutYs + _onStickyHeaderLayout, ScrollView.js:1115-1143):
+// `headerLayoutYs` is a child-index→measured-y map the parent keeps; each header reports its own y
+// through `onHeaderLayoutY` as it measures, and we feed every header the y of the NEXT flagged
+// header (the collision point past which it scrolls off) by looking up its successor's index in
+// `stickyHeaderIndices`. The LAST flagged header has no successor, so its `nextHeaderLayoutY` stays
+// undefined and it sticks indefinitely (correct).
+export function wrapStickyHeaders(children, stickyHeaderIndices, scrollAnimatedValue, invertStickyHeaders, scrollViewHeight, StickyHeaderComponent, headerLayoutYs, onHeaderLayoutY) {
+    if (stickyHeaderIndices === undefined || stickyHeaderIndices.length === 0)
+        return children;
+    const Wrapper = StickyHeaderComponent ?? ScrollViewStickyHeader;
+    return children.map((child, index) => {
+        const indexOfIndex = stickyHeaderIndices.indexOf(index);
+        if (indexOfIndex === -1 || !isVNode(child))
+            return child;
+        // The next flagged header's measured y, by index order in stickyHeaderIndices (RN
+        // ScrollView.js:1695 nextIndex). undefined until that header has measured (or for the last).
+        const nextIndex = stickyHeaderIndices[indexOfIndex + 1];
+        const nextHeaderLayoutY = nextStickyHeaderY(stickyHeaderIndices, indexOfIndex, headerLayoutYs);
+        dlog(`Vue ScrollView sticky-header wrap index=${index} next=${nextIndex} nextY=${nextHeaderLayoutY}`);
+        const props = {
+            key: child.key ?? `sticky-${index}`,
+            nextHeaderLayoutY,
+            // RN _onStickyHeaderLayout: record this header's own y, then push it to the previous header as
+            // its nextHeaderLayoutY. We record into the parent map; the lookup above feeds it forward on
+            // the resulting re-render (the headerLayoutYs bump in scroll-view-shared).
+            onLayout: (event) => {
+                const y = readLayoutNumber(event, 'y');
+                if (y !== undefined)
+                    onHeaderLayoutY(index, y);
+            },
+            scrollAnimatedValue,
+            inverted: invertStickyHeaders,
+            scrollViewHeight,
+        };
+        return h(Wrapper, props, { default: () => [child] });
+    });
+}

package/build/components/section-list/index.d.ts

@@ -0,0 +1,39 @@
+import type { IVirtualizedSectionListHandle } from '@symbiote-native/components';
+import { type IVirtualizedSectionListEmits, type IVirtualizedSectionListProps, type IVirtualizedSectionListSlots } from '../virtualized-section-list';
+export type { ISection } from '../virtualized-section-list';
+export type ISectionListHandle = IVirtualizedSectionListHandle;
+export type ISectionListProps<ItemT> = IVirtualizedSectionListProps<ItemT>;
+export type ISectionListEmits = IVirtualizedSectionListEmits;
+export type ISectionListSlots<ItemT> = IVirtualizedSectionListSlots<ItemT>;
+export declare const SectionList: new <ItemT>(props: (ISectionListProps<ItemT> & ({} | {
+    onRefresh?: (() => any) | undefined;
+    onEndReached?: ((info: {
+        distanceFromEnd: number;
+    }) => any) | undefined;
+    onStartReached?: ((info: {
+        distanceFromStart: number;
+    }) => any) | undefined;
+})) & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps) => import("vue").CreateComponentPublicInstanceWithMixins<ISectionListProps<ItemT> & ({} | {
+    onRefresh?: (() => any) | undefined;
+    onEndReached?: ((info: {
+        distanceFromEnd: number;
+    }) => any) | undefined;
+    onStartReached?: ((info: {
+        distanceFromStart: number;
+    }) => any) | undefined;
+}), {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} | IVirtualizedSectionListEmits, import("vue").PublicProps, {}, false, {}, import("vue").SlotsType<ISectionListSlots<ItemT>>, {}, {}, string, {}, any, import("vue").ComponentProvideOptions, {
+    P: {};
+    B: {};
+    D: {};
+    C: {};
+    M: {};
+    Defaults: {};
+}, (ISectionListProps<ItemT> & {}) | (ISectionListProps<ItemT> & {
+    onRefresh?: (() => any) | undefined;
+    onEndReached?: ((info: {
+        distanceFromEnd: number;
+    }) => any) | undefined;
+    onStartReached?: ((info: {
+        distanceFromStart: number;
+    }) => any) | undefined;
+}), {}, {}, {}, {}, {}>;

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

@@ -0,0 +1,77 @@
+// SectionList, the Vue public list-of-sections component. A thin wrapper over
+// VirtualizedSectionList, mirroring RN's layering (SectionList -> VirtualizedSectionList ->
+// VirtualizedList). All section-flattening / windowing / imperative-scroll logic lives below;
+// this layer re-exposes the same surface under the SectionList name and re-exposes the handle
+// (Vue resolves a parent ref to the exposed object, so the wrapper delegates). The Vue twin of
+// the React adapter's SectionList.
+//
+// Typed-emits generic component (mirrors FlatList / VirtualizedList): a GENERIC setup function
+// `<ItemT,>(props: ISectionListProps<ItemT>, ctx: ICtx<ISectionListEmits>)` so the section inputs
+// (sections/renderItem/…) infer ItemT at the call site. As a pure forwarder it consumes nothing
+// itself — every input rides through $attrs straight onto VirtualizedSectionList; only the three
+// synthesized events (endReached/startReached/refresh) are bridged, gated on listener presence so
+// the inner list keeps its RefreshControl / edge-reached gating.
+import { defineComponent, getCurrentInstance, h, shallowRef, } from '@vue/runtime-core';
+import { VirtualizedSectionList, } from '../virtualized-section-list';
+import { normalizeVueAttrs } from '../../utils/normalize-attrs';
+// VirtualizedSectionList is a generic component (generic construct signature), which h()'s overloads
+// can't resolve. Drive it through a loose functional-component handle (generic-component h() limit).
+const VirtualizedSectionListHost = VirtualizedSectionList;
+function isRecord(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+function isSectionHandle(value) {
+    return isRecord(value) && typeof value.scrollToLocation === 'function';
+}
+const EMIT_KEYS = ['endReached', 'startReached', 'refresh'];
+function buildDelegate(getInner) {
+    return {
+        scrollToLocation: params => getInner()?.scrollToLocation(params),
+        flashScrollIndicators: () => getInner()?.flashScrollIndicators(),
+        getNativeScrollRef: () => getInner()?.getNativeScrollRef() ?? null,
+        getScrollableNode: () => getInner()?.getScrollableNode() ?? null,
+        getScrollResponder: () => getInner()?.getScrollResponder() ?? null,
+        getScrollNode: () => getInner()?.getScrollNode() ?? null,
+        recordInteraction: () => getInner()?.recordInteraction(),
+    };
+}
+export const SectionList = defineComponent(
+// _props is read only by the type system: ISectionListProps<ItemT> is what lets ItemT infer at
+// the call site. As a pure forwarder, SectionList consumes nothing at runtime — it spreads $attrs.
+(_props, { attrs, expose, emit, slots }) => {
+    const inner = shallowRef(null);
+    const setInner = (instance) => {
+        inner.value = isSectionHandle(instance) ? instance : null;
+    };
+    expose(buildDelegate(() => inner.value));
+    // The three section-list events are emits, so Vue strips their onX listeners from $attrs. Detect
+    // listener presence off the instance's own vnode props and bridge each ONLY when listened, so
+    // the inner VirtualizedSectionList (and its inner VirtualizedList) keeps its on-demand gating.
+    const instance = getCurrentInstance();
+    const listens = (onName) => {
+        const vnodeProps = instance?.vnode.props;
+        return vnodeProps != null && typeof vnodeProps[onName] === 'function';
+    };
+    return () => {
+        const endReached = listens('onEndReached')
+            ? (info) => emit('endReached', info)
+            : undefined;
+        const startReached = listens('onStartReached')
+            ? (info) => emit('startReached', info)
+            : undefined;
+        const refresh = listens('onRefresh') ? () => emit('refresh') : undefined;
+        // Pure forwarder: spread $attrs as props and pass the consumer's scoped slots (#item /
+        // #sectionHeader / … ) straight down to VirtualizedSectionList untouched.
+        return h(VirtualizedSectionListHost, {
+            ...normalizeVueAttrs(attrs),
+            ref: setInner,
+            onEndReached: endReached,
+            onStartReached: startReached,
+            onRefresh: refresh,
+        }, slots);
+    };
+}, {
+    name: 'SectionList',
+    inheritAttrs: false,
+    emits: EMIT_KEYS,
+});

package/build/components/switch/index.android.d.ts

@@ -0,0 +1,12 @@
+export declare const Switch: import("vue").DefineSetupFnComponent<import("./shared").ISwitchProps, {
+    valueChange: (value: boolean, event: import("@symbiote-native/engine").ISymbioteEvent) => boolean;
+    'update:modelValue': (value: boolean) => boolean;
+    'update:value': (value: boolean) => boolean;
+}, {}, Omit<import("@symbiote-native/components").ISwitchProps, "onValueChange"> & {
+    modelValue?: boolean;
+    class?: import("@symbiote-native/engine").IClassNameValue;
+} & {
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    "onUpdate:value"?: ((value: boolean) => any) | undefined;
+    onValueChange?: ((value: boolean, event: import("@symbiote-native/engine").ISymbioteEvent) => any) | undefined;
+}, import("vue").PublicProps>;

package/build/components/switch/index.android.js

@@ -0,0 +1,13 @@
+// Switch on Android: AndroidSwitch takes trackColorForTrue / trackColorForFalse plus
+// trackTintColor (the color for the CURRENT value), and snaps native back via the
+// `setNativeValue` command. Metro picks this on an Android host; no Platform.OS read.
+// Mirrors the React adapter's Android binding. See ADR 0020.
+import { createSwitch } from './shared';
+export const Switch = createSwitch({
+    snapBackCommand: 'setNativeValue',
+    trackColorProps: (value, trackColor) => ({
+        trackColorForFalse: trackColor?.false,
+        trackColorForTrue: trackColor?.true,
+        trackTintColor: value ? trackColor?.true : trackColor?.false,
+    }),
+});

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

@@ -0,0 +1,2 @@
+export * from './index.ios';
+export type { ISwitchProps, ISwitchTrackColor } from './shared';

package/build/components/switch/index.ios.d.ts

@@ -0,0 +1,12 @@
+export declare const Switch: import("vue").DefineSetupFnComponent<import("./shared").ISwitchProps, {
+    valueChange: (value: boolean, event: import("@symbiote-native/engine").ISymbioteEvent) => boolean;
+    'update:modelValue': (value: boolean) => boolean;
+    'update:value': (value: boolean) => boolean;
+}, {}, Omit<import("@symbiote-native/components").ISwitchProps, "onValueChange"> & {
+    modelValue?: boolean;
+    class?: import("@symbiote-native/engine").IClassNameValue;
+} & {
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    "onUpdate:value"?: ((value: boolean) => any) | undefined;
+    onValueChange?: ((value: boolean, event: import("@symbiote-native/engine").ISymbioteEvent) => any) | undefined;
+}, import("vue").PublicProps>;

package/build/components/switch/index.ios.js

@@ -0,0 +1,11 @@
+// Switch on iOS: the native Switch takes onTintColor (ON-track) / tintColor (OFF-track) and
+// snaps native back via the `setValue` command. Also the base (switch.ts re-exports it) for
+// headless / web. Mirrors the React adapter's iOS binding. See ADR 0020.
+import { createSwitch } from './shared';
+export const Switch = createSwitch({
+    snapBackCommand: 'setValue',
+    trackColorProps: (_value, trackColor) => ({
+        onTintColor: trackColor?.true,
+        tintColor: trackColor?.false,
+    }),
+});

package/build/components/switch/index.js

@@ -0,0 +1,5 @@
+// Base / default Switch. Re-exports the iOS build. Metro overrides this with switch.ios.ts /
+// switch.android.ts on a real host; under tsx / tsc / web the host resolves here. Filename is
+// the selector, no Platform.OS read. See ADR 0020. Switch is the first component to bring the
+// state half (the reducer) into the Vue adapter: render-and-state, not render-only.
+export * from './index.ios';

package/build/components/switch/shared.d.ts

@@ -0,0 +1,23 @@
+import { type ISwitchPlatform, type ISwitchProps as ISwitchBaseProps, type ISwitchTrackColor } from '@symbiote-native/components';
+import { type IClassNameValue, type ISymbioteEvent } from '@symbiote-native/engine';
+type ISwitchHostPlatform = ISwitchPlatform & {
+    snapBackCommand: string;
+};
+export type ISwitchProps = Omit<ISwitchBaseProps, 'onValueChange'> & {
+    modelValue?: boolean;
+    class?: IClassNameValue;
+};
+export type { ISwitchTrackColor };
+type ISwitchEmits = {
+    valueChange: (value: boolean, event: ISymbioteEvent) => boolean;
+    'update:modelValue': (value: boolean) => boolean;
+    'update:value': (value: boolean) => boolean;
+};
+export declare function createSwitch(platform: ISwitchHostPlatform): import("vue").DefineSetupFnComponent<ISwitchProps, ISwitchEmits, {}, Omit<ISwitchBaseProps, "onValueChange"> & {
+    modelValue?: boolean;
+    class?: IClassNameValue;
+} & {
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    "onUpdate:value"?: ((value: boolean) => any) | undefined;
+    onValueChange?: ((value: boolean, event: ISymbioteEvent) => any) | undefined;
+}, import("vue").PublicProps>;

package/build/components/switch/shared.js

@@ -0,0 +1,129 @@
+// Switch, the Vue lifecycle half. The logic (the lastNativeReport reducer, valueFromChange,
+// the snap-back decision) lives in @symbiote-native/components/state and the render in
+// @symbiote-native/components/view, both shared verbatim with the React adapter. Here Vue supplies
+// the reactivity: a ref holds what native last reported, a function ref grabs the host node,
+// and a post-flush watch snaps native back when the parent rejects a toggle. This is the Vue
+// twin of the React adapter's useReducer + useLayoutEffect + dispatchViewCommand.
+//
+// Inputs arrive as attrs (untyped), so each is narrowed with a runtime guard rather than a
+// cast. onValueChange MUST be stripped from the forwarded attrs: it is not a ViewConfig event
+// (it's derived from the native onChange), so leaking it would reach Fabric as a function prop
+// and crash Android's folly::dynamic.
+import { defineComponent, ref, shallowRef, watch } from '@vue/runtime-core';
+import { renderSwitch, switchReducer, createInitialSwitchState, shouldSnapBack, valueFromChange, } from '@symbiote-native/components';
+import { dispatchViewCommand, isSymbioteNode, dlog, } from '@symbiote-native/engine';
+import { descriptorToVue } from '../../descriptor-to-vue';
+import { normalizeVueAttrs } from '../../utils/normalize-attrs';
+import { resolveModelValue, emitModelUpdate } from '../../utils/model-binding';
+function isRecord(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+function asString(value) {
+    return typeof value === 'string' ? value : undefined;
+}
+function isBoolean(value) {
+    return typeof value === 'boolean';
+}
+// trackColor arrives untyped; keep only the string false/true entries the render fn reads.
+function normalizeTrackColor(value) {
+    if (!isRecord(value))
+        return undefined;
+    const trackColor = {};
+    if (typeof value.false === 'string')
+        trackColor.false = value.false;
+    if (typeof value.true === 'string')
+        trackColor.true = value.true;
+    return trackColor;
+}
+// The render fn's style param is a plain object; array/registered styles degrade to undefined
+// (the engine flattens those on its own). Same narrowing the Vue ActivityIndicator uses.
+function isViewStyleObject(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+// The prop/handler keys the lifecycle consumes itself; everything else (accessibility,
+// testID, …) forwards onto the host node. onValueChange is pure JS and must never reach Fabric.
+const HANDLED_ATTRS = [
+    'value',
+    'modelValue',
+    'disabled',
+    'trackColor',
+    'thumbColor',
+    'ios_backgroundColor',
+    'style',
+    'onValueChange',
+];
+function forwardAttrs(attrs) {
+    const result = {};
+    for (const key of Object.keys(attrs)) {
+        if (!HANDLED_ATTRS.includes(key))
+            result[key] = attrs[key];
+    }
+    return result;
+}
+export function createSwitch(platform) {
+    return defineComponent((_props, { attrs: rawAttrs, emit }) => {
+        // shallowRef, NOT ref: the engine node must be held by IDENTITY. A plain ref() runs the
+        // assigned object through Vue's toReactive(), so reading nodeRef.value back yields a
+        // reactive Proxy, a different object than the raw node. The engine's mirror is a WeakMap
+        // keyed on the raw node, so every imperative command (dispatchViewCommand / measure /
+        // setNativeProps) would miss on the Proxy and silently no-op. shallowRef stores the raw
+        // node untouched. General rule for this adapter: host nodes live in shallowRef / markRaw.
+        const nodeRef = shallowRef(null);
+        const state = ref(createInitialSwitchState());
+        // The host node our Vue renderer creates IS an engine SymbioteNode; Vue hands it to this
+        // function ref on mount. A stable function ref (defined once) isn't re-invoked per patch.
+        const setNodeRef = (el) => {
+            nodeRef.value = isSymbioteNode(el) ? el : null;
+        };
+        const handleChange = (event) => {
+            // Vue-facing event is emitted here; the host still receives this internal onChange
+            // handler so the controlled snap-back state stays synchronized with native.
+            const next = valueFromChange(event);
+            dlog(`Switch onChange value=${String(next)} eventCount=${String(event.nativeEvent.eventCount)}`);
+            if (next === undefined)
+                return;
+            emit('valueChange', next, event);
+            emitModelUpdate(emit, next);
+            state.value = switchReducer(state.value, { type: 'native-reported', value: next });
+        };
+        // Snap-back: when native reported a value the parent rejected (the value prop did not
+        // change), command the JS value back down: the controlled-Switch correction RN does via
+        // SwitchCommands.setValue. The decision is shared with React (shouldSnapBack); only the
+        // command name is platform-imperative. flush:'post' so the engine has committed the node
+        // before the command reads its Fabric handle.
+        watch(() => ({
+            fabricValue: resolveModelValue(rawAttrs, isBoolean) === true,
+            switchState: state.value,
+        }), ({ fabricValue, switchState }) => {
+            const node = nodeRef.value;
+            if (node === null)
+                return;
+            if (!shouldSnapBack(switchState, fabricValue)) {
+                dlog(`Switch snap-back no-op reported=${String(switchState.lastNativeReport)} value=${fabricValue}`);
+                return;
+            }
+            dlog(`Switch ${platform.snapBackCommand} snap-back reported=${String(switchState.lastNativeReport)} value=${fabricValue}`);
+            dispatchViewCommand(node, platform.snapBackCommand, [fabricValue]);
+        }, { flush: 'post' });
+        return () => {
+            const attrs = normalizeVueAttrs(rawAttrs);
+            return descriptorToVue(renderSwitch({
+                value: resolveModelValue(attrs, isBoolean) === true,
+                disabled: typeof attrs.disabled === 'boolean' ? attrs.disabled : undefined,
+                trackColor: normalizeTrackColor(attrs.trackColor),
+                thumbColor: asString(attrs.thumbColor),
+                ios_backgroundColor: asString(attrs.ios_backgroundColor),
+                style: isViewStyleObject(attrs.style) ? attrs.style : undefined,
+                passthrough: { ...forwardAttrs(attrs), ref: setNodeRef, onChange: handleChange },
+            }, platform));
+        };
+    }, {
+        name: 'Switch',
+        inheritAttrs: false,
+        emits: {
+            valueChange: (_value, _event) => true,
+            'update:modelValue': (_value) => true,
+            'update:value': (_value) => true,
+        },
+    });
+}

package/build/components/text-input/index.d.ts

@@ -0,0 +1,24 @@
+import { type ITextInputProps as ITextInputBaseProps, type ITextInputHandle } from '@symbiote-native/components';
+import { type IClassNameValue, type ISymbioteEvent } from '@symbiote-native/engine';
+export type ITextInputProps = Omit<ITextInputBaseProps, 'onValueChange' | 'onFocus' | 'onBlur'> & {
+    modelValue?: string;
+    class?: IClassNameValue;
+};
+export type { ITextInputHandle };
+type ITextInputEmits = {
+    valueChange: (text: string, event: ISymbioteEvent) => boolean;
+    focus: (event: ISymbioteEvent) => boolean;
+    blur: (event: ISymbioteEvent) => boolean;
+    'update:modelValue': (text: string) => boolean;
+    'update:value': (text: string) => boolean;
+};
+export declare const TextInput: import("vue").DefineSetupFnComponent<ITextInputProps, ITextInputEmits, {}, Omit<ITextInputBaseProps, "onFocus" | "onBlur" | "onValueChange"> & {
+    modelValue?: string;
+    class?: IClassNameValue;
+} & {
+    "onUpdate:modelValue"?: ((text: string) => any) | undefined;
+    "onUpdate:value"?: ((text: string) => any) | undefined;
+    onValueChange?: ((text: string, event: ISymbioteEvent) => any) | undefined;
+    onFocus?: ((event: ISymbioteEvent) => any) | undefined;
+    onBlur?: ((event: ISymbioteEvent) => any) | undefined;
+}, import("vue").PublicProps>;