Merge branch 'main' into main

Author: graphieros

app/components/Terminal/Install.vue

@@ -200,20 +200,19 @@ const copyCreateCommand = () => copyCreate(getFullCreateCommand())
             <span class="text-fg-subtle font-mono text-sm select-none"
               ># {{ $t('package.create.title') }}</span
             >
-            <NuxtLink
-              :to="`/package/${createPackageInfo.packageName}`"
-              class="text-fg-muted hover:text-fg text-xs transition-colors focus-visible:outline-accent/70 rounded"
-              :title="$t('package.create.view', { packageName: createPackageInfo.packageName })"
+            <TooltipApp
+              :text="$t('package.create.view', { packageName: createPackageInfo.packageName })"
             >
-              <TooltipApp
-                :text="$t('package.create.view', { packageName: createPackageInfo.packageName })"
+              <NuxtLink
+                :to="`/package/${createPackageInfo.packageName}`"
+                class="inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1 text-fg-muted hover:text-fg text-xs transition-colors focus-visible:outline-2 focus-visible:outline-accent/70 rounded"
               >
-                <span class="i-carbon:information w-3 h-3 mt-1" aria-hidden="true" />
-              </TooltipApp>
-              <span class="sr-only">{{
-                $t('package.create.view', { packageName: createPackageInfo.packageName })
-              }}</span>
-            </NuxtLink>
+                <span class="i-carbon:information w-3 h-3" aria-hidden="true" />
+                <span class="sr-only">{{
+                  $t('package.create.view', { packageName: createPackageInfo.packageName })
+                }}</span>
+              </NuxtLink>
+            </TooltipApp>
           </div>
 
           <div

app/pages/package/[...package].vue

@@ -791,7 +791,7 @@ defineOgImageComponent('Package', {
 
         <!-- Stats grid -->
         <dl
-          class="grid grid-cols-2 sm:grid-cols-11 gap-3 sm:gap-4 py-4 sm:py-6 mt-4 sm:mt-6 border-t border-b border-border"
+          class="grid grid-cols-2 sm:grid-cols-7 md:grid-cols-11 gap-3 sm:gap-4 py-4 sm:py-6 mt-4 sm:mt-6 border-t border-b border-border"
         >
           <div class="space-y-1 sm:col-span-2">
             <dt class="text-xs text-fg-subtle uppercase tracking-wider">
@@ -863,7 +863,12 @@ defineOgImageComponent('Package', {
             <dt class="text-xs text-fg-subtle uppercase tracking-wider flex items-center gap-1">
               {{ $t('package.stats.install_size') }}
               <TooltipApp :text="sizeTooltip">
-                <span class="i-carbon:information w-3 h-3 text-fg-subtle" aria-hidden="true" />
+                <span
+                  tabindex="0"
+                  class="inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1 text-fg-subtle cursor-help focus-visible:outline-2 focus-visible:outline-accent/70 rounded"
+                >
+                  <span class="i-carbon:information w-3 h-3" aria-hidden="true" />
+                </span>
               </TooltipApp>
             </dt>
             <dd class="font-mono text-sm text-fg">

modules/og-image.ts

@@ -0,0 +1,18 @@
+import { defineNuxtModule, useNuxt } from 'nuxt/kit'
+
+export default defineNuxtModule({
+  meta: {
+    name: 'og-image-tweaks',
+  },
+  setup() {
+    const nuxt = useNuxt()
+
+    nuxt.hook('components:extend', components => {
+      for (const component of [...components].toReversed()) {
+        if (component.filePath.includes('og-image')) {
+          components.splice(components.indexOf(component), 1)
+        }
+      }
+    })
+  },
+})

test/unit/uno-preset-rtl.spec.ts

@@ -1,11 +1,12 @@
 import { afterEach, beforeEach, describe, expect, it, vi, type MockInstance } from 'vitest'
-import { presetRtl } from '../../uno-preset-rtl'
+import { presetRtl, resetRtlWarnings } from '../../uno-preset-rtl'
 import { createGenerator } from 'unocss'
 
 describe('uno-preset-rtl', () => {
   let warnSpy: MockInstance
 
   beforeEach(() => {
+    resetRtlWarnings()
     warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
   })
 

uno-preset-rtl.ts

@@ -1,6 +1,22 @@
 import type { CSSEntries, DynamicMatcher, Preset, RuleContext } from 'unocss'
 import { cornerMap, directionSize, h } from '@unocss/preset-wind4/utils'
 
+// Track warnings to avoid duplicates
+const warnedClasses = new Set<string>()
+
+function warnOnce(message: string, key: string) {
+  if (!warnedClasses.has(key)) {
+    warnedClasses.add(key)
+    // oxlint-disable-next-line no-console -- warn logging
+    console.warn(message)
+  }
+}
+
+/** Reset warning state (for testing) */
+export function resetRtlWarnings() {
+  warnedClasses.clear()
+}
+
 const directionMap: Record<string, string[]> = {
   'l': ['-left'],
   'r': ['-right'],
@@ -30,9 +46,9 @@ function directionSizeRTL(
     const defaultMap = { l: 'is', r: 'ie' }
     const map = prefixMap || defaultMap
     const replacement = map[direction as 'l' | 'r']
-    // oxlint-disable-next-line no-console -- warn logging
-    console.warn(
+    warnOnce(
       `[RTL] Avoid using '${match}'. Use '${match.replace(direction === 'l' ? 'l' : 'r', replacement)}' instead.`,
+      match,
     )
     return matcher([match, replacement, size], context)
   }
@@ -83,9 +99,9 @@ export function presetRtl(): Preset {
         ([, direction, size], context) => {
           if (!size) return undefined
           const replacement = direction === 'left' ? 'inset-is' : 'inset-ie'
-          // oxlint-disable-next-line no-console -- warn logging
-          console.warn(
+          warnOnce(
             `[RTL] Avoid using '${direction}-${size}'. Use '${replacement}-${size}' instead.`,
+            `${direction}-${size}`,
           )
           return directionSize('inset')(['', direction === 'left' ? 'is' : 'ie', size], context)
         },
@@ -95,8 +111,10 @@ export function presetRtl(): Preset {
         /^text-(left|right)$/,
         ([, direction]) => {
           const replacement = direction === 'left' ? 'start' : 'end'
-          // oxlint-disable-next-line no-console -- warn logging
-          console.warn(`[RTL] Avoid using 'text-${direction}'. Use 'text-${replacement}' instead.`)
+          warnOnce(
+            `[RTL] Avoid using 'text-${direction}'. Use 'text-${replacement}' instead.`,
+            `text-${direction}`,
+          )
           return { 'text-align': replacement }
         },
         { autocomplete: 'text-(left|right)' },
@@ -112,9 +130,9 @@ export function presetRtl(): Preset {
           }
           const replacement = replacementMap[direction]
           if (!replacement) return undefined
-          // oxlint-disable-next-line no-console -- warn logging
-          console.warn(
+          warnOnce(
             `[RTL] Avoid using 'rounded-${direction}'. Use 'rounded-${replacement}' instead.`,
+            `rounded-${direction}`,
           )
           return handlerRounded(['', replacement, size ?? 'DEFAULT'], context)
         },
@@ -124,9 +142,9 @@ export function presetRtl(): Preset {
         args => {
           const [_, direction, size] = args
           const replacement = direction === 'l' ? 'is' : 'ie'
-          // oxlint-disable-next-line no-console -- warn logging
-          console.warn(
+          warnOnce(
             `[RTL] Avoid using 'border-${direction}'. Use 'border-${replacement}' instead.`,
+            `border-${direction}`,
           )
           return handlerBorderSize(['', replacement, size || '1'])
         },