@zombie-mermaid/core 4.1.0 → 4.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zombie-mermaid/core",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "license": "MIT",
   "description": "Shared types, theme, and text/statement utilities used by every zombie-mermaid renderer.",
   "repository": {

package/src/__tests__/diagram-type.test.ts

@@ -59,6 +59,21 @@ describe('detectDiagramType', () => {
     expect(detectDiagramType('xychart-foo\nx-axis [a, b]')).toBe('flowchart')
   })
 
+  it('detects pie charts with or without trailing header content', () => {
+    expect(detectDiagramType('pie\n"A" : 1')).toBe('pie')
+    expect(detectDiagramType('  pie  ')).toBe('pie')
+    expect(detectDiagramType('pie showData\n"A" : 1')).toBe('pie')
+    expect(detectDiagramType('pie title Pets\n"A" : 1')).toBe('pie')
+    expect(detectDiagramType('pie\ttitle Pets')).toBe('pie')
+    expect(detectDiagramType('%% comment\npie\n"A" : 1')).toBe('pie')
+  })
+
+  it('matches the pie header case-sensitively and as a whole word, like Mermaid', () => {
+    expect(detectDiagramType('Pie\n"A" : 1')).toBe('flowchart')
+    expect(detectDiagramType('PIE\n"A" : 1')).toBe('flowchart')
+    expect(detectDiagramType('pieChart\n"A" : 1')).toBe('flowchart')
+  })
+
   it('falls back to flowchart for unrecognized input', () => {
     expect(detectDiagramType('')).toBe('flowchart')
     expect(detectDiagramType('not a real header')).toBe('flowchart')

package/src/diagram-type.ts

@@ -25,6 +25,7 @@ export const DIAGRAM_TYPES = [
   'architecture',
 
   'c4',
+  'pie',
 ] as const
 
 /** The diagram types this library can detect and route to a renderer. */
@@ -40,7 +41,14 @@ export type DiagramType = (typeof DIAGRAM_TYPES)[number]
  * routing and parsing can never disagree about where the header ends.
  */
 export function detectDiagramType(text: string): DiagramType {
-  const firstLine = splitStatements(text)[0]?.text.toLowerCase() ?? ''
+  const header = splitStatements(text)[0]?.text ?? ''
+  const firstLine = header.toLowerCase()
+
+  // Case-sensitive, unlike the other headers: Mermaid's pie detector is
+  // `/^\s*pie/` and its grammar keyword `pie` must be followed by
+  // whitespace, a comment, or the end of input, so `Pie` and `pie:` are not
+  // pie charts there either.
+  if (/^pie(?:\s|$)/.test(header)) return 'pie'
 
   if (/^xychart(?:-beta)?(?:\s|$)/.test(firstLine)) return 'xychart'
   if (/^architecture(?:-beta)?\s*$/.test(firstLine)) return 'architecture'

package/src/multiline-utils.ts

@@ -30,7 +30,7 @@ export function normalizeBrTags(label: string): string {
       ? unquoted.slice(1, -1)
       : unquoted
 
-  return (
+  return decodeMermaidEntities(
     unfenced
       .replace(/<br\s*\/?>/gi, '\n')
       .replace(/\\n/g, '\n')
@@ -38,7 +38,71 @@ export function normalizeBrTags(label: string): string {
       // Markdown formatting → HTML tags (order matters: ** before *)
       .replace(/\*\*(.+?)\*\*/g, '<b>$1</b>')
       .replace(/(?<!\*)\*([^\s*](?:[^*]*[^\s*])?)\*(?!\*)/g, '<i>$1</i>')
-      .replace(/~~(.+?)~~/g, '<s>$1</s>')
+      .replace(/~~(.+?)~~/g, '<s>$1</s>'),
+  )
+}
+
+const MAX_CODEPOINT = 0x10ffff
+
+const NAMED_ENTITIES: Record<string, string> = {
+  quot: '"',
+  amp: '&',
+  lt: '<',
+  gt: '>',
+  apos: "'",
+  nbsp: '\u00a0',
+}
+
+/** Code point -> character, or undefined when it is not a usable scalar value. */
+function codePointToChar(cp: number): string | undefined {
+  const usable =
+    Number.isInteger(cp) &&
+    cp > 0 &&
+    cp <= MAX_CODEPOINT &&
+    !(cp >= 0xd800 && cp <= 0xdfff)
+  return usable ? String.fromCodePoint(cp) : undefined
+}
+
+/**
+ * Decode Mermaid's entity codes (`#quot;`, `#lt;`, `#35;`, `#x5B;`), the way
+ * Mermaid writes characters that would otherwise end a label or break its
+ * syntax. Call it on a single already-parsed label, never on diagram source:
+ * decoding up front would let the characters it produces (`<`, `"`, `[`)
+ * change how the line parses, and would hit `#fff;` colors in style lines.
+ * Unknown names and out-of-range numbers are left untouched.
+ */
+export function decodeMermaidEntities(text: string): string {
+  return text.replace(
+    /#([xX][0-9a-fA-F]+|[0-9]+|[a-zA-Z]+);/g,
+    (match, code: string) => {
+      if (/^x/i.test(code)) {
+        return codePointToChar(parseInt(code.slice(1), 16)) ?? match
+      }
+      if (/^[0-9]+$/.test(code)) {
+        return codePointToChar(parseInt(code, 10)) ?? match
+      }
+      return NAMED_ENTITIES[code.toLowerCase()] ?? match
+    },
+  )
+}
+
+/**
+ * Decode HTML/XML entities (`&quot;`, `&lt;`, `&#35;`, `&#x5B;`) in one label,
+ * in a single pass so `&amp;lt;` becomes `&lt;` rather than `<`. Used by the
+ * ASCII renderer, which (unlike SVG) has no source-level decode step.
+ */
+export function decodeXmlEntitiesInLabel(text: string): string {
+  return text.replace(
+    /&(#[xX][0-9a-fA-F]+|#[0-9]+|quot|amp|lt|gt|apos);/g,
+    (match, code: string) => {
+      if (/^#x/i.test(code)) {
+        return codePointToChar(parseInt(code.slice(2), 16)) ?? match
+      }
+      if (code.startsWith('#')) {
+        return codePointToChar(parseInt(code.slice(1), 10)) ?? match
+      }
+      return NAMED_ENTITIES[code] ?? match
+    },
   )
 }
 

package/src/theme.ts

@@ -560,6 +560,14 @@ function nextTitleId(): string {
   return `zm-title-${titleIdCounter}`
 }
 
+/** Same scheme as `nextTitleId`, for the root `<desc>` (`description`). */
+let descIdCounter = 0
+
+function nextDescId(): string {
+  descIdCounter += 1
+  return `zm-desc-${descIdCounter}`
+}
+
 /**
  * Test-only: reset the title-id counter so id assertions in tests don't
  * depend on how many titled diagrams earlier tests in the same file rendered.
@@ -567,6 +575,7 @@ function nextTitleId(): string {
  */
 export function __resetSvgTitleIdCounterForTests(): void {
   titleIdCounter = 0
+  descIdCounter = 0
 }
 
 /**
@@ -669,6 +678,11 @@ export function themeStyleDeclarations(
  *                              See #239 — forces no root `role` so the link
  *                              stays reachable, regardless of `decorative`.
  * @param styleAttribute - Emit the root `style="…"` attribute. Default true.
+ * @param description - Accessible description: a `<desc id="zm-desc-N">`
+ *                      after the title plus `aria-describedby` on the root.
+ *                      Follows the same rules as `title` (dropped when
+ *                      decorative without interactive links). Used for
+ *                      Mermaid's `accDescr`.
  */
 export function svgOpenTag(
   width: number,
@@ -679,6 +693,7 @@ export function svgOpenTag(
   decorative?: boolean,
   hasInteractiveLinks?: boolean,
   styleAttribute: boolean = true,
+  description?: string,
 ): string {
   const styleAttr = styleAttribute
     ? ` style="${themeStyleDeclarations(colors, transparent)}"`
@@ -686,23 +701,24 @@ export function svgOpenTag(
 
   let a11yAttrs = ''
   let titleEl = ''
-  if (hasInteractiveLinks) {
-    // No root role: role="img" or aria-hidden would hide a real, focusable
-    // <a href> descendant from assistive tech while leaving it Tab-reachable.
-    if (title) {
-      const id = nextTitleId()
-      a11yAttrs = ` aria-labelledby="${id}"`
-      titleEl = `\n  <title id="${id}">${escapeXml(title)}</title>`
-    }
-  } else if (decorative) {
+  const named = hasInteractiveLinks || !decorative
+  if (!hasInteractiveLinks && decorative) {
     a11yAttrs = ' aria-hidden="true"'
-  } else {
+  } else if (!hasInteractiveLinks) {
+    // No root role with interactive links: role="img" or aria-hidden would
+    // hide a real, focusable <a href> descendant from assistive tech while
+    // leaving it Tab-reachable.
     a11yAttrs = ' role="img"'
-    if (title) {
-      const id = nextTitleId()
-      a11yAttrs += ` aria-labelledby="${id}"`
-      titleEl = `\n  <title id="${id}">${escapeXml(title)}</title>`
-    }
+  }
+  if (named && title) {
+    const id = nextTitleId()
+    a11yAttrs += ` aria-labelledby="${id}"`
+    titleEl = `\n  <title id="${id}">${escapeXml(title)}</title>`
+  }
+  if (named && description) {
+    const id = nextDescId()
+    a11yAttrs += ` aria-describedby="${id}"`
+    titleEl += `\n  <desc id="${id}">${escapeXml(description)}</desc>`
   }
 
   return (