@symbiote-native/svelte 0.1.0

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

@@ -0,0 +1 @@
+export {};

package/build/components/scroll-view/scroll-view-sticky-context.d.ts

@@ -0,0 +1,7 @@
+import type { AnimatedValue } from '@symbiote-native/engine';
+export declare const SCROLL_VIEW_STICKY_CONTEXT_KEY: unique symbol;
+export type IScrollViewStickyContext = {
+    scrollAnimatedValue: AnimatedValue;
+    getInverted: () => boolean | undefined;
+    getViewportHeight: () => number | undefined;
+};

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

@@ -0,0 +1 @@
+export const SCROLL_VIEW_STICKY_CONTEXT_KEY = Symbol('symbiote-scroll-view-sticky');

package/build/components/scroll-view/sticky-header-props.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { AnimatedValue, ISymbioteEvent } from '@symbiote-native/engine';
+export type IStickyHeaderComponentProps = {
+    nextHeaderLayoutY?: number;
+    onLayout?: (event: ISymbioteEvent) => void;
+    scrollAnimatedValue?: AnimatedValue;
+    inverted?: boolean;
+    scrollViewHeight?: number;
+    children?: Snippet;
+};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,254 @@
+<script lang="ts" module>
+  // ScrollViewStickyHeader: the Svelte twin of React's/Vue's per-header sticky component
+  // (adapters/react/src/components/scroll-view/sticky-header.tsx,
+  // adapters/vue/src/components/scroll-view/sticky-header.ts). Drives the shared `reduceSticky`
+  // state machine (@symbiote-native/components/state/sticky-header-reducer); this component
+  // supplies only Svelte's lifecycle: the folded state cell, the interpolation + listener wiring,
+  // the debounce setTimeout, and a reactive re-render trigger.
+  //
+  // NOT auto-wrapped by `stickyHeaderIndices` on ScrollView (it only ever sees an opaque children
+  // Snippet, nothing to index/wrap - see scroll-view-props.ts's KNOWN GAP). App code composes
+  // this directly around the section that should stick:
+  //
+  //   <ScrollView>
+  //     <ScrollViewStickyHeader>
+  //       <Text>Section A</Text>
+  //     </ScrollViewStickyHeader>
+  //     <Row />
+  //     ...
+  //   </ScrollView>
+  //
+  // (VirtualizedList's own stickyHeaderIndices IS auto-wrapped, since it walks an indexable cell
+  // list - see virtualized-list/index.svelte.)
+  //
+  // `nextHeaderLayoutY` (the collision point where this header gets pushed off by the next sticky
+  // header) has no automatic cross-talk wiring for a manually-composed header here (no
+  // headerLayoutYs map exists without auto-wrapping). Left undefined, a header sticks
+  // indefinitely once pinned - correct for the common single-header case. An app with multiple
+  // manually-composed headers can pass it explicitly if it tracks the next header's own y.
+  //
+  // Native-Animated-driven, like React's ScrollViewStickyHeader.js: the pinned translateY rides
+  // as the raw AnimatedInterpolation node in style.transform on a real Animated.View
+  // (AnimatedView.svelte), whose `__makeNative()` connects it straight to the native shadow tree,
+  // so once native the pin tracks scroll on the UI thread with zero JS per frame - the
+  // interpolation's own .addListener() below only drives the separate debounced
+  // `passthroughAnimatedPropExplicitValues` (RN's own hit-testing sync).
+  //
+  // reduceSticky's 'layout' case carries an `alreadyAtThisGeometry` guard (sticky-header-reducer.ts):
+  // without it, a redundant onLayout reporting the SAME y/height (which every onLayout consumer
+  // must tolerate) rebuilds the interpolation graph and reconnects it natively on every pass, and
+  // each such commit can itself provoke another relayout - an unbounded same-tick ping-pong that
+  // crashes with Svelte's `effect_update_depth_exceeded`. Fixed at the shared layer so every
+  // adapter gets it, not just this one.
+  //
+  // Bootstrap note: the FIRST tick must reach this component's interpolation via JS (the parent's
+  // own scroll-forwarding, NOT `attachStickyScroll`'s native event attach) — `__makeNative()`
+  // cascades to its PARENT first (interpolation-node.ts), so once `wantsNative` flips true off
+  // the first settled debounce, the whole chain promotes to native automatically. If
+  // `scrollAnimatedValue` were made native UP FRONT, its JS listener cascade would be permanently
+  // disabled (AnimatedWithChildren.__callListeners skips children once isNative) before a single
+  // tick ever reached this component - a bootstrap deadlock, not a flaky native module. This is
+  // why ScrollView/VirtualizedList force `nativeStickyAvailable = false`: the correct bootstrap
+  // path, not a workaround.
+  import type { IStickyHeaderComponentProps } from './sticky-header-props';
+
+  export type { IStickyHeaderComponentProps };
+
+  // Diagnostic-only: a module-scope counter so every instance across every ScrollViewStickyHeader
+  // in a device log is individually identifiable (see the mount/unmount dlog calls below).
+  let stickyHeaderInstanceSeq = 0;
+</script>
+
+<script lang="ts">
+  import { getContext } from 'svelte';
+  import {
+    createInitialStickyState,
+    reduceSticky,
+    readLayoutNumber,
+    STICKY_HEADER_Z_INDEX,
+    type IStickyAction,
+    type IStickyEffect,
+    type IStickyReducerInputs,
+  } from '@symbiote-native/components';
+  import { AnimatedValue, Platform, dlog, type AnimatedInterpolation, type ISymbioteEvent } from '@symbiote-native/engine';
+  import AnimatedView from '../../modules/animated/AnimatedView.svelte';
+  import {
+    SCROLL_VIEW_STICKY_CONTEXT_KEY,
+    type IScrollViewStickyContext,
+  } from './scroll-view-sticky-context';
+  import { pickAttachmentProps } from '../../runes/attachments';
+
+  let {
+    nextHeaderLayoutY,
+    onLayout: onLayoutProp,
+    scrollAnimatedValue: scrollAnimatedValueProp,
+    inverted: invertedProp,
+    scrollViewHeight: scrollViewHeightProp,
+    children,
+    ...passthrough
+  }: IStickyHeaderComponentProps = $props();
+
+  // Resolve the scroll wiring from the parent ScrollView's context when not given explicitly.
+  // A fresh standalone AnimatedValue is the fallback for a header used outside a ScrollView
+  // (never sticks, but never crashes either).
+  const stickyContext = getContext<IScrollViewStickyContext | undefined>(SCROLL_VIEW_STICKY_CONTEXT_KEY);
+  $effect(() => {
+    if (stickyContext === undefined && scrollAnimatedValueProp === undefined) {
+      dlog('ScrollViewStickyHeader used outside a ScrollView — sticky positioning is a no-op');
+    }
+  });
+  // svelte-ignore state_referenced_locally -- captured ONCE by identity; it does not change
+  // after mount, so re-deriving it would be wrong.
+  const scrollAnimatedValue =
+    scrollAnimatedValueProp ?? stickyContext?.scrollAnimatedValue ?? new AnimatedValue(0);
+  const inverted = $derived(invertedProp ?? stickyContext?.getInverted());
+  const scrollViewHeight = $derived(scrollViewHeightProp ?? stickyContext?.getViewportHeight());
+
+  // The one folded state cell (RN's scattered useState/useRef collapsed into IStickyHeaderState),
+  // mutated in place by reduceSticky. Named `stickyState`, not `state`: a local binding literally
+  // called `state` collides with the `$state` rune (Svelte's store_rune_conflict warning).
+  const stickyState = createInitialStickyState();
+  // Bumped on every 'apply-passthrough' effect so the passthrough $derived below re-reads
+  // stickyState.translateY (RN's forceRender()).
+  let version = $state(0);
+
+  // The interpolation node currently bound into style.transform — held by IDENTITY ($state.raw),
+  // rebuilt on every 'rebuild-interpolation' effect.
+  let animatedTranslateY = $state.raw<AnimatedInterpolation>(
+    scrollAnimatedValue.interpolate({ inputRange: [-1, 0], outputRange: [0, 0] }),
+  );
+  let listenerId: string | undefined;
+  let debounceTimer: ReturnType<typeof setTimeout> | undefined;
+
+  function inputs(): IStickyReducerInputs {
+    return { os: Platform.OS, inverted, scrollViewHeight, nextHeaderLayoutY };
+  }
+
+  function runEffects(effects: IStickyEffect[]): void {
+    for (const effect of effects) {
+      switch (effect.kind) {
+        case 'rebuild-interpolation': {
+          // Logs the actual input/output ranges (not just `changedKeys=style`) so a device log
+          // shows what gets built right at a header collision; own layoutY identifies which
+          // header this is.
+          dlog(
+            `ScrollViewStickyHeader[y=${stickyState.layoutY}] rebuild-interpolation ` +
+              `inputRange=${JSON.stringify(effect.inputRange)} outputRange=${JSON.stringify(effect.outputRange)} ` +
+              `nextHeaderLayoutY=${String(nextHeaderLayoutY)}`,
+          );
+          // Detach the old listener, build a fresh interpolation onto the shared scroll value, and
+          // wire the settled-value listener (drives ONLY the debounced hit-testing passthrough
+          // below — the visible pin rides the native AnimatedProps connection in the markup).
+          if (listenerId !== undefined) animatedTranslateY.removeListener(listenerId);
+          const next = scrollAnimatedValue.interpolate({
+            inputRange: effect.inputRange,
+            outputRange: effect.outputRange,
+          });
+          listenerId = next.addListener(({ value }: { value: number | string }): void => {
+            if (typeof value === 'number') dispatch({ kind: 'animated-tick', value });
+          });
+          animatedTranslateY = next;
+          break;
+        }
+        case 'schedule-debounce':
+          if (debounceTimer !== undefined) clearTimeout(debounceTimer);
+          debounceTimer = setTimeout(() => {
+            debounceTimer = undefined;
+            dispatch({ kind: 'debounce-fired', value: effect.value });
+          }, effect.delay);
+          break;
+        case 'apply-passthrough':
+          // The actual committed translateY — a freeze at a huge/wrong number here is the
+          // visible-disappearance symptom to watch for.
+          dlog(`ScrollViewStickyHeader[y=${stickyState.layoutY}] apply-passthrough translateY=${effect.translateY}`);
+          version += 1;
+          break;
+        case 'record-header-y':
+          // No auto-wrap cross-talk map in this adapter (see the module header comment) — nothing
+          // to record into.
+          break;
+      }
+    }
+  }
+
+  function dispatch(action: IStickyAction): void {
+    runEffects(reduceSticky(stickyState, action, inputs()).effects);
+  }
+
+  // Rebuild when the collision/viewport inputs change; also does the initial identity build.
+  $effect(() => {
+    void inverted;
+    void scrollViewHeight;
+    void nextHeaderLayoutY;
+    dispatch({ kind: 'inputs-changed' });
+  });
+
+  // Logs mount/unmount so a device log shows whether a header index gets destroyed+recreated (a
+  // fresh instance id right after an unmount of the same index) as it crosses the
+  // forcedStickyCell/windowed-cell boundary in VirtualizedList's {#each}, or stays one instance.
+  const instanceId = ++stickyHeaderInstanceSeq;
+  dlog(`ScrollViewStickyHeader#${instanceId} mount`);
+
+  // Detach the listener + clear the debounce on unmount.
+  $effect(() => {
+    return (): void => {
+      dlog(`ScrollViewStickyHeader#${instanceId}[y=${stickyState.layoutY}] unmount`);
+      if (listenerId !== undefined) animatedTranslateY.removeListener(listenerId);
+      if (debounceTimer !== undefined) clearTimeout(debounceTimer);
+    };
+  });
+
+  function handleLayout(event: ISymbioteEvent): void {
+    const y = readLayoutNumber(event, 'y');
+    const height = readLayoutNumber(event, 'height');
+    // Keep the previous value when a field is absent (RN sets state only on a defined read).
+    dispatch({
+      kind: 'layout',
+      y: y ?? stickyState.layoutY,
+      height: height ?? stickyState.layoutHeight,
+    });
+    dlog(`ScrollViewStickyHeader layout y=${y} height=${height}`);
+    onLayoutProp?.(event);
+  }
+
+  // The EXPLICIT debounced translateY overrides the committed transform for hit-testing, while
+  // `animatedTranslateY` (in the markup below) does the smooth native-driven pin — per RN
+  // ScrollViewStickyHeader.js, and AnimatedView.svelte's own passthroughAnimatedPropExplicitValues
+  // contract (readPassthroughStyle).
+  const passthroughAnimatedPropExplicitValues = $derived.by(() => {
+    void version;
+    return stickyState.translateY !== null
+      ? { style: { transform: [{ translateY: stickyState.translateY }] } }
+      : null;
+  });
+
+  // Kept as ITS OWN derived, reading only `animatedTranslateY` — NOT folded into `bag` below.
+  // `bag` also carries `passthroughAnimatedPropExplicitValues`, which changes value on every
+  // 'apply-passthrough' tick (every scroll frame); if `style` lived in that same derived it would
+  // get a fresh object identity on every tick even though the interpolation node never changed.
+  // animated-props-runtime.ts's reconcile() relies on `style`'s reference staying stable across
+  // passthrough-only ticks to skip rebuilding the native AnimatedProps graph — without this
+  // split, every scroll frame tore down and reconnected the native node, and a reconnect right as
+  // scrolling stopped left the header frozen at its post-reset default until the next tick.
+  const animatedStyle = $derived.by(() => ({
+    transform: [{ translateY: animatedTranslateY }],
+    zIndex: STICKY_HEADER_Z_INDEX,
+  }));
+
+  // collapsable:false keeps the wrapper a real Yoga node; zIndex makes the pinned header paint
+  // OVER the rows scrolling under it.
+  const bag = $derived.by(() => ({
+    style: animatedStyle,
+    onLayout: handleLayout,
+    collapsable: false,
+    passthroughAnimatedPropExplicitValues,
+  }));
+
+  // `{@attach}` rides in the rest object as a symbol-keyed entry; forwarded onto AnimatedView,
+  // which owns this component's actual host node.
+  const attachments = $derived(pickAttachmentProps(passthrough));
+</script>
+
+<AnimatedView {...bag} {...attachments}>
+  {@render children?.()}
+</AnimatedView>

package/build/components/scroll-view/sticky-header.svelte.d.ts

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

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

@@ -0,0 +1,107 @@
+<script lang="ts" module>
+  // SectionList: the public list-of-sections component. A thin wrapper over
+  // VirtualizedSectionList, mirroring RN's layering (SectionList -> VirtualizedSectionList ->
+  // VirtualizedList). All section-flattening / windowing / imperative-scroll logic lives below;
+  // this layer re-exposes the same surface under the SectionList name and delegates the handle
+  // (a Svelte `bind:this` on THIS component resolves to whatever THIS component exports, so the
+  // wrapper must re-declare + delegate rather than re-exporting the child's exports directly) —
+  // the Svelte twin of the React/Vue SectionList.
+  import type { ISectionListProps, ISectionListHandle, ISection } from './section-list-props';
+
+  export type { ISectionListProps, ISectionListHandle, ISection };
+</script>
+
+<script lang="ts" generics="ItemT">
+  import VirtualizedSectionList from '../virtualized-section-list/index.svelte';
+  import { pickAccessibilityProps } from '../virtualized-list/virtualized-list-props';
+  import type {
+    IVirtualizedSectionListHandle,
+    IScrollViewHandle,
+  } from '../virtualized-list/virtualized-list-props';
+  import type { ISectionListProps as IProps } from './section-list-props';
+  import { pickAttachmentProps } from '../../runes/attachments';
+  import type { ISymbioteNode } from '@symbiote-native/engine';
+
+  let props: IProps<ItemT> = $props();
+
+  let inner = $state.raw<IVirtualizedSectionListHandle | null>(null);
+
+  // Forwarded as a component-prop spread onto VirtualizedSectionList (a compiled Svelte
+  // component, not a symbiote-* host tag — see flat-list/index.svelte's identical comment).
+  const accessibilityProps = $derived(pickAccessibilityProps(props));
+
+  export function scrollToLocation(params: {
+    sectionIndex: number;
+    itemIndex: number;
+    viewOffset?: number;
+    viewPosition?: number;
+    animated?: boolean;
+  }): void {
+    inner?.scrollToLocation(params);
+  }
+  export function flashScrollIndicators(): void {
+    inner?.flashScrollIndicators();
+  }
+  export function getNativeScrollRef(): IScrollViewHandle | null {
+    return inner?.getNativeScrollRef() ?? null;
+  }
+  export function getScrollableNode(): IScrollViewHandle | null {
+    return inner?.getScrollableNode() ?? null;
+  }
+  export function getScrollResponder(): IScrollViewHandle | null {
+    return inner?.getScrollResponder() ?? null;
+  }
+  export function getScrollNode(): ISymbioteNode | null {
+    return inner?.getScrollNode() ?? null;
+  }
+  export function recordInteraction(): void {
+    inner?.recordInteraction();
+  }
+
+  // `{@attach}` arrives as a symbol-keyed prop, which naming individual props below drops.
+  // Re-spread just those onto the inner list, which owns the real host node.
+  const attachments = $derived(pickAttachmentProps(props));
+</script>
+
+<VirtualizedSectionList
+  bind:this={inner}
+  {...accessibilityProps}
+  {...attachments}
+  sections={props.sections}
+  item={props.item}
+  sectionHeader={props.sectionHeader}
+  sectionFooter={props.sectionFooter}
+  sectionSeparator={props.sectionSeparator}
+  separator={props.separator}
+  header={props.header}
+  footer={props.footer}
+  empty={props.empty}
+  keyExtractor={props.keyExtractor}
+  stickySectionHeadersEnabled={props.stickySectionHeadersEnabled}
+  inverted={props.inverted}
+  extraData={props.extraData}
+  onEndReached={props.onEndReached}
+  onEndReachedThreshold={props.onEndReachedThreshold}
+  onStartReached={props.onStartReached}
+  onStartReachedThreshold={props.onStartReachedThreshold}
+  onRefresh={props.onRefresh}
+  refreshing={props.refreshing}
+  progressViewOffset={props.progressViewOffset}
+  initialNumToRender={props.initialNumToRender}
+  initialScrollIndex={props.initialScrollIndex}
+  maxToRenderPerBatch={props.maxToRenderPerBatch}
+  updateCellsBatchingPeriod={props.updateCellsBatchingPeriod}
+  windowSize={props.windowSize}
+  maintainVisibleContentPosition={props.maintainVisibleContentPosition}
+  onScroll={props.onScroll}
+  onScrollBeginDrag={props.onScrollBeginDrag}
+  onScrollEndDrag={props.onScrollEndDrag}
+  onMomentumScrollBegin={props.onMomentumScrollBegin}
+  onMomentumScrollEnd={props.onMomentumScrollEnd}
+  scrollEventThrottle={props.scrollEventThrottle}
+  keyboardShouldPersistTaps={props.keyboardShouldPersistTaps}
+  keyboardDismissMode={props.keyboardDismissMode}
+  style={props.style}
+  contentContainerStyle={props.contentContainerStyle}
+  class={props.class}
+/>

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

@@ -0,0 +1,57 @@
+import type { ISectionListProps, ISectionListHandle, ISection } from './section-list-props';
+export type { ISectionListProps, ISectionListHandle, ISection };
+import type { IScrollViewHandle } from '../virtualized-list/virtualized-list-props';
+import type { ISectionListProps as IProps } from './section-list-props';
+import type { ISymbioteNode } from '@symbiote-native/engine';
+declare function $$render<ItemT>(): {
+    props: IProps<ItemT>;
+    exports: {
+        scrollToLocation: (params: {
+            sectionIndex: number;
+            itemIndex: number;
+            viewOffset?: number;
+            viewPosition?: number;
+            animated?: boolean;
+        }) => void;
+        flashScrollIndicators: () => void;
+        getNativeScrollRef: () => IScrollViewHandle | null;
+        getScrollableNode: () => IScrollViewHandle | null;
+        getScrollResponder: () => IScrollViewHandle | null;
+        getScrollNode: () => ISymbioteNode | null;
+        recordInteraction: () => void;
+    };
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<ItemT> {
+    props(): ReturnType<typeof $$render<ItemT>>['props'];
+    events(): ReturnType<typeof $$render<ItemT>>['events'];
+    slots(): ReturnType<typeof $$render<ItemT>>['slots'];
+    bindings(): "";
+    exports(): {
+        scrollToLocation: (params: {
+            sectionIndex: number;
+            itemIndex: number;
+            viewOffset?: number;
+            viewPosition?: number;
+            animated?: boolean;
+        }) => void;
+        flashScrollIndicators: () => void;
+        getNativeScrollRef: () => IScrollViewHandle | null;
+        getScrollableNode: () => IScrollViewHandle | null;
+        getScrollResponder: () => IScrollViewHandle | null;
+        getScrollNode: () => ISymbioteNode | null;
+        recordInteraction: () => void;
+    };
+}
+interface $$IsomorphicComponent {
+    new <ItemT>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<ItemT>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<ItemT>['props']>, ReturnType<__sveltets_Render<ItemT>['events']>, ReturnType<__sveltets_Render<ItemT>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<ItemT>['bindings']>;
+    } & ReturnType<__sveltets_Render<ItemT>['exports']>;
+    <ItemT>(internal: unknown, props: ReturnType<__sveltets_Render<ItemT>['props']> & {}): ReturnType<__sveltets_Render<ItemT>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Index: $$IsomorphicComponent;
+type Index<ItemT> = InstanceType<typeof Index<ItemT>>;
+export default Index;

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

@@ -0,0 +1 @@
+export type { IVirtualizedSectionListProps as ISectionListProps, IVirtualizedSectionListHandle as ISectionListHandle, ISection, } from '../virtualized-section-list/virtualized-section-list-props';

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

@@ -0,0 +1 @@
+export {};

package/build/components/switch/index.svelte

@@ -0,0 +1,123 @@
+<script lang="ts" module>
+  // Switch: the first STATE-machine component in the Svelte adapter (View/Text are
+  // render-only). Reuses the shared logic verbatim (switchReducer / valueFromChange /
+  // shouldSnapBack, exactly like React's useReducer + Vue's ref-based reducer wiring) and
+  // calls renderSwitch() itself for the prop assembly — its Descriptor is always exactly one
+  // `symbiote-switch` node with zero children (core/components/src/view/render-switch.ts). Root
+  // stays a literal tag (bind:this needs a known tag); `createDescriptorChildrenSync` is still
+  // wired for its (always-empty) children, matching every other category-1 component uniformly
+  // — the same reason React still routes a childless Switch through descriptorToReact rather
+  // than special-casing it. See svelte-adapter-dom-shim skill §19.
+  //
+  // `value` is `$bindable()` (2026-08-15): `<Switch bind:value={x}>` round-trips a native toggle
+  // into `x` with no extra plumbing at the call site. See handleChange's own comment for exactly
+  // when the echo fires and why it is gated on `onValueChange` being absent — the full reasoning
+  // (and why an ungated echo would silently defeat the existing snap-back correction) lives next
+  // to TextInput's identical mechanism in text-input/index.svelte, plus the skill's §7 note.
+  import type { ISwitchProps } from './switch-props';
+
+  export type { ISwitchProps };
+</script>
+
+<script lang="ts">
+  import {
+    switchReducer,
+    createInitialSwitchState,
+    shouldSnapBack,
+    valueFromChange,
+    renderSwitch,
+  } from '@symbiote-native/components';
+  import { dispatchViewCommand, dlog, type ISymbioteEvent } from '@symbiote-native/engine';
+  import { PLATFORM } from './switch-platform';
+  import { createDescriptorChildrenSync } from '../../descriptor-to-svelte';
+  import { createAttachmentsSync } from '../../runes/attachments';
+  import type { ShimElement } from '../../dom-shim';
+
+  let {
+    value = $bindable(),
+    onValueChange,
+    disabled,
+    trackColor,
+    thumbColor,
+    ios_backgroundColor,
+    style,
+    class: className,
+    ...passthrough
+  }: ISwitchProps = $props();
+
+  // $state.raw, NOT $state: this holds the shim element by IDENTITY (the same
+  // shallowRef-not-ref concern Vue's switch/shared.ts documents). $state() would deep-proxy
+  // the object, and every imperative command (dispatchViewCommand) reads `.engineNode` off
+  // the RAW ShimElement the engine's WeakMap-keyed mirror actually knows about — a Proxy
+  // wrapper would miss on every lookup and silently no-op.
+  let hostShim = $state.raw<ShimElement | null>(null);
+  let switchState = $state(createInitialSwitchState());
+
+  const fabricValue = $derived(value === true);
+
+  function handleChange(event: ISymbioteEvent): void {
+    const next = valueFromChange(event);
+    dlog(
+      `Switch onChange value=${String(next)} eventCount=${String(event.nativeEvent.eventCount)}`,
+    );
+    if (next === undefined) return;
+    onValueChange?.(next, event);
+    // $bindable() sugar: with no onValueChange nothing could reject this report, so mirror it
+    // straight into the bound value. A caller that ALSO supplies onValueChange keeps full
+    // accept/reject control via the snap-back effect below — see TextInput's identical
+    // mechanism (text-input/index.svelte) for why echoing unconditionally would break that.
+    if (onValueChange === undefined) value = next;
+    switchState = switchReducer(switchState, { type: 'native-reported', value: next });
+  }
+
+  // Snap-back: when native reported a value the parent rejected (the value prop did not
+  // change), command the JS value back down — the controlled-Switch correction RN does via
+  // SwitchCommands.setValue/setNativeValue. Mirrors React's useLayoutEffect / Vue's post-flush
+  // watch; Svelte's $effect reruns whenever switchState or fabricValue changes, which is the
+  // same trigger set. Verified against a real compiled mount
+  // (mount-pipeline.smoke.test.ts + switch.smoke.test.ts): the shim's insertOne() calls
+  // makeLive() synchronously as part of the SAME appendChild the compiler emits before
+  // bind:this fires, so hostShim.engineNode is always populated by the time this first runs.
+  $effect(() => {
+    const engineNode = hostShim?.engineNode;
+    if (engineNode === undefined) return;
+    if (!shouldSnapBack(switchState, fabricValue)) {
+      dlog(
+        `Switch snap-back no-op reported=${String(switchState.lastNativeReport)} value=${fabricValue}`,
+      );
+      return;
+    }
+    dlog(
+      `Switch ${PLATFORM.snapBackCommand} snap-back reported=${String(switchState.lastNativeReport)} value=${fabricValue}`,
+    );
+    dispatchViewCommand(engineNode, PLATFORM.snapBackCommand, [fabricValue]);
+  });
+
+  const descriptor = $derived(
+    renderSwitch(
+      {
+        value: fabricValue,
+        disabled,
+        trackColor,
+        thumbColor,
+        ios_backgroundColor,
+        style,
+        passthrough: { ...passthrough, class: className, onChange: handleChange },
+      },
+      PLATFORM,
+    ),
+  );
+
+  const syncChildren = createDescriptorChildrenSync();
+  $effect(() => {
+    syncChildren(hostShim, descriptor.children);
+  });
+
+  // See View.svelte's note on `{@attach}`.
+  const syncAttachments = createAttachmentsSync();
+  $effect(() => {
+    syncAttachments(hostShim, passthrough);
+  });
+</script>
+
+<symbiote-switch p={descriptor.props} bind:this={hostShim} />

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

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

package/build/components/switch/switch-platform-types.d.ts

@@ -0,0 +1,5 @@
+import type { ISwitchTrackColor } from '@symbiote-native/components';
+export type ISwitchHostPlatform = {
+    snapBackCommand: string;
+    trackColorProps: (value: boolean, trackColor?: ISwitchTrackColor) => Record<string, unknown>;
+};

package/build/components/switch/switch-platform-types.js

@@ -0,0 +1 @@
+export {};

package/build/components/switch/switch-platform.android.d.ts

@@ -0,0 +1,3 @@
+import type { ISwitchHostPlatform } from './switch-platform-types';
+export type { ISwitchHostPlatform };
+export declare const PLATFORM: ISwitchHostPlatform;

package/build/components/switch/switch-platform.android.js

@@ -0,0 +1,8 @@
+export const PLATFORM = {
+    snapBackCommand: 'setNativeValue',
+    trackColorProps: (value, trackColor) => ({
+        trackColorForFalse: trackColor?.false,
+        trackColorForTrue: trackColor?.true,
+        trackTintColor: value ? trackColor?.true : trackColor?.false,
+    }),
+};

package/build/components/switch/switch-platform.d.ts

@@ -0,0 +1 @@
+export * from './switch-platform.ios';

package/build/components/switch/switch-platform.ios.d.ts

@@ -0,0 +1,3 @@
+import type { ISwitchHostPlatform } from './switch-platform-types';
+export type { ISwitchHostPlatform };
+export declare const PLATFORM: ISwitchHostPlatform;

package/build/components/switch/switch-platform.ios.js

@@ -0,0 +1,7 @@
+export const PLATFORM = {
+    snapBackCommand: 'setValue',
+    trackColorProps: (_value, trackColor) => ({
+        onTintColor: trackColor?.true,
+        tintColor: trackColor?.false,
+    }),
+};

package/build/components/switch/switch-platform.js

@@ -0,0 +1,5 @@
+// Base / default: re-exports the iOS build. Metro overrides this with switch-platform.ios.ts /
+// switch-platform.android.ts on a real host; under tsc/vitest the host config resolves here.
+// Filename is the selector, no Platform.OS read — same convention as every other adapter's
+// switch platform split.
+export * from './switch-platform.ios.js';

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

@@ -0,0 +1,5 @@
+import type { ISwitchProps as ISwitchBaseProps } from '@symbiote-native/components';
+import type { ISvelteClassValue } from '../../class-value';
+export type ISwitchProps = ISwitchBaseProps & {
+    class?: ISvelteClassValue;
+};

package/build/components/switch/switch-props.js

@@ -0,0 +1 @@
+export {};