@airalogy/aimd-renderer 2.5.0 → 2.7.0

package/src/__tests__/renderer.test.ts

@@ -1,4 +1,6 @@
-import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { h } from 'vue'
+import { describe, expect, it, vi } from 'vitest'
 
 import { resolveQuizPreviewOptions } from '../common/quiz-preview'
 import {
@@ -9,7 +11,12 @@ import {
   createRenderer,
 } from '../common/processor'
 import { getFinalIndent, parseFieldTag } from '../index'
-import { createStepCardRenderer } from '../vue/vue-renderer'
+import {
+  createReadonlyRecordRenderContext,
+  normalizeRecordRenderValue,
+  renderReadonlyRecordToVue,
+} from '../vue/readonly-record-renderer'
+import { createCodeBlockRenderer, createStepCardRenderer } from '../vue/vue-renderer'
 
 function findVNodeByType(node: any, expectedType: string): any | null {
   if (!node || typeof node !== 'object') {
@@ -149,6 +156,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',
+    ])
+  })
 })
 
 // ---------------------------------------------------------------------------
@@ -162,12 +201,87 @@ describe('renderToHtmlSync', () => {
     expect(html).toContain('Hello')
   })
 
+  it('renders CriticMarkup review marks to semantic HTML', () => {
+    const { html } = renderToHtmlSync('Add {++new++}, delete {--old--}, replace {~~old~>new~~}, comment {>>check units<<}, highlight {==important==}.')
+
+    expect(html).toContain('<ins class="aimd-critic aimd-critic--addition"')
+    expect(html).toContain('data-critic-kind="addition"')
+    expect(html).toContain('<del class="aimd-critic aimd-critic--deletion"')
+    expect(html).toContain('data-critic-kind="deletion"')
+    expect(html).toContain('<span class="aimd-critic aimd-critic--substitution"')
+    expect(html).toContain('aimd-critic--substitution-old')
+    expect(html).toContain('aimd-critic--substitution-new')
+    expect(html).toContain('<span class="aimd-critic aimd-critic--comment"')
+    expect(html).toContain('check units')
+    expect(html).toContain('<mark class="aimd-critic aimd-critic--highlight"')
+    expect(html).toContain('important')
+    expect(html).not.toContain('{++new++}')
+    expect(html).not.toContain('{--old--}')
+    expect(html).not.toContain('{~~old~>new~~}')
+    expect(html).not.toContain('{>>check units<<}')
+    expect(html).not.toContain('{==important==}')
+  })
+
+  it('does not parse CriticMarkup inside inline code', () => {
+    const { html } = renderToHtmlSync('Literal `{++not a mark++}` and `{~~old~>new~~}` remain code.')
+
+    expect(html).toContain('<code>{++not a mark++}</code>')
+    expect(html).toContain('<code>{~~old~>new~~}</code>')
+    expect(html).not.toContain('aimd-critic--addition')
+    expect(html).not.toContain('aimd-critic--substitution')
+  })
+
   it('renders AIMD var fields', () => {
     const { html, fields } = renderToHtmlSync('{{var|temperature}}')
     expect(fields.var).toContain('temperature')
     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 +315,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 +442,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.",
@@ -353,6 +580,212 @@ describe('renderToVue', () => {
   })
 })
 
+// ---------------------------------------------------------------------------
+// readonly record rendering
+// ---------------------------------------------------------------------------
+
+describe('readonly record rendering', () => {
+  it('normalizes bare record data and full record payload wrappers', () => {
+    expect(normalizeRecordRenderValue({
+      var: { sample_id: { value: 'S-001' } },
+      step: { prepare: { checked: true } },
+      var_table: {
+        samples: [{ sample_id: 'S-001' }],
+      },
+    })).toEqual({
+      var: { sample_id: { value: 'S-001' } },
+      step: { prepare: { checked: true } },
+      check: {},
+      quiz: {},
+      var_table: {
+        samples: [{ sample_id: 'S-001' }],
+      },
+    })
+
+    expect(normalizeRecordRenderValue({
+      record_id: 'rec-001',
+      data: {
+        var: { sample_id: 'S-002' },
+        quiz: { qc: ['A', 'B'] },
+      },
+    })).toEqual({
+      var: { sample_id: 'S-002' },
+      var_table: {},
+      step: {},
+      check: {},
+      quiz: { qc: ['A', 'B'] },
+    })
+  })
+
+  it('creates an edit-mode readonly render context for record-backed documents', () => {
+    const context = createReadonlyRecordRenderContext(
+      { data: { var: { sample_id: 'S-003' } } },
+      { quizPreview: { showAnswers: true } },
+    )
+
+    expect(context.mode).toBe('edit')
+    expect(context.readonly).toBe(true)
+    expect(context.quizPreview).toEqual({ showAnswers: true })
+    expect(context.value?.var.sample_id).toBe('S-003')
+  })
+
+  it('renders record values into AIMD fields without enabling input editing', async () => {
+    const { nodes } = await renderReadonlyRecordToVue(
+      [
+        'Sample {{var|sample_id: str}}',
+        '',
+        '{{check|prepared}} Prepared.',
+      ].join('\n'),
+      {
+        data: {
+          var: { sample_id: { value: 'S-004' } },
+          check: { prepared: { checked: true } },
+        },
+      },
+      {
+        groupCheckBodies: true,
+      },
+    )
+
+    expect(collectVNodeText(nodes)).toContain('S-004')
+    expect(collectVNodeText(nodes)).not.toContain('sample_id')
+    const input = findVNodeByType({ children: nodes }, 'input') as any
+    expect(input).toBeTruthy()
+    expect(input.props.checked).toBe(true)
+    expect(input.props.disabled).toBe(true)
+  })
+
+  it('shows readable missing labels only when record values are absent', async () => {
+    const { nodes } = await renderReadonlyRecordToVue(
+      'Sample {{var|sample_id: str, title="Sample ID"}}',
+      {
+        data: {
+          var: {},
+        },
+      },
+    )
+
+    expect(collectVNodeText(nodes)).toContain('Missing')
+    expect(collectVNodeText(nodes)).toContain('Sample ID')
+    const missing = findVNodeByType({ children: nodes }, 'span') as any
+    expect(missing.props.title).toContain('data.var.sample_id')
+  })
+
+  it('renders file-backed image fields with resolved assets', async () => {
+    const { nodes } = await renderReadonlyRecordToVue(
+      'Site photo: {{var|site_photo: FileIdPNG}}',
+      {
+        data: {
+          var: {
+            site_photo: 'airalogy.id.file.site-photo.png',
+          },
+        },
+      },
+      {
+        resolveAsset: context => context.fileId === 'airalogy.id.file.site-photo.png'
+          ? {
+              url: 'blob:site-photo',
+              filename: 'site-photo.png',
+              mimeType: 'image/png',
+            }
+          : null,
+      },
+    )
+
+    const img = findVNodeByType({ children: nodes }, 'img') as any
+    expect(img).toBeTruthy()
+    expect(img.props.src).toBe('blob:site-photo')
+    expect(img.props.alt).toBe('site-photo.png')
+  })
+
+  it('renders manifest-resolved file fields even when the protocol did not declare FileId type', async () => {
+    const { nodes } = await renderReadonlyRecordToVue(
+      'Attachment: {{var|sample_file}}',
+      {
+        data: {
+          var: {
+            sample_file: 'airalogy.id.file.sample-note.txt',
+          },
+        },
+      },
+      {
+        resolveAsset: context => context.fieldPath === 'data.var.sample_file'
+          ? {
+              href: 'blob:sample-note',
+              filename: 'sample-note.txt',
+              mimeType: 'text/plain',
+            }
+          : null,
+      },
+    )
+
+    const link = findVNodeByType({ children: nodes }, 'a') as any
+    expect(link).toBeTruthy()
+    expect(link.props.href).toBe('blob:sample-note')
+    expect(collectVNodeText(link)).toContain('sample-note.txt')
+  })
+
+  it('resolves markdown image elements through readonly record assets', async () => {
+    const { nodes } = await renderReadonlyRecordToVue(
+      '![Calibration chart](airalogy.id.file.chart.svg)',
+      { data: { var: {} } },
+      {
+        resolveAsset: context => context.fileId === 'airalogy.id.file.chart.svg'
+          ? {
+              url: 'blob:chart',
+              filename: 'chart.svg',
+              mimeType: 'image/svg+xml',
+            }
+          : null,
+      },
+    )
+
+    const img = findVNodeByType({ children: nodes }, 'img') as any
+    expect(img).toBeTruthy()
+    expect(img.props.src).toBe('blob:chart')
+    expect(img.props.alt).toBe('Calibration chart')
+  })
+
+  it('renders AiralogyMarkdown record values through the AIMD Vue renderer', async () => {
+    const { nodes } = await renderReadonlyRecordToVue(
+      'Report:\n\n{{var|report: AiralogyMarkdown}}',
+      {
+        data: {
+          var: {
+            report: [
+              '# Finding',
+              '',
+              '![Chart](airalogy.id.file.chart.svg)',
+              '',
+              'Nested token: {{var|nested: str, title="Nested value"}}',
+            ].join('\n'),
+          },
+        },
+      },
+      {
+        resolveAsset: context => context.fileId === 'airalogy.id.file.chart.svg'
+          ? {
+              url: 'blob:chart',
+              filename: 'chart.svg',
+              mimeType: 'image/svg+xml',
+            }
+          : null,
+      },
+    )
+
+    const wrapper = mount({
+      render: () => h('div', nodes),
+    })
+
+    await vi.waitFor(() => {
+      expect(wrapper.find('.aimd-record-field--markdown h1').text()).toBe('Finding')
+      expect(wrapper.find('.aimd-record-field--markdown img').attributes('src')).toBe('blob:chart')
+    })
+    expect(wrapper.find('.aimd-record-field--markdown').text()).toContain('Nested value')
+    wrapper.unmount()
+  })
+})
+
 // ---------------------------------------------------------------------------
 // createRenderer
 // ---------------------------------------------------------------------------

package/src/common/criticMarkup.ts

@@ -0,0 +1,97 @@
+import type { Element, Text as HastText } from "hast"
+import type {
+  AimdCriticMarkupBaseNode,
+  AimdCriticMarkupChild,
+  AimdCriticMarkupNode,
+  AimdCriticSubstitutionNode,
+} from "@airalogy/aimd-core/types"
+
+function createTextHast(value: string): HastText {
+  return { type: "text", value }
+}
+
+function isCriticMarkupNode(node: AimdCriticMarkupChild): node is AimdCriticMarkupNode {
+  return typeof node.type === "string" && node.type.startsWith("critic")
+}
+
+function renderInlineChildren(state: any, children: AimdCriticMarkupChild[] = []): Array<Element | HastText> {
+  return children.flatMap((child) => {
+    if (child.type === "text") {
+      return [createTextHast(child.value ?? "")] as Array<Element | HastText>
+    }
+
+    if (isCriticMarkupNode(child)) {
+      const handler = criticMarkupHandlers[child.type as keyof typeof criticMarkupHandlers] as
+        | ((state: any, node: any) => Element)
+        | undefined
+      if (handler) {
+        return [handler(state, child)]
+      }
+    }
+
+    const rendered = typeof state.one === "function" ? state.one(child, undefined) : null
+    return rendered ? [rendered as Element | HastText] : []
+  })
+}
+
+function createCriticElement(
+  tagName: string,
+  kind: string,
+  children: Array<Element | HastText>,
+  extraClassNames: string[] = [],
+): Element {
+  return {
+    type: "element",
+    tagName,
+    properties: {
+      className: ["aimd-critic", `aimd-critic--${kind}`, ...extraClassNames],
+      "data-critic-kind": kind,
+    },
+    children,
+  }
+}
+
+export const criticMarkupHandlers = {
+  criticAddition(state: any, node: AimdCriticMarkupBaseNode): Element {
+    return createCriticElement("ins", "addition", renderInlineChildren(state, node.children))
+  },
+
+  criticDeletion(state: any, node: AimdCriticMarkupBaseNode): Element {
+    return createCriticElement("del", "deletion", renderInlineChildren(state, node.children))
+  },
+
+  criticHighlight(state: any, node: AimdCriticMarkupBaseNode): Element {
+    return createCriticElement("mark", "highlight", renderInlineChildren(state, node.children))
+  },
+
+  criticComment(_state: any, node: AimdCriticMarkupBaseNode): Element {
+    const value = node.value.trim()
+    return createCriticElement("span", "comment", [
+      {
+        type: "element",
+        tagName: "span",
+        properties: { className: ["aimd-critic__comment-label"] },
+        children: [createTextHast("Comment")],
+      },
+      {
+        type: "element",
+        tagName: "span",
+        properties: { className: ["aimd-critic__comment-body"] },
+        children: [createTextHast(value)],
+      },
+    ], value ? [] : ["aimd-critic--empty-comment"])
+  },
+
+  criticSubstitution(state: any, node: AimdCriticSubstitutionNode): Element {
+    return createCriticElement("span", "substitution", [
+      createCriticElement("del", "deletion", renderInlineChildren(state, node.oldChildren), ["aimd-critic--substitution-old"]),
+      {
+        type: "element",
+        tagName: "span",
+        properties: { className: ["aimd-critic__replacement-arrow"], "aria-hidden": "true" },
+        children: [createTextHast("->")],
+      },
+      createCriticElement("ins", "addition", renderInlineChildren(state, node.newChildren), ["aimd-critic--substitution-new"]),
+    ])
+  },
+}