@symbiote-native/engine 0.2.0 → 0.3.0

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

@@ -12,7 +12,7 @@
 import { getNativeModule } from '../native-modules/index.js';
 import { dlog } from '../debug.js';
 import { processColor } from '../platform-color/index.js';
-import { STATUS_BAR_MANAGER } from './shared.js';
+import { STATUS_BAR_MANAGER, } from './shared.js';
 // processColor returns `unknown` (its result is platform-dependent); narrow to the
 // number Fabric/native expects, like RN's invariant before setColor. A non-number
 // (null for an unparseable color, headless identity passthrough of a string) is dropped.
@@ -31,7 +31,7 @@ function applyBackgroundColor(manager, color, animated) {
 // single-arg Android setters. The adapter calls this from its declarative component's effect,
 // on mount and on every prop change.
 export function applyStatusBarProps(props) {
-    const { barStyle, hidden, animated = false, backgroundColor, translucent } = props;
+    const { barStyle, hidden, animated = false, backgroundColor, translucent, } = props;
     const manager = getNativeModule(STATUS_BAR_MANAGER);
     if (manager === null) {
         dlog('StatusBar android: StatusBarManager not resolvable — skipping');
@@ -77,6 +77,5 @@ export const statusBarImperative = {
 // constant is absent (older RN, or a fake that doesn't define getConstants). Read lazily
 // so nothing touches native at import time.
 export function statusBarCurrentHeight() {
-    return getNativeModule(STATUS_BAR_MANAGER)?.getConstants?.()
-        .HEIGHT;
+    return getNativeModule(STATUS_BAR_MANAGER)?.getConstants?.().HEIGHT;
 }

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

@@ -21,7 +21,7 @@ import { STATUS_BAR_MANAGER, STATIC_HIDE_TRANSITION, hideTransition, } from './s
 // (deepest/last wins); we direct-apply a single component's props, which is correct for one
 // StatusBar and a fine first cut.
 export function applyStatusBarProps(props) {
-    const { barStyle, hidden, animated = false, networkActivityIndicatorVisible } = props;
+    const { barStyle, hidden, animated = false, networkActivityIndicatorVisible, } = props;
     const manager = getNativeModule(STATUS_BAR_MANAGER);
     if (manager === null) {
         dlog('StatusBar: StatusBarManager not resolvable via __turboModuleProxy — skipping');

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

@@ -1,9 +1,16 @@
 import type { IViewStyle, ITextStyle } from '../styles';
 type IResolvedStyle = Partial<IViewStyle & ITextStyle>;
 export type IClassNameValue = string | IResolvedStyle | Array<string | IResolvedStyle> | undefined | null;
-export declare function registerStyles(styles: Record<string, IResolvedStyle>): void;
+export interface IStyleRule {
+    /** Class names AS AUTHORED / as renamed by the scoping pass. No normalization. */
+    readonly tokens: readonly string[];
+    readonly specificity: readonly [number, number, number];
+    /** Source order within its file; the registry adds a per-registration epoch on top. */
+    readonly order: number;
+    readonly style: IResolvedStyle;
+}
+export declare function registerRules(rules: readonly IStyleRule[]): void;
 export declare function clearGlobalStyles(): void;
 export declare function isClassNameValue(value: unknown): value is IClassNameValue;
 export declare function resolveClassName(className: IClassNameValue): IResolvedStyle;
-export declare function kebabToCamel(value: string): string;
 export {};

package/build/style-registry/index.js

@@ -1,55 +1,101 @@
 // Runtime style registry. Side-effect CSS imports (compiled by the sibling CSS-to-style
-// build package, not this module) call registerStyles() with camelCase keys; components
-// look them up via resolveClassName(). No CSS parsing here - just a Map<string, ...> lookup.
+// build package, not this module) call registerRules() with the token SET each selector
+// names; components look them up via resolveClassName(). No CSS parsing here - just an
+// inverted Map<token, rules> and a subset test.
 //
-// No Tailwind-utility detection layer: this repo's style surface has no Tailwind layer,
-// so the compound lookup below always runs for 2-4-part class strings instead of being
-// gated behind "no part looks like a utility class".
+// A rule matches when its tokens are a SUBSET of the element's class list, in any order and
+// at any length, and the matches cascade by (derived-scope, specificity, epoch, order).
+// That replaced an earlier flat Map<key, style>, where the compiler COLLAPSED a selector's
+// tokens into one camelCase name (`.a.b` -> `aB`) and the runtime guessed the split back
+// apart by permuting the class string: 60 built keys on a 4-token miss, a camelCase
+// round-trip that could not survive a scope suffix, no real cascade, and a silent cliff at
+// 5 tokens where the compound branch stopped running at all. Tokens now arrive AS AUTHORED,
+// so there is nothing left to guess.
+// The scope tail as OUR OWN compilers emit it — all three shapes, the hash being css-parser's
+// base36 hashFilePath:
+//   `card__data-v-<h>`   Vue `<style scoped>`
+//   `card__svelte-<h>`   Svelte `<style>`
+//   `card__module__<h>`  CSS Modules — BOTH a standalone `.module.css` and Vue's `<style module>`
+// (A preprocessor source — SCSS/Less/Stylus — reduces to plain CSS before any of this, so it
+// carries whichever of the three its host block uses; there is no fourth shape.)
 //
-// kebab-case authoring: a CSS selector `.section-label` always registers under the
-// camelCase key `sectionLabel` (@symbiote-native/css-parser's extractClassName), so a template
-// 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 (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]+$/;
+// 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.
+//
+// Matched as ONE TAIL UNIT anchored at the end, rather than as "split on the last `__`, then
+// shape-test what follows": the module form carries its own `__`, so a `lastIndexOf` split cuts
+// `badge__module__<h>` into base `badge__module` + scope `<h>` and the base it hands back names
+// no class. Widening the shape test alone would NOT fix that — the split POINT is wrong, not the
+// alphabet.
+//
+// Note this suffix scheme is ours, not the frameworks'. Svelte appends a SEPARATE token
+// (`class="card svelte-<h>"`) and Vue `<style scoped>` renames nothing at all (it adds a
+// `data-v-<h>` attribute). We have no DOM and no attribute matching, so a scope is expressed by
+// renaming the token; the names only borrow their vocabulary.
+const SCOPE_TAIL_PATTERN = /__((?:data-v|svelte)-[0-9a-z]+|module__[0-9a-z]+)$/;
 function splitScopedToken(token) {
-    const separator = token.lastIndexOf(SCOPE_SEPARATOR);
-    if (separator <= 0)
+    const match = SCOPE_TAIL_PATTERN.exec(token);
+    // index 0 would mean the token is nothing BUT a scope tail, which names no class.
+    if (match === null || match.index <= 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 };
+    return { base: token.slice(0, match.index), scope: match[1] };
+}
+// Inverted index, ONE bucket per rule rather than one per token: a rule can only match when the
+// element carries every one of its tokens, so any single token of it is a sufficient hook. The
+// alternative (indexing under all of them) surfaces the same rule once per shared token and buys
+// nothing but a dedupe pass.
+const ruleIndex = new Map();
+let ruleEpoch = 0;
+// resolveClassName runs from routeProp on every class-prop WRITE, per node, and a screen only
+// ever uses a few dozen distinct class strings — so after warm-up the whole resolution collapses
+// to one Map.get. Only the STRING branch is memoized: an object/array argument has no stable key
+// (a fresh literal every render) and would just fill the map.
+//
+// Safe to hand the SAME object out repeatedly because no caller mutates it — every consumer
+// (routeProp's commitClassStyle, and the ScrollView / VirtualizedList / FlatList / ImageBackground
+// class-to-style props in all five adapters) spreads it or drops it into a style array, and
+// flattenStyle shallow-copies.
+const resolvedCache = new Map();
+// Bounded so a screen generating unique class strings at runtime cannot grow it without limit.
+// Overflow drops everything rather than evicting one entry: the cache is a warm-up optimization,
+// not a working set, and an LRU's bookkeeping costs more than the rebuild it saves.
+const RESOLVED_CACHE_LIMIT = 512;
+// Every registration is a cascade change, so nothing resolved before it can be trusted. Clearing
+// wholesale beats versioning each entry — registration happens at import time, resolution happens
+// per commit, and only the second one is hot.
+function invalidateResolved() {
+    resolvedCache.clear();
 }
-const globalStyles = new Map();
-// Called by generated code from side-effect style imports. Last import wins on a
-// name collision, matching CSS cascade behavior.
-export function registerStyles(styles) {
-    for (const [name, style] of Object.entries(styles)) {
-        globalStyles.set(name, style);
+export function registerRules(rules) {
+    invalidateResolved();
+    const epoch = ruleEpoch++;
+    for (const rule of rules) {
+        const hook = rule.tokens[0];
+        // The empty set is a subset of every element's tokens, so a token-less rule would paint
+        // everything. It names no class and can only come from a broken compile.
+        if (hook === undefined)
+            continue;
+        const bucket = ruleIndex.get(hook);
+        if (bucket === undefined) {
+            ruleIndex.set(hook, [{ rule, epoch }]);
+            continue;
+        }
+        bucket.push({ rule, epoch });
     }
 }
 // Used between tests to reset registry state.
 export function clearGlobalStyles() {
-    globalStyles.clear();
+    ruleIndex.clear();
+    ruleEpoch = 0;
+    invalidateResolved();
 }
 // A `class`/`className` prop arrives as `unknown` at the routeProp boundary (any adapter can
 // hand over anything); this narrows before resolveClassName without an `as` cast. Shared with
 // adapters/vue/src/components/scroll-view/shared.ts's identical need, rather than each keeping
 // its own copy - that file imports this one instead of redeclaring it.
 export function isClassNameValue(value) {
-    return typeof value === 'string' || (typeof value === 'object' && value !== null);
+    return (typeof value === 'string' || (typeof value === 'object' && value !== null));
 }
 export function resolveClassName(className) {
     if (!className)
@@ -62,146 +108,75 @@ export function resolveClassName(className) {
             return { ...acc, ...resolveClassName(item) };
         }, {});
     }
-    const trimmed = className.trim();
-    if (!trimmed)
-        return {};
-    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 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 { ...merged, ...compound };
-    }
-    return merged;
-}
-function generateCompoundPermutations(parts) {
-    if (parts.length < COMPOUND_MIN_PARTS)
-        return [];
-    const compounds = [];
-    for (let size = COMPOUND_MIN_PARTS; size <= parts.length; size++) {
-        compounds.push(...generateKPermutations(parts, size));
-    }
-    return compounds;
+    const cached = resolvedCache.get(className);
+    if (cached !== undefined)
+        return cached;
+    const resolved = resolveClassString(className);
+    if (resolvedCache.size >= RESOLVED_CACHE_LIMIT)
+        resolvedCache.clear();
+    resolvedCache.set(className, resolved);
+    return resolved;
 }
-function generateKPermutations(parts, size) {
-    if (size === 0)
-        return [[]];
+function resolveClassString(className) {
+    const parts = className.trim().split(/\s+/).filter(Boolean);
     if (parts.length === 0)
-        return [];
-    const result = [];
-    function helper(current, remaining, depth) {
-        if (depth === size) {
-            result.push(current);
-            return;
-        }
-        for (let i = 0; i < remaining.length; i++) {
-            helper([...current, remaining[i]], remaining.slice(0, i).concat(remaining.slice(i + 1)), depth + 1);
-        }
-    }
-    helper([], parts, 0);
-    return result;
-}
-// Compound permutations join as camelCase ("btn primary" -> "btnPrimary") because this
-// repo's CSS-to-style compiler emits plain camelCase keys for every class, single or
-// compound, so "btn primary" must resolve against a registered "btnPrimary".
-function toCompoundKey(parts) {
-    return parts.reduce((key, part, index) => (index === 0 ? part : key + capitalize(part)), '');
-}
-function capitalize(value) {
-    return value.length === 0 ? value : value[0].toUpperCase() + value.slice(1);
-}
-// Duplicated from @symbiote-native/css-parser's identical helper rather than imported: css-parser
-// pulls in postcss and is build-time only (never shipped in the app bundle), and this registry
-// is the opposite - pure runtime, in every app bundle - so importing it here would leak a
-// build-time dependency into the shipped app. The conversion itself is two lines; keeping both
-// copies in sync is a smaller cost than the alternative.
-//
-// Exported (not just local to this file) because ./scope.ts's Vue `<style scoped>` name
-// rewriter needs the same kebab->camel normalization and is a different responsibility living
-// in a sibling module - see that file's own doc comment for why it's split out of this one.
-export function kebabToCamel(value) {
-    return value.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
-}
-function tryCompoundLookup(parts) {
-    if (parts.length < COMPOUND_MIN_PARTS)
-        return null;
-    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];
+        return {};
+    return matchRules(parts) ?? {};
 }
-// 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);
+// `null` rather than `{}` for "nothing matched", so the caller can skip the empty-object churn on
+// every class-prop set that has no rules.
+function matchRules(parts) {
+    const literal = new Set(parts);
+    const tokens = elementTokens(parts);
+    let matched = null;
+    for (const token of tokens) {
+        const bucket = ruleIndex.get(token);
+        if (bucket === undefined)
             continue;
+        for (const indexed of bucket) {
+            if (!indexed.rule.tokens.every(needed => tokens.has(needed)))
+                continue;
+            matched ??= [];
+            matched.push({
+                indexed,
+                derivedTokens: indexed.rule.tokens.filter(token => !literal.has(token))
+                    .length,
+            });
         }
-        if (scope !== undefined && split.scope !== scope)
-            return null;
-        scope = split.scope;
-        bases.push(split.base);
     }
-    return scope === undefined ? null : toCompoundKey(bases) + SCOPE_SEPARATOR + scope;
+    if (matched === null)
+        return null;
+    matched.sort(byCascadeOrder);
+    return matched.reduce((acc, match) => ({ ...acc, ...match.indexed.rule.style }), {});
 }
-// 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 {};
-    const scoped = lookupKey(trimmed);
-    const split = splitScopedToken(trimmed);
-    if (split === null)
-        return scoped ?? {};
-    return { ...lookupKey(split.base), ...scoped };
+// A scoped token contributes its BASE as well: the scope is expressed by RENAMING the token
+// rather than adding a second one, so a global `.card` in App.css only survives a component
+// defining its own `.card` if the base is put back into the set here. On the web the element
+// would carry both names and no such step would exist.
+function elementTokens(parts) {
+    const tokens = new Set();
+    for (const part of parts) {
+        tokens.add(part);
+        const split = splitScopedToken(part);
+        if (split !== null)
+            tokens.add(split.base);
+    }
+    return tokens;
 }
-function lookupKey(name) {
-    return globalStyles.get(name) ?? globalStyles.get(kebabToCamel(name));
+// Ascending, because the caller merges left to right: the winner has to be spread LAST. Ties
+// break the way the cascade does — later import first, then later line in the file.
+function byCascadeOrder(left, right) {
+    if (left.derivedTokens !== right.derivedTokens) {
+        return right.derivedTokens - left.derivedTokens;
+    }
+    const leftRule = left.indexed.rule;
+    const rightRule = right.indexed.rule;
+    for (let index = 0; index < leftRule.specificity.length; index++) {
+        const diff = leftRule.specificity[index] - rightRule.specificity[index];
+        if (diff !== 0)
+            return diff;
+    }
+    return left.indexed.epoch === right.indexed.epoch
+        ? leftRule.order - rightRule.order
+        : left.indexed.epoch - right.indexed.epoch;
 }

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

@@ -1,3 +1,17 @@
 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;
+export type IClassNameRenames = Readonly<Record<string, string>>;
+/**
+ * Rewrites every class token the style compiler renamed, leaving the rest alone.
+ *
+ * The names come from the compiler's own rename table, emitted verbatim, rather than being
+ * RECOMPUTED here as `token + '__' + scopeId`. Recomputing made the runtime a second,
+ * independent implementation of "what is this class called now" beside the style compiler —
+ * they agreed by construction until a rename mechanism changed under one of them. lightningcss
+ * renames the class; this reads the result.
+ *
+ * A token absent from the table is left alone: it belongs to another file (a `:global()` escape
+ * hatch, App.css, a class handed down by a parent), and the registry resolves it under its own
+ * authored name.
+ */
+export declare function renameClassTokens(value: IScopableClassValue, renames: IClassNameRenames): IScopableClassValue;

package/build/style-registry/scope.js

@@ -1,41 +1,43 @@
-// 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) {
+// Class-name rewriter for scoped styles. 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 scoped-style template -
+// `adapters/vue/metro-vue-transformer.cjs` emits calls to renameClassTokens (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 name.
+/**
+ * Rewrites every class token the style compiler renamed, leaving the rest alone.
+ *
+ * The names come from the compiler's own rename table, emitted verbatim, rather than being
+ * RECOMPUTED here as `token + '__' + scopeId`. Recomputing made the runtime a second,
+ * independent implementation of "what is this class called now" beside the style compiler —
+ * they agreed by construction until a rename mechanism changed under one of them. lightningcss
+ * renames the class; this reads the result.
+ *
+ * A token absent from the table is left alone: it belongs to another file (a `:global()` escape
+ * hatch, App.css, a class handed down by a parent), and the registry resolves it under its own
+ * authored name.
+ */
+export function renameClassTokens(value, renames) {
     if (value === undefined || value === null)
         return value;
     if (Array.isArray(value)) {
-        return value.map(item => scopeClassEntry(item, localNames, scopeId));
+        return value.map(item => renameClassEntry(item, renames));
     }
-    return scopeClassEntry(value, localNames, scopeId);
+    return renameClassEntry(value, renames);
 }
-// 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) {
+function renameClassEntry(value, renames) {
     if (typeof value === 'object') {
-        const scoped = {};
+        const renamed = {};
         for (const [name, enabled] of Object.entries(value)) {
-            scoped[scopeToken(name, localNames, scopeId)] = enabled;
+            renamed[renames[name] ?? name] = enabled;
         }
-        return scoped;
+        return renamed;
     }
     return value
         .split(/\s+/)
         .filter(Boolean)
-        .map(token => scopeToken(token, localNames, scopeId))
+        .map(token => renames[token] ?? token)
         .join(' ');
 }

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);

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) {