@diagrammo/dgmo 0.6.3 → 0.7.0

package/src/initiative-status/renderer.ts

@@ -6,7 +6,21 @@ import * as d3Selection from 'd3-selection';
 import * as d3Shape from 'd3-shape';
 import { FONT_FAMILY } from '../fonts';
 import { runInExportContainer, extractExportSvg } from '../utils/export-container';
+import {
+  LEGEND_HEIGHT,
+  LEGEND_PILL_PAD,
+  LEGEND_PILL_FONT_SIZE,
+  LEGEND_PILL_FONT_W,
+  LEGEND_CAPSULE_PAD,
+  LEGEND_DOT_R,
+  LEGEND_ENTRY_FONT_SIZE,
+  LEGEND_ENTRY_FONT_W,
+  LEGEND_ENTRY_DOT_GAP,
+  LEGEND_ENTRY_TRAIL,
+  LEGEND_GROUP_GAP,
+} from '../utils/legend-constants';
 import { contrastText, mix } from '../palettes/color-utils';
+import type { TagGroup } from '../utils/tag-groups';
 import type { PaletteColors } from '../palettes';
 import type { ParsedInitiativeStatus, InitiativeStatus } from './types';
 import type { ParticipantType } from '../sequence/parser';
@@ -67,6 +81,44 @@ function edgeStrokeColor(status: InitiativeStatus, palette: PaletteColors, isDar
   return statusColor(status, palette, isDark);
 }
 
+// ============================================================
+// Legend helpers
+// ============================================================
+
+interface ISLegendEntry {
+  label: string;
+  statusKey: InitiativeStatus;
+}
+
+const IS_STATUS_LABELS: Record<string, string> = {
+  done: 'Done',
+  wip:  'In Progress',
+  todo: 'To Do',
+  na:   'N/A',
+};
+
+const IS_STATUS_ORDER: InitiativeStatus[] = ['todo', 'wip', 'done', 'na'];
+
+function collectStatuses(parsed: ParsedInitiativeStatus): ISLegendEntry[] {
+  const present = new Set<string>();
+  for (const n of parsed.nodes) {
+    if (n.status) present.add(n.status);
+  }
+  return IS_STATUS_ORDER
+    .filter((s) => s !== null && present.has(s))
+    .map((s) => ({ label: IS_STATUS_LABELS[s!], statusKey: s }));
+}
+
+const LEGEND_GROUP_NAME = 'Status';
+
+function legendEntriesWidth(entries: ISLegendEntry[]): number {
+  let w = 0;
+  for (const e of entries) {
+    w += LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP + e.label.length * LEGEND_ENTRY_FONT_W + LEGEND_ENTRY_TRAIL;
+  }
+  return w;
+}
+
 // ============================================================
 // Edge path generator
 // ============================================================
@@ -410,15 +462,31 @@ function renderNodeShape(
 // Main renderer
 // ============================================================
 
+export interface ISRenderOptions {
+  onClickItem?: (lineNumber: number) => void;
+  exportDims?: { width?: number; height?: number };
+  legendActive?: boolean | null;
+  activeTagGroup?: string | null;
+  hiddenTagValues?: Map<string, Set<string>>;
+  tagGroups?: TagGroup[];
+}
+
 export function renderInitiativeStatus(
   container: HTMLDivElement,
   parsed: ParsedInitiativeStatus,
   layout: ISLayoutResult,
   palette: PaletteColors,
   isDark: boolean,
-  onClickItem?: (lineNumber: number) => void,
-  exportDims?: { width?: number; height?: number }
+  options?: ISRenderOptions
 ): void {
+  const {
+    onClickItem,
+    exportDims,
+    legendActive,
+    activeTagGroup,
+    hiddenTagValues,
+    tagGroups,
+  } = options ?? {};
   // Clear existing content
   d3Selection.select(container).selectAll(':not([data-d3-tooltip])').remove();
 
@@ -426,19 +494,28 @@ export function renderInitiativeStatus(
   const height = exportDims?.height ?? container.clientHeight;
   if (width <= 0 || height <= 0) return;
 
+  const legendEntries = collectStatuses(parsed);
+  const hasLegend = legendEntries.length > 1;
+  const isLegendExpanded = legendActive !== false;
+
+  const effectiveTagGroups = tagGroups ?? parsed.tagGroups ?? [];
+  const hasTagGroups = effectiveTagGroups.length > 0;
+
   const titleHeight = parsed.title ? 40 : 0;
+  const LEGEND_FIXED_GAP = 8;
+  const legendReserve = (hasLegend || hasTagGroups) ? LEGEND_HEIGHT + LEGEND_FIXED_GAP : 0;
 
   // Scale to fit
   const diagramW = layout.width;
   const diagramH = layout.height;
-  const availH = height - titleHeight;
+  const availH = height - titleHeight - legendReserve;
   const scaleX = (width - DIAGRAM_PADDING * 2) / diagramW;
   const scaleY = (availH - DIAGRAM_PADDING * 2) / diagramH;
   const scale = Math.min(MAX_SCALE, scaleX, scaleY);
 
   const scaledW = diagramW * scale;
   const offsetX = (width - scaledW) / 2;
-  const offsetY = titleHeight + DIAGRAM_PADDING;
+  const offsetY = titleHeight + legendReserve + DIAGRAM_PADDING;
 
   // Create SVG
   const svg = d3Selection
@@ -498,6 +575,201 @@ export function renderInitiativeStatus(
     }
   }
 
+  // ── Legend ──
+  if (hasLegend || hasTagGroups) {
+    const groupBg = isDark
+      ? mix(palette.surface, palette.bg, 50)
+      : mix(palette.surface, palette.bg, 30);
+
+    // Build legend groups: Status + tag groups
+    interface LegendGroup {
+      name: string;
+      key: string; // lowercase key for data attribute
+      isStatus: boolean;
+      entries: { label: string; color: string; value: string }[];
+      width: number; // total width when expanded
+    }
+
+    const legendGroups: LegendGroup[] = [];
+
+    // Status group (always first if entries exist)
+    if (hasLegend) {
+      const statusEntries = legendEntries.map((e) => ({
+        label: e.label,
+        color: statusColor(e.statusKey, palette, isDark),
+        value: e.statusKey ?? 'na',
+      }));
+      const pillW = LEGEND_GROUP_NAME.length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD;
+      const entrW = legendEntriesWidth(legendEntries);
+      legendGroups.push({
+        name: LEGEND_GROUP_NAME,
+        key: 'status',
+        isStatus: true,
+        entries: statusEntries,
+        width: LEGEND_CAPSULE_PAD * 2 + pillW + LEGEND_ENTRY_TRAIL + entrW,
+      });
+    }
+
+    // Tag groups
+    for (const tg of effectiveTagGroups) {
+      const entries = tg.entries.map((e) => ({
+        label: e.value,
+        color: e.color || palette.textMuted,
+        value: e.value.toLowerCase(),
+      }));
+      const pillW = tg.name.length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD;
+      let entrW = 0;
+      for (const e of entries) {
+        entrW += LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP + e.label.length * LEGEND_ENTRY_FONT_W + LEGEND_ENTRY_TRAIL;
+      }
+      legendGroups.push({
+        name: tg.name,
+        key: tg.name.toLowerCase(),
+        isStatus: false,
+        entries,
+        width: LEGEND_CAPSULE_PAD * 2 + pillW + 4 + entrW,
+      });
+    }
+
+    // Determine which group is active/expanded
+    const activeKey = activeTagGroup?.toLowerCase() ?? null;
+    const isStatusExpanded = isLegendExpanded && activeKey === null;
+
+    // When a tag group is active, only show that group (mutual exclusion).
+    // When no tag group is active, show all pills (Status expanded + tag pills minified).
+    const visibleLegendGroups = activeKey !== null
+      ? legendGroups.filter((lg) => !lg.isStatus && lg.key === activeKey)
+      : legendGroups;
+
+    // Compute total legend width
+    let totalLegendW = 0;
+    for (const lg of visibleLegendGroups) {
+      const isActive = lg.isStatus ? isStatusExpanded : (activeKey === lg.key);
+      const pillW = lg.name.length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD;
+      totalLegendW += isActive ? lg.width : pillW;
+      totalLegendW += LEGEND_GROUP_GAP;
+    }
+    totalLegendW -= LEGEND_GROUP_GAP; // remove trailing gap
+
+    const legendX = (width - totalLegendW) / 2;
+    const legendY = titleHeight;
+
+    const legendRow = svg
+      .append('g')
+      .attr('class', 'is-legend-row')
+      .attr('transform', `translate(${legendX}, ${legendY})`);
+
+    let cursorX = 0;
+
+    for (const lg of visibleLegendGroups) {
+      const isActive = lg.isStatus ? isStatusExpanded : (activeKey === lg.key);
+      const pillW = lg.name.length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD;
+      const pillH = LEGEND_HEIGHT - (isActive ? LEGEND_CAPSULE_PAD * 2 : 0);
+      const groupW = isActive ? lg.width : pillW;
+
+      const gEl = legendRow
+        .append('g')
+        .attr('transform', `translate(${cursorX}, 0)`)
+        .attr('class', 'is-legend-group')
+        .attr('data-legend-group', lg.key)
+        .style('cursor', 'pointer');
+
+      if (isActive) {
+        // Outer capsule background
+        gEl.append('rect')
+          .attr('width', groupW)
+          .attr('height', LEGEND_HEIGHT)
+          .attr('rx', LEGEND_HEIGHT / 2)
+          .attr('fill', groupBg);
+      }
+
+      const pillXOff = isActive ? LEGEND_CAPSULE_PAD : 0;
+      const pillYOff = isActive ? LEGEND_CAPSULE_PAD : 0;
+
+      // Pill background
+      gEl.append('rect')
+        .attr('x', pillXOff)
+        .attr('y', pillYOff)
+        .attr('width', pillW)
+        .attr('height', pillH)
+        .attr('rx', pillH / 2)
+        .attr('fill', isActive ? palette.bg : groupBg);
+
+      // Active pill border
+      if (isActive) {
+        gEl.append('rect')
+          .attr('x', pillXOff)
+          .attr('y', pillYOff)
+          .attr('width', pillW)
+          .attr('height', pillH)
+          .attr('rx', pillH / 2)
+          .attr('fill', 'none')
+          .attr('stroke', mix(palette.textMuted, palette.bg, 50))
+          .attr('stroke-width', 0.75);
+      }
+
+      // Pill text
+      gEl.append('text')
+        .attr('x', pillXOff + pillW / 2)
+        .attr('y', LEGEND_HEIGHT / 2 + LEGEND_PILL_FONT_SIZE / 2 - 2)
+        .attr('font-size', LEGEND_PILL_FONT_SIZE)
+        .attr('font-weight', '500')
+        .attr('fill', isActive ? palette.text : palette.textMuted)
+        .attr('text-anchor', 'middle')
+        .attr('font-family', FONT_FAMILY)
+        .text(lg.name);
+
+      // Entries inside capsule (active only)
+      if (isActive) {
+        // Determine which values are hidden for this group
+        const hiddenSet = !lg.isStatus ? hiddenTagValues?.get(lg.key) : undefined;
+
+        let entryX = pillXOff + pillW + 4;
+        for (const entry of lg.entries) {
+          const isHidden = hiddenSet?.has(entry.value) ?? false;
+
+          const entryG = gEl.append('g')
+            .attr('data-legend-entry', entry.value)
+            .style('cursor', !lg.isStatus ? 'pointer' : 'default');
+
+          if (isHidden) {
+            // Hidden: hollow ring + dimmed text (strikethrough-like)
+            entryG.append('circle')
+              .attr('cx', entryX + LEGEND_DOT_R)
+              .attr('cy', LEGEND_HEIGHT / 2)
+              .attr('r', LEGEND_DOT_R)
+              .attr('fill', 'none')
+              .attr('stroke', entry.color)
+              .attr('stroke-width', 1.2)
+              .attr('opacity', 0.5);
+          } else {
+            // Visible: solid dot
+            entryG.append('circle')
+              .attr('cx', entryX + LEGEND_DOT_R)
+              .attr('cy', LEGEND_HEIGHT / 2)
+              .attr('r', LEGEND_DOT_R)
+              .attr('fill', entry.color);
+          }
+
+          entryG.append('text')
+            .attr('x', entryX + LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP)
+            .attr('y', LEGEND_HEIGHT / 2 + LEGEND_ENTRY_FONT_SIZE / 2 - 1)
+            .attr('font-size', LEGEND_ENTRY_FONT_SIZE)
+            .attr('fill', palette.textMuted)
+            .attr('font-family', FONT_FAMILY)
+            .attr('opacity', isHidden ? 0.4 : 1)
+            .attr('text-decoration', isHidden ? 'line-through' : 'none')
+            .text(entry.label);
+
+          entryX += LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP + entry.label.length * LEGEND_ENTRY_FONT_W + LEGEND_ENTRY_TRAIL;
+        }
+      }
+
+      cursorX += groupW + LEGEND_GROUP_GAP;
+    }
+
+  }
+
   // Content group
   const contentG = svg
     .append('g')
@@ -768,7 +1040,15 @@ export function renderInitiativeStatus(
       .append('g')
       .attr('transform', `translate(${node.x}, ${node.y})`)
       .attr('class', 'is-node')
-      .attr('data-line-number', String(node.lineNumber));
+      .attr('data-line-number', String(node.lineNumber))
+      .attr('data-is-status', node.status ?? 'na');
+
+    // Tag data attributes for hover dimming
+    if (node.metadata) {
+      for (const [key, val] of Object.entries(node.metadata)) {
+        nodeG.attr(`data-tag-${key}`, val.toLowerCase());
+      }
+    }
 
     if (onClickItem) {
       nodeG.style('cursor', 'pointer').on('click', () => {
@@ -787,14 +1067,16 @@ export function renderInitiativeStatus(
       .attr('fill', 'transparent')
       .attr('class', 'is-node-hit-area');
 
+    // Always use status coloring regardless of legend state
     const fill = nodeFill(node.status, palette, isDark);
     const stroke = nodeStroke(node.status, palette, isDark);
     renderNodeShape(nodeG, node.shape, node.width, node.height, fill, stroke);
 
+    const textColor = contrastText(fill, '#eceff4', '#2e3440');
+
     // Label placement: actors put label below the figure, others center inside
     const isActor = node.shape === 'actor';
     if (isActor) {
-      const textColor = nodeTextColor(node.status, palette, isDark);
       const fitted = fitTextToNode(node.label, node.width, node.height * 0.35);
       const labelY = node.height / 2 - fitted.fontSize * 0.3;
       for (let li = 0; li < fitted.lines.length; li++) {
@@ -811,7 +1093,6 @@ export function renderInitiativeStatus(
       }
     } else {
       const fitted = fitTextToNode(node.label, node.width, node.height);
-      const textColor = nodeTextColor(node.status, palette, isDark);
       const totalTextHeight = fitted.lines.length * fitted.fontSize * 1.3;
       const startY = -totalTextHeight / 2 + fitted.fontSize * 0.65;
 
@@ -846,9 +1127,12 @@ export function renderInitiativeStatusForExport(
   const layout = layoutInitiativeStatus(parsed);
   const isDark = theme === 'dark';
 
+  const legendEntries = collectStatuses(parsed);
+  const EXPORT_LEGEND_GAP = 8;
+  const legendReserve = legendEntries.length > 1 ? LEGEND_HEIGHT + EXPORT_LEGEND_GAP : 0;
   const titleOffset = parsed.title ? 40 : 0;
   const exportWidth = layout.width + DIAGRAM_PADDING * 2;
-  const exportHeight = layout.height + DIAGRAM_PADDING * 2 + titleOffset;
+  const exportHeight = layout.height + DIAGRAM_PADDING * 2 + titleOffset + legendReserve;
 
   return runInExportContainer(exportWidth, exportHeight, (container) => {
     renderInitiativeStatus(
@@ -857,8 +1141,7 @@ export function renderInitiativeStatusForExport(
       layout,
       palette,
       isDark,
-      undefined,
-      { width: exportWidth, height: exportHeight }
+      { exportDims: { width: exportWidth, height: exportHeight } }
     );
     return extractExportSvg(container, theme);
   });

package/src/initiative-status/types.ts

@@ -4,6 +4,7 @@
 
 import type { DgmoError } from '../diagnostics';
 import type { ParticipantType } from '../sequence/parser';
+import type { TagGroup } from '../utils/tag-groups';
 
 export type InitiativeStatus = 'done' | 'wip' | 'todo' | 'na' | null;
 
@@ -14,6 +15,7 @@ export interface ISNode {
   status: InitiativeStatus;
   shape: ParticipantType;
   lineNumber: number;
+  metadata: Record<string, string>;
 }
 
 export interface ISEdge {
@@ -22,6 +24,7 @@ export interface ISEdge {
   label?: string; // e.g. "getUser"
   status: InitiativeStatus;
   lineNumber: number;
+  metadata: Record<string, string>;
 }
 
 export interface ISGroup {
@@ -37,7 +40,10 @@ export interface ParsedInitiativeStatus {
   nodes: ISNode[];
   edges: ISEdge[];
   groups: ISGroup[];
+  tagGroups: TagGroup[];
   options: Record<string, string>;
+  /** Initial hidden tag values from `hide:` DSL directive. Map<groupKey, Set<values>> */
+  initialHiddenTagValues: Map<string, Set<string>>;
   diagnostics: DgmoError[];
   error: string | null;
 }

package/src/org/layout.ts

@@ -1115,8 +1115,6 @@ export function layoutOrg(
   let finalWidth = totalWidth;
   let finalHeight = totalHeight;
 
-  const legendPosition = parsed.options?.['legend-position'] ?? 'top';
-
   // When a tag group is active, only that group is laid out (full size).
   // When none is active, all groups are laid out minified — unless
   // expandAllLegend is set (export mode), which shows all groups expanded.
@@ -1128,62 +1126,31 @@ export function layoutOrg(
     activeTagGroup != null || allExpanded ? g.width : g.minifiedWidth;
 
   if (visibleGroups.length > 0) {
-    if (legendPosition === 'bottom') {
-      // Bottom: center legend groups horizontally below diagram content
-      const totalGroupsWidth =
-        visibleGroups.reduce((s, g) => s + effectiveW(g), 0) +
-        (visibleGroups.length - 1) * LEGEND_GROUP_GAP;
-      const neededWidth = totalGroupsWidth + MARGIN * 2;
-
-      if (neededWidth > totalWidth) {
-        finalWidth = neededWidth;
-        const shift = (finalWidth - totalWidth) / 2;
-        for (const n of layoutNodes) n.x += shift;
-        for (const c of containers) c.x += shift;
-        for (const e of layoutEdges) {
-          for (const p of e.points) p.x += shift;
-        }
-      }
-
-      const contentBottom = totalHeight - MARGIN;
-      const legendY = contentBottom + LEGEND_GAP;
-      const startX = (finalWidth - totalGroupsWidth) / 2;
-
-      let cx = startX;
-      for (const g of visibleGroups) {
-        g.x = cx;
-        g.y = legendY;
-        cx += effectiveW(g) + LEGEND_GROUP_GAP;
-      }
-
-      finalHeight = totalHeight + LEGEND_GAP + LEGEND_HEIGHT;
-    } else {
-      // Top: horizontal row above chart content, left-aligned
-      const legendShift = LEGEND_HEIGHT + LEGEND_GROUP_GAP;
-
-      // Push all chart content down
-      for (const n of layoutNodes) n.y += legendShift;
-      for (const c of containers) c.y += legendShift;
-      for (const e of layoutEdges) {
-        for (const p of e.points) p.y += legendShift;
-      }
+    // Top: horizontal row above chart content, left-aligned
+    const legendShift = LEGEND_HEIGHT + LEGEND_GROUP_GAP;
+
+    // Push all chart content down
+    for (const n of layoutNodes) n.y += legendShift;
+    for (const c of containers) c.y += legendShift;
+    for (const e of layoutEdges) {
+      for (const p of e.points) p.y += legendShift;
+    }
 
-      const totalGroupsWidth =
-        visibleGroups.reduce((s, g) => s + effectiveW(g), 0) +
-        (visibleGroups.length - 1) * LEGEND_GROUP_GAP;
+    const totalGroupsWidth =
+      visibleGroups.reduce((s, g) => s + effectiveW(g), 0) +
+      (visibleGroups.length - 1) * LEGEND_GROUP_GAP;
 
-      let cx = MARGIN;
-      for (const g of visibleGroups) {
-        g.x = cx;
-        g.y = MARGIN;
-        cx += effectiveW(g) + LEGEND_GROUP_GAP;
-      }
+    let cx = MARGIN;
+    for (const g of visibleGroups) {
+      g.x = cx;
+      g.y = MARGIN;
+      cx += effectiveW(g) + LEGEND_GROUP_GAP;
+    }
 
-      finalHeight += legendShift;
-      const neededWidth = totalGroupsWidth + MARGIN * 2;
-      if (neededWidth > finalWidth) {
-        finalWidth = neededWidth;
-      }
+    finalHeight += legendShift;
+    const neededWidth = totalGroupsWidth + MARGIN * 2;
+    if (neededWidth > finalWidth) {
+      finalWidth = neededWidth;
     }
   }
 

package/src/org/renderer.ts

@@ -115,7 +115,6 @@ export function renderOrg(
 
   const titleOffset = parsed.title ? TITLE_HEIGHT : 0;
   const legendOnly = layout.nodes.length === 0;
-  const legendPosition = parsed.options?.['legend-position'] ?? 'bottom';
   const hasLegend = layout.legend.length > 0;
 
   // In app mode (not export), render the legend at a fixed size outside the
@@ -148,10 +147,9 @@ export function renderOrg(
   // Center the diagram
   const scaledW = diagramW * scale;
   const offsetX = (width - scaledW) / 2;
-  const offsetY =
-    legendPosition === 'top' && fixedLegend
-      ? DIAGRAM_PADDING + legendReserve + titleReserve
-      : DIAGRAM_PADDING + titleReserve;
+  const offsetY = fixedLegend
+    ? DIAGRAM_PADDING + legendReserve + titleReserve
+    : DIAGRAM_PADDING + titleReserve;
 
   // Create SVG
   const svg = d3Selection
@@ -516,9 +514,7 @@ export function renderOrg(
           .attr('class', 'org-legend-fixed')
           .attr(
             'transform',
-            legendPosition === 'bottom'
-              ? `translate(0, ${height - DIAGRAM_PADDING - LEGEND_HEIGHT})`
-              : `translate(0, ${DIAGRAM_PADDING + titleReserve})`
+            `translate(0, ${DIAGRAM_PADDING + titleReserve})`
           )
       : contentG;
     const legendParent = legendParentBase;

package/src/palettes/dracula.ts

@@ -0,0 +1,60 @@
+import type { PaletteConfig } from './types';
+import { registerPalette } from './registry';
+
+// ============================================================
+// Dracula Palette Definition
+// https://draculatheme.com/contribute
+// ============================================================
+
+export const draculaPalette: PaletteConfig = {
+  id: 'dracula',
+  name: 'Dracula',
+  light: {
+    bg: '#f8f8f2', // foreground as light bg
+    surface: '#f0f0ec',
+    overlay: '#e8e8e2',
+    border: '#d8d8d2',
+    text: '#282a36', // background as light text
+    textMuted: '#44475a', // current line
+    primary: '#6272a4', // comment
+    secondary: '#bd93f9', // purple
+    accent: '#bd93f9', // purple
+    destructive: '#ff5555', // red
+    colors: {
+      red: '#ff5555',
+      orange: '#ffb86c',
+      yellow: '#f1fa8c',
+      green: '#50fa7b',
+      blue: '#6272a4', // comment blue
+      purple: '#bd93f9',
+      teal: '#5ac8b8', // muted cyan toward green
+      cyan: '#8be9fd',
+      gray: '#6272a4',
+    },
+  },
+  dark: {
+    bg: '#282a36', // background
+    surface: '#343746', // between bg and current line
+    overlay: '#44475a', // current line
+    border: '#6272a4', // comment
+    text: '#f8f8f2', // foreground
+    textMuted: '#bcc2d4', // muted foreground
+    primary: '#bd93f9', // purple (Dracula's signature)
+    secondary: '#8be9fd', // cyan
+    accent: '#ff79c6', // pink
+    destructive: '#ff5555', // red
+    colors: {
+      red: '#ff5555',
+      orange: '#ffb86c',
+      yellow: '#f1fa8c',
+      green: '#50fa7b',
+      blue: '#6272a4', // comment blue
+      purple: '#bd93f9',
+      teal: '#5ac8b8', // muted cyan toward green
+      cyan: '#8be9fd',
+      gray: '#6272a4',
+    },
+  },
+};
+
+registerPalette(draculaPalette);

package/src/palettes/index.ts

@@ -22,15 +22,17 @@ export {
   contrastText,
 } from './color-utils';
 
-// Re-export palette definitions
-export { nordPalette } from './nord';
-export { solarizedPalette } from './solarized';
+// Re-export palette definitions (alphabetical)
+export { boldPalette } from './bold';
 export { catppuccinPalette } from './catppuccin';
-export { rosePinePalette } from './rose-pine';
+export { draculaPalette } from './dracula';
 export { gruvboxPalette } from './gruvbox';
-export { tokyoNightPalette } from './tokyo-night';
+export { monokaiPalette } from './monokai';
+export { nordPalette } from './nord';
 export { oneDarkPalette } from './one-dark';
-export { boldPalette } from './bold';
+export { rosePinePalette } from './rose-pine';
+export { solarizedPalette } from './solarized';
+export { tokyoNightPalette } from './tokyo-night';
 
 // Re-export Mermaid bridge
 export { buildMermaidThemeVars, buildThemeCSS } from './mermaid-bridge';