@symbiote-native/vue 0.3.1 → 0.3.3

package/README.md

@@ -5,7 +5,7 @@ Vue, on the *same* untouched core as React, with React Native's own renderer nev
 is a `@vue/runtime-core` `createRenderer` whose nodeOps map each mutation onto the engine's
 four-call API; `@symbiote-native/engine` does the clone-on-write commit into Fabric.
 
-Vue is the **proof the core is genuinely framework-agnostic** (milestone R4): a second, non-React,
+Vue is the **proof the core is genuinely framework-agnostic**: a second, non-React,
 mutation-oriented framework driving the already-validated engine.
 
 <div align="center">
@@ -114,8 +114,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 — see
-the `vue-adapter-reactivity` notes and `core/engine/src/post-commit.ts`.
+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`.
 
 ---
 

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

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

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

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

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

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

package/build/components/refresh-control.js

@@ -1,4 +1,4 @@
-// RefreshControl, the Vue lifecycle half (ADR 0024 Phase 2). On iOS this is the PullToRefreshView
+// 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

package/build/components/safe-area-view.js

@@ -1,4 +1,4 @@
-// SafeAreaView, the Vue lifecycle half (ADR 0024 Phase 2). A plain view whose native side
+// SafeAreaView, the Vue lifecycle half. A plain view whose native side
 // insets its children to the safe area (notch, rounded corners, system bars); there is no
 // JS-side translation, so this maps style + children straight onto the intrinsic. The Vue twin
 // of the React adapter's SafeAreaView. Vue takes children via slots, folds aria/role through

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

@@ -1,4 +1,4 @@
-// ScrollView on Android (ADR 0024 Phase 2). An Android ScrollView accepts only ONE child, so a
+// 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

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

@@ -1,4 +1,4 @@
-// ScrollView on iOS (ADR 0024 Phase 2). The RefreshControl is a CHILD of the scroll view, rendered
+// ScrollView on iOS. The RefreshControl is a CHILD of the scroll view, rendered
 // as a SIBLING BEFORE the content container (RN ScrollView.js: {refreshControl}{contentContainer}).
 // The user's RefreshControl VNode renders as-is; its default slot is empty on iOS, so it is a
 // childless sibling. Also the base (scroll-view.ts re-exports it) for headless / web. Metro picks

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

@@ -1,4 +1,4 @@
 // Base / default ScrollView. Re-exports the iOS build. Metro overrides this with
 // scroll-view.ios.ts / scroll-view.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 / 0024.
+// resolves here. Filename is the selector, no Platform.OS read.
 export * from './index.ios.js';

package/build/components/scroll-view/shared.js

@@ -1,4 +1,4 @@
-// ScrollView, the Vue lifecycle half (Phase 1: base, ADR 0024). The Fabric tree is nested:
+// ScrollView, the Vue lifecycle half. The Fabric tree is nested:
 // a scroll view wraps a content view that holds the children (RN's ScrollView.js shape). The
 // platform-invariant math (decelerationRate, the per-axis intrinsics/base style, the
 // content-size dedupe, the imperative handle, the aria/role fold) lives in @symbiote-native/components,
@@ -13,8 +13,8 @@
 // (onScroll/onLayout/…) ARE ViewConfig events, so they forward raw and routeProp turns them into
 // listeners.
 //
-// Phase 2 (ADR 0024 §4): RefreshControl is wired through the platform assemble (iOS sibling /
-// Android wrap). Phase 3 (§5): sticky headers are real. The scroll AnimatedValue (markRaw, held by
+// RefreshControl is wired through the platform assemble (iOS sibling /
+// Android wrap). Sticky headers are real. The scroll AnimatedValue (markRaw, held by
 // identity), the headerLayoutYs cross-talk map + bump, the viewport-height capture, and the
 // onScroll composition (native attach vs Animated.event) all live here; the per-header component and
 // the children wrap live in scroll-view-sticky-header.ts (the Vue twin of the React file).
@@ -37,8 +37,7 @@ function isStyleProp(value) {
 // the renderer's own patchProp — fine for the single-node Phase 1 path. But the Android
 // RefreshControl wrap (index.android.ts) reads userStyle alone to splitLayoutProps() the outer
 // wrapper's layout style, BEFORE that later resolution ever runs, so a class-only layout prop
-// (flex, height, gap, …) never reaches the wrapper and it collapses to nothing. See the
-// symbiote-sfc-style-compiler skill for the failure this caused on a real Android device.
+// (flex, height, gap, …) never reaches the wrapper and it collapses to nothing.
 // isClassNameProp is @symbiote-native/engine's own isClassNameValue guard (shared, not redeclared —
 // routeProp's centralized class+style merge needs the identical narrowing).
 const isClassNameProp = isClassNameValue;
@@ -90,15 +89,15 @@ export function createScrollView(platform) {
         // shallowRef, NOT ref: the engine node must be held by IDENTITY. A plain ref() runs the
         // node through Vue's toReactive(), handing back a reactive Proxy, a different object than
         // the raw node the engine's mirror (a WeakMap) is keyed on, so dispatchViewCommand would
-        // miss and every scrollTo/scrollToEnd/flashScrollIndicators silently no-op. See
-        // .claude/skills/vue-adapter-reactivity. This is the same rule as the Switch host node.
+        // miss and every scrollTo/scrollToEnd/flashScrollIndicators silently no-op. This is the
+        // same rule as the Switch host node.
         const nodeRef = shallowRef(null);
         const setNodeRef = (el) => {
             nodeRef.value = isSymbioteNode(el) ? el : null;
         };
         // The imperative handle reads the node through a LAZY getter (() => nodeRef.value), not the
         // node captured once: it is null until the element commits, so an eager capture would freeze
-        // null and every command would no-op (ADR 0024 §3). expose() makes it the value a parent ref
+        // null and every command would no-op. expose() makes it the value a parent ref
         // sees: the Vue twin of React's useImperativeHandle(forwardedRef, buildScrollViewHandle(…)).
         expose(buildScrollViewHandle(() => nodeRef.value));
         // The last-seen content size, kept here (setup scope, persists across renders) to dedupe
@@ -169,7 +168,7 @@ export function createScrollView(platform) {
                 : isStyleProp(attrs.contentContainerStyle)
                     ? attrs.contentContainerStyle
                     : undefined;
-            // Sticky headers (Phase 3, ADR 0024): a pure-JS layer; the native scroll view ignores
+            // Sticky headers are a pure-JS layer; the native scroll view ignores
             // stickyHeaderIndices, so we wrap the flagged children below and drive their translateY off
             // the scroll offset. invertStickyHeaders narrows to the inverted (stick-to-bottom) branch.
             const stickyHeaderIndices = isNumberArray(attrs.stickyHeaderIndices)

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

@@ -8,7 +8,7 @@
 // `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
+// @symbiote-native/components (computeStickyInterpolation); 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';
@@ -55,7 +55,7 @@ export const ScrollViewStickyHeader = defineComponent({
         // 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.
+        // stub until the effect below rebuilds it.
         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

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

@@ -1,7 +1,7 @@
 // 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.
+// Mirrors the React adapter's Android binding.
 import { createSwitch } from './shared.js';
 export const Switch = createSwitch({
     snapBackCommand: 'setNativeValue',

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

@@ -1,6 +1,6 @@
 // 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.
+// headless / web. Mirrors the React adapter's iOS binding.
 import { createSwitch } from './shared.js';
 export const Switch = createSwitch({
     snapBackCommand: 'setValue',

package/build/components/switch/index.js

@@ -1,5 +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
+// the selector, no Platform.OS read. 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.js';

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

@@ -84,7 +84,7 @@ export const TextInput = defineComponent((_props, { attrs: rawAttrs, emit, expos
     // through Vue's toReactive(), handing back a reactive Proxy, a different object than the raw
     // node the engine's WeakMap mirror is keyed on, so every imperative command
     // (dispatchViewCommand / focus / blur / setTextAndSelection) would miss and silently no-op.
-    // See .claude/skills/vue-adapter-reactivity. Same rule as the Switch / ScrollView host node.
+    // Same rule applies to the Switch / ScrollView host node.
     const nodeRef = shallowRef(null);
     const setNodeRef = (el) => {
         nodeRef.value = isSymbioteNode(el) ? el : null;

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

@@ -18,16 +18,16 @@
 // bridge is wired ONLY when the consumer actually listens (read off the instance vnode props),
 // keeping behavior identical to the prop-callback era.
 //
-// Lists have no Descriptor render fn (the cell content is the framework's own children); see
-// core/components/.docs-note-lists.md. Cells/spacers are built with h() directly off the plan.
+// Lists have no Descriptor render fn (the cell content is the framework's own children).
+// Cells/spacers are built with h() directly off the plan.
 //
-// Reactivity gotcha (.claude/skills/vue-adapter-reactivity): the ScrollView's exposed handle
-// is held in a shallowRef so the engine node it closes over is reached by identity; a deep
-// ref would proxy it and the imperative scroll commands would silently no-op.
+// Reactivity gotcha: the ScrollView's exposed handle is held in a shallowRef so the engine
+// node it closes over is reached by identity; a deep ref would proxy it and the imperative
+// scroll commands would silently no-op.
 import { computed, defineComponent, getCurrentInstance, h, isVNode, onBeforeUnmount, ref, shallowRef, watch, } from '@vue/runtime-core';
 import { DEFAULT_END_REACHED_THRESHOLD, DEFAULT_INITIAL_NUM_TO_RENDER, DEFAULT_MAX_TO_RENDER_PER_BATCH, DEFAULT_START_REACHED_THRESHOLD, DEFAULT_UPDATE_CELLS_BATCHING_PERIOD, DEFAULT_WINDOW_SIZE, EMPTY_OFFSET, FIRST_INDEX, INVERTED_X_STYLE, INVERTED_Y_STYLE, NO_CONTENT_LENGTH_SENT, averageMeasuredLength, buildListPlan, buildOffsets, buildViewabilityPairs, computeEndReached, computeStartReached, computeViewableSet, computeWindow, diffViewable, highestMeasuredIndex, maxMinimumViewTime, offsetForIndex, readLayoutLength, readScrollOffset, throttleWindow, } from '@symbiote-native/components';
 import { dlog, } from '@symbiote-native/engine';
-import { ScrollView } from '../scroll-view/index.js';
+import { ScrollView } from '../scroll-view';
 import { RefreshControl } from '../refresh-control.js';
 import { normalizeVueAttrs } from '../../utils/normalize-attrs.js';
 import { componentFromSlot } from '../../utils/slots-to-render-props.js';
@@ -133,8 +133,7 @@ export const VirtualizedList = defineComponent((props, { attrs, expose, emit, sl
     const separatorVersion = ref(EMPTY_OFFSET);
     // shallowRef, NOT ref: the ScrollView handle closes over the engine scroll node, reached by
     // identity through the engine's WeakMap mirror. A deep ref would proxy the object and every
-    // imperative scroll (scrollToOffset/Index/…) would miss the node and silently no-op. See
-    // .claude/skills/vue-adapter-reactivity.
+    // imperative scroll (scrollToOffset/Index/…) would miss the node and silently no-op.
     const scrollHandle = shallowRef(null);
     const setScrollHandle = (instance) => {
         scrollHandle.value = isScrollViewHandle(instance) ? instance : null;

package/build/create-tunnel.js

@@ -1,6 +1,7 @@
-// createTunnel — the Vue twin of the React adapter's create-tunnel.ts (see its header, plus
-// the react-adapter-portal / vue-adapter-directives skills, for the full "why not just
-// extend Teleport across surfaces" rationale). `Out` lives in whichever component should
+// createTunnel — the Vue twin of the React adapter's create-tunnel.ts. Teleport only moves
+// content within a single surface's own tree, so sharing content ACROSS two independently
+// mounted surfaces needs a different mechanism: a plain shared reactive registry instead of
+// a Fabric-tree relocation. `Out` lives in whichever component should
 // PAINT the content; its own reactive read makes THAT surface's normal render/commit pick it
 // up — no cross-surface reach-in, no rootTag lookup, works whether In and Out share a
 // surface or not.

package/build/host-instance/index.js

@@ -21,8 +21,7 @@ export function findNodeHandle(componentOrHandle) {
     if (typeof candidate === 'number')
         return candidate;
     // A plain ref() would have wrapped the node in a reactive Proxy; the engine mirror is
-    // keyed on the RAW node, so recover it before the lookup or getNativeTag misses. See
-    // the vue-adapter-reactivity skill.
+    // keyed on the RAW node, so recover it before the lookup or getNativeTag misses.
     const node = toRaw(candidate);
     if (isSymbioteNode(node)) {
         const tag = getNativeTag(node) ?? null;

package/build/index.js

@@ -3,7 +3,7 @@
 // lives in the engine, shared with every other adapter. App code names only @symbiote-native/vue.
 export { mount, unmount } from './render.js';
 // createTunnel: cross-surface content sharing (Teleport stays same-surface-only by design —
-// see create-tunnel.ts and the vue-adapter-directives skill for why).
+// see create-tunnel.ts for why).
 export { createTunnel } from './create-tunnel.js';
 export { View, Text } from './components.js';
 // findNodeHandle: RN's ref -> native reactTag lookup, the Vue twin of the React adapter's
@@ -17,17 +17,17 @@ export { Image, setImageSourceResolver } from './components/image.js';
 // First component off the shared @symbiote-native/components layer: render-only, drives the
 // agnostic renderActivityIndicator through descriptorToVue. Proof the layer is reusable:
 // the render fn is shared verbatim with React; Vue supplies only the bridge.
-export { ActivityIndicator } from './components/activity-indicator/index.js';
+export { ActivityIndicator } from './components/activity-indicator';
 // First component to bring the state half into Vue (the lastNativeReport reducer + the
 // snap-back watch); render shared verbatim with React, Vue supplies the reactive lifecycle.
-export { Switch } from './components/switch/index.js';
-// ScrollView. Full parity (ADR 0024): vertical + horizontal, every pass-through prop, the
+export { Switch } from './components/switch';
+// ScrollView. Full parity: vertical + horizontal, every pass-through prop, the
 // synthesized onContentSizeChange, the imperative handle via expose() + shallowRef, RefreshControl
-// (iOS sibling / Android wrap, Phase 2), and sticky headers (Phase 3: the scroll AnimatedValue,
+// (iOS sibling / Android wrap), and sticky headers (the scroll AnimatedValue,
 // the headerLayoutYs cross-talk, and the per-header Animated.View wrap). The pure math (intrinsics,
 // decelerationRate, content-size dedupe, the handle, the sticky interpolation) is shared verbatim
 // with React from @symbiote-native/components.
-export { ScrollView } from './components/scroll-view/index.js';
+export { ScrollView } from './components/scroll-view';
 // Pressable family. Full parity with React (the 3-layer split): the press state machine + render
 // decisions are shared in @symbiote-native/components; Vue supplies the reactivity + descriptor bridge.
 export { Pressable } from './components/pressable.js';
@@ -45,7 +45,7 @@ export { VirtualizedList } from './components/virtualized-list/index.js';
 export { FlatList } from './components/flat-list/index.js';
 export { VirtualizedSectionList } from './components/virtualized-section-list/index.js';
 export { SectionList } from './components/section-list/index.js';
-// Phase 2 (ADR 0024): SafeAreaView + RefreshControl, wired into ScrollView with the iOS-sibling /
+// SafeAreaView + RefreshControl, wired into ScrollView with the iOS-sibling /
 // Android-wrap platform split. RefreshControl hosts the wrapped scroll view via its default slot.
 export { SafeAreaView } from './components/safe-area-view.js';
 export { RefreshControl } from './components/refresh-control.js';
@@ -54,12 +54,12 @@ export { descriptorToVue } from './descriptor-to-vue.js';
 // external wrapper package (e.g. @symbiote-native/slider/vue over a third-party native view) can fold
 // its incoming attrs through the SAME transform rather than reimplementing it.
 export { normalizeVueAttrs } from './utils/normalize-attrs.js';
-// resolveModelValue/emitModelUpdate: the v-model (Rule 6, vue-adapter-events skill) helper every
+// resolveModelValue/emitModelUpdate: the v-model helper every
 // controlled-value component uses. Exported for the same external-package reason as
 // normalizeVueAttrs above (e.g. @symbiote-native/slider/vue).
 export { resolveModelValue, emitModelUpdate } from './utils/model-binding.js';
 export { createSymbioteRenderer } from './renderer.js';
-// Animated (ADR 0024 Phase 3a): Animated.View/Text/Image + the lazy Animated.ScrollView over the
+// Animated: Animated.View/Text/Image + the lazy Animated.ScrollView over the
 // Vue primitives, with the value graph / easing / drivers spread from @symbiote-native/engine. The wrap
 // mechanism (createAnimatedComponent) is the Vue twin of React's; the pure leaves live in the
 // engine.

package/build/modules/animated/create-animated-component.js

@@ -1,7 +1,7 @@
 // createAnimatedComponent: the Vue twin of the React wrapper. It wraps a base component
 // (View / Text / Image / ScrollView / any) so it accepts AnimatedNodes in its props.
 // Same JS-driven path, NO native driver in the hot loop: a frame is the scoped commit
-// setNativeProps drives from the AnimatedProps leaf (ADR 0016). The framework-agnostic
+// setNativeProps drives from the AnimatedProps leaf. The framework-agnostic
 // pieces (reduceProps / readPassthroughStyle / resolveHostNode / isAnimatedNode + the
 // AnimatedProps leaf itself) live in @symbiote-native/engine, shared verbatim with React; here
 // Vue supplies only the lifecycle.
@@ -40,7 +40,7 @@ export function createAnimatedComponent(Component) {
             // The committed host node, held by IDENTITY in a shallowRef (the reactivity rule: a deep
             // ref() would run it through toReactive() and hand back a Proxy, so AnimatedProps.setNativeView
             // / attachNativeEventHandler would miss the engine's WeakMap mirror, keyed on the raw node).
-            // See .claude/skills/vue-adapter-reactivity. Same rule as Switch / ScrollView host nodes.
+            // Same rule as Switch / ScrollView host nodes.
             const nodeRef = shallowRef(null);
             // The base component's public instance (a ScrollView handle, or the host node for View).
             // Forwarded to a parent ref via expose(). shallowRef: it may itself BE an engine node.

package/build/modules/animated/index.js

@@ -1,12 +1,12 @@
 // The Animated namespace for @symbiote-native/vue: the Vue twin of adapters/react/src/animated/index.ts.
 // createAnimatedComponent applied to the Vue primitives gives Animated.View / Text / Image; the
 // value graph, easing and imperative drivers come from @symbiote-native/engine (framework-agnostic,
-// JS-driven, ADR 0016), spread in verbatim. Both halves meet here so the familiar surface,
+// JS-driven), spread in verbatim. Both halves meet here so the familiar surface,
 // `Animated.timing(new Animated.Value(0), …).start()`, works against the Vue-driven engine.
 import { AnimatedValue, AnimatedValueXY, AnimatedColor, AnimatedMock, Easing, Platform, timing, spring, decay, parallel, sequence, stagger, loop, delay, add, subtract, multiply, divide, modulo, diffClamp, event, forkEvent, unforkEvent, } from '@symbiote-native/engine';
 import { View, Text } from '../../components.js';
 import { Image } from '../../components/image.js';
-import { ScrollView } from '../../components/scroll-view/index.js';
+import { ScrollView } from '../../components/scroll-view';
 import { createAnimatedComponent } from './create-animated-component.js';
 export { createAnimatedComponent } from './create-animated-component.js';
 // View/Text are pure host primitives; Image is the functional renderImage wrapper, and all expose

package/build/renderer.js

@@ -1,7 +1,7 @@
 // A Vue 3 custom renderer over @symbiote-native/engine. Each RendererOptions method maps onto
 // the engine's tiny mutation API; the engine owns all Fabric clone-on-write, so Vue
 // drives the exact same retained tree React does: the proof the core is framework-
-// agnostic (M3 / R4).
+// agnostic.
 import { createRenderer } from '@vue/runtime-core';
 import { appendChild, createAnchor, createElement, createRawText, dlog, insertBefore, removeChild, routeProp, setText, toPublicInstance, RAW_TEXT_COMPONENT, SymbioteSurface, } from '@symbiote-native/engine';
 import { descriptorFor } from '@symbiote-native/components';
@@ -24,8 +24,7 @@ export function createSymbioteRenderer(surface) {
             // the raw node so a template/function ref to a host element exposes it exactly like
             // React's getPublicInstance. toPublicInstance mutates in place and returns the SAME node
             // identity, so the engine commit mirror (keyed on the raw node) still resolves it — the
-            // ref must keep holding this raw node by identity (shallowRef), never a deep ref. See the
-            // vue-adapter-reactivity skill.
+            // ref must keep holding this raw node by identity (shallowRef), never a deep ref.
             dlog(`vue createElement ${descriptor.component} -> public instance`);
             return toPublicInstance(node);
         },
@@ -40,8 +39,8 @@ export function createSymbioteRenderer(surface) {
         },
         // Fragment / v-if / v-for placeholder. A real retained node so insert/nextSibling/
         // parentNode ordering stays correct, but the engine's commit walk skips it: no
-        // native view is ever created. (wolf-tui fakes a comment with an empty text node;
-        // here an empty RCTRawText would actually paint, so an anchor is the right call.)
+        // native view is ever created. (A comment can't just be an empty text node here —
+        // an empty RCTRawText would actually paint, so an anchor is the right call.)
         createComment() {
             return createAnchor();
         },

package/build/runtime-helpers.js

@@ -9,8 +9,8 @@
 // the interception point: it supplies our OWN implementation under the same export name, so the
 // compiler's import keeps resolving and the directive actually does something.
 //
-// See the vue-adapter-directives skill for the full rationale and scope (what this does and does
-// NOT cover — native-element v-model is a separate, out-of-scope case).
+// Scope: this covers only Vue's own template directives (v-show, Teleport); native-element
+// v-model is a separate, out-of-scope case.
 export * from '@vue/runtime-core';
 import { defineComponent, h, Teleport as VueTeleport, } from '@vue/runtime-core';
 import { isSymbioteNode, setNativeProps, whenCommitted, } from '@symbiote-native/engine';
@@ -21,7 +21,7 @@ import { isSymbioteNode, setNativeProps, whenCommitted, } from '@symbiote-native
 // whenCommitted, not a direct call: Vue's `mounted` hook fires synchronously during the patch
 // pass, but this renderer coalesces the actual Fabric commit onto a microtask
 // (surface.requestCommit()), so the node may have no committed tag yet — the same async-commit
-// race TextInput's autoFocus guards against (see vue-adapter-reactivity). A bare setNativeProps
+// race TextInput's autoFocus guards against. A bare setNativeProps
 // here would silently no-op with no retry on the very first mount.
 const pendingShowCommits = new WeakMap();
 function applyShow(el, value) {

package/build/utils/component-helpers.js

@@ -2,10 +2,11 @@
 //
 // Vue's `defineComponent` has no overload for a GENERIC setup function with separate runtime
 // options, so a component generic over an item type (the list family) cannot type its emit payloads
-// off that generic the normal way. The escape hatch (the symbiote port of pd-web-kit's pattern): a
+// off that generic the normal way. The escape hatch: a
 // generic setup FUNCTION `<T,>(props: IProps<T>, ctx: ICtx<IEmits<T>>) => render`, plus the runtime
 // options passed as a second arg cast through `as unknown as undefined` (the cast is sanctioned ONLY
-// here — it is the only way to express a generic component in plain TS; see CLAUDE.md no-`as` rule).
+// here, as an explicit exception to the project's no-`as`-cast rule — it is the only way to express
+// a generic component in plain TS).
 //
 // `ICtx` is a thin wrapper over Vue's SetupContext that lets the generic emits type E flow through,
 // so `emit('viewableItemsChanged', info)` types `info` as `IViewableItemsChangedInfo<T>` and the

package/build/utils/model-binding.js

@@ -2,8 +2,7 @@
 // `v-model="x"` compiles to prop `modelValue` + emit `update:modelValue`; named `v-model:value="x"`
 // compiles to prop `value` + emit `update:value`. These are independent compiler targets, not
 // alternatives, so a component accepts either input and fires both update events rather than
-// picking one. The RN-parity `value` prop/emit pair is untouched either way. See the
-// vue-adapter-events skill (Rule 6) for the read-every-site gotcha this exists to solve.
+// picking one. The RN-parity `value` prop/emit pair is untouched either way.
 export function resolveModelValue(attrs, isValid) {
     if (isValid(attrs.modelValue))
         return attrs.modelValue;

package/build/utils/slots-to-render-props.js

@@ -3,8 +3,8 @@
 // (#item / #separator / #header / #footer / #empty / #sectionHeader / #sectionFooter /
 // #sectionSeparator) — the idiomatic Vue surface; React's twin is the renderItem /
 // ItemSeparatorComponent prop family. This is the ONE place that translation lives, so a list's
-// own body reads a single source (its slots), never a renderItem prop. Vue-only lifecycle glue,
-// so it belongs in the adapter (adapters_stay_thin): the shared windowing math is untouched.
+// own body reads a single source (its slots), never a renderItem prop. This is Vue-only lifecycle
+// glue, so it belongs in the adapter, not the shared layer: the windowing math itself is untouched.
 import {} from '@vue/runtime-core';
 // A component-style renderer (ItemSeparatorComponent / SectionSeparatorComponent) is invoked by the
 // list as h(component, props). Expose the slot as a functional component so its scope props reach

package/metro-css-parser.cjs

@@ -10,7 +10,7 @@
 // vue-tsx's babelTransformerPath for standalone .css/.module.css file imports —
 // metro-vue-transformer.cjs (the .vue SFC transformer) requires @symbiote-native/css-parser
 // directly instead, since it needs the individual parse/compile functions, not a Metro
-// transformer object. See the symbiote-sfc-style-compiler skill.
+// transformer object.
 // createCssMetroTransformer is a factory, not a ready transformer — Metro's
 // babelTransformerPath needs the actual {transform, getCacheKey} object it returns,
 // not the css-parser package barrel.

package/metro-vue-transformer.cjs

@@ -2,18 +2,16 @@
 // Vue plugin (unplugin-vue ships vite/webpack/esbuild/rollup adapters, not Metro), so we do
 // the single-pass compile here: parse the SFC, compile <script setup> + <template> into one
 // component module, then hand the JS to RN's own babel transformer. This is the Metro twin
-// of what @vitejs/plugin-vue does for Vite; the 'vue'→runtime-core rewrite is wolf-tui's
-// pattern (a custom, non-DOM renderer needs the compiler helpers from @vue/runtime-core,
-// not from vue/runtime-dom).
+// of what @vitejs/plugin-vue does for Vite; the 'vue'→runtime-core rewrite is needed because
+// a custom, non-DOM renderer needs the compiler helpers from @vue/runtime-core, not from
+// vue/runtime-dom.
 //
 // Retargeted at @symbiote-native/vue/runtime-helpers rather than bare @vue/runtime-core: that shim
 // re-exports runtime-core verbatim PLUS supplies our own `vShow` (compiled v-show imports it by
-// name, and only @vue/runtime-dom's DOM-based version exists otherwise — see the
-// vue-adapter-directives skill).
+// name, and only @vue/runtime-dom's DOM-based version exists otherwise).
 //
 // Ships as a package-level export (`@symbiote-native/vue/metro-vue-transformer`) rather than living
-// in each consuming app: a consumer's own metro.config.js just points babelTransformerPath at it —
-// see the symbiote-sfc-style-compiler skill.
+// in each consuming app: a consumer's own metro.config.js just points babelTransformerPath at it.
 
 const { parse, compileScript } = require('@vue/compiler-sfc');
 const { createCompoundExpression } = require('@vue/compiler-core');
@@ -35,8 +33,8 @@ const upstreamTransformer = resolveUpstreamTransformer();
 
 // Rewrites a Vue template AST so every `class`/`:class` binding on an element resolves
 // against this file's scoped class names at the compiled call site, via @symbiote-native/engine's
-// scopeClassName(value, localNames, scopeId) — see the symbiote-sfc-style-compiler skill for
-// the full design (why AST-level, not a raw-text regex: Vue itself merges a static `class=`
+// scopeClassName(value, localNames, scopeId). This runs at the AST level rather than as a
+// raw-text regex: Vue itself merges a static `class=`
 // and a dynamic `:class=` on the same element into ONE codegen entry, and text substitution
 // can't reproduce that merge safely; letting Vue's own transformElement do the merge on our
 // already-rewritten nodes reuses that logic instead of reimplementing it).
@@ -147,7 +145,7 @@ async function compileSfc(src, filename) {
 
   // `descriptor.styles` is already parsed by @vue/compiler-sfc itself (one entry per <style>
   // block, `.content` pre-trimmed, `.scoped` already a plain boolean flag), so there's no need
-  // to re-extract style blocks with a regex the way wolf-tui's Vite plugin does.
+  // to re-extract style blocks with a regex.
   //
   // A scoped block's classes get their key SUFFIXED with this file's scopeId before
   // registration (`card` -> `card__data-v-xxxxxxxx`), so two components can each define their
@@ -167,8 +165,7 @@ async function compileSfc(src, filename) {
   // registerStyles() call, just under a suffixed key — the only new output is a plain name->
   // scopedName object (`$style` by default, or the block's `module="name"` value) emitted as a
   // preamble const, so `:class="$style.card"` passes the already-scoped string straight to
-  // resolveClassName's existing exact-match path (no registry changes needed, see the
-  // symbiote-sfc-style-compiler skill). Unlike `scoped`, a module block's classes are NEVER
+  // resolveClassName's existing exact-match path (no registry changes needed). Unlike `scoped`, a module block's classes are NEVER
   // auto-applied to a literal class="..." attribute — CSS Modules is opt-in per usage via
   // `$style.x`, so module classes are kept out of `localScopedNames` (the nodeTransform only
   // rewrites literal class strings for `scoped` blocks). The registry key gets an extra
@@ -280,8 +277,8 @@ module.exports.compileSfc = compileSfc;
 // preprocessor: compileSfc() itself is async now (a scss/sass/less/stylus <style> block awaits
 // preprocessors.ts's compile()), and Metro's own metro-transform-worker already
 // `await transformer.transform(...)` before touching the result (confirmed by reading the
-// installed metro-transform-worker source — see metro-transformer.ts for the fuller writeup),
-// so returning a Promise here is a supported, exercised shape, not a hack. A sync fast-path for
+// installed metro-transform-worker source), so returning a Promise here is a supported,
+// exercised shape, not a hack. A sync fast-path for
 // the no-preprocessor branches would fork this function into two shapes to save a single
 // microtask on a call that only ever runs at Metro build time, content-hash-cached — not worth
 // the duplication.
@@ -299,8 +296,7 @@ module.exports.transform = async function transform(params) {
   // A standalone style file (as opposed to a `.vue` file's own inline <style> block above) —
   // the framework-agnostic path (core/css-parser's compileCssFile), usable from this example's
   // .vue files exactly like from any other adapter's example. isStyleFile recognizes
-  // .css/.scss/.sass/.less/.styl/.stylus (+ each .module.* twin) — see the
-  // symbiote-sfc-style-compiler skill.
+  // .css/.scss/.sass/.less/.styl/.stylus (+ each .module.* twin).
   if (isStyleFile(params.filename)) {
     const { code } = await compileCssFile(params.src, params.filename);
     return upstreamTransformer.transform({ ...params, src: code, filename: params.filename + '.js' });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbiote-native/vue",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "description": "SymbioteNative's Vue adapter — a @vue/runtime-core createRenderer driving real native iOS/Android views through the same engine as the React adapter.",
   "repository": {
     "type": "git",
@@ -44,16 +44,16 @@
     "@vue/compiler-core": "^3.5.13",
     "@vue/compiler-sfc": "^3.5.13",
     "@vue/runtime-core": "^3.5.13",
-    "@symbiote-native/components": "0.2.1",
-    "@symbiote-native/css-parser": "0.2.0",
-    "@symbiote-native/engine": "0.1.2"
+    "@symbiote-native/components": "0.2.3",
+    "@symbiote-native/css-parser": "0.2.1",
+    "@symbiote-native/engine": "0.1.4"
   },
   "peerDependencies": {
     "vue": ">=3.5.0",
     "react-native": ">=0.86"
   },
   "devDependencies": {
-    "@symbiote-native/test-utils": "0.1.1"
+    "@symbiote-native/test-utils": "0.1.5"
   },
   "scripts": {
     "typecheck": "tsc --build",