@fses/workbench-app 0.2.0 → 0.2.2

package/node_modules/@fses/workbench-card/src/renderers/useWorkbenchBlockRendererBindings.ts

@@ -0,0 +1,3192 @@
+/**
+ * @fileoverview Workbench block renderer bindings - contains the state, watchers, and display helpers for the renderer SFC.
+ * @author seadon
+ * @created 2026-05-20
+ */
+import { computed, h, onBeforeUnmount, reactive, watch, type CSSProperties } from 'vue';
+import type { TableColumnsType } from 'ant-design-vue';
+import { Bot, CircleCheck, CloudRain, CloudSun, LayoutDashboard, UserRound } from 'lucide-vue-next';
+import { workbenchCardShellStyle, workbenchShellDensityClasses } from '../shell/workbenchVisualShell';
+import { implementedCardRegistryEntries } from '../registry';
+import type { WorkbenchRendererHostBridge } from './hostBridge';
+import { createCanvasLayoutBindings } from './custom-canvas/canvasLayoutBindings';
+import { createNestedBlockBindings } from './nested/nestedBlockBindings';
+import { createNativeBindings } from './native/nativeBindings';
+import { createReferenceCompositeBindings } from './reference-composite/referenceCompositeBindings';
+import {
+  applyWorkbenchResizableColumns,
+  setWorkbenchResizableColumnWidth,
+  workbenchStableResizableTableScrollX,
+  type WorkbenchResizableTableColumn,
+} from './resizableTable';
+import {
+  quickLinkLabelLooksLikeContainerChrome,
+  uniqueQuickLinkItems,
+} from './quickLinkDisplay';
+import {
+  IMAGE_TABLE_INTERNAL_COLUMN_KEYS,
+  imageTableColumnVisible,
+  structuredTableCellText,
+  visibleImageTableColumns,
+} from './tableDisplay';
+import type {
+  CategoryRankingData,
+  CustomCanvasData,
+  CustomCanvasNestedBlock,
+  DisplayBlockData,
+  FdeCustomComponentData,
+  MaterializedBlock,
+  MetricSummaryData,
+  RoleId,
+  TableRowsData,
+  WorkbenchBlock,
+} from '../types';
+
+type WorkbenchAntTableRow = Record<string, unknown> & { __rowKey: string };
+
+export interface WorkbenchBlockRendererProps {
+  block: MaterializedBlock;
+  roleId?: RoleId | string;
+  userId?: string;
+  density?: 'thumbnail' | 'compact' | 'standard' | 'expanded';
+  hostBridge?: WorkbenchRendererHostBridge;
+}
+
+export type WorkbenchBlockRendererEmit = (event: string, ...args: unknown[]) => void;
+
+/**
+ * Creates all bindings consumed by WorkbenchBlockRenderer.vue.
+ * @param props - Renderer props from the SFC wrapper.
+ * @param emit - Vue emit function from the SFC wrapper.
+ * @returns Template bindings and renderer helpers.
+ */
+export function useWorkbenchBlockRendererBindings(
+  props: WorkbenchBlockRendererProps,
+  emit: WorkbenchBlockRendererEmit,
+) {
+  const CUSTOM_CANVAS_ABSOLUTE_NESTED_MIN_HEIGHT_RATIO = 0.1;
+  const CUSTOM_CANVAS_ABSOLUTE_NESTED_MIN_WIDTH_RATIO = 0.24;
+  const CUSTOM_CANVAS_ABSOLUTE_NESTED_MAX_CHILDREN = 2;
+  const CUSTOM_CANVAS_ABSOLUTE_NESTED_MAX_OVERLAP_RATIO = 0.28;
+  const CUSTOM_CANVAS_ABSOLUTE_DUAL_COLUMN_MIN_COVERAGE = 0.72;
+  const CUSTOM_CANVAS_ABSOLUTE_DUAL_COLUMN_MAX_OVERLAP_RATIO = 0.15;
+  const CUSTOM_CANVAS_ABSOLUTE_DUAL_COLUMN_MAX_Y_DELTA_RATIO = 0.55;
+  const CUSTOM_CANVAS_NESTED_STACK_OUTLIER_WEIGHT_RATIO = 0.5;
+  const CUSTOM_CANVAS_NATURAL_GRID_FILL_MIN_PARENT_ROWS = 18;
+  const CUSTOM_CANVAS_NATURAL_GRID_MAX_CHILDREN = 8;
+  const CUSTOM_CANVAS_NATURAL_GRID_FILL_MAX_CHILDREN = 3;
+  const NESTED_BLOCK_INTERNAL_SUMMARY_KEYS = new Set([
+    'shape',
+    'dataShape',
+    'chartType',
+    'rendererKey',
+    'primaryLabel',
+    'primaryFormat',
+    'metricFormat',
+    'valueFormat',
+    'dimensionLabel',
+    'source',
+    'rawValue',
+    'payload',
+    'sourceLabel',
+    'composeSource',
+    'snapshotSource',
+    'dataBinding',
+    'dataBindingId',
+    'dataBindingStatus',
+    'dataBindingError',
+    'dataBindingHumanIntervention',
+    'humanIntervention',
+    'queryIntent',
+    'refreshApi',
+    'items',
+    'rows',
+    'metrics',
+    'secondary',
+    'links',
+    'alerts',
+    'series',
+    'categories',
+    'columns',
+    'elements',
+    'backgroundColor',
+    'borderColor',
+    'textColor',
+    'baseCols',
+    'x',
+    'y',
+    'w',
+    'h',
+  ]);
+  
+  
+  const formValuesByBlock = reactive<Record<string, Record<string, unknown>>>({});
+  const surveyAnswersByBlock = reactive<Record<string, Record<string, unknown>>>({});
+  const manualReplacementCapabilityDrafts = reactive<Record<string, string>>({});
+  const manualReplacementCapabilityTouched = reactive<Record<string, boolean>>({});
+  const tableRowsAntTableColumnWidths = reactive<Record<string, number>>({});
+  const tableRowsAntTableScrollFloors: Record<string, number> = {};
+  const chartRefreshRuntime = computed(() => props.hostBridge?.refreshRuntime);
+  let nativeRefreshSequence = 0;
+  let nestedRefreshSequence = 0;
+  
+  const effectiveBlock = computed(() => applyResponsiveTier(props.block, props.density || 'expanded'));
+  const effectiveData = computed(() => normalizedEffectiveData(effectiveBlock.value));
+  const fdeCustomComponentRenderState = computed(() => {
+    const data = effectiveData.value;
+    if (!data || data.shape !== 'fdeCustomComponent') {
+      return {
+        component: null,
+        componentProps: {},
+        status: 'unregistered',
+        message: '',
+      };
+    }
+    const componentData = data as FdeCustomComponentData;
+    const entry = props.hostBridge?.customComponentRegistry?.resolve(componentData) || null;
+    if (!entry || entry.enabled === false) {
+      return {
+        component: null,
+        componentProps: {},
+        status: 'unregistered',
+        message: componentData.fallbackText || '组件未在宿主注册，无法挂载。',
+      };
+    }
+    const validation = props.hostBridge?.customComponentRegistry?.validateProps?.(entry, componentData.props, componentData)
+      ?? entry.validateProps?.(componentData.props, componentData)
+      ?? true;
+    if (validation !== true) {
+      return {
+        component: null,
+        componentProps: {},
+        status: 'unregistered',
+        message: typeof validation === 'string' ? validation : '组件 props 未通过宿主校验。',
+      };
+    }
+    return {
+      component: entry.component,
+      componentProps: componentData.props,
+      status: 'ready',
+      message: componentData.sourceLabel,
+    };
+  });
+
+  /**
+   * Returns the parent id that a nested preview explicitly belongs to.
+   * @param nestedBlock - Nested preview payload.
+   * @returns Parent id from layout/meta/data, or an empty string.
+   */
+  function nestedBlockParentId(nestedBlock: CustomCanvasNestedBlock): string {
+    const layoutParentId = isRecord(nestedBlock.layout) && typeof nestedBlock.layout.parentId === 'string'
+      ? nestedBlock.layout.parentId.trim()
+      : '';
+    const metaParentId = isRecord(nestedBlock.meta) && typeof nestedBlock.meta.parentBlockId === 'string'
+      ? nestedBlock.meta.parentBlockId.trim()
+      : '';
+    const dataParentId = isRecord(nestedBlock.data) && typeof nestedBlock.data.parentBlockId === 'string'
+      ? nestedBlock.data.parentBlockId.trim()
+      : '';
+    return layoutParentId || metaParentId || dataParentId;
+  }
+
+  /**
+   * Drops nested previews that were copied into another container but still point to their original parent.
+   * @param block - Current customCanvas parent card.
+   * @param data - Custom canvas data.
+   * @returns Data with nested previews owned by this parent only.
+   */
+  function normalizeCustomCanvasNestedOwnership(
+    block: WorkbenchBlock,
+    data: Record<string, unknown>,
+  ): Record<string, unknown> {
+    if (data.shape !== 'customCanvas' || !Array.isArray(data.nestedBlocks)) return data;
+    const parentId = typeof block.id === 'string' ? block.id.trim() : '';
+    if (!parentId) return data;
+    const nestedBlocks = data.nestedBlocks.filter((item): item is CustomCanvasNestedBlock => {
+      if (!isRecord(item)) return true;
+      const ownerParentId = nestedBlockParentId(item as unknown as CustomCanvasNestedBlock);
+      return !ownerParentId || ownerParentId === parentId;
+    });
+    if (nestedBlocks.length === data.nestedBlocks.length) return data;
+    const nestedBlockIds = new Set(nestedBlocks.map((nestedBlock) => nestedBlock.id));
+    const nestedLayoutStacks = Array.isArray(data.nestedLayoutStacks)
+      ? data.nestedLayoutStacks
+        .map((stack) => {
+          if (!isRecord(stack) || !Array.isArray(stack.childIds)) return stack;
+          return {
+            ...stack,
+            childIds: stack.childIds.filter((childId) => typeof childId === 'string' && nestedBlockIds.has(childId)),
+          };
+        })
+        .filter((stack) => !isRecord(stack) || !Array.isArray(stack.childIds) || stack.childIds.length > 0)
+      : data.nestedLayoutStacks;
+    const nestedLayoutItems = isRecord(data.nestedLayoutItems)
+      ? Object.fromEntries(Object.entries(data.nestedLayoutItems).filter(([id]) => nestedBlockIds.has(id)))
+      : data.nestedLayoutItems;
+    return {
+      ...data,
+      nestedBlocks,
+      nestedLayoutStacks,
+      nestedLayoutItems,
+    };
+  }
+
+  /**
+   * Recursively collects nested preview cards while preserving the first visible occurrence of each card.
+   * @param nestedBlocks - Direct nested cards carried by a custom canvas.
+   * @param seenIds - Card ids already emitted by an ancestor or sibling.
+   * @returns Direct cards followed by descendant cards that need their own preview entry.
+   */
+  function flattenCustomCanvasNestedBlocks(
+    nestedBlocks: readonly CustomCanvasNestedBlock[] = [],
+    seenIds = new Set<string>(),
+  ): CustomCanvasNestedBlock[] {
+    return nestedBlocks.flatMap((nestedBlock) => {
+      const id = typeof nestedBlock.id === 'string' ? nestedBlock.id.trim() : '';
+      const current = id && !seenIds.has(id) ? [nestedBlock] : [];
+      if (id) seenIds.add(id);
+      const childData = isRecord(nestedBlock.data) ? nestedBlock.data : {};
+      const childNestedBlocks = Array.isArray(childData.nestedBlocks)
+        ? childData.nestedBlocks.filter(isRecord).map((item) => item as unknown as CustomCanvasNestedBlock)
+        : [];
+      return [...current, ...flattenCustomCanvasNestedBlocks(childNestedBlocks, seenIds)];
+    });
+  }
+
+  /**
+   * Returns every nested card that should be visible and diagnosable for a custom canvas.
+   * @param data - Current custom canvas data.
+   * @returns De-duplicated nested cards including deeper descendants.
+   */
+  function customCanvasVisibleNestedBlocks(data: CustomCanvasData): CustomCanvasNestedBlock[] {
+    const nestedBlocks = Array.isArray(data.nestedBlocks) ? data.nestedBlocks : [];
+    return flattenCustomCanvasNestedBlocks(nestedBlocks);
+  }
+  
+  /**
+   * Formats metric values with a host override when available.
+   * @param value - Numeric metric value.
+   * @param format - Optional format key.
+   * @returns Display-ready metric value.
+   */
+  function formatMetricValue(value: number, format = ''): string {
+    const hostFormatter = props.hostBridge?.formatMetricValue;
+    if (hostFormatter) return hostFormatter(value, format);
+    if (format === 'percent') return `${(value * 100).toFixed(1)}%`;
+    return Number.isFinite(value) ? new Intl.NumberFormat('zh-CN').format(value) : '-';
+  }
+  
+  /**
+   * Builds a business gap summary with a host override when available.
+   * @param input - Business gap diagnostic input.
+   * @returns User-facing fallback or host-provided diagnostic sentence.
+   */
+  function businessGapDiagnosticSummary(input: { message?: unknown; fallback?: string; diagnostics?: unknown }): string {
+    return props.hostBridge?.businessGapDiagnosticSummary?.(input)
+      || (typeof input.message === 'string' && input.message.trim() ? input.message.trim() : input.fallback || '需要补充业务口径后再问数');
+  }
+  
+  onBeforeUnmount(() => {
+    nativeRefreshSequence += 1;
+    nestedRefreshSequence += 1;
+  });
+  
+  function isRecord(value: unknown): value is Record<string, unknown> {
+    return Boolean(value && typeof value === 'object' && !Array.isArray(value));
+  }
+
+  /**
+   * Restores renderer shape for persisted image cards that kept snapshot values but lost data.shape.
+   * @param block - Current renderer block.
+   * @returns Display data with a renderer shape when it can be safely inferred.
+   */
+  function normalizedEffectiveData(block: WorkbenchBlock): DisplayBlockData | undefined {
+    const data = isRecord(block.data) ? block.data : undefined;
+    if (!data) return undefined;
+    const shape = typeof data.shape === 'string' ? data.shape.trim() : '';
+    if (imageComposeBidConclusionSnapshot(block, data)) {
+      return normalizeDisplayBlockData(normalizeImageComposeRankingData({ ...data, shape: 'ranking' }, 'ranking'));
+    }
+    if (shape) return normalizeDisplayBlockData(normalizeCustomCanvasNestedOwnership(block, normalizeImageComposeRankingData(data, shape)));
+    if (!imageComposeCompactCard(block)) return normalizeDisplayBlockData(data);
+    const metaShape = typeof block.meta?.dataShape === 'string' ? block.meta.dataShape.trim() : '';
+    const v2 = isRecord(block.meta?.v2) ? block.meta.v2 : {};
+    const v2Shape = typeof v2.dataShape === 'string' ? v2.dataShape.trim() : '';
+    const inferredShape = metaShape || v2Shape;
+    return inferredShape ? normalizeDisplayBlockData(normalizeImageComposeRankingData({ ...data, shape: inferredShape }, inferredShape)) : normalizeDisplayBlockData(data);
+  }
+
+  /**
+   * Casts dynamic renderer data after shape normalization has preserved the display-data contract.
+   * @param data - Renderer data record.
+   * @returns DisplayBlockData consumed by the Vue template.
+   */
+  function normalizeDisplayBlockData(data: Record<string, unknown>): DisplayBlockData {
+    return data as unknown as DisplayBlockData;
+  }
+
+  /**
+   * Normalizes persisted V2 image list snapshots to the renderer protocol used by this package.
+   * @param data - Raw renderer data from the workbench document.
+   * @param shape - Existing or inferred data shape.
+   * @returns Data that can be consumed by the category ranking template.
+   */
+  function normalizeImageComposeRankingData(
+    data: Record<string, unknown>,
+    shape: string,
+  ): Record<string, unknown> {
+    if (shape !== 'ranking') return data;
+    const rawItems = Array.isArray(data.items)
+      ? data.items
+      : Array.isArray(data.rows)
+        ? data.rows
+        : [];
+    return {
+      ...data,
+      shape: 'categoryRanking',
+      dimensionLabel: textValue(data.dimensionLabel, 'image snapshot'),
+      valueFormat: textValue(data.valueFormat, 'number'),
+      items: rawItems.map((item, index) => normalizeImageComposeRankingItem(item, index)).filter((item) => item.label),
+    };
+  }
+
+  /**
+   * Keeps OCR list rows readable while preserving alert fields such as severity and time.
+   * @param item - Raw image-recognition list row.
+   * @param index - Row index used for fallback numeric fields.
+   * @returns Category ranking row with extra alert metadata retained.
+   */
+  function normalizeImageComposeRankingItem(item: unknown, index: number): Record<string, unknown> {
+    const record = isRecord(item) ? item : { label: item };
+    const label = textValue(record.label, textValue(record.title, textValue(record.name, String(index + 1))));
+    const valueText = textValue(record.value, textValue(record.amount, textValue(record.status, textValue(record.badge))));
+    const numericValue = numberValue(record.value, numberValue(record.amount, index + 1));
+    const value = Number.isFinite(numericValue) ? numericValue : index + 1;
+    return {
+      ...record,
+      label,
+      value,
+      share: numberValue(record.share, Math.max(0.08, Math.min(1, value > 1 ? value / 100 : value))),
+      ...(valueText ? { valueLabel: valueText } : {}),
+    };
+  }
+
+  /**
+   * Checks whether a persisted image-compose conclusion snapshot kept list items but lost renderer shape.
+   * @param block - Current renderer block.
+   * @param data - Raw renderer data from the workbench document.
+   * @returns True when the list should be restored to the category-ranking conclusion renderer.
+   */
+  function imageComposeBidConclusionSnapshot(block: WorkbenchBlock, data: Record<string, unknown>): boolean {
+    if (textValue(data.visualKind) !== 'bidConclusion') return false;
+    if (!Array.isArray(data.items) || data.items.length === 0) return false;
+    return imageComposeNativeCapabilityId(block, data as unknown as DisplayBlockData) === 'card.table.list' && imageComposeCompactCard(block);
+  }
+  
+  /**
+   * Reads a property from an object-shaped value.
+   * @param value - Unknown value that may be a record.
+   * @param key - Property name to read.
+   * @returns Property value when the input is a record.
+   */
+  function objectValue(value: unknown, key: string) {
+    return isRecord(value) ? value[key] : undefined;
+  }
+  
+  /**
+   * Extracts the refresh API from native renderer data.
+   * @param data - Current display renderer data.
+   * @returns Trimmed refresh API, or an empty string when absent.
+   */
+  function nativeDataBindingRefreshApi(data: DisplayBlockData | undefined): string {
+    const dataBinding = objectValue(data, 'dataBinding');
+    return isRecord(dataBinding) ? props.hostBridge?.refreshRuntime?.refreshApi(dataBinding) || '' : '';
+  }
+
+  /**
+   * Reads supplemental wording saved by the host after a successful business-gap query.
+   * @param dataBinding - Data-binding metadata.
+   * @returns Saved business wording when present.
+   */
+  function dataBindingBusinessWording(dataBinding: unknown): string | undefined {
+    if (!isRecord(dataBinding)) return undefined;
+    const wording = dataBinding.supplementalBusinessWording;
+    if (typeof wording === 'string' && wording.trim()) return wording.trim();
+    const originalWording = dataBinding.originalSupplementalBusinessWording;
+    return typeof originalWording === 'string' && originalWording.trim() ? originalWording.trim() : undefined;
+  }
+  
+  /**
+   * Extracts the normal data-binding id from native renderer data.
+   * @param data - Current display renderer data.
+   * @returns Binding id from direct or nested binding metadata.
+   */
+  function nativeDataBindingId(data: DisplayBlockData | undefined): string {
+    const directId = objectValue(data, 'dataBindingId');
+    if (typeof directId === 'string' && directId.trim()) return directId.trim();
+    const bindingId = objectValue(objectValue(data, 'dataBinding'), 'bindingId');
+    if (typeof bindingId === 'string' && bindingId.trim()) return bindingId.trim();
+    const canonicalId = objectValue(objectValue(data, 'dataBinding'), 'id');
+    return typeof canonicalId === 'string' ? canonicalId.trim() : '';
+  }
+  
+  /**
+   * Extracts the refresh API from a nested preview data binding.
+   * @param block - Nested customCanvas child.
+   * @returns Trimmed refresh API, or an empty string when absent.
+   */
+  function nestedDataBindingRefreshApi(block: CustomCanvasNestedBlock): string {
+    return props.hostBridge?.refreshRuntime?.refreshApi(block.dataBinding) || '';
+  }
+  
+  /**
+   * Extracts the stable data-binding id from a nested preview.
+   * @param block - Nested customCanvas child.
+   * @returns Binding id when present.
+   */
+  function nestedDataBindingId(block: CustomCanvasNestedBlock): string {
+    if (typeof block.dataBindingId === 'string' && block.dataBindingId.trim()) return block.dataBindingId.trim();
+    if (typeof block.dataBinding?.bindingId === 'string' && block.dataBinding.bindingId.trim()) return block.dataBinding.bindingId.trim();
+    return typeof block.dataBinding?.id === 'string' ? block.dataBinding.id.trim() : '';
+  }
+  
+  /**
+   * Checks whether BlockRenderers should run a native data-binding refresh.
+   * @param data - Current display renderer data.
+   * @returns True for native renderer data with a refresh API.
+   */
+  function shouldRefreshNativeDataBinding(data: DisplayBlockData | undefined): boolean {
+    if (!data || data.shape === 'protocolRender' || data.shape === 'echartsDynamic') return false;
+    const dataBinding = objectValue(data, 'dataBinding');
+    return isRecord(dataBinding) && Boolean(props.hostBridge?.refreshRuntime?.shouldAutoRefresh(dataBinding, {
+      data,
+      meta: effectiveBlock.value.meta,
+      source: effectiveBlock.value.source,
+      sourceType: effectiveBlock.value.source?.sourceType,
+      suppressImageComposeAutoRefresh: imageComposeBackfillIsActive(),
+    }));
+  }
+  
+  /**
+   * Checks whether a nested preview should refresh through its query endpoint.
+   * @param block - Nested customCanvas child.
+   * @returns True when the nested binding should run one automatic query.
+   */
+  function shouldRefreshNestedDataBinding(block: CustomCanvasNestedBlock): boolean {
+    return Boolean(props.hostBridge?.refreshRuntime?.shouldAutoRefresh(block.dataBinding, {
+      data: block.data,
+      meta: effectiveBlock.value.meta,
+      source: effectiveBlock.value.source,
+      sourceType: effectiveBlock.value.source?.sourceType,
+      suppressImageComposeAutoRefresh: imageComposeBackfillIsActive(),
+    }));
+  }
+  
+  /**
+   * Lists nested preview bindings that should query after a restored image workspace loads.
+   * @param data - Current renderer data.
+   * @returns Query targets for nested customCanvas children.
+   */
+  function nestedDataBindingRefreshTargets(data: DisplayBlockData | undefined): Array<{ bindingId: string; refreshApi: string; dataBinding: unknown }> {
+    if (!data || data.shape !== 'customCanvas' || !Array.isArray(data.nestedBlocks)) return [];
+    return customCanvasVisibleNestedBlocks(data).flatMap((nestedBlock) => {
+      const bindingId = nestedDataBindingId(nestedBlock);
+      const refreshApi = nestedDataBindingRefreshApi(nestedBlock);
+      if (!bindingId || !refreshApi || !shouldRefreshNestedDataBinding(nestedBlock)) return [];
+      return [{ bindingId, refreshApi, dataBinding: nestedBlock.dataBinding }];
+    });
+  }
+  
+  /**
+   * 生成原生卡片数据绑定刷新 watcher 的稳定 key，避免状态标记 running 时丢弃本次 query 结果。
+   * @returns 只包含真正影响刷新目标的稳定字符串。
+   */
+  function nativeDataBindingRefreshWatchKey(): string {
+    const data = effectiveData.value;
+    return [
+      data?.shape || '',
+      nativeDataBindingId(data),
+      nativeDataBindingRefreshApi(data),
+      currentRoleId(),
+      props.hostBridge?.refreshRuntime?.conversationId || props.hostBridge?.refreshRuntime?.currentConversationId || '',
+      imageComposeBackfillIsActive() ? 'active-compose-backfill' : 'idle',
+    ].join('\u001f');
+  }
+  
+  /**
+   * Builds the watcher key for nested preview data-binding refreshes.
+   * @returns Stable key for all nested bindings in the current customCanvas.
+   */
+  function nestedDataBindingRefreshWatchKey(): string {
+    const targets = nestedDataBindingRefreshTargets(effectiveData.value);
+    return [
+      targets.map((target) => `${target.bindingId}:${target.refreshApi}`).sort().join('|'),
+      currentRoleId(),
+      props.hostBridge?.refreshRuntime?.conversationId || props.hostBridge?.refreshRuntime?.currentConversationId || '',
+      imageComposeBackfillIsActive() ? 'active-compose-backfill' : 'idle',
+    ].join('\u001f');
+  }
+  
+  /**
+   * 判断当前页面是否仍在图片编排 SSE 回填期间。
+   * @returns 处于接收、识别、文档生成、逐卡回填或本页刚完成阶段时返回 true。
+   */
+  function imageComposeBackfillIsActive(): boolean {
+    return Boolean(props.hostBridge?.refreshRuntime?.isImageComposeBackfillActive?.());
+  }
+  
+  /**
+   * Returns the role scope used by native renderer data-binding refreshes.
+   * @returns Active card role with a stable fallback.
+   */
+  function currentRoleId(): RoleId | '' {
+    return (props.roleId || props.hostBridge?.refreshRuntime?.roleId || props.hostBridge?.refreshRuntime?.currentRoleId || '') as RoleId | '';
+  }
+  
+  /**
+   * Returns the active user id supplied by the iframe entry context.
+   * @returns Current user id, or an empty string when the portal did not provide it.
+   */
+  function currentUserId(): string {
+    return props.userId?.trim() || props.hostBridge?.refreshRuntime?.userId?.trim() || props.hostBridge?.refreshRuntime?.currentUserId?.trim() || '';
+  }
+  
+  const {
+    isFormBlockData,
+    isSurveyBlockData,
+    isActionGroupData,
+    isWorkflowBlockData,
+    isReportBlockData,
+    textValue,
+    numberValue,
+    listValue,
+    metaRecord,
+    metaList,
+    welcomeBannerMetrics,
+    tierKeyForDensity,
+    applyResponsiveTier,
+    formValues,
+    surveyAnswers,
+    compactLimit,
+    toggleMultiValue,
+    formCompletedCount,
+    renderFieldType,
+    updateMatrixAnswer,
+    matrixAnswerValue,
+    multipleAnswerIncludes,
+    taskStatusClass,
+    taskTypeLabel,
+    taskStatusLabel,
+    tableRowsPreviewVisualKind,
+    tableRowsPreviewCard,
+    tableRowsPreviewRecords,
+    tableRowsPreviewCell,
+    tableRowsTimelinePrimaryCell,
+    tableRowsTimelineBadgeCell,
+    tableRowsPreviewGridStyle,
+    formatWeatherTemp,
+    weatherIcon,
+    isChartShape,
+    imageComposeEmptyChartPreview,
+    imageComposeChartPreview,
+    imageComposeMetricLeadingVisualKind,
+    imageComposeChartPreviewKind,
+    imageComposeChartPreviewLabel,
+    imageComposeChartPreviewMetric,
+    imageComposeChartPreviewStatus,
+    imageComposeChartPreviewHeader,
+    imageComposeChartPreviewBars,
+    imageComposeChartPreviewDonutStyle,
+    imageComposeEmptyRankingPreview,
+    imageComposeEmptyRankingStatus,
+    imageComposeEmptyRankingDetail,
+    imageComposeRankingPreviewItems,
+    imageComposeRankingPreviewLabel,
+    imageComposeRankingPreviewDetail,
+    imageComposeRankingPreviewValue,
+    imageComposeRankingPreviewAvatar,
+    imageComposeRankingPreviewAvatarClass,
+    imageComposeRankingPreviewValueClass,
+    activeTabFor,
+    tabsFor,
+    orgMetricValues,
+    visualFor,
+    visualForScene,
+    rowGrid,
+    tableColumnsFromRows,
+    tableRowCells,
+    metricSummaryDisplayValue,
+    metricSummaryUnitLabel,
+    imageComposeMetricSubText,
+    imageComposeMetricFooterStatus,
+    imageComposeMetricFooterMain,
+    imageComposeMetricFooterStatusClass,
+    imageComposeMetricStatusDotClass,
+    chartRendererKey,
+  } = createNativeBindings({
+    props,
+    formValuesByBlock,
+    surveyAnswersByBlock,
+    formatMetricValue,
+    isRecord,
+    dataBindingNeedsHumanIntervention: () => dataBindingNeedsHumanIntervention,
+    imageComposeAlertRankingCard: () => imageComposeAlertRankingCard,
+    imageComposeCompactCard: () => imageComposeCompactCard,
+    imageComposeBusinessGapBadgeLabel: () => imageComposeBusinessGapBadgeLabel,
+    referenceCompositeLooksLikeChairmanRiskDirectContext: () => referenceCompositeLooksLikeChairmanRiskDirectContext,
+    CircleCheck,
+    UserRound,
+    LayoutDashboard,
+    Bot,
+    CloudRain,
+    CloudSun,
+  });
+
+  /**
+   * Stores a resized AntD table column width for rows cards.
+   * @param payload - Resize payload from the shared table header cell.
+   */
+  function handleTableRowsAntTableColumnResize(width: number, column: unknown): void {
+    setWorkbenchResizableColumnWidth(tableRowsAntTableColumnWidths, width, column);
+  }
+
+  /**
+   * Builds a stable table key for one rows card column set.
+   * @param blockId - Current card block id.
+   * @param columns - Visible table columns.
+   * @param variant - Table renderer variant.
+   * @returns Table key used by column width state.
+   */
+  function tableRowsAntTableKey(blockId: string, columns: string[], variant: string): string {
+    return `${blockId || 'rows'}::${variant}::${columns.join('\u001f')}`;
+  }
+
+  /**
+   * Builds AntD columns for the rows preview table branch.
+   * @param blockId - Current card block id.
+   * @param columns - Visible table columns.
+   * @returns Resizable AntD table columns.
+   */
+  function tableRowsPreviewAntTableColumns(
+    blockId: string,
+    columns: string[],
+  ): TableColumnsType<WorkbenchAntTableRow> {
+    const visibleColumns = columns.length > 0 ? columns : ['字段'];
+    const tableKey = tableRowsAntTableKey(blockId, visibleColumns, 'preview');
+    return applyWorkbenchResizableColumns(visibleColumns.map((column, index) => ({
+      title: column,
+      dataIndex: `__col_${index}`,
+      key: `col_${index}_${column}`,
+      ellipsis: true,
+      width: 120,
+      customRender: ({ record }: { record: WorkbenchAntTableRow }) => {
+        const text = String(record[`__col_${index}`] ?? '');
+        return h('span', { title: text }, text);
+      },
+    })), {
+      tableKey,
+      widths: tableRowsAntTableColumnWidths,
+      defaultWidth: 120,
+    }) as TableColumnsType<WorkbenchAntTableRow>;
+  }
+
+  /**
+   * Builds AntD rows for the rows preview table branch.
+   * @param data - Current table rows data.
+   * @param columns - Visible table columns.
+   * @returns AntD table data source.
+   */
+  function tableRowsPreviewAntTableRows(
+    data: DisplayBlockData | undefined,
+    columns: string[],
+  ): WorkbenchAntTableRow[] {
+    const visibleColumns = columns.length > 0 ? columns : ['字段'];
+    return tableRowsPreviewRecords(data).map((row, rowIndex) => ({
+      __rowKey: String(row.id || rowIndex),
+      ...Object.fromEntries(visibleColumns.map((column, columnIndex) => [
+        `__col_${columnIndex}`,
+        tableRowsPreviewCell(row, column),
+      ])),
+    }));
+  }
+
+  /**
+   * Builds AntD columns for the generic rows fallback table.
+   * @param blockId - Current card block id.
+   * @param data - Current table rows data.
+   * @returns Resizable AntD table columns.
+   */
+  function tableRowsFallbackAntTableColumns(
+    blockId: string,
+    data: TableRowsData,
+  ): TableColumnsType<WorkbenchAntTableRow> {
+    const visibleColumns = compactLimit(tableColumnsFromRows(data.columns, data.rows), 2, 3);
+    const tableKey = tableRowsAntTableKey(blockId, visibleColumns, 'fallback');
+    return applyWorkbenchResizableColumns(visibleColumns.map((column, index) => ({
+      title: column,
+      dataIndex: `__col_${index}`,
+      key: `col_${index}_${column}`,
+      ellipsis: true,
+      width: 120,
+      customRender: ({ record }: { record: WorkbenchAntTableRow }) => {
+        const text = String(record[`__col_${index}`] ?? '');
+        return h('span', { title: text }, text);
+      },
+    })), {
+      tableKey,
+      widths: tableRowsAntTableColumnWidths,
+      defaultWidth: 120,
+    }) as TableColumnsType<WorkbenchAntTableRow>;
+  }
+
+  /**
+   * Builds AntD rows for the generic rows fallback table.
+   * @param data - Current table rows data.
+   * @returns AntD table data source.
+   */
+  function tableRowsFallbackAntTableRows(data: TableRowsData): WorkbenchAntTableRow[] {
+    const visibleColumns = compactLimit(tableColumnsFromRows(data.columns, data.rows), 2, 3);
+    return data.rows.map((row, rowIndex) => ({
+      __rowKey: String(row.id || rowIndex),
+      ...Object.fromEntries(tableRowCells(row, visibleColumns).map((cell, columnIndex) => [
+        `__col_${columnIndex}`,
+        cell,
+      ])),
+    }));
+  }
+
+  /**
+   * Builds AntD scroll settings for card table previews.
+   * @param columns - Effective AntD columns.
+   * @returns Scroll settings for card table rendering.
+   */
+  function tableRowsAntTableScroll(columns: TableColumnsType<WorkbenchAntTableRow>): { x: number; y: string } {
+    return {
+      x: workbenchStableResizableTableScrollX(
+        columns as unknown as WorkbenchResizableTableColumn[],
+        360,
+        120,
+        tableRowsAntTableScrollFloors,
+      ),
+      y: '100%',
+    };
+  }
+
+  watch(() => props.block.form, () => {
+    if (isFormBlockData(props.block.form)) formValuesByBlock[props.block.id] = { ...(props.block.form.values || {}) };
+  }, { immediate: true, deep: true });
+  
+  watch(() => props.block.survey, () => {
+    if (isSurveyBlockData(props.block.survey)) surveyAnswersByBlock[props.block.id] = { ...(props.block.survey.answers || {}) };
+  }, { immediate: true, deep: true });
+
+  function manualReplacementView(block: WorkbenchBlock) {
+    return props.hostBridge?.manualReplacementViewForBlock?.(block) || null;
+  }
+  
+  /**
+   * Lists implemented card capabilities available for replacing an uncertain screenshot region.
+   * @returns User-selectable registry entries sorted by their existing registry order.
+   */
+  const manualReplacementCapabilityOptions = computed(() =>
+    implementedCardRegistryEntries().map((entry) => ({
+      capabilityId: entry.capabilityId,
+      title: entry.title,
+      group: entry.category,
+      type: entry.type,
+    })),
+  );
+  
+  type ManualReplacementCapabilityOption = typeof manualReplacementCapabilityOptions.value[number];
+  
+  /**
+   * Reads the model-suggested capability id from a manual placeholder.
+   * @param block - Placeholder block from image compose.
+   * @returns Suggested capability id when present.
+   */
+  function suggestedManualReplacementCapabilityId(block: WorkbenchBlock): string {
+    const data = isRecord(block.data) ? block.data : {};
+    const manualReplacement = isRecord(data.manualReplacement) ? data.manualReplacement : {};
+    const capabilityId = manualReplacement.suggestedCapabilityId;
+    return typeof capabilityId === 'string' ? capabilityId : '';
+  }
+  
+  /**
+   * Reads the model-suggested coarse card kind from a manual placeholder.
+   * @param block - Placeholder block from image compose.
+   * @returns Suggested coarse card kind when present.
+   */
+  function suggestedManualReplacementKind(block: WorkbenchBlock): string {
+    const data = isRecord(block.data) ? block.data : {};
+    const manualReplacement = isRecord(data.manualReplacement) ? data.manualReplacement : {};
+    const kind = manualReplacement.suggestedKind;
+    return typeof kind === 'string' ? kind : '';
+  }
+  
+  /**
+   * Checks whether a registry entry belongs to the same coarse kind as the recognition suggestion.
+   * @param option - Registry option.
+   * @param suggestedKind - Model-suggested coarse kind.
+   * @returns True when the option is in the same broad capability family.
+   */
+  function manualReplacementOptionMatchesKind(
+    option: ManualReplacementCapabilityOption,
+    suggestedKind: string,
+  ): boolean {
+    if (!suggestedKind) return false;
+    if (suggestedKind === 'analysis') return option.capabilityId.startsWith('card.analysis.');
+    if (['insight', 'report', 'summary', 'risk', 'suggestion'].includes(suggestedKind)) {
+      return option.capabilityId.startsWith('card.analysis.');
+    }
+    if (suggestedKind === 'metric') return option.capabilityId.startsWith('card.metric.');
+    if (suggestedKind === 'chart') return option.capabilityId.startsWith('card.chart.');
+    if (suggestedKind === 'table') return option.capabilityId.startsWith('card.table.');
+    if (suggestedKind === 'list') return option.capabilityId.startsWith('card.workflow.') || option.type.includes('list');
+    if (suggestedKind === 'container') return option.capabilityId.startsWith('card.dashboard.') || option.capabilityId.startsWith('card.custom.');
+    return false;
+  }
+  
+  /**
+   * Sorts manual replacement options for the current placeholder.
+   * @param options - Implemented registry options.
+   * @param block - Placeholder block from image compose.
+   * @returns Options with exact suggestion first, same-kind options next, and registry order preserved otherwise.
+   */
+  function sortManualReplacementCapabilityOptions(
+    options: ManualReplacementCapabilityOption[],
+    block: WorkbenchBlock,
+  ): ManualReplacementCapabilityOption[] {
+    const suggestedCapabilityId = suggestedManualReplacementCapabilityId(block);
+    const suggestedKind = suggestedManualReplacementKind(block);
+    return options
+      .map((option, index) => ({
+        option,
+        index,
+        rank: option.capabilityId === suggestedCapabilityId
+          ? 0
+          : manualReplacementOptionMatchesKind(option, suggestedKind)
+            ? 1
+            : 2,
+      }))
+      .sort((left, right) => left.rank - right.rank || left.index - right.index)
+      .map((item) => item.option);
+  }
+  
+  /**
+   * Lists replacement capability options ordered for one placeholder.
+   * @param block - Placeholder block from image compose.
+   * @returns Sorted replacement options.
+   */
+  function manualReplacementCapabilityOptionsForBlock(block: WorkbenchBlock): ManualReplacementCapabilityOption[] {
+    return sortManualReplacementCapabilityOptions(manualReplacementCapabilityOptions.value, block);
+  }
+  
+  /**
+   * Returns the currently selected capability for a manual placeholder.
+   * @param block - Placeholder block from image compose.
+   * @returns Selected or suggested capability id.
+   */
+  function manualReplacementCapabilityDraft(block: WorkbenchBlock): string {
+    const current = manualReplacementCapabilityDrafts[block.id];
+    if (current) return current;
+    const suggested = suggestedManualReplacementCapabilityId(block);
+    const options = manualReplacementCapabilityOptionsForBlock(block);
+    if (suggested && options.some((entry) => entry.capabilityId === suggested)) return suggested;
+    return options[0]?.capabilityId || '';
+  }
+  
+  /**
+   * Stores the user's selected replacement capability for a placeholder card.
+   * @param blockId - Placeholder card id.
+   * @param capabilityId - Selected registry capability id.
+   */
+  function setManualReplacementCapabilityDraft(blockId: string, capabilityId: string) {
+    manualReplacementCapabilityDrafts[blockId] = capabilityId;
+    manualReplacementCapabilityTouched[blockId] = true;
+  }
+  
+  /**
+   * Emits a manual placeholder replacement request with the current capability override.
+   * @param block - Placeholder block from image compose.
+   */
+  function replaceManualPlaceholder(block: MaterializedBlock) {
+    const selectedCapabilityId = manualReplacementCapabilityDraft(block);
+    const shouldOverride = manualReplacementCapabilityTouched[block.id] && Boolean(selectedCapabilityId);
+    emit('replaceManualPlaceholder', {
+      block,
+      overrideCapabilityId: shouldOverride ? selectedCapabilityId : undefined,
+    });
+  }
+  
+  function nestedBlockDataSummary(block: CustomCanvasNestedBlock) {
+    const data = isRecord(block.data) ? block.data : {};
+    if (block.kind === 'placeholder' || nestedBlockRendererKey(block) === 'placeholder') return '需手动补卡';
+    if (typeof data.value === 'number' || typeof data.value === 'string') return String(data.value);
+    if (typeof data.displayValue === 'string') return data.displayValue;
+    if (typeof data.primaryValue === 'number' || typeof data.primaryValue === 'string') return String(data.primaryValue);
+    if (Array.isArray(data.rows)) return `${data.rows.length} 行`;
+    const summaryEntries = Object.entries(data)
+      .map(([key, value]) => nestedBlockSummaryEntry(key, value))
+      .filter(Boolean);
+    return summaryEntries.length > 0 ? summaryEntries.slice(0, 2).join(' / ') : '预览';
+  }
+  
+  /**
+   * Converts a nested-card data field into a user-facing summary fragment.
+   * @param key - Renderer data key from image recognition or setData.
+   * @param value - Renderer data value.
+   * @returns Business text fragment, or an empty string for internal protocol fields.
+   */
+  function nestedBlockSummaryEntry(key: string, value: unknown): string {
+    if (key === 'narrative' && customCanvasGeneratedNarrative(value)) return '';
+    if (NESTED_BLOCK_INTERNAL_SUMMARY_KEYS.has(key) || IMAGE_TABLE_INTERNAL_COLUMN_KEYS.has(key)) return '';
+    if (typeof value === 'string' && value.trim()) return value.trim();
+    if (typeof value === 'number' && Number.isFinite(value)) return String(value);
+    return structuredTableCellText(value);
+  }
+  
+  function nestedBlockRendererKey(block: CustomCanvasNestedBlock) {
+    return block.renderer?.rendererKey || String(block.subType || block.kind || '');
+  }
+  
+  function nestedBlockComposeSource(block: CustomCanvasNestedBlock) {
+    return textValue(block.composeSource, textValue(block.data?.composeSource));
+  }
+  
+  function nestedBlockStyle(block: CustomCanvasNestedBlock): CSSProperties {
+    const visual = isRecord(block.visual) ? block.visual : {};
+    return workbenchCardShellStyle(visual);
+  }
+  
+  /**
+   * Checks whether nested image previews should use screenshot coordinates.
+   * @param block - Rendered customCanvas container.
+   * @param data - Custom canvas renderer data.
+   * @returns True when V2 image compose supplied child layout boxes.
+   */
+  function customCanvasUsesAbsoluteNestedBlocks(block: WorkbenchBlock, data: CustomCanvasData): boolean {
+    if (customCanvasShowsStructureLabels(block)) return false;
+    if (data.nestedLayoutMode !== 'absolute') return false;
+    return customCanvasAbsoluteNestedLayoutLooksSafe(block, data);
+  }
+  
+  /**
+   * Defensively checks persisted screenshot-positioned nested layouts before using absolute CSS.
+   * @param block - Rendered customCanvas container.
+   * @param data - Custom canvas renderer data.
+   * @returns True when absolute child boxes are large enough and non-overlapping.
+   */
+  function customCanvasAbsoluteNestedLayoutLooksSafe(block: WorkbenchBlock, data: CustomCanvasData): boolean {
+    if (customCanvasShowsStructureLabels(block)) return false;
+    const nestedBlocks = customCanvasVisibleNestedBlocks(data);
+    if (nestedBlocks.length > CUSTOM_CANVAS_ABSOLUTE_NESTED_MAX_CHILDREN) return false;
+    const boxes = nestedBlocks
+      .filter(nestedBlockHasLayout)
+      .map((nestedBlock) => customCanvasAbsoluteNestedBox(nestedBlock, data))
+      .filter((box): box is { x: number; y: number; w: number; h: number } => Boolean(box));
+    if (boxes.length === 0) return false;
+    const basis = isRecord(data.nestedLayoutBasis) ? data.nestedLayoutBasis : {};
+    const basisW = Math.max(1, numberValue(basis.w, 24));
+    const basisH = Math.max(1, numberValue(basis.h, 1));
+    if (boxes.some((box) => box.x < 0 || box.y < 0 || box.x + box.w > basisW + 0.001 || box.y + box.h > basisH + 0.001)) return false;
+    if (boxes.some((box) => box.w / basisW < CUSTOM_CANVAS_ABSOLUTE_NESTED_MIN_WIDTH_RATIO)) return false;
+    if (boxes.some((box) => box.h / basisH < CUSTOM_CANVAS_ABSOLUTE_NESTED_MIN_HEIGHT_RATIO)) return false;
+    if (customCanvasAbsoluteNestedDualColumnRowLooksBetterAsGrid(nestedBlocks, boxes, basisW, basisH)) return false;
+    const totalArea = boxes.reduce((sum, box) => sum + box.w * box.h, 0);
+    if (totalArea <= 0) return false;
+    return customCanvasAbsoluteNestedOverlapArea(boxes) / totalArea <= CUSTOM_CANVAS_ABSOLUTE_NESTED_MAX_OVERLAP_RATIO;
+  }
+
+  /**
+   * Detects two image data cards that should align as one responsive row instead of absolute coordinates.
+   * @param nestedBlocks - Nested child previews from the image container.
+   * @param boxes - Parent-local absolute boxes for the same children.
+   * @param basisW - Parent width in source layout units.
+   * @param basisH - Parent height in source layout units.
+   * @returns True when regular grid layout is safer than model-emitted absolute y positions.
+   */
+  function customCanvasAbsoluteNestedDualColumnRowLooksBetterAsGrid(
+    nestedBlocks: CustomCanvasNestedBlock[],
+    boxes: Array<{ x: number; y: number; w: number; h: number }>,
+    basisW: number,
+    basisH: number,
+  ): boolean {
+    if (nestedBlocks.length !== 2 || boxes.length !== 2) return false;
+    const entries = nestedBlocks
+      .map((child, index) => ({ child, box: boxes[index] }))
+      .filter((entry): entry is { child: CustomCanvasNestedBlock; box: { x: number; y: number; w: number; h: number } } => Boolean(entry.box))
+      .sort((left, right) => left.box.x - right.box.x || left.box.y - right.box.y);
+    if (entries.length !== 2) return false;
+    const families = entries.map((entry) => nestedBlockComparableDataFamily(entry.child));
+    if (families.some((family) => !family) || new Set(families).size !== 1) return false;
+    const [left, right] = entries;
+    const overlap = Math.max(0, Math.min(left.box.x + left.box.w, right.box.x + right.box.w) - Math.max(left.box.x, right.box.x));
+    if (overlap > Math.min(left.box.w, right.box.w) * CUSTOM_CANVAS_ABSOLUTE_DUAL_COLUMN_MAX_OVERLAP_RATIO) return false;
+    const spanLeft = Math.min(left.box.x, right.box.x);
+    const spanRight = Math.max(left.box.x + left.box.w, right.box.x + right.box.w);
+    if ((spanRight - spanLeft) / basisW < CUSTOM_CANVAS_ABSOLUTE_DUAL_COLUMN_MIN_COVERAGE) return false;
+    const widthBalance = Math.min(left.box.w, right.box.w) / Math.max(left.box.w, right.box.w);
+    if (widthBalance < 0.45) return false;
+    const yDelta = Math.abs(left.box.y - right.box.y);
+    return yDelta <= Math.max(2, basisH * CUSTOM_CANVAS_ABSOLUTE_DUAL_COLUMN_MAX_Y_DELTA_RATIO);
+  }
+
+  /**
+   * Classifies a nested child as a metric/chart/table family for row regularization.
+   * @param block - Nested child card preview.
+   * @returns Stable family, or undefined when absolute positioning should be kept.
+   */
+  function nestedBlockComparableDataFamily(block: CustomCanvasNestedBlock): 'metric' | 'table' | 'chart' | undefined {
+    const data = isRecord(block.data) ? block.data : {};
+    const meta = isRecord(block.meta) ? block.meta : {};
+    const text = [
+      block.title,
+      block.kind,
+      block.visualKind,
+      block.capabilityId,
+      block.dataShape,
+      nestedBlockRendererKey(block),
+      textValue(meta.visualKind),
+      textValue(data.visualKind),
+      textValue(data.shape),
+      textValue(data.kind),
+    ].filter(Boolean).join(' ');
+    if (/table|list|rows|ranking|dataTable|categoryRanking/i.test(text)) return 'table';
+    if (/chart|singleSeries|multiSeries|bar|line|area|pie|donut/i.test(text)) return 'chart';
+    if (/metric|metricSummary|numeric/i.test(text)) return 'metric';
+    return undefined;
+  }
+  
+  /**
+   * Builds the container classes for nested customCanvas previews.
+   * @param block - Rendered customCanvas container.
+   * @param data - Custom canvas renderer data.
+   * @returns Stable layout classes for absolute or grid fallback previews.
+   */
+  function customCanvasNestedBlockContainerClasses(block: WorkbenchBlock, data: CustomCanvasData): string[] {
+    if (customCanvasUsesReferenceCompositePreview(block, data)) {
+      return ['relative flex h-full min-h-0 w-full flex-1 flex-col overflow-hidden'];
+    }
+    if (customCanvasUsesAbsoluteNestedBlocks(block, data)) {
+      return ['relative', 'min-h-[72px]', 'flex-1', 'overflow-hidden'];
+    }
+    if (customCanvasUsesStackNestedBlocks(data)) {
+      return [
+        'grid h-full min-h-0 w-full flex-1 auto-rows-fr overflow-hidden',
+        imageComposeCompactCard(block) ? 'gap-1.5' : 'gap-2',
+      ];
+    }
+    if (customCanvasUsesNaturalNestedGrid(data)) {
+      if (customCanvasShouldFillNaturalNestedGrid(block, data)) {
+        return [
+          'grid h-full min-h-0 w-full flex-1 auto-rows-fr overflow-hidden sm:grid-cols-2',
+          imageComposeCompactCard(block) ? 'gap-1.5' : 'gap-2',
+        ];
+      }
+      return [
+        'grid min-h-0 w-full content-start auto-rows-auto overflow-hidden sm:grid-cols-2',
+        imageComposeCompactCard(block) ? 'gap-1.5' : 'gap-2',
+      ];
+    }
+    return [
+      'grid h-full min-h-0 w-full flex-1 auto-rows-fr overflow-hidden sm:grid-cols-2',
+      imageComposeCompactCard(block) ? 'gap-1.5' : 'gap-2',
+    ];
+  }
+
+  /**
+   * Checks whether sparse image nested previews should keep natural height.
+   * @param data - Custom canvas renderer data.
+   * @returns True when stretching sparse child cards would create large blank interiors.
+   */
+  function customCanvasUsesNaturalNestedGrid(data: CustomCanvasData): boolean {
+    const nestedBlocks = customCanvasVisibleNestedBlocks(data);
+    if (nestedBlocks.length === 0 || nestedBlocks.length > CUSTOM_CANVAS_NATURAL_GRID_MAX_CHILDREN) return false;
+    return nestedBlocks.every(nestedBlockCompactPreview);
+  }
+
+  /**
+   * Checks whether a natural nested grid is inside a tall parent and should fill its body.
+   * @param block - Rendered customCanvas container.
+   * @param data - Custom canvas renderer data.
+   * @returns True when content-sized nested rows would leave a large blank lower half.
+   */
+  function customCanvasShouldFillNaturalNestedGrid(block: WorkbenchBlock, data: CustomCanvasData): boolean {
+    const nestedBlocks = customCanvasVisibleNestedBlocks(data);
+    if (nestedBlocks.length < 2 || nestedBlocks.length > CUSTOM_CANVAS_NATURAL_GRID_FILL_MAX_CHILDREN) return false;
+    if (!nestedBlocks.every(nestedBlockCompactPreview)) return false;
+    return numberValue(block.layout?.h, 0) >= CUSTOM_CANVAS_NATURAL_GRID_FILL_MIN_PARENT_ROWS;
+  }
+
+  /**
+   * Builds grid placement overrides for natural nested card grids.
+   * @param block - Nested child card rendered inside the custom canvas.
+   * @param data - Custom canvas renderer data.
+   * @param absolute - Whether the parent is using screenshot-coordinate layout.
+   * @returns CSS properties that keep sparse tail rows from leaving a blank half row.
+   */
+  function nestedBlockGridPlacementStyle(block: CustomCanvasNestedBlock, data: CustomCanvasData, absolute: boolean): CSSProperties {
+    if (absolute || customCanvasUsesStackNestedBlocks(data) || !customCanvasUsesNaturalNestedGrid(data)) return {};
+    const nestedBlocks = customCanvasVisibleNestedBlocks(data);
+    const index = nestedBlocks.findIndex((nestedBlock) => nestedBlock === block || (Boolean(nestedBlock.id) && nestedBlock.id === block.id));
+    const tailCount = nestedBlocks.length % 2;
+    const sparseTailShouldFill = nestedBlocks.length <= 3;
+    if (tailCount === 1 && sparseTailShouldFill && index === nestedBlocks.length - 1) {
+      const gridColumn = '1 / -1';
+      return { gridColumn };
+    }
+    return {};
+  }
+  
+  /**
+   * Checks whether nested previews should render as inferred vertical stacks.
+   * @param data - Custom canvas renderer data.
+   * @returns True when adapter supplied stack groups.
+   */
+  function customCanvasUsesStackNestedBlocks(data: CustomCanvasData): boolean {
+    return data.nestedLayoutMode === 'stack' && customCanvasNestedLayoutStacks(data).length > 0;
+  }
+  
+  /**
+   * Returns normalized nested-preview stack definitions.
+   * @param data - Custom canvas renderer data.
+   * @returns Valid stack groups with at least one child id.
+   */
+  function customCanvasNestedLayoutStacks(data: CustomCanvasData): Array<{ id: string; childIds: string[] }> {
+    if (!Array.isArray(data.nestedLayoutStacks)) return [];
+    return data.nestedLayoutStacks
+      .map((stack, index) => ({
+        id: textValue(stack.id, `stack-${index + 1}`),
+        childIds: Array.isArray(stack.childIds)
+          ? stack.childIds.filter((childId): childId is string => typeof childId === 'string' && childId.trim().length > 0)
+          : [],
+      }))
+      .filter((stack) => stack.childIds.length > 0);
+  }
+  
+  /**
+   * Returns nested preview groups in the order they should render.
+   * @param data - Custom canvas renderer data.
+   * @returns Stack groups, or a single flat group when no stack layout is available.
+   */
+  function customCanvasNestedBlockGroups(data: CustomCanvasData): Array<{ id: string; blocks: CustomCanvasNestedBlock[] }> {
+    const nestedBlocks = customCanvasVisibleNestedBlocks(data);
+    if (!customCanvasUsesStackNestedBlocks(data)) {
+      return [{ id: 'grid', blocks: nestedBlocks }];
+    }
+    const blockById = new Map(nestedBlocks.map((nestedBlock) => [nestedBlock.id, nestedBlock]));
+    const usedIds = new Set<string>();
+    const groups = customCanvasNestedLayoutStacks(data).map((stack) => {
+      const blocks = stack.childIds
+        .map((childId) => blockById.get(childId))
+        .filter((nestedBlock): nestedBlock is CustomCanvasNestedBlock => Boolean(nestedBlock));
+      blocks.forEach((nestedBlock) => usedIds.add(nestedBlock.id));
+      return { id: stack.id, blocks };
+    }).filter((group) => group.blocks.length > 0);
+    const remaining = nestedBlocks.filter((nestedBlock) => !usedIds.has(nestedBlock.id));
+    return remaining.length > 0 ? [...groups, { id: 'stack-extra', blocks: remaining }] : groups;
+  }
+  
+  /**
+   * Checks whether the inferred nested stacks need to share a compact fixed-height parent.
+   * @param data - Custom canvas renderer data.
+   * @returns True when one column has many short cards and normal min heights would overflow.
+   */
+  function customCanvasDenseNestedStack(data: CustomCanvasData): boolean {
+    if (!customCanvasUsesStackNestedBlocks(data)) return false;
+    const groups = customCanvasNestedBlockGroups(data);
+    const nestedCount = customCanvasVisibleNestedBlocks(data).length;
+    return nestedCount >= 7 || groups.some((group) => group.blocks.length >= 5);
+  }
+  
+  const {
+    nestedBlockMetricValue,
+    nestedBlockClassifierText,
+    nestedBlockDeclaredVisualKind,
+    nestedBlockVisualKind,
+    nestedBlockItemRecords,
+    nestedBlockItemEmpty,
+    nestedBlockItemLooksWeak,
+    nestedBlockItemsLookTooWeak,
+    nestedBlockItemsLookTooWeakForVisualKind,
+    nestedBlockRawItems,
+    nestedBlockElementItems,
+    nestedBlockToneFromStatus,
+    nestedBlockToneFromProgress,
+    nestedBlockFallbackDomain,
+    nestedBlockFallbackClassifierText,
+    nestedBlockFallbackItems,
+    nestedBlockItems,
+    nestedBlockBarItems,
+    nestedBlockTileItems,
+    nestedBlockDisplayValue,
+    nestedBlockItemLabel,
+    nestedBlockItemValue,
+    nestedBlockItemDetail,
+    nestedBlockItemTitle,
+    nestedBlockItemSeverity,
+    nestedBlockItemTime,
+    nestedBlockNumber,
+    nestedBlockPercent,
+    nestedBlockItemProgress,
+    nestedBlockOptionalNumber,
+    referenceOpsTrendCount,
+    referenceOpsTrendBarHeight,
+    referenceOpsTrendChartItems,
+    nestedBlockTone,
+    nestedBlockToneClass,
+    customCanvasRiskSummaryBand,
+    customCanvasEffectiveVisual,
+    nestedBlockStatusSummary,
+    nestedBlockStatusSummaryLabel,
+    nestedBlockPillClasses,
+    nestedBlockDotClasses,
+    nestedBlockBarClasses,
+    referenceOpsTrendBarClasses,
+    nestedBlockBarStyle,
+    nestedBlockProgressStage,
+    nestedBlockSecurityScore,
+    nestedBlockSecurityScoreRingLabel,
+    nestedBlockSecurityMetrics,
+    nestedBlockDonutItems,
+    nestedBlockDonutStyle,
+    nestedBlockQuickIconLabel,
+    nestedBlockQuickLinksGridStyle,
+    nestedBlockRows,
+    nestedBlockColumns,
+    nestedBlockRankingItems,
+    nestedBlockCell,
+    nestedBlockPreviewKind,
+    nestedBlockCompactPreview,
+    nestedBlockGridMinHeightClass,
+    nestedBlockStatusLabel,
+    nestedBlockEmptyImageContainer,
+    nestedBlockFailureReason,
+    nestedBlockBusinessGapReason,
+    nestedBlockQueryIntent,
+  } = createNestedBlockBindings({
+    textValue,
+    numberValue,
+    isRecord,
+    formatMetricValue,
+    businessGapDiagnosticSummary,
+    dataBindingHumanInterventionFromRecord,
+    recordHasImageComposeSource,
+    customCanvasGeneratedElement,
+    nestedBlockRendererKey,
+    nestedBlockComposeSource,
+    nestedBlockSummaryEntry,
+    visualForScene,
+    referenceCompositeLooksLikeChairmanRiskDirectContext: () => referenceCompositeLooksLikeChairmanRiskDirectContext,
+    referenceCompositeLooksLikeChairmanRiskContext: () => referenceCompositeLooksLikeChairmanRiskContext,
+    referenceOpsTrendItems: () => referenceOpsTrendItems,
+  });
+  
+
+  const {
+    customCanvasUsesReferenceCompositePreview,
+    customCanvasReferenceCompositeKind,
+    referenceCompositeSearchText,
+    referenceCompositeKindAllowedForBlock,
+    referenceCompositeKindRequiresItContext,
+    referenceCompositeKindRequiresChairmanRiskContext,
+    referenceCompositeKindRequiresHrContext,
+    referenceCompositeLooksLikeItContext,
+    referenceCompositeTextHasItContext,
+    referenceCompositeLooksLikeChairmanRiskContext,
+    referenceCompositeLooksLikeChairmanRiskDirectContext,
+    referenceCompositeTextHasChairmanRiskContext,
+    referenceCompositeLooksLikeHrContext,
+    customCanvasTextHasBusinessMetricMatrixContext,
+    customCanvasTextLooksLikeHrOrOrgRiskContext,
+    referenceCompositeHeaderChip,
+    customCanvasLooksLikeBusinessMetricMatrix,
+    customCanvasLooksLikePageHeader,
+    customCanvasPageHeaderBlock,
+    customCanvasEmptyPageHeaderPlaceholder,
+    customCanvasEmptyImagePlaceholder,
+    customCanvasAlertLeafContainer,
+    customCanvasAlertLeafItems,
+    customCanvasAlertLeafFilledItems,
+    customCanvasAlertLeafFallbackItems,
+    customCanvasHeaderTitle,
+    customCanvasHeaderSubtitle,
+    customCanvasHeaderLogo,
+    customCanvasHeaderLogoStyle,
+    customCanvasPageHeaderDark,
+    customCanvasPageHeaderStyle,
+    customCanvasPageHeaderTextClass,
+    customCanvasTextElementValue,
+    customCanvasHeaderRepeatingElement,
+    customCanvasHeaderPills,
+    customCanvasHeaderPillsWithFallback,
+    referenceCompositeKindFromContainerTitle,
+    referenceCompositeDiagnosticStyle,
+    referenceCompositeDiagnosticIndex,
+    referenceProjectDiagnosticIndex,
+    referenceNestedBlock,
+    referenceMetricItem,
+    referenceNestedMetricItem,
+    referenceRiskMetricValue,
+    referenceRiskKpiValue,
+    referenceRiskKpiItems,
+    referenceRiskMovementItems,
+    referenceRiskMovementElementItems,
+    referenceOpsServiceItems,
+    referenceOpsResourceItems,
+    referenceOpsIncidentItems,
+    referenceOpsItemsFromBlock,
+    referenceOpsTrendItems,
+    referenceSecurityScoreBlock,
+    referenceSecurityRiskItems,
+    referenceSecurityAuditItems,
+    referenceSecurityAccountItems,
+    referenceSecurityComplianceItems,
+    referenceAssetLedgerItems,
+    referenceAssetExceptionItems,
+    referenceCostItems,
+    referenceCostDonutItems,
+    referenceCostDonutStyle,
+    referenceProjectProgressItems,
+    referenceTodoItems,
+    referenceEfficiencyItems,
+    referenceUsableQuickLinkItems,
+    referenceQuickLinkItems,
+    referenceBusinessMetricItems,
+    referenceBusinessChartItems,
+    referenceBusinessListItems,
+    referenceBidHero,
+    referenceBidQuickActions,
+    referenceBidKpiItems,
+    referenceBidInfoItems,
+    referenceBidTableBlocks,
+    referenceBidRiskRows,
+    referenceBidConclusionItems,
+    referenceBidDataBoundaryItems,
+    referenceBidSanitizedMetricValue,
+    referenceUsableNoticeItems,
+    referenceNoticeItems,
+    referenceHealthRadarAxisItems,
+    referenceHealthRadarRiskItems,
+    referenceHealthRadarPoints,
+    referenceDeviationBars,
+    referenceDeviationRiskItems,
+    referenceFinanceRiskMetricItems,
+    referenceFinanceWarningItems,
+    referenceFinanceRiskBottomItems,
+    referenceFinanceRiskMetricDisplayValue,
+    referenceHrOrganizationMetrics,
+    referenceHrOrganizationRows,
+    referenceHrRiskRows,
+    referenceHrPeopleCostItems,
+    referenceHrCostTrendItems,
+    referenceHrTalentMetrics,
+    referenceHrTalentTodoRows,
+    referenceExpenseRiskRows,
+    referenceExpenseSummaryItems,
+    referenceDeviationInsightItems,
+    referenceOrganizationRiskMetrics,
+    referenceOrganizationDonutStyle,
+    referenceInvestmentRiskRows,
+    referenceInvestmentSummaryItems,
+    referenceExecutiveTodoItems,
+    referenceExecutiveTodoNormalizeRow,
+    referenceExecutiveTodoPadRows,
+    referenceExecutiveTodoBlockLooksUsable,
+    referenceExecutiveTodoBadge,
+    referenceExecutiveTodoBadgeClasses,
+    referenceExecutiveTodoImpact,
+    referenceExecutiveTodoDeadline,
+    referenceExecutiveTodoProgress,
+    referenceShortcutDrillItems,
+    referenceQuickWorkbenchGroups,
+    referenceQuickWorkbenchGroupItems,
+    referenceCustomCanvasElementRows,
+    referenceQuickWorkbenchUrgentBadge,
+    referenceStrategyKpiMetrics,
+    referenceOperationEfficiencyGroups,
+    referenceOperationEfficiencyPanelStyle,
+    referenceOperationHealthProgressItems,
+    referenceOperationHealthTrendItems,
+    referenceOperationHealthStructureBlock,
+    referenceOperationHealthStructureItems,
+    referenceOperationEfficiencyGroupItems,
+    referenceStrategyKpiMetricItem,
+    referenceStrategyKpiTrendPath,
+    referenceStrategyKpiRiskItems,
+    referenceStrategyKpiRiskSummaryLabel,
+    referenceStrategyKpiRiskItemsGridStyle,
+  } = createReferenceCompositeBindings({
+    textValue,
+    numberValue,
+    isRecord,
+    imageComposeCompactCard,
+    customCanvasRiskSummaryBand,
+    nestedBlockClassifierText,
+    nestedBlockDataSummary,
+    nestedBlockRawItems,
+    nestedBlockItemTitle,
+    nestedBlockVisualKind,
+    nestedBlockPreviewKind,
+    customCanvasVisibleNarrative,
+    customCanvasHasNestedBlocks,
+    customCanvasVisibleElements,
+    imageComposeAlertRankingTitle,
+    visualFor,
+    recordHasImageComposeSource,
+    customCanvasGeneratedElement,
+    nestedBlockMetricValue,
+    nestedBlockItemValue,
+    nestedBlockItemDetail,
+    nestedBlockItemLabel,
+    nestedBlockToneFromStatus,
+    nestedBlockNeedsHumanIntervention,
+    nestedBlockItems,
+    nestedBlockItemsLookTooWeak,
+    nestedBlockItemsLookTooWeakForVisualKind,
+    nestedBlockFallbackItems,
+    nestedBlockElementItems,
+    nestedBlockSecurityMetrics,
+    nestedBlockBarItems,
+    nestedBlockOptionalNumber,
+    nestedBlockNumber,
+    nestedBlockDisplayValue,
+    nestedBlockDonutItems,
+    nestedBlockDonutStyle,
+  });
+  
+  /**
+   * Builds CSS columns for inferred nested stack groups.
+   * @param data - Custom canvas renderer data.
+   * @returns CSS properties for the nested group container.
+   */
+  const {
+    customCanvasNestedStackContainerStyle,
+    customCanvasNestedStackColumnWeights,
+    customCanvasReadableNestedStackColumnWeights,
+    nestedBlockCanvasStyle,
+    nestedBlockStackGridStyle,
+    customCanvasNestedLayoutItem,
+    customCanvasRegularNestedStackGrid,
+    nestedBlockStackTailPlacementStyle,
+    nestedBlockHasLayout,
+    customCanvasAbsoluteNestedBox,
+    customCanvasAbsoluteNestedOverlapArea,
+    layoutPercent,
+    nestedBlockUsesGlobalCoordinates,
+    nestedBlockLocalCoordinate,
+    nestedBlockAbsoluteStyle,
+    nestedBlockAccentStyle,
+    customCanvasPercent,
+    customCanvasSafeElementStyle,
+    customCanvasElementStyle,
+    customCanvasElementClasses,
+    customCanvasStyle,
+    customCanvasShellClasses,
+    nestedBlockShellClasses,
+  } = createCanvasLayoutBindings({
+    props,
+    isRecord,
+    numberValue,
+    visualFor,
+    visualForScene,
+    nestedBlockStyle,
+    nestedBlockGridMinHeightClass,
+    customCanvasEffectiveVisual: () => customCanvasEffectiveVisual,
+    customCanvasUsesStackNestedBlocks,
+    customCanvasNestedBlockGroups,
+    customCanvasDenseNestedStack,
+    customCanvasNestedLayoutStacks,
+    customCanvasUsesAbsoluteNestedBlocks,
+    customCanvasShowsStructureLabels: () => customCanvasShowsStructureLabels,
+    customCanvasHeaderBannerBlock: () => customCanvasHeaderBannerBlock,
+    customCanvasPageHeaderBlock,
+    customCanvasEmptyPageHeaderPlaceholder,
+    recordHasImageComposeSource: () => recordHasImageComposeSource,
+  });
+
+
+  function manualReplacementContainerStyle(block: WorkbenchBlock): CSSProperties {
+    const visual = visualFor(block);
+    return workbenchCardShellStyle(visual);
+  }
+  
+  /**
+   * Builds density-aware classes for manual replacement placeholders.
+   * @param block - Placeholder block projected from image compose.
+   * @returns Tailwind class list for the scrollable placeholder shell.
+   */
+  function manualReplacementShellClasses(block: WorkbenchBlock): string[] {
+    const densityValue = visualFor(block).density || props.density;
+    return [
+      'flex h-full max-h-full overflow-hidden min-h-0 w-full flex-col rounded-lg border border-dashed border-amber-200 bg-amber-50 text-amber-900',
+      workbenchShellDensityClasses(densityValue, { compact: 'gap-1 px-3 py-2', standard: 'gap-1.5 px-3 py-2' }),
+    ];
+  }
+
+  /**
+   * Checks whether a placeholder should use the compact image-preview replacement surface.
+   * @param block - Placeholder block projected from image compose.
+   * @returns True for image-generated manual replacement cards.
+   */
+  function manualReplacementCompactView(block: WorkbenchBlock): boolean {
+    if (!manualReplacementView(block)) return false;
+    const data = isRecord(block.data) ? block.data : {};
+    return recordHasImageComposeSource(block.meta)
+      || recordHasImageComposeSource(block.source)
+      || recordHasImageComposeSource(data)
+      || isRecord(data.v2Diagnostics)
+      || (typeof block.source?.resourceKey === 'string' && block.source.resourceKey.startsWith('workbench.v2.image.'));
+  }
+  
+  /**
+   * Returns the display label for the selected manual replacement capability.
+   * @param block - Placeholder block projected from image compose.
+   * @returns Selected card title or capability id for accessibility/tooltips.
+   */
+  function manualReplacementCapabilityDraftLabel(block: WorkbenchBlock): string {
+    const capabilityId = manualReplacementCapabilityDraft(block);
+    const option = manualReplacementCapabilityOptionsForBlock(block).find((item) => item.capabilityId === capabilityId);
+    return option?.title || capabilityId;
+  }
+  
+  /**
+   * Builds the replacement action label from the selected capability.
+   * @param block - Placeholder block projected from image compose.
+   * @returns Button label shown to the user and assistive technology.
+   */
+  function manualReplacementActionLabel(block: WorkbenchBlock): string {
+    const selectedLabel = manualReplacementCapabilityDraftLabel(block);
+    return selectedLabel ? `替换为 ${selectedLabel}` : '替换为建议卡片';
+  }
+
+  /**
+   * Returns the short visible action label for compact manual replacement cards.
+   * @param block - Placeholder block projected from image compose.
+   * @returns Short button text that does not overflow dense screenshot cards.
+   */
+  function manualReplacementPrimaryActionLabel(block: WorkbenchBlock): string {
+    return manualReplacementCapabilityDraft(block) ? '替换' : '替换卡片';
+  }
+  
+  function dataBindingRecord(block: WorkbenchBlock): Record<string, unknown> {
+    const data = isRecord(block.data) ? block.data : {};
+    return isRecord(data.dataBinding) ? data.dataBinding : {};
+  }
+  
+  function dataBindingFailureReason(block: WorkbenchBlock): string {
+    const data = isRecord(block.data) ? block.data : {};
+    const binding = dataBindingRecord(block);
+    const intervention = dataBindingHumanInterventionFromRecord(data.dataBindingHumanIntervention)
+      ?? dataBindingHumanInterventionFromRecord(binding.humanIntervention);
+    if (intervention) {
+      return businessGapDiagnosticSummary({
+        message: intervention.message,
+        fallback: '需要补充业务口径后再问数',
+        diagnostics: binding.diagnostics,
+      });
+    }
+    return textValue(data.dataBindingError)
+      || textValue(data.reason)
+      || textValue(binding.lastError)
+      || textValue(binding.error)
+      || '问数失败';
+  }
+  
+  function dataBindingFailureQueryIntent(block: WorkbenchBlock): string {
+    const data = isRecord(block.data) ? block.data : {};
+    const binding = dataBindingRecord(block);
+    return textValue(binding.queryIntent, textValue(data.queryIntent, block.title));
+  }
+  
+  /**
+   * Reads a human-intervention marker that requires business input.
+   * @param value - Raw marker stored on projected data binding metadata.
+   * @returns Marker record when it asks for manual/business intervention.
+   */
+  function dataBindingHumanInterventionFromRecord(value: unknown): Record<string, unknown> | undefined {
+    return isRecord(value) && value.required === true ? value : undefined;
+  }
+  
+  /**
+   * Checks whether a top-level block data-binding failure needs business wording.
+   * @param block - Rendered workbench block.
+   * @returns True when the backend marked the failure as actionable human input.
+   */
+  function dataBindingNeedsHumanIntervention(block: WorkbenchBlock): boolean {
+    const data = isRecord(block.data) ? block.data : {};
+    const binding = dataBindingRecord(block);
+    return Boolean(
+      dataBindingHumanInterventionFromRecord(data.dataBindingHumanIntervention)
+      ?? dataBindingHumanInterventionFromRecord(binding.humanIntervention),
+    );
+  }
+  
+  /**
+   * Checks whether a nested child card failure needs business wording.
+   * @param block - Nested child card preview.
+   * @returns True when the backend marked the child as actionable human input.
+   */
+  function nestedBlockNeedsHumanIntervention(block: CustomCanvasNestedBlock): boolean {
+    const status = textValue(block.dataBindingStatus, block.state?.status);
+    if (status !== 'error' && status !== 'failed') return false;
+    return Boolean(
+      dataBindingHumanInterventionFromRecord(block.humanIntervention)
+      ?? dataBindingHumanInterventionFromRecord(block.dataBinding?.humanIntervention),
+    );
+  }
+
+  /**
+   * Reads the nested child card carried by a reference-composite display item.
+   * @param item - Display item produced for a high-fidelity reference template.
+   * @returns Source nested child card when the item is backed by one.
+   */
+  function referenceItemNestedBlock(item: Record<string, unknown>): CustomCanvasNestedBlock | undefined {
+    const candidate = item.nestedBlock;
+    return isRecord(candidate) && typeof candidate.id === 'string'
+      ? candidate as unknown as CustomCanvasNestedBlock
+      : undefined;
+  }
+
+  /**
+   * Builds the shared nested-card action attributes for a reference-composite item.
+   * @param item - Display item produced for a high-fidelity reference template.
+   * @returns Attributes consumed by visual child-card shells.
+   */
+  function referenceItemNestedCardAttrs(item: Record<string, unknown>): Record<string, unknown> {
+    const nestedBlock = referenceItemNestedBlock(item);
+    if (!nestedBlock) return {};
+    return {
+      'data-testid': 'workbench-nested-card-preview',
+      'data-parent-block-id': effectiveBlock.value.id,
+      'data-nested-block-id': nestedBlock.id,
+      'data-nested-card-id': nestedBlock.id,
+      'data-nested-card-title': nestedBlock.title,
+      'data-nested-card-kind': nestedBlock.kind,
+      'data-capability-id': nestedBlock.capabilityId,
+      'data-compose-source': nestedBlockComposeSource(nestedBlock),
+      'data-binding-id': nestedDataBindingId(nestedBlock),
+      'data-binding-status': nestedBlock.dataBindingStatus,
+      'data-renderer-key': nestedBlockRendererKey(nestedBlock),
+      'data-data-shape': nestedBlock.dataShape,
+      'data-visual-kind': nestedBlockVisualKind(nestedBlock),
+      ...(nestedBlockNeedsHumanIntervention(nestedBlock)
+        ? {
+            'data-business-gap': 'true',
+            'data-business-gap-reason': nestedBlockBusinessGapReason(nestedBlock),
+            'data-business-gap-diagnostics': nestedBlockFailureReason(nestedBlock),
+          }
+        : {}),
+    };
+  }
+
+  /**
+   * Returns the visible role label for a reference-composite visual subcard.
+   * @param item - Display item produced for a high-fidelity reference template.
+   * @returns Child-card role label or empty string when the item is fallback-only.
+   */
+  function referenceItemNestedRoleLabel(item: Record<string, unknown>): string {
+    const nestedBlock = referenceItemNestedBlock(item);
+    if (!nestedBlock) return '';
+    return nestedBlockNeedsHumanIntervention(nestedBlock) ? '子卡 · 补口径' : '子卡';
+  }
+
+  /**
+   * Focuses the source child card of a reference-composite visual item.
+   * @param item - Display item produced for a high-fidelity reference template.
+   * @returns void
+   */
+  function focusReferenceNestedItem(item: Record<string, unknown>): void {
+    const nestedBlock = referenceItemNestedBlock(item);
+    if (nestedBlock) focusNestedBlock(nestedBlock);
+  }
+  
+  /**
+   * Checks whether a source marker points to an image-compose card.
+   * @param value - Raw source marker.
+   * @returns True when the marker is the image compose source.
+   */
+  function isImageComposeSourceValue(value: unknown): boolean {
+    return typeof value === 'string' && value.trim().toLowerCase() === 'image';
+  }
+  
+  /**
+   * Recursively checks records for image-compose source metadata.
+   * @param value - Raw metadata record.
+   * @returns True when known V2 image source fields are present.
+   */
+  function recordHasImageComposeSource(value: unknown): boolean {
+    if (!isRecord(value)) return false;
+    return isImageComposeSourceValue(value.source)
+      || isImageComposeSourceValue(value.sourceType)
+      || isImageComposeSourceValue(value.composeSource)
+      || isImageComposeSourceValue(value.cardDataSource)
+      || isImageComposeSourceValue(value.snapshotSource)
+      || recordHasImageComposeSource(value.params)
+      || recordHasImageComposeSource(value.recognition)
+      || recordHasImageComposeSource(value.v2);
+  }
+  
+  /**
+   * Checks whether a failed business-input card still has screenshot renderer data.
+   * @param block - Rendered workbench block.
+   * @returns True when image compose data can render the card body.
+   */
+  function dataBindingHasRenderableSnapshot(block: WorkbenchBlock): boolean {
+    const normalizedData = normalizedEffectiveData(block);
+    const data = isRecord(normalizedData) ? normalizedData : {};
+    const hasImageSource = recordHasImageComposeSource(block.meta)
+      || recordHasImageComposeSource(block.source)
+      || recordHasImageComposeSource(data)
+      || recordHasImageComposeSource(dataBindingRecord(block))
+      || (typeof block.source?.resourceKey === 'string' && block.source.resourceKey.startsWith('workbench.v2.image.'));
+    if (!hasImageSource) return false;
+    return Boolean(isRecord(data) && textValue(data.shape));
+  }
+
+  /**
+   * Checks whether a nested image preview has renderer data that should survive query status changes.
+   * @param block - Nested child card preview.
+   * @returns True when the nested preview can keep its screenshot-style body.
+   */
+  function nestedBlockDataSnapshotRenderable(block: CustomCanvasNestedBlock): boolean {
+    const data = isRecord(block.data) ? block.data : {};
+    const hasImageSource = recordHasImageComposeSource(block)
+      || recordHasImageComposeSource(block.meta)
+      || recordHasImageComposeSource(data)
+      || recordHasImageComposeSource(block.dataBinding);
+    if (!hasImageSource) return false;
+    return Boolean(textValue(data.shape) || textValue(block.dataShape) || textValue(block.visualKind));
+  }
+  
+  /**
+   * Checks whether a card came from image compose and should favor screenshot fidelity over verbose chrome.
+   * @param block - Rendered workbench block.
+   * @returns True for image-composed cards and recovered V2 image cards.
+   */
+  function imageComposeCompactCard(block: WorkbenchBlock): boolean {
+    const data = isRecord(block.data) ? block.data : {};
+    return recordHasImageComposeSource(block.meta)
+      || recordHasImageComposeSource(block.source)
+      || recordHasImageComposeSource(data)
+      || recordHasImageComposeSource(dataBindingRecord(block))
+      || (typeof block.source?.resourceKey === 'string' && block.source.resourceKey.startsWith('workbench.v2.image.'));
+  }
+  
+  /**
+   * Builds the compact business-gap label used inside screenshot reconstruction cards.
+   * @param block - Rendered workbench block.
+   * @returns Short visible status label while full diagnostics stay in data attributes and tooltips.
+   */
+  function imageComposeBusinessGapBadgeLabel(block: WorkbenchBlock): string {
+    if (dataBindingNeedsHumanIntervention(block)) return '需补口径';
+    const data = isRecord(block.data) ? block.data : {};
+    const status = textValue(data.dataBindingStatus, textValue(dataBindingRecord(block).status));
+    return status === 'error' ? '问数失败' : status;
+  }
+  
+  /**
+   * Checks whether visible customCanvas structure labels should be rendered.
+   * @param block - Rendered workbench block.
+   * @returns False for image-compose containers where slot labels are internal projection metadata.
+   */
+  function customCanvasShowsStructureLabels(block: WorkbenchBlock): boolean {
+    const data = isRecord(block.data) ? block.data : {};
+    const hasImageSource = recordHasImageComposeSource(block.meta)
+      || recordHasImageComposeSource(block.source)
+      || recordHasImageComposeSource(data)
+      || (typeof block.source?.resourceKey === 'string' && block.source.resourceKey.startsWith('workbench.v2.image.'));
+    return !hasImageSource;
+  }
+  
+  /**
+   * Checks whether an image customCanvas block represents the screenshot header/banner.
+   * @param block - Rendered customCanvas block.
+   * @returns True when inner borders and debug chrome should stay hidden.
+   */
+  function customCanvasHeaderBannerBlock(block: WorkbenchBlock): boolean {
+    const visual = isRecord(block.meta?.visual) ? block.meta.visual : {};
+    const v2 = isRecord(block.meta?.v2) ? block.meta.v2 : {};
+    const appearance = isRecord(v2.appearance) ? v2.appearance : {};
+    const themeId = textValue(visual.themeId, textValue(appearance.themeId));
+    return recordHasImageComposeSource(block.meta)
+      && (themeId === 'image-header-banner' || themeId === 'dark_header' || /顶部导航|导航栏|页头|页眉|header|banner/i.test(block.title || ''));
+  }
+  
+  /**
+   * Checks whether a customCanvas element is a generated V2 structure summary.
+   * @param element - Custom canvas element projected from V2 image compose.
+   * @returns True for slot/child summaries that should stay out of visible image reconstruction.
+   */
+  function customCanvasGeneratedElement(element: unknown): boolean {
+    if (!isRecord(element)) return false;
+    const id = textValue(element.id);
+    return /-(slot|child)-/.test(id);
+  }
+
+  /**
+   * Returns source shortcut elements for quick-link item extraction without painting them twice.
+   * @param data - Custom canvas renderer data.
+   * @returns OCR/model elements that can become shortcut items.
+   */
+  function customCanvasQuickLinkSourceElements(data: CustomCanvasData): CustomCanvasData['elements'] {
+    const elements = Array.isArray(data.elements) ? data.elements : [];
+    return elements.filter((element) => !customCanvasGeneratedElement(element));
+  }
+  
+  /**
+   * Returns customCanvas elements that should stay visible in screenshot reconstruction.
+   * @param block - Rendered customCanvas block.
+   * @param data - Custom canvas renderer data.
+   * @returns Elements recognized from the screenshot, excluding generated slot/child diagnostics.
+   */
+  function customCanvasVisibleElements(block: WorkbenchBlock, data: CustomCanvasData): CustomCanvasData['elements'] {
+    const elements = Array.isArray(data.elements) ? data.elements : [];
+    if (customCanvasPageHeaderBlock(block, data)) return [];
+    if (customCanvasStandaloneQuickLinks(block, data)) return [];
+    if (customCanvasShowsStructureLabels(block)) return elements;
+    if (customCanvasHasNestedBlocks(data)) return [];
+    return customCanvasQuickLinkSourceElements(data);
+  }
+  
+  /**
+   * Checks whether a customCanvas container already renders child cards as its primary body.
+   * @param data - Custom canvas renderer data.
+   * @returns True when nested child previews exist.
+   */
+  function customCanvasHasNestedBlocks(data: CustomCanvasData): boolean {
+    return Array.isArray(data.nestedBlocks) && data.nestedBlocks.length > 0;
+  }
+  
+  /**
+   * Checks whether a customCanvas element carries absolute layout metadata.
+   * @param element - Model-recognized customCanvas element.
+   * @returns True when the element has at least one finite position or size field.
+   */
+  function customCanvasElementHasPosition(element: CustomCanvasData['elements'][number]): boolean {
+    return [element.x, element.y, element.w, element.h].some((value) => typeof value === 'number' && Number.isFinite(value));
+  }
+  
+  /**
+   * Checks whether image customCanvas text should be rendered by relative coordinates.
+   * @param block - Rendered customCanvas block.
+   * @param data - Custom canvas renderer data.
+   * @returns True when visible elements include model-provided position metadata.
+   */
+  function customCanvasUsesAbsoluteElements(block: WorkbenchBlock, data: CustomCanvasData): boolean {
+    if (customCanvasShowsStructureLabels(block)) return false;
+    return customCanvasVisibleElements(block, data).some(customCanvasElementHasPosition);
+  }
+  
+  /**
+   * Checks whether visible customCanvas OCR/filter elements should be painted as an overlay.
+   * @param block - Rendered customCanvas block.
+   * @param data - Custom canvas renderer data.
+   * @returns True when visible elements should not reserve additional flex height.
+   */
+  function customCanvasOverlaysVisibleElements(block: WorkbenchBlock, data: CustomCanvasData): boolean {
+    return !customCanvasPageHeaderBlock(block, data) && !customCanvasHasNestedBlocks(data) && customCanvasUsesAbsoluteElements(block, data);
+  }
+  
+  /**
+   * Checks whether a customCanvas narrative was generated from V2 child relationships.
+   * @param narrative - Candidate narrative text.
+   * @returns True when the narrative is an internal child-count summary.
+   */
+  function customCanvasGeneratedNarrative(narrative: unknown): boolean {
+    return typeof narrative === 'string' && /\b\d+\s+recognized child(?:ren)? cards? grouped by V2 slots\.?/i.test(narrative.trim());
+  }
+  
+  /**
+   * Returns narrative text that should be visible for image customCanvas cards.
+   * @param block - Rendered customCanvas block.
+   * @param data - Custom canvas renderer data.
+   * @returns Explicit screenshot narrative, or an empty string for generated structure summaries.
+   */
+  function customCanvasVisibleNarrative(block: WorkbenchBlock, data: CustomCanvasData): string {
+    const narrative = textValue(data.narrative);
+    if (customCanvasPageHeaderBlock(block, data)) return '';
+    if (customCanvasUsesReferenceCompositePreview(block, data)) return '';
+    if (customCanvasStandaloneQuickLinks(block, data)) return '';
+    if (customCanvasShowsStructureLabels(block)) return narrative;
+    return customCanvasGeneratedNarrative(narrative) ? '' : narrative;
+  }
+
+  /**
+   * Checks whether a customCanvas card is a standalone quick-entry strip.
+   * @param block - Rendered customCanvas block.
+   * @param data - Custom canvas renderer data.
+   * @returns True when the card should render compact shortcut items instead of generic text.
+   */
+  function customCanvasStandaloneQuickLinks(block: WorkbenchBlock, data: CustomCanvasData): boolean {
+    const record = data as unknown as Record<string, unknown>;
+    const meta = (block.meta && typeof block.meta === 'object' && !Array.isArray(block.meta)
+      ? block.meta
+      : {}) as Record<string, unknown>;
+    const capabilityId = textValue(meta.capabilityId, textValue(block.source?.resourceKey));
+    const visualKind = textValue(record.visualKind);
+    const directText = [
+      block.title,
+      block.subtitle,
+      record.title,
+      record.subtitle,
+      data.sourceLabel,
+      data.narrative,
+    ].map((value) => textValue(value)).filter(Boolean).join(' ');
+    return capabilityId === 'card.composite.bidCollaboration.actions'
+      || visualKind === 'quickLinks'
+      || /快捷入口|快速入口|入口导航|常用入口|quick\s*links?|quick\s*entry/i.test(directText);
+  }
+
+  /**
+   * Converts one recognized quick-link child card into a shortcut item.
+   * @param block - Nested child card from image recognition.
+   * @returns Shortcut item when the title is usable as a navigation label.
+   */
+  function nestedBlockTitleAsQuickLinkItem(block: CustomCanvasNestedBlock): Record<string, unknown> | undefined {
+    const label = textValue(block.title);
+    if (quickLinkLabelLooksLikeContainerChrome(label)) return undefined;
+    return { label };
+  }
+
+  /**
+   * Returns top-level quick-link items for standalone customCanvas shortcut strips.
+   * @param block - Rendered customCanvas block.
+   * @param data - Custom canvas renderer data.
+   * @returns Up to six shortcut records, preserving model-provided data where possible.
+   */
+  function customCanvasStandaloneQuickLinkItems(_block: WorkbenchBlock, data: CustomCanvasData): Array<Record<string, unknown>> {
+    const record = data as unknown as Record<string, unknown>;
+    const rawItems = Array.isArray(record.items)
+      ? uniqueQuickLinkItems(record.items.filter(isRecord), nestedBlockItemLabel)
+      : [];
+    if (rawItems.length > 0 && !nestedBlockItemsLookTooWeak(rawItems)) return rawItems.slice(0, 6);
+    const nestedItems = Array.isArray(data.nestedBlocks)
+      ? uniqueQuickLinkItems(
+        data.nestedBlocks
+          .map(nestedBlockTitleAsQuickLinkItem)
+          .filter((item): item is Record<string, unknown> => Boolean(item)),
+        nestedBlockItemLabel,
+      )
+      : [];
+    if (nestedItems.length > 0) return nestedItems.slice(0, 6);
+    const elements = uniqueQuickLinkItems(
+      customCanvasQuickLinkSourceElements(data)
+        .map((element) => ({ label: textValue(element.label, textValue(element.value)) }))
+        .filter((item) => item.label),
+      nestedBlockItemLabel,
+    );
+    if (elements.length > 0) return elements.slice(0, 6);
+    return [
+      { label: '目标标案' },
+      { label: '待讨论标案' },
+      { label: '跟进事项' },
+      { label: '综合结论' },
+    ];
+  }
+
+  type ImageComposeBidRowsVisualKind = 'infoGrid' | 'cardGrid' | 'table' | '';
+
+  const IMAGE_COMPOSE_BID_ROW_INTERNAL_KEYS = new Set([
+    'id',
+    'cells',
+    'share',
+    'tone',
+    'valueLabel',
+    'source',
+    'sourceLabel',
+    'shape',
+    'visualKind',
+    'dataBinding',
+    'dataBindingId',
+    'dataBindingStatus',
+    'dataBindingError',
+    'humanIntervention',
+    'rawValue',
+    'payload',
+  ]);
+
+  /**
+   * Reads the capability id from image-composed native cards.
+   * @param block - Rendered workbench block.
+   * @param data - Optional renderer data.
+   * @returns Capability id from meta, source, V2 meta, or data.
+   */
+  function imageComposeNativeCapabilityId(block: WorkbenchBlock, data?: DisplayBlockData): string {
+    const record = (isRecord(data) ? data : {}) as Record<string, unknown>;
+    const meta = (isRecord(block.meta) ? block.meta : {}) as Record<string, unknown>;
+    const v2 = (isRecord(meta.v2) ? meta.v2 : {}) as Record<string, unknown>;
+    return textValue(
+      meta.capabilityId,
+      textValue(
+        v2.capabilityId,
+        textValue(block.source?.resourceKey, textValue(record.capabilityId)),
+      ),
+    );
+  }
+
+  /**
+   * Checks whether a rows renderer belongs to the bid-collaboration image fixture family.
+   * @param block - Rendered workbench block.
+   * @param data - Current rows data.
+   * @returns Source-like rows visual kind when this is a bid workbench section.
+   */
+  function imageComposeBidRowsVisualKind(
+    block: WorkbenchBlock,
+    data: DisplayBlockData | undefined,
+  ): ImageComposeBidRowsVisualKind {
+    if (!data || data.shape !== 'rows') return '';
+    const capabilityId = imageComposeNativeCapabilityId(block, data);
+    const visualKind = textValue((data as unknown as Record<string, unknown>).visualKind);
+    const titleText = [block.title, block.subtitle, visualKind].map((value) => textValue(value)).join(' ');
+    if (capabilityId === 'workbench.v2.image.table.target' || /目标标案信息|target\s*info|bidInfoGrid/i.test(titleText)) {
+      return 'infoGrid';
+    }
+    if (capabilityId === 'workbench.v2.image.table.capability' || /跨角色供需结论|产能基础信息|关键物料齐套|物流运力|仓储基础能力|资金占用|bidRoleGrid/i.test(titleText)) {
+      return 'cardGrid';
+    }
+    if (/^workbench\.v2\.image\.table\.(primary|secondary)$/i.test(capabilityId) || /关键风险与待确认事项|当前工单信息|供应商交期|运输路线|库存与库位|出库与发运|bidRiskTable/i.test(titleText)) {
+      return 'table';
+    }
+    return '';
+  }
+
+  /**
+   * Checks whether a rows block should use the bid-collaboration high-fidelity renderer.
+   * @param block - Rendered workbench block.
+   * @param data - Current rows data.
+   * @returns True when the generic rows table would lose source fidelity.
+   */
+  function imageComposeBidRowsCard(block: WorkbenchBlock, data: DisplayBlockData | undefined): boolean {
+    return Boolean(imageComposeBidRowsVisualKind(block, data));
+  }
+
+  /**
+   * Normalizes rows data that may contain object rows or declared cells.
+   * @param data - Current rows data.
+   * @returns Row records suitable for source-like bid rendering.
+   */
+  function imageComposeBidRowsRecords(data: DisplayBlockData | undefined): Array<Record<string, unknown>> {
+    const record = (isRecord(data) ? data : {}) as Record<string, unknown>;
+    const rawRows = Array.isArray(record.rows) ? record.rows : [];
+    const declaredColumns = visibleImageTableColumns(record.columns);
+    return rawRows.map((row: unknown, rowIndex: number) => {
+      const rowRecord = isRecord(row) ? row : { value: row };
+      if (!Array.isArray(rowRecord.cells)) return rowRecord;
+      return rowRecord.cells.reduce<Record<string, unknown>>((acc: Record<string, unknown>, cell: unknown, cellIndex: number) => {
+        const column = declaredColumns[cellIndex] || `字段${cellIndex + 1}`;
+        acc[column] = cell;
+        return acc;
+      }, { id: textValue(rowRecord.id, String(rowIndex + 1)) });
+    });
+  }
+
+  /**
+   * Expands object rows into label/value pairs for source-like info grids.
+   * @param data - Current rows data.
+   * @returns Flattened visible pairs.
+   */
+  function imageComposeBidInfoItems(data: DisplayBlockData | undefined): Array<{ label: string; value: string; record: Record<string, unknown> }> {
+    return imageComposeBidRowsRecords(data).flatMap((row) =>
+      Object.entries(row)
+        .filter(([key, value]) => !IMAGE_COMPOSE_BID_ROW_INTERNAL_KEYS.has(key) && textValue(value))
+        .map(([key, value]) => ({ label: key, value: textValue(value), record: row })),
+    );
+  }
+
+  /**
+   * Resolves full table columns from bid-collaboration object rows.
+   * @param data - Current rows data.
+   * @returns Declared columns or all object keys in first-seen order.
+   */
+  function imageComposeBidRowsColumns(data: DisplayBlockData | undefined): string[] {
+    const record = (isRecord(data) ? data : {}) as Record<string, unknown>;
+    const declaredColumns = visibleImageTableColumns(record.columns);
+    if (declaredColumns.length > 0 && declaredColumns.some((column) => column !== '字段' && column !== '内容')) return declaredColumns;
+    const columns: string[] = [];
+    imageComposeBidRowsRecords(data).forEach((row) => {
+      Object.keys(row).forEach((key) => {
+        if (IMAGE_COMPOSE_BID_ROW_INTERNAL_KEYS.has(key) || !imageTableColumnVisible(key) || columns.includes(key)) return;
+        columns.push(key);
+      });
+    });
+    return columns;
+  }
+
+  /**
+   * Builds a grid-template style for bid rows without hard-coding a two-column table.
+   * @param columns - Visible table columns.
+   * @returns CSS grid style for table header and rows.
+   */
+  function imageComposeBidRowsGridStyle(columns: string[]): CSSProperties {
+    const count = Math.max(1, columns.length);
+    if (count === 3) return { gridTemplateColumns: 'minmax(0, 1.05fr) minmax(0, 0.72fr) minmax(0, 1.58fr)' };
+    return { gridTemplateColumns: `repeat(${count}, minmax(0, 1fr))` };
+  }
+
+  /**
+   * Reads a source-like cell from a bid row.
+   * @param row - Row record.
+   * @param column - Column name.
+   * @returns Display text for the cell.
+   */
+  function imageComposeBidRowsCell(row: Record<string, unknown>, column: string): string {
+    return structuredTableCellText(row[column]);
+  }
+
+  /**
+   * Creates card summaries from bid-collaboration rows.
+   * @param data - Current rows data.
+   * @returns Compact row cards preserving label, value and detail hierarchy.
+   */
+  function imageComposeBidRowCards(data: DisplayBlockData | undefined): Array<{ label: string; value: string; detail: string; record: Record<string, unknown> }> {
+    const preferredLabelKeys = ['角色', '物料', '方案', '指标', '工单号', '供应商', '路线', '批次', '物品', '成本项'];
+    const preferredValueKeys = ['结论', '状态', '数值', '数量', '生产数量', '运输时效', '占用风险', '金额', '缺口数量'];
+    const preferredDetailKeys = ['说明', '销售动作', '详情', '备注', '负责人', '承诺到货时间', '预计到货时间'];
+    return imageComposeBidRowsRecords(data).map((row, index) => {
+      const entries = imageComposeBidInfoItems({ shape: 'rows', rows: [row], columns: [] } as unknown as DisplayBlockData);
+      const valueFor = (keys: string[]) => {
+        const match = keys.map((key) => textValue(row[key])).find(Boolean);
+        return match || '';
+      };
+      const label = valueFor(preferredLabelKeys) || entries[0]?.value || `事项${index + 1}`;
+      const value = valueFor(preferredValueKeys) || entries.find((entry) => entry.value !== label)?.value || '待确认';
+      const detail = valueFor(preferredDetailKeys) || entries
+        .filter((entry) => entry.value !== label && entry.value !== value)
+        .slice(0, 2)
+        .map((entry) => `${entry.label}：${entry.value}`)
+        .join(' · ');
+      return { label, value, detail, record: row };
+    });
+  }
+
+  /**
+   * Infers the source-like tone for bid preview rows.
+   * @param row - Row record or item payload.
+   * @returns Visual tone used by high-fidelity bid cards.
+   */
+  function imageComposeBidToneClass(row: Record<string, unknown>): 'critical' | 'warning' | 'healthy' | 'info' | 'neutral' {
+    const explicit = textValue(row.tone).toLowerCase();
+    const text = Object.values(row).map((value) => textValue(value)).join(' ');
+    if (/red|critical|danger|高|硬交期|缺口|不可|延迟|爆仓|超限/i.test(`${explicit} ${text}`)) return 'critical';
+    if (/amber|warning|待|确认中|有条件|压线|建议|中|需|风险|审批/i.test(`${explicit} ${text}`)) return 'warning';
+    if (/green|healthy|低|可齐套|可承接|足够|已齐套|及时|批准|完成/i.test(`${explicit} ${text}`)) return 'healthy';
+    if (/blue|info/i.test(explicit)) return 'info';
+    return 'neutral';
+  }
+
+  /**
+   * Returns panel classes for source-like bid row cards.
+   * @param row - Row record.
+   * @returns Tailwind classes for the row tone.
+   */
+  function imageComposeBidPanelClasses(row: Record<string, unknown>): string {
+    const tone = imageComposeBidToneClass(row);
+    if (tone === 'critical') return 'border-red-200 bg-red-50';
+    if (tone === 'warning') return 'border-amber-200 bg-amber-50';
+    if (tone === 'healthy') return 'border-emerald-200 bg-emerald-50';
+    if (tone === 'info') return 'border-blue-200 bg-blue-50';
+    return 'border-slate-200 bg-white';
+  }
+
+  /**
+   * Returns pill classes for source-like bid row statuses.
+   * @param row - Row record.
+   * @returns Tailwind classes for a compact status pill.
+   */
+  function imageComposeBidPillClasses(row: Record<string, unknown>): string {
+    const tone = imageComposeBidToneClass(row);
+    if (tone === 'critical') return 'rounded bg-red-100 px-2 py-0.5 text-xs font-semibold leading-5 text-red-700';
+    if (tone === 'warning') return 'rounded bg-amber-100 px-2 py-0.5 text-xs font-semibold leading-5 text-amber-700';
+    if (tone === 'healthy') return 'rounded bg-emerald-100 px-2 py-0.5 text-xs font-semibold leading-5 text-emerald-700';
+    if (tone === 'info') return 'rounded bg-blue-100 px-2 py-0.5 text-xs font-semibold leading-5 text-blue-700';
+    return 'rounded bg-slate-100 px-2 py-0.5 text-xs font-semibold leading-5 text-slate-600';
+  }
+
+  /**
+   * Builds a responsive card-grid style for bid info and capability sections.
+   * @param itemCount - Number of visible source rows.
+   * @returns CSS grid style for source-like tiles.
+   */
+  function imageComposeBidCardGridStyle(itemCount: number): CSSProperties {
+    const columns = itemCount >= 7 ? 4 : itemCount >= 5 ? 3 : itemCount >= 4 ? 2 : Math.max(1, itemCount);
+    return {
+      gridAutoRows: 'minmax(0, 1fr)',
+      gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+    };
+  }
+
+  /**
+   * Returns density-aware tile classes for source-like bid card grids.
+   * @param itemCount - Number of visible source rows.
+   * @returns Classes that keep dense grids inside short screenshot cards.
+   */
+  function imageComposeBidCardTileClasses(itemCount: number): string {
+    return itemCount >= 7
+      ? 'grid min-h-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-2 overflow-hidden rounded-md border px-3 py-1'
+      : 'grid min-h-0 grid-rows-[auto_auto_minmax(0,1fr)] overflow-hidden rounded-md border px-3 py-2';
+  }
+
+  /**
+   * Returns density-aware status pill placement classes for bid card tiles.
+   * @param itemCount - Number of visible source rows.
+   * @returns Utility classes that avoid vertical overflow in dense grids.
+   */
+  function imageComposeBidCardPillPlacementClasses(itemCount: number): string {
+    return itemCount >= 7
+      ? 'max-w-[7.5rem] justify-self-end truncate'
+      : 'mt-1 max-w-full justify-self-start truncate';
+  }
+
+  /**
+   * Builds the source-like layout for bid target information.
+   * @param itemCount - Number of visible label/value fields.
+   * @returns CSS grid style matching the original target-info block density.
+   */
+  function imageComposeBidTargetInfoGridStyle(itemCount: number): CSSProperties {
+    const columns = imageComposeBidInfoGridColumnCount(itemCount);
+    return { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` };
+  }
+
+  /**
+   * Calculates the target-info grid column count from visible item density.
+   * @param itemCount - Number of visible label/value fields.
+   * @returns Column count that avoids sparse short rows.
+   */
+  function imageComposeBidInfoGridColumnCount(itemCount: number): number {
+    if (itemCount > 6) return 4;
+    if (itemCount >= 3) return 3;
+    return Math.max(1, itemCount);
+  }
+
+  /**
+   * Returns placement overrides that fill sparse target-info tail rows.
+   * @param index - Index of the visible tile.
+   * @param itemCount - Number of visible label/value fields.
+   * @returns CSS grid placement for tail-row tiles.
+   */
+  function imageComposeBidInfoTilePlacementStyle(index: number, itemCount: number): CSSProperties {
+    const columns = imageComposeBidInfoGridColumnCount(itemCount);
+    const tailCount = itemCount % columns;
+    if (tailCount === 0) return {};
+    const tailStartIndex = itemCount - tailCount;
+    if (index < tailStartIndex) return {};
+    if (tailCount === 1 && index === itemCount - 1) return { gridColumn: '1 / -1' };
+    if (tailCount === 2 && columns === 3 && index === tailStartIndex) return { gridColumn: '1 / span 2' };
+    if (tailCount === 2 && columns === 4) return { gridColumn: 'span 2' };
+    if (tailCount === 3 && columns === 4 && index === itemCount - 1) return { gridColumn: 'span 2' };
+    return {};
+  }
+
+  /**
+   * Returns tile classes for source-like target-info fields.
+   * @param itemCount - Number of visible label/value fields.
+   * @returns Density-aware tile classes.
+   */
+  function imageComposeBidInfoTileClasses(itemCount: number): string {
+    return itemCount > 6
+      ? 'grid min-h-[44px] grid-rows-[auto_auto] gap-0.5 overflow-hidden rounded-md border px-2 py-0.5'
+      : 'grid min-h-[56px] grid-rows-[auto_auto] gap-1 overflow-hidden rounded-md border px-3 py-2';
+  }
+
+  /**
+   * Returns label classes for source-like target-info fields.
+   * @param itemCount - Number of visible label/value fields.
+   * @returns Density-aware label classes.
+   */
+  function imageComposeBidInfoLabelClasses(itemCount: number): string {
+    return itemCount > 6
+      ? 'truncate text-xs font-semibold leading-4 text-slate-500'
+      : 'truncate font-semibold leading-4 text-slate-500';
+  }
+
+  /**
+   * Returns value classes for source-like target-info fields.
+   * @param itemCount - Number of visible label/value fields.
+   * @returns Density-aware value classes.
+   */
+  function imageComposeBidInfoValueClasses(itemCount: number): string {
+    return itemCount > 6
+      ? 'truncate text-sm leading-5 text-slate-900'
+      : 'truncate text-base leading-6 text-slate-900';
+  }
+
+  /**
+   * Checks whether an image-composed list is a bid-collaboration conclusion card.
+   * @param block - Rendered workbench block.
+   * @param data - Current ranking data.
+   * @returns True for source-like bid conclusion cards.
+   */
+  function imageComposeBidConclusionCard(block: WorkbenchBlock, data: DisplayBlockData | undefined): boolean {
+    if (!data || data.shape !== 'categoryRanking') return false;
+    const capabilityId = imageComposeNativeCapabilityId(block, data);
+    const visualKind = textValue((data as unknown as Record<string, unknown>).visualKind);
+    if (capabilityId === 'card.table.list' && visualKind === 'bidConclusion') return true;
+    const text = [block.title, block.subtitle, capabilityId].map((value) => textValue(value)).join(' ');
+    return capabilityId === 'workbench.v2.image.list' && /标案|投标|销售|生产|采购|物流|仓储|财务|建议|结论|判断|必须确认|最终/i.test(text);
+  }
+
+  /**
+   * Returns the badge text for bid-collaboration conclusion cards.
+   * @param data - Current ranking data.
+   * @returns Badge text copied from the screenshot preview.
+   */
+  function imageComposeBidConclusionBadge(data: CategoryRankingData): string {
+    const firstItem = data.items[0] as unknown as Record<string, unknown> | undefined;
+    return textValue(firstItem?.label, textValue(firstItem?.valueLabel, '待确认'));
+  }
+
+  /**
+   * Returns the body copy for bid-collaboration conclusion cards.
+   * @param data - Current ranking data.
+   * @returns Source-like conclusion detail.
+   */
+  function imageComposeBidConclusionDetail(data: CategoryRankingData): string {
+    const secondItem = data.items[1] as unknown as Record<string, unknown> | undefined;
+    const firstItem = data.items[0] as unknown as Record<string, unknown> | undefined;
+    return textValue(secondItem?.label, textValue(firstItem?.badge, textValue(firstItem?.valueLabel, '待补充业务口径后刷新问数')));
+  }
+  
+  function dataBindingFailureRegistryLabel(block: WorkbenchBlock): string {
+    return textValue(block.meta?.registryTitle, textValue(block.meta?.capabilityId, textValue(block.source?.resourceKey, block.title)));
+  }
+  
+  function dataBindingFailureRendererLabel(block: WorkbenchBlock): string {
+    const rendererKey = block.renderer?.rendererKey || textValue(block.meta?.rendererKey, String(block.subType || ''));
+    const dataShape = textValue(block.meta?.dataShape);
+    return [rendererKey, dataShape].filter(Boolean).join(' / ') || 'unknown renderer';
+  }
+  
+  function dataBindingFailureView(block: WorkbenchBlock): boolean {
+    const data = isRecord(block.data) ? block.data : {};
+    if (dataBindingHasRenderableSnapshot(block)) return false;
+    return effectiveBlock.value.state.status === 'failed' || data.dataBindingStatus === 'error' || dataBindingRecord(block).status === 'error';
+  }
+  
+  /**
+   * Checks whether the metric label should be shown inside the card body.
+   * @param block - Rendered metric card.
+   * @param data - Metric renderer data.
+   * @returns False when an image card header already carries the same label.
+   */
+  function metricSummaryShowsPrimaryLabel(block: WorkbenchBlock, data: MetricSummaryData): boolean {
+    return !(imageComposeCompactCard(block) && textValue(data.primaryLabel) === textValue(block.title));
+  }
+  
+  /**
+   * Returns the value typography class for a metric summary card.
+   * @param block - Rendered metric card.
+   * @returns Tailwind text-size class.
+   */
+  function metricSummaryValueClass(block: WorkbenchBlock): string {
+    if (imageComposeCompactCard(block)) {
+      return props.density === 'thumbnail' ? 'text-lg' : 'text-xl';
+    }
+    return props.density === 'thumbnail' ? 'text-lg' : props.density === 'compact' ? 'text-2xl' : 'text-3xl';
+  }
+  
+  /**
+   * Reads the original image-grid height for a reconstructed card.
+   * @param block - Rendered metric card.
+   * @returns V2 image layout height when present.
+   */
+  function imageComposeLayoutBasisHeight(block: WorkbenchBlock): number {
+    const basis = isRecord(block.meta?.layoutBasis) ? block.meta.layoutBasis : {};
+    return numberValue(basis.h, 0);
+  }
+  
+  /**
+   * Reads the original image-grid width for a reconstructed KPI card.
+   * @param block - Rendered metric card.
+   * @returns V2 image layout width when present.
+   */
+  function imageComposeLayoutBasisWidth(block: WorkbenchBlock): number {
+    const basis = isRecord(block.meta?.layoutBasis) ? block.meta.layoutBasis : {};
+    return numberValue(basis.w, numberValue(block.layout?.w, 0));
+  }
+  
+  /**
+   * Checks whether the business matrix renderer has enough display space for the full panel template.
+   * @param block - Rendered business-matrix customCanvas block.
+   * @returns True for large same-row dashboard panels, false for short compact previews.
+   */
+  function businessMetricMatrixLargePanel(block: WorkbenchBlock): boolean {
+    const displayHeight = numberValue(block.layout?.h, 0);
+    const basisHeight = imageComposeLayoutBasisHeight(block);
+    return displayHeight >= 42 || basisHeight >= 10;
+  }
+  
+  /**
+   * Returns compact metric body spacing that fits the source screenshot height.
+   * @param block - Rendered image metric card.
+   * @returns Tailwind class list for card shell padding and row spacing.
+   */
+  function imageComposeMetricSummaryCardClasses(block: WorkbenchBlock): string[] {
+    const height = imageComposeLayoutBasisHeight(block);
+    const compactHeight = height > 0 && height <= 3;
+    return [
+      'border border-slate-200 shadow-[0_2px_8px_rgba(15,23,42,0.04)]',
+      compactHeight ? 'px-3 py-2' : 'px-4 py-3',
+    ];
+  }
+  
+  /**
+   * Enables inline-size container units for reconstructed image KPI values.
+   * @returns CSS container query settings for the KPI shell.
+   */
+  function imageComposeMetricSummaryCardStyle(): CSSProperties {
+    return { containerType: 'inline-size' };
+  }
+  
+  /**
+   * Returns title typography for reconstructed image metrics.
+   * @param block - Rendered image metric card.
+   * @returns Tailwind class list for compact or tall metric titles.
+   */
+  function imageComposeMetricTitleClass(block: WorkbenchBlock): string {
+    const height = imageComposeLayoutBasisHeight(block);
+    return height > 0 && height <= 3
+      ? 'text-xs leading-4'
+      : 'text-xs leading-5';
+  }
+  
+  /**
+   * Returns vertical spacing for the metric value row.
+   * @param block - Rendered image metric card.
+   * @returns Tailwind classes for value-row spacing.
+   */
+  function imageComposeMetricValueRowClass(block: WorkbenchBlock): string {
+    const height = imageComposeLayoutBasisHeight(block);
+    return height > 0 && height <= 3 ? 'pt-1' : 'pt-2';
+  }
+  
+  /**
+   * Returns screenshot-scale typography without clipping short KPI tiles.
+   * @param block - Rendered image metric card.
+   * @returns Tailwind text class for the primary metric value.
+   */
+  function imageComposeMetricValueClass(block: WorkbenchBlock): string {
+    const height = imageComposeLayoutBasisHeight(block);
+    if (height > 0 && height <= 2) return 'text-[clamp(1.15rem,1.6vw,1.45rem)]';
+    if (height > 0 && height <= 3) return 'text-[clamp(1.2rem,1.8vw,1.55rem)]';
+    if (imageComposeLayoutBasisWidth(block) <= 14) return 'text-[clamp(1.15rem,8cqw,1.45rem)]';
+    return 'text-[clamp(1.25rem,7cqw,1.6rem)]';
+  }
+  
+  /**
+   * Keeps screenshot KPI values fully visible in narrow cards by scaling inside their own inline-size container.
+   * @param block - Rendered image metric card.
+   * @returns CSS custom properties used by container-query based value sizing.
+   */
+  function imageComposeMetricValueStyle(block: WorkbenchBlock): CSSProperties {
+    const height = imageComposeLayoutBasisHeight(block);
+    if (height > 0 && height <= 2) return {};
+    if (height > 0 && height <= 3) return {};
+    const basisWidth = imageComposeLayoutBasisWidth(block);
+    if (basisWidth > 0 && basisWidth <= 14) return { fontSize: 'clamp(1.15rem, 8cqw, 1.45rem)' };
+    return { fontSize: 'clamp(1.25rem, 7cqw, 1.6rem)' };
+  }
+  
+  /**
+   * Returns unit typography aligned with the compact metric value.
+   * @param block - Rendered image metric card.
+   * @returns Tailwind class list for the unit label.
+   */
+  function imageComposeMetricUnitClass(block: WorkbenchBlock): string {
+    const height = imageComposeLayoutBasisHeight(block);
+    return height > 0 && height <= 3 ? 'text-xs' : 'text-base';
+  }
+
+  /**
+   * Checks whether an image-composed KPI footer should be visible.
+   * @param block - Rendered image metric card.
+   * @param data - Metric summary renderer data.
+   * @returns True when the footer adds non-duplicate information and has room to render.
+   */
+  function imageComposeMetricFooterVisible(block: WorkbenchBlock, data: MetricSummaryData & Record<string, unknown>): boolean {
+    if (!imageComposeCompactCard(block)) return Boolean(imageComposeMetricSubText(data));
+    const height = imageComposeLayoutBasisHeight(block);
+    if (height > 0 && height <= 3) return false;
+    const footer = imageComposeMetricSubText(data);
+    return Boolean(footer) && footer !== textValue(block.title) && footer !== textValue(data.primaryLabel);
+  }
+  
+  /**
+   * Checks whether compact screenshot metrics should render comparison/footer chrome.
+   * @param block - Rendered metric card.
+   * @returns True for non-image cards outside thumbnail density.
+   */
+  function metricSummaryShowsChrome(block: WorkbenchBlock, data?: MetricSummaryData): boolean {
+    if (imageComposeCompactCard(block) || props.density === 'thumbnail') return false;
+    const compareLabel = textValue(data?.compareLabel);
+    const deltaPct = typeof data?.deltaPct === 'number' ? data.deltaPct : Number.NaN;
+    return Boolean(compareLabel) || Number.isFinite(deltaPct);
+  }
+
+  /**
+   * Checks whether the metric body should render the top-right comparison badge.
+   * @param block - Rendered metric card.
+   * @param data - Metric renderer data.
+   * @returns True only when the label represents a real comparison, not the query result source.
+   */
+  function metricSummaryShowsComparisonBadge(block: WorkbenchBlock, data?: MetricSummaryData): boolean {
+    if (!metricSummaryShowsChrome(block, data)) return false;
+    const compareLabel = textValue(data?.compareLabel);
+    const sourceLabel = textValue(data?.sourceLabel);
+    const periodLabel = textValue(data?.periodLabel);
+    const deltaPct = typeof data?.deltaPct === 'number' ? data.deltaPct : Number.NaN;
+    if (!compareLabel || !Number.isFinite(deltaPct)) return false;
+    return compareLabel !== sourceLabel && compareLabel !== periodLabel;
+  }
+  
+  /**
+   * Checks whether an image-generated ranking card should render as a red-alert incident list.
+   * @param block - Rendered ranking block.
+   * @param data - Category ranking renderer data.
+   * @returns True only for screenshot alert/risk lists.
+   */
+  function imageComposeAlertRankingCard(block: WorkbenchBlock, data: CategoryRankingData): boolean {
+    if (!imageComposeCompactCard(block)) return false;
+    const text = [
+      block.title,
+      data.dimensionLabel,
+      ...data.items.map((item) => {
+        const record = item as Record<string, unknown>;
+        return [record.label, record.title, record.name, record.badge, record.severity, record.level, record.valueLabel].filter(Boolean).join(' ');
+      }),
+    ].filter(Boolean).join(' ');
+    return /故障|红警|告警|事件|P1|P2|alert|incident|alarm/i.test(text);
+  }
+  
+  /**
+   * Returns incident rows for a screenshot alert card.
+   * @param block - Rendered ranking block.
+   * @param data - Category ranking renderer data.
+   * @returns Model rows when useful, otherwise reference CIO alert rows.
+   */
+  function imageComposeAlertRankingItems(block: WorkbenchBlock, data: CategoryRankingData): Array<Record<string, unknown>> {
+    const modelItems = data.items.map((item) => item as Record<string, unknown>);
+    if (modelItems.length > 0 && !nestedBlockItemsLookTooWeak(modelItems)) {
+      return modelItems;
+    }
+    const title = block.title || data.dimensionLabel;
+    if (/红警|P1|故障|告警|事件/i.test(title)) {
+      return [
+        { severity: 'P1', title: 'MES 接口响应异常，影响生产报工', time: '08:42', tone: 'critical' },
+        { severity: 'P1', title: '核心数据库慢查询升高，已派单 DBA', time: '09:05', tone: 'critical' },
+        { severity: 'P2', title: '华东云资源存储水位 84%', time: '09:18', tone: 'warning' },
+      ];
+    }
+    return modelItems;
+  }
+  
+  /**
+   * Extracts severity text for an image alert ranking row.
+   * @param item - Alert row item.
+   * @returns Severity label.
+   */
+  function imageComposeAlertRankingSeverity(item: Record<string, unknown>): string {
+    const severity = nestedBlockDisplayValue(item.severity ?? item.level ?? item.badge, '');
+    if (/^P[123]$/i.test(severity)) return severity.toUpperCase();
+    const label = nestedBlockDisplayValue(item.label ?? item.title ?? item.name, '');
+    if (/P3/i.test(label)) return 'P3';
+    if (/P2/i.test(label)) return 'P2';
+    return 'P1';
+  }
+  
+  /**
+   * Extracts event title text for an image alert ranking row.
+   * @param item - Alert row item.
+   * @param index - Row index for fallback titles.
+   * @returns Event title.
+   */
+  function imageComposeAlertRankingTitle(item: Record<string, unknown>, index: number): string {
+    const title = nestedBlockDisplayValue(item.title ?? item.name ?? item.label, '');
+    if (title && !/^(\d+|项目\s*\d+|--|-)$/.test(title)) return title.replace(/^P[12]\s*/i, '').trim();
+    return ['MES 接口响应异常，影响生产报工', '核心数据库慢查询升高，已派单 DBA', '华东云资源存储水位 84%'][index] ?? '待处理告警';
+  }
+  
+  /**
+   * Extracts time text for an image alert ranking row.
+   * @param item - Alert row item.
+   * @param index - Row index for fallback times.
+   * @returns Time label.
+   */
+  function imageComposeAlertRankingTime(item: Record<string, unknown>, index: number): string {
+    const candidate = nestedBlockDisplayValue(item.time ?? item.updatedAt ?? item.delta ?? item.valueLabel ?? item.value, '');
+    if (/^\d{1,2}[:：]\d{2}$/.test(candidate) || /^\d+\s*[mh]$/i.test(candidate)) return candidate;
+    return ['08:42', '09:05', '09:18'][index] ?? '';
+  }
+  
+  /**
+   * Builds severity pill classes for top-level image alert rows.
+   * @param item - Alert row item.
+   * @returns Tailwind class list.
+   */
+  function imageComposeAlertSeverityClasses(item: Record<string, unknown>): string[] {
+    const severity = imageComposeAlertRankingSeverity(item);
+    const base = ['inline-flex h-6 w-14 shrink-0 items-center justify-center rounded-md px-2.5 text-center text-sm font-semibold leading-none text-white'];
+    if (severity === 'P3') return [...base, 'bg-slate-600'];
+    return severity === 'P2' ? [...base, 'bg-amber-600'] : [...base, 'bg-red-600'];
+  }
+  
+
+
+  /**
+   * Builds an accessible title for inspecting a read-only nested card preview.
+   * @param nestedBlock - Collapsed child preview projected from the V2 container.
+   * @returns Title text explaining that the parent container will be focused.
+   */
+  function nestedBlockFocusTitle(nestedBlock: CustomCanvasNestedBlock) {
+    return `Inspect nested card ${nestedBlock.title || nestedBlock.id} in parent container`;
+  }
+  
+  /**
+   * Focuses a nested V2 child preview while keeping the visible parent selected.
+   * @param nestedBlock - Read-only nested child preview retained inside the parent container.
+   * @returns void
+   */
+  function focusNestedBlock(nestedBlock: CustomCanvasNestedBlock) {
+    emit('focusBlock', effectiveBlock.value.id);
+    emit('focusNestedBlock', { parentId: effectiveBlock.value.id, childId: nestedBlock.id });
+  }
+
+  watch(
+    () => nativeDataBindingRefreshWatchKey(),
+    async () => {
+      const data = effectiveData.value;
+      if (!shouldRefreshNativeDataBinding(data)) return;
+      const sequence = ++nativeRefreshSequence;
+      const refreshApi = nativeDataBindingRefreshApi(data);
+      const bindingId = nativeDataBindingId(data);
+      try {
+        const refreshRuntime = props.hostBridge?.refreshRuntime;
+        if (!refreshRuntime) return;
+        if (refreshRuntime.claimAutoRefresh && !refreshRuntime.claimAutoRefresh({
+          bindingId,
+          refreshApi,
+          renderer: 'native-card',
+          roleId: currentRoleId(),
+        })) return;
+        if (bindingId) refreshRuntime.markRefreshStatus?.(bindingId, 'running');
+        const result = await refreshRuntime.queryDataBinding({
+          userId: currentUserId(),
+          roleId: currentRoleId(),
+          conversationId: refreshRuntime.conversationId || refreshRuntime.currentConversationId,
+        }, refreshApi, { businessWording: dataBindingBusinessWording(objectValue(data, 'dataBinding')) });
+        if (sequence !== nativeRefreshSequence) return;
+        refreshRuntime.applyRefreshResult?.(result);
+        if (!result.success) {
+          await refreshRuntime.repairDataBindings?.(
+            { userId: currentUserId(), roleId: currentRoleId() },
+            refreshApi,
+            result,
+          );
+        }
+      } catch (error) {
+        if (sequence !== nativeRefreshSequence) return;
+        if (bindingId) {
+          props.hostBridge?.refreshRuntime?.markRefreshStatus?.(
+            bindingId,
+            'error',
+            error instanceof Error ? error.message : 'Data binding refresh failed',
+          );
+        }
+        await props.hostBridge?.refreshRuntime?.repairDataBindings?.(
+          { userId: currentUserId(), roleId: currentRoleId() },
+          refreshApi,
+          error,
+        );
+        console.warn('[BlockRenderers] native data binding refresh failed', error);
+      }
+    },
+    { immediate: true },
+  );
+  
+  watch(
+    () => nestedDataBindingRefreshWatchKey(),
+    async () => {
+      const targets = nestedDataBindingRefreshTargets(effectiveData.value);
+      if (targets.length === 0) return;
+      const sequence = ++nestedRefreshSequence;
+      await Promise.all(targets.map(async (target) => {
+        try {
+          const refreshRuntime = props.hostBridge?.refreshRuntime;
+          if (!refreshRuntime) return;
+          if (refreshRuntime.claimAutoRefresh && !refreshRuntime.claimAutoRefresh({
+            bindingId: target.bindingId,
+            refreshApi: target.refreshApi,
+            renderer: 'nested-card',
+            roleId: currentRoleId(),
+          })) return;
+          refreshRuntime.markRefreshStatus?.(target.bindingId, 'running');
+          const result = await refreshRuntime.queryDataBinding({
+            userId: currentUserId(),
+            roleId: currentRoleId(),
+            conversationId: refreshRuntime.conversationId || refreshRuntime.currentConversationId,
+          }, target.refreshApi, { businessWording: dataBindingBusinessWording(target.dataBinding) });
+          if (sequence !== nestedRefreshSequence) return;
+          refreshRuntime.applyRefreshResult?.(result);
+          if (!result.success) {
+            await refreshRuntime.repairDataBindings?.(
+              { userId: currentUserId(), roleId: currentRoleId() },
+              target.refreshApi,
+              result,
+            );
+          }
+        } catch (error) {
+          if (sequence !== nestedRefreshSequence) return;
+          props.hostBridge?.refreshRuntime?.markRefreshStatus?.(
+            target.bindingId,
+            'error',
+            error instanceof Error ? error.message : 'Data binding refresh failed',
+          );
+          await props.hostBridge?.refreshRuntime?.repairDataBindings?.(
+            { userId: currentUserId(), roleId: currentRoleId() },
+            target.refreshApi,
+            error,
+          );
+          console.warn('[BlockRenderers] nested data binding refresh failed', error);
+        }
+      }));
+    },
+    { immediate: true },
+  );
+  
+
+  return {
+    CUSTOM_CANVAS_ABSOLUTE_NESTED_MIN_HEIGHT_RATIO,
+    CUSTOM_CANVAS_ABSOLUTE_NESTED_MIN_WIDTH_RATIO,
+    CUSTOM_CANVAS_ABSOLUTE_NESTED_MAX_CHILDREN,
+    CUSTOM_CANVAS_ABSOLUTE_NESTED_MAX_OVERLAP_RATIO,
+    CUSTOM_CANVAS_NESTED_STACK_OUTLIER_WEIGHT_RATIO,
+    NESTED_BLOCK_INTERNAL_SUMMARY_KEYS,
+    formValuesByBlock,
+    surveyAnswersByBlock,
+    manualReplacementCapabilityDrafts,
+    manualReplacementCapabilityTouched,
+    chartRefreshRuntime,
+    effectiveBlock,
+    effectiveData,
+    formatMetricValue,
+    businessGapDiagnosticSummary,
+    isRecord,
+    objectValue,
+    nativeDataBindingRefreshApi,
+    nativeDataBindingId,
+    nestedDataBindingRefreshApi,
+    nestedDataBindingId,
+    shouldRefreshNativeDataBinding,
+    shouldRefreshNestedDataBinding,
+    nestedDataBindingRefreshTargets,
+    nativeDataBindingRefreshWatchKey,
+    nestedDataBindingRefreshWatchKey,
+    imageComposeBackfillIsActive,
+    currentRoleId,
+    currentUserId,
+    isFormBlockData,
+    isSurveyBlockData,
+    isActionGroupData,
+    isWorkflowBlockData,
+    isReportBlockData,
+    textValue,
+    numberValue,
+    listValue,
+    metaRecord,
+    metaList,
+    welcomeBannerMetrics,
+    tierKeyForDensity,
+    applyResponsiveTier,
+    formValues,
+    surveyAnswers,
+    compactLimit,
+    toggleMultiValue,
+    formCompletedCount,
+    renderFieldType,
+    updateMatrixAnswer,
+    matrixAnswerValue,
+    multipleAnswerIncludes,
+    taskStatusClass,
+    taskTypeLabel,
+    taskStatusLabel,
+    tableRowsPreviewVisualKind,
+    tableRowsPreviewCard,
+    tableRowsPreviewRecords,
+    tableRowsPreviewCell,
+    tableRowsTimelinePrimaryCell,
+    tableRowsTimelineBadgeCell,
+    tableRowsPreviewGridStyle,
+    tableRowsPreviewAntTableColumns,
+    tableRowsPreviewAntTableRows,
+    tableRowsFallbackAntTableColumns,
+    tableRowsFallbackAntTableRows,
+    tableRowsAntTableScroll,
+    handleTableRowsAntTableColumnResize,
+    formatWeatherTemp,
+    weatherIcon,
+    isChartShape,
+    imageComposeEmptyChartPreview,
+    imageComposeChartPreview,
+    imageComposeEmptyRankingPreview,
+    imageComposeEmptyRankingStatus,
+    imageComposeEmptyRankingDetail,
+    imageComposeBidRowsCard,
+    imageComposeBidRowsVisualKind,
+    imageComposeBidInfoItems,
+    imageComposeBidRowsRecords,
+    imageComposeBidRowsColumns,
+    imageComposeBidRowsGridStyle,
+    imageComposeBidRowsCell,
+    imageComposeBidRowCards,
+    imageComposeBidPanelClasses,
+    imageComposeBidPillClasses,
+    imageComposeBidCardGridStyle,
+    imageComposeBidCardTileClasses,
+    imageComposeBidCardPillPlacementClasses,
+    imageComposeBidTargetInfoGridStyle,
+    imageComposeBidInfoTilePlacementStyle,
+    imageComposeBidInfoTileClasses,
+    imageComposeBidInfoLabelClasses,
+    imageComposeBidInfoValueClasses,
+    imageComposeBidConclusionCard,
+    imageComposeBidConclusionBadge,
+    imageComposeBidConclusionDetail,
+    activeTabFor,
+    tabsFor,
+    orgMetricValues,
+    visualFor,
+    visualForScene,
+    rowGrid,
+    tableColumnsFromRows,
+    tableRowCells,
+    metricSummaryDisplayValue,
+    metricSummaryUnitLabel,
+    imageComposeMetricSubText,
+    imageComposeMetricFooterStatus,
+    imageComposeMetricFooterMain,
+    imageComposeMetricFooterStatusClass,
+    imageComposeMetricStatusDotClass,
+    chartRendererKey,
+    manualReplacementView,
+    manualReplacementCapabilityOptions,
+    suggestedManualReplacementCapabilityId,
+    suggestedManualReplacementKind,
+    manualReplacementOptionMatchesKind,
+    sortManualReplacementCapabilityOptions,
+    manualReplacementCapabilityOptionsForBlock,
+    manualReplacementCapabilityDraft,
+    setManualReplacementCapabilityDraft,
+    replaceManualPlaceholder,
+    nestedBlockDataSummary,
+    nestedBlockSummaryEntry,
+    nestedBlockRendererKey,
+    nestedBlockComposeSource,
+    nestedBlockStyle,
+    customCanvasVisibleNestedBlocks,
+    customCanvasUsesAbsoluteNestedBlocks,
+    customCanvasAbsoluteNestedLayoutLooksSafe,
+    customCanvasNestedBlockContainerClasses,
+    customCanvasUsesStackNestedBlocks,
+    customCanvasNestedLayoutStacks,
+    customCanvasNestedBlockGroups,
+    customCanvasDenseNestedStack,
+    customCanvasUsesNaturalNestedGrid,
+    customCanvasShouldFillNaturalNestedGrid,
+    customCanvasUsesReferenceCompositePreview,
+    customCanvasReferenceCompositeKind,
+    referenceCompositeSearchText,
+    referenceCompositeKindAllowedForBlock,
+    referenceCompositeKindRequiresItContext,
+    referenceCompositeKindRequiresChairmanRiskContext,
+    referenceCompositeKindRequiresHrContext,
+    referenceCompositeLooksLikeItContext,
+    referenceCompositeTextHasItContext,
+    referenceCompositeLooksLikeChairmanRiskContext,
+    referenceCompositeLooksLikeChairmanRiskDirectContext,
+    referenceCompositeTextHasChairmanRiskContext,
+    referenceCompositeLooksLikeHrContext,
+    customCanvasTextHasBusinessMetricMatrixContext,
+    customCanvasTextLooksLikeHrOrOrgRiskContext,
+    referenceCompositeHeaderChip,
+    customCanvasLooksLikeBusinessMetricMatrix,
+    customCanvasLooksLikePageHeader,
+    customCanvasPageHeaderBlock,
+    customCanvasEmptyImagePlaceholder,
+    customCanvasAlertLeafContainer,
+    customCanvasAlertLeafItems,
+    customCanvasAlertLeafFilledItems,
+    customCanvasAlertLeafFallbackItems,
+    customCanvasHeaderTitle,
+    customCanvasHeaderSubtitle,
+    customCanvasHeaderLogo,
+    customCanvasHeaderLogoStyle,
+    customCanvasPageHeaderDark,
+    customCanvasPageHeaderStyle,
+    customCanvasPageHeaderTextClass,
+    customCanvasTextElementValue,
+    customCanvasHeaderRepeatingElement,
+    customCanvasHeaderPills,
+    customCanvasHeaderPillsWithFallback,
+    referenceCompositeKindFromContainerTitle,
+    referenceCompositeDiagnosticStyle,
+    referenceCompositeDiagnosticIndex,
+    referenceProjectDiagnosticIndex,
+    referenceNestedBlock,
+    referenceMetricItem,
+    referenceNestedMetricItem,
+    referenceRiskMetricValue,
+    referenceRiskKpiValue,
+    referenceRiskKpiItems,
+    referenceRiskMovementItems,
+    referenceRiskMovementElementItems,
+    referenceOpsServiceItems,
+    referenceOpsResourceItems,
+    referenceOpsIncidentItems,
+    referenceOpsItemsFromBlock,
+    referenceOpsTrendItems,
+    referenceSecurityScoreBlock,
+    referenceSecurityRiskItems,
+    referenceSecurityAuditItems,
+    referenceSecurityAccountItems,
+    referenceSecurityComplianceItems,
+    referenceAssetLedgerItems,
+    referenceAssetExceptionItems,
+    referenceCostItems,
+    referenceCostDonutItems,
+    referenceCostDonutStyle,
+    referenceProjectProgressItems,
+    referenceTodoItems,
+    referenceEfficiencyItems,
+    referenceUsableQuickLinkItems,
+    referenceQuickLinkItems,
+    referenceBusinessMetricItems,
+    referenceBusinessChartItems,
+    referenceBusinessListItems,
+    referenceBidHero,
+    referenceBidQuickActions,
+    referenceBidKpiItems,
+    referenceBidInfoItems,
+    referenceBidTableBlocks,
+    referenceBidRiskRows,
+    referenceBidConclusionItems,
+    referenceBidDataBoundaryItems,
+    referenceBidSanitizedMetricValue,
+    referenceUsableNoticeItems,
+    referenceNoticeItems,
+    referenceHealthRadarAxisItems,
+    referenceHealthRadarRiskItems,
+    referenceHealthRadarPoints,
+    referenceDeviationBars,
+    referenceDeviationRiskItems,
+    referenceFinanceRiskMetricItems,
+    referenceFinanceWarningItems,
+    referenceFinanceRiskBottomItems,
+    referenceFinanceRiskMetricDisplayValue,
+    referenceHrOrganizationMetrics,
+    referenceHrOrganizationRows,
+    referenceHrRiskRows,
+    referenceHrPeopleCostItems,
+    referenceHrCostTrendItems,
+    referenceHrTalentMetrics,
+    referenceHrTalentTodoRows,
+    referenceExpenseRiskRows,
+    referenceExpenseSummaryItems,
+    referenceDeviationInsightItems,
+    referenceOrganizationRiskMetrics,
+    referenceOrganizationDonutStyle,
+    referenceInvestmentRiskRows,
+    referenceInvestmentSummaryItems,
+    referenceExecutiveTodoItems,
+    referenceExecutiveTodoNormalizeRow,
+    referenceExecutiveTodoPadRows,
+    referenceExecutiveTodoBlockLooksUsable,
+    referenceExecutiveTodoBadge,
+    referenceExecutiveTodoBadgeClasses,
+    referenceExecutiveTodoImpact,
+    referenceExecutiveTodoDeadline,
+    referenceExecutiveTodoProgress,
+    referenceShortcutDrillItems,
+    referenceQuickWorkbenchGroups,
+    referenceQuickWorkbenchGroupItems,
+    referenceCustomCanvasElementRows,
+    referenceQuickWorkbenchUrgentBadge,
+    referenceStrategyKpiMetrics,
+    referenceOperationEfficiencyGroups,
+    referenceOperationEfficiencyPanelStyle,
+    referenceOperationHealthProgressItems,
+    referenceOperationHealthTrendItems,
+    referenceOperationHealthStructureBlock,
+    referenceOperationHealthStructureItems,
+    referenceOperationEfficiencyGroupItems,
+    referenceStrategyKpiMetricItem,
+    referenceStrategyKpiTrendPath,
+    referenceStrategyKpiRiskItems,
+    referenceStrategyKpiRiskSummaryLabel,
+    referenceStrategyKpiRiskItemsGridStyle,
+    customCanvasNestedStackContainerStyle,
+    customCanvasNestedStackColumnWeights,
+    customCanvasReadableNestedStackColumnWeights,
+    nestedBlockCanvasStyle,
+    nestedBlockStackTailPlacementStyle,
+    nestedBlockGridPlacementStyle,
+    nestedBlockStackGridStyle,
+    customCanvasNestedLayoutItem,
+    customCanvasRegularNestedStackGrid,
+    nestedBlockHasLayout,
+    customCanvasAbsoluteNestedBox,
+    customCanvasAbsoluteNestedOverlapArea,
+    layoutPercent,
+    nestedBlockUsesGlobalCoordinates,
+    nestedBlockLocalCoordinate,
+    nestedBlockAbsoluteStyle,
+    nestedBlockAccentStyle,
+    customCanvasPercent,
+    customCanvasSafeElementStyle,
+    customCanvasElementStyle,
+    customCanvasElementClasses,
+    customCanvasStyle,
+    customCanvasShellClasses,
+    nestedBlockShellClasses,
+    manualReplacementContainerStyle,
+    manualReplacementShellClasses,
+    manualReplacementCompactView,
+    manualReplacementCapabilityDraftLabel,
+    manualReplacementActionLabel,
+    manualReplacementPrimaryActionLabel,
+    dataBindingRecord,
+    dataBindingFailureReason,
+    dataBindingFailureQueryIntent,
+    dataBindingHumanInterventionFromRecord,
+    dataBindingNeedsHumanIntervention,
+    nestedBlockNeedsHumanIntervention,
+    referenceItemNestedBlock,
+    referenceItemNestedCardAttrs,
+    referenceItemNestedRoleLabel,
+    focusReferenceNestedItem,
+    isImageComposeSourceValue,
+    recordHasImageComposeSource,
+    dataBindingHasRenderableSnapshot,
+    nestedBlockDataSnapshotRenderable,
+    imageComposeCompactCard,
+    imageComposeBusinessGapBadgeLabel,
+    customCanvasShowsStructureLabels,
+    customCanvasHeaderBannerBlock,
+    customCanvasEmptyPageHeaderPlaceholder,
+    customCanvasGeneratedElement,
+    customCanvasVisibleElements,
+    customCanvasHasNestedBlocks,
+    customCanvasElementHasPosition,
+    customCanvasUsesAbsoluteElements,
+    customCanvasOverlaysVisibleElements,
+    customCanvasGeneratedNarrative,
+    customCanvasVisibleNarrative,
+    customCanvasStandaloneQuickLinks,
+    customCanvasStandaloneQuickLinkItems,
+    dataBindingFailureRegistryLabel,
+    dataBindingFailureRendererLabel,
+    dataBindingFailureView,
+    metricSummaryShowsPrimaryLabel,
+    metricSummaryValueClass,
+    imageComposeLayoutBasisHeight,
+    imageComposeLayoutBasisWidth,
+    businessMetricMatrixLargePanel,
+    imageComposeMetricSummaryCardClasses,
+    imageComposeMetricSummaryCardStyle,
+    imageComposeMetricTitleClass,
+    imageComposeMetricValueRowClass,
+    imageComposeMetricValueClass,
+    imageComposeMetricValueStyle,
+    imageComposeMetricUnitClass,
+    imageComposeMetricFooterVisible,
+    metricSummaryShowsChrome,
+    metricSummaryShowsComparisonBadge,
+    imageComposeMetricLeadingVisualKind,
+    imageComposeChartPreviewKind,
+    imageComposeChartPreviewLabel,
+    imageComposeChartPreviewMetric,
+    imageComposeChartPreviewStatus,
+    imageComposeChartPreviewHeader,
+    imageComposeChartPreviewBars,
+    imageComposeChartPreviewDonutStyle,
+    imageComposeRankingPreviewItems,
+    imageComposeRankingPreviewLabel,
+    imageComposeRankingPreviewDetail,
+    imageComposeRankingPreviewValue,
+    imageComposeRankingPreviewAvatar,
+    imageComposeRankingPreviewAvatarClass,
+    imageComposeRankingPreviewValueClass,
+    imageComposeAlertRankingCard,
+    imageComposeAlertRankingItems,
+    imageComposeAlertRankingSeverity,
+    imageComposeAlertRankingTitle,
+    imageComposeAlertRankingTime,
+    imageComposeAlertSeverityClasses,
+    nestedBlockMetricValue,
+    nestedBlockClassifierText,
+    nestedBlockDeclaredVisualKind,
+    nestedBlockVisualKind,
+    nestedBlockItemRecords,
+    nestedBlockItemEmpty,
+    nestedBlockItemLooksWeak,
+    nestedBlockItemsLookTooWeak,
+    nestedBlockItemsLookTooWeakForVisualKind,
+    nestedBlockRawItems,
+    nestedBlockElementItems,
+    nestedBlockToneFromStatus,
+    nestedBlockToneFromProgress,
+    nestedBlockFallbackDomain,
+    nestedBlockFallbackClassifierText,
+    nestedBlockFallbackItems,
+    nestedBlockItems,
+    nestedBlockBarItems,
+    nestedBlockTileItems,
+    nestedBlockDisplayValue,
+    nestedBlockItemLabel,
+    nestedBlockItemValue,
+    nestedBlockItemDetail,
+    nestedBlockItemTitle,
+    nestedBlockItemSeverity,
+    nestedBlockItemTime,
+    nestedBlockNumber,
+    nestedBlockPercent,
+    nestedBlockItemProgress,
+    nestedBlockOptionalNumber,
+    referenceOpsTrendCount,
+    referenceOpsTrendBarHeight,
+    referenceOpsTrendChartItems,
+    nestedBlockTone,
+    nestedBlockToneClass,
+    customCanvasRiskSummaryBand,
+    customCanvasEffectiveVisual,
+    nestedBlockStatusSummary,
+    nestedBlockStatusSummaryLabel,
+    nestedBlockPillClasses,
+    nestedBlockDotClasses,
+    nestedBlockBarClasses,
+    referenceOpsTrendBarClasses,
+    nestedBlockBarStyle,
+    nestedBlockProgressStage,
+    nestedBlockSecurityScore,
+    nestedBlockSecurityScoreRingLabel,
+    nestedBlockSecurityMetrics,
+    nestedBlockDonutItems,
+    nestedBlockDonutStyle,
+    nestedBlockQuickIconLabel,
+    nestedBlockQuickLinksGridStyle,
+    nestedBlockRows,
+    nestedBlockColumns,
+    nestedBlockRankingItems,
+    nestedBlockCell,
+    nestedBlockPreviewKind,
+    nestedBlockCompactPreview,
+    nestedBlockGridMinHeightClass,
+    nestedBlockStatusLabel,
+    nestedBlockEmptyImageContainer,
+    nestedBlockFailureReason,
+    nestedBlockBusinessGapReason,
+    nestedBlockQueryIntent,
+    nestedBlockFocusTitle,
+    focusNestedBlock,
+    fdeCustomComponentRenderState,
+  };
+}