fix(webui): SurfaceColumn with new Selectors

webui/src/components/SurfaceColumn.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import UpObject from "./display/UpObject.svelte";
   import api from "../lib/api";
-  import Selector from "./utils/Selector.svelte";
+  import Selector, { type SelectorValue } from "./utils/Selector.svelte";
   import { onMount, tick } from "svelte";
   import type { ZoomBehavior, ZoomTransform } from "d3";
   import Spinner from "./utils/Spinner.svelte";
@@ -169,7 +169,11 @@
     resizeObserver.observe(viewEl);
   });
 
-  async function onSelectorInput(ev: CustomEvent<IValue>) {
+  async function onSelectorInput(ev: CustomEvent<SelectorValue>) {
+    const value = ev.detail;
+    if (value.t !== "Address") return;
+    const address = value.c;
+
     const [xValue, yValue] = selectorCoords;
     selectorCoords = null;
     await Promise.all(
@@ -177,7 +181,7 @@
         [x, xValue],
         [y, yValue],
       ].map(([axis, value]: [string, number]) =>
-        api.putEntityAttribute(ev.detail.c as string, axis, {
+        api.putEntityAttribute(address, axis, {
           t: "Number",
           c: value,
         }),
@@ -191,7 +195,13 @@
   <div class="header ui">
     <div class="axis-selector">
       <div class="label">X</div>
-      <Selector type="attribute" bind:attribute={x} />
+      <Selector
+        types={["Attribute", "NewAttribute"]}
+        initial={{ t: "Attribute", name: x }}
+        on:input={(ev) => {
+          if (ev.detail.t === "Attribute") x = ev.detail.name;
+        }}
+      />
       <div class="value">
         {(Math.round(currentX * 100) / 100).toLocaleString("en", {
           useGrouping: false,
@@ -201,7 +211,13 @@
     </div>
     <div class="axis-selector">
       <div class="label">Y</div>
-      <Selector type="attribute" bind:attribute={y} />
+      <Selector
+        types={["Attribute", "NewAttribute"]}
+        initial={{ t: "Attribute", name: y }}
+        on:input={(ev) => {
+          if (ev.detail.t === "Attribute") y = ev.detail.name;
+        }}
+      />
       <div class="value">
         {(Math.round(currentY * 100) / 100).toLocaleString("en", {
           useGrouping: false,
@@ -236,8 +252,7 @@
             top: {viewHeight - selectorCoords[1]}px"
         >
           <Selector
-            type="value"
-            valueTypes={["Address"]}
+            types={["Address", "NewAddress"]}
             on:input={onSelectorInput}
             on:focus={(ev) => {
               if (!ev.detail) selectorCoords = null;