uifolio 0.6.0 → 0.7.0

package/src/components/animations/horizontal-accordion.tsx

@@ -0,0 +1,142 @@
+import { useRef, useState } from 'react'
+import type { KeyboardEvent } from 'react'
+import { ArrowRight } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { makeMotionCards } from './data'
+
+export interface HorizontalAccordionProps {
+  count?: number
+  delay?: number
+  duration?: number
+  easing?: string
+}
+
+export function HorizontalAccordion({
+  count = 6,
+  delay = 0,
+  duration = 500,
+  easing = 'cubic-bezier(0.65, 0, 0.35, 1)',
+}: HorizontalAccordionProps) {
+  const cards = makeMotionCards(count)
+  const [active, setActive] = useState(0)
+  const current = Math.min(active, cards.length - 1)
+  const compact = count > 5
+  const buttons = useRef<Array<HTMLButtonElement | null>>([])
+
+  const go = (index: number) => {
+    const next = (index + cards.length) % cards.length
+    setActive(next)
+    buttons.current[next]?.focus()
+  }
+
+  const handleKeyDown = (index: number, event: KeyboardEvent<HTMLButtonElement>) => {
+    if (event.key === 'ArrowRight') {
+      event.preventDefault()
+      go(index + 1)
+    }
+    if (event.key === 'ArrowLeft') {
+      event.preventDefault()
+      go(index - 1)
+    }
+    if (event.key === 'Home') {
+      event.preventDefault()
+      go(0)
+    }
+    if (event.key === 'End') {
+      event.preventDefault()
+      go(cards.length - 1)
+    }
+  }
+
+  return (
+    <div className="flex h-[400px] gap-1.5 overflow-hidden rounded-sm border bg-card/60 p-1.5 sm:h-[460px] sm:gap-2 sm:p-2">
+      {cards.map((card, index) => {
+        const isActive = index === current
+        return (
+          <button
+            key={card.id}
+            ref={(element) => {
+              buttons.current[index] = element
+            }}
+            type="button"
+            onClick={() => setActive(index)}
+            onPointerEnter={(event) => {
+              if (event.pointerType === 'mouse') setActive(index)
+            }}
+            onFocus={() => setActive(index)}
+            onKeyDown={(event) => handleKeyDown(index, event)}
+            aria-pressed={isActive}
+            aria-label={card.title}
+            tabIndex={isActive ? 0 : -1}
+            style={{
+              transitionDelay: `${delay}ms`,
+              transitionDuration: `${duration}ms`,
+              transitionTimingFunction: easing,
+            }}
+            className={cn(
+              'relative min-w-0 basis-0 overflow-hidden rounded-sm border text-left outline-none transition-[flex-grow,background-color,color] focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-inset',
+              isActive
+                ? compact
+                  ? 'grow-[4.2] border-primary/50 bg-primary text-primary-foreground shadow-lg max-sm:grow-[6.2]'
+                  : 'grow-[4.2] border-primary/50 bg-primary text-primary-foreground shadow-lg'
+                : compact
+                  ? 'grow-[0.7] border-border bg-muted/30 text-muted-foreground hover:bg-muted hover:text-foreground max-sm:grow-[0.3]'
+                  : 'grow-[0.7] border-border bg-muted/30 text-muted-foreground hover:bg-muted hover:text-foreground',
+            )}
+          >
+            <span
+              className={cn(
+                'absolute right-2 top-1 font-mono text-5xl font-black leading-none tracking-tighter transition-opacity sm:text-7xl',
+                isActive ? 'opacity-20' : 'opacity-10',
+                !isActive && compact && 'max-sm:hidden',
+              )}
+            >
+              {card.number}
+            </span>
+
+            <span
+              className={cn(
+                'absolute bottom-3 left-3 whitespace-nowrap text-[10px] font-semibold uppercase tracking-[0.2em] [writing-mode:vertical-rl] sm:bottom-4 sm:left-4',
+                isActive ? 'opacity-0' : 'opacity-100',
+                compact && 'max-sm:left-1/2 max-sm:-translate-x-1/2 max-sm:text-[8px] max-sm:tracking-[0.12em]',
+              )}
+            >
+              {card.title}
+            </span>
+
+            <span
+              className={cn(
+                'absolute inset-x-0 bottom-0 block p-4 transition-all sm:p-5',
+                isActive ? 'translate-y-0 opacity-100' : 'translate-y-4 opacity-0',
+              )}
+              style={{
+                transitionDelay: `${delay}ms`,
+                transitionDuration: `${duration}ms`,
+                transitionTimingFunction: easing,
+              }}
+            >
+              <span className="block text-[9px] font-bold uppercase tracking-[0.22em] opacity-55">
+                Étape {card.number} · {card.kicker}
+              </span>
+              <span
+                className={cn(
+                  'display mt-2 block text-3xl leading-[0.95] sm:text-5xl',
+                  compact && 'max-sm:text-2xl',
+                )}
+              >
+                {card.title}
+              </span>
+              <span className="mt-3 block max-w-xs text-[11px] leading-relaxed opacity-65">
+                {card.description}
+              </span>
+              <span className="mt-4 inline-flex items-center gap-1.5 text-[10px] font-semibold uppercase tracking-[0.16em]">
+                Continuer
+                <ArrowRight className="size-3.5" />
+              </span>
+            </span>
+          </button>
+        )
+      })}
+    </div>
+  )
+}

package/src/components/animations/horizontal-story.tsx

@@ -0,0 +1,204 @@
+import { useEffect, useRef, useState } from 'react'
+import { ArrowDown } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { makeMotionCards } from './data'
+import { cardBackground, paletteAura, type CardPalette } from './palette'
+
+export interface HorizontalStoryProps {
+  count?: number
+  palette?: CardPalette
+  delay?: number
+  duration?: number
+  easing?: string
+}
+
+export function HorizontalStory({
+  count = 6,
+  palette,
+  delay = 0,
+  duration = 500,
+  easing = 'cubic-bezier(0.65, 0, 0.35, 1)',
+}: HorizontalStoryProps) {
+  const cards = makeMotionCards(count).map((card) => ({
+    ...card,
+    gradient: cardBackground(palette, card.gradient),
+  }))
+  const section = useRef<HTMLDivElement>(null)
+  const viewport = useRef<HTMLDivElement>(null)
+  const track = useRef<HTMLDivElement>(null)
+  const flat = palette?.mode === 'solid'
+  const [progress, setProgress] = useState(0)
+  const [distance, setDistance] = useState(0)
+
+  useEffect(() => {
+    const measure = () => {
+      const trackElement = track.current
+      const viewportElement = viewport.current
+      if (!trackElement || !viewportElement) return
+      setDistance(Math.max(0, trackElement.scrollWidth - viewportElement.clientWidth))
+    }
+
+    measure()
+    const observer = new ResizeObserver(measure)
+    if (track.current) observer.observe(track.current)
+    if (viewport.current) observer.observe(viewport.current)
+    window.addEventListener('resize', measure)
+    return () => {
+      observer.disconnect()
+      window.removeEventListener('resize', measure)
+    }
+  }, [count])
+
+  useEffect(() => {
+    let frame = 0
+    const update = () => {
+      cancelAnimationFrame(frame)
+      frame = requestAnimationFrame(() => {
+        const element = section.current
+        if (!element) return
+        const total = element.offsetHeight - window.innerHeight + 57
+        const top = element.getBoundingClientRect().top - 57
+        setProgress(total > 0 ? Math.min(1, Math.max(0, -top / total)) : 0)
+      })
+    }
+
+    update()
+    window.addEventListener('scroll', update, { passive: true })
+    window.addEventListener('resize', update)
+    return () => {
+      window.removeEventListener('scroll', update)
+      window.removeEventListener('resize', update)
+      cancelAnimationFrame(frame)
+    }
+  }, [])
+
+  const active = Math.min(cards.length - 1, Math.round(progress * (cards.length - 1)))
+
+  return (
+    <>
+      <div
+        ref={section}
+        className="relative hidden md:block"
+        style={{ height: `calc(100dvh + ${(cards.length - 1) * 60}vh)` }}
+      >
+        <div className="sticky top-[57px] h-[calc(100dvh-57px)] overflow-hidden rounded-sm border bg-card/60">
+          <div
+            aria-hidden
+            className="pointer-events-none absolute inset-0"
+            style={{
+              background: paletteAura(palette),
+            }}
+          />
+
+          <div className="absolute inset-x-0 top-0 z-20 flex items-center justify-between px-5 py-4">
+            <span className="inline-flex items-center gap-2 font-mono text-[9px] uppercase tracking-[0.22em] text-muted-foreground">
+              <ArrowDown className="size-3" />
+              Scroll pour avancer
+            </span>
+            <span className="font-mono text-[9px] uppercase tracking-[0.22em] text-muted-foreground">
+              {String(active + 1).padStart(2, '0')} / {String(cards.length).padStart(2, '0')}
+            </span>
+          </div>
+
+          <div ref={viewport} className="flex h-full items-center overflow-hidden">
+            <div
+              ref={track}
+              className="flex w-max items-center gap-5 pl-[6vw] pr-[12vw] will-change-transform"
+              style={{ transform: `translate3d(-${progress * distance}px, 0, 0)` }}
+            >
+              {cards.map((card, index) => {
+                const isActive = index === active
+                return (
+                  <article
+                    key={card.id}
+                    aria-current={isActive ? 'step' : undefined}
+                    className={cn(
+                      'relative h-[min(62vh,500px)] w-[min(68vw,580px)] shrink-0 overflow-hidden rounded-sm border text-left transition-[opacity,border-color,transform]',
+                      isActive
+                        ? 'border-primary/50 opacity-100'
+                        : 'border-border opacity-45',
+                    )}
+                    data-motion-card
+                    style={{
+                      background: card.gradient,
+                      transitionDelay: `${delay}ms`,
+                      transitionDuration: `${duration}ms`,
+                      transitionTimingFunction: easing,
+                    }}
+                  >
+                    {!flat && (
+                      <>
+                        <span data-card-scrim className="absolute inset-0 bg-black/35" />
+                        <span data-card-scrim className="absolute inset-x-0 bottom-0 h-2/3 bg-gradient-to-t from-black/85 via-black/30 to-transparent" />
+                      </>
+                    )}
+
+                    <span className="absolute right-5 top-3 font-mono text-7xl font-black leading-none tracking-tighter text-white/15">
+                      {card.number}
+                    </span>
+                    <span className="absolute left-5 top-5 text-[9px] font-semibold uppercase tracking-[0.22em] text-white/60">
+                      Chapitre {card.number} · {card.kicker}
+                    </span>
+
+                    <span className="absolute inset-x-0 bottom-0 block p-6">
+                      <span className="display block text-4xl leading-none text-white lg:text-5xl">
+                        {card.title}
+                      </span>
+                      <span className="mt-3 block max-w-md text-[12px] leading-relaxed text-white/70">
+                        {card.description}
+                      </span>
+                    </span>
+                  </article>
+                )
+              })}
+            </div>
+          </div>
+
+          <div className="absolute inset-x-0 bottom-0 z-20 px-5 py-4">
+            <div className="h-px overflow-hidden bg-border">
+              <div
+                className="h-full bg-primary transition-[width] duration-150"
+                style={{ width: `${Math.round(progress * 100)}%` }}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="md:hidden">
+        <div className="flex snap-x snap-mandatory gap-3 overflow-x-auto pb-2 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+          {cards.map((card) => (
+            <article
+              key={card.id}
+              className="relative h-[340px] w-[82%] shrink-0 snap-center overflow-hidden rounded-sm border border-border"
+              data-motion-card
+              style={{ background: card.gradient }}
+            >
+              {!flat && (
+                <>
+                  <span data-card-scrim className="absolute inset-0 bg-black/35" />
+                  <span data-card-scrim className="absolute inset-x-0 bottom-0 h-2/3 bg-gradient-to-t from-black/85 via-black/30 to-transparent" />
+                </>
+              )}
+              <span className="absolute left-4 top-4 font-mono text-[10px] tracking-[0.2em] text-white/70">
+                {card.number}
+              </span>
+              <span className="absolute inset-x-0 bottom-0 block p-5">
+                <span className="block text-[9px] font-semibold uppercase tracking-[0.22em] text-white/60">
+                  {card.kicker}
+                </span>
+                <span className="display mt-1.5 block text-3xl leading-none text-white">
+                  {card.title}
+                </span>
+                <span className="mt-2 block text-[11px] leading-relaxed text-white/70">
+                  {card.description}
+                </span>
+              </span>
+            </article>
+          ))}
+        </div>
+        <p className="mt-1 text-[10px] text-muted-foreground">Glisse horizontalement.</p>
+      </div>
+    </>
+  )
+}

package/src/components/animations/image-crossfade.tsx

@@ -0,0 +1,276 @@
+import { useEffect, useRef, useState } from 'react'
+import { useReducedMotion } from '@/lib/use-reduced-motion'
+
+export interface CrossfadeImage {
+  src: string
+  alt: string
+  kicker: string
+  title: string
+  description: string
+}
+
+const defaultOverlay =
+  'linear-gradient(to top, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.35))'
+
+const defaultImages: CrossfadeImage[] = [
+  {
+    src: '/crossfade-1.svg',
+    alt: 'Hills at sunset, in amber and coral tones.',
+    kicker: '01 — Light',
+    title: 'Dawn',
+    description: 'The day settles over the reliefs, the colors warm up.',
+  },
+  {
+    src: '/crossfade-2.svg',
+    alt: 'Turquoise sea horizon under a pale moon.',
+    kicker: '02 — Tide',
+    title: 'Ocean',
+    description: 'A horizon line, two tones, and the motion that ties them together.',
+  },
+  {
+    src: '/crossfade-3.svg',
+    alt: 'Deep forest crossed by a green mist.',
+    kicker: '03 — Canopy',
+    title: 'Forest',
+    description: 'Silhouettes answer each other in filtered light.',
+  },
+  {
+    src: '/crossfade-4.svg',
+    alt: 'Nocturne mountains under an indigo sky and a clear moon.',
+    kicker: '04 — Night',
+    title: 'Night',
+    description: 'When the light drops, the outlines become secrets.',
+  },
+]
+
+function clamp(value: number) {
+  return Math.min(1, Math.max(0, value))
+}
+
+function StaticGallery({ images }: { images: CrossfadeImage[] }) {
+  return (
+    <div className="grid gap-3 sm:grid-cols-2">
+      {images.map((image) => (
+        <figure key={image.src} className="overflow-hidden rounded-sm border bg-card">
+          <img
+            src={image.src}
+            alt={image.alt}
+            loading="lazy"
+            decoding="async"
+            className="aspect-[16/10] w-full object-cover"
+          />
+          <figcaption className="px-3 py-2.5">
+            <span className="text-[9px] font-semibold uppercase tracking-[0.16em] text-primary">
+              {image.kicker}
+            </span>
+            <p className="mt-0.5 text-sm font-semibold">{image.title}</p>
+          </figcaption>
+        </figure>
+      ))}
+    </div>
+  )
+}
+
+export interface ImageCrossfadeProps {
+  images?: CrossfadeImage[]
+  overlay?: string
+  delay?: number
+  duration?: number
+  easing?: string
+}
+
+export function ImageCrossfade({
+  images = defaultImages,
+  overlay = defaultOverlay,
+  delay = 0,
+  duration = 500,
+  easing = 'ease-out',
+}: ImageCrossfadeProps) {
+  const list = images.length > 0 ? images : defaultImages
+  const section = useRef<HTMLDivElement>(null)
+  const [progress, setProgress] = useState(0)
+  const reduced = useReducedMotion()
+
+  useEffect(() => {
+    if (reduced) return
+
+    let frame = 0
+    const update = () => {
+      cancelAnimationFrame(frame)
+      frame = requestAnimationFrame(() => {
+        const element = section.current
+        if (!element) return
+        const total = element.offsetHeight - window.innerHeight + 57
+        const top = element.getBoundingClientRect().top - 57
+        setProgress(total > 0 ? Math.min(1, Math.max(0, -top / total)) : 0)
+      })
+    }
+
+    update()
+    window.addEventListener('scroll', update, { passive: true })
+    window.addEventListener('resize', update)
+    return () => {
+      window.removeEventListener('scroll', update)
+      window.removeEventListener('resize', update)
+      cancelAnimationFrame(frame)
+    }
+  }, [reduced])
+
+  if (reduced) return <StaticGallery images={list} />
+
+  const slideCount = list.length
+  const maxIndex = Math.max(1, slideCount - 1)
+  const position = slideCount <= 1 ? 0 : progress * maxIndex
+  const index = Math.min(slideCount - 1, Math.floor(position))
+  const blend = slideCount <= 1 ? 0 : position - index
+  const textT = clamp((blend - 0.44) / 0.12)
+  const textEased = textT * textT * (3 - 2 * textT)
+  const active = Math.min(slideCount - 1, Math.round(position))
+  const scale = 1.02 + progress * 0.04
+
+  const goTo = (target: number) => {
+    const element = section.current
+    if (!element) return
+    const total = element.offsetHeight - window.innerHeight + 57
+    const top = element.getBoundingClientRect().top + window.scrollY - 57
+    window.scrollTo({
+      top: top + total * (target / maxIndex),
+      behavior: 'smooth',
+    })
+  }
+
+  return (
+    <div
+      ref={section}
+      className="relative"
+      style={{ height: `${Math.max(2, slideCount) * 100}vh` }}
+    >
+      <div className="sticky top-[57px] flex h-[calc(100dvh-57px)] items-center justify-center px-0 py-2 sm:px-4 sm:py-4">
+        <div className="relative flex h-[min(calc(100dvh-85px),680px)] w-full max-w-5xl flex-col overflow-hidden rounded-sm border bg-card shadow-xl sm:flex-row">
+          <div className="relative h-[42%] w-full shrink-0 overflow-hidden bg-muted sm:h-auto sm:min-h-0 sm:flex-1">
+            {list.map((image, imageIndex) => {
+              const isCurrent = slideCount > 1 && imageIndex === index
+              const isNext = slideCount > 1 && imageIndex === index + 1
+              const visible = slideCount <= 1 ? imageIndex === 0 : isCurrent || isNext
+              return (
+                <img
+                  key={image.src}
+                  src={image.src}
+                  alt={image.alt}
+                  loading="eager"
+                  decoding="async"
+                  draggable={false}
+                  aria-hidden={imageIndex !== active}
+                  data-image-slide
+                  className="absolute inset-0 h-full w-full object-cover will-change-[clip-path,transform]"
+                  style={{
+                    opacity: visible ? 1 : 0,
+                    zIndex: isCurrent ? 2 : isNext ? 1 : 0,
+                    clipPath: isCurrent ? `inset(0 0 ${blend * 100}% 0)` : undefined,
+                    transform: `scale(${scale})`,
+                    transitionProperty: 'opacity',
+                    transitionDelay: `${delay}ms`,
+                    transitionDuration: `${duration}ms`,
+                    transitionTimingFunction: easing,
+                  }}
+                />
+              )
+            })}
+
+            <div
+              aria-hidden
+              className="pointer-events-none absolute inset-0"
+              style={{ background: overlay }}
+            />
+
+            <div className="absolute inset-x-0 top-0 flex items-center justify-between gap-3 px-4 py-3 text-white sm:px-5">
+              <span className="text-[9px] font-semibold uppercase tracking-[0.2em] text-white/80">
+                Images fondues
+              </span>
+              <span className="font-mono text-[9px] uppercase tracking-[0.18em] text-white/80">
+                {String(active + 1).padStart(2, '0')} / {String(slideCount).padStart(2, '0')}
+              </span>
+            </div>
+          </div>
+
+          <div className="relative flex min-h-0 flex-1 flex-col justify-between border-t bg-card p-5 sm:w-[43%] sm:flex-none sm:border-l sm:border-t-0 sm:p-7">
+            <div className="relative min-h-0 flex-1">
+              {list.map((image, imageIndex) => {
+                const opacity =
+                  slideCount <= 1
+                    ? imageIndex === 0
+                      ? 1
+                      : 0
+                    : imageIndex === index
+                      ? 1 - textEased
+                      : imageIndex === index + 1
+                        ? textEased
+                        : 0
+                return (
+                  <div
+                    key={image.src}
+                    data-text-slide
+                    data-active={imageIndex === active ? 'true' : undefined}
+                    aria-hidden={imageIndex !== active}
+                    className="pointer-events-none absolute inset-0 flex flex-col justify-center"
+                    style={{
+                      opacity,
+                      zIndex: imageIndex === index ? 2 : imageIndex === index + 1 ? 1 : 0,
+                      transitionProperty: 'opacity',
+                      transitionDelay: `${delay}ms`,
+                      transitionDuration: `${duration}ms`,
+                      transitionTimingFunction: easing,
+                    }}
+                  >
+                    <p className="text-[9px] font-semibold uppercase tracking-[0.2em] text-primary">
+                      {image.kicker}
+                    </p>
+                    <h3 className="mt-2 text-[clamp(1.6rem,3vw,3rem)] font-semibold leading-none tracking-tight">
+                      {image.title}
+                    </h3>
+                    <p className="mt-3 max-w-sm text-[12px] leading-relaxed text-muted-foreground sm:text-[13px]">
+                      {image.description}
+                    </p>
+                  </div>
+                )
+              })}
+            </div>
+
+            <div className="relative z-10 mt-4 flex items-center justify-between gap-3">
+              <div className="flex items-center gap-1.5">
+                {list.map((image, imageIndex) => (
+                  <button
+                    key={image.src}
+                    type="button"
+                    onClick={() => goTo(imageIndex)}
+                    aria-label={`Afficher ${image.title}`}
+                    aria-current={imageIndex === active ? 'true' : undefined}
+                    className={`h-1.5 rounded-full transition-all ${
+                      imageIndex === active
+                        ? 'w-7 bg-primary'
+                        : 'w-3 bg-border hover:bg-muted-foreground/60'
+                    }`}
+                  />
+                ))}
+              </div>
+              <span className="font-mono text-[9px] uppercase tracking-[0.18em] text-muted-foreground">
+                {String(active + 1).padStart(2, '0')} / {String(slideCount).padStart(2, '0')}
+              </span>
+            </div>
+
+            <div
+              aria-hidden
+              className="absolute inset-y-8 left-0 hidden w-px overflow-hidden bg-border sm:block"
+            >
+              <div className="w-px bg-primary" style={{ height: `${progress * 100}%` }} />
+            </div>
+          </div>
+
+          <div aria-hidden className="absolute inset-x-0 bottom-0 h-px overflow-hidden bg-border">
+            <div className="h-px bg-primary" style={{ width: `${progress * 100}%` }} />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/animations/palette-context.ts

@@ -0,0 +1,24 @@
+import { createContext, useContext } from 'react'
+import type { CardPalette } from './palette'
+
+export type CardPaletteMode = 'theme' | 'gradient' | 'solid'
+
+export interface CardPaletteContextValue {
+  mode: CardPaletteMode
+  from: string
+  to: string
+  solid: string
+  palette: CardPalette | undefined
+  setMode: (mode: CardPaletteMode) => void
+  setFrom: (color: string) => void
+  setTo: (color: string) => void
+  setSolid: (color: string) => void
+}
+
+export const CardPaletteContext = createContext<CardPaletteContextValue | null>(null)
+
+export function useCardPalette() {
+  const context = useContext(CardPaletteContext)
+  if (!context) throw new Error('useCardPalette must be used within CardPaletteProvider')
+  return context
+}

package/src/components/animations/palette-provider.tsx

@@ -0,0 +1,28 @@
+import { useState, type ReactNode } from 'react'
+import type { CardPalette } from './palette'
+import {
+  CardPaletteContext,
+  type CardPaletteMode,
+} from './palette-context'
+
+export function CardPaletteProvider({ children }: { children: ReactNode }) {
+  const [mode, setMode] = useState<CardPaletteMode>('theme')
+  const [from, setFrom] = useState('#0EA5E9')
+  const [to, setTo] = useState('#8B5CF6')
+  const [solid, setSolid] = useState('#10B981')
+
+  const palette: CardPalette | undefined =
+    mode === 'theme'
+      ? undefined
+      : mode === 'gradient'
+        ? { mode: 'gradient', from, to }
+        : { mode: 'solid', color: solid }
+
+  return (
+    <CardPaletteContext.Provider
+      value={{ mode, from, to, solid, palette, setMode, setFrom, setTo, setSolid }}
+    >
+      {children}
+    </CardPaletteContext.Provider>
+  )
+}