@diagrammo/dgmo 0.30.0 → 0.32.0

package/src/chart.ts

@@ -405,7 +405,9 @@ export function parseChart(
     if (dataValues) {
       const { label: rawLabel, color: pointColor } = extractColor(
         dataValues.label,
-        palette
+        palette,
+        result.diagnostics,
+        lineNumber
       );
       const [first, ...rest] = dataValues.values;
       result.data.push({
@@ -485,6 +487,21 @@ export function parseChart(
     );
   }
 
+  // Plain "bar" renders a single series per row — extra series are dropped
+  // silently by the renderer. Surface that instead of losing data quietly so
+  // the author switches to a multi-series type. (multi-line/line parse to
+  // type "line" and DO render every series, so they are unaffected.)
+  if (
+    !result.error &&
+    result.type === 'bar' &&
+    (result.seriesNames?.length ?? 0) > 1
+  ) {
+    warn(
+      result.seriesLineNumber ?? 1,
+      `Plain "bar" shows only the first series ("${result.seriesNames![0]}"); the other ${result.seriesNames!.length - 1} are dropped at render. Use "bar-stacked" for stacked bars or "multi-line" to plot every series.`
+    );
+  }
+
   if (!result.error && result.seriesNames) {
     const expectedCount = result.seriesNames.length;
     for (const dp of result.data) {

package/src/class/renderer.ts

@@ -47,8 +47,10 @@ const MAX_SCALE = 3;
 const CLASS_FONT_SIZE = 13;
 const MEMBER_FONT_SIZE = 11;
 const EDGE_LABEL_FONT_SIZE = 11;
-const EDGE_STROKE_WIDTH = 1.5;
-const NODE_STROKE_WIDTH = 1.5;
+import {
+  EDGE_STROKE_WIDTH,
+  NODE_STROKE_WIDTH,
+} from '../utils/visual-conventions'; // shared (Story 111.1)
 const MEMBER_LINE_HEIGHT = 18;
 const COMPARTMENT_PADDING_Y = 8;
 const MEMBER_PADDING_X = 10;

package/src/cli-banner.ts

@@ -0,0 +1,107 @@
+// ============================================================
+// CLI Banner — colorful ASCII logo for `dgmo`
+// ============================================================
+//
+// Rendered as the header of `dgmo --help` and at the end of the
+// install/init flows. Uses a horizontal true-color (24-bit) gradient
+// sampled from the default `slate` palette (corporate blue → teal →
+// steel cyan) so the wordmark matches the brand.
+//
+// Honors the same guards as `dgmo cat`: color only when stdout is a TTY
+// and NO_COLOR is unset; otherwise prints plain ASCII so pipes/CI stay
+// clean.
+
+import { getPalette } from './palettes';
+
+// ANSI Shadow letterform for "dgmo" (6 rows) + tagline.
+const ART = [
+  '██████╗  ██████╗ ███╗   ███╗ ██████╗ ',
+  '██╔══██╗██╔════╝ ████╗ ████║██╔═══██╗',
+  '██║  ██║██║  ███╗██╔████╔██║██║   ██║',
+  '██║  ██║██║   ██║██║╚██╔╝██║██║   ██║',
+  '██████╔╝╚██████╔╝██║ ╚═╝ ██║╚██████╔╝',
+  '╚═════╝  ╚═════╝ ╚═╝     ╚═╝ ╚═════╝ ',
+];
+
+const TAGLINE = 'diagrams as code';
+
+// Gradient stops, pulled by name from the live slate palette (light) so the
+// wordmark tracks any palette edit instead of drifting from a hardcoded copy.
+// blue → teal → green → amber: a vivid sweep across the categorical hues.
+const GRADIENT_COLOR_NAMES = ['blue', 'teal', 'green', 'orange'] as const;
+
+function hexToRgb(hex: string): [number, number, number] {
+  const h = hex.replace('#', '');
+  return [
+    parseInt(h.slice(0, 2), 16),
+    parseInt(h.slice(2, 4), 16),
+    parseInt(h.slice(4, 6), 16),
+  ];
+}
+
+const STOPS: Array<[number, number, number]> = (() => {
+  const colors = getPalette('slate').light.colors;
+  return GRADIENT_COLOR_NAMES.map((name) => hexToRgb(colors[name]));
+})();
+
+function lerp(a: number, b: number, t: number): number {
+  return Math.round(a + (b - a) * t);
+}
+
+/** Interpolate the multi-stop gradient at position t ∈ [0, 1]. */
+function gradientAt(t: number): [number, number, number] {
+  const clamped = Math.max(0, Math.min(1, t));
+  const span = STOPS.length - 1;
+  const scaled = clamped * span;
+  const i = Math.min(span - 1, Math.floor(scaled));
+  const local = scaled - i;
+  const [r1, g1, b1] = STOPS[i]!;
+  const [r2, g2, b2] = STOPS[i + 1]!;
+  return [lerp(r1, r2, local), lerp(g1, g2, local), lerp(b1, b2, local)];
+}
+
+function fg(r: number, g: number, b: number): string {
+  return `\x1b[38;2;${r};${g};${b}m`;
+}
+
+const RESET = '\x1b[0m';
+
+export interface BannerOptions {
+  /** Force-disable color regardless of TTY (default honors stdout TTY + NO_COLOR). */
+  color?: boolean;
+}
+
+/**
+ * Build the dgmo banner string. Colorized with a horizontal gradient when
+ * `color` is true; otherwise returns plain ASCII.
+ */
+export function renderBanner(opts: BannerOptions = {}): string {
+  const useColor =
+    opts.color ?? (process.stdout.isTTY === true && !process.env['NO_COLOR']);
+
+  const width = Math.max(...ART.map((line) => line.length));
+
+  const lines = ART.map((line) => {
+    if (!useColor) return line;
+    let out = '';
+    for (let col = 0; col < line.length; col++) {
+      const ch = line[col];
+      // Don't paint spaces — keeps escape sequences minimal.
+      if (ch === ' ') {
+        out += ch;
+        continue;
+      }
+      const [r, g, b] = gradientAt(col / (width - 1));
+      out += fg(r, g, b) + ch;
+    }
+    return out + RESET;
+  });
+
+  // Right-align the tagline under the wordmark, muted.
+  const pad = Math.max(0, width - TAGLINE.length);
+  const tagline = useColor
+    ? `${' '.repeat(pad)}\x1b[2;3m${TAGLINE}${RESET}`
+    : `${' '.repeat(pad)}${TAGLINE}`;
+
+  return ['', ...lines, tagline, ''].join('\n');
+}

package/src/cli.ts

@@ -25,6 +25,7 @@ import {
   migrateFile,
 } from './migrate';
 import { migrateEmbedded } from './migrate/embedded';
+import { renderBanner } from './cli-banner';
 
 // Derived from the palette registry so new palettes are auto-included.
 const PALETTES = getAvailablePalettes().map((p) => p.id);
@@ -464,6 +465,7 @@ For architecture diagrams, sequence diagrams, flowcharts, and charts, use the \`
 `;
 
 function printHelp(): void {
+  console.log(renderBanner());
   console.log(`Usage: dgmo <input> [options]
        cat input.dgmo | dgmo [options]
        dgmo cat <file>          Display file with syntax highlighting
@@ -648,10 +650,12 @@ function svgToPng(svg: string, background?: string): Buffer {
 }
 
 function noInput(): never {
+  console.error(renderBanner());
   const samplePath = resolve('sample.dgmo');
   if (existsSync(samplePath)) {
     console.error('Error: No input file specified');
     console.error(`Try: dgmo ${basename(samplePath)}`);
+    console.error('Run dgmo --help for all options.');
     process.exit(1);
   }
   writeFileSync(
@@ -925,6 +929,15 @@ async function main(): Promise<void> {
     return;
   }
 
+  if (
+    opts.installClaudeCodeIntegration ||
+    opts.installClaudeSkill ||
+    opts.installCodexIntegration ||
+    opts.installClaudeDesktopIntegration
+  ) {
+    console.log(renderBanner());
+  }
+
   if (opts.installClaudeCodeIntegration) {
     const claudeDir = join(homedir(), '.claude');
     if (!existsSync(claudeDir)) {

package/src/colors.ts

@@ -60,6 +60,28 @@ export const RECOGNIZED_COLOR_NAMES = Object.freeze([
   'white',
 ] as const);
 
+/**
+ * The canonical order in which the categorical (non-neutral) color names are
+ * auto-assigned: tag/group swatches (`autoTagColorCycle`) and data-chart
+ * series colors (`getSeriesColors`) both derive their rotation from this list.
+ *
+ * Seeded with the RGB primaries (`red, green, blue`) for an unmistakable first
+ * three, then each subsequent hue is chosen to fill the widest remaining gap on
+ * the color wheel — maximizing contrast between adjacent swatches. Neutrals
+ * (`gray`/`black`/`white`) are intentionally excluded so auto-picked colors
+ * always read as distinct legend swatches.
+ */
+export const CATEGORICAL_COLOR_ORDER = Object.freeze([
+  'red',
+  'green',
+  'blue',
+  'yellow',
+  'teal',
+  'purple',
+  'orange',
+  'cyan',
+] as const);
+
 /**
  * Returns true iff `name` is one of the 11 recognized DGMO color names.
  */
@@ -95,6 +117,211 @@ export function resolveColor(
 import type { DgmoError } from './diagnostics';
 import { makeDgmoError, suggest } from './diagnostics';
 
+/**
+ * Stable diagnostic code for "this token is not one of the 11 named palette
+ * colors" — covers both hex/CSS literals (emitted as `error`) and unrecognized
+ * bare words like `crimson` (emitted as `warning`). Consumers that want to
+ * HARD-BLOCK invalid colors regardless of severity (e.g. the MCP render gate)
+ * filter on this code rather than re-deriving the rule.
+ */
+export const INVALID_COLOR_CODE = 'E_INVALID_COLOR';
+
+/**
+ * CSS / X11 color names that are NOT one of DGMO's 11 — mapped to their hex so
+ * a "nearest valid color" hint can be computed. This is the blocklist that lets
+ * the trailing-token rule tell an *intended-but-invalid* color (`pink`,
+ * `crimson`, `navy`) apart from an ordinary label word (`Zinfandel`, `Blanc`):
+ * a lowercase trailing token found here is flagged, anything else stays label
+ * text. Our 11 valid names are deliberately excluded. Extend freely — it only
+ * sharpens detection. (Case-sensitive lowercase, matching the §1.5 color rule.)
+ */
+export const INVALID_CSS_COLOR_HEX: Readonly<Record<string, string>> =
+  Object.freeze({
+    pink: '#ffc0cb',
+    hotpink: '#ff69b4',
+    deeppink: '#ff1493',
+    lightpink: '#ffb6c1',
+    palevioletred: '#db7093',
+    crimson: '#dc143c',
+    scarlet: '#ff2400',
+    firebrick: '#b22222',
+    darkred: '#8b0000',
+    maroon: '#800000',
+    salmon: '#fa8072',
+    lightsalmon: '#ffa07a',
+    darksalmon: '#e9967a',
+    coral: '#ff7f50',
+    lightcoral: '#f08080',
+    tomato: '#ff6347',
+    orangered: '#ff4500',
+    darkorange: '#ff8c00',
+    gold: '#ffd700',
+    goldenrod: '#daa520',
+    darkgoldenrod: '#b8860b',
+    khaki: '#f0e68c',
+    darkkhaki: '#bdb76b',
+    amber: '#ffbf00',
+    lavender: '#e6e6fa',
+    violet: '#ee82ee',
+    magenta: '#ff00ff',
+    fuchsia: '#ff00ff',
+    orchid: '#da70d6',
+    plum: '#dda0dd',
+    indigo: '#4b0082',
+    navy: '#000080',
+    midnightblue: '#191970',
+    darkblue: '#00008b',
+    mediumblue: '#0000cd',
+    royalblue: '#4169e1',
+    cornflowerblue: '#6495ed',
+    dodgerblue: '#1e90ff',
+    deepskyblue: '#00bfff',
+    skyblue: '#87ceeb',
+    lightskyblue: '#87cefa',
+    lightblue: '#add8e6',
+    powderblue: '#b0e0e6',
+    steelblue: '#4682b4',
+    slateblue: '#6a5acd',
+    cadetblue: '#5f9ea0',
+    turquoise: '#40e0d0',
+    aqua: '#00ffff',
+    aquamarine: '#7fffd4',
+    lime: '#00ff00',
+    limegreen: '#32cd32',
+    lightgreen: '#90ee90',
+    palegreen: '#98fb98',
+    seagreen: '#2e8b57',
+    mediumseagreen: '#3cb371',
+    forestgreen: '#228b22',
+    darkgreen: '#006400',
+    olive: '#808000',
+    olivedrab: '#6b8e23',
+    darkolivegreen: '#556b2f',
+    chartreuse: '#7fff00',
+    lawngreen: '#7cfc00',
+    springgreen: '#00ff7f',
+    greenyellow: '#adff2f',
+    brown: '#a52a2a',
+    sienna: '#a0522d',
+    chocolate: '#d2691e',
+    peru: '#cd853f',
+    tan: '#d2b48c',
+    beige: '#f5f5dc',
+    wheat: '#f5deb3',
+    ivory: '#fffff0',
+    silver: '#c0c0c0',
+    lightgray: '#d3d3d3',
+    lightgrey: '#d3d3d3',
+    darkgray: '#a9a9a9',
+    darkgrey: '#a9a9a9',
+    dimgray: '#696969',
+    dimgrey: '#696969',
+    slategray: '#708090',
+    slategrey: '#708090',
+    gainsboro: '#dcdcdc',
+    grey: '#808080',
+  });
+
+/**
+ * Best-effort nearest recognized color NAME for an unsupported hex value.
+ * Matches by HUE (with a low-saturation cutoff routing to black/white/gray),
+ * NOT raw RGB distance to the muted palette hexes — vivid LLM colors like a
+ * `#3cb44b` green would otherwise snap to `gray` against a desaturated sage.
+ * Returns null for non-hex input (CSS function/keyword colors, no RGB to read).
+ * Used ONLY to enrich a diagnostic — never to silently accept the value.
+ */
+export function nearestNamedColor(input: string): string | null {
+  // CSS color name → resolve to its hex first so hue-matching works on it too.
+  const cssHex = INVALID_CSS_COLOR_HEX[input.trim().toLowerCase()];
+  if (cssHex) input = cssHex;
+  const m = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(input.trim());
+  if (!m) return null;
+  let h = m[1]!.toLowerCase();
+  if (h.length === 3)
+    h = h
+      .split('')
+      .map((c) => c + c)
+      .join('');
+  const r = parseInt(h.slice(0, 2), 16) / 255;
+  const g = parseInt(h.slice(2, 4), 16) / 255;
+  const b = parseInt(h.slice(4, 6), 16) / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const delta = max - min;
+  const l = (max + min) / 2;
+  const s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
+  // Low chroma → a neutral; pick by lightness.
+  if (s < 0.15) {
+    if (l < 0.2) return 'black';
+    if (l > 0.85) return 'white';
+    return 'gray';
+  }
+  let hue: number;
+  if (max === r) hue = 60 * (((g - b) / delta) % 6);
+  else if (max === g) hue = 60 * ((b - r) / delta + 2);
+  else hue = 60 * ((r - g) / delta + 4);
+  if (hue < 0) hue += 360;
+  // Canonical hue anchors for the 8 chromatic names (red appears at both 0 and
+  // 360 so wrap-around resolves correctly).
+  const anchors: readonly [string, number][] = [
+    ['red', 0],
+    ['orange', 30],
+    ['yellow', 55],
+    ['green', 120],
+    ['teal', 170],
+    ['cyan', 190],
+    ['blue', 225],
+    ['purple', 285],
+    ['red', 360],
+  ];
+  let best = 'red';
+  let bestD = Infinity;
+  for (const [name, deg] of anchors) {
+    const d = Math.abs(hue - deg);
+    if (d < bestD) {
+      bestD = d;
+      best = name;
+    }
+  }
+  return best;
+}
+
+/**
+ * True iff `token` is an INTENDED-but-invalid color: a hex/`rgb()`/`hsl()`
+ * literal, or a known CSS color name that isn't one of DGMO's 11. Lets the
+ * trailing-token rule flag `Rosé pink` / `Foo #e6194b` while leaving genuine
+ * label words (`Zinfandel`) untouched.
+ */
+export function isInvalidColorToken(token: string): boolean {
+  if (/^(#|rgba?\(|hsla?\()/i.test(token)) return true;
+  const lower = token.toLowerCase();
+  return (
+    INVALID_CSS_COLOR_HEX[lower] !== undefined && !isRecognizedColorName(lower)
+  );
+}
+
+/**
+ * Build an `E_INVALID_COLOR` diagnostic for an intended-but-invalid trailing
+ * color token, or return null if `token` isn't color-like (so it stays label
+ * text). Severity is `warning` so the library degrades gracefully (the value
+ * just keeps the word); the MCP render gate blocks on the code regardless.
+ * Used by `extractColor` to close the trailing-token "silent swallow" gap.
+ */
+export function invalidColorDiagnostic(
+  token: string,
+  line: number
+): DgmoError | null {
+  if (!isInvalidColorToken(token)) return null;
+  const nearest = nearestNamedColor(token);
+  const near = nearest ? ` Nearest: ${nearest}.` : '';
+  return makeDgmoError(
+    line,
+    `Color "${token}" is not a valid DGMO color — DGMO accepts only these 11 named colors: ${RECOGNIZED_COLOR_NAMES.join(', ')} (no hex, no CSS color names).${near}`,
+    'warning',
+    INVALID_COLOR_CODE
+  );
+}
+
 /**
  * Resolves a color name and pushes a warning diagnostic on failure.
  * Returns the hex string for valid names, or `undefined` for unknown
@@ -109,13 +336,31 @@ export function resolveColorWithDiagnostic(
 ): string | undefined {
   const resolved = resolveColor(color, palette);
   if (resolved !== null) return resolved;
+  // Literal color values (hex `#e6194b`, `rgb(...)`, `hsl(...)`) are NOT part
+  // of the DGMO language — only the 11 named palette colors are accepted, so
+  // that a single source recolors correctly across every palette and theme.
+  // Flag these with a precise error rather than a typo suggestion.
+  if (/^(#|rgba?\(|hsla?\()/i.test(color)) {
+    const nearest = nearestNamedColor(color);
+    const near = nearest ? ` Nearest: ${nearest}.` : '';
+    diagnostics.push(
+      makeDgmoError(
+        line,
+        `Color "${color}" is not supported — DGMO does not accept hex or CSS color values. Use a named palette color: ${RECOGNIZED_COLOR_NAMES.join(', ')}.${near}`,
+        'error',
+        INVALID_COLOR_CODE
+      )
+    );
+    return undefined;
+  }
   const hint = suggest(color, RECOGNIZED_COLOR_NAMES as readonly string[]);
   const suggestion = hint ? ` ${hint}` : '';
   diagnostics.push(
     makeDgmoError(
       line,
-      `Unknown color "${color}". Allowed: ${RECOGNIZED_COLOR_NAMES.join(', ')}.${suggestion}`,
-      'warning'
+      `Unknown color "${color}". DGMO accepts only these 11 named colors: ${RECOGNIZED_COLOR_NAMES.join(', ')} (no hex, no CSS color names).${suggestion}`,
+      'warning',
+      INVALID_COLOR_CODE
     )
   );
   return undefined;

package/src/cycle/parser.ts

@@ -3,8 +3,8 @@
 // ============================================================
 
 import {
-  formatDgmoError,
   makeDgmoError,
+  makeFail,
   METADATA_DIAGNOSTIC_CODES,
   pipeOperatorRemovedMessage,
 } from '../diagnostics';
@@ -64,12 +64,7 @@ export function parseCycle(content: string): ParsedCycle {
   let currentEdge: Writable<CycleEdge> | null = null;
   // nodeBaseIndent tracking removed — indent-based nesting not used in cycle
 
-  const fail = (line: number, message: string): ParsedCycle => {
-    const diag = makeDgmoError(line, message);
-    result.diagnostics.push(diag);
-    result.error = formatDgmoError(diag);
-    return result;
-  };
+  const fail = makeFail(result);
 
   const warn = (
     line: number,