@symbiote-native/engine 0.2.0 → 0.4.0

package/build/style-registry/index.js

@@ -1,55 +1,146 @@
 // 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)
-        return null;
-    const scope = token.slice(separator + SCOPE_SEPARATOR.length);
-    if (!SCOPE_SUFFIX_PATTERN.test(scope))
+    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;
-    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;
+// The pressed variant, keyed by the SAME authored string. Separate from `resolvedCache` so the two
+// can never collide on one key, and string-keyed for the same reason that one is: identity is the
+// whole point. `isAlreadyPublished` (node.ts) turns a re-push away by comparing slot 0 with
+// Object.is, so a thousand unpressed rows only cost zero writes if they all publish the SAME
+// object. Resolve an array or an object instead and every call returns a fresh one, the guard can
+// never fire, and the re-push storm it was added for comes back with a new cause.
+//
+// This doubles the distinct strings a screen can hold. A SECOND state would multiply them, and the
+// cache clears WHOLE on overflow rather than evicting — so a drop breaks identity for every node at
+// once. That is the wall a `:focus` or `:hover` would hit, and it would read as an unexplained
+// regression rather than as a cache limit.
+const activeCache = new Map();
+// The token the css-parser emits for `:active` (its `STATE_TOKEN`). Duplicated as a literal rather
+// than imported: the engine does not depend on the parser, and a CSS identifier cannot carry an
+// unescaped `:`, so this can never collide with a real class name.
+const STATE_TOKEN = ':active';
+// Whether ANY registered rule carries the state token. Not derivable from `ruleIndex`, which hooks
+// a rule on `tokens[0]` — for `.btn:active` that is `btn`, so `ruleIndex.has(':active')` is always
+// false and a gate built on it silently disables the whole feature. Found by a test, not by
+// reading: the wrong gate makes pressing a no-op with everything green.
+let hasActiveRules = false;
+// 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();
+    activeCache.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) {
+        if (rule.tokens.includes(STATE_TOKEN))
+            hasActiveRules = true;
+        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();
+    hasActiveRules = false;
+    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));
+}
+// An ARRAY of plain strings joined into one, so it takes the memoised string path like any other
+// class. Everything downstream keys off identity — `resolveClassName`'s cache, the `:active`
+// variant, and `isAlreadyPublished`'s Object.is on slot 0 — and the array branch below reduces
+// into a FRESH object on every call, so an array class silently opted out of all three: no pressed
+// styling, and a re-push that re-dirties the node on every update.
+//
+// Only an ALL-STRING array converts. A mixed array carries IResolvedStyle entries — the channel
+// ScrollView / VirtualizedList / FlatList / ImageBackground use to pass a style through the class
+// prop — and those are not tokens; folding them into a string would be a category error rather
+// than a fix. No adapter produces an all-string array today (Vue's createVNode normalises class to
+// a string, Angular joins its accumulated tokens, React's className is a string by convention), so
+// this closes a gap an APPLICATION can reach rather than one we can.
+export function canonicalClassName(className) {
+    if (typeof className === 'string' || !Array.isArray(className)) {
+        return className;
+    }
+    return className.every(part => typeof part === 'string')
+        ? className.join(' ')
+        : className;
 }
 export function resolveClassName(className) {
     if (!className)
@@ -58,150 +149,113 @@ export function resolveClassName(className) {
         return className;
     }
     if (Array.isArray(className)) {
+        // Direct callers (an adapter resolving a class prop itself) get the same canonicalisation as
+        // routeProp's path, so an all-string array is memoised for them too.
+        const canonical = canonicalClassName(className);
+        if (typeof canonical === 'string')
+            return resolveClassName(canonical);
         return className.reduce((acc, item) => {
             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;
+    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 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;
-}
-function generateKPermutations(parts, size) {
-    if (size === 0)
-        return [[]];
-    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.
+// The same element's style with `:active` added to its token list — so a `.btn:active` rule joins
+// the cascade exactly as its specificity says, merged by the SAME matcher. That makes the result a
+// complete REPLACEMENT for the unpressed style rather than an overlay, which is why no extra style
+// slot is needed on the node: pressing swaps what sits in slot 0.
 //
-// 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;
+// Non-string input resolves to the plain style, unchanged. An object or array has no stable key to
+// cache under, and the guard above is worthless without one.
+export function resolveActiveClassName(className) {
+    if (typeof className !== 'string')
+        return resolveClassName(className);
+    // No `:active` rule anywhere in the app — hand back the very SAME object the unpressed path
+    // returns, not an equal one. Two cache keys give two objects even when their contents are
+    // byte-identical, and `isAlreadyPublished` compares with Object.is: pressing a node that has no
+    // pressed styling would otherwise publish a fresh base, dirty the node and pay a walk for a
+    // payload Fabric then rejects as unchanged. One node rather than a thousand, so not a storm —
+    // but it is a cost for literally nothing, and this makes the whole feature free for every app
+    // that does not use it.
+    if (!hasActiveRules)
+        return resolveClassName(className);
+    const cached = activeCache.get(className);
+    if (cached !== undefined)
+        return cached;
+    const parts = className.trim().split(/\s+/).filter(Boolean);
+    const resolved = parts.length === 0 ? {} : (matchRules([...parts, STATE_TOKEN]) ?? {});
+    if (activeCache.size >= RESOLVED_CACHE_LIMIT)
+        activeCache.clear();
+    activeCache.set(className, resolved);
+    return resolved;
 }
-function compoundKeysFor(subset) {
-    const scoped = scopedCompoundKey(subset);
-    return scoped === null ? [toCompoundKey(subset)] : [toCompoundKey(subset), scoped];
+function resolveClassString(className) {
+    const parts = className.trim().split(/\s+/).filter(Boolean);
+    if (parts.length === 0)
+        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 { markStructureDirty } from './node.js';
 export class SymbioteSurface {
     rootTag;
     children = [];
@@ -46,9 +47,16 @@ export class SymbioteSurface {
             this.commit();
         });
     }
+    // Splices `parent.children` directly instead of going through node.ts's removeChild, so it
+    // owes the same marks - otherwise a node pulled out of a subtree here leaves that subtree
+    // looking clean and the commit walk skips right over the hole, and commitTargeted would rebuild
+    // that parent's child set from a snapshot that still contains the removed node.
     detach(child) {
         const parent = child.parent;
         if (parent) {
+            // Marks before the splice, like node.ts's own structural ops: the committed record may be
+            // aliasing `parent.children`, and this call is what copies it out of the way.
+            markStructureDirty(parent);
             const index = parent.children.indexOf(child);
             if (index >= 0)
                 parent.children.splice(index, 1);

package/build/tags.d.ts

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