@dongmingzhixiu/vuexir-compiler 0.5.7 → 0.7.0

package/dist/codegen/vector.d.ts

@@ -0,0 +1,3 @@
+import type { IrProps } from '../ir/schema.js';
+export declare function swiftVector(p: IrProps, color: (s: string) => string, binding?: (s: string) => string): string;
+export declare function kotlinVector(p: IrProps, color: (s: string) => string, modifier: string, binding?: (s: string) => string): string;

package/dist/codegen/vector.js

@@ -0,0 +1,165 @@
+export function swiftVector(p, color, binding = (s) => s) {
+    const data = p.vector;
+    const [x, y, w, h] = data.viewBox;
+    if (data.dynamic)
+        return swiftDynamicVector(p, color, binding);
+    const lines = ['Canvas { context, size in', `  context.scaleBy(x: size.width / ${w}, y: size.height / ${h})`, `  context.translateBy(x: ${-x}, y: ${-y})`];
+    data.shapes.forEach((shape, i) => {
+        lines.push(`  var p${i} = Path()`);
+        let px = 0, py = 0;
+        for (const c of shape.commands) {
+            const n = c.slice(1);
+            switch (String(c[0]).toUpperCase()) {
+                case 'M':
+                    lines.push(`  p${i}.move(to: CGPoint(x: ${n[0]}, y: ${n[1]}))`);
+                    px = n[0];
+                    py = n[1];
+                    break;
+                case 'L':
+                    lines.push(`  p${i}.addLine(to: CGPoint(x: ${n[0]}, y: ${n[1]}))`);
+                    px = n[0];
+                    py = n[1];
+                    break;
+                case 'H':
+                    px = n[0];
+                    lines.push(`  p${i}.addLine(to: CGPoint(x: ${px}, y: ${py}))`);
+                    break;
+                case 'V':
+                    py = n[0];
+                    lines.push(`  p${i}.addLine(to: CGPoint(x: ${px}, y: ${py}))`);
+                    break;
+                case 'C':
+                    lines.push(`  p${i}.addCurve(to: CGPoint(x: ${n[4]}, y: ${n[5]}), control1: CGPoint(x: ${n[0]}, y: ${n[1]}), control2: CGPoint(x: ${n[2]}, y: ${n[3]}))`);
+                    px = n[4];
+                    py = n[5];
+                    break;
+                case 'Q':
+                    lines.push(`  p${i}.addQuadCurve(to: CGPoint(x: ${n[2]}, y: ${n[3]}), control: CGPoint(x: ${n[0]}, y: ${n[1]}))`);
+                    px = n[2];
+                    py = n[3];
+                    break;
+                case 'Z':
+                    lines.push(`  p${i}.closeSubpath()`);
+                    break;
+            }
+        }
+        const c = (s) => color(s === 'currentColor' || s.startsWith('url(') ? p.color ?? '#000000' : s);
+        if (shape.fill)
+            lines.push(`  context.fill(p${i}, with: .color(${c(shape.fill)}))`);
+        if (shape.trim)
+            lines.push(`  p${i} = p${i}.trimmedPath(from: 0, to: max(0,min(1,Double(String(${binding(shape.trim)})) ?? 0)))`);
+        if (shape.stroke)
+            lines.push(`  context.stroke(p${i}, with: .color(${c(shape.stroke)}), style: StrokeStyle(lineWidth: ${shape.strokeWidth}, lineCap: .${shape.lineCap === 'round' ? 'round' : shape.lineCap === 'square' ? 'square' : 'butt'}))`);
+    });
+    lines.push('}');
+    return lines.join('\n');
+}
+export function kotlinVector(p, color, modifier, binding = (s) => s) {
+    const data = p.vector, [x, y, w, h] = data.viewBox;
+    if (data.dynamic)
+        return kotlinDynamicVector(p, color, modifier, binding);
+    const lines = [`androidx.compose.foundation.Canvas(modifier = ${modifier}) {`, '  val canvasScaleX = size.width / ' + w + 'f', '  val canvasScaleY = size.height / ' + h + 'f',
+        '  withTransform({ scale(canvasScaleX, canvasScaleY, pivot = Offset.Zero); translate(' + (-x) + 'f, ' + (-y) + 'f) }) {'];
+    data.shapes.forEach((shape, i) => {
+        lines.push(`    val p${i} = androidx.compose.ui.graphics.Path()`);
+        let px = 0, py = 0;
+        for (const c of shape.commands) {
+            const n = c.slice(1), args = n.map((v) => `${v}f`).join(', ');
+            switch (String(c[0]).toUpperCase()) {
+                case 'M':
+                    lines.push(`    p${i}.moveTo(${args})`);
+                    px = n[0];
+                    py = n[1];
+                    break;
+                case 'L':
+                    lines.push(`    p${i}.lineTo(${args})`);
+                    px = n[0];
+                    py = n[1];
+                    break;
+                case 'H':
+                    px = n[0];
+                    lines.push(`    p${i}.lineTo(${px}f, ${py}f)`);
+                    break;
+                case 'V':
+                    py = n[0];
+                    lines.push(`    p${i}.lineTo(${px}f, ${py}f)`);
+                    break;
+                case 'C':
+                    lines.push(`    p${i}.cubicTo(${args})`);
+                    px = n[4];
+                    py = n[5];
+                    break;
+                case 'Q':
+                    lines.push(`    p${i}.quadraticBezierTo(${args})`);
+                    px = n[2];
+                    py = n[3];
+                    break;
+                case 'Z':
+                    lines.push(`    p${i}.close()`);
+                    break;
+            }
+        }
+        const c = (s) => color(s === 'currentColor' || s.startsWith('url(') ? p.color ?? '#000000' : s);
+        if (shape.fill)
+            lines.push(`    drawPath(p${i}, ${c(shape.fill)})`);
+        if (shape.trim)
+            lines.push(`    val measured${i} = androidx.compose.ui.graphics.PathMeasure().apply { setPath(p${i},false) }; val part${i}=androidx.compose.ui.graphics.Path(); measured${i}.getSegment(0f,measured${i}.length * ((${binding(shape.trim)}.toString().toFloatOrNull() ?: 0f).coerceIn(0f,1f)),part${i},true); p${i}.reset(); p${i}.addPath(part${i})`);
+        if (shape.stroke)
+            lines.push(`    drawPath(p${i}, ${c(shape.stroke)}, style = androidx.compose.ui.graphics.drawscope.Stroke(width = ${shape.strokeWidth}f, cap = androidx.compose.ui.graphics.StrokeCap.${shape.lineCap === 'round' ? 'Round' : shape.lineCap === 'square' ? 'Square' : 'Butt'}))`);
+    });
+    lines.push('  }', '}');
+    return lines.join('\n');
+}
+function swiftDynamicVector(p, color, binding) {
+    const data = p.vector, [x, y, w, h] = data.viewBox;
+    const colors = (data.colors ?? []).map((c) => `case ${JSON.stringify(c)}: return ${color(c)}`).join('\n');
+    return `Canvas { context, size in
+  context.scaleBy(x: size.width / ${w}, y: size.height / ${h})
+  context.translateBy(x: ${-x}, y: ${-y})
+  func paint(_ c:String) -> Color {
+    switch c { ${colors}
+    case "none", "transparent": return .clear
+    default: return ${color(p.color ?? '#d9b36c')} }
+  }
+  if let records = try? JSONSerialization.jsonObject(with: Data(${binding(data.dynamic)}.utf8)) as? [[String: Any]] {
+    for record in records {
+      if let text = record["text"] as? String {
+        let label=Text(text).font(.system(size:record["size"] as? Double ?? 10)).foregroundColor(paint(record["fill"] as? String ?? ""))
+        let anchor=record["anchor"] as? String ?? "start"
+        context.draw(label,at:CGPoint(x:record["x"] as? Double ?? 0,y:record["y"] as? Double ?? 0),anchor:anchor == "end" ? .bottomTrailing : anchor == "middle" ? .bottom : .bottomLeading)
+      } else {
+        let path=vrnSvgPath(record["d"] as? String ?? "")
+        let fill=record["fill"] as? String ?? "none", stroke=record["stroke"] as? String ?? "none"
+        var layer=context;layer.opacity=record["opacity"] as? Double ?? 1
+        if fill != "none" {var f=layer;f.opacity *= record["fillOpacity"] as? Double ?? 1;f.fill(path,with:.color(paint(fill)))}
+        if stroke != "none" {layer.opacity *= record["strokeOpacity"] as? Double ?? 1;layer.stroke(path,with:.color(paint(stroke)),lineWidth:record["width"] as? Double ?? 1)}
+      }
+    }
+  }
+}`;
+}
+function kotlinDynamicVector(p, color, modifier, binding) {
+    const data = p.vector, [x, y, w, h] = data.viewBox;
+    const colors = (data.colors ?? []).map((c) => `${JSON.stringify(c)} -> ${color(c)}`).join('\n');
+    return `androidx.compose.foundation.Canvas(modifier = ${modifier}) {
+  fun paint(c:String):Color = when(c) {${colors}
+    "none", "transparent" -> Color.Transparent
+    else -> ${color(p.color ?? '#d9b36c')}
+  }
+  val records=runCatching {org.json.JSONArray(${binding(data.dynamic)}.toString())}.getOrDefault(org.json.JSONArray())
+  withTransform({scale(size.width / ${w}f,size.height / ${h}f,pivot = Offset.Zero);translate(${-x}f,${-y}f)}) {
+    for(i in 0 until records.length()) {
+      val record=records.optJSONObject(i) ?: continue
+      if(record.has("text")) {
+        val ink=android.graphics.Paint(android.graphics.Paint.ANTI_ALIAS_FLAG).apply {this.color=paint(record.optString("fill")).toArgb();textSize=record.optDouble("size",10.0).toFloat();textAlign=when(record.optString("anchor")){"end" -> android.graphics.Paint.Align.RIGHT;"middle" -> android.graphics.Paint.Align.CENTER;else -> android.graphics.Paint.Align.LEFT}}
+        drawContext.canvas.nativeCanvas.drawText(record.optString("text"),record.optDouble("x").toFloat(),record.optDouble("y").toFloat(),ink)
+      } else {
+        val path=runCatching {androidx.core.graphics.PathParser.createPathFromPathData(record.optString("d"))?.asComposePath()}.getOrNull() ?: continue
+        val fill=record.optString("fill","none");val stroke=record.optString("stroke","none");val alpha=record.optDouble("opacity",1.0).toFloat().coerceIn(0f,1f)
+        if(fill != "none")drawPath(path,paint(fill),alpha = alpha * record.optDouble("fillOpacity",1.0).toFloat().coerceIn(0f,1f))
+        if(stroke != "none")drawPath(path,paint(stroke),alpha = alpha * record.optDouble("strokeOpacity",1.0).toFloat().coerceIn(0f,1f),style = androidx.compose.ui.graphics.drawscope.Stroke(width = record.optDouble("width",1.0).toFloat()))
+      }
+    }
+  }
+}`;
+}

package/dist/index.d.ts

@@ -6,12 +6,19 @@
  *  - 平台差异只体现在 codegen 目录（swiftui / compose），转换层与 IR 双端共享
  *  - 工程级生成入口（runTabs / gen-* 脚本）在 @dongmingzhixiu/vuexir；本包只暴露可组合的纯函数
  */
-export { vueToIr, VueCompileError, extractScreenState, extractScreenConstArrays, extractScreenNavBar, extractFunctions, extractOnMounted, rewriteStateRefs, generateRuntimeSource, swiftExpr, resolveSetCall, } from './transform/vue2ir.js';
+export { vueToIr, VueCompileError, extractScreenState, extractScreenConstArrays, extractScreenNavBar, extractFunctions, extractOnMounted, rewriteStateRefs, generateRuntimeSource, RUNTIME_BOOTSTRAP_SOURCE, swiftExpr, resolveSetCall, } from './transform/vue2ir.js';
 export type { Vue2IrOptions, ScreenStateInfo } from './transform/vue2ir.js';
-export { parseCss, parseInlineStyle, mergeIrProps, CssParseError } from './transform/css.js';
+export { parseCss, extractCssVariables, parseInlineStyle, mergeIrProps, CssParseError } from './transform/css.js';
 export type { CssParseResult } from './transform/css.js';
 export { validateIr, parseAndValidateIr } from './ir/schema.js';
 export type { IrScreen, IrNode, IrProps, IrValidationIssue } from './ir/schema.js';
 export { generateScreenSource, generateComponentSource, generateThemeSource, generateViewExtensions, VRN_HELPERS_SWIFT, collectTheme, buildTheme, } from './codegen/swiftui.js';
 export { emitNode, buildNavHost, parseRouter, resolveInput, runTabs, findProjectRoot } from './codegen/compose.js';
 export type { RunTabsOptions } from './codegen/compose.js';
+export { loadProjectStyles } from './codegen/project-styles.js';
+export { loadProjectAssets, materializeProjectAssets } from './codegen/project-assets.js';
+export { parseTabBar } from './transform/tab-bar.js';
+export type { TabBarSpec } from './transform/tab-bar.js';
+export { swiftVector } from './codegen/vector.js';
+export { boxModifiers as generateSwiftBoxModifiers } from './codegen/swiftui.js';
+export { colorExpr as swiftColorExpression } from './codegen/swiftui.js';

package/dist/index.js

@@ -6,9 +6,15 @@
  *  - 平台差异只体现在 codegen 目录（swiftui / compose），转换层与 IR 双端共享
  *  - 工程级生成入口（runTabs / gen-* 脚本）在 @dongmingzhixiu/vuexir；本包只暴露可组合的纯函数
  */
-export { vueToIr, VueCompileError, extractScreenState, extractScreenConstArrays, extractScreenNavBar, extractFunctions, extractOnMounted, rewriteStateRefs, generateRuntimeSource, swiftExpr, resolveSetCall, } from './transform/vue2ir.js';
-export { parseCss, parseInlineStyle, mergeIrProps, CssParseError } from './transform/css.js';
+export { vueToIr, VueCompileError, extractScreenState, extractScreenConstArrays, extractScreenNavBar, extractFunctions, extractOnMounted, rewriteStateRefs, generateRuntimeSource, RUNTIME_BOOTSTRAP_SOURCE, swiftExpr, resolveSetCall, } from './transform/vue2ir.js';
+export { parseCss, extractCssVariables, parseInlineStyle, mergeIrProps, CssParseError } from './transform/css.js';
 export { validateIr, parseAndValidateIr } from './ir/schema.js';
 export { generateScreenSource, generateComponentSource, generateThemeSource, generateViewExtensions, VRN_HELPERS_SWIFT, collectTheme, buildTheme, } from './codegen/swiftui.js';
 // 工程脚手架入口（runTabs）：保留在 core 供 CLI 与旧脚本调用；模板由调用方注入（P2）
 export { emitNode, buildNavHost, parseRouter, resolveInput, runTabs, findProjectRoot } from './codegen/compose.js';
+export { loadProjectStyles } from './codegen/project-styles.js';
+export { loadProjectAssets, materializeProjectAssets } from './codegen/project-assets.js';
+export { parseTabBar } from './transform/tab-bar.js';
+export { swiftVector } from './codegen/vector.js';
+export { boxModifiers as generateSwiftBoxModifiers } from './codegen/swiftui.js';
+export { colorExpr as swiftColorExpression } from './codegen/swiftui.js';

package/dist/ir/schema.d.ts

@@ -8,7 +8,7 @@
  *
  * 预留（本阶段不实现，仅类型占位）：bind / repeat / condition / events.action
  */
-export declare const NODE_TYPES: readonly ["root", "group", "for", "text", "image", "button", "input", "scroll", "spacer", "divider", "component"];
+export declare const NODE_TYPES: readonly ["root", "group", "for", "text", "image", "vector", "button", "input", "scroll", "spacer", "divider", "component"];
 export type NodeType = (typeof NODE_TYPES)[number];
 /** 尺寸：fill=填满父容器主轴，auto=由内容决定，number=固定像素（仅限固定物） */
 export type Size = number | 'fill' | 'auto';
@@ -21,6 +21,10 @@ export type ObjectFit = 'cover' | 'contain';
 export interface IrProps {
     /** 尺寸 */
     width?: Size;
+    widthFraction?: number;
+    widthFractionDynamic?: string;
+    widthDynamic?: string;
+    heightDynamic?: string;
     height?: Size;
     /** 内边距：数字=四边相等；对象=指定边 */
     padding?: number | {
@@ -74,6 +78,7 @@ export interface IrProps {
         fallback?: string;
     };
     /** M4b 混合文本：静态段 + 插值/动态字段段 → Text("\(bind)静态\(dyn)") */
+    textRuns?: IrProps[];
     bindParts?: ({
         text: string;
     } | {
@@ -94,8 +99,39 @@ export interface IrProps {
     flexDirection?: FlexDirection;
     justifyContent?: Justify;
     alignItems?: Align;
+    alignSelf?: Align;
+    flexWrap?: boolean;
     /** 视觉 */
+    icon?: {
+        vector: import('../transform/svg.js').VectorData;
+        width: number;
+        height: number;
+    };
+    vector?: import('../transform/svg.js').VectorData;
     background?: string;
+    zIndex?: number;
+    minWidth?: number;
+    minHeight?: number;
+    letterSpacing?: number;
+    fontFamily?: 'sans' | 'serif' | 'monospace';
+    gradient?: {
+        kind?: 'linear' | 'radial';
+        center?: {
+            x: number;
+            y: number;
+        };
+        angle: number;
+        stops: {
+            color: string;
+            offset: number;
+        }[];
+    };
+    shadow?: {
+        x: number;
+        y: number;
+        blur: number;
+        color: string;
+    };
     radius?: number;
     borderWidth?: number;
     borderColor?: string;
@@ -127,10 +163,13 @@ export interface IrProps {
     fontWeight?: FontWeight;
     textAlign?: TextAlign;
     lineHeight?: number;
+    /** CSS 无单位行高，随当前文本字号计算，不按父字号提前固定。 */
+    lineHeightMultiplier?: number;
     color?: string;
     /** image 专属 */
     src?: string;
     objectFit?: ObjectFit;
+    aspectRatio?: number;
     /** button 专属 */
     label?: string;
     /** button 点击事件（@click 绑定的处理函数名，运行时由 JS 引擎执行） */
@@ -289,6 +328,7 @@ export interface IrScreen {
      *  backText: 返回文案（默认 Back）；immersive: 背景顶到状态栏（edge-to-edge）
      */
     navBar?: {
+        hidden?: boolean;
         mode?: 'fixed' | 'transparent' | 'scroll';
         title?: string;
         bg?: string;

package/dist/ir/schema.js

@@ -14,6 +14,7 @@ export const NODE_TYPES = [
     'for',
     'text',
     'image',
+    'vector',
     'button',
     'input',
     'scroll',
@@ -31,6 +32,24 @@ function isSize(v) {
     return v === 'fill' || v === 'auto' || (typeof v === 'number' && v >= 0 && Number.isFinite(v));
 }
 const PROPS_VALIDATORS = {
+    zIndex: (v) => typeof v === 'number' && Number.isFinite(v),
+    minWidth: (v) => typeof v === 'number' && v >= 0,
+    minHeight: (v) => typeof v === 'number' && v >= 0,
+    fontFamily: (v) => ['sans', 'serif', 'monospace'].includes(String(v)),
+    letterSpacing: (v) => typeof v === 'number' && Number.isFinite(v),
+    gradient: (v) => typeof v === 'object' && v !== null && Number.isFinite(v.angle) &&
+        Array.isArray(v.stops) && v.stops.length >= 2 &&
+        v.stops.every((s) => isColor(s.color) && Number.isFinite(s.offset)),
+    shadow: (v) => typeof v === 'object' && v !== null && isColor(v.color) &&
+        ['x', 'y', 'blur'].every((k) => Number.isFinite(v[k])) && v.blur >= 0,
+    icon: (v) => typeof v === 'object' && v !== null && !!v.vector,
+    aspectRatio: (v) => typeof v === 'number' && v > 0,
+    vector: (v) => typeof v === 'object' && v !== null && Array.isArray(v.viewBox) && Array.isArray(v.shapes),
+    widthFraction: (v) => typeof v === 'number' && v >= 0,
+    widthFractionDynamic: (v) => typeof v === 'string',
+    widthDynamic: (v) => typeof v === 'string',
+    heightDynamic: (v) => typeof v === 'string',
+    textRuns: (v) => Array.isArray(v) && v.every((r) => typeof r === 'object' && r !== null),
     width: isSize,
     height: isSize,
     padding: (v) => typeof v === 'number' && v >= 0 || (typeof v === 'object' && v !== null),
@@ -50,6 +69,8 @@ const PROPS_VALIDATORS = {
         isColor(v.color),
     flexDirection: (v) => v === 'row' || v === 'column',
     justifyContent: (v) => ['start', 'center', 'end', 'spaceBetween', 'spaceAround'].includes(v),
+    flexWrap: (v) => typeof v === 'boolean',
+    alignSelf: (v) => ['start', 'center', 'end', 'stretch'].includes(v),
     alignItems: (v) => ['start', 'center', 'end', 'stretch'].includes(v),
     background: isColor,
     radius: (v) => typeof v === 'number' && v >= 0,
@@ -76,6 +97,7 @@ const PROPS_VALIDATORS = {
     fontSize: (v) => typeof v === 'number' && v > 0,
     fontWeight: (v) => ['normal', 'medium', 'bold'].includes(v),
     textAlign: (v) => ['left', 'center', 'right'].includes(v),
+    lineHeightMultiplier: (v) => typeof v === 'number' && v > 0,
     lineHeight: (v) => typeof v === 'number' && v > 0,
     color: isColor,
     src: (v) => typeof v === 'string',
@@ -115,17 +137,18 @@ const PROPS_VALIDATORS = {
 };
 /** 各节点允许的 props 键（P0 最小集，防 Taro 化：未知 prop 即报错） */
 const NODE_ALLOWED_PROPS = {
-    root: ['width', 'height', 'background'],
-    group: ['width', 'height', 'padding', 'gap', 'flex', 'flexDirection', 'justifyContent', 'alignItems', 'background', 'radius', 'borderWidth', 'borderColor', 'marginTopAuto', 'marginTop', 'marginLeftAuto', 'marginBottom', 'marginRight', 'marginLeft', 'borderSides', 'clip', 'onClick', 'onSet', 'position', 'absTop', 'absLeft', 'absRight', 'absBottom', 'transform', 'show', 'opacity', 'gridColumns'],
-    text: ['width', 'text', 'ref', 'bind', 'bindExpr', 'dynField', 'bindParts', 'fontSize', 'fontWeight', 'textAlign', 'lineHeight', 'color', 'padding', 'background', 'colorActive', 'marginLeftAuto', 'marginTop', 'colorDynamic', 'fontSizeDynamic', 'position', 'absTop', 'absLeft', 'absRight', 'absBottom', 'transform', 'show', 'flex', 'opacity', 'onClick', 'onSet', 'fieldOf'],
-    image: ['width', 'height', 'src', 'objectFit', 'radius', 'borderSides', 'borderWidth', 'borderColor', 'clip', 'flex', 'marginTop', 'marginBottom', 'marginRight', 'marginLeft', 'position', 'absTop', 'absLeft', 'absRight', 'absBottom', 'transform', 'show', 'opacity'],
-    button: ['width', 'height', 'label', 'bind', 'background', 'radius', 'borderWidth', 'borderColor', 'fontSize', 'fontWeight', 'color', 'flex', 'padding', 'marginTopAuto', 'marginTop', 'marginBottom', 'marginRight', 'marginLeft', 'borderSides', 'clip', 'onClick', 'onSet', 'colorDynamic', 'fontSizeDynamic', 'position', 'absTop', 'absLeft', 'absRight', 'absBottom', 'transform', 'show', 'pressBg', 'opacity'],
-    input: ['width', 'height', 'value', 'placeholder', 'fontSize', 'color', 'background', 'padding', 'radius', 'borderWidth', 'borderColor', 'borderSides', 'clip', 'flex', 'marginTop', 'marginTopAuto', 'marginBottom', 'marginRight', 'marginLeft', 'onSet', 'colorDynamic', 'fontSizeDynamic', 'position', 'absTop', 'absLeft', 'absRight', 'absBottom', 'transform', 'show'],
-    scroll: ['width', 'height', 'padding', 'gap', 'flexDirection', 'background', 'showsIndicators', 'flex', 'justifyContent', 'alignItems', 'radius', 'borderWidth', 'borderColor', 'marginTop', 'position', 'absTop', 'absLeft', 'absRight', 'absBottom', 'transform', 'show', 'opacity', 'borderSides', 'clip'],
-    spacer: ['width', 'height', 'flex', 'background', 'padding', 'radius', 'borderWidth', 'borderColor', 'marginTop', 'alignSelf', 'opacity'],
-    divider: ['width', 'height', 'background', 'borderWidth', 'borderColor', 'marginTop', 'marginBottom', 'marginLeft', 'marginRight', 'padding', 'radius', 'flex', 'opacity', 'position', 'absTop', 'absLeft', 'absRight', 'absBottom', 'transform', 'show'],
-    component: ['name', 'attrs', 'flex', 'width', 'height', 'marginTop', 'marginTopAuto', 'marginLeftAuto', 'marginBottom', 'marginLeft', 'marginRight', 'background', 'radius', 'borderWidth', 'borderColor', 'padding', 'position', 'absTop', 'absLeft', 'absRight', 'absBottom', 'transform', 'show', 'opacity', 'onClick'],
-    for: ['flexDirection', 'gap', 'padding', 'background', 'flex', 'width', 'height', 'showsIndicators', 'borderSides', 'clip', 'position', 'absTop', 'absLeft', 'absRight', 'absBottom', 'transform', 'show'],
+    root: ['minWidth', 'minHeight', 'gradient', 'shadow', 'width', 'height', 'background'],
+    group: ['flexWrap', 'alignSelf', 'widthFraction', 'widthFractionDynamic', 'zIndex', 'widthDynamic', 'heightDynamic', 'minWidth', 'minHeight', 'gradient', 'shadow', 'width', 'height', 'padding', 'gap', 'flex', 'flexDirection', 'justifyContent', 'alignItems', 'background', 'radius', 'borderWidth', 'borderColor', 'marginTopAuto', 'marginTop', 'marginLeftAuto', 'marginBottom', 'marginRight', 'marginLeft', 'borderSides', 'clip', 'onClick', 'onSet', 'position', 'absTop', 'absLeft', 'absRight', 'absBottom', 'transform', 'show', 'opacity', 'gridColumns'],
+    text: ['alignSelf', 'widthFraction', 'widthFractionDynamic', 'textRuns', 'zIndex', 'fontFamily', 'widthDynamic', 'heightDynamic', 'letterSpacing', 'minWidth', 'minHeight', 'gradient', 'shadow', 'height', 'radius', 'borderWidth', 'borderColor', 'borderSides', 'clip', 'marginBottom', 'marginRight', 'marginLeft', 'width', 'text', 'ref', 'bind', 'bindExpr', 'dynField', 'bindParts', 'fontSize', 'fontWeight', 'textAlign', 'lineHeight', 'lineHeightMultiplier', 'color', 'padding', 'background', 'colorActive', 'marginLeftAuto', 'marginTop', 'colorDynamic', 'fontSizeDynamic', 'position', 'absTop', 'absLeft', 'absRight', 'absBottom', 'transform', 'show', 'flex', 'opacity', 'onClick', 'onSet', 'fieldOf'],
+    vector: ['aspectRatio', 'widthFraction', 'widthFractionDynamic', 'zIndex', 'widthDynamic', 'heightDynamic', 'vector', 'width', 'height', 'flex', 'color', 'opacity', 'padding', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'position', 'absTop', 'absLeft', 'absRight', 'absBottom', 'transform', 'show', 'onClick'],
+    image: ['widthFraction', 'widthFractionDynamic', 'zIndex', 'widthDynamic', 'heightDynamic', 'padding', 'background', 'onClick', 'onSet', 'minWidth', 'minHeight', 'gradient', 'shadow', 'width', 'height', 'src', 'objectFit', 'radius', 'borderSides', 'borderWidth', 'borderColor', 'clip', 'flex', 'marginTop', 'marginBottom', 'marginRight', 'marginLeft', 'position', 'absTop', 'absLeft', 'absRight', 'absBottom', 'transform', 'show', 'opacity'],
+    button: ['alignSelf', 'widthFraction', 'widthFractionDynamic', 'icon', 'fontFamily', 'letterSpacing', 'zIndex', 'widthDynamic', 'heightDynamic', 'marginLeftAuto', 'minWidth', 'minHeight', 'gradient', 'shadow', 'width', 'height', 'label', 'bind', 'background', 'radius', 'borderWidth', 'borderColor', 'fontSize', 'fontWeight', 'color', 'flex', 'padding', 'marginTopAuto', 'marginTop', 'marginBottom', 'marginRight', 'marginLeft', 'borderSides', 'clip', 'onClick', 'onSet', 'colorDynamic', 'fontSizeDynamic', 'position', 'absTop', 'absLeft', 'absRight', 'absBottom', 'transform', 'show', 'pressBg', 'opacity'],
+    input: ['widthFraction', 'widthFractionDynamic', 'fontFamily', 'letterSpacing', 'zIndex', 'widthDynamic', 'heightDynamic', 'opacity', 'minWidth', 'minHeight', 'gradient', 'shadow', 'width', 'height', 'value', 'placeholder', 'fontSize', 'color', 'background', 'padding', 'radius', 'borderWidth', 'borderColor', 'borderSides', 'clip', 'flex', 'marginTop', 'marginTopAuto', 'marginBottom', 'marginRight', 'marginLeft', 'onSet', 'colorDynamic', 'fontSizeDynamic', 'position', 'absTop', 'absLeft', 'absRight', 'absBottom', 'transform', 'show'],
+    scroll: ['widthFraction', 'widthFractionDynamic', 'zIndex', 'widthDynamic', 'heightDynamic', 'minWidth', 'minHeight', 'gradient', 'shadow', 'marginBottom', 'marginRight', 'marginLeft', 'marginTopAuto', 'marginLeftAuto', 'width', 'height', 'padding', 'gap', 'flexDirection', 'background', 'showsIndicators', 'flex', 'justifyContent', 'alignItems', 'radius', 'borderWidth', 'borderColor', 'marginTop', 'position', 'absTop', 'absLeft', 'absRight', 'absBottom', 'transform', 'show', 'opacity', 'borderSides', 'clip'],
+    spacer: ['borderSides', 'onSet', 'onClick', 'marginRight', 'marginBottom', 'marginLeft', 'position', 'absTop', 'absLeft', 'absRight', 'absBottom', 'clip', 'zIndex', 'widthFraction', 'widthFractionDynamic', 'widthDynamic', 'heightDynamic', 'minWidth', 'minHeight', 'gradient', 'shadow', 'width', 'height', 'flex', 'background', 'padding', 'radius', 'borderWidth', 'borderColor', 'marginTop', 'alignSelf', 'opacity'],
+    divider: ['minWidth', 'minHeight', 'gradient', 'shadow', 'width', 'height', 'background', 'borderWidth', 'borderColor', 'marginTop', 'marginBottom', 'marginLeft', 'marginRight', 'padding', 'radius', 'flex', 'opacity', 'position', 'absTop', 'absLeft', 'absRight', 'absBottom', 'transform', 'show'],
+    component: ['widthFraction', 'widthFractionDynamic', 'zIndex', 'widthDynamic', 'heightDynamic', 'minWidth', 'minHeight', 'gradient', 'shadow', 'name', 'attrs', 'flex', 'width', 'height', 'marginTop', 'marginTopAuto', 'marginLeftAuto', 'marginBottom', 'marginLeft', 'marginRight', 'background', 'radius', 'borderWidth', 'borderColor', 'padding', 'position', 'absTop', 'absLeft', 'absRight', 'absBottom', 'transform', 'show', 'opacity', 'onClick'],
+    for: ['widthFraction', 'widthFractionDynamic', 'zIndex', 'widthDynamic', 'heightDynamic', 'minWidth', 'minHeight', 'gradient', 'shadow', 'flexDirection', 'gap', 'padding', 'background', 'flex', 'width', 'height', 'showsIndicators', 'borderSides', 'clip', 'position', 'absTop', 'absLeft', 'absRight', 'absBottom', 'transform', 'show'],
 };
 /** 必须有 children 的节点 */
 const CONTAINER_TYPES = ['root', 'group', 'scroll', 'for'];
@@ -255,16 +278,12 @@ function validateNode(node, path, issues, seenKeys, stateNames = new Set(), inLo
             // state 交叉校验：bind/value/show 必须指向页面已声明状态（M1 契约，防原生端引用未声明变量）。
             // bind 例外：for 循环项内可绑定循环变量（item/i），进入 for 子树后跳过
             if (stateNames.size > 0 && (k === 'value' || k === 'show' || (k === 'bind' && !inLoop)) && typeof v === 'string') {
-                if (!stateNames.has(v)) {
+                if (!stateNames.has(v) && !v.startsWith('__vrnLoop:')) {
                     issues.push({ path: p, message: `「${k}: ${v}」未在 screen.state 中声明（原生端将引用未定义变量）` });
                 }
             }
         }
-        // 尺寸约束（R16）：group/text/button 未声明 flex 时若 width 为 number 且 > 设计稿 360 的一半，提示
-        if (node.type !== 'image' && node.type !== 'spacer' && node.props.width !== undefined
-            && typeof node.props.width === 'number' && node.props.width > 200) {
-            issues.push({ path: `${path}.props.width`, message: `width=${node.props.width} 为绝对像素且超过 200，违反 R16 相对布局优先（应使用 fill 或按比例 flex）` });
-        }
+        // CSS 真实项目允许固定宽度预览卡、圆环等；相对布局是建议，不应拒绝合法尺寸。
     }
     // 容器/叶子约束
     if (CONTAINER_TYPES.includes(node.type) && (!node.children || node.children.length === 0)) {
@@ -274,7 +293,7 @@ function validateNode(node, path, issues, seenKeys, stateNames = new Set(), inLo
         issues.push({ path, message: `${node.type} 为叶子节点，不允许 children` });
     }
     // 文本内容：text 节点需 props.text / props.ref（组件 prop 引用）/ props.bind（页面 state，M1）或 bind
-    if (node.type === 'text' && !node.bind && (!node.props || (node.props.text === undefined && node.props.ref === undefined && node.props.bind === undefined && node.props.bindExpr === undefined && node.props.dynField === undefined && node.props.bindParts === undefined && node.props.fieldOf === undefined))) {
+    if (node.type === 'text' && !node.bind && (!node.props || (node.props.textRuns === undefined && node.props.text === undefined && node.props.ref === undefined && node.props.bind === undefined && node.props.bindExpr === undefined && node.props.dynField === undefined && node.props.bindParts === undefined && node.props.fieldOf === undefined))) {
         issues.push({ path, message: 'text 节点必须有 props.text / props.ref / props.bind / props.bindExpr / props.fieldOf 或 bind' });
     }
     // R108：按钮文案可以是静态 label，也可以是动态 bind（运行时求值）
@@ -298,10 +317,10 @@ function validateNode(node, path, issues, seenKeys, stateNames = new Set(), inLo
                 issues.push({ path: `${path}.vfor.list`, message: 'vfor.list 元素必须为 number / string / 对象字面量' });
             }
         }
-        else if (!vf.listState || !/^[A-Za-z_]\w*$/.test(vf.listState)) {
+        else if (!vf.listState || (!/^[A-Za-z_]\w*$/.test(vf.listState) && !vf.listState.startsWith('__vrnLoop:'))) {
             issues.push({ path: `${path}.vfor.listState`, message: 'vfor.listState 必填且为合法标识符（M4b 动态列表）' });
         }
-        else if (stateNames.size > 0 && !stateNames.has(vf.listState)) {
+        else if (stateNames.size > 0 && !stateNames.has(vf.listState) && !vf.listState.startsWith('__vrnLoop:')) {
             issues.push({ path: `${path}.vfor.listState`, message: `listState「${vf.listState}」未在 screen.state 中声明（原生端将引用未定义变量）` });
         }
         if (!vf.itemKey || !/^[A-Za-z_]\w*$/.test(vf.itemKey)) {

package/dist/transform/css.d.ts

@@ -1,4 +1,22 @@
+export interface CssElement {
+    tag: string;
+    classes: string[];
+    id?: string;
+}
+export interface CssStyleRule {
+    selector: {
+        compound: string;
+        direct: boolean;
+    }[];
+    specificity: number;
+    important: boolean;
+    props: Record<string, unknown>;
+}
+/** ancestors 按根到父排列；回溯匹配，避免多层后代选择器被扁平化而误命中。 */
+export declare function matchesCssSelector(selector: CssStyleRule['selector'], element: CssElement, ancestors: CssElement[]): boolean;
+export declare function resolveCssRules(rules: CssStyleRule[], element: CssElement, ancestors: CssElement[], inline: string, warnings: string[]): Record<string, unknown>;
 export interface CssParseResult {
+    styleRules: CssStyleRule[];
     /** className（去点）→ IR props */
     classProps: Map<string, Record<string, unknown>>;
     /** 组合选择器规则（如 .a.b）：元素同时具备全部类时生效，优先级最高 */
@@ -30,7 +48,9 @@ export declare class CssParseError extends Error {
  * 直接覆盖会让同一 class 内的多条声明互相清空。
  */
 export declare function mergeIrProps<T extends object>(target: T, src: object): T;
+/** 只采集默认 :root，避免最后一个未启用皮肤覆盖当前默认值。 */
+export declare function extractCssVariables(styles: string[]): Record<string, string>;
 /** 解析 `<style>` 内容 → 类规则表 */
-export declare function parseCss(source: string, warnings: string[]): CssParseResult;
+export declare function parseCss(source: string, warnings: string[], variables?: Record<string, string>): CssParseResult;
 /** 解析内联 style="..."（分号分隔声明） */
 export declare function parseInlineStyle(styleText: string, warnings: string[]): Record<string, unknown>;