@airalogy/aimd-renderer 2.6.0 → 2.7.0

package/dist/vue/index.d.ts

@@ -2,6 +2,7 @@
  * Vue rendering exports
  */
 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 { AIMD_RECORD_RENDER_SCOPES, createReadonlyRecordAimdRenderers, createReadonlyRecordElementRenderers, createReadonlyRecordRenderContext, normalizeRecordRenderValue, renderReadonlyRecordToVue, type AimdRecordRenderScope, type AimdRecordRenderValue, type ReadonlyRecordAsset, type ReadonlyRecordAssetKind, type ReadonlyRecordAssetResolveContext, type ReadonlyRecordAssetResolver, type ReadonlyRecordMarkdownRenderOptions, type ReadonlyRecordRenderContextInput, type ReadonlyRecordVueRendererOptions, } from './readonly-record-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,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"}
+{"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,yBAAyB,EACzB,iCAAiC,EACjC,oCAAoC,EACpC,iCAAiC,EACjC,0BAA0B,EAC1B,yBAAyB,EACzB,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,EAC1B,KAAK,mBAAmB,EACxB,KAAK,uBAAuB,EAC5B,KAAK,iCAAiC,EACtC,KAAK,2BAA2B,EAChC,KAAK,mCAAmC,EACxC,KAAK,gCAAgC,EACrC,KAAK,gCAAgC,GACtC,MAAM,4BAA4B,CAAA;AAEnC,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/readonly-record-renderer.d.ts

@@ -0,0 +1,42 @@
+import type { AimdNode, RenderContext } from '@airalogy/aimd-core/types';
+import { type AimdAssetKind, type AimdAssetLike, type AimdRecordDataScope, type AimdRecordDataValue } from '@airalogy/aimd-core/utils';
+import type { AimdRendererOptions, RenderResult } from '../common/processor';
+import type { AimdComponentRenderer, AimdRendererContext, ElementRenderer, VueRendererOptions } from './vue-renderer';
+export declare const AIMD_RECORD_RENDER_SCOPES: readonly ["var", "var_table", "step", "check", "quiz"];
+export type AimdRecordRenderScope = AimdRecordDataScope;
+export type ReadonlyRecordAssetKind = AimdAssetKind;
+export type AimdRecordRenderValue = AimdRecordDataValue;
+export interface ReadonlyRecordAsset extends AimdAssetLike {
+    url?: string;
+    href?: string;
+    name?: string;
+    filename?: string;
+    mimeType?: string;
+    size?: number;
+    kind?: ReadonlyRecordAssetKind;
+    downloadName?: string;
+}
+export interface ReadonlyRecordAssetResolveContext {
+    fieldId: string;
+    fieldPath: string;
+    scope: string;
+    node: AimdNode;
+    value: unknown;
+    normalizedValue: unknown;
+    fileId?: string;
+    recordValue: RenderContext['value'];
+}
+export type ReadonlyRecordAssetResolver = (context: ReadonlyRecordAssetResolveContext) => ReadonlyRecordAsset | null | undefined;
+export type ReadonlyRecordRenderContextInput = Partial<RenderContext> & Partial<Pick<AimdRendererContext, 'locale' | 'messages'>>;
+export interface ReadonlyRecordVueRendererOptions extends AimdRendererOptions, VueRendererOptions {
+    resolveAsset?: ReadonlyRecordAssetResolver;
+}
+export type ReadonlyRecordMarkdownRenderOptions = AimdRendererOptions & Pick<VueRendererOptions, 'componentMap' | 'elementRenderers' | 'locale' | 'messages' | 'quizPreview'>;
+export declare function createReadonlyRecordAimdRenderers(options?: Pick<ReadonlyRecordVueRendererOptions, 'resolveAsset'> & {
+    markdownRenderOptions?: ReadonlyRecordMarkdownRenderOptions;
+}): Record<string, AimdComponentRenderer>;
+export declare function createReadonlyRecordElementRenderers(options?: Pick<ReadonlyRecordVueRendererOptions, 'resolveAsset'>): Record<string, ElementRenderer>;
+export declare function normalizeRecordRenderValue(recordData: unknown): RenderContext['value'];
+export declare function createReadonlyRecordRenderContext<T extends ReadonlyRecordRenderContextInput>(recordData: unknown, context?: T): T & RenderContext;
+export declare function renderReadonlyRecordToVue(content: string, recordData: unknown, options?: ReadonlyRecordVueRendererOptions): Promise<RenderResult>;
+//# sourceMappingURL=readonly-record-renderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"readonly-record-renderer.d.ts","sourceRoot":"","sources":["../../src/vue/readonly-record-renderer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAGV,QAAQ,EAIR,aAAa,EACd,MAAM,2BAA2B,CAAA;AAClC,OAAO,EAqBL,KAAK,aAAa,EAClB,KAAK,aAAa,EAClB,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EACzB,MAAM,2BAA2B,CAAA;AAGlC,OAAO,KAAK,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AAE5E,OAAO,KAAK,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAA;AAErH,eAAO,MAAM,yBAAyB,wDAA0B,CAAA;AAEhE,MAAM,MAAM,qBAAqB,GAAG,mBAAmB,CAAA;AAEvD,MAAM,MAAM,uBAAuB,GAAG,aAAa,CAAA;AAEnD,MAAM,MAAM,qBAAqB,GAAG,mBAAmB,CAAA;AAEvD,MAAM,WAAW,mBAAoB,SAAQ,aAAa;IACxD,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,uBAAuB,CAAA;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,MAAM,WAAW,iCAAiC;IAChD,OAAO,EAAE,MAAM,CAAA;IACf,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,QAAQ,CAAA;IACd,KAAK,EAAE,OAAO,CAAA;IACd,eAAe,EAAE,OAAO,CAAA;IACxB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,WAAW,EAAE,aAAa,CAAC,OAAO,CAAC,CAAA;CACpC;AAED,MAAM,MAAM,2BAA2B,GAAG,CACxC,OAAO,EAAE,iCAAiC,KACvC,mBAAmB,GAAG,IAAI,GAAG,SAAS,CAAA;AAE3C,MAAM,MAAM,gCAAgC,GAAG,OAAO,CAAC,aAAa,CAAC,GACjE,OAAO,CAAC,IAAI,CAAC,mBAAmB,EAAE,QAAQ,GAAG,UAAU,CAAC,CAAC,CAAA;AAE7D,MAAM,WAAW,gCAAiC,SAAQ,mBAAmB,EAAE,kBAAkB;IAC/F,YAAY,CAAC,EAAE,2BAA2B,CAAA;CAC3C;AAED,MAAM,MAAM,mCAAmC,GAAG,mBAAmB,GACjE,IAAI,CAAC,kBAAkB,EAAE,cAAc,GAAG,kBAAkB,GAAG,QAAQ,GAAG,UAAU,GAAG,aAAa,CAAC,CAAA;AAulBzG,wBAAgB,iCAAiC,CAC/C,OAAO,GAAE,IAAI,CAAC,gCAAgC,EAAE,cAAc,CAAC,GAAG;IAChE,qBAAqB,CAAC,EAAE,mCAAmC,CAAA;CACvD,GACL,MAAM,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAQvC;AAED,wBAAgB,oCAAoC,CAClD,OAAO,GAAE,IAAI,CAAC,gCAAgC,EAAE,cAAc,CAAM,GACnE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAIjC;AAED,wBAAgB,0BAA0B,CAAC,UAAU,EAAE,OAAO,GAAG,aAAa,CAAC,OAAO,CAAC,CAEtF;AAED,wBAAgB,iCAAiC,CAAC,CAAC,SAAS,gCAAgC,EAC1F,UAAU,EAAE,OAAO,EACnB,OAAO,CAAC,EAAE,CAAC,GACV,CAAC,GAAG,aAAa,CAOnB;AAED,wBAAsB,yBAAyB,CAC7C,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,OAAO,EACnB,OAAO,GAAE,gCAAqC,GAC7C,OAAO,CAAC,YAAY,CAAC,CAsBvB"}

package/dist/vue.js

@@ -1,18 +1,25 @@
-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";
+import { D as a, c as d, f as s, g as R, h as n, i as o, j as t, k as c, l, m, n as E, o as i, q as A, s as C, e as D } from "./processor-BOCQYqXE.js";
+import { A as h, c as u, a as T, b as V, n as f, r as g } from "./readonly-record-renderer-CkzY7UvT.js";
 export {
+  h as AIMD_RECORD_RENDER_SCOPES,
   a as DEFAULT_AIMD_RENDERER_LOCALE,
-  s as createAimdRendererMessages,
-  d as createAssetRenderer,
-  n as createCodeBlockRenderer,
-  t as createComponentRenderer,
+  d as createAimdRendererMessages,
+  s as createAssetRenderer,
+  R as createCodeBlockRenderer,
+  n as createComponentRenderer,
   o as createEmbeddedRenderer,
-  R as createMermaidRenderer,
+  t as createMermaidRenderer,
+  u as createReadonlyRecordAimdRenderers,
+  T as createReadonlyRecordElementRenderers,
+  V as createReadonlyRecordRenderContext,
   c as createRenderer,
-  i as createStepCardRenderer,
-  l as defaultRenderer,
-  m as hastToVue,
-  A as loadShikiHighlighter,
-  E as renderToVNodes,
-  h as renderToVue,
-  g as resolveAimdRendererLocale
+  l as createStepCardRenderer,
+  m as defaultRenderer,
+  E as hastToVue,
+  i as loadShikiHighlighter,
+  f as normalizeRecordRenderValue,
+  g as renderReadonlyRecordToVue,
+  A as renderToVNodes,
+  C as renderToVue,
+  D as resolveAimdRendererLocale
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@airalogy/aimd-renderer",
   "type": "module",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "description": "AIMD (Airalogy Markdown) rendering engines for HTML and Vue",
   "license": "Apache-2.0",
   "repository": {
@@ -64,7 +64,7 @@
     "shiki": "^2.5.0",
     "unified": "^11.0.5",
     "vfile": "^6.0.3",
-    "@airalogy/aimd-core": "^2.8.0"
+    "@airalogy/aimd-core": "^2.9.0"
   },
   "devDependencies": {
     "@types/node": "^24.3.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,6 +11,11 @@ import {
   createRenderer,
 } from '../common/processor'
 import { getFinalIndent, parseFieldTag } from '../index'
+import {
+  createReadonlyRecordRenderContext,
+  normalizeRecordRenderValue,
+  renderReadonlyRecordToVue,
+} from '../vue/readonly-record-renderer'
 import { createCodeBlockRenderer, createStepCardRenderer } from '../vue/vue-renderer'
 
 function findVNodeByType(node: any, expectedType: string): any | null {
@@ -194,6 +201,36 @@ 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')
@@ -543,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"]),
+    ])
+  },
+}

package/src/common/processor.ts

@@ -21,6 +21,7 @@ import { resolveQuizPreviewOptions } from "./quiz-preview"
 import { remarkInsertVisibleAssigners, remarkStripAssignerCodeBlocks } from "./assignerVisibility"
 import { highlightVisibleAssigners } from "./assignerHighlighting"
 import { annotateStepReferenceSequence } from "./annotateStepReferences"
+import { criticMarkupHandlers } from "./criticMarkup"
 import { buildFigureChildren, assignFigureSequenceNumbers } from "./figureNumbering"
 
 // ---------------------------------------------------------------------------
@@ -511,7 +512,13 @@ import remarkParse from "remark-parse"
 import remarkRehype from "remark-rehype"
 import { unified } from "unified"
 
-import { protectAimdInlineTemplates, remarkAimd } from "@airalogy/aimd-core/parser"
+import {
+  CRITIC_MARKUP_SUBSTITUTIONS_DATA_KEY,
+  protectAimdInlineTemplates,
+  protectCriticMarkupSubstitutions,
+  remarkAimd,
+  remarkCriticMarkup,
+} from "@airalogy/aimd-core/parser"
 import {
   formatAimdExampleValue,
   formatAimdExamples,
@@ -567,14 +574,16 @@ async function ensureMathStylesLoaded(mathEnabled: boolean | undefined): Promise
 
 function createAimdParseInput(content: string) {
   const { content: protectedContent, templates } = protectAimdInlineTemplates(content)
+  const { content: criticProtectedContent, substitutions } = protectCriticMarkupSubstitutions(protectedContent)
   const file: VFile = {
     data: {
       aimdInlineTemplates: templates,
+      [CRITIC_MARKUP_SUBSTITUTIONS_DATA_KEY]: substitutions,
     },
   } as unknown as VFile
 
   return {
-    content: protectedContent,
+    content: criticProtectedContent,
     file,
   }
 }
@@ -1512,6 +1521,7 @@ function createBaseProcessor(options: AimdRendererOptions = {}) {
   // to properly parse multiline AIMD syntax like var_table with subvars
   processor.use(remarkAimd)
   processor.use(remarkStripAssignerCodeBlocks)
+  processor.use(remarkCriticMarkup)
 
   // Single line break to <br> conversion (default enabled for AIMD)
   if (breaks) {
@@ -1534,6 +1544,7 @@ export function createHtmlProcessor(options: AimdRendererOptions = {}) {
       handlers: {
         // Custom handler for AIMD nodes
         aimd: aimdHandler,
+        ...criticMarkupHandlers,
       },
     } as any)
     .use(rehypeRaw)

package/src/index.ts

@@ -41,6 +41,24 @@ export {
 } from './common/unified-token-renderer'
 
 // Vue renderer exports
+export {
+  AIMD_RECORD_RENDER_SCOPES,
+  createReadonlyRecordAimdRenderers,
+  createReadonlyRecordElementRenderers,
+  createReadonlyRecordRenderContext,
+  normalizeRecordRenderValue,
+  renderReadonlyRecordToVue,
+  type AimdRecordRenderScope,
+  type AimdRecordRenderValue,
+  type ReadonlyRecordAsset,
+  type ReadonlyRecordAssetKind,
+  type ReadonlyRecordAssetResolveContext,
+  type ReadonlyRecordAssetResolver,
+  type ReadonlyRecordMarkdownRenderOptions,
+  type ReadonlyRecordRenderContextInput,
+  type ReadonlyRecordVueRendererOptions,
+} from './vue/readonly-record-renderer'
+
 export {
   type AimdComponentRenderer,
   type AimdRendererContext,

package/src/styles/katex.css

@@ -109,3 +109,68 @@
   visibility: visible;
   transform: translateY(0);
 }
+
+.aimd-critic {
+  border-radius: 4px;
+  padding: 0 0.14em;
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+}
+
+.aimd-critic--addition {
+  background: rgba(22, 163, 74, 0.13);
+  color: #166534;
+  text-decoration: none;
+}
+
+.aimd-critic--deletion {
+  background: rgba(220, 38, 38, 0.1);
+  color: #991b1b;
+  text-decoration-line: line-through;
+  text-decoration-thickness: 0.08em;
+}
+
+.aimd-critic--highlight {
+  background: rgba(250, 204, 21, 0.36);
+  color: inherit;
+}
+
+.aimd-critic--substitution {
+  background: rgba(99, 102, 241, 0.08);
+}
+
+.aimd-critic--substitution .aimd-critic {
+  margin-inline: 0.04em;
+}
+
+.aimd-critic__replacement-arrow {
+  color: #64748b;
+  font-size: 0.86em;
+  font-weight: 600;
+}
+
+.aimd-critic--comment {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0.34em;
+  padding: 0.03em 0.44em;
+  border: 1px solid rgba(37, 99, 235, 0.22);
+  border-radius: 999px;
+  background: rgba(37, 99, 235, 0.09);
+  color: #1e3a8a;
+  font-size: 0.92em;
+  line-height: 1.5;
+  vertical-align: baseline;
+}
+
+.aimd-critic__comment-label {
+  color: #2563eb;
+  font-size: 0.78em;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+
+.aimd-critic__comment-body {
+  color: inherit;
+}

package/src/vue/index.ts

@@ -23,6 +23,24 @@ export {
   type VueRendererOptions,
 } from './vue-renderer'
 
+export {
+  AIMD_RECORD_RENDER_SCOPES,
+  createReadonlyRecordAimdRenderers,
+  createReadonlyRecordElementRenderers,
+  createReadonlyRecordRenderContext,
+  normalizeRecordRenderValue,
+  renderReadonlyRecordToVue,
+  type AimdRecordRenderScope,
+  type AimdRecordRenderValue,
+  type ReadonlyRecordAsset,
+  type ReadonlyRecordAssetKind,
+  type ReadonlyRecordAssetResolveContext,
+  type ReadonlyRecordAssetResolver,
+  type ReadonlyRecordMarkdownRenderOptions,
+  type ReadonlyRecordRenderContextInput,
+  type ReadonlyRecordVueRendererOptions,
+} from './readonly-record-renderer'
+
 export {
   renderToVue,
   createRenderer,