@airalogy/aimd-renderer 2.5.0 → 2.6.0

package/dist/vue/index.d.ts

@@ -1,7 +1,7 @@
 /**
  * Vue rendering exports
  */
-export { type AimdComponentRenderer, type AimdRendererContext, type AssetResolver, createAssetRenderer, createCodeBlockRenderer, createComponentRenderer, createEmbeddedRenderer, createMermaidRenderer, createStepCardRenderer, type ElementRenderer, hastToVue, renderToVNodes, type AimdStepCardRendererOptions, type ShikiHighlighter, type VueRendererOptions, } from './vue-renderer';
+export { type AimdComponentRenderer, type AimdRendererContext, type AssetResolver, createAssetRenderer, createCodeBlockRenderer, createComponentRenderer, createEmbeddedRenderer, createMermaidRenderer, createStepCardRenderer, loadShikiHighlighter, type CodeBlockRendererOptions, type ElementRenderer, hastToVue, renderToVNodes, type LoadShikiHighlighterOptions, type AimdStepCardRendererOptions, type ShikiHighlighter, type VueRendererOptions, } from './vue-renderer';
 export { renderToVue, createRenderer, defaultRenderer, } from '../common/processor';
 export { createAimdRendererMessages, DEFAULT_AIMD_RENDERER_LOCALE, resolveAimdRendererLocale, } from '../locales';
 export type { RenderContext, RenderMode, ProcessorOptions, } from '@airalogy/aimd-core/types';

package/dist/vue/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/vue/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EACL,KAAK,qBAAqB,EAC1B,KAAK,mBAAmB,EACxB,KAAK,aAAa,EAClB,mBAAmB,EACnB,uBAAuB,EACvB,uBAAuB,EACvB,sBAAsB,EACtB,qBAAqB,EACrB,sBAAsB,EACtB,KAAK,eAAe,EACpB,SAAS,EACT,cAAc,EACd,KAAK,2BAA2B,EAChC,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,GACxB,MAAM,gBAAgB,CAAA;AAEvB,OAAO,EACL,WAAW,EACX,cAAc,EACd,eAAe,GAChB,MAAM,qBAAqB,CAAA;AAE5B,OAAO,EACL,0BAA0B,EAC1B,4BAA4B,EAC5B,yBAAyB,GAC1B,MAAM,YAAY,CAAA;AAEnB,YAAY,EACV,aAAa,EACb,UAAU,EACV,gBAAgB,GACjB,MAAM,2BAA2B,CAAA;AAElC,YAAY,EAAE,sBAAsB,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AACpG,YAAY,EACV,uBAAuB,EACvB,kBAAkB,EAClB,oBAAoB,EACpB,yBAAyB,GAC1B,MAAM,YAAY,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/vue/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EACL,KAAK,qBAAqB,EAC1B,KAAK,mBAAmB,EACxB,KAAK,aAAa,EAClB,mBAAmB,EACnB,uBAAuB,EACvB,uBAAuB,EACvB,sBAAsB,EACtB,qBAAqB,EACrB,sBAAsB,EACtB,oBAAoB,EACpB,KAAK,wBAAwB,EAC7B,KAAK,eAAe,EACpB,SAAS,EACT,cAAc,EACd,KAAK,2BAA2B,EAChC,KAAK,2BAA2B,EAChC,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,GACxB,MAAM,gBAAgB,CAAA;AAEvB,OAAO,EACL,WAAW,EACX,cAAc,EACd,eAAe,GAChB,MAAM,qBAAqB,CAAA;AAE5B,OAAO,EACL,0BAA0B,EAC1B,4BAA4B,EAC5B,yBAAyB,GAC1B,MAAM,YAAY,CAAA;AAEnB,YAAY,EACV,aAAa,EACb,UAAU,EACV,gBAAgB,GACjB,MAAM,2BAA2B,CAAA;AAElC,YAAY,EAAE,sBAAsB,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AACpG,YAAY,EACV,uBAAuB,EACvB,kBAAkB,EAClB,oBAAoB,EACpB,yBAAyB,GAC1B,MAAM,YAAY,CAAA"}

package/dist/vue/vue-renderer.d.ts

@@ -97,6 +97,16 @@ export interface ShikiHighlighter {
         lang: string;
         theme: string;
     }) => string;
+    codeToTokensBase?: (code: string, options: {
+        lang: string;
+        theme: string;
+    }) => Array<Array<{
+        content: string;
+        color?: string;
+        bgColor?: string;
+        fontStyle?: number;
+        htmlStyle?: string | Record<string, string>;
+    }>>;
     codeToTokensWithThemes?: (code: string, options: {
         lang: string;
         themes: Record<string, string>;
@@ -107,12 +117,23 @@ export interface ShikiHighlighter {
         }>;
     }>>;
 }
+export interface CodeBlockRendererOptions {
+    theme?: string;
+    lineNumbers?: boolean;
+    wrap?: boolean;
+    className?: string;
+}
+export interface LoadShikiHighlighterOptions {
+    themes?: string[];
+    langs?: string[];
+}
+export declare function loadShikiHighlighter(options?: LoadShikiHighlighterOptions): Promise<ShikiHighlighter>;
 /**
  * Create code block element renderer with Shiki support
  * @param highlighter - Shiki highlighter instance (can be reactive ref)
  * @param defaultTheme - Default theme to use
  */
-export declare function createCodeBlockRenderer(highlighter: ShikiHighlighter | null | (() => ShikiHighlighter | null), defaultTheme?: string): ElementRenderer;
+export declare function createCodeBlockRenderer(highlighter: ShikiHighlighter | null | (() => ShikiHighlighter | null), optionsOrTheme?: string | CodeBlockRendererOptions): ElementRenderer;
 /**
  * Create Mermaid diagram element renderer
  * @param MermaidComponent - Vue component to render Mermaid diagrams

package/dist/vue/vue-renderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vue-renderer.d.ts","sourceRoot":"","sources":["../../src/vue/vue-renderer.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"vue-renderer.d.ts","sourceRoot":"","sources":["../../src/vue/vue-renderer.ts"],"names":[],"mappings":"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"}

package/dist/vue.js

@@ -1,17 +1,18 @@
-import { D as a, c as d, f as s, g as n, h as t, i as o, j as R, k as c, l as m, m as A, n as E, o as l, q as i, e as C } from "./processor-B2mByErv.js";
+import { D as a, c as s, f as d, g as n, h as t, i as o, j as R, k as c, l as i, m as l, n as m, o as A, q as E, s as h, e as g } from "./processor-CHbNEcN8.js";
 export {
   a as DEFAULT_AIMD_RENDERER_LOCALE,
-  d as createAimdRendererMessages,
-  s as createAssetRenderer,
+  s as createAimdRendererMessages,
+  d as createAssetRenderer,
   n as createCodeBlockRenderer,
   t as createComponentRenderer,
   o as createEmbeddedRenderer,
   R as createMermaidRenderer,
   c as createRenderer,
-  m as createStepCardRenderer,
-  A as defaultRenderer,
-  E as hastToVue,
-  l as renderToVNodes,
-  i as renderToVue,
-  C as resolveAimdRendererLocale
+  i as createStepCardRenderer,
+  l as defaultRenderer,
+  m as hastToVue,
+  A as loadShikiHighlighter,
+  E as renderToVNodes,
+  h as renderToVue,
+  g as resolveAimdRendererLocale
 };

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@airalogy/aimd-renderer",
   "type": "module",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "description": "AIMD (Airalogy Markdown) rendering engines for HTML and Vue",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
-    "url": "https://github.com/airalogy/aimd.git",
-    "directory": "packages/aimd-renderer"
+    "url": "https://github.com/airalogy/airalogy.git",
+    "directory": "packages/npm/aimd-renderer"
   },
   "bugs": {
-    "url": "https://github.com/airalogy/aimd/issues"
+    "url": "https://github.com/airalogy/airalogy/issues"
   },
-  "homepage": "https://github.com/airalogy/aimd/tree/main/packages/aimd-renderer#readme",
+  "homepage": "https://github.com/airalogy/airalogy/tree/main/packages/npm/aimd-renderer#readme",
   "keywords": [
     "aimd",
     "markdown",
@@ -64,7 +64,7 @@
     "shiki": "^2.5.0",
     "unified": "^11.0.5",
     "vfile": "^6.0.3",
-    "@airalogy/aimd-core": "^2.6.0"
+    "@airalogy/aimd-core": "^2.8.0"
   },
   "devDependencies": {
     "@types/node": "^24.3.0",

package/src/__tests__/renderer.test.ts

@@ -9,7 +9,7 @@ import {
   createRenderer,
 } from '../common/processor'
 import { getFinalIndent, parseFieldTag } from '../index'
-import { createStepCardRenderer } from '../vue/vue-renderer'
+import { createCodeBlockRenderer, createStepCardRenderer } from '../vue/vue-renderer'
 
 function findVNodeByType(node: any, expectedType: string): any | null {
   if (!node || typeof node !== 'object') {
@@ -149,6 +149,38 @@ describe('parseAndExtract', () => {
     expect(fields.var).toContain('age')
     expect(fields.step.length).toBeGreaterThan(0)
   })
+
+  it('extracts multiline var tables with object-list defaults', () => {
+    const content = `{{var|monitoring_sites: list[MonitoringSite] = [
+      {"site_id": "S01", "latitude": 30.0, "longitude": 120.0, "elevation_m": 128.0},
+      {"site_id": "S02", "latitude": 30.1, "longitude": 120.1, "elevation_m": 82.0}
+    ],
+    title = "Monitoring sites",
+    subvars = [
+      var(site_id: str, title = "Site ID"),
+      var(latitude: float, title = "Latitude"),
+      var(longitude: float, title = "Longitude"),
+      var(elevation_m: float, title = "Elevation")
+    ]
+  }}`
+    const fields = parseAndExtract(content)
+
+    expect(fields.var_table[0]).toMatchObject({
+      id: 'monitoring_sites',
+      title: 'Monitoring sites',
+      type_annotation: 'list[MonitoringSite]',
+      default: [
+        { site_id: 'S01', latitude: 30, longitude: 120, elevation_m: 128 },
+        { site_id: 'S02', latitude: 30.1, longitude: 120.1, elevation_m: 82 },
+      ],
+    })
+    expect(fields.var_table[0]?.subvars.map(subvar => subvar.id)).toEqual([
+      'site_id',
+      'latitude',
+      'longitude',
+      'elevation_m',
+    ])
+  })
 })
 
 // ---------------------------------------------------------------------------
@@ -168,6 +200,51 @@ describe('renderToHtmlSync', () => {
     expect(html).toContain('temperature')
   })
 
+  it('renders AIMD var field display metadata', () => {
+    const { html, fields } = renderToHtmlSync('{{var|record_date: str, title="Record date", description="ISO date", examples=["2026-05-26", "2026-05-27"]}}')
+    expect(fields.var_definitions?.[0]?.title).toBe('Record date')
+    expect(fields.var_definitions?.[0]?.description).toBe('ISO date')
+    expect(fields.var_definitions?.[0]?.examples).toEqual(['2026-05-26', '2026-05-27'])
+    expect(html).toContain('data-aimd-title="Record date"')
+    expect(html).toContain('data-aimd-description="ISO date"')
+    expect(html).toContain('data-aimd-examples="2026-05-26, 2026-05-27"')
+    expect(html).toContain('Record date')
+    expect(html).toContain('record_date')
+    expect(html).toContain('ISO date')
+    expect(html).toContain('aria-label="ISO date')
+    expect(html).not.toContain('title="ISO date')
+    expect(html).not.toContain('aimd-field__description')
+    expect(html).toContain('aimd-field__metadata-popover')
+    expect(html).toContain('aimd-field__metadata-examples')
+    expect(html).toContain('aimd-field__metadata-example')
+    expect(html).toContain('tabindex="0"')
+    expect(html).toContain('2026-05-26')
+  })
+
+  it('renders AIMD var_table and column display metadata', () => {
+    const { html, fields } = renderToHtmlSync('{{var_table|samples, title="Samples", description="Measured rows", examples=["S-001 row"], subvars=[var(sample_id: str, title="Sample ID", description="Tube identifier", examples=["S-001"])]}}')
+    expect(fields.var_table[0]?.title).toBe('Samples')
+    expect(fields.var_table[0]?.description).toBe('Measured rows')
+    expect(fields.var_table[0]?.examples).toEqual(['S-001 row'])
+    expect(fields.var_table[0]?.subvars[0]?.title).toBe('Sample ID')
+    expect(fields.var_table[0]?.subvars[0]?.examples).toEqual(['S-001'])
+    expect(html).toContain('Samples')
+    expect(html).toContain('samples')
+    expect(html).toContain('Measured rows')
+    expect(html).toContain('S-001 row')
+    expect(html).toContain('data-column-id="sample_id"')
+    expect(html).toContain('Sample ID')
+    expect(html).toContain('Tube identifier')
+    expect(html).toContain('aria-label="Measured rows')
+    expect(html).toContain('aria-label="Tube identifier')
+    expect(html).not.toContain('title="Measured rows')
+    expect(html).not.toContain('title="Tube identifier')
+    expect(html).not.toContain('aimd-field__description')
+    expect(html).toContain('aimd-field__metadata-popover')
+    expect(html).toContain('aimd-field__metadata-example')
+    expect(html).toContain('S-001')
+  })
+
   it('returns extracted fields alongside HTML', () => {
     const { fields } = renderToHtmlSync('{{step|wash}} and {{check|verify}}')
     expect(fields.step.length).toBeGreaterThan(0)
@@ -201,6 +278,31 @@ describe('renderToHtmlSync', () => {
     expect(html).toContain('Answer: true')
   })
 
+  it('extracts true/false option followups', () => {
+    const { fields } = renderToHtmlSync(
+      [
+        '```quiz',
+        'id: q_true_false_followups',
+        'type: true_false',
+        'stem: "Was precipitate observed?"',
+        'options:',
+        '  - key: true',
+        '    text: "Yes"',
+        '    followups:',
+        '      - key: color',
+        '        type: str',
+        '        title: Color',
+        '  - key: false',
+        '    text: "No"',
+        '```',
+      ].join('\n'),
+    )
+
+    expect(fields.quiz[0].options?.[0]?.followups).toEqual([
+      { key: 'color', type: 'str', required: true, title: 'Color' },
+    ])
+  })
+
   it('supports host custom element renderers for AIMD nodes', () => {
     const { html } = renderToHtmlSync(
       "{{step|verify, 2, title='Verify Output', subtitle='Cross-check', check=True, result=True}}\n\nStep body content.",
@@ -303,6 +405,94 @@ describe('renderToHtmlSync', () => {
 })
 
 describe('renderToVue', () => {
+  it('renders code blocks with line numbers and wrapping classes', async () => {
+    const { nodes } = await renderToVue(
+      '```json\n{\n  "model":"qwen3.6-flash","enable_search":true\n}\n```',
+      {
+        elementRenderers: {
+          pre: createCodeBlockRenderer(null, {
+            lineNumbers: true,
+            wrap: true,
+          }),
+        },
+      },
+    )
+
+    const pre = findVNodeByType(nodes[0], 'pre') as any
+    expect(pre).toBeTruthy()
+    expect(pre.props.class).toContain('aimd-code-block')
+    expect(pre.props.class).toContain('aimd-code-block--line-numbers')
+    expect(pre.props.class).toContain('aimd-code-block--wrap')
+    expect(pre.props['data-lang']).toBe('json')
+    const code = findVNodeByType(pre, 'code') as any
+    expect(code.children).toHaveLength(3)
+    expect(code.children[1].children[1].props.style['--aimd-code-wrap-indent']).toBe('2ch')
+    expect(collectVNodeText(pre)).toContain('1')
+    expect(collectVNodeText(pre)).toContain('qwen3.6-flash')
+  })
+
+  it('keeps blank code lines visible without adding an extra line for the trailing markdown fence newline', async () => {
+    const { nodes } = await renderToVue(
+      '```json\n{\n\n  "model": "qwen3.6-flash"\n}\n```',
+      {
+        elementRenderers: {
+          pre: createCodeBlockRenderer(null, {
+            lineNumbers: true,
+            wrap: true,
+          }),
+        },
+      },
+    )
+
+    const pre = findVNodeByType(nodes[0], 'pre') as any
+    const code = findVNodeByType(pre, 'code') as any
+    expect(code.children).toHaveLength(4)
+    expect(code.children[1].children[1].children).toBe('\u00a0')
+    expect(code.children[2].children[1].props.style['--aimd-code-wrap-indent']).toBe('2ch')
+  })
+
+  it('uses Shiki token output when a highlighter is available', async () => {
+    const highlighter = {
+      codeToHtml: (code: string) => code,
+      codeToTokensBase: () => [
+        [
+          { content: '  ', color: '#24292e' },
+          { content: '"model"', color: '#005cc5' },
+        ],
+      ],
+    }
+    const { nodes } = await renderToVue('```json\n  "model"\n```', {
+      elementRenderers: {
+        pre: createCodeBlockRenderer(highlighter, {
+          lineNumbers: true,
+          wrap: true,
+        }),
+      },
+    })
+
+    const pre = findVNodeByType(nodes[0], 'pre') as any
+    const code = findVNodeByType(pre, 'code') as any
+    const tokenSpans = code.children[0].children[1].children
+    expect(tokenSpans[0].props.style).toEqual({ color: '#24292e' })
+    expect(tokenSpans[1].props.style).toEqual({ color: '#005cc5' })
+    expect(tokenSpans[1].children).toBe('"model"')
+  })
+
+  it('keeps the legacy plain pre fallback when called with a theme string and no highlighter', async () => {
+    const { nodes } = await renderToVue('```json\n{"model":"qwen"}\n```', {
+      elementRenderers: {
+        pre: createCodeBlockRenderer(null, 'github-light'),
+      },
+    })
+
+    const pre = findVNodeByType(nodes[0], 'pre') as any
+    expect(pre.props.class).toBe('language-json')
+    expect(pre.props.class).not.toContain('aimd-code-block')
+    const code = findVNodeByType(pre, 'code') as any
+    expect(code.props.class).toBe('language-json')
+    expect(code.children).toBe('{"model":"qwen"}')
+  })
+
   it('renders host-ready step cards with grouped body content', async () => {
     const { nodes } = await renderToVue(
       "{{step|verify, 2, title='Verify Output', subtitle='Cross-check', check=True}}\n\nStep body content.",

package/src/common/processor.ts

@@ -512,6 +512,14 @@ import remarkRehype from "remark-rehype"
 import { unified } from "unified"
 
 import { protectAimdInlineTemplates, remarkAimd } from "@airalogy/aimd-core/parser"
+import {
+  formatAimdExampleValue,
+  formatAimdExamples,
+  getAimdFieldDescription,
+  getAimdFieldDisplayLabel,
+  getAimdFieldExamples,
+  getAimdFieldTitle,
+} from "@airalogy/aimd-core/utils"
 import {
   createAimdRendererMessages,
   getAimdRendererQuizTypeLabel,
@@ -790,6 +798,121 @@ function buildScaleBandChildren(quizNode: AimdQuizNode): Array<Element | HastTex
   } as Element]
 }
 
+function createTextNode(value: string): HastText {
+  return { type: "text", value }
+}
+
+interface FieldMetadataHelp {
+  tooltip: string
+  description?: string
+  examples: string[]
+}
+
+function getFieldHelpText(definition: { kwargs?: Record<string, unknown> } | undefined): FieldMetadataHelp {
+  const description = getAimdFieldDescription(definition)
+  const examples = getAimdFieldExamples(definition)
+    .map(formatAimdExampleValue)
+    .map(example => example.trim())
+    .filter(Boolean)
+  const exampleText = examples.length > 0 ? `e.g. ${examples.join(", ")}` : undefined
+  const tooltipLines = [description, exampleText].filter((value): value is string => Boolean(value))
+
+  return {
+    tooltip: tooltipLines.join("\n"),
+    description,
+    examples,
+  }
+}
+
+function createFieldMetadataPopover(help: FieldMetadataHelp): Element | null {
+  if (!help.description && help.examples.length === 0) {
+    return null
+  }
+  const children: Array<Element | HastText> = []
+  if (help.description) {
+    children.push({
+      type: "element",
+      tagName: "span",
+      properties: { className: ["aimd-field__metadata-popover-line"] },
+      children: [createTextNode(help.description)],
+    } as Element)
+  }
+  if (help.examples.length > 0) {
+    children.push({
+      type: "element",
+      tagName: "span",
+      properties: { className: ["aimd-field__metadata-examples"] },
+      children: [
+        {
+          type: "element",
+          tagName: "span",
+          properties: { className: ["aimd-field__metadata-examples-label"] },
+          children: [createTextNode("e.g.")],
+        } as Element,
+        ...help.examples.map((example) => ({
+          type: "element",
+          tagName: "span",
+          properties: { className: ["aimd-field__metadata-example"] },
+          children: [createTextNode(example)],
+        } as Element)),
+      ],
+    } as Element)
+  }
+  return {
+    type: "element",
+    tagName: "span",
+    properties: { className: ["aimd-field__metadata-popover"], role: "tooltip" },
+    children,
+  } as Element
+}
+
+function createFieldNameElement(id: string, definition: { kwargs?: Record<string, unknown> } | undefined): Element {
+  const displayTitle = getAimdFieldDisplayLabel(id, definition)
+  const hasCustomTitle = getAimdFieldTitle(definition) !== undefined && displayTitle !== id
+  const help = getFieldHelpText(definition)
+  const hasHelp = Boolean(help.description) || help.examples.length > 0
+  const className = ["aimd-field__name"]
+  if (hasCustomTitle || hasHelp) {
+    className.push("aimd-field__name--with-metadata")
+  }
+  if (hasHelp) {
+    className.push("aimd-field__metadata-host")
+  }
+  const children: Array<Element | HastText> = [
+    {
+      type: "element",
+      tagName: "span",
+      properties: { className: ["aimd-field__title"] },
+      children: [createTextNode(displayTitle)],
+    } as Element,
+  ]
+
+  if (hasCustomTitle) {
+    children.push({
+      type: "element",
+      tagName: "span",
+      properties: { className: ["aimd-field__key"] },
+      children: [createTextNode(id)],
+    } as Element)
+  }
+
+  const popover = createFieldMetadataPopover(help)
+  if (popover) {
+    children.push(popover)
+  }
+
+  return {
+    type: "element",
+    tagName: "span",
+    properties: cleanProperties({
+      className,
+      tabIndex: hasHelp ? 0 : undefined,
+      "aria-label": help.tooltip || undefined,
+    }),
+    children,
+  } as Element
+}
+
 // ---------------------------------------------------------------------------
 // AIMD handler (remark-rehype custom handler)
 // ---------------------------------------------------------------------------
@@ -968,23 +1091,18 @@ function createAimdHandler(options: AimdRendererOptions = {}) {
       children: [{ type: "text", value: `[${refs.join(", ")}]` }],
     } as Element)
   }
-  else if (fieldType === "var") {
-    // Variable: type label + id + optional type annotation
-    const definition = "definition" in node ? node.definition : undefined
-    children.push(
+	  else if (fieldType === "var") {
+	    // Variable: type label + id + optional type annotation
+	    const definition = "definition" in node ? node.definition : undefined
+	    children.push(
       {
         type: "element",
         tagName: "span",
-        properties: { className: ["aimd-field__scope"] },
-        children: [{ type: "text", value: getAimdRendererScopeLabel("var", messages) }],
-      } as Element,
-      {
-        type: "element",
-        tagName: "span",
-        properties: { className: ["aimd-field__name"] },
-        children: [{ type: "text", value: id }],
-      } as Element,
-    )
+	        properties: { className: ["aimd-field__scope"] },
+	        children: [{ type: "text", value: getAimdRendererScopeLabel("var", messages) }],
+	      } as Element,
+	      createFieldNameElement(id, definition),
+	    )
     if (definition?.type) {
       children.push({
         type: "element",
@@ -994,11 +1112,13 @@ function createAimdHandler(options: AimdRendererOptions = {}) {
       } as Element)
     }
   }
-  else if (fieldType === "var_table") {
-    // var_table: render header + table preview
-    const columns = "columns" in node ? (node as any).columns as string[] : []
-    children.push(
-      {
+	  else if (fieldType === "var_table") {
+	    // var_table: render header + table preview
+	    const columns = "columns" in node ? (node as any).columns as string[] : []
+	    const definition = "definition" in node ? node.definition : undefined
+	    const subvarDefs = definition?.subvars
+	    children.push(
+	      {
         type: "element",
         tagName: "div",
         properties: { className: ["aimd-field__header"] },
@@ -1006,17 +1126,12 @@ function createAimdHandler(options: AimdRendererOptions = {}) {
           {
             type: "element",
             tagName: "span",
-            properties: { className: ["aimd-field__scope"] },
-            children: [{ type: "text", value: getAimdRendererScopeLabel("var_table", messages) }],
-          } as Element,
-          {
-            type: "element",
-            tagName: "span",
-            properties: { className: ["aimd-field__name"] },
-            children: [{ type: "text", value: id }],
-          } as Element,
-        ],
-      } as Element,
+	            properties: { className: ["aimd-field__scope"] },
+	            children: [{ type: "text", value: getAimdRendererScopeLabel("var_table", messages) }],
+	          } as Element,
+	          createFieldNameElement(id, definition),
+	        ],
+	      } as Element,
     )
     if (columns && columns.length > 0) {
       children.push({
@@ -1033,12 +1148,14 @@ function createAimdHandler(options: AimdRendererOptions = {}) {
                 type: "element",
                 tagName: "tr",
                 properties: {},
-                children: columns.map(col => ({
-                  type: "element",
-                  tagName: "th",
-                  properties: {},
-                  children: [{ type: "text", value: col }],
-                } as Element)),
+	                children: columns.map(col => ({
+	                  type: "element",
+	                  tagName: "th",
+	                  properties: cleanProperties({
+	                    "data-column-id": col,
+	                  }),
+	                  children: [createFieldNameElement(col, subvarDefs?.[col])],
+	                } as Element)),
               } as Element,
             ],
           } as Element,
@@ -1242,14 +1359,29 @@ function createAimdHandler(options: AimdRendererOptions = {}) {
   }
 
   // Build properties
-  const properties: Properties = {
-    "className": [baseClass, modifierClass],
-    "data-aimd-type": node.fieldType,
+	  const properties: Properties = {
+	    "className": [baseClass, modifierClass],
+	    "data-aimd-type": node.fieldType,
     "data-aimd-id": node.id,
     "data-aimd-scope": node.scope,
     "data-aimd-raw": node.raw,
-    "data-aimd-json": aimdJson,
-  }
+	    "data-aimd-json": aimdJson,
+	  }
+
+	  if ((node.fieldType === "var" || node.fieldType === "var_table") && "definition" in node) {
+	    const title = getAimdFieldTitle(node.definition)
+	    const description = getAimdFieldDescription(node.definition)
+	    const examples = formatAimdExamples(getAimdFieldExamples(node.definition))
+	    if (title) {
+	      properties["data-aimd-title"] = title
+	    }
+	    if (description) {
+	      properties["data-aimd-description"] = description
+	    }
+	    if (examples) {
+	      properties["data-aimd-examples"] = examples
+	    }
+	  }
 
   // Add reference href
   if (isRef) {