@diagrammo/dgmo 0.0.1

package/src/palettes/mermaid-bridge.ts

@@ -0,0 +1,220 @@
+import type { PaletteColors } from './types';
+import { mute, tint, shade, contrastText } from './color-utils';
+
+// ============================================================
+// Mermaid Theme Variable Generator
+// ============================================================
+
+/**
+ * Generates ~121 Mermaid theme variables from palette tokens.
+ * Replaces the hardcoded lightThemeVars/darkThemeVars objects.
+ *
+ * Dark mode fills use `mute()` to derive desaturated variants
+ * that are readable with light text.
+ */
+export function buildMermaidThemeVars(
+  colors: PaletteColors,
+  isDark: boolean
+): Record<string, string> {
+  const c = colors.colors;
+
+  // Ordered accent array for pie/cScale/fillType/actor slots
+  const accentOrder = [
+    c.blue,
+    c.red,
+    c.green,
+    c.yellow,
+    c.purple,
+    c.orange,
+    c.teal,
+    c.cyan,
+    colors.secondary,
+  ];
+
+  // Dark mode fills use muted variants for readability
+  const fills = isDark ? accentOrder.map(mute) : accentOrder;
+
+  return {
+    // ── Backgrounds ──
+    background: isDark ? colors.overlay : colors.border,
+    mainBkg: colors.surface,
+
+    // ── Primary/Secondary/Tertiary nodes ──
+    primaryColor: isDark ? colors.primary : colors.surface,
+    primaryTextColor: colors.text,
+    primaryBorderColor: isDark ? colors.secondary : colors.border,
+    secondaryColor: colors.secondary,
+    secondaryTextColor: contrastText(colors.secondary, colors.text, colors.bg),
+    secondaryBorderColor: colors.primary,
+    tertiaryColor: colors.accent,
+    tertiaryTextColor: contrastText(colors.accent, colors.text, colors.bg),
+    tertiaryBorderColor: colors.border,
+
+    // ── Lines & text ──
+    lineColor: colors.textMuted,
+    textColor: colors.text,
+
+    // ── Clusters ──
+    clusterBkg: colors.bg,
+    clusterBorder: isDark ? colors.border : colors.textMuted,
+    titleColor: colors.text,
+
+    // ── Labels ──
+    edgeLabelBackground: 'transparent',
+
+    // ── Notes (sequence diagrams) ──
+    noteBkgColor: colors.bg,
+    noteTextColor: colors.text,
+    noteBorderColor: isDark ? colors.border : colors.textMuted,
+
+    // ── Actors (sequence diagrams) ──
+    actorBkg: colors.surface,
+    actorTextColor: colors.text,
+    actorBorder: isDark ? colors.border : colors.textMuted,
+    actorLineColor: colors.textMuted,
+
+    // ── Signals (sequence diagrams) ──
+    signalColor: colors.textMuted,
+    signalTextColor: colors.text,
+
+    // ── Labels ──
+    labelColor: colors.text,
+    labelTextColor: colors.text,
+    labelBoxBkgColor: colors.surface,
+    labelBoxBorderColor: isDark ? colors.border : colors.textMuted,
+
+    // ── Loop boxes ──
+    loopTextColor: colors.text,
+
+    // ── Activation (sequence diagrams) ──
+    activationBkgColor: isDark ? colors.overlay : colors.border,
+    activationBorderColor: isDark ? colors.border : colors.textMuted,
+
+    // ── Sequence numbers ──
+    sequenceNumberColor: isDark ? colors.text : colors.bg,
+
+    // ── State diagrams ──
+    labelBackgroundColor: colors.surface,
+
+    // ── Pie chart (9 slices) ──
+    // Dark mode: use muted fills so light pieSectionTextColor stays readable
+    ...Object.fromEntries(
+      (isDark ? fills : accentOrder).map((col, i) => [`pie${i + 1}`, col])
+    ),
+    pieTitleTextColor: colors.text,
+    pieSectionTextColor: isDark ? colors.text : colors.bg,
+    pieLegendTextColor: colors.text,
+    pieStrokeColor: 'transparent',
+    pieOuterStrokeWidth: '0px',
+    pieOuterStrokeColor: 'transparent',
+
+    // ── cScale (9 tiers) — muted in dark mode ──
+    ...Object.fromEntries(fills.map((f, i) => [`cScale${i}`, f])),
+    ...Object.fromEntries(
+      fills.map((_, i) => [
+        `cScaleLabel${i}`,
+        isDark ? colors.text : i < 2 || i > 6 ? colors.bg : colors.text,
+      ])
+    ),
+
+    // ── fillType (8 slots) ──
+    ...Object.fromEntries(
+      [0, 1, 2, 3, 4, 5, 6, 7].map((i) => [
+        `fillType${i}`,
+        fills[i % fills.length],
+      ])
+    ),
+
+    // ── Journey actors (6 slots) ──
+    ...Object.fromEntries(
+      [c.red, c.green, c.yellow, c.purple, c.orange, c.teal].map((color, i) => [
+        `actor${i}`,
+        color,
+      ])
+    ),
+
+    // ── Flowchart ──
+    nodeBorder: isDark ? colors.border : colors.textMuted,
+    nodeTextColor: colors.text,
+
+    // ── Gantt ──
+    gridColor: isDark ? colors.textMuted : colors.border,
+    doneTaskBkgColor: c.green,
+    doneTaskBorderColor: isDark ? colors.border : colors.textMuted,
+    activeTaskBkgColor: colors.secondary,
+    activeTaskBorderColor: colors.primary,
+    critBkgColor: c.orange,
+    critBorderColor: c.red,
+    taskBkgColor: colors.surface,
+    taskBorderColor: isDark ? colors.border : colors.textMuted,
+    taskTextColor: contrastText(colors.surface, colors.text, colors.bg),
+    taskTextDarkColor: colors.bg,
+    taskTextLightColor: colors.text,
+    taskTextOutsideColor: colors.text,
+    doneTaskTextColor: contrastText(c.green, colors.text, colors.bg),
+    activeTaskTextColor: contrastText(colors.secondary, colors.text, colors.bg),
+    critTaskTextColor: contrastText(c.orange, colors.text, colors.bg),
+    sectionBkgColor: isDark
+      ? shade(colors.primary, colors.bg, 0.6)
+      : tint(colors.primary, 0.6),
+    altSectionBkgColor: colors.bg,
+    sectionBkgColor2: isDark
+      ? shade(colors.primary, colors.bg, 0.6)
+      : tint(colors.primary, 0.6),
+    todayLineColor: c.yellow,
+
+    // ── Quadrant ──
+    quadrant1Fill: isDark
+      ? shade(c.green, colors.bg, 0.75)
+      : tint(c.green, 0.75),
+    quadrant2Fill: isDark ? shade(c.blue, colors.bg, 0.75) : tint(c.blue, 0.75),
+    quadrant3Fill: isDark ? shade(c.red, colors.bg, 0.75) : tint(c.red, 0.75),
+    quadrant4Fill: isDark
+      ? shade(c.yellow, colors.bg, 0.75)
+      : tint(c.yellow, 0.75),
+    quadrant1TextFill: colors.text,
+    quadrant2TextFill: colors.text,
+    quadrant3TextFill: colors.text,
+    quadrant4TextFill: colors.text,
+    quadrantPointFill: isDark ? c.cyan : c.blue,
+    quadrantPointTextFill: colors.text,
+    quadrantXAxisTextFill: colors.text,
+    quadrantYAxisTextFill: colors.text,
+    quadrantTitleFill: colors.text,
+    quadrantInternalBorderStrokeFill: colors.border,
+    quadrantExternalBorderStrokeFill: colors.border,
+  };
+}
+
+// ============================================================
+// Mermaid Theme CSS Generator
+// ============================================================
+
+/**
+ * Generates custom CSS overrides for Mermaid SVGs.
+ * Handles git graph label backgrounds and dark-mode text readability.
+ */
+export function buildThemeCSS(palette: PaletteColors, isDark: boolean): string {
+  const base = `
+  .branchLabelBkg { fill: transparent !important; stroke: transparent !important; }
+  .commit-label-bkg { fill: transparent !important; stroke: transparent !important; }
+  .tag-label-bkg { fill: transparent !important; stroke: transparent !important; }
+
+  /* GitGraph: ensure commit and branch label text matches palette */
+  .commit-label { fill: ${palette.text} !important; }
+  .branch-label { fill: ${palette.text} !important; }
+  .tag-label { fill: ${palette.text} !important; }
+`;
+
+  if (!isDark) return base;
+
+  return (
+    base +
+    `
+  /* Flowchart: ensure node and edge label text is readable */
+  .nodeLabel, .label { color: ${palette.text} !important; fill: ${palette.text} !important; }
+  .edgeLabel { color: ${palette.text} !important; fill: ${palette.text} !important; }
+  .edgeLabel .label { color: ${palette.text} !important; fill: ${palette.text} !important; }
+`
+  );
+}

package/src/palettes/nord.ts

@@ -0,0 +1,59 @@
+import type { PaletteConfig } from './types';
+import { registerPalette } from './registry';
+
+// ============================================================
+// Nord Palette Definition
+// ============================================================
+
+export const nordPalette: PaletteConfig = {
+  id: 'nord',
+  name: 'Nord',
+  light: {
+    bg: '#eceff4', // nord6
+    surface: '#e5e9f0', // nord5
+    overlay: '#d8dee9', // nord4 (muted/secondary backgrounds)
+    border: '#d8dee9', // nord4
+    text: '#2e3440', // nord0
+    textMuted: '#4c566a', // nord3
+    primary: '#5e81ac', // nord10
+    secondary: '#81a1c1', // nord9
+    accent: '#81a1c1', // nord9
+    destructive: '#bf616a', // nord11
+    colors: {
+      red: '#bf616a', // nord11
+      orange: '#d08770', // nord12
+      yellow: '#ebcb8b', // nord13
+      green: '#a3be8c', // nord14
+      blue: '#5e81ac', // nord10
+      purple: '#b48ead', // nord15
+      teal: '#8fbcbb', // nord7
+      cyan: '#88c0d0', // nord8
+      gray: '#4c566a', // nord3
+    },
+  },
+  dark: {
+    bg: '#2e3440', // nord0
+    surface: '#3b4252', // nord1
+    overlay: '#434c5e', // nord2
+    border: '#4c566a', // nord3
+    text: '#eceff4', // nord6
+    textMuted: '#d8dee9', // nord4
+    primary: '#88c0d0', // nord8 (different from light's nord10)
+    secondary: '#81a1c1', // nord9
+    accent: '#81a1c1', // nord9
+    destructive: '#bf616a', // nord11
+    colors: {
+      red: '#bf616a', // nord11
+      orange: '#d08770', // nord12
+      yellow: '#ebcb8b', // nord13
+      green: '#a3be8c', // nord14
+      blue: '#5e81ac', // nord10
+      purple: '#b48ead', // nord15
+      teal: '#8fbcbb', // nord7
+      cyan: '#88c0d0', // nord8
+      gray: '#4c566a', // nord3
+    },
+  },
+};
+
+registerPalette(nordPalette);

package/src/palettes/one-dark.ts

@@ -0,0 +1,62 @@
+import type { PaletteConfig } from './types';
+import { registerPalette } from './registry';
+
+// ============================================================
+// One Dark Palette Definition
+// Based on Atom's One Dark theme
+// ============================================================
+
+export const oneDarkPalette: PaletteConfig = {
+  id: 'one-dark',
+  name: 'One Dark',
+  light: {
+    // One Light variant (Atom's light counterpart)
+    bg: '#fafafa',
+    surface: '#f0f0f0',
+    overlay: '#e5e5e5',
+    border: '#d0d0d0',
+    text: '#383a42',
+    textMuted: '#696c77',
+    primary: '#4078f2',
+    secondary: '#a626a4',
+    accent: '#0184bc',
+    destructive: '#e45649',
+    colors: {
+      red: '#e45649',
+      orange: '#c18401',
+      yellow: '#c18401',
+      green: '#50a14f',
+      blue: '#4078f2',
+      purple: '#a626a4',
+      teal: '#0184bc',
+      cyan: '#0997b3',
+      gray: '#696c77',
+    },
+  },
+  dark: {
+    // One Dark (Atom's dark theme)
+    bg: '#282c34',
+    surface: '#21252b',
+    overlay: '#2c313a',
+    border: '#3e4451',
+    text: '#abb2bf',
+    textMuted: '#5c6370',
+    primary: '#61afef',
+    secondary: '#c678dd',
+    accent: '#56b6c2',
+    destructive: '#e06c75',
+    colors: {
+      red: '#e06c75',
+      orange: '#d19a66',
+      yellow: '#e5c07b',
+      green: '#98c379',
+      blue: '#61afef',
+      purple: '#c678dd',
+      teal: '#56b6c2',
+      cyan: '#56b6c2',
+      gray: '#5c6370',
+    },
+  },
+};
+
+registerPalette(oneDarkPalette);

package/src/palettes/registry.ts

@@ -0,0 +1,92 @@
+import type { PaletteConfig, PaletteColors } from './types';
+
+// ============================================================
+// Constants
+// ============================================================
+
+const PALETTE_REGISTRY = new Map<string, PaletteConfig>();
+const DEFAULT_PALETTE_ID = 'nord';
+
+// ============================================================
+// Validation
+// ============================================================
+
+/** Validate that a hex string is well-formed (#RGB or #RRGGBB). */
+export function isValidHex(value: string): boolean {
+  return /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(value);
+}
+
+/** Named color keys that must be present in PaletteColors.colors. */
+const COLOR_KEYS: (keyof PaletteColors['colors'])[] = [
+  'red',
+  'orange',
+  'yellow',
+  'green',
+  'blue',
+  'purple',
+  'teal',
+  'cyan',
+  'gray',
+];
+
+/** Semantic color keys that must be present at the top level of PaletteColors. */
+const SEMANTIC_KEYS: (keyof Omit<PaletteColors, 'colors'>)[] = [
+  'bg',
+  'surface',
+  'overlay',
+  'border',
+  'text',
+  'textMuted',
+  'primary',
+  'secondary',
+  'accent',
+  'destructive',
+];
+
+function validatePaletteColors(
+  colors: PaletteColors,
+  mode: string,
+  paletteId: string
+): void {
+  for (const key of SEMANTIC_KEYS) {
+    const value = colors[key];
+    if (typeof value !== 'string' || !isValidHex(value)) {
+      throw new Error(
+        `Palette "${paletteId}" ${mode}.${key}: invalid hex "${value}"`
+      );
+    }
+  }
+  for (const key of COLOR_KEYS) {
+    const value = colors.colors[key];
+    if (typeof value !== 'string' || !isValidHex(value)) {
+      throw new Error(
+        `Palette "${paletteId}" ${mode}.colors.${key}: invalid hex "${value}"`
+      );
+    }
+  }
+}
+
+// ============================================================
+// Registry Functions
+// ============================================================
+
+/**
+ * Register a palette. Called at module initialization.
+ * Validates that all 19 color fields per mode are present and valid hex.
+ * Throws on malformed palettes to catch errors at startup, not at render time.
+ */
+export function registerPalette(palette: PaletteConfig): void {
+  validatePaletteColors(palette.light, 'light', palette.id);
+  validatePaletteColors(palette.dark, 'dark', palette.id);
+  PALETTE_REGISTRY.set(palette.id, palette);
+}
+
+/** Get palette by id. Returns Nord if id is unrecognized (FR10). */
+export function getPalette(id: string): PaletteConfig {
+  return PALETTE_REGISTRY.get(id) ?? PALETTE_REGISTRY.get(DEFAULT_PALETTE_ID)!;
+}
+
+/** List all registered palettes (for the selector UI). */
+export function getAvailablePalettes(): PaletteConfig[] {
+  return Array.from(PALETTE_REGISTRY.values());
+}

package/src/palettes/rose-pine.ts

@@ -0,0 +1,76 @@
+import type { PaletteConfig } from './types';
+import { registerPalette } from './registry';
+
+// ============================================================
+// Rosé Pine Palette Definition
+// ============================================================
+
+// Official Rosé Pine colors: https://rosepinetheme.com/palette
+//
+// Dawn (light):
+//   Base #faf4ed | Surface #fffaf3 | Overlay #f2e9e1
+//   Muted #9893a5 | Subtle #797593 | Text #575279
+//   Highlight Med #dfdad9
+//
+// Moon (dark):
+//   Base #232136 | Surface #2a273f | Overlay #393552
+//   Muted #6e6a86 | Subtle #908caa | Text #e0def4
+//   Highlight Med #44415a
+//
+// Accents (Dawn / Moon):
+//   Love   #b4637a / #eb6f92 | Gold   #ea9d34 / #f6c177
+//   Rose   #d7827e / #ea9a97 | Pine   #286983 / #3e8fb0
+//   Foam   #56949f / #9ccfd8 | Iris   #907aa9 / #c4a7e7
+
+export const rosePinePalette: PaletteConfig = {
+  id: 'rose-pine',
+  name: 'Rosé Pine',
+  light: {
+    bg: '#faf4ed', // Dawn Base
+    surface: '#fffaf3', // Dawn Surface
+    overlay: '#f2e9e1', // Dawn Overlay
+    border: '#dfdad9', // Dawn Highlight Med
+    text: '#575279', // Dawn Text
+    textMuted: '#9893a5', // Dawn Muted
+    primary: '#286983', // Dawn Pine
+    secondary: '#56949f', // Dawn Foam
+    accent: '#907aa9', // Dawn Iris
+    destructive: '#b4637a', // Dawn Love
+    colors: {
+      red: '#b4637a', // Love
+      orange: '#d7827e', // Rose
+      yellow: '#ea9d34', // Gold
+      green: '#286983', // Pine
+      blue: '#56949f', // Foam
+      purple: '#907aa9', // Iris
+      teal: '#286983', // Pine
+      cyan: '#56949f', // Foam
+      gray: '#9893a5', // Muted
+    },
+  },
+  dark: {
+    bg: '#232136', // Moon Base
+    surface: '#2a273f', // Moon Surface
+    overlay: '#393552', // Moon Overlay
+    border: '#44415a', // Moon Highlight Med
+    text: '#e0def4', // Moon Text
+    textMuted: '#908caa', // Moon Subtle
+    primary: '#3e8fb0', // Moon Pine
+    secondary: '#9ccfd8', // Moon Foam
+    accent: '#c4a7e7', // Moon Iris
+    destructive: '#eb6f92', // Moon Love
+    colors: {
+      red: '#eb6f92', // Love
+      orange: '#ea9a97', // Rose
+      yellow: '#f6c177', // Gold
+      green: '#3e8fb0', // Pine
+      blue: '#9ccfd8', // Foam
+      purple: '#c4a7e7', // Iris
+      teal: '#3e8fb0', // Pine
+      cyan: '#9ccfd8', // Foam
+      gray: '#6e6a86', // Muted
+    },
+  },
+};
+
+registerPalette(rosePinePalette);

package/src/palettes/solarized.ts

@@ -0,0 +1,69 @@
+import type { PaletteConfig } from './types';
+import { registerPalette } from './registry';
+
+// ============================================================
+// Solarized Palette Definition
+// ============================================================
+
+// Official Solarized colors: https://ethanschoonover.com/solarized/
+//
+// Base tones:
+//   base03 #002b36 | base02 #073642 | base01 #586e75 | base00 #657b83
+//   base0  #839496 | base1  #93a1a1 | base2  #eee8d5 | base3  #fdf6e3
+//
+// Accent colors:
+//   yellow #b58900 | orange #cb4b16 | red    #dc322f | magenta #d33682
+//   violet #6c71c4 | blue   #268bd2 | cyan   #2aa198 | green   #859900
+
+export const solarizedPalette: PaletteConfig = {
+  id: 'solarized',
+  name: 'Solarized',
+  light: {
+    bg: '#fdf6e3', // base3
+    surface: '#eee8d5', // base2
+    overlay: '#eee8d5', // base2 (muted/secondary backgrounds)
+    border: '#93a1a1', // base1
+    text: '#657b83', // base00
+    textMuted: '#93a1a1', // base1
+    primary: '#268bd2', // blue
+    secondary: '#2aa198', // cyan
+    accent: '#6c71c4', // violet
+    destructive: '#dc322f', // red
+    colors: {
+      red: '#dc322f',
+      orange: '#cb4b16',
+      yellow: '#b58900',
+      green: '#859900',
+      blue: '#268bd2',
+      purple: '#6c71c4',
+      teal: '#2aa198',
+      cyan: '#2aa198', // Solarized has no separate cyan — reuse teal
+      gray: '#586e75', // base01
+    },
+  },
+  dark: {
+    bg: '#002b36', // base03
+    surface: '#073642', // base02
+    overlay: '#073642', // base02 (muted/secondary backgrounds)
+    border: '#586e75', // base01
+    text: '#839496', // base0
+    textMuted: '#586e75', // base01
+    primary: '#268bd2', // blue
+    secondary: '#2aa198', // cyan
+    accent: '#6c71c4', // violet
+    destructive: '#dc322f', // red
+    colors: {
+      red: '#dc322f',
+      orange: '#cb4b16',
+      yellow: '#b58900',
+      green: '#859900',
+      blue: '#268bd2',
+      purple: '#6c71c4',
+      teal: '#2aa198',
+      cyan: '#2aa198',
+      gray: '#586e75', // base01
+    },
+  },
+};
+
+registerPalette(solarizedPalette);

package/src/palettes/tokyo-night.ts

@@ -0,0 +1,78 @@
+import type { PaletteConfig } from './types';
+import { registerPalette } from './registry';
+
+// ============================================================
+// Tokyo Night Palette Definition
+// ============================================================
+
+// Official Tokyo Night colors: https://github.com/folke/tokyonight.nvim
+//
+// Night (dark):
+//   bg #1a1b26 | bg_highlight #292e42 | terminal_black #414868
+//   fg_gutter #3b4261 | fg #c0caf5 | fg_dark #a9b1d6
+//   comment #565f89
+//
+// Day (light):
+//   bg #e1e2e7 | bg_float #d0d5e3 | bg_highlight #c4c8da
+//   fg_gutter #a8aecb | fg #3760bf | fg_dark #6172b0
+//   dark3 #8990b3
+//
+// Accents (Day / Night):
+//   Red     #f52a65 / #f7768e | Orange  #b15c00 / #ff9e64
+//   Yellow  #8c6c3e / #e0af68 | Green   #587539 / #9ece6a
+//   Blue    #2e7de9 / #7aa2f7 | Purple  #7847bd / #bb9af7
+//   Teal    #118c74 / #1abc9c | Cyan    #007197 / #7dcfff
+//   Magenta #9854f1 / #bb9af7
+
+export const tokyoNightPalette: PaletteConfig = {
+  id: 'tokyo-night',
+  name: 'Tokyo Night',
+  light: {
+    bg: '#e1e2e7', // Day bg
+    surface: '#d0d5e3', // Day bg_float
+    overlay: '#c4c8da', // Day bg_highlight
+    border: '#a8aecb', // Day fg_gutter
+    text: '#3760bf', // Day fg
+    textMuted: '#6172b0', // Day fg_dark
+    primary: '#2e7de9', // Day blue
+    secondary: '#007197', // Day cyan
+    accent: '#9854f1', // Day magenta
+    destructive: '#f52a65', // Day red
+    colors: {
+      red: '#f52a65',
+      orange: '#b15c00',
+      yellow: '#8c6c3e',
+      green: '#587539',
+      blue: '#2e7de9',
+      purple: '#7847bd',
+      teal: '#118c74',
+      cyan: '#007197',
+      gray: '#8990b3', // Day dark3
+    },
+  },
+  dark: {
+    bg: '#1a1b26', // Night bg
+    surface: '#292e42', // Night bg_highlight
+    overlay: '#414868', // Night terminal_black
+    border: '#3b4261', // Night fg_gutter
+    text: '#c0caf5', // Night fg
+    textMuted: '#a9b1d6', // Night fg_dark
+    primary: '#7aa2f7', // Night blue
+    secondary: '#7dcfff', // Night cyan
+    accent: '#bb9af7', // Night magenta
+    destructive: '#f7768e', // Night red
+    colors: {
+      red: '#f7768e',
+      orange: '#ff9e64',
+      yellow: '#e0af68',
+      green: '#9ece6a',
+      blue: '#7aa2f7',
+      purple: '#bb9af7',
+      teal: '#1abc9c',
+      cyan: '#7dcfff',
+      gray: '#565f89', // Night comment
+    },
+  },
+};
+
+registerPalette(tokyoNightPalette);