diff --git a/styles/src/element/interactive/index.ts b/styles/src/element/index.ts
similarity index 100%
rename from styles/src/element/interactive/index.ts
rename to styles/src/element/index.ts
diff --git a/styles/src/element/interactive/interactive.test.ts b/styles/src/element/interactive.test.ts
similarity index 100%
rename from styles/src/element/interactive/interactive.test.ts
rename to styles/src/element/interactive.test.ts
diff --git a/styles/src/element/interactive/interactive.ts b/styles/src/element/interactive.ts
similarity index 100%
rename from styles/src/element/interactive/interactive.ts
rename to styles/src/element/interactive.ts
diff --git a/styles/src/styleTree/assistant.ts b/styles/src/styleTree/assistant.ts
index b31fe8169e..6ebf648481 100644
--- a/styles/src/styleTree/assistant.ts
+++ b/styles/src/styleTree/assistant.ts
@@ -1,7 +1,7 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { text, border, background, foreground } from "./components"
 import editor from "./editor"
-import { interactive } from "../element/interactive"
+import { interactive } from "../element"
 
 export default function assistant(colorScheme: ColorScheme) {
     const layer = colorScheme.highest
diff --git a/styles/src/styleTree/commandPalette.ts b/styles/src/styleTree/commandPalette.ts
index 081a0ba68c..8634d08a90 100644
--- a/styles/src/styleTree/commandPalette.ts
+++ b/styles/src/styleTree/commandPalette.ts
@@ -2,7 +2,7 @@ import { ColorScheme } from "../theme/colorScheme"
 import { withOpacity } from "../theme/color"
 import { text, background } from "./components"
 import { toggleable } from "./toggle"
-import { interactive } from "../element/interactive"
+import { interactive } from "../element"
 
 export default function commandPalette(colorScheme: ColorScheme) {
     let layer = colorScheme.highest
diff --git a/styles/src/styleTree/contactList.ts b/styles/src/styleTree/contactList.ts
index 3b95a3c885..f038d79716 100644
--- a/styles/src/styleTree/contactList.ts
+++ b/styles/src/styleTree/contactList.ts
@@ -1,7 +1,7 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { background, border, borderColor, foreground, text } from "./components"
 import { toggleable } from "./toggle"
-import { interactive } from "../element/interactive"
+import { interactive } from "../element"
 export default function contactsPanel(colorScheme: ColorScheme) {
     const nameMargin = 8
     const sidePadding = 12
diff --git a/styles/src/styleTree/contactNotification.ts b/styles/src/styleTree/contactNotification.ts
index 4d57239005..7de3f2fe0c 100644
--- a/styles/src/styleTree/contactNotification.ts
+++ b/styles/src/styleTree/contactNotification.ts
@@ -1,6 +1,6 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { background, foreground, text } from "./components"
-import { interactive } from "../element/interactive"
+import { interactive } from "../element"
 const avatarSize = 12
 const headerPadding = 8
 
diff --git a/styles/src/styleTree/contextMenu.ts b/styles/src/styleTree/contextMenu.ts
index 51bff9de7f..21231ccac9 100644
--- a/styles/src/styleTree/contextMenu.ts
+++ b/styles/src/styleTree/contextMenu.ts
@@ -1,6 +1,6 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { background, border, borderColor, text } from "./components"
-import { interactive } from "../element/interactive"
+import { interactive } from "../element"
 import { toggleable } from "./toggle"
 
 export default function contextMenu(colorScheme: ColorScheme) {
diff --git a/styles/src/styleTree/copilot.ts b/styles/src/styleTree/copilot.ts
index 27ef5ec11c..9229761414 100644
--- a/styles/src/styleTree/copilot.ts
+++ b/styles/src/styleTree/copilot.ts
@@ -1,6 +1,6 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { background, border, foreground, svg, text } from "./components"
-import { interactive } from "../element/interactive"
+import { interactive } from "../element"
 export default function copilot(colorScheme: ColorScheme) {
     let layer = colorScheme.middle
 
diff --git a/styles/src/styleTree/editor.ts b/styles/src/styleTree/editor.ts
index 3612a0acd1..5a55341933 100644
--- a/styles/src/styleTree/editor.ts
+++ b/styles/src/styleTree/editor.ts
@@ -4,7 +4,7 @@ import { background, border, borderColor, foreground, text } from "./components"
 import hoverPopover from "./hoverPopover"
 
 import { buildSyntax } from "../theme/syntax"
-import { interactive } from "../element/interactive"
+import { interactive } from "../element"
 import { toggleable } from "./toggle"
 
 export default function editor(colorScheme: ColorScheme) {
diff --git a/styles/src/styleTree/feedback.ts b/styles/src/styleTree/feedback.ts
index 19a8f1e4c7..4f0e99844d 100644
--- a/styles/src/styleTree/feedback.ts
+++ b/styles/src/styleTree/feedback.ts
@@ -1,6 +1,6 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { background, border, text } from "./components"
-import { interactive } from "../element/interactive"
+import { interactive } from "../element"
 
 export default function feedback(colorScheme: ColorScheme) {
     let layer = colorScheme.highest
diff --git a/styles/src/styleTree/picker.ts b/styles/src/styleTree/picker.ts
index 3bcdae584f..940059eb43 100644
--- a/styles/src/styleTree/picker.ts
+++ b/styles/src/styleTree/picker.ts
@@ -2,7 +2,7 @@ import { ColorScheme } from "../theme/colorScheme"
 import { withOpacity } from "../theme/color"
 import { background, border, text } from "./components"
 import { toggleable } from "./toggle"
-import { interactive } from "../element/interactive"
+import { interactive } from "../element"
 
 export default function picker(colorScheme: ColorScheme): any {
     let layer = colorScheme.lowest
diff --git a/styles/src/styleTree/projectPanel.ts b/styles/src/styleTree/projectPanel.ts
index 132dfe102c..5df3988be6 100644
--- a/styles/src/styleTree/projectPanel.ts
+++ b/styles/src/styleTree/projectPanel.ts
@@ -1,7 +1,7 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { withOpacity } from "../theme/color"
 import { background, border, foreground, text } from "./components"
-import { interactive } from "../element/interactive"
+import { interactive } from "../element"
 import { toggleable } from "./toggle"
 export default function projectPanel(colorScheme: ColorScheme) {
     const { isLight } = colorScheme
diff --git a/styles/src/styleTree/search.ts b/styles/src/styleTree/search.ts
index 1f63d2740b..64f17e7d74 100644
--- a/styles/src/styleTree/search.ts
+++ b/styles/src/styleTree/search.ts
@@ -1,7 +1,7 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { withOpacity } from "../theme/color"
 import { background, border, foreground, text } from "./components"
-import { interactive } from "../element/interactive"
+import { interactive } from "../element"
 import { toggleable } from "./toggle"
 
 export default function search(colorScheme: ColorScheme) {
diff --git a/styles/src/styleTree/simpleMessageNotification.ts b/styles/src/styleTree/simpleMessageNotification.ts
index 4c2abfcf9d..404be2da7e 100644
--- a/styles/src/styleTree/simpleMessageNotification.ts
+++ b/styles/src/styleTree/simpleMessageNotification.ts
@@ -1,6 +1,6 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { background, border, foreground, text } from "./components"
-import { interactive } from "../element/interactive"
+import { interactive } from "../element"
 
 const headerPadding = 8
 
diff --git a/styles/src/styleTree/statusBar.ts b/styles/src/styleTree/statusBar.ts
index ee78f5e6b3..30f933de8c 100644
--- a/styles/src/styleTree/statusBar.ts
+++ b/styles/src/styleTree/statusBar.ts
@@ -1,6 +1,6 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { background, border, foreground, text } from "./components"
-import { interactive } from "../element/interactive"
+import { interactive } from "../element"
 import { toggleable } from "./toggle"
 export default function statusBar(colorScheme: ColorScheme) {
     let layer = colorScheme.lowest
diff --git a/styles/src/styleTree/tabBar.ts b/styles/src/styleTree/tabBar.ts
index 8011a70772..ae2d14bfd6 100644
--- a/styles/src/styleTree/tabBar.ts
+++ b/styles/src/styleTree/tabBar.ts
@@ -2,7 +2,7 @@ import { ColorScheme } from "../theme/colorScheme"
 import { withOpacity } from "../theme/color"
 import { text, border, background, foreground } from "./components"
 import { toggleable } from "./toggle"
-import { interactive } from "../element/interactive"
+import { interactive } from "../element"
 
 export default function tabBar(colorScheme: ColorScheme) {
     const height = 32
diff --git a/styles/src/styleTree/toolbarDropdownMenu.ts b/styles/src/styleTree/toolbarDropdownMenu.ts
index 0bb3958dc8..bb3e8eda0c 100644
--- a/styles/src/styleTree/toolbarDropdownMenu.ts
+++ b/styles/src/styleTree/toolbarDropdownMenu.ts
@@ -1,6 +1,6 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { background, border, text } from "./components"
-import { interactive } from "../element/interactive"
+import { interactive } from "../element"
 import { toggleable } from "./toggle"
 export default function dropdownMenu(colorScheme: ColorScheme) {
     let layer = colorScheme.middle
diff --git a/styles/src/styleTree/updateNotification.ts b/styles/src/styleTree/updateNotification.ts
index a7a5aaabaa..0cef7fa805 100644
--- a/styles/src/styleTree/updateNotification.ts
+++ b/styles/src/styleTree/updateNotification.ts
@@ -1,6 +1,6 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { foreground, text } from "./components"
-import { interactive } from "../element/interactive"
+import { interactive } from "../element"
 
 const headerPadding = 8
 
diff --git a/styles/src/styleTree/welcome.ts b/styles/src/styleTree/welcome.ts
index f0e4badf3f..a0d599b747 100644
--- a/styles/src/styleTree/welcome.ts
+++ b/styles/src/styleTree/welcome.ts
@@ -8,7 +8,7 @@ import {
     TextProperties,
     svg,
 } from "./components"
-import { interactive } from "../element/interactive"
+import { interactive } from "../element"
 
 export default function welcome(colorScheme: ColorScheme) {
     let layer = colorScheme.highest
diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts
index fa2d337592..1045be1a9a 100644
--- a/styles/src/styleTree/workspace.ts
+++ b/styles/src/styleTree/workspace.ts
@@ -11,7 +11,7 @@ import {
 } from "./components"
 import statusBar from "./statusBar"
 import tabBar from "./tabBar"
-import { interactive } from "../element/interactive"
+import { interactive } from "../element"
 import merge from 'ts-deepmerge';
 export default function workspace(colorScheme: ColorScheme) {
     const layer = colorScheme.lowest
diff --git a/styles/tsconfig.json b/styles/tsconfig.json
index 6d24728a0a..051626adbc 100644
--- a/styles/tsconfig.json
+++ b/styles/tsconfig.json
@@ -20,7 +20,33 @@
         "noFallthroughCasesInSwitch": false,
         "experimentalDecorators": true,
         "strictPropertyInitialization": false,
-        "skipLibCheck": true
+        "skipLibCheck": true,
+        "baseUrl": ".",
+        "paths": {
+            "@/*": [
+                "./*"
+            ],
+            "@element/*": [
+                "./src/element/*"
+            ],
+            "@component/*": [
+                "./src/component/*"
+            ],
+            "@styleTree/*": [
+                "./src/styleTree/*"
+            ],
+            "@theme/*": [
+                "./src/theme/*"
+            ],
+            "@themes/*": [
+                "./src/themes/*"
+            ],
+            "@util/*": [
+                "./src/util/*"
+            ]
+        }
     },
-    "exclude": ["node_modules"]
+    "exclude": [
+        "node_modules"
+    ]
 }