@diagrammo/dgmo 0.39.0 → 0.40.0

package/src/index.ts

@@ -20,6 +20,7 @@ import { palettes, getPalette } from './palettes';
 import type { PaletteConfig } from './palettes/types';
 import type { Theme } from './themes';
 import { formatDgmoError, type DgmoError } from './diagnostics';
+import { renderErrorCard } from './error-card';
 
 export type { CompactViewState } from './sharing';
 
@@ -93,41 +94,17 @@ export async function render(
     return result;
   }
 
-  // 'svg' (default): render an inline error SVG so the user sees the problem
+  // 'svg' (default): render an inline error card so the author sees what
+  // broke, on which line, and the offending source — see error-card.ts.
+  // We show the card whenever there are error-severity diagnostics, even if a
+  // parser produced a partial SVG: a misleading half-diagram is worse than a
+  // clear "here's what's wrong" for an embedded host (remark/astro/obsidian).
   return {
-    svg: result.svg || renderErrorSvg(errors, palette, options?.theme),
+    svg: renderErrorCard(errors, text, palette, options?.theme),
     diagnostics: result.diagnostics,
   };
 }
 
-function renderErrorSvg(
-  errors: DgmoError[],
-  palette: PaletteConfig,
-  theme?: Theme
-): string {
-  const colors = palette[theme === 'dark' ? 'dark' : 'light'];
-  const bg = theme === 'transparent' ? 'transparent' : colors.bg;
-  const fg = colors.destructive ?? colors.text;
-  const muted = colors.textMuted ?? colors.text;
-  const lines = errors.slice(0, 5).map((e) => formatDgmoError(e));
-  const height = 60 + lines.length * 20;
-  const body = lines
-    .map(
-      (line, i) =>
-        `<text x="20" y="${60 + i * 20}" fill="${fg}" font-family="ui-monospace, monospace" font-size="12">${escapeXml(line)}</text>`
-    )
-    .join('');
-  return `<svg xmlns="http://www.w3.org/2000/svg" width="640" height="${height}" viewBox="0 0 640 ${height}"><rect width="100%" height="100%" fill="${bg}"/><text x="20" y="34" fill="${muted}" font-family="system-ui, sans-serif" font-size="13" font-weight="600">DGMO parse error</text>${body}</svg>`;
-}
-
-function escapeXml(s: string): string {
-  return s
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;');
-}
-
 // ============================================================
 // validate(text)
 // ============================================================

package/src/journey-map/renderer.ts

@@ -71,6 +71,10 @@ const FONT_SIZE_META = 10;
 const GRID_LINE_OPACITY = 0.15;
 const CURVE_STROKE_WIDTH = 2.5;
 const FACE_RADIUS = 14;
+// Faces grow on hover/active; the thought bubble + connector must clear the
+// enlarged outer edge (radius + ring halo), not the base radius.
+const FACE_HOVER_SCALE = 1.5;
+const FACE_HOVER_R = (FACE_RADIUS + 1) * FACE_HOVER_SCALE;
 const DIM_HOVER = 0.25;
 const TITLE_LINE_HEIGHT = 16;
 
@@ -450,6 +454,7 @@ export function renderJourneyMap(
       y,
       score,
       palette,
+      isDark,
       SCORE_LABEL_R
     );
 
@@ -517,7 +522,14 @@ export function renderJourneyMap(
 
     for (const pt of layout.curvePoints) {
       const step = allSteps[pt.stepIndex];
-      const faceG = renderScoreFace(curveG, pt.x, pt.y, pt.score, palette);
+      const faceG = renderScoreFace(
+        curveG,
+        pt.x,
+        pt.y,
+        pt.score,
+        palette,
+        isDark
+      );
       addEmotionLabel(faceG, pt, palette);
       if (step) {
         faceG.attr('data-line-number', step.lineNumber);
@@ -549,7 +561,14 @@ export function renderJourneyMap(
         ? parsed.phases.flatMap((p) => p.steps)
         : parsed.steps;
     const step = allSteps[pt.stepIndex];
-    const faceG = renderScoreFace(curveG, pt.x, pt.y, pt.score, palette);
+    const faceG = renderScoreFace(
+      curveG,
+      pt.x,
+      pt.y,
+      pt.score,
+      palette,
+      isDark
+    );
     addEmotionLabel(faceG, pt, palette);
     if (step) {
       faceG.attr('data-line-number', step.lineNumber);
@@ -723,6 +742,7 @@ export function renderJourneyMap(
               faceCy,
               step.score,
               palette,
+              isDark,
               COLLAPSED_FACE_R
             );
             faceG.attr('data-line-number', step.lineNumber);
@@ -856,7 +876,7 @@ export function renderJourneyMap(
           const fcy = parseFloat(el.attr('data-cy') ?? '0');
           el.attr(
             'transform',
-            `translate(${fcx},${fcy}) scale(1.5) translate(${-fcx},${-fcy})`
+            `translate(${fcx},${fcy}) scale(${FACE_HOVER_SCALE}) translate(${-fcx},${-fcy})`
           );
         } else {
           el.attr('transform', null);
@@ -917,7 +937,7 @@ export function renderJourneyMap(
         PADDING,
         Math.min(fcx - bw / 2, layout.totalWidth - PADDING - bw)
       );
-      const by = Math.max(PADDING, fcy - FACE_RADIUS - THOUGHT_GAP - bh);
+      const by = Math.max(PADDING, fcy - FACE_HOVER_R - THOUGHT_GAP - bh);
 
       const scoreColor = scoreToColor(score, palette);
       const tintedBg = mix(scoreColor, palette.surface, 20);
@@ -939,7 +959,7 @@ export function renderJourneyMap(
         .attr('x1', fcx)
         .attr('y1', by + bh)
         .attr('x2', fcx)
-        .attr('y2', fcy - FACE_RADIUS - 1)
+        .attr('y2', fcy - FACE_HOVER_R - 1)
         .attr('stroke', scoreColor)
         .attr('stroke-width', CARD_STROKE_WIDTH);
 
@@ -1400,6 +1420,7 @@ function renderScoreFace(
   cy: number,
   score: number,
   palette: PaletteColors,
+  isDark: boolean,
   radius?: number
 ): d3.Selection<SVGGElement, unknown, null, undefined> {
   const r = radius ?? FACE_RADIUS;
@@ -1410,21 +1431,28 @@ function renderScoreFace(
     .attr('data-cx', cx)
     .attr('data-cy', cy);
 
-  // Face circle
+  // Face: a solid colored ring over the canonical tinted fill (the same
+  // shapeFill() tint used for unsolid shapes elsewhere), with the eyes and
+  // mouth drawn in the full score color.
+  const faceFill = shapeFill(palette, color, isDark);
+
+  // Thin bg halo so the colored ring reads crisply where it crosses the line.
+  g.append('circle')
+    .attr('cx', cx)
+    .attr('cy', cy)
+    .attr('r', r + 1)
+    .attr('fill', palette.bg);
+
   g.append('circle')
     .attr('cx', cx)
     .attr('cy', cy)
     .attr('r', r)
-    .attr('fill', color)
-    .attr('stroke', palette.bg)
-    .attr('stroke-width', 1.5);
+    .attr('fill', faceFill)
+    .attr('stroke', color)
+    .attr('stroke-width', 2);
 
-  // Eyes
-  const eyeColor = contrastText(
-    color,
-    palette.textOnFillLight,
-    palette.textOnFillDark
-  );
+  // Eyes & mouth share the solid score color.
+  const eyeColor = color;
   const eyeY = cy - r * 0.15;
   const eyeSpacing = r * 0.32;
   const eyeR = r * 0.12;
@@ -1441,10 +1469,14 @@ function renderScoreFace(
 
   // Mouth — arc curvature based on score
   // score 5: big smile, score 3: straight, score 1: deep frown
-  const mouthY = cy + r * 0.25;
-  const mouthW = r * 0.45;
+  const mouthW = r * 0.46;
   // Curve amount: positive = smile, negative = frown
-  const curve = ((score - 3) / 2) * r * 0.35;
+  const curve = ((score - 3) / 2) * r * 0.42;
+  // Pin the mouth's visual apex (its mid-point) to a fixed Y and let the
+  // curvature swing symmetrically about it. Anchoring the corners instead made
+  // the frown's arch ride up into the eyes and read as a cramped grimace.
+  const apexY = cy + r * 0.32;
+  const mouthY = apexY - curve / 2;
 
   g.append('path')
     .attr(