@symbiote-native/svelte 0.3.0 → 2.0.0

package/build/index.js

@@ -9,9 +9,18 @@
 // `descriptorToSvelte` bridge was ever needed — each component below is hand-authored Svelte
 // markup mirroring its render-*.ts, reusing only the pure state/render logic. See skill §17/§18
 // for the one open async-exception repro and the honest cross-cutting gap list.
+// Bare side-effect import, deliberately NOT a re-export and deliberately not beside one of the
+// same specifier: it registers the press behavior with the engine's host-behavior registry. Any
+// other shape is dropped by Metro's inlineRequires in a release build — see register.ts.
+import './register.js';
 export { mount, unmount } from './render.js';
 export { AppRegistry, setHostRegistrar } from './modules/app-registry/index.js';
-export { View, Text, ActivityIndicator, Image, ImageBackground, InputAccessoryView, KeyboardAvoidingView, Switch, TextInput, Modal, SafeAreaView, RefreshControl, Pressable, TouchableOpacity, TouchableHighlight, TouchableWithoutFeedback, TouchableNativeFeedback, Button, ScrollView, ScrollViewStickyHeader, VirtualizedList, FlatList, VirtualizedSectionList, SectionList, } from './components/index.js';
+// Nine names are deliberately absent and there is nothing to import in their place: `view`, `text`,
+// `safe-area-view`, `pressable`, `text-input`, `switch`, `image`, `input-accessory-view` and
+// `activity-indicator` are INTRINSIC TAGS an app writes directly. What survives of `Image` and
+// `TouchableNativeFeedback` is a STATICS namespace each, exported with the other imperative
+// namespaces below. See ./components/index.ts for where each deleted wrapper's body went.
+export { KeyboardAvoidingView, Modal, VirtualizedList, FlatList, VirtualizedSectionList, SectionList, } from './components/index.js';
 // Component-scoped agnostic types that live in @symbiote-native/components but weren't yet
 // threaded through this barrel (parity fix, see React's index.ts lines 55-58, 89, 245-250).
 export { setImageSourceResolver } from '@symbiote-native/components';
@@ -20,6 +29,13 @@ export { setImageSourceResolver } from '@symbiote-native/components';
 // React/Vue's own barrels) until 2026-08-12 — a pure engine re-export, no framework glue, so
 // adding it is a one-line parity fix, not new adapter work.
 export { Platform, StyleSheet, PlatformColor, DynamicColorIOS, processColor, setNativeViewConfigSource, setColorProcessor, setDeviceEventSource, PixelRatio, PanResponder, dlog, isDebug, } from '@symbiote-native/engine';
+// The two namespaces left behind by primitives that became tags, here rather than in the component
+// block above for one reason: they carry no view. `Image` gets an adapter file only because it
+// renames the shared `imageStatics`; TNF's four are pure dict producers and come straight from the
+// shared package. RN points NEW code at `<pressable p={{ android_ripple: {…} }}>`, but they are not
+// redundant — the `touchable-native-feedback` tag folds `background`, and nothing else builds it.
+export { Image } from './modules/image/index.js';
+export { TouchableNativeFeedback } from '@symbiote-native/components';
 // Imperative runtime modules: the SAME module every adapter shares, re-exported straight from
 // @symbiote-native/engine so app code names only @symbiote-native/svelte (RN's single import
 // root). Nothing here has a visual or a lifecycle, so there is no Svelte half to write.
@@ -76,7 +92,7 @@ export { orientation, createWidthQuery } from './runes/media-query.js';
 // IClassNameValue — plus the normalizer, for a consumer building a class value in its own
 // helper. See class-value.ts's header for the object-is-a-style vs object-is-a-clsx-map rule.
 export { normalizeSvelteClass, resolveSvelteClass, } from './class-value.js';
-// Animated: the Svelte twin of adapters/vue/src/modules/animated. All six RN animated components
-// ship (View/Text/Image/ScrollView/FlatList/SectionList), all of them from the same generic
-// createAnimatedComponent() wrap React, Vue and Solid also export.
-export { Animated, createAnimatedComponent } from './modules/animated/index.js';
+// Animated: the drivers, plus FlatList/SectionList as ALIASES of the plain components. There is no
+// `createAnimatedComponent` — the engine resolves an AnimatedNode in any prop of any host node, so
+// nothing needs wrapping (modules/animated/index.ts).
+export { Animated } from './modules/animated/index.js';

package/build/intrinsic-elements.d.ts

@@ -0,0 +1,63 @@
+import type { ISymbioteIntrinsic, ICrossTypedIntrinsics } from '@symbiote-native/components';
+import type { IShimPropBag } from './dom-shim/element';
+import type { IViewProps } from './components/view-props';
+import type { ITextProps } from './components/text-props';
+import type { IImageProps } from './components/image/image-props';
+import type { IImageBackgroundProps } from './components/image-background-props';
+import type { IPressableProps } from './components/pressable/pressable-props';
+import type { IButtonProps } from './components/button-props';
+import type { IActivityIndicatorProps } from './components/activity-indicator-props';
+import type { ISafeAreaViewProps } from './components/safe-area-view-props';
+import type { IRefreshControlProps } from './components/refresh-control-props';
+import type { ITouchableOpacityProps } from './components/touchable-opacity/touchable-opacity-props';
+import type { ITouchableWithoutFeedbackProps } from './components/touchable-without-feedback/touchable-without-feedback-props';
+import type { ITouchableHighlightProps } from './components/touchable-highlight/touchable-highlight-props';
+import type { ITouchableNativeFeedbackProps } from './components/touchable-native-feedback/touchable-native-feedback-props';
+import type { IScrollViewProps } from './components/scroll-view/scroll-view-props';
+import type { ISwitchProps } from './components/switch/switch-props';
+import type { ITextInputProps } from './components/text-input/text-input-props';
+import type { IModalProps } from './components/modal/modal-props';
+import type { IInputAccessoryViewProps } from './components/input-accessory-view/input-accessory-view-props';
+export interface ISymbioteHostAttributes {
+    p?: IShimPropBag;
+    [attribute: string]: unknown;
+}
+export interface ICrossedPrimitiveProps {
+    view: IViewProps;
+    text: ITextProps;
+    pressable: IPressableProps;
+    button: IButtonProps;
+    image: IImageProps;
+    'image-background': IImageBackgroundProps;
+    'input-accessory-view': IInputAccessoryViewProps;
+    'refresh-control': IRefreshControlProps;
+    'safe-area-view': ISafeAreaViewProps;
+    'touchable-native-feedback': ITouchableNativeFeedbackProps;
+    'touchable-opacity': ITouchableOpacityProps;
+    'touchable-highlight': ITouchableHighlightProps;
+    'touchable-without-feedback': ITouchableWithoutFeedbackProps;
+    'scroll-view': IScrollViewProps;
+    switch: ISwitchProps;
+    'text-input': ITextInputProps;
+    modal: IModalProps;
+    'activity-indicator': IActivityIndicatorProps;
+}
+type IWithSvelteAttributeRealities<Props> = Partial<Props> & {
+    p?: IShimPropBag;
+} & {
+    [K in keyof Props as K extends string ? Lowercase<K> : never]?: Props[K];
+};
+declare global {
+    namespace svelteHTML {
+        interface IntrinsicElements extends ICrossTypedIntrinsics<ISymbioteHostAttributes, {
+            [K in keyof ICrossedPrimitiveProps]: IWithSvelteAttributeRealities<ICrossedPrimitiveProps[K]>;
+        }> {
+        }
+        interface SVGAttributes extends ISymbioteHostAttributes {
+        }
+        interface HTMLAttributes extends ISymbioteHostAttributes {
+        }
+    }
+}
+export type ISymbioteIntrinsicTag = ISymbioteIntrinsic;
+export {};

package/build/modules/animated/index.d.ts

@@ -1,7 +1,5 @@
 import { AnimatedValue, AnimatedValueXY, AnimatedColor, timing, spring, decay, parallel, sequence, stagger, loop, delay, add, subtract, multiply, divide, modulo, diffClamp, event, forkEvent, unforkEvent } from '@symbiote-native/engine';
-export { createAnimatedComponent } from './create-animated-component';
-export type { IAnimatedComponentProps } from './animated-component-props';
-export declare const Animated: {
+declare const drivers: {
     Value: typeof AnimatedValue;
     ValueXY: typeof AnimatedValueXY;
     Color: typeof AnimatedColor;
@@ -41,28 +39,10 @@ export declare const Animated: {
     event: typeof event;
     forkEvent: typeof forkEvent;
     unforkEvent: typeof unforkEvent;
-    View: import("svelte").Component<import("./animated-component-props").IAnimatedComponentProps, {
-        $on?(type: string, callback: (e: any) => void): () => void;
-        $set?(props: Partial<Record<string, any>>): void;
-    } & Record<string, any>, string>;
-    Text: import("svelte").Component<import("./animated-component-props").IAnimatedComponentProps, {
-        $on?(type: string, callback: (e: any) => void): () => void;
-        $set?(props: Partial<Record<string, any>>): void;
-    } & Record<string, any>, string>;
-    Image: import("svelte").Component<import("./animated-component-props").IAnimatedComponentProps, {
-        $on?(type: string, callback: (e: any) => void): () => void;
-        $set?(props: Partial<Record<string, any>>): void;
-    } & Record<string, any>, string>;
-    ScrollView: import("svelte").Component<import("./animated-component-props").IAnimatedComponentProps, {
-        $on?(type: string, callback: (e: any) => void): () => void;
-        $set?(props: Partial<Record<string, any>>): void;
-    } & Record<string, any>, string>;
-    FlatList: import("svelte").Component<import("./animated-component-props").IAnimatedComponentProps, {
-        $on?(type: string, callback: (e: any) => void): () => void;
-        $set?(props: Partial<Record<string, any>>): void;
-    } & Record<string, any>, string>;
-    SectionList: import("svelte").Component<import("./animated-component-props").IAnimatedComponentProps, {
-        $on?(type: string, callback: (e: any) => void): () => void;
-        $set?(props: Partial<Record<string, any>>): void;
-    } & Record<string, any>, string>;
 };
+interface IAnimatedNamespace {
+    FlatList: typeof import('../../components/flat-list/index.svelte').default;
+    SectionList: typeof import('../../components/section-list/index.svelte').default;
+}
+export declare const Animated: IAnimatedNamespace & typeof drivers;
+export {};

package/build/modules/animated/index.js

@@ -1,29 +1,27 @@
-// The Animated namespace for @symbiote-native/svelte: the Svelte twin of
-// adapters/vue/src/modules/animated/index.ts (the primary reference — Svelte 5's runes are much
-// closer to Vue's reactivity model than to React's hooks). The value graph, easing,
-// interpolation and drivers come from @symbiote-native/engine (framework-agnostic, JS-driven),
-// spread in verbatim.
+// The Animated namespace for @symbiote-native/svelte. The value graph, easing, interpolation and
+// drivers come from @symbiote-native/engine (framework-agnostic, JS-driven), spread in verbatim.
 //
-// All six components come from ONE generic `createAnimatedComponent(Base)` — the same shape
-// React, Vue and Solid have — applied to the ordinary components. There is no hand-authored
-// `.svelte` file per animated component any more: an earlier revision of this header claimed a
-// generic wrap was impossible on Svelte, and that was simply wrong. See
-// create-animated-component.ts for how the wrap reaches the host node behind a base that exports
-// an imperative handle (ScrollView/FlatList/SectionList) versus one that exports nothing
-// (View/Text/Image), and for why it is plain TS rather than a parametrized `.svelte` file.
+// There is no `Animated.View` / `Animated.Text` / `Animated.Image` any more, and nothing replaced
+// them: `<view style={{ opacity: someAnimatedValue }}>` is the whole API. The engine resolves an
+// AnimatedNode written into any prop of any host node (`core/engine/src/animated/host-binding.ts`):
+// it publishes the current value, subscribes the leaf, writes each frame through its own targeted
+// setNativeProps commit, and releases at the commit sweep. `createAnimatedComponent` brokered
+// between the value graph and the node's Fabric tag, and both of those were already engine-side.
 //
-// A consumer animating their OWN component wraps it the same way: `createAnimatedComponent(Mine)`
-// works as long as Mine either exports `getScrollNode()` or forwards `{@attach}` onto its host
-// tag, which every component in this adapter does.
+// Those three were aliases of the wrappers, and the wrappers are gone — a primitive is a tag now,
+// which is not a value `<Animated.X>` can call. `Animated.ScrollView` left the same way on
+// 2026-09-10: `bindAnimatedEvent` (node.ts, from `setEventListener`) attaches a native-driven event
+// on ANY host node, which was the one job a scroll wrapper still looked like it had. The whole API
+// is `<scroll-view style={{ opacity: v }} p={{ onScroll: Animated.event(…) }}>`.
+//
+// The two below REMAIN because the LIST family is tier 3: a render prop decides their output shape
+// in JS, so there is no tag for `<Animated.X>` to be an alias of.
+//
+// A consumer animating their OWN component wraps nothing either: any component that forwards
+// `style` down to a Symbiote primitive accepts an AnimatedNode by construction.
 import { AnimatedValue, AnimatedValueXY, AnimatedColor, AnimatedMock, Easing, Platform, timing, spring, decay, parallel, sequence, stagger, loop, delay, add, subtract, multiply, divide, modulo, diffClamp, event, forkEvent, unforkEvent, } from '@symbiote-native/engine';
-import View from '../../components/View.svelte';
-import Text from '../../components/Text.svelte';
-import Image from '../../components/image/index.svelte';
-import ScrollView from '../../components/scroll-view/index.svelte';
 import FlatList from '../../components/flat-list/index.svelte';
 import SectionList from '../../components/section-list/index.svelte';
-import { createAnimatedComponent } from './create-animated-component.js';
-export { createAnimatedComponent } from './create-animated-component.js';
 // The live, JS-driven driver namespace (real frames). RN's AnimatedImplementation.
 const liveDrivers = {
     Value: AnimatedValue,
@@ -50,20 +48,12 @@ const liveDrivers = {
 };
 // RN swaps the WHOLE driver namespace for the mock when the host reports isDisableAnimations
 // (reduced motion / test env): the mock keeps the same surface but jumps each animation to its
-// final value synchronously, no frames. The animated COMPONENTS (View/Text/Image/ScrollView/
-// FlatList/SectionList) are live in both branches; only the drivers/value/operators/events half
-// is swapped, exactly like
-// RN spreading `...Animated` (impl or mock) over the same component references.
+// final value synchronously, no frames. Only this half is swapped — the component names below are
+// the same references either way, exactly like RN spreading `...Animated` (impl or mock) over one
+// set of components.
 const drivers = Platform.isDisableAnimations ? AnimatedMock : liveDrivers;
-// Wrapped eagerly, unlike Vue's lazy getters: nothing in the scroll/list chain imports THIS
-// module back (sticky-header builds its own Animated.View straight from the wrap), so there is
-// no half-evaluated cycle to dodge.
 export const Animated = {
-    View: createAnimatedComponent(View),
-    Text: createAnimatedComponent(Text),
-    Image: createAnimatedComponent(Image),
-    ScrollView: createAnimatedComponent(ScrollView),
-    FlatList: createAnimatedComponent(FlatList),
-    SectionList: createAnimatedComponent(SectionList),
+    FlatList,
+    SectionList,
     ...drivers,
 };

package/build/modules/image/index.d.ts

@@ -0,0 +1,3 @@
+import { type IImageStatics } from '@symbiote-native/components';
+export type { IImageStatics };
+export declare const Image: IImageStatics;

package/build/modules/image/index.js

@@ -0,0 +1,15 @@
+// RN's Image STATICS — `getSize`, `prefetch`, `queryCache`, `abortPrefetch`, `resolveAssetSource`.
+//
+// IN `modules/`, NOT `components/`. The primitive is the `<image>` tag and its fold runs in the
+// engine (`behaviors/image.ts`); what is left under the name `Image` is an imperative API with no
+// view, which is what this bucket is for — `<adapter_src_follows_framework_idioms>` names it.
+// Sitting in `components/` was what made a statics object read as a component.
+//
+// A NAMESPACE OBJECT rather than five bare functions, deliberately. `Alert`, `Share`, `Linking`,
+// `Vibration` and `AppState` are all `export const X = {…}`, an app porting from RN writes
+// `Image.getSize(...)` verbatim (P0, `<adapters_reach_full_feature_parity>`), and the bundle-size
+// argument for splitting them is void: Metro does no tree shaking (facebook/metro#227).
+//
+// Shared verbatim via `imageStatics`, the same source React's and Vue's Image use.
+import { imageStatics } from '@symbiote-native/components';
+export const Image = imageStatics;

package/build/preprocessor/scoped-styles.js

@@ -5,7 +5,7 @@
 // (`generate:'client', fragments:'tree', css:'external'`), a `<style>` block behaves one of two
 // ways:
 //
-//   <symbiote-view class="card">   ->  result.css: `.card.svelte-4psua6 { … }`
+//   <view class="card">   ->  result.css: `.card.svelte-4psua6 { … }`
 //                                      result.js:  `$.set_class(node, 1, 'card svelte-4psua6')`
 //   <View class="card">            ->  warning: css_unused_selector
 //                                      result.css: `/* (unused) .card { … }*/`

package/build/register.d.ts

@@ -0,0 +1 @@
+import '@symbiote-native/components/register';

package/build/register.js

@@ -0,0 +1,15 @@
+// Side-effect ONLY. Exports nothing, and must never be re-exported from the barrel.
+//
+// The fourteen calls live once, in `@symbiote-native/components/register` — they were identical in
+// all five adapters, and each copy carried a migration ledger justifying a call against a wrapper
+// that no longer exists. What is per-adapter is only the SPELLING of the import below: every
+// `*-tag.test.*` here reaches the registry through `import './register';`, and this adapter's own
+// barrel guard pins that line.
+//
+// WHY A SIDE-EFFECT SUBPATH AND NOT A BARREL EXPORT. Metro turns on `inlineRequires` for PRODUCTION
+// only: it moves a `require` down to the first place its binding is used as a VALUE, and
+// `export { X } from './x'` compiles to a lazy getter. A registration reached that way never
+// evaluates in a Release build — invisible to tsc, to vitest, and to grepping the bundle. A bare
+// `import` placed NEXT TO a re-export of the same specifier does not help either: Babel merges the
+// two into one dependency and the merged dependency stays lazy.
+import '@symbiote-native/components/register';

package/build/root-element.js

@@ -9,7 +9,7 @@
 // normally an ancestor's `insertOne` does that. For the root there is no ancestor shim node;
 // the surface plays that role, so this file makes the one `surface.appendChild` call directly.
 import { ShimElement } from './dom-shim/index.js';
-const ROOT_INTRINSIC = 'symbiote-view';
+const ROOT_INTRINSIC = 'view';
 // Unlike Vue/React, whose app root mounts directly onto the surface (its own flex:1
 // class/style reaches the engine's synthetic flex:1 AppContainer with nothing in between),
 // Svelte's compiled output needs a real DOM-like `target` to call appendChild on — this

package/metro-css-parser.cjs

@@ -6,4 +6,5 @@
 // already handles standalone style files itself (its isStyleFile branch), so this subpath exists
 // only for parity with the other adapters and for a future consumer that wants CSS-only handling
 // without the .svelte transform (e.g. importing a plain .css from non-.svelte source).
-module.exports = require('@symbiote-native/css-parser').createCssMetroTransformer();
+module.exports =
+  require('@symbiote-native/css-parser').createCssMetroTransformer();

package/metro-svelte-transformer.cjs

@@ -35,7 +35,11 @@ const upstreamTransformer = resolveUpstreamTransformer();
 // svelte-check, the language server, Vite), while this file is `require()`d by Metro directly
 // and must stay pure CommonJS with no build step of its own, exactly like
 // metro-vue-transformer.cjs.
-const COMPILER_OPTIONS = { fragments: 'tree', css: 'external', generate: 'client' };
+const COMPILER_OPTIONS = {
+  fragments: 'tree',
+  css: 'external',
+  generate: 'client',
+};
 
 // The web-only-construct guard (svelte-adapter-dom-shim skill §7/§22) RUNS HERE, on every
 // `.svelte` Metro compiles — not just via svelte-check/the language server. `{@html}` compiles
@@ -50,8 +54,8 @@ const COMPILER_OPTIONS = { fragments: 'tree', css: 'external', generate: 'client
 // `require()` cannot pull an ESM/TS module, but `transform` is already async.
 let preprocessorPromise;
 function webOnlyConstructGuard() {
-  preprocessorPromise ??= import('@symbiote-native/svelte/preprocessor').then(mod =>
-    mod.forbidWebOnlyConstructs(),
+  preprocessorPromise ??= import('@symbiote-native/svelte/preprocessor').then(
+    mod => mod.forbidWebOnlyConstructs(),
   );
   return preprocessorPromise;
 }
@@ -63,8 +67,8 @@ function webOnlyConstructGuard() {
 // src/preprocessor/scoped-styles.ts for why Svelte's own `result.css` cannot be used instead.
 let scopedStylesPromise;
 function scopedStylesPreprocessor() {
-  scopedStylesPromise ??= import('@symbiote-native/svelte/scoped-styles').then(mod =>
-    mod.scopedStyles(),
+  scopedStylesPromise ??= import('@symbiote-native/svelte/scoped-styles').then(
+    mod => mod.scopedStyles(),
   );
   return scopedStylesPromise;
 }
@@ -75,11 +79,13 @@ function scopedStylesPreprocessor() {
 // renders as a forced line break on device. Loaded lazily for the same reason as the two above.
 let collapseTextWhitespacePromise;
 function collapseTextWhitespacePreprocessor() {
-  collapseTextWhitespacePromise ??= import('@symbiote-native/svelte/collapse-text-whitespace').then(
-    mod => mod.collapseTextWhitespace(),
-  );
+  collapseTextWhitespacePromise ??=
+    import('@symbiote-native/svelte/collapse-text-whitespace').then(mod =>
+      mod.collapseTextWhitespace(),
+    );
   return collapseTextWhitespacePromise;
 }
+
 //
 // Svelte 5's compiler strips <script lang="ts"> types structurally, with no external type
 // resolution needed (unlike @vue/compiler-sfc's compileScript, which needs registerTS + a real
@@ -108,13 +114,19 @@ function compileSvelteFile(src, filename) {
 function stripTypeScript(src, filename) {
   const { outputText } = ts.transpileModule(src, {
     fileName: filename,
-    compilerOptions: { module: ts.ModuleKind.ESNext, target: ts.ScriptTarget.ESNext },
+    compilerOptions: {
+      module: ts.ModuleKind.ESNext,
+      target: ts.ScriptTarget.ESNext,
+    },
   });
   return outputText;
 }
 
 function compileSvelteModuleFile(src, filename) {
-  const { js } = compileModule(stripTypeScript(src, filename), { generate: 'client', filename });
+  const { js } = compileModule(stripTypeScript(src, filename), {
+    generate: 'client',
+    filename,
+  });
   return js.code;
 }
 
@@ -127,7 +139,10 @@ module.exports.transform = async function transform(params) {
   if (params.filename.endsWith('.svelte')) {
     // Throws with a message naming the RN alternative. Deliberately BEFORE compile(), so the
     // author sees the real diagnosis rather than a downstream symptom.
-    (await webOnlyConstructGuard()).markup({ content: params.src, filename: params.filename });
+    (await webOnlyConstructGuard()).markup({
+      content: params.src,
+      filename: params.filename,
+    });
     const stylePreprocessed = await (
       await scopedStylesPreprocessor()
     ).markup({ content: params.src, filename: params.filename });
@@ -143,7 +158,10 @@ module.exports.transform = async function transform(params) {
       filename: params.filename + '.tsx',
     });
   }
-  if (params.filename.endsWith('.svelte.ts') || params.filename.endsWith('.svelte.js')) {
+  if (
+    params.filename.endsWith('.svelte.ts') ||
+    params.filename.endsWith('.svelte.js')
+  ) {
     const code = compileSvelteModuleFile(params.src, params.filename);
     return upstreamTransformer.transform({
       ...params,

package/package.json

@@ -1,7 +1,17 @@
 {
   "name": "@symbiote-native/svelte",
-  "version": "0.3.0",
+  "version": "2.0.0",
   "description": "SymbioteNative's Svelte adapter — a DOM shim over stock compiled Svelte output driving real native iOS/Android views through the same engine as every other adapter.",
+  "keywords": [
+    "react-native",
+    "symbiote-native",
+    "svelte",
+    "fabric",
+    "cross-platform",
+    "ios",
+    "android",
+    "renderer"
+  ],
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -63,22 +73,22 @@
   },
   "dependencies": {
     "typescript": "~6.0.0",
-    "@symbiote-native/components": "0.5.0",
-    "@symbiote-native/css-parser": "0.4.0"
+    "@symbiote-native/components": "2.0.0",
+    "@symbiote-native/css-parser": "0.5.0"
   },
   "peerDependencies": {
-    "@symbiote-native/engine": ">=0.1.7",
     "svelte": ">=5.56.0",
-    "react-native": ">=0.86"
+    "react-native": ">=0.86",
+    "@symbiote-native/engine": "^0.5.0"
   },
   "devDependencies": {
     "@vue/runtime-core": "^3.5.13",
     "react": "19.2.3",
     "svelte": "^5.56.0",
-    "@symbiote-native/engine": "0.3.0",
-    "@symbiote-native/react": "0.4.0",
-    "@symbiote-native/test-utils": "0.2.0",
-    "@symbiote-native/vue": "0.5.0"
+    "@symbiote-native/engine": "0.5.0",
+    "@symbiote-native/react": "2.0.0",
+    "@symbiote-native/test-utils": "0.3.0",
+    "@symbiote-native/vue": "2.0.0"
   },
   "scripts": {
     "typecheck": "tsc --build",

package/build/components/RefreshControl.svelte

@@ -1,40 +0,0 @@
-<script lang="ts" module>
-  // RefreshControl primitive. On iOS this is the PullToRefreshView Fabric node that lives INSIDE
-  // a ScrollView (a sibling of the content container), giving the pull-to-refresh gesture. On
-  // Android it is AndroidSwipeRefreshLayout and WRAPS the scroll view (a childless-on-iOS,
-  // wraps-on-Android shape — see refresh-control-props.ts). `refreshing` is a controlled prop:
-  // the parent owns it and pushes it down each commit; native reports the gesture via the direct
-  // `topRefresh` event, which the engine routes to the host's `onRefresh` bag entry.
-  import type { IRefreshControlProps } from './refresh-control-props';
-
-  export type { IRefreshControlProps };
-</script>
-
-<script lang="ts">
-  import { dlog } from '@symbiote-native/engine';
-  import { resolveAccessibilityProps } from '@symbiote-native/components';
-  import { createAttachmentsSync } from '../runes/attachments';
-  import type { ShimElement } from '../dom-shim';
-
-  let { children, ...rest }: IRefreshControlProps = $props();
-
-  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');
-
-  const bag = $derived(resolveAccessibilityProps(rest));
-
-  // See View.svelte's note on `{@attach}`.
-  let hostShim = $state.raw<ShimElement | null>(null);
-  const syncAttachments = createAttachmentsSync();
-  $effect(() => {
-    syncAttachments(hostShim, rest);
-  });
-</script>
-
-<symbiote-refresh-control p={bag} bind:this={hostShim}>
-  {@render children?.()}
-</symbiote-refresh-control>

package/build/components/RefreshControl.svelte.d.ts

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

package/build/components/SafeAreaView.svelte

@@ -1,34 +0,0 @@
-<script lang="ts" module>
-  // SafeAreaView primitive. A plain view whose native side insets its children to the safe area
-  // (notch, rounded corners, system bars). There is no JS-side translation; RN just renders the
-  // native RCTSafeAreaView and lets the host do the inset math, so this maps style + children
-  // straight onto the intrinsic — same object-bag pattern as View.svelte.
-  import type { ISafeAreaViewProps } from './safe-area-view-props';
-
-  export type { ISafeAreaViewProps };
-</script>
-
-<script lang="ts">
-  import { dlog } from '@symbiote-native/engine';
-  import { resolveAccessibilityProps } from '@symbiote-native/components';
-
-  import { createAttachmentsSync } from '../runes/attachments';
-  import type { ShimElement } from '../dom-shim';
-
-  let { children, ...rest }: ISafeAreaViewProps = $props();
-
-  dlog('SafeAreaView -> SafeAreaView');
-
-  const bag = $derived(resolveAccessibilityProps(rest));
-
-  // See View.svelte's note on `{@attach}`.
-  let hostShim = $state.raw<ShimElement | null>(null);
-  const syncAttachments = createAttachmentsSync();
-  $effect(() => {
-    syncAttachments(hostShim, rest);
-  });
-</script>
-
-<symbiote-safe-area-view p={bag} bind:this={hostShim}>
-  {@render children?.()}
-</symbiote-safe-area-view>

package/build/components/SafeAreaView.svelte.d.ts

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

package/build/components/Text.svelte

@@ -1,34 +0,0 @@
-<script lang="ts" module>
-  // See View.svelte's header comment — same object-bag design (svelte-adapter-dom-shim
-  // skill §3g(c)). No IResponderProps here, matching every other adapter's ITextProps.
-  import type { ITextProps } from './text-props';
-
-  export type { ITextProps };
-</script>
-
-<script lang="ts">
-  import { resolveTextProps } from '@symbiote-native/components';
-  import { createAttachmentsSync } from '../runes/attachments';
-  import type { ShimElement } from '../dom-shim';
-
-  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, 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}>
-  {@render children?.()}
-</symbiote-text>

package/build/components/Text.svelte.d.ts

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

package/build/components/View.svelte

@@ -1,43 +0,0 @@
-<script lang="ts" module>
-  // Host primitive for app code. Per svelte-adapter-dom-shim skill §3g(c): Symbiote's
-  // custom-element codegen path stringifies individual attributes, so unlike Vue's View
-  // (which spreads props onto the intrinsic tag and lets patchProp route each one), this
-  // component assembles every prop into ONE object bag and hands it to `<symbiote-view p={bag}>`
-  // — the shim element's `p` setter diffs it per key into routeProp. `children` is pulled out
-  // first: it is a Svelte-specific field (a Snippet), never forwarded into the bag, mirroring
-  // why every adapter's IViewProps is declared per-adapter (CLAUDE.md
-  // <prop_types_split_agnostic_vs_per_adapter>) rather than shared verbatim.
-  import type { IViewProps } from './view-props';
-
-  export type { IViewProps };
-</script>
-
-<script lang="ts">
-  import { createAttachmentsSync } from '../runes/attachments';
-  import type { ShimElement } from '../dom-shim';
-
-  let { children, id, nativeID, ...rest }: IViewProps = $props();
-
-  // `{@attach fn}` on a component lands as a SYMBOL-keyed prop, so it rides in `rest` alongside
-  // the ordinary bag keys and never reaches the engine (routeProp only walks string keys). This
-  // is the one directive-shaped Svelte feature that IS legal on a component, hence the only way
-  // an author reaches the committed host node — see runes/attachments.ts.
-  let hostShim = $state.raw<ShimElement | null>(null);
-  const syncAttachments = createAttachmentsSync();
-  $effect(() => {
-    syncAttachments(hostShim, rest);
-  });
-
-  // RN's modern `id` is just a W3C-named alias for `nativeID`: View.js copies it over
-  // (`processedProps.nativeID = id`), so `id` wins when both are set. Fold it here and drop
-  // 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 },
-  );
-</script>
-
-<symbiote-view p={bag} bind:this={hostShim}>
-  {@render children?.()}
-</symbiote-view>