From ee9e6c09bdd2b9c071198dc986ae111d6f0967aa Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Fri, 23 Aug 2024 11:26:56 +0000
Subject: [PATCH 01/30] feat: Feature flags

---
 src/ui/src/builder/BuilderHeader.vue | 21 +++++++++++++++++----
 src/ui/src/core/index.ts             |  7 +++++++
 src/writer/app_runner.py             |  3 ++-
 src/writer/core.py                   |  1 +
 src/writer/serve.py                  |  6 ++++--
 src/writer/ss_types.py               |  2 ++
 tests/backend/test_serve.py          | 16 ++++++++++++++++
 tests/backend/testapp/main.py        |  2 ++
 8 files changed, 51 insertions(+), 7 deletions(-)

diff --git a/src/ui/src/builder/BuilderHeader.vue b/src/ui/src/builder/BuilderHeader.vue
index d2bae0061..34e0a22a1 100644
--- a/src/ui/src/builder/BuilderHeader.vue
+++ b/src/ui/src/builder/BuilderHeader.vue
@@ -82,16 +82,29 @@ const animate = () => {
 };
 
 const syncHealthStatus = () => {
+	let s = "";
+	const featureFlags = wf.getFeatureFlags();
+
 	switch (wf.syncHealth.value) {
 		case "offline":
-			return "Offline. Not syncing.";
+			s += "Offline. Not syncing.";
+			break;
 		case "connected":
-			return "Online. Syncing...";
+			s += "Online. Syncing...";
+			break;
 		case "idle":
-			return "Sync not initialised.";
+			s += "Sync not initialised.";
+			break;
 		case "suspended":
-			return "Sync suspended.";
+			s += "Sync suspended.";
+			break;
+	}
+
+	if (featureFlags.length > 0) {
+		s += ` Feature flags: ${featureFlags.join(", ")}`;
 	}
+
+	return s;
 };
 
 function showStateExplorer() {
diff --git a/src/ui/src/core/index.ts b/src/ui/src/core/index.ts
index 04c434292..e9b0ff906 100644
--- a/src/ui/src/core/index.ts
+++ b/src/ui/src/core/index.ts
@@ -24,6 +24,7 @@ export function generateCore() {
 	let sessionId: string = null;
 	const sessionTimestamp: Ref<number> = ref(null);
 	const mode: Ref<"run" | "edit"> = ref(null);
+	const featureFlags: Ref<string[]> = ref([]);
 	const runCode: Ref<string> = ref(null);
 	const components: Ref<ComponentMap> = ref({});
 	const userFunctions: Ref<UserFunction[]> = ref([]);
@@ -98,6 +99,7 @@ export function generateCore() {
 		collateMail(initData.mail);
 		sessionId = initData.sessionId;
 		sessionTimestamp.value = new Date().getTime();
+		featureFlags.value = initData.featureFlags;
 
 		// Only returned for edit (Builder) mode
 
@@ -567,6 +569,10 @@ export function generateCore() {
 		return userState.value;
 	}
 
+	function getFeatureFlags() {
+		return featureFlags.value;
+	}
+
 	const core = {
 		webSocket,
 		syncHealth,
@@ -594,6 +600,7 @@ export function generateCore() {
 		getSessionTimestamp,
 		getUserState,
 		isChildOf,
+		getFeatureFlags,
 	};
 
 	return core;
diff --git a/src/writer/app_runner.py b/src/writer/app_runner.py
index a6a35738b..f91b7b06e 100644
--- a/src/writer/app_runner.py
+++ b/src/writer/app_runner.py
@@ -150,7 +150,8 @@ def _handle_session_init(self, payload: InitSessionRequestPayload) -> InitSessio
             sessionId=session.session_id,
             mail=session.session_state.mail,
             components=session.session_component_tree.to_dict(),
-            userFunctions=self._get_user_functions()
+            userFunctions=self._get_user_functions(),
+            featureFlags=writer.Config.feature_flags
         )
 
         session.session_state.clear_mail()
diff --git a/src/writer/core.py b/src/writer/core.py
index 7502582ce..cbfe02ac6 100644
--- a/src/writer/core.py
+++ b/src/writer/core.py
@@ -131,6 +131,7 @@ class Config:
     is_mail_enabled_for_log: bool = False
     mode: str = "run"
     logger: Optional[logging.Logger] = None
+    feature_flags = []
 
 @dataclasses.dataclass
 class MutationSubscription:
diff --git a/src/writer/serve.py b/src/writer/serve.py
index f52611344..f22b6dff0 100644
--- a/src/writer/serve.py
+++ b/src/writer/serve.py
@@ -149,7 +149,8 @@ def _get_run_starter_pack(payload: InitSessionResponsePayload):
             mail=payload.mail,
             components=payload.components,
             userFunctions=payload.userFunctions,
-            extensionPaths=cached_extension_paths
+            extensionPaths=cached_extension_paths,
+            featureFlags=payload.featureFlags
         )
 
     def _get_edit_starter_pack(payload: InitSessionResponsePayload):
@@ -163,7 +164,8 @@ def _get_edit_starter_pack(payload: InitSessionResponsePayload):
             components=payload.components,
             userFunctions=payload.userFunctions,
             runCode=run_code,
-            extensionPaths=cached_extension_paths
+            extensionPaths=cached_extension_paths,
+            featureFlags=payload.featureFlags
         )
 
     @app.get("/api/health")
diff --git a/src/writer/ss_types.py b/src/writer/ss_types.py
index c7e65d9e8..442a0f3d1 100644
--- a/src/writer/ss_types.py
+++ b/src/writer/ss_types.py
@@ -43,6 +43,7 @@ class InitResponseBody(BaseModel):
     components: Dict
     userFunctions: List[Dict]
     extensionPaths: List
+    featureFlags: List[str]
 
 
 class InitResponseBodyRun(InitResponseBody):
@@ -129,6 +130,7 @@ class InitSessionResponsePayload(BaseModel):
     mail: List
     userFunctions: List[Dict]
     components: Dict
+    featureFlags: List[str]
 
 
 class InitSessionResponse(AppProcessServerResponse):
diff --git a/tests/backend/test_serve.py b/tests/backend/test_serve.py
index f5b0514a7..c617de37e 100644
--- a/tests/backend/test_serve.py
+++ b/tests/backend/test_serve.py
@@ -169,3 +169,19 @@ def test_server_setup_hook_is_ignored_when_its_disabled(self):
         with fastapi.testclient.TestClient(asgi_app) as client:
             res = client.get("/probes/healthcheck")
             assert res.status_code == 404
+
+    def test_feature_flags(self):
+        """
+        This test verifies that feature flags are carried to the frontend.
+
+        """
+        asgi_app: fastapi.FastAPI = writer.serve.get_asgi_app(
+            test_app_dir, "run")
+        with fastapi.testclient.TestClient(asgi_app) as client:
+            res = client.post("/api/init", json={
+                "proposedSessionId": None
+            }, headers={
+                "Content-Type": "application/json"
+            })
+            feature_flags = res.json().get("featureFlags")
+            assert feature_flags == ["flag_one", "flag_two"]
\ No newline at end of file
diff --git a/tests/backend/testapp/main.py b/tests/backend/testapp/main.py
index 53df2ac09..7742d84b9 100644
--- a/tests/backend/testapp/main.py
+++ b/tests/backend/testapp/main.py
@@ -9,6 +9,8 @@
 import writer as wf
 import writer.core
 
+writer.Config.feature_flags.append("flag_one")
+writer.Config.feature_flags.append("flag_two")
 
 @wf.middleware()
 def my_middleware(state):

From 5d55479e1e6af4452e5559cca270026a87d9ca1e Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Fri, 23 Aug 2024 11:35:32 +0000
Subject: [PATCH 02/30] fix: Type

---
 src/writer/core.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/writer/core.py b/src/writer/core.py
index cbfe02ac6..ef58c63a9 100644
--- a/src/writer/core.py
+++ b/src/writer/core.py
@@ -131,7 +131,7 @@ class Config:
     is_mail_enabled_for_log: bool = False
     mode: str = "run"
     logger: Optional[logging.Logger] = None
-    feature_flags = []
+    feature_flags: list[str] = []
 
 @dataclasses.dataclass
 class MutationSubscription:

From 0ae795abda80446ab32e57da334d67a9119ffe6d Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Fri, 23 Aug 2024 18:02:56 +0200
Subject: [PATCH 03/30] Update src/ui/src/core/index.ts

Co-authored-by: Alexandre Rousseau <alexandre@rsseau.fr>
---
 src/ui/src/core/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ui/src/core/index.ts b/src/ui/src/core/index.ts
index e9b0ff906..1ad28604b 100644
--- a/src/ui/src/core/index.ts
+++ b/src/ui/src/core/index.ts
@@ -24,7 +24,7 @@ export function generateCore() {
 	let sessionId: string = null;
 	const sessionTimestamp: Ref<number> = ref(null);
 	const mode: Ref<"run" | "edit"> = ref(null);
-	const featureFlags: Ref<string[]> = ref([]);
+	const featureFlags = shallowRef<string[]>([]);
 	const runCode: Ref<string> = ref(null);
 	const components: Ref<ComponentMap> = ref({});
 	const userFunctions: Ref<UserFunction[]> = ref([]);

From dda21c344a88d3b8e23ae95bf20cdc0a425aaa49 Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Fri, 23 Aug 2024 18:03:33 +0200
Subject: [PATCH 04/30] Update src/ui/src/core/index.ts

Co-authored-by: Alexandre Rousseau <alexandre@rsseau.fr>
---
 src/ui/src/core/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ui/src/core/index.ts b/src/ui/src/core/index.ts
index 1ad28604b..e6ec1a08d 100644
--- a/src/ui/src/core/index.ts
+++ b/src/ui/src/core/index.ts
@@ -600,7 +600,7 @@ export function generateCore() {
 		getSessionTimestamp,
 		getUserState,
 		isChildOf,
-		getFeatureFlags,
+		featureFlags: readonly(featureFlags),
 	};
 
 	return core;

From a1d7c501cbd00e1e78a31a2a8ea25ec2411d135b Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Fri, 23 Aug 2024 16:15:08 +0000
Subject: [PATCH 05/30] chore: Changes to support Alex's suggestions

---
 apps/hello/main.py                   | 3 +++
 src/ui/src/builder/BuilderHeader.vue | 6 ++----
 src/ui/src/core/index.ts             | 6 +-----
 3 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/apps/hello/main.py b/apps/hello/main.py
index fb11ecac0..72c40dac2 100644
--- a/apps/hello/main.py
+++ b/apps/hello/main.py
@@ -8,6 +8,9 @@
 
 # EVENT HANDLERS
 
+wf.Config.feature_flags.append("dog")
+wf.Config.feature_flags.append("duck")
+
 def handle_timer_tick(state: WriterState):
     df = state["random_df"]
     for i in range(5):
diff --git a/src/ui/src/builder/BuilderHeader.vue b/src/ui/src/builder/BuilderHeader.vue
index 34e0a22a1..8e3f90e4c 100644
--- a/src/ui/src/builder/BuilderHeader.vue
+++ b/src/ui/src/builder/BuilderHeader.vue
@@ -83,8 +83,6 @@ const animate = () => {
 
 const syncHealthStatus = () => {
 	let s = "";
-	const featureFlags = wf.getFeatureFlags();
-
 	switch (wf.syncHealth.value) {
 		case "offline":
 			s += "Offline. Not syncing.";
@@ -100,8 +98,8 @@ const syncHealthStatus = () => {
 			break;
 	}
 
-	if (featureFlags.length > 0) {
-		s += ` Feature flags: ${featureFlags.join(", ")}`;
+	if (wf.featureFlags.value.length > 0) {
+		s += ` Feature flags: ${wf.featureFlags.value.join(", ")}`;
 	}
 
 	return s;
diff --git a/src/ui/src/core/index.ts b/src/ui/src/core/index.ts
index e6ec1a08d..e9c54384a 100644
--- a/src/ui/src/core/index.ts
+++ b/src/ui/src/core/index.ts
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/ban-types */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { ref, Ref } from "vue";
+import { readonly, ref, Ref, shallowRef } from "vue";
 import {
 	Component,
 	ComponentMap,
@@ -569,10 +569,6 @@ export function generateCore() {
 		return userState.value;
 	}
 
-	function getFeatureFlags() {
-		return featureFlags.value;
-	}
-
 	const core = {
 		webSocket,
 		syncHealth,

From 35bd4a91a6c195a4c495ae3396c0157f5b499c89 Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Fri, 23 Aug 2024 16:23:31 +0000
Subject: [PATCH 06/30] fix: Remove test code

---
 apps/hello/main.py | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/apps/hello/main.py b/apps/hello/main.py
index 72c40dac2..fb11ecac0 100644
--- a/apps/hello/main.py
+++ b/apps/hello/main.py
@@ -8,9 +8,6 @@
 
 # EVENT HANDLERS
 
-wf.Config.feature_flags.append("dog")
-wf.Config.feature_flags.append("duck")
-
 def handle_timer_tick(state: WriterState):
     df = state["random_df"]
     for i in range(5):

From 249db8d0677d3ec782a991f44c3fd9ce08c6c579 Mon Sep 17 00:00:00 2001
From: Dmitry Mozolevsky <dmitrymozolevsky@Dmitrys-MacBook-Air.local>
Date: Sun, 25 Aug 2024 19:33:30 -0700
Subject: [PATCH 07/30] fix: getting the BaseControlBar import to AnnotatedText
 component

---
 src/ui/src/core_components/content/CoreAnnotatedText.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/ui/src/core_components/content/CoreAnnotatedText.vue b/src/ui/src/core_components/content/CoreAnnotatedText.vue
index 6223fff75..64e2808dd 100644
--- a/src/ui/src/core_components/content/CoreAnnotatedText.vue
+++ b/src/ui/src/core_components/content/CoreAnnotatedText.vue
@@ -29,6 +29,7 @@
 
 <script lang="ts">
 import { cssClasses, primaryTextColor } from "../../renderer/sharedStyleFields";
+import BaseControlBar from "../base/BaseControlBar.vue";
 export default {
 	writer: {
 		name: "Annotated text",

From 4836c3643899e0e707d2f10b059970d6a976e4a4 Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Mon, 26 Aug 2024 20:21:32 +0000
Subject: [PATCH 08/30] feat: Abstract components

---
 src/ui/src/core/index.ts       | 13 ++++++++++++
 src/ui/src/core/templateMap.ts | 38 +++++++++++++++++++++++++++++++---
 src/ui/src/writerTypes.ts      | 13 ++++++++----
 src/writer/abstract.py         | 15 ++++++++++++++
 src/writer/serve.py            |  8 ++++---
 src/writer/ss_types.py         |  6 ++++++
 tests/backend/test_serve.py    | 30 +++++++++++++++++++++++++++
 7 files changed, 113 insertions(+), 10 deletions(-)
 create mode 100644 src/writer/abstract.py

diff --git a/src/ui/src/core/index.ts b/src/ui/src/core/index.ts
index 04c434292..6bf7e52a0 100644
--- a/src/ui/src/core/index.ts
+++ b/src/ui/src/core/index.ts
@@ -2,6 +2,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { ref, Ref } from "vue";
 import {
+	AbstractTemplate,
 	Component,
 	ComponentMap,
 	InstancePath,
@@ -11,6 +12,7 @@ import {
 import {
 	getSupportedComponentTypes,
 	getComponentDefinition,
+	registerAbstractComponentTemplate,
 } from "./templateMap";
 import * as typeHierarchy from "./typeHierarchy";
 import { auditAndFixComponents } from "./auditAndFix";
@@ -98,6 +100,7 @@ export function generateCore() {
 		collateMail(initData.mail);
 		sessionId = initData.sessionId;
 		sessionTimestamp.value = new Date().getTime();
+		loadAbstractTemplates(initData.abstractTemplates);
 
 		// Only returned for edit (Builder) mode
 
@@ -112,6 +115,16 @@ export function generateCore() {
 		await sendComponentUpdate();
 	}
 
+	function loadAbstractTemplates(
+		abstractTemplates: Record<string, AbstractTemplate>,
+	) {
+		Object.entries(abstractTemplates ?? {}).forEach(
+			([type, abstractTemplate]) => {
+				registerAbstractComponentTemplate(type, abstractTemplate);
+			},
+		);
+	}
+
 	function getSessionTimestamp() {
 		return sessionTimestamp.value;
 	}
diff --git a/src/ui/src/core/templateMap.ts b/src/ui/src/core/templateMap.ts
index 23b7d91ad..2511cc4ba 100644
--- a/src/ui/src/core/templateMap.ts
+++ b/src/ui/src/core/templateMap.ts
@@ -63,7 +63,7 @@ import CoreRoot from "../core_components/root/CoreRoot.vue";
 
 import CoreMapbox from "../core_components/embed/CoreMapbox.vue";
 
-import { WriterComponentDefinition } from "../writerTypes";
+import { AbstractTemplate, WriterComponentDefinition } from "../writerTypes";
 import { h } from "vue";
 
 const templateMap = {
@@ -124,6 +124,10 @@ const templateMap = {
 	jsonviewer: CoreJsonViewer,
 };
 
+const abstractTemplateMap: Record<string, AbstractTemplate> = {};
+
+templateMap["sectiondiff"] = CoreSection;
+
 if (WRITER_LIVE_CCT === "yes") {
 	/*
 	Assigns the components in custom_components to the template map,
@@ -163,8 +167,29 @@ function fallbackTemplate(type: string) {
 	};
 }
 
+function getMergedAbstractTemplate(type: string) {
+	const template = abstractTemplateMap[type];
+	if (!template) return;
+	const baseType = template.baseType;
+	return {
+		...templateMap[baseType],
+		writer: {
+			...templateMap[baseType].writer,
+			...abstractTemplateMap[type].writer,
+			fields: {
+				...templateMap[baseType].writer?.fields,
+				...abstractTemplateMap[type].writer?.fields,
+			},
+		},
+	};
+}
+
 export function getTemplate(type: string) {
-	return templateMap[type] ?? fallbackTemplate(type);
+	return (
+		getMergedAbstractTemplate(type) ??
+		templateMap[type] ??
+		fallbackTemplate(type)
+	);
 }
 
 export function getComponentDefinition(
@@ -174,11 +199,18 @@ export function getComponentDefinition(
 }
 
 export function getSupportedComponentTypes() {
-	return Object.keys(templateMap);
+	return [...Object.keys(templateMap), ...Object.keys(abstractTemplateMap)];
 }
 
 export function registerComponentTemplate(type: string, vueComponent: any) {
 	templateMap[type] = vueComponent;
 }
 
+export function registerAbstractComponentTemplate(
+	type: string,
+	abstractTemplate: AbstractTemplate,
+) {
+	abstractTemplateMap[type] = abstractTemplate;
+}
+
 export default templateMap;
diff --git a/src/ui/src/writerTypes.ts b/src/ui/src/writerTypes.ts
index a5c772b1e..c63c35586 100644
--- a/src/ui/src/writerTypes.ts
+++ b/src/ui/src/writerTypes.ts
@@ -1,9 +1,9 @@
-import { generateCore } from "./core"
-import { generateBuilderManager } from "./builder/builderManager"
+import { generateCore } from "./core";
+import { generateBuilderManager } from "./builder/builderManager";
 
-export type Core = ReturnType<typeof generateCore>
+export type Core = ReturnType<typeof generateCore>;
 
-type ComponentId = string
+type ComponentId = string;
 
 /**
  * Basic building block of applications.
@@ -131,3 +131,8 @@ export type ComponentMap = Record<Component["id"], Component>;
 export type MailItem = { type: string; payload: Record<string, string> };
 
 export type UserFunction = { name: string; args: string[] };
+
+export type AbstractTemplate = {
+	baseType: string;
+	writer: WriterComponentDefinition;
+};
diff --git a/src/writer/abstract.py b/src/writer/abstract.py
new file mode 100644
index 000000000..4177d39df
--- /dev/null
+++ b/src/writer/abstract.py
@@ -0,0 +1,15 @@
+"""
+
+Abstract templates.
+
+They're used to register new component templates, based on existing frontend templates and a backend-provided component definition. 
+
+"""
+
+from typing import Dict
+from writer.ss_types import AbstractTemplate
+
+templates:Dict[str, AbstractTemplate]  = {}
+
+def register_abstract_template(type: str, abstract_template: AbstractTemplate):
+    templates[type] = abstract_template
\ No newline at end of file
diff --git a/src/writer/serve.py b/src/writer/serve.py
index f52611344..b8db230cd 100644
--- a/src/writer/serve.py
+++ b/src/writer/serve.py
@@ -20,7 +20,7 @@
 from pydantic import ValidationError
 from starlette.websockets import WebSocket, WebSocketDisconnect, WebSocketState
 
-from writer import VERSION
+from writer import VERSION, abstract
 from writer.app_runner import AppRunner
 from writer.ss_types import (
     AppProcessServerResponse,
@@ -149,7 +149,8 @@ def _get_run_starter_pack(payload: InitSessionResponsePayload):
             mail=payload.mail,
             components=payload.components,
             userFunctions=payload.userFunctions,
-            extensionPaths=cached_extension_paths
+            extensionPaths=cached_extension_paths,
+            abstractTemplates=abstract.templates
         )
 
     def _get_edit_starter_pack(payload: InitSessionResponsePayload):
@@ -163,7 +164,8 @@ def _get_edit_starter_pack(payload: InitSessionResponsePayload):
             components=payload.components,
             userFunctions=payload.userFunctions,
             runCode=run_code,
-            extensionPaths=cached_extension_paths
+            extensionPaths=cached_extension_paths,
+            abstractTemplates=abstract.templates
         )
 
     @app.get("/api/health")
diff --git a/src/writer/ss_types.py b/src/writer/ss_types.py
index c7e65d9e8..8a20d5e22 100644
--- a/src/writer/ss_types.py
+++ b/src/writer/ss_types.py
@@ -28,6 +28,11 @@ def read(self) -> Any:
                       "event", "codeUpdate", "codeSave", "checkSession",
                       "keepAlive", "stateEnquiry", "setUserinfo", "stateContent"]
 
+
+class AbstractTemplate(BaseModel):
+    baseType: str
+    writer: Dict
+
 # Web server models
 
 
@@ -43,6 +48,7 @@ class InitResponseBody(BaseModel):
     components: Dict
     userFunctions: List[Dict]
     extensionPaths: List
+    abstractTemplates: Dict[str, AbstractTemplate]
 
 
 class InitResponseBodyRun(InitResponseBody):
diff --git a/tests/backend/test_serve.py b/tests/backend/test_serve.py
index f5b0514a7..f8534611c 100644
--- a/tests/backend/test_serve.py
+++ b/tests/backend/test_serve.py
@@ -3,6 +3,7 @@
 import fastapi
 import fastapi.testclient
 import pytest
+import writer.abstract
 import writer.serve
 from fastapi import FastAPI
 
@@ -169,3 +170,32 @@ def test_server_setup_hook_is_ignored_when_its_disabled(self):
         with fastapi.testclient.TestClient(asgi_app) as client:
             res = client.get("/probes/healthcheck")
             assert res.status_code == 404
+
+    def test_abstract_components(self):
+        writer.abstract.register_abstract_template("sectiona", {
+            "baseType": "section",
+            "writer": {
+                "name": "Section A"
+            }
+        })
+        writer.abstract.register_abstract_template("columnb", {
+            "baseType": "column",
+            "writer": {
+                "description": "Cloned Column component"
+            }
+        })
+
+        asgi_app: fastapi.FastAPI = writer.serve.get_asgi_app(
+            test_app_dir, "run")
+
+        with fastapi.testclient.TestClient(asgi_app) as client:
+            res = client.post("/api/init", json={
+                "proposedSessionId": None
+            }, headers={
+                "Content-Type": "application/json"
+            })
+            abstract_templates = res.json().get("abstractTemplates")
+            section_a = abstract_templates.get("sectiona")
+            column_b = abstract_templates.get("columnb")
+            assert section_a.get("writer").get("name") == "Section A"
+            assert column_b.get("writer").get("description") == "Cloned Column component"

From 14735cdfa017d97950ff4414ba3ef0c2d7a9892f Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Mon, 26 Aug 2024 20:27:38 +0000
Subject: [PATCH 09/30] fix: Test

---
 tests/backend/test_serve.py | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/tests/backend/test_serve.py b/tests/backend/test_serve.py
index f9ed53ad3..0e366ac41 100644
--- a/tests/backend/test_serve.py
+++ b/tests/backend/test_serve.py
@@ -187,6 +187,12 @@ def test_abstract_components(self):
 
         asgi_app: fastapi.FastAPI = writer.serve.get_asgi_app(
             test_app_dir, "run")
+        with fastapi.testclient.TestClient(asgi_app) as client:
+            res = client.post("/api/init", json={
+                "proposedSessionId": None
+            }, headers={
+                "Content-Type": "application/json"
+            })
         abstract_templates = res.json().get("abstractTemplates")
         section_a = abstract_templates.get("sectiona")
         column_b = abstract_templates.get("columnb")

From d3416ce1a3a39726edaa781400a90b839dc53ca9 Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Mon, 26 Aug 2024 20:31:55 +0000
Subject: [PATCH 10/30] fix: Missing commas

---
 src/writer/serve.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/writer/serve.py b/src/writer/serve.py
index d98cae3a7..c65012522 100644
--- a/src/writer/serve.py
+++ b/src/writer/serve.py
@@ -150,7 +150,7 @@ def _get_run_starter_pack(payload: InitSessionResponsePayload):
             components=payload.components,
             userFunctions=payload.userFunctions,
             extensionPaths=cached_extension_paths,
-            featureFlags=payload.featureFlags
+            featureFlags=payload.featureFlags,
             abstractTemplates=abstract.templates
         )
 
@@ -166,7 +166,7 @@ def _get_edit_starter_pack(payload: InitSessionResponsePayload):
             userFunctions=payload.userFunctions,
             runCode=run_code,
             extensionPaths=cached_extension_paths,
-            featureFlags=payload.featureFlags
+            featureFlags=payload.featureFlags,
             abstractTemplates=abstract.templates
         )
 

From 18dbad91cb470edb7b8f820613c0f95ff2c6f2f9 Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Mon, 26 Aug 2024 20:32:01 +0000
Subject: [PATCH 11/30] fix: Tests

---
 tests/backend/test_serve.py | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/tests/backend/test_serve.py b/tests/backend/test_serve.py
index 0e366ac41..901813bb1 100644
--- a/tests/backend/test_serve.py
+++ b/tests/backend/test_serve.py
@@ -193,11 +193,11 @@ def test_abstract_components(self):
             }, headers={
                 "Content-Type": "application/json"
             })
-        abstract_templates = res.json().get("abstractTemplates")
-        section_a = abstract_templates.get("sectiona")
-        column_b = abstract_templates.get("columnb")
-        assert section_a.get("writer").get("name") == "Section A"
-        assert column_b.get("writer").get("description") == "Cloned Column component"
+            abstract_templates = res.json().get("abstractTemplates")
+            section_a = abstract_templates.get("sectiona")
+            column_b = abstract_templates.get("columnb")
+            assert section_a.get("writer").get("name") == "Section A"
+            assert column_b.get("writer").get("description") == "Cloned Column component"
           
     def test_feature_flags(self):
         """
@@ -212,5 +212,5 @@ def test_feature_flags(self):
             }, headers={
                 "Content-Type": "application/json"
             })
-        feature_flags = res.json().get("featureFlags")
-        assert feature_flags == ["flag_one", "flag_two"]
\ No newline at end of file
+            feature_flags = res.json().get("featureFlags")
+            assert feature_flags == ["flag_one", "flag_two"]
\ No newline at end of file

From 26165f5bcc9634cb774e6774ac6d6216744c07c9 Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Mon, 26 Aug 2024 20:32:57 +0000
Subject: [PATCH 12/30] fix: Remove test code

---
 src/ui/src/core/templateMap.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/ui/src/core/templateMap.ts b/src/ui/src/core/templateMap.ts
index 2511cc4ba..dc1f2c04b 100644
--- a/src/ui/src/core/templateMap.ts
+++ b/src/ui/src/core/templateMap.ts
@@ -126,8 +126,6 @@ const templateMap = {
 
 const abstractTemplateMap: Record<string, AbstractTemplate> = {};
 
-templateMap["sectiondiff"] = CoreSection;
-
 if (WRITER_LIVE_CCT === "yes") {
 	/*
 	Assigns the components in custom_components to the template map,

From c37823b7b5738eefa1a38d92d8b68d14d9396766 Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Mon, 26 Aug 2024 20:37:04 +0000
Subject: [PATCH 13/30] fix: Linter

---
 src/writer/abstract.py | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/writer/abstract.py b/src/writer/abstract.py
index 4177d39df..b0ce57f98 100644
--- a/src/writer/abstract.py
+++ b/src/writer/abstract.py
@@ -7,6 +7,7 @@
 """
 
 from typing import Dict
+
 from writer.ss_types import AbstractTemplate
 
 templates:Dict[str, AbstractTemplate]  = {}

From 755b1c1d1f6603fb93e615697d9652cdccabb022 Mon Sep 17 00:00:00 2001
From: Fabien Arcellier <fabien.arcellier@gmail.com>
Date: Mon, 26 Aug 2024 16:43:13 +0200
Subject: [PATCH 14/30] fix: custom stylesheet and js are not loaded after OIDC
 authentication

* fix: restore initial mails when getting session into init
---
 src/writer/app_runner.py |  3 ++-
 src/writer/auth.py       |  6 +++---
 src/writer/core.py       | 13 ++++++++-----
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/writer/app_runner.py b/src/writer/app_runner.py
index f91b7b06e..35d580763 100644
--- a/src/writer/app_runner.py
+++ b/src/writer/app_runner.py
@@ -132,9 +132,10 @@ def _handle_session_init(self, payload: InitSessionRequestPayload) -> InitSessio
 
         import writer
 
-        session = writer.session_manager.get_session(payload.proposedSessionId)
+        session = writer.session_manager.get_session(payload.proposedSessionId, restore_intial_mails=True)
         if session is None:
             session = writer.session_manager.get_new_session(payload.cookies, payload.headers, payload.proposedSessionId)
+
         if session is None:
             raise MessageHandlingException("Session rejected.")
 
diff --git a/src/writer/auth.py b/src/writer/auth.py
index 646208543..28f6ba6da 100644
--- a/src/writer/auth.py
+++ b/src/writer/auth.py
@@ -188,14 +188,14 @@ def register(self,
         redirect_url = urljoin(self.host_url, self.callback_authorize)
         host_url_path = urlpath(self.host_url)
         callback_authorize_path = urljoin(host_url_path, self.callback_authorize)
-        asset_assets_path = urljoin(host_url_path, "assets")
+        static_assets_path = urljoin(host_url_path, "static")
 
         logger.debug(f"[auth] oidc - url redirect: {redirect_url}")
         logger.debug(f"[auth] oidc - endpoint authorize: {self.url_authorize}")
         logger.debug(f"[auth] oidc - endpoint token: {self.url_oauthtoken}")
         logger.debug(f"[auth] oidc - path: {host_url_path}")
         logger.debug(f"[auth] oidc - authorize path: {callback_authorize_path}")
-        logger.debug(f"[auth] oidc - asset path: {asset_assets_path}")
+        logger.debug(f"[auth] oidc - static asset path: {static_assets_path}")
         self.authlib = OAuth2Session(
             client_id=self.client_id,
             client_secret=self.client_secret,
@@ -211,7 +211,7 @@ def register(self,
         async def oidc_middleware(request: Request, call_next):
             session = request.cookies.get('session')
 
-            if session is not None or request.url.path in [callback_authorize_path] or request.url.path.startswith(asset_assets_path):
+            if session is not None or request.url.path in [callback_authorize_path] or request.url.path.startswith(static_assets_path):
                 response: Response = await call_next(request)
                 return response
             else:
diff --git a/src/writer/core.py b/src/writer/core.py
index ef58c63a9..8dffa16cb 100644
--- a/src/writer/core.py
+++ b/src/writer/core.py
@@ -1622,16 +1622,19 @@ def get_new_session(self, cookies: Optional[Dict] = None, headers: Optional[Dict
             new_id = self._generate_session_id()
         else:
             new_id = proposed_session_id
-        new_session = WriterSession(
-            new_id, cookies, headers)
+        new_session = WriterSession(new_id, cookies, headers)
         self.sessions[new_id] = new_session
         return new_session
 
-    def get_session(self, session_id: Optional[str]) -> Optional[WriterSession]:
+    def get_session(self, session_id: Optional[str], restore_intial_mails: bool = False) -> Optional[WriterSession]:
         if session_id is None:
             return None
 
-        return self.sessions.get(session_id)
+        session = self.sessions.get(session_id)
+        if session is not None and restore_intial_mails is True:
+            session.session_state.mail = copy.copy(initial_state.mail)
+
+        return session
 
     def _generate_session_id(self) -> str:
         return secrets.token_hex(SessionManager.TOKEN_SIZE_BYTES)
@@ -2552,4 +2555,4 @@ def _split_record_as_pandas_record_and_index(param: dict, index_columns: list) -
 state_serialiser = StateSerialiser()
 initial_state = WriterState()
 base_component_tree = core_ui.build_base_component_tree()
-session_manager = SessionManager()
+session_manager: SessionManager = SessionManager()

From 4ba4370ba2743c6a366106122356ef0218086cfd Mon Sep 17 00:00:00 2001
From: Fabien Arcellier <fabien.arcellier@gmail.com>
Date: Tue, 27 Aug 2024 08:03:01 +0200
Subject: [PATCH 15/30] fix: custom stylesheet and js are not loaded after OIDC
 authentication

---
 src/writer/app_runner.py | 2 +-
 src/writer/core.py       | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/writer/app_runner.py b/src/writer/app_runner.py
index 35d580763..b52899740 100644
--- a/src/writer/app_runner.py
+++ b/src/writer/app_runner.py
@@ -132,7 +132,7 @@ def _handle_session_init(self, payload: InitSessionRequestPayload) -> InitSessio
 
         import writer
 
-        session = writer.session_manager.get_session(payload.proposedSessionId, restore_intial_mails=True)
+        session = writer.session_manager.get_session(payload.proposedSessionId, restore_initial_mail=True)
         if session is None:
             session = writer.session_manager.get_new_session(payload.cookies, payload.headers, payload.proposedSessionId)
 
diff --git a/src/writer/core.py b/src/writer/core.py
index 8dffa16cb..e0c060342 100644
--- a/src/writer/core.py
+++ b/src/writer/core.py
@@ -1626,12 +1626,12 @@ def get_new_session(self, cookies: Optional[Dict] = None, headers: Optional[Dict
         self.sessions[new_id] = new_session
         return new_session
 
-    def get_session(self, session_id: Optional[str], restore_intial_mails: bool = False) -> Optional[WriterSession]:
+    def get_session(self, session_id: Optional[str], restore_initial_mail: bool = False) -> Optional[WriterSession]:
         if session_id is None:
             return None
 
         session = self.sessions.get(session_id)
-        if session is not None and restore_intial_mails is True:
+        if session is not None and restore_initial_mail is True:
             session.session_state.mail = copy.copy(initial_state.mail)
 
         return session

From 0b89a08875530a9e80d0df33ccbaef18a4c1029b Mon Sep 17 00:00:00 2001
From: Johannes <tolstoy.work@gmail.com>
Date: Tue, 27 Aug 2024 12:28:15 +0200
Subject: [PATCH 16/30] fix: add opportunity to customize unauthorization and
 callback actions

---
 src/writer/auth.py | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/writer/auth.py b/src/writer/auth.py
index 646208543..b6f15af69 100644
--- a/src/writer/auth.py
+++ b/src/writer/auth.py
@@ -99,6 +99,9 @@ def register(self,
                  callback: Optional[Callable[[Request, str, dict], None]] = None,
                  unauthorized_action: Optional[Callable[[Request, Unauthorized], Response]] = None):
 
+        self.unauthorized_action = unauthorized_action
+        self.callback_func = callback
+
         @asgi_app.middleware("http")
         async def basicauth_middleware(request: Request, call_next):
             import base64
@@ -205,6 +208,7 @@ def register(self,
             token_endpoint=self.url_oauthtoken,
         )
 
+        self.unauthorized_action = unauthorized_action
         self.callback_func = callback
 
         @asgi_app.middleware("http")

From 1716b1f15279ad4f2b966006158528ba44dd52c8 Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Tue, 27 Aug 2024 10:34:37 +0000
Subject: [PATCH 17/30] chore: Version bump

---
 pyproject.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pyproject.toml b/pyproject.toml
index 44fc02097..fdc8dd5be 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -4,7 +4,7 @@ build-backend = "poetry.core.masonry.api"
 
 [tool.poetry]
 name = "writer"
-version = "0.7.0"
+version = "0.7.1"
 description = "An open-source, Python framework for building feature-rich apps that are fully integrated with the Writer platform."
 authors = ["Writer, Inc."]
 readme = "README.md"

From 4e57790f952cb622309a9ce0343cb3906d2c353d Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Tue, 27 Aug 2024 11:43:53 +0000
Subject: [PATCH 18/30] fix: Generate datalist id correctly

---
 src/ui/src/builder/BuilderFieldsText.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/ui/src/builder/BuilderFieldsText.vue b/src/ui/src/builder/BuilderFieldsText.vue
index c77e9ca90..8a8e9adf9 100644
--- a/src/ui/src/builder/BuilderFieldsText.vue
+++ b/src/ui/src/builder/BuilderFieldsText.vue
@@ -8,6 +8,7 @@
 		>
 			<BuilderTemplateInput
 				class="content"
+				:input-id="inputId"
 				:value="component.content[fieldKey]"
 				:placeholder="templateField?.default"
 				:options="options"
@@ -19,6 +20,7 @@
 				multiline
 				variant="text"
 				class="content"
+				:input-id="inputId"
 				:value="component.content[fieldKey]"
 				:placeholder="templateField?.default"
 				@input="handleInput"
@@ -50,6 +52,8 @@ const templateField = computed(() => {
 	return definition.fields[fieldKey.value];
 });
 
+const inputId = computed(() => `${props.componentId}-${props.fieldKey}`);
+
 const options = computed(() => {
 	const field = templateField.value;
 	if (field.options) {
@@ -57,7 +61,7 @@ const options = computed(() => {
 			? field.options(wf, componentId.value)
 			: field.options;
 	}
-	return [];
+	return {};
 });
 
 const handleInput = (ev: Event) => {

From fe7d9c35d9e424041bded44818bc5f66648bf43f Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Tue, 27 Aug 2024 11:46:27 +0000
Subject: [PATCH 19/30] feat: Added support for button color

---
 src/ui/src/core_components/content/CoreAnnotatedText.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/ui/src/core_components/content/CoreAnnotatedText.vue b/src/ui/src/core_components/content/CoreAnnotatedText.vue
index 0636f818b..6e41e0e15 100644
--- a/src/ui/src/core_components/content/CoreAnnotatedText.vue
+++ b/src/ui/src/core_components/content/CoreAnnotatedText.vue
@@ -26,7 +26,12 @@
 </template>
 
 <script lang="ts">
-import { cssClasses, primaryTextColor } from "../../renderer/sharedStyleFields";
+import {
+	buttonColor,
+	buttonTextColor,
+	cssClasses,
+	primaryTextColor,
+} from "../../renderer/sharedStyleFields";
 import BaseControlBar from "../base/BaseControlBar.vue";
 export default {
 	writer: {
@@ -76,6 +81,8 @@ export default {
 				default: "no",
 				category: FieldCategory.Style,
 			},
+			buttonColor,
+			buttonTextColor,
 			primaryTextColor,
 			cssClasses,
 		},

From 5b7f1d83791902245cb4fedc831d372a0da8b3a1 Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Tue, 27 Aug 2024 11:59:04 +0000
Subject: [PATCH 20/30] chore: Version bump

---
 pyproject.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pyproject.toml b/pyproject.toml
index fdc8dd5be..2839baf24 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -4,7 +4,7 @@ build-backend = "poetry.core.masonry.api"
 
 [tool.poetry]
 name = "writer"
-version = "0.7.1"
+version = "0.7.2"
 description = "An open-source, Python framework for building feature-rich apps that are fully integrated with the Writer platform."
 authors = ["Writer, Inc."]
 readme = "README.md"

From 367e0eebedfcde772c7b765b3b41a7bfb87a4ec6 Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Thu, 29 Aug 2024 09:25:25 +0000
Subject: [PATCH 21/30] chore: Toolkit refactor

---
 docs/framework/custom-components.mdx          |  93 +++++++-------
 src/ui/src/builder/BuilderApp.vue             |   2 +-
 .../src/builder/BuilderComponentShortcuts.vue |   2 +-
 src/ui/src/builder/BuilderFieldsAlign.vue     |   2 +-
 src/ui/src/builder/BuilderFieldsColor.vue     |   2 +-
 src/ui/src/builder/BuilderFieldsKeyValue.vue  |   4 +-
 src/ui/src/builder/BuilderFieldsObject.vue    |   2 +-
 src/ui/src/builder/BuilderFieldsPadding.vue   |   2 +-
 src/ui/src/builder/BuilderFieldsShadow.vue    |   2 +-
 src/ui/src/builder/BuilderFieldsText.vue      |   2 +-
 src/ui/src/builder/BuilderFieldsWidth.vue     |   2 +-
 .../src/builder/BuilderSettingsHandlers.vue   |   2 +-
 .../src/builder/BuilderSettingsProperties.vue |   4 +-
 src/ui/src/builder/BuilderSidebarToolbar.vue  |   2 +-
 src/ui/src/builder/BuilderSidebarTree.vue     |   2 +-
 src/ui/src/builder/BuilderSwitcher.vue        |   9 +-
 src/ui/src/builder/BuilderTreeBranch.vue      |   4 +-
 src/ui/src/builder/builderManager.ts          |   4 +-
 src/ui/src/builder/useComponentActions.ts     |   2 +-
 src/ui/src/builder/useDragDropComponent.ts    |   2 +-
 .../core}/base/BaseCollapsible.vue            |   0
 .../core}/base/BaseContainer.vue              |   2 +-
 .../core}/base/BaseControlBar.vue             |   2 +-
 .../core}/base/BaseEmptiness.vue              |   4 +-
 .../core}/base/BaseInputColor.vue             |   2 +-
 .../core}/base/BaseInputRange.vue             |   0
 .../core}/base/BaseInputWrapper.vue           |   2 +-
 .../core}/base/BaseJsonViewer.utils.ts        |   0
 .../core}/base/BaseJsonViewer.vue             |   0
 .../base/BaseJsonViewerChildrenCounter.vue    |   0
 .../core}/base/BaseJsonViewerCollapsible.vue  |   0
 .../core}/base/BaseJsonViewerObject.vue       |   0
 .../core}/base/BaseJsonViewerValue.vue        |   0
 .../core}/base/BaseMarkdown.vue               |   0
 .../core}/base/BaseSelect.vue                 |   4 +-
 .../core}/content/CoreAnnotatedText.vue       |   6 +-
 .../core}/content/CoreAvatar.vue              |  10 +-
 .../core}/content/CoreChatbot.vue             |  16 +--
 .../core}/content/CoreDataframe.vue           |  14 +--
 .../core}/content/CoreHeading.vue             |   8 +-
 .../core}/content/CoreIcon.vue                |   8 +-
 .../core}/content/CoreImage.vue               |  13 +-
 .../core}/content/CoreJsonViewer.vue          |   6 +-
 .../core}/content/CoreLink.vue                |   6 +-
 .../core}/content/CoreMessage.vue             |  10 +-
 .../core}/content/CoreMetric.vue              |   8 +-
 .../core}/content/CorePlotlyGraph.vue         |   8 +-
 .../core}/content/CoreTags.vue                |   8 +-
 .../core}/content/CoreText.vue                |  10 +-
 .../core}/content/CoreVegaLiteChart.vue       |   8 +-
 .../core}/content/CoreVideoPlayer.vue         |   6 +-
 .../core}/embed/CoreGoogleMaps.vue            |   8 +-
 .../core}/embed/CoreIFrame.vue                |   8 +-
 .../core}/embed/CoreMapbox.vue                |   8 +-
 .../core}/embed/CorePDF.vue                   |  12 +-
 .../core}/input/CoreCheckboxInput.vue         |  12 +-
 .../core}/input/CoreColorInput.vue            |  12 +-
 .../core}/input/CoreDateInput.vue             |  12 +-
 .../core}/input/CoreDropdownInput.vue         |  14 +--
 .../core}/input/CoreFileInput.vue             |  16 +--
 .../core}/input/CoreMultiselectInput.vue      |  10 +-
 .../core}/input/CoreNumberInput.vue           |  12 +-
 .../core}/input/CoreRadioInput.vue            |  12 +-
 .../core}/input/CoreRatingInput.vue           |  10 +-
 .../core}/input/CoreSelectInput.vue           |  10 +-
 .../core}/input/CoreSliderInput.vue           |  12 +-
 .../core}/input/CoreSwitchInput.vue           |  12 +-
 .../core}/input/CoreTextInput.vue             |  12 +-
 .../core}/input/CoreTextareaInput.vue         |  12 +-
 .../core}/input/CoreTimeInput.vue             |  12 +-
 .../core}/layout/CoreColumn.vue               |  10 +-
 .../core}/layout/CoreColumns.vue              |   6 +-
 .../core}/layout/CoreHeader.vue               |   8 +-
 .../core}/layout/CoreHorizontalStack.vue      |   6 +-
 .../core}/layout/CoreSection.vue              |   8 +-
 .../core}/layout/CoreSeparator.vue            |   4 +-
 .../core}/layout/CoreSidebar.vue              |  10 +-
 .../core}/layout/CoreStep.vue                 |  11 +-
 .../core}/layout/CoreSteps.vue                |   8 +-
 .../core}/layout/CoreTab.vue                  |  10 +-
 .../core}/layout/CoreTabs.vue                 |   8 +-
 .../core}/other/CoreButton.vue                |  14 +--
 .../core}/other/CoreHtml.vue                  |   6 +-
 .../core}/other/CorePagination.vue            |   6 +-
 .../core}/other/CoreRepeater.vue              |   4 +-
 .../core}/other/CoreReuse.vue                 |   4 +-
 .../core}/other/CoreTimer.vue                 |   6 +-
 .../core}/other/CoreWebcamCapture.vue         |  14 +--
 .../core}/root/CorePage.vue                   |  10 +-
 .../core}/root/CoreRoot.vue                   |  10 +-
 .../workflows/abstract/WorkflowsNode.vue      |  32 +++++
 src/ui/src/core/auditAndFix.ts                |   2 +-
 src/ui/src/core/index.ts                      |   2 +-
 src/ui/src/core/templateMap.ts                | 116 +++++++++---------
 src/ui/src/core/typeHierarchy.ts              |   2 +-
 .../src/custom_components/BubbleMessage.vue   |   4 +-
 .../BubbleMessageAdvanced.vue                 |   6 +-
 src/ui/src/renderer/ChildlessPlaceholder.vue  |   6 +-
 src/ui/src/renderer/ComponentProxy.vue        |   4 +-
 src/ui/src/renderer/ComponentRenderer.vue     |   4 +-
 src/ui/src/renderer/RenderError.vue           |   2 +-
 src/ui/src/renderer/instancePath.ts           |   2 +-
 src/ui/src/renderer/sharedStyleFields.ts      |   2 +-
 src/ui/src/renderer/useEvaluator.ts           |   2 +-
 src/ui/src/renderer/useFormValueBroker.ts     |   4 +-
 src/ui/src/writerTypes.ts                     |   1 +
 src/ui/tools/generator_storybook.mjs          |   3 +-
 107 files changed, 465 insertions(+), 415 deletions(-)
 rename src/ui/src/{core_components => components/core}/base/BaseCollapsible.vue (100%)
 rename src/ui/src/{core_components => components/core}/base/BaseContainer.vue (94%)
 rename src/ui/src/{core_components => components/core}/base/BaseControlBar.vue (96%)
 rename src/ui/src/{core_components => components/core}/base/BaseEmptiness.vue (91%)
 rename src/ui/src/{core_components => components/core}/base/BaseInputColor.vue (96%)
 rename src/ui/src/{core_components => components/core}/base/BaseInputRange.vue (100%)
 rename src/ui/src/{core_components => components/core}/base/BaseInputWrapper.vue (93%)
 rename src/ui/src/{core_components => components/core}/base/BaseJsonViewer.utils.ts (100%)
 rename src/ui/src/{core_components => components/core}/base/BaseJsonViewer.vue (100%)
 rename src/ui/src/{core_components => components/core}/base/BaseJsonViewerChildrenCounter.vue (100%)
 rename src/ui/src/{core_components => components/core}/base/BaseJsonViewerCollapsible.vue (100%)
 rename src/ui/src/{core_components => components/core}/base/BaseJsonViewerObject.vue (100%)
 rename src/ui/src/{core_components => components/core}/base/BaseJsonViewerValue.vue (100%)
 rename src/ui/src/{core_components => components/core}/base/BaseMarkdown.vue (100%)
 rename src/ui/src/{core_components => components/core}/base/BaseSelect.vue (99%)
 rename src/ui/src/{core_components => components/core}/content/CoreAnnotatedText.vue (97%)
 rename src/ui/src/{core_components => components/core}/content/CoreAvatar.vue (93%)
 rename src/ui/src/{core_components => components/core}/content/CoreChatbot.vue (97%)
 rename src/ui/src/{core_components => components/core}/content/CoreDataframe.vue (98%)
 rename src/ui/src/{core_components => components/core}/content/CoreHeading.vue (86%)
 rename src/ui/src/{core_components => components/core}/content/CoreIcon.vue (85%)
 rename src/ui/src/{core_components => components/core}/content/CoreImage.vue (95%)
 rename src/ui/src/{core_components => components/core}/content/CoreJsonViewer.vue (94%)
 rename src/ui/src/{core_components => components/core}/content/CoreLink.vue (90%)
 rename src/ui/src/{core_components => components/core}/content/CoreMessage.vue (92%)
 rename src/ui/src/{core_components => components/core}/content/CoreMetric.vue (94%)
 rename src/ui/src/{core_components => components/core}/content/CorePlotlyGraph.vue (95%)
 rename src/ui/src/{core_components => components/core}/content/CoreTags.vue (94%)
 rename src/ui/src/{core_components => components/core}/content/CoreText.vue (90%)
 rename src/ui/src/{core_components => components/core}/content/CoreVegaLiteChart.vue (91%)
 rename src/ui/src/{core_components => components/core}/content/CoreVideoPlayer.vue (93%)
 rename src/ui/src/{core_components => components/core}/embed/CoreGoogleMaps.vue (96%)
 rename src/ui/src/{core_components => components/core}/embed/CoreIFrame.vue (89%)
 rename src/ui/src/{core_components => components/core}/embed/CoreMapbox.vue (96%)
 rename src/ui/src/{core_components => components/core}/embed/CorePDF.vue (96%)
 rename src/ui/src/{core_components => components/core}/input/CoreCheckboxInput.vue (91%)
 rename src/ui/src/{core_components => components/core}/input/CoreColorInput.vue (85%)
 rename src/ui/src/{core_components => components/core}/input/CoreDateInput.vue (85%)
 rename src/ui/src/{core_components => components/core}/input/CoreDropdownInput.vue (84%)
 rename src/ui/src/{core_components => components/core}/input/CoreFileInput.vue (92%)
 rename src/ui/src/{core_components => components/core}/input/CoreMultiselectInput.vue (92%)
 rename src/ui/src/{core_components => components/core}/input/CoreNumberInput.vue (91%)
 rename src/ui/src/{core_components => components/core}/input/CoreRadioInput.vue (90%)
 rename src/ui/src/{core_components => components/core}/input/CoreRatingInput.vue (96%)
 rename src/ui/src/{core_components => components/core}/input/CoreSelectInput.vue (92%)
 rename src/ui/src/{core_components => components/core}/input/CoreSliderInput.vue (87%)
 rename src/ui/src/{core_components => components/core}/input/CoreSwitchInput.vue (88%)
 rename src/ui/src/{core_components => components/core}/input/CoreTextInput.vue (87%)
 rename src/ui/src/{core_components => components/core}/input/CoreTextareaInput.vue (87%)
 rename src/ui/src/{core_components => components/core}/input/CoreTimeInput.vue (85%)
 rename src/ui/src/{core_components => components/core}/layout/CoreColumn.vue (96%)
 rename src/ui/src/{core_components => components/core}/layout/CoreColumns.vue (81%)
 rename src/ui/src/{core_components => components/core}/layout/CoreHeader.vue (82%)
 rename src/ui/src/{core_components => components/core}/layout/CoreHorizontalStack.vue (87%)
 rename src/ui/src/{core_components => components/core}/layout/CoreSection.vue (89%)
 rename src/ui/src/{core_components => components/core}/layout/CoreSeparator.vue (88%)
 rename src/ui/src/{core_components => components/core}/layout/CoreSidebar.vue (93%)
 rename src/ui/src/{core_components => components/core}/layout/CoreStep.vue (97%)
 rename src/ui/src/{core_components => components/core}/layout/CoreSteps.vue (91%)
 rename src/ui/src/{core_components => components/core}/layout/CoreTab.vue (95%)
 rename src/ui/src/{core_components => components/core}/layout/CoreTabs.vue (90%)
 rename src/ui/src/{core_components => components/core}/other/CoreButton.vue (86%)
 rename src/ui/src/{core_components => components/core}/other/CoreHtml.vue (93%)
 rename src/ui/src/{core_components => components/core}/other/CorePagination.vue (98%)
 rename src/ui/src/{core_components => components/core}/other/CoreRepeater.vue (96%)
 rename src/ui/src/{core_components => components/core}/other/CoreReuse.vue (96%)
 rename src/ui/src/{core_components => components/core}/other/CoreTimer.vue (94%)
 rename src/ui/src/{core_components => components/core}/other/CoreWebcamCapture.vue (93%)
 rename src/ui/src/{core_components => components/core}/root/CorePage.vue (93%)
 rename src/ui/src/{core_components => components/core}/root/CoreRoot.vue (96%)
 create mode 100644 src/ui/src/components/workflows/abstract/WorkflowsNode.vue

diff --git a/docs/framework/custom-components.mdx b/docs/framework/custom-components.mdx
index c8540d553..23152de51 100644
--- a/docs/framework/custom-components.mdx
+++ b/docs/framework/custom-components.mdx
@@ -2,13 +2,15 @@
 title: "Custom components"
 ---
 
-It's possible to extend Framework with custom component templates. 
+It's possible to extend Framework with custom component templates.
 
 They're developed using Vue 3 and TypeScript. Once transpiled, they can be used by copying them to the `extensions/` folder of any project.
 
-<Note> 
-Custom components behave exactly like built-in ones.
-They are just as performant, can contain other components, and offer the same the Builder experience. They only differ from built-in components in the way that they're bundled and imported.
+<Note>
+	Custom components behave exactly like built-in ones. They are just as
+	performant, can contain other components, and offer the same the Builder
+	experience. They only differ from built-in components in the way that they're
+	bundled and imported.
 </Note>
 
 ## Architecture
@@ -21,7 +23,7 @@ Extensions and custom templates are currently synonyms, but this might change in
 
 ![Custom Components - Architecture](/framework/images/custom-components.architecture.png)
 
-Dependencies are [provided](https://vuejs.org/api/composition-api-dependency-injection.html) using injection symbols and can be _injected_ to be used by the component template. These include `evaluatedFields`, which contain the current values of the editable fields. Injected dependencies are fully typed, making  development easier.
+Dependencies are [provided](https://vuejs.org/api/composition-api-dependency-injection.html) using injection symbols and can be _injected_ to be used by the component template. These include `evaluatedFields`, which contain the current values of the editable fields. Injected dependencies are fully typed, making development easier.
 
 [Rollup's external feature](https://rollupjs.org/configuration-options/#external), invoked via Vite, allows for extensions to be compiled without dependencies and link those during runtime. Therefore, extensions aren't bundled to be standalone, but rather to work as a piece of a puzzle.
 
@@ -35,7 +37,7 @@ Framework component templates are purely front-end. They are Vue 3 templates tha
 
 ### Simple example
 
-This example shows a template for _Bubble Message_, a simple demo component with one editable field, `text`.   
+This example shows a template for _Bubble Message_, a simple demo component with one editable field, `text`.
 
 ```js
 <template>
@@ -44,21 +46,21 @@ This example shows a template for _Bubble Message_, a simple demo component with
         <div class="message">
 
             <!-- Shows the current value of the field "text" -->
-            
+
             {{ fields.text.value }}
         </div>
 	</div>
 </template>
 
 <script lang="ts">
-export default {    
+export default {
     writer: {
 		name: "Bubble Message",
 		description: "Shows a message in the shape of a speech bubble.",
 		category: "Content",
-		
+
         // Fields will be editable via Framework Builder
-        
+
         fields: {
 			text: {
 				name: "Text",
@@ -73,7 +75,7 @@ export default {
 };
 </script>
 <script setup lang="ts">
-import { FieldType } from "../writerTypes";
+import { FieldType } from "@/writerTypes";
 import injectionKeys from "../injectionKeys";
 import { inject } from "vue";
 
@@ -99,38 +101,43 @@ The code above will make Bubble Message available in the Builder.
 ### Run a local server
 
 <Steps>
-  <Step title="Clone the Framework Repository">
-    To get started, clone the [Framework repository](https://github.com/writer/writer-framework) from GitHub.
-  </Step>
-  <Step title="Set Up the Development Environment">
-    To develop custom templates in a developer-friendly way, ensure you have a front-end development server with instant reload capabilities. The front-end code for Framework is located in the `ui` folder. With Node and npm installed on your system, run `npm install` to install dependencies. Then, start the server with support for custom component templates using `npm run custom.dev`.
-    ```sh
-    cd ui
-    npm install
-    # "custom.dev" links templates in "custom_components/"
-    # "dev" runs the server without them 
-    npm run custom.dev
-    ```
-  </Step>
-  <Step title="Start the Back-End Server">
-    The command `npm run custom.dev` starts a front-end server, which requires a back-end to function fully. Start Framework via command line, specifying the option `--port 5000`, to provide a back-end on that port. It's recommended to create a new app for testing the template you're developing.
-    ```sh
-    writer create customtester
-    writer edit customtester --port 5000
-    ```
-  </Step>
-  <Step title="Access Framework and Test Custom Component">
-    You should now be able to access Framework via the URL provided by Vite, e.g. `http://localhost:5174`. In the Builder's _Toolkit_, you should see the sample component, _Balloon Message_. Add it to your tester application.
-  </Step>
+	<Step title="Clone the Framework Repository">
+		To get started, clone the [Framework
+		repository](https://github.com/writer/writer-framework) from GitHub.
+	</Step>
+	<Step title="Set Up the Development Environment">
+		To develop custom templates in a developer-friendly way, ensure you have a
+		front-end development server with instant reload capabilities. The front-end
+		code for Framework is located in the `ui` folder. With Node and npm
+		installed on your system, run `npm install` to install dependencies. Then,
+		start the server with support for custom component templates using `npm run
+		custom.dev`. ```sh cd ui npm install # "custom.dev" links templates in
+		"custom_components/" # "dev" runs the server without them npm run custom.dev
+		```
+	</Step>
+	<Step title="Start the Back-End Server">
+		The command `npm run custom.dev` starts a front-end server, which requires a
+		back-end to function fully. Start Framework via command line, specifying the
+		option `--port 5000`, to provide a back-end on that port. It's recommended
+		to create a new app for testing the template you're developing. ```sh writer
+		create customtester writer edit customtester --port 5000 ```
+	</Step>
+	<Step title="Access Framework and Test Custom Component">
+		You should now be able to access Framework via the URL provided by Vite,
+		e.g. `http://localhost:5174`. In the Builder's _Toolkit_, you should see the
+		sample component, _Balloon Message_. Add it to your tester application.
+	</Step>
 </Steps>
 
-
 ### Create a new component
 
 <Tip>
-You can also have a look at the built-in component templates, since their syntax is equivalent. They can be found in the `ui/src/core_components/` folder.
+	You can also have a look at the built-in component templates, since their
+	syntax is equivalent. They can be found in the `ui/src/components/` folder.
 </Tip>
-Go to `ui/src/custom_components/` and open the Vue single-file components, i.e. the `.vue` files. These files contain comments that will help you get started. Try editing the provided templates, you should see changes reflected.
+Go to `ui/src/custom_components/` and open the Vue single-file components, i.e. the
+`.vue` files. These files contain comments that will help you get started. Try editing
+the provided templates, you should see changes reflected.
 
 You can get started by duplicating one of these examples. Make sure you add the new template to the entrypoint, as discussed below.
 
@@ -141,15 +148,15 @@ For custom component templates to be taken into account, they need to be accessi
 ```ts
 // Import the templates
 
-import BubbleMessage from './BubbleMessage.vue';
-import BubbleMessageAdvanced from './BubbleMessageAdvanced.vue';
+import BubbleMessage from "./BubbleMessage.vue";
+import BubbleMessageAdvanced from "./BubbleMessageAdvanced.vue";
 
 // Export an object with the ids and the templates as default
 
 export default {
-    "bubblemessage": BubbleMessage,
-    "bubblemessageadvanced": BubbleMessageAdvanced
-}
+	bubblemessage: BubbleMessage,
+	bubblemessageadvanced: BubbleMessageAdvanced,
+};
 ```
 
 A single or multiple templates can be specified. Take into account that they will all be exported, and later imported, together.
@@ -160,7 +167,7 @@ Execute `npm run custom.build`, this will generate the output `.js` and `.css` f
 
 ```sh
 # "build" builds the entire front-end
-# "custom.build" only builds the custom templates 
+# "custom.build" only builds the custom templates
 
 npm run custom.build
 ```
diff --git a/src/ui/src/builder/BuilderApp.vue b/src/ui/src/builder/BuilderApp.vue
index e98f5fea5..2bb2093fe 100644
--- a/src/ui/src/builder/BuilderApp.vue
+++ b/src/ui/src/builder/BuilderApp.vue
@@ -128,7 +128,7 @@ import BuilderHeader from "./BuilderHeader.vue";
 import BuilderSettings from "./BuilderSettings.vue";
 import BuilderEditor from "./BuilderEditor.vue";
 import BuilderSidebar from "./BuilderSidebar.vue";
-import ComponentRenderer from "../renderer/ComponentRenderer.vue";
+import ComponentRenderer from "../../src/renderer/ComponentRenderer.vue";
 import BuilderComponentShortcuts from "./BuilderComponentShortcuts.vue";
 import injectionKeys from "../injectionKeys";
 import BuilderInstanceTracker from "./BuilderInstanceTracker.vue";
diff --git a/src/ui/src/builder/BuilderComponentShortcuts.vue b/src/ui/src/builder/BuilderComponentShortcuts.vue
index 29b72c2fb..e76c1ecd2 100644
--- a/src/ui/src/builder/BuilderComponentShortcuts.vue
+++ b/src/ui/src/builder/BuilderComponentShortcuts.vue
@@ -149,7 +149,7 @@
 <script setup lang="ts">
 import { computed, inject, onMounted, Ref, ref, toRefs, watch } from "vue";
 import { useComponentActions } from "./useComponentActions";
-import { Component, WriterComponentDefinition } from "../writerTypes";
+import { Component, WriterComponentDefinition } from "@/writerTypes";
 import injectionKeys from "../injectionKeys";
 import { isPlatformMac } from "../core/detectPlatform";
 
diff --git a/src/ui/src/builder/BuilderFieldsAlign.vue b/src/ui/src/builder/BuilderFieldsAlign.vue
index 09037d045..44b0dd2af 100644
--- a/src/ui/src/builder/BuilderFieldsAlign.vue
+++ b/src/ui/src/builder/BuilderFieldsAlign.vue
@@ -70,7 +70,7 @@ import {
 	ref,
 	toRefs,
 } from "vue";
-import { Component } from "../writerTypes";
+import { Component } from "@/writerTypes";
 import { useComponentActions } from "./useComponentActions";
 import injectionKeys from "../injectionKeys";
 import BuilderSelect from "./BuilderSelect.vue";
diff --git a/src/ui/src/builder/BuilderFieldsColor.vue b/src/ui/src/builder/BuilderFieldsColor.vue
index d1f0d12cd..4385bd6b7 100644
--- a/src/ui/src/builder/BuilderFieldsColor.vue
+++ b/src/ui/src/builder/BuilderFieldsColor.vue
@@ -70,7 +70,7 @@ import {
 	ref,
 	toRefs,
 } from "vue";
-import { Component } from "../writerTypes";
+import { Component } from "@/writerTypes";
 import { useComponentActions } from "./useComponentActions";
 import injectionKeys from "../injectionKeys";
 import BuilderTemplateInput from "./BuilderTemplateInput.vue";
diff --git a/src/ui/src/builder/BuilderFieldsKeyValue.vue b/src/ui/src/builder/BuilderFieldsKeyValue.vue
index 0c6441167..006002809 100644
--- a/src/ui/src/builder/BuilderFieldsKeyValue.vue
+++ b/src/ui/src/builder/BuilderFieldsKeyValue.vue
@@ -86,8 +86,8 @@ import {
 	watch,
 } from "vue";
 import injectionKeys from "../injectionKeys";
-import { useEvaluator } from "../renderer/useEvaluator";
-import type { InstancePath } from "../writerTypes";
+import { useEvaluator } from "@/renderer/useEvaluator";
+import type { InstancePath } from "@/writerTypes";
 import BuilderFieldsObject from "./BuilderFieldsObject.vue";
 import BuilderTemplateInput from "./BuilderTemplateInput.vue";
 import { useComponentActions } from "./useComponentActions";
diff --git a/src/ui/src/builder/BuilderFieldsObject.vue b/src/ui/src/builder/BuilderFieldsObject.vue
index c5cc569b7..3931b8e41 100644
--- a/src/ui/src/builder/BuilderFieldsObject.vue
+++ b/src/ui/src/builder/BuilderFieldsObject.vue
@@ -15,7 +15,7 @@
 
 <script setup lang="ts">
 import { toRefs, inject, computed } from "vue";
-import { Component } from "../writerTypes";
+import { Component } from "@/writerTypes";
 import { useComponentActions } from "./useComponentActions";
 import injectionKeys from "../injectionKeys";
 import BuilderTemplateInput from "./BuilderTemplateInput.vue";
diff --git a/src/ui/src/builder/BuilderFieldsPadding.vue b/src/ui/src/builder/BuilderFieldsPadding.vue
index e59a39935..9a0d7b2c5 100644
--- a/src/ui/src/builder/BuilderFieldsPadding.vue
+++ b/src/ui/src/builder/BuilderFieldsPadding.vue
@@ -139,7 +139,7 @@ import {
 	ref,
 	toRefs,
 } from "vue";
-import { Component } from "../writerTypes";
+import { Component } from "@/writerTypes";
 import { useComponentActions } from "./useComponentActions";
 import injectionKeys from "../injectionKeys";
 import BuilderSelect from "./BuilderSelect.vue";
diff --git a/src/ui/src/builder/BuilderFieldsShadow.vue b/src/ui/src/builder/BuilderFieldsShadow.vue
index 6c5dbac00..54be9f0ac 100644
--- a/src/ui/src/builder/BuilderFieldsShadow.vue
+++ b/src/ui/src/builder/BuilderFieldsShadow.vue
@@ -139,7 +139,7 @@ import {
 	ref,
 	toRefs,
 } from "vue";
-import { Component } from "../writerTypes";
+import { Component } from "@/writerTypes";
 import { useComponentActions } from "./useComponentActions";
 import injectionKeys from "../injectionKeys";
 import BuilderTemplateInput from "./BuilderTemplateInput.vue";
diff --git a/src/ui/src/builder/BuilderFieldsText.vue b/src/ui/src/builder/BuilderFieldsText.vue
index 8a8e9adf9..cee9043a6 100644
--- a/src/ui/src/builder/BuilderFieldsText.vue
+++ b/src/ui/src/builder/BuilderFieldsText.vue
@@ -31,7 +31,7 @@
 
 <script setup lang="ts">
 import { toRefs, inject, computed } from "vue";
-import { Component, FieldControl } from "../writerTypes";
+import { Component, FieldControl } from "@/writerTypes";
 import { useComponentActions } from "./useComponentActions";
 import injectionKeys from "../injectionKeys";
 import BuilderTemplateInput from "./BuilderTemplateInput.vue";
diff --git a/src/ui/src/builder/BuilderFieldsWidth.vue b/src/ui/src/builder/BuilderFieldsWidth.vue
index aa0f4d919..1c80e49e9 100644
--- a/src/ui/src/builder/BuilderFieldsWidth.vue
+++ b/src/ui/src/builder/BuilderFieldsWidth.vue
@@ -78,7 +78,7 @@ import {
 	ref,
 	toRefs,
 } from "vue";
-import { Component } from "../writerTypes";
+import { Component } from "@/writerTypes";
 import { useComponentActions } from "./useComponentActions";
 import injectionKeys from "../injectionKeys";
 import BuilderSelect from "./BuilderSelect.vue";
diff --git a/src/ui/src/builder/BuilderSettingsHandlers.vue b/src/ui/src/builder/BuilderSettingsHandlers.vue
index 948dcefa5..19a637a3d 100644
--- a/src/ui/src/builder/BuilderSettingsHandlers.vue
+++ b/src/ui/src/builder/BuilderSettingsHandlers.vue
@@ -162,7 +162,7 @@ import { computed, ComputedRef, inject, Ref, ref } from "vue";
 import { useComponentActions } from "./useComponentActions";
 import injectionKeys from "../injectionKeys";
 import BuilderModal, { ModalAction } from "./BuilderModal.vue";
-import { WriterComponentDefinition } from "../writerTypes";
+import { WriterComponentDefinition } from "@/writerTypes";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
diff --git a/src/ui/src/builder/BuilderSettingsProperties.vue b/src/ui/src/builder/BuilderSettingsProperties.vue
index 7dd4091c9..3564afb22 100644
--- a/src/ui/src/builder/BuilderSettingsProperties.vue
+++ b/src/ui/src/builder/BuilderSettingsProperties.vue
@@ -120,8 +120,8 @@
 <script setup lang="ts">
 import { computed, inject } from "vue";
 import injectionKeys from "../injectionKeys";
-import { parseInstancePathString } from "../renderer/instancePath";
-import { FieldCategory, FieldType, InstancePath } from "../writerTypes";
+import { parseInstancePathString } from "@/renderer/instancePath";
+import { FieldCategory, FieldType, InstancePath } from "@/writerTypes";
 import BuilderFieldsAlign from "./BuilderFieldsAlign.vue";
 import BuilderFieldsColor from "./BuilderFieldsColor.vue";
 import BuilderFieldsKeyValue from "./BuilderFieldsKeyValue.vue";
diff --git a/src/ui/src/builder/BuilderSidebarToolbar.vue b/src/ui/src/builder/BuilderSidebarToolbar.vue
index 1c369f994..5c40f7f62 100644
--- a/src/ui/src/builder/BuilderSidebarToolbar.vue
+++ b/src/ui/src/builder/BuilderSidebarToolbar.vue
@@ -67,7 +67,7 @@
 import { Ref, computed, inject, ref } from "vue";
 import { useDragDropComponent } from "./useDragDropComponent";
 import injectionKeys from "../injectionKeys";
-import { Component, WriterComponentDefinition } from "../writerTypes";
+import { Component, WriterComponentDefinition } from "@/writerTypes";
 import BuilderSidebarTitleSearch from "./BuilderSidebarTitleSearch.vue";
 
 const wf = inject(injectionKeys.core);
diff --git a/src/ui/src/builder/BuilderSidebarTree.vue b/src/ui/src/builder/BuilderSidebarTree.vue
index c6678fe65..97ddac982 100644
--- a/src/ui/src/builder/BuilderSidebarTree.vue
+++ b/src/ui/src/builder/BuilderSidebarTree.vue
@@ -61,7 +61,7 @@ import { inject, computed, nextTick, ref, Ref, ComputedRef } from "vue";
 import { useComponentActions } from "./useComponentActions";
 import BuilderTreeBranch from "./BuilderTreeBranch.vue";
 import injectionKeys from "../injectionKeys";
-import { Component } from "../writerTypes";
+import { Component } from "@/writerTypes";
 import { watch } from "vue";
 import BuilderSidebarTitleSearch from "./BuilderSidebarTitleSearch.vue";
 
diff --git a/src/ui/src/builder/BuilderSwitcher.vue b/src/ui/src/builder/BuilderSwitcher.vue
index 6fef6fedc..106df3bd6 100644
--- a/src/ui/src/builder/BuilderSwitcher.vue
+++ b/src/ui/src/builder/BuilderSwitcher.vue
@@ -14,6 +14,13 @@
 				logEntryCount
 			}}</span>
 		</div>
+		<div
+			:class="{ active: activeId == 'workflows' }"
+			@click="selectOption('workflows')"
+		>
+			<i class="icon material-symbols-outlined"> code </i>
+			Workflows
+		</div>
 		<div
 			:class="{ active: activeId == 'preview' }"
 			@click="selectOption('preview')"
@@ -31,7 +38,7 @@ const ssbm = inject(injectionKeys.builderManager);
 
 let selectedId: Ref<string> = ref(null);
 
-const selectOption = (optionId: "ui" | "code" | "preview") => {
+const selectOption = (optionId: "ui" | "code" | "preview" | "workflows") => {
 	selectedId.value = optionId;
 	ssbm.setMode(optionId);
 	if (ssbm.getMode() != "preview") return;
diff --git a/src/ui/src/builder/BuilderTreeBranch.vue b/src/ui/src/builder/BuilderTreeBranch.vue
index 4f68793fd..43111cd8a 100644
--- a/src/ui/src/builder/BuilderTreeBranch.vue
+++ b/src/ui/src/builder/BuilderTreeBranch.vue
@@ -86,10 +86,10 @@
 import { useComponentActions } from "./useComponentActions";
 import { useDragDropComponent } from "./useDragDropComponent";
 import { computed, inject, nextTick, Ref, ref, toRefs, watch } from "vue";
-import { Component } from "../writerTypes";
+import { Component } from "@/writerTypes";
 import injectionKeys from "../injectionKeys";
 import { onMounted } from "vue";
-import { useEvaluator } from "../renderer/useEvaluator";
+import { useEvaluator } from "@/renderer/useEvaluator";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
diff --git a/src/ui/src/builder/builderManager.ts b/src/ui/src/builder/builderManager.ts
index 2547872d0..b96893e80 100644
--- a/src/ui/src/builder/builderManager.ts
+++ b/src/ui/src/builder/builderManager.ts
@@ -1,5 +1,5 @@
 import { ref, Ref } from "vue";
-import { Component, ClipboardOperation } from "../writerTypes";
+import { Component, ClipboardOperation } from "@/writerTypes";
 
 export const CANDIDATE_CONFIRMATION_DELAY_MS = 1500;
 
@@ -44,7 +44,7 @@ export function generateBuilderManager() {
 	};
 
 	type State = {
-		mode: "ui" | "code" | "preview";
+		mode: "ui" | "code" | "workflows" | "preview";
 		selection: {
 			componentId: Component["id"];
 			instancePath: string;
diff --git a/src/ui/src/builder/useComponentActions.ts b/src/ui/src/builder/useComponentActions.ts
index 89b430373..d1141e386 100644
--- a/src/ui/src/builder/useComponentActions.ts
+++ b/src/ui/src/builder/useComponentActions.ts
@@ -5,7 +5,7 @@ import {
 	Component,
 	ClipboardOperation,
 	ComponentMap,
-} from "../writerTypes";
+} from "@/writerTypes";
 
 export function useComponentActions(wf: Core, ssbm: BuilderManager) {
 	function generateNewComponentId() {
diff --git a/src/ui/src/builder/useDragDropComponent.ts b/src/ui/src/builder/useDragDropComponent.ts
index 98ce47b64..a30b8bd38 100644
--- a/src/ui/src/builder/useDragDropComponent.ts
+++ b/src/ui/src/builder/useDragDropComponent.ts
@@ -1,5 +1,5 @@
 import { Ref, ref } from "vue";
-import { Core, Component } from "../writerTypes";
+import { Core, Component } from "@/writerTypes";
 import { CANDIDATE_CONFIRMATION_DELAY_MS } from "./builderManager";
 
 /*
diff --git a/src/ui/src/core_components/base/BaseCollapsible.vue b/src/ui/src/components/core/base/BaseCollapsible.vue
similarity index 100%
rename from src/ui/src/core_components/base/BaseCollapsible.vue
rename to src/ui/src/components/core/base/BaseCollapsible.vue
diff --git a/src/ui/src/core_components/base/BaseContainer.vue b/src/ui/src/components/core/base/BaseContainer.vue
similarity index 94%
rename from src/ui/src/core_components/base/BaseContainer.vue
rename to src/ui/src/components/core/base/BaseContainer.vue
index 98263958b..203656473 100644
--- a/src/ui/src/core_components/base/BaseContainer.vue
+++ b/src/ui/src/components/core/base/BaseContainer.vue
@@ -41,7 +41,7 @@ const rootStyle = computed(() => {
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 .BaseContainer {
 	display: flex;
diff --git a/src/ui/src/core_components/base/BaseControlBar.vue b/src/ui/src/components/core/base/BaseControlBar.vue
similarity index 96%
rename from src/ui/src/core_components/base/BaseControlBar.vue
rename to src/ui/src/components/core/base/BaseControlBar.vue
index 8dc567a15..6ce2da620 100644
--- a/src/ui/src/core_components/base/BaseControlBar.vue
+++ b/src/ui/src/components/core/base/BaseControlBar.vue
@@ -34,7 +34,7 @@ function copyToClipboard({ text = "" }: { text?: string }) {
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 .BaseControlBar {
 	margin: 10px 0;
diff --git a/src/ui/src/core_components/base/BaseEmptiness.vue b/src/ui/src/components/core/base/BaseEmptiness.vue
similarity index 91%
rename from src/ui/src/core_components/base/BaseEmptiness.vue
rename to src/ui/src/components/core/base/BaseEmptiness.vue
index f0577714b..a833f0855 100644
--- a/src/ui/src/core_components/base/BaseEmptiness.vue
+++ b/src/ui/src/components/core/base/BaseEmptiness.vue
@@ -13,7 +13,7 @@
 
 <script setup lang="ts">
 import { computed, inject } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 
 const props = defineProps({
 	componentId: { type: String, required: true },
@@ -28,7 +28,7 @@ const definition = computed(() =>
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 .BaseEmptiness {
 	background: #e4e7ed;
diff --git a/src/ui/src/core_components/base/BaseInputColor.vue b/src/ui/src/components/core/base/BaseInputColor.vue
similarity index 96%
rename from src/ui/src/core_components/base/BaseInputColor.vue
rename to src/ui/src/components/core/base/BaseInputColor.vue
index 7a6ba7257..770314eef 100644
--- a/src/ui/src/core_components/base/BaseInputColor.vue
+++ b/src/ui/src/components/core/base/BaseInputColor.vue
@@ -15,7 +15,7 @@
 
 <script setup lang="ts">
 import { PropType, computed, inject, ref } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 
 const props = defineProps({
 	value: { type: String, required: false, default: undefined },
diff --git a/src/ui/src/core_components/base/BaseInputRange.vue b/src/ui/src/components/core/base/BaseInputRange.vue
similarity index 100%
rename from src/ui/src/core_components/base/BaseInputRange.vue
rename to src/ui/src/components/core/base/BaseInputRange.vue
diff --git a/src/ui/src/core_components/base/BaseInputWrapper.vue b/src/ui/src/components/core/base/BaseInputWrapper.vue
similarity index 93%
rename from src/ui/src/core_components/base/BaseInputWrapper.vue
rename to src/ui/src/components/core/base/BaseInputWrapper.vue
index 9fcaf723f..1cb3b391b 100644
--- a/src/ui/src/core_components/base/BaseInputWrapper.vue
+++ b/src/ui/src/components/core/base/BaseInputWrapper.vue
@@ -17,7 +17,7 @@ const props = defineProps<{
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 .BaseInputWrapper {
 	display: flex;
diff --git a/src/ui/src/core_components/base/BaseJsonViewer.utils.ts b/src/ui/src/components/core/base/BaseJsonViewer.utils.ts
similarity index 100%
rename from src/ui/src/core_components/base/BaseJsonViewer.utils.ts
rename to src/ui/src/components/core/base/BaseJsonViewer.utils.ts
diff --git a/src/ui/src/core_components/base/BaseJsonViewer.vue b/src/ui/src/components/core/base/BaseJsonViewer.vue
similarity index 100%
rename from src/ui/src/core_components/base/BaseJsonViewer.vue
rename to src/ui/src/components/core/base/BaseJsonViewer.vue
diff --git a/src/ui/src/core_components/base/BaseJsonViewerChildrenCounter.vue b/src/ui/src/components/core/base/BaseJsonViewerChildrenCounter.vue
similarity index 100%
rename from src/ui/src/core_components/base/BaseJsonViewerChildrenCounter.vue
rename to src/ui/src/components/core/base/BaseJsonViewerChildrenCounter.vue
diff --git a/src/ui/src/core_components/base/BaseJsonViewerCollapsible.vue b/src/ui/src/components/core/base/BaseJsonViewerCollapsible.vue
similarity index 100%
rename from src/ui/src/core_components/base/BaseJsonViewerCollapsible.vue
rename to src/ui/src/components/core/base/BaseJsonViewerCollapsible.vue
diff --git a/src/ui/src/core_components/base/BaseJsonViewerObject.vue b/src/ui/src/components/core/base/BaseJsonViewerObject.vue
similarity index 100%
rename from src/ui/src/core_components/base/BaseJsonViewerObject.vue
rename to src/ui/src/components/core/base/BaseJsonViewerObject.vue
diff --git a/src/ui/src/core_components/base/BaseJsonViewerValue.vue b/src/ui/src/components/core/base/BaseJsonViewerValue.vue
similarity index 100%
rename from src/ui/src/core_components/base/BaseJsonViewerValue.vue
rename to src/ui/src/components/core/base/BaseJsonViewerValue.vue
diff --git a/src/ui/src/core_components/base/BaseMarkdown.vue b/src/ui/src/components/core/base/BaseMarkdown.vue
similarity index 100%
rename from src/ui/src/core_components/base/BaseMarkdown.vue
rename to src/ui/src/components/core/base/BaseMarkdown.vue
diff --git a/src/ui/src/core_components/base/BaseSelect.vue b/src/ui/src/components/core/base/BaseSelect.vue
similarity index 99%
rename from src/ui/src/core_components/base/BaseSelect.vue
rename to src/ui/src/components/core/base/BaseSelect.vue
index cd5c9e514..947545e5e 100644
--- a/src/ui/src/core_components/base/BaseSelect.vue
+++ b/src/ui/src/components/core/base/BaseSelect.vue
@@ -327,8 +327,8 @@ function highlightItem(offset: number) {
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
-@import "../../renderer/colorTransformations.css";
+@import "@/renderer/sharedStyles.css";
+@import "@/renderer/colorTransformations.css";
 
 .BaseSelect {
 	width: 100%;
diff --git a/src/ui/src/core_components/content/CoreAnnotatedText.vue b/src/ui/src/components/core/content/CoreAnnotatedText.vue
similarity index 97%
rename from src/ui/src/core_components/content/CoreAnnotatedText.vue
rename to src/ui/src/components/core/content/CoreAnnotatedText.vue
index 6e41e0e15..1fe8c3115 100644
--- a/src/ui/src/core_components/content/CoreAnnotatedText.vue
+++ b/src/ui/src/components/core/content/CoreAnnotatedText.vue
@@ -31,7 +31,7 @@ import {
 	buttonTextColor,
 	cssClasses,
 	primaryTextColor,
-} from "../../renderer/sharedStyleFields";
+} from "@/renderer/sharedStyleFields";
 import BaseControlBar from "../base/BaseControlBar.vue";
 export default {
 	writer: {
@@ -91,8 +91,8 @@ export default {
 };
 </script>
 <script setup lang="ts">
-import { FieldCategory, FieldType } from "../../writerTypes";
-import injectionKeys from "../../injectionKeys";
+import { FieldCategory, FieldType } from "@/writerTypes";
+import injectionKeys from "@/injectionKeys";
 import { computed, ComputedRef, inject } from "vue";
 import chroma, { Color } from "chroma-js";
 import BaseEmptiness from "../base/BaseEmptiness.vue";
diff --git a/src/ui/src/core_components/content/CoreAvatar.vue b/src/ui/src/components/core/content/CoreAvatar.vue
similarity index 93%
rename from src/ui/src/core_components/content/CoreAvatar.vue
rename to src/ui/src/components/core/content/CoreAvatar.vue
index ace56221b..9b3bfcbc1 100644
--- a/src/ui/src/core_components/content/CoreAvatar.vue
+++ b/src/ui/src/components/core/content/CoreAvatar.vue
@@ -24,14 +24,14 @@
 </template>
 
 <script lang="ts">
-import { FieldCategory, FieldType } from "../../writerTypes";
+import { FieldCategory, FieldType } from "@/writerTypes";
 import {
 	cssClasses,
 	primaryTextColor,
 	secondaryTextColor,
 	separatorColor,
-} from "../../renderer/sharedStyleFields";
-import { getClick } from "../../renderer/syntheticEvents";
+} from "@/renderer/sharedStyleFields";
+import { getClick } from "@/renderer/syntheticEvents";
 
 const clickHandlerStub = `
 def handle_avatar_click():
@@ -98,7 +98,7 @@ export default {
 </script>
 <script setup lang="ts">
 import { Ref, computed, inject, ref } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 
 const rootEl: Ref<HTMLElement> = ref(null);
 const fields = inject(injectionKeys.evaluatedFields);
@@ -117,7 +117,7 @@ function handleClick(ev: MouseEvent) {
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 .CoreAvatar {
 	display: flex;
diff --git a/src/ui/src/core_components/content/CoreChatbot.vue b/src/ui/src/components/core/content/CoreChatbot.vue
similarity index 97%
rename from src/ui/src/core_components/content/CoreChatbot.vue
rename to src/ui/src/components/core/content/CoreChatbot.vue
index 277f47f7c..1642defb2 100644
--- a/src/ui/src/core_components/content/CoreChatbot.vue
+++ b/src/ui/src/components/core/content/CoreChatbot.vue
@@ -138,9 +138,9 @@ See the stubs for more details.
 </template>
 
 <script lang="ts">
-import LoadingSymbol from "../../renderer/LoadingSymbol.vue";
+import LoadingSymbol from "@/renderer/LoadingSymbol.vue";
 import BaseMarkdown from "../base/BaseMarkdown.vue";
-import { FieldCategory, FieldType } from "../../writerTypes";
+import { FieldCategory, FieldType } from "@/writerTypes";
 import {
 	accentColor,
 	buttonColor,
@@ -150,10 +150,10 @@ import {
 	primaryTextColor,
 	secondaryTextColor,
 	separatorColor,
-} from "../../renderer/sharedStyleFields";
+} from "@/renderer/sharedStyleFields";
 import prettyBytes from "pretty-bytes";
-import WdsTextareaInput from "../../wds/WdsTextareaInput.vue";
-import WdsControl from "../../wds/WdsControl.vue";
+import WdsTextareaInput from "@/wds/WdsTextareaInput.vue";
+import WdsControl from "@/wds/WdsControl.vue";
 
 const MAX_FILE_SIZE = 200 * 1024 * 1024;
 
@@ -347,7 +347,7 @@ import {
 	computed,
 	ComputedRef,
 } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 
 type Action = {
 	subheading?: string;
@@ -527,8 +527,8 @@ onBeforeUnmount(() => {
 });
 </script>
 <style scoped>
-@import "../../renderer/sharedStyles.css";
-@import "../../renderer/colorTransformations.css";
+@import "@/renderer/sharedStyles.css";
+@import "@/renderer/colorTransformations.css";
 
 .CoreChatbot {
 	display: grid;
diff --git a/src/ui/src/core_components/content/CoreDataframe.vue b/src/ui/src/components/core/content/CoreDataframe.vue
similarity index 98%
rename from src/ui/src/core_components/content/CoreDataframe.vue
rename to src/ui/src/components/core/content/CoreDataframe.vue
index f4dcba5c3..cddbe3073 100644
--- a/src/ui/src/core_components/content/CoreDataframe.vue
+++ b/src/ui/src/components/core/content/CoreDataframe.vue
@@ -110,20 +110,20 @@
 
 <script lang="ts">
 import { Ref, computed, inject, ref } from "vue";
-import { FieldCategory, FieldType } from "../../writerTypes";
+import { FieldCategory, FieldType } from "@/writerTypes";
 import {
 	cssClasses,
 	primaryTextColor,
 	secondaryTextColor,
 	separatorColor,
-} from "../../renderer/sharedStyleFields";
+} from "@/renderer/sharedStyleFields";
 import { onMounted } from "vue";
 import { watch } from "vue";
 import { nextTick } from "vue";
 import { ComputedRef } from "vue";
 import { onUnmounted } from "vue";
-import WdsTextInput from "../../wds/WdsTextInput.vue";
-import WdsControl from "../../wds/WdsControl.vue";
+import WdsTextInput from "@/wds/WdsTextInput.vue";
+import WdsControl from "@/wds/WdsControl.vue";
 import BaseMarkdown from "../base/BaseMarkdown.vue";
 
 const description = "A component to display Pandas DataFrames.";
@@ -224,7 +224,7 @@ export default {
 };
 </script>
 <script setup lang="ts">
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 import type * as aq from "arquero";
 import type { Table } from "apache-arrow";
 
@@ -539,8 +539,8 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
-@import "../../renderer/colorTransformations.css";
+@import "@/renderer/sharedStyles.css";
+@import "@/renderer/colorTransformations.css";
 
 .CoreDataframe {
 	font-size: 0.8rem;
diff --git a/src/ui/src/core_components/content/CoreHeading.vue b/src/ui/src/components/core/content/CoreHeading.vue
similarity index 86%
rename from src/ui/src/core_components/content/CoreHeading.vue
rename to src/ui/src/components/core/content/CoreHeading.vue
index 642f00df0..f1059d2a2 100644
--- a/src/ui/src/core_components/content/CoreHeading.vue
+++ b/src/ui/src/components/core/content/CoreHeading.vue
@@ -12,8 +12,8 @@
 </template>
 
 <script lang="ts">
-import { FieldCategory, FieldType } from "../../writerTypes";
-import { cssClasses, primaryTextColor } from "../../renderer/sharedStyleFields";
+import { FieldCategory, FieldType } from "@/writerTypes";
+import { cssClasses, primaryTextColor } from "@/renderer/sharedStyleFields";
 
 const description =
 	"A text component used to display headings or titles in different sizes and styles.";
@@ -63,11 +63,11 @@ export default {
 </script>
 <script setup lang="ts">
 import { inject } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 const fields = inject(injectionKeys.evaluatedFields);
 </script>
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 .CoreHeading {
 	color: var(--primaryTextColor);
diff --git a/src/ui/src/core_components/content/CoreIcon.vue b/src/ui/src/components/core/content/CoreIcon.vue
similarity index 85%
rename from src/ui/src/core_components/content/CoreIcon.vue
rename to src/ui/src/components/core/content/CoreIcon.vue
index f380bd195..fab63f15f 100644
--- a/src/ui/src/core_components/content/CoreIcon.vue
+++ b/src/ui/src/components/core/content/CoreIcon.vue
@@ -17,8 +17,8 @@
 </template>
 
 <script lang="ts">
-import { FieldCategory, FieldType } from "../../writerTypes";
-import { cssClasses } from "../../renderer/sharedStyleFields";
+import { FieldCategory, FieldType } from "@/writerTypes";
+import { cssClasses } from "@/renderer/sharedStyleFields";
 
 export default {
 	writer: {
@@ -54,13 +54,13 @@ export default {
 
 <script setup lang="ts">
 import { inject } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 
 const fields = inject(injectionKeys.evaluatedFields);
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 .icon {
 	display: flex;
diff --git a/src/ui/src/core_components/content/CoreImage.vue b/src/ui/src/components/core/content/CoreImage.vue
similarity index 95%
rename from src/ui/src/core_components/content/CoreImage.vue
rename to src/ui/src/components/core/content/CoreImage.vue
index a734e0c7a..c78d84739 100644
--- a/src/ui/src/core_components/content/CoreImage.vue
+++ b/src/ui/src/components/core/content/CoreImage.vue
@@ -30,12 +30,9 @@ You can also use packed files or bytes:
 </template>
 
 <script lang="ts">
-import { FieldCategory, FieldType } from "../../writerTypes";
-import {
-	cssClasses,
-	secondaryTextColor,
-} from "../../renderer/sharedStyleFields";
-import { getClick } from "../../renderer/syntheticEvents";
+import { FieldCategory, FieldType } from "@/writerTypes";
+import { cssClasses, secondaryTextColor } from "@/renderer/sharedStyleFields";
+import { getClick } from "@/renderer/syntheticEvents";
 
 const description = "A component to display images.";
 
@@ -93,7 +90,7 @@ export default {
 
 <script setup lang="ts">
 import { Ref, computed, inject, ref } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 
 const rootEl: Ref<HTMLElement> = ref(null);
 const wf = inject(injectionKeys.core);
@@ -126,7 +123,7 @@ function handleClick(ev: MouseEvent) {
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 .CoreImage {
 	width: fit-content;
diff --git a/src/ui/src/core_components/content/CoreJsonViewer.vue b/src/ui/src/components/core/content/CoreJsonViewer.vue
similarity index 94%
rename from src/ui/src/core_components/content/CoreJsonViewer.vue
rename to src/ui/src/components/core/content/CoreJsonViewer.vue
index f44c9b3d6..cd059a2ae 100644
--- a/src/ui/src/core_components/content/CoreJsonViewer.vue
+++ b/src/ui/src/components/core/content/CoreJsonViewer.vue
@@ -15,12 +15,12 @@ import {
 	cssClasses,
 	secondaryTextColor,
 	separatorColor,
-} from "../../renderer/sharedStyleFields";
+} from "@/renderer/sharedStyleFields";
 import {
 	FieldCategory,
 	FieldType,
 	WriterComponentDefinition,
-} from "../../writerTypes";
+} from "@/writerTypes";
 
 const description = "A component to explore JSON data as a hierarchy.";
 
@@ -74,7 +74,7 @@ export default { writer: definition };
 
 <script setup lang="ts">
 import { computed, inject } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 import type { JsonData } from "../base/BaseJsonViewer.vue";
 import BaseJsonViewer from "../base/BaseJsonViewer.vue";
 import BaseJsonViewerChildrenCounter from "../base/BaseJsonViewerChildrenCounter.vue";
diff --git a/src/ui/src/core_components/content/CoreLink.vue b/src/ui/src/components/core/content/CoreLink.vue
similarity index 90%
rename from src/ui/src/core_components/content/CoreLink.vue
rename to src/ui/src/components/core/content/CoreLink.vue
index 20dc2dcad..d35828d9f 100644
--- a/src/ui/src/core_components/content/CoreLink.vue
+++ b/src/ui/src/components/core/content/CoreLink.vue
@@ -11,9 +11,9 @@
 </template>
 
 <script lang="ts">
-import { FieldType, Core } from "../../writerTypes";
-import { cssClasses, primaryTextColor } from "../../renderer/sharedStyleFields";
-import injectionKeys from "../../injectionKeys";
+import { FieldType, Core } from "@/writerTypes";
+import { cssClasses, primaryTextColor } from "@/renderer/sharedStyleFields";
+import injectionKeys from "@/injectionKeys";
 export default {
 	writer: {
 		name: "Link",
diff --git a/src/ui/src/core_components/content/CoreMessage.vue b/src/ui/src/components/core/content/CoreMessage.vue
similarity index 92%
rename from src/ui/src/core_components/content/CoreMessage.vue
rename to src/ui/src/components/core/content/CoreMessage.vue
index 294b02f22..640a9e3eb 100644
--- a/src/ui/src/core_components/content/CoreMessage.vue
+++ b/src/ui/src/components/core/content/CoreMessage.vue
@@ -29,8 +29,8 @@ else:
 </template>
 
 <script lang="ts">
-import { cssClasses, primaryTextColor } from "../../renderer/sharedStyleFields";
-import { FieldCategory, FieldType } from "../../writerTypes";
+import { cssClasses, primaryTextColor } from "@/renderer/sharedStyleFields";
+import { FieldCategory, FieldType } from "@/writerTypes";
 
 const description =
 	"A component that displays a message in various styles, including success, error, warning, and informational.";
@@ -86,8 +86,8 @@ export default {
 
 <script setup lang="ts">
 import { computed, inject } from "vue";
-import injectionKeys from "../../injectionKeys";
-import LoadingSymbol from "../../renderer/LoadingSymbol.vue";
+import injectionKeys from "@/injectionKeys";
+import LoadingSymbol from "@/renderer/LoadingSymbol.vue";
 import BaseEmptiness from "../base/BaseEmptiness.vue";
 
 const componentId = inject(injectionKeys.componentId);
@@ -139,7 +139,7 @@ const rootStyle = computed(() => {
 });
 </script>
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 .CoreMessage {
 	color: var(--primaryTextColor);
diff --git a/src/ui/src/core_components/content/CoreMetric.vue b/src/ui/src/components/core/content/CoreMetric.vue
similarity index 94%
rename from src/ui/src/core_components/content/CoreMetric.vue
rename to src/ui/src/components/core/content/CoreMetric.vue
index 46caf8a2b..3913dd2fa 100644
--- a/src/ui/src/core_components/content/CoreMetric.vue
+++ b/src/ui/src/components/core/content/CoreMetric.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script lang="ts">
-import { FieldCategory, FieldType } from "../../writerTypes";
+import { FieldCategory, FieldType } from "@/writerTypes";
 import {
 	cssClasses,
 	primaryTextColor,
 	secondaryTextColor,
-} from "../../renderer/sharedStyleFields";
+} from "@/renderer/sharedStyleFields";
 
 const description =
 	"A component that prominently displays a metric value and associated information.";
@@ -75,7 +75,7 @@ export default {
 </script>
 <script setup lang="ts">
 import { computed, inject } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 const fields = inject(injectionKeys.evaluatedFields);
 
 const sentiment = computed(() => {
@@ -112,7 +112,7 @@ const rootStyle = computed(() => {
 });
 </script>
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 .CoreMetric {
 	color: var(--primaryTextColor);
diff --git a/src/ui/src/core_components/content/CorePlotlyGraph.vue b/src/ui/src/components/core/content/CorePlotlyGraph.vue
similarity index 95%
rename from src/ui/src/core_components/content/CorePlotlyGraph.vue
rename to src/ui/src/components/core/content/CorePlotlyGraph.vue
index 768d5b19c..690afd75b 100644
--- a/src/ui/src/core_components/content/CorePlotlyGraph.vue
+++ b/src/ui/src/components/core/content/CorePlotlyGraph.vue
@@ -10,8 +10,8 @@ For example, implement cross-filtering.
 </template>
 
 <script lang="ts">
-import { FieldType } from "../../writerTypes";
-import { cssClasses } from "../../renderer/sharedStyleFields";
+import { FieldType } from "@/writerTypes";
+import { cssClasses } from "@/renderer/sharedStyleFields";
 
 const description = "A component that displays Plotly graphs.";
 
@@ -56,7 +56,7 @@ export default {
 
 <script setup lang="ts">
 import { computed, inject, onMounted, Ref, ref, watch } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 
 const rootEl: Ref<HTMLElement> = ref(null);
 const chartTargetEl: Ref<HTMLElement> = ref(null);
@@ -169,7 +169,7 @@ onMounted(async () => {
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 .CorePlotlyGraph {
 	position: relative;
diff --git a/src/ui/src/core_components/content/CoreTags.vue b/src/ui/src/components/core/content/CoreTags.vue
similarity index 94%
rename from src/ui/src/core_components/content/CoreTags.vue
rename to src/ui/src/components/core/content/CoreTags.vue
index 145e028d9..b09502ac2 100644
--- a/src/ui/src/core_components/content/CoreTags.vue
+++ b/src/ui/src/components/core/content/CoreTags.vue
@@ -24,8 +24,8 @@
 </template>
 
 <script lang="ts">
-import { FieldCategory, FieldType } from "../../writerTypes";
-import { cssClasses, primaryTextColor } from "../../renderer/sharedStyleFields";
+import { FieldCategory, FieldType } from "@/writerTypes";
+import { cssClasses, primaryTextColor } from "@/renderer/sharedStyleFields";
 
 const clickHandlerStub = `
 def handle_tag_click(state, payload):
@@ -85,7 +85,7 @@ export default {
 </script>
 <script setup lang="ts">
 import { Ref, computed, inject, ref } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 import chroma from "chroma-js";
 
 const COLOR_STEPS = [
@@ -153,7 +153,7 @@ function handleTagClick(tagId: string) {
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 .CoreTags {
 	display: flex;
diff --git a/src/ui/src/core_components/content/CoreText.vue b/src/ui/src/components/core/content/CoreText.vue
similarity index 90%
rename from src/ui/src/core_components/content/CoreText.vue
rename to src/ui/src/components/core/content/CoreText.vue
index 4214221ed..ef50c4d95 100644
--- a/src/ui/src/core_components/content/CoreText.vue
+++ b/src/ui/src/components/core/content/CoreText.vue
@@ -22,9 +22,9 @@
 </template>
 
 <script lang="ts">
-import { cssClasses, primaryTextColor } from "../../renderer/sharedStyleFields";
-import { getClick } from "../../renderer/syntheticEvents";
-import { FieldCategory, FieldControl, FieldType } from "../../writerTypes";
+import { cssClasses, primaryTextColor } from "@/renderer/sharedStyleFields";
+import { getClick } from "@/renderer/syntheticEvents";
+import { FieldCategory, FieldControl, FieldType } from "@/writerTypes";
 
 const clickHandlerStub = `
 def click_handler(state):
@@ -85,7 +85,7 @@ export default {
 </script>
 <script setup lang="ts">
 import { Ref, computed, inject, ref } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 import BaseEmptiness from "../base/BaseEmptiness.vue";
 import BaseMarkdown from "../base/BaseMarkdown.vue";
 
@@ -120,7 +120,7 @@ function handleClick(ev: MouseEvent) {
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 .CoreText {
 	color: var(--primaryTextColor);
diff --git a/src/ui/src/core_components/content/CoreVegaLiteChart.vue b/src/ui/src/components/core/content/CoreVegaLiteChart.vue
similarity index 91%
rename from src/ui/src/core_components/content/CoreVegaLiteChart.vue
rename to src/ui/src/components/core/content/CoreVegaLiteChart.vue
index e4f9dd1d6..1881c631b 100644
--- a/src/ui/src/core_components/content/CoreVegaLiteChart.vue
+++ b/src/ui/src/components/core/content/CoreVegaLiteChart.vue
@@ -15,8 +15,8 @@ Alternatively, you can work with Vega-Lite directly.
 </template>
 
 <script lang="ts">
-import { FieldType } from "../../writerTypes";
-import { cssClasses } from "../../renderer/sharedStyleFields";
+import { FieldType } from "@/writerTypes";
+import { cssClasses } from "@/renderer/sharedStyleFields";
 
 const description = "A component that displays Vega-Lite/Altair charts.";
 
@@ -58,7 +58,7 @@ export default {
 
 <script setup lang="ts">
 import { inject, onMounted, Ref, ref, watch } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 
 const rootEl: Ref<HTMLElement> = ref(null);
 const chartTargetEl: Ref<HTMLElement> = ref(null);
@@ -88,7 +88,7 @@ onMounted(() => {
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 .CoreVegaLiteChart {
 	min-height: 1px;
diff --git a/src/ui/src/core_components/content/CoreVideoPlayer.vue b/src/ui/src/components/core/content/CoreVideoPlayer.vue
similarity index 93%
rename from src/ui/src/core_components/content/CoreVideoPlayer.vue
rename to src/ui/src/components/core/content/CoreVideoPlayer.vue
index 2430f6585..b8651c42c 100644
--- a/src/ui/src/core_components/content/CoreVideoPlayer.vue
+++ b/src/ui/src/components/core/content/CoreVideoPlayer.vue
@@ -24,8 +24,8 @@ Afterwards, you can reference the video using the syntax \`@{vid_f}\`.
 </template>
 
 <script lang="ts">
-import { FieldType } from "../../writerTypes";
-import { cssClasses } from "../../renderer/sharedStyleFields";
+import { FieldType } from "@/writerTypes";
+import { cssClasses } from "@/renderer/sharedStyleFields";
 
 const description =
 	"A video player component that can play various video formats.";
@@ -90,7 +90,7 @@ export default {
 
 <script setup lang="ts">
 import { inject } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 
 const fields = inject(injectionKeys.evaluatedFields);
 </script>
diff --git a/src/ui/src/core_components/embed/CoreGoogleMaps.vue b/src/ui/src/components/core/embed/CoreGoogleMaps.vue
similarity index 96%
rename from src/ui/src/core_components/embed/CoreGoogleMaps.vue
rename to src/ui/src/components/core/embed/CoreGoogleMaps.vue
index c0abd9146..360022297 100644
--- a/src/ui/src/core_components/embed/CoreGoogleMaps.vue
+++ b/src/ui/src/components/core/embed/CoreGoogleMaps.vue
@@ -11,8 +11,8 @@
 
 <script lang="ts">
 /* global google */
-import { FieldType } from "../../writerTypes";
-import { cssClasses } from "../../renderer/sharedStyleFields";
+import { FieldType } from "@/writerTypes";
+import { cssClasses } from "@/renderer/sharedStyleFields";
 
 const description =
 	"A component to embed a Google Map. It can be used to display a map with markers.";
@@ -88,7 +88,7 @@ export default {
 
 <script setup lang="ts">
 import { Ref, inject, ref, onMounted, watch, computed } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 
 const rootEl: Ref<HTMLElement> = ref(null);
 const mapEl: Ref<HTMLElement> = ref(null);
@@ -200,7 +200,7 @@ watch(fields.mapId, initMap);
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 .CoreGoogleMaps {
 	position: relative;
diff --git a/src/ui/src/core_components/embed/CoreIFrame.vue b/src/ui/src/components/core/embed/CoreIFrame.vue
similarity index 89%
rename from src/ui/src/core_components/embed/CoreIFrame.vue
rename to src/ui/src/components/core/embed/CoreIFrame.vue
index f09b08dcd..7c887ecee 100644
--- a/src/ui/src/core_components/embed/CoreIFrame.vue
+++ b/src/ui/src/components/core/embed/CoreIFrame.vue
@@ -14,8 +14,8 @@
 </template>
 
 <script lang="ts">
-import { FieldType } from "../../writerTypes";
-import { cssClasses, separatorColor } from "../../renderer/sharedStyleFields";
+import { FieldType } from "@/writerTypes";
+import { cssClasses, separatorColor } from "@/renderer/sharedStyleFields";
 
 const description = "A component to embed an external resource in an iframe.";
 
@@ -53,7 +53,7 @@ export default {
 
 <script setup lang="ts">
 import { Ref, inject, ref } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 
 const rootEl: Ref<HTMLElement> = ref(null);
 const fields = inject(injectionKeys.evaluatedFields);
@@ -65,7 +65,7 @@ function handleLoad() {
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 .CoreIFrame {
 	position: relative;
diff --git a/src/ui/src/core_components/embed/CoreMapbox.vue b/src/ui/src/components/core/embed/CoreMapbox.vue
similarity index 96%
rename from src/ui/src/core_components/embed/CoreMapbox.vue
rename to src/ui/src/components/core/embed/CoreMapbox.vue
index d5125eb53..5f335bb11 100644
--- a/src/ui/src/core_components/embed/CoreMapbox.vue
+++ b/src/ui/src/components/core/embed/CoreMapbox.vue
@@ -10,8 +10,8 @@
 </template>
 
 <script lang="ts">
-import { FieldType } from "../../writerTypes";
-import { cssClasses } from "../../renderer/sharedStyleFields";
+import { FieldType } from "@/writerTypes";
+import { cssClasses } from "@/renderer/sharedStyleFields";
 
 const markersDefaultData = [
 	{ lat: 37.79322359164316, lng: -122.39999318828129, name: "Marker" },
@@ -85,7 +85,7 @@ export default {
 <script setup lang="ts">
 import "mapbox-gl/dist/mapbox-gl.css";
 import { inject, ref, watch, computed } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 import type * as mapboxgl from "mapbox-gl";
 const fields = inject(injectionKeys.evaluatedFields);
 const rootEl = ref(null);
@@ -203,7 +203,7 @@ watch([mapEl, fields.accessToken], () => {
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 .CoreMapbox {
 	position: relative;
diff --git a/src/ui/src/core_components/embed/CorePDF.vue b/src/ui/src/components/core/embed/CorePDF.vue
similarity index 96%
rename from src/ui/src/core_components/embed/CorePDF.vue
rename to src/ui/src/components/core/embed/CorePDF.vue
index 98e40c1e8..608576e64 100644
--- a/src/ui/src/core_components/embed/CorePDF.vue
+++ b/src/ui/src/components/core/embed/CorePDF.vue
@@ -45,14 +45,14 @@
 </template>
 
 <script lang="ts">
-import { FieldType } from "../../writerTypes";
+import { FieldType } from "@/writerTypes";
 import {
 	cssClasses,
 	separatorColor,
 	primaryTextColor,
 	containerBackgroundColor,
-} from "../../renderer/sharedStyleFields";
-import WdsControl from "../../wds/WdsControl.vue";
+} from "@/renderer/sharedStyleFields";
+import WdsControl from "@/wds/WdsControl.vue";
 
 const description = "A component to embed PDF documents.";
 
@@ -105,7 +105,7 @@ export default {
 
 <script setup lang="ts">
 import { inject, ref, watch, computed, onMounted } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 import "@tato30/vue-pdf/style.css";
 
 type MatchType = { str: string; page: number; index: number };
@@ -310,8 +310,8 @@ watch(fields.page, () => {
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
-@import "../../renderer/colorTransformations.css";
+@import "@/renderer/sharedStyles.css";
+@import "@/renderer/colorTransformations.css";
 
 .CorePDF {
 	position: relative;
diff --git a/src/ui/src/core_components/input/CoreCheckboxInput.vue b/src/ui/src/components/core/input/CoreCheckboxInput.vue
similarity index 91%
rename from src/ui/src/core_components/input/CoreCheckboxInput.vue
rename to src/ui/src/components/core/input/CoreCheckboxInput.vue
index 2161b08d6..d2f8eb70c 100644
--- a/src/ui/src/core_components/input/CoreCheckboxInput.vue
+++ b/src/ui/src/components/core/input/CoreCheckboxInput.vue
@@ -38,12 +38,12 @@
 <script lang="ts">
 import { ComponentPublicInstance, inject } from "vue";
 import { ref } from "vue";
-import { FieldCategory, FieldType } from "../../writerTypes";
+import { FieldCategory, FieldType } from "@/writerTypes";
 import {
 	accentColor,
 	cssClasses,
 	primaryTextColor,
-} from "../../renderer/sharedStyleFields";
+} from "@/renderer/sharedStyleFields";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
 
 const defaultOptions = { a: "Option A", b: "Option B" };
@@ -103,8 +103,8 @@ export default {
 </script>
 
 <script setup lang="ts">
-import injectionKeys from "../../injectionKeys";
-import { useFormValueBroker } from "../../renderer/useFormValueBroker";
+import injectionKeys from "@/injectionKeys";
+import { useFormValueBroker } from "@/renderer/useFormValueBroker";
 
 const fields = inject(injectionKeys.evaluatedFields);
 const rootInstance = ref<ComponentPublicInstance | null>(null);
@@ -133,8 +133,8 @@ function getCheckedKeys() {
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
-@import "../../renderer/colorTransformations.css";
+@import "@/renderer/sharedStyles.css";
+@import "@/renderer/colorTransformations.css";
 
 .CoreCheckboxInput {
 	width: fit-content;
diff --git a/src/ui/src/core_components/input/CoreColorInput.vue b/src/ui/src/components/core/input/CoreColorInput.vue
similarity index 85%
rename from src/ui/src/core_components/input/CoreColorInput.vue
rename to src/ui/src/components/core/input/CoreColorInput.vue
index 0c37e598a..1b5785591 100644
--- a/src/ui/src/core_components/input/CoreColorInput.vue
+++ b/src/ui/src/components/core/input/CoreColorInput.vue
@@ -15,8 +15,8 @@
 
 <script lang="ts">
 import { ComponentPublicInstance } from "vue";
-import { cssClasses } from "../../renderer/sharedStyleFields";
-import { FieldType, WriterComponentDefinition } from "../../writerTypes";
+import { cssClasses } from "@/renderer/sharedStyleFields";
+import { FieldType, WriterComponentDefinition } from "@/writerTypes";
 import BaseInputColor from "../base/BaseInputColor.vue";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
 
@@ -71,8 +71,8 @@ export default { writer: definition };
 </script>
 <script setup lang="ts">
 import { computed, inject, ref } from "vue";
-import injectionKeys from "../../injectionKeys";
-import { useFormValueBroker } from "../../renderer/useFormValueBroker";
+import injectionKeys from "@/injectionKeys";
+import { useFormValueBroker } from "@/renderer/useFormValueBroker";
 
 const fields = inject(injectionKeys.evaluatedFields);
 const rootInstance = ref<ComponentPublicInstance | null>(null);
@@ -91,8 +91,8 @@ const { formValue, handleInput } = useFormValueBroker<string>(
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
-@import "../../renderer/colorTransformations.css";
+@import "@/renderer/sharedStyles.css";
+@import "@/renderer/colorTransformations.css";
 
 .CoreColorInput {
 	width: fit-content;
diff --git a/src/ui/src/core_components/input/CoreDateInput.vue b/src/ui/src/components/core/input/CoreDateInput.vue
similarity index 85%
rename from src/ui/src/core_components/input/CoreDateInput.vue
rename to src/ui/src/components/core/input/CoreDateInput.vue
index 6489b139e..45f23369a 100644
--- a/src/ui/src/core_components/input/CoreDateInput.vue
+++ b/src/ui/src/components/core/input/CoreDateInput.vue
@@ -19,8 +19,8 @@
 </template>
 
 <script lang="ts">
-import { FieldType } from "../../writerTypes";
-import { cssClasses } from "../../renderer/sharedStyleFields";
+import { FieldType } from "@/writerTypes";
+import { cssClasses } from "@/renderer/sharedStyleFields";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
 import { ComponentPublicInstance } from "vue";
 
@@ -59,8 +59,8 @@ export default {
 </script>
 <script setup lang="ts">
 import { inject, ref } from "vue";
-import injectionKeys from "../../injectionKeys";
-import { useFormValueBroker } from "../../renderer/useFormValueBroker";
+import injectionKeys from "@/injectionKeys";
+import { useFormValueBroker } from "@/renderer/useFormValueBroker";
 
 const fields = inject(injectionKeys.evaluatedFields);
 const rootInstance = ref<ComponentPublicInstance | null>(null);
@@ -75,8 +75,8 @@ const { formValue, handleInput } = useFormValueBroker(
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
-@import "../../renderer/colorTransformations.css";
+@import "@/renderer/sharedStyles.css";
+@import "@/renderer/colorTransformations.css";
 
 .CoreDateInput {
 	width: fit-content;
diff --git a/src/ui/src/core_components/input/CoreDropdownInput.vue b/src/ui/src/components/core/input/CoreDropdownInput.vue
similarity index 84%
rename from src/ui/src/core_components/input/CoreDropdownInput.vue
rename to src/ui/src/components/core/input/CoreDropdownInput.vue
index d77aac8e4..dd3ac51ba 100644
--- a/src/ui/src/core_components/input/CoreDropdownInput.vue
+++ b/src/ui/src/components/core/input/CoreDropdownInput.vue
@@ -28,10 +28,10 @@
 <script lang="ts">
 import { inject } from "vue";
 import { ref } from "vue";
-import { FieldType } from "../../writerTypes";
-import { cssClasses } from "../../renderer/sharedStyleFields";
+import { FieldType } from "@/writerTypes";
+import { cssClasses } from "@/renderer/sharedStyleFields";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
-import WdsDropdownInput from "../../wds/WdsDropdownInput.vue";
+import WdsDropdownInput from "@/wds/WdsDropdownInput.vue";
 import { ComponentPublicInstance } from "vue";
 
 const description =
@@ -75,8 +75,8 @@ export default {
 </script>
 
 <script setup lang="ts">
-import injectionKeys from "../../injectionKeys";
-import { useFormValueBroker } from "../../renderer/useFormValueBroker";
+import injectionKeys from "@/injectionKeys";
+import { useFormValueBroker } from "@/renderer/useFormValueBroker";
 
 const fields = inject(injectionKeys.evaluatedFields);
 const rootInstance = ref<ComponentPublicInstance | null>(null);
@@ -91,8 +91,8 @@ const { formValue, handleInput } = useFormValueBroker(
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
-@import "../../renderer/colorTransformations.css";
+@import "@/renderer/sharedStyles.css";
+@import "@/renderer/colorTransformations.css";
 
 .CoreDropdownInput {
 	width: fit-content;
diff --git a/src/ui/src/core_components/input/CoreFileInput.vue b/src/ui/src/components/core/input/CoreFileInput.vue
similarity index 92%
rename from src/ui/src/core_components/input/CoreFileInput.vue
rename to src/ui/src/components/core/input/CoreFileInput.vue
index 7308f9c92..f7f92bd7f 100644
--- a/src/ui/src/core_components/input/CoreFileInput.vue
+++ b/src/ui/src/components/core/input/CoreFileInput.vue
@@ -47,8 +47,8 @@
 
 <script lang="ts">
 import { ComponentPublicInstance } from "vue";
-import { cssClasses } from "../../renderer/sharedStyleFields";
-import { FieldType } from "../../writerTypes";
+import { cssClasses } from "@/renderer/sharedStyleFields";
+import { FieldType } from "@/writerTypes";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
 
 const MAX_FILE_SIZE = 200 * 1024 * 1024;
@@ -104,10 +104,10 @@ export default {
 
 <script setup lang="ts">
 import { computed, inject, Ref, ref, watch } from "vue";
-import injectionKeys from "../../injectionKeys";
-import LoadingSymbol from "../../renderer/LoadingSymbol.vue";
-import { useFormValueBroker } from "../../renderer/useFormValueBroker";
-import WdsButton from "../../wds/WdsButton.vue";
+import injectionKeys from "@/injectionKeys";
+import LoadingSymbol from "@/renderer/LoadingSymbol.vue";
+import { useFormValueBroker } from "@/renderer/useFormValueBroker";
+import WdsButton from "@/wds/WdsButton.vue";
 
 type SavedFile = { name: string; type: string; data: unknown };
 
@@ -200,8 +200,8 @@ const emptyMessage = computed(() => `No ${fileLabel.value} selected`);
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
-@import "../../renderer/colorTransformations.css";
+@import "@/renderer/sharedStyles.css";
+@import "@/renderer/colorTransformations.css";
 
 .CoreFileInput {
 	width: 100%;
diff --git a/src/ui/src/core_components/input/CoreMultiselectInput.vue b/src/ui/src/components/core/input/CoreMultiselectInput.vue
similarity index 92%
rename from src/ui/src/core_components/input/CoreMultiselectInput.vue
rename to src/ui/src/components/core/input/CoreMultiselectInput.vue
index d68ed6ed1..c5195b181 100644
--- a/src/ui/src/core_components/input/CoreMultiselectInput.vue
+++ b/src/ui/src/components/core/input/CoreMultiselectInput.vue
@@ -19,7 +19,7 @@
 <script lang="ts">
 import { computed, inject, Ref } from "vue";
 import { ref } from "vue";
-import { FieldCategory, FieldType } from "../../writerTypes";
+import { FieldCategory, FieldType } from "@/writerTypes";
 import {
 	accentColor,
 	containerBackgroundColor,
@@ -27,7 +27,7 @@ import {
 	primaryTextColor,
 	secondaryTextColor,
 	separatorColor,
-} from "../../renderer/sharedStyleFields";
+} from "@/renderer/sharedStyleFields";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
 import { ComponentPublicInstance } from "vue";
 
@@ -99,8 +99,8 @@ export default {
 </script>
 
 <script setup lang="ts">
-import injectionKeys from "../../injectionKeys";
-import { useFormValueBroker } from "../../renderer/useFormValueBroker";
+import injectionKeys from "@/injectionKeys";
+import { useFormValueBroker } from "@/renderer/useFormValueBroker";
 import BaseSelect from "../base/BaseSelect.vue";
 
 const fields = inject(injectionKeys.evaluatedFields);
@@ -123,7 +123,7 @@ function handleChange(selectedOptions: string[]) {
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 .CoreMultiselectInput {
 	width: fit-content;
diff --git a/src/ui/src/core_components/input/CoreNumberInput.vue b/src/ui/src/components/core/input/CoreNumberInput.vue
similarity index 91%
rename from src/ui/src/core_components/input/CoreNumberInput.vue
rename to src/ui/src/components/core/input/CoreNumberInput.vue
index 8623f6c7e..1c8091f9c 100644
--- a/src/ui/src/core_components/input/CoreNumberInput.vue
+++ b/src/ui/src/components/core/input/CoreNumberInput.vue
@@ -31,8 +31,8 @@
 </template>
 
 <script lang="ts">
-import { FieldType } from "../../writerTypes";
-import { cssClasses } from "../../renderer/sharedStyleFields";
+import { FieldType } from "@/writerTypes";
+import { cssClasses } from "@/renderer/sharedStyleFields";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
 import { ComponentPublicInstance } from "vue";
 
@@ -95,8 +95,8 @@ export default {
 
 <script setup lang="ts">
 import { inject, ref } from "vue";
-import injectionKeys from "../../injectionKeys";
-import { useFormValueBroker } from "../../renderer/useFormValueBroker";
+import injectionKeys from "@/injectionKeys";
+import { useFormValueBroker } from "@/renderer/useFormValueBroker";
 
 const fields = inject(injectionKeys.evaluatedFields);
 const rootInstance = ref<ComponentPublicInstance | null>(null);
@@ -141,8 +141,8 @@ function handleChangeEvent() {
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
-@import "../../renderer/colorTransformations.css";
+@import "@/renderer/sharedStyles.css";
+@import "@/renderer/colorTransformations.css";
 
 .CoreNumberInput {
 	max-width: 70ch;
diff --git a/src/ui/src/core_components/input/CoreRadioInput.vue b/src/ui/src/components/core/input/CoreRadioInput.vue
similarity index 90%
rename from src/ui/src/core_components/input/CoreRadioInput.vue
rename to src/ui/src/components/core/input/CoreRadioInput.vue
index adfa50d33..c61816b1d 100644
--- a/src/ui/src/core_components/input/CoreRadioInput.vue
+++ b/src/ui/src/components/core/input/CoreRadioInput.vue
@@ -36,12 +36,12 @@
 <script lang="ts">
 import { inject } from "vue";
 import { ref } from "vue";
-import { FieldCategory, FieldType } from "../../writerTypes";
+import { FieldCategory, FieldType } from "@/writerTypes";
 import {
 	accentColor,
 	cssClasses,
 	primaryTextColor,
-} from "../../renderer/sharedStyleFields";
+} from "@/renderer/sharedStyleFields";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
 import { ComponentPublicInstance } from "vue";
 
@@ -101,8 +101,8 @@ export default {
 </script>
 
 <script setup lang="ts">
-import injectionKeys from "../../injectionKeys";
-import { useFormValueBroker } from "../../renderer/useFormValueBroker";
+import injectionKeys from "@/injectionKeys";
+import { useFormValueBroker } from "@/renderer/useFormValueBroker";
 
 const fields = inject(injectionKeys.evaluatedFields);
 const flattenedInstancePath = inject(injectionKeys.flattenedInstancePath);
@@ -118,8 +118,8 @@ const { formValue, handleInput } = useFormValueBroker(
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
-@import "../../renderer/colorTransformations.css";
+@import "@/renderer/sharedStyles.css";
+@import "@/renderer/colorTransformations.css";
 
 .CoreRadioInput {
 	width: fit-content;
diff --git a/src/ui/src/core_components/input/CoreRatingInput.vue b/src/ui/src/components/core/input/CoreRatingInput.vue
similarity index 96%
rename from src/ui/src/core_components/input/CoreRatingInput.vue
rename to src/ui/src/components/core/input/CoreRatingInput.vue
index 1c394c68f..47d5f58d8 100644
--- a/src/ui/src/core_components/input/CoreRatingInput.vue
+++ b/src/ui/src/components/core/input/CoreRatingInput.vue
@@ -50,12 +50,12 @@
 </template>
 
 <script lang="ts">
-import { FieldType } from "../../writerTypes";
+import { FieldType } from "@/writerTypes";
 import {
 	accentColor,
 	cssClasses,
 	primaryTextColor,
-} from "../../renderer/sharedStyleFields";
+} from "@/renderer/sharedStyleFields";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
 import { ComponentPublicInstance } from "vue";
 
@@ -124,8 +124,8 @@ export default {
 
 <script setup lang="ts">
 import { Ref, computed, inject, ref } from "vue";
-import injectionKeys from "../../injectionKeys";
-import { useFormValueBroker } from "../../renderer/useFormValueBroker";
+import injectionKeys from "@/injectionKeys";
+import { useFormValueBroker } from "@/renderer/useFormValueBroker";
 
 const fields = inject(injectionKeys.evaluatedFields);
 const rootInstance = ref<ComponentPublicInstance | null>(null);
@@ -243,7 +243,7 @@ const feedbackRating = computed(() => {
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 .CoreRatingInput {
 	width: fit-content;
diff --git a/src/ui/src/core_components/input/CoreSelectInput.vue b/src/ui/src/components/core/input/CoreSelectInput.vue
similarity index 92%
rename from src/ui/src/core_components/input/CoreSelectInput.vue
rename to src/ui/src/components/core/input/CoreSelectInput.vue
index 2ce4eec5d..287da6c50 100644
--- a/src/ui/src/core_components/input/CoreSelectInput.vue
+++ b/src/ui/src/components/core/input/CoreSelectInput.vue
@@ -19,7 +19,7 @@
 <script lang="ts">
 import { computed, inject, Ref } from "vue";
 import { ref } from "vue";
-import { FieldCategory, FieldType } from "../../writerTypes";
+import { FieldCategory, FieldType } from "@/writerTypes";
 import {
 	accentColor,
 	containerBackgroundColor,
@@ -27,7 +27,7 @@ import {
 	primaryTextColor,
 	secondaryTextColor,
 	separatorColor,
-} from "../../renderer/sharedStyleFields";
+} from "@/renderer/sharedStyleFields";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
 import { ComponentPublicInstance } from "vue";
 
@@ -96,8 +96,8 @@ export default {
 </script>
 
 <script setup lang="ts">
-import injectionKeys from "../../injectionKeys";
-import { useFormValueBroker } from "../../renderer/useFormValueBroker";
+import injectionKeys from "@/injectionKeys";
+import { useFormValueBroker } from "@/renderer/useFormValueBroker";
 import BaseSelect from "../base/BaseSelect.vue";
 
 const fields = inject(injectionKeys.evaluatedFields);
@@ -120,7 +120,7 @@ function handleChange(selectedOptions: string[]) {
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 .CoreSelectInput {
 	width: fit-content;
diff --git a/src/ui/src/core_components/input/CoreSliderInput.vue b/src/ui/src/components/core/input/CoreSliderInput.vue
similarity index 87%
rename from src/ui/src/core_components/input/CoreSliderInput.vue
rename to src/ui/src/components/core/input/CoreSliderInput.vue
index 34f0b78d1..0c2631eeb 100644
--- a/src/ui/src/core_components/input/CoreSliderInput.vue
+++ b/src/ui/src/components/core/input/CoreSliderInput.vue
@@ -17,8 +17,8 @@
 
 <script lang="ts">
 import { ComponentPublicInstance } from "vue";
-import { accentColor, cssClasses } from "../../renderer/sharedStyleFields";
-import { FieldCategory, FieldType } from "../../writerTypes";
+import { accentColor, cssClasses } from "@/renderer/sharedStyleFields";
+import { FieldCategory, FieldType } from "@/writerTypes";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
 
 const description =
@@ -90,8 +90,8 @@ export default {
 
 <script setup lang="ts">
 import { inject, ref } from "vue";
-import injectionKeys from "../../injectionKeys";
-import { useFormValueBroker } from "../../renderer/useFormValueBroker";
+import injectionKeys from "@/injectionKeys";
+import { useFormValueBroker } from "@/renderer/useFormValueBroker";
 import BaseInputRange from "../base/BaseInputRange.vue";
 
 const fields = inject(injectionKeys.evaluatedFields);
@@ -107,8 +107,8 @@ const { formValue, handleInput } = useFormValueBroker<number>(
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
-@import "../../renderer/colorTransformations.css";
+@import "@/renderer/sharedStyles.css";
+@import "@/renderer/colorTransformations.css";
 
 .CoreSliderInput {
 	width: 100%;
diff --git a/src/ui/src/core_components/input/CoreSwitchInput.vue b/src/ui/src/components/core/input/CoreSwitchInput.vue
similarity index 88%
rename from src/ui/src/core_components/input/CoreSwitchInput.vue
rename to src/ui/src/components/core/input/CoreSwitchInput.vue
index 64d1dfcc8..0ab7f23a6 100644
--- a/src/ui/src/core_components/input/CoreSwitchInput.vue
+++ b/src/ui/src/components/core/input/CoreSwitchInput.vue
@@ -22,13 +22,13 @@
 <script lang="ts">
 import { inject } from "vue";
 import { ref } from "vue";
-import { FieldType } from "../../writerTypes";
+import { FieldType } from "@/writerTypes";
 import {
 	accentColor,
 	primaryTextColor,
 	separatorColor,
 	cssClasses,
-} from "../../renderer/sharedStyleFields";
+} from "@/renderer/sharedStyleFields";
 import { onMounted } from "vue";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
 import { ComponentPublicInstance } from "vue";
@@ -70,8 +70,8 @@ export default {
 </script>
 
 <script setup lang="ts">
-import injectionKeys from "../../injectionKeys";
-import { useFormValueBroker } from "../../renderer/useFormValueBroker";
+import injectionKeys from "@/injectionKeys";
+import { useFormValueBroker } from "@/renderer/useFormValueBroker";
 
 const fields = inject(injectionKeys.evaluatedFields);
 const rootInstance = ref<ComponentPublicInstance | null>(null);
@@ -95,8 +95,8 @@ onMounted(() => {
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
-@import "../../renderer/colorTransformations.css";
+@import "@/renderer/sharedStyles.css";
+@import "@/renderer/colorTransformations.css";
 
 .CoreSwitchInput {
 }
diff --git a/src/ui/src/core_components/input/CoreTextInput.vue b/src/ui/src/components/core/input/CoreTextInput.vue
similarity index 87%
rename from src/ui/src/core_components/input/CoreTextInput.vue
rename to src/ui/src/components/core/input/CoreTextInput.vue
index c08174687..0d9b2fd34 100644
--- a/src/ui/src/core_components/input/CoreTextInput.vue
+++ b/src/ui/src/components/core/input/CoreTextInput.vue
@@ -28,8 +28,8 @@
 </template>
 
 <script lang="ts">
-import { FieldCategory, FieldType } from "../../writerTypes";
-import { accentColor, cssClasses } from "../../renderer/sharedStyleFields";
+import { FieldCategory, FieldType } from "@/writerTypes";
+import { accentColor, cssClasses } from "@/renderer/sharedStyleFields";
 import { ComponentPublicInstance } from "vue";
 
 const description =
@@ -87,8 +87,8 @@ export default {
 
 <script setup lang="ts">
 import { inject, ref } from "vue";
-import injectionKeys from "../../injectionKeys";
-import { useFormValueBroker } from "../../renderer/useFormValueBroker";
+import injectionKeys from "@/injectionKeys";
+import { useFormValueBroker } from "@/renderer/useFormValueBroker";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
 
 const fields = inject(injectionKeys.evaluatedFields);
@@ -104,8 +104,8 @@ const { formValue, handleInput } = useFormValueBroker(
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
-@import "../../renderer/colorTransformations.css";
+@import "@/renderer/sharedStyles.css";
+@import "@/renderer/colorTransformations.css";
 
 .CoreTextInput {
 	max-width: 70ch;
diff --git a/src/ui/src/core_components/input/CoreTextareaInput.vue b/src/ui/src/components/core/input/CoreTextareaInput.vue
similarity index 87%
rename from src/ui/src/core_components/input/CoreTextareaInput.vue
rename to src/ui/src/components/core/input/CoreTextareaInput.vue
index c6f3c42b9..99b2924f7 100644
--- a/src/ui/src/core_components/input/CoreTextareaInput.vue
+++ b/src/ui/src/components/core/input/CoreTextareaInput.vue
@@ -27,8 +27,8 @@
 </template>
 
 <script lang="ts">
-import { FieldControl, FieldType } from "../../writerTypes";
-import { cssClasses } from "../../renderer/sharedStyleFields";
+import { FieldControl, FieldType } from "@/writerTypes";
+import { cssClasses } from "@/renderer/sharedStyleFields";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
 import { ComponentPublicInstance } from "vue";
 
@@ -83,8 +83,8 @@ export default {
 
 <script setup lang="ts">
 import { inject, ref } from "vue";
-import injectionKeys from "../../injectionKeys";
-import { useFormValueBroker } from "../../renderer/useFormValueBroker";
+import injectionKeys from "@/injectionKeys";
+import { useFormValueBroker } from "@/renderer/useFormValueBroker";
 
 const fields = inject(injectionKeys.evaluatedFields);
 const rootInstance = ref<ComponentPublicInstance | null>(null);
@@ -99,8 +99,8 @@ const { formValue, handleInput } = useFormValueBroker(
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
-@import "../../renderer/colorTransformations.css";
+@import "@/renderer/sharedStyles.css";
+@import "@/renderer/colorTransformations.css";
 
 .CoreTextareaInput {
 	max-width: 70ch;
diff --git a/src/ui/src/core_components/input/CoreTimeInput.vue b/src/ui/src/components/core/input/CoreTimeInput.vue
similarity index 85%
rename from src/ui/src/core_components/input/CoreTimeInput.vue
rename to src/ui/src/components/core/input/CoreTimeInput.vue
index 5c433403f..cc8dc0f72 100644
--- a/src/ui/src/core_components/input/CoreTimeInput.vue
+++ b/src/ui/src/components/core/input/CoreTimeInput.vue
@@ -20,8 +20,8 @@
 
 <script lang="ts">
 import { ComponentPublicInstance } from "vue";
-import { cssClasses } from "../../renderer/sharedStyleFields";
-import { FieldType } from "../../writerTypes";
+import { cssClasses } from "@/renderer/sharedStyleFields";
+import { FieldType } from "@/writerTypes";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
 
 const description =
@@ -59,8 +59,8 @@ export default {
 </script>
 <script setup lang="ts">
 import { inject, ref } from "vue";
-import injectionKeys from "../../injectionKeys";
-import { useFormValueBroker } from "../../renderer/useFormValueBroker";
+import injectionKeys from "@/injectionKeys";
+import { useFormValueBroker } from "@/renderer/useFormValueBroker";
 
 const fields = inject(injectionKeys.evaluatedFields);
 const rootInstance = ref<ComponentPublicInstance | null>(null);
@@ -75,8 +75,8 @@ const { formValue, handleInput } = useFormValueBroker(
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
-@import "../../renderer/colorTransformations.css";
+@import "@/renderer/sharedStyles.css";
+@import "@/renderer/colorTransformations.css";
 
 .CoreTimeInput {
 	width: fit-content;
diff --git a/src/ui/src/core_components/layout/CoreColumn.vue b/src/ui/src/components/core/layout/CoreColumn.vue
similarity index 96%
rename from src/ui/src/core_components/layout/CoreColumn.vue
rename to src/ui/src/components/core/layout/CoreColumn.vue
index 7c6dea074..bed519a72 100644
--- a/src/ui/src/core_components/layout/CoreColumn.vue
+++ b/src/ui/src/components/core/layout/CoreColumn.vue
@@ -41,14 +41,14 @@
 </template>
 
 <script lang="ts">
-import { FieldCategory, FieldType } from "../../writerTypes";
+import { FieldCategory, FieldType } from "@/writerTypes";
 import {
 	contentHAlign,
 	contentPadding,
 	contentVAlign,
 	cssClasses,
 	separatorColor,
-} from "../../renderer/sharedStyleFields";
+} from "@/renderer/sharedStyleFields";
 
 const description =
 	"A layout component that organises its child components in columns. Must be inside a Column Container component.";
@@ -116,8 +116,8 @@ export default {
 </script>
 <script setup lang="ts">
 import { computed, ComputedRef, inject, Ref, ref, watch } from "vue";
-import injectionKeys from "../../injectionKeys";
-import IconGen from "../../renderer/IconGen.vue";
+import injectionKeys from "@/injectionKeys";
+import IconGen from "@/renderer/IconGen.vue";
 import BaseContainer from "../base/BaseContainer.vue";
 const instancePath = inject(injectionKeys.instancePath);
 const instanceData = inject(injectionKeys.instanceData);
@@ -197,7 +197,7 @@ watch(
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 .CoreColumn {
 	min-width: 0;
diff --git a/src/ui/src/core_components/layout/CoreColumns.vue b/src/ui/src/components/core/layout/CoreColumns.vue
similarity index 81%
rename from src/ui/src/core_components/layout/CoreColumns.vue
rename to src/ui/src/components/core/layout/CoreColumns.vue
index 2a837d99c..db9059d12 100644
--- a/src/ui/src/core_components/layout/CoreColumns.vue
+++ b/src/ui/src/components/core/layout/CoreColumns.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts">
-import { cssClasses } from "../../renderer/sharedStyleFields";
+import { cssClasses } from "@/renderer/sharedStyleFields";
 
 export default {
 	writer: {
@@ -22,14 +22,14 @@ export default {
 
 <script setup lang="ts">
 import { inject } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 
 const instanceData = inject(injectionKeys.instanceData);
 instanceData.at(-1).value = { minimumNonCollapsiblePosition: undefined };
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 .CoreColumns {
 	width: 100%;
diff --git a/src/ui/src/core_components/layout/CoreHeader.vue b/src/ui/src/components/core/layout/CoreHeader.vue
similarity index 82%
rename from src/ui/src/core_components/layout/CoreHeader.vue
rename to src/ui/src/components/core/layout/CoreHeader.vue
index 59efafb2d..d3f5b5843 100644
--- a/src/ui/src/core_components/layout/CoreHeader.vue
+++ b/src/ui/src/components/core/layout/CoreHeader.vue
@@ -8,8 +8,8 @@
 </template>
 
 <script lang="ts">
-import { FieldType } from "../../writerTypes";
-import { cssClasses, primaryTextColor } from "../../renderer/sharedStyleFields";
+import { FieldType } from "@/writerTypes";
+import { cssClasses, primaryTextColor } from "@/renderer/sharedStyleFields";
 
 const description =
 	"A container component that typically contains the main navigation elements.";
@@ -36,13 +36,13 @@ export default {
 </script>
 <script setup lang="ts">
 import { inject } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 
 const fields = inject(injectionKeys.evaluatedFields);
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 .CoreHeader {
 	display: flex;
diff --git a/src/ui/src/core_components/layout/CoreHorizontalStack.vue b/src/ui/src/components/core/layout/CoreHorizontalStack.vue
similarity index 87%
rename from src/ui/src/core_components/layout/CoreHorizontalStack.vue
rename to src/ui/src/components/core/layout/CoreHorizontalStack.vue
index 8c87b6c87..50959fad1 100644
--- a/src/ui/src/core_components/layout/CoreHorizontalStack.vue
+++ b/src/ui/src/components/core/layout/CoreHorizontalStack.vue
@@ -15,7 +15,7 @@ import {
 	contentHAlign,
 	contentPadding,
 	cssClasses,
-} from "../../renderer/sharedStyleFields";
+} from "@/renderer/sharedStyleFields";
 
 const description =
 	"A layout component that stacks its child components horizontally, wrapping them to the next row if necessary.";
@@ -39,14 +39,14 @@ export default {
 </script>
 <script setup lang="ts">
 import { inject } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 import BaseContainer from "../base/BaseContainer.vue";
 
 const fields = inject(injectionKeys.evaluatedFields);
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 .CoreHorizontalStack {
 	width: 100%;
diff --git a/src/ui/src/core_components/layout/CoreSection.vue b/src/ui/src/components/core/layout/CoreSection.vue
similarity index 89%
rename from src/ui/src/core_components/layout/CoreSection.vue
rename to src/ui/src/components/core/layout/CoreSection.vue
index e67b2a11d..f063db07c 100644
--- a/src/ui/src/core_components/layout/CoreSection.vue
+++ b/src/ui/src/components/core/layout/CoreSection.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script lang="ts">
-import { FieldType } from "../../writerTypes";
+import { FieldType } from "@/writerTypes";
 import {
 	accentColor,
 	primaryTextColor,
@@ -25,7 +25,7 @@ import {
 	cssClasses,
 	contentHAlign,
 	contentPadding,
-} from "../../renderer/sharedStyleFields";
+} from "@/renderer/sharedStyleFields";
 
 const description =
 	"A container component that divides the layout into sections, with an optional title.";
@@ -65,14 +65,14 @@ export default {
 </script>
 <script setup lang="ts">
 import { inject } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 import BaseContainer from "../base/BaseContainer.vue";
 
 const fields = inject(injectionKeys.evaluatedFields);
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 .CoreSection {
 	border: 1px solid var(--separatorColor);
 	border-radius: 8px;
diff --git a/src/ui/src/core_components/layout/CoreSeparator.vue b/src/ui/src/components/core/layout/CoreSeparator.vue
similarity index 88%
rename from src/ui/src/core_components/layout/CoreSeparator.vue
rename to src/ui/src/components/core/layout/CoreSeparator.vue
index f44cefb2e..3ed49f809 100644
--- a/src/ui/src/core_components/layout/CoreSeparator.vue
+++ b/src/ui/src/components/core/layout/CoreSeparator.vue
@@ -11,7 +11,7 @@ If the container flows horizontally (like a _Horizontal Stack_ or a _Column Cont
 </template>
 
 <script lang="ts">
-import { cssClasses, separatorColor } from "../../renderer/sharedStyleFields";
+import { cssClasses, separatorColor } from "@/renderer/sharedStyleFields";
 
 const description =
 	"A visual component to create a separation between adjacent elements.";
@@ -30,7 +30,7 @@ export default {
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 .CoreSeparator {
 	min-height: 1px;
 	min-width: 1px;
diff --git a/src/ui/src/core_components/layout/CoreSidebar.vue b/src/ui/src/components/core/layout/CoreSidebar.vue
similarity index 93%
rename from src/ui/src/core_components/layout/CoreSidebar.vue
rename to src/ui/src/components/core/layout/CoreSidebar.vue
index 59a5c642e..feede9019 100644
--- a/src/ui/src/core_components/layout/CoreSidebar.vue
+++ b/src/ui/src/components/core/layout/CoreSidebar.vue
@@ -21,7 +21,7 @@
 </template>
 
 <script lang="ts">
-import { Component, FieldCategory, FieldType } from "../../writerTypes";
+import { Component, FieldCategory, FieldType } from "@/writerTypes";
 import {
 	accentColor,
 	primaryTextColor,
@@ -33,7 +33,7 @@ import {
 	buttonTextColor,
 	buttonShadow,
 	cssClasses,
-} from "../../renderer/sharedStyleFields";
+} from "@/renderer/sharedStyleFields";
 
 const description =
 	"A container component that organises its children in a sidebar. Its parent must be a Page component.";
@@ -81,8 +81,8 @@ export default {
 </script>
 <script setup lang="ts">
 import { computed, inject, onMounted, Ref, ref, watch } from "vue";
-import injectionKeys from "../../injectionKeys";
-import IconGen from "../../renderer/IconGen.vue";
+import injectionKeys from "@/injectionKeys";
+import IconGen from "@/renderer/IconGen.vue";
 
 const fields = inject(injectionKeys.evaluatedFields);
 const isCollapsed: Ref<boolean> = ref(fields.startCollapsed.value == "yes");
@@ -125,7 +125,7 @@ onMounted(() => {
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 .CoreSidebar {
 	overflow: auto;
diff --git a/src/ui/src/core_components/layout/CoreStep.vue b/src/ui/src/components/core/layout/CoreStep.vue
similarity index 97%
rename from src/ui/src/core_components/layout/CoreStep.vue
rename to src/ui/src/components/core/layout/CoreStep.vue
index 25076eb42..7c331c144 100644
--- a/src/ui/src/core_components/layout/CoreStep.vue
+++ b/src/ui/src/components/core/layout/CoreStep.vue
@@ -66,13 +66,13 @@
 const STEP_BIT_INSTANCE_NUMBER = 0;
 const CONTENT_DISPLAYING_INSTANCE_NUMBER = 1;
 
-import { Component, FieldType, InstancePath } from "../../writerTypes";
-import { useEvaluator } from "../../renderer/useEvaluator";
+import { Component, FieldType, InstancePath } from "@/writerTypes";
+import { useEvaluator } from "@/renderer/useEvaluator";
 import {
 	contentHAlign,
 	cssClasses,
 	contentPadding,
-} from "../../renderer/sharedStyleFields";
+} from "@/renderer/sharedStyleFields";
 import { onBeforeUnmount } from "vue";
 
 const description =
@@ -115,7 +115,7 @@ export default {
 </script>
 <script setup lang="ts">
 import { Ref, computed, inject, onBeforeMount, watch } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 import BaseContainer from "./../base/BaseContainer.vue";
 import { type StepsData } from "./CoreSteps.vue";
 
@@ -323,7 +323,7 @@ onBeforeUnmount(() => {
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 button.bit {
 	padding: 16px 0 0 0;
@@ -412,3 +412,4 @@ button.bit.active:focus {
 	padding: 8px 16px 0 16px;
 }
 </style>
+../base/BaseContainer.vue
diff --git a/src/ui/src/core_components/layout/CoreSteps.vue b/src/ui/src/components/core/layout/CoreSteps.vue
similarity index 91%
rename from src/ui/src/core_components/layout/CoreSteps.vue
rename to src/ui/src/components/core/layout/CoreSteps.vue
index 765273061..e521135cc 100644
--- a/src/ui/src/core_components/layout/CoreSteps.vue
+++ b/src/ui/src/components/core/layout/CoreSteps.vue
@@ -25,7 +25,7 @@ import {
 	buttonTextColor,
 	buttonShadow,
 	cssClasses,
-} from "../../renderer/sharedStyleFields";
+} from "@/renderer/sharedStyleFields";
 
 const description =
 	"A container component for displaying Step components, allowing you to implement a stepped workflow.";
@@ -53,8 +53,8 @@ export default {
 </script>
 <script setup lang="ts">
 import { inject } from "vue";
-import injectionKeys from "../../injectionKeys";
-import { InstancePath } from "../../writerTypes";
+import injectionKeys from "@/injectionKeys";
+import { InstancePath } from "@/writerTypes";
 
 export type StepsData = {
 	activeStep: InstancePath;
@@ -75,7 +75,7 @@ instanceData.at(-1).value = stepsData;
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 .CoreSteps {
 	width: 100%;
diff --git a/src/ui/src/core_components/layout/CoreTab.vue b/src/ui/src/components/core/layout/CoreTab.vue
similarity index 95%
rename from src/ui/src/core_components/layout/CoreTab.vue
rename to src/ui/src/components/core/layout/CoreTab.vue
index 320759008..eeadefa04 100644
--- a/src/ui/src/core_components/layout/CoreTab.vue
+++ b/src/ui/src/components/core/layout/CoreTab.vue
@@ -53,13 +53,13 @@
 const TAB_BIT_INSTANCE_NUMBER = 0;
 const CONTENT_DISPLAYING_INSTANCE_NUMBER = 1;
 
-import { Component, FieldType, InstancePath } from "../../writerTypes";
-import { useEvaluator } from "../../renderer/useEvaluator";
+import { Component, FieldType, InstancePath } from "@/writerTypes";
+import { useEvaluator } from "@/renderer/useEvaluator";
 import {
 	contentHAlign,
 	cssClasses,
 	contentPadding,
-} from "../../renderer/sharedStyleFields";
+} from "@/renderer/sharedStyleFields";
 
 const description =
 	"A container component that displays its child components as a tab inside a Tab Container.";
@@ -91,7 +91,7 @@ export default {
 </script>
 <script setup lang="ts">
 import { computed, inject, onBeforeMount, watch } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 import BaseContainer from "../base/BaseContainer.vue";
 
 const fields = inject(injectionKeys.evaluatedFields);
@@ -196,7 +196,7 @@ onBeforeMount(() => {
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 button.bit {
 	padding: 11.5px 0 9.5px 0;
diff --git a/src/ui/src/core_components/layout/CoreTabs.vue b/src/ui/src/components/core/layout/CoreTabs.vue
similarity index 90%
rename from src/ui/src/core_components/layout/CoreTabs.vue
rename to src/ui/src/components/core/layout/CoreTabs.vue
index a3a588c9b..1497e6c4a 100644
--- a/src/ui/src/core_components/layout/CoreTabs.vue
+++ b/src/ui/src/components/core/layout/CoreTabs.vue
@@ -25,7 +25,7 @@ import {
 	buttonTextColor,
 	buttonShadow,
 	cssClasses,
-} from "../../renderer/sharedStyleFields";
+} from "@/renderer/sharedStyleFields";
 
 const description =
 	"A container component for organising and displaying Tab components in a tabbed interface.";
@@ -53,15 +53,15 @@ export default {
 </script>
 <script setup lang="ts">
 import { inject } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 
 const instanceData = inject(injectionKeys.instanceData);
 instanceData.at(-1).value = { activeTab: undefined };
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
-@import "../../renderer/colorTransformations.css";
+@import "@/renderer/sharedStyles.css";
+@import "@/renderer/colorTransformations.css";
 
 .CoreTabs {
 	width: 100%;
diff --git a/src/ui/src/core_components/other/CoreButton.vue b/src/ui/src/components/core/other/CoreButton.vue
similarity index 86%
rename from src/ui/src/core_components/other/CoreButton.vue
rename to src/ui/src/components/core/other/CoreButton.vue
index 78995467b..8d572f697 100644
--- a/src/ui/src/core_components/other/CoreButton.vue
+++ b/src/ui/src/components/core/other/CoreButton.vue
@@ -17,17 +17,17 @@
 </template>
 
 <script lang="ts">
-import { FieldCategory, FieldType } from "../../writerTypes";
-import WdsButton from "../../wds/WdsButton.vue";
+import { FieldCategory, FieldType } from "@/writerTypes";
+import WdsButton from "@/wds/WdsButton.vue";
 import {
 	buttonColor,
 	buttonTextColor,
 	buttonShadow,
 	separatorColor,
 	cssClasses,
-} from "../../renderer/sharedStyleFields";
+} from "@/renderer/sharedStyleFields";
 import { watch } from "vue";
-import { getClick } from "../../renderer/syntheticEvents";
+import { getClick } from "@/renderer/syntheticEvents";
 
 const clickHandlerStub = `
 def handle_button_click(state):
@@ -84,7 +84,7 @@ export default {
 </script>
 <script setup lang="ts">
 import { ComponentPublicInstance, inject, ref } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 
 const rootInstance = ref<ComponentPublicInstance | null>(null);
 const fields = inject(injectionKeys.evaluatedFields);
@@ -108,8 +108,8 @@ function handleClick(ev: MouseEvent) {
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
-@import "../../renderer/colorTransformations.css";
+@import "@/renderer/sharedStyles.css";
+@import "@/renderer/colorTransformations.css";
 
 .CoreButton.disabled {
 	border: 1px solid var(--separatorColor);
diff --git a/src/ui/src/core_components/other/CoreHtml.vue b/src/ui/src/components/core/other/CoreHtml.vue
similarity index 93%
rename from src/ui/src/core_components/other/CoreHtml.vue
rename to src/ui/src/components/core/other/CoreHtml.vue
index 0a65bfa8c..1619b3f16 100644
--- a/src/ui/src/core_components/other/CoreHtml.vue
+++ b/src/ui/src/components/core/other/CoreHtml.vue
@@ -7,9 +7,9 @@ Take into account the potential risks of adding custom HTML to your app, includi
 </docs>
 <script lang="ts">
 import { h, inject } from "vue";
-import { FieldControl, FieldType } from "../../writerTypes";
-import injectionKeys from "../../injectionKeys";
-import { cssClasses } from "../../renderer/sharedStyleFields";
+import { FieldControl, FieldType } from "@/writerTypes";
+import injectionKeys from "@/injectionKeys";
+import { cssClasses } from "@/renderer/sharedStyleFields";
 
 const defaultStyle = {
 	padding: "16px",
diff --git a/src/ui/src/core_components/other/CorePagination.vue b/src/ui/src/components/core/other/CorePagination.vue
similarity index 98%
rename from src/ui/src/core_components/other/CorePagination.vue
rename to src/ui/src/components/core/other/CorePagination.vue
index 47ba0f407..2d76cb4ae 100644
--- a/src/ui/src/core_components/other/CorePagination.vue
+++ b/src/ui/src/components/core/other/CorePagination.vue
@@ -72,7 +72,7 @@
 </template>
 
 <script lang="ts">
-import { FieldType } from "../../writerTypes";
+import { FieldType } from "@/writerTypes";
 
 const pageChangeStub = `
 def handle_page_change(state, payload):
@@ -175,8 +175,8 @@ export default {
 
 <script setup lang="ts">
 import { inject, ref, computed, watch, onUnmounted, onMounted, Ref } from "vue";
-import injectionKeys from "../../injectionKeys";
-import { useFormValueBroker } from "../../renderer/useFormValueBroker";
+import injectionKeys from "@/injectionKeys";
+import { useFormValueBroker } from "@/renderer/useFormValueBroker";
 
 const fields = inject(injectionKeys.evaluatedFields);
 const wf = inject(injectionKeys.core);
diff --git a/src/ui/src/core_components/other/CoreRepeater.vue b/src/ui/src/components/core/other/CoreRepeater.vue
similarity index 96%
rename from src/ui/src/core_components/other/CoreRepeater.vue
rename to src/ui/src/components/core/other/CoreRepeater.vue
index e3a48c341..c00c3b577 100644
--- a/src/ui/src/core_components/other/CoreRepeater.vue
+++ b/src/ui/src/components/core/other/CoreRepeater.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import { computed, h, inject } from "vue";
-import { FieldType } from "../../writerTypes";
-import injectionKeys from "../../injectionKeys";
+import { FieldType } from "@/writerTypes";
+import injectionKeys from "@/injectionKeys";
 
 const description =
 	"A container component that repeats its child components based on a dictionary.";
diff --git a/src/ui/src/core_components/other/CoreReuse.vue b/src/ui/src/components/core/other/CoreReuse.vue
similarity index 96%
rename from src/ui/src/core_components/other/CoreReuse.vue
rename to src/ui/src/components/core/other/CoreReuse.vue
index 46ac9e571..80a84dd74 100644
--- a/src/ui/src/core_components/other/CoreReuse.vue
+++ b/src/ui/src/components/core/other/CoreReuse.vue
@@ -3,9 +3,9 @@
 </template>
 
 <script lang="ts">
-import { FieldType } from "../../writerTypes";
+import { FieldType } from "@/writerTypes";
 import { computed, defineProps, h, inject, ref, watch } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 
 export default {
 	writer: {
diff --git a/src/ui/src/core_components/other/CoreTimer.vue b/src/ui/src/components/core/other/CoreTimer.vue
similarity index 94%
rename from src/ui/src/core_components/other/CoreTimer.vue
rename to src/ui/src/components/core/other/CoreTimer.vue
index 574c7d06c..abc82e443 100644
--- a/src/ui/src/core_components/other/CoreTimer.vue
+++ b/src/ui/src/components/core/other/CoreTimer.vue
@@ -8,8 +8,8 @@
 </template>
 
 <script lang="ts">
-import { FieldType } from "../../writerTypes";
-import { accentColor, cssClasses } from "../../renderer/sharedStyleFields";
+import { FieldType } from "@/writerTypes";
+import { accentColor, cssClasses } from "@/renderer/sharedStyleFields";
 const description =
 	"A component that emits an event repeatedly at specified time intervals, enabling time-based refresh.";
 
@@ -57,7 +57,7 @@ export default {
 
 <script setup lang="ts">
 import { computed, inject, nextTick, onMounted, Ref, ref, watch } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 
 const MIN_ANIMATION_RESET_MS = 500;
 const MIN_ANIMATION_DURATION_MS = 1000;
diff --git a/src/ui/src/core_components/other/CoreWebcamCapture.vue b/src/ui/src/components/core/other/CoreWebcamCapture.vue
similarity index 93%
rename from src/ui/src/core_components/other/CoreWebcamCapture.vue
rename to src/ui/src/components/core/other/CoreWebcamCapture.vue
index 856d578a1..cd6684515 100644
--- a/src/ui/src/core_components/other/CoreWebcamCapture.vue
+++ b/src/ui/src/components/core/other/CoreWebcamCapture.vue
@@ -28,16 +28,16 @@
 </template>
 
 <script lang="ts">
-import { FieldType } from "../../writerTypes";
+import { FieldType } from "@/writerTypes";
 import {
 	buttonColor,
 	buttonShadow,
 	buttonTextColor,
 	cssClasses,
 	separatorColor,
-} from "../../renderer/sharedStyleFields";
-import WdsButton from "../../wds/WdsButton.vue";
-import WdsDropdownInput from "../../wds/WdsDropdownInput.vue";
+} from "@/renderer/sharedStyleFields";
+import WdsButton from "@/wds/WdsButton.vue";
+import WdsDropdownInput from "@/wds/WdsDropdownInput.vue";
 
 const description =
 	"A user input component that allows users to capture images using their webcam.";
@@ -96,7 +96,7 @@ import {
 	ref,
 	watch,
 } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 
 const isActive = ref(false);
 const rootEl: Ref<HTMLElement> = ref(null);
@@ -225,8 +225,8 @@ const stopCapture = () => {
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
-@import "../../renderer/colorTransformations.css";
+@import "@/renderer/sharedStyles.css";
+@import "@/renderer/colorTransformations.css";
 
 .CoreWebcamCapture {
 	width: 100%;
diff --git a/src/ui/src/core_components/root/CorePage.vue b/src/ui/src/components/core/root/CorePage.vue
similarity index 93%
rename from src/ui/src/core_components/root/CorePage.vue
rename to src/ui/src/components/core/root/CorePage.vue
index eb6a1257e..e094c2c4a 100644
--- a/src/ui/src/core_components/root/CorePage.vue
+++ b/src/ui/src/components/core/root/CorePage.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script lang="ts">
-import { FieldCategory, FieldType } from "../../writerTypes";
+import { FieldCategory, FieldType } from "@/writerTypes";
 import {
 	accentColor,
 	buttonColor,
@@ -30,10 +30,10 @@ import {
 	primaryTextColor,
 	secondaryTextColor,
 	separatorColor,
-} from "../../renderer/sharedStyleFields";
+} from "@/renderer/sharedStyleFields";
 import { onMounted } from "vue";
 import { onUnmounted } from "vue";
-import { getKeydown } from "../../renderer/syntheticEvents";
+import { getKeydown } from "@/renderer/syntheticEvents";
 
 const ssKeydownStub = `
 def handle_keydown(state, payload):
@@ -120,7 +120,7 @@ export default {
 </script>
 <script setup lang="ts">
 import { Ref, inject, ref } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 
 const rootEl: Ref<HTMLElement> = ref(null);
 const fields = inject(injectionKeys.evaluatedFields);
@@ -151,7 +151,7 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 .CorePage {
 	display: flex;
diff --git a/src/ui/src/core_components/root/CoreRoot.vue b/src/ui/src/components/core/root/CoreRoot.vue
similarity index 96%
rename from src/ui/src/core_components/root/CoreRoot.vue
rename to src/ui/src/components/core/root/CoreRoot.vue
index 3352fa06f..1fb4c2cb7 100644
--- a/src/ui/src/core_components/root/CoreRoot.vue
+++ b/src/ui/src/components/core/root/CoreRoot.vue
@@ -10,10 +10,10 @@
 </template>
 
 <script lang="ts">
-import { FieldType } from "../../writerTypes";
-import * as sharedStyleFields from "../../renderer/sharedStyleFields";
+import { FieldType } from "@/writerTypes";
+import * as sharedStyleFields from "@/renderer/sharedStyleFields";
 import { nextTick } from "vue";
-import { useEvaluator } from "../../renderer/useEvaluator";
+import { useEvaluator } from "@/renderer/useEvaluator";
 
 const ssHashChangeStub = `
 def handle_hashchange(state, payload):
@@ -68,7 +68,7 @@ export default {
 </script>
 <script setup lang="ts">
 import { computed, inject, ref, Ref, watch, onBeforeMount } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 
 const importedModulesSpecifiers: Record<string, string> = {};
 const wf = inject(injectionKeys.core);
@@ -314,7 +314,7 @@ onBeforeMount(() => {
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 .CoreRoot {
 	background: var(--emptinessColor);
diff --git a/src/ui/src/components/workflows/abstract/WorkflowsNode.vue b/src/ui/src/components/workflows/abstract/WorkflowsNode.vue
new file mode 100644
index 000000000..66076d502
--- /dev/null
+++ b/src/ui/src/components/workflows/abstract/WorkflowsNode.vue
@@ -0,0 +1,32 @@
+<docs lang="md">
+    Represents a node in Writer Framework Workflows.
+</docs>
+
+<template>
+	<div></div>
+</template>
+
+<script lang="ts">
+import { FieldCategory, FieldType } from "@/writerTypes";
+
+export default {
+	writer: {
+		name: "Node",
+		toolkit: "workflows",
+		category: "Other",
+		fields: {
+			text: {
+				name: "Text",
+				init: "Button Text",
+				type: FieldType.Text,
+			},
+		},
+		previewField: "text",
+	},
+};
+</script>
+<script setup lang="ts">
+import { ComponentPublicInstance, inject, ref } from "vue";
+</script>
+
+<style scoped></style>
diff --git a/src/ui/src/core/auditAndFix.ts b/src/ui/src/core/auditAndFix.ts
index a35276725..8760b7074 100644
--- a/src/ui/src/core/auditAndFix.ts
+++ b/src/ui/src/core/auditAndFix.ts
@@ -2,7 +2,7 @@ import {
 	Component,
 	ComponentMap,
 	WriterComponentDefinition,
-} from "../writerTypes";
+} from "@/writerTypes";
 import { getComponentDefinition } from "./templateMap";
 
 /**
diff --git a/src/ui/src/core/index.ts b/src/ui/src/core/index.ts
index 59c562d8b..fdda46bb0 100644
--- a/src/ui/src/core/index.ts
+++ b/src/ui/src/core/index.ts
@@ -8,7 +8,7 @@ import {
 	InstancePath,
 	MailItem,
 	UserFunction,
-} from "../writerTypes";
+} from "@/writerTypes";
 import {
 	getSupportedComponentTypes,
 	getComponentDefinition,
diff --git a/src/ui/src/core/templateMap.ts b/src/ui/src/core/templateMap.ts
index dc1f2c04b..facc6330f 100644
--- a/src/ui/src/core/templateMap.ts
+++ b/src/ui/src/core/templateMap.ts
@@ -1,69 +1,72 @@
 // Maps Writer Framework component types to renderable Vue components
 // content
-import CoreDataframe from "../core_components/content/CoreDataframe.vue";
-import CoreHeading from "../core_components/content/CoreHeading.vue";
-import CoreIcon from "../core_components/content/CoreIcon.vue";
-import CoreImage from "../core_components/content/CoreImage.vue";
-import CoreMessage from "../core_components/content/CoreMessage.vue";
-import CoreMetric from "../core_components/content/CoreMetric.vue";
-import CorePlotlyGraph from "../core_components/content/CorePlotlyGraph.vue";
-import CoreText from "../core_components/content/CoreText.vue";
-import CoreVegaLiteChart from "../core_components/content/CoreVegaLiteChart.vue";
-import CoreVideoPlayer from "../core_components/content/CoreVideoPlayer.vue";
-import CoreLink from "../core_components/content/CoreLink.vue";
-import CoreChatbot from "../core_components/content/CoreChatbot.vue";
-import CoreTags from "../core_components/content/CoreTags.vue";
-import CoreAvatar from "../core_components/content/CoreAvatar.vue";
-import CoreAnnotatedText from "../core_components/content/CoreAnnotatedText.vue";
-import CoreJsonViewer from "../core_components/content/CoreJsonViewer.vue";
+import CoreDataframe from "../components/core/content/CoreDataframe.vue";
+import CoreHeading from "../components/core/content/CoreHeading.vue";
+import CoreIcon from "../components/core/content/CoreIcon.vue";
+import CoreImage from "../components/core/content/CoreImage.vue";
+import CoreMessage from "../components/core/content/CoreMessage.vue";
+import CoreMetric from "../components/core/content/CoreMetric.vue";
+import CorePlotlyGraph from "../components/core/content/CorePlotlyGraph.vue";
+import CoreText from "../components/core/content/CoreText.vue";
+import CoreVegaLiteChart from "../components/core/content/CoreVegaLiteChart.vue";
+import CoreVideoPlayer from "../components/core/content/CoreVideoPlayer.vue";
+import CoreLink from "../components/core/content/CoreLink.vue";
+import CoreChatbot from "../components/core/content/CoreChatbot.vue";
+import CoreTags from "../components/core/content/CoreTags.vue";
+import CoreAvatar from "../components/core/content/CoreAvatar.vue";
+import CoreAnnotatedText from "../components/core/content/CoreAnnotatedText.vue";
+import CoreJsonViewer from "../components/core/content/CoreJsonViewer.vue";
 
 // input
-import CoreCheckboxInput from "../core_components/input/CoreCheckboxInput.vue";
-import CoreColorInput from "../core_components/input/CoreColorInput.vue";
-import CoreDateInput from "../core_components/input/CoreDateInput.vue";
-import CoreDropdownInput from "../core_components/input/CoreDropdownInput.vue";
-import CoreFileInput from "../core_components/input/CoreFileInput.vue";
-import CoreMultiselectInput from "../core_components/input/CoreMultiselectInput.vue";
-import CoreNumberInput from "../core_components/input/CoreNumberInput.vue";
-import CoreRadioInput from "../core_components/input/CoreRadioInput.vue";
-import CoreSelectInput from "../core_components/input/CoreSelectInput.vue";
-import CoreSliderInput from "../core_components/input/CoreSliderInput.vue";
-import CoreTextInput from "../core_components/input/CoreTextInput.vue";
-import CoreTextareaInput from "../core_components/input/CoreTextareaInput.vue";
-import CoreTimeInput from "../core_components/input/CoreTimeInput.vue";
-import CoreRating from "../core_components/input/CoreRatingInput.vue";
-import CoreSwitchInput from "../core_components/input/CoreSwitchInput.vue";
+import CoreCheckboxInput from "../components/core/input/CoreCheckboxInput.vue";
+import CoreColorInput from "../components/core/input/CoreColorInput.vue";
+import CoreDateInput from "../components/core/input/CoreDateInput.vue";
+import CoreDropdownInput from "../components/core/input/CoreDropdownInput.vue";
+import CoreFileInput from "../components/core/input/CoreFileInput.vue";
+import CoreMultiselectInput from "../components/core/input/CoreMultiselectInput.vue";
+import CoreNumberInput from "../components/core/input/CoreNumberInput.vue";
+import CoreRadioInput from "../components/core/input/CoreRadioInput.vue";
+import CoreSelectInput from "../components/core/input/CoreSelectInput.vue";
+import CoreSliderInput from "../components/core/input/CoreSliderInput.vue";
+import CoreTextInput from "../components/core/input/CoreTextInput.vue";
+import CoreTextareaInput from "../components/core/input/CoreTextareaInput.vue";
+import CoreTimeInput from "../components/core/input/CoreTimeInput.vue";
+import CoreRating from "../components/core/input/CoreRatingInput.vue";
+import CoreSwitchInput from "../components/core/input/CoreSwitchInput.vue";
 // layout
-import CoreColumn from "../core_components/layout/CoreColumn.vue";
-import CoreColumns from "../core_components/layout/CoreColumns.vue";
-import CoreHeader from "../core_components/layout/CoreHeader.vue";
-import CoreHorizontalStack from "../core_components/layout/CoreHorizontalStack.vue";
-import CoreSection from "../core_components/layout/CoreSection.vue";
-import CoreSeparator from "../core_components/layout/CoreSeparator.vue";
-import CoreSidebar from "../core_components/layout/CoreSidebar.vue";
-import CoreTab from "../core_components/layout/CoreTab.vue";
-import CoreTabs from "../core_components/layout/CoreTabs.vue";
-import CoreStep from "../core_components/layout/CoreStep.vue";
-import CoreSteps from "../core_components/layout/CoreSteps.vue";
+import CoreColumn from "../components/core/layout/CoreColumn.vue";
+import CoreColumns from "../components/core/layout/CoreColumns.vue";
+import CoreHeader from "../components/core/layout/CoreHeader.vue";
+import CoreHorizontalStack from "../components/core/layout/CoreHorizontalStack.vue";
+import CoreSection from "../components/core/layout/CoreSection.vue";
+import CoreSeparator from "../components/core/layout/CoreSeparator.vue";
+import CoreSidebar from "../components/core/layout/CoreSidebar.vue";
+import CoreTab from "../components/core/layout/CoreTab.vue";
+import CoreTabs from "../components/core/layout/CoreTabs.vue";
+import CoreStep from "../components/core/layout/CoreStep.vue";
+import CoreSteps from "../components/core/layout/CoreSteps.vue";
 // other
-import CoreButton from "../core_components/other/CoreButton.vue";
-import CoreHtml from "../core_components/other/CoreHtml.vue";
-import CorePagination from "../core_components/other/CorePagination.vue";
-import CoreRepeater from "../core_components/other/CoreRepeater.vue";
-import CoreTimer from "../core_components/other/CoreTimer.vue";
-import CoreWebcamCapture from "../core_components/other/CoreWebcamCapture.vue";
-import CoreReuse from "../core_components/other/CoreReuse.vue";
+import CoreButton from "../components/core/other/CoreButton.vue";
+import CoreHtml from "../components/core/other/CoreHtml.vue";
+import CorePagination from "../components/core/other/CorePagination.vue";
+import CoreRepeater from "../components/core/other/CoreRepeater.vue";
+import CoreTimer from "../components/core/other/CoreTimer.vue";
+import CoreWebcamCapture from "../components/core/other/CoreWebcamCapture.vue";
+import CoreReuse from "../components/core/other/CoreReuse.vue";
 // embed
-import CorePDF from "../core_components/embed/CorePDF.vue";
-import CoreIFrame from "../core_components/embed/CoreIFrame.vue";
-import CoreGoogleMaps from "../core_components/embed/CoreGoogleMaps.vue";
+import CorePDF from "../components/core/embed/CorePDF.vue";
+import CoreIFrame from "../components/core/embed/CoreIFrame.vue";
+import CoreGoogleMaps from "../components/core/embed/CoreGoogleMaps.vue";
 // root
-import CorePage from "../core_components/root/CorePage.vue";
-import CoreRoot from "../core_components/root/CoreRoot.vue";
+import CorePage from "../components/core/root/CorePage.vue";
+import CoreRoot from "../components/core/root/CoreRoot.vue";
+import CoreMapbox from "../components/core/embed/CoreMapbox.vue";
 
-import CoreMapbox from "../core_components/embed/CoreMapbox.vue";
+// WORKFLOWS
 
-import { AbstractTemplate, WriterComponentDefinition } from "../writerTypes";
+import WorkflowsNode from "../components/workflows/abstract/WorkflowsNode.vue";
+
+import { AbstractTemplate, WriterComponentDefinition } from "@/writerTypes";
 import { h } from "vue";
 
 const templateMap = {
@@ -122,6 +125,7 @@ const templateMap = {
 	avatar: CoreAvatar,
 	annotatedtext: CoreAnnotatedText,
 	jsonviewer: CoreJsonViewer,
+	workflowsnode: WorkflowsNode,
 };
 
 const abstractTemplateMap: Record<string, AbstractTemplate> = {};
diff --git a/src/ui/src/core/typeHierarchy.ts b/src/ui/src/core/typeHierarchy.ts
index 1a687cf6e..f2065b0fa 100644
--- a/src/ui/src/core/typeHierarchy.ts
+++ b/src/ui/src/core/typeHierarchy.ts
@@ -1,4 +1,4 @@
-import { Component, ComponentMap } from "../writerTypes";
+import { Component, ComponentMap } from "@/writerTypes";
 import {
 	getComponentDefinition,
 	getSupportedComponentTypes,
diff --git a/src/ui/src/custom_components/BubbleMessage.vue b/src/ui/src/custom_components/BubbleMessage.vue
index 0f2a5bcdb..363f7e1f3 100644
--- a/src/ui/src/custom_components/BubbleMessage.vue
+++ b/src/ui/src/custom_components/BubbleMessage.vue
@@ -32,8 +32,8 @@ export default {
 };
 </script>
 <script setup lang="ts">
-import { FieldType } from "../writerTypes";
-import injectionKeys from "../injectionKeys";
+import { FieldType } from "@/writerTypes";
+import injectionKeys from "@/injectionKeys";
 import { inject } from "vue";
 
 /*
diff --git a/src/ui/src/custom_components/BubbleMessageAdvanced.vue b/src/ui/src/custom_components/BubbleMessageAdvanced.vue
index 4ca6d2509..537a6c6d2 100644
--- a/src/ui/src/custom_components/BubbleMessageAdvanced.vue
+++ b/src/ui/src/custom_components/BubbleMessageAdvanced.vue
@@ -114,8 +114,8 @@ import {
 	FieldControl,
 	FieldType,
 	WriterComponentDefinition,
-} from "../writerTypes";
-import injectionKeys from "../injectionKeys";
+} from "@/writerTypes";
+import injectionKeys from "@/injectionKeys";
 import { inject, computed, ref, Ref } from "vue";
 
 /* Standard style fields can be imported from "sharedStyleFields" 
@@ -126,7 +126,7 @@ import {
 	cssClasses,
 	primaryTextColor,
 	containerBackgroundColor,
-} from "../renderer/sharedStyleFields";
+} from "@/renderer/sharedStyleFields";
 
 const rootEl: Ref<HTMLElement> = ref(null); // Root element is used to fire events
 
diff --git a/src/ui/src/renderer/ChildlessPlaceholder.vue b/src/ui/src/renderer/ChildlessPlaceholder.vue
index c90bc4653..950a15ed5 100644
--- a/src/ui/src/renderer/ChildlessPlaceholder.vue
+++ b/src/ui/src/renderer/ChildlessPlaceholder.vue
@@ -8,9 +8,9 @@
 
 <script setup lang="ts">
 import { computed, inject } from "vue";
-import BaseEmptiness from "../core_components/base/BaseEmptiness.vue";
-import injectionKeys from "../injectionKeys";
-import { Component } from "../writerTypes";
+import BaseEmptiness from "@/components/core/base/BaseEmptiness.vue";
+import injectionKeys from "@/injectionKeys";
+import { Component } from "@/writerTypes";
 
 const ALLOWED_LIST_MAX_LENGTH = 10;
 const wf = inject(injectionKeys.core);
diff --git a/src/ui/src/renderer/ComponentProxy.vue b/src/ui/src/renderer/ComponentProxy.vue
index c5daca409..e781aeca5 100644
--- a/src/ui/src/renderer/ComponentProxy.vue
+++ b/src/ui/src/renderer/ComponentProxy.vue
@@ -17,7 +17,7 @@ import {
 	InstancePath,
 	InstancePathItem,
 	UserFunction,
-} from "../writerTypes";
+} from "@/writerTypes";
 import ChildlessPlaceholder from "./ChildlessPlaceholder.vue";
 import ComponentProxy from "./ComponentProxy.vue";
 import RenderError from "./RenderError.vue";
@@ -383,5 +383,5 @@ export default {
 };
 </script>
 <style scoped>
-@import "../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 </style>
diff --git a/src/ui/src/renderer/ComponentRenderer.vue b/src/ui/src/renderer/ComponentRenderer.vue
index 69f49dbf9..0b2d1e5a5 100644
--- a/src/ui/src/renderer/ComponentRenderer.vue
+++ b/src/ui/src/renderer/ComponentRenderer.vue
@@ -21,10 +21,10 @@
 
 <script setup lang="ts">
 import { inject, ref, computed, watch } from "vue";
-import { Component, InstancePath } from "../writerTypes";
+import { Component, InstancePath } from "@/writerTypes";
 import ComponentProxy from "./ComponentProxy.vue";
 import RendererNotifications from "./RendererNotifications.vue";
-import injectionKeys from "../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 import { useEvaluator } from "./useEvaluator";
 
 const wf = inject(injectionKeys.core);
diff --git a/src/ui/src/renderer/RenderError.vue b/src/ui/src/renderer/RenderError.vue
index 98a3d33ba..ae6dd6413 100644
--- a/src/ui/src/renderer/RenderError.vue
+++ b/src/ui/src/renderer/RenderError.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script setup lang="ts">
-import { Component } from "../writerTypes";
+import { Component } from "@/writerTypes";
 
 interface Props {
 	componentType: Component["type"];
diff --git a/src/ui/src/renderer/instancePath.ts b/src/ui/src/renderer/instancePath.ts
index 941d7272f..f637d4e8b 100644
--- a/src/ui/src/renderer/instancePath.ts
+++ b/src/ui/src/renderer/instancePath.ts
@@ -1,4 +1,4 @@
-import type { InstancePath } from "../writerTypes";
+import type { InstancePath } from "@/writerTypes";
 
 export function flattenInstancePath(path: InstancePath) {
 	return path.map((ie) => `${ie.componentId}:${ie.instanceNumber}`).join(",");
diff --git a/src/ui/src/renderer/sharedStyleFields.ts b/src/ui/src/renderer/sharedStyleFields.ts
index 775801e75..4e9512001 100644
--- a/src/ui/src/renderer/sharedStyleFields.ts
+++ b/src/ui/src/renderer/sharedStyleFields.ts
@@ -1,4 +1,4 @@
-import { FieldCategory, FieldType } from "../writerTypes";
+import { FieldCategory, FieldType } from "@/writerTypes";
 
 export const accentColor = {
 	name: "Accent",
diff --git a/src/ui/src/renderer/useEvaluator.ts b/src/ui/src/renderer/useEvaluator.ts
index c7793954b..f1bbcd770 100644
--- a/src/ui/src/renderer/useEvaluator.ts
+++ b/src/ui/src/renderer/useEvaluator.ts
@@ -1,5 +1,5 @@
 import { ComputedRef, computed } from "vue";
-import { Component, Core, FieldType, InstancePath } from "../writerTypes";
+import { Component, Core, FieldType, InstancePath } from "@/writerTypes";
 
 export function useEvaluator(wf: Core) {
 	const templateRegex = /[\\]?@{([^}]*)}/g;
diff --git a/src/ui/src/renderer/useFormValueBroker.ts b/src/ui/src/renderer/useFormValueBroker.ts
index 8eee4d78d..90d8ce803 100644
--- a/src/ui/src/renderer/useFormValueBroker.ts
+++ b/src/ui/src/renderer/useFormValueBroker.ts
@@ -1,6 +1,6 @@
 import { ComponentPublicInstance, computed, Ref, ref, watch } from "vue";
-import { useEvaluator } from "../renderer/useEvaluator";
-import { Core, InstancePath } from "../writerTypes";
+import { useEvaluator } from "@/renderer/useEvaluator";
+import { Core, InstancePath } from "@/writerTypes";
 
 /**
  *
diff --git a/src/ui/src/writerTypes.ts b/src/ui/src/writerTypes.ts
index c63c35586..71e05d057 100644
--- a/src/ui/src/writerTypes.ts
+++ b/src/ui/src/writerTypes.ts
@@ -54,6 +54,7 @@ export type WriterComponentDefinition = {
 	name: string; // Display name for the component
 	description: string; // Short description
 	docs?: string; // Collapsible mini-docs
+	toolkit?: "default" | "workflows";
 	category?: string; // Category (Layout, Content, etc)
 	allowedChildrenTypes?: (string | "*" | "inherit")[]; // Which component types are allowed inside (if any)
 	allowedParentTypes?: string[]; // Which component types can contain this type of component
diff --git a/src/ui/tools/generator_storybook.mjs b/src/ui/tools/generator_storybook.mjs
index db14f24af..0c5ffdf8b 100644
--- a/src/ui/tools/generator_storybook.mjs
+++ b/src/ui/tools/generator_storybook.mjs
@@ -23,7 +23,8 @@ const __dirname = path.dirname(__filename);
 
 const srcFile = (...args) => path.resolve(__dirname, "..", "src", ...args);
 
-const storyFile = (...args) => srcFile("stories", "core_components", ...args);
+const storyFile = (...args) =>
+	srcFile("stories", "components", "core", ...args);
 
 const relPath = (from, to) => path.relative(path.dirname(from), to);
 

From 8bec343bf4018637c7156a9b419a61bd19506368 Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Thu, 29 Aug 2024 09:45:13 +0000
Subject: [PATCH 22/30] chore: Support for at symbol in editor

---
 src/ui/tsconfig.json | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/ui/tsconfig.json b/src/ui/tsconfig.json
index 005e6ee1e..42bc7360c 100644
--- a/src/ui/tsconfig.json
+++ b/src/ui/tsconfig.json
@@ -5,6 +5,9 @@
 		"moduleResolution": "node",
 		"importHelpers": true,
 		"isolatedModules": true,
-		"noEmit": true
+		"noEmit": true,
+		"paths": {
+			"@/*": ["./src/*"]
+		}
 	}
 }

From ddf3b335163073632304335e69c00811da921d96 Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Thu, 29 Aug 2024 10:49:04 +0000
Subject: [PATCH 23/30] feat: Filtering by toolkit

---
 src/ui/src/builder/BuilderSidebarToolbar.vue | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/ui/src/builder/BuilderSidebarToolbar.vue b/src/ui/src/builder/BuilderSidebarToolbar.vue
index 5c40f7f62..5aef00fd7 100644
--- a/src/ui/src/builder/BuilderSidebarToolbar.vue
+++ b/src/ui/src/builder/BuilderSidebarToolbar.vue
@@ -133,6 +133,10 @@ const definitionsByDisplayCategory = computed(() => {
 	types.map((type) => {
 		const definition = wf.getComponentDefinition(type);
 
+		const isToolkitMatch =
+			(definition.toolkit ?? "default") == toolkit.value;
+		if (!isToolkitMatch) return;
+
 		const matchingSearch =
 			searchQuery.value === "" ||
 			definition.name
@@ -159,6 +163,13 @@ const definitionsByDisplayCategory = computed(() => {
 	return result;
 });
 
+const toolkit = computed(() => {
+	if (ssbm.getMode() == "workflows") {
+		return "workflows";
+	}
+	return "default";
+});
+
 const handleDragStart = (ev: DragEvent, type: Component["type"]) => {
 	ssbm.setSelection(null);
 	ev.dataTransfer.setData(`application/json;writer=${type},`, "{}");

From 5f9d8aee530b56041cbc3924c352db63c0ecd997 Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Thu, 29 Aug 2024 10:49:17 +0000
Subject: [PATCH 24/30] chore: Feature flag workflows

---
 src/ui/src/builder/BuilderSwitcher.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/ui/src/builder/BuilderSwitcher.vue b/src/ui/src/builder/BuilderSwitcher.vue
index 106df3bd6..345349e1a 100644
--- a/src/ui/src/builder/BuilderSwitcher.vue
+++ b/src/ui/src/builder/BuilderSwitcher.vue
@@ -15,10 +15,11 @@
 			}}</span>
 		</div>
 		<div
+			v-if="isWorkflowsFeatureFlagged"
 			:class="{ active: activeId == 'workflows' }"
 			@click="selectOption('workflows')"
 		>
-			<i class="icon material-symbols-outlined"> code </i>
+			<i class="icon material-symbols-outlined"> linked_services </i>
 			Workflows
 		</div>
 		<div
@@ -34,8 +35,14 @@
 <script setup lang="ts">
 import { computed, inject, Ref, ref } from "vue";
 import injectionKeys from "../injectionKeys";
+
+const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
 
+const isWorkflowsFeatureFlagged = computed(() =>
+	wf.featureFlags.value.includes("workflows"),
+);
+
 let selectedId: Ref<string> = ref(null);
 
 const selectOption = (optionId: "ui" | "code" | "preview" | "workflows") => {

From 704cabfe4446ee42182c253cd9035c5070f761c7 Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Thu, 29 Aug 2024 10:59:18 +0000
Subject: [PATCH 25/30] chore: Rename default toolkit for core

---
 src/ui/src/writerTypes.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ui/src/writerTypes.ts b/src/ui/src/writerTypes.ts
index 71e05d057..0840be6c0 100644
--- a/src/ui/src/writerTypes.ts
+++ b/src/ui/src/writerTypes.ts
@@ -54,7 +54,7 @@ export type WriterComponentDefinition = {
 	name: string; // Display name for the component
 	description: string; // Short description
 	docs?: string; // Collapsible mini-docs
-	toolkit?: "default" | "workflows";
+	toolkit?: "core" | "workflows";
 	category?: string; // Category (Layout, Content, etc)
 	allowedChildrenTypes?: (string | "*" | "inherit")[]; // Which component types are allowed inside (if any)
 	allowedParentTypes?: string[]; // Which component types can contain this type of component

From 49a597f4cedcc748c2512b64a218981401c000f5 Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Thu, 29 Aug 2024 10:59:46 +0000
Subject: [PATCH 26/30] chore: Rename default toolkit core

---
 src/ui/src/builder/BuilderSidebarToolbar.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/ui/src/builder/BuilderSidebarToolbar.vue b/src/ui/src/builder/BuilderSidebarToolbar.vue
index 5aef00fd7..b7176271b 100644
--- a/src/ui/src/builder/BuilderSidebarToolbar.vue
+++ b/src/ui/src/builder/BuilderSidebarToolbar.vue
@@ -133,8 +133,7 @@ const definitionsByDisplayCategory = computed(() => {
 	types.map((type) => {
 		const definition = wf.getComponentDefinition(type);
 
-		const isToolkitMatch =
-			(definition.toolkit ?? "default") == toolkit.value;
+		const isToolkitMatch = (definition.toolkit ?? "core") == toolkit.value;
 		if (!isToolkitMatch) return;
 
 		const matchingSearch =
@@ -167,7 +166,7 @@ const toolkit = computed(() => {
 	if (ssbm.getMode() == "workflows") {
 		return "workflows";
 	}
-	return "default";
+	return "core";
 });
 
 const handleDragStart = (ev: DragEvent, type: Component["type"]) => {

From 693d03a7063b717c367dd367696136d100dd4f81 Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Thu, 29 Aug 2024 11:02:51 +0000
Subject: [PATCH 27/30] chore: Simplify path

---
 src/ui/src/builder/BuilderApp.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ui/src/builder/BuilderApp.vue b/src/ui/src/builder/BuilderApp.vue
index 2bb2093fe..7bd2b21fc 100644
--- a/src/ui/src/builder/BuilderApp.vue
+++ b/src/ui/src/builder/BuilderApp.vue
@@ -128,7 +128,7 @@ import BuilderHeader from "./BuilderHeader.vue";
 import BuilderSettings from "./BuilderSettings.vue";
 import BuilderEditor from "./BuilderEditor.vue";
 import BuilderSidebar from "./BuilderSidebar.vue";
-import ComponentRenderer from "../../src/renderer/ComponentRenderer.vue";
+import ComponentRenderer from "@/renderer/ComponentRenderer.vue";
 import BuilderComponentShortcuts from "./BuilderComponentShortcuts.vue";
 import injectionKeys from "../injectionKeys";
 import BuilderInstanceTracker from "./BuilderInstanceTracker.vue";

From 8ea9f16378ba898cd5fc35c2b99a089a160090a0 Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Thu, 29 Aug 2024 12:05:57 +0000
Subject: [PATCH 28/30] fix: Ignore image for non-core components

---
 docs/tests/componentImages.spec.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/tests/componentImages.spec.js b/docs/tests/componentImages.spec.js
index a42be3681..59b988184 100644
--- a/docs/tests/componentImages.spec.js
+++ b/docs/tests/componentImages.spec.js
@@ -3,6 +3,7 @@ const components = require('writer-ui/components.codegen.json');
 
 describe('Components docs', () => {
 	for (const component of components) {
+		if (component.toolkit && component.toolkit !== "core") return;
 		it(`${component.name} - should have an image`, () => {
 			expect(() => {
 				fs.accessSync(`./framework/public/components/${component.type}.png`);

From ab75d953c82b3210469ffbb6802e04b06bdc1b0f Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Thu, 29 Aug 2024 12:18:19 +0000
Subject: [PATCH 29/30] fix: Only run test for core toolkit

---
 tests/e2e/tests/lowCode.spec.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/tests/e2e/tests/lowCode.spec.ts b/tests/e2e/tests/lowCode.spec.ts
index fc644aa3c..3490bbf3e 100644
--- a/tests/e2e/tests/lowCode.spec.ts
+++ b/tests/e2e/tests/lowCode.spec.ts
@@ -65,7 +65,8 @@ test.describe("low-code UI", () => {
 			await expect(page.locator(`.initialization .wf-type-text`)).toHaveText("Initialization successful!");
 	});
 
-	components.forEach(({ type, name, fields, allowedParentTypes }) => {
+	components.forEach(({ type, name, fields, allowedParentTypes, toolkit }) => {
+		if (toolkit && toolkit !== "core") return;
 		const renderError = type === 'root' || (allowedParentTypes && !allowedParentTypes.includes('section'));
 		const componentName = name.replaceAll(/\s/g, "");
 		test(`create ${type} with ui.${componentName}() inside of section ${renderError ? '- render error' : ''}`, async ({ page }) => {

From d102113f7a3cbda3d46ee7b2cb094d44d45699e8 Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Thu, 29 Aug 2024 12:30:01 +0000
Subject: [PATCH 30/30] chore: Only apply test to core toolkit

---
 tests/e2e/tests/components.spec.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/tests/e2e/tests/components.spec.ts b/tests/e2e/tests/components.spec.ts
index 2ae9bae2b..8abfea5cd 100644
--- a/tests/e2e/tests/components.spec.ts
+++ b/tests/e2e/tests/components.spec.ts
@@ -12,6 +12,7 @@ type ComponentTestData = {
 	locator: string;
 	ignore?: boolean;
 	allowedParentTypes?: string[];
+	toolkit: string;
 };
 
 const mapComponents = {
@@ -52,6 +53,7 @@ const tests = components
 
 tests
 	.filter((component: ComponentTestData) => !component.ignore)
+	.filter((component: ComponentTestData) => !component.toolkit || component.toolkit == "core")
 	.forEach((component: ComponentTestData) => {
 		switch(component.test) {
 			case 'basic':