fix(merman): remove sequence lifeline fade (#41623)

packages/merman/src/markdown.ts

@@ -134,7 +134,6 @@ function prepareDiagram(kind: DiagramKind, source: string, options: MermaidMarkd
           resolveSequenceStyleColors({
             participant: color(colors.primary),
             lifeline: color(colors.muted),
-            lifelineEnd: color(colors.background),
             group: color(colors.secondary),
             request: color(colors.request ?? colors.primary),
             response: color(colors.response ?? colors.primary),

packages/merman/src/sequence/diagram.test.ts

@@ -1,11 +1,9 @@
 import { describe, expect, test } from "bun:test"
-import { RGBA } from "@opentui/core"
 import { diagramTextWidth } from "../core/text.js"
 import { expectDiagram } from "../test/diagram.js"
 import { renderSequenceDiagram } from "./diagram.js"
 import { drawSequenceDiagramGrid } from "./drawing.js"
 import { parseMermaidSequenceDiagram } from "./parser.js"
-import { resolveSequenceStyleColors } from "./style.js"
 
 describe("SequenceDiagram", () => {
   test("parses Mermaid sequenceDiagram participants and messages", () => {
@@ -62,10 +60,6 @@ sequenceDiagram
          │ 401 WWW-Auth    │
          ◄─────────────────┤
          │                 │
-         │                 │
-         │                 │
-         │                 │
-         │                 │
     `)
   })
 
@@ -98,10 +92,6 @@ sequenceDiagram
           │                                   │                          │
           │                                   ├─ same target or reject ──►
           │                                   │                          │
-          │                                   │                          │
-          │                                   │                          │
-          │                                   │                          │
-          │                                   │                          │
     `)
   })
 
@@ -171,27 +161,6 @@ sequenceDiagram
     expect(new Set(rampStyles)).toEqual(new Set(["lifelineRamp1", "lifelineRamp2", "lifelineRamp3"]))
   })
 
-  test("fades the bottom of participant lifelines", () => {
-    const grid = drawSequenceDiagramGrid(
-      parseMermaidSequenceDiagram(
-        "sequenceDiagram\n  participant Browser\n  participant Server\n  Browser->>Server: request",
-      ),
-    )
-    const fadeStyles = grid.rows
-      .flatMap((row) => row.map((cell) => cell.style))
-      .filter((style) => style?.startsWith("lifelineFade"))
-
-    expect(new Set(fadeStyles)).toEqual(
-      new Set(["lifelineFade1", "lifelineFade2", "lifelineFade3", "lifelineFade4", "lifelineFade5"]),
-    )
-
-    const lifeline = RGBA.fromInts(100, 120, 110)
-    const background = RGBA.fromInts(10, 20, 15)
-    const colors = resolveSequenceStyleColors({ lifeline, lifelineEnd: background })
-    expect(colors.lifelineFade1.equals(lifeline)).toBe(true)
-    expect(colors.lifelineFade5.equals(background)).toBe(true)
-  })
-
   test("renders notes and long cross-participant messages in order", () => {
     const output = renderSequenceDiagram(`
 sequenceDiagram
@@ -364,10 +333,6 @@ sequenceDiagram
        │                  │
        │ async dashed     │
        │(─────────────────┤
-       │                  │
-       │                  │
-       │                  │
-       │                  │
        │                  │"
     `)
   })
@@ -697,10 +662,6 @@ sequenceDiagram
          │               │  │                 │                 │  │
          │               │  │ get user:42     │                 │  │
          │               │  ├─────────────────►                 │  │
-         │               │  │                 │                 │  │
-         │               │  │                 │                 │  │
-         │               │  │                 │                 │  │
-         │               │  │                 │                 │  │
          │               │  │                 │                 │  │
                          ╰─────────────────────────────────────────╯"
     `)
@@ -748,10 +709,6 @@ sequenceDiagram
          ├────────────────────╮
          │ Check Permissions  │
          ◄────────────────────╯
-         │
-         │
-         │
-         │
          │"
     `)
   })

packages/merman/src/sequence/drawing.ts

@@ -1,7 +1,7 @@
 import { BorderChars, type BorderStyle } from "@opentui/core"
 import { DiagramCanvas } from "../core/canvas.js"
 import { diagramTextWidth } from "../core/text.js"
-import { DEFAULT_FRAGMENT_BORDER_STYLE, SEQUENCE_LIFELINE_FADE_STEPS } from "./options.js"
+import { DEFAULT_FRAGMENT_BORDER_STYLE } from "./options.js"
 import {
   createSequencePlacementPlan,
   type SequenceGroupPlacement,
@@ -227,13 +227,7 @@ export function drawSequenceDiagramGrid(
 
     for (let y = lifelineStartY; y <= lifelineEndY; y++) {
       const distance = y - lifelineStartY
-      const fadeDistance = y - (lifelineEndY - SEQUENCE_LIFELINE_FADE_STEPS.length + 1)
-      const style =
-        fadeDistance >= 0
-          ? (`lifelineFade${fadeDistance + 1}` as SequenceCellStyle)
-          : !options.compact && distance < 3
-            ? (`lifelineRamp${distance + 1}` as SequenceCellStyle)
-            : "lifeline"
+      const style = !options.compact && distance < 3 ? (`lifelineRamp${distance + 1}` as SequenceCellStyle) : "lifeline"
       setCell(grid, center, y, SEQUENCE_BORDER.vertical, style)
     }
   }

packages/merman/src/sequence/options.ts

@@ -2,7 +2,6 @@ import type { BorderStyle } from "@opentui/core"
 
 export const DEFAULT_MIN_PARTICIPANT_GAP = 18
 export const DEFAULT_FRAGMENT_BORDER_STYLE = "rounded" satisfies BorderStyle
-export const SEQUENCE_LIFELINE_FADE_STEPS = [1, 2, 3, 4, 5] as const
 
 export function normalizeSequenceMinParticipantGap(value: number | undefined): number {
   return value === undefined || !Number.isFinite(value) ? DEFAULT_MIN_PARTICIPANT_GAP : Math.max(1, Math.floor(value))

packages/merman/src/sequence/placement.ts

@@ -1,5 +1,5 @@
 import { diagramTextWidth } from "../core/text.js"
-import { normalizeSequenceMinParticipantGap, SEQUENCE_LIFELINE_FADE_STEPS } from "./options.js"
+import { normalizeSequenceMinParticipantGap } from "./options.js"
 import type {
   SequenceDiagram,
   SequenceDiagramRenderOptions,
@@ -531,10 +531,7 @@ export function createSequencePlacementPlan(
   const stepStartY = lifelineStartY + 1
   const width = Math.max(contentBounds.rightX + 1, ...groups.map((group) => group.rightX + 1), fragments.rightX + 1)
   const baseHeight =
-    stepStartY +
-    diagram.steps.reduce((total, step) => total + getStepHeight(step, centers, indexes, compact), 0) +
-    SEQUENCE_LIFELINE_FADE_STEPS.length -
-    1
+    stepStartY + diagram.steps.reduce((total, step) => total + getStepHeight(step, centers, indexes, compact), 0)
   const height = hasGroups ? Math.max(5, baseHeight + 1) : Math.max(3, baseHeight)
   const lifelineEndY = hasGroups ? height - 2 : height - 1
   const participants = diagram.participants.map((participant, index) => {

packages/merman/src/sequence/style.ts

@@ -1,19 +1,16 @@
 import { RGBA } from "@opentui/core"
 import {
-  blendColor,
   createColorRampTheme,
   DIAGRAM_FADE_STEPS,
   numberedStyleKeys,
   rgba,
   type DiagramRgb,
 } from "../core/color/style.js"
-import { SEQUENCE_LIFELINE_FADE_STEPS } from "./options.js"
-import type { FadeStyle, LifelineFadeStyle, LifelineRampStyle, SequenceCellStyle } from "./types.js"
+import type { FadeStyle, LifelineRampStyle, SequenceCellStyle } from "./types.js"
 
 export interface SequenceStyleColors {
   participant?: RGBA
   lifeline?: RGBA
-  lifelineEnd?: RGBA
   group?: RGBA
   request?: RGBA
   response?: RGBA
@@ -33,7 +30,6 @@ const LIFELINE_RAMP_STYLES = [
 const DEFAULT_THEME_RGB = {
   participant: [228, 239, 232],
   lifeline: [111, 138, 126],
-  lifelineEnd: [15, 23, 19],
   group: [76, 99, 89],
   request: [134, 225, 200],
   response: [230, 177, 126],
@@ -45,22 +41,14 @@ const DEFAULT_THEME_RGB = {
 
 export function resolveSequenceStyleColors(
   colors: SequenceStyleColors = {},
-): Required<SequenceStyleColors> & Record<FadeStyle | LifelineFadeStyle | LifelineRampStyle, RGBA> {
+): 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)
-  const lifelineEnd = colors.lifelineEnd ?? rgba(DEFAULT_THEME_RGB.lifelineEnd)
-  const lifelineFade = Object.fromEntries(
-    SEQUENCE_LIFELINE_FADE_STEPS.map((step, index) => [
-      `lifelineFade${step}`,
-      blendColor(lifeline, lifelineEnd, index / (SEQUENCE_LIFELINE_FADE_STEPS.length - 1)),
-    ]),
-  ) as Record<LifelineFadeStyle, RGBA>
   return {
     participant,
     lifeline,
-    lifelineEnd,
     group: colors.group ?? rgba(DEFAULT_THEME_RGB.group),
     request,
     response,
@@ -71,13 +59,12 @@ export function resolveSequenceStyleColors(
     ...createColorRampTheme(numberedStyleKeys("requestFade", SEQUENCE_FADE_STEPS), lifeline, request),
     ...createColorRampTheme(numberedStyleKeys("responseFade", SEQUENCE_FADE_STEPS), lifeline, response),
     ...createColorRampTheme(LIFELINE_RAMP_STYLES, participant, lifeline),
-    ...lifelineFade,
   }
 }
 
 export function sequenceStyleColor(
   style: SequenceCellStyle | undefined,
-  colors: Required<SequenceStyleColors> & Record<FadeStyle | LifelineFadeStyle | LifelineRampStyle, RGBA>,
+  colors: Required<SequenceStyleColors> & Record<FadeStyle | LifelineRampStyle, RGBA>,
 ): RGBA | undefined {
   if (style === "noteBadge") return colors.note
   if (style === "fragmentLabel") return colors.fragment

packages/merman/src/sequence/types.ts

@@ -61,7 +61,6 @@ export interface SequenceDiagramRenderOptions {
 export type MessageStyle = "request" | "response"
 export type FadeStyle = `${MessageStyle}Fade${1 | 2 | 3 | 4 | 5}`
 export type LifelineRampStyle = `lifelineRamp${1 | 2 | 3}`
-export type LifelineFadeStyle = `lifelineFade${1 | 2 | 3 | 4 | 5}`
 export type SequenceCellStyle =
   | "participant"
   | "lifeline"
@@ -69,7 +68,6 @@ export type SequenceCellStyle =
   | MessageStyle
   | FadeStyle
   | LifelineRampStyle
-  | LifelineFadeStyle
   | "fragment"
   | "fragmentLabel"
   | "note"