Panel

1import * as React from 'react'
2import { cn } from '@/lib/utils'
3 
4/* ── Panel (outer container) ── */
5export interface PanelProps extends React.HTMLAttributes<HTMLDivElement> {
6  notch?: 'sm' | 'md' | 'lg' | 'none'
7}
8 
9const Panel = React.forwardRef<HTMLDivElement, PanelProps>(
10  ({ className, notch = 'md', style, ...props }, ref) => {
11    const clipMap = {
12      sm:   'var(--clip-corner-sm)',
13      md:   'var(--clip-corner-md)',
14      lg:   'var(--clip-corner-lg)',
15      none: 'none',
16    }
17 
18    return (
19      <div
20        ref={ref}
21        className={cn('rounded-none', className)}
22        style={{
23          background:  'var(--surface)',
24          border:      '1px solid var(--border)',
25          clipPath:    clipMap[notch],
26          overflow:    'hidden',
27          ...style,
28        }}
29        {...props}
30      />
31    )
32  }
33)
34Panel.displayName = 'Panel'
35 
36/* ── PanelHeader ── */
37const PanelHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
38  ({ className, style, ...props }, ref) => (
39    <div
40      ref={ref}
41      className={cn(className)}
42      style={{
43        display:      'flex',
44        alignItems:   'center',
45        padding:      '0.6rem 1rem',
46        borderBottom: '1px solid var(--border)',
47        background:   'var(--surface-raised)',
48        gap:          '0.5rem',
49        ...style,
50      }}
51      {...props}
52    />
53  )
54)
55PanelHeader.displayName = 'PanelHeader'
56 
57/* ── PanelTitle ── */
58const PanelTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
59  ({ className, style, ...props }, ref) => (
60    <h3
61      ref={ref}
62      className={cn(className)}
63      style={{
64        fontSize:      '0.7rem',
65        fontWeight:    600,
66        color:         'var(--text-muted)',
67        letterSpacing: '0.12em',
68        textTransform: 'uppercase',
69        margin:        0,
70        ...style,
71      }}
72      {...props}
73    />
74  )
75)
76PanelTitle.displayName = 'PanelTitle'
77 
78/* ── PanelContent ── */
79const PanelContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
80  ({ className, style, ...props }, ref) => (
81    <div
82      ref={ref}
83      className={cn(className)}
84      style={{ padding: '1rem', ...style }}
85      {...props}
86    />
87  )
88)
89PanelContent.displayName = 'PanelContent'
90 
91/* ── PanelFooter ── */
92const PanelFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
93  ({ className, style, ...props }, ref) => (
94// … truncated