@symbiote-native/svelte 0.1.0

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

@@ -0,0 +1,300 @@
+<script lang="ts" module>
+  // TextInput: the controlled-value / event-count handshake, calling straight into
+  // core/components/src/view/render-text-input.ts's renderTextInput() for the prop assembly —
+  // its returned Descriptor's `.props` is destructured onto whichever of the two literal host
+  // tags `isMultiline` picks below. NOT `<svelte:element this={descriptor.type}>`: a dynamic tag
+  // compiles through Svelte's generic setAttribute path, not the custom-element `p=` property-set
+  // codegen every symbiote-* tag needs (proven by a real regression — see svelte-adapter-dom-shim
+  // skill §15). Reuses the shared logic verbatim (resolveTextInputProps / foldText /
+  // textFromChange / eventCountFromChange / shouldCommandText). Runes: `$state.raw` holds the
+  // shim-element/engine-node reference (imperative commands read the RAW ShimElement — see
+  // switch/index.svelte's header comment for why `$state()` would break the engine's
+  // WeakMap-keyed identity lookup), `$state` tracks the acknowledged event count, and `$effect`
+  // drives the controlled-write command — the TextInput twin of Switch's snap-back effect. The
+  // imperative handle (focus/blur/clear/isFocused/setSelection) is exposed the Svelte 5 way:
+  // plain functions declared in the INSTANCE script (not here in `<script module>`, shared
+  // across every instance) become callable off a parent's `bind:this` target.
+  //
+  // `value` is `$bindable()`: `<TextInput bind:value={x}>` round-trips a native edit into `x`
+  // with no adapter-side translation beyond the one-line echo in handleChange, GATED on
+  // `onValueChange` being absent. Ungated, it would defeat the controlled-write correction below
+  // for every plain `value`+`onValueChange` consumer too, not just bind: ones: a `$bindable`
+  // prop with no `bind:` caller still caches the child's own write as a local override (verified
+  // against svelte's real `prop()` runtime, `reactivity/props.js`), so an unconditional echo
+  // would make `value` agree with `lastNativeText` on every native report and silently
+  // short-circuit `shouldCommandText` — even for a parent that never once accepts.
+  import type { ITextInputProps } from './text-input-props';
+
+  export type { ITextInputProps };
+  export type { ITextInputHandle } from '@symbiote-native/components';
+</script>
+
+<script lang="ts">
+  import {
+    resolveAccessibilityProps,
+    resolveTextInputProps,
+    renderTextInput,
+    foldText,
+    textFromChange,
+    eventCountFromChange,
+    shouldCommandText,
+    INITIAL_EVENT_COUNT,
+    SELECTION_NONE,
+  } from '@symbiote-native/components';
+  import {
+    dispatchViewCommand,
+    dlog,
+    blurTextInput,
+    setInputFocused,
+    setInputBlurred,
+    type ISymbioteEvent,
+  } from '@symbiote-native/engine';
+  import { createDescriptorChildrenSync } from '../../descriptor-to-svelte';
+  import { createAttachmentsSync } from '../../runes/attachments';
+  import type { ShimElement } from '../../dom-shim';
+
+  // The exact destructure list React's index.ts pulls out of props before building
+  // `passthrough` (everything else rides through to Fabric untouched — placeholder,
+  // secureTextEntry, style, class, testID, the remaining native events, the accessibility*
+  // props already folded below). `class`/`style` are deliberately NOT here, same as Vue's
+  // HANDLED_ATTRS, so they forward like every other adapter's TextInput.
+  const HANDLED_KEYS: readonly string[] = [
+    'defaultValue',
+    'multiline',
+    'selection',
+    'onValueChange',
+    'onFocus',
+    'onBlur',
+    'inputMode',
+    'enterKeyHint',
+    'readOnly',
+    'submitBehavior',
+    'blurOnSubmit',
+    'cursorColor',
+    'selectionColor',
+    'selectionHandleColor',
+    'keyboardType',
+    'returnKeyType',
+    'editable',
+    'autoComplete',
+    'textContentType',
+    'autoFocus',
+    'showSoftInputOnFocus',
+    'underlineColorAndroid',
+  ];
+
+  // `resolveAccessibilityProps` only transforms accessibility*/aria-*/role fields, so it's
+  // applied HERE, once, at the one place that needs the folded result, rather than wrapped
+  // around the whole props object in an outer $derived — every other derived/effect keeps a
+  // plain, direct property read on the raw `$props()` proxy. `source` is a closed interface (no
+  // index signature), so `Object.keys` + bracket-indexing would need an `as` cast; `Object.entries`
+  // falls onto TS's `entries(o: {}): [string, any][]` overload instead, which needs no cast.
+  function forwardProps(source: Omit<ITextInputProps, 'value'>): Record<string, unknown> {
+    const resolved = resolveAccessibilityProps(source);
+    const result: Record<string, unknown> = {};
+    for (const [key, propValue] of Object.entries(resolved)) {
+      if (!HANDLED_KEYS.includes(key)) result[key] = propValue;
+    }
+    return result;
+  }
+
+  // `value` is $bindable() (see the module-script header for the full reasoning); everything
+  // else keeps flowing through `rest`, the exact twin of the old whole-object `rawProps` for
+  // every non-`value` field.
+  let { value = $bindable(), ...rest }: ITextInputProps = $props();
+
+  // $state.raw, NOT $state: identity concern, see the module-script header above.
+  let hostShim = $state.raw<ShimElement | null>(null);
+
+  // The count native last acknowledged. $state so the bag echoes it back on every commit and
+  // the exposed handle reads the latest (the Svelte twin of React's useState / Vue's ref).
+  let mostRecentEventCount = $state(INITIAL_EVENT_COUNT);
+  // The last text native holds, as far as JS knows. Seeded from the mount-time value — the
+  // `text` prop already carries it down via the bag, so the FIRST controlled value is not a
+  // divergence and must NOT re-command. Bookkeeping, not render state: a plain `let`, same as
+  // Vue's setup-scope `let lastNativeText`.
+  let lastNativeText = foldText(value, rest.defaultValue);
+  // JS-side focus state, mirrored from the focus/blur events for isFocused(): native exposes no
+  // synchronous focus getter (RN's TextInputState keeps the same).
+  let focused = false;
+  // autoFocus fires once, when the host node first goes live; guarded so a later re-render (or
+  // an intrinsic swap between single/multiline) doesn't re-focus.
+  let autoFocused = false;
+
+  const isMultiline = $derived(rest.multiline === true);
+  const text = $derived(foldText(value, rest.defaultValue));
+  const folded = $derived(
+    resolveTextInputProps({
+      inputMode: rest.inputMode,
+      keyboardType: rest.keyboardType,
+      enterKeyHint: rest.enterKeyHint,
+      returnKeyType: rest.returnKeyType,
+      readOnly: rest.readOnly,
+      editable: rest.editable,
+      submitBehavior: rest.submitBehavior,
+      blurOnSubmit: rest.blurOnSubmit,
+      multiline: isMultiline,
+      cursorColor: rest.cursorColor,
+      selectionColor: rest.selectionColor,
+      selectionHandleColor: rest.selectionHandleColor,
+      autoComplete: rest.autoComplete,
+      textContentType: rest.textContentType,
+      showSoftInputOnFocus: rest.showSoftInputOnFocus,
+      underlineColorAndroid: rest.underlineColorAndroid,
+    }),
+  );
+
+  function handleChange(event: ISymbioteEvent): void {
+    // Event seam: the controlled handshake hinges on the change payload carrying `text`
+    // (+ `eventCount`). iOS and Android Fabric can key these differently, so log the actual
+    // shape here; a missing `text` means onValueChange never fires.
+    dlog(
+      `TextInput change keys=[${Object.keys(event.nativeEvent).join(',')}] ` +
+        `text=${JSON.stringify(event.nativeEvent.text)} count=${JSON.stringify(event.nativeEvent.eventCount)}`,
+    );
+    const changedText = textFromChange(event);
+    if (changedText !== undefined) {
+      // Record the text first, then bump the acknowledged count, so the count never runs ahead
+      // of the text it stands for.
+      lastNativeText = changedText;
+      rest.onValueChange?.(changedText, 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 controlled-write effect below — see the module-script
+      // header for why echoing unconditionally would break that for it too.
+      if (rest.onValueChange === undefined) value = changedText;
+    }
+    const count = eventCountFromChange(event);
+    if (count !== undefined) mostRecentEventCount = count;
+  }
+
+  function handleFocus(event: ISymbioteEvent): void {
+    focused = true;
+    // Track focus app-wide so Keyboard.dismiss can blur this input without a ref.
+    const engineNode = hostShim?.engineNode;
+    if (engineNode !== undefined) setInputFocused(engineNode);
+    rest.onFocus?.(event);
+  }
+
+  function handleBlur(event: ISymbioteEvent): void {
+    focused = false;
+    const engineNode = hostShim?.engineNode;
+    if (engineNode !== undefined) setInputBlurred(engineNode);
+    rest.onBlur?.(event);
+  }
+
+  // Controlled write: when JS-side `value` diverges from what native reported, command the new
+  // text down with the acknowledged count — a plain prop re-push would race the user's
+  // keystrokes; the command is the only stale-safe path. `value` and `count` are read
+  // UNCONDITIONALLY up front, before either early return: a rejecting parent never changes
+  // `props.value`, only `mostRecentEventCount` (bumped inside handleChange), so reading `count`
+  // only after the `shouldCommandText` guard would drop it from the tracked dependency set on the
+  // run that first falls through, and a later event-count-only change would then silently fail
+  // to retrigger this effect (same class of bug Switch's snap-back effect avoids). Verified
+  // against a real compiled mount (text-input.smoke.test.ts): the shim's insertOne() calls
+  // makeLive() synchronously as part of the SAME appendChild/insertBefore the compiler emits,
+  // before `bind:this` fires, so `hostShim.engineNode` is always populated by the time this
+  // first runs.
+  $effect(() => {
+    const engineNode = hostShim?.engineNode;
+    // `value` (component-scope, now $bindable()) IS the authoritative prop read — no local
+    // shadow needed; reading it here still establishes the effect's dependency exactly as the
+    // old `const value = rawProps.value` line did.
+    const currentValue = value;
+    const count = mostRecentEventCount;
+    if (engineNode === undefined) return;
+    if (!shouldCommandText(lastNativeText, currentValue)) return;
+    const selStart = rest.selection?.start ?? SELECTION_NONE;
+    const selEnd = rest.selection?.end ?? rest.selection?.start ?? SELECTION_NONE;
+    dlog(`TextInput setTextAndSelection count=${count} text=${JSON.stringify(currentValue)}`);
+    dispatchViewCommand(engineNode, 'setTextAndSelection', [count, currentValue, selStart, selEnd]);
+    lastNativeText = currentValue;
+  });
+
+  // autoFocus is driven in JS, not as a native prop: once the host node first goes live, command
+  // `focus` down once (RN does the same via TextInputState.focusInput). No commit-timing retry
+  // needed here (unlike Vue's whenCommitted) — same synchronous makeLive() guarantee the
+  // controlled-write effect above relies on.
+  $effect(() => {
+    const engineNode = hostShim?.engineNode;
+    if (autoFocused || engineNode === undefined || rest.autoFocus !== true) return;
+    autoFocused = true;
+    dlog('TextInput autoFocus -> focus command');
+    dispatchViewCommand(engineNode, 'focus', []);
+  });
+
+  // The imperative API RN exposes on a TextInput ref, as plain instance-script functions — the
+  // Svelte 5 mechanism (no useImperativeHandle/expose() rune): a parent's `bind:this={ref}` gets
+  // `ref.focus()` etc. callable directly, typed via the re-exported `ITextInputHandle` above.
+  // focus/blur drive native view commands; clear/setSelection reuse setTextAndSelection (the
+  // same stale-safe path as a controlled write), echoing the acknowledged event count.
+  export function focus(): void {
+    const engineNode = hostShim?.engineNode;
+    if (engineNode !== undefined) dispatchViewCommand(engineNode, 'focus', []);
+  }
+
+  export function blur(): void {
+    // Routes through TextInputState so the app-wide focus tracking clears too.
+    blurTextInput(hostShim?.engineNode ?? null);
+  }
+
+  export function clear(): void {
+    const engineNode = hostShim?.engineNode;
+    if (engineNode === undefined) return;
+    dispatchViewCommand(engineNode, 'setTextAndSelection', [mostRecentEventCount, '', 0, 0]);
+    lastNativeText = '';
+  }
+
+  export function isFocused(): boolean {
+    return focused;
+  }
+
+  export function setSelection(start: number, end: number): void {
+    const engineNode = hostShim?.engineNode;
+    if (engineNode === undefined) return;
+    const current = lastNativeText ?? '';
+    dispatchViewCommand(engineNode, 'setTextAndSelection', [
+      mostRecentEventCount,
+      current,
+      start,
+      end,
+    ]);
+  }
+
+  const descriptor = $derived(
+    renderTextInput({
+      multiline: isMultiline,
+      text,
+      mostRecentEventCount,
+      selection: rest.selection,
+      folded,
+      passthrough: {
+        ...forwardProps(rest),
+        onChange: handleChange,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+      },
+    }),
+  );
+
+  // renderTextInput()'s Descriptor has zero children (the whole surface is the `text`/
+  // `mostRecentEventCount` prop handshake) — wired anyway for the same uniform-shape reason
+  // Switch is, see its header comment.
+  const syncChildren = createDescriptorChildrenSync();
+  $effect(() => {
+    syncChildren(hostShim, descriptor.children);
+  });
+
+  // See View.svelte's note on `{@attach}`. `rest` (not `value`, which never carries a symbol
+  // key) is the same attachment-bearing bag `rawProps` used to be.
+  const syncAttachments = createAttachmentsSync();
+  $effect(() => {
+    syncAttachments(hostShim, rest);
+  });
+</script>
+
+{#if isMultiline}
+  <symbiote-text-input-multiline p={descriptor.props} bind:this={hostShim} />
+{:else}
+  <symbiote-text-input p={descriptor.props} bind:this={hostShim} />
+{/if}

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

@@ -0,0 +1,12 @@
+import type { ITextInputProps } from './text-input-props';
+export type { ITextInputProps };
+export type { ITextInputHandle } from '@symbiote-native/components';
+declare const Index: import("svelte").Component<ITextInputProps, {
+    focus: () => void;
+    blur: () => void;
+    clear: () => void;
+    isFocused: () => boolean;
+    setSelection: (start: number, end: number) => void;
+}, "value">;
+type Index = ReturnType<typeof Index>;
+export default Index;

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

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

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

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

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

@@ -0,0 +1,23 @@
+import type { Snippet } from 'svelte';
+import type { ISymbioteEvent, IStyleProp, ITextStyle } from '@symbiote-native/engine';
+import type { IAccessibilityProps, IAriaProps } from '@symbiote-native/components';
+import type { ISvelteClassValue } from '../class-value';
+export interface ITextProps extends IAccessibilityProps, IAriaProps {
+    style?: IStyleProp<ITextStyle>;
+    class?: ISvelteClassValue;
+    onPress?: (event: ISymbioteEvent) => void;
+    onLongPress?: (event: ISymbioteEvent) => void;
+    onPressIn?: (event: ISymbioteEvent) => void;
+    onPressOut?: (event: ISymbioteEvent) => void;
+    onLayout?: (event: ISymbioteEvent) => void;
+    onTextLayout?: (event: ISymbioteEvent) => void;
+    numberOfLines?: number;
+    ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
+    selectable?: boolean;
+    adjustsFontSizeToFit?: boolean;
+    minimumFontScale?: number;
+    allowFontScaling?: boolean;
+    maxFontSizeMultiplier?: number | null;
+    selectionColor?: string;
+    children?: Snippet;
+}

package/build/components/text-props.js

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

package/build/components/touchable-base-props.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { IStyleProp, IViewStyle } from '@symbiote-native/engine';
+import type { IPressTimingProps } from '@symbiote-native/components';
+import type { IPressableProps } from './pressable/pressable-props';
+import type { ISvelteClassValue } from '../class-value';
+export type ITouchableBaseProps = Omit<IPressableProps, 'style' | 'class' | 'children'> & IPressTimingProps & {
+    style?: IStyleProp<IViewStyle>;
+    class?: ISvelteClassValue;
+    children?: Snippet;
+};

package/build/components/touchable-base-props.js

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

package/build/components/touchable-highlight/index.svelte

@@ -0,0 +1,39 @@
+<script lang="ts" module>
+  // TouchableHighlight: built on Pressable. RN drives the underlay with setState (not Animated —
+  // TouchableHighlight.js), so unlike TouchableOpacity this needs no tween: `highlightPressedStyle`
+  // (@symbiote-native/components/view/render-touchable-highlight) is a pure function of the live
+  // `pressed` flag, fed through Pressable's own style-as-function-of-state prop — the same
+  // mechanism React's `pressedStyle` callback and Vue's style-as-function attr use.
+  import type { ITouchableHighlightProps } from './touchable-highlight-props';
+
+  export type { ITouchableHighlightProps };
+</script>
+
+<script lang="ts">
+  import {
+    highlightPressedStyle,
+    DEFAULT_HIGHLIGHT_CHILD_OPACITY,
+    DEFAULT_UNDERLAY_COLOR,
+    type IPressState,
+  } from '@symbiote-native/components';
+  import type { IStyleProp, IViewStyle } from '@symbiote-native/engine';
+  import Pressable from '../pressable/index.svelte';
+
+  let {
+    activeOpacity = DEFAULT_HIGHLIGHT_CHILD_OPACITY,
+    underlayColor = DEFAULT_UNDERLAY_COLOR,
+    style,
+    children: content,
+    ...rest
+  }: ITouchableHighlightProps = $props();
+
+  function pressedStyle({ pressed }: IPressState): IStyleProp<IViewStyle> {
+    return highlightPressedStyle(pressed, style, underlayColor, activeOpacity);
+  }
+</script>
+
+<Pressable {...rest} style={pressedStyle}>
+  {#snippet children()}
+    {@render content?.()}
+  {/snippet}
+</Pressable>

package/build/components/touchable-highlight/index.svelte.d.ts

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

package/build/components/touchable-highlight/touchable-highlight-props.d.ts

@@ -0,0 +1,5 @@
+import type { ITouchableBaseProps } from '../touchable-base-props';
+export interface ITouchableHighlightProps extends ITouchableBaseProps {
+    activeOpacity?: number;
+    underlayColor?: string;
+}

package/build/components/touchable-highlight/touchable-highlight-props.js

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

package/build/components/touchable-native-feedback/index.d.ts

@@ -0,0 +1,9 @@
+import { canUseNativeForeground, rippleBackground, selectableBackground, selectableBackgroundBorderless } from '@symbiote-native/components';
+export type { ITouchableNativeFeedbackProps } from './touchable-native-feedback-props';
+export type { INativeFeedbackBackground, IThemeAttrBackground, IRippleBackground, } from '@symbiote-native/components';
+export declare const TouchableNativeFeedback: import("svelte").Component<import("./touchable-native-feedback-props").ITouchableNativeFeedbackProps, {}, ""> & {
+    SelectableBackground: typeof selectableBackground;
+    SelectableBackgroundBorderless: typeof selectableBackgroundBorderless;
+    Ripple: typeof rippleBackground;
+    canUseNativeForeground: typeof canUseNativeForeground;
+};

package/build/components/touchable-native-feedback/index.js

@@ -0,0 +1,14 @@
+// TouchableNativeFeedback's static factories (SelectableBackground/SelectableBackgroundBorderless/
+// Ripple/canUseNativeForeground) mirror RN's own API surface and must live ON the component
+// value — callers reach `TouchableNativeFeedback.Ripple(...)`, exactly like React's
+// `Object.assign(TouchableNativeFeedbackImpl, {...})` and Vue's identical pattern. A `.svelte`
+// file's own `<script module>` block cannot reassign or wrap its own compiled default export, so
+// the statics are attached here, one level up, over the imported component.
+import { canUseNativeForeground, rippleBackground, selectableBackground, selectableBackgroundBorderless, } from '@symbiote-native/components';
+import TouchableNativeFeedbackImpl from './touchable-native-feedback.svelte';
+export const TouchableNativeFeedback = Object.assign(TouchableNativeFeedbackImpl, {
+    SelectableBackground: selectableBackground,
+    SelectableBackgroundBorderless: selectableBackgroundBorderless,
+    Ripple: rippleBackground,
+    canUseNativeForeground,
+});

package/build/components/touchable-native-feedback/touchable-native-feedback-props.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { INativeFeedbackBackground } from '@symbiote-native/components';
+import type { IPressableProps } from '../pressable/pressable-props';
+export type ITouchableNativeFeedbackProps = Omit<IPressableProps, 'style' | 'children'> & {
+    background?: INativeFeedbackBackground;
+    useForeground?: boolean;
+    children?: Snippet;
+};

package/build/components/touchable-native-feedback/touchable-native-feedback-props.js

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

package/build/components/touchable-native-feedback/touchable-native-feedback.svelte

@@ -0,0 +1,44 @@
+<script lang="ts" module>
+  // TouchableNativeFeedback: Android's ripple/state-drawable touchable, built on Pressable like
+  // the rest of the family. The native ripple props (nativeBackgroundAndroid /
+  // nativeForegroundAndroid) ride a dedicated feedback View nested under the Pressable; on iOS
+  // they are inert. The static factories + background mapping are shared in
+  // @symbiote-native/components/view — this component only attaches them onto the component
+  // value (see this folder's index.ts, which Object.assigns them — a `.svelte` file's own
+  // `<script module>` cannot reassign or wrap its own compiled default export) and nests the
+  // feedback View.
+  import type { ITouchableNativeFeedbackProps } from './touchable-native-feedback-props';
+
+  export type { ITouchableNativeFeedbackProps };
+</script>
+
+<script lang="ts">
+  import { backgroundProps, selectableBackground } from '@symbiote-native/components';
+  import { dlog } from '@symbiote-native/engine';
+  import Pressable from '../pressable/index.svelte';
+
+  let {
+    background,
+    useForeground = false,
+    children: content,
+    ...rest
+  }: ITouchableNativeFeedbackProps = $props();
+
+  // RN defaults a missing background to SelectableBackground() so the touchable always shows
+  // feedback; mirror that here.
+  const resolved = $derived(background ?? selectableBackground());
+
+  $effect(() => {
+    dlog(`TouchableNativeFeedback render ${resolved.type} useForeground ${useForeground}`);
+  });
+
+  const nativeProps = $derived(backgroundProps(resolved, useForeground));
+</script>
+
+<Pressable {...rest}>
+  {#snippet children()}
+    <symbiote-view p={nativeProps}>
+      {@render content?.()}
+    </symbiote-view>
+  {/snippet}
+</Pressable>

package/build/components/touchable-native-feedback/touchable-native-feedback.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { ITouchableNativeFeedbackProps } from './touchable-native-feedback-props';
+export type { ITouchableNativeFeedbackProps };
+declare const TouchableNativeFeedback: import("svelte").Component<ITouchableNativeFeedbackProps, {}, "">;
+type TouchableNativeFeedback = ReturnType<typeof TouchableNativeFeedback>;
+export default TouchableNativeFeedback;

package/build/components/touchable-opacity/index.svelte

@@ -0,0 +1,124 @@
+<script lang="ts" module>
+  // TouchableOpacity: built on Pressable, like the rest of the family. RN realizes its feedback
+  // with Animated (an opacity fade to activeOpacity on press-in, back to 1 on press-out); the
+  // press-timing constants and the deactivation-floor math are shared with every adapter
+  // (@symbiote-native/components/state/touchable). No `Animated.View` binding exists yet for
+  // this adapter — core/engine/src/animated is the framework-agnostic value-graph plumbing, but
+  // React and Vue each wrote their OWN reactive binding on top of it
+  // (adapters/react/src/modules/animated, adapters/vue/src/modules/animated); porting that
+  // binding to Svelte runes is separate, standalone work, out of scope for this Pressable/
+  // Touchable/Button pass. `tweenOpacity` below is a deliberate, documented stand-in: it
+  // reproduces Animated.timing's quad-inOut curve over the SAME shared duration constants
+  // directly onto the style bag via `$state`, using `setTimeout` (not `requestAnimationFrame`,
+  // which this adapter must never patch globally per the dom-shim skill §6c, and which a bare
+  // headless test sandbox does not provide) so TouchableOpacity still visibly fades. It is not
+  // wired into the native Animated node graph — `useNativeDriver`-style native-thread driving is
+  // NOT available here until a real Animated adapter binding lands.
+  import type { ITouchableOpacityProps } from './touchable-opacity-props';
+
+  export type { ITouchableOpacityProps };
+</script>
+
+<script lang="ts">
+  import {
+    createTouchableFeedbackHandlers,
+    createTouchableFeedbackRuntime,
+    DEFAULT_ACTIVE_OPACITY,
+    DEFAULT_MIN_PRESS_DURATION_MS,
+    OPACITY_ACTIVE_DURATION_MS,
+    OPACITY_INACTIVE_DURATION_MS,
+    RESTING_OPACITY,
+  } from '@symbiote-native/components';
+  import type { ISymbioteEvent } from '@symbiote-native/engine';
+  import Pressable from '../pressable/index.svelte';
+
+  const TWEEN_FRAME_MS = 16;
+
+  // See the module header above: the interim substitute for a real Animated.View driver.
+  function tweenOpacity(
+    from: number,
+    to: number,
+    durationMs: number,
+    onFrame: (value: number) => void,
+  ): () => void {
+    const start = Date.now();
+    let cancelled = false;
+    function step(): void {
+      if (cancelled) return;
+      const t = Math.min(1, (Date.now() - start) / durationMs);
+      const eased = t < 0.5 ? 2 * t * t : 1 - (-2 * t + 2) ** 2 / 2;
+      onFrame(from + (to - from) * eased);
+      if (t < 1) setTimeout(step, TWEEN_FRAME_MS);
+    }
+    step();
+    return () => {
+      cancelled = true;
+    };
+  }
+
+  function scheduleTimeout(callback: () => void, ms: number): () => void {
+    const id = setTimeout(callback, ms);
+    return () => clearTimeout(id);
+  }
+
+  let {
+    activeOpacity = DEFAULT_ACTIVE_OPACITY,
+    style,
+    class: className,
+    children: content,
+    onPressIn,
+    onPressOut,
+    delayPressIn = 0,
+    delayPressOut = 0,
+    minPressDuration = DEFAULT_MIN_PRESS_DURATION_MS,
+    ...rest
+  }: ITouchableOpacityProps = $props();
+
+  let opacity = $state(RESTING_OPACITY);
+  let cancelTween: (() => void) | undefined;
+  // Setup-scope only, mutated by the machine — same as Pressable's own runtime, never `$state`.
+  const runtime = createTouchableFeedbackRuntime();
+
+  function setOpacityTo(toValue: number, duration: number): void {
+    cancelTween?.();
+    const from = opacity;
+    cancelTween = tweenOpacity(from, toValue, duration, value => {
+      opacity = value;
+    });
+  }
+
+  // Rebuilt whenever the timing config changes (mirrors Vue's per-render rebuild); the runtime
+  // persists across rebuilds so an in-flight delayPressIn timer / activation clock survives.
+  const handlers = $derived(
+    createTouchableFeedbackHandlers(
+      {
+        delayPressIn,
+        delayPressOut,
+        minPressDuration,
+        schedule: scheduleTimeout,
+        now: Date.now,
+      },
+      runtime,
+      {
+        activate(event: ISymbioteEvent): void {
+          setOpacityTo(activeOpacity, OPACITY_ACTIVE_DURATION_MS);
+          onPressIn?.(event);
+        },
+        deactivate(event: ISymbioteEvent): void {
+          setOpacityTo(RESTING_OPACITY, OPACITY_INACTIVE_DURATION_MS);
+          onPressOut?.(event);
+        },
+      },
+    ),
+  );
+
+  const foldedStyle = $derived([style, { opacity }]);
+</script>
+
+<Pressable {...rest} onPressIn={handlers.handlePressIn} onPressOut={handlers.handlePressOut}>
+  {#snippet children()}
+    <symbiote-view p={{ style: foldedStyle, class: className }}>
+      {@render content?.()}
+    </symbiote-view>
+  {/snippet}
+</Pressable>

package/build/components/touchable-opacity/index.svelte.d.ts

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

package/build/components/touchable-opacity/touchable-opacity-props.d.ts

@@ -0,0 +1,5 @@
+import type { ITouchableBaseProps } from '../touchable-base-props';
+export type { ITouchableBaseProps };
+export interface ITouchableOpacityProps extends ITouchableBaseProps {
+    activeOpacity?: number;
+}

package/build/components/touchable-opacity/touchable-opacity-props.js

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