@alpic-ai/ui 0.0.0-dev.g378c8b6 → 0.0.0-dev.g380fab7

package/src/components/grid-fx.tsx

@@ -0,0 +1,238 @@
+"use client";
+
+import * as React from "react";
+
+import { useReducedMotion } from "../hooks/use-reduced-motion";
+import { cn } from "../lib/cn";
+
+const CELL_SIZE = 46;
+const TTL_MIN = 42;
+const TTL_MAX = 78;
+const SPAWN_MIN = 180;
+const SPAWN_MAX = 480;
+
+interface GlitchLine {
+  horiz: boolean;
+  at: number;
+  life: number;
+  ttl: number;
+  color: string;
+  colorHi: string;
+}
+
+const rand = (min: number, max: number) => min + Math.random() * (max - min);
+
+function resolveColors(element: HTMLElement) {
+  const styles = getComputedStyle(element);
+  return {
+    color: styles.getPropertyValue("--color-primary").trim() || "#e90060" /* --color-primary */,
+    colorHi: styles.getPropertyValue("--color-primary-hover").trim() || "#f22b79" /* --color-primary-hover */,
+  };
+}
+
+function strokeFull(ctx: CanvasRenderingContext2D, horiz: boolean, at: number, width: number, height: number) {
+  ctx.beginPath();
+  if (horiz) {
+    ctx.moveTo(0, at);
+    ctx.lineTo(width, at);
+  } else {
+    ctx.moveTo(at, 0);
+    ctx.lineTo(at, height);
+  }
+  ctx.stroke();
+}
+
+function drawGlitchLine(ctx: CanvasRenderingContext2D, line: GlitchLine, width: number, height: number) {
+  const { horiz, at, color, colorHi } = line;
+  const span = horiz ? width : height;
+  const progress = line.life / line.ttl;
+  const envelope = progress < 0.08 ? progress / 0.08 : 1 - (progress - 0.08) / 0.92;
+  const base = Math.max(0, envelope);
+
+  ctx.lineCap = "round";
+
+  const ghosts = [
+    { offset: 0, alpha: 0.85, blur: 12 },
+    { offset: rand(-3, 3), alpha: 0.35, blur: 0 },
+    { offset: rand(-7, 7), alpha: 0.2, blur: 0 },
+  ];
+  for (const ghost of ghosts) {
+    ctx.globalAlpha = base * ghost.alpha * (Math.random() < 0.1 ? 0.3 : 1);
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 1.5;
+    ctx.shadowBlur = ghost.blur;
+    ctx.shadowColor = color;
+    strokeFull(ctx, horiz, at + ghost.offset, width, height);
+  }
+
+  if (Math.random() < 0.5) {
+    ctx.globalAlpha = base * 0.6;
+    ctx.lineWidth = 2;
+    ctx.shadowBlur = 0;
+    ctx.strokeStyle = colorHi;
+    for (let segment = 0; segment < 3; segment++) {
+      const start = rand(0, span * 0.85);
+      const end = start + rand(20, 80);
+      const jitter = rand(-4, 4);
+      ctx.beginPath();
+      if (horiz) {
+        ctx.moveTo(start, at + jitter);
+        ctx.lineTo(end, at + jitter);
+      } else {
+        ctx.moveTo(at + jitter, start);
+        ctx.lineTo(at + jitter, end);
+      }
+      ctx.stroke();
+    }
+  }
+}
+
+function GridFx({
+  className,
+  cellSize = CELL_SIZE,
+  style,
+  ...props
+}: React.ComponentProps<"canvas"> & { cellSize?: number }) {
+  const reduced = useReducedMotion();
+  const canvasRef = React.useRef<HTMLCanvasElement>(null);
+
+  React.useEffect(() => {
+    if (reduced) {
+      return;
+    }
+    const canvas = canvasRef.current;
+    const parent = canvas?.parentElement;
+    const ctx = canvas?.getContext("2d");
+    if (!canvas || !parent || !ctx) {
+      return;
+    }
+
+    let width = 0;
+    let height = 0;
+    let dpr = 1;
+    let frame = 0;
+    let nextIn = rand(SPAWN_MIN, SPAWN_MAX);
+    let onScreen = true;
+    const lines: GlitchLine[] = [];
+
+    const resize = () => {
+      dpr = Math.min(window.devicePixelRatio || 1, 2);
+      width = parent.clientWidth;
+      height = parent.clientHeight;
+      canvas.width = width * dpr;
+      canvas.height = height * dpr;
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    };
+
+    const spawn = () => {
+      const horiz = Math.random() < 0.5;
+      const tracks = Math.ceil((horiz ? height : width) / cellSize);
+      const { color, colorHi } = resolveColors(canvas);
+      lines.push({
+        horiz,
+        at: Math.floor(Math.random() * tracks) * cellSize + 0.5,
+        life: 0,
+        ttl: rand(TTL_MIN, TTL_MAX),
+        color,
+        colorHi,
+      });
+    };
+
+    const tick = () => {
+      ctx.globalAlpha = 1;
+      ctx.shadowBlur = 0;
+      ctx.clearRect(0, 0, width, height);
+
+      if (--nextIn <= 0) {
+        spawn();
+        nextIn = rand(SPAWN_MIN, SPAWN_MAX);
+      }
+      for (let index = lines.length - 1; index >= 0; index--) {
+        const line = lines[index];
+        if (!line) {
+          continue;
+        }
+        line.life++;
+        drawGlitchLine(ctx, line, width, height);
+        if (line.life >= line.ttl) {
+          lines.splice(index, 1);
+        }
+      }
+
+      ctx.globalAlpha = 1;
+      ctx.shadowBlur = 0;
+      frame = requestAnimationFrame(tick);
+    };
+
+    const running = () => onScreen && document.visibilityState === "visible";
+    const start = () => {
+      if (!frame && running()) {
+        frame = requestAnimationFrame(tick);
+      }
+    };
+    const stop = () => {
+      if (frame) {
+        cancelAnimationFrame(frame);
+      }
+      frame = 0;
+      ctx.clearRect(0, 0, width, height);
+    };
+
+    resize();
+    start();
+
+    const resizeObserver = new ResizeObserver(() => resize());
+    resizeObserver.observe(parent);
+
+    const intersectionObserver = new IntersectionObserver(([entry]) => {
+      if (!entry) {
+        return;
+      }
+      onScreen = entry.isIntersecting;
+      if (onScreen) {
+        start();
+      } else {
+        stop();
+      }
+    });
+    intersectionObserver.observe(canvas);
+
+    const onVisibility = () => {
+      if (running()) {
+        start();
+      } else {
+        stop();
+      }
+    };
+    document.addEventListener("visibilitychange", onVisibility);
+
+    return () => {
+      stop();
+      resizeObserver.disconnect();
+      intersectionObserver.disconnect();
+      document.removeEventListener("visibilitychange", onVisibility);
+    };
+  }, [reduced, cellSize]);
+
+  if (reduced) {
+    return null;
+  }
+
+  return (
+    <canvas
+      ref={canvasRef}
+      aria-hidden
+      data-slot="grid-fx"
+      className={cn("pointer-events-none absolute inset-0 h-full w-full", className)}
+      style={{
+        zIndex: -1,
+        WebkitMaskImage: "radial-gradient(120% 95% at 50% 0%, #000 30%, transparent 100%)",
+        maskImage: "radial-gradient(120% 95% at 50% 0%, #000 30%, transparent 100%)",
+        ...style,
+      }}
+      {...props}
+    />
+  );
+}
+
+export { GridFx };

package/src/components/heatmap-chart.tsx

@@ -0,0 +1,287 @@
+"use client";
+
+import * as React from "react";
+import { createPortal } from "react-dom";
+
+import type { ChartPaletteName } from "../lib/chart-palette";
+import { HEAT_EMPTY, heatColor, heatRamp } from "../lib/chart-palette";
+import { cn } from "../lib/cn";
+import { useChartContext } from "./chart-container";
+
+export interface HeatmapChartProps {
+  data: ReadonlyArray<Record<string, string | number | null | undefined>>;
+  xKey: string;
+  yKey: string;
+  dataKey?: string;
+  variant?: "square" | "dot";
+  palette?: ChartPaletteName;
+  xLabels?: readonly string[];
+  yLabels?: readonly string[];
+  highlightPeak?: boolean;
+  loading?: boolean;
+  valueFormatter?: (value: number) => string;
+  xTickFormatter?: (label: string) => string;
+  yTickFormatter?: (label: string) => string;
+  ariaLabel?: string;
+  className?: string;
+}
+
+interface HoverState {
+  x: number;
+  y: number;
+  rowLabel: string;
+  colLabel: string;
+  value: number;
+}
+
+const PLACEHOLDER_HEIGHT = 168;
+// viewBox units — the SVG scales to the container width, so these stay squares.
+const CELL = 22;
+const GAP = 3;
+const PAD = { left: 36, top: 18, right: 6, bottom: 6 };
+const MAX_X_TICKS = 13;
+// Dots never fully vanish at zero and never quite touch their neighbours at peak.
+const DOT_MIN = 0.42;
+const DOT_RANGE = 0.52;
+const TOOLTIP_OFFSET = 14;
+const TOOLTIP_WIDTH = 150;
+const TOOLTIP_HEIGHT = 64;
+
+// Unambiguous composite key — labels may themselves contain hyphens, spaces, etc.
+const pairKey = (rowLabel: string, colLabel: string) => JSON.stringify([rowLabel, colLabel]);
+
+const uniqueInOrder = (values: readonly string[]) => {
+  const seen = new Set<string>();
+  const ordered: string[] = [];
+  for (const value of values) {
+    if (!seen.has(value)) {
+      seen.add(value);
+      ordered.push(value);
+    }
+  }
+  return ordered;
+};
+
+function HeatmapChart({
+  data,
+  xKey,
+  yKey,
+  dataKey = "value",
+  variant = "square",
+  palette,
+  xLabels,
+  yLabels,
+  highlightPeak = true,
+  loading = false,
+  valueFormatter = (value) => value.toLocaleString("en-US"),
+  xTickFormatter,
+  yTickFormatter,
+  ariaLabel = "Activity heatmap",
+  className,
+}: HeatmapChartProps) {
+  const { paletteName, theme } = useChartContext(palette);
+  const [hovered, setHovered] = React.useState<HoverState | null>(null);
+  const [mounted, setMounted] = React.useState(false);
+
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const layout = React.useMemo(() => {
+    const columns = xLabels ? [...xLabels] : uniqueInOrder(data.map((row) => String(row[xKey] ?? "")));
+    const rows = yLabels ? [...yLabels] : uniqueInOrder(data.map((row) => String(row[yKey] ?? "")));
+    const valueAt = new Map<string, number>();
+    for (const row of data) {
+      valueAt.set(pairKey(String(row[yKey] ?? ""), String(row[xKey] ?? "")), Number(row[dataKey]) || 0);
+    }
+    let maxValue = 0;
+    let peakKey = "";
+    const cells = rows.flatMap((rowLabel, rowIndex) =>
+      columns.map((colLabel, colIndex) => {
+        const value = valueAt.get(pairKey(rowLabel, colLabel)) ?? 0;
+        if (value > maxValue) {
+          maxValue = value;
+          peakKey = pairKey(rowLabel, colLabel);
+        }
+        return { rowLabel, colLabel, rowIndex, colIndex, value };
+      }),
+    );
+    return { columns, rows, cells, maxValue, peakKey };
+  }, [data, xKey, yKey, dataKey, xLabels, yLabels]);
+
+  const { columns, rows, cells, maxValue, peakKey } = layout;
+  const isEmpty = columns.length === 0 || rows.length === 0 || maxValue <= 0;
+
+  if (loading) {
+    return (
+      <div
+        className={cn(
+          "flex items-center justify-center gap-2.5 font-mono text-quaternary-foreground text-text-xs",
+          className,
+        )}
+        style={{ minHeight: PLACEHOLDER_HEIGHT }}
+      >
+        <span className="size-4 animate-spin rounded-full border-2 border-border border-t-foreground" />
+        loading…
+      </div>
+    );
+  }
+
+  if (isEmpty) {
+    return (
+      <div
+        className={cn(
+          "flex items-center justify-center rounded-lg border border-border border-dashed font-mono text-quaternary-foreground text-text-xs",
+          className,
+        )}
+        style={{ minHeight: PLACEHOLDER_HEIGHT }}
+      >
+        no data in range
+      </div>
+    );
+  }
+
+  const ramp = heatRamp(paletteName, theme.isDark ? HEAT_EMPTY.dark : HEAT_EMPTY.light);
+  const totalWidth = PAD.left + columns.length * CELL + (columns.length - 1) * GAP + PAD.right;
+  const totalHeight = PAD.top + rows.length * CELL + (rows.length - 1) * GAP + PAD.bottom;
+  const xStride = Math.ceil(columns.length / MAX_X_TICKS);
+  const cellX = (col: number) => PAD.left + col * (CELL + GAP);
+  const cellY = (row: number) => PAD.top + row * (CELL + GAP);
+  const formatX = (label: string) => (xTickFormatter ? xTickFormatter(label) : label);
+  const formatY = (label: string) => (yTickFormatter ? yTickFormatter(label) : label);
+
+  // The tooltip follows the cursor; rendered through a portal so a transformed/
+  // clipped ancestor (e.g. the card's mount animation + overflow-hidden) can't
+  // shift or trim it. Flip near the viewport edges.
+  const tooltipLeft =
+    hovered && hovered.x + TOOLTIP_OFFSET + TOOLTIP_WIDTH > window.innerWidth
+      ? hovered.x - TOOLTIP_OFFSET - TOOLTIP_WIDTH
+      : (hovered?.x ?? 0) + TOOLTIP_OFFSET;
+  const tooltipTop =
+    hovered && hovered.y + TOOLTIP_OFFSET + TOOLTIP_HEIGHT > window.innerHeight
+      ? hovered.y - TOOLTIP_OFFSET - TOOLTIP_HEIGHT
+      : (hovered?.y ?? 0) + TOOLTIP_OFFSET;
+
+  return (
+    <div data-slot="heatmap-chart" className={cn("w-full", className)}>
+      <div className="overflow-x-auto">
+        <svg
+          viewBox={`0 0 ${totalWidth} ${totalHeight}`}
+          className="block min-w-[480px]"
+          style={{ width: "100%", height: "auto" }}
+          role="img"
+          aria-label={ariaLabel}
+          onMouseLeave={() => setHovered(null)}
+        >
+          {columns.map((label, col) =>
+            col % xStride === 0 ? (
+              <text
+                key={`x-${label}`}
+                x={cellX(col) + CELL / 2}
+                y={PAD.top - 7}
+                textAnchor="middle"
+                className="fill-quaternary-foreground font-mono text-[8.5px]"
+              >
+                {formatX(label)}
+              </text>
+            ) : null,
+          )}
+          {rows.map((label, row) => (
+            <text
+              key={`y-${label}`}
+              x={PAD.left - 8}
+              y={cellY(row) + CELL / 2 + 3}
+              textAnchor="end"
+              className="fill-quaternary-foreground font-mono text-[8.5px]"
+            >
+              {formatY(label)}
+            </text>
+          ))}
+          {cells.map((cell) => {
+            const fraction = cell.value / maxValue;
+            const fill = heatColor(ramp, fraction);
+            const key = pairKey(cell.rowLabel, cell.colLabel);
+            const isPeak = highlightPeak && key === peakKey;
+            if (variant === "dot") {
+              return (
+                <circle
+                  key={key}
+                  cx={cellX(cell.colIndex) + CELL / 2}
+                  cy={cellY(cell.rowIndex) + CELL / 2}
+                  r={(CELL / 2) * (DOT_MIN + DOT_RANGE * fraction)}
+                  fill={fill}
+                  stroke={isPeak ? theme.foreground : undefined}
+                  strokeWidth={isPeak ? 1.4 : undefined}
+                />
+              );
+            }
+            return (
+              <rect
+                key={key}
+                x={cellX(cell.colIndex)}
+                y={cellY(cell.rowIndex)}
+                width={CELL}
+                height={CELL}
+                rx={2.5}
+                fill={fill}
+                stroke={isPeak ? theme.foreground : undefined}
+                strokeWidth={isPeak ? 1.4 : undefined}
+              />
+            );
+          })}
+          {/* Transparent hit layer over the full pitch so every cell — and the gaps
+              between dots — registers hover uniformly. */}
+          {cells.map((cell) => (
+            // biome-ignore lint/a11y/noStaticElementInteractions: decorative hover tooltip; all values are visible on the cells
+            <rect
+              key={`hit-${pairKey(cell.rowLabel, cell.colLabel)}`}
+              x={cellX(cell.colIndex)}
+              y={cellY(cell.rowIndex)}
+              width={CELL + GAP}
+              height={CELL + GAP}
+              fill="transparent"
+              onMouseMove={(event) =>
+                setHovered({
+                  x: event.clientX,
+                  y: event.clientY,
+                  rowLabel: cell.rowLabel,
+                  colLabel: cell.colLabel,
+                  value: cell.value,
+                })
+              }
+            />
+          ))}
+        </svg>
+      </div>
+
+      {mounted &&
+        hovered &&
+        createPortal(
+          <div
+            className="pointer-events-none fixed z-50 min-w-[130px] rounded-lg border border-border bg-popover px-3 py-2.5 text-popover-foreground shadow-lg"
+            style={{ left: tooltipLeft, top: tooltipTop }}
+          >
+            <p className="mb-1.5 font-mono text-[10px] text-quaternary-foreground uppercase tracking-wider">
+              {formatY(hovered.rowLabel)} · {formatX(hovered.colLabel)}
+            </p>
+            <div className="flex items-center justify-between gap-4 text-text-xs">
+              <span className="inline-flex items-center gap-2 text-muted-foreground">
+                <span
+                  aria-hidden
+                  className="size-2 shrink-0 rounded-[2px]"
+                  style={{ background: heatColor(ramp, hovered.value / maxValue) }}
+                />
+                activity
+              </span>
+              <span className="font-mono font-semibold tabular-nums text-foreground">
+                {valueFormatter(hovered.value)}
+              </span>
+            </div>
+          </div>,
+          document.body,
+        )}
+    </div>
+  );
+}
+
+export { HeatmapChart };