@airalogy/aimd-renderer 2.4.1 → 2.6.0

package/dist/vue/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 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 { 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';
+export type { AimdAssignerVisibility, AimdRendererOptions, RenderResult } from '../common/processor';
+export type { AimdRendererI18nOptions, AimdRendererLocale, AimdRendererMessages, AimdRendererMessagesInput, } from '../locales';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,159 @@
+import type { Element, Root as HastRoot, RootContent } from "hast";
+import type { Component, VNode, VNodeChild } from "vue";
+import type { AimdNode, RenderContext } from "@airalogy/aimd-core/types";
+import type { AimdRendererI18nOptions, AimdRendererLocale, AimdRendererMessages } from "../locales";
+/**
+ * Extended Element data type
+ */
+export interface AimdElementData {
+    aimd?: AimdNode;
+}
+/**
+ * AIMD component renderer function type
+ * Can return VNode directly or a Promise for async rendering
+ */
+export type AimdComponentRenderer = (node: AimdNode, ctx: AimdRendererContext, children?: VNodeChild[]) => VNode | Promise<VNode> | null;
+/**
+ * Element renderer function type
+ */
+export type ElementRenderer = (node: Element, children: VNodeChild[], ctx: AimdRendererContext) => VNode | null;
+export interface AimdRendererContext extends RenderContext {
+    locale: AimdRendererLocale;
+    messages: AimdRendererMessages;
+}
+export interface AimdStepCardRendererOptions {
+    showScopeLabel?: boolean;
+    showCheckBadge?: boolean;
+    bodyClassName?: string;
+    className?: string;
+}
+/**
+ * Render options
+ */
+export interface VueRendererOptions {
+    /**
+     * Built-in renderer locale
+     */
+    locale?: AimdRendererI18nOptions["locale"];
+    /**
+     * Optional overrides for built-in renderer copy
+     */
+    messages?: AimdRendererI18nOptions["messages"];
+    /**
+     * Render mode shorthand (used when context is not provided)
+     */
+    mode?: RenderContext["mode"];
+    /**
+     * Quiz preview visibility shorthand (used when context is not provided)
+     */
+    quizPreview?: RenderContext["quizPreview"];
+    /**
+     * Render context
+     */
+    context?: RenderContext & Partial<Pick<AimdRendererContext, "locale" | "messages">>;
+    /**
+     * Custom AIMD component renderers
+     * Override default renderers or add new ones
+     */
+    aimdRenderers?: Record<string, AimdComponentRenderer>;
+    /**
+     * Custom HTML element renderers
+     * Render specific HTML tags with custom components
+     */
+    elementRenderers?: Record<string, ElementRenderer>;
+    /**
+     * Component map for rendering Vue components by tag name
+     * e.g., { 'step-renderer': StepRendererComponent }
+     */
+    componentMap?: Record<string, Component>;
+}
+/**
+ * Figure context for tracking figure numbers and references
+ */
+export interface FigureContext {
+    /** Map from fig ID to sequence number */
+    figureNumbers: Map<string, number>;
+    /** Current figure sequence counter */
+    sequence: number;
+}
+/**
+ * Convert HAST node to Vue VNode
+ */
+export declare function hastToVue(node: HastRoot | RootContent, options?: VueRendererOptions, figCtx?: FigureContext): VNodeChild;
+/**
+ * Convert HAST tree to Vue VNode array
+ */
+export declare function renderToVNodes(tree: HastRoot, options?: VueRendererOptions): VNode[];
+/**
+ * Create a custom AIMD renderer that wraps a Vue component
+ */
+export declare function createComponentRenderer(component: Component, propsMapper?: (node: AimdNode, ctx: AimdRendererContext) => Record<string, unknown>): AimdComponentRenderer;
+export declare function createStepCardRenderer(options?: AimdStepCardRendererOptions): AimdComponentRenderer;
+/**
+ * Shiki highlighter type (compatible with @shikijs/core)
+ */
+export interface ShikiHighlighter {
+    codeToHtml: (code: string, options: {
+        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>;
+    }) => Array<Array<{
+        content: string;
+        variants: Record<string, {
+            color: string;
+        }>;
+    }>>;
+}
+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), optionsOrTheme?: string | CodeBlockRendererOptions): ElementRenderer;
+/**
+ * Create Mermaid diagram element renderer
+ * @param MermaidComponent - Vue component to render Mermaid diagrams
+ */
+export declare function createMermaidRenderer(MermaidComponent: Component): ElementRenderer;
+/**
+ * Asset resolver function type
+ */
+export type AssetResolver = (id: string) => Promise<{
+    url: string;
+} | null>;
+/**
+ * Create image element renderer with asset resolution
+ * @param AssetComponent - Vue component to render assets (optional)
+ * @param getAsset - Function to resolve asset ID to URL
+ */
+export declare function createAssetRenderer(getAsset?: AssetResolver, AssetComponent?: Component): ElementRenderer;
+/**
+ * Create iframe/video element renderer for embedded content
+ * @param EmbeddedComponent - Vue component to render embedded content
+ */
+export declare function createEmbeddedRenderer(EmbeddedComponent: Component): ElementRenderer;
+//# sourceMappingURL=vue-renderer.d.ts.map

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

@@ -0,0 +1 @@
+{"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-Cv8E7QsA.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.4.1",
-  "description": "AIMD rendering engines for HTML and Vue",
+  "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",
@@ -47,21 +47,13 @@
     "dist",
     "src"
   ],
-  "scripts": {
-    "type-check": "tsc --noEmit",
-    "build:types": "tsc --emitDeclarationOnly --declaration --outDir dist",
-    "build": "vite build && pnpm run build:types",
-    "dev": "vite build --watch",
-    "test": "pnpm run build && node --test ./tests/*.test.mjs"
-  },
   "peerDependencies": {
     "vue": "^3.5.17"
   },
   "dependencies": {
-    "@airalogy/aimd-core": "workspace:^",
     "@types/hast": "^3.0.4",
     "hast-util-to-html": "^9.0.5",
-    "katex": "catalog:",
+    "katex": "^0.16.28",
     "rehype-katex": "^7.0.1",
     "rehype-raw": "^7.0.0",
     "remark-breaks": "^4.0.0",
@@ -71,7 +63,8 @@
     "remark-rehype": "^11.1.2",
     "shiki": "^2.5.0",
     "unified": "^11.0.5",
-    "vfile": "^6.0.3"
+    "vfile": "^6.0.3",
+    "@airalogy/aimd-core": "^2.8.0"
   },
   "devDependencies": {
     "@types/node": "^24.3.0",
@@ -80,5 +73,12 @@
     "vite": "^7.1.3",
     "vite-tsconfig-paths": "^5.1.4",
     "vue": "^3.5.17"
+  },
+  "scripts": {
+    "type-check": "tsc --noEmit",
+    "build:types": "tsc --emitDeclarationOnly --declaration --outDir dist",
+    "build": "vite build && pnpm run build:types",
+    "dev": "vite build --watch",
+    "test": "pnpm run build && node --test ./tests/*.test.mjs"
   }
-}
+}

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') {
@@ -109,8 +109,16 @@ describe('resolveQuizPreviewOptions', () => {
 
 describe('parseAndExtract', () => {
   it('extracts var fields', () => {
-    const fields = parseAndExtract('{{var|temperature: float = 36.5}}')
+    const fields = parseAndExtract('{{var|temperature: float = 36.5, gt = 0}}')
     expect(fields.var).toContain('temperature')
+    expect(fields.var_definitions?.[0]).toMatchObject({
+      id: 'temperature',
+      type: 'float',
+      default: 36.5,
+      kwargs: {
+        gt: 0,
+      },
+    })
   })
 
   it('extracts step fields', () => {
@@ -141,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',
+    ])
+  })
 })
 
 // ---------------------------------------------------------------------------
@@ -160,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)
@@ -173,6 +258,51 @@ describe('renderToHtmlSync', () => {
     expect(html).toContain('<td')
   })
 
+  it('renders true/false quiz options and report answers', () => {
+    const { html, fields } = renderToHtmlSync(
+      [
+        '```quiz',
+        'id: q_true_false',
+        'type: true_false',
+        'stem: "The sample stayed cold."',
+        'answer: true',
+        '```',
+      ].join('\n'),
+      { mode: 'report' },
+    )
+
+    expect(fields.quiz[0].type).toBe('true_false')
+    expect(html).toContain('True/false')
+    expect(html).toContain('true. True')
+    expect(html).toContain('false. False')
+    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.",
@@ -275,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.",