Нативний View Transitions API в React 19 та безшовні переходи

'use client';

import * as React from 'react';

/**
 * Перевірка підтримки View Transitions API браузером
 */
export function isViewTransitionSupported(): boolean {
  return typeof document !== 'undefined' && 'startViewTransition' in document;
}

/**
 * Хук реактивного стану з нативною браузерною анімацією переходу
 */
export function useViewTransitionState<T>(initialState: T) {
  const [state, setState] = React.useState<T>(initialState);

  const setViewTransitionState = React.useCallback(
    (nextState: T | ((prev: T) => T)) => {
      // Fallback для браузерів без підтримки: стандартний перехід React 19
      if (!isViewTransitionSupported()) {
        React.startTransition(() => {
          setState(nextState);
        });
        return;
      }

      // Нативний запуск браузерного переходу
      document.startViewTransition(() => {
        React.startTransition(() => {
          setState(nextState);
        });
      });
    },
    []
  );

  return [state, setViewTransitionState] as const;
}

'use client';

import * as React from 'react';
import { isViewTransitionSupported } from '@/hooks/useViewTransitionState';

export function ThemeCircularRevealToggle() {
  const [isDark, setIsDark] = React.useState(true);

  const toggleTheme = (event: React.MouseEvent<HTMLButtonElement>) => {
    const nextDark = !isDark;

    if (!isViewTransitionSupported()) {
      setIsDark(nextDark);
      document.documentElement.classList.toggle('dark', nextDark);
      return;
    }

    // Обчислюємо координати центра кнопки кліку для точки старту анімації
    const rect = event.currentTarget.getBoundingClientRect();
    const x = rect.left + rect.width / 2;
    const y = rect.top + rect.height / 2;

    document.documentElement.style.setProperty('--click-x', `${x}px`);
    document.documentElement.style.setProperty('--click-y', `${y}px`);

    const transition = document.startViewTransition(() => {
      setIsDark(nextDark);
      document.documentElement.classList.toggle('dark', nextDark);
    });

    transition.ready.catch((err: unknown) => {
      console.warn('[View Transition]: Перервано дією користувача', err);
    });
  };

  return (
    <button
      type="button"
      onClick={toggleTheme}
      className="px-4 py-2 rounded-xl bg-bg-surface border border-border text-xs font-mono font-bold text-text-primary hover:border-accent-violet transition-colors cursor-pointer shadow-sm"
    >
      Тема: {isDark ? '🌙 ТЕМНА' : '☀️ СВІТЛА'}
    </button>
  );
}

'use client';

import * as React from 'react';
import { useViewTransitionState } from '@/hooks/useViewTransitionState';

export interface ProductItem {
  readonly id: string;
  readonly name: string;
  readonly price: number;
  readonly category: string;
  readonly description: string;
  readonly color: string;
}

const PRODUCTS: readonly ProductItem[] = [
  {
    id: 'prod-1',
    name: 'Механічна клавіатура Custom 75%',
    price: 190,
    category: 'Периферія',
    description: 'Алюмінієвий корпус, перемикачі Gateron Oil King із заводським змащенням, hot-swap та шумоізоляція Poron.',
    color: 'bg-violet-600',
  },
  {
    id: 'prod-2',
    name: 'Бездротова миша Ultralight',
    price: 130,
    category: 'Периферія',
    description: 'Оптичний сенсор 26 000 DPI, оптичні мікроперемикачі, вага 52 грами та частота опитування 4000 Гц.',
    color: 'bg-cyan-600',
  },
];

export function ProductCatalogMorph() {
  const [selectedId, setSelectedId] = useViewTransitionState<string | null>(null);

  const selectedProduct = PRODUCTS.find((p) => p.id === selectedId);

  return (
    <div className="max-w-4xl mx-auto p-6 space-y-6">
      {!selectedProduct ? (
        /* Сітка списку товарів */
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {PRODUCTS.map((product) => (
            <div
              key={product.id}
              onClick={() => setSelectedId(product.id)}
              className="p-6 rounded-2xl bg-bg-surface border border-border cursor-pointer hover:border-accent-violet/50 transition-colors shadow-md space-y-4"
            >
              <div
                style={{ viewTransitionName: `badge-${product.id}` }}
                className={`w-12 h-12 rounded-xl ${product.color} flex items-center justify-center font-mono font-bold text-white text-sm shadow-inner`}
              >
                #{product.id.slice(-1)}
              </div>

              <div>
                <span className="text-[10px] font-mono uppercase tracking-wider text-accent-cyan font-bold block mb-1">
                  {product.category}
                </span>
                <h3
                  style={{ viewTransitionName: `title-${product.id}` }}
                  className="text-lg font-bold text-text-primary leading-snug"
                >
                  {product.name}
                </h3>
              </div>

              <div
                style={{ viewTransitionName: `price-${product.id}` }}
                className="text-base font-mono font-bold text-text-primary"
              >
                ${product.price}
              </div>
            </div>
          ))}
        </div>
      ) : (
        /* Детальний екран вибраного товару */
        <div className="p-8 rounded-3xl bg-bg-surface border border-accent-violet/40 shadow-2xl space-y-6">
          <div className="flex items-start justify-between">
            <div
              style={{ viewTransitionName: `badge-${selectedProduct.id}` }}
              className={`w-20 h-20 rounded-2xl ${selectedProduct.color} flex items-center justify-center font-mono font-extrabold text-white text-2xl shadow-xl`}
            >
              #{selectedProduct.id.slice(-1)}
            </div>

            <button
              type="button"
              onClick={() => setSelectedId(null)}
              className="px-4 py-2 text-xs font-mono font-semibold rounded-xl bg-bg-elevated border border-border text-text-muted hover:text-white transition-colors cursor-pointer"
            >
              ← Назад до каталогу
            </button>
          </div>

          <div>
            <span className="text-xs font-mono uppercase tracking-wider text-accent-cyan font-bold block mb-1">
              {selectedProduct.category}
            </span>
            <h1
              style={{ viewTransitionName: `title-${selectedProduct.id}` }}
              className="text-2xl sm:text-3xl font-black text-text-primary"
            >
              {selectedProduct.name}
            </h1>
            <div
              style={{ viewTransitionName: `price-${selectedProduct.id}` }}
              className="text-2xl font-mono font-bold text-accent-violet mt-2"
            >
              ${selectedProduct.price}
            </div>
          </div>

          <p className="text-sm text-text-secondary leading-relaxed pt-4 border-t border-border">
            {selectedProduct.description}
          </p>
        </div>
      )}
    </div>
  );
}