Mermaid

1"use client";
2 
3import * as React from "react";
4import { cn } from "@/lib/utils";
5 
6/* ================================================================== */
7/*  MERMAID — Render mermaid diagrams from children code               */
8/* ================================================================== */
9 
10export interface MermaidProps extends React.HTMLAttributes<HTMLDivElement> {
11  /** Mermaid code — pass as children (string) or as this prop */
12  code?: string;
13  /** Chart id prefix */
14  chartId?: string;
15  children?: React.ReactNode;
16  surface?: "solid" | "soft" | "glass";
17  radius?: "none" | "sm" | "md" | "lg" | "xl";
18  diagramStyle?: "soft" | "minimal" | "technical";
19  loadingContent?: React.ReactNode;
20  errorContent?: (error: string) => React.ReactNode;
21}
22 
23let mermaidReady: Promise<typeof import("mermaid")> | null = null;
24 
25function getMermaid() {
26  if (!mermaidReady) {
27    mermaidReady = import("mermaid");
28  }
29  return mermaidReady;
30}
31 
32function resolveColor(container: HTMLElement, variable: string, fallback: string) {
33  const probe = document.createElement("span");
34  probe.style.cssText = `position:absolute;visibility:hidden;color:var(${variable},${fallback})`;
35  container.appendChild(probe);
36  const color = getComputedStyle(probe).color || fallback;
37  probe.remove();
38  return color;
39}
40 
41function resolveMermaidTheme(container: HTMLElement) {
42  return {
43    primaryColor: resolveColor(container, "--poyraz-primary-muted", "rgb(254 226 226)"),
44    primaryBorderColor: resolveColor(container, "--poyraz-primary", "rgb(220 38 38)"),
45    primaryTextColor: resolveColor(container, "--poyraz-foreground", "rgb(15 23 42)"),
46    secondaryColor: resolveColor(container, "--poyraz-surface-subtle", "rgb(241 245 249)"),
47    secondaryBorderColor: resolveColor(container, "--poyraz-border-strong", "rgb(148 163 184)"),
48    secondaryTextColor: resolveColor(container, "--poyraz-foreground", "rgb(51 65 85)"),
49    tertiaryColor: resolveColor(container, "--poyraz-warning", "rgb(254 243 199)"),
50    tertiaryBorderColor: resolveColor(container, "--poyraz-warning-border", "rgb(217 119 6)"),
51    tertiaryTextColor: resolveColor(container, "--poyraz-warning-foreground", "rgb(120 53 15)"),
52    lineColor: resolveColor(container, "--poyraz-muted-foreground", "rgb(100 116 139)"),
53    textColor: resolveColor(container, "--poyraz-foreground", "rgb(15 23 42)"),
54    mainBkg: resolveColor(container, "--poyraz-surface", "rgb(255 255 255)"),
55// … truncated