@coldtea/pr-lens-renderer 0.2.3 → 0.2.4

package/src/svg/dataflow.ts

@@ -1,5 +1,16 @@
-import type { Flow, FlowMessage, GraphNode, MessageKind } from "@coldtea/pr-lens-schema";
 import { assertNever } from "@coldtea/pr-lens-schema";
+import type { Flow, FlowMessage, GraphNode, MessageKind } from "@coldtea/pr-lens-schema";
+import { measure } from "../text.js";
+import { coord } from "../geometry.js";
+import type { Box } from "../geometry.js";
+import type { Palette } from "../theme.js";
+import { lines, tag, wrap } from "./primitives.js";
+import { PULSE_RADIUS, TRAIN_RADIUS } from "./pulse.js";
+import { messageAttributes, stylesFor } from "./styles.js";
+import { paintCard, paintLabelPill } from "./architecture.js";
+import { atlasBoxes, emptyAtlas, type RenderAtlas } from "../atlas.js";
+import { canvasFor, covering, union, type Canvas } from "../bounds.js";
+import { markerFor, openMarkerFor, shifted, toneColour, toneFor, type Tone } from "./document.js";
 import {
   DIAGRAM_MARGIN,
   FLOW_CYCLE_MAX,
@@ -12,11 +23,6 @@ import {
   PILL_TEXT_SIZE,
   TITLE_SIZE,
 } from "../design.js";
-import { atlasBoxes, emptyAtlas, type RenderAtlas } from "../atlas.js";
-import { canvasFor, covering, union, type Canvas } from "../bounds.js";
-import type { Box } from "../geometry.js";
-import { measure } from "../text.js";
-import { coord } from "../geometry.js";
 import {
   ACTIVATION_HALF_WIDTH,
   FLOW_BAND_PAD_X,
@@ -32,11 +38,6 @@ import {
   type FlowLayout,
   type PlacedMessage,
 } from "../layout/dataflow.js";
-import type { Palette } from "../theme.js";
-import { paintCard, paintLabelPill } from "./architecture.js";
-import { markerFor, openMarkerFor, shifted, toneColour, toneFor, type Tone } from "./document.js";
-import { lines, tag, wrap } from "./primitives.js";
-import { PULSE_RADIUS, TRAIN_RADIUS } from "./pulse.js";
 
 /** A ratio inside the animation cycle, written to a fixed number of places. */
 const ratio = (value: number): string => String(Math.round(value * 10000) / 10000);
@@ -236,16 +237,17 @@ const paintMessage = (
   const tone = toneFor(placed.message.delta);
   const direction = travelDirection(placed.message.kind, placed.fromX, placed.toX);
   const head = headFor(placed.message.kind, tone);
+  const attributes = messageAttributes(placed.message, palette);
 
   if (direction === 0) {
     const activated = activeAt(placed.message.from, placed.y);
     const path = selfPath(placed.fromX, placed.y, activated);
     return {
       line: lines([
-        tag("path", { class: messageClasses(placed.message, tone), d: path, "marker-end": head }),
+        tag("path", { class: messageClasses(placed.message, tone), d: path, "marker-end": head, ...attributes }),
         pulsesFor(placed, path, slotCount, palette),
       ]),
-      pill: paintLabelPill(placed.label, selfPillBox(placed, activated), tone),
+      pill: paintLabelPill(placed.label, selfPillBox(placed, activated), tone, palette),
     };
   }
 
@@ -254,10 +256,10 @@ const paintMessage = (
 
   return {
     line: lines([
-      tag("path", { class: messageClasses(placed.message, tone), d: path, "marker-end": head }),
+      tag("path", { class: messageClasses(placed.message, tone), d: path, "marker-end": head, ...attributes }),
       pulsesFor(placed, path, slotCount, palette),
     ]),
-    pill: paintLabelPill(placed.label, pillBox(placed, ends), tone),
+    pill: paintLabelPill(placed.label, pillBox(placed, ends), tone, palette),
   };
 };
 
@@ -283,6 +285,7 @@ const paintFlow = (
   palette: Palette,
 ): string => {
   const activeAt = activationLookup(layout);
+  const styles = stylesFor(palette);
 
   const lifelineBottom = layout.top + layout.height;
 
@@ -295,6 +298,7 @@ const paintFlow = (
       width: coord(box.width),
       height: coord(box.height),
       rx: LANE_RADIUS,
+      ...styles.lane,
     });
   });
 
@@ -306,6 +310,7 @@ const paintFlow = (
         y1: coord(layout.lifelineTop),
         x2: coord(participant.centreX),
         y2: coord(lifelineBottom),
+        ...styles.lifeline,
       }),
       ...participant.activations.map((bar) =>
         tag("rect", {
@@ -315,20 +320,24 @@ const paintFlow = (
           width: ACTIVATION_HALF_WIDTH * 2,
           height: coord(bar.bottom - bar.top),
           rx: 4,
+          ...styles.activation,
         }),
       ),
     ]),
   );
 
   const cards = layout.participants.map((participant, index) =>
-    paintCard({
-      node: participant.node,
-      box: participant.card,
-      showIcon: true,
-      titleSize: TITLE_SIZE,
-      row: 0,
-      laneIndex: index,
-    }),
+    paintCard(
+      {
+        node: participant.node,
+        box: participant.card,
+        showIcon: true,
+        titleSize: TITLE_SIZE,
+        row: 0,
+        laneIndex: index,
+      },
+      palette,
+    ),
   );
 
   const lineMarkup: string[] = [];

package/src/svg/document.ts

@@ -1,9 +1,9 @@
 import type { Delta } from "@coldtea/pr-lens-schema";
 import { assertNever } from "@coldtea/pr-lens-schema";
-import type { Canvas } from "../bounds.js";
 import { coord } from "../geometry.js";
+import { SANS_STACK } from "../text.js";
+import type { Canvas } from "../bounds.js";
 import type { Palette } from "../theme.js";
-import { MONO_STACK, SANS_STACK } from "../text.js";
 import { escapeXml, lines, tag, wrap } from "./primitives.js";
 
 /**
@@ -45,55 +45,6 @@ export const toneColour = (palette: Palette, tone: Tone): string => {
 
 const TONES = ["added", "modified", "removed", "neutral"] as const satisfies readonly Tone[];
 
-const stylesheet = (palette: Palette): string =>
-  [
-    `text{font-family:${SANS_STACK}}`,
-    `.lanebox{fill:${palette.lane}}`,
-    `.lanelabel{font-size:10px;font-weight:700;letter-spacing:.12em;fill:${palette.muted}}`,
-    `.card{fill:${palette.card};stroke:${palette.cardBorder};stroke-width:1}`,
-    `.card-added{stroke:${palette.added};stroke-opacity:.55}`,
-    `.card-modified{stroke:${palette.modified};stroke-opacity:.5}`,
-    `.ghost{opacity:.55}`,
-    `.ghost .card{stroke:${palette.removed};stroke-dasharray:4 3;stroke-opacity:.6}`,
-    `.context{opacity:.82}`,
-    `.ntitle{font-weight:600;fill:${palette.foreground}}`,
-    `.strike{text-decoration:line-through}`,
-    `.nsub{font-size:9.5px;fill:${palette.muted};font-family:${MONO_STACK}}`,
-    `.chip{fill:${palette.chip}}`,
-    `.glyph{fill:${palette.muted}}`,
-    `.glyph-stroke{stroke:${palette.muted};stroke-width:1.4;fill:none}`,
-    `.bdg text{font-size:8.5px;font-weight:700;letter-spacing:.06em}`,
-    `.bdg rect{stroke-width:1}`,
-    `.bdg-added rect{fill:${palette.addedFill};stroke:${palette.addedBorder}}`,
-    `.bdg-added text{fill:${palette.addedText}}`,
-    `.bdg-modified rect{fill:${palette.modifiedFill};stroke:${palette.modifiedBorder}}`,
-    `.bdg-modified text{fill:${palette.modifiedText}}`,
-    `.bdg-removed rect{fill:${palette.removedFill};stroke:${palette.removedBorder}}`,
-    `.bdg-removed text{fill:${palette.removedText}}`,
-    `.bdg-neutral rect{fill:${palette.neutralFill};stroke:${palette.cardBorder}}`,
-    `.bdg-neutral text{fill:${palette.muted}}`,
-    `.edge{fill:none;stroke-width:1.5}`,
-    `.edge-added{stroke:${palette.added}}`,
-    `.edge-modified{stroke:${palette.modified}}`,
-    `.edge-removed{stroke:${palette.removed};stroke-dasharray:5 4;opacity:.7}`,
-    `.edge-neutral{stroke:${palette.edge}}`,
-    `.hero{stroke-width:2.25}`,
-    `.faded{opacity:.45}`,
-    `.glow{fill:none;stroke-width:7;opacity:.14}`,
-    `.msg-self{font-size:11px;fill:${palette.foreground}}`,
-    `.lpill{fill:${palette.pill};stroke:${palette.pillBorder};stroke-width:1}`,
-    `.ltext{font-size:9.5px;font-weight:600;fill:${palette.muted}}`,
-    `.ltext-added{fill:${palette.addedText}}`,
-    `.ltext-modified{fill:${palette.modifiedText}}`,
-    `.ltext-removed{fill:${palette.removedText}}`,
-    `.cardsh{filter:drop-shadow(0 1px 2px ${palette.shadow})}`,
-    `.lifeline{stroke:${palette.lifeline};stroke-width:1;stroke-dasharray:3 4}`,
-    `.actbar{fill:${palette.addedFill};stroke:${palette.addedBorder}}`,
-    `.msg{fill:none;stroke-width:1.5}`,
-    `.msg-return{stroke-dasharray:4 3;opacity:.8}`,
-    `.msg-strong{stroke-width:2.25}`,
-  ].join("");
-
 /**
  * Two arrowhead forms per tone, the classic sequence-diagram pair: a filled
  * head for a message the sender waits on, an open line-form head for one it
@@ -174,10 +125,10 @@ export const svgDocument = (input: {
 
   return lines([
     `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${coord(width)} ${coord(height)}" ` +
-      `width="${coord(width)}" height="${coord(height)}" role="img" aria-label="${escapeXml(title)}">`,
+      `width="${coord(width)}" height="${coord(height)}" role="img" aria-label="${escapeXml(title)}" ` +
+      `font-family="${escapeXml(SANS_STACK)}">`,
     wrap("title", {}, escapeXml(title)),
     description === undefined ? "" : wrap("desc", {}, escapeXml(description)),
-    wrap("style", {}, stylesheet(palette)),
     defs,
     tag("rect", { x: 0, y: 0, width: coord(width), height: coord(height), rx: 12, fill: palette.background }),
     tag("rect", { x: 0, y: 0, width: coord(width), height: coord(height), rx: 12, fill: "url(#dots)" }),

package/src/svg/icons.ts

@@ -1,33 +1,23 @@
-import type { NodeKind } from "@coldtea/pr-lens-schema";
 import { assertNever } from "@coldtea/pr-lens-schema";
+import type { NodeKind } from "@coldtea/pr-lens-schema";
 import { coord } from "../geometry.js";
 import { MONO_STACK } from "../text.js";
+import type { SvgStyles } from "./styles.js";
+import type { Attributes } from "./primitives.js";
 import { lines, tag, textNode, wrap } from "./primitives.js";
 
-const stroked = (path: string): string => tag("path", { class: "glyph-stroke", d: path });
-
-const glyphText = (cx: number, cy: number, content: string, style: string): string =>
+const glyphText = (cx: number, cy: number, content: string, attributes: Attributes): string =>
   textNode(
     {
       class: "glyph",
       x: coord(cx),
       y: coord(cy + 4.5),
       "text-anchor": "middle",
-      style,
+      ...attributes,
     },
     content,
   );
 
-const box = (cx: number, cy: number, width: number, height: number, radius?: number): string =>
-  tag("rect", {
-    class: "glyph-stroke",
-    x: coord(cx - width / 2),
-    y: coord(cy - height / 2),
-    width: coord(width),
-    height: coord(height),
-    rx: radius === undefined ? undefined : coord(radius),
-  });
-
 /**
  * The chip glyph for a node's kind, centred on a point.
  *
@@ -35,12 +25,26 @@ const box = (cx: number, cy: number, width: number, height: number, radius?: num
  * is why the kind enum is coarse. Every kind draws something: a card with an
  * empty chip reads as a rendering fault rather than as an unknown kind.
  */
-const kindGlyph = (kind: NodeKind, cx: number, cy: number): string => {
+const kindGlyph = (kind: NodeKind, cx: number, cy: number, styles: SvgStyles): string => {
+  const stroked = (path: string): string =>
+    tag("path", { class: "glyph-stroke", d: path, ...styles.glyphStroke });
+
+  const box = (cx: number, cy: number, width: number, height: number, radius?: number): string =>
+    tag("rect", {
+      class: "glyph-stroke",
+      x: coord(cx - width / 2),
+      y: coord(cy - height / 2),
+      width: coord(width),
+      height: coord(height),
+      rx: radius === undefined ? undefined : coord(radius),
+      ...styles.glyphStroke,
+    });
+
   switch (kind) {
     case "service":
       return lines([
         box(cx, cy, 13, 13, 3),
-        tag("circle", { class: "glyph", cx: coord(cx), cy: coord(cy), r: 2 }),
+        tag("circle", { class: "glyph", ...styles.glyph, cx: coord(cx), cy: coord(cy), r: 2 }),
       ]);
     case "app":
       return lines([
@@ -48,17 +52,23 @@ const kindGlyph = (kind: NodeKind, cx: number, cy: number): string => {
         stroked(`M${coord(cx - 7)},${coord(cy - 2)} h14`),
       ]);
     case "module":
-      return glyphText(cx, cy, "{ }", `font-size:11px;font-family:${MONO_STACK}`);
+      return glyphText(cx, cy, "{ }", { ...styles.glyph, "font-size": 11, "font-family": MONO_STACK });
     case "function":
-      return glyphText(cx, cy, "ƒ", "font-size:14px;font-style:italic;font-family:Georgia,serif");
+      return glyphText(cx, cy, "ƒ", {
+        ...styles.glyph,
+        "font-size": 14,
+        "font-style": "italic",
+        "font-family": "Georgia,serif",
+      });
     case "route":
       return tag("path", {
         class: "glyph",
+        ...styles.glyph,
         d: `M${coord(cx - 7)},${coord(cy - 6)} L${coord(cx + 7)},${coord(cy)} L${coord(cx - 7)},${coord(cy + 6)} Z`,
       });
     case "job":
       return lines([
-        tag("circle", { class: "glyph-stroke", cx: coord(cx), cy: coord(cy), r: 6.5 }),
+        tag("circle", { class: "glyph-stroke", ...styles.glyphStroke, cx: coord(cx), cy: coord(cy), r: 6.5 }),
         stroked(`M${coord(cx)},${coord(cy - 3.5)} V${coord(cy)} H${coord(cx + 3)}`),
       ]);
     case "queue":
@@ -69,7 +79,7 @@ const kindGlyph = (kind: NodeKind, cx: number, cy: number): string => {
       ]);
     case "datastore":
       return lines([
-        tag("ellipse", { class: "glyph-stroke", cx: coord(cx), cy: coord(cy - 4.5), rx: 6.5, ry: 2.6 }),
+        tag("ellipse", { class: "glyph-stroke", ...styles.glyphStroke, cx: coord(cx), cy: coord(cy - 4.5), rx: 6.5, ry: 2.6 }),
         stroked(
           `M${coord(cx - 6.5)},${coord(cy - 4.5)} v9 a6.5,2.6 0 0 0 13 0 v-9`,
         ),
@@ -77,6 +87,7 @@ const kindGlyph = (kind: NodeKind, cx: number, cy: number): string => {
     case "cache":
       return tag("path", {
         class: "glyph",
+        ...styles.glyph,
         d: `M${coord(cx + 1)},${coord(cy - 7)} L${coord(cx - 6)},${coord(cy + 1)} H${coord(cx - 1)} L${coord(cx - 1)},${coord(cy + 7)} L${coord(cx + 6)},${coord(cy - 1)} H${coord(cx + 1)} Z`,
       });
     case "external":
@@ -93,8 +104,8 @@ const kindGlyph = (kind: NodeKind, cx: number, cy: number): string => {
       return lines([
         stroked(`M${coord(cx - 7)},${coord(cy - 4)} h14`),
         stroked(`M${coord(cx - 7)},${coord(cy + 4)} h14`),
-        tag("circle", { class: "glyph", cx: coord(cx - 2), cy: coord(cy - 4), r: 2.2 }),
-        tag("circle", { class: "glyph", cx: coord(cx + 3), cy: coord(cy + 4), r: 2.2 }),
+        tag("circle", { class: "glyph", ...styles.glyph, cx: coord(cx - 2), cy: coord(cy - 4), r: 2.2 }),
+        tag("circle", { class: "glyph", ...styles.glyph, cx: coord(cx + 3), cy: coord(cy + 4), r: 2.2 }),
       ]);
     case "test":
       return stroked(`M${coord(cx - 6)},${coord(cy)} l4,4 l8,-8`);
@@ -108,14 +119,14 @@ const kindGlyph = (kind: NodeKind, cx: number, cy: number): string => {
       ]);
     case "other":
       return lines([
-        tag("circle", { class: "glyph", cx: coord(cx - 5), cy: coord(cy), r: 1.8 }),
-        tag("circle", { class: "glyph", cx: coord(cx), cy: coord(cy), r: 1.8 }),
-        tag("circle", { class: "glyph", cx: coord(cx + 5), cy: coord(cy), r: 1.8 }),
+        tag("circle", { class: "glyph", ...styles.glyph, cx: coord(cx - 5), cy: coord(cy), r: 1.8 }),
+        tag("circle", { class: "glyph", ...styles.glyph, cx: coord(cx), cy: coord(cy), r: 1.8 }),
+        tag("circle", { class: "glyph", ...styles.glyph, cx: coord(cx + 5), cy: coord(cy), r: 1.8 }),
       ]);
     default:
       return assertNever(kind, "Unhandled node kind");
   }
 };
 
-export const glyphGroup = (kind: NodeKind, cx: number, cy: number): string =>
-  wrap("g", {}, kindGlyph(kind, cx, cy));
+export const glyphGroup = (kind: NodeKind, cx: number, cy: number, styles: SvgStyles): string =>
+  wrap("g", {}, kindGlyph(kind, cx, cy, styles));

package/src/svg/styles.ts

@@ -0,0 +1,122 @@
+import { assertNever } from "@coldtea/pr-lens-schema";
+import type { Delta, FlowMessage, GraphEdge } from "@coldtea/pr-lens-schema";
+import { MONO_STACK } from "../text.js";
+import type { Palette } from "../theme.js";
+import type { Attributes } from "./primitives.js";
+import { toneColour, toneFor, type Tone } from "./document.js";
+
+// GitHub's attachment viewer can ignore CSS, so appearance lives on the elements.
+export const stylesFor = (palette: Palette) => ({
+  lane: { fill: palette.lane },
+  laneLabel: { "font-size": 10, "font-weight": 700, "letter-spacing": ".12em", fill: palette.muted },
+  title: { "font-weight": 600, fill: palette.foreground },
+  subtitle: { "font-size": 9.5, fill: palette.muted, "font-family": MONO_STACK },
+  chip: { fill: palette.chip },
+  glyph: { fill: palette.muted },
+  glyphStroke: { stroke: palette.muted, "stroke-width": 1.4, fill: "none" },
+  badgeText: { "font-size": 8.5, "font-weight": 700, "letter-spacing": ".06em" },
+  glow: { fill: "none", "stroke-width": 7, opacity: 0.14 },
+  pill: { fill: palette.pill, stroke: palette.pillBorder, "stroke-width": 1 },
+  pillText: { "font-size": 9.5, "font-weight": 600 },
+  lifeline: { stroke: palette.lifeline, "stroke-width": 1, "stroke-dasharray": "3 4" },
+  activation: { fill: palette.addedFill, stroke: palette.addedBorder },
+});
+
+export type SvgStyles = ReturnType<typeof stylesFor>;
+
+const cardStroke = (delta: Delta, palette: Palette): Attributes => {
+  switch (delta) {
+    case "added":
+      return { stroke: palette.added, "stroke-opacity": 0.55 };
+    case "modified":
+      return { stroke: palette.modified, "stroke-opacity": 0.5 };
+    case "removed":
+      return { stroke: palette.removed, "stroke-dasharray": "4 3", "stroke-opacity": 0.6 };
+    case "unchanged":
+      return { stroke: palette.cardBorder };
+    default:
+      return assertNever(delta);
+  }
+};
+
+export const cardAttributes = (delta: Delta, palette: Palette): Attributes => ({
+  fill: palette.card,
+  "stroke-width": 1,
+  ...cardStroke(delta, palette),
+});
+
+const cardOpacity = (delta: Delta): number | undefined => {
+  switch (delta) {
+    case "removed":
+      return 0.55;
+    case "unchanged":
+      return 0.82;
+    case "added":
+    case "modified":
+      return undefined;
+    default:
+      return assertNever(delta);
+  }
+};
+
+export const cardGroupAttributes = (delta: Delta, palette: Palette): Attributes => ({
+  filter: `drop-shadow(0 1px 2px ${palette.shadow})`,
+  opacity: cardOpacity(delta),
+});
+
+export const badgeColours = (tone: Tone, palette: Palette) => {
+  switch (tone) {
+    case "added":
+      return { fill: palette.addedFill, stroke: palette.addedBorder, text: palette.addedText };
+    case "modified":
+      return { fill: palette.modifiedFill, stroke: palette.modifiedBorder, text: palette.modifiedText };
+    case "removed":
+      return { fill: palette.removedFill, stroke: palette.removedBorder, text: palette.removedText };
+    case "neutral":
+      return { fill: palette.neutralFill, stroke: palette.cardBorder, text: palette.muted };
+    default:
+      return assertNever(tone);
+  }
+};
+
+const strokeAttributes = (delta: Delta, palette: Palette): Attributes => ({
+  fill: "none",
+  stroke: toneColour(palette, toneFor(delta)),
+  "stroke-width": 1.5,
+  "stroke-dasharray": delta === "removed" ? "5 4" : undefined,
+  opacity: delta === "removed" ? 0.7 : undefined,
+});
+
+export const edgeAttributes = (edge: GraphEdge, palette: Palette): Attributes => {
+  const attributes = {
+    ...strokeAttributes(edge.delta, palette),
+    ...(edge.delta === "unchanged" ? { opacity: 0.82 } : {}),
+  };
+  switch (edge.emphasis) {
+    case "hero":
+      return { ...attributes, "stroke-width": 2.25 };
+    case "muted":
+      return { ...attributes, opacity: 0.45 };
+    case "normal":
+      return attributes;
+    default:
+      return assertNever(edge.emphasis);
+  }
+};
+
+export const messageAttributes = (message: FlowMessage, palette: Palette): Attributes => {
+  const attributes = {
+    ...strokeAttributes(message.delta, palette),
+    "stroke-width": message.delta === "added" ? 2.25 : 1.5,
+  };
+  switch (message.kind) {
+    case "return":
+      return { ...attributes, "stroke-dasharray": "4 3", opacity: 0.8 };
+    case "sync":
+    case "async":
+    case "self":
+      return attributes;
+    default:
+      return assertNever(message.kind);
+  }
+};

package/src/version.ts

@@ -6,4 +6,4 @@
  */
 export const RENDERER_NAME = "@coldtea/pr-lens-renderer";
 
-export const RENDERER_VERSION = "0.2.3";
+export const RENDERER_VERSION = "0.2.4";