{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "aurora-ai-canvas", "title": "Aurora AI Canvas", "author": "jmagar ", "description": "Aurora-native flow canvas with node edges and compact zoom actions.", "dependencies": [ "lucide-react@^0.487.0" ], "registryDependencies": [ "@aurora/aurora-tokens", "@aurora/aurora-ai-action" ], "files": [ { "path": "registry/aurora/blocks/ai/elements/canvas.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Minus, Plus } from \"lucide-react\"\nimport { Action } from \"./action\"\nimport { cn } from \"@/lib/utils\"\n\n/* ------------------------------------------------------------------ *\n * Aurora · Canvas (AI element)\n *\n * A flow canvas with a header chip (status dot + title), a node-count\n * badge, a dotted-grid surface, absolutely-positioned nodes carrying\n * cyan input ports (left) + rose output ports (right), cyan bezier\n * edges that follow the nodes, and a zoom toolbar.\n *\n * Architecture (forwardRef, displayName, compound Node, HTMLAttributes\n * passthrough) is kept from the Aurora registry, while controls and typography\n * follow Aurora tokens and primitives.\n * ------------------------------------------------------------------ */\n\ntype CanvasStatus = \"running\" | \"idle\" | \"blocked\"\n\nexport interface CanvasEdge {\n /** index of the source Node child */\n from: number\n /** index of the target Node child */\n to: number\n}\n\nexport interface CanvasProps extends Omit, \"title\"> {\n title?: React.ReactNode\n status?: CanvasStatus\n /** edges drawn between Node children, by child index */\n edges?: CanvasEdge[]\n}\n\nexport interface NodeProps extends React.HTMLAttributes {\n title: string\n description?: string\n}\n\nconst statusGlow: Record = {\n running: {\n dot: \"var(--aurora-accent-primary)\",\n 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)\",\n },\n idle: {\n dot: \"var(--aurora-text-muted)\",\n glow: \"0 0 0 3px color-mix(in srgb, var(--aurora-text-muted) 18%, transparent)\",\n },\n blocked: {\n dot: \"var(--axon-orange)\",\n 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)\",\n },\n}\n\n/* Geometry parsed from a Node child's inline style. Nodes are positioned with\n * absolute left/top + a fixed width; height is estimated from the node card\n * chrome so edges can anchor to the vertical port center. */\ntype NodeBox = { left: number; top: number; width: number; height: number }\n\nconst NODE_HEIGHT = 64\nconst PORT = 12\n\nfunction parseLen(value: string | number | undefined, fallback: number): number {\n if (typeof value === \"number\") return value\n if (typeof value === \"string\") {\n const n = parseFloat(value)\n if (!Number.isNaN(n)) return n\n }\n return fallback\n}\n\nfunction nodeBox(style: React.CSSProperties | undefined): NodeBox {\n return {\n left: parseLen(style?.left as string | number | undefined, 0),\n top: parseLen(style?.top as string | number | undefined, 0),\n width: parseLen(style?.width as string | number | undefined, 128),\n height: parseLen(style?.height as string | number | undefined, NODE_HEIGHT),\n }\n}\n\n/* Horizontal-tangent cubic bezier from a source right-port to a target\n * left-port so edges follow the nodes. */\nfunction edgePath(a: NodeBox, b: NodeBox): string {\n const x1 = a.left + a.width\n const y1 = a.top + a.height / 2\n const x2 = b.left\n const y2 = b.top + b.height / 2\n const dx = Math.max(40, Math.abs(x2 - x1) * 0.6)\n return `M ${x1} ${y1} C ${x1 + dx} ${y1}, ${x2 - dx} ${y2}, ${x2} ${y2}`\n}\n\nconst Node = ({ ref, title, description, className, style, ...props }: NodeProps & { ref?: React.Ref }) => (\n \n \n \n {title}\n \n {description ? (\n \n {description}\n \n ) : null}\n\n {/* input port (cyan, filled) — left edge */}\n \n {/* output port (rose, hollow) — right edge */}\n \n \n )\nNode.displayName = \"Node\"\n\nconst Canvas = ({ ref, title, status = \"idle\", edges = [], className, style, children, ...props }: CanvasProps & { ref?: React.Ref }) => {\n const nodes = React.Children.toArray(children).filter(\n (c): c is React.ReactElement => React.isValidElement(c)\n )\n const boxes = nodes.map((n) => nodeBox((n.props as NodeProps).style))\n const glow = statusGlow[status] ?? statusGlow.idle\n\n return (\n \n {/* edges layer */}\n \n {edges.map((e, i) => {\n const a = boxes[e.from]\n const b = boxes[e.to]\n if (!a || !b) return null\n return (\n \n )\n })}\n \n\n {/* header: status chip + node count */}\n {(title != null || nodes.length > 0) && (\n
\n {title != null ? (\n \n \n \n {title}\n \n
\n ) : (\n \n )}\n \n {nodes.length} {nodes.length === 1 ? \"node\" : \"nodes\"}\n \n \n )}\n\n {/* nodes layer */}\n
{children}
\n\n {/* zoom toolbar */}\n \n \n \n \n \n 100%\n \n \n \n \n \n \n )\n }\nCanvas.displayName = \"Canvas\"\n\nexport { Canvas, Node }\n", "type": "registry:component", "target": "@components/aurora/ai/canvas.tsx" } ], "meta": { "namespace": "@aurora", "style": "aurora", "family": "block", "requiresTokens": true, "sourcePath": "registry/aurora/blocks/ai/elements/canvas.tsx", "installTarget": "@components/aurora/ai/canvas.tsx", "taxonomy": "ai" }, "docs": "Aurora block that installs Aurora AI Canvas.\n\nInstall `aurora-tokens` and `aurora-ai-action` first; the shadcn CLI resolves these automatically through the @aurora registry namespace.\n\nDefault install target: `@components/aurora/ai/canvas.tsx`.\n\nRegistry dependencies: `aurora-tokens`, `aurora-ai-action`.", "categories": [ "aurora", "block", "ai" ], "type": "registry:block" }