@dongmingzhixiu/vuexir-compiler 0.5.7 → 0.7.0

package/dist/transform/vue2ir.js

@@ -1,3 +1,4 @@
+import { transformSync } from 'esbuild';
 /**
  * Vue SFC → IR 最小转换器（P1-lite）
  *
@@ -15,10 +16,49 @@
  *  - 插值 {{ }}、v-for、v-if/v-show、:style/:class 绑定、组件、自定义标签
  *  - script 逻辑（事件绑定 @click 忽略 + 提示；R12 逻辑分仓 L1/L2/L3 属后续阶段）
  */
-import { parse } from '@vue/compiler-sfc';
-import { NodeTypes } from '@vue/compiler-core';
-import { CssParseError, mergeIrProps, parseCss, parseInlineStyle } from './css.js';
+import { parse, babelParse } from '@vue/compiler-sfc';
+import { NodeTypes, walkIdentifiers } from '@vue/compiler-core';
+import { CssParseError, mergeIrProps, parseCss, extractCssVariables, resolveCssRules } from './css.js';
+import { parseSvg } from './svg.js';
 import { buildStoreRegistry, findStoreAliases, parseSharedConstArrays } from './stores.js';
+// 样式上下文仅用于编译，不写入公开 IR。
+let inlineComponentsFlag = false;
+let hasLoopExpressions = false;
+let liveStoreObjectsFlag = false;
+let pageScriptBundleFlag = false;
+let componentScopeSeq = 0;
+let componentSlots = [];
+let componentPath = [];
+let templateAssets = {};
+let styleRuleTables = new WeakMap();
+let inheritedTextStyles = new WeakMap();
+const TEXT_STYLE_KEYS = ['color', 'fontSize', 'fontWeight', 'textAlign', 'lineHeight', 'lineHeightMultiplier', 'letterSpacing', 'fontFamily'];
+function cssElement(node) {
+    const attr = (name) => node.props.find((p) => p.type === NodeTypes.ATTRIBUTE && p.name === name);
+    const cls = attr('class');
+    const id = attr('id');
+    return { tag: node.tag, classes: cls && 'value' in cls ? cls.value?.content.split(/\s+/).filter(Boolean) ?? [] : [],
+        id: id && 'value' in id ? id.value?.content : undefined };
+}
+function applyTextInheritance(node, parent = {}) {
+    const own = inheritedTextStyles.get(node) ?? {};
+    const effective = { ...parent };
+    mergeIrProps(effective, own);
+    if (node.type === 'text' || node.type === 'button' || node.type === 'input' || node.type === 'vector') {
+        node.props ??= {};
+        const allowed = node.type === 'vector' ? ['color'] : node.type === 'text' ? TEXT_STYLE_KEYS : node.type === 'button'
+            ? ['color', 'fontSize', 'fontWeight'] : ['color', 'fontSize'];
+        for (const k of allowed) {
+            if ((k === 'lineHeight' && node.props.lineHeightMultiplier !== undefined) ||
+                (k === 'lineHeightMultiplier' && node.props.lineHeight !== undefined))
+                continue;
+            if ((own[k] === undefined || node.props[k] === undefined) && effective[k] !== undefined)
+                node.props[k] = effective[k];
+        }
+    }
+    for (const child of node.children ?? [])
+        applyTextInheritance(child, effective);
+}
 export class VueCompileError extends Error {
 }
 /** R90 store getter 降级告警（flattenStorePath 无 warnings 参数，先收集后并入） */
@@ -34,10 +74,39 @@ let jsExprStateNames = [];
 /** 把一段 JS 表达式注册为运行时求值状态，返回状态名（模板 bind 用） */
 function addJsExprState(expr) {
     const name = `_vrnE${jsExprSeq++}`;
-    // ① ref.value → stateStore.x；② 裸状态名 → stateStore.x（对象态/字符串态都要走 stateStore，
-    //    否则 JS 里没有这个变量）；③ 形如 fn( 的调用不重写（那是 utils bundle 提供的全局函数）
-    let js = expr.replace(/\b([A-Za-z_$][\w$]*)\.value\b/g, (all, id) => jsExprStateNames.includes(id) ? `stateStore.${id}` : all);
-    js = js.replace(/(?<![.\w$])([A-Za-z_$][\w$]*)(?!\s*\()/g, (all, id) => jsExprStateNames.includes(id) ? `stateStore.${id}` : all);
+    const edits = [];
+    const aliases = activeLoops.flatMap((l) => [l.itemKey, ...(l.indexKey ? [l.indexKey] : [])]);
+    let scoped = false;
+    let ast;
+    try {
+        ast = babelParse(`(${expr})`, { sourceType: 'module', plugins: ['typescript'] });
+    }
+    catch (error) {
+        throw new VueCompileError(`模板表达式无法解析「${expr.slice(0, 320)}」：${error.message}`);
+    }
+    walkIdentifiers(ast.program, (id, parent, _stack, isReference, isLocal) => {
+        if (!isReference || isLocal)
+            return;
+        if (aliases.includes(id.name))
+            scoped = true;
+        if (!jsExprStateNames.includes(id.name))
+            return;
+        const read = `__vrnRead(${JSON.stringify(id.name)})`;
+        if (parent?.type === 'MemberExpression' && parent.object === id && !parent.computed && parent.property.type === 'Identifier' && parent.property.name === 'value') {
+            edits.push({ start: parent.start - 1, end: parent.end - 1, value: read });
+        }
+        else {
+            const shorthand = parent?.type === 'ObjectProperty' && parent.shorthand;
+            edits.push({ start: id.start - 1, end: id.end - 1, value: shorthand ? `${id.name}: ${read}` : read });
+        }
+    });
+    let js = expr;
+    for (const edit of edits.sort((a, b) => b.start - a.start))
+        js = js.slice(0, edit.start) + edit.value + js.slice(edit.end);
+    if (scoped) {
+        hasLoopExpressions = true;
+        return '__vrnLoop:' + JSON.stringify({ expression: js, aliases });
+    }
     jsExprStates.push({ name, init: '', computed: js });
     return name;
 }
@@ -53,7 +122,7 @@ let storeAliases = new Map();
 function flattenStorePath(name) {
     // R123：页面脚本自己的响应式绑定（soon/nearest/…）由运行时同步填充，
     // 绝不能再被 store 折叠改写成 store_xxx（否则 v-for 会去读静态状态，永远是空）
-    if (jsExprStateNames.includes(name))
+    if (jsExprStateNames.includes(name) || (liveStoreObjectsFlag && jsExprStateNames.includes(name.split('.')[0])))
         return name;
     // R89：computed 折叠出的派生名（all → ui_upcoming；all.length → ui_upcoming.length）
     if (derivedNames.size > 0) {
@@ -307,8 +376,76 @@ export function rewriteStateRefs(body, names) {
     const re = new RegExp(`\\b(${names.map((n) => n.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('|')})\\.value\\b`, 'g');
     return body.replace(re, (_all, n) => `stateStore.${n}`);
 }
+export const RUNTIME_BOOTSTRAP_SOURCE = `
+if (!globalThis.__vrnBootstrapReady) {
+  globalThis.__vrnBootstrapReady = true;
+  // 宿主没有浏览器 window；仅提供业务常用的全局别名与视口事件接口，不引入 DOM 渲染。
+  if (typeof window === "undefined") {
+    var window = globalThis;
+    window.innerWidth = 390;
+    window.innerHeight = 844;
+    window.location = {hash:'',href:'app://vuexir'};
+    window.history = {replaceState:function(_state,_title,url){window.location.hash=String(url);}};
+    window.addEventListener = function() {};
+    window.removeEventListener = function() {};
+  }
+// R72 定时器宿主 shim：宿主（JavaScriptCore）未注入时用宿主桥实现，保证 Promise/await 延时可用；
+// 浏览器预览器已有原生 setTimeout，此处不覆盖。
+var __timerSeq = 0;
+var __timers = {};
+if (typeof setTimeout !== "function") {
+  var setTimeout = function (fn, ms) {
+    var id = ++__timerSeq;
+    if (typeof __nativeSetTimeout === "function") {
+      __nativeSetTimeout(id, Number(ms) || 0);
+      __timers[id] = fn;
+      return id;
+    }
+    return 0;
+  };
+  var clearTimeout = function (id) {
+    delete __timers[id];
+    if (typeof __nativeClearTimeout === "function") __nativeClearTimeout(Number(id));
+  };
+  // 宿主回调入口（__nativeSetTimeout 到期后由原生调用）
+  var __vrnRunTimer = function (id) {
+    var fn = __timers[id];
+    delete __timers[id];
+    if (typeof fn === "function") fn();
+  };
+  var setInterval = function (fn, ms) {
+    var id = ++__timerSeq;
+    __timers[id] = { fn: fn, ms: Number(ms) || 0, repeat: true };
+    if (typeof __nativeSetInterval === "function") __nativeSetInterval(id, Number(ms) || 0);
+    return id;
+  };
+  var clearInterval = function (id) {
+    delete __timers[id];
+    if (typeof __nativeClearInterval === "function") __nativeClearInterval(Number(id));
+  };
+  var __vrnRunInterval = function (id) {
+    var t = __timers[id];
+    if (t && t.repeat && typeof t.fn === "function") t.fn();
+  };
+}
+if (typeof queueMicrotask !== "function") {
+  var queueMicrotask = function (fn) {
+    Promise.resolve().then(fn);
+  };
+}
+
+
+  if (typeof localStorage === "undefined") {
+    var localStorage = {
+      getItem: function(k) { return typeof __lsGet === "function" ? __lsGet("vrn." + k) : null; },
+      setItem: function(k,v) { if(typeof __lsSet === "function") __lsSet("vrn." + k,String(v)); },
+      removeItem: function(k) { if(typeof __lsSet === "function") __lsSet("vrn." + k,null); }
+    };
+  }
+}
+`;
 /** 生成 runtime.js 完整内容（M3：stateStore Proxy + handlers + onMounted + localStorage shim） */
-export function generateRuntimeSource(states, handlers, onMounted, onMountedAsync = false) {
+export function generateRuntimeSource(states, handlers, onMounted, onMountedAsync = false, externalScript = false) {
     // R96 computed：JS 运行时按表达式求值并写回 stateStore（写回经 Proxy → pushState 直达原生）
     const computedStates = states.filter((st) => st.computed);
     const computedBlock = computedStates.length === 0
@@ -331,7 +468,7 @@ __vrnRecompute();
     __vrnRecompute();
     // R122：页面脚本（__vrnPage）的真实值必须最后写入，否则会被静态 computed 覆盖成空
     __vrnSyncPage();
-    if (++__n < 20 && typeof setTimeout === "function") setTimeout(__tick, 100);
+    if (typeof setTimeout === "function") setTimeout(__tick, 100);
   }
   __tick();
 })();
@@ -352,7 +489,7 @@ __vrnRecompute();
                             : `"${s.init.replace(/"/g, '\\"')}"`;
         return `  ${s.name}: ${v}`;
     });
-    const handlerSrc = handlers
+    const handlerSrc = (externalScript ? [] : handlers)
         .map((h) => `${h.async ? 'async ' : ''}function ${h.name}(${h.params}) {\n${indentBody(h.body)}\n${
     // R96/R98：改完状态后重算派生值（computed / 表达式下沉），否则界面不会跟着变
     (states.some((st) => st.computed) ? '  if (typeof __vrnRecompute === "function") __vrnRecompute();\n' : '')}}`)
@@ -367,6 +504,7 @@ Object.keys(__stateInit).forEach(function (k) { __stateStore[k] = __stateInit[k]
 var __fromSwift = false;
 var stateStore = new Proxy(__stateStore, {
   set: function (t, k, v) {
+    if(t[k] === v) return true;
     t[k] = v;
     if (!__fromSwift && typeof __setState === "function") {
       // M4b 动态列表：数组/对象 → JSON 字符串写回原生（Swift 侧解码渲染）
@@ -385,50 +523,7 @@ function fetch(url) {
     });
   });
 }
-// R72 定时器宿主 shim：宿主（JavaScriptCore）未注入时用宿主桥实现，保证 Promise/await 延时可用；
-// 浏览器预览器已有原生 setTimeout，此处不覆盖。
-var __timerSeq = 0;
-var __timers = {};
-if (typeof setTimeout !== "function") {
-  var setTimeout = function (fn, ms) {
-    var id = ++__timerSeq;
-    if (typeof __nativeSetTimeout === "function") {
-      __nativeSetTimeout(id, Number(ms) || 0);
-      __timers[id] = fn;
-      return id;
-    }
-    return 0;
-  };
-  var clearTimeout = function (id) {
-    delete __timers[id];
-    if (typeof __nativeClearTimeout === "function") __nativeClearTimeout(Number(id));
-  };
-  // 宿主回调入口（__nativeSetTimeout 到期后由原生调用）
-  var __vrnRunTimer = function (id) {
-    var fn = __timers[id];
-    delete __timers[id];
-    if (typeof fn === "function") fn();
-  };
-  var setInterval = function (fn, ms) {
-    var id = ++__timerSeq;
-    __timers[id] = { fn: fn, ms: Number(ms) || 0, repeat: true };
-    if (typeof __nativeSetInterval === "function") __nativeSetInterval(id, Number(ms) || 0);
-    return id;
-  };
-  var clearInterval = function (id) {
-    delete __timers[id];
-    if (typeof __nativeClearInterval === "function") __nativeClearInterval(Number(id));
-  };
-  var __vrnRunInterval = function (id) {
-    var t = __timers[id];
-    if (t && t.repeat && typeof t.fn === "function") t.fn();
-  };
-}
-if (typeof queueMicrotask !== "function") {
-  var queueMicrotask = function (fn) {
-    Promise.resolve().then(fn);
-  };
-}
+${RUNTIME_BOOTSTRAP_SOURCE}
 
 // R81 原生桥：bridge.toast / bridge.openUrl（iOS 由 __nativeToast/__nativeOpenUrl 宿主函数实现；
 // Android 由编译器把 bridge.* 翻译成 VrnBridge.*；浏览器预览退回 alert/console）
@@ -478,23 +573,33 @@ var router = {
     if (typeof __routerBack === "function") __routerBack();
   }
 };
+// 模板求值使用真实页面 ref/computed，避免把对象 JSON 当对象、数值当字符串。
+function __vrnWrite(name,value) {
+  var page=typeof __vrnPage !== "undefined" ? __vrnPage : undefined;
+  if(page && page[name] && typeof page[name] === "object" && "value" in page[name]) page[name].value=value;
+  stateStore[name]=value;
+}
+function __vrnRead(name) {
+  var page = typeof __vrnPage !== "undefined" ? __vrnPage : undefined;
+  if(page && name in page) {
+    var value=page[name];
+    return value && typeof value === "object" && "value" in value ? value.value : value;
+  }
+  return stateStore[name];
+}
 // R118 页面状态同步：把页面脚本 bundle（__vrnPage）里的 ref/computed 值写进 stateStore，
 // 模板里 {{ nearest }} / {{ soon }} 这类页面级派生值就有了真实来源
 // 把数组里的嵌套对象拍平成「点键」，让 v-for 里的 row.item.name 能直接取到
-function __vrnFlat(v) {
-  function flatObj(o, prefix, out) {
-    for (var k in o) {
-      var val = o[k];
-      var key = prefix ? prefix + "." + k : k;
-      if (val && typeof val === "object" && !Array.isArray(val)) flatObj(val, key, out);
-      else if (Array.isArray(val)) out[key] = "[" + val.length + "]";
-      else out[key] = String(val);
-    }
-    return out;
-  }
-  if (Array.isArray(v)) return v.map(function (it) { return (it && typeof it === "object") ? flatObj(it, "", {}) : it; });
-  return v;
+function __vrnFlat(v) { return v; }
+function __vrnEvalTemplate(expression, json) {
+  try {
+    var bindings=JSON.parse(json), names=Object.keys(bindings), values=names.map(function(k){return bindings[k];});
+    var fn=Function.apply(null,names.concat('return ('+expression+');'));
+    var value=fn.apply(null,values);
+    return value == null ? '' : typeof value === 'object' ? JSON.stringify(value) : String(value);
+  } catch(e) { return ''; }
 }
+
 function __vrnSyncPage() {
   try {
     var page = typeof __vrnPage !== "undefined" ? __vrnPage : (typeof globalThis !== "undefined" ? globalThis.__vrnPage : undefined);
@@ -510,9 +615,11 @@ function __vrnSyncPage() {
         var v = page[k];
         var val;
         if (v && typeof v === "object" && "value" in v) val = v.value;   // ref / computed
+        else if (v && typeof v === "object" && Object.prototype.hasOwnProperty.call(__stateInit,k)) val=v;
         else continue;                                                    // 函数/常量交给模板静态值
         if (val === undefined || val === null) continue;
-        stateStore[k] = (typeof val === "object") ? JSON.stringify(__vrnFlat(val)) : val;
+        stateStore[k] = (typeof val === "object") ? JSON.stringify(__vrnFlat(val)) :
+          typeof __stateInit[k] === "string" ? String(val) : val;
       } catch (e) {}
     }
   } catch (e) {}
@@ -534,7 +641,7 @@ function __vrnSyncPage() {
 // handlers（<script setup> 函数体：ref.value → stateStore 重写）
 ${handlerSrc}
 ${computedBlock}${"" /* R102 见 computedBlock 内：仅当存在派生状态时才调度重算循环，避免无谓的定时器 */}// onMounted（Swift onAppear → invoke("__onMounted")）
-${onMounted !== undefined ? `${onMountedAsync ? 'async ' : ''}function __onMounted() {\n${indentBody(onMounted)}\n}` : ''}`;
+${externalScript ? 'function __onMounted() { if(typeof __vrnSetNativeRoute === "function") __vrnSetNativeRoute(); if(typeof __vrnPage !== "undefined" && __vrnPage.__vrnMountPage) __vrnPage.__vrnMountPage(); }' : onMounted !== undefined ? `${onMountedAsync ? 'async ' : ''}function __onMounted() {\n${indentBody(onMounted)}\n}` : ''}`;
 }
 /** 简单缩进（handler 体统一 2 空格缩进） */
 function indentBody(body) {
@@ -751,7 +858,21 @@ function parseDynamicStyle(exp, warnings, state) {
         const key = m[1];
         const val = m[2].trim();
         const isState = /^[A-Za-z_]\w*$/.test(val) && state?.states.some((st) => st.name === val);
-        if (key === 'color' && isState) {
+        if (key === 'width' || key === 'height') {
+            if (/%/.test(val)) {
+                if (key === 'width')
+                    out.widthFractionDynamic = addJsExprState(`String(parseFloat(${val})/100)`);
+                else
+                    warnings.push(`:style ${key} 百分比高度尚未映射：${val}`);
+                continue;
+            }
+            const literal = val.match(/^['"]([\d.]+)px['"]$/);
+            if (literal)
+                out[key] = Number(literal[1]);
+            else
+                out[key + 'Dynamic'] = addJsExprState(`String(parseFloat(${val}))`);
+        }
+        else if (key === 'color' && isState) {
             out.colorDynamic = val;
         }
         else if (key === 'fontSize') {
@@ -977,6 +1098,16 @@ let compPosition = new Map();
 /** R-VFOBJ-C：script 顶层 const 数组表（const rows = [...] → rows: 数组内文）；vueToIr 每次调用重置 */
 let vforConsts = {};
 export function vueToIr(source, opts = {}) {
+    hasLoopExpressions = false;
+    inlineComponentsFlag = opts.inlineComponents === true;
+    liveStoreObjectsFlag = opts.liveStoreObjects === true;
+    pageScriptBundleFlag = opts.pageScriptBundle === true;
+    componentScopeSeq = 0;
+    componentSlots = [];
+    componentPath = [];
+    templateAssets = opts.assets ?? {};
+    styleRuleTables = new WeakMap();
+    inheritedTextStyles = new WeakMap();
     compPosition = new Map();
     vforConsts = {};
     storeAliases = new Map();
@@ -984,6 +1115,7 @@ export function vueToIr(source, opts = {}) {
     storeConstArrays = {};
     derivedNames = new Map();
     storeGetterWarnings = [];
+    jsExprStateNames = [];
     jsExprSeq = 0;
     jsExprStates = [];
     allowUnknownComponentsFlag = opts.allowUnknownComponents === true;
@@ -996,16 +1128,17 @@ export function vueToIr(source, opts = {}) {
     if (!descriptor.template) {
         throw new VueCompileError('缺少 <template> 块');
     }
+    const cssVariables = extractCssVariables(opts.globalStyles ?? []);
     // 1) CSS 子集 → 类规则表
     const cssWarnings = [];
     const classProps = new Map();
     let comboRules = [];
     let scopedRules = [];
     let pseudoRules = [];
-    for (const styleBlock of descriptor.styles) {
+    for (const styleBlock of [...(opts.globalStyles ?? []).map((content) => ({ content })), ...descriptor.styles]) {
         let r;
         try {
-            r = parseCss(styleBlock.content, cssWarnings);
+            r = parseCss(styleBlock.content, cssWarnings, cssVariables);
         }
         catch (e) {
             if (e instanceof CssParseError)
@@ -1015,13 +1148,32 @@ export function vueToIr(source, opts = {}) {
         for (const [cls, props] of r.classProps) {
             classProps.set(cls, { ...(classProps.get(cls) ?? {}), ...props });
         }
+        styleRuleTables.set(classProps, [...(styleRuleTables.get(classProps) ?? []), ...r.styleRules]);
         comboRules = comboRules.concat(r.comboRules);
         scopedRules = scopedRules.concat(r.scopedRules);
         pseudoRules = pseudoRules.concat(r.pseudoRules);
     }
     // 1.5) 组件表（R41 独立原生 View）：components/*.vue → { name, template AST, 组件样式规则, defineProps 名 }
     const compTable = [];
-    for (const [name, src] of Object.entries(opts.components ?? {})) {
+    const availableComponents = opts.components ?? {};
+    const reachable = new Set();
+    const visitComponents = (template) => {
+        const visit = (node) => {
+            if (node.type === NodeTypes.ELEMENT) {
+                const name = Object.keys(availableComponents).find((key) => key === node.tag || key === toPascalCase(node.tag));
+                if (name && !reachable.has(name)) {
+                    reachable.add(name);
+                    const nested = parse(availableComponents[name]).descriptor.template?.ast;
+                    if (nested)
+                        visitComponents(nested);
+                }
+            }
+            node.children?.forEach(visit);
+        };
+        visit(template);
+    };
+    visitComponents(descriptor.template.ast);
+    for (const [name, src] of Object.entries(availableComponents).filter(([name]) => reachable.has(name))) {
         const c = parse(src, { filename: `${name}.vue` });
         if (c.errors.length > 0) {
             throw new VueCompileError(`组件 ${name} 解析失败：${c.errors.map((e) => e.message).join('; ')}`);
@@ -1033,10 +1185,10 @@ export function vueToIr(source, opts = {}) {
         let cc = [];
         let cs = [];
         let cps = [];
-        for (const styleBlock of c.descriptor.styles) {
+        for (const styleBlock of [...(opts.globalStyles ?? []).map((content) => ({ content })), ...c.descriptor.styles]) {
             let r;
             try {
-                r = parseCss(styleBlock.content, cssWarnings);
+                r = parseCss(styleBlock.content, cssWarnings, cssVariables);
             }
             catch (e) {
                 if (e instanceof CssParseError)
@@ -1045,6 +1197,7 @@ export function vueToIr(source, opts = {}) {
             }
             for (const [cls, props] of r.classProps)
                 cp.set(cls, { ...(cp.get(cls) ?? {}), ...props });
+            styleRuleTables.set(cp, [...(styleRuleTables.get(cp) ?? []), ...r.styleRules]);
             cc = cc.concat(r.comboRules);
             cs = cs.concat(r.scopedRules);
             cps = cps.concat(r.pseudoRules);
@@ -1112,6 +1265,8 @@ export function vueToIr(source, opts = {}) {
             const registry = buildStoreRegistry(opts.storeSources);
             storeAliases = findStoreAliases(src, registry);
             for (const [alias, def] of storeAliases) {
+                if (liveStoreObjectsFlag && !stateInfo.states.some((st) => st.name === alias))
+                    stateInfo.states.push({ name: alias, init: '{}', obj: true });
                 for (const f of def.state) {
                     const flat = `${alias}_${f.name}`;
                     if (stateInfo.states.some((st) => st.name === flat))
@@ -1243,14 +1398,15 @@ export function vueToIr(source, opts = {}) {
         }
         const hasComputed = (stateInfo?.states ?? []).some((st) => st.computed);
         if (handlers.length > 0 || onMountedBody !== undefined || hasComputed) {
-            runtime = generateRuntimeSource(stateInfo?.states ?? [], handlers, onMountedBody, onMountedAsync);
+            runtime = generateRuntimeSource(stateInfo?.states ?? [], handlers, onMountedBody, onMountedAsync, opts.pageScriptBundle);
         }
     }
     // 3.5) 组件树（R41）：每个组件 → 独立 Swift View 的 IR 树（组件样式独立作用域；
     //      {{ prop }} → text ref；组件根布局 props（flex/width/marginTop）剥离并交使用点）。
     //      必须先于页面 walk 构建：使用点 component 节点需要组件根剥离出的位置 props。
-    const components = compTable.map((c) => {
+    const components = (inlineComponentsFlag ? [] : compTable).map((c) => {
         const tree = buildComponentTree(c, warnings);
+        applyTextInheritance(tree.ui);
         c.refs = collectRefs(tree.ui);
         compPosition.set(c.name, tree.position);
         return { name: c.name, ui: tree.ui };
@@ -1270,7 +1426,7 @@ export function vueToIr(source, opts = {}) {
         if (onMountedBody !== undefined)
             onMountedBody = renameSrc(onMountedBody);
     }
-    const children = ast.children.flatMap((c) => walk(c, classProps, comboRules, scopedRules, pseudoRules, warnings, stateInfo, compTable));
+    const children = walkSiblings(ast.children, (c) => walk(c, classProps, comboRules, scopedRules, pseudoRules, warnings, stateInfo, compTable));
     let pageRootBg;
     // 3) 组装 screen：root（width fill + height 基准）包一层 group（承载根元素布局 props）
     // M4b：模板根容器（.page 等）的 background 提升到 root——root ZStack 背景层必须铺满全屏，
@@ -1300,13 +1456,30 @@ export function vueToIr(source, opts = {}) {
         const oc = n.props?.onClick;
         if (typeof oc === 'string') {
             const name = oc.replace(/\(\)$/, '');
-            if (!handlerNames.has(name) && !/^(router\.|Router\.)/.test(name)) {
+            if (!opts.pageScriptBundle && !handlerNames.has(name) && !/^(router\.|Router\.)/.test(name)) {
                 warnings.push(`@click「${oc}」引用的函数未提取为 runtime handler（仅支持 function 声明；箭头函数/Options API 暂不支持），原生端点击将无响应`);
             }
         }
         for (const c of n.children ?? [])
             checkClickHandlers(c);
     };
+    const documentStyles = {};
+    const documentAncestors = [];
+    for (const element of [{ tag: 'html', classes: [] }, { tag: 'body', classes: [] }, { tag: 'div', id: 'app', classes: [] }]) {
+        const resolved = resolveCssRules(styleRuleTables.get(classProps) ?? [], element, documentAncestors, '', warnings);
+        for (const k of TEXT_STYLE_KEYS)
+            if (resolved[k] !== undefined)
+                mergeIrProps(documentStyles, { [k]: resolved[k] });
+        if (!ui.props?.background && !ui.props?.gradient && (resolved.background !== undefined || resolved.gradient !== undefined)) {
+            ui.props ??= {};
+            if (resolved.gradient)
+                ui.props.gradient = resolved.gradient;
+            else
+                ui.props.background = resolved.background;
+        }
+        documentAncestors.push(element);
+    }
+    applyTextInheritance(ui, documentStyles);
     checkClickHandlers(ui);
     // R74 续：IR 树里的状态引用改名（bind/show/onSet/bindParts/fieldOf/condition/动态样式/输入值/列表态）
     if (stateRenames.size > 0) {
@@ -1372,9 +1545,11 @@ export function vueToIr(source, opts = {}) {
             if (!stateInfo.states.some((x) => x.name === st.name))
                 stateInfo.states.push({ ...st });
         }
-        runtime = generateRuntimeSource(stateInfo.states, handlers ?? [], onMountedBody, onMountedAsync);
+        runtime = generateRuntimeSource(stateInfo.states, handlers ?? [], onMountedBody, onMountedAsync, opts.pageScriptBundle);
         warnings.push(`模板表达式下沉：${jsExprStates.length} 处动态表达式改由 JS 运行时求值（R98）`);
     }
+    if (!runtime && (opts.pageScriptBundle || hasLoopExpressions))
+        runtime = generateRuntimeSource(stateInfo?.states ?? [], handlers ?? [], onMountedBody, onMountedAsync, opts.pageScriptBundle);
     for (const w of storeGetterWarnings)
         if (!warnings.includes(w))
             warnings.push(w);
@@ -1387,16 +1562,62 @@ export function vueToIr(source, opts = {}) {
             height: opts.height ?? 640,
             ...(stateInfo && stateInfo.states.length > 0 ? { state: stateInfo.states } : {}),
             ...(handlers && handlers.length > 0 ? { handlers } : {}),
-            ...(onMountedBody !== undefined ? { onMounted: onMountedBody, ...(onMountedAsync ? { onMountedAsync: true } : {}) } : {}),
+            ...(opts.pageScriptBundle ? { onMounted: '__vrnPage.__vrnMountPage()' } : onMountedBody !== undefined ? { onMounted: onMountedBody, ...(onMountedAsync ? { onMountedAsync: true } : {}) } : {}),
             ...(navBarConfig !== null ? { navBar: navBarConfig } : {}),
             ui,
         },
         ...(components.length > 0 ? { components } : {}),
-        warnings,
+        warnings: [...new Set(warnings)],
         ...(runtime !== undefined ? { runtime } : {}),
     };
 }
 /* ============ 模板 AST 遍历 ============ */
+/** 按 Vue 相邻兄弟语义编译条件链：只有前面所有分支都未命中，才检查当前分支。 */
+function walkSiblings(nodes, visit) {
+    const result = [];
+    let conditions;
+    for (const node of nodes) {
+        if (node.type === NodeTypes.COMMENT || (node.type === NodeTypes.TEXT && !node.content.trim())) {
+            result.push(...visit(node));
+            continue;
+        }
+        if (node.type !== NodeTypes.ELEMENT) {
+            conditions = undefined;
+            result.push(...visit(node));
+            continue;
+        }
+        const branch = node.props.find((p) => p.type === NodeTypes.DIRECTIVE &&
+            ['if', 'else-if', 'else'].includes(p.name));
+        if (!branch || branch.type !== NodeTypes.DIRECTIVE) {
+            conditions = undefined;
+            result.push(...visit(node));
+            continue;
+        }
+        const own = branch.exp && branch.exp.type === NodeTypes.SIMPLE_EXPRESSION ? branch.exp.content.trim() : '';
+        if (branch.name === 'if') {
+            conditions = [own];
+            result.push(...visit(node));
+            continue;
+        }
+        if (!conditions)
+            throw new VueCompileError(`v-${branch.name} 缺少相邻的 v-if / v-else-if`);
+        if (branch.name === 'else-if' && !own)
+            throw new VueCompileError('v-else-if 缺少条件表达式');
+        const excluded = conditions.map((c) => `(${c})`).join(' || ');
+        const expression = `!(${excluded})${own ? ` && (${own})` : ''}`;
+        // 转成普通 v-if，让 template、组件、循环和普通元素复用同一条件处理路径。
+        const rewritten = { ...node, props: node.props.map((p) => p === branch ? {
+                ...branch, name: 'if', exp: { type: NodeTypes.SIMPLE_EXPRESSION, content: expression,
+                    isStatic: false, constType: 0, loc: branch.loc },
+            } : p) };
+        result.push(...visit(rewritten));
+        if (branch.name === 'else')
+            conditions = undefined;
+        else
+            conditions.push(own);
+    }
+    return result;
+}
 function walk(node, classProps, comboRules, scopedRules, pseudoRules, warnings, state, compTable = [], propRefs, loopScope = [], ancestorClasses = []) {
     switch (node.type) {
         case NodeTypes.TEXT: {
@@ -1407,6 +1628,8 @@ function walk(node, classProps, comboRules, scopedRules, pseudoRules, warnings,
             return [];
         case NodeTypes.INTERPOLATION: {
             const nameRaw = textOf(node.content).trim();
+            if (activeLoops.length && !/^[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*)*$/.test(nameRaw))
+                return [{ type: 'text', props: { bind: addJsExprState(nameRaw) } }];
             // R86：store 访问先拍平（ui.dialog.title → ui_dialog.title）；getter/action 返回哨兵
             const name = flattenStorePath(normalizeTemplateExpr(nameRaw, warnings));
             // 组件树模式（propRefs 传入=非空）：{{ 任意名 }} → text ref（Swift Text(prop)，
@@ -1481,6 +1704,10 @@ function walk(node, classProps, comboRules, scopedRules, pseudoRules, warnings,
             return [{ type: 'text', props: { bind: addJsExprState(nameRaw) } }];
         }
         case NodeTypes.ELEMENT:
+            if (node.tag === 'slot' && componentSlots.length) {
+                const attr = node.props.find((p) => p.type === NodeTypes.ATTRIBUTE && p.name === 'name');
+                return componentSlots[componentSlots.length - 1](attr && 'value' in attr ? attr.value?.content ?? 'default' : 'default');
+            }
             return [walkElement(node, classProps, comboRules, scopedRules, pseudoRules, warnings, state, compTable, propRefs, loopScope, ancestorClasses)];
         default:
             warnings.push(`模板节点类型 ${node.type} 已忽略`);
@@ -1693,9 +1920,29 @@ function buildComponentTree(comp, warnings) {
 }
 function walkElement(node, classProps, comboRules, scopedRules, pseudoRules, warnings, state, compTable = [], propRefs, loopScope = [], ancestorClasses = []) {
     let elementClasses = []; // M5 后代选择器：本元素 class 清单（子节点递归传祖先链）
-    // R107：SVG 图标（svg/path/circle/line/rect/polygon/g/defs/use）纯装饰 → 忽略，不阻断编译
-    if (['svg', 'path', 'circle', 'line', 'rect', 'polygon', 'polyline', 'g', 'defs', 'use', 'text', 'ellipse'].includes(node.tag) && node.tag !== 'text') {
-        return { type: 'spacer', props: { height: 0 } };
+    if (node.tag === 'slot' && componentSlots.length) {
+        const nameAttr = node.props.find((p) => p.type === NodeTypes.ATTRIBUTE && p.name === 'name');
+        const name = nameAttr && 'value' in nameAttr ? nameAttr.value?.content ?? 'default' : 'default';
+        const kids = componentSlots[componentSlots.length - 1](name);
+        return kids.length === 1 ? kids[0] : { type: 'group', props: { flexDirection: 'column' }, children: kids.length ? kids : [{ type: 'spacer', props: { height: 0 } }] };
+    }
+    if (node.tag === 'svg') {
+        const rules = styleRuleTables.get(classProps) ?? [];
+        const own = resolveCssRules(rules, cssElement(node), ancestorClasses, '', warnings);
+        const attr = (name) => { const p = node.props.find((p) => p.type === NodeTypes.ATTRIBUTE && p.name === name); return p && 'value' in p ? p.value?.content : undefined; };
+        const vector = parseSvg(node, (el, parents) => resolveCssRules(rules, cssElement(el), [...ancestorClasses, ...parents.map(cssElement)], '', warnings), warnings, addJsExprState);
+        const props = { vector, width: own.width === 'fill' ? 'fill' : typeof own.width === 'number' ? own.width : Number(attr('width')) || 24,
+            height: own.height === 'fill' || own.flex === 1 ? 'fill' : typeof own.height === 'number' ? own.height : Number(attr('height')) || 24 };
+        if (vector.dynamic && own.width === 'fill' && own.height === undefined) {
+            delete props.height;
+            props.aspectRatio = vector.viewBox[2] / vector.viewBox[3];
+        }
+        for (const k of ['opacity', 'color', 'position', 'absTop', 'absLeft', 'absRight', 'absBottom', 'transform'])
+            if (own[k] !== undefined)
+                props[k] = own[k];
+        const ir = { type: 'vector', props };
+        inheritedTextStyles.set(ir, own);
+        return ir;
     }
     // R104：<br> 换行 → 占位间距（原生端没有行内换行语义）
     if (node.tag === 'br') {
@@ -1706,7 +1953,29 @@ function walkElement(node, classProps, comboRules, scopedRules, pseudoRules, war
     if (forDir) {
         // AttributeNode 无 exp；DirectiveNode 才有（find 命中 DIRECTIVE 但 TS 不窄化 union）
         const exp = 'exp' in forDir ? forDir.exp : undefined;
-        const forExp = exp && exp.type === NodeTypes.SIMPLE_EXPRESSION ? exp.content : '';
+        let forExp = exp && exp.type === NodeTypes.SIMPLE_EXPRESSION ? exp.content : '';
+        const tuple = forExp.match(/^\[\s*([A-Za-z_$][\w$]*)\s*,\s*([A-Za-z_$][\w$]*)\s*\]\s+(?:in|of)\s+([\s\S]+)$/);
+        if (tuple) {
+            const item = `_vrnTuple${jsExprSeq++}`;
+            const copy = structuredClone(node);
+            const rewrite = (n) => {
+                if (n.type === NodeTypes.INTERPOLATION) {
+                    for (let i = 1; i <= 2; i++)
+                        n.content.content = n.content.content.replace(new RegExp(`(?<![.\\w$])${tuple[i]}\\b`, 'g'), `${item}[${i - 1}]`);
+                }
+                for (const p of n.props ?? [])
+                    if (p.type === NodeTypes.DIRECTIVE && p.exp && p.name !== 'for') {
+                        for (let i = 1; i <= 2; i++)
+                            p.exp.content = p.exp.content.replace(new RegExp(`(?<![.\\w$])${tuple[i]}\\b`, 'g'), `${item}[${i - 1}]`);
+                    }
+                n.children?.forEach(rewrite);
+            };
+            rewrite(copy);
+            const dir = copy.props.find((p) => p.type === NodeTypes.DIRECTIVE && p.name === 'for');
+            if (dir && 'exp' in dir && dir.exp && dir.exp.type === NodeTypes.SIMPLE_EXPRESSION)
+                dir.exp.content = `${item} in ${tuple[3]}`;
+            return walkElement(copy, classProps, comboRules, scopedRules, pseudoRules, warnings, state, compTable, propRefs, loopScope, ancestorClasses);
+        }
         // R105：`v-for="x in stats"` 里的 stats 是 computed/普通变量（不是 ref 状态）
         // → 下沉成运行时求值的 JSON 数组状态，列表照常渲染
         let sunkList;
@@ -1771,7 +2040,7 @@ function walkElement(node, classProps, comboRules, scopedRules, pseudoRules, war
         // 表达式下沉产生的状态（_vrnE*）在 walk 之后才并入页面状态，这里放行
         // R143：未声明的数据源（组件 props / 数值 / 未注册变量）→ 运行时自适应下沉，不再整页失败
         if (vf.listState &&
-            !/^_vrnE\d+$/.test(vf.listState) &&
+            !/^_vrnE\d+$/.test(vf.listState) && !vf.listState.startsWith('__vrnLoop:') &&
             !(state && state.states.some((s) => s.name === vf.listState)) &&
             propRefs === undefined // 页面模式才下沉；组件模式（Set 存在，含空）保留数据源原名
         ) {
@@ -1794,9 +2063,7 @@ function walkElement(node, classProps, comboRules, scopedRules, pseudoRules, war
     // 原生端无过渡动画/缓存语义，但内容必须保留（否则整页编译失败）
     if (['Transition', 'TransitionGroup', 'KeepAlive', 'Teleport', 'Suspense', 'Fragment'].includes(node.tag)) {
         const kids = [];
-        for (const child of node.children) {
-            kids.push(...walk(child, classProps, comboRules, scopedRules, pseudoRules, warnings, state, compTable, propRefs, loopScope, ancestorClasses));
-        }
+        kids.push(...walkSiblings(node.children, (child) => walk(child, classProps, comboRules, scopedRules, pseudoRules, warnings, state, compTable, propRefs, loopScope, ancestorClasses)));
         if (kids.length === 0) {
             warnings.push(`<${node.tag}> 内无内容，已忽略`);
             return { type: 'group', props: { flexDirection: 'column' }, children: [{ type: 'text', props: { text: ' ' } }] };
@@ -1816,18 +2083,12 @@ function walkElement(node, classProps, comboRules, scopedRules, pseudoRules, war
             if (p.name === 'if' && p.exp && p.exp.type === NodeTypes.SIMPLE_EXPRESSION) {
                 cond = p.exp.content.trim();
             }
-            else if (p.name === 'else' || p.name === 'else-if') {
-                // R15 不静默：v-else/v-else-if 不支持，静默渲染会恒显示该分支
-                warnings.push(`<template v-${p.name}> 暂不支持——该分支将无条件渲染（R15 降级表）`);
-            }
-        }
-        for (const child of node.children) {
-            children.push(...walk(child, classProps, comboRules, scopedRules, pseudoRules, warnings, state, compTable, propRefs, loopScope, ancestorClasses));
         }
+        children.push(...walkSiblings(node.children, (child) => walk(child, classProps, comboRules, scopedRules, pseudoRules, warnings, state, compTable, propRefs, loopScope, ancestorClasses)));
         if (cond) {
             // 条件渲染容器：以 group 承载子节点（不参与布局，仅 if 分支）
             // sourceTag='template'：CSS 中 <template> 透明，父容器 gap 可透传（R-G2）
-            return { type: 'group', props: { flexDirection: 'column' }, sourceTag: 'template', condition: normCond(cond), children };
+            return { type: 'group', props: { flexDirection: 'column' }, sourceTag: 'template', condition: `__vrnCond:${addJsExprState(`String(${cond})`)}`, children };
         }
         // 无 v-if：透传（合并到父 children）
         // 透传多节点时由调用方展开；此处约定 template 内单根（Vue 本身要求多根可由父承载）
@@ -1837,12 +2098,122 @@ function walkElement(node, classProps, comboRules, scopedRules, pseudoRules, war
             throw new VueCompileError('<template> 无内容');
         return { type: 'group', props: { flexDirection: 'column' }, children };
     }
-    const mapping = TAG_MAP[node.tag];
+    let mapping = TAG_MAP[node.tag];
+    if (inlineComponentsFlag && node.tag === 'button' && node.children.some((c) => c.type === NodeTypes.ELEMENT && c.tag !== 'svg' && c.tag !== 'br'))
+        mapping = { type: 'group' };
     if (!mapping) {
         // R41 组件使用点：查组件表（精确名 + kebab→Pascal 兜底）→ component IR 节点（独立 View 引用）
         const comp = compTable.find((c) => c.name === node.tag) ??
             compTable.find((c) => c.name === toPascalCase(node.tag));
         if (comp) {
+            if (inlineComponentsFlag) {
+                if (componentPath.includes(comp.name))
+                    throw new VueCompileError(`组件递归引用无法静态展开：${[...componentPath, comp.name].join(' → ')}`);
+                const bindings = {};
+                const script = comp.descriptor.scriptSetup?.content ?? '';
+                const defaults = script.match(/defineProps[\s\S]*?>\s*\(\s*\)\s*,\s*\{([\s\S]*?)\}/)?.[1] ?? '';
+                for (const pair of splitTopLevel(defaults)) {
+                    const m = pair.match(/^\s*(\w+)\s*:\s*([\s\S]+)$/);
+                    if (m)
+                        bindings[m[1]] = m[2].trim();
+                }
+                for (const name of comp.propNames)
+                    bindings[name] ??= "''";
+                for (const p of node.props) {
+                    if (p.type === NodeTypes.ATTRIBUTE && comp.propNames.has(p.name))
+                        bindings[p.name] = p.value ? JSON.stringify(p.value.content) : 'true';
+                    if (p.type === NodeTypes.DIRECTIVE && p.name === 'bind' && p.arg?.type === NodeTypes.SIMPLE_EXPRESSION && p.exp?.type === NodeTypes.SIMPLE_EXPRESSION)
+                        bindings[p.arg.content] = p.exp.content;
+                }
+                const prefix = `_vrnC${componentScopeSeq++}_`;
+                for (const st of extractScreenState(script).states) {
+                    const name = prefix + st.name;
+                    bindings[st.name] = name;
+                    state?.states.push({ ...st, name });
+                    jsExprStateNames.push(name);
+                }
+                const rewrite = (expression) => {
+                    const edits = [];
+                    let ast;
+                    try {
+                        ast = babelParse(`(${expression})`, { sourceType: 'module', plugins: ['typescript'] });
+                    }
+                    catch (error) {
+                        throw new VueCompileError(`组件 ${comp.name} 表达式解析失败：${expression.slice(0, 500)}；${error.message}`);
+                    }
+                    walkIdentifiers(ast.program, (id, parent, _stack, isReference, isLocal) => {
+                        if (!isReference || isLocal)
+                            return;
+                        if (id.name === 'props' && parent?.type === 'MemberExpression' && !parent.computed && parent.property.type === 'Identifier' && bindings[parent.property.name] !== undefined) {
+                            edits.push({ start: parent.start - 1, end: parent.end - 1, value: `(${bindings[parent.property.name]})` });
+                        }
+                        else if (bindings[id.name] !== undefined) {
+                            const member = parent?.type === 'MemberExpression' && parent.object === id && !parent.computed && parent.property.type === 'Identifier' && parent.property.name === 'value' ? parent : id;
+                            edits.push({ start: member.start - 1, end: member.end - 1, value: parent?.type === 'ObjectProperty' && parent.shorthand ? `${id.name}: (${bindings[id.name]})` : `(${bindings[id.name]})` });
+                        }
+                    });
+                    let out = expression;
+                    for (const e of edits.sort((a, b) => b.start - a.start))
+                        out = out.slice(0, e.start) + e.value + out.slice(e.end);
+                    return out;
+                };
+                const scriptAst = babelParse(script, { sourceType: 'module', plugins: ['typescript'] });
+                const asJs = (value) => transformSync('(' + value + ')', { loader: 'ts', target: 'es2019' }).code.trim().replace(/;$/, '');
+                for (const declaration of scriptAst.program.body) {
+                    if (declaration.type === 'FunctionDeclaration' && declaration.id) {
+                        bindings[declaration.id.name] = rewrite(asJs(script.slice(declaration.start, declaration.end)));
+                    }
+                    if (declaration.type !== 'VariableDeclaration')
+                        continue;
+                    for (const d of declaration.declarations) {
+                        if (d.id.type !== 'Identifier' || !d.init || bindings[d.id.name] !== undefined)
+                            continue;
+                        if (['NumericLiteral', 'StringLiteral', 'BooleanLiteral', 'ObjectExpression', 'ArrayExpression'].includes(d.init.type))
+                            bindings[d.id.name] = rewrite(asJs(script.slice(d.init.start, d.init.end)));
+                        else if (d.init.type === 'CallExpression' && d.init.callee.type === 'Identifier' && d.init.callee.name === 'computed') {
+                            const arg = d.init.arguments[0];
+                            if (arg?.type === 'ArrowFunctionExpression')
+                                bindings[d.id.name] = rewrite('(' + asJs(script.slice(arg.start, arg.end)) + ')()');
+                        }
+                    }
+                }
+                for (const key of Object.keys(bindings))
+                    bindings[key] = rewrite(bindings[key]);
+                const roots = structuredClone(comp.descriptor.template.ast.children);
+                const patch = (n) => {
+                    if (n.type === NodeTypes.INTERPOLATION)
+                        n.content.content = rewrite(n.content.content);
+                    for (const p of n.props ?? [])
+                        if (p.type === NodeTypes.DIRECTIVE && p.exp) {
+                            const event = p.exp.content.match(/^emit\(\s*['"]([^'"]+)['"]\s*\)$/);
+                            const handler = event ? node.props.find((d) => d.type === NodeTypes.DIRECTIVE && d.name === 'on' && d.arg?.type === NodeTypes.SIMPLE_EXPRESSION && d.arg.content === event[1]) : undefined;
+                            p.exp.content = handler && 'exp' in handler && handler.exp?.type === NodeTypes.SIMPLE_EXPRESSION ? handler.exp.content : rewrite(p.exp.content);
+                        }
+                    n.children?.forEach(patch);
+                };
+                roots.forEach(patch);
+                componentSlots.push((name) => {
+                    const children = node.children.flatMap((child) => {
+                        if (child.type === NodeTypes.ELEMENT && child.tag === 'template') {
+                            const slot = child.props.find((p) => p.type === NodeTypes.DIRECTIVE && p.name === 'slot');
+                            if (slot && slot.type === NodeTypes.DIRECTIVE && slot.arg?.type === NodeTypes.SIMPLE_EXPRESSION && slot.arg.content === name)
+                                return child.children;
+                            return [];
+                        }
+                        return name === 'default' ? [child] : [];
+                    });
+                    return walkSiblings(children, (child) => walk(child, classProps, comboRules, scopedRules, pseudoRules, warnings, state, compTable, propRefs, loopScope, ancestorClasses));
+                });
+                componentPath.push(comp.name);
+                try {
+                    const kids = walkSiblings(roots, (child) => walk(child, comp.classProps, comp.comboRules, comp.scopedRules, comp.pseudoRules, warnings, state, compTable, undefined, loopScope, ancestorClasses));
+                    return kids.length === 1 ? kids[0] : { type: 'group', props: { flexDirection: 'column' }, children: kids };
+                }
+                finally {
+                    componentPath.pop();
+                    componentSlots.pop();
+                }
+            }
             const pos = compPosition.get(comp.name) ?? {};
             return componentUseNode(node, comp, pos, warnings);
         }
@@ -1856,6 +2227,10 @@ function walkElement(node, classProps, comboRules, scopedRules, pseudoRules, war
     let nodeType;
     // 指令检测：v-for / v-if / v-show / :style / :class / 事件绑定 → 结构或逻辑绑定
     const props = { ...(mapping.defaultProps ?? {}) };
+    const inlineAttr = node.props.find((p) => p.type === NodeTypes.ATTRIBUTE && p.name === 'style');
+    const inlineStyle = inlineAttr && 'value' in inlineAttr ? inlineAttr.value?.content ?? '' : '';
+    const resolvedStyle = resolveCssRules(styleRuleTables.get(classProps) ?? [], cssElement(node), ancestorClasses, inlineStyle, warnings);
+    mergeIrProps(props, resolvedStyle);
     let cond;
     let activeWhen;
     let activeProps;
@@ -1875,7 +2250,9 @@ function walkElement(node, classProps, comboRules, scopedRules, pseudoRules, war
             if (name === 'show') {
                 // M5：v-show → show prop（始终渲染占位 + opacity 动画切换；区别于 v-if 条件渲染）
                 if (p.exp && p.exp.type === NodeTypes.SIMPLE_EXPRESSION && p.exp.content.trim()) {
-                    props.show = normCond(p.exp.content.trim());
+                    const raw = p.exp.content.trim();
+                    const flat = flattenStorePath(raw);
+                    props.show = /^[A-Za-z_$][\w$]*$/.test(flat) && state?.states.some((s) => s.name === flat) ? flat : addJsExprState(`String(Boolean(${raw}))`);
                     continue;
                 }
                 throw new VueCompileError('v-show 需要非空条件表达式');
@@ -1905,7 +2282,11 @@ function walkElement(node, classProps, comboRules, scopedRules, pseudoRules, war
                     }
                 }
                 else if (mapping.type === 'image' && argName === 'src') {
-                    warnings.push(':src 动态绑定暂不支持，已忽略（请改用静态 src）');
+                    const source = p.exp && p.exp.type === NodeTypes.SIMPLE_EXPRESSION ? p.exp.content.trim() : '';
+                    if (templateAssets[source])
+                        props.src = templateAssets[source];
+                    else
+                        warnings.push(`:src ${source} 尚无原生图片映射，需提供 assets 或静态 src`);
                 }
                 else {
                     warnings.push(`:${argName} 动态绑定暂不支持，已忽略`);
@@ -1935,7 +2316,7 @@ function walkElement(node, classProps, comboRules, scopedRules, pseudoRules, war
                 // @click="handler" → 状态赋值（setter 内联）优先；否则保留 onClick（JS 运行时调用）
                 // M3 规范化：无参调用 `inc()` → `inc`（Swift invoke 统一 evaluateScript("<名>()")）；带参保留原样
                 if (event === 'click' && handler) {
-                    const set = state && resolveSetCall(handler, state, (m) => warnings.push(m));
+                    const set = !pageScriptBundleFlag && state && resolveSetCall(handler, state, (m) => warnings.push(m));
                     if (set) {
                         Object.assign(props, { onSet: set });
                     }
@@ -1955,41 +2336,15 @@ function walkElement(node, classProps, comboRules, scopedRules, pseudoRules, war
         const attrValue = p.value?.content;
         if (attrName === 'class' && attrValue) {
             elementClasses = attrValue.split(/\s+/).filter(Boolean);
-            // 组合规则匹配：元素同时具备全部类时覆盖（优先级最高）
-            const matchedCombos = comboRules.filter((r) => r.classes.every((c) => elementClasses.includes(c)));
-            const comboMembers = new Set(matchedCombos.flatMap((r) => r.classes));
-            for (const cls of elementClasses) {
-                const p2 = classProps.get(cls);
-                if (p2)
-                    mergeIrProps(props, p2);
-                else if (!comboMembers.has(cls)) {
-                    warnings.push(`class「${cls}」无对应样式规则，已忽略`);
-                }
-            }
-            for (const rule of matchedCombos)
-                mergeIrProps(props, rule.props);
-            // M5 后代/子选择器：目标类命中 + 祖先链匹配（direct：直接父含最近祖先类；后代：祖先链上存在）
-            const matchedScoped = scopedRules.filter((r) => {
-                if (!elementClasses.includes(r.target))
-                    return false;
-                if (r.direct) {
-                    const parentCls = (ancestorClasses[0] ?? '').split(/\s+/).filter(Boolean);
-                    return r.ancestors.every((a) => parentCls.includes(a));
-                }
-                const chain = ancestorClasses.join(' ');
-                return r.ancestors.every((a) => chain.split(/\s+/).includes(a));
-            });
-            for (const rule of matchedScoped)
-                mergeIrProps(props, rule.props);
             // M5 伪类按压态：.btn:active → pressBg（button 生成按压样式；:hover 在 iOS 无意义，仅取 active）
             for (const cls of elementClasses) {
                 const pa = pseudoRules.find((r) => r.cls === cls && r.pseudo === 'active');
-                if (pa)
+                if (pa && mapping.type === 'button')
                     mergeIrProps(props, pa.props);
             }
         }
         else if (attrName === 'style' && attrValue) {
-            mergeIrProps(props, parseInlineStyle(attrValue, warnings));
+            // 已按 CSS 级联优先级统一处理，避免属性顺序影响样式。
         }
         else if (mapping.type === 'image' && attrName === 'src' && attrValue) {
             props.src = attrValue;
@@ -2004,15 +2359,22 @@ function walkElement(node, classProps, comboRules, scopedRules, pseudoRules, war
             warnings.push(`属性 ${attrName}="${attrValue}" 暂不支持，已忽略`);
         }
     }
+    const inlineTags = new Set(['span', 'b', 'strong', 'i', 'em', 'small', 'u', 'code']);
+    const content = node.children.filter((c) => c.type !== NodeTypes.COMMENT && !(c.type === NodeTypes.TEXT && !c.content.trim()));
+    const readable = (n) => n.type === NodeTypes.INTERPOLATION || (n.type === NodeTypes.TEXT && !!n.content.trim()) || (n.type === NodeTypes.ELEMENT && n.children.some(readable));
+    if (inlineComponentsFlag && mapping.type === 'group' && props.flexDirection === undefined && props.gridColumns === undefined && content.some(readable) && content.every((c) => c.type === NodeTypes.TEXT || c.type === NodeTypes.INTERPOLATION || (c.type === NodeTypes.ELEMENT && inlineTags.has(c.tag))))
+        mapping = { type: 'text' };
+    if (mapping.type === 'text' && content.length === 0 && ['i', 'span', 'b'].includes(node.tag))
+        mapping = { type: 'spacer' };
     // R108：button 只接受 label/bind —— 布局属性丢弃、缺 label 时占位（避免整页失败）
     if (mapping.type === 'button') {
-        const badProps = ['flexDirection', 'justifyContent', 'alignItems', 'gap', 'flex', 'textAlign', 'lineHeight', 'overflow', 'clip'];
+        const badProps = ['flexDirection', 'justifyContent', 'alignItems', 'gap', 'flex', 'textAlign', 'lineHeight', 'lineHeightMultiplier', 'overflow', 'clip'];
         for (const k of badProps)
             delete props[k];
     }
     if (mapping.type === 'input') {
         // R108：input 只接受 value/placeholder 等，文本样式属性一律丢弃
-        for (const k of ['textAlign', 'lineHeight', 'fontWeight', 'flexDirection', 'justifyContent', 'alignItems']) {
+        for (const k of ['textAlign', 'lineHeight', 'lineHeightMultiplier', 'fontWeight', 'flexDirection', 'justifyContent', 'alignItems']) {
             delete props[k];
         }
     }
@@ -2022,8 +2384,39 @@ function walkElement(node, classProps, comboRules, scopedRules, pseudoRules, war
     //    组件 View 内 {{ prop }}（propRefs）→ 单插值时可整体作为 text ref（Text(prop)）
     //  - 其余（group/image）：递归 walk
     const children = [];
-    let prevCondExpr;
-    if (mapping.type === 'text') {
+    if (mapping.type === 'text' && node.children.some((c) => c.type === NodeTypes.ELEMENT && inlineTags.has(c.tag))) {
+        const runs = [];
+        for (const child of node.children) {
+            if (child.type === NodeTypes.COMMENT)
+                continue;
+            if (child.type === NodeTypes.TEXT) {
+                runs.push({ text: child.content });
+                continue;
+            }
+            if (child.type === NodeTypes.ELEMENT && child.tag === 'br') {
+                runs.push({ text: '\n' });
+                continue;
+            }
+            const nodes = walk(child, classProps, comboRules, scopedRules, pseudoRules, warnings, state, compTable, propRefs, loopScope, [...ancestorClasses, cssElement(node)]);
+            for (const n of nodes) {
+                if (n.type !== 'text') {
+                    warnings.push(`行内元素 ${node.tag} 的非文本子节点需额外布局，已保留可读文字`);
+                    continue;
+                }
+                const run = { ...n.props };
+                if (inheritedTextStyles.get(n)?.fontSize === undefined && n.props?.fontSize === 14)
+                    delete run.fontSize;
+                if (n.bind)
+                    run.bind = n.bind.key;
+                runs.push(run);
+            }
+        }
+        if (runs.length)
+            props.textRuns = runs;
+        else
+            props.text = '';
+    }
+    else if (mapping.type === 'text') {
         let text = '';
         let refOnly;
         let exprOnly;
@@ -2035,6 +2428,11 @@ function walkElement(node, classProps, comboRules, scopedRules, pseudoRules, war
                 parts.push({ text: child.content });
             }
             else if (child.type === NodeTypes.INTERPOLATION) {
+                const rawExpression = textOf(child.content).trim();
+                if (activeLoops.length && !/^[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*)*$/.test(rawExpression)) {
+                    parts.push({ bind: addJsExprState(rawExpression) });
+                    continue;
+                }
                 const name = flattenStorePath(normalizeTemplateExpr(textOf(child.content).trim(), warnings));
                 // 动态列表项属性 {{ item.field }}：基名（dot[0]）命中循环变量才成立
                 const dot = name.split('.');
@@ -2177,6 +2575,14 @@ function walkElement(node, classProps, comboRules, scopedRules, pseudoRules, war
     else {
         for (const child of node.children) {
             if (mapping.type === 'button') {
+                if (child.type === NodeTypes.ELEMENT && child.tag === 'svg') {
+                    const rules = styleRuleTables.get(classProps) ?? [];
+                    const parents = [...ancestorClasses, cssElement(node)];
+                    const style = resolveCssRules(rules, cssElement(child), parents, '', warnings);
+                    props.icon = { vector: parseSvg(child, (el, path) => resolveCssRules(rules, cssElement(el), [...parents, ...path.map(cssElement)], '', warnings), warnings, addJsExprState),
+                        width: typeof style.width === 'number' ? style.width : 20, height: typeof style.height === 'number' ? style.height : 20 };
+                    continue;
+                }
                 if (child.type === NodeTypes.ELEMENT && (child.tag === 'br' || !elementInnerText(child).trim()))
                     continue; // R106/R107：按钮内换行/纯图标忽略
                 if (child.type === NodeTypes.TEXT && child.content.trim()) {
@@ -2226,56 +2632,40 @@ function walkElement(node, classProps, comboRules, scopedRules, pseudoRules, war
                 }
                 continue;
             }
-            // R128：v-else / v-else-if 与前一兄弟互补（此前无条件渲染，空状态块常显）
-            const __kids = walk(child, classProps, comboRules, scopedRules, pseudoRules, warnings, state, compTable, propRefs, loopScope, [
-                ...ancestorClasses,
-                ...elementClasses,
-            ]);
-            if (child.type === NodeTypes.ELEMENT) {
-                const dirs = child.props.filter((p2) => p2.type === NodeTypes.DIRECTIVE);
-                const isElse = dirs.some((d) => d.name === 'else');
-                const elseIf = dirs.find((d) => d.name === 'else-if');
-                if (isElse || elseIf) {
-                    const prev = prevCondExpr;
-                    const own = elseIf?.exp?.content?.trim();
-                    if (prev) {
-                        const condExpr = own ? `(${prev}) && (${own})` : `!(${prev})`;
-                        const stName = addJsExprState(`String(${condExpr})`);
-                        for (const k of __kids)
-                            k.condition = `__vrnCond:${stName}`;
-                    }
-                }
-                const ifDir = dirs.find((d) => d.name === 'if');
-                if (ifDir?.exp?.content)
-                    prevCondExpr = ifDir.exp.content.trim();
-            }
-            children.push(...__kids);
-        }
-    }
-    // R108：文本节点丢弃布局类属性（原生端 width/height/flexDirection 只对容器有意义）
-    if (mapping.type === 'text') {
-        const LAYOUT_ONLY = [
-            'height', 'width', 'flexDirection', 'justifyContent', 'alignItems', 'flex', 'gap',
-            'clip', 'overflow', 'marginBottom', 'marginRight', 'marginLeft', 'borderSides',
-            'radius', 'opacity', 'position', 'absTop', 'absLeft', 'absRight', 'absBottom',
-        ];
-        const dropped = LAYOUT_ONLY.filter((k) => props[k] !== undefined);
-        if (dropped.length > 0) {
-            for (const k of dropped)
-                delete props[k];
-            warnings.push(`<${node.tag}> 是文本节点，布局属性（${dropped.join('/')}）已忽略（R108）`);
-        }
-    }
-    // R88 续：容器节点不接受文本专属样式（color/fontSize/fontWeight/textAlign/lineHeight）
-    // 原生端容器没有「字体继承」，这类属性会直接触发 IR 校验拒收 → 明确降级 + 警告
-    if (mapping.type === 'group' || mapping.type === 'for') {
-        const TEXT_ONLY = ['color', 'fontSize', 'fontWeight', 'textAlign', 'lineHeight'];
-        const dropped = TEXT_ONLY.filter((k) => props[k] !== undefined);
-        if (dropped.length > 0) {
-            for (const k of dropped)
-                delete props[k];
-            warnings.push(`<${node.tag}> 是容器，文本样式（${dropped.join('/')}）在原生端不继承 → 已忽略；请把样式下沉到具体文本节点（R88）`);
         }
+        if (mapping.type !== 'button') {
+            children.push(...walkSiblings(node.children, (child) => walk(child, classProps, comboRules, scopedRules, pseudoRules, warnings, state, compTable, propRefs, loopScope, [...ancestorClasses, cssElement(node)])));
+        }
+    }
+    // 静态装饰伪元素生成原生盒子，保持相对于所属元素的层级。
+    if (mapping.type === 'group' && children.length) {
+        const rules = styleRuleTables.get(classProps) ?? [];
+        for (const marker of ['__vrnPseudoBefore', '__vrnPseudoAfter']) {
+            const decorated = rules.filter((rule) => rule.selector.at(-1)?.compound === '.' + marker);
+            if (!decorated.length)
+                continue;
+            const pseudo = resolveCssRules(decorated, { tag: 'span', classes: [marker] }, [...ancestorClasses, cssElement(node)], '', warnings);
+            if (!Object.keys(pseudo).length)
+                continue;
+            const layer = { type: 'spacer', props: pseudo };
+            const foreground = children.findIndex((child) => (child.props?.zIndex ?? 0) > 0);
+            children.splice(foreground >= 0 ? foreground : marker === '__vrnPseudoBefore' ? 0 : children.length, 0, layer);
+        }
+    }
+    // 文本节点保留已有双端映射的盒模型属性，只删除容器布局中转字段。
+    if (mapping.type === 'text' || mapping.type === 'spacer') {
+        for (const k of ['flexDirection', 'justifyContent', 'alignItems', 'gap', 'overflow', 'gridColumns'])
+            delete props[k];
+    }
+    const typography = {};
+    for (const k of TEXT_STYLE_KEYS)
+        if (props[k] !== undefined)
+            typography[k] = props[k];
+    if (['p', 'span', 'b', 'strong', 'i', 'em', 'u', 'option'].includes(node.tag) && resolvedStyle.fontSize === undefined)
+        delete typography.fontSize;
+    if (mapping.type === 'group' || mapping.type === 'for' || mapping.type === 'spacer') {
+        for (const k of TEXT_STYLE_KEYS)
+            delete props[k];
     }
     // R108 兜底：按钮最终必须有可见文案（label 或 bind），否则整页校验失败
     if (mapping.type === 'button' && props.label === undefined && props.bind === undefined) {
@@ -2287,13 +2677,13 @@ function walkElement(node, classProps, comboRules, scopedRules, pseudoRules, war
         warnings.push(`<${node.tag}> 无子节点 → 降级为占位 spacer（R17/R77；可用 padding/height 表达留白）`);
         const keep = {};
         const src = props;
-        for (const k of ['width', 'height', 'flex', 'marginTop', 'background']) {
+        for (const k of ['width', 'height', 'widthFraction', 'widthFractionDynamic', 'flex', 'marginTop', 'background', 'gradient', 'radius', 'shadow', 'borderWidth', 'borderColor', 'padding', 'minHeight', 'minWidth', 'opacity']) {
             if (src[k] !== undefined)
                 keep[k] = src[k];
         }
         const spacer = { type: 'spacer', props: keep };
         if (cond)
-            spacer.condition = normCond(cond);
+            spacer.condition = pageScriptBundleFlag ? `__vrnCond:${addJsExprState(`String(Boolean(${cond}))`)}` : normCond(cond);
         return spacer;
     }
     // overflow:auto → scroll 节点（消费中转标记，避免进入 schema 校验白名单）
@@ -2303,6 +2693,7 @@ function walkElement(node, classProps, comboRules, scopedRules, pseudoRules, war
         delete propsAny.overflow;
     }
     const irNode = { type: (nodeType ?? mapping.type), props };
+    inheritedTextStyles.set(irNode, typography);
     if (children.length > 0)
         irNode.children = children;
     if (cond) {
@@ -2317,14 +2708,16 @@ function walkElement(node, classProps, comboRules, scopedRules, pseudoRules, war
             /^![A-Za-z_$][\w$]*(\.[A-Za-z_$][\w$]*)?$/.test(nc) ||
             /^[A-Za-z_$][\w$]*(\.length)?\s*(==|!=|>|<|>=|<=)\s*('.*'|".*"|-?\d+)$/.test(nc);
         const usesLoopVar = activeLoops.some((l) => new RegExp(`\\b${l.itemKey}\\b`).test(nc));
-        if (!simpleCond && !usesLoopVar) {
-            const stName = addJsExprState(`String(${nc})`);
+        if (pageScriptBundleFlag || !simpleCond || usesLoopVar) {
+            const stName = addJsExprState(`String(Boolean(${cond}))`);
             irNode.condition = `__vrnCond:${stName}`;
         }
         else {
             irNode.condition = ownerKnown && mCond ? `__vrnField__:${mCond[1]}:${mCond[2]}` : nc;
         }
     }
+    if (activeWhen && activeLoops.length)
+        activeWhen = '__vrnCond:' + addJsExprState(`String(Boolean(${activeWhen}))`);
     if (activeWhen && activeProps) {
         irNode.active = { when: activeWhen, props: activeProps };
         // active 的 color 注入所有后代 text（选中态金色覆盖子元素显式色）