@symbiote-native/engine 0.1.7 → 0.3.0

package/build/styles.d.ts

@@ -187,7 +187,11 @@ export interface IViewStyle {
     shadowRadius?: number;
     elevation?: number;
     transform?: ITransformProp[];
-    transformOrigin?: [string | number, string | number, string | number] | string;
+    transformOrigin?: [
+        string | number,
+        string | number,
+        string | number
+    ] | string;
     boxShadow?: IBoxShadowValue[] | string;
     filter?: IFilterFunction[] | string;
     experimental_backgroundImage?: IBackgroundImageValue[] | string;
@@ -207,6 +211,12 @@ export interface ITextStyle extends IViewStyle {
     textDecorationLine?: 'none' | 'underline' | 'line-through' | 'underline line-through';
     textDecorationColor?: IColorValue;
     textDecorationStyle?: 'solid' | 'double' | 'dotted' | 'dashed';
+    textShadowColor?: IColorValue;
+    textShadowOffset?: {
+        width: number;
+        height: number;
+    };
+    textShadowRadius?: number;
     fontVariant?: string[];
     writingDirection?: 'auto' | 'ltr' | 'rtl';
     includeFontPadding?: boolean;

package/build/surface.d.ts

@@ -1,5 +1,5 @@
 import type { IRootTag } from './fabric';
-import type { ISymbioteNode } from './node';
+import { type ISymbioteNode } from './node';
 export declare class SymbioteSurface {
     readonly rootTag: IRootTag;
     readonly children: ISymbioteNode[];

package/build/surface.js

@@ -4,6 +4,7 @@
 import { commitChildren } from './commit.js';
 import { dlog } from './debug.js';
 import { installEventHandler } from './events/index.js';
+import { markDirty } from './node.js';
 export class SymbioteSurface {
     rootTag;
     children = [];
@@ -46,6 +47,9 @@ export class SymbioteSurface {
             this.commit();
         });
     }
+    // Splices `parent.children` directly instead of going through node.ts's removeChild, so it
+    // owes the same dirty-mark - otherwise a node pulled out of a subtree here leaves that subtree
+    // looking clean and the commit walk skips right over the hole.
     detach(child) {
         const parent = child.parent;
         if (parent) {
@@ -53,6 +57,7 @@ export class SymbioteSurface {
             if (index >= 0)
                 parent.children.splice(index, 1);
             child.parent = undefined;
+            markDirty(parent);
             return;
         }
         const topIndex = this.children.indexOf(child);
@@ -62,6 +67,7 @@ export class SymbioteSurface {
 }
 export function createSurface(rootTag) {
     installEventHandler();
+    const surface = new SymbioteSurface(rootTag);
     dlog(`surface created root=${rootTag}`);
-    return new SymbioteSurface(rootTag);
+    return surface;
 }

package/build/tags.d.ts

@@ -1 +1,2 @@
 export declare function nextTag(): number;
+export declare const FIRST_TAG: number;

package/build/tags.js

@@ -2,9 +2,39 @@
 // for root tags). A tag is minted once when a node is first created and then
 // stays with it across clone-on-write commits (the clone keeps the family), so
 // this counter only ever moves forward: one tag per node, not per commit.
-let next = 2;
+import { dlog } from './debug.js';
+// WHY IT DOES NOT START AT 2. React's own Fabric renderer allocates tags the exact same way and
+// from the exact same seed — `let nextReactTag = 2; ... nextReactTag += 2` in
+// react-native-renderer/src/ReactFiberConfigFabric.js. We replace React as the APP's renderer, but
+// React is still in the bundle and still drives one Fabric surface of its own: **LogBox**. So the
+// first JS error in a symbiote app opens a redbox, React mints tag 2 for it, and Fabric aborts the
+// process on a Create for a tag the engine registered at app start:
+//
+//   *** Terminating app due to uncaught exception 'NSInternalInconsistencyException',
+//   reason: 'RCTComponentViewRegistry: Attempt to dequeue already registered component.'
+//   -[RCTComponentViewRegistry dequeueComponentViewWithComponentHandle:tag:]
+//   RCTPerformMountInstructions(...)
+//
+// `RCTComponentViewRegistry` is process-wide, not per-surface, so the two allocators must not
+// overlap. Diagnosed 2026-08-20 on examples/svelte: an `effect_update_depth_exceeded` on the API
+// Playground screen turned into a SIGABRT with no JS stack, because the redbox that would have
+// named the file killed the app instead of showing. Starting a whole surface's worth of tags above
+// React's seed keeps the redbox a redbox: LogBox needs a few hundred nodes, so it can never walk
+// 500k allocations up into this range.
+const REACT_LOGBOX_TAG_RESERVE = 1_000_000;
+let next = REACT_LOGBOX_TAG_RESERVE + 2;
+let announced = false;
 export function nextTag() {
+    if (!announced) {
+        announced = true;
+        // Printed once, next to the first `commit ... createNode tag=` line: a device log that shows a
+        // Fabric tag below this base was minted by React (LogBox), not by us.
+        dlog(`tag allocator base=${next} (React's own Fabric tags stay below it)`);
+    }
     const tag = next;
     next += 2;
     return tag;
 }
+// The lowest tag this allocator can ever hand out. Exported for the regression test that pins the
+// no-overlap invariant against React's own allocator; nothing at runtime reads it.
+export const FIRST_TAG = REACT_LOGBOX_TAG_RESERVE + 2;

package/build/touch-history.js

@@ -21,7 +21,9 @@ export const touchHistory = {
     mostRecentTimeStamp: 0,
 };
 function toFiniteNumber(value) {
-    return typeof value === 'number' && Number.isFinite(value) ? value : undefined;
+    return typeof value === 'number' && Number.isFinite(value)
+        ? value
+        : undefined;
 }
 // Pull a recordable touch out of an untyped entry. RN's getTouchIdentifier throws on
 // a null id; we skip instead, so events without touch geometry leave the bank untouched.
@@ -35,7 +37,12 @@ function normalizeTouch(raw) {
         return undefined;
     if (identifier < 0 || identifier > MAX_TOUCH_BANK)
         return undefined;
-    return { identifier, pageX, pageY, timestamp: toFiniteNumber(raw.timestamp) ?? 0 };
+    return {
+        identifier,
+        pageX,
+        pageY,
+        timestamp: toFiniteNumber(raw.timestamp) ?? 0,
+    };
 }
 // The changed touches for this frame (start/move/end), defensively read.
 function changedTouchesOf(nativeEvent) {

package/build/vibration/index.android.js

@@ -1,7 +1,6 @@
 // Vibration: Android build. Android has a native pattern scheduler, so the whole pattern
-// goes to native `vibrateByPattern(pattern, repeat)`: RN encodes "do not repeat" as -1
-// and "repeat from start" as 0. Everything else is the shared core. Metro picks this file
-// on an Android host.
+// goes to native `vibrateByPattern(pattern, repeat)` (repeat encoding below). Everything
+// else is the shared core. Metro picks this file on an Android host.
 //
 // device-verify-pending: the `Vibration` name and the `vibrateByPattern` routing are
 // confirmed from RN source but not yet exercised on a real Android host: only a

package/build/vibration/index.ios.js

@@ -3,7 +3,7 @@
 // Everything else (the single-number buzz, cancel, the module resolver) is the shared
 // core. Metro picks this file on an iOS host; the base vibration.ts re-exports it for
 // web/headless.
-import { createVibration, DEFAULT_VIBRATION_LENGTH } from './shared.js';
+import { createVibration, DEFAULT_VIBRATION_LENGTH, } from './shared.js';
 // JS scheduler state, mirroring RN's _vibrating / _id. `scheduleId` guards against a
 // stale timer from a previous run firing into a new one.
 let vibrating = false;

package/build/view-config.js

@@ -55,7 +55,12 @@ const TEXT_INPUT_EVENTS = [
     'selectionChange',
     'contentSizeChange',
 ];
-const MODAL_EVENTS = ['show', 'dismiss', 'requestClose', 'orientationChange'];
+const MODAL_EVENTS = [
+    'show',
+    'dismiss',
+    'requestClose',
+    'orientationChange',
+];
 // A scroll view's events are the same on both axes and both platforms; only the native
 // NAME differs (iOS RCTScrollView for both; Android RCTScrollView vertical vs
 // AndroidHorizontalScrollView horizontal). Declared once, keyed under each name below. The
@@ -78,7 +83,14 @@ const TEXT_EVENTS = ['textLayout'];
 // SymbioteNode.component (what createNode is called with). A component absent here
 // still gets BASE_EVENTS, so a new primitive has working press/layout for free.
 const COMPONENT_EVENTS = {
-    RCTImageView: ['loadStart', 'load', 'loadEnd', 'error', 'progress', 'partialLoad'],
+    RCTImageView: [
+        'loadStart',
+        'load',
+        'loadEnd',
+        'error',
+        'progress',
+        'partialLoad',
+    ],
     RCTScrollView: SCROLL_EVENTS,
     AndroidHorizontalScrollView: SCROLL_EVENTS,
     RCTSinglelineTextInputView: TEXT_INPUT_EVENTS,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbiote-native/engine",
-  "version": "0.1.7",
+  "version": "0.3.0",
   "description": "SymbioteNative's retained shadow-tree engine — clone-on-write commit path + event normalization over React Native Fabric, shared by every framework adapter.",
   "license": "MIT",
   "repository": {
@@ -33,7 +33,7 @@
     "react-native": ">=0.86"
   },
   "devDependencies": {
-    "@symbiote-native/test-utils": "0.1.6"
+    "@symbiote-native/test-utils": "0.2.0"
   },
   "scripts": {
     "typecheck": "tsc --build",

package/build/animated/interpolation-node.d.ts

@@ -1,15 +0,0 @@
-import { AnimatedNode, AnimatedWithChildren } from './graph';
-import { type IInterpolationConfig } from './interpolation';
-import type { INativeNodeConfig, IPlatformConfig } from './native/native-animated';
-export declare class AnimatedInterpolation extends AnimatedWithChildren {
-    private readonly parent;
-    private readonly config;
-    private interpolation;
-    constructor(parent: AnimatedNode, config: IInterpolationConfig);
-    private getInterpolation;
-    __getValue(): number | string;
-    __attach(): void;
-    __detach(): void;
-    __makeNative(platformConfig?: IPlatformConfig): void;
-    __getNativeConfig(): INativeNodeConfig;
-}

package/build/animated/interpolation-node.js

@@ -1,58 +0,0 @@
-// AnimatedInterpolation: a graph node that maps its parent's numeric value
-// through an interpolation. Ported from RN's AnimatedInterpolation.js: numeric,
-// string-with-units, and color output ranges (the value graph; native config
-// removed). Platform (Native) colors stay out of scope, color.ts defers them.
-import { AnimatedNode, AnimatedWithChildren, registerInterpolationFactory } from './graph.js';
-import { checkValidRanges, createInterpolation } from './interpolation.js';
-export class AnimatedInterpolation extends AnimatedWithChildren {
-    parent;
-    config;
-    interpolation;
-    constructor(parent, config) {
-        super();
-        this.parent = parent;
-        this.config = config;
-        // Validate eagerly so a bad range fails at construction, not first frame.
-        checkValidRanges(config.inputRange, config.outputRange);
-    }
-    getInterpolation() {
-        if (this.interpolation === undefined) {
-            this.interpolation = createInterpolation(this.config);
-        }
-        return this.interpolation;
-    }
-    __getValue() {
-        const parentValue = this.parent.__getValue();
-        if (typeof parentValue !== 'number') {
-            throw new Error('Cannot interpolate an input which is not a number');
-        }
-        return this.getInterpolation()(parentValue);
-    }
-    __attach() {
-        this.parent.__addChild(this);
-        super.__attach();
-    }
-    __detach() {
-        this.parent.__removeChild(this);
-        super.__detach();
-    }
-    // Make the upstream value native first, so the parent->interpolation edge can be
-    // wired when this node is reached from a leaf rather than from the value.
-    __makeNative(platformConfig) {
-        this.parent.__makeNative(platformConfig);
-        super.__makeNative(platformConfig);
-    }
-    __getNativeConfig() {
-        return {
-            type: 'interpolation',
-            inputRange: this.config.inputRange,
-            outputRange: this.config.outputRange,
-            extrapolateLeft: this.config.extrapolateLeft ?? this.config.extrapolate ?? 'extend',
-            extrapolateRight: this.config.extrapolateRight ?? this.config.extrapolate ?? 'extend',
-        };
-    }
-}
-// Hand graph.ts's AnimatedNode.interpolate() the real constructor at module load,
-// so every node subclass's base-class interpolate() produces an actual
-// AnimatedInterpolation without graph.ts ever value-importing this module.
-registerInterpolationFactory((parent, config) => new AnimatedInterpolation(parent, config));

package/build/style-registry/scope/index.d.ts

@@ -1,3 +0,0 @@
-export type IClassToggleMap = Record<string, boolean | undefined>;
-export type IScopableClassValue = string | IClassToggleMap | Array<string | IClassToggleMap> | undefined | null;
-export declare function scopeClassName(value: IScopableClassValue, localNames: ReadonlySet<string>, scopeId: string): IScopableClassValue;

package/build/style-registry/scope/index.js

@@ -1,41 +0,0 @@
-// Vue `<style scoped>` class-name rewriter. Distinct responsibility from the sibling
-// ./index.ts (the CSS class -> style registry): this module does pure NAME rewriting,
-// no registry lookup, no CSS parsing. It runs at the compiled call site of a Vue SFC's
-// scoped-style template - `adapters/vue/metro-vue-transformer.cjs` emits calls to
-// scopeClassName (imported there as `__scopeClass`) - BEFORE Vue's own normalizeClass()
-// collapses string/object/array `class` values to a final string, so it must pre-process
-// all three shapes normalizeClass understands. resolveClassName in ./index.ts still does
-// the actual style lookup, unchanged, against the rewritten (possibly suffixed) name.
-import { kebabToCamel } from '../index.js';
-// Suffixes every class token that this file's scoped block locally defines with
-// `__${scopeId}`, leaving unrecognized tokens (globals, external classes) untouched.
-export function scopeClassName(value, localNames, scopeId) {
-    if (value === undefined || value === null)
-        return value;
-    if (Array.isArray(value)) {
-        return value.map(item => scopeClassEntry(item, localNames, scopeId));
-    }
-    return scopeClassEntry(value, localNames, scopeId);
-}
-// A token arrives as either the camelCase registry key (`sectionLabel`) or its kebab-case
-// authoring form (`section-label`) - normalize to camelCase FIRST, then decide scoping, so
-// `localNames` (always camelCase, built from the css-parser's registered keys) recognizes a
-// kebab-written token. The emitted (possibly suffixed) name is always the camelCase form.
-function scopeToken(token, localNames, scopeId) {
-    const camelToken = kebabToCamel(token);
-    return localNames.has(camelToken) ? `${camelToken}__${scopeId}` : camelToken;
-}
-function scopeClassEntry(value, localNames, scopeId) {
-    if (typeof value === 'object') {
-        const scoped = {};
-        for (const [name, enabled] of Object.entries(value)) {
-            scoped[scopeToken(name, localNames, scopeId)] = enabled;
-        }
-        return scoped;
-    }
-    return value
-        .split(/\s+/)
-        .filter(Boolean)
-        .map(token => scopeToken(token, localNames, scopeId))
-        .join(' ');
-}

package/build/touch-history/index.d.ts

@@ -1,23 +0,0 @@
-interface ITouchRecord {
-    touchActive: boolean;
-    startPageX: number;
-    startPageY: number;
-    startTimeStamp: number;
-    currentPageX: number;
-    currentPageY: number;
-    currentTimeStamp: number;
-    previousPageX: number;
-    previousPageY: number;
-    previousTimeStamp: number;
-}
-interface ITouchHistory {
-    touchBank: ITouchRecord[];
-    numberActiveTouches: number;
-    indexOfSingleActiveTouch: number;
-    mostRecentTimeStamp: number;
-}
-export declare const touchHistory: ITouchHistory;
-export declare function recordTouchTrack(kind: 'start' | 'move' | 'end', nativeEvent: Record<string, unknown>): void;
-export declare function resetTouchHistory(): void;
-export declare function attachTouchHistory(nativeEvent: Record<string, unknown>): void;
-export {};

package/build/touch-history/index.js

@@ -1,150 +0,0 @@
-// Per-touch position/time tracking, ported from RN's
-// react-native-renderer/.../legacy-events/ResponderTouchHistoryStore.js. PanResponder's
-// multitouch dx/vx math needs each touch's own previous->current delta (RN counts only
-// touches that moved since `_accountsForMovesUpTo`), which a grant-relative centroid of
-// ALL live touches cannot reconstruct. We maintain the bank as touches flow and ATTACH
-// `touchHistory` onto the nativeEvent reaching responder handlers, exactly how
-// ResponderEventPlugin.js sets `*.touchHistory`.
-//
-// events/index.ts consumes only this file's public surface (recordTouchTrack,
-// attachTouchHistory, resetTouchHistory, touchHistory); everything else here is a
-// private implementation detail of the bank.
-import { isRecord } from '../type-guards.js';
-// RN's bank is indexed by touch identifier and warns above 20; we never warn (headless
-// events may carry larger or absent ids), we just skip anything out of a sane range.
-const MAX_TOUCH_BANK = 20;
-const touchBank = [];
-export const touchHistory = {
-    touchBank,
-    numberActiveTouches: 0,
-    indexOfSingleActiveTouch: -1,
-    mostRecentTimeStamp: 0,
-};
-function toFiniteNumber(value) {
-    return typeof value === 'number' && Number.isFinite(value) ? value : undefined;
-}
-// Pull a recordable touch out of an untyped entry. RN's getTouchIdentifier throws on
-// a null id; we skip instead, so events without touch geometry leave the bank untouched.
-function normalizeTouch(raw) {
-    if (!isRecord(raw))
-        return undefined;
-    const identifier = toFiniteNumber(raw.identifier);
-    const pageX = toFiniteNumber(raw.pageX);
-    const pageY = toFiniteNumber(raw.pageY);
-    if (identifier === undefined || pageX === undefined || pageY === undefined)
-        return undefined;
-    if (identifier < 0 || identifier > MAX_TOUCH_BANK)
-        return undefined;
-    return { identifier, pageX, pageY, timestamp: toFiniteNumber(raw.timestamp) ?? 0 };
-}
-// The changed touches for this frame (start/move/end), defensively read.
-function changedTouchesOf(nativeEvent) {
-    const raw = nativeEvent.changedTouches;
-    if (!Array.isArray(raw))
-        return [];
-    const out = [];
-    for (const entry of raw) {
-        const touch = normalizeTouch(entry);
-        if (touch !== undefined)
-            out.push(touch);
-    }
-    return out;
-}
-// Count of all touches still down (RN reads nativeEvent.touches.length directly).
-function activeTouchCount(nativeEvent) {
-    const raw = nativeEvent.touches;
-    return Array.isArray(raw) ? raw.length : 0;
-}
-function recordTouchStart(touch) {
-    const record = touchBank[touch.identifier];
-    if (record) {
-        record.touchActive = true;
-        record.startPageX = touch.pageX;
-        record.startPageY = touch.pageY;
-        record.startTimeStamp = touch.timestamp;
-        record.currentPageX = touch.pageX;
-        record.currentPageY = touch.pageY;
-        record.currentTimeStamp = touch.timestamp;
-        record.previousPageX = touch.pageX;
-        record.previousPageY = touch.pageY;
-        record.previousTimeStamp = touch.timestamp;
-    }
-    else {
-        touchBank[touch.identifier] = {
-            touchActive: true,
-            startPageX: touch.pageX,
-            startPageY: touch.pageY,
-            startTimeStamp: touch.timestamp,
-            currentPageX: touch.pageX,
-            currentPageY: touch.pageY,
-            currentTimeStamp: touch.timestamp,
-            previousPageX: touch.pageX,
-            previousPageY: touch.pageY,
-            previousTimeStamp: touch.timestamp,
-        };
-    }
-    touchHistory.mostRecentTimeStamp = touch.timestamp;
-}
-// Move and end share the previous<-current shift; only `touchActive` differs.
-function shiftTouchRecord(touch, active) {
-    const record = touchBank[touch.identifier];
-    if (!record)
-        return;
-    record.touchActive = active;
-    record.previousPageX = record.currentPageX;
-    record.previousPageY = record.currentPageY;
-    record.previousTimeStamp = record.currentTimeStamp;
-    record.currentPageX = touch.pageX;
-    record.currentPageY = touch.pageY;
-    record.currentTimeStamp = touch.timestamp;
-    touchHistory.mostRecentTimeStamp = touch.timestamp;
-}
-function arrayFirst(value) {
-    return Array.isArray(value) ? value[0] : undefined;
-}
-// Maintain the bank as a touch frame flows. Mirrors RN's recordTouchTrack: moveish
-// shifts records, startish records + recomputes numberActiveTouches, endish marks the
-// record inactive + rescans for the single remaining touch. `kind` is the touch phase.
-export function recordTouchTrack(kind, nativeEvent) {
-    if (kind === 'move') {
-        for (const touch of changedTouchesOf(nativeEvent))
-            shiftTouchRecord(touch, true);
-        return;
-    }
-    if (kind === 'start') {
-        for (const touch of changedTouchesOf(nativeEvent))
-            recordTouchStart(touch);
-        touchHistory.numberActiveTouches = activeTouchCount(nativeEvent);
-        if (touchHistory.numberActiveTouches === 1) {
-            const first = normalizeTouch(arrayFirst(nativeEvent.touches));
-            touchHistory.indexOfSingleActiveTouch = first?.identifier ?? -1;
-        }
-        return;
-    }
-    for (const touch of changedTouchesOf(nativeEvent))
-        shiftTouchRecord(touch, false);
-    touchHistory.numberActiveTouches = activeTouchCount(nativeEvent);
-    if (touchHistory.numberActiveTouches === 1) {
-        for (let i = 0; i < touchBank.length; i++) {
-            const record = touchBank[i];
-            if (record !== undefined && record.touchActive) {
-                touchHistory.indexOfSingleActiveTouch = i;
-                break;
-            }
-        }
-    }
-}
-// Drop all touch state. Called on a fully-released / cancelled gesture so a stale bank
-// never leaks geometry into the next gesture's first frame.
-export function resetTouchHistory() {
-    touchBank.length = 0;
-    touchHistory.numberActiveTouches = 0;
-    touchHistory.indexOfSingleActiveTouch = -1;
-    touchHistory.mostRecentTimeStamp = 0;
-}
-// Attach the live touch history onto the event the responder handlers receive, matching
-// ResponderEventPlugin.js (`grantEvent.touchHistory = ...`, etc.). PanResponder reads
-// it for the per-touch dx/vx math; handlers that ignore it are unaffected.
-export function attachTouchHistory(nativeEvent) {
-    nativeEvent.touchHistory = touchHistory;
-}

package/build/type-guards/index.d.ts

@@ -1,4 +0,0 @@
-export declare function isRecord(value: unknown): value is Record<string, unknown>;
-export declare function isBoolean(value: unknown): value is boolean;
-export declare function isNumber(value: unknown): value is number;
-export declare function isString(value: unknown): value is string;

package/build/type-guards/index.js

@@ -1,15 +0,0 @@
-// Runtime guards to narrow `unknown` at trust boundaries (native payloads, ViewConfig
-// attributes, style values) without an `as` cast. `isRecord` excludes arrays - most
-// call sites mean "a native payload keyed by string," never a list.
-export function isRecord(value) {
-    return typeof value === 'object' && value !== null && !Array.isArray(value);
-}
-export function isBoolean(value) {
-    return typeof value === 'boolean';
-}
-export function isNumber(value) {
-    return typeof value === 'number';
-}
-export function isString(value) {
-    return typeof value === 'string';
-}