fix(ui): resolve missing import

src/ui/src/builder/BuilderHeader.vue

@@ -52,8 +52,7 @@
 			:class="wf.syncHealth.value"
 			:title="syncHealthStatus()"
 		>
-			<i ref="syncHealthIcon" class="material-symbols-outlined icon"
-				>sync</i
+			<i class="material-symbols-outlined icon">sync</i
 			><span v-if="wf.syncHealth.value == 'offline'">Offline</span>
 		</div>
 	</div>
@@ -67,7 +66,6 @@ import BuilderModal, { ModalAction } from "./BuilderModal.vue";
 import injectionKeys from "@/injectionKeys";
 import BuilderStateExplorer from "./BuilderStateExplorer.vue";
 
-const syncHealthIcon = ref(null);
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
 const { undo, redo, getUndoRedoSnapshot } = useComponentActions(wf, ssbm);

src/ui/src/builder/BuilderTooltip.vue

@@ -20,12 +20,13 @@ import {
 	onMounted,
 	onUnmounted,
 	ref,
+	useTemplateRef,
 } from "vue";
 
 const DELAY_MS = 200;
 const DEFAULT_GAP_PX = 4;
 
-const rootEl = ref(null);
+const rootEl = useTemplateRef("rootEl");
 const isActive = ref(false);
 const tooltipText = ref<ComputedRef | string | null>(null);
 let trackedElement: HTMLElement | null = null;

src/ui/src/builder/panels/BuilderPanelSwitcher.vue

@@ -28,13 +28,13 @@ export type BuilderPanelAction = {
 
 <script setup lang="ts">
 import injectionKeys from "@/injectionKeys";
-import { inject, ref } from "vue";
+import { inject, useTemplateRef } from "vue";
 import BuilderCodePanel from "./BuilderCodePanel.vue";
 import BuilderLogPanel from "./BuilderLogPanel.vue";
 
 const wfbm = inject(injectionKeys.builderManager);
 
-const screenEl = ref(null);
+const screenEl = useTemplateRef("screenEl");
 </script>
 
 <style scoped>

src/ui/src/builder/settings/BuilderSettingsBinding.vue

@@ -26,6 +26,7 @@ import { useComponentActions } from "../useComponentActions";
 import injectionKeys from "@/injectionKeys";
 import BuilderTemplateInput from "./BuilderTemplateInput.vue";
 import WdsFieldWrapper from "@/wds/WdsFieldWrapper.vue";
+import BuilderSectionTitle from "./BuilderSectionTitle.vue";
 
 const hint =
 	'Links this component to a state element, in a two-way fashion. Reference the state element directly, i.e. use "my_var" instead of "@{my_var}".';

src/ui/src/components/core/embed/CoreMapbox.vue

@@ -85,12 +85,12 @@ export default {
 
 <script setup lang="ts">
 import "mapbox-gl/dist/mapbox-gl.css";
-import { inject, ref, watch, computed } from "vue";
+import { inject, ref, watch, computed, useTemplateRef } from "vue";
 import injectionKeys from "@/injectionKeys";
 import type * as mapboxgl from "mapbox-gl";
 const fields = inject(injectionKeys.evaluatedFields);
-const rootEl = ref(null);
-const mapEl = ref(null);
+const rootEl = useTemplateRef("rootEl");
+const mapEl = useTemplateRef("mapEl");
 const center = computed<mapboxgl.LngLatLike>(() => [
 	fields.lng.value,
 	fields.lat.value,

src/ui/src/components/core/embed/CorePDF.vue

@@ -104,7 +104,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { inject, ref, watch, computed, onMounted } from "vue";
+import { inject, ref, watch, computed, onMounted, useTemplateRef } from "vue";
 import injectionKeys from "@/injectionKeys";
 import "@tato30/vue-pdf/style.css";
 
@@ -129,8 +129,8 @@ const scale = ref(1);
 const page = ref(1);
 const matches = ref<MatchType[]>([]);
 const currentMatch = ref(0);
-const rootEl = ref(null);
-const viewerEl = ref(null);
+const rootEl = useTemplateRef("rootEl");
+const viewerEl = useTemplateRef("viewerEl");
 const loading = ref(false);
 
 const pagesLoaded = ref(0);

src/ui/src/components/core/input/CoreFileInput.vue

@@ -116,7 +116,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, inject, Ref, ref, watch } from "vue";
+import { computed, inject, Ref, ref, useTemplateRef, watch } from "vue";
 import injectionKeys from "@/injectionKeys";
 import LoadingSymbol from "@/renderer/LoadingSymbol.vue";
 import { useFormValueBroker } from "@/renderer/useFormValueBroker";
@@ -126,7 +126,7 @@ type SavedFile = { name: string; type: string; data: unknown };
 
 const fields = inject(injectionKeys.evaluatedFields);
 const rootInstance = ref<ComponentPublicInstance | null>(null);
-const fileEl: Ref<HTMLInputElement> = ref(null);
+const fileEl = useTemplateRef("fileEl");
 const message: Ref<string> = ref(null);
 const wf = inject(injectionKeys.core);
 const instancePath = inject(injectionKeys.instancePath);

src/ui/src/components/core/input/CoreNumberInput.vue

@@ -94,13 +94,13 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { inject, ref } from "vue";
+import { inject, useTemplateRef } from "vue";
 import injectionKeys from "@/injectionKeys";
 import { useFormValueBroker } from "@/renderer/useFormValueBroker";
 
 const fields = inject(injectionKeys.evaluatedFields);
-const rootInstance = ref<ComponentPublicInstance | null>(null);
-const inputEl = ref(null);
+const rootInstance = useTemplateRef("rootInstance");
+const inputEl = useTemplateRef("inputEl");
 const wf = inject(injectionKeys.core);
 const instancePath = inject(injectionKeys.instancePath);
 

src/ui/src/components/core/input/__snapshots__/CoreCheckboxInput.spec.ts.snap

@@ -38,6 +38,7 @@ exports[`CoreCheckboxInput > should render value from the state and forward emit
       data-v-7a72f1be=""
     >
       <input
+        checked=""
         data-v-7a72f1be=""
         type="checkbox"
         value="b"

src/ui/src/components/core/input/__snapshots__/CoreDateInput.spec.ts.snap

@@ -15,6 +15,7 @@ exports[`CoreDateInput > should render value from the state and forward emit 1`]
   <input
     data-v-acf95c76=""
     type="date"
+    value="2024-12-14"
   />
   
 </div>

src/ui/src/components/core/input/__snapshots__/CoreRadioInput.spec.ts.snap

@@ -22,6 +22,7 @@ exports[`CoreRadioInput > should render value from the state and forward emit 1`
       data-v-d075b11d=""
     >
       <input
+        checked=""
         data-v-d075b11d=""
         id="component-id-test:0-option-a"
         name="component-id-test:0-options"

src/ui/src/components/workflows/base/WorkflowMiniMap.vue

@@ -42,10 +42,17 @@
 
 <script setup lang="ts">
 import injectionKeys from "@/injectionKeys";
-import { inject, nextTick, onMounted, onUnmounted, ref } from "vue";
+import {
+	inject,
+	nextTick,
+	onMounted,
+	onUnmounted,
+	ref,
+	useTemplateRef,
+} from "vue";
 
 const wfbm = inject(injectionKeys.builderManager);
-const rootEl = ref(null);
+const rootEl = useTemplateRef("rootEl");
 const emit = defineEmits(["changeRenderOffset"]);
 const resizeObserver = new ResizeObserver(render);
 const mutationObserver = new MutationObserver(render);

src/ui/src/components/workflows/base/WorkflowNavigator.vue

@@ -86,7 +86,14 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref, toRefs, watch } from "vue";
+import {
+	onMounted,
+	onUnmounted,
+	ref,
+	toRefs,
+	useTemplateRef,
+	watch,
+} from "vue";
 import WorkflowMiniMap from "./WorkflowMiniMap.vue";
 import WdsButton from "@/wds/WdsButton.vue";
 import WdsTextInput from "@/wds/WdsTextInput.vue";
@@ -105,7 +112,7 @@ const props = defineProps<{
 
 const { zoomLevel } = toRefs(props);
 
-const rootEl = ref(null);
+const rootEl = useTemplateRef("rootEl");
 const emit = defineEmits([
 	"changeRenderOffset",
 	"changeZoomLevel",