Merge branch 'main' into compare-scatter-with-selectable-axes

Author: graphieros

.coderabbit.yaml

@@ -0,0 +1,83 @@
+language: en-GB
+
+reviews:
+  profile: chill
+  # Keep the high-level summary enabled (default), but place it in the
+  # walkthrough comment instead of relying on PR description updates.
+  high_level_summary_in_walkthrough: true
+  review_status: true
+  review_details: false
+  changed_files_summary: true
+  sequence_diagrams: true
+  estimate_code_review_effort: false
+  assess_linked_issues: true
+  related_issues: true
+  related_prs: true
+  suggested_labels: false
+  suggested_reviewers: true
+  in_progress_fortune: false
+  poem: false
+
+  slop_detection:
+    enabled: true
+    label: '007'
+
+  auto_review:
+    auto_pause_after_reviewed_commits: 5
+    labels:
+      - '!release'
+    ignore_title_keywords:
+      - 'WIP'
+      - '[skip-review]'
+      - 'chore(release)'
+    ignore_usernames:
+      - 'renovate[bot]'
+      - 'dependabot[bot]'
+      - 'github-actions[bot]'
+
+  # Built-in PR metadata/content checks. Modes are: off, warning, error.
+  pre_merge_checks:
+    docstrings:
+      mode: off
+    title:
+      mode: error
+    description:
+      mode: warning
+    issue_assessment:
+      mode: warning
+
+  tools:
+    gitleaks:
+      enabled: true
+    osvScanner:
+      enabled: true
+    actionlint:
+      enabled: true
+    yamllint:
+      enabled: true
+    shellcheck:
+      enabled: true
+    dotenvLint:
+      enabled: true
+
+    # Disable tools redundant with our own CI
+    eslint:
+      enabled: false
+    biome:
+      enabled: false
+    oxc:
+      enabled: false
+    markdownlint:
+      enabled: false
+    languagetool:
+      enabled: false
+    github-checks:
+      enabled: false
+
+    # Security-related, but not a good fit for this repo
+    checkov:
+      enabled: false
+    trivy:
+      enabled: false
+    opengrep:
+      enabled: false

.storybook/main.ts

@@ -1,4 +1,6 @@
 import type { StorybookConfig } from '@storybook-vue/nuxt'
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
 
 const config = {
   stories: [
@@ -21,29 +23,95 @@ const config = {
   async viteFinal(newConfig) {
     newConfig.plugins ??= []
 
+    // Fix: nuxt:components:imports-alias relies on internal Nuxt state that is
+    // cleaned up after nuxt.close() in @storybook-vue/nuxt's loadNuxtViteConfig.
+    // When that state is gone, `import X from '#components'` is left unresolved
+    // and Vite 8 falls through to package-subpath resolution, which fails with
+    // "Missing '#components' specifier in 'nuxt' package".
+    // This plugin intercepts #components first and serves a virtual module built
+    // from the components.d.ts written during the same Nuxt boot.
+    // Resolve the Nuxt build dir from Vite's alias map, which can be either a
+    // plain-object (Record<string, string>) or Vite's resolved array form
+    // (readonly Alias[] where find is string | RegExp). We must handle both
+    // without casting to Record<string, string>, which would be unsound for the
+    // array form.
+    const aliases = newConfig.resolve?.alias
+    const buildDir = (() => {
+      if (!aliases) return undefined
+      if (Array.isArray(aliases)) {
+        const entry = aliases.find(a => a.find === '#build')
+        return typeof entry?.replacement === 'string' ? entry.replacement : undefined
+      }
+      const value = (aliases as Record<string, unknown>)['#build']
+      return typeof value === 'string' ? value : undefined
+    })()
+    newConfig.plugins.unshift({
+      name: 'storybook-nuxt-components',
+      enforce: 'pre',
+      resolveId(id) {
+        if (id === '#components') return '\0virtual:#components'
+        return null
+      },
+      load(id) {
+        if (id !== '\0virtual:#components') return
+        if (!buildDir) {
+          throw new Error('[storybook-nuxt-components] Could not resolve the `#build` alias.')
+        }
+        const dtsPath = resolve(buildDir, 'components.d.ts')
+        // Wire the generated declaration file into Vite's file-watch graph so
+        // that the virtual module is invalidated when Nuxt regenerates it.
+        this.addWatchFile(dtsPath)
+        const dts = readFileSync(dtsPath, 'utf-8')
+        const lines: string[] = []
+        // Match only the direct `typeof import("…").default` form.
+        // Lazy/island wrappers (LazyComponent<T>, IslandComponent<T>) are
+        // excluded intentionally — Storybook only needs the concrete type.
+        // The format has been stable across all Nuxt 3 releases.
+        const re =
+          /^export const (\w+): typeof import\("([^"]+)"\)(?:\.default|\[['"]default['"]\])\s*;?$/gm
+        let match: RegExpExecArray | null
+        while ((match = re.exec(dts)) !== null) {
+          const [, name, rel] = match
+          if (!name || !rel) continue
+          const abs = resolve(buildDir, rel).replaceAll('\\', '/')
+          lines.push(`export { default as ${name} } from ${JSON.stringify(abs)}`)
+        }
+        if (lines.length === 0) {
+          throw new Error(
+            `[storybook-nuxt-components] No component exports were found in ${dtsPath}.`,
+          )
+        }
+        return lines.join('\n')
+      },
+    })
+
     // Bridge compatibility between Storybook v10 core and v9 @storybook-vue/nuxt
     // v10 expects module federation globals that v9 doesn't provide
     newConfig.plugins.push({
       name: 'storybook-v10-compat',
       transformIndexHtml: {
         order: 'pre',
-        handler(html) {
-          const script = `
-<script>
-  // Minimal shims for Storybook v10 module federation system
-  // These will be replaced when Storybook runtime loads
-  window.__STORYBOOK_MODULE_GLOBAL__ = { global: window };
-  window.__STORYBOOK_MODULE_CLIENT_LOGGER__ = {
-    deprecate: console.warn.bind(console, '[deprecated]'),
-    once: console.log.bind(console),
-    logger: console
-  };
-  window.__STORYBOOK_MODULE_CHANNELS__ = {
-    Channel: class { on() {} off() {} emit() {} once() {} },
-    createBrowserChannel: () => new window.__STORYBOOK_MODULE_CHANNELS__.Channel()
-  };
-</script>`
-          return html.replace(/<script>/, script + '<script>')
+        handler() {
+          return [
+            {
+              tag: 'script',
+              injectTo: 'head-prepend' as const,
+              children: [
+                '// Minimal shims for Storybook v10 module federation system',
+                '// These will be replaced when Storybook runtime loads',
+                'window.__STORYBOOK_MODULE_GLOBAL__ = { global: window };',
+                'window.__STORYBOOK_MODULE_CLIENT_LOGGER__ = {',
+                "  deprecate: console.warn.bind(console, '[deprecated]'),",
+                '  once: console.log.bind(console),',
+                '  logger: console',
+                '};',
+                'window.__STORYBOOK_MODULE_CHANNELS__ = {',
+                '  Channel: class { on() {} off() {} emit() {} once() {} },',
+                '  createBrowserChannel: () => new window.__STORYBOOK_MODULE_CHANNELS__.Channel()',
+                '};',
+              ].join('\n'),
+            },
+          ]
         },
       },
     })
@@ -73,7 +141,12 @@ const config = {
         const wrapped = async function (this: unknown, ...args: unknown[]) {
           try {
             return await originalFn.apply(this, args)
-          } catch {
+          } catch (err) {
+            // oxlint-disable-next-line no-console -- Log and swallow errors to avoid breaking the Storybook build when vue-docgen-api encounters an unparseable component.
+            console.warn(
+              '[storybook:vue-docgen-plugin] Suppressed docgen error (component docs may be missing):',
+              err,
+            )
             return undefined
           }
         }

app/components/Code/FileTree.vue

@@ -39,7 +39,7 @@ const { toggleDir, isExpanded, autoExpandAncestors } = useFileTreeState(props.ba
 watch(
   () => props.currentPath,
   path => {
-    if (path) {
+    if (depth.value === 0 && path) {
       autoExpandAncestors(path)
     }
   },

app/components/CollapsibleSection.vue

@@ -1,14 +1,15 @@
 <script setup lang="ts">
 import { shallowRef, computed } from 'vue'
 import { LinkBase } from '#components'
+import type { IconClass } from '~/types/icon'
 
 interface Props {
   title: string
   subtitle?: string
   isLoading?: boolean
   headingLevel?: `h${number}`
   id: string
-  icon?: string
+  icon?: IconClass
 }
 
 const props = withDefaults(defineProps<Props>(), {

app/components/Diff/SidebarPanel.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { packageRoute } from '~/utils/router'
+import type { IconClass } from '~/types/icon'
 
 const props = defineProps<{
   compare: CompareResponse
@@ -19,7 +20,7 @@ const fileFilter = defineModel<'all' | 'added' | 'removed' | 'modified'>('fileFi
 
 const sectionOrder = ['dependencies', 'devDependencies', 'peerDependencies', 'optionalDependencies']
 const { t } = useI18n()
-const sectionMeta = computed<Record<string, { label: string; icon: string }>>(() => ({
+const sectionMeta = computed<Record<string, { label: string; icon: IconClass }>>(() => ({
   dependencies: { label: t('compare.dependencies'), icon: 'i-lucide:box' },
   devDependencies: { label: t('compare.dev_dependencies'), icon: 'i-lucide:wrench' },
   peerDependencies: { label: t('compare.peer_dependencies'), icon: 'i-lucide:users' },

app/components/Package/ExternalLinks.vue

@@ -117,6 +117,15 @@ useCommandPaletteContextCommands(
       })
     }
 
+    commands.push({
+      id: 'package-link-socket.dev',
+      group: 'links',
+      label: 'socket.dev',
+      keywords: [...packageKeywords, 'socket.dev'],
+      iconClass: 'i-simple-icons:socket',
+      href: `https://socket.dev/npm/package/${props.pkg.name}`,
+    })
+
     commands.push({
       id: 'package-link-npm',
       group: 'links',

app/composables/usePlatformModifierKey.ts

@@ -16,7 +16,9 @@ function detectApplePlatform() {
 }
 
 export function usePlatformModifierKey() {
+  const { t } = useI18n()
   const isApplePlatform = useState('platform:is-apple', detectApplePlatform)
+  const ctrlKeyLabel = computed(() => t('shortcuts.ctrl_key'))
 
   if (import.meta.client) {
     onMounted(() => {
@@ -26,7 +28,9 @@ export function usePlatformModifierKey() {
 
   return {
     isApplePlatform: computed(() => isApplePlatform.value),
-    primaryModifierKeyLabel: computed(() => (isApplePlatform.value ? '⌘' : 'Ctrl')),
-    commandPaletteShortcutLabel: computed(() => (isApplePlatform.value ? '⌘ K' : 'Ctrl+K')),
+    primaryModifierKeyLabel: computed(() => (isApplePlatform.value ? '⌘' : ctrlKeyLabel.value)),
+    commandPaletteShortcutLabel: computed(() =>
+      isApplePlatform.value ? '⌘ K' : `${ctrlKeyLabel.value}+K`,
+    ),
   }
 }

app/pages/brand.stories.ts

@@ -0,0 +1,16 @@
+import Brand from './brand.vue'
+import type { Meta, StoryObj } from '@storybook-vue/nuxt'
+import { pageDecorator } from '../../.storybook/decorators'
+
+const meta = {
+  component: Brand,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  decorators: [pageDecorator],
+} satisfies Meta<typeof Brand>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}