From 5a42476aa6bfb4b594752f4a0dd5b742d618b9b0 Mon Sep 17 00:00:00 2001
From: Mateusz Russak <mateusz@russak.biz>
Date: Mon, 19 Feb 2024 16:15:20 +0100
Subject: [PATCH] refactor: move components to subfolders by category

---
 ui/src/core/templateMap.ts                    | 85 ++++++++++---------
 .../{ => content}/CoreDataframe.vue           |  8 +-
 .../{ => content}/CoreHeading.vue             |  8 +-
 .../{ => content}/CoreIcon.vue                | 10 +--
 .../{ => content}/CoreImage.vue               | 10 +--
 .../{ => content}/CoreMessage.vue             | 10 +--
 .../{ => content}/CoreMetric.vue              |  8 +-
 .../{ => content}/CorePlotlyGraph.vue         |  8 +-
 .../{ => content}/CoreText.vue                | 10 +--
 .../{ => content}/CoreVegaLiteChart.vue       |  8 +-
 .../{ => content}/CoreVideoPlayer.vue         |  6 +-
 .../{ => layout}/CoreColumn.vue               | 12 +--
 .../{ => layout}/CoreColumns.vue              |  6 +-
 .../{ => layout}/CoreHeader.vue               |  8 +-
 .../{ => layout}/CoreHorizontalStack.vue      |  8 +-
 .../{ => layout}/CoreSection.vue              | 10 +--
 .../{ => layout}/CoreSeparator.vue            |  4 +-
 .../{ => layout}/CoreSidebar.vue              | 10 +--
 .../core_components/{ => layout}/CoreTab.vue  | 12 +--
 .../core_components/{ => layout}/CoreTabs.vue |  6 +-
 .../{ => other}/CoreButton.vue                | 10 +--
 .../core_components/{ => other}/CoreHtml.vue  |  6 +-
 .../{ => other}/CorePagination.vue            |  8 +-
 .../{ => other}/CoreRepeater.vue              |  4 +-
 .../core_components/{ => other}/CoreTimer.vue |  6 +-
 .../{ => other}/CoreWebcamCapture.vue         |  8 +-
 .../core_components/{ => root}/CorePage.vue   | 10 +--
 .../core_components/{ => root}/CoreRoot.vue   | 10 +--
 28 files changed, 156 insertions(+), 153 deletions(-)
 rename ui/src/core_components/{ => content}/CoreDataframe.vue (98%)
 rename ui/src/core_components/{ => content}/CoreHeading.vue (85%)
 rename ui/src/core_components/{ => content}/CoreIcon.vue (84%)
 rename ui/src/core_components/{ => content}/CoreImage.vue (92%)
 rename ui/src/core_components/{ => content}/CoreMessage.vue (93%)
 rename ui/src/core_components/{ => content}/CoreMetric.vue (93%)
 rename ui/src/core_components/{ => content}/CorePlotlyGraph.vue (94%)
 rename ui/src/core_components/{ => content}/CoreText.vue (92%)
 rename ui/src/core_components/{ => content}/CoreVegaLiteChart.vue (90%)
 rename ui/src/core_components/{ => content}/CoreVideoPlayer.vue (92%)
 rename ui/src/core_components/{ => layout}/CoreColumn.vue (95%)
 rename ui/src/core_components/{ => layout}/CoreColumns.vue (81%)
 rename ui/src/core_components/{ => layout}/CoreHeader.vue (83%)
 rename ui/src/core_components/{ => layout}/CoreHorizontalStack.vue (82%)
 rename ui/src/core_components/{ => layout}/CoreSection.vue (86%)
 rename ui/src/core_components/{ => layout}/CoreSeparator.vue (88%)
 rename ui/src/core_components/{ => layout}/CoreSidebar.vue (93%)
 rename ui/src/core_components/{ => layout}/CoreTab.vue (94%)
 rename ui/src/core_components/{ => layout}/CoreTabs.vue (93%)
 rename ui/src/core_components/{ => other}/CoreButton.vue (89%)
 rename ui/src/core_components/{ => other}/CoreHtml.vue (93%)
 rename ui/src/core_components/{ => other}/CorePagination.vue (98%)
 rename ui/src/core_components/{ => other}/CoreRepeater.vue (95%)
 rename ui/src/core_components/{ => other}/CoreTimer.vue (94%)
 rename ui/src/core_components/{ => other}/CoreWebcamCapture.vue (96%)
 rename ui/src/core_components/{ => root}/CorePage.vue (93%)
 rename ui/src/core_components/{ => root}/CoreRoot.vue (96%)

diff --git a/ui/src/core/templateMap.ts b/ui/src/core/templateMap.ts
index 5072e2760..3acb76c5f 100644
--- a/ui/src/core/templateMap.ts
+++ b/ui/src/core/templateMap.ts
@@ -1,52 +1,55 @@
 // Maps Streamsync component types to renderable Vue components
-
-import CorePage from "../core_components/CorePage.vue";
-import CoreSidebar from "../core_components/CoreSidebar.vue";
-import CoreText from "../core_components/CoreText.vue";
-import CoreButton from "../core_components/CoreButton.vue";
-import CoreIcon from "../core_components/CoreIcon.vue";
-import CoreSection from "../core_components/CoreSection.vue";
-import CoreHeader from "../core_components/CoreHeader.vue";
-import CoreHeading from "../core_components/CoreHeading.vue";
-import CoreDataframe from "../core_components/CoreDataframe.vue";
-import CoreHtml from "../core_components/CoreHtml.vue";
-import CorePagination from "../core_components/CorePagination.vue";
-import CoreRepeater from "../core_components/CoreRepeater.vue";
-import CoreColumn from "../core_components/CoreColumn.vue";
-import CoreColumns from "../core_components/CoreColumns.vue";
-import CoreHorizontalStack from "../core_components/CoreHorizontalStack.vue";
-import CoreSeparator from "../core_components/CoreSeparator.vue";
-import CoreTab from "../core_components/CoreTab.vue";
-import CoreTabs from "../core_components/CoreTabs.vue";
-import CoreImage from "../core_components/CoreImage.vue";
-import CorePDF from "../core_components/embed/CorePDF.vue";
-import CoreIFrame from "../core_components/embed/CoreIFrame.vue";
-import CoreGoogleMaps from "../core_components/embed/CoreGoogleMaps.vue";
-import CoreTimer from "../core_components/CoreTimer.vue";
-import CoreWebcamCapture from "../core_components/CoreWebcamCapture.vue";
-import CoreVegaLiteChart from "../core_components/CoreVegaLiteChart.vue";
-import CorePlotlyGraph from "../core_components/CorePlotlyGraph.vue";
-import CoreRoot from "../core_components/CoreRoot.vue";
-import CoreTextInput from "../core_components/input/CoreTextInput.vue";
-import CoreTextareaInput from "../core_components/input/CoreTextareaInput.vue";
-import CoreNumberInput from "../core_components/input/CoreNumberInput.vue";
-import CoreSliderInput from "../core_components/input/CoreSliderInput.vue";
+// content
+import CoreDataframe from "../core_components/content/CoreDataframe.vue";
+import CoreHeading from "../core_components/content/CoreHeading.vue";
+import CoreIcon from "../core_components/content/CoreIcon.vue";
+import CoreImage from "../core_components/content/CoreImage.vue";
+import CoreMessage from "../core_components/content/CoreMessage.vue";
+import CoreMetric from "../core_components/content/CoreMetric.vue";
+import CorePlotlyGraph from "../core_components/content/CorePlotlyGraph.vue";
+import CoreText from "../core_components/content/CoreText.vue";
+import CoreVegaLiteChart from "../core_components/content/CoreVegaLiteChart.vue";
+import CoreVideoPlayer from "../core_components/content/CoreVideoPlayer.vue";
+// input
+import CoreCheckboxInput from "../core_components/input/CoreCheckboxInput.vue";
 import CoreDateInput from "../core_components/input/CoreDateInput.vue";
-import CoreRadioInput from "../core_components/input/CoreRadioInput.vue";
 import CoreDropdownInput from "../core_components/input/CoreDropdownInput.vue";
-import CoreSelectInput from "../core_components/input/CoreSelectInput.vue";
-import CoreMultiselectInput from "../core_components/input/CoreMultiselectInput.vue";
-import CoreCheckboxInput from "../core_components/input/CoreCheckboxInput.vue";
 import CoreFileInput from "../core_components/input/CoreFileInput.vue";
-import CoreMetric from "../core_components/CoreMetric.vue";
-import CoreMessage from "../core_components/CoreMessage.vue";
-import CoreVideoPlayer from "../core_components/CoreVideoPlayer.vue";
+import CoreMultiselectInput from "../core_components/input/CoreMultiselectInput.vue";
+import CoreNumberInput from "../core_components/input/CoreNumberInput.vue";
+import CoreRadioInput from "../core_components/input/CoreRadioInput.vue";
+import CoreSelectInput from "../core_components/input/CoreSelectInput.vue";
+import CoreSliderInput from "../core_components/input/CoreSliderInput.vue";
+import CoreTextInput from "../core_components/input/CoreTextInput.vue";
+import CoreTextareaInput from "../core_components/input/CoreTextareaInput.vue";
+// layout
+import CoreColumn from "../core_components/layout/CoreColumn.vue";
+import CoreColumns from "../core_components/layout/CoreColumns.vue";
+import CoreHeader from "../core_components/layout/CoreHeader.vue";
+import CoreHorizontalStack from "../core_components/layout/CoreHorizontalStack.vue";
+import CoreSection from "../core_components/layout/CoreSection.vue";
+import CoreSeparator from "../core_components/layout/CoreSeparator.vue";
+import CoreSidebar from "../core_components/layout/CoreSidebar.vue";
+import CoreTab from "../core_components/layout/CoreTab.vue";
+import CoreTabs from "../core_components/layout/CoreTabs.vue";
+// other
+import CoreButton from "../core_components/other/CoreButton.vue";
+import CoreHtml from "../core_components/other/CoreHtml.vue";
+import CorePagination from "../core_components/other/CorePagination.vue";
+import CoreRepeater from "../core_components/other/CoreRepeater.vue";
+import CoreTimer from "../core_components/other/CoreTimer.vue";
+import CoreWebcamCapture from "../core_components/other/CoreWebcamCapture.vue";
+// embed
+import CorePDF from "../core_components/embed/CorePDF.vue";
+import CoreIFrame from "../core_components/embed/CoreIFrame.vue";
+import CoreGoogleMaps from "../core_components/embed/CoreGoogleMaps.vue";
+// root
+import CorePage from "../core_components/root/CorePage.vue";
+import CoreRoot from "../core_components/root/CoreRoot.vue";
 
 import { StreamsyncComponentDefinition } from "../streamsyncTypes";
 import { h } from "vue";
 
-
-
 const templateMap = {
 	root: CoreRoot,
 	page: CorePage,
diff --git a/ui/src/core_components/CoreDataframe.vue b/ui/src/core_components/content/CoreDataframe.vue
similarity index 98%
rename from ui/src/core_components/CoreDataframe.vue
rename to ui/src/core_components/content/CoreDataframe.vue
index e4f9c36f4..f39c4533e 100644
--- a/ui/src/core_components/CoreDataframe.vue
+++ b/ui/src/core_components/content/CoreDataframe.vue
@@ -100,13 +100,13 @@
 
 <script lang="ts">
 import { Ref, computed, inject, ref } from "vue";
-import { FieldCategory, FieldType } from "../streamsyncTypes";
+import { FieldCategory, FieldType } from "../../streamsyncTypes";
 import {
 	cssClasses,
 	primaryTextColor,
 	secondaryTextColor,
 	separatorColor,
-} from "../renderer/sharedStyleFields";
+} from "../../renderer/sharedStyleFields";
 import { onMounted } from "vue";
 import { watch } from "vue";
 import { nextTick } from "vue";
@@ -208,7 +208,7 @@ export default {
 };
 </script>
 <script setup lang="ts">
-import injectionKeys from "../injectionKeys";
+import injectionKeys from "../../injectionKeys";
 import * as aq from "arquero";
 import { tableFromIPC, Table } from "apache-arrow";
 
@@ -518,7 +518,7 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-@import "../renderer/sharedStyles.css";
+@import "../../renderer/sharedStyles.css";
 
 .CoreDataframe {
 	font-size: 0.8rem;
diff --git a/ui/src/core_components/CoreHeading.vue b/ui/src/core_components/content/CoreHeading.vue
similarity index 85%
rename from ui/src/core_components/CoreHeading.vue
rename to ui/src/core_components/content/CoreHeading.vue
index dd95b6332..c3e6b6c3d 100644
--- a/ui/src/core_components/CoreHeading.vue
+++ b/ui/src/core_components/content/CoreHeading.vue
@@ -8,8 +8,8 @@
 </template>
 
 <script lang="ts">
-import { FieldCategory, FieldType } from "../streamsyncTypes";
-import { cssClasses, primaryTextColor } from "../renderer/sharedStyleFields";
+import { FieldCategory, FieldType } from "../../streamsyncTypes";
+import { cssClasses, primaryTextColor } from "../../renderer/sharedStyleFields";
 
 const description =
 	"A text component used to display headings or titles in different sizes and styles.";
@@ -58,11 +58,11 @@ export default {
 </script>
 <script setup lang="ts">
 import { inject } from "vue";
-import injectionKeys from "../injectionKeys";
+import injectionKeys from "../../injectionKeys";
 const fields = inject(injectionKeys.evaluatedFields);
 </script>
 <style scoped>
-@import "../renderer/sharedStyles.css";
+@import "../../renderer/sharedStyles.css";
 
 .CoreHeading {
 	color: var(--primaryTextColor);
diff --git a/ui/src/core_components/CoreIcon.vue b/ui/src/core_components/content/CoreIcon.vue
similarity index 84%
rename from ui/src/core_components/CoreIcon.vue
rename to ui/src/core_components/content/CoreIcon.vue
index 0cd5aeafe..4c3bfb1a5 100644
--- a/ui/src/core_components/CoreIcon.vue
+++ b/ui/src/core_components/content/CoreIcon.vue
@@ -9,8 +9,8 @@
 </template>
 
 <script lang="ts">
-import {FieldCategory, FieldType} from "../streamsyncTypes";
-import {cssClasses} from "../renderer/sharedStyleFields";
+import {FieldCategory, FieldType} from "../../streamsyncTypes";
+import {cssClasses} from "../../renderer/sharedStyleFields";
 
 const docs = `
 Streamsync uses the library RemixIcon to display icons. To include an icon, check remixicon.com, find the icon's id (such as \`arrow-up\`)
@@ -51,17 +51,17 @@ export default {
 
 <script setup lang="ts">
 import {inject} from "vue";
-import injectionKeys from "../injectionKeys";
+import injectionKeys from "../../injectionKeys";
 
 const fields = inject(injectionKeys.evaluatedFields);
 
 </script>
 
 <style scoped>
-@import "../renderer/sharedStyles.css";
+@import "../../renderer/sharedStyles.css";
 
 .icon {
 	display: flex;
 	align-items: center;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/ui/src/core_components/CoreImage.vue b/ui/src/core_components/content/CoreImage.vue
similarity index 92%
rename from ui/src/core_components/CoreImage.vue
rename to ui/src/core_components/content/CoreImage.vue
index 4fa88bed6..45ea33468 100644
--- a/ui/src/core_components/CoreImage.vue
+++ b/ui/src/core_components/content/CoreImage.vue
@@ -16,9 +16,9 @@
 </template>
 
 <script lang="ts">
-import { FieldCategory, FieldType } from "../streamsyncTypes";
-import { cssClasses, secondaryTextColor } from "../renderer/sharedStyleFields";
-import { getClick } from "../renderer/syntheticEvents";
+import { FieldCategory, FieldType } from "../../streamsyncTypes";
+import { cssClasses, secondaryTextColor } from "../../renderer/sharedStyleFields";
+import { getClick } from "../../renderer/syntheticEvents";
 
 const description = "A component to display images.";
 
@@ -92,7 +92,7 @@ export default {
 
 <script setup lang="ts">
 import { Ref, computed, inject, ref } from "vue";
-import injectionKeys from "../injectionKeys";
+import injectionKeys from "../../injectionKeys";
 
 const rootEl:Ref<HTMLElement> = ref(null); 
 const ss = inject(injectionKeys.core);
@@ -125,7 +125,7 @@ function handleClick(ev: MouseEvent) {
 </script>
 
 <style scoped>
-@import "../renderer/sharedStyles.css";
+@import "../../renderer/sharedStyles.css";
 
 .CoreImage {
 	width: fit-content;
diff --git a/ui/src/core_components/CoreMessage.vue b/ui/src/core_components/content/CoreMessage.vue
similarity index 93%
rename from ui/src/core_components/CoreMessage.vue
rename to ui/src/core_components/content/CoreMessage.vue
index b4c55bfc3..78b9570ff 100644
--- a/ui/src/core_components/CoreMessage.vue
+++ b/ui/src/core_components/content/CoreMessage.vue
@@ -18,9 +18,9 @@
 </template>
 
 <script lang="ts">
-import LoadingSymbol from "../renderer/LoadingSymbol.vue";
-import { FieldCategory, FieldType } from "../streamsyncTypes";
-import { cssClasses, primaryTextColor } from "../renderer/sharedStyleFields";
+import LoadingSymbol from "../../renderer/LoadingSymbol.vue";
+import { FieldCategory, FieldType } from "../../streamsyncTypes";
+import { cssClasses, primaryTextColor } from "../../renderer/sharedStyleFields";
 
 const description =
 	"A component that displays a message in various styles, including success, error, warning, and informational.";
@@ -92,7 +92,7 @@ export default {
 </script>
 <script setup lang="ts">
 import { computed, inject } from "vue";
-import injectionKeys from "../injectionKeys";
+import injectionKeys from "../../injectionKeys";
 
 const fields = inject(injectionKeys.evaluatedFields);
 const isBeingEdited = inject(injectionKeys.isBeingEdited);
@@ -142,7 +142,7 @@ const rootStyle = computed(() => {
 });
 </script>
 <style scoped>
-@import "../renderer/sharedStyles.css";
+@import "../../renderer/sharedStyles.css";
 
 .CoreMessage {
 	color: var(--primaryTextColor);
diff --git a/ui/src/core_components/CoreMetric.vue b/ui/src/core_components/content/CoreMetric.vue
similarity index 93%
rename from ui/src/core_components/CoreMetric.vue
rename to ui/src/core_components/content/CoreMetric.vue
index 5bc9bbba0..f0006aaf0 100644
--- a/ui/src/core_components/CoreMetric.vue
+++ b/ui/src/core_components/content/CoreMetric.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script lang="ts">
-import { FieldCategory, FieldType } from "../streamsyncTypes";
+import { FieldCategory, FieldType } from "../../streamsyncTypes";
 import {
 cssClasses,
 	primaryTextColor,
 	secondaryTextColor
-} from "../renderer/sharedStyleFields";
+} from "../../renderer/sharedStyleFields";
 
 const description =
 	"A component that prominently displays a metric value and associated information.";
@@ -75,7 +75,7 @@ export default {
 </script>
 <script setup lang="ts">
 import { computed, inject } from "vue";
-import injectionKeys from "../injectionKeys";
+import injectionKeys from "../../injectionKeys";
 const fields = inject(injectionKeys.evaluatedFields);
 
 const sentiment = computed(() => {
@@ -112,7 +112,7 @@ const rootStyle = computed(() => {
 });
 </script>
 <style scoped>
-@import "../renderer/sharedStyles.css";
+@import "../../renderer/sharedStyles.css";
 
 .CoreMetric {
 	color: var(--primaryTextColor);
diff --git a/ui/src/core_components/CorePlotlyGraph.vue b/ui/src/core_components/content/CorePlotlyGraph.vue
similarity index 94%
rename from ui/src/core_components/CorePlotlyGraph.vue
rename to ui/src/core_components/content/CorePlotlyGraph.vue
index 4f9dcc069..413afd48d 100644
--- a/ui/src/core_components/CorePlotlyGraph.vue
+++ b/ui/src/core_components/content/CorePlotlyGraph.vue
@@ -8,8 +8,8 @@
 </template>
 
 <script lang="ts">
-import { FieldType } from "../streamsyncTypes";
-import { cssClasses } from "../renderer/sharedStyleFields";
+import { FieldType } from "../../streamsyncTypes";
+import { cssClasses } from "../../renderer/sharedStyleFields";
 
 const description = "A component that displays Plotly graphs.";
 
@@ -59,7 +59,7 @@ export default {
 
 <script setup lang="ts">
 import { computed, inject, onMounted, Ref, ref, watch } from "vue";
-import injectionKeys from "../injectionKeys";
+import injectionKeys from "../../injectionKeys";
 
 const rootEl: Ref<HTMLElement> = ref(null);
 const chartTargetEl: Ref<HTMLElement> = ref(null);
@@ -142,7 +142,7 @@ onMounted(async () => {
 </script>
 
 <style scoped>
-@import "../renderer/sharedStyles.css";
+@import "../../renderer/sharedStyles.css";
 
 .CorePlotlyGraph {
 	min-height: 1px;
diff --git a/ui/src/core_components/CoreText.vue b/ui/src/core_components/content/CoreText.vue
similarity index 92%
rename from ui/src/core_components/CoreText.vue
rename to ui/src/core_components/content/CoreText.vue
index 0b3c14b86..7f9f69597 100644
--- a/ui/src/core_components/CoreText.vue
+++ b/ui/src/core_components/content/CoreText.vue
@@ -14,9 +14,9 @@
 </template>
 
 <script lang="ts">
-import { FieldCategory, FieldControl, FieldType } from "../streamsyncTypes";
-import {cssClasses, primaryTextColor} from "../renderer/sharedStyleFields";
-import { getClick } from "../renderer/syntheticEvents";
+import { FieldCategory, FieldControl, FieldType } from "../../streamsyncTypes";
+import {cssClasses, primaryTextColor} from "../../renderer/sharedStyleFields";
+import { getClick } from "../../renderer/syntheticEvents";
 
 const clickHandlerStub = `
 def click_handler(state):
@@ -78,7 +78,7 @@ export default {
 <script setup lang="ts">
 import { marked } from "marked";
 import { Ref, computed, inject, ref } from "vue";
-import injectionKeys from "../injectionKeys";
+import injectionKeys from "../../injectionKeys";
 
 const rootEl:Ref<HTMLElement> = ref(null);
 const fields = inject(injectionKeys.evaluatedFields);
@@ -112,7 +112,7 @@ function handleClick(ev: MouseEvent) {
 </script>
 
 <style scoped>
-@import "../renderer/sharedStyles.css";
+@import "../../renderer/sharedStyles.css";
 
 .CoreText {
 	color: var(--primaryTextColor);
diff --git a/ui/src/core_components/CoreVegaLiteChart.vue b/ui/src/core_components/content/CoreVegaLiteChart.vue
similarity index 90%
rename from ui/src/core_components/CoreVegaLiteChart.vue
rename to ui/src/core_components/content/CoreVegaLiteChart.vue
index 4a212c1b0..857a3593d 100644
--- a/ui/src/core_components/CoreVegaLiteChart.vue
+++ b/ui/src/core_components/content/CoreVegaLiteChart.vue
@@ -5,8 +5,8 @@
 </template>
 
 <script lang="ts">
-import { FieldType } from "../streamsyncTypes";
-import { cssClasses } from "../renderer/sharedStyleFields";
+import { FieldType } from "../../streamsyncTypes";
+import { cssClasses } from "../../renderer/sharedStyleFields";
 
 const description = "A component that displays Vega-Lite/Altair charts.";
 
@@ -60,7 +60,7 @@ export default {
 
 <script setup lang="ts">
 import { inject, onMounted, Ref, ref, watch } from "vue";
-import injectionKeys from "../injectionKeys";
+import injectionKeys from "../../injectionKeys";
 
 const rootEl: Ref<HTMLElement> = ref(null);
 const chartTargetEl: Ref<HTMLElement> = ref(null);
@@ -90,7 +90,7 @@ onMounted(() => {
 </script>
 
 <style scoped>
-@import "../renderer/sharedStyles.css";
+@import "../../renderer/sharedStyles.css";
 
 .CoreVegaLiteChart {
 	min-height: 1px;
diff --git a/ui/src/core_components/CoreVideoPlayer.vue b/ui/src/core_components/content/CoreVideoPlayer.vue
similarity index 92%
rename from ui/src/core_components/CoreVideoPlayer.vue
rename to ui/src/core_components/content/CoreVideoPlayer.vue
index 8d46f4d1b..46fff7acb 100644
--- a/ui/src/core_components/CoreVideoPlayer.vue
+++ b/ui/src/core_components/content/CoreVideoPlayer.vue
@@ -11,8 +11,8 @@
 </template>
 
 <script lang="ts">
-import { FieldType } from "../streamsyncTypes";
-import { cssClasses } from "../renderer/sharedStyleFields";
+import { FieldType } from "../../streamsyncTypes";
+import { cssClasses } from "../../renderer/sharedStyleFields";
 
 const description =
 	"A video player component that can play various video formats.";
@@ -91,7 +91,7 @@ export default {
 
 <script setup lang="ts">
 import { inject } from "vue";
-import injectionKeys from "../injectionKeys";
+import injectionKeys from "../../injectionKeys";
 
 const fields = inject(injectionKeys.evaluatedFields);
 </script>
diff --git a/ui/src/core_components/CoreColumn.vue b/ui/src/core_components/layout/CoreColumn.vue
similarity index 95%
rename from ui/src/core_components/CoreColumn.vue
rename to ui/src/core_components/layout/CoreColumn.vue
index 8cfc3dd33..932fa2b39 100644
--- a/ui/src/core_components/CoreColumn.vue
+++ b/ui/src/core_components/layout/CoreColumn.vue
@@ -41,14 +41,14 @@
 </template>
 
 <script lang="ts">
-import { FieldCategory, FieldType } from "../streamsyncTypes";
+import { FieldCategory, FieldType } from "../../streamsyncTypes";
 import {
 	contentHAlign,
 	contentPadding,
 	contentVAlign,
 	cssClasses,
 	separatorColor,
-} from "../renderer/sharedStyleFields";
+} from "../../renderer/sharedStyleFields";
 
 const description =
 	"A layout component that organises its child components in columns. Must be inside a Column Container component.";
@@ -116,9 +116,9 @@ export default {
 </script>
 <script setup lang="ts">
 import { computed, ComputedRef, inject, Ref, ref, watch } from "vue";
-import injectionKeys from "../injectionKeys";
-import IconGen from "../renderer/IconGen.vue";
-import BaseContainer from "./base/BaseContainer.vue";
+import injectionKeys from "../../injectionKeys";
+import IconGen from "../../renderer/IconGen.vue";
+import BaseContainer from "../base/BaseContainer.vue";
 const instancePath = inject(injectionKeys.instancePath);
 const instanceData = inject(injectionKeys.instanceData);
 const ss = inject(injectionKeys.core);
@@ -196,7 +196,7 @@ watch(
 </script>
 
 <style scoped>
-@import "../renderer/sharedStyles.css";
+@import "../../renderer/sharedStyles.css";
 
 .CoreColumn {
 	min-width: 0;
diff --git a/ui/src/core_components/CoreColumns.vue b/ui/src/core_components/layout/CoreColumns.vue
similarity index 81%
rename from ui/src/core_components/CoreColumns.vue
rename to ui/src/core_components/layout/CoreColumns.vue
index a91add7d9..212345798 100644
--- a/ui/src/core_components/CoreColumns.vue
+++ b/ui/src/core_components/layout/CoreColumns.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts">
-import { cssClasses } from "../renderer/sharedStyleFields";
+import { cssClasses } from "../../renderer/sharedStyleFields";
 
 export default {
 	streamsync: {
@@ -22,14 +22,14 @@ export default {
 
 <script setup lang="ts">
 import { inject } from "vue";
-import injectionKeys from "../injectionKeys";
+import injectionKeys from "../../injectionKeys";
 
 const instanceData = inject(injectionKeys.instanceData);
 instanceData.at(-1).value = { minimumNonCollapsiblePosition: undefined };
 </script>
 
 <style scoped>
-@import "../renderer/sharedStyles.css";
+@import "../../renderer/sharedStyles.css";
 
 .CoreColumns {
 	width: 100%;
diff --git a/ui/src/core_components/CoreHeader.vue b/ui/src/core_components/layout/CoreHeader.vue
similarity index 83%
rename from ui/src/core_components/CoreHeader.vue
rename to ui/src/core_components/layout/CoreHeader.vue
index 4672edce2..678e2a843 100644
--- a/ui/src/core_components/CoreHeader.vue
+++ b/ui/src/core_components/layout/CoreHeader.vue
@@ -10,8 +10,8 @@
 </template>
 
 <script lang="ts">
-import { FieldType } from "../streamsyncTypes";
-import { accentColor, cssClasses, emptinessColor } from "../renderer/sharedStyleFields";
+import { FieldType } from "../../streamsyncTypes";
+import { accentColor, cssClasses, emptinessColor } from "../../renderer/sharedStyleFields";
 
 const description =
 	"A container component that typically contains the main navigation elements.";
@@ -39,13 +39,13 @@ export default {
 </script>
 <script setup lang="ts">
 import { inject } from "vue";
-import injectionKeys from "../injectionKeys";
+import injectionKeys from "../../injectionKeys";
 
 const fields = inject(injectionKeys.evaluatedFields);
 </script>
 
 <style scoped>
-@import "../renderer/sharedStyles.css";
+@import "../../renderer/sharedStyles.css";
 
 .CoreHeader {
 	display: flex;
diff --git a/ui/src/core_components/CoreHorizontalStack.vue b/ui/src/core_components/layout/CoreHorizontalStack.vue
similarity index 82%
rename from ui/src/core_components/CoreHorizontalStack.vue
rename to ui/src/core_components/layout/CoreHorizontalStack.vue
index a915aea22..0e81ceca6 100644
--- a/ui/src/core_components/CoreHorizontalStack.vue
+++ b/ui/src/core_components/layout/CoreHorizontalStack.vue
@@ -15,7 +15,7 @@ import {
 	contentHAlign,
 	contentPadding,
 	cssClasses,
-} from "../renderer/sharedStyleFields";
+} from "../../renderer/sharedStyleFields";
 
 const description =
 	"A layout component that stacks its child components horizontally, wrapping them to the next row if necessary.";
@@ -39,14 +39,14 @@ export default {
 </script>
 <script setup lang="ts">
 import { inject } from "vue";
-import injectionKeys from "../injectionKeys";
-import BaseContainer from "./base/BaseContainer.vue";
+import injectionKeys from "../../injectionKeys";
+import BaseContainer from "../base/BaseContainer.vue";
 
 const fields = inject(injectionKeys.evaluatedFields);
 </script>
 
 <style scoped>
-@import "../renderer/sharedStyles.css";
+@import "../../renderer/sharedStyles.css";
 
 .CoreHorizontalStack {
 	width: 100%;
diff --git a/ui/src/core_components/CoreSection.vue b/ui/src/core_components/layout/CoreSection.vue
similarity index 86%
rename from ui/src/core_components/CoreSection.vue
rename to ui/src/core_components/layout/CoreSection.vue
index a01a01b30..c35730429 100644
--- a/ui/src/core_components/CoreSection.vue
+++ b/ui/src/core_components/layout/CoreSection.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script lang="ts">
-import { FieldType } from "../streamsyncTypes";
+import { FieldType } from "../../streamsyncTypes";
 import {
 	accentColor,
 	primaryTextColor,
@@ -25,7 +25,7 @@ import {
 	cssClasses,
 	contentHAlign,
 	contentPadding,
-} from "../renderer/sharedStyleFields";
+} from "../../renderer/sharedStyleFields";
 
 const description =
 	"A container component that divides the layout into sections, with an optional title.";
@@ -65,14 +65,14 @@ export default {
 </script>
 <script setup lang="ts">
 import { inject } from "vue";
-import injectionKeys from "../injectionKeys";
-import BaseContainer from "./base/BaseContainer.vue";
+import injectionKeys from "../../injectionKeys";
+import BaseContainer from "../base/BaseContainer.vue";
 
 const fields = inject(injectionKeys.evaluatedFields);
 </script>
 
 <style scoped>
-@import "../renderer/sharedStyles.css";
+@import "../../renderer/sharedStyles.css";
 .CoreSection {
 	overflow: hidden;
 	border: 1px solid var(--separatorColor);
diff --git a/ui/src/core_components/CoreSeparator.vue b/ui/src/core_components/layout/CoreSeparator.vue
similarity index 88%
rename from ui/src/core_components/CoreSeparator.vue
rename to ui/src/core_components/layout/CoreSeparator.vue
index 96888638f..58082e4d8 100644
--- a/ui/src/core_components/CoreSeparator.vue
+++ b/ui/src/core_components/layout/CoreSeparator.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts">
-import { cssClasses, separatorColor } from "../renderer/sharedStyleFields";
+import { cssClasses, separatorColor } from "../../renderer/sharedStyleFields";
 
 const description =
 	"A visual component to create a separation between adjacent elements.";
@@ -31,7 +31,7 @@ export default {
 </script>
 
 <style scoped>
-@import "../renderer/sharedStyles.css";
+@import "../../renderer/sharedStyles.css";
 .CoreSeparator {
 	min-height: 1px;
 	min-width: 1px;
diff --git a/ui/src/core_components/CoreSidebar.vue b/ui/src/core_components/layout/CoreSidebar.vue
similarity index 93%
rename from ui/src/core_components/CoreSidebar.vue
rename to ui/src/core_components/layout/CoreSidebar.vue
index 332648c9b..7315c6a17 100644
--- a/ui/src/core_components/CoreSidebar.vue
+++ b/ui/src/core_components/layout/CoreSidebar.vue
@@ -21,7 +21,7 @@
 </template>
 
 <script lang="ts">
-import { Component, FieldCategory, FieldType } from "../streamsyncTypes";
+import { Component, FieldCategory, FieldType } from "../../streamsyncTypes";
 import {
 	accentColor,
 	primaryTextColor,
@@ -33,7 +33,7 @@ import {
 	buttonTextColor,
 	buttonShadow,
 	cssClasses,
-} from "../renderer/sharedStyleFields";
+} from "../../renderer/sharedStyleFields";
 
 const description =
 	"A container component that organises its children in a sidebar. Its parent must be a Page component.";
@@ -80,8 +80,8 @@ export default {
 </script>
 <script setup lang="ts">
 import { computed, inject, onMounted, Ref, ref, watch } from "vue";
-import injectionKeys from "../injectionKeys";
-import IconGen from "../renderer/IconGen.vue";
+import injectionKeys from "../../injectionKeys";
+import IconGen from "../../renderer/IconGen.vue";
 
 const fields = inject(injectionKeys.evaluatedFields);
 const isCollapsed: Ref<boolean> = ref(fields.startCollapsed.value == "yes");
@@ -124,7 +124,7 @@ onMounted(() => {
 </script>
 
 <style scoped>
-@import "../renderer/sharedStyles.css";
+@import "../../renderer/sharedStyles.css";
 
 .CoreSidebar {
 	overflow: auto;
diff --git a/ui/src/core_components/CoreTab.vue b/ui/src/core_components/layout/CoreTab.vue
similarity index 94%
rename from ui/src/core_components/CoreTab.vue
rename to ui/src/core_components/layout/CoreTab.vue
index 16f9db156..3920f927b 100644
--- a/ui/src/core_components/CoreTab.vue
+++ b/ui/src/core_components/layout/CoreTab.vue
@@ -53,13 +53,13 @@
 const TAB_BIT_INSTANCE_NUMBER = 0;
 const CONTENT_DISPLAYING_INSTANCE_NUMBER = 1;
 
-import { Component, FieldType, InstancePath } from "../streamsyncTypes";
-import { useEvaluator } from "../renderer/useEvaluator";
+import { Component, FieldType, InstancePath } from "../../streamsyncTypes";
+import { useEvaluator } from "../../renderer/useEvaluator";
 import {
 	contentHAlign,
 	cssClasses,
 	contentPadding,
-} from "../renderer/sharedStyleFields";
+} from "../../renderer/sharedStyleFields";
 
 const description =
 	"A container component that displays its child components as a tab inside a Tab Container.";
@@ -91,8 +91,8 @@ export default {
 </script>
 <script setup lang="ts">
 import { computed, inject, onBeforeMount, watch } from "vue";
-import injectionKeys from "../injectionKeys";
-import BaseContainer from "./base/BaseContainer.vue";
+import injectionKeys from "../../injectionKeys";
+import BaseContainer from "../base/BaseContainer.vue";
 
 const fields = inject(injectionKeys.evaluatedFields);
 const instancePath = inject(injectionKeys.instancePath);
@@ -196,7 +196,7 @@ onBeforeMount(() => {
 </script>
 
 <style scoped>
-@import "../renderer/sharedStyles.css";
+@import "../../renderer/sharedStyles.css";
 
 button.bit {
 	padding: 16px 0 16px 0;
diff --git a/ui/src/core_components/CoreTabs.vue b/ui/src/core_components/layout/CoreTabs.vue
similarity index 93%
rename from ui/src/core_components/CoreTabs.vue
rename to ui/src/core_components/layout/CoreTabs.vue
index 9e0fe339a..db44f68aa 100644
--- a/ui/src/core_components/CoreTabs.vue
+++ b/ui/src/core_components/layout/CoreTabs.vue
@@ -25,7 +25,7 @@ import {
 	buttonTextColor,
 	buttonShadow,
 	cssClasses,
-} from "../renderer/sharedStyleFields";
+} from "../../renderer/sharedStyleFields";
 
 const description =
 	"A container component for organising and displaying Tab components in a tabbed interface.";
@@ -53,14 +53,14 @@ export default {
 </script>
 <script setup lang="ts">
 import { inject } from "vue";
-import injectionKeys from "../injectionKeys";
+import injectionKeys from "../../injectionKeys";
 
 const instanceData = inject(injectionKeys.instanceData);
 instanceData.at(-1).value = { activeTab: undefined };
 </script>
 
 <style scoped>
-@import "../renderer/sharedStyles.css";
+@import "../../renderer/sharedStyles.css";
 
 .CoreTabs {
 	width: 100%;
diff --git a/ui/src/core_components/CoreButton.vue b/ui/src/core_components/other/CoreButton.vue
similarity index 89%
rename from ui/src/core_components/CoreButton.vue
rename to ui/src/core_components/other/CoreButton.vue
index b60742a15..72c76b53d 100644
--- a/ui/src/core_components/CoreButton.vue
+++ b/ui/src/core_components/other/CoreButton.vue
@@ -9,16 +9,16 @@
 </template>
 
 <script lang="ts">
-import { FieldCategory, FieldType } from "../streamsyncTypes";
+import { FieldCategory, FieldType } from "../../streamsyncTypes";
 import {
 	buttonColor,
 	buttonTextColor,
 	buttonShadow,
 	separatorColor,
 	cssClasses,
-} from "../renderer/sharedStyleFields";
+} from "../../renderer/sharedStyleFields";
 import { watch } from "vue";
-import { getClick } from "../renderer/syntheticEvents";
+import { getClick } from "../../renderer/syntheticEvents";
 
 const clickHandlerStub = `
 def handle_button_click(state):
@@ -80,7 +80,7 @@ export default {
 </script>
 <script setup lang="ts">
 import { Ref, inject, ref } from "vue";
-import injectionKeys from "../injectionKeys";
+import injectionKeys from "../../injectionKeys";
 
 const rootEl:Ref<HTMLElement> = ref(null);
 const fields = inject(injectionKeys.evaluatedFields);
@@ -100,7 +100,7 @@ function handleClick(ev: MouseEvent) {
 </script>
 
 <style scoped>
-@import "../renderer/sharedStyles.css";
+@import "../../renderer/sharedStyles.css";
 
 .CoreButton {
 	width: fit-content;
diff --git a/ui/src/core_components/CoreHtml.vue b/ui/src/core_components/other/CoreHtml.vue
similarity index 93%
rename from ui/src/core_components/CoreHtml.vue
rename to ui/src/core_components/other/CoreHtml.vue
index adcd0ccbd..eb0ae93f0 100644
--- a/ui/src/core_components/CoreHtml.vue
+++ b/ui/src/core_components/other/CoreHtml.vue
@@ -1,8 +1,8 @@
 <script lang="ts">
 import { h, inject } from "vue";
-import { FieldControl, FieldType } from "../streamsyncTypes";
-import injectionKeys from "../injectionKeys";
-import { cssClasses } from "../renderer/sharedStyleFields";
+import { FieldControl, FieldType } from "../../streamsyncTypes";
+import injectionKeys from "../../injectionKeys";
+import { cssClasses } from "../../renderer/sharedStyleFields";
 
 const defaultStyle = {
 	padding: "16px",
diff --git a/ui/src/core_components/CorePagination.vue b/ui/src/core_components/other/CorePagination.vue
similarity index 98%
rename from ui/src/core_components/CorePagination.vue
rename to ui/src/core_components/other/CorePagination.vue
index b22580f0f..83915203f 100644
--- a/ui/src/core_components/CorePagination.vue
+++ b/ui/src/core_components/other/CorePagination.vue
@@ -36,7 +36,7 @@
 </template>
 
 <script lang="ts">
-import { FieldType } from "../streamsyncTypes";
+import { FieldType } from "../../streamsyncTypes";
 
 const pageChangeStub = `
 def handle_page_change(state, payload):
@@ -139,8 +139,8 @@ export default {
 
 <script setup lang="ts">
 import {Ref, inject, ref, computed, watch, onUnmounted, onMounted} from "vue";
-import injectionKeys from "../injectionKeys";
-import {useFormValueBroker} from "../renderer/useFormValueBroker";
+import injectionKeys from "../../injectionKeys";
+import {useFormValueBroker} from "../../renderer/useFormValueBroker";
 
 const fields = inject(injectionKeys.evaluatedFields);
 const ss = inject(injectionKeys.core);
@@ -430,4 +430,4 @@ onUnmounted(() => {
 .bold {
 	font-weight: bold;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/ui/src/core_components/CoreRepeater.vue b/ui/src/core_components/other/CoreRepeater.vue
similarity index 95%
rename from ui/src/core_components/CoreRepeater.vue
rename to ui/src/core_components/other/CoreRepeater.vue
index c2c20afab..91fc47607 100644
--- a/ui/src/core_components/CoreRepeater.vue
+++ b/ui/src/core_components/other/CoreRepeater.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import { computed, h, inject } from "vue";
-import { FieldType } from "../streamsyncTypes";
-import injectionKeys from "../injectionKeys";
+import { FieldType } from "../../streamsyncTypes";
+import injectionKeys from "../../injectionKeys";
 
 const description =
 	"A container component that repeats its child components based on a dictionary.";
diff --git a/ui/src/core_components/CoreTimer.vue b/ui/src/core_components/other/CoreTimer.vue
similarity index 94%
rename from ui/src/core_components/CoreTimer.vue
rename to ui/src/core_components/other/CoreTimer.vue
index 0a97ca9bf..e29de0cca 100644
--- a/ui/src/core_components/CoreTimer.vue
+++ b/ui/src/core_components/other/CoreTimer.vue
@@ -8,8 +8,8 @@
 </template>
 
 <script lang="ts">
-import { FieldType } from "../streamsyncTypes";
-import { accentColor, cssClasses } from "../renderer/sharedStyleFields";
+import { FieldType } from "../../streamsyncTypes";
+import { accentColor, cssClasses } from "../../renderer/sharedStyleFields";
 const description =
 	"A component that emits an event repeatedly at specified time intervals, enabling time-based refresh.";
 
@@ -57,7 +57,7 @@ export default {
 
 <script setup lang="ts">
 import { computed, inject, nextTick, onMounted, Ref, ref, watch } from "vue";
-import injectionKeys from "../injectionKeys";
+import injectionKeys from "../../injectionKeys";
 
 
 const MIN_ANIMATION_RESET_MS = 500;
diff --git a/ui/src/core_components/CoreWebcamCapture.vue b/ui/src/core_components/other/CoreWebcamCapture.vue
similarity index 96%
rename from ui/src/core_components/CoreWebcamCapture.vue
rename to ui/src/core_components/other/CoreWebcamCapture.vue
index c2f18df3a..d94a51d18 100644
--- a/ui/src/core_components/CoreWebcamCapture.vue
+++ b/ui/src/core_components/other/CoreWebcamCapture.vue
@@ -25,14 +25,14 @@
 </template>
 
 <script lang="ts">
-import { FieldType } from "../streamsyncTypes";
+import { FieldType } from "../../streamsyncTypes";
 import {
 	buttonColor,
 	buttonShadow,
 	buttonTextColor,
 	cssClasses,
 	separatorColor
-} from "../renderer/sharedStyleFields";
+} from "../../renderer/sharedStyleFields";
 
 const description =
 	"A user input component that allows users to capture images using their webcam.";
@@ -91,7 +91,7 @@ import {
 	ref,
 	watch,
 } from "vue";
-import injectionKeys from "../injectionKeys";
+import injectionKeys from "../../injectionKeys";
 
 const isActive = ref(false);
 const rootEl: Ref<HTMLElement> = ref(null);
@@ -218,7 +218,7 @@ const stopCapture = () => {
 </script>
 
 <style scoped>
-@import "../renderer/sharedStyles.css";
+@import "../../renderer/sharedStyles.css";
 
 .CoreWebcamCapture {
 	width: 100%;
diff --git a/ui/src/core_components/CorePage.vue b/ui/src/core_components/root/CorePage.vue
similarity index 93%
rename from ui/src/core_components/CorePage.vue
rename to ui/src/core_components/root/CorePage.vue
index b14c0a350..64eb97473 100644
--- a/ui/src/core_components/CorePage.vue
+++ b/ui/src/core_components/root/CorePage.vue
@@ -22,7 +22,7 @@
 </template>
 
 <script lang="ts">
-import { Component, FieldCategory, FieldType } from "../streamsyncTypes";
+import { Component, FieldCategory, FieldType } from "../../streamsyncTypes";
 import {
 	accentColor,
 	buttonColor,
@@ -36,10 +36,10 @@ import {
 	secondaryTextColor,
 	selectedColor,
 	separatorColor,
-} from "../renderer/sharedStyleFields";
+} from "../../renderer/sharedStyleFields";
 import { onMounted } from "vue";
 import { onUnmounted } from "vue";
-import { getKeydown } from "../renderer/syntheticEvents";
+import { getKeydown } from "../../renderer/syntheticEvents";
 
 const ssKeydownStub = `
 def handle_keydown(state, payload):
@@ -127,7 +127,7 @@ export default {
 </script>
 <script setup lang="ts">
 import { Ref, inject, ref } from "vue";
-import injectionKeys from "../injectionKeys";
+import injectionKeys from "../../injectionKeys";
 
 const rootEl: Ref<HTMLElement> = ref(null);
 const fields = inject(injectionKeys.evaluatedFields);
@@ -158,7 +158,7 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-@import "../renderer/sharedStyles.css";
+@import "../../renderer/sharedStyles.css";
 
 .CorePage {
 	display: flex;
diff --git a/ui/src/core_components/CoreRoot.vue b/ui/src/core_components/root/CoreRoot.vue
similarity index 96%
rename from ui/src/core_components/CoreRoot.vue
rename to ui/src/core_components/root/CoreRoot.vue
index 31167631a..fcec6943e 100644
--- a/ui/src/core_components/CoreRoot.vue
+++ b/ui/src/core_components/root/CoreRoot.vue
@@ -10,10 +10,10 @@
 </template>
 
 <script lang="ts">
-import { FieldType } from "../streamsyncTypes";
-import * as sharedStyleFields from "../renderer/sharedStyleFields";
+import { FieldType } from "../../streamsyncTypes";
+import * as sharedStyleFields from "../../renderer/sharedStyleFields";
 import { nextTick } from "vue";
-import { useEvaluator } from "../renderer/useEvaluator";
+import { useEvaluator } from "../../renderer/useEvaluator";
 
 const ssHashChangeStub = `
 def handle_hashchange(state, payload):
@@ -68,7 +68,7 @@ export default {
 </script>
 <script setup lang="ts">
 import { computed, inject, ref, Ref, watch, onBeforeMount } from "vue";
-import injectionKeys from "../injectionKeys";
+import injectionKeys from "../../injectionKeys";
 
 const importedModulesSpecifiers:Record<string, string> = {};
 const ss = inject(injectionKeys.core);
@@ -287,7 +287,7 @@ onBeforeMount(() => {
 </script>
 
 <style scoped>
-@import "../renderer/sharedStyles.css";
+@import "../../renderer/sharedStyles.css";
 
 .CoreRoot {
 	background: var(--emptinessColor);