From 14cfdfb15447faebe9bc1f229fd734a618e70eb9 Mon Sep 17 00:00:00 2001
From: "dane.is.extraordinarily.cool" <me@dane.computer>
Date: Sat, 31 Jan 2026 10:45:25 -0500
Subject: [PATCH 01/23] refactor: working on some modal enhancements

---
 app/app.vue                                 |   3 +
 app/assets/main.css                         |   5 +
 app/components/AuthModal.client.vue         | 159 ++++++++++++++++
 app/components/AuthModal.vue                | 198 --------------------
 app/components/HeaderAccountMenu.client.vue |  18 +-
 app/components/Modal.client.vue             |  36 ++++
 6 files changed, 212 insertions(+), 207 deletions(-)
 create mode 100644 app/components/AuthModal.client.vue
 delete mode 100644 app/components/AuthModal.vue
 create mode 100644 app/components/Modal.client.vue

diff --git a/app/app.vue b/app/app.vue
index 0a197e8d77..965ee97d10 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -81,4 +81,7 @@ if (import.meta.client) {
 
     <ScrollToTop />
   </div>
+
+  <!-- <ConnectorModal /> -->
+  <AuthModal />
 </template>
diff --git a/app/assets/main.css b/app/assets/main.css
index 833ea104dd..605f6239ee 100644
--- a/app/assets/main.css
+++ b/app/assets/main.css
@@ -553,3 +553,8 @@ input[type='search']::-webkit-search-results-decoration {
   animation-duration: 0.3s;
   animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
 }
+
+/* Locking the scroll whenever any of the modals are open */
+html:has(dialog[open]) {
+  overflow: hidden;
+}
diff --git a/app/components/AuthModal.client.vue b/app/components/AuthModal.client.vue
new file mode 100644
index 0000000000..b7fd582540
--- /dev/null
+++ b/app/components/AuthModal.client.vue
@@ -0,0 +1,159 @@
+<script setup lang="ts">
+const handleInput = shallowRef('')
+
+const { user, logout } = useAtproto()
+
+async function handleBlueskySignIn() {
+  await navigateTo(
+    {
+      path: '/api/auth/atproto',
+      query: { handle: 'https://bsky.social' },
+    },
+    { external: true },
+  )
+}
+
+async function handleCreateAccount() {
+  await navigateTo(
+    {
+      path: '/api/auth/atproto',
+      query: { handle: 'https://npmx.social', create: 'true' },
+    },
+    { external: true },
+  )
+}
+
+async function handleLogin() {
+  if (handleInput.value) {
+    await navigateTo(
+      {
+        path: '/api/auth/atproto',
+        query: { handle: handleInput.value },
+      },
+      { external: true },
+    )
+  }
+}
+</script>
+
+<template>
+  <Transition
+    enter-active-class="transition-opacity duration-200"
+    leave-active-class="transition-opacity duration-200"
+    enter-from-class="opacity-0"
+    leave-to-class="opacity-0"
+  >
+    <!-- Modal -->
+    <Modal :modalTitle="$t('auth.modal.title')" class="max-w-lg text-white">
+      <div v-if="user?.handle" class="space-y-4">
+        <div class="flex items-center gap-3 p-4 bg-bg-subtle border border-border rounded-lg">
+          <span class="w-3 h-3 rounded-full bg-green-500" aria-hidden="true" />
+          <div>
+            <p class="font-mono text-xs text-fg-muted">
+              {{ $t('auth.modal.connected_as', { handle: user.handle }) }}
+            </p>
+          </div>
+        </div>
+        <button
+          class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          @click="logout"
+        >
+          {{ $t('auth.modal.disconnect') }}
+        </button>
+      </div>
+
+      <!-- Disconnected state -->
+      <form v-else class="space-y-4" @submit.prevent="handleLogin">
+        <p class="text-sm text-fg-muted">{{ $t('auth.modal.connect_prompt') }}</p>
+
+        <div class="space-y-3">
+          <div>
+            <label
+              for="handle-input"
+              class="block text-xs text-fg-subtle uppercase tracking-wider mb-1.5"
+            >
+              {{ $t('auth.modal.handle_label') }}
+            </label>
+            <input
+              id="handle-input"
+              v-model="handleInput"
+              type="text"
+              name="handle"
+              :placeholder="$t('auth.modal.handle_placeholder')"
+              autocomplete="off"
+              spellcheck="false"
+              class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            />
+          </div>
+
+          <details class="text-sm">
+            <summary
+              class="text-fg-subtle cursor-pointer hover:text-fg-muted transition-colors duration-200"
+            >
+              {{ $t('auth.modal.what_is_atmosphere') }}
+            </summary>
+            <div class="mt-3">
+              <i18n-t keypath="auth.modal.atmosphere_explanation" tag="p">
+                <template #npmx>
+                  <span class="font-bold">npmx.dev</span>
+                </template>
+                <template #atproto>
+                  <a
+                    href="https://atproto.com"
+                    target="_blank"
+                    class="text-blue-400 hover:underline"
+                  >
+                    AT Protocol
+                  </a>
+                </template>
+                <template #bluesky>
+                  <a href="https://bsky.app" target="_blank" class="text-blue-400 hover:underline">
+                    Bluesky
+                  </a>
+                </template>
+                <template #tangled>
+                  <a
+                    href="https://tangled.org"
+                    target="_blank"
+                    class="text-blue-400 hover:underline"
+                  >
+                    Tangled
+                  </a>
+                </template>
+              </i18n-t>
+            </div>
+          </details>
+        </div>
+
+        <button
+          type="submit"
+          :disabled="!handleInput.trim()"
+          class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
+        >
+          {{ $t('auth.modal.connect') }}
+        </button>
+        <button
+          type="button"
+          class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
+          @click="handleCreateAccount"
+        >
+          {{ $t('auth.modal.create_account') }}
+        </button>
+        <hr />
+        <button
+          type="button"
+          class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 focus-visible:ring-offset-2 focus-visible:ring-offset-bg flex items-center justify-center gap-2"
+          @click="handleBlueskySignIn"
+        >
+          {{ $t('auth.modal.connect_bluesky') }}
+          <svg fill="none" viewBox="0 0 64 57" width="20" style="width: 20px">
+            <path
+              fill="#0F73FF"
+              d="M13.873 3.805C21.21 9.332 29.103 20.537 32 26.55v15.882c0-.338-.13.044-.41.867-1.512 4.456-7.418 21.847-20.923 7.944-7.111-7.32-3.819-14.64 9.125-16.85-7.405 1.264-15.73-.825-18.014-9.015C1.12 23.022 0 8.51 0 6.55 0-3.268 8.579-.182 13.873 3.805ZM50.127 3.805C42.79 9.332 34.897 20.537 32 26.55v15.882c0-.338.13.044.41.867 1.512 4.456 7.418 21.847 20.923 7.944 7.111-7.32 3.819-14.64-9.125-16.85 7.405 1.264 15.73-.825 18.014-9.015C62.88 23.022 64 8.51 64 6.55c0-9.818-8.578-6.732-13.873-2.745Z"
+            ></path>
+          </svg>
+        </button>
+      </form>
+    </Modal>
+  </Transition>
+</template>
diff --git a/app/components/AuthModal.vue b/app/components/AuthModal.vue
deleted file mode 100644
index ade24b2eaf..0000000000
--- a/app/components/AuthModal.vue
+++ /dev/null
@@ -1,198 +0,0 @@
-<script setup lang="ts">
-const open = defineModel<boolean>('open', { default: false })
-
-const handleInput = shallowRef('')
-
-const { user, logout } = useAtproto()
-
-async function handleBlueskySignIn() {
-  await navigateTo(
-    {
-      path: '/api/auth/atproto',
-      query: { handle: 'https://bsky.social' },
-    },
-    { external: true },
-  )
-}
-
-async function handleCreateAccount() {
-  await navigateTo(
-    {
-      path: '/api/auth/atproto',
-      query: { handle: 'https://npmx.social', create: 'true' },
-    },
-    { external: true },
-  )
-}
-
-async function handleLogin() {
-  if (handleInput.value) {
-    await navigateTo(
-      {
-        path: '/api/auth/atproto',
-        query: { handle: handleInput.value },
-      },
-      { external: true },
-    )
-  }
-}
-</script>
-
-<template>
-  <Teleport to="body">
-    <Transition
-      enter-active-class="transition-opacity duration-200"
-      leave-active-class="transition-opacity duration-200"
-      enter-from-class="opacity-0"
-      leave-to-class="opacity-0"
-    >
-      <div v-if="open" class="fixed inset-0 z-50 flex items-center justify-center p-4">
-        <!-- Backdrop -->
-        <button
-          type="button"
-          class="absolute inset-0 bg-black/60 cursor-default"
-          :aria-label="$t('common.close')"
-          @click="open = false"
-        />
-
-        <!-- Modal -->
-        <div
-          class="relative w-full max-w-lg bg-bg border border-border rounded-lg shadow-xl max-h-[90vh] overflow-y-auto overscroll-contain"
-          role="dialog"
-          aria-modal="true"
-          aria-labelledby="auth-modal-title"
-        >
-          <div class="p-6">
-            <div class="flex items-center justify-between mb-6">
-              <h2 id="auth-modal-title" class="font-mono text-lg font-medium">
-                {{ $t('auth.modal.title') }}
-              </h2>
-              <button
-                type="button"
-                class="text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
-                :aria-label="$t('common.close')"
-                @click="open = false"
-              >
-                <span class="i-carbon-close block w-5 h-5" aria-hidden="true" />
-              </button>
-            </div>
-
-            <div v-if="user?.handle" class="space-y-4">
-              <div class="flex items-center gap-3 p-4 bg-bg-subtle border border-border rounded-lg">
-                <span class="w-3 h-3 rounded-full bg-green-500" aria-hidden="true" />
-                <div>
-                  <p class="font-mono text-xs text-fg-muted">
-                    {{ $t('auth.modal.connected_as', { handle: user.handle }) }}
-                  </p>
-                </div>
-              </div>
-              <button
-                class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-                @click="logout"
-              >
-                {{ $t('auth.modal.disconnect') }}
-              </button>
-            </div>
-
-            <!-- Disconnected state -->
-            <form v-else class="space-y-4" @submit.prevent="handleLogin">
-              <p class="text-sm text-fg-muted">{{ $t('auth.modal.connect_prompt') }}</p>
-
-              <div class="space-y-3">
-                <div>
-                  <label
-                    for="handle-input"
-                    class="block text-xs text-fg-subtle uppercase tracking-wider mb-1.5"
-                  >
-                    {{ $t('auth.modal.handle_label') }}
-                  </label>
-                  <input
-                    id="handle-input"
-                    v-model="handleInput"
-                    type="text"
-                    name="handle"
-                    :placeholder="$t('auth.modal.handle_placeholder')"
-                    autocomplete="off"
-                    spellcheck="false"
-                    class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-                  />
-                </div>
-
-                <details class="text-sm">
-                  <summary
-                    class="text-fg-subtle cursor-pointer hover:text-fg-muted transition-colors duration-200"
-                  >
-                    {{ $t('auth.modal.what_is_atmosphere') }}
-                  </summary>
-                  <div class="mt-3">
-                    <i18n-t keypath="auth.modal.atmosphere_explanation" tag="p">
-                      <template #npmx>
-                        <span class="font-bold">npmx.dev</span>
-                      </template>
-                      <template #atproto>
-                        <a
-                          href="https://atproto.com"
-                          target="_blank"
-                          class="text-blue-400 hover:underline"
-                        >
-                          AT Protocol
-                        </a>
-                      </template>
-                      <template #bluesky>
-                        <a
-                          href="https://bsky.app"
-                          target="_blank"
-                          class="text-blue-400 hover:underline"
-                        >
-                          Bluesky
-                        </a>
-                      </template>
-                      <template #tangled>
-                        <a
-                          href="https://tangled.org"
-                          target="_blank"
-                          class="text-blue-400 hover:underline"
-                        >
-                          Tangled
-                        </a>
-                      </template>
-                    </i18n-t>
-                  </div>
-                </details>
-              </div>
-
-              <button
-                type="submit"
-                :disabled="!handleInput.trim()"
-                class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
-              >
-                {{ $t('auth.modal.connect') }}
-              </button>
-              <button
-                type="button"
-                class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
-                @click="handleCreateAccount"
-              >
-                {{ $t('auth.modal.create_account') }}
-              </button>
-              <hr />
-              <button
-                type="button"
-                class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 focus-visible:ring-offset-2 focus-visible:ring-offset-bg flex items-center justify-center gap-2"
-                @click="handleBlueskySignIn"
-              >
-                {{ $t('auth.modal.connect_bluesky') }}
-                <svg fill="none" viewBox="0 0 64 57" width="20" style="width: 20px">
-                  <path
-                    fill="#0F73FF"
-                    d="M13.873 3.805C21.21 9.332 29.103 20.537 32 26.55v15.882c0-.338-.13.044-.41.867-1.512 4.456-7.418 21.847-20.923 7.944-7.111-7.32-3.819-14.64 9.125-16.85-7.405 1.264-15.73-.825-18.014-9.015C1.12 23.022 0 8.51 0 6.55 0-3.268 8.579-.182 13.873 3.805ZM50.127 3.805C42.79 9.332 34.897 20.537 32 26.55v15.882c0-.338.13.044.41.867 1.512 4.456 7.418 21.847 20.923 7.944 7.111-7.32 3.819-14.64-9.125-16.85 7.405 1.264 15.73-.825 18.014-9.015C62.88 23.022 64 8.51 64 6.55c0-9.818-8.578-6.732-13.873-2.745Z"
-                  ></path>
-                </svg>
-              </button>
-            </form>
-          </div>
-        </div>
-      </div>
-    </Transition>
-  </Teleport>
-</template>
diff --git a/app/components/HeaderAccountMenu.client.vue b/app/components/HeaderAccountMenu.client.vue
index 5624c0c563..43395d2176 100644
--- a/app/components/HeaderAccountMenu.client.vue
+++ b/app/components/HeaderAccountMenu.client.vue
@@ -49,9 +49,12 @@ function openConnectorModal() {
   showConnectorModal.value = true
 }
 
-function openAuthModal() {
-  isOpen.value = false
-  showAuthModal.value = true
+function handleModalOpen() {
+  const authModal = document.querySelector<HTMLDialogElement>('#modal')
+  if (authModal) {
+    isOpen.value = false
+    authModal.showModal()
+  }
 }
 </script>
 
@@ -179,7 +182,7 @@ function openAuthModal() {
               type="button"
               role="menuitem"
               class="w-full px-3 py-2.5 flex items-center gap-3 hover:bg-bg-subtle transition-colors text-start"
-              @click="openAuthModal"
+              @click="handleModalOpen"
             >
               <span class="w-8 h-8 rounded-full bg-bg-muted flex items-center justify-center">
                 <span class="i-carbon-cloud w-4 h-4 text-fg-muted" aria-hidden="true" />
@@ -228,10 +231,11 @@ function openAuthModal() {
 
             <button
               v-if="!atprotoUser"
+              id="auth-modal-trigger"
               type="button"
               role="menuitem"
               class="w-full px-3 py-2.5 flex items-center gap-3 hover:bg-bg-subtle transition-colors text-start"
-              @click="openAuthModal"
+              @click="handleModalOpen"
             >
               <span class="w-8 h-8 rounded-full bg-bg-muted flex items-center justify-center">
                 <span class="i-carbon-cloud w-4 h-4 text-fg-muted" aria-hidden="true" />
@@ -247,9 +251,5 @@ function openAuthModal() {
         </div>
       </div>
     </Transition>
-
-    <!-- Modals -->
-    <ConnectorModal v-model:open="showConnectorModal" />
-    <AuthModal v-model:open="showAuthModal" />
   </div>
 </template>
diff --git a/app/components/Modal.client.vue b/app/components/Modal.client.vue
new file mode 100644
index 0000000000..8c376523e9
--- /dev/null
+++ b/app/components/Modal.client.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+defineProps<{
+  modalTitle: string
+}>()
+
+function handleModalClose() {
+  const modal = document.querySelector<HTMLDialogElement>('#modal')
+  if (modal) {
+    modal.close()
+  }
+}
+</script>
+
+<template>
+  <dialog
+    id="modal"
+    class="w-full bg-bg border border-border rounded-lg shadow-xl max-h-[90vh] overflow-y-auto overscroll-contain m-0 m-auto p-6"
+  >
+    <!-- Modal top header section -->
+    <div class="flex items-center justify-between mb-6">
+      <h2 id="auth-modal-title" class="font-mono text-lg font-medium">
+        {{ modalTitle }}
+      </h2>
+      <button
+        type="button"
+        class="text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
+        :aria-label="$t('common.close')"
+        @click="handleModalClose"
+      >
+        <span class="i-carbon-close block w-5 h-5" aria-hidden="true" />
+      </button>
+    </div>
+    <!-- Modal body content -->
+    <slot></slot>
+  </dialog>
+</template>

From 2515f33d9b93805ba113bec1240b6e0c194798c4 Mon Sep 17 00:00:00 2001
From: "dane.is.extraordinarily.cool" <me@dane.computer>
Date: Sat, 31 Jan 2026 11:05:25 -0500
Subject: [PATCH 02/23] chore: re-add backdrop when modals are open

---
 app/assets/main.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/app/assets/main.css b/app/assets/main.css
index 605f6239ee..271541fc67 100644
--- a/app/assets/main.css
+++ b/app/assets/main.css
@@ -558,3 +558,8 @@ input[type='search']::-webkit-search-results-decoration {
 html:has(dialog[open]) {
   overflow: hidden;
 }
+
+/* Backdrop styling when any of the modals are open */
+dialog[open]::backdrop {
+  @apply bg-black/60;
+}

From bcee3c3ec784179cd21542539af70460539c3d61 Mon Sep 17 00:00:00 2001
From: "dane.is.extraordinarily.cool" <me@dane.computer>
Date: Sat, 31 Jan 2026 11:46:57 -0500
Subject: [PATCH 03/23] chore: move modal transition styles into main.css

---
 app/assets/main.css                 |  23 ++-
 app/components/AuthModal.client.vue | 211 +++++++++++++---------------
 app/components/Modal.client.vue     |   2 +-
 3 files changed, 120 insertions(+), 116 deletions(-)

diff --git a/app/assets/main.css b/app/assets/main.css
index 271541fc67..7b9c1c6e83 100644
--- a/app/assets/main.css
+++ b/app/assets/main.css
@@ -555,11 +555,30 @@ input[type='search']::-webkit-search-results-decoration {
 }
 
 /* Locking the scroll whenever any of the modals are open */
-html:has(dialog[open]) {
+html:has(dialog:open) {
   overflow: hidden;
 }
 
 /* Backdrop styling when any of the modals are open */
-dialog[open]::backdrop {
+dialog:open::backdrop {
   @apply bg-black/60;
 }
+
+/* Modal transition styles */
+dialog {
+  opacity: 0;
+  transition: opacity 200ms ease;
+  transition-behavior: allow-discrete;
+}
+
+dialog:open {
+  opacity: 1;
+  transition: opacity 200ms ease;
+  transition-behavior: allow-discrete;
+}
+
+@starting-style {
+  dialog:open {
+    opacity: 0;
+  }
+}
diff --git a/app/components/AuthModal.client.vue b/app/components/AuthModal.client.vue
index b7fd582540..f64fba6f77 100644
--- a/app/components/AuthModal.client.vue
+++ b/app/components/AuthModal.client.vue
@@ -37,123 +37,108 @@ async function handleLogin() {
 </script>
 
 <template>
-  <Transition
-    enter-active-class="transition-opacity duration-200"
-    leave-active-class="transition-opacity duration-200"
-    enter-from-class="opacity-0"
-    leave-to-class="opacity-0"
-  >
-    <!-- Modal -->
-    <Modal :modalTitle="$t('auth.modal.title')" class="max-w-lg text-white">
-      <div v-if="user?.handle" class="space-y-4">
-        <div class="flex items-center gap-3 p-4 bg-bg-subtle border border-border rounded-lg">
-          <span class="w-3 h-3 rounded-full bg-green-500" aria-hidden="true" />
-          <div>
-            <p class="font-mono text-xs text-fg-muted">
-              {{ $t('auth.modal.connected_as', { handle: user.handle }) }}
-            </p>
-          </div>
+  <!-- Modal -->
+  <Modal :modalTitle="$t('auth.modal.title')" class="max-w-lg">
+    <div v-if="user?.handle" class="space-y-4">
+      <div class="flex items-center gap-3 p-4 bg-bg-subtle border border-border rounded-lg">
+        <span class="w-3 h-3 rounded-full bg-green-500" aria-hidden="true" />
+        <div>
+          <p class="font-mono text-xs text-fg-muted">
+            {{ $t('auth.modal.connected_as', { handle: user.handle }) }}
+          </p>
         </div>
-        <button
-          class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-          @click="logout"
-        >
-          {{ $t('auth.modal.disconnect') }}
-        </button>
       </div>
+      <button
+        class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+        @click="logout"
+      >
+        {{ $t('auth.modal.disconnect') }}
+      </button>
+    </div>
 
-      <!-- Disconnected state -->
-      <form v-else class="space-y-4" @submit.prevent="handleLogin">
-        <p class="text-sm text-fg-muted">{{ $t('auth.modal.connect_prompt') }}</p>
-
-        <div class="space-y-3">
-          <div>
-            <label
-              for="handle-input"
-              class="block text-xs text-fg-subtle uppercase tracking-wider mb-1.5"
-            >
-              {{ $t('auth.modal.handle_label') }}
-            </label>
-            <input
-              id="handle-input"
-              v-model="handleInput"
-              type="text"
-              name="handle"
-              :placeholder="$t('auth.modal.handle_placeholder')"
-              autocomplete="off"
-              spellcheck="false"
-              class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-            />
-          </div>
+    <!-- Disconnected state -->
+    <form v-else class="space-y-4" @submit.prevent="handleLogin">
+      <p class="text-sm text-fg-muted">{{ $t('auth.modal.connect_prompt') }}</p>
 
-          <details class="text-sm">
-            <summary
-              class="text-fg-subtle cursor-pointer hover:text-fg-muted transition-colors duration-200"
-            >
-              {{ $t('auth.modal.what_is_atmosphere') }}
-            </summary>
-            <div class="mt-3">
-              <i18n-t keypath="auth.modal.atmosphere_explanation" tag="p">
-                <template #npmx>
-                  <span class="font-bold">npmx.dev</span>
-                </template>
-                <template #atproto>
-                  <a
-                    href="https://atproto.com"
-                    target="_blank"
-                    class="text-blue-400 hover:underline"
-                  >
-                    AT Protocol
-                  </a>
-                </template>
-                <template #bluesky>
-                  <a href="https://bsky.app" target="_blank" class="text-blue-400 hover:underline">
-                    Bluesky
-                  </a>
-                </template>
-                <template #tangled>
-                  <a
-                    href="https://tangled.org"
-                    target="_blank"
-                    class="text-blue-400 hover:underline"
-                  >
-                    Tangled
-                  </a>
-                </template>
-              </i18n-t>
-            </div>
-          </details>
+      <div class="space-y-3">
+        <div>
+          <label
+            for="handle-input"
+            class="block text-xs text-fg-subtle uppercase tracking-wider mb-1.5"
+          >
+            {{ $t('auth.modal.handle_label') }}
+          </label>
+          <input
+            id="handle-input"
+            v-model="handleInput"
+            type="text"
+            name="handle"
+            :placeholder="$t('auth.modal.handle_placeholder')"
+            autocomplete="off"
+            spellcheck="false"
+            class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          />
         </div>
 
-        <button
-          type="submit"
-          :disabled="!handleInput.trim()"
-          class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
-        >
-          {{ $t('auth.modal.connect') }}
-        </button>
-        <button
-          type="button"
-          class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
-          @click="handleCreateAccount"
-        >
-          {{ $t('auth.modal.create_account') }}
-        </button>
-        <hr />
-        <button
-          type="button"
-          class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 focus-visible:ring-offset-2 focus-visible:ring-offset-bg flex items-center justify-center gap-2"
-          @click="handleBlueskySignIn"
-        >
-          {{ $t('auth.modal.connect_bluesky') }}
-          <svg fill="none" viewBox="0 0 64 57" width="20" style="width: 20px">
-            <path
-              fill="#0F73FF"
-              d="M13.873 3.805C21.21 9.332 29.103 20.537 32 26.55v15.882c0-.338-.13.044-.41.867-1.512 4.456-7.418 21.847-20.923 7.944-7.111-7.32-3.819-14.64 9.125-16.85-7.405 1.264-15.73-.825-18.014-9.015C1.12 23.022 0 8.51 0 6.55 0-3.268 8.579-.182 13.873 3.805ZM50.127 3.805C42.79 9.332 34.897 20.537 32 26.55v15.882c0-.338.13.044.41.867 1.512 4.456 7.418 21.847 20.923 7.944 7.111-7.32 3.819-14.64-9.125-16.85 7.405 1.264 15.73-.825 18.014-9.015C62.88 23.022 64 8.51 64 6.55c0-9.818-8.578-6.732-13.873-2.745Z"
-            ></path>
-          </svg>
-        </button>
-      </form>
-    </Modal>
-  </Transition>
+        <details class="text-sm">
+          <summary
+            class="text-fg-subtle cursor-pointer hover:text-fg-muted transition-colors duration-200"
+          >
+            {{ $t('auth.modal.what_is_atmosphere') }}
+          </summary>
+          <div class="mt-3">
+            <i18n-t keypath="auth.modal.atmosphere_explanation" tag="p">
+              <template #npmx>
+                <span class="font-bold">npmx.dev</span>
+              </template>
+              <template #atproto>
+                <a href="https://atproto.com" target="_blank" class="text-blue-400 hover:underline">
+                  AT Protocol
+                </a>
+              </template>
+              <template #bluesky>
+                <a href="https://bsky.app" target="_blank" class="text-blue-400 hover:underline">
+                  Bluesky
+                </a>
+              </template>
+              <template #tangled>
+                <a href="https://tangled.org" target="_blank" class="text-blue-400 hover:underline">
+                  Tangled
+                </a>
+              </template>
+            </i18n-t>
+          </div>
+        </details>
+      </div>
+
+      <button
+        type="submit"
+        :disabled="!handleInput.trim()"
+        class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
+      >
+        {{ $t('auth.modal.connect') }}
+      </button>
+      <button
+        type="button"
+        class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
+        @click="handleCreateAccount"
+      >
+        {{ $t('auth.modal.create_account') }}
+      </button>
+      <hr />
+      <button
+        type="button"
+        class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 focus-visible:ring-offset-2 focus-visible:ring-offset-bg flex items-center justify-center gap-2"
+        @click="handleBlueskySignIn"
+      >
+        {{ $t('auth.modal.connect_bluesky') }}
+        <svg fill="none" viewBox="0 0 64 57" width="20" style="width: 20px">
+          <path
+            fill="#0F73FF"
+            d="M13.873 3.805C21.21 9.332 29.103 20.537 32 26.55v15.882c0-.338-.13.044-.41.867-1.512 4.456-7.418 21.847-20.923 7.944-7.111-7.32-3.819-14.64 9.125-16.85-7.405 1.264-15.73-.825-18.014-9.015C1.12 23.022 0 8.51 0 6.55 0-3.268 8.579-.182 13.873 3.805ZM50.127 3.805C42.79 9.332 34.897 20.537 32 26.55v15.882c0-.338.13.044.41.867 1.512 4.456 7.418 21.847 20.923 7.944 7.111-7.32 3.819-14.64-9.125-16.85 7.405 1.264 15.73-.825 18.014-9.015C62.88 23.022 64 8.51 64 6.55c0-9.818-8.578-6.732-13.873-2.745Z"
+          ></path>
+        </svg>
+      </button>
+    </form>
+  </Modal>
 </template>
diff --git a/app/components/Modal.client.vue b/app/components/Modal.client.vue
index 8c376523e9..0ecbe3fc08 100644
--- a/app/components/Modal.client.vue
+++ b/app/components/Modal.client.vue
@@ -14,7 +14,7 @@ function handleModalClose() {
 <template>
   <dialog
     id="modal"
-    class="w-full bg-bg border border-border rounded-lg shadow-xl max-h-[90vh] overflow-y-auto overscroll-contain m-0 m-auto p-6"
+    class="w-full bg-bg border border-border rounded-lg shadow-xl max-h-[90vh] overflow-y-auto overscroll-contain m-0 m-auto p-6 text-white"
   >
     <!-- Modal top header section -->
     <div class="flex items-center justify-between mb-6">

From 219e454867d6340a0c10aec598b3ba082b196513 Mon Sep 17 00:00:00 2001
From: "dane.is.extraordinarily.cool" <me@dane.computer>
Date: Sat, 31 Jan 2026 12:00:18 -0500
Subject: [PATCH 04/23] chore: adjust padding and roundness on connect menu
 items

---
 app/components/HeaderAccountMenu.client.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/components/HeaderAccountMenu.client.vue b/app/components/HeaderAccountMenu.client.vue
index 43395d2176..b49687d4d9 100644
--- a/app/components/HeaderAccountMenu.client.vue
+++ b/app/components/HeaderAccountMenu.client.vue
@@ -130,7 +130,7 @@ function handleModalOpen() {
       leave-to-class="opacity-0 translate-y-1"
     >
       <div v-if="isOpen" class="absolute inset-ie-0 top-full pt-2 w-72 z-50" role="menu">
-        <div class="bg-bg-elevated border border-border rounded-lg shadow-lg overflow-hidden">
+        <div class="bg-bg-elevated border border-border rounded-lg shadow-lg overflow-hidden px-1">
           <!-- Connected accounts section -->
           <div v-if="hasAnyConnection" class="py-1">
             <!-- npm CLI connection -->
@@ -206,7 +206,7 @@ function handleModalOpen() {
               v-if="!isNpmConnected"
               type="button"
               role="menuitem"
-              class="w-full px-3 py-2.5 flex items-center gap-3 hover:bg-bg-subtle transition-colors text-start"
+              class="w-full px-3 py-2.5 flex items-center gap-3 hover:bg-bg-subtle transition-colors text-start rounded-md"
               @click="openConnectorModal"
             >
               <span class="w-8 h-8 rounded-full bg-bg-muted flex items-center justify-center">
@@ -234,7 +234,7 @@ function handleModalOpen() {
               id="auth-modal-trigger"
               type="button"
               role="menuitem"
-              class="w-full px-3 py-2.5 flex items-center gap-3 hover:bg-bg-subtle transition-colors text-start"
+              class="w-full px-3 py-2.5 flex items-center gap-3 hover:bg-bg-subtle transition-colors text-start rounded-md"
               @click="handleModalOpen"
             >
               <span class="w-8 h-8 rounded-full bg-bg-muted flex items-center justify-center">

From fde38d07380d2eb1e8c7b15d3d5f820546b838af Mon Sep 17 00:00:00 2001
From: "dane.is.extraordinarily.cool" <me@dane.computer>
Date: Sat, 31 Jan 2026 12:56:16 -0500
Subject: [PATCH 05/23] refactor: define ids for header dropdown modals, switch
 ConnectorModal to client component

---
 app/app.vue                                 |   3 -
 app/components/AuthModal.client.vue         |   2 +-
 app/components/ConnectorModal.client.vue    | 191 ++++++++++++++++
 app/components/ConnectorModal.vue           | 233 --------------------
 app/components/HeaderAccountMenu.client.vue |  20 +-
 app/components/Modal.client.vue             |  44 ++--
 6 files changed, 226 insertions(+), 267 deletions(-)
 create mode 100644 app/components/ConnectorModal.client.vue
 delete mode 100644 app/components/ConnectorModal.vue

diff --git a/app/app.vue b/app/app.vue
index 4b7ca0a946..f2060ae3c0 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -93,9 +93,6 @@ if (import.meta.client) {
 
     <ScrollToTop />
   </div>
-
-  <!-- <ConnectorModal /> -->
-  <AuthModal />
 </template>
 
 <style>
diff --git a/app/components/AuthModal.client.vue b/app/components/AuthModal.client.vue
index f64fba6f77..dcc79883c7 100644
--- a/app/components/AuthModal.client.vue
+++ b/app/components/AuthModal.client.vue
@@ -38,7 +38,7 @@ async function handleLogin() {
 
 <template>
   <!-- Modal -->
-  <Modal :modalTitle="$t('auth.modal.title')" class="max-w-lg">
+  <Modal :modalTitle="$t('auth.modal.title')" class="max-w-lg" id="auth-modal">
     <div v-if="user?.handle" class="space-y-4">
       <div class="flex items-center gap-3 p-4 bg-bg-subtle border border-border rounded-lg">
         <span class="w-3 h-3 rounded-full bg-green-500" aria-hidden="true" />
diff --git a/app/components/ConnectorModal.client.vue b/app/components/ConnectorModal.client.vue
new file mode 100644
index 0000000000..2918139538
--- /dev/null
+++ b/app/components/ConnectorModal.client.vue
@@ -0,0 +1,191 @@
+<script setup lang="ts">
+const open = defineModel<boolean>('open', { default: false })
+
+const { isConnected, isConnecting, npmUser, error, hasOperations, connect, disconnect } =
+  useConnector()
+
+const tokenInput = shallowRef('')
+const portInput = shallowRef('31415')
+const { copied, copy } = useClipboard({ copiedDuring: 2000 })
+
+async function handleConnect() {
+  const port = Number.parseInt(portInput.value, 10) || 31415
+  const success = await connect(tokenInput.value.trim(), port)
+  if (success) {
+    tokenInput.value = ''
+    open.value = false
+  }
+}
+
+function handleDisconnect() {
+  disconnect()
+}
+
+function copyCommand() {
+  let command = executeNpmxConnectorCommand.value
+  if (portInput.value !== '31415') {
+    command += ` --port ${portInput.value}`
+  }
+  copy(command)
+}
+
+const selectedPM = useSelectedPackageManager()
+
+const executeNpmxConnectorCommand = computed(() => {
+  return getExecuteCommand({
+    packageName: 'npmx-connector',
+    packageManager: selectedPM.value,
+  })
+})
+
+// Reset form when modal opens
+watch(open, isOpen => {
+  if (isOpen) {
+    tokenInput.value = ''
+  }
+})
+</script>
+
+<template>
+  <Modal
+    :modalTitle="$t('connector.modal.title')"
+    :class="isConnected && hasOperations ? 'max-w-2xl' : 'max-w-md'"
+    id="connector-modal"
+  >
+    <!-- Connected state -->
+    <div v-if="isConnected" class="space-y-4">
+      <div class="flex items-center gap-3 p-4 bg-bg-subtle border border-border rounded-lg">
+        <span class="w-3 h-3 rounded-full bg-green-500" aria-hidden="true" />
+        <div>
+          <p class="font-mono text-sm text-fg">{{ $t('connector.modal.connected') }}</p>
+          <p v-if="npmUser" class="font-mono text-xs text-fg-muted">
+            {{ $t('connector.modal.connected_as_user', { user: npmUser }) }}
+          </p>
+        </div>
+      </div>
+
+      <!-- Operations Queue -->
+      <OperationsQueue />
+
+      <div v-if="!hasOperations" class="text-sm text-fg-muted">
+        {{ $t('connector.modal.connected_hint') }}
+      </div>
+
+      <button
+        type="button"
+        class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+        @click="handleDisconnect"
+      >
+        {{ $t('connector.modal.disconnect') }}
+      </button>
+    </div>
+
+    <!-- Disconnected state -->
+    <form v-else class="space-y-4" @submit.prevent="handleConnect">
+      <p class="text-sm text-fg-muted">
+        {{ $t('connector.modal.run_hint') }}
+      </p>
+
+      <div
+        class="flex items-center p-3 bg-bg-muted border border-border rounded-lg font-mono text-sm"
+      >
+        <span class="text-fg-subtle">$</span>
+        <span class="text-fg-subtle ms-2">{{ executeNpmxConnectorCommand }}</span>
+        <div class="ms-auto flex items-center gap-2">
+          <PackageManagerSelect />
+
+          <button
+            type="button"
+            :aria-label="copied ? $t('connector.modal.copied') : $t('connector.modal.copy_command')"
+            class="ms-auto text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
+            @click="copyCommand"
+          >
+            <span v-if="!copied" class="i-carbon:copy block w-5 h-5" aria-hidden="true" />
+            <span
+              v-else
+              class="i-carbon:checkmark block w-5 h-5 text-green-500"
+              aria-hidden="true"
+            />
+          </button>
+        </div>
+      </div>
+
+      <p class="text-sm text-fg-muted">{{ $t('connector.modal.paste_token') }}</p>
+
+      <div class="space-y-3">
+        <div>
+          <label
+            for="connector-token"
+            class="block text-xs text-fg-subtle uppercase tracking-wider mb-1.5"
+          >
+            {{ $t('connector.modal.token_label') }}
+          </label>
+          <input
+            id="connector-token"
+            v-model="tokenInput"
+            type="password"
+            name="connector-token"
+            :placeholder="$t('connector.modal.token_placeholder')"
+            v-bind="noCorrect"
+            class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+          />
+        </div>
+
+        <details class="text-sm">
+          <summary
+            class="text-fg-subtle cursor-pointer hover:text-fg-muted transition-colors duration-200"
+          >
+            {{ $t('connector.modal.advanced') }}
+          </summary>
+          <div class="mt-3">
+            <label
+              for="connector-port"
+              class="block text-xs text-fg-subtle uppercase tracking-wider mb-1.5"
+            >
+              {{ $t('connector.modal.port_label') }}
+            </label>
+            <input
+              id="connector-port"
+              v-model="portInput"
+              type="text"
+              name="connector-port"
+              inputmode="numeric"
+              autocomplete="off"
+              class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+            />
+          </div>
+        </details>
+      </div>
+
+      <!-- Error message -->
+      <div
+        v-if="error"
+        role="alert"
+        class="p-3 text-sm text-red-400 bg-red-500/10 border border-red-500/20 rounded-md"
+      >
+        {{ error }}
+      </div>
+
+      <!-- Warning message -->
+      <div
+        role="alert"
+        class="p-3 text-sm text-red-400 bg-red-500/10 border border-red-500/20 rounded-md"
+      >
+        <p class="font-mono text-sm text-fg font-bold">
+          {{ $t('connector.modal.warning') }}
+        </p>
+        <p class="text-sm text-fg-muted">
+          {{ $t('connector.modal.warning_text') }}
+        </p>
+      </div>
+
+      <button
+        type="submit"
+        :disabled="!tokenInput.trim() || isConnecting"
+        class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
+      >
+        {{ isConnecting ? $t('connector.modal.connecting') : $t('connector.modal.connect') }}
+      </button>
+    </form>
+  </Modal>
+</template>
diff --git a/app/components/ConnectorModal.vue b/app/components/ConnectorModal.vue
deleted file mode 100644
index 25fb48895c..0000000000
--- a/app/components/ConnectorModal.vue
+++ /dev/null
@@ -1,233 +0,0 @@
-<script setup lang="ts">
-const open = defineModel<boolean>('open', { default: false })
-
-const { isConnected, isConnecting, npmUser, error, hasOperations, connect, disconnect } =
-  useConnector()
-
-const tokenInput = shallowRef('')
-const portInput = shallowRef('31415')
-const { copied, copy } = useClipboard({ copiedDuring: 2000 })
-
-async function handleConnect() {
-  const port = Number.parseInt(portInput.value, 10) || 31415
-  const success = await connect(tokenInput.value.trim(), port)
-  if (success) {
-    tokenInput.value = ''
-    open.value = false
-  }
-}
-
-function handleDisconnect() {
-  disconnect()
-}
-
-function copyCommand() {
-  let command = executeNpmxConnectorCommand.value
-  if (portInput.value !== '31415') {
-    command += ` --port ${portInput.value}`
-  }
-  copy(command)
-}
-
-const selectedPM = useSelectedPackageManager()
-
-const executeNpmxConnectorCommand = computed(() => {
-  return getExecuteCommand({
-    packageName: 'npmx-connector',
-    packageManager: selectedPM.value,
-  })
-})
-
-// Reset form when modal opens
-watch(open, isOpen => {
-  if (isOpen) {
-    tokenInput.value = ''
-  }
-})
-</script>
-
-<template>
-  <Teleport to="body">
-    <Transition
-      enter-active-class="transition-opacity duration-200"
-      leave-active-class="transition-opacity duration-200"
-      enter-from-class="opacity-0"
-      leave-to-class="opacity-0"
-    >
-      <div v-if="open" class="fixed inset-0 z-50 flex items-center justify-center p-4">
-        <!-- Backdrop -->
-        <button
-          type="button"
-          class="absolute inset-0 bg-black/60 cursor-default"
-          :aria-label="$t('common.close_modal')"
-          @click="open = false"
-        />
-
-        <!-- Modal -->
-        <div
-          class="relative w-full bg-bg border border-border rounded-lg shadow-xl max-h-[90vh] overflow-y-auto overscroll-contain"
-          :class="isConnected && hasOperations ? 'max-w-2xl' : 'max-w-md'"
-          role="dialog"
-          aria-modal="true"
-          aria-labelledby="connector-modal-title"
-        >
-          <div class="p-6">
-            <div class="flex items-center justify-between mb-6">
-              <h2 id="connector-modal-title" class="font-mono text-lg font-medium">
-                {{ $t('connector.modal.title') }}
-              </h2>
-              <button
-                type="button"
-                class="text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
-                :aria-label="$t('common.close')"
-                @click="open = false"
-              >
-                <span class="i-carbon:close block w-5 h-5" aria-hidden="true" />
-              </button>
-            </div>
-
-            <!-- Connected state -->
-            <div v-if="isConnected" class="space-y-4">
-              <div class="flex items-center gap-3 p-4 bg-bg-subtle border border-border rounded-lg">
-                <span class="w-3 h-3 rounded-full bg-green-500" aria-hidden="true" />
-                <div>
-                  <p class="font-mono text-sm text-fg">{{ $t('connector.modal.connected') }}</p>
-                  <p v-if="npmUser" class="font-mono text-xs text-fg-muted">
-                    {{ $t('connector.modal.connected_as_user', { user: npmUser }) }}
-                  </p>
-                </div>
-              </div>
-
-              <!-- Operations Queue -->
-              <OperationsQueue />
-
-              <div v-if="!hasOperations" class="text-sm text-fg-muted">
-                {{ $t('connector.modal.connected_hint') }}
-              </div>
-
-              <button
-                type="button"
-                class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-                @click="handleDisconnect"
-              >
-                {{ $t('connector.modal.disconnect') }}
-              </button>
-            </div>
-
-            <!-- Disconnected state -->
-            <form v-else class="space-y-4" @submit.prevent="handleConnect">
-              <p class="text-sm text-fg-muted">
-                {{ $t('connector.modal.run_hint') }}
-              </p>
-
-              <div
-                class="flex items-center p-3 bg-bg-muted border border-border rounded-lg font-mono text-sm"
-              >
-                <span class="text-fg-subtle">$</span>
-                <span class="text-fg-subtle ms-2">{{ executeNpmxConnectorCommand }}</span>
-                <div class="ms-auto flex items-center gap-2">
-                  <PackageManagerSelect />
-
-                  <button
-                    type="button"
-                    :aria-label="
-                      copied ? $t('connector.modal.copied') : $t('connector.modal.copy_command')
-                    "
-                    class="ms-auto text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
-                    @click="copyCommand"
-                  >
-                    <span v-if="!copied" class="i-carbon:copy block w-5 h-5" aria-hidden="true" />
-                    <span
-                      v-else
-                      class="i-carbon:checkmark block w-5 h-5 text-green-500"
-                      aria-hidden="true"
-                    />
-                  </button>
-                </div>
-              </div>
-
-              <p class="text-sm text-fg-muted">{{ $t('connector.modal.paste_token') }}</p>
-
-              <div class="space-y-3">
-                <div>
-                  <label
-                    for="connector-token"
-                    class="block text-xs text-fg-subtle uppercase tracking-wider mb-1.5"
-                  >
-                    {{ $t('connector.modal.token_label') }}
-                  </label>
-                  <input
-                    id="connector-token"
-                    v-model="tokenInput"
-                    type="password"
-                    name="connector-token"
-                    :placeholder="$t('connector.modal.token_placeholder')"
-                    v-bind="noCorrect"
-                    class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
-                  />
-                </div>
-
-                <details class="text-sm">
-                  <summary
-                    class="text-fg-subtle cursor-pointer hover:text-fg-muted transition-colors duration-200"
-                  >
-                    {{ $t('connector.modal.advanced') }}
-                  </summary>
-                  <div class="mt-3">
-                    <label
-                      for="connector-port"
-                      class="block text-xs text-fg-subtle uppercase tracking-wider mb-1.5"
-                    >
-                      {{ $t('connector.modal.port_label') }}
-                    </label>
-                    <input
-                      id="connector-port"
-                      v-model="portInput"
-                      type="text"
-                      name="connector-port"
-                      inputmode="numeric"
-                      autocomplete="off"
-                      class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
-                    />
-                  </div>
-                </details>
-              </div>
-
-              <!-- Error message -->
-              <div
-                v-if="error"
-                role="alert"
-                class="p-3 text-sm text-red-400 bg-red-500/10 border border-red-500/20 rounded-md"
-              >
-                {{ error }}
-              </div>
-
-              <!-- Warning message -->
-              <div
-                role="alert"
-                class="p-3 text-sm text-red-400 bg-red-500/10 border border-red-500/20 rounded-md"
-              >
-                <p class="font-mono text-sm text-fg font-bold">
-                  {{ $t('connector.modal.warning') }}
-                </p>
-                <p class="text-sm text-fg-muted">
-                  {{ $t('connector.modal.warning_text') }}
-                </p>
-              </div>
-
-              <button
-                type="submit"
-                :disabled="!tokenInput.trim() || isConnecting"
-                class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
-              >
-                {{
-                  isConnecting ? $t('connector.modal.connecting') : $t('connector.modal.connect')
-                }}
-              </button>
-            </form>
-          </div>
-        </div>
-      </div>
-    </Transition>
-  </Teleport>
-</template>
diff --git a/app/components/HeaderAccountMenu.client.vue b/app/components/HeaderAccountMenu.client.vue
index b49687d4d9..ff8ea159ba 100644
--- a/app/components/HeaderAccountMenu.client.vue
+++ b/app/components/HeaderAccountMenu.client.vue
@@ -11,8 +11,6 @@ const {
 const { user: atprotoUser } = useAtproto()
 
 const isOpen = shallowRef(false)
-const showConnectorModal = shallowRef(false)
-const showAuthModal = shallowRef(false)
 
 /** Check if connected to at least one service */
 const hasAnyConnection = computed(() => isNpmConnected.value || !!atprotoUser.value)
@@ -45,12 +43,15 @@ onUnmounted(() => {
 })
 
 function openConnectorModal() {
-  isOpen.value = false
-  showConnectorModal.value = true
+  const connectorModal = document.querySelector<HTMLDialogElement>('#connector-modal')
+  if (connectorModal) {
+    isOpen.value = false
+    connectorModal.showModal()
+  }
 }
 
-function handleModalOpen() {
-  const authModal = document.querySelector<HTMLDialogElement>('#modal')
+function openAuthModal() {
+  const authModal = document.querySelector<HTMLDialogElement>('#auth-modal')
   if (authModal) {
     isOpen.value = false
     authModal.showModal()
@@ -182,7 +183,7 @@ function handleModalOpen() {
               type="button"
               role="menuitem"
               class="w-full px-3 py-2.5 flex items-center gap-3 hover:bg-bg-subtle transition-colors text-start"
-              @click="handleModalOpen"
+              @click="openAuthModal"
             >
               <span class="w-8 h-8 rounded-full bg-bg-muted flex items-center justify-center">
                 <span class="i-carbon-cloud w-4 h-4 text-fg-muted" aria-hidden="true" />
@@ -231,11 +232,10 @@ function handleModalOpen() {
 
             <button
               v-if="!atprotoUser"
-              id="auth-modal-trigger"
               type="button"
               role="menuitem"
               class="w-full px-3 py-2.5 flex items-center gap-3 hover:bg-bg-subtle transition-colors text-start rounded-md"
-              @click="handleModalOpen"
+              @click="openAuthModal"
             >
               <span class="w-8 h-8 rounded-full bg-bg-muted flex items-center justify-center">
                 <span class="i-carbon-cloud w-4 h-4 text-fg-muted" aria-hidden="true" />
@@ -252,4 +252,6 @@ function handleModalOpen() {
       </div>
     </Transition>
   </div>
+  <ConnectorModal />
+  <AuthModal />
 </template>
diff --git a/app/components/Modal.client.vue b/app/components/Modal.client.vue
index 0ecbe3fc08..12879504b4 100644
--- a/app/components/Modal.client.vue
+++ b/app/components/Modal.client.vue
@@ -12,25 +12,27 @@ function handleModalClose() {
 </script>
 
 <template>
-  <dialog
-    id="modal"
-    class="w-full bg-bg border border-border rounded-lg shadow-xl max-h-[90vh] overflow-y-auto overscroll-contain m-0 m-auto p-6 text-white"
-  >
-    <!-- Modal top header section -->
-    <div class="flex items-center justify-between mb-6">
-      <h2 id="auth-modal-title" class="font-mono text-lg font-medium">
-        {{ modalTitle }}
-      </h2>
-      <button
-        type="button"
-        class="text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
-        :aria-label="$t('common.close')"
-        @click="handleModalClose"
-      >
-        <span class="i-carbon-close block w-5 h-5" aria-hidden="true" />
-      </button>
-    </div>
-    <!-- Modal body content -->
-    <slot></slot>
-  </dialog>
+  <Teleport to="body">
+    <dialog
+      class="w-full bg-bg border border-border rounded-lg shadow-xl max-h-[90vh] overflow-y-auto overscroll-contain m-0 m-auto p-6 text-white"
+      v-bind="$attrs"
+    >
+      <!-- Modal top header section -->
+      <div class="flex items-center justify-between mb-6">
+        <h2 class="font-mono text-lg font-medium">
+          {{ modalTitle }}
+        </h2>
+        <button
+          type="button"
+          class="text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
+          :aria-label="$t('common.close')"
+          @click="handleModalClose"
+        >
+          <span class="i-carbon-close block w-5 h-5" aria-hidden="true" />
+        </button>
+      </div>
+      <!-- Modal body content -->
+      <slot></slot>
+    </dialog>
+  </Teleport>
 </template>

From 6cad49e1361939c41fc84cf0716174e12c0b9a20 Mon Sep 17 00:00:00 2001
From: "dane.is.extraordinarily.cool" <me@dane.computer>
Date: Sat, 31 Jan 2026 13:39:46 -0500
Subject: [PATCH 06/23] chore: replacing open modal calls with new functions

---
 app/components/ClaimPackageModal.vue | 18 ++++++++++--------
 app/components/MobileMenu.vue        | 21 ++++++++++-----------
 app/components/Modal.client.vue      |  2 +-
 test/nuxt/components.spec.ts         |  2 +-
 4 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/app/components/ClaimPackageModal.vue b/app/components/ClaimPackageModal.vue
index 206a83bc21..cacd5162e5 100644
--- a/app/components/ClaimPackageModal.vue
+++ b/app/components/ClaimPackageModal.vue
@@ -38,6 +38,13 @@ async function checkAvailability() {
   }
 }
 
+function openConnectorModal() {
+  const connectorModal = document.querySelector<HTMLDialogElement>('#connector-modal')
+  if (connectorModal) {
+    connectorModal.showModal()
+  }
+}
+
 async function handleClaim() {
   if (!checkResult.value?.available || !isConnected.value) return
 
@@ -72,14 +79,14 @@ async function handleClaim() {
       if (completedOp.result?.requiresOtp) {
         // OTP is needed - open connector panel to handle it
         open.value = false
-        connectorModalOpen.value = true
+        openConnectorModal()
       } else {
         publishError.value = completedOp.result?.stderr || 'Failed to publish package'
       }
     } else {
       // Still pending/approved/running - open connector panel to show progress
       open.value = false
-      connectorModalOpen.value = true
+      openConnectorModal()
     }
   } catch (err) {
     publishError.value = err instanceof Error ? err.message : $t('claim.modal.failed_to_claim')
@@ -124,8 +131,6 @@ const previewPackageJson = computed(() => {
     ...(access && { publishConfig: { access } }),
   }
 })
-
-const connectorModalOpen = shallowRef(false)
 </script>
 
 <template>
@@ -351,7 +356,7 @@ const connectorModalOpen = shallowRef(false)
                   <button
                     type="button"
                     class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-colors duration-200 hover:bg-fg/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-                    @click="connectorModalOpen = true"
+                    @click="openConnectorModal"
                   >
                     {{ $t('claim.modal.connect_button') }}
                   </button>
@@ -420,7 +425,4 @@ const connectorModalOpen = shallowRef(false)
       </div>
     </Transition>
   </Teleport>
-
-  <!-- Connector modal -->
-  <ConnectorModal v-model:open="connectorModalOpen" />
 </template>
diff --git a/app/components/MobileMenu.vue b/app/components/MobileMenu.vue
index 6b515e9f1b..b5c99ad300 100644
--- a/app/components/MobileMenu.vue
+++ b/app/components/MobileMenu.vue
@@ -4,21 +4,24 @@ const isOpen = defineModel<boolean>('open', { default: false })
 const { isConnected, npmUser, avatar: npmAvatar } = useConnector()
 const { user: atprotoUser } = useAtproto()
 
-const showConnectorModal = shallowRef(false)
-const showAuthModal = shallowRef(false)
-
 function closeMenu() {
   isOpen.value = false
 }
 
 function handleShowConnector() {
-  showConnectorModal.value = true
-  closeMenu()
+  const connectorModal = document.querySelector<HTMLDialogElement>('#connector-modal')
+  if (connectorModal) {
+    closeMenu()
+    connectorModal.showModal()
+  }
 }
 
 function handleShowAuth() {
-  showAuthModal.value = true
-  closeMenu()
+  const authModal = document.querySelector<HTMLDialogElement>('#auth-modal')
+  if (authModal) {
+    closeMenu()
+    authModal.showModal()
+  }
 }
 
 // Close menu on route change
@@ -270,9 +273,5 @@ watch(isOpen, open => (isLocked.value = open))
         </Transition>
       </div>
     </Transition>
-
-    <!-- Modals -->
-    <ConnectorModal v-model:open="showConnectorModal" />
-    <AuthModal v-model:open="showAuthModal" />
   </Teleport>
 </template>
diff --git a/app/components/Modal.client.vue b/app/components/Modal.client.vue
index 12879504b4..3a9dcd4335 100644
--- a/app/components/Modal.client.vue
+++ b/app/components/Modal.client.vue
@@ -4,7 +4,7 @@ defineProps<{
 }>()
 
 function handleModalClose() {
-  const modal = document.querySelector<HTMLDialogElement>('#modal')
+  const modal = document.querySelector<HTMLDialogElement>('dialog[open]')
   if (modal) {
     modal.close()
   }
diff --git a/test/nuxt/components.spec.ts b/test/nuxt/components.spec.ts
index 70d32ff494..21a0925935 100644
--- a/test/nuxt/components.spec.ts
+++ b/test/nuxt/components.spec.ts
@@ -74,7 +74,7 @@ import CodeViewer from '~/components/CodeViewer.vue'
 import CodeDirectoryListing from '~/components/CodeDirectoryListing.vue'
 import CodeFileTree from '~/components/CodeFileTree.vue'
 import UserCombobox from '~/components/UserCombobox.vue'
-import ConnectorModal from '~/components/ConnectorModal.vue'
+import ConnectorModal from '~/components/ConnectorModal.client.vue'
 import HeaderAccountMenuServer from '~/components/HeaderAccountMenu.server.vue'
 import HeaderAccountMenuClient from '~/components/HeaderAccountMenu.client.vue'
 import ClaimPackageModal from '~/components/ClaimPackageModal.vue'

From 0b542da1a5a1b27e1f7d73da53482ddf652ab635 Mon Sep 17 00:00:00 2001
From: "dane.is.extraordinarily.cool" <me@dane.computer>
Date: Sat, 31 Jan 2026 13:53:27 -0500
Subject: [PATCH 07/23] fix: use the :modal attribute for modal styling to fix
 safari issues

---
 app/assets/main.css             | 8 ++++----
 app/components/Modal.client.vue | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/assets/main.css b/app/assets/main.css
index 961f32e109..0af5873c2b 100644
--- a/app/assets/main.css
+++ b/app/assets/main.css
@@ -556,12 +556,12 @@ input[type='search']::-webkit-search-results-decoration {
 }
 
 /* Locking the scroll whenever any of the modals are open */
-html:has(dialog:open) {
+html:has(dialog:modal) {
   overflow: hidden;
 }
 
 /* Backdrop styling when any of the modals are open */
-dialog:open::backdrop {
+dialog:modal::backdrop {
   @apply bg-black/60;
 }
 
@@ -572,14 +572,14 @@ dialog {
   transition-behavior: allow-discrete;
 }
 
-dialog:open {
+dialog:modal {
   opacity: 1;
   transition: opacity 200ms ease;
   transition-behavior: allow-discrete;
 }
 
 @starting-style {
-  dialog:open {
+  dialog[modal] {
     opacity: 0;
   }
 }
diff --git a/app/components/Modal.client.vue b/app/components/Modal.client.vue
index 3a9dcd4335..dbfa5dcc11 100644
--- a/app/components/Modal.client.vue
+++ b/app/components/Modal.client.vue
@@ -4,7 +4,7 @@ defineProps<{
 }>()
 
 function handleModalClose() {
-  const modal = document.querySelector<HTMLDialogElement>('dialog[open]')
+  const modal = document.querySelector<HTMLDialogElement>('dialog:modal')
   if (modal) {
     modal.close()
   }

From 95045999cccaaf61c110bf21173155aaa300e139 Mon Sep 17 00:00:00 2001
From: "dane.is.extraordinarily.cool" <me@dane.computer>
Date: Sat, 31 Jan 2026 14:22:30 -0500
Subject: [PATCH 08/23] feat: add closedby='any' attribute to dialog to allow
 for light dismiss

---
 app/components/Modal.client.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/components/Modal.client.vue b/app/components/Modal.client.vue
index dbfa5dcc11..1b7a637fc1 100644
--- a/app/components/Modal.client.vue
+++ b/app/components/Modal.client.vue
@@ -14,6 +14,7 @@ function handleModalClose() {
 <template>
   <Teleport to="body">
     <dialog
+      closedby="any"
       class="w-full bg-bg border border-border rounded-lg shadow-xl max-h-[90vh] overflow-y-auto overscroll-contain m-0 m-auto p-6 text-white"
       v-bind="$attrs"
     >

From 46b32bbb5d7a1a07c610a4206721125a682712ea Mon Sep 17 00:00:00 2001
From: "dane.is.extraordinarily.cool" <me@dane.computer>
Date: Sat, 31 Jan 2026 15:22:07 -0500
Subject: [PATCH 09/23] chore: add things back that were removed due to
 conflict

---
 app/components/ConnectorModal.client.vue | 90 ++++++++++++++++++------
 1 file changed, 69 insertions(+), 21 deletions(-)

diff --git a/app/components/ConnectorModal.client.vue b/app/components/ConnectorModal.client.vue
index 2918139538..cef6050e43 100644
--- a/app/components/ConnectorModal.client.vue
+++ b/app/components/ConnectorModal.client.vue
@@ -8,7 +8,10 @@ const tokenInput = shallowRef('')
 const portInput = shallowRef('31415')
 const { copied, copy } = useClipboard({ copiedDuring: 2000 })
 
+const hasAttemptedConnect = shallowRef(false)
+
 async function handleConnect() {
+  hasAttemptedConnect.value = true
   const port = Number.parseInt(portInput.value, 10) || 31415
   const success = await connect(tokenInput.value.trim(), port)
   if (success) {
@@ -38,10 +41,10 @@ const executeNpmxConnectorCommand = computed(() => {
   })
 })
 
-// Reset form when modal opens
 watch(open, isOpen => {
   if (isOpen) {
     tokenInput.value = ''
+    hasAttemptedConnect.value = false
   }
 })
 </script>
@@ -82,6 +85,31 @@ watch(open, isOpen => {
 
     <!-- Disconnected state -->
     <form v-else class="space-y-4" @submit.prevent="handleConnect">
+      <!-- Contributor-only notice -->
+      <div class="p-3 bg-amber-500/10 border border-amber-500/30 rounded-lg">
+        <div class="space-y-2">
+          <span
+            class="inline-block px-2 py-0.5 text-xs font-bold uppercase tracking-wider bg-amber-500/20 text-amber-400 rounded"
+          >
+            {{ $t('connector.modal.contributor_badge') }}
+          </span>
+          <p class="text-sm text-fg-muted">
+            <i18n-t keypath="connector.modal.contributor_notice">
+              <template #link>
+                <a
+                  href="https://github.com/npmx-dev/npmx.dev/blob/main/CONTRIBUTING.md#local-connector-cli"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="text-amber-400 hover:underline"
+                >
+                  {{ $t('connector.modal.contributor_link') }}
+                </a>
+              </template>
+            </i18n-t>
+          </p>
+        </div>
+      </div>
+
       <p class="text-sm text-fg-muted">
         {{ $t('connector.modal.run_hint') }}
       </p>
@@ -90,26 +118,46 @@ watch(open, isOpen => {
         class="flex items-center p-3 bg-bg-muted border border-border rounded-lg font-mono text-sm"
       >
         <span class="text-fg-subtle">$</span>
-        <span class="text-fg-subtle ms-2">{{ executeNpmxConnectorCommand }}</span>
-        <div class="ms-auto flex items-center gap-2">
-          <PackageManagerSelect />
-
-          <button
-            type="button"
-            :aria-label="copied ? $t('connector.modal.copied') : $t('connector.modal.copy_command')"
-            class="ms-auto text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
-            @click="copyCommand"
-          >
-            <span v-if="!copied" class="i-carbon:copy block w-5 h-5" aria-hidden="true" />
-            <span
-              v-else
-              class="i-carbon:checkmark block w-5 h-5 text-green-500"
-              aria-hidden="true"
-            />
-          </button>
-        </div>
+        <span class="text-fg-subtle ms-2">pnpm npmx-connector</span>
+        <button
+          type="button"
+          :aria-label="copied ? $t('connector.modal.copied') : $t('connector.modal.copy_command')"
+          class="ms-auto text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
+          @click="copy('pnpm npmx-connector')"
+        >
+          <span v-if="!copied" class="i-carbon:copy block w-5 h-5" aria-hidden="true" />
+          <span v-else class="i-carbon:checkmark block w-5 h-5 text-green-500" aria-hidden="true" />
+        </button>
       </div>
 
+      <!-- TODO: Uncomment when npmx-connector is published to npm
+                    <div
+                      class="flex items-center p-3 bg-bg-muted border border-border rounded-lg font-mono text-sm"
+                    >
+                      <span class="text-fg-subtle">$</span>
+                      <span class="text-fg-subtle ms-2">{{ executeNpmxConnectorCommand }}</span>
+                      <div class="ms-auto flex items-center gap-2">
+                        <PackageManagerSelect />
+
+                        <button
+                          type="button"
+                          :aria-label="
+                            copied ? $t('connector.modal.copied') : $t('connector.modal.copy_command')
+                          "
+                          class="ms-auto text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
+                          @click="copyCommand"
+                        >
+                          <span v-if="!copied" class="i-carbon:copy block w-5 h-5" aria-hidden="true" />
+                          <span
+                            v-else
+                            class="i-carbon:checkmark block w-5 h-5 text-green-500"
+                            aria-hidden="true"
+                          />
+                        </button>
+                      </div>
+                    </div>
+                    -->
+
       <p class="text-sm text-fg-muted">{{ $t('connector.modal.paste_token') }}</p>
 
       <div class="space-y-3">
@@ -157,9 +205,9 @@ watch(open, isOpen => {
         </details>
       </div>
 
-      <!-- Error message -->
+      <!-- Error message (only show after user explicitly clicks Connect) -->
       <div
-        v-if="error"
+        v-if="error && hasAttemptedConnect"
         role="alert"
         class="p-3 text-sm text-red-400 bg-red-500/10 border border-red-500/20 rounded-md"
       >

From 2204fd305df90ce8fec67378250304682fec3bbf Mon Sep 17 00:00:00 2001
From: "dane.is.extraordinarily.cool" <me@dane.computer>
Date: Sat, 31 Jan 2026 15:51:43 -0500
Subject: [PATCH 10/23] refactor: use modal component for ChartModal

---
 app/components/ChartModal.vue                 | 74 +++----------------
 app/components/Modal.client.vue               |  2 +-
 app/components/PackageWeeklyDownloadStats.vue | 28 +++----
 3 files changed, 21 insertions(+), 83 deletions(-)

diff --git a/app/components/ChartModal.vue b/app/components/ChartModal.vue
index 465ff4b1cd..51cb2d9a25 100644
--- a/app/components/ChartModal.vue
+++ b/app/components/ChartModal.vue
@@ -1,66 +1,14 @@
-<script setup lang="ts">
-const open = defineModel<boolean>('open', { default: false })
-
-function close() {
-  open.value = false
-}
-
-function handleKeydown(event: KeyboardEvent) {
-  if (event.key === 'Escape') {
-    close()
-  }
-}
-</script>
+<script setup lang="ts"></script>
 
 <template>
-  <Teleport to="body">
-    <Transition
-      enter-active-class="transition-opacity duration-200"
-      leave-active-class="transition-opacity duration-200"
-      enter-from-class="opacity-0"
-      leave-to-class="opacity-0"
-    >
-      <div
-        v-if="open"
-        class="fixed inset-0 z-50 flex items-center justify-center p-0 sm:p-4"
-        @keydown="handleKeydown"
-      >
-        <!-- Backdrop -->
-        <button
-          type="button"
-          class="absolute inset-0 bg-black/60 cursor-default"
-          :aria-label="$t('common.close_modal')"
-          @click="open = false"
-        />
-
-        <div
-          class="relative w-full h-full sm:h-auto bg-bg sm:border sm:border-border sm:rounded-lg shadow-xl sm:max-h-[90vh] overflow-y-auto overscroll-contain sm:max-w-3xl"
-          role="dialog"
-          aria-modal="true"
-          aria-labelledby="chart-modal-title"
-        >
-          <div class="p-4 sm:p-6">
-            <div class="flex items-center justify-between mb-4 sm:mb-6">
-              <h2 id="chart-modal-title" class="font-mono text-lg font-medium">
-                <slot name="title" />
-              </h2>
-              <button
-                type="button"
-                class="text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
-                :aria-label="$t('common.close')"
-                @click="open = false"
-              >
-                <span class="i-carbon-close block w-5 h-5" aria-hidden="true" />
-              </button>
-            </div>
-            <div class="font-mono text-sm">
-              <slot />
-            </div>
-          </div>
-
-          <slot name="after" v-bind="{ close }" />
-        </div>
-      </div>
-    </Transition>
-  </Teleport>
+  <Modal
+    :modalTitle="$t('package.downloads.modal_title')"
+    id="chart-modal"
+    class="h-full sm:h-min sm:border sm:border-border sm:rounded-lg shadow-xl sm:max-h-[90-vh] sm:max-w-3xl"
+  >
+    <div class="font-mono text-sm">
+      <slot />
+    </div>
+    <slot name="after" />
+  </Modal>
 </template>
diff --git a/app/components/Modal.client.vue b/app/components/Modal.client.vue
index 1b7a637fc1..79d5c1bc75 100644
--- a/app/components/Modal.client.vue
+++ b/app/components/Modal.client.vue
@@ -33,7 +33,7 @@ function handleModalClose() {
         </button>
       </div>
       <!-- Modal body content -->
-      <slot></slot>
+      <slot />
     </dialog>
   </Teleport>
 </template>
diff --git a/app/components/PackageWeeklyDownloadStats.vue b/app/components/PackageWeeklyDownloadStats.vue
index 7c986f13ce..8251ec5c1e 100644
--- a/app/components/PackageWeeklyDownloadStats.vue
+++ b/app/components/PackageWeeklyDownloadStats.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, watch } from 'vue'
+import { computed, onMounted, watch } from 'vue'
 import { VueUiSparkline } from 'vue-data-ui/vue-ui-sparkline'
 import { useCssVariables } from '../composables/useColors'
 import { OKLCH_NEUTRAL_FALLBACK, lightenOklch } from '../utils/colors'
@@ -8,7 +8,12 @@ const { packageName } = defineProps<{
   packageName: string
 }>()
 
-const showModal = shallowRef(false)
+function showChartModal() {
+  const chartModal = document.querySelector<HTMLDialogElement>('#chart-modal')
+  if (chartModal) {
+    chartModal.showModal()
+  }
+}
 
 const { data: packument } = usePackage(() => packageName)
 const createdIso = computed(() => packument.value?.time?.created ?? null)
@@ -195,7 +200,7 @@ const config = computed(() => {
       <template #actions>
         <button
           type="button"
-          @click="showModal = true"
+          @click="showChartModal"
           class="link-subtle font-mono text-sm inline-flex items-center gap-1.5 ms-auto shrink-0 self-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
           :title="$t('package.downloads.analyze')"
         >
@@ -242,28 +247,13 @@ const config = computed(() => {
     </CollapsibleSection>
   </div>
 
-  <ChartModal v-model:open="showModal">
-    <template #title>{{ $t('package.downloads.modal_title') }}</template>
-
+  <ChartModal>
     <PackageDownloadAnalytics
       :weeklyDownloads="weeklyDownloads"
       :inModal="true"
       :packageName="packageName"
       :createdIso="createdIso"
     />
-
-    <template #after="{ close }">
-      <div class="sm:hidden flex justify-center">
-        <button
-          type="button"
-          @click="close"
-          class="w-12 h-12 bg-bg-elevated border border-border rounded-full shadow-lg flex items-center justify-center text-fg-muted hover:text-fg transition-colors"
-          :aria-label="$t('common.close')"
-        >
-          <span class="w-5 h-5 i-carbon:close" aria-hidden="true" />
-        </button>
-      </div>
-    </template>
   </ChartModal>
 </template>
 

From 4d12eb12f98be532a332a5448579247dfbb19445 Mon Sep 17 00:00:00 2001
From: "dane.is.extraordinarily.cool" <me@dane.computer>
Date: Sat, 31 Jan 2026 16:52:55 -0500
Subject: [PATCH 11/23] refactor: update ClaimPackageModal to use Modal
 component

---
 app/components/ClaimPackageModal.vue     | 520 +++++++++++------------
 app/components/ConnectorModal.client.vue | 239 -----------
 app/components/ConnectorModal.vue        | 395 ++++++++---------
 3 files changed, 420 insertions(+), 734 deletions(-)
 delete mode 100644 app/components/ConnectorModal.client.vue

diff --git a/app/components/ClaimPackageModal.vue b/app/components/ClaimPackageModal.vue
index cacd5162e5..d46b598458 100644
--- a/app/components/ClaimPackageModal.vue
+++ b/app/components/ClaimPackageModal.vue
@@ -8,6 +8,21 @@ const props = defineProps<{
 
 const open = defineModel<boolean>('open', { default: false })
 
+// This flow doesn't seem like it's finished yet, whenever you're ready to open this modal call this function
+function showClaimPackageModal() {
+  const claimPackageModal = document.querySelector<HTMLDialogElement>('#claim-package-modal')
+  if (claimPackageModal) {
+    claimPackageModal.showModal()
+  }
+}
+
+function closeClaimPackageModal() {
+  const claimPackageModal = document.querySelector<HTMLDialogElement>('#claim-package-modal')
+  if (claimPackageModal) {
+    claimPackageModal.close()
+  }
+}
+
 const {
   isConnected,
   state,
@@ -79,6 +94,7 @@ async function handleClaim() {
       if (completedOp.result?.requiresOtp) {
         // OTP is needed - open connector panel to handle it
         open.value = false
+        closeClaimPackageModal()
         openConnectorModal()
       } else {
         publishError.value = completedOp.result?.stderr || 'Failed to publish package'
@@ -86,6 +102,7 @@ async function handleClaim() {
     } else {
       // Still pending/approved/running - open connector panel to show progress
       open.value = false
+      closeClaimPackageModal()
       openConnectorModal()
     }
   } catch (err) {
@@ -134,295 +151,250 @@ const previewPackageJson = computed(() => {
 </script>
 
 <template>
-  <Teleport to="body">
-    <Transition
-      enter-active-class="transition-opacity duration-200"
-      leave-active-class="transition-opacity duration-200"
-      enter-from-class="opacity-0"
-      leave-to-class="opacity-0"
-    >
-      <div v-if="open" class="fixed inset-0 z-50 flex items-center justify-center p-4">
-        <!-- Backdrop -->
+  <!-- Modal -->
+  <Modal :modalTitle="$t('claim.modal.title')" id="claim-package-modal">
+    <!-- Loading state -->
+    <div v-if="isChecking" class="py-8 text-center">
+      <LoadingSpinner :text="$t('claim.modal.checking')" />
+    </div>
+
+    <!-- Success state -->
+    <div v-else-if="publishSuccess" class="space-y-4">
+      <div
+        class="flex items-center gap-3 p-4 bg-green-500/10 border border-green-500/20 rounded-lg"
+      >
+        <span class="i-carbon-checkmark-filled text-green-500 w-6 h-6" aria-hidden="true" />
+        <div>
+          <p class="font-mono text-sm text-fg">{{ $t('claim.modal.success') }}</p>
+          <p class="text-xs text-fg-muted">
+            {{ $t('claim.modal.success_detail', { name: packageName }) }}
+          </p>
+        </div>
+      </div>
+
+      <p class="text-sm text-fg-muted">
+        {{ $t('claim.modal.success_hint') }}
+      </p>
+
+      <div class="flex gap-3">
+        <NuxtLink
+          :to="`/package/${packageName}`"
+          class="flex-1 px-4 py-2 font-mono text-sm text-center text-bg bg-fg rounded-md transition-colors duration-200 hover:bg-fg/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          @click="closeClaimPackageModal"
+        >
+          {{ $t('claim.modal.view_package') }}
+        </NuxtLink>
         <button
           type="button"
-          class="absolute inset-0 bg-black/60 cursor-default"
-          :aria-label="$t('common.close_modal')"
-          @click="open = false"
-        />
-
-        <!-- Modal -->
-        <div
-          class="relative w-full max-w-lg bg-bg border border-border rounded-lg shadow-xl max-h-[90vh] overflow-y-auto overscroll-contain"
-          role="dialog"
-          aria-modal="true"
-          aria-labelledby="claim-modal-title"
+          class="flex-1 px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          @click="closeClaimPackageModal"
         >
-          <div class="p-6">
-            <div class="flex items-center justify-between mb-6">
-              <h2 id="claim-modal-title" class="font-mono text-lg font-medium">
-                {{ $t('claim.modal.title') }}
-              </h2>
-              <button
-                type="button"
-                class="text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
-                :aria-label="$t('common.close')"
-                @click="open = false"
-              >
-                <span class="i-carbon-close block w-5 h-5" aria-hidden="true" />
-              </button>
-            </div>
-
-            <!-- Loading state -->
-            <div v-if="isChecking" class="py-8 text-center">
-              <LoadingSpinner :text="$t('claim.modal.checking')" />
-            </div>
-
-            <!-- Success state -->
-            <div v-else-if="publishSuccess" class="space-y-4">
-              <div
-                class="flex items-center gap-3 p-4 bg-green-500/10 border border-green-500/20 rounded-lg"
-              >
-                <span class="i-carbon-checkmark-filled text-green-500 w-6 h-6" aria-hidden="true" />
-                <div>
-                  <p class="font-mono text-sm text-fg">{{ $t('claim.modal.success') }}</p>
-                  <p class="text-xs text-fg-muted">
-                    {{ $t('claim.modal.success_detail', { name: packageName }) }}
-                  </p>
-                </div>
-              </div>
-
-              <p class="text-sm text-fg-muted">
-                {{ $t('claim.modal.success_hint') }}
-              </p>
+          {{ $t('common.close') }}
+        </button>
+      </div>
+    </div>
 
-              <div class="flex gap-3">
-                <NuxtLink
-                  :to="`/package/${packageName}`"
-                  class="flex-1 px-4 py-2 font-mono text-sm text-center text-bg bg-fg rounded-md transition-colors duration-200 hover:bg-fg/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-                  @click="open = false"
-                >
-                  {{ $t('claim.modal.view_package') }}
-                </NuxtLink>
-                <button
-                  type="button"
-                  class="flex-1 px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-                  @click="open = false"
-                >
-                  {{ $t('common.close') }}
-                </button>
-              </div>
-            </div>
+    <!-- Check result -->
+    <div v-else-if="checkResult" class="space-y-4">
+      <!-- Package name display -->
+      <div class="p-4 bg-bg-subtle border border-border rounded-lg">
+        <p class="font-mono text-lg text-fg">{{ checkResult.name }}</p>
+      </div>
 
-            <!-- Check result -->
-            <div v-else-if="checkResult" class="space-y-4">
-              <!-- Package name display -->
-              <div class="p-4 bg-bg-subtle border border-border rounded-lg">
-                <p class="font-mono text-lg text-fg">{{ checkResult.name }}</p>
-              </div>
+      <!-- Validation errors -->
+      <div
+        v-if="checkResult.validationErrors?.length"
+        class="p-3 text-sm text-red-400 bg-red-500/10 border border-red-500/20 rounded-md"
+        role="alert"
+      >
+        <p class="font-medium mb-1">{{ $t('claim.modal.invalid_name') }}</p>
+        <ul class="list-disc list-inside space-y-1">
+          <li v-for="err in checkResult.validationErrors" :key="err">{{ err }}</li>
+        </ul>
+      </div>
 
-              <!-- Validation errors -->
-              <div
-                v-if="checkResult.validationErrors?.length"
-                class="p-3 text-sm text-red-400 bg-red-500/10 border border-red-500/20 rounded-md"
-                role="alert"
-              >
-                <p class="font-medium mb-1">{{ $t('claim.modal.invalid_name') }}</p>
-                <ul class="list-disc list-inside space-y-1">
-                  <li v-for="err in checkResult.validationErrors" :key="err">{{ err }}</li>
-                </ul>
-              </div>
+      <!-- Validation warnings -->
+      <div
+        v-if="checkResult.validationWarnings?.length"
+        class="p-3 text-sm text-yellow-400 bg-yellow-500/10 border border-yellow-500/20 rounded-md"
+        role="alert"
+      >
+        <p class="font-medium mb-1">{{ $t('common.warnings') }}</p>
+        <ul class="list-disc list-inside space-y-1">
+          <li v-for="warn in checkResult.validationWarnings" :key="warn">{{ warn }}</li>
+        </ul>
+      </div>
 
-              <!-- Validation warnings -->
-              <div
-                v-if="checkResult.validationWarnings?.length"
-                class="p-3 text-sm text-yellow-400 bg-yellow-500/10 border border-yellow-500/20 rounded-md"
-                role="alert"
-              >
-                <p class="font-medium mb-1">{{ $t('common.warnings') }}</p>
-                <ul class="list-disc list-inside space-y-1">
-                  <li v-for="warn in checkResult.validationWarnings" :key="warn">{{ warn }}</li>
-                </ul>
-              </div>
+      <!-- Availability status -->
+      <div v-if="checkResult.valid">
+        <div
+          v-if="checkResult.available"
+          class="flex items-center gap-3 p-4 bg-green-500/10 border border-green-500/20 rounded-lg"
+        >
+          <span class="i-carbon-checkmark-filled text-green-500 w-5 h-5" aria-hidden="true" />
+          <p class="font-mono text-sm text-fg">{{ $t('claim.modal.available') }}</p>
+        </div>
 
-              <!-- Availability status -->
-              <div v-if="checkResult.valid">
-                <div
-                  v-if="checkResult.available"
-                  class="flex items-center gap-3 p-4 bg-green-500/10 border border-green-500/20 rounded-lg"
-                >
-                  <span
-                    class="i-carbon-checkmark-filled text-green-500 w-5 h-5"
-                    aria-hidden="true"
-                  />
-                  <p class="font-mono text-sm text-fg">{{ $t('claim.modal.available') }}</p>
-                </div>
-
-                <div
-                  v-else
-                  class="flex items-center gap-3 p-4 bg-red-500/10 border border-red-500/20 rounded-lg"
-                >
-                  <span class="i-carbon-close-filled text-red-500 w-5 h-5" aria-hidden="true" />
-                  <p class="font-mono text-sm text-fg">{{ $t('claim.modal.taken') }}</p>
-                </div>
-              </div>
+        <div
+          v-else
+          class="flex items-center gap-3 p-4 bg-red-500/10 border border-red-500/20 rounded-lg"
+        >
+          <span class="i-carbon-close-filled text-red-500 w-5 h-5" aria-hidden="true" />
+          <p class="font-mono text-sm text-fg">{{ $t('claim.modal.taken') }}</p>
+        </div>
+      </div>
 
-              <!-- Similar packages warning -->
-              <div v-if="checkResult.similarPackages?.length && checkResult.available">
-                <div
-                  :class="
-                    hasDangerousSimilarPackages
-                      ? 'bg-yellow-500/10 border-yellow-500/20'
-                      : 'bg-bg-subtle border-border'
-                  "
-                  class="p-4 border rounded-lg"
+      <!-- Similar packages warning -->
+      <div v-if="checkResult.similarPackages?.length && checkResult.available">
+        <div
+          :class="
+            hasDangerousSimilarPackages
+              ? 'bg-yellow-500/10 border-yellow-500/20'
+              : 'bg-bg-subtle border-border'
+          "
+          class="p-4 border rounded-lg"
+        >
+          <p
+            :class="hasDangerousSimilarPackages ? 'text-yellow-400' : 'text-fg-muted'"
+            class="text-sm font-medium mb-3"
+          >
+            <span v-if="hasDangerousSimilarPackages">
+              {{ $t('claim.modal.similar_warning') }}
+            </span>
+            <span v-else>{{ $t('claim.modal.related') }}</span>
+          </p>
+          <ul class="space-y-2">
+            <li
+              v-for="pkg in checkResult.similarPackages.slice(0, 5)"
+              :key="pkg.name"
+              class="flex items-start gap-2"
+            >
+              <span
+                v-if="pkg.similarity === 'exact-match'"
+                class="i-carbon-warning-filled text-red-500 w-4 h-4 mt-0.5 shrink-0"
+                aria-hidden="true"
+              />
+              <span
+                v-else-if="pkg.similarity === 'very-similar'"
+                class="i-carbon-warning text-yellow-500 w-4 h-4 mt-0.5 shrink-0"
+                aria-hidden="true"
+              />
+              <span v-else class="w-4 h-4 shrink-0" />
+              <div class="min-w-0">
+                <NuxtLink
+                  :to="`/package/${pkg.name}`"
+                  class="font-mono text-sm text-fg hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
+                  target="_blank"
                 >
-                  <p
-                    :class="hasDangerousSimilarPackages ? 'text-yellow-400' : 'text-fg-muted'"
-                    class="text-sm font-medium mb-3"
-                  >
-                    <span v-if="hasDangerousSimilarPackages">
-                      {{ $t('claim.modal.similar_warning') }}
-                    </span>
-                    <span v-else>{{ $t('claim.modal.related') }}</span>
-                  </p>
-                  <ul class="space-y-2">
-                    <li
-                      v-for="pkg in checkResult.similarPackages.slice(0, 5)"
-                      :key="pkg.name"
-                      class="flex items-start gap-2"
-                    >
-                      <span
-                        v-if="pkg.similarity === 'exact-match'"
-                        class="i-carbon-warning-filled text-red-500 w-4 h-4 mt-0.5 shrink-0"
-                        aria-hidden="true"
-                      />
-                      <span
-                        v-else-if="pkg.similarity === 'very-similar'"
-                        class="i-carbon-warning text-yellow-500 w-4 h-4 mt-0.5 shrink-0"
-                        aria-hidden="true"
-                      />
-                      <span v-else class="w-4 h-4 shrink-0" />
-                      <div class="min-w-0">
-                        <NuxtLink
-                          :to="`/package/${pkg.name}`"
-                          class="font-mono text-sm text-fg hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
-                          target="_blank"
-                        >
-                          {{ pkg.name }}
-                        </NuxtLink>
-                        <p v-if="pkg.description" class="text-xs text-fg-subtle truncate">
-                          {{ pkg.description }}
-                        </p>
-                      </div>
-                    </li>
-                  </ul>
-                </div>
+                  {{ pkg.name }}
+                </NuxtLink>
+                <p v-if="pkg.description" class="text-xs text-fg-subtle truncate">
+                  {{ pkg.description }}
+                </p>
               </div>
+            </li>
+          </ul>
+        </div>
+      </div>
 
-              <!-- Error message -->
-              <div
-                v-if="publishError"
-                role="alert"
-                class="p-3 text-sm text-red-400 bg-red-500/10 border border-red-500/20 rounded-md"
-              >
-                {{ publishError }}
-              </div>
+      <!-- Error message -->
+      <div
+        v-if="publishError"
+        role="alert"
+        class="p-3 text-sm text-red-400 bg-red-500/10 border border-red-500/20 rounded-md"
+      >
+        {{ publishError }}
+      </div>
 
-              <!-- Actions -->
-              <div v-if="checkResult.available && checkResult.valid" class="space-y-3">
-                <!-- Warning for unscoped packages -->
-                <div
-                  v-if="!isScoped"
-                  class="p-3 text-sm text-yellow-400 bg-yellow-500/10 border border-yellow-500/20 rounded-md"
-                >
-                  <p class="font-medium mb-1">{{ $t('claim.modal.scope_warning_title') }}</p>
-                  <p class="text-xs text-yellow-400/80">
-                    {{
-                      $t('claim.modal.scope_warning_text', {
-                        username: npmUser || 'username',
-                        name: packageName,
-                      })
-                    }}
-                  </p>
-                </div>
-
-                <!-- Not connected warning -->
-                <div v-if="!isConnected" class="space-y-3">
-                  <div
-                    class="p-3 text-sm text-yellow-400 bg-yellow-500/10 border border-yellow-500/20 rounded-md"
-                  >
-                    <p>{{ $t('claim.modal.connect_required') }}</p>
-                  </div>
-                  <button
-                    type="button"
-                    class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-colors duration-200 hover:bg-fg/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-                    @click="openConnectorModal"
-                  >
-                    {{ $t('claim.modal.connect_button') }}
-                  </button>
-                </div>
-
-                <!-- Claim button -->
-                <div v-else class="space-y-3">
-                  <p class="text-sm text-fg-muted">
-                    {{ $t('claim.modal.publish_hint') }}
-                  </p>
-
-                  <!-- Expandable package.json preview -->
-                  <details class="border border-border rounded-md overflow-hidden">
-                    <summary
-                      class="px-3 py-2 text-sm text-fg-muted bg-bg-subtle cursor-pointer hover:text-fg transition-colors select-none"
-                    >
-                      {{ $t('claim.modal.preview_json') }}
-                    </summary>
-                    <pre class="p-3 text-xs font-mono text-fg-muted bg-bg-muted overflow-x-auto">{{
-                      JSON.stringify(previewPackageJson, null, 2)
-                    }}</pre>
-                  </details>
-
-                  <button
-                    type="button"
-                    :disabled="isPublishing"
-                    class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-colors duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-                    @click="handleClaim"
-                  >
-                    {{
-                      isPublishing ? $t('claim.modal.publishing') : $t('claim.modal.claim_button')
-                    }}
-                  </button>
-                </div>
-              </div>
+      <!-- Actions -->
+      <div v-if="checkResult.available && checkResult.valid" class="space-y-3">
+        <!-- Warning for unscoped packages -->
+        <div
+          v-if="!isScoped"
+          class="p-3 text-sm text-yellow-400 bg-yellow-500/10 border border-yellow-500/20 rounded-md"
+        >
+          <p class="font-medium mb-1">{{ $t('claim.modal.scope_warning_title') }}</p>
+          <p class="text-xs text-yellow-400/80">
+            {{
+              $t('claim.modal.scope_warning_text', {
+                username: npmUser || 'username',
+                name: packageName,
+              })
+            }}
+          </p>
+        </div>
 
-              <!-- Close button for unavailable/invalid -->
-              <button
-                v-if="!checkResult.available || !checkResult.valid"
-                type="button"
-                class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-                @click="open = false"
-              >
-                {{ $t('common.close') }}
-              </button>
-            </div>
-
-            <!-- Error state -->
-            <div v-else-if="publishError" class="space-y-4">
-              <div
-                role="alert"
-                class="p-3 text-sm text-red-400 bg-red-500/10 border border-red-500/20 rounded-md"
-              >
-                {{ publishError }}
-              </div>
-              <button
-                type="button"
-                class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-                @click="checkAvailability"
-              >
-                {{ $t('common.retry') }}
-              </button>
-            </div>
+        <!-- Not connected warning -->
+        <div v-if="!isConnected" class="space-y-3">
+          <div
+            class="p-3 text-sm text-yellow-400 bg-yellow-500/10 border border-yellow-500/20 rounded-md"
+          >
+            <p>{{ $t('claim.modal.connect_required') }}</p>
           </div>
+          <button
+            type="button"
+            class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-colors duration-200 hover:bg-fg/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            @click="openConnectorModal"
+          >
+            {{ $t('claim.modal.connect_button') }}
+          </button>
+        </div>
+
+        <!-- Claim button -->
+        <div v-else class="space-y-3">
+          <p class="text-sm text-fg-muted">
+            {{ $t('claim.modal.publish_hint') }}
+          </p>
+
+          <!-- Expandable package.json preview -->
+          <details class="border border-border rounded-md overflow-hidden">
+            <summary
+              class="px-3 py-2 text-sm text-fg-muted bg-bg-subtle cursor-pointer hover:text-fg transition-colors select-none"
+            >
+              {{ $t('claim.modal.preview_json') }}
+            </summary>
+            <pre class="p-3 text-xs font-mono text-fg-muted bg-bg-muted overflow-x-auto">{{
+              JSON.stringify(previewPackageJson, null, 2)
+            }}</pre>
+          </details>
+
+          <button
+            type="button"
+            :disabled="isPublishing"
+            class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-colors duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            @click="handleClaim"
+          >
+            {{ isPublishing ? $t('claim.modal.publishing') : $t('claim.modal.claim_button') }}
+          </button>
         </div>
       </div>
-    </Transition>
-  </Teleport>
+
+      <!-- Close button for unavailable/invalid -->
+      <button
+        v-if="!checkResult.available || !checkResult.valid"
+        type="button"
+        class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+        @click="closeClaimPackageModal"
+      >
+        {{ $t('common.close') }}
+      </button>
+    </div>
+
+    <!-- Error state -->
+    <div v-else-if="publishError" class="space-y-4">
+      <div
+        role="alert"
+        class="p-3 text-sm text-red-400 bg-red-500/10 border border-red-500/20 rounded-md"
+      >
+        {{ publishError }}
+      </div>
+      <button
+        type="button"
+        class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+        @click="checkAvailability"
+      >
+        {{ $t('common.retry') }}
+      </button>
+    </div>
+  </Modal>
 </template>
diff --git a/app/components/ConnectorModal.client.vue b/app/components/ConnectorModal.client.vue
deleted file mode 100644
index cef6050e43..0000000000
--- a/app/components/ConnectorModal.client.vue
+++ /dev/null
@@ -1,239 +0,0 @@
-<script setup lang="ts">
-const open = defineModel<boolean>('open', { default: false })
-
-const { isConnected, isConnecting, npmUser, error, hasOperations, connect, disconnect } =
-  useConnector()
-
-const tokenInput = shallowRef('')
-const portInput = shallowRef('31415')
-const { copied, copy } = useClipboard({ copiedDuring: 2000 })
-
-const hasAttemptedConnect = shallowRef(false)
-
-async function handleConnect() {
-  hasAttemptedConnect.value = true
-  const port = Number.parseInt(portInput.value, 10) || 31415
-  const success = await connect(tokenInput.value.trim(), port)
-  if (success) {
-    tokenInput.value = ''
-    open.value = false
-  }
-}
-
-function handleDisconnect() {
-  disconnect()
-}
-
-function copyCommand() {
-  let command = executeNpmxConnectorCommand.value
-  if (portInput.value !== '31415') {
-    command += ` --port ${portInput.value}`
-  }
-  copy(command)
-}
-
-const selectedPM = useSelectedPackageManager()
-
-const executeNpmxConnectorCommand = computed(() => {
-  return getExecuteCommand({
-    packageName: 'npmx-connector',
-    packageManager: selectedPM.value,
-  })
-})
-
-watch(open, isOpen => {
-  if (isOpen) {
-    tokenInput.value = ''
-    hasAttemptedConnect.value = false
-  }
-})
-</script>
-
-<template>
-  <Modal
-    :modalTitle="$t('connector.modal.title')"
-    :class="isConnected && hasOperations ? 'max-w-2xl' : 'max-w-md'"
-    id="connector-modal"
-  >
-    <!-- Connected state -->
-    <div v-if="isConnected" class="space-y-4">
-      <div class="flex items-center gap-3 p-4 bg-bg-subtle border border-border rounded-lg">
-        <span class="w-3 h-3 rounded-full bg-green-500" aria-hidden="true" />
-        <div>
-          <p class="font-mono text-sm text-fg">{{ $t('connector.modal.connected') }}</p>
-          <p v-if="npmUser" class="font-mono text-xs text-fg-muted">
-            {{ $t('connector.modal.connected_as_user', { user: npmUser }) }}
-          </p>
-        </div>
-      </div>
-
-      <!-- Operations Queue -->
-      <OperationsQueue />
-
-      <div v-if="!hasOperations" class="text-sm text-fg-muted">
-        {{ $t('connector.modal.connected_hint') }}
-      </div>
-
-      <button
-        type="button"
-        class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-        @click="handleDisconnect"
-      >
-        {{ $t('connector.modal.disconnect') }}
-      </button>
-    </div>
-
-    <!-- Disconnected state -->
-    <form v-else class="space-y-4" @submit.prevent="handleConnect">
-      <!-- Contributor-only notice -->
-      <div class="p-3 bg-amber-500/10 border border-amber-500/30 rounded-lg">
-        <div class="space-y-2">
-          <span
-            class="inline-block px-2 py-0.5 text-xs font-bold uppercase tracking-wider bg-amber-500/20 text-amber-400 rounded"
-          >
-            {{ $t('connector.modal.contributor_badge') }}
-          </span>
-          <p class="text-sm text-fg-muted">
-            <i18n-t keypath="connector.modal.contributor_notice">
-              <template #link>
-                <a
-                  href="https://github.com/npmx-dev/npmx.dev/blob/main/CONTRIBUTING.md#local-connector-cli"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  class="text-amber-400 hover:underline"
-                >
-                  {{ $t('connector.modal.contributor_link') }}
-                </a>
-              </template>
-            </i18n-t>
-          </p>
-        </div>
-      </div>
-
-      <p class="text-sm text-fg-muted">
-        {{ $t('connector.modal.run_hint') }}
-      </p>
-
-      <div
-        class="flex items-center p-3 bg-bg-muted border border-border rounded-lg font-mono text-sm"
-      >
-        <span class="text-fg-subtle">$</span>
-        <span class="text-fg-subtle ms-2">pnpm npmx-connector</span>
-        <button
-          type="button"
-          :aria-label="copied ? $t('connector.modal.copied') : $t('connector.modal.copy_command')"
-          class="ms-auto text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
-          @click="copy('pnpm npmx-connector')"
-        >
-          <span v-if="!copied" class="i-carbon:copy block w-5 h-5" aria-hidden="true" />
-          <span v-else class="i-carbon:checkmark block w-5 h-5 text-green-500" aria-hidden="true" />
-        </button>
-      </div>
-
-      <!-- TODO: Uncomment when npmx-connector is published to npm
-                    <div
-                      class="flex items-center p-3 bg-bg-muted border border-border rounded-lg font-mono text-sm"
-                    >
-                      <span class="text-fg-subtle">$</span>
-                      <span class="text-fg-subtle ms-2">{{ executeNpmxConnectorCommand }}</span>
-                      <div class="ms-auto flex items-center gap-2">
-                        <PackageManagerSelect />
-
-                        <button
-                          type="button"
-                          :aria-label="
-                            copied ? $t('connector.modal.copied') : $t('connector.modal.copy_command')
-                          "
-                          class="ms-auto text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
-                          @click="copyCommand"
-                        >
-                          <span v-if="!copied" class="i-carbon:copy block w-5 h-5" aria-hidden="true" />
-                          <span
-                            v-else
-                            class="i-carbon:checkmark block w-5 h-5 text-green-500"
-                            aria-hidden="true"
-                          />
-                        </button>
-                      </div>
-                    </div>
-                    -->
-
-      <p class="text-sm text-fg-muted">{{ $t('connector.modal.paste_token') }}</p>
-
-      <div class="space-y-3">
-        <div>
-          <label
-            for="connector-token"
-            class="block text-xs text-fg-subtle uppercase tracking-wider mb-1.5"
-          >
-            {{ $t('connector.modal.token_label') }}
-          </label>
-          <input
-            id="connector-token"
-            v-model="tokenInput"
-            type="password"
-            name="connector-token"
-            :placeholder="$t('connector.modal.token_placeholder')"
-            v-bind="noCorrect"
-            class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
-          />
-        </div>
-
-        <details class="text-sm">
-          <summary
-            class="text-fg-subtle cursor-pointer hover:text-fg-muted transition-colors duration-200"
-          >
-            {{ $t('connector.modal.advanced') }}
-          </summary>
-          <div class="mt-3">
-            <label
-              for="connector-port"
-              class="block text-xs text-fg-subtle uppercase tracking-wider mb-1.5"
-            >
-              {{ $t('connector.modal.port_label') }}
-            </label>
-            <input
-              id="connector-port"
-              v-model="portInput"
-              type="text"
-              name="connector-port"
-              inputmode="numeric"
-              autocomplete="off"
-              class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
-            />
-          </div>
-        </details>
-      </div>
-
-      <!-- Error message (only show after user explicitly clicks Connect) -->
-      <div
-        v-if="error && hasAttemptedConnect"
-        role="alert"
-        class="p-3 text-sm text-red-400 bg-red-500/10 border border-red-500/20 rounded-md"
-      >
-        {{ error }}
-      </div>
-
-      <!-- Warning message -->
-      <div
-        role="alert"
-        class="p-3 text-sm text-red-400 bg-red-500/10 border border-red-500/20 rounded-md"
-      >
-        <p class="font-mono text-sm text-fg font-bold">
-          {{ $t('connector.modal.warning') }}
-        </p>
-        <p class="text-sm text-fg-muted">
-          {{ $t('connector.modal.warning_text') }}
-        </p>
-      </div>
-
-      <button
-        type="submit"
-        :disabled="!tokenInput.trim() || isConnecting"
-        class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
-      >
-        {{ isConnecting ? $t('connector.modal.connecting') : $t('connector.modal.connect') }}
-      </button>
-    </form>
-  </Modal>
-</template>
diff --git a/app/components/ConnectorModal.vue b/app/components/ConnectorModal.vue
index 343fa24ce8..cef6050e43 100644
--- a/app/components/ConnectorModal.vue
+++ b/app/components/ConnectorModal.vue
@@ -41,7 +41,6 @@ const executeNpmxConnectorCommand = computed(() => {
   })
 })
 
-// Reset form when modal opens
 watch(open, isOpen => {
   if (isOpen) {
     tokenInput.value = ''
@@ -51,236 +50,190 @@ watch(open, isOpen => {
 </script>
 
 <template>
-  <Teleport to="body">
-    <Transition
-      enter-active-class="transition-opacity duration-200"
-      leave-active-class="transition-opacity duration-200"
-      enter-from-class="opacity-0"
-      leave-to-class="opacity-0"
-    >
-      <div v-if="open" class="fixed inset-0 z-50 flex items-center justify-center p-4">
-        <!-- Backdrop -->
-        <button
-          type="button"
-          class="absolute inset-0 bg-black/60 cursor-default"
-          :aria-label="$t('common.close_modal')"
-          @click="open = false"
-        />
-
-        <!-- Modal -->
-        <div
-          class="relative w-full bg-bg border border-border rounded-lg shadow-xl max-h-[90vh] overflow-y-auto overscroll-contain"
-          :class="isConnected && hasOperations ? 'max-w-2xl' : 'max-w-md'"
-          role="dialog"
-          aria-modal="true"
-          aria-labelledby="connector-modal-title"
-        >
-          <div class="p-6">
-            <div class="flex items-center justify-between mb-6">
-              <h2 id="connector-modal-title" class="font-mono text-lg font-medium">
-                {{ $t('connector.modal.title') }}
-              </h2>
-              <button
-                type="button"
-                class="text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
-                :aria-label="$t('common.close')"
-                @click="open = false"
-              >
-                <span class="i-carbon:close block w-5 h-5" aria-hidden="true" />
-              </button>
-            </div>
-
-            <!-- Connected state -->
-            <div v-if="isConnected" class="space-y-4">
-              <div class="flex items-center gap-3 p-4 bg-bg-subtle border border-border rounded-lg">
-                <span class="w-3 h-3 rounded-full bg-green-500" aria-hidden="true" />
-                <div>
-                  <p class="font-mono text-sm text-fg">{{ $t('connector.modal.connected') }}</p>
-                  <p v-if="npmUser" class="font-mono text-xs text-fg-muted">
-                    {{ $t('connector.modal.connected_as_user', { user: npmUser }) }}
-                  </p>
-                </div>
-              </div>
-
-              <!-- Operations Queue -->
-              <OperationsQueue />
-
-              <div v-if="!hasOperations" class="text-sm text-fg-muted">
-                {{ $t('connector.modal.connected_hint') }}
-              </div>
-
-              <button
-                type="button"
-                class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-                @click="handleDisconnect"
-              >
-                {{ $t('connector.modal.disconnect') }}
-              </button>
-            </div>
+  <Modal
+    :modalTitle="$t('connector.modal.title')"
+    :class="isConnected && hasOperations ? 'max-w-2xl' : 'max-w-md'"
+    id="connector-modal"
+  >
+    <!-- Connected state -->
+    <div v-if="isConnected" class="space-y-4">
+      <div class="flex items-center gap-3 p-4 bg-bg-subtle border border-border rounded-lg">
+        <span class="w-3 h-3 rounded-full bg-green-500" aria-hidden="true" />
+        <div>
+          <p class="font-mono text-sm text-fg">{{ $t('connector.modal.connected') }}</p>
+          <p v-if="npmUser" class="font-mono text-xs text-fg-muted">
+            {{ $t('connector.modal.connected_as_user', { user: npmUser }) }}
+          </p>
+        </div>
+      </div>
 
-            <!-- Disconnected state -->
-            <form v-else class="space-y-4" @submit.prevent="handleConnect">
-              <!-- Contributor-only notice -->
-              <div class="p-3 bg-amber-500/10 border border-amber-500/30 rounded-lg">
-                <div class="space-y-2">
-                  <span
-                    class="inline-block px-2 py-0.5 text-xs font-bold uppercase tracking-wider bg-amber-500/20 text-amber-400 rounded"
-                  >
-                    {{ $t('connector.modal.contributor_badge') }}
-                  </span>
-                  <p class="text-sm text-fg-muted">
-                    <i18n-t keypath="connector.modal.contributor_notice">
-                      <template #link>
-                        <a
-                          href="https://github.com/npmx-dev/npmx.dev/blob/main/CONTRIBUTING.md#local-connector-cli"
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          class="text-amber-400 hover:underline"
-                        >
-                          {{ $t('connector.modal.contributor_link') }}
-                        </a>
-                      </template>
-                    </i18n-t>
-                  </p>
-                </div>
-              </div>
+      <!-- Operations Queue -->
+      <OperationsQueue />
 
-              <p class="text-sm text-fg-muted">
-                {{ $t('connector.modal.run_hint') }}
-              </p>
+      <div v-if="!hasOperations" class="text-sm text-fg-muted">
+        {{ $t('connector.modal.connected_hint') }}
+      </div>
 
-              <div
-                class="flex items-center p-3 bg-bg-muted border border-border rounded-lg font-mono text-sm"
-              >
-                <span class="text-fg-subtle">$</span>
-                <span class="text-fg-subtle ms-2">pnpm npmx-connector</span>
-                <button
-                  type="button"
-                  :aria-label="
-                    copied ? $t('connector.modal.copied') : $t('connector.modal.copy_command')
-                  "
-                  class="ms-auto text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
-                  @click="copy('pnpm npmx-connector')"
+      <button
+        type="button"
+        class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+        @click="handleDisconnect"
+      >
+        {{ $t('connector.modal.disconnect') }}
+      </button>
+    </div>
+
+    <!-- Disconnected state -->
+    <form v-else class="space-y-4" @submit.prevent="handleConnect">
+      <!-- Contributor-only notice -->
+      <div class="p-3 bg-amber-500/10 border border-amber-500/30 rounded-lg">
+        <div class="space-y-2">
+          <span
+            class="inline-block px-2 py-0.5 text-xs font-bold uppercase tracking-wider bg-amber-500/20 text-amber-400 rounded"
+          >
+            {{ $t('connector.modal.contributor_badge') }}
+          </span>
+          <p class="text-sm text-fg-muted">
+            <i18n-t keypath="connector.modal.contributor_notice">
+              <template #link>
+                <a
+                  href="https://github.com/npmx-dev/npmx.dev/blob/main/CONTRIBUTING.md#local-connector-cli"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="text-amber-400 hover:underline"
                 >
-                  <span v-if="!copied" class="i-carbon:copy block w-5 h-5" aria-hidden="true" />
-                  <span
-                    v-else
-                    class="i-carbon:checkmark block w-5 h-5 text-green-500"
-                    aria-hidden="true"
-                  />
-                </button>
-              </div>
-
-              <!-- TODO: Uncomment when npmx-connector is published to npm
-              <div
-                class="flex items-center p-3 bg-bg-muted border border-border rounded-lg font-mono text-sm"
-              >
-                <span class="text-fg-subtle">$</span>
-                <span class="text-fg-subtle ms-2">{{ executeNpmxConnectorCommand }}</span>
-                <div class="ms-auto flex items-center gap-2">
-                  <PackageManagerSelect />
-
-                  <button
-                    type="button"
-                    :aria-label="
-                      copied ? $t('connector.modal.copied') : $t('connector.modal.copy_command')
-                    "
-                    class="ms-auto text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
-                    @click="copyCommand"
-                  >
-                    <span v-if="!copied" class="i-carbon:copy block w-5 h-5" aria-hidden="true" />
-                    <span
-                      v-else
-                      class="i-carbon:checkmark block w-5 h-5 text-green-500"
-                      aria-hidden="true"
-                    />
-                  </button>
-                </div>
-              </div>
-              -->
+                  {{ $t('connector.modal.contributor_link') }}
+                </a>
+              </template>
+            </i18n-t>
+          </p>
+        </div>
+      </div>
 
-              <p class="text-sm text-fg-muted">{{ $t('connector.modal.paste_token') }}</p>
+      <p class="text-sm text-fg-muted">
+        {{ $t('connector.modal.run_hint') }}
+      </p>
 
-              <div class="space-y-3">
-                <div>
-                  <label
-                    for="connector-token"
-                    class="block text-xs text-fg-subtle uppercase tracking-wider mb-1.5"
-                  >
-                    {{ $t('connector.modal.token_label') }}
-                  </label>
-                  <input
-                    id="connector-token"
-                    v-model="tokenInput"
-                    type="password"
-                    name="connector-token"
-                    :placeholder="$t('connector.modal.token_placeholder')"
-                    v-bind="noCorrect"
-                    class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
-                  />
-                </div>
+      <div
+        class="flex items-center p-3 bg-bg-muted border border-border rounded-lg font-mono text-sm"
+      >
+        <span class="text-fg-subtle">$</span>
+        <span class="text-fg-subtle ms-2">pnpm npmx-connector</span>
+        <button
+          type="button"
+          :aria-label="copied ? $t('connector.modal.copied') : $t('connector.modal.copy_command')"
+          class="ms-auto text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
+          @click="copy('pnpm npmx-connector')"
+        >
+          <span v-if="!copied" class="i-carbon:copy block w-5 h-5" aria-hidden="true" />
+          <span v-else class="i-carbon:checkmark block w-5 h-5 text-green-500" aria-hidden="true" />
+        </button>
+      </div>
 
-                <details class="text-sm">
-                  <summary
-                    class="text-fg-subtle cursor-pointer hover:text-fg-muted transition-colors duration-200"
-                  >
-                    {{ $t('connector.modal.advanced') }}
-                  </summary>
-                  <div class="mt-3">
-                    <label
-                      for="connector-port"
-                      class="block text-xs text-fg-subtle uppercase tracking-wider mb-1.5"
+      <!-- TODO: Uncomment when npmx-connector is published to npm
+                    <div
+                      class="flex items-center p-3 bg-bg-muted border border-border rounded-lg font-mono text-sm"
                     >
-                      {{ $t('connector.modal.port_label') }}
-                    </label>
-                    <input
-                      id="connector-port"
-                      v-model="portInput"
-                      type="text"
-                      name="connector-port"
-                      inputmode="numeric"
-                      autocomplete="off"
-                      class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
-                    />
-                  </div>
-                </details>
-              </div>
+                      <span class="text-fg-subtle">$</span>
+                      <span class="text-fg-subtle ms-2">{{ executeNpmxConnectorCommand }}</span>
+                      <div class="ms-auto flex items-center gap-2">
+                        <PackageManagerSelect />
+
+                        <button
+                          type="button"
+                          :aria-label="
+                            copied ? $t('connector.modal.copied') : $t('connector.modal.copy_command')
+                          "
+                          class="ms-auto text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
+                          @click="copyCommand"
+                        >
+                          <span v-if="!copied" class="i-carbon:copy block w-5 h-5" aria-hidden="true" />
+                          <span
+                            v-else
+                            class="i-carbon:checkmark block w-5 h-5 text-green-500"
+                            aria-hidden="true"
+                          />
+                        </button>
+                      </div>
+                    </div>
+                    -->
+
+      <p class="text-sm text-fg-muted">{{ $t('connector.modal.paste_token') }}</p>
+
+      <div class="space-y-3">
+        <div>
+          <label
+            for="connector-token"
+            class="block text-xs text-fg-subtle uppercase tracking-wider mb-1.5"
+          >
+            {{ $t('connector.modal.token_label') }}
+          </label>
+          <input
+            id="connector-token"
+            v-model="tokenInput"
+            type="password"
+            name="connector-token"
+            :placeholder="$t('connector.modal.token_placeholder')"
+            v-bind="noCorrect"
+            class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+          />
+        </div>
 
-              <!-- Error message (only show after user explicitly clicks Connect) -->
-              <div
-                v-if="error && hasAttemptedConnect"
-                role="alert"
-                class="p-3 text-sm text-red-400 bg-red-500/10 border border-red-500/20 rounded-md"
-              >
-                {{ error }}
-              </div>
+        <details class="text-sm">
+          <summary
+            class="text-fg-subtle cursor-pointer hover:text-fg-muted transition-colors duration-200"
+          >
+            {{ $t('connector.modal.advanced') }}
+          </summary>
+          <div class="mt-3">
+            <label
+              for="connector-port"
+              class="block text-xs text-fg-subtle uppercase tracking-wider mb-1.5"
+            >
+              {{ $t('connector.modal.port_label') }}
+            </label>
+            <input
+              id="connector-port"
+              v-model="portInput"
+              type="text"
+              name="connector-port"
+              inputmode="numeric"
+              autocomplete="off"
+              class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+            />
+          </div>
+        </details>
+      </div>
 
-              <!-- Warning message -->
-              <div
-                role="alert"
-                class="p-3 text-sm text-red-400 bg-red-500/10 border border-red-500/20 rounded-md"
-              >
-                <p class="font-mono text-sm text-fg font-bold">
-                  {{ $t('connector.modal.warning') }}
-                </p>
-                <p class="text-sm text-fg-muted">
-                  {{ $t('connector.modal.warning_text') }}
-                </p>
-              </div>
+      <!-- Error message (only show after user explicitly clicks Connect) -->
+      <div
+        v-if="error && hasAttemptedConnect"
+        role="alert"
+        class="p-3 text-sm text-red-400 bg-red-500/10 border border-red-500/20 rounded-md"
+      >
+        {{ error }}
+      </div>
 
-              <button
-                type="submit"
-                :disabled="!tokenInput.trim() || isConnecting"
-                class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
-              >
-                {{
-                  isConnecting ? $t('connector.modal.connecting') : $t('connector.modal.connect')
-                }}
-              </button>
-            </form>
-          </div>
-        </div>
+      <!-- Warning message -->
+      <div
+        role="alert"
+        class="p-3 text-sm text-red-400 bg-red-500/10 border border-red-500/20 rounded-md"
+      >
+        <p class="font-mono text-sm text-fg font-bold">
+          {{ $t('connector.modal.warning') }}
+        </p>
+        <p class="text-sm text-fg-muted">
+          {{ $t('connector.modal.warning_text') }}
+        </p>
       </div>
-    </Transition>
-  </Teleport>
+
+      <button
+        type="submit"
+        :disabled="!tokenInput.trim() || isConnecting"
+        class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
+      >
+        {{ isConnecting ? $t('connector.modal.connecting') : $t('connector.modal.connect') }}
+      </button>
+    </form>
+  </Modal>
 </template>

From a6ccf6aa96237208b20b4b3bb4ca05db9d31bdd4 Mon Sep 17 00:00:00 2001
From: "dane.is.extraordinarily.cool" <me@dane.computer>
Date: Sat, 31 Jan 2026 17:19:15 -0500
Subject: [PATCH 12/23] feat: trying to add light dismiss for safari

---
 app/app.vue                     | 11 +++++++++++
 app/assets/main.css             | 24 ------------------------
 app/components/Modal.client.vue | 30 ++++++++++++++++++++++++++++++
 3 files changed, 41 insertions(+), 24 deletions(-)

diff --git a/app/app.vue b/app/app.vue
index f2060ae3c0..3622d96f40 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -72,9 +72,20 @@ function handleGlobalKeyup() {
   showKbdHints.value = false
 }
 
+/* A hack to get light dismiss to work in safari because it does not support closedby="any" yet */
+// https://codepen.io/paramagicdev/pen/gbYompq
+// see: https://github.com/npmx-dev/npmx.dev/pull/522#discussion_r2749978022
+function handleModalLightDismiss(e: any) {
+  const modal = document.querySelector<HTMLDialogElement>('dialog:modal')
+  if (modal && modal.open && !e.composedPath().includes(modal)) {
+    modal.close()
+  }
+}
+
 if (import.meta.client) {
   useEventListener(document, 'keydown', handleGlobalKeydown)
   useEventListener(document, 'keyup', handleGlobalKeyup)
+  useEventListener(document, 'click', handleModalLightDismiss)
 }
 </script>
 
diff --git a/app/assets/main.css b/app/assets/main.css
index 0af5873c2b..13acb136c6 100644
--- a/app/assets/main.css
+++ b/app/assets/main.css
@@ -559,27 +559,3 @@ input[type='search']::-webkit-search-results-decoration {
 html:has(dialog:modal) {
   overflow: hidden;
 }
-
-/* Backdrop styling when any of the modals are open */
-dialog:modal::backdrop {
-  @apply bg-black/60;
-}
-
-/* Modal transition styles */
-dialog {
-  opacity: 0;
-  transition: opacity 200ms ease;
-  transition-behavior: allow-discrete;
-}
-
-dialog:modal {
-  opacity: 1;
-  transition: opacity 200ms ease;
-  transition-behavior: allow-discrete;
-}
-
-@starting-style {
-  dialog[modal] {
-    opacity: 0;
-  }
-}
diff --git a/app/components/Modal.client.vue b/app/components/Modal.client.vue
index 79d5c1bc75..d41923f5b6 100644
--- a/app/components/Modal.client.vue
+++ b/app/components/Modal.client.vue
@@ -37,3 +37,33 @@ function handleModalClose() {
     </dialog>
   </Teleport>
 </template>
+
+<style scoped>
+/* Backdrop styling when any of the modals are open */
+dialog:modal::backdrop {
+  @apply bg-black/60;
+}
+
+dialog::backdrop {
+  pointer-events: none;
+}
+
+/* Modal transition styles */
+dialog {
+  opacity: 0;
+  transition: opacity 200ms ease;
+  transition-behavior: allow-discrete;
+}
+
+dialog:modal {
+  opacity: 1;
+  transition: opacity 200ms ease;
+  transition-behavior: allow-discrete;
+}
+
+@starting-style {
+  dialog:modal {
+    opacity: 0;
+  }
+}
+</style>

From 906ec24b312c61c12a7bb86df446dbfacf0188b7 Mon Sep 17 00:00:00 2001
From: "dane.is.extraordinarily.cool" <me@dane.computer>
Date: Sat, 31 Jan 2026 17:26:28 -0500
Subject: [PATCH 13/23] fix: add setTimeout to allow for the light dismiss
 workaround to function

---
 app/components/HeaderAccountMenu.client.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/components/HeaderAccountMenu.client.vue b/app/components/HeaderAccountMenu.client.vue
index ff8ea159ba..81f5ff71d4 100644
--- a/app/components/HeaderAccountMenu.client.vue
+++ b/app/components/HeaderAccountMenu.client.vue
@@ -46,7 +46,9 @@ function openConnectorModal() {
   const connectorModal = document.querySelector<HTMLDialogElement>('#connector-modal')
   if (connectorModal) {
     isOpen.value = false
-    connectorModal.showModal()
+    setTimeout(() => {
+      connectorModal.showModal()
+    })
   }
 }
 
@@ -54,7 +56,9 @@ function openAuthModal() {
   const authModal = document.querySelector<HTMLDialogElement>('#auth-modal')
   if (authModal) {
     isOpen.value = false
-    authModal.showModal()
+    setTimeout(() => {
+      authModal.showModal()
+    })
   }
 }
 </script>

From c7fbab0843e705c0c0cb3749b192ab0126045607 Mon Sep 17 00:00:00 2001
From: "dane.is.extraordinarily.cool" <me@dane.computer>
Date: Sat, 31 Jan 2026 17:28:42 -0500
Subject: [PATCH 14/23] fix: add the correct type for handleModalLightDismiss

---
 app/app.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/app.vue b/app/app.vue
index 3622d96f40..3c7be66152 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -75,7 +75,7 @@ function handleGlobalKeyup() {
 /* A hack to get light dismiss to work in safari because it does not support closedby="any" yet */
 // https://codepen.io/paramagicdev/pen/gbYompq
 // see: https://github.com/npmx-dev/npmx.dev/pull/522#discussion_r2749978022
-function handleModalLightDismiss(e: any) {
+function handleModalLightDismiss(e: MouseEvent) {
   const modal = document.querySelector<HTMLDialogElement>('dialog:modal')
   if (modal && modal.open && !e.composedPath().includes(modal)) {
     modal.close()

From 8f45120e3fe2c37cd685c90512f6df3352fdda47 Mon Sep 17 00:00:00 2001
From: "dane.is.extraordinarily.cool" <me@dane.computer>
Date: Sat, 31 Jan 2026 17:39:13 -0500
Subject: [PATCH 15/23] fix: adjust import for ConnectorModal in
 component.spec.ts

---
 test/nuxt/components.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/nuxt/components.spec.ts b/test/nuxt/components.spec.ts
index a62fba9d5d..60c730cb8c 100644
--- a/test/nuxt/components.spec.ts
+++ b/test/nuxt/components.spec.ts
@@ -74,7 +74,7 @@ import CodeViewer from '~/components/CodeViewer.vue'
 import CodeDirectoryListing from '~/components/CodeDirectoryListing.vue'
 import CodeFileTree from '~/components/CodeFileTree.vue'
 import UserCombobox from '~/components/UserCombobox.vue'
-import ConnectorModal from '~/components/ConnectorModal.client.vue'
+import ConnectorModal from '~/components/ConnectorModal.vue'
 import HeaderAccountMenuServer from '~/components/HeaderAccountMenu.server.vue'
 import HeaderAccountMenuClient from '~/components/HeaderAccountMenu.client.vue'
 import ClaimPackageModal from '~/components/ClaimPackageModal.vue'

From 565c6da8af1460e50e025024fc5a01f2943d93ab Mon Sep 17 00:00:00 2001
From: "dane.is.extraordinarily.cool" <me@dane.computer>
Date: Sat, 31 Jan 2026 17:50:53 -0500
Subject: [PATCH 16/23] feat: create useModal composable

---
 app/components/HeaderAccountMenu.client.vue | 16 +++++++--------
 app/composables/useModal.ts                 | 22 +++++++++++++++++++++
 2 files changed, 30 insertions(+), 8 deletions(-)
 create mode 100644 app/composables/useModal.ts

diff --git a/app/components/HeaderAccountMenu.client.vue b/app/components/HeaderAccountMenu.client.vue
index 81f5ff71d4..16e63a1bf1 100644
--- a/app/components/HeaderAccountMenu.client.vue
+++ b/app/components/HeaderAccountMenu.client.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { useModal } from '~/composables/useModal'
+
 const {
   isConnected: isNpmConnected,
   isConnecting: isNpmConnecting,
@@ -42,23 +44,21 @@ onUnmounted(() => {
   document.removeEventListener('click', handleClickOutside)
 })
 
+const connectorModal = useModal('connector-modal')
+
 function openConnectorModal() {
-  const connectorModal = document.querySelector<HTMLDialogElement>('#connector-modal')
   if (connectorModal) {
     isOpen.value = false
-    setTimeout(() => {
-      connectorModal.showModal()
-    })
+    connectorModal.open()
   }
 }
 
+const authModal = useModal('auth-modal')
+
 function openAuthModal() {
-  const authModal = document.querySelector<HTMLDialogElement>('#auth-modal')
   if (authModal) {
     isOpen.value = false
-    setTimeout(() => {
-      authModal.showModal()
-    })
+    authModal.open()
   }
 }
 </script>
diff --git a/app/composables/useModal.ts b/app/composables/useModal.ts
new file mode 100644
index 0000000000..89c2c38bfb
--- /dev/null
+++ b/app/composables/useModal.ts
@@ -0,0 +1,22 @@
+export function useModal(modalId: string) {
+  const modal = document.querySelector<HTMLDialogElement>(`#${modalId}`)
+
+  function open() {
+    if (modal) {
+      setTimeout(() => {
+        modal.showModal()
+      })
+    }
+  }
+
+  function close() {
+    if (modal) {
+      modal.close()
+    }
+  }
+
+  return {
+    open,
+    close,
+  }
+}

From 62515f5050e3dd02853aef23fc76f6489695e0eb Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Sun, 1 Feb 2026 00:55:18 +0000
Subject: [PATCH 17/23] fix: small fixes

---
 app/app.vue                          |  6 +--
 app/components/ChartModal.vue        |  2 +-
 app/components/ClaimPackageModal.vue | 61 ++++++++--------------------
 app/composables/useModal.ts          |  4 +-
 4 files changed, 25 insertions(+), 48 deletions(-)

diff --git a/app/app.vue b/app/app.vue
index 3c7be66152..98aa7c3f80 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -76,9 +76,9 @@ function handleGlobalKeyup() {
 // https://codepen.io/paramagicdev/pen/gbYompq
 // see: https://github.com/npmx-dev/npmx.dev/pull/522#discussion_r2749978022
 function handleModalLightDismiss(e: MouseEvent) {
-  const modal = document.querySelector<HTMLDialogElement>('dialog:modal')
-  if (modal && modal.open && !e.composedPath().includes(modal)) {
-    modal.close()
+  const target = e.target as HTMLElement
+  if (target.tagName === 'DIALOG' && target.hasAttribute('open')) {
+    ;(target as HTMLDialogElement).close()
   }
 }
 
diff --git a/app/components/ChartModal.vue b/app/components/ChartModal.vue
index 51cb2d9a25..bc7e971480 100644
--- a/app/components/ChartModal.vue
+++ b/app/components/ChartModal.vue
@@ -4,7 +4,7 @@
   <Modal
     :modalTitle="$t('package.downloads.modal_title')"
     id="chart-modal"
-    class="h-full sm:h-min sm:border sm:border-border sm:rounded-lg shadow-xl sm:max-h-[90-vh] sm:max-w-3xl"
+    class="h-full sm:h-min sm:border sm:border-border sm:rounded-lg shadow-xl sm:max-h-[90vh] sm:max-w-3xl"
   >
     <div class="font-mono text-sm">
       <slot />
diff --git a/app/components/ClaimPackageModal.vue b/app/components/ClaimPackageModal.vue
index d46b598458..cb801333c1 100644
--- a/app/components/ClaimPackageModal.vue
+++ b/app/components/ClaimPackageModal.vue
@@ -6,23 +6,7 @@ const props = defineProps<{
   packageName: string
 }>()
 
-const open = defineModel<boolean>('open', { default: false })
-
-// This flow doesn't seem like it's finished yet, whenever you're ready to open this modal call this function
-function showClaimPackageModal() {
-  const claimPackageModal = document.querySelector<HTMLDialogElement>('#claim-package-modal')
-  if (claimPackageModal) {
-    claimPackageModal.showModal()
-  }
-}
-
-function closeClaimPackageModal() {
-  const claimPackageModal = document.querySelector<HTMLDialogElement>('#claim-package-modal')
-  if (claimPackageModal) {
-    claimPackageModal.close()
-  }
-}
-
+const claimPackageModal = useModal('claim-package-modal')
 const {
   isConnected,
   state,
@@ -53,12 +37,7 @@ async function checkAvailability() {
   }
 }
 
-function openConnectorModal() {
-  const connectorModal = document.querySelector<HTMLDialogElement>('#connector-modal')
-  if (connectorModal) {
-    connectorModal.showModal()
-  }
-}
+const connectorModal = useModal('connector-modal')
 
 async function handleClaim() {
   if (!checkResult.value?.available || !isConnected.value) return
@@ -93,17 +72,15 @@ async function handleClaim() {
     } else if (completedOp?.status === 'failed') {
       if (completedOp.result?.requiresOtp) {
         // OTP is needed - open connector panel to handle it
-        open.value = false
-        closeClaimPackageModal()
-        openConnectorModal()
+        claimPackageModal.close()
+        connectorModal.open()
       } else {
         publishError.value = completedOp.result?.stderr || 'Failed to publish package'
       }
     } else {
       // Still pending/approved/running - open connector panel to show progress
-      open.value = false
-      closeClaimPackageModal()
-      openConnectorModal()
+      claimPackageModal.close()
+      connectorModal.open()
     }
   } catch (err) {
     publishError.value = err instanceof Error ? err.message : $t('claim.modal.failed_to_claim')
@@ -112,15 +89,13 @@ async function handleClaim() {
   }
 }
 
-// Check availability when modal opens
-watch(open, isOpen => {
-  if (isOpen) {
-    checkResult.value = null
-    publishError.value = null
-    publishSuccess.value = false
-    checkAvailability()
-  }
-})
+// Reset state when modal opens
+function handleModalOpen() {
+  checkResult.value = null
+  publishError.value = null
+  publishSuccess.value = false
+  checkAvailability()
+}
 
 // Computed for similar packages with warnings
 const hasDangerousSimilarPackages = computed(() => {
@@ -152,7 +127,7 @@ const previewPackageJson = computed(() => {
 
 <template>
   <!-- Modal -->
-  <Modal :modalTitle="$t('claim.modal.title')" id="claim-package-modal">
+  <Modal :modalTitle="$t('claim.modal.title')" id="claim-package-modal" @open="handleModalOpen">
     <!-- Loading state -->
     <div v-if="isChecking" class="py-8 text-center">
       <LoadingSpinner :text="$t('claim.modal.checking')" />
@@ -180,14 +155,14 @@ const previewPackageJson = computed(() => {
         <NuxtLink
           :to="`/package/${packageName}`"
           class="flex-1 px-4 py-2 font-mono text-sm text-center text-bg bg-fg rounded-md transition-colors duration-200 hover:bg-fg/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-          @click="closeClaimPackageModal"
+          @click="claimPackageModal.close"
         >
           {{ $t('claim.modal.view_package') }}
         </NuxtLink>
         <button
           type="button"
           class="flex-1 px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-          @click="closeClaimPackageModal"
+          @click="claimPackageModal.close"
         >
           {{ $t('common.close') }}
         </button>
@@ -334,7 +309,7 @@ const previewPackageJson = computed(() => {
           <button
             type="button"
             class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-colors duration-200 hover:bg-fg/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-            @click="openConnectorModal"
+            @click="connectorModal.open"
           >
             {{ $t('claim.modal.connect_button') }}
           </button>
@@ -374,7 +349,7 @@ const previewPackageJson = computed(() => {
         v-if="!checkResult.available || !checkResult.valid"
         type="button"
         class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-        @click="closeClaimPackageModal"
+        @click="claimPackageModal.close"
       >
         {{ $t('common.close') }}
       </button>
diff --git a/app/composables/useModal.ts b/app/composables/useModal.ts
index 89c2c38bfb..551471ef07 100644
--- a/app/composables/useModal.ts
+++ b/app/composables/useModal.ts
@@ -1,7 +1,8 @@
 export function useModal(modalId: string) {
-  const modal = document.querySelector<HTMLDialogElement>(`#${modalId}`)
+  const getModal = () => document.querySelector<HTMLDialogElement>(`#${modalId}`)
 
   function open() {
+    const modal = getModal()
     if (modal) {
       setTimeout(() => {
         modal.showModal()
@@ -10,6 +11,7 @@ export function useModal(modalId: string) {
   }
 
   function close() {
+    const modal = getModal()
     if (modal) {
       modal.close()
     }

From 5e67d2dee1e636c8a7a93e3a7b6ad08c77c12b14 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Sun, 1 Feb 2026 01:09:50 +0000
Subject: [PATCH 18/23] fix: small fixes

---
 app/components/ClaimPackageModal.vue | 31 ++++++++++++++++++++--------
 app/components/ConnectorModal.vue    | 22 +++++++-------------
 app/components/Modal.client.vue      | 23 +++++++++++++++------
 app/pages/search.vue                 |  9 ++++----
 4 files changed, 51 insertions(+), 34 deletions(-)

diff --git a/app/components/ClaimPackageModal.vue b/app/components/ClaimPackageModal.vue
index cb801333c1..97210778d5 100644
--- a/app/components/ClaimPackageModal.vue
+++ b/app/components/ClaimPackageModal.vue
@@ -6,7 +6,6 @@ const props = defineProps<{
   packageName: string
 }>()
 
-const claimPackageModal = useModal('claim-package-modal')
 const {
   isConnected,
   state,
@@ -72,14 +71,14 @@ async function handleClaim() {
     } else if (completedOp?.status === 'failed') {
       if (completedOp.result?.requiresOtp) {
         // OTP is needed - open connector panel to handle it
-        claimPackageModal.close()
+        close()
         connectorModal.open()
       } else {
         publishError.value = completedOp.result?.stderr || 'Failed to publish package'
       }
     } else {
       // Still pending/approved/running - open connector panel to show progress
-      claimPackageModal.close()
+      close()
       connectorModal.open()
     }
   } catch (err) {
@@ -89,14 +88,23 @@ async function handleClaim() {
   }
 }
 
-// Reset state when modal opens
-function handleModalOpen() {
+const dialogRef = ref<HTMLDialogElement>()
+
+function open() {
+  // Reset state and check availability each time modal is opened
   checkResult.value = null
   publishError.value = null
   publishSuccess.value = false
   checkAvailability()
+  dialogRef.value?.showModal()
+}
+
+function close() {
+  dialogRef.value?.close()
 }
 
+defineExpose({ open, close })
+
 // Computed for similar packages with warnings
 const hasDangerousSimilarPackages = computed(() => {
   if (!checkResult.value?.similarPackages) return false
@@ -127,7 +135,12 @@ const previewPackageJson = computed(() => {
 
 <template>
   <!-- Modal -->
-  <Modal :modalTitle="$t('claim.modal.title')" id="claim-package-modal" @open="handleModalOpen">
+  <Modal
+    ref="dialogRef"
+    :modalTitle="$t('claim.modal.title')"
+    id="claim-package-modal"
+    class="max-w-md"
+  >
     <!-- Loading state -->
     <div v-if="isChecking" class="py-8 text-center">
       <LoadingSpinner :text="$t('claim.modal.checking')" />
@@ -155,14 +168,14 @@ const previewPackageJson = computed(() => {
         <NuxtLink
           :to="`/package/${packageName}`"
           class="flex-1 px-4 py-2 font-mono text-sm text-center text-bg bg-fg rounded-md transition-colors duration-200 hover:bg-fg/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-          @click="claimPackageModal.close"
+          @click="close"
         >
           {{ $t('claim.modal.view_package') }}
         </NuxtLink>
         <button
           type="button"
           class="flex-1 px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-          @click="claimPackageModal.close"
+          @click="close"
         >
           {{ $t('common.close') }}
         </button>
@@ -349,7 +362,7 @@ const previewPackageJson = computed(() => {
         v-if="!checkResult.available || !checkResult.valid"
         type="button"
         class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-        @click="claimPackageModal.close"
+        @click="close"
       >
         {{ $t('common.close') }}
       </button>
diff --git a/app/components/ConnectorModal.vue b/app/components/ConnectorModal.vue
index cef6050e43..e490dd173e 100644
--- a/app/components/ConnectorModal.vue
+++ b/app/components/ConnectorModal.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-const open = defineModel<boolean>('open', { default: false })
-
 const { isConnected, isConnecting, npmUser, error, hasOperations, connect, disconnect } =
   useConnector()
 
@@ -10,14 +8,17 @@ const { copied, copy } = useClipboard({ copiedDuring: 2000 })
 
 const hasAttemptedConnect = shallowRef(false)
 
+watch(isConnected, connected => {
+  if (!connected) {
+    tokenInput.value = ''
+    hasAttemptedConnect.value = false
+  }
+})
+
 async function handleConnect() {
   hasAttemptedConnect.value = true
   const port = Number.parseInt(portInput.value, 10) || 31415
-  const success = await connect(tokenInput.value.trim(), port)
-  if (success) {
-    tokenInput.value = ''
-    open.value = false
-  }
+  await connect(tokenInput.value.trim(), port)
 }
 
 function handleDisconnect() {
@@ -40,13 +41,6 @@ const executeNpmxConnectorCommand = computed(() => {
     packageManager: selectedPM.value,
   })
 })
-
-watch(open, isOpen => {
-  if (isOpen) {
-    tokenInput.value = ''
-    hasAttemptedConnect.value = false
-  }
-})
 </script>
 
 <template>
diff --git a/app/components/Modal.client.vue b/app/components/Modal.client.vue
index d41923f5b6..0791d3aa2b 100644
--- a/app/components/Modal.client.vue
+++ b/app/components/Modal.client.vue
@@ -1,26 +1,37 @@
 <script setup lang="ts">
-defineProps<{
+const props = defineProps<{
   modalTitle: string
 }>()
 
+const dialogRef = ref<HTMLDialogElement>()
+
+const modalTitleId = computed(() => {
+  const id = getCurrentInstance()?.attrs.id
+  return id ? `${id}-title` : undefined
+})
+
 function handleModalClose() {
-  const modal = document.querySelector<HTMLDialogElement>('dialog:modal')
-  if (modal) {
-    modal.close()
-  }
+  dialogRef.value?.close()
 }
+
+defineExpose({
+  showModal: () => dialogRef.value?.showModal(),
+  close: () => dialogRef.value?.close(),
+})
 </script>
 
 <template>
   <Teleport to="body">
     <dialog
+      ref="dialogRef"
       closedby="any"
       class="w-full bg-bg border border-border rounded-lg shadow-xl max-h-[90vh] overflow-y-auto overscroll-contain m-0 m-auto p-6 text-white"
+      :aria-labelledby="modalTitleId"
       v-bind="$attrs"
     >
       <!-- Modal top header section -->
       <div class="flex items-center justify-between mb-6">
-        <h2 class="font-mono text-lg font-medium">
+        <h2 :id="modalTitleId" class="font-mono text-lg font-medium">
           {{ modalTitle }}
         </h2>
         <button
diff --git a/app/pages/search.vue b/app/pages/search.vue
index 3935ca76b6..bb9cf2a1f3 100644
--- a/app/pages/search.vue
+++ b/app/pages/search.vue
@@ -323,8 +323,7 @@ const showClaimPrompt = computed(() => {
   )
 })
 
-// Modal state for claiming a package
-const claimModalOpen = shallowRef(false)
+const claimPackageModalRef = useTemplateRef('claimPackageModalRef')
 
 /**
  * Check if a string is a valid npm username/org name
@@ -742,7 +741,7 @@ defineOgImageComponent('Default', {
             <button
               type="button"
               class="shrink-0 px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md motion-safe:transition-colors motion-safe:duration-200 hover:bg-fg/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-              @click="claimModalOpen = true"
+              @click="claimPackageModalRef?.open()"
             >
               {{ $t('search.claim_button', { name: query }) }}
             </button>
@@ -835,7 +834,7 @@ defineOgImageComponent('Default', {
                 <button
                   type="button"
                   class="px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-colors duration-200 hover:bg-fg/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-                  @click="claimModalOpen = true"
+                  @click="claimPackageModalRef?.open()"
                 >
                   {{ $t('search.claim_button', { name: query }) }}
                 </button>
@@ -884,6 +883,6 @@ defineOgImageComponent('Default', {
     </div>
 
     <!-- Claim package modal -->
-    <ClaimPackageModal v-model:open="claimModalOpen" :package-name="query" />
+    <ClaimPackageModal ref="claimPackageModalRef" :package-name="query" />
   </main>
 </template>

From 4295395f425b1a218bbecfe29ee89654d1c128c0 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Sun, 1 Feb 2026 01:23:14 +0000
Subject: [PATCH 19/23] refactor: use useModal

---
 app/components/PackageWeeklyDownloadStats.vue | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/app/components/PackageWeeklyDownloadStats.vue b/app/components/PackageWeeklyDownloadStats.vue
index 8251ec5c1e..c61f837115 100644
--- a/app/components/PackageWeeklyDownloadStats.vue
+++ b/app/components/PackageWeeklyDownloadStats.vue
@@ -4,18 +4,13 @@ import { VueUiSparkline } from 'vue-data-ui/vue-ui-sparkline'
 import { useCssVariables } from '../composables/useColors'
 import { OKLCH_NEUTRAL_FALLBACK, lightenOklch } from '../utils/colors'
 
-const { packageName } = defineProps<{
+const props = defineProps<{
   packageName: string
 }>()
 
-function showChartModal() {
-  const chartModal = document.querySelector<HTMLDialogElement>('#chart-modal')
-  if (chartModal) {
-    chartModal.showModal()
-  }
-}
+const chartModal = useModal('chart-modal')
 
-const { data: packument } = usePackage(() => packageName)
+const { data: packument } = usePackage(() => props.packageName)
 const createdIso = computed(() => packument.value?.time?.created ?? null)
 
 const { fetchPackageDownloadEvolution } = useCharts()
@@ -90,7 +85,7 @@ async function loadWeeklyDownloads() {
 
   try {
     const result = await fetchPackageDownloadEvolution(
-      () => packageName,
+      () => props.packageName,
       () => createdIso.value,
       () => ({ granularity: 'week' as const, weeks: 52 }),
     )
@@ -105,7 +100,7 @@ onMounted(() => {
 })
 
 watch(
-  () => packageName,
+  () => props.packageName,
   () => loadWeeklyDownloads(),
 )
 
@@ -200,7 +195,7 @@ const config = computed(() => {
       <template #actions>
         <button
           type="button"
-          @click="showChartModal"
+          @click="chartModal.open()"
           class="link-subtle font-mono text-sm inline-flex items-center gap-1.5 ms-auto shrink-0 self-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
           :title="$t('package.downloads.analyze')"
         >

From 8b84f93c14693b11de06ee0886797ccc175171e7 Mon Sep 17 00:00:00 2001
From: "dane.is.extraordinarily.cool" <me@dane.computer>
Date: Sat, 31 Jan 2026 20:52:15 -0500
Subject: [PATCH 20/23] fix: add scrollbar-gutter: stable to remove layout
 shift when modals open

---
 app/assets/main.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/assets/main.css b/app/assets/main.css
index 13acb136c6..49ac53bfac 100644
--- a/app/assets/main.css
+++ b/app/assets/main.css
@@ -558,4 +558,5 @@ input[type='search']::-webkit-search-results-decoration {
 /* Locking the scroll whenever any of the modals are open */
 html:has(dialog:modal) {
   overflow: hidden;
+  scrollbar-gutter: stable;
 }

From 8f56e14e01bd49439c812d44c8681e816b6aa2b8 Mon Sep 17 00:00:00 2001
From: "dane.is.extraordinarily.cool" <me@dane.computer>
Date: Sat, 31 Jan 2026 21:28:41 -0500
Subject: [PATCH 21/23] fix: don't navigate backwards when modal is open and
 close button is focused

---
 app/pages/settings.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/pages/settings.vue b/app/pages/settings.vue
index fe151bdbf9..6de5807fb4 100644
--- a/app/pages/settings.vue
+++ b/app/pages/settings.vue
@@ -10,7 +10,8 @@ onKeyStroke(
   'Escape',
   e => {
     const target = e.target as HTMLElement
-    if (!['INPUT', 'SELECT', 'TEXTAREA'].includes(target?.tagName)) {
+    console.log(target)
+    if (!['INPUT', 'SELECT', 'TEXTAREA', 'BUTTON'].includes(target?.tagName)) {
       e.preventDefault()
       router.back()
     }

From 4fcecdfc86d703f0d2a5b090e733c38ba108c738 Mon Sep 17 00:00:00 2001
From: "dane.is.extraordinarily.cool" <me@dane.computer>
Date: Sat, 31 Jan 2026 21:59:59 -0500
Subject: [PATCH 22/23] fix: use .matches() to stop navigation when the modal
 is open on the settings page

---
 app/pages/settings.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/pages/settings.vue b/app/pages/settings.vue
index 6de5807fb4..fa5de26776 100644
--- a/app/pages/settings.vue
+++ b/app/pages/settings.vue
@@ -10,8 +10,10 @@ onKeyStroke(
   'Escape',
   e => {
     const target = e.target as HTMLElement
-    console.log(target)
-    if (!['INPUT', 'SELECT', 'TEXTAREA', 'BUTTON'].includes(target?.tagName)) {
+    if (
+      !['INPUT', 'SELECT', 'TEXTAREA'].includes(target?.tagName) &&
+      !document.documentElement.matches('html:has(:modal)')
+    ) {
       e.preventDefault()
       router.back()
     }

From 118ff4b9df5951317f1b99548c5777038111f525 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Sun, 1 Feb 2026 08:15:55 +0000
Subject: [PATCH 23/23] fix: ensure graph uses up-to-date data

---
 app/components/PackageDownloadAnalytics.vue   | 55 +++++++++----------
 app/components/PackageWeeklyDownloadStats.vue | 13 ++++-
 2 files changed, 35 insertions(+), 33 deletions(-)

diff --git a/app/components/PackageDownloadAnalytics.vue b/app/components/PackageDownloadAnalytics.vue
index d4a23e872d..2ae1dc2566 100644
--- a/app/components/PackageDownloadAnalytics.vue
+++ b/app/components/PackageDownloadAnalytics.vue
@@ -5,12 +5,7 @@ import { useDebounceFn, useElementSize } from '@vueuse/core'
 import { useCssVariables } from '../composables/useColors'
 import { OKLCH_NEUTRAL_FALLBACK, transparentizeOklch } from '../utils/colors'
 
-const {
-  weeklyDownloads,
-  inModal = false,
-  packageName,
-  createdIso,
-} = defineProps<{
+const props = defineProps<{
   weeklyDownloads: WeeklyDownloadPoint[]
   inModal?: boolean
   packageName: string
@@ -131,7 +126,7 @@ function formatXyDataset(
     return {
       dataset: [
         {
-          name: packageName,
+          name: props.packageName,
           type: 'line',
           series: dataset.map(d => d.downloads),
           color: accent.value,
@@ -149,7 +144,7 @@ function formatXyDataset(
     return {
       dataset: [
         {
-          name: packageName,
+          name: props.packageName,
           type: 'line',
           series: dataset.map(d => d.downloads),
           color: accent.value,
@@ -162,7 +157,7 @@ function formatXyDataset(
     return {
       dataset: [
         {
-          name: packageName,
+          name: props.packageName,
           type: 'line',
           series: dataset.map(d => d.downloads),
           color: accent.value,
@@ -175,7 +170,7 @@ function formatXyDataset(
     return {
       dataset: [
         {
-          name: packageName,
+          name: props.packageName,
           type: 'line',
           series: dataset.map(d => d.downloads),
           color: accent.value,
@@ -235,10 +230,10 @@ const hasUserEditedDates = shallowRef(false)
 
 function initDateRangeFromWeekly() {
   if (hasUserEditedDates.value) return
-  if (!weeklyDownloads?.length) return
+  if (!props.weeklyDownloads?.length) return
 
-  const first = weeklyDownloads[0]
-  const last = weeklyDownloads[weeklyDownloads.length - 1]
+  const first = props.weeklyDownloads[0]
+  const last = props.weeklyDownloads[props.weeklyDownloads.length - 1]
   const start = first?.weekStart ? toIsoDateOnly(first.weekStart) : ''
   const end = last?.weekEnd ? toIsoDateOnly(last.weekEnd) : ''
   if (isValidIsoDateOnly(start)) startDate.value = start
@@ -265,7 +260,7 @@ function initDateRangeFallbackClient() {
 }
 
 watch(
-  () => weeklyDownloads?.length,
+  () => props.weeklyDownloads?.length,
   () => {
     initDateRangeFromWeekly()
     initDateRangeFallbackClient()
@@ -342,7 +337,7 @@ watch(
 
 const { fetchPackageDownloadEvolution } = useCharts()
 
-const evolution = shallowRef<EvolutionData>(weeklyDownloads)
+const evolution = shallowRef<EvolutionData>(props.weeklyDownloads)
 const pending = shallowRef(false)
 
 let lastRequestKey = ''
@@ -354,7 +349,7 @@ const debouncedLoad = useDebounceFn(() => {
 
 async function load() {
   if (!import.meta.client) return
-  if (!inModal) return
+  if (!props.inModal) return
 
   const o = options.value
   const extraBase =
@@ -366,14 +361,14 @@ async function load() {
 
   const startKey = (o as any).startDate ?? ''
   const endKey = (o as any).endDate ?? ''
-  const requestKey = `${packageName}|${createdIso ?? ''}|${o.granularity}|${extraBase}|${startKey}|${endKey}`
+  const requestKey = `${props.packageName}|${props.createdIso ?? ''}|${o.granularity}|${extraBase}|${startKey}|${endKey}`
 
   if (requestKey === lastRequestKey) return
   lastRequestKey = requestKey
 
   const hasExplicitRange = Boolean((o as any).startDate || (o as any).endDate)
-  if (o.granularity === 'week' && weeklyDownloads?.length && !hasExplicitRange) {
-    evolution.value = weeklyDownloads
+  if (o.granularity === 'week' && props.weeklyDownloads?.length && !hasExplicitRange) {
+    evolution.value = props.weeklyDownloads
     pending.value = false
     displayedGranularity.value = 'weekly'
     return
@@ -384,8 +379,8 @@ async function load() {
 
   try {
     const result = await fetchPackageDownloadEvolution(
-      () => packageName,
-      () => createdIso,
+      () => props.packageName,
+      () => props.createdIso,
       () => o as any, // FIXME: any
     )
 
@@ -404,7 +399,7 @@ async function load() {
 }
 
 watch(
-  () => inModal,
+  () => props.inModal,
   () => {
     // modal open/close should be immediate
     load()
@@ -414,8 +409,8 @@ watch(
 
 watch(
   () => [
-    packageName,
-    createdIso,
+    props.packageName,
+    props.createdIso,
     options.value.granularity,
     (options.value as any).weeks,
     (options.value as any).months,
@@ -437,9 +432,9 @@ watch(
 )
 
 const effectiveData = computed<EvolutionData>(() => {
-  if (displayedGranularity.value === 'weekly' && weeklyDownloads?.length) {
+  if (displayedGranularity.value === 'weekly' && props.weeklyDownloads?.length) {
     if (isWeeklyDataset(evolution.value) && evolution.value.length) return evolution.value
-    return weeklyDownloads
+    return props.weeklyDownloads
   }
   return evolution.value
 })
@@ -481,7 +476,7 @@ const config = computed(() => {
           img: ({ imageUri }: { imageUri: string }) => {
             loadFile(
               imageUri,
-              `${packageName}-${selectedGranularity.value}_${startDate.value}_${endDate.value}.png`,
+              `${props.packageName}-${selectedGranularity.value}_${startDate.value}_${endDate.value}.png`,
             )
           },
           csv: (csvStr: string) => {
@@ -502,7 +497,7 @@ const config = computed(() => {
             const url = URL.createObjectURL(blob)
             loadFile(
               url,
-              `${packageName}-${selectedGranularity.value}_${startDate.value}_${endDate.value}.csv`,
+              `${props.packageName}-${selectedGranularity.value}_${startDate.value}_${endDate.value}.csv`,
             )
             URL.revokeObjectURL(url)
           },
@@ -510,7 +505,7 @@ const config = computed(() => {
             const url = URL.createObjectURL(blob)
             loadFile(
               url,
-              `${packageName}-${selectedGranularity.value}_${startDate.value}_${endDate.value}.svg`,
+              `${props.packageName}-${selectedGranularity.value}_${startDate.value}_${endDate.value}.svg`,
             )
             URL.revokeObjectURL(url)
           },
@@ -525,7 +520,7 @@ const config = computed(() => {
             yLabel: $t('package.downloads.y_axis_label', {
               granularity: $t(`package.downloads.granularity_${selectedGranularity.value}`),
             }),
-            xLabel: packageName,
+            xLabel: props.packageName,
             yLabelOffsetX: 12,
             fontSize: isMobile.value ? 32 : 24,
           },
diff --git a/app/components/PackageWeeklyDownloadStats.vue b/app/components/PackageWeeklyDownloadStats.vue
index 43afe9da12..46ee35022f 100644
--- a/app/components/PackageWeeklyDownloadStats.vue
+++ b/app/components/PackageWeeklyDownloadStats.vue
@@ -9,6 +9,13 @@ const props = defineProps<{
 
 const chartModal = useModal('chart-modal')
 
+const isChartModalOpen = shallowRef(false)
+function openChartModal() {
+  isChartModalOpen.value = true
+  // ensure the component renders before opening the dialog
+  nextTick(() => chartModal.open())
+}
+
 const { data: packument } = usePackage(() => props.packageName)
 const createdIso = computed(() => packument.value?.time?.created ?? null)
 
@@ -194,7 +201,7 @@ const config = computed(() => {
       <template #actions>
         <button
           type="button"
-          @click="chartModal.open()"
+          @click="openChartModal"
           class="link-subtle font-mono text-sm inline-flex items-center gap-1.5 ms-auto shrink-0 self-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
           :title="$t('package.downloads.analyze')"
         >
@@ -241,11 +248,11 @@ const config = computed(() => {
     </CollapsibleSection>
   </div>
 
-  <ChartModal>
+  <ChartModal v-if="isChartModalOpen" @close="isChartModalOpen = false">
     <PackageDownloadAnalytics
       :weeklyDownloads="weeklyDownloads"
       :inModal="true"
-      :packageName="packageName"
+      :packageName="props.packageName"
       :createdIso="createdIso"
     />
   </ChartModal>