opentui-markdown-render 0.0.0-stage → 0.2.0

package/src/merman/sequence/render-grid.ts

@@ -0,0 +1,22 @@
+import type { StyledText } from "@opentui/core"
+import type { DiagramCanvas } from "../core/canvas.js"
+import { renderDiagramGridStyledText } from "../core/render-grid.js"
+import { sequenceStyleBackgroundColor, sequenceStyleColor, type SequenceStyleColors } from "./style.js"
+import type { SequenceCellStyle } from "./types.js"
+
+export type SequenceGrid = DiagramCanvas<SequenceCellStyle>
+
+export function renderSequenceGridText(grid: SequenceGrid): string {
+  return grid.toString()
+}
+
+export function renderSequenceGridStyledText(
+  grid: SequenceGrid,
+  colors: Parameters<typeof sequenceStyleColor>[1],
+): StyledText {
+  return renderDiagramGridStyledText(
+    grid,
+    (run) => sequenceStyleColor(run.style, colors),
+    (run) => sequenceStyleBackgroundColor(run.style, colors as Required<SequenceStyleColors>),
+  )
+}

package/src/merman/sequence/style.ts

@@ -0,0 +1,81 @@
+import { RGBA } from "@opentui/core"
+import {
+  createColorRampTheme,
+  DIAGRAM_FADE_STEPS,
+  numberedStyleKeys,
+  rgba,
+  type DiagramRgb,
+} from "../core/color/style.js"
+import type { FadeStyle, LifelineRampStyle, SequenceCellStyle } from "./types.js"
+
+export interface SequenceStyleColors {
+  participant?: RGBA
+  lifeline?: RGBA
+  group?: RGBA
+  request?: RGBA
+  response?: RGBA
+  fragment?: RGBA
+  fragmentLabelBg?: RGBA
+  note?: RGBA
+  noteBg?: RGBA
+}
+
+export const SEQUENCE_FADE_STEPS = DIAGRAM_FADE_STEPS
+const LIFELINE_RAMP_STYLES = [
+  "lifelineRamp1",
+  "lifelineRamp2",
+  "lifelineRamp3",
+] as const satisfies readonly LifelineRampStyle[]
+
+const DEFAULT_THEME_RGB = {
+  participant: [228, 239, 232],
+  lifeline: [111, 138, 126],
+  group: [76, 99, 89],
+  request: [134, 225, 200],
+  response: [230, 177, 126],
+  fragment: [154, 184, 169],
+  fragmentLabelBg: [28, 43, 36],
+  noteFg: [215, 229, 221],
+  noteBg: [36, 56, 47],
+} as const satisfies Record<string, DiagramRgb>
+
+export function resolveSequenceStyleColors(
+  colors: SequenceStyleColors = {},
+): Required<SequenceStyleColors> & Record<FadeStyle | LifelineRampStyle, RGBA> {
+  const participant = colors.participant ?? rgba(DEFAULT_THEME_RGB.participant)
+  const lifeline = colors.lifeline ?? rgba(DEFAULT_THEME_RGB.lifeline)
+  const request = colors.request ?? rgba(DEFAULT_THEME_RGB.request)
+  const response = colors.response ?? rgba(DEFAULT_THEME_RGB.response)
+  return {
+    participant,
+    lifeline,
+    group: colors.group ?? rgba(DEFAULT_THEME_RGB.group),
+    request,
+    response,
+    fragment: colors.fragment ?? rgba(DEFAULT_THEME_RGB.fragment),
+    fragmentLabelBg: colors.fragmentLabelBg ?? rgba(DEFAULT_THEME_RGB.fragmentLabelBg),
+    note: colors.note ?? rgba(DEFAULT_THEME_RGB.noteFg),
+    noteBg: colors.noteBg ?? rgba(DEFAULT_THEME_RGB.noteBg),
+    ...createColorRampTheme(numberedStyleKeys("requestFade", SEQUENCE_FADE_STEPS), lifeline, request),
+    ...createColorRampTheme(numberedStyleKeys("responseFade", SEQUENCE_FADE_STEPS), lifeline, response),
+    ...createColorRampTheme(LIFELINE_RAMP_STYLES, participant, lifeline),
+  }
+}
+
+export function sequenceStyleColor(
+  style: SequenceCellStyle | undefined,
+  colors: Required<SequenceStyleColors> & Record<FadeStyle | LifelineRampStyle, RGBA>,
+): RGBA | undefined {
+  if (style === "noteBadge") return colors.note
+  if (style === "fragmentLabel") return colors.fragment
+  return style ? colors[style] : undefined
+}
+
+export function sequenceStyleBackgroundColor(
+  style: SequenceCellStyle | undefined,
+  colors: Required<SequenceStyleColors>,
+): RGBA | undefined {
+  if (style === "note" || style === "noteBadge") return colors.noteBg
+  if (style === "fragmentLabel") return colors.fragmentLabelBg
+  return undefined
+}

package/src/merman/sequence/types.ts

@@ -0,0 +1,74 @@
+import type { BorderStyle } from "@opentui/core"
+
+export interface SequenceParticipant {
+  id: string
+  label: string
+}
+
+export interface SequenceParticipantGroup {
+  label: string
+  participantIds: string[]
+}
+
+export interface SequenceMessage {
+  from: string
+  to: string
+  label: string
+  style: "solid" | "dashed"
+  head?: SequenceArrowHead
+  number?: number
+  activate?: string
+  deactivate?: string
+}
+
+export type SequenceArrowHead = "open" | "cross" | "async"
+
+export interface SequenceNote {
+  over: string[]
+  label: string
+  position?: "over" | "left" | "right"
+}
+
+export interface SequenceActivation {
+  participant: string
+  active: boolean
+}
+
+export interface SequenceFragment {
+  kind: "alt" | "else" | "loop" | "opt" | "par" | "and" | "critical" | "option" | "break" | "end"
+  label: string
+}
+
+export type SequenceStep =
+  | { type: "message"; message: SequenceMessage }
+  | { type: "note"; note: SequenceNote }
+  | { type: "activation"; activation: SequenceActivation }
+  | { type: "fragment"; fragment: SequenceFragment }
+
+export interface SequenceDiagram {
+  participants: SequenceParticipant[]
+  messages: SequenceMessage[]
+  steps: SequenceStep[]
+  groups: SequenceParticipantGroup[]
+}
+
+export interface SequenceDiagramRenderOptions {
+  compact?: boolean
+  minParticipantGap?: number
+  fragmentBorderStyle?: BorderStyle
+}
+
+export type MessageStyle = "request" | "response"
+export type FadeStyle = `${MessageStyle}Fade${1 | 2 | 3 | 4 | 5}`
+export type LifelineRampStyle = `lifelineRamp${1 | 2 | 3}`
+export type SequenceCellStyle =
+  | "participant"
+  | "lifeline"
+  | "group"
+  | MessageStyle
+  | FadeStyle
+  | LifelineRampStyle
+  | "fragment"
+  | "fragmentLabel"
+  | "note"
+  | "noteBadge"

package/src/merman/state/diagram.ts

@@ -0,0 +1,8 @@
+import { drawStateDiagramGrid } from "./drawing.js"
+import { parseMermaidStateDiagram } from "./parser.js"
+import { renderStateGridText } from "./render-grid.js"
+import type { StateDiagramRenderOptions } from "./types.js"
+
+export function renderStateDiagram(content: string, options: StateDiagramRenderOptions = {}): string {
+  return renderStateGridText(drawStateDiagramGrid(parseMermaidStateDiagram(content), options))
+}

package/src/merman/state/drawing.ts

@@ -0,0 +1,363 @@
+import { BorderChars, type BorderCharacters, type BorderStyle } from "@opentui/core"
+import { DiagramCanvas, DiagramCanvasSizeError, type DiagramCanvasCell } from "../core/canvas.js"
+import { directionBetween, orthogonalPathPoints, type DiagramDirection } from "../core/geometry.js"
+import {
+  diagramArrowHead,
+  diagramLineGlyph,
+  drawDiagramFrame,
+  fillDiagramFrameInterior,
+  mergeDiagramLineGlyph,
+} from "../core/drawing.js"
+import { DIAGRAM_LABEL_PADDING_X, diagramTextWidth } from "../core/text.js"
+import {
+  createStateDiagramLayout,
+  expandCompositeBoundsForFeedback,
+  expandCompositeBoundsForInternalTransitions,
+  separateExternalBoundsFromComposites,
+  translateStateDiagramLayout,
+  type StateDiagramBoxBounds as BoxBounds,
+  type StateDiagramNoteBounds as StateNoteBounds,
+} from "./layout.js"
+import { stateDiagramNoteConnector } from "./note.js"
+import { DEFAULT_STATE_ARROW_HEAD_STYLE, DEFAULT_STATE_BORDER_STYLE, normalizeStateMinStateGap } from "./options.js"
+import type { StateGrid } from "./render-grid.js"
+import {
+  createStateTransitionJunctionPlans,
+  createStateTransitionRenderPlans,
+  measureStateTransitionLabel,
+  type StateTransitionRenderPlan,
+} from "./routing.js"
+import { createStateSearchBudget } from "./search.js"
+import { NOTE_CONNECTOR_RAMP_STYLES, STATE_DEPARTURE_RAMP_STYLES } from "./style.js"
+import type {
+  StateCellStyle,
+  StateDiagram,
+  StateDiagramArrowHeadStyle,
+  StateDiagramRenderOptions,
+  StateDiagramState,
+} from "./types.js"
+import { isHiddenCompositeMarker, prepareVisibleStateDiagram } from "./visible-model.js"
+
+type StateCell = DiagramCanvasCell<StateCellStyle>
+
+function translateTransitionPlans(
+  plans: readonly StateTransitionRenderPlan[],
+  dx: number,
+  dy: number,
+): StateTransitionRenderPlan[] {
+  return plans.map((plan) => ({
+    ...plan,
+    cells: plan.cells.map((cell) => ({ ...cell, x: cell.x + dx, y: cell.y + dy })),
+    path: plan.path.map(([x, y]) => [x + dx, y + dy]),
+    label: plan.label ? { ...plan.label, x: plan.label.x + dx, y: plan.label.y + dy } : undefined,
+  }))
+}
+
+function makeGrid(width: number, height: number): StateGrid {
+  return new DiagramCanvas(width, height, {
+    mergeCell: (existing, incoming): StateCell => {
+      const existingIsTransition = existing.style === "transition" || existing.style?.startsWith("stateDepartureRamp")
+      const incomingIsTransition = incoming.style === "transition" || incoming.style?.startsWith("stateDepartureRamp")
+      const shouldMerge = incomingIsTransition && existingIsTransition
+      return {
+        ...incoming,
+        char: shouldMerge
+          ? (mergeDiagramLineGlyph(existing.char, incoming.char, "rounded") ?? incoming.char)
+          : incoming.char,
+      }
+    },
+  })
+}
+
+function setCell(grid: StateGrid, x: number, y: number, char: string, style?: StateCellStyle): void {
+  grid.setCell(x, y, char, style)
+}
+
+function setText(grid: StateGrid, x: number, y: number, text: string, style?: StateCellStyle): void {
+  grid.setText(x, y, text, style)
+}
+
+function drawBox(
+  grid: StateGrid,
+  state: StateDiagramState,
+  bounds: BoxBounds,
+  lines: string[],
+  borderStyle: BorderStyle,
+): void {
+  if (isHiddenCompositeMarker(state)) return
+  if (state.kind === "fork" || state.kind === "join") return
+
+  if (state.kind !== "state") {
+    setCell(grid, bounds.left, bounds.top, state.label, state.kind)
+    return
+  }
+  fillDiagramFrameInterior(bounds, (x, y) => setCell(grid, x, y, " ", "state"))
+  drawStateFrame(grid, bounds, BorderChars[borderStyle], "stateBorder")
+  lines.forEach((line, index) => {
+    setText(grid, bounds.left + 2, bounds.top + 1 + index, line, "state")
+  })
+}
+
+function drawStateFrame(grid: StateGrid, bounds: BoxBounds, chars: BorderCharacters, style: StateCellStyle): void {
+  drawDiagramFrame(bounds, chars, (x, y, char) => setCell(grid, x, y, char, style))
+}
+
+function drawContainerFrame(
+  grid: StateGrid,
+  bounds: BoxBounds,
+  label: string,
+  chars: BorderCharacters,
+  style: StateCellStyle,
+): void {
+  drawDiagramFrame(bounds, chars, (x, y, char) => setCell(grid, x, y, char, style))
+  drawContainerLabel(grid, bounds, label, style)
+}
+
+function drawContainerLabel(grid: StateGrid, bounds: BoxBounds, label: string, style: StateCellStyle): void {
+  if (label) setText(grid, bounds.left + 2, bounds.top, ` ${label} `, style)
+}
+
+function noteConnectorGlyph(directions: ReadonlySet<DiagramDirection>): string {
+  const chars = BorderChars.double
+  const up = directions.has("up")
+  const down = directions.has("down")
+  const left = directions.has("left")
+  const right = directions.has("right")
+  if (up && down && left && right) return chars.cross
+  if (up && down && right) return chars.leftT
+  if (up && down && left) return chars.rightT
+  if (left && right && down) return chars.topT
+  if (left && right && up) return chars.bottomT
+  if (up && right) return chars.bottomLeft
+  if (up && left) return chars.bottomRight
+  if (down && right) return chars.topLeft
+  if (down && left) return chars.topRight
+  if (up || down) return chars.vertical
+  return chars.horizontal
+}
+
+function drawNote(grid: StateGrid, bounds: StateNoteBounds, target: BoxBounds): void {
+  const chars = BorderChars.double
+  const connector = stateDiagramNoteConnector(bounds, target)
+  const points = orthogonalPathPoints(connector.points)
+  for (const [index, point] of points.entries()) {
+    const directions = new Set<DiagramDirection>()
+    const previous = points[index - 1]
+    const next = points[index + 1]
+    if (previous) directions.add(directionBetween(point, previous)!)
+    if (next) directions.add(directionBetween(point, next)!)
+    const distanceFromNote = points.length - index - 1
+    const style = distanceFromNote < 3 ? NOTE_CONNECTOR_RAMP_STYLES[2 - distanceFromNote]! : "noteConnector"
+    setCell(grid, point.x, point.y, noteConnectorGlyph(directions), style)
+  }
+
+  drawContainerFrame(grid, bounds, "", chars, "noteBorder")
+  setCell(
+    grid,
+    bounds.note.position === "right" ? bounds.left : bounds.left + bounds.width - 1,
+    connector.connectorY,
+    bounds.note.position === "right" ? chars.rightT : chars.leftT,
+    "noteBorder",
+  )
+  bounds.lines.forEach((line, index) => setText(grid, bounds.left + 2, bounds.top + 1 + index, line, "noteText"))
+}
+
+function drawTransitionRenderPlan(
+  grid: StateGrid,
+  plan: StateTransitionRenderPlan,
+  arrowHeadStyle: StateDiagramArrowHeadStyle,
+  rampDeparture: boolean,
+): void {
+  const departure = new Map(
+    rampDeparture
+      ? plan.path.slice(0, 3).map(([x, y], index) => [`${x}:${y}`, STATE_DEPARTURE_RAMP_STYLES[index]!])
+      : [],
+  )
+  for (const cell of plan.cells) {
+    const char = cell.arrowDirection ? diagramArrowHead(cell.arrowDirection, arrowHeadStyle) : cell.char
+    setCell(grid, cell.x, cell.y, char, departure.get(`${cell.x}:${cell.y}`) ?? "transition")
+  }
+  if (plan.label) {
+    plan.label.lines.forEach((line, index) => {
+      const y = plan.label!.y + index
+      const leftX = plan.label!.x - DIAGRAM_LABEL_PADDING_X
+      if (grid.getCell(leftX, y)?.char === " ") setCell(grid, leftX, y, " ", "label")
+      setText(grid, plan.label!.x, y, line, "label")
+      const rightX = plan.label!.x + diagramTextWidth(line) + DIAGRAM_LABEL_PADDING_X - 1
+      if (grid.getCell(rightX, y)?.char === " ") setCell(grid, rightX, y, " ", "label")
+    })
+  }
+}
+
+function drawTransitionJunctionPlans(
+  grid: StateGrid,
+  diagram: StateDiagram,
+  bounds: Map<string, BoxBounds>,
+  renderPlans: readonly StateTransitionRenderPlan[],
+): void {
+  for (const plan of createStateTransitionJunctionPlans(diagram, bounds, renderPlans)) {
+    const parallel = plan.kind === "fork" || plan.kind === "join"
+    const style = plan.kind === "choice" ? "choice" : "transition"
+    const bar = diagram.direction === "LR" || diagram.direction === "RL" ? "┃" : "━"
+    const char = plan.kind === "choice" ? "◆" : parallel ? bar : diagramLineGlyph(plan.connections, "rounded")
+    setCell(grid, plan.bounds.left, plan.bounds.top, char, style)
+  }
+}
+
+export function drawStateDiagramGrid(sourceDiagram: StateDiagram, options: StateDiagramRenderOptions = {}): StateGrid {
+  return createStateDiagramDrawing(sourceDiagram, options).grid
+}
+
+export function createStateDiagramDrawing(sourceDiagram: StateDiagram, options: StateDiagramRenderOptions = {}) {
+  const direction = options.direction ?? sourceDiagram.direction
+  if (direction !== "LR" && direction !== "RL") {
+    return createStateDiagramDrawingWithDirection(sourceDiagram, options, direction)
+  }
+  if (options.layoutMaxWidth === undefined || !Number.isFinite(options.layoutMaxWidth)) {
+    return createStateDiagramDrawingWithDirection(sourceDiagram, options, direction)
+  }
+  const fallbackDirection = direction === "RL" ? "BT" : "TB"
+  const maxWidth = Math.max(1, Math.trunc(options.layoutMaxWidth))
+  const drawing = (() => {
+    try {
+      return createStateDiagramDrawingWithDirection(sourceDiagram, options, direction)
+    } catch (error) {
+      if (error instanceof DiagramCanvasSizeError) return undefined
+      throw error
+    }
+  })()
+  if (!drawing) return createStateDiagramDrawingWithDirection(sourceDiagram, options, fallbackDirection)
+  if (drawing.grid.getTextSize({ trimTop: true, trimBottom: true }).width <= maxWidth) {
+    return drawing
+  }
+  const fallback = createStateDiagramDrawingWithDirection(sourceDiagram, options, fallbackDirection)
+  if (
+    fallback.grid.getTextSize({ trimTop: true, trimBottom: true }).width >=
+    drawing.grid.getTextSize({ trimTop: true, trimBottom: true }).width
+  ) {
+    return drawing
+  }
+  return fallback
+}
+
+function createStateDiagramDrawingWithDirection(
+  sourceDiagram: StateDiagram,
+  options: StateDiagramRenderOptions,
+  direction: StateDiagram["direction"],
+) {
+  const diagram = prepareVisibleStateDiagram(
+    direction === sourceDiagram.direction ? sourceDiagram : { ...sourceDiagram, direction },
+  )
+  const borderStyle = options.borderStyle ?? DEFAULT_STATE_BORDER_STYLE
+  const arrowHeadStyle = options.arrowHeadStyle ?? DEFAULT_STATE_ARROW_HEAD_STYLE
+  const minStateGap = normalizeStateMinStateGap(options.minStateGap)
+  const searchBudget = createStateSearchBudget()
+  const layout = createStateDiagramLayout(diagram, {
+    minStateGap,
+    searchBudget,
+  })
+  const { bounds, sizes, compositeBounds, noteBounds } = layout
+  let allBounds = [...bounds.values(), ...noteBounds]
+  let maxY = Math.max(0, ...allBounds.map((bound) => bound.top + bound.height))
+  const feedbackLaneY = maxY + 3
+  const feedbackTopY = Math.min(0, ...allBounds.map((bound) => bound.top)) - 3
+  expandCompositeBoundsForFeedback(diagram, bounds, compositeBounds, feedbackLaneY)
+  let transitionPlans: StateTransitionRenderPlan[] = []
+  const separationAttempts = diagram.states.length + diagram.composites.length + 1
+  for (let attempt = 0; attempt < separationAttempts; attempt++) {
+    transitionPlans = createStateTransitionRenderPlans(diagram, bounds, feedbackLaneY, {
+      feedbackTopY,
+      noteBounds,
+      searchBudget,
+    })
+    expandCompositeBoundsForInternalTransitions(diagram, compositeBounds, transitionPlans)
+    if (!separateExternalBoundsFromComposites(diagram, layout)) break
+    if (attempt === separationAttempts - 1) throw new Error("State composite separation did not converge")
+  }
+  const connectorPoints = noteBounds.flatMap((bound) => bound.connector?.points ?? [])
+  const contentLeft = Math.min(
+    0,
+    ...[...bounds.values(), ...noteBounds].map((bound) => bound.left),
+    ...connectorPoints.map((point) => point.x),
+    ...transitionPlans.flatMap((plan) => [
+      ...plan.cells.map((cell) => cell.x),
+      ...(plan.label ? [plan.label.x - DIAGRAM_LABEL_PADDING_X] : []),
+    ]),
+  )
+  const contentTop = Math.min(
+    0,
+    ...[...bounds.values(), ...noteBounds].map((bound) => bound.top),
+    ...connectorPoints.map((point) => point.y),
+    ...transitionPlans.flatMap((plan) => [...plan.cells.map((cell) => cell.y), ...(plan.label ? [plan.label.y] : [])]),
+  )
+  if (contentLeft < 0 || contentTop < 0) {
+    translateStateDiagramLayout(layout, -contentLeft, -contentTop)
+    transitionPlans = translateTransitionPlans(transitionPlans, -contentLeft, -contentTop)
+  }
+  allBounds = [...bounds.values(), ...noteBounds]
+  const translatedConnectorPoints = noteBounds.flatMap((bound) => bound.connector?.points ?? [])
+  const maxX = Math.max(
+    0,
+    ...allBounds.map((bound) => bound.left + bound.width),
+    ...translatedConnectorPoints.map((point) => point.x + 1),
+  )
+  maxY = Math.max(
+    0,
+    ...allBounds.map((bound) => bound.top + bound.height),
+    ...translatedConnectorPoints.map((point) => point.y + 1),
+  )
+  const transitionLabelSizes = diagram.transitions.map((transition) => measureStateTransitionLabel(transition.label))
+  const maxTransitionLabelWidth = Math.max(0, ...transitionLabelSizes.map((size) => size.width))
+  const maxTransitionLabelLines = Math.max(0, ...transitionLabelSizes.map((size) => size.height))
+  const transitionRight = Math.max(
+    maxX,
+    ...transitionPlans.flatMap((plan) => [
+      ...plan.cells.map((cell) => cell.x + 1),
+      ...(plan.label
+        ? [plan.label.x + measureStateTransitionLabel(plan.route.transition.label).width + DIAGRAM_LABEL_PADDING_X]
+        : []),
+    ]),
+  )
+  const transitionBottom = Math.max(
+    maxY,
+    ...transitionPlans.flatMap((plan) => [
+      ...plan.cells.map((cell) => cell.y + 1),
+      ...(plan.label ? [plan.label.y + plan.label.lines.length] : []),
+    ]),
+  )
+  const grid = makeGrid(
+    Math.max(maxX + Math.max(24, maxTransitionLabelWidth + 4), transitionRight + 2),
+    Math.max(maxY + 8 + maxTransitionLabelLines, transitionBottom + 2),
+  )
+  for (const composite of diagram.composites) {
+    const bound = compositeBounds.get(composite.id)
+    if (!bound) continue
+    drawContainerFrame(grid, bound, composite.label, BorderChars[borderStyle], "composite")
+  }
+
+  for (const state of diagram.states) {
+    const bound = bounds.get(state.id)
+    const size = sizes.get(state.id)
+    if (!bound || !size) continue
+    drawBox(grid, state, bound, size.lines, borderStyle)
+  }
+
+  for (const plan of transitionPlans) {
+    const source = diagram.states.find((state) => state.id === plan.route.transition.from)
+    drawTransitionRenderPlan(grid, plan, arrowHeadStyle, source?.kind === "state")
+  }
+
+  drawTransitionJunctionPlans(grid, diagram, bounds, transitionPlans)
+
+  for (const composite of diagram.composites) {
+    const bound = compositeBounds.get(composite.id)
+    if (bound) drawContainerLabel(grid, bound, composite.label, "compositeLabel")
+  }
+
+  for (const noteBound of noteBounds) {
+    const target = bounds.get(noteBound.note.target)
+    if (target) drawNote(grid, noteBound, target)
+  }
+
+  return { grid, diagram, layout, transitionPlans }
+}

package/src/merman/state/endpoint.ts

@@ -0,0 +1,15 @@
+export function stateDiagramStartMarkerId(scope?: string): string {
+  return scope ? `${scope}.__start` : "__start"
+}
+
+export function stateDiagramEndMarkerId(scope?: string): string {
+  return scope ? `${scope}.__end` : "__end"
+}
+
+export function stateDiagramMarkerId(position: "from" | "to", scope?: string): string {
+  return position === "from" ? stateDiagramStartMarkerId(scope) : stateDiagramEndMarkerId(scope)
+}
+
+export function normalizeStateDiagramEndpoint(value: string, position: "from" | "to", scope?: string): string {
+  return value === "[*]" ? stateDiagramMarkerId(position, scope) : value
+}