archrip 0.1.2

package/dist/viewer-template/src/data/loader.ts

@@ -0,0 +1,140 @@
+import type { Edge } from '@xyflow/react';
+import type { ArchFlowNode, ArchNodeData, UseCase, TableSchema, DepthLevel } from '../types.ts';
+import { getDefaultDepth } from '../types.ts';
+
+interface RawArchData {
+  version: string;
+  project: {
+    name: string;
+    description?: string;
+    language?: string;
+    framework?: string;
+    sourceUrl?: string;
+  };
+  nodes: RawNode[];
+  edges: RawEdge[];
+  useCases?: RawUseCase[];
+  schemas?: Record<string, TableSchema>;
+  _layout?: Record<string, { x: number; y: number }>;
+}
+
+interface RawNode {
+  id: string;
+  category: string;
+  label: string;
+  description?: string;
+  filePath?: string;
+  layer: number;
+  methods?: string[];
+  routes?: string[];
+  useCases?: string[];
+  schema?: string;
+  implements?: string;
+  externalService?: string;
+  sqlExamples?: string[];
+  depth?: number;
+}
+
+interface RawEdge {
+  source: string;
+  target: string;
+  label?: string | null;
+  type?: string;
+}
+
+interface RawUseCase {
+  id: string;
+  name: string;
+  description?: string;
+  nodeIds: string[];
+  flow?: string[];
+}
+
+export interface LoadedArchitecture {
+  projectName: string;
+  nodes: ArchFlowNode[];
+  edges: Edge[];
+  useCases: UseCase[];
+}
+
+function resolveSourceUrl(template: string | undefined, filePath: string): string {
+  if (!template || !filePath) return '';
+
+  const encoded = filePath.split('/').map(encodeURIComponent).join('/');
+  const resolved = template.replace('{filePath}', encoded);
+
+  try {
+    const url = new URL(resolved);
+    if (url.protocol !== 'http:' && url.protocol !== 'https:') return '';
+    return url.href;
+  } catch {
+    return '';
+  }
+}
+
+export async function loadArchitecture(): Promise<LoadedArchitecture> {
+  const res = await fetch('/architecture.json');
+  if (!res.ok) {
+    throw new Error(`Failed to fetch architecture.json: ${String(res.status)} ${res.statusText}`);
+  }
+  const raw: RawArchData = await res.json();
+
+  const schemas = raw.schemas ?? {};
+  const layout = raw._layout ?? {};
+  const sourceUrlTemplate = raw.project.sourceUrl;
+
+  // Convert raw nodes to React Flow nodes
+  const nodes: ArchFlowNode[] = raw.nodes.map((n) => {
+    const pos = layout[n.id] ?? { x: 0, y: 0 };
+    const resolvedSchema = n.schema ? schemas[n.schema] : undefined;
+
+    const data: ArchNodeData = {
+      label: n.label,
+      category: n.category,
+      depth: (n.depth ?? getDefaultDepth(n.category)) as DepthLevel,
+      description: n.description ?? '',
+      filePath: n.filePath ?? '',
+      sourceUrl: resolveSourceUrl(sourceUrlTemplate, n.filePath ?? ''),
+      methods: n.methods,
+      routes: n.routes,
+      useCases: n.useCases ?? [],
+      schema: resolvedSchema,
+      implements: n.implements,
+      externalService: n.externalService,
+      sqlExamples: n.sqlExamples,
+    };
+
+    return {
+      id: n.id,
+      type: 'archNode',
+      position: { x: pos.x, y: pos.y },
+      data,
+    };
+  });
+
+  // Convert raw edges to React Flow edges
+  const edges: Edge[] = raw.edges.map((e) => ({
+    id: `${e.source}->${e.target}`,
+    source: e.source,
+    target: e.target,
+    label: e.label ?? undefined,
+    style: { stroke: 'var(--color-edge-stroke)', strokeWidth: 1.5 },
+    type: 'smoothstep',
+  }));
+
+  // Convert use cases
+  const useCases: UseCase[] = (raw.useCases ?? []).map((uc) => ({
+    id: uc.id,
+    name: uc.name,
+    description: uc.description ?? '',
+    nodeIds: uc.nodeIds,
+    flow: uc.flow,
+  }));
+
+  return {
+    projectName: raw.project.name,
+    nodes,
+    edges,
+    useCases,
+  };
+}

package/dist/viewer-template/src/hooks/useArchitecture.ts

@@ -0,0 +1,32 @@
+import { useEffect, useState } from 'react';
+import { useNodesState, useEdgesState } from '@xyflow/react';
+import type { Edge } from '@xyflow/react';
+
+import type { ArchFlowNode, UseCase } from '../types.ts';
+import { loadArchitecture } from '../data/loader.ts';
+
+export function useArchitecture() {
+  const [nodes, setNodes, onNodesChange] = useNodesState<ArchFlowNode>([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
+  const [useCases, setUseCases] = useState<UseCase[]>([]);
+  const [projectName, setProjectName] = useState('Architecture Viewer');
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    loadArchitecture()
+      .then((arch) => {
+        setNodes(arch.nodes);
+        setEdges(arch.edges);
+        setUseCases(arch.useCases);
+        setProjectName(arch.projectName);
+        setLoading(false);
+      })
+      .catch((err: unknown) => {
+        setError(err instanceof Error ? err.message : 'Failed to load architecture.json');
+        setLoading(false);
+      });
+  }, [setNodes, setEdges]);
+
+  return { nodes, edges, useCases, projectName, loading, error, setNodes, setEdges, onNodesChange, onEdgesChange };
+}

package/dist/viewer-template/src/hooks/useDepthFilter.ts

@@ -0,0 +1,37 @@
+import { useMemo } from 'react';
+import { useQueryState, parseAsInteger } from 'nuqs';
+import type { Edge } from '@xyflow/react';
+
+import type { ArchFlowNode, DepthLevel } from '../types.ts';
+
+function clampDepth(value: number): DepthLevel {
+  if (value <= 0) return 0;
+  if (value >= 2) return 2;
+  return value as DepthLevel;
+}
+
+export function useDepthFilter(nodes: ArchFlowNode[], edges: Edge[]) {
+  const [rawDepth, setRawDepth] = useQueryState('depth', parseAsInteger.withDefault(2).withOptions({ history: 'replace' }));
+  const depthLevel = clampDepth(rawDepth);
+
+  const setDepthLevel = (level: DepthLevel) => {
+    void setRawDepth(level);
+  };
+
+  const visibleNodes = useMemo(
+    () => nodes.map((node) => ({ ...node, hidden: node.data.depth > depthLevel })),
+    [nodes, depthLevel],
+  );
+
+  const visibleEdges = useMemo(() => {
+    const hiddenIds = new Set(
+      visibleNodes.filter((n) => n.hidden).map((n) => n.id),
+    );
+    return edges.map((edge) => ({
+      ...edge,
+      hidden: hiddenIds.has(edge.source) || hiddenIds.has(edge.target),
+    }));
+  }, [visibleNodes, edges]);
+
+  return { depthLevel, setDepthLevel, visibleNodes, visibleEdges };
+}

package/dist/viewer-template/src/hooks/useTheme.ts

@@ -0,0 +1,39 @@
+import { useCallback, useEffect } from 'react';
+import { useQueryState, parseAsStringLiteral } from 'nuqs';
+
+type Theme = 'light' | 'dark';
+
+const STORAGE_KEY = 'archrip-theme';
+const THEME_VALUES = ['light', 'dark'] as const;
+
+function resolveTheme(urlTheme: string | null): Theme {
+  // 1. URL query parameter — highest priority
+  if (urlTheme === 'light' || urlTheme === 'dark') return urlTheme;
+  // 2. localStorage
+  const stored = localStorage.getItem(STORAGE_KEY);
+  if (stored === 'dark' || stored === 'light') return stored;
+  // 3. System preference
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+
+export function useTheme() {
+  const [urlTheme, setUrlTheme] = useQueryState('theme', parseAsStringLiteral(THEME_VALUES).withOptions({ history: 'replace' }));
+  const theme = resolveTheme(urlTheme);
+
+  useEffect(() => {
+    const root = document.documentElement;
+    if (theme === 'dark') {
+      root.classList.add('dark');
+    } else {
+      root.classList.remove('dark');
+    }
+    localStorage.setItem(STORAGE_KEY, theme);
+  }, [theme]);
+
+  const toggleTheme = useCallback(() => {
+    const next: Theme = theme === 'dark' ? 'light' : 'dark';
+    void setUrlTheme(next);
+  }, [theme, setUrlTheme]);
+
+  return { theme, toggleTheme } as const;
+}

package/dist/viewer-template/src/hooks/useUseCaseFilter.ts

@@ -0,0 +1,56 @@
+import { useMemo } from 'react';
+import { useQueryState, parseAsString } from 'nuqs';
+import type { Edge } from '@xyflow/react';
+
+import type { ArchFlowNode, UseCase } from '../types.ts';
+
+export function useUseCaseFilter(nodes: ArchFlowNode[], edges: Edge[], useCases: UseCase[]) {
+  const [selectedUseCase, setSelectedUseCase] = useQueryState('uc', parseAsString.withOptions({ history: 'replace' }));
+
+  const categories = useMemo(() => {
+    const set = new Set<string>();
+    for (const node of nodes) {
+      if (!node.hidden) set.add(node.data.category);
+    }
+    return Array.from(set);
+  }, [nodes]);
+
+  const filteredNodes = useMemo(() => {
+    if (!selectedUseCase) return nodes;
+    const uc = useCases.find((u) => u.id === selectedUseCase);
+    if (!uc) return nodes;
+    const activeIds = new Set(uc.nodeIds);
+    return nodes.map((node) => {
+      if (node.hidden) return node;
+      return {
+        ...node,
+        style: {
+          ...node.style,
+          opacity: activeIds.has(node.id) ? 1 : 0.15,
+          transition: 'opacity 0.3s',
+        },
+      };
+    });
+  }, [nodes, selectedUseCase, useCases]);
+
+  const filteredEdges = useMemo(() => {
+    if (!selectedUseCase) return edges;
+    const uc = useCases.find((u) => u.id === selectedUseCase);
+    if (!uc) return edges;
+    const activeIds = new Set(uc.nodeIds);
+    return edges.map((edge) => ({
+      ...edge,
+      style: {
+        ...edge.style,
+        opacity: activeIds.has(edge.source) && activeIds.has(edge.target) ? 1 : 0.08,
+        transition: 'opacity 0.3s',
+      },
+      labelStyle: {
+        ...((edge.labelStyle as Record<string, unknown>) ?? {}),
+        opacity: activeIds.has(edge.source) && activeIds.has(edge.target) ? 1 : 0,
+      },
+    }));
+  }, [edges, selectedUseCase, useCases]);
+
+  return { selectedUseCase, setSelectedUseCase, categories, filteredNodes, filteredEdges };
+}

package/dist/viewer-template/src/index.css

@@ -0,0 +1,130 @@
+@import "tailwindcss";
+
+/* Class-based dark mode (instead of media query) */
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* ─── Design Tokens (Light) ─── */
+:root {
+  /* Surface */
+  --color-surface-canvas: #f8fafc;
+  --color-surface-primary: #ffffff;
+  --color-surface-secondary: #f1f5f9;
+  --color-surface-tertiary: #e2e8f0;
+
+  /* Content */
+  --color-content-primary: #0f172a;
+  --color-content-secondary: #475569;
+  --color-content-tertiary: #94a3b8;
+  --color-content-inverse: #ffffff;
+
+  /* Border */
+  --color-border-primary: #e2e8f0;
+  --color-border-secondary: #cbd5e1;
+  --color-border-focus: #3b82f6;
+
+  /* Interactive */
+  --color-interactive-primary: #2563eb;
+  --color-interactive-hover: #1d4ed8;
+
+  /* Edge */
+  --color-edge-stroke: #94a3b8;
+
+  /* Shadows */
+  --shadow-panel: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
+  --shadow-node: 0 1px 3px rgba(0, 0, 0, 0.1);
+  --shadow-node-selected: 0 0 0 2px rgba(37, 99, 235, 0.25);
+
+  /* Category colors (light) */
+  --cat-controller-bg: #dbeafe;
+  --cat-controller-border: #3b82f6;
+  --cat-controller-text: #1e40af;
+  --cat-service-bg: #dcfce7;
+  --cat-service-border: #22c55e;
+  --cat-service-text: #166534;
+  --cat-port-bg: #ede9fe;
+  --cat-port-border: #8b5cf6;
+  --cat-port-text: #5b21b6;
+  --cat-adapter-bg: #ffedd5;
+  --cat-adapter-border: #f97316;
+  --cat-adapter-text: #9a3412;
+  --cat-model-bg: #fee2e2;
+  --cat-model-border: #ef4444;
+  --cat-model-text: #991b1b;
+  --cat-external-bg: #f3f4f6;
+  --cat-external-border: #6b7280;
+  --cat-external-text: #374151;
+  --cat-job-bg: #fef9c3;
+  --cat-job-border: #eab308;
+  --cat-job-text: #854d0e;
+  --cat-dto-bg: #cffafe;
+  --cat-dto-border: #06b6d4;
+  --cat-dto-text: #155e75;
+  --cat-fallback-bg: #f5f5f4;
+  --cat-fallback-border: #a8a29e;
+  --cat-fallback-text: #44403c;
+}
+
+/* ─── Design Tokens (Dark) ─── */
+.dark {
+  --color-surface-canvas: #0c0f14;
+  --color-surface-primary: #151921;
+  --color-surface-secondary: #1e2330;
+  --color-surface-tertiary: #2a3040;
+
+  --color-content-primary: #f1f5f9;
+  --color-content-secondary: #94a3b8;
+  --color-content-tertiary: #64748b;
+  --color-content-inverse: #0f172a;
+
+  --color-border-primary: #2a3040;
+  --color-border-secondary: #334155;
+  --color-border-focus: #60a5fa;
+
+  --color-interactive-primary: #3b82f6;
+  --color-interactive-hover: #60a5fa;
+
+  --color-edge-stroke: #475569;
+
+  --shadow-panel: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
+  --shadow-node: 0 1px 3px rgba(0, 0, 0, 0.3);
+  --shadow-node-selected: 0 0 0 2px rgba(96, 165, 250, 0.3);
+
+  /* Category colors (dark) */
+  --cat-controller-bg: #1e293b;
+  --cat-controller-border: #60a5fa;
+  --cat-controller-text: #93c5fd;
+  --cat-service-bg: #14291a;
+  --cat-service-border: #4ade80;
+  --cat-service-text: #86efac;
+  --cat-port-bg: #1e1533;
+  --cat-port-border: #a78bfa;
+  --cat-port-text: #c4b5fd;
+  --cat-adapter-bg: #2b1a0a;
+  --cat-adapter-border: #fb923c;
+  --cat-adapter-text: #fdba74;
+  --cat-model-bg: #2b1111;
+  --cat-model-border: #f87171;
+  --cat-model-text: #fca5a5;
+  --cat-external-bg: #1e2330;
+  --cat-external-border: #9ca3af;
+  --cat-external-text: #d1d5db;
+  --cat-job-bg: #2b2506;
+  --cat-job-border: #facc15;
+  --cat-job-text: #fde68a;
+  --cat-dto-bg: #0b2528;
+  --cat-dto-border: #22d3ee;
+  --cat-dto-text: #67e8f9;
+  --cat-fallback-bg: #1c1917;
+  --cat-fallback-border: #a8a29e;
+  --cat-fallback-text: #d6d3d1;
+}
+
+html,
+body,
+#root {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  font-family: system-ui, -apple-system, sans-serif;
+}

package/dist/viewer-template/src/main.tsx

@@ -0,0 +1,13 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { NuqsAdapter } from 'nuqs/adapters/react'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <NuqsAdapter>
+      <App />
+    </NuqsAdapter>
+  </StrictMode>,
+)

package/dist/viewer-template/src/types.ts

@@ -0,0 +1,125 @@
+// ─── Depth system ───
+
+export type DepthLevel = 0 | 1 | 2;
+
+const CATEGORY_DEPTH: Record<string, DepthLevel> = {
+  controller: 0, external: 0,
+  service: 1, port: 1, job: 1,
+  adapter: 2, model: 2, dto: 2,
+};
+
+export function getDefaultDepth(category: string): DepthLevel {
+  return CATEGORY_DEPTH[category] ?? 1;
+}
+
+export const DEPTH_LEVELS = [
+  { level: 0 as const, label: 'Overview' },
+  { level: 1 as const, label: 'Structure' },
+  { level: 2 as const, label: 'Detail' },
+] as const;
+
+// ─── Category system ───
+// Standard 8 categories. Custom categories are allowed — they get a fallback color.
+
+export interface CategoryStyle {
+  bg: string;
+  border: string;
+  text: string;
+}
+
+interface CategoryMeta {
+  label: string;
+  icon: string;
+  color: CategoryStyle;
+}
+
+const CATEGORY_META = {
+  controller: { label: 'Controller', icon: '\u{1F310}', color: { bg: '#dbeafe', border: '#3b82f6', text: '#1e40af' } },
+  service:    { label: 'Service',    icon: '\u{2699}\u{FE0F}', color: { bg: '#dcfce7', border: '#22c55e', text: '#166534' } },
+  port:       { label: 'Port',       icon: '\u{1F50C}', color: { bg: '#ede9fe', border: '#8b5cf6', text: '#5b21b6' } },
+  adapter:    { label: 'Adapter',    icon: '\u{1F527}', color: { bg: '#ffedd5', border: '#f97316', text: '#9a3412' } },
+  model:      { label: 'Model / DB', icon: '\u{1F4BE}', color: { bg: '#fee2e2', border: '#ef4444', text: '#991b1b' } },
+  external:   { label: 'External',   icon: '\u{2601}\u{FE0F}', color: { bg: '#f3f4f6', border: '#6b7280', text: '#374151' } },
+  job:        { label: 'Job',        icon: '\u{23F0}', color: { bg: '#fef9c3', border: '#eab308', text: '#854d0e' } },
+  dto:        { label: 'DTO',        icon: '\u{1F4E6}', color: { bg: '#cffafe', border: '#06b6d4', text: '#155e75' } },
+} as const satisfies Record<string, CategoryMeta>;
+
+export type StandardCategory = keyof typeof CATEGORY_META;
+
+const FALLBACK_META: CategoryMeta = { label: '', icon: '\u{1F4C4}', color: { bg: '#f5f5f4', border: '#a8a29e', text: '#44403c' } };
+
+function getMeta(category: string): CategoryMeta {
+  return CATEGORY_META[category as StandardCategory] ?? FALLBACK_META;
+}
+
+const STANDARD_CATEGORIES = ['controller', 'service', 'port', 'adapter', 'model', 'external', 'job', 'dto'] as const;
+
+export function getCategoryColors(category: string): CategoryStyle {
+  const key = (STANDARD_CATEGORIES as readonly string[]).includes(category) ? category : 'fallback';
+  return {
+    bg: `var(--cat-${key}-bg)`,
+    border: `var(--cat-${key}-border)`,
+    text: `var(--cat-${key}-text)`,
+  };
+}
+
+export function getCategoryLabel(category: string): string {
+  const meta = getMeta(category);
+  return meta.label || category.charAt(0).toUpperCase() + category.slice(1);
+}
+
+export function getCategoryIcon(category: string): string {
+  return getMeta(category).icon;
+}
+
+// ─── React Flow node type alias ───
+
+import type { Node } from '@xyflow/react';
+
+// ─── Data types ───
+// Keep in sync with packages/cli/src/utils/validate.ts (ColumnSchema, TableSchema)
+
+export interface ColumnSchema {
+  name: string;
+  type: string;
+  nullable?: boolean;
+  default?: string;
+  index?: string;
+  foreignKey?: { table: string; column: string; onDelete?: string };
+}
+
+export interface TableSchema {
+  tableName: string;
+  columns: ColumnSchema[];
+  indexes?: string[];
+  enumValues?: Record<string, Record<string, string>>;
+}
+
+export interface ArchNodeData {
+  [key: string]: unknown;
+  label: string;
+  category: string;
+  depth: DepthLevel;
+  description: string;
+  filePath: string;
+  sourceUrl: string;
+  methods?: string[];
+  useCases: string[];
+  schema?: TableSchema;
+  sqlExamples?: string[];
+  routes?: string[];
+  implements?: string;
+  externalService?: string;
+}
+
+export interface UseCase {
+  id: string;
+  name: string;
+  description: string;
+  nodeIds: string[];
+  flow?: string[];
+}
+
+// ─── React Flow typed node ───
+
+export type ArchFlowNode = Node<ArchNodeData>;

package/dist/viewer-template/tsconfig.app.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/dist/viewer-template/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/dist/viewer-template/tsconfig.node.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/dist/viewer-template/vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+})

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "archrip",
+  "version": "0.1.2",
+  "description": "Generate interactive architecture diagrams from your codebase using AI agents",
+  "type": "module",
+  "bin": {
+    "archrip": "./dist/index.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc && npm run copy-templates",
+    "copy-templates": "cp -r src/templates dist/ && cp -r src/schema dist/ && node scripts/copy-viewer.js",
+    "typecheck": "tsc --noEmit",
+    "dev": "tsc --watch",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "keywords": [
+    "architecture",
+    "diagram",
+    "code-analysis",
+    "react-flow",
+    "cli",
+    "ai"
+  ],
+  "author": "Yuto Ida",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/yida29/archrip"
+  },
+  "dependencies": {
+    "@dagrejs/dagre": "^1.1.4"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "typescript": "~5.8.0",
+    "vitest": "^3.0.0"
+  },
+  "engines": {
+    "node": ">=20"
+  }
+}