@symbiote-native/react 0.4.0 → 1.0.0

package/README.md

@@ -54,9 +54,24 @@ export default function App() {
 }
 ```
 
-The native entry registers a low-level _runnable_ instead of a React component: RN's Fabric host
-calls it with the surface's `rootTag`, and the renderer takes over from there — `nativeFabric-
-UIManager` is driven directly, RN's own renderer never runs.
+The zero-config entry wires the RN-backed host seams (colors, images, device events,
+third-party ViewConfigs) and registers the app in one call — this is what
+[`examples/react`](../../examples/react) actually uses:
+
+```js
+// index.js
+import { registerApp } from '@symbiote-native/react/bootstrap';
+import App from './App';
+import { name as appName } from './app.json';
+
+registerApp(App, { appName });
+```
+
+`registerApp` mirrors bare RN's own `AppRegistry.registerComponent(appName, () => App)` idiom,
+minus the manual host wiring in front of it — RN's own renderer never runs; `nativeFabric-
+UIManager` is driven directly. For anything the defaults don't cover (a custom color processor,
+image resolver, or manual control over the mount callback), drive the lower-level seam directly —
+a raw _runnable_ instead of a registered component:
 
 ```js
 // index.js
@@ -77,8 +92,8 @@ AppRegistry.registerRunnable(appName, ({ rootTag }) => {
 });
 ```
 
-The runnable example is [`examples/react`](../../examples/react) — a stock RN 0.86 app whose full
-canary ([`App.tsx`](../../examples/react/App.tsx)) exercises every block of the surface below.
+Either way, the full canary ([`App.tsx`](../../examples/react/App.tsx)) exercises every block of
+the surface below.
 
 ---
 

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

@@ -28,3 +28,4 @@ export interface IPressableProps extends IAccessibilityProps, IAriaProps {
     children?: IChildrenProp;
 }
 export declare const Pressable: FC<IPressableProps>;
+export declare const TouchablePressable: FC<IPressableProps>;

package/build/components/pressable/index.js

@@ -11,9 +11,10 @@
 // entirely in JS: android_ripple (an Android native-feedback prop on a dedicated inner View, inert
 // on iOS), unstable_pressDelay, and pressRetentionOffset (the drift region), all handled by the
 // shared machine; here we only wire its host + render the View.
-import { createElement, useMemo, useRef, useState, } from 'react';
-import { createPressHandlers, createPressRuntime, rippleProps, buildPressableListeners, resolveDisabledAccessibilityState, noteHoverNoop, DEFAULT_DELAY_LONG_PRESS_MS, } from '@symbiote-native/components';
+import { createElement, useEffect, useMemo, useRef, useState, } from 'react';
+import { createPressHandlers, createPressRuntime, disposePressRuntime, rippleProps, buildPressableListeners, resolveDisabledAccessibilityState, noteHoverNoop, DEFAULT_DELAY_LONG_PRESS_MS, DEFAULT_MIN_PRESS_DURATION_MS, } from '@symbiote-native/components';
 import { View } from '../../components.js';
+import { flushExternalUpdate } from '../../host-config.js';
 function resolveStyle(style, state) {
     if (typeof style === 'function')
         return style(state);
@@ -24,8 +25,8 @@ function resolveChildren(children, state) {
         return children(state);
     return children;
 }
-export const Pressable = props => {
-    const { onPress, onPressIn, onPressOut, onPressMove, onLongPress, delayLongPress = DEFAULT_DELAY_LONG_PRESS_MS, disabled, cancelable, hitSlop, pressRetentionOffset, unstable_pressDelay = 0, android_ripple, android_disableSound, onHoverIn, onHoverOut, delayHoverIn, delayHoverOut, accessibilityState, testID, style, children, 
+const PressableImpl = props => {
+    const { onPress, onPressIn, onPressOut, onPressMove, onLongPress, delayLongPress = DEFAULT_DELAY_LONG_PRESS_MS, disabled, cancelable, hitSlop, pressRetentionOffset, unstable_pressDelay = 0, __minPressDuration = DEFAULT_MIN_PRESS_DURATION_MS, android_ripple, android_disableSound, onHoverIn, onHoverOut, delayHoverIn, delayHoverOut, accessibilityState, testID, style, children, 
     // The remaining accessibility / aria props forward to View untouched; View runs
     // resolveAccessibilityProps, so aria/role fold there, once.
     ...accessibilityRest } = props;
@@ -45,10 +46,16 @@ export const Pressable = props => {
             return callback => view.measure(callback);
         },
         schedule: (callback, ms) => {
-            const id = setTimeout(callback, ms);
+            const id = setTimeout(() => flushExternalUpdate(callback), ms);
             return () => clearTimeout(id);
         },
+        now: Date.now,
     }), []);
+    // This renderer tears insertion effects down during host updates, so use the stable passive
+    // unmount seam to cancel delayed press-in, long-press and press-out callbacks.
+    useEffect(() => () => {
+        disposePressRuntime(runtime);
+    }, [runtime]);
     const handlers = useMemo(() => createPressHandlers({
         onPress,
         onPressIn,
@@ -57,6 +64,7 @@ export const Pressable = props => {
         onLongPress,
         delayLongPress,
         unstable_pressDelay,
+        minPressDuration: __minPressDuration,
         hitSlop,
         pressRetentionOffset,
     }, runtime, host), [
@@ -67,6 +75,7 @@ export const Pressable = props => {
         onLongPress,
         delayLongPress,
         unstable_pressDelay,
+        __minPressDuration,
         hitSlop,
         pressRetentionOffset,
         runtime,
@@ -98,3 +107,6 @@ export const Pressable = props => {
     const inner = ripple !== undefined ? createElement(View, ripple, content) : content;
     return createElement(View, viewProps, inner);
 };
+export const Pressable = PressableImpl;
+// Relative-only composition seam; it is deliberately absent from the adapter barrel.
+export const TouchablePressable = props => createElement(PressableImpl, { ...props, __minPressDuration: 0 });

package/build/components/safe-area-view/index.d.ts

@@ -4,6 +4,7 @@ import { type IAccessibilityProps, type IAriaProps } from '@symbiote-native/comp
 import type { IStyleProp, IViewStyle } from '../../utils/styles';
 export interface ISafeAreaViewProps extends IAccessibilityProps, IAriaProps {
     style?: IStyleProp<IViewStyle>;
+    id?: string;
     className?: string;
     children?: ReactNode;
     onLayout?: (event: ISymbioteEvent) => void;

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

@@ -119,6 +119,14 @@ export const TextInput = forwardRef((rawProps, forwardedRef) => {
     // setSelection reuse setTextAndSelection (the same stale-safe path as a controlled write),
     // echoing the acknowledged event count so native applies them.
     useImperativeHandle(forwardedRef, () => ({
+        // Forwarded from the node so a TextInput ref is not poorer than any other host ref. An
+        // `expose`/`useImperativeHandle` that lists only the five TextInput methods CLOSES the
+        // node off, and the lowered path loses the opposite four — two different surfaces an app
+        // crosses between without touching its ref code. `ITextInputHandle` carries the account.
+        measure: (callback) => ref.current?.measure(callback),
+        measureInWindow: (callback) => ref.current?.measureInWindow(callback),
+        measureLayout: (relativeToNativeNode, onSuccess, onFail) => ref.current?.measureLayout(relativeToNativeNode, onSuccess, onFail),
+        setNativeProps: (nativeProps) => ref.current?.setNativeProps(nativeProps),
         focus: () => {
             const node = ref.current;
             if (node !== null)

package/build/components/touchable/index.js

@@ -11,7 +11,7 @@
 //     "without feedback" means no VISUAL, not no timing.
 import { Children, cloneElement, createElement, isValidElement, useEffect, useRef, useState, } from 'react';
 import { createHighlightUnderlayHandlers, createHighlightUnderlayRuntime, createTouchableFeedbackHandlers, createTouchableFeedbackRuntime, hasTouchablePressHandler, resolveHighlightExtraStyles, restingOpacityFromStyle, DEFAULT_ACTIVE_OPACITY, OPACITY_ACTIVE_GRANT_DURATION_MS, OPACITY_INACTIVE_DURATION_MS, TOUCHABLE_MIN_PRESS_DURATION_MS, } from '@symbiote-native/components';
-import { Pressable } from '../pressable/index.js';
+import { TouchablePressable as Pressable, } from '../pressable/index.js';
 import { Animated } from '../../modules/animated/index.js';
 // The real setTimeout the shared machines schedule on (core/components has no timer globals).
 // Returns a canceller so an early release flushes the timer.

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

@@ -10,7 +10,7 @@ import { createElement } from 'react';
 import { dlog } from '@symbiote-native/engine';
 import { backgroundProps, canUseNativeForeground, rippleBackground, selectableBackground, selectableBackgroundBorderless, } from '@symbiote-native/components';
 import { View } from '../../components.js';
-import { Pressable } from '../pressable/index.js';
+import { TouchablePressable as Pressable, } from '../pressable/index.js';
 const TouchableNativeFeedbackImpl = props => {
     const { background, useForeground = false, children, ...rest } = props;
     // RN defaults a missing background to SelectableBackground() so the touchable always has

package/build/components.d.ts

@@ -1,7 +1,7 @@
-import { type FC, type Ref, type ReactNode } from 'react';
+import type { Ref, ReactNode } from 'react';
 import type { ISymbioteEvent } from '@symbiote-native/engine';
 import type { IHostInstance } from './host-instance';
-import { type IAccessibilityProps, type IAriaProps } from '@symbiote-native/components';
+import type { IAccessibilityProps, IAriaProps } from '@symbiote-native/components';
 import type { IResponderProps } from './utils/responder-props';
 import type { IStyleProp, ITextStyle, IViewStyle } from './utils/styles';
 export interface IViewProps extends IAccessibilityProps, IAriaProps, IResponderProps {
@@ -50,5 +50,5 @@ export interface ITextProps extends IAccessibilityProps, IAriaProps {
     ref?: Ref<IHostInstance>;
     children?: ReactNode;
 }
-export declare const View: FC<IViewProps>;
-export declare const Text: FC<ITextProps>;
+export declare const View = "symbiote-view";
+export declare const Text = "symbiote-text";

package/build/components.js

@@ -1,17 +1,19 @@
-// Host primitives exposed to user code. They are thin wrappers that produce the
-// lowercase host elements the reconciler understands (`view` / `text`); the
-// reconciler maps those to shared's mutation API, which resolves them to Fabric
-// view names at commit.
-import { createElement } from 'react';
-import { resolveAccessibilityProps, resolveTextProps, } from '@symbiote-native/components';
-// 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. We fold it here and
-// blank the alias so a raw `id` never reaches Fabric (every non-function prop passes
-// through to the slot otherwise).
-function resolveId({ id, ...rest }) {
-    if (id === undefined)
-        return rest;
-    return { ...rest, nativeID: id };
-}
-export const View = props => createElement('symbiote-view', resolveAccessibilityProps(resolveId(props)));
-export const Text = props => createElement('symbiote-text', resolveTextProps(resolveAccessibilityProps(props)));
+// Host primitives exposed to user code. They ARE the intrinsic tags — a capitalized export whose
+// value is the tag string — so an app writes `<View>` and React commits a host element directly,
+// with no component instance in between. The reconciler maps the tag through
+// `descriptorFor` to a Fabric view name at commit.
+// `View` and `Text` are the intrinsic TAGS, not components wrapping them. JSX resolves a
+// capitalized tag to the value in scope, and a value that is a STRING is a host element to React —
+// so `<View/>` compiles to `_jsx('symbiote-view', …)` with no component instance, while
+// `JSX.IntrinsicElements['symbiote-view']` still supplies the strict props (a bad prop is TS2322).
+//
+// The two folds their component bodies used to apply both moved down a layer, which is what let
+// the bodies go:
+//
+//   aria / accessibility   the engine folds every node in `fabricProps` (accessibility-props.ts)
+//   id -> nativeID,        the renderer folds by spec in `host-config`'s createInstance
+//   Text's defaults        (`foldHostBag`, driven by HOST_PRIMITIVES)
+//
+// A type annotation rather than `as const`: same literal type, no cast (`ts-js-best-practices`).
+export const View = 'symbiote-view';
+export const Text = 'symbiote-text';

package/build/host-config.d.ts

@@ -1,7 +1,7 @@
 import createReconciler from 'react-reconciler';
 import { SymbioteSurface, type ISymbioteNode } from '@symbiote-native/engine';
-import { type IHostInstance } from './host-instance';
 type IContainer = SymbioteSurface | ISymbioteNode;
 export declare function withDiscretePriority(run: () => void): void;
-declare const reconciler: createReconciler.Reconciler<IContainer, ISymbioteNode, ISymbioteNode, never, unknown, IHostInstance>;
+declare const reconciler: createReconciler.Reconciler<IContainer, ISymbioteNode, ISymbioteNode, never, unknown, ISymbioteNode>;
+export declare function flushExternalUpdate(run: () => void): void;
 export default reconciler;

package/build/host-config.js

@@ -4,7 +4,7 @@
 // canary: a known-good driver exercising shared end to end.
 import createReconciler from 'react-reconciler';
 import { createContext } from 'react';
-import { appendChild, createElement, createRawText, insertBefore, removeChild, routeProp, setNodeHidden, setText, SymbioteSurface, } from '@symbiote-native/engine';
+import { appendChild, createElement, createRawText, insertBefore, removeChild, routeProp, setNodeComponent, setNodeHidden, setText, SymbioteSurface, } from '@symbiote-native/engine';
 import { DefaultEventPriority, DiscreteEventPriority, NoEventPriority, } from './reconciler-constants.js';
 import { toPublicInstance } from './host-instance.js';
 // Intrinsic JSX type -> Fabric component name. The name table + resolver live once in
@@ -13,6 +13,14 @@ import { toPublicInstance } from './host-instance.js';
 // Adding a primitive is one entry in each name table there, plus its thin
 // component in components.ts: no host-config logic per primitive.
 import { descriptorFor } from '@symbiote-native/components';
+// A bare intrinsic tag has no wrapper to apply RN's per-primitive prop folds (id -> nativeID,
+// Text's ellipsizeMode / allowFontScaling defaults), so the renderer is the layer that must.
+// Shared with every other adapter, driven by the same HOST_PRIMITIVES spec.
+import { foldHostBag } from '@symbiote-native/components/fold-host-bag';
+// WHICH native view a primitive commits can depend on a prop (TextInput's `multiline`). A lowering
+// transform decides that from source text; a bare tag has no transform, so the choice is made here,
+// where the runtime value is known. Identity for every primitive that declares no alternative.
+import { resolveIntrinsicTag } from '@symbiote-native/components/resolve-intrinsic';
 // React-reserved prop keys that must never reach Fabric. `children` is the element
 // tree (handled via appendChild). `ref`/`key` are React 19 plain props: the reconciler
 // reads `props.ref` for commitAttachRef but does NOT strip it from the props it hands a
@@ -47,8 +55,9 @@ function isSurfaceContainer(container) {
     return container instanceof SymbioteSurface;
 }
 let currentUpdatePriority = NoEventPriority;
-// Run an externally-triggered update (a native event) at discrete priority so it
-// lands on the sync lane and flushSyncWork paints it immediately.
+// Run the callback at discrete priority. Native events and component-owned timers both enter
+// React outside its render loop; callers pair this with flushExternalUpdate when the result must
+// paint synchronously.
 export function withDiscretePriority(run) {
     const previous = currentUpdatePriority;
     currentUpdatePriority = DiscreteEventPriority;
@@ -90,12 +99,12 @@ const reconciler = createReconciler({
     },
     shouldSetTextContent: () => false,
     createInstance(type, props, _container, hostContext) {
-        const descriptor = descriptorFor(type);
+        const descriptor = descriptorFor(resolveIntrinsicTag(type, props));
         if (hostContext.isInsideText && !descriptor.isText) {
             throw new Error(`<${type}> can't be nested inside <Text>`);
         }
         const node = createElement(descriptor.component, descriptor.isText);
-        applyProps(node, props);
+        applyProps(node, foldHostBag(type, props));
         return node;
     },
     createTextInstance(text, _container, hostContext) {
@@ -127,8 +136,14 @@ const reconciler = createReconciler({
             removeChild(container, child);
     },
     finalizeInitialChildren: () => false,
-    commitUpdate(node, _type, oldProps, newProps) {
-        applyUpdate(node, oldProps, newProps);
+    commitUpdate(node, type, oldProps, newProps) {
+        // A primitive whose native view depends on a prop (TextInput's `multiline`) can change view on
+        // an update. The node keeps its identity — an app's ref stays live — and the commit walk
+        // re-creates the Fabric node because its viewName no longer matches the committed one.
+        setNodeComponent(node, descriptorFor(resolveIntrinsicTag(type, newProps)).component);
+        // BOTH sides folded, or the diff compares a raw `id` against a folded `nativeID` and writes
+        // the alias twice while never clearing the raw key.
+        applyUpdate(node, foldHostBag(type, oldProps), foldHostBag(type, newProps));
     },
     commitTextUpdate(node, _oldText, newText) {
         setText(node, newText);
@@ -174,4 +189,12 @@ const reconciler = createReconciler({
     suspendInstance: () => { },
     waitForCommitToBeReady: () => null,
 });
+// Native-event and timer callbacks both update React from outside the reconciler. Put the update
+// on the discrete lane and synchronously commit it; otherwise a delayed Pressable transition can
+// mutate state but remain visually stale until some unrelated later event flushes React work.
+export function flushExternalUpdate(run) {
+    withDiscretePriority(run);
+    // @ts-expect-error flushSyncWork exists at runtime in react-reconciler 0.33
+    reconciler.flushSyncWork();
+}
 export default reconciler;

package/build/host-instance.js

@@ -1,7 +1,7 @@
 // The public instance a host ref hands back, and the ref -> tag lookup. toPublicInstance and
 // IHostInstance live in @symbiote-native/engine (every adapter inherits the same public instance);
 // this module re-exports them so the React surface (findNodeHandle + IHostInstance, host-config's
-// toPublicInstance graft) is unchanged. findNodeHandle stays React-specific: it is the
+// getPublicInstance) is unchanged. findNodeHandle stays React-specific: it is the
 // RN-shaped "ref -> native tag" lookup over the engine's getNativeTag.
 import { getNativeTag, isSymbioteNode, toPublicInstance, } from '@symbiote-native/engine';
 export { toPublicInstance };

package/build/index.d.ts

@@ -1,3 +1,4 @@
+export type { ISymbioteIntrinsicTag } from './jsx';
 export { View, Text } from './components';
 export type { IViewProps, ITextProps } from './components';
 export type { IAccessibilityProps, IAriaProps, IAccessibilityRole, IRole, IAccessibilityStateValue, IAccessibilityValue, IAccessibilityActionInfo, } from '@symbiote-native/components';

package/build/jsx.d.ts

@@ -0,0 +1,18 @@
+import type { ISymbioteIntrinsic } from '@symbiote-native/components';
+import type { IViewProps, ITextProps } from './components';
+interface HostProps {
+    style?: unknown;
+    children?: import('react').ReactNode;
+    [key: string]: unknown;
+}
+type ILooseIntrinsics = Omit<Record<ISymbioteIntrinsic, HostProps>, 'symbiote-view' | 'symbiote-text'>;
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends ILooseIntrinsics {
+            'symbiote-view': IViewProps;
+            'symbiote-text': ITextProps;
+        }
+    }
+}
+export type ISymbioteIntrinsicTag = keyof import('react').JSX.IntrinsicElements;
+export {};

package/build/jsx.js

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

package/build/modules/animated/create-animated-component.d.ts

@@ -8,5 +8,6 @@ type IAnimatableProps = {
     style?: unknown;
     children?: unknown;
 };
-export declare function createAnimatedComponent<P extends IAnimatableProps>(Component: ComponentType<P>): ComponentType<IAnimatedComponentProps>;
+type IAnimatableBase<P extends IAnimatableProps> = ComponentType<P> | string;
+export declare function createAnimatedComponent<P extends IAnimatableProps>(Component: IAnimatableBase<P>): ComponentType<IAnimatedComponentProps>;
 export {};

package/build/modules/animated/create-animated-component.js

@@ -27,6 +27,12 @@ function assignRef(ref, value) {
     }
     ref.current = value;
 }
+// A tag has no displayName/name, so read the label through the shape actually present.
+function baseNameOf(base) {
+    if (typeof base === 'string')
+        return base;
+    return base.displayName ?? base.name ?? 'Anonymous';
+}
 export function createAnimatedComponent(Component) {
     function AnimatedComponent(props) {
         const { ref: forwardedRef, passthroughAnimatedPropExplicitValues: passthrough, ...rest } = props;
@@ -81,6 +87,6 @@ export function createAnimatedComponent(Component) {
         const childProps = Object.assign(Object.create(null), reduced, { ref: captureRef });
         return createElement(Component, childProps);
     }
-    AnimatedComponent.displayName = `Animated(${Component.displayName ?? Component.name ?? 'Anonymous'})`;
+    AnimatedComponent.displayName = `Animated(${baseNameOf(Component)})`;
     return AnimatedComponent;
 }

package/build/render.js

@@ -2,7 +2,7 @@
 // rootTag (via AppRegistry.registerRunnable); we create a surface for it and let
 // the reconciler drive shared, which commits into nativeFabricUIManager.
 import { createSurface, disposeRoot, setEventDispatcher, dlog, reportUncaughtError, } from '@symbiote-native/engine';
-import reconciler, { withDiscretePriority } from './host-config.js';
+import reconciler, { flushExternalUpdate } from './host-config.js';
 import { LegacyRoot } from './reconciler-constants.js';
 const noop = () => { };
 function errorReporter(origin) {
@@ -40,10 +40,8 @@ const onRecoverableError = errorReporter('react render (recovered)');
 // to compare against Vue/Angular's microtask-coalesced requestCommit(). Kept
 // behind DEBUG per <keep_logs_gate_behind_DEBUG>, never removed.
 setEventDispatcher(run => {
-    withDiscretePriority(run);
     dlog('react event-dispatch: forced flushSyncWork');
-    // @ts-expect-error flushSyncWork exists at runtime in react-reconciler 0.33
-    reconciler.flushSyncWork();
+    flushExternalUpdate(run);
 });
 const containers = new Map();
 // Unmount a surface's React tree (render null → empty completeRoot, clearing the

package/build/state-style.d.ts

@@ -0,0 +1 @@
+export { resolveStateStyle, type IPressStateArgument, type IResolvedStateStyle, } from '@symbiote-native/components/state-style';

package/build/state-style.js

@@ -0,0 +1,13 @@
+// Re-export only. The implementation is shared (`@symbiote-native/components`) because two adapters
+// had written byte-identical copies; this file exists so the code a transform EMITS keeps importing
+// from the adapter package the app already depends on, rather than reaching past it.
+//
+// Imported from the SUBPATH, not the barrel: every adapter barrel re-exports
+// `@symbiote-native/components` wholesale, so a name on that barrel silently becomes public API on
+// all five — which is how a transform internal nearly shipped as a supported export.
+//
+// Present on every adapter, including those with no lowering transform yet: a per-framework subpath
+// that four of five declare is exactly the silent gap `tests/package-subpath-parity.test.ts` exists
+// to catch, and the file costs a re-export. Deliberately NOT on the public barrel — the emitted
+// code names it, app code does not.
+export { resolveStateStyle, } from '@symbiote-native/components/state-style';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbiote-native/react",
-  "version": "0.4.0",
+  "version": "1.0.0",
   "description": "SymbioteNative's React adapter — a react-reconciler host config (mutation mode) driving real native iOS/Android views through stock React Native Fabric.",
   "license": "MIT",
   "repository": {
@@ -13,6 +13,18 @@
     "url": "https://github.com/OneEyed1366/symbiote-native/issues"
   },
   "author": "Andrey Prokopenko <psevdoproger@gmail.com>",
+  "keywords": [
+    "react-native",
+    "symbiote-native",
+    "react",
+    "fabric",
+    "reconciler",
+    "renderer",
+    "cross-platform",
+    "mobile",
+    "ios",
+    "android"
+  ],
   "type": "module",
   "main": "./build/index.js",
   "module": "./build/index.js",
@@ -26,7 +38,11 @@
       "types": "./build/bootstrap.d.ts",
       "default": "./build/bootstrap.js"
     },
-    "./metro-css-parser": "./metro-css-parser.cjs"
+    "./metro-css-parser": "./metro-css-parser.cjs",
+    "./state-style": {
+      "types": "./build/state-style.d.ts",
+      "default": "./build/state-style.js"
+    }
   },
   "files": [
     "build",
@@ -37,20 +53,20 @@
   },
   "dependencies": {
     "react-reconciler": "^0.33.0",
-    "@symbiote-native/components": "0.5.0",
-    "@symbiote-native/css-parser": "0.4.0"
+    "@symbiote-native/components": "1.0.0",
+    "@symbiote-native/css-parser": "0.5.0"
   },
   "peerDependencies": {
-    "@symbiote-native/engine": ">=0.1.7",
     "react": ">=19.0.0",
-    "react-native": ">=0.86"
+    "react-native": ">=0.86",
+    "@symbiote-native/engine": "^0.4.0"
   },
   "devDependencies": {
     "@types/react": "^19.2.0",
     "@types/react-reconciler": "^0.32.2",
     "react": "19.2.3",
-    "@symbiote-native/engine": "0.3.0",
-    "@symbiote-native/test-utils": "0.2.0"
+    "@symbiote-native/test-utils": "0.3.0",
+    "@symbiote-native/engine": "0.4.0"
   },
   "scripts": {
     "typecheck": "tsc --build",