cardbuddy 0.15.0 → 0.16.0

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

@@ -626,6 +626,12 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
     }
   }
   for (const button of sem.buttons || []) addSemanticBound(button.y, button.y + (button.height || 0))
+  if (sem.vertexClusters?.length) {
+    for (const vc of sem.vertexClusters) {
+      const bottom = vc.y + (vc.height || 30) + 35
+      addSemanticBound(vc.y, bottom, true)
+    }
+  }
  for (const divider of sem.dividers || []) addSemanticBound(divider.y, divider.y + divider.height)
   for (const ul of sem.titleUnderlines || []) addSemanticBound(ul.y, ul.y + ul.height)
  if (sem.topDecoration) {
@@ -1234,11 +1240,21 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
     // 内容是左对齐块（如左起的标题簇），强行 center 会把整组推到中间。
     const isGeometricCenter = Math.abs(leftPadding - rightPadding) <= 24
     const effAlign = aux.align === 'center' && !isGeometricCenter ? 'left' : aux.align
+    // 单 aux 与下方 List 之间的间隙：listTitle 路径有 titleBottomGap 桥接，单 aux 行缺底距，
+    // 会把列表整体顶上 ~gap（本例 12px）。仅当该 aux 是列表前最后一个单 aux 时补底距。
+    const auxBottom = (aux.y || 0) + Math.max(aux.height || 0, (aux.fontSize || 14) * 1.4)
+    const listTop = sem.sampleItems[0]?.rowTop ?? sem.sampleItems[0]?.y ?? Infinity
+    const hasLaterSingleAux = sem.auxTexts.some((a) =>
+      a !== aux && !groupedAuxElements.has(a) && !a._consumed
+      && (a.y || 0) > (aux.y || 0) && (a.y || 0) < listTop)
+    const bottomPadding = (sem.sampleItems.length && !hasLaterSingleAux && listTop > auxBottom)
+      ? Math.max(0, Math.round(listTop - auxBottom))
+      : 0
     const geometryPadding = effAlign === 'center'
-      ? `${topPadding} 0 0 0`
+      ? `${topPadding} 0 ${bottomPadding} 0`
       : effAlign === 'right'
-        ? `${topPadding} ${rightPadding} 0 0`
-        : `${topPadding} 0 0 ${leftPadding}`
+        ? `${topPadding} ${rightPadding} ${bottomPadding} 0`
+        : `${topPadding} 0 ${bottomPadding} ${leftPadding}`
     // 多值文本行（含 人名+手机号 等）：按 generic multiToken 还原为「字面量 + 绑定」段，不再有任何「联系人块」专门逻辑
     const mt = sem.bindings.multiToken && sem.bindings.multiToken[aux.text.trim()]
     if (mt) {
@@ -1626,9 +1642,11 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
     // 注意：标签拆进顶带后 group.label 已置空，锚点必须回落到选项组顶（group.y），
     // 否则仍按 labelY 归顶带宿主，整组被带高裁掉。
     const host = hostFor(group.label ? (group.labelY || group.y) : group.y)
-    const anchorY = group.label ? (group.labelY || group.y) : group.y
+    const anchorY = (group.label && !group.sideLabel) ? (group.labelY || group.y) : group.y
     const topPadding = semanticTopGap(anchorY) ?? Math.max(0, Math.round(anchorY - previousOptionBottom))
-    const leftPadding = Math.max(0, Math.round((group.x || 0) - buildCardLeft))
+    const leftPadding = group.sideLabel && group.label
+
        ? Math.max(0, Math.round((group.label.x || 0) - buildCardLeft))
+
        : Math.max(0, Math.round((group.x || 0) - buildCardLeft))
     const rightPadding = Math.max(0, Math.round(buildCardRight - ((group.x || 0) + (group.width || 0))))
     const groupColumn = container('Column', {
       width: '100%',
@@ -1638,7 +1656,7 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
       gap: T.gap('none'),
       padding: `${topPadding} ${rightPadding} 0 ${leftPadding}`,
     })
-    if (group.label) {
+    if (group.label && !group.sideLabel) {
       const labelBottom = Math.max(0, Math.round(group.y - (anchorY + (group.label.height || 0))))
       const labelRow = container('Row', {
         width: '100%', justify: 'flex-start', align: 'center',
@@ -1695,6 +1713,14 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
       continue
     }
     const chipsRow = container('Row', { width: '100%', justify: 'flex-start', align: 'center', gap: T.gap('tight') })
+    let _chipTarget = chipsRow
+    if (group.sideLabel && group.label) {
+      const _lblText = wrapTitleWithUnderline(textFromSpec(group.label), group.label)
+      _chipTarget = container('Row', { justify: 'flex-start', align: 'center', gap: T.gap('tight'), flexShrink: '0' })
+      chipsRow.slots[0].components.push(_lblText)
+      chipsRow.slots[0].components.push(_chipTarget)
+      setStyleChild(chipsRow, 'flex', 'justifyContent', 'space-between')
+    }
     group.members.forEach((member, index) => {
       if (index > 0) {
         const previous = group.members[index - 1]
@@ -1749,7 +1775,7 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
         chip.properties = [constProp('value', member.text)]
       }
       chip.eventactions = [clickAction(`// ${member.text} 点击`)]
-      chipsRow.slots[0].components.push(chip)
+      _chipTarget.slots[0].components.push(chip)
     })
     groupColumn.slots[0].components.push(chipsRow)
     insertSemantic(host, groupColumn, anchorY)
@@ -2178,15 +2204,16 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
     const mcRightPad = mcAffordR
       ? Math.max(0, Math.round(buildCardRight - ((mcAffordR.x || 0) + (mcAffordR.width || 0))))
       : 0
+    const mcTopGap = semanticTopGap(sem.midCluster.y) ?? mcPad
     const row = mcAffordEl
       ? container('Row', {
         width: '100%', justify: 'space-between', align: 'center',
-        padding: `${mcPad} ${mcRightPad} ${mcPad} ${mcLeftPad}`,
+        padding: `${mcTopGap} ${mcRightPad} ${mcPad} ${mcLeftPad}`,
       })
       : container('Row', {
         width: '100%', justify: mcNearCenter ? 'center' : 'flex-start', align: 'center', gap: T.gap('tight'),
         padding: mcNearCenter ? mcPad
-          : `${mcPad} 0 ${inFixedGradientShell(sem.midCluster.y) ? 0 : mcPad} ${mcLeftPad}`,
+          : `${mcTopGap} 0 ${inFixedGradientShell(sem.midCluster.y) ? 0 : mcPad} ${mcLeftPad}`,
       })
     const mcClusterHost = mcAffordEl
       ? container('Row', { justify: 'flex-start', align: 'center', gap: T.gap('none') })
@@ -2572,12 +2599,35 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
     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) => {
+    let 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
     })
+    // 纯矢量图形组兜底（雷达/环图等无切图导出的中心图形）：isolatedBlocks 先于 orphanSlices
+    // 消费了大块矢量组，散点带若只认 orphanBlocks 会漏检 → 胶囊退化成通用按钮行、金额散落
+    // （位置分 0.57 根因）。同窗口同尺寸几何判据从 isolatedBlocks 认领，凭上游
+    // annotationDefect.cropSlice（画板裁切产物）出真图，不认业务词。
+    if (!media) {
+      const vectorCand = (sem.isolatedBlocks || []).find((bl) => {
+        const r = rect(bl.element)
+        const w = r.width || 0
+        const h = r.height || 0
+        return w >= 60 && w <= 200 && Math.abs(w - h) <= 14
+          && (r.y || 0) >= pillTop - 80 && (r.y || 0) + h <= pillBottom + 80
+      })
+      if (vectorCand) {
+        const vr = rect(vectorCand.element)
+        media = {
+          sliceEl: vectorCand.element,
+          x: vr.x || 0,
+          y: vr.y || 0,
+          width: vr.width || 0,
+          height: vr.height || 0,
+        }
+      }
+    }
     if (!media) return null
     const mL = (media.x || 0) - cardX
     const mR = mL + (media.width || 0)
@@ -2619,6 +2669,8 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
     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)
+    // 矢量兜底认领的中心媒体同步从 isolatedBlocks 移除，避免孤立媒体兜底再渲染一遍（同箭头先例）
+    sem.isolatedBlocks = (sem.isolatedBlocks || []).filter((bl) => bl.element !== media.sliceEl)
     const arrowEls = new Set(clusters.map((c) => c.arrow).filter(Boolean))
     if (arrowEls.size) {
       sem.slices = (sem.slices || []).filter((sl) => !arrowEls.has(sl))
@@ -2830,13 +2882,18 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
     : 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 midGrouped = new Set()
+  // 同行判定（与 auxTexts 分组的 centerNear 同口径）：垂直中心差 ≤ 较矮元素高度的 0.75
+  // （大小字号混排行，如 标题+描边pill）。centerNear 原版定义在 auxTexts 分组循环块内，此处不可见。
+  const midCenterNear = (ea, eb) => {
+    const ra = rect(ea), rb = rect(eb)
+    const ca = (ra.y || 0) + (ra.height || 0) / 2
+    const cb = (rb.y || 0) + (rb.height || 0) / 2
+    return Math.abs(ca - cb) <= Math.min(ra.height || 0, rb.height || 0) * 0.75
+  }
+  const leadSliceOf = (pat) => {
     const patH = pat.height || (pat.fontSize || 14) * 1.4
-    const leadSliceIdx = (sem.slices || []).findIndex((sl) => {
+    const idx = (sem.slices || []).findIndex((sl) => {
       const sr = rect(sl)
       const w = sr.width || 0
       const h = sr.height || 0
@@ -2844,7 +2901,64 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
       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
+    return idx >= 0 ? sem.slices[idx] : null
+  }
+  for (let i = 0; i < midAux.length; i++) {
+    const pat = midAux[i]
+    if (midGrouped.has(pat)) continue
+    // 同行成组（纯几何判据，与 auxTexts 分组同族）：同一 y 带内的多条 postAmountText
+    // （如 状态pill「营业中」+ 距离「距您986m」）必须合成一行，否则每条独立成行会把
+    // 头部撑高一行、下方表单/按钮整体下移一行高（1219 网点预约实测 +16~20px 全卡纵移）。
+    // 组内任一带行首图标或命中枚举统计行时不成组（保持单行路径的图标/绑定处理）。
+    const lineGroup = [pat]
+    for (let j = i + 1; j < midAux.length; j++) {
+      const cand = midAux[j]
+      if (midGrouped.has(cand)) continue
+      if (!(sameRow(cand.sourceEl, pat.sourceEl, 8) || midCenterNear(cand.sourceEl, pat.sourceEl))) break
+      lineGroup.push(cand)
+    }
+    const groupable = lineGroup.length > 1
+      && lineGroup.every((p) => !leadSliceOf(p) && !detectEnumStatStrip(p.text))
+    if (groupable) {
+      const host = hostFor(pat.y)
+      const inTopHost = host !== card
+      const groupIsLast = lineGroup[lineGroup.length - 1] === midAux[midAux.length - 1] && !midAuxHasBlocksAfter
+      const beforeBottom = previousSemanticBottom(pat.y) ??
+        (i > 0 ? lineBottom(midAux[i - 1]) : (mainBottom ?? previousAuxBottom))
+      let pad = (inTopHost ? null : auxRowPadding(pat, i > 0 ? midAux[i - 1] : null, groupIsLast, beforeBottom)) || '6'
+      const groupLeft = Math.min(...lineGroup.map((p) => p.x || buildCardLeft))
+      const parts = String(pad).trim().split(/\s+/)
+      while (parts.length < 4) parts.push('0')
+      parts[3] = String(Math.max(0, Math.round(groupLeft - buildCardLeft)))
+      pad = parts.join(' ')
+      const row = container('Row', { width: '100%', justify: 'flex-start', align: 'center', gap: '0', padding: pad })
+      // 组内逐项 spec 间隙用横向 spacer 承担（与 auxTexts 簇内同法；Row gap 表达不了逐项差异）
+      let prevRight = null
+      for (const item of [...lineGroup].sort((a, b) => (a.x || 0) - (b.x || 0))) {
+        const itemRight = (item.x || 0) + (item.width || 0)
+        if (prevRight != null) {
+          const gapW = Math.max(0, Math.round((item.x || 0) - prevRight))
+          if (gapW > 0) {
+            const spacer = container('Column', { direction: 'column', padding: '0' })
+            ensureStyleGroup(spacer, 'rect')
+            ensureStyleGroup(spacer, 'flex')
+            setStyleChild(spacer, 'rect', 'width', String(gapW))
+            setStyleChild(spacer, 'rect', 'height', '1')
+            setStyleChild(spacer, 'flex', 'flexShrink', '0')
+            row.slots[0].components.push(spacer)
+          }
+        }
+        row.slots[0].components.push(auxContent(item))
+        prevRight = itemRight
+      }
+      insertSemantic(host, row, pat.y)
+      for (const g of lineGroup.slice(1)) midGrouped.add(g)
+      continue
+    }
+    const host = hostFor(pat.y)
+    // 行首图标（勾选/圆点等选项符号）：文本左侧同行带内的小切片随行渲染并消费，
+    // 否则选项行只剩文字、符号丢失（组件计数与像素都扣）。与 appendInlineTrailSlice 同族反方向。
+    const leadSlice = leadSliceOf(pat)
     // 渐变容器内的行：间距交给容器的 gap/padding（已在 topDecoration 渲染时统一设置），行自身 padding 归零，
     // 否则会叠加出巨大下边距（如标题行被算成卡片末行 → paddingBottom=卡底-行底=169px）。
     const inTopHost = host !== card
@@ -3139,6 +3253,9 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
       const rowTop = previousFormBottom == null
         ? (semanticTopGap(fr.label.y) ?? T.pad('section'))
         : Math.max(0, Math.round((Number.isFinite(rowVisualTop) ? rowVisualTop : fr.label.y) - previousFormBottom))
+      if (process.env.DEBUG_FORMROW === '1') {
+        console.error(`[formrow] ${fr.label.text} labelY=${fr.label.y} visualTop=${rowVisualTop} prevFormBottom=${previousFormBottom} rowTop=${rowTop} semGap=${previousFormBottom == null ? semanticTopGap(fr.label.y) : '-'}`)
+      }
       // 坐标驱动：左 padding 由 label 的 spec x 坐标推导，右 padding 取与左对称
       const leftIcon = fr.leftIconSlice ? imageOrPlaceholder(fr.leftIconSlice, sem.slicesExports) : null
       const rowLeftPad = Math.max(0, Math.round(((leftIcon ? rect(fr.leftIconSlice).x : fr.label.x) || buildCardLeft) - buildCardLeft))
@@ -3410,6 +3527,14 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
     }
     // Skip dividers that were interleaved into formHost
     sem._interleavedDividers = interleavedDividers
+    if (process.env.DEBUG_FORMROW === '1') {
+      const host = hostFor(sorted[0].label.y)
+      const padOf = (n) => { const g = (n.style?.properties || []).find((p) => p.itemKey === 'padding'); const c = g?.itemChildren?.properties || []; const o = {}; for (const p of c) o[p.itemKey] = p.itemValue; return JSON.stringify(o) }
+      console.error(`[formhost] host=${host === card ? 'card' : 'topContentHost'} children:`)
+      for (const ch of host.slots[0].components) {
+        console.error(`  - ${ch.className} y=${semanticYByNode.get(ch)} pad=${padOf(ch)} text=${JSON.stringify((ch.properties || []).find((p) => p.itemKey === 'value')?.itemValue || '').slice(0, 24)}`)
+      }
+    }
     insertSemantic(hostFor(sorted[0].label.y), formHost, sorted[0].label.y)
   }
 
@@ -4097,7 +4222,9 @@ if (subsActive.length && !sem._subAmountsConsumed) {
       // desc 的 spec x 坐标可能与标题左沿不一致（百分比文本缩进在标题右沿之后），
       // 用左 padding 补齐差值使 desc 对齐 spec 位置。
       if (firstItem.descX != null && firstItem.y != null) {
-        const _titleX = firstItem.rowLeftEdge || (rect(card).x || 0) + 16
+        // desc 缩进基准应是标题左沿（titleX），而非 rowLeftEdge（带图标时会被拉到图标左沿）。
+        const _titleX = (firstItem.titleX != null ? firstItem.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}` })
@@ -4757,6 +4884,124 @@ for (const fd of sem.floatDecoBlocks || []) {
   insertSemantic(hostFor(fd.y), band, fd.y)
 }
 
+// Per-element absolute positioning for chart vertex labels (radar pentagon vertices).
+// Each text/shape positioned at exact spec coordinate via margin offsets (max IoU).
+if (sem.vertexClusters?.length) {
+  const vcTopY = Math.min(...sem.vertexClusters.map((vc) => vc.y || 0))
+  const vcBottomY = Math.max(...sem.vertexClusters.map((vc) => (vc.y || 0) + (vc.height || 30) + 35))
+  const vcBandH = Math.max(0, Math.round(vcBottomY - vcTopY))
+  const vcBand = container('AbsoluteLayout', { width: '100%' })
+  ensureStyleGroup(vcBand, 'rect')
+  setStyleChild(vcBand, 'rect', 'height', String(vcBandH))
+  ensureStyleGroup(vcBand, 'other')
+  setStyleChild(vcBand, 'other', 'overflow', 'visible')
+  const cardY = buildCard.y || 0
+  const cardLeft = buildCardLeft
+  const absMargin = (node, x, y) => {
+    ensureStyleGroup(node, 'margin')
+    setStyleChild(node, 'margin', 'marginType', '1')
+    setStyleChild(node, 'margin', 'marginTop', String(Math.max(0, Math.round(y - cardY))))
+    setStyleChild(node, 'margin', 'marginLeft', String(Math.max(0, Math.round(x - cardLeft))))
+    setStyleChild(node, 'margin', 'marginRight', '0')
+    setStyleChild(node, 'margin', 'marginBottom', '0')
+  }
+  // Chart center media (radar/polygon chart): same AbsoluteLayout as pills
+  if (sem.vertexClusters.chartMedia) {
+    const cm = sem.vertexClusters.chartMedia
+    const cmEl = cm.element
+    const cropSlice = cmEl?.annotationDefect?.cropSlice
+    const exportRel = cropSlice || resolveSliceExport(sem.slicesExports || [], cmEl?.name) || null
+    if (exportRel) {
+      const cmImg = imageFromSlice(cmEl, sem.slicesExports) || imageFromSlice({ name: cmEl?.name, annotationDefect: cmEl?.annotationDefect }, sem.slicesExports)
+      if (cmImg) {
+        ensureStyleGroup(cmImg, 'rect')
+        setStyleChild(cmImg, 'rect', 'width', String(Math.round(cm.width || 98)))
+        setStyleChild(cmImg, 'rect', 'height', String(Math.round(cm.height || 98)))
+        absMargin(cmImg, cm.x || 0, cm.y || 0)
+        vcBand.slots[0].components.push(cmImg)
+      }
+    } else {
+      const cmBlock = container('Column', { direction: 'column', gap: T.gap('none'), padding: '0' })
+      ensureStyleGroup(cmBlock, 'rect')
+      setStyleChild(cmBlock, 'rect', 'width', String(Math.round(cm.width || 98)))
+      setStyleChild(cmBlock, 'rect', 'height', String(Math.round(cm.height || 98)))
+      const cmColor = cmEl?.backgroundFallback?.color || cmEl?.style?.fill?.color || '#DCDCDC'
+      ensureStyleGroup(cmBlock, 'background')
+      setStyleChild(cmBlock, 'background', 'backgroundType', '01')
+      setStyleChild(cmBlock, 'background', 'backgroundColor', hexToRgba(cmColor, cmEl?.style?.opacity ?? 1))
+      ensureStyleGroup(cmBlock, 'borderRadius')
+      setStyleChild(cmBlock, 'borderRadius', 'borderRadiusType', '0')
+      setStyleChild(cmBlock, 'borderRadius', 'borderRadius', String(Math.round((cm.width || 98) / 2)))
+      absMargin(cmBlock, cm.x || 0, cm.y || 0)
+      vcBand.slots[0].components.push(cmBlock)
+    }
+  }
+  for (const vc of sem.vertexClusters) {
+    if (vc.pill.fillColor) {
+      const pillBg = container('Column', { direction: 'column', gap: T.gap('none'), padding: '0' })
+      ensureStyleGroup(pillBg, 'rect')
+      setStyleChild(pillBg, 'rect', 'width', String(Math.round(vc.width || 88)))
+      setStyleChild(pillBg, 'rect', 'height', String(Math.round(vc.height || 30)))
+      ensureStyleGroup(pillBg, 'background')
+      setStyleChild(pillBg, 'background', 'backgroundType', '01')
+      setStyleChild(pillBg, 'background', 'backgroundColor', hexToRgba(vc.pill.fillColor, vc.pill.opacity ?? 1))
+      ensureStyleGroup(pillBg, 'borderRadius')
+      setStyleChild(pillBg, 'borderRadius', 'borderRadiusType', '0')
+      setStyleChild(pillBg, 'borderRadius', 'borderRadius', String(vc.pill.radius || 14))
+      absMargin(pillBg, vc.x || 0, vc.y || 0)
+      vcBand.slots[0].components.push(pillBg)
+    }
+    if (vc.pill.sourceEl) {
+      const pr = rect(vc.pill.sourceEl)
+      const catText = textFromSpec({ text: vc.pill.text, color: vc.pill.color, fontSize: vc.pill.fontSize, fontWeight: vc.pill.fontWeight })
+      absMargin(catText, pr.x || 0, pr.y || 0)
+      vcBand.slots[0].components.push(catText)
+    }
+    for (const t of (vc.texts || [])) {
+      const tr = rect(t)
+      const txtNode = textFromSpec({ text: textOf(t), color: ts(t).color, fontSize: ts(t).fontSize, fontWeight: ts(t).fontWeight })
+      absMargin(txtNode, tr.x || 0, tr.y || 0)
+      vcBand.slots[0].components.push(txtNode)
+    }
+    for (const sh of (vc.shapes || [])) {
+      const sr = rect(sh)
+      if (sh.type === 'shape' && (sr.width || 0) <= 30 && (sr.height || 0) <= 20 && (sr.width || 0) > 0) {
+        const pbShell = container('Column', { direction: 'column', justify: 'center', align: 'center', gap: T.gap('none') })
+        ensureStyleGroup(pbShell, 'rect')
+        setStyleChild(pbShell, 'rect', 'width', String(Math.round(sr.width || 24)))
+        setStyleChild(pbShell, 'rect', 'height', String(Math.round(sr.height || 14)))
+        const shFill = sh.style?.fill?.color
+        if (shFill) {
+          ensureStyleGroup(pbShell, 'background')
+          setStyleChild(pbShell, 'background', 'backgroundType', '01')
+          setStyleChild(pbShell, 'background', 'backgroundColor', hexToRgba(shFill, sh.style?.opacity ?? 1))
+        }
+        const shRadius = sh.style?.radius
+        const rVal = (shRadius && typeof shRadius === 'object') ? (shRadius.borderRadius || 0) : (Number(shRadius) || 0)
+        ensureStyleGroup(pbShell, 'borderRadius')
+        setStyleChild(pbShell, 'borderRadius', 'borderRadiusType', '0')
+        setStyleChild(pbShell, 'borderRadius', 'borderRadius', String(rVal))
+        absMargin(pbShell, sr.x || 0, sr.y || 0)
+        vcBand.slots[0].components.push(pbShell)
+      }
+    }
+    for (const sl of (vc.shapes || [])) {
+      if (sl.type !== 'slice') continue
+      const slr = rect(sl)
+      const slMedia = imageFromSlice(sl, sem.slicesExports)
+      if (slMedia) {
+        ensureStyleGroup(slMedia, 'rect')
+        setStyleChild(slMedia, 'rect', 'width', String(Math.round(slr.width || 20)))
+        setStyleChild(slMedia, 'rect', 'height', String(Math.round(slr.height || 20)))
+        absMargin(slMedia, slr.x || 0, slr.y || 0)
+        vcBand.slots[0].components.push(slMedia)
+      }
+    }
+  }
+  insertSemantic(hostFor(vcTopY), vcBand, vcTopY)
+}
+
+
 
   // 薄壳分段横条（时间轴 / 进度分段）：按壳几何逐段还原底色/描边/圆角，段间隙用等宽 spacer
   // 承担（Row gap 是常量，表达不了逐段差异）。此前分段壳落在孤立媒体块通道，
@@ -4817,37 +5062,76 @@ for (const fd of sem.floatDecoBlocks || []) {
     insertSemantic(hostFor(strip.y), row, strip.y)
   }
 
-  // 孤立媒体块放在语义布局之后兜底，避免箭头/图标抢占主内容顺序。
-  for (const block of (sem.isolatedBlocks || []).filter((block) =>
-    !(sem.progressBars || []).length && !block.consumedByTabs)) {
-    const media = imageOrPlaceholder(block.element, sem.slicesExports)
-    if (!media) continue
-    const previousBottom = previousSemanticBottom(block.y)
-    const nextTop = nextSemanticTop(block.y + block.height)
-    const centered = Math.abs(((block.x || buildCardLeft) + (block.width || 0) / 2) -
-      (buildCardLeft + (buildCard.width || 0) / 2)) <= Math.max(12, (buildCard.width || 0) * 0.08)
-    const noSideNeighbor = ![...sem.auxTexts, ...sem.postAmountTexts]
-      .some((text) => Math.abs((text.y + Math.max(text.height || 0, (text.fontSize || 14) * 1.4) / 2) -
-        (block.y + (block.height || 0) / 2)) <= Math.max(block.height || 0, 20) / 2)
-    const neighborhoodHeight = (block.height || 0)
-    const mediaBottom = block.y + neighborhoodHeight
-    setStyleChild(media, 'rect', 'width', String(Math.round(block.width || 0)))
-    setStyleChild(media, 'rect', 'height', String(Math.round(neighborhoodHeight)))
-    const row = container('Row', { width: '100%', direction: 'row', justify: 'flex-start', align: 'center', padding: T.pad('root') })
-    const leftPadding = Math.max(0, Math.round((block.x || buildCardLeft) - buildCardLeft))
-    const rightPadding = Math.max(0, Math.round(buildCardRight - ((block.x || buildCardLeft) + (block.width || 0))))
+  // isolatedBlocks fallback after semantic layout
+  // Group same-y blocks into one row (e.g. paired avatars)
+  const _isoBlocks = (sem.isolatedBlocks || []).filter((block) =>
+    !(sem.progressBars || []).length && !block.consumedByTabs)
+  const _isoGroups = []
+  for (const block of _isoBlocks) {
+    const grp = _isoGroups.find((g) => Math.abs(g.y - (block.y || 0)) <= 2)
+    if (grp) grp.blocks.push(block)
+    else _isoGroups.push({ y: block.y || 0, blocks: [block] })
+  }
+  for (const group of _isoGroups) {
+    const medias = []
+    for (const block of group.blocks) {
+      const media = imageOrPlaceholder(block.element, sem.slicesExports)
+      if (!media) continue
+      setStyleChild(media, 'rect', 'width', String(Math.round(block.width || 0)))
+      setStyleChild(media, 'rect', 'height', String(Math.round(block.height || 0)))
+      medias.push(media)
+    }
+    if (!medias.length) continue
+    const previousBottom = previousSemanticBottom(group.y)
+    const groupHeight = Math.max(...group.blocks.map((b) => (b.height || 0)))
+    const nextTop = nextSemanticTop(group.y + groupHeight)
+    const mediaBottom = group.y + groupHeight
+    // Overlay: if block vertically overlaps with adjacent semantic elements
+    // (e.g. transfer arrow between paired cards), render as zero-height AbsoluteLayout
+    // to avoid taking vertical space in the flow.
+    const _overlapsText = medias.length === 1 && (sem.auxTexts || []).some((text) => {
+      const tY = text.y || 0
+      const tH = Math.max(text.height || 0, (text.fontSize || 14) * 1.4)
+      const tBottom = tY + tH
+      const _blk = group.blocks[0]
+      const bRight = (_blk.x || 0) + (_blk.width || 0)
+      const tRight = (text.x || 0) + (text.width || 0)
+      return tY < mediaBottom && tBottom > group.y + 2 &&
+        (bRight <= (text.x || 0) + 2 || (_blk.x || 0) >= tRight - 2)
+    })
+    if (_overlapsText) {
+      const _blk = group.blocks[0]
+      const _media = medias[0]
+      const _band = container('AbsoluteLayout', { width: '100%', height: '0' })
+      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((_blk.y || 0) - (buildCard.y || 0)))))
+      setStyleChild(_media, 'margin', 'marginLeft', String(Math.max(0, Math.round((_blk.x || 0) - buildCardLeft))))
+      setStyleChild(_media, 'margin', 'marginRight', '0')
+      setStyleChild(_media, 'margin', 'marginBottom', '0')
+      _band.slots[0].components.push(_media)
+      insertSemantic(hostFor(group.y), _band, group.y)
+      continue
+    }
+    const leftmost = group.blocks.reduce((a, b) => ((a.x || 0) <= (b.x || 0) ? a : b))
+    const rightmost = group.blocks.reduce((a, b) => (((a.x || 0) + (a.width || 0)) >= ((b.x || 0) + (b.width || 0)) ? a : b))
+    const leftPadding = Math.max(0, Math.round((leftmost.x || buildCardLeft) - buildCardLeft))
+    const rightPadding = Math.max(0, Math.round(buildCardRight - ((rightmost.x || buildCardLeft) + (rightmost.width || 0))))
+    const row = container('Row', { width: '100%', direction: 'row', justify: medias.length > 1 ? 'space-between' : 'flex-start', align: 'center', padding: T.pad('root') })
     setStyleChild(row, 'padding', 'paddingType', '1')
     setStyleChild(row, 'padding', 'paddingTop', String(previousBottom == null
-      ? Math.max(0, Math.round(block.y - (buildCard.y || 0)))
-      : Math.max(0, Math.round(block.y - previousBottom))))
+      ? Math.max(0, Math.round(group.y - (buildCard.y || 0)))
+      : Math.max(0, Math.round(group.y - previousBottom))))
     const designedCardBottom = (buildCard.y || 0) + (buildCard.height || 0)
     setStyleChild(row, 'padding', 'paddingBottom', String(Math.max(0, nextTop == null
       ? Math.round(designedCardBottom - mediaBottom)
       : 0)))
     setStyleChild(row, 'padding', 'paddingLeft', String(leftPadding))
     setStyleChild(row, 'padding', 'paddingRight', String(rightPadding))
-    row.slots[0].components.push(media)
-    insertSemantic(hostFor(block.y), row, block.y)
+    medias.forEach((media) => row.slots[0].components.push(media))
+    insertSemantic(hostFor(group.y), row, group.y)
   }
 
   // 采样色带宿主顶距：带内首个内容的 spec 顶距搬到带宿主（带内行自身 padT 已因 containment 归零），