fix(i18n): force install command direction to 'ltr'

[BobbieGoede]

Resolves #1051

If there are more commands rendered somewhere let me know.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Feb 5, 2026 11:21pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Feb 5, 2026 11:21pm
npmx-lunaria	Ignored		Feb 5, 2026 11:21pm

[coderabbitai]

📝 Walkthrough

Walkthrough

The pull request updates the Terminal Install Vue component to add direction attributes to three div elements: the main install command container is set to dir="ltr", and the "Run" and "Create" command comment lines are set to dir="auto". No logic, data flow, event handling, or exported/public entity declarations were changed.

Suggested reviewers

• danielroe

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description references issue #1051 and acknowledges the changes related to command direction attributes, directly relating to the changeset.
Linked Issues check	✅ Passed	The PR successfully adds dir="ltr" to the install command container and dir="auto" to Run/Create command lines, addressing issue #1051's requirement to fix RTL rendering of installation commands.
Out of Scope Changes check	✅ Passed	All changes are scoped to adding dir attributes to the Terminal/Install.vue component, directly addressing the linked issue #1051 with no unrelated modifications.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

app/components/Terminal/Install.vue (1)

109-133: ⚠️ Potential issue | 🟡 Minor

The fix is correct but incomplete — other command sections in this file also need dir="ltr".

The dir="ltr" attribute correctly addresses the RTL issue for the install command. However, this file renders three additional command types that would have the same problem:

1. @types install (line 137): The div with v-for="pm in packageManagers"
2. Run command (line 172): The div with v-for="pm in packageManagers"
3. Create command (line 217): The div with v-for="pm in packageManagers"

All command blocks should have consistent LTR direction since they're all shell commands in English.

🔧 Proposed fix to add `dir="ltr"` to the remaining command sections

         <!-- `@types` package install - render all PM variants when types package exists -->
         <template v-if="typesPackageName && showTypesInInstall">
           <div
             v-for="pm in packageManagers"
             :key="`types-${pm.id}`"
             :data-pm-cmd="pm.id"
+            dir="ltr"
             class="flex items-center gap-2 min-w-0"
           >

           <div
             v-for="pm in packageManagers"
             :key="`run-${pm.id}`"
             :data-pm-cmd="pm.id"
+            dir="ltr"
             class="flex items-center gap-2 group/runcmd"
           >

           <div
             v-for="pm in packageManagers"
             :key="`create-${pm.id}`"
             :data-pm-cmd="pm.id"
+            dir="ltr"
             class="flex items-center gap-2 group/createcmd"
           >

🧹 Nitpick comments (1)

app/components/Terminal/Install.vue (1)

166-170: Consider adding dir="ltr" to comment lines as well.

The comment lines (e.g., # Run locally, # Create project) are also rendered within the terminal and contain English text. For full consistency in RTL locales, these should also be LTR.

♻️ Optional: Add `dir="ltr"` to comment lines

           <!-- Comment line -->
-          <div class="flex items-center gap-2 pt-1">
+          <div class="flex items-center gap-2 pt-1" dir="ltr">
             <span class="text-fg-subtle font-mono text-sm select-none"
               ># {{ $t('package.run.locally') }}</span
             >
           </div>

           <!-- Comment line -->
-          <div class="flex items-center gap-2 pt-1 select-none">
+          <div class="flex items-center gap-2 pt-1 select-none" dir="ltr">
             <span class="text-fg-subtle font-mono text-sm"># {{ $t('package.create.title') }}</span>

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

[DDeenis]

LGTM 👍

[BobbieGoede]

needs some tweaks

@DDeenis what would be the best way to deal with the comments here?

[DDeenis]

I would say, ideally they should be auto since they can be Arabic?

[DDeenis]

Let's try this - commands always LTR, comments auto

[BobbieGoede]

@DDeenis

[DDeenis]

Nice! That looks really good

[coderabbitai]

Actionable comments posted: 1

[DDeenis]

Note - we are waiting for a confirmation from a person who speaks Arabic

[serhalp]

This (and other others) might easily get mistakenly "fixed" in the future. Could we leave an explanatory comment on each one? or maybe a custom directive with an expressive name that just sets dir="ltr" could serve the same purpose? https://vuejs.org/guide/reusability/custom-directives

[skaldebane]

Maybe something like v-always-ltr?