@spatika/react 1.0.0 → 1.2.0

package/src/composites/EntityMediaCard.tsx

@@ -1,5 +1,8 @@
 import type { ReactNode } from "react";
 import { cn } from "../lib/cn";
+import { coverTitleClass } from "../lib/cover-chrome";
+import { getCoverPattern } from "../lib/cover-pattern";
+import { CoverPattern } from "./CoverPattern";
 
 export type EntityMediaCardProps = {
   title: string;
@@ -22,7 +25,7 @@ export type EntityMediaCardProps = {
 };
 
 /**
- * Entity card with photo (or initials fallback) — contact / directory style.
+ * Entity card with photo (or generated cover + initials) — contact / album tile.
  */
 export function EntityMediaCard({
   title,
@@ -51,9 +54,14 @@ export function EntityMediaCard({
       .map((w) => w[0]?.toUpperCase() ?? "")
       .join("") ||
     "?";
+  const scene = getCoverPattern({ seed: title, hue: 210 });
 
   const photoAspect =
-    size === "compact" ? "aspect-square" : size === "small" ? "aspect-[4/3]" : "aspect-square";
+    orientation === "row"
+      ? "h-full min-h-[6.5rem]"
+      : size === "compact"
+        ? "aspect-square"
+        : "aspect-[4/3]";
 
   return (
     <Comp
@@ -61,18 +69,20 @@ export function EntityMediaCard({
       type={onClick && !href ? "button" : undefined}
       onClick={onClick}
       data-slot="entity-media-card"
+      data-size={size}
+      data-orientation={orientation}
       className={cn(
-        "group flex overflow-hidden rounded-2xl border border-white/45 bg-card text-left shadow-[0_8px_30px_rgb(0,0,0,0.04)] transition-[transform,border-color] duration-200 dark:border-white/12",
-        "hover:-translate-y-0.5 hover:border-primary/15",
-        orientation === "row" ? "flex-row" : "flex-col",
+        "group flex h-full min-w-0 overflow-hidden rounded-2xl border border-border/60 bg-card text-left shadow-[0_8px_30px_color-mix(in_srgb,var(--foreground)_6%,transparent)] transition-[transform,border-color] duration-200",
+        "hover:-translate-y-0.5 hover:border-primary/25",
+        orientation === "row" ? "flex-row items-stretch" : "flex-col",
         className,
       )}
     >
       <div
         className={cn(
           "relative shrink-0 overflow-hidden bg-muted",
-          orientation === "row" ? "w-[42%] min-w-[7rem]" : "w-full",
-          orientation === "stack" && photoAspect,
+          orientation === "row" ? "w-[38%] min-w-[6.5rem] max-w-[9.5rem]" : "w-full",
+          photoAspect,
           imageClassName,
         )}
       >
@@ -80,20 +90,28 @@ export function EntityMediaCard({
           <img
             src={imageUrl}
             alt=""
-            className="size-full object-cover transition-transform duration-700 group-hover:scale-110"
+            className="absolute inset-0 size-full object-cover transition-transform duration-700 group-hover:scale-110"
           />
         ) : (
-          <div className="flex size-full items-center justify-center bg-gradient-to-br from-primary/20 via-muted to-accent-highlight/20 text-2xl font-black text-primary">
-            {initials}
-          </div>
+          <>
+            <CoverPattern seed={title} hue={210} />
+            <div
+              className={cn(
+                "absolute inset-0 flex items-center justify-center text-2xl font-black",
+                coverTitleClass(scene.headerInk),
+              )}
+            >
+              {initials}
+            </div>
+          </>
         )}
         {overlays ? <div className="absolute inset-0 p-2">{overlays}</div> : null}
       </div>
 
       <div
         className={cn(
-          "relative flex min-w-0 flex-1 flex-col bg-white dark:bg-card",
-          size === "compact" ? "gap-1 p-2.5" : "gap-1.5 p-3 sm:p-4",
+          "relative flex min-w-0 flex-1 flex-col justify-center bg-card",
+          size === "compact" ? "gap-1 p-2.5" : "gap-1 p-3 sm:p-3.5",
         )}
       >
         <div className="flex items-start justify-between gap-2">