Aurora AI Edge

1/**
2 * Aurora Edge — a graph edge label rendered as a compact, tone-tinted pill.
3 *
4 * A rounded pill carrying a small tone-colored dot + label, with optional
5 * inline direction arrows and an optional dashed / animated-flow treatment.
6 * Used to annotate connections in a node graph (status codes, sync state,
7 * latency, etc.).
8 *
9 *   tone:
10 *     - `active`  — cyan (accent primary); pairs with `animated` for flow
11 *     - `success` — teal
12 *     - `warn`    — sand
13 *     - `error`   — rose
14 *     - `muted`   — slate (default)
15 *   direction:
16 *     - `forward` — trailing `→`
17 *     - `back`    — leading `←`
18 *     - `both`    — leading `←` and trailing `→`
19 *     - `none`    — no arrows (default)
20 *   `dashed`   — dashed pill border (e.g. a tentative / pending edge)
21 *   `animated` — flowing dashed border (continuous motion); respects
22 *                `prefers-reduced-motion`
23 *
24 * This file deliberately re-implements `Edge` (rather than re-exporting the
25 * legacy `core` divider version) so it can carry the `tone` / `direction` /
26 * `dashed` / `animated` API while keeping every shadcn/Aurora guarantee:
27 * `forwardRef`, `displayName`, `React.memo`, and full `React.HTMLAttributes`
28 * spread. Token-only colors (`--aurora-*`).
29 */
30 
31import * as React from "react"
32 
33export type EdgeTone = "active" | "success" | "warn" | "error" | "muted"
34export type EdgeDirection = "none" | "forward" | "back" | "both"
35 
36export interface EdgeProps extends React.HTMLAttributes<HTMLDivElement> {
37  /** Edge caption (e.g. "200 OK", "sync", "429 retry"). */
38  label?: string
39  /** Drives the dot / label / border tint. */
40  tone?: EdgeTone
41  /** Inline direction arrows. */
42  direction?: EdgeDirection
43  /** Render the pill border as a static dash. */
44  dashed?: boolean
45  /** Animate the dashed border as a flowing edge. */
46  animated?: boolean
47}
48 
49// Styles: registry/aurora/styles/aurora-components.css (@layer aurora-components).
50 
51const ARROW_BACK = "←" // ←
52const ARROW_FORWARD = "→" // →
53 
54const Edge = (
55    { ref,
56      label = "edge",
57      tone = "muted",
58      direction = "none",
59      dashed = false,
60      animated = false,
61      className,
62      ...props
63    }: EdgeProps & { ref?: React.Ref<HTMLDivElement> }
64  ) => {
65    const flowing = animated
66    const showBack = direction === "back" || direction === "both"
67    const showForward = direction === "forward" || direction === "both"
68// … truncated