From 94b4a29e58ba774559a4ccf0528ccd5ee3637e9d Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Tue, 26 Nov 2024 10:52:35 +0000
Subject: [PATCH 01/19] fix: Remove unnecessary exception that caused failure
 when using binding

---
 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 72c03c3c7..cd2de92eb 100644
--- a/src/writer/core.py
+++ b/src/writer/core.py
@@ -1610,7 +1610,7 @@ def _get_handler_callable(self, target_component: Component, event_type: str) ->
             return None
         handler = target_component.handlers.get(event_type)
         if not handler:
-            raise ValueError(f"""Invalid handler. Couldn't find the handler for event type "{ event_type }" on component "{ target_component.id }".""")
+            return None
 
         if handler.startswith("$runWorkflow_"):
             workflow_key = handler[13:] 

From 9718048dba25c4af25bf04d141c9095acc95a39e Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Wed, 27 Nov 2024 11:31:59 +0000
Subject: [PATCH 02/19] chore: Settings panels refactor and new design

---
 src/ui/src/builder/BuilderApp.vue             |  85 ++---
 src/ui/src/builder/BuilderCodePanel.vue       |  19 +-
 .../src/builder/BuilderEmbeddedCodeEditor.vue |   9 +-
 src/ui/src/builder/BuilderHeader.vue          |  33 --
 src/ui/src/builder/BuilderLogIndicator.vue    |   2 +
 src/ui/src/builder/BuilderLogPanel.vue        |  12 +-
 src/ui/src/builder/BuilderPanel.vue           | 104 +++++-
 ...rSettings.vue => BuilderSettings copy.vue} |   8 +-
 .../src/builder/BuilderSettingsProperties.vue | 204 -----------
 src/ui/src/builder/BuilderSidebar.vue         |   4 +-
 src/ui/src/builder/BuilderStateExplorer.vue   |   1 +
 src/ui/src/builder/BuilderSwitcher.vue        |   3 -
 src/ui/src/builder/builderManager.ts          |   8 +-
 .../{ => settings}/BuilderFieldsAlign.vue     |   8 +-
 .../{ => settings}/BuilderFieldsColor.vue     |   6 +-
 .../{ => settings}/BuilderFieldsKeyValue.vue  |   6 +-
 .../{ => settings}/BuilderFieldsObject.vue    |   6 +-
 .../{ => settings}/BuilderFieldsPadding.vue   |  10 +-
 .../{ => settings}/BuilderFieldsShadow.vue    |   6 +-
 .../{ => settings}/BuilderFieldsText.vue      |   6 +-
 .../{ => settings}/BuilderFieldsTools.vue     |  16 +-
 .../{ => settings}/BuilderFieldsWidth.vue     |   8 +-
 .../src/builder/settings/BuilderSettings.vue  | 245 ++++++++++++++
 .../settings/BuilderSettingsActions.vue       | 319 ++++++++++++++++++
 .../{ => settings}/BuilderSettingsBinding.vue |   6 +-
 .../BuilderSettingsHandlers.vue               |  11 +-
 .../builder/settings/BuilderSettingsMain.vue  | 110 ++++++
 .../settings/BuilderSettingsMiniDocs.vue      |  43 +++
 .../settings/BuilderSettingsProperties.vue    | 195 +++++++++++
 .../BuilderSettingsVisibility.vue             |  10 +-
 .../{ => settings}/BuilderTemplateInput.vue   |   4 +-
 src/ui/src/builder/sharedStyles.css           |  55 ---
 src/ui/src/wds/WdsButton.vue                  |  18 +-
 33 files changed, 1106 insertions(+), 474 deletions(-)
 rename src/ui/src/builder/{BuilderSettings.vue => BuilderSettings copy.vue} (93%)
 delete mode 100644 src/ui/src/builder/BuilderSettingsProperties.vue
 rename src/ui/src/builder/{ => settings}/BuilderFieldsAlign.vue (96%)
 rename src/ui/src/builder/{ => settings}/BuilderFieldsColor.vue (95%)
 rename src/ui/src/builder/{ => settings}/BuilderFieldsKeyValue.vue (97%)
 rename src/ui/src/builder/{ => settings}/BuilderFieldsObject.vue (90%)
 rename src/ui/src/builder/{ => settings}/BuilderFieldsPadding.vue (97%)
 rename src/ui/src/builder/{ => settings}/BuilderFieldsShadow.vue (97%)
 rename src/ui/src/builder/{ => settings}/BuilderFieldsText.vue (93%)
 rename src/ui/src/builder/{ => settings}/BuilderFieldsTools.vue (95%)
 rename src/ui/src/builder/{ => settings}/BuilderFieldsWidth.vue (96%)
 create mode 100644 src/ui/src/builder/settings/BuilderSettings.vue
 create mode 100644 src/ui/src/builder/settings/BuilderSettingsActions.vue
 rename src/ui/src/builder/{ => settings}/BuilderSettingsBinding.vue (90%)
 rename src/ui/src/builder/{ => settings}/BuilderSettingsHandlers.vue (97%)
 create mode 100644 src/ui/src/builder/settings/BuilderSettingsMain.vue
 create mode 100644 src/ui/src/builder/settings/BuilderSettingsMiniDocs.vue
 create mode 100644 src/ui/src/builder/settings/BuilderSettingsProperties.vue
 rename src/ui/src/builder/{ => settings}/BuilderSettingsVisibility.vue (93%)
 rename src/ui/src/builder/{ => settings}/BuilderTemplateInput.vue (98%)

diff --git a/src/ui/src/builder/BuilderApp.vue b/src/ui/src/builder/BuilderApp.vue
index 5f4162a71..72180b19b 100644
--- a/src/ui/src/builder/BuilderApp.vue
+++ b/src/ui/src/builder/BuilderApp.vue
@@ -1,6 +1,9 @@
 <template>
 	<div class="BuilderApp" tabindex="-1">
-		<div class="mainGrid">
+		<div
+			class="mainGrid"
+			:class="{ openPanels: ssbm.openPanels.value.size > 0 }"
+		>
 			<BuilderHeader class="builderHeader"></BuilderHeader>
 			<div v-if="builderMode !== 'preview'" class="sidebar">
 				<BuilderSidebar></BuilderSidebar>
@@ -21,45 +24,20 @@
 					</ComponentRenderer>
 				</div>
 
-				<div
+				<BuilderSettings
 					v-if="ssbm.isSelectionActive()"
 					:key="selectedId ?? 'noneSelected'"
-					class="settingsBar"
-				>
-					<div>
-						<BuilderSettings></BuilderSettings>
-					</div>
-				</div>
+				></BuilderSettings>
 			</div>
 			<div class="builderPanels">
-				<BuilderCodePanel
-					v-if="ssbm.openPanels.has('code')"
-				></BuilderCodePanel>
-				<BuilderLogPanel
-					v-if="ssbm.openPanels.has('log')"
-				></BuilderLogPanel>
+				<BuilderCodePanel></BuilderCodePanel>
+				<BuilderLogPanel></BuilderLogPanel>
 			</div>
 		</div>
 
 		<!-- INSTANCE TRACKERS -->
 
 		<template v-if="builderMode !== 'preview'">
-			<BuilderInstanceTracker
-				v-if="ssbm.isSelectionActive()"
-				:key="selectedInstancePath"
-				class="shortcutsTracker"
-				:prevent-settings-bar-overlap="true"
-				:instance-path="selectedInstancePath"
-				:vertical-offset-pixels="-48"
-				data-writer-cage
-				@dragstart="handleRendererDragStart"
-				@dragend="handleRendererDragEnd"
-			>
-				<BuilderComponentShortcuts
-					:component-id="selectedId"
-					:instance-path="selectedInstancePath"
-				></BuilderComponentShortcuts>
-			</BuilderInstanceTracker>
 			<template v-if="candidateId && !isCandidacyConfirmed">
 				<BuilderInstanceTracker
 					:key="candidateInstancePath"
@@ -104,13 +82,12 @@ import injectionKeys from "../injectionKeys";
 import { isPlatformMac } from "../core/detectPlatform";
 import BuilderHeader from "./BuilderHeader.vue";
 import BuilderTooltip from "./BuilderTooltip.vue";
-import BuilderComponentShortcuts from "./BuilderComponentShortcuts.vue";
 import BuilderAsyncLoader from "./BuilderAsyncLoader.vue";
 import BuilderCodePanel from "./BuilderCodePanel.vue";
 import BuilderLogPanel from "./BuilderLogPanel.vue";
 
 const BuilderSettings = defineAsyncComponent({
-	loader: () => import("./BuilderSettings.vue"),
+	loader: () => import("./settings/BuilderSettings.vue"),
 	loadingComponent: BuilderAsyncLoader,
 });
 const BuilderSidebar = defineAsyncComponent({
@@ -165,10 +142,7 @@ const {
 } = useComponentActions(wf, ssbm);
 
 const builderMode = computed(() => ssbm.getMode());
-
 const selectedId = computed(() => ssbm.getSelection()?.componentId);
-const selectedInstancePath = computed(() => ssbm.getSelection()?.instancePath);
-const openPanelCount = computed<number>(() => ssbm.openPanels.size);
 
 function handleKeydown(ev: KeyboardEvent): void {
 	if (ev.key == "Escape") {
@@ -351,12 +325,16 @@ onMounted(() => {
 			"ssbm.getMode() !== 'preview' ? 'var(--builderSidebarWidth)' : '0px'"
 		)
 		1fr;
-	grid-template-rows: var(--builderTopBarHeight) 1fr v-bind(
-			"openPanelCount > 0 ? 'var(--builderPanelHeight)' : '0px'"
-		);
+	grid-template-rows: var(--builderTopBarHeight) 1fr 48px;
 	display: grid;
 }
 
+.mainGrid.openPanels {
+	grid-template-rows: var(--builderTopBarHeight) 1fr calc(
+			(100vh - var(--builderTopBarHeight)) * 0.5
+		);
+}
+
 .builderHeader {
 	grid-column: 1 / 3;
 	grid-row: 1;
@@ -365,7 +343,7 @@ onMounted(() => {
 
 .sidebar {
 	grid-column: 1 / 2;
-	grid-row: 2;
+	grid-row: 2 / 4;
 	min-height: 0;
 	border-right: 1px solid var(--builderAreaSeparatorColor);
 }
@@ -394,35 +372,10 @@ onMounted(() => {
 	--notificationsDisplacement: calc(var(--builderSettingsWidth) + 24px);
 }
 
-.settingsBar {
-	position: absolute;
-	right: 24px;
-	top: v-bind("ssbm.getMode() == 'workflows' ? '72px' : '20px'");
-	z-index: 4;
-	width: var(--builderSettingsWidth);
-	bottom: 24px;
-	overflow: hidden;
-	border: 1px solid var(--builderAreaSeparatorColor);
-	background: var(--builderBackgroundColor);
-	box-shadow: 0px 0px 12px 4px rgba(0, 0, 0, 0.04);
-	border-radius: 12px;
-}
-
-.settingsBar > div {
-	overflow-y: auto;
-	height: 100%;
-}
-
 .builderPanels {
-	grid-column: 1 / 3;
+	grid-column: 2 / 3;
 	grid-row: 3;
-	display: grid;
-	grid-template-columns: repeat(v-bind("openPanelCount"), 1fr);
-	grid-template-rows: 100%;
-}
-
-.builderPanels:empty {
-	display: none;
+	display: flex;
 }
 
 .shortcutsTracker,
diff --git a/src/ui/src/builder/BuilderCodePanel.vue b/src/ui/src/builder/BuilderCodePanel.vue
index 2b7e329ee..80d3dac54 100644
--- a/src/ui/src/builder/BuilderCodePanel.vue
+++ b/src/ui/src/builder/BuilderCodePanel.vue
@@ -1,7 +1,11 @@
 <template>
-	<BuilderPanel name="Code" :actions="actions" class="BuilderCodePanel">
+	<BuilderPanel
+		panel-id="code"
+		name="Code"
+		:actions="actions"
+		class="BuilderCodePanel"
+	>
 		<BuilderEmbeddedCodeEditor
-			:key="Array.from(wfbm.openPanels).join('-')"
 			v-model="code"
 			variant="full"
 			language="python"
@@ -50,17 +54,6 @@ const actions = computed<BuilderPanelAction[]>(() => [
 		},
 		isDisabled: isDisabled.value,
 	},
-	{
-		icon: "close",
-		name: "Close",
-		keyboardShortcut: {
-			modifierKey: false,
-			key: "Escape",
-		},
-		callback: () => {
-			wfbm.openPanels.delete("code");
-		},
-	},
 ]);
 
 watch(wf.runCode, (newRunCode) => {
diff --git a/src/ui/src/builder/BuilderEmbeddedCodeEditor.vue b/src/ui/src/builder/BuilderEmbeddedCodeEditor.vue
index 55c93dc8c..4a2e3c923 100644
--- a/src/ui/src/builder/BuilderEmbeddedCodeEditor.vue
+++ b/src/ui/src/builder/BuilderEmbeddedCodeEditor.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="BuilderEmbeddedCodeEditor">
+	<div ref="rootEl" class="BuilderEmbeddedCodeEditor">
 		<div ref="editorContainerEl" class="editorContainer"></div>
 	</div>
 </template>
@@ -9,7 +9,9 @@ import * as monaco from "monaco-editor";
 import "./builderEditorWorker";
 import { onMounted, onUnmounted, ref, toRefs, watch } from "vue";
 
+const rootEl = ref<HTMLElement>(null);
 const editorContainerEl = ref<HTMLElement>(null);
+const resizeObserver = new ResizeObserver(updateDimensions);
 let editor: monaco.editor.IStandaloneCodeEditor = null;
 
 const props = defineProps<{
@@ -63,7 +65,7 @@ onMounted(() => {
 		const newCode = editor.getValue();
 		emit("update:modelValue", newCode);
 	});
-	window.addEventListener("resize", updateDimensions.bind(this));
+	resizeObserver.observe(rootEl.value);
 });
 
 function updateDimensions() {
@@ -72,7 +74,7 @@ function updateDimensions() {
 
 onUnmounted(() => {
 	editor.dispose();
-	window.removeEventListener("resize", updateDimensions.bind(this));
+	resizeObserver.disconnect();
 });
 </script>
 
@@ -89,5 +91,6 @@ onUnmounted(() => {
 	min-height: 200px;
 	width: 100%;
 	height: 100%;
+	overflow: hidden;
 }
 </style>
diff --git a/src/ui/src/builder/BuilderHeader.vue b/src/ui/src/builder/BuilderHeader.vue
index a2be0bf07..7c3af606c 100644
--- a/src/ui/src/builder/BuilderHeader.vue
+++ b/src/ui/src/builder/BuilderHeader.vue
@@ -45,29 +45,6 @@
 			</BuilderModal>
 		</div>
 		<div class="gap"></div>
-		<WdsButton
-			variant="primary"
-			size="small"
-			class="panelToggler"
-			data-automation-action="toggle-code-panel"
-			:class="{ active: ssbm.openPanels.has('code') }"
-			@click="togglePanel('code')"
-		>
-			<i class="material-symbols-outlined"> code </i>
-			Code
-		</WdsButton>
-		<WdsButton
-			variant="primary"
-			size="small"
-			class="panelToggler"
-			data-automation-action="toggle-log-panel"
-			title="Toggle Log panel"
-			:class="{ active: ssbm.openPanels.has('log') }"
-			@click="togglePanel('log')"
-		>
-			Log
-			<BuilderLogIndicator class="indicator"></BuilderLogIndicator>
-		</WdsButton>
 		<div
 			class="syncHealth"
 			:class="wf.syncHealth.value"
@@ -126,16 +103,6 @@ function showStateExplorer() {
 	isStateExplorerShown.value = true;
 }
 
-function togglePanel(
-	panelId: typeof ssbm.openPanels extends Set<infer T> ? T : never,
-) {
-	if (ssbm.openPanels.has(panelId)) {
-		ssbm.openPanels.delete(panelId);
-		return;
-	}
-	ssbm.openPanels.add(panelId);
-}
-
 const customHandlerModalCloseAction: ModalAction = {
 	desc: "Close",
 	fn: () => {
diff --git a/src/ui/src/builder/BuilderLogIndicator.vue b/src/ui/src/builder/BuilderLogIndicator.vue
index ab04591c8..82df81164 100644
--- a/src/ui/src/builder/BuilderLogIndicator.vue
+++ b/src/ui/src/builder/BuilderLogIndicator.vue
@@ -39,6 +39,8 @@ const entryCountByType = computed(() => {
 	font-size: 14px;
 	font-weight: 400;
 	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
 	align-items: center;
 	gap: 4px;
 }
diff --git a/src/ui/src/builder/BuilderLogPanel.vue b/src/ui/src/builder/BuilderLogPanel.vue
index c1b610791..cdf61b2d9 100644
--- a/src/ui/src/builder/BuilderLogPanel.vue
+++ b/src/ui/src/builder/BuilderLogPanel.vue
@@ -1,5 +1,6 @@
 <template>
 	<BuilderPanel
+		panel-id="log"
 		name="Log"
 		:actions="actions"
 		tabindex="0"
@@ -92,17 +93,6 @@ const actions: BuilderPanelAction[] = [
 			key: "L",
 		},
 	},
-	{
-		icon: "close",
-		name: "Close",
-		callback: () => {
-			wfbm.openPanels.delete("log");
-		},
-		keyboardShortcut: {
-			modifierKey: false,
-			key: "Escape",
-		},
-	},
 ];
 
 const logEntries = computed(() => {
diff --git a/src/ui/src/builder/BuilderPanel.vue b/src/ui/src/builder/BuilderPanel.vue
index ff8ec322c..3385156d0 100644
--- a/src/ui/src/builder/BuilderPanel.vue
+++ b/src/ui/src/builder/BuilderPanel.vue
@@ -1,6 +1,21 @@
 <template>
-	<div class="BuilderPanel" @keydown="handleKeydown">
+	<div
+		class="BuilderPanel"
+		:class="{ collapsed, allPanelsCollapsed }"
+		@keydown="handleKeydown"
+	>
 		<div class="header">
+			<div class="collapser">
+				<WdsButton
+					variant="neutral"
+					size="icon"
+					@click="togglePanel(panelId)"
+				>
+					<i class="material-symbols-outlined">
+						{{ collapserIcon }}
+					</i>
+				</WdsButton>
+			</div>
 			<div class="title">{{ name }}</div>
 			<div class="titleCompanion">
 				<slot name="titleCompanion"></slot>
@@ -26,14 +41,11 @@
 				}}</i></WdsButton
 			>
 		</div>
-		<div class="content"><slot></slot></div>
+		<div v-if="!collapsed" class="content"><slot></slot></div>
 	</div>
 </template>
 
-<script setup lang="ts">
-import { getModifierKeyName, isModifierKeyActive } from "@/core/detectPlatform";
-import WdsButton from "@/wds/WdsButton.vue";
-
+<script lang="ts">
 export type BuilderPanelAction = {
 	icon: string;
 	name: string;
@@ -44,12 +56,53 @@ export type BuilderPanelAction = {
 		key: string;
 	};
 };
+</script>
+
+<script setup lang="ts">
+import { getModifierKeyName, isModifierKeyActive } from "@/core/detectPlatform";
+import injectionKeys from "@/injectionKeys";
+import WdsButton from "@/wds/WdsButton.vue";
+import { computed, inject } from "vue";
+
+const wfbm = inject(injectionKeys.builderManager);
+
+const panelIds: ("code" | "log")[] = ["code", "log"];
 
 const props = defineProps<{
+	panelId: (typeof panelIds)[number];
 	name: string;
 	actions: BuilderPanelAction[];
 }>();
 
+const collapsed = computed(() => !wfbm.openPanels.value.has(props.panelId));
+const allPanelsCollapsed = computed(() => wfbm.openPanels.value.size == 0);
+
+const collapserIcon = computed(() => {
+	function getIcons() {
+		const openPanelCount = wfbm.openPanels.value.size;
+		if (openPanelCount == 0) {
+			return ["expand_less", "expand_less"];
+		}
+		if (openPanelCount == panelIds.length) {
+			return ["chevron_left", "chevron_right"];
+		}
+		if (wfbm.openPanels.value.has(panelIds[0])) {
+			return ["expand_more", "chevron_left"];
+		}
+		return ["chevron_right", "expand_more"];
+	}
+
+	return getIcons()[panelIds.indexOf(props.panelId)];
+});
+
+function togglePanel(panelId: typeof props.panelId) {
+	if (wfbm.openPanels.value.has(panelId)) {
+		wfbm.openPanels.value.delete(panelId);
+		return;
+	}
+	wfbm.openPanels.value.add(panelId);
+}
+
 function handleKeydown(ev: KeyboardEvent) {
 	const isMod = isModifierKeyActive(ev);
 
@@ -81,12 +134,24 @@ function getKeyboardShortcutDescription(
 @import "./sharedStyles.css";
 
 .BuilderPanel {
-	border-top: 1px solid var(--builderSeparatorColor);
+	flex: 1 1 50%;
+	border-top: 1px solid var(--builderIntenseSeparatorColor);
 	display: grid;
 	background: var(--builderBackgroundColor);
-	grid-template-rows: 36px 1fr;
+	grid-template-rows: 48px 1fr;
 	grid-template-columns: 1fr;
-	height: 100%;
+}
+
+.BuilderPanel.allPanelsCollapsed {
+	grid-template-rows: 1fr;
+}
+
+.BuilderPanel.collapsed {
+	flex: 0 1 96px;
+}
+
+.BuilderPanel.allPanelsCollapsed:last-child {
+	flex: 1 0 96px;
 }
 
 .BuilderPanel:not(:first-child) {
@@ -98,9 +163,19 @@ function getKeyboardShortcutDescription(
 	grid-row: 1 / 2;
 	display: flex;
 	align-items: center;
-	padding: 8px 8px 8px 20px;
+	padding: 8px;
+	gap: 8px;
+	flex-direction: row;
+}
+
+.BuilderPanel:not(.collapsed) .header {
 	border-bottom: 1px solid var(--builderSeparatorColor);
-	gap: 12px;
+}
+
+.BuilderPanel.collapsed:not(.allPanelsCollapsed) .header {
+	flex-direction: column;
+	grid-template-rows: 1fr;
+	height: 100%;
 }
 
 .header .title {
@@ -110,16 +185,10 @@ function getKeyboardShortcutDescription(
 	line-height: 140%;
 }
 
-.header .titleCompanion {
-}
-
 .header .gap {
 	flex: 1 0 auto;
 }
 
-.header .actionsCompanion {
-}
-
 .header .actions {
 	display: flex;
 	font-size: 16px;
@@ -129,5 +198,6 @@ function getKeyboardShortcutDescription(
 	grid-column: 1 / 2;
 	grid-row: 2 / 3;
 	overflow: auto;
+	width: 100%;
 }
 </style>
diff --git a/src/ui/src/builder/BuilderSettings.vue b/src/ui/src/builder/BuilderSettings copy.vue
similarity index 93%
rename from src/ui/src/builder/BuilderSettings.vue
rename to src/ui/src/builder/BuilderSettings copy.vue
index c8d88311e..0c432cb66 100644
--- a/src/ui/src/builder/BuilderSettings.vue
+++ b/src/ui/src/builder/BuilderSettings copy.vue	
@@ -71,14 +71,14 @@ import { marked } from "marked";
 import { inject, computed, ref, watch, defineAsyncComponent } from "vue";
 import injectionKeys from "../injectionKeys";
 
-import BuilderSettingsProperties from "./BuilderSettingsProperties.vue";
-import BuilderSettingsBinding from "./BuilderSettingsBinding.vue";
-import BuilderSettingsVisibility from "./BuilderSettingsVisibility.vue";
+import BuilderSettingsProperties from "./settings/BuilderSettingsProperties.vue";
+import BuilderSettingsBinding from "./settings/BuilderSettingsBinding.vue";
+import BuilderSettingsVisibility from "./settings/BuilderSettingsVisibility.vue";
 import BuilderCopyText from "./BuilderCopyText.vue";
 import BuilderAsyncLoader from "./BuilderAsyncLoader.vue";
 
 const BuilderSettingsHandlers = defineAsyncComponent({
-	loader: () => import("./BuilderSettingsHandlers.vue"),
+	loader: () => import("./settings/BuilderSettingsHandlers.vue"),
 	loadingComponent: BuilderAsyncLoader,
 });
 
diff --git a/src/ui/src/builder/BuilderSettingsProperties.vue b/src/ui/src/builder/BuilderSettingsProperties.vue
deleted file mode 100644
index 3739ef62e..000000000
--- a/src/ui/src/builder/BuilderSettingsProperties.vue
+++ /dev/null
@@ -1,204 +0,0 @@
-<template>
-	<div
-		v-if="ssbm.isSelectionActive() && fields"
-		class="BuilderSettingsProperties"
-	>
-		<div class="sectionTitle">
-			<span class="material-symbols-outlined"> tune </span>
-			<h3>Properties</h3>
-		</div>
-		<div>
-			<div
-				v-for="propertyCategory in fieldCategories"
-				:key="propertyCategory"
-				class="propertyCategory"
-			>
-				<div
-					v-if="fieldsByCategory[propertyCategory].length > 0"
-					class="title"
-				>
-					<h4>{{ propertyCategory }}</h4>
-				</div>
-				<div
-					v-for="[fieldKey, fieldValue] in fieldsByCategory[
-						propertyCategory
-					]"
-					:key="fieldKey"
-				>
-					<div class="fieldWrapper">
-						<div v-if="propertyCategory != 'Tools'" class="name">
-							{{ fieldValue.name ?? fieldKey
-							}}<span class="type"> : {{ fieldValue.type }}</span>
-						</div>
-
-						<BuilderFieldsColor
-							v-if="fieldValue.type == FieldType.Color"
-							class="content"
-							:field-key="fieldKey"
-							:component-id="selectedComponent.id"
-						></BuilderFieldsColor>
-
-						<BuilderFieldsShadow
-							v-if="fieldValue.type == FieldType.Shadow"
-							class="content"
-							:field-key="fieldKey"
-							:component-id="selectedComponent.id"
-						></BuilderFieldsShadow>
-
-						<BuilderFieldsKeyValue
-							v-if="fieldValue.type == FieldType.KeyValue"
-							class="content"
-							:field-key="fieldKey"
-							:component-id="selectedComponent.id"
-							:instance-path="selectedInstancePath"
-						></BuilderFieldsKeyValue>
-
-						<BuilderFieldsText
-							v-if="fieldValue.type == FieldType.Text"
-							:field-key="fieldKey"
-							:component-id="selectedComponent.id"
-						></BuilderFieldsText>
-
-						<BuilderFieldsText
-							v-if="fieldValue.type == FieldType.Number"
-							:field-key="fieldKey"
-							:component-id="selectedComponent.id"
-						></BuilderFieldsText>
-
-						<BuilderFieldsText
-							v-if="fieldValue.type == FieldType.IdKey"
-							:field-key="fieldKey"
-							:component-id="selectedComponent.id"
-						></BuilderFieldsText>
-
-						<BuilderFieldsObject
-							v-if="fieldValue.type == FieldType.Object"
-							class="content"
-							:field-key="fieldKey"
-							:component-id="selectedComponent.id"
-						></BuilderFieldsObject>
-
-						<BuilderFieldsWidth
-							v-if="fieldValue.type == FieldType.Width"
-							class="content"
-							:field-key="fieldKey"
-							:component-id="selectedComponent.id"
-						></BuilderFieldsWidth>
-
-						<BuilderFieldsAlign
-							v-if="fieldValue.type == FieldType.HAlign"
-							class="content"
-							direction="horizontal"
-							:field-key="fieldKey"
-							:component-id="selectedComponent.id"
-						></BuilderFieldsAlign>
-
-						<BuilderFieldsAlign
-							v-if="fieldValue.type == FieldType.VAlign"
-							class="content"
-							direction="vertical"
-							:field-key="fieldKey"
-							:component-id="selectedComponent.id"
-						></BuilderFieldsAlign>
-
-						<BuilderFieldsPadding
-							v-if="fieldValue.type == FieldType.Padding"
-							class="content"
-							:field-key="fieldKey"
-							:component-id="selectedComponent.id"
-						></BuilderFieldsPadding>
-
-						<BuilderFieldsTools
-							v-if="fieldValue.type == FieldType.Tools"
-							:field-key="fieldKey"
-							:component-id="selectedComponent.id"
-						>
-						</BuilderFieldsTools>
-
-						<div v-if="fieldValue.desc" class="desc">
-							{{ fieldValue.desc }}
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-</template>
-
-<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 BuilderFieldsAlign from "./BuilderFieldsAlign.vue";
-import BuilderFieldsColor from "./BuilderFieldsColor.vue";
-import BuilderFieldsKeyValue from "./BuilderFieldsKeyValue.vue";
-import BuilderFieldsObject from "./BuilderFieldsObject.vue";
-import BuilderFieldsPadding from "./BuilderFieldsPadding.vue";
-import BuilderFieldsShadow from "./BuilderFieldsShadow.vue";
-import BuilderFieldsText from "./BuilderFieldsText.vue";
-import BuilderFieldsWidth from "./BuilderFieldsWidth.vue";
-import BuilderFieldsTools from "./BuilderFieldsTools.vue";
-
-const wf = inject(injectionKeys.core);
-const ssbm = inject(injectionKeys.builderManager);
-
-const selectedInstancePath = computed<InstancePath>(() =>
-	parseInstancePathString(ssbm.getSelection()?.instancePath),
-);
-
-const selectedComponent = computed(() => {
-	return wf.getComponentById(ssbm.getSelectedId());
-});
-
-const fields = computed(() => {
-	const { type } = selectedComponent.value;
-	const definition = wf.getComponentDefinition(type);
-	return definition.fields;
-});
-
-const fieldCategories = [
-	FieldCategory.General,
-	FieldCategory.Style,
-	FieldCategory.Tools,
-];
-
-const fieldsByCategory = computed(() => {
-	const entries = Object.entries(fields.value);
-	const result = {
-		[FieldCategory.General]: entries.filter(
-			([_, fieldValue]) =>
-				!fieldValue.category ||
-				fieldValue.category == FieldCategory.General,
-		),
-		[FieldCategory.Style]: entries.filter(
-			([_, fieldValue]) => fieldValue.category == FieldCategory.Style,
-		),
-		[FieldCategory.Tools]: entries.filter(
-			([_, fieldValue]) => fieldValue.category == FieldCategory.Tools,
-		),
-	};
-	return result;
-});
-</script>
-
-<style scoped>
-@import "./sharedStyles.css";
-
-.BuilderSettingsProperties {
-	padding: 24px;
-}
-
-.propertyCategory .title {
-	margin-top: 24px;
-}
-
-textarea.content {
-	resize: vertical;
-	height: 8em;
-}
-
-input[type="color"].content {
-	height: 48px;
-}
-</style>
diff --git a/src/ui/src/builder/BuilderSidebar.vue b/src/ui/src/builder/BuilderSidebar.vue
index 14c2d4ed4..9a7d5f777 100644
--- a/src/ui/src/builder/BuilderSidebar.vue
+++ b/src/ui/src/builder/BuilderSidebar.vue
@@ -20,15 +20,15 @@ import BuilderSidebarTree from "./BuilderSidebarTree.vue";
 }
 
 .toolbar {
+	flex: 0 0 50%;
 	position: relative;
-	height: 50%;
 	display: flex;
 	flex-direction: column;
 	overflow-y: scroll;
 }
 
 .tree {
-	height: 50%;
+	flex: 0 0 50%;
 	overflow-y: auto;
 	border-top: 1px solid var(--builderSeparatorColor);
 }
diff --git a/src/ui/src/builder/BuilderStateExplorer.vue b/src/ui/src/builder/BuilderStateExplorer.vue
index 74ee0dc35..771a0fddd 100644
--- a/src/ui/src/builder/BuilderStateExplorer.vue
+++ b/src/ui/src/builder/BuilderStateExplorer.vue
@@ -4,6 +4,7 @@
 			:data="wf.userState.value"
 			:enable-copy-to-json="true"
 			:initial-depth="1"
+			:hide-root="true"
 		></SharedJsonViewer>
 	</div>
 </template>
diff --git a/src/ui/src/builder/BuilderSwitcher.vue b/src/ui/src/builder/BuilderSwitcher.vue
index 7a3cf597d..eb9865226 100644
--- a/src/ui/src/builder/BuilderSwitcher.vue
+++ b/src/ui/src/builder/BuilderSwitcher.vue
@@ -46,9 +46,6 @@ const selectOption = (optionId: "ui" | "preview" | "workflows") => {
 	if (preMode == optionId) return;
 	selectedId.value = optionId;
 	ssbm.setMode(optionId);
-	if (optionId == "preview") {
-		ssbm.openPanels.clear();
-	}
 	if (
 		optionId == "preview" ||
 		preMode == "workflows" ||
diff --git a/src/ui/src/builder/builderManager.ts b/src/ui/src/builder/builderManager.ts
index e6c88cd2d..bc7d0a38e 100644
--- a/src/ui/src/builder/builderManager.ts
+++ b/src/ui/src/builder/builderManager.ts
@@ -14,6 +14,9 @@ transactions.
 const MUTATIONTRANSACTION_DEBOUNCE_MS = 1000;
 const MAX_LOG_ENTRIES = 100;
 
+export const panelIds = ["code", "log"];
+export type PanelId = (typeof panelIds)[number];
+
 export type WorkflowExecutionLog = {
 	summary: {
 		componentId: Component["id"];
@@ -60,7 +63,6 @@ type SelectionSource = "click" | "tree" | "log";
 
 type State = {
 	mode: "ui" | "workflows" | "preview";
-	openPanels: Set<"log" | "code">;
 	selection: {
 		componentId: Component["id"];
 		instancePath: string;
@@ -80,7 +82,6 @@ type State = {
 export function generateBuilderManager() {
 	const initState: State = {
 		mode: "ui",
-		openPanels: new Set(),
 		selection: null,
 		clipboard: null,
 		mutationTransactionsSnapshot: {
@@ -309,7 +310,8 @@ export function generateBuilderManager() {
 	const builder = {
 		setMode,
 		getMode,
-		openPanels: state.value.openPanels,
+		openPanels: ref(new Set<"code" | "log">()),
+		isSettingsBarCollapsed: ref(false),
 		isSelectionActive,
 		setSelection,
 		getSelection,
diff --git a/src/ui/src/builder/BuilderFieldsAlign.vue b/src/ui/src/builder/settings/BuilderFieldsAlign.vue
similarity index 96%
rename from src/ui/src/builder/BuilderFieldsAlign.vue
rename to src/ui/src/builder/settings/BuilderFieldsAlign.vue
index 44b0dd2af..e77a5e2ed 100644
--- a/src/ui/src/builder/BuilderFieldsAlign.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsAlign.vue
@@ -71,9 +71,9 @@ import {
 	toRefs,
 } from "vue";
 import { Component } from "@/writerTypes";
-import { useComponentActions } from "./useComponentActions";
-import injectionKeys from "../injectionKeys";
-import BuilderSelect from "./BuilderSelect.vue";
+import { useComponentActions } from "../useComponentActions";
+import injectionKeys from "@/injectionKeys";
+import BuilderSelect from "../BuilderSelect.vue";
 import BuilderTemplateInput from "./BuilderTemplateInput.vue";
 
 const wf = inject(injectionKeys.core);
@@ -261,7 +261,7 @@ onBeforeUnmount(() => {
 </script>
 
 <style scoped>
-@import "./sharedStyles.css";
+@import "../sharedStyles.css";
 
 .chipStackContainer {
 	padding: 12px;
diff --git a/src/ui/src/builder/BuilderFieldsColor.vue b/src/ui/src/builder/settings/BuilderFieldsColor.vue
similarity index 95%
rename from src/ui/src/builder/BuilderFieldsColor.vue
rename to src/ui/src/builder/settings/BuilderFieldsColor.vue
index 4385bd6b7..e96a65755 100644
--- a/src/ui/src/builder/BuilderFieldsColor.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsColor.vue
@@ -71,8 +71,8 @@ import {
 	toRefs,
 } from "vue";
 import { Component } from "@/writerTypes";
-import { useComponentActions } from "./useComponentActions";
-import injectionKeys from "../injectionKeys";
+import { useComponentActions } from "../useComponentActions";
+import injectionKeys from "../../injectionKeys";
 import BuilderTemplateInput from "./BuilderTemplateInput.vue";
 
 const wf = inject(injectionKeys.core);
@@ -142,7 +142,7 @@ onBeforeUnmount(() => {
 </script>
 
 <style scoped>
-@import "./sharedStyles.css";
+@import "../sharedStyles.css";
 
 .chipStackContainer {
 	padding: 12px;
diff --git a/src/ui/src/builder/BuilderFieldsKeyValue.vue b/src/ui/src/builder/settings/BuilderFieldsKeyValue.vue
similarity index 97%
rename from src/ui/src/builder/BuilderFieldsKeyValue.vue
rename to src/ui/src/builder/settings/BuilderFieldsKeyValue.vue
index 006002809..9742227ab 100644
--- a/src/ui/src/builder/BuilderFieldsKeyValue.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsKeyValue.vue
@@ -85,12 +85,12 @@ import {
 	toRefs,
 	watch,
 } from "vue";
-import injectionKeys from "../injectionKeys";
+import injectionKeys from "../../injectionKeys";
 import { useEvaluator } from "@/renderer/useEvaluator";
 import type { InstancePath } from "@/writerTypes";
 import BuilderFieldsObject from "./BuilderFieldsObject.vue";
 import BuilderTemplateInput from "./BuilderTemplateInput.vue";
-import { useComponentActions } from "./useComponentActions";
+import { useComponentActions } from "../useComponentActions";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
@@ -189,7 +189,7 @@ onMounted(async () => {
 </script>
 
 <style scoped>
-@import "./sharedStyles.css";
+@import "../sharedStyles.css";
 
 .chipStackContainer {
 	padding: 12px;
diff --git a/src/ui/src/builder/BuilderFieldsObject.vue b/src/ui/src/builder/settings/BuilderFieldsObject.vue
similarity index 90%
rename from src/ui/src/builder/BuilderFieldsObject.vue
rename to src/ui/src/builder/settings/BuilderFieldsObject.vue
index db4329c43..e52726c03 100644
--- a/src/ui/src/builder/BuilderFieldsObject.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsObject.vue
@@ -16,8 +16,8 @@
 <script setup lang="ts">
 import { toRefs, inject, computed } from "vue";
 import { Component } from "@/writerTypes";
-import { useComponentActions } from "./useComponentActions";
-import injectionKeys from "../injectionKeys";
+import { useComponentActions } from "../useComponentActions";
+import injectionKeys from "@/injectionKeys";
 import BuilderTemplateInput from "./BuilderTemplateInput.vue";
 
 const wf = inject(injectionKeys.core);
@@ -43,7 +43,7 @@ const templateField = computed(() => {
 </script>
 
 <style scoped>
-@import "./sharedStyles.css";
+@import "../sharedStyles.css";
 
 .BuilderFieldsObject {
 	padding: 16px 12px 12px 12px;
diff --git a/src/ui/src/builder/BuilderFieldsPadding.vue b/src/ui/src/builder/settings/BuilderFieldsPadding.vue
similarity index 97%
rename from src/ui/src/builder/BuilderFieldsPadding.vue
rename to src/ui/src/builder/settings/BuilderFieldsPadding.vue
index 77f4bceba..d0b4baf72 100644
--- a/src/ui/src/builder/BuilderFieldsPadding.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsPadding.vue
@@ -140,9 +140,9 @@ import {
 	toRefs,
 } from "vue";
 import { Component } from "@/writerTypes";
-import { useComponentActions } from "./useComponentActions";
-import injectionKeys from "../injectionKeys";
-import BuilderSelect from "./BuilderSelect.vue";
+import { useComponentActions } from "../useComponentActions";
+import injectionKeys from "@/injectionKeys";
+import BuilderSelect from "../BuilderSelect.vue";
 import BuilderTemplateInput from "./BuilderTemplateInput.vue";
 
 const wf = inject(injectionKeys.core);
@@ -388,8 +388,8 @@ onBeforeUnmount(() => {
 </script>
 
 <style scoped>
-@import "./sharedStyles.css";
-@import "./ico.css";
+@import "../sharedStyles.css";
+@import "../ico.css";
 
 .chipStackContainer {
 	padding: 12px;
diff --git a/src/ui/src/builder/BuilderFieldsShadow.vue b/src/ui/src/builder/settings/BuilderFieldsShadow.vue
similarity index 97%
rename from src/ui/src/builder/BuilderFieldsShadow.vue
rename to src/ui/src/builder/settings/BuilderFieldsShadow.vue
index 54be9f0ac..2c9912d9d 100644
--- a/src/ui/src/builder/BuilderFieldsShadow.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsShadow.vue
@@ -140,8 +140,8 @@ import {
 	toRefs,
 } from "vue";
 import { Component } from "@/writerTypes";
-import { useComponentActions } from "./useComponentActions";
-import injectionKeys from "../injectionKeys";
+import { useComponentActions } from "../useComponentActions";
+import injectionKeys from "../../injectionKeys";
 import BuilderTemplateInput from "./BuilderTemplateInput.vue";
 
 const wf = inject(injectionKeys.core);
@@ -234,7 +234,7 @@ onBeforeUnmount(() => {
 </script>
 
 <style scoped>
-@import "./sharedStyles.css";
+@import "../sharedStyles.css";
 
 .chipStackContainer {
 	padding: 12px;
diff --git a/src/ui/src/builder/BuilderFieldsText.vue b/src/ui/src/builder/settings/BuilderFieldsText.vue
similarity index 93%
rename from src/ui/src/builder/BuilderFieldsText.vue
rename to src/ui/src/builder/settings/BuilderFieldsText.vue
index cee9043a6..577e7ec8f 100644
--- a/src/ui/src/builder/BuilderFieldsText.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsText.vue
@@ -32,8 +32,8 @@
 <script setup lang="ts">
 import { toRefs, inject, computed } from "vue";
 import { Component, FieldControl } from "@/writerTypes";
-import { useComponentActions } from "./useComponentActions";
-import injectionKeys from "../injectionKeys";
+import { useComponentActions } from "../useComponentActions";
+import injectionKeys from "../../injectionKeys";
 import BuilderTemplateInput from "./BuilderTemplateInput.vue";
 
 const wf = inject(injectionKeys.core);
@@ -81,5 +81,5 @@ const handleInput = (ev: Event) => {
 </style>
 
 <style scoped>
-@import "./sharedStyles.css";
+@import "../sharedStyles.css";
 </style>
diff --git a/src/ui/src/builder/BuilderFieldsTools.vue b/src/ui/src/builder/settings/BuilderFieldsTools.vue
similarity index 95%
rename from src/ui/src/builder/BuilderFieldsTools.vue
rename to src/ui/src/builder/settings/BuilderFieldsTools.vue
index d1d8bb4f9..e1f8412fe 100644
--- a/src/ui/src/builder/BuilderFieldsTools.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsTools.vue
@@ -5,7 +5,7 @@
 	>
 		<div class="tools">
 			<div
-				v-for="(tool, toolName) in tools"
+				v-for="(_tool, toolName) in tools"
 				:key="toolName"
 				class="tool"
 				@click="editTool(toolName)"
@@ -73,17 +73,17 @@
 <script setup lang="ts">
 import { toRefs, inject, computed, ref, defineAsyncComponent } from "vue";
 import { Component } from "@/writerTypes";
-import { useComponentActions } from "./useComponentActions";
-import injectionKeys from "../injectionKeys";
+import { useComponentActions } from "../useComponentActions";
+import injectionKeys from "@/injectionKeys";
 import WdsButton from "@/wds/WdsButton.vue";
-import BuilderModal, { ModalAction } from "./BuilderModal.vue";
+import BuilderModal, { ModalAction } from "../BuilderModal.vue";
 import WdsTextInput from "@/wds/WdsTextInput.vue";
 import WdsTextareaInput from "@/wds/WdsTextareaInput.vue";
 import WdsDropdownInput from "@/wds/WdsDropdownInput.vue";
 import WdsFieldWrapper from "@/wds/WdsFieldWrapper.vue";
 
 const BuilderEmbeddedCodeEditor = defineAsyncComponent(
-	() => import("./BuilderEmbeddedCodeEditor.vue"),
+	() => import("../BuilderEmbeddedCodeEditor.vue"),
 );
 
 type FunctionTool = {
@@ -266,7 +266,7 @@ const customHandlerModalCloseAction: ModalAction = {
 </script>
 
 <style scoped>
-@import "./sharedStyles.css";
+@import "../sharedStyles.css";
 
 .BuilderFieldsTools {
 	--separatorColor: var(--builderSeparatorColor);
@@ -317,7 +317,3 @@ const customHandlerModalCloseAction: ModalAction = {
 	margin-top: 16px;
 }
 </style>
-
-<style scoped>
-@import "./sharedStyles.css";
-</style>
diff --git a/src/ui/src/builder/BuilderFieldsWidth.vue b/src/ui/src/builder/settings/BuilderFieldsWidth.vue
similarity index 96%
rename from src/ui/src/builder/BuilderFieldsWidth.vue
rename to src/ui/src/builder/settings/BuilderFieldsWidth.vue
index 1c80e49e9..160defde8 100644
--- a/src/ui/src/builder/BuilderFieldsWidth.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsWidth.vue
@@ -79,9 +79,9 @@ import {
 	toRefs,
 } from "vue";
 import { Component } from "@/writerTypes";
-import { useComponentActions } from "./useComponentActions";
-import injectionKeys from "../injectionKeys";
-import BuilderSelect from "./BuilderSelect.vue";
+import { useComponentActions } from "../useComponentActions";
+import injectionKeys from "../../injectionKeys";
+import BuilderSelect from "../BuilderSelect.vue";
 import BuilderTemplateInput from "./BuilderTemplateInput.vue";
 
 const wf = inject(injectionKeys.core);
@@ -257,7 +257,7 @@ onBeforeUnmount(() => {
 </script>
 
 <style scoped>
-@import "./sharedStyles.css";
+@import "../sharedStyles.css";
 
 .chipStackContainer {
 	padding: 12px;
diff --git a/src/ui/src/builder/settings/BuilderSettings.vue b/src/ui/src/builder/settings/BuilderSettings.vue
new file mode 100644
index 000000000..6bd46637a
--- /dev/null
+++ b/src/ui/src/builder/settings/BuilderSettings.vue
@@ -0,0 +1,245 @@
+<template>
+	<div
+		v-if="ssbm.isSelectionActive()"
+		class="BuilderSettings"
+		:class="{ collapsed, miniDocsActive }"
+	>
+		<div class="collapser">
+			<WdsButton
+				v-if="collapsed"
+				class="collapserButton"
+				size="small"
+				variant="neutral"
+				data-writer-tooltip-placement="left"
+				data-writer-tooltip="Expand settings"
+				@click="toggleSettings"
+				><i class="material-symbols-outlined">settings</i></WdsButton
+			>
+			<WdsButton
+				v-else
+				class="collapserButton"
+				size="small"
+				variant="neutral"
+				data-writer-tooltip-placement="left"
+				data-writer-tooltip="Collapse settings"
+				@click="toggleSettings"
+				><i class="material-symbols-outlined"
+					>double_arrow</i
+				></WdsButton
+			>
+		</div>
+		<div class="titleBar">
+			<div>{{ componentDefinition.name }}</div>
+			<WdsButton
+				v-if="Boolean(rawMiniDocs)"
+				:inert="collapsed"
+				class="collapserButton"
+				size="small"
+				variant="neutral"
+				data-writer-tooltip-placement="top"
+				data-writer-tooltip="Toggle mini docs"
+				@click="toggleMiniDocs"
+				><i class="material-symbols-outlined">info</i></WdsButton
+			>
+		</div>
+		<BuilderSettingsMiniDocs
+			v-if="miniDocsActive && rawMiniDocs && !collapsed"
+			class="miniDocs"
+			:raw-mini-docs="rawMiniDocs"
+		></BuilderSettingsMiniDocs>
+		<BuilderSettingsActions class="actions"></BuilderSettingsActions>
+		<BuilderSettingsMain
+			:inert="collapsed"
+			class="main"
+		></BuilderSettingsMain>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { inject, computed, ref, watch } from "vue";
+import injectionKeys from "../../injectionKeys";
+
+import BuilderSettingsActions from "./BuilderSettingsActions.vue";
+import BuilderSettingsMain from "./BuilderSettingsMain.vue";
+import BuilderSettingsMiniDocs from "./BuilderSettingsMiniDocs.vue";
+import WdsButton from "@/wds/WdsButton.vue";
+
+const wf = inject(injectionKeys.core);
+const ssbm = inject(injectionKeys.builderManager);
+const miniDocsActive = ref(false);
+
+const component = computed(() => wf.getComponentById(ssbm.getSelectedId()));
+const collapsed = computed(() => ssbm.isSettingsBarCollapsed.value);
+
+function toggleSettings() {
+	ssbm.isSettingsBarCollapsed.value = !ssbm.isSettingsBarCollapsed.value;
+}
+
+const componentDefinition = computed(() => {
+	const { type } = component.value;
+	const definition = wf.getComponentDefinition(type);
+	return definition;
+});
+
+const rawMiniDocs = computed(() => componentDefinition.value?.docs?.trim());
+
+watch(component, (newComponent) => {
+	if (!newComponent) ssbm.setSelection(null);
+});
+
+const toggleMiniDocs = () => {
+	miniDocsActive.value = !miniDocsActive.value;
+};
+</script>
+
+<style scoped>
+@import "../sharedStyles.css";
+
+.BuilderSettings {
+	display: grid;
+	grid-template-columns: 50px min-content;
+	grid-template-rows: min-content auto;
+	overflow: hidden;
+	background: var(--builderBackgroundColor);
+	position: absolute;
+	transition:
+		0.2s margin,
+		height linear;
+	right: 24px;
+	bottom: 20px;
+	z-index: 4;
+	width: fit-content;
+	overflow: hidden;
+	border-width: 1px solid var(--builderAreaSeparatorColor);
+	background: var(--builderBackgroundColor);
+	box-shadow: 0px 3px 40px 0px rgba(172, 185, 220, 0.4);
+	border-radius: 12px;
+	top: v-bind("ssbm.getMode() == `workflows` ? `72px` : `20px`");
+}
+
+.BuilderSettings.collapsed {
+	margin-right: -357px;
+	max-height: 340px;
+}
+
+.BuilderSettings:not(.miniDocsActive) {
+	grid-template-rows: min-content 0 auto;
+}
+
+.collapser {
+	grid-row: 1;
+	grid-column: 1;
+	padding: 8px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: var(--builderSubtleSeparatorColor);
+}
+
+.collapserButton {
+	height: 34px;
+	width: 34px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 50%;
+}
+
+.titleBar {
+	grid-row: 1;
+	grid-column: 2;
+	z-index: 2;
+	display: flex;
+	align-items: center;
+	padding-right: 12px;
+	overflow: hidden;
+	background: var(--builderSubtleSeparatorColor);
+}
+
+.titleBar > div {
+	padding: 12px 0 12px 0;
+	font-family: Poppins;
+	font-size: 16px;
+	font-weight: 500;
+	line-height: 140%;
+	flex: 1 0 auto;
+	text-wrap: wrap;
+	max-width: 280px;
+}
+
+.miniDocs {
+	grid-row: 2;
+	grid-column: 1 / 3;
+	background: var(--builderSubtleSeparatorColor);
+	padding: 0 24px 24px 24px;
+	overflow: auto;
+}
+
+.actions {
+	grid-row: 3;
+	grid-column: 1;
+	max-height: 320px;
+	overflow-y: auto;
+}
+
+.main {
+	width: 332px;
+	grid-row: 3;
+	grid-column: 2;
+	border-left: 1px solid var(--builderSeparatorColor);
+	overflow-x: hidden;
+	overflow-y: auto;
+	margin-top: 0;
+	transition: 0.2s margin linear;
+}
+
+.BuilderSettings.collapsed .main {
+	overflow: hidden;
+	max-height: 400px;
+	margin-top: -400px;
+}
+
+.docs {
+	font-size: 0.75rem;
+	padding: 24px;
+	line-height: 1.5;
+	background: var(--builderSubtleHighlightColorSolid);
+	border-top: 1px solid var(--builderSubtleSeparatorColor);
+	white-space: pre-wrap;
+}
+
+.docs div:not(:first-child) {
+	margin-top: 16px;
+	border-top: 1px solid var(--builderSubtleSeparatorColor);
+	padding-top: 16px;
+}
+
+.sections {
+	background: var(--builderBackgroundColor);
+}
+
+.sections[inert] {
+	opacity: 0.7;
+}
+
+.sections > *:not(:first-child) {
+	border-top: 1px solid var(--builderSeparatorColor);
+}
+
+.debug {
+	color: var(--builderSecondaryTextColor);
+	border-top: 1px solid var(--builderSeparatorColor);
+	padding: 24px;
+}
+
+.warning {
+	display: flex;
+	align-items: center;
+	background: var(--builderWarningColor);
+	color: var(--builderWarningTextColor);
+	border-radius: 4px;
+	gap: 12px;
+	margin: 12px 12px 0;
+	padding: 12px;
+}
+</style>
diff --git a/src/ui/src/builder/settings/BuilderSettingsActions.vue b/src/ui/src/builder/settings/BuilderSettingsActions.vue
new file mode 100644
index 000000000..fcb5e99f0
--- /dev/null
+++ b/src/ui/src/builder/settings/BuilderSettingsActions.vue
@@ -0,0 +1,319 @@
+<template>
+	<div
+		class="BuilderSettingsActions"
+		:class="{
+			collapsed: ssbm.isSettingsBarCollapsed.value,
+		}"
+		:data-writer-id="selectedId"
+	>
+		<WdsButton
+			data-writer-tooltip="Add child"
+			data-writer-tooltip-placement="left"
+			variant="neutral"
+			size="small"
+			class="actionButton"
+			:disabled="!shortcutsInfo?.isAddEnabled"
+			@click="
+				shortcutsInfo?.isAddEnabled
+					? (isAddModalOpen = true)
+					: undefined
+			"
+			><i class="material-symbols-outlined">add</i></WdsButton
+		>
+		<WdsButton
+			class="actionButton"
+			size="small"
+			variant="neutral"
+			data-writer-tooltip-placement="left"
+			:data-writer-tooltip="`Move up (${getModifierKeyName()}↑)`"
+			:disabled="!shortcutsInfo?.isMoveUpEnabled"
+			@click="
+				shortcutsInfo?.isMoveUpEnabled
+					? moveComponentUp(selectedId)
+					: undefined
+			"
+			><i class="material-symbols-outlined">arrow_upward</i></WdsButton
+		>
+		<WdsButton
+			class="actionButton"
+			variant="neutral"
+			size="small"
+			:data-writer-tooltip="`Move down (${getModifierKeyName()}↓)`"
+			data-writer-tooltip-placement="left"
+			:disabled="!shortcutsInfo?.isMoveDownEnabled"
+			@click="
+				shortcutsInfo?.isMoveDownEnabled
+					? moveComponentDown(selectedId)
+					: undefined
+			"
+		>
+			<i class="material-symbols-outlined">arrow_downward</i>
+		</WdsButton>
+		<WdsButton
+			class="actionButton"
+			variant="neutral"
+			size="small"
+			:data-writer-tooltip="`Cut (${getModifierKeyName()}X)`"
+			data-writer-tooltip-placement="left"
+			:disabled="!shortcutsInfo?.isCutEnabled"
+			@click="
+				shortcutsInfo?.isCutEnabled
+					? cutComponent(selectedId)
+					: undefined
+			"
+		>
+			<i class="material-symbols-outlined">cut</i>
+		</WdsButton>
+		<WdsButton
+			class="actionButton"
+			variant="neutral"
+			size="small"
+			:data-writer-tooltip="`Copy (${getModifierKeyName()}C)`"
+			data-writer-tooltip-placement="left"
+			:disabled="!shortcutsInfo?.isCopyEnabled"
+			@click="
+				shortcutsInfo?.isCopyEnabled
+					? copyComponent(selectedId)
+					: undefined
+			"
+		>
+			<i class="material-symbols-outlined">content_copy</i>
+		</WdsButton>
+		<WdsButton
+			class="actionButton"
+			variant="neutral"
+			size="small"
+			:data-writer-tooltip="`Paste (${getModifierKeyName()}V)`"
+			data-writer-tooltip-placement="left"
+			:disabled="!shortcutsInfo?.isPasteEnabled"
+			@click="
+				shortcutsInfo?.isPasteEnabled
+					? pasteComponent(selectedId)
+					: undefined
+			"
+		>
+			<i class="material-symbols-outlined">content_paste</i>
+		</WdsButton>
+		<WdsButton
+			class="actionButton"
+			variant="neutral"
+			size="small"
+			:data-writer-tooltip="`Go to parent (${getModifierKeyName()}Shift ↑)`"
+			data-writer-tooltip-placement="left"
+			:disabled="!shortcutsInfo?.isGoToParentEnabled"
+			@click="
+				shortcutsInfo?.isGoToParentEnabled
+					? goToParent(selectedId, selectedInstancePath)
+					: undefined
+			"
+		>
+			<i class="material-symbols-outlined">move_up</i>
+		</WdsButton>
+		<WdsButton
+			class="actionButton delete"
+			variant="neutral"
+			size="small"
+			data-automation-action="delete"
+			data-writer-tooltip="Delete (Del)"
+			data-writer-tooltip-placement="left"
+			:disabled="!shortcutsInfo?.isDeleteEnabled"
+			@click="
+				shortcutsInfo?.isDeleteEnabled
+					? removeComponentSubtree(selectedId)
+					: undefined
+			"
+		>
+			<i class="material-symbols-outlined">delete</i>
+		</WdsButton>
+
+		<BuilderModal
+			v-if="isAddModalOpen"
+			:close-action="modalCloseAction"
+			icon="add"
+			modal-title="Add child component"
+		>
+			<input
+				class="addModalInput"
+				type="text"
+				list="validChildrenTypes"
+				placeholder="Component..."
+				@change="addComponent"
+			/>
+			<datalist id="validChildrenTypes">
+				<option
+					v-for="(definition, type) in validChildrenTypes"
+					:key="type"
+					:value="definition.name"
+				>
+					{{ definition.name }}
+				</option>
+			</datalist>
+		</BuilderModal>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, onMounted, Ref, ref, watch } from "vue";
+import { useComponentActions } from "../useComponentActions";
+import { WriterComponentDefinition } from "@/writerTypes";
+import injectionKeys from "../../injectionKeys";
+import { getModifierKeyName } from "../../core/detectPlatform";
+import WdsButton from "@/wds/WdsButton.vue";
+import BuilderModal, { ModalAction } from "../BuilderModal.vue";
+
+const wf = inject(injectionKeys.core);
+const ssbm = inject(injectionKeys.builderManager);
+
+const {
+	createAndInsertComponent,
+	moveComponentUp,
+	moveComponentDown,
+	cutComponent,
+	pasteComponent,
+	copyComponent,
+	isAddAllowed,
+	isCopyAllowed,
+	isCutAllowed,
+	isGoToParentAllowed,
+	isPasteAllowed,
+	isDeleteAllowed,
+	getEnabledMoves,
+	removeComponentSubtree,
+	goToParent,
+} = useComponentActions(wf, ssbm);
+
+const selectedId = computed(() => ssbm.getSelection()?.componentId);
+const selectedInstancePath = computed(() => ssbm.getSelection()?.instancePath);
+
+const isAddModalOpen = ref(false);
+
+const shortcutsInfo: Ref<{
+	componentTypeName: string;
+	toolkit?: WriterComponentDefinition["toolkit"];
+	isAddEnabled: boolean;
+	isMoveUpEnabled: boolean;
+	isMoveDownEnabled: boolean;
+	isCopyEnabled: boolean;
+	isCutEnabled: boolean;
+	isPasteEnabled: boolean;
+	isGoToParentEnabled: boolean;
+	isDeleteEnabled: boolean;
+}> = ref(null);
+
+const validChildrenTypes = computed(() => {
+	const types = wf.getContainableTypes(selectedId.value);
+	const result: Record<string, WriterComponentDefinition> = {};
+
+	types.map((type) => {
+		const definition = wf.getComponentDefinition(type);
+		result[type] = definition;
+	});
+
+	return result;
+});
+
+function addComponent(event: Event) {
+	const definitionName = (event.target as HTMLInputElement).value;
+	const matchingTypes = Object.entries(validChildrenTypes.value).filter(
+		([_, definition]) => {
+			if (definition.name == definitionName) return true;
+			return false;
+		},
+	);
+	if (matchingTypes.length == 0) return;
+	const type = matchingTypes[0][0];
+	createAndInsertComponent(type, selectedId.value);
+	isAddModalOpen.value = false;
+}
+
+function reprocessShorcutsInfo(): void {
+	const component = wf.getComponentById(selectedId.value);
+	if (!component) return;
+	const { up: isMoveUpEnabled, down: isMoveDownEnabled } = getEnabledMoves(
+		selectedId.value,
+	);
+	shortcutsInfo.value = {
+		isAddEnabled: isAddAllowed(selectedId.value),
+		componentTypeName: wf.getComponentDefinition(component.type)?.name,
+		toolkit: wf.getComponentDefinition(component.type)?.toolkit,
+		isMoveUpEnabled,
+		isMoveDownEnabled,
+		isCopyEnabled: isCopyAllowed(selectedId.value),
+		isCutEnabled: isCutAllowed(selectedId.value),
+		isPasteEnabled: isPasteAllowed(selectedId.value),
+		isGoToParentEnabled: isGoToParentAllowed(selectedId.value),
+		isDeleteEnabled: isDeleteAllowed(selectedId.value),
+	};
+}
+
+const modalCloseAction: ModalAction = {
+	desc: "Close",
+	fn: () => {
+		isAddModalOpen.value = false;
+	},
+};
+
+watch(
+	() => wf.getComponentById(selectedId.value)?.position,
+	async (newPosition) => {
+		if (typeof newPosition == "undefined" || newPosition === null) return;
+		reprocessShorcutsInfo();
+	},
+	{ flush: "post" },
+);
+
+onMounted(() => {
+	reprocessShorcutsInfo();
+});
+</script>
+
+<style scoped>
+@import "../sharedStyles.css";
+.BuilderSettingsActions {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	background: var(--builderBackgroundColor);
+	pointer-events: auto;
+	overflow: hidden;
+	justify-content: space-between;
+	height: 100%;
+	padding: 8px;
+	width: 50px;
+	transition: 0.2s gap linear;
+}
+
+.BuilderSettingsActions.collapsed {
+	gap: 0;
+}
+
+.actionButton {
+	height: 34px;
+	width: 34px;
+	border-radius: 50%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.type {
+	display: flex;
+	align-items: center;
+	padding-left: 16px;
+	padding-right: 16px;
+	height: 36px;
+	background: var(--builderSelectedColor);
+}
+
+.actionButton:not([disabled]).delete {
+	color: var(--builderErrorColor);
+}
+
+.addModalInput {
+	outline: none;
+	border: 1px solid var(--builderSeparatorColor);
+	width: 100%;
+	border-radius: 8px;
+	padding: 8px;
+}
+</style>
diff --git a/src/ui/src/builder/BuilderSettingsBinding.vue b/src/ui/src/builder/settings/BuilderSettingsBinding.vue
similarity index 90%
rename from src/ui/src/builder/BuilderSettingsBinding.vue
rename to src/ui/src/builder/settings/BuilderSettingsBinding.vue
index f36c9cd3a..b6ffcc419 100644
--- a/src/ui/src/builder/BuilderSettingsBinding.vue
+++ b/src/ui/src/builder/settings/BuilderSettingsBinding.vue
@@ -32,8 +32,8 @@
 
 <script setup lang="ts">
 import { computed, inject } from "vue";
-import { useComponentActions } from "./useComponentActions";
-import injectionKeys from "../injectionKeys";
+import { useComponentActions } from "../useComponentActions";
+import injectionKeys from "../../injectionKeys";
 import BuilderTemplateInput from "./BuilderTemplateInput.vue";
 
 const wf = inject(injectionKeys.core);
@@ -44,7 +44,7 @@ const component = computed(() => wf.getComponentById(ssbm.getSelectedId()));
 </script>
 
 <style scoped>
-@import "./sharedStyles.css";
+@import "../sharedStyles.css";
 
 .BuilderSettingsBinding {
 	padding: 24px;
diff --git a/src/ui/src/builder/BuilderSettingsHandlers.vue b/src/ui/src/builder/settings/BuilderSettingsHandlers.vue
similarity index 97%
rename from src/ui/src/builder/BuilderSettingsHandlers.vue
rename to src/ui/src/builder/settings/BuilderSettingsHandlers.vue
index fa1a71af1..a34a3e727 100644
--- a/src/ui/src/builder/BuilderSettingsHandlers.vue
+++ b/src/ui/src/builder/settings/BuilderSettingsHandlers.vue
@@ -173,9 +173,9 @@
 import * as monaco from "monaco-editor";
 
 import { computed, ComputedRef, inject, Ref, ref } from "vue";
-import { useComponentActions } from "./useComponentActions";
-import injectionKeys from "../injectionKeys";
-import BuilderModal, { ModalAction } from "./BuilderModal.vue";
+import { useComponentActions } from "../useComponentActions";
+import injectionKeys from "@/injectionKeys";
+import BuilderModal, { ModalAction } from "../BuilderModal.vue";
 import { WriterComponentDefinition } from "@/writerTypes";
 
 const wf = inject(injectionKeys.core);
@@ -349,11 +349,8 @@ const copyToClipboard = (text: string) => {
 </script>
 
 <style scoped>
-@import "./sharedStyles.css";
+@import "../sharedStyles.css";
 
-.BuilderSettingsHandlers {
-	padding: 24px;
-}
 .list {
 	border-radius: 4px;
 	overflow: hidden;
diff --git a/src/ui/src/builder/settings/BuilderSettingsMain.vue b/src/ui/src/builder/settings/BuilderSettingsMain.vue
new file mode 100644
index 000000000..68ddd2564
--- /dev/null
+++ b/src/ui/src/builder/settings/BuilderSettingsMain.vue
@@ -0,0 +1,110 @@
+<template>
+	<div class="BuilderSettingsMain">
+		<div v-if="isReadOnly" class="warning cmc-warning">
+			<i class="material-symbols-outlined">warning</i>
+			<span>
+				This component is instantiated in code. All settings in this
+				panel are read-only and cannot be edited.
+			</span>
+		</div>
+
+		<div class="sections" :inert="isReadOnly">
+			<BuilderSettingsProperties></BuilderSettingsProperties>
+			<template
+				v-if="
+					!componentDefinition.toolkit ||
+					componentDefinition.toolkit == 'core'
+				"
+			>
+				<BuilderSettingsBinding
+					v-if="isBindable"
+				></BuilderSettingsBinding>
+				<BuilderSettingsHandlers></BuilderSettingsHandlers>
+				<BuilderSettingsVisibility></BuilderSettingsVisibility>
+			</template>
+		</div>
+
+		<div class="sections debug">
+			<div>
+				Component id:
+				<BuilderCopyText>{{ ssbm.getSelectedId() }}</BuilderCopyText>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { inject, computed, watch, defineAsyncComponent } from "vue";
+import injectionKeys from "../../injectionKeys";
+
+import BuilderSettingsProperties from "./BuilderSettingsProperties.vue";
+import BuilderSettingsBinding from "./BuilderSettingsBinding.vue";
+import BuilderSettingsVisibility from "./BuilderSettingsVisibility.vue";
+import BuilderCopyText from "../BuilderCopyText.vue";
+import BuilderAsyncLoader from "../BuilderAsyncLoader.vue";
+
+const BuilderSettingsHandlers = defineAsyncComponent({
+	loader: () => import("./BuilderSettingsHandlers.vue"),
+	loadingComponent: BuilderAsyncLoader,
+});
+
+const wf = inject(injectionKeys.core);
+const ssbm = inject(injectionKeys.builderManager);
+
+const component = computed(() => wf.getComponentById(ssbm.getSelectedId()));
+const isReadOnly = computed(() => component.value.isCodeManaged);
+
+const componentDefinition = computed(() => {
+	const { type } = component.value;
+	const definition = wf.getComponentDefinition(type);
+	return definition;
+});
+
+watch(component, (newComponent) => {
+	if (!newComponent) ssbm.setSelection(null);
+});
+
+const isBindable = computed(() =>
+	Object.values(componentDefinition.value?.events ?? {}).some(
+		(e) => e.bindable,
+	),
+);
+</script>
+
+<style scoped>
+@import "../sharedStyles.css";
+
+.sections {
+	display: flex;
+	flex-direction: column;
+}
+
+.sections > * {
+	padding: 24px;
+}
+
+.sections > *:not(:first-child),
+.sections .debug {
+	border-top: 1px solid var(--builderSeparatorColor);
+}
+
+.sections[inert] {
+	opacity: 0.7;
+}
+
+.debug {
+	color: var(--builderSecondaryTextColor);
+	border-top: 1px solid var(--builderSeparatorColor);
+}
+
+.warning {
+	display: flex;
+	align-items: center;
+	background: var(--builderWarningColor);
+	color: var(--builderWarningTextColor);
+	border-radius: 4px;
+	gap: 12px;
+	margin: 12px 12px 0;
+	padding: 12px;
+}
+</style>
diff --git a/src/ui/src/builder/settings/BuilderSettingsMiniDocs.vue b/src/ui/src/builder/settings/BuilderSettingsMiniDocs.vue
new file mode 100644
index 000000000..40106237a
--- /dev/null
+++ b/src/ui/src/builder/settings/BuilderSettingsMiniDocs.vue
@@ -0,0 +1,43 @@
+<template>
+	<div
+		v-dompurify-html="miniDocsHtml"
+		class="BuilderSettingsMiniDocs markdown"
+	>
+		{{ miniDocsHtml }}
+	</div>
+</template>
+
+<script setup lang="ts">
+import { marked } from "marked";
+
+const props = defineProps<{
+	rawMiniDocs: string;
+}>();
+
+const miniDocsHtml = marked.parse(props.rawMiniDocs);
+</script>
+
+<style scoped>
+@import "../sharedStyles.css";
+
+/*
+Markdown styling
+*/
+
+.markdown:deep() pre {
+	background-color: var(--builderSubtleSeparatorColor);
+	font-family: monospace;
+	padding: 8px;
+	border-radius: 4px;
+}
+
+.markdown:deep() code {
+	background-color: var(--builderSubtleSeparatorColor);
+	font-family: monospace;
+	padding: 2px;
+}
+
+.markdown:deep() pre > code {
+	background-color: unset;
+}
+</style>
diff --git a/src/ui/src/builder/settings/BuilderSettingsProperties.vue b/src/ui/src/builder/settings/BuilderSettingsProperties.vue
new file mode 100644
index 000000000..950184fda
--- /dev/null
+++ b/src/ui/src/builder/settings/BuilderSettingsProperties.vue
@@ -0,0 +1,195 @@
+<template>
+	<div
+		v-if="ssbm.isSelectionActive() && fields"
+		class="BuilderSettingsProperties"
+	>
+		<div
+			v-for="propertyCategory in fieldCategories.filter(
+				(fc) => fieldsByCategory[fc].length > 0,
+			)"
+			:key="propertyCategory"
+			class="propertyCategory"
+		>
+			<div class="title">
+				<h4>{{ propertyCategory }}</h4>
+			</div>
+			<div
+				v-for="[fieldKey, fieldValue] in fieldsByCategory[
+					propertyCategory
+				]"
+				:key="fieldKey"
+			>
+				<div class="fieldWrapper">
+					<div v-if="propertyCategory != 'Tools'" class="name">
+						{{ fieldValue.name ?? fieldKey
+						}}<span class="type"> : {{ fieldValue.type }}</span>
+					</div>
+
+					<BuilderFieldsColor
+						v-if="fieldValue.type == FieldType.Color"
+						class="content"
+						:field-key="fieldKey"
+						:component-id="selectedComponent.id"
+					></BuilderFieldsColor>
+
+					<BuilderFieldsShadow
+						v-if="fieldValue.type == FieldType.Shadow"
+						class="content"
+						:field-key="fieldKey"
+						:component-id="selectedComponent.id"
+					></BuilderFieldsShadow>
+
+					<BuilderFieldsKeyValue
+						v-if="fieldValue.type == FieldType.KeyValue"
+						class="content"
+						:field-key="fieldKey"
+						:component-id="selectedComponent.id"
+						:instance-path="selectedInstancePath"
+					></BuilderFieldsKeyValue>
+
+					<BuilderFieldsText
+						v-if="fieldValue.type == FieldType.Text"
+						:field-key="fieldKey"
+						:component-id="selectedComponent.id"
+					></BuilderFieldsText>
+
+					<BuilderFieldsText
+						v-if="fieldValue.type == FieldType.Number"
+						:field-key="fieldKey"
+						:component-id="selectedComponent.id"
+					></BuilderFieldsText>
+
+					<BuilderFieldsText
+						v-if="fieldValue.type == FieldType.IdKey"
+						:field-key="fieldKey"
+						:component-id="selectedComponent.id"
+					></BuilderFieldsText>
+
+					<BuilderFieldsObject
+						v-if="fieldValue.type == FieldType.Object"
+						class="content"
+						:field-key="fieldKey"
+						:component-id="selectedComponent.id"
+					></BuilderFieldsObject>
+
+					<BuilderFieldsWidth
+						v-if="fieldValue.type == FieldType.Width"
+						class="content"
+						:field-key="fieldKey"
+						:component-id="selectedComponent.id"
+					></BuilderFieldsWidth>
+
+					<BuilderFieldsAlign
+						v-if="fieldValue.type == FieldType.HAlign"
+						class="content"
+						direction="horizontal"
+						:field-key="fieldKey"
+						:component-id="selectedComponent.id"
+					></BuilderFieldsAlign>
+
+					<BuilderFieldsAlign
+						v-if="fieldValue.type == FieldType.VAlign"
+						class="content"
+						direction="vertical"
+						:field-key="fieldKey"
+						:component-id="selectedComponent.id"
+					></BuilderFieldsAlign>
+
+					<BuilderFieldsPadding
+						v-if="fieldValue.type == FieldType.Padding"
+						class="content"
+						:field-key="fieldKey"
+						:component-id="selectedComponent.id"
+					></BuilderFieldsPadding>
+
+					<BuilderFieldsTools
+						v-if="fieldValue.type == FieldType.Tools"
+						:field-key="fieldKey"
+						:component-id="selectedComponent.id"
+					>
+					</BuilderFieldsTools>
+
+					<div v-if="fieldValue.desc" class="desc">
+						{{ fieldValue.desc }}
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<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 BuilderFieldsAlign from "./BuilderFieldsAlign.vue";
+import BuilderFieldsColor from "./BuilderFieldsColor.vue";
+import BuilderFieldsKeyValue from "./BuilderFieldsKeyValue.vue";
+import BuilderFieldsObject from "./BuilderFieldsObject.vue";
+import BuilderFieldsPadding from "./BuilderFieldsPadding.vue";
+import BuilderFieldsShadow from "./BuilderFieldsShadow.vue";
+import BuilderFieldsText from "./BuilderFieldsText.vue";
+import BuilderFieldsWidth from "./BuilderFieldsWidth.vue";
+import BuilderFieldsTools from "./BuilderFieldsTools.vue";
+
+const wf = inject(injectionKeys.core);
+const ssbm = inject(injectionKeys.builderManager);
+
+const selectedInstancePath = computed<InstancePath>(() =>
+	parseInstancePathString(ssbm.getSelection()?.instancePath),
+);
+
+const selectedComponent = computed(() => {
+	return wf.getComponentById(ssbm.getSelectedId());
+});
+
+const fields = computed(() => {
+	const { type } = selectedComponent.value;
+	const definition = wf.getComponentDefinition(type);
+	return definition.fields;
+});
+
+const fieldCategories = [
+	FieldCategory.General,
+	FieldCategory.Style,
+	FieldCategory.Tools,
+];
+
+const fieldsByCategory = computed(() => {
+	const entries = Object.entries(fields.value);
+	const result = {
+		[FieldCategory.General]: entries.filter(
+			([_, fieldValue]) =>
+				!fieldValue.category ||
+				fieldValue.category == FieldCategory.General,
+		),
+		[FieldCategory.Style]: entries.filter(
+			([_, fieldValue]) => fieldValue.category == FieldCategory.Style,
+		),
+		[FieldCategory.Tools]: entries.filter(
+			([_, fieldValue]) => fieldValue.category == FieldCategory.Tools,
+		),
+	};
+	return result;
+});
+</script>
+
+<style scoped>
+@import "../sharedStyles.css";
+
+.BuilderSettingsProperties {
+	display: flex;
+	flex-direction: column;
+	gap: 24px;
+}
+
+textarea.content {
+	resize: vertical;
+	height: 8em;
+}
+
+input[type="color"].content {
+	height: 48px;
+}
+</style>
diff --git a/src/ui/src/builder/BuilderSettingsVisibility.vue b/src/ui/src/builder/settings/BuilderSettingsVisibility.vue
similarity index 93%
rename from src/ui/src/builder/BuilderSettingsVisibility.vue
rename to src/ui/src/builder/settings/BuilderSettingsVisibility.vue
index f899059e5..9e2f7358f 100644
--- a/src/ui/src/builder/BuilderSettingsVisibility.vue
+++ b/src/ui/src/builder/settings/BuilderSettingsVisibility.vue
@@ -92,8 +92,8 @@
 
 <script setup lang="ts">
 import { computed, inject } from "vue";
-import { useComponentActions } from "./useComponentActions";
-import injectionKeys from "../injectionKeys";
+import { useComponentActions } from "../useComponentActions";
+import injectionKeys from "../../injectionKeys";
 import BuilderTemplateInput from "./BuilderTemplateInput.vue";
 
 const wf = inject(injectionKeys.core);
@@ -104,11 +104,7 @@ const component = computed(() => wf.getComponentById(ssbm.getSelectedId()));
 </script>
 
 <style scoped>
-@import "./sharedStyles.css";
-
-.BuilderSettingsVisibility {
-	padding: 24px;
-}
+@import "../sharedStyles.css";
 
 .main {
 	margin-top: 16px;
diff --git a/src/ui/src/builder/BuilderTemplateInput.vue b/src/ui/src/builder/settings/BuilderTemplateInput.vue
similarity index 98%
rename from src/ui/src/builder/BuilderTemplateInput.vue
rename to src/ui/src/builder/settings/BuilderTemplateInput.vue
index 02742361f..2c13fccb8 100644
--- a/src/ui/src/builder/BuilderTemplateInput.vue
+++ b/src/ui/src/builder/settings/BuilderTemplateInput.vue
@@ -69,7 +69,7 @@
 <script setup lang="ts">
 import Fuse from "fuse.js";
 import { PropType, inject, nextTick, ref, shallowRef } from "vue";
-import injectionKeys from "../injectionKeys";
+import injectionKeys from "../../injectionKeys";
 
 const emit = defineEmits(["input", "update:value"]);
 
@@ -216,7 +216,7 @@ function abortClosingAutocompletion() {
 </script>
 
 <style scoped>
-@import "./sharedStyles.css";
+@import "../sharedStyles.css";
 
 .BuilderTemplateInput {
 	position: relative;
diff --git a/src/ui/src/builder/sharedStyles.css b/src/ui/src/builder/sharedStyles.css
index c699da0c2..d4aff5ee0 100644
--- a/src/ui/src/builder/sharedStyles.css
+++ b/src/ui/src/builder/sharedStyles.css
@@ -85,12 +85,6 @@ button {
 	align-items: center;
 }
 
-button:focus,
-button:hover {
-	background: var(--builderActionOngoingColor);
-	color: var(--builderBackgroundColor);
-}
-
 button:has(i + i) {
 	gap: 0;
 }
@@ -125,55 +119,6 @@ code {
 	padding: 2px;
 }
 
-.windowBar {
-	padding: 12px 12px 12px 24px;
-	min-height: 48px;
-	display: flex;
-	align-items: center;
-	position: sticky;
-	top: 0;
-	background: var(--builderSubtleHighlightColorSolid);
-	z-index: 2;
-	font-size: 0.875rem;
-}
-
-.windowBar .icon {
-	margin-right: 8px;
-	display: flex;
-	align-items: center;
-}
-
-.windowBar .title {
-	flex: 1 1 auto;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.windowBar .windowAction {
-	height: 24px;
-	min-width: 24px;
-	padding-left: 8px;
-	padding-right: 8px;
-	flex: 0 0 auto;
-	gap: 4px;
-	display: flex;
-	border-radius: 12px;
-	align-items: center;
-	justify-content: center;
-	background: var(--builderSubtleHighlightColor);
-	cursor: pointer;
-	font-size: 0.875rem;
-	margin-left: 8px;
-	outline: none;
-}
-
-.windowBar .windowAction:focus,
-.windowBar .windowAction:hover {
-	color: var(--builderBackgroundColor);
-	background: var(--builderActionOngoingColor);
-}
-
 .sectionTitle {
 	display: flex;
 	gap: 8px;
diff --git a/src/ui/src/wds/WdsButton.vue b/src/ui/src/wds/WdsButton.vue
index c2f3fec96..243a83c74 100644
--- a/src/ui/src/wds/WdsButton.vue
+++ b/src/ui/src/wds/WdsButton.vue
@@ -11,7 +11,7 @@ import { computed, PropType } from "vue";
 type WdsButtonVariant = "primary" | "secondary" | "tertiary" | "neutral";
 
 /** See Sizes on [Figma](https://www.figma.com/design/jgLDtwVwg3hReC1t4Vw20D/WDS-Writer-Design-System?node-id=67-701) */
-type WdsButtonSize = "big" | "small" | "unpadded";
+type WdsButtonSize = "big" | "small" | "icon" | "unpadded";
 
 const props = defineProps({
 	variant: { type: String as PropType<WdsButtonVariant>, default: "primary" },
@@ -33,10 +33,10 @@ const className = computed(() => [
 	max-width: 100%;
 	display: flex;
 	align-items: center;
+	justify-content: center;
 	gap: 8px;
 	border-radius: 300px;
 	font-weight: 600;
-	line-height: 20px;
 	font-size: 0.875rem;
 	cursor: pointer;
 	box-shadow: var(--buttonShadow);
@@ -112,7 +112,6 @@ const className = computed(() => [
 	padding: 0;
 }
 
-.WdsButton--neutral:hover,
 .WdsButton--neutral:focus {
 	color: unset;
 	border: none;
@@ -120,6 +119,13 @@ const className = computed(() => [
 	background: var(--builderSeparatorColor);
 }
 
+.WdsButton--neutral:hover {
+	background: unset;
+	color: unset;
+	border: none;
+	box-shadow: none;
+}
+
 .WdsButton--neutral:disabled {
 	color: #828282;
 	opacity: 50%;
@@ -136,6 +142,12 @@ const className = computed(() => [
 	padding: 4px 16px 4px 16px;
 }
 
+.WdsButton--icon {
+	height: 32px;
+	width: 32px;
+	padding: 4px;
+}
+
 .WdsButton--unpadded {
 	padding: 0;
 }

From b72f007aaa077e21391f2eaba445700a0fe1b844 Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Thu, 28 Nov 2024 12:57:54 +0000
Subject: [PATCH 03/19] feat: Component icons

---
 src/ui/public/components/avatar.svg           |  4 ++++
 src/ui/public/components/button.svg           |  4 ++++
 src/ui/public/components/category_Content.svg |  4 ++++
 src/ui/public/components/category_Embed.svg   |  4 ++++
 src/ui/public/components/category_Input.svg   |  5 +++++
 src/ui/public/components/category_Layout.svg  |  9 +++++++++
 src/ui/public/components/category_Other.svg   |  4 ++++
 src/ui/public/components/chatbot.svg          |  4 ++++
 src/ui/public/components/checkboxinput.svg    |  4 ++++
 src/ui/public/components/column.svg           |  4 ++++
 src/ui/public/components/columns.svg          |  4 ++++
 src/ui/public/components/dataframe.svg        |  4 ++++
 src/ui/public/components/dateinput.svg        |  4 ++++
 src/ui/public/components/dropdowninput.svg    |  5 +++++
 src/ui/public/components/fileinput.svg        |  4 ++++
 src/ui/public/components/googlemaps.svg       |  4 ++++
 src/ui/public/components/header.svg           |  4 ++++
 src/ui/public/components/heading.svg          |  9 +++++++++
 src/ui/public/components/horizontalstack.svg  |  4 ++++
 src/ui/public/components/html.svg             |  9 +++++++++
 src/ui/public/components/icon.svg             |  4 ++++
 src/ui/public/components/iframe.svg           |  4 ++++
 src/ui/public/components/image.svg            |  4 ++++
 src/ui/public/components/link.svg             | 12 ++++++++++++
 src/ui/public/components/mapbox.svg           |  4 ++++
 src/ui/public/components/message.svg          |  4 ++++
 src/ui/public/components/metric.svg           |  4 ++++
 src/ui/public/components/multiselectinput.svg |  4 ++++
 src/ui/public/components/numberinput.svg      |  4 ++++
 src/ui/public/components/pagination.svg       |  4 ++++
 src/ui/public/components/pdf.svg              |  4 ++++
 src/ui/public/components/plotlygraph.svg      |  7 +++++++
 src/ui/public/components/radioinput.svg       |  4 ++++
 src/ui/public/components/ratinginput.svg      |  4 ++++
 src/ui/public/components/repeater.svg         |  4 ++++
 src/ui/public/components/reuse.svg            |  4 ++++
 src/ui/public/components/section.svg          |  4 ++++
 src/ui/public/components/selectinput.svg      |  5 +++++
 src/ui/public/components/separator.svg        |  4 ++++
 src/ui/public/components/sidebar.svg          |  4 ++++
 src/ui/public/components/sliderinput.svg      |  4 ++++
 src/ui/public/components/step.svg             |  4 ++++
 src/ui/public/components/steps.svg            |  4 ++++
 src/ui/public/components/switchinput.svg      |  4 ++++
 src/ui/public/components/tab.svg              |  4 ++++
 src/ui/public/components/tabs.svg             |  4 ++++
 src/ui/public/components/tags.svg             |  4 ++++
 src/ui/public/components/text.svg             |  4 ++++
 src/ui/public/components/textareainput.svg    |  4 ++++
 src/ui/public/components/textinput.svg        |  4 ++++
 src/ui/public/components/timer.svg            |  4 ++++
 src/ui/public/components/vegalitechart.svg    |  7 +++++++
 src/ui/public/components/videoplayer.svg      |  4 ++++
 src/ui/public/components/webcamcapture.svg    |  4 ++++
 54 files changed, 248 insertions(+)
 create mode 100644 src/ui/public/components/avatar.svg
 create mode 100644 src/ui/public/components/button.svg
 create mode 100644 src/ui/public/components/category_Content.svg
 create mode 100644 src/ui/public/components/category_Embed.svg
 create mode 100644 src/ui/public/components/category_Input.svg
 create mode 100644 src/ui/public/components/category_Layout.svg
 create mode 100644 src/ui/public/components/category_Other.svg
 create mode 100644 src/ui/public/components/chatbot.svg
 create mode 100644 src/ui/public/components/checkboxinput.svg
 create mode 100644 src/ui/public/components/column.svg
 create mode 100644 src/ui/public/components/columns.svg
 create mode 100644 src/ui/public/components/dataframe.svg
 create mode 100644 src/ui/public/components/dateinput.svg
 create mode 100644 src/ui/public/components/dropdowninput.svg
 create mode 100644 src/ui/public/components/fileinput.svg
 create mode 100644 src/ui/public/components/googlemaps.svg
 create mode 100644 src/ui/public/components/header.svg
 create mode 100644 src/ui/public/components/heading.svg
 create mode 100644 src/ui/public/components/horizontalstack.svg
 create mode 100644 src/ui/public/components/html.svg
 create mode 100644 src/ui/public/components/icon.svg
 create mode 100644 src/ui/public/components/iframe.svg
 create mode 100644 src/ui/public/components/image.svg
 create mode 100644 src/ui/public/components/link.svg
 create mode 100644 src/ui/public/components/mapbox.svg
 create mode 100644 src/ui/public/components/message.svg
 create mode 100644 src/ui/public/components/metric.svg
 create mode 100644 src/ui/public/components/multiselectinput.svg
 create mode 100644 src/ui/public/components/numberinput.svg
 create mode 100644 src/ui/public/components/pagination.svg
 create mode 100644 src/ui/public/components/pdf.svg
 create mode 100644 src/ui/public/components/plotlygraph.svg
 create mode 100644 src/ui/public/components/radioinput.svg
 create mode 100644 src/ui/public/components/ratinginput.svg
 create mode 100644 src/ui/public/components/repeater.svg
 create mode 100644 src/ui/public/components/reuse.svg
 create mode 100644 src/ui/public/components/section.svg
 create mode 100644 src/ui/public/components/selectinput.svg
 create mode 100644 src/ui/public/components/separator.svg
 create mode 100644 src/ui/public/components/sidebar.svg
 create mode 100644 src/ui/public/components/sliderinput.svg
 create mode 100644 src/ui/public/components/step.svg
 create mode 100644 src/ui/public/components/steps.svg
 create mode 100644 src/ui/public/components/switchinput.svg
 create mode 100644 src/ui/public/components/tab.svg
 create mode 100644 src/ui/public/components/tabs.svg
 create mode 100644 src/ui/public/components/tags.svg
 create mode 100644 src/ui/public/components/text.svg
 create mode 100644 src/ui/public/components/textareainput.svg
 create mode 100644 src/ui/public/components/textinput.svg
 create mode 100644 src/ui/public/components/timer.svg
 create mode 100644 src/ui/public/components/vegalitechart.svg
 create mode 100644 src/ui/public/components/videoplayer.svg
 create mode 100644 src/ui/public/components/webcamcapture.svg

diff --git a/src/ui/public/components/avatar.svg b/src/ui/public/components/avatar.svg
new file mode 100644
index 000000000..8f4d9bcb8
--- /dev/null
+++ b/src/ui/public/components/avatar.svg
@@ -0,0 +1,4 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.516602" y="0.193359" width="18" height="18" rx="4" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.4964 7.19328C11.4964 8.28634 10.6103 9.17244 9.51725 9.17244C8.42419 9.17244 7.53809 8.28634 7.53809 7.19328C7.53809 6.10021 8.42419 5.21411 9.51725 5.21411C10.6103 5.21411 11.4964 6.10021 11.4964 7.19328ZM12.1839 7.19328C12.1839 8.66604 10.99 9.85994 9.51725 9.85994C8.04449 9.85994 6.85059 8.66604 6.85059 7.19328C6.85059 5.72052 8.04449 4.52661 9.51725 4.52661C10.99 4.52661 12.1839 5.72052 12.1839 7.19328ZM6.52734 11.9016C6.52734 11.3321 6.98905 10.8704 7.55859 10.8704H11.4753C12.0448 10.8704 12.5065 11.3321 12.5065 11.9016V13.8599H13.194V11.9016C13.194 10.9524 12.4245 10.1829 11.4753 10.1829H7.55859C6.60935 10.1829 5.83984 10.9524 5.83984 11.9016V13.8599H6.52734V11.9016Z" fill="white"/>
+</svg>
diff --git a/src/ui/public/components/button.svg b/src/ui/public/components/button.svg
new file mode 100644
index 000000000..934bd13b4
--- /dev/null
+++ b/src/ui/public/components/button.svg
@@ -0,0 +1,4 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.516602" y="0.193359" width="18" height="18" rx="4" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.1829 6.86003H7.84961C6.56094 6.86003 5.51628 7.9047 5.51628 9.19336C5.51628 10.482 6.56095 11.5267 7.84961 11.5267H9.5166V12.1934H7.84961C6.19276 12.1934 4.84961 10.8502 4.84961 9.19336C4.84961 7.53651 6.19275 6.19336 7.84961 6.19336H11.1829C12.3608 6.19336 13.3801 6.87214 13.871 7.85986H13.0979C12.6763 7.25546 11.9758 6.86003 11.1829 6.86003ZM13.5233 9.86006L11.987 9.86026L14.0844 11.9576L13.613 12.429L11.5163 10.3323V11.8465H10.8496V9.19373L13.5232 9.1934L13.5233 9.86006Z" fill="white"/>
+</svg>
diff --git a/src/ui/public/components/category_Content.svg b/src/ui/public/components/category_Content.svg
new file mode 100644
index 000000000..3ca287fb8
--- /dev/null
+++ b/src/ui/public/components/category_Content.svg
@@ -0,0 +1,4 @@
+<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="0.0678711" width="18" height="18" rx="4" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.66602 4.40112L7.66602 11.7345H6.99935L6.99935 4.40112H7.66602ZM5.66602 7.06787L5.66602 11.7345H4.99935L4.99935 7.06787H5.66602ZM4.33301 13.0678H13.6663V13.7345H4.33301V13.0678ZM12.9495 11.401L10.8848 7.82471L10.3074 8.15804L12.3722 11.7343L12.9495 11.401ZM9.66602 11.7345L9.66602 4.40112H8.99935L8.99935 11.7345H9.66602Z" fill="white"/>
+</svg>
diff --git a/src/ui/public/components/category_Embed.svg b/src/ui/public/components/category_Embed.svg
new file mode 100644
index 000000000..46cf17ad2
--- /dev/null
+++ b/src/ui/public/components/category_Embed.svg
@@ -0,0 +1,4 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="18" height="18" rx="4" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 4.66675H14V13.3334H4V4.66675ZM4.66667 5.33341V12.6667H13.3333V5.33341H4.66667ZM7.43134 7.43091L7.90275 7.90231L6.80511 8.99994L7.90275 10.0976L7.43134 10.569L5.8623 8.99994L7.43134 7.43091ZM10.0973 7.90231L10.5687 7.43091L12.1377 8.99994L10.5687 10.569L10.0973 10.0976L11.1949 8.99994L10.0973 7.90231Z" fill="white"/>
+</svg>
diff --git a/src/ui/public/components/category_Input.svg b/src/ui/public/components/category_Input.svg
new file mode 100644
index 000000000..1818e4bdf
--- /dev/null
+++ b/src/ui/public/components/category_Input.svg
@@ -0,0 +1,5 @@
+<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="0.299805" width="18" height="18" rx="4" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.99967 5.96647H12.9997V12.6331H4.99967V11.2998H4.33301V13.2998H13.6663V5.2998H4.33301V7.2998H4.99967V5.96647Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.20048 9.61387L7.55605 11.5324L8.06222 11.9662L10.3477 9.29989L8.06222 6.63354L7.55605 7.06741L9.1673 8.9472L4.33301 8.9472V9.61387L9.20048 9.61387Z" fill="white"/>
+</svg>
diff --git a/src/ui/public/components/category_Layout.svg b/src/ui/public/components/category_Layout.svg
new file mode 100644
index 000000000..988f9cce9
--- /dev/null
+++ b/src/ui/public/components/category_Layout.svg
@@ -0,0 +1,9 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="18" height="18" rx="4" fill="#333333"/>
+<mask id="mask0_23359_134447" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="3" y="3" width="12" height="12">
+<rect x="3" y="3" width="12" height="12" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_23359_134447)">
+<path d="M5.65387 13.25C5.40129 13.25 5.1875 13.1625 5.0125 12.9875C4.8375 12.8125 4.75 12.5987 4.75 12.3461V5.65387C4.75 5.40129 4.8375 5.1875 5.0125 5.0125C5.1875 4.8375 5.40129 4.75 5.65387 4.75H12.3461C12.5987 4.75 12.8125 4.8375 12.9875 5.0125C13.1625 5.1875 13.25 5.40129 13.25 5.65387V12.3461C13.25 12.5987 13.1625 12.8125 12.9875 12.9875C12.8125 13.1625 12.5987 13.25 12.3461 13.25H5.65387ZM5.65387 12.5H8.625V5.5H5.65387C5.61537 5.5 5.58013 5.51604 5.54813 5.54812C5.51604 5.58012 5.5 5.61537 5.5 5.65387V12.3461C5.5 12.3846 5.51604 12.4199 5.54813 12.4519C5.58013 12.484 5.61537 12.5 5.65387 12.5ZM9.375 12.5H12.3461C12.3846 12.5 12.4199 12.484 12.4519 12.4519C12.484 12.4199 12.5 12.3846 12.5 12.3461V9H9.375V12.5ZM9.375 8.25H12.5V5.65387C12.5 5.61537 12.484 5.58012 12.4519 5.54812C12.4199 5.51604 12.3846 5.5 12.3461 5.5H9.375V8.25Z" fill="white"/>
+</g>
+</svg>
diff --git a/src/ui/public/components/category_Other.svg b/src/ui/public/components/category_Other.svg
new file mode 100644
index 000000000..39b2bc643
--- /dev/null
+++ b/src/ui/public/components/category_Other.svg
@@ -0,0 +1,4 @@
+<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="0.349365" width="18" height="18" rx="4" fill="#333333"/>
+<path d="M6.11521 10.0993C5.90897 10.0993 5.73241 10.0259 5.58553 9.87903C5.43867 9.73215 5.36523 9.55559 5.36523 9.34935C5.36523 9.14311 5.43867 8.96655 5.58553 8.81968C5.73241 8.6728 5.90897 8.59937 6.11521 8.59937C6.32146 8.59937 6.49802 8.6728 6.64488 8.81968C6.79176 8.96655 6.8652 9.14311 6.8652 9.34935C6.8652 9.55559 6.79176 9.73215 6.64488 9.87903C6.49802 10.0259 6.32146 10.0993 6.11521 10.0993ZM8.99982 10.0993C8.79358 10.0993 8.61702 10.0259 8.47015 9.87903C8.32327 9.73215 8.24983 9.55559 8.24983 9.34935C8.24983 9.14311 8.32327 8.96655 8.47015 8.81968C8.61702 8.6728 8.79358 8.59937 8.99982 8.59937C9.20606 8.59937 9.38262 8.6728 9.5295 8.81968C9.67637 8.96655 9.74981 9.14311 9.74981 9.34935C9.74981 9.55559 9.67637 9.73215 9.5295 9.87903C9.38262 10.0259 9.20606 10.0993 8.99982 10.0993ZM11.8844 10.0993C11.6782 10.0993 11.5016 10.0259 11.3548 9.87903C11.2079 9.73215 11.1344 9.55559 11.1344 9.34935C11.1344 9.14311 11.2079 8.96655 11.3548 8.81968C11.5016 8.6728 11.6782 8.59937 11.8844 8.59937C12.0907 8.59937 12.2672 8.6728 12.4141 8.81968C12.561 8.96655 12.6344 9.14311 12.6344 9.34935C12.6344 9.55559 12.561 9.73215 12.4141 9.87903C12.2672 10.0259 12.0907 10.0993 11.8844 10.0993Z" fill="white"/>
+</svg>
diff --git a/src/ui/public/components/chatbot.svg b/src/ui/public/components/chatbot.svg
new file mode 100644
index 000000000..f0a0478a7
--- /dev/null
+++ b/src/ui/public/components/chatbot.svg
@@ -0,0 +1,4 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.516602" y="0.193359" width="18" height="18" rx="4" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.1834 8.19336C14.1834 5.80013 12.2433 3.86003 9.8501 3.86003C7.45686 3.86003 5.51676 5.80013 5.51676 8.19336C5.51676 9.61994 6.20613 10.8855 7.2699 11.6751H12.4303C13.4941 10.8855 14.1834 9.61994 14.1834 8.19336ZM4.8501 8.19336C4.8501 9.6097 5.439 10.8885 6.38529 11.7982C6.04148 11.9748 5.80086 12.3239 5.77784 12.7313C5.40405 12.9128 5.1464 13.2959 5.1464 13.7395C5.1464 14.3583 5.64801 14.8599 6.26677 14.8599H13.5075C14.1263 14.8599 14.6279 14.3583 14.6279 13.7395C14.6279 13.2959 14.3702 12.9128 13.9964 12.7313C13.9723 12.3047 13.7096 11.9419 13.3396 11.7744C14.2714 10.8662 14.8501 9.59736 14.8501 8.19336C14.8501 5.43194 12.6115 3.19336 9.8501 3.19336C7.08867 3.19336 4.8501 5.43194 4.8501 8.19336ZM6.8964 12.3418C6.64583 12.3418 6.4427 12.5449 6.4427 12.7955C6.4427 12.8295 6.44637 12.8622 6.45321 12.8934L6.52741 13.232L6.18616 13.2929C5.97407 13.3307 5.81307 13.5167 5.81307 13.7395C5.81307 13.9901 6.0162 14.1932 6.26677 14.1932H13.5075C13.7581 14.1932 13.9612 13.9901 13.9612 13.7395C13.9612 13.5167 13.8002 13.3307 13.5881 13.2929L13.2469 13.232L13.3211 12.8934C13.3279 12.8622 13.3316 12.8295 13.3316 12.7955C13.3316 12.5449 13.1285 12.3418 12.8779 12.3418H6.8964ZM8.18343 7.19336C8.55162 7.19336 8.8501 6.89488 8.8501 6.52669C8.8501 6.1585 8.55162 5.86003 8.18343 5.86003C7.81524 5.86003 7.51676 6.1585 7.51676 6.52669C7.51676 6.89488 7.81524 7.19336 8.18343 7.19336Z" fill="white"/>
+</svg>
diff --git a/src/ui/public/components/checkboxinput.svg b/src/ui/public/components/checkboxinput.svg
new file mode 100644
index 000000000..fe30b82a6
--- /dev/null
+++ b/src/ui/public/components/checkboxinput.svg
@@ -0,0 +1,4 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.516602" y="0.193359" width="18" height="18" rx="4" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.7527 6.64426L8.18362 12.2133L5.28125 9.31092L5.75265 8.83952L8.18362 11.2705L13.2812 6.17285L13.7527 6.64426Z" fill="white"/>
+</svg>
diff --git a/src/ui/public/components/column.svg b/src/ui/public/components/column.svg
new file mode 100644
index 000000000..1b85e6438
--- /dev/null
+++ b/src/ui/public/components/column.svg
@@ -0,0 +1,4 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.516602" y="0.193359" width="18" height="18" rx="4" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.1828 11.8599V13.1933H6.18278L6.18278 5.19328L12.1828 5.19328V6.52661H12.8494V5.19328C12.8494 4.82509 12.551 4.52661 12.1828 4.52661H6.18278C5.81459 4.52661 5.51611 4.82509 5.51611 5.19328L5.51611 13.1933C5.51611 13.5615 5.81459 13.8599 6.18278 13.8599H12.1828C12.551 13.8599 12.8494 13.5615 12.8494 13.1933V11.8599H12.1828ZM12.1826 8.85994V7.52661H12.8493V8.85994H14.1823V9.52661H12.8493V10.8599H12.1826V9.52661H10.8489L10.8489 8.85994H12.1826Z" fill="white"/>
+</svg>
diff --git a/src/ui/public/components/columns.svg b/src/ui/public/components/columns.svg
new file mode 100644
index 000000000..13031122d
--- /dev/null
+++ b/src/ui/public/components/columns.svg
@@ -0,0 +1,4 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.516602" y="0.193359" width="18" height="18" rx="4" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.8499 5.19328L12.8499 13.1933H6.18327L6.18327 5.19328L12.8499 5.19328ZM12.8499 4.52661C13.2181 4.52661 13.5166 4.82509 13.5166 5.19328V13.1933C13.5166 13.5615 13.2181 13.8599 12.8499 13.8599H6.18327C5.81508 13.8599 5.5166 13.5615 5.5166 13.1933V5.19328C5.5166 4.82509 5.81508 4.52661 6.18327 4.52661H12.8499ZM10.8499 7.19328L10.8499 11.1933L8.18327 11.1933L8.18327 7.19328L10.8499 7.19328ZM7.5166 6.52661L11.5166 6.52661V11.8599H7.5166L7.5166 6.52661Z" fill="white"/>
+</svg>
diff --git a/src/ui/public/components/dataframe.svg b/src/ui/public/components/dataframe.svg
new file mode 100644
index 000000000..dc3cb1f51
--- /dev/null
+++ b/src/ui/public/components/dataframe.svg
@@ -0,0 +1,4 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.516602" y="0.193359" width="18" height="18" rx="4" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.2663 6.41542H13.5996V8.08209H11.2663V6.41542ZM10.6829 6.41542H8.34961V8.08209H10.6829V6.41542ZM7.76628 6.41542H5.43294V8.08209H7.76628V6.41542ZM5.43294 8.63764V11.971H7.76628L7.76628 8.63764H5.43294ZM8.34961 12.5265H7.76628H5.43294C5.11078 12.5265 4.84961 12.2778 4.84961 11.971V6.41542C4.84961 6.10859 5.11078 5.85986 5.43294 5.85986H13.5996C13.9218 5.85986 14.1829 6.10859 14.1829 6.41542V11.971C14.1829 12.2778 13.9218 12.5265 13.5996 12.5265H11.2663H10.6829H8.34961ZM10.6829 11.971H8.34961L8.34961 8.63764H10.6829L10.6829 11.971ZM11.2663 11.971H13.5996V8.63764H11.2663L11.2663 11.971Z" fill="white"/>
+</svg>
diff --git a/src/ui/public/components/dateinput.svg b/src/ui/public/components/dateinput.svg
new file mode 100644
index 000000000..97eb06328
--- /dev/null
+++ b/src/ui/public/components/dateinput.svg
@@ -0,0 +1,4 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.516602" y="0.193359" width="18" height="18" rx="4" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.66016 4.19336H7.37444V4.90758H11.6602V4.19336H12.3744V4.90758C13.5576 4.90796 14.5166 5.8672 14.5166 7.05044V7.76491V8.4792V12.0504C14.5166 13.2339 13.5572 14.1933 12.3737 14.1933H6.65946C5.47599 14.1933 4.5166 13.2339 4.5166 12.0504V8.4792V7.76491V7.05044C4.5166 5.86697 5.47599 4.90758 6.65946 4.90758H6.66016V4.19336ZM6.66016 5.62187H6.65946C5.87048 5.62187 5.23089 6.26146 5.23089 7.05044V7.76491H13.8023V7.05044C13.8023 6.26169 13.1631 5.62224 12.3744 5.62187V7.0505H11.6602V5.62187H7.37444V7.0505H6.66016V5.62187ZM13.8023 8.4792H5.23089V12.0504C5.23089 12.8394 5.87048 13.479 6.65946 13.479H12.3737C13.1627 13.479 13.8023 12.8394 13.8023 12.0504V8.4792Z" fill="white"/>
+</svg>
diff --git a/src/ui/public/components/dropdowninput.svg b/src/ui/public/components/dropdowninput.svg
new file mode 100644
index 000000000..ea128cbbd
--- /dev/null
+++ b/src/ui/public/components/dropdowninput.svg
@@ -0,0 +1,5 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.516602" y="0.193359" width="18" height="18" rx="4" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.5163 5.19352H5.51628V13.1935H13.5163V5.19352ZM4.84961 4.52686V13.8602H14.1829V4.52686H4.84961Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.84961 7.85986L9.51628 10.5265L12.1829 7.85986H6.84961Z" fill="white"/>
+</svg>
diff --git a/src/ui/public/components/fileinput.svg b/src/ui/public/components/fileinput.svg
new file mode 100644
index 000000000..a055a0ea8
--- /dev/null
+++ b/src/ui/public/components/fileinput.svg
@@ -0,0 +1,4 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.516602" y="0.193359" width="18" height="18" rx="4" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.18359 6.01555C7.18359 5.0828 7.93974 4.32666 8.87248 4.32666C9.80523 4.32666 10.5614 5.0828 10.5614 6.01555V11.2378C10.5614 11.8146 10.0938 12.2822 9.51693 12.2822C8.9401 12.2822 8.47248 11.8146 8.47248 11.2378V7.32666H9.13915V11.2378C9.13915 11.4464 9.30829 11.6156 9.51693 11.6156C9.72557 11.6156 9.89471 11.4464 9.89471 11.2378V6.01555C9.89471 5.45099 9.43704 4.99333 8.87248 4.99333C8.30792 4.99333 7.85026 5.45099 7.85026 6.01555V11.7267C7.85026 12.6471 8.59645 13.3933 9.51693 13.3933C10.4374 13.3933 11.1836 12.6471 11.1836 11.7267V7.32666H11.8503V11.7267C11.8503 13.0153 10.8056 14.06 9.51693 14.06C8.22826 14.06 7.18359 13.0153 7.18359 11.7267V6.01555Z" fill="white"/>
+</svg>
diff --git a/src/ui/public/components/googlemaps.svg b/src/ui/public/components/googlemaps.svg
new file mode 100644
index 000000000..223939ca2
--- /dev/null
+++ b/src/ui/public/components/googlemaps.svg
@@ -0,0 +1,4 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.516602" y="0.193359" width="18" height="18" rx="4" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.51595 5.73268L5.70054 6.64038C5.58761 6.69685 5.51628 6.81227 5.51628 6.93853V12.1145C5.51628 12.3623 5.77705 12.5234 5.99868 12.4126L7.43277 11.6956C7.46004 11.6819 7.4878 11.6696 7.51595 11.6586V5.73268ZM8.18262 11.6369C8.20574 11.6442 8.22868 11.6525 8.25137 11.6615L10.8499 12.701V6.74944C10.8268 6.7421 10.8039 6.73389 10.7812 6.72481L8.18262 5.68538V11.6369ZM11.5166 6.72772V12.6537L13.332 11.746C13.4449 11.6895 13.5163 11.5741 13.5163 11.4478V6.27186C13.5163 6.02406 13.2555 5.8629 13.0339 5.97372L11.5998 6.69076C11.5725 6.7044 11.5448 6.71672 11.5166 6.72772ZM8.25137 4.99486C7.98616 4.88878 7.68825 4.90117 7.43277 5.02891L5.4024 6.0441C5.06361 6.21349 4.84961 6.55975 4.84961 6.93853V12.1145C4.84961 12.8579 5.63192 13.3414 6.29682 13.0089L7.73091 12.2919C7.81607 12.2493 7.91537 12.2452 8.00378 12.2805L10.7812 13.3915C11.0464 13.4976 11.3443 13.4852 11.5998 13.3574L13.6302 12.3422C13.9689 12.1728 14.1829 11.8266 14.1829 11.4478V6.27186C14.1829 5.52848 13.4006 5.04498 12.7357 5.37743L11.3016 6.09448C11.2165 6.13706 11.1172 6.14119 11.0288 6.10582L8.25137 4.99486Z" fill="white"/>
+</svg>
diff --git a/src/ui/public/components/header.svg b/src/ui/public/components/header.svg
new file mode 100644
index 000000000..57cf98598
--- /dev/null
+++ b/src/ui/public/components/header.svg
@@ -0,0 +1,4 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.516602" y="0.193359" width="18" height="18" rx="4" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.51628 5.86003H13.5163V5.86011H5.5166V7.19344H13.5163V12.5267H5.51628V5.86003ZM4.84961 5.86003C4.84961 5.49184 5.14809 5.19336 5.51628 5.19336H13.5163C13.8845 5.19336 14.1829 5.49184 14.1829 5.86003V12.5267C14.1829 12.8949 13.8845 13.1934 13.5163 13.1934H5.51628C5.14809 13.1934 4.84961 12.8949 4.84961 12.5267V5.86003Z" fill="white"/>
+</svg>
diff --git a/src/ui/public/components/heading.svg b/src/ui/public/components/heading.svg
new file mode 100644
index 000000000..c028a40dd
--- /dev/null
+++ b/src/ui/public/components/heading.svg
@@ -0,0 +1,9 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.516602" y="0.193359" width="18" height="18" rx="4" fill="#333333"/>
+<mask id="mask0_23359_134463" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="3" y="3" width="13" height="13">
+<rect x="3.5166" y="3.19336" width="12" height="12" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_23359_134463)">
+<path d="M6.2666 11.5684V6.81836H7.0166V8.81836H9.2666V6.81836H10.0166V11.5684H9.2666V9.56836H7.0166V11.5684H6.2666ZM12.0166 11.5684V7.56836H11.0166V6.81836H12.7666V11.5684H12.0166Z" fill="white"/>
+</g>
+</svg>
diff --git a/src/ui/public/components/horizontalstack.svg b/src/ui/public/components/horizontalstack.svg
new file mode 100644
index 000000000..2e5615850
--- /dev/null
+++ b/src/ui/public/components/horizontalstack.svg
@@ -0,0 +1,4 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.516602" y="0.193359" width="18" height="18" rx="4" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.51628 5.86003H8.18294V12.5267H5.51628L5.51628 5.86003ZM4.84961 5.86003C4.84961 5.49184 5.14809 5.19336 5.51628 5.19336H8.18294C8.55113 5.19336 8.84961 5.49184 8.84961 5.86003V12.5267C8.84961 12.8949 8.55113 13.1934 8.18294 13.1934H5.51628C5.14809 13.1934 4.84961 12.8949 4.84961 12.5267V5.86003ZM10.8493 5.86003H13.516V12.5267H10.8493L10.8493 5.86003ZM10.1826 5.86003C10.1826 5.49184 10.4811 5.19336 10.8493 5.19336H13.516C13.8841 5.19336 14.1826 5.49184 14.1826 5.86003V12.5267C14.1826 12.8949 13.8841 13.1934 13.516 13.1934H10.8493C10.4811 13.1934 10.1826 12.8949 10.1826 12.5267V5.86003Z" fill="white"/>
+</svg>
diff --git a/src/ui/public/components/html.svg b/src/ui/public/components/html.svg
new file mode 100644
index 000000000..7e7bf34c3
--- /dev/null
+++ b/src/ui/public/components/html.svg
@@ -0,0 +1,9 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.516602" y="0.193359" width="18" height="18" rx="4" fill="#333333"/>
+<mask id="mask0_23359_134495" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="3" y="3" width="13" height="13">
+<rect x="3.5166" y="3.19336" width="12" height="12" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_23359_134495)">
+<path d="M3.55469 10.6168V7.77051H4.15081V8.77051H5.30469V7.77051H5.90081V10.6168H5.30469V9.36676H4.15081V10.6168H3.55469ZM7.42969 10.6168V8.36676H6.50656V7.77051H8.94881V8.36676H8.02581V10.6168H7.42969ZM9.55469 10.6168V8.21288C9.55469 8.08755 9.59706 7.98251 9.68181 7.89776C9.76656 7.81292 9.8716 7.77051 9.99694 7.77051H12.2084C12.3338 7.77051 12.4389 7.81292 12.5237 7.89776C12.6084 7.98251 12.6508 8.08755 12.6508 8.21288V10.6168H12.0547V8.36676H11.4008V10.1168H10.8047V8.36676H10.1508V10.6168H9.55469ZM13.5739 10.6168V7.77051H14.1701V10.0205H15.4777V10.6168H13.5739Z" fill="white"/>
+</g>
+</svg>
diff --git a/src/ui/public/components/icon.svg b/src/ui/public/components/icon.svg
new file mode 100644
index 000000000..70078efc6
--- /dev/null
+++ b/src/ui/public/components/icon.svg
@@ -0,0 +1,4 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.516602" y="0.193359" width="18" height="18" rx="4" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.8494 12.0273C9.67443 12.6198 8.20427 12.4254 7.22302 11.4442C6.60636 10.8275 6.1698 9.87798 5.89271 8.65907C5.68876 7.76191 5.57882 6.75297 5.53551 5.68828L7.81811 7.97088C7.69918 8.17038 7.63086 8.40354 7.63086 8.65267C7.63086 9.38905 8.22781 9.986 8.96419 9.986C9.70057 9.986 10.2975 9.38905 10.2975 8.65267C10.2975 7.91629 9.70057 7.31934 8.96419 7.31934C8.71878 7.31934 8.48885 7.38564 8.29135 7.50131L6.05493 5.26489C6.86239 5.32479 7.75181 5.44465 8.60185 5.6396C9.93421 5.94515 11.0506 6.40896 11.6544 7.01277C12.5826 7.94097 12.8067 9.30663 12.3268 10.4461L12.8287 10.948C12.84 10.9257 12.851 10.9033 12.8619 10.8809C12.8511 10.9032 12.8401 10.9254 12.8289 10.9475L13.2448 11.3635L11.7155 12.8928L11.3416 12.5189C11.3415 12.5189 11.3413 12.519 11.3412 12.5191L10.8494 12.0273ZM10.6956 12.8156C9.36103 13.2821 7.81818 12.9821 6.75161 11.9156C5.37751 10.5415 4.91485 7.98161 4.85387 5.21793C4.84899 4.99685 4.84668 4.77446 4.84668 4.55127H4.84701C5.05713 4.55127 5.28028 4.55594 5.51335 4.56568C7.70909 4.65744 10.7843 5.19981 12.1258 6.54137C13.1354 7.55099 13.4582 8.9874 13.094 10.2699C13.094 10.2699 13.094 10.2699 13.094 10.2699L14.1876 11.3635L11.7155 13.8356L10.6956 12.8156ZM9.63086 8.65267C9.63086 9.02086 9.33238 9.31934 8.96419 9.31934C8.596 9.31934 8.29753 9.02086 8.29753 8.65267C8.29753 8.28448 8.596 7.986 8.96419 7.986C9.33238 7.986 9.63086 8.28448 9.63086 8.65267Z" fill="white"/>
+</svg>
diff --git a/src/ui/public/components/iframe.svg b/src/ui/public/components/iframe.svg
new file mode 100644
index 000000000..8c4355696
--- /dev/null
+++ b/src/ui/public/components/iframe.svg
@@ -0,0 +1,4 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.516602" y="0.193359" width="18" height="18" rx="4" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.5166 4.86011H14.5166V13.5268H4.5166V4.86011ZM5.18327 5.52677V12.8601H13.8499V5.52677H5.18327ZM7.94794 7.62427L8.41935 8.09567L7.32172 9.1933L8.41935 10.2909L7.94794 10.7623L6.37891 9.1933L7.94794 7.62427ZM10.6139 8.09567L11.0853 7.62427L12.6543 9.1933L11.0853 10.7623L10.6139 10.2909L11.7115 9.1933L10.6139 8.09567Z" fill="white"/>
+</svg>
diff --git a/src/ui/public/components/image.svg b/src/ui/public/components/image.svg
new file mode 100644
index 000000000..fe33646e2
--- /dev/null
+++ b/src/ui/public/components/image.svg
@@ -0,0 +1,4 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.516602" y="0.193359" width="18" height="18" rx="4" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.69938 5.86003H13.3345C13.8034 5.86003 14.1836 6.24019 14.1836 6.70915V8.47631L13.1325 7.58983C12.5634 7.1099 11.7211 7.14761 11.1972 7.67647L9.81511 9.07169C9.59668 9.29219 9.26627 9.35804 8.98 9.23811L8.59087 9.0751C8.07389 8.85854 7.47803 8.96442 7.06732 9.34583L4.85026 11.4047V6.70915C4.85026 6.24019 5.23042 5.86003 5.69938 5.86003ZM4.99917 12.158C5.15225 12.3807 5.40876 12.5267 5.69938 12.5267H13.3345C13.8034 12.5267 14.1836 12.1465 14.1836 11.6776V9.34842L12.7027 8.09945C12.3993 7.84357 11.9502 7.86367 11.6709 8.14565L10.2887 9.54087C9.87905 9.95444 9.25934 10.0779 8.72241 9.85301L8.33328 9.69C8.05765 9.57453 7.73995 9.63098 7.52097 9.83434L5.07676 12.1041C5.05297 12.1262 5.02681 12.1442 4.99917 12.158ZM4.18359 6.70915C4.18359 5.872 4.86224 5.19336 5.69938 5.19336H13.3345C14.1716 5.19336 14.8503 5.872 14.8503 6.70915V11.6776C14.8503 12.5147 14.1716 13.1934 13.3345 13.1934H5.69938C4.86224 13.1934 4.18359 12.5147 4.18359 11.6776V6.70915ZM6.5166 7.86019C6.7007 7.86019 6.84994 7.71095 6.84994 7.52686C6.84994 7.34276 6.7007 7.19352 6.5166 7.19352C6.33251 7.19352 6.18327 7.34276 6.18327 7.52686C6.18327 7.71095 6.33251 7.86019 6.5166 7.86019ZM6.5166 8.52686C7.06889 8.52686 7.5166 8.07914 7.5166 7.52686C7.5166 6.97457 7.06889 6.52686 6.5166 6.52686C5.96432 6.52686 5.5166 6.97457 5.5166 7.52686C5.5166 8.07914 5.96432 8.52686 6.5166 8.52686Z" fill="white"/>
+</svg>
diff --git a/src/ui/public/components/link.svg b/src/ui/public/components/link.svg
new file mode 100644
index 000000000..c696ac4ac
--- /dev/null
+++ b/src/ui/public/components/link.svg
@@ -0,0 +1,12 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.516602" y="0.193359" width="18" height="18" rx="4" fill="#333333"/>
+<g clip-path="url(#clip0_23359_134466)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5461 4.82601C11.4677 3.90437 12.962 3.90437 13.8836 4.82601C14.8053 5.74766 14.8053 7.24194 13.8836 8.16359L11.7971 10.2501C10.8706 11.1766 9.36847 11.1766 8.44197 10.2501L8.91337 9.7787C9.57952 10.4448 10.6596 10.4448 11.3257 9.7787L13.4122 7.69218C14.0735 7.03089 14.0735 5.95871 13.4122 5.29742C12.7509 4.63612 11.6788 4.63612 11.0175 5.29742L9.62143 6.69345L9.15003 6.22204L10.5461 4.82601Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.48715 13.5607C7.5655 14.4824 6.07122 14.4824 5.14957 13.5607C4.22793 12.6391 4.22793 11.1448 5.14957 10.2231L7.23609 8.13662C8.16259 7.21012 9.66474 7.21012 10.5912 8.13662L10.1198 8.60802C9.45368 7.94187 8.37364 7.94187 7.70749 8.60802L5.62098 10.6945C4.95968 11.3558 4.95968 12.428 5.62098 13.0893C6.28227 13.7506 7.35445 13.7506 8.01574 13.0893L9.41177 11.6933L9.88318 12.1647L8.48715 13.5607Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_23359_134466">
+<rect width="12" height="12" fill="white" transform="translate(3.5166 3.19336)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/ui/public/components/mapbox.svg b/src/ui/public/components/mapbox.svg
new file mode 100644
index 000000000..223939ca2
--- /dev/null
+++ b/src/ui/public/components/mapbox.svg
@@ -0,0 +1,4 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.516602" y="0.193359" width="18" height="18" rx="4" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.51595 5.73268L5.70054 6.64038C5.58761 6.69685 5.51628 6.81227 5.51628 6.93853V12.1145C5.51628 12.3623 5.77705 12.5234 5.99868 12.4126L7.43277 11.6956C7.46004 11.6819 7.4878 11.6696 7.51595 11.6586V5.73268ZM8.18262 11.6369C8.20574 11.6442 8.22868 11.6525 8.25137 11.6615L10.8499 12.701V6.74944C10.8268 6.7421 10.8039 6.73389 10.7812 6.72481L8.18262 5.68538V11.6369ZM11.5166 6.72772V12.6537L13.332 11.746C13.4449 11.6895 13.5163 11.5741 13.5163 11.4478V6.27186C13.5163 6.02406 13.2555 5.8629 13.0339 5.97372L11.5998 6.69076C11.5725 6.7044 11.5448 6.71672 11.5166 6.72772ZM8.25137 4.99486C7.98616 4.88878 7.68825 4.90117 7.43277 5.02891L5.4024 6.0441C5.06361 6.21349 4.84961 6.55975 4.84961 6.93853V12.1145C4.84961 12.8579 5.63192 13.3414 6.29682 13.0089L7.73091 12.2919C7.81607 12.2493 7.91537 12.2452 8.00378 12.2805L10.7812 13.3915C11.0464 13.4976 11.3443 13.4852 11.5998 13.3574L13.6302 12.3422C13.9689 12.1728 14.1829 11.8266 14.1829 11.4478V6.27186C14.1829 5.52848 13.4006 5.04498 12.7357 5.37743L11.3016 6.09448C11.2165 6.13706 11.1172 6.14119 11.0288 6.10582L8.25137 4.99486Z" fill="white"/>
+</svg>
diff --git a/src/ui/public/components/message.svg b/src/ui/public/components/message.svg
new file mode 100644
index 000000000..686f0f4ce
--- /dev/null
+++ b/src/ui/public/components/message.svg
@@ -0,0 +1,4 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.516602" y="0.193359" width="18" height="18" rx="4" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.85026 13.8602L6.51693 11.7063H12.8503C13.5866 11.7063 14.1836 11.1094 14.1836 10.373V5.86019C14.1836 5.12381 13.5866 4.52686 12.8503 4.52686H6.18359C5.44722 4.52686 4.85026 5.12381 4.85026 5.86019V13.8602ZM5.51693 5.86019V11.9093L6.18985 11.0397H12.8503C13.2185 11.0397 13.5169 10.7412 13.5169 10.373V5.86019C13.5169 5.492 13.2184 5.19352 12.8503 5.19352H6.18359C5.8154 5.19352 5.51693 5.492 5.51693 5.86019ZM9.83347 8.84567L9.94613 5.87012H9.0708L9.18347 8.84567H9.83347ZM9.99813 10.0417V9.42345H9.03613V10.0417H9.99813Z" fill="white"/>
+</svg>
diff --git a/src/ui/public/components/metric.svg b/src/ui/public/components/metric.svg
new file mode 100644
index 000000000..184a85832
--- /dev/null
+++ b/src/ui/public/components/metric.svg
@@ -0,0 +1,4 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.516602" y="0.193359" width="18" height="18" rx="4" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.375 4.69409L10.0015 4.92211L9.05344 7.52677H11.011L12.042 4.69409L12.6685 4.92211L11.7204 7.52677H13.5166V8.19344H11.4778L10.7498 10.1934H13.5166V10.8601H10.5072L9.47627 13.6926L8.8498 13.4646L9.79775 10.8601H7.84021L6.80927 13.6926L6.18281 13.4646L7.13075 10.8601H5.5166V10.1934H7.3734L8.10134 8.19344H5.5166V7.52677H8.34399L9.375 4.69409ZM10.0404 10.1934L10.7683 8.19344H8.81079L8.08285 10.1934H10.0404Z" fill="white"/>
+</svg>
diff --git a/src/ui/public/components/multiselectinput.svg b/src/ui/public/components/multiselectinput.svg
new file mode 100644
index 000000000..59be8cb41
--- /dev/null
+++ b/src/ui/public/components/multiselectinput.svg
@@ -0,0 +1,4 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.516602" y="0.193359" width="18" height="18" rx="4" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.75282 5.42892L9.28141 4.95752L6.3868 7.85213L5.05734 6.52268L4.58594 6.99408L6.3868 8.79494L9.75282 5.42892ZM9.75282 10.1916L9.28141 9.72021L6.3868 12.6148L5.05734 11.2854L4.58594 11.7568L6.3868 13.5576L9.75282 10.1916ZM14.1836 7.93636L10.1836 7.93636V7.26969L14.1836 7.26969V7.93636ZM10.1836 12.6991H14.1836V12.0324L10.1836 12.0324V12.6991Z" fill="white"/>
+</svg>
diff --git a/src/ui/public/components/numberinput.svg b/src/ui/public/components/numberinput.svg
new file mode 100644
index 000000000..220b2c069
--- /dev/null
+++ b/src/ui/public/components/numberinput.svg
@@ -0,0 +1,4 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.516602" y="0.193359" width="18" height="18" rx="4" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.5163 5.19352H5.51628V13.1935H13.5163V5.19352ZM4.84961 4.52686V13.8602H14.1829V4.52686H4.84961ZM10.4381 8.53402H9.13006L8.64238 9.87223H9.95041L10.4381 8.53402ZM10.681 7.86735H9.373L9.82129 6.63721L9.19492 6.40895L8.66345 7.86735H6.84766V8.53402H8.4205L7.93283 9.87223H6.84766V10.5389H7.68988L7.24222 11.7673L7.86859 11.9956L8.39944 10.5389H9.70746L9.25979 11.7673L9.88616 11.9956L10.417 10.5389H12.1816V9.87223H10.66L11.1476 8.53402H12.1816V7.86735H11.3906L11.8389 6.63721L11.2125 6.40895L10.681 7.86735Z" fill="white"/>
+</svg>
diff --git a/src/ui/public/components/pagination.svg b/src/ui/public/components/pagination.svg
new file mode 100644
index 000000000..dc006dfa2
--- /dev/null
+++ b/src/ui/public/components/pagination.svg
@@ -0,0 +1,4 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.516602" y="0.193359" width="18" height="18" rx="4" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.85042 4.52686H9.18376V13.8602H9.85042V4.52686ZM11.5177 6.52686L14.1844 9.19352L11.5177 11.8602V6.52686ZM7.51774 11.8604L4.85107 9.19368L7.51774 6.52702V11.8604Z" fill="white"/>
+</svg>
diff --git a/src/ui/public/components/pdf.svg b/src/ui/public/components/pdf.svg
new file mode 100644
index 000000000..7ddf545c4
--- /dev/null
+++ b/src/ui/public/components/pdf.svg
@@ -0,0 +1,4 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.516602" y="0.193359" width="18" height="18" rx="4" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.6833 3.86011L14.0166 7.19344V13.8601C14.0166 14.2283 13.7181 14.5268 13.3499 14.5268H5.68327C5.31508 14.5268 5.0166 14.2283 5.0166 13.8601V4.52677C5.0166 4.15858 5.31508 3.86011 5.68327 3.86011H10.6833ZM10.6833 4.80292V7.19344H13.0738L10.6833 4.80292ZM13.3499 7.86011H10.3499H10.0166V7.52677V4.52677H5.68327V13.8601H13.3499V7.86011Z" fill="white"/>
+</svg>
diff --git a/src/ui/public/components/plotlygraph.svg b/src/ui/public/components/plotlygraph.svg
new file mode 100644
index 000000000..88f541f6d
--- /dev/null
+++ b/src/ui/public/components/plotlygraph.svg
@@ -0,0 +1,7 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.516602" y="0.193359" width="18" height="18" rx="4" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.5163 5.19352H5.51628V13.1935H13.5163V5.19352ZM4.84961 4.52686V13.8602H14.1829V4.52686H4.84961Z" fill="white"/>
+<path d="M10.8496 11.1935V9.19352H11.5163V11.1935H10.8496Z" fill="white"/>
+<path d="M7.51628 11.1935V8.52686H8.18294V11.1935H7.51628Z" fill="white"/>
+<path d="M9.18294 11.1935V7.19352H9.84961L9.84961 11.1935H9.18294Z" fill="white"/>
+</svg>
diff --git a/src/ui/public/components/radioinput.svg b/src/ui/public/components/radioinput.svg
new file mode 100644
index 000000000..2aa8cd05c
--- /dev/null
+++ b/src/ui/public/components/radioinput.svg
@@ -0,0 +1,4 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.516602" y="0.193359" width="18" height="18" rx="4" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.5163 9.19352C13.5163 11.4027 11.7254 13.1935 9.51628 13.1935C7.30714 13.1935 5.51628 11.4027 5.51628 9.19352C5.51628 6.98438 7.30714 5.19352 9.51628 5.19352C11.7254 5.19352 13.5163 6.98438 13.5163 9.19352ZM14.1829 9.19352C14.1829 11.7709 12.0936 13.8602 9.51628 13.8602C6.93895 13.8602 4.84961 11.7709 4.84961 9.19352C4.84961 6.61619 6.93895 4.52686 9.51628 4.52686C12.0936 4.52686 14.1829 6.61619 14.1829 9.19352ZM9.51595 10.527C10.2523 10.527 10.8493 9.93006 10.8493 9.19369C10.8493 8.45731 10.2523 7.86035 9.51595 7.86035C8.77957 7.86035 8.18262 8.45731 8.18262 9.19369C8.18262 9.93006 8.77957 10.527 9.51595 10.527Z" fill="white"/>
+</svg>
diff --git a/src/ui/public/components/ratinginput.svg b/src/ui/public/components/ratinginput.svg
new file mode 100644
index 000000000..33d177832
--- /dev/null
+++ b/src/ui/public/components/ratinginput.svg
@@ -0,0 +1,4 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.516602" y="0.193359" width="18" height="18" rx="4" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.51646 4.06958L10.9018 7.28649L14.3894 7.60995L11.758 9.92158L12.5281 13.3384L9.51646 11.5501L6.50484 13.3384L7.27492 9.92158L4.64355 7.60995L8.13111 7.28649L9.51646 4.06958ZM8.43493 7.70466L5.71223 7.95719L7.76652 9.76185L7.16532 12.4293L9.51646 11.0333L11.8676 12.4293L11.2664 9.76185L13.3207 7.95719L10.598 7.70466L9.51646 5.19326L8.43493 7.70466Z" fill="white"/>
+</svg>
diff --git a/src/ui/public/components/repeater.svg b/src/ui/public/components/repeater.svg
new file mode 100644
index 000000000..5c468ccac
--- /dev/null
+++ b/src/ui/public/components/repeater.svg
@@ -0,0 +1,4 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.516602" y="0.193359" width="18" height="18" rx="4" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.25541 4.52686H4.84961V4.96164V11.0486V11.4834H5.25541H6.87859V10.6138H5.6612V5.39642H10.5308V6.70077H11.3424V4.96164V4.52686H10.9366H5.25541ZM7.69019 7.57033H8.50178H13.3713H14.1829V8.4399V13.6573V14.5269H13.3713H8.50178H7.69019V13.6573V8.4399V7.57033ZM8.50178 8.4399H13.3713V13.6573H8.50178V8.4399Z" fill="white"/>
+</svg>
diff --git a/src/ui/public/components/reuse.svg b/src/ui/public/components/reuse.svg
new file mode 100644
index 000000000..f61bfbb68
--- /dev/null
+++ b/src/ui/public/components/reuse.svg
@@ -0,0 +1,4 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.516602" y="0.193359" width="18" height="18" rx="4" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.2406 9.19352L9.51676 5.46966L5.79291 9.19352L9.51676 12.9174L13.2406 9.19352ZM9.51676 4.52686L4.8501 9.19352L9.51676 13.8602L14.1834 9.19352L9.51676 4.52686ZM9.18311 7.52686H9.84977V8.86019H11.1828V9.52686H9.84977V10.8602H9.1831V9.52685H7.84945V8.86019H9.18311V7.52686Z" fill="white"/>
+</svg>
diff --git a/src/ui/public/components/section.svg b/src/ui/public/components/section.svg
new file mode 100644
index 000000000..3c7fdd54b
--- /dev/null
+++ b/src/ui/public/components/section.svg
@@ -0,0 +1,4 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.516602" y="0.193359" width="18" height="18" rx="4" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.5163 5.86003H5.51628V12.5267H13.5163V5.86003ZM5.51628 5.19336C5.14809 5.19336 4.84961 5.49184 4.84961 5.86003V12.5267C4.84961 12.8949 5.14809 13.1934 5.51628 13.1934H13.5163C13.8845 13.1934 14.1829 12.8949 14.1829 12.5267V5.86003C14.1829 5.49184 13.8845 5.19336 13.5163 5.19336H5.51628ZM6.84961 7.19336H9.51628V7.86003H6.84961V7.19336ZM7.51628 10.5267V9.86003H11.5163V10.5267H7.51628ZM6.84961 11.1934V9.19336H12.1829V11.1934H6.84961Z" fill="white"/>
+</svg>
diff --git a/src/ui/public/components/selectinput.svg b/src/ui/public/components/selectinput.svg
new file mode 100644
index 000000000..dd313b9a1
--- /dev/null
+++ b/src/ui/public/components/selectinput.svg
@@ -0,0 +1,5 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.516602" y="0.193359" width="18" height="18" rx="4" fill="#333333"/>
+<path d="M4.82129 9.19333L6.38645 10.7585L9.51676 7.62817" stroke="white"/>
+<line x1="10.1836" y1="9.87134" x2="14.1836" y2="9.87134" stroke="white"/>
+</svg>
diff --git a/src/ui/public/components/separator.svg b/src/ui/public/components/separator.svg
new file mode 100644
index 000000000..3ea414823
--- /dev/null
+++ b/src/ui/public/components/separator.svg
@@ -0,0 +1,4 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.516602" y="0.193359" width="18" height="18" rx="4" fill="#333333"/>
+<path d="M4.6416 9.75582V8.63086H14.3916V9.75582H4.6416Z" fill="white"/>
+</svg>
diff --git a/src/ui/public/components/sidebar.svg b/src/ui/public/components/sidebar.svg
new file mode 100644
index 000000000..d3caed536
--- /dev/null
+++ b/src/ui/public/components/sidebar.svg
@@ -0,0 +1,4 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.516602" y="0.193359" width="18" height="18" rx="4" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.84961 5.86003L13.5163 5.86003V12.5267L6.84961 12.5267L6.84961 5.86003ZM4.84961 5.86003C4.84961 5.49184 5.14809 5.19336 5.51628 5.19336H13.5163C13.8845 5.19336 14.1829 5.49184 14.1829 5.86003V12.5267C14.1829 12.8949 13.8845 13.1934 13.5163 13.1934H5.51628C5.14809 13.1934 4.84961 12.8949 4.84961 12.5267V5.86003Z" fill="white"/>
+</svg>
diff --git a/src/ui/public/components/sliderinput.svg b/src/ui/public/components/sliderinput.svg
new file mode 100644
index 000000000..c011e2500
--- /dev/null
+++ b/src/ui/public/components/sliderinput.svg
@@ -0,0 +1,4 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="18.5166" y="0.193359" width="18" height="18" rx="4" transform="rotate(90 18.5166 0.193359)" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.5166 7.19336L13.5166 6.52669L10.1499 6.52669C9.99551 5.76595 9.32292 5.19336 8.5166 5.19336C7.71028 5.19336 7.0377 5.76595 6.88327 6.52669L5.5166 6.52669L5.5166 7.19336L6.88327 7.19336C7.0377 7.95411 7.71028 8.52669 8.5166 8.52669C9.32292 8.52669 9.99551 7.95411 10.1499 7.19336L13.5166 7.19336ZM8.5166 7.86003C7.96432 7.86003 7.5166 7.41231 7.5166 6.86003C7.5166 6.30774 7.96432 5.86003 8.5166 5.86003C9.06889 5.86003 9.5166 6.30774 9.5166 6.86003C9.5166 7.41231 9.06889 7.86003 8.5166 7.86003ZM8.88327 11.1934L5.5166 11.1934L5.5166 11.86L8.88327 11.86C9.0377 12.6208 9.71028 13.1934 10.5166 13.1934C11.3229 13.1934 11.9955 12.6208 12.1499 11.86L13.5166 11.86L13.5166 11.1934L12.1499 11.1934C11.9955 10.4326 11.3229 9.86003 10.5166 9.86003C9.71028 9.86003 9.0377 10.4326 8.88327 11.1934ZM9.5166 11.5267C9.5166 12.079 9.96432 12.5267 10.5166 12.5267C11.0689 12.5267 11.5166 12.079 11.5166 11.5267C11.5166 10.9744 11.0689 10.5267 10.5166 10.5267C9.96432 10.5267 9.5166 10.9744 9.5166 11.5267Z" fill="white"/>
+</svg>
diff --git a/src/ui/public/components/step.svg b/src/ui/public/components/step.svg
new file mode 100644
index 000000000..50d741649
--- /dev/null
+++ b/src/ui/public/components/step.svg
@@ -0,0 +1,4 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.516602" y="0.193359" width="18" height="18" rx="4" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.18262 4.52661H9.84928V7.19328H12.1829C13.2875 7.19328 14.1829 8.08871 14.1829 9.19328C14.1829 10.2978 13.2875 11.1933 12.1829 11.1933H9.84928V13.8599H9.18262V11.1933H6.84961C5.74504 11.1933 4.84961 10.2978 4.84961 9.19328C4.84961 8.08871 5.74504 7.19328 6.84961 7.19328H9.18262V4.52661ZM6.84961 7.85994H12.1829C12.9193 7.85994 13.5163 8.4569 13.5163 9.19328C13.5163 9.92966 12.9193 10.5266 12.1829 10.5266H6.84961C6.11323 10.5266 5.51628 9.92966 5.51628 9.19328C5.51628 8.4569 6.11323 7.85994 6.84961 7.85994Z" fill="white"/>
+</svg>
diff --git a/src/ui/public/components/steps.svg b/src/ui/public/components/steps.svg
new file mode 100644
index 000000000..6b5576b3a
--- /dev/null
+++ b/src/ui/public/components/steps.svg
@@ -0,0 +1,4 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.516602" y="0.193359" width="18" height="18" rx="4" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.1166 4.77089H5.9166C5.4625 4.77089 5.09438 5.13902 5.09438 5.59312C5.09438 6.04722 5.4625 6.41534 5.9166 6.41534H13.1166C13.5707 6.41534 13.9388 6.04722 13.9388 5.59312C13.9388 5.13902 13.5707 4.77089 13.1166 4.77089ZM5.9166 4.19312C5.1434 4.19312 4.5166 4.81992 4.5166 5.59312C4.5166 6.36632 5.1434 6.99312 5.9166 6.99312H6.82767V7.79286H5.9166C5.1434 7.79286 4.5166 8.41966 4.5166 9.19286C4.5166 9.96606 5.1434 10.5929 5.9166 10.5929H6.91645V11.3935H5.9166C5.1434 11.3935 4.5166 12.0203 4.5166 12.7935C4.5166 13.5667 5.1434 14.1935 5.9166 14.1935H13.1166C13.8898 14.1935 14.5166 13.5667 14.5166 12.7935C14.5166 12.0203 13.8898 11.3935 13.1166 11.3935H7.49423V10.5929H11.1166C11.8898 10.5929 12.5166 9.96606 12.5166 9.19286C12.5166 8.41966 11.8898 7.79286 11.1166 7.79286H7.40545V6.99312H13.1166C13.8898 6.99312 14.5166 6.36632 14.5166 5.59312C14.5166 4.81992 13.8898 4.19312 13.1166 4.19312H5.9166ZM11.1166 8.37064H5.9166C5.4625 8.37064 5.09438 8.73876 5.09438 9.19286C5.09438 9.64696 5.4625 10.0151 5.9166 10.0151H11.1166C11.5707 10.0151 11.9388 9.64696 11.9388 9.19286C11.9388 8.73876 11.5707 8.37064 11.1166 8.37064ZM5.9166 11.9713H13.1166C13.5707 11.9713 13.9388 12.3394 13.9388 12.7935C13.9388 13.2476 13.5707 13.6157 13.1166 13.6157H5.9166C5.4625 13.6157 5.09438 13.2476 5.09438 12.7935C5.09438 12.3394 5.4625 11.9713 5.9166 11.9713Z" fill="white"/>
+</svg>
diff --git a/src/ui/public/components/switchinput.svg b/src/ui/public/components/switchinput.svg
new file mode 100644
index 000000000..92339ec2b
--- /dev/null
+++ b/src/ui/public/components/switchinput.svg
@@ -0,0 +1,4 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.516602" y="0.193359" width="18" height="18" rx="4" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.18294 6.52653H10.8496C12.3224 6.52653 13.5163 7.72044 13.5163 9.1932C13.5163 10.666 12.3224 11.8599 10.8496 11.8599H8.18294C6.71018 11.8599 5.51628 10.666 5.51628 9.1932C5.51628 7.72044 6.71018 6.52653 8.18294 6.52653ZM4.84961 9.1932C4.84961 7.35225 6.34199 5.85986 8.18294 5.85986H10.8496C12.6906 5.85986 14.1829 7.35225 14.1829 9.1932C14.1829 11.0341 12.6906 12.5265 10.8496 12.5265H8.18294C6.34199 12.5265 4.84961 11.0341 4.84961 9.1932ZM9.51595 9.19336C9.51595 9.92974 8.919 10.5267 8.18262 10.5267C7.44624 10.5267 6.84928 9.92974 6.84928 9.19336C6.84928 8.45698 7.44624 7.86003 8.18262 7.86003C8.919 7.86003 9.51595 8.45698 9.51595 9.19336ZM10.1826 9.19336C10.1826 10.2979 9.28719 11.1934 8.18262 11.1934C7.07805 11.1934 6.18262 10.2979 6.18262 9.19336C6.18262 8.08879 7.07805 7.19336 8.18262 7.19336C9.28719 7.19336 10.1826 8.08879 10.1826 9.19336Z" fill="white"/>
+</svg>
diff --git a/src/ui/public/components/tab.svg b/src/ui/public/components/tab.svg
new file mode 100644
index 000000000..6047462fd
--- /dev/null
+++ b/src/ui/public/components/tab.svg
@@ -0,0 +1,4 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.516602" y="0.193359" width="18" height="18" rx="4" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.51628 5.86003H11.5163V9.86003H7.51628V5.86003ZM6.84961 10.5267V5.19336H12.1829V10.5267H6.84961ZM4.84961 13.1934H14.1829V12.5267H4.84961V13.1934Z" fill="white"/>
+</svg>
diff --git a/src/ui/public/components/tabs.svg b/src/ui/public/components/tabs.svg
new file mode 100644
index 000000000..5648d1e31
--- /dev/null
+++ b/src/ui/public/components/tabs.svg
@@ -0,0 +1,4 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.516602" y="0.193359" width="18" height="18" rx="4" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.51628 7.19328H6.84961V8.52661H5.51628V7.19328ZM4.84961 9.19328V6.52661H7.51628V9.19328H4.84961ZM8.84928 7.19328H10.1826V8.52661H8.84928V7.19328ZM8.18262 9.19328V6.52661H10.8493V9.19328H8.18262ZM13.5166 7.19328H12.1833V8.52661H13.5166V7.19328ZM11.5166 6.52661V9.19328H14.1833V6.52661H11.5166ZM4.84961 11.8599H7.51628V11.1933H4.84961V11.8599Z" fill="white"/>
+</svg>
diff --git a/src/ui/public/components/tags.svg b/src/ui/public/components/tags.svg
new file mode 100644
index 000000000..3824ac9bf
--- /dev/null
+++ b/src/ui/public/components/tags.svg
@@ -0,0 +1,4 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.516602" y="0.193359" width="18" height="18" rx="4" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.4721 6.52653H5.51628V11.8599H12.4721L14.0721 9.1932L12.4721 6.52653ZM12.8496 5.85986H4.84961V12.5265H12.8496L14.8496 9.1932L12.8496 5.85986ZM12.8499 9.19303C12.8499 9.56122 12.5515 9.8597 12.1833 9.8597C11.8151 9.8597 11.5166 9.56122 11.5166 9.19303C11.5166 8.82484 11.8151 8.52637 12.1833 8.52637C12.5515 8.52637 12.8499 8.82484 12.8499 9.19303Z" fill="white"/>
+</svg>
diff --git a/src/ui/public/components/text.svg b/src/ui/public/components/text.svg
new file mode 100644
index 000000000..4c6468b76
--- /dev/null
+++ b/src/ui/public/components/text.svg
@@ -0,0 +1,4 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.516602" y="0.193359" width="18" height="18" rx="4" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.5166 6.86003H5.5166V6.19336H13.5166V6.86003ZM13.5166 9.52669H5.5166V8.86003H13.5166V9.52669ZM5.5166 12.1934H10.8499V11.5267H5.5166V12.1934Z" fill="white"/>
+</svg>
diff --git a/src/ui/public/components/textareainput.svg b/src/ui/public/components/textareainput.svg
new file mode 100644
index 000000000..e70518564
--- /dev/null
+++ b/src/ui/public/components/textareainput.svg
@@ -0,0 +1,4 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.516602" y="0.193359" width="18" height="18" rx="4" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.8507 13.1933V12.1933L14.8508 5.52661V4.52661L13.8508 4.52661L5.18408 4.52661L4.18408 4.52661L4.18408 5.52661L4.18408 5.78534L4.18408 7.4155L4.18408 12.1933L4.18408 13.1933H5.18408L13.8507 13.1933H14.8507ZM5.18408 5.52661L13.8508 5.52661L13.8507 12.1933L5.18408 12.1933L5.18408 7.4155L5.18408 5.78534L5.18408 5.52661ZM12.8504 8.52677H6.18376V9.19344H12.8504V8.52677ZM6.18376 10.5268H10.8504V11.1934H6.18376V10.5268ZM12.8504 6.52677H6.18376V7.19344H12.8504V6.52677Z" fill="white"/>
+</svg>
diff --git a/src/ui/public/components/textinput.svg b/src/ui/public/components/textinput.svg
new file mode 100644
index 000000000..dec6eb8e1
--- /dev/null
+++ b/src/ui/public/components/textinput.svg
@@ -0,0 +1,4 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.516602" y="0.193359" width="18" height="18" rx="4" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.51628 5.19352H13.5163V13.1935H5.51628V5.19352ZM4.84961 13.8602V4.52686H14.1829V13.8602H4.84961ZM7.5166 7.86003H9.18327V11.1934H9.84994V7.86003H11.5166V7.19336H7.5166V7.86003Z" fill="white"/>
+</svg>
diff --git a/src/ui/public/components/timer.svg b/src/ui/public/components/timer.svg
new file mode 100644
index 000000000..9a68ec195
--- /dev/null
+++ b/src/ui/public/components/timer.svg
@@ -0,0 +1,4 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.516602" y="0.193359" width="18" height="18" rx="4" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.18294 4.52661H10.8496V5.19328H8.18294V4.52661ZM12.8499 9.86011C12.8499 11.7011 11.3576 13.1934 9.5166 13.1934C7.67565 13.1934 6.18327 11.7011 6.18327 9.86011C6.18327 8.01916 7.67565 6.52677 9.5166 6.52677C11.3576 6.52677 12.8499 8.01916 12.8499 9.86011ZM13.5166 9.86011C13.5166 12.0692 11.7257 13.8601 9.5166 13.8601C7.30746 13.8601 5.5166 12.0692 5.5166 9.86011C5.5166 7.65097 7.30746 5.86011 9.5166 5.86011C10.422 5.86011 11.2572 6.16094 11.9276 6.6681L12.8499 5.7458L13.3213 6.2172L12.4248 7.11372C13.1016 7.83019 13.5166 8.79669 13.5166 9.86011ZM9.18099 7.87101L9.18099 10.5377H9.84766V7.87101H9.18099Z" fill="white"/>
+</svg>
diff --git a/src/ui/public/components/vegalitechart.svg b/src/ui/public/components/vegalitechart.svg
new file mode 100644
index 000000000..88f541f6d
--- /dev/null
+++ b/src/ui/public/components/vegalitechart.svg
@@ -0,0 +1,7 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.516602" y="0.193359" width="18" height="18" rx="4" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.5163 5.19352H5.51628V13.1935H13.5163V5.19352ZM4.84961 4.52686V13.8602H14.1829V4.52686H4.84961Z" fill="white"/>
+<path d="M10.8496 11.1935V9.19352H11.5163V11.1935H10.8496Z" fill="white"/>
+<path d="M7.51628 11.1935V8.52686H8.18294V11.1935H7.51628Z" fill="white"/>
+<path d="M9.18294 11.1935V7.19352H9.84961L9.84961 11.1935H9.18294Z" fill="white"/>
+</svg>
diff --git a/src/ui/public/components/videoplayer.svg b/src/ui/public/components/videoplayer.svg
new file mode 100644
index 000000000..1058a2a55
--- /dev/null
+++ b/src/ui/public/components/videoplayer.svg
@@ -0,0 +1,4 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.516602" y="0.193359" width="18" height="18" rx="4" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.0999 5.36003L4.93327 5.36003L4.93327 13.0267L14.0999 13.0267L14.0999 5.36003ZM4.2666 13.6934V4.69336H14.7666L14.7666 13.6934H4.2666ZM12.9755 9.17023L7.18359 6.68799V12.0662L12.9755 9.17023ZM7.85026 10.9875V7.69901L11.3917 9.21677L7.85026 10.9875Z" fill="white"/>
+</svg>
diff --git a/src/ui/public/components/webcamcapture.svg b/src/ui/public/components/webcamcapture.svg
new file mode 100644
index 000000000..d462a1f16
--- /dev/null
+++ b/src/ui/public/components/webcamcapture.svg
@@ -0,0 +1,4 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.516602" y="0.193359" width="18" height="18" rx="4" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.51628 6.52653H11.5163V9.19287L11.516 9.1932L11.5163 9.19352V11.8599H5.51628L5.51628 6.52653ZM12.1829 9.86019V11.8599C12.1829 12.2281 11.8845 12.5265 11.5163 12.5265H5.51628C5.14809 12.5265 4.84961 12.2281 4.84961 11.8599V6.52653C4.84961 6.15834 5.14809 5.85986 5.51628 5.85986H11.5163C11.8845 5.85986 12.1829 6.15834 12.1829 6.52653V8.5262L14.1826 6.52653V11.8599L12.1829 9.86019Z" fill="white"/>
+</svg>

From fa624d3f02cd6e12892ceb1efecaf89af2e4bce8 Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Thu, 28 Nov 2024 12:58:18 +0000
Subject: [PATCH 04/19] fix: Font size in Safari

---
 src/ui/src/wds/WdsTextInput.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/ui/src/wds/WdsTextInput.vue b/src/ui/src/wds/WdsTextInput.vue
index cd59d7136..6a8c7e668 100644
--- a/src/ui/src/wds/WdsTextInput.vue
+++ b/src/ui/src/wds/WdsTextInput.vue
@@ -42,7 +42,7 @@ const input = ref();
 	border: 1px solid var(--separatorColor);
 	border-radius: 8px;
 	padding: 8.5px 12px 8.5px 12px;
-	font-size: 0.875rem;
+	font-size: 14px;
 	outline: none;
 	color: var(--primaryTextColor);
 	background: transparent;
@@ -57,6 +57,7 @@ const input = ref();
 .WdsTextInput--leftIcon {
 	cursor: pointer;
 	display: flex;
+	align-items: center;
 	gap: 8px;
 }
 
@@ -65,7 +66,9 @@ const input = ref();
 }
 
 .WdsTextInput--leftIcon input {
+	font-size: 14px;
 	border: none;
+	background: transparent;
 }
 .WdsTextInput--leftIcon input:focus {
 	border: none;

From fe68f6fd62db0bcd025ce82e25a58a4ec93274d2 Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Thu, 28 Nov 2024 12:59:05 +0000
Subject: [PATCH 05/19] feat: New toolkit, component tree, sidebar refactor

---
 src/ui/src/builder/BuilderApp.vue             |   2 +-
 src/ui/src/builder/BuilderSidebar.vue         |  35 ---
 src/ui/src/builder/BuilderSidebarTree.vue     |   4 +-
 src/ui/src/builder/sidebar/BuilderSidebar.vue |  30 ++
 .../sidebar/BuilderSidebarComponentTree.vue   |  63 ++++
 .../BuilderSidebarComponentTreeBranch.vue     | 289 ++++++++++++++++++
 .../builder/sidebar/BuilderSidebarPanel.vue   |  75 +++++
 .../builder/sidebar/BuilderSidebarToolkit.vue | 160 ++++++++++
 .../workflows/WorkflowsWorkflow.vue           |   1 -
 .../workflows/abstract/WorkflowsNode.vue      |   2 +-
 10 files changed, 621 insertions(+), 40 deletions(-)
 delete mode 100644 src/ui/src/builder/BuilderSidebar.vue
 create mode 100644 src/ui/src/builder/sidebar/BuilderSidebar.vue
 create mode 100644 src/ui/src/builder/sidebar/BuilderSidebarComponentTree.vue
 create mode 100644 src/ui/src/builder/sidebar/BuilderSidebarComponentTreeBranch.vue
 create mode 100644 src/ui/src/builder/sidebar/BuilderSidebarPanel.vue
 create mode 100644 src/ui/src/builder/sidebar/BuilderSidebarToolkit.vue

diff --git a/src/ui/src/builder/BuilderApp.vue b/src/ui/src/builder/BuilderApp.vue
index 72180b19b..750b5abc5 100644
--- a/src/ui/src/builder/BuilderApp.vue
+++ b/src/ui/src/builder/BuilderApp.vue
@@ -91,7 +91,7 @@ const BuilderSettings = defineAsyncComponent({
 	loadingComponent: BuilderAsyncLoader,
 });
 const BuilderSidebar = defineAsyncComponent({
-	loader: () => import("./BuilderSidebar.vue"),
+	loader: () => import("./sidebar/BuilderSidebar.vue"),
 	loadingComponent: BuilderAsyncLoader,
 });
 const ComponentRenderer = defineAsyncComponent({
diff --git a/src/ui/src/builder/BuilderSidebar.vue b/src/ui/src/builder/BuilderSidebar.vue
deleted file mode 100644
index 9a7d5f777..000000000
--- a/src/ui/src/builder/BuilderSidebar.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-	<div class="BuilderSidebar">
-		<BuilderSidebarToolbar class="toolbar"></BuilderSidebarToolbar>
-		<BuilderSidebarTree class="tree"></BuilderSidebarTree>
-	</div>
-</template>
-
-<script setup lang="ts">
-import BuilderSidebarToolbar from "./BuilderSidebarToolbar.vue";
-import BuilderSidebarTree from "./BuilderSidebarTree.vue";
-</script>
-
-<style scoped>
-@import "./sharedStyles.css";
-
-.BuilderSidebar {
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-}
-
-.toolbar {
-	flex: 0 0 50%;
-	position: relative;
-	display: flex;
-	flex-direction: column;
-	overflow-y: scroll;
-}
-
-.tree {
-	flex: 0 0 50%;
-	overflow-y: auto;
-	border-top: 1px solid var(--builderSeparatorColor);
-}
-</style>
diff --git a/src/ui/src/builder/BuilderSidebarTree.vue b/src/ui/src/builder/BuilderSidebarTree.vue
index c03a028af..6118e2178 100644
--- a/src/ui/src/builder/BuilderSidebarTree.vue
+++ b/src/ui/src/builder/BuilderSidebarTree.vue
@@ -72,9 +72,9 @@
 
 <script setup lang="ts">
 import { inject, computed, nextTick, ref, Ref, ComputedRef } from "vue";
-import { useComponentActions } from "./useComponentActions";
+import { useComponentActions } from "../useComponentActions";
 import BuilderTreeBranch from "./BuilderTreeBranch.vue";
-import injectionKeys from "../injectionKeys";
+import injectionKeys from "../../injectionKeys";
 import { Component } from "@/writerTypes";
 import { watch } from "vue";
 import BuilderSidebarTitleSearch from "./BuilderSidebarTitleSearch.vue";
diff --git a/src/ui/src/builder/sidebar/BuilderSidebar.vue b/src/ui/src/builder/sidebar/BuilderSidebar.vue
new file mode 100644
index 000000000..98696206e
--- /dev/null
+++ b/src/ui/src/builder/sidebar/BuilderSidebar.vue
@@ -0,0 +1,30 @@
+<template>
+	<div class="BuilderSidebar">
+		<BuilderSidebarToolkit></BuilderSidebarToolkit>
+		<BuilderSidebarComponentTree></BuilderSidebarComponentTree>
+	</div>
+</template>
+
+<script setup lang="ts">
+// import BuilderSidebarToolbar from "./BuilderSidebarToolbar.vue";
+import BuilderSidebarToolkit from "./BuilderSidebarToolkit.vue";
+import BuilderSidebarComponentTree from "./BuilderSidebarComponentTree.vue";
+</script>
+
+<style scoped>
+.BuilderSidebar {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+}
+
+.BuilderSidebar > *:not(:first-child) {
+	border-top: 1px solid var(--builderSeparatorColor);
+}
+
+.BuilderSidebar > * {
+	flex: 0 0 50%;
+	overflow-x: hidden;
+	overflow-y: auto;
+}
+</style>
diff --git a/src/ui/src/builder/sidebar/BuilderSidebarComponentTree.vue b/src/ui/src/builder/sidebar/BuilderSidebarComponentTree.vue
new file mode 100644
index 000000000..9831a7107
--- /dev/null
+++ b/src/ui/src/builder/sidebar/BuilderSidebarComponentTree.vue
@@ -0,0 +1,63 @@
+<template>
+	<BuilderSidebarPanel
+		v-model="query"
+		class="BuilderSidebarComponentTree"
+		placeholder="Component tree"
+	>
+		<BuilderSidebarComponentTreeBranch
+			class="rootBranch"
+			:component-id="rootComponentId"
+			:query="query"
+			:is-root="true"
+		></BuilderSidebarComponentTreeBranch>
+	</BuilderSidebarPanel>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, ref } from "vue";
+import BuilderSidebarPanel from "./BuilderSidebarPanel.vue";
+import injectionKeys from "@/injectionKeys";
+import BuilderSidebarComponentTreeBranch from "./BuilderSidebarComponentTreeBranch.vue";
+
+const wfbm = inject(injectionKeys.builderManager);
+const query = ref("");
+
+const rootComponentId = computed(() => {
+	if (wfbm.getMode() == "workflows") {
+		return "workflows_root";
+	}
+	return "root";
+});
+</script>
+
+<style scoped>
+.BuilderSidebarComponentTree {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	position: relative;
+}
+
+.category .header {
+	font-size: 12px;
+	font-weight: 500;
+	line-height: 12px; /* 100% */
+	letter-spacing: 1.3px;
+	text-transform: uppercase;
+	color: var(--builderSecondaryTextColor);
+	margin-bottom: 16px;
+}
+
+.rootBranch {
+	margin-top: -8px;
+}
+
+.tools {
+	display: grid;
+	grid-template-columns: 24px 1fr;
+	grid-template-rows: auto;
+	padding: 0 8px 0 8px;
+	row-gap: 12px;
+	column-gap: 4px;
+}
+</style>
diff --git a/src/ui/src/builder/sidebar/BuilderSidebarComponentTreeBranch.vue b/src/ui/src/builder/sidebar/BuilderSidebarComponentTreeBranch.vue
new file mode 100644
index 000000000..5f46e2f07
--- /dev/null
+++ b/src/ui/src/builder/sidebar/BuilderSidebarComponentTreeBranch.vue
@@ -0,0 +1,289 @@
+<template>
+	<div ref="rootEl" class="BuilderSidebarComponentTreeBranch">
+		<div
+			class="main"
+			:class="{ selected, notMatched, childless }"
+			tabindex="0"
+			:draggable="isDraggingAllowed(componentId)"
+			@click="select"
+			@keydown.enter="select"
+			@dragover="handleDragOver"
+			@dragstart="handleDragStart"
+			@dragend="handleDragEnd"
+			@drop="handleDrop"
+		>
+			<WdsButton
+				v-if="children.length > 0"
+				class="collapser"
+				variant="neutral"
+				size="icon"
+				@click.stop="toggleCollapse"
+			>
+				<i v-if="collapsed" class="material-symbols-outlined"
+					>expand_more</i
+				>
+				<i v-else class="material-symbols-outlined">expand_less</i>
+			</WdsButton>
+
+			<span class="name">{{ name }}</span>
+			<template v-if="Object.keys(component.handlers ?? {}).length > 0">
+				<span class="middot"></span
+				><i class="material-symbols-outlined">bolt</i>
+			</template>
+			<template v-if="!isComponentVisible(component.id)">
+				<span class="middot"></span
+				><i class="material-symbols-outlined">visibility_off</i>
+			</template>
+			<template v-if="component.isCodeManaged">
+				<span class="middot"></span
+				><i class="material-symbols-outlined">terminal</i>
+			</template>
+			<template v-if="previewText">
+				<span class="middot"></span
+				><span class="previewText">{{ previewText }}</span>
+			</template>
+		</div>
+		<div
+			v-show="(!collapsed || props.query) && children.length > 0"
+			class="children"
+		>
+			<BuilderSidebarComponentTreeBranch
+				v-for="childComponent in children"
+				:key="childComponent.id"
+				:component-id="childComponent.id"
+				:query="query"
+				@expand-branch="expand"
+			></BuilderSidebarComponentTreeBranch>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import injectionKeys from "@/injectionKeys";
+import { Component } from "@/writerTypes";
+import { computed, inject, nextTick, ref, watch } from "vue";
+import BuilderSidebarComponentTreeBranch from "./BuilderSidebarComponentTreeBranch.vue";
+import { useEvaluator } from "@/renderer/useEvaluator";
+import { useDragDropComponent } from "../useDragDropComponent";
+import { useComponentActions } from "../useComponentActions";
+import WdsButton from "@/wds/WdsButton.vue";
+
+const wf = inject(injectionKeys.core);
+const wfbm = inject(injectionKeys.builderManager);
+const collapsed = ref(false);
+const selected = computed(() => wfbm.getSelectedId() == props.componentId);
+const {
+	createAndInsertComponent,
+	moveComponent,
+	goToComponentParentPage,
+	isDraggingAllowed,
+} = useComponentActions(wf, wfbm);
+const { getComponentInfoFromDrag, removeInsertionCandidacy, isParentSuitable } =
+	useDragDropComponent(wf);
+const { isComponentVisible } = useEvaluator(wf);
+const rootEl = ref<HTMLElement>(null);
+const emit = defineEmits(["expandBranch"]);
+
+const matched = computed(() => {
+	const q = props.query?.toLocaleLowerCase();
+	if (!q) return true;
+	if (def.value?.name.toLocaleLowerCase().includes(q)) return true;
+
+	const matchingFields = Object.values(component.value.content).filter(
+		(fieldContent) => fieldContent.toLocaleLowerCase().includes(q),
+	);
+	if (matchingFields.length > 0) return true;
+
+	return false;
+});
+
+const notMatched = computed(() => !matched.value);
+
+const props = defineProps<{
+	componentId: Component["id"];
+	query?: string;
+}>();
+
+const component = computed(() => {
+	return wf.getComponentById(props.componentId);
+});
+
+const children = computed(() => {
+	return wf.getComponents(props.componentId, { sortedByPosition: true });
+});
+
+const childless = computed(() => children.value.length == 0);
+
+const previewText = computed(() => {
+	const key = def.value?.previewField;
+	if (!key) return;
+	const text = component.value.content?.[key];
+
+	let shortenedText: string;
+	const MAX_PREVIEW_TEXT_LENGTH = 70;
+	if (text?.length > MAX_PREVIEW_TEXT_LENGTH) {
+		shortenedText = text.substring(0, MAX_PREVIEW_TEXT_LENGTH) + "...";
+	} else {
+		shortenedText = text;
+	}
+
+	return shortenedText;
+});
+
+const def = computed(() => {
+	return wf.getComponentDefinition(component.value.type);
+});
+
+const name = computed(() => {
+	const type = component.value.type;
+	if (type == "html" && component.value.content?.["element"]) {
+		return component.value.content?.["element"];
+	}
+	if (type == "workflows_workflow") {
+		return component.value.content?.["key"] ?? "Workflow";
+	}
+	return def.value?.name ?? `Unknown (${component.value.type})`;
+});
+
+async function select() {
+	goToComponentParentPage(props.componentId);
+	await nextTick();
+	wfbm.setSelection(props.componentId, undefined, "tree");
+	expand();
+}
+
+function expand() {
+	collapsed.value = false;
+	emit("expandBranch");
+}
+
+function scrollToShow() {
+	if (!rootEl.value) return;
+	const treeEl = rootEl.value.closest(".BuilderSidebarComponentTree");
+	const treeBCR = treeEl.getBoundingClientRect();
+	const scrollTop = rootEl.value.offsetTop - treeBCR.height / 2;
+	treeEl.scrollTo({ top: scrollTop, left: 0, behavior: "smooth" });
+}
+
+function handleDragStart(ev: DragEvent) {
+	wfbm.setSelection(null);
+	ev.dataTransfer.setData(
+		`application/json;writer=${component.value.type},${component.value.id}`,
+		"{}",
+	);
+}
+
+function handleDragEnd(ev: DragEvent) {
+	removeInsertionCandidacy(ev);
+}
+
+function handleDragOver(ev: DragEvent) {
+	const dragInfo = getComponentInfoFromDrag(ev);
+	if (!dragInfo) return;
+	const { draggedType, draggedId } = dragInfo;
+	if (!isParentSuitable(props.componentId, draggedId, draggedType)) return;
+	ev.preventDefault();
+}
+
+function handleDrop(ev: DragEvent) {
+	const dragInfo = getComponentInfoFromDrag(ev);
+	if (!dragInfo) return;
+	const { draggedType, draggedId } = dragInfo;
+
+	if (!draggedId) {
+		createAndInsertComponent(draggedType, component.value.id);
+	} else {
+		moveComponent(draggedId, component.value.id);
+	}
+
+	removeInsertionCandidacy(ev);
+}
+
+function toggleCollapse() {
+	collapsed.value = !collapsed.value;
+}
+
+watch(
+	() => wfbm.getSelection(),
+	async (newSelection) => {
+		if (!newSelection) return;
+		if (newSelection.componentId !== props.componentId) return;
+		if (newSelection.source == "tree") return;
+		expand();
+		await nextTick();
+		scrollToShow();
+	},
+	{ immediate: true },
+);
+</script>
+
+<style scoped>
+.BuilderSidebarComponentTreeBranch {
+	font-size: 12px;
+}
+
+.main {
+	padding: 8px;
+	border-radius: 8px;
+	cursor: pointer;
+	display: flex;
+	flex-wrap: nowrap;
+	text-wrap: nowrap;
+	max-width: 100%;
+	overflow: hidden;
+	align-items: center;
+	outline: none;
+	gap: 4px;
+	color: var(--builderSecondaryTextColor);
+}
+
+.main.childless {
+	padding-left: 12px;
+}
+
+.main:focus {
+	outline: 1px solid var(--builderSelectedColor);
+}
+
+.main:hover {
+	background: var(--builderSubtleSeparatorColor);
+}
+
+.main.selected {
+	background: var(--builderSelectedColor);
+}
+
+.main.notMatched {
+	filter: opacity(0.2);
+}
+
+.name {
+	color: var(--builderPrimaryTextColor);
+}
+
+.previewText {
+	text-wrap: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
+
+.collapser {
+	margin-left: -4px;
+	width: 20px;
+	height: 20px;
+}
+
+.middot {
+	margin: 0 2px 0 2px;
+	border-radius: 3px;
+	width: 3px;
+	min-width: 3px;
+	height: 3px;
+	background: var(--builderSecondaryTextColor);
+	opacity: 0.5;
+}
+
+.children {
+	margin-left: 20px;
+}
+</style>
diff --git a/src/ui/src/builder/sidebar/BuilderSidebarPanel.vue b/src/ui/src/builder/sidebar/BuilderSidebarPanel.vue
new file mode 100644
index 000000000..7e8f7f891
--- /dev/null
+++ b/src/ui/src/builder/sidebar/BuilderSidebarPanel.vue
@@ -0,0 +1,75 @@
+<template>
+	<div class="BuilderSidebarPanel">
+		<div class="inputContainer">
+			<WdsTextInput
+				v-model="model"
+				class="searchInput"
+				left-icon="search"
+				:placeholder="placeholder"
+			></WdsTextInput>
+		</div>
+		<div class="main"><slot></slot></div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import WdsTextInput from "@/wds/WdsTextInput.vue";
+
+const model = defineModel<string>();
+
+defineProps<{
+	placeholder: string;
+}>();
+</script>
+
+<style scoped>
+.BuilderSidebarPanel {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	position: relative;
+	overflow: auto;
+}
+
+.inputContainer {
+	position: sticky;
+	top: 0;
+	padding: 16px 16px 0 16px;
+	background: var(--builderBackgroundColor);
+	z-index: 2;
+}
+
+.searchInput {
+	background: var(--builderSubtleSeparatorColor);
+}
+
+.main {
+	display: flex;
+	padding: 16px;
+	gap: 16px;
+	flex-direction: column;
+}
+
+.categories {
+	display: flex;
+}
+
+.category .header {
+	font-size: 12px;
+	font-weight: 500;
+	line-height: 12px; /* 100% */
+	letter-spacing: 1.3px;
+	text-transform: uppercase;
+	color: var(--builderSecondaryTextColor);
+	margin-bottom: 16px;
+}
+
+.tools {
+	display: grid;
+	grid-template-columns: 24px 1fr;
+	grid-template-rows: auto;
+	padding: 0 8px 0 8px;
+	row-gap: 12px;
+	column-gap: 4px;
+}
+</style>
diff --git a/src/ui/src/builder/sidebar/BuilderSidebarToolkit.vue b/src/ui/src/builder/sidebar/BuilderSidebarToolkit.vue
new file mode 100644
index 000000000..30a1b0310
--- /dev/null
+++ b/src/ui/src/builder/sidebar/BuilderSidebarToolkit.vue
@@ -0,0 +1,160 @@
+<template>
+	<BuilderSidebarPanel
+		v-model="query"
+		class="BuilderSidebarToolkit"
+		:placeholder="placeholder"
+	>
+		<div
+			v-for="(tools, categoryId) in categories"
+			:key="categoryId"
+			class="category"
+		>
+			<div class="header">{{ categoryId }}</div>
+			<div class="tools">
+				<div
+					v-for="tool in tools"
+					:key="tool.type"
+					class="tool"
+					:data-writer-tooltip="tool.description"
+					data-writer-tooltip-placement="right"
+					data-writer-tooltip-gap="8"
+					draggable="true"
+					:data-component-type="tool.type"
+					@dragend="handleDragEnd($event)"
+					@dragstart="handleDragStart($event, tool.type)"
+				>
+					<img
+						:src="`./../../../../components/${tool.type}.svg`"
+						@error="handleImageError($event, tool.category)"
+					/>
+					<div class="name">{{ tool.name }}</div>
+				</div>
+			</div>
+		</div>
+	</BuilderSidebarPanel>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, ref, watch } from "vue";
+import BuilderSidebarPanel from "./BuilderSidebarPanel.vue";
+import {
+	getComponentDefinition,
+	getSupportedComponentTypes,
+} from "@/core/templateMap";
+import injectionKeys from "@/injectionKeys";
+import { useDragDropComponent } from "../useDragDropComponent";
+import { Component } from "@/writerTypes";
+
+const wf = inject(injectionKeys.core);
+const wfbm = inject(injectionKeys.builderManager);
+const { removeInsertionCandidacy } = useDragDropComponent(wf);
+const query = ref("");
+
+const displayedCategories = [
+	"Layout",
+	"Content",
+	"Input",
+	"Embed",
+	"Writer",
+	"Logic",
+	"Other",
+];
+
+const activeToolkit = computed(() => {
+	if (wfbm.getMode() == "workflows") {
+		return "workflows";
+	}
+	return "core";
+});
+
+const categories = computed(() => {
+	const categoriesWithTools = displayedCategories
+		.map((categoryId) => [
+			categoryId,
+			getRelevantToolsInCategory(categoryId),
+		])
+		.filter(([_categoryId, tools]) => tools.length > 0);
+
+	return Object.fromEntries(categoriesWithTools);
+});
+
+const placeholder = computed(() => {
+	if (activeToolkit.value == "core") return "Core toolkit";
+	if (activeToolkit.value == "workflows") return "Workflows toolkit";
+	return "Toolkit";
+});
+
+function getRelevantToolsInCategory(categoryId: string) {
+	const typeList = getSupportedComponentTypes().filter((type) => {
+		const def = getComponentDefinition(type);
+		if (def.category != categoryId) return false;
+		if (!def.toolkit && activeToolkit.value !== "core") return false;
+		if (def.toolkit && def.toolkit !== activeToolkit.value) return false;
+		return true;
+	});
+	const enriched = typeList.map((type) => {
+		const { name, description, category } = getComponentDefinition(type);
+		return { type, name, description, category: category ?? "Other" };
+	});
+	const q = query.value.toLocaleLowerCase();
+	const queryApplied = enriched.filter(
+		(tool) => !q || tool.name.toLocaleLowerCase().includes(q),
+	);
+	return queryApplied;
+}
+
+function handleImageError(ev: Event, categoryId: string) {
+	const imageEl = ev.target as HTMLImageElement;
+	imageEl.src = `./../../../../components/category_${categoryId}.svg`;
+}
+
+const handleDragStart = (ev: DragEvent, type: Component["type"]) => {
+	wfbm.setSelection(null);
+	ev.dataTransfer.setData(`application/json;writer=${type},`, "{}");
+};
+
+const handleDragEnd = (ev: DragEvent) => {
+	removeInsertionCandidacy(ev);
+};
+
+watch(activeToolkit, () => {
+	query.value = "";
+});
+</script>
+
+<style scoped>
+.category .header {
+	font-size: 12px;
+	font-weight: 500;
+	line-height: 12px; /* 100% */
+	letter-spacing: 1.3px;
+	text-transform: uppercase;
+	color: var(--builderSecondaryTextColor);
+	margin-bottom: 8px;
+}
+
+.tools {
+	display: grid;
+	grid-template-columns: 1fr;
+	grid-template-rows: auto;
+}
+
+.tool {
+	display: grid;
+	grid-template-columns: 18px 1fr;
+	grid-template-rows: 1fr;
+	column-gap: 8px;
+	padding: 8px;
+	border-radius: 4px;
+	cursor: grab;
+}
+
+.tool img {
+	width: 18px;
+	aspect-ratio: 1 / 1;
+}
+
+.tool:hover {
+	background: var(--builderSubtleSeparatorColor);
+}
+</style>
diff --git a/src/ui/src/components/workflows/WorkflowsWorkflow.vue b/src/ui/src/components/workflows/WorkflowsWorkflow.vue
index 05cae3204..acf754999 100644
--- a/src/ui/src/components/workflows/WorkflowsWorkflow.vue
+++ b/src/ui/src/components/workflows/WorkflowsWorkflow.vue
@@ -105,7 +105,6 @@ export default {
 				type: FieldType.IdKey,
 			},
 		},
-		previewField: "key",
 	},
 };
 
diff --git a/src/ui/src/components/workflows/abstract/WorkflowsNode.vue b/src/ui/src/components/workflows/abstract/WorkflowsNode.vue
index 06e7f222b..6520b1d56 100644
--- a/src/ui/src/components/workflows/abstract/WorkflowsNode.vue
+++ b/src/ui/src/components/workflows/abstract/WorkflowsNode.vue
@@ -70,7 +70,7 @@ export default {
 			},
 		},
 		allowedParentTypes: ["workflows_workflow"],
-		previewField: "text",
+		previewField: "alias",
 	},
 };
 </script>

From 49d0abd64a952601145a981a329934b82ae875c1 Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Thu, 28 Nov 2024 20:10:40 +0000
Subject: [PATCH 06/19] feat: New builder panels

---
 src/ui/src/builder/BuilderApp.vue             |  30 ++--
 src/ui/src/builder/BuilderCodePanel.vue       |   7 +-
 src/ui/src/builder/BuilderLogPanel.vue        |  15 +-
 src/ui/src/builder/BuilderPanel.vue           | 170 +++++++-----------
 .../builder/panels/BuilderPanelSwitcher.vue   |  88 +++++++++
 5 files changed, 177 insertions(+), 133 deletions(-)
 create mode 100644 src/ui/src/builder/panels/BuilderPanelSwitcher.vue

diff --git a/src/ui/src/builder/BuilderApp.vue b/src/ui/src/builder/BuilderApp.vue
index 750b5abc5..5668e1fd4 100644
--- a/src/ui/src/builder/BuilderApp.vue
+++ b/src/ui/src/builder/BuilderApp.vue
@@ -29,10 +29,9 @@
 					:key="selectedId ?? 'noneSelected'"
 				></BuilderSettings>
 			</div>
-			<div class="builderPanels">
-				<BuilderCodePanel></BuilderCodePanel>
-				<BuilderLogPanel></BuilderLogPanel>
-			</div>
+			<BuilderPanelSwitcher
+				class="builderPanelSwitcher"
+			></BuilderPanelSwitcher>
 		</div>
 
 		<!-- INSTANCE TRACKERS -->
@@ -83,8 +82,7 @@ import { isPlatformMac } from "../core/detectPlatform";
 import BuilderHeader from "./BuilderHeader.vue";
 import BuilderTooltip from "./BuilderTooltip.vue";
 import BuilderAsyncLoader from "./BuilderAsyncLoader.vue";
-import BuilderCodePanel from "./BuilderCodePanel.vue";
-import BuilderLogPanel from "./BuilderLogPanel.vue";
+import BuilderPanelSwitcher from "./panels/BuilderPanelSwitcher.vue";
 
 const BuilderSettings = defineAsyncComponent({
 	loader: () => import("./settings/BuilderSettings.vue"),
@@ -298,7 +296,8 @@ onMounted(() => {
 	--builderTopBarHeight: 48px;
 	--builderWarningTextColor: white;
 	--builderWarningColor: #ff3d00;
-	--builderPanelHeight: 50vh;
+	--builderPanelSwitcherHeight: 48px;
+	--builderPanelSwitcherExpandedHeight: calc(50% - 24px);
 
 	--buttonColor: #5551ff;
 	--buttonTextColor: white;
@@ -325,14 +324,18 @@ onMounted(() => {
 			"ssbm.getMode() !== 'preview' ? 'var(--builderSidebarWidth)' : '0px'"
 		)
 		1fr;
-	grid-template-rows: var(--builderTopBarHeight) 1fr 48px;
+	grid-template-rows:
+		var(--builderTopBarHeight)
+		1fr
+		var(--builderPanelSwitcherHeight);
 	display: grid;
 }
 
 .mainGrid.openPanels {
-	grid-template-rows: var(--builderTopBarHeight) 1fr calc(
-			(100vh - var(--builderTopBarHeight)) * 0.5
-		);
+	grid-template-rows:
+		var(--builderTopBarHeight)
+		1fr
+		var(--builderPanelSwitcherExpandedHeight);
 }
 
 .builderHeader {
@@ -343,7 +346,7 @@ onMounted(() => {
 
 .sidebar {
 	grid-column: 1 / 2;
-	grid-row: 2 / 4;
+	grid-row: 2 / 5;
 	min-height: 0;
 	border-right: 1px solid var(--builderAreaSeparatorColor);
 }
@@ -372,10 +375,9 @@ onMounted(() => {
 	--notificationsDisplacement: calc(var(--builderSettingsWidth) + 24px);
 }
 
-.builderPanels {
+.builderPanelSwitcher {
 	grid-column: 2 / 3;
 	grid-row: 3;
-	display: flex;
 }
 
 .shortcutsTracker,
diff --git a/src/ui/src/builder/BuilderCodePanel.vue b/src/ui/src/builder/BuilderCodePanel.vue
index 80d3dac54..ed36ce628 100644
--- a/src/ui/src/builder/BuilderCodePanel.vue
+++ b/src/ui/src/builder/BuilderCodePanel.vue
@@ -2,6 +2,7 @@
 	<BuilderPanel
 		panel-id="code"
 		name="Code"
+		:contents-teleport-el="contentsTeleportEl"
 		:actions="actions"
 		class="BuilderCodePanel"
 	>
@@ -26,6 +27,10 @@ import BuilderPanel, { type BuilderPanelAction } from "./BuilderPanel.vue";
 import BuilderAsyncLoader from "./BuilderAsyncLoader.vue";
 import injectionKeys from "@/injectionKeys";
 
+defineProps<{
+	contentsTeleportEl: HTMLElement;
+}>();
+
 const BuilderEmbeddedCodeEditor = defineAsyncComponent({
 	loader: () => import("./BuilderEmbeddedCodeEditor.vue"),
 	loadingComponent: BuilderAsyncLoader,
@@ -98,8 +103,6 @@ async function save() {
 </script>
 
 <style scoped>
-@import "./sharedStyles.css";
-
 .status {
 	padding: 2px 12px 2px 12px;
 	border-radius: 16px;
diff --git a/src/ui/src/builder/BuilderLogPanel.vue b/src/ui/src/builder/BuilderLogPanel.vue
index cdf61b2d9..f0b7e2060 100644
--- a/src/ui/src/builder/BuilderLogPanel.vue
+++ b/src/ui/src/builder/BuilderLogPanel.vue
@@ -2,8 +2,8 @@
 	<BuilderPanel
 		panel-id="log"
 		name="Log"
+		:contents-teleport-el="contentsTeleportEl"
 		:actions="actions"
-		tabindex="0"
 		class="BuilderLogPanel"
 	>
 		<template #titleCompanion>
@@ -79,6 +79,10 @@ import BuilderLogWorkflowExecution from "./BuilderLogWorkflowExecution.vue";
 import injectionKeys from "@/injectionKeys";
 import BuilderLogIndicator from "./BuilderLogIndicator.vue";
 
+defineProps<{
+	contentsTeleportEl: HTMLElement;
+}>();
+
 const wfbm = inject(injectionKeys.builderManager);
 
 const actions: BuilderPanelAction[] = [
@@ -103,16 +107,13 @@ const logEntries = computed(() => {
 <style scoped>
 @import "./sharedStyles.css";
 
-.BuilderLogPanel {
-	font-size: 14px;
-	font-weight: 400;
-	line-height: 140%;
-}
-
 .entries {
 	padding: 20px;
 	display: flex;
 	flex-direction: column;
+	font-size: 14px;
+	font-weight: 400;
+	line-height: 140%;
 }
 
 .entry {
diff --git a/src/ui/src/builder/BuilderPanel.vue b/src/ui/src/builder/BuilderPanel.vue
index 3385156d0..ad2a419c7 100644
--- a/src/ui/src/builder/BuilderPanel.vue
+++ b/src/ui/src/builder/BuilderPanel.vue
@@ -1,47 +1,52 @@
 <template>
-	<div
-		class="BuilderPanel"
-		:class="{ collapsed, allPanelsCollapsed }"
-		@keydown="handleKeydown"
-	>
-		<div class="header">
-			<div class="collapser">
-				<WdsButton
-					variant="neutral"
-					size="icon"
-					@click="togglePanel(panelId)"
-				>
-					<i class="material-symbols-outlined">
-						{{ collapserIcon }}
-					</i>
-				</WdsButton>
-			</div>
-			<div class="title">{{ name }}</div>
-			<div class="titleCompanion">
-				<slot name="titleCompanion"></slot>
-			</div>
-			<div class="gap"></div>
-			<div class="actionsCompanion">
-				<slot name="actionsCompanion"></slot>
-			</div>
+	<div class="BuilderPanel" :class="{ collapsed }" @keydown="handleKeydown">
+		<div class="collapser">
 			<WdsButton
-				v-for="(action, actionKey) in actions"
-				:key="actionKey"
-				:data-writer-tooltip="
-					action.name +
-					getKeyboardShortcutDescription(action.keyboardShortcut)
-				"
-				data-writer-tooltip-placement="left"
 				variant="neutral"
-				size="unpadded"
-				:disabled="action.isDisabled"
-				@click="action.callback"
-				><i class="material-symbols-outlined">{{
-					action.icon
-				}}</i></WdsButton
+				size="icon"
+				@click="togglePanel(panelId)"
 			>
+				<i class="material-symbols-outlined">{{
+					collapsed ? "expand_less" : "expand_more"
+				}}</i>
+			</WdsButton>
 		</div>
-		<div v-if="!collapsed" class="content"><slot></slot></div>
+		<div class="title">{{ name }}</div>
+		<div class="titleCompanion">
+			<slot name="titleCompanion"></slot>
+		</div>
+		<template v-if="!collapsed">
+			<Teleport :to="contentsTeleportEl">
+				<div :style="{ order }" :data-order="order">
+					<div class="actions">
+						<div class="actionsCompanion">
+							<slot name="actionsCompanion"></slot>
+						</div>
+						<WdsButton
+							v-for="(action, actionKey) in actions"
+							:key="actionKey"
+							:data-writer-tooltip="
+								action.name +
+								getKeyboardShortcutDescription(
+									action.keyboardShortcut,
+								)
+							"
+							data-writer-tooltip-placement="left"
+							variant="neutral"
+							size="unpadded"
+							:disabled="action.isDisabled"
+							@click="action.callback"
+							><i class="material-symbols-outlined">{{
+								action.icon
+							}}</i></WdsButton
+						>
+					</div>
+					<div class="contents">
+						<slot></slot>
+					</div>
+				</div>
+			</Teleport>
+		</template>
 	</div>
 </template>
 
@@ -72,28 +77,11 @@ const props = defineProps<{
 	panelId: (typeof panelIds)[number];
 	name: string;
 	actions: BuilderPanelAction[];
+	contentsTeleportEl: HTMLElement;
 }>();
 
 const collapsed = computed(() => !wfbm.openPanels.value.has(props.panelId));
-const allPanelsCollapsed = computed(() => wfbm.openPanels.value.size == 0);
-
-const collapserIcon = computed(() => {
-	function getIcons() {
-		const openPanelCount = wfbm.openPanels.value.size;
-		if (openPanelCount == 0) {
-			return ["expand_less", "expand_less"];
-		}
-		if (openPanelCount == panelIds.length) {
-			return ["chevron_left", "chevron_right"];
-		}
-		if (wfbm.openPanels.value.has(panelIds[0])) {
-			return ["expand_more", "chevron_left"];
-		}
-		return ["chevron_right", "expand_more"];
-	}
-
-	return getIcons()[panelIds.indexOf(props.panelId)];
-});
+const order = computed(() => panelIds.indexOf(props.panelId));
 
 function togglePanel(panelId: typeof props.panelId) {
 	if (wfbm.openPanels.value.has(panelId)) {
@@ -131,73 +119,35 @@ function getKeyboardShortcutDescription(
 </script>
 
 <style scoped>
-@import "./sharedStyles.css";
-
 .BuilderPanel {
-	flex: 1 1 50%;
-	border-top: 1px solid var(--builderIntenseSeparatorColor);
-	display: grid;
-	background: var(--builderBackgroundColor);
-	grid-template-rows: 48px 1fr;
-	grid-template-columns: 1fr;
-}
-
-.BuilderPanel.allPanelsCollapsed {
-	grid-template-rows: 1fr;
-}
-
-.BuilderPanel.collapsed {
-	flex: 0 1 96px;
-}
-
-.BuilderPanel.allPanelsCollapsed:last-child {
-	flex: 1 0 96px;
-}
-
-.BuilderPanel:not(:first-child) {
-	border-left: 1px solid var(--builderSeparatorColor);
-}
-
-.header {
-	grid-column: 1 / 2;
-	grid-row: 1 / 2;
 	display: flex;
-	align-items: center;
-	padding: 8px;
 	gap: 8px;
-	flex-direction: row;
-}
-
-.BuilderPanel:not(.collapsed) .header {
-	border-bottom: 1px solid var(--builderSeparatorColor);
-}
-
-.BuilderPanel.collapsed:not(.allPanelsCollapsed) .header {
-	flex-direction: column;
-	grid-template-rows: 1fr;
-	height: 100%;
+	align-items: center;
+	background: var(--builderBackgroundColor);
 }
 
-.header .title {
+.title {
 	font-size: 14px;
 	font-style: normal;
 	font-weight: 600;
 	line-height: 140%;
 }
 
-.header .gap {
-	flex: 1 0 auto;
+.titleCompanion {
+	margin-left: 8px;
 }
 
-.header .actions {
+.actions {
 	display: flex;
-	font-size: 16px;
+	justify-content: right;
+	height: 36px;
+	align-items: center;
+	padding: 0 8px 0 8px;
+	gap: 8px;
+	border-bottom: 1px solid var(--builderSeparatorColor);
 }
 
-.content {
-	grid-column: 1 / 2;
-	grid-row: 2 / 3;
-	overflow: auto;
-	width: 100%;
+.contents {
+	height: 100%;
 }
 </style>
diff --git a/src/ui/src/builder/panels/BuilderPanelSwitcher.vue b/src/ui/src/builder/panels/BuilderPanelSwitcher.vue
new file mode 100644
index 000000000..cb5839e3d
--- /dev/null
+++ b/src/ui/src/builder/panels/BuilderPanelSwitcher.vue
@@ -0,0 +1,88 @@
+<template>
+	<div
+		class="BuilderPanelSwitcher"
+		:class="{ openPanels: wfbm.openPanels.value.size > 0 }"
+	>
+		<div ref="screenEl" class="screen"></div>
+		<div class="switches">
+			<BuilderCodePanel
+				:contents-teleport-el="screenEl"
+			></BuilderCodePanel>
+			<BuilderLogPanel :contents-teleport-el="screenEl"></BuilderLogPanel>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+export type BuilderPanelAction = {
+	icon: string;
+	name: string;
+	callback: () => void;
+	isDisabled?: boolean;
+	keyboardShortcut?: {
+		modifierKey: boolean;
+		key: string;
+	};
+};
+</script>
+
+<script setup lang="ts">
+import injectionKeys from "@/injectionKeys";
+import { inject, ref } from "vue";
+import BuilderCodePanel from "../BuilderCodePanel.vue";
+import BuilderLogPanel from "../BuilderLogPanel.vue";
+
+const wfbm = inject(injectionKeys.builderManager);
+
+const screenEl = ref(null);
+</script>
+
+<style scoped>
+.BuilderPanelSwitcher {
+	display: grid;
+	background: var(--builderBackgroundColor);
+	grid-template-rows: 48px;
+	grid-template-columns: 1fr;
+}
+
+.BuilderPanelSwitcher.openPanels {
+	grid-template-rows: 1fr 48px;
+}
+
+.screen {
+	display: none;
+	grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
+	grid-template-rows: 1fr;
+	overflow: hidden;
+}
+
+.openPanels .screen {
+	display: grid;
+}
+
+.screen:deep(> *) {
+	border-left: 1px solid var(--builderSeparatorColor);
+	border-top: 1px solid var(--builderIntenseSeparatorColor);
+	overflow: hidden;
+}
+
+.screen:deep(> *:first-child:last-child) {
+	border-left: none;
+}
+
+.screen:deep(> *:not([data-order="1"])) {
+	border-left: none;
+}
+
+.switches {
+	border-top: 1px solid var(--builderIntenseSeparatorColor);
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 0 16px 0 8px;
+}
+
+.openPanels .switches {
+	border-top: 1px solid var(--builderSeparatorColor);
+}
+</style>

From 1f794042b09f602d7691bfe02d383919a446473b Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Thu, 28 Nov 2024 20:10:50 +0000
Subject: [PATCH 07/19] feat: New sidebar

---
 src/ui/src/builder/sidebar/BuilderSidebar.vue |  2 -
 .../sidebar/BuilderSidebarComponentTree.vue   | 62 ++++++++++++++++++-
 .../builder/sidebar/BuilderSidebarPanel.vue   |  4 +-
 .../builder/sidebar/BuilderSidebarToolkit.vue |  8 +--
 4 files changed, 68 insertions(+), 8 deletions(-)

diff --git a/src/ui/src/builder/sidebar/BuilderSidebar.vue b/src/ui/src/builder/sidebar/BuilderSidebar.vue
index 98696206e..f24c34a39 100644
--- a/src/ui/src/builder/sidebar/BuilderSidebar.vue
+++ b/src/ui/src/builder/sidebar/BuilderSidebar.vue
@@ -24,7 +24,5 @@ import BuilderSidebarComponentTree from "./BuilderSidebarComponentTree.vue";
 
 .BuilderSidebar > * {
 	flex: 0 0 50%;
-	overflow-x: hidden;
-	overflow-y: auto;
 }
 </style>
diff --git a/src/ui/src/builder/sidebar/BuilderSidebarComponentTree.vue b/src/ui/src/builder/sidebar/BuilderSidebarComponentTree.vue
index 9831a7107..4333bb017 100644
--- a/src/ui/src/builder/sidebar/BuilderSidebarComponentTree.vue
+++ b/src/ui/src/builder/sidebar/BuilderSidebarComponentTree.vue
@@ -10,24 +10,68 @@
 			:query="query"
 			:is-root="true"
 		></BuilderSidebarComponentTreeBranch>
+		<div class="add">
+			<WdsButton
+				v-if="rootComponentId == 'root'"
+				variant="special"
+				size="small"
+				data-automation-action="add-page"
+				@click="addPage"
+			>
+				<i class="material-symbols-outlined"> add </i> Add
+				page</WdsButton
+			>
+			<WdsButton
+				v-if="rootComponentId == 'workflows_root'"
+				variant="special"
+				size="small"
+				data-automation-action="add-workflow"
+				@click="addWorkflow"
+			>
+				<i class="material-symbols-outlined"> add </i> Add
+				workflow</WdsButton
+			>
+		</div>
 	</BuilderSidebarPanel>
 </template>
 
 <script setup lang="ts">
-import { computed, inject, ref } from "vue";
+import { computed, inject, nextTick, ref } from "vue";
 import BuilderSidebarPanel from "./BuilderSidebarPanel.vue";
 import injectionKeys from "@/injectionKeys";
 import BuilderSidebarComponentTreeBranch from "./BuilderSidebarComponentTreeBranch.vue";
+import WdsButton from "@/wds/WdsButton.vue";
+import { useComponentActions } from "../useComponentActions";
 
+const wf = inject(injectionKeys.core);
 const wfbm = inject(injectionKeys.builderManager);
 const query = ref("");
 
+const { createAndInsertComponent } = useComponentActions(wf, wfbm);
+
 const rootComponentId = computed(() => {
 	if (wfbm.getMode() == "workflows") {
 		return "workflows_root";
 	}
 	return "root";
 });
+
+async function addPage() {
+	const pageId = createAndInsertComponent("page", "root");
+	wf.setActivePageId(pageId);
+	await nextTick();
+	wfbm.setSelection(pageId);
+}
+
+async function addWorkflow() {
+	const pageId = createAndInsertComponent(
+		"workflows_workflow",
+		"workflows_root",
+	);
+	wf.setActivePageId(pageId);
+	await nextTick();
+	wfbm.setSelection(pageId);
+}
 </script>
 
 <style scoped>
@@ -50,6 +94,7 @@ const rootComponentId = computed(() => {
 
 .rootBranch {
 	margin-top: -8px;
+	flex: 1 0 auto;
 }
 
 .tools {
@@ -60,4 +105,19 @@ const rootComponentId = computed(() => {
 	row-gap: 12px;
 	column-gap: 4px;
 }
+
+.add {
+	position: sticky;
+	flex: 0 0 48px;
+	bottom: 0;
+	height: 48px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin-left: -16px;
+	margin-right: -16px;
+	margin-bottom: -16px;
+	border-top: 1px solid var(--builderSeparatorColor);
+	background: var(--builderBackgroundColor);
+}
 </style>
diff --git a/src/ui/src/builder/sidebar/BuilderSidebarPanel.vue b/src/ui/src/builder/sidebar/BuilderSidebarPanel.vue
index 7e8f7f891..947d670fe 100644
--- a/src/ui/src/builder/sidebar/BuilderSidebarPanel.vue
+++ b/src/ui/src/builder/sidebar/BuilderSidebarPanel.vue
@@ -28,7 +28,8 @@ defineProps<{
 	flex-direction: column;
 	height: 100%;
 	position: relative;
-	overflow: auto;
+	overflow-x: hidden;
+	overflow-y: scroll;
 }
 
 .inputContainer {
@@ -45,6 +46,7 @@ defineProps<{
 
 .main {
 	display: flex;
+	flex: 1 0 auto;
 	padding: 16px;
 	gap: 16px;
 	flex-direction: column;
diff --git a/src/ui/src/builder/sidebar/BuilderSidebarToolkit.vue b/src/ui/src/builder/sidebar/BuilderSidebarToolkit.vue
index 30a1b0310..db4eec740 100644
--- a/src/ui/src/builder/sidebar/BuilderSidebarToolkit.vue
+++ b/src/ui/src/builder/sidebar/BuilderSidebarToolkit.vue
@@ -108,14 +108,14 @@ function handleImageError(ev: Event, categoryId: string) {
 	imageEl.src = `./../../../../components/category_${categoryId}.svg`;
 }
 
-const handleDragStart = (ev: DragEvent, type: Component["type"]) => {
+function handleDragStart(ev: DragEvent, type: Component["type"]) {
 	wfbm.setSelection(null);
 	ev.dataTransfer.setData(`application/json;writer=${type},`, "{}");
-};
+}
 
-const handleDragEnd = (ev: DragEvent) => {
+function handleDragEnd(ev: DragEvent) {
 	removeInsertionCandidacy(ev);
-};
+}
 
 watch(activeToolkit, () => {
 	query.value = "";

From 6677b24b8f5608a8a77091d46604b0e1ef477127 Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Thu, 28 Nov 2024 20:43:07 +0000
Subject: [PATCH 08/19] chore: Panel, sidebar refactor

---
 src/ui/src/builder/BuilderHeader.vue          |   2 -
 src/ui/src/builder/BuilderSettings copy.vue   | 201 -----------
 .../src/builder/BuilderSidebarTitleSearch.vue | 103 ------
 src/ui/src/builder/BuilderSidebarToolbar.vue  | 257 --------------
 src/ui/src/builder/BuilderSidebarTree.vue     | 212 -----------
 src/ui/src/builder/BuilderTreeBranch.vue      | 334 ------------------
 .../builder/{ => panels}/BuilderCodePanel.vue |   5 +-
 .../{ => panels}/BuilderLogIndicator.vue      |   2 -
 .../builder/{ => panels}/BuilderLogPanel.vue  |   2 -
 .../BuilderLogWorkflowExecution.vue           |   8 +-
 .../src/builder/{ => panels}/BuilderPanel.vue |   0
 .../builder/panels/BuilderPanelSwitcher.vue   |   4 +-
 .../src/builder/settings/BuilderSettings.vue  |   1 +
 13 files changed, 8 insertions(+), 1123 deletions(-)
 delete mode 100644 src/ui/src/builder/BuilderSettings copy.vue
 delete mode 100644 src/ui/src/builder/BuilderSidebarTitleSearch.vue
 delete mode 100644 src/ui/src/builder/BuilderSidebarToolbar.vue
 delete mode 100644 src/ui/src/builder/BuilderSidebarTree.vue
 delete mode 100644 src/ui/src/builder/BuilderTreeBranch.vue
 rename src/ui/src/builder/{ => panels}/BuilderCodePanel.vue (93%)
 rename src/ui/src/builder/{ => panels}/BuilderLogIndicator.vue (97%)
 rename src/ui/src/builder/{ => panels}/BuilderLogPanel.vue (99%)
 rename src/ui/src/builder/{ => panels}/BuilderLogWorkflowExecution.vue (97%)
 rename src/ui/src/builder/{ => panels}/BuilderPanel.vue (100%)

diff --git a/src/ui/src/builder/BuilderHeader.vue b/src/ui/src/builder/BuilderHeader.vue
index 7c3af606c..f64f7c06b 100644
--- a/src/ui/src/builder/BuilderHeader.vue
+++ b/src/ui/src/builder/BuilderHeader.vue
@@ -64,8 +64,6 @@ import { useComponentActions } from "./useComponentActions";
 import BuilderModal, { ModalAction } from "./BuilderModal.vue";
 import injectionKeys from "../injectionKeys";
 import BuilderStateExplorer from "./BuilderStateExplorer.vue";
-import WdsButton from "@/wds/WdsButton.vue";
-import BuilderLogIndicator from "./BuilderLogIndicator.vue";
 
 const syncHealthIcon = ref(null);
 const wf = inject(injectionKeys.core);
diff --git a/src/ui/src/builder/BuilderSettings copy.vue b/src/ui/src/builder/BuilderSettings copy.vue
deleted file mode 100644
index 0c432cb66..000000000
--- a/src/ui/src/builder/BuilderSettings copy.vue	
+++ /dev/null
@@ -1,201 +0,0 @@
-<template>
-	<div v-if="ssbm.isSelectionActive()" class="BuilderSettings">
-		<div class="windowBar">
-			<div class="title">{{ componentDefinition.name }}</div>
-			<button
-				v-if="description || docsString"
-				class="windowAction"
-				tabindex="0"
-				:title="(docsActive ? 'Hide' : 'Show') + ' inline docs'"
-				@click="toggleDocs"
-			>
-				<i class="material-symbols-outlined">help</i>
-				<i v-if="docsActive" class="material-symbols-outlined"
-					>expand_less</i
-				>
-				<i v-else class="material-symbols-outlined">expand_more</i>
-			</button>
-			<button
-				class="windowAction"
-				tabindex="0"
-				title="Close (Esc)"
-				data-automation-action="close-settings"
-				@click="closeSettings"
-			>
-				<i class="material-symbols-outlined">close</i>
-			</button>
-		</div>
-
-		<div v-if="docsActive" class="docs">
-			<div v-if="description">{{ description }}</div>
-			<div
-				v-if="docsString"
-				v-dompurify-html="generateUnsanitisedMarkdownHtml()"
-				class="markdown"
-			></div>
-		</div>
-
-		<div v-if="readonly" class="warning cmc-warning">
-			<i class="material-symbols-outlined">warning</i>
-			<span>
-				This component is instantiated in code. All settings in this
-				panel are read-only and cannot be edited.
-			</span>
-		</div>
-
-		<div class="sections" :inert="readonly">
-			<BuilderSettingsProperties></BuilderSettingsProperties>
-			<template
-				v-if="
-					!componentDefinition.toolkit ||
-					componentDefinition.toolkit == 'core'
-				"
-			>
-				<BuilderSettingsBinding
-					v-if="isBindable"
-				></BuilderSettingsBinding>
-				<BuilderSettingsHandlers></BuilderSettingsHandlers>
-				<BuilderSettingsVisibility></BuilderSettingsVisibility>
-			</template>
-		</div>
-
-		<div class="debug">
-			Component id:
-			<BuilderCopyText>{{ ssbm.getSelectedId() }}</BuilderCopyText>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { marked } from "marked";
-import { inject, computed, ref, watch, defineAsyncComponent } from "vue";
-import injectionKeys from "../injectionKeys";
-
-import BuilderSettingsProperties from "./settings/BuilderSettingsProperties.vue";
-import BuilderSettingsBinding from "./settings/BuilderSettingsBinding.vue";
-import BuilderSettingsVisibility from "./settings/BuilderSettingsVisibility.vue";
-import BuilderCopyText from "./BuilderCopyText.vue";
-import BuilderAsyncLoader from "./BuilderAsyncLoader.vue";
-
-const BuilderSettingsHandlers = defineAsyncComponent({
-	loader: () => import("./settings/BuilderSettingsHandlers.vue"),
-	loadingComponent: BuilderAsyncLoader,
-});
-
-const wf = inject(injectionKeys.core);
-const ssbm = inject(injectionKeys.builderManager);
-const docsActive = ref(false);
-
-const component = computed(() => wf.getComponentById(ssbm.getSelectedId()));
-const readonly = computed(() => component.value.isCodeManaged);
-
-const componentDefinition = computed(() => {
-	const { type } = component.value;
-	const definition = wf.getComponentDefinition(type);
-	return definition;
-});
-
-const closeSettings = () => {
-	ssbm.setSelection(null);
-};
-
-watch(component, (newComponent) => {
-	if (!newComponent) closeSettings();
-});
-
-const toggleDocs = () => {
-	docsActive.value = !docsActive.value;
-};
-
-const isBindable = computed(() =>
-	Object.values(componentDefinition.value?.events ?? {}).some(
-		(e) => e.bindable,
-	),
-);
-
-const description = computed(() => {
-	if (!componentDefinition.value?.description) return;
-	return componentDefinition.value.description.trim();
-});
-
-const docsString = computed(() => {
-	if (!componentDefinition.value?.docs) return;
-	return componentDefinition.value.docs.trim();
-});
-
-const generateUnsanitisedMarkdownHtml = () => {
-	return marked.parse(docsString.value);
-};
-</script>
-
-<style scoped>
-@import "./sharedStyles.css";
-.BuilderSettings {
-	font-size: 0.7rem;
-	background: var(--builderBackgroundColor);
-}
-.docs {
-	font-size: 0.75rem;
-	padding: 24px;
-	line-height: 1.5;
-	background: var(--builderSubtleHighlightColorSolid);
-	border-top: 1px solid var(--builderSubtleSeparatorColor);
-	white-space: pre-wrap;
-}
-
-.docs div:not(:first-child) {
-	margin-top: 16px;
-	border-top: 1px solid var(--builderSubtleSeparatorColor);
-	padding-top: 16px;
-}
-
-.sections {
-	background: var(--builderBackgroundColor);
-}
-
-.sections[inert] {
-	opacity: 0.7;
-}
-
-.sections > *:not(:first-child) {
-	border-top: 1px solid var(--builderSeparatorColor);
-}
-
-.debug {
-	color: var(--builderSecondaryTextColor);
-	border-top: 1px solid var(--builderSeparatorColor);
-	padding: 24px;
-}
-
-.warning {
-	display: flex;
-	align-items: center;
-	background: var(--builderWarningColor);
-	color: var(--builderWarningTextColor);
-	border-radius: 4px;
-	gap: 12px;
-	margin: 12px 12px 0;
-	padding: 12px;
-}
-
-/*
-Markdown styling
-*/
-
-.markdown:deep() pre {
-	background-color: var(--builderSubtleSeparatorColor);
-	font-family: monospace;
-	padding: 8px;
-	border-radius: 4px;
-}
-
-.markdown:deep() code {
-	background-color: var(--builderSubtleSeparatorColor);
-	font-family: monospace;
-	padding: 2px;
-}
-
-.markdown:deep() pre > code {
-	background-color: unset;
-}
-</style>
diff --git a/src/ui/src/builder/BuilderSidebarTitleSearch.vue b/src/ui/src/builder/BuilderSidebarTitleSearch.vue
deleted file mode 100644
index 09235372d..000000000
--- a/src/ui/src/builder/BuilderSidebarTitleSearch.vue
+++ /dev/null
@@ -1,103 +0,0 @@
-<template>
-	<div v-if="isSearchActive" class="BuilderSidebarTitleSearch">
-		<input
-			ref="searchInput"
-			v-model="searchQuery"
-			type="text"
-			placeholder="Search..."
-		/>
-		<slot />
-		<i
-			:class="{ disabled: disabled }"
-			class="searchIcon material-symbols-outlined"
-			data-writer-tooltip="Close"
-			data-writer-tooltip-placement="bottom"
-			tabindex="0"
-			data-automation-action="close"
-			@keydown.enter="toggleSearch"
-			@click="toggleSearch"
-		>
-			close
-		</i>
-	</div>
-	<div v-else class="BuilderSidebarTitleSearch">
-		<i class="material-symbols-outlined">{{ icon }}</i>
-		<h3>{{ title }}</h3>
-		<i
-			data-writer-tooltip="Search"
-			data-writer-tooltip-placement="bottom"
-			class="searchIcon material-symbols-outlined"
-			tabindex="0"
-			data-automation-action="search"
-			@keydown.enter="toggleSearch"
-			@click="toggleSearch"
-		>
-			search
-		</i>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { nextTick, ref, Ref } from "vue";
-
-defineProps({
-	icon: { type: String, required: true },
-	title: { type: String, required: true },
-	disabled: { type: Boolean, required: false },
-});
-
-const searchQuery = defineModel({ type: String, default: "" });
-
-defineEmits({});
-
-const searchInput: Ref<HTMLInputElement> = ref(null);
-const isSearchActive: Ref<boolean> = ref(false);
-
-async function toggleSearch() {
-	isSearchActive.value = !isSearchActive.value;
-	if (isSearchActive.value) {
-		await nextTick();
-		searchInput.value.focus();
-	} else {
-		searchQuery.value = "";
-	}
-}
-</script>
-
-<style scoped>
-@import "./sharedStyles.css";
-
-.BuilderSidebarTitleSearch {
-	display: flex;
-	gap: 8px;
-	align-items: center;
-	font-size: 1rem;
-
-	background: var(--builderBackgroundColor);
-	padding: 16px;
-	top: 0;
-	position: sticky;
-	font-size: 1rem;
-}
-
-.BuilderSidebarTitleSearch h3 {
-	font-weight: 500;
-	font-size: 0.875rem;
-	flex-grow: 1;
-}
-
-.BuilderSidebarTitleSearch .searchIcon {
-	cursor: pointer;
-}
-
-.BuilderSidebarTitleSearch .searchIcon.disabled {
-	color: var(--builderDisabledColor);
-}
-
-.BuilderSidebarTitleSearch input {
-	outline: 0;
-	border: 0;
-	flex-grow: 1;
-	width: 50%;
-}
-</style>
diff --git a/src/ui/src/builder/BuilderSidebarToolbar.vue b/src/ui/src/builder/BuilderSidebarToolbar.vue
deleted file mode 100644
index 9cc623be9..000000000
--- a/src/ui/src/builder/BuilderSidebarToolbar.vue
+++ /dev/null
@@ -1,257 +0,0 @@
-<template>
-	<div class="BuilderSidebarToolbar">
-		<BuilderSidebarTitleSearch
-			v-model="searchQuery"
-			title="Toolkit"
-			icon="handyman"
-		/>
-		<div class="categories">
-			<template
-				v-for="(categoryData, category) in categoriesData"
-				:key="category"
-			>
-				<div v-if="shouldDisplayCategory(category)" class="category">
-					<div class="title">
-						<i class="material-symbols-outlined">{{
-							categoryData.icon ?? "question_mark"
-						}}</i>
-						<h4>{{ category }}</h4>
-
-						<button
-							class="drop-arrow"
-							@click="toggleCollapseCategory(category)"
-						>
-							<i class="material-symbols-outlined">
-								{{
-									categoryData.isCollapsed
-										? "expand_more"
-										: "expand_less"
-								}}
-							</i>
-						</button>
-					</div>
-
-					<div
-						v-show="!categoryData.isCollapsed"
-						class="components"
-						:aria-expanded="!categoryData.isCollapsed"
-					>
-						<div
-							v-for="(
-								definition, type
-							) in definitionsByDisplayCategory[category]"
-							:key="type"
-							class="component button"
-							:data-writer-tooltip="definition.description"
-							data-writer-tooltip-placement="right"
-							draggable="true"
-							:data-component-type="type"
-							@dragend="handleDragEnd($event)"
-							@dragstart="handleDragStart($event, type)"
-						>
-							{{ definition.name ?? type }}
-							<i
-								v-if="type.startsWith('custom_')"
-								class="material-symbols-outlined"
-								title="(Custom component template)"
-								>manga</i
-							>
-						</div>
-					</div>
-				</div>
-			</template>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { Ref, computed, inject, ref } from "vue";
-import { useDragDropComponent } from "./useDragDropComponent";
-import injectionKeys from "../injectionKeys";
-import { Component, WriterComponentDefinition } from "@/writerTypes";
-import BuilderSidebarTitleSearch from "./BuilderSidebarTitleSearch.vue";
-
-const wf = inject(injectionKeys.core);
-const ssbm = inject(injectionKeys.builderManager);
-const { removeInsertionCandidacy } = useDragDropComponent(wf);
-
-type CategoryId = "Root" | "Layout" | "Content" | "Input" | "Embed" | "Other";
-
-type CategoryData = {
-	isVisible?: boolean;
-	isCollapsed?: boolean;
-	icon?: string;
-};
-
-const searchQuery = ref("");
-
-const categoriesData: Ref<Record<CategoryId, CategoryData>> = ref({
-	Root: {
-		isVisible: false,
-	},
-	Layout: {
-		icon: "space_dashboard",
-		isCollapsed: false,
-	},
-	Content: {
-		icon: "toc",
-		isCollapsed: false,
-	},
-	Input: {
-		icon: "input",
-		isCollapsed: false,
-	},
-	Embed: {
-		icon: "integration_instructions",
-		isCollapsed: false,
-	},
-	Writer: {
-		icon: "Notes",
-		isCollapsed: false,
-	},
-	Logic: {
-		icon: "Laps",
-		isCollapsed: false,
-	},
-	Other: {
-		icon: "dynamic_feed",
-		isCollapsed: false,
-	},
-});
-
-function shouldDisplayCategory(categoryId: CategoryId): boolean {
-	if (categoriesData.value[categoryId]?.isVisible === false) return false;
-
-	return (
-		Object.keys(definitionsByDisplayCategory.value[categoryId] ?? {})
-			.length > 0
-	);
-}
-
-function toggleCollapseCategory(categoryId: string) {
-	const categoryData = categoriesData.value[categoryId];
-	categoryData.isCollapsed = !categoryData.isCollapsed;
-}
-
-const definitionsByDisplayCategory = computed(() => {
-	const types = wf.getSupportedComponentTypes();
-	const result: Partial<
-		Record<CategoryId, Record<string, WriterComponentDefinition>>
-	> = {};
-
-	types.map((type) => {
-		const definition = wf.getComponentDefinition(type);
-
-		const isToolkitMatch = (definition.toolkit ?? "core") == toolkit.value;
-		if (!isToolkitMatch) return;
-
-		const matchingSearch =
-			searchQuery.value === "" ||
-			definition.name
-				.toLocaleLowerCase()
-				.includes(searchQuery.value.toLocaleLowerCase());
-
-		if (!matchingSearch) return;
-
-		const isMatch = Object.keys(categoriesData.value).includes(
-			definition.category,
-		);
-		let displayCategory: string;
-		if (!isMatch) {
-			displayCategory = "Other";
-		} else {
-			displayCategory = definition.category;
-		}
-		if (!result[displayCategory]) {
-			result[displayCategory] = {};
-		}
-		result[displayCategory][type] = definition;
-	});
-
-	return result;
-});
-
-const toolkit = computed(() => {
-	if (ssbm.getMode() == "workflows") {
-		return "workflows";
-	}
-	return "core";
-});
-
-const handleDragStart = (ev: DragEvent, type: Component["type"]) => {
-	ssbm.setSelection(null);
-	ev.dataTransfer.setData(`application/json;writer=${type},`, "{}");
-};
-
-const handleDragEnd = (ev: DragEvent) => {
-	removeInsertionCandidacy(ev);
-};
-</script>
-
-<style scoped>
-@import "./sharedStyles.css";
-
-.BuilderSidebarToolbar {
-	font-size: 0.7rem;
-}
-
-.categories {
-	padding: 0 12px 12px 12px;
-	flex: 1 1 auto;
-	display: flex;
-	flex-direction: column;
-}
-
-.category .title {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	padding: 8px;
-	gap: 8px;
-}
-
-.category .title h4 {
-	flex: 1 0 auto;
-}
-
-.category .components {
-	padding: 4px 0 4px 0;
-}
-
-.component {
-	padding: 8px;
-	border-radius: 4px;
-	cursor: grab;
-	display: flex;
-	align-items: center;
-	gap: 4px;
-	height: 33px;
-}
-
-.component:hover {
-	background: var(--builderSubtleHighlightColor);
-}
-
-.drop-arrow {
-	/* reset button default */
-	border: none;
-	background-color: unset;
-	padding: 0;
-	margin: 0;
-	height: auto;
-	width: auto;
-
-	border-radius: 50%;
-	min-width: 24px;
-	min-height: 24px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	cursor: pointer;
-}
-
-.drop-arrow:hover {
-	background: var(--builderSubtleSeparatorColor);
-	color: unset;
-}
-</style>
diff --git a/src/ui/src/builder/BuilderSidebarTree.vue b/src/ui/src/builder/BuilderSidebarTree.vue
deleted file mode 100644
index 6118e2178..000000000
--- a/src/ui/src/builder/BuilderSidebarTree.vue
+++ /dev/null
@@ -1,212 +0,0 @@
-<template>
-	<div class="BuilderSidebarTree">
-		<BuilderSidebarTitleSearch
-			v-model="searchQuery"
-			title="Component Tree"
-			icon="account_tree"
-			:disabled="!matchAvailable"
-		>
-			<i
-				:class="{ disabled: !matchAvailable }"
-				class="searchIcon material-symbols-outlined"
-				:data-writer-tooltip="
-					matchAvailable
-						? `Go to match ${previousMatchIndex + 1} of ${matchingComponents.length}`
-						: `Previous match`
-				"
-				data-writer-tooltip-placement="bottom"
-				tabindex="0"
-				@keydown.enter="goToPreviousMatch"
-				@click="goToPreviousMatch"
-			>
-				navigate_before
-			</i>
-			<i
-				:class="{ disabled: !matchAvailable }"
-				class="searchIcon material-symbols-outlined"
-				:data-writer-tooltip="
-					matchAvailable
-						? `Go to match ${nextMatchIndex + 1} of ${matchingComponents.length}`
-						: `Next match`
-				"
-				data-writer-tooltip-placement="bottom"
-				tabindex="0"
-				@keydown.enter="goToNextMatch"
-				@click="goToNextMatch"
-			>
-				navigate_next
-			</i>
-		</BuilderSidebarTitleSearch>
-		<div ref="componentTree" class="components">
-			<div
-				v-for="component in rootComponents"
-				:key="component.id"
-				class="selector"
-			>
-				<BuilderTreeBranch
-					:component-id="component.id"
-					:matching-components="matchingComponents"
-				></BuilderTreeBranch>
-			</div>
-		</div>
-		<div class="add">
-			<button
-				v-if="rootType == 'root'"
-				data-automation-action="add-page"
-				@click="addPage"
-			>
-				<i class="material-symbols-outlined"> add </i>
-				Add Page
-			</button>
-			<button
-				v-if="rootType == 'workflows_root'"
-				data-automation-action="add-workflow"
-				@click="addWorkflow"
-			>
-				<i class="material-symbols-outlined"> add </i>
-				Add Workflow
-			</button>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-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 { watch } from "vue";
-import BuilderSidebarTitleSearch from "./BuilderSidebarTitleSearch.vue";
-
-const wf = inject(injectionKeys.core);
-const ssbm = inject(injectionKeys.builderManager);
-
-const { createAndInsertComponent, goToComponentParentPage } =
-	useComponentActions(wf, ssbm);
-
-const searchQuery: Ref<string> = ref(null);
-const matchIndex: Ref<number> = ref(-1);
-const rootType = computed(() => {
-	let targetType = "root";
-	if (ssbm.getMode() == "workflows") {
-		targetType = "workflows_root";
-	}
-	return targetType;
-});
-const rootComponents = computed(() => {
-	return wf
-		.getComponents(null, { sortedByPosition: true })
-		.filter((c) => c.type == rootType.value);
-});
-
-function determineMatch(component: Component, query: string): boolean {
-	if (component.id.toLocaleLowerCase().includes(query)) return true;
-	if (component.type.toLocaleLowerCase().includes(query)) return true;
-	const typeName = wf.getComponentDefinition(component.type)?.name;
-	if (typeName.includes(query)) return true;
-	const fields = [
-		...Object.values(component.content ?? {}),
-		...Object.values(component.handlers ?? {}),
-		...Object.values(component.binding ?? {}),
-	];
-	for (let i = 0; i < fields.length; i++) {
-		const fieldValue = fields[i]?.toString().toLocaleLowerCase();
-		if (fieldValue?.includes(query)) return true;
-	}
-	return false;
-}
-
-async function selectMatch() {
-	const component = matchingComponents.value?.[matchIndex.value];
-	if (!component) return;
-	goToComponentParentPage(component.id);
-	await nextTick();
-	ssbm.setSelection(component.id, undefined, "tree");
-}
-
-const previousMatchIndex = computed(() => {
-	if (!matchAvailable.value) return -1;
-	let i = matchIndex.value - 1;
-	if (i < 0) {
-		i = matchingComponents.value.length - 1;
-	}
-	return i;
-});
-
-const nextMatchIndex = computed(() => {
-	if (!matchAvailable.value) return -1;
-	let i = matchIndex.value + 1;
-	if (i > matchingComponents.value.length - 1) {
-		i = 0;
-	}
-	return i;
-});
-
-function goToPreviousMatch() {
-	matchIndex.value = previousMatchIndex.value;
-	selectMatch();
-}
-
-function goToNextMatch() {
-	matchIndex.value = nextMatchIndex.value;
-	selectMatch();
-}
-
-const matchingComponents: ComputedRef<Component[]> = computed(() => {
-	if (!searchQuery.value) return;
-	const query = searchQuery.value.toLocaleLowerCase();
-	const components = wf.getComponents();
-	const matching = components.filter((c) => determineMatch(c, query));
-	return matching;
-});
-
-watch(matchingComponents, () => {
-	matchIndex.value = -1;
-});
-
-const matchAvailable: ComputedRef<boolean> = computed(
-	() => matchingComponents.value?.length > 0,
-);
-
-async function addPage() {
-	const pageId = createAndInsertComponent("page", "root");
-	wf.setActivePageId(pageId);
-	await nextTick();
-	ssbm.setSelection(pageId, undefined, "tree");
-}
-
-async function addWorkflow() {
-	const pageId = createAndInsertComponent(
-		"workflows_workflow",
-		"workflows_root",
-	);
-	wf.setActivePageId(pageId);
-	await nextTick();
-	ssbm.setSelection(pageId, undefined, "tree");
-}
-</script>
-
-<style scoped>
-@import "./sharedStyles.css";
-
-.BuilderSidebarTree {
-	user-select: none;
-	position: relative;
-	display: flex;
-	flex-direction: column;
-}
-
-.searchIcon.disabled {
-	color: var(--builderDisabledColor);
-}
-
-.components {
-	padding: 0 12px 12px 12px;
-}
-
-.add {
-	margin-top: auto;
-	padding: 0 16px 16px 16px;
-}
-</style>
diff --git a/src/ui/src/builder/BuilderTreeBranch.vue b/src/ui/src/builder/BuilderTreeBranch.vue
deleted file mode 100644
index 16bfa2712..000000000
--- a/src/ui/src/builder/BuilderTreeBranch.vue
+++ /dev/null
@@ -1,334 +0,0 @@
-<template>
-	<div class="BuilderTreeBranch">
-		<div
-			ref="rootEl"
-			class="main"
-			:class="{
-				selected: isSelected,
-				childless: childless,
-				matching: isMatching,
-			}"
-			:title="summaryText"
-			:data-branch-component-type="component.type"
-			:data-branch-component-id="componentId"
-			tabindex="0"
-			:draggable="isDraggingAllowed(componentId)"
-			@click="selfSelectComponent"
-			@keydown.enter="selfSelectComponent"
-			@dragover="handleDragOver"
-			@dragstart="handleDragStart"
-			@dragend="handleDragEnd"
-			@drop="handleDrop"
-		>
-			<div
-				v-if="!childless"
-				class="toggleChildren"
-				@click="toggleChildrenVisible"
-			>
-				<i v-if="childrenVisible" class="material-symbols-outlined"
-					>expand_less</i
-				>
-				<i v-if="!childrenVisible" class="material-symbols-outlined"
-					>expand_more</i
-				>
-			</div>
-			<span class="type">{{ name }}</span>
-			<template v-if="Object.keys(component.handlers ?? {}).length > 0">
-				&nbsp;&middot;&nbsp;<i class="material-symbols-outlined"
-					>bolt</i
-				>
-			</template>
-			<template v-if="!isComponentVisible(component.id)">
-				&nbsp;&middot;&nbsp;<i class="material-symbols-outlined"
-					>visibility_off</i
-				>
-			</template>
-			<template v-if="component.isCodeManaged">
-				&nbsp;&middot;&nbsp;<i class="material-symbols-outlined"
-					>terminal</i
-				>
-			</template>
-
-			<span v-if="previewText" class="preview">
-				&nbsp;&middot;&nbsp;{{ previewText }}</span
-			>
-		</div>
-		<div v-if="childrenVisible && !childless" class="children">
-			<div
-				v-for="childComponent in childrenComponents.filter(
-					(c) => !c.isCodeManaged,
-				)"
-				:key="childComponent.id"
-				class="child"
-			>
-				<BuilderTreeBranch
-					:component-id="childComponent.id"
-					:matching-components="matchingComponents"
-				></BuilderTreeBranch>
-			</div>
-			<div
-				v-for="childComponent in childrenComponents.filter(
-					(c) => c.isCodeManaged,
-				)"
-				:key="childComponent.id"
-				class="child"
-			>
-				<BuilderTreeBranch
-					:component-id="childComponent.id"
-					:matching-components="matchingComponents"
-				></BuilderTreeBranch>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { useComponentActions } from "./useComponentActions";
-import { useDragDropComponent } from "./useDragDropComponent";
-import { computed, inject, nextTick, Ref, ref, toRefs, watch } from "vue";
-import { Component } from "@/writerTypes";
-import injectionKeys from "../injectionKeys";
-import { onMounted } from "vue";
-import { useEvaluator } from "@/renderer/useEvaluator";
-
-const wf = inject(injectionKeys.core);
-const ssbm = inject(injectionKeys.builderManager);
-
-const {
-	createAndInsertComponent,
-	moveComponent,
-	goToComponentParentPage,
-	isDraggingAllowed,
-} = useComponentActions(wf, ssbm);
-const { getComponentInfoFromDrag, removeInsertionCandidacy, isParentSuitable } =
-	useDragDropComponent(wf);
-const { isComponentVisible } = useEvaluator(wf);
-
-interface Props {
-	componentId: Component["id"];
-	matchingComponents?: Component[];
-}
-
-const props = defineProps<Props>();
-const { componentId, matchingComponents } = toRefs(props);
-const component = computed(() => {
-	return wf.getComponentById(componentId.value);
-});
-
-const isSelectedBySelf = ref(false);
-const rootEl: Ref<HTMLElement> = ref(null);
-
-const componentDefinition = computed(() =>
-	wf.getComponentDefinition(component.value.type),
-);
-
-const name = computed(() => {
-	const name =
-		componentDefinition.value?.name ?? `Unknown (${component.value.type})`;
-	if (component.value.type !== "html") return name;
-	const element = component.value.content?.element;
-	if (element) return `${element}`;
-	return name;
-});
-
-const childless = computed(() => {
-	if (childrenComponents.value.length == 0) return true;
-	if (!componentDefinition.value) return true; // Hide children of unknown component types
-	return false;
-});
-
-const isMatching = computed(() => {
-	if (matchingComponents.value?.some((c) => c.id == componentId.value))
-		return true;
-	return false;
-});
-
-const previewText = computed(() => {
-	const key = componentDefinition.value?.previewField;
-	if (!key) return;
-	const component = wf.getComponentById(componentId.value);
-	const text = component.content?.[key];
-
-	let shortenedText: string;
-	const MAX_PREVIEW_TEXT_LENGTH = 70;
-	if (text?.length > MAX_PREVIEW_TEXT_LENGTH) {
-		shortenedText = text.substring(0, MAX_PREVIEW_TEXT_LENGTH) + "...";
-	} else {
-		shortenedText = text;
-	}
-
-	return shortenedText;
-});
-
-const summaryText = computed(() => {
-	let text = name.value;
-	if (previewText.value) {
-		text += ` · ${previewText.value}`;
-	}
-	text += ` · Position: ${component.value.position}`;
-	return text;
-});
-
-const childrenComponents = computed(() => {
-	return wf.getComponents(componentId.value, { sortedByPosition: true });
-});
-
-const childrenVisible = ref(true);
-
-const toggleChildrenVisible = () => {
-	childrenVisible.value = !childrenVisible.value;
-};
-
-async function selfSelectComponent() {
-	goToComponentParentPage(componentId.value);
-	await nextTick();
-	ssbm.setSelection(componentId.value, undefined, "tree");
-	isSelectedBySelf.value = true;
-}
-
-const selectedId = computed(() => ssbm.getSelectedId());
-const isSelected = computed(() => {
-	return selectedId.value == component.value?.id;
-});
-
-watch(selectedId, (newSelectedId) => {
-	if (!newSelectedId) return;
-	const selected = wf.getComponentById(newSelectedId);
-	let parentId = selected.parentId;
-	while (parentId) {
-		if (parentId === componentId.value) {
-			childrenVisible.value = true;
-			break;
-		}
-		parentId = wf.getComponentById(parentId)?.parentId;
-	}
-});
-
-watch(isSelected, async (newIsSelected) => {
-	if (!newIsSelected) return;
-	if (!isSelectedBySelf.value) {
-		scrollTreeToShowRootElement();
-		return;
-	}
-	isSelectedBySelf.value = false;
-});
-
-const scrollTreeToShowRootElement = () => {
-	if (!rootEl.value) return;
-	const treeEl = rootEl.value.closest(".BuilderSidebarTree");
-	const treeHeight = treeEl.clientHeight;
-	const rootElHeight = rootEl.value.clientHeight;
-	const scrollTop =
-		rootEl.value.offsetTop - (treeHeight / 2 - rootElHeight / 2);
-
-	treeEl.scrollTo({ top: scrollTop, left: 0, behavior: "smooth" });
-};
-
-const handleDragStart = (ev: DragEvent) => {
-	ssbm.setSelection(null);
-	ev.dataTransfer.setData(
-		`application/json;writer=${component.value.type},${component.value.id}`,
-		"{}",
-	);
-};
-
-const handleDragEnd = (ev: DragEvent) => {
-	removeInsertionCandidacy(ev);
-};
-
-const handleDragOver = (ev: DragEvent) => {
-	const dragInfo = getComponentInfoFromDrag(ev);
-	if (!dragInfo) return;
-	const { draggedType, draggedId } = dragInfo;
-	if (!isParentSuitable(componentId.value, draggedId, draggedType)) return;
-	ev.preventDefault();
-};
-
-const handleDrop = (ev: DragEvent) => {
-	const dragInfo = getComponentInfoFromDrag(ev);
-	if (!dragInfo) return;
-	const { draggedType, draggedId } = dragInfo;
-
-	if (!draggedId) {
-		createAndInsertComponent(draggedType, component.value.id);
-	} else {
-		moveComponent(draggedId, component.value.id);
-	}
-
-	removeInsertionCandidacy(ev);
-};
-
-onMounted(() => {
-	if (!isSelected.value) return;
-	scrollTreeToShowRootElement();
-});
-</script>
-
-<style scoped>
-@import "./sharedStyles.css";
-
-.main {
-	padding: 4px 8px 4px 8px;
-	min-height: 32px;
-	font-size: 0.7rem;
-	border-radius: 4px;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-	overflow: hidden;
-	color: rgba(0, 0, 0, 0.5);
-	display: flex;
-	align-items: center;
-	cursor: pointer;
-}
-
-.main.matching {
-	background: var(--builderMatchingColor);
-}
-
-.main.childless {
-	margin-left: 24px;
-}
-
-.toggleChildren {
-	border-radius: 50%;
-	height: 24px;
-	width: 24px;
-	min-width: 24px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	cursor: pointer;
-	margin-right: 4px;
-	margin-left: -4px;
-}
-
-.toggleChildren:hover {
-	background: var(--builderSubtleSeparatorColor);
-}
-
-.selected {
-	background: var(--builderSelectedColor);
-}
-
-.type {
-	color: black;
-}
-
-.preview {
-	font-style: italic;
-}
-
-.main:not(.selected):hover {
-	background: var(--builderSubtleHighlightColor);
-}
-.main:focus {
-	outline: none;
-}
-.main:not(.selected):focus {
-	background: var(--builderSubtleHighlightColor);
-}
-
-.children {
-	margin-left: 12px;
-}
-</style>
diff --git a/src/ui/src/builder/BuilderCodePanel.vue b/src/ui/src/builder/panels/BuilderCodePanel.vue
similarity index 93%
rename from src/ui/src/builder/BuilderCodePanel.vue
rename to src/ui/src/builder/panels/BuilderCodePanel.vue
index ed36ce628..b0f97ae0f 100644
--- a/src/ui/src/builder/BuilderCodePanel.vue
+++ b/src/ui/src/builder/panels/BuilderCodePanel.vue
@@ -24,7 +24,7 @@
 <script setup lang="ts">
 import { computed, defineAsyncComponent, inject, ref, watch } from "vue";
 import BuilderPanel, { type BuilderPanelAction } from "./BuilderPanel.vue";
-import BuilderAsyncLoader from "./BuilderAsyncLoader.vue";
+import BuilderAsyncLoader from "../BuilderAsyncLoader.vue";
 import injectionKeys from "@/injectionKeys";
 
 defineProps<{
@@ -32,13 +32,12 @@ defineProps<{
 }>();
 
 const BuilderEmbeddedCodeEditor = defineAsyncComponent({
-	loader: () => import("./BuilderEmbeddedCodeEditor.vue"),
+	loader: () => import("../BuilderEmbeddedCodeEditor.vue"),
 	loadingComponent: BuilderAsyncLoader,
 });
 
 const wf = inject(injectionKeys.core);
 
-const wfbm = inject(injectionKeys.builderManager);
 const code = ref<string>(wf.runCode.value);
 const status = ref<null | {
 	type: "error" | "success" | "neutral";
diff --git a/src/ui/src/builder/BuilderLogIndicator.vue b/src/ui/src/builder/panels/BuilderLogIndicator.vue
similarity index 97%
rename from src/ui/src/builder/BuilderLogIndicator.vue
rename to src/ui/src/builder/panels/BuilderLogIndicator.vue
index 82df81164..503b729d1 100644
--- a/src/ui/src/builder/BuilderLogIndicator.vue
+++ b/src/ui/src/builder/panels/BuilderLogIndicator.vue
@@ -33,8 +33,6 @@ const entryCountByType = computed(() => {
 </script>
 
 <style scoped>
-@import "./sharedStyles.css";
-
 .BuilderLogIndicator {
 	font-size: 14px;
 	font-weight: 400;
diff --git a/src/ui/src/builder/BuilderLogPanel.vue b/src/ui/src/builder/panels/BuilderLogPanel.vue
similarity index 99%
rename from src/ui/src/builder/BuilderLogPanel.vue
rename to src/ui/src/builder/panels/BuilderLogPanel.vue
index f0b7e2060..e220eebce 100644
--- a/src/ui/src/builder/BuilderLogPanel.vue
+++ b/src/ui/src/builder/panels/BuilderLogPanel.vue
@@ -105,8 +105,6 @@ const logEntries = computed(() => {
 </script>
 
 <style scoped>
-@import "./sharedStyles.css";
-
 .entries {
 	padding: 20px;
 	display: flex;
diff --git a/src/ui/src/builder/BuilderLogWorkflowExecution.vue b/src/ui/src/builder/panels/BuilderLogWorkflowExecution.vue
similarity index 97%
rename from src/ui/src/builder/BuilderLogWorkflowExecution.vue
rename to src/ui/src/builder/panels/BuilderLogWorkflowExecution.vue
index 133fa97a2..f973304db 100644
--- a/src/ui/src/builder/BuilderLogWorkflowExecution.vue
+++ b/src/ui/src/builder/panels/BuilderLogWorkflowExecution.vue
@@ -132,13 +132,13 @@
 <script setup lang="ts">
 import { marked } from "marked";
 import injectionKeys from "@/injectionKeys";
-import { WorkflowExecutionLog } from "./builderManager";
+import { WorkflowExecutionLog } from "../builderManager";
 import { computed, inject, nextTick, ref } from "vue";
 import { Component, WriterComponentDefinition } from "@/writerTypes";
-import { useComponentActions } from "./useComponentActions";
+import { useComponentActions } from "../useComponentActions";
 import SharedJsonViewer from "@/components/shared/SharedJsonViewer/SharedJsonViewer.vue";
 import WdsButton from "@/wds/WdsButton.vue";
-import BuilderModal from "./BuilderModal.vue";
+import BuilderModal from "../BuilderModal.vue";
 
 const wf = inject(injectionKeys.core);
 const wfbm = inject(injectionKeys.builderManager);
@@ -194,8 +194,6 @@ function formatExecutionTime(timeInSeconds: number): string {
 </script>
 
 <style scoped>
-@import "./sharedStyles.css";
-
 .BuilderLogWorkflowExecution {
 	display: flex;
 	flex-direction: column;
diff --git a/src/ui/src/builder/BuilderPanel.vue b/src/ui/src/builder/panels/BuilderPanel.vue
similarity index 100%
rename from src/ui/src/builder/BuilderPanel.vue
rename to src/ui/src/builder/panels/BuilderPanel.vue
diff --git a/src/ui/src/builder/panels/BuilderPanelSwitcher.vue b/src/ui/src/builder/panels/BuilderPanelSwitcher.vue
index cb5839e3d..a151bdf34 100644
--- a/src/ui/src/builder/panels/BuilderPanelSwitcher.vue
+++ b/src/ui/src/builder/panels/BuilderPanelSwitcher.vue
@@ -29,8 +29,8 @@ export type BuilderPanelAction = {
 <script setup lang="ts">
 import injectionKeys from "@/injectionKeys";
 import { inject, ref } from "vue";
-import BuilderCodePanel from "../BuilderCodePanel.vue";
-import BuilderLogPanel from "../BuilderLogPanel.vue";
+import BuilderCodePanel from "./BuilderCodePanel.vue";
+import BuilderLogPanel from "./BuilderLogPanel.vue";
 
 const wfbm = inject(injectionKeys.builderManager);
 
diff --git a/src/ui/src/builder/settings/BuilderSettings.vue b/src/ui/src/builder/settings/BuilderSettings.vue
index 6bd46637a..36477cdfe 100644
--- a/src/ui/src/builder/settings/BuilderSettings.vue
+++ b/src/ui/src/builder/settings/BuilderSettings.vue
@@ -22,6 +22,7 @@
 				variant="neutral"
 				data-writer-tooltip-placement="left"
 				data-writer-tooltip="Collapse settings"
+				data-automation-action="collapse-settings"
 				@click="toggleSettings"
 				><i class="material-symbols-outlined"
 					>double_arrow</i

From 4d08da1052adec62cfc30c823ed87de6df6e77b0 Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Thu, 28 Nov 2024 20:43:21 +0000
Subject: [PATCH 09/19] fix: E2E tests new action collapse settings

---
 tests/e2e/tests/reuse.spec.ts     | 16 ++++++++--------
 tests/e2e/tests/undoRedo.spec.ts  |  6 +++---
 tests/e2e/tests/workflows.spec.ts |  2 +-
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/tests/e2e/tests/reuse.spec.ts b/tests/e2e/tests/reuse.spec.ts
index c24a49fed..6b7527b0a 100644
--- a/tests/e2e/tests/reuse.spec.ts
+++ b/tests/e2e/tests/reuse.spec.ts
@@ -44,13 +44,13 @@ test.describe("Reuse component", () => {
 		return await getSelectedComponentId(page);
 	};
 
-	const closeSettingsBar = async (page: Page) => {
-		await page.locator('[data-automation-action="close-settings"]').click();
+	const collapseSettingsBar = async (page: Page) => {
+		await page.locator('[data-automation-action="collapse-settings"]').click();
 	}
 
 	const removeComponent = async (page: Page, selector: string) => {
 		await page.locator(".CorePage").click();
-		await closeSettingsBar(page);
+		await collapseSettingsBar(page);
 		await page.locator(selector).click();
 		await page
 			.locator(
@@ -110,11 +110,11 @@ test.describe("Reuse component", () => {
 
 		test("reuse in incorect context", async ({ page }) => {
 			const id = await createSidebar(page);
-			await closeSettingsBar(page);
+			await collapseSettingsBar(page);
 			await createReuseable(page);
-			await closeSettingsBar(page);
+			await collapseSettingsBar(page);
 			await setReuseTarget(page, id);
-			await closeSettingsBar(page);
+			await collapseSettingsBar(page);
 			await expect(page.locator(COMPONENT_LOCATOR)).toHaveClass(/invalid-context/);
 		});
 	});
@@ -204,7 +204,7 @@ test.describe("Reuse component", () => {
 
 		test("create, drag and drop and remove", async ({ page }) => {
 			await createReuseable(page, COLUMN1);
-			await closeSettingsBar(page);
+			await collapseSettingsBar(page);
 			await moveFromTo(page, COMPONENT_LOCATOR, COLUMN1, COLUMN2);
 			await removeComponent(page, COMPONENT_LOCATOR);
 		});
@@ -213,7 +213,7 @@ test.describe("Reuse component", () => {
 			const id = await createText(page, '.CorePage');
 			await createReuseable(page, COLUMN1);
 			await setReuseTarget(page, id);
-			await closeSettingsBar(page);
+			await collapseSettingsBar(page);
 			await moveFromTo(page, COMPONENT_LOCATOR, COLUMN1, COLUMN2);
 			await removeComponent(page, COMPONENT_LOCATOR);
 			await removeComponent(page, '.CoreText');
diff --git a/tests/e2e/tests/undoRedo.spec.ts b/tests/e2e/tests/undoRedo.spec.ts
index 99e023372..c7134ec93 100644
--- a/tests/e2e/tests/undoRedo.spec.ts
+++ b/tests/e2e/tests/undoRedo.spec.ts
@@ -7,8 +7,8 @@ test.describe('undo and redo', () => {
 	const COLUMN2 = ".CoreColumns .CoreColumn:nth-child(2 of .CoreColumn)";
 	let url: string;
 
-	const closeSettingsBar = async (page: Page) => {
-		await page.locator('.BuilderSettings button[data-automation-action="close-settings"]').click();
+	const collapseSettingsBar = async (page: Page) => {
+		await page.locator('.BuilderSettings button[data-automation-action="collapse-settings"]').click();
 	}
 
 	test.beforeAll(async ({ request }) => {
@@ -54,7 +54,7 @@ test.describe('undo and redo', () => {
 		await page
 			.locator('.BuilderFieldsText[data-automation-key="text"] input')
 			.fill('cool text');
-		await closeSettingsBar(page);
+		await collapseSettingsBar(page);
 		await page.locator("button.undo").click();
 		await expect(page.locator(COMPONENT_LOCATOR)).toHaveText('Button Text')
 		await page.locator("button.redo").click();
diff --git a/tests/e2e/tests/workflows.spec.ts b/tests/e2e/tests/workflows.spec.ts
index 41237c906..bfb086934 100644
--- a/tests/e2e/tests/workflows.spec.ts
+++ b/tests/e2e/tests/workflows.spec.ts
@@ -83,7 +83,7 @@ test.describe("Workflows", () => {
 			}
 		};
 		await page.locator(`.BuilderFieldsObject[data-automation-key="executionEnv"] textarea`).fill(JSON.stringify(executionEnv));
-		await page.locator(`[data-automation-action="close-settings"]`).click();
+		await page.locator(`[data-automation-action="collapse-settings"]`).click();
 
 		await runWorkflowBlock.locator(".ball.success").dragTo(returnValueBlock);
 

From ffc8c400fb40d81b28dd633d022cfbc50589fd0f Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Fri, 29 Nov 2024 11:01:34 +0100
Subject: [PATCH 10/19] fix: E2E tests

---
 src/ui/src/builder/panels/BuilderLogPanel.vue | 17 --------
 .../panels/BuilderLogWorkflowExecution.vue    |  2 +
 src/ui/src/builder/panels/BuilderPanel.vue    |  2 +
 .../src/builder/settings/BuilderSettings.vue  |  1 +
 .../BuilderSidebarComponentTreeBranch.vue     |  1 +
 .../builder/sidebar/BuilderSidebarPanel.vue   |  1 +
 tests/e2e/tests/button.spec.ts                |  2 +-
 tests/e2e/tests/components.spec.ts            |  8 ++--
 tests/e2e/tests/image.spec.ts                 |  2 +-
 tests/e2e/tests/lowCode.spec.ts               |  8 ++--
 tests/e2e/tests/reuse.spec.ts                 | 19 ++++++---
 tests/e2e/tests/sidebar.spec.ts               | 41 +++----------------
 tests/e2e/tests/stateAutocompletion.spec.ts   | 12 +++---
 tests/e2e/tests/undoRedo.spec.ts              |  4 +-
 tests/e2e/tests/workflows.spec.ts             |  8 ++--
 15 files changed, 48 insertions(+), 80 deletions(-)

diff --git a/src/ui/src/builder/panels/BuilderLogPanel.vue b/src/ui/src/builder/panels/BuilderLogPanel.vue
index e220eebce..62d23fa51 100644
--- a/src/ui/src/builder/panels/BuilderLogPanel.vue
+++ b/src/ui/src/builder/panels/BuilderLogPanel.vue
@@ -52,23 +52,6 @@
 				entries.
 			</div>
 		</div>
-		<!-- <div v-for="(logEntry, index) in logEntries" :key="index" class="entry">
-			<div class="icon" :class="logEntry.type"></div>
-			<div class="content">
-				<div class="header">
-					<span class="title"
-						></span
-					>
-					<span class="time"></span>
-				</div>
-				<div class="message">
-					{{ logEntry.message }}
-					<div v-if="logEntry.code" class="codeContainer">
-						<code>{{ logEntry.code }}</code>
-					</div>
-				</div>
-			</div>
-		</div> -->
 	</BuilderPanel>
 </template>
 
diff --git a/src/ui/src/builder/panels/BuilderLogWorkflowExecution.vue b/src/ui/src/builder/panels/BuilderLogWorkflowExecution.vue
index f973304db..dcb845ee5 100644
--- a/src/ui/src/builder/panels/BuilderLogWorkflowExecution.vue
+++ b/src/ui/src/builder/panels/BuilderLogWorkflowExecution.vue
@@ -194,6 +194,8 @@ function formatExecutionTime(timeInSeconds: number): string {
 </script>
 
 <style scoped>
+@import "../sharedStyles.css";
+
 .BuilderLogWorkflowExecution {
 	display: flex;
 	flex-direction: column;
diff --git a/src/ui/src/builder/panels/BuilderPanel.vue b/src/ui/src/builder/panels/BuilderPanel.vue
index ad2a419c7..11791069f 100644
--- a/src/ui/src/builder/panels/BuilderPanel.vue
+++ b/src/ui/src/builder/panels/BuilderPanel.vue
@@ -4,6 +4,8 @@
 			<WdsButton
 				variant="neutral"
 				size="icon"
+				data-automation-action="toggle-panel"
+				:data-automation-key="panelId"
 				@click="togglePanel(panelId)"
 			>
 				<i class="material-symbols-outlined">{{
diff --git a/src/ui/src/builder/settings/BuilderSettings.vue b/src/ui/src/builder/settings/BuilderSettings.vue
index 36477cdfe..1698c787d 100644
--- a/src/ui/src/builder/settings/BuilderSettings.vue
+++ b/src/ui/src/builder/settings/BuilderSettings.vue
@@ -12,6 +12,7 @@
 				variant="neutral"
 				data-writer-tooltip-placement="left"
 				data-writer-tooltip="Expand settings"
+				data-automation-action="expand-settings"
 				@click="toggleSettings"
 				><i class="material-symbols-outlined">settings</i></WdsButton
 			>
diff --git a/src/ui/src/builder/sidebar/BuilderSidebarComponentTreeBranch.vue b/src/ui/src/builder/sidebar/BuilderSidebarComponentTreeBranch.vue
index 5f46e2f07..a3e168119 100644
--- a/src/ui/src/builder/sidebar/BuilderSidebarComponentTreeBranch.vue
+++ b/src/ui/src/builder/sidebar/BuilderSidebarComponentTreeBranch.vue
@@ -5,6 +5,7 @@
 			:class="{ selected, notMatched, childless }"
 			tabindex="0"
 			:draggable="isDraggingAllowed(componentId)"
+			:data-automation-key="component.type"
 			@click="select"
 			@keydown.enter="select"
 			@dragover="handleDragOver"
diff --git a/src/ui/src/builder/sidebar/BuilderSidebarPanel.vue b/src/ui/src/builder/sidebar/BuilderSidebarPanel.vue
index 947d670fe..2d4bc4457 100644
--- a/src/ui/src/builder/sidebar/BuilderSidebarPanel.vue
+++ b/src/ui/src/builder/sidebar/BuilderSidebarPanel.vue
@@ -5,6 +5,7 @@
 				v-model="model"
 				class="searchInput"
 				left-icon="search"
+				data-automation-action="search"
 				:placeholder="placeholder"
 			></WdsTextInput>
 		</div>
diff --git a/tests/e2e/tests/button.spec.ts b/tests/e2e/tests/button.spec.ts
index 5adb10859..ada420843 100644
--- a/tests/e2e/tests/button.spec.ts
+++ b/tests/e2e/tests/button.spec.ts
@@ -22,7 +22,7 @@ test.describe("button", () => {
 
 	test("configure", async ({ page }) => {
 		await page
-			.locator(`div.component.button[data-component-type="${TYPE}"]`)
+			.locator(`.BuilderSidebarToolkit [data-component-type="${TYPE}"]`)
 			.dragTo(page.locator(".CoreSection .ChildlessPlaceholder"));
 		await page.locator(COMPONENT_LOCATOR).click();
 		await page
diff --git a/tests/e2e/tests/components.spec.ts b/tests/e2e/tests/components.spec.ts
index f4f315e5d..20cf31396 100644
--- a/tests/e2e/tests/components.spec.ts
+++ b/tests/e2e/tests/components.spec.ts
@@ -101,7 +101,7 @@ function fullTest({type, locator}: ComponentTestData) {
 
 		test("create, drag and drop and remove", async ({ page }) => {
 			await page
-				.locator(`div.component.button[data-component-type="${TYPE}"]`)
+				.locator(`.BuilderSidebarToolkit [data-component-type="${TYPE}"]`)
 				.dragTo(page.locator(COLUMN1));
 			await expect(
 				page.locator(COLUMN1 + " " + COMPONENT_LOCATOR),
@@ -121,7 +121,7 @@ function fullTest({type, locator}: ComponentTestData) {
 			await page.locator(COMPONENT_LOCATOR).click();
 			await page
 				.locator(
-					'.BuilderComponentShortcuts .actionButton[data-automation-action="delete"]',
+					'.BuilderSettingsActions .actionButton[data-automation-action="delete"]',
 				)
 				.click();
 			await expect(page.locator(COMPONENT_LOCATOR)).not.toBeVisible();
@@ -153,7 +153,7 @@ function basicTest({type, locator}: ComponentTestData) {
 
 		test("create and remove", async ({ page }) => {
 			await page
-				.locator(`div.component.button[data-component-type="${TYPE}"]`)
+				.locator(`.BuilderSidebarToolkit [data-component-type="${TYPE}"]`)
 				.dragTo(page.locator(TARGET));
 			await expect(
 				page.locator(TARGET + " " + COMPONENT_LOCATOR),
@@ -162,7 +162,7 @@ function basicTest({type, locator}: ComponentTestData) {
 			await page.locator(COMPONENT_LOCATOR).click();
 			await page
 				.locator(
-					'.BuilderComponentShortcuts .actionButton[data-automation-action="delete"]',
+					'.BuilderSettingsActions .actionButton[data-automation-action="delete"]',
 				)
 				.click();
 			await expect(page.locator(COMPONENT_LOCATOR)).toHaveCount(0);
diff --git a/tests/e2e/tests/image.spec.ts b/tests/e2e/tests/image.spec.ts
index 71b255020..2362ab30c 100644
--- a/tests/e2e/tests/image.spec.ts
+++ b/tests/e2e/tests/image.spec.ts
@@ -21,7 +21,7 @@ test.describe("image", () => {
 
 	test("configure", async ({ page }) => {
 		await page
-			.locator(`div.component.button[data-component-type="${TYPE}"]`)
+			.locator(`.BuilderSidebarToolkit [data-component-type="${TYPE}"]`)
 			.dragTo(page.locator(".CoreSection .ChildlessPlaceholder"));
 		await page.locator(COMPONENT_LOCATOR).click();
 		await page
diff --git a/tests/e2e/tests/lowCode.spec.ts b/tests/e2e/tests/lowCode.spec.ts
index 3490bbf3e..943dd21e5 100644
--- a/tests/e2e/tests/lowCode.spec.ts
+++ b/tests/e2e/tests/lowCode.spec.ts
@@ -93,8 +93,8 @@ with ui.find('results'):
 	});
 	test("settings should be enabled for bmc", async ({ page }) => {
 			await page.locator(`.results`).click({force: true});
-			await expect(page.locator(`.BuilderSettings > .sections`)).not.toHaveAttribute("inert");
-			await expect(page.locator(`.BuilderSettings > .cmc-warning`)).toHaveCount(0);
+			await expect(page.locator(`.BuilderSettingsMain > .sections:not(.debug)`)).not.toHaveAttribute("inert");
+			await expect(page.locator(`.BuilderSettingsMain > .cmc-warning`)).toHaveCount(0);
 	});
 
 	test("settings should be disabled for cmc", async ({ page }) => {
@@ -104,8 +104,8 @@ with ui.find('results'):
 			`);
 			await execute(page);
 			await page.locator(`.results .wf-type-text.component.out`).click({force: true});
-			await expect(page.locator(`.BuilderSettings > .sections`)).toHaveAttribute("inert");
-			await expect(page.locator(`.BuilderSettings > .cmc-warning`)).toHaveCount(1);
+			await expect(page.locator(`.BuilderSettingsMain > .sections:not(.debug)`)).toHaveAttribute("inert");
+			await expect(page.locator(`.BuilderSettingsMain > .cmc-warning`)).toHaveCount(1);
 	});
 
 	test("create nested components", async ({ page }) => {
diff --git a/tests/e2e/tests/reuse.spec.ts b/tests/e2e/tests/reuse.spec.ts
index 6b7527b0a..a04419e43 100644
--- a/tests/e2e/tests/reuse.spec.ts
+++ b/tests/e2e/tests/reuse.spec.ts
@@ -12,7 +12,7 @@ test.describe("Reuse component", () => {
 
 	const dragNewComponent = async (page: Page, type: string, where = ".CoreSection") => {
 		await page
-			.locator(`div.component.button[data-component-type="${type}"]`)
+			.locator(`.BuilderSidebarToolkit [data-component-type="${type}"]`)
 			.dragTo(page.locator(where));
 	}
 
@@ -45,16 +45,24 @@ test.describe("Reuse component", () => {
 	};
 
 	const collapseSettingsBar = async (page: Page) => {
-		await page.locator('[data-automation-action="collapse-settings"]').click();
+		const collapseSettingsLocator = page.locator('[data-automation-action="collapse-settings"]');
+
+		if (await collapseSettingsLocator.count() > 0) {
+			await collapseSettingsLocator.click();
+		}
+	}
+
+	const expandSettingsBar = async (page: Page) => {
+		await page.locator('[data-automation-action="expand-settings"]').click();
 	}
 
 	const removeComponent = async (page: Page, selector: string) => {
 		await page.locator(".CorePage").click();
-		await collapseSettingsBar(page);
+		collapseSettingsBar(page);
 		await page.locator(selector).click();
 		await page
 			.locator(
-				'.BuilderComponentShortcuts .actionButton[data-automation-action="delete"]',
+				'.BuilderSettingsActions .actionButton[data-automation-action="delete"]',
 			)
 			.click();
 		await expect(page.locator(selector)).not.toBeVisible();
@@ -112,9 +120,8 @@ test.describe("Reuse component", () => {
 			const id = await createSidebar(page);
 			await collapseSettingsBar(page);
 			await createReuseable(page);
-			await collapseSettingsBar(page);
+			await expandSettingsBar(page);
 			await setReuseTarget(page, id);
-			await collapseSettingsBar(page);
 			await expect(page.locator(COMPONENT_LOCATOR)).toHaveClass(/invalid-context/);
 		});
 	});
diff --git a/tests/e2e/tests/sidebar.spec.ts b/tests/e2e/tests/sidebar.spec.ts
index bc8067a23..bb0bae062 100644
--- a/tests/e2e/tests/sidebar.spec.ts
+++ b/tests/e2e/tests/sidebar.spec.ts
@@ -23,57 +23,28 @@ test.describe("sidebar", () => {
 			// click on icon to begin search
 			await page
 				.locator(
-					`.BuilderSidebarToolbar .BuilderSidebarTitleSearch [data-automation-action="search"]`,
+					`.BuilderSidebarToolkit input`,
 				)
 				.click();
 
 			// search a button
 			await page
-				.locator(`.BuilderSidebarToolbar .BuilderSidebarTitleSearch input`)
+				.locator(`.BuilderSidebarToolkit input`)
 				.fill("button");
 
 			// should have only one result
 			expect(
-				await page.locator(`.BuilderSidebarToolbar .component`).count(),
+				await page.locator(`.BuilderSidebarToolkit .tool`).count(),
 			).toBe(1);
 
-			// close search
-			await page
-				.locator(
-					`.BuilderSidebarToolbar .BuilderSidebarTitleSearch [data-automation-action="close"]`,
-				)
-				.click();
-
-			// should reset the search
-			expect(
-				await page.locator(`.BuilderSidebarToolbar .component`).count(),
-			).not.toBe(1);
-		});
-
-		test("should be compatible with keyboard navigation", async ({ page }) => {
-			// click on icon to begin search
-			await page
-				.locator(
-					`.BuilderSidebarToolbar .BuilderSidebarTitleSearch [data-automation-action="search"]`,
-				)
-				.click();
-
 			// search a button
 			await page
-				.locator(`.BuilderSidebarToolbar .BuilderSidebarTitleSearch input`)
-				.fill("button");
-
-			// should have only one result
-			expect(
-				await page.locator(`.BuilderSidebarToolbar .component`).count(),
-			).toBe(1);
-
-			await page.keyboard.press("Tab");
-			await page.keyboard.press("Enter");
+				.locator(`.BuilderSidebarToolkit input`)
+				.fill("");
 
 			// should reset the search
 			expect(
-				await page.locator(`.BuilderSidebarToolbar .component`).count(),
+				await page.locator(`.BuilderSidebarToolkit .tool`).count(),
 			).not.toBe(1);
 		});
 	});
diff --git a/tests/e2e/tests/stateAutocompletion.spec.ts b/tests/e2e/tests/stateAutocompletion.spec.ts
index 8ab514c41..b8a624cc9 100644
--- a/tests/e2e/tests/stateAutocompletion.spec.ts
+++ b/tests/e2e/tests/stateAutocompletion.spec.ts
@@ -66,7 +66,7 @@ test.describe("state autocompletion", () => {
 		test("Static List - completion", async ({ page }) => {
 			const FIELD = `.BuilderFieldsOptions[data-automation-key="options"]`;
 			await page
-				.locator(`div.component.button[data-component-type="radioinput"]`)
+				.locator(`.BuilderSidebarToolkit [data-component-type="radioinput"]`)
 				.dragTo(page.locator(".CorePage"));
 
 			await page.locator('div.CoreRadioInput.component > label').click();
@@ -97,7 +97,7 @@ test.describe("state autocompletion", () => {
 		test("JSON - completion", async ({ page }) => {
 			const FIELD = `.BuilderFieldsOptions[data-automation-key="options"]`;
 			await page
-				.locator(`div.component.button[data-component-type="radioinput"]`)
+				.locator(`.BuilderSidebarToolkit [data-component-type="radioinput"]`)
 				.dragTo(page.locator(".CorePage"));
 
 			await page.locator('div.CoreRadioInput.component > label').click();
@@ -137,8 +137,8 @@ test.describe("state autocompletion", () => {
 	}
 
 	testFieldType("BuilderFieldsColor", "primaryTextColor", 'div.CoreText.component');
-	testFieldType("BuilderFieldsShadow", "buttonShadow", '.BuilderTreeBranch [data-branch-component-type="root"]');
-	testFieldType("BuilderFieldsAlign", "contentHAlign", '.BuilderTreeBranch [data-branch-component-type="root"]');
-	testFieldType("BuilderFieldsPadding", "contentPadding", '.BuilderTreeBranch [data-branch-component-type="root"]');
-	testFieldType("BuilderFieldsWidth", "contentWidth", '.BuilderTreeBranch [data-branch-component-type="root"]');
+	testFieldType("BuilderFieldsShadow", "buttonShadow", '.BuilderSidebarComponentTreeBranch [data-automation-key="root"]');
+	testFieldType("BuilderFieldsAlign", "contentHAlign", '.BuilderSidebarComponentTreeBranch [data-automation-key="root"]');
+	testFieldType("BuilderFieldsPadding", "contentPadding", '.BuilderSidebarComponentTreeBranch [data-automation-key="root"]');
+	testFieldType("BuilderFieldsWidth", "contentWidth", '.BuilderSidebarComponentTreeBranch [data-automation-key="root"]');
 });
diff --git a/tests/e2e/tests/undoRedo.spec.ts b/tests/e2e/tests/undoRedo.spec.ts
index c7134ec93..b9ebc4468 100644
--- a/tests/e2e/tests/undoRedo.spec.ts
+++ b/tests/e2e/tests/undoRedo.spec.ts
@@ -27,7 +27,7 @@ test.describe('undo and redo', () => {
 
 	test("create, drag and drop, property change and remove", async ({ page }) => {
 		await page
-			.locator(`div.component.button[data-component-type="${TYPE}"]`)
+			.locator(`.BuilderSidebarToolkit [data-component-type="${TYPE}"]`)
 			.dragTo(page.locator(COLUMN1));
 		await page.locator("button.undo").click();
 		await expect(page.locator(COMPONENT_LOCATOR)).toHaveCount(0)
@@ -63,7 +63,7 @@ test.describe('undo and redo', () => {
 		await page.locator(COMPONENT_LOCATOR).click();
 		await page
 			.locator(
-				'.BuilderComponentShortcuts .actionButton[data-automation-action="delete"]',
+				'.BuilderSettingsActions .actionButton[data-automation-action="delete"]',
 			)
 			.click();
 		await page.locator("button.undo").click();
diff --git a/tests/e2e/tests/workflows.spec.ts b/tests/e2e/tests/workflows.spec.ts
index bfb086934..1ba64c858 100644
--- a/tests/e2e/tests/workflows.spec.ts
+++ b/tests/e2e/tests/workflows.spec.ts
@@ -27,7 +27,7 @@ test.describe("Workflows", () => {
 			page,
 		}) => {
 			await page.getByPlaceholder(object).fill(color);
-			await page.locator(`[data-automation-action="toggle-log-panel"]`).click();
+			await page.locator(`[data-automation-action="toggle-panel"][data-automation-key="log"]`).click();
 			const rowLocator = page
 				.locator(".BuilderLogPanel div.row")
 				.filter({ hasText: "Return value" });
@@ -56,7 +56,7 @@ test.describe("Workflows", () => {
 
 		await page
 			.locator(
-				`div.component.button[data-component-type="workflows_runworkflow"]`,
+				`.BuilderSidebarToolkit [data-component-type="workflows_runworkflow"]`,
 			)
 			.dragTo(page.locator(".WorkflowsWorkflow"), {
 				targetPosition: { x: 100, y: 100 },
@@ -65,7 +65,7 @@ test.describe("Workflows", () => {
 
 		await page
 			.locator(
-				`div.component.button[data-component-type="workflows_returnvalue"]`,
+				`.BuilderSidebarToolkit [data-component-type="workflows_returnvalue"]`,
 			)
 			.dragTo(page.locator(".WorkflowsWorkflow"), {
 				targetPosition: { x: 400, y: 100 },
@@ -92,7 +92,7 @@ test.describe("Workflows", () => {
 
 		await page.locator(`[data-automation-action="run-workflow"]`).click();
 
-		await page.locator(`[data-automation-action="toggle-log-panel"]`).click();
+		await page.locator(`[data-automation-action="toggle-panel"][data-automation-key="log"]`).click();
 		const rowLocator = page
 			.locator(".BuilderLogPanel div.row")
 			.filter({ hasText: "Return value" }).first();;

From 39ee8f2426b76c8a8219b087a748a46d1cca8828 Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Fri, 29 Nov 2024 11:16:35 +0100
Subject: [PATCH 11/19] fix: E2E tests

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

diff --git a/tests/e2e/tests/workflows.spec.ts b/tests/e2e/tests/workflows.spec.ts
index 1ba64c858..67160107b 100644
--- a/tests/e2e/tests/workflows.spec.ts
+++ b/tests/e2e/tests/workflows.spec.ts
@@ -29,7 +29,7 @@ test.describe("Workflows", () => {
 			await page.getByPlaceholder(object).fill(color);
 			await page.locator(`[data-automation-action="toggle-panel"][data-automation-key="log"]`).click();
 			const rowLocator = page
-				.locator(".BuilderLogPanel div.row")
+				.locator(".BuilderPanelSwitcher div.row")
 				.filter({ hasText: "Return value" });
 			await rowLocator.getByRole("button", { name: "Details" }).click();
 			const resultsLocator = page.locator(
@@ -94,7 +94,7 @@ test.describe("Workflows", () => {
 
 		await page.locator(`[data-automation-action="toggle-panel"][data-automation-key="log"]`).click();
 		const rowLocator = page
-			.locator(".BuilderLogPanel div.row")
+			.locator(".BuilderPanelSwitcher div.row")
 			.filter({ hasText: "Return value" }).first();;
 		await rowLocator.getByRole("button", { name: "Details" }).click();
 		const returnValueLocator = page.locator(

From 764e8b670893854d53d10129759e1de0b313b9c0 Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Fri, 29 Nov 2024 13:09:55 +0000
Subject: [PATCH 12/19] fix: v-for index problem when deleting first element

---
 src/ui/src/components/core/root/CoreRoot.vue      | 2 +-
 src/ui/src/components/workflows/WorkflowsRoot.vue | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/ui/src/components/core/root/CoreRoot.vue b/src/ui/src/components/core/root/CoreRoot.vue
index b4239d1ac..3b45f64cb 100644
--- a/src/ui/src/components/core/root/CoreRoot.vue
+++ b/src/ui/src/components/core/root/CoreRoot.vue
@@ -1,6 +1,6 @@
 <template>
 	<div ref="rootEl" class="CoreRoot" data-writer-container>
-		<template v-for="(vnode, index) in getChildrenVNodes()" :key="index">
+		<template v-for="vnode in getChildrenVNodes()" :key="vnode.key">
 			<component
 				:is="vnode"
 				v-if="vnode.key === `${displayedPageId}:0`"
diff --git a/src/ui/src/components/workflows/WorkflowsRoot.vue b/src/ui/src/components/workflows/WorkflowsRoot.vue
index f0676d785..d294acba6 100644
--- a/src/ui/src/components/workflows/WorkflowsRoot.vue
+++ b/src/ui/src/components/workflows/WorkflowsRoot.vue
@@ -1,6 +1,6 @@
 <template>
 	<div ref="rootEl" class="WorkflowsRoot" data-writer-container>
-		<template v-for="(vnode, index) in getChildrenVNodes()" :key="index">
+		<template v-for="vnode in getChildrenVNodes()" :key="vnode.key">
 			<component
 				:is="vnode"
 				v-if="vnode.key === `${displayedWorkflowId}:0`"
@@ -40,10 +40,11 @@ const displayedWorkflowId = computed(() => {
 
 	const pageComponents = wf.getComponents("workflows_root", {
 		includeBMC: true,
-		includeCMC: true,
+		includeCMC: false,
 		sortedByPosition: true,
 	});
 	if (pageComponents.length == 0) return null;
+
 	return pageComponents[0].id;
 });
 </script>

From b66be678ed4fc65335571316cf1505666366329d Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Fri, 29 Nov 2024 13:10:21 +0000
Subject: [PATCH 13/19] chore: Button cleanup use WDS

---
 src/ui/src/builder/BuilderModal.vue           | 21 +++++---
 .../src/builder/panels/BuilderCodePanel.vue   |  1 +
 src/ui/src/builder/panels/BuilderLogPanel.vue |  1 +
 .../panels/BuilderLogWorkflowExecution.vue    |  9 ++--
 src/ui/src/builder/panels/BuilderPanel.vue    | 23 +++++---
 .../builder/panels/BuilderPanelSwitcher.vue   |  1 -
 .../src/builder/settings/BuilderSettings.vue  | 13 ++---
 .../settings/BuilderSettingsActions.vue       | 11 +---
 .../workflows/base/WorkflowNavigator.vue      | 12 ++---
 src/ui/src/wds/WdsButton.vue                  | 53 ++++++++++++-------
 10 files changed, 82 insertions(+), 63 deletions(-)

diff --git a/src/ui/src/builder/BuilderModal.vue b/src/ui/src/builder/BuilderModal.vue
index db34a6278..62cbf4a4d 100644
--- a/src/ui/src/builder/BuilderModal.vue
+++ b/src/ui/src/builder/BuilderModal.vue
@@ -8,24 +8,28 @@
 						icon
 					}}</i>
 					<h2>{{ modalTitle }}</h2>
-					<button
+					<WdsButton
+						variant="neutral"
+						size="icon"
 						:title="closeAction?.desc ?? 'Close'"
 						@click="closeAction.fn"
 					>
 						<i class="material-symbols-outlined">close</i>
-					</button>
+					</WdsButton>
 				</div>
 				<div class="slotContainer">
 					<slot></slot>
 				</div>
 				<div v-if="menuActions?.length > 0" class="actionContainer">
-					<button
+					<WdsButton
 						v-for="(action, index) in menuActions"
 						:key="index"
+						variant="primary"
+						size="small"
 						@click="action.fn"
 					>
 						{{ action.desc }}
-					</button>
+					</WdsButton>
 				</div>
 			</div>
 		</div>
@@ -33,6 +37,7 @@
 </template>
 
 <script setup lang="ts">
+import WdsButton from "@/wds/WdsButton.vue";
 import { toRefs } from "vue";
 
 export type ModalAction = {
@@ -73,14 +78,14 @@ const handleKeydown = (ev: KeyboardEvent) => {
 	width: 80%;
 	overflow: hidden;
 	max-width: 120ch;
-	border-radius: 8px;
-	box-shadow: 0 0 16px 4px rgba(0, 0, 0, 0.3);
+	border-radius: 12px;
+	box-shadow: 0px 3px 40px 0px rgba(172, 185, 220, 0.4);
 }
 
 .titleContainer {
 	border-bottom: 1px solid var(--builderSubtleSeparatorColor);
-	padding: 10px 10px 10px 16px;
-	gap: 16px;
+	padding: 8px 8px 8px 16px;
+	gap: 12px;
 	display: flex;
 	align-items: center;
 	font-size: 1rem;
diff --git a/src/ui/src/builder/panels/BuilderCodePanel.vue b/src/ui/src/builder/panels/BuilderCodePanel.vue
index b0f97ae0f..e7d830c70 100644
--- a/src/ui/src/builder/panels/BuilderCodePanel.vue
+++ b/src/ui/src/builder/panels/BuilderCodePanel.vue
@@ -4,6 +4,7 @@
 		name="Code"
 		:contents-teleport-el="contentsTeleportEl"
 		:actions="actions"
+		:scrollable="false"
 		class="BuilderCodePanel"
 	>
 		<BuilderEmbeddedCodeEditor
diff --git a/src/ui/src/builder/panels/BuilderLogPanel.vue b/src/ui/src/builder/panels/BuilderLogPanel.vue
index 62d23fa51..e8cafce21 100644
--- a/src/ui/src/builder/panels/BuilderLogPanel.vue
+++ b/src/ui/src/builder/panels/BuilderLogPanel.vue
@@ -4,6 +4,7 @@
 		name="Log"
 		:contents-teleport-el="contentsTeleportEl"
 		:actions="actions"
+		:scrollable="true"
 		class="BuilderLogPanel"
 	>
 		<template #titleCompanion>
diff --git a/src/ui/src/builder/panels/BuilderLogWorkflowExecution.vue b/src/ui/src/builder/panels/BuilderLogWorkflowExecution.vue
index dcb845ee5..805fda66c 100644
--- a/src/ui/src/builder/panels/BuilderLogWorkflowExecution.vue
+++ b/src/ui/src/builder/panels/BuilderLogWorkflowExecution.vue
@@ -12,8 +12,8 @@
 					{{ item.componentDef.name }}
 					<WdsButton
 						variant="neutral"
-						size="unpadded"
-						title="Go to node"
+						size="smallIcon"
+						data-writer-tooltip="Jump to this block"
 						@click="selectBlock(item.componentId)"
 					>
 						<i class="material-symbols-outlined">jump_to_element</i>
@@ -108,7 +108,7 @@
 							item.returnValue ||
 							item.executionEnvironment
 						"
-						variant="secondary"
+						variant="special"
 						size="small"
 						@click="() => (displayedItemId = itemId)"
 					>
@@ -235,8 +235,9 @@ function formatExecutionTime(timeInSeconds: number): string {
 	grid-column: 2 / 3;
 	grid-row: 1 / 3;
 	display: grid;
-	grid-template-columns: 1fr 1fr 1fr 80px;
+	grid-template-columns: 1fr 0.5fr 120px 80px;
 	grid-template-rows: 1fr auto;
+	column-gap: 16px;
 	align-items: center;
 	padding: 8px;
 	border-radius: 6px;
diff --git a/src/ui/src/builder/panels/BuilderPanel.vue b/src/ui/src/builder/panels/BuilderPanel.vue
index 11791069f..e64394e51 100644
--- a/src/ui/src/builder/panels/BuilderPanel.vue
+++ b/src/ui/src/builder/panels/BuilderPanel.vue
@@ -3,7 +3,7 @@
 		<div class="collapser">
 			<WdsButton
 				variant="neutral"
-				size="icon"
+				size="smallIcon"
 				data-automation-action="toggle-panel"
 				:data-automation-key="panelId"
 				@click="togglePanel(panelId)"
@@ -19,7 +19,7 @@
 		</div>
 		<template v-if="!collapsed">
 			<Teleport :to="contentsTeleportEl">
-				<div :style="{ order }" :data-order="order">
+				<div :style="{ order }" :data-order="order" class="contents">
 					<div class="actions">
 						<div class="actionsCompanion">
 							<slot name="actionsCompanion"></slot>
@@ -35,7 +35,7 @@
 							"
 							data-writer-tooltip-placement="left"
 							variant="neutral"
-							size="unpadded"
+							size="smallIcon"
 							:disabled="action.isDisabled"
 							@click="action.callback"
 							><i class="material-symbols-outlined">{{
@@ -43,7 +43,7 @@
 							}}</i></WdsButton
 						>
 					</div>
-					<div class="contents">
+					<div class="mainContents">
 						<slot></slot>
 					</div>
 				</div>
@@ -80,6 +80,7 @@ const props = defineProps<{
 	name: string;
 	actions: BuilderPanelAction[];
 	contentsTeleportEl: HTMLElement;
+	scrollable: boolean;
 }>();
 
 const collapsed = computed(() => !wfbm.openPanels.value.has(props.panelId));
@@ -139,17 +140,25 @@ function getKeyboardShortcutDescription(
 	margin-left: 8px;
 }
 
+.contents {
+	display: grid;
+	height: 100%;
+	grid-template-rows: 36px 1fr;
+	grid-template-columns: 1fr;
+	overflow: hidden;
+}
+
 .actions {
 	display: flex;
 	justify-content: right;
-	height: 36px;
 	align-items: center;
 	padding: 0 8px 0 8px;
 	gap: 8px;
 	border-bottom: 1px solid var(--builderSeparatorColor);
 }
 
-.contents {
-	height: 100%;
+.mainContents {
+	overflow-x: hidden;
+	overflow-y: auto;
 }
 </style>
diff --git a/src/ui/src/builder/panels/BuilderPanelSwitcher.vue b/src/ui/src/builder/panels/BuilderPanelSwitcher.vue
index a151bdf34..25e7b9a1a 100644
--- a/src/ui/src/builder/panels/BuilderPanelSwitcher.vue
+++ b/src/ui/src/builder/panels/BuilderPanelSwitcher.vue
@@ -63,7 +63,6 @@ const screenEl = ref(null);
 .screen:deep(> *) {
 	border-left: 1px solid var(--builderSeparatorColor);
 	border-top: 1px solid var(--builderIntenseSeparatorColor);
-	overflow: hidden;
 }
 
 .screen:deep(> *:first-child:last-child) {
diff --git a/src/ui/src/builder/settings/BuilderSettings.vue b/src/ui/src/builder/settings/BuilderSettings.vue
index 1698c787d..06edb8b10 100644
--- a/src/ui/src/builder/settings/BuilderSettings.vue
+++ b/src/ui/src/builder/settings/BuilderSettings.vue
@@ -8,7 +8,7 @@
 			<WdsButton
 				v-if="collapsed"
 				class="collapserButton"
-				size="small"
+				size="smallIcon"
 				variant="neutral"
 				data-writer-tooltip-placement="left"
 				data-writer-tooltip="Expand settings"
@@ -19,7 +19,7 @@
 			<WdsButton
 				v-else
 				class="collapserButton"
-				size="small"
+				size="smallIcon"
 				variant="neutral"
 				data-writer-tooltip-placement="left"
 				data-writer-tooltip="Collapse settings"
@@ -138,13 +138,8 @@ const toggleMiniDocs = () => {
 	background: var(--builderSubtleSeparatorColor);
 }
 
-.collapserButton {
-	height: 34px;
-	width: 34px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	border-radius: 50%;
+.collapserButton:focus {
+	border: 1px solid var(--builderSeparatorColor);
 }
 
 .titleBar {
diff --git a/src/ui/src/builder/settings/BuilderSettingsActions.vue b/src/ui/src/builder/settings/BuilderSettingsActions.vue
index fcb5e99f0..76119ec88 100644
--- a/src/ui/src/builder/settings/BuilderSettingsActions.vue
+++ b/src/ui/src/builder/settings/BuilderSettingsActions.vue
@@ -10,7 +10,7 @@
 			data-writer-tooltip="Add child"
 			data-writer-tooltip-placement="left"
 			variant="neutral"
-			size="small"
+			size="smallIcon"
 			class="actionButton"
 			:disabled="!shortcutsInfo?.isAddEnabled"
 			@click="
@@ -287,15 +287,6 @@ onMounted(() => {
 	gap: 0;
 }
 
-.actionButton {
-	height: 34px;
-	width: 34px;
-	border-radius: 50%;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
 .type {
 	display: flex;
 	align-items: center;
diff --git a/src/ui/src/components/workflows/base/WorkflowNavigator.vue b/src/ui/src/components/workflows/base/WorkflowNavigator.vue
index db4683faa..55c4694a2 100644
--- a/src/ui/src/components/workflows/base/WorkflowNavigator.vue
+++ b/src/ui/src/components/workflows/base/WorkflowNavigator.vue
@@ -17,7 +17,7 @@
 			<div class="zoomer">
 				<WdsButton
 					variant="neutral"
-					size="unpadded"
+					size="smallIcon"
 					:data-writer-tooltip="
 						zoomLevel > ZOOM_SETTINGS.minLevel
 							? `Zoom out (${getModifierKeyName()}-)`
@@ -36,7 +36,7 @@
 				></WdsTextInput>
 				<WdsButton
 					variant="neutral"
-					size="unpadded"
+					size="smallIcon"
 					:data-writer-tooltip="
 						zoomLevel < ZOOM_SETTINGS.maxLevel
 							? `Zoom in (${getModifierKeyName()}+)`
@@ -49,7 +49,7 @@
 				</WdsButton>
 				<WdsButton
 					variant="neutral"
-					size="unpadded"
+					size="smallIcon"
 					data-writer-tooltip="Reset zoom"
 					data-writer-tooltip-placement="right"
 					@click="handleResetZoom"
@@ -60,7 +60,7 @@
 			<div class="miniMapCollapser">
 				<WdsButton
 					variant="neutral"
-					size="unpadded"
+					size="smallIcon"
 					:data-writer-tooltip="
 						isMiniMapShown ? `Close minimap` : `Open minimap`
 					"
@@ -201,8 +201,8 @@ onUnmounted(() => {
 .zoomer {
 	flex: 1 0 auto;
 	display: flex;
-	padding: 6px 12px 6px 12px;
-	gap: 12px;
+	padding: 4px;
+	gap: 4px;
 	align-items: center;
 }
 
diff --git a/src/ui/src/wds/WdsButton.vue b/src/ui/src/wds/WdsButton.vue
index 243a83c74..c665c24d7 100644
--- a/src/ui/src/wds/WdsButton.vue
+++ b/src/ui/src/wds/WdsButton.vue
@@ -8,10 +8,15 @@
 import { computed, PropType } from "vue";
 
 /** See Variants on [Figma](https://www.figma.com/design/jgLDtwVwg3hReC1t4Vw20D/WDS-Writer-Design-System?node-id=67-701) */
-type WdsButtonVariant = "primary" | "secondary" | "tertiary" | "neutral";
+type WdsButtonVariant =
+	| "primary"
+	| "secondary"
+	| "tertiary"
+	| "special"
+	| "neutral";
 
 /** See Sizes on [Figma](https://www.figma.com/design/jgLDtwVwg3hReC1t4Vw20D/WDS-Writer-Design-System?node-id=67-701) */
-type WdsButtonSize = "big" | "small" | "icon" | "unpadded";
+type WdsButtonSize = "big" | "small" | "icon" | "smallIcon";
 
 const props = defineProps({
 	variant: { type: String as PropType<WdsButtonVariant>, default: "primary" },
@@ -101,7 +106,26 @@ const className = computed(() => [
 	opacity: 50%;
 }
 
-/* VARIANTS -- neutral */
+/* VARIANTS -- special */
+
+.WdsButton--special {
+	color: #5551ff;
+	background: #e4e9ff;
+	border-color: #e4e9ff;
+}
+
+.WdsButton--special:hover,
+.WdsButton--special:focus {
+	border-color: #bfcbff;
+	background: #bfcbff;
+}
+.WdsButton--special:disabled {
+	border-color: #e4e9ff;
+	background-color: #e4e9ff;
+	opacity: 0.4;
+}
+
+/* VARIANTS -- neutral (WDS "White" equivalent) */
 
 .WdsButton--neutral {
 	border: none;
@@ -112,23 +136,16 @@ const className = computed(() => [
 	padding: 0;
 }
 
-.WdsButton--neutral:focus {
-	color: unset;
-	border: none;
-	box-shadow: none;
-	background: var(--builderSeparatorColor);
-}
-
+.WdsButton--neutral:focus,
 .WdsButton--neutral:hover {
-	background: unset;
 	color: unset;
 	border: none;
 	box-shadow: none;
+	background: var(--builderSubtleSeparatorColor);
 }
 
 .WdsButton--neutral:disabled {
-	color: #828282;
-	opacity: 50%;
+	opacity: 0.4;
 }
 
 /* SIZES */
@@ -143,12 +160,12 @@ const className = computed(() => [
 }
 
 .WdsButton--icon {
-	height: 32px;
-	width: 32px;
-	padding: 4px;
+	height: 40px;
+	width: 40px;
 }
 
-.WdsButton--unpadded {
-	padding: 0;
+.WdsButton--smallIcon {
+	height: 32px;
+	width: 32px;
 }
 </style>

From dc0316c2b7db2b96637bb0896e9b74cc25f521b4 Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Fri, 29 Nov 2024 13:10:29 +0000
Subject: [PATCH 14/19] chore: Remove deprecated shortcuts

---
 .../src/builder/BuilderComponentShortcuts.vue | 334 ------------------
 1 file changed, 334 deletions(-)
 delete mode 100644 src/ui/src/builder/BuilderComponentShortcuts.vue

diff --git a/src/ui/src/builder/BuilderComponentShortcuts.vue b/src/ui/src/builder/BuilderComponentShortcuts.vue
deleted file mode 100644
index fd0dc91d4..000000000
--- a/src/ui/src/builder/BuilderComponentShortcuts.vue
+++ /dev/null
@@ -1,334 +0,0 @@
-<template>
-	<div
-		v-if="shortcutsInfo"
-		:draggable="shortcutsInfo?.isDraggable"
-		class="BuilderComponentShortcuts"
-		:data-writer-id="componentId"
-	>
-		<div v-if="shortcutsInfo?.toolkit !== 'workflows'" class="type">
-			{{ shortcutsInfo?.componentTypeName }}
-		</div>
-		<template v-if="!isAddMode">
-			<div
-				class="actionButton"
-				data-writer-tooltip="Add child"
-				data-writer-tooltip-gap="-4"
-				:class="{
-					enabled: shortcutsInfo?.isAddEnabled,
-				}"
-				@click="
-					shortcutsInfo?.isAddEnabled
-						? (isAddMode = !isAddMode)
-						: undefined
-				"
-			>
-				<i class="material-symbols-outlined">add</i>
-			</div>
-			<div
-				class="actionButton"
-				data-writer-tooltip-gap="-4"
-				:data-writer-tooltip="`Move up (${getModifierKeyName()}↑)`"
-				:class="{
-					enabled: shortcutsInfo?.isMoveUpEnabled,
-				}"
-				@click="
-					shortcutsInfo?.isMoveUpEnabled
-						? moveComponentUp(componentId)
-						: undefined
-				"
-			>
-				<i class="material-symbols-outlined">arrow_upward</i>
-			</div>
-			<div
-				class="actionButton"
-				:data-writer-tooltip="`Move down (${getModifierKeyName()}↓)`"
-				data-writer-tooltip-gap="-4"
-				:class="{
-					enabled: shortcutsInfo?.isMoveDownEnabled,
-				}"
-				@click="
-					shortcutsInfo?.isMoveDownEnabled
-						? moveComponentDown(componentId)
-						: undefined
-				"
-			>
-				<i class="material-symbols-outlined">arrow_downward</i>
-			</div>
-
-			<div
-				class="actionButton"
-				:data-writer-tooltip="`Cut (${getModifierKeyName()}X)`"
-				data-writer-tooltip-gap="-4"
-				:class="{
-					enabled: shortcutsInfo?.isCutEnabled,
-				}"
-				@click="
-					shortcutsInfo?.isCutEnabled
-						? cutComponent(componentId)
-						: undefined
-				"
-			>
-				<i class="material-symbols-outlined">cut</i>
-			</div>
-			<div
-				class="actionButton"
-				:data-writer-tooltip="`Copy (${getModifierKeyName()}C)`"
-				data-writer-tooltip-gap="-4"
-				:class="{
-					enabled: shortcutsInfo?.isCopyEnabled,
-				}"
-				@click="
-					shortcutsInfo?.isCopyEnabled
-						? copyComponent(componentId)
-						: undefined
-				"
-			>
-				<i class="material-symbols-outlined">content_copy</i>
-			</div>
-			<div
-				class="actionButton"
-				:data-writer-tooltip="`Paste (${getModifierKeyName()}V)`"
-				data-writer-tooltip-gap="-4"
-				:class="{
-					enabled: shortcutsInfo?.isPasteEnabled,
-				}"
-				@click="
-					shortcutsInfo?.isPasteEnabled
-						? pasteComponent(componentId)
-						: undefined
-				"
-			>
-				<i class="material-symbols-outlined">content_paste</i>
-			</div>
-			<div
-				class="actionButton"
-				:data-writer-tooltip="`Go to parent (${getModifierKeyName()}Shift ↑)`"
-				data-writer-tooltip-gap="-4"
-				:class="{
-					enabled: shortcutsInfo?.isGoToParentEnabled,
-				}"
-				@click="
-					shortcutsInfo?.isGoToParentEnabled
-						? goToParent(componentId, instancePath)
-						: undefined
-				"
-			>
-				<i class="material-symbols-outlined">move_up</i>
-			</div>
-			<div
-				class="actionButton delete"
-				data-automation-action="delete"
-				data-writer-tooltip="Delete (Del)"
-				data-writer-tooltip-gap="-4"
-				:class="{
-					enabled: shortcutsInfo?.isDeleteEnabled,
-				}"
-				@click="
-					shortcutsInfo?.isDeleteEnabled
-						? removeComponentSubtree(componentId)
-						: undefined
-				"
-			>
-				<i class="material-symbols-outlined">delete</i>
-			</div>
-		</template>
-		<template v-if="isAddMode">
-			<div class="addDialog">
-				<input
-					type="text"
-					list="validChildrenTypes"
-					placeholder="Component..."
-					@change="addComponent"
-				/>
-				<datalist id="validChildrenTypes">
-					<option
-						v-for="(definition, type) in validChildrenTypes"
-						:key="type"
-						:value="definition.name"
-					>
-						{{ definition.name }}
-					</option>
-				</datalist>
-			</div>
-		</template>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { computed, inject, onMounted, Ref, ref, toRefs, watch } from "vue";
-import { useComponentActions } from "./useComponentActions";
-import { Component, WriterComponentDefinition } from "@/writerTypes";
-import injectionKeys from "../injectionKeys";
-import { getModifierKeyName } from "../core/detectPlatform";
-
-const wf = inject(injectionKeys.core);
-const ssbm = inject(injectionKeys.builderManager);
-
-const {
-	createAndInsertComponent,
-	moveComponentUp,
-	moveComponentDown,
-	cutComponent,
-	pasteComponent,
-	copyComponent,
-	isAddAllowed,
-	isCopyAllowed,
-	isCutAllowed,
-	isGoToParentAllowed,
-	isPasteAllowed,
-	isDeleteAllowed,
-	isDraggingAllowed,
-	getEnabledMoves,
-	removeComponentSubtree,
-	goToParent,
-} = useComponentActions(wf, ssbm);
-
-const props = defineProps<{
-	componentId: Component["id"];
-	instancePath: string;
-}>();
-
-const { componentId, instancePath } = toRefs(props);
-
-const isAddMode = ref(false);
-
-const shortcutsInfo: Ref<{
-	componentTypeName: string;
-	toolkit?: WriterComponentDefinition["toolkit"];
-	isAddEnabled: boolean;
-	isMoveUpEnabled: boolean;
-	isMoveDownEnabled: boolean;
-	isCopyEnabled: boolean;
-	isCutEnabled: boolean;
-	isPasteEnabled: boolean;
-	isGoToParentEnabled: boolean;
-	isDeleteEnabled: boolean;
-	isDraggable: boolean;
-}> = ref(null);
-
-const validChildrenTypes = computed(() => {
-	const types = wf.getContainableTypes(componentId.value);
-	const result: Record<string, WriterComponentDefinition> = {};
-
-	types.map((type) => {
-		const definition = wf.getComponentDefinition(type);
-		result[type] = definition;
-	});
-
-	return result;
-});
-
-function addComponent(event: Event) {
-	const definitionName = (event.target as HTMLInputElement).value;
-	const matchingTypes = Object.entries(validChildrenTypes.value).filter(
-		([_, definition]) => {
-			if (definition.name == definitionName) return true;
-			return false;
-		},
-	);
-	if (matchingTypes.length == 0) return;
-	const type = matchingTypes[0][0];
-	isAddMode.value = false;
-	createAndInsertComponent(type, componentId.value);
-}
-
-function reprocessShorcutsInfo(): void {
-	const component = wf.getComponentById(componentId.value);
-	if (!component) return;
-	const { up: isMoveUpEnabled, down: isMoveDownEnabled } = getEnabledMoves(
-		componentId.value,
-	);
-	shortcutsInfo.value = {
-		isAddEnabled: isAddAllowed(componentId.value),
-		componentTypeName: wf.getComponentDefinition(component.type)?.name,
-		toolkit: wf.getComponentDefinition(component.type)?.toolkit,
-		isMoveUpEnabled,
-		isMoveDownEnabled,
-		isCopyEnabled: isCopyAllowed(componentId.value),
-		isCutEnabled: isCutAllowed(componentId.value),
-		isPasteEnabled: isPasteAllowed(componentId.value),
-		isGoToParentEnabled: isGoToParentAllowed(componentId.value),
-		isDeleteEnabled: isDeleteAllowed(componentId.value),
-		isDraggable: isDraggingAllowed(componentId.value),
-	};
-}
-
-watch(
-	() => wf.getComponentById(componentId.value)?.position,
-	async (newPosition) => {
-		if (typeof newPosition == "undefined" || newPosition === null) return;
-		reprocessShorcutsInfo();
-	},
-	{ flush: "post" },
-);
-
-onMounted(() => {
-	reprocessShorcutsInfo();
-});
-</script>
-
-<style scoped>
-@import "./sharedStyles.css";
-.BuilderComponentShortcuts {
-	display: flex;
-	border-radius: 18px;
-	box-shadow: 0 0 8px -1px rgba(0, 0, 0, 0.6);
-	background: var(--builderBackgroundColor);
-	pointer-events: auto;
-	overflow: hidden;
-	font-size: 0.75rem;
-}
-
-.type {
-	display: flex;
-	align-items: center;
-	padding-left: 16px;
-	padding-right: 16px;
-	height: 36px;
-	background: var(--builderSelectedColor);
-}
-
-[draggable="true"] .type {
-	cursor: grab;
-}
-
-[draggable="true"] .type:active {
-	cursor: grabbing;
-}
-
-.actionButton {
-	width: 36px;
-	height: 36px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	color: var(--builderDisabledColor);
-}
-
-.actionButton:last-of-type {
-	padding-right: 4px;
-}
-
-.actionButton.enabled {
-	cursor: pointer;
-	color: var(--builderPrimaryTextColor);
-}
-
-.actionButton.enabled.delete {
-	color: var(--builderErrorColor);
-}
-
-.addDialog {
-	display: flex;
-	align-items: center;
-	flex: 1 0 120px;
-}
-
-.addDialog input {
-	flex: 1 0 auto;
-	padding: 8px;
-	height: 100%;
-	outline: none;
-	border: none;
-}
-</style>

From 9332af1697622248b555372bf0ea9216b9d5a7e3 Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Fri, 29 Nov 2024 13:58:48 +0000
Subject: [PATCH 15/19] fix: Switch BrE spelling for AmE

---
 src/ui/src/components/core/layout/CoreColumn.vue  | 2 +-
 src/ui/src/components/core/layout/CoreSidebar.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/ui/src/components/core/layout/CoreColumn.vue b/src/ui/src/components/core/layout/CoreColumn.vue
index 7a38059d3..60d89b164 100644
--- a/src/ui/src/components/core/layout/CoreColumn.vue
+++ b/src/ui/src/components/core/layout/CoreColumn.vue
@@ -51,7 +51,7 @@ import {
 import BaseCollapseButton from "../base/BaseCollapseButton.vue";
 
 const description =
-	"A layout component that organises its child components in columns. Must be inside a Column Container component.";
+	"A layout component that organizes its child components in columns. Must be inside a Column Container component.";
 
 export default {
 	writer: {
diff --git a/src/ui/src/components/core/layout/CoreSidebar.vue b/src/ui/src/components/core/layout/CoreSidebar.vue
index 81e6199ef..6dc100726 100644
--- a/src/ui/src/components/core/layout/CoreSidebar.vue
+++ b/src/ui/src/components/core/layout/CoreSidebar.vue
@@ -33,7 +33,7 @@ import {
 import BaseCollapseButton from "../base/BaseCollapseButton.vue";
 
 const description =
-	"A container component that organises its children in a sidebar. Its parent must be a Page component.";
+	"A container component that organizes its children in a sidebar. Its parent must be a Page component.";
 
 export default {
 	writer: {

From b910e85ea1a413e3470e281a6090d9e948aaf31a Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Fri, 29 Nov 2024 15:00:54 +0100
Subject: [PATCH 16/19] Squashed commit of the following:

commit 0f8a653b85f6b634f6a39632e912ce77af74167a
Merge: c6bd286 5ea2448
Author: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date:   Thu Nov 28 17:54:43 2024 +0100

    Merge pull request #638 from madeindjs/WF-45

    feat(ui): use `BuilderSelect` for handlers + implement Design System - WF-45

commit c6bd286d97f63f853bd0dd63e73183f4545136bf
Merge: c789209 4998ace
Author: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date:   Thu Nov 28 10:03:36 2024 +0100

    Merge pull request #654 from mmikita95/fix-pytest-warnings

    fix: register `set_token` mark to avoid pytest warnings

commit c7892098e1de6391d3a3cfcfff90969d9288d622
Merge: 8774f9b 93a4f6e
Author: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date:   Thu Nov 28 10:01:53 2024 +0100

    Merge pull request #622 from mmikita95/chore-serialize-non-empty-content

    chore: serialize tool calls messages with non-empty content

commit 8774f9bdc91c5284ce048615e263c5e9816766f6
Merge: ec53f21 a8f42de
Author: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date:   Wed Nov 27 09:30:02 2024 +0100

    Merge pull request #646 from writer/WF-123-fix-examples-versions

    fix(WF-123): template apps have incorrect version after generation

commit 4998ace9d1a2f7460437cf25dee58f8da2f046d5
Author: mmikita95 <hello@mmikita.me>
Date:   Wed Nov 27 10:20:04 2024 +0300

    fix: register `set_token` mark to avoid pytest warnings

commit 5ea244855f0dbc38a0048154837eea14c29567c5
Author: Alexandre Rousseau <alexandre@rsseau.fr>
Date:   Mon Nov 18 21:33:27 2024 +0100

    feat(ui): use `BuilderSelect` for handlers + implement Design System - WF-45

commit a8f42dea7d5c0157a2d12b9a7038a00a85d4e918
Author: Mateusz Russak <mateusz@russak.biz>
Date:   Fri Nov 22 23:24:36 2024 +0100

    fix: tests

commit efcb814d11a928b3a077bc5cd20453d7c08ab48e
Author: Mateusz Russak <mateusz@russak.biz>
Date:   Fri Nov 22 23:10:25 2024 +0100

    fix: linter error

commit a93b102a24b8659cbfe4ace3e32668f85d077fa1
Author: Mateusz Russak <mateusz@russak.biz>
Date:   Fri Nov 22 22:16:46 2024 +0100

    fix(WF-123): Fix writer versions in examples

commit 93a4f6ed024fae073f043e3be7f82cf10956352d
Author: Mikita Makiej <157150795+mmikita95@users.noreply.github.com>
Date:   Mon Nov 18 12:47:27 2024 +0300

    fix: also include empty non-`None` content as failing condition

commit bb3683a25c1063482990705a6a6c536bc0a897d3
Author: Mikita Makiej <157150795+mmikita95@users.noreply.github.com>
Date:   Mon Nov 18 11:46:52 2024 +0300

    fix: unfinished docstring

commit 2f96977eb1270ae4a9d1bf6c33abbcefb2bb71db
Author: mmikita95 <hello@mmikita.me>
Date:   Mon Nov 18 10:51:13 2024 +0300

    chore: update `_is_serialized`

commit d646732b8316a97923bec748900e0a9ba877a1e1
Author: mmikita95 <hello@mmikita.me>
Date:   Fri Nov 8 17:34:02 2024 +0400

    chore: serialize tool calls messages with non-empty content
---
 apps/ai-starter/pyproject.toml                |  15 -
 apps/default/pyproject.toml                   |  15 -
 apps/hello/pyproject.toml                     |  15 -
 apps/pdg-tutorial/pyproject.toml              |  15 -
 apps/quickstart/pyproject.toml                |  15 -
 apps/text-demo/pyproject.toml                 |  15 -
 package-lock.json                             |  58 ++++
 pytest.ini                                    |   1 +
 src/ui/package.json                           |   1 +
 src/ui/src/builder/BuilderSelect.vue          | 264 ++++++++----------
 .../builder/settings/BuilderFieldsAlign.vue   |   4 +-
 .../builder/settings/BuilderFieldsPadding.vue |   4 +-
 .../builder/settings/BuilderFieldsWidth.vue   |   4 +-
 .../settings/BuilderSettingsHandlers.vue      | 112 ++++----
 src/ui/src/composables/useFocusWithin.ts      |  55 ++++
 src/ui/src/wds/WdsDropdownMenu.vue            | 189 +++++++++++++
 src/writer/ai.py                              |  12 +-
 src/writer/command_line.py                    |   6 +
 tests/backend/test_cli.py                     |   6 -
 19 files changed, 510 insertions(+), 296 deletions(-)
 delete mode 100644 apps/ai-starter/pyproject.toml
 delete mode 100644 apps/default/pyproject.toml
 delete mode 100644 apps/hello/pyproject.toml
 delete mode 100644 apps/pdg-tutorial/pyproject.toml
 delete mode 100644 apps/quickstart/pyproject.toml
 delete mode 100644 apps/text-demo/pyproject.toml
 create mode 100644 src/ui/src/composables/useFocusWithin.ts
 create mode 100644 src/ui/src/wds/WdsDropdownMenu.vue

diff --git a/apps/ai-starter/pyproject.toml b/apps/ai-starter/pyproject.toml
deleted file mode 100644
index cc093aa90..000000000
--- a/apps/ai-starter/pyproject.toml
+++ /dev/null
@@ -1,15 +0,0 @@
-[tool.poetry]
-name = "writer-framework-default"
-version = "0.1.0"
-description = ""
-authors = ["Your Name <you@example.com>"]
-readme = "README.md"
-
-[tool.poetry.dependencies]
-python = "^3.10.0"
-writer = {version = "^0.6.0"}
-
-
-[build-system]
-requires = ["poetry-core"]
-build-backend = "poetry.core.masonry.api"
diff --git a/apps/default/pyproject.toml b/apps/default/pyproject.toml
deleted file mode 100644
index cc093aa90..000000000
--- a/apps/default/pyproject.toml
+++ /dev/null
@@ -1,15 +0,0 @@
-[tool.poetry]
-name = "writer-framework-default"
-version = "0.1.0"
-description = ""
-authors = ["Your Name <you@example.com>"]
-readme = "README.md"
-
-[tool.poetry.dependencies]
-python = "^3.10.0"
-writer = {version = "^0.6.0"}
-
-
-[build-system]
-requires = ["poetry-core"]
-build-backend = "poetry.core.masonry.api"
diff --git a/apps/hello/pyproject.toml b/apps/hello/pyproject.toml
deleted file mode 100644
index f1775894f..000000000
--- a/apps/hello/pyproject.toml
+++ /dev/null
@@ -1,15 +0,0 @@
-[tool.poetry]
-name = "writer-framework-hello"
-version = "0.1.0"
-description = ""
-authors = ["Your Name <you@example.com>"]
-readme = "README.md"
-
-[tool.poetry.dependencies]
-python = "^3.10.0"
-writer = {version = "^0.6.0"}
-
-
-[build-system]
-requires = ["poetry-core"]
-build-backend = "poetry.core.masonry.api"
diff --git a/apps/pdg-tutorial/pyproject.toml b/apps/pdg-tutorial/pyproject.toml
deleted file mode 100644
index cc093aa90..000000000
--- a/apps/pdg-tutorial/pyproject.toml
+++ /dev/null
@@ -1,15 +0,0 @@
-[tool.poetry]
-name = "writer-framework-default"
-version = "0.1.0"
-description = ""
-authors = ["Your Name <you@example.com>"]
-readme = "README.md"
-
-[tool.poetry.dependencies]
-python = "^3.10.0"
-writer = {version = "^0.6.0"}
-
-
-[build-system]
-requires = ["poetry-core"]
-build-backend = "poetry.core.masonry.api"
diff --git a/apps/quickstart/pyproject.toml b/apps/quickstart/pyproject.toml
deleted file mode 100644
index cc093aa90..000000000
--- a/apps/quickstart/pyproject.toml
+++ /dev/null
@@ -1,15 +0,0 @@
-[tool.poetry]
-name = "writer-framework-default"
-version = "0.1.0"
-description = ""
-authors = ["Your Name <you@example.com>"]
-readme = "README.md"
-
-[tool.poetry.dependencies]
-python = "^3.10.0"
-writer = {version = "^0.6.0"}
-
-
-[build-system]
-requires = ["poetry-core"]
-build-backend = "poetry.core.masonry.api"
diff --git a/apps/text-demo/pyproject.toml b/apps/text-demo/pyproject.toml
deleted file mode 100644
index cc093aa90..000000000
--- a/apps/text-demo/pyproject.toml
+++ /dev/null
@@ -1,15 +0,0 @@
-[tool.poetry]
-name = "writer-framework-default"
-version = "0.1.0"
-description = ""
-authors = ["Your Name <you@example.com>"]
-readme = "README.md"
-
-[tool.poetry.dependencies]
-python = "^3.10.0"
-writer = {version = "^0.6.0"}
-
-
-[build-system]
-requires = ["poetry-core"]
-build-backend = "poetry.core.masonry.api"
diff --git a/package-lock.json b/package-lock.json
index b04d0d651..d7a8628c6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2587,6 +2587,63 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/@floating-ui/core": {
+			"version": "1.6.8",
+			"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.8.tgz",
+			"integrity": "sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==",
+			"dependencies": {
+				"@floating-ui/utils": "^0.2.8"
+			}
+		},
+		"node_modules/@floating-ui/dom": {
+			"version": "1.6.12",
+			"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.12.tgz",
+			"integrity": "sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==",
+			"dependencies": {
+				"@floating-ui/core": "^1.6.0",
+				"@floating-ui/utils": "^0.2.8"
+			}
+		},
+		"node_modules/@floating-ui/utils": {
+			"version": "0.2.8",
+			"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz",
+			"integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig=="
+		},
+		"node_modules/@floating-ui/vue": {
+			"version": "1.1.5",
+			"resolved": "https://registry.npmjs.org/@floating-ui/vue/-/vue-1.1.5.tgz",
+			"integrity": "sha512-ynL1p5Z+woPVSwgMGqeDrx6HrJfGIDzFyESFkyqJKilGW1+h/8yVY29Khn0LaU6wHBRwZ13ntG6reiHWK6jyzw==",
+			"dependencies": {
+				"@floating-ui/dom": "^1.0.0",
+				"@floating-ui/utils": "^0.2.8",
+				"vue-demi": ">=0.13.0"
+			}
+		},
+		"node_modules/@floating-ui/vue/node_modules/vue-demi": {
+			"version": "0.14.10",
+			"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+			"integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+			"hasInstallScript": true,
+			"bin": {
+				"vue-demi-fix": "bin/vue-demi-fix.js",
+				"vue-demi-switch": "bin/vue-demi-switch.js"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/antfu"
+			},
+			"peerDependencies": {
+				"@vue/composition-api": "^1.0.0-rc.1",
+				"vue": "^3.0.0-0 || ^2.6.0"
+			},
+			"peerDependenciesMeta": {
+				"@vue/composition-api": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@fontsource-variable/material-symbols-outlined": {
 			"version": "5.0.34",
 			"resolved": "https://registry.npmjs.org/@fontsource-variable/material-symbols-outlined/-/material-symbols-outlined-5.0.34.tgz",
@@ -22903,6 +22960,7 @@
 			"version": "0.0.0",
 			"dependencies": {
 				"@apache-arrow/ts": "^15.0.2",
+				"@floating-ui/vue": "^1.1.5",
 				"@fontsource-variable/material-symbols-outlined": "^5.0.34",
 				"@fontsource/poppins": "^5.0.14",
 				"@googlemaps/js-api-loader": "^1.16.6",
diff --git a/pytest.ini b/pytest.ini
index dba8024cb..270fe7e75 100644
--- a/pytest.ini
+++ b/pytest.ini
@@ -1,3 +1,4 @@
 [pytest]
 markers =
     explicit: mark a test to be run only when explicitly specified
+    set_token: provides a Writer API token mock for the test
\ No newline at end of file
diff --git a/src/ui/package.json b/src/ui/package.json
index aaffca429..5bfa9560b 100644
--- a/src/ui/package.json
+++ b/src/ui/package.json
@@ -17,6 +17,7 @@
 	},
 	"dependencies": {
 		"@apache-arrow/ts": "^15.0.2",
+		"@floating-ui/vue": "^1.1.5",
 		"@fontsource-variable/material-symbols-outlined": "^5.0.34",
 		"@fontsource/poppins": "^5.0.14",
 		"@googlemaps/js-api-loader": "^1.16.6",
diff --git a/src/ui/src/builder/BuilderSelect.vue b/src/ui/src/builder/BuilderSelect.vue
index 19439813c..d454a3171 100644
--- a/src/ui/src/builder/BuilderSelect.vue
+++ b/src/ui/src/builder/BuilderSelect.vue
@@ -1,190 +1,170 @@
 <template>
-	<!-- inspired from https://andrejgajdos.com/custom-select-dropdown -->
-	<div class="selectWrapper" @click="open">
-		<div ref="selectEl" class="select">
-			<div class="selectTrigger">
-				<div class="selectContent">
-					<div v-if="currentLabel != null" class="flexRow">
-						<div>
-							<i class="material-symbols-outlined">{{
-								currentIcon
-							}}</i>
-						</div>
-						<div>{{ currentLabel }}</div>
-					</div>
-				</div>
-				<div class="selectArrow">
-					<i class="material-symbols-outlined">expand_more</i>
-				</div>
+	<div
+		ref="trigger"
+		class="BuilderSelect"
+		:class="{ 'BuilderSelect--embedded': variant === 'embedded' }"
+	>
+		<button
+			class="BuilderSelect__trigger"
+			role="button"
+			@click="isOpen = !isOpen"
+		>
+			<i v-if="!hideIcons" class="material-symbols-outlined">{{
+				currentIcon
+			}}</i>
+			<div class="BuilderSelect__trigger__label">{{ currentLabel }}</div>
+			<div class="BuilderSelect__trigger__arrow">
+				<i class="material-symbols-outlined">{{ expandIcon }}</i>
 			</div>
-			<div class="selectOptions">
-				<div
-					v-for="option in compOptions"
-					:key="option.value"
-					class="selectOption"
-					:data-value="option.value"
-					:class="option.class"
-					@click="select"
-				>
-					<div class="flexRow">
-						<div>
-							<i class="material-symbols-outlined">{{
-								option.icon
-							}}</i>
-						</div>
-						<div>{{ option.label }}</div>
-					</div>
-				</div>
-			</div>
-		</div>
+		</button>
+		<WdsMenu
+			v-if="isOpen"
+			ref="dropdown"
+			:enable-search="enableSearch"
+			:options="options"
+			:selected="currentValue"
+			:style="floatingStyles"
+			@select="onSelect"
+			@search="updateFloatingStyle"
+		/>
 	</div>
 </template>
 
+<script lang="ts">
+export type { WdsDropdownMenuOption as Option } from "@/wds/WdsDropdownMenu.vue";
+</script>
+
 <script setup lang="ts">
-import { computed, ref, Ref } from "vue";
+import {
+	computed,
+	defineAsyncComponent,
+	nextTick,
+	PropType,
+	ref,
+	watch,
+} from "vue";
+import { useFloating, autoPlacement } from "@floating-ui/vue";
+import type { WdsDropdownMenuOption } from "@/wds/WdsDropdownMenu.vue";
+import { useFocusWithin } from "@/composables/useFocusWithin";
+
+const WdsMenu = defineAsyncComponent(() => import("@/wds/WdsDropdownMenu.vue"));
+
+const props = defineProps({
+	options: {
+		type: Array as PropType<WdsDropdownMenuOption[]>,
+		default: () => [],
+	},
+	defaultIcon: { type: String, required: false, default: undefined },
+	hideIcons: { type: Boolean, required: false },
+	enableSearch: { type: Boolean, required: false },
+	/**
+	 * Customize the appareance of the selector.
+	 * In embeded mode, we remove the padding and the border around the trigger. Usefull when the selector is embed into a field wrapper.
+	 */
+	variant: {
+		type: String as PropType<"normal" | "embedded">,
+		default: "normal",
+	},
+});
 
-const selectEl: Ref<HTMLElement> = ref(null);
+const currentValue = defineModel({ type: String, required: false });
+const isOpen = ref(false);
+const trigger = ref<HTMLElement>();
+const dropdown = ref<HTMLElement>();
 
-const props = defineProps<{
-	options?: Array<{ value: string; label: string; icon?: string }>;
-	defaultValue?: string;
-	defaultIcon?: string;
-}>();
+const { floatingStyles, update: updateFloatingStyle } = useFloating(
+	trigger,
+	dropdown,
+	{
+		placement: "bottom",
+		middleware: [autoPlacement()],
+	},
+);
 
-let currentValue = ref(props.defaultValue);
+const expandIcon = computed(() =>
+	isOpen.value ? "keyboard_arrow_up" : "expand_more",
+);
 
-const currentLabel = computed(() => {
-	const option = props.options.find(
-		(option) => option.value == currentValue.value,
-	);
-	return option ? option.label : "";
-});
+const selectedOption = computed(() =>
+	props.options.find((o) => o.value === currentValue.value),
+);
+
+const currentLabel = computed(() => selectedOption.value?.label ?? "");
 
 const currentIcon = computed(() => {
-	const defaultIcon = props.defaultIcon ? props.defaultIcon : "help_center";
-	const option = props.options.find(
-		(option) => option.value == currentValue.value,
-	);
-	return option && option.icon ? option.icon : defaultIcon;
+	if (props.hideIcons) return "";
+	return selectedOption.value?.icon ?? props.defaultIcon ?? "help_center";
 });
 
-const emit = defineEmits(["select"]);
-
-let compOptions = computed(() => {
-	const options_list = props.options.map((option) => {
-		let new_option = { ...option, class: "" };
-		if (new_option.value == currentValue.value) {
-			new_option.class = "selected";
-			new_option.icon = new_option.icon ? new_option.icon : "help_center";
-		} else {
-			new_option.class = "";
-			new_option.icon = new_option.icon ? new_option.icon : "help_center";
+// close the dropdown when clicking outside
+const hasFocus = useFocusWithin(trigger);
+watch(
+	hasFocus,
+	() => {
+		if (!hasFocus.value) {
+			// wait next tick to let event propagate
+			nextTick().then(() => (isOpen.value = false));
 		}
-		return new_option;
-	});
+	},
+	{ immediate: true },
+);
 
-	return options_list;
-});
-
-const open = () => {
-	selectEl.value.classList.toggle("open");
-};
-
-const select = (event) => {
-	const value = event.currentTarget.getAttribute("data-value");
+function onSelect(value: string) {
+	isOpen.value = false;
 	currentValue.value = value;
-	emit("select", value);
-};
+}
 </script>
 
 <style scoped>
-@import "./ico.css";
-
-.selectWrapper {
+.BuilderSelect {
 	position: relative;
 	user-select: none;
 	width: 100%;
 	font-size: 0.875rem;
 }
 
-.select {
-	position: relative;
+.BuilderSelect__trigger {
 	display: flex;
-	flex-direction: column;
-}
+	height: 32px;
+	width: 100%;
+
+	gap: 8px;
 
-.selectTrigger {
-	position: relative;
-	display: flex;
 	align-items: center;
-	justify-content: space-between;
 	padding: 8px;
 	font-weight: 400;
 	color: #3b3b3b;
-	height: 32px;
 	background: #ffffff;
-	cursor: pointer;
 }
 
-.selectOptions {
-	position: absolute;
-	display: block;
-	top: 100%;
-	left: 0;
-	right: 0;
-	border: 1px solid #394a6d;
-	background: #fff;
-	transition: all 0.2s;
-	opacity: 0;
-	visibility: hidden;
-	pointer-events: none;
-	z-index: 2;
-}
-
-.select.open .selectOptions {
-	opacity: 1;
-	visibility: visible;
-	pointer-events: all;
-}
-
-.selectOption {
-	position: relative;
-	display: block;
-	padding: 8px;
-	font-weight: 400;
-	font-size: 0.75rem;
-	color: #000000e6;
+.BuilderSelect__trigger {
+	/* reset button */
+	border: none;
 	cursor: pointer;
-	transition: all 0.2s;
-}
 
-.selectOption:hover {
-	cursor: pointer;
-	background-color: #000000b3;
-	color: #fff;
+	font-size: 0.75rem;
+	display: flex;
+	align-items: center;
 }
-
-.selected {
-	background-color: #000000b3;
-	color: #fff;
+.BuilderSelect__trigger__label {
+	text-overflow: ellipsis;
+	overflow: hidden;
+	flex-grow: 1;
+	text-align: left;
 }
-
-.selectArrow {
-	position: relative;
+.BuilderSelect__trigger__arrow {
+	border: none;
+	background-color: transparent;
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
 	font-weight: 300;
 	color: #000000e6;
+	cursor: pointer;
 }
 
-.flexRow {
-	display: flex;
-	flex-direction: row;
-	gap: 8px;
-}
-
-.selectContent {
-	font-size: 0.75rem;
+.BuilderSelect--embedded .BuilderSelect__trigger {
+	padding: 0;
+	height: 18px;
 }
 </style>
diff --git a/src/ui/src/builder/settings/BuilderFieldsAlign.vue b/src/ui/src/builder/settings/BuilderFieldsAlign.vue
index e77a5e2ed..b45d97ef2 100644
--- a/src/ui/src/builder/settings/BuilderFieldsAlign.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsAlign.vue
@@ -42,9 +42,9 @@
 		<div v-if="mode == 'pick' || mode == 'css'" class="main">
 			<div v-if="mode == 'pick'" class="pickerContainer">
 				<BuilderSelect
-					:default-value="subMode"
+					:value="subMode"
 					:options="selectOptions"
-					@select="handleInputSelect"
+					@input="handleInputSelect"
 				/>
 			</div>
 
diff --git a/src/ui/src/builder/settings/BuilderFieldsPadding.vue b/src/ui/src/builder/settings/BuilderFieldsPadding.vue
index d0b4baf72..bf4c9dfc8 100644
--- a/src/ui/src/builder/settings/BuilderFieldsPadding.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsPadding.vue
@@ -42,9 +42,9 @@
 		<div v-if="mode == 'pick' || mode == 'css'" class="main">
 			<div v-if="mode == 'pick'" class="pickerContainer">
 				<BuilderSelect
-					:default-value="subMode"
+					:model-value="subMode"
 					:options="selectOptions"
-					@select="handleInputSelect"
+					@update:model-value="handleInputSelect"
 				/>
 				<div v-if="subMode == SubMode.all_sides" class="row">
 					<i>All</i>
diff --git a/src/ui/src/builder/settings/BuilderFieldsWidth.vue b/src/ui/src/builder/settings/BuilderFieldsWidth.vue
index 160defde8..89f99e43c 100644
--- a/src/ui/src/builder/settings/BuilderFieldsWidth.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsWidth.vue
@@ -42,9 +42,9 @@
 		<div v-if="mode == 'pick' || mode == 'css'" class="main">
 			<div v-if="mode == 'pick'" class="pickerContainer">
 				<BuilderSelect
-					:default-value="subMode"
+					:model-value="subMode"
 					:options="selectOptions"
-					@select="handleInputSelect"
+					@update:model-value="handleInputSelect"
 				/>
 				<div v-if="subMode == SubMode.fixed" class="fixedContainer">
 					<input
diff --git a/src/ui/src/builder/settings/BuilderSettingsHandlers.vue b/src/ui/src/builder/settings/BuilderSettingsHandlers.vue
index a34a3e727..1a292c7c5 100644
--- a/src/ui/src/builder/settings/BuilderSettingsHandlers.vue
+++ b/src/ui/src/builder/settings/BuilderSettingsHandlers.vue
@@ -13,48 +13,19 @@
 				<div class="columns">
 					<div class="fieldWrapperMain">
 						<span class="name">{{ eventType }}</span>
-						<select
-							class="content"
-							:value="component.handlers?.[eventType]"
-							@input="handleHandlerChange($event, eventType)"
-						>
-							<option
-								key="No handler"
-								value=""
-								:selected="!component.handlers?.[eventType]"
-							>
-								(No handler)
-							</option>
-							<option
-								v-for="userFunction in userFunctions"
-								:key="userFunction.name"
-								:value="userFunction.name"
-							>
-								{{ userFunction.name }}
-							</option>
-							<option
-								v-for="pageKey in pageKeys"
-								:key="`$goToPage_${pageKey}`"
-								:value="`$goToPage_${pageKey}`"
-							>
-								Go to page "{{ pageKey }}"
-							</option>
-							<option
-								v-for="workflowKey in workflowKeys"
-								:key="`$runWorkflow_${workflowKey}`"
-								:value="`$runWorkflow_${workflowKey}`"
-							>
-								Run workflow "{{ workflowKey }}"
-							</option>
-							<template v-if="isHandlerInvalid(eventType)">
-								<option
-									:value="component.handlers?.[eventType]"
-								>
-									{{ component.handlers?.[eventType] }} (Not
-									Found)
-								</option>
-							</template>
-						</select>
+						<div class="content">
+							<BuilderSelect
+								:model-value="
+									component.handlers?.[eventType] ?? ''
+								"
+								:options="getOptions(eventType)"
+								variant="embedded"
+								enable-search
+								@update:model-value="
+									handleHandlerChange($event, eventType)
+								"
+							/>
+						</div>
 					</div>
 					<div class="fieldActions">
 						<button
@@ -177,6 +148,8 @@ import { useComponentActions } from "../useComponentActions";
 import injectionKeys from "@/injectionKeys";
 import BuilderModal, { ModalAction } from "../BuilderModal.vue";
 import { WriterComponentDefinition } from "@/writerTypes";
+import BuilderSelect from "./BuilderSelect.vue";
+import type { Option } from "./BuilderSelect.vue";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
@@ -184,6 +157,44 @@ const ssbm = inject(injectionKeys.builderManager);
 const { setHandlerValue } = useComponentActions(wf, ssbm);
 const component = computed(() => wf.getComponentById(ssbm.getSelectedId()));
 
+const options = computed<Option[]>(() => {
+	const userFunctionsOptions: Option[] = userFunctions.value
+		.map((v) => v.name)
+		.map((v) => ({ value: v, label: v, icon: "function" }));
+
+	const pageKeyOptions: Option[] = pageKeys.value
+		.map((v) => `$goToPage_${v}`)
+		.map((v) => ({
+			icon: "link",
+			value: v,
+			label: v,
+		}));
+
+	const workflowKeyOptions: Option[] = workflowKeys.value.map((v) => ({
+		label: `$runWorkflow_${v}`,
+		value: `Run workflow "${v}"`,
+		icon: "move_down",
+	}));
+
+	return [
+		{ label: "(No handler)", value: "", icon: "block" },
+		...userFunctionsOptions,
+		...pageKeyOptions,
+		...workflowKeyOptions,
+	];
+});
+
+function getOptions(eventType: string): Option[] {
+	if (!isHandlerInvalid(eventType)) return options.value;
+
+	const handler = component.value.handlers?.[eventType];
+
+	return [
+		...options.value,
+		{ value: handler, label: `${handler} (Not found)` },
+	];
+}
+
 const recognisedEvents: ComputedRef<WriterComponentDefinition["events"]> =
 	computed(() => {
 		const { type } = component.value;
@@ -233,9 +244,8 @@ const isHandlerInvalid = (eventType: string) => {
 	return true;
 };
 
-const handleHandlerChange = (ev: Event, eventType: string) => {
-	const handlerFunctionName = (ev.target as HTMLInputElement).value;
-	setHandlerValue(component.value.id, eventType, handlerFunctionName);
+const handleHandlerChange = (functionName: string, eventType: string) => {
+	setHandlerValue(component.value.id, eventType, functionName);
 };
 
 type StubModal = {
@@ -353,20 +363,28 @@ const copyToClipboard = (text: string) => {
 
 .list {
 	border-radius: 4px;
-	overflow: hidden;
 }
 
 .fieldWrapper .columns {
-	display: flex;
+	display: grid;
+	grid-template-columns: minmax(0, 100%) auto;
 	gap: 12px;
 	align-items: center;
 	max-width: 100%;
 }
 
+.fieldWrapperMain {
+	width: 100%;
+}
+
 .fieldWrapper .content {
 	padding: 16px 8px 12px 8px;
 	width: 100%;
 }
+.fieldWrapper .content .select {
+	padding: 0;
+	height: auto;
+}
 
 .fieldActions > button {
 	border-radius: 16px;
diff --git a/src/ui/src/composables/useFocusWithin.ts b/src/ui/src/composables/useFocusWithin.ts
new file mode 100644
index 000000000..31181128d
--- /dev/null
+++ b/src/ui/src/composables/useFocusWithin.ts
@@ -0,0 +1,55 @@
+import { ComputedRef, onBeforeUnmount, readonly, Ref, ref, watch } from "vue";
+
+/**
+ * Detect if a given element or its children has focus.
+ * Inspired from <https://danburzo.ro/focus-within>.
+ */
+export function useFocusWithin(
+	element: ComputedRef<HTMLElement> | Ref<HTMLElement>,
+) {
+	const focus = ref(false);
+
+	function onFocusIn() {
+		focus.value = true;
+	}
+
+	function onFocusOut(e: FocusEvent) {
+		const target = e.currentTarget as HTMLElement;
+		// If the document has lost focus, don't hide the container just yet, wait until the focus is returned.
+		if (!document.hasFocus()) {
+			window.addEventListener("focus", function focusReturn() {
+				// We want the listener to be triggered just once, so we have it remove itself from the `focus` event.
+				window.removeEventListener("focus", focusReturn);
+
+				// Test whether the container is still in the DOM and whether the active element is contained within.
+				if (
+					target.isConnected &&
+					!target.contains(document.activeElement)
+				) {
+					focus.value = false;
+				}
+			});
+		} else if (!target.contains(e.relatedTarget as HTMLElement)) {
+			focus.value = false;
+		}
+	}
+
+	watch(element, (_, previous) => {
+		if (previous) {
+			previous.removeEventListener("focusin", onFocusIn);
+			previous.removeEventListener("focusout", onFocusOut);
+		}
+
+		if (!element) return;
+
+		element.value.addEventListener("focusin", onFocusIn);
+		element.value.addEventListener("focusout", onFocusOut);
+	});
+
+	onBeforeUnmount(() => {
+		element.value.removeEventListener("focusin", onFocusIn);
+		element.value.removeEventListener("focusout", onFocusOut);
+	});
+
+	return readonly(focus);
+}
diff --git a/src/ui/src/wds/WdsDropdownMenu.vue b/src/ui/src/wds/WdsDropdownMenu.vue
new file mode 100644
index 000000000..04d893e70
--- /dev/null
+++ b/src/ui/src/wds/WdsDropdownMenu.vue
@@ -0,0 +1,189 @@
+<template>
+	<div class="WdsDropdownMenu">
+		<div v-if="enableSearch" class="WdsDropdownMenu__search">
+			<i class="material-symbols-outlined">search</i>
+			<input
+				ref="searchInput"
+				v-model="searchTerm"
+				class="WdsDropdownMenu__search__input"
+				type="text"
+				placeholder="Search"
+				autocomplete="off"
+			/>
+		</div>
+		<button
+			v-for="option in optionsFiltered"
+			:key="option.value"
+			class="WdsDropdownMenu__item"
+			:class="{
+				'WdsDropdownMenu__item--selected': option.value === selected,
+			}"
+			@click="$emit('select', option.value)"
+		>
+			<i v-if="!hideIcons" class="material-symbols-outlined">{{
+				getOptionIcon(option)
+			}}</i>
+			<div class="WdsDropdownMenu__item__label">
+				{{ option.label }}
+			</div>
+			<i
+				v-if="option.value === selected"
+				class="material-symbols-outlined"
+			>
+				check
+			</i>
+		</button>
+	</div>
+</template>
+
+<script lang="ts">
+export type WdsDropdownMenuOption = {
+	value: string;
+	label: string;
+	icon?: string;
+};
+</script>
+
+<script setup lang="ts">
+// from https://www.figma.com/design/jgLDtwVwg3hReC1t4Vw20D/.WDS-Writer-Design-System?node-id=128-396&t=9Gy9MYDycjVV8C2Y-1
+import { computed, PropType, ref, watch } from "vue";
+
+const props = defineProps({
+	options: {
+		type: Array as PropType<WdsDropdownMenuOption[]>,
+		default: () => [],
+	},
+	hideIcons: { type: Boolean, required: false },
+	enableSearch: { type: Boolean, required: false },
+	selected: { type: String, required: false, default: undefined },
+});
+
+const emits = defineEmits({
+	select: (value: string) => typeof value === "string",
+	search: (value: string) => typeof value === "string",
+});
+
+const searchInput = ref<HTMLElement>();
+const searchTerm = ref("");
+
+function getOptionIcon(option: WdsDropdownMenuOption) {
+	if (props.hideIcons) return "";
+	return option.icon ?? "help_center";
+}
+
+const optionsFiltered = computed(() => {
+	if (!props.enableSearch) return props.options;
+
+	const query = searchTerm.value.toLowerCase();
+	return props.options.filter((option) =>
+		option.label.toLowerCase().includes(query),
+	);
+});
+
+watch(searchTerm, () => emits("search", searchTerm.value));
+</script>
+
+<style scoped>
+.WdsDropdownMenu {
+	position: absolute;
+	border: 1px solid #394a6d;
+	border: none;
+	background: #fff;
+	z-index: 2;
+	width: 100%;
+	max-height: 40vh;
+	overflow-y: auto;
+	border-radius: 8px;
+
+	padding: 8px 10px;
+
+	box-shadow: 0px 1px 8px 0px #bfcbff40;
+	box-sizing: border-box;
+}
+.WdsDropdownMenu:has(.WdsDropdownMenu__search) {
+	padding-top: 0px;
+}
+
+.WdsDropdownMenu__item {
+	background-color: transparent;
+	border: none;
+	display: block;
+	width: 100%;
+
+	display: grid;
+	grid-template-columns: auto 1fr auto;
+	gap: 8px;
+	align-items: center;
+
+	border-radius: 4px;
+
+	padding: 8px;
+	font-weight: 400;
+	font-size: 0.75rem;
+	color: #000000e6;
+	cursor: pointer;
+	transition: all 0.2s;
+	pointer-events: all;
+}
+
+.WdsDropdownMenu__item:hover {
+	cursor: pointer;
+	background-color: #f3f5ff;
+}
+
+.WdsDropdownMenu__item--selected {
+	background-color: #e4e9ff;
+}
+.WdsDropdownMenu__item__label {
+	text-overflow: ellipsis;
+	overflow: hidden;
+	text-align: left;
+}
+
+.WdsDropdownMenu__search {
+	background-color: #fafafa;
+	border-radius: 4px;
+	height: 36px;
+	width: 100%;
+
+	margin-bottom: 8px;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 4px;
+
+	padding: 8px;
+	padding-top: 16px;
+	border: 1px solid transparent;
+
+	color: currentcolor;
+}
+.WdsDropdownMenu__search:hover {
+	border-color: #bfcbff;
+}
+.WdsDropdownMenu__search:focus-within {
+	background-color: white;
+	outline: 4px solid #f3f5ff;
+}
+
+.WdsDropdownMenu__search__input {
+	letter-spacing: inherit;
+	color: currentcolor;
+	padding: 4px 0px 5px;
+	border: 0px;
+	box-sizing: content-box;
+	background: none;
+	height: 1.4375em;
+	margin: 0px;
+	display: block;
+	min-width: 0px;
+	width: 100%;
+	animation-name: mui-auto-fill-cancel;
+	animation-duration: 10ms;
+	appearance: textfield;
+}
+.WdsDropdownMenu__search__input:focus-visible {
+	outline: none;
+}
+</style>
diff --git a/src/writer/ai.py b/src/writer/ai.py
index 569bb63bb..ed5161a38 100644
--- a/src/writer/ai.py
+++ b/src/writer/ai.py
@@ -1821,14 +1821,16 @@ def _is_serialized(self, message: 'Conversation.Message') -> bool:
         """
         Function to verify whether the message should be serializable.
 
-        :return: Boolean that indicates
+        :return: Boolean indicating if the message meets 
+        the criteria for serialization.
         """
         if message["role"] in ["system", "tool"]:
+            # Prevent serialization of messages
+            # not intended for user display
             return False
-        elif message.get("tool_call_id") is not None:
-            return False
-        tool_calls = message.get("tool_calls")
-        if tool_calls is not None and tool_calls != []:
+        elif not message.get("content"):
+            # Prevent serialization for messages
+            # without meaningful content
             return False
 
         return True
diff --git a/src/writer/command_line.py b/src/writer/command_line.py
index 1255f5240..ef2a0e00a 100644
--- a/src/writer/command_line.py
+++ b/src/writer/command_line.py
@@ -7,6 +7,7 @@
 import click
 
 import writer.serve
+from writer import VERSION
 from writer.deploy import cloud, deploy
 
 CONTEXT_SETTINGS = {'help_option_names': ['-h', '--help']}
@@ -95,6 +96,11 @@ def create_app(app_path: str, template_name: Optional[str], overwrite=False):
         sys.exit(1)
 
     shutil.copytree(template_path, app_path, dirs_exist_ok=True)
+    # create/update requirements.txt and add writer to it
+    requirements_path = os.path.join(app_path, "requirements.txt")
+    with open(requirements_path, "a") as f:
+        f.write(f"writer=={VERSION}\n")
+
 
 if __name__ == "__main__":
     main()
diff --git a/tests/backend/test_cli.py b/tests/backend/test_cli.py
index 83cd340d3..b0a6393d2 100644
--- a/tests/backend/test_cli.py
+++ b/tests/backend/test_cli.py
@@ -25,9 +25,6 @@ def test_create_default():
         assert os.path.exists('./my_app')
         assert os.path.exists('./my_app/.wf')
         assert os.path.exists('./my_app/main.py')
-        with open('./my_app/pyproject.toml') as f:
-            content = f.read()
-        assert content.find('name = "writer-framework-default"') != -1
 
 def test_create_specific_template():
     runner = CliRunner()
@@ -38,9 +35,6 @@ def test_create_specific_template():
         assert os.path.exists('./my_app')
         assert os.path.exists('./my_app/.wf')
         assert os.path.exists('./my_app/main.py')
-        with open('./my_app/pyproject.toml') as f:
-            content = f.read()
-        assert content.find('name = "writer-framework-hello"') != -1
 
 
 def test_run():

From 3f91bbb397d4d8ac6ba7b9799c814babf948cff6 Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Fri, 29 Nov 2024 14:09:22 +0000
Subject: [PATCH 17/19] fix: Fix BuilderSelect reference

---
 src/ui/src/builder/settings/BuilderSettingsHandlers.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/ui/src/builder/settings/BuilderSettingsHandlers.vue b/src/ui/src/builder/settings/BuilderSettingsHandlers.vue
index 1a292c7c5..54f6cd71b 100644
--- a/src/ui/src/builder/settings/BuilderSettingsHandlers.vue
+++ b/src/ui/src/builder/settings/BuilderSettingsHandlers.vue
@@ -148,8 +148,8 @@ import { useComponentActions } from "../useComponentActions";
 import injectionKeys from "@/injectionKeys";
 import BuilderModal, { ModalAction } from "../BuilderModal.vue";
 import { WriterComponentDefinition } from "@/writerTypes";
-import BuilderSelect from "./BuilderSelect.vue";
-import type { Option } from "./BuilderSelect.vue";
+import BuilderSelect from "../BuilderSelect.vue";
+import type { Option } from "../BuilderSelect.vue";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);

From 448299289322c772ac7fe6d6e4b074a2ad54b2ea Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Fri, 29 Nov 2024 17:33:01 +0100
Subject: [PATCH 18/19] fix: Prevent recursive calls to error handler when tool
 icon is missing

---
 .../builder/sidebar/BuilderSidebarToolkit.vue  | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/ui/src/builder/sidebar/BuilderSidebarToolkit.vue b/src/ui/src/builder/sidebar/BuilderSidebarToolkit.vue
index db4eec740..7528822e2 100644
--- a/src/ui/src/builder/sidebar/BuilderSidebarToolkit.vue
+++ b/src/ui/src/builder/sidebar/BuilderSidebarToolkit.vue
@@ -25,7 +25,15 @@
 				>
 					<img
 						:src="`./../../../../components/${tool.type}.svg`"
-						@error="handleImageError($event, tool.category)"
+						@error="
+							!isImageFallback[tool.type]
+								? handleImageError(
+										$event,
+										tool.type,
+										tool.category,
+									)
+								: undefined
+						"
 					/>
 					<div class="name">{{ tool.name }}</div>
 				</div>
@@ -49,6 +57,7 @@ const wf = inject(injectionKeys.core);
 const wfbm = inject(injectionKeys.builderManager);
 const { removeInsertionCandidacy } = useDragDropComponent(wf);
 const query = ref("");
+const isImageFallback = ref<Record<Component["type"], boolean>>({});
 
 const displayedCategories = [
 	"Layout",
@@ -103,7 +112,12 @@ function getRelevantToolsInCategory(categoryId: string) {
 	return queryApplied;
 }
 
-function handleImageError(ev: Event, categoryId: string) {
+function handleImageError(
+	ev: Event,
+	type: Component["type"],
+	categoryId: string,
+) {
+	isImageFallback.value[type] = true; // Prevent calling more than once
 	const imageEl = ev.target as HTMLImageElement;
 	imageEl.src = `./../../../../components/category_${categoryId}.svg`;
 }

From 83a7cc41822f8632e64d270d90daefbdbda5d574 Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Fri, 29 Nov 2024 18:20:08 +0100
Subject: [PATCH 19/19] fix: E2E

---
 src/ui/src/builder/sidebar/BuilderSidebarToolkit.vue | 4 +++-
 tests/e2e/tests/button.spec.ts                       | 2 +-
 tests/e2e/tests/components.spec.ts                   | 4 ++--
 tests/e2e/tests/drag.spec.ts                         | 2 +-
 tests/e2e/tests/image.spec.ts                        | 2 +-
 tests/e2e/tests/jsonviewer.spec.ts                   | 2 +-
 tests/e2e/tests/lowCode.spec.ts                      | 2 +-
 tests/e2e/tests/reuse.spec.ts                        | 8 ++++----
 tests/e2e/tests/sidebar.spec.ts                      | 2 +-
 tests/e2e/tests/state.spec.ts                        | 2 +-
 tests/e2e/tests/stateAutocompletion.spec.ts          | 2 +-
 tests/e2e/tests/undoRedo.spec.ts                     | 2 +-
 tests/e2e/tests/workflows.spec.ts                    | 2 +-
 13 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/src/ui/src/builder/sidebar/BuilderSidebarToolkit.vue b/src/ui/src/builder/sidebar/BuilderSidebarToolkit.vue
index 7528822e2..c00ef7bb1 100644
--- a/src/ui/src/builder/sidebar/BuilderSidebarToolkit.vue
+++ b/src/ui/src/builder/sidebar/BuilderSidebarToolkit.vue
@@ -24,6 +24,7 @@
 					@dragstart="handleDragStart($event, tool.type)"
 				>
 					<img
+						:alt="`(Icon for ${tool.name})`"
 						:src="`./../../../../components/${tool.type}.svg`"
 						@error="
 							!isImageFallback[tool.type]
@@ -164,7 +165,8 @@ watch(activeToolkit, () => {
 }
 
 .tool img {
-	width: 18px;
+	max-width: 18px;
+	max-height: 18px;
 	aspect-ratio: 1 / 1;
 }
 
diff --git a/tests/e2e/tests/button.spec.ts b/tests/e2e/tests/button.spec.ts
index ada420843..d63a14016 100644
--- a/tests/e2e/tests/button.spec.ts
+++ b/tests/e2e/tests/button.spec.ts
@@ -16,7 +16,7 @@ test.describe("button", () => {
 	});
 
 	test.beforeEach(async ({ page }) => {
-		await page.goto(url);
+		await page.goto(url, {waitUntil: "domcontentloaded"});
 		test.setTimeout(5000);
 	});
 
diff --git a/tests/e2e/tests/components.spec.ts b/tests/e2e/tests/components.spec.ts
index 20cf31396..2b668f39e 100644
--- a/tests/e2e/tests/components.spec.ts
+++ b/tests/e2e/tests/components.spec.ts
@@ -96,7 +96,7 @@ function fullTest({type, locator}: ComponentTestData) {
 		});
 
 		test.beforeEach(async ({ page }) => {
-			await page.goto(url);
+			await page.goto(url, {waitUntil: "domcontentloaded"});
 		});
 
 		test("create, drag and drop and remove", async ({ page }) => {
@@ -148,7 +148,7 @@ function basicTest({type, locator}: ComponentTestData) {
 		});
 
 		test.beforeEach(async ({ page }) => {
-			await page.goto(url);
+			await page.goto(url, {waitUntil: "domcontentloaded"});
 		});
 
 		test("create and remove", async ({ page }) => {
diff --git a/tests/e2e/tests/drag.spec.ts b/tests/e2e/tests/drag.spec.ts
index 760ee1004..50dceadb8 100644
--- a/tests/e2e/tests/drag.spec.ts
+++ b/tests/e2e/tests/drag.spec.ts
@@ -16,7 +16,7 @@ test.describe("drag", () => {
 	});
 
 	test.beforeEach(async ({ page }) => {
-		await page.goto(url);
+		await page.goto(url, {waitUntil: "domcontentloaded"});
 	});
 
 	test("drag and drop component into itself", async ({ page }) => {
diff --git a/tests/e2e/tests/image.spec.ts b/tests/e2e/tests/image.spec.ts
index 2362ab30c..e2a602272 100644
--- a/tests/e2e/tests/image.spec.ts
+++ b/tests/e2e/tests/image.spec.ts
@@ -16,7 +16,7 @@ test.describe("image", () => {
 	});
 
 	test.beforeEach(async ({ page }) => {
-		await page.goto(url);
+		await page.goto(url, {waitUntil: "domcontentloaded"});
 	});
 
 	test("configure", async ({ page }) => {
diff --git a/tests/e2e/tests/jsonviewer.spec.ts b/tests/e2e/tests/jsonviewer.spec.ts
index 27581643b..69408ad30 100644
--- a/tests/e2e/tests/jsonviewer.spec.ts
+++ b/tests/e2e/tests/jsonviewer.spec.ts
@@ -14,7 +14,7 @@ test.describe("JSON viewer", () => {
 	});
 
 	test.beforeEach(async ({ page }) => {
-		await page.goto(url);
+		await page.goto(url, {waitUntil: "domcontentloaded"});
 		test.setTimeout(5000);
 	});
 
diff --git a/tests/e2e/tests/lowCode.spec.ts b/tests/e2e/tests/lowCode.spec.ts
index 943dd21e5..3e961e005 100644
--- a/tests/e2e/tests/lowCode.spec.ts
+++ b/tests/e2e/tests/lowCode.spec.ts
@@ -58,7 +58,7 @@ test.describe("low-code UI", () => {
 	});
 
 	test.beforeEach(async ({ page }) => {
-		await page.goto(url);
+		await page.goto(url, {waitUntil: "domcontentloaded"});
 	});
 
 	test("init_ui -  ui initialization" , async ({ page }) => {
diff --git a/tests/e2e/tests/reuse.spec.ts b/tests/e2e/tests/reuse.spec.ts
index a04419e43..bcbb9ef26 100644
--- a/tests/e2e/tests/reuse.spec.ts
+++ b/tests/e2e/tests/reuse.spec.ts
@@ -58,7 +58,6 @@ test.describe("Reuse component", () => {
 
 	const removeComponent = async (page: Page, selector: string) => {
 		await page.locator(".CorePage").click();
-		collapseSettingsBar(page);
 		await page.locator(selector).click();
 		await page
 			.locator(
@@ -90,7 +89,7 @@ test.describe("Reuse component", () => {
 		});
 
 		test.beforeEach(async ({ page }) => {
-			await page.goto(url);
+			await page.goto(url, {waitUntil: "domcontentloaded"});
 		});
 
 		test.afterEach(async ({ page }) => {
@@ -123,6 +122,7 @@ test.describe("Reuse component", () => {
 			await expandSettingsBar(page);
 			await setReuseTarget(page, id);
 			await expect(page.locator(COMPONENT_LOCATOR)).toHaveClass(/invalid-context/);
+			collapseSettingsBar(page);
 		});
 	});
 
@@ -140,7 +140,7 @@ test.describe("Reuse component", () => {
 		});
 
 		test.beforeEach(async ({ page }) => {
-			await page.goto(url);
+			await page.goto(url, {waitUntil: "domcontentloaded"});
 		});
 
 		test.afterEach(async ({ page }) => {
@@ -206,7 +206,7 @@ test.describe("Reuse component", () => {
 		});
 
 		test.beforeEach(async ({ page }) => {
-			await page.goto(url);
+			await page.goto(url, {waitUntil: "domcontentloaded"});
 		});
 
 		test("create, drag and drop and remove", async ({ page }) => {
diff --git a/tests/e2e/tests/sidebar.spec.ts b/tests/e2e/tests/sidebar.spec.ts
index bb0bae062..df28d227f 100644
--- a/tests/e2e/tests/sidebar.spec.ts
+++ b/tests/e2e/tests/sidebar.spec.ts
@@ -14,7 +14,7 @@ test.describe("sidebar", () => {
 	});
 
 	test.beforeEach(async ({ page }) => {
-		await page.goto(url);
+		await page.goto(url, {waitUntil: "domcontentloaded"});
 		test.setTimeout(5000);
 	});
 
diff --git a/tests/e2e/tests/state.spec.ts b/tests/e2e/tests/state.spec.ts
index cdedfa6f1..1e7e5f473 100644
--- a/tests/e2e/tests/state.spec.ts
+++ b/tests/e2e/tests/state.spec.ts
@@ -35,7 +35,7 @@ test.describe("state", () => {
 	});
 
 	test.beforeEach(async ({ page }) => {
-		await page.goto(url);
+		await page.goto(url, {waitUntil: "domcontentloaded"});
 	});
 
 	test("increment number", async ({ page }) => {
diff --git a/tests/e2e/tests/stateAutocompletion.spec.ts b/tests/e2e/tests/stateAutocompletion.spec.ts
index b8a624cc9..47ed5c67e 100644
--- a/tests/e2e/tests/stateAutocompletion.spec.ts
+++ b/tests/e2e/tests/stateAutocompletion.spec.ts
@@ -21,7 +21,7 @@ test.describe("state autocompletion", () => {
 	});
 
 	test.beforeEach(async ({ page }) => {
-		await page.goto(url);
+		await page.goto(url, {waitUntil: "domcontentloaded"});
 	});
 
 	test.describe("text", () => {
diff --git a/tests/e2e/tests/undoRedo.spec.ts b/tests/e2e/tests/undoRedo.spec.ts
index b9ebc4468..cbacae79a 100644
--- a/tests/e2e/tests/undoRedo.spec.ts
+++ b/tests/e2e/tests/undoRedo.spec.ts
@@ -22,7 +22,7 @@ test.describe('undo and redo', () => {
 	});
 
 	test.beforeEach(async ({ page }) => {
-		await page.goto(url);
+		await page.goto(url, {waitUntil: "domcontentloaded"});
 	});
 
 	test("create, drag and drop, property change and remove", async ({ page }) => {
diff --git a/tests/e2e/tests/workflows.spec.ts b/tests/e2e/tests/workflows.spec.ts
index 67160107b..1d299e70f 100644
--- a/tests/e2e/tests/workflows.spec.ts
+++ b/tests/e2e/tests/workflows.spec.ts
@@ -14,7 +14,7 @@ test.describe("Workflows", () => {
 	});
 
 	test.beforeEach(async ({ page }) => {
-		await page.goto(url);
+		await page.goto(url, {waitUntil: "domcontentloaded"});
 	});
 
 	const inputData = [