feat: fullscreen card preview

Author: cfbender

assets/css/app.css

@@ -317,8 +317,49 @@
   }
 }
 
+.card-fullscreen-frame {
+  transform-style: preserve-3d;
+}
+
+.card-fullscreen-frame .card-tile-foil-overlay::before {
+  animation-play-state: running;
+}
+
+.card-fullscreen-set-grain {
+  position: absolute;
+  inset: 0;
+  z-index: 7;
+  border-radius: inherit;
+  background: rgb(255 255 255 / 0.18);
+  mask-image: var(--card-set-grain);
+  mask-position: center;
+  mask-repeat: repeat;
+  mask-size: 3.75rem;
+  -webkit-mask-image: var(--card-set-grain);
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: repeat;
+  -webkit-mask-size: 3.75rem;
+  mix-blend-mode: screen;
+  opacity: 0.24;
+  pointer-events: none;
+  animation: card-fullscreen-set-grain 18s linear infinite;
+}
+
+@keyframes card-fullscreen-set-grain {
+  0% {
+    mask-position: 0 0;
+    -webkit-mask-position: 0 0;
+  }
+
+  100% {
+    mask-position: 3.75rem 3.75rem;
+    -webkit-mask-position: 3.75rem 3.75rem;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
-  .card-tile-foil-overlay::before {
+  .card-tile-foil-overlay::before,
+  .card-fullscreen-set-grain {
     animation: none;
   }
 }

assets/react/src/components/card-tile.tsx

@@ -45,6 +45,8 @@ export function CardTile({
   menuActions = [],
   name,
   onSelect,
+  primaryActionLabel,
+  primaryActionRole = "link",
   price,
   rarity,
   selectable = false,
@@ -71,6 +73,8 @@ export function CardTile({
   name: ReactNode
   onSelect?: () => void
   onToggleSelected?: () => void
+  primaryActionLabel?: string
+  primaryActionRole?: "button" | "link"
   price?: ReactNode
   rarity?: string | null
   selectable?: boolean
@@ -129,7 +133,9 @@ export function CardTile({
 
   return (
     <div
-      aria-label={onSelect && typeof name === "string" ? `View ${name}` : undefined}
+      aria-label={
+        primaryActionLabel || (onSelect && typeof name === "string" ? `View ${name}` : undefined)
+      }
       aria-pressed={selectionClickActive ? selected : undefined}
       className={cn(
         "group/card relative w-full max-w-[14.25rem] overflow-visible rounded-xl bg-transparent transition duration-200 focus-within:z-50",
@@ -139,7 +145,7 @@ export function CardTile({
       )}
       onClick={hasPrimaryAction ? handleClick : undefined}
       onKeyDown={handleKeyDown}
-      role={selectionClickActive ? "button" : onSelect ? "link" : undefined}
+      role={selectionClickActive ? "button" : onSelect ? primaryActionRole : undefined}
       tabIndex={hasPrimaryAction ? 0 : undefined}
     >
       {showMenu ? (