@crm-market/template-shared 1.0.6 → 1.0.8

package/composables/useProducts.ts

@@ -1,66 +1,204 @@
 import { ref, computed } from 'vue';
-import { useRuntimeConfig } from '#imports';
+import { tryUseNuxtApp } from '#imports';
 import { getApiBaseUrl } from '../utils/api';
 import { useSiteConfig } from './useSiteConfig';
 
-interface Product {
+export interface ProductImage {
+  id?: string;
+  url: string;
+  isMain?: boolean;
+  alt?: string;
+  sortOrder?: number;
+}
+
+export interface ProductPrice {
+  id?: string;
+  value: string | number;
+  currency?: string;
+  isWholesale?: boolean;
+}
+
+/** Акція, що діє на товар (публічне API магазину) */
+export interface ProductDiscount {
   id: string;
   name: string;
-  price: number;
-  discountPrice?: number;
-  images: string[];
+  type: 'percentage' | 'fixed_amount';
+  value: number | string;
+  /** ISO-дата завершення акції; null — безстрокова */
+  endDate: string | null;
+}
+
+/** Товар у тому вигляді, в якому його віддає публічне API магазину. */
+export interface Product {
+  id: string;
+  title: string;
+  /** Застарілий аліас назви (деякі компоненти шару читають name) */
+  name?: string;
   description?: string;
-  categoryId: string;
-  organizationId: string;
-  isActive: boolean;
+  sku?: string;
+  unit?: string;
+  isActive?: boolean;
+  isFeatured?: boolean;
+  images?: ProductImage[];
+  prices?: ProductPrice[];
+  categories?: { id: string; name: string }[];
+  /** Ціна до знижки (бек віддає, коли на товар діє акція) */
+  oldPrice?: number | string | null;
+  /** Ціна зі знижкою (ефективна ціна товару, якщо є акція) */
+  salePrice?: number | string | null;
+  /** Активна акція товару */
+  discount?: ProductDiscount | null;
   stock?: number;
   rating?: number;
   reviews?: number;
+  createdAt?: string;
+  [key: string]: any;
 }
 
-interface ProductFilters {
+export interface ProductFilters {
   categoryId?: string;
   minPrice?: number;
   maxPrice?: number;
   search?: string;
-  sortBy?: 'price' | 'name' | 'rating' | 'newest';
+  /** Лише товари з активною акцією */
+  discounted?: boolean;
+  sortBy?: 'price' | 'name' | 'title' | 'rating' | 'newest' | 'bestselling';
   sortOrder?: 'asc' | 'desc';
+  limit?: number;
+  offset?: number;
 }
 
+export interface ProductsPage {
+  items: Product[];
+  total: number;
+  /** Сортування, яке бек реально застосував (якщо він його повертає) */
+  sortBy?: string;
+}
+
+// ── Хелпери відображення (чисті функції, використовуються карточками) ──
+
+/** Базова (не оптова) ціна з prices[] у гривнях — без урахування акції. */
+export const getProductBasePrice = (p?: Product | null): number => {
+  if (!p?.prices?.length) return 0;
+  const main = p.prices.find((x) => !x.isWholesale) || p.prices[0];
+  return Number(main.value) || 0;
+};
+
+/** Ефективна ціна: salePrice (акція), інакше базова з prices[]. */
+export const getProductPrice = (p?: Product | null): number => {
+  const sale = Number(p?.salePrice);
+  if (p?.salePrice !== null && p?.salePrice !== undefined && p?.salePrice !== '' && Number.isFinite(sale) && sale >= 0) {
+    return sale;
+  }
+  return getProductBasePrice(p);
+};
+
+/**
+ * Стара ціна (для перекресленої), лише якщо вона більша за поточну.
+ * Бек віддає oldPrice; якщо є лише salePrice — стара = базова з prices[].
+ */
+export const getProductOldPrice = (p?: Product | null): number | null => {
+  const price = getProductPrice(p);
+  const old = Number(p?.oldPrice);
+  if (old > 0 && old > price) return old;
+  const base = getProductBasePrice(p);
+  return base > price ? base : null;
+};
+
+/** Бейдж знижки: «-20%» для відсоткової акції, «-50 ₴» для фіксованої; '' — знижки немає. */
+export const getProductDiscountLabel = (p?: Product | null): string => {
+  const old = getProductOldPrice(p);
+  if (!old) return '';
+  const price = getProductPrice(p);
+  if (p?.discount?.type === 'fixed_amount') return `-${formatPrice(old - price)}`;
+  const pct = Math.round(((old - price) / old) * 100);
+  return pct > 0 ? `-${pct}%` : `-${formatPrice(old - price)}`;
+};
+
+/** Дата завершення акції «31.12.2026» (за Києвом); '' — безстрокова/невідома. */
+export const getProductDiscountEnd = (p?: Product | null): string => {
+  const raw = p?.discount?.endDate;
+  if (!raw || !getProductOldPrice(p)) return '';
+  const ts = Date.parse(raw);
+  if (!Number.isFinite(ts)) return '';
+  // Вручну з частин (Intl у Node і браузері може відрізнятись форматом → гідрація)
+  const parts = new Intl.DateTimeFormat('en-GB', { timeZone: 'Europe/Kyiv', day: '2-digit', month: '2-digit', year: 'numeric' })
+    .formatToParts(new Date(ts));
+  const get = (t: string) => parts.find((x) => x.type === t)?.value || '';
+  return `${get('day')}.${get('month')}.${get('year')}`;
+};
+
+/** «1 234 ₴». Символ додаємо вручну — Intl дає різний результат у Node і браузері (гідрація). */
+export const formatPrice = (n: number): string =>
+  `${new Intl.NumberFormat('uk-UA', { maximumFractionDigits: 0 }).format(n).replace(/ | /g, ' ')} ₴`;
+
+/**
+ * Абсолютний URL медіа. Повні URL лишаємо, відносні ({orgId}/file або /media/..)
+ * доповнюємо публічним media-доменом (public.mediaBase), з фолбеком на прод-домен.
+ */
+export const resolveMediaUrl = (url?: string | null): string => {
+  if (!url) return '';
+  if (/^(https?:|data:|blob:)/.test(url)) return url;
+  let base = '';
+  try {
+    base = String((useRuntimeConfig().public as any).mediaBase || '');
+  } catch { /* поза контекстом Nuxt */ }
+  base = (base || 'https://media.crm-market.com.ua').replace(/\/$/, '');
+  return base + (url.startsWith('/') ? url : '/' + url);
+};
+
+/** HTML → звичайний текст (для мета-тегів і SEO). */
+export const htmlToText = (html?: string | null): string =>
+  String(html || '')
+    .replace(/<(script|style)[\s\S]*?<\/\1>/gi, ' ')
+    .replace(/<[^>]*>/g, ' ')
+    .replace(/&nbsp;/g, ' ')
+    .replace(/&amp;/g, '&')
+    .replace(/\s+/g, ' ')
+    .trim();
+
+/** Головна картинка товару (isMain) або перша; порожній рядок, якщо картинок немає. */
+export const getProductImage = (p?: Product | null): string => {
+  const imgs = p?.images;
+  if (!imgs?.length) return '';
+  const main = imgs.find((i) => i.isMain) || imgs[0];
+  return resolveMediaUrl(typeof main === 'string' ? (main as any) : main?.url);
+};
+
+/** Дістає масив товарів з відповіді: {products|items|data} або голий масив. */
+const extractProducts = (response: any): Product[] => {
+  const list = Array.isArray(response)
+    ? response
+    : response?.products || response?.items || response?.data || [];
+  return Array.isArray(list) ? list : [];
+};
+
 const products = ref<Product[]>([]);
 const loading = ref(false);
 const error = ref<string | null>(null);
 const currentProduct = ref<Product | null>(null);
 
 export const useProducts = () => {
-  const config = useRuntimeConfig();
   const { publicApiToken } = useSiteConfig();
 
-  // Fetch all products with optional filters
+  const request = async <T = any>(path: string, params: Record<string, any> = {}): Promise<T> => {
+    const token = publicApiToken.value;
+    if (!token) throw new Error('Store token not available');
+    // Прибираємо undefined, щоб не слати порожні параметри
+    const clean = Object.fromEntries(Object.entries(params).filter(([, v]) => v !== undefined && v !== ''));
+    return await $fetch<T>(path, { baseURL: getApiBaseUrl(), params: { token, ...clean } });
+  };
+
+  // Список товарів з фільтрами (оновлює глобальний стан; повертає масив — сумісно зі сторінкою каталогу)
   const fetchProducts = async (filters?: ProductFilters) => {
     loading.value = true;
     error.value = null;
-
     try {
-      const token = publicApiToken.value;
-      if (!token) {
-        throw new Error('Store token not available');
-      }
-
-      const params: any = {
-        token,
-        ...filters,
-      };
-
-      const response = await $fetch<{ products: Product[]; total: number }>('/site-template/public/store/products', {
-        baseURL: getApiBaseUrl(),
-        params,
-      });
-
-      products.value = response.products;
-      return response.products;
+      const response = await request('/site-template/public/store/products', filters as any);
+      products.value = extractProducts(response);
+      return products.value;
     } catch (e: any) {
-      error.value = e.message || 'Failed to load products';
+      error.value = 'Не вдалося завантажити товари. Спробуйте пізніше.';
       console.error('Error loading products:', e);
       throw e;
     } finally {
@@ -68,26 +206,16 @@ export const useProducts = () => {
     }
   };
 
-  // Fetch single product by ID
+  // Один товар за id
   const fetchProduct = async (productId: string) => {
     loading.value = true;
     error.value = null;
-
     try {
-      const token = publicApiToken.value;
-      if (!token) {
-        throw new Error('Store token not available');
-      }
-
-      const response = await $fetch<{ product: Product }>(`/site-template/public/store/products/${productId}`, {
-        baseURL: getApiBaseUrl(),
-        params: { token },
-      });
-
-      currentProduct.value = response.product;
-      return response.product;
+      const response = await request<any>(`/site-template/public/store/products/${productId}`);
+      currentProduct.value = response?.product || response;
+      return currentProduct.value;
     } catch (e: any) {
-      error.value = e.message || 'Failed to load product';
+      error.value = 'Не вдалося завантажити товар. Спробуйте пізніше.';
       console.error('Error loading product:', e);
       throw e;
     } finally {
@@ -95,57 +223,84 @@ export const useProducts = () => {
     }
   };
 
-  // Fetch products for a specific section without mutating global state
-  const fetchProductsForSection = async (filters?: ProductFilters & { limit?: number; offset?: number }): Promise<Product[]> => {
+  // Один товар без зміни глобального стану; null — якщо товару нема (404/некоректний id)
+  const fetchProductById = async (productId: string): Promise<Product | null> => {
+    if (!productId) return null;
     try {
-      const token = publicApiToken.value;
-      if (!token) return [];
-
-      const params: any = {
-        token,
-        ...filters,
-      };
+      const response = await request<any>(`/site-template/public/store/products/${encodeURIComponent(productId)}`);
+      const product = response?.product || response;
+      return product?.id ? (product as Product) : null;
+    } catch (e: any) {
+      const status = e?.statusCode || e?.status || e?.response?.status;
+      if (status === 404 || status === 400) return null;
+      throw e;
+    }
+  };
 
-      const response = await $fetch<{ products: Product[]; total: number }>('/site-template/public/store/products', {
-        baseURL: getApiBaseUrl(),
-        params,
-      });
+  // Товари за списком id (пропускає відсутні/недоступні), порядок зберігається
+  const fetchProductsByIds = async (ids: string[]): Promise<Product[]> => {
+    const results = await Promise.all(ids.map((id) => fetchProductById(id).catch(() => null)));
+    return results.filter((p): p is Product => !!p && p.isActive !== false);
+  };
 
-      return response.products;
+  // Сторінка товарів {items,total} без зміни глобального стану; при помилці — порожній результат
+  const fetchPage = async (filters?: ProductFilters): Promise<ProductsPage> => {
+    try {
+      const response = await request('/site-template/public/store/products', filters as any);
+      const items = extractProducts(response);
+      return {
+        items,
+        total: Number(response?.total) || items.length,
+        sortBy: typeof response?.sortBy === 'string' ? response.sortBy : undefined,
+      };
     } catch (e: any) {
-      console.error('Error loading products for section:', e);
-      return [];
+      console.error('Error loading products page:', e);
+      return { items: [], total: 0 };
     }
   };
 
-  // Get products by category
-  const getProductsByCategory = async (categoryId: string) => {
-    return fetchProducts({ categoryId });
-  };
+  // Товари для секції головної (без глобального стану)
+  const fetchProductsForSection = async (filters?: ProductFilters): Promise<Product[]> =>
+    (await fetchPage(filters)).items;
 
-  // Search products
-  const searchProducts = async (query: string) => {
-    return fetchProducts({ search: query });
+  // Акційні товари (?discounted=true). Бек, що ще не знає фільтра, віддає звичайний список —
+  // тому завжди дофільтровуємо локально за наявністю старої ціни.
+  const fetchDiscounted = async (limit = 10): Promise<Product[]> => {
+    // Після await контекст Nuxt губиться (getApiBaseUrl бере useRuntimeConfig) — фолбек у контексті
+    const nuxtApp = tryUseNuxtApp();
+    const onlyDiscounted = (items: Product[]) =>
+      items.filter((p) => p.isActive !== false && getProductOldPrice(p)).slice(0, limit);
+    const found = onlyDiscounted((await fetchPage({ discounted: true, limit })).items);
+    if (found.length) return found;
+    // Бек ще не знає ?discounted (400 або без знижок у відповіді) — шукаємо серед звичайного списку
+    const fallback = () => fetchPage({ limit: 50 });
+    const page = nuxtApp ? await nuxtApp.runWithContext(fallback) : await fallback();
+    return onlyDiscounted(page.items);
   };
 
-  // Computed properties
-  const activeProducts = computed(() =>
-    products.value.filter(p => p.isActive)
-  );
+  // Товари конкретної категорії
+  const fetchByCategory = async (categoryId: string, limit = 10): Promise<Product[]> =>
+    fetchProductsForSection({ categoryId, limit, sortBy: 'newest' });
 
-  const discountedProducts = computed(() =>
-    activeProducts.value.filter(p => p.discountPrice && p.discountPrice < p.price)
-  );
+  // Рекомендовані товари магазину
+  const fetchFeatured = async (limit = 8): Promise<Product[]> => {
+    try {
+      return extractProducts(await request('/site-template/public/store/products/featured', { limit }));
+    } catch (e: any) {
+      console.error('Error loading featured products:', e);
+      return [];
+    }
+  };
 
-  const bestRatedProducts = computed(() =>
-    [...activeProducts.value]
-      .sort((a, b) => (b.rating || 0) - (a.rating || 0))
-      .slice(0, 10)
-  );
+  const getProductsByCategory = (categoryId: string) => fetchProducts({ categoryId });
+  const searchProducts = (query: string) => fetchProducts({ search: query });
 
-  const newestProducts = computed(() =>
-    [...activeProducts.value].slice(0, 10)
+  const activeProducts = computed(() => products.value.filter((p) => p.isActive !== false));
+  const discountedProducts = computed(() => activeProducts.value.filter((p) => getProductOldPrice(p)));
+  const bestRatedProducts = computed(() =>
+    [...activeProducts.value].sort((a, b) => (b.rating || 0) - (a.rating || 0)).slice(0, 10),
   );
+  const newestProducts = computed(() => [...activeProducts.value].slice(0, 10));
 
   return {
     products,
@@ -154,7 +309,13 @@ export const useProducts = () => {
     error,
     fetchProducts,
     fetchProduct,
+    fetchProductById,
+    fetchProductsByIds,
+    fetchPage,
     fetchProductsForSection,
+    fetchByCategory,
+    fetchFeatured,
+    fetchDiscounted,
     getProductsByCategory,
     searchProducts,
     activeProducts,

package/composables/useRecent.ts

@@ -0,0 +1,30 @@
+import { useState } from '#imports';
+
+const RECENT_KEY = 'recent_products';
+const MAX_RECENT = 8;
+
+/** Нещодавно переглянуті товари (лише id, найновіші першими) у localStorage. */
+export const useRecent = () => {
+  const ids = useState<string[]>('recent-ids', () => []);
+
+  const load = () => {
+    try {
+      const arr = JSON.parse(localStorage.getItem(RECENT_KEY) || '[]');
+      ids.value = Array.isArray(arr) ? arr.filter((i) => typeof i === 'string').slice(0, MAX_RECENT) : [];
+    } catch {
+      ids.value = [];
+    }
+  };
+
+  /** Додає товар на початок списку (дублікати прибирає). Лише на клієнті. */
+  const track = (id: string) => {
+    if (!id || typeof window === 'undefined') return;
+    load();
+    ids.value = [id, ...ids.value.filter((i) => i !== id)].slice(0, MAX_RECENT);
+    try {
+      localStorage.setItem(RECENT_KEY, JSON.stringify(ids.value));
+    } catch { /* сховище недоступне */ }
+  };
+
+  return { ids, load, track };
+};

package/composables/useSanitize.ts

@@ -0,0 +1,76 @@
+/**
+ * Санітизація HTML продавця (SSR + клієнт, без DOM і зайвих залежностей).
+ * Білий список тегів/атрибутів: все інше викидається, небезпечні блоки
+ * (script, style, iframe...) видаляються разом із вмістом, URI — лише безпечні схеми.
+ */
+const ALLOWED_TAGS = new Set([
+  'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'br', 'hr', 'strong', 'b', 'em', 'i', 'u', 's',
+  'ul', 'ol', 'li', 'a', 'blockquote', 'span', 'div', 'img', 'table', 'thead', 'tbody',
+  'tr', 'td', 'th', 'pre', 'code',
+]);
+const VOID_TAGS = new Set(['br', 'hr', 'img']);
+const ALLOWED_ATTRS: Record<string, string[]> = {
+  a: ['href', 'title', 'target', 'rel'],
+  img: ['src', 'alt', 'title'],
+};
+const GLOBAL_ATTRS = ['class'];
+
+const escapeAttr = (v: string) =>
+  v.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+
+// Перевірка URI: прибираємо пробіли/керуючі символи, які ламають детекцію схеми
+const isSafeUri = (raw: string, allowMail: boolean): boolean => {
+  const v = raw.replace(/[\u0000- \u007f-\u009f]/g, '').toLowerCase();
+  if (!v) return false;
+  if (/^(https?:|\/(?!\/)|#)/.test(v)) return true;
+  if (allowMail && /^(mailto:|tel:)/.test(v)) return true;
+  return false;
+};
+
+const DANGEROUS_BLOCK =
+  /<(script|style|iframe|object|embed|svg|math|template|noscript|textarea|select|form)\b[\s\S]*?(?:<\/\1\s*>|$)/gi;
+
+export const sanitizeHtml = (html?: string | null): string => {
+  if (!html) return '';
+  const src = String(html).replace(/<!--[\s\S]*?(?:-->|$)/g, '').replace(DANGEROUS_BLOCK, '');
+  const tagRe = /<(\/?)([a-zA-Z][a-zA-Z0-9]*)\b((?:"[^"]*"|'[^']*'|[^>"'])*)>/g;
+  const attrRe = /([a-zA-Z_:][-\w:.]*)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'>]+)))?/g;
+  const text = (s: string) => s.replace(/</g, '&lt;');
+
+  let out = '';
+  let last = 0;
+  let m: RegExpExecArray | null;
+  while ((m = tagRe.exec(src))) {
+    out += text(src.slice(last, m.index));
+    last = tagRe.lastIndex;
+    const closing = m[1] === '/';
+    const tag = m[2].toLowerCase();
+    if (!ALLOWED_TAGS.has(tag)) continue;
+    if (closing) {
+      if (!VOID_TAGS.has(tag)) out += `</${tag}>`;
+      continue;
+    }
+    const allowed = [...(ALLOWED_ATTRS[tag] || []), ...GLOBAL_ATTRS];
+    let attrs = '';
+    let hasBlank = false;
+    let am: RegExpExecArray | null;
+    attrRe.lastIndex = 0;
+    while ((am = attrRe.exec(m[3]))) {
+      const name = am[1].toLowerCase();
+      const val = am[2] ?? am[3] ?? am[4] ?? '';
+      if (!allowed.includes(name)) continue;
+      if (name === 'href' && !isSafeUri(val, true)) continue;
+      if (name === 'src' && !isSafeUri(val, false)) continue;
+      if (name === 'target') {
+        if (val !== '_blank') continue;
+        hasBlank = true;
+      }
+      if (name === 'rel') continue; // rel виставляємо самі
+      attrs += ` ${name}="${escapeAttr(val)}"`;
+    }
+    if (tag === 'a' && hasBlank) attrs += ' rel="noopener noreferrer"';
+    out += `<${tag}${attrs}${VOID_TAGS.has(tag) ? ' /' : ''}>`;
+  }
+  out += text(src.slice(last));
+  return out;
+};

package/composables/useSiteConfig.ts

@@ -1,6 +1,8 @@
 import { computed } from 'vue';
-import { useState, useRuntimeConfig, useRoute, useRequestHeaders } from '#imports';
+import { useState, useRequestHeaders, useHead, useRuntimeConfig } from '#imports';
 import { getApiBaseUrl } from '../utils/api';
+import { resolveMediaUrl } from './useProducts';
+import { resolveTheme, FONT_FALLBACK } from './useThemeVars';
 
 interface ColorScheme {
   primary?: string;
@@ -61,13 +63,14 @@ export const useSiteConfig = () => {
   const loading = useState<boolean>('site-config-loading', () => false);
   const error = useState<string | null>('site-config-error', () => null);
 
-  const config = useRuntimeConfig();
-
   // Отримати subdomain з host — працює і на SSR, і на клієнті
   const getSubdomain = () => {
     let hostname = '';
 
     if (import.meta.server) {
+      // Фіксований магазин екземпляра (деплой «один контейнер — один клієнт»): STORE_SUBDOMAIN має пріоритет над хостом
+      const fixed = String((useRuntimeConfig() as any).storeSubdomain || '').trim();
+      if (fixed) return fixed;
       // SSR: отримуємо host з request headers
       const headers = useRequestHeaders(['host', 'x-forwarded-host']);
       hostname = (headers['x-forwarded-host'] || headers['host'] || '').split(':')[0];
@@ -77,6 +80,10 @@ export const useSiteConfig = () => {
     }
 
     const parts = hostname.split('.');
+    // Локальна розробка: shop.localhost → "shop"
+    if (parts.length === 2 && parts[1] === 'localhost') {
+      return parts[0];
+    }
     // Формат: subdomain.domain.com або subdomain.domain.com.ua
     if (parts.length >= 3) {
       return parts[0];
@@ -122,7 +129,21 @@ export const useSiteConfig = () => {
   const applyCustomization = () => {
     if (!siteConfig.value?.customization) return;
 
-    const { colors, fonts, customCSS } = siteConfig.value.customization;
+    const { customCSS } = siteConfig.value.customization;
+    // Кольори/шрифти: values.colors/values.fonts («Налаштування шаблону») мають пріоритет над старими полями
+    const theme = resolveTheme(siteConfig.value.customization);
+    const colors = {
+      primary: theme.colors.primary,
+      secondary: theme.colors.secondary,
+      accent: theme.colors.accent,
+      bodyColor: theme.colors.body,
+    };
+    const fonts = {
+      ...(siteConfig.value.customization.fonts || {}),
+      // Той самий стек, що й у useThemeVars (з фолбеком для кирилиці)
+      headingFont: theme.fonts.heading ? `'${theme.fonts.heading}', ${FONT_FALLBACK}` : '',
+      bodyFont: theme.fonts.body ? `'${theme.fonts.body}', ${FONT_FALLBACK}` : '',
+    };
 
     if (import.meta.client && colors) {
       const root = document.documentElement;
@@ -172,52 +193,35 @@ export const useSiteConfig = () => {
     }
   };
 
-  // Update meta tags for SEO
+  // SEO: мета-теги з налаштувань сайту (SSR-сумісно через useHead)
   const updateMetaTags = () => {
     if (!siteConfig.value) return;
 
-    const { siteName, siteDescription, logoUrl } = siteConfig.value;
-    const seo = siteConfig.value.customization?.content?.seo;
-
-    if (import.meta.client) {
-      if (siteName) {
-        document.title = siteName;
-      }
-
-      // Update or create meta tags
-      const updateMetaTag = (name: string, content: string) => {
-        let meta = document.querySelector(`meta[name="${name}"]`);
-        if (!meta) {
-          meta = document.createElement('meta');
-          meta.setAttribute('name', name);
-          document.head.appendChild(meta);
-        }
-        meta.setAttribute('content', content);
-      };
-
-      if (siteDescription) {
-        updateMetaTag('description', siteDescription);
-      }
-
-      if (seo?.metaTitle) {
-        updateMetaTag('title', seo.metaTitle);
-      }
-
-      if (seo?.metaKeywords) {
-        updateMetaTag('keywords', seo.metaKeywords);
-      }
-
-      // Open Graph tags
-      if (seo?.ogTitle) {
-        updateMetaTag('og:title', seo.ogTitle);
-      }
-      if (seo?.ogDescription) {
-        updateMetaTag('og:description', seo.ogDescription);
-      }
-      if (seo?.ogImage || logoUrl) {
-        updateMetaTag('og:image', seo?.ogImage || logoUrl);
-      }
-    }
+    const { siteName, siteDescription, logoUrl, faviconUrl } = siteConfig.value;
+    // SEO приходить верхнім полем конфігу (seo), старіші конфіги тримали його в customization.content.seo
+    const seo = (siteConfig.value as any).seo || siteConfig.value.customization?.content?.seo || {};
+
+    const title = seo.metaTitle || siteName;
+    const description = seo.metaDescription || siteDescription;
+    const ogImage = resolveMediaUrl(seo.ogImage || logoUrl);
+
+    const meta: Array<Record<string, string>> = [];
+    const add = (key: 'name' | 'property', id: string, content?: string) => {
+      if (content) meta.push({ [key]: id, content });
+    };
+    add('name', 'description', description);
+    add('name', 'keywords', seo.metaKeywords);
+    add('property', 'og:title', seo.ogTitle || title);
+    add('property', 'og:description', seo.ogDescription || description);
+    add('property', 'og:image', ogImage);
+    add('property', 'og:site_name', siteName);
+
+    useHead({
+      ...(title ? { title } : {}),
+      meta,
+      // favicon може бути відносним шляхом медіа-сервера — доповнюємо mediaBase
+      link: faviconUrl ? [{ rel: 'icon', href: resolveMediaUrl(faviconUrl) }] : [],
+    });
   };
 
   // Computed properties