@antv/infographic 0.2.15 → 0.2.17

package/esm/constants/service.d.ts

@@ -1 +1 @@
-export declare const ICON_SERVICE_URL = "https://www.weavefox.cn/api/open/v1/icon";
+export declare const ICON_SERVICE_URL = "https://lab.weavefox.cn/api/v1/infographic/icon";

package/esm/constants/service.js

@@ -1 +1 @@
-export const ICON_SERVICE_URL = 'https://www.weavefox.cn/api/open/v1/icon';
+export const ICON_SERVICE_URL = 'https://lab.weavefox.cn/api/v1/infographic/icon';

package/esm/designs/structures/chart-line.js

@@ -67,10 +67,11 @@ export const ChartLine = (props) => {
     const titleElements = [];
     const tickElements = [];
     const ticksY = scaleY.ticks(6);
+    const formatTickY = scaleY.tickFormat(6);
     ticksY.forEach((tick) => {
         const yPos = chartOriginY + scaleY(tick);
         gridElements.push(_jsx(Path, { d: `M ${chartOriginX} ${yPos} L ${chartOriginX + derivedChartWidth} ${yPos}`, width: derivedChartWidth, height: 1, stroke: axisColor, strokeWidth: 1, "data-element-type": "shape", opacity: 0.08 }));
-        tickElements.push(_jsx(Text, { x: chartOriginX - 8, y: yPos, alignHorizontal: "right", alignVertical: "middle", fontSize: 12, fill: axisColor, children: Number.isInteger(tick) ? tick.toString() : tick.toFixed(1) }));
+        tickElements.push(_jsx(Text, { x: chartOriginX - 8, y: yPos, alignHorizontal: "right", alignVertical: "middle", fontSize: 12, fill: axisColor, children: formatTickY(tick) }));
     });
     const xLabels = [];
     const pointPositions = [];

package/esm/designs/structures/sequence-interaction.js

@@ -15,6 +15,7 @@ const DEFAULT_ITEM_HEIGHT = 50;
 const FONT_SIZE = 14;
 const ARROW_SIZE = 14;
 const CORNER_RADIUS_NODE = 6;
+const LIFELINE_MASK_GAP = 2;
 const LANE_PADDING = 60;
 const BTN_HALF_SIZE = 12;
 const BTN_MARGIN = 10;
@@ -229,17 +230,6 @@ export const SequenceInteractionFlow = (props) => {
     const decorElements = [];
     const defsElements = [];
     const btnElements = [];
-    // 绘制生命线
-    if (showLifeline) {
-        lanes.forEach((_lane, laneIndex) => {
-            const centerX = getLaneCenterX(laneIndex);
-            const startY = padding + headerOffset;
-            const endY = totalHeight - padding;
-            decorElements.push(_jsx(Path, { d: `M ${centerX} ${startY} L ${centerX} ${endY}`, stroke: colorBorder, strokeWidth: lifelineWidth, strokeDasharray: "5,5", fill: "none", "data-element-type": "shape" }));
-            // 绘制生命线末端箭头（实心）
-            decorElements.push(...createArrowElements(centerX, endY, Math.PI / 2, 'triangle', colorBorder, 1, 10));
-        });
-    }
     // 绘制泳道标题
     if (showLaneHeader) {
         lanes.forEach((lane, laneIndex) => {
@@ -282,10 +272,6 @@ export const SequenceInteractionFlow = (props) => {
             });
             const nodeColor = getPaletteColor(options, [laneIndex]);
             const nodeThemeColors = getThemeColors({ colorPrimary: nodeColor }, options);
-            // 添加节点背景遮挡层，防止生命线虚线透过半透明节点显示
-            // 只在节点中心放置窄条遮挡生命线，避免圆角处露出白色背景
-            const maskStripWidth = lifelineWidth + 6;
-            decorElements.push(_jsx(Rect, { x: centerX - maskStripWidth / 2, y: y, width: maskStripWidth, height: itemHeight, fill: colorBg }));
             // 构造类似 hierarchy-tree 的 _originalIndex
             const originalIndex = [laneIndex, rowIndex];
             // 附加到数据上，确保 Item 组件能正确识别
@@ -322,6 +308,41 @@ export const SequenceInteractionFlow = (props) => {
         const centerX = getLaneCenterX(laneIndex);
         btnElements.push(_jsx(BtnAdd, { indexes: [laneIndex, childCount], x: centerX - BTN_HALF_SIZE, y: addNodeY }));
     });
+    // 绘制生命线（使用 mask 挖空节点区域，避免虚线穿透半透明节点）
+    if (showLifeline) {
+        // 预先按泳道分组节点，避免每条泳道都遍历全部节点
+        const nodeRectsByLane = new Map();
+        nodeLayoutById.forEach((layout) => {
+            let list = nodeRectsByLane.get(layout.laneIndex);
+            if (!list) {
+                list = [];
+                nodeRectsByLane.set(layout.laneIndex, list);
+            }
+            list.push({
+                x: layout.x,
+                y: layout.y,
+                width: layout.width,
+                height: layout.height,
+            });
+        });
+        lanes.forEach((_lane, laneIndex) => {
+            var _a;
+            const centerX = getLaneCenterX(laneIndex);
+            const startY = padding + headerOffset;
+            const endY = totalHeight - padding;
+            const laneNodeRects = (_a = nodeRectsByLane.get(laneIndex)) !== null && _a !== void 0 ? _a : [];
+            // 如果该泳道有节点，创建 mask 来挖空节点区域
+            let lifelineMaskAttr;
+            if (laneNodeRects.length > 0) {
+                const maskId = `lifeline-mask-${instanceId}-${laneIndex}`;
+                defsElements.push(_jsxs("mask", { id: maskId, maskUnits: "userSpaceOnUse", x: 0, y: 0, width: totalWidth, height: totalHeight, children: [_jsx(Rect, { x: 0, y: 0, width: totalWidth, height: totalHeight, fill: "white" }), laneNodeRects.map((rect) => (_jsx(Rect, { x: rect.x, y: rect.y - LIFELINE_MASK_GAP, width: rect.width, height: rect.height + LIFELINE_MASK_GAP * 2, fill: "black" })))] }));
+                lifelineMaskAttr = `url(#${maskId})`;
+            }
+            decorElements.push(_jsx(Path, { d: `M ${centerX} ${startY} L ${centerX} ${endY}`, stroke: colorBorder, strokeWidth: lifelineWidth, strokeDasharray: "5,5", fill: "none", "data-element-type": "shape", mask: lifelineMaskAttr }));
+            // 绘制生命线末端箭头（实心）
+            decorElements.push(...createArrowElements(centerX, endY, Math.PI / 2, 'triangle', colorBorder, 1, 10));
+        });
+    }
     // 添加新泳道按钮 (最右侧)
     const lastLaneRightX = getLaneCenterX(lanes.length - 1) + laneWidth / 2;
     const newLaneX = lanes.length > 0 ? lastLaneRightX + BTN_LANE_ADD_Gap : padding;

package/esm/designs/structures/sequence-timeline.d.ts

@@ -3,5 +3,6 @@ import type { BaseStructureProps } from './types';
 export interface SequenceTimelineProps extends BaseStructureProps {
     gap?: number;
     lineOffset?: number;
+    showStepLabels?: boolean;
 }
 export declare const SequenceTimeline: ComponentType<SequenceTimelineProps>;

package/esm/designs/structures/sequence-timeline.js

@@ -5,7 +5,7 @@ import { FlexLayout } from '../layouts/index.js';
 import { getColorPrimary, getPaletteColor, getPaletteColors } from '../utils/index.js';
 import { registerStructure } from './registry.js';
 export const SequenceTimeline = (props) => {
-    const { Title, Item, data, gap = 10, options } = props;
+    const { Title, Item, data, gap = 10, showStepLabels = true, options } = props;
     const { title, desc, items = [] } = data;
     const titleContent = Title ? _jsx(Title, { title: title, desc: desc }) : null;
     const colorPrimary = getColorPrimary(options);
@@ -41,7 +41,9 @@ export const SequenceTimeline = (props) => {
         const itemY = index * (itemBounds.height + gap);
         const nodeY = itemY + itemBounds.height / 2;
         const indexes = [index];
-        decorElements.push(_jsx(Text, { x: stepLabelX, y: nodeY, width: 70, fontSize: 18, fontWeight: "bold", alignHorizontal: "left", alignVertical: "middle", fill: palette[index % palette.length], children: `STEP ${index + 1}` }));
+        if (showStepLabels) {
+            decorElements.push(_jsx(Text, { x: stepLabelX, y: nodeY, width: 70, fontSize: 18, fontWeight: "bold", alignHorizontal: "left", alignVertical: "middle", fill: palette[index % palette.length], children: `STEP ${index + 1}` }));
+        }
         itemElements.push(_jsx(Item, { indexes: indexes, datum: item, data: data, x: itemX, y: itemY, positionH: "normal" }));
         decorElements.push(_jsx(Ellipse, { x: timelineX - nodeRadius, y: nodeY - nodeRadius, width: nodeRadius * 2, height: nodeRadius * 2, fill: palette[index % palette.length] }));
         btnElements.push(_jsx(BtnRemove, { indexes: indexes, x: itemX - btnBounds.width - 10, y: itemY + (itemBounds.height - btnBounds.height) / 2 }));

package/esm/exporter/png.js

@@ -12,8 +12,8 @@ import { exportToSVG } from './svg.js';
 export function exportToPNGString(svg_1) {
     return __awaiter(this, arguments, void 0, function* (svg, options = {}) {
         var _a;
-        const { dpr = (_a = globalThis.devicePixelRatio) !== null && _a !== void 0 ? _a : 2 } = options;
-        const node = yield exportToSVG(svg);
+        const { dpr = (_a = globalThis.devicePixelRatio) !== null && _a !== void 0 ? _a : 2, removeBackground = false } = options;
+        const node = yield exportToSVG(svg, { removeBackground });
         const { width, height } = getViewBox(node);
         return new Promise((resolve, reject) => {
             try {

package/esm/exporter/svg.js

@@ -9,6 +9,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { createElement, getElementByRole, getViewBox, setAttributes, setElementRole, traverse, } from '../utils/index.js';
 import { embedFonts } from './font.js';
+const VIEWBOX_CHANGE_TOLERANCE = 0.5;
 export function exportToSVGString(svg_1) {
     return __awaiter(this, arguments, void 0, function* (svg, options = {}) {
         const node = yield exportToSVG(svg, options);
@@ -16,11 +17,176 @@ export function exportToSVGString(svg_1) {
         return 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(str);
     });
 }
+function getExportViewBox(svg) {
+    if (svg.hasAttribute('viewBox'))
+        return getViewBox(svg);
+    const width = parseAbsoluteLength(svg.getAttribute('width'));
+    const height = parseAbsoluteLength(svg.getAttribute('height'));
+    if (width > 0 && height > 0) {
+        return { x: 0, y: 0, width, height };
+    }
+    const rect = svg.getBoundingClientRect();
+    if (rect.width > 0 && rect.height > 0) {
+        return { x: 0, y: 0, width: rect.width, height: rect.height };
+    }
+    return null;
+}
+function parseAbsoluteLength(value) {
+    if (!value)
+        return Number.NaN;
+    const trimmed = value.trim();
+    if (!trimmed)
+        return Number.NaN;
+    if (!/^[-+]?(?:\d+\.?\d*|\.\d+)(?:px)?$/.test(trimmed))
+        return Number.NaN;
+    return Number.parseFloat(trimmed);
+}
+function measureSpanContentHeight(span) {
+    const prevHeight = span.style.height;
+    const prevOverflow = span.style.overflow;
+    try {
+        span.style.height = 'max-content';
+        span.style.overflow = 'hidden';
+        void span.offsetHeight; // force reflow
+        return span.scrollHeight;
+    }
+    finally {
+        span.style.height = prevHeight;
+        span.style.overflow = prevOverflow;
+    }
+}
+function measureSpanContentWidth(span) {
+    const prevWidth = span.style.width;
+    const prevOverflow = span.style.overflow;
+    try {
+        span.style.width = 'max-content';
+        span.style.overflow = 'hidden';
+        void span.offsetWidth; // force reflow
+        return span.scrollWidth;
+    }
+    finally {
+        span.style.width = prevWidth;
+        span.style.overflow = prevOverflow;
+    }
+}
+// Returns [left, top, right, bottom] in SVG coordinates for a foreignObject,
+// accounting for flex alignment: bottom/center-aligned content can overflow,
+// and horizontally aligned content can overflow as well.
+function getFOContentBoundsInSVG(fo, content, toSVGCoord) {
+    const foRect = fo.getBoundingClientRect();
+    const foTopLeft = toSVGCoord(foRect.left, foRect.top);
+    const foBottomRight = toSVGCoord(foRect.right, foRect.bottom);
+    const foLeftSVG = foTopLeft.x;
+    const foTopSVG = foTopLeft.y;
+    const foRightSVG = foBottomRight.x;
+    const foBottomSVG = foBottomRight.y;
+    const foWidthSVG = foRightSVG - foLeftSVG;
+    const foHeightSVG = foBottomSVG - foTopSVG;
+    const svgUnitsPerClientPxY = foRect.height > 0 ? foHeightSVG / foRect.height : 1;
+    const svgUnitsPerClientPxX = foRect.width > 0 ? foWidthSVG / foRect.width : 1;
+    // Measure actual content dimensions
+    const realScrollHeight = measureSpanContentHeight(content);
+    const contentHeightSVG = realScrollHeight > 0
+        ? realScrollHeight * svgUnitsPerClientPxY
+        : foHeightSVG;
+    const realScrollWidth = measureSpanContentWidth(content);
+    const contentWidthSVG = realScrollWidth > 0 ? realScrollWidth * svgUnitsPerClientPxX : foWidthSVG;
+    const computedStyle = window.getComputedStyle(content);
+    const alignItems = computedStyle.alignItems;
+    const justifyContent = computedStyle.justifyContent;
+    // Calculate vertical bounds
+    let top, bottom;
+    if (alignItems === 'flex-end' || alignItems === 'end') {
+        top = foBottomSVG - contentHeightSVG;
+        bottom = foBottomSVG;
+    }
+    else if (alignItems === 'center') {
+        const overflowY = contentHeightSVG - foHeightSVG;
+        top = foTopSVG - overflowY / 2;
+        bottom = foBottomSVG + overflowY / 2;
+    }
+    else {
+        top = foTopSVG;
+        bottom = foTopSVG + contentHeightSVG;
+    }
+    // Calculate horizontal bounds
+    let left, right;
+    if (justifyContent === 'flex-end' ||
+        justifyContent === 'end' ||
+        justifyContent === 'right') {
+        left = foRightSVG - contentWidthSVG;
+        right = foRightSVG;
+    }
+    else if (justifyContent === 'center') {
+        const overflowX = contentWidthSVG - foWidthSVG;
+        left = foLeftSVG - overflowX / 2;
+        right = foRightSVG + overflowX / 2;
+    }
+    else {
+        left = foLeftSVG;
+        right = foLeftSVG + contentWidthSVG;
+    }
+    return [left, top, right, bottom];
+}
+/**
+ * Computes a viewBox that fully covers all foreignObject text content,
+ * accounting for overflow caused by flex alignment (bottom/center align
+ * can push content outside the foreignObject bounds).
+ */
+function computeFullViewBox(svg) {
+    const viewBox = getExportViewBox(svg);
+    if (!viewBox)
+        return null;
+    if (typeof svg.getScreenCTM !== 'function')
+        return null;
+    const screenCTM = svg.getScreenCTM();
+    if (!screenCTM)
+        return null;
+    const inverseCTM = screenCTM.inverse();
+    const toSVGCoord = (clientX, clientY) => {
+        const pt = svg.createSVGPoint();
+        pt.x = clientX;
+        pt.y = clientY;
+        return pt.matrixTransform(inverseCTM);
+    };
+    let minX = viewBox.x;
+    let minY = viewBox.y;
+    let maxX = viewBox.x + viewBox.width;
+    let maxY = viewBox.y + viewBox.height;
+    svg
+        .querySelectorAll('foreignObject')
+        .forEach((fo) => {
+        const content = fo.firstElementChild;
+        if (!content)
+            return;
+        const [left, top, right, bottom] = getFOContentBoundsInSVG(fo, content, toSVGCoord);
+        minX = Math.min(minX, left);
+        minY = Math.min(minY, top);
+        maxX = Math.max(maxX, right);
+        maxY = Math.max(maxY, bottom);
+    });
+    const newX = minX;
+    const newY = minY;
+    const newWidth = maxX - newX;
+    const newHeight = maxY - newY;
+    if (newWidth <= viewBox.width + VIEWBOX_CHANGE_TOLERANCE &&
+        newHeight <= viewBox.height + VIEWBOX_CHANGE_TOLERANCE &&
+        newX >= viewBox.x - VIEWBOX_CHANGE_TOLERANCE &&
+        newY >= viewBox.y - VIEWBOX_CHANGE_TOLERANCE)
+        return null;
+    return `${newX} ${newY} ${newWidth} ${newHeight}`;
+}
 export function exportToSVG(svg_1) {
     return __awaiter(this, arguments, void 0, function* (svg, options = {}) {
-        const { embedResources = true, removeIds = false } = options;
+        const { removeBackground = false, embedResources = true, removeIds = false, } = options;
         const clonedSVG = svg.cloneNode(true);
-        const { width, height } = getViewBox(svg);
+        if (typeof document !== 'undefined') {
+            const fullViewBox = computeFullViewBox(svg);
+            if (fullViewBox) {
+                clonedSVG.setAttribute('viewBox', fullViewBox);
+            }
+        }
+        const { width, height } = getViewBox(clonedSVG);
         setAttributes(clonedSVG, { width, height });
         if (removeIds) {
             inlineUseElements(clonedSVG);
@@ -30,6 +196,9 @@ export function exportToSVG(svg_1) {
             yield embedIcons(clonedSVG);
         }
         yield embedFonts(clonedSVG, embedResources);
+        if (removeBackground) {
+            removeSVGBackground(clonedSVG);
+        }
         cleanSVG(clonedSVG);
         return clonedSVG;
     });
@@ -284,6 +453,11 @@ function cleanSVG(svg) {
     removeUselessAttrs(svg);
     clearDataset(svg);
 }
+function removeSVGBackground(svg) {
+    svg.style.removeProperty('background-color');
+    const background = getElementByRole(svg, "background" /* ElementTypeEnum.Background */);
+    background === null || background === void 0 ? void 0 : background.remove();
+}
 function removeBtnGroup(svg) {
     const btnGroup = getElementByRole(svg, "btns-group" /* ElementTypeEnum.BtnsGroup */);
     btnGroup === null || btnGroup === void 0 ? void 0 : btnGroup.remove();

package/esm/exporter/types.d.ts

@@ -1,5 +1,10 @@
 export interface SVGExportOptions {
     type: 'svg';
+    /**
+     * 是否移除背景（SVG 背景样式 + 背景矩形）
+     * @default false
+     */
+    removeBackground?: boolean;
     /**
      * 是否将远程资源嵌入到 SVG 中
      * @default true
@@ -13,6 +18,11 @@ export interface SVGExportOptions {
 }
 export interface PNGExportOptions {
     type: 'png';
+    /**
+     * 是否移除背景（SVG 背景样式 + 背景矩形）
+     * @default false
+     */
+    removeBackground?: boolean;
     /**
      * 设备像素比，默认为浏览器的 devicePixelRatio
      * @default globalThis.devicePixelRatio || 2

package/esm/options/parser.js

@@ -10,17 +10,19 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { merge } from 'lodash-es';
-import { getItem, getStructure, getTemplate, Title, } from '../designs/index.js';
+import { getItem, getStructure, Title, } from '../designs/index.js';
 import { getPaletteColor } from '../renderer/index.js';
+import { getTemplate, resolveTemplateKey } from '../templates/registry.js';
 import { generateThemeColors, getTheme } from '../themes/index.js';
 import { isDarkColor, isNonNullableParsedDesignsOptions, parsePadding, } from '../utils/index.js';
 export function parseOptions(options) {
     const { container = '#container', padding = 0, template, design, theme, themeConfig, data } = options, restOptions = __rest(options, ["container", "padding", "template", "design", "theme", "themeConfig", "data"]);
+    const resolvedTemplate = template ? resolveTemplateKey(template) : undefined;
     const parsedContainer = typeof container === 'string'
         ? document.querySelector(container) || document.createElement('div')
         : container;
-    const templateOptions = template
-        ? getTemplate(template)
+    const templateOptions = resolvedTemplate
+        ? getTemplate(resolvedTemplate)
         : undefined;
     const mergedThemeConfig = merge({}, templateOptions === null || templateOptions === void 0 ? void 0 : templateOptions.themeConfig, themeConfig);
     const resolvedThemeConfig = theme || themeConfig || (templateOptions === null || templateOptions === void 0 ? void 0 : templateOptions.themeConfig)
@@ -35,11 +37,11 @@ export function parseOptions(options) {
         Object.assign(parsed, restTemplateOptions);
     }
     Object.assign(parsed, restOptions);
-    const parsedData = parseData(data, options.template);
+    const parsedData = parseData(data, resolvedTemplate);
     if (parsedData)
         parsed.data = parsedData;
-    if (template)
-        parsed.template = template;
+    if (resolvedTemplate)
+        parsed.template = resolvedTemplate;
     if ((templateOptions === null || templateOptions === void 0 ? void 0 : templateOptions.design) || design) {
         const designOptions = Object.assign(Object.assign({}, (resolvedThemeConfig
             ? Object.assign(Object.assign({}, options), { themeConfig: resolvedThemeConfig }) : options)), { data: parsedData || data });

package/esm/options/types.d.ts

@@ -4,8 +4,8 @@ import type { ThemeConfig } from '../themes';
 import type { Data, Padding, ParsedData } from '../types';
 import type { Path } from '../utils';
 export interface InfographicOptions {
-    /** 容器，可以是选择器或者 HTMLElement */
-    container?: string | HTMLElement;
+    /** 容器，可以是选择器、Element 或 ShadowRoot */
+    container?: string | Element | ShadowRoot;
     /** 宽度 */
     width?: number | string;
     /** 高度 */
@@ -34,7 +34,7 @@ export interface InfographicOptions {
     elements?: ElementProps[];
 }
 export interface ParsedInfographicOptions {
-    container: HTMLElement;
+    container: Element | ShadowRoot;
     width?: number | string;
     height?: number | string;
     padding?: Padding;

package/esm/renderer/renderer.js

@@ -47,7 +47,7 @@ export class Renderer {
                 });
             });
             try {
-                observer.observe(document, {
+                observer.observe(this.options.container, {
                     childList: true,
                     subtree: true,
                 });

package/esm/resource/loaders/search.js

@@ -13,7 +13,6 @@ import { loadImageBase64Resource } from './image.js';
 import { loadRemoteResource } from './remote.js';
 import { loadSVGResource } from './svg.js';
 const queryIcon = (query) => __awaiter(void 0, void 0, void 0, function* () {
-    var _a;
     try {
         const params = new URLSearchParams({ text: query, topK: '1' });
         const url = `${ICON_SERVICE_URL}?${params.toString()}`;
@@ -21,9 +20,9 @@ const queryIcon = (query) => __awaiter(void 0, void 0, void 0, function* () {
         if (!response.ok)
             return null;
         const result = yield response.json();
-        if (!(result === null || result === void 0 ? void 0 : result.status) || !Array.isArray((_a = result.data) === null || _a === void 0 ? void 0 : _a.data))
+        if (!(result === null || result === void 0 ? void 0 : result.success) || !Array.isArray(result.data))
             return null;
-        return result.data.data[0] || null;
+        return result.data[0] || null;
     }
     catch (error) {
         console.error(`Failed to query icon for "${query}":`, error);

package/esm/runtime/options.js

@@ -16,7 +16,7 @@ const createDefaultInteractions = () => [
 ];
 export const DEFAULT_OPTIONS = {
     padding: 20,
-    theme: 'light',
+    theme: 'default',
     themeConfig: {
         palette: 'antv',
     },

package/esm/syntax/index.js

@@ -13,6 +13,15 @@ import { mapWithSchema } from './mapper.js';
 import { parseSyntaxToAst } from './parser.js';
 import { parseRelationsNode } from './relations.js';
 import { DataSchema, DesignSchema, RootSchema, TemplateSchema, ThemeSchema, } from './schema.js';
+const ALLOWED_ROOT_KEYS = new Set([
+    'infographic',
+    'template',
+    'design',
+    'data',
+    'theme',
+    'width',
+    'height',
+]);
 function normalizeItems(items) {
     var _a;
     const seen = new Set();
@@ -33,6 +42,13 @@ function normalizeItems(items) {
     }
     return normalized.reverse();
 }
+function assignMissingNodeIds(items) {
+    items.forEach((item) => {
+        if (!item.id && item.label) {
+            item.id = item.label;
+        }
+    });
+}
 function resolveTemplate(node, errors) {
     if (!node)
         return undefined;
@@ -46,12 +62,42 @@ function resolveTemplate(node, errors) {
     }
     return undefined;
 }
+function inferTemplateFromBareFirstLine(entries, warnings) {
+    if ('infographic' in entries || 'template' in entries) {
+        return undefined;
+    }
+    const [firstEntry] = Object.entries(entries);
+    if (!firstEntry)
+        return undefined;
+    const [key, node] = firstEntry;
+    if (ALLOWED_ROOT_KEYS.has(key) || node.kind !== 'object') {
+        return undefined;
+    }
+    if (node.value !== undefined || Object.keys(node.entries).length > 0) {
+        return undefined;
+    }
+    warnings.push({
+        path: 'template',
+        line: node.line,
+        code: 'implicit_template',
+        message: 'Inferred template from a bare first line. Prefix it with "infographic" or "template" to make the syntax explicit.',
+        raw: key,
+    });
+    return {
+        template: key,
+        inferredKey: key,
+    };
+}
 export function parseSyntax(input) {
     var _a;
     const { ast, errors } = parseSyntaxToAst(input);
     const warnings = [];
     const options = {};
     const mergedEntries = Object.assign({}, ast.entries);
+    const inferredTemplate = inferTemplateFromBareFirstLine(ast.entries, warnings);
+    if (inferredTemplate) {
+        delete mergedEntries[inferredTemplate.inferredKey];
+    }
     const infographicNode = ast.entries.infographic;
     let templateFromInfographic;
     if (infographicNode && infographicNode.kind === 'object') {
@@ -62,17 +108,8 @@ export function parseSyntax(input) {
                 mergedEntries[key] = value;
         });
     }
-    const allowedRootKeys = new Set([
-        'infographic',
-        'template',
-        'design',
-        'data',
-        'theme',
-        'width',
-        'height',
-    ]);
     Object.keys(mergedEntries).forEach((key) => {
-        if (!allowedRootKeys.has(key)) {
+        if (!ALLOWED_ROOT_KEYS.has(key)) {
             errors.push({
                 path: key,
                 line: mergedEntries[key].line,
@@ -89,6 +126,9 @@ export function parseSyntax(input) {
     if (!options.template && templateFromInfographic) {
         options.template = templateFromInfographic;
     }
+    if (!options.template && inferredTemplate) {
+        options.template = inferredTemplate.template;
+    }
     const designNode = mergedEntries.design;
     if (designNode) {
         const design = mapWithSchema(designNode, DesignSchema, 'design', errors);
@@ -111,6 +151,12 @@ export function parseSyntax(input) {
             const parsed = parseRelationsNode(relationsNode, errors, 'data.relations');
             if (parsed.relations.length > 0 || parsed.items.length > 0) {
                 const current = ((_a = options.data) !== null && _a !== void 0 ? _a : {});
+                if (Array.isArray(current.items)) {
+                    assignMissingNodeIds(current.items);
+                }
+                if (Array.isArray(current.nodes)) {
+                    assignMissingNodeIds(current.nodes);
+                }
                 // 优先使用已存在的数据列表 (sequences, lists, etc.)
                 const dataKeys = Object.keys(DataSchema.fields).filter((key) => key !== 'items' && key !== 'relations');
                 let hasStructuredData = false;

package/esm/syntax/mapper.js

@@ -5,11 +5,20 @@ function createValueNode(value, line) {
 }
 const HEX_COLOR_PATTERN = /^(#[0-9a-f]{8}|#[0-9a-f]{6}|#[0-9a-f]{4}|#[0-9a-f]{3})/i;
 const FUNCTION_COLOR_PATTERN = /^((?:rgb|rgba|hsl|hsla)\([^)]*\))/i;
+function normalizeBooleanLiteral(value) {
+    const trimmed = value.trim();
+    if (/^true$/i.test(trimmed))
+        return 'true';
+    if (/^false$/i.test(trimmed))
+        return 'false';
+    return undefined;
+}
 function parseScalar(value) {
     const trimmed = value.trim();
-    if (trimmed === 'true')
+    const normalizedBoolean = normalizeBooleanLiteral(trimmed);
+    if (normalizedBoolean === 'true')
         return true;
-    if (trimmed === 'false')
+    if (normalizedBoolean === 'false')
         return false;
     if (/^-?\d+(\.\d+)?$/.test(trimmed))
         return parseFloat(trimmed);
@@ -175,11 +184,12 @@ export function mapWithSchema(node, schema, path, errors) {
                 addError(errors, node, path, 'schema_mismatch', 'Expected boolean value.');
                 return undefined;
             }
-            if (value !== 'true' && value !== 'false') {
+            const normalizedBoolean = normalizeBooleanLiteral(value);
+            if (!normalizedBoolean) {
                 addError(errors, node, path, 'invalid_value', 'Invalid boolean value.', value);
                 return undefined;
             }
-            return value === 'true';
+            return normalizedBoolean === 'true';
         }
         case 'enum': {
             const value = readScalar(node);
@@ -187,11 +197,15 @@ export function mapWithSchema(node, schema, path, errors) {
                 addError(errors, node, path, 'schema_mismatch', 'Expected enum value.');
                 return undefined;
             }
-            if (!schema.values.includes(value)) {
+            const normalizedBoolean = normalizeBooleanLiteral(value);
+            const enumValue = normalizedBoolean && schema.values.includes(normalizedBoolean)
+                ? normalizedBoolean
+                : value;
+            if (!schema.values.includes(enumValue)) {
                 addError(errors, node, path, 'invalid_value', 'Invalid enum value.', value);
                 return undefined;
             }
-            return value;
+            return enumValue;
         }
         case 'array': {
             if (node.kind === 'array') {