From 89ab0fa7af8aec31dcdf47764d6ef99351c6440f Mon Sep 17 00:00:00 2001
From: teykamp <thomas@eykamp.com>
Date: Mon, 8 Sep 2025 10:33:10 -0400
Subject: [PATCH 1/3] change color to black

---
 .../ui/general/dev/BenchmarkingMetrics.vue    |  6 ++--
 .../general/dev/GraphAtMousePositionData.vue  | 30 +++++++++----------
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/packages/products/src/shared/ui/general/dev/BenchmarkingMetrics.vue b/packages/products/src/shared/ui/general/dev/BenchmarkingMetrics.vue
index c0231adc..1899a3c4 100644
--- a/packages/products/src/shared/ui/general/dev/BenchmarkingMetrics.vue
+++ b/packages/products/src/shared/ui/general/dev/BenchmarkingMetrics.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-  import { useFPS } from "@magic/utils/fps";
+import { useFPS } from "@magic/utils/fps";
 
-  const { fps, slowFrameCount, slowFrameRatio } = useFPS();
+const { fps, slowFrameCount, slowFrameRatio } = useFPS();
 </script>
 
 <template>
-  <div class="text-white text-end">
+  <div class="text-black text-end">
     <div>FPS: {{ fps }}</div>
     <div>Slow Frame Count: {{ slowFrameCount }}</div>
     <div>Slow Frame Ratio: {{ slowFrameRatio.toFixed(2) }}</div>
diff --git a/packages/products/src/shared/ui/general/dev/GraphAtMousePositionData.vue b/packages/products/src/shared/ui/general/dev/GraphAtMousePositionData.vue
index 0aa51f10..57a8d035 100644
--- a/packages/products/src/shared/ui/general/dev/GraphAtMousePositionData.vue
+++ b/packages/products/src/shared/ui/general/dev/GraphAtMousePositionData.vue
@@ -1,25 +1,25 @@
 <script setup lang="ts">
-  import { nonNullGraph as graph } from "@magic/products/shared/globalGraph";
+import { nonNullGraph as graph } from "@magic/products/shared/globalGraph";
 
-  import { computed } from "vue";
+import { computed } from "vue";
 
-  const coords = computed(() => {
-    const {
-      coords: { x, y },
-    } = graph.value.graphAtMousePosition.value;
-    return { x: Math.round(x), y: Math.round(y) };
-  });
+const coords = computed(() => {
+  const {
+    coords: { x, y },
+  } = graph.value.graphAtMousePosition.value;
+  return { x: Math.round(x), y: Math.round(y) };
+});
 
-  const hoveredItems = computed(() => {
-    const { items } = graph.value.graphAtMousePosition.value;
-    return items.map(
-      (item) => `${item.graphType} - ${item.shape.name} (${item.id})`
-    );
-  });
+const hoveredItems = computed(() => {
+  const { items } = graph.value.graphAtMousePosition.value;
+  return items.map(
+    (item) => `${item.graphType} - ${item.shape.name} (${item.id})`
+  );
+});
 </script>
 
 <template>
-  <div class="text-white text-end">
+  <div class="text-black text-end">
     <div>Cursor At: (X = {{ coords.x }}, Y = {{ coords.y }})</div>
     <div>Items Hovered: {{ hoveredItems }}</div>
   </div>

From 65f527ccb2d164ad664bb048f9951712a578617c Mon Sep 17 00:00:00 2001
From: teykamp <thomas@eykamp.com>
Date: Mon, 8 Sep 2025 10:35:45 -0400
Subject: [PATCH 2/3] fix formatting

---
 .../ui/general/dev/BenchmarkingMetrics.vue    |  4 +--
 .../general/dev/GraphAtMousePositionData.vue  | 28 +++++++++----------
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/packages/products/src/shared/ui/general/dev/BenchmarkingMetrics.vue b/packages/products/src/shared/ui/general/dev/BenchmarkingMetrics.vue
index 1899a3c4..a3a1093e 100644
--- a/packages/products/src/shared/ui/general/dev/BenchmarkingMetrics.vue
+++ b/packages/products/src/shared/ui/general/dev/BenchmarkingMetrics.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { useFPS } from "@magic/utils/fps";
+  import { useFPS } from "@magic/utils/fps";
 
-const { fps, slowFrameCount, slowFrameRatio } = useFPS();
+  const { fps, slowFrameCount, slowFrameRatio } = useFPS();
 </script>
 
 <template>
diff --git a/packages/products/src/shared/ui/general/dev/GraphAtMousePositionData.vue b/packages/products/src/shared/ui/general/dev/GraphAtMousePositionData.vue
index 57a8d035..b17e03b7 100644
--- a/packages/products/src/shared/ui/general/dev/GraphAtMousePositionData.vue
+++ b/packages/products/src/shared/ui/general/dev/GraphAtMousePositionData.vue
@@ -1,21 +1,21 @@
 <script setup lang="ts">
-import { nonNullGraph as graph } from "@magic/products/shared/globalGraph";
+  import { nonNullGraph as graph } from "@magic/products/shared/globalGraph";
 
-import { computed } from "vue";
+  import { computed } from "vue";
 
-const coords = computed(() => {
-  const {
-    coords: { x, y },
-  } = graph.value.graphAtMousePosition.value;
-  return { x: Math.round(x), y: Math.round(y) };
-});
+  const coords = computed(() => {
+    const {
+      coords: { x, y },
+    } = graph.value.graphAtMousePosition.value;
+    return { x: Math.round(x), y: Math.round(y) };
+  });
 
-const hoveredItems = computed(() => {
-  const { items } = graph.value.graphAtMousePosition.value;
-  return items.map(
-    (item) => `${item.graphType} - ${item.shape.name} (${item.id})`
-  );
-});
+  const hoveredItems = computed(() => {
+    const { items } = graph.value.graphAtMousePosition.value;
+    return items.map(
+      (item) => `${item.graphType} - ${item.shape.name} (${item.id})`
+    );
+  });
 </script>
 
 <template>

From 9d1a15c5feaeda29d4faf6d6f6ea3b5db86420f1 Mon Sep 17 00:00:00 2001
From: teykamp <thomas@eykamp.com>
Date: Sat, 18 Oct 2025 15:38:49 -0400
Subject: [PATCH 3/3] move to gText

---
 .../ui/general/dev/BenchmarkingMetrics.vue    |  9 ++---
 .../general/dev/GraphAtMousePositionData.vue  | 33 ++++++++++---------
 2 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/packages/products/src/shared/ui/general/dev/BenchmarkingMetrics.vue b/packages/products/src/shared/ui/general/dev/BenchmarkingMetrics.vue
index a3a1093e..21f2769e 100644
--- a/packages/products/src/shared/ui/general/dev/BenchmarkingMetrics.vue
+++ b/packages/products/src/shared/ui/general/dev/BenchmarkingMetrics.vue
@@ -1,13 +1,14 @@
 <script setup lang="ts">
-  import { useFPS } from "@magic/utils/fps";
+import { useFPS } from "@magic/utils/fps";
+import GText from "../../graph-core/GText.vue";
 
-  const { fps, slowFrameCount, slowFrameRatio } = useFPS();
+const { fps, slowFrameCount, slowFrameRatio } = useFPS();
 </script>
 
 <template>
-  <div class="text-black text-end">
+  <GText class="text-end">
     <div>FPS: {{ fps }}</div>
     <div>Slow Frame Count: {{ slowFrameCount }}</div>
     <div>Slow Frame Ratio: {{ slowFrameRatio.toFixed(2) }}</div>
-  </div>
+  </GText>
 </template>
diff --git a/packages/products/src/shared/ui/general/dev/GraphAtMousePositionData.vue b/packages/products/src/shared/ui/general/dev/GraphAtMousePositionData.vue
index b17e03b7..1d2e7464 100644
--- a/packages/products/src/shared/ui/general/dev/GraphAtMousePositionData.vue
+++ b/packages/products/src/shared/ui/general/dev/GraphAtMousePositionData.vue
@@ -1,26 +1,27 @@
 <script setup lang="ts">
-  import { nonNullGraph as graph } from "@magic/products/shared/globalGraph";
+import { nonNullGraph as graph } from "@magic/products/shared/globalGraph";
 
-  import { computed } from "vue";
+import { computed } from "vue";
+import GText from "../../graph-core/GText.vue";
 
-  const coords = computed(() => {
-    const {
-      coords: { x, y },
-    } = graph.value.graphAtMousePosition.value;
-    return { x: Math.round(x), y: Math.round(y) };
-  });
+const coords = computed(() => {
+  const {
+    coords: { x, y },
+  } = graph.value.graphAtMousePosition.value;
+  return { x: Math.round(x), y: Math.round(y) };
+});
 
-  const hoveredItems = computed(() => {
-    const { items } = graph.value.graphAtMousePosition.value;
-    return items.map(
-      (item) => `${item.graphType} - ${item.shape.name} (${item.id})`
-    );
-  });
+const hoveredItems = computed(() => {
+  const { items } = graph.value.graphAtMousePosition.value;
+  return items.map(
+    (item) => `${item.graphType} - ${item.shape.name} (${item.id})`
+  );
+});
 </script>
 
 <template>
-  <div class="text-black text-end">
+  <GText class="text-end">
     <div>Cursor At: (X = {{ coords.x }}, Y = {{ coords.y }})</div>
     <div>Items Hovered: {{ hoveredItems }}</div>
-  </div>
+  </GText>
 </template>