@airalogy/aimd-renderer 2.4.1

package/src/common/assignerHighlighting.ts

@@ -0,0 +1,159 @@
+import type { Element, Root as HastRoot, Text as HastText } from "hast"
+import type { ShikiHighlighter } from "../vue/vue-renderer"
+import type { AimdRendererOptions } from "./processor"
+import { buildInlineStyle, resolveAssignerVisibility } from "./assignerVisibility"
+
+let assignerHighlighterLoadPromise: Promise<ShikiHighlighter | null> | null = null
+const ASSIGNER_HIGHLIGHT_THEME = "github-light"
+
+// ---------------------------------------------------------------------------
+// HAST helpers (also used by the pipeline coordinator)
+// ---------------------------------------------------------------------------
+
+export function getClassNames(value: unknown): string[] {
+  if (Array.isArray(value)) {
+    return value.filter((item): item is string => typeof item === "string")
+  }
+  if (typeof value === "string" && value.trim()) {
+    return value.trim().split(/\s+/)
+  }
+  return []
+}
+
+export function hasClassName(node: Element, className: string): boolean {
+  return getClassNames(node.properties?.className).includes(className)
+}
+
+export function getCodeLanguage(node: Element): string | null {
+  const languageClass = getClassNames(node.properties?.className).find(name => name.startsWith("language-"))
+  return languageClass ? languageClass.replace("language-", "") : null
+}
+
+export function collectTextContent(node: Element): string {
+  return node.children.map((child) => {
+    if (child.type === "text") {
+      return child.value
+    }
+    if (child.type === "element") {
+      return collectTextContent(child)
+    }
+    return ""
+  }).join("")
+}
+
+export function visitHastElements(node: HastRoot | Element, visitor: (element: Element) => void): void {
+  if (node.type === "element") {
+    visitor(node)
+  }
+
+  const children = "children" in node ? node.children : []
+  for (const child of children) {
+    if (child.type === "element") {
+      visitHastElements(child, visitor)
+    }
+  }
+}
+
+export function findDescendantElement(node: Element, predicate: (element: Element) => boolean): Element | null {
+  for (const child of node.children) {
+    if (child.type !== "element") {
+      continue
+    }
+    if (predicate(child)) {
+      return child
+    }
+    const nested = findDescendantElement(child, predicate)
+    if (nested) {
+      return nested
+    }
+  }
+  return null
+}
+
+// ---------------------------------------------------------------------------
+// Shiki highlighting for assigner code blocks
+// ---------------------------------------------------------------------------
+
+function createHighlightedLineChildren(
+  tokens: Array<{ content: string, variants: Record<string, { color: string }> }>,
+): Array<Element | HastText> {
+  if (tokens.length === 0) {
+    return [{ type: "text", value: "\u00A0" }]
+  }
+
+  return tokens.map((token) => {
+    const color = Object.values(token.variants || {}).find(variant => typeof variant?.color === "string")?.color
+    return {
+      type: "element",
+      tagName: "span",
+      properties: color ? { style: buildInlineStyle({ color }) } : {},
+      children: [{ type: "text", value: token.content || " " }],
+    } as Element
+  })
+}
+
+async function getAssignerHighlighter(): Promise<ShikiHighlighter | null> {
+  if (!assignerHighlighterLoadPromise) {
+    assignerHighlighterLoadPromise = import("shiki")
+      .then(async ({ createHighlighter }) => {
+        const highlighter = await createHighlighter({
+          themes: [ASSIGNER_HIGHLIGHT_THEME],
+          langs: ["javascript", "python"],
+        })
+        return highlighter as unknown as ShikiHighlighter
+      })
+      .catch(() => null)
+  }
+
+  return assignerHighlighterLoadPromise
+}
+
+/**
+ * Walk a HAST tree and apply Shiki syntax highlighting to every visible
+ * assigner code block (`<code>` inside `.aimd-assigner-preview`).
+ */
+export async function highlightVisibleAssigners(tree: HastRoot, options: AimdRendererOptions): Promise<void> {
+  if (resolveAssignerVisibility(options.assignerVisibility) === "hidden") {
+    return
+  }
+
+  const highlighter = await getAssignerHighlighter()
+  if (!highlighter?.codeToTokensWithThemes) {
+    return
+  }
+
+  visitHastElements(tree, (element) => {
+    if (!hasClassName(element, "aimd-assigner-preview")) {
+      return
+    }
+
+    const codeNode = findDescendantElement(element, candidate => candidate.tagName === "code")
+    if (!codeNode || codeNode.properties?.["data-aimd-highlighted"] === "true") {
+      return
+    }
+
+    const lang = getCodeLanguage(codeNode) || "text"
+    const codeContent = collectTextContent(codeNode)
+    const lines = highlighter.codeToTokensWithThemes?.(codeContent, {
+      lang,
+      themes: { light: ASSIGNER_HIGHLIGHT_THEME },
+    }) || []
+
+    codeNode.children = lines.map((lineTokens) => {
+      return {
+        type: "element",
+        tagName: "span",
+        properties: {
+          className: ["aimd-assigner-code__line"],
+          style: buildInlineStyle({ display: "block" }),
+        },
+        children: createHighlightedLineChildren(lineTokens),
+      } as Element
+    })
+    codeNode.properties = {
+      ...codeNode.properties,
+      className: [...getClassNames(codeNode.properties?.className), "aimd-assigner-code"],
+      "data-aimd-highlighted": "true",
+    }
+  })
+}

package/src/common/assignerVisibility.ts

@@ -0,0 +1,289 @@
+import type { Plugin } from "unified"
+import type { AimdRendererOptions } from "./processor"
+import type { AimdAssignerVisibility } from "./processor"
+import { createAimdRendererMessages } from "../locales"
+
+/**
+ * Internal markdown AST node shape used during remark processing.
+ */
+export interface MarkdownNode {
+  type: string
+  children?: MarkdownNode[]
+  lang?: string | null
+  meta?: string | null
+  value?: string
+}
+
+export type MarkdownParent = MarkdownNode & { children: MarkdownNode[] }
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+export function resolveAssignerVisibility(
+  visibility: AimdRendererOptions["assignerVisibility"],
+): AimdAssignerVisibility {
+  switch (visibility) {
+    case "collapsed":
+    case "expanded":
+      return visibility
+    default:
+      return "hidden"
+  }
+}
+
+export function isAssignerCodeNode(node: MarkdownNode): boolean {
+  return node.type === "code" && (node.lang || "").trim().toLowerCase() === "assigner"
+}
+
+export function getAssignerRuntime(meta: string | null | undefined): "client" | "server" {
+  const runtime = String((meta || "").match(/\bruntime\s*=\s*([^\s]+)/)?.[1] || "")
+    .trim()
+    .replace(/^['"]|['"]$/g, "")
+    .toLowerCase()
+  return runtime === "client" ? "client" : "server"
+}
+
+export function getRenderedAssignerLanguage(runtime: "client" | "server"): "javascript" | "python" {
+  return runtime === "client" ? "javascript" : "python"
+}
+
+export function escapeHtml(value: string): string {
+  return value
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+}
+
+export function buildInlineStyle(declarations: Record<string, string>): string {
+  return Object.entries(declarations)
+    .map(([property, value]) => `${property}:${value}`)
+    .join(";")
+}
+
+// ---------------------------------------------------------------------------
+// Presentation helpers
+// ---------------------------------------------------------------------------
+
+interface AssignerPreviewPresentation {
+  badge: string
+  containerStyle: string
+  headerStyle: string
+  titleStyle: string
+  badgeStyle: string
+  preStyle: string
+  codeStyle: string
+}
+
+function getCollapsedAssignerPresentation(runtime: "client" | "server"): AssignerPreviewPresentation {
+  const isClient = runtime === "client"
+  const accent = isClient ? "#0f766e" : "#9a3412"
+  const accentSoft = isClient ? "rgba(15, 118, 110, 0.08)" : "rgba(154, 52, 18, 0.08)"
+  const border = "rgba(148, 163, 184, 0.26)"
+  const codeBackground = "#f8fafc"
+  const codeForeground = "#0f172a"
+  const ruleColor = "rgba(148, 163, 184, 0.18)"
+
+  return {
+    badge: isClient ? "JS" : "PY",
+    containerStyle: buildInlineStyle({
+      margin: "0.85rem 0",
+      border: `1px solid ${border}`,
+      "border-radius": "12px",
+      overflow: "hidden",
+      background: "rgba(255, 255, 255, 0.92)",
+    }),
+    headerStyle: buildInlineStyle({
+      display: "flex",
+      "align-items": "center",
+      "justify-content": "space-between",
+      gap: "0.7rem",
+      padding: "0.6rem 0.8rem",
+      "list-style": "none",
+      background: "rgba(248, 250, 252, 0.92)",
+      color: "#64748b",
+      "font-weight": "600",
+      "font-size": "0.86rem",
+    }),
+    titleStyle: buildInlineStyle({
+      display: "inline-flex",
+      "align-items": "center",
+      gap: "0.45rem",
+      "letter-spacing": "0.01em",
+    }),
+    badgeStyle: buildInlineStyle({
+      display: "inline-flex",
+      "align-items": "center",
+      "justify-content": "center",
+      padding: "0.12rem 0.44rem",
+      "min-width": "2rem",
+      "border-radius": "999px",
+      border: `1px solid ${accentSoft}`,
+      background: accentSoft,
+      color: accent,
+      "font-size": "0.72rem",
+      "font-weight": "700",
+      "letter-spacing": "0.08em",
+    }),
+    preStyle: buildInlineStyle({
+      margin: "0",
+      padding: "0.8rem 0.85rem 0.9rem",
+      overflow: "auto",
+      background: codeBackground,
+      border: "0",
+      "border-top": `1px solid ${ruleColor}`,
+      "tab-size": "2",
+    }),
+    codeStyle: buildInlineStyle({
+      display: "block",
+      color: codeForeground,
+      background: "transparent",
+      "font-family": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, monospace",
+      "font-size": "0.88rem",
+      "line-height": "1.6",
+      "white-space": "pre",
+      padding: "0",
+    }),
+  }
+}
+
+function getExpandedAssignerPresentation(runtime: "client" | "server"): AssignerPreviewPresentation {
+  const presentation = getCollapsedAssignerPresentation(runtime)
+  return {
+    ...presentation,
+    containerStyle: buildInlineStyle({
+      ...Object.fromEntries(presentation.containerStyle.split(";").filter(Boolean).map(rule => {
+        const [property, value] = rule.split(":")
+        return [property, value]
+      })),
+      margin: "1rem 0",
+    }),
+    headerStyle: buildInlineStyle({
+      ...Object.fromEntries(presentation.headerStyle.split(";").filter(Boolean).map(rule => {
+        const [property, value] = rule.split(":")
+        return [property, value]
+      })),
+      cursor: "default",
+    }),
+  }
+}
+
+function createAssignerHeaderHtml(summary: string, presentation: AssignerPreviewPresentation): string {
+  return `<span style="${presentation.titleStyle}">${escapeHtml(summary)}</span>`
+    + `<span aria-hidden="true" style="${presentation.badgeStyle}">${presentation.badge}</span>`
+}
+
+// ---------------------------------------------------------------------------
+// Assigner AST node builders
+// ---------------------------------------------------------------------------
+
+function buildExpandedAssignerNode(
+  value: string,
+  runtime: "client" | "server",
+  options: AimdRendererOptions,
+): MarkdownNode {
+  const messages = createAimdRendererMessages(options.locale, options.messages)
+  const language = getRenderedAssignerLanguage(runtime)
+  const summary = runtime === "client"
+    ? messages.assigner.clientSummary
+    : messages.assigner.serverSummary
+  const presentation = getExpandedAssignerPresentation(runtime)
+
+  return {
+    type: "html",
+    value:
+      `<div class="aimd-assigner-preview aimd-assigner-preview--expanded aimd-assigner-preview--${runtime}" data-aimd-assigner-runtime="${runtime}" style="${presentation.containerStyle}">`
+      + `<div style="${presentation.headerStyle}">`
+      + createAssignerHeaderHtml(summary, presentation)
+      + "</div>"
+      + `<pre style="${presentation.preStyle}"><code class="language-${language}" style="${presentation.codeStyle}">${escapeHtml(value)}</code></pre>`
+      + "</div>",
+  }
+}
+
+function buildCollapsedAssignerNode(
+  value: string,
+  runtime: "client" | "server",
+  options: AimdRendererOptions,
+): MarkdownNode {
+  const messages = createAimdRendererMessages(options.locale, options.messages)
+  const language = getRenderedAssignerLanguage(runtime)
+  const summary = runtime === "client"
+    ? messages.assigner.clientSummary
+    : messages.assigner.serverSummary
+  const presentation = getCollapsedAssignerPresentation(runtime)
+
+  return {
+    type: "html",
+    value:
+      `<details class="aimd-assigner-preview aimd-assigner-preview--collapsed aimd-assigner-preview--${runtime}" data-aimd-assigner-runtime="${runtime}" style="${presentation.containerStyle}">`
+      + `<summary style="${presentation.headerStyle}">`
+      + createAssignerHeaderHtml(summary, presentation)
+      + "</summary>"
+      + `<pre style="${presentation.preStyle}"><code class="language-${language}" style="${presentation.codeStyle}">${escapeHtml(value)}</code></pre>`
+      + "</details>",
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Tree visitor
+// ---------------------------------------------------------------------------
+
+export function visitMarkdownParents(node: MarkdownNode, visitor: (parent: MarkdownParent) => void): void {
+  if (!Array.isArray(node.children)) {
+    return
+  }
+
+  const parent = node as MarkdownParent
+  visitor(parent)
+
+  for (const child of parent.children) {
+    visitMarkdownParents(child, visitor)
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Remark plugins
+// ---------------------------------------------------------------------------
+
+/**
+ * Remark plugin that inserts visible assigner preview nodes (collapsed or
+ * expanded) next to each assigner code block in the markdown AST.
+ */
+export const remarkInsertVisibleAssigners: Plugin<[AimdRendererOptions?], MarkdownNode> = (options = {}) => {
+  return (tree) => {
+    const visibility = resolveAssignerVisibility(options.assignerVisibility)
+    if (visibility === "hidden") {
+      return
+    }
+
+    visitMarkdownParents(tree, (parent) => {
+      for (let index = 0; index < parent.children.length; index++) {
+        const child = parent.children[index]
+        if (!isAssignerCodeNode(child)) {
+          continue
+        }
+
+        const runtime = getAssignerRuntime(child.meta)
+        const replacement = visibility === "expanded"
+          ? buildExpandedAssignerNode(child.value || "", runtime, options)
+          : buildCollapsedAssignerNode(child.value || "", runtime, options)
+
+        parent.children.splice(index, 0, replacement)
+        index += 1
+      }
+    })
+  }
+}
+
+/**
+ * Remark plugin that strips all assigner code blocks from the markdown AST.
+ */
+export const remarkStripAssignerCodeBlocks: Plugin<[], MarkdownNode> = () => {
+  return (tree) => {
+    visitMarkdownParents(tree, (parent) => {
+      parent.children = parent.children.filter(child => !isAssignerCodeNode(child))
+    })
+  }
+}

package/src/common/eventKeys.ts

@@ -0,0 +1,10 @@
+/**
+ * Event bus keys for AIMD system
+ */
+import type { InjectionKey } from "vue"
+
+export const fieldEventKey: InjectionKey<{ name: "field-event" }> = Symbol("symbol-field-event-key")
+export const protocolKey: InjectionKey<{ name: "protocol-key" }> = Symbol("symbol-protocol-key")
+export const draftEventKey: InjectionKey<{ name: "draft-event" }> = Symbol("draft-event-key")
+export const reportEventKey: InjectionKey<{ name: "report-event" }> = Symbol("symbol-report-event-key")
+export const bubbleMenuEventKey: InjectionKey<{ name: "bubble-menu-event" }> = Symbol("symbol-bubble-menu-event-key")

package/src/common/figureNumbering.ts

@@ -0,0 +1,126 @@
+import type { Element, Text as HastText, Root as HastRoot } from "hast"
+import type { ExtractedAimdFields } from "@airalogy/aimd-core/types"
+
+// ---------------------------------------------------------------------------
+// Figure numbering helpers
+// ---------------------------------------------------------------------------
+
+/**
+ * Build a map from figure id to its sequence number based on the
+ * extracted fields. The sequence is assigned in document order (1-based).
+ */
+export function buildFigureSequenceMap(fields: ExtractedAimdFields): Map<string, number> {
+  const sequenceMap = new Map<string, number>()
+  const figs = fields.fig || []
+  let seq = 1
+  for (const fig of figs) {
+    const id = typeof fig === "string" ? fig : (fig as any)?.id
+    if (typeof id === "string" && id.trim() && !sequenceMap.has(id)) {
+      sequenceMap.set(id, seq++)
+    }
+  }
+  return sequenceMap
+}
+
+/**
+ * Build the HAST children array for a figure AIMD node.
+ *
+ * Returns `[imgElement]` or `[imgElement, figcaptionElement]` depending on
+ * whether a title or legend is present.
+ */
+export function buildFigureChildren(figNode: {
+  id: string
+  src?: string
+  title?: string
+  legend?: string
+  sequence?: number | string
+}): (Element | HastText)[] {
+  const figSrc = figNode.src || ""
+  const figTitle = figNode.title
+  const figLegend = figNode.legend
+
+  const children: (Element | HastText)[] = []
+
+  // Create img element
+  children.push({
+    type: "element",
+    tagName: "img",
+    properties: {
+      src: figSrc,
+      alt: figTitle || figNode.id,
+      className: ["aimd-figure__image"],
+    },
+    children: [],
+  } as Element)
+
+  // Create figcaption if title or legend exists
+  if (figTitle || figLegend) {
+    const captionChildren: (Element | HastText)[] = []
+
+    if (figTitle) {
+      captionChildren.push({
+        type: "element",
+        tagName: "div",
+        properties: { className: ["aimd-figure__title"] },
+        children: [{ type: "text", value: figTitle }],
+      } as Element)
+    }
+
+    if (figLegend) {
+      captionChildren.push({
+        type: "element",
+        tagName: "div",
+        properties: { className: ["aimd-figure__legend"] },
+        children: [{ type: "text", value: figLegend }],
+      } as Element)
+    }
+
+    children.push({
+      type: "element",
+      tagName: "figcaption",
+      properties: { className: ["aimd-figure__caption"] },
+      children: captionChildren,
+    } as Element)
+  }
+
+  return children
+}
+
+/**
+ * Walk the HAST tree and stamp each `[data-aimd-type="fig"]` element with
+ * its 1-based sequence number as `data-aimd-fig-sequence`.
+ *
+ * This is a post-processing pass that runs after the initial HAST is built
+ * so that figure numbers are consistent with document order regardless of
+ * any reordering caused by rehype plugins.
+ */
+export function assignFigureSequenceNumbers(
+  tree: HastRoot,
+  fields: ExtractedAimdFields,
+): void {
+  const sequenceMap = buildFigureSequenceMap(fields)
+  if (sequenceMap.size === 0) {
+    return
+  }
+
+  const visit = (node: HastRoot | Element): void => {
+    if (node.type === "element") {
+      const el = node as Element
+      if (el.properties?.["data-aimd-type"] === "fig") {
+        const figId = el.properties["data-aimd-fig-id"] as string | undefined
+        if (figId && sequenceMap.has(figId)) {
+          el.properties["data-aimd-fig-sequence"] = String(sequenceMap.get(figId))
+        }
+      }
+    }
+
+    const children = "children" in node ? node.children : []
+    for (const child of children) {
+      if (child.type === "element") {
+        visit(child)
+      }
+    }
+  }
+
+  visit(tree)
+}