@jarenjs/mermaid 0.34.0

package/src/render/index.js

@@ -0,0 +1,93 @@
+//@ts-check
+/**
+ * @file The render dispatcher. Turns a `DiagramDocument` (or raw source)
+ * into a pure-vnode SVG, choosing the specialized layout+render closure
+ * per diagram type, and **never throws**: a
+ * parse/layout error becomes an error vnode.
+ */
+
+import { parseMermaid } from '../parser/index.js';
+import { createTheme } from '../theme.js';
+import { MermaidParseError } from '../errors.js';
+import { layoutFlowchart } from '../layout/flowchart.js';
+import { layoutState } from '../layout/state.js';
+import { layoutSequence } from '../layout/sequence.js';
+import { renderFlowchart } from './flowchart.js';
+import { renderSequence } from './sequence.js';
+import { renderPie, renderStructured, renderPlaceholder, structuredSections } from './misc.js';
+import { errorVnode } from './error.js';
+
+/**
+ * Compute the pure `PositionedDiagram` scene for a document (no vnode).
+ * Returns `null` for types without a geometric layout (structured/raw).
+ * @param {import('../ast.js').DiagramDocument} doc
+ * @returns {any}
+ */
+export function layoutDiagram(doc) {
+  switch (doc.diagram) {
+    case 'flowchart': return layoutFlowchart(doc.ast);
+    case 'state': return layoutState(doc.ast);
+    case 'sequence': return layoutSequence(doc.ast);
+    default: return null;
+  }
+}
+
+/**
+ * Render a doc or source to a pure-vnode SVG. Error-safe.
+ * @param {import('../ast.js').DiagramDocument | string} docOrSource
+ * @param {{ theme?: any, [k: string]: any }} [options]
+ * @returns {any} an SVG vnode
+ */
+export function diagramToVnode(docOrSource, options = {}) {
+  let doc;
+  try {
+    doc = typeof docOrSource === 'string' ? parseMermaid(docOrSource, options) : docOrSource;
+  }
+  catch (err) {
+    // a parse failure has no document, so only the caller's theme is known
+    return toError(err, typeof docOrSource === 'string' ? docOrSource : '', createTheme(options.theme ?? 'default'));
+  }
+  try {
+    const themeArg = options.theme ?? doc.config?.theme ?? doc.config ?? 'default';
+    const theme = createTheme(themeArg);
+    const hash = doc.meta?.hash ?? '0';
+    switch (doc.diagram) {
+      case 'flowchart':
+        return renderFlowchart(layoutFlowchart(doc.ast), theme, hash);
+      case 'state':
+        // a state diagram IS a graph: the state adapter feeds the same
+        // layout and renderer as flowcharts (MERMAID-FORMAT §6)
+        return renderFlowchart(layoutState(doc.ast), theme, hash, 'mermaid mm-svg mm-state');
+      case 'sequence':
+        return renderSequence(layoutSequence(doc.ast), theme, hash);
+      case 'pie':
+        return renderPie(doc.ast, theme, hash);
+      case 'class':
+      case 'er':
+      case 'gantt': {
+        const { title, sections } = structuredSections(doc.diagram, doc.ast);
+        return renderStructured(title, sections, theme, hash);
+      }
+      default:
+        return renderPlaceholder(doc.diagram, theme, hash);
+    }
+  }
+  catch (err) {
+    return toError(err, '', createTheme(options.theme ?? 'default'));
+  }
+}
+
+/**
+ * @param {any} err
+ * @param {string} source
+ * @param {ReturnType<typeof createTheme>} theme
+ * @returns {any}
+ */
+function toError(err, source, theme) {
+  if (err instanceof MermaidParseError) {
+    const lines = source.split(/\r\n?|\n/);
+    const sourceLine = err.line > 0 && err.line <= lines.length ? lines[err.line - 1] : '';
+    return errorVnode(err.message, err.line, sourceLine, theme);
+  }
+  return errorVnode(err && err.message ? String(err.message) : String(err), 0, '', theme);
+}

package/src/render/misc.js

@@ -0,0 +1,135 @@
+//@ts-check
+/**
+ * @file Renderers for the first-class types beyond flowchart and
+ * sequence, and an honest placeholder for the deferred secondary
+ * types. Pie is
+ * a real chart; class/ER/state/gantt render as structured panels — a
+ * readable, geometry-light view that renders without error and so counts
+ * honestly in the coverage scorecard. Secondary types (mindmap,
+ * gitGraph, journey, timeline) render a labeled "not yet laid out"
+ * placeholder.
+ */
+
+import { svgRoot, rect, path, textAt, num, textWidth } from '@jarenjs/view/helpers';
+import { buildPieAST, renderPieAST, CATEGORICAL } from '@jarenjs/charts';
+import { mermaidPieToChartAST } from '@jarenjs/charts/transforms/mermaid-adapter';
+
+/**
+ * Pie rendering delegates to `@jarenjs/charts` (the pie engine's single
+ * home); the options carry the mermaid class names, palette and theme
+ * so the SVG is byte-identical to the pre-delegation renderer.
+ * @param {any} ast pie AST
+ * @param {any} theme
+ * @param {string} hash
+ * @returns {any}
+ */
+export function renderPie(ast, theme, hash) {
+  const { config, data } = mermaidPieToChartAST(ast);
+  return renderPieAST(buildPieAST(data, config), theme, hash, {
+    rootClass: 'mermaid mm-svg',
+    keyPrefix: 'mmpie-',
+    sliceClass: 'mm-pie-slice',
+    legendClass: 'mm-pie-legend',
+    palette: CATEGORICAL,
+    textColor: theme.tokens.nodeText,
+    sliceStroke: '#fff',
+    // A mermaid diagram's SVG is a byte-stable contract; the per-slice
+    // hover text charts adds for its own pies would break it.
+    titles: false,
+  });
+}
+
+/**
+ * Render a structured panel: a title and a list of sections, each a
+ * bordered box with a heading and text rows.
+ * @param {string} title
+ * @param {{ heading: string, rows: string[] }[]} sections
+ * @param {any} theme
+ * @param {string} hash
+ * @returns {any}
+ */
+export function renderStructured(title, sections, theme, hash) {
+  const t = theme.tokens;
+  const fs = 13;
+  const rowH = 22;
+  const headH = 26;
+  const boxW = Math.max(180, ...sections.flatMap((s) => [
+    textWidth(s.heading, fs, 700) + 24,
+    ...s.rows.map((r) => textWidth(r, fs) + 24),
+  ]));
+  const gap = 16;
+  const children = [];
+  let y = 40;
+  children.push(textAt(16, 24, title, fs + 3, { 'font-weight': 'bold', fill: t.nodeText }));
+  for (const section of sections) {
+    const boxH = headH + section.rows.length * rowH + 8;
+    children.push(rect(16, y, boxW, boxH, { rx: 4, fill: t.nodeFill, stroke: t.nodeStroke, 'stroke-width': 1, class: 'mm-panel' }));
+    children.push(textAt(26, y + 17, section.heading, fs, { 'font-weight': 'bold', fill: t.nodeText }));
+    children.push(path(`M16,${num(y + headH)} h${boxW}`, { stroke: t.nodeStroke, 'stroke-width': 1 }));
+    for (let i = 0; i < section.rows.length; i++) {
+      children.push(textAt(26, y + headH + 16 + i * rowH, section.rows[i], fs, { fill: t.nodeText }));
+    }
+    y += boxH + gap;
+  }
+  return svgRoot('mermaid mm-svg', boxW + 32, y, theme, children,
+    'mmstruct-' + hash, { fit: false });
+}
+
+/**
+ * The honest placeholder for a parse-accepted secondary type.
+ * @param {string} type
+ * @param {any} theme
+ * @param {string} hash
+ * @returns {any}
+ */
+export function renderPlaceholder(type, theme, hash) {
+  const t = theme.tokens;
+  const width = 380;
+  const height = 84;
+  return svgRoot('mermaid mm-svg', width, height, theme, [
+    rect(1, 1, width - 2, height - 2, { rx: 6, fill: t.clusterFill, stroke: t.clusterStroke, 'stroke-width': 1, 'stroke-dasharray': '5 4' }),
+    textAt(width / 2, 36, `${type} diagram`, 15, { 'font-weight': 'bold', 'text-anchor': 'middle', fill: t.nodeText }),
+    textAt(width / 2, 58, 'parsed — not yet laid out in v1', 12, { 'text-anchor': 'middle', fill: t.nodeText }),
+  ], 'mmph-' + hash);
+}
+
+/**
+ * Build the sections for the structured renderers.
+ * @param {string} diagram
+ * @param {any} ast
+ * @returns {{ title: string, sections: { heading: string, rows: string[] }[] }}
+ */
+export function structuredSections(diagram, ast) {
+  if (diagram === 'class') {
+    const sections = ast.classes.map((c) => ({
+      heading: c.name,
+      rows: c.members.map((m) => `${m.visibility ?? ''}${m.text}`),
+    }));
+    if (ast.relations.length) {
+      sections.push({ heading: 'relations', rows: ast.relations.map((r) => `${r.from} ${r.type} ${r.to}${r.label ? ' : ' + r.label : ''}`) });
+    }
+    return { title: 'Class diagram', sections };
+  }
+  if (diagram === 'er') {
+    const sections = ast.entities.map((e) => ({
+      heading: e.name,
+      rows: e.attributes.map((a) => `${a.type} ${a.name}${a.keys.length ? ' ' + a.keys.join(',') : ''}`),
+    }));
+    if (ast.relationships.length) {
+      sections.push({ heading: 'relationships', rows: ast.relationships.map((r) => `${r.left} ${r.leftCard}--${r.rightCard} ${r.right} : ${r.label}`) });
+    }
+    return { title: 'Entity–relationship', sections };
+  }
+  // state diagrams left this path for the graph layout; a stray call
+  // must fail loudly rather than quietly resurrect the old panel
+  if (diagram !== 'gantt') {
+    throw new Error(`structuredSections: '${diagram}' is not a structured-panel type`);
+  }
+  return {
+    title: 'Gantt' + (ast.meta.title ? ': ' + ast.meta.title : ''),
+    sections: ast.sections.map((s) => ({
+      heading: s.name ?? 'tasks',
+      rows: s.tasks.map((tk) => `${tk.name} — ${tk.info}`),
+    })),
+  };
+}

package/src/render/sequence.js

@@ -0,0 +1,152 @@
+//@ts-check
+/**
+ * @file Sequence renderer: `PositionedDiagram` → pure-vnode SVG.
+ * Actor boxes (top and bottom), dashed lifelines, activation bars,
+ * messages with solid/dotted lines and arrow/open/cross/async heads,
+ * note boxes and block frames.
+ */
+
+import { svgRoot, group, rect, path, line, polygon, textAt, textLines, num } from '@jarenjs/view/helpers';
+
+/**
+ * @param {any} scene PositionedDiagram (sequence)
+ * @param {{ tokens: Record<string,string>, cssVars: Record<string,string> }} theme
+ * @param {string} hash
+ * @returns {any}
+ */
+export function renderSequence(scene, theme, hash) {
+  const t = theme.tokens;
+  const fs = scene.fontSize;
+  const children = [];
+
+  // Block frames (behind).
+  for (let i = 0; i < scene.blocks.length; i++) {
+    const b = scene.blocks[i];
+    children.push(renderBlock(b, t, fs, i));
+  }
+
+  // Lifelines.
+  for (const a of scene.actors) {
+    children.push(line(a.x, scene.lineTop, a.x, a.bottomY, {
+      class: 'mm-lifeline', stroke: t.lifeline, 'stroke-width': 1, 'stroke-dasharray': '3 3',
+    }));
+  }
+
+  // Activation bars.
+  for (const act of scene.activations) {
+    children.push(rect(act.x, act.y, act.w, act.h, {
+      class: 'mm-activation', fill: t.activationFill, stroke: t.activationStroke, 'stroke-width': 1,
+    }));
+  }
+
+  // Actor boxes, top and bottom.
+  for (const a of scene.actors) {
+    children.push(actorBox(a, a.boxY, t, fs));
+    children.push(actorBox(a, a.bottomY, t, fs));
+  }
+
+  // Notes.
+  for (let i = 0; i < scene.notes.length; i++) {
+    const nnode = scene.notes[i];
+    children.push(group({ class: 'mm-note', key: 'note-' + i }, [
+      rect(nnode.x, nnode.y, nnode.w, nnode.h, { fill: t.noteFill, stroke: t.noteStroke, 'stroke-width': 1 }),
+      textLines(nnode.x + nnode.w / 2, nnode.y + nnode.h / 2, nnode.text.split('\n'), fs, { fill: t.noteText }),
+    ]));
+  }
+
+  // Messages.
+  for (let i = 0; i < scene.messages.length; i++) {
+    children.push(renderMessage(scene.messages[i], t, fs, i));
+  }
+
+  return svgRoot('mermaid mm-svg', scene.width, scene.height, theme, children,
+    'mmseq-' + hash, { fit: false });
+}
+
+/**
+ * @param {any} a actor @param {number} y box top @param {Record<string,string>} t @param {number} fs
+ * @returns {any}
+ */
+function actorBox(a, y, t, fs) {
+  return group({ class: 'mm-actor' }, [
+    rect(a.boxX, y, a.w, a.h, { rx: 3, fill: t.actorFill, stroke: t.actorStroke, 'stroke-width': 1 }),
+    textLines(a.x, y + a.h / 2, [a.label], fs, { fill: t.actorText, 'font-weight': 'bold' }),
+  ]);
+}
+
+/**
+ * @param {any} m @param {Record<string,string>} t @param {number} fs @param {number} i
+ * @returns {any}
+ */
+function renderMessage(m, t, fs, i) {
+  const stroke = t.lineColor;
+  const dash = m.line === 'dotted' ? '4 3' : null;
+  const parts = [];
+  const lineProps = { class: 'mm-message-line', stroke, 'stroke-width': 1.2, fill: 'none' };
+  if (dash) lineProps['stroke-dasharray'] = dash;
+
+  if (m.self) {
+    const loopW = 40;
+    const y0 = m.y;
+    const y1 = m.y + 26;
+    parts.push(path(`M${num(m.x1)},${num(y0)} h${loopW} v${y1 - y0} h${-loopW}`, lineProps));
+    parts.push(arrowHead({ x: m.x1 + 6, y: y1 }, { x: m.x1 + loopW, y: y1 }, m.head, stroke));
+    parts.push(textAt(m.x1 + loopW + 6, (y0 + y1) / 2, m.label, fs, { class: 'mm-message-label', fill: t.edgeLabelText }));
+  }
+  else {
+    parts.push(line(m.x1, m.y, m.x2, m.y, lineProps));
+    parts.push(arrowHead({ x: m.x2, y: m.y }, { x: m.x1, y: m.y }, m.head, stroke));
+    const midX = (m.x1 + m.x2) / 2;
+    parts.push(textAt(midX, m.y - 6, m.label, fs, {
+      'text-anchor': 'middle', class: 'mm-message-label', fill: t.edgeLabelText,
+    }));
+  }
+  return group({ class: 'mm-message', key: 'msg-' + i }, parts);
+}
+
+/**
+ * @param {{x:number,y:number}} tip @param {{x:number,y:number}} from
+ * @param {string} head @param {string} color
+ * @returns {any}
+ */
+function arrowHead(tip, from, head, color) {
+  const dir = tip.x >= from.x ? 1 : -1;
+  const size = 8;
+  if (head === 'cross') {
+    const s = 5;
+    return path(
+      `M${num(tip.x)},${num(tip.y - s)} L${num(tip.x - dir * s)},${num(tip.y + s)}`
+      + ` M${num(tip.x)},${num(tip.y + s)} L${num(tip.x - dir * s)},${num(tip.y - s)}`,
+      { stroke: color, 'stroke-width': 1.5, fill: 'none' });
+  }
+  if (head === 'open') {
+    return path(
+      `M${num(tip.x - dir * size)},${num(tip.y - 5)} L${num(tip.x)},${num(tip.y)} L${num(tip.x - dir * size)},${num(tip.y + 5)}`,
+      { stroke: color, 'stroke-width': 1.2, fill: 'none' });
+  }
+  // filled arrow / async point → filled triangle
+  return polygon([
+    { x: tip.x, y: tip.y },
+    { x: tip.x - dir * size, y: tip.y - 4 },
+    { x: tip.x - dir * size, y: tip.y + 4 },
+  ], { class: 'mm-arrowhead', fill: color, stroke: color });
+}
+
+/**
+ * @param {any} b @param {Record<string,string>} t @param {number} fs @param {number} i
+ * @returns {any}
+ */
+function renderBlock(b, t, fs, i) {
+  const label = b.blockType + (b.label ? ' [' + b.label + ']' : '');
+  const tabW = Math.max(48, label.length * fs * 0.5 + 16);
+  const parts = [
+    rect(b.x, b.y, b.w, b.h, { class: 'mm-block', fill: 'none', stroke: t.actorStroke, 'stroke-width': 1 }),
+    path(`M${num(b.x)},${num(b.y + 18)} h${num(tabW)} l-8,6 h${num(-tabW + 8)} Z`, { fill: t.clusterFill, stroke: t.actorStroke, 'stroke-width': 1 }),
+    textAt(b.x + 6, b.y + 14, label, fs - 1, { 'font-weight': 'bold', class: 'mm-block-label', fill: t.nodeText }),
+  ];
+  for (const d of b.dividers) {
+    parts.push(line(b.x, d.y, b.x + b.w, d.y, { stroke: t.actorStroke, 'stroke-width': 1, 'stroke-dasharray': '2 2' }));
+    if (d.label) parts.push(textAt(b.x + b.w / 2, d.y - 4, '[' + d.label + ']', fs - 1, { 'text-anchor': 'middle', class: 'mm-block-divider-label', fill: t.nodeText }));
+  }
+  return group({ class: 'mm-block-group', key: 'blk-' + i }, parts);
+}

package/src/styles.js

@@ -0,0 +1,181 @@
+//@ts-check
+/**
+ * @file `classDef` / `class` / `style` resolution.
+ *
+ * The parser has always recorded these three statements; nothing consumed
+ * them, so a diagram that styled a node rendered identically to one that did
+ * not. This module turns them into per-node style objects the layout attaches
+ * to its positioned nodes, which is what lets a diagram carry emphasis —
+ * "this box is the input", "this one is an aside" — instead of every node
+ * looking the same.
+ *
+ * One built-in class ships: **`note`**. Mermaid has no flowchart note, and a
+ * diagram that cannot annotate a node loses exactly the information an ASCII
+ * drawing used to carry in a margin comment. Rather than invent syntax for
+ * it, `note` is a class any diagram can apply with the standard `class`
+ * statement, themed from the `note*` tokens the sequence renderer already
+ * uses. A dotted link to a note-classed node reads as an annotation and stays
+ * valid Mermaid that other tools can still parse.
+ */
+
+import { inkFor, isHexColor } from '@jarenjs/core/color';
+
+/** Style properties that mean something to a shape, mapped to SVG attributes. */
+const SHAPE_PROPS = {
+  'fill': 'fill',
+  'stroke': 'stroke',
+  'stroke-width': 'stroke-width',
+  'stroke-dasharray': 'stroke-dasharray',
+  'opacity': 'opacity',
+};
+
+/**
+ * Parse a Mermaid style string (`fill:#eee,stroke-width:2px`) into an object.
+ * Unknown properties are kept: a consumer may understand more than this one,
+ * and silently dropping a declaration the author wrote is the same class of
+ * dishonesty as dropping a schema constraint.
+ * @param {string} source
+ * @returns {Record<string,string>}
+ */
+export function parseStyleString(source) {
+  /** @type {Record<string,string>} */
+  const out = {};
+  if (typeof source !== 'string') return out;
+  for (const part of source.split(',')) {
+    const colon = part.indexOf(':');
+    if (colon === -1) continue;
+    const key = part.slice(0, colon).trim().toLowerCase();
+    const value = part.slice(colon + 1).trim();
+    if (key !== '' && value !== '') out[key] = value;
+  }
+  return out;
+}
+
+/**
+ * Resolve every node's styles from a flowchart AST.
+ *
+ * Precedence, lowest to highest: the built-in `note` class, then each
+ * `classDef` in the order the node's `class` statements applied them, then a
+ * per-node `style` statement. That is Mermaid's own order — later wins — and
+ * it is what lets a diagram say "these are all notes, except this one is
+ * red".
+ * @param {any} ast flowchart AST
+ * @returns {Map<string, Record<string,string>>} node id -> style properties
+ */
+export function resolveNodeStyles(ast) {
+  /** @type {Map<string, Record<string,string>>} */
+  const out = new Map();
+  if (ast === null || typeof ast !== 'object') return out;
+
+  /** @type {Map<string, Record<string,string>>} */
+  const defs = new Map();
+  for (const def of ast.classDefs ?? []) {
+    if (def === null || typeof def.name !== 'string') continue;
+    // A classDef may name several classes at once (`classDef a,b fill:#eee`).
+    for (const name of def.name.split(',')) {
+      const key = name.trim();
+      if (key === '') continue;
+      defs.set(key, { ...(defs.get(key) ?? {}), ...parseStyleString(def.styles) });
+    }
+  }
+
+  const add = (id, props) => {
+    if (typeof id !== 'string' || id === '') return;
+    out.set(id, { ...(out.get(id) ?? {}), ...props });
+  };
+
+  for (const applied of ast.classes ?? []) {
+    if (applied === null) continue;
+    // `class a,b name` applies one class to several nodes.
+    const nodes = String(applied.node ?? '').split(',');
+    for (const rawName of String(applied.name ?? '').split(',')) {
+      const name = rawName.trim();
+      if (name === '') continue;
+      // The built-in class carries no properties of its own: it is a marker
+      // the renderer resolves against the theme, because a note's colors have
+      // to follow light/dark like every other themed element.
+      const props = name === 'note' ? { 'mm-builtin': 'note' } : defs.get(name);
+      if (props === undefined) continue;
+      for (const node of nodes) add(node.trim(), props);
+    }
+  }
+
+  for (const style of ast.styles ?? []) {
+    if (style === null) continue;
+    for (const node of String(style.node ?? '').split(','))
+      add(node.trim(), parseStyleString(style.styles));
+  }
+
+  return out;
+}
+
+/**
+ * The author's styles as an inline CSS declaration, or `null` when there are
+ * none.
+ *
+ * This has to be a `style` attribute rather than presentation attributes:
+ * the bundled stylesheet sets `.mermaid .mm-node-shape { fill: var(...) }` so
+ * a themed page can retheme every diagram at once, and a CSS rule outranks a
+ * presentation attribute. Emitting `fill="..."` therefore looked correct in
+ * the SSR string and was silently overridden the moment the stylesheet
+ * loaded — a classDef that worked in a test and did nothing on the page.
+ * Inline style outranks the rule, which is the precedence an author asking
+ * for a specific colour expects.
+ * @param {Record<string,string>|undefined} styles
+ * @param {Record<string,string>} tokens theme tokens
+ * @returns {string|null}
+ */
+export function shapeStyle(styles, tokens) {
+  const parts = [];
+  for (const [key, value] of Object.entries(shapeAttributes(styles, tokens)))
+    parts.push(`${key}:${value}`);
+  return parts.length === 0 ? null : parts.join(';');
+}
+
+/**
+ * The SVG attributes a resolved style object contributes to a shape, with the
+ * built-in `note` marker expanded against the live theme.
+ * @param {Record<string,string>|undefined} styles
+ * @param {Record<string,string>} tokens theme tokens
+ * @returns {Record<string,string>}
+ */
+export function shapeAttributes(styles, tokens) {
+  /** @type {Record<string,string>} */
+  const out = {};
+  if (styles === undefined) return out;
+  if (styles['mm-builtin'] === 'note') {
+    out.fill = tokens.noteFill;
+    out.stroke = tokens.noteStroke;
+    out['stroke-dasharray'] = '4 3';
+  }
+  for (const [key, attribute] of Object.entries(SHAPE_PROPS)) {
+    const value = styles[key];
+    if (value === undefined) continue;
+    out[attribute] = key === 'stroke-width' ? value.replace(/px$/i, '') : value;
+  }
+  return out;
+}
+
+/**
+ * The text color for a node, or null to keep the theme's.
+ *
+ * An author-specified `fill` is a CONSTANT — it does not follow light/dark —
+ * so the ink over it must not follow the theme either. A pale `fill:#dcfce7`
+ * under a dark theme would otherwise get the theme's light text and the label
+ * would vanish into its own box. The ink is therefore derived from the fill's
+ * luminance, exactly as chart tiles do it, unless the author named a `color`
+ * themselves.
+ *
+ * The built-in `note` class is the opposite case and keeps the theme's note
+ * ink: its fill is a theme token too, so the pair moves together.
+ * @param {Record<string,string>|undefined} styles
+ * @param {Record<string,string>} tokens theme tokens
+ * @returns {string|null}
+ */
+export function textColor(styles, tokens) {
+  if (styles === undefined) return null;
+  if (typeof styles.color === 'string') return styles.color;
+  if (styles['mm-builtin'] === 'note' && !isHexColor(styles.fill)) return tokens.noteText;
+  if (isHexColor(styles.fill)) return inkFor(styles.fill);
+  return null;
+}