@diagrammo/dgmo 0.0.1

package/src/index.ts

@@ -0,0 +1,126 @@
+// ============================================================
+// Router
+// ============================================================
+
+export {
+  parseDgmoChartType,
+  getDgmoFramework,
+  DGMO_CHART_TYPE_MAP,
+} from './dgmo-router';
+export type { DgmoFramework } from './dgmo-router';
+
+// ============================================================
+// Parsers
+// ============================================================
+
+export { parseChartJs } from './chartjs';
+export type {
+  ParsedChartJs,
+  ChartJsChartType,
+  ChartJsDataPoint,
+} from './chartjs';
+
+export { parseEChart } from './echarts';
+export type { ParsedEChart, EChartsChartType } from './echarts';
+
+export {
+  parseD3,
+  orderArcNodes,
+  parseTimelineDate,
+  addDurationToDate,
+  computeTimeTicks,
+  formatDateLabel,
+} from './d3';
+export type { ParsedD3, D3ChartType, ArcLink, ArcNodeGroup } from './d3';
+
+export {
+  parseSequenceDgmo,
+  looksLikeSequence,
+  isSequenceBlock,
+} from './sequence/parser';
+export type {
+  ParsedSequenceDgmo,
+  SequenceParticipant,
+  SequenceMessage,
+  SequenceBlock,
+  SequenceSection,
+  SequenceElement,
+  SequenceGroup,
+  ParticipantType,
+} from './sequence/parser';
+
+export {
+  inferParticipantType,
+  RULE_COUNT,
+} from './sequence/participant-inference';
+
+export { parseQuadrant } from './dgmo-mermaid';
+export type { ParsedQuadrant } from './dgmo-mermaid';
+
+// ============================================================
+// Config Builders (produce framework-specific config objects)
+// ============================================================
+
+export { buildChartJsConfig } from './chartjs';
+export { buildEChartsOption } from './echarts';
+export { buildMermaidQuadrant } from './dgmo-mermaid';
+
+// ============================================================
+// Renderers (produce SVG output)
+// ============================================================
+
+export {
+  renderSlopeChart,
+  renderArcDiagram,
+  renderTimeline,
+  renderWordCloud,
+  renderVenn,
+  renderQuadrant,
+  renderD3ForExport,
+} from './d3';
+
+export {
+  renderSequenceDiagram,
+  buildRenderSequence,
+  computeActivations,
+  applyPositionOverrides,
+  applyGroupOrdering,
+} from './sequence/renderer';
+export type { RenderStep, Activation } from './sequence/renderer';
+
+// ============================================================
+// Colors & Palettes
+// ============================================================
+
+export { resolveColor, colorNames, nord, seriesColors } from './colors';
+
+export {
+  // Registry
+  getPalette,
+  getAvailablePalettes,
+  registerPalette,
+  isValidHex,
+  // Utilities
+  hexToHSL,
+  hslToHex,
+  hexToHSLString,
+  mute,
+  tint,
+  shade,
+  getSeriesColors,
+  contrastText,
+  // Palette definitions
+  nordPalette,
+  solarizedPalette,
+  catppuccinPalette,
+  rosePinePalette,
+  gruvboxPalette,
+  tokyoNightPalette,
+  oneDarkPalette,
+  boldPalette,
+  // Mermaid bridge
+  buildMermaidThemeVars,
+  buildThemeCSS,
+} from './palettes';
+
+export type { PaletteConfig, PaletteColors } from './palettes';

package/src/palettes/bold.ts

@@ -0,0 +1,59 @@
+import type { PaletteConfig } from './types';
+import { registerPalette } from './registry';
+
+// ============================================================
+// Bold Palette Definition
+// ============================================================
+
+export const boldPalette: PaletteConfig = {
+  id: 'bold',
+  name: 'Bold',
+  light: {
+    bg: '#ffffff',
+    surface: '#f0f0f0',
+    overlay: '#f0f0f0',
+    border: '#cccccc',
+    text: '#000000',
+    textMuted: '#666666',
+    primary: '#0000ff',
+    secondary: '#ff00ff',
+    accent: '#00cccc',
+    destructive: '#ff0000',
+    colors: {
+      red: '#ff0000',
+      orange: '#ff8000',
+      yellow: '#ffcc00',
+      green: '#00cc00',
+      blue: '#0000ff',
+      purple: '#cc00cc',
+      teal: '#008080',
+      cyan: '#00cccc',
+      gray: '#808080',
+    },
+  },
+  dark: {
+    bg: '#000000',
+    surface: '#111111',
+    overlay: '#000000',
+    border: '#333333',
+    text: '#ffffff',
+    textMuted: '#aaaaaa',
+    primary: '#00ccff',
+    secondary: '#ff00ff',
+    accent: '#ffff00',
+    destructive: '#ff0000',
+    colors: {
+      red: '#ff0000',
+      orange: '#ff8000',
+      yellow: '#ffff00',
+      green: '#00ff00',
+      blue: '#0066ff',
+      purple: '#ff00ff',
+      teal: '#00cccc',
+      cyan: '#00ffff',
+      gray: '#808080',
+    },
+  },
+};
+
+registerPalette(boldPalette);

package/src/palettes/catppuccin.ts

@@ -0,0 +1,76 @@
+import type { PaletteConfig } from './types';
+import { registerPalette } from './registry';
+
+// ============================================================
+// Catppuccin Palette Definition
+// ============================================================
+
+// Official Catppuccin colors: https://catppuccin.com/palette
+//
+// Latte (light):
+//   Base #eff1f5 | Mantle #e6e9ef | Crust #dce0e8
+//   Surface0 #ccd0da | Text #4c4f69 | Subtext1 #5c5f77 | Overlay0 #9ca0b0
+//
+// Mocha (dark):
+//   Base #1e1e2e | Mantle #181825 | Surface0 #313244
+//   Surface1 #45475a | Overlay0 #6c7086 | Text #cdd6f4 | Subtext1 #bac2de
+//
+// Accents (Latte / Mocha):
+//   Red     #d20f39 / #f38ba8 | Peach   #fe640b / #fab387
+//   Yellow  #df8e1d / #f9e2af | Green   #40a02b / #a6e3a1
+//   Blue    #1e66f5 / #89b4fa | Mauve   #8839ef / #cba6f7
+//   Teal    #179299 / #94e2d5 | Sapphire #209fb5 / #74c7ec
+//   Lavender #7287fd / #b4befe
+
+export const catppuccinPalette: PaletteConfig = {
+  id: 'catppuccin',
+  name: 'Catppuccin',
+  light: {
+    bg: '#eff1f5', // Latte Base
+    surface: '#e6e9ef', // Latte Mantle
+    overlay: '#ccd0da', // Latte Surface0
+    border: '#dce0e8', // Latte Crust
+    text: '#4c4f69', // Latte Text
+    textMuted: '#5c5f77', // Latte Subtext1
+    primary: '#1e66f5', // Latte Blue
+    secondary: '#7287fd', // Latte Lavender
+    accent: '#8839ef', // Latte Mauve
+    destructive: '#d20f39', // Latte Red
+    colors: {
+      red: '#d20f39',
+      orange: '#fe640b',
+      yellow: '#df8e1d',
+      green: '#40a02b',
+      blue: '#1e66f5',
+      purple: '#8839ef',
+      teal: '#179299',
+      cyan: '#209fb5',
+      gray: '#9ca0b0', // Latte Overlay0
+    },
+  },
+  dark: {
+    bg: '#1e1e2e', // Mocha Base
+    surface: '#313244', // Mocha Surface0
+    overlay: '#45475a', // Mocha Surface1
+    border: '#6c7086', // Mocha Overlay0
+    text: '#cdd6f4', // Mocha Text
+    textMuted: '#bac2de', // Mocha Subtext1
+    primary: '#89b4fa', // Mocha Blue
+    secondary: '#b4befe', // Mocha Lavender
+    accent: '#cba6f7', // Mocha Mauve
+    destructive: '#f38ba8', // Mocha Red
+    colors: {
+      red: '#f38ba8',
+      orange: '#fab387',
+      yellow: '#f9e2af',
+      green: '#a6e3a1',
+      blue: '#89b4fa',
+      purple: '#cba6f7',
+      teal: '#94e2d5',
+      cyan: '#74c7ec',
+      gray: '#6c7086', // Mocha Overlay0
+    },
+  },
+};
+
+registerPalette(catppuccinPalette);

package/src/palettes/color-utils.ts

@@ -0,0 +1,191 @@
+import type { PaletteColors } from './types';
+
+// ============================================================
+// HSL Conversion
+// ============================================================
+
+/** Convert hex (#RRGGBB or #RGB) to { h, s, l } with h in degrees, s/l as percentages. */
+export function hexToHSL(hex: string): { h: number; s: number; l: number } {
+  const raw = hex.replace('#', '');
+  const full =
+    raw.length === 3
+      ? raw[0] + raw[0] + raw[1] + raw[1] + raw[2] + raw[2]
+      : raw;
+
+  const r = parseInt(full.substring(0, 2), 16) / 255;
+  const g = parseInt(full.substring(2, 4), 16) / 255;
+  const b = parseInt(full.substring(4, 6), 16) / 255;
+
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const l = (max + min) / 2;
+
+  if (max === min) {
+    return { h: 0, s: 0, l: Math.round(l * 100) };
+  }
+
+  const d = max - min;
+  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+
+  let h: number;
+  if (max === r) {
+    h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+  } else if (max === g) {
+    h = ((b - r) / d + 2) / 6;
+  } else {
+    h = ((r - g) / d + 4) / 6;
+  }
+
+  return {
+    h: Math.round(h * 360),
+    s: Math.round(s * 100),
+    l: Math.round(l * 100),
+  };
+}
+
+/** Convert { h (degrees), s (%), l (%) } back to #RRGGBB hex string. */
+export function hslToHex(h: number, s: number, l: number): string {
+  const sNorm = s / 100;
+  const lNorm = l / 100;
+
+  if (sNorm === 0) {
+    const v = Math.round(lNorm * 255);
+    return `#${v.toString(16).padStart(2, '0')}${v.toString(16).padStart(2, '0')}${v.toString(16).padStart(2, '0')}`;
+  }
+
+  const hue2rgb = (p: number, q: number, t: number): number => {
+    let tNorm = t;
+    if (tNorm < 0) tNorm += 1;
+    if (tNorm > 1) tNorm -= 1;
+    if (tNorm < 1 / 6) return p + (q - p) * 6 * tNorm;
+    if (tNorm < 1 / 2) return q;
+    if (tNorm < 2 / 3) return p + (q - p) * (2 / 3 - tNorm) * 6;
+    return p;
+  };
+
+  const q = lNorm < 0.5 ? lNorm * (1 + sNorm) : lNorm + sNorm - lNorm * sNorm;
+  const p = 2 * lNorm - q;
+  const hNorm = h / 360;
+
+  const r = Math.round(hue2rgb(p, q, hNorm + 1 / 3) * 255);
+  const g = Math.round(hue2rgb(p, q, hNorm) * 255);
+  const b = Math.round(hue2rgb(p, q, hNorm - 1 / 3) * 255);
+
+  return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+}
+
+/** Convert hex to "H S% L%" string for CSS custom properties. */
+export function hexToHSLString(hex: string): string {
+  const { h, s, l } = hexToHSL(hex);
+  return `${h} ${s}% ${l}%`;
+}
+
+// ============================================================
+// Color Manipulation
+// ============================================================
+
+/**
+ * Derive a muted (desaturated, darkened) variant of a color.
+ * Used by the Mermaid theme generator for dark-mode fills.
+ *
+ * Algorithm: cap saturation at 35% and lightness at 36%.
+ */
+export function mute(hex: string): string {
+  const { h, s, l } = hexToHSL(hex);
+  return hslToHex(h, Math.min(s, 35), Math.min(l, 36));
+}
+
+/**
+ * Blend a color toward white (light mode quadrant fills).
+ * amount: 0 = original, 1 = white
+ */
+export function tint(hex: string, amount: number): string {
+  const raw = hex.replace('#', '');
+  const full =
+    raw.length === 3
+      ? raw[0] + raw[0] + raw[1] + raw[1] + raw[2] + raw[2]
+      : raw;
+
+  const r = parseInt(full.substring(0, 2), 16);
+  const g = parseInt(full.substring(2, 4), 16);
+  const b = parseInt(full.substring(4, 6), 16);
+
+  const tr = Math.round(r + (255 - r) * amount);
+  const tg = Math.round(g + (255 - g) * amount);
+  const tb = Math.round(b + (255 - b) * amount);
+
+  return `#${tr.toString(16).padStart(2, '0')}${tg.toString(16).padStart(2, '0')}${tb.toString(16).padStart(2, '0')}`;
+}
+
+/**
+ * Blend a color toward a dark base (dark mode quadrant fills).
+ * amount: 0 = original, 1 = base
+ */
+export function shade(hex: string, base: string, amount: number): string {
+  const parse = (h: string): [number, number, number] => {
+    const raw = h.replace('#', '');
+    const full =
+      raw.length === 3
+        ? raw[0] + raw[0] + raw[1] + raw[1] + raw[2] + raw[2]
+        : raw;
+    return [
+      parseInt(full.substring(0, 2), 16),
+      parseInt(full.substring(2, 4), 16),
+      parseInt(full.substring(4, 6), 16),
+    ];
+  };
+
+  const [r, g, b] = parse(hex);
+  const [br, bg, bb] = parse(base);
+
+  const sr = Math.round(r + (br - r) * amount);
+  const sg = Math.round(g + (bg - g) * amount);
+  const sb = Math.round(b + (bb - b) * amount);
+
+  return `#${sr.toString(16).padStart(2, '0')}${sg.toString(16).padStart(2, '0')}${sb.toString(16).padStart(2, '0')}`;
+}
+
+// ============================================================
+// Contrast / Accessibility
+// ============================================================
+
+/** WCAG 2.1 relative luminance (0 = black, 1 = white). */
+export function relativeLuminance(hex: string): number {
+  const raw = hex.replace('#', '');
+  const full =
+    raw.length === 3
+      ? raw[0] + raw[0] + raw[1] + raw[1] + raw[2] + raw[2]
+      : raw;
+
+  const srgb = [
+    parseInt(full.substring(0, 2), 16) / 255,
+    parseInt(full.substring(2, 4), 16) / 255,
+    parseInt(full.substring(4, 6), 16) / 255,
+  ].map((c) => (c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4));
+
+  return 0.2126 * srgb[0] + 0.7152 * srgb[1] + 0.0722 * srgb[2];
+}
+
+/**
+ * Pick a text color that contrasts against `bg`.
+ * Returns `darkText` when background is light (luminance > 0.179),
+ * `lightText` when background is dark.
+ * Threshold 0.179 is the standard WCAG midpoint for the contrast flip.
+ */
+export function contrastText(
+  bg: string,
+  lightText: string,
+  darkText: string
+): string {
+  return relativeLuminance(bg) > 0.179 ? darkText : lightText;
+}
+
+// ============================================================
+// Series Colors
+// ============================================================
+
+/** Derive the 8-color series rotation from a palette's named colors. */
+export function getSeriesColors(palette: PaletteColors): string[] {
+  const c = palette.colors;
+  return [c.blue, c.green, c.yellow, c.orange, c.purple, c.red, c.teal, c.cyan];
+}

package/src/palettes/gruvbox.ts

@@ -0,0 +1,77 @@
+import type { PaletteConfig } from './types';
+import { registerPalette } from './registry';
+
+// ============================================================
+// Gruvbox Palette Definition
+// ============================================================
+
+// Official Gruvbox colors: https://github.com/morhetz/gruvbox
+//
+// Neutrals:
+//   dark0 #282828 | dark1 #3c3836 | dark2 #504945 | dark3 #665c54
+//   light0 #fbf1c7 | light1 #ebdbb2 | light2 #d5c4a1 | light3 #bdae93
+//   gray #928374
+//
+// Accents (bright / neutral / faded):
+//   Red     #fb4934 / #cc241d / #9d0006
+//   Green   #b8bb26 / #98971a / #79740e
+//   Yellow  #fabd2f / #d79921 / #b57614
+//   Blue    #83a598 / #458588 / #076678
+//   Purple  #d3869b / #b16286 / #8f3f71
+//   Aqua    #8ec07c / #689d6a / #427b58
+//   Orange  #fe8019 / #d65d0e / #af3a03
+//
+// Light mode uses faded accents, dark mode uses bright accents.
+
+export const gruvboxPalette: PaletteConfig = {
+  id: 'gruvbox',
+  name: 'Gruvbox',
+  light: {
+    bg: '#fbf1c7', // light0
+    surface: '#ebdbb2', // light1
+    overlay: '#d5c4a1', // light2
+    border: '#bdae93', // light3
+    text: '#3c3836', // dark1
+    textMuted: '#7c6f64', // dark4
+    primary: '#076678', // faded blue
+    secondary: '#427b58', // faded aqua
+    accent: '#8f3f71', // faded purple
+    destructive: '#9d0006', // faded red
+    colors: {
+      red: '#9d0006', // faded
+      orange: '#af3a03', // faded
+      yellow: '#b57614', // faded
+      green: '#79740e', // faded
+      blue: '#076678', // faded
+      purple: '#8f3f71', // faded
+      teal: '#427b58', // faded aqua
+      cyan: '#427b58', // faded aqua
+      gray: '#928374',
+    },
+  },
+  dark: {
+    bg: '#282828', // dark0
+    surface: '#3c3836', // dark1
+    overlay: '#504945', // dark2
+    border: '#665c54', // dark3
+    text: '#ebdbb2', // light1
+    textMuted: '#a89984', // light4
+    primary: '#83a598', // bright blue
+    secondary: '#8ec07c', // bright aqua
+    accent: '#d3869b', // bright purple
+    destructive: '#fb4934', // bright red
+    colors: {
+      red: '#fb4934', // bright
+      orange: '#fe8019', // bright
+      yellow: '#fabd2f', // bright
+      green: '#b8bb26', // bright
+      blue: '#83a598', // bright
+      purple: '#d3869b', // bright
+      teal: '#8ec07c', // bright aqua
+      cyan: '#8ec07c', // bright aqua
+      gray: '#928374',
+    },
+  },
+};
+
+registerPalette(gruvboxPalette);

package/src/palettes/index.ts

@@ -0,0 +1,35 @@
+// Re-export types
+export type { PaletteConfig, PaletteColors } from './types';
+
+// Re-export registry
+export {
+  getPalette,
+  getAvailablePalettes,
+  registerPalette,
+  isValidHex,
+} from './registry';
+
+// Re-export utilities
+export {
+  hexToHSL,
+  hslToHex,
+  hexToHSLString,
+  mute,
+  tint,
+  shade,
+  getSeriesColors,
+  contrastText,
+} from './color-utils';
+
+// Re-export palette definitions
+export { nordPalette } from './nord';
+export { solarizedPalette } from './solarized';
+export { catppuccinPalette } from './catppuccin';
+export { rosePinePalette } from './rose-pine';
+export { gruvboxPalette } from './gruvbox';
+export { tokyoNightPalette } from './tokyo-night';
+export { oneDarkPalette } from './one-dark';
+export { boldPalette } from './bold';
+
+// Re-export Mermaid bridge
+export { buildMermaidThemeVars, buildThemeCSS } from './mermaid-bridge';