cardbuddy 0.13.3 → 0.14.1

package/dist/vendored/skills/dsl-card-generator/scripts/spec_to_schema_v3.mjs

@@ -19,7 +19,7 @@ import path from 'node:path'
 import { fileURLToPath } from 'node:url'
 import { makeMinComponent } from './lib/scaffold.mjs'
 import { T } from './lib/layout-tokens.mjs'
-import { sampleTopBand, sampleRegionColor, sampleRegionEdgeColor, sampleCardBodyColor, crossCheckTextColor, sampleOutlineRing } from './lib/design_sample.mjs'
+import { sampleTopBand, sampleRegionColor, sampleRegionEdgeColor, sampleCardBodyColor, crossCheckTextColor, sampleOutlineRing, sampleBackdropBands } from './lib/design_sample.mjs'
 import { resolveSliceExport, sliceRefPath, sliceFlatName, stripScale } from './lib/slicePath.mjs'
 import { cardsDir, metaDir, slicesDir } from './lib/paths.mjs'
 
@@ -104,17 +104,21 @@ function boundProp(itemKey, expr, defaultValue = '') {
   return { itemId: '', itemKey, itemName: itemKey, itemType: '', itemValueFrom: '1', itemValue: expr, itemDefaultValue: defaultValue }
 }
 // v-show 条件渲染指令：showType=01 + condition.expression（如 "$afford != ''"）
-function vShowDirective(expression) {
+function vShowDirective(expression, name) {
   const prop = (itemId, itemKey, itemValue) => ({
     itemId, itemKey, itemName: itemKey, itemType: '', itemValueFrom: '0', itemValue, itemDefaultValue: itemValue,
   })
+  const expr = String(expression || '')
+  // validate_schema.py 铁律：condition.name 必填非空；表达式 <15 字符时 name 与表达式一致，
+  // >=15 字符给可读显示名（调用方可传语义名，缺省回退通用名）。
+  const displayName = expr.length < 15 ? expr : (String(name || '').trim() || '显示条件')
   return {
     itemId: '', itemKey: 'v-show', itemName: 'v-show', itemType: '', itemValueFrom: '0',
     itemValue: {}, itemDefaultValue: {},
     itemChildren: {
       properties: [
         prop('001', 'showType', '01'),
-        prop('002', 'condition', { expression }),
+        prop('002', 'condition', { expression: expr, name: displayName }),
       ],
     },
   }
@@ -442,7 +446,11 @@ function isMaskedOnlyText(text) {
  * 关键纪律：**不能根据 spec 原始文本写死前缀负号**——同一变量在不同数据下可能正负切换。
  * 必须在表达式里运行时判断 $var 的正负：负数显示 '-¥abs'，正数显示 '¥amount'。
  */
-function amountExpr(varName, srcText) {
+function currencyPrefixOf(srcText) {
+  const curMatch = String(srcText || '').replace(/^[-+]/, '').match(/^[^\d\-(),.\s]{1,4}(?=[\d(])/u)
+  return curMatch && /\p{Sc}/u.test(curMatch[0]) ? curMatch[0] : ''
+}
+function amountExpr(varName, srcText, opts = {}) {
   // 尊重设计稿原文：
   //   原文含 ¥/￥ 符号 → '¥'+千分号（如"¥563.80"）
   //   纯数字无符号 → 仅千分号（如 "2000" 配合相邻 "万元"）
@@ -454,8 +462,7 @@ function amountExpr(varName, srcText) {
   const hasYuanUnit = !!unitMatch
   // 货币前缀取设计稿原文（任意 Unicode 货币符号，含 "HK$"/"US$" 字母+符号组合），不写死某一种
   // 负号不是货币前缀的一部分：先剥离首符号再取前缀（"-¥2,000.00" 否则丢 ¥）。
-  const curMatch = String(srcText || '').replace(/^[-+]/, '').match(/^[^\d\-(),.\s]{1,4}(?=[\d(])/u)
-  const curPrefix = curMatch && /\p{Sc}/u.test(curMatch[0]) ? curMatch[0] : null
+  const curPrefix = currencyPrefixOf(srcText)
   const hasCurrency = !!curPrefix
   const srcNum = srcText != null ? String(srcText).replace(/[^\d,.-]/g, '') : ''
   const srcHasDecimals = /\.\d/.test(srcNum)
@@ -470,7 +477,8 @@ function amountExpr(varName, srcText) {
     const unit = JSON.stringify(unitMatch[2])
     return `${sign} + ${abs} + ${unit}`
   }
-  if (hasCurrency) return `${sign} + ${JSON.stringify(curPrefix)} + ${abs}`
+  // 列表行模板共用一套表达式：货币前缀必须逐行数据驱动（$amtCurN），否则首行符号套到全行
+  if (opts.prefixVar) return `${sign} + $${opts.prefixVar} + ${abs}`
   return `${sign} + ${abs}`
 }
 
@@ -745,6 +753,13 @@ function ensureVisibleTextColor(textColor, bgColors, fallback) {
   }
   return textColor
 }
+/** 颜色调浅：与白色按比例混合（ratio=颜色占比），用于「描边同色 fill」标注缺陷的浅底还原 */
+function tintHex(hex, ratio = 0.1) {
+  const h = String(hex || '').replace('#', '')
+  if (!/^[0-9a-fA-F]{6}$/.test(h)) return hex
+  const mix = (i) => Math.round(parseInt(h.slice(i, i + 2), 16) * ratio + 255 * (1 - ratio))
+  return '#' + [0, 2, 4].map((i) => mix(i).toString(16).padStart(2, '0')).join('').toUpperCase()
+}
 function isBg(e) {
   const r = rect(e)
   return (r.width || 0) >= 340 && (r.height || 0) >= 600
@@ -752,12 +767,363 @@ function isBg(e) {
 function sameRow(a, b, tol = 12) { return Math.abs((rect(a).y || 0) - (rect(b).y || 0)) <= tol }
 
 
+/** 矩形并集 / 包含判定（图表簇几何用） */
+function unionRects(items) {
+  const xs = items.map((e) => rect(e).x || 0)
+  const ys = items.map((e) => rect(e).y || 0)
+  const rs = items.map((e) => (rect(e).x || 0) + (rect(e).width || 0))
+  const bs = items.map((e) => (rect(e).y || 0) + (rect(e).height || 0))
+  const x = Math.min(...xs); const y = Math.min(...ys)
+  return { x, y, width: Math.max(...rs) - x, height: Math.max(...bs) - y }
+}
+function rectInside(outer, r, pad = 0) {
+  const pl = typeof pad === 'number' ? { l: pad, r: pad, t: pad, b: pad } : pad
+  return (r.x || 0) >= (outer.x || 0) - (pl.l || 0)
+    && (r.y || 0) >= (outer.y || 0) - (pl.t || 0)
+    && ((r.x || 0) + (r.width || 0)) <= (outer.x || 0) + (outer.width || 0) + (pl.r || 0)
+    && ((r.y || 0) + (r.height || 0)) <= (outer.y || 0) + (outer.height || 0) + (pl.b || 0)
+}
+
+/** 柱状图矢量簇识别（纯几何，不依赖业务词）：
+ *  同基线（底沿 ±3）窄柱 ≥4 + 横向近等距 + 网格线/轴标签佐证 → 整簇（柱+网格线+簇内文本）
+ *  交给 Canvas 自绘回放。DSL 无图表组件，此前柱体被静默丢弃、网格线被当 Divider 错排。 */
+export function detectChartClusters(content) {
+  const shapes = content.filter((e) => e.type === 'shape')
+  const texts = content.filter((e) => e.type === 'text' && textOf(e))
+  const bars = shapes.filter((e) => {
+    const r = rect(e); const fill = e.style?.fill
+    if (!fill || (!fill.color && !fill.gradient)) return false
+    if (radiusMax(e.style) >= 8) return false
+    return (r.width || 0) >= 4 && (r.width || 0) <= 48 && (r.height || 0) >= 4 && (r.height || 0) <= 260
+  })
+  const byBottom = []
+  for (const bar of bars.slice().sort((a, b) => (rect(a).x || 0) - (rect(b).x || 0))) {
+    const bottom = (rect(bar).y || 0) + (rect(bar).height || 0)
+    let group = byBottom.find((item) => Math.abs(item.bottom - bottom) <= 3)
+    if (!group) { group = { bottom, members: [] }; byBottom.push(group) }
+    group.members.push(bar)
+  }
+  const clusters = []
+  for (const group of byBottom) {
+    if (group.members.length < 4) continue
+    const xs = group.members.map((m) => rect(m).x || 0)
+    const gaps = xs.slice(1).map((x, i) => x - xs[i])
+    const gapAvg = gaps.reduce((a, b) => a + b, 0) / Math.max(1, gaps.length)
+    if (gaps.some((gap) => Math.abs(gap - gapAvg) > Math.max(6, gapAvg * 0.6))) continue
+    const barBox = unionRects(group.members)
+    const grid = shapes.filter((e) => {
+      const r = rect(e)
+      if ((r.height || 0) > 2 || (r.width || 0) < 60) return false
+      const overlap = Math.min((r.x || 0) + (r.width || 0), barBox.x + barBox.width) - Math.max(r.x || 0, barBox.x)
+      return overlap >= barBox.width * 0.6 && (r.y || 0) >= barBox.y - 260 && (r.y || 0) <= barBox.y + barBox.height + 4
+    })
+    const seedBox = unionRects([...group.members, ...grid])
+    const labels = texts.filter((e) => rectInside(seedBox, rect(e), { l: 48, r: 12, t: 30, b: 36 }))
+    if (grid.length < 3 && labels.length < 4) continue
+    const members = [...group.members, ...grid]
+    const box = unionRects([...members, ...labels])
+    clusters.push({ kind: 'bar', members, texts: labels, x: box.x, y: box.y, width: box.width, height: box.height })
+  }
+  return clusters
+}
+
+/** 柱状图簇 → Canvas onMeasured 绘图代码（坐标相对簇原点；只用代理白名单 API）。
+ *  圆角矩形无 roundRect 白名单 → 四角 arc 拼路径；网格线走 stroke；标签走 fillText。 */
+/** 图表绘制层序（铁律 R62）：坐标系 / 参考系线条（网格线、轴线、刻度线、雷达环与辐射线、环形轨道）
+ *  画在**最底层**，数据标记（柱 / 折线 / 多边形 / 扇区）在其上，文字标签最上层。
+ *  Canvas 是即时模式绘制——后画的压先画的，所以出码顺序必须 = 底 → 顶。
+ *  spec 元素顺序**不可照抄**：标注导出常把网格线排在数据图元之后（assetAllocRadar 雷达
+ *  34-39 是 #DCDCDC 网格/辐射线、40 才是数据多边形），直出会把参考线盖在数据上。 */
+function chartPaintLayers(members, cluster) {
+  const backdrop = []
+  const axis = []
+  const marks = []
+  const cw = cluster?.width || 0
+  const ch = cluster?.height || 0
+  for (const m of members) {
+    const r = rect(m)
+    const w = r.width || 0
+    const h = r.height || 0
+    // 细线（任一维 ≤2px）= 网格线 / 轴线 / 刻度线 → 底层
+    if (h <= 2 || w <= 2) { axis.push(m); continue }
+    // 大面积填充（覆盖簇 bbox 一半以上）= 绘图区底板 → 更底层
+    const fill = m.style?.fill
+    if (fill && (fill.color || fill.gradient) && cw && ch && w >= cw * 0.5 && h >= ch * 0.5) { backdrop.push(m); continue }
+    marks.push(m)
+  }
+  return { backdrop, axis, marks }
+}
+
+/** 数据标记半透明时把 opacity 乘进颜色 / 渐变（ctx 代理白名单无 globalAlpha），底层网格才透得出来。 */
+function chartPaintColor(color, opacity = 1) {
+  const op = Number(opacity)
+  const k = Number.isFinite(op) && op > 0 && op < 1 ? op : 1
+  const c = String(color || '').trim()
+  const m = c.match(/^rgba?\(([^,]+),([^,]+),([^,]+)(?:,([^)]+))?\)$/i)
+  if (m) return `rgba(${m[1].trim()},${m[2].trim()},${m[3].trim()},${Number(m[4] ?? 1) * k})`
+  return hexToRgba(color, k)
+}
+
+/** 柱状图簇 → flex 原生组件树（柱=色块 Column、值/轴/类目标签=真实 Text、网格线=硬停渐变背景）。
+ *  Canvas 自绘会让标注文本在组件计数中消失（文本召回/组件数被系统性低估），且字体渲染与设计稿偏差大；
+ *  渲染器无绝对定位，故用「轴列 + 槽位列」flex 结构按 spec 几何精确回放：
+ *  槽位边界取类目标签中心中点，柱列宽=柱宽、值标签靠 overflow:visible 居中溢出。
+ *  返回 null 表示该簇不满足柱状图形态（调用方回退 Canvas）。 */
+export function buildFlexBarChart(cluster) {
+  const members = cluster.members || []
+  const bars = members.filter((m) => {
+    const r = rect(m); const h = r.height || 0; const w = r.width || 0
+    return m.style?.fill?.color && h >= 4 && w >= 6 && w <= 48
+  })
+  const gridlines = members.filter((m) => (rect(m).height || 0) <= 2 && (rect(m).width || 0) >= 100)
+  const texts = cluster.texts || []
+  if (bars.length < 4 || gridlines.length < 2 || !texts.length) return null
+  const baseline = Math.max(...bars.map((b) => (rect(b).y || 0) + (rect(b).height || 0)))
+  const plotLeft = Math.min(...bars.map((b) => rect(b).x || 0))
+  const plotRight = Math.max(...gridlines.map((g) => (rect(g).x || 0) + (rect(g).width || 0)),
+    ...bars.map((b) => (rect(b).x || 0) + (rect(b).width || 0)))
+  const plotTop = Math.min(...gridlines.map((g) => rect(g).y || 0))
+  const axisTexts = texts.filter((t) => ((rect(t).x || 0) + (rect(t).width || 0)) <= plotLeft - 4)
+    .sort((a, b) => (rect(a).y || 0) - (rect(b).y || 0))
+  const nameTexts = texts.filter((t) => (rect(t).y || 0) >= baseline + 2)
+    .sort((a, b) => (rect(a).x || 0) - (rect(b).x || 0))
+  const valueTexts = texts.filter((t) => !axisTexts.includes(t) && !nameTexts.includes(t))
+  if (!axisTexts.length || !nameTexts.length) return null
+  // 槽位：类目标签中心的中点切分绘图区
+  const centers = nameTexts.map((t) => (rect(t).x || 0) + (rect(t).width || 0) / 2)
+  const bounds = [plotLeft]
+  for (let i = 1; i < centers.length; i++) bounds.push(Math.round((centers[i - 1] + centers[i]) / 2))
+  bounds.push(plotRight)
+  const slots = []
+  for (let i = 0; i < nameTexts.length; i++) {
+    const slotBars = bars.filter((b) => {
+      const cx = (rect(b).x || 0) + (rect(b).width || 0) / 2
+      return cx >= bounds[i] - 1 && cx <= bounds[i + 1] + 1
+    }).sort((a, b) => (rect(a).x || 0) - (rect(b).x || 0))
+    if (!slotBars.length) return null
+    slots.push({ name: nameTexts[i], x: bounds[i], width: bounds[i + 1] - bounds[i], bars: slotBars })
+  }
+  const plotH = Math.round(baseline - plotTop)
+  const axisTop = rect(axisTexts[0]).y || 0
+  const axisBottom = Math.max(...axisTexts.map((t) => (rect(t).y || 0) + (rect(t).height || 0)))
+  const axisRight = Math.max(...axisTexts.map((t) => (rect(t).x || 0) + (rect(t).width || 0)))
+  const axisGap = Math.max(0, Math.round(plotLeft - axisRight))
+  const nameTop = Math.min(...nameTexts.map((t) => rect(t).y || 0))
+  const nameGap = Math.max(0, Math.round(nameTop - baseline))
+  // 网格线硬停渐变（坐标系线条必须在绘制层最底部 → 作背景，柱/标签在其上）
+  const gl = gridlines.map((g) => rect(g).y || 0).sort((a, b) => a - b)
+  const glColor = (() => {
+    const g0 = gridlines[0]
+    const stops = g0.style?.fill?.gradient?.stops || g0.style?.fill?.gradient?.colors || null
+    if (Array.isArray(stops) && stops[0]?.color) return hexToRgba(stops[0].color)
+    if (g0.style?.fill?.color) return hexToRgba(g0.style.fill.color)
+    return 'rgba(244,244,247,1)'
+  })()
+  const gradParts = []
+  let prev = 0
+  for (const y of gl) {
+    const o = Math.max(0, Math.round(y - plotTop))
+    if (o > prev) gradParts.push(`rgba(0,0,0,0) ${prev}px`, `${glColor} ${o}px`)
+    gradParts.push(`${glColor} ${o}px`, `${glColor} ${o + 1}px`)
+    prev = o + 1
+  }
+  gradParts.push(`rgba(0,0,0,0) ${prev}px`, `rgba(0,0,0,0) ${plotH}px`)
+  // —— 组装 ——
+  const chartRow = container('Row', { width: '100%', direction: 'row', align: 'flex-start', gap: String(axisGap) })
+  const axisCol = container('Column', {
+    direction: 'column', justify: 'space-between', align: 'flex-end', flexShrink: 0,
+    width: String(Math.round(axisRight - (rect(axisTexts[0]).x || 0))),
+  })
+  ensureStyleGroup(axisCol, 'rect')
+  setStyleChild(axisCol, 'rect', 'height', String(Math.round(axisBottom - axisTop)))
+  for (const t of axisTexts) {
+    const node = textFromSpec({ ...t, text: textOf(t), color: ts(t).color, fontSize: ts(t).fontSize, fontWeight: ts(t).fontWeight, align: 'right' })
+    ensureStyleGroup(node, 'flex')
+    setStyleChild(node, 'flex', 'flexShrink', '0')
+    axisCol.slots[0].components.push(node)
+  }
+  chartRow.slots[0].components.push(axisCol)
+  const plotCol = container('Column', {
+    direction: 'column', align: 'stretch', gap: '0', flexShrink: 0,
+    width: String(Math.round(plotRight - plotLeft)),
+    padding: `${Math.max(0, Math.round(plotTop - axisTop))} 0 0 0`,
+  })
+  const gridArea = container('Row', { direction: 'row', align: 'flex-end', gap: '0', width: '100%' })
+  ensureStyleGroup(gridArea, 'rect')
+  setStyleChild(gridArea, 'rect', 'height', String(plotH))
+  ensureStyleGroup(gridArea, 'background')
+  setStyleChild(gridArea, 'background', 'backgroundType', '03')
+  setStyleChild(gridArea, 'background', 'backgroundGradient', `linear-gradient(to bottom, ${gradParts.join(', ')})`)
+  for (const slot of slots) {
+    const padLeft = Math.max(0, Math.round((rect(slot.bars[0]).x || 0) - slot.x))
+    const slotCol = container('Column', {
+      direction: 'column', justify: 'flex-end', align: 'flex-start', flexShrink: 0,
+      width: String(slot.width), padding: `0 0 0 ${padLeft}`,
+    })
+    ensureStyleGroup(slotCol, 'rect')
+    setStyleChild(slotCol, 'rect', 'height', String(plotH))
+    // 柱列宽 = max(柱宽, 值标签宽)：渲染器 fit-content 受父宽限制会把标签折行（h 爆成 3 行）；
+    // 相邻标签水平重叠时用负 marginLeft 拉回设计中心（flex 行内唯一可重叠手段）。
+    const barRow = container('Row', { direction: 'row', align: 'flex-end', gap: '0' })
+    const firstBarX = rect(slot.bars[0]).x || 0
+    let barCursor = 0
+    for (const bar of slot.bars) {
+      const br = rect(bar)
+      const label = valueTexts.find((t) => {
+        const cx = (br.x || 0) + (br.width || 0) / 2
+        const tcx = (rect(t).x || 0) + (rect(t).width || 0) / 2
+        return Math.abs(tcx - cx) <= Math.max(br.width || 0, (rect(t).width || 0) / 2)
+          && (rect(t).y || 0) + (rect(t).height || 0) <= (br.y || 0) + 2
+      })
+      const barCenter = (br.x || 0) + (br.width || 0) / 2
+      // 渲染字形比标注 rect 略宽（PingFang 度量差）：不留余量会折行（h 16→30、整列上移）
+      const colW = Math.max(Math.round(br.width || 0), label ? Math.round(rect(label).width || 0) + 4 : 0)
+      const desiredLeft = Math.round(barCenter - colW / 2) - firstBarX
+      const barCol = container('Column', {
+        direction: 'column', justify: 'flex-end', align: 'center', gap: '0', flexShrink: 0,
+        width: String(colW),
+      })
+      if (desiredLeft !== barCursor) {
+        ensureStyleGroup(barCol, 'margin')
+        setStyleChild(barCol, 'margin', 'marginType', '1')
+        setStyleChild(barCol, 'margin', 'marginLeft', String(desiredLeft - barCursor))
+        setStyleChild(barCol, 'margin', 'marginTop', '0')
+        setStyleChild(barCol, 'margin', 'marginRight', '0')
+        setStyleChild(barCol, 'margin', 'marginBottom', '0')
+      }
+      barCursor = desiredLeft + colW
+      if (label) {
+        const ln = textFromSpec({ text: textOf(label), color: ts(label).color, fontSize: ts(label).fontSize, fontWeight: ts(label).fontWeight, align: 'center' })
+        ensureStyleGroup(ln, 'flex')
+        setStyleChild(ln, 'flex', 'flexShrink', '0')
+        barCol.slots[0].components.push(ln)
+      }
+      const block = container('Column', { direction: 'column', flexShrink: 0 })
+      ensureStyleGroup(block, 'rect')
+      ensureStyleGroup(block, 'background')
+      ensureStyleGroup(block, 'borderRadius')
+      setStyleChild(block, 'rect', 'width', String(Math.round(br.width || 0)))
+      setStyleChild(block, 'rect', 'height', String(Math.round(br.height || 0)))
+      setStyleChild(block, 'background', 'backgroundType', '01')
+      setStyleChild(block, 'background', 'backgroundColor', hexToRgba(bar.style.fill.color))
+      setStyleChild(block, 'borderRadius', 'borderRadiusType', '1')
+      setStyleChild(block, 'borderRadius', 'borderTopLeftRadius', '2')
+      setStyleChild(block, 'borderRadius', 'borderTopRightRadius', '2')
+      setStyleChild(block, 'borderRadius', 'borderBottomLeftRadius', '0')
+      setStyleChild(block, 'borderRadius', 'borderBottomRightRadius', '0')
+      barCol.slots[0].components.push(block)
+      barRow.slots[0].components.push(barCol)
+    }
+    slotCol.slots[0].components.push(barRow)
+    gridArea.slots[0].components.push(slotCol)
+  }
+  plotCol.slots[0].components.push(gridArea)
+  const nameRow = container('Row', { direction: 'row', align: 'flex-start', gap: '0', width: '100%', padding: `${nameGap} 0 0 0` })
+  for (const slot of slots) {
+    const slotCol = container('Column', { direction: 'column', align: 'flex-start', flexShrink: 0, width: String(slot.width) })
+    // 类目标签可能比柱对宽（日常开销 48 > 柱对 42）：居中行按标签宽撑开 + 负 margin 锚柱对中心，
+    // 槽位列 overflow visible 放行溢出（flex 行宽不变，邻槽不受影响）
+    ensureStyleGroup(slotCol, 'other')
+    setStyleChild(slotCol, 'other', 'overflow', 'visible')
+    const pairW = Math.round(((rect(slot.bars[slot.bars.length - 1]).x || 0) + (rect(slot.bars[slot.bars.length - 1]).width || 0)) - (rect(slot.bars[0]).x || 0))
+    const nameW = Math.round(rect(slot.name).width || 0) + 4
+    const rowW = Math.max(pairW, nameW)
+    const pairCenter = Math.round((rect(slot.bars[0]).x || 0) + pairW / 2)
+    const centerRow = container('Row', { direction: 'row', justify: 'center', align: 'center', width: String(rowW) })
+    const rowLeft = pairCenter - Math.round(rowW / 2) - slot.x
+    if (rowLeft !== 0) {
+      ensureStyleGroup(centerRow, 'margin')
+      setStyleChild(centerRow, 'margin', 'marginType', '1')
+      setStyleChild(centerRow, 'margin', 'marginLeft', String(rowLeft))
+      setStyleChild(centerRow, 'margin', 'marginTop', '0')
+      setStyleChild(centerRow, 'margin', 'marginRight', '0')
+      setStyleChild(centerRow, 'margin', 'marginBottom', '0')
+    }
+    const nn = textFromSpec({ text: textOf(slot.name), color: ts(slot.name).color, fontSize: ts(slot.name).fontSize, fontWeight: ts(slot.name).fontWeight, align: 'center' })
+    ensureStyleGroup(nn, 'flex')
+    setStyleChild(nn, 'flex', 'flexShrink', '0')
+    centerRow.slots[0].components.push(nn)
+    slotCol.slots[0].components.push(centerRow)
+    nameRow.slots[0].components.push(slotCol)
+  }
+  plotCol.slots[0].components.push(nameRow)
+  chartRow.slots[0].components.push(plotCol)
+  return chartRow
+}
+export function chartBarCanvasCode(cluster) {
+  const ox = cluster.x; const oy = cluster.y
+  const n = (v) => Math.round(Number(v) * 100) / 100
+  const out = []
+  out.push('var self = this;')
+  // event.canvas 是画布包装对象（非 ctx）：export-proven 范式先 getContext('2d') 拿代理 ctx
+  out.push('var canvas = event.canvas;')
+  out.push("var cv = canvas.getContext('2d');")
+  out.push('canvas.width = event.width;')
+  out.push('canvas.height = event.height;')
+  out.push('cv.clearRect(0,0,event.width,event.height);')
+  out.push('var rr=function(x,y,w,h,tl,tr,br,bl){cv.beginPath();cv.moveTo(x+tl,y);'
+    + 'cv.lineTo(x+w-tr,y);cv.arc(x+w-tr,y+tr,tr,Math.PI*1.5,Math.PI*2);'
+    + 'cv.lineTo(x+w,y+h-br);cv.arc(x+w-br,y+h-br,br,0,Math.PI*0.5);'
+    + 'cv.lineTo(x+bl,y+h);cv.arc(x+bl,y+h-bl,bl,Math.PI*0.5,Math.PI);'
+    + 'cv.lineTo(x,y+tl);cv.arc(x+tl,y+tl,tl,Math.PI,Math.PI*1.5);cv.closePath();};')
+  // 出码顺序 = 绘制层序（底 → 顶）：绘图区底板 → 网格线/轴线 → 数据标记 → 文字标签
+  const layers = chartPaintLayers(cluster.members, cluster)
+  for (const m of [...layers.backdrop, ...layers.axis, ...layers.marks]) {
+    const r = rect(m)
+    const x = n((r.x || 0) - ox); const y = n((r.y || 0) - oy)
+    const w = n(r.width || 0); const h = n(r.height || 0)
+    const fill = m.style?.fill
+    const border = m.style?.border
+    const opacity = m.style?.opacity ?? 1
+    if (fill && (fill.color || fill.gradient)) {
+      if (fill.gradient && (fill.gradient.stops || []).length) {
+        const stops = fill.gradient.stops
+        out.push(`var g=cv.createLinearGradient(${x},${y},${x},${y + h});`)
+        for (const stop of stops) {
+          out.push(`g.addColorStop(${n(stop.position || 0)},'${chartPaintColor(stop.color, opacity)}');`)
+        }
+        out.push('cv.fillStyle=g;')
+      } else {
+        out.push(`cv.fillStyle='${chartPaintColor(fill.color, opacity)}';`)
+      }
+      const rad = m.style?.radius?.borderRadius
+      const arr = Array.isArray(rad) ? rad.map((v) => n(v) || 0) : [n(rad) || 0, n(rad) || 0, n(rad) || 0, n(rad) || 0]
+      out.push(`rr(${x},${y},${w},${h},${arr[0]},${arr[1]},${arr[2]},${arr[3]});cv.fill();`)
+    } else if (border && border.isBorder) {
+      out.push(`cv.strokeStyle='${chartPaintColor(border.color, opacity)}';`)
+      out.push(`cv.lineWidth=${Math.max(1, n(border.width || r.height || 1))};`)
+      out.push(`cv.beginPath();cv.moveTo(${x},${n(y + h / 2)});cv.lineTo(${n(x + w)},${n(y + h / 2)});cv.stroke();`)
+    }
+  }
+  for (const t of cluster.texts) {
+    const r = rect(t); const st = ts(t)
+    const align = String(st.align || 'left')
+    const cx = align === 'center' ? n((r.x || 0) - ox + (r.width || 0) / 2)
+      : align === 'right' ? n((r.x || 0) - ox + (r.width || 0)) : n((r.x || 0) - ox)
+    out.push(`cv.fillStyle='${hexToRgba(st.color)}';`)
+    out.push(`cv.font='${Number(st.fontWeight) || 400} ${Number(st.fontSize) || 12}px "PingFang SC","Helvetica Neue",sans-serif';`)
+    out.push(`cv.textAlign='${align === 'center' || align === 'right' ? align : 'left'}';`)
+    out.push("cv.textBaseline='top';")
+    out.push(`cv.fillText(${JSON.stringify(textOf(t))},${cx},${n((r.y || 0) - oy)});`)
+  }
+  return out.join('')
+}
+
+// 评分仪表盘 Canvas 出码（recipe_snippets/canvas-gauge-score.json 同族：半环灰轨 + 高亮弧 + 中心分数/标签）
+const SCORE_GAUGE_CANVAS_CODE = "var self = this;\nvar canvas = event.canvas;\nvar ctx = canvas.getContext('2d');\nctx.imageSmoothingEnabled = true;\nctx.imageSmoothingQuality = 'high';\nvar cx = 60;\nvar cy = 60;\nvar r = 56.5;\nfunction toRad(a) { return a * Math.PI / 180; }\nctx.lineWidth = 6;\nctx.lineCap = 'butt';\nctx.strokeStyle = '#F5F5F5';\nctx.beginPath();\nctx.arc(cx, cy, r, toRad(317), toRad(517), false);\nctx.stroke();\nvar score = Number(self.state.score);\nif (isNaN(score)) { score = 0; }\nscore = Math.min(Math.max(score, 0), 100);\nvar fill = score * (160 / 70);\nif (fill > 270) { fill = 270; }\nctx.strokeStyle = '#FCC800';\nctx.beginPath();\nctx.arc(cx, cy, r, toRad(157), toRad(157 + fill), false);\nctx.stroke();\nvar scoreText = String(self.state.score == null ? '' : self.state.score);\nctx.textBaseline = 'alphabetic';\nctx.fillStyle = '#221715';\nctx.font = '500 28px \"Helvetica Neue\", \"PingFang SC\", sans-serif';\nvar wNum = ctx.measureText(scoreText).width;\nctx.font = '500 14px \"PingFang SC\", sans-serif';\nvar wUnit = ctx.measureText('\u5206').width;\nvar startX = cx - (wNum + wUnit + 2) / 2;\nctx.textAlign = 'left';\nctx.font = '500 28px \"Helvetica Neue\", \"PingFang SC\", sans-serif';\nctx.fillText(scoreText, startX, 52);\nctx.font = '500 14px \"PingFang SC\", sans-serif';\nctx.fillText('\u5206', startX + wNum + 2, 52);\nctx.font = '400 12px \"PingFang SC\", sans-serif';\nctx.textAlign = 'center';\nctx.fillStyle = '#575757';\nctx.fillText(String(self.state.scoreLabel || ''), cx, 73);"
+
 export function extractSemantics(spec, cardIndex = 0, opts = {}) {
   // 设计稿聚焦图（可选）：标注缺陷交叉校验（小 pill 描边环采样等），视觉优先；缺省跳过校验。
   const _designImage = opts.designImage || null
   const card = (spec.cards || [])[Number(cardIndex) || 0] || {}
   const all = (card.elements || []).length ? card.elements : (spec.elements || [])
-  const content = all.filter((e) => !isBg(e))
+  let content = all.filter((e) => !isBg(e))
+  // 图表矢量簇（柱+网格线+轴/值标签）先整体摘出：下游无图表消费通道，不摘出会被静默丢弃/错排
+  const chartClusters = detectChartClusters(content)
+  if (chartClusters.length) {
+    const absorbed = new Set(chartClusters.flatMap((c) => [...c.members, ...c.texts]))
+    content = content.filter((e) => !absorbed.has(e))
+  }
   const rawTexts = content
     .filter((e) => e.type === 'text' && textOf(e))
     .sort((a, b) => (rect(a).y || 0) - (rect(b).y || 0))
@@ -1034,10 +1400,7 @@ export function extractSemantics(spec, cardIndex = 0, opts = {}) {
           return !memberTexts.has(text) && bottom <= top && top - bottom <= 48
             && (tr.x || 0) >= left - 24 && (tr.x || 0) <= left + 24
             && (ts(text).fontSize || 0) >= 14
-        }).sort((a, b) => (
-          (top - (rect(b).y || 0) - (rect(b).height || 0)) -
-          (top - (rect(a).y || 0) - (rect(a).height || 0))
-        ))
+        }).sort((a, b) => (rect(b).y || 0) - (rect(a).y || 0))
         const labelEl = labelCands[0] || null
         const labelStyle = labelEl ? ts(labelEl) : null
         groups.push({
@@ -1735,8 +2098,18 @@ export function extractSemantics(spec, cardIndex = 0, opts = {}) {
   for (const [, group] of labelYGroups) {
     if (group.length >= 2) group.forEach((lab) => parallelLabels.add(lab))
   }
+  // 与主金额标签同带的并列汇总列（总支出/总收入）不是副金额：留给面板通道整带渲染，
+  // 否则次列被副金额通道甩到卡底（汇总区只剩单列）。
+  const primaryLabelEl = primaryAmountEl ? texts.find((t2) => {
+    const r2 = rect(t2)
+    const dy2 = (primaryRect.y || 0) - ((r2.y || 0) + (r2.height || 0))
+    return dy2 >= -6 && dy2 <= 40 && Math.abs((r2.x || 0) - (primaryRect.x || 0)) <= 40
+  }) || null : null
   for (const lab of labels) {
     if (!parallelLabels.has(lab)) continue
+    if (primaryLabelEl && Math.abs((rect(lab).y || 0) - (rect(primaryLabelEl).y || 0)) <= 12) continue
+    // 副金额列标签必须位于主金额值之下：与主值同带的是并列汇总列（总支出/总收入），归面板通道。
+    if (primaryRect && (rect(lab).y || 0) <= (primaryRect.y || 0) + (primaryRect.height || 0)) continue
     const labR = rect(lab)
     const valCands = texts.filter((t) => {
       if (isPrimaryFragment(t)) return false
@@ -1941,6 +2314,24 @@ export function extractSemantics(spec, cardIndex = 0, opts = {}) {
     const group = clusters[0].sort((a, b) => (rect(a).x || 0) - (rect(b).x || 0))
     const grpY = rect(group[0]).y || 0
     const logoSlice = slices.find((s) => Math.abs((rect(s).y || 0) - grpY) < 15 && (rect(s).x || 0) < rect(group[0]).x)
+    // 标签簇下方同列数值行（并行汇总双列「总支出/总收入」下一行的大字号数值）：
+    // 每个标签 x±24、位于标签带底沿之下 24-56px、含数字 → 归为该簇的值（随带整块渲染）。
+    const grpBottom = Math.max(...group.map((t) => (rect(t).y || 0) + (rect(t).height || 0)))
+    const clusterValues = group.map((t) => {
+      const tr = rect(t)
+      const cand = texts.find((v) => {
+        if (v === t || group.includes(v)) return false
+        const vr = rect(v)
+        const dy = (vr.y || 0) - grpBottom
+        return /\d/.test(textOf(v)) && dy >= 8 && dy <= 56
+          && Math.abs((vr.x || 0) - (tr.x || 0)) <= 24 && (vr.width || 0) <= 160
+      })
+      return cand ? {
+        text: textOf(cand), color: ts(cand).color, fontSize: ts(cand).fontSize,
+        fontWeight: ts(cand).fontWeight, x: rect(cand).x || 0, y: rect(cand).y || 0,
+        width: rect(cand).width || 0, height: rect(cand).height || 0,
+      } : null
+    })
     return {
       logoSlice: logoSlice || null,
       items: group.map((t) => ({
@@ -1948,6 +2339,7 @@ export function extractSemantics(spec, cardIndex = 0, opts = {}) {
         fontWeight: ts(t).fontWeight, x: rect(t).x || 0, width: rect(t).width || 0,
         y: rect(t).y || 0, height: rect(t).height || 0,
       })),
+      values: clusterValues.some(Boolean) ? clusterValues : null,
       y: grpY,
     }
   })()
@@ -2003,6 +2395,10 @@ export function extractSemantics(spec, cardIndex = 0, opts = {}) {
       const radius = Number(element.style?.radius?.borderRadius)
       if (element.type !== 'shape' || !border.isBorder || !(radius >= 4)) return false
       const sr = rect(element)
+      // 卡壳自排除：覆盖整卡的描边圆角壳是卡片本体（白描边在浅底上不可见），
+      // 认成段落描边 pill 会在卡中部画出一圈可见圆角框（大段落文本曾把 2×h+20 上限撑穿）。
+      const cR = rect(card)
+      if ((sr.width || 0) >= (cR.width || 0) * 0.9 && (sr.height || 0) >= (cR.height || 0) * 0.9) return false
       return (tr.x || 0) >= (sr.x || 0) - 2 && (tr.y || 0) >= (sr.y || 0) - 2
         && ((tr.x || 0) + (tr.width || 0)) <= ((sr.x || 0) + (sr.width || 0)) + 2
         && ((tr.y || 0) + (tr.height || 0)) <= ((sr.y || 0) + (sr.height || 0)) + 2
@@ -2053,9 +2449,26 @@ export function extractSemantics(spec, cardIndex = 0, opts = {}) {
       const textCenter = (tr.y || 0) + (tr.height || 0) / 2
       const gapLeft = (tr.x || 0) - ((sr.x || 0) + (sr.width || 0))
       const gapRight = (sr.x || 0) - ((tr.x || 0) + (tr.width || 0))
-      return Math.abs(sliceCenter - textCenter) <= 8
+      // 竖直容差随切片高度放宽：大尺寸主视觉（吉祥物/头像）与多行文本的中心差可达
+      // 十几 px，固定 8px 只认小图标 → 主视觉掉进孤立媒体块单独成行（卡头被拆两行）。
+      const vTol = Math.max(8, Math.min((sr.height || 0) * 0.35, (tr.height || 0) * 0.6))
+      const vOverlap = Math.min((sr.y || 0) + (sr.height || 0), (tr.y || 0) + (tr.height || 0))
+        - Math.max(sr.y || 0, tr.y || 0)
+      return Math.abs(sliceCenter - textCenter) <= vTol && vOverlap > 0
         && ((gapLeft >= -4 && gapLeft <= 24) || (gapRight >= -4 && gapRight <= 24))
     }) || null,
+    decoSliceEl: slices.find((slice) => {
+      const sr = rect(slice)
+      const tr = rect(t)
+      const sliceCenterX = (sr.x || 0) + (sr.width || 0) / 2
+      const textCenter = (tr.y || 0) + (tr.height || 0) / 2
+      // 文本底带装饰切片（下划波浪/高亮笔触）：水平落在文本宽度内、竖直贴文本下半段
+      // → 随文本行渲染；否则薄切片（高 <20）进不了孤立媒体块被静默丢弃。
+      return (sr.height || 0) >= 4 && (sr.height || 0) <= Math.max(8, (tr.height || 0) * 0.5)
+        && (sr.width || 0) <= (tr.width || 0)
+        && (sr.y || 0) >= textCenter && (sr.y || 0) <= (tr.y || 0) + (tr.height || 0) + 8
+        && sliceCenterX >= (tr.x || 0) && sliceCenterX <= (tr.x || 0) + (tr.width || 0)
+    }) || null,
     backgroundShell: backgroundShellFor(t),
     outlineShell: outlineShellFor(t),
     highlightShell: highlightShellFor(t),
@@ -2100,6 +2513,111 @@ export function extractSemantics(spec, cardIndex = 0, opts = {}) {
   const primaryButtonShapes = buttonShapes.filter((b) => (rect(b).width || 0) >= 80)
   const btnBottom = primaryButtonShapes.length ? Math.max(...primaryButtonShapes.map((b) => (rect(b).y || 0) + (rect(b).height || 0))) : 9999
   const formBandTop = mainBottom + 6
+  // —— 对比面板组预抽取（并排小卡：壳内左对齐「标签行 + 值行」，可带圆点/状态 tag）——
+  // 通用「label + 同行右簇 value」配对会跨壳把并排面板的两条标签配成一行
+  // （持仓比例 ↔ 建议比例）、值行同理；壳底色/圆角/圆点/状态 tag 也全部丢失。
+  // 故先按壳几何把面板行摘出（每壳一行）并消费其文本，禁止通用配对再碰。
+  const panelShellCands = shapes.filter((s2) => {
+    const f2 = s2.style?.fill
+    if (!f2 || (!f2.color && !f2.gradient)) return false
+    if (radiusMax(s2.style) < 4) return false
+    const r2 = rect(s2)
+    const w2 = r2.width || 0; const h2 = r2.height || 0
+    if (w2 < 100 || w2 > 260 || h2 < 48 || h2 > 120) return false
+    if ((r2.y || 0) <= formBandTop || (r2.y || 0) >= btnBottom) return false
+    const inside = texts.filter((t2) => rectInside(r2, rect(t2), 0))
+    if (inside.length < 2) return false
+    const lineKeys = new Set(inside.map((t2) => Math.round((rect(t2).y || 0) / 6)))
+    return lineKeys.size >= 2
+  })
+  // 同位双层标注（编组+矩形）与内层装饰壳去重：保留最外层且有实体填充色的 shape
+  const panelShells = panelShellCands.filter((a) => {
+    const ra = rect(a)
+    const aSolid = !!(a.style?.fill?.color)
+    return !panelShellCands.some((b) => {
+      if (b === a) return false
+      const rb = rect(b)
+      if (!rectInside(rb, ra, 1)) return false
+      const sameRect = Math.abs((rb.width || 0) - (ra.width || 0)) <= 2
+        && Math.abs((rb.height || 0) - (ra.height || 0)) <= 2
+      if (!sameRect) return true
+      const bSolid = !!(b.style?.fill?.color)
+      return !aSolid || (bSolid && panelShellCands.indexOf(b) < panelShellCands.indexOf(a))
+    })
+  })
+  for (const shellEl of panelShells) {
+    const sr2 = rect(shellEl)
+    const insideTexts = texts
+      .filter((t2) => !formConsumed.has(t2) && !enumStatConsumed.has(t2) && rectInside(sr2, rect(t2), 0))
+      .sort((p, q) => (rect(p).y || 0) - (rect(q).y || 0))
+    if (insideTexts.length < 2) continue
+    const labEl = insideTexts[0]
+    const labR = rect(labEl)
+    const restLines = insideTexts.slice(1)
+    const valEl = restLines[0]
+    const valR = rect(valEl)
+    const tagCand = restLines.find((t2) => t2 !== valEl
+      && (rect(t2).width || 0) <= 60 && (rect(t2).height || 0) <= 24
+      && (rect(t2).x || 0) > (valR.x || 0) + (valR.width || 0) - 2
+      && Math.abs((rect(t2).y || 0) - (valR.y || 0)) <= 12) || null
+    const tagShapeOf = (t2) => shapes.find((s3) => {
+      const r3 = rect(s3); const tr3 = rect(t2)
+      return (r3.width || 0) >= (tr3.width || 0) && (r3.width || 0) <= (tr3.width || 0) + 16
+        && (r3.height || 0) >= (tr3.height || 0) && (r3.height || 0) <= (tr3.height || 0) + 12
+        && Math.abs((r3.x || 0) - (tr3.x || 0)) <= 8 && Math.abs((r3.y || 0) - (tr3.y || 0)) <= 8
+    }) || null
+    const tagShapeEl = tagCand ? tagShapeOf(tagCand) : null
+    // 无壳短文本按子值处理（第二值），有壳才是状态 tag
+    const tagEl = tagShapeEl ? tagCand : null
+    const subEls2 = restLines.filter((t2) => t2 !== valEl && t2 !== tagEl)
+    const dotEl = shapes.find((s3) => {
+      const f3 = s3.style?.fill
+      if (!f3 || !f3.color) return false
+      const r3 = rect(s3)
+      const w3 = r3.width || 0; const h3 = r3.height || 0
+      if (w3 < 6 || w3 > 14 || h3 < 6 || h3 > 14) return false
+      return rectInside(sr2, r3, 0)
+        && (r3.x || 0) + w3 <= (labR.x || 0)
+        && Math.abs(((r3.y || 0) + h3 / 2) - ((labR.y || 0) + (labR.height || 0) / 2)) <= 12
+    }) || null
+    formRows.push({
+      panelShell: {
+        x: sr2.x || 0, y: sr2.y || 0, width: sr2.width || 0, height: sr2.height || 0,
+        fill: shellEl.style?.fill?.color || null,
+        gradient: shellEl.style?.fill?.gradient || null,
+        radius: radiusMax(shellEl.style),
+        opacity: shellEl.style?.opacity ?? 1,
+      },
+      dot: dotEl ? {
+        color: dotEl.style.fill.color,
+        x: rect(dotEl).x || 0, y: rect(dotEl).y || 0,
+        w: Math.round(rect(dotEl).width || 8), h: Math.round(rect(dotEl).height || 8),
+        gap: Math.max(0, Math.round((labR.x || 0) - ((rect(dotEl).x || 0) + (rect(dotEl).width || 0)))),
+      } : null,
+      tag: tagEl ? {
+        text: textOf(tagEl), color: ts(tagEl).color, fontSize: ts(tagEl).fontSize,
+        borderColor: tagShapeEl.style?.border?.isBorder ? tagShapeEl.style.border.color : null,
+        fill: tagShapeEl.style?.fill?.color || null,
+        radius: radiusMax(tagShapeEl.style),
+        w: Math.round(rect(tagShapeEl).width || 24),
+        h: Math.round(rect(tagShapeEl).height || 14),
+        right: Math.round((rect(tagShapeEl).x || 0) + (rect(tagShapeEl).width || 0)),
+      } : null,
+      label: { text: textOf(labEl), color: ts(labEl).color, fontSize: ts(labEl).fontSize, fontWeight: ts(labEl).fontWeight, x: labR.x || 0, y: labR.y || 0, width: labR.width || 0, height: labR.height || (ts(labEl).fontSize || 14) * 1.4 },
+      leftIconSlice: null,
+      value: { text: textOf(valEl), color: ts(valEl).color, fontSize: ts(valEl).fontSize, fontWeight: ts(valEl).fontWeight, x: valR.x || 0, y: valR.y || 0, width: valR.width || 0, height: valR.height || (ts(valEl).fontSize || 14) * 1.4 },
+      subValues: subEls2.map((t2) => ({ text: textOf(t2), color: ts(t2).color, fontSize: ts(t2).fontSize, fontWeight: ts(t2).fontWeight, x: rect(t2).x || 0, y: rect(t2).y || 0, width: rect(t2).width || 0, height: rect(t2).height || (ts(t2).fontSize || 14) * 1.4 })),
+      rightAffordanceSlice: null,
+      isPlaceholder: false,
+      labelEl: labEl,
+      valueEl: valEl,
+      subEls: subEls2,
+    })
+    formConsumed.add(labEl)
+    formConsumed.add(valEl)
+    if (tagEl) formConsumed.add(tagEl)
+    subEls2.forEach((t2) => formConsumed.add(t2))
+  }
   // 候选左标签：表单带内、左锚定（x < 120）的文本；枚举统计行文本已排除；
   // 另排除「大字号纯数字」头部主数字（如未读消息数 12）——标题区数字块不是表单 label。
   const labelCands = texts.filter((t) => {
@@ -2238,7 +2756,71 @@ export function extractSemantics(spec, cardIndex = 0, opts = {}) {
         && (sr.x || 0) + sw <= lx + 2 && (sr.x || 0) >= (rect(card).x || 0) - 4
         && Math.abs(vCenter - lCenter) <= 12
     }) || null
+    // 对比面板壳/圆点/行内状态 tag：壳承行底色/圆角/高度与内缩，圆点进 label 左簇，tag 随值行
+    const labRect0 = rect(lab)
+    const labCenter0 = { x: (labRect0.x || 0) + (labRect0.width || 0) / 2, y: (labRect0.y || 0) + (labRect0.height || 0) / 2 }
+    const panelShellEl = shapes.find((s2) => {
+      const f2 = s2.style?.fill
+      if (!f2 || (!f2.color && !f2.gradient)) return false
+      if (radiusMax(s2.style) < 4) return false
+      const r2 = rect(s2)
+      const w2 = r2.width || 0; const h2 = r2.height || 0
+      if (w2 < 100 || w2 > 260 || h2 < 48 || h2 > 120) return false
+      return labCenter0.x >= (r2.x || 0) && labCenter0.x <= (r2.x || 0) + w2
+        && labCenter0.y >= (r2.y || 0) && labCenter0.y <= (r2.y || 0) + h2
+    }) || null
+    const dotEl = panelShellEl ? shapes.find((s2) => {
+      const f2 = s2.style?.fill
+      if (!f2 || !f2.color) return false
+      const r2 = rect(s2)
+      const w2 = r2.width || 0; const h2 = r2.height || 0
+      if (w2 < 6 || w2 > 14 || h2 < 6 || h2 > 14) return false
+      const pr2 = rect(panelShellEl)
+      return (r2.x || 0) >= (pr2.x || 0) && (r2.x || 0) + w2 <= (pr2.x || 0) + (pr2.width || 0)
+        && (r2.y || 0) >= (pr2.y || 0) && (r2.y || 0) + h2 <= (pr2.y || 0) + (pr2.height || 0)
+        && (r2.x || 0) + w2 <= (labRect0.x || 0)
+        && Math.abs(((r2.y || 0) + h2 / 2) - labCenter0.y) <= 12
+    }) || null : null
+    const tagTextEl = panelShellEl ? texts.find((t2) => {
+      if (t2 === lab || t2 === valueEl || subEls.includes(t2)) return false
+      const r2 = rect(t2)
+      const w2 = r2.width || 0; const h2 = r2.height || 0
+      if (w2 < 8 || w2 > 60 || h2 < 8 || h2 > 24) return false
+      const pr2 = rect(panelShellEl)
+      return (r2.x || 0) >= (pr2.x || 0) && (r2.x || 0) + w2 <= (pr2.x || 0) + (pr2.width || 0)
+        && (r2.y || 0) >= (pr2.y || 0) && (r2.y || 0) + h2 <= (pr2.y || 0) + (pr2.height || 0)
+    }) || null : null
+    const tagShapeEl = tagTextEl ? shapes.find((s2) => {
+      const r2 = rect(s2)
+      const tr2 = rect(tagTextEl)
+      return (r2.width || 0) >= (tr2.width || 0) && (r2.width || 0) <= (tr2.width || 0) + 16
+        && (r2.height || 0) >= (tr2.height || 0) && (r2.height || 0) <= (tr2.height || 0) + 12
+        && Math.abs((r2.x || 0) - (tr2.x || 0)) <= 8 && Math.abs((r2.y || 0) - (tr2.y || 0)) <= 8
+    }) || null : null
     formRows.push({
+      panelShell: panelShellEl ? {
+        x: rect(panelShellEl).x || 0, y: rect(panelShellEl).y || 0,
+        width: rect(panelShellEl).width || 0, height: rect(panelShellEl).height || 0,
+        fill: panelShellEl.style?.fill?.color || null,
+        gradient: panelShellEl.style?.fill?.gradient || null,
+        radius: radiusMax(panelShellEl.style),
+        opacity: panelShellEl.style?.opacity ?? 1,
+      } : null,
+      dot: dotEl ? {
+        color: dotEl.style.fill.color,
+        x: rect(dotEl).x || 0, y: rect(dotEl).y || 0,
+        w: Math.round(rect(dotEl).width || 8), h: Math.round(rect(dotEl).height || 8),
+        gap: Math.max(0, Math.round((labRect0.x || 0) - ((rect(dotEl).x || 0) + (rect(dotEl).width || 0)))),
+      } : null,
+      tag: tagTextEl ? {
+        text: textOf(tagTextEl), color: ts(tagTextEl).color, fontSize: ts(tagTextEl).fontSize,
+        borderColor: tagShapeEl && tagShapeEl.style?.border?.isBorder ? tagShapeEl.style.border.color : null,
+        fill: tagShapeEl ? (tagShapeEl.style?.fill?.color || null) : null,
+        radius: tagShapeEl ? radiusMax(tagShapeEl.style) : 2,
+        w: Math.round(rect(tagShapeEl || tagTextEl).width || 24),
+        h: Math.round(rect(tagShapeEl || tagTextEl).height || 14),
+        right: Math.round((rect(tagShapeEl || tagTextEl).x || 0) + (rect(tagShapeEl || tagTextEl).width || 0)),
+      } : null,
       label: { text: textOf(lab), color: ts(lab).color, fontSize: ts(lab).fontSize, fontWeight: ts(lab).fontWeight, x: lx, y: ly, width: rect(lab).width || 0, height: rect(lab).height || (ts(lab).fontSize || 14) * 1.4 },
       leftIconSlice,
       value: valueEl ? { text: textOf(valueEl), color: ts(valueEl).color, fontSize: ts(valueEl).fontSize, fontWeight: ts(valueEl).fontWeight, x: rect(valueEl).x || 0, y: rect(valueEl).y || 0, width: rect(valueEl).width || 0, height: rect(valueEl).height || (ts(valueEl).fontSize || 14) * 1.4 } : null,
@@ -2337,6 +2919,7 @@ export function extractSemantics(spec, cardIndex = 0, opts = {}) {
       return w >= 10 && w <= 28 && h >= 10 && h <= 28
     })
     for (const row of formRows) {
+      if (row.panelShell) continue
       if (row.trailingIconSlice || row.rightAffordanceSlice || row.rightActionButton) continue
       const anchor = row.value
       if (!anchor) continue
@@ -2356,6 +2939,7 @@ export function extractSemantics(spec, cardIndex = 0, opts = {}) {
     const claimed = new Set(formRows.flatMap((row) =>
       [row.rightAffordanceSlice, row.leftIconSlice, row.trailingIconSlice].filter(Boolean)))
     for (const row of formRows) {
+      if (row.panelShell) continue
       const anchor = row.value
       if (!anchor || row.valueLeadSlice) continue
       const valueLeft = anchor.x || 0
@@ -2408,8 +2992,16 @@ export function extractSemantics(spec, cardIndex = 0, opts = {}) {
   // 与选项/面板壳同位的 symbol 是同一视觉的重复标注（如 pill 同时存在 symbol 实例和矩形壳），
   // 不剔除会双份渲染（symbol 占位图 + 选项按钮叠在一起）。
   const shellCovered = (el) => [...optionShapeSet].some((s) => overlapRatio(el, s) > 0.6)
+  // 行壳重复标注：symbol 与同矩形带填充 shape 共存（shape 承载填充色）→ symbol 侧不得进媒体行，
+  // 否则行内容被占位图认领、列表识别被打散（交易行曾裂成「静态行 + 单行列表」）。
+  const shapeShellDup = (el) => {
+    const er = rect(el)
+    return shapes.some((sh) => Math.abs((rect(sh).x || 0) - (er.x || 0)) <= 2
+      && Math.abs((rect(sh).y || 0) - (er.y || 0)) <= 2
+      && Math.abs((rect(sh).width || 0) - (er.width || 0)) <= 2 && Math.abs((rect(sh).height || 0) - (er.height || 0)) <= 2)
+  }
   const symbolMediaRows = leafSymbols.filter((symbol) =>
-    !shellCovered(symbol) &&
+    !shellCovered(symbol) && !shapeShellDup(symbol) &&
     !buttonShapes.some((button) => overlapRatio(symbol, button) > 0.5) && !(() => {
       const sr = rect(symbol)
       return (sr.width || 0) >= mediaCardWidth * 0.8 && (sr.height || 0) >= 100
@@ -2481,12 +3073,53 @@ export function extractSemantics(spec, cardIndex = 0, opts = {}) {
       width: tr.width || 0,
       height: tr.height || 0,
       trackColor: track.style?.fill?.color,
+      trackEl: track,
+      segmentEls: fills,
       segments: fills.map((fill) => ({
         ratio: Math.min(1, Math.max(0, (rect(fill).width || 0) / (tr.width || 1))),
         color: fill.style?.fill?.color || track.style?.fill?.color,
       })),
     })
   }
+  // 无轨道多段拼接条（如 蓝段+黄段 相邻平铺的比例条）：同 y 同高、横向相邻(≤8px)的
+  // bar 形组以「首左沿→末右沿」为轨道合成多段进度条；否则两段被当孤立色块丢弃。
+  const usedBarEls = new Set()
+  for (const bar of progressBars) {
+    if (bar.trackEl) usedBarEls.add(bar.trackEl)
+    for (const el of (bar.segmentEls || [])) usedBarEls.add(el)
+  }
+  const freeBarShapes = barShapes.filter((shape) => !usedBarEls.has(shape))
+    .sort((a, b) => (rect(a).x || 0) - (rect(b).x || 0))
+  const tiledGroups = []
+  for (const shape of freeBarShapes) {
+    const sr = rect(shape)
+    const group = tiledGroups.find((gg) => Math.abs((gg.y || 0) - (sr.y || 0)) <= 2
+      && Math.abs((gg.h || 0) - (sr.height || 0)) <= 2
+      && (sr.x || 0) - (gg.right || 0) <= 8 && (sr.x || 0) >= (gg.right || 0) - 2)
+    if (group) {
+      group.members.push(shape)
+      group.right = Math.max(group.right, (sr.x || 0) + (sr.width || 0))
+    } else {
+      tiledGroups.push({ y: sr.y || 0, h: sr.height || 0, x: sr.x || 0,
+        right: (sr.x || 0) + (sr.width || 0), members: [shape] })
+    }
+  }
+  for (const group of tiledGroups) {
+    if (group.members.length < 2) continue
+    const span = group.right - group.x
+    if (span < layoutCardWidth * 0.4) continue
+    progressBars.push({
+      x: group.x,
+      y: group.y,
+      width: span,
+      height: group.h,
+      trackColor: null,
+      segments: group.members.map((member) => ({
+        ratio: Math.min(1, Math.max(0, (rect(member).width || 0) / (span || 1))),
+        color: member.style?.fill?.color || null,
+      })),
+    })
+  }
 
   // —— 内嵌面板行：外层卡内的几何壳（列表项/入口卡/选择行）必须作为整体渲染。 ——
   // 判定只依赖：宽壳 + 圆角 + 内部堆叠文本 + 可选左右媒体；不识别业务文案。
@@ -2509,12 +3142,38 @@ export function extractSemantics(spec, cardIndex = 0, opts = {}) {
       const containsRepeatBand = repeatRowMode && _repeatBandTops.some((bt) =>
         bt >= (sr.y || 0) - 2 && bt <= (sr.y || 0) + (sr.height || 0) + 2)
       return !coversCard && !containsRepeatBand
-        && sr.width >= cardWidth * 0.6 && sr.height >= 50 && sr.height <= Math.max(200, cardHeight * 0.5) && radius >= 6
+        && sr.width >= cardWidth * 0.6 && sr.height <= Math.max(200, cardHeight * 0.5) && radius >= 6
+        // 入口/链接行（高 36-50）：单条左齐文本 + 右端小亲和件（箭头/勾选切片或矢量形）。
+        // 高度下限原为 50，44px 白底入口行全部漏判 → 整行底色+文本丢失（像素热区整带）。
+        && (sr.height >= 50 || (sr.height >= 36 && (() => {
+          const innerTexts = texts.filter((t2) => {
+            const tr2 = rect(t2)
+            return (tr2.x || 0) >= (sr.x || 0) - 2 && (tr2.y || 0) >= (sr.y || 0) - 2
+              && ((tr2.x || 0) + (tr2.width || 0)) <= (sr.x || 0) + (sr.width || 0) + 2
+              && ((tr2.y || 0) + (tr2.height || 0)) <= (sr.y || 0) + (sr.height || 0) + 2
+          })
+          if (innerTexts.length !== 1) return false
+          const tr2 = rect(innerTexts[0])
+          const leftAligned = ((tr2.x || 0) - (sr.x || 0)) <= (sr.width || 0) * 0.15
+          const affordance = [...shapes, ...(slices || [])].some((e2) => {
+            if (e2 === shape) return false
+            const er2 = rect(e2)
+            const ew = er2.width || 0
+            const eh = er2.height || 0
+            if (ew < 4 || ew > 32 || eh < 4 || eh > 32) return false
+            return (er2.x || 0) + ew >= (sr.x || 0) + (sr.width || 0) - 28
+              && Math.abs(((er2.y || 0) + eh / 2) - ((sr.y || 0) + (sr.height || 0) / 2)) <= (sr.height || 0) / 2
+          })
+          return leftAligned && affordance
+        })()))
         && !(ownsPrimaryAmount && sameFillAsCard)
         && !buttonShapes.some((button) => {
           // 主尺寸按钮（w>=80，CTA/主操作）：壳整体含按钮 → 复合容器（产品卡/CTA 块），
           // 交还 主按钮/渐变容器 专用路径（min 面积归一，原语义）；小 pill 是行内操作件，
           // 落在壳内不排除壳（覆盖率归一，[媒体|文本栈|pill] 复合行仍是面板）。
+          // 壳自身落进 buttonShapes（形状级）但未成为按钮（文本非居中，如入口行）时，不得自排除：
+          // 否则入口行壳永远进不了 panelRows，整行底色+文本丢失。
+          if (button === shape) return false
           const isPrimarySized = (rect(button).width || 0) >= 80
           return isPrimarySized ? overlapRatio(shape, button) > 0.5 : coverRatio(shape, button) > 0.5
         })
@@ -2538,11 +3197,15 @@ export function extractSemantics(spec, cardIndex = 0, opts = {}) {
           && ((er.y || 0) + (er.height || 0)) <= bottom + 2
       }
       const buttonTextEls = new Set(buttons.map((button) => button.sourceEl).filter(Boolean))
-      const paired = texts.filter((text) => !symbolMediaConsumed.has(text) && !subAmountElementSet.has(text)
+      const paired = texts.filter((text) => !symbolMediaConsumed.has(text) && !(subAmountElementSet.has(text) && !inside(text))
         && !optionTextSet.has(text) && !optionLabelSet.has(text)
         && !buttonTextEls.has(text)).filter(inside).sort((a, b) =>
         (rect(a).y || 0) - (rect(b).y || 0) || (rect(a).x || 0) - (rect(b).x || 0))
-      if (!paired.length) return null
+      // 段落壳归富文本通道：壳内含 richBlock 碎片/容器时 panelRows 再认领会把段落链接行
+      // （查看详细建议）抢成面板行插到段落之前，DOM 顺序颠倒且灰底壳重复归属。
+      const richInside = (richBlocks || []).some((blk) => inside(blk.container)
+        || (blk.fragments || []).some((frag) => inside(frag)))
+      if (!paired.length || richInside) return null
       const overlapsExisting = paired.some((t) => {
         const value = textOf(t)
         return subAmounts.some((item) => item.label === value || item.value === value)
@@ -2550,7 +3213,8 @@ export function extractSemantics(spec, cardIndex = 0, opts = {}) {
             || row.value?.text === value
           || (row.subValues || []).some((sub) => sub.text === value))
       })
-      const panelSlices = slices.filter(inside)
+      const panelSlices = [...slices, ...symbols.filter((sy) =>
+        !symbolMediaRows.some((row) => row.symbolEl === sy))].filter(inside)
       const firstText = paired[0]
       const lastText = paired[paired.length - 1]
       const leftMedia = panelSlices.find((s) => (rect(s).x || 0) < (rect(firstText).x || 0)) || null
@@ -2709,6 +3373,7 @@ export function extractSemantics(spec, cardIndex = 0, opts = {}) {
   const progressShapes = progressBars.flatMap((bar) => [])
   const formSliceEls = new Set((formRows || []).flatMap((row) => [row.rightAffordanceSlice, row.leftIconSlice, row.trailingIconSlice, row.valueLeadSlice]).filter(Boolean))
   const auxSliceEls = new Set([
+    ...auxTexts.map((aux) => aux.decoSliceEl),
     ...auxTexts.map((aux) => aux.sliceEl),
     // 副金额列标签后缀图标（如币种选择器箭头）：随标签行渲染，不得落入孤立媒体块
     ...subAmounts.map((sub) => sub.labelSuffixSlice),
@@ -2744,6 +3409,7 @@ export function extractSemantics(spec, cardIndex = 0, opts = {}) {
   const hasInsideContent = (shape) => [...texts, ...slices, ...symbols]
     .some((element) => overlapRatio(element, shape) > 0.5)
   const isolatedBlocks = [...slices, ...leafSymbols, ...shapes]
+    .filter((el) => !(el.type === 'symbol' && shapeShellDup(el)))
     .filter((element) => {
       const er = rect(element)
       const width = er.width || 0
@@ -2774,6 +3440,31 @@ export function extractSemantics(spec, cardIndex = 0, opts = {}) {
       }
     })
     .sort((a, b) => a.y - b.y || a.x - b.x)
+// 浮动装饰切片回收：isolatedBlocks 先于 orphanSlices 消费切片（卡头月亮等贴缘叠装饰），
+// 命中「与文本带竖直重叠 + 贴卡缘」者改走绝对定位叠层，不占流式行高。
+const floatDecos = []
+{
+  const cRd = rect(card)
+  const isFloatDeco = (el) => {
+    const sr = rect(el)
+    const w = sr.width || 0, h = sr.height || 0
+    if (!w || !h || w > (cRd.width || 375) * 0.5) return false
+    const overlapsText = texts.some((t) => {
+      const tr = rect(t)
+      const ov = Math.min((sr.y || 0) + h, (tr.y || 0) + (tr.height || 0)) - Math.max(sr.y || 0, tr.y || 0)
+      return ov >= h * 0.2 && h >= (tr.height || 0) * 2.2
+    })
+    const edgeAnchored = ((sr.x || 0) + w) >= ((cRd.x || 0) + (cRd.width || 0)) - 24
+    return overlapsText && edgeAnchored
+  }
+  for (let k = isolatedBlocks.length - 1; k >= 0; k -= 1) {
+    const el = isolatedBlocks[k].element
+    if (el && (el.type === 'slice') && isFloatDeco(el)) {
+      floatDecos.push(el)
+      isolatedBlocks.splice(k, 1)
+    }
+  }
+}
 
   // 面板/符号媒体行消费文本后，同步回收先生成的 auxTexts，避免同一标注被重复渲染
   // （曾仅回收 panelTextConsumed：符号媒体行吞掉的文本又被 auxTexts 渲染一次 → 重影）。
@@ -2812,6 +3503,32 @@ export function extractSemantics(spec, cardIndex = 0, opts = {}) {
     // 复发护栏（对称版）：同一文案在内容区出现 ≥2 次（无论上下方），说明它是重复行内容
     // 而非列表标题（名册卡「张三」×3：旧单向护栏漏掉最后一个张三 → 误当标题吞掉整个列表）。
     if (_isRepeatedRowText(t)) return false
+    // 金额值不是列表标题：含货币符号或「数字+千分位/小数」的文本是行右金额/主金额，
+    // 误当标题会把真首行抬成 listTitle（首行 desc/amount 无人消费 → 绑定兜底双渲染重影）。
+    if (/\p{Sc}/u.test(textOf(t))) return false
+    if (/^[-+]?[\d.,\s%]+$/.test(textOf(t)) && /\.\d|,\d{3}/.test(textOf(t))) return false
+    // 周期行护栏（结构版）：候选下方存在 ≥2 个同列、同字号、同色且等距(±10)的同伴 →
+    // 它是重复行的行标题而非区块标题（交易列表首行被抬成标题会让列表少一行）。
+    // 双向护栏：上方+下方合计 ≥2 个同列、同字号、同色且等距(±12)同伴即判定为周期行
+    // （中间行仅有 1 上 1 下同伴，旧单向护栏漏判把它当标题 → 列表被拦腰截断）。
+    const titlePeersAll = texts.filter((o) => o !== t
+      && Math.abs((rect(o).x || 0) - (rect(t).x || 0)) <= 2
+      && (ts(o).fontSize || 0) === (T.fontSize || 0)
+      && String(ts(o).color || '').toLowerCase() === String(T.color || '').toLowerCase()
+      && Math.abs((rect(o).y || 0) - y) >= 20 && Math.abs((rect(o).y || 0) - y) <= 240)
+    if (titlePeersAll.length >= 2) {
+      // 步长投票：取最近同伴距离为候选步长，统计匹配该步长整数倍的同伴数；
+      // ≥2 个匹配即判周期行（非周期同伴如汇总标签混入不影响判定）。
+      const peerDys = titlePeersAll.map((o) => (rect(o).y || 0) - y).sort((a, b) => Math.abs(a) - Math.abs(b))
+      const candSteps = [...new Set([Math.abs(peerDys[0]), Math.abs(peerDys[1] || peerDys[0])])].filter((s) => s >= 20)
+      for (const candStep of candSteps) {
+        const matched = peerDys.filter((g) => {
+          const remainder = Math.abs(g) % candStep
+          return Math.min(remainder, candStep - remainder) <= 12
+        }).length
+        if (matched >= 2) return false
+      }
+    }
     return belowUnconsumed.length >= 2
   })
   const listTitle = listTitleCands.length ? {
@@ -2963,6 +3680,30 @@ export function extractSemantics(spec, cardIndex = 0, opts = {}) {
       textGap: (captionRect.y || 0) - iconBottom,
     }
   }
+  // 顶部半透明大椭圆装饰（弥散底色）：采样硬停色带是矩形平涂，还原不出椭圆曲边，
+  // 像素热带集中在带底沿（实测 y≈106 单带 32%）→ 记 radial-gradient 参数逐颗还原。
+  const topTintBlobs = (() => {
+    const cR = rect(card)
+    return shapes.filter((shape) => {
+      const sr = rect(shape)
+      const opacity = Number(shape.style?.opacity ?? 1)
+      return opacity > 0 && opacity <= 0.5
+        && (sr.width || 0) >= (cR.width || 0) * 0.4 && (sr.height || 0) >= (cR.height || 0) * 0.4
+        && (sr.y || 0) <= (cR.y || 0) + 4
+        && !radiusMax(shape.style)
+    }).map((shape) => {
+      const sr = rect(shape)
+      return {
+        cx: Math.round((sr.x || 0) + (sr.width || 0) / 2 - (cR.x || 0)),
+        cy: Math.round((sr.y || 0) + (sr.height || 0) / 2 - (cR.y || 0)),
+        rx: Math.round((sr.width || 0) / 2),
+        ry: Math.round((sr.height || 0) / 2),
+        // 不透明卡身壳罩在色块之上（磨砂玻璃壳）：设计稿里色块被白壳罩淡一层，
+        // 直接按标注 alpha 平涂会过浓（实测像素差 +5.6pp）→ 罩淡系数 0.5 校准。
+        rgba: hexToRgba(shape.style?.fill?.color || '#FFFFFF', Number(shape.style?.opacity ?? 1) * 0.5),
+      }
+    })
+  })()
   const topDecoration = (() => {
     const cr = rect(card)
     const cardTop = cr.y || 0
@@ -3117,7 +3858,7 @@ export function extractSemantics(spec, cardIndex = 0, opts = {}) {
   const rowsBelow = (listTitle
     ? texts.filter((t) => (rect(t).y || 0) > listTitleY)
     : texts.filter((t) => (rect(t).y || 0) > mainBottom
-      && !formConsumed.has(t) && !panelTextConsumed.has(t)
+      && !panelTextConsumed.has(t)
       && !auxConsumedEls.has(t) && !subAmountEls.has(t)
       && !buttons.some((button) => button.sourceEl === t)))
     .filter((t) => !optionTextSet.has(t) && !optionLabelSet.has(t))
@@ -3177,9 +3918,14 @@ export function extractSemantics(spec, cardIndex = 0, opts = {}) {
       // 描述 = 标题正下方 18-36px 的同列文本（上下两行、左对齐：列表项特征）
       // 描述行 = 标题正下方 18-36px 且与标题同列（左沿最近）的文本；
       // 右侧时间行与描述同 y 时按元素序会抢先命中，把时间当描述、真描述被甩到列表外。
-      const descEl = rowTexts
+      let descEl = rowTexts
         .filter((r) => {
           const ry = rect(r).y || 0
+          // 与标题同列、同字号、同色的「描述」其实是下一条等距单行（选项/清单行）：
+          // 真描述通常更小/更灰或缩进。误认会把下一行吞成描述、再下一行被甩出列表丢失。
+          if (Math.abs((rect(r).x || 0) - (rect(t).x || 0)) <= 2
+            && (ts(r).fontSize || 0) === (ts(t).fontSize || 0)
+            && String(ts(r).color || '').toLowerCase() === String(ts(t).color || '').toLowerCase()) return false
           return ry - y >= 18 && ry - y <= 36
         })
         .sort((a, b) => Math.abs((rect(a).x || 0) - (rect(t).x || 0))
@@ -3210,6 +3956,57 @@ export function extractSemantics(spec, cardIndex = 0, opts = {}) {
         }
         if (pairs.length >= 2) {
           compositePairs = pairs.slice(0, 4)
+          // 标签行内联 tag 壳（币种选择 pill 类）：贴标签右沿的小填充/描边壳 + 壳内短文本/小切片。
+          // 逐行数据驱动（$amtTagN/$amtTagIconN），无 tag 的行 v-show 隐藏，避免静态模板每行滥发。
+          for (const pp of compositePairs) {
+            const lr2 = rect(pp.labelEl)
+            const labelCY = (lr2.y || 0) + (lr2.height || 0) / 2
+            const shell = (shapes || []).find((sh) => {
+              const r = rect(sh)
+              const w = r.width || 0
+              const h = r.height || 0
+              if (w < 28 || w > 120 || h < 12 || h > 28) return false
+              if (!sh.style?.fill?.color && !sh.style?.border?.isBorder) return false
+              if (Math.abs(((r.y || 0) + h / 2) - labelCY) > 8) return false
+              const gx = (r.x || 0) - ((lr2.x || 0) + (lr2.width || 0))
+              return gx >= -2 && gx <= 16
+            }) || null
+            pp.tagShapeEl = shell
+            if (!shell) continue
+            const sr = rect(shell)
+            const inside = (e) => {
+              const er = rect(e)
+              return (er.x || 0) >= (sr.x || 0) - 2 && (er.y || 0) >= (sr.y || 0) - 2
+                && (er.x || 0) + (er.width || 0) <= (sr.x || 0) + (sr.width || 0) + 2
+                && (er.y || 0) + (er.height || 0) <= (sr.y || 0) + (sr.height || 0) + 2
+            }
+            const tagTextEl = texts.find((tt2) => inside(tt2)) || null
+            const tagIconEl = (slices || []).find((sl) => inside(sl)) || null
+            const tagExp = tagIconEl
+              ? (resolveSliceExport(spec.slices || [], tagIconEl.name) || tagIconEl.annotationDefect?.cropSlice)
+              : null
+            pp.tagText = tagTextEl ? textOf(tagTextEl) : ''
+            pp.tagTextColor = tagTextEl ? ts(tagTextEl).color : undefined
+            pp.tagFontSize = tagTextEl ? ts(tagTextEl).fontSize : undefined
+            pp.tagIcon = tagExp ? sliceRefPath(tagExp) : ''
+            pp.tagFill = shell.style?.fill?.color || null
+            pp.tagOpacity = shell.style?.opacity ?? 1
+            pp.tagBorder = shell.style?.border?.isBorder ? (shell.style?.border?.color || null) : null
+            pp.tagRadius = shell.style?.radius?.borderRadius || 0
+            pp.tagW = Math.round(sr.width || 0)
+            pp.tagH = Math.round(sr.height || 0)
+            pp.tagGap = Math.max(2, Math.round((sr.x || 0) - ((lr2.x || 0) + (lr2.width || 0))))
+            pp.tagPadLeft = Math.max(0, Math.round(((tagTextEl ? rect(tagTextEl).x : sr.x) || 0) - (sr.x || 0)))
+            pp.tagPadRight = Math.max(0, Math.round(((sr.x || 0) + (sr.width || 0))
+              - ((tagIconEl ? (rect(tagIconEl).x || 0) + (rect(tagIconEl).width || 0)
+                : (tagTextEl ? (rect(tagTextEl).x || 0) + (rect(tagTextEl).width || 0)
+                  : (sr.x || 0) + (sr.width || 0))))))
+            pp.tagIconGap = tagIconEl && tagTextEl
+              ? Math.max(0, Math.round((rect(tagIconEl).x || 0) - ((rect(tagTextEl).x || 0) + (rect(tagTextEl).width || 0))))
+              : 2
+            pp.tagIconW = tagIconEl ? Math.round(rect(tagIconEl).width || 16) : 0
+            pp.tagIconH = tagIconEl ? Math.round(rect(tagIconEl).height || 16) : 0
+          }
           const cardRectC = rect(card)
           titleRightEl = texts.find((tt) => {
             if (tt === t || compositePairs.some((pp) => pp.labelEl === tt || pp.valueEl === tt)) return false
@@ -3220,17 +4017,81 @@ export function extractSemantics(spec, cardIndex = 0, opts = {}) {
           }) || null
         }
       }
-      if (!descEl && !compositePairs) { lastY = y; continue }
+      if (!descEl && !compositePairs) {
+        // 周期行兜底：无标准 desc（18-36px）但标题存在 ≥2 个同列等距周期同伴时
+        // （支出占比分类行：类别名+金额+百分比+进度条，百分比仅 0-8px 下方而非标准 18-36px），
+        // 取近邻小字号文本（0-16px 下方）作为 desc，使行仍被识别为列表项。
+        // 双向检测：上下方合计 ≥2 个同列等距同伴即判周期行（中间行 1 上 1 下）。
+        const periodicPeersAll = firstColTexts.filter((o) => o !== t
+          && Math.abs((rect(o).x || 0) - (rect(t).x || 0)) <= 4
+          && (ts(o).fontSize || 0) === (ts(t).fontSize || 0)
+          && String(ts(o).color || '').toLowerCase() === String(ts(t).color || '').toLowerCase()
+          && Math.abs((rect(o).y || 0) - y) >= 20 && Math.abs((rect(o).y || 0) - y) <= 200)
+        if (periodicPeersAll.length >= 2) {
+          const peerDys = periodicPeersAll.map((o) => (rect(o).y || 0) - y).sort((a, b) => Math.abs(a) - Math.abs(b))
+          const candSteps = [...new Set([Math.abs(peerDys[0]), Math.abs(peerDys[1] || peerDys[0])])].filter((s) => s >= 20)
+          const hasPeriodic = candSteps.some((candStep) => {
+            const matched = peerDys.filter((g) => {
+              const remainder = Math.abs(g) % candStep
+              return Math.min(remainder, candStep - remainder) <= 12
+            }).length
+            return matched >= 2
+          })
+          if (hasPeriodic) {
+            descEl = rowTexts.find((r) => {
+              const ry = rect(r).y || 0
+              return r !== t && ry >= y && ry - y <= 16
+                && (ts(r).fontSize || 0) < (ts(t).fontSize || 0)
+                && Math.abs((rect(r).x || 0) - (rect(t).x || 0)) <= (rect(t).width || 0) + 40
+            }) || null
+          }
+        }
+        if (!descEl) { lastY = y; continue }
+      }
       // 时间行：日期分隔符含点/斜杠形态（2025.10.10 14:28:16）。此前只匹配横杠，
       // 点分时间行永远不被列表行消费，被 auxTexts 当孤立文本甩到卡底重渲染。
       const time = rowTexts.find((r) => r !== descEl
         && /\d{4}[-/.]\d{1,2}[-/.]\d{1,2}/.test(textOf(r))) || null
-      const amount = rowTexts.find((r) => r !== time && /¥|\.|元/.test(textOf(r)))
+      // 行右金额候选必须含数字或货币符号：纯币种名（如 pill 标签「美元」）含「元」字但不是金额，误捕会把标签塞进数值表达式（渲染占位文案）并用其右沿算行右内边距挤窄标题行。
+      const isRowAmountText = (v) => /\p{Sc}/u.test(v) || (/\d/.test(v) && /[.元]/.test(v))
+      // 行第二行右侧文本（交易行「余额：¥20,077.00」）：与 desc 行同基线、右半锚定，
+      // 且非 desc/time → 行右列第二行，数据驱动 $descRight（先于 amount 计算，
+      // 否则余额行被 amount 通道抢先造成右列双份）。
+      const descRightEl = rowTexts.find((r) => r !== descEl && r !== time && r !== t
+        && Math.abs((rect(r).y || 0) - (descEl ? (rect(descEl).y || 0) : y + 22)) <= 6
+        && (rect(r).x || 0) >= (rect(card).x || 0) + (rect(card).width || 375) / 2) || null
+      const amount = rowTexts.find((r) => r !== time && r !== descEl && r !== descRightEl && isRowAmountText(textOf(r)))
       // 标题同行后缀（如「张三」右侧灰色小字「(小张)」）：同基线、紧随标题右沿
       const titleRightEdge = (rect(t).x || 0) + (rect(t).width || 0)
+      // 行内联 affordance（紧跟账号的行尾眼睛图标）：不锚行右沿而是紧贴标题右沿，
+      // 逐行挂接后由模板按几何在标题行内联渲染（区别于右对齐行尾件）。
+      const inlineAffordEl = [...(slices || []), ...symbols].find((s2) => {
+        const r2 = rect(s2)
+        const w2 = r2.width || 0
+        const h2 = r2.height || 0
+        if (w2 < 14 || w2 > 32 || h2 < 14 || h2 > 32) return false
+        if (Math.abs((r2.y || 0) - y) > 8) return false
+        const gap2 = (r2.x || 0) - titleRightEdge
+        return gap2 >= 2 && gap2 <= 48
+      }) || null
+      if (inlineAffordEl) {
+        const bi2 = isolatedBlocks.findIndex((b) => b.element === inlineAffordEl)
+        if (bi2 >= 0) isolatedBlocks.splice(bi2, 1)
+      }
       const suffixEl = rowTexts.find((r) => r !== t && r !== descEl
         && Math.abs((rect(r).y || 0) - y) <= 6
         && (rect(r).x || 0) >= titleRightEdge - 2 && (rect(r).x || 0) <= titleRightEdge + 16) || null
+      // 标题行同行右侧文本（交易行金额，基线可能比标题高几 px）：非复合行下
+      // rowTexts 带不含它（y 略小于标题），不补 titleRight 通道行右金额就丢失。
+      if (!compositePairs) {
+        titleRightEl = texts.find((tt) => {
+          if (tt === t || tt === descEl || tt === suffixEl || tt === descRightEl) return false
+          const tr = rect(tt)
+          return Math.abs((tr.y || 0) - y) <= 8
+            && (tr.x || 0) >= titleRightEdge + 8
+            && (tr.x || 0) >= (rect(card).x || 0) + (rect(card).width || 375) * 0.5
+        }) || null
+      }
       // 行图标：标题左侧、行带垂直范围内的切片（逐行不同 → 数据驱动）
       const rowBandTop = y - 12
       const rowBandBottom = (rect(descEl).y || 0) + (rect(descEl).height || 0) + 12
@@ -3244,6 +4105,16 @@ export function extractSemantics(spec, cardIndex = 0, opts = {}) {
       // 行内操作 pill：右侧锚定的描边/填充小壳（宽 40-120 高 22-48）+ 单文本（如「删除」）
       const cardR0 = rect(card)
       const cardRight0 = (cardR0.x || 0) + (cardR0.width || 0)
+      // 行右大图标（行壳右沿锚定的 32-72px 切片/符号，如保险产品 48x48）：数据驱动 $rightIcon
+      const rightIconEl = ((content || []).filter((e) => e.type === 'slice' || e.type === 'symbol')).find((s) => {
+        if (s === iconEl) return false
+        const r = rect(s)
+        const w = r.width || 0; const h = r.height || 0
+        if (w < 32 || w > 72 || h < 32 || h > 72) return false
+        if ((r.x || 0) <= (rect(t).x || 0)) return false
+        return (r.x || 0) + w >= cardRight0 - 48
+          && (r.y || 0) >= rowBandTop && (r.y || 0) + h <= rowBandBottom + 8
+      }) || null
       const actionShapeEl = (shapes || []).find((s) => {
         if (optionShapeSet.has(s)) return false
         const r = rect(s)
@@ -3272,6 +4143,9 @@ export function extractSemantics(spec, cardIndex = 0, opts = {}) {
         title,
         // 行内容左右沿（spec 实测）：行横向内边距按此驱动，避免通用 12px 与设计 16px 错位
         rowLeftEdge: Math.round(Math.min(rect(t).x || 0, iconEl ? (rect(iconEl).x || 0) : Infinity)),
+        // 行内容真实右沿：行壳内边距推导用（全部行文本 + 图标 + 操作件右沿最大值）
+        rowContentRight: Math.round(Math.max(0, ...[...rowTexts, iconEl, rightIconEl, actionShapeEl]
+          .filter(Boolean).map((e) => (rect(e).x || 0) + (rect(e).width || 0)))) || null,
         // 只统计右栏内容（金额/时间/行内操作）的右沿；标题行后缀/右侧同行文本属于
         // 左栏标题流，混入会把行右内边距算成巨大值挤窄左栏（名册卡曾因此换行回归）。
         rowRightEdge: Math.round(Math.max(0, ...[amount, time, actionShapeEl]
@@ -3287,7 +4161,25 @@ export function extractSemantics(spec, cardIndex = 0, opts = {}) {
         iconEl,
         iconW: iconEl ? Math.round(rect(iconEl).width || 0) : 0,
         iconH: iconEl ? Math.round(rect(iconEl).height || 0) : 0,
+        rightIcon: rightIconEl
+          ? ((resolveSliceExport(spec.slices || [], rightIconEl.name) || rightIconEl.annotationDefect?.cropSlice)
+            ? sliceRefPath(resolveSliceExport(spec.slices || [], rightIconEl.name) || rightIconEl.annotationDefect?.cropSlice)
+            : `http://iph.href.lu/${Math.round(rect(rightIconEl).width || 48)}x${Math.round(rect(rightIconEl).height || 48)}?text=${encodeURIComponent('缺素材')}`)
+          : null,
+        rightIconEl,
+        rightIconW: rightIconEl ? Math.round(rect(rightIconEl).width || 0) : 0,
+        rightIconH: rightIconEl ? Math.round(rect(rightIconEl).height || 0) : 0,
         action: actionTextEl ? textOf(actionTextEl) : '',
+        affordInline: !!inlineAffordEl,
+        affordInlineGap: inlineAffordEl
+          ? Math.max(4, Math.round((rect(inlineAffordEl).x || 0) - titleRightEdge))
+          : undefined,
+        affordanceEl: inlineAffordEl || null,
+        affordanceUrl: inlineAffordEl
+          ? ((resolveSliceExport(spec.slices || [], inlineAffordEl.name) || inlineAffordEl.annotationDefect?.cropSlice)
+            ? sliceRefPath(resolveSliceExport(spec.slices || [], inlineAffordEl.name) || inlineAffordEl.annotationDefect?.cropSlice)
+            : `http://iph.href.lu/${Math.round(rect(inlineAffordEl).width || 20)}x${Math.round(rect(inlineAffordEl).height || 20)}?text=${encodeURIComponent('缺素材')}`)
+          : '',
         actionShapeEl,
         actionColor: actionTextEl ? ts(actionTextEl).color : undefined,
         actionFontSize: actionTextEl ? ts(actionTextEl).fontSize : undefined,
@@ -3297,8 +4189,16 @@ export function extractSemantics(spec, cardIndex = 0, opts = {}) {
         actionW: actionShapeEl ? Math.round(rect(actionShapeEl).width || 0) : 0,
         actionH: actionShapeEl ? Math.round(rect(actionShapeEl).height || 0) : 0,
         desc: compositePairs ? '' : textOf(descEl),
+        descRight: descRightEl ? textOf(descRightEl) : '',
+        descRightColor: descRightEl ? ts(descRightEl).color : undefined,
+        descRightFontSize: descRightEl ? ts(descRightEl).fontSize : undefined,
         amounts: compositePairs ? compositePairs.map((pp) => ({
           label: textOf(pp.labelEl), value: textOf(pp.valueEl),
+          tagText: pp.tagText || '', tagIcon: pp.tagIcon || '',
+          tagFill: pp.tagFill || null, tagOpacity: pp.tagOpacity ?? 1, tagBorder: pp.tagBorder || null, tagRadius: pp.tagRadius || 0,
+          tagW: pp.tagW || 0, tagH: pp.tagH || 0, tagGap: pp.tagGap, tagPadLeft: pp.tagPadLeft,
+          tagPadRight: pp.tagPadRight, tagIconGap: pp.tagIconGap, tagIconW: pp.tagIconW, tagIconH: pp.tagIconH,
+          tagTextColor: pp.tagTextColor, tagFontSize: pp.tagFontSize,
           labelColor: ts(pp.labelEl).color, labelFontSize: ts(pp.labelEl).fontSize,
           labelFontWeight: ts(pp.labelEl).fontWeight,
           labelX: Math.round(rect(pp.labelEl).x || 0), labelW: Math.round(rect(pp.labelEl).width || 0),
@@ -3332,10 +4232,13 @@ export function extractSemantics(spec, cardIndex = 0, opts = {}) {
         descFontWeight: descEl ? ts(descEl).fontWeight : undefined,
         descHeight: descEl ? (rect(descEl).height || 0) : 0,
         descY: descEl ? (rect(descEl).y || 0) : undefined,
+        descX: descEl ? (rect(descEl).x || 0) : undefined,
         amountColor: amount ? ts(amount).color : undefined,
         amountFontSize: amount ? ts(amount).fontSize : undefined,
         amountFontWeight: amount ? ts(amount).fontWeight : undefined,
         y,
+        titleX: Math.round(rect(t).x || 0),
+        titleW: Math.round(rect(t).width || 0),
         contentHeight: compositePairs
           ? Math.round(Math.max(...compositePairs.map((pp) => (rect(pp.valueEl).y || 0) + (rect(pp.valueEl).height || 0))) - y)
           : Math.round((rect(descEl).y || 0) + (rect(descEl).height || 0) - y),
@@ -3350,6 +4253,7 @@ export function extractSemantics(spec, cardIndex = 0, opts = {}) {
       }
       if (titleRightEl) itemTextConsumed.add(titleRightEl)
       if (descEl) itemTextConsumed.add(descEl)
+      if (descRightEl) itemTextConsumed.add(descRightEl)
       if (suffixEl) itemTextConsumed.add(suffixEl)
       if (actionTextEl) itemTextConsumed.add(actionTextEl)
       if (amount) itemTextConsumed.add(amount)
@@ -3410,6 +4314,12 @@ export function extractSemantics(spec, cardIndex = 0, opts = {}) {
         let bestDy = Infinity
         for (const item of items) {
           if (item.affordanceEl) continue
+          // 行右大图标内嵌小徽标（如 icon 角上的 ¥ badge）不是行尾 affordance：重叠即跳过，
+          // 否则徽标挤占左栏宽度导致 desc 换行（保险保障行实测）
+          const riR = item.rightIconEl ? rect(item.rightIconEl) : null
+          if (riR && (er.x || 0) >= (riR.x || 0) - 6 && (er.y || 0) >= (riR.y || 0) - 6
+            && (er.x || 0) + (er.width || 0) <= (riR.x || 0) + (riR.width || 0) + 6
+            && (er.y || 0) + (er.height || 0) <= (riR.y || 0) + (riR.height || 0) + 6) continue
           const dy = Math.abs((item.y || 0) - (er.y || 0))
           if (dy <= tol && dy < bestDy) { bestDy = dy; hitItem = item }
         }
@@ -3444,7 +4354,34 @@ export function extractSemantics(spec, cardIndex = 0, opts = {}) {
       if (itemTextConsumed.has(auxTexts[ai].sourceEl)) auxTexts.splice(ai, 1)
     }
   }
+  // 同表模板一致性护栏（纯结构签名，不靠业务词）：签名不同的行并进同一 ListLayout 会让
+  // 模板字段错位（desc 落 title 槽竖排换行、缺键渲染占位文案），且少数行与静态语义块双份渲染。
+  // 保留多数签名行成表；少数签名行退出列表，交还静态语义通道渲染。
+  if (items.length >= 3) {
+    const itemSig = (it) => [
+      it.iconEl ? 1 : 0,
+      (it.amounts && it.amounts.length) ? 1 : 0,
+      it.rowRightEdge != null ? 1 : 0,
+      it.actionShapeEl ? 1 : 0,
+    ].join('')
+    const sigCounts = new Map()
+    for (const it of items) sigCounts.set(itemSig(it), (sigCounts.get(itemSig(it)) || 0) + 1)
+    const majority = [...sigCounts.entries()].sort((a, b) => b[1] - a[1])[0]
+    if (sigCounts.size >= 2 && majority[1] >= 2 && majority[1] < items.length) {
+      const kept = items.filter((it) => itemSig(it) === majority[0])
+      items.splice(0, items.length, ...kept)
+    }
+  }
   const sampleItems = items.slice(0, 3)
+  // 表单行早于列表识别计算：行内 desc/descRight 被列表接管后必须同步回收，
+  // 否则表单通道把同一批标注再渲染一遍（交易行余额行重影）。
+  if (itemTextConsumed.size && Array.isArray(formRows)) {
+    for (let fi = formRows.length - 1; fi >= 0; fi -= 1) {
+      const ownedEls = [formRows[fi].labelEl, formRows[fi].valueEl, ...(formRows[fi].subEls || [])]
+        .filter(Boolean)
+      if (ownedEls.some((el) => itemTextConsumed.has(el))) formRows.splice(fi, 1)
+    }
+  }
   // richBlocks 早于列表识别按全量文本计算：tile/段落区域被列表接管后必须同步回收，
   // 否则富文本段落路径把同一批标注再渲染一遍（v6 产品 tile 重影，duplicate-content ×23）。
   // 双判据：① 碎片被列表消费覆盖率 ≥80%；② 几何落在列表区（与分隔线列表区护栏同族，
@@ -3499,12 +4436,79 @@ export function extractSemantics(spec, cardIndex = 0, opts = {}) {
         && width >= shellCardWidth * 0.8 && height >= 32 && height <= 160
         && (elementRect.y || 0) <= items[index].y
         && items[index].y < (elementRect.y || 0) + height
-        && Math.abs(height - items[index].rowHeight) <= Math.max(4, items[index].rowHeight * 0.12)
+        && (elementRect.y || 0) + height <= items[index].y + items[index].rowHeight + 4
+        && Math.abs(height - items[index].rowHeight) <= Math.max(12, items[index].rowHeight * 0.25)
     }).sort((left, right) => Math.abs((rect(left).height || 0) - items[index].rowHeight)
       - Math.abs((rect(right).height || 0) - items[index].rowHeight))
+    // 有填充的壳优先：同尺寸包裹层（group/symbol）无 fill，选中它行底色/圆角恒丢
+    shellCandidates.sort((left, right) => {
+      const lf = left.style?.fill
+      const rf = right.style?.fill
+      const lNo = !(lf && (lf.color || lf.gradient)) ? 1 : 0
+      const rNo = !(rf && (rf.color || rf.gradient)) ? 1 : 0
+      return lNo - rNo
+    })
     const shell = shellCandidates[0]
-    items[index].rowTop = shell ? (rect(shell).y || 0) : items[index].y
+    // 视觉行壳判定：满宽 + 无圆角 + 无渐变 = 分区背景板（非行壳）。误认领会把
+    // 内边距/底色/分割线全搅乱（我的账户卡实测 padRight 303 把左栏压没、pos 崩 0.33）
+    const shellVisual = !!shell && ((radiusMax(shell.style) || 0) >= 4
+      || !!shell.style?.fill?.gradient
+      || (rect(shell).width || 0) <= ((rect(card).width || shellCardWidth) - 8))
+    items[index].rowTop = shell ? (rect(shell).y || 0)
+      : (items[index].iconEl ? Math.min(items[index].y, rect(items[index].iconEl).y || items[index].y) : items[index].y)
     items[index].shellHeight = shell ? (rect(shell).height || items[index].rowHeight) : items[index].rowHeight
+    // 行壳样式/内边距传给列表模板（emit 读 first.fill/gradient/radius/pad*，此前从未赋值 → 行底色恒丢）
+    if (shell) {
+      const sr2 = rect(shell)
+      items[index].shellEl = shell
+      items[index].shellVisual = shellVisual
+      if (shellVisual) {
+        items[index].fill = shell.style?.fill?.color || null
+        items[index].gradient = shell.style?.fill?.gradient || null
+        items[index].opacity = shell.style?.opacity ?? 1
+        items[index].radius = radiusMax(shell.style)
+        // 行内容真实右沿（全部行文本 + 左右图标 + 操作件）：只按金额/时间右沿会把
+        // 标题行卡的 padRight 算成几百 px 挤垮左栏
+        const contentRight = items[index].rowContentRight || ((sr2.x || 0) + (sr2.width || 0) - 16)
+        items[index].padLeft = Math.max(0, Math.round((items[index].rowLeftEdge || 0) - (sr2.x || 0)))
+        items[index].padRight = Math.min(Math.max(0, Math.round(((sr2.x || 0) + (sr2.width || 0)) - contentRight)), Math.round((sr2.width || 0) / 2))
+        items[index].padTop = Math.max(0, Math.round(((sr2.height || 0) - (items[index].contentHeight || 0)) / 2))
+      }
+      items[index].height = Math.round(sr2.height || items[index].rowHeight)
+    } else {
+      items[index].height = items[index].shellHeight || items[index].rowHeight
+      items[index].padLeft = 16
+      items[index].padRight = 16
+      items[index].padTop = 8
+    }
+  // 进度条归属列表行：进度条 y 落在列表行带内时挂到该列表项（逐行渲染），
+  // 否则作为独立语义块渲染（insertSemantic 全堆在卡底/同一 y 位→重叠）。
+  const _listBarEls = new Set()
+  if (items.length && progressBars.length) {
+    for (const bar of progressBars) {
+      const by = bar.y ?? 0
+      const matched = items.find((item) => {
+        const top = item.rowTop ?? item.y ?? 0
+        const bottom = top + (item.shellHeight || item.rowHeight || item.height || 0)
+        return by >= top && by < bottom
+      })
+      if (matched) {
+        if (!matched.bars) matched.bars = []
+        matched.bars.push(bar)
+        if (bar.trackEl) _listBarEls.add(bar.trackEl)
+        for (const el of (bar.segmentEls || [])) _listBarEls.add(el)
+      }
+    }
+    if (_listBarEls.size) {
+      for (let bi = progressBars.length - 1; bi >= 0; bi -= 1) {
+        const bar = progressBars[bi]
+        if ((bar.trackEl && _listBarEls.has(bar.trackEl))
+          || (bar.segmentEls || []).some((el) => _listBarEls.has(el))) {
+          progressBars.splice(bi, 1)
+        }
+      }
+    }
+  }
   }
 
   // —— 查看更多 ——
@@ -3638,6 +4642,9 @@ export function extractSemantics(spec, cardIndex = 0, opts = {}) {
     if (!raw) continue
     const verb = (raw.match(verbRe) || [''])[0] || ''
     const core = verb ? raw.replace(verbRe, '').trim() : raw
+    // 日期区间/点分单日（2025.11.28-2025.12.04）：整串是单一展示期间，splitValueTokens 会把它
+    // 切成「2025.11」等数字段误绑金额表达式（渲染出千分号）。保持字面量。
+    if (/^\d{4}[-./]\d{1,2}[-./]\d{1,2}(\s*[-~—至]\s*\d{4}[-./]\d{1,2}[-./]\d{1,2})?$/.test(core)) continue
     const segs = splitValueTokens(core)
     // 绑定条件（满足其一）：
     //  ① 含「强值信号」(phone/cardNumber/amount/code/date) —— 实体行（张三 13800138000）；
@@ -3805,6 +4812,9 @@ export function extractSemantics(spec, cardIndex = 0, opts = {}) {
     const bg = (bgRaw || '').toUpperCase()
     if (!bg || NEUTRAL_COLORS.has(bg)) continue
     const matchingText = texts.find((t) => {
+      // 数值文本（汇总区金额）不与下划/高亮带配对：比例条(h=4)曾被误认为金额层下划，
+      // 吞掉汇总区次列值（300.00 丢失）。
+      if (isAmountish(textOf(t))) return false
       const tr = rect(t)
       const tBottom = (tr.y || 0) + (tr.height || 0)
      const gap = (sr.y || 0) - tBottom
@@ -3844,13 +4854,215 @@ export function extractSemantics(spec, cardIndex = 0, opts = {}) {
     midCluster?.logoSlice,
     primaryAmount?.iconSlice,
   ].filter(Boolean))
-  const orphanSlices = slices.filter((s) => {
-    if (orphanConsumed.has(s)) return false
-    const sr = rect(s)
-    const w = sr.width || 0, h = sr.height || 0
-    return w >= 60 && h >= 24 && h <= 140 && w <= (rect(card).width || 375) + 40
+const orphanSlices = slices.filter((s) => {
+  if (orphanConsumed.has(s)) return false
+  if (floatDecos.includes(s)) return false
+  const sr = rect(s)
+  const w = sr.width || 0, h = sr.height || 0
+  const cRf = rect(card)
+  // 浮动装饰切片（卡头月亮/吉祥物光晕等）：竖直方向与文本带重叠、水平贴卡缘 →
+  // 不能占流式行高（否则整卡内容被顶下一个装饰高度），改由绝对定位叠层渲染。
+  const overlapsText = texts.some((t) => {
+    const tr = rect(t)
+    const ov = Math.min((sr.y || 0) + h, (tr.y || 0) + (tr.height || 0)) - Math.max(sr.y || 0, tr.y || 0)
+    return ov >= h * 0.2 && h >= (tr.height || 0) * 2.2
+  })
+  const edgeAnchored = ((sr.x || 0) + w) >= ((cRf.x || 0) + (cRf.width || 0)) - 24
+  if (overlapsText && edgeAnchored && w <= (cRf.width || 375) * 0.5
+    && !buttonShapes.some((b) => coverRatio(s, b) > 0.5)
+    && !panelCandidates.some((p) => coverRatio(s, p) > 0.5)) {
+    floatDecos.push(s)
+    return false
+  }
+  return w >= 60 && h >= 24 && h <= 140 && w <= (rect(card).width || 375) + 40
+})
+
+  // —— 背景壳层（section/行/面板壳）：带圆角填充的中型 shape，供列表行样式、表单行包裹、段落底色认领 ——
+  // 此前卡宽壳被 isBg 排除、行壳因「壳高 vs 行 pitch 差 12px」超容差漏配，列表行/面板/段落全部丢底色。
+  const shellLayers = (card.elements || []).filter((e) => {
+    if (e.type !== 'shape') return false
+    const f = e.style?.fill
+    if (!f || (!f.color && !f.gradient)) return false
+    if (radiusMax(e.style) < 4) return false
+    const r = rect(e)
+    const cR = rect(card)
+    const w = r.width || 0
+    const h = r.height || 0
+    if (w < (cR.width || 0) * 0.4 || w > (cR.width || 0) + 4) return false
+    if (h < 40 || h > (cR.height || 0) * 0.6) return false
+    return true
+  }).map((e) => ({
+    el: e,
+    x: rect(e).x || 0, y: rect(e).y || 0, width: rect(e).width || 0, height: rect(e).height || 0,
+    fill: e.style?.fill?.color || null,
+    gradient: e.style?.fill?.gradient || null,
+    radius: radiusMax(e.style),
+    opacity: e.style?.opacity ?? 1,
+  }))
+
+  // —— 薄壳通道（行级描边/浅填充窄矩形）——
+  // 容器级壳由 panelRows / gradientPanels 认领，壳层背景由 shellLayers 认领（要求 h>=40 且 radius>=4）；
+  // 行级薄壳（h 18..48、radius<=6、带描边或填充）两头落空 → 描边与底色整体丢失：
+  // 表格行只剩裸文本，无文本的分段壳被当孤立媒体块渲染成「缺素材」占位图。
+  const thinShellStyle = (shape) => {
+    const sr = rect(shape)
+    const border = shape.style?.border || {}
+    const fill = shape.style?.fill || {}
+    return {
+      shapeEl: shape,
+      x: sr.x || 0, y: sr.y || 0, width: sr.width || 0, height: sr.height || 0,
+      fill: fill.color || null,
+      gradient: fill.gradient || null,
+      opacity: shape.style?.opacity ?? 1,
+      radius: radiusMax(shape.style),
+      isBorder: !!border.isBorder,
+      borderWidth: Number(border.width) || 0,
+      borderColor: border.color || null,
+    }
+  }
+  const thinInside = (element, shape) => {
+    const er = rect(element)
+    const sr = rect(shape)
+    return (er.x || 0) >= (sr.x || 0) - 2 && (er.y || 0) >= (sr.y || 0) - 2
+      && ((er.x || 0) + (er.width || 0)) <= ((sr.x || 0) + (sr.width || 0)) + 2
+      && ((er.y || 0) + (er.height || 0)) <= ((sr.y || 0) + (sr.height || 0)) + 2
+  }
+  const thinShellShapes = (card.elements || []).filter((element) => {
+    if (element.type !== 'shape') return false
+    const sr = rect(element)
+    const cR = rect(card)
+    const w = sr.width || 0
+    const h = sr.height || 0
+    if (h < 18 || h > 48) return false
+    if (w < (cR.width || 0) * 0.2 || w > (cR.width || 0) + 4) return false
+    if (radiusMax(element.style) > 6) return false
+    const border = element.style?.border || {}
+    const fill = element.style?.fill || {}
+    if (!border.isBorder && !fill.color && !fill.gradient) return false
+    if (panelShapes.includes(element) || optionShapeSet.has(element)) return false
+    if (gradientPanels.some((gp) => gp.shapeEl === element)) return false
+    // 与卡身同色且无描边/渐变 = 卡底延续补片，不是行壳
+    if (!border.isBorder && !fill.gradient
+      && String(fill.color || '').toUpperCase() === String(card.cardFill || '').toUpperCase()) return false
+    return true
   })
+  const thinShellRows = []
+  const thinShellStrips = []
+  {
+    const freeShells = []
+    for (const shape of thinShellShapes) {
+      const inner = texts.filter((t) => thinInside(t, shape))
+      if (inner.length) thinShellRows.push({ ...thinShellStyle(shape), texts: inner })
+      else freeShells.push(shape)
+    }
+    // 无文本薄壳按「同 y 带 + 首尾相接（间隙 <=8）」聚成分段横条（时间轴/进度分段）；
+    // 单壳不成条，保持原孤立媒体块兜底，>=2 段才按几何分段还原。
+    const ordered = freeShells.slice().sort((a, b) =>
+      (rect(a).y || 0) - (rect(b).y || 0) || (rect(a).x || 0) - (rect(b).x || 0))
+    const claimed = new Set()
+    for (const shape of ordered) {
+      if (claimed.has(shape)) continue
+      const sr = rect(shape)
+      const members = [shape]
+      claimed.add(shape)
+      let cursor = (sr.x || 0) + (sr.width || 0)
+      for (const other of ordered) {
+        if (claimed.has(other)) continue
+        const or = rect(other)
+        if (Math.abs((or.y || 0) - (sr.y || 0)) > 4) continue
+        if ((or.x || 0) < cursor - 2 || (or.x || 0) - cursor > 8) continue
+        members.push(other)
+        claimed.add(other)
+        cursor = (or.x || 0) + (or.width || 0)
+      }
+      if (members.length < 2) continue
+      members.sort((a, b) => (rect(a).x || 0) - (rect(b).x || 0))
+      const boxes = members.map(thinShellStyle)
+      const left = Math.min(...boxes.map((box) => box.x))
+      const right = Math.max(...boxes.map((box) => box.x + box.width))
+      thinShellStrips.push({
+        x: left,
+        y: Math.min(...boxes.map((box) => box.y)),
+        width: right - left,
+        height: Math.max(...boxes.map((box) => box.height)),
+        boxes,
+      })
+    }
+  }
+  // 分段横条认领的壳不再作孤立媒体块（否则同一几何渲染成「缺素材」占位图）
+  const thinStripEls = new Set(thinShellStrips.flatMap((strip) => strip.boxes.map((box) => box.shapeEl)))
+  for (let index = isolatedBlocks.length - 1; index >= 0; index -= 1) {
+    if (thinStripEls.has(isolatedBlocks[index].element)) isolatedBlocks.splice(index, 1)
+  }
+
+  // —— 壳内右列文本（两列拓扑）——
+  // 内容壳（面板壳/渐变壳）右半区独立成列的文本：>=2 个文本左边界落在壳宽 45% 之后且互相成列
+  // （x 差 <=8、分属不同行），壳内左侧另有 >=2 个文本 → 该壳是「左列 + 右列」拓扑而非竖排单列。
+  // 此前右列文本或被压成竖排堆叠（panelRows 路径），或整段落进主视觉死区不渲染（渐变壳路径）。
+  const shellButtonTextEls = new Set(buttons.map((button) => button.sourceEl).filter(Boolean))
+  const shellRightColumns = []
+  for (const shape of [...new Set([...panelShapes, ...gradientPanels.map((gp) => gp.shapeEl)])]) {
+    const sr = rect(shape)
+    const inner = texts.filter((t) => thinInside(t, shape) && !shellButtonTextEls.has(t))
+    if (inner.length < 4) continue
+    const topY = Math.min(...inner.map((t) => rect(t).y || 0))
+    // 标题行（与壳内首个文本同 band）整体保留为整行：名称 + 紧邻短标签不是右列成员
+    const headerEls = inner.filter((t) => Math.abs((rect(t).y || 0) - topY) <= 8)
+    const headerSet = new Set(headerEls)
+    const splitX = (sr.x || 0) + (sr.width || 0) * 0.45
+    const columns = []
+    for (const t of inner.filter((item) => !headerSet.has(item) && (rect(item).x || 0) >= splitX)
+      .slice().sort((a, b) => (rect(a).x || 0) - (rect(b).x || 0))) {
+      const tx = rect(t).x || 0
+      const column = columns.find((c) => Math.abs(c.x - tx) <= 8)
+      if (column) column.items.push(t)
+      else columns.push({ x: tx, items: [t] })
+    }
+    const best = columns
+      .filter((column) => column.items.length >= 2
+        && new Set(column.items.map((t) => Math.round(rect(t).y || 0))).size >= 2)
+      .sort((a, b) => b.items.length - a.items.length)[0]
+    if (!best) continue
+    const bestSet = new Set(best.items)
+    const left = inner.filter((t) => !headerSet.has(t) && !bestSet.has(t) && (rect(t).x || 0) < splitX)
+    if (left.length < 2) continue
+    shellRightColumns.push({
+      shapeEl: shape,
+      x: sr.x || 0, y: sr.y || 0, width: sr.width || 0, height: sr.height || 0,
+      splitX: best.x,
+      headerEls,
+      texts: best.items.slice().sort((a, b) => (rect(a).y || 0) - (rect(b).y || 0)).map((t) => ({
+        text: textOf(t),
+        color: ts(t).color,
+        fontSize: ts(t).fontSize,
+        fontWeight: ts(t).fontWeight,
+        align: ts(t).textAlign,
+        sourceEl: t,
+        x: rect(t).x || 0, y: rect(t).y || 0,
+        width: rect(t).width || 0, height: rect(t).height || 0,
+      })),
+    })
+  }
+  const shellRightColEls = new Set(shellRightColumns.flatMap((column) => column.texts.map((t) => t.sourceEl)))
+  // 右列文本改由两列拓扑通道渲染：从辅助文案 / 副金额对中回收，避免竖排重影或甩到壳外
+  for (let index = auxTexts.length - 1; index >= 0; index -= 1) {
+    if (shellRightColEls.has(auxTexts[index].sourceEl)) auxTexts.splice(index, 1)
+  }
+ for (let index = subAmounts.length - 1; index >= 0; index -= 1) {
+   const item = subAmounts[index]
+   if (shellRightColEls.has(item.labelEl) || shellRightColEls.has(item.valueEl)) subAmounts.splice(index, 1)
+ }
+ // 右列文本 / 面板成员文本不得经 postAmountTexts 双份渲染（面板两列拓扑已整块接管）。
+ // postAmountTexts 早于 shellRightColumns 计算，此前只从 auxTexts 回收——
+ // listTitle 为 null 时 postAmountTexts 上界=∞，面板内文本漏入独立文本行→重影。
+ for (let index = postAmountTexts.length - 1; index >= 0; index -= 1) {
+   if (shellRightColEls.has(postAmountTexts[index].sourceEl)
+     || panelTextConsumed.has(postAmountTexts[index].sourceEl)) postAmountTexts.splice(index, 1)
+ }
 
+// 选项组文本字符串集：midCluster 与选项组命中同一批文本时（图标+标签 chip 行），
+// midCluster 再渲染一遍即重影（chip 行双份）→ 选项组优先，midCluster 让位。
+const optionTextStrings = new Set([...optionTextSet].map((t) => textOf(t)))
  return {
    canvas: spec.size || { width: 375, height: 812 },
     artboardType: spec.artboardType || 'card',
@@ -3858,7 +5070,8 @@ export function extractSemantics(spec, cardIndex = 0, opts = {}) {
     cardFill: card.cardFill || null,
     cardRadius: (card.mask && card.mask.radius && card.mask.radius[0]) || null,
     tabs, buttons, optionGroups, primaryAmount, subAmounts, auxTexts, postAmountTexts, tabY, badgeRows,
-    listTitle, sampleItems, allItems, viewMore, collapseBtn, countdown, topDecoration, formRows, midCluster: midCluster && (midCluster.items || []).length >= 2 ? midCluster : null, bindings,
+    topTintBlobs,
+    listTitle, sampleItems, allItems, viewMore, collapseBtn, countdown, topDecoration, formRows, midCluster: midCluster && (midCluster.items || []).length >= 2 && !(midCluster.items || []).every((it) => optionTextStrings.has(it.text)) ? midCluster : null, bindings,
     enumStatMap, // 枚举统计行预扫描结果（raw 文本 → {items, sep}）
     cardBackgroundGradient: fullCardGradientShape?.style?.fill?.gradient || null,
     symbolMediaRows,
@@ -3868,9 +5081,12 @@ export function extractSemantics(spec, cardIndex = 0, opts = {}) {
    panelRows,
     titleUnderlines,
    subAmountPanel,
-    orphanSlices,
+    orphanSlices, floatDecos,
+    thinShellRows, thinShellStrips, shellRightColumns,
     gradientPanels, panelGroup,
     richBlocks,
+    chartClusters,
+    shellLayers,
    contentBounds: (() => {
      const cardWidth = rect(card).width || 0
      const cardHeight = rect(card).height || 0
@@ -4224,7 +5440,20 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
   if (sem.cardBackgroundGradient) {
     ensureStyleGroup(card, 'background')
     setStyleChild(card, 'background', 'backgroundType', '03')
-    setStyleChild(card, 'background', 'backgroundGradient', sem.cardBackgroundGradient)
+    // spec 椭圆优先于采样硬停色带：硬停带的带色本就采样自椭圆投射，带底却留矩形硬边
+    // （设计稿是椭圆柔边衰减）。有椭圆标注时改逐颗 radial-gradient 叠层、以采样带身色
+    // 为底，硬边消失且带顶色温与设计稿逐位对齐。
+    const tintBlobs = sem.topTintBlobs || []
+    if (tintBlobs.length) {
+      const bandHexes = sem.cardBackgroundGradient.match(/#[0-9A-Fa-f]{6}/g) || []
+      const bodyC = hexToRgba(bandHexes[bandHexes.length - 1] || sem.cardFill || T.color('cardBg'))
+      const blobLayers = [...tintBlobs].reverse().map((b) =>
+        `radial-gradient(${b.rx}px ${b.ry}px at ${b.cx}px ${b.cy}px, ${b.rgba} 0%, ${b.rgba} 99%, rgba(0, 0, 0, 0) 100%)`)
+      blobLayers.push(`linear-gradient(to bottom, ${bodyC} 0%, ${bodyC} 100%)`)
+      setStyleChild(card, 'background', 'backgroundGradient', blobLayers.join(', '))
+    } else {
+      setStyleChild(card, 'background', 'backgroundGradient', sem.cardBackgroundGradient)
+    }
   }
   // 高度必须由内容撑开：设计稿只约束卡片宽度与纵向节奏，
   // 写死根高度会在语义块估算偏高时裁切真实内容。
@@ -4292,8 +5521,16 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
       const bodyC = hexToRgba(sem.cardFill || T.color('cardBg'))
       ensureStyleGroup(card, 'background')
       setStyleChild(card, 'background', 'backgroundType', '03')
-      setStyleChild(card, 'background', 'backgroundGradient',
-        `linear-gradient(to bottom, ${bandC} 0%, ${bandC} ${pct}%, ${bodyC} ${pct}%, ${bodyC} 100%)`)
+      if ((sem.topTintBlobs || []).length) {
+        // 椭圆逐颗 radial-gradient（CSS 首层在最上 → spec 序反排），末层补卡身底色
+        const layers = [...sem.topTintBlobs].reverse().map((b) =>
+          `radial-gradient(${b.rx}px ${b.ry}px at ${b.cx}px ${b.cy}px, ${b.rgba} 0%, ${b.rgba} 99%, rgba(0, 0, 0, 0) 100%)`)
+        layers.push(`linear-gradient(to bottom, ${bodyC} 0%, ${bodyC} 100%)`)
+        setStyleChild(card, 'background', 'backgroundGradient', layers.join(', '))
+      } else {
+        setStyleChild(card, 'background', 'backgroundGradient',
+          `linear-gradient(to bottom, ${bandC} 0%, ${bandC} ${pct}%, ${bodyC} ${pct}%, ${bodyC} 100%)`)
+      }
     } else if (td.solidColor) {
       // 纯色顶带（弥散背景的设计稿采样近似，无切片素材时的纯色兜底）：
       // 固定高度 + 纯色背景；内容归属沿用几何 y 边界（y < 带底沿的内容进带内容器）。
@@ -4338,6 +5575,28 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
   const buildCard = sem.cardRect || {}
   const buildCardLeft = buildCard.x || 0
   const buildCardRight = buildCardLeft + (buildCard.width || sem.canvas?.width || 375)
+  // 背景壳认领：取包含给定 rect 中心的最内层壳（面积最小者）
+  const shellForRect = (r) => {
+    const cx = (r.x || 0) + (r.width || 0) / 2
+    const cy = (r.y || 0) + (r.height || 0) / 2
+    const hits = (sem.shellLayers || []).filter((sh) =>
+      cx >= sh.x && cx <= sh.x + sh.width && cy >= sh.y && cy <= sh.y + sh.height)
+    if (!hits.length) return null
+    return hits.sort((a, b) => (a.width * a.height) - (b.width * b.height))[0]
+  }
+  const applyShellBackground = (node, sh) => {
+    ensureStyleGroup(node, 'background')
+    ensureStyleGroup(node, 'borderRadius')
+    if (sh.gradient) {
+      setStyleChild(node, 'background', 'backgroundType', '03')
+      setStyleChild(node, 'background', 'backgroundGradient', gradientWithOpacity(sh.gradient, sh.opacity ?? 1))
+    } else {
+      setStyleChild(node, 'background', 'backgroundType', '01')
+      setStyleChild(node, 'background', 'backgroundColor', hexToRgba(sh.fill))
+    }
+    setStyleChild(node, 'borderRadius', 'borderRadiusType', '0')
+    setStyleChild(node, 'borderRadius', 'borderRadius', String(Math.round(sh.radius || 8)))
+  }
   const semanticBounds = []
   const addSemanticBound = (top, bottom, container = false) => {
     if (Number.isFinite(Number(top)) && Number.isFinite(Number(bottom)) && bottom > top) {
@@ -4351,7 +5610,22 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
     // 与 textFromSpec 实际盒高严格同款（estimatedTextBoxHeight）：膨胀系数（fs×1.5）
     // 会高估盒高 1-3px/行，把下一元素顶距压小、整卡内容逐行累积上移（实测面板/头部行 -3~-5px）。
     y + estimatedTextBoxHeight(height, fontSize)
-  for (const aux of sem.auxTexts || []) addSemanticBound(aux.y, textBoundBottom(aux.y, aux.height, aux.fontSize))
+  // 图表矢量簇占位边界：Canvas 块是流内真实高度，登记后下文顶距才不会从更早的底沿起算
+  for (const cluster of sem.chartClusters || []) {
+    addSemanticBound(cluster.y, cluster.y + cluster.height, true)
+  }
+  for (const aux of sem.auxTexts || []) {
+    addSemanticBound(aux.y, textBoundBottom(aux.y, aux.height, aux.fontSize))
+    // 主视觉领行（文本左侧大切片）：流式行高取主视觉高度；主视觉溢出卡顶时流式
+    // 只能从卡顶起排 → 登记实际流式占位（卡顶..卡顶+主视觉高），下方行顶距才不重叠。
+    const leadR = aux.sliceEl ? rect(aux.sliceEl) : null
+    if (leadR && (leadR.height || 0) > (aux.height || 0) * 1.6) {
+      // 与渲染端绝对定位带同口径：带顶=卡顶与(主视觉/文本)顶较大者，带底=子元素底沿较大者
+      const bandTop = Math.max((sem.cardRect && sem.cardRect.y) || 0, Math.min(leadR.y || 0, aux.y || 0))
+      const bandBottom = Math.max((leadR.y || 0) + (leadR.height || 0), (aux.y || 0) + (aux.height || 0))
+      addSemanticBound(bandTop, bandBottom)
+    }
+  }
   // 序号徽章行：壳高为边界（内容多行时以内容底沿为准）
   for (const badgeRow of sem.badgeRows || []) {
     const shellR = rect(badgeRow.shellEl)
@@ -4434,6 +5708,7 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
       addSemanticBound(sem.topDecoration.y, (sem.topDecoration.y || 0) + (sem.topDecoration.height || 0), true)
     }
   }
+  let mcValueRowHandlesPrimary = false
   if (sem.midCluster) {
     addSemanticBound(sem.midCluster.y, sem.midCluster.y + Math.max(
       ...sem.midCluster.items.map((item) => item.height || (item.fontSize || 14) * 1.4),
@@ -4453,6 +5728,47 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
   for (const block of sem.isolatedBlocks || []) {
     addSemanticBound(block.y, block.y + (block.height || rect(block.element).height || 0))
   }
+  for (const strip of sem.thinShellStrips || []) {
+    addSemanticBound(strip.y, (strip.y || 0) + (strip.height || 0))
+  }
+  // 行级薄壳（表格行壳 / 条目壳）：壳高是几何真值，壳底沿比内部文本盒低 2-4px；
+  // 只登记文本边界会让后续行顶距多算这几像素，逐行累积成整卡竖向漂移。
+  for (const shell of sem.thinShellRows || []) {
+    addSemanticBound(shell.y, (shell.y || 0) + (shell.height || 0))
+  }
+  // allTexts 条目是归一化形状（顶层 fontSize/color + sourceEl 指回 spec 元素）：几何/样式双源回退
+  const anyRect = (t) => (t && t.x != null ? { x: t.x, y: t.y, width: t.width, height: t.height } : rect(t && t.sourceEl ? t.sourceEl : t))
+  const anyFs = (t) => (t && t.fontSize) || ts(t).fontSize || ts(t && t.sourceEl).fontSize
+  const anyColor = (t) => (t && t.color) || ts(t).color || ts(t && t.sourceEl).color
+  // 行尾随切片（链接箭头/信息图标）：文本右邻小图标随行渲染并消费，避免孤立媒体兜底再占一行
+  const consumedTrailSlices = new Set()
+  const linkConsumed = new Set()
+  const appendInlineTrailSlice = (row, pat) => {
+    const pr = { x: pat.x || 0, y: pat.y || 0, width: pat.width || 0, height: pat.height || (pat.fontSize || 14) * 1.4 }
+    const centerY = pr.y + pr.height / 2
+    const cand = (sem.slices || []).find((sl) => {
+      if (consumedTrailSlices.has(sl)) return false
+      const sr = rect(sl)
+      const w = sr.width || 0
+      const h = sr.height || 0
+      return w >= 8 && w <= 32 && h >= 8 && h <= 32
+        && (sr.x || 0) >= pr.x + pr.width - 6 && (sr.x || 0) <= pr.x + pr.width + 56
+        && Math.abs(((sr.y || 0) + h / 2) - centerY) <= Math.max(12, pr.height / 2 + 6)
+    })
+    if (!cand) return null
+    consumedTrailSlices.add(cand)
+    sem.slices = (sem.slices || []).filter((sl) => sl !== cand)
+    sem.isolatedBlocks = (sem.isolatedBlocks || []).filter((bl) => bl.element !== cand)
+    const img = imageOrPlaceholder(cand, sem.slicesExports)
+    if (!img) return null
+    const cr = rect(cand)
+    setStyleChild(img, 'rect', 'width', String(Math.round(cr.width || 16)))
+    setStyleChild(img, 'rect', 'height', String(Math.round(cr.height || 16)))
+    ensureStyleGroup(row, 'flex')
+    setStyleChild(row, 'flex', 'gap', String(Math.max(0, Math.round((cr.x || 0) - (pr.x + pr.width)))))
+    row.slots[0].components.push(img)
+    return img
+  }
   const previousSemanticBottom = (y) => {
     // 包含 y 的边界按 y 截断：行高按 fs×1.5 膨胀的边界会盖过下一行顶沿，
     // 只认 bottom<=y 会漏掉它、把间距算成跨两行（如"最高可贷金额"顶距被算成 44px 而非 0）。
@@ -4493,6 +5809,14 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
         2 * T.pad('section'))
     : (buildCard.y || 0)
 
+  // 标题下划线查找表：text content → underline info。提前到 tabs 块之前构建，
+  // 卡头 tabs 路径与下方 aux/band/listTitle 包裹逻辑共用同一张表。
+  const underlineByText = new Map()
+  for (const ul of sem.titleUnderlines || []) {
+    underlineByText.set(ul.text, ul)
+  }
+  const headTabLabels = []
+
   // —— 1. Tab 头（Row，space-around）——
   if (sem.tabs.length >= 2) {
     const tabBar = container('Row', { width: '100%', justify: 'flex-start', align: 'center', padding: T.pad('root') })
@@ -4546,6 +5870,7 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
         setStyleChild(lbl, 'other', 'opacity', '0')
       }
       item.slots[0].components.push(lbl)
+      headTabLabels.push({ col: item, idx: item.slots[0].components.length - 1, value: tab.value, fontSize: tab.fontSize })
       // 多 Tab 时绑定 activeTab 变量
       if (sem.tabs.length > 1) {
         const tabVar = 'activeTab'
@@ -4611,15 +5936,23 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
         tailBlock.consumedByTabs = true
       }
     }
+    // 卡头 tabs 的标题下划线：设计稿常用半透明色带垫在标题字下（highlighter 效果），
+    // tabs 路径此前不查 titleUnderlines → 色带整条丢失，像素热区集中在标题带。
+    // 包裹必须放在首/末列对齐调整之后：setAlign 与首列 flex 调整按 components[0]
+    // 取节点，提前包裹会打到 AbsoluteLayout 壳上，多余 flex 键让渲染器走 flex 流。
+    if (!segmented) {
+      for (const entry of headTabLabels) {
+        const ul = underlineByText.get(entry.value)
+        if (!ul) continue
+        entry.col.slots[0].components[entry.idx] = wrapTitleWithUnderline(
+          entry.col.slots[0].components[entry.idx],
+          { text: entry.value, fontSize: ul.textEl?.textStyle?.fontSize || entry.fontSize || 16 })
+      }
+    }
     card.slots[0].components.push(tabBar)
   }
 
  const groupedAuxElements = new Set()
-  // 标题下划线查找表：text content → underline info
-  const underlineByText = new Map()
-  for (const ul of sem.titleUnderlines || []) {
-    underlineByText.set(ul.text, ul)
-  }
   // 将标题文本 + 下划线包裹为 AbsoluteLayout（禁止负 marginTop）
  function wrapTitleWithUnderline(textNode, aux) {
    const ul = underlineByText.get(aux.text)
@@ -4790,6 +6123,13 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
     const sr = shell ? rect(shell) : null
     return Math.max((aux.x || 0) + (aux.width || 0), sr ? (sr.x || 0) + (sr.width || 0) : -Infinity)
   }
+  // 行内标记切片（时间轴上下小箭头、行内小徽标等）：竖直落在某成组文本行带内、
+  // 水平落在行跨度内的未消费小切片，随该行一起渲染。<20px 的切片会被孤立媒体通道
+  // 的尺寸下限滤掉、又无文本配对，此前整块静默丢失（设计稿可见标记不渲染）。
+  const rowInlineSlices = new Set()
+  const itemLeft = (it) => (it.aux ? (it.aux.x || 0) : (rect(it.slice).x || 0))
+  const itemRight = (it) => (it.aux ? auxVisualRight(it.aux)
+    : (rect(it.slice).x || 0) + (rect(it.slice).width || 0))
   // 已插入宿主的成组 aux 行登记：供「标题+右侧按钮跨行块」重构时拔出吸收（见下方单行循环）。
   const auxRowEntries = []
   for (let index = 0; index < sem.auxTexts.length;) {
@@ -4812,8 +6152,16 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
     if (group.length < 2) continue
     if (group.some((aux) => sem.bindings.multiToken?.[aux.text.trim()])) continue
     if (group.some((aux) => aux._consumed)) continue
+    // 薄壳行（表格行壳 / 条目壳）：整组文本落在同一行级薄壳内 → 壳的底色/描边/圆角由行承载。
+    // 外层行只负责把壳定位到 spec 壳边沿（左右 padding = 壳内缩），壳内文本内缩交给内层行，
+    // 否则背景只染到文本宽、描边框不住整行（此前薄壳两头落空，表格行只剩裸文本）。
+    const thinShell = (sem.thinShellRows || []).find((shell) => shell.texts.length === group.length
+      && group.every((aux) => shell.texts.includes(aux.sourceEl))) || null
     const host = hostFor(group[0].y)
-    const topPadding = semanticTopGap(group[0].y) ?? Math.max(0, Math.round(group[0].y - (previousAuxBottom ?? buildCard.y)))
+    // 顶距锚点用壳顶沿而非文本顶沿：行级薄壳比内部文本高（文本垂直居中留白 2-4px），
+    // 以文本 y 起算会让壳整体下移，逐行累积成整卡竖向漂移。
+    const topAnchorY = thinShell ? (thinShell.y ?? group[0].y) : group[0].y
+    const topPadding = semanticTopGap(topAnchorY) ?? Math.max(0, Math.round(topAnchorY - (previousAuxBottom ?? buildCard.y)))
     const left = Math.min(...group.map((aux) => Number.isFinite(auxVisualLeft(aux)) ? auxVisualLeft(aux) : buildCardLeft))
     const right = Math.max(...group.map((aux) => auxVisualRight(aux)))
     const leftPadding = Math.max(0, Math.round(left - buildCardLeft))
@@ -4822,33 +6170,58 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
     // 外层 space-between 只负责簇间分布——3+ 子项直接平铺会被 space-between 打散
     // （如「我的账单 (元) … 日期」变成 标题/后缀/日期 三点分散）。
     const sortedGroup = group.sort((a, b) => (a.x || 0) - (b.x || 0))
+    const bandTop = Math.min(...group.map((a) => a.y || 0))
+    const bandBottom = Math.max(...group.map((a) =>
+      (a.y || 0) + Math.max(a.height || 0, (a.fontSize || 14) * 1.4)))
+    const spanLeft = Math.min(...group.map((a) => a.x || 0))
+    const spanRight = Math.max(...group.map((a) => auxVisualRight(a)))
+    const rowSlices = (sem.slices || []).filter((sl) => {
+      if (rowInlineSlices.has(sl)) return false
+      const sr = rect(sl)
+      const w = sr.width || 0
+      const h = sr.height || 0
+      if (!w || !h || w > 32 || h > 32) return false
+      if (!imageFromSlice(sl, sem.slicesExports)) return false
+      const cy = (sr.y || 0) + h / 2
+      if (cy < bandTop - 6 || cy > bandBottom + 6) return false
+      if ((sr.x || 0) < spanLeft - 8 || (sr.x || 0) + w > spanRight + 8) return false
+      return true
+    })
+    for (const sl of rowSlices) rowInlineSlices.add(sl)
+    const rowItems = [
+      ...sortedGroup.map((aux) => ({ aux })),
+      ...rowSlices.map((slice) => ({ slice })),
+    ].sort((p, q) => itemLeft(p) - itemLeft(q))
     const clusters = []
-    for (const aux of sortedGroup) {
+    for (const item of rowItems) {
       const prev = clusters[clusters.length - 1]
-      const prevRight = prev ? Math.max(...prev.map((a) => auxVisualRight(a))) : null
-      if (prev && (aux.x || 0) - prevRight <= 12) prev.push(aux)
-      else clusters.push([aux])
+      const prevRight = prev ? Math.max(...prev.map((it) => itemRight(it))) : null
+      if (prev && itemLeft(item) - prevRight <= 12) prev.push(item)
+      else clusters.push([item])
     }
     // 单簇行没有簇间分布对象：space-between 退化为 flex-start，此时右 padding 不参与
     // 定位却会把内容盒算窄（壳+文本被挤压裁切）——单簇行去掉右 padding、直接左对齐。
     const singleCluster = clusters.length === 1
+    // 薄壳行（表格行壳 / 条目壳）：整组文本落在同一行级薄壳内 → 壳的底色/描边/圆角由行承载。
+    // 外层行只负责把壳定位到 spec 壳边沿（左右 padding = 壳内缩），壳内文本内缩交给内层行，
+    // 否则背景只染到文本宽、描边框不住整行（此前薄壳两头落空，表格行只剩裸文本）。
     const row = container('Row', {
       width: '100%',
-      justify: singleCluster ? 'flex-start' : 'space-between',
+      justify: (singleCluster && !thinShell) ? 'flex-start' : 'space-between',
       align: 'center',
-      padding: `${topPadding} ${singleCluster ? 0 : rightPadding} 0 ${leftPadding}`,
+      padding: thinShell ? '0' : `${topPadding} ${singleCluster ? 0 : rightPadding} 0 ${leftPadding}`,
     })
     for (const cluster of clusters) {
-      if (cluster.length === 1) {
-        row.slots[0].components.push(auxContent(cluster[0]))
+      if (cluster.length === 1 && cluster[0].aux) {
+        row.slots[0].components.push(auxContent(cluster[0].aux))
       } else {
         const inner = container('Row', { justify: 'flex-start', align: 'center', gap: '0' })
         let prevRight = null
-        for (const aux of cluster) {
+        for (const item of cluster) {
           // 簇内逐项 spec 间隙用横向 spacer 承担（Row gap 是固定值，表达不了逐项差异；
           // paddingLeft 会让元素盒 x 左移，污染位置评分）。前项有壳时按壳右沿测量。
           if (prevRight != null) {
-            const gapW = Math.max(0, Math.round((aux.x || 0) - prevRight))
+            const gapW = Math.max(0, Math.round(itemLeft(item) - prevRight))
             if (gapW > 0) {
               const spacer = container('Column', { direction: 'column', padding: '0' })
               ensureStyleGroup(spacer, 'rect')
@@ -4859,17 +6232,60 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
               inner.slots[0].components.push(spacer)
             }
           }
-          inner.slots[0].components.push(auxContent(aux))
-          prevRight = auxVisualRight(aux)
+          inner.slots[0].components.push(item.aux
+            ? auxContent(item.aux)
+            : imageFromSlice(item.slice, sem.slicesExports))
+          prevRight = itemRight(item)
         }
         row.slots[0].components.push(inner)
       }
-      for (const aux of cluster) groupedAuxElements.add(aux)
-    }
-    insertSemantic(host, row, group[0].y)
-    const groupBottom = group[0].y + Math.max(...group.map((aux) =>
-      Math.max(aux.height || 0, (aux.fontSize || 14) * 1.4)))
-    auxRowEntries.push({ node: row, host, y0: group[0].y, y1: groupBottom, absorbed: false })
+      for (const item of cluster) if (item.aux) groupedAuxElements.add(item.aux)
+    }
+    let auxInsertNode = row
+    if (thinShell) {
+      const shellInsetL = Math.max(0, Math.round((thinShell.x || 0) - buildCardLeft))
+      const shellInsetR = Math.max(0, Math.round(buildCardRight - ((thinShell.x || 0) + (thinShell.width || 0))))
+      const textLeft = Math.min(...group.map((aux) => auxVisualLeft(aux)))
+      const textRight = Math.max(...group.map((aux) => auxVisualRight(aux)))
+      const borderW = thinShell.isBorder ? Math.max(0.5, thinShell.borderWidth || 1) : 0
+      const shellWrap = container('Row', {
+        width: '100%', justify: 'flex-start', align: 'center',
+        padding: `${topPadding} ${shellInsetR} 0 ${shellInsetL}`,
+      })
+      setStyleChild(row, 'padding', 'paddingType', '1')
+      setStyleChild(row, 'padding', 'paddingTop', '0')
+      setStyleChild(row, 'padding', 'paddingBottom', '0')
+      setStyleChild(row, 'padding', 'paddingLeft', String(Math.max(0, Math.round(textLeft - (thinShell.x || 0)))))
+      setStyleChild(row, 'padding', 'paddingRight', String(Math.max(0, Math.round((thinShell.x || 0) + (thinShell.width || 0) - textRight))))
+      // 壳高是几何真值：钉死内层行高（border-box），文本靠 align:center 垂直居中，
+      // 用 padding 反推壳高会因渲染器 1px 取整逐行累积 0.5-1px 漂移。
+      setStyleChild(row, 'rect', 'height', String(Math.round(thinShell.height || 0)))
+      ensureStyleGroup(row, 'background')
+      if (thinShell.gradient) {
+        setStyleChild(row, 'background', 'backgroundType', '03')
+        setStyleChild(row, 'background', 'backgroundGradient', gradientWithOpacity(thinShell.gradient, thinShell.opacity ?? 1))
+      } else if (thinShell.fill) {
+        setStyleChild(row, 'background', 'backgroundType', '01')
+        setStyleChild(row, 'background', 'backgroundColor', hexToRgba(thinShell.fill, thinShell.opacity ?? 1))
+      }
+      if (thinShell.isBorder) {
+        ensureStyleGroup(row, 'border')
+        setStyleChild(row, 'border', 'isBorder', '1')
+        setStyleChild(row, 'border', 'borderWidth', String(borderW))
+        setStyleChild(row, 'border', 'borderStyle', 'solid')
+        setStyleChild(row, 'border', 'borderColor', hexToRgba(thinShell.borderColor || '#E7E7EE'))
+      }
+      ensureStyleGroup(row, 'borderRadius')
+      setStyleChild(row, 'borderRadius', 'borderRadiusType', '0')
+      setStyleChild(row, 'borderRadius', 'borderRadius', String(Math.round(thinShell.radius || 0)))
+      shellWrap.slots[0].components.push(row)
+      auxInsertNode = shellWrap
+    }
+    insertSemantic(host, auxInsertNode, group[0].y)
+    const groupBottom = Math.max(group[0].y + Math.max(...group.map((aux) =>
+      Math.max(aux.height || 0, (aux.fontSize || 14) * 1.4))),
+      thinShell ? (thinShell.y || 0) + (thinShell.height || 0) : 0)
+    auxRowEntries.push({ node: auxInsertNode, host, y0: group[0].y, y1: groupBottom, absorbed: false })
     previousAuxBottom = groupBottom
   }
   for (const aux of sem.auxTexts) {
@@ -5003,14 +6419,74 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
         insertSemantic(host, row, aux.y)
       }
     } else {
-      const row = container('Row', { width: '100%', justify: 'flex-start', align: 'center', gap: T.gap('tight'), padding: geometryPadding })
-      // 左对齐行同样要带图标（如"信用卡"左侧卡片图标），此前只右/居中分支渲染 → 图标丢失
-      if (aux.sliceEl) {
-        const auxMedia = imageOrPlaceholder(aux.sliceEl, sem.slicesExports)
-        if (auxMedia) row.slots[0].components.push(auxMedia)
+      const leadR = aux.sliceEl ? rect(aux.sliceEl) : null
+      const decoR = aux.decoSliceEl ? rect(aux.decoSliceEl) : null
+      const heroLead = leadR && (leadR.height || 0) > (aux.height || 0) * 1.6
+      if (heroLead) {
+        // 主视觉领行用 AbsoluteLayout 绝对定位带：主视觉常溢出卡顶（吉祥物骑在卡边上），
+        // 流式行会被 clamp 到卡顶且占满主视觉全高，把下文整带顶偏；绝对定位带只占卡内
+        // 可见高度，子元素按 spec 偏移脱标摆放（top 可为负，溢出部分由卡裁切，与设计裁切同构）。
+        const cardX = buildCard.x || 0
+        const cardTop = buildCard.y || 0
+        const bandTop = Math.max(cardTop, Math.min(leadR.y || 0, aux.y || 0))
+        const bandBottom = Math.max((leadR.y || 0) + (leadR.height || 0),
+          (aux.y || 0) + (aux.height || 0),
+          decoR ? (decoR.y || 0) + (decoR.height || 0) : 0)
+        const band = comp('AbsoluteLayout')
+        ensureStyleGroup(band, 'rect')
+        ensureStyleGroup(band, 'flex')
+        setStyleChild(band, 'rect', 'width', String(Math.round(buildCard.width || 0)))
+        setStyleChild(band, 'rect', 'height', String(Math.max(1, Math.round(bandBottom - bandTop))))
+        setStyleChild(band, 'flex', 'flexShrink', '0')
+        const bandFlex = (band.style.properties || []).find((p) => p.itemKey === 'flex')
+        if (bandFlex) bandFlex.itemChildren.properties = (bandFlex.itemChildren?.properties || [])
+          .filter((c) => c.itemKey === 'flexShrink')
+        band.properties = [constProp('align', 'BottomLeft')]
+        band.slots = [{ slotKey: 'default', slotName: '默认插槽', slotSwitch: '1', components: [] }]
+        // 渲染器无 position 组解析：绝对子元素偏移只能走 margin（静态位置=align 角 + margin 偏移）
+        // 渲染器无 position 组解析（preview 只认 rect/flex/margin/…）：绝对子元素偏移走 margin。
+        // 带 align=BottomLeft → 静态位置=带底左角；marginBottom=带底-子元素底 恒为非负
+        // （R38 禁负 marginTop），主视觉溢出卡顶的部分由子元素高于带高自然脱出裁切。
+        const place = (node, elR) => {
+          ensureStyleGroup(node, 'margin')
+          setStyleChild(node, 'margin', 'marginType', '1')
+          setStyleChild(node, 'margin', 'marginTop', '0')
+          setStyleChild(node, 'margin', 'marginLeft', String(Math.round((elR.x || 0) - cardX)))
+          setStyleChild(node, 'margin', 'marginRight', '0')
+          setStyleChild(node, 'margin', 'marginBottom', String(Math.max(0, Math.round(bandBottom - ((elR.y || 0) + (elR.height || 0))))))
+          return node
+        }
+        const leadMedia = imageOrPlaceholder(aux.sliceEl, sem.slicesExports)
+        if (leadMedia) band.slots[0].components.push(place(leadMedia, leadR))
+        band.slots[0].components.push(place(content, aux))
+        if (aux.decoSliceEl) {
+          const decoMedia = imageOrPlaceholder(aux.decoSliceEl, sem.slicesExports)
+          if (decoMedia) band.slots[0].components.push(place(decoMedia, decoR))
+        }
+        insertSemantic(host, band, bandTop)
+        blockBottomOverride = bandBottom
+      } else {
+        const row = container('Row', { width: '100%', justify: 'flex-start', align: 'center', gap: T.gap('tight'), padding: geometryPadding })
+        // 左对齐行同样要带图标（如"信用卡"左侧卡片图标），此前只右/居中分支渲染 → 图标丢失
+        if (aux.sliceEl) {
+          const auxMedia = imageOrPlaceholder(aux.sliceEl, sem.slicesExports)
+          if (auxMedia) row.slots[0].components.push(auxMedia)
+        }
+        if (aux.decoSliceEl) {
+          const col = container('Column', { direction: 'column', align: 'flex-start', gap: T.gap('none') })
+          ensureStyleGroup(col, 'rect')
+          setStyleChild(col, 'rect', 'width', String(Math.round(aux.width || 0)))
+          col.slots[0].components.push(content)
+          const decoRow = container('Row', { width: '100%', justify: 'flex-end', align: 'center', gap: '0' })
+          const decoMedia = imageOrPlaceholder(aux.decoSliceEl, sem.slicesExports)
+          if (decoMedia) decoRow.slots[0].components.push(decoMedia)
+          col.slots[0].components.push(decoRow)
+          row.slots[0].components.push(col)
+        } else {
+          row.slots[0].components.push(content)
+        }
+        insertSemantic(host, row, aux.y)
       }
-      row.slots[0].components.push(content)
-      insertSemantic(host, row, aux.y)
     }
     previousAuxBottom = blockBottomOverride ?? (aux.y + Math.max(aux.height || 0, (aux.fontSize || 14) * 1.4))
   }
@@ -5182,6 +6658,31 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
   // —— 2b. 几何选项组（标签 + 同构短壳行）。 ——
   // 每组保持标注几何：标签间距、壳宽/高、列间距都来自 spec；根容器仍为 auto，不写死整体高度。
   let previousOptionBottom = previousAuxBottom
+  // chip 壳内图标：与成员文本同壳、位于文本左侧的小方形切片。CeButton 只渲染 value 文本，
+  // 没有子节点通道，图标必须让 chip 降级成 Row[Image, Text]（壳样式搬到 Row 上）。
+  const optionChipIcon = (member) => {
+    const shell = member.sourceShapeEl
+    if (!shell) return null
+    const hr = rect(shell)
+    const tr = member.sourceTextEl ? rect(member.sourceTextEl) : null
+    const icon = (sem.slices || []).find((slice) => {
+      const sr = rect(slice)
+      const w = sr.width || 0
+      const h = sr.height || 0
+      if (!w || !h || w > 40 || h > 40) return false
+      if (Math.abs(w - h) > Math.max(8, w * 0.4)) return false
+      if ((sr.x || 0) < (hr.x || 0) - 2 || (sr.y || 0) < (hr.y || 0) - 2) return false
+      if (((sr.x || 0) + w) > ((hr.x || 0) + (hr.width || 0)) + 2) return false
+      if (((sr.y || 0) + h) > ((hr.y || 0) + (hr.height || 0)) + 2) return false
+      return !tr || ((sr.x || 0) + w) <= (tr.x || 0) + 2
+    })
+    if (!icon) return null
+    const media = imageOrPlaceholder(icon, sem.slicesExports)
+    if (!media) return null
+    const ir = rect(icon)
+    const gap = tr ? Math.max(0, Math.round((tr.x || 0) - ((ir.x || 0) + (ir.width || 0)))) : 4
+    return { media, gap, sliceEl: icon }
+  }
   for (const group of sem.optionGroups || []) {
     // 标题在顶带内、选项在带外：拆开渲染。否则按 labelY 归顶带宿主（固定带高），
     // 整个选项组被带高裁掉（选项 pill 全消失）。
@@ -5272,12 +6773,23 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
         // 会被渲染器忽略、回落到容器默认 gap（曾把 13px 选项间距塌成 4px，右列整体左移 9px）。
         if (gap > 0) setStyleChild(chipsRow, 'flex', 'gap', String(Math.round(gap)))
       }
-      const chip = comp('Button')
+      const chipIcon = optionChipIcon(member)
+      const chip = chipIcon
+        ? container('Row', {
+          width: String(Math.round(member.width || 0)),
+          direction: 'row',
+          justify: 'center',
+          align: 'center',
+          gap: String(chipIcon.gap),
+          padding: '0',
+          flexShrink: 0,
+        })
+        : comp('Button')
       ensureStyleGroup(chip, 'rect')
       ensureStyleGroup(chip, 'flex')
       ensureStyleGroup(chip, 'background')
       ensureStyleGroup(chip, 'borderRadius')
-      ensureStyleGroup(chip, 'font')
+      if (!chipIcon) ensureStyleGroup(chip, 'font')
       setStyleChild(chip, 'rect', 'width', String(Math.round(member.width || 0)))
       setStyleChild(chip, 'rect', 'height', String(Math.round(member.height || 0)))
       setStyleChild(chip, 'flex', 'flexShrink', '0')
@@ -5290,11 +6802,22 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
       }
       setStyleChild(chip, 'borderRadius', 'borderRadiusType', '0')
       setStyleChild(chip, 'borderRadius', 'borderRadius', String(Math.round(member.radius || 6)))
-      setStyleChild(chip, 'font', 'color', hexToRgba(member.color))
-      setStyleChild(chip, 'font', 'fontSize', String(member.fontSize || 14))
-      setStyleChild(chip, 'font', 'fontWeight', String(member.fontWeight || '400'))
-      setStyleChild(chip, 'font', 'textAlign', 'center')
-      chip.properties = [constProp('value', member.text)]
+      if (chipIcon) {
+        chip.slots[0].components.push(chipIcon.media)
+        chip.slots[0].components.push(textFromSpec({
+          text: member.text,
+          color: member.color,
+          fontSize: member.fontSize || 14,
+          fontWeight: member.fontWeight || '400',
+          align: 'center',
+        }))
+      } else {
+        setStyleChild(chip, 'font', 'color', hexToRgba(member.color))
+        setStyleChild(chip, 'font', 'fontSize', String(member.fontSize || 14))
+        setStyleChild(chip, 'font', 'fontWeight', String(member.fontWeight || '400'))
+        setStyleChild(chip, 'font', 'textAlign', 'center')
+        chip.properties = [constProp('value', member.text)]
+      }
       chip.eventactions = [clickAction(`// ${member.text} 点击`)]
       chipsRow.slots[0].components.push(chip)
     })
@@ -5311,6 +6834,15 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
     const width = sr.width || 0
     const height = sr.height || 0
     const firstItem = sem.sampleItems[0]
+    // 行右大图标内嵌徽标（icon 角标）不是行尾 affordance：落在 rightIcon 盒内即排除，
+    // 否则被当静态行尾箭头逐行渲染，挤占左栏宽度致 desc 换行（保险保障行实测）
+    const insideRightIcon = sem.sampleItems.some((it2) => {
+      const ri = it2.rightIconEl ? rect(it2.rightIconEl) : null
+      return !!ri && (sr.x || 0) >= (ri.x || 0) - 6 && (sr.y || 0) >= (ri.y || 0) - 6
+        && (sr.x || 0) + width <= (ri.x || 0) + (ri.width || 0) + 6
+        && (sr.y || 0) + height <= (ri.y || 0) + (ri.height || 0) + 6
+    })
+    if (insideRightIcon) return false
     return width >= 12 && width <= 40 && height >= 12 && height <= 40
       && Math.abs(width - height) <= Math.max(10, width * 0.5)
       && ((sr.x || 0) + width) >= buildCardRight - Math.max(56, width * 2)
@@ -5390,6 +6922,21 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
       if (row) row.push(item)
       else panelTextRows.push([item])
     }
+    // 标签 + 单位后缀（(元)/万）相邻层合并为单文本：否则汇总区行项数不齐（4 vs 2），
+    // 两列拓扑无法成立；单位层色差是可接受代价。
+    for (const rowItems of panelTextRows) {
+      rowItems.sort((a, b) => (a.x || 0) - (b.x || 0))
+      for (let i2 = 0; i2 < rowItems.length - 1; i2 += 1) {
+        const cur2 = rowItems[i2]
+        const nxt2 = rowItems[i2 + 1]
+        const ct = String(cur2.text || '').trim()
+        const nt = String(nxt2.text || '').trim()
+        if (/^[(（]?[元万千亿]+[)）]?$/.test(nt) && !/\d/.test(ct) && /[一-龥]/.test(ct)
+          && Math.abs(((cur2.x || 0) + (cur2.width || 0)) - (nxt2.x || 0)) <= 6) {
+          rowItems.splice(i2, 2, { ...cur2, text: ct + ' ' + nt, width: (cur2.width || 0) + (nxt2.width || 0) + 4 })
+        }
+      }
+    }
     // 逐行行距预算：行盒高用渲染同款估算（estimatedTextBoxHeight），
     // 保证「估算底沿 == 渲染流式底沿」，下一行 paddingTop = 标注行顶 - 上一行渲染底沿。
     const panelRowMetrics = panelTextRows.map((items) => {
@@ -5415,34 +6962,52 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
         gap: T.gap('none'), width: '100%',
       })
       for (const items of gridColumns) {
+        // 列对齐按标注几何：左沿对齐→flex-start，右沿对齐→flex-end，否则居中
+        const lefts = items.map((it2) => Math.round(it2.x || 0))
+        const rights = items.map((it2) => Math.round((it2.x || 0) + (it2.width || 0)))
+        const colAlign = Math.max(...lefts) - Math.min(...lefts) <= 6
+          ? 'flex-start'
+          : (Math.max(...rights) - Math.min(...rights) <= 6 ? 'flex-end' : 'center')
         const column = container('Column', {
-          direction: 'column', justify: 'flex-start', align: 'center',
-          gap: T.gap('tight'), width: '50%',
+          direction: 'column', justify: 'flex-start', align: colAlign,
+          gap: T.gap('tight'), width: String(Math.floor(100 / gridColumns.length)) + '%',
         })
         for (const item of items) {
           column.slots[0].components.push(textFromSpec(applyLiteralBind({
             ...item,
-            align: 'center',
+            align: colAlign === 'flex-start' ? 'left' : (colAlign === 'flex-end' ? 'right' : 'center'),
           }, sem.bindings.literalBind)))
         }
         gridRow.slots[0].components.push(column)
       }
       textColumn.slots[0].components.push(gridRow)
     } else {
-      panelTextRows.forEach((items, rowIndex) => {
+      const panelRowMetric = (items) => ({
+        top: Math.min(...items.map((item) => item.y || 0)),
+        boxH: Math.max(...items.map((item) => estimatedTextBoxHeight(item.height, item.fontSize))),
+      })
+      const groupPanelRow = (list) => {
+        const rows = []
+        for (const item of list.slice().sort((a, b) => (a.y || 0) - (b.y || 0) || (a.x || 0) - (b.x || 0))) {
+          const found = rows.find((group) => Math.abs((group[0].y || 0) - (item.y || 0)) <= 8)
+          if (found) found.push(item)
+          else rows.push([item])
+        }
+        return rows
+      }
+      const buildPanelTextRow = (items, prevMetric) => {
         const textRow = container('Row', {
           width: '100%', justify: 'flex-start', align: 'center', gap: T.gap('tight'),
         })
-        if (rowIndex > 0) {
-          const prev = panelRowMetrics[rowIndex - 1]
+        if (prevMetric) {
           const rowGap = Math.max(0, Math.round(
-            panelRowMetrics[rowIndex].top - (prev.top + prev.boxH)))
+            panelRowMetric(items).top - (prevMetric.top + prevMetric.boxH)))
           setStyleChild(textRow, 'padding', 'paddingType', '1')
           setStyleChild(textRow, 'padding', 'paddingTop', String(rowGap))
         }
         // 裸货币符号层 + 紧邻数字层（spec 拆层，x 间隙 ≤6px）合并为一个 Text：
         // 分开渲染会被行 gap 撑出缝隙（"¥ 519.27"），设计稿是紧贴的。数字层的绑定保留（含 ¥ 前缀表达式）。
-        const sortedItems = items.sort((a, b) => (a.x || 0) - (b.x || 0))
+        const sortedItems = items.slice().sort((a, b) => (a.x || 0) - (b.x || 0))
         const mergedItems = []
         for (let i = 0; i < sortedItems.length; i++) {
           const cur = sortedItems[i]
@@ -5468,8 +7033,117 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
             align: 'left',
           }, sem.bindings.literalBind)))
         }
-        textColumn.slots[0].components.push(textRow)
-      })
+        return textRow
+      }
+      // 壳内两列拓扑：壳右半区独立成列的文本（sem.shellRightColumns）不与左列竖排堆叠，
+      // 而是 Row[Column(左列), Column(右列)] 并排；标题行整行留在两列之上，
+      // 右列之下的通栏内容仍整行排在两列块之后（此前右列被压成竖排，壳内文本互相挤位）。
+      const splitCol = (sem.shellRightColumns || [])
+        .find((column) => column.shapeEl === panel.shapeEl) || null
+      const splitLayout = (() => {
+        if (!splitCol || panelTextRows.length < 2) return null
+        // 右列成员按 spec 坐标精确对账（不用 x 阈值：标题行右侧的紧邻短标签
+        // 与右列左边界只差几 px，阈值判定会把它误收进右列）
+        const rightKeys = new Set(splitCol.texts.map((item) =>
+          `${Math.round(item.x || 0)},${Math.round(item.y || 0)}`))
+        const isRight = (item) => rightKeys.has(`${Math.round(item.x || 0)},${Math.round(item.y || 0)}`)
+        const topRowY = Math.min(...panelTextRows[0].map((item) => item.y || 0))
+        const headerRows = []
+        const restRows = []
+        for (const items of panelTextRows) {
+          const rowTop = panelRowMetric(items).top
+          if (Math.abs(rowTop - topRowY) <= 8 && !items.some(isRight)) headerRows.push(items)
+          else restRows.push(items)
+        }
+        const rightItems = restRows.flatMap((items) => items.filter(isRight))
+        if (rightItems.length < 2) return null
+        const rightRows = groupPanelRow(rightItems)
+        const rightTop = panelRowMetric(rightRows[0]).top
+        const rightBottom = Math.max(...rightRows.map((items) => {
+          const metric = panelRowMetric(items)
+          return metric.top + metric.boxH
+        }))
+        const footerRows = restRows.filter((items) =>
+          panelRowMetric(items).top > rightBottom + 8 && !items.some(isRight))
+        const footerItems = new Set(footerRows.flat())
+        const leftItems = restRows.flat().filter((item) => !isRight(item) && !footerItems.has(item))
+        if (!leftItems.length) return null
+        const leftRows = groupPanelRow(leftItems)
+        const leftTop = panelRowMetric(leftRows[0]).top
+        const columnHeight = (rows, extraTop) => {
+          let height = extraTop
+          let prev = null
+          for (const items of rows) {
+            const metric = panelRowMetric(items)
+            if (prev) height += Math.max(0, Math.round(metric.top - (prev.top + prev.boxH)))
+            height += metric.boxH
+            prev = metric
+          }
+          return height
+        }
+        const blockTop = Math.min(leftTop, rightTop)
+        return {
+          headerRows, leftRows, rightRows, footerRows, blockTop,
+          leftExtra: leftTop - blockTop,
+          rightExtra: rightTop - blockTop,
+          blockHeight: Math.max(
+            columnHeight(leftRows, leftTop - blockTop),
+            columnHeight(rightRows, rightTop - blockTop)),
+        }
+      })()
+      const fillPanelColumn = (column, rows, extraTop) => {
+        if (extraTop > 0) {
+          setStyleChild(column, 'padding', 'paddingType', '1')
+          setStyleChild(column, 'padding', 'paddingTop', String(Math.round(extraTop)))
+        }
+        let prev = null
+        for (const items of rows) {
+          column.slots[0].components.push(buildPanelTextRow(items, prev))
+          prev = panelRowMetric(items)
+        }
+      }
+      if (splitLayout) {
+        let prev = null
+        for (const items of splitLayout.headerRows) {
+          textColumn.slots[0].components.push(buildPanelTextRow(items, prev))
+          prev = panelRowMetric(items)
+        }
+        const leftW = Math.max(1, Math.round(splitCol.splitX - ((panel.x || 0) + (panel.paddingLeft || 0))))
+        const contentW = Math.max(1, Math.round((panel.width || 0)
+          - (panel.paddingLeft || 0) - (panel.paddingRight || 0)))
+        const twoCol = container('Row', {
+          width: '100%', direction: 'row', justify: 'flex-start', align: 'flex-start',
+          gap: T.gap('none'), padding: '0',
+        })
+        if (prev) {
+          setStyleChild(twoCol, 'padding', 'paddingType', '1')
+          setStyleChild(twoCol, 'padding', 'paddingTop', String(Math.max(0,
+            Math.round(splitLayout.blockTop - (prev.top + prev.boxH)))))
+        }
+        const leftCol = container('Column', {
+          direction: 'column', width: String(leftW), justify: 'flex-start', align: 'flex-start',
+          gap: T.gap('none'), padding: '0', flexShrink: 0,
+        })
+        const rightCol = container('Column', {
+          direction: 'column', width: String(Math.max(1, contentW - leftW)), justify: 'flex-start',
+          align: 'flex-start', gap: T.gap('none'), padding: '0', flexShrink: 0,
+        })
+        fillPanelColumn(leftCol, splitLayout.leftRows, splitLayout.leftExtra)
+        fillPanelColumn(rightCol, splitLayout.rightRows, splitLayout.rightExtra)
+        twoCol.slots[0].components.push(leftCol, rightCol)
+        textColumn.slots[0].components.push(twoCol)
+        prev = { top: splitLayout.blockTop, boxH: splitLayout.blockHeight }
+        for (const items of splitLayout.footerRows) {
+          textColumn.slots[0].components.push(buildPanelTextRow(items, prev))
+          prev = panelRowMetric(items)
+        }
+      } else {
+        let prev = null
+        for (const items of panelTextRows) {
+          textColumn.slots[0].components.push(buildPanelTextRow(items, prev))
+          prev = panelRowMetric(items)
+        }
+      }
     }
     row.slots[0].components.push(textColumn)
     if (panel.rightSlice) {
@@ -5624,10 +7298,37 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
       if (mcAffordMedia) row.slots[0].components.push(mcAffordMedia)
     }
     insertSemantic(hostFor(sem.midCluster.y), row, sem.midCluster.y)
+    // 簇值行（并行汇总列「标签 + 下一行数值」的下半行）：同一几何/左对齐规则渲染。
+    // 与主金额重合的值（左列大字号）在此整行渲染（含右列 300.00），主金额通道让位，
+    // 否则并列双列被拆成两行（左 2,782.35、右 300.00 应同基线）。
+    if (sem.midCluster.values && sem.midCluster.values.filter(Boolean).length) {
+      const vItems = [...sem.midCluster.values].filter(Boolean).sort((a, b) => (a.x || 0) - (b.x || 0))
+      const primText = sem.primaryAmount ? String(sem.primaryAmount.text) : null
+      if (primText && vItems.some((v) => String(v.text).trim() === primText.trim())) {
+        mcValueRowHandlesPrimary = true
+      }
+      const vRowHost = container('Row', {
+        width: '100%', justify: mcNearCenter ? 'center' : 'flex-start', align: 'center',
+        gap: T.gap('tight'),
+        padding: mcNearCenter ? '0' : `${semanticTopGap(vItems[0].y) ?? mcPad} 0 ${inFixedGradientShell(sem.midCluster.y) ? 0 : mcPad} ${mcLeftPad}`,
+      })
+      if (!mcNearCenter) setStyleChild(vRowHost, 'flex', 'gap', String(T.gap('none')))
+      let _vPrevRight = null
+      for (const v of vItems) {
+        const gapW = _vPrevRight == null ? 0 : Math.max(0, Math.round((v.x || 0) - _vPrevRight))
+        if (gapW > 0) vRowHost.slots[0].components.push(_mcGapSpacer(gapW))
+        vRowHost.slots[0].components.push(textFromSpec(applyLiteralBind({
+          text: v.text, color: v.color, fontSize: v.fontSize, fontWeight: v.fontWeight,
+          height: v.height, align: 'left',
+        }, sem.bindings.literalBind)))
+        _vPrevRight = (v.x || 0) + (v.width || 0)
+      }
+      insertSemantic(hostFor(vItems[0].y), vRowHost, vItems[0].y)
+    }
   }
 
   // —— 3. 主金额（大字号居中）→ 抽 inputParam + 千分号表达式 ——
-  if (sem.primaryAmount) {
+  if (sem.primaryAmount && !mcValueRowHandlesPrimary) {
     const varName = uniqueKey(primaryAmountVarName(sem), usedTopKeys)
     const num = parseAmount(sem.primaryAmount.text)
     const amount = sem.primaryAmount
@@ -5848,11 +7549,296 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
     }
   }
 
+  // —— 2x. 评分仪表盘（半环弧 + 中心分数）：Canvas 回放（recipe canvas-gauge-score）——
+  // 弧矢量 shape 无渲染通道（style 解析器不认 arc），分数文本也无归属 → 整块丢失。
+  // 检出「N分」大字号 + 下方小标签且未被任何通道消费时，按 recipe 出码 Canvas 半环。
+  const scoreGauge = (() => {
+    const all = sem.allTexts || []
+    const rendered = new Set([
+      ...(sem.postAmountTexts || []).map((t) => t.sourceEl),
+      ...(sem.auxTexts || []).map((t) => t.sourceEl),
+      ...(sem.buttons || []).map((b) => b.sourceEl),
+      ...(sem.richBlocks || []).flatMap((blk) => blk.fragments || []),
+      ...(sem.midCluster ? sem.midCluster.items : []),
+    ].filter(Boolean))
+    // 标注层常把「70分」拆成 数字+单位 两个文本：认大号纯数字 + 同基线右邻「分」单位
+    const score = all.find((t) => /^\d+$/.test(textOf(t)) && (anyFs(t) || 0) >= 20 && !rendered.has(t))
+    if (!score) return null
+    const sr = anyRect(score)
+    const unit = all.find((t) => t !== score && !rendered.has(t) && textOf(t) === '分'
+      && Math.abs((anyRect(t).y || 0) - (sr.y || 0)) <= 4
+      && (anyRect(t).x || 0) >= (sr.x || 0) + (sr.width || 0) - 2
+      && (anyRect(t).x || 0) <= (sr.x || 0) + (sr.width || 0) + 24)
+    if (!unit) return null
+    const label = all.find((t) => t !== score && t !== unit && !rendered.has(t)
+      && (anyRect(t).y || 0) >= (sr.y || 0) + 14 && (anyRect(t).y || 0) <= (sr.y || 0) + 60
+      && Math.abs(((anyRect(t).x || 0) + (anyRect(t).width || 0) / 2) - ((sr.x || 0) + (sr.width || 0) / 2)) <= 40
+      && (anyFs(t) || 14) <= 13)
+    if (!label) return null
+    return { score, label }
+  })()
+  if (scoreGauge) {
+    const gx = Math.round(((anyRect(scoreGauge.label).x || 0) + (anyRect(scoreGauge.label).width || 0) / 2) - 60)
+    const gy = Math.round((anyRect(scoreGauge.score).y || 0) - 30)
+    const scoreNum = parseAmount(textOf(scoreGauge.score))
+    const scoreVar = uniqueKey('score', usedTopKeys)
+    const labelVar = uniqueKey('scoreLabel', usedTopKeys)
+    // Canvas 出码按 self.state.score/scoreLabel 字面读取：变量被重命名（冲突）时放弃仪表盘
+    if (scoreVar !== 'score' || labelVar !== 'scoreLabel') return
+    addParam(scoreVar, 'number', scoreNum !== null ? scoreNum : 0)
+    addParam(labelVar, 'string', textOf(scoreGauge.label))
+    const gaugeCode = SCORE_GAUGE_CANVAS_CODE
+    const cv = comp('Canvas')
+    ensureStyleGroup(cv, 'rect'); ensureStyleGroup(cv, 'flex'); ensureStyleGroup(cv, 'background')
+    setStyleChild(cv, 'rect', 'width', '120')
+    setStyleChild(cv, 'rect', 'height', '84')
+    setStyleChild(cv, 'flex', 'flexShrink', '0')
+    setStyleChild(cv, 'background', 'backgroundType', '01')
+    setStyleChild(cv, 'background', 'backgroundColor', '')
+    cv.eventactions = [{
+      event: { eventName: '初始化渲染', eventKey: 'onMeasured' },
+      action: { actionType: 'customAction', properties: [constProp('function', { code: gaugeCode, compiled: gaugeCode })] },
+    }]
+    const left = Math.max(0, gx - buildCardLeft)
+    const right = Math.max(0, buildCardRight - (gx + 120))
+    const grow = container('Row', { width: '100%', justify: 'flex-start', align: 'flex-start', gap: '0' })
+    ensureStyleGroup(grow, 'padding')
+    setStyleChild(grow, 'padding', 'paddingType', '1')
+    setStyleChild(grow, 'padding', 'paddingLeft', String(left))
+    setStyleChild(grow, 'padding', 'paddingRight', String(right))
+    // 零流高叠放：marginTop 补到设计顶沿、负 marginBottom 抵消（顶距+画布高），不推偏头部流式行
+    const gaugeTopGap = Math.max(0, semanticTopGap(gy) ?? 0)
+    ensureStyleGroup(grow, 'margin')
+    setStyleChild(grow, 'margin', 'marginType', '1')
+    setStyleChild(grow, 'margin', 'marginTop', String(gaugeTopGap))
+    setStyleChild(grow, 'margin', 'marginBottom', String(-(84 + gaugeTopGap)))
+    grow.slots[0].components.push(cv)
+    insertSemantic(card, grow, gy)
+    addSemanticBound(gy, gy + 84, true)
+  }
+
+  // —— 3a-x. 散点带：中心媒体（雷达/环图裁切图）+ 环绕胶囊簇（pill+金额+状态标签）——
+  // 「五笔钱」类布局：胶囊与金额按三列散点环绕中心图形；通用按钮行会把胶囊压成一行截断、
+  // 金额散落错行（v7 AB04 位置分 0.53 的根因）。检出后按列重建：列宽=成员外接宽，
+  // 列间负 margin 还原设计上的水平重叠，列内行 paddingTop 还原纵向节奏。
+  // 散点带金额/状态标签 → 变量绑定（金额走千分格式化表达式，标签走字符串变量），避免裸字面量
+  const scatterAmountText = (pill, amount) => {
+    const num = parseAmount(amount.text)
+    const varName = uniqueKey(fieldKeyFor(pill && pill.text) || 'amount', usedTopKeys)
+    addParam(varName, 'number', num !== null ? num : 0)
+    return textFromSpec({ ...amount, align: amount.align || 'left', bind: amountExpr(varName, amount.text), defaultValue: amount.text })
+  }
+  const scatterTagText = (tag) => {
+    const varName = uniqueKey((fieldKeyFor(tag.text) || 'status') + 'Tag', usedTopKeys)
+    addParam(varName, 'string', tag.text)
+    return textFromSpec({ ...tag, align: tag.align || 'left', bind: '$' + varName, defaultValue: tag.text })
+  }
+  const scatterBand = (() => {
+    const cardX = (sem.cardRect && sem.cardRect.x) || 0
+    const cardY = (sem.cardRect && sem.cardRect.y) || 0
+    const pills = (sem.buttons || []).filter((b) => (b.radius || 0) >= 10 && (b.height || 0) <= 40 && (b.fillColor || b.gradient))
+    if (pills.length < 4) return null
+    const pillTop = Math.min(...pills.map((b) => b.y || 0))
+    const pillBottom = Math.max(...pills.map((b) => (b.y || 0) + (b.height || 0)))
+    const rowKeys = new Set(pills.map((b) => Math.round((b.y || 0) / 8)))
+    if (rowKeys.size < 2 || pillBottom - pillTop > 260) return null
+    const media = (sem.orphanBlocks || []).find((ob) => {
+      const w = ob.width || 0
+      const h = ob.height || 0
+      return w >= 60 && w <= 200 && Math.abs(w - h) <= 14
+        && (ob.y || 0) >= pillTop - 80 && (ob.y || 0) + h <= pillBottom + 80
+    })
+    if (!media) return null
+    const mL = (media.x || 0) - cardX
+    const mR = mL + (media.width || 0)
+    const aux = sem.postAmountTexts || []
+    const usedAux = new Set()
+    const clusters = []
+    for (const pill of pills) {
+      const px = (pill.x || 0) - cardX
+      const py = (pill.y || 0) - cardY
+      const pc = px + (pill.width || 0) / 2
+      const amount = aux.find((t) => !usedAux.has(t) && (t.fontSize || 14) >= 12
+        && (t.y || 0) - cardY >= py + (pill.height || 0) - 8
+        && (t.y || 0) - cardY <= py + (pill.height || 0) + 56
+        && Math.abs((((t.x || 0) - cardX) + (t.width || 0) / 2) - pc) <= 70)
+      if (!amount) continue
+      usedAux.add(amount)
+      const ay = (amount.y || 0) - cardY
+      const tag = aux.find((t) => !usedAux.has(t) && (t.fontSize || 14) <= 11
+        && (t.y || 0) - cardY >= ay - 4 && (t.y || 0) - cardY <= ay + 46
+        && (t.x || 0) - cardX >= (amount.x || 0) - cardX - 16
+        && (t.x || 0) - cardX <= (amount.x || 0) - cardX + (amount.width || 0) + 60) || null
+      if (tag) usedAux.add(tag)
+      const side = pc < mL ? 'L' : pc > mR ? 'R' : 'C'
+      // 行尾箭头切片（胶囊内右侧小图标）随胶囊走，避免孤立媒体兜底再渲染一遍
+      const pillRect = { x: (pill.x || 0), y: (pill.y || 0), width: pill.width || 0, height: pill.height || 0 }
+      const arrow = (sem.slices || []).find((sl) => {
+        const sr = rect(sl)
+        const w = sr.width || 0
+        const h = sr.height || 0
+        return w >= 8 && w <= 24 && h >= 8 && h <= 24 && rectInside(pillRect, sr, 2)
+      }) || null
+      const textEl = pill.sourceEl || null
+      const textRight = textEl ? (rect(textEl).x || 0) + (rect(textEl).width || 0) : (pill.x || 0) + (pill.width || 0)
+      clusters.push({ pill, amount, tag, side, px, py, arrow, textRight })
+    }
+    if (clusters.length < 4) return null
+    const sides = new Set(clusters.map((c) => c.side))
+    if (!sides.has('L') || !sides.has('R') || !sides.has('C')) return null
+    sem.buttons = (sem.buttons || []).filter((b) => !clusters.some((c) => c.pill === b))
+    sem.postAmountTexts = aux.filter((t) => !usedAux.has(t))
+    sem.orphanBlocks = (sem.orphanBlocks || []).filter((ob) => ob !== media)
+    const arrowEls = new Set(clusters.map((c) => c.arrow).filter(Boolean))
+    if (arrowEls.size) {
+      sem.slices = (sem.slices || []).filter((sl) => !arrowEls.has(sl))
+      sem.isolatedBlocks = (sem.isolatedBlocks || []).filter((bl) => !arrowEls.has(bl.element))
+    }
+    return { clusters, media, mL, cardX, cardY, pillTop }
+  })()
+  if (scatterBand) {
+    const { clusters, media, cardX, cardY, pillTop } = scatterBand
+    const bySide = { L: [], C: [], R: [] }
+    for (const c of clusters) bySide[c.side].push(c)
+    const colDefs = []
+    for (const side of ['L', 'C', 'R']) {
+      const list = bySide[side]
+      if (!list.length) continue
+      const rects = []
+      for (const c of list) {
+        rects.push({ x: c.px, y: c.py, r: c.px + (c.pill.width || 0) })
+        rects.push({ x: (c.amount.x || 0) - cardX, y: 0, r: (c.amount.x || 0) - cardX + (c.amount.width || 0) })
+        if (c.tag) rects.push({ x: (c.tag.x || 0) - cardX, y: 0, r: (c.tag.x || 0) - cardX + (c.tag.width || 0) })
+      }
+      if (side === 'C') rects.push({ x: scatterBand.mL, y: 0, r: scatterBand.mL + (media.width || 0) })
+      const minX = Math.min(...rects.map((r) => r.x))
+      const maxX = Math.max(...rects.map((r) => r.r))
+      colDefs.push({ side, list, minX, width: maxX - minX })
+    }
+    const bandTopLocal = Math.min(
+      ...clusters.map((c) => c.py),
+      ...clusters.map((c) => (c.amount.y || 0) - cardY),
+      (media.y || 0) - cardY,
+    )
+    const topGap = semanticTopGap(pillTop) ?? T.pad('section')
+    const bandRow = container('Row', { width: '100%', justify: 'flex-start', align: 'flex-start', gap: '0' })
+    ensureStyleGroup(bandRow, 'padding')
+    setStyleChild(bandRow, 'padding', 'paddingType', '1')
+    setStyleChild(bandRow, 'padding', 'paddingTop', String(Math.max(0, Math.round(topGap))))
+    setStyleChild(bandRow, 'padding', 'paddingLeft', String(Math.max(0, Math.round(colDefs[0].minX))))
+    let cursor = colDefs[0].minX + colDefs[0].width
+    let bandBottomLocal = 0
+    for (const cd of colDefs) {
+      const col = container('Column', { direction: 'column', align: 'flex-start', gap: '0', width: String(Math.round(cd.width)), flexShrink: '0' })
+      ensureStyleGroup(col, 'other')
+      setStyleChild(col, 'other', 'overflow', 'visible')
+      if (cd !== colDefs[0]) {
+        ensureStyleGroup(col, 'margin')
+        setStyleChild(col, 'margin', 'marginType', '1')
+        setStyleChild(col, 'margin', 'marginLeft', String(Math.round(cd.minX - cursor)))
+      }
+      cursor = cd.minX + cd.width
+      const items = []
+      for (const c of cd.list) {
+        items.push({ y: c.py, kind: 'pill', c })
+        const ay = (c.amount.y || 0) - cardY
+        const tagBelow = c.tag && ((c.tag.y || 0) - cardY) - ay > 14
+        items.push({ y: ay, kind: tagBelow ? 'amount' : 'amountTag', c })
+        if (tagBelow) items.push({ y: (c.tag.y || 0) - cardY, kind: 'tag', c })
+      }
+      if (cd.side === 'C') items.push({ y: (media.y || 0) - cardY, kind: 'media' })
+      items.sort((a, b) => a.y - b.y)
+      // 列首行顶距相对「带顶」而非列首成员：左右列首成员比中心列低时也要保留设计偏移
+      let prevBottom = bandTopLocal
+      for (let i = 0; i < items.length; i += 1) {
+        const it = items[i]
+        const row = container('Row', { width: String(Math.round(cd.width)), justify: 'flex-start', align: 'center', gap: '0', flexShrink: '0' })
+        ensureStyleGroup(row, 'padding')
+        setStyleChild(row, 'padding', 'paddingType', '1')
+        setStyleChild(row, 'padding', 'paddingTop', String(Math.max(0, Math.round(it.y - prevBottom))))
+        let rowBottom = it.y
+        if (it.kind === 'pill') {
+          const btn = it.c.pill
+          // 胶囊=Row 壳（底色/圆角/透明度）+ 文本 + 行尾箭头切片：Button 无子节点槽，
+          // 设计稿胶囊普遍带右箭头，纯 Button 会让文本居中偏移半个箭头宽（校正器被迫整带平移）。
+          const b = container('Row', {
+            width: String(Math.round(btn.width || 88)), justify: 'flex-start', align: 'center', gap: '0', flexShrink: '0',
+          })
+          const pillPadL = Math.max(0, Math.round((it.c.textRight ? (rect(it.c.pill.sourceEl).x || 0) : (btn.x || 0)) - (btn.x || 0)))
+          ensureStyleGroup(b, 'padding')
+          setStyleChild(b, 'padding', 'paddingType', '1')
+          setStyleChild(b, 'padding', 'paddingLeft', String(pillPadL))
+          ensureStyleGroup(b, 'rect'); ensureStyleGroup(b, 'background'); ensureStyleGroup(b, 'other')
+          ensureStyleGroup(b, 'borderRadius')
+          setStyleChild(b, 'rect', 'height', String(Math.round(btn.height || 30)))
+          if (btn.gradient) {
+            setStyleChild(b, 'background', 'backgroundType', '03')
+            setStyleChild(b, 'background', 'backgroundGradient', btn.gradient)
+          } else if (btn.fillColor) {
+            setStyleChild(b, 'background', 'backgroundType', '01')
+            setStyleChild(b, 'background', 'backgroundColor', hexToRgba(btn.fillColor, btn.opacity ?? 1))
+          }
+          setStyleChild(b, 'other', 'opacity', '100')
+          setStyleChild(b, 'borderRadius', 'borderRadiusType', '0')
+          setStyleChild(b, 'borderRadius', 'borderRadius', String(btn.radius || 14))
+          const label = textFromSpec({ text: btn.text, color: btn.color, fontSize: btn.fontSize || 14, fontWeight: btn.fontWeight || '400', align: 'center' })
+          b.slots[0].components.push(label)
+          const arrowSlice = it.c.arrow
+          if (arrowSlice) {
+            const ar = rect(arrowSlice)
+            const gapX = Math.max(0, Math.round((ar.x || 0) - ((btn.sourceEl ? 0 : 0) + (it.c.textRight || 0))))
+            setStyleChild(b, 'flex', 'gap', String(gapX))
+            const img = imageOrPlaceholder(arrowSlice, sem.slicesExports)
+            if (img) {
+              setStyleChild(img, 'rect', 'width', String(Math.round(ar.width || 20)))
+              setStyleChild(img, 'rect', 'height', String(Math.round(ar.height || 20)))
+              b.slots[0].components.push(img)
+            }
+          }
+          setStyleChild(row, 'padding', 'paddingLeft', String(Math.max(0, Math.round(it.c.px - cd.minX))))
+          row.slots[0].components.push(b)
+          rowBottom = it.y + (btn.height || 30)
+        } else if (it.kind === 'media') {
+          const img = imageOrPlaceholder(media.sliceEl, sem.slicesExports)
+          if (img) {
+            setStyleChild(img, 'rect', 'width', String(Math.round(media.width || 0)))
+            setStyleChild(img, 'rect', 'height', String(Math.round(media.height || 0)))
+            setStyleChild(row, 'padding', 'paddingLeft', String(Math.max(0, Math.round(scatterBand.mL - cd.minX))))
+            row.slots[0].components.push(img)
+          }
+          rowBottom = it.y + (media.height || 0)
+        } else if (it.kind === 'tag') {
+          const tag = it.c.tag
+          setStyleChild(row, 'padding', 'paddingLeft', String(Math.max(0, Math.round((tag.x || 0) - cardX - cd.minX))))
+          row.slots[0].components.push(scatterTagText(tag))
+          rowBottom = it.y + Math.max(tag.height || 0, (tag.fontSize || 10) * 1.4)
+        } else {
+          const amount = it.c.amount
+          setStyleChild(row, 'padding', 'paddingLeft', String(Math.max(0, Math.round((amount.x || 0) - cardX - cd.minX))))
+          row.slots[0].components.push(scatterAmountText(it.c.pill, amount))
+          rowBottom = it.y + Math.max(amount.height || 0, (amount.fontSize || 14) * 1.4)
+          if (it.kind === 'amountTag' && it.c.tag) {
+            const tag = it.c.tag
+            setStyleChild(row, 'flex', 'gap', String(Math.max(0, Math.round((tag.x || 0) - cardX - ((amount.x || 0) - cardX + (amount.width || 0))))))
+            row.slots[0].components.push(scatterTagText(tag))
+          }
+        }
+        prevBottom = rowBottom
+        bandBottomLocal = Math.max(bandBottomLocal, rowBottom)
+        col.slots[0].components.push(row)
+      }
+      bandRow.slots[0].components.push(col)
+    }
+    insertSemantic(card, bandRow, pillTop)
+    addSemanticBound(pillTop, cardY + bandBottomLocal)
+  }
+
   // —— 3b. 金额下方辅助文案：按视觉 y 顺序拆分（表单行之前=mid，按钮之后=footer）——
   // 拓扑驱动：先渲染「实时到账」类 mid 文本，表单行随后，footer 文本（温馨提示/最大金额）留到按钮之后。
   const formTopY = sem.formRows && sem.formRows.length
     ? Math.min(...sem.formRows.map((f) => f.label.y))
-    : (sem.buttons.length ? (rect(sem.buttons[0]).y || 0) : 9999)
+    : (sem.buttons.length ? (rect(sem.buttons[0]).y || 0)
+      : (scatterBand ? scatterBand.pillTop : 9999))
   const midAux = (sem.postAmountTexts || []).filter((t) => (t.y || 0) < formTopY)
   const footAux = (sem.postAmountTexts || []).filter((t) => (t.y || 0) >= formTopY)
   // 辅助文案行垂直间距几何化：paddingTop = 本行 y - 上一行底沿；末行 paddingBottom = 卡片底沿 - 本行底沿。
@@ -5906,25 +7892,48 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
     const bind = '$' + statVar + ".map(i => i.label + ' ' + i.value).join(" + sepJs + ')'
     return textFromSpec({ ...pat, bind, defaultValue: pat.text })
   }
+  // midAux 之后是否还有静态块（面板组/列表/孤立块等）：只看表单/按钮/footAux 会把
+  // 「后面还有 tile 列表」的 midAux 末行当成全卡末行，paddingBottom 撑到卡底
+  // （实测末行被撑高 297px，后续块全部被挤出裁切区）。语义边界里顶沿在其后的块即为证据。
+  const midAuxLastBottom = midAux.length
+    ? (midAux[midAux.length - 1].y || 0) + (midAux[midAux.length - 1].height || (midAux[midAux.length - 1].fontSize || 14) * 1.4)
+    : null
+  const midAuxHasBlocksAfter = (sem.formRows && sem.formRows.length) || sem.buttons.length || footAux.length > 0
+    || (midAuxLastBottom != null && nextSemanticTop(midAuxLastBottom - 1) != null)
   for (let i = 0; i < midAux.length; i++) {
     const pat = midAux[i]
     const host = hostFor(pat.y)
+    // 行首图标（勾选/圆点等选项符号）：文本左侧同行带内的小切片随行渲染并消费，
+    // 否则选项行只剩文字、符号丢失（组件计数与像素都扣）。与 appendInlineTrailSlice 同族反方向。
+    const patH = pat.height || (pat.fontSize || 14) * 1.4
+    const leadSliceIdx = (sem.slices || []).findIndex((sl) => {
+      const sr = rect(sl)
+      const w = sr.width || 0
+      const h = sr.height || 0
+      if (w < 12 || w > 48 || h < 12 || h > 48) return false
+      if ((sr.x || 0) + w > (pat.x || 0) - 2 || (sr.x || 0) < (pat.x || 0) - 56) return false
+      return Math.abs(((sr.y || 0) + h / 2) - ((pat.y || 0) + patH / 2)) <= Math.max(12, h)
+    })
+    const leadSlice = leadSliceIdx >= 0 ? sem.slices[leadSliceIdx] : null
     // 渐变容器内的行：间距交给容器的 gap/padding（已在 topDecoration 渲染时统一设置），行自身 padding 归零，
     // 否则会叠加出巨大下边距（如标题行被算成卡片末行 → paddingBottom=卡底-行底=169px）。
     const inTopHost = host !== card
     const isCenter = pat.align !== 'right' && (!pat.align || pat.align === 'center' || pat.x > 100)
     // 只有 midAux 是整卡最后一个内容块（其后无 表单/按钮/footAux）时，末行才需贴卡片底计算 paddingBottom
-    const hasBlocksAfter = (sem.formRows && sem.formRows.length) || sem.buttons.length || footAux.length > 0
-    const isLast = i === midAux.length - 1 && !hasBlocksAfter
+    const isLast = i === midAux.length - 1 && !midAuxHasBlocksAfter
     const beforeBottom = previousSemanticBottom(pat.y) ??
       (i > 0 ? lineBottom(midAux[i - 1]) : (mainBottom ?? previousAuxBottom))
     const geom = inTopHost ? null : auxRowPadding(pat, i > 0 ? midAux[i - 1] : null, isLast, beforeBottom)
-    const midJustify = pat.align === 'right' ? 'flex-end' : isCenter ? 'center' : 'flex-start'
+    // textAlign=right 但几何中心落在卡左 1/3 的标注（添加外部资产类链接文案）按左锚还原：
+    // justify 只认 textAlign 会把左下链接甩到右缘（textAlign 描述盒内对齐，不是行锚点）。
+    const midRelX = (((pat.x || 0) + (pat.width || 0) / 2) - buildCardLeft) / ((buildCard.width || 375))
+    const midJustify = (pat.align === 'right' && midRelX < 0.4) ? 'flex-start'
+      : pat.align === 'right' ? 'flex-end' : isCenter ? 'center' : 'flex-start'
     // 左对齐行的水平位置由 spec x 坐标驱动：auxRowPadding 只管垂直节奏，
     // 左 padding 必须补上 pat.x - 卡片左缘，否则内容贴到卡片 x=0（曾有说明文本丢 32px 左缩进）。
     let midPadding = geom || (inTopHost ? '0' : (isCenter ? '6' : '12'))
     if (midJustify === 'flex-start') {
-      const leftPad = Math.max(0, Math.round((pat.x || buildCardLeft) - buildCardLeft))
+      const leftPad = Math.max(0, Math.round(((leadSlice ? rect(leadSlice).x : pat.x) || buildCardLeft) - buildCardLeft))
       const parts = String(midPadding).trim().split(/\s+/)
       while (parts.length < 4) parts.push('0')
       parts[3] = String(leftPad)
@@ -5943,7 +7952,21 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
       insertSemantic(host, row, pat.y)
       continue
     }
+    if (leadSlice) {
+      const leadImg = imageOrPlaceholder(leadSlice, sem.slicesExports)
+      if (leadImg) {
+        const lr = rect(leadSlice)
+        setStyleChild(leadImg, 'rect', 'width', String(Math.round(lr.width || 16)))
+        setStyleChild(leadImg, 'rect', 'height', String(Math.round(lr.height || 16)))
+        ensureStyleGroup(row, 'flex')
+        setStyleChild(row, 'flex', 'gap', String(Math.max(0, Math.round((pat.x || 0) - ((lr.x || 0) + (lr.width || 0))))))
+        row.slots[0].components.push(leadImg)
+        sem.slices = (sem.slices || []).filter((sl) => sl !== leadSlice)
+        sem.isolatedBlocks = (sem.isolatedBlocks || []).filter((bl) => bl.element !== leadSlice)
+      }
+    }
     row.slots[0].components.push(auxContent(pat))
+    appendInlineTrailSlice(row, pat)
     insertSemantic(host, row, pat.y)
   }
 
@@ -5961,7 +7984,210 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
     let previousFormBottom
     // 每行的 spec 几何顶/底沿（视觉并集）——分割线插入后按排序序列重算 padTop 用
     const formGeomByNode = new Map()
+    // 对比面板组：y 带重叠 ≥50% 的并排壳必须合成一行输出；逐壳成行会把并排面板堆成上下两块
+    const panelGroups = []
+    {
+      const seenPanels = new Set()
+      const pRows = sorted.filter((fr2) => fr2.panelShell)
+      for (const pa of pRows) {
+        if (seenPanels.has(pa)) continue
+        const band = [pa]; seenPanels.add(pa)
+        for (const pb of pRows) {
+          if (seenPanels.has(pb)) continue
+          const ar = pa.panelShell; const br = pb.panelShell
+          const ov = Math.min(ar.y + ar.height, br.y + br.height) - Math.max(ar.y, br.y)
+          if (ov >= Math.min(ar.height, br.height) * 0.5) { band.push(pb); seenPanels.add(pb) }
+        }
+        band.sort((p, q) => p.panelShell.x - q.panelShell.x)
+        panelGroups.push(band)
+      }
+    }
+    const buildPanelNode = (p, widthOverride) => {
+      const sh = p.panelShell
+      const labBottom = (p.label.y || 0) + (p.label.height || (p.label.fontSize || 14) * 1.4)
+      const valBottom = p.value
+        ? (p.value.y || 0) + (p.value.height || (p.value.fontSize || 14) * 1.4)
+        : labBottom
+      const padTop = Math.max(0, Math.round((p.label.y || 0) - sh.y))
+      const padLeft = Math.max(0, Math.round((p.dot ? p.dot.x : p.label.x) - sh.x))
+      const padBottom = Math.max(0, Math.round((sh.y + sh.height) - Math.max(valBottom, labBottom)))
+      const rowGap = Math.max(0, Math.round((p.value ? p.value.y : labBottom) - labBottom))
+      const col = container('Column', {
+        width: String(Math.round(widthOverride || sh.width)), direction: 'column', align: 'flex-start',
+        gap: String(rowGap), padding: `${padTop} 0 ${padBottom} ${padLeft}`, flexShrink: 0,
+      })
+      setStyleChild(col, 'rect', 'height', String(Math.round(sh.height)))
+      applyShellBackground(col, sh)
+      const line1 = container('Row', {
+        width: '100%', align: 'center', justify: 'flex-start',
+        gap: String(p.dot ? Math.max(0, p.dot.gap) : 0),
+      })
+      if (p.dot) {
+        const dotNode = container('Column', { direction: 'column', flexShrink: 0 })
+        ensureStyleGroup(dotNode, 'background')
+        ensureStyleGroup(dotNode, 'borderRadius')
+        setStyleChild(dotNode, 'rect', 'width', String(p.dot.w || 8))
+        setStyleChild(dotNode, 'rect', 'height', String(p.dot.h || 8))
+        setStyleChild(dotNode, 'background', 'backgroundType', '01')
+        setStyleChild(dotNode, 'background', 'backgroundColor', hexToRgba(p.dot.color || '#CCCCCC'))
+        setStyleChild(dotNode, 'borderRadius', 'borderRadiusType', '0')
+        setStyleChild(dotNode, 'borderRadius', 'borderRadius', String(Math.round((p.dot.w || 8) / 2)))
+        line1.slots[0].components.push(dotNode)
+      }
+      const labNode = textFromSpec({ ...p.label, align: 'left' })
+      ensureStyleGroup(labNode, 'flex')
+      setStyleChild(labNode, 'flex', 'flexShrink', '0')
+      line1.slots[0].components.push(labNode)
+      col.slots[0].components.push(line1)
+      if (p.value || p.tag || (p.subValues || []).length) {
+        // 值行与标签文本左对齐（圆点只缩进行1）：缺这段内缩会让金额顶到壳左沿
+        const line2PadLeft = Math.max(0, Math.round(
+          ((p.value ? p.value.x : p.label.x) || 0) - sh.x - padLeft))
+        const tagX = p.tag ? (p.tag.right || 0) - (p.tag.w || 0) : null
+        const anchorRight = p.value
+          ? (p.value.x || 0) + (p.value.width || 0)
+          : (p.label.x || 0) + (p.label.width || 0)
+        const line2 = container('Row', {
+          width: '100%', align: 'center', justify: 'flex-start',
+          gap: p.tag ? String(Math.max(0, Math.round(tagX - anchorRight))) : T.gap('tight'),
+          padding: `0 0 0 ${line2PadLeft}`,
+        })
+        if (p.value) {
+          const valNode = textFromSpec(applyLiteralBind({ ...p.value, align: 'left' }, sem.bindings.literalBind))
+          ensureStyleGroup(valNode, 'flex')
+          setStyleChild(valNode, 'flex', 'flexShrink', '0')
+          line2.slots[0].components.push(valNode)
+        }
+        for (const sv of (p.subValues || [])) {
+          line2.slots[0].components.push(textFromSpec({ ...sv, align: 'left' }))
+        }
+        if (p.tag) {
+          const tagNode = container('Row', { align: 'center', justify: 'center', flexShrink: 0 })
+          ensureStyleGroup(tagNode, 'rect')
+          setStyleChild(tagNode, 'rect', 'width', String(p.tag.w || 24))
+          setStyleChild(tagNode, 'rect', 'height', String(p.tag.h || 14))
+          ensureStyleGroup(tagNode, 'background')
+          ensureStyleGroup(tagNode, 'borderRadius')
+          // 标注缺陷：tag 壳 fill 常报成描边同色（实为浅底），同亮度会让彩色字隐入同色底
+          let tagFill = p.tag.fill
+          if (p.tag.borderColor && tagFill
+            && Math.abs(colorLuminance(tagFill) - colorLuminance(p.tag.color)) < 0.08) {
+            tagFill = tintHex(p.tag.borderColor, 0.08)
+          }
+          if (tagFill) {
+            setStyleChild(tagNode, 'background', 'backgroundType', '01')
+            setStyleChild(tagNode, 'background', 'backgroundColor', hexToRgba(tagFill))
+          }
+          if (p.tag.borderColor) {
+            ensureStyleGroup(tagNode, 'border')
+            setStyleChild(tagNode, 'border', 'isBorder', '1')
+            setStyleChild(tagNode, 'border', 'borderWidth', '1')
+            setStyleChild(tagNode, 'border', 'borderStyle', 'solid')
+            setStyleChild(tagNode, 'border', 'borderColor', hexToRgba(p.tag.borderColor))
+          }
+          setStyleChild(tagNode, 'borderRadius', 'borderRadiusType', '0')
+          setStyleChild(tagNode, 'borderRadius', 'borderRadius', String(Math.round(p.tag.radius || 2)))
+          const tagText = textFromSpec({ text: p.tag.text, color: p.tag.color, fontSize: p.tag.fontSize, align: 'center' })
+          ensureStyleGroup(tagText, 'flex')
+          setStyleChild(tagText, 'flex', 'flexShrink', '0')
+          tagNode.slots[0].components.push(tagText)
+          line2.slots[0].components.push(tagNode)
+        }
+        col.slots[0].components.push(line2)
+      }
+      return col
+    }
     for (const fr of sorted) {
+      // —— 对比面板行：壳内左对齐两行（标签行 + 值/tag 行），并排壳合成一行绝对定位带 ——
+      if (fr.panelShell) {
+        const group = panelGroups.find((g) => g.includes(fr)) || [fr]
+        if (group[0] !== fr) continue
+        const bandTop = Math.min(...group.map((p) => p.panelShell.y))
+        const bandBottom = Math.max(...group.map((p) => p.panelShell.y + p.panelShell.height))
+        const bandLeft = Math.min(...group.map((p) => p.panelShell.x))
+        const bandRight = Math.max(...group.map((p) => p.panelShell.x + p.panelShell.width))
+        const cmpTop = previousFormBottom == null
+          ? (semanticTopGap(bandTop) ?? T.pad('section'))
+          : Math.max(0, Math.round(bandTop - previousFormBottom))
+        // 面板间连接件（横跨壳间隙的小切片，如对比箭头）收进带内，避免孤立块另起一行
+        const claimedByRows = new Set((sem.formRows || [])
+          .flatMap((p2) => [p2.rightAffordanceSlice, p2.leftIconSlice, p2.trailingIconSlice, p2.valueLeadSlice])
+          .filter(Boolean))
+        const connectors = group.length > 1 ? (sem.slices || []).filter((s2) => {
+          const r2 = rect(s2)
+          const w2 = r2.width || 0; const h2 = r2.height || 0
+          if (w2 < 10 || w2 > 44 || h2 < 10 || h2 > 44) return false
+          if (claimedByRows.has(s2)) return false
+          const cx = (r2.x || 0) + w2 / 2; const cy = (r2.y || 0) + h2 / 2
+          if (cx < bandLeft - 4 || cx > bandRight + 4 || cy < bandTop || cy > bandBottom) return false
+          return !group.some((p) => rectInside(p.panelShell, r2, 0))
+        }).sort((p, q) => (rect(p).x || 0) - (rect(q).x || 0)) : []
+        if (connectors.length && Array.isArray(sem.isolatedBlocks)) {
+          sem.isolatedBlocks = sem.isolatedBlocks.filter((b) => !connectors.includes(b.element))
+        }
+        let bandNode
+        if (group.length > 1 || connectors.length) {
+          // 渲染器无绝对定位（position 组被忽略）且组件 overflow 默认 hidden：
+          // 并排壳用 flex Row 精确宽度排布；跨壳连接件（对比箭头）作为**末尾**子节点 +
+          // 负 marginLeft 拉回设计 x（末尾保证它绘制在两侧壳背景之上），竖直居中于带高。
+          bandNode = container('Row', {
+            width: '100%', direction: 'row', align: 'flex-start', justify: 'flex-start', gap: '0',
+          })
+          let cursor = 0
+          for (let gi = 0; gi < group.length; gi++) {
+            const p = group[gi]
+            bandNode.slots[0].components.push(buildPanelNode(p))
+            cursor += Math.round(p.panelShell.width)
+            const next = group[gi + 1]
+            if (next) {
+              const gapW = Math.max(0, Math.round(next.panelShell.x - (p.panelShell.x + p.panelShell.width)))
+              if (gapW > 0) {
+                const spacer = container('Column', { direction: 'column', flexShrink: 0 })
+                ensureStyleGroup(spacer, 'rect')
+                setStyleChild(spacer, 'rect', 'width', String(gapW))
+                setStyleChild(spacer, 'rect', 'height', String(Math.round(bandBottom - bandTop)))
+                bandNode.slots[0].components.push(spacer)
+                cursor += gapW
+              }
+            }
+          }
+          for (const cn of connectors) {
+            const holder = container('Column', {
+              direction: 'column', justify: 'center', align: 'center', flexShrink: 0,
+            })
+            ensureStyleGroup(holder, 'rect')
+            setStyleChild(holder, 'rect', 'width', String(Math.round(rect(cn).width || 0)))
+            setStyleChild(holder, 'rect', 'height', String(Math.round(bandBottom - bandTop)))
+            ensureStyleGroup(holder, 'margin')
+            setStyleChild(holder, 'margin', 'marginType', '1')
+            setStyleChild(holder, 'margin', 'marginLeft', String(Math.round((rect(cn).x || 0) - bandLeft - cursor))
+            )
+            setStyleChild(holder, 'margin', 'marginTop', '0')
+            setStyleChild(holder, 'margin', 'marginRight', '0')
+            setStyleChild(holder, 'margin', 'marginBottom', '0')
+            const media = imageOrPlaceholder(cn, sem.slicesExports)
+            if (media) {
+              setStyleChild(media, 'rect', 'width', String(Math.round(rect(cn).width || 0)))
+              setStyleChild(media, 'rect', 'height', String(Math.round(rect(cn).height || 0)))
+              holder.slots[0].components.push(media)
+            }
+            bandNode.slots[0].components.push(holder)
+            cursor += Math.round(rect(cn).width || 0)
+          }
+        } else {
+          bandNode = buildPanelNode(group[0])
+        }
+        const bandWrap = container('Row', {
+          width: '100%', direction: 'row', justify: 'flex-start', align: 'center',
+          padding: `${cmpTop} ${Math.max(0, Math.round(buildCardRight - bandRight))} 0 ${Math.max(0, Math.round(bandLeft - buildCardLeft))}`,
+        })
+        bandWrap.slots[0].components.push(bandNode)
+        formHost.slots[0].components.push(bandWrap)
+        registerSemanticY(bandWrap, bandTop)
+        formGeomByNode.set(bandWrap, { top: bandTop, bottom: bandBottom })
+        previousFormBottom = bandBottom
+        continue
+      }
       // ① 结构 + ② 布局：外层水平容器，左右两端对齐
       // 通用布局规则：标签为固定型（flexShrink:0 不被挤压），右簇为撑满型（width:100%+flexShrink:1）
       // 行视觉顶/底沿：label/value 文本与行尾件（pill 按钮、箭头、左图标）的几何并集。
@@ -6343,11 +8569,23 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
       setStyleChild(fill, 'borderRadius', 'borderRadius', String(Math.round((bar.height || 4) / 2)))
       track.slots[0].components.push(fill)
     }
-    hostFor(bar.y).slots[0].components.push(track)
+    insertSemantic(hostFor(bar.y), track, bar.y)
   }
 
   // —— 4. 副金额对（多组并排）→ 每对金额各自抽 inputParam + 千分号表达式 ——
-  if (sem.subAmounts.length && !sem._subAmountsConsumed) {
+const subPanelRects = (sem.panelRows || []).filter(Boolean)
+const subInPanel = (el) => {
+  if (!el) return false
+  const er = rect(el)
+  const cx = (er.x || 0) + (er.width || 0) / 2
+  const cy = (er.y || 0) + (er.height || 0) / 2
+  return subPanelRects.some((pr) => cx >= (pr.x || 0) && cx <= (pr.x || 0) + (pr.width || 0)
+    && cy >= (pr.y || 0) && cy <= (pr.y || 0) + (pr.height || 0))
+}
+// 副金额对落在面板壳内时由面板行渲染（产品卡右列），全局 space-around 行会把
+// 标签/金额甩到面板之外（曾致产品卡右列逃逸+第二张卡空壳）。
+const subsActive = sem.subAmounts.filter((sub) => !subInPanel(sub.labelEl) && !subInPanel(sub.valueEl))
+if (subsActive.length && !sem._subAmountsConsumed) {
     const panel = sem.subAmountPanel
     const panelOuter = panel
       ? container('Column', { width: '100%', direction: 'column', padding: `${semanticTopGap(panel.y) ?? 0} 0 0 0` })
@@ -6369,8 +8607,8 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
       panelOuter.slots[0].components.push(wrapHost)
       insertSemantic(card, panelOuter, panel.y)
     }
-    for (let i = 0; i < sem.subAmounts.length; i++) {
-      const sub = sem.subAmounts[i]
+  for (let i = 0; i < subsActive.length; i++) {
+    const sub = subsActive[i]
       // 变量名：副金额标签词典（本期应还→currentDueAmount / 最低应还→minimumDueAmount），
       // 未命中 → 角色名 amount（uniqueKey 自动加序号区分同构多组）
       const varName = uniqueKey(fieldKeyFor(sub.label) || 'amount', usedTopKeys)
@@ -6505,6 +8743,7 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
     // 枚举统计行兜底（同 midAux，见 tryRenderEnumStat）
     const statT = tryRenderEnumStat(pat)
     row.slots[0].components.push(statT || textFromSpec({ ...pat, align: 'left' }))
+    if (!statT) appendInlineTrailSlice(row, pat)
     insertSemantic(card, row, pat.y)
   }
 
@@ -6539,9 +8778,16 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
     // 无壳时 listTop 是首行内容顶沿，渲染行内还有 padTop，需扣除避免重复计数。
     const firstHasShell = sem.sampleItems.length
       && sem.sampleItems[0].rowTop != null && sem.sampleItems[0].rowTop < sem.sampleItems[0].y
-    const titleBottomGap = listTop == null
-      ? (semanticBottomGap(titleRenderedBottom) ?? T.pad('section'))
-      : Math.max(0, Math.round(listTop - titleRenderedBottom) - (firstHasShell ? 0 : listRowPaddingTop))
+    // 标题与列表之间还夹着其它语义块（对比面板/段落等）时不能把间距桥接进标题行底 padding：
+    // 否则中间块被推离设计位（曾致对比面板下移 200+px），中间块自己的顶距会负责衔接。
+    const nextTopAfterTitle = nextSemanticTop(titleRenderedBottom)
+    const hasIntermediateSection = nextTopAfterTitle != null
+      && (listTop == null || nextTopAfterTitle < listTop - 2)
+    const titleBottomGap = hasIntermediateSection
+      ? 0
+      : listTop == null
+        ? (semanticBottomGap(titleRenderedBottom) ?? T.pad('section'))
+        : Math.max(0, Math.round(listTop - titleRenderedBottom) - (firstHasShell ? 0 : listRowPaddingTop))
     // 行尾右侧操作件（如标题行眼睛图标）：space-between 钉在 spec 右沿
     const ltAffordEl = sem.listTitle.rightSliceEl || null
     const ltAffordR = ltAffordEl ? rect(ltAffordEl) : null
@@ -6569,22 +8815,48 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
   if ((sem.listTitle || sem.sampleItems.length >= 2) && sem.sampleItems.length) {
     // 列表数据绑定：变量名由列表标题语义推断（明细→detailList），未命中用中性 'list'
     const listVar = uniqueKey(listVarName(sem.listTitle), usedTopKeys)
+    // 逐行壳色不同（蓝/橙/绿 tint）：模板背景改绑 $rowBg（渐变取 stop 均值近似纯色）
+    const shellRepColor = (it2) => {
+      if (it2.fill) return it2.fill
+      const stops = String(it2.gradient || '').match(/rgba?\([^)]*\)/g) || []
+      if (!stops.length) return ''
+      let r = 0; let g = 0; let b = 0; let a = 0
+      for (const st of stops) {
+        const parts = st.replace(/rgba?\(/, '').replace(/\)/, '').split(',').map((v) => Number(v) || 0)
+        r += parts[0] || 0; g += parts[1] || 0; b += parts[2] || 0; a += parts[3] == null ? 1 : parts[3]
+      }
+      const n2 = stops.length
+      return `rgba(${Math.round(r / n2)}, ${Math.round(g / n2)}, ${Math.round(b / n2)}, ${Math.round((a / n2) * 100) / 100})`
+    }
     addParam(listVar, 'array', (sem.allItems || sem.sampleItems).map((it) => ({
       title: it.title,
       titleSuffix: it.titleSuffix || '',
       titleRight: it.titleRight || '',
       time: it.time,
       desc: it.desc || '',
+      descRight: it.descRight || '',
       icon: it.icon || '',
+      rightIcon: it.rightIcon || '',
+      rowBg: shellRepColor(it) || '',
+      // 逐行渐变壳：背景渐变整串下行级绑定（$rowGradient），纯色壳回退 $rowBg
+      rowGradient: it.gradient ? gradientWithOpacity(it.gradient, it.opacity ?? 1) : '',
       action: it.action || '',
       // 行尾 affordance（眼睛/箭头等）：逐行数据驱动，无此行级操作件的行绑定空串 + v-show 隐藏
       afford: it.affordanceUrl || '',
       // 金额作为数字存储（剥千分号/¥符号/负号），渲染时用表达式还原
       itemAmount: parseAmount(it.amount) !== null ? parseAmount(it.amount) : it.amount,
+      // 货币前缀逐行存储：列表模板表达式共用，符号差异（首行 $ 次行 ¥）靠数据区分
+      itemAmountCur: currencyPrefixOf(it.amount),
+      // 行内进度条比率（进度条落入列表行 y 带时挂接到行数据）
+      barRatio: it.bars && it.bars[0] && it.bars[0].segments && it.bars[0].segments[0]
+        ? it.bars[0].segments[0].ratio : 0,
       // 复合行金额列组：扁平字段（amtLabel1/amtValue1…），值存数字由表达式格式化
       ...Object.fromEntries((it.amounts || []).slice(0, 4).flatMap((pp, pi) => [
         ['amtLabel' + (pi + 1), pp.label],
         ['amtValue' + (pi + 1), parseAmount(pp.value) !== null ? parseAmount(pp.value) : pp.value],
+        ['amtCur' + (pi + 1), currencyPrefixOf(pp.value)],
+        ['amtTag' + (pi + 1), pp.tagText || ''],
+        ['amtTagIcon' + (pi + 1), pp.tagIcon || ''],
       ])),
     })))
     // 列表项模板（外层 Column：内层 Row[左 Column(标题+时间) 撑开 + 右 Row(金额+箭头) 靠右] + 底部 Divider）
@@ -6593,9 +8865,49 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
     //      内层 Row 承载原 leftCol + rightRow 保持横向并排，Divider 作为 Column 第二个子节点纵向跟随其后
     const firstItem = sem.sampleItems[0] || { title: '', time: '', amount: '' }
     const itemAmtVar = 'itemAmount'
+    // 行壳（设计行级圆角填充底）：模板承载底色/圆角/内边距/高度，列表按壳宽内缩
+    const rowShell = (firstItem.fill || firstItem.gradient)
+      ? { fill: firstItem.fill, gradient: firstItem.gradient, radius: firstItem.radius, opacity: firstItem.opacity }
+      : null
+    // 壳间分离（相邻壳间隙 ≥2）：设计用间隙分行而非分割线 → 模板不发 Divider，row-spacing 承间隙
+    const shellsDiffer = !!rowShell
+      && sem.sampleItems.some((it2) => (it2.fill || it2.gradient) && (it2.fill || it2.gradient) !== (firstItem.fill || firstItem.gradient))
+    const shellsSeparated = !!rowShell && sem.sampleItems.every((it2) => it2.shellEl)
+      && sem.sampleItems.slice(1).every((it2, i2) => {
+        const prev = rect(sem.sampleItems[i2].shellEl)
+        const cur = rect(it2.shellEl)
+        return ((cur.y || 0) - ((prev.y || 0) + (prev.height || 0))) >= 2
+      })
     // 外层 Column：纵向堆叠内容行与分割线（不再用 Row，避免 Divider 并排）
     // 关键：container('Column', ...) 不会自动设 direction，必须显式传 direction:'column'，否则落到默认 row(横排)
     const itemTpl = container('Column', { direction: 'column', width: '100%', gap: T.gap('none') })
+    if (rowShell) {
+      if (shellsDiffer) {
+        // 行级壳色/壳渐变绑定：必须**改写** style-meta 自带的 backgroundColor/backgroundGradient
+        // 子项（追加第二个同名子项会让渲染器取到空值/绑定串原样进 doColor → 背景透明）。
+        ensureStyleGroup(itemTpl, 'background')
+        ensureStyleGroup(itemTpl, 'borderRadius')
+        const grp = (itemTpl.style.properties || []).find((pp) => pp.itemKey === 'background')
+        const setBound = (childKey, expr, fallback) => {
+          const child = (grp.itemChildren?.properties || []).find((cc) => cc.itemKey === childKey)
+          if (!child) return
+          child.itemValue = expr
+          child.itemValueFrom = '1'
+          child.itemDefaultValue = fallback
+        }
+        if (firstItem.gradient) {
+          setStyleChild(itemTpl, 'background', 'backgroundType', '03')
+          setBound('backgroundGradient', '$rowGradient', gradientWithOpacity(firstItem.gradient, firstItem.opacity ?? 1))
+        } else {
+          setStyleChild(itemTpl, 'background', 'backgroundType', '01')
+          setBound('backgroundColor', '$rowBg', shellRepColor(firstItem))
+        }
+        setStyleChild(itemTpl, 'borderRadius', 'borderRadiusType', '0')
+        setStyleChild(itemTpl, 'borderRadius', 'borderRadius', String(Math.round(rowShell.radius || 8)))
+      } else {
+        applyShellBackground(itemTpl, rowShell)
+      }
+    }
     let compositeAmountsRow = null
     // 内层 Row：承载原 leftCol + rightRow（横向并排）
     const rowHeights = sem.sampleItems.map((item) => item.rowHeight || item.contentHeight || 0).filter(Boolean)
@@ -6612,7 +8924,13 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
     // 行高估算必须与节点实际渲染盒高同度量：模板文本未传 spec 高度 → 自然撑高 ≈ round(fs×1.53)。
     // 估算用 ×1.5 会低估 0.5-1px/行，paddingBottom 吸收不足 → 行高超出壳高中位，逐行累计下漂。
     const titleLineHeight = Math.max(20, Math.round((firstItem.titleFontSize || T.font('body')) * 1.53))
-    const secondaryFontSize = firstItem.desc ? firstItem.descFontSize : (firstItem.time ? T.font('small') : 0)
+    // descInline: desc on same baseline as title (dy < fontSize*0.8) and after title right edge
+    const descInline = !!(firstItem.desc
+      && Number.isFinite(firstItem.descY) && Number.isFinite(firstItem.y)
+      && Number.isFinite(firstItem.titleX) && Number.isFinite(firstItem.titleW)
+      && (firstItem.descY - firstItem.y) < Math.round((firstItem.titleFontSize || 14) * 0.8)
+      && (firstItem.descX || 0) >= (firstItem.titleX || 0) + (firstItem.titleW || 0))
+    const secondaryFontSize = (firstItem.desc && !descInline) ? firstItem.descFontSize : (firstItem.time ? T.font('small') : 0)
     const secondaryLineHeight = secondaryFontSize ? Math.max(16, Math.round(secondaryFontSize * 1.53)) : 0
     // 标题→副行（desc/time）纵距取标注中位（设计的行距并非常量；统一 tight(4) 会把副行
     // 压偏 +2px/项）。纵距锚渲染行盒（fs×1.5 自然行盒，实测渲染度量）：descY - (titleY + 盒高)。
@@ -6624,15 +8942,20 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
       ? String(_titleDescGaps.slice().sort((a, b) => a - b)[Math.floor(_titleDescGaps.length / 2)])
       : T.gap('tight')
     const isCompositeItems = !!(firstItem.amounts && firstItem.amounts.length >= 2)
+    const _barContentH = (firstItem.bars && firstItem.bars[0])
+      ? Math.round((firstItem.titleFontSize || 14) * 0.5) * 2 + (firstItem.bars[0].height || 4)
+      : 0
     const renderedContentHeight = isCompositeItems && firstItem.contentHeight
       ? Math.round(firstItem.contentHeight)
       : Math.round(titleLineHeight
-        + (secondaryLineHeight ? (parseInt(titleDescGap, 10) || 0) + secondaryLineHeight : 0))
+        + (secondaryLineHeight ? (parseInt(titleDescGap, 10) || 0) + secondaryLineHeight : 0)
+        + _barContentH)
     const listRowPaddingBottom = Math.max(0,
       listRowHeight - listRowPaddingTop - renderedContentHeight - dividerHeight)
     const isComposite = !!(firstItem.amounts && firstItem.amounts.length >= 2)
     // 复合行：innerRow 只承载标题行，底距为 0（金额行自带 spec 顶距/底距）
-    const innerPadBottom = isComposite ? 0 : listRowPaddingBottom
+    const _hasBar = !!(firstItem.bars && firstItem.bars[0])
+    const innerPadBottom = isComposite ? 0 : (_hasBar ? 0 : listRowPaddingBottom)
     // 行图标与标题列的间距取 spec 实测中位（标题 x - 图标右沿），无图标时为 0
     const iconGaps = sem.sampleItems.map((item) => item.iconGap).filter((v) => Number.isFinite(v))
     const innerGap = iconGaps.length
@@ -6651,7 +8974,7 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
     const innerRow = container('Row', {
       width: '100%',
       align: 'center',
-      padding: `${listRowPaddingTop} ${listPadRight} ${innerPadBottom} ${listPadLeft}`,
+      padding: `${rowShell && firstItem.padTop != null ? firstItem.padTop : listRowPaddingTop} ${rowShell && firstItem.padRight != null ? firstItem.padRight : listPadRight} ${innerPadBottom + (shellsSeparated ? dividerHeight : 0)} ${rowShell && firstItem.padLeft != null ? firstItem.padLeft : listPadLeft}`,
       gap: innerGap,
     })
     const leftCol = container('Column', { direction: 'column', gap: titleDescGap, width: '100%' })
@@ -6663,6 +8986,8 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
     const withSuffix = sem.sampleItems.some((item) => item.titleSuffix)
     // 标题右侧同行文本（卡号等）：间距取 spec 几何（标题右沿→文本左沿）
     const withTitleRight = sem.sampleItems.some((item) => item.titleRight)
+    // 行内联 affordance（紧跟标题的眼睛图标）：模板在标题行内联渲染，逐行 v-show
+    const inlineAffordSample = sem.sampleItems.find((item) => item.affordInline && item.affordanceUrl)
     // 行内操作：所有样本行都有操作 pill（如每行「删除」按钮）
     const withAction = sem.sampleItems.length > 0 && sem.sampleItems.every((item) => item.action)
     const titleText = textFromSpec({
@@ -6670,16 +8995,50 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
       fontWeight: firstItem.titleFontWeight,
       bind: '$title', defaultValue: firstItem.title,
     })
-    if (withSuffix || withTitleRight) {
+    if (descInline && !withSuffix && !withTitleRight && !inlineAffordSample) {
+      const _inlineGap = Math.max(2, Math.round((firstItem.descX || 0)
+        - ((firstItem.titleX || 0) + (firstItem.titleW || 0))))
+      const titleRow = container('Row', { direction: 'row', align: 'center', gap: String(_inlineGap) })
+      ensureStyleGroup(titleRow, 'flex')
+      titleRow.slots[0].components.push(titleText)
+      titleRow.slots[0].components.push(textFromSpec({
+        text: '$desc', color: firstItem.descColor, fontSize: firstItem.descFontSize || T.font('small'),
+        fontWeight: firstItem.descFontWeight,
+        bind: '$desc', defaultValue: firstItem.desc,
+      }))
+      leftCol.slots[0].components.push(titleRow)
+    } else if (withSuffix || withTitleRight || inlineAffordSample) {
       // 标题+后缀/右侧同行文本（基线对齐）：Row[title, suffix?, titleRight?]
       const titleRow = container('Row', {
         direction: 'row', align: 'center',
-        gap: withTitleRight && !withSuffix
-          ? String(Math.max(4, Math.round(firstItem.titleRightGap || 8)))
-          : T.gap('tight'),
+        justify: (withTitleRight && !withSuffix && !inlineAffordSample) ? 'space-between' : 'flex-start',
+        gap: inlineAffordSample && !withTitleRight && !withSuffix
+          ? String(inlineAffordSample.affordInlineGap || 8)
+          : (withTitleRight && !withSuffix)
+            ? String(Math.max(4, Math.round(firstItem.titleRightGap || 8)))
+            : T.gap('tight'),
       })
       ensureStyleGroup(titleRow, 'flex')
       titleRow.slots[0].components.push(titleText)
+      // space-between 布局下标题须可收缩（flexShrink=1），否则长标题把 titleRight 挤出右沿溢出。
+      if (withTitleRight && !withSuffix && !inlineAffordSample) {
+        ensureStyleGroup(titleText, 'flex')
+        setStyleChild(titleText, 'flex', 'flexShrink', '1')
+      }
+      if (inlineAffordSample) {
+        const iaR = rect(inlineAffordSample.affordanceEl)
+        const inlineAffordImg = comp('Image')
+        ensureStyleGroup(inlineAffordImg, 'rect')
+        ensureStyleGroup(inlineAffordImg, 'image')
+        ensureStyleGroup(inlineAffordImg, 'flex')
+        setStyleChild(inlineAffordImg, 'rect', 'width', String(Math.round(iaR?.width || 20)))
+        setStyleChild(inlineAffordImg, 'rect', 'height', String(Math.round(iaR?.height || 20)))
+        setStyleChild(inlineAffordImg, 'flex', 'flexShrink', '0')
+        setStyleChild(inlineAffordImg, 'image', 'cropMode', '01')
+        inlineAffordImg.properties = [boundProp('value', '$afford', inlineAffordSample.affordanceUrl || '')]
+        inlineAffordImg.directives = [vShowDirective("$afford != ''")]
+        titleRow.slots[0].components.push(inlineAffordImg)
+      }
       if (withSuffix) {
         titleRow.slots[0].components.push(textFromSpec({
           text: '$titleSuffix', color: firstItem.titleSuffixColor || '#999999',
@@ -6725,15 +9084,67 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
         const pairCol = container('Column', { direction: 'column', gap: labelValueGap })
         ensureStyleGroup(pairCol, 'flex')
         setStyleChild(pairCol, 'flex', 'flexShrink', '0')
-        pairCol.slots[0].components.push(textFromSpec({
+        const labelRow = container('Row', { direction: 'row', align: 'center', gap: String(pp.tagGap ?? 6) })
+        ensureStyleGroup(labelRow, 'flex')
+        labelRow.slots[0].components.push(textFromSpec({
           text: '$amtLabel' + (pi + 1), color: pp.labelColor || '#999999',
           fontSize: pp.labelFontSize || T.font('small'), fontWeight: pp.labelFontWeight,
           bind: '$amtLabel' + (pi + 1), defaultValue: pp.label,
         }))
+        // 内联 tag 壳：样式取首个带 tag 的样本行，内容逐行绑定；空行 v-show 隐藏
+        const tagSrc = sem.sampleItems.map((it2) => (it2.amounts || [])[pi]).find((aa) => aa && (aa.tagText || aa.tagIcon)) || pp
+        if (tagSrc.tagW || tagSrc.tagText || tagSrc.tagIcon) {
+          const tag = container('Row', {
+            direction: 'row', align: 'center', justify: 'center',
+            gap: String(tagSrc.tagIconGap ?? 2),
+            padding: '0 ' + (tagSrc.tagPadRight ?? 4) + ' 0 ' + (tagSrc.tagPadLeft ?? 8),
+          })
+          ensureStyleGroup(tag, 'rect')
+          ensureStyleGroup(tag, 'background')
+          ensureStyleGroup(tag, 'borderRadius')
+          ensureStyleGroup(tag, 'flex')
+          setStyleChild(tag, 'rect', 'width', String(tagSrc.tagW || 54))
+          setStyleChild(tag, 'rect', 'height', String(tagSrc.tagH || 16))
+          setStyleChild(tag, 'flex', 'flexShrink', '0')
+          if (tagSrc.tagFill) {
+            setStyleChild(tag, 'background', 'backgroundType', '01')
+            setStyleChild(tag, 'background', 'backgroundColor', hexToRgba(tagSrc.tagFill, tagSrc.tagOpacity ?? 1))
+          }
+          if (tagSrc.tagBorder) {
+            ensureStyleGroup(tag, 'border')
+            setStyleChild(tag, 'border', 'isBorder', '1')
+            setStyleChild(tag, 'border', 'borderWidth', '1')
+            setStyleChild(tag, 'border', 'borderStyle', 'solid')
+            setStyleChild(tag, 'border', 'borderColor', hexToRgba(tagSrc.tagBorder))
+          }
+          setStyleChild(tag, 'borderRadius', 'borderRadiusType', '0')
+          setStyleChild(tag, 'borderRadius', 'borderRadius', String(tagSrc.tagRadius || 4))
+          tag.slots[0].components.push(textFromSpec({
+            text: '$amtTag' + (pi + 1), color: tagSrc.tagTextColor || '#FF8401',
+            fontSize: tagSrc.tagFontSize || T.font('small'),
+            bind: '$amtTag' + (pi + 1), defaultValue: pp.tagText || '',
+          }))
+          if (tagSrc.tagIconW) {
+            const tagIcon = comp('Image')
+            ensureStyleGroup(tagIcon, 'rect')
+            ensureStyleGroup(tagIcon, 'image')
+            ensureStyleGroup(tagIcon, 'flex')
+            setStyleChild(tagIcon, 'rect', 'width', String(tagSrc.tagIconW))
+            setStyleChild(tagIcon, 'rect', 'height', String(tagSrc.tagIconH))
+            setStyleChild(tagIcon, 'flex', 'flexShrink', '0')
+            setStyleChild(tagIcon, 'image', 'cropMode', '01')
+            tagIcon.properties = [boundProp('value', '$amtTagIcon' + (pi + 1), pp.tagIcon || '')]
+            tagIcon.directives = [vShowDirective("$amtTagIcon" + (pi + 1) + " != ''")]
+            tag.slots[0].components.push(tagIcon)
+          }
+          tag.directives = [vShowDirective("($amtTag" + (pi + 1) + " || $amtTagIcon" + (pi + 1) + ") != ''")]
+          labelRow.slots[0].components.push(tag)
+        }
+        pairCol.slots[0].components.push(labelRow)
         pairCol.slots[0].components.push(textFromSpec({
           text: pp.value, color: pp.valueColor || '#111111',
           fontSize: pp.valueFontSize || T.font('title'), fontWeight: pp.valueFontWeight,
-          bind: amountExpr('amtValue' + (pi + 1), pp.value), defaultValue: pp.value,
+          bind: amountExpr('amtValue' + (pi + 1), pp.value, { prefixVar: 'amtCur' + (pi + 1) }), defaultValue: pp.value,
         }))
         amountsRow.slots[0].components.push(pairCol)
       })
@@ -6747,12 +9158,27 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
         - titleLineHeight - (firstItem.labelGapTop ?? 8) - _amountsContentH - dividerHeight))
       setStyleChild(amountsRow, 'padding', 'paddingBottom', String(_amountsPadBottom))
       compositeAmountsRow = amountsRow
-    } else if (firstItem.desc) {
-      leftCol.slots[0].components.push(textFromSpec({
+    } else if (firstItem.desc && !descInline) {
+      const _descText = textFromSpec({
         text: '$desc', color: firstItem.descColor, fontSize: firstItem.descFontSize || T.font('small'),
         fontWeight: firstItem.descFontWeight,
         bind: '$desc', defaultValue: firstItem.desc,
-      }))
+      })
+      // desc 的 spec x 坐标可能与标题左沿不一致（百分比文本缩进在标题右沿之后），
+      // 用左 padding 补齐差值使 desc 对齐 spec 位置。
+      if (firstItem.descX != null && firstItem.y != null) {
+        const _titleX = firstItem.rowLeftEdge || (rect(card).x || 0) + 16
+        const _descIndent = Math.max(0, Math.round((firstItem.descX || 0) - _titleX))
+        if (_descIndent >= 4) {
+          const _descWrap = container('Row', { width: '100%', justify: 'flex-start', align: 'flex-start', padding: `0 0 0 ${_descIndent}` })
+          _descWrap.slots[0].components.push(_descText)
+          leftCol.slots[0].components.push(_descWrap)
+        } else {
+          leftCol.slots[0].components.push(_descText)
+        }
+      } else {
+        leftCol.slots[0].components.push(_descText)
+      }
     } else if (firstItem.time) {
       leftCol.slots[0].components.push(textFromSpec({
         text: '$time', color: firstItem.descColor || '#999999',
@@ -6777,7 +9203,7 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
           text: firstItem.amount, color: firstItem.amountColor || '#111111',
           fontSize: firstItem.amountFontSize || T.font('title'),
           fontWeight: firstItem.amountFontWeight,
-          bind: amountExpr(itemAmtVar, firstItem.amount),
+          bind: amountExpr(itemAmtVar, firstItem.amount, { prefixVar: 'itemAmountCur' }),
           defaultValue: firstItem.amount,
         }))
       }
@@ -6790,14 +9216,45 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
       rightRow.slots[0].components.push(rightCol)
     }
     // 无金额行（如名册行）不渲染金额节点：空文本会占位撑开行高
-    if (firstItem.amount && !withDescTime) {
-      rightRow.slots[0].components.push(textFromSpec({
+    if ((firstItem.amount || firstItem.descRight) && !withDescTime) {
+      // 标题行已渲染 $titleRight 时（同一金额元素被 titleRight 通道接管），
+      // 右列不再重复渲染金额：仅保留 descRight 行（交易行余额列），否则同一金额双份重影。
+      const amountText = (!firstItem.titleRight && firstItem.amount) ? textFromSpec({
         text: firstItem.amount, color: firstItem.amountColor || '#111111',
         fontSize: firstItem.amountFontSize || T.font('title'),
         fontWeight: firstItem.amountFontWeight,
-        bind: amountExpr(itemAmtVar, firstItem.amount),
+        bind: amountExpr(itemAmtVar, firstItem.amount, { prefixVar: 'itemAmountCur' }),
         defaultValue: firstItem.amount,
-      }))
+      }) : null
+      if (firstItem.descRight) {
+        // 行右列第二行：Column[amount, descRight] 右对齐（交易行余额行）
+        const rightCol2 = container('Column', { direction: 'column', align: 'flex-end', gap: titleDescGap })
+        ensureStyleGroup(rightCol2, 'flex')
+        setStyleChild(rightCol2, 'flex', 'flexShrink', '0')
+        // 右列与左列逐行顶对齐（金额行/余额行），垂直居中会让两行挤成一团
+        setStyleChild(rightRow, 'flex', 'alignItems', 'flex-start')
+        if (amountText) rightCol2.slots[0].components.push(amountText)
+        else if (firstItem.titleRight) {
+          // 金额被 titleRight 通道接管时，右列缺首行金额 → 用等高占位撑住间距，
+          // 否则 descRight 被顶到标题行基线（比 spec 偏高约一行）。
+          const amtH = Math.round((firstItem.amountFontSize || T.font('title')) * 1.4)
+          const spacer = container('Column', { direction: 'column', padding: '0' })
+          ensureStyleGroup(spacer, 'rect')
+          setStyleChild(spacer, 'rect', 'height', String(amtH))
+          setStyleChild(spacer, 'rect', 'width', '1')
+          ensureStyleGroup(spacer, 'flex')
+          setStyleChild(spacer, 'flex', 'flexShrink', '0')
+          rightCol2.slots[0].components.push(spacer)
+        }
+        rightCol2.slots[0].components.push(textFromSpec({
+          text: '$descRight', color: firstItem.descRightColor || '#999999',
+          fontSize: firstItem.descRightFontSize || T.font('small'),
+          bind: '$descRight', defaultValue: firstItem.descRight,
+        }))
+        rightRow.slots[0].components.push(rightCol2)
+      } else {
+        rightRow.slots[0].components.push(amountText)
+      }
     }
     // 右侧操作件：行内操作 pill（描边小按钮，如「删除」）优先；否则按右侧重复小媒体选择
     if (withAction) {
@@ -6829,7 +9286,7 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
     } else {
       // 逐行行尾 affordance（extract 阶段已按行顶沿对齐挂接）：$afford 数据驱动，
       // 无行级操作件的行（如末行）绑定空串 + v-show 隐藏，避免静态模板每行滥发。
-      const withRowAfford = sem.sampleItems.some((item) => item.affordanceUrl)
+      const withRowAfford = sem.sampleItems.some((item) => item.affordanceUrl && !item.affordInline)
       if (withRowAfford) {
         const affSample = sem.sampleItems.find((item) => item.affordanceEl)
         const affR = affSample ? rect(affSample.affordanceEl) : null
@@ -6862,6 +9319,20 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
       // 图标与文字列间距取 spec：标题 x - (图标 x + 图标宽)
       innerRow.slots[0].components.push(rowIcon)
     }
+    // 行右大图标（数据驱动 $rightIcon）：所有样本行都有时才带图标位
+    const withRightIcon = sem.sampleItems.length > 0 && sem.sampleItems.every((item) => item.rightIcon)
+    if (withRightIcon) {
+      const rIcon = comp('Image')
+      ensureStyleGroup(rIcon, 'rect')
+      ensureStyleGroup(rIcon, 'image')
+      ensureStyleGroup(rIcon, 'flex')
+      setStyleChild(rIcon, 'rect', 'width', String(firstItem.rightIconW || 48))
+      setStyleChild(rIcon, 'rect', 'height', String(firstItem.rightIconH || 48))
+      setStyleChild(rIcon, 'flex', 'flexShrink', '0')
+      setStyleChild(rIcon, 'image', 'cropMode', '01')
+      rIcon.properties = [boundProp('value', '$rightIcon', firstItem.rightIcon)]
+      rightRow.slots[0].components.push(rIcon)
+    }
     innerRow.slots[0].components.push(leftCol, rightRow)
     // 分割线（itemTpl 底部 1px Divider，颜色 #E9ECF2，作为 Column 子节点纵向跟在内容行之后）
     const divider = comp('Divider')
@@ -6872,15 +9343,77 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
     setStyleChild(divider, 'background', 'backgroundType', '01')
     setStyleChild(divider, 'background', 'backgroundColor', hexToRgba('#E9ECF2'))
     if (compositeAmountsRow) {
-      itemTpl.slots[0].components.push(innerRow, compositeAmountsRow, divider)
+      if (firstItem.bars && firstItem.bars[0]) {
+        const _bar = firstItem.bars[0]
+        const _barTrack = container('Row', { width: '100%', direction: 'row', justify: 'flex-start', align: 'center', gap: T.gap('none') })
+        const _barLPad = Math.max(0, Math.round(((_bar.x || buildCardLeft) - (rowShell ? (firstItem.rowLeftEdge || buildCardLeft) : buildCardLeft))))
+        const _barRPad = Math.max(0, Math.round(buildCardRight - ((_bar.x || buildCardLeft) + (_bar.width || 0))))
+        setStyleChild(_barTrack, 'padding', 'paddingType', '1')
+        setStyleChild(_barTrack, 'padding', 'paddingTop', String(Math.max(4, Math.round((firstItem.titleFontSize || 14) * 0.5))))
+        setStyleChild(_barTrack, 'padding', 'paddingBottom', String(Math.max(4, Math.round((firstItem.titleFontSize || 14) * 0.5))))
+        setStyleChild(_barTrack, 'padding', 'paddingLeft', String(_barLPad))
+        setStyleChild(_barTrack, 'padding', 'paddingRight', String(_barRPad))
+        ensureStyleGroup(_barTrack, 'background')
+        setStyleChild(_barTrack, 'background', 'backgroundType', '01')
+        setStyleChild(_barTrack, 'background', 'backgroundColor', hexToRgba(_bar.trackColor || '#F5F5F5'))
+        ensureStyleGroup(_barTrack, 'borderRadius')
+        setStyleChild(_barTrack, 'borderRadius', 'borderRadiusType', '0')
+        setStyleChild(_barTrack, 'borderRadius', 'borderRadius', String(Math.round((_bar.height || 4) / 2)))
+        const _barSeg = container('Row', { direction: 'row', flexShrink: 0 })
+        const _barSegW = (_barSeg.style.properties.find((g) => g.itemKey === 'rect')?.itemChildren?.properties?.find((p) => p.itemKey === 'width'))
+        if (_barSegW) { _barSegW.itemValueFrom = '1'; _barSegW.itemValue = "Math.round($barRatio * 100) + '%'"; _barSegW.itemDefaultValue = Math.round(((_bar.segments && _bar.segments[0] && _bar.segments[0].ratio) || 0) * 100) + '%' }
+        setStyleChild(_barSeg, 'rect', 'height', String(_bar.height || 4))
+        setStyleChild(_barSeg, 'flex', 'flexShrink', '0')
+        ensureStyleGroup(_barSeg, 'background')
+        setStyleChild(_barSeg, 'background', 'backgroundType', '01')
+        setStyleChild(_barSeg, 'background', 'backgroundColor', hexToRgba((_bar.segments && _bar.segments[0] && _bar.segments[0].color) || '#83B8F1'))
+        ensureStyleGroup(_barSeg, 'borderRadius')
+        setStyleChild(_barSeg, 'borderRadius', 'borderRadiusType', '0')
+        setStyleChild(_barSeg, 'borderRadius', 'borderRadius', String(Math.round((_bar.height || 4) / 2)))
+        _barTrack.slots[0].components.push(_barSeg)
+        itemTpl.slots[0].components.push(innerRow, compositeAmountsRow, _barTrack, ...(shellsSeparated ? [] : [divider]))
+      } else {
+        itemTpl.slots[0].components.push(innerRow, compositeAmountsRow, ...(shellsSeparated ? [] : [divider]))
+      }
     } else {
-      itemTpl.slots[0].components.push(innerRow, divider)
+      if (firstItem.bars && firstItem.bars[0]) {
+        const _bar2 = firstItem.bars[0]
+        const _barT2 = container('Row', { width: '100%', direction: 'row', justify: 'flex-start', align: 'center', gap: T.gap('none') })
+        const _lp2 = Math.max(0, Math.round(((_bar2.x || buildCardLeft) - (rowShell ? (firstItem.rowLeftEdge || buildCardLeft) : buildCardLeft))))
+        const _rp2 = Math.max(0, Math.round(buildCardRight - ((_bar2.x || buildCardLeft) + (_bar2.width || 0))))
+        setStyleChild(_barT2, 'padding', 'paddingType', '1')
+        setStyleChild(_barT2, 'padding', 'paddingTop', String(Math.max(4, Math.round((firstItem.titleFontSize || 14) * 0.5))))
+        setStyleChild(_barT2, 'padding', 'paddingBottom', String(Math.max(4, Math.round((firstItem.titleFontSize || 14) * 0.5))))
+        setStyleChild(_barT2, 'padding', 'paddingLeft', String(_lp2))
+        setStyleChild(_barT2, 'padding', 'paddingRight', String(_rp2))
+        ensureStyleGroup(_barT2, 'background')
+        setStyleChild(_barT2, 'background', 'backgroundType', '01')
+        setStyleChild(_barT2, 'background', 'backgroundColor', hexToRgba(_bar2.trackColor || '#F5F5F5'))
+        ensureStyleGroup(_barT2, 'borderRadius')
+        setStyleChild(_barT2, 'borderRadius', 'borderRadiusType', '0')
+        setStyleChild(_barT2, 'borderRadius', 'borderRadius', String(Math.round((_bar2.height || 4) / 2)))
+        const _seg2 = container('Row', { direction: 'row', flexShrink: 0 })
+        const _seg2W = (_seg2.style.properties.find((g) => g.itemKey === 'rect')?.itemChildren?.properties?.find((p) => p.itemKey === 'width'))
+        if (_seg2W) { _seg2W.itemValueFrom = '1'; _seg2W.itemValue = "Math.round($barRatio * 100) + '%'"; _seg2W.itemDefaultValue = Math.round(((_bar2.segments && _bar2.segments[0] && _bar2.segments[0].ratio) || 0) * 100) + '%' }
+        setStyleChild(_seg2, 'rect', 'height', String(_bar2.height || 4))
+        setStyleChild(_seg2, 'flex', 'flexShrink', '0')
+        ensureStyleGroup(_seg2, 'background')
+        setStyleChild(_seg2, 'background', 'backgroundType', '01')
+        setStyleChild(_seg2, 'background', 'backgroundColor', hexToRgba((_bar2.segments && _bar2.segments[0] && _bar2.segments[0].color) || '#83B8F1'))
+        ensureStyleGroup(_seg2, 'borderRadius')
+        setStyleChild(_seg2, 'borderRadius', 'borderRadiusType', '0')
+        setStyleChild(_seg2, 'borderRadius', 'borderRadius', String(Math.round((_bar2.height || 4) / 2)))
+        _seg2.slots && _barT2.slots[0].components.push(_seg2)
+        itemTpl.slots[0].components.push(innerRow, _barT2, ...(shellsSeparated ? [] : [divider]))
+      } else {
+        itemTpl.slots[0].components.push(innerRow, ...(shellsSeparated ? [] : [divider]))
+      }
     }
     // 钉壳高=spec 行高中位：奇数字号自然行盒量化（fs15→22.5）使 paddingBottom 只能取整，
     // 每行 ±0.5px 误差在列表纵向堆叠中逐行累积（item2 -0.5、item3 -1）。钉高后空隙落在
     // 底部 padding 区（divider 之上），不可见；仅在内容估算不超壳高（有底距余量）且非复合行
     // 时钉，防止内容被裁切。
-    if (!isComposite && listRowPaddingBottom > 0) {
+    if (!isComposite && (listRowPaddingBottom > 0 || rowShell)) {
       ensureStyleGroup(itemTpl, 'rect')
       setStyleChild(itemTpl, 'rect', 'height', String(Math.round(listRowHeight)))
     }
@@ -6891,12 +9424,30 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
     list.properties = [
       boundProp('value', '$' + listVar, sem.sampleItems.map(() => ({}))),
       constProp('direction', 'vertical'),
-      constProp('row-spacing', '0'),
+      constProp('row-spacing', String(shellsSeparated ? (() => {
+        const gaps2 = sem.sampleItems.slice(1).map((it2, i2) => {
+          const prev = rect(sem.sampleItems[i2].shellEl)
+          const cur = rect(it2.shellEl)
+          return Math.max(0, Math.round((cur.y || 0) - ((prev.y || 0) + (prev.height || 0))))
+        })
+        return gaps2.length ? gaps2.slice().sort((a, b) => a - b)[Math.floor(gaps2.length / 2)] : 0
+      })() : 0)),
       constProp('edge-insets', '{0,0,0,0}'),
     ]
     // 按首行 y 语义插入（而非末尾追加）：否则「查看更多」等后续语义块按 y 插入时会越过列表，
     // 出现入口渲染在列表上方的错序（名册卡实测）。
-    insertSemantic(card, list, sem.sampleItems[0]?.y ?? sem.listTitle?.y ?? 0)
+    // 行壳内缩：壳宽 < 卡宽时列表整体按壳左右沿内缩（壳是行背景，列表须与壳同宽同位）
+    const listAnchorY = sem.sampleItems[0]?.rowTop ?? sem.sampleItems[0]?.y ?? sem.listTitle?.y ?? 0
+    const shellR0 = sem.sampleItems[0]?.shellEl ? rect(sem.sampleItems[0].shellEl) : null
+    const insetLeft = rowShell && shellR0 ? Math.max(0, Math.round((shellR0.x || 0) - buildCardLeft)) : 0
+    const insetRight = rowShell && shellR0 ? Math.max(0, Math.round(buildCardRight - ((shellR0.x || 0) + (shellR0.width || 0)))) : 0
+    if (insetLeft > 0 || insetRight > 0) {
+      const wrapList = container('Row', { width: '100%', padding: `0 ${insetRight} 0 ${insetLeft}` })
+      wrapList.slots[0].components.push(list)
+      insertSemantic(card, wrapList, listAnchorY)
+    } else {
+      insertSemantic(card, list, listAnchorY)
+    }
   }
 
   // —— 7b. 重复面板组列表（同构面板：壳背景 + 标题/副标题行 + 金额/单位行 + 说明 + 行内按钮）——
@@ -7130,14 +9681,98 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
       col.slots[0].components.push(lineRow)
       prevBottom = lineY + lineH
     }
-    const richLeft = Math.max(0, Math.round((rb.x || 0) - buildCardLeft))
-    const richTop = semanticTopGap(rb.y) ?? Math.max(0, Math.round(rb.y - (previousAuxBottom ?? buildCard.y)))
+    // 段落壳（灰底圆角容器）认领：底色/圆角/内缩按 spec 壳几何，避免段落裸排在卡底上
+    const rbShell = shellForRect(rect(rb.container))
+    if (rbShell) {
+      applyShellBackground(col, rbShell)
+      ensureStyleGroup(col, 'rect')
+      setStyleChild(col, 'rect', 'width', String(Math.round(rbShell.width)))
+      const shellPadL = Math.max(0, Math.round((rb.x || 0) - rbShell.x))
+      const shellPadT = Math.max(0, Math.round((rb.y || 0) - rbShell.y))
+      const shellPadB = Math.max(0, Math.round((rbShell.y + rbShell.height) - ((rb.y || 0) + (rect(rb.container).height || 0))))
+      ensureStyleGroup(col, 'padding')
+      setStyleChild(col, 'padding', 'paddingType', '1')
+      setStyleChild(col, 'padding', 'paddingLeft', String(shellPadL))
+      setStyleChild(col, 'padding', 'paddingRight', String(Math.max(0, Math.round((rbShell.x + rbShell.width) - ((rb.x || 0) + (rect(rb.container).width || 0))))))
+      setStyleChild(col, 'padding', 'paddingTop', String(shellPadT))
+      setStyleChild(col, 'padding', 'paddingBottom', String(shellPadB))
+    }
+    // 段落壳内的尾部链接行（查看详细建议 >）：壳几何涵盖它，富文本碎片只到段落末行，
+    // 不补这行会让链接文案整体丢失（panelRows 曾误领该壳，回收后此处接管）。
+    if (rbShell) {
+      const shellR = { x: rbShell.x, y: rbShell.y, width: rbShell.width, height: rbShell.height }
+      const paraBottom = (rect(rb.container).y || 0) + (rect(rb.container).height || 0)
+      const renderedTextEls = new Set([
+        ...(sem.postAmountTexts || []).map((t) => t.sourceEl),
+        ...(sem.auxTexts || []).map((t) => t.sourceEl),
+        ...(sem.buttons || []).map((b) => b.sourceEl),
+        ...(sem.richBlocks || []).flatMap((blk) => blk.fragments || []),
+      ].filter(Boolean))
+      const linkEls = (sem.allTexts || []).filter((t) => !renderedTextEls.has(t)
+        && !linkConsumed.has(t)
+        && rectInside(shellR, anyRect(t), 0) && (anyRect(t).y || 0) >= paraBottom - 6)
+        .sort((a, b) => (rect(a).y || 0) - (rect(b).y || 0))
+      for (const lk of linkEls) {
+        linkConsumed.add(lk)
+        const lr = anyRect(lk)
+        const lineRow = container('Row', { width: '100%', justify: 'flex-start', align: 'center', gap: '0', padding: `${Math.max(0, Math.round(lr.y - paraBottom - (prevBottom != null ? 0 : 0)))} 0 0 0` })
+        setStyleChild(lineRow, 'padding', 'paddingLeft', String(Math.max(0, Math.round(lr.x - (rbShell.x || 0)))))
+        lineRow.slots[0].components.push(textFromSpec({
+          text: textOf(lk), color: anyColor(lk), fontSize: anyFs(lk),
+          fontWeight: (lk && lk.fontWeight) || ts(lk).fontWeight || ts(lk && lk.sourceEl).fontWeight,
+          height: lr.height, align: 'left',
+        }))
+        appendInlineTrailSlice(lineRow, { x: lr.x, y: lr.y, width: lr.width, height: lr.height })
+        col.slots[0].components.push(lineRow)
+        prevBottom = lr.y + (lr.height || 0)
+      }
+      if (linkEls.length) {
+        setStyleChild(col, 'padding', 'paddingBottom', String(Math.max(0,
+          Math.round((rbShell.y + rbShell.height) - prevBottom))))
+      }
+    }
+    const richLeft = Math.max(0, Math.round(((rbShell ? rbShell.x : rb.x) || 0) - buildCardLeft))
+    const richTop = semanticTopGap(rbShell ? rbShell.y : rb.y) ?? Math.max(0, Math.round((rbShell ? rbShell.y : rb.y) - (previousAuxBottom ?? buildCard.y)))
     const wrapRow = container('Row', { width: '100%', padding: `${richTop} 0 0 ${richLeft}` })
     wrapRow.slots[0].components.push(col)
     insertSemantic(hostFor(rb.y), wrapRow, rb.y)
     previousAuxBottom = rb.y + (rect(rb.container).height || 0)
   }
 
+  // —— 图表矢量簇：Canvas 自绘回放（柱状图/网格线/轴标签），按 spec y 插回主流 ——
+  for (const cluster of sem.chartClusters || []) {
+    const flexChart = buildFlexBarChart(cluster)
+    if (flexChart) {
+      const left = Math.max(0, Math.round(cluster.x - buildCardLeft))
+      const right = Math.max(0, Math.round(buildCardRight - (cluster.x + cluster.width)))
+      const top = semanticTopGap(cluster.y) ?? 0
+      const wrap = container('Row', { width: '100%', padding: `${top} ${right} 0 ${left}` })
+      wrap.slots[0].components.push(flexChart)
+      insertSemantic(card, wrap, cluster.y)
+      continue
+    }
+    const cv = comp('Canvas')
+    ensureStyleGroup(cv, 'rect')
+    ensureStyleGroup(cv, 'flex')
+    ensureStyleGroup(cv, 'background')
+    setStyleChild(cv, 'rect', 'width', String(Math.round(cluster.width)))
+    setStyleChild(cv, 'rect', 'height', String(Math.round(cluster.height)))
+    setStyleChild(cv, 'flex', 'flexShrink', '0')
+    setStyleChild(cv, 'background', 'backgroundType', '01')
+    setStyleChild(cv, 'background', 'backgroundColor', '')
+    const code = chartBarCanvasCode(cluster)
+    cv.eventactions = [{
+      event: { eventName: '初始化渲染', eventKey: 'onMeasured' },
+      action: { actionType: 'customAction', properties: [constProp('function', { code, compiled: code })] },
+    }]
+    const left = Math.max(0, Math.round(cluster.x - buildCardLeft))
+    const right = Math.max(0, Math.round(buildCardRight - (cluster.x + cluster.width)))
+    const top = semanticTopGap(cluster.y) ?? 0
+    const wrap = container('Row', { width: '100%', padding: `${top} ${right} 0 ${left}` })
+    wrap.slots[0].components.push(cv)
+    insertSemantic(card, wrap, cluster.y)
+  }
+
   // 孤儿大切片纯色块（无导出素材的按钮/横幅烘焙图 → 采样色块还原占位与底色）
   for (const ob of sem.orphanBlocks || []) {
     const topGap = semanticTopGap(ob.y) ?? 0
@@ -7170,6 +9805,88 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
     insertSemantic(hostFor(ob.y), blockRow, ob.y)
   }
 
+// 浮动装饰切片（卡头月亮/吉祥物光晕等贴缘叠装饰）：零高 AbsoluteLayout 叠层，
+// 不占流式行高（否则整卡内容被顶下一个装饰高度）。子节点被渲染器 CSS 脱标为
+// position:absolute，静态位置 = 叠层内容盒左上（= 卡内容原点），再用 margin 偏移到
+// spec x/y —— 超出常规流式行高模型的贴缘装饰只能靠绝对定位还原。
+for (const fd of sem.floatDecoBlocks || []) {
+  const media = fd.exportRel ? imageFromSlice(fd.sliceEl, sem.slicesExports) : null
+  if (!media) continue
+  const band = container('AbsoluteLayout', { width: '100%', height: '0' })
+  // 渲染器对每个节点默认 overflow:hidden：零高叠层会把脱标的绝对定位子节点整块裁掉，
+  // 叠层壳必须显式 visible 才能让贴缘装饰溢出零高盒绘制。
+  ensureStyleGroup(band, 'other')
+  setStyleChild(band, 'other', 'overflow', 'visible')
+  ensureStyleGroup(media, 'margin')
+  setStyleChild(media, 'margin', 'marginType', '1')
+  setStyleChild(media, 'margin', 'marginTop', String(Math.max(0, Math.round((fd.y || 0) - (buildCard.y || 0)))))
+  setStyleChild(media, 'margin', 'marginLeft', String(Math.max(0, Math.round((fd.x || 0) - buildCardLeft))))
+  setStyleChild(media, 'margin', 'marginRight', '0')
+  setStyleChild(media, 'margin', 'marginBottom', '0')
+  band.slots[0].components.push(media)
+  insertSemantic(hostFor(fd.y), band, fd.y)
+}
+
+
+  // 薄壳分段横条（时间轴 / 进度分段）：按壳几何逐段还原底色/描边/圆角，段间隙用等宽 spacer
+  // 承担（Row gap 是常量，表达不了逐段差异）。此前分段壳落在孤立媒体块通道，
+  // 渲染成「缺素材」占位图（几何对、视觉全错），其余段直接丢失。
+  for (const strip of sem.thinShellStrips || []) {
+    const boxes = strip.boxes || []
+    if (boxes.length < 2) continue
+    const previousBottom = previousSemanticBottom(strip.y)
+    const row = container('Row', {
+      width: '100%', direction: 'row', justify: 'flex-start', align: 'center',
+      gap: T.gap('none'), padding: T.pad('root'),
+    })
+    setStyleChild(row, 'padding', 'paddingType', '1')
+    setStyleChild(row, 'padding', 'paddingTop', String(previousBottom == null
+      ? Math.max(0, Math.round(strip.y - (buildCard.y || 0)))
+      : Math.max(0, Math.round(strip.y - previousBottom))))
+    setStyleChild(row, 'padding', 'paddingBottom', '0')
+    setStyleChild(row, 'padding', 'paddingLeft', String(Math.max(0, Math.round((strip.x || 0) - buildCardLeft))))
+    setStyleChild(row, 'padding', 'paddingRight', String(Math.max(0,
+      Math.round(buildCardRight - ((strip.x || 0) + (strip.width || 0))))))
+    let cursorRight = null
+    for (const box of boxes) {
+      if (cursorRight != null) {
+        const gapW = Math.max(0, Math.round((box.x || 0) - cursorRight))
+        if (gapW > 0) {
+          const spacer = container('Column', { direction: 'column', padding: '0' })
+          setStyleChild(spacer, 'rect', 'width', String(gapW))
+          setStyleChild(spacer, 'rect', 'height', '1')
+          setStyleChild(spacer, 'flex', 'flexShrink', '0')
+          row.slots[0].components.push(spacer)
+        }
+      }
+      const node = container('Column', {
+        width: String(Math.round(box.width || 0)), direction: 'column', padding: '0', flexShrink: 0,
+      })
+      setStyleChild(node, 'rect', 'height', String(Math.round(box.height || 0)))
+      ensureStyleGroup(node, 'background')
+      if (box.gradient) {
+        setStyleChild(node, 'background', 'backgroundType', '03')
+        setStyleChild(node, 'background', 'backgroundGradient', gradientWithOpacity(box.gradient, box.opacity ?? 1))
+      } else if (box.fill) {
+        setStyleChild(node, 'background', 'backgroundType', '01')
+        setStyleChild(node, 'background', 'backgroundColor', hexToRgba(box.fill, box.opacity ?? 1))
+      }
+      if (box.isBorder) {
+        ensureStyleGroup(node, 'border')
+        setStyleChild(node, 'border', 'isBorder', '1')
+        setStyleChild(node, 'border', 'borderWidth', String(Math.max(0.5, box.borderWidth || 1)))
+        setStyleChild(node, 'border', 'borderStyle', 'solid')
+        setStyleChild(node, 'border', 'borderColor', hexToRgba(box.borderColor || '#E7E7EE'))
+      }
+      ensureStyleGroup(node, 'borderRadius')
+      setStyleChild(node, 'borderRadius', 'borderRadiusType', '0')
+      setStyleChild(node, 'borderRadius', 'borderRadius', String(Math.round(box.radius || 0)))
+      row.slots[0].components.push(node)
+      cursorRight = (box.x || 0) + (box.width || 0)
+    }
+    insertSemantic(hostFor(strip.y), row, strip.y)
+  }
+
   // 孤立媒体块放在语义布局之后兜底，避免箭头/图标抢占主内容顺序。
   for (const block of (sem.isolatedBlocks || []).filter((block) =>
     !(sem.progressBars || []).length && !block.consumedByTabs)) {
@@ -7315,14 +10032,94 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
       walkDeep(ch)
       return found
     }
-    const btnCh = inside.find(hasButtonDeep)
-    let hostChildren = inside
-    if (btnCh && inside.length >= 3) {
+    // 壳内两列拓扑（渐变壳）：壳右半区存在独立文本列时，把与之纵向重叠的既有子块收进左列，
+    // 右列文本按 spec y 排布。渐变壳只作背景包裹、壳内文本由各自语义通道生成，
+    // 右列文本此前或整段落进主视觉死区不渲染、或被副金额对甩到壳外竖排。
+    // panelRows 已认领的壳走面板行自身的两列分支，这里只处理「纯背景壳」。
+    const gpPadTop = (node) => {
+      const props = (node.style?.properties || []).find((group) => group.itemKey === 'padding')
+        ?.itemChildren?.properties
+      return Number(props?.find((child) => child.itemKey === 'paddingTop')?.itemValue) || 0
+    }
+    const gpRightCol = (sem.panelRows || []).some((panel) => panel.shapeEl === gp.shapeEl)
+      ? null
+      : ((sem.shellRightColumns || []).find((column) => column.shapeEl === gp.shapeEl) || null)
+    let flowChildren = inside
+    if (gpRightCol && gpRightCol.texts.length >= 2) {
+      const childBottom = (ch) => {
+        const y = semanticYByNode.get(ch)
+        if (y == null) return null
+        const matched = semanticBounds
+          .filter((bound) => !bound.container && bound.top === y)
+          .map((bound) => bound.bottom)
+        return matched.length ? Math.max(...matched) : y + 20
+      }
+      const rcTop = Math.min(...gpRightCol.texts.map((item) => item.y || 0))
+      const rcBottom = Math.max(...gpRightCol.texts.map((item) =>
+        (item.y || 0) + estimatedTextBoxHeight(item.height, item.fontSize)))
+      const overlapping = inside.filter((ch) => {
+        const top = semanticYByNode.get(ch)
+        if (top == null) return false
+        const bottom = childBottom(ch)
+        return (bottom == null ? top + 20 : bottom) > rcTop - 2 && top < rcBottom + 2
+      })
+      if (overlapping.length) {
+        const firstOv = overlapping[0]
+        const lastOv = overlapping[overlapping.length - 1]
+        const firstTop = semanticYByNode.get(firstOv)
+        const lastTop = semanticYByNode.get(lastOv) ?? firstTop
+        const above = inside.filter((ch) => !overlapping.includes(ch)
+          && (semanticYByNode.get(ch) ?? Number.POSITIVE_INFINITY) < (firstTop ?? 0))
+        const below = inside.filter((ch) => !overlapping.includes(ch)
+          && (semanticYByNode.get(ch) ?? Number.NEGATIVE_INFINITY) > (lastTop ?? 0))
+        const splitX = gpRightCol.splitX || ((gp.x || 0) + (gp.width || 0) * 0.45)
+        const leftW = Math.max(1, Math.round(splitX - (gp.x || 0)))
+        const rightW = Math.max(1, Math.round(((gp.x || 0) + (gp.width || 0)) - splitX))
+        const twoCol = container('Row', {
+          width: '100%', direction: 'row', justify: 'flex-start', align: 'flex-start',
+          gap: T.gap('none'), padding: '0',
+        })
+        const leftCol = container('Column', {
+          direction: 'column', width: String(leftW), justify: 'flex-start', align: 'flex-start',
+          gap: T.gap('none'), padding: '0', flexShrink: 0,
+        })
+        const rightCol = container('Column', {
+          direction: 'column', width: String(rightW), justify: 'flex-start', align: 'flex-start',
+          gap: T.gap('none'), padding: '0', flexShrink: 0,
+        })
+        // 首个重叠子块的顶距转移到两列块（相对上一块的节奏不变），块内首行顶距归零
+        setPadTop(twoCol, gpPadTop(firstOv))
+        setPadTop(firstOv, 0)
+        overlapping.forEach((ch) => leftCol.slots[0].components.push(ch))
+        setPadTop(rightCol, Math.max(0, rcTop - (firstTop ?? rcTop)))
+        let prevBottom = null
+        for (const item of gpRightCol.texts) {
+          const itemRow = container('Row', {
+            width: '100%', direction: 'row', justify: 'flex-start', align: 'center',
+            gap: T.gap('none'), padding: '0',
+          })
+          if (prevBottom != null) setPadTop(itemRow, Math.max(0, (item.y || 0) - prevBottom))
+          itemRow.slots[0].components.push(textFromSpec(applyLiteralBind({
+            ...item,
+            align: 'left',
+          }, sem.bindings.literalBind)))
+          rightCol.slots[0].components.push(itemRow)
+          prevBottom = (item.y || 0) + estimatedTextBoxHeight(item.height, item.fontSize)
+        }
+        twoCol.slots[0].components.push(leftCol, rightCol)
+        registerSemanticY(twoCol, firstTop ?? rcTop)
+        flowChildren = [...above, twoCol, ...below]
+      }
+    }
+
+    const btnCh = flowChildren.find(hasButtonDeep)
+    let hostChildren = flowChildren
+    if (btnCh && flowChildren.length >= 3) {
       const btnY = semanticYByNode.get(btnCh) || 0
-      const overlapRows = inside.filter((ch) => ch !== btnCh
+      const overlapRows = flowChildren.filter((ch) => ch !== btnCh
         && Math.abs((semanticYByNode.get(ch) || 0) - btnY) <= 30)
       if (overlapRows.length) {
-        const rest = inside.filter((ch) => ch !== btnCh && !overlapRows.includes(ch))
+        const rest = flowChildren.filter((ch) => ch !== btnCh && !overlapRows.includes(ch))
         const groupCol = container('Column', { direction: 'column', gap: T.gap('none'), padding: '0', width: '100%', flexShrink: 1 })
         overlapRows.forEach((ch) => groupCol.slots[0].components.push(ch))
         const pairRow = container('Row', { width: '100%', justify: 'space-between', align: 'center', gap: T.gap('base'), padding: '0' })
@@ -7583,6 +10380,28 @@ export function generate(spec, opts = {}) {
       }
     }
   }
+// 分区底色带（视觉优先）：设计稿卡体常为「上灰下白」等 flat 分区底色，
+// spec cardFill 只有单色 → 按设计稿左缘逐行采样出硬停渐变还原分区底色。
+if (opts.designImage && !sem.cardBackgroundGradient) {
+  const bands = sampleBackdropBands(opts.designImage, Math.round(sem.cardRect?.width || 375))
+  if (bands && bands.length >= 2) {
+    const hx = (hex) => {
+      const h = String(hex || '').replace('#', '')
+      return /^[0-9a-fA-F]{6}$/.test(h) ? [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)] : null
+    }
+    const d6 = (a, b) => {
+      const ra = hx(a), rb = hx(b)
+      return ra && rb ? (Math.abs(ra[0] - rb[0]) + Math.abs(ra[1] - rb[1]) + Math.abs(ra[2] - rb[2])) / 3 : 0
+    }
+    const differs = bands.some((bd) => d6(bd.color, sem.cardFill) > 4)
+    const coverage = (bands[bands.length - 1].y1 - bands[0].y0) / Math.max(1, sem.cardRect?.height || 1)
+    if (differs && coverage >= 0.6) {
+      const stops = []
+      for (const bd of bands) stops.push(`${bd.color} ${bd.y0}px`, `${bd.color} ${bd.y1}px`)
+      sem.cardBackgroundGradient = `linear-gradient(to bottom, ${stops.join(', ')})`
+    }
+  }
+}
   // 按钮/pill 填充色交叉验证（视觉优先）：标注 fill 与设计稿像素明显不一致时
   // （典型：禁用态按钮标注层仍是实色 #FCC800，视觉实为浅黄），以设计稿采样为准。
   // 采样走边缘条带（避开中央文字与圆角），阈值 24 只抓显著偏差，不动抗锯齿噪声。
@@ -7629,6 +10448,14 @@ export function generate(spec, opts = {}) {
   }
   // 弥散背景/浅色顶带纯色近似：仅当 spec 未检出顶部装饰、且调用方提供设计稿聚焦图时采样。
   // 颜色取自截图统计（不裁切图片），符合「缺素材用纯色、缺失从截图采样」约束。
+if (sem.floatDecos?.length) {
+  const fdCardR = sem.cardRect || {}
+  sem.floatDecoBlocks = sem.floatDecos.map((s) => {
+    const sr = rect(s)
+    const exportRel = resolveSliceExport(sem.slicesExports || [], s.name) || s.annotationDefect?.cropSlice || null
+    return { sliceEl: s, exportRel, x: sr.x || 0, y: sr.y || 0, width: sr.width || 0, height: sr.height || 0 }
+  })
+}
   if (!sem.cardBackgroundGradient && opts.designImage) {
     const band = sampleTopBand(opts.designImage,
       Math.round(sem.cardRect?.width || sem.canvas?.width || 375),