(() => {
+ return isPackageSelected(props.result.package.name)
+})
function formatScore(value?: number): string {
if (value === undefined || value === 0) return '-'
@@ -40,6 +37,8 @@ const allMaintainersText = computed(() => {
if (!pkg.value.maintainers?.length) return ''
return pkg.value.maintainers.map(m => m.name || m.email).join(', ')
})
+
+const compactNumberFormatter = useCompactNumberFormatter()
@@ -48,6 +47,14 @@ const allMaintainersText = computed(() => {
tabindex="0"
:data-result-index="index"
>
+ |
+
+ |
{
v-if="isColumnVisible('downloads')"
class="py-2 px-3 font-mono text-xs text-fg-muted text-end tabular-nums"
>
- {{ formatDownloads(result.downloads?.weekly) }}
+ {{
+ result.downloads?.weekly !== undefined
+ ? compactNumberFormatter.format(result.downloads.weekly)
+ : '-'
+ }}
|
@@ -133,7 +144,7 @@ const allMaintainersText = computed(() => {
import type { Theme as VueDataUiTheme, VueUiXyConfig, VueUiXyDatasetItem } from 'vue-data-ui'
import { VueUiXy } from 'vue-data-ui/vue-ui-xy'
-import { useDebounceFn, useElementSize } from '@vueuse/core'
+import { useDebounceFn, useElementSize, useTimeoutFn } from '@vueuse/core'
import { useCssVariables } from '~/composables/useColors'
import { OKLCH_NEUTRAL_FALLBACK, transparentizeOklch, lightenOklch } from '~/utils/colors'
import { getFrameworkColor, isListedFramework } from '~/utils/frameworks'
@@ -1350,12 +1350,55 @@ function drawSvgPrintLegend(svg: Record) {
return seriesNames.join('\n')
}
+const showCorrectionControls = shallowRef(false)
+const isResizing = shallowRef(false)
+
+const chartHeight = computed(() => {
+ if (isMobile.value) {
+ return 950
+ }
+ return showCorrectionControls.value && props.inModal ? 494 : 600
+})
+
+const { start } = useTimeoutFn(
+ () => {
+ isResizing.value = false
+ },
+ 200,
+ { immediate: false },
+)
+
+function pauseChartTransitions() {
+ isResizing.value = true
+ start()
+}
+
+watch(
+ chartHeight,
+ (newH, oldH) => {
+ if (newH !== oldH) {
+ // Avoids triggering chart line transitions when the chart is resized
+ pauseChartTransitions()
+ }
+ },
+ { immediate: true },
+)
+
// VueUiXy chart component configuration
const chartConfig = computed(() => {
return {
theme: isDarkMode.value ? 'dark' : ('' as VueDataUiTheme),
+ a11y: {
+ translations: {
+ keyboardNavigation: $t(
+ 'package.trends.chart_assistive_text.keyboard_navigation_horizontal',
+ ),
+ tableAvailable: $t('package.trends.chart_assistive_text.table_available'),
+ tableCaption: $t('package.trends.chart_assistive_text.table_caption'),
+ },
+ },
chart: {
- height: isMobile.value ? 950 : 600,
+ height: chartHeight.value,
backgroundColor: colors.value.bg,
padding: { bottom: displayedGranularity.value === 'yearly' ? 84 : 64, right: 128 }, // padding right is set to leave space of last datapoint label(s)
userOptions: {
@@ -1559,7 +1602,6 @@ const chartConfig = computed(() => {
})
const isDownloadsMetric = computed(() => selectedMetric.value === 'downloads')
-const showCorrectionControls = shallowRef(false)
const packageAnomalies = computed(() => getAnomaliesForPackages(effectivePackageNames.value))
const hasAnomalies = computed(() => packageAnomalies.value.length > 0)
@@ -1624,7 +1666,6 @@ watch(selectedMetric, value => {
type="date"
:max="DATE_INPUT_MAX"
class="w-full min-w-0 bg-transparent"
- size="medium"
/>
@@ -1640,7 +1681,6 @@ watch(selectedMetric, value => {
type="date"
:max="DATE_INPUT_MAX"
class="w-full min-w-0 bg-transparent"
- size="medium"
/>
@@ -1648,6 +1688,8 @@ watch(selectedMetric, value => {
-
-
-
-
-
-
- {{ $t('package.trends.known_anomalies') }}
-
-
+
+
+
+ {{ $t('compare.packages.line_chart_nav_hint') }}
+
+
+
@@ -2062,6 +2146,19 @@ watch(selectedMetric, value => {
+
+
diff --git a/app/components/SearchProviderToggle.client.vue b/app/components/SearchProviderToggle.client.vue
index 276683610e..4a9033dd24 100644
--- a/app/components/SearchProviderToggle.client.vue
+++ b/app/components/SearchProviderToggle.client.vue
@@ -28,7 +28,7 @@ useEventListener('keydown', event => {
:aria-label="$t('settings.data_source.label')"
:aria-expanded="isOpen"
aria-haspopup="true"
- size="small"
+ size="sm"
class="border-none w-8 h-8 !px-0 justify-center"
classicon="i-lucide:settings"
@click="isOpen = !isOpen"
diff --git a/app/components/Select/Field.vue b/app/components/Select/Field.vue
index a58b65089a..c554f1c87c 100644
--- a/app/components/Select/Field.vue
+++ b/app/components/Select/Field.vue
@@ -19,7 +19,7 @@ const SELECT_FIELD_LABEL_SIZES = {
const model = defineModel({ default: undefined })
-export interface SelectFieldProps extends SelectBaseProps {
+interface SelectFieldProps extends SelectBaseProps {
items: { label: string; value: string; disabled?: boolean }[]
size?: keyof typeof SELECT_FIELD_SIZES
selectAttrs?: Omit &
diff --git a/app/components/Settings/AccentColorPicker.vue b/app/components/Settings/AccentColorPicker.vue
index 372ac840e3..6d0d4ad217 100644
--- a/app/components/Settings/AccentColorPicker.vue
+++ b/app/components/Settings/AccentColorPicker.vue
@@ -29,7 +29,7 @@ onPrehydrate(el => {
-
+
@@ -77,4 +77,19 @@ const blueskyPostUri = computed(() => blueskyLink.value?.postUri ?? null)
:deep(.markdown-body) {
@apply prose dark:prose-invert;
}
+
+:deep(.prose a:not(.not-prose a):not([class*='no-underline'])) {
+ text-decoration: underline;
+ text-underline-offset: 0.2rem;
+ text-decoration-thickness: 1px;
+ text-decoration-color: var(--fg-subtle);
+ transition:
+ text-decoration-color 0.2s,
+ color 0.2s;
+}
+
+:deep(.prose a:not(.not-prose a):not([class*='no-underline']):hover) {
+ text-decoration-color: var(--fg);
+ color: var(--fg);
+}
diff --git a/app/components/global/BlueskyPostEmbed.client.vue b/app/components/global/BlueskyPostEmbed.client.vue
index c8513a7703..8e767e7b8c 100644
--- a/app/components/global/BlueskyPostEmbed.client.vue
+++ b/app/components/global/BlueskyPostEmbed.client.vue
@@ -107,10 +107,16 @@ const postUrl = computed(() => {
:href="postUrl ?? '#'"
target="_blank"
rel="noopener noreferrer"
- class="not-prose block rounded-lg border border-border bg-bg-subtle p-4 sm:p-5 no-underline hover:border-border-hover transition-colors duration-200"
+ class="not-prose block rounded-lg border border-border bg-bg-subtle p-4 sm:p-5 no-underline hover:border-border-hover transition-colors duration-200 relative group"
>
+
+
+
-
+
![]()
{
@{{ post.author.handle }}
{{ $t('about.heading') }}
-
+
{{ $t('tagline') }}
diff --git a/app/pages/accessibility.vue b/app/pages/accessibility.vue
index 9e0e6c9dc3..027fdef41a 100644
--- a/app/pages/accessibility.vue
+++ b/app/pages/accessibility.vue
@@ -12,9 +12,6 @@ defineOgImageComponent('Default', {
title: () => $t('a11y.title'),
description: () => $t('a11y.welcome', { app: 'npmx' }),
})
-
-const router = useRouter()
-const canGoBack = useCanGoBack()
@@ -25,15 +22,7 @@ const canGoBack = useCanGoBack()
{{ $t('a11y.title') }}
-
+
diff --git a/app/pages/blog/index.vue b/app/pages/blog/index.vue
index 07e40d2d9d..ef824f0637 100644
--- a/app/pages/blog/index.vue
+++ b/app/pages/blog/index.vue
@@ -37,7 +37,7 @@ useSeoMeta({
:authors="post.authors"
:title="post.title"
:path="post.slug"
- :excerpt="post.excerpt || post.description || 'No Excerpt Available'"
+ :excerpt="post.excerpt || post.description"
:topics="Array.isArray(post.tags) ? post.tags : placeHolder"
:published="post.date"
:index="idx"
@@ -47,7 +47,7 @@ useSeoMeta({
- No posts found.
+ {{ $t('blog.no_posts') }}
diff --git a/app/pages/compare.vue b/app/pages/compare.vue
index 5582274a60..db383e0e03 100644
--- a/app/pages/compare.vue
+++ b/app/pages/compare.vue
@@ -5,11 +5,10 @@ import FacetBarChart from '~/components/Compare/FacetBarChart.vue'
definePageMeta({
name: 'compare',
+ preserveScrollOnQuery: true,
})
const { locale } = useI18n()
-const router = useRouter()
-const canGoBack = useCanGoBack()
const { copied, copy } = useClipboard({ copiedDuring: 2000 })
const maxPackages = 4
@@ -172,15 +171,7 @@ useSeoMeta({
{{ $t('compare.packages.title') }}
-
+
{{ $t('compare.packages.tagline') }}
@@ -226,7 +217,7 @@ useSeoMeta({
{{ $t('compare.packages.section_facets') }}
/
-
- Invalid comparison URL. Use format: /diff/package/v/from...to
-
-
Go to package
+
+ /diff/{{ packageName }}/v/{{
+ $t('compare.version_invalid_url_format.from_version')
+ }}...{{ $t('compare.version_invalid_url_format.to_version') }}
+
+
{{
+ $t('compare.version_back_to_package')
+ }}
-
Comparing versions...
+
{{ $t('compare.comparing_versions_label') }}
-
Failed to compare versions
-
Back to package
+
{{ $t('compare.version_error_message') }}
+
{{
+ $t('compare.version_back_to_package')
+ }}
{
const segments = route.params.path?.filter(Boolean)
@@ -87,7 +88,7 @@ const { data: docsData, status: docsStatus } = useLazyFetch(
html: '',
toc: null,
status: 'missing' as const,
- message: 'Docs are not available for this version.',
+ message: t('package.docs.default_not_available'),
}),
},
)
@@ -104,9 +105,11 @@ const versionUrlPattern = computed(
)
const pageTitle = computed(() => {
- if (!packageName.value) return 'API Docs - npmx'
- if (!resolvedVersion.value) return `${packageName.value} docs - npmx`
- return `${packageName.value}@${resolvedVersion.value} docs - npmx`
+ if (!packageName.value) return t('package.docs.page_title')
+ if (!resolvedVersion.value) return t('package.docs.page_title_name', { name: packageName.value })
+ return t('package.docs.page_title_version', {
+ name: `${packageName.value}@${resolvedVersion.value}`,
+ })
})
useSeoMeta({
@@ -119,7 +122,7 @@ useSeoMeta({
})
defineOgImageComponent('Default', {
- title: () => `${pkg.value?.name ?? 'Package'} - Docs`,
+ title: () => t('package.docs.og_title', { name: pkg.value?.name ?? 'Package' }),
description: () => pkg.value?.license ?? '',
primaryColor: '#60a5fa',
})
@@ -156,7 +159,7 @@ const stickyStyle = computed(() => {
>
diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index 9399d90187..babd2bec69 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -211,6 +211,9 @@ const { diff: sizeDiff } = useInstallSizeDiff(packageName, resolvedVersion, pkg,
// โ Preserve the server-rendered DOM, don't flash to skeleton.
const nuxtApp = useNuxtApp()
const route = useRoute()
+// Gates template rendering only โ data fetches intentionally still run.
+// immediate is set once at mount โ skipped requests won't re-fire on navigation, leaving data permanently missing.
+const isVersionsRoute = computed(() => route.name === 'package-versions')
const hasEmptyPayload =
import.meta.client &&
nuxtApp.payload.serverRendered &&
@@ -479,7 +482,8 @@ const showSkeleton = shallowRef(false)
-
+
+
Skeleton
-
+
{{ numberFormatter.format(dependencyCount) }}
-
+
- /
-
-
+ ()
- {{
- numberFormatter.format(totalDepsCount)
- }}
- -
+ ({{ numberFormatter.format(totalDepsCount)
+ }})
+ (-)
- -
+ (-)
@@ -620,7 +624,7 @@ const showSkeleton = shallowRef(false)
-
-
+
- /
-
-
-
+
+
+ ()
+
+
+ ({{ bytesFormatter.format(installSize.totalSize)
+ }})
+
+ (-)
-
- {{ bytesFormatter.format(installSize.totalSize) }}
-
- -
@@ -765,8 +771,15 @@ const showSkeleton = shallowRef(false)
{{ $t('package.get_started.title') }}
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{
+ if (packages.length === 0) {
+ closeSelectionView()
+ }
+})
+
// Preferences (persisted to localStorage)
const {
viewMode,
@@ -660,16 +673,33 @@ onBeforeUnmount(() => {
+
+
{{ $t('search.title') }}
-
+
+
-
+
+
+
{
:disabled-sort-keys="disabledSortKeys"
search-context
@toggle-column="toggleColumn"
+ @toggle-selection="openSelectionView"
@reset-columns="resetColumns"
@clear-filter="handleClearFilter"
@clear-all-filters="clearAllFilters"
@@ -778,7 +809,7 @@ onBeforeUnmount(() => {
$t(
'filters.count.showing_paginated',
{
- pageSize: Math.min(preferredPageSize, effectiveTotal),
+ pageSize: $n(Math.min(preferredPageSize, effectiveTotal)),
count: $n(effectiveTotal),
},
effectiveTotal,
diff --git a/app/pages/settings.vue b/app/pages/settings.vue
index f2fe9db5e0..e90faf551f 100644
--- a/app/pages/settings.vue
+++ b/app/pages/settings.vue
@@ -1,8 +1,7 @@
+
+
+
+
+
+
+
+
+
+ npmx
+
+
+
+
+
+
+
+
+ {{ $t('translation_status.p1_lang', {}, { locale }) }}
+
+
+
+
+
+ {{
+ $t(
+ 'translation_status.p1_count',
+ { count: status?.sourceLocale.totalKeys ?? 0 },
+ { locale },
+ )
+ }}
+
+
+
+
+ {{ $t('translation_status.by_locale') }}
+
+
+
+
+
+
+
+
+
+ {{ $t('translation_status.guide') }}
+
+
+
+
+
+
+
+ {{ $t('translation_status.by_locale') }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ localeEntry.label }}
+ {{ localeEntry.lang }}
+
+
+ {{ $n(localeEntry.percentComplete / 100, 'percentage') }}
+
+
+
+
+
+
+
+
+
+
+
+ {{ localeEntry.missingKeys.length }}
+ {{ $t('translation_status.missing_text', {}, { locale: localeEntry.lang }) }}
+
+ {{ localeEntry.completedKeys }} / {{ localeEntry.totalKeys }}
+
+
+
+
+
+
+
+
+
+
+ {{ $t('translation_status.missing_keys', {}, { locale: localeEntry.lang }) }}
+
+
+ {{
+ copied
+ ? $t('common.copied', {}, { locale: localeEntry.lang })
+ : $t('i18n.copy_keys', {}, { locale: localeEntry.lang })
+ }}
+
+
+
+
+
+ {{ $t('i18n.edit_on_github', {}, { locale: localeEntry.lang }) }}
+
+
+
+
+ {{
+ $t('translation_status.complete_text', {}, { locale: localeEntry.lang })
+ }}
+ ๐
+
+
+
+
+
+
+
diff --git a/app/pages/~[username]/index.vue b/app/pages/~[username]/index.vue
index 0fd04b47d1..6510c736e1 100644
--- a/app/pages/~[username]/index.vue
+++ b/app/pages/~[username]/index.vue
@@ -140,7 +140,7 @@ defineOgImageComponent('Default', {
-
+
~{{ username }}
diff --git a/app/pages/~[username]/orgs.vue b/app/pages/~[username]/orgs.vue
index 138bd69139..a5128237e1 100644
--- a/app/pages/~[username]/orgs.vue
+++ b/app/pages/~[username]/orgs.vue
@@ -126,7 +126,7 @@ defineOgImageComponent('Default', {
-
+
~{{ username }}
{{ $t('user.orgs_page.title') }}
diff --git a/app/router.options.ts b/app/router.options.ts
index a6d9db7ccd..e978a5b6e2 100644
--- a/app/router.options.ts
+++ b/app/router.options.ts
@@ -1,19 +1,30 @@
import type { RouterConfig } from 'nuxt/schema'
export default {
- scrollBehavior(to, _from, savedPosition) {
+ scrollBehavior(to, from, savedPosition) {
// If the browser has a saved position (e.g. back/forward navigation), restore it
-
if (savedPosition) {
return savedPosition
}
+
+ // Scroll to top when main search query changes
+ if (to.path === '/search' && to.query.q !== from.query.q) {
+ return { left: 0, top: 0 }
+ }
+
+ // Preserve the current viewport for query-only updates on pages that opt in,
+ // such as compare where controls sync state to the URL in-place.
+ if (to.path === from.path && to.hash === from.hash && to.meta.preserveScrollOnQuery === true) {
+ return false
+ }
+
// If navigating to a hash anchor, scroll to it
if (to.hash) {
const { scrollMargin } = to.meta
return {
el: to.hash,
behavior: 'smooth',
- top: typeof scrollMargin == 'number' ? scrollMargin : 70,
+ top: typeof scrollMargin === 'number' ? scrollMargin : 70,
}
}
diff --git a/app/types/index.ts b/app/types/index.ts
index 5058830705..f736f8b329 100644
--- a/app/types/index.ts
+++ b/app/types/index.ts
@@ -10,5 +10,9 @@ declare module '#app' {
* @default 70
*/
scrollMargin?: number
+ /**
+ * preserve scroll position when only query params change on same path/hash
+ */
+ preserveScrollOnQuery?: boolean
}
}
diff --git a/app/utils/atproto/likes.ts b/app/utils/atproto/likes.ts
index 236abb9adb..c95fd20083 100644
--- a/app/utils/atproto/likes.ts
+++ b/app/utils/atproto/likes.ts
@@ -2,15 +2,12 @@ import { FetchError } from 'ofetch'
import { handleAuthError } from '~/utils/atproto/helpers'
import type { PackageLikes } from '#shared/types/social'
-export type LikeResult = { success: true; data: PackageLikes } | { success: false; error: Error }
+type LikeResult = { success: true; data: PackageLikes } | { success: false; error: Error }
/**
* Like a package via the API
*/
-export async function likePackage(
- packageName: string,
- userHandle?: string | null,
-): Promise
{
+async function likePackage(packageName: string, userHandle?: string | null): Promise {
try {
const result = await $fetch('/api/social/like', {
method: 'POST',
@@ -28,10 +25,7 @@ export async function likePackage(
/**
* Unlike a package via the API
*/
-export async function unlikePackage(
- packageName: string,
- userHandle?: string | null,
-): Promise {
+async function unlikePackage(packageName: string, userHandle?: string | null): Promise {
try {
const result = await $fetch('/api/social/like', {
method: 'DELETE',
diff --git a/app/utils/atproto/profile.ts b/app/utils/atproto/profile.ts
index 43968ea5b9..0c3ed242a4 100644
--- a/app/utils/atproto/profile.ts
+++ b/app/utils/atproto/profile.ts
@@ -1,7 +1,7 @@
import { FetchError } from 'ofetch'
import { handleAuthError } from './helpers'
-export type UpdateProfileResult = {
+type UpdateProfileResult = {
success: boolean
error?: Error
}
diff --git a/app/utils/charts.ts b/app/utils/charts.ts
index d22750aa95..12ed2c0958 100644
--- a/app/utils/charts.ts
+++ b/app/utils/charts.ts
@@ -720,3 +720,378 @@ export function applyEllipsis(text: string, maxLength = 45) {
}
return text.slice(0, maxLength) + '...'
}
+
+// a11y pattern generation
+export type SvgPatternType =
+ | 'diagonalLines'
+ | 'verticalLines'
+ | 'horizontalLines'
+ | 'crosshatch'
+ | 'dots'
+ | 'grid'
+ | 'zigzag'
+
+export type SeededSvgPatternOptions = {
+ foregroundColor?: string
+ backgroundColor?: string
+ minimumSize?: number
+ maximumSize?: number
+}
+
+export type SeededSvgPatternResult = {
+ width: number
+ height: number
+ rotation: number
+ patternType: SvgPatternType
+ contentMarkup: string
+}
+
+type NonEmptyReadonlyArray = readonly [T, ...T[]]
+
+/**
+ * Generates a deterministic 32-bit unsigned integer hash from a string.
+ *
+ * This function is based on the FNV-1a hashing algorithm. It is used to
+ * transform any string input into a stable numeric seed suitable for
+ * deterministic pseudo-random number generation.
+ *
+ * The same input string will always produce the same output number.
+ *
+ * @param value - The input string to hash.
+ * @returns A 32-bit unsigned integer hash.
+ */
+export function createSeedNumber(value: string): number {
+ let hashValue = 2166136261
+ for (let index = 0; index < value.length; index += 1) {
+ hashValue ^= value.charCodeAt(index)
+ hashValue = Math.imul(hashValue, 16777619)
+ }
+ return hashValue >>> 0
+}
+
+/**
+ * Creates a deterministic pseudo-random number generator (PRNG) based on a numeric seed.
+ *
+ * This function implements a fast, non-cryptographic PRNG similar to Mulberry32.
+ * It produces a reproducible sequence of numbers in the range [0, 1), meaning
+ * the same seed will always generate the same sequence.
+ *
+ * The returned function maintains internal state and should be called repeatedly
+ * to obtain successive pseudo-random values.
+ *
+ * @param seedNumber - 32 bit integer seed
+ * @returns A function that returns a pseudo rand number between 0 (inclusive) and 1 (exclusive).
+ *
+ * @example
+ * const random = createDeterministicRandomGenerator(12345)
+ * const a = random() // always the same for seed 12345
+ * const b = random()
+ */
+function createDeterministicRandomGenerator(seedNumber: number): () => number {
+ // Ensure the seed is treated as an unsigned 32 bit int
+ let state = seedNumber >>> 0
+
+ return function generateRandomNumber(): number {
+ // Advance internal state using a constant
+ state += 0x6d2b79f5
+ let intermediateValue = state
+
+ // First mixing step:
+ // - XOR with a right shifted version of itself
+ // - Multiply with a derived value to further scramble bits
+ intermediateValue = Math.imul(
+ intermediateValue ^ (intermediateValue >>> 15),
+ intermediateValue | 1,
+ )
+
+ // Second mixing step:
+ // - Combine current value with another transformed version of itself
+ // - Multiply again to increase entropy and spread bits
+ intermediateValue ^=
+ intermediateValue +
+ Math.imul(intermediateValue ^ (intermediateValue >>> 7), intermediateValue | 61)
+
+ // Final step:
+ // - Final XOR with shifted value for additional scrambling
+ // - Convert to unsigned 32 bit int
+ // - Normalize to a float in range 0 to 1
+ return ((intermediateValue ^ (intermediateValue >>> 14)) >>> 0) / 4294967296
+ }
+}
+
+function pickValue(values: NonEmptyReadonlyArray, generateRandomNumber: () => number): T {
+ const selectedIndex = Math.floor(generateRandomNumber() * values.length)
+ const selectedValue = values[selectedIndex]
+ if (selectedValue === undefined) {
+ throw new Error('pickValue requires a non-empty array')
+ }
+ return selectedValue
+}
+
+function escapeSvgAttribute(value: string): string {
+ return value
+ .replace(/&/g, '&')
+ .replace(/"/g, '"')
+ .replace(//g, '>')
+}
+
+function createLineElement(
+ x1: number,
+ y1: number,
+ x2: number,
+ y2: number,
+ stroke: string,
+ strokeWidth: number,
+ opacity: number,
+): string {
+ const safeStroke = escapeSvgAttribute(stroke)
+ return ``
+}
+
+function createCircleElement(
+ centerX: number,
+ centerY: number,
+ radius: number,
+ fill: string,
+ opacity: number,
+): string {
+ const safeFill = escapeSvgAttribute(fill)
+ return ``
+}
+
+function createPathElement(
+ pathData: string,
+ fill: string,
+ stroke: string,
+ strokeWidth: number,
+ opacity: number,
+): string {
+ const safeFill = escapeSvgAttribute(fill)
+ const safeStroke = escapeSvgAttribute(stroke)
+ return ``
+}
+
+function toNonEmptyReadonlyArray(values: readonly T[]): NonEmptyReadonlyArray {
+ if (values.length === 0) {
+ throw new Error('Expected a non-empty array')
+ }
+
+ return values as NonEmptyReadonlyArray
+}
+
+export function createSeededSvgPattern(
+ seed: string | number,
+ options?: SeededSvgPatternOptions,
+): SeededSvgPatternResult {
+ const normalizedSeed = String(seed)
+ const foregroundColor = options?.foregroundColor ?? '#111111'
+ const backgroundColor = options?.backgroundColor ?? 'transparent'
+ const minimumSize = options?.minimumSize ?? 8
+ const maximumSize = options?.maximumSize ?? 20
+
+ if (
+ !Number.isFinite(minimumSize) ||
+ !Number.isFinite(maximumSize) ||
+ minimumSize <= 0 ||
+ maximumSize <= 0 ||
+ minimumSize > maximumSize
+ ) {
+ throw new RangeError(
+ 'minimumSize and maximumSize must be finite, positive, and minimumSize must not exceed maximumSize',
+ )
+ }
+
+ const seedNumber = createSeedNumber(normalizedSeed)
+ const generateRandomNumber = createDeterministicRandomGenerator(seedNumber)
+
+ const patternType = pickValue(
+ [
+ 'diagonalLines',
+ 'verticalLines',
+ 'horizontalLines',
+ 'crosshatch',
+ 'dots',
+ 'grid',
+ 'zigzag',
+ ] as const,
+ generateRandomNumber,
+ )
+
+ const availableSizes: number[] = []
+ for (let size = minimumSize; size <= maximumSize; size += 2) {
+ availableSizes.push(size)
+ }
+
+ const tileSize = pickValue(toNonEmptyReadonlyArray(availableSizes), generateRandomNumber)
+ const gap = pickValue([2, 3, 4, 5, 6] as const, generateRandomNumber)
+ const strokeWidth = pickValue([1, 1.25, 1.5, 1.75, 2] as const, generateRandomNumber)
+ const opacity = pickValue([0.7, 0.8, 0.9, 1] as const, generateRandomNumber)
+ const rotation = pickValue([0, 15, 30, 45, 60, 75, 90, 120, 135] as const, generateRandomNumber)
+
+ let contentMarkup = ''
+
+ switch (patternType) {
+ case 'diagonalLines': {
+ contentMarkup = [
+ createLineElement(
+ -tileSize,
+ tileSize,
+ tileSize,
+ -tileSize,
+ foregroundColor,
+ strokeWidth,
+ opacity,
+ ),
+ createLineElement(0, tileSize, tileSize, 0, foregroundColor, strokeWidth, opacity),
+ createLineElement(0, tileSize * 2, tileSize * 2, 0, foregroundColor, strokeWidth, opacity),
+ ].join('')
+ break
+ }
+
+ case 'verticalLines': {
+ const positions = [0, gap + strokeWidth, (gap + strokeWidth) * 2]
+ contentMarkup = positions
+ .map(x => createLineElement(x, 0, x, tileSize, foregroundColor, strokeWidth, opacity))
+ .join('')
+ break
+ }
+
+ case 'horizontalLines': {
+ const positions = [0, gap + strokeWidth, (gap + strokeWidth) * 2]
+ contentMarkup = positions
+ .map(y => createLineElement(0, y, tileSize, y, foregroundColor, strokeWidth, opacity))
+ .join('')
+ break
+ }
+
+ case 'crosshatch': {
+ contentMarkup = [
+ createLineElement(
+ 0,
+ tileSize / 2,
+ tileSize,
+ tileSize / 2,
+ foregroundColor,
+ strokeWidth,
+ opacity,
+ ),
+ createLineElement(
+ tileSize / 2,
+ 0,
+ tileSize / 2,
+ tileSize,
+ foregroundColor,
+ strokeWidth,
+ opacity,
+ ),
+ createLineElement(0, 0, tileSize, tileSize, foregroundColor, strokeWidth * 0.75, opacity),
+ createLineElement(tileSize, 0, 0, tileSize, foregroundColor, strokeWidth * 0.75, opacity),
+ ].join('')
+ break
+ }
+
+ case 'dots': {
+ const radius = Math.max(1, tileSize / 12)
+ contentMarkup = [
+ createCircleElement(tileSize / 4, tileSize / 4, radius, foregroundColor, opacity),
+ createCircleElement((tileSize * 3) / 4, tileSize / 4, radius, foregroundColor, opacity),
+ createCircleElement(tileSize / 4, (tileSize * 3) / 4, radius, foregroundColor, opacity),
+ createCircleElement(
+ (tileSize * 3) / 4,
+ (tileSize * 3) / 4,
+ radius,
+ foregroundColor,
+ opacity,
+ ),
+ ].join('')
+ break
+ }
+
+ case 'grid': {
+ contentMarkup = [
+ createLineElement(0, 0, tileSize, 0, foregroundColor, strokeWidth, opacity),
+ createLineElement(0, 0, 0, tileSize, foregroundColor, strokeWidth, opacity),
+ createLineElement(
+ 0,
+ tileSize / 2,
+ tileSize,
+ tileSize / 2,
+ foregroundColor,
+ strokeWidth * 0.8,
+ opacity,
+ ),
+ createLineElement(
+ tileSize / 2,
+ 0,
+ tileSize / 2,
+ tileSize,
+ foregroundColor,
+ strokeWidth * 0.8,
+ opacity,
+ ),
+ ].join('')
+ break
+ }
+
+ case 'zigzag': {
+ const midPoint = tileSize / 2
+ const pathData = `M 0 ${midPoint} L ${tileSize / 4} 0 L ${tileSize / 2} ${midPoint} L ${(tileSize * 3) / 4} ${tileSize} L ${tileSize} ${midPoint}`
+ contentMarkup = createPathElement(pathData, 'none', foregroundColor, strokeWidth, opacity)
+ break
+ }
+ }
+
+ if (backgroundColor !== 'transparent') {
+ const safeBackgroundColor = escapeSvgAttribute(backgroundColor)
+ contentMarkup = `${contentMarkup}`
+ }
+
+ return {
+ width: tileSize,
+ height: tileSize,
+ rotation,
+ patternType,
+ contentMarkup,
+ }
+}
+
+export type ChartPatternSlotProps = {
+ id: string
+ seed: string | number
+ color?: string
+ foregroundColor: string
+ fallbackColor: string
+ maxSize: number
+ minSize: number
+}
+
+// Equivalent of the PatternSlot.vue component, to be used inside tooltip.customFormat in chart configs
+export function createChartPatternSlotMarkup({
+ id,
+ seed,
+ color,
+ foregroundColor,
+ fallbackColor,
+ maxSize,
+ minSize,
+}: ChartPatternSlotProps) {
+ const pattern = createSeededSvgPattern(seed, {
+ foregroundColor,
+ backgroundColor: color ?? fallbackColor,
+ minimumSize: minSize,
+ maximumSize: maxSize,
+ })
+
+ return `
+
+ ${pattern.contentMarkup}
+
+ `
+}
diff --git a/app/utils/file-icons.ts b/app/utils/file-icons.ts
index e4d510c1af..6647e43a0e 100644
--- a/app/utils/file-icons.ts
+++ b/app/utils/file-icons.ts
@@ -146,6 +146,7 @@ export const FILENAME_ICONS: Record = {
'yarn.lock': 'vscode-icons-file-type-yarn',
'.yarnrc': 'vscode-icons-file-type-yarn',
'.yarnrc.yml': 'vscode-icons-file-type-yarn',
+ 'bun.lock': 'vscode-icons-file-type-bun',
'bun.lockb': 'vscode-icons-file-type-bun',
'bunfig.toml': 'vscode-icons-file-type-bun',
'deno.json': 'vscode-icons-file-type-deno',
diff --git a/app/utils/versions.ts b/app/utils/versions.ts
index 88f3c4bc33..e2aa8741a7 100644
--- a/app/utils/versions.ts
+++ b/app/utils/versions.ts
@@ -51,6 +51,73 @@ export function getPrereleaseChannel(version: string): string {
return match ? match[1]!.toLowerCase() : ''
}
+/**
+ * Priority order for well-known dist-tags.
+ * Lower number = higher priority in display order.
+ * Unknown tags fall back to Infinity and are sorted by publish date descending.
+ */
+export const TAG_PRIORITY: Record = {
+ latest: 0,
+ stable: 1,
+ rc: 2,
+ beta: 3,
+ next: 4,
+ alpha: 5,
+ canary: 6,
+ nightly: 7,
+ experimental: 8,
+ legacy: 9,
+}
+
+/**
+ * Get the display priority for a dist-tag.
+ * Uses fuzzy matching so e.g. "v2-legacy" matches "legacy".
+ * @param tag - The tag name (e.g., "beta", "v2-legacy")
+ * @returns Numeric priority (lower = higher priority); Infinity for unknown tags
+ */
+export function getTagPriority(tag: string | undefined): number {
+ if (!tag) return Infinity
+ for (const [key, priority] of Object.entries(TAG_PRIORITY)) {
+ if (tag.toLowerCase().includes(key)) return priority
+ }
+ return Infinity
+}
+
+/**
+ * Compare two tagged version rows for display ordering.
+ * Sorts by minimum tag priority first; falls back to publish date descending.
+ * @param rowA - First row
+ * @param rowB - Second row
+ * @param versionTimes - Map of version string to ISO publish time
+ * @returns Negative/zero/positive comparator value
+ */
+export function compareTagRows(
+ rowA: TaggedVersionRow,
+ rowB: TaggedVersionRow,
+ versionTimes: Record,
+): number {
+ const priorityA = Math.min(...rowA.tags.map(getTagPriority))
+ const priorityB = Math.min(...rowB.tags.map(getTagPriority))
+ if (priorityA !== priorityB) return priorityA - priorityB
+ const timeA = versionTimes[rowA.version] ?? ''
+ const timeB = versionTimes[rowB.version] ?? ''
+ return timeB.localeCompare(timeA)
+}
+
+/**
+ * Compare two version group keys for display ordering.
+ * Sorts by major descending, then by minor descending for 0.x groups.
+ * @param a - Group key (e.g. "1", "0.9")
+ * @param b - Group key (e.g. "2", "0.10")
+ * @returns Negative/zero/positive comparator value
+ */
+export function compareVersionGroupKeys(a: string, b: string): number {
+ const [majorA, minorA] = a.split('.').map(Number)
+ const [majorB, minorB] = b.split('.').map(Number)
+ if (majorA !== majorB) return (majorB ?? 0) - (majorA ?? 0)
+ return (minorB ?? -1) - (minorA ?? -1)
+}
+
/**
* Sort tags with 'latest' first, then alphabetically
* @param tags - Array of tag names
diff --git a/cli/package.json b/cli/package.json
index 1fc037477b..a924c17e1a 100644
--- a/cli/package.json
+++ b/cli/package.json
@@ -2,26 +2,26 @@
"name": "npmx-connector",
"version": "0.0.1",
"description": "Local connector for npmx.dev - enables authenticated npm operations from the web UI",
+ "homepage": "https://npmx.dev",
+ "bugs": {
+ "url": "https://github.com/npmx-dev/npmx.dev/issues"
+ },
"license": "MIT",
- "type": "module",
"repository": {
"type": "git",
"url": "git+https://github.com/npmx-dev/npmx.dev.git",
"directory": "cli"
},
- "bugs": {
- "url": "https://github.com/npmx-dev/npmx.dev/issues"
- },
- "homepage": "https://npmx.dev",
"bin": {
"npmx-connector": "./dist/cli.mjs"
},
- "exports": {
- ".": "./dist/index.mjs"
- },
"files": [
"dist"
],
+ "type": "module",
+ "exports": {
+ ".": "./dist/index.mjs"
+ },
"scripts": {
"build": "tsdown",
"dev": "NPMX_CLI_DEV=true node src/cli.ts",
@@ -40,9 +40,9 @@
"validate-npm-package-name": "^7.0.2"
},
"devDependencies": {
- "@types/node": "24.11.0",
+ "@types/node": "24.12.0",
"@types/validate-npm-package-name": "4.0.2",
- "tsdown": "0.20.3",
+ "tsdown": "0.21.4",
"typescript": "5.9.3"
},
"engines": {
diff --git a/cli/src/cli.ts b/cli/src/cli.ts
index d648bff193..e122cec9f2 100644
--- a/cli/src/cli.ts
+++ b/cli/src/cli.ts
@@ -6,7 +6,7 @@ import * as p from '@clack/prompts'
import { defineCommand, runMain } from 'citty'
import { serve } from 'srvx'
import { createConnectorApp, generateToken, CONNECTOR_VERSION } from './server.ts'
-import { getNpmUser } from './npm-client.ts'
+import { getNpmUser, NPM_REGISTRY_URL } from './npm-client.ts'
import { initLogger, showToken, logInfo, logWarning, logError } from './logger.ts'
const DEFAULT_PORT = 31415
@@ -15,7 +15,7 @@ const DEV_FRONTEND_URL = 'http://127.0.0.1:3000/'
async function runNpmLogin(): Promise {
return new Promise(resolve => {
- const child = spawn('npm', ['login'], {
+ const child = spawn('npm', ['login', `--registry=${NPM_REGISTRY_URL}`], {
stdio: 'inherit',
shell: true,
})
diff --git a/cli/src/npm-client.ts b/cli/src/npm-client.ts
index a3f61a5c10..8448413b52 100644
--- a/cli/src/npm-client.ts
+++ b/cli/src/npm-client.ts
@@ -10,6 +10,16 @@ import { PackageNameSchema, UsernameSchema, OrgNameSchema, ScopeTeamSchema } fro
import { logCommand, logSuccess, logError, logDebug } from './logger.ts'
const execFileAsync = promisify(execFile)
+export const NPM_REGISTRY_URL = 'https://registry.npmjs.org/'
+
+function createNpmEnv(overrides: Record = {}): Record {
+ return {
+ ...process.env,
+ ...overrides,
+ FORCE_COLOR: '0',
+ npm_config_registry: NPM_REGISTRY_URL,
+ }
+}
/**
* Validates an npm package name using the official npm validation package
@@ -191,10 +201,7 @@ async function execNpmInteractive(
let authUrlTimeout: ReturnType | null = null
let authUrlTimedOut = false
- const env: Record = {
- ...(process.env as Record),
- FORCE_COLOR: '0',
- }
+ const env = createNpmEnv()
// When openUrls is false, tell npm not to open the browser.
// npm still prints the auth URL and polls doneUrl
@@ -330,7 +337,7 @@ async function execNpm(args: string[], options: ExecNpmOptions = {}): Promise
: undefined
const git = Git()
-export async function getGitInfo() {
+async function getGitInfo() {
let branch
try {
branch = gitBranch || (await git.revparse(['--abbrev-ref', 'HEAD']))
diff --git a/config/i18n.ts b/config/i18n.ts
index aca626d74d..5993b7551a 100644
--- a/config/i18n.ts
+++ b/config/i18n.ts
@@ -358,9 +358,9 @@ const locales: (LocaleObjectData | (Omit & { code: str
function buildLocales() {
const useLocales = Object.values(locales).reduce((acc, data) => {
- const variants = countryLocaleVariants[data.code]
- if (variants) {
- variants.forEach(l => {
+ const localeVariants = countryLocaleVariants[data.code]
+ if (localeVariants) {
+ localeVariants.forEach(l => {
const entry: LocaleObjectData = {
...data,
code: l.code,
@@ -406,8 +406,10 @@ export const datetimeFormats = Object.values(currentLocales).reduce((acc, data)
}, {} as DateTimeFormats)
export const numberFormats = Object.values(currentLocales).reduce((acc, data) => {
- if (data.numberFormats) {
- acc[data.code] = { ...data.numberFormats }
+ const numberFormatsArray = data.numberFormats
+ if (numberFormatsArray) {
+ acc[data.code] = { ...numberFormatsArray }
+
delete data.numberFormats
} else {
acc[data.code] = {
diff --git a/docs/app/components/BadgeGenerator.vue b/docs/app/components/BadgeGenerator.vue
new file mode 100644
index 0000000000..8d36371233
--- /dev/null
+++ b/docs/app/components/BadgeGenerator.vue
@@ -0,0 +1,94 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
![Badge Preview]()
+
Invalid
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
![Badge Preview]()
+
+ {{ !isInputValid ? 'Invalid Parameters' : 'Not Found' }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ #
+
+
+
+
+
+
+
+
+ #
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+