Merge remote-tracking branch 'origin/main' into graphieros/main

Author: danielroe

app/components/ConnectorModal.vue

@@ -105,7 +105,7 @@ watch(open, isOpen => {
 
               <div class="p-3 bg-[#0d0d0d] border border-border rounded-lg font-mono text-sm">
                 <span class="text-fg-subtle">$</span>
-                <span class="text-fg ml-2">npx npmx-connector</span>
+                <span class="text-fg ml-2">npx&nbsp;npmx-connector</span>
               </div>
 
               <p class="text-sm text-fg-muted">Then paste the token shown in your terminal:</p>

app/pages/package/[...name].vue

@@ -496,15 +496,15 @@ defineOgImageComponent('Package', {
               <span class="text-fg-subtle font-mono text-sm select-none">$</span>
               <code class="font-mono text-sm"
                 ><ClientOnly
-                  ><span class="text-fg">{{ selectedPMLabel }}</span>
-                  <span class="text-fg-muted">{{ selectedPMAction }}</span
+                  ><span class="text-fg">{{ selectedPMLabel }}</span
+                  >&nbsp;<span class="text-fg-muted">{{ selectedPMAction }}</span
                   ><span v-if="selectedPM !== 'deno'" class="text-fg-muted"
                     >&nbsp;{{ pkg.name }}</span
                   ><span v-else class="text-fg-muted">{{ pkg.name }}</span
                   ><span v-if="requestedVersion" class="text-fg-muted">@{{ requestedVersion }}</span
                   ><template #fallback
                     ><span class="text-fg">npm</span>&nbsp;<span class="text-fg-muted"
-                      >install {{ pkg.name }}</span
+                      >install&nbsp;{{ pkg.name }}</span
                     ></template
                   ></ClientOnly
                 ></code

cli/src/server.ts

@@ -10,9 +10,12 @@ import {
   getQuery,
   createError,
   getHeader,
+  getRequestHeader,
   setResponseHeaders,
   getRouterParam,
 } from 'h3'
+
+const ALLOWED_ORIGINS = new Set(['https://npmx.dev', 'http://localhost:3000'])
 import type { ConnectorState, PendingOperation, OperationType, ApiResponse } from './types.ts'
 import {
   getNpmUser,
@@ -66,24 +69,31 @@ export function createConnectorApp(expectedToken: string) {
     operations: [],
   }
 
-  const app = createApp({
-    onRequest(event) {
-      // CORS headers for browser connections
+  function setCorsHeaders(event: Parameters<typeof setResponseHeaders>[0]) {
+    const origin = getRequestHeader(event, 'origin')
+    if (origin && ALLOWED_ORIGINS.has(origin)) {
       setResponseHeaders(event, {
-        'Access-Control-Allow-Origin': '*',
+        'Access-Control-Allow-Origin': origin,
         'Access-Control-Allow-Methods': 'GET, POST, DELETE, OPTIONS',
         'Access-Control-Allow-Headers': 'Content-Type, Authorization',
       })
+    }
+  }
+
+  const app = createApp({
+    onRequest(event) {
+      setCorsHeaders(event)
+    },
+    onBeforeResponse(event) {
+      setCorsHeaders(event)
     },
   })
   const router = createRouter()
 
   // Handle CORS preflight requests
   router.options(
     '/**',
-    eventHandler(() => {
-      return null
-    }),
+    eventHandler(() => ''),
   )
 
   function validateToken(authHeader: string | null | undefined): boolean {