@graph-render/core 1.0.1

package/src/rendering/svg.ts

@@ -0,0 +1,346 @@
+import {
+  NxGraphInput,
+  NodeData,
+  PositionedNode,
+  PositionedEdge,
+  EdgeData,
+  EdgeType,
+  LayoutType,
+  LayoutDirection,
+  Point,
+} from '@graph-render/types';
+import type { NodeRenderer, EdgeRenderer } from '@graph-render/types';
+import type {
+  RenderGraphToSvgOptions,
+  RenderGraphToSvgResult,
+  RenderConfig,
+  RenderTheme,
+} from '@graph-render/types';
+import { DEFAULT_THEME, fromNxGraph, normalizeGraphConfig } from '../utils';
+import { layoutNodes } from '../layouts';
+import { routeEdges, buildEdgePath } from '../edges';
+import { defaultNodeRenderer, defaultEdgeRenderer } from './defaultRenderers';
+import { escapeXml, sanitizeCssColor, sanitizeFontFamily, sanitizeSvgId } from './utils';
+
+const isFinitePoint = (point: Point | undefined): point is Point => {
+  return Boolean(point && Number.isFinite(point.x) && Number.isFinite(point.y));
+};
+
+const buildFallbackPositionedEdges = (
+  positionedNodes: PositionedNode[],
+  edges: EdgeData[]
+): PositionedEdge[] => {
+  const nodeMap = new Map(positionedNodes.map((node) => [node.id, node]));
+
+  return edges.flatMap((edge) => {
+    const source = nodeMap.get(edge.source);
+    const target = nodeMap.get(edge.target);
+
+    if (!source || !target) {
+      return [];
+    }
+
+    const sourceWidth = source.size?.width ?? 0;
+    const sourceHeight = source.size?.height ?? 0;
+    const targetWidth = target.size?.width ?? 0;
+    const targetHeight = target.size?.height ?? 0;
+
+    if (source.id === target.id) {
+      const right = source.position.x + sourceWidth;
+      const top = source.position.y;
+
+      return [
+        {
+          ...edge,
+          type: edge.type ?? EdgeType.Directed,
+          points: [
+            { x: right - Math.min(sourceWidth * 0.25, 18), y: top + Math.min(sourceHeight * 0.35, 18) },
+            { x: right + 28, y: top - 20 },
+            { x: right + 36, y: top + sourceHeight / 2 },
+            { x: right - Math.min(sourceWidth * 0.25, 18), y: top + sourceHeight * 0.8 },
+          ],
+        },
+      ];
+    }
+
+    return [
+      {
+        ...edge,
+        type: edge.type ?? EdgeType.Directed,
+        points: [
+          {
+            x: source.position.x + sourceWidth / 2,
+            y: source.position.y + sourceHeight / 2,
+          },
+          {
+            x: target.position.x + targetWidth / 2,
+            y: target.position.y + targetHeight / 2,
+          },
+        ],
+      },
+    ];
+  });
+};
+
+const getPositionedNodesWithFallback = (
+  sourceNodes: NodeData[],
+  normalizedEdges: EdgeData[],
+  config: RenderConfig
+): PositionedNode[] => {
+  try {
+    return layoutNodes({
+      nodes: sourceNodes,
+      edges: normalizedEdges,
+      theme: config.mergedTheme,
+      padding: config.padding,
+      layout: config.layout,
+      width: config.width,
+      height: config.height,
+      layoutDirection: config.layoutDirection,
+      nodeSizing: config.nodeSizing,
+      fixedNodeSize: config.fixedNodeSize,
+      labelMeasurementPaddingX: config.labelMeasurementPaddingX,
+      labelMeasurementPaddingY: config.labelMeasurementPaddingY,
+      labelMeasurementCharWidth: config.labelMeasurementCharWidth,
+      labelMeasurementLineHeight: config.labelMeasurementLineHeight,
+    });
+  } catch {
+    return layoutNodes({
+      nodes: sourceNodes,
+      edges: normalizedEdges,
+      theme: config.mergedTheme,
+      padding: config.padding,
+      layout: LayoutType.Centered,
+      width: config.width,
+      height: config.height,
+      layoutDirection: LayoutDirection.LTR,
+      nodeSizing: config.nodeSizing,
+      fixedNodeSize: config.fixedNodeSize,
+      labelMeasurementPaddingX: config.labelMeasurementPaddingX,
+      labelMeasurementPaddingY: config.labelMeasurementPaddingY,
+      labelMeasurementCharWidth: config.labelMeasurementCharWidth,
+      labelMeasurementLineHeight: config.labelMeasurementLineHeight,
+    });
+  }
+};
+
+const getPositionedEdgesWithFallback = (
+  positionedNodes: PositionedNode[],
+  normalizedEdges: EdgeData[],
+  config: RenderConfig
+): PositionedEdge[] => {
+  try {
+    const routedEdges = routeEdges(positionedNodes, normalizedEdges, {
+      arrowPadding: config.arrowPadding,
+      straight: !config.curveEdges || config.routingStyle === 'orthogonal',
+      layoutDirection: config.layoutDirection,
+      forceRightToLeft: config.forceRightToLeft ?? false,
+      routingStyle: config.routingStyle,
+      edgeSeparation: config.edgeSeparation,
+      selfLoopRadius: config.selfLoopRadius,
+    });
+
+    return routedEdges.filter(
+      (edge) => edge.points.length >= 2 && edge.points.every((point) => isFinitePoint(point))
+    );
+  } catch {
+    return buildFallbackPositionedEdges(positionedNodes, normalizedEdges);
+  }
+};
+
+/**
+ * Extract and normalize configuration from options
+ */
+const extractRenderConfig = (options?: RenderGraphToSvgOptions): RenderConfig => {
+  const cfg = normalizeGraphConfig(options?.config);
+  const mergedTheme = { ...DEFAULT_THEME, ...(cfg.theme ?? {}) };
+  const safeFontFamily = escapeXml(
+    sanitizeFontFamily(mergedTheme.fontFamily, DEFAULT_THEME.fontFamily)
+  );
+
+  return {
+    width: cfg.width,
+    height: cfg.height,
+    padding: cfg.padding,
+    defaultEdgeType: cfg.defaultEdgeType,
+    curveEdges: cfg.curveEdges,
+    curveStrength: cfg.curveStrength,
+    arrowPadding: cfg.arrowPadding,
+    showArrows: cfg.showArrows,
+    nodeSizing: cfg.nodeSizing,
+    fixedNodeSize: cfg.fixedNodeSize,
+    labelMeasurementPaddingX: cfg.labelMeasurementPaddingX,
+    labelMeasurementPaddingY: cfg.labelMeasurementPaddingY,
+    labelMeasurementCharWidth: cfg.labelMeasurementCharWidth,
+    labelMeasurementLineHeight: cfg.labelMeasurementLineHeight,
+    routingStyle: cfg.routingStyle,
+    edgeSeparation: cfg.edgeSeparation,
+    selfLoopRadius: cfg.selfLoopRadius,
+    layout: cfg.layout,
+    layoutDirection: cfg.layoutDirection,
+    forceRightToLeft: cfg.forceRightToLeft,
+    markerId: sanitizeSvgId(options?.markerId ?? 'arrow', 'arrow'),
+    edgeLabelColor: cfg.edgeLabelColor,
+    mergedTheme,
+    safeFontFamily,
+  };
+};
+
+/**
+ * Normalize edges with default type
+ */
+const normalizeEdges = (edges: EdgeData[], defaultType: EdgeType): EdgeData[] => {
+  return edges.map((edge) => ({ ...edge, type: edge.type ?? defaultType }));
+};
+
+/**
+ * Extract theme properties for rendering
+ */
+const extractRenderTheme = (config: RenderConfig): RenderTheme => {
+  return {
+    edgeColor: sanitizeCssColor(config.mergedTheme.edgeColor, DEFAULT_THEME.edgeColor),
+    edgeWidth: config.mergedTheme.edgeWidth ?? DEFAULT_THEME.edgeWidth,
+    edgeLabelColor: sanitizeCssColor(config.edgeLabelColor, '#334155'),
+    background: sanitizeCssColor(config.mergedTheme.background, DEFAULT_THEME.background),
+  };
+};
+
+/**
+ * Create SVG marker definition for arrow heads
+ */
+const createArrowMarkerDef = (markerId: string, edgeColor: string): string => {
+  return [
+    `<marker id="${escapeXml(markerId)}" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">`,
+    `<path d="M 0 0 L 10 5 L 0 10 z" fill="${escapeXml(edgeColor)}" />`,
+    '</marker>',
+  ].join('');
+};
+
+/**
+ * Render all edges to SVG markup
+ */
+const renderEdgesToSvg = (
+  edges: PositionedEdge[],
+  curveEdges: boolean,
+  curveStrength: number,
+  edgeRenderer: EdgeRenderer,
+  theme: RenderTheme,
+  markerId: string
+): string => {
+  return edges
+    .map((edge) => {
+      const pathD = buildEdgePath(edge, curveEdges, curveStrength);
+      if (!pathD) return '';
+      return edgeRenderer(edge, pathD, {
+        edgeColor: theme.edgeColor,
+        edgeWidth: theme.edgeWidth,
+        edgeLabelColor: theme.edgeLabelColor,
+        markerId,
+      });
+    })
+    .join('');
+};
+
+/**
+ * Render all nodes to SVG markup
+ */
+const renderNodesToSvg = (nodes: PositionedNode[], nodeRenderer: NodeRenderer): string => {
+  return nodes
+    .map((node) => {
+      const body = nodeRenderer(node);
+      return `<g transform="translate(${node.position.x}, ${node.position.y})">${body}</g>`;
+    })
+    .join('');
+};
+
+/**
+ * Create SVG metadata elements (title and description)
+ */
+const createMetadataElements = (title?: string, desc?: string): string => {
+  const titleElement = title ? `<title>${escapeXml(title)}</title>` : '';
+  const descElement = desc ? `<desc>${escapeXml(desc)}</desc>` : '';
+  return titleElement + descElement;
+};
+
+/**
+ * Assemble complete SVG document
+ */
+const assembleSvgDocument = (
+  width: number,
+  height: number,
+  background: string,
+  fontFamily: string,
+  metadata: string,
+  defs: string,
+  edgesMarkup: string,
+  nodesMarkup: string
+): string => {
+  return [
+    `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" style="background:${escapeXml(background)};font-family:${fontFamily};">`,
+    metadata,
+    '<defs>',
+    defs,
+    '</defs>',
+    '<g>',
+    edgesMarkup,
+    nodesMarkup,
+    '</g>',
+    '</svg>',
+  ].join('');
+};
+
+/**
+ * Render a graph to SVG format
+ */
+export const renderGraphToSvg = (
+  graph: NxGraphInput,
+  options?: RenderGraphToSvgOptions
+): RenderGraphToSvgResult => {
+  const config = extractRenderConfig(options);
+
+  // Parse and normalize graph data
+  const { nodes: sourceNodes, edges: sourceEdges } = fromNxGraph(graph, config.defaultEdgeType);
+  const normalizedEdges = normalizeEdges(sourceEdges, config.defaultEdgeType);
+
+  // Layout nodes and route edges
+  const positionedNodes = getPositionedNodesWithFallback(sourceNodes, normalizedEdges, config);
+  const positionedEdges = getPositionedEdgesWithFallback(positionedNodes, normalizedEdges, config);
+
+  // Extract rendering components
+  const theme = extractRenderTheme(config);
+  const nodeRenderer = options?.vertexRenderer ?? defaultNodeRenderer;
+  const edgeRenderer = options?.edgeRenderer ?? defaultEdgeRenderer;
+
+  // Generate SVG elements
+  const defs = config.showArrows ? createArrowMarkerDef(config.markerId, theme.edgeColor) : '';
+  const edgesMarkup = renderEdgesToSvg(
+    positionedEdges,
+    config.curveEdges,
+    config.curveStrength,
+    edgeRenderer,
+    theme,
+    config.showArrows ? config.markerId : ''
+  );
+  const nodesMarkup = renderNodesToSvg(positionedNodes, nodeRenderer);
+  const metadata = createMetadataElements(options?.title, options?.desc);
+
+  // Assemble final SVG
+  const svg = assembleSvgDocument(
+    config.width,
+    config.height,
+    theme.background,
+    config.safeFontFamily,
+    metadata,
+    defs,
+    edgesMarkup,
+    nodesMarkup
+  );
+
+  return {
+    svg,
+    width: config.width,
+    height: config.height,
+    nodes: positionedNodes,
+    edges: positionedEdges,
+  };
+};

package/src/rendering/utils.ts

@@ -0,0 +1,41 @@
+export const escapeXml = (input: unknown): string => {
+  const str = String(input ?? '');
+  return str
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&apos;');
+};
+
+const CSS_COLOR_PATTERN =
+  /^(#[0-9a-fA-F]{3,8}|(?:rgb|hsl)a?\([0-9\s.,%+-]+\)|[a-zA-Z][a-zA-Z0-9-]*|var\(--[a-zA-Z0-9-_]+\))$/;
+
+const FONT_FAMILY_PATTERN = /^[a-zA-Z0-9\s,'"-]+$/;
+
+export const sanitizeSvgId = (input: unknown, fallback: string): string => {
+  const normalized = String(input ?? '')
+    .trim()
+    .replace(/[^a-zA-Z0-9:_-]+/g, '-')
+    .replace(/^-+|-+$/g, '');
+
+  if (!normalized) {
+    return fallback;
+  }
+
+  return /^[a-zA-Z_]/.test(normalized) ? normalized : `${fallback}-${normalized}`;
+};
+
+export const sanitizeCssColor = (input: unknown, fallback: string): string => {
+  const value = String(input ?? '').trim();
+  return CSS_COLOR_PATTERN.test(value) ? value : fallback;
+};
+
+export const sanitizeFontFamily = (input: unknown, fallback: string): string => {
+  const value = String(input ?? '').trim();
+  if (!value || !FONT_FAMILY_PATTERN.test(value)) {
+    return fallback;
+  }
+
+  return value;
+};

package/src/utils/config.ts

@@ -0,0 +1,198 @@
+import {
+  EdgeType,
+  GraphConfig,
+  GraphTheme,
+  LayoutDirection,
+  LayoutType,
+} from '@graph-render/types';
+import { DEFAULT_THEME, DEFAULT_NODE_SIZE } from './constants';
+
+const DEFAULT_WIDTH = 960;
+const DEFAULT_HEIGHT = 720;
+const MAX_DIMENSION = 32768;
+const DEFAULT_CURVE_STRENGTH = 0.3;
+const DEFAULT_ARROW_PADDING = 6;
+const DEFAULT_EDGE_SEPARATION = 18;
+const DEFAULT_SELF_LOOP_RADIUS = 32;
+const DEFAULT_LABEL_OFFSET = 32;
+const DEFAULT_LABEL_PADDING_X = 18;
+const DEFAULT_LABEL_PADDING_Y = 12;
+const DEFAULT_LABEL_CHAR_WIDTH = 8;
+const DEFAULT_LABEL_LINE_HEIGHT = 18;
+const DEFAULT_HOVER_EDGE_COLOR = '#4da3ff';
+const DEFAULT_HOVER_NODE_IN_COLOR = '#2ecc71';
+const DEFAULT_HOVER_NODE_OUT_COLOR = '#ff5b5b';
+const DEFAULT_EDGE_LABEL_COLOR = '#334155';
+const DEFAULT_LABEL_PILL_BACKGROUND = '#eef1f6';
+const DEFAULT_LABEL_PILL_BORDER_COLOR = '#d7dbe3';
+const DEFAULT_LABEL_PILL_TEXT_COLOR = '#3f434b';
+const CSS_COLOR_PATTERN =
+  /^(#[0-9a-fA-F]{3,8}|(?:rgb|hsl)a?\([0-9\s.,%+-]+\)|[a-zA-Z][a-zA-Z0-9-]*|var\(--[a-zA-Z0-9-_]+\))$/;
+
+const getFinitePositive = (value: unknown, fallback: number): number => {
+  return typeof value === 'number' && Number.isFinite(value) && value > 0 ? value : fallback;
+};
+
+const getFiniteNonNegative = (value: unknown, fallback: number): number => {
+  return typeof value === 'number' && Number.isFinite(value) && value >= 0 ? value : fallback;
+};
+
+const getFiniteBounded = (value: unknown, min: number, max: number, fallback: number): number => {
+  return typeof value === 'number' && Number.isFinite(value)
+    ? Math.min(Math.max(value, min), max)
+    : fallback;
+};
+
+const sanitizeCssColor = (value: unknown, fallback: string): string => {
+  const normalized = String(value ?? '').trim();
+  return CSS_COLOR_PATTERN.test(normalized) ? normalized : fallback;
+};
+
+const getEdgeType = (value: unknown, fallback: EdgeType): EdgeType => {
+  return value === EdgeType.Directed || value === EdgeType.Undirected ? value : fallback;
+};
+
+const getLayoutType = (value: unknown, fallback: LayoutType): LayoutType => {
+  return Object.values(LayoutType).includes(value as LayoutType) ? (value as LayoutType) : fallback;
+};
+
+const getLayoutDirection = (value: unknown, fallback: LayoutDirection): LayoutDirection => {
+  return value === LayoutDirection.LTR || value === LayoutDirection.RTL ? value : fallback;
+};
+
+const getNodeSizing = (value: unknown, fallback: NonNullable<GraphConfig['nodeSizing']>) => {
+  return value === 'fixed' || value === 'label' || value === 'measured' ? value : fallback;
+};
+
+const getRoutingStyle = (
+  value: unknown,
+  fallback: NonNullable<GraphConfig['routingStyle']>
+): NonNullable<GraphConfig['routingStyle']> => {
+  return value === 'smart' || value === 'orthogonal' || value === 'bundled' ? value : fallback;
+};
+
+const normalizeFixedNodeSize = (value: unknown): NonNullable<GraphConfig['fixedNodeSize']> => {
+  if (!value || typeof value !== 'object') {
+    return DEFAULT_NODE_SIZE;
+  }
+
+  const width = getFinitePositive(
+    (value as GraphConfig['fixedNodeSize'])?.width,
+    DEFAULT_NODE_SIZE.width
+  );
+  const height = getFinitePositive(
+    (value as GraphConfig['fixedNodeSize'])?.height,
+    DEFAULT_NODE_SIZE.height
+  );
+
+  return { width, height };
+};
+
+const normalizeTheme = (theme?: GraphTheme): GraphTheme => ({
+  ...DEFAULT_THEME,
+  ...theme,
+  edgeWidth: getFinitePositive(theme?.edgeWidth, DEFAULT_THEME.edgeWidth),
+  nodeGap: getFinitePositive(theme?.nodeGap, DEFAULT_THEME.nodeGap),
+  nodeBorderWidth:
+    typeof theme?.nodeBorderWidth === 'number' &&
+    Number.isFinite(theme.nodeBorderWidth) &&
+    theme.nodeBorderWidth >= 0
+      ? theme.nodeBorderWidth
+      // FIX: was `theme?.nodeBorderWidth`, which passed invalid values (e.g.,
+      // the string "2px") straight through to the SVG stroke-width attribute.
+      // All other config fields fall back to a safe default; this now does too.
+      : undefined,
+});
+
+export interface NormalizedGraphConfig extends Omit<GraphConfig, 'theme' | 'fixedNodeSize'> {
+  width: number;
+  height: number;
+  padding: number;
+  defaultEdgeType: EdgeType;
+  showArrows: boolean;
+  nodeSizing: NonNullable<GraphConfig['nodeSizing']>;
+  fixedNodeSize: NonNullable<GraphConfig['fixedNodeSize']>;
+  theme: GraphTheme;
+  curveEdges: boolean;
+  curveStrength: number;
+  arrowPadding: number;
+  routingStyle: NonNullable<GraphConfig['routingStyle']>;
+  edgeSeparation: number;
+  selfLoopRadius: number;
+  edgeLabelColor: string;
+  layout: LayoutType;
+  layoutDirection: LayoutDirection;
+  hoverHighlight: boolean;
+  hoverEdgeColor: string;
+  hoverNodeInColor: string;
+  hoverNodeOutColor: string;
+  hoverNodeHighlight: boolean;
+  autoLabels: boolean;
+  labelOffset: number;
+  labelPillBackground: string;
+  labelPillBorderColor: string;
+  labelPillTextColor: string;
+  labelMeasurementPaddingX: number;
+  labelMeasurementPaddingY: number;
+  labelMeasurementCharWidth: number;
+  labelMeasurementLineHeight: number;
+}
+
+export const normalizeGraphConfig = (config?: GraphConfig): NormalizedGraphConfig => {
+  return {
+    ...config,
+    width: getFiniteBounded(config?.width, 1, MAX_DIMENSION, DEFAULT_WIDTH),
+    height: getFiniteBounded(config?.height, 1, MAX_DIMENSION, DEFAULT_HEIGHT),
+    padding: getFiniteNonNegative(config?.padding, 24),
+    defaultEdgeType: getEdgeType(config?.defaultEdgeType, EdgeType.Directed),
+    showArrows: config?.showArrows ?? true,
+    nodeSizing: getNodeSizing(config?.nodeSizing, 'fixed'),
+    fixedNodeSize: normalizeFixedNodeSize(config?.fixedNodeSize),
+    labelMeasurementPaddingX: getFiniteNonNegative(
+      config?.labelMeasurementPaddingX,
+      DEFAULT_LABEL_PADDING_X
+    ),
+    labelMeasurementPaddingY: getFiniteNonNegative(
+      config?.labelMeasurementPaddingY,
+      DEFAULT_LABEL_PADDING_Y
+    ),
+    labelMeasurementCharWidth: getFinitePositive(
+      config?.labelMeasurementCharWidth,
+      DEFAULT_LABEL_CHAR_WIDTH
+    ),
+    labelMeasurementLineHeight: getFinitePositive(
+      config?.labelMeasurementLineHeight,
+      DEFAULT_LABEL_LINE_HEIGHT
+    ),
+    theme: normalizeTheme(config?.theme),
+    curveEdges: config?.curveEdges ?? true,
+    curveStrength: getFiniteBounded(config?.curveStrength, 0, 1, DEFAULT_CURVE_STRENGTH),
+    arrowPadding: getFiniteNonNegative(config?.arrowPadding, DEFAULT_ARROW_PADDING),
+    routingStyle: getRoutingStyle(config?.routingStyle, 'smart'),
+    edgeSeparation: getFinitePositive(config?.edgeSeparation, DEFAULT_EDGE_SEPARATION),
+    selfLoopRadius: getFinitePositive(config?.selfLoopRadius, DEFAULT_SELF_LOOP_RADIUS),
+    edgeLabelColor: config?.edgeLabelColor ?? DEFAULT_EDGE_LABEL_COLOR,
+    layout: getLayoutType(config?.layout, LayoutType.Centered),
+    layoutDirection: getLayoutDirection(config?.layoutDirection, LayoutDirection.LTR),
+    hoverHighlight: config?.hoverHighlight ?? true,
+    hoverEdgeColor: config?.hoverEdgeColor ?? DEFAULT_HOVER_EDGE_COLOR,
+    hoverNodeBorderColor: config?.hoverNodeBorderColor,
+    hoverNodeInColor: config?.hoverNodeInColor ?? DEFAULT_HOVER_NODE_IN_COLOR,
+    hoverNodeOutColor: config?.hoverNodeOutColor ?? DEFAULT_HOVER_NODE_OUT_COLOR,
+    hoverNodeBothColor: config?.hoverNodeBothColor,
+    hoverNodeHighlight: config?.hoverNodeHighlight ?? true,
+    labels: config?.labels,
+    autoLabels: config?.autoLabels ?? false,
+    labelOffset: getFiniteNonNegative(config?.labelOffset, DEFAULT_LABEL_OFFSET),
+    labelPillBackground: sanitizeCssColor(
+      config?.labelPillBackground,
+      DEFAULT_LABEL_PILL_BACKGROUND
+    ),
+    labelPillBorderColor: sanitizeCssColor(
+      config?.labelPillBorderColor,
+      DEFAULT_LABEL_PILL_BORDER_COLOR
+    ),
+    labelPillTextColor: sanitizeCssColor(config?.labelPillTextColor, DEFAULT_LABEL_PILL_TEXT_COLOR),
+    forceRightToLeft: config?.forceRightToLeft ?? false,
+  };
+};

package/src/utils/constants.ts

@@ -0,0 +1,24 @@
+import { Size, GraphTheme } from '@graph-render/types';
+
+export const DEFAULT_NODE_GAP = 96;
+export const DEFAULT_PADDING = 24;
+export const DEFAULT_NODE_SIZE: Size = { width: 180, height: 72 };
+
+export const DEFAULT_THEME: Required<
+  Pick<GraphTheme, 'background' | 'edgeColor' | 'edgeWidth' | 'fontFamily'>
+> & { nodeGap: number } = {
+  background: '#0c0c10',
+  edgeColor: '#8b9dbf',
+  edgeWidth: 2,
+  nodeGap: 96,
+  fontFamily: 'system-ui, -apple-system, Segoe UI, sans-serif',
+};
+
+// Default rendering constants
+export const DEFAULT_NODE_WIDTH = 180;
+export const DEFAULT_NODE_HEIGHT = 72;
+export const DEFAULT_NODE_RADIUS = 8;
+export const DEFAULT_NODE_FILL = 'white';
+export const DEFAULT_NODE_STROKE = '#d7dbe3';
+export const DEFAULT_TEXT_FILL = '#111827';
+export const DEFAULT_TEXT_SIZE = 14;