@spatika/react 1.1.0 → 1.2.0

package/src/lib/webgl-scatter.test.ts

@@ -0,0 +1,36 @@
+import { describe, expect, it } from "vitest";
+import {
+  nearestScatterHit,
+  parseCssColor,
+  shouldUseWebGL,
+  WEBGL_AUTO_THRESHOLD,
+} from "./webgl-scatter";
+
+describe("webgl scatter helpers", () => {
+  it("parses hex and rgb colors", () => {
+    expect(parseCssColor("#ff0000")).toEqual([1, 0, 0, 1]);
+    expect(parseCssColor("rgb(0, 128, 255)")).toEqual([0, 128 / 255, 1, 1]);
+    expect(parseCssColor("not-a-color")).toBeNull();
+  });
+
+  it("selects webgl for auto clouds above the threshold", () => {
+    expect(shouldUseWebGL("svg", 10_000)).toBe(false);
+    expect(shouldUseWebGL("webgl", 3)).toBe(true);
+    expect(shouldUseWebGL("auto", WEBGL_AUTO_THRESHOLD)).toBe(true);
+    expect(shouldUseWebGL("auto", 10)).toBe(false);
+  });
+
+  it("finds the nearest point within the hit radius", () => {
+    const hit = nearestScatterHit(
+      [
+        { x: 10, y: 10, r: 4, seriesIndex: 0, pointIndex: 0 },
+        { x: 40, y: 40, r: 4, seriesIndex: 1, pointIndex: 2 },
+      ],
+      41,
+      39,
+    );
+    expect(hit?.seriesIndex).toBe(1);
+    expect(hit?.pointIndex).toBe(2);
+    expect(nearestScatterHit([{ x: 0, y: 0, r: 2, seriesIndex: 0, pointIndex: 0 }], 80, 80)).toBeNull();
+  });
+});

package/src/lib/webgl-scatter.ts

@@ -0,0 +1,230 @@
+/**
+ * Raw WebGL scatter renderer — no three.js.
+ * Canvas sits behind SVG axes; hit-testing stays on the CPU.
+ */
+
+export type ScatterRenderer = "svg" | "webgl" | "auto";
+
+export const WEBGL_AUTO_THRESHOLD = 2000;
+
+export function shouldUseWebGL(renderer: ScatterRenderer | undefined, pointCount: number): boolean {
+  if (renderer === "webgl") return true;
+  if (renderer === "auto") return pointCount >= WEBGL_AUTO_THRESHOLD;
+  return false;
+}
+
+export type Rgba = [number, number, number, number];
+
+export function parseCssColor(css: string): Rgba | null {
+  const hex = css.trim();
+  const hexMatch = /^#([0-9a-f]{3,8})$/i.exec(hex);
+  if (hexMatch) {
+    let h = hexMatch[1]!;
+    if (h.length === 3 || h.length === 4) h = [...h].map((c) => c + c).join("");
+    const n = Number.parseInt(h.slice(0, 6), 16);
+    const a = h.length === 8 ? Number.parseInt(h.slice(6, 8), 16) / 255 : 1;
+    return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255, a];
+  }
+  const rgb = /^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)(?:\s*,\s*([\d.]+))?\s*\)$/i.exec(hex);
+  if (rgb) {
+    return [
+      Number(rgb[1]) / 255,
+      Number(rgb[2]) / 255,
+      Number(rgb[3]) / 255,
+      rgb[4] != null ? Number(rgb[4]) : 1,
+    ];
+  }
+  return null;
+}
+
+export function resolveCssColor(color: string, el?: Element | null): Rgba {
+  const parsed = parseCssColor(color);
+  if (parsed) return parsed;
+  if (typeof document === "undefined" || !el) return [0.35, 0.55, 0.95, 1];
+  const probe = document.createElement("span");
+  probe.style.color = color;
+  probe.style.position = "absolute";
+  probe.style.pointerEvents = "none";
+  probe.style.opacity = "0";
+  el.appendChild(probe);
+  const computed = getComputedStyle(probe).color;
+  probe.remove();
+  return parseCssColor(computed) ?? [0.35, 0.55, 0.95, 1];
+}
+
+export type ScatterHitCandidate = {
+  x: number;
+  y: number;
+  r: number;
+  seriesIndex: number;
+  pointIndex: number;
+};
+
+export function nearestScatterHit(
+  candidates: ScatterHitCandidate[],
+  px: number,
+  py: number,
+  pad = 4,
+): ScatterHitCandidate | null {
+  let best: ScatterHitCandidate | null = null;
+  let bestDist = Infinity;
+  for (const item of candidates) {
+    const dx = item.x - px;
+    const dy = item.y - py;
+    const dist = Math.hypot(dx, dy);
+    if (dist <= item.r + pad && dist < bestDist) {
+      best = item;
+      bestDist = dist;
+    }
+  }
+  return best;
+}
+
+export function svgPointerPosition(
+  svg: SVGSVGElement,
+  clientX: number,
+  clientY: number,
+  width: number,
+  height: number,
+): { x: number; y: number } {
+  const bounds = svg.getBoundingClientRect();
+  const w = bounds.width || width;
+  const h = bounds.height || height;
+  return {
+    x: ((clientX - bounds.left) / w) * width,
+    y: ((clientY - bounds.top) / h) * height,
+  };
+}
+
+const VS = `
+attribute vec2 a_position;
+attribute float a_size;
+uniform vec2 u_resolution;
+uniform float u_dpr;
+void main() {
+  vec2 zeroToOne = a_position / u_resolution;
+  vec2 clip = zeroToOne * 2.0 - 1.0;
+  gl_Position = vec4(clip.x, -clip.y, 0.0, 1.0);
+  gl_PointSize = max(1.0, a_size * u_dpr);
+}
+`;
+
+const FS = `
+precision mediump float;
+uniform vec4 u_color;
+void main() {
+  vec2 c = gl_PointCoord - vec2(0.5);
+  if (dot(c, c) > 0.25) discard;
+  gl_FragColor = u_color;
+}
+`;
+
+export type ScatterGL = {
+  gl: WebGLRenderingContext;
+  program: WebGLProgram;
+  buffer: WebGLBuffer;
+  aPosition: number;
+  aSize: number;
+  uResolution: WebGLUniformLocation | null;
+  uDpr: WebGLUniformLocation | null;
+  uColor: WebGLUniformLocation | null;
+};
+
+function compile(gl: WebGLRenderingContext, type: number, source: string): WebGLShader | null {
+  const shader = gl.createShader(type);
+  if (!shader) return null;
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    gl.deleteShader(shader);
+    return null;
+  }
+  return shader;
+}
+
+export function createScatterGL(canvas: HTMLCanvasElement): ScatterGL | null {
+  const gl = canvas.getContext("webgl", {
+    alpha: true,
+    antialias: true,
+    premultipliedAlpha: true,
+  });
+  if (!gl) return null;
+  const vs = compile(gl, gl.VERTEX_SHADER, VS);
+  const fs = compile(gl, gl.FRAGMENT_SHADER, FS);
+  if (!vs || !fs) return null;
+  const program = gl.createProgram();
+  if (!program) return null;
+  gl.attachShader(program, vs);
+  gl.attachShader(program, fs);
+  gl.linkProgram(program);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) return null;
+  const buffer = gl.createBuffer();
+  if (!buffer) return null;
+  gl.enable(gl.BLEND);
+  gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+  return {
+    gl,
+    program,
+    buffer,
+    aPosition: gl.getAttribLocation(program, "a_position"),
+    aSize: gl.getAttribLocation(program, "a_size"),
+    uResolution: gl.getUniformLocation(program, "u_resolution"),
+    uDpr: gl.getUniformLocation(program, "u_dpr"),
+    uColor: gl.getUniformLocation(program, "u_color"),
+  };
+}
+
+export type ScatterGLSeries = {
+  positions: Array<{ x: number; y: number; size: number }>;
+  color: string;
+};
+
+export function drawScatterGL(
+  gpu: ScatterGL,
+  canvas: HTMLCanvasElement,
+  width: number,
+  height: number,
+  series: ScatterGLSeries[],
+): void {
+  const dpr = typeof window !== "undefined" ? Math.min(window.devicePixelRatio || 1, 2) : 1;
+  const pixelW = Math.max(1, Math.round(width * dpr));
+  const pixelH = Math.max(1, Math.round(height * dpr));
+  if (canvas.width !== pixelW) canvas.width = pixelW;
+  if (canvas.height !== pixelH) canvas.height = pixelH;
+  canvas.style.width = `${width}px`;
+  canvas.style.height = `${height}px`;
+
+  const { gl } = gpu;
+  gl.viewport(0, 0, pixelW, pixelH);
+  gl.clearColor(0, 0, 0, 0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  gl.useProgram(gpu.program);
+  gl.uniform2f(gpu.uResolution, width, height);
+  gl.uniform1f(gpu.uDpr, dpr);
+  gl.bindBuffer(gl.ARRAY_BUFFER, gpu.buffer);
+
+  const stride = 3 * 4;
+  for (const item of series) {
+    if (!item.positions.length) continue;
+    const data = new Float32Array(item.positions.length * 3);
+    item.positions.forEach((point, i) => {
+      data[i * 3] = point.x;
+      data[i * 3 + 1] = point.y;
+      data[i * 3 + 2] = point.size;
+    });
+    gl.bufferData(gl.ARRAY_BUFFER, data, gl.DYNAMIC_DRAW);
+    gl.enableVertexAttribArray(gpu.aPosition);
+    gl.vertexAttribPointer(gpu.aPosition, 2, gl.FLOAT, false, stride, 0);
+    gl.enableVertexAttribArray(gpu.aSize);
+    gl.vertexAttribPointer(gpu.aSize, 1, gl.FLOAT, false, stride, 8);
+    const [r, g, b, a] = resolveCssColor(item.color, canvas.parentElement ?? canvas);
+    gl.uniform4f(gpu.uColor, r, g, b, a);
+    gl.drawArrays(gl.POINTS, 0, item.positions.length);
+  }
+}
+
+export function destroyScatterGL(gpu: ScatterGL): void {
+  const { gl } = gpu;
+  gl.deleteBuffer(gpu.buffer);
+  gl.deleteProgram(gpu.program);
+}

package/src/primitives/Accordion.tsx

@@ -1,114 +1,269 @@
 import * as React from "react";
 import { ChevronDown } from "lucide-react";
+import { useControllableState } from "../lib/use-controllable-state";
 import { cn } from "../lib/cn";
+import { Collapse } from "./Collapse";
+
+type AccordionType = "single" | "multiple";
 
 type AccordionContextValue = {
   open: string[];
   toggle: (id: string) => void;
-  type: "single" | "multiple";
+  type: AccordionType;
+  disabled: boolean;
+  disableGutters: boolean;
+};
+
+type AccordionItemContextValue = {
+  value: string;
+  disabled: boolean;
+  expanded: boolean;
+  triggerId: string;
+  contentId: string;
 };
 
 const AccordionContext = React.createContext<AccordionContextValue | null>(null);
+const AccordionItemContext = React.createContext<AccordionItemContextValue | null>(null);
+
+function useAccordion(component: string) {
+  const ctx = React.useContext(AccordionContext);
+  if (!ctx) throw new Error(`${component} must be used within <Accordion>`);
+  return ctx;
+}
+
+function useAccordionItem(component: string) {
+  const ctx = React.useContext(AccordionItemContext);
+  if (!ctx) throw new Error(`${component} must be used within <AccordionItem>`);
+  return ctx;
+}
+
+export type AccordionProps = Omit<React.ComponentPropsWithoutRef<"div">, "onChange"> & {
+  type?: AccordionType;
+  value?: string | string[];
+  defaultValue?: string | string[];
+  onValueChange?: (value: string | string[]) => void;
+  disabled?: boolean;
+  /** Remove the gap between items and stack them as a single surface. */
+  disableGutters?: boolean;
+};
+
+function toArray(value?: string | string[]) {
+  if (value == null || value === "") return [];
+  return Array.isArray(value) ? value : [value];
+}
 
 function Accordion({
   type = "single",
+  value: valueProp,
   defaultValue,
+  onValueChange,
+  disabled = false,
+  disableGutters = false,
   className,
   children,
-}: {
-  type?: "single" | "multiple";
-  defaultValue?: string | string[];
-  className?: string;
-  children: React.ReactNode;
-}) {
-  const initial = Array.isArray(defaultValue)
-    ? defaultValue
-    : defaultValue
-      ? [defaultValue]
-      : [];
-  const [open, setOpen] = React.useState<string[]>(initial);
+  ...props
+}: AccordionProps) {
+  const [open = [], setOpen] = useControllableState<string[]>({
+    prop: valueProp === undefined ? undefined : toArray(valueProp),
+    defaultProp: toArray(defaultValue),
+    onChange: (next) => {
+      onValueChange?.(type === "single" ? (next[0] ?? "") : next);
+    },
+  });
+
   const toggle = (id: string) => {
+    if (disabled) return;
     setOpen((prev) => {
-      const isOpen = prev.includes(id);
+      const current = prev ?? [];
+      const isOpen = current.includes(id);
       if (type === "single") return isOpen ? [] : [id];
-      return isOpen ? prev.filter((x) => x !== id) : [...prev, id];
+      return isOpen ? current.filter((x) => x !== id) : [...current, id];
     });
   };
+
   return (
-    <AccordionContext.Provider value={{ open, toggle, type }}>
-      <div data-slot="accordion" className={cn("space-y-2", className)}>
+    <AccordionContext.Provider
+      value={{ open: open ?? [], toggle, type, disabled, disableGutters }}
+    >
+      <div
+        data-slot="accordion"
+        data-disabled={disabled ? "" : undefined}
+        data-gutters={disableGutters ? "false" : "true"}
+        className={cn(disableGutters ? "overflow-hidden rounded-xl" : "space-y-2", className)}
+        {...props}
+      >
         {children}
       </div>
     </AccordionContext.Provider>
   );
 }
+Accordion.displayName = "Accordion";
+
+export type AccordionItemProps = React.ComponentPropsWithoutRef<"div"> & {
+  value: string;
+  disabled?: boolean;
+};
 
 function AccordionItem({
   value,
+  disabled = false,
   className,
   children,
-}: {
-  value: string;
-  className?: string;
-  children: React.ReactNode;
-}) {
+  ...props
+}: AccordionItemProps) {
+  const accordion = useAccordion("AccordionItem");
+  const reactId = React.useId();
+  const expanded = accordion.open.includes(value);
+  const isDisabled = disabled || accordion.disabled;
+
   return (
-    <div
-      data-slot="accordion-item"
-      data-value={value}
-      className={cn("overflow-hidden rounded-xl border border-border/40 bg-card/40", className)}
+    <AccordionItemContext.Provider
+      value={{
+        value,
+        disabled: isDisabled,
+        expanded,
+        triggerId: `${reactId}-trigger`,
+        contentId: `${reactId}-content`,
+      }}
     >
-      {children}
-    </div>
+      <div
+        data-slot="accordion-item"
+        data-value={value}
+        data-state={expanded ? "open" : "closed"}
+        data-disabled={isDisabled ? "" : undefined}
+        className={cn(
+          "overflow-hidden border-border/40 bg-card/40",
+          accordion.disableGutters
+            ? "border-x border-b first:rounded-t-xl first:border-t last:rounded-b-xl"
+            : "rounded-xl border",
+          isDisabled && "pointer-events-none opacity-50",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    </AccordionItemContext.Provider>
   );
 }
+AccordionItem.displayName = "AccordionItem";
+
+export type AccordionTriggerProps = React.ComponentPropsWithoutRef<"button"> & {
+  /** @deprecated Prefer wrapping with AccordionItem — value is inherited. */
+  value?: string;
+};
 
 function AccordionTrigger({
-  value,
+  value: valueProp,
   className,
   children,
-}: {
-  value: string;
-  className?: string;
-  children: React.ReactNode;
-}) {
-  const ctx = React.useContext(AccordionContext);
-  const isOpen = ctx?.open.includes(value);
+  onClick,
+  ...props
+}: AccordionTriggerProps) {
+  const accordion = useAccordion("AccordionTrigger");
+  const item = React.useContext(AccordionItemContext);
+  const value = valueProp ?? item?.value;
+  if (!value) throw new Error("AccordionTrigger requires AccordionItem or a value prop");
+
+  const expanded = item?.expanded ?? accordion.open.includes(value);
+  const disabled = item?.disabled ?? accordion.disabled;
+
   return (
-    <button
-      type="button"
-      data-slot="accordion-trigger"
-      aria-expanded={isOpen}
-      className={cn(
-        "flex w-full items-center justify-between gap-2 px-4 py-3 text-left text-sm font-bold",
-        className,
-      )}
-      onClick={() => ctx?.toggle(value)}
-    >
-      {children}
-      <ChevronDown
-        className={cn("size-4 shrink-0 transition-transform", isOpen && "rotate-180")}
-      />
-    </button>
+    <h3 className="m-0">
+      <button
+        type="button"
+        id={item?.triggerId}
+        data-slot="accordion-trigger"
+        data-state={expanded ? "open" : "closed"}
+        aria-expanded={expanded}
+        aria-controls={item?.contentId}
+        disabled={disabled}
+        className={cn(
+          "flex w-full items-center justify-between gap-2 px-4 py-3 text-left text-sm font-bold outline-none transition-colors",
+          "hover:bg-muted/30 focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+          "disabled:cursor-not-allowed",
+          className,
+        )}
+        onClick={(event) => {
+          onClick?.(event);
+          if (event.defaultPrevented || disabled) return;
+          accordion.toggle(value);
+        }}
+        {...props}
+      >
+        {children}
+        <ChevronDown
+          aria-hidden
+          className={cn(
+            "size-4 shrink-0 text-muted-foreground transition-transform duration-300",
+            expanded && "rotate-180",
+          )}
+        />
+      </button>
+    </h3>
   );
 }
+AccordionTrigger.displayName = "AccordionTrigger";
+
+export type AccordionContentProps = React.ComponentPropsWithoutRef<"div"> & {
+  /** @deprecated Prefer wrapping with AccordionItem — value is inherited. */
+  value?: string;
+};
 
 function AccordionContent({
-  value,
+  value: valueProp,
   className,
   children,
-}: {
-  value: string;
-  className?: string;
-  children: React.ReactNode;
-}) {
-  const ctx = React.useContext(AccordionContext);
-  if (!ctx?.open.includes(value)) return null;
+  ...props
+}: AccordionContentProps) {
+  const accordion = useAccordion("AccordionContent");
+  const item = React.useContext(AccordionItemContext);
+  const value = valueProp ?? item?.value;
+  if (!value) throw new Error("AccordionContent requires AccordionItem or a value prop");
+
+  const expanded = item?.expanded ?? accordion.open.includes(value);
+
+  return (
+    <Collapse in={expanded}>
+      <div
+        id={item?.contentId}
+        role="region"
+        aria-labelledby={item?.triggerId}
+        data-slot="accordion-content"
+        className={cn("border-t border-border/30 px-4 py-3 text-sm", className)}
+        {...props}
+      >
+        {children}
+      </div>
+    </Collapse>
+  );
+}
+AccordionContent.displayName = "AccordionContent";
+
+function AccordionActions({ className, ...props }: React.ComponentPropsWithoutRef<"div">) {
   return (
-    <div data-slot="accordion-content" className={cn("border-t border-border/30 px-4 py-3 text-sm", className)}>
-      {children}
-    </div>
+    <div
+      data-slot="accordion-actions"
+      className={cn(
+        "flex flex-wrap items-center justify-end gap-2 border-t border-border/30 px-4 py-2.5",
+        className,
+      )}
+      {...props}
+    />
   );
 }
+AccordionActions.displayName = "AccordionActions";
+
+/** MUI-compatible aliases. */
+const AccordionSummary = AccordionTrigger;
+const AccordionDetails = AccordionContent;
 
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
+export {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+  AccordionActions,
+  AccordionSummary,
+  AccordionDetails,
+};

package/src/primitives/AppBar.tsx

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/cn";
+
+const appBarVariants = cva("z-40 flex w-full items-center border-b border-border/50", {
+  variants: {
+    position: {
+      static: "relative",
+      sticky: "sticky top-0",
+      fixed: "fixed inset-x-0 top-0",
+      relative: "relative",
+    },
+    color: {
+      default: "glass-header text-foreground",
+      primary: "bg-primary text-primary-foreground border-transparent",
+      transparent: "border-transparent bg-transparent",
+    },
+  },
+  defaultVariants: {
+    position: "sticky",
+    color: "default",
+  },
+});
+
+export type AppBarProps = Omit<React.ComponentPropsWithoutRef<"header">, "color"> &
+  VariantProps<typeof appBarVariants>;
+
+function AppBar({ className, position, color, ...props }: AppBarProps) {
+  return (
+    <header
+      data-slot="app-bar"
+      className={cn(appBarVariants({ position, color }), className)}
+      {...props}
+    />
+  );
+}
+AppBar.displayName = "AppBar";
+
+export { AppBar, appBarVariants };