@airalogy/aimd-renderer 2.4.1 → 2.6.0

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,
@@ -531,6 +539,7 @@ let mathStylesLoadPromise: Promise<unknown> | null = null
 
 const EMPTY_EXTRACTED_FIELDS: ExtractedAimdFields = {
   var: [],
+  var_definitions: [],
   var_table: [],
   client_assigner: [],
   quiz: [],
@@ -573,6 +582,7 @@ function createAimdParseInput(content: string) {
 function createEmptyExtractedFields(): ExtractedAimdFields {
   return {
     var: [...EMPTY_EXTRACTED_FIELDS.var],
+    var_definitions: [...(EMPTY_EXTRACTED_FIELDS.var_definitions || [])],
     var_table: [...EMPTY_EXTRACTED_FIELDS.var_table],
     client_assigner: [...EMPTY_EXTRACTED_FIELDS.client_assigner],
     quiz: [...EMPTY_EXTRACTED_FIELDS.quiz],
@@ -788,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)
 // ---------------------------------------------------------------------------
@@ -966,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",
@@ -992,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"] },
@@ -1004,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({
@@ -1031,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,
@@ -1171,7 +1290,7 @@ function createAimdHandler(options: AimdRendererOptions = {}) {
       } as Element)
     }
 
-    if (quizType === "choice" && Array.isArray(quizNode.options) && quizNode.options.length > 0) {
+    if ((quizType === "choice" || quizType === "true_false") && Array.isArray(quizNode.options) && quizNode.options.length > 0) {
       children.push({
         type: "element",
         tagName: "ul",
@@ -1190,7 +1309,7 @@ function createAimdHandler(options: AimdRendererOptions = {}) {
       children.push(...buildScaleBandChildren(quizNode))
     }
 
-    if (quizPreview.showAnswers && quizType === "choice" && quizNode.answer !== undefined) {
+    if (quizPreview.showAnswers && (quizType === "choice" || quizType === "true_false") && quizNode.answer !== undefined) {
       const answerText = Array.isArray(quizNode.answer)
         ? quizNode.answer.join(", ")
         : String(quizNode.answer)
@@ -1240,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) {

package/src/common/unified-token-renderer.ts

@@ -13,6 +13,13 @@ import type {
 } from "@airalogy/aimd-core/types"
 import type { AimdNode, QuizPreviewOptions, RenderContext } from "@airalogy/aimd-core/types"
 import type { ExtractedAimdFields } from "@airalogy/aimd-core/types"
+import {
+  formatAimdExampleValue,
+  getAimdFieldDescription,
+  getAimdFieldDisplayLabel,
+  getAimdFieldExamples,
+  getAimdFieldTitle,
+} from "@airalogy/aimd-core/utils"
 import type { AimdRendererI18nOptions, AimdRendererMessages } from "../locales"
 import type { AimdComponentRenderer, ElementRenderer, ShikiHighlighter, VueRendererOptions } from "../vue/vue-renderer"
 import type { AimdRendererOptions, RenderResult } from "./processor"
@@ -226,6 +233,74 @@ function buildScaleBandChildren(quizNode: AimdQuizNode): VNode[] {
   ]
 }
 
+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 renderFieldMetadataPopover(help: FieldMetadataHelp): VNode | null {
+  if (!help.description && help.examples.length === 0) {
+    return null
+  }
+  const children: VNode[] = []
+  if (help.description) {
+    children.push(h("span", {
+      class: "aimd-field__metadata-popover-line",
+    }, help.description))
+  }
+  if (help.examples.length > 0) {
+    children.push(h("span", { class: "aimd-field__metadata-examples" }, [
+      h("span", { class: "aimd-field__metadata-examples-label" }, "e.g."),
+      ...help.examples.map((example, index) => h("span", {
+        key: `${index}-${example}`,
+        class: "aimd-field__metadata-example",
+      }, example)),
+    ]))
+  }
+  return h("span", {
+    class: "aimd-field__metadata-popover",
+    role: "tooltip",
+  }, children)
+}
+
+function renderFieldName(id: string, definition: { kwargs?: Record<string, unknown> } | undefined): VNode {
+  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
+
+  return h("span", {
+    class: [
+      "aimd-field__name",
+      (hasCustomTitle || hasHelp) ? "aimd-field__name--with-metadata" : undefined,
+      hasHelp ? "aimd-field__metadata-host" : undefined,
+    ],
+    tabindex: hasHelp ? 0 : undefined,
+    "aria-label": help.tooltip || undefined,
+  }, [
+    h("span", { class: "aimd-field__title" }, displayTitle),
+    hasCustomTitle ? h("span", { class: "aimd-field__key" }, id) : null,
+    renderFieldMetadataPopover(help),
+  ])
+}
+
 /**
  * Render preview tag for AIMD field
  */
@@ -234,6 +309,7 @@ function renderPreviewTag(
   id: string,
   messages: AimdRendererMessages,
   columns?: string[],
+  definition?: { kwargs?: Record<string, unknown>, subvars?: Record<string, { kwargs?: Record<string, unknown> }> },
 ): VNode {
   const scopeKey = getScopeKey(scope)
   const scopeLabel = getAimdRendererScopeLabel(scope, messages)
@@ -241,17 +317,19 @@ function renderPreviewTag(
   // var_table: render tag with table preview inside
   if (scope === "var_table") {
     const children: VNode[] = [
-      h("div", { class: "aimd-field__header" }, [
-        h("span", { class: "aimd-field__scope" }, messages.scope.table),
-        h("span", { class: "aimd-field__name" }, id),
-      ]),
+	      h("div", { class: "aimd-field__header" }, [
+	        h("span", { class: "aimd-field__scope" }, messages.scope.table),
+	        renderFieldName(id, definition),
+	      ]),
     ]
     // Add table preview inside the container
     if (columns && columns.length > 0) {
       children.push(
         h("table", { class: "aimd-field__table-preview" }, [
           h("thead", [
-            h("tr", columns.map(col => h("th", col))),
+	            h("tr", columns.map(col => h("th", {
+	              "data-column-id": col,
+	            }, [renderFieldName(col, definition?.subvars?.[col])]))),
           ]),
           h("tbody", [
             h("tr", columns.map(() => h("td", "..."))),
@@ -272,10 +350,10 @@ function renderPreviewTag(
     "class": `aimd-field aimd-field--${classSuffix}`,
     "data-aimd-type": scopeKey,
     "data-aimd-id": id,
-  }, [
-    h("span", { class: "aimd-field__scope" }, scopeLabel),
-    h("span", { class: "aimd-field__name" }, id),
-  ])
+	}, [
+	  h("span", { class: "aimd-field__scope" }, scopeLabel),
+	  renderFieldName(id, definition),
+	])
 }
 
 /**
@@ -299,19 +377,20 @@ function createAimdRenderers(options: UnifiedTokenRendererOptions): Record<strin
     resolveQuizPreviewOptions(getMode(), options.quizPreview)
 
   return {
-    var: async (node, ctx, children) => {
-      const varNode = node as AimdVarNode
-      const { id, scope } = varNode
+	    var: async (node, ctx, children) => {
+	      const varNode = node as AimdVarNode
+	      const { id, scope } = varNode
+	      const definition = varNode.definition
 
-      if (isPreview()) {
+	      if (isPreview()) {
         if (PreviewRenderer) {
           return h(PreviewRenderer, { type: "var" }, {
             default: () => children,
             name: () => id,
           })
         }
-        return renderPreviewTag(scope, id, messages)
-      }
+	        return renderPreviewTag(scope, id, messages, undefined, definition)
+	      }
 
       // Edit mode
       if (getTokenProps && AIMDItem) {
@@ -325,12 +404,13 @@ function createAimdRenderers(options: UnifiedTokenRendererOptions): Record<strin
         }
       }
 
-      return renderPreviewTag(scope, id, messages)
-    },
+	      return renderPreviewTag(scope, id, messages, undefined, definition)
+	    },
 
-    var_table: async (node, ctx, children) => {
-      const tableNode = node as AimdVarTableNode
-      const { id, scope, columns } = tableNode
+	    var_table: async (node, ctx, children) => {
+	      const tableNode = node as AimdVarTableNode
+	      const { id, scope, columns } = tableNode
+	      const definition = tableNode.definition
 
       if (isPreview()) {
         if (PreviewRenderer) {
@@ -340,8 +420,8 @@ function createAimdRenderers(options: UnifiedTokenRendererOptions): Record<strin
           })
         }
         // Preview mode: render inline tag with columns info
-        return renderPreviewTag(scope, id, messages, columns)
-      }
+	        return renderPreviewTag(scope, id, messages, columns, definition)
+	      }
 
       // Edit mode
       if (getTokenProps && AIMDTag) {
@@ -349,8 +429,8 @@ function createAimdRenderers(options: UnifiedTokenRendererOptions): Record<strin
         return h(AIMDTag, { ...item, props: columns })
       }
 
-      return renderPreviewTag(scope, id, messages, columns)
-    },
+	      return renderPreviewTag(scope, id, messages, columns, definition)
+	    },
 
     quiz: async (node, ctx, children) => {
       const quizNode = node as AimdQuizNode
@@ -381,7 +461,7 @@ function createAimdRenderers(options: UnifiedTokenRendererOptions): Record<strin
           previewChildren.push(h("div", { class: "aimd-quiz__description" }, quizNode.description))
         }
 
-        if (quizType === "choice" && Array.isArray(quizNode.options) && quizNode.options.length > 0) {
+        if ((quizType === "choice" || quizType === "true_false") && Array.isArray(quizNode.options) && quizNode.options.length > 0) {
           previewChildren.push(
             h("ul", { class: "aimd-quiz__options" }, quizNode.options.map(opt =>
               h("li", `${opt.key}. ${opt.text}`),
@@ -396,7 +476,7 @@ function createAimdRenderers(options: UnifiedTokenRendererOptions): Record<strin
 
         const quizPreview = getQuizPreview()
 
-        if (quizPreview.showAnswers && quizType === "choice" && quizNode.answer !== undefined) {
+        if (quizPreview.showAnswers && (quizType === "choice" || quizType === "true_false") && quizNode.answer !== undefined) {
           const answerText = Array.isArray(quizNode.answer)
             ? quizNode.answer.join(", ")
             : String(quizNode.answer)

package/src/index.ts

@@ -51,9 +51,12 @@ export {
   createEmbeddedRenderer,
   createMermaidRenderer,
   createStepCardRenderer,
+  loadShikiHighlighter,
+  type CodeBlockRendererOptions,
   type ElementRenderer,
   hastToVue,
   renderToVNodes,
+  type LoadShikiHighlighterOptions,
   type AimdStepCardRendererOptions,
   type ShikiHighlighter,
   type VueRendererOptions,

package/src/locales.ts

@@ -26,6 +26,7 @@ export interface AimdRendererMessages {
       choice: string
       singleChoice: string
       multipleChoice: string
+      trueFalse: string
       blank: string
       open: string
       scale: string
@@ -86,6 +87,7 @@ const EN_US_MESSAGES: AimdRendererMessages = {
       choice: "choice",
       singleChoice: "Single choice",
       multipleChoice: "Multiple choice",
+      trueFalse: "True/false",
       blank: "blank",
       open: "open",
       scale: "scale",
@@ -122,6 +124,7 @@ const ZH_CN_MESSAGES: AimdRendererMessages = {
       choice: "选择",
       singleChoice: "单选",
       multipleChoice: "多选",
+      trueFalse: "判断",
       blank: "填空",
       open: "开放",
       scale: "量表",
@@ -246,6 +249,8 @@ export function getAimdRendererQuizTypeLabel(
       return messages.quiz.types.choice
     case "blank":
       return messages.quiz.types.blank
+    case "true_false":
+      return messages.quiz.types.trueFalse
     case "open":
       return messages.quiz.types.open
     case "scale":

package/src/styles/katex.css

@@ -1,2 +1,111 @@
 /* Re-export KaTeX base styles for AIMD renderer consumers. */
 @import "katex/dist/katex.min.css";
+
+.aimd-field__metadata-host {
+  position: relative;
+  cursor: help;
+  outline: none;
+}
+
+.aimd-field__metadata-host:hover,
+.aimd-field__metadata-host:focus,
+.aimd-field__metadata-host:focus-within {
+  z-index: 90;
+}
+
+.aimd-field__metadata-host:focus-visible {
+  border-radius: 4px;
+  box-shadow: 0 0 0 2px rgba(65, 129, 253, 0.24);
+}
+
+.aimd-field__metadata-host .aimd-field__title {
+  text-decoration-line: underline;
+  text-decoration-style: dotted;
+  text-decoration-color: rgba(15, 23, 42, 0.36);
+  text-underline-offset: 3px;
+}
+
+.aimd-field__metadata-popover {
+  position: absolute;
+  z-index: 80;
+  inset-inline-start: 0;
+  top: calc(100% + 7px);
+  display: inline-flex;
+  flex-direction: column;
+  gap: 4px;
+  width: max-content;
+  min-width: 220px;
+  max-width: min(360px, 82vw);
+  padding: 8px 10px;
+  border-radius: 8px;
+  background: rgba(15, 23, 42, 0.96);
+  color: #f8fafc;
+  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.28);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.45;
+  letter-spacing: 0;
+  text-align: left;
+  text-transform: none;
+  white-space: normal;
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-2px);
+  transition:
+    opacity 120ms ease,
+    transform 120ms ease,
+    visibility 120ms ease;
+}
+
+.aimd-field__metadata-popover::before {
+  content: "";
+  position: absolute;
+  inset-inline-start: 14px;
+  top: -5px;
+  width: 10px;
+  height: 10px;
+  background: rgba(15, 23, 42, 0.96);
+  transform: rotate(45deg);
+}
+
+.aimd-field__metadata-popover-line {
+  display: block;
+  color: inherit;
+}
+
+.aimd-field__metadata-examples {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  padding-top: 1px;
+}
+
+.aimd-field__metadata-examples-label {
+  color: rgba(226, 232, 240, 0.78);
+}
+
+.aimd-field__metadata-example {
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+  padding: 1px 6px;
+  border: 1px solid rgba(248, 250, 252, 0.18);
+  border-radius: 5px;
+  background: rgba(248, 250, 252, 0.1);
+  color: #f8fafc;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1.45;
+  overflow-wrap: anywhere;
+}
+
+.aimd-field__metadata-host:hover > .aimd-field__metadata-popover,
+.aimd-field__metadata-host:focus > .aimd-field__metadata-popover,
+.aimd-field__metadata-host:focus-within > .aimd-field__metadata-popover {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}

package/src/vue/index.ts

@@ -12,9 +12,12 @@ export {
   createEmbeddedRenderer,
   createMermaidRenderer,
   createStepCardRenderer,
+  loadShikiHighlighter,
+  type CodeBlockRendererOptions,
   type ElementRenderer,
   hastToVue,
   renderToVNodes,
+  type LoadShikiHighlighterOptions,
   type AimdStepCardRendererOptions,
   type ShikiHighlighter,
   type VueRendererOptions,