@coldtea/pr-lens-renderer 0.2.6 → 0.3.1

package/src/manifest.ts

@@ -1,7 +1,7 @@
 import { createHash } from "node:crypto";
 import type { GraphDoc, Lens, RenderAsset, RenderManifest } from "@coldtea/pr-lens-schema";
 import { SCHEMA_VERSION } from "@coldtea/pr-lens-schema";
-import type { Theme } from "./theme.js";
+import { THEMES, type Theme } from "./theme.js";
 import { RENDERER_NAME, RENDERER_VERSION } from "./version.js";
 
 /**
@@ -62,7 +62,8 @@ const escapeForFileName = (id: string): string =>
 
 /** The contract's ceiling on an `Id`, which an asset id has to stay under. */
 const ASSET_ID_MAX = 128;
-const THEME_SUFFIX_MAX = "-light".length;
+/** The longest theme name, so a stem can never push an asset id over the cap. */
+const THEME_SUFFIX_MAX = Math.max(...THEMES.map((theme) => theme.length)) + "-".length;
 const STEM_MAX = ASSET_ID_MAX - THEME_SUFFIX_MAX;
 const DIGEST_LENGTH = 12;
 

package/src/render.ts

@@ -5,7 +5,7 @@ import { applyCorrections } from "./corrections.js";
 import { PrLensRenderError } from "./errors.js";
 import { buildManifest, contentHash, renderAssetFileName, renderAssetId } from "./manifest.js";
 import { findView, flattenViews, resolveScope, type ScopedGraph } from "./scope.js";
-import { paletteFor, THEMES, type Theme } from "./theme.js";
+import { paletteFor, THEME_PAIR, type Theme } from "./theme.js";
 import { paintArchitecture } from "./svg/architecture.js";
 import { paintDataFlow } from "./svg/dataflow.js";
 import { svgDocument } from "./svg/document.js";
@@ -122,10 +122,25 @@ const requireView = (views: readonly View[], id: string): View => {
   return view;
 };
 
+/**
+ * What a render may be asked for: the `<picture>` pair, one half of it, or
+ * the single self-contained render.
+ *
+ * Not `readonly Theme[]`, which would admit all three at once — three assets
+ * per view against a view cap derived from two, so a document that validates
+ * could produce a manifest that does not. The contract's promise is that if
+ * it parses, it renders; this is the boundary that keeps it true.
+ */
+export type RenderThemes =
+  | readonly ["light", "dark"]
+  | readonly ["light"]
+  | readonly ["dark"]
+  | readonly ["neutral"];
+
 export type RenderAllOptions = {
   config?: Config;
-  /** Which halves of the theme pair to produce. Both, by default. */
-  themes?: readonly Theme[];
+  /** The `<picture>` pair by default; `['neutral']` for a single-image surface. */
+  themes?: RenderThemes;
 };
 
 export type RenderedAsset = RenderedSvg & { asset: RenderAsset };
@@ -144,7 +159,7 @@ export type RenderAllResult = {
  */
 export const renderAll = (doc: GraphDoc, options: RenderAllOptions = {}): RenderAllResult => {
   const prepared = prepare(doc, options.config);
-  const themes = options.themes ?? THEMES;
+  const themes = options.themes ?? THEME_PAIR;
 
   const targets: { lens: Lens; view: View | undefined }[] =
     prepared.views.length > 0

package/src/svg/architecture.ts

@@ -8,7 +8,6 @@ import { travellingPulses } from "./pulse.js";
 import type { ScopedGraph } from "../scope.js";
 import { canvasFor, union } from "../bounds.js";
 import { coord, type Box } from "../geometry.js";
-import { placeLabelPills } from "../layout/labels.js";
 import { relieveCongestion } from "../layout/congestion.js";
 import { lines, tag, textNode, wrap } from "./primitives.js";
 import { curveBounds, type RoutedEdge } from "../layout/edges.js";
@@ -28,6 +27,7 @@ import {
   cardTextWidth,
   deltaBadgeText,
   laneHeaderText,
+  occupiedBoxes,
   type PlacedNode,
 } from "../layout/architecture.js";
 import {
@@ -267,14 +267,10 @@ export const paintArchitecture = (
   hints: LayoutHints | undefined,
   palette: Palette,
 ): ArchitecturePainting => {
-  const { layout, routed } = relieveCongestion(graph, hints);
+  const { layout, routed, pills } = relieveCongestion(graph, hints);
   const styles = stylesFor(palette);
-  const pills = placeLabelPills(routed);
+  const drawn: Box[] = occupiedBoxes(layout.nodes);
 
-  const drawn: Box[] = layout.nodes.flatMap((node) => {
-    const row = badgeRow(node);
-    return row === undefined ? [node.box] : [node.box, row.box];
-  });
   const edgeMarkup: string[] = [];
   const pillMarkup: string[] = [];
   for (const edge of routed) {

package/src/theme.ts

@@ -1,15 +1,16 @@
-import { assertNever, THEMES, type Theme } from "@coldtea/pr-lens-schema";
+import { assertNever, THEMES, THEME_PAIR, type Theme } from "@coldtea/pr-lens-schema";
 
 /**
- * The two halves of a GitHub `<picture>` pair. A comment ships both and the
- * client picks; neither half may depend on the page it lands in, because an
- * SVG served as an image cannot see it.
+ * Every theme a render can target, and the two that make a GitHub
+ * `<picture>` pair. A paired comment ships both halves and the client picks;
+ * no render may depend on the page it lands in, because an SVG served as an
+ * image cannot see it.
  *
- * The contract owns the pair, because the number of themes is one half of the
- * arithmetic that bounds a document's view tree. Re-exported here so a caller
- * rendering a diagram does not have to reach into the schema for it.
+ * The contract owns the pair, because its size is one half of the arithmetic
+ * that bounds a document's view tree. Re-exported here so a caller rendering
+ * a diagram does not have to reach into the schema for it.
  */
-export { THEMES, type Theme };
+export { THEMES, THEME_PAIR, type Theme };
 
 /**
  * Every colour the renderer can paint, resolved to a literal before it
@@ -106,12 +107,65 @@ const DARK: Palette = {
   shadow: "rgba(0,0,0,.28)",
 };
 
+/**
+ * The one render for a surface that shows a single image and cannot swap on
+ * the reader's theme — GitLab and Bitbucket both.
+ *
+ * Handing such a surface the light asset is what it used to do, and it put a
+ * glaring white rectangle in front of every dark-mode reader, with strokes
+ * tuned for a light ground washing out against a dark page.
+ *
+ * A transparent render does not solve it either, and the arithmetic says why:
+ * for any flat colour, contrast against white is `1.05 / (L + 0.05)` and
+ * against black is `(L + 0.05) / 0.05`, which are equal only at L ≈ 0.179,
+ * where both are 4.58:1. That is the ceiling for text meant to sit directly
+ * on either page — barely over AA in the best case, and under it against a
+ * near-black like #0d1117.
+ *
+ * So this render is opaque and self-contained: it brings its own ground, and
+ * every contrast ratio inside it is fixed regardless of where it lands. The
+ * ground is dimmed rather than light — on a dark page it sits naturally, and
+ * on a light page it reads as a deliberately dark figure, the way a
+ * screenshot or a code block does. Its border is visible against both, so it
+ * never bleeds into the page.
+ */
+const NEUTRAL: Palette = {
+  background: "#22272e",
+  dot: "rgba(144,157,171,.2)",
+  lane: "rgba(144,157,171,.06)",
+  card: "#2d333b",
+  cardBorder: "#444c56",
+  foreground: "#cdd9e5",
+  muted: "#909dab",
+  edge: "#768390",
+  chip: "rgba(144,157,171,.16)",
+  pill: "#22272e",
+  pillBorder: "#373e47",
+  lifeline: "#444c56",
+  added: "#57ab5a",
+  addedText: "#6bc46d",
+  addedFill: "rgba(70,149,74,.18)",
+  addedBorder: "rgba(87,171,90,.45)",
+  modified: "#c69026",
+  modifiedText: "#daaa3f",
+  modifiedFill: "rgba(174,124,20,.18)",
+  modifiedBorder: "rgba(198,144,38,.45)",
+  removed: "#e5534b",
+  removedText: "#ff938a",
+  removedFill: "rgba(229,83,75,.14)",
+  removedBorder: "rgba(229,83,75,.45)",
+  neutralFill: "rgba(144,157,171,.16)",
+  shadow: "rgba(0,0,0,.3)",
+};
+
 export const paletteFor = (theme: Theme): Palette => {
   switch (theme) {
     case "light":
       return LIGHT;
     case "dark":
       return DARK;
+    case "neutral":
+      return NEUTRAL;
     default:
       return assertNever(theme, "Unhandled theme");
   }

package/src/version.ts

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