@spatika/react 1.1.0 → 1.2.0

package/src/composites/ChartDataGrid.tsx

@@ -0,0 +1,196 @@
+import { useState, type ReactNode } from "react";
+import { chartColor, formatChartNumber } from "../lib/charts";
+import { cn } from "../lib/cn";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../primitives/Table";
+import { ChartContainer } from "./chart-composition";
+import { SparkLineChart } from "./cartesian-charts";
+import { PieChart } from "./radial-charts";
+
+export type ChartGridColumnType = "text" | "number" | "sparkline" | "bar";
+
+export type ChartGridColumn = {
+  field: string;
+  headerName: string;
+  type?: ChartGridColumnType;
+  width?: number;
+};
+
+export type ChartDataGridRow = { id: string } & Record<string, unknown>;
+
+export type ChartDataGridProps = {
+  rows: ChartDataGridRow[];
+  columns: ChartGridColumn[];
+  chartType?: "bar" | "line" | "pie";
+  categoryField: string;
+  valueField: string;
+  height?: number;
+  className?: string;
+  selectedIds?: string[];
+  defaultSelectedIds?: string[];
+  onSelectionChange?: (ids: string[]) => void;
+  hideChart?: boolean;
+  hideLegend?: boolean;
+};
+
+export function renderChartCell(
+  value: unknown,
+  options?: {
+    variant?: "sparkline" | "bar";
+    color?: string;
+    height?: number;
+    max?: number;
+  },
+): ReactNode {
+  const color = options?.color ?? "var(--chart-1)";
+  if (Array.isArray(value) && value.every((item) => typeof item === "number")) {
+    return (
+      <SparkLineChart
+        data={value as number[]}
+        plotType={options?.variant === "bar" ? "bar" : "line"}
+        color={color}
+        height={options?.height ?? 32}
+        showHighlight={false}
+        area={options?.variant !== "bar"}
+      />
+    );
+  }
+  const n = typeof value === "number" ? value : Number(value);
+  if (!Number.isFinite(n)) return "—";
+  const max = options?.max && options.max > 0 ? options.max : Math.max(n, 1);
+  const pct = Math.max(0, Math.min(100, (n / max) * 100));
+  return (
+    <div className="spk-chart-cell-bar" title={formatChartNumber(n)}>
+      <span style={{ width: `${pct}%`, background: color }} />
+    </div>
+  );
+}
+
+export function ChartDataGrid({
+  rows,
+  columns,
+  chartType = "bar",
+  categoryField,
+  valueField,
+  height = 200,
+  className,
+  selectedIds,
+  defaultSelectedIds,
+  onSelectionChange,
+  hideChart,
+  hideLegend = true,
+}: ChartDataGridProps) {
+  const [internal, setInternal] = useState<string[]>(defaultSelectedIds ?? []);
+  const selected = selectedIds ?? internal;
+  const setSelected = (ids: string[]) => {
+    if (selectedIds == null) setInternal(ids);
+    onSelectionChange?.(ids);
+  };
+  const selectedIndex = selected.length ? rows.findIndex((row) => row.id === selected[0]) : -1;
+  const categories = rows.map((row) => String(row[categoryField] ?? row.id));
+  const values = rows.map((row) => Number(row[valueField] ?? 0));
+  const maxByField = new Map<string, number>();
+  for (const col of columns) {
+    if (col.type === "bar" || col.type === "number") {
+      const nums = rows.map((row) => Number(row[col.field] ?? 0)).filter((n) => Number.isFinite(n));
+      maxByField.set(col.field, nums.length ? Math.max(...nums) : 1);
+    }
+  }
+
+  const toggleRow = (id: string) => {
+    setSelected(selected[0] === id ? [] : [id]);
+  };
+
+  return (
+    <div data-slot="chart-data-grid" className={cn("spk-chart-data-grid", className)}>
+      {hideChart ? null : chartType === "pie" ? (
+        <PieChart
+          height={height}
+          hideLegend={hideLegend}
+          series={[
+            {
+              innerRadius: 36,
+              paddingAngle: 2,
+              data: rows.map((row, i) => ({
+                id: row.id,
+                value: values[i] ?? 0,
+                label: categories[i],
+                color:
+                  selected.length && !selected.includes(row.id)
+                    ? `color-mix(in srgb, ${chartColor(i)} 28%, transparent)`
+                    : undefined,
+              })),
+            },
+          ]}
+        />
+      ) : (
+        <ChartContainer
+          height={height}
+          hideLegend={hideLegend}
+          highlightScope="item"
+          selected={
+            selectedIndex >= 0 ? { seriesId: "value", dataIndex: selectedIndex } : null
+          }
+          xAxis={[{ data: categories }]}
+          series={[{ type: chartType, id: "value", label: valueField, data: values }]}
+          aria-label="Linked chart"
+        />
+      )}
+      <Table containerClassName="spk-chart-grid-table">
+        <TableHeader>
+          <TableRow>
+            {columns.map((col) => (
+              <TableHead key={col.field} style={col.width ? { width: col.width } : undefined}>
+                {col.headerName}
+              </TableHead>
+            ))}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {rows.map((row, rowIndex) => (
+            <TableRow
+              key={row.id}
+              data-state={selected.includes(row.id) ? "selected" : undefined}
+              onClick={() => toggleRow(row.id)}
+              style={{ cursor: "pointer" }}
+            >
+              {columns.map((col, colIndex) => {
+                const value = row[col.field];
+                const color = chartColor(rowIndex);
+                let content: ReactNode;
+                if (col.type === "sparkline") {
+                  content = renderChartCell(value, { variant: "sparkline", color, height: 32 });
+                } else if (col.type === "bar") {
+                  content = renderChartCell(value, {
+                    variant: "bar",
+                    color,
+                    max: maxByField.get(col.field),
+                  });
+                } else if (col.type === "number" && typeof value === "number") {
+                  content = formatChartNumber(value);
+                } else {
+                  content = value == null ? "—" : String(value);
+                }
+                return (
+                  <TableCell key={col.field} data-field={col.field}>
+                    {colIndex === 0 ? (
+                      <span className="spk-chart-grid-name">{content}</span>
+                    ) : (
+                      content
+                    )}
+                  </TableCell>
+                );
+              })}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}

package/src/composites/CoverHero.test.tsx

@@ -0,0 +1,38 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { CoverHero } from "./CoverHero";
+
+describe("CoverHero", () => {
+  it("renders title, kicker, facts, and avatars", () => {
+    render(
+      <CoverHero
+        title="Friday night"
+        kicker={<span>Meetup</span>}
+        facts={[{ key: "when", label: "When", value: "Fri 14 Mar" }]}
+        avatars={[{ name: "Alex Rivera" }, { name: "Sam Lee" }, { name: "Jo Park" }, { name: "Riley" }]}
+        bleed={false}
+      />,
+    );
+    expect(screen.getByRole("heading", { name: "Friday night" })).toBeInTheDocument();
+    expect(screen.getByText("Meetup")).toBeInTheDocument();
+    expect(screen.getByText("When")).toBeInTheDocument();
+    expect(screen.getByText("Fri 14 Mar")).toBeInTheDocument();
+    expect(screen.getByLabelText("Alex Rivera")).toBeInTheDocument();
+    expect(screen.getByText("+1")).toBeInTheDocument();
+  });
+
+  it("calls onBack from the floating control and skips bleed attributes when disabled", async () => {
+    const user = userEvent.setup();
+    const onBack = vi.fn();
+    const { container } = render(
+      <CoverHero title="Studio" onBack={onBack} backLabel="Go back" bleed={false} />,
+    );
+    expect(container.querySelector("[data-slot='cover-hero']")).not.toHaveAttribute(
+      "data-cover-bleed",
+    );
+    expect(screen.queryByRole("button", { name: "Go back" })).toBeInTheDocument();
+    await user.click(screen.getByRole("button", { name: "Go back" }));
+    expect(onBack).toHaveBeenCalledTimes(1);
+  });
+});

package/src/composites/CoverHero.tsx

@@ -60,7 +60,7 @@ export type CoverHeroProps = {
   className?: string;
   /** Offset used when the compact bar pins under app chrome. */
   compactOffsetClassName?: string;
-  /** When false, skip writing cover-bleed attributes on `<html>` (catalog previews). */
+  /** When false, keep the cover inside this frame (docs / device previews). */
   bleed?: boolean;
 };
 
@@ -141,9 +141,14 @@ export function CoverHero({
       <header
         ref={heroRef}
         data-slot="cover-hero"
-        className={cn("relative z-10 w-full overflow-visible", className)}
+        data-cover-bleed={bleed ? "true" : undefined}
+        className={cn(
+          "relative z-10 w-full",
+          bleed ? "overflow-visible" : "overflow-hidden rounded-[1.35rem] sm:rounded-[1.75rem]",
+          className,
+        )}
       >
-        <div className={cn(mediaClass, "sm:rounded-b-[1.75rem]")} aria-hidden>
+        <div className={cn(mediaClass, bleed && "sm:rounded-b-[1.75rem]")} aria-hidden>
           {!hideImages && coverUrl ? (
             <img src={coverUrl} alt="" className="absolute inset-0 size-full object-cover" />
           ) : (
@@ -332,26 +337,28 @@ export function CoverHero({
         </div>
       </header>
 
-      <div className={cn("sticky z-[60] h-0", compactOffsetClassName)}>
-        {!heroInView ? (
-          <div className="glass-header cover-chrome-bar absolute inset-x-0 top-0 border-b border-border/50 bg-background/85 backdrop-blur-md dark:bg-background/94">
-            <div className="app-frame-pad flex items-center gap-2 py-1.5 sm:py-2">
-              {onBack ? (
-                <button
-                  type="button"
-                  onClick={onBack}
-                  aria-label={backLabel}
-                  className="flex h-8 w-8 shrink-0 items-center justify-center rounded-xl text-foreground transition-colors hover:bg-muted"
-                >
-                  <ChevronLeft className="h-4 w-4" aria-hidden />
-                </button>
-              ) : null}
-              <h2 className="page-header-title min-w-0 flex-1 truncate">{title}</h2>
-              {compactActions}
+      {bleed ? (
+        <div className={cn("sticky z-[60] h-0", compactOffsetClassName)}>
+          {!heroInView ? (
+            <div className="glass-header cover-chrome-bar absolute inset-x-0 top-0 border-b border-border/50 bg-background/85 backdrop-blur-md dark:bg-background/94">
+              <div className="app-frame-pad flex items-center gap-2 py-1.5 sm:py-2">
+                {onBack ? (
+                  <button
+                    type="button"
+                    onClick={onBack}
+                    aria-label={backLabel}
+                    className="flex h-8 w-8 shrink-0 items-center justify-center rounded-xl text-foreground transition-colors hover:bg-muted"
+                  >
+                    <ChevronLeft className="h-4 w-4" aria-hidden />
+                  </button>
+                ) : null}
+                <h2 className="page-header-title min-w-0 flex-1 truncate">{title}</h2>
+                {compactActions}
+              </div>
             </div>
-          </div>
-        ) : null}
-      </div>
+          ) : null}
+        </div>
+      ) : null}
     </>
   );
 }

package/src/composites/EntityMediaCard.test.tsx

@@ -0,0 +1,58 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { EntityMediaCard } from "./EntityMediaCard";
+
+describe("EntityMediaCard", () => {
+  it("renders title, subtitle, and status on a stacked tile", () => {
+    const { container } = render(
+      <EntityMediaCard title="Alex Chen" subtitle="Product designer" statusLine="Active" />,
+    );
+    expect(screen.getByText("Alex Chen")).toBeInTheDocument();
+    expect(screen.getByText("Product designer")).toBeInTheDocument();
+    expect(screen.getByText("Active")).toBeInTheDocument();
+    expect(screen.getByText("AC")).toBeInTheDocument();
+    const card = container.querySelector("[data-slot='entity-media-card']");
+    expect(card).toHaveAttribute("data-size", "large");
+    expect(card).toHaveAttribute("data-orientation", "stack");
+    expect(container.querySelector("[data-cover-pattern]")).toBeTruthy();
+  });
+
+  it("uses a photo when imageUrl is set", () => {
+    const { container } = render(
+      <EntityMediaCard title="Jordan Lee" imageUrl="/jordan.jpg" />,
+    );
+    expect(container.querySelector("img")).toHaveAttribute("src", "/jordan.jpg");
+    expect(screen.queryByText("JL")).not.toBeInTheDocument();
+  });
+
+  it("renders as a link and calls onClick on a button card", async () => {
+    const user = userEvent.setup();
+    const onClick = vi.fn();
+    const { rerender } = render(
+      <EntityMediaCard title="Alex Chen" href="/people/alex" />,
+    );
+    expect(screen.getByRole("link", { name: /Alex Chen/ })).toHaveAttribute(
+      "href",
+      "/people/alex",
+    );
+
+    rerender(<EntityMediaCard title="Alex Chen" onClick={onClick} />);
+    await user.click(screen.getByRole("button", { name: /Alex Chen/ }));
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("keeps row cards stretched so the photo matches the copy height", () => {
+    const { container } = render(
+      <EntityMediaCard
+        title="Jordan Lee"
+        subtitle="Account lead"
+        orientation="row"
+        size="small"
+      />,
+    );
+    const card = container.querySelector("[data-slot='entity-media-card']");
+    expect(card).toHaveAttribute("data-orientation", "row");
+    expect(card).toHaveClass("items-stretch");
+  });
+});

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">