Merge branch 'main' into serhalp/refactor/named-routes-in-cmd-palette-pkg-composable

Author: serhalp

.github/workflows/ci.yml

@@ -12,7 +12,7 @@ on:
     branches:
       - main
 
-# cancel in-progress runs on new commits to same PR (gitub.event.number)
+# cancel in-progress runs on new commits to same PR (github.event.number)
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.number || github.sha }}
   cancel-in-progress: true

.nuxtrc

@@ -1 +1 @@
-setups.@nuxt/test-utils="4.0.2"
+setups.@nuxt/test-utils="4.0.3"

.storybook/.public/mockServiceWorker.js

@@ -123,7 +123,7 @@ async function handleRequest(event, requestId, requestInterceptedAt) {
   const response = await getResponse(event, client, requestId, requestInterceptedAt)
 
   // Send back the response clone for the "response:*" life-cycle events.
-  // Ensure MSW is active and ready to handle the message, otherwise
+  // Ensure MSW is active and ready to handle the message; otherwise,
   // this message will pend indefinitely.
   if (client && activeClientIds.has(client.id)) {
     const serializedRequest = await serializeRequest(requestCloneForEvents)

CONTRIBUTING.md

@@ -232,7 +232,7 @@ If you're working on admin features (org management, package access controls, op
 pnpm mock-connector
 ```
 
-This starts a mock connector server pre-populated with sample data (orgs, teams, members, packages). No npm login is required — operations succeed immediately without making real npm CLI calls.
+This starts a mock connector server prepopulated with sample data (orgs, teams, members, packages). No npm login is required — operations succeed immediately without making real npm CLI calls.
 
 The mock connector prints a connection URL to the terminal, just like the real connector. Click it (or paste the token manually) to connect the UI.
 
@@ -242,7 +242,7 @@ The mock connector prints a connection URL to the terminal, just like the real c
 pnpm mock-connector                # default: port 31415, user "mock-user", sample data
 pnpm mock-connector --port 9999    # custom port
 pnpm mock-connector --user alice   # custom username
-pnpm mock-connector --empty        # start with no pre-populated data
+pnpm mock-connector --empty        # start with no prepopulated data
 ```
 
 **Default sample data:**

app/assets/main.css

@@ -95,11 +95,11 @@
   --border-subtle: oklch(0.922 0 0);
   --border-hover: oklch(0.715 0 0);
 
-  --accent: var(--accent-color, oklch(0.53 0.16 247.27));
+  --accent: var(--accent-color, oklch(0.5 0.16 247.27));
   --accent-muted: var(--accent-color, oklch(0.205 0 0));
 
   /* accent colors */
-  --swatch-sky: oklch(0.53 0.16 247.27);
+  --swatch-sky: oklch(0.5 0.16 247.27);
   --swatch-coral: oklch(0.56 0.17 10.75);
   --swatch-amber: oklch(0.58 0.18 46.34);
   --swatch-emerald: oklch(0.51 0.13 162.4);

app/components/AppFooter.vue

@@ -48,6 +48,10 @@ const footerSections: Array<{ label: string; links: FooterLink[] }> = [
         name: t('footer.about'),
         href: '/about',
       },
+      {
+        name: t('footer.brand'),
+        href: '/brand',
+      },
       {
         name: t('a11y.footer_title'),
         href: '/accessibility',

app/components/Chart/SplitSparkline.vue

@@ -5,7 +5,7 @@ import {
   type VueUiSparklineDatasetItem,
 } from 'vue-data-ui/vue-ui-sparkline'
 import { VueUiPatternSeed } from 'vue-data-ui/vue-ui-pattern-seed'
-import { useCssVariables } from '~/composables/useColors'
+import { useColors } from '~/composables/useColors'
 import type { VueUiXyDatasetItem } from 'vue-data-ui/vue-ui-xy'
 import { getPalette, lightenColor } from 'vue-data-ui/utils'
 import { CHART_PATTERN_CONFIG } from '~/utils/charts'
@@ -50,23 +50,7 @@ watch(
   { flush: 'sync', immediate: true },
 )
 
-const { colors } = useCssVariables(
-  [
-    '--bg',
-    '--fg',
-    '--bg-subtle',
-    '--bg-elevated',
-    '--border-hover',
-    '--fg-subtle',
-    '--border',
-    '--border-subtle',
-  ],
-  {
-    element: rootEl,
-    watchHtmlAttributes: true,
-    watchResize: false, // set to true only if a var changes color on resize
-  },
-)
+const { colors } = useColors(rootEl)
 
 const isDarkMode = computed(() => resolvedMode.value === 'dark')
 
@@ -101,7 +85,7 @@ const configs = computed(() => {
       ? Array.from(new Set([...(unit.dashIndices ?? []), lastIndex]))
       : unit.dashIndices
 
-    // Ensure we loop through available palette colours when the series count is higher than the avalable palette
+    // Ensure we loop through available palette colours when the series count is higher than the available palette
     const fallbackColor = palette[i] ?? palette[i % palette.length] ?? palette[0]!
     const seriesColor = unit.color ?? fallbackColor
     const lightenedSeriesColor: string = unit.color

app/components/Compare/FacetBarChart.vue

@@ -9,6 +9,7 @@ import { VueUiPatternSeed } from 'vue-data-ui/vue-ui-pattern-seed'
 import { getFrameworkColor, isListedFramework } from '~/utils/frameworks'
 import { createPatternDef } from 'vue-data-ui/utils'
 import { drawSmallNpmxLogoAndTaglineWatermark } from '~/composables/useChartWatermark'
+import { useColors } from '~/composables/useColors'
 
 import {
   loadFile,
@@ -40,23 +41,7 @@ const isMobile = computed(() => width.value > 0 && width.value < mobileBreakpoin
 
 const chartKey = ref(0)
 
-const { colors } = useCssVariables(
-  [
-    '--bg',
-    '--fg',
-    '--bg-subtle',
-    '--bg-elevated',
-    '--fg-subtle',
-    '--fg-muted',
-    '--border',
-    '--border-subtle',
-  ],
-  {
-    element: rootEl,
-    watchHtmlAttributes: true,
-    watchResize: false,
-  },
-)
+const { colors } = useColors(rootEl)
 
 const watermarkColors = computed(() => ({
   fg: colors.value.fg ?? OKLCH_NEUTRAL_FALLBACK,

app/components/Compare/FacetScatterChart.vue

@@ -5,9 +5,11 @@ import {
   VueUiScatter,
   type VueUiScatterConfig,
   type VueUiScatterDatasetItem,
+  type VueUiScatterSeries,
 } from 'vue-data-ui/vue-ui-scatter'
 import { buildCompareScatterChartDataset } from '~/utils/compare-scatter-chart'
 import { loadFile, copyAltTextForCompareScatterChart } from '~/utils/charts'
+import { useColors } from '~/composables/useColors'
 
 import('vue-data-ui/style.css')
 
@@ -25,25 +27,7 @@ const { copy, copied } = useClipboard()
 const mobileBreakpointWidth = 640
 const isMobile = computed(() => width.value > 0 && width.value < mobileBreakpointWidth)
 
-const { colors } = useCssVariables(
-  [
-    '--bg',
-    '--fg',
-    '--bg-subtle',
-    '--bg-elevated',
-    '--fg-subtle',
-    '--fg-muted',
-    '--border',
-    '--border-subtle',
-    '--border-hover',
-    '--accent',
-  ],
-  {
-    element: rootEl,
-    watchHtmlAttributes: true,
-    watchResize: false,
-  },
-)
+const { colors } = useColors(rootEl)
 
 const watermarkColors = computed(() => ({
   fg: colors.value.fg ?? OKLCH_NEUTRAL_FALLBACK,
@@ -285,6 +269,11 @@ function toggleAxisHighlight(state: AxisHighlight) {
   highlightedAxis.value = state
 }
 
+function toggleLegendItem(legendItem: VueUiScatterSeries) {
+  legendItem.segregate()
+  legendItem.onEnter()
+}
+
 const readyTeleport = shallowRef(false)
 
 onMounted(async () => {
@@ -389,26 +378,26 @@ onMounted(async () => {
                       : 'text-sm leading-6'
                   "
                 >
-                  <li v-for="datapoint in legend" :key="datapoint.name">
+                  <li v-for="legendItem in legend" :key="legendItem.id">
                     <button
-                      :aria-pressed="datapoint.isSegregated"
-                      :aria-label="datapoint.name"
+                      :aria-pressed="legendItem.isSegregated"
+                      :aria-label="legendItem.name"
                       type="button"
                       class="flex gap-1.5 place-items-center"
-                      @click="datapoint.segregate()"
+                      :class="legendItem.isSegregated ? 'line-through' : 'hover:underline'"
+                      @click="toggleLegendItem(legendItem)"
+                      @mouseenter="legendItem.onEnter()"
+                      @mouseleave="legendItem.onLeave()"
+                      @focus="legendItem.onEnter()"
+                      @blur="legendItem.onLeave()"
                     >
                       <div class="h-3 w-3" aria-hidden="true">
                         <svg viewBox="0 0 2 2" class="w-full">
-                          <circle cx="1" cy="1" r="1" :fill="datapoint.color" />
+                          <circle cx="1" cy="1" r="1" :fill="legendItem.color" />
                         </svg>
                       </div>
-                      <span
-                        class="text-fg"
-                        :style="{
-                          textDecoration: datapoint.isSegregated ? 'line-through' : undefined,
-                        }"
-                      >
-                        {{ datapoint.name }}
+                      <span class="text-fg">
+                        {{ legendItem.name }}
                       </span>
                     </button>
                   </li>
@@ -559,14 +548,35 @@ onMounted(async () => {
 </template>
 
 <style scoped>
+:deep(.vue-data-ui-component) {
+  --super-ease-out: cubic-bezier(0.15, 0.75, 0.35, 1);
+}
+
 :deep(.vue-data-ui-component svg:focus-visible) {
   outline: 1px solid var(--accent) !important;
   border-radius: 0.1rem;
   outline-offset: 0;
 }
+
 :deep(.vue-ui-user-options-button:focus-visible),
 :deep(.vue-ui-user-options :first-child:focus-visible) {
   outline: 0.1rem solid var(--accent) !important;
   border-radius: 0.25rem;
 }
+
+:deep(.vue-ui-scatter-scale-group),
+:deep(.vue-ui-scatter-datapoint text),
+:deep(.vue-ui-scatter-datapoint circle),
+:deep(.vue-ui-scatter-datapoint-label) {
+  transition: all 0.5s var(--super-ease-out) !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :deep(.vue-ui-scatter-scale-group),
+  :deep(.vue-ui-scatter-datapoint text),
+  :deep(.vue-ui-scatter-datapoint circle),
+  :deep(.vue-ui-scatter-datapoint-label) {
+    transition: none !important;
+  }
+}
 </style>

app/components/Diff/Line.vue

@@ -84,7 +84,7 @@ const renderedSegments = computed(() =>
     <td :class="borderClasses" />
 
     <!-- Line number -->
-    <td class="tabular-nums text-center opacity-50 px-2 text-xs select-none w-12 shrink-0">
+    <td class="tabular-nums text-center text-fg-subtle px-2 text-xs select-none w-12 shrink-0">
       {{ line.type === 'delete' ? '–' : lineNumberNew }}
     </td>