Aurora AI Connection

1"use client"
2 
3/**
4 * Aurora Connection — a flow edge between two nodes (e.g. a data pipeline hop).
5 *
6 * Two rounded node pills, each with a status-tinted dot + label, joined by a
7 * directional edge (line + arrowhead) carrying an optional label. The edge
8 * reflects `status`:
9 *   - `ok`      — teal, solid
10 *   - `active`  — cyan, dashed + animated (flowing)
11 *   - `error`   — rose, solid
12 *   - `pending` — slate, dashed (static)
13 * `bidirectional` adds a reverse arrowhead at the source end.
14 *
15 * This file deliberately re-implements `Connection` (rather than re-exporting the
16 * legacy `core` version) so it can carry the `label` / `status` /
17 * `bidirectional` API while keeping every shadcn/Aurora guarantee:
18 * `forwardRef`, `displayName`, `React.memo`, and full
19 * `React.HTMLAttributes` spread. Token-only colors (`--aurora-*`).
20 */
21 
22import * as React from "react"
23 
24export type ConnectionStatus = "ok" | "active" | "error" | "pending"
25 
26export interface ConnectionProps extends React.HTMLAttributes<HTMLDivElement> {
27  /** Source node label. */
28  from: string
29  /** Target node label. */
30  to: string
31  /** Optional caption rendered above the edge (e.g. latency, status code). */
32  label?: string
33  /** Drives the edge + dot tint and the dash/flow treatment. */
34  status?: ConnectionStatus
35  /** Adds a reverse arrowhead at the source end. */
36  bidirectional?: boolean
37}
38 
39// Styles: registry/aurora/styles/aurora-components.css (@layer aurora-components).
40 
41const Connection = (
42    { ref,
43      from,
44      to,
45      label,
46      status = "ok",
47      bidirectional = false,
48      className,
49      ...props
50    }: ConnectionProps & { ref?: React.Ref<HTMLDivElement> }
51  ) => {
52    const dashed = status === "active" || status === "pending"
53    const flowing = status === "active"
54    const cls = ["aurora-connection", className].filter(Boolean).join(" ")
55    const ariaLabel = bidirectional
56      ? `${from} connected bidirectionally with ${to}${label ? `, ${label}` : ""}`
57      : `${from} connects to ${to}${label ? `, ${label}` : ""}`
58 
59    return (
60      <div
61        ref={ref}
62        className={cls}
63        data-status={status}
64        data-dashed={dashed || undefined}
65        data-flowing={flowing || undefined}
66        role="img"
67        aria-label={ariaLabel}
68        {...props}
69      >
70        <span className="aurora-connection__node">
71          <span className="aurora-connection__dot" aria-hidden />
72// … truncated