From a643f24452075be5be5b354ef8e47c3c7c8ec240 Mon Sep 17 00:00:00 2001
From: tymurbaniak <tymentos@gmail.com>
Date: Sat, 28 Feb 2026 01:10:14 +0100
Subject: [PATCH] tsc fixes and rules

---
 .continue/rules/general.md         | 12 ++++++++++++
 src/App.tsx                        |  6 +++---
 src/Graphviz.tsx                   |  4 +++-
 src/components/Graph.tsx           |  6 +++---
 src/components/NodeContextMenu.tsx |  4 ++--
 src/stores/TreeStore.tsx           |  3 +--
 tsconfig.app.json                  |  4 ++--
 7 files changed, 26 insertions(+), 13 deletions(-)
 create mode 100644 .continue/rules/general.md

diff --git a/.continue/rules/general.md b/.continue/rules/general.md
new file mode 100644
index 0000000..6c0ed96
--- /dev/null
+++ b/.continue/rules/general.md
@@ -0,0 +1,12 @@
+# Project Architecture
+
+This is a React application with:
+
+- Components in `/src/components`
+- State management using zustand in `/src/stores`
+
+## Coding Standards
+
+- Use TypeScript for all new files
+- Follow the existing naming conventions
+- Write tests for all new features
diff --git a/src/App.tsx b/src/App.tsx
index 9be117a..9ba79f2 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,6 @@
-import React, { createContext, useEffect, useEffectEvent, useState } from 'react';
-import { Layout, theme, Breadcrumb, Button, Space, Tree, type TreeDataNode } from 'antd';
-import Graph, { GraphModel } from './components/Graph';
+import React, { useEffect, useEffectEvent, useState } from 'react';
+import { Layout, theme, Breadcrumb, Button, Space, Tree } from 'antd';
+import Graph from './components/Graph';
 import type { BreadcrumbItemType } from 'antd/es/breadcrumb/Breadcrumb';
 import { useKeysdownStore } from './stores/ArrayStore';
 import {
diff --git a/src/Graphviz.tsx b/src/Graphviz.tsx
index 72ab7da..f178858 100644
--- a/src/Graphviz.tsx
+++ b/src/Graphviz.tsx
@@ -1,4 +1,6 @@
-export function graphToDot(g) {
+import type { GraphModel } from "./components/Graph";
+
+export function graphToDot(g: GraphModel): string {
   // Directed graph, use neato layout so we can use pos attributes
   const lines = [];
   lines.push('digraph G {');
diff --git a/src/components/Graph.tsx b/src/components/Graph.tsx
index 8478318..bd203dc 100644
--- a/src/components/Graph.tsx
+++ b/src/components/Graph.tsx
@@ -103,7 +103,7 @@ export default function Graph({ setGraphPath }: { setGraphPath: React.Dispatch<R
       graphsPath.push(createPathSegment(nodeContext.nodeId, nodeContext.nodeName));
       setGraphsPath([...graphsPath])
     }
-    const state = useGraphsStore.getState();
+    const state = useGraphsStore.getState() as { graphsById: Map<string, GraphModel> };
     const graphsById = state.graphsById;
     const graph = graphsById.get(graphId);
     if (graph) {
@@ -118,8 +118,8 @@ export default function Graph({ setGraphPath }: { setGraphPath: React.Dispatch<R
       const svgElement = await viz.renderSVGElement(dot, { engine: 'dot' });
       const container = containerRef.current;
       if (!container) return;
-      container.innerHTML = '';
-      container.appendChild(svgElement);
+      (container as HTMLElement).innerHTML = '';
+      (container as HTMLElement).appendChild(svgElement);
       attachInteractions(svgElement);
     } catch (e) {
       console.error('Viz render error', e);
diff --git a/src/components/NodeContextMenu.tsx b/src/components/NodeContextMenu.tsx
index 6cdc0ce..9da7ee8 100644
--- a/src/components/NodeContextMenu.tsx
+++ b/src/components/NodeContextMenu.tsx
@@ -1,5 +1,5 @@
 import { Dropdown, type MenuProps } from "antd";
-import { defaultGraph, graphContext, type EdgeModel, type NodeContext } from "./Graph";
+import { defaultGraph, graphContext, GraphModel, type EdgeModel, type NodeContext } from "./Graph";
 import { useContext } from "react";
 import { cloneDeep } from "lodash";
 import { useGraphsStore } from "../stores/GraphsStore";
@@ -39,7 +39,7 @@ export default function NodeContextMenu({
   }
 
   const graphContextValue = useContext(graphContext)!;
-  const graphsById = useGraphsStore((s) => s.graphsById);
+  const graphsById = useGraphsStore((s) => (s as { graphsById: Map<string, GraphModel> }).graphsById);
   const addTreeNode = useGraphLayersTreeStore(store => store.add);
 
   function contextMenuOpenChange(open: boolean) {
diff --git a/src/stores/TreeStore.tsx b/src/stores/TreeStore.tsx
index 5ec8470..38afa6a 100644
--- a/src/stores/TreeStore.tsx
+++ b/src/stores/TreeStore.tsx
@@ -1,5 +1,4 @@
 import type { TreeDataNode } from "antd";
-import { cloneDeep } from "lodash";
 import React from "react";
 import { create } from "zustand";
 import type { NodeContext } from "../components/Graph";
@@ -13,7 +12,7 @@ export interface TreeStore {
   remove: (nodeId: string) => void;
 }
 
-export const useGraphLayersTreeStore = create<TreeStore>()((set, get) => ({
+export const useGraphLayersTreeStore = create<TreeStore>()((set) => ({
   nodesFlatById: new Map<React.Key, TreeDataNode>(),
   parentIdByChildId: new Map<React.Key, string>(),
   rootNodes: [],
diff --git a/tsconfig.app.json b/tsconfig.app.json
index a9b5a59..8608d68 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -1,9 +1,9 @@
 {
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "ES2022",
+    "target": "es2020",
     "useDefineForClassFields": true,
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "types": ["vite/client"],
     "skipLibCheck": true,