@symbiote-native/svelte 0.2.0 → 0.3.0

package/build/bootstrap.js

@@ -3,7 +3,7 @@
 // own source is Flow syntax Vitest's transform can't parse, so anything importing it directly
 // must stay unreachable from the tested main index.ts.
 import { AppRegistry as RNAppRegistry } from 'react-native';
-import { bootstrapHost } from '@symbiote-native/components/bootstrap';
+import { bootstrapHost, } from '@symbiote-native/components/bootstrap';
 import { AppRegistry, setHostRegistrar } from './modules/app-registry/index.js';
 // Mirrors the Vue/React adapters' createApp(App).mount(appName) two-step idiom.
 export function createApp(RootComponent, options = {}) {

package/build/class-value.js

@@ -25,7 +25,7 @@
 // compile error at the call site rather than a surprise at runtime. An empty object is
 // deliberately NOT treated as a clsx map: both readings contribute no style, so the cheaper,
 // non-allocating branch is the right one.
-import { isClassNameValue, resolveClassName } from '@symbiote-native/engine';
+import { isClassNameValue, resolveClassName, } from '@symbiote-native/engine';
 // Returns a class STRING when the value is clsx-shaped, and the value UNTOUCHED otherwise, so
 // everything the engine already resolved correctly keeps taking the exact path it took before.
 export function normalizeSvelteClass(value) {

package/build/components/RefreshControl.svelte

@@ -20,8 +20,10 @@
 
   dlog('RefreshControl -> PullToRefreshView');
   dlog(`RefreshControl refreshing=${String(rest.refreshing)}`);
-  if (rest.enabled !== undefined) dlog(`RefreshControl enabled=${String(rest.enabled)} (Android-only)`);
-  if (rest.onRefresh !== undefined) dlog('RefreshControl onRefresh listener wired');
+  if (rest.enabled !== undefined)
+    dlog(`RefreshControl enabled=${String(rest.enabled)} (Android-only)`);
+  if (rest.onRefresh !== undefined)
+    dlog('RefreshControl onRefresh listener wired');
 
   const bag = $derived(resolveAccessibilityProps(rest));
 

package/build/components/Text.svelte

@@ -7,17 +7,26 @@
 </script>
 
 <script lang="ts">
+  import { resolveTextProps } from '@symbiote-native/components';
   import { createAttachmentsSync } from '../runes/attachments';
   import type { ShimElement } from '../dom-shim';
 
-  let { children, ...bag }: ITextProps = $props();
+  let { children, ...rest }: ITextProps = $props();
 
   // See View.svelte's note: `{@attach}` arrives as a symbol-keyed entry in the same rest object.
   let hostShim = $state.raw<ShimElement | null>(null);
   const syncAttachments = createAttachmentsSync();
   $effect(() => {
-    syncAttachments(hostShim, bag);
+    syncAttachments(hostShim, rest);
   });
+
+  // A FRESH object per pass, exactly as View.svelte builds its own: ShimElement's `p` setter
+  // diffs the incoming bag against the one it stored last time, so handing it the SAME live rest
+  // proxy twice compares that object with itself and applies nothing — every prop update after
+  // mount was silently dropped.
+  // resolveTextProps carries RN's Text.js defaults (ellipsizeMode 'tail', allowFontScaling
+  // true); without them native falls back to `clip` and a clamped Text cuts mid-word.
+  const bag = $derived(resolveTextProps({ ...rest }));
 </script>
 
 <symbiote-text p={bag} bind:this={hostShim}>

package/build/components/View.svelte

@@ -33,7 +33,9 @@
   // the raw `id` key so it never reaches Fabric (every non-function prop in the bag otherwise
   // passes through to the slot as-is) — mirrors React's `resolveId` in
   // `adapters/react/src/components.ts`, adapted to the object-bag idiom.
-  const bag = $derived(id === undefined ? { ...rest, nativeID } : { ...rest, nativeID: id });
+  const bag = $derived(
+    id === undefined ? { ...rest, nativeID } : { ...rest, nativeID: id },
+  );
 </script>
 
 <symbiote-view p={bag} bind:this={hostShim}>

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

@@ -12,7 +12,10 @@
 </script>
 
 <script lang="ts">
-  import { renderActivityIndicator, resolveAccessibilityProps } from '@symbiote-native/components';
+  import {
+    renderActivityIndicator,
+    resolveAccessibilityProps,
+  } from '@symbiote-native/components';
   import { PLATFORM } from './activity-indicator-platform';
   import { createDescriptorChildrenSync } from '../../descriptor-to-svelte';
   import { createAttachmentsSync } from '../../runes/attachments';
@@ -36,7 +39,10 @@
         size,
         color,
         style,
-        passthrough: { ...resolveAccessibilityProps(passthrough), class: className },
+        passthrough: {
+          ...resolveAccessibilityProps(passthrough),
+          class: className,
+        },
       },
       PLATFORM,
     ),

package/build/components/button.svelte

@@ -11,7 +11,10 @@
 </script>
 
 <script lang="ts">
-  import { BUTTON_ACCESSIBILITY_ROLE, resolveButtonTextStyle } from '@symbiote-native/components';
+  import {
+    BUTTON_ACCESSIBILITY_ROLE,
+    resolveButtonTextStyle,
+  } from '@symbiote-native/components';
   import TouchableOpacity from './touchable-opacity/index.svelte';
 
   let {
@@ -38,9 +41,11 @@
   // excess-property typing does not reject the native-only keys. TV-focus is inert on a phone.
   const nativeForward = $derived.by(() => {
     const forward: Record<string, unknown> = { testID };
-    if (hasTVPreferredFocus !== undefined) forward.hasTVPreferredFocus = hasTVPreferredFocus;
+    if (hasTVPreferredFocus !== undefined)
+      forward.hasTVPreferredFocus = hasTVPreferredFocus;
     if (nextFocusDown !== undefined) forward.nextFocusDown = nextFocusDown;
-    if (nextFocusForward !== undefined) forward.nextFocusForward = nextFocusForward;
+    if (nextFocusForward !== undefined)
+      forward.nextFocusForward = nextFocusForward;
     if (nextFocusLeft !== undefined) forward.nextFocusLeft = nextFocusLeft;
     if (nextFocusRight !== undefined) forward.nextFocusRight = nextFocusRight;
     if (nextFocusUp !== undefined) forward.nextFocusUp = nextFocusUp;

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

@@ -23,10 +23,16 @@
     type ISeparators,
     type IViewableItemsChangedInfo,
   } from '@symbiote-native/components';
-  import { resolveClassName, type ISymbioteNode } from '@symbiote-native/engine';
+  import {
+    resolveClassName,
+    type ISymbioteNode,
+  } from '@symbiote-native/engine';
   import VirtualizedList from '../virtualized-list/index.svelte';
   import { pickAccessibilityProps } from '../virtualized-list/virtualized-list-props';
-  import type { IVirtualizedListHandle, IScrollViewHandle } from '../virtualized-list/virtualized-list-props';
+  import type {
+    IVirtualizedListHandle,
+    IScrollViewHandle,
+  } from '../virtualized-list/virtualized-list-props';
   import type { IFlatListProps as IProps } from './flat-list-props';
   import { pickAttachmentProps } from '../../runes/attachments';
 
@@ -37,7 +43,9 @@
   // scrollHandle over its ShimElement).
   let inner = $state.raw<IVirtualizedListHandle | null>(null);
 
-  const numColumns = $derived(typeof props.numColumns === 'number' ? props.numColumns : SINGLE_COLUMN);
+  const numColumns = $derived(
+    typeof props.numColumns === 'number' ? props.numColumns : SINGLE_COLUMN,
+  );
   const rows = $derived.by((): IRow<ItemT>[] =>
     numColumns > SINGLE_COLUMN ? chunkIntoRows(props.data, numColumns) : [],
   );
@@ -56,7 +64,9 @@
   }
 
   function isStyleLike(value: unknown): boolean {
-    return Array.isArray(value) || (typeof value === 'object' && value !== null);
+    return (
+      Array.isArray(value) || (typeof value === 'object' && value !== null)
+    );
   }
 
   const rowStyle = $derived.by(() => [
@@ -70,7 +80,9 @@
 
   // The divider between rows shows real items (last of the row above, first of the row below), so
   // the user's `separator` snippet, typed on ItemT, sees items rather than the IRow wrapper.
-  function rowSeparatorProps(entryProps: ISeparatorProps<IRow<ItemT>>): ISeparatorProps<ItemT> {
+  function rowSeparatorProps(
+    entryProps: ISeparatorProps<IRow<ItemT>>,
+  ): ISeparatorProps<ItemT> {
     return {
       ...entryProps,
       leadingItem: lastItemOfRow(entryProps.leadingItem),
@@ -87,8 +99,12 @@
   const rowViewabilityPairs = $derived(
     props.viewabilityConfigCallbackPairs?.map(pair => ({
       viewabilityConfig: pair.viewabilityConfig,
-      onViewableItemsChanged: (rowInfo: IViewableItemsChangedInfo<IRow<ItemT>>): void => {
-        pair.onViewableItemsChanged(expandRowViewability(rowInfo, props.keyExtractor));
+      onViewableItemsChanged: (
+        rowInfo: IViewableItemsChangedInfo<IRow<ItemT>>,
+      ): void => {
+        pair.onViewableItemsChanged(
+          expandRowViewability(rowInfo, props.keyExtractor),
+        );
       },
     })),
   );
@@ -100,7 +116,10 @@
   const accessibilityProps = $derived(pickAccessibilityProps(props));
 
   // ---- imperative handle: delegate straight through to the inner VirtualizedList instance. ----
-  export function scrollToOffset(params: { offset: number; animated?: boolean }): void {
+  export function scrollToOffset(params: {
+    offset: number;
+    animated?: boolean;
+  }): void {
     inner?.scrollToOffset(params);
   }
   export function scrollToIndex(params: {
@@ -111,7 +130,11 @@
   }): void {
     inner?.scrollToIndex(params);
   }
-  export function scrollToItem(params: { item: unknown; animated?: boolean; viewPosition?: number }): void {
+  export function scrollToItem(params: {
+    item: unknown;
+    animated?: boolean;
+    viewPosition?: number;
+  }): void {
     inner?.scrollToItem(params);
   }
   export function scrollToEnd(params?: { animated?: boolean }): void {
@@ -141,11 +164,23 @@
   const attachments = $derived(pickAttachmentProps(props));
 </script>
 
-{#snippet rowItem({ item: row, index, separators }: { item: IRow<ItemT>; index: number; separators: ISeparators })}
+{#snippet rowItem({
+  item: row,
+  index,
+  separators,
+}: {
+  item: IRow<ItemT>;
+  index: number;
+  separators: ISeparators;
+})}
   <symbiote-view p={{ style: rowStyle }}>
     {#each row.items as rowItem, column (props.keyExtractor ? props.keyExtractor(rowItem, row.startIndex + column) : String(row.startIndex + column))}
       <symbiote-view p={{ style: { flex: 1 } }}>
-        {@render props.item({ item: rowItem, index: row.startIndex + column, separators })}
+        {@render props.item({
+          item: rowItem,
+          index: row.startIndex + column,
+          separators,
+        })}
       </symbiote-view>
     {/each}
   </symbiote-view>

package/build/components/image/image-logic.js

@@ -42,7 +42,13 @@ function expandSrcSet(srcSet, view, headers) {
             continue;
         if (scale === 1)
             useSrcForDefaultScale = false;
-        sources.push({ uri, scale, width: view.width, height: view.height, ...{ headers } });
+        sources.push({
+            uri,
+            scale,
+            width: view.width,
+            height: view.height,
+            ...{ headers },
+        });
     }
     if (useSrcForDefaultScale && view.src !== undefined) {
         sources.push({
@@ -63,7 +69,9 @@ function resolveSourceArray(view) {
         return expandSrcSet(view.srcSet, view, headers);
     }
     if (view.src !== undefined) {
-        return [{ uri: view.src, width: view.width, height: view.height, ...{ headers } }];
+        return [
+            { uri: view.src, width: view.width, height: view.height, ...{ headers } },
+        ];
     }
     if (view.source === undefined) {
         dlog('Image: no source / src / srcSet provided');
@@ -72,7 +80,9 @@ function resolveSourceArray(view) {
     const sources = normalizeSource(view.source);
     if (Object.keys(headers).length > 0 && sources.length === 1) {
         const [only] = sources;
-        if (typeof only === 'object' && only !== null && typeof Reflect.get(only, 'uri') === 'string') {
+        if (typeof only === 'object' &&
+            only !== null &&
+            typeof Reflect.get(only, 'uri') === 'string') {
             return [{ ...only, headers }];
         }
     }

package/build/components/image-background/index.svelte

@@ -13,7 +13,10 @@
 </script>
 
 <script lang="ts">
-  import { renderImageBackground, resolveAccessibilityProps } from '@symbiote-native/components';
+  import {
+    renderImageBackground,
+    resolveAccessibilityProps,
+  } from '@symbiote-native/components';
   import { resolveClassName } from '@symbiote-native/engine';
   import { createAttachmentsSync } from '../../runes/attachments';
   import type { ShimElement } from '../../dom-shim';
@@ -78,4 +81,7 @@
   });
 </script>
 
-<symbiote-view p={wrapperBag} bind:this={hostShim}><symbiote-image p={imageBag} />{@render children?.()}</symbiote-view>
+<symbiote-view p={wrapperBag} bind:this={hostShim}>
+  <symbiote-image p={imageBag} />
+  {@render children?.()}
+</symbiote-view>

package/build/components/index.d.ts

@@ -43,8 +43,8 @@ export type { IStickyHeaderComponentProps } from './scroll-view/sticky-header-pr
 export { default as VirtualizedList } from './virtualized-list/index.svelte';
 export type { IVirtualizedListProps, IVirtualizedListHandle, } from './virtualized-list/virtualized-list-props';
 export { default as FlatList } from './flat-list/index.svelte';
-export type { IFlatListProps, IFlatListHandle } from './flat-list/flat-list-props';
+export type { IFlatListProps, IFlatListHandle, } from './flat-list/flat-list-props';
 export { default as VirtualizedSectionList } from './virtualized-section-list/index.svelte';
 export type { IVirtualizedSectionListProps } from './virtualized-section-list/virtualized-section-list-props';
 export { default as SectionList } from './section-list/index.svelte';
-export type { ISectionListProps, ISection } from './section-list/section-list-props';
+export type { ISectionListProps, ISection, } from './section-list/section-list-props';

package/build/components/input-accessory-view/index.svelte

@@ -14,7 +14,10 @@
 </script>
 
 <script lang="ts">
-  import { renderInputAccessoryView, resolveAccessibilityProps } from '@symbiote-native/components';
+  import {
+    renderInputAccessoryView,
+    resolveAccessibilityProps,
+  } from '@symbiote-native/components';
   import { createAttachmentsSync } from '../../runes/attachments';
   import type { ShimElement } from '../../dom-shim';
 

package/build/components/keyboard-avoiding-view/index.svelte

@@ -5,8 +5,8 @@
   // this adapter supplies only the lifecycle: $state for the inset, a mutable frame/initialHeight
   // pair (NOT $state — changing them alone shouldn't re-render, same non-reactive-ref shape as
   // React's frameRef/initialHeightRef and Vue's plain `let frame`), an $effect subscribing to the
-  // Keyboard module (mirrors React's useEffect / Vue's onMounted+onUnmounted pair), and the
-  // wrapper assembly around the Snippet children.
+  // Keyboard module and reading the cross-fade device setting once (mirrors React's useEffect /
+  // Vue's onMounted+onUnmounted pair), and the wrapper assembly around the Snippet children.
   //
   // render-keyboard-avoiding-view.ts does NOT return a Descriptor here (by its own design — it
   // returns a layout DESCRIPTION instead, because KAV wraps arbitrary user children the Descriptor
@@ -21,7 +21,7 @@
 <script lang="ts">
   import {
     Keyboard,
-    KEYBOARD_EVENT,
+    Platform,
     dlog,
     type IEventSubscription,
     type ISymbioteEvent,
@@ -30,6 +30,8 @@
   import type { ShimElement } from '../../dom-shim';
   import {
     computeInset,
+    keyboardAvoidingEventNamesFor,
+    readPrefersCrossFadeTransitions,
     readKeyboardFrame,
     readLayoutFrame,
     resolveKeyboardAvoidingLayout,
@@ -55,10 +57,22 @@
   // next keyboard event's inset math.
   let frame: IMeasuredFrame | undefined;
   let initialHeight: number | undefined;
+  // A device accessibility setting, not component state: it cannot change mid-session, and nothing
+  // in the markup reads it — it only feeds the next keyboard event's math — so a plain `let`, not
+  // $state. Resolves false on Android and when the native getter is absent.
+  let prefersCrossFadeTransitions = false;
 
   function onShow(payload: unknown): void {
     const keyboard = readKeyboardFrame(payload);
-    const next = computeInset(frame, keyboard, keyboardVerticalOffset);
+    // `behavior` and `inset` are both read HERE, at event time, never captured when this handler
+    // was built: Svelte compiles a destructured prop into a live getter, so a `behavior` changed
+    // after mount reaches the math on the next event, and 'height' mode feeds back the inset
+    // CURRENTLY applied (RN's this.state.bottom) to cancel the shrink its own wrapper caused.
+    const next = computeInset(frame, keyboard, keyboardVerticalOffset, {
+      behavior,
+      previousInset: inset,
+      prefersCrossFadeTransitions,
+    });
     dlog(`KeyboardAvoidingView show -> inset ${next}`);
     inset = next;
   }
@@ -68,15 +82,22 @@
   }
 
   // No reactive state is read synchronously in this callback body (only inside onShow/onHide,
-  // which run later at event-time via closures over the live `keyboardVerticalOffset` prop), so
-  // this effect has zero tracked dependencies and runs exactly once per mount/unmount — the same
-  // subscribe-once/cleanup-once shape as Vue's onMounted+onUnmounted pair.
+  // which run later at event-time via closures over the live props and `inset`), so this effect has
+  // zero tracked dependencies and runs exactly once per mount/unmount — the same subscribe-once/
+  // cleanup-once shape as Vue's onMounted+onUnmounted pair. TWO listeners, never three: RN's own
+  // comment warns that a change-frame notification arrives BEFORE the hide one on an undocked iOS
+  // keyboard, so subscribing to it applies a frame captured mid-dismissal.
   $effect(() => {
+    const events = keyboardAvoidingEventNamesFor(Platform.OS);
     const subscriptions: IEventSubscription[] = [
-      Keyboard.addListener(KEYBOARD_EVENT.didShow, onShow),
-      Keyboard.addListener(KEYBOARD_EVENT.didChangeFrame, onShow),
-      Keyboard.addListener(KEYBOARD_EVENT.didHide, onHide),
+      Keyboard.addListener(events.show, onShow),
+      Keyboard.addListener(events.hide, onHide),
     ];
+    // Through the core wrapper, not AccessibilityInfo directly: nobody awaits this, and the
+    // engine's iOS getters reject on a native error, so the fallback-to-false lives there once.
+    void readPrefersCrossFadeTransitions().then(prefers => {
+      prefersCrossFadeTransitions = prefers;
+    });
     return () => {
       for (const subscription of subscriptions) subscription.remove();
     };
@@ -111,7 +132,9 @@
     onLayout: handleLayout,
   });
 
-  const innerBag = $derived(layout.kind === 'nested' ? { style: layout.innerStyle } : undefined);
+  const innerBag = $derived(
+    layout.kind === 'nested' ? { style: layout.innerStyle } : undefined,
+  );
 
   // See View.svelte's note on `{@attach}` — bound to the OUTER wrapper, which is the node
   // this component's own style lands on in both the nested and flat layouts.

package/build/components/modal/index.svelte

@@ -53,7 +53,10 @@
   // isVisible=false with isRendered still true before this effect flips it) but isn't observable
   // as its own committed Fabric frame the way React's per-render synchronous commit makes it.
   $effect(() => {
-    state = modalReducer(state, isVisible ? { type: 'show' } : { type: 'hide' });
+    state = modalReducer(
+      state,
+      isVisible ? { type: 'show' } : { type: 'hide' },
+    );
   });
 
   $effect(() => {

package/build/components/pressable/index.svelte

@@ -124,14 +124,21 @@
   // other Svelte component that hand-authors a raw host tag (RefreshControl.svelte, modal/
   // index.svelte).
   const resolved = $derived(
-    resolveAccessibilityProps({ ...rest, accessibilityState: resolvedAccessibilityState }),
+    resolveAccessibilityProps({
+      ...rest,
+      accessibilityState: resolvedAccessibilityState,
+    }),
   );
 
-  const resolvedStyle = $derived(typeof style === 'function' ? style(state) : style);
+  const resolvedStyle = $derived(
+    typeof style === 'function' ? style(state) : style,
+  );
 
   // android_ripple rides a dedicated inner View; on iOS rippleProps() returns undefined, so the
   // child renders unwrapped, no extra node — mirrors React's Pressable + touchable-native-feedback.
-  const ripple = $derived(android_ripple !== undefined ? rippleProps(android_ripple) : undefined);
+  const ripple = $derived(
+    android_ripple !== undefined ? rippleProps(android_ripple) : undefined,
+  );
 
   const bag = $derived({
     ...resolved,

package/build/components/pressable/pressable-props.d.ts

@@ -2,7 +2,7 @@ import type { Snippet } from 'svelte';
 import type { IStyleProp, IViewStyle } from '@symbiote-native/engine';
 import type { IAccessibilityProps, IAriaProps, IPressHandler, IPressState, IRectOffset, IPressableAndroidRippleConfig } from '@symbiote-native/components';
 import type { ISvelteClassValue } from '../../class-value';
-export type { IPressState, IPressableAndroidRippleConfig } from '@symbiote-native/components';
+export type { IPressState, IPressableAndroidRippleConfig, } from '@symbiote-native/components';
 export interface IPressableProps extends IAccessibilityProps, IAriaProps {
     onPress?: IPressHandler;
     onPressIn?: IPressHandler;

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

@@ -85,7 +85,8 @@
   }: IScrollViewProps = $props();
 
   $effect(() => {
-    if (stickyHeaderIndices === undefined || stickyHeaderIndices.length === 0) return;
+    if (stickyHeaderIndices === undefined || stickyHeaderIndices.length === 0)
+      return;
     dlog(
       'ScrollView.stickyHeaderIndices is not auto-honored on Svelte (no index-wrap mechanism — ' +
         'see scroll-view-props.ts KNOWN GAP); compose ScrollViewStickyHeader manually instead',
@@ -103,7 +104,11 @@
   // Plain exported functions on the instance script are what a parent's `bind:this={ref}` sees —
   // the Svelte mechanism for exposing an imperative handle, the twin of React's
   // useImperativeHandle / Vue's expose().
-  export function scrollTo(options?: { x?: number; y?: number; animated?: boolean }): void {
+  export function scrollTo(options?: {
+    x?: number;
+    y?: number;
+    animated?: boolean;
+  }): void {
     handle.scrollTo(options);
   }
   export function scrollToEnd(options?: { animated?: boolean }): void {
@@ -117,7 +122,9 @@
   }
 
   const isHorizontal = $derived(horizontal === true);
-  const hasStickyHeaders = $derived(stickyHeaderIndices !== undefined && stickyHeaderIndices.length > 0);
+  const hasStickyHeaders = $derived(
+    stickyHeaderIndices !== undefined && stickyHeaderIndices.length > 0,
+  );
   const shouldWrapRefreshControl = $derived(
     PLATFORM.refreshControlMode === 'wrap' && refreshControl !== undefined,
   );
@@ -131,7 +138,9 @@
   // style and collapse it to nothing — e.g. App.svelte's `class="screen"` (flex:1) on the
   // top-level ScrollView, which left the wrapper with no height for its content to grow into.
   const layoutSplit = $derived(
-    shouldWrapRefreshControl ? splitLayoutProps([resolveSvelteClass(className), style]) : undefined,
+    shouldWrapRefreshControl
+      ? splitLayoutProps([resolveSvelteClass(className), style])
+      : undefined,
   );
 
   // A single AnimatedValue tracks the scroll offset (RN's _scrollAnimatedValue), allocated once
@@ -161,7 +170,9 @@
   // it solely `if (isFabric)`). Forcing the JS path to keep that listener alive only gives up the
   // native driver, putting the pin on the JS thread — drift on iOS, outright failure on Android
   // (commit debounce 15ms vs iOS's 64ms — render-scroll-sticky.ts).
-  const nativeStickyAvailable = $derived(hasStickyHeaders && isNativeAnimatedAvailable());
+  const nativeStickyAvailable = $derived(
+    hasStickyHeaders && isNativeAnimatedAvailable(),
+  );
 
   // Native sticky-scroll attach (RN attachNativeEvent / _updateAnimatedNodeAttachment) — NOT used
   // for sticky headers (see the comment above); kept for other native-event-attach consumers.
@@ -178,7 +189,9 @@
       : contentContainerStyle,
   );
 
-  const intrinsics = $derived(selectScrollIntrinsics(isHorizontal, resolvedContentContainerStyle));
+  const intrinsics = $derived(
+    selectScrollIntrinsics(isHorizontal, resolvedContentContainerStyle),
+  );
 
   const forwarding = $derived(
     resolveScrollForwarding({
@@ -186,7 +199,8 @@
       nativeStickyAvailable,
       invertStickyHeaders,
       scrollEventThrottle,
-      maintainVisibleContentPosition: passthrough.maintainVisibleContentPosition,
+      maintainVisibleContentPosition:
+        passthrough.maintainVisibleContentPosition,
       snapToAlignment: passthrough.snapToAlignment,
     }),
   );
@@ -220,7 +234,10 @@
       [{ nativeEvent: { contentOffset: { y: scrollAnimatedValue } } }],
       onScroll === undefined
         ? undefined
-        : { listener: (...args: unknown[]) => forwardScrollEvent(onScroll, args) },
+        : {
+            listener: (...args: unknown[]) =>
+              forwardScrollEvent(onScroll, args),
+          },
     );
   });
 
@@ -243,7 +260,9 @@
       // layoutSplit already folded className's resolved value into inner/outer above — forwarding
       // the raw class here too would re-apply its LAYOUT half onto the inner scroll view a second
       // time (on top of the wrapper).
-      ...(className !== undefined && layoutSplit === undefined ? { class: className } : {}),
+      ...(className !== undefined && layoutSplit === undefined
+        ? { class: className }
+        : {}),
       style: scrollStyle,
       onScroll: resolvedScrollHandler,
       onLayout: handleScrollLayout,
@@ -260,7 +279,9 @@
     style: intrinsics.contentStyle,
     collapsable: false,
     ...(forwarding.collapsableChildren ? { collapsableChildren: false } : {}),
-    ...(onContentSizeChange !== undefined ? { onLayout: handleContentLayout } : {}),
+    ...(onContentSizeChange !== undefined
+      ? { onLayout: handleContentLayout }
+      : {}),
   }));
   // See View.svelte's note on `{@attach}`.
   const syncAttachments = createAttachmentsSync();
@@ -270,29 +291,41 @@
 </script>
 
 {#snippet scrollBody()}
-  <!-- Packed edge-to-edge against the next block deliberately (svelte-adapter-dom-shim §16):
-       whitespace BETWEEN two sibling blocks survives clean_nodes as a single-space text node,
-       which here becomes a real RCTRawText child of a scroll view — an invalid Fabric child that
-       fails silently. Do not reformat this join. -->
+  <!-- The gap between these two sibling blocks survives clean_nodes as a ' ' text node, but
+       the shim drops a whitespace-only node whose parent takes no raw text, so it never
+       reaches Fabric (dom-shim/text.ts, svelte-adapter-dom-shim §16b). -->
   {#if !shouldWrapRefreshControl && refreshControl !== undefined}
     <RefreshControl {...refreshControl} />
-  {/if}{#if isHorizontal}
-    <symbiote-horizontal-scroll-content p={contentBag}>{@render children?.()}</symbiote-horizontal-scroll-content>
+  {/if}
+  {#if isHorizontal}
+    <symbiote-horizontal-scroll-content p={contentBag}>
+      {@render children?.()}
+    </symbiote-horizontal-scroll-content>
   {:else}
-    <symbiote-scroll-content p={contentBag}>{@render children?.()}</symbiote-scroll-content>
+    <symbiote-scroll-content p={contentBag}>
+      {@render children?.()}
+    </symbiote-scroll-content>
   {/if}
 {/snippet}
 
 {#if shouldWrapRefreshControl && refreshControl !== undefined}
   <RefreshControl {...refreshControl} style={layoutSplit?.outer}>
     {#if isHorizontal}
-      <symbiote-horizontal-scroll-view p={outerBag} bind:this={hostShim}>{@render scrollBody()}</symbiote-horizontal-scroll-view>
+      <symbiote-horizontal-scroll-view p={outerBag} bind:this={hostShim}>
+        {@render scrollBody()}
+      </symbiote-horizontal-scroll-view>
     {:else}
-      <symbiote-scroll-view p={outerBag} bind:this={hostShim}>{@render scrollBody()}</symbiote-scroll-view>
+      <symbiote-scroll-view p={outerBag} bind:this={hostShim}>
+        {@render scrollBody()}
+      </symbiote-scroll-view>
     {/if}
   </RefreshControl>
 {:else if isHorizontal}
-  <symbiote-horizontal-scroll-view p={outerBag} bind:this={hostShim}>{@render scrollBody()}</symbiote-horizontal-scroll-view>
+  <symbiote-horizontal-scroll-view p={outerBag} bind:this={hostShim}>
+    {@render scrollBody()}
+  </symbiote-horizontal-scroll-view>
 {:else}
-  <symbiote-scroll-view p={outerBag} bind:this={hostShim}>{@render scrollBody()}</symbiote-scroll-view>
+  <symbiote-scroll-view p={outerBag} bind:this={hostShim}>
+    {@render scrollBody()}
+  </symbiote-scroll-view>
 {/if}