Aurora AI Canvas

1"use client"
2 
3import * as React from "react"
4import { Minus, Plus } from "lucide-react"
5import { Action } from "./action"
6import { cn } from "@/lib/utils"
7 
8/* ------------------------------------------------------------------ *
9 * Aurora · Canvas (AI element)
10 *
11 * A flow canvas with a header chip (status dot + title), a node-count
12 * badge, a dotted-grid surface, absolutely-positioned nodes carrying
13 * cyan input ports (left) + rose output ports (right), cyan bezier
14 * edges that follow the nodes, and a zoom toolbar.
15 *
16 * Architecture (forwardRef, displayName, compound Node, HTMLAttributes
17 * passthrough) is kept from the Aurora registry, while controls and typography
18 * follow Aurora tokens and primitives.
19 * ------------------------------------------------------------------ */
20 
21type CanvasStatus = "running" | "idle" | "blocked"
22 
23export interface CanvasEdge {
24  /** index of the source Node child */
25  from: number
26  /** index of the target Node child */
27  to: number
28}
29 
30export interface CanvasProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
31  title?: React.ReactNode
32  status?: CanvasStatus
33  /** edges drawn between Node children, by child index */
34  edges?: CanvasEdge[]
35}
36 
37export interface NodeProps extends React.HTMLAttributes<HTMLDivElement> {
38  title: string
39  description?: string
40}
41 
42const statusGlow: Record<CanvasStatus, { dot: string; glow: string }> = {
43  running: {
44    dot: "var(--aurora-accent-primary)",
45    glow: "0 0 0 3px color-mix(in srgb, var(--aurora-accent-primary) 22%, transparent), 0 0 12px color-mix(in srgb, var(--aurora-accent-primary) 60%, transparent)",
46  },
47  idle: {
48    dot: "var(--aurora-text-muted)",
49    glow: "0 0 0 3px color-mix(in srgb, var(--aurora-text-muted) 18%, transparent)",
50  },
51  blocked: {
52    dot: "var(--axon-orange)",
53    glow: "0 0 0 3px color-mix(in srgb, var(--axon-orange) 22%, transparent), 0 0 12px color-mix(in srgb, var(--axon-orange) 55%, transparent)",
54  },
55}
56 
57/* Geometry parsed from a Node child's inline style. Nodes are positioned with
58 * absolute left/top + a fixed width; height is estimated from the node card
59 * chrome so edges can anchor to the vertical port center. */
60type NodeBox = { left: number; top: number; width: number; height: number }
61 
62const NODE_HEIGHT = 64
63const PORT = 12
64 
65function parseLen(value: string | number | undefined, fallback: number): number {
66  if (typeof value === "number") return value
67  if (typeof value === "string") {
68    const n = parseFloat(value)
69// … truncated