{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "aurora-ai-panel",
  "title": "Aurora AI Panel",
  "author": "jmagar <https://github.com/jmagar>",
  "description": "Aurora-native AI panel with tone icon, title, actions, body, and footer slots.",
  "dependencies": [
    "lucide-react@^0.487.0"
  ],
  "registryDependencies": [
    "@aurora/aurora-tokens",
    "@aurora/aurora-ai-elements",
    "@aurora/aurora-components"
  ],
  "files": [
    {
      "path": "registry/aurora/blocks/ai/elements/panel.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport type { LucideIcon } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\n\n// ---------------------------------------------------------------------------\n// Panel — generic AI-element card.\n//\n// Raised AI-element surface with a recessed strong border and an inset top\n// highlight, a header row with an optional tone-tinted icon tile, a\n// tone-colored uppercase eyebrow above a bold title, an actions slot on the\n// trailing edge, body content, and an optional footer separated by a hairline\n// rule. Tones map onto Aurora accents: cyan, rose, orange, and neutral.\n//\n// Architecture: standalone component + memo, superset of the original\n// `title` + children API (both still render). The optional `icon` accepts a\n// Lucide icon component or trusted React SVG element.\n// ---------------------------------------------------------------------------\n\ntype PanelTone = \"cyan\" | \"rose\" | \"orange\" | \"neutral\"\ntype PanelIcon = LucideIcon | React.ReactElement<React.SVGProps<SVGSVGElement>>\n\nconst toneColor: Record<PanelTone, string> = {\n  cyan: \"var(--aurora-accent-primary)\",\n  rose: \"var(--aurora-accent-pink)\",\n  orange: \"var(--axon-orange)\",\n  neutral: \"var(--aurora-text-muted)\",\n}\n\n// Styles: registry/aurora/styles/aurora-components.css (@layer aurora-components).\n\nexport interface PanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** Tone-colored uppercase label above the title. */\n  eyebrow?: React.ReactNode\n  /** Panel title. */\n  title?: React.ReactNode\n  /** Accent family for the eyebrow + icon tile. Defaults to cyan. No violet. */\n  tone?: PanelTone\n  /** Lucide icon component or trusted SVG element. */\n  icon?: PanelIcon\n  /** Trailing-edge actions slot (buttons rendered with `.aurora-ael__btn`). */\n  actions?: React.ReactNode\n  /** Optional footer text, separated by a hair rule. */\n  footer?: React.ReactNode\n}\n\nconst Panel = ({ ref, eyebrow, title, tone = \"cyan\", icon, actions, footer, className, children, style, ...props }: PanelProps & { ref?: React.Ref<HTMLDivElement> }) => {\n    const hasHeader = Boolean(eyebrow || title || icon || actions)\n\n    return (\n      <aside\n        ref={ref}\n        className={cn(\"aurora-ael\", className)}\n        style={{ [\"--aurora-ael-tone\" as string]: toneColor[tone], ...style }}\n        {...props}\n      >\n        {hasHeader ? (\n          <div className=\"aurora-ael__head\">\n            {icon ? (\n              <span className=\"aurora-ael__icon\" aria-hidden=\"true\">\n                {renderPanelIcon(icon)}\n              </span>\n            ) : null}\n\n            {eyebrow || title ? (\n              <div className=\"aurora-ael__titles\">\n                {eyebrow ? <span className=\"aurora-ael__eyebrow\">{eyebrow}</span> : null}\n                {title ? <span className=\"aurora-ael__title\">{title}</span> : null}\n              </div>\n            ) : null}\n\n            {actions ? <div className=\"aurora-ael__actions\">{actions}</div> : null}\n          </div>\n        ) : null}\n\n        {children != null ? <div className=\"aurora-ael__body\">{children}</div> : null}\n\n        {footer ? <div className=\"aurora-ael__foot\">{footer}</div> : null}\n      </aside>\n    )\n  }\n\nPanel.displayName = \"Panel\"\n\nconst MemoPanel = React.memo(Panel)\nMemoPanel.displayName = \"Panel\"\n\nfunction renderPanelIcon(icon: PanelIcon): React.ReactNode {\n  if (React.isValidElement<React.SVGProps<SVGSVGElement>>(icon)) {\n    return React.cloneElement(icon, {\n      width: 18,\n      height: 18,\n      strokeWidth: 1.65,\n      focusable: \"false\",\n      style: { flexShrink: 0, ...icon.props.style },\n    })\n  }\n\n  const Icon = icon\n  return (\n    <Icon\n      width={18}\n      height={18}\n      strokeWidth={1.65}\n      focusable=\"false\"\n      style={{ flexShrink: 0 }}\n    />\n  )\n}\n\nexport { MemoPanel as Panel }\nexport default MemoPanel\n",
      "type": "registry:component",
      "target": "@components/aurora/ai/panel.tsx"
    }
  ],
  "meta": {
    "namespace": "@aurora",
    "style": "aurora",
    "family": "block",
    "requiresTokens": true,
    "sourcePath": "registry/aurora/blocks/ai/elements/panel.tsx",
    "installTarget": "@components/aurora/ai/panel.tsx",
    "taxonomy": "ai"
  },
  "docs": "Aurora block that installs Aurora AI Panel.\n\nInstall `aurora-tokens`, `aurora-ai-elements`, and `aurora-components` first; the shadcn CLI resolves these automatically through the @aurora registry namespace.\n\nDefault install target: `@components/aurora/ai/panel.tsx`.\n\nRegistry dependencies: `aurora-tokens`, `aurora-ai-elements`, `aurora-components`.",
  "categories": [
    "aurora",
    "block",
    "ai"
  ],
  "type": "registry:block"
}