@symbiote-native/svelte 0.1.0

package/build/preprocessor/forbid-web-only-constructs.js

@@ -0,0 +1,204 @@
+// §7 of svelte-adapter-dom-shim (DECIDED 2026-08-11): the constructs that compile cleanly and
+// then silently do nothing under the DOM shim. Everything else in the original §4 table is
+// already closed by "app code can't reach it" or "the TS/Svelte compiler already errors on it for
+// free" (see the skill for the full reachability table). This preprocessor is the guard for what
+// is left.
+//
+// Three families, one mechanism:
+//   <svelte:head|window|document|body>  — compiler-level special elements with no RN meaning.
+//   {@html expr}                        — compiles to $.html(), which either assigns to an
+//     `innerHTML` that ShimElement does not define (a silent no-op producing zero nodes) or
+//     reaches create_element('template'), a tag with no descriptorFor entry. There is no
+//     meaningful HTML to render into a native tree, so it fails LOUDLY here instead.
+//   browser-only IMPORTS from svelte's own subpackages — the same failure one level up. These
+//     read browser globals React Native does not define, so every value they hand back is
+//     permanently undefined/false with no error anywhere. Measured per subpackage (see §25):
+//     `svelte/reactivity/window` and `MediaQuery` are the ONLY browser-dependent members —
+//     `svelte/store`, `svelte/easing`, `svelte/motion`, `svelte/events`, `svelte/attachments`
+//     and the rest of `svelte/reactivity` (SvelteMap/Set/Date/URL, createSubscriber) are pure
+//     and must keep working, so this is a two-name list, not a subpackage ban.
+//
+// Registered in svelte.config.js's `preprocess`, NOT a standalone lint rule: `svelte-check`
+// and the Svelte VS Code/language-server extension run the SAME preprocessor pipeline, so this
+// one mechanism produces both an editor-time diagnostic and a build failure — no second
+// mechanism needed.
+//
+// Verified against the installed svelte@5.56.8: `parse(content, {modern: true})` on throwaway
+// markup confirmed `Root.fragment.nodes[].type` === 'SvelteHead' / 'SvelteWindow' /
+// 'SvelteDocument' / 'SvelteBody' / 'HtmlTag', and running this preprocessor's `markup()`
+// against forbidden vs. clean markup threw/passed as expected.
+import { parse } from 'svelte/compiler';
+const SPECIAL_ELEMENT_ADVICE = 'has no meaning under React Native and is silently inert under the Symbiote DOM shim ' +
+    '(svelte-adapter-dom-shim skill §4/§7). Use the matching runtime module instead ' +
+    '(Dimensions / AppState / StatusBar / …).';
+const FORBIDDEN = new Map([
+    ['SvelteHead', { label: '<svelte:head>', advice: SPECIAL_ELEMENT_ADVICE }],
+    ['SvelteWindow', { label: '<svelte:window>', advice: SPECIAL_ELEMENT_ADVICE }],
+    ['SvelteDocument', { label: '<svelte:document>', advice: SPECIAL_ELEMENT_ADVICE }],
+    ['SvelteBody', { label: '<svelte:body>', advice: SPECIAL_ELEMENT_ADVICE }],
+    [
+        'HtmlTag',
+        {
+            label: '{@html …}',
+            advice: 'renders an HTML string, and a native view tree has no HTML to render it into — it ' +
+                'compiles and then paints nothing (svelte-adapter-dom-shim skill §4/§7). Build the ' +
+                'content out of <View>/<Text> from @symbiote-native/svelte instead; for rich text from ' +
+                'a remote source, parse it yourself and map each node onto those primitives.',
+        },
+    ],
+]);
+// The real AST shape isn't pinned here (see the VERIFY note above), so this reads it through
+// runtime guards on `unknown` rather than trusting an unverified type — narrower and safer
+// than casting past whatever `parse()`'s declared return type turns out to be.
+function isRecord(value) {
+    return typeof value === 'object' && value !== null;
+}
+function nodeType(node) {
+    if (!isRecord(node))
+        return undefined;
+    const type = node.type;
+    return typeof type === 'string' ? type : undefined;
+}
+function childNodes(node) {
+    if (!isRecord(node))
+        return [];
+    const fragment = node.fragment;
+    if (!isRecord(fragment))
+        return [];
+    const nodes = fragment.nodes;
+    return Array.isArray(nodes) ? nodes : [];
+}
+// `{@html}` can sit anywhere a node can — inside an {#if}/{#each} branch, a snippet body, an
+// element's children — and those hang off different keys than `fragment.nodes`, so the walk
+// descends through every child value rather than the one fragment field the special elements
+// happen to live under.
+function nestedNodes(node) {
+    if (!isRecord(node))
+        return [];
+    const nested = [];
+    for (const value of Object.values(node)) {
+        if (Array.isArray(value))
+            nested.push(...value);
+        else if (isRecord(value))
+            nested.push(value);
+    }
+    return nested;
+}
+function walk(nodes, filename, seen) {
+    for (const node of nodes) {
+        if (!isRecord(node) || seen.has(node))
+            continue;
+        seen.add(node);
+        const type = nodeType(node);
+        const forbidden = type === undefined ? undefined : FORBIDDEN.get(type);
+        if (forbidden !== undefined) {
+            throw new Error(`${filename}: ${forbidden.label} ${forbidden.advice}`);
+        }
+        walk([...childNodes(node), ...nestedNodes(node)], filename, seen);
+    }
+}
+// The two browser-dependent members of svelte's own runtime, and what to reach for instead.
+// Keyed by module specifier; `named` restricts the ban to specific exports of a module whose
+// other exports are fine (all of `svelte/reactivity` except MediaQuery is pure).
+const FORBIDDEN_IMPORT = new Map([
+    [
+        'svelte/reactivity/window',
+        {
+            advice: 'reads browser globals (window.innerWidth / scrollY / navigator.onLine …) that React ' +
+                'Native never defines, so every value it hands back stays undefined with no error. ' +
+                'Import innerWidth / innerHeight / outerWidth / outerHeight / devicePixelRatio from ' +
+                '@symbiote-native/svelte instead (svelte-adapter-dom-shim skill §25). There is no ' +
+                'equivalent for scrollX/scrollY/screenLeft/screenTop — a native app has no window-level ' +
+                'scroll offset and no position in a window manager; read scroll from a ScrollView.',
+        },
+    ],
+    [
+        'svelte/reactivity',
+        {
+            named: new Set(['MediaQuery']),
+            advice: 'is built on window.matchMedia, which React Native does not have, so every query ' +
+                'answers false — indistinguishable from a legitimate no. Use orientation or ' +
+                'createWidthQuery from @symbiote-native/svelte, or useColorScheme for ' +
+                'prefers-color-scheme (svelte-adapter-dom-shim skill §25). The rest of this module ' +
+                '(SvelteMap / SvelteSet / SvelteDate / SvelteURL / createSubscriber) is pure and fine.',
+        },
+    ],
+]);
+// The parsed script halves, read through runtime guards on `unknown` rather than a cast — the
+// same discipline the fragment walk above uses on the same parse() output.
+function scriptBodies(ast) {
+    if (!isRecord(ast))
+        return [];
+    return ['instance', 'module'].flatMap(half => {
+        const script = ast[half];
+        if (!isRecord(script))
+            return [];
+        const scriptContent = script.content;
+        if (!isRecord(scriptContent))
+            return [];
+        return Array.isArray(scriptContent.body) ? scriptContent.body : [];
+    });
+}
+function importSpecifiers(node) {
+    const specifiers = node.specifiers;
+    if (!Array.isArray(specifiers))
+        return [];
+    return specifiers.filter(isRecord);
+}
+// Only an ImportSpecifier carries `imported`; a namespace or default specifier has no member
+// name to read, which is why they are handled separately below.
+function importedNames(node) {
+    return importSpecifiers(node).flatMap(specifier => {
+        const imported = specifier.imported;
+        if (!isRecord(imported))
+            return [];
+        return typeof imported.name === 'string' ? [imported.name] : [];
+    });
+}
+// A default specifier is deliberately NOT treated as a dodge: none of these svelte subpackages
+// has a default export, and a default binding cannot reach a named member anyway.
+function hasNamespaceSpecifier(node) {
+    return importSpecifiers(node).some(specifier => specifier.type === 'ImportNamespaceSpecifier');
+}
+function checkImports(ast, filename) {
+    for (const node of scriptBodies(ast)) {
+        if (!isRecord(node) || node.type !== 'ImportDeclaration')
+            continue;
+        const source = node.source;
+        if (!isRecord(source) || typeof source.value !== 'string')
+            continue;
+        const rule = FORBIDDEN_IMPORT.get(source.value);
+        if (rule === undefined)
+            continue;
+        if (rule.named === undefined) {
+            throw new Error(`${filename}: importing from '${source.value}' ${rule.advice}`);
+        }
+        // `import * as R from 'svelte/reactivity'` hands the whole module object over under one
+        // local name, so whether app code reaches R.MediaQuery is decided at runtime and this check
+        // can never see it. A named ban is only enforceable on named imports, so the namespace shape
+        // is refused outright instead of being waved through.
+        if (hasNamespaceSpecifier(node)) {
+            const banned = [...rule.named].map(name => `'${name}'`).join(' / ');
+            throw new Error(`${filename}: '${source.value}' is imported as a namespace, which cannot be checked — ` +
+                `import the members you need by name so ${banned} is ruled out. ${banned} ` +
+                rule.advice);
+        }
+        for (const name of importedNames(node)) {
+            if (rule.named.has(name)) {
+                throw new Error(`${filename}: '${name}' from '${source.value}' ${rule.advice}`);
+            }
+        }
+    }
+}
+export function forbidWebOnlyConstructs() {
+    return {
+        markup({ content, filename }) {
+            const ast = parse(content, { filename, modern: true });
+            const where = filename ?? '<svelte>';
+            walk(childNodes(ast), where, new Set());
+            // One parse serves both checks: the fragment walk above, and the script imports here.
+            checkImports(ast, where);
+            return { code: content };
+        },
+    };
+}

package/build/preprocessor/scoped-styles.d.ts

@@ -0,0 +1,10 @@
+interface IMarkupInput {
+    readonly content: string;
+    readonly filename?: string;
+}
+export declare function scopedStyles(): {
+    markup(input: IMarkupInput): Promise<{
+        code: string;
+    }>;
+};
+export {};

package/build/preprocessor/scoped-styles.js

@@ -0,0 +1,399 @@
+// A `.svelte` file's `<style>` block, compiled to real native styles.
+//
+// WHY SVELTE'S OWN CSS OUTPUT CANNOT BE CONSUMED — measure this before "simplifying" any of the
+// below back to "just wire up `result.css`". Compiled with this adapter's options
+// (`generate:'client', fragments:'tree', css:'external'`), a `<style>` block behaves one of two
+// ways:
+//
+//   <symbiote-view class="card">   ->  result.css: `.card.svelte-4psua6 { … }`
+//                                      result.js:  `$.set_class(node, 1, 'card svelte-4psua6')`
+//   <View class="card">            ->  warning: css_unused_selector
+//                                      result.css: `/* (unused) .card { … }*/`
+//
+// The first is dead: `set_class` writes `dom.className`, which `ShimElement` does not implement,
+// and app code never authors a host tag anyway (§22a). The second is 100% of real app code —
+// Svelte refuses to scope a parent's styles into a child COMPONENT, so by the time `result.css`
+// exists every rule is commented out. Nothing is left to register, so the scoping has to happen
+// HERE, before the compiler ever sees the block — the same pass `adapters/vue/metro-vue-
+// transformer.cjs` runs for a Vue SFC (symbiote-sfc-style-compiler §5), moved from a compiler
+// 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.
+//   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.
+//
+// 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
+// — reproduced exactly, step 2 only ever rewrites this file's own source text. Where this
+// diverges is the component boundary: on the web, `<Child class="card"/>` does NOT apply the
+// parent's `.card`, because the hash never lands on the child's element. Here it does, because
+// the scoped NAME travels as an ordinary prop and every Symbiote component forwards `class` down
+// to its host node. Not incidental: a component here renders only other components, so the web
+// rule would make every `<style>` block a no-op — exactly the bug this file exists to fix. An
+// author's mental model still holds: "my `<style>` styles the markup I wrote".
+//
+// Registered in `svelte.config.js`'s `preprocess` AND called directly by
+// `metro-svelte-transformer.cjs`, for the same reason `forbid-web-only-constructs.ts` is — the
+// config covers `svelte-check`/the language server, the transformer covers a consuming app whose
+// own config never registers it.
+//
+// LINE NUMBERS ARE PRESERVED ON PURPOSE (this preprocessor emits no source map): the `<style>`
+// block is replaced by the same number of newlines it occupied rather than deleted outright, and
+// the injected script is one line appended after all original content, or spliced onto the
+// 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';
+// 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
+// (svelte-check, the language server), which strips types off a `.ts` file but still applies its
+// own ESM resolver to what that file imports, where an extensionless relative specifier is
+// ERR_MODULE_NOT_FOUND. The `exports` map supplies the extension at both targets — `src`
+// 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';
+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';
+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 STYLE_LANG_TO_PREPROCESSOR = new Map([
+    ['css', 'css'],
+    ['scss', 'scss'],
+    ['sass', 'scss'],
+    ['less', 'less'],
+    ['stylus', 'stylus'],
+    ['styl', 'stylus'],
+]);
+// Sass's indented syntax is selected off a `.sass`-suffixed PATH, and an inline block has no path
+// of its own — so one is synthesized from the component's, exactly as Vue's transformer does.
+const INDENTED_SASS_LANG = 'sass';
+export function scopedStyles() {
+    return {
+        async markup({ content, filename }) {
+            // Cheap gate: the overwhelming majority of components carry no <style> block at all, and
+            // 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);
+            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));
+            }
+            return { code: applyEdits(content, edits) };
+        },
+    };
+}
+// ---------------------------------------------------------------------------------------------
+// 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.
+function isRecord(value) {
+    return typeof value === 'object' && value !== null;
+}
+function numberAt(node, key) {
+    const value = node[key];
+    return typeof value === 'number' ? value : undefined;
+}
+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 [];
+    const fragment = ast.fragment;
+    if (!isRecord(fragment))
+        return [];
+    return Array.isArray(fragment.nodes) ? fragment.nodes : [];
+}
+// The markup walk descends through every child value rather than one known key: a `class`
+// attribute can sit inside an {#if}/{#each} branch, a snippet body, or a component's children,
+// and those hang off different fields. Deliberately started from `ast.fragment` alone, never the
+// root — the `css` subtree has its own nodes carrying a `name` and would be walked for nothing.
+function nestedNodes(node) {
+    const nested = [];
+    for (const value of Object.values(node)) {
+        if (Array.isArray(value))
+            nested.push(...value);
+        else if (isRecord(value))
+            nested.push(value);
+    }
+    return nested;
+}
+function collectClassEdits(nodes, content, localNames, scopeId, edits) {
+    for (const node of nodes) {
+        if (!isRecord(node))
+            continue;
+        if (node.type === 'Attribute' && node.name === 'class') {
+            const edit = classAttributeEdit(node, content, localNames, scopeId);
+            if (edit !== undefined)
+                edits.push(edit);
+            continue;
+        }
+        collectClassEdits(nestedNodes(node), content, localNames, scopeId, edits);
+    }
+}
+// `value` is `true` for a bare `class` attribute, one node for a lone value, or an array mixing
+// Text and ExpressionTag for an interpolated one (`class="card {extra}"`). Normalizing to an
+// array up front removes the per-shape branching everywhere below.
+function attributeValueParts(attribute) {
+    const value = attribute.value;
+    if (value === true)
+        return undefined;
+    if (Array.isArray(value))
+        return value;
+    return isRecord(value) ? [value] : undefined;
+}
+function staticTextOf(attribute) {
+    const parts = attributeValueParts(attribute);
+    if (parts === undefined)
+        return undefined;
+    let text = '';
+    for (const part of parts) {
+        if (!isRecord(part) || part.type !== 'Text')
+            return undefined;
+        const data = stringAt(part, 'data');
+        if (data === undefined)
+            return undefined;
+        text += data;
+    }
+    return text;
+}
+function classAttributeEdit(attribute, content, localNames, scopeId) {
+    const start = numberAt(attribute, 'start');
+    const end = numberAt(attribute, 'end');
+    const parts = attributeValueParts(attribute);
+    if (start === undefined || end === undefined || parts === undefined)
+        return undefined;
+    const staticValue = staticTextOf(attribute);
+    if (staticValue !== undefined) {
+        const scoped = staticValue
+            .split(/\s+/)
+            .filter(Boolean)
+            .map(token => scopeToken(token, localNames, scopeId))
+            .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.
+        if (scoped === staticValue)
+            return undefined;
+        return { start, end, text: `class="${scoped}"` };
+    }
+    // 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)
+        return undefined;
+    const expression = expressionSourceOf(parts, content);
+    if (expression === undefined)
+        return undefined;
+    return {
+        start,
+        end,
+        text: `class={${SCOPE_CLASS_LOCAL}(${expression}, ${SCOPED_NAMES_LOCAL}, ${SCOPE_ID_LOCAL})}`,
+    };
+}
+// 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') {
+        return sliceExpression(parts[0], content);
+    }
+    let literal = '';
+    for (const part of parts) {
+        if (!isRecord(part))
+            return undefined;
+        if (part.type === 'Text') {
+            const data = stringAt(part, 'data');
+            if (data === undefined)
+                return undefined;
+            literal += escapeTemplateLiteral(data);
+            continue;
+        }
+        if (part.type !== 'ExpressionTag')
+            return undefined;
+        const expression = sliceExpression(part, content);
+        if (expression === undefined)
+            return undefined;
+        literal += `\${${expression}}`;
+    }
+    return `\`${literal}\``;
+}
+function sliceExpression(part, content) {
+    const expression = part.expression;
+    if (!isRecord(expression))
+        return undefined;
+    const start = numberAt(expression, 'start');
+    const end = numberAt(expression, 'end');
+    if (start === undefined || end === undefined)
+        return undefined;
+    return content.slice(start, end);
+}
+function escapeTemplateLiteral(text) {
+    return text.replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/\$\{/g, '\\${');
+}
+// ---------------------------------------------------------------------------------------------
+// Emitting
+function injectModuleScript(ast, content, styles, localNames, scopeId) {
+    const lines = [
+        `import { registerStyles as ${REGISTER_STYLES_LOCAL} } from '${ENGINE_MODULE}';`,
+        `${REGISTER_STYLES_LOCAL}(${JSON.stringify(styles)});`,
+    ];
+    if (localNames.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)};`);
+    }
+    const source = lines.join(' ');
+    // Svelte rejects a second `<script module>`, so an existing one is spliced into rather than
+    // duplicated — at the very start of its body, which is the end of its own opening-tag line, so
+    // no line number and no column of real code moves.
+    const moduleBody = moduleScriptBodyStart(ast);
+    if (moduleBody !== undefined) {
+        return { start: moduleBody, end: moduleBody, text: source };
+    }
+    // No module script: append one after everything. A trailing `<script module>` compiles and its
+    // consts are visible to the markup above it (verified against svelte 5.56.8), and appending
+    // leaves every original offset untouched.
+    const lang = instanceScriptLang(ast) === 'ts' ? ' lang="ts"' : '';
+    return {
+        start: content.length,
+        end: content.length,
+        text: `\n<script module${lang}>${source}</script>\n`,
+    };
+}
+function moduleScriptBodyStart(ast) {
+    if (!isRecord(ast))
+        return undefined;
+    const moduleScript = ast.module;
+    if (!isRecord(moduleScript) || !isRecord(moduleScript.content))
+        return undefined;
+    return numberAt(moduleScript.content, 'start');
+}
+function instanceScriptLang(ast) {
+    if (!isRecord(ast))
+        return undefined;
+    const instance = ast.instance;
+    if (!isRecord(instance) || !Array.isArray(instance.attributes))
+        return undefined;
+    for (const attribute of instance.attributes) {
+        if (isRecord(attribute) && attribute.name === 'lang')
+            return staticTextOf(attribute);
+    }
+    return undefined;
+}
+// Newline-for-newline, so everything below the removed block keeps its line number.
+function blankOut(start, end, content) {
+    const removed = content.slice(start, end);
+    return { start, end, text: '\n'.repeat(countNewlines(removed)) };
+}
+function countNewlines(text) {
+    let count = 0;
+    for (const character of text) {
+        if (character === '\n')
+            count += 1;
+    }
+    return count;
+}
+// Applied back-to-front so an earlier edit's offsets stay valid. Edits never overlap: each one
+// covers a distinct attribute, the style block, or a zero-width insertion point.
+function applyEdits(content, edits) {
+    return [...edits]
+        .sort((left, right) => right.start - left.start)
+        .reduce((source, edit) => source.slice(0, edit.start) + edit.text + source.slice(edit.end), content);
+}

package/build/render.d.ts

@@ -0,0 +1,7 @@
+import { type Component } from 'svelte';
+import { type IRootTag, type SymbioteSurface } from '@symbiote-native/engine';
+export declare function mount(rootTag: IRootTag, RootComponent: Component, props?: object): SymbioteSurface;
+export declare function unmount(rootTag: IRootTag): void;
+declare global {
+    var RN$stopSurface: ((surfaceId: number) => void) | undefined;
+}

package/build/render.js

@@ -0,0 +1,46 @@
+// Mount a Svelte app onto a Fabric surface. The native host hands us a rootTag; we create a
+// surface for it, install the DOM shim, and let stock compiled Svelte output drive it while
+// 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 { 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
+// render.ts (Fast Refresh / focus-lifecycle restarts a surface and reuses the rootTag).
+const apps = new Map();
+function teardown(rootTag) {
+    const entry = apps.get(rootTag);
+    if (entry === undefined)
+        return;
+    svelteUnmount(entry.svelteApp);
+    apps.delete(rootTag);
+    disposeRoot(rootTag);
+}
+export function mount(rootTag, RootComponent, props) {
+    teardown(rootTag);
+    // Safe to install unconditionally - patchGlobals() is itself idempotent if a surface is
+    // already live.
+    patchGlobals();
+    const surface = createSurface(rootTag);
+    const target = createRootShimElement(surface);
+    const svelteApp = svelteMount(RootComponent, { target, props: props ?? {} });
+    apps.set(rootTag, { svelteApp });
+    return surface;
+}
+// Tear down a surface by rootTag: the public pair of `mount`, and the JS half of the
+// bridgeless `RN$stopSurface` contract (see installStopSurfaceGlobal below).
+export function unmount(rootTag) {
+    dlog(`svelte unmount root=${rootTag}`);
+    teardown(rootTag);
+    // No other surface can still need the shim (single root per process, see module header).
+    restoreGlobals();
+}
+function installStopSurfaceGlobal() {
+    globalThis.RN$stopSurface = (surfaceId) => {
+        unmount(surfaceId);
+    };
+    dlog('installed global.RN$stopSurface');
+}
+installStopSurfaceGlobal();