@symbiote-native/svelte 0.2.0 → 0.3.0

package/build/preprocessor/scoped-styles.js

@@ -19,17 +19,19 @@
 // node-transform to a source rewrite because Svelte's compiler exposes no AST hook.
 //
 // Four steps, in order:
-//   1. parse the block out and compile it through @symbiote-native/css-parser, exactly like Vue's
-//      <style scoped> — every class registers under a per-file-suffixed key, `card` ->
-//      `card__svelte-<hash>`, in the same global registry App.css and Vue SFC blocks populate.
-//   2. rewrite `class` in THIS file's own markup to name the suffixed key. Static values are
-//      resolved here, at build time; a dynamic `class={expr}` is wrapped in a runtime call to
-//      `scopeSvelteClass` (../style-scope) — the only shape that can scope a value the compiler
-//      cannot see into.
+//   1. cut the block out TEXTUALLY (see STYLE_TAG_PATTERN) and compile it through
+//      @symbiote-native/css-parser's `compileScopedCss`, exactly like Vue's <style scoped> —
+//      lightningcss renames every class this file owns, `card` -> `card__svelte-<hash>`, and
+//      hands back the name map; the styles register under those names in the same global
+//      registry App.css and Vue SFC blocks populate.
+//   2. rewrite `class` in THIS file's own markup by READING that map — never by re-deriving the
+//      name, which is how the two halves used to be two implementations of "what is this class
+//      called now". Static values resolve here, at build time; a dynamic `class={expr}` is
+//      wrapped in a runtime call to `scopeSvelteClass` (../style-scope) that resolves through the
+//      SAME map, emitted beside it.
 //   3. delete the `<style>` block from the source handed on, so Svelte emits no
 //      `css_unused_selector` warnings and adds no scope hash of its own.
-//   4. append one `<script module>` line holding the `registerStyles()` call and the two
-//      per-file constants step 2's rewrite refers to.
+//   4. append one `<script module>` line holding the `registerRules()` call and the name map.
 //
 // SCOPING SEMANTICS, AND THE ONE DELIBERATE DIVERGENCE FROM SVELTE-ON-THE-WEB. Svelte scopes by
 // FILE: only markup written in this file carries the scope, never markup a child component owns
@@ -52,7 +54,7 @@
 // existing `<script module>` tag's own line — so every original line keeps its number and a
 // `svelte-check` diagnostic still points at the right place.
 import { parse } from 'svelte/compiler';
-import { classTokensIn, compile as compilePreprocessor, globalClassNamesIn, globalClassTokensIn, hashFilePath, parseCSS, } from '@symbiote-native/css-parser';
+import { compile as compilePreprocessor, compileScopedCss, hashFilePath, } from '@symbiote-native/css-parser';
 // Resolved by package SELF-REFERENCE, not the relative `../scope-token` the rest of this package
 // would write — same reason metro-svelte-transformer.cjs reaches for
 // `@symbiote-native/svelte/preprocessor`. `svelte.config.js` is loaded directly by Node
@@ -62,19 +64,19 @@ import { classTokensIn, compile as compilePreprocessor, globalClassNamesIn, glob
 // in this workspace, `build` in a published install — so one line works in both. `scope-token`
 // specifically, never `style-scope`: that one reaches the engine through `class-value`, a whole
 // extensionless graph this build-time file must not pull in.
-import { scopeToken } from '@symbiote-native/svelte/scope-token';
+import { scopeToken, } from '@symbiote-native/svelte/scope-token';
 const SCOPE_ID_PREFIX = 'svelte-';
 const ENGINE_MODULE = '@symbiote-native/engine';
 const RUNTIME_MODULE = '@symbiote-native/svelte/style-scope';
 // Every injected identifier is `__symbiote`-prefixed and import-aliased so a component that
-// happens to declare its own `registerStyles` / `scopeSvelteClass` cannot collide with it.
-const REGISTER_STYLES_LOCAL = '__symbioteRegisterStyles';
+// happens to declare its own `registerRules` / `scopeSvelteClass` cannot collide with it.
+const REGISTER_RULES_LOCAL = '__symbioteRegisterRules';
 const SCOPE_CLASS_LOCAL = '__symbioteScopeClass';
 const SCOPED_NAMES_LOCAL = '__symbioteScopedNames';
-const SCOPE_ID_LOCAL = '__symbioteScopeId';
 // A `<style lang="…">` names its language directly, unlike a standalone file identified by its
 // extension — so this is its own lookup rather than css-parser's extension-keyed
 // `detectLanguage()`. Same table Vue's transformer keeps for the identical reason.
+const DEFAULT_STYLE_LANG = 'css';
 const STYLE_LANG_TO_PREPROCESSOR = new Map([
     ['css', 'css'],
     ['scss', 'scss'],
@@ -93,55 +95,82 @@ export function scopedStyles() {
             // this saves them a full parse on every Metro transform.
             if (!content.includes('<style'))
                 return { code: content };
-            const ast = parse(content, { filename, modern: true });
-            const styleBlock = readStyleBlock(ast);
+            const styleBlock = findStyleBlock(content);
             if (styleBlock === undefined)
                 return { code: content };
             const path = filename ?? 'component.svelte';
             const css = await compileStyleBlock(styleBlock, path);
-            const parsed = parseCSS(css, { filename: path });
-            const exemptFromScope = globalClassNamesIn(css);
-            const scopeId = SCOPE_ID_PREFIX + hashFilePath(path);
             // A `:global(...)` selector opts out of scoping and registers under its plain name, the
-            // same escape hatch Vue's <style scoped> has. Everything else is suffixed and its ORIGINAL
-            // name recorded, so the markup rewrite below knows which tokens this file owns.
-            //
-            // A COMPOUND or DESCENDANT selector registers under one collapsed key (`.card.big` ->
-            // `cardBig`) that appears nowhere in the markup — the markup says `class="card big"`. So
-            // the key alone is not enough to know what this file owns: its TOKENS are recorded too, or
-            // a `.card.big` rule whose parts have no standalone rule of their own leaves both tokens
-            // unscoped and the rule unreachable.
-            //
-            // A token out of a `:global(...)` payload is the one exception: in `.card :global(.reset)`
-            // the collapsed KEY is this file's own, because `.card` is, but `reset` was written
-            // precisely to name markup this file does not own. Suffixing it along with the rest of its
-            // chain scope-mangles the escape hatch into matching nothing.
-            const tokensByName = classTokensIn(css, { filename: path });
-            const globalTokens = globalClassTokensIn(css, { filename: path });
-            const styles = {};
-            const localNames = new Set();
-            for (const [className, props] of Object.entries(parsed)) {
-                const isExempt = exemptFromScope.has(className);
-                const registeredName = isExempt ? className : `${className}__${scopeId}`;
-                if (!isExempt) {
-                    localNames.add(className);
-                    for (const token of tokensByName.get(className) ?? []) {
-                        if (!globalTokens.has(token))
-                            localNames.add(token);
-                    }
-                }
-                styles[registeredName] = props;
-            }
-            const edits = [blankOut(styleBlock.start, styleBlock.end, content)];
-            collectClassEdits(fragmentNodes(ast), content, localNames, scopeId, edits);
-            if (Object.keys(styles).length > 0) {
-                edits.push(injectModuleScript(ast, content, styles, localNames, scopeId));
+            // same escape hatch Vue's <style scoped> has. lightningcss decides that — a name it did not
+            // rename is absent from `names` and every token of it passes through untouched below.
+            const { rules, names } = compileScopedCss(css, {
+                filename: path,
+                pattern: `[local]__${SCOPE_ID_PREFIX}${hashFilePath(path)}`,
+            });
+            // Parsed WITHOUT the style block, and with it replaced by same-length whitespace, so every
+            // offset the AST reports still indexes `content` itself.
+            const ast = parse(withoutStyleBlock(content, styleBlock), {
+                filename,
+                modern: true,
+            });
+            const edits = [
+                blankOut(styleBlock.start, styleBlock.end, content),
+            ];
+            collectClassEdits(fragmentNodes(ast), content, names, edits);
+            if (rules.length > 0) {
+                edits.push(injectModuleScript(ast, content, rules, names));
             }
             return { code: applyEdits(content, edits) };
         },
     };
 }
 // ---------------------------------------------------------------------------------------------
+// The <style> block, located WITHOUT parsing it.
+//
+// This is svelte's own tag regex (src/compiler/preprocess/index.js), which is what its official
+// `preprocess()` style hook uses to hand a block's content to a preprocessor unparsed — and the
+// reason `svelte-preprocess` can compile SCSS at all. Reading `parse().css` instead, as this file
+// did until 2026-08-20, validates the block as CSS whatever `lang` says: `<style lang="scss">$pad:
+// 7px;</style>` threw `css_expected_identifier` before the language table above was ever
+// consulted, so only SCSS that is already valid CSS (nesting) survived. A `<!-- -->` comment is an
+// alternative of the pattern purely so a commented-out block is skipped rather than matched.
+const STYLE_TAG_PATTERN = /<!--[^]*?-->|<style((?:\s+[^=>'"/\s]+=(?:"[^"]*"|'[^']*'|[^>\s]+)|\s+[^=>'"/\s]+)*\s*)(?:\/>|>([\S\s]*?)<\/style>)/g;
+const LANG_ATTRIBUTE_PATTERN = /\blang\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+))/;
+function findStyleBlock(content) {
+    for (const match of content.matchAll(STYLE_TAG_PATTERN)) {
+        const [text, attributes, source] = match;
+        if (attributes === undefined || source === undefined)
+            continue;
+        return {
+            start: match.index,
+            end: match.index + text.length,
+            source,
+            lang: readLang(attributes),
+        };
+    }
+    return undefined;
+}
+function readLang(attributes) {
+    const match = LANG_ATTRIBUTE_PATTERN.exec(attributes);
+    if (match === null)
+        return DEFAULT_STYLE_LANG;
+    return match[1] ?? match[2] ?? match[3] ?? DEFAULT_STYLE_LANG;
+}
+// Same byte length, newlines kept: the AST's offsets stay valid against the ORIGINAL source, and
+// svelte's own diagnostics keep their line numbers.
+function withoutStyleBlock(content, block) {
+    const blanked = content.slice(block.start, block.end).replace(/[^\n]/g, ' ');
+    return content.slice(0, block.start) + blanked + content.slice(block.end);
+}
+async function compileStyleBlock(block, filename) {
+    const language = STYLE_LANG_TO_PREPROCESSOR.get(block.lang);
+    if (language === undefined) {
+        throw new Error(`${filename}: <style lang="${block.lang}"> is not supported — use css, scss, sass, less or stylus.`);
+    }
+    const path = block.lang === INDENTED_SASS_LANG ? `${filename}.sass` : filename;
+    return compilePreprocessor(block.source, language, path);
+}
+// ---------------------------------------------------------------------------------------------
 // AST reading. `parse()`'s return type is not pinned here (same call, same reasoning as
 // forbid-web-only-constructs.ts): it is read through runtime guards on `unknown` rather than
 // trusting a shape nothing verifies.
@@ -156,43 +185,6 @@ function stringAt(node, key) {
     const value = node[key];
     return typeof value === 'string' ? value : undefined;
 }
-function readStyleBlock(ast) {
-    if (!isRecord(ast))
-        return undefined;
-    const css = ast.css;
-    if (!isRecord(css))
-        return undefined;
-    const start = numberAt(css, 'start');
-    const end = numberAt(css, 'end');
-    const content = css.content;
-    if (start === undefined || end === undefined || !isRecord(content))
-        return undefined;
-    const source = stringAt(content, 'styles');
-    if (source === undefined)
-        return undefined;
-    return { start, end, source, lang: readLangAttribute(css) };
-}
-function readLangAttribute(block) {
-    const attributes = block.attributes;
-    if (!Array.isArray(attributes))
-        return 'css';
-    for (const attribute of attributes) {
-        if (!isRecord(attribute) || attribute.name !== 'lang')
-            continue;
-        const text = staticTextOf(attribute);
-        if (text !== undefined)
-            return text;
-    }
-    return 'css';
-}
-async function compileStyleBlock(block, filename) {
-    const language = STYLE_LANG_TO_PREPROCESSOR.get(block.lang);
-    if (language === undefined) {
-        throw new Error(`${filename}: <style lang="${block.lang}"> is not supported — use css, scss, sass, less or stylus.`);
-    }
-    const path = block.lang === INDENTED_SASS_LANG ? `${filename}.sass` : filename;
-    return compilePreprocessor(block.source, language, path);
-}
 function fragmentNodes(ast) {
     if (!isRecord(ast))
         return [];
@@ -215,17 +207,23 @@ function nestedNodes(node) {
     }
     return nested;
 }
-function collectClassEdits(nodes, content, localNames, scopeId, edits) {
+function collectClassEdits(nodes, content, names, edits) {
     for (const node of nodes) {
         if (!isRecord(node))
             continue;
         if (node.type === 'Attribute' && node.name === 'class') {
-            const edit = classAttributeEdit(node, content, localNames, scopeId);
+            const edit = classAttributeEdit(node, content, names);
+            if (edit !== undefined)
+                edits.push(edit);
+            continue;
+        }
+        if (node.type === 'ClassDirective') {
+            const edit = classDirectiveEdit(node, content, names);
             if (edit !== undefined)
                 edits.push(edit);
             continue;
         }
-        collectClassEdits(nestedNodes(node), content, localNames, scopeId, edits);
+        collectClassEdits(nestedNodes(node), content, names, edits);
     }
 }
 // `value` is `true` for a bare `class` attribute, one node for a lone value, or an array mixing
@@ -254,7 +252,7 @@ function staticTextOf(attribute) {
     }
     return text;
 }
-function classAttributeEdit(attribute, content, localNames, scopeId) {
+function classAttributeEdit(attribute, content, names) {
     const start = numberAt(attribute, 'start');
     const end = numberAt(attribute, 'end');
     const parts = attributeValueParts(attribute);
@@ -265,7 +263,7 @@ function classAttributeEdit(attribute, content, localNames, scopeId) {
         const scoped = staticValue
             .split(/\s+/)
             .filter(Boolean)
-            .map(token => scopeToken(token, localNames, scopeId))
+            .map(token => scopeToken(token, names))
             .join(' ');
         // Nothing this file owns appears in the value — leave the source byte-identical rather than
         // re-quoting it, so a component with only `:global(...)` rules is untouched.
@@ -275,8 +273,8 @@ function classAttributeEdit(attribute, content, localNames, scopeId) {
     }
     // A dynamic value can only be scoped at runtime, and only if this file defines something to
     // scope against. With no local names there is nothing for the call to do, so it is not emitted
-    // at all — and the two constants it would reference stay out of the bundle.
-    if (localNames.size === 0)
+    // at all — and the map it would reference stays out of the bundle.
+    if (names.size === 0)
         return undefined;
     const expression = expressionSourceOf(parts, content);
     if (expression === undefined)
@@ -284,15 +282,36 @@ function classAttributeEdit(attribute, content, localNames, scopeId) {
     return {
         start,
         end,
-        text: `class={${SCOPE_CLASS_LOCAL}(${expression}, ${SCOPED_NAMES_LOCAL}, ${SCOPE_ID_LOCAL})}`,
+        text: `class={${SCOPE_CLASS_LOCAL}(${expression}, ${SCOPED_NAMES_LOCAL})}`,
     };
 }
+// `class:card={cond}` carries its class name in the DIRECTIVE, where the value rewrite above
+// cannot see it. Svelte rejects the directive on a COMPONENT (`component_invalid_directive`), so
+// only a host element reaches here — rewritten anyway, because a token left unscoped names a rule
+// that registered under the scoped name and is silently dead. The shorthand `class:card` expands
+// to `class:card__<scope>={card}`: the class is scoped, the variable it reads keeps its own name.
+function classDirectiveEdit(directive, content, names) {
+    const name = stringAt(directive, 'name');
+    const start = numberAt(directive, 'start');
+    const end = numberAt(directive, 'end');
+    if (name === undefined || start === undefined || end === undefined)
+        return undefined;
+    const scoped = scopeToken(name, names);
+    if (scoped === name)
+        return undefined;
+    const expression = sliceExpression(directive, content);
+    if (expression === undefined)
+        return undefined;
+    return { start, end, text: `class:${scoped}={${expression}}` };
+}
 // A lone `class={expr}` reproduces `expr` verbatim, so an arbitrary expression — a clsx array, a
 // ternary, a function call — passes through untouched and only its RESULT gets scoped. An
 // interpolated `class="a {b} c"` is rebuilt as the template literal Svelte itself would have
 // concatenated, so both shapes reduce to one expression the runtime helper can take.
 function expressionSourceOf(parts, content) {
-    if (parts.length === 1 && isRecord(parts[0]) && parts[0].type === 'ExpressionTag') {
+    if (parts.length === 1 &&
+        isRecord(parts[0]) &&
+        parts[0].type === 'ExpressionTag') {
         return sliceExpression(parts[0], content);
     }
     let literal = '';
@@ -326,18 +345,36 @@ function sliceExpression(part, content) {
     return content.slice(start, end);
 }
 function escapeTemplateLiteral(text) {
-    return text.replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/\$\{/g, '\\${');
+    return text
+        .replace(/\\/g, '\\\\')
+        .replace(/`/g, '\\`')
+        .replace(/\$\{/g, '\\${');
 }
 // ---------------------------------------------------------------------------------------------
 // Emitting
-function injectModuleScript(ast, content, styles, localNames, scopeId) {
+// `combinators` is compile-time-only — the registry matches by token subset and never reads it —
+// so it is stripped rather than shipped in every app bundle. Same cut `@symbiote-native/css-
+// parser`'s `serializeRules` makes for a standalone `.css` file; a Svelte `<style>` block has no
+// reason to ship more.
+function serializeRules(rules) {
+    return JSON.stringify(rules.map(({ tokens, specificity, order, style }) => ({
+        tokens,
+        specificity,
+        order,
+        style,
+    })));
+}
+function injectModuleScript(ast, content, rules, names) {
     const lines = [
-        `import { registerStyles as ${REGISTER_STYLES_LOCAL} } from '${ENGINE_MODULE}';`,
-        `${REGISTER_STYLES_LOCAL}(${JSON.stringify(styles)});`,
+        `import { registerRules as ${REGISTER_RULES_LOCAL} } from '${ENGINE_MODULE}';`,
+        `${REGISTER_RULES_LOCAL}(${serializeRules(rules)});`,
     ];
-    if (localNames.size > 0) {
+    if (names.size > 0) {
         lines.unshift(`import { scopeSvelteClass as ${SCOPE_CLASS_LOCAL} } from '${RUNTIME_MODULE}';`);
-        lines.push(`const ${SCOPED_NAMES_LOCAL} = new Set(${JSON.stringify([...localNames])});`, `const ${SCOPE_ID_LOCAL} = ${JSON.stringify(scopeId)};`);
+        // The SAME map the static rewrite above read, shipped verbatim: a dynamic value's tokens are
+        // only known at runtime, and re-deriving their names there is the divergence this map exists
+        // to make impossible.
+        lines.push(`const ${SCOPED_NAMES_LOCAL} = new Map(${JSON.stringify([...names])});`);
     }
     const source = lines.join(' ');
     // Svelte rejects a second `<script module>`, so an existing one is spliced into rather than

package/build/render.js

@@ -3,8 +3,8 @@
 // believing it is talking to the real DOM. Decided during Svelte adapter planning
 // (2026-08-11, svelte-adapter-dom-shim skill §10): single root per process, so
 // patchGlobals()/restoreGlobals() need no ref-counting.
-import { mount as svelteMount, unmount as svelteUnmount } from 'svelte';
-import { createSurface, disposeRoot, dlog, } from '@symbiote-native/engine';
+import { mount as svelteMount, unmount as svelteUnmount, } from 'svelte';
+import { createSurface, disposeRoot, dlog, reportUncaughtError, } from '@symbiote-native/engine';
 import { patchGlobals, restoreGlobals } from './dom-shim/index.js';
 import { createRootShimElement } from './root-element.js';
 // One Svelte app per surface — same re-mount-starts-clean shape as every other adapter's
@@ -18,6 +18,22 @@ function teardown(rootTag) {
     apps.delete(rootTag);
     disposeRoot(rootTag);
 }
+// `transformError` is svelte's own mount-level hook for errors a `<svelte:boundary>` is about to
+// HANDLE - upstream reaches for it to run SvelteKit's `handleError`. Svelte calls it only from
+// Boundary.#handle_error (dom/blocks/boundary.js), i.e. only once some boundary with an `onerror`
+// or a `failed` snippet has claimed the error, and it inherits down the boundary tree, so one
+// hook at mount covers every boundary the app writes. We use it as a read-only tap and return the
+// error untouched, so the `failed` snippet still receives the real thing.
+//
+// Why this is `dlog` and NOT reportUncaughtError - read this before "fixing" it back: writing a
+// `<svelte:boundary>` IS the developer saying "this can throw and I am handling it here".
+// Answering that with a full-screen redbox over the fallback the app just rendered contradicts
+// what the app asked for. The UNCAUGHT path below still reports; the only difference is whether
+// anyone claimed the error. Same asymmetry as the React adapter's onCaughtError.
+function tapBoundaryError(error) {
+    dlog(() => `svelte render (caught by <svelte:boundary>): ${String(error)}`);
+    return error;
+}
 export function mount(rootTag, RootComponent, props) {
     teardown(rootTag);
     // Safe to install unconditionally - patchGlobals() is itself idempotent if a surface is
@@ -25,7 +41,36 @@ export function mount(rootTag, RootComponent, props) {
     patchGlobals();
     const surface = createSurface(rootTag);
     const target = createRootShimElement(surface);
-    const svelteApp = svelteMount(RootComponent, { target, props: props ?? {} });
+    let svelteApp;
+    try {
+        svelteApp = svelteMount(RootComponent, {
+            target,
+            props: props ?? {},
+            transformError: tapBoundaryError,
+        });
+    }
+    catch (error) {
+        // Svelte has no mount-level hook for an UNCAUGHT error, so the seam is the throw itself:
+        // while a subtree is still being created, error-handling.js rethrows synchronously
+        // (`handle_error` bails out before REACTION_RAN is set, and the implicit root boundary
+        // `_mount` installs carries only a `pending` snippet, so it re-throws too). Without this the
+        // throw left the surface half-committed - nothing painted, nothing logged, a blank screen.
+        //
+        // Reported AND rethrown, deliberately: the report is the channel we control and is the whole
+        // point of this seam, while the rethrow keeps upstream's contract that `mount()` fails loudly
+        // - an app or a test harness wrapping mount() in its own try/catch must still see the error.
+        //
+        // Reaches the SYNCHRONOUS mount-time throw only. An error raised later - a reactive update,
+        // an `$effect` body, a rejected `{#await}` - is rethrown from inside svelte's own microtask
+        // flush (queue_micro_task, internal/client/dom/task.js), past any try/catch of ours; those
+        // land on the host's uncaught-exception path. `flushSync()` here would pull the mount-time
+        // `$effect` case in, at the price of running user effects BEFORE the engine's first commit,
+        // where getNativeTag() is still undefined - a worse bug than the one it closes.
+        reportUncaughtError(error, {
+            origin: 'svelte render (no <svelte:boundary>)',
+        });
+        throw error;
+    }
     apps.set(rootTag, { svelteApp });
     return surface;
 }

package/build/scope-token.d.ts

@@ -1,2 +1,3 @@
-export declare function scopeToken(token: string, localNames: ReadonlySet<string>, scopeId: string): string;
-export declare function kebabToCamel(value: string): string;
+/** Authored class name -> the name it registers under. One spelling: nothing camelCases now. */
+export type IScopedNames = ReadonlyMap<string, string>;
+export declare function scopeToken(token: string, names: IScopedNames): string;

package/build/scope-token.js

@@ -1,4 +1,7 @@
-// The `<style>`-scoping rule for ONE class token, and nothing else.
+// The `<style>`-scoping rule for ONE class token, and nothing else: a lookup in the name map
+// @symbiote-native/css-parser built out of lightningcss's `exports`. A token the map does not
+// carry is one this file's `<style>` block never renamed — a `:global(...)` name, or a class
+// forwarded from somewhere else — and is returned VERBATIM.
 //
 // WHY THIS IS ITS OWN FILE — it looks like it belongs in `./style-scope`, and it cannot live
 // there. The build-time half (`preprocessor/scoped-styles.ts`) and the runtime half
@@ -14,20 +17,6 @@
 //
 // Keep this file import-free. Adding one import to it breaks `svelte-check` for every consuming
 // app, and nothing in this package's own test run would notice.
-const SCOPE_SEPARATOR = '__';
-// A token is matched in its camelCase form because that is the only form the registry is keyed
-// in (@symbiote-native/css-parser's `extractClassName` always camelCases, so `.card-title`
-// registers as `cardTitle`) while markup idiomatically writes the kebab form. A token this file's
-// `<style>` block does NOT define is returned VERBATIM, not camelCased — unlike Vue's rewriter,
-// which camelCases everything it sees. The engine's `resolveOne` already falls back kebab->camel
-// on a miss, so camelCasing here would buy nothing and would silently rename a class the author
-// is forwarding to some other file's global rule.
-export function scopeToken(token, localNames, scopeId) {
-    const camelToken = kebabToCamel(token);
-    return localNames.has(camelToken) ? camelToken + SCOPE_SEPARATOR + scopeId : token;
-}
-// Duplicated from @symbiote-native/css-parser rather than imported, for the same reason
-// core/engine/src/style-registry/index.ts duplicates it — plus the import-free constraint above.
-export function kebabToCamel(value) {
-    return value.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+export function scopeToken(token, names) {
+    return names.get(token) ?? token;
 }

package/build/style-scope.d.ts

@@ -1 +1,2 @@
-export declare function scopeSvelteClass(value: unknown, localNames: ReadonlySet<string>, scopeId: string): unknown;
+import { type IScopedNames } from './scope-token';
+export declare function scopeSvelteClass(value: unknown, names: IScopedNames): unknown;

package/build/style-scope.js

@@ -2,14 +2,16 @@
 // scoped-styles.ts` — rewrites every STATIC class token in a component's own markup while it
 // still has the source text. A DYNAMIC `class={expr}` has no tokens to read at build time, so
 // its value is wrapped in a call to `scopeSvelteClass` instead. Same split Vue's scoped-style
-// path already uses (`scopeClassName` in @symbiote-native/engine, symbiote-sfc-style-compiler §5).
-// Both halves apply the identical per-token rule by sharing `./scope-token` — see that file for
-// why the rule is not simply declared here.
+// path already uses (`renameClassTokens` in @symbiote-native/engine, symbiote-sfc-style-compiler
+// §5).
+// Both halves resolve every token through the SAME name map `@symbiote-native/css-parser` built
+// from lightningcss's `exports`, applied by `./scope-token` — see that file for why the lookup is
+// not simply declared here.
 //
-// WHY NOT REUSE THE ENGINE'S `scopeClassName` DIRECTLY. Its input surface is Vue's:
+// WHY NOT REUSE THE ENGINE'S `renameClassTokens` DIRECTLY. Its input surface is Vue's:
 // `string | Record<string, boolean> | Array<those>`. Svelte's is wider — `class={['card', cond &&
-// 'on']}` leaves a literal `false` in the array, which `scopeClassName` hands to `.split()` and
-// throws on. Widening a function the other three adapters depend on, to serve one adapter's
+// 'on']}` leaves a literal `false` in the array, which `renameClassTokens` hands to `.split()`
+// and throws on. Widening a function the other three adapters depend on, to serve one adapter's
 // syntax, is the trade §22b already refused for `resolveClassName`. Instead this normalizes
 // through the adapter's OWN clsx boundary first (`normalizeSvelteClass`) and only scopes what
 // comes back as a class string; everything else — a resolved style object, `false`, a mixed array
@@ -17,13 +19,13 @@
 import { normalizeSvelteClass } from './class-value.js';
 import { scopeToken } from './scope-token.js';
 const CLASS_SEPARATOR = ' ';
-export function scopeSvelteClass(value, localNames, scopeId) {
+export function scopeSvelteClass(value, names) {
     const normalized = normalizeSvelteClass(value);
     if (typeof normalized !== 'string')
         return normalized;
     return normalized
         .split(/\s+/)
         .filter(Boolean)
-        .map(token => scopeToken(token, localNames, scopeId))
+        .map(token => scopeToken(token, names))
         .join(CLASS_SEPARATOR);
 }

package/metro-svelte-transformer.cjs

@@ -58,7 +58,7 @@ function webOnlyConstructGuard() {
 
 // The `<style>` preprocessor, loaded the same lazy way and for the same reason. Unlike the guard
 // above (which only throws and hands the source back untouched), this one REWRITES the source —
-// it compiles the style block into registerStyles() output and scopes every `class` in the
+// it compiles the style block into registerRules() output and scopes every `class` in the
 // component's own markup — so its returned `code` is what compile() must be given. See
 // src/preprocessor/scoped-styles.ts for why Svelte's own `result.css` cannot be used instead.
 let scopedStylesPromise;
@@ -68,6 +68,18 @@ function scopedStylesPreprocessor() {
   );
   return scopedStylesPromise;
 }
+
+// Collapses whitespace inside Text node content the same way a browser/Vue's template compiler
+// would (svelte-adapter-dom-shim skill §16/§29) — without it, a sentence an author wrapped across
+// source lines for readability ships a literal newline + indent into the native text content and
+// renders as a forced line break on device. Loaded lazily for the same reason as the two above.
+let collapseTextWhitespacePromise;
+function collapseTextWhitespacePreprocessor() {
+  collapseTextWhitespacePromise ??= import('@symbiote-native/svelte/collapse-text-whitespace').then(
+    mod => mod.collapseTextWhitespace(),
+  );
+  return collapseTextWhitespacePromise;
+}
 //
 // Svelte 5's compiler strips <script lang="ts"> types structurally, with no external type
 // resolution needed (unlike @vue/compiler-sfc's compileScript, which needs registerTS + a real
@@ -116,9 +128,12 @@ module.exports.transform = async function transform(params) {
     // Throws with a message naming the RN alternative. Deliberately BEFORE compile(), so the
     // author sees the real diagnosis rather than a downstream symptom.
     (await webOnlyConstructGuard()).markup({ content: params.src, filename: params.filename });
-    const preprocessed = await (
+    const stylePreprocessed = await (
       await scopedStylesPreprocessor()
     ).markup({ content: params.src, filename: params.filename });
+    const preprocessed = await (
+      await collapseTextWhitespacePreprocessor()
+    ).markup({ content: stylePreprocessed.code, filename: params.filename });
     const code = compileSvelteFile(preprocessed.code, params.filename);
     // Re-label as .tsx so RN's transformer processes the module exactly like app source; Metro
     // tracks the real path separately. Matches metro-vue-transformer.cjs's identical trick.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbiote-native/svelte",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "SymbioteNative's Svelte adapter — a DOM shim over stock compiled Svelte output driving real native iOS/Android views through the same engine as every other adapter.",
   "license": "MIT",
   "repository": {
@@ -38,6 +38,10 @@
       "types": "./build/preprocessor/scoped-styles.d.ts",
       "default": "./build/preprocessor/scoped-styles.js"
     },
+    "./collapse-text-whitespace": {
+      "types": "./build/preprocessor/collapse-text-whitespace.d.ts",
+      "default": "./build/preprocessor/collapse-text-whitespace.js"
+    },
     "./style-scope": {
       "types": "./build/style-scope.d.ts",
       "default": "./build/style-scope.js"
@@ -59,8 +63,8 @@
   },
   "dependencies": {
     "typescript": "~6.0.0",
-    "@symbiote-native/components": "0.4.0",
-    "@symbiote-native/css-parser": "0.3.0"
+    "@symbiote-native/components": "0.5.0",
+    "@symbiote-native/css-parser": "0.4.0"
   },
   "peerDependencies": {
     "@symbiote-native/engine": ">=0.1.7",
@@ -71,10 +75,10 @@
     "@vue/runtime-core": "^3.5.13",
     "react": "19.2.3",
     "svelte": "^5.56.0",
-    "@symbiote-native/engine": "0.2.0",
-    "@symbiote-native/react": "0.3.0",
-    "@symbiote-native/test-utils": "0.1.6",
-    "@symbiote-native/vue": "0.4.0"
+    "@symbiote-native/engine": "0.3.0",
+    "@symbiote-native/react": "0.4.0",
+    "@symbiote-native/test-utils": "0.2.0",
+    "@symbiote-native/vue": "0.5.0"
   },
   "scripts": {
     "typecheck": "tsc --build",