@symbiote-native/engine 0.1.7 → 0.2.0

package/build/animated/value.js

@@ -119,13 +119,12 @@ export class AnimatedValue extends AnimatedWithChildren {
             this.offset = offset;
         }
     }
-    // Own the native-driver "start" handshake end-to-end: make this value native, mint
+    // Owns the native-driver "start" handshake end-to-end: make this value native, mint
     // its tag, hand the curve to the native module, and on completion sync the JS value
-    // (no re-flush to bound leaves' native side; native already moved the view). A
-    // driver (BaseAnimation.startNativeIfNeeded) supplies only what IT owns: the curve
-    // config, its own animation id, its platform bag, and its own end callback, never
-    // touching __makeNative / __getNativeTag / __onNativeUpdate / flushValue directly.
-    // Information Expert: this value is the one object that actually holds those internals.
+    // (no re-flush; native already moved the view). The driver (BaseAnimation.
+    // startNativeIfNeeded) supplies only what it owns - curve config, animation id,
+    // platform bag, end callback - never touching __makeNative / __getNativeTag /
+    // __onNativeUpdate / flushValue directly; those internals live here.
     __startNativeAnimation(config, nativeId, onEnd, platformConfig) {
         this.__makeNative(platformConfig);
         nativeAnimated.startAnimatingNode(nativeId, this.__getNativeTag(), config, result => {
@@ -164,10 +163,16 @@ export class AnimatedValue extends AnimatedWithChildren {
             this.tracking = null;
         }
     }
-    // Stop any animation and reset to the original value.
+    // Stop any animation and reset to the original value. The native graph keeps its OWN copy of
+    // the value, so a native-driven node has to be told as well - otherwise the reset lands in JS
+    // only and the view stays wherever the animation left it. setValue above pushes for the same
+    // reason; RN pushes here too (Libraries/Animated/nodes/AnimatedValue.js:285).
     resetAnimation(callback) {
         this.stopAnimation(callback);
         this.value = this.startingValue;
+        if (this.isNative) {
+            nativeAnimated.setAnimatedNodeValue(this.__getNativeTag(), this.startingValue);
+        }
     }
     // Drive this value with an animation. Typically called by Animated.timing /
     // spring / decay rather than directly.

package/build/commit.js

@@ -20,9 +20,7 @@ import { nextTag } from './tags.js';
 import { registerPostCommit, runPostCommitHooks } from './post-commit.js';
 import { fabricProps } from './fabric-props.js';
 import { isRecord } from './type-guards.js';
-// processColor/setColorProcessor now live in ./platform-color (the stable color-processing
-// leaf every color-touching module imports from); re-exported here so nothing outside this
-// module needs to change its import path.
+// Re-exported from ./platform-color so callers don't need to change their import path.
 export { processColor, setColorProcessor } from './platform-color/index.js';
 // Per-commit work counters, surfaced via dlog so a device run can prove the
 // engine is incremental (created=0 with clones after the first mount).
@@ -173,8 +171,6 @@ function reconcile(slot, node, rootTag, hasTextAncestor, renderableParent, force
     const props = fabricProps(node);
     const childInText = node.isText || hasTextAncestor;
     const committed = mirror.get(node);
-    // The children that actually reach Fabric. Anchors are filtered out here so the
-    // whole walk (child-set emission, identity diff, mirror) is anchor-blind.
     const kids = renderableChildren(node);
     // First mount, or the view kind flipped (RCTText <-> RCTVirtualText when a
     // <Text> moves in or out of another <Text>): a different native component

package/build/debug.d.ts

@@ -2,4 +2,4 @@ declare global {
     var __SYMBIOTE_DEBUG__: boolean | undefined;
 }
 export declare function isDebug(): boolean;
-export declare function dlog(message: string): void;
+export declare function dlog(message: string | (() => string)): void;

package/build/debug.js

@@ -5,7 +5,13 @@
 //     Metro start (--reset-cache), not a rebuild.
 //   - runtime: globalThis.__SYMBIOTE_DEBUG__ = true, an escape hatch for hosts
 //     where the env isn't reachable.
-// Production with neither set pays one property read per call and nothing else.
+// Production with neither set pays one property read per call and nothing else -
+// but ONLY if the caller does not build the message itself first. A template
+// literal is evaluated at the CALL SITE, before dlog can decide anything, so a
+// `dlog(\`… ${JSON.stringify(x)}\`)` on a per-frame path costs its full price with
+// logging off. On a hot path (a getter Angular re-reads every change-detection
+// pass, an Animated reconcile, a scroll-driven apply) pass a THUNK instead:
+// `dlog(() => \`…\`)` - it is only called once the switch is on.
 function envEnabled() {
     return typeof process !== 'undefined' && process.env.DEBUG === '1';
 }
@@ -13,6 +19,7 @@ export function isDebug() {
     return globalThis.__SYMBIOTE_DEBUG__ === true || envEnabled();
 }
 export function dlog(message) {
-    if (isDebug())
-        console.log(`[symbiote] ${message}`);
+    if (!isDebug())
+        return;
+    console.log(`[symbiote] ${typeof message === 'function' ? message() : message}`);
 }

package/build/events/index.js

@@ -515,7 +515,6 @@ function bubble(target, listenerName, nativeEvent) {
     while (node) {
         const listener = isAnchor(node) ? undefined : node.listeners?.get(listenerName);
         if (listener) {
-            // engine owner adds currentTarget + stopPropagation to SymbioteEvent
             const event = {
                 type: listenerName,
                 target,
@@ -535,7 +534,6 @@ function deliverDirect(target, listenerName, nativeEvent) {
     const listener = target.listeners?.get(listenerName);
     if (!listener)
         return;
-    // engine owner adds currentTarget + stopPropagation to SymbioteEvent
     listener({
         type: listenerName,
         target,

package/build/index.d.ts

@@ -37,11 +37,13 @@ export type { IPlatformStatic, IPlatformOSType, IPlatformSelectSpec } from './pl
 export type { IPlatformConstantsIOS } from './platform/index.ios';
 export type { IPlatformConstantsAndroid } from './platform/index.android';
 export { dlog, isDebug } from './debug';
+export { reportUncaughtError } from './report-error';
+export type { IUncaughtErrorInfo } from './report-error';
 export { getNativeModule, getEnforcingNativeModule } from './native-modules';
 export { installDeviceEventHub, NativeEventEmitter, setDeviceEventSource } from './native-events';
 export type { IEventSubscription, IEventEmitterModule, INativeEventListener, IDeviceEventSource, } from './native-events';
-export { AnimatedNode, AnimatedWithChildren, AnimatedValue, AnimatedValueXY, AnimatedColor, AnimatedInterpolation, AnimatedAddition, AnimatedSubtraction, AnimatedMultiplication, AnimatedDivision, AnimatedModulo, AnimatedDiffClamp, AnimatedEvent, add, subtract, multiply, divide, modulo, diffClamp, event, forkEvent, unforkEvent, attachNativeEvent, attachNativeEventHandler, flushValue, Easing, createNumericInterpolation, checkValidRanges, TimingAnimation, SpringAnimation, DecayAnimation, AnimatedTracking, timing, spring, decay, parallel, sequence, stagger, loop, delay, nativeAnimated, isNativeAnimatedAvailable, AnimatedProps, AnimatedStyle, AnimatedTransform, AnimatedMock, reduceProps, isAnimatedNode, readPassthroughStyle, resolveHostNode, } from './animated';
-export type { IValueXY, IRgbaValue, IColorInput, IEventConfig, IEventListener, IAnimatedEventHandler, INativeEventAttachment, IValueListener, IEasingFunction, IInterpolationConfig, IExtrapolateType, IAnimation, IEndCallback, IEndResult, ICompositeAnimation, ITimingConfig, ISpringConfig, IDecayConfig, IParallelConfig, ILoopAnimationConfig, INativeNodeConfig, INativeAnimationConfig, INativeEventMapping, IPlatformConfig, } from './animated';
+export { AnimatedNode, AnimatedWithChildren, AnimatedValue, AnimatedValueXY, AnimatedColor, AnimatedInterpolation, AnimatedAddition, AnimatedSubtraction, AnimatedMultiplication, AnimatedDivision, AnimatedModulo, AnimatedDiffClamp, AnimatedEvent, add, subtract, multiply, divide, modulo, diffClamp, event, forkEvent, unforkEvent, attachNativeEvent, attachNativeEventHandler, flushValue, Easing, createNumericInterpolation, checkValidRanges, TimingAnimation, SpringAnimation, DecayAnimation, AnimatedTracking, timing, spring, decay, parallel, sequence, stagger, loop, delay, nativeAnimated, isNativeAnimatedAvailable, AnimatedProps, createAnimatedLeafLifecycle, AnimatedStyle, AnimatedTransform, AnimatedMock, reduceProps, isAnimatedNode, readPassthroughStyle, resolveHostNode, } from './animated';
+export type { IAnimatedLeafLifecycle, IValueXY, IRgbaValue, IColorInput, IEventConfig, IEventListener, IAnimatedEventHandler, INativeEventAttachment, IValueListener, IEasingFunction, IInterpolationConfig, IExtrapolateType, IAnimation, IEndCallback, IEndResult, ICompositeAnimation, ITimingConfig, ISpringConfig, IDecayConfig, IParallelConfig, ILoopAnimationConfig, INativeNodeConfig, INativeAnimationConfig, INativeEventMapping, IPlatformConfig, } from './animated';
 export { getSlot } from './fabric';
 export type { IFabricSlot, IFabricNode, IFabricChildSet, IFabricProps, IFabricEventHandler, IRootTag, IMeasureOnSuccess, IMeasureInWindowOnSuccess, IMeasureLayoutOnSuccess, } from './fabric';
 export { Alert } from './alert';

package/build/index.js

@@ -37,9 +37,10 @@ export { registerStyles, resolveClassName, clearGlobalStyles, isClassNameValue,
 export { scopeClassName } from './style-registry/scope.js';
 export { Platform } from './platform';
 export { dlog, isDebug } from './debug.js';
+export { reportUncaughtError } from './report-error.js';
 export { getNativeModule, getEnforcingNativeModule } from './native-modules/index.js';
 export { installDeviceEventHub, NativeEventEmitter, setDeviceEventSource } from './native-events.js';
-export { AnimatedNode, AnimatedWithChildren, AnimatedValue, AnimatedValueXY, AnimatedColor, AnimatedInterpolation, AnimatedAddition, AnimatedSubtraction, AnimatedMultiplication, AnimatedDivision, AnimatedModulo, AnimatedDiffClamp, AnimatedEvent, add, subtract, multiply, divide, modulo, diffClamp, event, forkEvent, unforkEvent, attachNativeEvent, attachNativeEventHandler, flushValue, Easing, createNumericInterpolation, checkValidRanges, TimingAnimation, SpringAnimation, DecayAnimation, AnimatedTracking, timing, spring, decay, parallel, sequence, stagger, loop, delay, nativeAnimated, isNativeAnimatedAvailable, AnimatedProps, AnimatedStyle, AnimatedTransform, AnimatedMock, reduceProps, isAnimatedNode, readPassthroughStyle, resolveHostNode, } from './animated/index.js';
+export { AnimatedNode, AnimatedWithChildren, AnimatedValue, AnimatedValueXY, AnimatedColor, AnimatedInterpolation, AnimatedAddition, AnimatedSubtraction, AnimatedMultiplication, AnimatedDivision, AnimatedModulo, AnimatedDiffClamp, AnimatedEvent, add, subtract, multiply, divide, modulo, diffClamp, event, forkEvent, unforkEvent, attachNativeEvent, attachNativeEventHandler, flushValue, Easing, createNumericInterpolation, checkValidRanges, TimingAnimation, SpringAnimation, DecayAnimation, AnimatedTracking, timing, spring, decay, parallel, sequence, stagger, loop, delay, nativeAnimated, isNativeAnimatedAvailable, AnimatedProps, createAnimatedLeafLifecycle, AnimatedStyle, AnimatedTransform, AnimatedMock, reduceProps, isAnimatedNode, readPassthroughStyle, resolveHostNode, } from './animated/index.js';
 export { getSlot } from './fabric.js';
 // Imperative runtime modules: framework-agnostic native-bridge consumers (no visual, no
 // lifecycle), moved here from @symbiote-native/react so every adapter re-exports the SAME module.

package/build/layout-animation/index.js

@@ -148,7 +148,6 @@ function configureNext(config, onAnimationDidEnd, onAnimationDidFail) {
         onAnimationDidEnd?.();
     };
     dlog(`LayoutAnimation.configureNext: dispatching config (duration=${config.duration})`);
-    // Default to a no-op when the caller doesn't supply one.
     manager.configureNextLayoutAnimation(config, onComplete, onAnimationDidFail ?? (() => { }));
 }
 // ---- the LayoutAnimation facade ------------------------------------------

package/build/process-font-variant.js

@@ -12,6 +12,5 @@ export function processFontVariant(fontVariant) {
     if (typeof fontVariant === 'string') {
         return fontVariant.split(' ').filter(Boolean);
     }
-    // Neither an array nor a string: nothing to split, hand back an empty variant list.
     return [];
 }

package/build/process-transform/index.js

@@ -1,19 +1,15 @@
 // JS-side port of RN's processTransform (Libraries/StyleSheet/processTransform.js).
-// Same root cause as transformOrigin/boxShadow: ReactNativeStyleAttributes registers
-// `transform` with `nativeCSSParsing ? true : {process: processTransform}`, and
-// enableNativeCSSParsing() DEFAULTS TO FALSE, so RN's stock path runs processTransform
-// IN JS. It only does work for a STRING input (parses the CSS string into the entry
-// array); an ARRAY input is returned UNCHANGED. symbiote forwarded a raw string, which
-// Android native cast to ReadableArray and crashed with
-// `java.lang.String cannot be cast to com.facebook.react.bridge.ReadableArray`. This
-// restores the missing JS parse so native always receives the entry array.
+// Same root cause as transformOrigin/boxShadow: RN only parses `transform` in JS when
+// nativeCSSParsing is off (the default), and only for a STRING input - an ARRAY is
+// returned unchanged. symbiote forwarded a raw string once, which Android native cast
+// to ReadableArray and crashed (`String cannot be cast to ReadableArray`). This
+// restores the missing JS parse.
 //
-// CRITICAL: the animated / sticky-header hot path produces transform ARRAYS and flows
-// through commit's processValue on every flush, so the array branch MUST return the
-// byte-identical reference (no decompose, no clone). RN's only array-path work is
-// _validateTransforms, which is __DEV__-only and THROWS via invariant; we never throw
-// into the commit path, so we run a non-throwing check that dlogs and still returns the
-// array unchanged (matching the boxShadow/transformOrigin idiom).
+// CRITICAL: the animated / sticky-header hot path produces transform ARRAYS on every
+// commit flush, so the array branch MUST return the byte-identical reference (no
+// decompose, no clone). RN's only array-path check, _validateTransforms, is __DEV__-only
+// and throws via invariant; we never throw in commit, so we dlog instead and still
+// return the array unchanged.
 import { dlog } from '../debug.js';
 // RN processTransform.js:28: matches each `name(args)` in the CSS string.
 const TRANSFORM_REGEX = /(\w+)\(([^)]+)\)/g;
@@ -78,16 +74,14 @@ function getKeyAndValueFromCSSTransform(key, args) {
             return { key, value: isNaN(Number(args)) ? args : Number(args) };
     }
 }
-// RN processTransform.js:24-50. STRING input is parsed into the entry array; ARRAY input
-// is returned UNCHANGED (RN's only array work, _validateTransforms, is __DEV__-only and
-// throws; we never throw, so we skip it and run a non-throwing dlog sanity check).
+// RN processTransform.js:24-50. String input is parsed into the entry array; array
+// input is returned unchanged (see file header for why).
 export function processTransform(transform) {
     if (transform == null) {
         return [];
     }
     if (typeof transform !== 'string') {
-        // Hot path: animated / sticky-header transforms arrive here as arrays. Return the
-        // same reference (no decompose, no clone) so the flush is a no-op.
+        // Hot path: return the same reference, no clone (see file header).
         warnInvalidTransforms(transform);
         return transform;
     }

package/build/report-error.d.ts

@@ -0,0 +1,5 @@
+export type IUncaughtErrorInfo = {
+    readonly origin: string;
+    readonly componentStack?: string | null;
+};
+export declare function reportUncaughtError(value: unknown, info: IUncaughtErrorInfo): void;

package/build/report-error.js

@@ -0,0 +1,60 @@
+// Hand an error to the host the way React Native itself does, for the seams where an adapter
+// catches something its framework would otherwise have surfaced on its own.
+//
+// RN routes an uncaught render error through ReactFiberErrorDialog -> ExceptionsManager
+// (Libraries/Core/ReactFiberErrorDialog.js), which is reachable only by a deep path into RN's
+// Libraries. `global.ErrorUtils` is the same surface through the documented global that
+// @react-native/js-polyfills installs before any module evaluates - RN's own
+// Libraries/vendor/core/ErrorUtils.js is nothing but `export default global.ErrorUtils`. Off a
+// native host (vitest, node smokes) the global is absent and console.error is the whole channel.
+//
+// This is NOT the dlog channel. dlog is DEBUG-gated and therefore the developer's; an error that
+// blanked the screen has to reach the app whether or not anyone turned diagnostics on.
+// Read off globalThis through Reflect rather than named as an identifier, and deliberately NOT
+// declared in an ambient block: react-native ships its own `const ErrorUtils: ErrorUtils` in
+// src/types/globals.d.ts, so a `declare global { var ErrorUtils }` here redeclares it (TS2451) for
+// every package whose tsconfig pulls in RN's types - the engine's own does not, so it typechecks
+// clean here and breaks ngc downstream. RN's declared shape also lists only the two
+// get/setGlobalHandler members, not reportError, which the polyfill does install.
+function nativeReporter() {
+    const utils = Reflect.get(globalThis, 'ErrorUtils');
+    if (typeof utils !== 'object' || utils === null)
+        return null;
+    const report = Reflect.get(utils, 'reportError');
+    if (typeof report !== 'function')
+        return null;
+    return error => {
+        Reflect.apply(report, utils, [error]);
+    };
+}
+// A throw is not required to be an Error - a string, or null, reaches here just as easily, and
+// the host's reporter wants something with a message and a stack. RN wraps the same way, via
+// SyntheticError.
+function toError(value, origin) {
+    if (value instanceof Error)
+        return value;
+    return new Error(`${origin}: ${String(value)}`);
+}
+export function reportUncaughtError(value, info) {
+    const error = toError(value, info.origin);
+    if (info.componentStack) {
+        // LogBox reads these two off the error to render the component frames; RN's own
+        // ReactFiberErrorDialog sets exactly the same pair, in a try/catch because a frozen or
+        // sealed error still deserves to be reported, just without the frames.
+        try {
+            Object.assign(error, { componentStack: info.componentStack, isComponentError: true });
+        }
+        catch {
+            // Reported below regardless.
+        }
+    }
+    const report = nativeReporter();
+    if (report !== null) {
+        // Exactly one channel, never both: RN routes console.error into LogBox as well, so logging
+        // here too would double-report every error. Upstream returns false from showErrorDialog for
+        // this same reason (Libraries/Core/ReactFiberErrorDialog.js:57).
+        report(error);
+        return;
+    }
+    console.error(`[symbiote] ${info.origin}:`, error);
+}

package/build/status-bar/index.android.js

@@ -4,12 +4,11 @@
 // setColor/setTranslucent, same module name ('StatusBarManager'). Metro picks this on an
 // Android host; iOS keeps its own shape. Each adapter wraps these with its declarative component.
 //
-// History: this used to be a no-op. Driving the window flags from our bridgeless surface
-// blanked the app: a status-bar relayout triggered stopSurface, which threw "Global was
-// not installed" because RN installs global.RN$stopSurface from its own renderer, which we
-// replace. Now that render.ts installs RN$stopSurface and tears surfaces down cleanly, the
-// relayout survives and the bar updates without blanking (verified on device: show/hide +
-// light/dark text). See render.ts's installStopSurfaceGlobal.
+// Driving window flags from our bridgeless surface used to blank the app: a status-bar
+// relayout triggered stopSurface, which threw "Global was not installed" because RN's
+// own renderer installs global.RN$stopSurface and we replace that renderer. Fixed by
+// render.ts installing RN$stopSurface itself (see installStopSurfaceGlobal) - verified
+// on device: show/hide + light/dark text survive the relayout without blanking.
 import { getNativeModule } from '../native-modules/index.js';
 import { dlog } from '../debug.js';
 import { processColor } from '../platform-color/index.js';

package/build/style-registry/index.js

@@ -11,11 +11,27 @@
 // can write EITHER `class="sectionLabel"` OR `class="section-label"` - resolveOne below
 // falls back to the kebab->camel form on a miss, since authors don't reliably write the
 // exact camelCase key.
-// Compound lookup tries every ordering of 2-4 space-separated class parts joined by
-// '.' (e.g. "btn primary" -> "btn.primary" / "primary.btn") before falling back to a
-// per-class merge, mirroring CSS compound-selector registration (`.btn.primary { }`).
+// Compound lookup tries every ordering of 2-4 space-separated class parts (e.g. "btn primary"
+// -> "btnPrimary" / "primaryBtn"), mirroring CSS compound-selector registration
+// (`.btn.primary { }`), and layers whatever it finds ON TOP of the per-class merge.
 const COMPOUND_MIN_PARTS = 2;
 const COMPOUND_MAX_PARTS = 4;
+// A scope suffix as the `<style scoped>` compilers emit it: `card__data-v-1a2b3c4d` (Vue) or
+// `card__svelte-1a2b3c4d` (Svelte), the hash being css-parser's base36 hashFilePath. Matched by
+// SHAPE, never by "there is a `__` somewhere in the name" — a BEM class (`card__title`) must
+// never be read as a scoped `card`, which would silently merge the block's styles into the
+// element's.
+const SCOPE_SEPARATOR = '__';
+const SCOPE_SUFFIX_PATTERN = /^(?:data-v|svelte)-[0-9a-z]+$/;
+function splitScopedToken(token) {
+    const separator = token.lastIndexOf(SCOPE_SEPARATOR);
+    if (separator <= 0)
+        return null;
+    const scope = token.slice(separator + SCOPE_SEPARATOR.length);
+    if (!SCOPE_SUFFIX_PATTERN.test(scope))
+        return null;
+    return { base: token.slice(0, separator), scope };
+}
 const globalStyles = new Map();
 // Called by generated code from side-effect style imports. Last import wins on a
 // name collision, matching CSS cascade behavior.
@@ -49,18 +65,28 @@ export function resolveClassName(className) {
     const trimmed = className.trim();
     if (!trimmed)
         return {};
-    const exactMatch = globalStyles.get(trimmed) ?? globalStyles.get(kebabToCamel(trimmed));
+    const parts = trimmed.split(/\s+/).filter(Boolean);
+    // A single token is nothing but the exact-match lookup, so it goes through resolveOne, which
+    // adds the scoped-token base layering below. A multi-token string still tries the whole string
+    // as one key first — `$style.card`-style output arrives pre-resolved and must not be split.
+    if (parts.length <= 1)
+        return resolveOne(trimmed);
+    const exactMatch = lookupKey(trimmed);
     if (exactMatch)
         return exactMatch;
-    const parts = trimmed.split(/\s+/).filter(Boolean);
+    const merged = parts.reduce((acc, cls) => {
+        return { ...acc, ...resolveOne(cls) };
+    }, {});
+    // A compound rule LAYERS OVER the single-class rules rather than replacing them, matching the
+    // cascade: `.card { padding: 8; background: white }` + `.card.big { padding: 16 }` on
+    // `class="card big"` is padding 16 AND background white. Returning the compound alone (what
+    // this did before) silently dropped every property the compound did not itself restate.
     if (parts.length >= COMPOUND_MIN_PARTS && parts.length <= COMPOUND_MAX_PARTS) {
         const compound = tryCompoundLookup(parts);
         if (compound)
-            return compound;
+            return { ...merged, ...compound };
     }
-    return parts.reduce((acc, cls) => {
-        return { ...acc, ...resolveOne(cls) };
-    }, {});
+    return merged;
 }
 function generateCompoundPermutations(parts) {
     if (parts.length < COMPOUND_MIN_PARTS)
@@ -73,13 +99,13 @@ function generateCompoundPermutations(parts) {
 }
 function generateKPermutations(parts, size) {
     if (size === 0)
-        return [''];
+        return [[]];
     if (parts.length === 0)
         return [];
     const result = [];
     function helper(current, remaining, depth) {
         if (depth === size) {
-            result.push(toCompoundKey(current));
+            result.push(current);
             return;
         }
         for (let i = 0; i < remaining.length; i++) {
@@ -113,16 +139,69 @@ export function kebabToCamel(value) {
 function tryCompoundLookup(parts) {
     if (parts.length < COMPOUND_MIN_PARTS)
         return null;
-    for (const compound of generateCompoundPermutations(parts)) {
-        const style = globalStyles.get(compound);
-        if (style)
-            return style;
+    for (const subset of generateCompoundPermutations(parts)) {
+        for (const key of compoundKeysFor(subset)) {
+            const style = globalStyles.get(key);
+            if (style)
+                return style;
+        }
     }
     return null;
 }
+function compoundKeysFor(subset) {
+    const scoped = scopedCompoundKey(subset);
+    return scoped === null ? [toCompoundKey(subset)] : [toCompoundKey(subset), scoped];
+}
+// The scope suffix is appended per TOKEN in the markup (`class="card__svelte-h big__svelte-h"`)
+// but appears ONCE, at the end, in the registered key a compound rule produces
+// (`.card.big` -> `cardBig__svelte-h`) — the compiler collapses the selector to one name and
+// suffixes that. Those two operations do not commute, so the key built from the raw tokens
+// (`card__svelte-hBig__svelte-h`) can never match and every scoped compound rule was dead.
+// Rebuild the key the way registration did: strip the suffix, join the bases, re-append once.
+//
+// An UNSCOPED token in the subset contributes its own name and no scope, rather than aborting.
+// That is the `:global()` case, and it is why a partial `:global()` reaches the markup it was
+// written for: `.card :global(.reset)` registers the key `cardReset`, which the scoper suffixes
+// as a whole (the escape hatch exempts the `reset` MARKUP TOKEN, not the collapsed key), while
+// the element carries `card__svelte-h reset`. The same shape covers a class handed down from a
+// parent component, which likewise arrives unsuffixed.
+//
+// Widening, stated so it stays deliberate: a fully-scoped `.card.reset` collapses to that same
+// key, so an element carrying a FOREIGN `reset` now matches a rule the author scoped to their
+// own. The key format cannot tell the two apart — telling them apart needs a registry indexed by
+// token set, with per-token scope. The scopes still have to agree: two tokens from two different
+// components have no single suffix to factor out and stay unmatched.
+function scopedCompoundKey(subset) {
+    const bases = [];
+    let scope;
+    for (const token of subset) {
+        const split = splitScopedToken(token);
+        if (split === null) {
+            bases.push(token);
+            continue;
+        }
+        if (scope !== undefined && split.scope !== scope)
+            return null;
+        scope = split.scope;
+        bases.push(split.base);
+    }
+    return scope === undefined ? null : toCompoundKey(bases) + SCOPE_SEPARATOR + scope;
+}
+// A scoped token layers over its own unscoped name: on the web the element carries BOTH classes
+// (`class="card svelte-h"`), so a global `.card` in App.css still applies underneath the
+// component's `<style>` rule. Rewriting `card` -> `card__svelte-h` here is how the scope is
+// expressed instead of a second class, so the base has to be re-consulted explicitly or that
+// global rule silently disappears the moment a component defines a class of the same name.
 function resolveOne(name) {
     const trimmed = name.trim();
     if (!trimmed)
         return {};
-    return globalStyles.get(trimmed) ?? globalStyles.get(kebabToCamel(trimmed)) ?? {};
+    const scoped = lookupKey(trimmed);
+    const split = splitScopedToken(trimmed);
+    if (split === null)
+        return scoped ?? {};
+    return { ...lookupKey(split.base), ...scoped };
+}
+function lookupKey(name) {
+    return globalStyles.get(name) ?? globalStyles.get(kebabToCamel(name));
 }

package/build/style-sheet/index.js

@@ -49,8 +49,10 @@ const absoluteFill = Object.freeze({
     top: 0,
     bottom: 0,
 });
-// RN's composeStyles: falsy left → right, falsy right → left, else the pair [a, b]
-// (which flatten later collapses, later keys winning).
+// RN's composeStyles: a null/undefined side yields the other, else the pair [a, b]
+// (which flatten later collapses, later keys winning). The test is null/undefined, NOT
+// falsy - compose(0, y) returns [0, y], matching react-native's own
+// src/private/styles/composeStyles.js, which branches on `== null`.
 function compose(style1, style2) {
     if (style1 === null || style1 === undefined)
         return style2;

package/build/surface.js

@@ -62,6 +62,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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbiote-native/engine",
-  "version": "0.1.7",
+  "version": "0.2.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": {

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(' ');
-}