@spatika/react 1.0.0 → 1.2.0

package/src/composites/GradientText.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from "react";
+import { cn } from "../lib/cn";
+
+export type GradientTextProps = {
+  children: ReactNode;
+  /** `static` clips a 3-stop theme gradient; `flow` animates it. */
+  variant?: "static" | "flow";
+  className?: string;
+  as?: "span" | "em" | "strong";
+};
+
+/** Theme-colored gradient type for wordmarks and display names. */
+export function GradientText({
+  children,
+  variant = "static",
+  className,
+  as: Tag = "span",
+}: GradientTextProps) {
+  return (
+    <Tag
+      data-slot="gradient-text"
+      data-variant={variant}
+      className={cn(
+        variant === "flow" ? "spk-gradient-text" : "spk-gradient-text-static",
+        className,
+      )}
+    >
+      {children}
+    </Tag>
+  );
+}

package/src/composites/IconTile.tsx

@@ -0,0 +1,33 @@
+import type { ReactNode } from "react";
+import { cn } from "../lib/cn";
+import { Card } from "./Card";
+
+export type IconTileProps = {
+  icon: ReactNode;
+  title: ReactNode;
+  description?: ReactNode;
+  className?: string;
+};
+
+/** Horizontal domain / feature tile: icon well + italic title + caption. */
+export function IconTile({ icon, title, description, className }: IconTileProps) {
+  return (
+    <div data-slot="icon-tile">
+      <Card
+        variant="panel"
+        padding="md"
+        className={cn("group flex items-center gap-5 p-5", className)}
+      >
+        <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl border border-border bg-secondary text-3xl">
+          {icon}
+        </div>
+        <div className="min-w-0">
+          <p className="text-[16px] font-[900] italic text-foreground">{title}</p>
+          {description ? (
+            <p className="mt-0.5 text-[12px] font-bold text-muted-foreground">{description}</p>
+          ) : null}
+        </div>
+      </Card>
+    </div>
+  );
+}

package/src/composites/MapChart.test.tsx

@@ -0,0 +1,39 @@
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { MapChart } from "./MapChart";
+
+describe("MapChart", () => {
+  it("draws choropleth paths from GeoJSON", () => {
+    const { container } = render(
+      <MapChart
+        width={240}
+        height={160}
+        geoData={{
+          type: "FeatureCollection",
+          features: [
+            {
+              type: "Feature",
+              id: "a",
+              properties: { name: "A" },
+              geometry: {
+                type: "Polygon",
+                coordinates: [
+                  [
+                    [0, 0],
+                    [4, 0],
+                    [4, 3],
+                    [0, 3],
+                    [0, 0],
+                  ],
+                ],
+              },
+            },
+          ],
+        }}
+        series={[{ data: [{ id: "a", value: 12, label: "A" }] }]}
+      />,
+    );
+    expect(container.querySelector('[data-slot="map-chart"]')).toBeTruthy();
+    expect(container.querySelector('[data-slot="map-chart"] path')).toBeTruthy();
+  });
+});

package/src/composites/MapChart.tsx

@@ -0,0 +1,130 @@
+import { chartColor, formatChartNumber, type ChartMargin } from "../lib/charts";
+import {
+  featureId,
+  fitFeatures,
+  geoPath,
+  type GeoJsonFeatureCollection,
+  type GeoProjectionKind,
+} from "../lib/geo";
+import { ChartFrame, useChartHover } from "./chart-ui";
+
+export type MapShapeDatum = {
+  id: string | number;
+  value: number;
+  label?: string;
+  color?: string;
+};
+
+export type MapChartProps = {
+  geoData: GeoJsonFeatureCollection;
+  series?: Array<{ data: MapShapeDatum[] }>;
+  idProperty?: string;
+  projection?: GeoProjectionKind;
+  height?: number;
+  width?: number;
+  colors?: string[];
+  hideLegend?: boolean;
+  margin?: ChartMargin;
+  className?: string;
+};
+
+export function MapChart({
+  geoData,
+  series,
+  idProperty = "id",
+  projection = "mercator",
+  height = 280,
+  width,
+  colors,
+  hideLegend,
+  margin,
+  className,
+}: MapChartProps) {
+  const features = geoData.features ?? [];
+  const data = series?.[0]?.data ?? [];
+  const byId = new Map(data.map((item) => [String(item.id), item]));
+  const values = data.map((item) => item.value);
+  const min = values.length ? Math.min(...values) : 0;
+  const max = values.length ? Math.max(...values) : 1;
+  const { hover, setHover, clear } = useChartHover();
+  const legend = hideLegend
+    ? undefined
+    : data.slice(0, 8).map((item, i) => ({
+        id: String(item.id),
+        label: item.label ?? String(item.id),
+        color: item.color ?? choroplethFill(item.value, min, max, i, colors),
+      }));
+
+  return (
+    <ChartFrame
+      slot="map-chart"
+      className={className}
+      width={width}
+      height={height}
+      margin={margin ?? { top: 8, right: 8, bottom: 8, left: 8 }}
+      legend={legend}
+      hover={hover}
+      aria-label="Map chart"
+    >
+      {({ width: w, height: h, m }) => {
+        const pad = Math.min(m.left, m.right, m.top, m.bottom);
+        const project = fitFeatures(features, w, h, pad, projection);
+        return (
+          <svg width={w} height={h} viewBox={`0 0 ${w} ${h}`}>
+            {features.map((feature, i) => {
+              if (!feature.geometry) return null;
+              const id = featureId(feature, idProperty) || String(i);
+              const datum = byId.get(id);
+              const label =
+                datum?.label ??
+                (feature.properties?.name != null ? String(feature.properties.name) : id);
+              const fill = datum
+                ? (datum.color ?? choroplethFill(datum.value, min, max, i, colors))
+                : "color-mix(in srgb, var(--muted) 55%, transparent)";
+              const d = geoPath(feature.geometry, project);
+              if (!d) return null;
+              return (
+                <path
+                  key={id}
+                  d={d}
+                  fill={fill}
+                  className="spk-chart-map-region spk-chart-mark"
+                  onMouseEnter={(event) =>
+                    setHover({
+                      x: event.nativeEvent.offsetX,
+                      y: event.nativeEvent.offsetY,
+                      title: label,
+                      items: datum
+                        ? [
+                            {
+                              color: fill,
+                              label: label,
+                              value: formatChartNumber(datum.value),
+                            },
+                          ]
+                        : [{ color: fill, label: label, value: "—" }],
+                    })
+                  }
+                  onMouseLeave={clear}
+                />
+              );
+            })}
+          </svg>
+        );
+      }}
+    </ChartFrame>
+  );
+}
+
+function choroplethFill(
+  value: number,
+  min: number,
+  max: number,
+  index: number,
+  colors?: string[],
+): string {
+  const t = max === min ? 0.6 : (value - min) / (max - min);
+  const base = chartColor(index, colors);
+  const mix = Math.round(28 + t * 72);
+  return `color-mix(in srgb, ${base} ${mix}%, var(--muted))`;
+}

package/src/composites/MetaChip.tsx

@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+import { cn } from "../lib/cn";
+
+export type MetaChipProps = {
+  icon?: ReactNode;
+  children: ReactNode;
+  className?: string;
+};
+
+/** Compact “powered by” chip: icon + label with a quiet ring. */
+export function MetaChip({ icon, children, className }: MetaChipProps) {
+  return (
+    <span
+      data-slot="meta-chip"
+      className={cn(
+        "inline-flex items-center gap-1.5 rounded-lg bg-secondary px-2.5 py-1.5 text-[11px] font-medium text-muted-foreground ring-1 ring-border/80",
+        className,
+      )}
+    >
+      {icon ? <span className="inline-flex h-4 w-4 shrink-0 items-center justify-center opacity-90">{icon}</span> : null}
+      {children}
+    </span>
+  );
+}

package/src/composites/PresenceDot.tsx

@@ -0,0 +1,42 @@
+import { cn } from "../lib/cn";
+
+export type PresenceDotProps = {
+  tone?: "primary" | "success";
+  /** Dual-span scale ping. Defaults to true. */
+  ping?: boolean;
+  className?: string;
+  label?: string;
+};
+
+const toneClass = {
+  primary: "bg-primary",
+  success: "bg-[var(--accent-info)]",
+} as const;
+
+/** Live status pip with optional ping halo (availability badges, hero chips). */
+export function PresenceDot({
+  tone = "primary",
+  ping = true,
+  className,
+  label,
+}: PresenceDotProps) {
+  return (
+    <span
+      data-slot="presence-dot"
+      role={label ? "img" : undefined}
+      aria-label={label}
+      className={cn("relative flex h-2 w-2", className)}
+    >
+      {ping ? (
+        <span
+          className={cn(
+            "absolute inline-flex h-full w-full animate-ping rounded-full opacity-75",
+            toneClass[tone],
+          )}
+          aria-hidden
+        />
+      ) : null}
+      <span className={cn("relative inline-flex h-2 w-2 rounded-full", toneClass[tone])} />
+    </span>
+  );
+}

package/src/composites/ProfileHero.test.tsx

@@ -0,0 +1,33 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { ProfileHero } from "./ProfileHero";
+
+describe("ProfileHero", () => {
+  it("renders name, alias, and a notched identity plate", () => {
+    const { container } = render(
+      <ProfileHero name="Alex Chen" alias="Product designer" coverSeed="alex" bleed={false} />,
+    );
+    expect(screen.getByRole("heading", { name: "Alex Chen" })).toBeInTheDocument();
+    expect(screen.getByText("Product designer")).toBeInTheDocument();
+    expect(container.querySelector(".profile-identity")).toBeTruthy();
+    expect(container.querySelector(".profile-identity__plate")).toBeTruthy();
+    expect(container.querySelector("[data-slot='profile-hero']")).not.toHaveAttribute(
+      "data-cover-bleed",
+    );
+    expect(container.querySelector("[data-slot='profile-hero']")).toHaveClass("w-full");
+  });
+
+  it("keeps the avatar inert until onAvatarClick is provided", async () => {
+    const user = userEvent.setup();
+    const onAvatarClick = vi.fn();
+    const { rerender } = render(<ProfileHero name="Alex Chen" bleed={false} />);
+    expect(screen.getByRole("button", { name: "Alex Chen" })).toBeDisabled();
+
+    rerender(<ProfileHero name="Alex Chen" onAvatarClick={onAvatarClick} bleed={false} />);
+    const avatar = screen.getByRole("button", { name: "Alex Chen" });
+    expect(avatar).toBeEnabled();
+    await user.click(avatar);
+    expect(onAvatarClick).toHaveBeenCalledTimes(1);
+  });
+});

package/src/composites/ProfileHero.tsx

@@ -33,12 +33,14 @@ export type ProfileHeroProps = {
   coverKind?: CoverPatternKind | null;
   dark?: boolean;
   warm?: boolean;
+  /** When false, keep the cover inside this frame (catalog previews). */
+  bleed?: boolean;
 };
 
 /**
- * Profile / entity hero: cover bleeds into app chrome, overlapping avatar
- * notches the frosted identity plate. Stacked in a narrow column; left-notched
- * once the plate is wide enough (container query, not viewport).
+ * Profile / entity hero: cover fills the frame, overlapping avatar notches
+ * the frosted identity plate. Stacked in a narrow column; left-notched once
+ * the plate is wide enough (container query, not viewport).
  */
 export function ProfileHero({
   name,
@@ -63,6 +65,7 @@ export function ProfileHero({
   coverKind,
   dark,
   warm,
+  bleed = true,
 }: ProfileHeroProps) {
   const initials = getInitials(name);
   const seed = coverSeed ?? name;
@@ -70,92 +73,106 @@ export function ProfileHero({
   const ink = scene.headerInk;
 
   return (
-    <div data-slot="profile-hero" className={cn("relative overflow-visible", className)}>
+    <div
+      data-slot="profile-hero"
+      data-cover-bleed={bleed ? "true" : undefined}
+      className={cn(
+        "relative w-full",
+        bleed ? "overflow-visible" : "overflow-hidden rounded-[1.35rem] sm:rounded-[1.75rem]",
+        className,
+      )}
+    >
       <div
-        className={cn(
-          "relative min-h-[9rem] overflow-hidden sm:min-h-[12rem] lg:min-h-[13rem]",
-          coverClassName,
-        )}
+        className={cn("cover-media cover-media--profile", bleed && "sm:rounded-b-[2rem]")}
+        aria-hidden
       >
-        <div className="cover-media cover-media--profile sm:rounded-b-[2rem]" aria-hidden>
-          {!hideImages && coverUrl ? (
-            <img src={coverUrl} alt="" className="absolute inset-0 size-full object-cover" />
-          ) : (
-            <CoverPattern seed={seed} hue={coverHue} dark={dark} warm={warm} kind={coverKind} />
+        {!hideImages && coverUrl ? (
+          <img src={coverUrl} alt="" className="absolute inset-0 size-full object-cover" />
+        ) : (
+          <CoverPattern seed={seed} hue={coverHue} dark={dark} warm={warm} kind={coverKind} />
+        )}
+        <div className="absolute inset-x-0 top-0 h-8 bg-gradient-to-b from-black/[0.04] to-transparent dark:from-black/12" />
+        <div className="absolute inset-x-0 bottom-0 h-[22%] bg-gradient-to-t from-black/[0.03] via-transparent to-transparent dark:from-black/10" />
+      </div>
+
+      <div className="relative z-10 flex flex-col">
+        <div
+          className={cn(
+            "relative min-h-[8.5rem] sm:min-h-[11rem] lg:min-h-[12rem]",
+            coverClassName,
           )}
-          <div className="absolute inset-x-0 top-0 h-8 bg-gradient-to-b from-black/[0.04] to-transparent dark:from-black/12" />
-          <div className="absolute inset-x-0 bottom-0 h-[22%] bg-gradient-to-t from-black/[0.03] via-transparent to-transparent dark:from-black/10" />
-        </div>
-        <div className="relative z-10 flex min-h-[9rem] items-start justify-between gap-2 p-3 sm:min-h-[12rem] sm:p-4 lg:min-h-[13rem]">
-          <div>{topLeading}</div>
-          {topActions ? (
-            <div
-              data-cover-ink={ink}
-              className="cover-floating-shell flex items-center gap-1 p-1"
-            >
-              {topActions}
-            </div>
-          ) : null}
+        >
+          <div className="absolute inset-x-0 top-0 z-30 flex items-start justify-between gap-2 p-3 sm:p-4">
+            <div>{topLeading}</div>
+            {topActions ? (
+              <div
+                data-cover-ink={ink}
+                className="cover-floating-shell flex items-center gap-1 p-1"
+              >
+                {topActions}
+              </div>
+            ) : null}
+          </div>
         </div>
-      </div>
 
-      <div className="relative z-10 px-3 pb-4 sm:px-4 sm:pb-5 lg:px-8">
-        <div className={cn("profile-identity", identityClassName)}>
-          <div
-            aria-hidden
-            className={cn(
-              "pointer-events-none absolute inset-0 rounded-[1.35rem] profile-identity__plate",
-              coverPlateClass(ink),
-            )}
-          />
-          <div className="profile-identity__body">
-            <button
-              type="button"
-              disabled={!onAvatarClick}
-              onClick={onAvatarClick}
-              aria-label={name}
-              className="profile-identity__avatar"
-            >
-              <span
-                className="flex items-center justify-center overflow-hidden rounded-full border-[3px] border-white bg-muted text-lg font-black leading-none text-primary shadow-[0_16px_40px_rgba(0,0,0,0.38)] dark:border-white/30"
-                style={{
-                  width: "var(--profile-avatar-size)",
-                  height: "var(--profile-avatar-size)",
-                }}
+        <div className="relative z-20 px-3 pb-4 sm:px-4 sm:pb-5 lg:px-6">
+          <div className={cn("profile-identity", identityClassName)}>
+            <div
+              aria-hidden
+              className={cn(
+                "pointer-events-none absolute inset-0 rounded-[1.35rem] profile-identity__plate",
+                coverPlateClass(ink),
+              )}
+            />
+            <div className="profile-identity__body">
+              <button
+                type="button"
+                disabled={!onAvatarClick}
+                onClick={onAvatarClick}
+                aria-label={name}
+                className="profile-identity__avatar"
               >
-                {!hideImages && avatarUrl ? (
-                  <img src={avatarUrl} alt="" className="size-full object-cover" />
-                ) : (
-                  initials
-                )}
-              </span>
-              {avatarAccessory}
-            </button>
-            <div className="profile-identity__copy">
-              <div className="profile-identity__heading">
-                <h1
-                  className={cn(
-                    "truncate text-[1.15rem] font-black leading-tight tracking-tight sm:text-2xl",
-                    coverTitleClass(ink),
-                  )}
+                <span
+                  className="flex items-center justify-center overflow-hidden rounded-full border-[3px] border-white bg-muted text-lg font-black leading-none text-primary shadow-[0_16px_40px_rgba(0,0,0,0.38)] dark:border-white/30"
+                  style={{
+                    width: "var(--profile-avatar-size)",
+                    height: "var(--profile-avatar-size)",
+                  }}
                 >
-                  {name}
-                </h1>
-                {statusBadges}
+                  {!hideImages && avatarUrl ? (
+                    <img src={avatarUrl} alt="" className="size-full object-cover" />
+                  ) : (
+                    initials
+                  )}
+                </span>
+                {avatarAccessory}
+              </button>
+              <div className="profile-identity__copy">
+                <div className="profile-identity__heading">
+                  <h1
+                    className={cn(
+                      "truncate text-[1.15rem] font-black leading-tight tracking-tight sm:text-2xl",
+                      coverTitleClass(ink),
+                    )}
+                  >
+                    {name}
+                  </h1>
+                  {statusBadges}
+                </div>
+                {alias ? (
+                  <p className={cn("mt-0.5 truncate text-sm font-medium", coverMutedClass(ink))}>
+                    {alias}
+                  </p>
+                ) : null}
+                {metaLines ? (
+                  <div className={cn("mt-2 space-y-1 text-sm", coverMutedClass(ink))}>{metaLines}</div>
+                ) : null}
+                {stats ? <div className="mt-3">{stats}</div> : null}
+                {tags ? <div className="profile-identity__tags">{tags}</div> : null}
               </div>
-              {alias ? (
-                <p className={cn("mt-0.5 truncate text-sm font-medium", coverMutedClass(ink))}>
-                  {alias}
-                </p>
-              ) : null}
-              {metaLines ? (
-                <div className={cn("mt-2 space-y-1 text-sm", coverMutedClass(ink))}>{metaLines}</div>
-              ) : null}
-              {stats ? <div className="mt-3">{stats}</div> : null}
-              {tags ? <div className="profile-identity__tags">{tags}</div> : null}
             </div>
+            {children ? <div className="relative z-10 px-3 pb-3 sm:px-6">{children}</div> : null}
           </div>
-          {children ? <div className="relative z-10 px-3 pb-3 sm:px-6">{children}</div> : null}
         </div>
       </div>
     </div>

package/src/composites/ProjectCard.tsx

@@ -0,0 +1,65 @@
+import type { ReactNode } from "react";
+import { cn } from "../lib/cn";
+import { Badge } from "../primitives/Badge";
+import { Card, CardContent, CardHeader, CardTitle } from "./Card";
+import { Tag } from "./Tag";
+
+export type ProjectCardProps = {
+  title: ReactNode;
+  company?: ReactNode;
+  outcome?: ReactNode;
+  description?: ReactNode;
+  tags?: string[];
+  className?: string;
+};
+
+/** Marketing project tile: title, company, outcome pill, body, tech tags. */
+export function ProjectCard({
+  title,
+  company,
+  outcome,
+  description,
+  tags = [],
+  className,
+}: ProjectCardProps) {
+  return (
+    <Card
+      variant="panel"
+      padding="md"
+      className={cn(
+        "group flex h-full flex-col hover:border-primary/30 hover:shadow-[0_12px_32px_color-mix(in_srgb,var(--primary)_7%,transparent)]",
+        className,
+      )}
+    >
+      <CardHeader className="mb-2">
+        <div className="min-w-0">
+          <CardTitle className="text-[15px] leading-snug font-[900] group-hover:text-primary sm:text-[16px]">
+            {title}
+          </CardTitle>
+          {company ? (
+            <p className="mt-0.5 text-[11px] font-bold tracking-wider text-muted-foreground uppercase">
+              {company}
+            </p>
+          ) : null}
+        </div>
+        {outcome ? (
+          <Badge variant="warm" className="rounded-full px-2.5 py-1 text-[10px] font-black">
+            {outcome}
+          </Badge>
+        ) : null}
+      </CardHeader>
+      <CardContent className="flex flex-1 flex-col">
+        {description ? (
+          <p className="mb-3 flex-1 text-[13px] leading-relaxed text-muted-foreground">{description}</p>
+        ) : null}
+        {tags.length > 0 ? (
+          <div className="flex flex-wrap gap-1.5">
+            {tags.map((tag) => (
+              <Tag key={tag}>{tag}</Tag>
+            ))}
+          </div>
+        ) : null}
+      </CardContent>
+    </Card>
+  );
+}

package/src/composites/ScatterWebGL.test.tsx

@@ -0,0 +1,25 @@
+import { render } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { ScatterWebGLLayer } from "./ScatterWebGL";
+
+describe("ScatterWebGLLayer", () => {
+  it("renders a canvas layer and reports when WebGL is unavailable", () => {
+    const onUnavailable = vi.fn();
+    const { container } = render(
+      <ScatterWebGLLayer
+        width={120}
+        height={80}
+        series={[{ data: [{ x: 1, y: 2 }] }]}
+        meta={[{ id: "a", label: "A", color: "#2563eb" }]}
+        hidden={new Set()}
+        xAt={(value) => value}
+        yAt={(value) => value}
+        sizeAt={(z) => z}
+        bubble={false}
+        onUnavailable={onUnavailable}
+      />,
+    );
+    expect(container.querySelector('[data-slot="scatter-webgl"]')).toBeTruthy();
+    expect(onUnavailable).toHaveBeenCalled();
+  });
+});