Merge branch 'npmx-dev:main' into main

Author: johnnyreilly

.github/workflows/autofix.yml

@@ -32,8 +32,8 @@ jobs:
       - name: 📦 Install dependencies
         run: pnpm install
 
-      - name: 🎨 Check for non-RTL CSS classes
-        run: pnpm rtl:check
+      - name: 🎨 Check for non-RTL/non-a11y CSS classes
+        run: pnpm lint:css
 
       - name: 🌐 Compare translations
         run: pnpm i18n:check

app/assets/main.css

@@ -171,6 +171,26 @@
   }
 }
 
+/*
+ * Forced Colors Mode (WHCM) Override for Icons
+ *
+ * By default, `forced-color-adjust: preserve-parent-color` (from UnoConfig) works fine
+ * for most icons as they inherit the correct text color.
+ *
+ * However, if icons disappear in specific contexts (e.g., inside buttons with
+ * complex backgrounds or transparent states), uncomment the following block
+ * to enforce visibility using `CanvasText`.
+ */
+/* 
+@media (forced-colors: active) {
+  [class^='i-'],
+  [class*=' i-'] {
+    forced-color-adjust: none !important;
+    color: CanvasText !important;
+  }
+}
+*/
+
 html {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

app/components/Compare/PackageSelector.vue

@@ -77,9 +77,18 @@ function removePackage(name: string) {
 }
 
 function handleKeydown(e: KeyboardEvent) {
-  if (e.key === 'Enter' && inputValue.value.trim()) {
+  const inputValueTrim = inputValue.value.trim()
+  const hasMatchInPackages = filteredResults.value.find(result => {
+    return result.name === inputValueTrim
+  })
+
+  if (e.key === 'Enter' && inputValueTrim) {
     e.preventDefault()
-    addPackage(inputValue.value.trim())
+    if (showNoDependencyOption.value) {
+      addPackage(NO_DEPENDENCY_ID)
+    } else if (hasMatchInPackages) {
+      addPackage(inputValueTrim)
+    }
   }
 }
 

app/components/Header/AuthModal.client.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { useAtproto } from '~/composables/atproto/useAtproto'
 import { authRedirect } from '~/utils/atproto/helpers'
+import { ensureValidAtIdentifier } from '@atproto/syntax'
 
 const handleInput = shallowRef('')
+const errorMessage = shallowRef('')
 const route = useRoute()
 const { user, logout } = useAtproto()
 
@@ -13,26 +15,41 @@ const localeSubPath = ['ko', 'pt', 'ja'].includes(currentLang) ? currentLang : '
 const atprotoLink = `https://atproto.com/${localeSubPath}`
 
 async function handleBlueskySignIn() {
-  await authRedirect('https://bsky.social', { redirectTo: route.fullPath })
+  await authRedirect('https://bsky.social', { redirectTo: route.fullPath, locale: locale.value })
 }
 
 async function handleCreateAccount() {
-  await authRedirect('https://npmx.social', { create: true, redirectTo: route.fullPath })
+  await authRedirect('https://npmx.social', {
+    create: true,
+    redirectTo: route.fullPath,
+    locale: locale.value,
+  })
 }
 
 async function handleLogin() {
   if (handleInput.value) {
-    await authRedirect(handleInput.value)
+    // URLS to PDSs are valid for oauth redirects
+    if (!handleInput.value.startsWith('https://')) {
+      try {
+        ensureValidAtIdentifier(handleInput.value)
+      } catch (error) {
+        errorMessage.value =
+          error instanceof Error ? error.message : $t('auth.modal.default_input_error')
+        return
+      }
+    }
+    await authRedirect(handleInput.value, {
+      redirectTo: route.fullPath,
+      locale: locale.value,
+    })
   }
 }
 
 watch(handleInput, newHandleInput => {
+  errorMessage.value = ''
   if (!newHandleInput) return
 
-  const normalized = newHandleInput
-    .trim()
-    .toLowerCase()
-    .replace(/[^a-z0-9.-]/g, '')
+  const normalized = newHandleInput.trim().toLowerCase().replace(/@/g, '')
 
   if (normalized !== newHandleInput) {
     handleInput.value = normalized
@@ -81,6 +98,9 @@ watch(handleInput, newHandleInput => {
             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 hover:border-fg-subtle focus:border-accent focus-visible:(outline-2 outline-accent/70)"
           />
+          <p v-if="errorMessage" class="text-red-500 text-xs mt-1" role="alert">
+            {{ errorMessage }}
+          </p>
         </div>
 
         <details class="text-sm">

app/components/LicenseDisplay.vue

@@ -24,7 +24,7 @@ const hasAnyValidLicense = computed(() => tokens.value.some(t => t.type === 'lic
         {{ token.value }}
       </a>
       <span v-else-if="token.type === 'license'">{{ token.value }}</span>
-      <span v-else-if="token.type === 'operator'" class="text-[0.65em]">{{ token.value }}</span>
+      <span v-else-if="token.type === 'operator'" class="text-4xs">{{ token.value }}</span>
     </template>
     <span
       v-if="hasAnyValidLicense"

app/components/Package/ClaimPackageModal.vue

@@ -36,12 +36,12 @@ const isChecking = computed(() => {
 })
 
 const mergedError = computed(() => {
-  return (
-    publishError.value ??
-    (checkError.value instanceof Error
-      ? checkError.value.message
-      : $t('claim.modal.failed_to_check'))
-  )
+  return checkResult.value !== null
+    ? null
+    : (publishError.value ??
+        (checkError.value instanceof Error
+          ? checkError.value.message
+          : $t('claim.modal.failed_to_check')))
 })
 
 const connectorModal = useModal('connector-modal')

app/components/Package/DownloadAnalytics.vue

@@ -895,10 +895,10 @@ function buildExportFilename(extension: string): string {
 }
 
 const granularityLabels = computed(() => ({
-  daily: $t('package.downloads.granularity_daily'),
-  weekly: $t('package.downloads.granularity_weekly'),
-  monthly: $t('package.downloads.granularity_monthly'),
-  yearly: $t('package.downloads.granularity_yearly'),
+  daily: $t('package.trends.granularity_daily'),
+  weekly: $t('package.trends.granularity_weekly'),
+  monthly: $t('package.trends.granularity_monthly'),
+  yearly: $t('package.trends.granularity_yearly'),
 }))
 
 function getGranularityLabel(granularity: ChartTimeGranularity) {
@@ -1321,18 +1321,18 @@ const chartConfig = computed(() => {
       userOptions: {
         buttons: { pdf: false, labels: false, fullscreen: false, table: false, tooltip: false },
         buttonTitles: {
-          csv: $t('package.downloads.download_file', { fileType: 'CSV' }),
-          img: $t('package.downloads.download_file', { fileType: 'PNG' }),
-          svg: $t('package.downloads.download_file', { fileType: 'SVG' }),
-          annotator: $t('package.downloads.toggle_annotator'),
+          csv: $t('package.trends.download_file', { fileType: 'CSV' }),
+          img: $t('package.trends.download_file', { fileType: 'PNG' }),
+          svg: $t('package.trends.download_file', { fileType: 'SVG' }),
+          annotator: $t('package.trends.toggle_annotator'),
         },
         callbacks: {
           img: ({ imageUri }: { imageUri: string }) => {
             loadFile(imageUri, buildExportFilename('png'))
           },
           csv: (csvStr: string) => {
             const PLACEHOLDER_CHAR = '\0'
-            const multilineDateTemplate = $t('package.downloads.date_range_multiline', {
+            const multilineDateTemplate = $t('package.trends.date_range_multiline', {
               start: PLACEHOLDER_CHAR,
               end: PLACEHOLDER_CHAR,
             })
@@ -1360,8 +1360,9 @@ const chartConfig = computed(() => {
           fontSize: isMobile.value ? 24 : 16,
           color: pending.value ? colors.value.border : colors.value.fgSubtle,
           axis: {
-            yLabel: $t('package.downloads.y_axis_label', {
+            yLabel: $t('package.trends.y_axis_label', {
               granularity: getGranularityLabel(selectedGranularity.value),
+              facet: $t('package.trends.items.downloads'),
             }),
             xLabel: isMultiPackageMode.value ? '' : xAxisLabel.value, // for multiple series, names are displayed in the chart's legend
             yLabelOffsetX: 12,
@@ -1478,7 +1479,7 @@ const chartConfig = computed(() => {
             for="granularity"
             class="text-3xs font-mono text-fg-subtle tracking-wide uppercase"
           >
-            {{ $t('package.downloads.granularity') }}
+            {{ $t('package.trends.granularity') }}
           </label>
 
           <div
@@ -1490,10 +1491,18 @@ const chartConfig = computed(() => {
               :disabled="pending"
               class="w-full px-2.5 py-1.75 bg-bg-subtle font-mono text-sm text-fg outline-none appearance-none focus-visible:outline-accent/70"
             >
-              <option value="daily">{{ $t('package.downloads.granularity_daily') }}</option>
-              <option value="weekly">{{ $t('package.downloads.granularity_weekly') }}</option>
-              <option value="monthly">{{ $t('package.downloads.granularity_monthly') }}</option>
-              <option value="yearly">{{ $t('package.downloads.granularity_yearly') }}</option>
+              <option value="daily">
+                {{ $t('package.trends.granularity_daily') }}
+              </option>
+              <option value="weekly">
+                {{ $t('package.trends.granularity_weekly') }}
+              </option>
+              <option value="monthly">
+                {{ $t('package.trends.granularity_monthly') }}
+              </option>
+              <option value="yearly">
+                {{ $t('package.trends.granularity_yearly') }}
+              </option>
             </select>
           </div>
         </div>
@@ -1504,7 +1513,7 @@ const chartConfig = computed(() => {
               for="startDate"
               class="text-3xs font-mono text-fg-subtle tracking-wide uppercase"
             >
-              {{ $t('package.downloads.start_date') }}
+              {{ $t('package.trends.start_date') }}
             </label>
             <div
               class="flex items-center gap-2 px-2.5 py-1.75 bg-bg-subtle border border-border rounded-md focus-within:(border-border-hover ring-2 ring-accent/70)"
@@ -1522,7 +1531,7 @@ const chartConfig = computed(() => {
 
           <div class="flex flex-col gap-1">
             <label for="endDate" class="text-3xs font-mono text-fg-subtle tracking-wide uppercase">
-              {{ $t('package.downloads.end_date') }}
+              {{ $t('package.trends.end_date') }}
             </label>
             <div
               class="flex items-center gap-2 px-2.5 py-1.75 bg-bg-subtle border border-border rounded-md focus-within:(border-border-hover ring-2 ring-accent/70)"
@@ -1656,9 +1665,7 @@ const chartConfig = computed(() => {
                       stroke-linecap="round"
                     />
                   </svg>
-                  <span class="text-fg-subtle">{{
-                    $t('package.downloads.legend_estimation')
-                  }}</span>
+                  <span class="text-fg-subtle">{{ $t('package.trends.legend_estimation') }}</span>
                 </div>
               </div>
             </template>
@@ -1747,7 +1754,11 @@ const chartConfig = computed(() => {
       v-if="!chartData.dataset && !pending"
       class="min-h-[260px] flex items-center justify-center text-fg-subtle font-mono text-sm"
     >
-      {{ $t('package.downloads.no_data') }}
+      {{
+        $t('package.trends.no_data', {
+          facet: $t('package.trends.items.downloads'),
+        })
+      }}
     </div>
 
     <div
@@ -1756,7 +1767,7 @@ const chartConfig = computed(() => {
       aria-live="polite"
       class="absolute top-1/2 inset-is-1/2 -translate-x-1/2 -translate-y-1/2 text-xs text-fg-subtle font-mono bg-bg/70 backdrop-blur px-3 py-2 rounded-md border border-border"
     >
-      {{ $t('package.downloads.loading') }}
+      {{ $t('package.trends.loading') }}
     </div>
   </div>
 </template>

app/components/Package/WeeklyDownloadStats.vue

@@ -131,7 +131,7 @@ watch(
 const dataset = computed(() =>
   weeklyDownloads.value.map(d => ({
     value: d?.downloads ?? 0,
-    period: $t('package.downloads.date_range', {
+    period: $t('package.trends.date_range', {
       start: d.weekStart ?? '-',
       end: d.weekEnd ?? '-',
     }),
@@ -267,7 +267,7 @@ const config = computed(() => {
           </ClientOnly>
         </template>
         <p v-else class="py-2 text-sm font-mono text-fg-subtle">
-          {{ $t('package.downloads.no_data') }}
+          {{ $t('package.trends.no_data') }}
         </p>
       </div>
     </CollapsibleSection>

app/components/Settings/AccentColorPicker.vue

@@ -59,3 +59,18 @@ onPrehydrate(el => {
     </label>
   </fieldset>
 </template>
+
+<style scoped>
+@media (forced-colors: active) {
+  /* keep accent radio swatches visible in forced colors. */
+  label {
+    forced-color-adjust: none;
+    border: 1px solid CanvasText;
+
+    &:has(> input:checked) {
+      outline: 2px solid Highlight;
+      outline-offset: 2px;
+    }
+  }
+}
+</style>

app/components/Settings/BgThemePicker.vue

@@ -37,3 +37,18 @@ onPrehydrate(el => {
     </label>
   </fieldset>
 </template>
+
+<style scoped>
+@media (forced-colors: active) {
+  /* keep background theme swatches visible in forced colors. */
+  label {
+    forced-color-adjust: none;
+    border: 1px solid CanvasText;
+
+    &:has(> input:checked) {
+      outline: 2px solid Highlight;
+      outline-offset: 2px;
+    }
+  }
+}
+</style>