@symbiote-native/svelte 1.0.0 → 2.0.0

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

@@ -1,87 +0,0 @@
-<script lang="ts" module>
-  // ImageBackground: render-only composition (absolute-fill Image behind, children on top).
-  // Calls renderImageBackground() straight from core/components for the absolute-fill
-  // positioning + wrapper-dimension proxy onto the inner Image — both tags stay literal (the
-  // wrapper hosts `{@render children?.()}` as a live sibling after the image, which the
-  // generic descriptorToSvelte bridge can't safely own: appending the image inside an $effect
-  // would race Svelte's own placement of the live children and could reorder them — see
-  // svelte-adapter-dom-shim skill §19), so `.props`/`.children[0].props` are destructured onto
-  // the two known host tags, same pattern as Modal/index.svelte.
-  import type { IImageBackgroundProps } from './image-background-props';
-
-  export type { IImageBackgroundProps };
-</script>
-
-<script lang="ts">
-  import {
-    renderImageBackground,
-    resolveAccessibilityProps,
-  } from '@symbiote-native/components';
-  import { resolveClassName } from '@symbiote-native/engine';
-  import { createAttachmentsSync } from '../../runes/attachments';
-  import type { ShimElement } from '../../dom-shim';
-
-  let {
-    children,
-    style,
-    imageStyle,
-    class: className,
-    source,
-    defaultSource,
-    loadingIndicatorSource,
-    resizeMode,
-    tintColor,
-    src,
-    srcSet,
-    alt,
-    width,
-    height,
-    crossOrigin,
-    referrerPolicy,
-    ...passthrough
-  }: IImageBackgroundProps = $props();
-
-  const resolvedImageStyle = $derived(
-    typeof imageStyle === 'string' ? resolveClassName(imageStyle) : imageStyle,
-  );
-
-  const descriptor = $derived(
-    renderImageBackground({
-      style,
-      imageStyle: resolvedImageStyle,
-      image: {
-        source,
-        defaultSource,
-        loadingIndicatorSource,
-        resizeMode,
-        tintColor,
-        src,
-        srcSet,
-        alt,
-        width,
-        height,
-        crossOrigin,
-        referrerPolicy,
-        passthrough: resolveAccessibilityProps(passthrough),
-      },
-    }),
-  );
-  const imageBag = $derived.by(() => {
-    const child = descriptor.children[0];
-    return typeof child === 'string' ? {} : child.props;
-  });
-  const wrapperBag = $derived({ ...descriptor.props, class: className });
-
-  // See View.svelte's note on `{@attach}` — the attachment binds to the OUTER wrapper, the node
-  // this component's own `class`/`style` land on and the one a caller means by "this component".
-  let hostShim = $state.raw<ShimElement | null>(null);
-  const syncAttachments = createAttachmentsSync();
-  $effect(() => {
-    syncAttachments(hostShim, passthrough);
-  });
-</script>
-
-<symbiote-view p={wrapperBag} bind:this={hostShim}>
-  <symbiote-image p={imageBag} />
-  {@render children?.()}
-</symbiote-view>

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

@@ -1,5 +0,0 @@
-import type { IImageBackgroundProps } from './image-background-props';
-export type { IImageBackgroundProps };
-declare const Index: import("svelte").Component<IImageBackgroundProps, {}, "">;
-type Index = ReturnType<typeof Index>;
-export default Index;

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

@@ -1,51 +0,0 @@
-<script lang="ts" module>
-  // InputAccessoryView: render-only host assembly (iOS). Calls the shared
-  // core/components/src/view/render-input-accessory-view.ts's renderInputAccessoryView()
-  // directly (nativeID/backgroundColor/style -> the host node, everything else passthrough) —
-  // the same calling convention as keyboard-avoiding-view/index.svelte's shared-render-fn call,
-  // rather than hand-duplicating its prop-assembly logic (per the svelte-adapter-dom-shim
-  // skill's §15/§19 correction: a fixed-shape Descriptor still has to be CALLED, not
-  // re-derived). The root tag stays literal below since renderInputAccessoryView always paints
-  // the same 'symbiote-input-accessory-view' host — no dynamic <svelte:element> needed. The
-  // host has no structural children of its own; the user's children nest directly under it.
-  import type { IInputAccessoryViewProps } from './input-accessory-view-props';
-
-  export type { IInputAccessoryViewProps };
-</script>
-
-<script lang="ts">
-  import {
-    renderInputAccessoryView,
-    resolveAccessibilityProps,
-  } from '@symbiote-native/components';
-  import { createAttachmentsSync } from '../../runes/attachments';
-  import type { ShimElement } from '../../dom-shim';
-
-  let {
-    nativeID,
-    backgroundColor,
-    style,
-    children,
-    ...passthrough
-  }: IInputAccessoryViewProps = $props();
-
-  const descriptor = $derived(
-    renderInputAccessoryView({
-      nativeID,
-      backgroundColor,
-      style,
-      passthrough: resolveAccessibilityProps(passthrough),
-    }),
-  );
-
-  // See View.svelte's note on `{@attach}`.
-  let hostShim = $state.raw<ShimElement | null>(null);
-  const syncAttachments = createAttachmentsSync();
-  $effect(() => {
-    syncAttachments(hostShim, passthrough);
-  });
-</script>
-
-<symbiote-input-accessory-view p={descriptor.props} bind:this={hostShim}>
-  {@render children?.()}
-</symbiote-input-accessory-view>

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

@@ -1,5 +0,0 @@
-import type { IInputAccessoryViewProps } from './input-accessory-view-props';
-export type { IInputAccessoryViewProps };
-declare const Index: import("svelte").Component<IInputAccessoryViewProps, {}, "">;
-type Index = ReturnType<typeof Index>;
-export default Index;

package/build/components/pressable/index.svelte

@@ -1,185 +0,0 @@
-<script lang="ts" module>
-  // Pressable: the Svelte lifecycle half. The press lifecycle (the long-press timer,
-  // unstable_pressDelay deferral, the pressRetentionOffset drift test, the suppression flags)
-  // lives in @symbiote-native/components/state as a pure machine over a runtime + host; the
-  // render decisions (the responder listeners, the disabled->accessibilityState fold, the
-  // ripple prop) in @symbiote-native/components/view, shared verbatim with React and Vue. Here
-  // runes supply the reactivity: `$state` holds `pressed`, a plain setup-scope object (created
-  // once, like Vue's) holds the press runtime, and `$state.raw` holds the responder's ShimElement
-  // by IDENTITY so the machine can measure through it (same shallowRef-not-ref concern as Vue's
-  // pressable.ts / Switch's own hostShim — a deep-proxied `$state` object would miss the engine's
-  // WeakMap mirror lookup).
-  //
-  // Pressable owns no `renderPressable()` Descriptor factory (unlike Switch's fixed-shape
-  // `renderSwitch()`) — core/components/src/view/render-pressable only resolves the responder-
-  // listener bag and the accessibilityState fold, so this hand-authors the host node directly,
-  // close to View.svelte's own shape, wiring the press responder listeners onto it instead of
-  // importing View.svelte (which has no `bind:this` escape hatch for the raw ShimElement the
-  // measure handle needs).
-  import type { IPressableProps } from './pressable-props';
-
-  export type { IPressableProps };
-</script>
-
-<script lang="ts">
-  import { onDestroy } from 'svelte';
-  import {
-    createPressHandlers,
-    createPressRuntime,
-    disposePressRuntime,
-    rippleProps,
-    buildPressableListeners,
-    resolveDisabledAccessibilityState,
-    resolveAccessibilityProps,
-    noteHoverNoop,
-    DEFAULT_DELAY_LONG_PRESS_MS,
-    DEFAULT_MIN_PRESS_DURATION_MS,
-    type IPressHost,
-    type IPressState,
-  } from '@symbiote-native/components';
-  import { measure, type ISymbioteNode } from '@symbiote-native/engine';
-  import type { ShimElement } from '../../dom-shim';
-  import { createAttachmentsSync } from '../../runes/attachments';
-
-  let {
-    onPress,
-    onPressIn,
-    onPressOut,
-    onPressMove,
-    onLongPress,
-    delayLongPress = DEFAULT_DELAY_LONG_PRESS_MS,
-    disabled,
-    cancelable,
-    hitSlop,
-    pressRetentionOffset,
-    unstable_pressDelay = 0,
-    __minPressDuration = DEFAULT_MIN_PRESS_DURATION_MS,
-    android_ripple,
-    android_disableSound,
-    onHoverIn,
-    onHoverOut,
-    delayHoverIn,
-    delayHoverOut,
-    accessibilityState,
-    style,
-    class: className,
-    children,
-    ...rest
-  }: IPressableProps & {
-    /** @internal Touchable* mirrors RN's Pressability minPressDuration: 0 override. */
-    __minPressDuration?: number;
-  } = $props();
-
-  let pressed = $state(false);
-  // Plain setup-scope object, never `$state`: mutated by the machine on every event, never
-  // reactively read — same as Vue's setup-scope runtime.
-  const runtime = createPressRuntime();
-  // `$state.raw`, NOT `$state`: holds the responder ShimElement by IDENTITY. `$state()` would
-  // deep-proxy it, and `measure()` looks the RAW node up in the engine's WeakMap mirror — a Proxy
-  // wrapper misses that lookup and the retention-region measure silently no-ops.
-  let hostShim = $state.raw<ShimElement | null>(null);
-
-  const host: IPressHost = {
-    setPressed(next: boolean): void {
-      pressed = next;
-    },
-    getMeasureFn: () => {
-      const node: ISymbioteNode | undefined = hostShim?.engineNode;
-      if (node === undefined) return undefined;
-      return callback => measure(node, callback);
-    },
-    schedule: (callback, ms) => {
-      const id = setTimeout(callback, ms);
-      return () => clearTimeout(id);
-    },
-    now: Date.now,
-  };
-
-  onDestroy(() => {
-    disposePressRuntime(runtime);
-  });
-
-  $effect(() => {
-    noteHoverNoop(onHoverIn, onHoverOut);
-  });
-  void delayHoverIn;
-  void delayHoverOut;
-
-  const state: IPressState = $derived({ pressed });
-
-  // Rebuilt whenever the config it closes over changes (mirrors Vue's per-render rebuild); the
-  // runtime persists across rebuilds so in-flight timers/drift state survive.
-  const handlers = $derived(
-    createPressHandlers(
-      {
-        onPress,
-        onPressIn,
-        onPressOut,
-        onPressMove,
-        onLongPress,
-        delayLongPress,
-        unstable_pressDelay,
-        minPressDuration: __minPressDuration,
-        hitSlop,
-        pressRetentionOffset,
-      },
-      runtime,
-      host,
-    ),
-  );
-
-  // 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,
-  );
-
-  // ONE derived, not four. The accessibility fold and the style resolution used to be their own
-  // `$derived`s, each read by exactly this bag and by nothing else — a memo nobody can reuse, in
-  // exchange for a reaction-graph node per Pressable instance. A 1 000-row list mounts 2 000 of
-  // them, which made this component the largest single allocation site in a create profile.
-  // `handlers` and `ripple` stay separate BECAUSE they are read elsewhere: `handlers` must keep
-  // its identity across an unrelated bag change or every recompute re-registers native listeners,
-  // and `ripple` is read twice (the branch test and the inner view's own bag).
-  const bag = $derived.by(() => {
-    // Folds aria-*/role into accessibility* — Pressable owns its host node directly (it does not
-    // compose View.svelte), so it must fold this itself, exactly like Vue's Pressable and every
-    // other Svelte component that hand-authors a raw host tag (RefreshControl.svelte, modal/
-    // index.svelte).
-    const resolved = resolveAccessibilityProps({
-      ...rest,
-      accessibilityState: resolveDisabledAccessibilityState(
-        accessibilityState,
-        disabled,
-      ),
-    });
-    const next: Record<string, unknown> = {
-      ...resolved,
-      style: typeof style === 'function' ? style(state) : style,
-      class: className,
-      hitSlop,
-      ...buildPressableListeners(handlers, { disabled, cancelable }),
-    };
-    // Assigned rather than conditionally spread: `...(cond ? { x } : {})` allocated an empty
-    // object literal on every evaluation for the overwhelmingly common `undefined` case.
-    if (android_disableSound !== undefined)
-      next.android_disableSound = android_disableSound;
-    return next;
-  });
-
-  // See View.svelte's note on `{@attach}`.
-  const syncAttachments = createAttachmentsSync();
-  $effect(() => {
-    syncAttachments(hostShim, rest);
-  });
-</script>
-
-<symbiote-view p={bag} bind:this={hostShim}>
-  {#if ripple !== undefined}
-    <symbiote-view p={ripple}>
-      {@render children?.(state)}
-    </symbiote-view>
-  {:else}
-    {@render children?.(state)}
-  {/if}
-</symbiote-view>

package/build/components/pressable/index.svelte.d.ts

@@ -1,9 +0,0 @@
-import type { IPressableProps } from './pressable-props';
-export type { IPressableProps };
-type $$ComponentProps = IPressableProps & {
-    /** @internal Touchable* mirrors RN's Pressability minPressDuration: 0 override. */
-    __minPressDuration?: number;
-};
-declare const Index: import("svelte").Component<$$ComponentProps, {}, "">;
-type Index = ReturnType<typeof Index>;
-export default Index;

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

@@ -1,331 +0,0 @@
-<script lang="ts" module>
-  // ScrollView: sticky headers, RefreshControl, the imperative scroll handle,
-  // maintainVisibleContentPosition, native scroll-attach. There is NO renderScrollView Descriptor
-  // factory (no 3-layer split, no descriptorToSvelte bridge exists anywhere in this adapter — see
-  // svelte-adapter-dom-shim skill §15's fixed-shape-render note). This component hand-assembles
-  // markup and wires refs/effects directly, calling the SAME framework-agnostic helpers React's
-  // usePreparedScrollView / Vue's createScrollView call: resolveDecelerationRate,
-  // selectScrollIntrinsics, readLayoutDimension, didContentSizeChange, resolveScrollForwarding,
-  // buildScrollViewHandle, attachStickyScroll, forwardScrollEvent, resolveAccessibilityProps.
-  //
-  // Fabric tree shape: a scroll view wraps a content view holding the children (RN's own
-  // ScrollView.js shape). Svelte cannot pick a host tag name dynamically without
-  // `<svelte:element>` (unverified under the DOM shim, not exercised elsewhere in this adapter —
-  // see svelte-adapter-dom-shim skill §4), so the horizontal/vertical tag choice is a static
-  // `{#if isHorizontal}` branch instead of a data-driven `createElement(scrollViewIntrinsic, …)`
-  // call the way React/Vue do it.
-  //
-  // RefreshControl: iOS renders the real `RefreshControl.svelte` as a childless SIBLING before
-  // the content container. Android WRAPS the scroll view with it (`refreshControl` becomes the
-  // parent, scroll view nested inside) — structurally possible in Svelte (unlike React's
-  // cloneElement / Vue's VNode re-invocation) because `refreshControl` is typed as
-  // RefreshControl's OWN PROPS BAG here (scroll-view-props.ts), not a pre-rendered
-  // element/snippet: ScrollView itself instantiates `<RefreshControl>` in the right position and
-  // puts the scroll view INSIDE it on Android via plain markup nesting.
-  //
-  // KNOWN GAPS:
-  //  1. `stickyHeaderIndices` / `invertStickyHeaders` are NOT auto-honored (see scroll-view-props.ts
-  //     and sticky-header.svelte's header comments for the full reasoning). Compose the exported
-  //     `ScrollViewStickyHeader` manually instead; it auto-wires to THIS ScrollView's scroll offset
-  //     via Svelte context (scroll-view-sticky-context.ts), so no extra props are usually needed.
-  //  2. `maintainVisibleContentPosition` is forwarded to the native node and `collapsableChildren`
-  //     is set correctly (via resolveScrollForwarding), but not otherwise exercised or tested here.
-  import type { IScrollViewProps } from './scroll-view-props';
-  import type { IScrollViewHandle } from '@symbiote-native/components';
-
-  export type { IScrollViewProps, IScrollViewHandle };
-</script>
-
-<script lang="ts">
-  import { setContext } from 'svelte';
-  import {
-    attachStickyScroll,
-    buildScrollViewHandle,
-    didContentSizeChange,
-    forwardScrollEvent,
-    readLayoutDimension,
-    resolveAccessibilityProps,
-    resolveDecelerationRate,
-    resolveScrollForwarding,
-    selectScrollIntrinsics,
-    splitLayoutProps,
-    type IContentSize,
-  } from '@symbiote-native/components';
-  import {
-    AnimatedValue,
-    dlog,
-    event as animatedEvent,
-    isNativeAnimatedAvailable,
-    resolveClassName,
-    type ISymbioteEvent,
-    type ISymbioteNode,
-  } from '@symbiote-native/engine';
-  import { resolveSvelteClass } from '../../class-value';
-  import { PLATFORM } from './scroll-view-platform';
-  import { SCROLL_VIEW_STICKY_CONTEXT_KEY } from './scroll-view-sticky-context';
-  import RefreshControl from '../RefreshControl.svelte';
-  import type { ShimElement } from '../../dom-shim';
-  import { createAttachmentsSync } from '../../runes/attachments';
-
-  let {
-    style,
-    class: className,
-    contentContainerStyle,
-    horizontal,
-    decelerationRate,
-    refreshControl,
-    onContentSizeChange,
-    stickyHeaderIndices,
-    invertStickyHeaders,
-    onLayout,
-    onScroll,
-    scrollEventThrottle,
-    children,
-    ...passthrough
-  }: IScrollViewProps = $props();
-
-  $effect(() => {
-    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',
-    );
-  });
-
-  // $state.raw, NOT $state: holds the shim element by IDENTITY — a deep $state proxy would make
-  // dispatchViewCommand miss the engine's WeakMap mirror and every
-  // scrollTo/scrollToEnd/flashScrollIndicators would silently no-op.
-  let hostShim = $state.raw<ShimElement | null>(null);
-  const handle: IScrollViewHandle = buildScrollViewHandle(
-    (): ISymbioteNode | null => hostShim?.engineNode ?? null,
-  );
-
-  // 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 {
-    handle.scrollTo(options);
-  }
-  export function scrollToEnd(options?: { animated?: boolean }): void {
-    handle.scrollToEnd(options);
-  }
-  export function flashScrollIndicators(): void {
-    handle.flashScrollIndicators();
-  }
-  export function getScrollNode(): ISymbioteNode | null {
-    return handle.getScrollNode();
-  }
-
-  const isHorizontal = $derived(horizontal === true);
-  const hasStickyHeaders = $derived(
-    stickyHeaderIndices !== undefined && stickyHeaderIndices.length > 0,
-  );
-  const shouldWrapRefreshControl = $derived(
-    PLATFORM.refreshControlMode === 'wrap' && refreshControl !== undefined,
-  );
-
-  // Android wrap mode only: RN's ScrollView.js splits the flattened style across the two boxes —
-  // LAYOUT props (margin/flex/size/position/...) drive the outer AndroidSwipeRefreshLayout frame,
-  // VISUAL props (background/padding/border/...) paint the inner scroll view (mirrors React's/
-  // Vue's index.android.ts splitLayoutProps). Splitting on the resolved [class, style] pair, not
-  // `style` alone: a class-only layout prop (flex/height/gap/...) is invisible to `style` until
-  // resolveClassName runs, so splitting on `style` alone would starve the wrapper of its layout
-  // 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,
-  );
-
-  // A single AnimatedValue tracks the scroll offset (RN's _scrollAnimatedValue), allocated once
-  // per instance — held by IDENTITY (never wrapped in $state, the same reactivity rule the shim
-  // node follows), shared with any manually-composed ScrollViewStickyHeader via context below.
-  const scrollAnimatedValue = new AnimatedValue(0);
-
-  // Inverted sticky headers stick to the BOTTOM, needing the viewport height (RN _handleLayout).
-  let viewportHeight = $state<number | undefined>(undefined);
-
-  // Context handoff for a manually-composed ScrollViewStickyHeader (see scroll-view-props.ts's
-  // KNOWN GAP note) — getter functions so a header reads the LIVE value, not a snapshot from
-  // whenever it first called getContext().
-  setContext(SCROLL_VIEW_STICKY_CONTEXT_KEY, {
-    scrollAnimatedValue,
-    getInverted: (): boolean | undefined => invertStickyHeaders,
-    getViewportHeight: (): number | undefined => viewportHeight,
-  });
-
-  // Resolved dynamically, exactly like React (adapters/react/.../scroll-view/shared.ts:267). Do
-  // not hardcode this false to keep the JS listener alive: `attachStickyScroll` makes
-  // `scrollAnimatedValue` native up front, and once native AnimatedWithChildren stops cascading
-  // listeners into its subtree — but RN carries the SAME gate (AnimatedWithChildren.js:74) and
-  // streams values back only for AnimatedValue, never an interpolation, so the listener is silent
-  // under RN too and sticky headers still work: the pin IS the native transform, the listener
-  // only feeds the debounced committed transform for hit-testing (ScrollViewStickyHeader.js adds
-  // 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(),
-  );
-
-  // Native sticky-scroll attach (RN attachNativeEvent / _updateAnimatedNodeAttachment) — NOT used
-  // for sticky headers (see the comment above); kept for other native-event-attach consumers.
-  $effect(() => {
-    if (!nativeStickyAvailable) return;
-    const node = hostShim?.engineNode;
-    if (node === undefined) return;
-    return attachStickyScroll(node, scrollAnimatedValue);
-  });
-
-  const resolvedContentContainerStyle = $derived(
-    typeof contentContainerStyle === 'string'
-      ? resolveClassName(contentContainerStyle)
-      : contentContainerStyle,
-  );
-
-  const intrinsics = $derived(
-    selectScrollIntrinsics(isHorizontal, resolvedContentContainerStyle),
-  );
-
-  const forwarding = $derived(
-    resolveScrollForwarding({
-      hasStickyHeaders,
-      nativeStickyAvailable,
-      invertStickyHeaders,
-      scrollEventThrottle,
-      maintainVisibleContentPosition:
-        passthrough.maintainVisibleContentPosition,
-      snapToAlignment: passthrough.snapToAlignment,
-    }),
-  );
-
-  let lastContentSize = $state.raw<IContentSize | null>(null);
-
-  function handleContentLayout(event: ISymbioteEvent): void {
-    const width = readLayoutDimension(event, 'width');
-    const height = readLayoutDimension(event, 'height');
-    if (width === undefined || height === undefined) return;
-    if (!didContentSizeChange(lastContentSize, { width, height })) return;
-    lastContentSize = { width, height };
-    dlog(`ScrollView onContentSizeChange ${width}x${height}`);
-    onContentSizeChange?.(width, height);
-  }
-
-  function handleScrollLayout(event: ISymbioteEvent): void {
-    if (forwarding.capturesViewportHeight) {
-      const height = readLayoutDimension(event, 'height');
-      if (height !== undefined) viewportHeight = height;
-    }
-    onLayout?.(event);
-  }
-
-  // onScroll: the JS-fallback path wraps the user's handler in Animated.event so the offset drives
-  // the AnimatedValue each frame (RN _scrollAnimatedValueAttachment); the native + plain paths
-  // forward the user's handler as-is (the native driver attaches the value on the UI thread).
-  const resolvedScrollHandler = $derived.by(() => {
-    if (forwarding.mode !== 'sticky-js') return onScroll;
-    return animatedEvent(
-      [{ nativeEvent: { contentOffset: { y: scrollAnimatedValue } } }],
-      onScroll === undefined
-        ? undefined
-        : {
-            listener: (...args: unknown[]) =>
-              forwardScrollEvent(onScroll, args),
-          },
-    );
-  });
-
-  // Not wrapping: the full [base, style] pair stays on the scroll view, unchanged. Wrapping: only
-  // the VISUAL half (layoutSplit.inner) paints it — the LAYOUT half moved to the wrapper below.
-  const scrollStyle = $derived([
-    intrinsics.scrollViewBaseStyle,
-    layoutSplit !== undefined ? layoutSplit.inner : style,
-  ]);
-
-  const outerBag = $derived.by(() => {
-    const forwarded = resolveAccessibilityProps(passthrough);
-    return {
-      ...forwarded,
-      nestedScrollEnabled: passthrough.nestedScrollEnabled ?? true,
-      ...(horizontal !== undefined ? { horizontal } : {}),
-      ...(decelerationRate !== undefined
-        ? { decelerationRate: resolveDecelerationRate(decelerationRate) }
-        : {}),
-      // 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 }
-        : {}),
-      style: scrollStyle,
-      onScroll: resolvedScrollHandler,
-      onLayout: handleScrollLayout,
-      ...(forwarding.scrollEventThrottle !== undefined
-        ? { scrollEventThrottle: forwarding.scrollEventThrottle }
-        : {}),
-    };
-  });
-
-  // `collapsable: false` is load-bearing on Android: the content container is a layout-only view
-  // Android Fabric would otherwise view-flatten away, hoisting the cells up as direct children of
-  // the scroll view (which strictly hosts one child — an addViewAt crash). No-op on iOS.
-  const contentBag = $derived.by(() => ({
-    style: intrinsics.contentStyle,
-    collapsable: false,
-    ...(forwarding.collapsableChildren ? { collapsableChildren: false } : {}),
-    ...(onContentSizeChange !== undefined
-      ? { onLayout: handleContentLayout }
-      : {}),
-  }));
-  // See View.svelte's note on `{@attach}`.
-  const syncAttachments = createAttachmentsSync();
-  $effect(() => {
-    syncAttachments(hostShim, passthrough);
-  });
-</script>
-
-{#snippet scrollBody()}
-  <!-- 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>
-  {:else}
-    <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>
-    {:else}
-      <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>
-{:else}
-  <symbiote-scroll-view p={outerBag} bind:this={hostShim}>
-    {@render scrollBody()}
-  </symbiote-scroll-view>
-{/if}