Merge branch 'main' into feat-production-setup

# Conflicts:
#	package.json
#	pnpm-lock.yaml

Author: userquin

.github/workflows/ci.yml

@@ -61,7 +61,7 @@ jobs:
   browser:
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.57.0-noble
+      image: mcr.microsoft.com/playwright:v1.58.0-noble
 
     steps:
       - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1

.github/workflows/semantic-pull-requests.yml

@@ -23,9 +23,11 @@ jobs:
         uses: amannn/action-semantic-pull-request@48f256284bd46cdaab1048c3721360e808335d50 # v6.1.1
         with:
           scopes: |
+            a11y
+            deps
             docs
             i18n
-            deps
+            ui
           subjectPattern: ^(?![A-Z]).+$
           subjectPatternError: |
             The subject "{subject}" found in the pull request title "{title}"

CONTRIBUTING.md

@@ -232,7 +232,7 @@ We've added some `UnoCSS` utilities styles to help you with that:
 - Do not use `rtl-` classes, such as `rtl-left-0`.
 - For icons that should be rotated for RTL, add `class="rtl-flip"`. This can only be used for icons outside of elements with `dir="auto"`.
 - For absolute positioned elements, don't use `left/right`: for example `left-0`. Use `inset-inline-start/end` instead. `UnoCSS` shortcuts are `inset-is` for `inset-inline-start` and `inset-ie` for `inset-inline-end`. Example: `left-0` should be replaced with `inset-is-0`.
-- If you need to change the border radius for an entire left or right side, use `border-inline-start/end`. `UnoCSS` shortcuts are `rounded-is` for left side, `rounded-ie` for right side. Example: `rounded-l-5` should be replaced with `rounded-ie-5`.
+- If you need to change the border radius for an entire left or right side, use `border-inline-start/end`. `UnoCSS` shortcuts are `rounded-is` for left side, `rounded-ie` for right side. Example: `rounded-l-5` should be replaced with `rounded-is-5`.
 - If you need to change the border radius for one corner, use `border-start-end-radius` and similar rules. `UnoCSS` shortcuts are `rounded` + top/bottom as either `-bs` (top) or `-be` (bottom) + left/right as either `-is` (left) or `-ie` (right). Example: `rounded-tl-0` should be replaced with `rounded-bs-is-0`.
 
 ## Localization (i18n)

README.md

@@ -4,7 +4,7 @@
 
 <p align="center">
   <a href="https://npmx.dev/">
-    <img width="1090" alt="Screenshot of npmx.dev showing the nuxt package" src="https://github.com/user-attachments/assets/229497a2-8491-461c-aa1d-fba981215340">
+    <img width="1090" alt="Screenshot of npmx.dev showing the nuxt package" src="https://github.com/user-attachments/assets/1a2a3205-0227-46dc-b1f9-48f9a65691d3">
   </a>
 </p>
 

app/app.vue

@@ -6,8 +6,8 @@ const route = useRoute()
 const router = useRouter()
 const { locale, locales } = useI18n()
 
-// Initialize accent color before hydration to prevent flash
-initAccentOnPrehydrate()
+// Initialize user preferences (accent color, package manager) before hydration to prevent flash/CLS
+initPreferencesOnPrehydrate()
 
 const isHomepage = computed(() => route.name === 'index')
 

app/assets/main.css

@@ -22,13 +22,25 @@
   --border-subtle: oklch(0.239 0 0);
   --border-hover: oklch(0.371 0 0);
 
+  /* accent color, set by user from settings */
   --accent: var(--accent-color, oklch(1 0 0));
   --accent-muted: var(--accent-color, oklch(0.922 0 0));
 
+  /* syntax highlighting colors */
   --syntax-fn: oklch(0.727 0.137 299.149);
   --syntax-str: oklch(0.829 0.088 252.458);
   --syntax-kw: oklch(0.721 0.162 15.494);
   --syntax-comment: oklch(0.551 0.019 250.976);
+
+  /* badge colors for background & text */
+  --badge-orange: oklch(0.67 0.185 55);
+  --badge-yellow: oklch(0.588 0.183 91);
+  --badge-green: oklch(0.566 0.202 165);
+  --badge-cyan: oklch(0.571 0.181 210);
+  --badge-blue: oklch(0.579 0.191 252);
+  --badge-indigo: oklch(0.573 0.262 276.966);
+  --badge-purple: oklch(0.495 0.172 295);
+  --badge-pink: oklch(0.584 0.189 343);
 }
 
 :root[data-theme='light'] {
@@ -49,9 +61,18 @@
   --accent-muted: var(--accent-color, oklch(0.205 0 0));
 
   --syntax-fn: oklch(0.502 0.188 294.988);
-  --syntax-str: oklch(0.54 0.191 257.481);
+  --syntax-str: oklch(0.425 0.152 252);
   --syntax-kw: oklch(0.588 0.193 20.469);
   --syntax-comment: oklch(0.551 0.019 250.976);
+
+  --badge-blue: oklch(0.579 0.191 252);
+  --badge-yellow: oklch(0.588 0.183 91);
+  --badge-green: oklch(0.566 0.202 165);
+  --badge-indigo: oklch(0.457 0.24 277.023);
+  --badge-purple: oklch(0.495 0.172 295);
+  --badge-orange: oklch(0.67 0.185 55);
+  --badge-pink: oklch(0.584 0.189 343);
+  --badge-cyan: oklch(0.571 0.181 210);
 }
 
 html {
@@ -154,9 +175,9 @@ button {
 
 /* Skip link */
 .skip-link {
-  position: absolute;
+  position: fixed;
   top: -100%;
-  left: 0;
+  inset-inline-start: 0;
   padding: 0.5rem 1rem;
   background: var(--fg);
   color: var(--bg);
@@ -165,6 +186,10 @@ button {
   transition: top 0.2s ease;
 }
 
+.skip-link:hover {
+  color: var(--bg);
+  text-decoration: underline;
+}
 .skip-link:focus {
   top: 0;
 }
@@ -289,7 +314,7 @@ html.light .shiki span {
 .readme-content ul,
 .readme-content ol {
   margin: 1rem 0;
-  padding-left: 1.5rem;
+  padding-inline-start: 1.5rem;
 }
 
 .readme-content ul {
@@ -310,17 +335,18 @@ html.light .shiki span {
 }
 
 .readme-content blockquote {
-  border-left: 2px solid var(--border);
-  padding-left: 1rem;
+  border-inline-start: 2px solid var(--border);
+  padding-inline-start: 1rem;
   margin: 1.5rem 0;
   color: var(--fg-subtle);
   font-style: italic;
 }
 
 /* GitHub-style callouts/alerts */
 .readme-content blockquote[data-callout] {
-  border-left-width: 3px;
-  padding: 1rem 1rem 1rem 1.25rem;
+  border-inline-start-width: 3px;
+  padding: 1rem;
+  padding-inline-start: 1.25rem;
   background: var(--bg-subtle);
   font-style: normal;
   color: var(--fg-subtle);
@@ -335,7 +361,7 @@ html.light .shiki span {
   text-transform: uppercase;
   letter-spacing: 0.05em;
   margin-bottom: 0.5rem;
-  padding-left: 1.5rem;
+  padding-inline-start: 1.5rem;
 }
 
 .readme-content blockquote[data-callout]::after {
@@ -356,7 +382,7 @@ html.light .shiki span {
 
 /* Note - blue */
 .readme-content blockquote[data-callout='note'] {
-  border-left-color: var(--syntax-str);
+  border-inline-start-color: var(--syntax-str);
   background: rgba(59, 130, 246, 0.05);
 }
 .readme-content blockquote[data-callout='note']::before {
@@ -371,7 +397,7 @@ html.light .shiki span {
 
 /* Tip - green */
 .readme-content blockquote[data-callout='tip'] {
-  border-left-color: #22c55e;
+  border-inline-start-color: #22c55e;
   background: rgba(34, 197, 94, 0.05);
 }
 .readme-content blockquote[data-callout='tip']::before {
@@ -386,7 +412,7 @@ html.light .shiki span {
 
 /* Important - purple */
 .readme-content blockquote[data-callout='important'] {
-  border-left-color: var(--syntax-fn);
+  border-inline-start-color: var(--syntax-fn);
   background: rgba(168, 85, 247, 0.05);
 }
 .readme-content blockquote[data-callout='important']::before {
@@ -401,7 +427,7 @@ html.light .shiki span {
 
 /* Warning - yellow/orange */
 .readme-content blockquote[data-callout='warning'] {
-  border-left-color: #eab308;
+  border-inline-start-color: #eab308;
   background: rgba(234, 179, 8, 0.05);
 }
 .readme-content blockquote[data-callout='warning']::before {
@@ -416,7 +442,7 @@ html.light .shiki span {
 
 /* Caution - red */
 .readme-content blockquote[data-callout='caution'] {
-  border-left-color: #ef4444;
+  border-inline-start-color: #ef4444;
   background: rgba(239, 68, 68, 0.05);
 }
 .readme-content blockquote[data-callout='caution']::before {
@@ -443,7 +469,7 @@ html.light .shiki span {
 .readme-content td {
   border: 1px solid var(--border);
   padding: 0.75rem 1rem;
-  text-align: left;
+  text-align: start;
 }
 
 .readme-content th {
@@ -499,6 +525,14 @@ input[type='search'] {
   appearance: none;
 }
 
+@media screen and (max-width: 767px) {
+  input,
+  select,
+  textarea {
+    font-size: 16px !important;
+  }
+}
+
 input[type='search']::-webkit-search-decoration,
 input[type='search']::-webkit-search-cancel-button,
 input[type='search']::-webkit-search-results-button,

app/components/AccentColorPicker.vue

@@ -2,6 +2,17 @@
 import { useAccentColor } from '~/composables/useSettings'
 
 const { accentColors, selectedAccentColor, setAccentColor } = useAccentColor()
+
+onPrehydrate(el => {
+  const settings = JSON.parse(localStorage.getItem('npmx-settings') || '{}')
+  const id = settings.accentColorId
+  if (id) {
+    const input = el.querySelector<HTMLInputElement>(`input[value="${id}"]`)
+    if (input) {
+      input.checked = true
+    }
+  }
+})
 </script>
 
 <template>

app/components/AppTooltip.vue

@@ -10,10 +10,10 @@ const isVisible = shallowRef(false)
 const tooltipId = useId()
 
 const positionClasses: Record<string, string> = {
-  top: 'bottom-full left-1/2 -translate-x-1/2 mb-1',
-  bottom: 'top-full left-0 mt-1',
-  left: 'right-full top-1/2 -translate-y-1/2 mr-2',
-  right: 'left-full top-1/2 -translate-y-1/2 ml-2',
+  top: 'bottom-full inset-is-1/2 -translate-x-1/2 mb-1',
+  bottom: 'top-full inset-is-0 mt-1',
+  left: 'inset-ie-full top-1/2 -translate-y-1/2 me-2',
+  right: 'inset-is-full top-1/2 -translate-y-1/2 ms-2',
 }
 
 const tooltipPosition = computed(() => positionClasses[props.position || 'bottom'])

app/components/ColumnPicker.vue

@@ -93,7 +93,7 @@ function handleReset() {
         v-if="isOpen"
         ref="menuRef"
         :id="menuId"
-        class="absolute right-0 mt-2 w-60 bg-bg-subtle border border-border rounded-lg shadow-lg z-20"
+        class="absolute inset-ie-0 mt-2 w-60 bg-bg-subtle border border-border rounded-lg shadow-lg z-20"
         role="group"
         :aria-label="$t('filters.columns.show')"
       >
@@ -144,7 +144,7 @@ function handleReset() {
           <div class="border-t border-border py-1">
             <button
               type="button"
-              class="w-full px-3 py-2 text-left text-sm font-mono text-fg-muted hover:bg-bg-muted hover:text-fg transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset"
+              class="w-full px-3 py-2 text-start text-sm font-mono text-fg-muted hover:bg-bg-muted hover:text-fg transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset"
               @click="handleReset"
             >
               {{ $t('filters.columns.reset') }}

app/components/ExecuteCommandTerminal.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import type { JsrPackageInfo } from '#shared/types/jsr'
+import type { PackageManagerId } from '~/utils/install-command'
+
+/**
+ * A terminal-style execute command display for binary-only packages.
+ * Renders all package manager variants with CSS-based visibility.
+ */
+
+const props = defineProps<{
+  packageName: string
+  jsrInfo?: JsrPackageInfo | null
+  isCreatePackage?: boolean
+}>()
+
+const selectedPM = useSelectedPackageManager()
+
+// Generate execute command parts for a specific package manager
+function getExecutePartsForPM(pmId: PackageManagerId) {
+  return getExecuteCommandParts({
+    packageName: props.packageName,
+    packageManager: pmId,
+    jsrInfo: props.jsrInfo,
+    isBinaryOnly: true,
+    isCreatePackage: props.isCreatePackage,
+  })
+}
+
+// Full execute command for copying (uses current selected PM)
+function getFullExecuteCommand() {
+  return getExecuteCommand({
+    packageName: props.packageName,
+    packageManager: selectedPM.value,
+    jsrInfo: props.jsrInfo,
+    isBinaryOnly: true,
+    isCreatePackage: props.isCreatePackage,
+  })
+}
+
+// Copy handler
+const { copied: executeCopied, copy: copyExecute } = useClipboard({ copiedDuring: 2000 })
+const copyExecuteCommand = () => copyExecute(getFullExecuteCommand())
+</script>
+
+<template>
+  <div class="relative group">
+    <!-- Terminal-style execute command -->
+    <div class="bg-bg-subtle border border-border rounded-lg overflow-hidden">
+      <div class="flex gap-1.5 px-3 pt-2 sm:px-4 sm:pt-3">
+        <span class="w-2.5 h-2.5 rounded-full bg-fg-subtle" />
+        <span class="w-2.5 h-2.5 rounded-full bg-fg-subtle" />
+        <span class="w-2.5 h-2.5 rounded-full bg-fg-subtle" />
+      </div>
+      <div class="px-3 pt-2 pb-3 sm:px-4 sm:pt-3 sm:pb-4 space-y-1">
+        <!-- Execute command - render all PM variants, CSS controls visibility -->
+        <div
+          v-for="pm in packageManagers"
+          :key="`execute-${pm.id}`"
+          :data-pm-cmd="pm.id"
+          class="flex items-center gap-2 group/executecmd"
+        >
+          <span class="text-fg-subtle font-mono text-sm select-none">$</span>
+          <code class="font-mono text-sm"
+            ><span
+              v-for="(part, i) in getExecutePartsForPM(pm.id)"
+              :key="i"
+              :class="i === 0 ? 'text-fg' : 'text-fg-muted'"
+              >{{ i > 0 ? ' ' : '' }}{{ part }}</span
+            ></code
+          >
+          <button
+            type="button"
+            class="px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/executecmd:opacity-100 hover:(text-fg border-border-hover) active:scale-95 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            :aria-label="$t('package.get_started.copy_command')"
+            @click.stop="copyExecuteCommand"
+          >
+            {{ executeCopied ? $t('common.copied') : $t('common.copy') }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+/* Hide all variants by default when preference is set */
+:root[data-pm] [data-pm-cmd] {
+  display: none;
+}
+
+/* Show only the matching package manager command */
+:root[data-pm='npm'] [data-pm-cmd='npm'],
+:root[data-pm='pnpm'] [data-pm-cmd='pnpm'],
+: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'] {
+  display: flex;
+}
+
+/* Fallback: when no data-pm is set (SSR initial), show npm as default */
+:root:not([data-pm]) [data-pm-cmd]:not([data-pm-cmd='npm']) {
+  display: none;
+}
+</style>