@symbiote-native/react 0.3.0 → 1.0.0

package/build/components/virtualized-section-list/index.js

@@ -6,7 +6,7 @@
 // useImperativeHandle + the per-entry render dispatch). Lower layer in RN's
 // SectionList -> VirtualizedSectionList -> VirtualizedList stack.
 import { createElement, useImperativeHandle, useRef, } from 'react';
-import { dlog, Platform } from '@symbiote-native/engine';
+import { dlog, Platform, } from '@symbiote-native/engine';
 import { flattenSections, resolveStickySectionHeaders, scrollLocationToFlatIndex, sectionEntryKey, unwrapEntryItem, } from '@symbiote-native/components';
 import { VirtualizedList, } from '../virtualized-list/index.js';
 function resolveSeparator(component) {
@@ -20,7 +20,10 @@ export function VirtualizedSectionList(props) {
     const { ref, sections, renderItem, renderSectionHeader, renderSectionFooter, SectionSeparatorComponent, 
     // Pulled out of `rest`: the user's separator is typed on ItemT, but the inner VirtualizedList
     // streams ISectionEntry<ItemT>, so we wrap it to unwrap each entry back to its ItemT.
-    ItemSeparatorComponent, keyExtractor, stickySectionHeadersEnabled, ...rest } = props;
+    ItemSeparatorComponent, keyExtractor, 
+    // Also pulled out of `rest`: the inner list streams entries, the user's callback expects
+    // sections. See entryItemLayout below.
+    getItemLayout, stickySectionHeadersEnabled, ...rest } = props;
     const { entries, headerIndices } = flattenSections(sections, SectionSeparatorComponent !== undefined);
     // RN sticks section headers by default only on iOS; Android does not unless asked. headerIndices
     // are the flat positions of every section header; VirtualizedList forwards the in-window ones.
@@ -58,10 +61,14 @@ export function VirtualizedSectionList(props) {
     const renderEntry = (info) => {
         const entry = info.item;
         if (entry.kind === 'header') {
-            return renderSectionHeader ? renderSectionHeader({ section: entry.section }) : undefined;
+            return renderSectionHeader
+                ? renderSectionHeader({ section: entry.section })
+                : undefined;
         }
         if (entry.kind === 'footer') {
-            return renderSectionFooter ? renderSectionFooter({ section: entry.section }) : undefined;
+            return renderSectionFooter
+                ? renderSectionFooter({ section: entry.section })
+                : undefined;
         }
         if (entry.kind === 'section-separator') {
             return resolveSeparator(SectionSeparatorComponent);
@@ -83,6 +90,18 @@ export function VirtualizedSectionList(props) {
             trailingItem: unwrapEntryItem(entryProps.trailingItem),
         });
     const entryKeyExtractor = (entry, index) => sectionEntryKey(entry, index, keyExtractor);
+    // Hand the callback `sections`, not the entries: RN's inner VirtualizedList gets
+    // `data={this.props.sections}` (VirtualizedSectionList.js:216) while ours streams the FLATTENED
+    // entries, so the same user code would otherwise see a different argument here than on RN.
+    //
+    // UPSTREAM-DIVERGENCE(react-native): the flat INDEX matches RN's (two rows per section, header
+    // and footer) only while SectionSeparatorComponent is unset. With it, flattenSections emits an
+    // extra 'section-separator' row per boundary that RN renders inside the neighbouring cell, so
+    // indices shift by one per boundary from the second section on. Deliberate - that row is how this
+    // adapter paints the separator; a caller combining the two must account for it.
+    const entryItemLayout = getItemLayout === undefined
+        ? undefined
+        : (_entries, index) => getItemLayout(sections, index);
     return createElement((VirtualizedList), {
         ref: listRef,
         data: entries,
@@ -90,6 +109,7 @@ export function VirtualizedSectionList(props) {
         getItemCount: () => entries.length,
         renderItem: renderEntry,
         keyExtractor: entryKeyExtractor,
+        getItemLayout: entryItemLayout,
         stickyHeaderIndices,
         ItemSeparatorComponent: entrySeparatorComponent,
         ...rest,

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, } 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', 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/create-portal/index.js

@@ -10,7 +10,7 @@
 // call site (e.g. a ref to a persistent "overlay host" View near your app root) — not a second,
 // independently-mounted SymbioteSurface. Cross-surface targets aren't wired: resetAfterCommit only
 // fires for the primary root's own container, so a different surface's tree would never repaint.
-import { isSymbioteNode, SymbioteSurface } from '@symbiote-native/engine';
+import { isSymbioteNode, SymbioteSurface, } from '@symbiote-native/engine';
 import reconciler from '../host-config.js';
 export function createPortal(children, container, key) {
     if (!(container instanceof SymbioteSurface) && !isSymbioteNode(container)) {

package/build/create-tunnel/index.js

@@ -15,7 +15,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // nowhere to bounce back to. `Out` lives in whichever surface should PAINT the content; `In`
 // lives anywhere - same surface or a different one - and never touches a Fabric node
 // directly, so there's no "target must already be mounted" guard to satisfy.
-import { Fragment, useEffect, useId, useSyncExternalStore } from 'react';
+import { Fragment, useEffect, useId, useSyncExternalStore, } from 'react';
 export function createTunnel() {
     const items = new Map();
     const listeners = new Set();

package/build/hooks/use-window-dimensions.js

@@ -4,7 +4,7 @@
 // subscribing to close the gap between the render-time get and the effect-time
 // listener. Only the window metrics changing triggers a re-render.
 import { useEffect, useState } from 'react';
-import { Dimensions } from '@symbiote-native/engine';
+import { Dimensions, } from '@symbiote-native/engine';
 export function useWindowDimensions() {
     const [dimensions, setDimensions] = useState(() => Dimensions.get('window'));
     useEffect(() => {

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, 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;
@@ -70,7 +79,9 @@ const reconciler = createReconciler({
     getRootHostContext: () => ({ isInsideText: false }),
     getChildHostContext(parentHostContext, type) {
         const isInsideText = descriptorFor(type).isText;
-        return parentHostContext.isInsideText === isInsideText ? parentHostContext : { isInsideText };
+        return parentHostContext.isInsideText === isInsideText
+            ? parentHostContext
+            : { isInsideText };
     },
     getPublicInstance: instance => toPublicInstance(instance),
     prepareForCommit: () => null,
@@ -88,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) {
@@ -125,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);
@@ -134,8 +151,12 @@ const reconciler = createReconciler({
     resetTextContent: () => { },
     hideTextInstance: node => setText(node, ''),
     unhideTextInstance: (node, text) => setText(node, text),
-    hideInstance: () => { },
-    unhideInstance: () => { },
+    // `Activity mode="hidden"` and a re-suspending `Suspense` both reach the tree through these.
+    // They were no-ops, so hidden content went on painting — stacked on top of whatever replaced
+    // it — and only the mount/unmount half of Activity appeared to work. The engine owns the
+    // reversible half (see setNodeHidden): the author's own style stays untouched underneath.
+    hideInstance: node => setNodeHidden(node, true),
+    unhideInstance: node => setNodeHidden(node, false),
     beforeActiveInstanceBlur: () => { },
     afterActiveInstanceBlur: () => { },
     detachDeletedInstance: () => { },
@@ -146,7 +167,9 @@ const reconciler = createReconciler({
         currentUpdatePriority = priority;
     },
     getCurrentUpdatePriority: () => currentUpdatePriority,
-    resolveUpdatePriority: () => currentUpdatePriority !== NoEventPriority ? currentUpdatePriority : DefaultEventPriority,
+    resolveUpdatePriority: () => currentUpdatePriority !== NoEventPriority
+        ? currentUpdatePriority
+        : DefaultEventPriority,
     maySuspendCommit: () => false,
     NotPendingTransition: null,
     // react's Context IS the runtime value react-reconciler's ReactContext wants
@@ -166,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';
@@ -7,9 +8,9 @@ export type { IImageProps, IImageSource, IImageSourceProp, IResizeMode, IImageSi
 export { ImageBackground } from './components/image-background';
 export type { IImageBackgroundProps } from './components/image-background';
 export { ScrollView } from './components/scroll-view';
-export type { IScrollViewProps, IScrollViewHandle } from './components/scroll-view';
+export type { IScrollViewProps, IScrollViewHandle, } from './components/scroll-view';
 export { TextInput } from './components/text-input';
-export type { ITextInputProps, ITextInputHandle } from './components/text-input';
+export type { ITextInputProps, ITextInputHandle, } from './components/text-input';
 export { InputAccessoryView } from './components/input-accessory-view';
 export type { IInputAccessoryViewProps } from './components/input-accessory-view';
 export { KeyboardAvoidingView } from './components/keyboard-avoiding-view';
@@ -35,12 +36,12 @@ export type { IButtonProps } from './components/button';
 export { FlatList } from './components/flat-list';
 export type { IFlatListProps, IFlatListHandle } from './components/flat-list';
 export { SectionList } from './components/section-list';
-export type { ISectionListProps, ISectionListHandle, ISection } from './components/section-list';
+export type { ISectionListProps, ISectionListHandle, ISection, } from './components/section-list';
 export { VirtualizedSectionList } from './components/virtualized-section-list';
 export type { IVirtualizedSectionListProps, IVirtualizedSectionListHandle, } from './components/virtualized-section-list';
 export { VirtualizedList } from './components/virtualized-list';
 export type { IVirtualizedListProps, IVirtualizedListHandle, IViewToken, IViewableItemsChangedInfo, IViewabilityConfig, IViewabilityConfigCallbackPair, } from './components/virtualized-list';
-export type { IViewStyle, ITextStyle, IFlexAlign, IFlexJustify } from './utils/styles';
+export type { IViewStyle, ITextStyle, IFlexAlign, IFlexJustify, } from './utils/styles';
 export { mount, unmount } from './render';
 export { createPortal, type IPortalContainer } from './create-portal';
 export { createTunnel, type ITunnel } from './create-tunnel';
@@ -51,11 +52,11 @@ export { AppRegistry, setHostRegistrar } from './modules/app-registry';
 export type { IComponentProvider, IAppParameters, IRunnable, IHostRegistrar, IWrapperComponentProvider, IRegistry, IHeadlessTask, ITaskProvider, ITaskCanceller, ITaskCancelProvider, } from './modules/app-registry';
 export { Animated, createAnimatedComponent } from './modules/animated';
 export { Platform, StyleSheet } from '@symbiote-native/engine';
-export { PlatformColor, DynamicColorIOS, processColor } from '@symbiote-native/engine';
+export { PlatformColor, DynamicColorIOS, processColor, } from '@symbiote-native/engine';
 export type { IColorValue, IOpaqueColorValue, IDynamicColorIOSTuple, } from '@symbiote-native/engine';
 export { setNativeViewConfigSource, setColorProcessor, setDeviceEventSource, } from '@symbiote-native/engine';
 export { dlog, isDebug } from '@symbiote-native/engine';
-export type { INativeViewConfig, INativeViewConfigSource } from '@symbiote-native/engine';
+export type { INativeViewConfig, INativeViewConfigSource, } from '@symbiote-native/engine';
 export type { IPlatformStatic, IPlatformOSType, IPlatformConstantsIOS, IPlatformConstantsAndroid, IPlatformSelectSpec, } from '@symbiote-native/engine';
 export { Alert, Share, ActionSheetIOS, Linking, Vibration, ToastAndroid, Settings, I18nManager, Dimensions, Appearance, AppState, Keyboard, KEYBOARD_EVENT, BackHandler, PermissionsAndroid, PERMISSIONS, RESULTS, LayoutAnimation, PixelRatio, } from '@symbiote-native/engine';
 export type { IAlertType, IAlertButtonStyle, IAlertButton, IAlertButtons, IAlertOptions, IShareContent, IShareOptions, IShareAction, IActionSheetIOSOptions, IShareActionSheetIOSOptions, IShareActionSheetError, IUrlEvent, II18nManagerConstants, IDisplayMetrics, IDisplayMetricsAndroid, IDimensionsPayload, IDimensionsSet, IDimensionsKey, IDimensionsChangeListener, IDimensionsStatic, IColorSchemeName, IColorSchemePreference, IAppStateStatus, IAppStateEvent, IKeyboardEventName, IKeyboardEvent, IKeyboardMetrics, IBackPressEventName, IBackPressHandler, IPermission, IPermissionStatus, IRationale, ILayoutAnimationType, ILayoutAnimationProperty, ILayoutAnimationConfig, ILayoutAnimationAnim, IPixelRatioStatic, } from '@symbiote-native/engine';
@@ -69,5 +70,5 @@ export { InteractionManager } from '@symbiote-native/engine';
 export type { IInteractionEvent, ISimpleTask, IPromiseTask, ITask, IHandle, } from '@symbiote-native/engine';
 export { TouchableNativeFeedback } from './components/touchable-native-feedback';
 export type { ITouchableNativeFeedbackProps, INativeFeedbackBackground, IThemeAttrBackground, IRippleBackground, } from './components/touchable-native-feedback';
-export type { ISymbioteEvent, ISymbioteNode, IRootTag } from '@symbiote-native/engine';
+export type { ISymbioteEvent, ISymbioteNode, IRootTag, } from '@symbiote-native/engine';
 export type { ICellLayout, ISeparatorProps, ISeparators, IModalOrientationChangeEvent, IPressableAndroidRippleConfig, IEnterKeyHint, IInputMode, ISubmitBehavior, ITextInputSelection, IImageStatics, } from '@symbiote-native/components';

package/build/index.js

@@ -49,7 +49,7 @@ export { Platform, StyleSheet } from '@symbiote-native/engine';
 // Color utilities: PlatformColor / DynamicColorIOS build opaque platform colors;
 // processColor runs a color through the injected platform processor. All pure /
 // seam-backed, so they live in shared and the adapter re-exports them.
-export { PlatformColor, DynamicColorIOS, processColor } from '@symbiote-native/engine';
+export { PlatformColor, DynamicColorIOS, processColor, } from '@symbiote-native/engine';
 // The three app-entry seams, wired once on a real host, so the barrel exposes them together.
 // setNativeViewConfigSource hands the engine RN's ViewConfig registry, which is how third-party
 // Fabric views auto-derive their metadata:

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;
@@ -74,11 +80,13 @@ export function createAnimatedComponent(Component) {
         const passthroughStyle = readPassthroughStyle(passthrough);
         if (passthroughStyle !== undefined) {
             reduced.style =
-                reduced.style === undefined ? passthroughStyle : [reduced.style, passthroughStyle];
+                reduced.style === undefined
+                    ? passthroughStyle
+                    : [reduced.style, passthroughStyle];
         }
         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/modules/animated/index.d.ts

@@ -1,7 +1,7 @@
 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';
 import { createAnimatedComponent } from './create-animated-component';
 export { createAnimatedComponent } from './create-animated-component';
-export { AnimatedProps, AnimatedStyle, AnimatedTransform } from '@symbiote-native/engine';
+export { AnimatedProps, AnimatedStyle, AnimatedTransform, } from '@symbiote-native/engine';
 export declare const Animated: {
     Value: typeof AnimatedValue;
     ValueXY: typeof AnimatedValueXY;

package/build/modules/animated/index.js

@@ -14,7 +14,7 @@ import { AnimatedMock } from '@symbiote-native/engine';
 export { createAnimatedComponent } from './create-animated-component.js';
 // The pure graph leaves now live in @symbiote-native/engine (they extend AnimatedWithChildren,
 // no React); re-exported here so @symbiote-native/react's Animated surface is unchanged.
-export { AnimatedProps, AnimatedStyle, AnimatedTransform } from '@symbiote-native/engine';
+export { AnimatedProps, AnimatedStyle, AnimatedTransform, } from '@symbiote-native/engine';
 // View/Text/Image are pure host primitives, so wrap them eagerly.
 const AnimatedView = createAnimatedComponent(View);
 const AnimatedText = createAnimatedComponent(Text);

package/build/modules/status-bar/index.ios.js

@@ -10,7 +10,7 @@
 // it, which is also what a bare '@symbiote-native/engine' import resolves to under vitest — so
 // this file's own engine import is already vitest-correct, no platform-selection subtlety here.
 import { useEffect } from 'react';
-import { applyStatusBarProps, statusBarImperative } from '@symbiote-native/engine';
+import { applyStatusBarProps, statusBarImperative, } from '@symbiote-native/engine';
 // StatusBar renders null and applies its props to the native module in an effect,
 // on mount and on every prop change. Simplification vs RN: RN maintains a
 // prop-merge stack so nested StatusBars compose (deepest/last wins). This module

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) {
@@ -11,10 +11,20 @@ function errorReporter(origin) {
     };
 }
 const onUncaughtError = errorReporter('react render (no error boundary)');
-// A boundary handled it, and it is still reported - the boundary decides what the USER sees, not
-// whether the developer hears about it. Upstream's nativeOnCaughtError calls the same
-// showErrorDialog as the uncaught path.
-const onCaughtError = errorReporter('react render (caught by error boundary)');
+// A boundary handled it, so it does NOT reach the native redbox — it goes to , off unless
+// DEBUG is set.
+//
+// This deliberately DIVERGES from upstream, whose nativeOnCaughtError calls the same
+// showErrorDialog as the uncaught path. The argument for upstream's choice is that the boundary
+// decides what the USER sees, not whether the developer hears. The argument against, and the one
+// this project takes: writing an ErrorBoundary IS the developer saying "I know this can throw and
+// I am handling it here". Answering that with a full-screen redbox over the fallback the app just
+// rendered contradicts the thing the app asked for, and it is the only adapter here that did it —
+// Solid's ErrorBoundary is silent, and its canary reads as correct next to React's alarming one.
+// An UNCAUGHT error still hits the redbox; the difference is exactly whether someone claimed it.
+const onCaughtError = (error, info) => {
+    dlog(() => `react render (caught by error boundary): ${String(error)}${info.componentStack ?? ''}`);
+};
 // React recovered on its own (a concurrent render retried and succeeded), so this is not fatal -
 // but it is still a real error the app swallowed a first render over. RN keeps React's
 // defaultOnRecoverableError here, which reports it globally.
@@ -30,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.3.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.4.0",
-    "@symbiote-native/css-parser": "0.3.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.2.0",
-    "@symbiote-native/test-utils": "0.1.6"
+    "@symbiote-native/test-utils": "0.3.0",
+    "@symbiote-native/engine": "0.4.0"
   },
   "scripts": {
     "typecheck": "tsc --build",