From 76d2f475f575c3077010ffd336dae41cb3c797fd Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Sat, 1 Jul 2023 20:41:57 +0100
Subject: [PATCH 01/35] experiments(dui3): coupled with some other rhino
 experiments that i need to push still, investigating some patterns re
 composables & co. in nuxt and possibly having a strategy around multiple host
 app bindings

---
 packages/dui3/components/header/NavBar.vue    |  4 +-
 .../dui3/lib/accounts/composables/setup.ts    | 69 +++++++++++++++++++
 packages/dui3/nuxt.config.ts                  |  2 +-
 packages/dui3/pages/index.vue                 | 47 ++++++++++---
 packages/dui3/plugins/00.cefPlugin.ts         | 26 +++++++
 packages/dui3/plugins/apollo.ts               | 53 +++++++-------
 packages/dui3/types/index.ts                  | 40 +++++++++++
 7 files changed, 201 insertions(+), 40 deletions(-)
 create mode 100644 packages/dui3/lib/accounts/composables/setup.ts
 create mode 100644 packages/dui3/plugins/00.cefPlugin.ts
 create mode 100644 packages/dui3/types/index.ts

diff --git a/packages/dui3/components/header/NavBar.vue b/packages/dui3/components/header/NavBar.vue
index f7412309c..bd5f0ac92 100644
--- a/packages/dui3/components/header/NavBar.vue
+++ b/packages/dui3/components/header/NavBar.vue
@@ -7,12 +7,12 @@
         <div class="flex items-center">
           <HeaderLogoBlock :active="false" class="mr-0" />
           <div class="flex flex-shrink-0 items-center -ml-2 md:ml-0">
-            <HeaderNavLink
+            <!-- <HeaderNavLink
               to="/"
               name="Dashboard"
               :separator="true"
               class="hidden md:inline-block"
-            />
+            /> -->
             <PortalTarget name="navigation"></PortalTarget>
           </div>
         </div>
diff --git a/packages/dui3/lib/accounts/composables/setup.ts b/packages/dui3/lib/accounts/composables/setup.ts
new file mode 100644
index 000000000..275dc4757
--- /dev/null
+++ b/packages/dui3/lib/accounts/composables/setup.ts
@@ -0,0 +1,69 @@
+import { ApolloClient } from '@apollo/client/core'
+import { ApolloClients } from '@vue/apollo-composable'
+import { ShallowRef } from 'vue'
+import { resolveClientConfig } from '~/lib/core/configs/apollo'
+import { Account } from '~/types'
+
+export type DUIAccount = {
+  accountInfo: Account
+  client: ApolloClient<unknown>
+}
+
+export type DUIAccountsState = {
+  accounts: ShallowRef<DUIAccount[]>
+  refreshAccounts: () => Promise<void>
+}
+
+const AccountsInjectionKey = 'DUI_ACCOUNTS_STATE'
+
+export async function useAccountsSetup() {
+  const app = useNuxtApp()
+  const $bindings = app.$bindings
+
+  // Using a shallow ref as we don't need inner values reactive
+  const accounts = shallowRef([] as DUIAccount[])
+
+  const apolloClients = {} as Record<string, ApolloClient<unknown>>
+
+  // Matches local accounts coming from the host app to app state.
+  const refreshAccounts = async () => {
+    const accs = JSON.parse(await $bindings.getAccounts()) as Account[]
+    const newAccs = [] as DUIAccount[]
+    for (const acc of accs) {
+      const existing = accounts.value.find((a) => a.accountInfo.id === acc.id)
+      if (existing) {
+        newAccs.push(existing)
+        continue
+      }
+
+      const client = new ApolloClient(
+        resolveClientConfig({
+          httpEndpoint: new URL('/graphql', acc.serverInfo.url).href,
+          authToken: () => acc.token
+        })
+      )
+      apolloClients[acc.id] = client
+      newAccs.push({
+        accountInfo: acc,
+        client
+      })
+    }
+    accounts.value = newAccs
+  }
+
+  await refreshAccounts()
+
+  const accState = {
+    accounts,
+    refreshAccounts
+  }
+
+  app.vueApp.provide(ApolloClients, apolloClients)
+  provide(AccountsInjectionKey, accState)
+  return accState
+}
+
+export function useInjectedAccounts() {
+  const state = inject(AccountsInjectionKey) as DUIAccountsState
+  return state
+}
diff --git a/packages/dui3/nuxt.config.ts b/packages/dui3/nuxt.config.ts
index f3658e0ce..a18ebaa86 100644
--- a/packages/dui3/nuxt.config.ts
+++ b/packages/dui3/nuxt.config.ts
@@ -6,7 +6,7 @@ export default defineNuxtConfig({
     shim: false,
     strict: true
   },
-  modules: ['@nuxtjs/tailwindcss'],
+  modules: ['@nuxtjs/tailwindcss', '@speckle/ui-components-nuxt'],
   alias: {
     // Rewriting all lodash calls to lodash-es for proper tree-shaking & chunk splitting
     lodash: 'lodash-es'
diff --git a/packages/dui3/pages/index.vue b/packages/dui3/pages/index.vue
index 67447869e..9e367c6f1 100644
--- a/packages/dui3/pages/index.vue
+++ b/packages/dui3/pages/index.vue
@@ -1,22 +1,45 @@
 <template>
   <div>
-    Hello world! Query results:
-    <div>
-      <div v-for="(res, clientId) in queries" :key="clientId">
-        <strong>{{ clientId }}:</strong>
-        {{ res.result.value?.serverInfo.version || '' }}
+    <Portal to="navigation">
+      <div class="mx-2 py-1 px-2 rounded text-xs bg-primary text-white font-bold">
+        for {{ appName }}
+      </div>
+      <!-- <HeaderNavLink :to="'/'" :name="'Home'"></HeaderNavLink> -->
+    </Portal>
+    <div class="space-y-2">
+      <div>
+        Hello world! You have
+        {{ accounts.length }} accounts.
+      </div>
+      <div v-for="acc in accounts" :key="acc.accountInfo.id">
+        <div class="truncate text-xs">
+          {{ acc.accountInfo.userInfo.email }} @
+          <b>{{ acc.accountInfo.serverInfo.url }}</b>
+          {{ acc.accountInfo.serverInfo.name }}
+        </div>
+      </div>
+      <div>
+        <div v-for="(res, clientId) in queries" :key="clientId">
+          <strong>{{ clientId }}:</strong>
+          {{ res.result.value?.serverInfo.version || res.error }}
+        </div>
+      </div>
+      <div>
+        <FormButton @click="refreshAccounts()">Refresh Accounts</FormButton>
       </div>
     </div>
-    <Portal to="navigation">
-      <HeaderNavLink :to="'/'" :name="'Home'"></HeaderNavLink>
-    </Portal>
   </div>
 </template>
 <script setup lang="ts">
 import { UseQueryReturn, useQuery } from '@vue/apollo-composable'
+import { useAccountsSetup } from '~/lib/accounts/composables/setup'
 import { graphql } from '~/lib/common/generated/gql'
 import { ServerInfoTestQuery } from '~/lib/common/generated/gql/graphql'
 
+const { $bindings } = useNuxtApp()
+const appName = await $bindings.getSourceAppName()
+const { accounts, refreshAccounts } = await useAccountsSetup()
+
 const versionQuery = graphql(`
   query ServerInfoTest {
     serverInfo {
@@ -25,16 +48,20 @@ const versionQuery = graphql(`
   }
 `)
 
+watch(accounts, () => {
+  console.log('accs ref')
+})
 /**
  * Imagine these come from window or something
  */
-const clients = ['latest', 'xyz']
+const clientIds = accounts.value.map((a) => a.accountInfo.id)
 
 const queries: Record<
   string,
   UseQueryReturn<ServerInfoTestQuery, Record<string, never>>
 > = {}
-for (const clientId of clients) {
+
+for (const clientId of clientIds) {
   queries[clientId] = useQuery(versionQuery, undefined, { clientId })
 }
 </script>
diff --git a/packages/dui3/plugins/00.cefPlugin.ts b/packages/dui3/plugins/00.cefPlugin.ts
new file mode 100644
index 000000000..adf676f38
--- /dev/null
+++ b/packages/dui3/plugins/00.cefPlugin.ts
@@ -0,0 +1,26 @@
+import { ICefSharp, WebUiBindingType, MockedBindings } from '~/types'
+
+declare let CefSharp: ICefSharp
+declare let WebUIBinding: WebUiBindingType
+
+export default defineNuxtPlugin(async () => {
+  let bindings: WebUiBindingType
+
+  try {
+    if (!CefSharp) throw new Error('No global CefSharp object found.')
+    await CefSharp.BindObjectAsync('WebUIBinding')
+    console.info('Bound WebUIBinding object for CefSharp.')
+    bindings = WebUIBinding
+  } catch (e) {
+    console.error('Failed to bind CefSharp, will use mocked bindings.')
+    console.error(e)
+
+    bindings = MockedBindings
+  }
+
+  return {
+    provide: {
+      bindings
+    }
+  }
+})
diff --git a/packages/dui3/plugins/apollo.ts b/packages/dui3/plugins/apollo.ts
index 104300198..ddf4dcd77 100644
--- a/packages/dui3/plugins/apollo.ts
+++ b/packages/dui3/plugins/apollo.ts
@@ -1,34 +1,33 @@
-import { ApolloClient } from '@apollo/client/core'
-import { ApolloClients } from '@vue/apollo-composable'
-import { resolveClientConfig } from '~/lib/core/configs/apollo'
+// import { ApolloClient } from '@apollo/client/core'
+// import { ApolloClients } from '@vue/apollo-composable'
+// import { resolveClientConfig } from '~/lib/core/configs/apollo'
 
 export default defineNuxtPlugin((nuxtApp) => {
   /**
    * TODO: You can use `window` here to get credentials for all of the clients
    * we need from the parent connectors. The following is just an example
    */
-
-  const apolloClients = {
-    latest: new ApolloClient(
-      // Imagine endpoint & token is resolved from window or something
-      resolveClientConfig({
-        httpEndpoint: 'https://latest.speckle.systems/graphql',
-        authToken: () => null
-      })
-    ),
-    xyz: new ApolloClient(
-      // Imagine endpoint & token is resolved from window or something
-      resolveClientConfig({
-        httpEndpoint: 'https://speckle.xyz/graphql',
-        authToken: () => null
-      })
-    )
-  }
-
-  nuxtApp.vueApp.provide(ApolloClients, apolloClients)
-  return {
-    provide: {
-      apolloClients
-    }
-  }
+  // const { $bindings } = useNuxtApp()
+  // const apolloClients = {
+  //   latest: new ApolloClient(
+  //     // Imagine endpoint & token is resolved from window or something
+  //     resolveClientConfig({
+  //       httpEndpoint: 'https://latest.speckle.systems/graphql',
+  //       authToken: () => null
+  //     })
+  //   ),
+  //   xyz: new ApolloClient(
+  //     // Imagine endpoint & token is resolved from window or something
+  //     resolveClientConfig({
+  //       httpEndpoint: 'https://speckle.xyz/graphql',
+  //       authToken: () => null
+  //     })
+  //   )
+  // }
+  // nuxtApp.vueApp.provide(ApolloClients, apolloClients)
+  // return {
+  //   provide: {
+  //     apolloClients
+  //   }
+  // }
 })
diff --git a/packages/dui3/types/index.ts b/packages/dui3/types/index.ts
new file mode 100644
index 000000000..b637d3f75
--- /dev/null
+++ b/packages/dui3/types/index.ts
@@ -0,0 +1,40 @@
+/* eslint-disable @typescript-eslint/require-await */
+export type Account = {
+  id: string
+  isDefault: boolean
+  token: string
+  serverInfo: {
+    name: string
+    url: string
+  }
+  userInfo: {
+    id: string
+    avatar: string
+    email: string
+    name: string
+    commits: { totalCount: number }
+    streams: { totalCount: number }
+  }
+}
+
+export interface ICefSharp {
+  BindObjectAsync: (arg: string) => Promise<void>
+}
+
+export type WebUiBindingType = {
+  getAccounts: () => Promise<string>
+  sayHi: (name: string) => Promise<string>
+  getSourceAppName: () => Promise<string>
+}
+
+export const MockedBindings: WebUiBindingType = {
+  async getAccounts() {
+    return '[]'
+  },
+  async sayHi(name: string) {
+    return `Hi ${name} from (mocked bindings)!`
+  },
+  async getSourceAppName() {
+    return 'Mocked App'
+  }
+}

From 97add85d2e81748e53c5ca30e727df74dfe4685c Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Thu, 6 Jul 2023 18:02:34 +0100
Subject: [PATCH 02/35] experiments(dui3): super wip work

---
 packages/dui3/components/header/NavBar.vue    |  7 ++-
 .../dui3/lib/accounts/composables/setup.ts    |  2 +
 packages/dui3/plugins/00.bindings.ts          | 43 +++++++++++++
 packages/dui3/plugins/00.cefPlugin.ts         | 41 ++++++------
 packages/dui3/plugins/apollo.ts               | 63 ++++++++++---------
 packages/dui3/types/index.ts                  | 12 ++++
 6 files changed, 117 insertions(+), 51 deletions(-)
 create mode 100644 packages/dui3/plugins/00.bindings.ts

diff --git a/packages/dui3/components/header/NavBar.vue b/packages/dui3/components/header/NavBar.vue
index bd5f0ac92..097e23e17 100644
--- a/packages/dui3/components/header/NavBar.vue
+++ b/packages/dui3/components/header/NavBar.vue
@@ -14,10 +14,15 @@
               class="hidden md:inline-block"
             /> -->
             <PortalTarget name="navigation"></PortalTarget>
+            <FormButton size="xs" color="card" @click="$bindings.openDevTools()">
+              Show Dev Tools
+            </FormButton>
           </div>
         </div>
       </div>
     </div>
   </nav>
 </template>
-<script setup lang="ts"></script>
+<script setup lang="ts">
+const { $bindings } = useNuxtApp()
+</script>
diff --git a/packages/dui3/lib/accounts/composables/setup.ts b/packages/dui3/lib/accounts/composables/setup.ts
index 275dc4757..3bf7aa86a 100644
--- a/packages/dui3/lib/accounts/composables/setup.ts
+++ b/packages/dui3/lib/accounts/composables/setup.ts
@@ -5,7 +5,9 @@ import { resolveClientConfig } from '~/lib/core/configs/apollo'
 import { Account } from '~/types'
 
 export type DUIAccount = {
+  /** account info coming from the host app */
   accountInfo: Account
+  /** the graphql client; a bit superflous */
   client: ApolloClient<unknown>
 }
 
diff --git a/packages/dui3/plugins/00.bindings.ts b/packages/dui3/plugins/00.bindings.ts
new file mode 100644
index 000000000..57b409f7f
--- /dev/null
+++ b/packages/dui3/plugins/00.bindings.ts
@@ -0,0 +1,43 @@
+import { ICefSharp, IWebViev, WebUiBindingType, MockedBindings } from '~/types'
+
+declare let CefSharp: ICefSharp
+declare let chrome: IWebViev
+declare let WebUIBinding: WebUiBindingType
+
+export default defineNuxtPlugin(async () => {
+  let bindings: WebUiBindingType | undefined = undefined
+
+  try {
+    if (!CefSharp) throw new Error('No global CefSharp object found.')
+    await CefSharp.BindObjectAsync('WebUIBinding')
+    console.info('Bound WebUIBinding object for CefSharp.')
+    bindings = WebUIBinding
+  } catch (e) {
+    console.warn('Failed to bind CefSharp.')
+    console.warn(e)
+  }
+
+  try {
+    if (!chrome.webview) throw new Error('No global Webview2 object found.')
+    bindings = chrome.webview.hostObjects.WebUIBinding
+    console.info('Bound WebUIBinding object for Webview2.')
+    const res = await bindings.sayHi('Test')
+    console.log(res)
+  } catch (e) {
+    console.warn('Failed to bind Webview2.')
+    console.warn(e)
+  }
+
+  // TODO: continue falling back for things like sketchup, rhino mac (which would use shitty url hacking scheme stuff)
+
+  if (!bindings) {
+    console.warn('No bindings found - falling back to mocked bindings.')
+    bindings = MockedBindings
+  }
+
+  return {
+    provide: {
+      bindings
+    }
+  }
+})
diff --git a/packages/dui3/plugins/00.cefPlugin.ts b/packages/dui3/plugins/00.cefPlugin.ts
index adf676f38..2f852fa86 100644
--- a/packages/dui3/plugins/00.cefPlugin.ts
+++ b/packages/dui3/plugins/00.cefPlugin.ts
@@ -1,26 +1,23 @@
-import { ICefSharp, WebUiBindingType, MockedBindings } from '~/types'
+// import { ICefSharp, WebUiBindingType, MockedBindings } from '~/types'
 
-declare let CefSharp: ICefSharp
-declare let WebUIBinding: WebUiBindingType
+// declare let CefSharp: ICefSharp
+// declare let WebUIBinding: WebUiBindingType
 
 export default defineNuxtPlugin(async () => {
-  let bindings: WebUiBindingType
-
-  try {
-    if (!CefSharp) throw new Error('No global CefSharp object found.')
-    await CefSharp.BindObjectAsync('WebUIBinding')
-    console.info('Bound WebUIBinding object for CefSharp.')
-    bindings = WebUIBinding
-  } catch (e) {
-    console.error('Failed to bind CefSharp, will use mocked bindings.')
-    console.error(e)
-
-    bindings = MockedBindings
-  }
-
-  return {
-    provide: {
-      bindings
-    }
-  }
+  // let bindings: WebUiBindingType
+  // try {
+  //   if (!CefSharp) throw new Error('No global CefSharp object found.')
+  //   await CefSharp.BindObjectAsync('WebUIBinding')
+  //   console.info('Bound WebUIBinding object for CefSharp.')
+  //   bindings = WebUIBinding
+  // } catch (e) {
+  //   console.error('Failed to bind CefSharp, will use mocked bindings.')
+  //   console.error(e)
+  //   bindings = MockedBindings
+  // }
+  // return {
+  //   provide: {
+  //     bindings
+  //   }
+  // }
 })
diff --git a/packages/dui3/plugins/apollo.ts b/packages/dui3/plugins/apollo.ts
index ddf4dcd77..8f9a7dfb0 100644
--- a/packages/dui3/plugins/apollo.ts
+++ b/packages/dui3/plugins/apollo.ts
@@ -2,32 +2,39 @@
 // import { ApolloClients } from '@vue/apollo-composable'
 // import { resolveClientConfig } from '~/lib/core/configs/apollo'
 
-export default defineNuxtPlugin((nuxtApp) => {
-  /**
-   * TODO: You can use `window` here to get credentials for all of the clients
-   * we need from the parent connectors. The following is just an example
-   */
-  // const { $bindings } = useNuxtApp()
-  // const apolloClients = {
-  //   latest: new ApolloClient(
-  //     // Imagine endpoint & token is resolved from window or something
-  //     resolveClientConfig({
-  //       httpEndpoint: 'https://latest.speckle.systems/graphql',
-  //       authToken: () => null
-  //     })
-  //   ),
-  //   xyz: new ApolloClient(
-  //     // Imagine endpoint & token is resolved from window or something
-  //     resolveClientConfig({
-  //       httpEndpoint: 'https://speckle.xyz/graphql',
-  //       authToken: () => null
-  //     })
-  //   )
-  // }
-  // nuxtApp.vueApp.provide(ApolloClients, apolloClients)
-  // return {
-  //   provide: {
-  //     apolloClients
-  //   }
-  // }
+export default defineNuxtPlugin(() => {
+  // Note: as accounts can be refreshed at runtime, i tried as an experiment
+  // moving them to a composable (/lib/accounts/composables/setup.ts)
 })
+
+// export default defineNuxtPlugin((nuxtApp) => {
+//   /**
+//    * TODO: You can use `window` here to get credentials for all of the clients
+//    * we need from the parent connectors. The following is just an example
+//    */
+//   const { $bindings } = useNuxtApp()
+
+//   const apolloClients = {
+//     latest: new ApolloClient(
+//       // Imagine endpoint & token is resolved from window or something
+//       resolveClientConfig({
+//         httpEndpoint: 'https://latest.speckle.systems/graphql',
+//         authToken: () => null
+//       })
+//     ),
+//     xyz: new ApolloClient(
+//       // Imagine endpoint & token is resolved from window or something
+//       resolveClientConfig({
+//         httpEndpoint: 'https://speckle.xyz/graphql',
+//         authToken: () => null
+//       })
+//     )
+//   }
+
+//   nuxtApp.vueApp.provide(ApolloClients, apolloClients)
+//   return {
+//     provide: {
+//       apolloClients
+//     }
+//   }
+// })
diff --git a/packages/dui3/types/index.ts b/packages/dui3/types/index.ts
index b637d3f75..6569247e7 100644
--- a/packages/dui3/types/index.ts
+++ b/packages/dui3/types/index.ts
@@ -21,10 +21,19 @@ export interface ICefSharp {
   BindObjectAsync: (arg: string) => Promise<void>
 }
 
+export interface IWebViev {
+  webview: {
+    hostObjects: {
+      WebUIBinding: WebUiBindingType
+    }
+  }
+}
+
 export type WebUiBindingType = {
   getAccounts: () => Promise<string>
   sayHi: (name: string) => Promise<string>
   getSourceAppName: () => Promise<string>
+  openDevTools: () => Promise<void>
 }
 
 export const MockedBindings: WebUiBindingType = {
@@ -36,5 +45,8 @@ export const MockedBindings: WebUiBindingType = {
   },
   async getSourceAppName() {
     return 'Mocked App'
+  },
+  async openDevTools() {
+    console.log('Open it yourself. I am just a set of mocked bindings!!!')
   }
 }

From 0923c3f1d29fc971a9475926b581748494edfd21 Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Sun, 9 Jul 2023 19:00:20 +0100
Subject: [PATCH 03/35] experiments(dui3): super wip work

---
 packages/dui3/lib/bridge/webview.ts    | 51 ++++++++++++++++++++++++++
 packages/dui3/lib/sketchup/bindings.ts | 30 +++++++++++++++
 packages/dui3/plugins/00.bindings.ts   | 34 ++++++++++++++---
 packages/dui3/types/index.ts           | 43 +++++++++++++---------
 4 files changed, 135 insertions(+), 23 deletions(-)
 create mode 100644 packages/dui3/lib/bridge/webview.ts
 create mode 100644 packages/dui3/lib/sketchup/bindings.ts

diff --git a/packages/dui3/lib/bridge/webview.ts b/packages/dui3/lib/bridge/webview.ts
new file mode 100644
index 000000000..d16d1c023
--- /dev/null
+++ b/packages/dui3/lib/bridge/webview.ts
@@ -0,0 +1,51 @@
+// github.com/johot/WebView2-better-bridge/blob/master/web-ui/src/betterBridge.ts
+
+type IWebView2 = {
+  webview: {
+    hostObjects: Record<string, IRawBridge> & {
+      sync: Record<string, IRawBridge>
+    }
+  }
+}
+
+type IRawBridge = {
+  GetMethods: () => string[]
+  RunMethod: (methodName: string, args: string) => Promise<string>
+}
+
+declare let chrome: IWebView2
+
+export class WebView2Bridge {
+  private webViewBridge: IRawBridge
+
+  constructor(bridgeName: string) {
+    this.webViewBridge = chrome.webview.hostObjects[bridgeName]
+
+    // NOTE: GetMethods is a call to the .NET side.
+    const availableMethodNames =
+      chrome.webview.hostObjects.sync[bridgeName].GetMethods()
+
+    // NOTE: hoisting original calls as lowerCasedMethodNames, but using the UpperCasedName for the .NET call
+    // This allows us to follow js convetions and keep .NET ones too (eg. bindings.sayHi('') => public string SayHi(string name) {}
+    for (const methodName of availableMethodNames) {
+      const lowercasedMethodName = lowercaseMethodName(methodName)
+      const hoistTarget = this as unknown as Record<string, object>
+      hoistTarget[lowercasedMethodName] = (...args: unknown[]) =>
+        this.runMethod(methodName, args)
+    }
+  }
+
+  private async runMethod(methodName: string, args: unknown[]): Promise<unknown> {
+    const preserializedArgs = args.map((a) => JSON.stringify(a))
+    // NOTE: RunMethod is a call to the .NET side.
+    const result = await this.webViewBridge.RunMethod(
+      methodName,
+      JSON.stringify(preserializedArgs)
+    )
+
+    return JSON.parse(result) as unknown
+  }
+}
+
+const lowercaseMethodName = (name: string) =>
+  name.charAt(0).toLowerCase() + name.slice(1)
diff --git a/packages/dui3/lib/sketchup/bindings.ts b/packages/dui3/lib/sketchup/bindings.ts
new file mode 100644
index 000000000..4cba29c33
--- /dev/null
+++ b/packages/dui3/lib/sketchup/bindings.ts
@@ -0,0 +1,30 @@
+import { IWebUiBinding } from '~/types'
+
+export class SketchupBindings implements IWebUiBinding {
+  requestId = 0
+  requests = {} as Record<number, unknown>
+
+  SketchupBindings() {
+    // todo
+  }
+
+  getAccounts() {
+    this.requestId++
+    this.requests[this.requestId] = new Promise((resolve, reject) => resolve('[]'))
+
+    return this.requests[this.requestId] as Promise<string>
+  }
+
+  async sayHi(name: string) {
+    return `Hi ${name} from (sketchup mocked bindings)!`
+  }
+
+  getSourceAppName() {
+    return new Promise((resolve, reject) => resolve('sketchup')) as Promise<string>
+  }
+
+  async openDevTools() {
+    // eslint-disable-next-line no-alert
+    window.alert('Please right click and select show dev tools.')
+  }
+}
diff --git a/packages/dui3/plugins/00.bindings.ts b/packages/dui3/plugins/00.bindings.ts
index 57b409f7f..84b636630 100644
--- a/packages/dui3/plugins/00.bindings.ts
+++ b/packages/dui3/plugins/00.bindings.ts
@@ -1,11 +1,22 @@
-import { ICefSharp, IWebViev, WebUiBindingType, MockedBindings } from '~/types'
+import { IWebUiBinding, MockedBindings } from '~/types'
+import { WebView2Bridge } from '~/lib/bridge/webview'
+
+interface ICefSharp {
+  BindObjectAsync: (arg: string) => Promise<void>
+}
+
+interface IWebView2 {
+  webview: unknown
+}
 
 declare let CefSharp: ICefSharp
-declare let chrome: IWebViev
-declare let WebUIBinding: WebUiBindingType
+declare let chrome: IWebView2
+declare let sketchup: Record<string, unknown> //
+
+declare let WebUIBinding: IWebUiBinding
 
 export default defineNuxtPlugin(async () => {
-  let bindings: WebUiBindingType | undefined = undefined
+  let bindings: IWebUiBinding | undefined = undefined
 
   try {
     if (!CefSharp) throw new Error('No global CefSharp object found.')
@@ -19,22 +30,33 @@ export default defineNuxtPlugin(async () => {
 
   try {
     if (!chrome.webview) throw new Error('No global Webview2 object found.')
-    bindings = chrome.webview.hostObjects.WebUIBinding
+    bindings = new WebView2Bridge('WebUIBinding') as unknown as IWebUiBinding
     console.info('Bound WebUIBinding object for Webview2.')
     const res = await bindings.sayHi('Test')
     console.log(res)
+
+    // TODO: Wrap the motherfucking wv2 bindings up
   } catch (e) {
     console.warn('Failed to bind Webview2.')
     console.warn(e)
   }
 
-  // TODO: continue falling back for things like sketchup, rhino mac (which would use shitty url hacking scheme stuff)
+  try {
+    if (!sketchup) throw new Error('No global sketchup object found.')
+    console.info('Found Sketchup. Hi SketchUp! We have yet... a lot of work to do :) ')
+    // TODO
+  } catch (e) {
+    console.warn('Failed to bind sketchup.')
+    console.warn(e)
+  }
 
   if (!bindings) {
     console.warn('No bindings found - falling back to mocked bindings.')
     bindings = MockedBindings
   }
 
+  ;(globalThis as Record<string, unknown>).bindings = bindings
+
   return {
     provide: {
       bindings
diff --git a/packages/dui3/types/index.ts b/packages/dui3/types/index.ts
index 6569247e7..47dc1807c 100644
--- a/packages/dui3/types/index.ts
+++ b/packages/dui3/types/index.ts
@@ -17,36 +17,45 @@ export type Account = {
   }
 }
 
-export interface ICefSharp {
-  BindObjectAsync: (arg: string) => Promise<void>
+type FileState = {
+  models: ModelCard[]
 }
 
-export interface IWebViev {
-  webview: {
-    hostObjects: {
-      WebUIBinding: WebUiBindingType
-    }
-  }
+type ModelCard = {
+  serverUrl: string
+  modelId: string
+  projectId: string
+  type: 'sender' | 'receiver'
+  lastUpdatedAt: Date
+  // settings: Record<string,unknown>???
+  // report: Record<string,unknown>???
+  // progress: Record<string,unknown>???
 }
 
-export type WebUiBindingType = {
-  getAccounts: () => Promise<string>
+export type IWebUiBinding = {
   sayHi: (name: string) => Promise<string>
-  getSourceAppName: () => Promise<string>
   openDevTools: () => Promise<void>
+  getAccounts: () => Promise<Account[]>
+  getSourceAppName: () => Promise<string>
+  // etc.
+  getFileState: () => Promise<FileState>
 }
 
-export const MockedBindings: WebUiBindingType = {
-  async getAccounts() {
-    return '[]'
-  },
+export const MockedBindings: IWebUiBinding = {
   async sayHi(name: string) {
     return `Hi ${name} from (mocked bindings)!`
   },
+  async openDevTools() {
+    // eslint-disable-next-line no-alert
+    window.alert('Mocked bindings cannot do this. Sorry :(')
+  },
+  async getAccounts() {
+    return []
+  },
   async getSourceAppName() {
     return 'Mocked App'
   },
-  async openDevTools() {
-    console.log('Open it yourself. I am just a set of mocked bindings!!!')
+  async getFileState() {
+    return { models: [] }
   }
 }

From ca63e2936a8518c033b45f732e3dc09c5a289cd4 Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Sun, 9 Jul 2023 22:19:55 +0100
Subject: [PATCH 04/35] experiments(dui3): super wip work

---
 .../dui3/lib/accounts/composables/setup.ts    |  8 +++-
 packages/dui3/lib/bridge/cefSharp.ts          | 28 +++++++++++++
 packages/dui3/lib/bridge/sketchup.ts          |  1 +
 packages/dui3/lib/bridge/webview.ts           | 14 +++++++
 packages/dui3/lib/sketchup/bindings.ts        | 30 --------------
 packages/dui3/package.json                    |  1 +
 packages/dui3/pages/index.vue                 |  3 +-
 packages/dui3/plugins/00.bindings.ts          | 16 ++++++--
 packages/dui3/types/index.ts                  | 39 +++++++++++++++++--
 9 files changed, 101 insertions(+), 39 deletions(-)
 create mode 100644 packages/dui3/lib/bridge/cefSharp.ts
 create mode 100644 packages/dui3/lib/bridge/sketchup.ts
 delete mode 100644 packages/dui3/lib/sketchup/bindings.ts

diff --git a/packages/dui3/lib/accounts/composables/setup.ts b/packages/dui3/lib/accounts/composables/setup.ts
index 3bf7aa86a..d3c45e092 100644
--- a/packages/dui3/lib/accounts/composables/setup.ts
+++ b/packages/dui3/lib/accounts/composables/setup.ts
@@ -29,7 +29,7 @@ export async function useAccountsSetup() {
 
   // Matches local accounts coming from the host app to app state.
   const refreshAccounts = async () => {
-    const accs = JSON.parse(await $bindings.getAccounts()) as Account[]
+    const accs = await $bindings.getAccounts()
     const newAccs = [] as DUIAccount[]
     for (const acc of accs) {
       const existing = accounts.value.find((a) => a.accountInfo.id === acc.id)
@@ -53,10 +53,16 @@ export async function useAccountsSetup() {
     accounts.value = newAccs
   }
 
+  // Call this one first to initialize the account state
   await refreshAccounts()
 
+  const defaultAccount = computed(() =>
+    accounts.value.find((acc) => acc.accountInfo.isDefault)
+  )
+
   const accState = {
     accounts,
+    defaultAccount,
     refreshAccounts
   }
 
diff --git a/packages/dui3/lib/bridge/cefSharp.ts b/packages/dui3/lib/bridge/cefSharp.ts
new file mode 100644
index 000000000..2d480de24
--- /dev/null
+++ b/packages/dui3/lib/bridge/cefSharp.ts
@@ -0,0 +1,28 @@
+import { IWebUiBinding } from '~/types'
+import { createNanoEvents, Emitter } from 'nanoevents'
+import { HostAppEvents } from '~/types'
+
+export class CefSharpBridge {
+  private emitter: Emitter
+
+  constructor(bindingObject: IWebUiBinding) {
+    const hoistTarget = this as unknown as Record<string, unknown>
+    const hoistSource = bindingObject as unknown as Record<string, unknown>
+
+    for (const key in bindingObject) {
+      hoistTarget[key] = hoistSource[key]
+    }
+
+    this.emitter = createNanoEvents<HostAppEvents>()
+    this.emitter.emit('start', 'polo pasta')
+  }
+
+  on<E extends keyof HostAppEvents>(event: E, callback: HostAppEvents[E]) {
+    return this.emitter.on(event, callback)
+  }
+
+  emit(eventName: string, payload: string) {
+    const parsedPayload = JSON.parse(payload) as unknown
+    this.emitter.emit(eventName, parsedPayload)
+  }
+}
diff --git a/packages/dui3/lib/bridge/sketchup.ts b/packages/dui3/lib/bridge/sketchup.ts
new file mode 100644
index 000000000..70b786d12
--- /dev/null
+++ b/packages/dui3/lib/bridge/sketchup.ts
@@ -0,0 +1 @@
+// TODO
diff --git a/packages/dui3/lib/bridge/webview.ts b/packages/dui3/lib/bridge/webview.ts
index d16d1c023..0817c6edf 100644
--- a/packages/dui3/lib/bridge/webview.ts
+++ b/packages/dui3/lib/bridge/webview.ts
@@ -1,4 +1,6 @@
 // github.com/johot/WebView2-better-bridge/blob/master/web-ui/src/betterBridge.ts
+import { createNanoEvents, Emitter } from 'nanoevents'
+import { HostAppEvents } from '~/types'
 
 type IWebView2 = {
   webview: {
@@ -17,6 +19,7 @@ declare let chrome: IWebView2
 
 export class WebView2Bridge {
   private webViewBridge: IRawBridge
+  private emitter: Emitter
 
   constructor(bridgeName: string) {
     this.webViewBridge = chrome.webview.hostObjects[bridgeName]
@@ -33,6 +36,8 @@ export class WebView2Bridge {
       hoistTarget[lowercasedMethodName] = (...args: unknown[]) =>
         this.runMethod(methodName, args)
     }
+
+    this.emitter = createNanoEvents<HostAppEvents>()
   }
 
   private async runMethod(methodName: string, args: unknown[]): Promise<unknown> {
@@ -45,6 +50,15 @@ export class WebView2Bridge {
 
     return JSON.parse(result) as unknown
   }
+
+  on<E extends keyof HostAppEvents>(event: E, callback: HostAppEvents[E]) {
+    return this.emitter.on(event, callback)
+  }
+
+  emit(eventName: string, payload: string) {
+    const parsedPayload = JSON.parse(payload) as unknown
+    this.emitter.emit(eventName, parsedPayload)
+  }
 }
 
 const lowercaseMethodName = (name: string) =>
diff --git a/packages/dui3/lib/sketchup/bindings.ts b/packages/dui3/lib/sketchup/bindings.ts
deleted file mode 100644
index 4cba29c33..000000000
--- a/packages/dui3/lib/sketchup/bindings.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { IWebUiBinding } from '~/types'
-
-export class SketchupBindings implements IWebUiBinding {
-  requestId = 0
-  requests = {} as Record<number, unknown>
-
-  SketchupBindings() {
-    // todo
-  }
-
-  getAccounts() {
-    this.requestId++
-    this.requests[this.requestId] = new Promise((resolve, reject) => resolve('[]'))
-
-    return this.requests[this.requestId] as Promise<string>
-  }
-
-  async sayHi(name: string) {
-    return `Hi ${name} from (sketchup mocked bindings)!`
-  }
-
-  getSourceAppName() {
-    return new Promise((resolve, reject) => resolve('sketchup')) as Promise<string>
-  }
-
-  async openDevTools() {
-    // eslint-disable-next-line no-alert
-    window.alert('Please right click and select show dev tools.')
-  }
-}
diff --git a/packages/dui3/package.json b/packages/dui3/package.json
index 6832566ad..012c5695a 100644
--- a/packages/dui3/package.json
+++ b/packages/dui3/package.json
@@ -34,6 +34,7 @@
     "graphql": "^16.6.0",
     "graphql-tag": "^2.12.6",
     "lodash-es": "^4.17.21",
+    "nanoevents": "^8.0.0",
     "portal-vue": "^3.0.0",
     "subscriptions-transport-ws": "^0.11.0"
   },
diff --git a/packages/dui3/pages/index.vue b/packages/dui3/pages/index.vue
index 9e367c6f1..2af7b8dbc 100644
--- a/packages/dui3/pages/index.vue
+++ b/packages/dui3/pages/index.vue
@@ -18,6 +18,7 @@
           {{ acc.accountInfo.serverInfo.name }}
         </div>
       </div>
+      <div>Your default account is {{ defaultAccount?.accountInfo }}</div>
       <div>
         <div v-for="(res, clientId) in queries" :key="clientId">
           <strong>{{ clientId }}:</strong>
@@ -38,7 +39,7 @@ import { ServerInfoTestQuery } from '~/lib/common/generated/gql/graphql'
 
 const { $bindings } = useNuxtApp()
 const appName = await $bindings.getSourceAppName()
-const { accounts, refreshAccounts } = await useAccountsSetup()
+const { accounts, refreshAccounts, defaultAccount } = await useAccountsSetup()
 
 const versionQuery = graphql(`
   query ServerInfoTest {
diff --git a/packages/dui3/plugins/00.bindings.ts b/packages/dui3/plugins/00.bindings.ts
index 84b636630..91d0547c7 100644
--- a/packages/dui3/plugins/00.bindings.ts
+++ b/packages/dui3/plugins/00.bindings.ts
@@ -1,5 +1,6 @@
 import { IWebUiBinding, MockedBindings } from '~/types'
 import { WebView2Bridge } from '~/lib/bridge/webview'
+import { CefSharpBridge } from '~/lib/bridge/cefSharp'
 
 interface ICefSharp {
   BindObjectAsync: (arg: string) => Promise<void>
@@ -11,10 +12,14 @@ interface IWebView2 {
 
 declare let CefSharp: ICefSharp
 declare let chrome: IWebView2
-declare let sketchup: Record<string, unknown> //
+declare let sketchup: Record<string, unknown>
 
 declare let WebUIBinding: IWebUiBinding
 
+// Tries to find the correct host application binding. The sequence is:
+// - CEFSharp (.NET)
+// - WebView2 (.NET)
+// - Sketchup (Ruby) - NOT IMPLEMENTED
 export default defineNuxtPlugin(async () => {
   let bindings: IWebUiBinding | undefined = undefined
 
@@ -22,7 +27,7 @@ export default defineNuxtPlugin(async () => {
     if (!CefSharp) throw new Error('No global CefSharp object found.')
     await CefSharp.BindObjectAsync('WebUIBinding')
     console.info('Bound WebUIBinding object for CefSharp.')
-    bindings = WebUIBinding
+    bindings = new CefSharpBridge(WebUIBinding) as unknown as IWebUiBinding
   } catch (e) {
     console.warn('Failed to bind CefSharp.')
     console.warn(e)
@@ -32,10 +37,9 @@ export default defineNuxtPlugin(async () => {
     if (!chrome.webview) throw new Error('No global Webview2 object found.')
     bindings = new WebView2Bridge('WebUIBinding') as unknown as IWebUiBinding
     console.info('Bound WebUIBinding object for Webview2.')
+
     const res = await bindings.sayHi('Test')
     console.log(res)
-
-    // TODO: Wrap the motherfucking wv2 bindings up
   } catch (e) {
     console.warn('Failed to bind Webview2.')
     console.warn(e)
@@ -57,6 +61,10 @@ export default defineNuxtPlugin(async () => {
 
   ;(globalThis as Record<string, unknown>).bindings = bindings
 
+  bindings.on('test', (args) => {
+    console.log(args)
+  })
+
   return {
     provide: {
       bindings
diff --git a/packages/dui3/types/index.ts b/packages/dui3/types/index.ts
index 47dc1807c..29e43589b 100644
--- a/packages/dui3/types/index.ts
+++ b/packages/dui3/types/index.ts
@@ -1,3 +1,4 @@
+import { createNanoEvents, Emitter } from 'nanoevents'
 /* eslint-disable @typescript-eslint/require-await */
 export type Account = {
   id: string
@@ -30,17 +31,46 @@ type ModelCard = {
   // settings: Record<string,unknown>???
   // report: Record<string,unknown>???
   // progress: Record<string,unknown>???
+  status: 'idle' | 'inprogress' | 'error' | 'warning' | 'disabled'
 }
 
-export type IWebUiBinding = {
+type TestData = {
+  foo: number
+  bar: string
+  baz: boolean
+}
+
+export interface HostAppEvents {
+  test: (data: TestData) => void
+  documentChanged: () => void
+  selectionChanged: () => void
+  documentClosed: () => void
+  updateModelCardState: () => void
+  displayToastNotification: () => void // bla bla bla
+}
+
+export interface IWebUiBinding {
   sayHi: (name: string) => Promise<string>
   openDevTools: () => Promise<void>
   getAccounts: () => Promise<Account[]>
   getSourceAppName: () => Promise<string>
-  // etc.
-  getFileState: () => Promise<FileState>
+  // getFileState: () => Promise<FileState>
+  // addModelCard(string modelId, string projectId), removeModelCard(...) // etc. etc.
+  /**
+   * Subscribe to messages from the host application.
+   * @param event
+   * @param callback
+   */
+  on: <E extends keyof HostAppEvents>(event: E, callback: HostAppEvents[E]) => void
+  /**
+   * Used by the host application to notify/send data to the web app. Do not use from the frontend.
+   * @param eventName
+   * @param args
+   */
+  emit?: (eventName: string, args: Record<string, unknown>) => void
 }
 
+const mockedEmitter = createNanoEvents<HostAppEvents>()
 export const MockedBindings: IWebUiBinding = {
   async sayHi(name: string) {
     return `Hi ${name} from (mocked bindings)!`
@@ -57,5 +87,8 @@ export const MockedBindings: IWebUiBinding = {
   },
   async getFileState() {
     return { models: [] }
+  },
+  on<E extends keyof HostAppEvents>(event: E, callback: HostAppEvents[E]) {
+    return mockedEmitter.on(event, callback)
   }
 }

From 5f3b7a16f2445067c5ef7eeda868693d8ef2b1a8 Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Mon, 10 Jul 2023 17:01:49 +0100
Subject: [PATCH 05/35] experiments(dui3): super wip work

---
 .../dui3/lib/accounts/composables/setup.ts    | 10 ++-
 packages/dui3/lib/bridge/sketchup.ts          | 85 +++++++++++++++++++
 packages/dui3/pages/index.vue                 |  6 +-
 packages/dui3/plugins/00.bindings.ts          | 16 +++-
 packages/dui3/types/index.ts                  |  9 +-
 5 files changed, 112 insertions(+), 14 deletions(-)

diff --git a/packages/dui3/lib/accounts/composables/setup.ts b/packages/dui3/lib/accounts/composables/setup.ts
index d3c45e092..8e4a47e97 100644
--- a/packages/dui3/lib/accounts/composables/setup.ts
+++ b/packages/dui3/lib/accounts/composables/setup.ts
@@ -1,6 +1,6 @@
 import { ApolloClient } from '@apollo/client/core'
 import { ApolloClients } from '@vue/apollo-composable'
-import { ShallowRef } from 'vue'
+import { ShallowRef, ComputedRef } from 'vue'
 import { resolveClientConfig } from '~/lib/core/configs/apollo'
 import { Account } from '~/types'
 
@@ -14,15 +14,16 @@ export type DUIAccount = {
 export type DUIAccountsState = {
   accounts: ShallowRef<DUIAccount[]>
   refreshAccounts: () => Promise<void>
+  defaultAccount: ComputedRef<DUIAccount | undefined>
 }
 
 const AccountsInjectionKey = 'DUI_ACCOUNTS_STATE'
 
-export async function useAccountsSetup() {
+export async function useAccountsSetup(): Promise<DUIAccountsState> {
   const app = useNuxtApp()
   const $bindings = app.$bindings
 
-  // Using a shallow ref as we don't need inner values reactive
+  // Using a shallow ref as we don't need inner values reactive (could be a needlessly big return from host app)
   const accounts = shallowRef([] as DUIAccount[])
 
   const apolloClients = {} as Record<string, ApolloClient<unknown>>
@@ -54,6 +55,7 @@ export async function useAccountsSetup() {
   }
 
   // Call this one first to initialize the account state
+  // QUESTION: could be flopped in a iife so as not to block and drop the asyncness of this setup function?
   await refreshAccounts()
 
   const defaultAccount = computed(() =>
@@ -71,7 +73,7 @@ export async function useAccountsSetup() {
   return accState
 }
 
-export function useInjectedAccounts() {
+export function useInjectedAccounts(): DUIAccountsState {
   const state = inject(AccountsInjectionKey) as DUIAccountsState
   return state
 }
diff --git a/packages/dui3/lib/bridge/sketchup.ts b/packages/dui3/lib/bridge/sketchup.ts
index 70b786d12..5d3fce19d 100644
--- a/packages/dui3/lib/bridge/sketchup.ts
+++ b/packages/dui3/lib/bridge/sketchup.ts
@@ -1 +1,86 @@
 // TODO
+import { rejects } from 'assert'
+import { uniqueId } from 'lodash-es'
+import { resolve } from 'path'
+
+declare let sketchup: {
+  exec: (data: Record<string, unknown>) => void
+}
+
+export class SketchupBridge {
+  private requests = {} as Record<
+    string,
+    {
+      resolve: (value: unknown) => void
+      reject: (reason: string | Error) => void
+      rejectTimerId: number
+    }
+  >
+  private bindingsName: string
+  private TIMEOUT_MS = 2000 // 2s
+  public isInitalized: Promise<void>
+  private isInitializedResolved!: () => unknown
+
+  constructor(bindingsName: string) {
+    // window.sketchup
+    this.bindingsName = bindingsName || 'default_bindings'
+
+    sketchup.exec({ name: 'get_commands' })
+    // Initialization continues in the receiveCommandsAndInitializeBridge function
+
+    this.isInitalized = new Promise((resolve, reject) => {
+      // TODO
+      this.isInitializedResolved = resolve
+    })
+  }
+
+  // executeScript(...) from skp
+  private receiveCommandsAndInitializeBridge(commandNames: string[]) {
+    const hoistTarget = this as unknown as Record<string, unknown>
+
+    for (const commandName of commandNames) {
+      hoistTarget[commandName] = (...args: unknown[]) =>
+        this.runMethod(commandName, args)
+    }
+
+    // this.isInitalized = true
+    this.isInitializedResolved()
+  }
+
+  private async runMethod(methodName: string, args: unknown[]): Promise<unknown> {
+    const requestId = uniqueId(this.bindingsName)
+
+    // The single exec way
+    sketchup.exec({ name: methodName, requestId, args })
+
+    return new Promise((resolve, reject) => {
+      this.requests[requestId] = {
+        resolve,
+        reject,
+        rejectTimerId: window.setTimeout(() => {
+          reject(
+            'Sketchup response timed out - did not receive anything back in good time.'
+          )
+          // TODO: clear request from requests object
+        }, this.TIMEOUT_MS)
+      }
+    })
+  }
+
+  private receiveResponse(requestId: string, data: string) {
+    // TODO
+    if (!this.requests[requestId]) return // throw new error?
+    const request = this.requests[requestId]
+    try {
+      // TODO: resolve also if data is null, it means it's a
+      // 'void' function call (does not return anything)
+      const parsedData = JSON.parse(data) as Record<string, unknown>
+      request.resolve(parsedData)
+    } catch (e) {
+      request.reject(e as Error)
+    } finally {
+      window.clearTimeout(request.rejectTimerId)
+      delete this.requests[requestId]
+    }
+  }
+}
diff --git a/packages/dui3/pages/index.vue b/packages/dui3/pages/index.vue
index 2af7b8dbc..09218cef4 100644
--- a/packages/dui3/pages/index.vue
+++ b/packages/dui3/pages/index.vue
@@ -50,11 +50,9 @@ const versionQuery = graphql(`
 `)
 
 watch(accounts, () => {
-  console.log('accs ref')
+  console.log('accounts were refreshed, shallow ref does its job')
 })
-/**
- * Imagine these come from window or something
- */
+
 const clientIds = accounts.value.map((a) => a.accountInfo.id)
 
 const queries: Record<
diff --git a/packages/dui3/plugins/00.bindings.ts b/packages/dui3/plugins/00.bindings.ts
index 91d0547c7..c7407e75c 100644
--- a/packages/dui3/plugins/00.bindings.ts
+++ b/packages/dui3/plugins/00.bindings.ts
@@ -1,6 +1,7 @@
 import { IWebUiBinding, MockedBindings } from '~/types'
 import { WebView2Bridge } from '~/lib/bridge/webview'
 import { CefSharpBridge } from '~/lib/bridge/cefSharp'
+import { SketchupBridge } from '~/lib/bridge/sketchup'
 
 interface ICefSharp {
   BindObjectAsync: (arg: string) => Promise<void>
@@ -49,6 +50,10 @@ export default defineNuxtPlugin(async () => {
     if (!sketchup) throw new Error('No global sketchup object found.')
     console.info('Found Sketchup. Hi SketchUp! We have yet... a lot of work to do :) ')
     // TODO
+    const skpBindings = new SketchupBridge('default_bindings')
+    await skpBindings.isInitalized // resolve({...})
+
+    bindings = skpBindings as unknown as IWebUiBinding
   } catch (e) {
     console.warn('Failed to bind sketchup.')
     console.warn(e)
@@ -61,9 +66,14 @@ export default defineNuxtPlugin(async () => {
 
   ;(globalThis as Record<string, unknown>).bindings = bindings
 
-  bindings.on('test', (args) => {
-    console.log(args)
-  })
+  // bindings.on('test', (args) => {
+  //   console.log(args)
+  // })
+
+  // bindings.on('documentChanged', (args) => {
+  //   // do somethings
+  //   args.x
+  // })
 
   return {
     provide: {
diff --git a/packages/dui3/types/index.ts b/packages/dui3/types/index.ts
index 29e43589b..d52617777 100644
--- a/packages/dui3/types/index.ts
+++ b/packages/dui3/types/index.ts
@@ -23,8 +23,8 @@ type FileState = {
 }
 
 type ModelCard = {
-  serverUrl: string
-  modelId: string
+  serverUrl: string // we need to select the correct account
+  modelId: string // we need to assemble the gql query properly
   projectId: string
   type: 'sender' | 'receiver'
   lastUpdatedAt: Date
@@ -40,15 +40,17 @@ type TestData = {
   baz: boolean
 }
 
+// .NET/Host App -> JS
 export interface HostAppEvents {
   test: (data: TestData) => void
-  documentChanged: () => void
+  documentChanged: (data: { x: number; y: boolean }) => void
   selectionChanged: () => void
   documentClosed: () => void
   updateModelCardState: () => void
   displayToastNotification: () => void // bla bla bla
 }
 
+// JS -> asks for something form host app
 export interface IWebUiBinding {
   sayHi: (name: string) => Promise<string>
   openDevTools: () => Promise<void>
@@ -56,6 +58,7 @@ export interface IWebUiBinding {
   getSourceAppName: () => Promise<string>
   // getFileState: () => Promise<FileState>
   // addModelCard(string modelId, string projectId), removeModelCard(...) // etc. etc.
+
   /**
    * Subscribe to messages from the host application.
    * @param event

From c452458812ee7c4cebbb669e4c70076bdf3145f1 Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Mon, 10 Jul 2023 20:12:35 +0100
Subject: [PATCH 06/35] experiments(dui3): extra cleanup and comments around

---
 packages/dui3/lib/bridge/sketchup.ts | 54 ++++++++++++++++++----------
 packages/dui3/plugins/00.bindings.ts | 33 ++++++++---------
 packages/dui3/types/index.ts         |  3 +-
 yarn.lock                            |  8 +++++
 4 files changed, 60 insertions(+), 38 deletions(-)

diff --git a/packages/dui3/lib/bridge/sketchup.ts b/packages/dui3/lib/bridge/sketchup.ts
index 5d3fce19d..7342a127b 100644
--- a/packages/dui3/lib/bridge/sketchup.ts
+++ b/packages/dui3/lib/bridge/sketchup.ts
@@ -1,12 +1,15 @@
 // TODO
-import { rejects } from 'assert'
 import { uniqueId } from 'lodash-es'
-import { resolve } from 'path'
 
 declare let sketchup: {
   exec: (data: Record<string, unknown>) => void
 }
 
+/**
+ * This class operates in different way than the others, because calls into Sketchup are one way only.
+ * E.g., we cannot return values from internal calls to it (e.g., const test = sketchup.rubyCall() does not work ).
+ * Values are passed back
+ */
 export class SketchupBridge {
   private requests = {} as Record<
     string,
@@ -19,38 +22,51 @@ export class SketchupBridge {
   private bindingsName: string
   private TIMEOUT_MS = 2000 // 2s
   public isInitalized: Promise<void>
-  private isInitializedResolved!: () => unknown
+  private resolveIsInitializedPromise!: () => unknown
 
   constructor(bindingsName: string) {
-    // window.sketchup
     this.bindingsName = bindingsName || 'default_bindings'
 
+    // Initialization continues in the receiveCommandsAndInitializeBridge function,
+    // where we expect sketchup to return to us the command names.
     sketchup.exec({ name: 'get_commands' })
-    // Initialization continues in the receiveCommandsAndInitializeBridge function
 
     this.isInitalized = new Promise((resolve, reject) => {
-      // TODO
-      this.isInitializedResolved = resolve
+      this.resolveIsInitializedPromise = resolve
+      setTimeout(
+        () =>
+          reject(
+            `Failed to get command names from Sketchup; timed out after ${this.TIMEOUT_MS}ms.`
+          ),
+        this.TIMEOUT_MS
+      )
     })
   }
 
-  // executeScript(...) from skp
+  /**
+   * Will be called by `executeScript('bindings.receiveCommandsAndInitializeBridge()')` from sketchup. This is where the hoisting happens.
+   * NOTE: Oguhzan, we can defintively have commandNames be a string, and not a string[]
+   * And do JSON.parse() here to get them out properly.
+   * @param commandNames
+   */
   private receiveCommandsAndInitializeBridge(commandNames: string[]) {
     const hoistTarget = this as unknown as Record<string, unknown>
-
     for (const commandName of commandNames) {
       hoistTarget[commandName] = (...args: unknown[]) =>
         this.runMethod(commandName, args)
     }
 
-    // this.isInitalized = true
-    this.isInitializedResolved()
+    this.resolveIsInitializedPromise()
   }
 
+  /**
+   * Internal calls to Sketchup.
+   * @param methodName
+   * @param args
+   */
   private async runMethod(methodName: string, args: unknown[]): Promise<unknown> {
     const requestId = uniqueId(this.bindingsName)
 
-    // The single exec way
     sketchup.exec({ name: methodName, requestId, args })
 
     return new Promise((resolve, reject) => {
@@ -59,22 +75,22 @@ export class SketchupBridge {
         reject,
         rejectTimerId: window.setTimeout(() => {
           reject(
-            'Sketchup response timed out - did not receive anything back in good time.'
+            `Sketchup response timed out - did not receive anything back in good time (${this.TIMEOUT_MS}ms).`
           )
-          // TODO: clear request from requests object
+          delete this.requests[requestId]
         }, this.TIMEOUT_MS)
       }
     })
   }
 
   private receiveResponse(requestId: string, data: string) {
-    // TODO
-    if (!this.requests[requestId]) return // throw new error?
+    if (!this.requests[requestId])
+      throw new Error(
+        `Sketchup Bridge found no request to resolve with the id of ${requestId}. Something is weird!`
+      )
     const request = this.requests[requestId]
     try {
-      // TODO: resolve also if data is null, it means it's a
-      // 'void' function call (does not return anything)
-      const parsedData = JSON.parse(data) as Record<string, unknown>
+      const parsedData = JSON.parse(data) as Record<string, unknown> // TODO: check if data is undefined
       request.resolve(parsedData)
     } catch (e) {
       request.reject(e as Error)
diff --git a/packages/dui3/plugins/00.bindings.ts b/packages/dui3/plugins/00.bindings.ts
index c7407e75c..1eea200be 100644
--- a/packages/dui3/plugins/00.bindings.ts
+++ b/packages/dui3/plugins/00.bindings.ts
@@ -30,7 +30,9 @@ export default defineNuxtPlugin(async () => {
     console.info('Bound WebUIBinding object for CefSharp.')
     bindings = new CefSharpBridge(WebUIBinding) as unknown as IWebUiBinding
   } catch (e) {
-    console.warn('Failed to bind CefSharp.')
+    console.warn(
+      'Failed to bind CefSharp. This can be totally normal if the host is different.'
+    )
     console.warn(e)
   }
 
@@ -38,24 +40,26 @@ export default defineNuxtPlugin(async () => {
     if (!chrome.webview) throw new Error('No global Webview2 object found.')
     bindings = new WebView2Bridge('WebUIBinding') as unknown as IWebUiBinding
     console.info('Bound WebUIBinding object for Webview2.')
-
-    const res = await bindings.sayHi('Test')
-    console.log(res)
   } catch (e) {
-    console.warn('Failed to bind Webview2.')
+    console.warn(
+      'Failed to bind Webview2. This can be totally normal if the host is different.'
+    )
     console.warn(e)
   }
 
   try {
     if (!sketchup) throw new Error('No global sketchup object found.')
     console.info('Found Sketchup. Hi SketchUp! We have yet... a lot of work to do :) ')
-    // TODO
-    const skpBindings = new SketchupBridge('default_bindings')
-    await skpBindings.isInitalized // resolve({...})
 
+    const skpBindings = new SketchupBridge('default_bindings')
+    // Note, because of the way Sketchup bindings work, we need to wait here
+    // for them to be fully initialized.
+    await skpBindings.isInitalized
     bindings = skpBindings as unknown as IWebUiBinding
   } catch (e) {
-    console.warn('Failed to bind sketchup.')
+    console.warn(
+      'Failed to bind sketchup. This can be totally normal if the host is different.'
+    )
     console.warn(e)
   }
 
@@ -64,17 +68,10 @@ export default defineNuxtPlugin(async () => {
     bindings = MockedBindings
   }
 
+  // We need the bindings object in global scope to allow
+  // host applications to send messages back to it.
   ;(globalThis as Record<string, unknown>).bindings = bindings
 
-  // bindings.on('test', (args) => {
-  //   console.log(args)
-  // })
-
-  // bindings.on('documentChanged', (args) => {
-  //   // do somethings
-  //   args.x
-  // })
-
   return {
     provide: {
       bindings
diff --git a/packages/dui3/types/index.ts b/packages/dui3/types/index.ts
index d52617777..a7ecd09ab 100644
--- a/packages/dui3/types/index.ts
+++ b/packages/dui3/types/index.ts
@@ -1,5 +1,6 @@
-import { createNanoEvents, Emitter } from 'nanoevents'
 /* eslint-disable @typescript-eslint/require-await */
+import { createNanoEvents } from 'nanoevents'
+
 export type Account = {
   id: string
   isDefault: boolean
diff --git a/yarn.lock b/yarn.lock
index a5d18fe64..9671dae3b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10933,6 +10933,7 @@ __metadata:
     graphql: ^16.6.0
     graphql-tag: ^2.12.6
     lodash-es: ^4.17.21
+    nanoevents: ^8.0.0
     nuxt: ^3.5.0
     portal-vue: ^3.0.0
     postcss: ^8.4.18
@@ -32762,6 +32763,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"nanoevents@npm:^8.0.0":
+  version: 8.0.0
+  resolution: "nanoevents@npm:8.0.0"
+  checksum: 46806fb1bca823de1dac0ec38352c9ebd25dd9f2186eada6357f2941983203c1c77fc383e460852a139b4ced569af2a2777f82cb574f705fd6f8402497f4bfc2
+  languageName: node
+  linkType: hard
+
 "nanoid@npm:3.3.3":
   version: 3.3.3
   resolution: "nanoid@npm:3.3.3"

From 9c2d2e5fdbb4aea21dd9480e63051e640881b8e6 Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Tue, 11 Jul 2023 10:34:38 +0100
Subject: [PATCH 07/35] experiments(dui3): quick fix for skp bridge init
 logic/order

---
 packages/dui3/lib/bridge/sketchup.ts  | 17 +++++++++++------
 packages/dui3/plugins/00.cefPlugin.ts | 23 -----------------------
 2 files changed, 11 insertions(+), 29 deletions(-)
 delete mode 100644 packages/dui3/plugins/00.cefPlugin.ts

diff --git a/packages/dui3/lib/bridge/sketchup.ts b/packages/dui3/lib/bridge/sketchup.ts
index 7342a127b..be8683b2b 100644
--- a/packages/dui3/lib/bridge/sketchup.ts
+++ b/packages/dui3/lib/bridge/sketchup.ts
@@ -8,7 +8,9 @@ declare let sketchup: {
 /**
  * This class operates in different way than the others, because calls into Sketchup are one way only.
  * E.g., we cannot return values from internal calls to it (e.g., const test = sketchup.rubyCall() does not work ).
- * Values are passed back
+ * This class basically makes the sketchup bindings work in the same way as cef/webview by returning a promise
+ * on each method call. That promise is either resolved once sketchup sends back (via receiveResponse) a corresponding
+ * reply, or it's rejected after a given TIMEOUT_MS (currently 2s).
  */
 export class SketchupBridge {
   private requests = {} as Record<
@@ -27,10 +29,6 @@ export class SketchupBridge {
   constructor(bindingsName: string) {
     this.bindingsName = bindingsName || 'default_bindings'
 
-    // Initialization continues in the receiveCommandsAndInitializeBridge function,
-    // where we expect sketchup to return to us the command names.
-    sketchup.exec({ name: 'get_commands' })
-
     this.isInitalized = new Promise((resolve, reject) => {
       this.resolveIsInitializedPromise = resolve
       setTimeout(
@@ -41,6 +39,12 @@ export class SketchupBridge {
         this.TIMEOUT_MS
       )
     })
+    // NOTE: we need to hoist the bindings in global scope here, before
+    ;(globalThis as Record<string, unknown>).bindings = this
+
+    // Initialization continues in the receiveCommandsAndInitializeBridge function,
+    // where we expect sketchup to return to us the command names.
+    sketchup.exec({ name: 'get_commands' })
   }
 
   /**
@@ -49,7 +53,8 @@ export class SketchupBridge {
    * And do JSON.parse() here to get them out properly.
    * @param commandNames
    */
-  private receiveCommandsAndInitializeBridge(commandNames: string[]) {
+  private receiveCommandsAndInitializeBridge(commandNamesString: string) {
+    const commandNames = JSON.parse(commandNamesString) as string[]
     const hoistTarget = this as unknown as Record<string, unknown>
     for (const commandName of commandNames) {
       hoistTarget[commandName] = (...args: unknown[]) =>
diff --git a/packages/dui3/plugins/00.cefPlugin.ts b/packages/dui3/plugins/00.cefPlugin.ts
deleted file mode 100644
index 2f852fa86..000000000
--- a/packages/dui3/plugins/00.cefPlugin.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-// import { ICefSharp, WebUiBindingType, MockedBindings } from '~/types'
-
-// declare let CefSharp: ICefSharp
-// declare let WebUIBinding: WebUiBindingType
-
-export default defineNuxtPlugin(async () => {
-  // let bindings: WebUiBindingType
-  // try {
-  //   if (!CefSharp) throw new Error('No global CefSharp object found.')
-  //   await CefSharp.BindObjectAsync('WebUIBinding')
-  //   console.info('Bound WebUIBinding object for CefSharp.')
-  //   bindings = WebUIBinding
-  // } catch (e) {
-  //   console.error('Failed to bind CefSharp, will use mocked bindings.')
-  //   console.error(e)
-  //   bindings = MockedBindings
-  // }
-  // return {
-  //   provide: {
-  //     bindings
-  //   }
-  // }
-})

From 1958446827e2e51622d598b8608f2cb11eda0713 Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Tue, 11 Jul 2023 12:45:16 +0100
Subject: [PATCH 08/35] experiments(dui3): cleanup + comments

---
 packages/dui3/lib/bridge/sketchup.ts | 13 +++++++++++--
 packages/dui3/plugins/00.bindings.ts |  2 ++
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/dui3/lib/bridge/sketchup.ts b/packages/dui3/lib/bridge/sketchup.ts
index be8683b2b..1aa5259a3 100644
--- a/packages/dui3/lib/bridge/sketchup.ts
+++ b/packages/dui3/lib/bridge/sketchup.ts
@@ -39,11 +39,14 @@ export class SketchupBridge {
         this.TIMEOUT_MS
       )
     })
-    // NOTE: we need to hoist the bindings in global scope here, before
+
+    // NOTE: we need to hoist the bindings in global scope BEFORE we call sketchup exec get comands below.
     ;(globalThis as Record<string, unknown>).bindings = this
 
     // Initialization continues in the receiveCommandsAndInitializeBridge function,
     // where we expect sketchup to return to us the command names.
+    // NOTE: as we want to have multiple sketchup bindings in the future, we will
+    // most likely change this method to specify which view/plugin/bindings we want.
     sketchup.exec({ name: 'get_commands' })
   }
 
@@ -72,7 +75,13 @@ export class SketchupBridge {
   private async runMethod(methodName: string, args: unknown[]): Promise<unknown> {
     const requestId = uniqueId(this.bindingsName)
 
-    sketchup.exec({ name: methodName, requestId, args })
+    // TODO: more on the ruby end, but for now Oguzhan seems happy with this.
+    // Changes might be needed in the future.
+    sketchup.exec({
+      name: methodName,
+      // eslint-disable-next-line camelcase
+      data: { request_id: requestId, arguments: args }
+    })
 
     return new Promise((resolve, reject) => {
       this.requests[requestId] = {
diff --git a/packages/dui3/plugins/00.bindings.ts b/packages/dui3/plugins/00.bindings.ts
index 1eea200be..199344e4e 100644
--- a/packages/dui3/plugins/00.bindings.ts
+++ b/packages/dui3/plugins/00.bindings.ts
@@ -47,6 +47,8 @@ export default defineNuxtPlugin(async () => {
     console.warn(e)
   }
 
+  // The sketchup ruby side is in flux. We know though that
+  // this part will work! Nevertheless, it will currently throw if loaded in sketchup.
   try {
     if (!sketchup) throw new Error('No global sketchup object found.')
     console.info('Found Sketchup. Hi SketchUp! We have yet... a lot of work to do :) ')

From 2cdc5b7d92d32b978573ef9d99c5cf4ad9b3b3dc Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Tue, 11 Jul 2023 19:16:46 +0100
Subject: [PATCH 09/35] experiments(dui3): adds an event emitter base class

---
 packages/dui3/lib/bridge/base.ts     | 24 ++++++++++++++++++++++++
 packages/dui3/lib/bridge/cefSharp.ts | 20 +++-----------------
 packages/dui3/lib/bridge/sketchup.ts | 11 +++++++----
 packages/dui3/lib/bridge/webview.ts  | 18 +++---------------
 4 files changed, 37 insertions(+), 36 deletions(-)
 create mode 100644 packages/dui3/lib/bridge/base.ts

diff --git a/packages/dui3/lib/bridge/base.ts b/packages/dui3/lib/bridge/base.ts
new file mode 100644
index 000000000..3cc01e9fe
--- /dev/null
+++ b/packages/dui3/lib/bridge/base.ts
@@ -0,0 +1,24 @@
+import { createNanoEvents, Emitter } from 'nanoevents'
+
+/**
+ * A simple (typed) event emitter base class that host applications can use to send messages (and data) to the web ui,
+ * e.g. via `browser.executeScriptAsync("myBindings.on('eventName', serializedData)")`.
+
+ */
+export class BaseBridge {
+  private emitter: Emitter
+
+  constructor() {
+    this.emitter = createNanoEvents()
+  }
+
+  // NOTE: these do not need to be typed extra in here, as they will be properly typed on the specific binding's interface.
+  on(event: string | number, callback: (...args: unknown[]) => void) {
+    return this.emitter.on(event, callback)
+  }
+
+  emit(eventName: string, payload: string) {
+    const parsedPayload = JSON.parse(payload) as unknown
+    this.emitter.emit(eventName, parsedPayload)
+  }
+}
diff --git a/packages/dui3/lib/bridge/cefSharp.ts b/packages/dui3/lib/bridge/cefSharp.ts
index 2d480de24..14c04a201 100644
--- a/packages/dui3/lib/bridge/cefSharp.ts
+++ b/packages/dui3/lib/bridge/cefSharp.ts
@@ -1,28 +1,14 @@
 import { IWebUiBinding } from '~/types'
-import { createNanoEvents, Emitter } from 'nanoevents'
-import { HostAppEvents } from '~/types'
-
-export class CefSharpBridge {
-  private emitter: Emitter
+import { BaseBridge } from '~/lib/bridge/base'
 
+export class CefSharpBridge extends BaseBridge {
   constructor(bindingObject: IWebUiBinding) {
+    super()
     const hoistTarget = this as unknown as Record<string, unknown>
     const hoistSource = bindingObject as unknown as Record<string, unknown>
 
     for (const key in bindingObject) {
       hoistTarget[key] = hoistSource[key]
     }
-
-    this.emitter = createNanoEvents<HostAppEvents>()
-    this.emitter.emit('start', 'polo pasta')
-  }
-
-  on<E extends keyof HostAppEvents>(event: E, callback: HostAppEvents[E]) {
-    return this.emitter.on(event, callback)
-  }
-
-  emit(eventName: string, payload: string) {
-    const parsedPayload = JSON.parse(payload) as unknown
-    this.emitter.emit(eventName, parsedPayload)
   }
 }
diff --git a/packages/dui3/lib/bridge/sketchup.ts b/packages/dui3/lib/bridge/sketchup.ts
index 1aa5259a3..471536c0f 100644
--- a/packages/dui3/lib/bridge/sketchup.ts
+++ b/packages/dui3/lib/bridge/sketchup.ts
@@ -1,5 +1,5 @@
-// TODO
 import { uniqueId } from 'lodash-es'
+import { BaseBridge } from './base'
 
 declare let sketchup: {
   exec: (data: Record<string, unknown>) => void
@@ -11,8 +11,9 @@ declare let sketchup: {
  * This class basically makes the sketchup bindings work in the same way as cef/webview by returning a promise
  * on each method call. That promise is either resolved once sketchup sends back (via receiveResponse) a corresponding
  * reply, or it's rejected after a given TIMEOUT_MS (currently 2s).
+ * TODO: implement the event dispatcher side as well.
  */
-export class SketchupBridge {
+export class SketchupBridge extends BaseBridge {
   private requests = {} as Record<
     string,
     {
@@ -27,6 +28,7 @@ export class SketchupBridge {
   private resolveIsInitializedPromise!: () => unknown
 
   constructor(bindingsName: string) {
+    super()
     this.bindingsName = bindingsName || 'default_bindings'
 
     this.isInitalized = new Promise((resolve, reject) => {
@@ -104,8 +106,9 @@ export class SketchupBridge {
       )
     const request = this.requests[requestId]
     try {
-      const parsedData = JSON.parse(data) as Record<string, unknown> // TODO: check if data is undefined
-      request.resolve(parsedData)
+      // NOTE/TODO: does not need parsing
+      // const parsedData = JSON.parse(data) as Record<string, unknown> // TODO: check if data is undefined
+      request.resolve(data)
     } catch (e) {
       request.reject(e as Error)
     } finally {
diff --git a/packages/dui3/lib/bridge/webview.ts b/packages/dui3/lib/bridge/webview.ts
index 0817c6edf..7adfc86e3 100644
--- a/packages/dui3/lib/bridge/webview.ts
+++ b/packages/dui3/lib/bridge/webview.ts
@@ -1,6 +1,5 @@
 // github.com/johot/WebView2-better-bridge/blob/master/web-ui/src/betterBridge.ts
-import { createNanoEvents, Emitter } from 'nanoevents'
-import { HostAppEvents } from '~/types'
+import { BaseBridge } from '~/lib/bridge/base'
 
 type IWebView2 = {
   webview: {
@@ -17,11 +16,11 @@ type IRawBridge = {
 
 declare let chrome: IWebView2
 
-export class WebView2Bridge {
+export class WebView2Bridge extends BaseBridge {
   private webViewBridge: IRawBridge
-  private emitter: Emitter
 
   constructor(bridgeName: string) {
+    super()
     this.webViewBridge = chrome.webview.hostObjects[bridgeName]
 
     // NOTE: GetMethods is a call to the .NET side.
@@ -36,8 +35,6 @@ export class WebView2Bridge {
       hoistTarget[lowercasedMethodName] = (...args: unknown[]) =>
         this.runMethod(methodName, args)
     }
-
-    this.emitter = createNanoEvents<HostAppEvents>()
   }
 
   private async runMethod(methodName: string, args: unknown[]): Promise<unknown> {
@@ -50,15 +47,6 @@ export class WebView2Bridge {
 
     return JSON.parse(result) as unknown
   }
-
-  on<E extends keyof HostAppEvents>(event: E, callback: HostAppEvents[E]) {
-    return this.emitter.on(event, callback)
-  }
-
-  emit(eventName: string, payload: string) {
-    const parsedPayload = JSON.parse(payload) as unknown
-    this.emitter.emit(eventName, parsedPayload)
-  }
 }
 
 const lowercaseMethodName = (name: string) =>

From ca91ff896080b747cc81da45f170a0c744b16e2a Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Tue, 11 Jul 2023 19:17:22 +0100
Subject: [PATCH 10/35] experiments(dui3): adds an event emitter base class

---
 packages/dui3/lib/bridge/base.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/dui3/lib/bridge/base.ts b/packages/dui3/lib/bridge/base.ts
index 3cc01e9fe..f8d904fbf 100644
--- a/packages/dui3/lib/bridge/base.ts
+++ b/packages/dui3/lib/bridge/base.ts
@@ -17,6 +17,7 @@ export class BaseBridge {
     return this.emitter.on(event, callback)
   }
 
+  // NOTE: this could be private - as it should be only used by the host application.
   emit(eventName: string, payload: string) {
     const parsedPayload = JSON.parse(payload) as unknown
     this.emitter.emit(eventName, parsedPayload)

From eb0f4402fb22a8d96039ff46f2b3e65ea5d8881b Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Wed, 12 Jul 2023 19:39:15 +0100
Subject: [PATCH 11/35] experiments(dui3): WIP - needs minor readjustments with
 the .net patterns

---
 .../lib/bindings/definitions/baseBindings.ts  | 76 +++++++++++++++++++
 packages/dui3/lib/bridge/base.ts              |  1 -
 packages/dui3/lib/bridge/webview.ts           |  4 +-
 packages/dui3/pages/index.vue                 |  2 +-
 packages/dui3/types/index.ts                  |  9 +--
 5 files changed, 81 insertions(+), 11 deletions(-)
 create mode 100644 packages/dui3/lib/bindings/definitions/baseBindings.ts

diff --git a/packages/dui3/lib/bindings/definitions/baseBindings.ts b/packages/dui3/lib/bindings/definitions/baseBindings.ts
new file mode 100644
index 000000000..83971e527
--- /dev/null
+++ b/packages/dui3/lib/bindings/definitions/baseBindings.ts
@@ -0,0 +1,76 @@
+export interface IBaseBindings {
+  sayHi: (name: string) => Promise<string>
+  getAccounts: () => Promise<Account[]>
+  getSourceAppName: () => Promise<string>
+  getSourceAppVersion: () => Promise<string>
+  getDocumentInfo: () => Promise<DocumentInfo>
+
+  // TODO:
+  getFileState: () => Promise<FileState>
+  updateFileState: (state: FileState) => Promise<void>
+
+  /**
+   * Subscribe to messages from the host application.
+   * @param event
+   * @param callback
+   */
+  on: <E extends keyof IBaseBindingsHostEvents>(
+    event: E,
+    callback: IBaseBindingsHostEvents[E]
+  ) => void
+}
+
+export interface IBaseBindingsHostEvents {
+  displayToastNotification: (args: ToastInfo) => void
+  documentChanged: () => void
+  selectionChanged: (args: SelectionChangedInfo) => void
+}
+
+export type Account = {
+  id: string
+  isDefault: boolean
+  token: string
+  serverInfo: {
+    name: string
+    url: string
+  }
+  userInfo: {
+    id: string
+    avatar: string
+    email: string
+    name: string
+    commits: { totalCount: number }
+    streams: { totalCount: number }
+  }
+}
+
+export type FileState = {
+  models: ModelCard[]
+}
+
+export type ModelCard = {
+  serverUrl: string // we need to select the correct account
+  modelId: string // we need to assemble the gql query properly
+  projectId: string
+  type: 'sender' | 'receiver'
+  status?: 'idle' | 'inprogress' | 'error' | 'warning' | 'disabled' | 'expired' //???
+  // settings: Record<string,unknown>???
+  // report: Record<string,unknown>???
+  // progress: Record<string, unknown> // ??? send status, receive status
+}
+export type DocumentInfo = {
+  location: string
+  name: string
+  id: string
+}
+
+export type ToastInfo = {
+  text: string
+  details?: string
+  type: 'info' | 'error' | 'warning'
+}
+
+export type SelectionChangedInfo = {
+  objectIds: string[]
+  humanReadableSummary?: string
+}
diff --git a/packages/dui3/lib/bridge/base.ts b/packages/dui3/lib/bridge/base.ts
index f8d904fbf..ae0c6ddf3 100644
--- a/packages/dui3/lib/bridge/base.ts
+++ b/packages/dui3/lib/bridge/base.ts
@@ -3,7 +3,6 @@ import { createNanoEvents, Emitter } from 'nanoevents'
 /**
  * A simple (typed) event emitter base class that host applications can use to send messages (and data) to the web ui,
  * e.g. via `browser.executeScriptAsync("myBindings.on('eventName', serializedData)")`.
-
  */
 export class BaseBridge {
   private emitter: Emitter
diff --git a/packages/dui3/lib/bridge/webview.ts b/packages/dui3/lib/bridge/webview.ts
index 7adfc86e3..7878a5b0b 100644
--- a/packages/dui3/lib/bridge/webview.ts
+++ b/packages/dui3/lib/bridge/webview.ts
@@ -10,7 +10,7 @@ type IWebView2 = {
 }
 
 type IRawBridge = {
-  GetMethods: () => string[]
+  GetBindingsMethodNames: () => string[]
   RunMethod: (methodName: string, args: string) => Promise<string>
 }
 
@@ -25,7 +25,7 @@ export class WebView2Bridge extends BaseBridge {
 
     // NOTE: GetMethods is a call to the .NET side.
     const availableMethodNames =
-      chrome.webview.hostObjects.sync[bridgeName].GetMethods()
+      chrome.webview.hostObjects.sync[bridgeName].GetBindingsMethodNames()
 
     // NOTE: hoisting original calls as lowerCasedMethodNames, but using the UpperCasedName for the .NET call
     // This allows us to follow js convetions and keep .NET ones too (eg. bindings.sayHi('') => public string SayHi(string name) {}
diff --git a/packages/dui3/pages/index.vue b/packages/dui3/pages/index.vue
index 09218cef4..f7f574c0c 100644
--- a/packages/dui3/pages/index.vue
+++ b/packages/dui3/pages/index.vue
@@ -38,7 +38,7 @@ import { graphql } from '~/lib/common/generated/gql'
 import { ServerInfoTestQuery } from '~/lib/common/generated/gql/graphql'
 
 const { $bindings } = useNuxtApp()
-const appName = await $bindings.getSourceAppName()
+const appName = await $bindings.getSourceApplicationName()
 const { accounts, refreshAccounts, defaultAccount } = await useAccountsSetup()
 
 const versionQuery = graphql(`
diff --git a/packages/dui3/types/index.ts b/packages/dui3/types/index.ts
index a7ecd09ab..de7a9a41c 100644
--- a/packages/dui3/types/index.ts
+++ b/packages/dui3/types/index.ts
@@ -44,19 +44,14 @@ type TestData = {
 // .NET/Host App -> JS
 export interface HostAppEvents {
   test: (data: TestData) => void
-  documentChanged: (data: { x: number; y: boolean }) => void
-  selectionChanged: () => void
-  documentClosed: () => void
-  updateModelCardState: () => void
-  displayToastNotification: () => void // bla bla bla
 }
 
 // JS -> asks for something form host app
 export interface IWebUiBinding {
-  sayHi: (name: string) => Promise<string>
   openDevTools: () => Promise<void>
   getAccounts: () => Promise<Account[]>
-  getSourceAppName: () => Promise<string>
+  getSourceApplicationName: () => Promise<string>
+  getSourceApplicationVersion: () => Promise<string>
   // getFileState: () => Promise<FileState>
   // addModelCard(string modelId, string projectId), removeModelCard(...) // etc. etc.
 

From 2467b4749f0ebd99be1fc9393a1fef5761a9fb91 Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Thu, 13 Jul 2023 15:04:18 +0100
Subject: [PATCH 12/35] experiments(dui3): introducing generic bridge
 (cef/webview2) + some cleanup

---
 .../dui3/lib/accounts/composables/setup.ts    |   6 +-
 .../lib/bindings/definitions/baseBindings.ts  |  19 ++-
 packages/dui3/lib/bridge/cefSharp.ts          |  24 ++--
 packages/dui3/lib/bridge/generic.ts           |  45 ++++++
 packages/dui3/pages/index.vue                 |   4 +-
 packages/dui3/plugins/00.bindings.ts          | 135 +++++++++---------
 packages/dui3/plugins/00.bindingsV2.ts        |  51 +++++++
 packages/dui3/types/index.ts                  |  93 ------------
 8 files changed, 189 insertions(+), 188 deletions(-)
 create mode 100644 packages/dui3/lib/bridge/generic.ts
 create mode 100644 packages/dui3/plugins/00.bindingsV2.ts
 delete mode 100644 packages/dui3/types/index.ts

diff --git a/packages/dui3/lib/accounts/composables/setup.ts b/packages/dui3/lib/accounts/composables/setup.ts
index 8e4a47e97..31339278f 100644
--- a/packages/dui3/lib/accounts/composables/setup.ts
+++ b/packages/dui3/lib/accounts/composables/setup.ts
@@ -1,8 +1,8 @@
 import { ApolloClient } from '@apollo/client/core'
 import { ApolloClients } from '@vue/apollo-composable'
 import { ShallowRef, ComputedRef } from 'vue'
+import { Account } from '~/lib/bindings/definitions/baseBindings'
 import { resolveClientConfig } from '~/lib/core/configs/apollo'
-import { Account } from '~/types'
 
 export type DUIAccount = {
   /** account info coming from the host app */
@@ -21,7 +21,7 @@ const AccountsInjectionKey = 'DUI_ACCOUNTS_STATE'
 
 export async function useAccountsSetup(): Promise<DUIAccountsState> {
   const app = useNuxtApp()
-  const $bindings = app.$bindings
+  const $baseBinding = app.$baseBinding
 
   // Using a shallow ref as we don't need inner values reactive (could be a needlessly big return from host app)
   const accounts = shallowRef([] as DUIAccount[])
@@ -30,7 +30,7 @@ export async function useAccountsSetup(): Promise<DUIAccountsState> {
 
   // Matches local accounts coming from the host app to app state.
   const refreshAccounts = async () => {
-    const accs = await $bindings.getAccounts()
+    const accs = await $baseBinding.getAccounts()
     const newAccs = [] as DUIAccount[]
     for (const acc of accs) {
       const existing = accounts.value.find((a) => a.accountInfo.id === acc.id)
diff --git a/packages/dui3/lib/bindings/definitions/baseBindings.ts b/packages/dui3/lib/bindings/definitions/baseBindings.ts
index 83971e527..2b5c0407d 100644
--- a/packages/dui3/lib/bindings/definitions/baseBindings.ts
+++ b/packages/dui3/lib/bindings/definitions/baseBindings.ts
@@ -1,8 +1,13 @@
-export interface IBaseBindings {
-  sayHi: (name: string) => Promise<string>
+// Needs to be agreed between Frontend and Rhino
+export interface IRhinoRandomBinding {
+  makeGreeting: (name: string) => Promise<string>
+}
+
+// Needs to be agreed between Frontend and Core
+export interface IBaseBinding {
   getAccounts: () => Promise<Account[]>
-  getSourceAppName: () => Promise<string>
-  getSourceAppVersion: () => Promise<string>
+  getSourceApplicationName: () => Promise<string>
+  getSourceApplicationVersion: () => Promise<string>
   getDocumentInfo: () => Promise<DocumentInfo>
 
   // TODO:
@@ -14,13 +19,13 @@ export interface IBaseBindings {
    * @param event
    * @param callback
    */
-  on: <E extends keyof IBaseBindingsHostEvents>(
+  on: <E extends keyof IBaseBindingHostEvents>(
     event: E,
-    callback: IBaseBindingsHostEvents[E]
+    callback: IBaseBindingHostEvents[E]
   ) => void
 }
 
-export interface IBaseBindingsHostEvents {
+export interface IBaseBindingHostEvents {
   displayToastNotification: (args: ToastInfo) => void
   documentChanged: () => void
   selectionChanged: (args: SelectionChangedInfo) => void
diff --git a/packages/dui3/lib/bridge/cefSharp.ts b/packages/dui3/lib/bridge/cefSharp.ts
index 14c04a201..08ed31e0e 100644
--- a/packages/dui3/lib/bridge/cefSharp.ts
+++ b/packages/dui3/lib/bridge/cefSharp.ts
@@ -1,14 +1,14 @@
-import { IWebUiBinding } from '~/types'
-import { BaseBridge } from '~/lib/bridge/base'
+// import { IWebUiBinding } from '~/types'
+// import { BaseBridge } from '~/lib/bridge/base'
 
-export class CefSharpBridge extends BaseBridge {
-  constructor(bindingObject: IWebUiBinding) {
-    super()
-    const hoistTarget = this as unknown as Record<string, unknown>
-    const hoistSource = bindingObject as unknown as Record<string, unknown>
+// export class CefSharpBridge extends BaseBridge {
+//   constructor(bindingObject: IWebUiBinding) {
+//     super()
+//     const hoistTarget = this as unknown as Record<string, unknown>
+//     const hoistSource = bindingObject as unknown as Record<string, unknown>
 
-    for (const key in bindingObject) {
-      hoistTarget[key] = hoistSource[key]
-    }
-  }
-}
+//     for (const key in bindingObject) {
+//       hoistTarget[key] = hoistSource[key]
+//     }
+//   }
+// }
diff --git a/packages/dui3/lib/bridge/generic.ts b/packages/dui3/lib/bridge/generic.ts
new file mode 100644
index 000000000..50170669a
--- /dev/null
+++ b/packages/dui3/lib/bridge/generic.ts
@@ -0,0 +1,45 @@
+// github.com/johot/WebView2-better-bridge/blob/master/web-ui/src/betterBridge.ts
+import { BaseBridge } from '~/lib/bridge/base'
+
+export type IRawBridge = {
+  GetBindingsMethodNames: () => Promise<string[]>
+  RunMethod: (methodName: string, args: string) => Promise<string>
+  ShowDevTools: () => Promise<void>
+}
+
+export class GenericBridge extends BaseBridge {
+  private bridge: IRawBridge
+
+  constructor(object: IRawBridge) {
+    super()
+    this.bridge = object
+  }
+
+  public async create() {
+    // NOTE: GetMethods is a call to the .NET side.
+    const availableMethodNames = await this.bridge.GetBindingsMethodNames()
+
+    // NOTE: hoisting original calls as lowerCasedMethodNames, but using the UpperCasedName for the .NET call
+    // This allows us to follow js convetions and keep .NET ones too (eg. bindings.sayHi('') => public string SayHi(string name) {}
+    for (const methodName of availableMethodNames) {
+      const lowercasedMethodName = lowercaseMethodName(methodName)
+      const hoistTarget = this as unknown as Record<string, object>
+      hoistTarget[lowercasedMethodName] = (...args: unknown[]) =>
+        this.runMethod(methodName, args)
+    }
+  }
+
+  private async runMethod(methodName: string, args: unknown[]): Promise<unknown> {
+    const preserializedArgs = args.map((a) => JSON.stringify(a))
+    // NOTE: RunMethod is a call to the .NET side.
+    const result = await this.bridge.RunMethod(
+      methodName,
+      JSON.stringify(preserializedArgs)
+    )
+
+    return JSON.parse(result) as unknown
+  }
+}
+
+const lowercaseMethodName = (name: string) =>
+  name.charAt(0).toLowerCase() + name.slice(1)
diff --git a/packages/dui3/pages/index.vue b/packages/dui3/pages/index.vue
index f7f574c0c..6f03802db 100644
--- a/packages/dui3/pages/index.vue
+++ b/packages/dui3/pages/index.vue
@@ -37,8 +37,8 @@ import { useAccountsSetup } from '~/lib/accounts/composables/setup'
 import { graphql } from '~/lib/common/generated/gql'
 import { ServerInfoTestQuery } from '~/lib/common/generated/gql/graphql'
 
-const { $bindings } = useNuxtApp()
-const appName = await $bindings.getSourceApplicationName()
+const { $baseBinding } = useNuxtApp()
+const appName = await $baseBinding.getSourceApplicationName()
 const { accounts, refreshAccounts, defaultAccount } = await useAccountsSetup()
 
 const versionQuery = graphql(`
diff --git a/packages/dui3/plugins/00.bindings.ts b/packages/dui3/plugins/00.bindings.ts
index 199344e4e..a21617061 100644
--- a/packages/dui3/plugins/00.bindings.ts
+++ b/packages/dui3/plugins/00.bindings.ts
@@ -1,82 +1,75 @@
-import { IWebUiBinding, MockedBindings } from '~/types'
-import { WebView2Bridge } from '~/lib/bridge/webview'
-import { CefSharpBridge } from '~/lib/bridge/cefSharp'
-import { SketchupBridge } from '~/lib/bridge/sketchup'
+// import { IWebUiBinding, MockedBindings } from '~/types'
+// import { WebView2Bridge } from '~/lib/bridge/webview'
+// import { CefSharpBridge } from '~/lib/bridge/cefSharp'
+// import { SketchupBridge } from '~/lib/bridge/sketchup'
 
-interface ICefSharp {
-  BindObjectAsync: (arg: string) => Promise<void>
-}
+// interface ICefSharp {
+//   BindObjectAsync: (arg: string) => Promise<void>
+// }
 
-interface IWebView2 {
-  webview: unknown
-}
+// interface IWebView2 {
+//   webview: unknown
+// }
 
-declare let CefSharp: ICefSharp
-declare let chrome: IWebView2
-declare let sketchup: Record<string, unknown>
+// declare let CefSharp: ICefSharp
+// declare let chrome: IWebView2
+// declare let sketchup: Record<string, unknown>
 
-declare let WebUIBinding: IWebUiBinding
+// declare let WebUIBinding: IWebUiBinding
 
 // Tries to find the correct host application binding. The sequence is:
 // - CEFSharp (.NET)
 // - WebView2 (.NET)
 // - Sketchup (Ruby) - NOT IMPLEMENTED
 export default defineNuxtPlugin(async () => {
-  let bindings: IWebUiBinding | undefined = undefined
-
-  try {
-    if (!CefSharp) throw new Error('No global CefSharp object found.')
-    await CefSharp.BindObjectAsync('WebUIBinding')
-    console.info('Bound WebUIBinding object for CefSharp.')
-    bindings = new CefSharpBridge(WebUIBinding) as unknown as IWebUiBinding
-  } catch (e) {
-    console.warn(
-      'Failed to bind CefSharp. This can be totally normal if the host is different.'
-    )
-    console.warn(e)
-  }
-
-  try {
-    if (!chrome.webview) throw new Error('No global Webview2 object found.')
-    bindings = new WebView2Bridge('WebUIBinding') as unknown as IWebUiBinding
-    console.info('Bound WebUIBinding object for Webview2.')
-  } catch (e) {
-    console.warn(
-      'Failed to bind Webview2. This can be totally normal if the host is different.'
-    )
-    console.warn(e)
-  }
-
-  // The sketchup ruby side is in flux. We know though that
-  // this part will work! Nevertheless, it will currently throw if loaded in sketchup.
-  try {
-    if (!sketchup) throw new Error('No global sketchup object found.')
-    console.info('Found Sketchup. Hi SketchUp! We have yet... a lot of work to do :) ')
-
-    const skpBindings = new SketchupBridge('default_bindings')
-    // Note, because of the way Sketchup bindings work, we need to wait here
-    // for them to be fully initialized.
-    await skpBindings.isInitalized
-    bindings = skpBindings as unknown as IWebUiBinding
-  } catch (e) {
-    console.warn(
-      'Failed to bind sketchup. This can be totally normal if the host is different.'
-    )
-    console.warn(e)
-  }
-
-  if (!bindings) {
-    console.warn('No bindings found - falling back to mocked bindings.')
-    bindings = MockedBindings
-  }
-
-  // We need the bindings object in global scope to allow
-  // host applications to send messages back to it.
-  ;(globalThis as Record<string, unknown>).bindings = bindings
-
-  return {
-    provide: {
-      bindings
-    }
-  }
+  // let bindings: IWebUiBinding | undefined = undefined
+  // try {
+  //   if (!CefSharp) throw new Error('No global CefSharp object found.')
+  //   await CefSharp.BindObjectAsync('WebUIBinding')
+  //   console.info('Bound WebUIBinding object for CefSharp.')
+  //   bindings = new CefSharpBridge(WebUIBinding) as unknown as IWebUiBinding
+  // } catch (e) {
+  //   console.warn(
+  //     'Failed to bind CefSharp. This can be totally normal if the host is different.'
+  //   )
+  //   console.warn(e)
+  // }
+  // try {
+  //   if (!chrome.webview) throw new Error('No global Webview2 object found.')
+  //   bindings = new WebView2Bridge('WebUIBinding') as unknown as IWebUiBinding
+  //   console.info('Bound WebUIBinding object for Webview2.')
+  // } catch (e) {
+  //   console.warn(
+  //     'Failed to bind Webview2. This can be totally normal if the host is different.'
+  //   )
+  //   console.warn(e)
+  // }
+  // // The sketchup ruby side is in flux. We know though that
+  // // this part will work! Nevertheless, it will currently throw if loaded in sketchup.
+  // try {
+  //   if (!sketchup) throw new Error('No global sketchup object found.')
+  //   console.info('Found Sketchup. Hi SketchUp! We have yet... a lot of work to do :) ')
+  //   const skpBindings = new SketchupBridge('default_bindings')
+  //   // Note, because of the way Sketchup bindings work, we need to wait here
+  //   // for them to be fully initialized.
+  //   await skpBindings.isInitalized
+  //   bindings = skpBindings as unknown as IWebUiBinding
+  // } catch (e) {
+  //   console.warn(
+  //     'Failed to bind sketchup. This can be totally normal if the host is different.'
+  //   )
+  //   console.warn(e)
+  // }
+  // if (!bindings) {
+  //   console.warn('No bindings found - falling back to mocked bindings.')
+  //   bindings = MockedBindings
+  // }
+  // // We need the bindings object in global scope to allow
+  // // host applications to send messages back to it.
+  // ;(globalThis as Record<string, unknown>).bindings = bindings
+  // return {
+  //   provide: {
+  //     bindings
+  //   }
+  // }
 })
diff --git a/packages/dui3/plugins/00.bindingsV2.ts b/packages/dui3/plugins/00.bindingsV2.ts
new file mode 100644
index 000000000..c768cc9ae
--- /dev/null
+++ b/packages/dui3/plugins/00.bindingsV2.ts
@@ -0,0 +1,51 @@
+import { GenericBridge, IRawBridge } from '~/lib/bridge/generic'
+import {
+  IBaseBinding,
+  IRhinoRandomBinding
+} from '~/lib/bindings/definitions/baseBindings'
+
+// Makes TS happy
+declare let globalThis: Record<string, unknown> & {
+  CefSharp?: { BindObjectAsync: (name: string) => Promise<void> }
+  chrome?: { webview: { hostObjects: Record<string, IRawBridge> } }
+  sketchup?: Record<string, unknown>
+}
+
+// eslint-disable-next-line @typescript-eslint/require-await
+const tryHoistBinding = async <T>(name: string) => {
+  let bridge: GenericBridge | null = null
+
+  if (globalThis.CefSharp) {
+    await globalThis.CefSharp.BindObjectAsync(name)
+    bridge = new GenericBridge(globalThis[name] as unknown as IRawBridge)
+    await bridge.create()
+  }
+
+  if (globalThis.chrome && !bridge) {
+    bridge = new GenericBridge(globalThis.chrome.webview.hostObjects[name])
+    await bridge.create()
+  }
+
+  if (globalThis.sketchup && !bridge) {
+    // TODO
+  }
+
+  if (!bridge) console.warn(`Failed to bind ${name} binding.`)
+
+  globalThis[name] = bridge
+  return bridge as unknown as T
+}
+
+export default defineNuxtPlugin(async () => {
+  const baseBinding = await tryHoistBinding<IBaseBinding>('baseBinding')
+  const rhinoRandomBinding = await tryHoistBinding<IRhinoRandomBinding>(
+    'rhinoRandomBinding'
+  )
+
+  return {
+    provide: {
+      baseBinding,
+      rhinoRandomBinding
+    }
+  }
+})
diff --git a/packages/dui3/types/index.ts b/packages/dui3/types/index.ts
deleted file mode 100644
index de7a9a41c..000000000
--- a/packages/dui3/types/index.ts
+++ /dev/null
@@ -1,93 +0,0 @@
-/* eslint-disable @typescript-eslint/require-await */
-import { createNanoEvents } from 'nanoevents'
-
-export type Account = {
-  id: string
-  isDefault: boolean
-  token: string
-  serverInfo: {
-    name: string
-    url: string
-  }
-  userInfo: {
-    id: string
-    avatar: string
-    email: string
-    name: string
-    commits: { totalCount: number }
-    streams: { totalCount: number }
-  }
-}
-
-type FileState = {
-  models: ModelCard[]
-}
-
-type ModelCard = {
-  serverUrl: string // we need to select the correct account
-  modelId: string // we need to assemble the gql query properly
-  projectId: string
-  type: 'sender' | 'receiver'
-  lastUpdatedAt: Date
-  // settings: Record<string,unknown>???
-  // report: Record<string,unknown>???
-  // progress: Record<string,unknown>???
-  status: 'idle' | 'inprogress' | 'error' | 'warning' | 'disabled'
-}
-
-type TestData = {
-  foo: number
-  bar: string
-  baz: boolean
-}
-
-// .NET/Host App -> JS
-export interface HostAppEvents {
-  test: (data: TestData) => void
-}
-
-// JS -> asks for something form host app
-export interface IWebUiBinding {
-  openDevTools: () => Promise<void>
-  getAccounts: () => Promise<Account[]>
-  getSourceApplicationName: () => Promise<string>
-  getSourceApplicationVersion: () => Promise<string>
-  // getFileState: () => Promise<FileState>
-  // addModelCard(string modelId, string projectId), removeModelCard(...) // etc. etc.
-
-  /**
-   * Subscribe to messages from the host application.
-   * @param event
-   * @param callback
-   */
-  on: <E extends keyof HostAppEvents>(event: E, callback: HostAppEvents[E]) => void
-  /**
-   * Used by the host application to notify/send data to the web app. Do not use from the frontend.
-   * @param eventName
-   * @param args
-   */
-  emit?: (eventName: string, args: Record<string, unknown>) => void
-}
-
-const mockedEmitter = createNanoEvents<HostAppEvents>()
-export const MockedBindings: IWebUiBinding = {
-  async sayHi(name: string) {
-    return `Hi ${name} from (mocked bindings)!`
-  },
-  async openDevTools() {
-    // eslint-disable-next-line no-alert
-    window.alert('Mocked bindings cannot do this. Sorry :(')
-  },
-  async getAccounts() {
-    return []
-  },
-  async getSourceAppName() {
-    return 'Mocked App'
-  },
-  async getFileState() {
-    return { models: [] }
-  },
-  on<E extends keyof HostAppEvents>(event: E, callback: HostAppEvents[E]) {
-    return mockedEmitter.on(event, callback)
-  }
-}

From 203ca507fbc107cfa6c304f760b98b9897b8b286 Mon Sep 17 00:00:00 2001
From: oguzhankoral <oguzhankoral@gmail.com>
Date: Fri, 14 Jul 2023 02:52:14 +0300
Subject: [PATCH 13/35] Implement sketchup bridge to tryHoistBindings

---
 packages/dui3/lib/bridge/sketchup.ts   | 29 ++++++++++++++++++++------
 packages/dui3/plugins/00.bindingsV2.ts | 10 ++++++---
 2 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/packages/dui3/lib/bridge/sketchup.ts b/packages/dui3/lib/bridge/sketchup.ts
index 471536c0f..db2e20ccc 100644
--- a/packages/dui3/lib/bridge/sketchup.ts
+++ b/packages/dui3/lib/bridge/sketchup.ts
@@ -3,6 +3,7 @@ import { BaseBridge } from './base'
 
 declare let sketchup: {
   exec: (data: Record<string, unknown>) => void
+  getCommands: (viewId: string) => void
 }
 
 /**
@@ -24,8 +25,9 @@ export class SketchupBridge extends BaseBridge {
   >
   private bindingsName: string
   private TIMEOUT_MS = 2000 // 2s
-  public isInitalized: Promise<void>
-  private resolveIsInitializedPromise!: () => unknown
+  public isInitalized: Promise<boolean>
+  private resolveIsInitializedPromise!: (v: boolean) => unknown
+  private rejectIsInitializedPromise!: (message: string) => unknown
 
   constructor(bindingsName: string) {
     super()
@@ -33,6 +35,7 @@ export class SketchupBridge extends BaseBridge {
 
     this.isInitalized = new Promise((resolve, reject) => {
       this.resolveIsInitializedPromise = resolve
+      this.rejectIsInitializedPromise = reject
       setTimeout(
         () =>
           reject(
@@ -46,10 +49,12 @@ export class SketchupBridge extends BaseBridge {
     ;(globalThis as Record<string, unknown>).bindings = this
 
     // Initialization continues in the receiveCommandsAndInitializeBridge function,
-    // where we expect sketchup to return to us the command names.
+    // where we expect sketchup to return to us the command names for related bindings/views.
     // NOTE: as we want to have multiple sketchup bindings in the future, we will
     // most likely change this method to specify which view/plugin/bindings we want.
-    sketchup.exec({ name: 'get_commands' })
+    // eslint-disable-next-line camelcase
+    // sketchup.exec({ name: 'getCommands', view_id: this.bindingsName })
+    sketchup.getCommands(this.bindingsName)
   }
 
   /**
@@ -66,7 +71,16 @@ export class SketchupBridge extends BaseBridge {
         this.runMethod(commandName, args)
     }
 
-    this.resolveIsInitializedPromise()
+    this.resolveIsInitializedPromise(true)
+  }
+
+  /**
+   * Will be called by `executeScript('bindings.rejectBindings()')` from sketchup.
+   * @param message
+   */
+  private rejectBindings(message: string) {
+    this.resolveIsInitializedPromise(false)
+    this.rejectIsInitializedPromise(message)
   }
 
   /**
@@ -82,7 +96,10 @@ export class SketchupBridge extends BaseBridge {
     sketchup.exec({
       name: methodName,
       // eslint-disable-next-line camelcase
-      data: { request_id: requestId, arguments: args }
+      request_id: requestId,
+      // eslint-disable-next-line camelcase
+      view_id: this.bindingsName,
+      data: { args }
     })
 
     return new Promise((resolve, reject) => {
diff --git a/packages/dui3/plugins/00.bindingsV2.ts b/packages/dui3/plugins/00.bindingsV2.ts
index c768cc9ae..187a59c1e 100644
--- a/packages/dui3/plugins/00.bindingsV2.ts
+++ b/packages/dui3/plugins/00.bindingsV2.ts
@@ -3,6 +3,7 @@ import {
   IBaseBinding,
   IRhinoRandomBinding
 } from '~/lib/bindings/definitions/baseBindings'
+import { SketchupBridge } from '~/lib/bridge/sketchup'
 
 // Makes TS happy
 declare let globalThis: Record<string, unknown> & {
@@ -13,7 +14,7 @@ declare let globalThis: Record<string, unknown> & {
 
 // eslint-disable-next-line @typescript-eslint/require-await
 const tryHoistBinding = async <T>(name: string) => {
-  let bridge: GenericBridge | null = null
+  let bridge: GenericBridge | SketchupBridge | null = null
 
   if (globalThis.CefSharp) {
     await globalThis.CefSharp.BindObjectAsync(name)
@@ -21,13 +22,16 @@ const tryHoistBinding = async <T>(name: string) => {
     await bridge.create()
   }
 
-  if (globalThis.chrome && !bridge) {
+  if (globalThis.chrome && globalThis.chrome.webview && !bridge) {
     bridge = new GenericBridge(globalThis.chrome.webview.hostObjects[name])
     await bridge.create()
   }
 
   if (globalThis.sketchup && !bridge) {
-    // TODO
+    bridge = new SketchupBridge(name)
+    const res = await bridge.isInitalized
+    // If bridge doesn't initialized succesffuly, then do not create binding
+    if (!res) bridge = null
   }
 
   if (!bridge) console.warn(`Failed to bind ${name} binding.`)

From 047a7644a21ed0b6bbabfb801d5edec335a36d9a Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Fri, 14 Jul 2023 08:13:22 +0100
Subject: [PATCH 14/35] experiments(dui3): cleanup

---
 .../lib/bindings/definitions/baseBindings.ts  |   1 -
 packages/dui3/lib/bridge/base.ts              |   2 +-
 packages/dui3/lib/bridge/cefSharp.ts          |  14 --
 packages/dui3/lib/bridge/definitions/index.ts |   8 ++
 packages/dui3/lib/bridge/generic.ts           |  12 +-
 packages/dui3/lib/bridge/webview.ts           |  53 -------
 packages/dui3/lib/document-info/index.ts      |  25 ++++
 packages/dui3/pages/index.vue                 |  14 +-
 packages/dui3/plugins/00.bindings.ts          | 129 ++++++++----------
 packages/dui3/plugins/00.bindingsV2.ts        |  51 -------
 10 files changed, 105 insertions(+), 204 deletions(-)
 delete mode 100644 packages/dui3/lib/bridge/cefSharp.ts
 create mode 100644 packages/dui3/lib/bridge/definitions/index.ts
 delete mode 100644 packages/dui3/lib/bridge/webview.ts
 create mode 100644 packages/dui3/lib/document-info/index.ts
 delete mode 100644 packages/dui3/plugins/00.bindingsV2.ts

diff --git a/packages/dui3/lib/bindings/definitions/baseBindings.ts b/packages/dui3/lib/bindings/definitions/baseBindings.ts
index 2b5c0407d..d6170caa0 100644
--- a/packages/dui3/lib/bindings/definitions/baseBindings.ts
+++ b/packages/dui3/lib/bindings/definitions/baseBindings.ts
@@ -28,7 +28,6 @@ export interface IBaseBinding {
 export interface IBaseBindingHostEvents {
   displayToastNotification: (args: ToastInfo) => void
   documentChanged: () => void
-  selectionChanged: (args: SelectionChangedInfo) => void
 }
 
 export type Account = {
diff --git a/packages/dui3/lib/bridge/base.ts b/packages/dui3/lib/bridge/base.ts
index ae0c6ddf3..ade5aa42c 100644
--- a/packages/dui3/lib/bridge/base.ts
+++ b/packages/dui3/lib/bridge/base.ts
@@ -18,7 +18,7 @@ export class BaseBridge {
 
   // NOTE: this could be private - as it should be only used by the host application.
   emit(eventName: string, payload: string) {
-    const parsedPayload = JSON.parse(payload) as unknown
+    const parsedPayload = payload ? (JSON.parse(payload) as unknown) : null
     this.emitter.emit(eventName, parsedPayload)
   }
 }
diff --git a/packages/dui3/lib/bridge/cefSharp.ts b/packages/dui3/lib/bridge/cefSharp.ts
deleted file mode 100644
index 08ed31e0e..000000000
--- a/packages/dui3/lib/bridge/cefSharp.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-// import { IWebUiBinding } from '~/types'
-// import { BaseBridge } from '~/lib/bridge/base'
-
-// export class CefSharpBridge extends BaseBridge {
-//   constructor(bindingObject: IWebUiBinding) {
-//     super()
-//     const hoistTarget = this as unknown as Record<string, unknown>
-//     const hoistSource = bindingObject as unknown as Record<string, unknown>
-
-//     for (const key in bindingObject) {
-//       hoistTarget[key] = hoistSource[key]
-//     }
-//   }
-// }
diff --git a/packages/dui3/lib/bridge/definitions/index.ts b/packages/dui3/lib/bridge/definitions/index.ts
new file mode 100644
index 000000000..3eb9dd242
--- /dev/null
+++ b/packages/dui3/lib/bridge/definitions/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Defines the expected contract of the host application bound object.
+ */
+export type IRawBridge = {
+  GetBindingsMethodNames: () => Promise<string[]>
+  RunMethod: (methodName: string, args: string) => Promise<string>
+  ShowDevTools: () => Promise<void>
+}
diff --git a/packages/dui3/lib/bridge/generic.ts b/packages/dui3/lib/bridge/generic.ts
index 50170669a..a3afa7b1a 100644
--- a/packages/dui3/lib/bridge/generic.ts
+++ b/packages/dui3/lib/bridge/generic.ts
@@ -1,12 +1,8 @@
-// github.com/johot/WebView2-better-bridge/blob/master/web-ui/src/betterBridge.ts
 import { BaseBridge } from '~/lib/bridge/base'
-
-export type IRawBridge = {
-  GetBindingsMethodNames: () => Promise<string[]>
-  RunMethod: (methodName: string, args: string) => Promise<string>
-  ShowDevTools: () => Promise<void>
-}
-
+import { IRawBridge } from '~/lib/bridge/definitions'
+/**
+ * A generic bridge class for Webivew2 or CefSharp.
+ */
 export class GenericBridge extends BaseBridge {
   private bridge: IRawBridge
 
diff --git a/packages/dui3/lib/bridge/webview.ts b/packages/dui3/lib/bridge/webview.ts
deleted file mode 100644
index 7878a5b0b..000000000
--- a/packages/dui3/lib/bridge/webview.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-// github.com/johot/WebView2-better-bridge/blob/master/web-ui/src/betterBridge.ts
-import { BaseBridge } from '~/lib/bridge/base'
-
-type IWebView2 = {
-  webview: {
-    hostObjects: Record<string, IRawBridge> & {
-      sync: Record<string, IRawBridge>
-    }
-  }
-}
-
-type IRawBridge = {
-  GetBindingsMethodNames: () => string[]
-  RunMethod: (methodName: string, args: string) => Promise<string>
-}
-
-declare let chrome: IWebView2
-
-export class WebView2Bridge extends BaseBridge {
-  private webViewBridge: IRawBridge
-
-  constructor(bridgeName: string) {
-    super()
-    this.webViewBridge = chrome.webview.hostObjects[bridgeName]
-
-    // NOTE: GetMethods is a call to the .NET side.
-    const availableMethodNames =
-      chrome.webview.hostObjects.sync[bridgeName].GetBindingsMethodNames()
-
-    // NOTE: hoisting original calls as lowerCasedMethodNames, but using the UpperCasedName for the .NET call
-    // This allows us to follow js convetions and keep .NET ones too (eg. bindings.sayHi('') => public string SayHi(string name) {}
-    for (const methodName of availableMethodNames) {
-      const lowercasedMethodName = lowercaseMethodName(methodName)
-      const hoistTarget = this as unknown as Record<string, object>
-      hoistTarget[lowercasedMethodName] = (...args: unknown[]) =>
-        this.runMethod(methodName, args)
-    }
-  }
-
-  private async runMethod(methodName: string, args: unknown[]): Promise<unknown> {
-    const preserializedArgs = args.map((a) => JSON.stringify(a))
-    // NOTE: RunMethod is a call to the .NET side.
-    const result = await this.webViewBridge.RunMethod(
-      methodName,
-      JSON.stringify(preserializedArgs)
-    )
-
-    return JSON.parse(result) as unknown
-  }
-}
-
-const lowercaseMethodName = (name: string) =>
-  name.charAt(0).toLowerCase() + name.slice(1)
diff --git a/packages/dui3/lib/document-info/index.ts b/packages/dui3/lib/document-info/index.ts
new file mode 100644
index 000000000..ff7f00118
--- /dev/null
+++ b/packages/dui3/lib/document-info/index.ts
@@ -0,0 +1,25 @@
+import { DocumentInfo } from '~/lib/bindings/definitions/baseBindings'
+import { ref } from 'vue'
+
+const DocumentInfoInjectionKey = 'DUI_ACCOUNTS_STATE'
+
+export async function useDocumentInfoSetup() {
+  const app = useNuxtApp()
+  const documentInfo = ref<DocumentInfo>()
+
+  app.$baseBinding.on('documentChanged', () => {
+    setTimeout(async () => {
+      const docInfo = await app.$baseBinding.getDocumentInfo()
+      documentInfo.value = docInfo
+    }, 500) // Don't ask
+  })
+
+  documentInfo.value = await app.$baseBinding.getDocumentInfo()
+  provide(DocumentInfoInjectionKey, documentInfo)
+  return documentInfo
+}
+
+export function useInjectedDocumentInfo() {
+  const documentInfo = inject<Ref<DocumentInfo>>(DocumentInfoInjectionKey)
+  return documentInfo
+}
diff --git a/packages/dui3/pages/index.vue b/packages/dui3/pages/index.vue
index 6f03802db..6242797a3 100644
--- a/packages/dui3/pages/index.vue
+++ b/packages/dui3/pages/index.vue
@@ -4,7 +4,6 @@
       <div class="mx-2 py-1 px-2 rounded text-xs bg-primary text-white font-bold">
         for {{ appName }}
       </div>
-      <!-- <HeaderNavLink :to="'/'" :name="'Home'"></HeaderNavLink> -->
     </Portal>
     <div class="space-y-2">
       <div>
@@ -18,13 +17,17 @@
           {{ acc.accountInfo.serverInfo.name }}
         </div>
       </div>
-      <div>Your default account is {{ defaultAccount?.accountInfo }}</div>
+      <div>
+        Your default account is at {{ defaultAccount?.accountInfo.serverInfo.url }}
+      </div>
       <div>
         <div v-for="(res, clientId) in queries" :key="clientId">
           <strong>{{ clientId }}:</strong>
           {{ res.result.value?.serverInfo.version || res.error }}
         </div>
       </div>
+      <div>Doc info:</div>
+      <div>{{ documentInfo }}</div>
       <div>
         <FormButton @click="refreshAccounts()">Refresh Accounts</FormButton>
       </div>
@@ -36,11 +39,14 @@ import { UseQueryReturn, useQuery } from '@vue/apollo-composable'
 import { useAccountsSetup } from '~/lib/accounts/composables/setup'
 import { graphql } from '~/lib/common/generated/gql'
 import { ServerInfoTestQuery } from '~/lib/common/generated/gql/graphql'
+import { useDocumentInfoSetup } from '~/lib/document-info'
 
 const { $baseBinding } = useNuxtApp()
 const appName = await $baseBinding.getSourceApplicationName()
 const { accounts, refreshAccounts, defaultAccount } = await useAccountsSetup()
 
+const documentInfo = await useDocumentInfoSetup()
+
 const versionQuery = graphql(`
   query ServerInfoTest {
     serverInfo {
@@ -49,10 +55,6 @@ const versionQuery = graphql(`
   }
 `)
 
-watch(accounts, () => {
-  console.log('accounts were refreshed, shallow ref does its job')
-})
-
 const clientIds = accounts.value.map((a) => a.accountInfo.id)
 
 const queries: Record<
diff --git a/packages/dui3/plugins/00.bindings.ts b/packages/dui3/plugins/00.bindings.ts
index a21617061..61eb51f5a 100644
--- a/packages/dui3/plugins/00.bindings.ts
+++ b/packages/dui3/plugins/00.bindings.ts
@@ -1,75 +1,64 @@
-// import { IWebUiBinding, MockedBindings } from '~/types'
-// import { WebView2Bridge } from '~/lib/bridge/webview'
-// import { CefSharpBridge } from '~/lib/bridge/cefSharp'
-// import { SketchupBridge } from '~/lib/bridge/sketchup'
+import { GenericBridge } from '~/lib/bridge/generic'
+import { IRawBridge } from '~/lib/bridge/definitions'
 
-// interface ICefSharp {
-//   BindObjectAsync: (arg: string) => Promise<void>
-// }
+import {
+  IBaseBinding,
+  IRhinoRandomBinding
+} from '~/lib/bindings/definitions/baseBindings'
 
-// interface IWebView2 {
-//   webview: unknown
-// }
+// Makes TS happy
+declare let globalThis: Record<string, unknown> & {
+  CefSharp?: { BindObjectAsync: (name: string) => Promise<void> }
+  chrome?: { webview: { hostObjects: Record<string, IRawBridge> } }
+  sketchup?: Record<string, unknown>
+}
 
-// declare let CefSharp: ICefSharp
-// declare let chrome: IWebView2
-// declare let sketchup: Record<string, unknown>
-
-// declare let WebUIBinding: IWebUiBinding
-
-// Tries to find the correct host application binding. The sequence is:
-// - CEFSharp (.NET)
-// - WebView2 (.NET)
-// - Sketchup (Ruby) - NOT IMPLEMENTED
+/**
+ * Here we are loading any bindings that we expect to have from all
+ * connectors. If some are not present, that's okay - we're going to
+ * strip or customize functionality from the ui itself.
+ */
 export default defineNuxtPlugin(async () => {
-  // let bindings: IWebUiBinding | undefined = undefined
-  // try {
-  //   if (!CefSharp) throw new Error('No global CefSharp object found.')
-  //   await CefSharp.BindObjectAsync('WebUIBinding')
-  //   console.info('Bound WebUIBinding object for CefSharp.')
-  //   bindings = new CefSharpBridge(WebUIBinding) as unknown as IWebUiBinding
-  // } catch (e) {
-  //   console.warn(
-  //     'Failed to bind CefSharp. This can be totally normal if the host is different.'
-  //   )
-  //   console.warn(e)
-  // }
-  // try {
-  //   if (!chrome.webview) throw new Error('No global Webview2 object found.')
-  //   bindings = new WebView2Bridge('WebUIBinding') as unknown as IWebUiBinding
-  //   console.info('Bound WebUIBinding object for Webview2.')
-  // } catch (e) {
-  //   console.warn(
-  //     'Failed to bind Webview2. This can be totally normal if the host is different.'
-  //   )
-  //   console.warn(e)
-  // }
-  // // The sketchup ruby side is in flux. We know though that
-  // // this part will work! Nevertheless, it will currently throw if loaded in sketchup.
-  // try {
-  //   if (!sketchup) throw new Error('No global sketchup object found.')
-  //   console.info('Found Sketchup. Hi SketchUp! We have yet... a lot of work to do :) ')
-  //   const skpBindings = new SketchupBridge('default_bindings')
-  //   // Note, because of the way Sketchup bindings work, we need to wait here
-  //   // for them to be fully initialized.
-  //   await skpBindings.isInitalized
-  //   bindings = skpBindings as unknown as IWebUiBinding
-  // } catch (e) {
-  //   console.warn(
-  //     'Failed to bind sketchup. This can be totally normal if the host is different.'
-  //   )
-  //   console.warn(e)
-  // }
-  // if (!bindings) {
-  //   console.warn('No bindings found - falling back to mocked bindings.')
-  //   bindings = MockedBindings
-  // }
-  // // We need the bindings object in global scope to allow
-  // // host applications to send messages back to it.
-  // ;(globalThis as Record<string, unknown>).bindings = bindings
-  // return {
-  //   provide: {
-  //     bindings
-  //   }
-  // }
+  const baseBinding = await tryHoistBinding<IBaseBinding>('baseBinding')
+
+  const rhinoRandomBinding = await tryHoistBinding<IRhinoRandomBinding>(
+    'rhinoRandomBinding'
+  )
+
+  return {
+    provide: {
+      baseBinding,
+      rhinoRandomBinding
+    }
+  }
 })
+
+/**
+ * Checks possible browser window targets for a given binding, and, if it finds it,
+ * creates a bridge for it and registers it in the global scope.
+ * @param name binding name
+ * @returns null if the binding was not found, or the binding.
+ */
+const tryHoistBinding = async <T>(name: string) => {
+  let bridge: GenericBridge | null = null
+
+  if (globalThis.CefSharp) {
+    await globalThis.CefSharp.BindObjectAsync(name)
+    bridge = new GenericBridge(globalThis[name] as unknown as IRawBridge)
+    await bridge.create()
+  }
+
+  if (globalThis.chrome && !bridge) {
+    bridge = new GenericBridge(globalThis.chrome.webview.hostObjects[name])
+    await bridge.create()
+  }
+
+  if (globalThis.sketchup && !bridge) {
+    // TODO
+  }
+
+  if (!bridge) console.warn(`Failed to bind ${name} binding.`)
+
+  globalThis[name] = bridge
+  return bridge as unknown as T
+}
diff --git a/packages/dui3/plugins/00.bindingsV2.ts b/packages/dui3/plugins/00.bindingsV2.ts
deleted file mode 100644
index c768cc9ae..000000000
--- a/packages/dui3/plugins/00.bindingsV2.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { GenericBridge, IRawBridge } from '~/lib/bridge/generic'
-import {
-  IBaseBinding,
-  IRhinoRandomBinding
-} from '~/lib/bindings/definitions/baseBindings'
-
-// Makes TS happy
-declare let globalThis: Record<string, unknown> & {
-  CefSharp?: { BindObjectAsync: (name: string) => Promise<void> }
-  chrome?: { webview: { hostObjects: Record<string, IRawBridge> } }
-  sketchup?: Record<string, unknown>
-}
-
-// eslint-disable-next-line @typescript-eslint/require-await
-const tryHoistBinding = async <T>(name: string) => {
-  let bridge: GenericBridge | null = null
-
-  if (globalThis.CefSharp) {
-    await globalThis.CefSharp.BindObjectAsync(name)
-    bridge = new GenericBridge(globalThis[name] as unknown as IRawBridge)
-    await bridge.create()
-  }
-
-  if (globalThis.chrome && !bridge) {
-    bridge = new GenericBridge(globalThis.chrome.webview.hostObjects[name])
-    await bridge.create()
-  }
-
-  if (globalThis.sketchup && !bridge) {
-    // TODO
-  }
-
-  if (!bridge) console.warn(`Failed to bind ${name} binding.`)
-
-  globalThis[name] = bridge
-  return bridge as unknown as T
-}
-
-export default defineNuxtPlugin(async () => {
-  const baseBinding = await tryHoistBinding<IBaseBinding>('baseBinding')
-  const rhinoRandomBinding = await tryHoistBinding<IRhinoRandomBinding>(
-    'rhinoRandomBinding'
-  )
-
-  return {
-    provide: {
-      baseBinding,
-      rhinoRandomBinding
-    }
-  }
-})

From bf84060f5e6d306defa4a00b7b7b4cf586cd40fe Mon Sep 17 00:00:00 2001
From: oguzhankoral <oguzhankoral@gmail.com>
Date: Fri, 14 Jul 2023 12:49:26 +0300
Subject: [PATCH 15/35] Create SketchupBridge for tryHoistBinding

---
 packages/dui3/lib/bridge/base.ts     |  2 ++
 packages/dui3/lib/bridge/sketchup.ts |  3 +++
 packages/dui3/plugins/00.bindings.ts | 14 ++++++++++----
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/packages/dui3/lib/bridge/base.ts b/packages/dui3/lib/bridge/base.ts
index ade5aa42c..8d0e1e67f 100644
--- a/packages/dui3/lib/bridge/base.ts
+++ b/packages/dui3/lib/bridge/base.ts
@@ -18,6 +18,8 @@ export class BaseBridge {
 
   // NOTE: this could be private - as it should be only used by the host application.
   emit(eventName: string, payload: string) {
+    console.log(payload)
+
     const parsedPayload = payload ? (JSON.parse(payload) as unknown) : null
     this.emitter.emit(eventName, parsedPayload)
   }
diff --git a/packages/dui3/lib/bridge/sketchup.ts b/packages/dui3/lib/bridge/sketchup.ts
index db2e20ccc..46566b2c5 100644
--- a/packages/dui3/lib/bridge/sketchup.ts
+++ b/packages/dui3/lib/bridge/sketchup.ts
@@ -117,6 +117,9 @@ export class SketchupBridge extends BaseBridge {
   }
 
   private receiveResponse(requestId: string, data: string) {
+    console.log(requestId)
+    console.log(data)
+
     if (!this.requests[requestId])
       throw new Error(
         `Sketchup Bridge found no request to resolve with the id of ${requestId}. Something is weird!`
diff --git a/packages/dui3/plugins/00.bindings.ts b/packages/dui3/plugins/00.bindings.ts
index 61eb51f5a..59fb3f1ee 100644
--- a/packages/dui3/plugins/00.bindings.ts
+++ b/packages/dui3/plugins/00.bindings.ts
@@ -5,6 +5,7 @@ import {
   IBaseBinding,
   IRhinoRandomBinding
 } from '~/lib/bindings/definitions/baseBindings'
+import { SketchupBridge } from '~/lib/bridge/sketchup'
 
 // Makes TS happy
 declare let globalThis: Record<string, unknown> & {
@@ -25,10 +26,13 @@ export default defineNuxtPlugin(async () => {
     'rhinoRandomBinding'
   )
 
+  const sketchupRandomBinding = await tryHoistBinding<unknown>('sketchupRandomBinding')
+
   return {
     provide: {
       baseBinding,
-      rhinoRandomBinding
+      rhinoRandomBinding,
+      sketchupRandomBinding
     }
   }
 })
@@ -40,7 +44,7 @@ export default defineNuxtPlugin(async () => {
  * @returns null if the binding was not found, or the binding.
  */
 const tryHoistBinding = async <T>(name: string) => {
-  let bridge: GenericBridge | null = null
+  let bridge: GenericBridge | SketchupBridge | null = null
 
   if (globalThis.CefSharp) {
     await globalThis.CefSharp.BindObjectAsync(name)
@@ -48,13 +52,15 @@ const tryHoistBinding = async <T>(name: string) => {
     await bridge.create()
   }
 
-  if (globalThis.chrome && !bridge) {
+  if (globalThis.chrome && globalThis.chrome.webview && !bridge) {
     bridge = new GenericBridge(globalThis.chrome.webview.hostObjects[name])
     await bridge.create()
   }
 
   if (globalThis.sketchup && !bridge) {
-    // TODO
+    bridge = new SketchupBridge(name)
+    const res = await bridge.isInitalized
+    if (!res) bridge = null
   }
 
   if (!bridge) console.warn(`Failed to bind ${name} binding.`)

From 520a65c73cd9b899f08472e7a7aaee542bf41ab4 Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Fri, 14 Jul 2023 11:13:21 +0100
Subject: [PATCH 16/35] experiments(dui3): cleanup

---
 .../dui3/lib/accounts/composables/setup.ts    |  2 --
 packages/dui3/lib/bridge/generic.ts           | 12 +++++++++--
 packages/dui3/lib/bridge/sketchup.ts          | 10 +++++++++-
 packages/dui3/plugins/00.bindings.ts          | 20 ++++++++++---------
 4 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/packages/dui3/lib/accounts/composables/setup.ts b/packages/dui3/lib/accounts/composables/setup.ts
index 31339278f..c301f67c5 100644
--- a/packages/dui3/lib/accounts/composables/setup.ts
+++ b/packages/dui3/lib/accounts/composables/setup.ts
@@ -54,8 +54,6 @@ export async function useAccountsSetup(): Promise<DUIAccountsState> {
     accounts.value = newAccs
   }
 
-  // Call this one first to initialize the account state
-  // QUESTION: could be flopped in a iife so as not to block and drop the asyncness of this setup function?
   await refreshAccounts()
 
   const defaultAccount = computed(() =>
diff --git a/packages/dui3/lib/bridge/generic.ts b/packages/dui3/lib/bridge/generic.ts
index a3afa7b1a..a09199c90 100644
--- a/packages/dui3/lib/bridge/generic.ts
+++ b/packages/dui3/lib/bridge/generic.ts
@@ -11,9 +11,15 @@ export class GenericBridge extends BaseBridge {
     this.bridge = object
   }
 
-  public async create() {
+  public async create(): Promise<boolean> {
     // NOTE: GetMethods is a call to the .NET side.
-    const availableMethodNames = await this.bridge.GetBindingsMethodNames()
+    let availableMethodNames = [] as string[]
+
+    try {
+      availableMethodNames = await this.bridge.GetBindingsMethodNames()
+    } catch {
+      return false
+    }
 
     // NOTE: hoisting original calls as lowerCasedMethodNames, but using the UpperCasedName for the .NET call
     // This allows us to follow js convetions and keep .NET ones too (eg. bindings.sayHi('') => public string SayHi(string name) {}
@@ -23,6 +29,8 @@ export class GenericBridge extends BaseBridge {
       hoistTarget[lowercasedMethodName] = (...args: unknown[]) =>
         this.runMethod(methodName, args)
     }
+
+    return true
   }
 
   private async runMethod(methodName: string, args: unknown[]): Promise<unknown> {
diff --git a/packages/dui3/lib/bridge/sketchup.ts b/packages/dui3/lib/bridge/sketchup.ts
index 46566b2c5..f32aa7342 100644
--- a/packages/dui3/lib/bridge/sketchup.ts
+++ b/packages/dui3/lib/bridge/sketchup.ts
@@ -47,7 +47,9 @@ export class SketchupBridge extends BaseBridge {
 
     // NOTE: we need to hoist the bindings in global scope BEFORE we call sketchup exec get comands below.
     ;(globalThis as Record<string, unknown>).bindings = this
+  }
 
+  public async create(): Promise<boolean> {
     // Initialization continues in the receiveCommandsAndInitializeBridge function,
     // where we expect sketchup to return to us the command names for related bindings/views.
     // NOTE: as we want to have multiple sketchup bindings in the future, we will
@@ -55,6 +57,13 @@ export class SketchupBridge extends BaseBridge {
     // eslint-disable-next-line camelcase
     // sketchup.exec({ name: 'getCommands', view_id: this.bindingsName })
     sketchup.getCommands(this.bindingsName)
+
+    try {
+      await this.isInitalized
+      return true
+    } catch {
+      return false
+    }
   }
 
   /**
@@ -79,7 +88,6 @@ export class SketchupBridge extends BaseBridge {
    * @param message
    */
   private rejectBindings(message: string) {
-    this.resolveIsInitializedPromise(false)
     this.rejectIsInitializedPromise(message)
   }
 
diff --git a/packages/dui3/plugins/00.bindings.ts b/packages/dui3/plugins/00.bindings.ts
index 59fb3f1ee..0a53352a4 100644
--- a/packages/dui3/plugins/00.bindings.ts
+++ b/packages/dui3/plugins/00.bindings.ts
@@ -22,6 +22,8 @@ declare let globalThis: Record<string, unknown> & {
 export default defineNuxtPlugin(async () => {
   const baseBinding = await tryHoistBinding<IBaseBinding>('baseBinding')
 
+  const nonExistantBindings = await tryHoistBinding<IBaseBinding>('nonExistantBindings')
+
   const rhinoRandomBinding = await tryHoistBinding<IRhinoRandomBinding>(
     'rhinoRandomBinding'
   )
@@ -45,24 +47,24 @@ export default defineNuxtPlugin(async () => {
  */
 const tryHoistBinding = async <T>(name: string) => {
   let bridge: GenericBridge | SketchupBridge | null = null
+  let tempBridge: GenericBridge | SketchupBridge | null = null
 
   if (globalThis.CefSharp) {
     await globalThis.CefSharp.BindObjectAsync(name)
-    bridge = new GenericBridge(globalThis[name] as unknown as IRawBridge)
-    await bridge.create()
+    tempBridge = new GenericBridge(globalThis[name] as unknown as IRawBridge)
   }
 
-  if (globalThis.chrome && globalThis.chrome.webview && !bridge) {
-    bridge = new GenericBridge(globalThis.chrome.webview.hostObjects[name])
-    await bridge.create()
+  if (globalThis.chrome && globalThis.chrome.webview && !tempBridge) {
+    tempBridge = new GenericBridge(globalThis.chrome.webview.hostObjects[name])
   }
 
-  if (globalThis.sketchup && !bridge) {
-    bridge = new SketchupBridge(name)
-    const res = await bridge.isInitalized
-    if (!res) bridge = null
+  if (globalThis.sketchup && !tempBridge) {
+    tempBridge = new SketchupBridge(name)
   }
 
+  const res = await tempBridge?.create()
+  if (res) bridge = tempBridge
+
   if (!bridge) console.warn(`Failed to bind ${name} binding.`)
 
   globalThis[name] = bridge

From 77aad568bce4e66dffc90445c1bcad095c62eee1 Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Fri, 14 Jul 2023 11:28:17 +0100
Subject: [PATCH 17/35] experiments(dui3): added test bindings

---
 .../lib/bindings/definitions/baseBindings.ts  | 29 +------------------
 .../lib/bindings/definitions/testBindings.ts  | 25 ++++++++++++++++
 packages/dui3/plugins/00.bindings.ts          | 21 +++++---------
 3 files changed, 33 insertions(+), 42 deletions(-)
 create mode 100644 packages/dui3/lib/bindings/definitions/testBindings.ts

diff --git a/packages/dui3/lib/bindings/definitions/baseBindings.ts b/packages/dui3/lib/bindings/definitions/baseBindings.ts
index d6170caa0..d59330531 100644
--- a/packages/dui3/lib/bindings/definitions/baseBindings.ts
+++ b/packages/dui3/lib/bindings/definitions/baseBindings.ts
@@ -1,8 +1,3 @@
-// Needs to be agreed between Frontend and Rhino
-export interface IRhinoRandomBinding {
-  makeGreeting: (name: string) => Promise<string>
-}
-
 // Needs to be agreed between Frontend and Core
 export interface IBaseBinding {
   getAccounts: () => Promise<Account[]>
@@ -10,10 +5,6 @@ export interface IBaseBinding {
   getSourceApplicationVersion: () => Promise<string>
   getDocumentInfo: () => Promise<DocumentInfo>
 
-  // TODO:
-  getFileState: () => Promise<FileState>
-  updateFileState: (state: FileState) => Promise<void>
-
   /**
    * Subscribe to messages from the host application.
    * @param event
@@ -48,33 +39,15 @@ export type Account = {
   }
 }
 
-export type FileState = {
-  models: ModelCard[]
-}
-
-export type ModelCard = {
-  serverUrl: string // we need to select the correct account
-  modelId: string // we need to assemble the gql query properly
-  projectId: string
-  type: 'sender' | 'receiver'
-  status?: 'idle' | 'inprogress' | 'error' | 'warning' | 'disabled' | 'expired' //???
-  // settings: Record<string,unknown>???
-  // report: Record<string,unknown>???
-  // progress: Record<string, unknown> // ??? send status, receive status
-}
 export type DocumentInfo = {
   location: string
   name: string
   id: string
 }
 
+// NOTE: just a reminder for now
 export type ToastInfo = {
   text: string
   details?: string
   type: 'info' | 'error' | 'warning'
 }
-
-export type SelectionChangedInfo = {
-  objectIds: string[]
-  humanReadableSummary?: string
-}
diff --git a/packages/dui3/lib/bindings/definitions/testBindings.ts b/packages/dui3/lib/bindings/definitions/testBindings.ts
new file mode 100644
index 000000000..8fc21ac35
--- /dev/null
+++ b/packages/dui3/lib/bindings/definitions/testBindings.ts
@@ -0,0 +1,25 @@
+export interface ITestBinding {
+  sayHi: (name: string, count: number, sayHelloNotHi: boolean) => Promise<string[]>
+  goAway: () => Promise<void>
+  getComplexType: () => Promise<ComplexType>
+  on: <E extends keyof ITestBindingEvents>(
+    event: E,
+    callback: ITestBindingEvents[E]
+  ) => void
+}
+
+export interface ITestBindingEvents {
+  emptyTestEvent: () => void
+  testEvent: (args: TestEventArgs) => void
+}
+
+export type TestEventArgs = {
+  name: string
+  isOk: boolean
+  count: number
+}
+
+export type ComplexType = {
+  id: string
+  count: number
+}
diff --git a/packages/dui3/plugins/00.bindings.ts b/packages/dui3/plugins/00.bindings.ts
index 0a53352a4..955a0ce90 100644
--- a/packages/dui3/plugins/00.bindings.ts
+++ b/packages/dui3/plugins/00.bindings.ts
@@ -1,11 +1,9 @@
 import { GenericBridge } from '~/lib/bridge/generic'
 import { IRawBridge } from '~/lib/bridge/definitions'
 
-import {
-  IBaseBinding,
-  IRhinoRandomBinding
-} from '~/lib/bindings/definitions/baseBindings'
+import { IBaseBinding } from '~/lib/bindings/definitions/baseBindings'
 import { SketchupBridge } from '~/lib/bridge/sketchup'
+import { ITestBinding } from '~/lib/bindings/definitions/testBindings'
 
 // Makes TS happy
 declare let globalThis: Record<string, unknown> & {
@@ -20,21 +18,16 @@ declare let globalThis: Record<string, unknown> & {
  * strip or customize functionality from the ui itself.
  */
 export default defineNuxtPlugin(async () => {
-  const baseBinding = await tryHoistBinding<IBaseBinding>('baseBinding')
-
+  const testBindings = await tryHoistBinding<ITestBinding>('testBindings')
   const nonExistantBindings = await tryHoistBinding<IBaseBinding>('nonExistantBindings')
 
-  const rhinoRandomBinding = await tryHoistBinding<IRhinoRandomBinding>(
-    'rhinoRandomBinding'
-  )
-
-  const sketchupRandomBinding = await tryHoistBinding<unknown>('sketchupRandomBinding')
+  const baseBinding = await tryHoistBinding<IBaseBinding>('baseBinding')
 
   return {
     provide: {
-      baseBinding,
-      rhinoRandomBinding,
-      sketchupRandomBinding
+      testBindings,
+      nonExistantBindings,
+      baseBinding
     }
   }
 })

From fd46eaebe6ecc674ce7edcb3a5d082b04a117edd Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Fri, 14 Jul 2023 11:39:47 +0100
Subject: [PATCH 18/35] experiments(dui3): wip ITestBinding + page

---
 .../dui3/lib/bindings/definitions/testBindings.ts     |  1 +
 packages/dui3/pages/index.vue                         |  3 +++
 packages/dui3/pages/test.vue                          | 11 +++++++++++
 3 files changed, 15 insertions(+)
 create mode 100644 packages/dui3/pages/test.vue

diff --git a/packages/dui3/lib/bindings/definitions/testBindings.ts b/packages/dui3/lib/bindings/definitions/testBindings.ts
index 8fc21ac35..500850fd2 100644
--- a/packages/dui3/lib/bindings/definitions/testBindings.ts
+++ b/packages/dui3/lib/bindings/definitions/testBindings.ts
@@ -2,6 +2,7 @@ export interface ITestBinding {
   sayHi: (name: string, count: number, sayHelloNotHi: boolean) => Promise<string[]>
   goAway: () => Promise<void>
   getComplexType: () => Promise<ComplexType>
+  triggerEvent: (eventName: string) => Promise<void>
   on: <E extends keyof ITestBindingEvents>(
     event: E,
     callback: ITestBindingEvents[E]
diff --git a/packages/dui3/pages/index.vue b/packages/dui3/pages/index.vue
index 6242797a3..45ffbf581 100644
--- a/packages/dui3/pages/index.vue
+++ b/packages/dui3/pages/index.vue
@@ -10,6 +10,9 @@
         Hello world! You have
         {{ accounts.length }} accounts.
       </div>
+      <div>
+        <FormButton to="/test">Go To Test Bindings Page</FormButton>
+      </div>
       <div v-for="acc in accounts" :key="acc.accountInfo.id">
         <div class="truncate text-xs">
           {{ acc.accountInfo.userInfo.email }} @
diff --git a/packages/dui3/pages/test.vue b/packages/dui3/pages/test.vue
new file mode 100644
index 000000000..383c8e994
--- /dev/null
+++ b/packages/dui3/pages/test.vue
@@ -0,0 +1,11 @@
+<template>
+  <div>Hello test bindings page!</div>
+  <div><FormButton size="xs">sayHi</FormButton></div>
+  <div><FormButton size="xs">goAway</FormButton></div>
+  <div><FormButton size="xs">getComplexType</FormButton></div>
+  <div><FormButton size="xs">SayHi</FormButton></div>
+  <hr />
+  <div><FormButton size="xs">Trigger empty test event</FormButton></div>
+  <div><FormButton size="xs">Trigger test event</FormButton></div>
+</template>
+<script setup lang="ts"></script>

From 8597c3243429aab0aa576b344544aa8244881a52 Mon Sep 17 00:00:00 2001
From: oguzhankoral <oguzhankoral@gmail.com>
Date: Fri, 14 Jul 2023 15:59:07 +0300
Subject: [PATCH 19/35] Add testBindings functions -validated for sketchup

---
 packages/dui3/lib/bridge/base.ts     |  4 +-
 packages/dui3/lib/bridge/sketchup.ts | 10 +++--
 packages/dui3/pages/test.vue         | 59 +++++++++++++++++++++++++---
 3 files changed, 61 insertions(+), 12 deletions(-)

diff --git a/packages/dui3/lib/bridge/base.ts b/packages/dui3/lib/bridge/base.ts
index 8d0e1e67f..04c49ef60 100644
--- a/packages/dui3/lib/bridge/base.ts
+++ b/packages/dui3/lib/bridge/base.ts
@@ -5,7 +5,7 @@ import { createNanoEvents, Emitter } from 'nanoevents'
  * e.g. via `browser.executeScriptAsync("myBindings.on('eventName', serializedData)")`.
  */
 export class BaseBridge {
-  private emitter: Emitter
+  public emitter: Emitter
 
   constructor() {
     this.emitter = createNanoEvents()
@@ -18,8 +18,6 @@ export class BaseBridge {
 
   // NOTE: this could be private - as it should be only used by the host application.
   emit(eventName: string, payload: string) {
-    console.log(payload)
-
     const parsedPayload = payload ? (JSON.parse(payload) as unknown) : null
     this.emitter.emit(eventName, parsedPayload)
   }
diff --git a/packages/dui3/lib/bridge/sketchup.ts b/packages/dui3/lib/bridge/sketchup.ts
index f32aa7342..79f522d60 100644
--- a/packages/dui3/lib/bridge/sketchup.ts
+++ b/packages/dui3/lib/bridge/sketchup.ts
@@ -49,6 +49,13 @@ export class SketchupBridge extends BaseBridge {
     ;(globalThis as Record<string, unknown>).bindings = this
   }
 
+  // NOTE: Overriden function for now, need to be checked later payload can be unified or not.
+  // From sketchup we receive beatiful JSON object that we do not need to parse.
+  // This should be checked with .NET
+  emit(eventName: string, payload: string): void {
+    this.emitter.emit(eventName, payload)
+  }
+
   public async create(): Promise<boolean> {
     // Initialization continues in the receiveCommandsAndInitializeBridge function,
     // where we expect sketchup to return to us the command names for related bindings/views.
@@ -125,9 +132,6 @@ export class SketchupBridge extends BaseBridge {
   }
 
   private receiveResponse(requestId: string, data: string) {
-    console.log(requestId)
-    console.log(data)
-
     if (!this.requests[requestId])
       throw new Error(
         `Sketchup Bridge found no request to resolve with the id of ${requestId}. Something is weird!`
diff --git a/packages/dui3/pages/test.vue b/packages/dui3/pages/test.vue
index 383c8e994..1e002b42a 100644
--- a/packages/dui3/pages/test.vue
+++ b/packages/dui3/pages/test.vue
@@ -1,11 +1,58 @@
 <template>
   <div>Hello test bindings page!</div>
-  <div><FormButton size="xs">sayHi</FormButton></div>
-  <div><FormButton size="xs">goAway</FormButton></div>
-  <div><FormButton size="xs">getComplexType</FormButton></div>
+  <div><FormButton size="xs" @click="sayHi()">sayHi</FormButton></div>
+  <div><FormButton size="xs" @click="goAway()">goAway</FormButton></div>
+  <div><FormButton size="xs" @click="getComplexType()">getComplexType</FormButton></div>
   <div><FormButton size="xs">SayHi</FormButton></div>
   <hr />
-  <div><FormButton size="xs">Trigger empty test event</FormButton></div>
-  <div><FormButton size="xs">Trigger test event</FormButton></div>
+  <div>
+    <FormButton size="xs" @click="triggerEmptyEvent()">
+      Trigger empty test event
+    </FormButton>
+  </div>
+  <div>
+    <FormButton size="xs" @click="triggerEvent()">Trigger test event</FormButton>
+  </div>
 </template>
-<script setup lang="ts"></script>
+
+<script setup lang="ts">
+import { ComplexType, TestEventArgs } from '~/lib/bindings/definitions/testBindings'
+
+const { $testBindings } = useNuxtApp()
+
+$testBindings.on('emptyTestEvent', () => {
+  setTimeout(() => {
+    console.log('empty test event catched!')
+  }, 500)
+})
+
+$testBindings.on('testEvent', (args: TestEventArgs) => {
+  setTimeout(() => {
+    console.log('test event catched!')
+    console.log(args)
+  }, 500)
+})
+
+async function triggerEmptyEvent() {
+  await $testBindings.triggerEvent('emptyTestEvent')
+}
+
+async function triggerEvent() {
+  await $testBindings.triggerEvent('testEvent')
+}
+
+async function sayHi() {
+  const res = await $testBindings.sayHi('Oguzhan', 3, true)
+  console.log(res)
+}
+
+async function goAway() {
+  const res = await $testBindings.goAway()
+  console.log(res)
+}
+
+async function getComplexType() {
+  const res = (await $testBindings.getComplexType()) as ComplexType
+  console.log(res)
+}
+</script>

From 9d812e935d01427c1f856faf2252eed38f34fc39 Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Sat, 15 Jul 2023 18:10:50 +0100
Subject: [PATCH 20/35] experiments(dui3): cleanup

---
 packages/dui3/components/header/NavBar.vue     | 10 ++--------
 .../lib/bindings/definitions/baseBindings.ts   |  6 ++++++
 .../lib/bindings/definitions/testBindings.ts   |  9 +++++++++
 packages/dui3/lib/bridge/generic.ts            | 13 ++++++++++++-
 packages/dui3/lib/bridge/sketchup.ts           | 18 ++++++++++--------
 packages/dui3/pages/index.vue                  |  3 ++-
 packages/dui3/pages/test.vue                   | 10 +++-------
 packages/dui3/plugins/00.bindings.ts           | 15 +++++++++++----
 8 files changed, 55 insertions(+), 29 deletions(-)

diff --git a/packages/dui3/components/header/NavBar.vue b/packages/dui3/components/header/NavBar.vue
index 097e23e17..6d28e7bad 100644
--- a/packages/dui3/components/header/NavBar.vue
+++ b/packages/dui3/components/header/NavBar.vue
@@ -7,14 +7,8 @@
         <div class="flex items-center">
           <HeaderLogoBlock :active="false" class="mr-0" />
           <div class="flex flex-shrink-0 items-center -ml-2 md:ml-0">
-            <!-- <HeaderNavLink
-              to="/"
-              name="Dashboard"
-              :separator="true"
-              class="hidden md:inline-block"
-            /> -->
             <PortalTarget name="navigation"></PortalTarget>
-            <FormButton size="xs" color="card" @click="$bindings.openDevTools()">
+            <FormButton size="xs" color="card" @click="$showDevTools()">
               Show Dev Tools
             </FormButton>
           </div>
@@ -24,5 +18,5 @@
   </nav>
 </template>
 <script setup lang="ts">
-const { $bindings } = useNuxtApp()
+const { $showDevTools } = useNuxtApp()
 </script>
diff --git a/packages/dui3/lib/bindings/definitions/baseBindings.ts b/packages/dui3/lib/bindings/definitions/baseBindings.ts
index d59330531..34961ef18 100644
--- a/packages/dui3/lib/bindings/definitions/baseBindings.ts
+++ b/packages/dui3/lib/bindings/definitions/baseBindings.ts
@@ -14,6 +14,11 @@ export interface IBaseBinding {
     event: E,
     callback: IBaseBindingHostEvents[E]
   ) => void
+  /**
+   * Note: this method does not need to be implemented in the .NET host application base bindings,
+   * it is served by the DUI3 bridge.
+   */
+  showDevTools: () => Promise<void>
 }
 
 export interface IBaseBindingHostEvents {
@@ -21,6 +26,7 @@ export interface IBaseBindingHostEvents {
   documentChanged: () => void
 }
 
+// An almost 1-1 mapping of what we need from the Core accounts class.
 export type Account = {
   id: string
   isDefault: boolean
diff --git a/packages/dui3/lib/bindings/definitions/testBindings.ts b/packages/dui3/lib/bindings/definitions/testBindings.ts
index 500850fd2..c2aae246d 100644
--- a/packages/dui3/lib/bindings/definitions/testBindings.ts
+++ b/packages/dui3/lib/bindings/definitions/testBindings.ts
@@ -1,7 +1,16 @@
+/**
+ * The name under which this binding will be registered.
+ */
+export const ITestBindingKey = 'testBinding'
+
+/**
+ * A test binding interface to ensure compatbility. Ideally all host environments would implement and register it.
+ */
 export interface ITestBinding {
   sayHi: (name: string, count: number, sayHelloNotHi: boolean) => Promise<string[]>
   goAway: () => Promise<void>
   getComplexType: () => Promise<ComplexType>
+  shouldThrow: () => Promise<void>
   triggerEvent: (eventName: string) => Promise<void>
   on: <E extends keyof ITestBindingEvents>(
     event: E,
diff --git a/packages/dui3/lib/bridge/generic.ts b/packages/dui3/lib/bridge/generic.ts
index a09199c90..b4c22c550 100644
--- a/packages/dui3/lib/bridge/generic.ts
+++ b/packages/dui3/lib/bridge/generic.ts
@@ -35,13 +35,24 @@ export class GenericBridge extends BaseBridge {
 
   private async runMethod(methodName: string, args: unknown[]): Promise<unknown> {
     const preserializedArgs = args.map((a) => JSON.stringify(a))
+
     // NOTE: RunMethod is a call to the .NET side.
     const result = await this.bridge.RunMethod(
       methodName,
       JSON.stringify(preserializedArgs)
     )
 
-    return JSON.parse(result) as unknown
+    const parsed = result ? (JSON.parse(result) as Record<string, unknown>) : null
+
+    if (parsed && parsed['error']) {
+      throw new Error(parsed['error'] as string)
+    }
+
+    return parsed
+  }
+
+  public showDevTools() {
+    this.bridge.ShowDevTools()
   }
 }
 
diff --git a/packages/dui3/lib/bridge/sketchup.ts b/packages/dui3/lib/bridge/sketchup.ts
index 79f522d60..75fb28c8c 100644
--- a/packages/dui3/lib/bridge/sketchup.ts
+++ b/packages/dui3/lib/bridge/sketchup.ts
@@ -49,22 +49,17 @@ export class SketchupBridge extends BaseBridge {
     ;(globalThis as Record<string, unknown>).bindings = this
   }
 
-  // NOTE: Overriden function for now, need to be checked later payload can be unified or not.
-  // From sketchup we receive beatiful JSON object that we do not need to parse.
-  // This should be checked with .NET
+  // NOTE: Overriden emit as we do not need to parse the data back - the Sketchup bridge already parses it for us.
   emit(eventName: string, payload: string): void {
-    this.emitter.emit(eventName, payload)
+    this.emitter.emit(eventName, payload as unknown as Record<string, unknown>)
   }
 
   public async create(): Promise<boolean> {
     // Initialization continues in the receiveCommandsAndInitializeBridge function,
     // where we expect sketchup to return to us the command names for related bindings/views.
-    // NOTE: as we want to have multiple sketchup bindings in the future, we will
-    // most likely change this method to specify which view/plugin/bindings we want.
-    // eslint-disable-next-line camelcase
-    // sketchup.exec({ name: 'getCommands', view_id: this.bindingsName })
     sketchup.getCommands(this.bindingsName)
 
+    //
     try {
       await this.isInitalized
       return true
@@ -148,4 +143,11 @@ export class SketchupBridge extends BaseBridge {
       delete this.requests[requestId]
     }
   }
+
+  public showDevTools() {
+    // eslint-disable-next-line no-alert
+    window.alert(
+      'Sketchup cannot do this. The dev tools menu is accessible via a right click.'
+    )
+  }
 }
diff --git a/packages/dui3/pages/index.vue b/packages/dui3/pages/index.vue
index 45ffbf581..cdf848732 100644
--- a/packages/dui3/pages/index.vue
+++ b/packages/dui3/pages/index.vue
@@ -44,9 +44,10 @@ import { graphql } from '~/lib/common/generated/gql'
 import { ServerInfoTestQuery } from '~/lib/common/generated/gql/graphql'
 import { useDocumentInfoSetup } from '~/lib/document-info'
 
+const { accounts, refreshAccounts, defaultAccount } = await useAccountsSetup()
+
 const { $baseBinding } = useNuxtApp()
 const appName = await $baseBinding.getSourceApplicationName()
-const { accounts, refreshAccounts, defaultAccount } = await useAccountsSetup()
 
 const documentInfo = await useDocumentInfoSetup()
 
diff --git a/packages/dui3/pages/test.vue b/packages/dui3/pages/test.vue
index 1e002b42a..495af4489 100644
--- a/packages/dui3/pages/test.vue
+++ b/packages/dui3/pages/test.vue
@@ -21,16 +21,12 @@ import { ComplexType, TestEventArgs } from '~/lib/bindings/definitions/testBindi
 const { $testBindings } = useNuxtApp()
 
 $testBindings.on('emptyTestEvent', () => {
-  setTimeout(() => {
-    console.log('empty test event catched!')
-  }, 500)
+  console.log('empty test event catched!')
 })
 
 $testBindings.on('testEvent', (args: TestEventArgs) => {
-  setTimeout(() => {
-    console.log('test event catched!')
-    console.log(args)
-  }, 500)
+  console.log('test event catched!')
+  console.log(args)
 })
 
 async function triggerEmptyEvent() {
diff --git a/packages/dui3/plugins/00.bindings.ts b/packages/dui3/plugins/00.bindings.ts
index 955a0ce90..1fd7827bb 100644
--- a/packages/dui3/plugins/00.bindings.ts
+++ b/packages/dui3/plugins/00.bindings.ts
@@ -3,7 +3,7 @@ import { IRawBridge } from '~/lib/bridge/definitions'
 
 import { IBaseBinding } from '~/lib/bindings/definitions/baseBindings'
 import { SketchupBridge } from '~/lib/bridge/sketchup'
-import { ITestBinding } from '~/lib/bindings/definitions/testBindings'
+import { ITestBinding, ITestBindingKey } from '~/lib/bindings/definitions/testBindings'
 
 // Makes TS happy
 declare let globalThis: Record<string, unknown> & {
@@ -18,16 +18,23 @@ declare let globalThis: Record<string, unknown> & {
  * strip or customize functionality from the ui itself.
  */
 export default defineNuxtPlugin(async () => {
-  const testBindings = await tryHoistBinding<ITestBinding>('testBindings')
+  // Registers some default test bindings.
+  const testBindings = await tryHoistBinding<ITestBinding>(ITestBindingKey)
+  // Tries to register some non-existant bindings.
   const nonExistantBindings = await tryHoistBinding<IBaseBinding>('nonExistantBindings')
-
+  // Registers a set of default bindings.
   const baseBinding = await tryHoistBinding<IBaseBinding>('baseBinding')
 
+  const showDevTools = () => {
+    baseBinding.showDevTools()
+  }
+
   return {
     provide: {
       testBindings,
       nonExistantBindings,
-      baseBinding
+      baseBinding,
+      showDevTools
     }
   }
 })

From d176d0c59602f93a272719870b377afbbe3a375c Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Sun, 16 Jul 2023 09:42:40 +0100
Subject: [PATCH 21/35] experiments(dui3): poor man's test runniner in /test

---
 packages/dui3/layouts/default.vue   |   2 +-
 packages/dui3/lib/bridge/generic.ts |   7 +-
 packages/dui3/pages/test.vue        | 178 +++++++++++++++++++++-------
 3 files changed, 145 insertions(+), 42 deletions(-)

diff --git a/packages/dui3/layouts/default.vue b/packages/dui3/layouts/default.vue
index 8c8905991..47180542b 100644
--- a/packages/dui3/layouts/default.vue
+++ b/packages/dui3/layouts/default.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="min-h-full">
     <HeaderNavBar />
-    <main class="my-4 layout-container pb-20 mt-20">
+    <main class="px-1 pb-4 mt-16">
       <slot />
     </main>
   </div>
diff --git a/packages/dui3/lib/bridge/generic.ts b/packages/dui3/lib/bridge/generic.ts
index b4c22c550..e1b35d609 100644
--- a/packages/dui3/lib/bridge/generic.ts
+++ b/packages/dui3/lib/bridge/generic.ts
@@ -45,7 +45,12 @@ export class GenericBridge extends BaseBridge {
     const parsed = result ? (JSON.parse(result) as Record<string, unknown>) : null
 
     if (parsed && parsed['error']) {
-      throw new Error(parsed['error'] as string)
+      console.error(parsed)
+      throw new Error(
+        `Failed to run ${methodName} with args ${JSON.stringify(
+          args
+        )}. The host app error is logged above.`
+      )
     }
 
     return parsed
diff --git a/packages/dui3/pages/test.vue b/packages/dui3/pages/test.vue
index 495af4489..6ffa386ec 100644
--- a/packages/dui3/pages/test.vue
+++ b/packages/dui3/pages/test.vue
@@ -1,54 +1,152 @@
 <template>
-  <div>Hello test bindings page!</div>
-  <div><FormButton size="xs" @click="sayHi()">sayHi</FormButton></div>
-  <div><FormButton size="xs" @click="goAway()">goAway</FormButton></div>
-  <div><FormButton size="xs" @click="getComplexType()">getComplexType</FormButton></div>
-  <div><FormButton size="xs">SayHi</FormButton></div>
-  <hr />
-  <div>
-    <FormButton size="xs" @click="triggerEmptyEvent()">
-      Trigger empty test event
+  <div class="flex flex-col space-y-2">
+    <div>
+      <p class="text-sm text-foreground-2 py-2 px-2">
+        Do not expect these to save the day. They are just some
+        <b class="text-foreground-primary">minor sanity checks</b>
+        .
+      </p>
+    </div>
+    <FormButton
+      size="xl"
+      color="card"
+      full-width
+      class="sticky top-10 top-16"
+      @click="runTests()"
+    >
+      Run Tests
     </FormButton>
-  </div>
-  <div>
-    <FormButton size="xs" @click="triggerEvent()">Trigger test event</FormButton>
+    <div
+      v-for="test in tests"
+      :key="test.name"
+      class="py-2 px-2 bg-foundation shadow hover:shadow-lg transition rounded-lg text-xs"
+    >
+      <div class="flex space-x-2">
+        <div>
+          <MinusIcon v-if="test.status === 0" class="w-4 h-4 text-primary" />
+          <CheckIcon v-if="test.status === 1" class="w-4 h-4 text-success" />
+          <XMarkIcon v-if="test.status === 2" class="w-4 h-4 text-danger" />
+        </div>
+        <div>{{ test.name }}</div>
+      </div>
+      <div class="text-xs max-w-full overflow-x-scroll simple-scrollbar py-2">
+        <pre>{{ test }}</pre>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ComplexType, TestEventArgs } from '~/lib/bindings/definitions/testBindings'
-
+import { TestEventArgs } from '~/lib/bindings/definitions/testBindings'
+import { useAccountsSetup } from '~/lib/accounts/composables/setup'
+import { CheckIcon, MinusIcon, XMarkIcon } from '@heroicons/vue/20/solid'
 const { $testBindings } = useNuxtApp()
+// const { accounts } = await useAccountsSetup()
+
+const tests = ref([
+  {
+    name: 'Simple call with parameters',
+    test: async (): Promise<unknown> => {
+      await $testBindings.sayHi('Speckle', 3, false)
+      return 'ok'
+    },
+    status: 0,
+    result: {} as unknown
+  },
+  {
+    name: 'Simple call with invalid parameters',
+    test: async (): Promise<unknown> => {
+      try {
+        await (
+          $testBindings as unknown as {
+            sayHi: (name: string, count: number) => Promise<string>
+          }
+        ).sayHi('Speckle', 0) // note, invalid on purpose, it looks long because ts needs to be happy
+        return 'not ok'
+      } catch (e) {
+        return 'ok'
+      }
+    },
+    status: 0,
+    result: {} as unknown
+  },
+  {
+    name: 'Simple function call with no args and no result',
+    test: async (): Promise<unknown> => {
+      const res = await $testBindings.goAway()
+      return res === null ? 'ok' : 'not ok'
+    },
+    status: 0,
+    result: {} as unknown
+  },
+  {
+    name: 'Get a more complicated object from a method call',
+    test: async (): Promise<unknown> => {
+      const res = await $testBindings.getComplexType()
+      const key = Object.keys(res)[0]
+
+      return key.toLowerCase()[0] === key[0] ? 'ok' : 'serialization gone wrong'
+    },
+    status: 0,
+    result: {} as unknown
+  },
+  {
+    name: 'Simple event capture',
+    test: async () => {
+      await $testBindings.triggerEvent('emptyTestEvent')
+      return 'not ok'
+    },
+    status: 0,
+    result: 'asdf' as unknown
+  },
+  {
+    name: 'Event capture with args',
+    test: async () => {
+      await $testBindings.triggerEvent('testEvent')
+      return 'not ok'
+    },
+    status: 0,
+    result: 'asdf' as unknown
+  }
+])
+
+const runTests = async () => {
+  for (const test of tests.value) {
+    test.result = null
+    test.status = 0
+  }
+  for (const test of tests.value) {
+    try {
+      const res = await test.test()
+      if (res === 'ok') {
+        test.status = 1
+      } else {
+        test.status = 2
+      }
+      test.result = res
+    } catch (e) {
+      test.status = 2
+      test.result = e
+    }
+  }
+}
 
 $testBindings.on('emptyTestEvent', () => {
-  console.log('empty test event catched!')
+  setTimeout(() => {
+    const myTest = tests.value.find((t) => t.name === 'Simple event capture')
+
+    if (!myTest) return
+    myTest.status = 1
+    myTest.result = 'got an event back, we are okay'
+  }, 300)
 })
 
 $testBindings.on('testEvent', (args: TestEventArgs) => {
-  console.log('test event catched!')
-  console.log(args)
+  setTimeout(() => {
+    const myTest = tests.value.find((t) => t.name === 'Event capture with args')
+    if (!myTest) return
+    myTest.status = 1
+    myTest.result = args
+  }, 300)
 })
-
-async function triggerEmptyEvent() {
-  await $testBindings.triggerEvent('emptyTestEvent')
-}
-
-async function triggerEvent() {
-  await $testBindings.triggerEvent('testEvent')
-}
-
-async function sayHi() {
-  const res = await $testBindings.sayHi('Oguzhan', 3, true)
-  console.log(res)
-}
-
-async function goAway() {
-  const res = await $testBindings.goAway()
-  console.log(res)
-}
-
-async function getComplexType() {
-  const res = (await $testBindings.getComplexType()) as ComplexType
-  console.log(res)
-}
 </script>

From 0c78fb625d7d71b74e75a1ec5395581d90e3072c Mon Sep 17 00:00:00 2001
From: oguzhankoral <oguzhankoral@gmail.com>
Date: Mon, 17 Jul 2023 17:40:40 +0300
Subject: [PATCH 22/35] Catch/handle error from sketchup

---
 packages/dui3/lib/bridge/sketchup.ts | 9 ++++++++-
 packages/dui3/pages/test.vue         | 7 ++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/dui3/lib/bridge/sketchup.ts b/packages/dui3/lib/bridge/sketchup.ts
index 75fb28c8c..4e25c68c3 100644
--- a/packages/dui3/lib/bridge/sketchup.ts
+++ b/packages/dui3/lib/bridge/sketchup.ts
@@ -126,13 +126,20 @@ export class SketchupBridge extends BaseBridge {
     })
   }
 
-  private receiveResponse(requestId: string, data: string) {
+  private receiveResponse(requestId: string, data: object) {
     if (!this.requests[requestId])
       throw new Error(
         `Sketchup Bridge found no request to resolve with the id of ${requestId}. Something is weird!`
       )
     const request = this.requests[requestId]
     try {
+      if (data && data.hasOwnProperty('error')) {
+        console.error(data)
+        throw new Error(
+          `Failed to run ${requestId}. The host app error is logged above.`
+        )
+      }
+
       // NOTE/TODO: does not need parsing
       // const parsedData = JSON.parse(data) as Record<string, unknown> // TODO: check if data is undefined
       request.resolve(data)
diff --git a/packages/dui3/pages/test.vue b/packages/dui3/pages/test.vue
index 6ffa386ec..f128e4d86 100644
--- a/packages/dui3/pages/test.vue
+++ b/packages/dui3/pages/test.vue
@@ -74,7 +74,7 @@ const tests = ref([
     name: 'Simple function call with no args and no result',
     test: async (): Promise<unknown> => {
       const res = await $testBindings.goAway()
-      return res === null ? 'ok' : 'not ok'
+      return res === null || res === undefined ? 'ok' : 'not ok'
     },
     status: 0,
     result: {} as unknown
@@ -133,7 +133,10 @@ const runTests = async () => {
 
 $testBindings.on('emptyTestEvent', () => {
   setTimeout(() => {
+    console.log('sketchup sent event back', 'emptyTestEvent')
+
     const myTest = tests.value.find((t) => t.name === 'Simple event capture')
+    console.log(myTest, 'myTest')
 
     if (!myTest) return
     myTest.status = 1
@@ -143,7 +146,9 @@ $testBindings.on('emptyTestEvent', () => {
 
 $testBindings.on('testEvent', (args: TestEventArgs) => {
   setTimeout(() => {
+    console.log(args, 'testEvent')
     const myTest = tests.value.find((t) => t.name === 'Event capture with args')
+    console.log(myTest, 'myTest')
     if (!myTest) return
     myTest.status = 1
     myTest.result = args

From 1083769bc01530f4ae0199bca67491877c4c2cd7 Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Mon, 17 Jul 2023 18:30:49 +0100
Subject: [PATCH 23/35] experiments(dui3): wip

---
 packages/dui3/app.vue                         |  6 ++
 packages/dui3/components/header/NavBar.vue    |  3 +
 packages/dui3/components/header/UserMenu.vue  | 55 +++++++++++++++++++
 packages/dui3/components/user/Avatar.vue      | 10 ++++
 .../dui3/lib/accounts/composables/setup.ts    | 15 ++++-
 packages/dui3/lib/document-info/index.ts      | 11 ++--
 packages/dui3/pages/index.vue                 |  8 +--
 packages/dui3/pages/test.vue                  |  6 +-
 8 files changed, 97 insertions(+), 17 deletions(-)
 create mode 100644 packages/dui3/components/header/UserMenu.vue
 create mode 100644 packages/dui3/components/user/Avatar.vue

diff --git a/packages/dui3/app.vue b/packages/dui3/app.vue
index c306bfa05..128747049 100644
--- a/packages/dui3/app.vue
+++ b/packages/dui3/app.vue
@@ -6,6 +6,12 @@
   </div>
 </template>
 <script setup lang="ts">
+import { useAccountsSetup } from '~/lib/accounts/composables/setup'
+import { useDocumentInfoSetup } from '~/lib/document-info'
+
+useAccountsSetup()
+useDocumentInfoSetup()
+
 useHead({
   // Title suffix
   titleTemplate: (titleChunk) =>
diff --git a/packages/dui3/components/header/NavBar.vue b/packages/dui3/components/header/NavBar.vue
index 6d28e7bad..62f597cb3 100644
--- a/packages/dui3/components/header/NavBar.vue
+++ b/packages/dui3/components/header/NavBar.vue
@@ -13,6 +13,9 @@
             </FormButton>
           </div>
         </div>
+        <div>
+          <HeaderUserMenu />
+        </div>
       </div>
     </div>
   </nav>
diff --git a/packages/dui3/components/header/UserMenu.vue b/packages/dui3/components/header/UserMenu.vue
new file mode 100644
index 000000000..dccfcf238
--- /dev/null
+++ b/packages/dui3/components/header/UserMenu.vue
@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <Menu as="div" class="ml-2 flex items-center">
+      <MenuButton v-slot="{ open }">
+        <span class="sr-only">Open user menu</span>
+        =
+        <!-- <UserAvatar v-if="!userOpen" size="lg" :user="activeUser" hover-effect />
+        <UserAvatar v-else size="lg" hover-effect>
+          <XMarkIcon class="w-5 h-5" />
+        </UserAvatar> -->
+      </MenuButton>
+      <Transition
+        enter-active-class="transition ease-out duration-200"
+        enter-from-class="transform opacity-0 scale-95"
+        enter-to-class="transform opacity-100 scale-100"
+        leave-active-class="transition ease-in duration-75"
+        leave-from-class="transform opacity-100 scale-100"
+        leave-to-class="transform opacity-0 scale-95"
+      >
+        <MenuItems
+          class="absolute right-0 md:right-4 top-14 md:top-16 w-full md:w-64 origin-top-right bg-foundation outline outline-2 outline-primary-muted rounded-md shadow-lg overflow-hidden"
+        >
+          <MenuItem v-slot="{ active, close }" as="div">
+            <NuxtLink
+              :class="[
+                active ? 'bg-foundation-focus' : '',
+                'flex items-center  justify-between px-2 py-3 text-sm text-foreground cursor-pointer transition'
+              ]"
+              to="/"
+              @click="close"
+            >
+              Haello
+            </NuxtLink>
+          </MenuItem>
+
+          <MenuItem v-slot="{ active, close }" as="div">
+            <NuxtLink
+              :class="[
+                active ? 'bg-foundation-focus' : '',
+                'flex items-center justify-between px-2 py-3 text-sm text-primary cursor-pointer transition border-b border-primary'
+              ]"
+              to="/test"
+              @click="close"
+            >
+              Tests
+            </NuxtLink>
+          </MenuItem>
+        </MenuItems>
+      </Transition>
+    </Menu>
+  </div>
+</template>
+<script setup lang="ts">
+import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
+</script>
diff --git a/packages/dui3/components/user/Avatar.vue b/packages/dui3/components/user/Avatar.vue
new file mode 100644
index 000000000..a5821f3fc
--- /dev/null
+++ b/packages/dui3/components/user/Avatar.vue
@@ -0,0 +1,10 @@
+<template>
+  <div>Hello avatar!</div>
+</template>
+<script setup lang="ts">
+import { Account } from '~/lib/bindings/definitions/baseBindings'
+
+const props = defineProps<{
+  userInfo: Account
+}>()
+</script>
diff --git a/packages/dui3/lib/accounts/composables/setup.ts b/packages/dui3/lib/accounts/composables/setup.ts
index c301f67c5..661b0383b 100644
--- a/packages/dui3/lib/accounts/composables/setup.ts
+++ b/packages/dui3/lib/accounts/composables/setup.ts
@@ -18,8 +18,10 @@ export type DUIAccountsState = {
 }
 
 const AccountsInjectionKey = 'DUI_ACCOUNTS_STATE'
-
-export async function useAccountsSetup(): Promise<DUIAccountsState> {
+/**
+ * Use this composable to set up the account bindings and graphql clients at the top of the app.
+ */
+export function useAccountsSetup(): DUIAccountsState {
   const app = useNuxtApp()
   const $baseBinding = app.$baseBinding
 
@@ -31,6 +33,8 @@ export async function useAccountsSetup(): Promise<DUIAccountsState> {
   // Matches local accounts coming from the host app to app state.
   const refreshAccounts = async () => {
     const accs = await $baseBinding.getAccounts()
+    // We create a whole new list of accounts that will replace the old list. This way we ensure we drop
+    // out of scope old accounts that not exist anymore (TODO: test), and we don't need to do complex diffing.
     const newAccs = [] as DUIAccount[]
     for (const acc of accs) {
       const existing = accounts.value.find((a) => a.accountInfo.id === acc.id)
@@ -45,7 +49,9 @@ export async function useAccountsSetup(): Promise<DUIAccountsState> {
           authToken: () => acc.token
         })
       )
+
       apolloClients[acc.id] = client
+
       newAccs.push({
         accountInfo: acc,
         client
@@ -54,7 +60,7 @@ export async function useAccountsSetup(): Promise<DUIAccountsState> {
     accounts.value = newAccs
   }
 
-  await refreshAccounts()
+  ;(async () => await refreshAccounts())()
 
   const defaultAccount = computed(() =>
     accounts.value.find((acc) => acc.accountInfo.isDefault)
@@ -71,6 +77,9 @@ export async function useAccountsSetup(): Promise<DUIAccountsState> {
   return accState
 }
 
+/**
+ * Use this composable to access the users' local accounts and their corresponding graphql client.
+ */
 export function useInjectedAccounts(): DUIAccountsState {
   const state = inject(AccountsInjectionKey) as DUIAccountsState
   return state
diff --git a/packages/dui3/lib/document-info/index.ts b/packages/dui3/lib/document-info/index.ts
index ff7f00118..a65b89c57 100644
--- a/packages/dui3/lib/document-info/index.ts
+++ b/packages/dui3/lib/document-info/index.ts
@@ -1,20 +1,19 @@
 import { DocumentInfo } from '~/lib/bindings/definitions/baseBindings'
 import { ref } from 'vue'
 
-const DocumentInfoInjectionKey = 'DUI_ACCOUNTS_STATE'
+const DocumentInfoInjectionKey = 'DUI_DOC_INFO_STATE'
 
-export async function useDocumentInfoSetup() {
+export function useDocumentInfoSetup() {
   const app = useNuxtApp()
   const documentInfo = ref<DocumentInfo>()
 
-  app.$baseBinding.on('documentChanged', () => {
+  app.$baseBinding?.on('documentChanged', () => {
     setTimeout(async () => {
       const docInfo = await app.$baseBinding.getDocumentInfo()
       documentInfo.value = docInfo
-    }, 500) // Don't ask
+    }, 500) // Rhino needs some time.
   })
-
-  documentInfo.value = await app.$baseBinding.getDocumentInfo()
+  ;(async () => (documentInfo.value = await app.$baseBinding.getDocumentInfo()))()
   provide(DocumentInfoInjectionKey, documentInfo)
   return documentInfo
 }
diff --git a/packages/dui3/pages/index.vue b/packages/dui3/pages/index.vue
index cdf848732..bf286ca1d 100644
--- a/packages/dui3/pages/index.vue
+++ b/packages/dui3/pages/index.vue
@@ -39,17 +39,17 @@
 </template>
 <script setup lang="ts">
 import { UseQueryReturn, useQuery } from '@vue/apollo-composable'
-import { useAccountsSetup } from '~/lib/accounts/composables/setup'
+import { useInjectedAccounts } from '~/lib/accounts/composables/setup'
 import { graphql } from '~/lib/common/generated/gql'
 import { ServerInfoTestQuery } from '~/lib/common/generated/gql/graphql'
-import { useDocumentInfoSetup } from '~/lib/document-info'
+import { useInjectedDocumentInfo } from '~/lib/document-info'
 
-const { accounts, refreshAccounts, defaultAccount } = await useAccountsSetup()
+const { accounts, refreshAccounts, defaultAccount } = useInjectedAccounts()
 
 const { $baseBinding } = useNuxtApp()
 const appName = await $baseBinding.getSourceApplicationName()
 
-const documentInfo = await useDocumentInfoSetup()
+const documentInfo = useInjectedDocumentInfo()
 
 const versionQuery = graphql(`
   query ServerInfoTest {
diff --git a/packages/dui3/pages/test.vue b/packages/dui3/pages/test.vue
index 6ffa386ec..cf1416a09 100644
--- a/packages/dui3/pages/test.vue
+++ b/packages/dui3/pages/test.vue
@@ -38,10 +38,8 @@
 
 <script setup lang="ts">
 import { TestEventArgs } from '~/lib/bindings/definitions/testBindings'
-import { useAccountsSetup } from '~/lib/accounts/composables/setup'
 import { CheckIcon, MinusIcon, XMarkIcon } from '@heroicons/vue/20/solid'
 const { $testBindings } = useNuxtApp()
-// const { accounts } = await useAccountsSetup()
 
 const tests = ref([
   {
@@ -97,7 +95,7 @@ const tests = ref([
       return 'not ok'
     },
     status: 0,
-    result: 'asdf' as unknown
+    result: 'not run yet' as unknown
   },
   {
     name: 'Event capture with args',
@@ -106,7 +104,7 @@ const tests = ref([
       return 'not ok'
     },
     status: 0,
-    result: 'asdf' as unknown
+    result: 'not run yet' as unknown
   }
 ])
 

From 65bb09d522e4e90a22b2498b3b5d690f3c1d6b23 Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Tue, 18 Jul 2023 10:04:36 +0100
Subject: [PATCH 24/35] experiments(dui3): adds mocked bindings and upgrades
 nuxt

---
 .../lib/bindings/definitions/baseBindings.ts  |   34 +
 .../lib/bindings/definitions/testBindings.ts  |   29 +
 packages/dui3/lib/bridge/generic.ts           |    3 +-
 packages/dui3/package.json                    |    2 +-
 packages/dui3/plugins/00.bindings.ts          |   19 +-
 yarn.lock                                     | 1163 +++++++++++------
 6 files changed, 828 insertions(+), 422 deletions(-)

diff --git a/packages/dui3/lib/bindings/definitions/baseBindings.ts b/packages/dui3/lib/bindings/definitions/baseBindings.ts
index 34961ef18..e476ba1f6 100644
--- a/packages/dui3/lib/bindings/definitions/baseBindings.ts
+++ b/packages/dui3/lib/bindings/definitions/baseBindings.ts
@@ -1,3 +1,7 @@
+/* eslint-disable @typescript-eslint/require-await */
+
+import { BaseBridge } from '~~/lib/bridge/base'
+
 // Needs to be agreed between Frontend and Core
 export interface IBaseBinding {
   getAccounts: () => Promise<Account[]>
@@ -57,3 +61,33 @@ export type ToastInfo = {
   details?: string
   type: 'info' | 'error' | 'warning'
 }
+
+export class MockedBaseBinding extends BaseBridge {
+  constructor() {
+    super()
+  }
+
+  public async getAccounts() {
+    return []
+  }
+
+  public async getSourceApplicationName() {
+    return 'Mocks'
+  }
+
+  public async getSourceApplicationVersion() {
+    return '1'
+  }
+
+  public async getDocumentInfo() {
+    return {
+      name: 'Mocked File',
+      location: 'www',
+      id: '42'
+    }
+  }
+
+  public async showDevTools() {
+    console.log('Mocked bindings cannot do this')
+  }
+}
diff --git a/packages/dui3/lib/bindings/definitions/testBindings.ts b/packages/dui3/lib/bindings/definitions/testBindings.ts
index c2aae246d..390a1e1bc 100644
--- a/packages/dui3/lib/bindings/definitions/testBindings.ts
+++ b/packages/dui3/lib/bindings/definitions/testBindings.ts
@@ -1,3 +1,7 @@
+/* eslint-disable @typescript-eslint/require-await */
+
+import { BaseBridge } from '~~/lib/bridge/base'
+
 /**
  * The name under which this binding will be registered.
  */
@@ -33,3 +37,28 @@ export type ComplexType = {
   id: string
   count: number
 }
+
+export class MockedTestBinding extends BaseBridge {
+  constructor() {
+    super()
+  }
+  public async sayHi(name: string, count: number, sayHelloNotHi: boolean) {
+    return `Hello from mocked bindings. Args: name = ${name}, count = ${count}, sayHelloNotHi = ${sayHelloNotHi.toString()}.`
+  }
+
+  public async goAway() {
+    return
+  }
+
+  public async getComplexType() {
+    return { id: 'wow', count: 42 }
+  }
+
+  public async shouldThrow() {
+    return
+  }
+
+  public async triggerEvent(eventName: string) {
+    return eventName
+  }
+}
diff --git a/packages/dui3/lib/bridge/generic.ts b/packages/dui3/lib/bridge/generic.ts
index e1b35d609..91de4deeb 100644
--- a/packages/dui3/lib/bridge/generic.ts
+++ b/packages/dui3/lib/bridge/generic.ts
@@ -17,7 +17,8 @@ export class GenericBridge extends BaseBridge {
 
     try {
       availableMethodNames = await this.bridge.GetBindingsMethodNames()
-    } catch {
+    } catch (e) {
+      console.error(e)
       return false
     }
 
diff --git a/packages/dui3/package.json b/packages/dui3/package.json
index 012c5695a..bd9fe2713 100644
--- a/packages/dui3/package.json
+++ b/packages/dui3/package.json
@@ -53,7 +53,7 @@
     "eslint-plugin-nuxt": "^4.0.0",
     "eslint-plugin-vue": "^9.5.1",
     "eslint-plugin-vuejs-accessibility": "^1.2.0",
-    "nuxt": "^3.5.0",
+    "nuxt": "^3.6.3",
     "postcss": "^8.4.18",
     "postcss-custom-properties": "^12.1.9",
     "postcss-html": "^1.5.0",
diff --git a/packages/dui3/plugins/00.bindings.ts b/packages/dui3/plugins/00.bindings.ts
index 1fd7827bb..e0c89d562 100644
--- a/packages/dui3/plugins/00.bindings.ts
+++ b/packages/dui3/plugins/00.bindings.ts
@@ -1,9 +1,16 @@
 import { GenericBridge } from '~/lib/bridge/generic'
 import { IRawBridge } from '~/lib/bridge/definitions'
 
-import { IBaseBinding } from '~/lib/bindings/definitions/baseBindings'
+import {
+  IBaseBinding,
+  MockedBaseBinding
+} from '~/lib/bindings/definitions/baseBindings'
 import { SketchupBridge } from '~/lib/bridge/sketchup'
-import { ITestBinding, ITestBindingKey } from '~/lib/bindings/definitions/testBindings'
+import {
+  ITestBinding,
+  ITestBindingKey,
+  MockedTestBinding
+} from '~/lib/bindings/definitions/testBindings'
 
 // Makes TS happy
 declare let globalThis: Record<string, unknown> & {
@@ -19,11 +26,15 @@ declare let globalThis: Record<string, unknown> & {
  */
 export default defineNuxtPlugin(async () => {
   // Registers some default test bindings.
-  const testBindings = await tryHoistBinding<ITestBinding>(ITestBindingKey)
+  const testBindings =
+    (await tryHoistBinding<ITestBinding>(ITestBindingKey)) || new MockedTestBinding()
+
   // Tries to register some non-existant bindings.
   const nonExistantBindings = await tryHoistBinding<IBaseBinding>('nonExistantBindings')
+
   // Registers a set of default bindings.
-  const baseBinding = await tryHoistBinding<IBaseBinding>('baseBinding')
+  const baseBinding =
+    (await tryHoistBinding<IBaseBinding>('baseBinding')) || new MockedBaseBinding()
 
   const showDevTools = () => {
     baseBinding.showDevTools()
diff --git a/yarn.lock b/yarn.lock
index 9671dae3b..43e40ed3b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6334,9 +6334,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/android-arm64@npm:0.17.19":
-  version: 0.17.19
-  resolution: "@esbuild/android-arm64@npm:0.17.19"
+"@esbuild/android-arm64@npm:0.18.13":
+  version: 0.18.13
+  resolution: "@esbuild/android-arm64@npm:0.18.13"
   conditions: os=android & cpu=arm64
   languageName: node
   linkType: hard
@@ -6369,9 +6369,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/android-arm@npm:0.17.19":
-  version: 0.17.19
-  resolution: "@esbuild/android-arm@npm:0.17.19"
+"@esbuild/android-arm@npm:0.18.13":
+  version: 0.18.13
+  resolution: "@esbuild/android-arm@npm:0.18.13"
   conditions: os=android & cpu=arm
   languageName: node
   linkType: hard
@@ -6397,9 +6397,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/android-x64@npm:0.17.19":
-  version: 0.17.19
-  resolution: "@esbuild/android-x64@npm:0.17.19"
+"@esbuild/android-x64@npm:0.18.13":
+  version: 0.18.13
+  resolution: "@esbuild/android-x64@npm:0.18.13"
   conditions: os=android & cpu=x64
   languageName: node
   linkType: hard
@@ -6425,9 +6425,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/darwin-arm64@npm:0.17.19":
-  version: 0.17.19
-  resolution: "@esbuild/darwin-arm64@npm:0.17.19"
+"@esbuild/darwin-arm64@npm:0.18.13":
+  version: 0.18.13
+  resolution: "@esbuild/darwin-arm64@npm:0.18.13"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
@@ -6453,9 +6453,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/darwin-x64@npm:0.17.19":
-  version: 0.17.19
-  resolution: "@esbuild/darwin-x64@npm:0.17.19"
+"@esbuild/darwin-x64@npm:0.18.13":
+  version: 0.18.13
+  resolution: "@esbuild/darwin-x64@npm:0.18.13"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
@@ -6481,9 +6481,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/freebsd-arm64@npm:0.17.19":
-  version: 0.17.19
-  resolution: "@esbuild/freebsd-arm64@npm:0.17.19"
+"@esbuild/freebsd-arm64@npm:0.18.13":
+  version: 0.18.13
+  resolution: "@esbuild/freebsd-arm64@npm:0.18.13"
   conditions: os=freebsd & cpu=arm64
   languageName: node
   linkType: hard
@@ -6509,9 +6509,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/freebsd-x64@npm:0.17.19":
-  version: 0.17.19
-  resolution: "@esbuild/freebsd-x64@npm:0.17.19"
+"@esbuild/freebsd-x64@npm:0.18.13":
+  version: 0.18.13
+  resolution: "@esbuild/freebsd-x64@npm:0.18.13"
   conditions: os=freebsd & cpu=x64
   languageName: node
   linkType: hard
@@ -6537,9 +6537,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-arm64@npm:0.17.19":
-  version: 0.17.19
-  resolution: "@esbuild/linux-arm64@npm:0.17.19"
+"@esbuild/linux-arm64@npm:0.18.13":
+  version: 0.18.13
+  resolution: "@esbuild/linux-arm64@npm:0.18.13"
   conditions: os=linux & cpu=arm64
   languageName: node
   linkType: hard
@@ -6565,9 +6565,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-arm@npm:0.17.19":
-  version: 0.17.19
-  resolution: "@esbuild/linux-arm@npm:0.17.19"
+"@esbuild/linux-arm@npm:0.18.13":
+  version: 0.18.13
+  resolution: "@esbuild/linux-arm@npm:0.18.13"
   conditions: os=linux & cpu=arm
   languageName: node
   linkType: hard
@@ -6593,9 +6593,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-ia32@npm:0.17.19":
-  version: 0.17.19
-  resolution: "@esbuild/linux-ia32@npm:0.17.19"
+"@esbuild/linux-ia32@npm:0.18.13":
+  version: 0.18.13
+  resolution: "@esbuild/linux-ia32@npm:0.18.13"
   conditions: os=linux & cpu=ia32
   languageName: node
   linkType: hard
@@ -6635,9 +6635,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-loong64@npm:0.17.19":
-  version: 0.17.19
-  resolution: "@esbuild/linux-loong64@npm:0.17.19"
+"@esbuild/linux-loong64@npm:0.18.13":
+  version: 0.18.13
+  resolution: "@esbuild/linux-loong64@npm:0.18.13"
   conditions: os=linux & cpu=loong64
   languageName: node
   linkType: hard
@@ -6663,9 +6663,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-mips64el@npm:0.17.19":
-  version: 0.17.19
-  resolution: "@esbuild/linux-mips64el@npm:0.17.19"
+"@esbuild/linux-mips64el@npm:0.18.13":
+  version: 0.18.13
+  resolution: "@esbuild/linux-mips64el@npm:0.18.13"
   conditions: os=linux & cpu=mips64el
   languageName: node
   linkType: hard
@@ -6691,9 +6691,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-ppc64@npm:0.17.19":
-  version: 0.17.19
-  resolution: "@esbuild/linux-ppc64@npm:0.17.19"
+"@esbuild/linux-ppc64@npm:0.18.13":
+  version: 0.18.13
+  resolution: "@esbuild/linux-ppc64@npm:0.18.13"
   conditions: os=linux & cpu=ppc64
   languageName: node
   linkType: hard
@@ -6719,9 +6719,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-riscv64@npm:0.17.19":
-  version: 0.17.19
-  resolution: "@esbuild/linux-riscv64@npm:0.17.19"
+"@esbuild/linux-riscv64@npm:0.18.13":
+  version: 0.18.13
+  resolution: "@esbuild/linux-riscv64@npm:0.18.13"
   conditions: os=linux & cpu=riscv64
   languageName: node
   linkType: hard
@@ -6747,9 +6747,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-s390x@npm:0.17.19":
-  version: 0.17.19
-  resolution: "@esbuild/linux-s390x@npm:0.17.19"
+"@esbuild/linux-s390x@npm:0.18.13":
+  version: 0.18.13
+  resolution: "@esbuild/linux-s390x@npm:0.18.13"
   conditions: os=linux & cpu=s390x
   languageName: node
   linkType: hard
@@ -6775,9 +6775,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-x64@npm:0.17.19":
-  version: 0.17.19
-  resolution: "@esbuild/linux-x64@npm:0.17.19"
+"@esbuild/linux-x64@npm:0.18.13":
+  version: 0.18.13
+  resolution: "@esbuild/linux-x64@npm:0.18.13"
   conditions: os=linux & cpu=x64
   languageName: node
   linkType: hard
@@ -6803,9 +6803,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/netbsd-x64@npm:0.17.19":
-  version: 0.17.19
-  resolution: "@esbuild/netbsd-x64@npm:0.17.19"
+"@esbuild/netbsd-x64@npm:0.18.13":
+  version: 0.18.13
+  resolution: "@esbuild/netbsd-x64@npm:0.18.13"
   conditions: os=netbsd & cpu=x64
   languageName: node
   linkType: hard
@@ -6831,9 +6831,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/openbsd-x64@npm:0.17.19":
-  version: 0.17.19
-  resolution: "@esbuild/openbsd-x64@npm:0.17.19"
+"@esbuild/openbsd-x64@npm:0.18.13":
+  version: 0.18.13
+  resolution: "@esbuild/openbsd-x64@npm:0.18.13"
   conditions: os=openbsd & cpu=x64
   languageName: node
   linkType: hard
@@ -6859,9 +6859,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/sunos-x64@npm:0.17.19":
-  version: 0.17.19
-  resolution: "@esbuild/sunos-x64@npm:0.17.19"
+"@esbuild/sunos-x64@npm:0.18.13":
+  version: 0.18.13
+  resolution: "@esbuild/sunos-x64@npm:0.18.13"
   conditions: os=sunos & cpu=x64
   languageName: node
   linkType: hard
@@ -6887,9 +6887,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/win32-arm64@npm:0.17.19":
-  version: 0.17.19
-  resolution: "@esbuild/win32-arm64@npm:0.17.19"
+"@esbuild/win32-arm64@npm:0.18.13":
+  version: 0.18.13
+  resolution: "@esbuild/win32-arm64@npm:0.18.13"
   conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
@@ -6915,9 +6915,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/win32-ia32@npm:0.17.19":
-  version: 0.17.19
-  resolution: "@esbuild/win32-ia32@npm:0.17.19"
+"@esbuild/win32-ia32@npm:0.18.13":
+  version: 0.18.13
+  resolution: "@esbuild/win32-ia32@npm:0.18.13"
   conditions: os=win32 & cpu=ia32
   languageName: node
   linkType: hard
@@ -6943,9 +6943,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/win32-x64@npm:0.17.19":
-  version: 0.17.19
-  resolution: "@esbuild/win32-x64@npm:0.17.19"
+"@esbuild/win32-x64@npm:0.18.13":
+  version: 0.18.13
+  resolution: "@esbuild/win32-x64@npm:0.18.13"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
@@ -9290,6 +9290,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jridgewell/sourcemap-codec@npm:^1.4.15":
+  version: 1.4.15
+  resolution: "@jridgewell/sourcemap-codec@npm:1.4.15"
+  checksum: b881c7e503db3fc7f3c1f35a1dd2655a188cc51a3612d76efc8a6eb74728bef5606e6758ee77423e564092b4a518aba569bbb21c9bac5ab7a35b0c6ae7e344c8
+  languageName: node
+  linkType: hard
+
 "@jridgewell/trace-mapping@npm:0.3.9, @jridgewell/trace-mapping@npm:^0.3.9":
   version: 0.3.9
   resolution: "@jridgewell/trace-mapping@npm:0.3.9"
@@ -9742,29 +9749,28 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@nuxt/kit@npm:3.5.0, @nuxt/kit@npm:^3.3.3, @nuxt/kit@npm:^3.4.3":
-  version: 3.5.0
-  resolution: "@nuxt/kit@npm:3.5.0"
+"@nuxt/kit@npm:3.6.3, @nuxt/kit@npm:^3.6.1":
+  version: 3.6.3
+  resolution: "@nuxt/kit@npm:3.6.3"
   dependencies:
-    "@nuxt/schema": 3.5.0
-    c12: ^1.4.1
-    consola: ^3.1.0
+    "@nuxt/schema": 3.6.3
+    c12: ^1.4.2
+    consola: ^3.2.3
     defu: ^6.1.2
-    globby: ^13.1.4
+    globby: ^13.2.2
     hash-sum: ^2.0.0
     ignore: ^5.2.4
-    jiti: ^1.18.2
+    jiti: ^1.19.1
     knitwork: ^1.0.0
-    lodash.template: ^4.5.0
-    mlly: ^1.2.1
-    pathe: ^1.1.0
+    mlly: ^1.4.0
+    pathe: ^1.1.1
     pkg-types: ^1.0.3
     scule: ^1.0.0
-    semver: ^7.5.1
-    unctx: ^2.3.0
-    unimport: ^3.0.6
+    semver: ^7.5.3
+    unctx: ^2.3.1
+    unimport: ^3.0.14
     untyped: ^1.3.2
-  checksum: 77baea10b72ebda658fd14519270e4dfac46cc8e8f1aaad17058d23a847fd369f4b74b4c0d907146991cbca950e728e2304fa3e471d878ebcd2cba5e4776ccdf
+  checksum: 08538308be294de832944970f66c34c3084991b96330ab65cef55770f84b75b7879edd76b838f4978829d6b8db872013d415ec97bb859df4dbe6c8a991c54cf6
   languageName: node
   linkType: hard
 
@@ -9820,6 +9826,32 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@nuxt/kit@npm:^3.4.3":
+  version: 3.5.0
+  resolution: "@nuxt/kit@npm:3.5.0"
+  dependencies:
+    "@nuxt/schema": 3.5.0
+    c12: ^1.4.1
+    consola: ^3.1.0
+    defu: ^6.1.2
+    globby: ^13.1.4
+    hash-sum: ^2.0.0
+    ignore: ^5.2.4
+    jiti: ^1.18.2
+    knitwork: ^1.0.0
+    lodash.template: ^4.5.0
+    mlly: ^1.2.1
+    pathe: ^1.1.0
+    pkg-types: ^1.0.3
+    scule: ^1.0.0
+    semver: ^7.5.1
+    unctx: ^2.3.0
+    unimport: ^3.0.6
+    untyped: ^1.3.2
+  checksum: 77baea10b72ebda658fd14519270e4dfac46cc8e8f1aaad17058d23a847fd369f4b74b4c0d907146991cbca950e728e2304fa3e471d878ebcd2cba5e4776ccdf
+  languageName: node
+  linkType: hard
+
 "@nuxt/postcss8@npm:^1.1.3":
   version: 1.1.3
   resolution: "@nuxt/postcss8@npm:1.1.3"
@@ -9916,6 +9948,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@nuxt/schema@npm:3.6.3":
+  version: 3.6.3
+  resolution: "@nuxt/schema@npm:3.6.3"
+  dependencies:
+    defu: ^6.1.2
+    hookable: ^5.5.3
+    pathe: ^1.1.1
+    pkg-types: ^1.0.3
+    postcss-import-resolver: ^2.0.0
+    std-env: ^3.3.3
+    ufo: ^1.1.2
+    unimport: ^3.0.14
+    untyped: ^1.3.2
+  checksum: 0f18fa880087cf2191bccbab1e173ddd215ed7ac73263d6c1e06b9f434b78ce9f202ee670e4d0041e4b3a9a49fc8167211f2945c3d55a7056e5df46cd210259c
+  languageName: node
+  linkType: hard
+
 "@nuxt/telemetry@npm:^2.1.10":
   version: 2.1.10
   resolution: "@nuxt/telemetry@npm:2.1.10"
@@ -9946,33 +9995,32 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@nuxt/telemetry@npm:^2.2.0":
-  version: 2.2.0
-  resolution: "@nuxt/telemetry@npm:2.2.0"
+"@nuxt/telemetry@npm:^2.3.0":
+  version: 2.3.1
+  resolution: "@nuxt/telemetry@npm:2.3.1"
   dependencies:
-    "@nuxt/kit": ^3.3.3
-    chalk: ^5.2.0
+    "@nuxt/kit": ^3.6.1
+    chalk: ^5.3.0
     ci-info: ^3.8.0
-    consola: ^3.0.1
+    consola: ^3.2.2
     create-require: ^1.1.1
     defu: ^6.1.2
-    destr: ^1.2.2
-    dotenv: ^16.0.3
-    fs-extra: ^10.1.0
+    destr: ^2.0.0
+    dotenv: ^16.3.1
+    fs-extra: ^11.1.1
     git-url-parse: ^13.1.0
-    inquirer: ^9.1.5
     is-docker: ^3.0.0
-    jiti: ^1.18.2
+    jiti: ^1.19.1
     mri: ^1.2.0
     nanoid: ^4.0.2
     node-fetch: ^3.3.1
-    ofetch: ^1.0.1
+    ofetch: ^1.1.1
     parse-git-config: ^3.0.0
-    rc9: ^2.1.0
-    std-env: ^3.3.2
+    rc9: ^2.1.1
+    std-env: ^3.3.3
   bin:
     nuxt-telemetry: bin/nuxt-telemetry.mjs
-  checksum: b3f3679184b4de2869355a8b3c04ca55779e5e8a7fe32b56fe694b2892a9f72cc345798e4f0c6cd3579146ef0d29fac009ba9cb17837951a7c5d06d1b47fd7c0
+  checksum: 7f8f743323ea5354ea94a1ce896db43a4576b46d4f870f94c73ce829bdb2397fb081027af38df532deaa7a72d4dac37057756acde6af65b06f0f1c5ef7674b28
   languageName: node
   linkType: hard
 
@@ -9983,6 +10031,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@nuxt/ui-templates@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "@nuxt/ui-templates@npm:1.2.0"
+  checksum: 1b73bc2293955cb1acebabff417ba1827cfb471195e4250ce833ace76a049796d130779313310e0932d95f1f68f1cd3df0d3ffb1b01970f6fe24a81753e2f03b
+  languageName: node
+  linkType: hard
+
 "@nuxt/vite-builder@npm:3.3.1":
   version: 3.3.1
   resolution: "@nuxt/vite-builder@npm:3.3.1"
@@ -10029,47 +10084,48 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@nuxt/vite-builder@npm:3.5.0":
-  version: 3.5.0
-  resolution: "@nuxt/vite-builder@npm:3.5.0"
+"@nuxt/vite-builder@npm:3.6.3":
+  version: 3.6.3
+  resolution: "@nuxt/vite-builder@npm:3.6.3"
   dependencies:
-    "@nuxt/kit": 3.5.0
+    "@nuxt/kit": 3.6.3
     "@rollup/plugin-replace": ^5.0.2
     "@vitejs/plugin-vue": ^4.2.3
     "@vitejs/plugin-vue-jsx": ^3.0.1
     autoprefixer: ^10.4.14
     clear: ^0.1.0
+    consola: ^3.2.3
     cssnano: ^6.0.1
     defu: ^6.1.2
-    esbuild: ^0.17.19
+    esbuild: ^0.18.11
     escape-string-regexp: ^5.0.0
     estree-walker: ^3.0.3
-    externality: ^1.0.0
+    externality: ^1.0.2
     fs-extra: ^11.1.1
     get-port-please: ^3.0.1
-    h3: ^1.6.6
+    h3: ^1.7.1
     knitwork: ^1.0.0
-    magic-string: ^0.30.0
-    mlly: ^1.2.1
+    magic-string: ^0.30.1
+    mlly: ^1.4.0
     ohash: ^1.1.2
-    pathe: ^1.1.0
+    pathe: ^1.1.1
     perfect-debounce: ^1.0.0
     pkg-types: ^1.0.3
-    postcss: ^8.4.23
+    postcss: ^8.4.24
     postcss-import: ^15.1.0
     postcss-url: ^10.1.3
-    rollup-plugin-visualizer: ^5.9.0
+    rollup-plugin-visualizer: ^5.9.2
     std-env: ^3.3.3
     strip-literal: ^1.0.1
     ufo: ^1.1.2
-    unplugin: ^1.3.1
-    vite: ~4.3.6
-    vite-node: ^0.31.0
-    vite-plugin-checker: ^0.6.0
+    unplugin: ^1.3.2
+    vite: ~4.3.9
+    vite-node: ^0.33.0
+    vite-plugin-checker: ^0.6.1
     vue-bundle-renderer: ^1.0.3
   peerDependencies:
-    vue: ^3.3.2
-  checksum: 8cce2103d866c8bb2aadc6dadf48a43f3c610d0aa0d8b11ebdd9af011b01937dda096448869efb9d7bde388ec33b7c53f69595f0ccab9fe8215f04c64a6ca9b1
+    vue: ^3.3.4
+  checksum: 36b5e43b71a6aa6eb0b5f297f04bf220a72b1ce51c19b652deae6bb8516107945cccc226f9bbb9ffad76c6f996807bad50653836206a5e89451782b5c90e9825
   languageName: node
   linkType: hard
 
@@ -10394,9 +10450,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/plugin-commonjs@npm:^24.1.0":
-  version: 24.1.0
-  resolution: "@rollup/plugin-commonjs@npm:24.1.0"
+"@rollup/plugin-commonjs@npm:^25.0.2":
+  version: 25.0.3
+  resolution: "@rollup/plugin-commonjs@npm:25.0.3"
   dependencies:
     "@rollup/pluginutils": ^5.0.1
     commondir: ^1.0.1
@@ -10409,7 +10465,7 @@ __metadata:
   peerDependenciesMeta:
     rollup:
       optional: true
-  checksum: 42faafc9bc8e04d75c86bb50d693ebb9c5eee19bf9ab3c09780b872547d12ff5ea85cfec7da75f5176d0aa4b5233101f667f44b85b331450a7bb14c95180852e
+  checksum: 1b94218cc80364d218e5d526e9199620151fe8ac489abc293a75741af5ffb2bfa90da06cffc4a1b9a4091a6f8cda63a6f7c557881b12188f9e0a05f08c147fd0
   languageName: node
   linkType: hard
 
@@ -10478,9 +10534,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/plugin-node-resolve@npm:^15.0.2":
-  version: 15.0.2
-  resolution: "@rollup/plugin-node-resolve@npm:15.0.2"
+"@rollup/plugin-node-resolve@npm:^15.1.0":
+  version: 15.1.0
+  resolution: "@rollup/plugin-node-resolve@npm:15.1.0"
   dependencies:
     "@rollup/pluginutils": ^5.0.1
     "@types/resolve": 1.20.2
@@ -10493,7 +10549,7 @@ __metadata:
   peerDependenciesMeta:
     rollup:
       optional: true
-  checksum: 328eafee06ff967a36441b55e77fbd0d4f599d256e5d1977800ee71915846c46bc1b6185df35c7b512ad2b4023b05b65a332be77b8b00b9d8a20f87d056b8166
+  checksum: 83617cdbb90cb780251e8b16dc1671e35bde90b8d4d30e008aefe706b5b643057f6299bdd3226b2a30bf5e4f807a880169de3faa47b9f2ba38d39f294f85f951
   languageName: node
   linkType: hard
 
@@ -10528,7 +10584,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/plugin-terser@npm:^0.4.2":
+"@rollup/plugin-terser@npm:^0.4.3":
   version: 0.4.3
   resolution: "@rollup/plugin-terser@npm:0.4.3"
   dependencies:
@@ -10934,7 +10990,7 @@ __metadata:
     graphql-tag: ^2.12.6
     lodash-es: ^4.17.21
     nanoevents: ^8.0.0
-    nuxt: ^3.5.0
+    nuxt: ^3.6.3
     portal-vue: ^3.0.0
     postcss: ^8.4.18
     postcss-custom-properties: ^12.1.9
@@ -16205,13 +16261,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@unhead/dom@npm:1.1.26":
-  version: 1.1.26
-  resolution: "@unhead/dom@npm:1.1.26"
+"@unhead/dom@npm:1.1.30":
+  version: 1.1.30
+  resolution: "@unhead/dom@npm:1.1.30"
   dependencies:
-    "@unhead/schema": 1.1.26
-    "@unhead/shared": 1.1.26
-  checksum: 743fb9065270ae132283cb7dc43f96a424df10ecca230e60bc76658e61d73decd1dee5d66a9dfc8e134f5951b3c2a986064e41dad3bab41882d50700d3d39e10
+    "@unhead/schema": 1.1.30
+    "@unhead/shared": 1.1.30
+  checksum: 420ba1aa8e5b9532f1d2ca29e8a5af902cb6acfe904866e0d6d4bc374829e27cb964f1586f64eecec067bd5fdfc53c8750f8ab14b0243ae9fd3ad2d8fac22067
   languageName: node
   linkType: hard
 
@@ -16225,13 +16281,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@unhead/schema@npm:1.1.26":
-  version: 1.1.26
-  resolution: "@unhead/schema@npm:1.1.26"
+"@unhead/schema@npm:1.1.30":
+  version: 1.1.30
+  resolution: "@unhead/schema@npm:1.1.30"
   dependencies:
     hookable: ^5.5.3
-    zhead: ^2.0.4
-  checksum: a4211a1575fc3ef2359dbe28d3f4c1187c5bf43abcb47278a1bd873c1e1c71fb46fad4b39ef1b7cb9ceec1b205858f59eda321ec65c1072d47092688f595a3ff
+    zhead: ^2.0.9
+  checksum: 2e127cdeaf679aba376074ca5d842583c6494285146fa92eacd80625f3ff4853dd1867046cbe91e23d76d0bbd7a12493ae6e3cd43e3503d29aaff7da6c777db0
   languageName: node
   linkType: hard
 
@@ -16244,12 +16300,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@unhead/shared@npm:1.1.26":
-  version: 1.1.26
-  resolution: "@unhead/shared@npm:1.1.26"
+"@unhead/shared@npm:1.1.30":
+  version: 1.1.30
+  resolution: "@unhead/shared@npm:1.1.30"
   dependencies:
-    "@unhead/schema": 1.1.26
-  checksum: 0f8c20c3169ac77ff778b1284f81563bdc1a5edb9839a5a85426bc4f5f46d1a0684b7a10d743f01a38f9918bf8ff70d428aadd12c1740df2103e821705f110b4
+    "@unhead/schema": 1.1.30
+  checksum: 05c52d7a989340afbd2977068f1bdfc35b92e77f89014da1a3e9099ae4fc832d9ec9e4a7287eb3c681285c7493fa843a460711c6e50917c8ce84308b21cc3e66
   languageName: node
   linkType: hard
 
@@ -16263,13 +16319,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@unhead/ssr@npm:^1.1.26":
-  version: 1.1.26
-  resolution: "@unhead/ssr@npm:1.1.26"
+"@unhead/ssr@npm:^1.1.30":
+  version: 1.1.30
+  resolution: "@unhead/ssr@npm:1.1.30"
   dependencies:
-    "@unhead/schema": 1.1.26
-    "@unhead/shared": 1.1.26
-  checksum: 04a79fd0eb4ab552413e7a8b7fc64dccff29ee0f90a36ef8456f4d4c16a4170a27bfd5648d93990bab400eabf691a22357e9e8e81881b92e5ec5ac8ce9c5225e
+    "@unhead/schema": 1.1.30
+    "@unhead/shared": 1.1.30
+  checksum: 527399ab6bca697bac87c9f2a249ede492c0349b6da56876bdb731511b1f8ca04ba139c7639d87384f5dc2c9818a3abfba51369f17205a761201e5306bab1a6e
   languageName: node
   linkType: hard
 
@@ -16287,17 +16343,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@unhead/vue@npm:^1.1.26":
-  version: 1.1.26
-  resolution: "@unhead/vue@npm:1.1.26"
+"@unhead/vue@npm:^1.1.30":
+  version: 1.1.30
+  resolution: "@unhead/vue@npm:1.1.30"
   dependencies:
-    "@unhead/schema": 1.1.26
-    "@unhead/shared": 1.1.26
+    "@unhead/schema": 1.1.30
+    "@unhead/shared": 1.1.30
     hookable: ^5.5.3
-    unhead: 1.1.26
+    unhead: 1.1.30
   peerDependencies:
     vue: ">=2.7 || >=3"
-  checksum: a10db1dbd6dfdd9079807235b53c8a008033cdc7ec57ad838853ce55a1d18f4e551c0026b91088a8a609f44dce8cf3041381ea576144b79db97eeb5547a32c90
+  checksum: 48ba33a384d0cc7bd7309145c0823e0e45c5ec971968c4a9aa90ea5e29decd68ffded2f0e220d3be4d6147a9c1a527a984df239025d20b6bbf3923e51cc76003
   languageName: node
   linkType: hard
 
@@ -16904,15 +16960,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/compiler-core@npm:3.3.3":
-  version: 3.3.3
-  resolution: "@vue/compiler-core@npm:3.3.3"
+"@vue/compiler-core@npm:3.3.4":
+  version: 3.3.4
+  resolution: "@vue/compiler-core@npm:3.3.4"
   dependencies:
     "@babel/parser": ^7.21.3
-    "@vue/shared": 3.3.3
+    "@vue/shared": 3.3.4
     estree-walker: ^2.0.2
     source-map-js: ^1.0.2
-  checksum: c17d12fb20a269c8cf964d1c6160268dc365fc251d519995235eb7e17082380878c57b40cc622ffdb5456a142ee356bdd2f8fea589744b5fdfef7fad88fef2a1
+  checksum: 5437942ea6575b316c9cd84f4f128a44939713da8b6958060e152c599e6d771d5db056c398d7574ee706ff8092e0d99ac4f14e7eef8712a8dd923d2323201b9e
   languageName: node
   linkType: hard
 
@@ -16946,13 +17002,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/compiler-dom@npm:3.3.3":
-  version: 3.3.3
-  resolution: "@vue/compiler-dom@npm:3.3.3"
+"@vue/compiler-dom@npm:3.3.4":
+  version: 3.3.4
+  resolution: "@vue/compiler-dom@npm:3.3.4"
   dependencies:
-    "@vue/compiler-core": 3.3.3
-    "@vue/shared": 3.3.3
-  checksum: af9de719748533fea8facf90a5fc78ccebb2a74fdf8e050f347eeca82a2909d8957d6be2debf86b90dc886e062feb9ae7f7b1b359bb5b175b3a867c4ffc8ac72
+    "@vue/compiler-core": 3.3.4
+    "@vue/shared": 3.3.4
+  checksum: 1c2ac0c89de8eef7be1c568d57504e6245adaaec40c2c4d9717bc231ca10bf682d918a3b358d24c786eeaf8e0d7eb8a65f57d9044775a304783fde1d069a1896
   languageName: node
   linkType: hard
 
@@ -16995,21 +17051,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/compiler-sfc@npm:3.3.3":
-  version: 3.3.3
-  resolution: "@vue/compiler-sfc@npm:3.3.3"
+"@vue/compiler-sfc@npm:3.3.4":
+  version: 3.3.4
+  resolution: "@vue/compiler-sfc@npm:3.3.4"
   dependencies:
     "@babel/parser": ^7.20.15
-    "@vue/compiler-core": 3.3.3
-    "@vue/compiler-dom": 3.3.3
-    "@vue/compiler-ssr": 3.3.3
-    "@vue/reactivity-transform": 3.3.3
-    "@vue/shared": 3.3.3
+    "@vue/compiler-core": 3.3.4
+    "@vue/compiler-dom": 3.3.4
+    "@vue/compiler-ssr": 3.3.4
+    "@vue/reactivity-transform": 3.3.4
+    "@vue/shared": 3.3.4
     estree-walker: ^2.0.2
     magic-string: ^0.30.0
     postcss: ^8.1.10
     source-map-js: ^1.0.2
-  checksum: 1a07eb8b49ff0e4d5ca56f95cb259ee83f755cab74a7314b19b8dec188daf6e2e4973bd62cbc8aac7b53c7088a265fc32c4edbdf36aaa3927a9055b5bbc2f4de
+  checksum: 0a0adfdd3e812f528e25e4b3bbf14b2296b719a8aac609eca42035295527cc253b918a552dc15218e917efef26b7ca94054dc8784a1a18c06c3d4bb4d18ab8b9
   languageName: node
   linkType: hard
 
@@ -17079,13 +17135,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/compiler-ssr@npm:3.3.3":
-  version: 3.3.3
-  resolution: "@vue/compiler-ssr@npm:3.3.3"
+"@vue/compiler-ssr@npm:3.3.4":
+  version: 3.3.4
+  resolution: "@vue/compiler-ssr@npm:3.3.4"
   dependencies:
-    "@vue/compiler-dom": 3.3.3
-    "@vue/shared": 3.3.3
-  checksum: 550816a923cd9ddf2b449708f366ea58b74d6eca593ab18112cb35c35f027a27b9de24de738c4a8fd76a076e0de57dd47eddee5a0691765d44d5c1ac8a235332
+    "@vue/compiler-dom": 3.3.4
+    "@vue/shared": 3.3.4
+  checksum: 5d1875d55ea864080dd90e5d81a29f93308e312faf00163db5b391b38c2fe799fd3eb58955823dc632f2f8bdd271a4534cc0020646b7f82717be1a8d30dc16e7
   languageName: node
   linkType: hard
 
@@ -17188,16 +17244,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/reactivity-transform@npm:3.3.3":
-  version: 3.3.3
-  resolution: "@vue/reactivity-transform@npm:3.3.3"
+"@vue/reactivity-transform@npm:3.3.4":
+  version: 3.3.4
+  resolution: "@vue/reactivity-transform@npm:3.3.4"
   dependencies:
     "@babel/parser": ^7.20.15
-    "@vue/compiler-core": 3.3.3
-    "@vue/shared": 3.3.3
+    "@vue/compiler-core": 3.3.4
+    "@vue/shared": 3.3.4
     estree-walker: ^2.0.2
     magic-string: ^0.30.0
-  checksum: 6764538d7956a31fc514d5df368413fdef10ee5073d8d75f81b0fb286a227a25e5158e73a4506555893cd6239926d247abb0d574a8960e0b55b2d6d42e8ec2e0
+  checksum: b425e78b2084ac7037887fbe012dcad5e5963ac9714ae15a04fda1c6766ec8c53ef231de1cfdc4d3cf46bd5d84bfec8ebdccf48da4ff5ee2f4b5084e54f0a1b1
   languageName: node
   linkType: hard
 
@@ -17210,12 +17266,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/reactivity@npm:3.3.3":
-  version: 3.3.3
-  resolution: "@vue/reactivity@npm:3.3.3"
+"@vue/reactivity@npm:3.3.4":
+  version: 3.3.4
+  resolution: "@vue/reactivity@npm:3.3.4"
   dependencies:
-    "@vue/shared": 3.3.3
-  checksum: 0b21832839502d97d6a7182150b66733edb6f38d919af867f181de7e36297b298f499cd546ed633ab08797a98ed234c5064241cee41239e7e2858adc225a49ac
+    "@vue/shared": 3.3.4
+  checksum: 81c3d0c587d23656a57a7a31afb51357274f6512b51baffc67cda183b2361a7e65e646029c26a8bc28587f26b65bba808dcd93cdd3bacab48d2b99d11ad0ec97
   languageName: node
   linkType: hard
 
@@ -17247,13 +17303,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/runtime-core@npm:3.3.3":
-  version: 3.3.3
-  resolution: "@vue/runtime-core@npm:3.3.3"
+"@vue/runtime-core@npm:3.3.4":
+  version: 3.3.4
+  resolution: "@vue/runtime-core@npm:3.3.4"
   dependencies:
-    "@vue/reactivity": 3.3.3
-    "@vue/shared": 3.3.3
-  checksum: 649e1a0b8ef9a08f1cee63b3a9594a34613d371546937a6ca1356cfc59214cc24c93c3ff2e386a671624c8b87d09bae9d401366d35f8d6bc24b447b501ba5e91
+    "@vue/reactivity": 3.3.4
+    "@vue/shared": 3.3.4
+  checksum: d402da51269658cba5d857d65fbe322121160bcb1a6fcf03601d5183705e92505c6e90418f491a331ca3e27628f457a6ca7158b9add25f5b0cf5cf53664b8011
   languageName: node
   linkType: hard
 
@@ -17268,14 +17324,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/runtime-dom@npm:3.3.3":
-  version: 3.3.3
-  resolution: "@vue/runtime-dom@npm:3.3.3"
+"@vue/runtime-dom@npm:3.3.4":
+  version: 3.3.4
+  resolution: "@vue/runtime-dom@npm:3.3.4"
   dependencies:
-    "@vue/runtime-core": 3.3.3
-    "@vue/shared": 3.3.3
+    "@vue/runtime-core": 3.3.4
+    "@vue/shared": 3.3.4
     csstype: ^3.1.1
-  checksum: 4553fb1ceb2c63b5232711769192ecff936af91dba06328cbeb43bc4db6aadb97edb34aceff884de4f4c01ee1fa49010ab6c610adf96b59742d99b3b75a76e45
+  checksum: dac9ada7f6128bcccc031fe5c25d00db94ffb7c011fcb70bada22fa4d889ff842eeb139ab9304bcc52cb5ae9030911a52cb3510b691bb190bbe5fab680b4411a
   languageName: node
   linkType: hard
 
@@ -17291,15 +17347,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/server-renderer@npm:3.3.3":
-  version: 3.3.3
-  resolution: "@vue/server-renderer@npm:3.3.3"
+"@vue/server-renderer@npm:3.3.4":
+  version: 3.3.4
+  resolution: "@vue/server-renderer@npm:3.3.4"
   dependencies:
-    "@vue/compiler-ssr": 3.3.3
-    "@vue/shared": 3.3.3
+    "@vue/compiler-ssr": 3.3.4
+    "@vue/shared": 3.3.4
   peerDependencies:
-    vue: 3.3.3
-  checksum: 8704f6ca89b0d3751ccec6f029481304498500541460829c9c989713998968738e4b2a91bbcbb994ea8dbfd0f15215f5ec11139629033d505c16c71d53d320df
+    vue: 3.3.4
+  checksum: e8598ed1a44df70edaea0ad6786aea6443b9b3d9266249eec5690401859d72d45a1e29ba3eef20e37a95f020abd5e763088b79070ee848af436a4390a253a37a
   languageName: node
   linkType: hard
 
@@ -17331,10 +17387,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/shared@npm:3.3.3, @vue/shared@npm:^3.3.2":
-  version: 3.3.3
-  resolution: "@vue/shared@npm:3.3.3"
-  checksum: bcd997ff052b5a56c998e4545ba174aa4b3e170b4f3914bc3b6b73ffc00cd8a6745f4a84b78f1519b6ccb936c031a9d2bd44064a3ff6eba64311f7ef637208c5
+"@vue/shared@npm:3.3.4, @vue/shared@npm:^3.3.4":
+  version: 3.3.4
+  resolution: "@vue/shared@npm:3.3.4"
+  checksum: 12fe53ff816bfa29ea53f89212067a86512c626b8d30149ff28b36705820f6150e1fb4e4e46897ad9eddb1d1cfc02d8941053939910eed69a905f7a5509baabe
   languageName: node
   linkType: hard
 
@@ -17938,6 +17994,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"acorn@npm:8.10.0, acorn@npm:^8.9.0":
+  version: 8.10.0
+  resolution: "acorn@npm:8.10.0"
+  bin:
+    acorn: bin/acorn
+  checksum: 538ba38af0cc9e5ef983aee196c4b8b4d87c0c94532334fa7e065b2c8a1f85863467bb774231aae91613fcda5e68740c15d97b1967ae3394d20faddddd8af61d
+  languageName: node
+  linkType: hard
+
 "acorn@npm:^7.0.0, acorn@npm:^7.1.1":
   version: 7.4.1
   resolution: "acorn@npm:7.4.1"
@@ -18108,7 +18173,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ansi-escapes@npm:^4.2.1, ansi-escapes@npm:^4.3.0, ansi-escapes@npm:^4.3.1, ansi-escapes@npm:^4.3.2":
+"ansi-escapes@npm:^4.2.1, ansi-escapes@npm:^4.3.0, ansi-escapes@npm:^4.3.1":
   version: 4.3.2
   resolution: "ansi-escapes@npm:4.3.2"
   dependencies:
@@ -19929,6 +19994,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"c12@npm:^1.4.2":
+  version: 1.4.2
+  resolution: "c12@npm:1.4.2"
+  dependencies:
+    chokidar: ^3.5.3
+    defu: ^6.1.2
+    dotenv: ^16.3.1
+    giget: ^1.1.2
+    jiti: ^1.18.2
+    mlly: ^1.4.0
+    ohash: ^1.1.2
+    pathe: ^1.1.1
+    perfect-debounce: ^1.0.0
+    pkg-types: ^1.0.3
+    rc9: ^2.1.1
+  checksum: d6ca2664bbdcaa6a4c078a5cf226d1736a880f3722271c948bd7130f5ac06adb77f9f3b00207f6e574e80ad1f00f33097054d8933f2d48635998e0b15ee91105
+  languageName: node
+  linkType: hard
+
 "cac@npm:^6.7.14":
   version: 6.7.14
   resolution: "cac@npm:6.7.14"
@@ -20251,6 +20335,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"chalk@npm:^5.3.0":
+  version: 5.3.0
+  resolution: "chalk@npm:5.3.0"
+  checksum: 623922e077b7d1e9dedaea6f8b9e9352921f8ae3afe739132e0e00c275971bdd331268183b2628cf4ab1727c45ea1f28d7e24ac23ce1db1eb653c414ca8a5a80
+  languageName: node
+  linkType: hard
+
 "change-case-all@npm:1.0.14":
   version: 1.0.14
   resolution: "change-case-all@npm:1.0.14"
@@ -21168,13 +21259,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"consola@npm:^3.0.1, consola@npm:^3.1.0":
+"consola@npm:^3.1.0":
   version: 3.1.0
   resolution: "consola@npm:3.1.0"
   checksum: b4b16b0ff6a0645fb1b820cf89dd56c8601b9ae0e2c472652bce2f5d99932ed5b38ef7ad2cfa77f4534cd6264d99cf5cf9c3c888e98cc25fbd3c87d31c824975
   languageName: node
   linkType: hard
 
+"consola@npm:^3.2.2, consola@npm:^3.2.3":
+  version: 3.2.3
+  resolution: "consola@npm:3.2.3"
+  checksum: 32ec70e177dd2385c42e38078958cc7397be91db21af90c6f9faa0b16168b49b1c61d689338604bbb2d64370b9347a35f42a9197663a913d3a405bb0ce728499
+  languageName: node
+  linkType: hard
+
 "console-control-strings@npm:^1.0.0, console-control-strings@npm:^1.1.0, console-control-strings@npm:~1.1.0":
   version: 1.1.0
   resolution: "console-control-strings@npm:1.1.0"
@@ -22565,6 +22663,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"destr@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "destr@npm:2.0.0"
+  checksum: 5439cfc8e4b207a4c77cce89b3490dcb68b8cbea1ea5171958b89ae1a814a8f988e54e259d9dae8ebee64cfc9d658497e96d0a8905b2d243cf49bda36e578850
+  languageName: node
+  linkType: hard
+
 "destroy@npm:1.2.0, destroy@npm:^1.0.4":
   version: 1.2.0
   resolution: "destroy@npm:1.2.0"
@@ -22656,10 +22761,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"devalue@npm:^4.3.1":
-  version: 4.3.1
-  resolution: "devalue@npm:4.3.1"
-  checksum: c2bd0858dbc382fe2c0ab980b3e952b3b8f4b32d355bba63f83dc156b4b14fd5939b667379a296261d6cd66dd750b9495cd96aa5cf3e506ea9f783a2ad3eee03
+"devalue@npm:^4.3.2":
+  version: 4.3.2
+  resolution: "devalue@npm:4.3.2"
+  checksum: 034530e3910a096e528ca6481cd80ab2a21f4a5b813fb896d421eadf52dc969dfbbd5677aa06d28a6448a0f2f7e7d91d9ed88cd9aaa497f4b34e427d80c2a8a5
   languageName: node
   linkType: hard
 
@@ -22980,6 +23085,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dotenv@npm:^16.3.1":
+  version: 16.3.1
+  resolution: "dotenv@npm:16.3.1"
+  checksum: 15d75e7279018f4bafd0ee9706593dd14455ddb71b3bcba9c52574460b7ccaf67d5cf8b2c08a5af1a9da6db36c956a04a1192b101ee102a3e0cf8817bbcf3dfd
+  languageName: node
+  linkType: hard
+
 "dotenv@npm:^8.0.0, dotenv@npm:^8.2.0":
   version: 8.6.0
   resolution: "dotenv@npm:8.6.0"
@@ -23251,6 +23363,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"enhanced-resolve@npm:^5.14.1":
+  version: 5.15.0
+  resolution: "enhanced-resolve@npm:5.15.0"
+  dependencies:
+    graceful-fs: ^4.2.4
+    tapable: ^2.2.0
+  checksum: fbd8cdc9263be71cc737aa8a7d6c57b43d6aa38f6cc75dde6fcd3598a130cc465f979d2f4d01bb3bf475acb43817749c79f8eef9be048683602ca91ab52e4f11
+  languageName: node
+  linkType: hard
+
 "entities@npm:^1.1.1":
   version: 1.1.2
   resolution: "entities@npm:1.1.2"
@@ -24110,32 +24232,32 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild@npm:^0.17.19":
-  version: 0.17.19
-  resolution: "esbuild@npm:0.17.19"
+"esbuild@npm:^0.18.10, esbuild@npm:^0.18.11":
+  version: 0.18.13
+  resolution: "esbuild@npm:0.18.13"
   dependencies:
-    "@esbuild/android-arm": 0.17.19
-    "@esbuild/android-arm64": 0.17.19
-    "@esbuild/android-x64": 0.17.19
-    "@esbuild/darwin-arm64": 0.17.19
-    "@esbuild/darwin-x64": 0.17.19
-    "@esbuild/freebsd-arm64": 0.17.19
-    "@esbuild/freebsd-x64": 0.17.19
-    "@esbuild/linux-arm": 0.17.19
-    "@esbuild/linux-arm64": 0.17.19
-    "@esbuild/linux-ia32": 0.17.19
-    "@esbuild/linux-loong64": 0.17.19
-    "@esbuild/linux-mips64el": 0.17.19
-    "@esbuild/linux-ppc64": 0.17.19
-    "@esbuild/linux-riscv64": 0.17.19
-    "@esbuild/linux-s390x": 0.17.19
-    "@esbuild/linux-x64": 0.17.19
-    "@esbuild/netbsd-x64": 0.17.19
-    "@esbuild/openbsd-x64": 0.17.19
-    "@esbuild/sunos-x64": 0.17.19
-    "@esbuild/win32-arm64": 0.17.19
-    "@esbuild/win32-ia32": 0.17.19
-    "@esbuild/win32-x64": 0.17.19
+    "@esbuild/android-arm": 0.18.13
+    "@esbuild/android-arm64": 0.18.13
+    "@esbuild/android-x64": 0.18.13
+    "@esbuild/darwin-arm64": 0.18.13
+    "@esbuild/darwin-x64": 0.18.13
+    "@esbuild/freebsd-arm64": 0.18.13
+    "@esbuild/freebsd-x64": 0.18.13
+    "@esbuild/linux-arm": 0.18.13
+    "@esbuild/linux-arm64": 0.18.13
+    "@esbuild/linux-ia32": 0.18.13
+    "@esbuild/linux-loong64": 0.18.13
+    "@esbuild/linux-mips64el": 0.18.13
+    "@esbuild/linux-ppc64": 0.18.13
+    "@esbuild/linux-riscv64": 0.18.13
+    "@esbuild/linux-s390x": 0.18.13
+    "@esbuild/linux-x64": 0.18.13
+    "@esbuild/netbsd-x64": 0.18.13
+    "@esbuild/openbsd-x64": 0.18.13
+    "@esbuild/sunos-x64": 0.18.13
+    "@esbuild/win32-arm64": 0.18.13
+    "@esbuild/win32-ia32": 0.18.13
+    "@esbuild/win32-x64": 0.18.13
   dependenciesMeta:
     "@esbuild/android-arm":
       optional: true
@@ -24183,7 +24305,7 @@ __metadata:
       optional: true
   bin:
     esbuild: bin/esbuild
-  checksum: ac11b1a5a6008e4e37ccffbd6c2c054746fc58d0ed4a2f9ee643bd030cfcea9a33a235087bc777def8420f2eaafb3486e76adb7bdb7241a9143b43a69a10afd8
+  checksum: 6512b7e186cffb4546f3508f1e2d1dd27eb43a8a8a79d4ea7eb34ae3dbdc647679ae96b29c54a4951c355ee3168e8ad9c128cbfc033154b0849e269276d5bc9c
   languageName: node
   linkType: hard
 
@@ -24911,6 +25033,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"externality@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "externality@npm:1.0.2"
+  dependencies:
+    enhanced-resolve: ^5.14.1
+    mlly: ^1.3.0
+    pathe: ^1.1.1
+    ufo: ^1.1.2
+  checksum: f189cac0849813063388bb340c3d576fa5411c0f3db9fa31874ca1437e0c4275b54f8f190c5426873f220875f3e6e473223a689fb004b51c555c6d29b66069d5
+  languageName: node
+  linkType: hard
+
 "extract-files@npm:^11.0.0":
   version: 11.0.0
   resolution: "extract-files@npm:11.0.0"
@@ -25021,6 +25155,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fast-glob@npm:^3.3.0":
+  version: 3.3.0
+  resolution: "fast-glob@npm:3.3.0"
+  dependencies:
+    "@nodelib/fs.stat": ^2.0.2
+    "@nodelib/fs.walk": ^1.2.3
+    glob-parent: ^5.1.2
+    merge2: ^1.3.0
+    micromatch: ^4.0.4
+  checksum: 20df62be28eb5426fe8e40e0d05601a63b1daceb7c3d87534afcad91bdcf1e4b1743cf2d5247d6e225b120b46df0b9053a032b2691ba34ee121e033acd81f547
+  languageName: node
+  linkType: hard
+
 "fast-json-stable-stringify@npm:^2.0.0, fast-json-stable-stringify@npm:^2.1.0":
   version: 2.1.0
   resolution: "fast-json-stable-stringify@npm:2.1.0"
@@ -26348,6 +26495,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"globby@npm:^13.2.0, globby@npm:^13.2.2":
+  version: 13.2.2
+  resolution: "globby@npm:13.2.2"
+  dependencies:
+    dir-glob: ^3.0.1
+    fast-glob: ^3.3.0
+    ignore: ^5.2.4
+    merge2: ^1.4.1
+    slash: ^4.0.0
+  checksum: f3d84ced58a901b4fcc29c846983108c426631fe47e94872868b65565495f7bee7b3defd68923bd480582771fd4bbe819217803a164a618ad76f1d22f666f41e
+  languageName: node
+  linkType: hard
+
 "globby@npm:^6.1.0":
   version: 6.1.0
   resolution: "globby@npm:6.1.0"
@@ -26586,7 +26746,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"h3@npm:^1.6.4, h3@npm:^1.6.6":
+"h3@npm:^1.6.6":
   version: 1.6.6
   resolution: "h3@npm:1.6.6"
   dependencies:
@@ -26601,6 +26761,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"h3@npm:^1.7.1":
+  version: 1.7.1
+  resolution: "h3@npm:1.7.1"
+  dependencies:
+    cookie-es: ^1.0.0
+    defu: ^6.1.2
+    destr: ^2.0.0
+    iron-webcrypto: ^0.7.0
+    radix3: ^1.0.1
+    ufo: ^1.1.2
+    uncrypto: ^0.1.3
+  checksum: faf5fc0faea79a939bc91f873a2bd30c4d752011abd51b2c05ddb86ff4606620f017fc3a1b7110417921729d105dc758f348c3cbd5b0c8fc3acdcc00918c02f2
+  languageName: node
+  linkType: hard
+
 "handle-thing@npm:^2.0.0":
   version: 2.0.1
   resolution: "handle-thing@npm:2.0.1"
@@ -27087,6 +27262,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"http-graceful-shutdown@npm:^3.1.13":
+  version: 3.1.13
+  resolution: "http-graceful-shutdown@npm:3.1.13"
+  dependencies:
+    debug: ^4.3.4
+  checksum: 2514c5927b95f99da76fbc86f2be18ebfbc3a96aaa7a0e89603f9a98851a55fec74141de081d1739b6b9dc7cbb1718ef742e79438714835de0c249b9c4e56d8f
+  languageName: node
+  linkType: hard
+
 "http-parser-js@npm:>=0.5.1":
   version: 0.5.6
   resolution: "http-parser-js@npm:0.5.6"
@@ -27503,29 +27687,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"inquirer@npm:^9.1.5":
-  version: 9.2.4
-  resolution: "inquirer@npm:9.2.4"
-  dependencies:
-    ansi-escapes: ^4.3.2
-    chalk: ^5.2.0
-    cli-cursor: ^3.1.0
-    cli-width: ^4.0.0
-    external-editor: ^3.0.3
-    figures: ^5.0.0
-    lodash: ^4.17.21
-    mute-stream: 1.0.0
-    ora: ^5.4.1
-    run-async: ^3.0.0
-    rxjs: ^7.8.1
-    string-width: ^4.2.3
-    strip-ansi: ^6.0.1
-    through: ^2.3.6
-    wrap-ansi: ^6.0.1
-  checksum: bd117dbd0d7ed0ec982d5256600c9bba174ca652aa1fbd8d103bcb31bd3a42ac7ffac7220c31b3be5bb6a09fc089910de0c8c5e0f9f17d36d785cf4928abc570
-  languageName: node
-  linkType: hard
-
 "internal-slot@npm:^1.0.3":
   version: 1.0.3
   resolution: "internal-slot@npm:1.0.3"
@@ -29765,6 +29926,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jiti@npm:^1.19.1":
+  version: 1.19.1
+  resolution: "jiti@npm:1.19.1"
+  bin:
+    jiti: bin/jiti.js
+  checksum: fdf55e315f9e81c04ae902416642062851d92c6cdcc17a59d5d1d35e1a0842e4e79be38da86613c5776fa18c579954542a441b93d1c347a50137dee2e558cbd0
+  languageName: node
+  linkType: hard
+
 "jju@npm:~1.4.0":
   version: 1.4.0
   resolution: "jju@npm:1.4.0"
@@ -31191,6 +31361,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lru-cache@npm:^10.0.0":
+  version: 10.0.0
+  resolution: "lru-cache@npm:10.0.0"
+  checksum: 18f101675fe283bc09cda0ef1e3cc83781aeb8373b439f086f758d1d91b28730950db785999cd060d3c825a8571c03073e8c14512b6655af2188d623031baf50
+  languageName: node
+  linkType: hard
+
 "lru-cache@npm:^4.1.5":
   version: 4.1.5
   resolution: "lru-cache@npm:4.1.5"
@@ -31231,7 +31408,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lru-cache@npm:^9.0.0, lru-cache@npm:^9.1.1":
+"lru-cache@npm:^9.0.0":
   version: 9.1.1
   resolution: "lru-cache@npm:9.1.1"
   checksum: 4d703bb9b66216bbee55ead82a9682820a2b6acbdfca491b235390b1ef1056000a032d56dfb373fdf9ad4492f1fa9d04cc9a05a77f25bd7ce6901d21ad9b68b7
@@ -31322,6 +31499,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"magic-string@npm:^0.30.1":
+  version: 0.30.1
+  resolution: "magic-string@npm:0.30.1"
+  dependencies:
+    "@jridgewell/sourcemap-codec": ^1.4.15
+  checksum: 7bc7e4493e32a77068f3753bf8652d4ab44142122eb7fb9fa871af83bef2cd2c57518a6769701cd5d0379bd624a13bc8c72ca25ac5655b27e5a61adf1fd38db2
+  languageName: node
+  linkType: hard
+
 "make-dir@npm:^2.0.0, make-dir@npm:^2.1.0":
   version: 2.1.0
   resolution: "make-dir@npm:2.1.0"
@@ -32529,6 +32715,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mlly@npm:^1.3.0, mlly@npm:^1.4.0":
+  version: 1.4.0
+  resolution: "mlly@npm:1.4.0"
+  dependencies:
+    acorn: ^8.9.0
+    pathe: ^1.1.1
+    pkg-types: ^1.0.3
+    ufo: ^1.1.2
+  checksum: ebf2e2b5cfb4c6e45e8d0bbe82710952247023f12626cb0997c41b1bb6e57c8b6fc113aa709228ad511382ab0b4eebaab759806be0578093b3635d3e940bd63b
+  languageName: node
+  linkType: hard
+
 "mocha-junit-reporter@npm:^2.0.2":
   version: 2.0.2
   resolution: "mocha-junit-reporter@npm:2.0.2"
@@ -32725,13 +32923,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mute-stream@npm:1.0.0":
-  version: 1.0.0
-  resolution: "mute-stream@npm:1.0.0"
-  checksum: 36fc968b0e9c9c63029d4f9dc63911950a3bdf55c9a87f58d3a266289b67180201cade911e7699f8b2fa596b34c9db43dad37649e3f7fdd13c3bb9edb0017ee7
-  languageName: node
-  linkType: hard
-
 "mv@npm:~2":
   version: 2.1.1
   resolution: "mv@npm:2.1.1"
@@ -32866,75 +33057,78 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nitropack@npm:^2.4.0":
-  version: 2.4.1
-  resolution: "nitropack@npm:2.4.1"
+"nitropack@npm:^2.5.2":
+  version: 2.5.2
+  resolution: "nitropack@npm:2.5.2"
   dependencies:
     "@cloudflare/kv-asset-handler": ^0.3.0
     "@netlify/functions": ^1.6.0
     "@rollup/plugin-alias": ^5.0.0
-    "@rollup/plugin-commonjs": ^24.1.0
+    "@rollup/plugin-commonjs": ^25.0.2
     "@rollup/plugin-inject": ^5.0.3
     "@rollup/plugin-json": ^6.0.0
-    "@rollup/plugin-node-resolve": ^15.0.2
+    "@rollup/plugin-node-resolve": ^15.1.0
     "@rollup/plugin-replace": ^5.0.2
-    "@rollup/plugin-terser": ^0.4.2
+    "@rollup/plugin-terser": ^0.4.3
     "@rollup/plugin-wasm": ^6.1.3
     "@rollup/pluginutils": ^5.0.2
     "@types/http-proxy": ^1.17.11
     "@vercel/nft": ^0.22.6
     archiver: ^5.3.1
-    c12: ^1.4.1
+    c12: ^1.4.2
     chalk: ^5.2.0
     chokidar: ^3.5.3
     citty: ^0.1.1
-    consola: ^3.1.0
+    consola: ^3.2.2
     cookie-es: ^1.0.0
     defu: ^6.1.2
-    destr: ^1.2.2
+    destr: ^2.0.0
     dot-prop: ^7.2.0
-    esbuild: ^0.17.19
+    esbuild: ^0.18.10
     escape-string-regexp: ^5.0.0
     etag: ^1.8.1
     fs-extra: ^11.1.1
-    globby: ^13.1.4
+    globby: ^13.2.0
     gzip-size: ^7.0.0
-    h3: ^1.6.6
+    h3: ^1.7.1
     hookable: ^5.5.3
+    http-graceful-shutdown: ^3.1.13
     http-proxy: ^1.18.1
     is-primitive: ^3.0.1
     jiti: ^1.18.2
     klona: ^2.0.6
     knitwork: ^1.0.0
     listhen: ^1.0.4
+    magic-string: ^0.30.0
     mime: ^3.0.0
-    mlly: ^1.2.1
+    mlly: ^1.4.0
     mri: ^1.2.0
-    node-fetch-native: ^1.1.1
-    ofetch: ^1.0.1
+    node-fetch-native: ^1.2.0
+    ofetch: ^1.1.1
     ohash: ^1.1.2
-    openapi-typescript: ^6.2.4
-    pathe: ^1.1.0
+    openapi-typescript: ^6.2.8
+    pathe: ^1.1.1
     perfect-debounce: ^1.0.0
     pkg-types: ^1.0.3
     pretty-bytes: ^6.1.0
     radix3: ^1.0.1
-    rollup: ^3.21.8
-    rollup-plugin-visualizer: ^5.9.0
+    rollup: ^3.25.3
+    rollup-plugin-visualizer: ^5.9.2
     scule: ^1.0.0
-    semver: ^7.5.1
+    semver: ^7.5.3
     serve-placeholder: ^2.0.1
     serve-static: ^1.15.0
     source-map-support: ^0.5.21
     std-env: ^3.3.3
     ufo: ^1.1.2
-    unenv: ^1.4.1
-    unimport: ^3.0.6
-    unstorage: ^1.6.0
+    uncrypto: ^0.1.3
+    unenv: ^1.5.1
+    unimport: ^3.0.11
+    unstorage: ^1.7.0
   bin:
     nitro: dist/cli.mjs
     nitropack: dist/cli.mjs
-  checksum: 64a33cca84da958e830166bdd04f329f8fa295591da2d3ef3880e099db3813f606d0423bffc0a092abc188188196d658d1eb4f5234b3d5deda1218b2b5cf94a1
+  checksum: f8fe15b4c917efb92482628b0359f2f530a3adc3036fd5bf99fc7c35e81a227e6786b772884dd26d47b6acff540778e355b5bc948eb491be1ccc61ecd20ca8b7
   languageName: node
   linkType: hard
 
@@ -33115,10 +33309,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"node-fetch-native@npm:^1.1.0, node-fetch-native@npm:^1.1.1":
-  version: 1.1.1
-  resolution: "node-fetch-native@npm:1.1.1"
-  checksum: 41fe59179eb94b6ffb25e657e5ed14b4b50e2ba7f6bf5346622970638c8abbf29653b011141c919c6c081979962edd1eb94424a7621412cd78c47a9cd8be1227
+"node-fetch-native@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "node-fetch-native@npm:1.2.0"
+  checksum: f18d775523fc25b9fbec05a1da99cbf40214045bcaca82c8fd949b99148890c3cead4ab1764e26a92af600d14884d846481bcebf82d56815210624f836051a10
   languageName: node
   linkType: hard
 
@@ -33613,9 +33807,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nuxi@npm:3.5.0":
-  version: 3.5.0
-  resolution: "nuxi@npm:3.5.0"
+"nuxi@npm:3.6.3":
+  version: 3.6.3
+  resolution: "nuxi@npm:3.6.3"
   dependencies:
     fsevents: ~2.3.2
   dependenciesMeta:
@@ -33623,7 +33817,7 @@ __metadata:
       optional: true
   bin:
     nuxi: bin/nuxi.mjs
-  checksum: c28253c5b3f45887c2cf29bc091a8c27849678e554b16318b04b798172866a67bf633c6acb3ae6b00e1801c70c84dd5bf9e002606bfef5011fcc8710595e92d2
+  checksum: 9b087ce626ca274f284fccd2abc035ff843a3f620408e5bbeec6e2f745483529c422cb47455836d65e2558b8b2a97b1f5d4b58fc1eae645c3d3d82cd5d6ad3e0
   languageName: node
   linkType: hard
 
@@ -33681,60 +33875,62 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nuxt@npm:^3.5.0":
-  version: 3.5.0
-  resolution: "nuxt@npm:3.5.0"
+"nuxt@npm:^3.6.3":
+  version: 3.6.3
+  resolution: "nuxt@npm:3.6.3"
   dependencies:
     "@nuxt/devalue": ^2.0.2
-    "@nuxt/kit": 3.5.0
-    "@nuxt/schema": 3.5.0
-    "@nuxt/telemetry": ^2.2.0
-    "@nuxt/ui-templates": ^1.1.1
-    "@nuxt/vite-builder": 3.5.0
-    "@unhead/ssr": ^1.1.26
-    "@unhead/vue": ^1.1.26
-    "@vue/shared": ^3.3.2
-    c12: ^1.4.1
+    "@nuxt/kit": 3.6.3
+    "@nuxt/schema": 3.6.3
+    "@nuxt/telemetry": ^2.3.0
+    "@nuxt/ui-templates": ^1.2.0
+    "@nuxt/vite-builder": 3.6.3
+    "@unhead/ssr": ^1.1.30
+    "@unhead/vue": ^1.1.30
+    "@vue/shared": ^3.3.4
+    acorn: 8.10.0
+    c12: ^1.4.2
     chokidar: ^3.5.3
     cookie-es: ^1.0.0
     defu: ^6.1.2
-    destr: ^1.2.2
-    devalue: ^4.3.1
+    destr: ^2.0.0
+    devalue: ^4.3.2
+    esbuild: ^0.18.11
     escape-string-regexp: ^5.0.0
     estree-walker: ^3.0.3
     fs-extra: ^11.1.1
-    globby: ^13.1.4
-    h3: ^1.6.6
+    globby: ^13.2.2
+    h3: ^1.7.1
     hookable: ^5.5.3
-    jiti: ^1.18.2
+    jiti: ^1.19.1
     klona: ^2.0.6
     knitwork: ^1.0.0
     local-pkg: ^0.4.3
-    magic-string: ^0.30.0
-    mlly: ^1.2.1
-    nitropack: ^2.4.0
-    nuxi: 3.5.0
-    nypm: ^0.2.0
-    ofetch: ^1.0.1
+    magic-string: ^0.30.1
+    mlly: ^1.4.0
+    nitropack: ^2.5.2
+    nuxi: 3.6.3
+    nypm: ^0.2.2
+    ofetch: ^1.1.1
     ohash: ^1.1.2
-    pathe: ^1.1.0
+    pathe: ^1.1.1
     perfect-debounce: ^1.0.0
     prompts: ^2.4.2
     scule: ^1.0.0
     strip-literal: ^1.0.1
     ufo: ^1.1.2
     ultrahtml: ^1.2.0
-    uncrypto: ^0.1.2
-    unctx: ^2.3.0
-    unenv: ^1.4.1
-    unimport: ^3.0.6
-    unplugin: ^1.3.1
+    uncrypto: ^0.1.3
+    unctx: ^2.3.1
+    unenv: ^1.5.1
+    unimport: ^3.0.14
+    unplugin: ^1.3.2
     unplugin-vue-router: ^0.6.4
     untyped: ^1.3.2
-    vue: ^3.3.2
+    vue: ^3.3.4
     vue-bundle-renderer: ^1.0.3
     vue-devtools-stub: ^0.1.0
-    vue-router: ^4.2.0
+    vue-router: ^4.2.4
   peerDependencies:
     "@parcel/watcher": ^2.1.0
     "@types/node": ^14.18.0 || >=16.10.0
@@ -33744,7 +33940,7 @@ __metadata:
   bin:
     nuxi: bin/nuxt.mjs
     nuxt: bin/nuxt.mjs
-  checksum: c0c866de0043e67a75ee53fd364ecbbd45dfe9699d1ecf2d2605abeac2582db0b945731f3a7fdec05824dcbe0fce8faf829fe644775a374515234d61d066cfd4
+  checksum: 47d6a461c2e53375bdcb0c6fc50050439131841101760fb529562e6ca25aae68231709d4bf7031acfefeaf7a8c0b1c0e6b02bad6feb9ac1554c0ed7b26cba45c
   languageName: node
   linkType: hard
 
@@ -33792,12 +33988,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nypm@npm:^0.2.0":
-  version: 0.2.0
-  resolution: "nypm@npm:0.2.0"
+"nypm@npm:^0.2.2":
+  version: 0.2.2
+  resolution: "nypm@npm:0.2.2"
   dependencies:
     execa: ^7.1.1
-  checksum: f5a15f1cd881d657110f8c01117ca2c7f751064d67d7fd8b6aa9a53b39bb071d9cc9680519a8c0cb1b1fb9a8c6f6ae052d481e16c6cd42ee3fb4369c9a931183
+  checksum: 385be2d8b8fa1c8e047d356123a42ba26c21843f662cfb62202aeab54f4d2e6a74e5c2ff77aa9a916fc31f8a1efbd049814c927fc7f8380574a6799513e8aa18
   languageName: node
   linkType: hard
 
@@ -33952,6 +34148,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ofetch@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "ofetch@npm:1.1.1"
+  dependencies:
+    destr: ^2.0.0
+    node-fetch-native: ^1.2.0
+    ufo: ^1.1.2
+  checksum: 93d3e10f1ebcc0f1da69ee9cfd38b2f8818ce849ec3b6bf803351a6175adf6a5565cb130b7dcabd3a639bfe27589f5f84ac0ee4fd294855567d879a0e1f38484
+  languageName: node
+  linkType: hard
+
 "ohash@npm:^1.0.0":
   version: 1.0.0
   resolution: "ohash@npm:1.0.0"
@@ -34080,19 +34287,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"openapi-typescript@npm:^6.2.4":
-  version: 6.2.4
-  resolution: "openapi-typescript@npm:6.2.4"
+"openapi-typescript@npm:^6.2.8":
+  version: 6.3.4
+  resolution: "openapi-typescript@npm:6.3.4"
   dependencies:
     ansi-colors: ^4.1.3
-    fast-glob: ^3.2.12
+    fast-glob: ^3.3.0
     js-yaml: ^4.1.0
-    supports-color: ^9.3.1
-    undici: ^5.22.0
+    supports-color: ^9.4.0
+    undici: ^5.22.1
     yargs-parser: ^21.1.1
   bin:
     openapi-typescript: bin/cli.js
-  checksum: 67add8f2b1193f609fb222e908b80eaea4e193da7db252db259f8748717fd22db30aedd20273de1cfb2a07fc03fb2e09ec2de31ad7218d9ca95f06dc97c1136f
+  checksum: f4ad831487aab3e6600e45dd1b531431ae3c4a78017f6caf27cc369d3239c99b2d086a6756702cefc97f86876e06a5293e9f995c7b0a094ae4ea9b1fd411bc18
   languageName: node
   linkType: hard
 
@@ -34801,6 +35008,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pathe@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "pathe@npm:1.1.1"
+  checksum: 34ab3da2e5aa832ebc6a330ffe3f73d7ba8aec6e899b53b8ec4f4018de08e40742802deb12cf5add9c73b7bf719b62c0778246bd376ca62b0fb23e0dde44b759
+  languageName: node
+  linkType: hard
+
 "pathval@npm:^1.1.1":
   version: 1.1.1
   resolution: "pathval@npm:1.1.1"
@@ -36292,6 +36506,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss@npm:^8.4.24":
+  version: 8.4.26
+  resolution: "postcss@npm:8.4.26"
+  dependencies:
+    nanoid: ^3.3.6
+    picocolors: ^1.0.0
+    source-map-js: ^1.0.2
+  checksum: 1cf08ee10d58cbe98f94bf12ac49a5e5ed1588507d333d2642aacc24369ca987274e1f60ff4cbf0081f70d2ab18a5cd3a4a273f188d835b8e7f3ba381b184e57
+  languageName: node
+  linkType: hard
+
 "postgres-array@npm:~2.0.0":
   version: 2.0.0
   resolution: "postgres-array@npm:2.0.0"
@@ -37371,6 +37596,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rc9@npm:^2.1.1":
+  version: 2.1.1
+  resolution: "rc9@npm:2.1.1"
+  dependencies:
+    defu: ^6.1.2
+    destr: ^2.0.0
+    flat: ^5.0.2
+  checksum: d704e4f4ecf321b691b37e5cfeee11bb2c5d3eb7393cef32096ed4bc3c7f7a64d2c79e2ad159b5e20c15917290ca80a1343fc25c86a3c8d0c67f4601ce8c4085
+  languageName: node
+  linkType: hard
+
 "rc@npm:^1.2.7":
   version: 1.2.8
   resolution: "rc@npm:1.2.8"
@@ -38492,7 +38728,26 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rollup@npm:^2.25.0 || ^3.3.0, rollup@npm:^3.10.0, rollup@npm:^3.19.1, rollup@npm:^3.21.0, rollup@npm:^3.21.5, rollup@npm:^3.21.8":
+"rollup-plugin-visualizer@npm:^5.9.2":
+  version: 5.9.2
+  resolution: "rollup-plugin-visualizer@npm:5.9.2"
+  dependencies:
+    open: ^8.4.0
+    picomatch: ^2.3.1
+    source-map: ^0.7.4
+    yargs: ^17.5.1
+  peerDependencies:
+    rollup: 2.x || 3.x
+  peerDependenciesMeta:
+    rollup:
+      optional: true
+  bin:
+    rollup-plugin-visualizer: dist/bin/cli.js
+  checksum: ab2adf322e3b20bffc94a8dc804f46be8840a9fcbab4f872dcc2dec205cdd7752e4d2d90cfcf00783bfb5209c5a8bb4e591984e8b61bca41fd048fb7deb0ed4e
+  languageName: node
+  linkType: hard
+
+"rollup@npm:^2.25.0 || ^3.3.0, rollup@npm:^3.10.0, rollup@npm:^3.19.1, rollup@npm:^3.21.0, rollup@npm:^3.21.5":
   version: 3.25.1
   resolution: "rollup@npm:3.25.1"
   dependencies:
@@ -38520,6 +38775,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rollup@npm:^3.25.3":
+  version: 3.26.3
+  resolution: "rollup@npm:3.26.3"
+  dependencies:
+    fsevents: ~2.3.2
+  dependenciesMeta:
+    fsevents:
+      optional: true
+  bin:
+    rollup: dist/bin/rollup
+  checksum: e6a765b2b7af709170344cc804392936613e06b6bdab46a04d264368d154bdadaaaf77de39e6e656bf728a060d7b4867d81e2464d791c0f37dd5b21aa9c7a6df
+  languageName: node
+  linkType: hard
+
 "root@workspace:.":
   version: 0.0.0-use.local
   resolution: "root@workspace:."
@@ -38556,13 +38825,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"run-async@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "run-async@npm:3.0.0"
-  checksum: 280c03d5a88603f48103fc6fd69f07fb0c392a1e0d319c34ec96a2516030e07ba06f79231a563c78698b882649c2fc1fda601bc84705f57d50efcd1fa506cfc0
-  languageName: node
-  linkType: hard
-
 "run-parallel@npm:^1.1.9":
   version: 1.2.0
   resolution: "run-parallel@npm:1.2.0"
@@ -38599,7 +38861,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rxjs@npm:^7.8.0, rxjs@npm:^7.8.1":
+"rxjs@npm:^7.8.0":
   version: 7.8.1
   resolution: "rxjs@npm:7.8.1"
   dependencies:
@@ -38834,6 +39096,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"semver@npm:^7.5.3":
+  version: 7.5.4
+  resolution: "semver@npm:7.5.4"
+  dependencies:
+    lru-cache: ^6.0.0
+  bin:
+    semver: bin/semver.js
+  checksum: 12d8ad952fa353b0995bf180cdac205a4068b759a140e5d3c608317098b3575ac2f1e09182206bf2eb26120e1c0ed8fb92c48c592f6099680de56bb071423ca3
+  languageName: node
+  linkType: hard
+
 "semver@npm:~2.3.1":
   version: 2.3.2
   resolution: "semver@npm:2.3.2"
@@ -40313,10 +40586,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"supports-color@npm:^9.3.1":
-  version: 9.3.1
-  resolution: "supports-color@npm:9.3.1"
-  checksum: 00c4d1082a7ba0ee21cba1d4e4a466642635412e40476777b530aa5110d035e99a420cd048e1fb6811f2254c0946095fbb87a1eccf1af1d1ca45ab0a4535db93
+"supports-color@npm:^9.4.0":
+  version: 9.4.0
+  resolution: "supports-color@npm:9.4.0"
+  checksum: cb8ff8daeaf1db642156f69a9aa545b6c01dd9c4def4f90a49f46cbf24be0c245d392fcf37acd119cd1819b99dad2cc9b7e3260813f64bcfd7f5b18b5a1eefb8
   languageName: node
   linkType: hard
 
@@ -41649,6 +41922,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"uncrypto@npm:^0.1.3":
+  version: 0.1.3
+  resolution: "uncrypto@npm:0.1.3"
+  checksum: 07160e08806dd6cea16bb96c3fd54cd70fc801e02fc3c6f86980144d15c9ebbd1c55587f7280a207b3af6cd34901c0d0b77ada5a02c2f7081a033a05acf409e2
+  languageName: node
+  linkType: hard
+
 "unctx@npm:^2.1.1":
   version: 2.1.1
   resolution: "unctx@npm:2.1.1"
@@ -41685,6 +41965,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unctx@npm:^2.3.1":
+  version: 2.3.1
+  resolution: "unctx@npm:2.3.1"
+  dependencies:
+    acorn: ^8.8.2
+    estree-walker: ^3.0.3
+    magic-string: ^0.30.0
+    unplugin: ^1.3.1
+  checksum: 96876a01b2d7dc70b44dce0e863aa654d066b04f57cdc4739ce884c13aadbfddad10df4e52de3648dae24ccd7aca454b6927b372d4912b9471c7671376f82b27
+  languageName: node
+  linkType: hard
+
 "undefsafe@npm:^2.0.5":
   version: 2.0.5
   resolution: "undefsafe@npm:2.0.5"
@@ -41692,7 +41984,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"undici@npm:^5.1.0, undici@npm:^5.12.0, undici@npm:^5.19.1, undici@npm:^5.22.0, undici@npm:^5.8.0":
+"undici@npm:^5.1.0, undici@npm:^5.12.0, undici@npm:^5.19.1, undici@npm:^5.22.1, undici@npm:^5.8.0":
   version: 5.22.1
   resolution: "undici@npm:5.22.1"
   dependencies:
@@ -41713,15 +42005,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"unenv@npm:^1.4.1":
-  version: 1.4.1
-  resolution: "unenv@npm:1.4.1"
+"unenv@npm:^1.5.1":
+  version: 1.5.2
+  resolution: "unenv@npm:1.5.2"
   dependencies:
+    consola: ^3.2.3
     defu: ^6.1.2
     mime: ^3.0.0
-    node-fetch-native: ^1.1.0
-    pathe: ^1.1.0
-  checksum: 58af7d2c94d3652b0637dc81db31ceb87c993df5ea2a34ea318ee201e3cae927416b99af957596f3bc8f7675d7452de0c0d2f294866d6ebd245a829ea41cc265
+    node-fetch-native: ^1.2.0
+    pathe: ^1.1.1
+  checksum: c6f034ef8ae3dab4dfad2fcedbb086a938fe2b7ee7f5e1ef01572bea1b653be0ae19e2bea3fe9422ecccabf25c5129fb9e785bd8d1479f2f72ca83ba94d510a0
   languageName: node
   linkType: hard
 
@@ -41744,15 +42037,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"unhead@npm:1.1.26":
-  version: 1.1.26
-  resolution: "unhead@npm:1.1.26"
+"unhead@npm:1.1.30":
+  version: 1.1.30
+  resolution: "unhead@npm:1.1.30"
   dependencies:
-    "@unhead/dom": 1.1.26
-    "@unhead/schema": 1.1.26
-    "@unhead/shared": 1.1.26
+    "@unhead/dom": 1.1.30
+    "@unhead/schema": 1.1.30
+    "@unhead/shared": 1.1.30
     hookable: ^5.5.3
-  checksum: ece5d8baf7f024001eebd73b05811e80ef67f5a3caecb6682af7cad50617eb891df4ef19f2656dece2778670f8f42e2191c06b6c44d6d23911a938812afe6312
+  checksum: dd023f777f64f5645f764f53b7ec6ea2e7fba9cb8a1b80969e56f99bc615db52a8949e76ffaf5ea2ffdf289d369d818b794e3464c75e3e5fdb84f94dceacd62a
   languageName: node
   linkType: hard
 
@@ -41832,6 +42125,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unimport@npm:^3.0.11, unimport@npm:^3.0.14":
+  version: 3.0.14
+  resolution: "unimport@npm:3.0.14"
+  dependencies:
+    "@rollup/pluginutils": ^5.0.2
+    escape-string-regexp: ^5.0.0
+    fast-glob: ^3.3.0
+    local-pkg: ^0.4.3
+    magic-string: ^0.30.0
+    mlly: ^1.4.0
+    pathe: ^1.1.1
+    pkg-types: ^1.0.3
+    scule: ^1.0.0
+    strip-literal: ^1.0.1
+    unplugin: ^1.3.1
+  checksum: da5e6537200fb05e20de0603df88e40c6885222d457d78fa6e4b2361c098b0ccecffb42d53a06242bfbba32c2027ab5e29c1dd088126633ad76951a944bbd43a
+  languageName: node
+  linkType: hard
+
 "unimport@npm:^3.0.2":
   version: 3.0.2
   resolution: "unimport@npm:3.0.2"
@@ -42163,6 +42475,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unplugin@npm:^1.3.2":
+  version: 1.4.0
+  resolution: "unplugin@npm:1.4.0"
+  dependencies:
+    acorn: ^8.9.0
+    chokidar: ^3.5.3
+    webpack-sources: ^3.2.3
+    webpack-virtual-modules: ^0.5.0
+  checksum: 49f586b07988397aa130b44710e8017a0472e825d08a218557031f08d694788b3ee61d686e67af153cb39b73132e2616c2f135222b83ff8aa2f7a89027f74600
+  languageName: node
+  linkType: hard
+
 "unstorage@npm:^1.4.0":
   version: 1.4.0
   resolution: "unstorage@npm:1.4.0"
@@ -42204,31 +42528,31 @@ __metadata:
   languageName: node
   linkType: hard
 
-"unstorage@npm:^1.6.0":
-  version: 1.6.0
-  resolution: "unstorage@npm:1.6.0"
+"unstorage@npm:^1.7.0":
+  version: 1.8.0
+  resolution: "unstorage@npm:1.8.0"
   dependencies:
     anymatch: ^3.1.3
     chokidar: ^3.5.3
-    destr: ^1.2.2
-    h3: ^1.6.4
+    destr: ^2.0.0
+    h3: ^1.7.1
     ioredis: ^5.3.2
     listhen: ^1.0.4
-    lru-cache: ^9.1.1
+    lru-cache: ^10.0.0
     mri: ^1.2.0
-    node-fetch-native: ^1.1.0
-    ofetch: ^1.0.1
+    node-fetch-native: ^1.2.0
+    ofetch: ^1.1.1
     ufo: ^1.1.2
   peerDependencies:
     "@azure/app-configuration": ^1.4.1
     "@azure/cosmos": ^3.17.3
     "@azure/data-tables": ^13.2.2
-    "@azure/identity": ^3.1.4
+    "@azure/identity": ^3.2.3
     "@azure/keyvault-secrets": ^4.7.0
     "@azure/storage-blob": ^12.14.0
     "@planetscale/database": ^1.7.0
-    "@upstash/redis": ^1.20.5
-    "@vercel/kv": ^0.1.1
+    "@upstash/redis": ^1.21.0
+    "@vercel/kv": ^0.2.2
   peerDependenciesMeta:
     "@azure/app-configuration":
       optional: true
@@ -42248,7 +42572,7 @@ __metadata:
       optional: true
     "@vercel/kv":
       optional: true
-  checksum: a7332ac6ea6a8c4a500e5c1ca0a40e8bb37576f96eb84f9e0da3f73c99ebd5a2e3d443262447ca19f051f9f1fa4b154923c7701ff99196d700cced6cc5ef09ac
+  checksum: b88bf8e58019506ca9655f2a9f2796b106b190e6eae5a2f916badd83e98900fceb282202f959c49288044315aadd63bb6ea9bb6c13482b8b0683c88345b357cf
   languageName: node
   linkType: hard
 
@@ -42640,19 +42964,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vite-node@npm:^0.31.0":
-  version: 0.31.1
-  resolution: "vite-node@npm:0.31.1"
+"vite-node@npm:^0.33.0":
+  version: 0.33.0
+  resolution: "vite-node@npm:0.33.0"
   dependencies:
     cac: ^6.7.14
     debug: ^4.3.4
-    mlly: ^1.2.0
-    pathe: ^1.1.0
+    mlly: ^1.4.0
+    pathe: ^1.1.1
     picocolors: ^1.0.0
     vite: ^3.0.0 || ^4.0.0
   bin:
     vite-node: vite-node.mjs
-  checksum: f70ffa3f6dcb4937cdc99f59bf360d42de83c556ba9a19eb1c3504ef20db4c1d1afa644d9a8e63240e851c0c95773b64c526bdb3eb4794b5e941ddcd57124aa9
+  checksum: 7c37911251d3e318fe4ad6b4093207498336ce190a58afb43a9ae701eee7f110ef80920b79061710cf6abcc6335ce58f6ca412ee6b268f25fe10f278c94cc264
   languageName: node
   linkType: hard
 
@@ -42707,9 +43031,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vite-plugin-checker@npm:^0.6.0":
-  version: 0.6.0
-  resolution: "vite-plugin-checker@npm:0.6.0"
+"vite-plugin-checker@npm:^0.6.1":
+  version: 0.6.1
+  resolution: "vite-plugin-checker@npm:0.6.1"
   dependencies:
     "@babel/code-frame": ^7.12.13
     ansi-escapes: ^4.3.0
@@ -42755,7 +43079,7 @@ __metadata:
       optional: true
     vue-tsc:
       optional: true
-  checksum: 4ca01fed07c4bb5c8b341d1f0b29931bf53db834e9ff8c554e5f9b2effd35559d1661914b7897f01edcebf1360ce9af933328df5b8332f540da9bc8c7525ef47
+  checksum: f2b2e0a4695e0f91d5a9e7591dcf6e6202edaa7fa70f60525c534f2a908983b2d44086851f9bd30b9be08f5f4f2e3f524a4ea13184bc4fc4fb9bbeefe17396e7
   languageName: node
   linkType: hard
 
@@ -42824,7 +43148,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vite@npm:^3.0.0 || ^4.0.0, vite@npm:^4.3.9, vite@npm:~4.3.6":
+"vite@npm:^3.0.0 || ^4.0.0, vite@npm:^4.3.9, vite@npm:~4.3.9":
   version: 4.3.9
   resolution: "vite@npm:4.3.9"
   dependencies:
@@ -43207,14 +43531,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vue-router@npm:^4.2.0":
-  version: 4.2.0
-  resolution: "vue-router@npm:4.2.0"
+"vue-router@npm:^4.2.4":
+  version: 4.2.4
+  resolution: "vue-router@npm:4.2.4"
   dependencies:
     "@vue/devtools-api": ^6.5.0
   peerDependencies:
     vue: ^3.2.0
-  checksum: 2ae40a4dd86e9abf50596cf779640daf61da8d668ffccf063ccc8762f95149eec6784700a4f2aa9d8854b4a6a885f2e300ddc84e5c4069dbd4a6b0cfed9d8e1a
+  checksum: 9fe1fc11b613c8e020aad5d0850ba5caa971033dfaa4fc117e4595349f2c5f211793a247c30e3c03b0f91c3512b87af929af96b8b20b6b7d4cdccc5af13e5e7f
   languageName: node
   linkType: hard
 
@@ -43331,16 +43655,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vue@npm:^3.3.2":
-  version: 3.3.3
-  resolution: "vue@npm:3.3.3"
+"vue@npm:^3.3.4":
+  version: 3.3.4
+  resolution: "vue@npm:3.3.4"
   dependencies:
-    "@vue/compiler-dom": 3.3.3
-    "@vue/compiler-sfc": 3.3.3
-    "@vue/runtime-dom": 3.3.3
-    "@vue/server-renderer": 3.3.3
-    "@vue/shared": 3.3.3
-  checksum: 0e225e5df283bcef903efdd8d34b93bb632610aa62845f2797670096b4299c41feb458f68284820226d3d06a46443a7d04f3e7f67f15fcd384a4cf257aa68582
+    "@vue/compiler-dom": 3.3.4
+    "@vue/compiler-sfc": 3.3.4
+    "@vue/runtime-dom": 3.3.4
+    "@vue/server-renderer": 3.3.4
+    "@vue/shared": 3.3.4
+  checksum: 58b6c62a66a375ce5df460fcb7ba41b37c8637c635faf06ef472ae4197f412cf9ad83586cd8e3f66c486404fbe8550e694f90ff724a571d1ba78830791099c59
   languageName: node
   linkType: hard
 
@@ -43925,7 +44249,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"wrap-ansi@npm:^6.0.1, wrap-ansi@npm:^6.2.0":
+"wrap-ansi@npm:^6.2.0":
   version: 6.2.0
   resolution: "wrap-ansi@npm:6.2.0"
   dependencies:
@@ -44533,6 +44857,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"zhead@npm:^2.0.9":
+  version: 2.0.9
+  resolution: "zhead@npm:2.0.9"
+  checksum: ee960a17d164a53c27f05f160949c90bbc212430512c4342eb2c2cd2406e1b5ee929c4c7bf5e6dec50ff9cc9d7475fbf54d55af80747d028ff4c55097ac3e301
+  languageName: node
+  linkType: hard
+
 "zip-stream@npm:^4.1.0":
   version: 4.1.0
   resolution: "zip-stream@npm:4.1.0"

From 7d235dcb5ff2634b0dcda67bf4b6e4af7b93ce9c Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Tue, 18 Jul 2023 10:06:07 +0100
Subject: [PATCH 25/35] experiments(dui3): really nothing special in this
 commit

---
 packages/dui3/lib/bindings/definitions/baseBindings.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/dui3/lib/bindings/definitions/baseBindings.ts b/packages/dui3/lib/bindings/definitions/baseBindings.ts
index e476ba1f6..ce742a45a 100644
--- a/packages/dui3/lib/bindings/definitions/baseBindings.ts
+++ b/packages/dui3/lib/bindings/definitions/baseBindings.ts
@@ -76,14 +76,14 @@ export class MockedBaseBinding extends BaseBridge {
   }
 
   public async getSourceApplicationVersion() {
-    return '1'
+    return Math.random().toString()
   }
 
   public async getDocumentInfo() {
     return {
       name: 'Mocked File',
       location: 'www',
-      id: '42'
+      id: Math.random().toString()
     }
   }
 

From 738b2a001c4ebc78acb31b2f6c445ff338e36ee6 Mon Sep 17 00:00:00 2001
From: oguzhankoral <oguzhankoral@gmail.com>
Date: Tue, 18 Jul 2023 15:56:12 +0300
Subject: [PATCH 26/35] Rename view_id to binding_name

---
 packages/dui3/lib/bridge/sketchup.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/dui3/lib/bridge/sketchup.ts b/packages/dui3/lib/bridge/sketchup.ts
index 4e25c68c3..befea24d7 100644
--- a/packages/dui3/lib/bridge/sketchup.ts
+++ b/packages/dui3/lib/bridge/sketchup.ts
@@ -23,15 +23,15 @@ export class SketchupBridge extends BaseBridge {
       rejectTimerId: number
     }
   >
-  private bindingsName: string
+  private bindingName: string
   private TIMEOUT_MS = 2000 // 2s
   public isInitalized: Promise<boolean>
   private resolveIsInitializedPromise!: (v: boolean) => unknown
   private rejectIsInitializedPromise!: (message: string) => unknown
 
-  constructor(bindingsName: string) {
+  constructor(bindingName: string) {
     super()
-    this.bindingsName = bindingsName || 'default_bindings'
+    this.bindingName = bindingName || 'default_bindings'
 
     this.isInitalized = new Promise((resolve, reject) => {
       this.resolveIsInitializedPromise = resolve
@@ -57,7 +57,7 @@ export class SketchupBridge extends BaseBridge {
   public async create(): Promise<boolean> {
     // Initialization continues in the receiveCommandsAndInitializeBridge function,
     // where we expect sketchup to return to us the command names for related bindings/views.
-    sketchup.getCommands(this.bindingsName)
+    sketchup.getCommands(this.bindingName)
 
     //
     try {
@@ -99,7 +99,7 @@ export class SketchupBridge extends BaseBridge {
    * @param args
    */
   private async runMethod(methodName: string, args: unknown[]): Promise<unknown> {
-    const requestId = uniqueId(this.bindingsName)
+    const requestId = uniqueId(this.bindingName)
 
     // TODO: more on the ruby end, but for now Oguzhan seems happy with this.
     // Changes might be needed in the future.
@@ -108,7 +108,7 @@ export class SketchupBridge extends BaseBridge {
       // eslint-disable-next-line camelcase
       request_id: requestId,
       // eslint-disable-next-line camelcase
-      view_id: this.bindingsName,
+      binding_name: this.bindingName,
       data: { args }
     })
 

From ec08aef74a476f3b047ee5bb28b1129db07b5c4b Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Tue, 18 Jul 2023 14:25:36 +0100
Subject: [PATCH 27/35] experiments(dui3): minor change

---
 packages/dui3/lib/accounts/composables/setup.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/dui3/lib/accounts/composables/setup.ts b/packages/dui3/lib/accounts/composables/setup.ts
index 661b0383b..03454433b 100644
--- a/packages/dui3/lib/accounts/composables/setup.ts
+++ b/packages/dui3/lib/accounts/composables/setup.ts
@@ -60,7 +60,7 @@ export function useAccountsSetup(): DUIAccountsState {
     accounts.value = newAccs
   }
 
-  ;(async () => await refreshAccounts())()
+  void refreshAccounts() // Promise that we do not want to await (convention with void)
 
   const defaultAccount = computed(() =>
     accounts.value.find((acc) => acc.accountInfo.isDefault)

From 52f3e2913f7ca4e03605f32d35f1c7462da336c4 Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Thu, 20 Jul 2023 18:01:48 +0100
Subject: [PATCH 28/35] experiments(dui3): minor changes

---
 .../lib/bindings/definitions/baseBindings.ts  | 27 +++++++------------
 packages/dui3/plugins/00.bindings.ts          | 14 ++++++----
 2 files changed, 19 insertions(+), 22 deletions(-)

diff --git a/packages/dui3/lib/bindings/definitions/baseBindings.ts b/packages/dui3/lib/bindings/definitions/baseBindings.ts
index ce742a45a..18e033c4c 100644
--- a/packages/dui3/lib/bindings/definitions/baseBindings.ts
+++ b/packages/dui3/lib/bindings/definitions/baseBindings.ts
@@ -2,30 +2,23 @@
 
 import { BaseBridge } from '~~/lib/bridge/base'
 
+export interface Event<T> {
+  on: <E extends keyof T>(event: E, callback: T[E]) => void
+  showDevTools: () => Promise<void>
+}
+
+export const IBasicConnectorBindingKey = 'baseBinding'
+
 // Needs to be agreed between Frontend and Core
-export interface IBaseBinding {
+export interface IBasicConnectorBinding
+  extends Event<IBasicConnectorBindingHostEvents> {
   getAccounts: () => Promise<Account[]>
   getSourceApplicationName: () => Promise<string>
   getSourceApplicationVersion: () => Promise<string>
   getDocumentInfo: () => Promise<DocumentInfo>
-
-  /**
-   * Subscribe to messages from the host application.
-   * @param event
-   * @param callback
-   */
-  on: <E extends keyof IBaseBindingHostEvents>(
-    event: E,
-    callback: IBaseBindingHostEvents[E]
-  ) => void
-  /**
-   * Note: this method does not need to be implemented in the .NET host application base bindings,
-   * it is served by the DUI3 bridge.
-   */
-  showDevTools: () => Promise<void>
 }
 
-export interface IBaseBindingHostEvents {
+export interface IBasicConnectorBindingHostEvents {
   displayToastNotification: (args: ToastInfo) => void
   documentChanged: () => void
 }
diff --git a/packages/dui3/plugins/00.bindings.ts b/packages/dui3/plugins/00.bindings.ts
index e0c89d562..f3195b315 100644
--- a/packages/dui3/plugins/00.bindings.ts
+++ b/packages/dui3/plugins/00.bindings.ts
@@ -1,11 +1,14 @@
-import { GenericBridge } from '~/lib/bridge/generic'
 import { IRawBridge } from '~/lib/bridge/definitions'
 
+import { GenericBridge } from '~/lib/bridge/generic'
+import { SketchupBridge } from '~/lib/bridge/sketchup'
+
 import {
-  IBaseBinding,
+  IBasicConnectorBinding,
+  IBasicConnectorBindingKey,
   MockedBaseBinding
 } from '~/lib/bindings/definitions/baseBindings'
-import { SketchupBridge } from '~/lib/bridge/sketchup'
+
 import {
   ITestBinding,
   ITestBindingKey,
@@ -30,11 +33,12 @@ export default defineNuxtPlugin(async () => {
     (await tryHoistBinding<ITestBinding>(ITestBindingKey)) || new MockedTestBinding()
 
   // Tries to register some non-existant bindings.
-  const nonExistantBindings = await tryHoistBinding<IBaseBinding>('nonExistantBindings')
+  const nonExistantBindings = await tryHoistBinding('nonExistantBindings')
 
   // Registers a set of default bindings.
   const baseBinding =
-    (await tryHoistBinding<IBaseBinding>('baseBinding')) || new MockedBaseBinding()
+    (await tryHoistBinding<IBasicConnectorBinding>(IBasicConnectorBindingKey)) ||
+    new MockedBaseBinding()
 
   const showDevTools = () => {
     baseBinding.showDevTools()

From 0ce889893c3e15f2525137331a489cc0b6c4e87a Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Fri, 21 Jul 2023 15:34:07 +0100
Subject: [PATCH 29/35] experiments(dui3): refactors binding interface
 declarations (a wee bit)

---
 .../{baseBindings.ts => IBasicConnectorBinding.ts} |  8 ++------
 packages/dui3/lib/bindings/definitions/IBinding.ts | 14 ++++++++++++++
 .../{testBindings.ts => ITestBinding.ts}           |  7 ++-----
 packages/dui3/plugins/00.bindings.ts               |  4 ++--
 4 files changed, 20 insertions(+), 13 deletions(-)
 rename packages/dui3/lib/bindings/definitions/{baseBindings.ts => IBasicConnectorBinding.ts} (90%)
 create mode 100644 packages/dui3/lib/bindings/definitions/IBinding.ts
 rename packages/dui3/lib/bindings/definitions/{testBindings.ts => ITestBinding.ts} (90%)

diff --git a/packages/dui3/lib/bindings/definitions/baseBindings.ts b/packages/dui3/lib/bindings/definitions/IBasicConnectorBinding.ts
similarity index 90%
rename from packages/dui3/lib/bindings/definitions/baseBindings.ts
rename to packages/dui3/lib/bindings/definitions/IBasicConnectorBinding.ts
index 18e033c4c..d8f52747f 100644
--- a/packages/dui3/lib/bindings/definitions/baseBindings.ts
+++ b/packages/dui3/lib/bindings/definitions/IBasicConnectorBinding.ts
@@ -1,17 +1,13 @@
 /* eslint-disable @typescript-eslint/require-await */
 
 import { BaseBridge } from '~~/lib/bridge/base'
-
-export interface Event<T> {
-  on: <E extends keyof T>(event: E, callback: T[E]) => void
-  showDevTools: () => Promise<void>
-}
+import { IBinding } from '~~/lib/bindings/definitions/IBinding'
 
 export const IBasicConnectorBindingKey = 'baseBinding'
 
 // Needs to be agreed between Frontend and Core
 export interface IBasicConnectorBinding
-  extends Event<IBasicConnectorBindingHostEvents> {
+  extends IBinding<IBasicConnectorBindingHostEvents> {
   getAccounts: () => Promise<Account[]>
   getSourceApplicationName: () => Promise<string>
   getSourceApplicationVersion: () => Promise<string>
diff --git a/packages/dui3/lib/bindings/definitions/IBinding.ts b/packages/dui3/lib/bindings/definitions/IBinding.ts
new file mode 100644
index 000000000..915da9282
--- /dev/null
+++ b/packages/dui3/lib/bindings/definitions/IBinding.ts
@@ -0,0 +1,14 @@
+/**
+ * Basic interface scaffolding two standard method.
+ */
+export interface IBinding<T> {
+  /**
+   * Events sent over from the host application.
+   */
+  on: <E extends keyof T>(event: E, callback: T[E]) => void
+  /**
+   * If possible, opens up dev tools from the embedded browser window.
+   * Currently needed for CefSharp, as right click inspect doesn't exist.
+   */
+  showDevTools: () => Promise<void>
+}
diff --git a/packages/dui3/lib/bindings/definitions/testBindings.ts b/packages/dui3/lib/bindings/definitions/ITestBinding.ts
similarity index 90%
rename from packages/dui3/lib/bindings/definitions/testBindings.ts
rename to packages/dui3/lib/bindings/definitions/ITestBinding.ts
index 390a1e1bc..988cef24d 100644
--- a/packages/dui3/lib/bindings/definitions/testBindings.ts
+++ b/packages/dui3/lib/bindings/definitions/ITestBinding.ts
@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/require-await */
 
 import { BaseBridge } from '~~/lib/bridge/base'
+import { IBinding } from '~~/lib/bindings/definitions/IBinding'
 
 /**
  * The name under which this binding will be registered.
@@ -10,16 +11,12 @@ export const ITestBindingKey = 'testBinding'
 /**
  * A test binding interface to ensure compatbility. Ideally all host environments would implement and register it.
  */
-export interface ITestBinding {
+export interface ITestBinding extends IBinding<ITestBindingEvents> {
   sayHi: (name: string, count: number, sayHelloNotHi: boolean) => Promise<string[]>
   goAway: () => Promise<void>
   getComplexType: () => Promise<ComplexType>
   shouldThrow: () => Promise<void>
   triggerEvent: (eventName: string) => Promise<void>
-  on: <E extends keyof ITestBindingEvents>(
-    event: E,
-    callback: ITestBindingEvents[E]
-  ) => void
 }
 
 export interface ITestBindingEvents {
diff --git a/packages/dui3/plugins/00.bindings.ts b/packages/dui3/plugins/00.bindings.ts
index f3195b315..ba66c8a2c 100644
--- a/packages/dui3/plugins/00.bindings.ts
+++ b/packages/dui3/plugins/00.bindings.ts
@@ -7,13 +7,13 @@ import {
   IBasicConnectorBinding,
   IBasicConnectorBindingKey,
   MockedBaseBinding
-} from '~/lib/bindings/definitions/baseBindings'
+} from '~/lib/bindings/definitions/IBasicConnectorBinding'
 
 import {
   ITestBinding,
   ITestBindingKey,
   MockedTestBinding
-} from '~/lib/bindings/definitions/testBindings'
+} from '~/lib/bindings/definitions/ITestBinding'
 
 // Makes TS happy
 declare let globalThis: Record<string, unknown> & {

From 9c2a089dc8303bec295479b8625ecdf138018235 Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Fri, 21 Jul 2023 19:02:12 +0100
Subject: [PATCH 30/35] feat(dui3): adds avatar and scaffolds user menu

---
 packages/dui3/components/header/NavBar.vue    |   4 +-
 packages/dui3/components/header/UserMenu.vue  |  29 +++-
 packages/dui3/components/user/Avatar.vue      | 162 +++++++++++++++++-
 .../dui3/lib/accounts/composables/setup.ts    |   2 +-
 packages/dui3/pages/index.vue                 |   5 -
 5 files changed, 181 insertions(+), 21 deletions(-)

diff --git a/packages/dui3/components/header/NavBar.vue b/packages/dui3/components/header/NavBar.vue
index 62f597cb3..d9abd708d 100644
--- a/packages/dui3/components/header/NavBar.vue
+++ b/packages/dui3/components/header/NavBar.vue
@@ -8,9 +8,9 @@
           <HeaderLogoBlock :active="false" class="mr-0" />
           <div class="flex flex-shrink-0 items-center -ml-2 md:ml-0">
             <PortalTarget name="navigation"></PortalTarget>
-            <FormButton size="xs" color="card" @click="$showDevTools()">
+            <!-- <FormButton size="xs" color="card" @click="$showDevTools()">
               Show Dev Tools
-            </FormButton>
+            </FormButton> -->
           </div>
         </div>
         <div>
diff --git a/packages/dui3/components/header/UserMenu.vue b/packages/dui3/components/header/UserMenu.vue
index dccfcf238..2ad7d4887 100644
--- a/packages/dui3/components/header/UserMenu.vue
+++ b/packages/dui3/components/header/UserMenu.vue
@@ -3,11 +3,11 @@
     <Menu as="div" class="ml-2 flex items-center">
       <MenuButton v-slot="{ open }">
         <span class="sr-only">Open user menu</span>
-        =
-        <!-- <UserAvatar v-if="!userOpen" size="lg" :user="activeUser" hover-effect />
+
+        <UserAvatar v-if="!open" size="lg" :user="user" hover-effect />
         <UserAvatar v-else size="lg" hover-effect>
           <XMarkIcon class="w-5 h-5" />
-        </UserAvatar> -->
+        </UserAvatar>
       </MenuButton>
       <Transition
         enter-active-class="transition ease-out duration-200"
@@ -18,18 +18,18 @@
         leave-to-class="transform opacity-0 scale-95"
       >
         <MenuItems
-          class="absolute right-0 md:right-4 top-14 md:top-16 w-full md:w-64 origin-top-right bg-foundation outline outline-2 outline-primary-muted rounded-md shadow-lg overflow-hidden"
+          class="absolute right-0 md:right-4 top-14 md:top-16 w-full md:w-64 origin-top-right bg-foundation sm:rounded-t-md rounded-b-md shadow-lg overflow-hidden"
         >
           <MenuItem v-slot="{ active, close }" as="div">
             <NuxtLink
               :class="[
                 active ? 'bg-foundation-focus' : '',
-                'flex items-center  justify-between px-2 py-3 text-sm text-foreground cursor-pointer transition'
+                'flex items-center justify-between px-2 py-3 text-sm text-foreground cursor-pointer transition'
               ]"
               to="/"
               @click="close"
             >
-              Haello
+              Home
             </NuxtLink>
           </MenuItem>
 
@@ -37,19 +37,32 @@
             <NuxtLink
               :class="[
                 active ? 'bg-foundation-focus' : '',
-                'flex items-center justify-between px-2 py-3 text-sm text-primary cursor-pointer transition border-b border-primary'
+                'flex items-center justify-between px-2 py-3 text-sm text-foreground cursor-pointer transition'
               ]"
               to="/test"
               @click="close"
             >
-              Tests
+              Test Page
             </NuxtLink>
           </MenuItem>
+          <MenuItem as="div" class="border border-t-1">Hai</MenuItem>
         </MenuItems>
       </Transition>
     </Menu>
   </div>
 </template>
 <script setup lang="ts">
+import { XMarkIcon } from '@heroicons/vue/20/solid'
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
+import { useInjectedAccounts } from '~/lib/accounts/composables/setup'
+
+const { defaultAccount } = useInjectedAccounts()
+
+const user = computed(() => {
+  if (!defaultAccount.value) return { name: 'loading', avatar: undefined }
+  return {
+    name: defaultAccount.value?.accountInfo.userInfo.name,
+    avatar: defaultAccount.value?.accountInfo.userInfo.avatar
+  }
+})
 </script>
diff --git a/packages/dui3/components/user/Avatar.vue b/packages/dui3/components/user/Avatar.vue
index a5821f3fc..a21020dce 100644
--- a/packages/dui3/components/user/Avatar.vue
+++ b/packages/dui3/components/user/Avatar.vue
@@ -1,10 +1,162 @@
 <template>
-  <div>Hello avatar!</div>
+  <div
+    :class="[
+      'text-foreground-on-primary flex shrink-0 items-center justify-center overflow-hidden rounded-full font-semibold uppercase transition',
+      sizeClasses,
+      bgClasses,
+      borderClasses,
+      hoverClasses,
+      activeClasses
+    ]"
+  >
+    <slot>
+      <div
+        v-if="user?.avatar"
+        class="h-full w-full bg-cover bg-center bg-no-repeat"
+        :style="{ backgroundImage: `url('${user.avatar}')` }"
+      />
+      <div
+        v-else-if="initials"
+        class="flex h-full w-full select-none items-center justify-center"
+      >
+        {{ initials }}
+      </div>
+      <div v-else><UserCircleIcon :class="iconClasses" /></div>
+    </slot>
+  </div>
 </template>
 <script setup lang="ts">
-import { Account } from '~/lib/bindings/definitions/baseBindings'
+type UserAvatar = {
+  name: string
+  avatar?: string
+}
 
-const props = defineProps<{
-  userInfo: Account
-}>()
+export type UserAvatarSize = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | 'editable'
+
+const props = withDefaults(
+  defineProps<{
+    user?: UserAvatar
+    size?: UserAvatarSize
+    hoverEffect?: boolean
+    active?: boolean
+    noBorder?: boolean
+    noBackground?: boolean
+  }>(),
+  {
+    user: undefined,
+    size: 'base',
+    hoverEffect: false
+  }
+)
+
+const initials = computed(() => {
+  if (!props.user?.name.length) return
+  const parts = props.user.name.split(' ')
+  const firstLetter = parts[0]?.[0] || ''
+  const secondLetter = parts[1]?.[0] || ''
+
+  if (props.size === 'sm' || props.size === 'xs') return firstLetter
+  return firstLetter + secondLetter
+})
+
+const borderClasses = computed(() => {
+  if (props.noBorder) return ''
+  return 'border-2 border-foundation'
+})
+
+const bgClasses = computed(() => {
+  if (props.noBackground) return ''
+  return 'bg-primary'
+})
+
+const hoverClasses = computed(() => {
+  if (props.hoverEffect)
+    return 'hover:border-primary focus:border-primary active:scale-95'
+  return ''
+})
+
+const activeClasses = computed(() => {
+  if (props.active) return 'border-primary'
+  return ''
+})
+
+const heightClasses = computed(() => {
+  const size = props.size
+  switch (size) {
+    case 'xs':
+      return 'h-5'
+    case 'sm':
+      return 'h-6'
+    case 'lg':
+      return 'h-10'
+    case 'xl':
+      return 'h-14'
+    case 'editable':
+      return 'h-60'
+    case 'base':
+    default:
+      return 'h-8'
+  }
+})
+
+const widthClasses = computed(() => {
+  const size = props.size
+  switch (size) {
+    case 'xs':
+      return 'w-5'
+    case 'sm':
+      return 'w-6'
+    case 'lg':
+      return 'w-10'
+    case 'xl':
+      return 'w-14'
+    case 'editable':
+      return 'w-60'
+    case 'base':
+    default:
+      return 'w-8'
+  }
+})
+
+const textClasses = computed(() => {
+  const size = props.size
+  switch (size) {
+    case 'xs':
+      return 'text-tiny'
+    case 'sm':
+      return 'text-xs'
+    case 'lg':
+      return 'text-md'
+    case 'xl':
+      return 'text-2xl'
+    case 'editable':
+      return 'h1'
+    case 'base':
+    default:
+      return 'text-sm'
+  }
+})
+
+const iconClasses = computed(() => {
+  const size = props.size
+  switch (size) {
+    case 'xs':
+      return 'w-3 h-3'
+    case 'sm':
+      return 'w-3 h-3'
+    case 'lg':
+      return 'w-5 h-5'
+    case 'xl':
+      return 'w-8 h-8'
+    case 'editable':
+      return 'w-20 h-20'
+    case 'base':
+    default:
+      return 'w-4 h-4'
+  }
+})
+
+const sizeClasses = computed(
+  () => `${widthClasses.value} ${heightClasses.value} ${textClasses.value}`
+)
 </script>
diff --git a/packages/dui3/lib/accounts/composables/setup.ts b/packages/dui3/lib/accounts/composables/setup.ts
index 03454433b..d9e4e46cc 100644
--- a/packages/dui3/lib/accounts/composables/setup.ts
+++ b/packages/dui3/lib/accounts/composables/setup.ts
@@ -1,7 +1,7 @@
 import { ApolloClient } from '@apollo/client/core'
 import { ApolloClients } from '@vue/apollo-composable'
 import { ShallowRef, ComputedRef } from 'vue'
-import { Account } from '~/lib/bindings/definitions/baseBindings'
+import { Account } from '~/lib/bindings/definitions/IBasicConnectorBinding'
 import { resolveClientConfig } from '~/lib/core/configs/apollo'
 
 export type DUIAccount = {
diff --git a/packages/dui3/pages/index.vue b/packages/dui3/pages/index.vue
index bf286ca1d..5d62e4cf8 100644
--- a/packages/dui3/pages/index.vue
+++ b/packages/dui3/pages/index.vue
@@ -1,10 +1,5 @@
 <template>
   <div>
-    <Portal to="navigation">
-      <div class="mx-2 py-1 px-2 rounded text-xs bg-primary text-white font-bold">
-        for {{ appName }}
-      </div>
-    </Portal>
     <div class="space-y-2">
       <div>
         Hello world! You have

From 37228e00aa79ead4339c1c506bc8b5e6012d069c Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Fri, 21 Jul 2023 19:14:38 +0100
Subject: [PATCH 31/35] feat(dui3): wip header menu

---
 packages/dui3/components/header/NavBar.vue   |  4 +---
 packages/dui3/components/header/UserMenu.vue | 17 +++++++++++++++--
 packages/dui3/components/user/Avatar.vue     |  1 +
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/packages/dui3/components/header/NavBar.vue b/packages/dui3/components/header/NavBar.vue
index d9abd708d..788df9521 100644
--- a/packages/dui3/components/header/NavBar.vue
+++ b/packages/dui3/components/header/NavBar.vue
@@ -20,6 +20,4 @@
     </div>
   </nav>
 </template>
-<script setup lang="ts">
-const { $showDevTools } = useNuxtApp()
-</script>
+<script setup lang="ts"></script>
diff --git a/packages/dui3/components/header/UserMenu.vue b/packages/dui3/components/header/UserMenu.vue
index 2ad7d4887..161d0ec90 100644
--- a/packages/dui3/components/header/UserMenu.vue
+++ b/packages/dui3/components/header/UserMenu.vue
@@ -45,6 +45,17 @@
               Test Page
             </NuxtLink>
           </MenuItem>
+          <MenuItem as="div" class="p-2">
+            <FormButton
+              full-width
+              size="sm"
+              color="card"
+              :icon-right="CogIcon"
+              @click="$showDevTools"
+            >
+              Show Dev Tools
+            </FormButton>
+          </MenuItem>
           <MenuItem as="div" class="border border-t-1">Hai</MenuItem>
         </MenuItems>
       </Transition>
@@ -52,14 +63,16 @@
   </div>
 </template>
 <script setup lang="ts">
-import { XMarkIcon } from '@heroicons/vue/20/solid'
+import { XMarkIcon, CogIcon } from '@heroicons/vue/20/solid'
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
 import { useInjectedAccounts } from '~/lib/accounts/composables/setup'
 
+const { $showDevTools } = useNuxtApp()
+
 const { defaultAccount } = useInjectedAccounts()
 
 const user = computed(() => {
-  if (!defaultAccount.value) return { name: 'loading', avatar: undefined }
+  if (!defaultAccount.value) return undefined
   return {
     name: defaultAccount.value?.accountInfo.userInfo.name,
     avatar: defaultAccount.value?.accountInfo.userInfo.avatar
diff --git a/packages/dui3/components/user/Avatar.vue b/packages/dui3/components/user/Avatar.vue
index a21020dce..9d623086e 100644
--- a/packages/dui3/components/user/Avatar.vue
+++ b/packages/dui3/components/user/Avatar.vue
@@ -26,6 +26,7 @@
   </div>
 </template>
 <script setup lang="ts">
+import { UserCircleIcon } from '@heroicons/vue/20/solid'
 type UserAvatar = {
   name: string
   avatar?: string

From 9423ec16301ae7a026a66871b167881600306298 Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Sun, 23 Jul 2023 18:48:36 +0100
Subject: [PATCH 32/35] feat(dui3): header menu: implemented accounts

---
 packages/dui3/app.vue                         |   4 +-
 packages/dui3/components/header/NavBar.vue    |   5 +-
 .../dui3/components/header/UserAccount.vue    |  51 ++++
 packages/dui3/components/header/UserMenu.vue  |  85 +++---
 .../dui3/lib/accounts/composables/setup.ts    |  70 ++++-
 .../dui3/lib/bindings/definitions/IBinding.ts |   4 +
 packages/dui3/lib/bridge/definitions/index.ts |   1 +
 packages/dui3/lib/bridge/generic.ts           |   4 +
 packages/dui3/lib/common/generated/gql/gql.ts |   5 +
 .../dui3/lib/common/generated/gql/graphql.ts  |  18 +-
 packages/dui3/lib/core/configs/apollo.ts      |   1 +
 packages/dui3/lib/document-info/index.ts      |  24 --
 packages/dui3/nuxt.config.ts                  |   2 +-
 packages/dui3/package.json                    |   5 +-
 packages/dui3/pages/index.vue                 |  28 +-
 packages/dui3/plugins/00.bindings.ts          |   7 +-
 packages/dui3/plugins/apollo.ts               |  40 ---
 packages/dui3/plugins/tippy.ts                |  11 +
 packages/dui3/store/accounts.ts               |  10 +
 packages/dui3/store/documentInfo.ts           |  23 ++
 yarn.lock                                     | 273 ++++++++++++------
 21 files changed, 446 insertions(+), 225 deletions(-)
 create mode 100644 packages/dui3/components/header/UserAccount.vue
 delete mode 100644 packages/dui3/lib/document-info/index.ts
 delete mode 100644 packages/dui3/plugins/apollo.ts
 create mode 100644 packages/dui3/plugins/tippy.ts
 create mode 100644 packages/dui3/store/accounts.ts
 create mode 100644 packages/dui3/store/documentInfo.ts

diff --git a/packages/dui3/app.vue b/packages/dui3/app.vue
index 128747049..f13f49d79 100644
--- a/packages/dui3/app.vue
+++ b/packages/dui3/app.vue
@@ -7,10 +7,10 @@
 </template>
 <script setup lang="ts">
 import { useAccountsSetup } from '~/lib/accounts/composables/setup'
-import { useDocumentInfoSetup } from '~/lib/document-info'
+// import { useDocumentInfoSetup } from '~/lib/document-info'
 
 useAccountsSetup()
-useDocumentInfoSetup()
+// useDocumentInfoSetup()
 
 useHead({
   // Title suffix
diff --git a/packages/dui3/components/header/NavBar.vue b/packages/dui3/components/header/NavBar.vue
index 788df9521..ce7230d16 100644
--- a/packages/dui3/components/header/NavBar.vue
+++ b/packages/dui3/components/header/NavBar.vue
@@ -2,15 +2,12 @@
   <nav
     class="fixed top-0 h-14 bg-foundation max-w-full w-full shadow hover:shadow-md transition z-20"
   >
-    <div class="px-4">
+    <div class="px-2">
       <div class="flex items-center h-14 transition-all justify-between">
         <div class="flex items-center">
           <HeaderLogoBlock :active="false" class="mr-0" />
           <div class="flex flex-shrink-0 items-center -ml-2 md:ml-0">
             <PortalTarget name="navigation"></PortalTarget>
-            <!-- <FormButton size="xs" color="card" @click="$showDevTools()">
-              Show Dev Tools
-            </FormButton> -->
           </div>
         </div>
         <div>
diff --git a/packages/dui3/components/header/UserAccount.vue b/packages/dui3/components/header/UserAccount.vue
new file mode 100644
index 000000000..f681463a9
--- /dev/null
+++ b/packages/dui3/components/header/UserAccount.vue
@@ -0,0 +1,51 @@
+<template>
+  <button
+    v-tippy="tip"
+    :class="`block min-w-0 w-full max-w-full text-left items-center justify-between space-x-2 hover:bg-primary-muted transition p-2 select-none group hover:cursor-pointer hover:text-primary ${
+      !account.isValid ? 'text-danger bg-rose-500/10' : ''
+    } ${account.accountInfo.isDefault ? 'bg-blue-500/5' : ''}`"
+    @click="$openUrl(account.accountInfo.serverInfo.url)"
+  >
+    <div class="flex items-center space-x-2">
+      <UserAvatar :user="userAvatar" :active="account.accountInfo.isDefault" />
+      <div class="min-w-0 grow">
+        <div class="truncate overflow-hidden min-w-0">
+          {{ account.accountInfo.serverInfo.name }}
+          <span class="text-foreground-2 truncate min-w-0">
+            {{ account.accountInfo.serverInfo.url.split('//')[1] }}
+          </span>
+        </div>
+        <div class="truncate text-xs text-foreground-2">
+          {{ account.accountInfo.userInfo.email }}
+        </div>
+      </div>
+      <div class="transition opacity-0 group-hover:opacity-100">
+        <ArrowTopRightOnSquareIcon class="w-4 h-4" />
+      </div>
+    </div>
+  </button>
+</template>
+<script setup lang="ts">
+import { DUIAccount } from 'lib/accounts/composables/setup'
+import { ArrowTopRightOnSquareIcon } from '@heroicons/vue/20/solid'
+
+const props = defineProps<{
+  account: DUIAccount
+}>()
+
+const userAvatar = computed(() => {
+  return {
+    name: props.account.accountInfo.userInfo.name,
+    avatar: props.account.accountInfo.userInfo.avatar
+  }
+})
+
+const tip = computed(() => {
+  let value = ''
+  if (props.account.accountInfo.isDefault) value += 'This is your default account. '
+  if (!props.account.isValid) value += 'This account is not reachable.'
+  return value === '' ? null : value
+})
+
+const { $openUrl } = useNuxtApp()
+</script>
diff --git a/packages/dui3/components/header/UserMenu.vue b/packages/dui3/components/header/UserMenu.vue
index 161d0ec90..9a3093a9c 100644
--- a/packages/dui3/components/header/UserMenu.vue
+++ b/packages/dui3/components/header/UserMenu.vue
@@ -20,57 +20,64 @@
         <MenuItems
           class="absolute right-0 md:right-4 top-14 md:top-16 w-full md:w-64 origin-top-right bg-foundation sm:rounded-t-md rounded-b-md shadow-lg overflow-hidden"
         >
-          <MenuItem v-slot="{ active, close }" as="div">
-            <NuxtLink
-              :class="[
-                active ? 'bg-foundation-focus' : '',
-                'flex items-center justify-between px-2 py-3 text-sm text-foreground cursor-pointer transition'
-              ]"
-              to="/"
-              @click="close"
-            >
-              Home
-            </NuxtLink>
+          <MenuItem>
+            <div class="border border-t-1">
+              <div v-if="loading" class="p-2">Loading accounts...</div>
+              <div v-else class="p-2 flex items-center justify-between">
+                <div class="text-xs text-foreground-2">Your accounts</div>
+                <div>
+                  <FormButton
+                    text
+                    size="xs"
+                    @click.stop="accountStore.refreshAccounts()"
+                  >
+                    Refresh
+                  </FormButton>
+                </div>
+              </div>
+              <div class="space-y-0">
+                <HeaderUserAccount
+                  v-for="acc in accounts"
+                  :key="acc.accountInfo.id"
+                  :account="(acc as DUIAccount)"
+                />
+              </div>
+            </div>
           </MenuItem>
-
-          <MenuItem v-slot="{ active, close }" as="div">
-            <NuxtLink
-              :class="[
-                active ? 'bg-foundation-focus' : '',
-                'flex items-center justify-between px-2 py-3 text-sm text-foreground cursor-pointer transition'
-              ]"
-              to="/test"
-              @click="close"
-            >
-              Test Page
-            </NuxtLink>
+          <MenuItem v-slot="{ close }" as="div">
+            <div class="p-2 flex space-x-2 border-t-1">
+              <button
+                class="text-xs text-foreground-2 hover:text-primary transition"
+                @click="$showDevTools"
+              >
+                Dev tools
+              </button>
+              <NuxtLink
+                class="text-xs text-foreground-2 hover:text-primary transition"
+                to="/test"
+                @click="close()"
+              >
+                Test Page
+              </NuxtLink>
+            </div>
           </MenuItem>
-          <MenuItem as="div" class="p-2">
-            <FormButton
-              full-width
-              size="sm"
-              color="card"
-              :icon-right="CogIcon"
-              @click="$showDevTools"
-            >
-              Show Dev Tools
-            </FormButton>
-          </MenuItem>
-          <MenuItem as="div" class="border border-t-1">Hai</MenuItem>
         </MenuItems>
       </Transition>
     </Menu>
   </div>
 </template>
 <script setup lang="ts">
-import { XMarkIcon, CogIcon } from '@heroicons/vue/20/solid'
+import { XMarkIcon } from '@heroicons/vue/20/solid'
+import { storeToRefs } from 'pinia'
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
-import { useInjectedAccounts } from '~/lib/accounts/composables/setup'
+import { useAccountStore } from '~/store/accounts'
+import { DUIAccount } from 'lib/accounts/composables/setup'
+
+const accountStore = useAccountStore()
+const { accounts, defaultAccount, loading } = storeToRefs(accountStore)
 
 const { $showDevTools } = useNuxtApp()
 
-const { defaultAccount } = useInjectedAccounts()
-
 const user = computed(() => {
   if (!defaultAccount.value) return undefined
   return {
diff --git a/packages/dui3/lib/accounts/composables/setup.ts b/packages/dui3/lib/accounts/composables/setup.ts
index d9e4e46cc..97dcbfd9e 100644
--- a/packages/dui3/lib/accounts/composables/setup.ts
+++ b/packages/dui3/lib/accounts/composables/setup.ts
@@ -1,6 +1,6 @@
-import { ApolloClient } from '@apollo/client/core'
+import { ApolloClient, gql } from '@apollo/client/core'
 import { ApolloClients } from '@vue/apollo-composable'
-import { ShallowRef, ComputedRef } from 'vue'
+import { ComputedRef, Ref } from 'vue'
 import { Account } from '~/lib/bindings/definitions/IBasicConnectorBinding'
 import { resolveClientConfig } from '~/lib/core/configs/apollo'
 
@@ -8,30 +8,68 @@ export type DUIAccount = {
   /** account info coming from the host app */
   accountInfo: Account
   /** the graphql client; a bit superflous */
-  client: ApolloClient<unknown>
+  client?: ApolloClient<unknown>
+  /** whether an intial serverinfo query succeeded. */
+  isValid: boolean
 }
 
 export type DUIAccountsState = {
-  accounts: ShallowRef<DUIAccount[]>
+  accounts: Ref<DUIAccount[]>
+  validAccounts: ComputedRef<DUIAccount[]>
   refreshAccounts: () => Promise<void>
   defaultAccount: ComputedRef<DUIAccount | undefined>
+  loading: Ref<boolean>
 }
 
 const AccountsInjectionKey = 'DUI_ACCOUNTS_STATE'
+
 /**
  * Use this composable to set up the account bindings and graphql clients at the top of the app.
+ * TODO: Properly handle cases when user was not connected to the internet,
+ * and then actually got connected.
  */
 export function useAccountsSetup(): DUIAccountsState {
   const app = useNuxtApp()
   const $baseBinding = app.$baseBinding
 
-  // Using a shallow ref as we don't need inner values reactive (could be a needlessly big return from host app)
-  const accounts = shallowRef([] as DUIAccount[])
+  const accounts = ref<DUIAccount[]>([])
 
   const apolloClients = {} as Record<string, ApolloClient<unknown>>
 
+  // Tries to connect to the accounts and sets their is valid prop to false if fails.
+  const testAccounts = async (accs: DUIAccount[]) => {
+    const accountTestQuery = gql`
+      query AcccountTestQuery {
+        serverInfo {
+          version
+          name
+          company
+        }
+      }
+    `
+    for (const acc of accs) {
+      if (!acc.client) continue
+      try {
+        await acc.client.query({ query: accountTestQuery })
+        acc.isValid = true
+      } catch (error) {
+        // TODO: properly dispose and kill this client. It's unclear how to do it.
+        acc.isValid = false
+        // NOTE: we do not want to delete the client, as we might want to "refresh" in
+        // case the user was not connected to the interweb.
+        // acc.client.disableNetworkFetches = true
+        // acc.client.stop()
+        // delete acc.client
+      }
+    }
+  }
+
+  const loading = ref(false)
+
   // Matches local accounts coming from the host app to app state.
   const refreshAccounts = async () => {
+    loading.value = true
+
     const accs = await $baseBinding.getAccounts()
     // We create a whole new list of accounts that will replace the old list. This way we ensure we drop
     // out of scope old accounts that not exist anymore (TODO: test), and we don't need to do complex diffing.
@@ -39,7 +77,7 @@ export function useAccountsSetup(): DUIAccountsState {
     for (const acc of accs) {
       const existing = accounts.value.find((a) => a.accountInfo.id === acc.id)
       if (existing) {
-        newAccs.push(existing)
+        newAccs.push(existing as DUIAccount)
         continue
       }
 
@@ -54,10 +92,15 @@ export function useAccountsSetup(): DUIAccountsState {
 
       newAccs.push({
         accountInfo: acc,
-        client
+        client,
+        isValid: true
       })
     }
+    // We test accounts here so we try to prevent the app from querying/using invalid accounts.
+    await testAccounts(newAccs)
+    // Once we have tested the new accounts, finally set them.
     accounts.value = newAccs
+    loading.value = false
   }
 
   void refreshAccounts() // Promise that we do not want to await (convention with void)
@@ -66,15 +109,22 @@ export function useAccountsSetup(): DUIAccountsState {
     accounts.value.find((acc) => acc.accountInfo.isDefault)
   )
 
+  const validAccounts = computed(() => {
+    return accounts.value.filter((a) => a.isValid)
+  })
+
   const accState = {
     accounts,
     defaultAccount,
-    refreshAccounts
+    validAccounts,
+    refreshAccounts,
+    loading
   }
 
   app.vueApp.provide(ApolloClients, apolloClients)
   provide(AccountsInjectionKey, accState)
-  return accState
+
+  return accState // as DUIAccountsState
 }
 
 /**
diff --git a/packages/dui3/lib/bindings/definitions/IBinding.ts b/packages/dui3/lib/bindings/definitions/IBinding.ts
index 915da9282..1351b5e48 100644
--- a/packages/dui3/lib/bindings/definitions/IBinding.ts
+++ b/packages/dui3/lib/bindings/definitions/IBinding.ts
@@ -11,4 +11,8 @@ export interface IBinding<T> {
    * Currently needed for CefSharp, as right click inspect doesn't exist.
    */
   showDevTools: () => Promise<void>
+  /**
+   * Opens an url in the OS's default browser.
+   */
+  openUrl: (url: string) => Promise<void>
 }
diff --git a/packages/dui3/lib/bridge/definitions/index.ts b/packages/dui3/lib/bridge/definitions/index.ts
index 3eb9dd242..b2a789991 100644
--- a/packages/dui3/lib/bridge/definitions/index.ts
+++ b/packages/dui3/lib/bridge/definitions/index.ts
@@ -5,4 +5,5 @@ export type IRawBridge = {
   GetBindingsMethodNames: () => Promise<string[]>
   RunMethod: (methodName: string, args: string) => Promise<string>
   ShowDevTools: () => Promise<void>
+  OpenUrl: (url: string) => Promise<void>
 }
diff --git a/packages/dui3/lib/bridge/generic.ts b/packages/dui3/lib/bridge/generic.ts
index 91de4deeb..b6559e0d0 100644
--- a/packages/dui3/lib/bridge/generic.ts
+++ b/packages/dui3/lib/bridge/generic.ts
@@ -60,6 +60,10 @@ export class GenericBridge extends BaseBridge {
   public showDevTools() {
     this.bridge.ShowDevTools()
   }
+
+  public openUrl(url: string) {
+    this.bridge.OpenUrl(url)
+  }
 }
 
 const lowercaseMethodName = (name: string) =>
diff --git a/packages/dui3/lib/common/generated/gql/gql.ts b/packages/dui3/lib/common/generated/gql/gql.ts
index 507855376..c2152dc4a 100644
--- a/packages/dui3/lib/common/generated/gql/gql.ts
+++ b/packages/dui3/lib/common/generated/gql/gql.ts
@@ -13,6 +13,7 @@ import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-
  * Therefore it is highly recommended to use the babel-plugin for production.
  */
 const documents = {
+    "\n      query AcccountTestQuery {\n        serverInfo {\n          version\n          name\n          company\n        }\n      }\n    ": types.AcccountTestQueryDocument,
     "\n  query ServerInfoTest {\n    serverInfo {\n      version\n    }\n  }\n": types.ServerInfoTestDocument,
 };
 
@@ -30,6 +31,10 @@ const documents = {
 **/
 export function graphql(source: string): unknown;
 
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n      query AcccountTestQuery {\n        serverInfo {\n          version\n          name\n          company\n        }\n      }\n    "): (typeof documents)["\n      query AcccountTestQuery {\n        serverInfo {\n          version\n          name\n          company\n        }\n      }\n    "];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
diff --git a/packages/dui3/lib/common/generated/gql/graphql.ts b/packages/dui3/lib/common/generated/gql/graphql.ts
index 5db611423..29a70eb04 100644
--- a/packages/dui3/lib/common/generated/gql/graphql.ts
+++ b/packages/dui3/lib/common/generated/gql/graphql.ts
@@ -209,7 +209,7 @@ export type Comment = {
    * Legacy comment viewer data field
    * @deprecated Use the new viewerState field instead
    */
-  data?: Maybe<LegacyCommentViewerData>;
+  data?: Maybe<Scalars['JSONObject']>;
   /** Whether or not comment is a reply to another comment */
   hasParent: Scalars['Boolean'];
   id: Scalars['String'];
@@ -369,6 +369,7 @@ export type Commit = {
   authorAvatar?: Maybe<Scalars['String']>;
   authorId?: Maybe<Scalars['String']>;
   authorName?: Maybe<Scalars['String']>;
+  branch?: Maybe<Branch>;
   branchName?: Maybe<Scalars['String']>;
   /**
    * The total number of comments for this commit. To actually get the comments, use the comments query and pass in a resource array consisting of of this commit's id.
@@ -635,7 +636,7 @@ export type Model = {
   pendingImportedVersions: Array<FileUpload>;
   previewUrl?: Maybe<Scalars['String']>;
   updatedAt: Scalars['DateTime'];
-  version?: Maybe<Version>;
+  version: Version;
   versions: VersionCollection;
 };
 
@@ -694,6 +695,8 @@ export type ModelMutationsUpdateArgs = {
 export type ModelVersionsFilter = {
   /** Make sure these specified versions are always loaded first */
   priorityIds?: InputMaybe<Array<Scalars['String']>>;
+  /** Only return versions specified in `priorityIds` */
+  priorityIdsOnly?: InputMaybe<Scalars['Boolean']>;
 };
 
 export type ModelsTreeItem = {
@@ -1221,7 +1224,7 @@ export type Project = {
   /** Collaborators who have been invited, but not yet accepted. */
   invitedTeam?: Maybe<Array<PendingStreamCollaborator>>;
   /** Returns a specific model by its ID */
-  model?: Maybe<Model>;
+  model: Model;
   /** Return a model tree of children for the specified model name */
   modelChildrenTree: Array<ModelsTreeItem>;
   /** Returns a flat list of all models */
@@ -1605,7 +1608,7 @@ export type Query = {
    * Find a specific project. Will throw an authorization error if active user isn't authorized
    * to see it, for example, if a project isn't public and the user doesn't have the appropriate rights.
    */
-  project?: Maybe<Project>;
+  project: Project;
   /**
    * Look for an invitation to a project, for the current user (authed or not). If token
    * isn't specified, the server will look for any valid invite.
@@ -2266,6 +2269,7 @@ export type SubscriptionUserViewerActivityArgs = {
 
 
 export type SubscriptionViewerUserActivityBroadcastedArgs = {
+  sessionId?: InputMaybe<Scalars['String']>;
   target: ViewerUpdateTrackingTarget;
 };
 
@@ -2624,10 +2628,16 @@ export type WebhookUpdateInput = {
   url?: InputMaybe<Scalars['String']>;
 };
 
+export type AcccountTestQueryQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type AcccountTestQueryQuery = { __typename?: 'Query', serverInfo: { __typename?: 'ServerInfo', version?: string | null, name: string, company?: string | null } };
+
 export type ServerInfoTestQueryVariables = Exact<{ [key: string]: never; }>;
 
 
 export type ServerInfoTestQuery = { __typename?: 'Query', serverInfo: { __typename?: 'ServerInfo', version?: string | null } };
 
 
+export const AcccountTestQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"AcccountTestQuery"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"serverInfo"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"version"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"company"}}]}}]}}]} as unknown as DocumentNode<AcccountTestQueryQuery, AcccountTestQueryQueryVariables>;
 export const ServerInfoTestDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ServerInfoTest"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"serverInfo"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"version"}}]}}]}}]} as unknown as DocumentNode<ServerInfoTestQuery, ServerInfoTestQueryVariables>;
\ No newline at end of file
diff --git a/packages/dui3/lib/core/configs/apollo.ts b/packages/dui3/lib/core/configs/apollo.ts
index 9582990e2..bec60494b 100644
--- a/packages/dui3/lib/core/configs/apollo.ts
+++ b/packages/dui3/lib/core/configs/apollo.ts
@@ -250,6 +250,7 @@ function createWsClient(params: {
 
   return new SubscriptionClient(wsEndpoint, {
     reconnect: true,
+    reconnectionAttempts: 3,
     connectionParams: () => {
       const token = authToken()
       const Authorization = token?.length ? `Bearer ${token}` : null
diff --git a/packages/dui3/lib/document-info/index.ts b/packages/dui3/lib/document-info/index.ts
deleted file mode 100644
index a65b89c57..000000000
--- a/packages/dui3/lib/document-info/index.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { DocumentInfo } from '~/lib/bindings/definitions/baseBindings'
-import { ref } from 'vue'
-
-const DocumentInfoInjectionKey = 'DUI_DOC_INFO_STATE'
-
-export function useDocumentInfoSetup() {
-  const app = useNuxtApp()
-  const documentInfo = ref<DocumentInfo>()
-
-  app.$baseBinding?.on('documentChanged', () => {
-    setTimeout(async () => {
-      const docInfo = await app.$baseBinding.getDocumentInfo()
-      documentInfo.value = docInfo
-    }, 500) // Rhino needs some time.
-  })
-  ;(async () => (documentInfo.value = await app.$baseBinding.getDocumentInfo()))()
-  provide(DocumentInfoInjectionKey, documentInfo)
-  return documentInfo
-}
-
-export function useInjectedDocumentInfo() {
-  const documentInfo = inject<Ref<DocumentInfo>>(DocumentInfoInjectionKey)
-  return documentInfo
-}
diff --git a/packages/dui3/nuxt.config.ts b/packages/dui3/nuxt.config.ts
index a18ebaa86..b6304309a 100644
--- a/packages/dui3/nuxt.config.ts
+++ b/packages/dui3/nuxt.config.ts
@@ -6,7 +6,7 @@ export default defineNuxtConfig({
     shim: false,
     strict: true
   },
-  modules: ['@nuxtjs/tailwindcss', '@speckle/ui-components-nuxt'],
+  modules: ['@nuxtjs/tailwindcss', '@speckle/ui-components-nuxt', '@pinia/nuxt'],
   alias: {
     // Rewriting all lodash calls to lodash-es for proper tree-shaking & chunk splitting
     lodash: 'lodash-es'
diff --git a/packages/dui3/package.json b/packages/dui3/package.json
index 1e0d926fb..8b5fcd4c0 100644
--- a/packages/dui3/package.json
+++ b/packages/dui3/package.json
@@ -25,6 +25,7 @@
     "@apollo/client": "^3.7.14",
     "@headlessui/vue": "^1.7.13",
     "@heroicons/vue": "^2.0.12",
+    "@pinia/nuxt": "^0.4.11",
     "@speckle/shared": "workspace:^",
     "@speckle/ui-components": "workspace:^",
     "@speckle/ui-components-nuxt": "workspace:^",
@@ -35,8 +36,10 @@
     "graphql-tag": "^2.12.6",
     "lodash-es": "^4.17.21",
     "nanoevents": "^8.0.0",
+    "pinia": "^2.1.4",
     "portal-vue": "^3.0.0",
-    "subscriptions-transport-ws": "^0.11.0"
+    "subscriptions-transport-ws": "^0.11.0",
+    "vue-tippy": "^6.2.0"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "^2.13.6",
diff --git a/packages/dui3/pages/index.vue b/packages/dui3/pages/index.vue
index 5d62e4cf8..c6fea3398 100644
--- a/packages/dui3/pages/index.vue
+++ b/packages/dui3/pages/index.vue
@@ -1,16 +1,18 @@
 <template>
   <div>
     <div class="space-y-2">
-      <div>
+      <div v-if="!loading">
         Hello world! You have
-        {{ accounts.length }} accounts.
+        {{ accounts.length }} accounts, out of which {{ validAccounts.length }} are
+        valid.
       </div>
+      <div v-else>Loading Accounts...</div>
       <div>
         <FormButton to="/test">Go To Test Bindings Page</FormButton>
       </div>
       <div v-for="acc in accounts" :key="acc.accountInfo.id">
         <div class="truncate text-xs">
-          {{ acc.accountInfo.userInfo.email }} @
+          {{ acc.isValid }} // {{ acc.accountInfo.userInfo.email }} @
           <b>{{ acc.accountInfo.serverInfo.url }}</b>
           {{ acc.accountInfo.serverInfo.name }}
         </div>
@@ -27,24 +29,24 @@
       <div>Doc info:</div>
       <div>{{ documentInfo }}</div>
       <div>
-        <FormButton @click="refreshAccounts()">Refresh Accounts</FormButton>
+        <FormButton @click="accountStore.refreshAccounts()">
+          Refresh Accounts
+        </FormButton>
       </div>
     </div>
   </div>
 </template>
 <script setup lang="ts">
 import { UseQueryReturn, useQuery } from '@vue/apollo-composable'
-import { useInjectedAccounts } from '~/lib/accounts/composables/setup'
+import { storeToRefs } from 'pinia'
 import { graphql } from '~/lib/common/generated/gql'
 import { ServerInfoTestQuery } from '~/lib/common/generated/gql/graphql'
-import { useInjectedDocumentInfo } from '~/lib/document-info'
+import { useAccountStore } from '~/store/accounts'
+import { useDocumentInfoStore } from '~/store/documentInfo'
 
-const { accounts, refreshAccounts, defaultAccount } = useInjectedAccounts()
-
-const { $baseBinding } = useNuxtApp()
-const appName = await $baseBinding.getSourceApplicationName()
-
-const documentInfo = useInjectedDocumentInfo()
+const accountStore = useAccountStore()
+const { accounts, defaultAccount, loading, validAccounts } = storeToRefs(accountStore)
+const { documentInfo } = storeToRefs(useDocumentInfoStore())
 
 const versionQuery = graphql(`
   query ServerInfoTest {
@@ -54,7 +56,7 @@ const versionQuery = graphql(`
   }
 `)
 
-const clientIds = accounts.value.map((a) => a.accountInfo.id)
+const clientIds = validAccounts.value.map((a) => a.accountInfo.id)
 
 const queries: Record<
   string,
diff --git a/packages/dui3/plugins/00.bindings.ts b/packages/dui3/plugins/00.bindings.ts
index ba66c8a2c..3451380bf 100644
--- a/packages/dui3/plugins/00.bindings.ts
+++ b/packages/dui3/plugins/00.bindings.ts
@@ -44,12 +44,17 @@ export default defineNuxtPlugin(async () => {
     baseBinding.showDevTools()
   }
 
+  const openUrl = (url: string) => {
+    baseBinding.openUrl(url)
+  }
+
   return {
     provide: {
       testBindings,
       nonExistantBindings,
       baseBinding,
-      showDevTools
+      showDevTools,
+      openUrl
     }
   }
 })
diff --git a/packages/dui3/plugins/apollo.ts b/packages/dui3/plugins/apollo.ts
deleted file mode 100644
index 8f9a7dfb0..000000000
--- a/packages/dui3/plugins/apollo.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-// import { ApolloClient } from '@apollo/client/core'
-// import { ApolloClients } from '@vue/apollo-composable'
-// import { resolveClientConfig } from '~/lib/core/configs/apollo'
-
-export default defineNuxtPlugin(() => {
-  // Note: as accounts can be refreshed at runtime, i tried as an experiment
-  // moving them to a composable (/lib/accounts/composables/setup.ts)
-})
-
-// export default defineNuxtPlugin((nuxtApp) => {
-//   /**
-//    * TODO: You can use `window` here to get credentials for all of the clients
-//    * we need from the parent connectors. The following is just an example
-//    */
-//   const { $bindings } = useNuxtApp()
-
-//   const apolloClients = {
-//     latest: new ApolloClient(
-//       // Imagine endpoint & token is resolved from window or something
-//       resolveClientConfig({
-//         httpEndpoint: 'https://latest.speckle.systems/graphql',
-//         authToken: () => null
-//       })
-//     ),
-//     xyz: new ApolloClient(
-//       // Imagine endpoint & token is resolved from window or something
-//       resolveClientConfig({
-//         httpEndpoint: 'https://speckle.xyz/graphql',
-//         authToken: () => null
-//       })
-//     )
-//   }
-
-//   nuxtApp.vueApp.provide(ApolloClients, apolloClients)
-//   return {
-//     provide: {
-//       apolloClients
-//     }
-//   }
-// })
diff --git a/packages/dui3/plugins/tippy.ts b/packages/dui3/plugins/tippy.ts
new file mode 100644
index 000000000..a3a674eb8
--- /dev/null
+++ b/packages/dui3/plugins/tippy.ts
@@ -0,0 +1,11 @@
+import VueTippy from 'vue-tippy'
+import 'tippy.js/dist/tippy.css'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(VueTippy, {
+    defaultProps: {
+      arrow: true
+    },
+    flipDuration: 0
+  })
+})
diff --git a/packages/dui3/store/accounts.ts b/packages/dui3/store/accounts.ts
new file mode 100644
index 000000000..16872ea9d
--- /dev/null
+++ b/packages/dui3/store/accounts.ts
@@ -0,0 +1,10 @@
+import { defineStore } from 'pinia'
+import { useInjectedAccounts } from '~/lib/accounts/composables/setup'
+
+// NOTE: this store simply wraps around the injected accounts composable (for now)
+export const useAccountStore = defineStore('accountStore', () => {
+  const { accounts, refreshAccounts, defaultAccount, validAccounts, loading } =
+    useInjectedAccounts()
+
+  return { accounts, refreshAccounts, defaultAccount, validAccounts, loading }
+})
diff --git a/packages/dui3/store/documentInfo.ts b/packages/dui3/store/documentInfo.ts
new file mode 100644
index 000000000..d5f6556f3
--- /dev/null
+++ b/packages/dui3/store/documentInfo.ts
@@ -0,0 +1,23 @@
+import { defineStore } from 'pinia'
+import { DocumentInfo } from 'lib/bindings/definitions/IBasicConnectorBinding'
+
+export const useDocumentInfoStore = defineStore('documentInfoStore', () => {
+  const app = useNuxtApp()
+  const documentInfo = ref<DocumentInfo>()
+
+  app.$baseBinding.on('documentChanged', () => {
+    console.log('doc changed')
+    setTimeout(async () => {
+      const docInfo = await app.$baseBinding.getDocumentInfo()
+      documentInfo.value = docInfo
+    }, 500) // Rhino needs some time.
+  })
+
+  const initDocInfo = async () => {
+    documentInfo.value = await app.$baseBinding.getDocumentInfo()
+  }
+
+  void initDocInfo()
+
+  return { documentInfo }
+})
diff --git a/yarn.lock b/yarn.lock
index ae1a803f4..9c1c28417 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11178,6 +11178,31 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@nuxt/kit@npm:^3.5.0":
+  version: 3.6.5
+  resolution: "@nuxt/kit@npm:3.6.5"
+  dependencies:
+    "@nuxt/schema": 3.6.5
+    c12: ^1.4.2
+    consola: ^3.2.3
+    defu: ^6.1.2
+    globby: ^13.2.2
+    hash-sum: ^2.0.0
+    ignore: ^5.2.4
+    jiti: ^1.19.1
+    knitwork: ^1.0.0
+    mlly: ^1.4.0
+    pathe: ^1.1.1
+    pkg-types: ^1.0.3
+    scule: ^1.0.0
+    semver: ^7.5.3
+    unctx: ^2.3.1
+    unimport: ^3.0.14
+    untyped: ^1.3.2
+  checksum: 75fe7e602984682bbd51c4031f64292886475238ebd5eaa9c5dc52507adbfa0b1e046eab9df0796092ffc2ca16537673d1feb3021af29dbcda715d3607bd73fb
+  languageName: node
+  linkType: hard
+
 "@nuxt/postcss8@npm:^1.1.3":
   version: 1.1.3
   resolution: "@nuxt/postcss8@npm:1.1.3"
@@ -11291,6 +11316,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@nuxt/schema@npm:3.6.5":
+  version: 3.6.5
+  resolution: "@nuxt/schema@npm:3.6.5"
+  dependencies:
+    defu: ^6.1.2
+    hookable: ^5.5.3
+    pathe: ^1.1.1
+    pkg-types: ^1.0.3
+    postcss-import-resolver: ^2.0.0
+    std-env: ^3.3.3
+    ufo: ^1.1.2
+    unimport: ^3.0.14
+    untyped: ^1.3.2
+  checksum: bc3a83066fc704e0ec01d2514ae9c0f129bbbeb16c64787c26941a4e779900bd5666c805af41070546b63ed35a5ebb4935f4c6780e943a8e03079a2eba0bf05c
+  languageName: node
+  linkType: hard
+
 "@nuxt/telemetry@npm:^2.1.10":
   version: 2.1.10
   resolution: "@nuxt/telemetry@npm:2.1.10"
@@ -11546,6 +11588,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@pinia/nuxt@npm:^0.4.11":
+  version: 0.4.11
+  resolution: "@pinia/nuxt@npm:0.4.11"
+  dependencies:
+    "@nuxt/kit": ^3.5.0
+    pinia: ">=2.1.0"
+  checksum: 1a634ab7cbd1ecc3fd18d909e2ef6ef7d9cd161503d638f452e1dbd87233e9f05ccd0c11d50d40a66ceb37d569b02521dfdce895b39653b513d7be39cfb8af1e
+  languageName: node
+  linkType: hard
+
 "@pkgjs/parseargs@npm:^0.11.0":
   version: 0.11.0
   resolution: "@pkgjs/parseargs@npm:0.11.0"
@@ -12302,6 +12354,7 @@ __metadata:
     "@headlessui/vue": ^1.7.13
     "@heroicons/vue": ^2.0.12
     "@nuxtjs/tailwindcss": ^6.7.0
+    "@pinia/nuxt": ^0.4.11
     "@speckle/shared": "workspace:^"
     "@speckle/ui-components": "workspace:^"
     "@speckle/ui-components-nuxt": "workspace:^"
@@ -12324,6 +12377,7 @@ __metadata:
     lodash-es: ^4.17.21
     nanoevents: ^8.0.0
     nuxt: ^3.6.3
+    pinia: ^2.1.4
     portal-vue: ^3.0.0
     postcss: ^8.4.18
     postcss-custom-properties: ^12.1.9
@@ -12338,6 +12392,7 @@ __metadata:
     tailwindcss: ^3.3.2
     type-fest: ^3.5.1
     typescript: ^4.8.3
+    vue-tippy: ^6.2.0
     vue-tsc: 1.3.4
   languageName: unknown
   linkType: soft
@@ -24739,6 +24794,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dotenv@npm:^16.3.1":
+  version: 16.3.1
+  resolution: "dotenv@npm:16.3.1"
+  checksum: 15d75e7279018f4bafd0ee9706593dd14455ddb71b3bcba9c52574460b7ccaf67d5cf8b2c08a5af1a9da6db36c956a04a1192b101ee102a3e0cf8817bbcf3dfd
+  languageName: node
+  linkType: hard
+
 "dotenv@npm:^8.2.0":
   version: 8.6.0
   resolution: "dotenv@npm:8.6.0"
@@ -25680,83 +25742,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild@npm:^0.18.10, esbuild@npm:^0.18.11":
-  version: 0.18.13
-  resolution: "esbuild@npm:0.18.13"
-  dependencies:
-    "@esbuild/android-arm": 0.18.13
-    "@esbuild/android-arm64": 0.18.13
-    "@esbuild/android-x64": 0.18.13
-    "@esbuild/darwin-arm64": 0.18.13
-    "@esbuild/darwin-x64": 0.18.13
-    "@esbuild/freebsd-arm64": 0.18.13
-    "@esbuild/freebsd-x64": 0.18.13
-    "@esbuild/linux-arm": 0.18.13
-    "@esbuild/linux-arm64": 0.18.13
-    "@esbuild/linux-ia32": 0.18.13
-    "@esbuild/linux-loong64": 0.18.13
-    "@esbuild/linux-mips64el": 0.18.13
-    "@esbuild/linux-ppc64": 0.18.13
-    "@esbuild/linux-riscv64": 0.18.13
-    "@esbuild/linux-s390x": 0.18.13
-    "@esbuild/linux-x64": 0.18.13
-    "@esbuild/netbsd-x64": 0.18.13
-    "@esbuild/openbsd-x64": 0.18.13
-    "@esbuild/sunos-x64": 0.18.13
-    "@esbuild/win32-arm64": 0.18.13
-    "@esbuild/win32-ia32": 0.18.13
-    "@esbuild/win32-x64": 0.18.13
-  dependenciesMeta:
-    "@esbuild/android-arm":
-      optional: true
-    "@esbuild/android-arm64":
-      optional: true
-    "@esbuild/android-x64":
-      optional: true
-    "@esbuild/darwin-arm64":
-      optional: true
-    "@esbuild/darwin-x64":
-      optional: true
-    "@esbuild/freebsd-arm64":
-      optional: true
-    "@esbuild/freebsd-x64":
-      optional: true
-    "@esbuild/linux-arm":
-      optional: true
-    "@esbuild/linux-arm64":
-      optional: true
-    "@esbuild/linux-ia32":
-      optional: true
-    "@esbuild/linux-loong64":
-      optional: true
-    "@esbuild/linux-mips64el":
-      optional: true
-    "@esbuild/linux-ppc64":
-      optional: true
-    "@esbuild/linux-riscv64":
-      optional: true
-    "@esbuild/linux-s390x":
-      optional: true
-    "@esbuild/linux-x64":
-      optional: true
-    "@esbuild/netbsd-x64":
-      optional: true
-    "@esbuild/openbsd-x64":
-      optional: true
-    "@esbuild/sunos-x64":
-      optional: true
-    "@esbuild/win32-arm64":
-      optional: true
-    "@esbuild/win32-ia32":
-      optional: true
-    "@esbuild/win32-x64":
-      optional: true
-  bin:
-    esbuild: bin/esbuild
-  checksum: 6512b7e186cffb4546f3508f1e2d1dd27eb43a8a8a79d4ea7eb34ae3dbdc647679ae96b29c54a4951c355ee3168e8ad9c128cbfc033154b0849e269276d5bc9c
-  languageName: node
-  linkType: hard
-
 "esbuild@npm:^0.18.0":
   version: 0.18.15
   resolution: "esbuild@npm:0.18.15"
@@ -25834,6 +25819,83 @@ __metadata:
   languageName: node
   linkType: hard
 
+"esbuild@npm:^0.18.10, esbuild@npm:^0.18.11":
+  version: 0.18.13
+  resolution: "esbuild@npm:0.18.13"
+  dependencies:
+    "@esbuild/android-arm": 0.18.13
+    "@esbuild/android-arm64": 0.18.13
+    "@esbuild/android-x64": 0.18.13
+    "@esbuild/darwin-arm64": 0.18.13
+    "@esbuild/darwin-x64": 0.18.13
+    "@esbuild/freebsd-arm64": 0.18.13
+    "@esbuild/freebsd-x64": 0.18.13
+    "@esbuild/linux-arm": 0.18.13
+    "@esbuild/linux-arm64": 0.18.13
+    "@esbuild/linux-ia32": 0.18.13
+    "@esbuild/linux-loong64": 0.18.13
+    "@esbuild/linux-mips64el": 0.18.13
+    "@esbuild/linux-ppc64": 0.18.13
+    "@esbuild/linux-riscv64": 0.18.13
+    "@esbuild/linux-s390x": 0.18.13
+    "@esbuild/linux-x64": 0.18.13
+    "@esbuild/netbsd-x64": 0.18.13
+    "@esbuild/openbsd-x64": 0.18.13
+    "@esbuild/sunos-x64": 0.18.13
+    "@esbuild/win32-arm64": 0.18.13
+    "@esbuild/win32-ia32": 0.18.13
+    "@esbuild/win32-x64": 0.18.13
+  dependenciesMeta:
+    "@esbuild/android-arm":
+      optional: true
+    "@esbuild/android-arm64":
+      optional: true
+    "@esbuild/android-x64":
+      optional: true
+    "@esbuild/darwin-arm64":
+      optional: true
+    "@esbuild/darwin-x64":
+      optional: true
+    "@esbuild/freebsd-arm64":
+      optional: true
+    "@esbuild/freebsd-x64":
+      optional: true
+    "@esbuild/linux-arm":
+      optional: true
+    "@esbuild/linux-arm64":
+      optional: true
+    "@esbuild/linux-ia32":
+      optional: true
+    "@esbuild/linux-loong64":
+      optional: true
+    "@esbuild/linux-mips64el":
+      optional: true
+    "@esbuild/linux-ppc64":
+      optional: true
+    "@esbuild/linux-riscv64":
+      optional: true
+    "@esbuild/linux-s390x":
+      optional: true
+    "@esbuild/linux-x64":
+      optional: true
+    "@esbuild/netbsd-x64":
+      optional: true
+    "@esbuild/openbsd-x64":
+      optional: true
+    "@esbuild/sunos-x64":
+      optional: true
+    "@esbuild/win32-arm64":
+      optional: true
+    "@esbuild/win32-ia32":
+      optional: true
+    "@esbuild/win32-x64":
+      optional: true
+  bin:
+    esbuild: bin/esbuild
+  checksum: 6512b7e186cffb4546f3508f1e2d1dd27eb43a8a8a79d4ea7eb34ae3dbdc647679ae96b29c54a4951c355ee3168e8ad9c128cbfc033154b0849e269276d5bc9c
+  languageName: node
+  linkType: hard
+
 "escalade@npm:^3.1.1":
   version: 3.1.1
   resolution: "escalade@npm:3.1.1"
@@ -32997,7 +33059,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lru-cache@npm:^10.0.0":
+"lru-cache@npm:^10.0.0, lru-cache@npm:^9.1.1 || ^10.0.0":
   version: 10.0.0
   resolution: "lru-cache@npm:10.0.0"
   checksum: 18f101675fe283bc09cda0ef1e3cc83781aeb8373b439f086f758d1d91b28730950db785999cd060d3c825a8571c03073e8c14512b6655af2188d623031baf50
@@ -33051,13 +33113,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lru-cache@npm:^9.1.1 || ^10.0.0":
-  version: 10.0.0
-  resolution: "lru-cache@npm:10.0.0"
-  checksum: 18f101675fe283bc09cda0ef1e3cc83781aeb8373b439f086f758d1d91b28730950db785999cd060d3c825a8571c03073e8c14512b6655af2188d623031baf50
-  languageName: node
-  linkType: hard
-
 "lru_map@npm:^0.3.3":
   version: 0.3.3
   resolution: "lru_map@npm:0.3.3"
@@ -36896,6 +36951,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pinia@npm:>=2.1.0, pinia@npm:^2.1.4":
+  version: 2.1.4
+  resolution: "pinia@npm:2.1.4"
+  dependencies:
+    "@vue/devtools-api": ^6.5.0
+    vue-demi: ">=0.14.5"
+  peerDependencies:
+    "@vue/composition-api": ^1.4.0
+    typescript: ">=4.4.4"
+    vue: ^2.6.14 || ^3.3.0
+  peerDependenciesMeta:
+    "@vue/composition-api":
+      optional: true
+    typescript:
+      optional: true
+  checksum: 5285b1415e6c88698d41393e9144dfd0fbbb7f88cdc90637f6bf3526046c1f171befe01b2b063e9f6004f16b6c8dc1ed3ae9b2434ccf69403fec291215f0e1e3
+  languageName: node
+  linkType: hard
+
 "pinkie-promise@npm:^2.0.0":
   version: 2.0.1
   resolution: "pinkie-promise@npm:2.0.1"
@@ -40858,7 +40932,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"semver@npm:>=5.7.2, semver@npm:^7.0.0, semver@npm:^7.1.1, semver@npm:^7.1.2, semver@npm:^7.3.2, semver@npm:^7.3.4, semver@npm:^7.3.5, semver@npm:^7.3.6, semver@npm:^7.3.7, semver@npm:^7.3.8, semver@npm:^7.5.0, semver@npm:^7.5.1, semver@npm:^7.5.4":
+"semver@npm:>=5.7.2, semver@npm:^7.0.0, semver@npm:^7.1.1, semver@npm:^7.1.2, semver@npm:^7.3.2, semver@npm:^7.3.4, semver@npm:^7.3.5, semver@npm:^7.3.6, semver@npm:^7.3.7, semver@npm:^7.3.8, semver@npm:^7.5.0, semver@npm:^7.5.1, semver@npm:^7.5.3, semver@npm:^7.5.4":
   version: 7.5.4
   resolution: "semver@npm:7.5.4"
   dependencies:
@@ -45189,6 +45263,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vue-demi@npm:>=0.14.5":
+  version: 0.14.5
+  resolution: "vue-demi@npm:0.14.5"
+  peerDependencies:
+    "@vue/composition-api": ^1.0.0-rc.1
+    vue: ^3.0.0-0 || ^2.6.0
+  peerDependenciesMeta:
+    "@vue/composition-api":
+      optional: true
+  bin:
+    vue-demi-fix: bin/vue-demi-fix.js
+    vue-demi-switch: bin/vue-demi-switch.js
+  checksum: ff44b9372b8224590514252a2f73363cced6062205f9628a6b130dccb80e2023d55cd9d1da94aeb68d5539b7ea9eedcecf88ab281a3a9ff48b8db4c5366b9643
+  languageName: node
+  linkType: hard
+
 "vue-demi@npm:^0.13.1":
   version: 0.13.5
   resolution: "vue-demi@npm:0.13.5"
@@ -45387,6 +45477,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vue-tippy@npm:^6.2.0":
+  version: 6.2.0
+  resolution: "vue-tippy@npm:6.2.0"
+  dependencies:
+    tippy.js: ^6.3.7
+  peerDependencies:
+    vue: ^3.2.0
+  checksum: 8444fcccd6aa5ec7a102bd4f92627ae53e8114f2daa1b7bcbaca87b763cdcda6efd9bacb6782a62569e4db5b482892c895e2ab4010d1913c6f9a8629ecb1abcf
+  languageName: node
+  linkType: hard
+
 "vue-tsc@npm:1.3.4":
   version: 1.3.4
   resolution: "vue-tsc@npm:1.3.4"

From 3b4b8c3f0daad96fff25a007c4366e007581edf0 Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Sun, 23 Jul 2023 18:51:41 +0100
Subject: [PATCH 33/35] feat(dui3): minor cleanup test page

---
 packages/dui3/pages/test.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/dui3/pages/test.vue b/packages/dui3/pages/test.vue
index 68314d233..3f4bfaa1a 100644
--- a/packages/dui3/pages/test.vue
+++ b/packages/dui3/pages/test.vue
@@ -1,5 +1,10 @@
 <template>
   <div class="flex flex-col space-y-2">
+    <Portal to="navigation">
+      <FormButton to="/" size="sm" :icon-left="ArrowLeftIcon" class="ml-2">
+        Back home
+      </FormButton>
+    </Portal>
     <div>
       <p class="text-sm text-foreground-2 py-2 px-2">
         Do not expect these to save the day. They are just some
@@ -37,7 +42,8 @@
 </template>
 
 <script setup lang="ts">
-import { TestEventArgs } from '~/lib/bindings/definitions/testBindings'
+import { ArrowLeftIcon } from '@heroicons/vue/20/solid'
+import { TestEventArgs } from '~/lib/bindings/definitions/ITestBinding'
 import { CheckIcon, MinusIcon, XMarkIcon } from '@heroicons/vue/20/solid'
 const { $testBindings } = useNuxtApp()
 

From c6c1c1c0242d8e8a9190449a890a51425abe47b9 Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Sun, 23 Jul 2023 20:30:40 +0100
Subject: [PATCH 34/35] feat(dui3): adds theme config switching

---
 packages/dui3/app.vue                         | 12 ++--
 .../dui3/components/header/UserAccount.vue    |  2 +-
 packages/dui3/components/header/UserMenu.vue  | 49 ++++++++-----
 .../bindings/definitions/IConfigBinding.ts    | 41 +++++++++++
 packages/dui3/lib/bridge/generic.ts           |  2 +-
 packages/dui3/pages/index.vue                 | 71 ++-----------------
 packages/dui3/plugins/00.bindings.ts          | 10 +++
 packages/dui3/store/uiConfig.ts               | 34 +++++++++
 8 files changed, 134 insertions(+), 87 deletions(-)
 create mode 100644 packages/dui3/lib/bindings/definitions/IConfigBinding.ts
 create mode 100644 packages/dui3/store/uiConfig.ts

diff --git a/packages/dui3/app.vue b/packages/dui3/app.vue
index f13f49d79..aaadc1d36 100644
--- a/packages/dui3/app.vue
+++ b/packages/dui3/app.vue
@@ -6,18 +6,22 @@
   </div>
 </template>
 <script setup lang="ts">
+import { storeToRefs } from 'pinia'
 import { useAccountsSetup } from '~/lib/accounts/composables/setup'
-// import { useDocumentInfoSetup } from '~/lib/document-info'
+import { useDocumentInfoStore } from '~/store/uiConfig'
+
+const uiConfigStore = useDocumentInfoStore()
+const { isDarkTheme } = storeToRefs(uiConfigStore)
 
 useAccountsSetup()
-// useDocumentInfoSetup()
 
 useHead({
   // Title suffix
   titleTemplate: (titleChunk) =>
-    titleChunk ? `${titleChunk} - Speckle DUIv3` : 'Speckle DUIv3',
+    titleChunk ? `${titleChunk as string} - Speckle DUIv3` : 'Speckle DUIv3',
   htmlAttrs: {
-    lang: 'en'
+    lang: 'en',
+    class: computed(() => (isDarkTheme.value ? `dark` : ``))
   },
   bodyAttrs: {
     class: 'simple-scrollbar bg-foundation-page text-foreground'
diff --git a/packages/dui3/components/header/UserAccount.vue b/packages/dui3/components/header/UserAccount.vue
index f681463a9..9e0608bfb 100644
--- a/packages/dui3/components/header/UserAccount.vue
+++ b/packages/dui3/components/header/UserAccount.vue
@@ -1,7 +1,7 @@
 <template>
   <button
     v-tippy="tip"
-    :class="`block min-w-0 w-full max-w-full text-left items-center justify-between space-x-2 hover:bg-primary-muted transition p-2 select-none group hover:cursor-pointer hover:text-primary ${
+    :class="`block w-full  text-left items-center space-x-2 hover:bg-primary-muted transition p-2 select-none group hover:cursor-pointer hover:text-primary ${
       !account.isValid ? 'text-danger bg-rose-500/10' : ''
     } ${account.accountInfo.isDefault ? 'bg-blue-500/5' : ''}`"
     @click="$openUrl(account.accountInfo.serverInfo.url)"
diff --git a/packages/dui3/components/header/UserMenu.vue b/packages/dui3/components/header/UserMenu.vue
index 9a3093a9c..321462afa 100644
--- a/packages/dui3/components/header/UserMenu.vue
+++ b/packages/dui3/components/header/UserMenu.vue
@@ -21,7 +21,7 @@
           class="absolute right-0 md:right-4 top-14 md:top-16 w-full md:w-64 origin-top-right bg-foundation sm:rounded-t-md rounded-b-md shadow-lg overflow-hidden"
         >
           <MenuItem>
-            <div class="border border-t-1">
+            <div class="border border-t-1 border-primary-muted">
               <div v-if="loading" class="p-2">Loading accounts...</div>
               <div v-else class="p-2 flex items-center justify-between">
                 <div class="text-xs text-foreground-2">Your accounts</div>
@@ -45,20 +45,32 @@
             </div>
           </MenuItem>
           <MenuItem v-slot="{ close }" as="div">
-            <div class="p-2 flex space-x-2 border-t-1">
-              <button
-                class="text-xs text-foreground-2 hover:text-primary transition"
-                @click="$showDevTools"
-              >
-                Dev tools
-              </button>
-              <NuxtLink
-                class="text-xs text-foreground-2 hover:text-primary transition"
-                to="/test"
-                @click="close()"
-              >
-                Test Page
-              </NuxtLink>
+            <div class="py-3 flex space-x-2 border-t-1 justify-around">
+              <div class="">
+                <button
+                  class="text-xs text-foreground-2 hover:text-primary transition"
+                  @click="$showDevTools"
+                >
+                  Open Dev Tools
+                </button>
+                <NuxtLink
+                  class="text-xs text-foreground-2 hover:text-primary transition"
+                  to="/test"
+                  @click="close()"
+                >
+                  Test Page
+                </NuxtLink>
+              </div>
+              <!-- 
+                NOTE: Here's an example of customising the frontend app based on what bindings we
+                have loaded. E.g., if config bindings are not present, we do not show any button
+                regarding switching themes. 
+              -->
+              <div v-if="hasConfigBindings">
+                <FormButton size="xs" text @click.stop="toggleTheme()">
+                  {{ isDarkTheme ? 'Switch To Light Theme' : 'Switch To Dark Theme' }}
+                </FormButton>
+              </div>
             </div>
           </MenuItem>
         </MenuItems>
@@ -71,11 +83,16 @@ import { XMarkIcon } from '@heroicons/vue/20/solid'
 import { storeToRefs } from 'pinia'
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
 import { useAccountStore } from '~/store/accounts'
-import { DUIAccount } from 'lib/accounts/composables/setup'
+import { DUIAccount } from '~/lib/accounts/composables/setup'
+import { useDocumentInfoStore } from '~/store/uiConfig'
 
 const accountStore = useAccountStore()
 const { accounts, defaultAccount, loading } = storeToRefs(accountStore)
 
+const uiConfigStore = useDocumentInfoStore()
+const { isDarkTheme, hasConfigBindings } = storeToRefs(uiConfigStore)
+const { toggleTheme } = uiConfigStore
+
 const { $showDevTools } = useNuxtApp()
 
 const user = computed(() => {
diff --git a/packages/dui3/lib/bindings/definitions/IConfigBinding.ts b/packages/dui3/lib/bindings/definitions/IConfigBinding.ts
new file mode 100644
index 000000000..cb362db73
--- /dev/null
+++ b/packages/dui3/lib/bindings/definitions/IConfigBinding.ts
@@ -0,0 +1,41 @@
+/* eslint-disable @typescript-eslint/require-await */
+
+import { BaseBridge } from '~~/lib/bridge/base'
+import { IBinding } from '~~/lib/bindings/definitions/IBinding'
+
+/**
+ * The name under which this binding will be registered.
+ */
+export const IConfigBindingKey = 'configBinding'
+
+/**
+ * A test binding interface to ensure compatbility. Ideally all host environments would implement and register it.
+ */
+export interface IConfigBinding extends IBinding<IConfigBindingEvents> {
+  getConfig: () => Promise<Config>
+  updateConfig: (config: Config) => Promise<void>
+}
+
+export interface IConfigBindingEvents {
+  void: () => void
+}
+
+export type Config = {
+  darkTheme: boolean
+}
+
+export class MockedConfigBinding extends BaseBridge {
+  constructor() {
+    super()
+  }
+
+  getConfig() {
+    return {
+      darkTheme: false
+    }
+  }
+
+  updateConfig(config: Config) {
+    // do nothing
+  }
+}
diff --git a/packages/dui3/lib/bridge/generic.ts b/packages/dui3/lib/bridge/generic.ts
index b6559e0d0..c58707465 100644
--- a/packages/dui3/lib/bridge/generic.ts
+++ b/packages/dui3/lib/bridge/generic.ts
@@ -18,7 +18,7 @@ export class GenericBridge extends BaseBridge {
     try {
       availableMethodNames = await this.bridge.GetBindingsMethodNames()
     } catch (e) {
-      console.error(e)
+      console.warn(`Failed to get method names.`)
       return false
     }
 
diff --git a/packages/dui3/pages/index.vue b/packages/dui3/pages/index.vue
index c6fea3398..c4096a8ba 100644
--- a/packages/dui3/pages/index.vue
+++ b/packages/dui3/pages/index.vue
@@ -1,69 +1,10 @@
 <template>
-  <div>
-    <div class="space-y-2">
-      <div v-if="!loading">
-        Hello world! You have
-        {{ accounts.length }} accounts, out of which {{ validAccounts.length }} are
-        valid.
-      </div>
-      <div v-else>Loading Accounts...</div>
-      <div>
-        <FormButton to="/test">Go To Test Bindings Page</FormButton>
-      </div>
-      <div v-for="acc in accounts" :key="acc.accountInfo.id">
-        <div class="truncate text-xs">
-          {{ acc.isValid }} // {{ acc.accountInfo.userInfo.email }} @
-          <b>{{ acc.accountInfo.serverInfo.url }}</b>
-          {{ acc.accountInfo.serverInfo.name }}
-        </div>
-      </div>
-      <div>
-        Your default account is at {{ defaultAccount?.accountInfo.serverInfo.url }}
-      </div>
-      <div>
-        <div v-for="(res, clientId) in queries" :key="clientId">
-          <strong>{{ clientId }}:</strong>
-          {{ res.result.value?.serverInfo.version || res.error }}
-        </div>
-      </div>
-      <div>Doc info:</div>
-      <div>{{ documentInfo }}</div>
-      <div>
-        <FormButton @click="accountStore.refreshAccounts()">
-          Refresh Accounts
-        </FormButton>
-      </div>
+  <div class="flex items-center justify-center h-[calc(100vh-14rem)]">
+    <div
+      class="p-2 bg-primary text-foreground-on-primary shadow-md rounded-md font-bold"
+    >
+      TODO: Everything
     </div>
   </div>
 </template>
-<script setup lang="ts">
-import { UseQueryReturn, useQuery } from '@vue/apollo-composable'
-import { storeToRefs } from 'pinia'
-import { graphql } from '~/lib/common/generated/gql'
-import { ServerInfoTestQuery } from '~/lib/common/generated/gql/graphql'
-import { useAccountStore } from '~/store/accounts'
-import { useDocumentInfoStore } from '~/store/documentInfo'
-
-const accountStore = useAccountStore()
-const { accounts, defaultAccount, loading, validAccounts } = storeToRefs(accountStore)
-const { documentInfo } = storeToRefs(useDocumentInfoStore())
-
-const versionQuery = graphql(`
-  query ServerInfoTest {
-    serverInfo {
-      version
-    }
-  }
-`)
-
-const clientIds = validAccounts.value.map((a) => a.accountInfo.id)
-
-const queries: Record<
-  string,
-  UseQueryReturn<ServerInfoTestQuery, Record<string, never>>
-> = {}
-
-for (const clientId of clientIds) {
-  queries[clientId] = useQuery(versionQuery, undefined, { clientId })
-}
-</script>
+<script setup lang="ts"></script>
diff --git a/packages/dui3/plugins/00.bindings.ts b/packages/dui3/plugins/00.bindings.ts
index 3451380bf..b6df5669f 100644
--- a/packages/dui3/plugins/00.bindings.ts
+++ b/packages/dui3/plugins/00.bindings.ts
@@ -15,6 +15,12 @@ import {
   MockedTestBinding
 } from '~/lib/bindings/definitions/ITestBinding'
 
+import {
+  IConfigBinding,
+  IConfigBindingKey,
+  MockedConfigBinding
+} from '~/lib/bindings/definitions/IConfigBinding'
+
 // Makes TS happy
 declare let globalThis: Record<string, unknown> & {
   CefSharp?: { BindObjectAsync: (name: string) => Promise<void> }
@@ -40,6 +46,9 @@ export default defineNuxtPlugin(async () => {
     (await tryHoistBinding<IBasicConnectorBinding>(IBasicConnectorBindingKey)) ||
     new MockedBaseBinding()
 
+  // UI configuration bindings.
+  const configBinding = await tryHoistBinding<IConfigBinding>(IConfigBindingKey)
+
   const showDevTools = () => {
     baseBinding.showDevTools()
   }
@@ -53,6 +62,7 @@ export default defineNuxtPlugin(async () => {
       testBindings,
       nonExistantBindings,
       baseBinding,
+      configBinding,
       showDevTools,
       openUrl
     }
diff --git a/packages/dui3/store/uiConfig.ts b/packages/dui3/store/uiConfig.ts
new file mode 100644
index 000000000..404d8ae56
--- /dev/null
+++ b/packages/dui3/store/uiConfig.ts
@@ -0,0 +1,34 @@
+import { defineStore } from 'pinia'
+import { Config } from 'lib/bindings/definitions/IConfigBinding'
+
+export const useDocumentInfoStore = defineStore('documentInfoStore', () => {
+  const { $configBinding } = useNuxtApp()
+
+  const hasConfigBindings = ref(!!$configBinding)
+  const uiConfig = ref<Config>({ darkTheme: false })
+
+  watch(
+    uiConfig,
+    async (newValue) => {
+      if (!newValue || !$configBinding) return
+      await $configBinding.updateConfig(newValue)
+    },
+    { deep: true }
+  )
+
+  const isDarkTheme = computed(() => {
+    return uiConfig.value?.darkTheme
+  })
+
+  const toggleTheme = () => {
+    uiConfig.value.darkTheme = !uiConfig.value.darkTheme
+  }
+
+  const init = async () => {
+    if (!$configBinding) return
+    uiConfig.value = await $configBinding.getConfig()
+  }
+  void init()
+
+  return { hasConfigBindings, isDarkTheme, toggleTheme }
+})

From 98029dbfce15207301422d7ea01c662733eec5a1 Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Sun, 23 Jul 2023 20:40:41 +0100
Subject: [PATCH 35/35] feat(dui3): minor layout fix

---
 packages/dui3/components/header/UserMenu.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/dui3/components/header/UserMenu.vue b/packages/dui3/components/header/UserMenu.vue
index 321462afa..a7881e4f1 100644
--- a/packages/dui3/components/header/UserMenu.vue
+++ b/packages/dui3/components/header/UserMenu.vue
@@ -45,7 +45,7 @@
             </div>
           </MenuItem>
           <MenuItem v-slot="{ close }" as="div">
-            <div class="py-3 flex space-x-2 border-t-1 justify-around">
+            <div class="px-2 py-3 flex space-x-2 border-t-1 justify-between">
               <div class="">
                 <button
                   class="text-xs text-foreground-2 hover:text-primary transition"