Aurora AI Panel

1"use client"
2 
3import * as React from "react"
4import type { LucideIcon } from "lucide-react"
5import { cn } from "@/lib/utils"
6 
7// ---------------------------------------------------------------------------
8// Panel — generic AI-element card.
9//
10// Raised AI-element surface with a recessed strong border and an inset top
11// highlight, a header row with an optional tone-tinted icon tile, a
12// tone-colored uppercase eyebrow above a bold title, an actions slot on the
13// trailing edge, body content, and an optional footer separated by a hairline
14// rule. Tones map onto Aurora accents: cyan, rose, orange, and neutral.
15//
16// Architecture: standalone component + memo, superset of the original
17// `title` + children API (both still render). The optional `icon` accepts a
18// Lucide icon component or trusted React SVG element.
19// ---------------------------------------------------------------------------
20 
21type PanelTone = "cyan" | "rose" | "orange" | "neutral"
22type PanelIcon = LucideIcon | React.ReactElement<React.SVGProps<SVGSVGElement>>
23 
24const toneColor: Record<PanelTone, string> = {
25  cyan: "var(--aurora-accent-primary)",
26  rose: "var(--aurora-accent-pink)",
27  orange: "var(--axon-orange)",
28  neutral: "var(--aurora-text-muted)",
29}
30 
31// Styles: registry/aurora/styles/aurora-components.css (@layer aurora-components).
32 
33export interface PanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
34  /** Tone-colored uppercase label above the title. */
35  eyebrow?: React.ReactNode
36  /** Panel title. */
37  title?: React.ReactNode
38  /** Accent family for the eyebrow + icon tile. Defaults to cyan. No violet. */
39  tone?: PanelTone
40  /** Lucide icon component or trusted SVG element. */
41  icon?: PanelIcon
42  /** Trailing-edge actions slot (buttons rendered with `.aurora-ael__btn`). */
43  actions?: React.ReactNode
44  /** Optional footer text, separated by a hair rule. */
45  footer?: React.ReactNode
46}
47 
48const Panel = ({ ref, eyebrow, title, tone = "cyan", icon, actions, footer, className, children, style, ...props }: PanelProps & { ref?: React.Ref<HTMLDivElement> }) => {
49    const hasHeader = Boolean(eyebrow || title || icon || actions)
50 
51    return (
52      <aside
53        ref={ref}
54        className={cn("aurora-ael", className)}
55        style={{ ["--aurora-ael-tone" as string]: toneColor[tone], ...style }}
56        {...props}
57      >
58        {hasHeader ? (
59          <div className="aurora-ael__head">
60            {icon ? (
61// … truncated