Merge branch 'main' into feat/og-image-v7

harlan-zw · web-flow · commit 662ba9bd69d0 · 2026-04-11T16:16:15.000+10:00
diff --git a/.github/workflows/dependency-diff-comment.yml b/.github/workflows/dependency-diff-comment.yml
@@ -0,0 +1,31 @@
+name: dependency-diff-comment
+
+on:
+  workflow_run:
+    workflows: ['dependency-diff']
+    types:
+      - completed
+
+permissions:
+  pull-requests: write
+  actions: read
+
+jobs:
+  dependency-diff-comment:
+    name: 💬 Dependency diff comment
+    runs-on: ubuntu-slim
+    if: github.event.workflow_run.conclusion == 'success'
+
+    steps:
+      - name: 📥 Download artifact
+        uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4.3.0
+        with:
+          name: e18e-diff-result
+          run-id: ${{ github.event.workflow_run.id }}
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: 💬 Post comment
+        uses: e18e/action-dependency-diff@f825d5b5c5ce0a42dc46c47ec20de24460affcd8 # v1.5.0
+        with:
+          mode: comment-from-artifact
+          artifact-path: e18e-diff-result.json
diff --git a/.github/workflows/dependency-diff.yml b/.github/workflows/dependency-diff.yml
@@ -0,0 +1,47 @@
+name: dependency-diff
+
+on:
+  pull_request:
+    branches:
+      - main
+      - release
+    paths:
+      - package.json
+      - pnpm-lock.yaml
+      - pnpm-workspace.yaml
+      - docs/package.json
+      - cli/package.json
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.number || github.sha }}
+  cancel-in-progress: true
+
+permissions:
+  contents: read
+
+jobs:
+  dependency-diff:
+    name: 🔎 Dependency diff
+    runs-on: ubuntu-slim
+
+    steps:
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          fetch-depth: 0
+
+      - name: 🔎 Compare dependencies
+        id: analyze
+        uses: e18e/action-dependency-diff@f825d5b5c5ce0a42dc46c47ec20de24460affcd8 # v1.5.0
+        with:
+          mode: artifact
+          detect-replacements: 'true'
+          duplicate-threshold: '4'
+          dependency-threshold: '15'
+          size-threshold: '200000'
+
+      - name: 📤 Upload artifact
+        if: steps.analyze.outputs.artifact-path
+        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
+        with:
+          name: e18e-diff-result
+          path: ${{ steps.analyze.outputs.artifact-path }}
diff --git a/.github/workflows/welcome-close.yml b/.github/workflows/welcome-close.yml
@@ -39,7 +39,7 @@ jobs:
             const body = [
               `Thanks for your first contribution, @${author}! ${emoji}`,
               '',
-              `We'd love to welcome you to the npmx community. Come and say hi on [Discord](https://chat.npmx.dev)! And once you've joined, visit [npmx.wamellow.com](https://npmx.wamellow.com/) to claim the **contributor** role.`,
+              `We'd love to welcome you to the npmx community. Come and say hi on [Discord](https://build.npmx.dev)! And once you've joined, visit [npmx.wamellow.com](https://npmx.wamellow.com/) to claim the **contributor** role.`,
             ].join('\n');
 
             await github.rest.issues.createComment({
diff --git a/app/components/CommandPalette.client.vue b/app/components/CommandPalette.client.vue
@@ -324,6 +324,7 @@ useEventListener(document, 'keydown', handleGlobalKeydown)
             type="text"
             :placeholder="viewMeta.placeholder"
             no-correct
+            no-password-manager
             size="lg"
             class="w-full"
             :aria-describedby="inputDescribedBy"
diff --git a/app/components/Input/Base.vue b/app/components/Input/Base.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { noCorrect } from '~/utils/input'
+import { noCorrect, noPasswordManager } from '~/utils/input'
 
 const model = defineModel<string>({ default: '' })
 
@@ -16,6 +16,12 @@ const props = withDefaults(
     noCorrect?: boolean
     /** Keyboard shortcut hint */
     ariaKeyshortcuts?: string
+    /**
+     * Prevents most common password managers from recognizing the input as a password field.
+     * Note: This is not a standard HTML attribute but vendor-specific data-* attributes.
+     * @default false
+     */
+    noPasswordManager?: boolean
   }>(),
   {
     size: 'md',
@@ -36,13 +42,18 @@ defineExpose({
   focus: () => el.value?.focus(),
   blur: () => el.value?.blur(),
 })
+
+const inputAttrs = computed(() => ({
+  ...(props.noCorrect ? noCorrect : {}),
+  ...(props.noPasswordManager ? noPasswordManager : {}),
+}))
 </script>
 
 <template>
   <input
     ref="el"
     v-model="model"
-    v-bind="props.noCorrect ? noCorrect : undefined"
+    v-bind="inputAttrs"
     @focus="emit('focus', $event)"
     @blur="emit('blur', $event)"
     class="appearance-none bg-bg-subtle border border-border font-mono text-fg placeholder:text-fg-subtle transition-[border-color,outline-color] duration-300 hover:border-fg-subtle outline-2 outline-transparent outline-offset-2 focus:border-accent focus-visible:outline-accent/70 disabled:(opacity-50 cursor-not-allowed)"
diff --git a/app/components/Package/ManagerSelect.vue b/app/components/Package/ManagerSelect.vue
@@ -191,7 +191,8 @@ function handleKeydown(event: KeyboardEvent) {
 :root[data-pm='yarn'] [data-pm-select='yarn'],
 :root[data-pm='bun'] [data-pm-select='bun'],
 :root[data-pm='deno'] [data-pm-select='deno'],
-:root[data-pm='vlt'] [data-pm-select='vlt'] {
+:root[data-pm='vlt'] [data-pm-select='vlt'],
+:root[data-pm='vp'] [data-pm-select='vp'] {
   display: inline-block;
 }
 
diff --git a/app/components/Terminal/Execute.vue b/app/components/Terminal/Execute.vue
@@ -94,7 +94,8 @@ const copyExecuteCommand = () => copyExecute(getFullExecuteCommand())
 :root[data-pm='yarn'] [data-pm-cmd='yarn'],
 :root[data-pm='bun'] [data-pm-cmd='bun'],
 :root[data-pm='deno'] [data-pm-cmd='deno'],
-:root[data-pm='vlt'] [data-pm-cmd='vlt'] {
+:root[data-pm='vlt'] [data-pm-cmd='vlt'],
+:root[data-pm='vp'] [data-pm-cmd='vp'] {
   display: flex;
 }
 
diff --git a/app/components/Terminal/Install.vue b/app/components/Terminal/Install.vue
@@ -412,7 +412,8 @@ useCommandPaletteContextCommands(
 :root[data-pm='yarn'] [data-pm-cmd='yarn'],
 :root[data-pm='bun'] [data-pm-cmd='bun'],
 :root[data-pm='deno'] [data-pm-cmd='deno'],
-:root[data-pm='vlt'] [data-pm-cmd='vlt'] {
+:root[data-pm='vlt'] [data-pm-cmd='vlt'],
+:root[data-pm='vp'] [data-pm-cmd='vp'] {
   display: flex;
 }
 
diff --git a/app/utils/input.ts b/app/utils/input.ts
@@ -28,3 +28,15 @@ export function isKeyWithoutModifiers(event: KeyboardEvent, key: string): boolea
 }
 
 export const DATE_INPUT_MAX = '9999-12-31'
+
+/** Attributes to prevent password managers from recognizing an input as a password field. */
+export const noPasswordManager = {
+  /* ProtonPass, https://stackoverflow.com/a/51272839 */
+  ['data-protonpass-ignore']: 'true',
+  /* LastPass, https://stackoverflow.com/a/51272839 */
+  ['data-lpignore']: 'true',
+  /* 1Password, https://stackoverflow.com/a/51272839 */
+  ['data-1p-ignore']: 'true',
+  /* Bitwarden, https://stackoverflow.com/questions/41945535/html-disable-password-manager#comment139327111_51272839 */
+  ['data-bwignore']: 'true',
+} as const
diff --git a/app/utils/install-command.ts b/app/utils/install-command.ts
@@ -59,6 +59,15 @@ export const packageManagers = [
     create: 'vlx',
     icon: 'i-custom-vlt',
   },
+  {
+    id: 'vp',
+    label: 'vp',
+    action: 'add',
+    executeLocal: 'vp exec',
+    executeRemote: 'vp dlx',
+    create: 'vp create',
+    icon: 'i-simple-icons:vite',
+  },
 ] as const
 
 export type PackageManagerId = (typeof packageManagers)[number]['id']
diff --git a/app/utils/prehydrate.ts b/app/utils/prehydrate.ts
@@ -21,7 +21,7 @@ export function initPreferencesOnPrehydrate() {
     ] satisfies typeof ACCENT_COLOR_IDS)
 
     // Valid package manager IDs
-    const validPMs = new Set(['npm', 'pnpm', 'yarn', 'bun', 'deno', 'vlt'])
+    const validPMs = new Set(['npm', 'pnpm', 'yarn', 'bun', 'deno', 'vlt', 'vp'])
 
     // Read settings from localStorage
     const settings = JSON.parse(
diff --git a/cli/src/npm-client.ts b/cli/src/npm-client.ts
@@ -157,6 +157,8 @@ const AUTH_URL_TIMEOUT_MS = 90_000
 export interface ExecNpmOptions {
   otp?: string
   silent?: boolean
+  /** Working directory for the npm command. */
+  cwd?: string
   /** When true, use PTY-based interactive execution instead of execFile. */
   interactive?: boolean
   /** When true, npm opens auth URLs in the user's browser.
@@ -214,6 +216,7 @@ async function execNpmInteractive(
     name: 'xterm-256color',
     cols: 120,
     rows: 30,
+    cwd: options.cwd,
     env,
   })
 
@@ -337,6 +340,7 @@ async function execNpm(args: string[], options: ExecNpmOptions = {}): Promise<Np
     const { command, args: processArgs } = resolveNpmProcessCommand(npmArgs)
     const { stdout, stderr } = await execFileAsync(command, processArgs, {
       timeout: 60000,
+      cwd: options.cwd,
       env: createNpmEnv(),
     })
 
@@ -559,12 +563,12 @@ export async function listUserPackages(user: string): Promise<NpmExecResult> {
  * Creates a minimal package.json in a temp directory and publishes it.
  * @param name Package name to claim
  * @param author npm username of the publisher (for author field)
- * @param otp Optional OTP for 2FA
+ * @param options Execution options (otp, interactive, etc.)
  */
 export async function packageInit(
   name: string,
   author?: string,
-  otp?: string,
+  options?: ExecNpmOptions,
 ): Promise<NpmExecResult> {
   validatePackageName(name)
 
@@ -600,52 +604,22 @@ export async function packageInit(
     args.push('--access', access)
   }
 
-  // Run npm publish from the temp directory
-  const npmArgs = otp ? [...args, '--otp', otp] : args
-
-  // Log the command being run (hide OTP value for security)
-  const displayCmd = otp ? `npm ${args.join(' ')} --otp ******` : `npm ${args.join(' ')}`
+  const displayCmd = options?.otp
+    ? ['npm', ...args, '--otp', '******'].join(' ')
+    : ['npm', ...args].join(' ')
   logCommand(`${displayCmd} (in temp dir for ${name})`)
 
-  try {
-    const { command, args: processArgs } = resolveNpmProcessCommand(npmArgs)
-    const { stdout, stderr } = await execFileAsync(command, processArgs, {
-      timeout: 60000,
-      cwd: tempDir.path,
-      env: createNpmEnv(),
-    })
+  const result = await execNpm(args, { ...options, cwd: tempDir.path, silent: true })
 
+  if (result.exitCode === 0) {
     logSuccess(`Published ${name}@0.0.0`)
-
-    return {
-      stdout: stdout.trim(),
-      stderr: filterNpmWarnings(stderr),
-      exitCode: 0,
-    }
-  } catch (error) {
-    const err = error as { stdout?: string; stderr?: string; code?: number }
-    const stderr = err.stderr?.trim() ?? String(error)
-    const requiresOtp = detectOtpRequired(stderr)
-    const authFailure = detectAuthFailure(stderr)
-
-    if (requiresOtp) {
-      logError('OTP required')
-    } else if (authFailure) {
-      logError('Authentication required - please run "npm login" and restart the connector')
-    } else {
-      logError(filterNpmWarnings(stderr).split('\n')[0] || 'Command failed')
-    }
-
-    return {
-      stdout: err.stdout?.trim() ?? '',
-      stderr: requiresOtp
-        ? 'This operation requires a one-time password (OTP).'
-        : authFailure
-          ? 'Authentication failed. Please run "npm login" and restart the connector.'
-          : filterNpmWarnings(stderr),
-      exitCode: err.code ?? 1,
-      requiresOtp,
-      authFailure,
-    }
+  } else if (result.requiresOtp) {
+    logError('OTP required')
+  } else if (result.authFailure) {
+    logError('Authentication required - please run "npm login" and restart the connector')
+  } else {
+    logError(result.stderr.split('\n')[0] || 'Command failed')
   }
+
+  return result
 }
diff --git a/cli/src/server.ts b/cli/src/server.ts
@@ -809,9 +809,7 @@ async function executeOperation(
       result = await ownerRemove(params.user, params.pkg, execOptions)
       break
     case 'package:init':
-      // package:init has its own special execution path (temp dir + publish)
-      // and does not support interactive mode
-      result = await packageInit(params.name, params.author, options.otp)
+      result = await packageInit(params.name, params.author, execOptions)
       break
     default:
       return {
diff --git a/i18n/locales/nb-NO.json b/i18n/locales/nb-NO.json
diff --git a/i18n/locales/zh-CN.json b/i18n/locales/zh-CN.json
diff --git a/modules/blog.ts b/modules/blog.ts
diff --git a/nuxt.config.ts b/nuxt.config.ts
diff --git a/test/unit/app/utils/install-command.spec.ts b/test/unit/app/utils/install-command.spec.ts

Original file line number	Diff line number	Diff line change
`@@ -191,7 +191,8 @@ function handleKeydown(event: KeyboardEvent) {`
`191`	`191`	`:root[data-pm='yarn'] [data-pm-select='yarn'],`
`192`	`192`	`:root[data-pm='bun'] [data-pm-select='bun'],`
`193`	`193`	`:root[data-pm='deno'] [data-pm-select='deno'],`
`194`		`-:root[data-pm='vlt'] [data-pm-select='vlt'] {`
	`194`	`+:root[data-pm='vlt'] [data-pm-select='vlt'],`
	`195`	`+:root[data-pm='vp'] [data-pm-select='vp'] {`
`195`	`196`	`display: inline-block;`
`196`	`197`	`}`
`197`	`198`
Original file line number	Diff line number	Diff line change
`@@ -94,7 +94,8 @@ const copyExecuteCommand = () => copyExecute(getFullExecuteCommand())`
`94`	`94`	`:root[data-pm='yarn'] [data-pm-cmd='yarn'],`
`95`	`95`	`:root[data-pm='bun'] [data-pm-cmd='bun'],`
`96`	`96`	`:root[data-pm='deno'] [data-pm-cmd='deno'],`
`97`		`-:root[data-pm='vlt'] [data-pm-cmd='vlt'] {`
	`97`	`+:root[data-pm='vlt'] [data-pm-cmd='vlt'],`
	`98`	`+:root[data-pm='vp'] [data-pm-cmd='vp'] {`
`98`	`99`	`display: flex;`
`99`	`100`	`}`
`100`	`101`
Original file line number	Diff line number	Diff line change
`@@ -412,7 +412,8 @@ useCommandPaletteContextCommands(`
`412`	`412`	`:root[data-pm='yarn'] [data-pm-cmd='yarn'],`
`413`	`413`	`:root[data-pm='bun'] [data-pm-cmd='bun'],`
`414`	`414`	`:root[data-pm='deno'] [data-pm-cmd='deno'],`
`415`		`-:root[data-pm='vlt'] [data-pm-cmd='vlt'] {`
	`415`	`+:root[data-pm='vlt'] [data-pm-cmd='vlt'],`
	`416`	`+:root[data-pm='vp'] [data-pm-cmd='vp'] {`
`416`	`417`	`display: flex;`
`417`	`418`	`}`
`418`	`419`