Aurora AI Node

1"use client"
2 
3import * as React from "react"
4import { cn } from "@/lib/utils"
5 
6/**
7 * Node — a flow-graph node card with a status accent, an interactive selected
8 * state, and left/right connection handles.
9 *
10 * The status accent is a rounded bar inset on the left edge plus a matching
11 * status dot before the title. Selecting the node draws a rose ring around the
12 * whole card. Connection handles are the hollow cyan rings that straddle the
13 * left and right vertical-center edges.
14 */
15 
16export type NodeStatus = "idle" | "running" | "done" | "error"
17 
18export interface NodeProps extends React.HTMLAttributes<HTMLDivElement> {
19  title: string
20  description?: string
21  /** Drives the left accent bar + status dot color. */
22  status?: NodeStatus
23  /** Draws the rose selection ring + reports aria-pressed when interactive. */
24  selected?: boolean
25  /** Show the left/right connection handles. Defaults to true. */
26  handles?: boolean
27}
28 
29const statusColor: Record<NodeStatus, string> = {
30  idle: "var(--aurora-text-muted)",
31  running: "var(--aurora-accent-primary)",
32  done: "var(--aurora-success)",
33  error: "var(--aurora-error)",
34}
35 
36const Node = (
37    { ref,
38      title,
39      description,
40      status = "idle",
41      selected = false,
42      handles = true,
43      className,
44      style,
45      onClick,
46      ...props
47    }: NodeProps & { ref?: React.Ref<HTMLDivElement> }
48  ) => {
49    const interactive = typeof onClick === "function"
50    const accent = statusColor[status]
51 
52    return (
53      <div
54        ref={ref}
55        role={interactive ? "button" : undefined}
56        tabIndex={interactive ? 0 : undefined}
57        aria-pressed={interactive ? selected : undefined}
58        onClick={onClick}
59        onKeyDown={
60          interactive
61            ? (event) => {
62                if (event.key === "Enter" || event.key === " ") {
63                  event.preventDefault()
64                  ;(event.currentTarget as HTMLElement).click()
65                }
66              }
67            : undefined
68        }
69        className={cn("aurora-node", interactive && "aurora-node--interactive", className)}
70        style={
71          {
72            "--node-accent": accent,
73            position: "relative",
74            boxSizing: "border-box",
75            width: "13.5rem",
76            paddingTop: "13px",
77            paddingBottom: "13px",
78            paddingLeft: "22px",
79            paddingRight: "16px",
80            background: "var(--aurora-surface-raised)",
81            border: selected
82// … truncated