chore: release v0.23.0

.github/workflows/deploy-canary.yml

@@ -33,6 +33,12 @@ jobs:
           # Version of the underlying sfw to use (no `v` prefix): https://github.com/SocketDev/sfw-free/releases
           firewall-version: 1.12.0
 
+      # Lunaria needs the full git history, but `vercel deploy` uploads the source without `.git`,
+      # so generate `dist/lunaria/status.json` here and upload it with the source instead.
+      # https://github.com/npmx-dev/npmx.dev/issues/2785
+      - run: sfw vp install --filter . --ignore-scripts
+      - run: vp run build:lunaria
+
       - run: sfw vp i -g vercel@54.12.2
       - run: vercel deploy --target=canary
         env:

.github/workflows/enforce-release-source.yml

@@ -10,10 +10,6 @@ on:
       - synchronize
       - edited
 
-concurrency:
-  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
-  cancel-in-progress: false
-
 permissions: {}
 
 jobs:

.github/zizmor.yml

@@ -5,6 +5,12 @@ rules:
     ignore:
       # lunariajs/action has no tag refs; keep the branch commit hash-pinned.
       - lunaria.yml:40
+  concurrency-limits:
+    ignore:
+      # Stateless, idempotent check. Concurrency groups cancel superseded pending
+      # runs even with `cancel-in-progress: false`, which would leave a failed
+      # check on the release PR's head commit (`main`).
+      - enforce-release-source.yml
   dangerous-triggers:
     ignore:
       - enforce-release-source.yml

CONTRIBUTING.md

@@ -689,7 +689,7 @@ Use vue-i18n's built-in formatters for locale-aware formatting:
 Write unit tests for core functionality using Vitest:
 
 ```typescript
-import { describe, it, expect } from 'vitest'
+import { describe, it, expect } from 'vite-plus/test'
 
 describe('featureName', () => {
   it('should handle expected case', () => {

app/assets/main.css

@@ -395,3 +395,9 @@ html:has(dialog:modal) {
   overflow: hidden;
   scrollbar-gutter: stable;
 }
+
+/* Match main annotator toolbar backdrop when group buttons are disabled
+   Override the background color set by vue-data-ui */
+.vue-ui-pen-and-paper-group-actions {
+  background-color: transparent !important;
+}

app/components/Changelog/ErrorMsg.vue

@@ -1,16 +1,31 @@
 <script setup lang="ts">
-const { pkgName, changelogLink, viewOnGit } = defineProps<{
+import type { NuxtError } from 'nuxt/app'
+
+const { pkgName, changelogLink, viewOnGit, error } = defineProps<{
   pkgName?: string
   changelogLink: string
   viewOnGit: string
+  error?: NuxtError
 }>()
 </script>
 
 <template>
   <div class="w-full flex items-center flex-col gap-2 mt-4">
-    <p>{{ $t('changelog.error.p1', { package: pkgName }) }}</p>
-    <i18n-t keypath="changelog.error.p2" tag="p" #viewon>
-      <LinkBase :to="changelogLink" class="lowercase">{{ viewOnGit }}</LinkBase>
-    </i18n-t>
+    <template v-if="isUnghRateLimitError(error)">
+      <p>{{ $t('changelog.ungh.rate_limit') }}</p>
+      <p>{{ $t('changelog.ungh.hint') }}</p>
+      <LinkBase
+        variant="button-secondary"
+        to="https://github.com/apps/ungh-app"
+        classicon="i-simple-icons:github"
+        >{{ $t('changelog.ungh.install') }}</LinkBase
+      >
+    </template>
+    <template v-else>
+      <p>{{ $t('changelog.error.p1', { package: pkgName }) }}</p>
+      <i18n-t keypath="changelog.error.p2" tag="p" #viewon>
+        <LinkBase :to="changelogLink" class="lowercase">{{ viewOnGit }}</LinkBase>
+      </i18n-t>
+    </template>
   </div>
 </template>

app/components/Changelog/Releases.vue

@@ -96,5 +96,5 @@ prefetchComponents('ChangelogCard')
       :host="info.host"
     />
   </div>
-  <slot v-else-if="error" name="error"></slot>
+  <slot v-else-if="error" name="error" :error></slot>
 </template>

app/components/Chart/AnnotatorIcon.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { getAnnotatorIcon, getAnnotatorStyle, type AnnotatorSlotName } from '~/utils/charts'
+
+const props = defineProps<{
+  slotName: AnnotatorSlotName
+  slotProps?: unknown
+}>()
+
+const icon = computed(() => getAnnotatorIcon(props.slotName, props.slotProps))
+const style = computed(() => getAnnotatorStyle(props.slotName, props.slotProps))
+</script>
+
+<template>
+  <span
+    v-if="icon"
+    class="w-6 h-6"
+    :class="[icon, slotName === 'annotator-action-color' ? null : 'text-fg-subtle']"
+    :style="style"
+    aria-hidden="true"
+  />
+</template>

app/components/Chart/FullscreenIcon.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+defineProps<{
+  isFullscreen: boolean
+}>()
+</script>
+
+<template>
+  <span
+    class="w-6 h-6 text-fg-subtle pointer-events-none"
+    :class="isFullscreen ? 'i-lucide:minimize' : 'i-lucide:maximize'"
+    aria-hidden="true"
+  />
+</template>

app/components/Compare/FacetBarChart.vue

@@ -26,8 +26,10 @@ import('vue-data-ui/style.css')
 const props = defineProps<{
   values: (FacetValue | null | undefined)[]
   packages: string[]
+  packagesData: ReadonlyArray<PackageComparisonData | null>
   label: string
   description: string
+  facetId?: string
   facetLoading?: boolean
 }>()
 
@@ -77,14 +79,47 @@ const isDarkMode = computed(() => resolvedMode.value === 'dark')
 
 const dataset = computed<VueUiHorizontalBarDatasetItem[]>(() => {
   if (props.facetLoading) return []
-  return props.packages.map((name, index) => {
+
+  const omitVersion = props.facetId ? shouldHideFacetInVersionComparison(props.facetId) : false
+
+  if (!omitVersion) {
+    // Version-specific facet: keep one bar per entry (with version in label)
+    return props.packages.flatMap((spec, index) => {
+      const rawValue = props.values[index]?.raw
+      const packageData = props.packagesData[index]
+      if (!packageData) return []
+      const { name, displayName } = getPackageDisplayInfo(packageData, spec)
+
+      return [
+        {
+          name: insertLineBreaks(applyEllipsis(displayName)),
+          value: typeof rawValue === 'number' ? rawValue : 0,
+          color: isListedFramework(name) ? getFrameworkColor(name) : undefined,
+          formattedValue: props.values[index]?.display,
+        },
+      ]
+    })
+  }
+
+  // Package-level facet: one bar per unique package name
+  const seen = new Set<string>()
+  return props.packages.flatMap((spec, index) => {
+    const packageData = props.packagesData[index]
+    if (!packageData) return []
+
+    const { name } = getPackageDisplayInfo(packageData, spec)
+    if (seen.has(name)) return []
+    seen.add(name)
+
     const rawValue = props.values[index]?.raw
-    return {
-      name: insertLineBreaks(applyEllipsis(name)),
-      value: typeof rawValue === 'number' ? rawValue : 0,
-      color: isListedFramework(name) ? getFrameworkColor(name) : undefined,
-      formattedValue: props.values[index]?.display,
-    }
+    return [
+      {
+        name: insertLineBreaks(applyEllipsis(name)),
+        value: typeof rawValue === 'number' ? rawValue : 0,
+        color: isListedFramework(name) ? getFrameworkColor(name) : undefined,
+        formattedValue: props.values[index]?.display,
+      },
+    ]
   })
 })
 
@@ -117,14 +152,15 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
       buttons: {
         tooltip: false,
         pdf: false,
-        fullscreen: false,
+        fullscreen: true,
         sort: false,
         annotator: false,
         table: false,
         csv: false,
         altCopy: true,
       },
       buttonTitles: {
+        fullscreen: $t('package.trends.toggle_fullscreen'),
         img: $t('package.trends.download_file', { fileType: 'PNG' }),
         svg: $t('package.trends.download_file', { fileType: 'SVG' }),
         altCopy: $t('package.trends.copy_alt.button_label'),
@@ -320,6 +356,9 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
           <ChartCopyPngButton :copied="copiedPng" :copying="isCopyingPng" @click="copyChartPng" />
         </template>
 
+        <template #optionFullscreen="{ isFullscreen }">
+          <ChartFullscreenIcon :is-fullscreen="isFullscreen" />
+        </template>
         <template #optionImg>
           <span class="text-fg-subtle font-mono pointer-events-none">PNG</span>
         </template>

app/components/Compare/FacetScatterChart.vue

@@ -8,7 +8,7 @@ import {
   type VueUiScatterSeries,
 } from 'vue-data-ui/vue-ui-scatter'
 import { buildCompareScatterChartDataset } from '~/utils/compare-scatter-chart'
-import { copyAltTextForCompareScatterChart } from '~/utils/charts'
+import { CHART_ANNOTATOR_SLOTS, copyAltTextForCompareScatterChart } from '~/utils/charts'
 import { useColors } from '~/composables/useColors'
 import { downloadFileLink } from '~/utils/download'
 import { useCopyChartPng } from '~/composables/useCopyChartPng'
@@ -56,11 +56,19 @@ const isDarkMode = computed(() => resolvedMode.value === 'dark')
 
 const { facetLabels } = useFacetSelection()
 
+const isVersionComparisonComputed = computed(() => isVersionComparison(props.packages))
+
 const chartableFacets = computed(() =>
   (
     Object.entries(facetLabels.value) as [
       ComparisonFacet,
-      { label: string; description: string; chartable_scatter: boolean },
+      {
+        label: string
+        description: string
+        chartable: boolean
+        chartable_scatter: boolean
+        formatter?: ((value: number) => string) | undefined
+      },
     ][]
   )
     .map(([name, facet]) => ({
@@ -69,10 +77,18 @@ const chartableFacets = computed(() =>
       description: facet.description,
       chartable: facet.chartable_scatter,
     }))
-    .filter(facet => facet.chartable),
+    .filter(facet => {
+      if (!facet.chartable) return false
+      if (isVersionComparisonComputed.value && shouldHideFacetInVersionComparison(facet.name)) {
+        return false
+      }
+      return true
+    }),
 )
 
-const selectedFacetX = ref<ComparisonFacet>('downloads')
+const selectedFacetX = ref<ComparisonFacet>(
+  isVersionComparisonComputed.value ? 'dependencies' : 'downloads',
+)
 const selectedFacetY = ref<ComparisonFacet>('installSize')
 
 const dataset = computed<VueUiScatterDatasetItem[]>(() =>
@@ -125,12 +141,13 @@ const config = computed<VueUiScatterConfig>(() => {
       buttons: {
         tooltip: false,
         pdf: false,
-        fullscreen: false,
+        fullscreen: true,
         table: false,
         csv: false,
         altCopy: true,
       },
       buttonTitles: {
+        fullscreen: $t('package.trends.toggle_fullscreen'),
         csv: $t('package.trends.download_file', { fileType: 'CSV' }),
         img: $t('package.trends.download_file', { fileType: 'PNG' }),
         svg: $t('package.trends.download_file', { fileType: 'SVG' }),
@@ -465,78 +482,17 @@ onMounted(async () => {
                 @click="copyChartPng"
               />
             </template>
+            <template #optionFullscreen="{ isFullscreen }">
+              <ChartFullscreenIcon :is-fullscreen="isFullscreen" />
+            </template>
             <template #optionImg>
               <span class="text-fg-subtle font-mono pointer-events-none">PNG</span>
             </template>
             <template #optionSvg>
               <span class="text-fg-subtle font-mono pointer-events-none">SVG</span>
             </template>
-            <template #annotator-action-close>
-              <span
-                class="i-lucide:x w-6 h-6 text-fg-subtle"
-                style="pointer-events: none"
-                aria-hidden="true"
-              />
-            </template>
-            <template #annotator-action-color="{ color }">
-              <span class="i-lucide:palette w-6 h-6" :style="{ color }" aria-hidden="true" />
-            </template>
-            <template #annotator-action-draw="{ mode }">
-              <span
-                v-if="mode === 'arrow'"
-                class="i-lucide:move-up-right text-fg-subtle w-6 h-6"
-                aria-hidden="true"
-              />
-              <span
-                v-if="mode === 'text'"
-                class="i-lucide:type text-fg-subtle w-6 h-6"
-                aria-hidden="true"
-              />
-              <span
-                v-if="mode === 'line'"
-                class="i-lucide:pen-line text-fg-subtle w-6 h-6"
-                aria-hidden="true"
-              />
-              <span
-                v-if="mode === 'draw'"
-                class="i-lucide:line-squiggle text-fg-subtle w-6 h-6"
-                aria-hidden="true"
-              />
-            </template>
-            <template #annotator-action-undo>
-              <span
-                class="i-lucide:undo-2 w-6 h-6 text-fg-subtle"
-                style="pointer-events: none"
-                aria-hidden="true"
-              />
-            </template>
-            <template #annotator-action-redo>
-              <span
-                class="i-lucide:redo-2 w-6 h-6 text-fg-subtle"
-                style="pointer-events: none"
-                aria-hidden="true"
-              />
-            </template>
-            <template #annotator-action-delete>
-              <span
-                class="i-lucide:trash w-6 h-6 text-fg-subtle"
-                style="pointer-events: none"
-                aria-hidden="true"
-              />
-            </template>
-            <template #optionAnnotator="{ isAnnotator }">
-              <span
-                v-if="isAnnotator"
-                class="i-lucide:pen-off w-6 h-6 text-fg-subtle"
-                style="pointer-events: none"
-                aria-hidden="true"
-              />
-              <span
-                v-else
-                class="i-lucide:pen w-6 h-6 text-fg-subtle"
-                style="pointer-events: none"
-                aria-hidden="true"
-              />
+            <template v-for="slotName in CHART_ANNOTATOR_SLOTS" #[slotName]="slotProps">
+              <ChartAnnotatorIcon :slot-name="slotName" :slot-props="slotProps" />
             </template>
             <template #optionAltCopy>
               <span