Merge branch 'main' into feat/flag-git-https-dependencies

Author: serhalp

.storybook/main.ts

@@ -8,10 +8,10 @@ const config = {
   features: {
     backgrounds: false,
   },
-  async viteFinal(config) {
-    config.plugins ??= []
+  async viteFinal(newConfig) {
+    newConfig.plugins ??= []
 
-    config.plugins.push({
+    newConfig.plugins.push({
       name: 'ignore-internals',
       transform(_, id) {
         if (id.includes('/app/pages/blog/') && id.endsWith('.md')) {
@@ -23,7 +23,7 @@ const config = {
     // vue-docgen-api can crash on components that import types from other
     // .vue files (it tries to parse the SFC with @babel/parser as plain TS).
     // This wrapper catches those errors so the build doesn't fail.
-    const docgenPlugin = config.plugins?.find(
+    const docgenPlugin = newConfig.plugins?.find(
       (p): p is Extract<typeof p, { name: string }> =>
         !!p && typeof p === 'object' && 'name' in p && p.name === 'storybook:vue-docgen-plugin',
     )
@@ -48,7 +48,7 @@ const config = {
       }
     }
 
-    return config
+    return newConfig
   },
 } satisfies StorybookConfig
 

app/assets/main.css

@@ -114,7 +114,7 @@
 
   --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-green: oklch(0.49 0.15 161.08);
   --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);

app/components/Alert.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+interface Props {
+  variant: 'warning' | 'error'
+  title?: string
+}
+
+defineProps<Props>()
+
+const WRAPPER_CLASSES: Record<Props['variant'], string> = {
+  warning: 'border-amber-400/20 bg-amber-500/8',
+  error: 'border-red-400/20 bg-red-500/8',
+}
+
+const TITLE_CLASSES: Record<Props['variant'], string> = {
+  warning: 'text-amber-800 dark:text-amber-300',
+  error: 'text-red-800 dark:text-red-300',
+}
+
+const BODY_CLASSES: Record<Props['variant'], string> = {
+  warning: 'text-amber-700 dark:text-amber-400',
+  error: 'text-red-700 dark:text-red-400',
+}
+
+const ROLES: Record<Props['variant'], 'status' | 'alert'> = {
+  warning: 'status',
+  error: 'alert',
+}
+</script>
+
+<template>
+  <div
+    :role="ROLES[variant]"
+    class="border rounded-md px-3 py-2.5"
+    :class="WRAPPER_CLASSES[variant]"
+  >
+    <p v-if="title" class="font-semibold mb-1" :class="TITLE_CLASSES[variant]">{{ title }}</p>
+    <div class="text-xs" :class="BODY_CLASSES[variant]">
+      <slot />
+    </div>
+  </div>
+</template>

app/components/AppFooter.vue

@@ -88,13 +88,21 @@ const closeModal = () => modalRef.value?.close?.()
               </p>
               <ul class="mb-8 flex flex-col gap-2">
                 <li class="flex gap-2 items-center">
-                  <kbd class="kbd">.</kbd>
-                  <span>{{ $t('shortcuts.open_code_view') }}</span>
+                  <kbd class="kbd">m</kbd>
+                  <span>{{ $t('shortcuts.open_main') }}</span>
                 </li>
                 <li class="flex gap-2 items-center">
                   <kbd class="kbd">d</kbd>
                   <span>{{ $t('shortcuts.open_docs') }}</span>
                 </li>
+                <li class="flex gap-2 items-center">
+                  <kbd class="kbd">.</kbd>
+                  <span>{{ $t('shortcuts.open_code_view') }}</span>
+                </li>
+                <li class="flex gap-2 items-center">
+                  <kbd class="kbd">f</kbd>
+                  <span>{{ $t('shortcuts.open_diff') }}</span>
+                </li>
                 <li class="flex gap-2 items-center">
                   <kbd class="kbd">c</kbd>
                   <span>{{ $t('shortcuts.compare_from_package') }}</span>

app/components/BuildEnvironment.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import type { BuildInfo } from '#shared/types'
-
 const { footer = false, buildInfo: buildInfoProp } = defineProps<{
   footer?: boolean
   buildInfo?: BuildInfo

app/components/Code/DirectoryListing.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { PackageFileTree } from '#shared/types'
 import type { RouteLocationRaw } from 'vue-router'
 import type { RouteNamedMap } from 'vue-router/auto-routes'
 import { ADDITIONAL_ICONS, getFileIcon } from '~/utils/file-icons'

app/components/Code/FileTree.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { PackageFileTree } from '#shared/types'
 import type { RouteLocationRaw } from 'vue-router'
 import type { RouteNamedMap } from 'vue-router/auto-routes'
 import { ADDITIONAL_ICONS, getFileIcon } from '~/utils/file-icons'

app/components/Code/MobileTreeDrawer.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { PackageFileTree } from '#shared/types'
 import type { RouteNamedMap } from 'vue-router/auto-routes'
 
 defineProps<{
@@ -29,7 +28,7 @@ watch(isOpen, open => (isLocked.value = open))
   <!-- Toggle button (mobile only) -->
   <ButtonBase
     variant="primary"
-    class="md:hidden fixed bottom-4 inset-ie-4 z-45"
+    class="md:hidden fixed bottom-9 inset-ie-4 z-45"
     :aria-label="$t('code.toggle_tree')"
     @click="isOpen = !isOpen"
     :classicon="isOpen ? 'i-lucide:x' : 'i-lucide:folder'"

app/components/Compare/ComparisonGrid.vue

@@ -17,6 +17,7 @@ const props = defineProps<{
 
 /** Total column count including the optional no-dep column */
 const totalColumns = computed(() => props.columns.length + (props.showNoDependency ? 1 : 0))
+const visibleColumns = computed(() => Math.min(totalColumns.value, 4))
 
 /** Compute plain-text tooltip for a replacement column */
 function getReplacementTooltip(col: ComparisonGridColumn): string {
@@ -30,32 +31,43 @@ function getReplacementTooltip(col: ComparisonGridColumn): string {
   <div class="overflow-x-auto">
     <div
       class="comparison-grid"
-      :class="[totalColumns === 4 ? 'min-w-[800px]' : 'min-w-[600px]', `columns-${totalColumns}`]"
-      :style="{ '--columns': totalColumns }"
+      :style="{
+        '--package-count': totalColumns,
+        '--visible-columns': visibleColumns,
+      }"
     >
       <!-- Header row -->
       <div class="comparison-header">
-        <div class="comparison-label" />
+        <div class="comparison-label relative bg-bg" />
 
         <!-- Package columns -->
-        <div v-for="col in columns" :key="col.name" class="comparison-cell comparison-cell-header">
-          <span class="inline-flex items-center gap-1.5 truncate">
+        <div
+          v-for="col in columns"
+          :key="col.name"
+          class="comparison-cell comparison-cell-header min-w-0"
+        >
+          <div class="flex items-start justify-center gap-1.5 min-w-0">
             <LinkBase
               :to="packageRoute(col.name, col.version)"
-              class="text-sm truncate"
-              block
+              class="flex min-w-0 flex-col items-center text-center text-sm"
               :title="col.version ? `${col.name}@${col.version}` : col.name"
             >
-              {{ col.name }}<template v-if="col.version">@{{ col.version }}</template>
+              <span class="min-w-0 break-words line-clamp-1">
+                {{ col.name }}
+              </span>
+              <span v-if="col.version" class="text-fg-muted line-clamp-1">
+                @{{ col.version }}
+              </span>
             </LinkBase>
+
             <TooltipApp v-if="col.replacement" :text="getReplacementTooltip(col)" position="bottom">
               <span
-                class="i-lucide:lightbulb w-3.5 h-3.5 text-amber-500 shrink-0 cursor-help"
+                class="i-lucide:lightbulb mt-0.5 h-3.5 w-3.5 shrink-0 cursor-help text-amber-500"
                 role="img"
                 :aria-label="$t('package.replacement.title')"
               />
             </TooltipApp>
-          </span>
+          </div>
         </div>
 
         <!-- "No dep" column (always last) -->
@@ -100,29 +112,30 @@ function getReplacementTooltip(col: ComparisonGridColumn): string {
 
 <style scoped>
 .comparison-grid {
+  --label-column-width: 140px;
+  --package-column-width: calc((100% - var(--label-column-width)) / var(--visible-columns));
   display: grid;
   gap: 0;
-}
-
-.comparison-grid.columns-2 {
-  grid-template-columns: minmax(120px, 180px) repeat(2, 1fr);
-}
-
-.comparison-grid.columns-3 {
-  grid-template-columns: minmax(120px, 160px) repeat(3, 1fr);
-}
-
-.comparison-grid.columns-4 {
-  grid-template-columns: minmax(100px, 140px) repeat(4, 1fr);
+  grid-template-columns:
+    var(--label-column-width)
+    repeat(var(--package-count), minmax(var(--package-column-width), var(--package-column-width)));
 }
 
 .comparison-header {
   display: contents;
 }
 
 .comparison-header > .comparison-label {
-  padding: 0.75rem 1rem;
-  border-bottom: 1px solid var(--color-border);
+  z-index: 3;
+}
+
+.comparison-label {
+  position: sticky;
+  left: 0;
+  z-index: 2;
+  inline-size: var(--label-column-width);
+  min-inline-size: var(--label-column-width);
+  isolation: isolate;
 }
 
 .comparison-header > .comparison-cell-header {

app/components/Compare/FacetBarChart.vue

@@ -1,11 +1,7 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import { VueUiHorizontalBar } from 'vue-data-ui/vue-ui-horizontal-bar'
-import type {
-  VueUiHorizontalBarConfig,
-  VueUiHorizontalBarDatapoint,
-  VueUiHorizontalBarDatasetItem,
-} from 'vue-data-ui'
+import type { VueUiHorizontalBarConfig, VueUiHorizontalBarDatasetItem } from 'vue-data-ui'
 import { getFrameworkColor, isListedFramework } from '~/utils/frameworks'
 import { drawSmallNpmxLogoAndTaglineWatermark } from '~/composables/useChartWatermark'
 import {
@@ -182,8 +178,8 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
               bold: false,
               color: colors.value.fg,
               value: {
-                formatter: ({ config }) => {
-                  return config?.datapoint?.formattedValue ?? '0'
+                formatter: ({ config: formatterConfig }) => {
+                  return formatterConfig?.datapoint?.formattedValue ?? '0'
                 },
               },
             },
@@ -230,7 +226,7 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
                   ${name}
                 </span>
                 <span class="text-base text-[var(--fg)] font-mono tabular-nums text-end">
-                  ${(datapoint as VueUiHorizontalBarDatapoint).formattedValue ?? 0}
+                  ${datapoint?.formattedValue ?? 0}
                 </span>
               </div>
             </div>