@dongmingzhixiu/vuexir-compiler 0.5.7 → 0.7.0

package/dist/transform/css.js

@@ -10,8 +10,73 @@
  * 不在子集内的属性 → 收集到 warnings（编译期提示，不静默忽略）。
  */
 import postcss from 'postcss';
+import { parseLinearGradient, splitCssArgs, splitCssWords } from './visuals.js';
+/** 支持标签、类、ID、通配符及按顺序匹配的后代/直接子代选择器。 */
+function parseSelector(selector) {
+    if (!selector.trim() || /[+~:[\]]/.test(selector))
+        return null;
+    const tokens = selector.trim().replace(/\s*>\s*/g, ' > ').split(/\s+/);
+    const out = [];
+    let direct = false;
+    for (const token of tokens) {
+        if (token === '>') {
+            if (!out.length || direct)
+                return null;
+            direct = true;
+            continue;
+        }
+        if (!/^(?:[A-Za-z][\w-]*|\*)?(?:[.#][A-Za-z_][\w-]*)*$/.test(token))
+            return null;
+        out.push({ compound: token, direct });
+        direct = false;
+    }
+    return direct ? null : out;
+}
+function matchesCompound(compound, element) {
+    const tag = compound.match(/^[A-Za-z][\w-]*/)?.[0];
+    if (tag && tag.toLowerCase() !== element.tag.toLowerCase())
+        return false;
+    return [...compound.matchAll(/([.#])([A-Za-z_][\w-]*)/g)].every((m) => m[1] === '#' ? element.id === m[2] : element.classes.includes(m[2]));
+}
+/** ancestors 按根到父排列；回溯匹配，避免多层后代选择器被扁平化而误命中。 */
+export function matchesCssSelector(selector, element, ancestors) {
+    const chain = [...ancestors, element];
+    const match = (part, at) => {
+        if (at < 0 || !matchesCompound(selector[part].compound, chain[at]))
+            return false;
+        if (part === 0)
+            return true;
+        if (selector[part].direct)
+            return match(part - 1, at - 1);
+        for (let i = at - 1; i >= 0; i--)
+            if (match(part - 1, i))
+                return true;
+        return false;
+    };
+    return selector.length > 0 && match(selector.length - 1, chain.length - 1);
+}
+export function resolveCssRules(rules, element, ancestors, inline, warnings) {
+    const matched = rules.filter((r) => matchesCssSelector(r.selector, element, ancestors));
+    if (inline.trim()) {
+        const root = postcss.parse(`x{${inline}}`);
+        root.walkDecls((decl) => {
+            const props = {};
+            for (const [k, val] of mapDecl(decl.prop, decl.value, warnings) ?? [])
+                mergeIrProps(props, { [k]: val });
+            matched.push({ selector: [], specificity: 1_000_000, important: decl.important === true, props });
+        });
+    }
+    matched.sort((a, b) => Number(a.important) - Number(b.important) || a.specificity - b.specificity);
+    const props = {};
+    for (const rule of matched)
+        mergeIrProps(props, rule.props);
+    return props;
+}
 const px = (v) => {
     const s = v.trim();
+    const calc = s.replace(/\s+/g, '').match(/^calc\((-?[\d.]+)px([+-])([\d.]+)px\)$/);
+    if (calc)
+        return Number(calc[1]) + (calc[2] === '+' ? 1 : -1) * Number(calc[3]);
     const m = s.match(/^([\d.]+)px$/);
     if (m)
         return Number(m[1]);
@@ -50,6 +115,8 @@ function mapDecl(prop, value, warnings) {
 }
 function mapDeclInner(prop, value, warnings) {
     const v = value.trim();
+    if (prop.startsWith('--'))
+        return []; // 变量声明由 token 解析器处理，不是未支持的视觉属性。
     switch (prop) {
         case 'grid-template-columns': {
             // R136：CSS grid 的最小支持——`repeat(N, 1fr)` / `1fr 1fr 1fr` → 列数
@@ -64,6 +131,8 @@ function mapDeclInner(prop, value, warnings) {
             // R135：CSS 的 display:flex 默认 main axis 是 row（此前默认 column →
             // 横向工具栏/星期行被渲染成纵向堆叠，日历标题栏就是这么坏掉的）
             return v === 'flex' ? [['flexDirection', 'row']] : null;
+        case 'flex-wrap':
+            return v === 'wrap' ? [['flexWrap', true]] : v === 'nowrap' ? [] : null;
         case 'flex-direction':
             return [['flexDirection', v]];
         case 'flex': {
@@ -73,6 +142,10 @@ function mapDeclInner(prop, value, warnings) {
                 return null;
             return n > 0 ? [['flex', n]] : [];
         }
+        case 'align-self': {
+            const value = v === 'flex-start' ? 'start' : v === 'flex-end' ? 'end' : v;
+            return ['start', 'center', 'end', 'stretch'].includes(value) ? [['alignSelf', value]] : null;
+        }
         case 'flex-grow':
             // flex-grow:N → IR flex（弹性占比）；CSS 子项在剩余空间分配中按 grow 比例伸展
             return /^[0-9]+$/.test(v) && Number(v) > 0 ? [['flex', Number(v)]] : null;
@@ -80,6 +153,7 @@ function mapDeclInner(prop, value, warnings) {
             // flex-shrink:0 = 不压缩：iOS 端 flex:1 生成 maxHeight/.infinity 天然不压缩，
             // 默认内容自适应亦不压缩 → 语义已满足，无需 IR 字段（仅消除「不在子集」误报）
             return /^[0-9]+$/.test(v) ? [] : null;
+        case 'overflow-y':
         case 'overflow':
             // overflow:auto → 标记转 scroll 节点（vue2ir 消费后删除）
             // R71 overflow:hidden → IR clip（裁剪超出容器内容，对位 Web overflow 语义）
@@ -91,19 +165,21 @@ function mapDeclInner(prop, value, warnings) {
         case 'width': {
             if (v === '100%')
                 return [['width', 'fill']];
+            if (/^[\d.]+%$/.test(v))
+                return [['widthFraction', Number(v.slice(0, -1)) / 100]];
             const n = px(v);
             return n !== null ? [['width', n]] : null;
         }
         case 'height': {
             // height:100% → 撑满父高（转 flex:1；父高度确定链上占满，root 撑满屏场景等价）
             if (v === '100%')
-                return [['flex', 1]];
+                return [['height', 'fill']];
             const n = px(v);
             return n !== null ? [['height', n]] : null;
         }
         case 'padding': {
             // 支持 1~4 值简写：1=四边相等；2=上下/左右；3=上/左右/下；4=上右下左
-            const parts = v.split(/\s+/).filter(Boolean).map(px);
+            const parts = splitCssWords(v).map(px);
             if (parts.length === 1 && parts[0] !== null)
                 return [['padding', parts[0]]];
             if (parts.length >= 2 && parts.every((n) => n !== null)) {
@@ -123,6 +199,16 @@ function mapDeclInner(prop, value, warnings) {
             const side = prop.slice('padding-'.length);
             return [['padding', { [side]: n }]];
         }
+        case 'margin': {
+            const parts = splitCssWords(v);
+            if (parts.length < 1 || parts.length > 4)
+                return null;
+            const [t, r = t, b = t, l = r] = parts;
+            const values = [t, r, b, l].map(px);
+            if (values.some((n) => n === null))
+                return null;
+            return [['marginTop', values[0]], ['marginRight', values[1]], ['marginBottom', values[2]], ['marginLeft', values[3]]];
+        }
         case 'margin-bottom':
         case 'margin-right':
         case 'margin-left': {
@@ -175,8 +261,48 @@ function mapDeclInner(prop, value, warnings) {
             const ir = map[v];
             return ir ? [['alignItems', ir]] : null;
         }
+        case 'fill':
+        case 'stroke':
+        case 'stroke-linecap':
+            return [[prop, v]];
+        case 'stroke-width':
+            return [['stroke-width', Number(v.replace(/px$/, ''))]];
+        case 'min-width':
+        case 'min-height': {
+            const n = px(v);
+            return n !== null ? [[prop === 'min-width' ? 'minWidth' : 'minHeight', n]] : null;
+        }
+        case 'font-family':
+            return [['fontFamily', /(?:^|[,\s])(?:monospace|ui-monospace)(?:$|[,\s])/i.test(v) ? 'monospace' : /(?:^|[,\s])serif(?:$|[,\s])/i.test(v) ? 'serif' : 'sans']];
+        case 'letter-spacing': {
+            const m = v.match(/^(-?[\d.]+)px$/);
+            return m ? [['letterSpacing', Number(m[1])]] : null;
+        }
+        case 'box-shadow': {
+            if (v === 'none')
+                return [['shadow', undefined]];
+            const layers = splitCssArgs(v);
+            const layer = layers.find((p) => !/\binset\b/.test(p));
+            if (layers.some((p) => /\binset\b/.test(p)))
+                warnings.push('box-shadow inset 暂不支持，已保留外阴影');
+            if (!layer)
+                return [];
+            const m = layer.match(/^(-?[\d.]+)(?:px)?\s+(-?[\d.]+)(?:px)?(?:\s+([\d.]+)(?:px)?)?(?:\s+(-?[\d.]+)(?:px)?)?\s+(.+)$/);
+            if (!m || !isCssColor(m[5]))
+                return null;
+            if (m[4] && Number(m[4]) !== 0)
+                warnings.push('box-shadow spread 暂未映射，保留偏移和模糊');
+            return [['shadow', { x: Number(m[1]), y: Number(m[2]), blur: Number(m[3] ?? 0), color: m[5] }]];
+        }
+        case 'background-image':
         case 'background':
         case 'background-color':
+            if (/^(linear|radial)-gradient\(/.test(v)) {
+                const gradient = parseLinearGradient(v);
+                return gradient ? [['gradient', gradient]] : null;
+            }
+            if (v === 'transparent')
+                return [['background', 'rgba(0,0,0,0)']];
             // 颜色子集校验（named/var() 原生端不可解析）——拒绝并告警，不生成非法原生代码
             if (!isCssColor(v)) {
                 warnings.push(`CSS 颜色值「${v}」仅支持 #rgb/#rrggbb/rgb()/hsl()，已忽略（named/var 暂不支持，R15）`);
@@ -185,8 +311,10 @@ function mapDeclInner(prop, value, warnings) {
             return [['background', v]];
         case 'border-radius': {
             const n = px(v);
+            if (v === '50%')
+                return [['radius', 9999]];
             if (n === null && v.endsWith('%')) {
-                warnings.push(`border-radius 百分比「${v}」暂不支持（两端圆角语义不一致），已忽略`);
+                warnings.push(`border-radius ${v} 暂不支持（支持 50% 圆形）`);
                 return [];
             }
             return n !== null ? [['radius', n]] : null;
@@ -250,7 +378,7 @@ function mapDeclInner(prop, value, warnings) {
             return [];
         case 'border': {
             // 仅支持 1px solid <color>（rgba(...) / #hex）
-            const m = v.match(/^(\d+)px\s+solid\s+(.+)$/i);
+            const m = v.match(/^(\d*\.?\d+)px\s+solid\s+(.+)$/i);
             if (!m) {
                 warnings.push(`border 仅支持「Npx solid <color>」简写，已忽略（可用 border-width / border-color）`);
                 return [];
@@ -307,13 +435,11 @@ function mapDeclInner(prop, value, warnings) {
             return null;
         }
         case 'line-height': {
-            // px 字面量直接映射；无单位比值（1.5 等）映射成 pt 会破坏行高 → 拒绝并提示用 px
-            const n = num(v) ?? px(v);
-            if (n !== null && n < 5) {
-                warnings.push(`line-height 无单位比值「${v}」暂不支持（会按字面量生成过小行高），请改用 px 值，已忽略`);
-                return [];
-            }
-            return n !== null ? [['lineHeight', n]] : null;
+            const absolute = px(v);
+            if (absolute !== null)
+                return [['lineHeight', absolute]];
+            const ratio = num(v);
+            return ratio !== null && ratio > 0 ? [['lineHeightMultiplier', ratio]] : null;
         }
         case 'text-align':
             return [['textAlign', v]];
@@ -324,6 +450,17 @@ function mapDeclInner(prop, value, warnings) {
         case 'position':
             // M5：position:absolute → 脱离文档流（ZStack 定位 + offset）；其余值不映射
             return v === 'absolute' ? [['position', 'absolute']] : null;
+        case 'inset': {
+            const values = splitCssWords(v).map(px);
+            if (values.length < 1 || values.length > 4 || values.some((v) => v === null))
+                return null;
+            const [t, r = t, b = t, l = r] = values;
+            return [['absTop', t], ['absRight', r], ['absBottom', b], ['absLeft', l]];
+        }
+        case 'z-index': {
+            const n = Number(v);
+            return Number.isInteger(n) ? [['zIndex', n]] : null;
+        }
         case 'top':
         case 'left':
         case 'right':
@@ -411,13 +548,35 @@ export function mergeIrProps(target, src) {
             t.borderSides = out;
             continue;
         }
+        if (key === 'background')
+            delete t.gradient;
+        if (key === 'gradient')
+            delete t.background;
+        if (key === 'lineHeight')
+            delete t.lineHeightMultiplier;
+        if (key === 'lineHeightMultiplier')
+            delete t.lineHeight;
         t[key] = val;
     }
     return target;
 }
+/** 只采集默认 :root，避免最后一个未启用皮肤覆盖当前默认值。 */
+export function extractCssVariables(styles) {
+    const vars = {};
+    for (const source of styles)
+        postcss.parse(source).walkRules((rule) => {
+            if (rule.selectors.some((s) => s.trim() === ':root'))
+                rule.walkDecls((d) => {
+                    if (d.prop.startsWith('--'))
+                        vars[d.prop] = d.value;
+                });
+        });
+    return vars;
+}
 /** 解析 `<style>` 内容 → 类规则表 */
-export function parseCss(source, warnings) {
+export function parseCss(source, warnings, variables = {}) {
     const classProps = new Map();
+    const styleRules = [];
     const comboRules = [];
     const scopedRules = [];
     const pseudoRules = [];
@@ -429,6 +588,29 @@ export function parseCss(source, warnings) {
         // R15：语法错误必须显式失败（vue2ir 转为 VueCompileError），不能产出半份样式表
         throw new CssParseError(`CSS 解析失败：${e instanceof Error ? e.message : String(e)}`);
     }
+    const vars = { ...variables };
+    root.walkRules((rule) => {
+        if (!rule.selectors.some((s) => s.trim() === ':root'))
+            return;
+        rule.walkDecls((d) => { if (d.prop.startsWith('--'))
+            vars[d.prop] = d.value; });
+    });
+    const resolveValue = (value) => {
+        let out = value.replace(/env\(safe-area-inset-(?:top|bottom|left|right)(?:,\s*[^)]+)?\)/g, '0px');
+        for (let n = 0; n < 12; n++) {
+            const next = out.replace(/env\(safe-area-inset-(?:top|bottom|left|right)(?:,\s*[^)]+)?\)/g, '0px').replace(/var\(\s*(--[\w-]+)\s*(?:,\s*([^()]+))?\)/g, (all, key, fallback) => vars[key] ?? fallback ?? all);
+            if (next === out)
+                break;
+            out = next;
+        }
+        return out;
+    };
+    root.walkDecls((decl) => {
+        if (!decl.prop.startsWith('--') && !['color', 'background-color', 'border-color', 'background'].includes(decl.prop))
+            decl.value = resolveValue(decl.value);
+        if (decl.prop === 'background' && /gradient\(/.test(decl.value))
+            decl.value = resolveValue(decl.value);
+    });
     /** 规则声明块 → IR props */
     const collectProps = (rule, warnings) => {
         const props = {};
@@ -460,11 +642,29 @@ export function parseCss(source, warnings) {
                 warnings.push(`@media (prefers-color-scheme: light) 不支持（App 强制深色），已忽略：${sel}`);
                 return;
             }
+            else if (/^\(?max-width:\s*(\d+)px\)?$/.test(params) && Number(params.match(/(\d+)px/)[1]) >= 390) {
+                // 编译基准为手机视口 390px，命中移动端覆盖样式。
+            }
             else {
                 warnings.push(`媒体查询「${params}」不在子集内（仅 prefers-color-scheme: dark），已忽略：${sel}`);
                 return;
             }
         }
+        const selectors = rule.selectors.map((s) => ({ raw: s.trim(), parsed: parseSelector(s.replace(/::before\b/g, ' > .__vrnPseudoBefore').replace(/::after\b/g, ' > .__vrnPseudoAfter')) }));
+        for (const { parsed } of selectors) {
+            if (!parsed)
+                continue;
+            const raw = parsed.map((p) => p.compound).join(' ');
+            const specificity = (raw.match(/#/g)?.length ?? 0) * 10000 + (raw.match(/\./g)?.length ?? 0) * 100 +
+                parsed.filter((p) => /^[A-Za-z]/.test(p.compound)).length;
+            rule.walkDecls((decl) => {
+                // 兼容旧规则表；映射告警由 collectProps 统一收集，避免重复。
+                const props = {};
+                for (const [k, val] of mapDecl(decl.prop, decl.value, []) ?? [])
+                    mergeIrProps(props, { [k]: val });
+                styleRules.push({ selector: parsed, specificity, important: decl.important === true, props });
+            });
+        }
         // M5 伪类：.cls:active / .cls:hover（仅 background 取作按压态）
         const pm = sel.match(/^\.([A-Za-z_][\w-]*):(active|hover)$/);
         if (pm) {
@@ -497,7 +697,10 @@ export function parseCss(source, warnings) {
         // 仅支持类选择器：.xxx 或 .a.b（多类叠加）
         const m = sel.match(/^\.([A-Za-z_][\w-]*)(?:\.[A-Za-z_][\w-]*)*$/);
         if (!m) {
-            warnings.push(`选择器「${rule.selector}」非类选择器，已跳过（CSS 子集限制）`);
+            if (selectors.every((s) => s.parsed))
+                collectProps(rule, warnings);
+            else
+                warnings.push(`选择器「${rule.selector}」含不支持的选择器，已跳过不支持部分（CSS 子集限制）`);
             return;
         }
         const classes = compound(sel);
@@ -511,7 +714,7 @@ export function parseCss(source, warnings) {
             comboRules.push({ classes, props });
         }
     });
-    return { classProps, comboRules, scopedRules, pseudoRules, warnings };
+    return { classProps, comboRules, scopedRules, pseudoRules, styleRules, warnings };
 }
 /** 解析内联 style="..."（分号分隔声明） */
 export function parseInlineStyle(styleText, warnings) {

package/dist/transform/dynamic-svg.d.ts

@@ -0,0 +1,3 @@
+import { type ElementNode } from '@vue/compiler-core';
+/** SVG 动态路径、坐标、循环与文字保留为轻量绘图记录，运行时不依赖 DOM。 */
+export declare function dynamicSvgExpression(root: ElementNode, style: (el: ElementNode, parents: ElementNode[]) => Record<string, unknown>, gradients: Record<string, string>, gradientOpacities?: Record<string, number>): string;

package/dist/transform/dynamic-svg.js

@@ -0,0 +1,53 @@
+import { NodeTypes } from '@vue/compiler-core';
+/** SVG 动态路径、坐标、循环与文字保留为轻量绘图记录，运行时不依赖 DOM。 */
+export function dynamicSvgExpression(root, style, gradients, gradientOpacities = {}) {
+    const q = JSON.stringify;
+    const value = (el, key, fallback) => {
+        const dynamic = el.props.find((p) => p.type === NodeTypes.DIRECTIVE && p.name === 'bind' && p.arg?.type === NodeTypes.SIMPLE_EXPRESSION && p.arg.content === key);
+        if (dynamic && 'exp' in dynamic && dynamic.exp?.type === NodeTypes.SIMPLE_EXPRESSION)
+            return '(' + dynamic.exp.content + ')';
+        const attr = el.props.find((p) => p.type === NodeTypes.ATTRIBUTE && p.name === key);
+        return attr && 'value' in attr && attr.value ? q(attr.value.content) : fallback;
+    };
+    const walk = (el, parents, inherited) => {
+        const css = style(el, parents);
+        const own = { ...inherited };
+        for (const k of ['fill', 'stroke', 'stroke-width', 'opacity', 'fill-opacity', 'stroke-opacity'])
+            own[k] = value(el, k, css[k] !== undefined ? q(String(css[k])) : own[k] ?? (k === 'fill' ? q('#000000') : k === 'stroke' ? q('none') : '1'));
+        const dynamicStyle = el.props.find((p) => p.type === NodeTypes.DIRECTIVE && p.name === 'bind' && p.arg?.type === NodeTypes.SIMPLE_EXPRESSION && p.arg.content === 'style');
+        if (dynamicStyle && 'exp' in dynamicStyle && dynamicStyle.exp?.type === NodeTypes.SIMPLE_EXPRESSION)
+            for (const [key, camel] of [['fill', 'fill'], ['stroke', 'stroke'], ['opacity', 'opacity'], ['fill-opacity', 'fillOpacity'], ['stroke-opacity', 'strokeOpacity'], ['stroke-width', 'strokeWidth']])
+                own[key] = `((${dynamicStyle.exp.content})[${q(camel)}] ?? ${own[key]})`;
+        const n = (key, fallback = '0') => 'Number(' + value(el, key, fallback) + ')';
+        let path = '';
+        if (el.tag === 'path')
+            path = value(el, 'd', q(''));
+        if (el.tag === 'line')
+            path = `'M'+${n('x1')}+','+${n('y1')}+' L'+${n('x2')}+','+${n('y2')}`;
+        if (el.tag === 'circle' || el.tag === 'ellipse') {
+            const x = n('cx'), y = n('cy'), rx = n(el.tag === 'circle' ? 'r' : 'rx'), ry = n(el.tag === 'circle' ? 'r' : 'ry');
+            path = `ellipsePath(${x},${y},${rx},${ry})`;
+        }
+        if (el.tag === 'rect')
+            path = `'M'+${n('x')}+','+${n('y')}+' h'+${n('width')}+' v'+${n('height')}+' h'+(-${n('width')})+' Z'`;
+        const paint = (v) => `(function(c){if(typeof c!=='string')return 'none';return c.replace(/url\\(#([^)]*)\\)/g,function(_,id){return (${q(gradients)})[id]||'none';});})(${v})`;
+        let body = path ? `out.push({d:(${path}),fill:${paint(own.fill)},stroke:${paint(own.stroke)},width:Number(${own['stroke-width']}),opacity:Number(${own.opacity}),fillOpacity:Number(${own['fill-opacity']})*(function(c){var m=String(c).match(/url\\(#([^)]*)\\)/);return m ? (${q(gradientOpacities)})[m[1]] ?? 1 : 1;})(${own.fill}),strokeOpacity:Number(${own['stroke-opacity']})});` : '';
+        if (el.tag === 'text') {
+            const text = el.children.map((child) => child.type === NodeTypes.TEXT ? q(child.content) : child.type === NodeTypes.INTERPOLATION && child.content.type === NodeTypes.SIMPLE_EXPRESSION ? 'String(' + child.content.content + ')' : q('')).join('+') || q('');
+            body += `out.push({text:(${text}),x:${n('x')},y:${n('y')},fill:${paint(own.fill)},size:${Number(css.fontSize ?? 10)},anchor:${value(el, 'text-anchor', q('start'))}});`;
+        }
+        if (!['defs', 'linearGradient', 'radialGradient', 'stop'].includes(el.tag))
+            body += el.children.filter((c) => c.type === NodeTypes.ELEMENT).map((child) => walk(child, [...parents, el], own)).join('\n');
+        const cond = el.props.find((p) => p.type === NodeTypes.DIRECTIVE && p.name === 'if');
+        if (cond && 'exp' in cond && cond.exp?.type === NodeTypes.SIMPLE_EXPRESSION)
+            body = `if(${cond.exp.content}){${body}}`;
+        const loop = el.props.find((p) => p.type === NodeTypes.DIRECTIVE && p.name === 'for');
+        if (loop && 'exp' in loop && loop.exp?.type === NodeTypes.SIMPLE_EXPRESSION) {
+            const m = loop.exp.content.match(/^\s*(?:\(([^)]+)\)|([\w$]+))\s+(?:in|of)\s+([\s\S]+)$/);
+            if (m)
+                body = `(${m[3]} || []).forEach(function(${m[1] ?? m[2]}){${body}});`;
+        }
+        return body;
+    };
+    return `JSON.stringify((function(){var out=[];function ellipsePath(x,y,rx,ry){var k=.5522847498;return 'M'+(x+rx)+','+y+' C'+(x+rx)+','+(y+k*ry)+' '+(x+k*rx)+','+(y+ry)+' '+x+','+(y+ry)+' C'+(x-k*rx)+','+(y+ry)+' '+(x-rx)+','+(y+k*ry)+' '+(x-rx)+','+y+' C'+(x-rx)+','+(y-k*ry)+' '+(x-k*rx)+','+(y-ry)+' '+x+','+(y-ry)+' C'+(x+k*rx)+','+(y-ry)+' '+(x+rx)+','+(y-k*ry)+' '+(x+rx)+','+y+' Z';}${walk(root, [], {})};return out;})())`;
+}

package/dist/transform/svg.d.ts

@@ -0,0 +1,16 @@
+import { type ElementNode } from '@vue/compiler-core';
+export interface VectorData {
+    viewBox: number[];
+    dynamic?: string;
+    colors?: string[];
+    shapes: {
+        commands: (string | number)[][];
+        fill?: string;
+        stroke?: string;
+        strokeWidth: number;
+        lineCap?: string;
+        trim?: string;
+    }[];
+}
+/** SVG 路径/圆/矩形转平台无关路径；弧线、相对坐标、平滑曲线在 IR 前归一化。 */
+export declare function parseSvg(node: ElementNode, style: (el: ElementNode, parents: ElementNode[]) => Record<string, unknown>, warnings: string[], registerExpression?: (expression: string) => string): VectorData;

package/dist/transform/svg.js

@@ -0,0 +1,96 @@
+import { dynamicSvgExpression } from './dynamic-svg.js';
+import svgpath from 'svgpath';
+import { NodeTypes } from '@vue/compiler-core';
+/** SVG 路径/圆/矩形转平台无关路径；弧线、相对坐标、平滑曲线在 IR 前归一化。 */
+export function parseSvg(node, style, warnings, registerExpression) {
+    const attrs = (el) => {
+        const values = Object.fromEntries(el.props.filter((p) => p.type === NodeTypes.ATTRIBUTE).map((p) => [p.name, 'value' in p ? p.value?.content ?? '' : '']));
+        for (const p of el.props)
+            if (p.type === NodeTypes.DIRECTIVE && p.name === 'bind' && p.arg?.type === NodeTypes.SIMPLE_EXPRESSION && p.exp?.type === NodeTypes.SIMPLE_EXPRESSION) {
+                const value = p.exp.content.trim().replace(/^\(+|\)+$/g, '');
+                if (/^-?(?:\d+\.?\d*|\.\d+)$/.test(value))
+                    values[p.arg.content] = value;
+            }
+        return values;
+    };
+    const gradientColors = {};
+    const gradientOpacities = {};
+    const findGradient = (el) => {
+        if (el.tag === 'linearGradient' || el.tag === 'radialGradient') {
+            const id = attrs(el).id;
+            const stop = el.children.find((c) => c.type === NodeTypes.ELEMENT && c.tag === 'stop');
+            if (id && stop) {
+                const dynamic = stop.props.find((p) => p.type === NodeTypes.DIRECTIVE && p.name === 'bind' && p.arg?.type === NodeTypes.SIMPLE_EXPRESSION && p.arg.content === 'style');
+                const expression = dynamic && 'exp' in dynamic && dynamic.exp?.type === NodeTypes.SIMPLE_EXPRESSION ? dynamic.exp.content : '';
+                gradientOpacities[id] = Number(attrs(stop)['stop-opacity'] ?? expression.match(/stopOpacity\s*:\s*([\d.]+)/)?.[1] ?? 1);
+                gradientColors[id] = attrs(stop)['stop-color'] ?? expression.match(/stopColor\s*:\s*\(?['"]([^'"]+)['"]/)?.[1] ?? 'currentColor';
+            }
+        }
+        el.children.forEach((c) => { if (c.type === NodeTypes.ELEMENT)
+            findGradient(c); });
+    };
+    findGradient(node);
+    const root = attrs(node);
+    const viewBox = (root.viewBox ?? `0 0 ${root.width ?? 24} ${root.height ?? 24}`).split(/[ ,]+/).map(Number);
+    const data = { viewBox: viewBox.length === 4 && viewBox.every(Number.isFinite) && viewBox[2] > 0 && viewBox[3] > 0 ? viewBox : [0, 0, 24, 24], shapes: [] };
+    const hasDynamic = (el) => el.props.some((p) => p.type === NodeTypes.DIRECTIVE && ((p.name === 'bind' && p.arg?.type === NodeTypes.SIMPLE_EXPRESSION && ['d', 'viewBox'].includes(p.arg.content)) || p.name === 'for')) || el.children.some((c) => c.type === NodeTypes.ELEMENT && hasDynamic(c));
+    if (registerExpression && hasDynamic(node)) {
+        const expression = dynamicSvgExpression(node, style, gradientColors, gradientOpacities);
+        data.colors = [...new Set(expression.match(/var\(--[\w-]+\)|rgba?\([^)]+\)|#[\da-fA-F]{3,8}/g) ?? [])];
+        data.dynamic = registerExpression(expression);
+        const width = root.width ? Number(root.width) : 320, height = root.height ? Number(root.height) : 190;
+        if (!root.viewBox)
+            data.viewBox = [0, 0, width, height];
+        return data;
+    }
+    const walk = (el, inherited, parents) => {
+        const a = { ...inherited, ...attrs(el) };
+        for (const [k, v] of Object.entries(style(el, parents)))
+            if (['fill', 'stroke', 'stroke-width', 'stroke-linecap'].includes(k))
+                a[k] = String(v);
+        if (['defs', 'linearGradient', 'radialGradient', 'clipPath', 'mask'].includes(el.tag))
+            return;
+        let d = '';
+        const n = (key, fallback = 0) => Number(a[key] ?? fallback);
+        if (el.tag === 'path')
+            d = a.d ?? '';
+        else if (el.tag === 'circle' || el.tag === 'ellipse') {
+            const x = n('cx'), y = n('cy'), rx = n('rx', n('r')), ry = n('ry', n('r'));
+            d = `M ${x + rx} ${y} A ${rx} ${ry} 0 1 0 ${x - rx} ${y} A ${rx} ${ry} 0 1 0 ${x + rx} ${y} Z`;
+        }
+        else if (el.tag === 'line')
+            d = `M ${n('x1')} ${n('y1')} L ${n('x2')} ${n('y2')}`;
+        else if (el.tag === 'polyline' || el.tag === 'polygon')
+            d = `M ${a.points ?? ''}${el.tag === 'polygon' ? ' Z' : ''}`;
+        else if (el.tag === 'rect') {
+            const x = n('x'), y = n('y'), w = n('width'), h = n('height'), r = Math.min(n('rx'), w / 2, h / 2);
+            d = r ? `M ${x + r} ${y} H ${x + w - r} Q ${x + w} ${y} ${x + w} ${y + r} V ${y + h - r} Q ${x + w} ${y + h} ${x + w - r} ${y + h} H ${x + r} Q ${x} ${y + h} ${x} ${y + h - r} V ${y + r} Q ${x} ${y} ${x + r} ${y} Z`
+                : `M ${x} ${y} h ${w} v ${h} h ${-w} Z`;
+        }
+        if (d) {
+            const path = svgpath(d).abs().unshort().unarc();
+            if (a.transform)
+                path.transform(a.transform);
+            path.abs();
+            const commands = [];
+            path.iterate((segment) => { commands.push([...segment]); });
+            if (!commands.length)
+                warnings.push('SVG path 为空或无法解析');
+            else {
+                const color = (v) => v === 'none' ? undefined : /^url\(#/.test(v) ? gradientColors[v.slice(5, -1)] ?? 'currentColor' : v;
+                const dynamicAttr = (name) => {
+                    const p = el.props.find((p) => p.type === NodeTypes.DIRECTIVE && p.name === 'bind' && p.arg?.type === NodeTypes.SIMPLE_EXPRESSION && p.arg.content === name);
+                    return p && 'exp' in p && p.exp?.type === NodeTypes.SIMPLE_EXPRESSION ? p.exp.content : a[name];
+                };
+                const offset = dynamicAttr('stroke-dashoffset'), length = dynamicAttr('stroke-dasharray');
+                const trim = registerExpression && offset && length ? registerExpression(`String(Math.max(0,Math.min(1,1-(${offset})/(${length}))))`) : undefined;
+                data.shapes.push({ commands, trim, fill: color(a.fill ?? '#000000'), stroke: color(a.stroke ?? 'none'), strokeWidth: n('stroke-width', 1), lineCap: a['stroke-linecap'] });
+            }
+        }
+        for (const child of el.children)
+            if (child.type === NodeTypes.ELEMENT)
+                walk(child, a, [...parents, el]);
+    };
+    walk(node, {}, []);
+    return data;
+}

package/dist/transform/tab-bar.d.ts

@@ -0,0 +1,17 @@
+import { type VectorData } from './svg.js';
+import type { IrProps } from '../ir/schema.js';
+export interface TabBarSpec {
+    style: IrProps;
+    itemStyle: IrProps;
+    activeStyle: IrProps;
+    items: {
+        id: string;
+        label: string;
+        icon: VectorData;
+    }[];
+    widthInset: number;
+    maxWidth?: number;
+    bottom: number;
+}
+/** 从声明式 Vue tabbar 的静态数据、SVG 和 CSS 提取原生导航外观。 */
+export declare function parseTabBar(source: string, globalStyles?: string[]): TabBarSpec;

package/dist/transform/tab-bar.js

@@ -0,0 +1,44 @@
+import { parse, babelParse } from '@vue/compiler-sfc';
+import { NodeTypes } from '@vue/compiler-core';
+import { extractCssVariables, parseCss, resolveCssRules } from './css.js';
+import { parseSvg } from './svg.js';
+/** 从声明式 Vue tabbar 的静态数据、SVG 和 CSS 提取原生导航外观。 */
+export function parseTabBar(source, globalStyles = []) {
+    const { descriptor } = parse(source);
+    const script = descriptor.scriptSetup?.content ?? '';
+    const ast = babelParse(script, { sourceType: 'module', plugins: ['typescript'] });
+    const items = [];
+    for (const declaration of ast.program.body)
+        if (declaration.type === 'VariableDeclaration') {
+            for (const d of declaration.declarations)
+                if (d.init?.type === 'ArrayExpression')
+                    for (const item of d.init.elements) {
+                        if (item?.type !== 'ObjectExpression')
+                            continue;
+                        const values = {};
+                        for (const p of item.properties)
+                            if (p.type === 'ObjectProperty' && !p.computed && p.value.type === 'StringLiteral') {
+                                const key = p.key.type === 'Identifier' ? p.key.name : p.key.type === 'StringLiteral' ? p.key.value : '';
+                                values[key] = p.value.value;
+                            }
+                        if (!values.key || !values.label || !values.icon)
+                            continue;
+                        const svg = parse(`<template><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">${values.icon}</svg></template>`).descriptor.template.ast.children[0];
+                        items.push({ id: values.key, label: values.label, icon: parseSvg(svg, () => ({}), []) });
+                    }
+        }
+    if (!items.length)
+        throw new Error('tabBarComponent 需要包含 {key,label,icon} 字符串项的静态数组');
+    const root = descriptor.template?.ast?.children.find((n) => n.type === NodeTypes.ELEMENT);
+    const classAttr = root?.props.find((p) => p.type === NodeTypes.ATTRIBUTE && p.name === 'class');
+    const classes = classAttr && 'value' in classAttr ? classAttr.value?.content.split(/\s+/) ?? [] : [];
+    const own = descriptor.styles.map((s) => s.content).join('\n');
+    const rules = parseCss(globalStyles.join('\n') + '\n' + own, [], extractCssVariables(globalStyles)).styleRules;
+    const container = { tag: root?.tag ?? 'nav', classes };
+    const style = resolveCssRules(rules, container, [], '', []);
+    const itemStyle = resolveCssRules(rules, { tag: 'button', classes: ['tab'] }, [container], '', []);
+    const activeStyle = resolveCssRules(rules, { tag: 'button', classes: ['tab', 'on'] }, [container], '', []);
+    const width = own.match(/width:\s*min\(calc\(100%\s*-\s*([\d.]+)px\),\s*([\d.]+)px\)/);
+    const bottom = own.match(/margin:[^;]*?calc\(([\d.]+)px/);
+    return { style, itemStyle, activeStyle, items, widthInset: Number(width?.[1] ?? 0), maxWidth: width ? Number(width[2]) : undefined, bottom: Number(bottom?.[1] ?? 0) };
+}

package/dist/transform/visuals.d.ts

@@ -0,0 +1,17 @@
+/** CSS 函数参数分割，保留 rgba()/var() 内的逗号。 */
+export declare function splitCssArgs(value: string): string[];
+export interface LinearGradientValue {
+    kind?: 'linear' | 'radial';
+    center?: {
+        x: number;
+        y: number;
+    };
+    angle: number;
+    stops: {
+        color: string;
+        offset: number;
+    }[];
+}
+export declare function parseLinearGradient(value: string): LinearGradientValue | null;
+/** 按顶层空白拆 CSS 简写，calc()/rgba() 内的空格不拆开。 */
+export declare function splitCssWords(value: string): string[];