spoko-design-system 1.9.0 → 1.9.1

package/.claude/settings.json

@@ -14,12 +14,12 @@
       "Bash(git log:*)",
       "Bash(git add:*)",
       "Bash(git commit:*)"
+      "Bash(git push:*)"
     ],
     "deny": [
       "Bash(pnpm semantic-release:*)",
       "Bash(pnpm publish:*)",
       "Bash(npm publish:*)",
-      "Bash(git push:*)"
     ],
     "ask": [
       "Bash(rm:*)",

package/CHANGELOG.md

@@ -1,3 +1,32 @@
+## [1.9.1](https://github.com/polo-blue/sds/compare/v1.9.0...v1.9.1) (2025-10-30)
+
+### ⚠ BREAKING CHANGES
+
+* ProductEngine and ProductEngines are now Astro components
+
+Replace Vue components with Astro for better performance and SEO:
+- Convert ProductEngine.vue to ProductEngine.astro (SSR-friendly)
+- Convert ProductEngines.vue to ProductEngines.astro
+- Add getEngineTooltipContent utility for tooltip generation
+- Create global tooltip delegation script for performance
+- Add tippy.js CSS to main.css (tippy.css + tippy-theme.css)
+
+Benefits:
+- Engine codes now in HTML for SEO (no client-side hydration)
+- 1 global script handles all tooltips via delegation pattern
+- Tooltips created on-demand when hovered (not on mount)
+- Works for both engine codes and PR codes
+- Massive performance improvement on pages with many engines
+
+Migration:
+- Remove client:load directive from ProductEngines usage
+- Import and call initTooltips() in your layout
+- ProductEngine/ProductEngines now pure Astro (no Vue)
+
+### Code Refactoring
+
+* migrate ProductEngine from Vue to Astro with tooltip delegation ([b3589cc](https://github.com/polo-blue/sds/commit/b3589cc75da9cbf514bcffce2d06a8a36d67012e))
+
 ## [1.9.0](https://github.com/polo-blue/sds/compare/v1.8.1...v1.9.0) (2025-10-29)
 
 ### Features

package/index.ts

@@ -19,8 +19,7 @@ export { default as Headline } from './src/components/Headline.vue';
 export { default as Quote } from './src/components/Quote.vue';
 
 export { default as ProductEngineType } from './src/components/Product/ProductEngineType.vue';
-export { default as ProductEngine } from './src/components/Product/ProductEngine.vue';
-export { default as ProductEngines } from './src/components/Product/ProductEngines.vue';
+// ProductEngine and ProductEngines are now Astro components (see Astro Components section below)
 export { default as ProductButton } from './src/components/Product/ProductButton.vue';
 export { default as ProductColors } from './src/components/Product/ProductColors.vue';
 export { default as ProductDetailName } from './src/components/Product/ProductDetailName.vue';
@@ -50,6 +49,8 @@ export { default as ButtonCopy } from './src/components/ButtonCopy.astro';
 export { default as CallToAction } from './src/components/Layout/CallToAction.astro';
 
 export { default as ProductImage } from './src/components/Product/ProductImage.astro';
+export { default as ProductEngine } from './src/components/Product/ProductEngine.astro';
+export { default as ProductEngines } from './src/components/Product/ProductEngines.astro';
 
 export { default as CategoryDetails } from './src/components/Category/CategoryDetails.astro';
 export { default as CategoryTile } from './src/components/Category/CategoryTile.astro';
@@ -58,6 +59,8 @@ export { default as CategoryTile } from './src/components/Category/CategoryTile.
 // Utils: Product
 export { default as getPriceFormatted } from './src/utils/product/getPriceFormatted';
 export { default as getProductChecklist } from './src/utils/product/getProductChecklist';
+export { getEngineTooltipContent } from './src/utils/product/getEngineTooltipContent';
+export type { Engine, EngineTranslations } from './src/utils/product/getEngineTooltipContent';
 
 // Utils: SEO
 export { default as getShorterDescription } from './src/utils/seo/getShorterDescription';
@@ -70,3 +73,6 @@ export { default as formatLocaleNumber } from './src/utils/text/formatLocaleNumb
 export { default as formatPad } from './src/utils/text/formatPad';
 export { default as getNumberFormatted } from './src/utils/text/getNumberFormatted';
 export { default as getTranslatedLink } from './src/utils/text/getTranslatedLink';
+
+// Scripts
+export { initTooltips } from './src/scripts/tooltips';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "1.9.0",
+  "version": "1.9.1",
   "private": false,
   "main": "./index.ts",
   "module": "./index.ts",
@@ -52,7 +52,7 @@
     "spoko design system"
   ],
   "dependencies": {
-    "@algolia/client-search": "^5.41.0",
+    "@algolia/client-search": "^5.42.0",
     "@astrojs/mdx": "^4.3.9",
     "@astrojs/node": "^9.5.0",
     "@astrojs/sitemap": "^3.6.0",
@@ -145,7 +145,8 @@
     },
     "ignoredBuiltDependencies": [
       "esbuild",
-      "sharp"
+      "sharp",
+      "vue-demi"
     ]
   },
   "engines": {

package/src/components/Product/ProductEngine.astro

@@ -0,0 +1,67 @@
+---
+import { getEngineTooltipContent } from '../../utils/product/getEngineTooltipContent';
+import type { Engine, EngineTranslations } from '../../utils/product/getEngineTooltipContent';
+
+/*
+  VAG group (VW/Audi/Skoda/Seat/Porsche/Bentley/Lamborghini/Ducati/Cupra/Scania/MAN) manufacturer Engine Code
+  Displays engine code with detailed tooltip showing: name, power, displacement, dates, etc.
+
+  SEO-friendly: Engine code is rendered in HTML, tooltips enhanced via delegation script
+*/
+
+interface Props {
+  engine: Engine;
+  showComma?: boolean;
+  translations?: EngineTranslations;
+}
+
+const { engine, showComma = false, translations = {} } = Astro.props;
+
+// Generate tooltip content for data attribute
+const tooltipContent = getEngineTooltipContent(engine, translations);
+
+// Escape quotes for HTML attribute
+const tooltipContentEscaped = tooltipContent.replace(/"/g, '"');
+---
+
+<span
+  class="engine-code"
+  class:list={[`engine-code-${engine.code}`]}
+  data-tippy-content={tooltipContentEscaped}
+>
+  {engine.code}{showComma && ','}
+</span>
+
+<style>
+/* Engine Code Styles */
+.engine-code {
+  @apply inline-block mr-1;
+  @apply underline decoration-dotted underline-offset-4 py-0.5;
+  @apply decoration-neutral-light cursor-default;
+  @apply transition-colors duration-200;
+}
+
+.engine-code:hover {
+  @apply decoration-blue-darker dark:decoration-blue-light;
+}
+
+/* Semantic Engine Code Colors */
+/* GTI Engines - Red */
+.engine-code-CAVE,
+.engine-code-CTHE,
+.engine-code-DAJA,
+.engine-code-DAYB {
+  @apply text-red-600 dark:text-red-500;
+}
+
+/* WRC R Engine - Blue */
+.engine-code-CDLJ {
+  @apply text-blue-600 dark:text-blue-500;
+}
+
+/* Special Blue Engines */
+.engine-code-CPTA,
+.engine-code-CZEA {
+  @apply text-blue-700 dark:text-blue-600;
+}
+</style>

package/src/components/Product/ProductEngines.astro

@@ -0,0 +1,43 @@
+---
+import ProductEngine from './ProductEngine.astro';
+import type { Engine, EngineTranslations } from '../../utils/product/getEngineTooltipContent';
+
+/*
+  ProductEngines wrapper component
+  Displays a list of engine codes with tooltips
+  SEO-friendly: All engine codes rendered in HTML, enhanced by global delegation script
+*/
+
+interface Props {
+  engines: Engine[];
+  isPdp?: boolean;
+  translations?: EngineTranslations;
+}
+
+const { engines = [], isPdp = false, translations = {} } = Astro.props;
+
+// Sort engines by code
+const sortedEngines = engines.length
+  ? [...engines].sort((a, b) => (a.code || '').localeCompare(b.code || ''))
+  : [];
+---
+
+{
+  sortedEngines.length > 0 && (
+    <div class="engines-list inline-flex flex-wrap items-center gap-x-0.5">
+      {sortedEngines.map((engine, index) => (
+        <ProductEngine
+          engine={engine}
+          showComma={index !== sortedEngines.length - 1}
+          translations={translations}
+        />
+      ))}
+    </div>
+  )
+}
+
+<style>
+.engines-list {
+  @apply leading-none;
+}
+</style>

package/src/pages/components/product-engine.mdx

@@ -2,28 +2,46 @@
 title: "ProductEngine"
 layout: "../../layouts/MainLayout.astro"
 ---
-import ProductEngine from '../../components/Product/ProductEngine.vue'
-import ProductEngines from '../../components/Product/ProductEngines.vue'
+import ProductEngine from '../../components/Product/ProductEngine.astro'
+import ProductEngines from '../../components/Product/ProductEngines.astro'
 
 # ProductEngine
 
 Engine codes with detailed tooltips showing specifications like power, displacement, dates, and more.
 
+**⚡ Performance-optimized**: Uses Tippy.js delegation pattern - one global script handles all tooltips efficiently.
+
+**🔍 SEO-friendly**: Engine codes rendered as static HTML (no client-side hydration required).
+
 ## Single Engine Code
 
 Display a single engine code with tooltip showing detailed engine information.
 
-### import:
+### Setup:
+
+**1. Import the component:**
 
 ```js
-import ProductEngine from 'spoko-design-system/src/components/Product/ProductEngine.vue'
+import { ProductEngine } from 'spoko-design-system'
+```
+
+**2. Initialize tooltips in your layout (once):**
+
+```astro
+---
+// In your layout file (e.g., Layout.astro)
+---
+<script>
+  import { initTooltips } from 'spoko-design-system';
+  initTooltips();
+</script>
 ```
 
 ### Basic Usage (New API Structure):
 
 <div class="component-preview">
      <div class="bg-white p-6 w-full flex gap-2">
-          <ProductEngine client:load engine={{
+          <ProductEngine engine={{
                code: "CAYA",
                name: "1.6 TDI",
                serie: { value: "EA189", label: "Seria silnika" },
@@ -31,7 +49,7 @@ import ProductEngine from 'spoko-design-system/src/components/Product/ProductEng
                displacement: { value: 1598, label: "Pojemność" },
                euro: { value: 5, label: "Norma Euro" }
           }} />
-          <ProductEngine client:load engine={{
+          <ProductEngine engine={{
                code: "CAYB",
                name: "1.6 TDI",
                serie: { value: "EA189", label: "Seria silnika" },
@@ -42,21 +60,25 @@ import ProductEngine from 'spoko-design-system/src/components/Product/ProductEng
      </div>
 </div>
 
-```vue
+```astro
+---
+import { ProductEngine } from 'spoko-design-system';
+---
+
 <!-- New API structure (with built-in translations) -->
-<ProductEngine :engine="{
+<ProductEngine engine={{
   code: 'CAYA',
   name: '1.6 TDI',
   serie: { value: 'EA189', label: 'Seria silnika' },
   power: { kw: 55, ps: 75, ps_label: 'KM', label: 'Moc' },
   displacement: { value: 1598, label: 'Pojemność' },
   euro: { value: 5, label: 'Norma Euro' }
-}" />
+}} />
 
 <!-- Old API structure (backward compatible) -->
 <ProductEngine
-  :engine="{ code: 'CAYA', name: '1.6 TDI', kw: 55, ps: 75, cc: 1598, serie: 3, euro: 5 }"
-  :translations="{ power: 'Moc', cc: 'Pojemność', euro: 'Euro', horsepowerUnit: 'KM' }"
+  engine={{ code: 'CAYA', name: '1.6 TDI', kw: 55, ps: 75, cc: 1598, serie: 3, euro: 5 }}
+  translations={{ power: 'Moc', cc: 'Pojemność', euro: 'Euro', horsepowerUnit: 'KM' }}
 />
 ```
 
@@ -68,7 +90,7 @@ Engine codes for special editions are automatically color-coded:
      <div class="bg-white p-6 w-full flex flex-wrap gap-3">
           <div class="flex flex-col gap-1">
                <small class="text-xs text-gray-500">GTI Engine (Red)</small>
-               <ProductEngine client:load engine={{
+               <ProductEngine engine={{
                     code: "CAVE",
                     name: "1.4 TSI",
                     power: { kw: 132, ps: 180, ps_label: "KM", label: "Moc" },
@@ -78,7 +100,7 @@ Engine codes for special editions are automatically color-coded:
           </div>
           <div class="flex flex-col gap-1">
                <small class="text-xs text-gray-500">WRC Engine (Blue)</small>
-               <ProductEngine client:load engine={{
+               <ProductEngine engine={{
                     code: "CDLJ",
                     name: "1.6 TDI",
                     power: { kw: 165, ps: 220, ps_label: "KM", label: "Moc" },
@@ -88,7 +110,7 @@ Engine codes for special editions are automatically color-coded:
           </div>
           <div class="flex flex-col gap-1">
                <small class="text-xs text-gray-500">Special Blue</small>
-               <ProductEngine client:load engine={{
+               <ProductEngine engine={{
                     code: "CPTA",
                     name: "1.0 TSI",
                     power: { kw: 70, ps: 95, ps_label: "KM", label: "Moc" },
@@ -99,41 +121,41 @@ Engine codes for special editions are automatically color-coded:
      </div>
 </div>
 
-```vue
+```astro
 <!-- GTI Engine - Red -->
-<ProductEngine :engine="{
+<ProductEngine engine={{
   code: 'CAVE',
   name: '1.4 TSI',
   power: { kw: 132, ps: 180, ps_label: 'KM', label: 'Moc' },
   displacement: { value: 1390, label: 'Pojemność' },
   euro: { value: 5, label: 'Norma Euro' }
-}" />
+}} />
 
 <!-- WRC Engine - Blue -->
-<ProductEngine :engine="{
+<ProductEngine engine={{
   code: 'CDLJ',
   name: '1.6 TDI',
   power: { kw: 165, ps: 220, ps_label: 'KM', label: 'Moc' },
   displacement: { value: 1598, label: 'Pojemność' },
   euro: { value: 6, label: 'Norma Euro' }
-}" />
+}} />
 ```
 
 ## Engine List
 
 Display multiple engine codes from an array (from API response).
 
-### import:
+### Import:
 
 ```js
-import ProductEngines from 'spoko-design-system/src/components/Product/ProductEngines.vue'
+import { ProductEngines } from 'spoko-design-system'
 ```
 
 ### Usage:
 
 <div class="component-preview">
      <div class="bg-white p-6 w-full">
-          <ProductEngines client:load engines={[
+          <ProductEngines engines={[
                {
                     id: 13,
                     code: "CAYA",
@@ -165,8 +187,12 @@ import ProductEngines from 'spoko-design-system/src/components/Product/ProductEn
      </div>
 </div>
 
-```vue
-<ProductEngines :engines="[
+```astro
+---
+import { ProductEngines } from 'spoko-design-system';
+---
+
+<ProductEngines engines={[
   {
     id: 13,
     code: 'CAYA',
@@ -185,17 +211,17 @@ import ProductEngines from 'spoko-design-system/src/components/Product/ProductEn
     displacement: { value: 1598, label: 'Pojemność' },
     euro: { value: 5, label: 'Norma Euro' }
   }
-]" />
+]} />
 ```
 
 ### With API Data:
 
 When using data from the API, pass the `part_engines` array directly. The component automatically extracts translations from the nested structure:
 
-```vue
+```astro
 <ProductEngines
-  :engines="product.part_engines"
-  :isPdp="true"
+  engines={product.part_engines}
+  isPdp={true}
 />
 ```
 
@@ -334,7 +360,9 @@ When using data from the API, pass the `part_engines` array directly. The compon
 
 ## Features
 
-- ✅ **Rich Tooltips**: Shows detailed engine specifications on hover (Tippy.js)
+- ✅ **Rich Tooltips**: Shows detailed engine specifications on hover (Tippy.js delegation)
+- ✅ **Performance Optimized**: One global script handles all tooltips efficiently
+- ✅ **SEO-Friendly**: Engine codes rendered as static HTML (no hydration)
 - ✅ **API-Driven Translations**: Labels and units come directly from API
 - ✅ **Multi-language**: Supports Polish (KM), German (PS), English (HP)
 - ✅ **Two-Tone Design**: Dark blue header with light body for better hierarchy
@@ -342,7 +370,6 @@ When using data from the API, pass the `part_engines` array directly. The compon
 - ✅ **Clean Layout**: Flexbox-based design with semantic CSS classes
 - ✅ **Smart Data**: Only shows relevant fields (power, displacement, euro)
 - ✅ **Auto-sorting**: Engines automatically sorted alphabetically by code
-- ✅ **SEO-Friendly**: Static HTML enhanced with client-side tooltips
 - ✅ **Backward Compatible**: Works with both new and old API structures
 - ✅ **Touch Friendly**: Works on mobile devices
 
@@ -358,8 +385,10 @@ Special engine codes are automatically color-coded:
 
 ## Notes
 
+- **Setup required**: Call `initTooltips()` once in your layout to enable tooltips
 - Hover over any engine code to see full specifications in a detailed tooltip
-- Tooltips use Tippy.js with custom two-tone SDS theme
+- Tooltips use Tippy.js delegation pattern (one global handler for all tooltips)
+- **Performance**: No client-side hydration needed - pure Astro components
 - **New API structure**: Labels come from API (e.g., "Moc", "Pojemność", "KM")
 - **No manual translations needed**: The API provides all labels and units
 - The component automatically extracts series value from nested structure
@@ -368,3 +397,18 @@ Special engine codes are automatically color-coded:
 - Commas between engine codes are automatically handled in lists
 - **Backward compatible**: Still works with old flat API structure
 - Tooltip has dark blue header (#001e50) with light gray body (#f3f4f6)
+
+## Migration from Vue to Astro
+
+If upgrading from the old Vue version:
+
+1. **Remove `client:load`** directive from all ProductEngine/ProductEngines usage
+2. **Add tooltip initialization** to your layout:
+   ```astro
+   <script>
+     import { initTooltips } from 'spoko-design-system';
+     initTooltips();
+   </script>
+   ```
+3. **Update imports** to use Astro components (automatically handled by package exports)
+4. **No other changes needed** - props and API structure remain the same

package/src/scripts/tooltips.ts

@@ -1,46 +1,51 @@
-import tippy from 'tippy.js';
-import 'tippy.js/dist/tippy.css';
-import '../styles/tippy-theme.css';
-
 /**
- * Global Tooltip Initializer
- * Automatically enhances all elements with data-tippy-content attribute
- * Works with static HTML - perfect for SEO and Astro static pages
+ * Global tooltip delegation script for SDS
+ * Uses Tippy.js delegation pattern for performance
+ * Handles tooltips for:
+ * - Engine codes (.engine-code)
+ * - PR codes (.btn-prcode)
+ * - Any other elements with data-tippy-content
  */
 
-function initTooltips() {
-  // Destroy existing tooltips to avoid duplicates
-  document.querySelectorAll('[data-tippy-content]').forEach((el: any) => {
-    if (el._tippy) {
-      el._tippy.destroy();
-    }
-  });
+import { delegate } from 'tippy.js';
 
-  // Initialize tooltips for all elements with data-tippy-content
-  tippy('[data-tippy-content]', {
+/**
+ * Initialize tooltips with delegation pattern
+ * Call this once in your layout after page load
+ */
+export function initTooltips() {
+  // Delegate to body for all tooltip targets
+  delegate('body', {
+    target: '[data-tippy-content]', // Any element with data-tippy-content
+    allowHTML: true,
     theme: 'sds',
     placement: 'top',
     arrow: true,
     animation: 'shift-away',
     duration: [200, 150],
     maxWidth: 280,
-    allowHTML: true, // Allow HTML content for rich tooltips
+    // Only show tooltip if there's actual content
+    onShow(instance) {
+      const content = instance.props.content;
+      if (!content || content === '' || content === 'undefined') {
+        return false;
+      }
+    },
   });
 }
 
-// Initialize on page load
-if (typeof window !== 'undefined') {
-  // Initial load
-  document.addEventListener('DOMContentLoaded', () => {
+// Auto-initialize on Astro page load (for View Transitions)
+if (typeof document !== 'undefined') {
+  document.addEventListener('astro:page-load', () => {
     initTooltips();
-    // Reinitialize after a short delay to catch Vue components
-    setTimeout(initTooltips, 100);
   });
 
-  // Reinitialize on Astro page transitions (for View Transitions)
-  document.addEventListener('astro:page-load', () => {
+  // Fallback for non-Astro or initial load
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => {
+      initTooltips();
+    });
+  } else {
     initTooltips();
-    // Reinitialize after a short delay to catch Vue components
-    setTimeout(initTooltips, 100);
-  });
+  }
 }

package/src/styles/main.css

@@ -3,3 +3,7 @@
 @import 'base/grid';
 
 @import 'content.css';
+
+/* Tippy.js for tooltips (used by ProductEngine component) */
+@import 'tippy.js/dist/tippy.css';
+@import './tippy-theme.css';

package/src/utils/product/getEngineTooltipContent.ts

@@ -0,0 +1,163 @@
+/**
+ * Generates HTML content for engine tooltip
+ * Used by both SSR (Astro) and CSR (Tippy.js delegation)
+ */
+
+export interface Engine {
+  id?: number;
+  code: string;
+  name?: string;
+  info?: string | null;
+  serie?: {
+    value: string;
+    label: string;
+  };
+  type?: {
+    value: string;
+    translated: string;
+    label: string;
+  };
+  power?: {
+    kw: number;
+    ps: number;
+    ps_label: string;
+    label: string;
+  };
+  date?: {
+    value: string;
+    label: string;
+  };
+  displacement?: {
+    value: number;
+    label: string;
+  };
+  compression_ratio?: {
+    value: string | null;
+    label: string;
+  };
+  valves?: {
+    value: number | null;
+    label: string;
+  };
+  euro?: {
+    value: number;
+    label: string;
+  };
+  pivot?: any;
+
+  // Backward compatibility - old flat structure
+  kw?: number;
+  ps?: number;
+  cc?: number;
+  c_ratio?: string | null;
+}
+
+export interface EngineTranslations {
+  power?: string;
+  cc?: string;
+  compressionRatio?: string;
+  valves?: string;
+  euro?: string;
+  horsepowerUnit?: string;
+}
+
+const defaultTranslations: EngineTranslations = {
+  power: 'Power',
+  cc: 'CC',
+  compressionRatio: 'C. Ratio',
+  valves: 'Valves',
+  euro: 'Euro',
+  horsepowerUnit: 'PS',
+};
+
+// Helper to get series value (supports both old and new API)
+function getSerieValue(engine: Engine): string {
+  if (engine.serie && typeof engine.serie === 'object') {
+    return engine.serie.value;
+  }
+  // Backward compatibility - old API
+  const serie = engine.serie as any;
+  if (!serie) return '';
+  return serie === 3 ? 'EA288' : serie === 2 ? 'EA189' : `Serie ${serie}`;
+}
+
+export function getEngineTooltipContent(
+  engine: Engine,
+  translations: EngineTranslations = {}
+): string {
+  const t = { ...defaultTranslations, ...translations };
+
+  // Header section
+  let headerContent = `<strong>${engine.name || engine.code}</strong>`;
+  if (engine.info) {
+    headerContent += ` <span class="info">${engine.info}</span>`;
+  }
+  const serieValue = getSerieValue(engine);
+  if (serieValue) {
+    headerContent += `<div class="series-badge">${serieValue}</div>`;
+  }
+
+  const header = `<div class="tooltip-header">${headerContent}</div>`;
+
+  // Specs rows
+  const rows: string[] = [];
+
+  // Power (supports both new and old API structure)
+  const power = engine.power;
+  const oldKw = engine.kw;
+  const oldPs = engine.ps;
+
+  if (power || oldKw || oldPs) {
+    const powerValues: string[] = [];
+    const kw = power?.kw || oldKw;
+    const ps = power?.ps || oldPs;
+    const psLabel = power?.ps_label || t.horsepowerUnit;
+    const powerLabel = power?.label || t.power;
+
+    if (kw) powerValues.push(`${kw} kW`);
+    if (ps) powerValues.push(`${ps} ${psLabel}`);
+
+    if (powerValues.length) {
+      rows.push(
+        `<div class="tooltip-row"><span class="tooltip-label">${powerLabel}:</span><span class="tooltip-value">${powerValues.join(' / ')}</span></div>`
+      );
+    }
+  }
+
+  // Displacement (CC)
+  const displacement = engine.displacement;
+  const oldCc = engine.cc;
+
+  if (displacement || oldCc) {
+    const ccValue = displacement?.value || oldCc;
+    const ccLabel = displacement?.label || t.cc;
+
+    if (ccValue) {
+      rows.push(
+        `<div class="tooltip-row"><span class="tooltip-label">${ccLabel}:</span><span class="tooltip-value">${ccValue} cm³</span></div>`
+      );
+    }
+  }
+
+  // Euro standard
+  const euro = engine.euro;
+
+  if (euro && typeof euro === 'object') {
+    if (euro.value) {
+      rows.push(
+        `<div class="tooltip-row"><span class="tooltip-label">${euro.label}:</span><span class="tooltip-value">Euro ${euro.value}</span></div>`
+      );
+    }
+  } else if (euro) {
+    // Backward compatibility - old API
+    rows.push(
+      `<div class="tooltip-row"><span class="tooltip-label">${t.euro}:</span><span class="tooltip-value">Euro ${euro}</span></div>`
+    );
+  }
+
+  const specsContent = rows.length
+    ? `<div class="tooltip-specs">${rows.join('')}</div>`
+    : '';
+
+  return header + specsContent;
+}

package/uno-config/index.ts

@@ -207,7 +207,7 @@ export function createSdsConfig(customConfig: CustomConfig = {}) {
       presetAttributify(),
       presetIcons({
         scale: 1.2,
-        warn: true, // Show warnings for actual missing icons
+        warn: false, // Disabled to prevent false positives from JS code scanning
         prefix: 'i-',
         extraProperties: {
           'display': 'inline-block',

package/src/components/Product/ProductEngine.vue

@@ -1,240 +0,0 @@
-<script lang="ts" setup>
-import { ref, onMounted, onUnmounted } from 'vue';
-import type { PropType } from 'vue';
-import tippy, { type Instance } from 'tippy.js';
-import 'tippy.js/dist/tippy.css';
-import '../../styles/tippy-theme.css';
-
-/*
-  VAG group (VW/Audi/Skoda/Seat/Porsche/Bentley/Lamborghini/Ducati/Cupra/Scania/MAN) manufacturer Engine Code
-  Displays engine code with detailed tooltip showing: name, power, displacement, dates, etc.
-*/
-
-interface Engine {
-  id?: number;
-  code: string;
-  name?: string;
-  info?: string | null;
-  serie?: {
-    value: string;
-    label: string;
-  };
-  type?: {
-    value: string;
-    translated: string;
-    label: string;
-  };
-  power?: {
-    kw: number;
-    ps: number;
-    ps_label: string;
-    label: string;
-  };
-  date?: {
-    value: string;
-    label: string;
-  };
-  displacement?: {
-    value: number;
-    label: string;
-  };
-  compression_ratio?: {
-    value: string | null;
-    label: string;
-  };
-  valves?: {
-    value: number | null;
-    label: string;
-  };
-  euro?: {
-    value: number;
-    label: string;
-  };
-  pivot?: any;
-
-  // Backward compatibility - old flat structure
-  kw?: number;
-  ps?: number;
-  cc?: number;
-  c_ratio?: string | null;
-}
-
-const props = defineProps({
-  engine: {
-    type: Object as PropType<Engine>,
-    required: true,
-  },
-  showComma: {
-    type: Boolean,
-    default: false,
-    required: false,
-  },
-  translations: {
-    type: Object as PropType<{
-      power?: string;
-      cc?: string;
-      compressionRatio?: string;
-      valves?: string;
-      euro?: string;
-      horsepowerUnit?: string; // 'PS' for German, 'KM' for Polish, 'HP' for English
-    }>,
-    default: () => ({
-      power: 'Power',
-      cc: 'CC',
-      compressionRatio: 'C. Ratio',
-      valves: 'Valves',
-      euro: 'Euro',
-      horsepowerUnit: 'PS',
-    }),
-    required: false,
-  },
-});
-
-const engineRef = ref<HTMLElement | null>(null);
-let tippyInstance: Instance | null = null;
-
-// Helper to get series value (supports both old and new API)
-const getSerieValue = (): string => {
-  if (props.engine.serie && typeof props.engine.serie === 'object') {
-    return props.engine.serie.value;
-  }
-  // Backward compatibility - old API
-  const serie = props.engine.serie as any;
-  if (!serie) return '';
-  return serie === 3 ? 'EA288' : serie === 2 ? 'EA189' : `Serie ${serie}`;
-};
-
-// Generate tooltip HTML content
-const getTooltipContent = () => {
-  // Header section
-  let headerContent = `<strong>${props.engine.name || props.engine.code}</strong>`;
-  if (props.engine.info) {
-    headerContent += ` <span class="info">${props.engine.info}</span>`;
-  }
-  const serieValue = getSerieValue();
-  if (serieValue) {
-    headerContent += `<div class="series-badge">${serieValue}</div>`;
-  }
-
-  const header = `<div class="tooltip-header">${headerContent}</div>`;
-
-  // Specs rows
-  const rows = [];
-
-  // Power (supports both new and old API structure)
-  const power = props.engine.power;
-  const oldKw = props.engine.kw;
-  const oldPs = props.engine.ps;
-
-  if (power || oldKw || oldPs) {
-    const powerValues = [];
-    const kw = power?.kw || oldKw;
-    const ps = power?.ps || oldPs;
-    const psLabel = power?.ps_label || props.translations.horsepowerUnit;
-    const powerLabel = power?.label || props.translations.power;
-
-    if (kw) powerValues.push(`${kw} kW`);
-    if (ps) powerValues.push(`${ps} ${psLabel}`);
-
-    if (powerValues.length) {
-      rows.push(`<div class="tooltip-row"><span class="tooltip-label">${powerLabel}:</span><span class="tooltip-value">${powerValues.join(' / ')}</span></div>`);
-    }
-  }
-
-  // Displacement (CC)
-  const displacement = props.engine.displacement;
-  const oldCc = props.engine.cc;
-
-  if (displacement || oldCc) {
-    const ccValue = displacement?.value || oldCc;
-    const ccLabel = displacement?.label || props.translations.cc;
-
-    if (ccValue) {
-      rows.push(`<div class="tooltip-row"><span class="tooltip-label">${ccLabel}:</span><span class="tooltip-value">${ccValue} cm³</span></div>`);
-    }
-  }
-
-  // Euro standard
-  const euro = props.engine.euro;
-
-  if (euro && typeof euro === 'object') {
-    if (euro.value) {
-      rows.push(`<div class="tooltip-row"><span class="tooltip-label">${euro.label}:</span><span class="tooltip-value">Euro ${euro.value}</span></div>`);
-    }
-  } else if (euro) {
-    // Backward compatibility - old API
-    rows.push(`<div class="tooltip-row"><span class="tooltip-label">${props.translations.euro}:</span><span class="tooltip-value">Euro ${euro}</span></div>`);
-  }
-
-  const specsContent = rows.length
-    ? `<div class="tooltip-specs">${rows.join('')}</div>`
-    : '';
-
-  return header + specsContent;
-};
-
-onMounted(() => {
-  if (engineRef.value) {
-    tippyInstance = tippy(engineRef.value, {
-      content: getTooltipContent(),
-      allowHTML: true,
-      theme: 'sds',
-      placement: 'top',
-      arrow: true,
-      animation: 'shift-away',
-      duration: [200, 150],
-      maxWidth: 280,
-    });
-  }
-});
-
-onUnmounted(() => {
-  if (tippyInstance) {
-    tippyInstance.destroy();
-  }
-});
-</script>
-
-<template>
-  <span
-    ref="engineRef"
-    class="engine-code"
-    :class="`engine-code-${engine.code}`"
-  >
-    {{ engine.code }}<span v-if="showComma">,</span>
-  </span>
-</template>
-
-<style scoped>
-/* Engine Code Styles */
-.engine-code {
-  @apply inline-block mr-1;
-  @apply underline decoration-dotted underline-offset-4 py-0.5;
-  @apply decoration-neutral-light cursor-default;
-  @apply transition-colors duration-200;
-}
-
-.engine-code:hover {
-  @apply decoration-blue-darker dark:decoration-blue-light;
-}
-
-/* Semantic Engine Code Colors */
-/* GTI Engines - Red */
-.engine-code-CAVE,
-.engine-code-CTHE,
-.engine-code-DAJA,
-.engine-code-DAYB {
-  @apply text-red-600 dark:text-red-500;
-}
-
-/* WRC R Engine - Blue */
-.engine-code-CDLJ {
-  @apply text-blue-600 dark:text-blue-500;
-}
-
-/* Special Blue Engines */
-.engine-code-CPTA,
-.engine-code-CZEA {
-  @apply text-blue-700 dark:text-blue-600;
-}
-</style>

package/src/components/Product/ProductEngines.vue

@@ -1,116 +0,0 @@
-<script lang="ts" setup>
-import { computed } from 'vue';
-import type { PropType } from 'vue';
-import ProductEngine from './ProductEngine.vue';
-
-/*
-  ProductEngines wrapper component
-  Displays a list of engine codes with tooltips
-*/
-
-interface Engine {
-  id?: number;
-  code: string;
-  name?: string;
-  info?: string | null;
-  serie?: {
-    value: string;
-    label: string;
-  } | number;
-  type?: {
-    value: string;
-    translated: string;
-    label: string;
-  };
-  power?: {
-    kw: number;
-    ps: number;
-    ps_label: string;
-    label: string;
-  };
-  date?: {
-    value: string;
-    label: string;
-  };
-  displacement?: {
-    value: number;
-    label: string;
-  };
-  compression_ratio?: {
-    value: string | null;
-    label: string;
-  };
-  valves?: {
-    value: number | null;
-    label: string;
-  };
-  euro?: {
-    value: number;
-    label: string;
-  } | number;
-  pivot?: any;
-
-  // Backward compatibility
-  kw?: number;
-  ps?: number;
-  cc?: number;
-}
-
-const props = defineProps({
-  engines: {
-    type: Array as PropType<Engine[]>,
-    default: () => [],
-    required: true,
-  },
-  isPdp: {
-    type: Boolean,
-    default: false,
-    required: false,
-  },
-  translations: {
-    type: Object as PropType<{
-      power?: string;
-      cc?: string;
-      compressionRatio?: string;
-      valves?: string;
-      euro?: string;
-      horsepowerUnit?: string;
-    }>,
-    default: () => ({
-      power: 'Power',
-      cc: 'CC',
-      compressionRatio: 'C. Ratio',
-      valves: 'Valves',
-      euro: 'Euro',
-      horsepowerUnit: 'PS',
-    }),
-    required: false,
-  },
-});
-
-// Sort engines by code
-const sortedEngines = computed(() => {
-  if (!props.engines || !props.engines.length) return [];
-  return [...props.engines].sort((a, b) => {
-    return (a.code || '').localeCompare(b.code || '');
-  });
-});
-</script>
-
-<template>
-  <div v-if="sortedEngines.length" class="engines-list inline-flex flex-wrap items-center gap-x-0.5">
-    <ProductEngine
-      v-for="(engine, index) in sortedEngines"
-      :key="engine.id || index"
-      :engine="engine"
-      :show-comma="index !== sortedEngines.length - 1"
-      :translations="translations"
-    />
-  </div>
-</template>
-
-<style scoped>
-.engines-list {
-  @apply leading-none;
-}
-</style>