@countermeasure-platform/web-components 1.2.0 → 1.2.1-dev.6.1

package/src/react/layout/sub-nav.tsx

@@ -0,0 +1,72 @@
+'use client'
+
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react'
+import { cn } from '../primitives/utils'
+
+export interface SubNavItem {
+  id: string
+  label: string
+  href?: string
+  icon?: ReactNode
+  active?: boolean
+}
+
+export interface SubNavProps extends Omit<HTMLAttributes<HTMLElement>, 'onSelect'> {
+  items: SubNavItem[]
+  onSelect?: (id: string) => void
+}
+
+const SubNav = forwardRef<HTMLElement, SubNavProps>(
+  ({ items, onSelect, className, ...props }, ref) => (
+    <nav
+      ref={ref}
+      className={cn('flex gap-1 overflow-x-auto pb-1', className)}
+      aria-label="Section navigation"
+      role="tablist"
+      {...props}
+    >
+      {items.map(item => {
+        const itemClassName = cn(
+          'inline-flex shrink-0 items-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs font-semibold transition-colors',
+          item.active
+            ? 'border-primary/25 bg-primary/15 text-[hsl(var(--primary))]'
+            : 'border-transparent text-foreground-tertiary hover:bg-foreground/[0.05] hover:text-foreground-secondary'
+        )
+        const content = (
+          <>
+            {item.icon}
+            {item.label}
+          </>
+        )
+        if (item.href) {
+          return (
+            <a
+              key={item.id}
+              href={item.href}
+              role="tab"
+              aria-selected={item.active}
+              onClick={() => onSelect?.(item.id)}
+              className={itemClassName}
+            >
+              {content}
+            </a>
+          )
+        }
+        return (
+          <button
+            key={item.id}
+            type="button"
+            role="tab"
+            aria-selected={item.active}
+            onClick={() => onSelect?.(item.id)}
+            className={itemClassName}
+          >
+            {content}
+          </button>
+        )
+      })}
+    </nav>
+  )
+)
+SubNav.displayName = 'SubNav'
+export { SubNav }

package/src/react/primitives/chart-frame.tsx

@@ -0,0 +1,51 @@
+'use client'
+
+import { useCallback, useEffect, useRef, useState, type ReactNode, type HTMLAttributes } from 'react'
+import { cn } from './utils'
+
+export interface ChartFrameProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+  children: (size: { width: number; height: number }) => ReactNode
+  minHeight?: number
+}
+
+function ChartFrame({ children, minHeight = 200, className, style, ...props }: ChartFrameProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [size, setSize] = useState<{ width: number; height: number } | null>(null)
+
+  const measure = useCallback(() => {
+    if (!containerRef.current) return
+    const { width, height } = containerRef.current.getBoundingClientRect()
+    const w = Math.floor(width)
+    const h = Math.floor(height)
+    setSize(prev => {
+      if (prev && prev.width === w && prev.height === h) return prev
+      return { width: w, height: h }
+    })
+  }, [])
+
+  useEffect(() => {
+    const el = containerRef.current
+    if (!el) return
+    measure()
+    if (typeof globalThis.ResizeObserver !== 'function') {
+      window.addEventListener('resize', measure)
+      return () => window.removeEventListener('resize', measure)
+    }
+    const observer = new globalThis.ResizeObserver(measure)
+    observer.observe(el)
+    return () => observer.disconnect()
+  }, [measure])
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn('w-full', className)}
+      style={{ minHeight, ...style }}
+      {...props}
+    >
+      {size ? children(size) : null}
+    </div>
+  )
+}
+ChartFrame.displayName = 'ChartFrame'
+export { ChartFrame }

package/src/react/primitives/chat-drawer.tsx

@@ -0,0 +1,94 @@
+'use client'
+
+import {
+  forwardRef,
+  useRef,
+  useEffect,
+  type HTMLAttributes,
+  type ReactNode,
+} from 'react'
+import { cn } from './utils'
+
+export interface ChatDrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  open: boolean
+  onClose: () => void
+  title: string
+  icon?: ReactNode
+  messages: ReactNode
+  input: ReactNode
+  width?: string
+}
+
+const ChatDrawer = forwardRef<HTMLDivElement, ChatDrawerProps>(
+  ({ open, onClose, title, icon, messages, input, width = '500px', className, ...props }, ref) => {
+    const scrollRef = useRef<HTMLDivElement>(null)
+
+    useEffect(() => {
+      if (open && scrollRef.current) {
+        scrollRef.current.scrollTop = scrollRef.current.scrollHeight
+      }
+    }, [open, messages])
+
+    useEffect(() => {
+      if (!open) return
+      const handleEsc = (e: KeyboardEvent) => {
+        if (e.key === 'Escape') onClose()
+      }
+      document.addEventListener('keydown', handleEsc)
+      return () => document.removeEventListener('keydown', handleEsc)
+    }, [open, onClose])
+
+    return (
+      <>
+        {open && (
+          <div
+            className="fixed inset-0 z-40 bg-black/40 backdrop-blur-sm"
+            onClick={onClose}
+            aria-hidden="true"
+          />
+        )}
+        {open && (
+          <div
+            ref={ref}
+            role="dialog"
+            aria-modal={true}
+            aria-label={title}
+            className={cn(
+              'fixed inset-y-0 right-0 z-50 flex flex-col border-l border-border-glass bg-background shadow-xl',
+              className
+            )}
+            style={{ width }}
+            {...props}
+          >
+            <div className="flex shrink-0 items-center gap-3 border-b border-border-glass px-4 py-3">
+              {icon && (
+                <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/15 text-[hsl(var(--primary))] [&>svg]:size-4">
+                  {icon}
+                </div>
+              )}
+              <h2 className="flex-1 text-sm font-semibold text-foreground">{title}</h2>
+              <button
+                type="button"
+                onClick={onClose}
+                className="flex h-8 w-8 items-center justify-center rounded-lg text-foreground-tertiary transition-colors hover:bg-foreground/[0.06] hover:text-foreground"
+                aria-label="Close"
+              >
+                <svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                  <path d="M18 6L6 18M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+            <div ref={scrollRef} className="flex-1 overflow-y-auto px-4 py-4">
+              {messages}
+            </div>
+            <div className="shrink-0 border-t border-border-glass px-4 py-3">
+              {input}
+            </div>
+          </div>
+        )}
+      </>
+    )
+  }
+)
+ChatDrawer.displayName = 'ChatDrawer'
+export { ChatDrawer }

package/src/react/primitives/chat-input.tsx

@@ -0,0 +1,134 @@
+'use client'
+
+import {
+  forwardRef,
+  useCallback,
+  useRef,
+  type FormEvent,
+  type InputEvent,
+  type KeyboardEvent,
+  type TextareaHTMLAttributes,
+} from 'react'
+import { cn } from './utils'
+
+export interface ChatInputProps
+  extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onSubmit'> {
+  onSubmit?: (value: string) => void
+  loading?: boolean
+  submitLabel?: string
+  formClassName?: string
+}
+
+const ChatInput = forwardRef<HTMLTextAreaElement, ChatInputProps>(
+  (
+    {
+      onSubmit,
+      loading = false,
+      submitLabel = 'Send',
+      className,
+      formClassName,
+      onInput,
+      onKeyDown,
+      disabled,
+      ...props
+    },
+    ref
+  ) => {
+    const internalRef = useRef<HTMLTextAreaElement | null>(null)
+    const effectiveDisabled = loading || disabled === true
+
+    const resize = useCallback(() => {
+      const el = internalRef.current
+      if (!el) return
+      el.style.height = 'auto'
+      el.style.height = `${Math.min(el.scrollHeight, 200)}px`
+    }, [])
+
+    const handleKeyDown = useCallback(
+      (e: KeyboardEvent<HTMLTextAreaElement>) => {
+        onKeyDown?.(e)
+        if (e.defaultPrevented) return
+        if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) {
+          e.preventDefault()
+          const value = internalRef.current?.value.trim()
+          if (value && onSubmit && !effectiveDisabled) {
+            onSubmit(value)
+            if (internalRef.current) {
+              internalRef.current.value = ''
+              resize()
+            }
+          }
+        }
+      },
+      [onKeyDown, onSubmit, effectiveDisabled, resize]
+    )
+
+    const handleInput = useCallback(
+      (e: InputEvent<HTMLTextAreaElement>) => {
+        onInput?.(e)
+        resize()
+      },
+      [onInput, resize]
+    )
+
+    const handleSubmit = useCallback(
+      (e: FormEvent) => {
+        e.preventDefault()
+        const value = internalRef.current?.value.trim()
+        if (value && onSubmit && !effectiveDisabled) {
+          onSubmit(value)
+          if (internalRef.current) {
+            internalRef.current.value = ''
+            resize()
+          }
+        }
+      },
+      [onSubmit, effectiveDisabled, resize]
+    )
+
+    const setRef = useCallback(
+      (el: HTMLTextAreaElement | null) => {
+        internalRef.current = el
+        if (typeof ref === 'function') ref(el)
+        else if (ref) ref.current = el
+      },
+      [ref]
+    )
+
+    return (
+      <form onSubmit={handleSubmit} className={cn('flex items-end gap-2', formClassName)}>
+        <textarea
+          ref={setRef}
+          rows={1}
+          placeholder="Type a message..."
+          {...props}
+          onInput={handleInput}
+          onKeyDown={handleKeyDown}
+          disabled={effectiveDisabled}
+          className={cn(
+            'flex-1 resize-none rounded-lg border border-border-glass bg-glass px-3 py-2 text-sm text-foreground placeholder:text-foreground-tertiary focus:outline-none focus:ring-2 focus:ring-primary/50 disabled:opacity-50',
+            className
+          )}
+        />
+        <button
+          type="submit"
+          disabled={effectiveDisabled}
+          aria-label={submitLabel}
+          className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground transition-opacity hover:opacity-90 disabled:opacity-40"
+        >
+          {loading ? (
+            <svg className="h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+              <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="3" strokeDasharray="31.42 31.42" strokeLinecap="round" />
+            </svg>
+          ) : (
+            <svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+              <path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" />
+            </svg>
+          )}
+        </button>
+      </form>
+    )
+  }
+)
+ChatInput.displayName = 'ChatInput'
+export { ChatInput }

package/src/react/primitives/dashboard-metric-card.tsx

@@ -0,0 +1,78 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react'
+import { cva } from 'class-variance-authority'
+import { cn } from './utils'
+
+const iconVariants = cva(
+  'flex items-center justify-center rounded-lg shrink-0',
+  {
+    variants: {
+      tone: {
+        amber: 'bg-amber-10 text-[var(--color-amber-text)]',
+        cyan: 'bg-cyan-10 text-[var(--color-cyan-text)]',
+        emerald: 'bg-emerald-10 text-[var(--color-emerald-text)]',
+        violet: 'bg-violet-10 text-[var(--color-violet-text)]',
+        rose: 'bg-rose-10 text-[var(--color-rose-text)]',
+        orange: 'bg-primary/15 text-[var(--color-primary-text)]',
+        glass: 'bg-foreground/[0.08] text-foreground-secondary',
+      },
+      size: {
+        sm: 'h-8 w-8 [&>svg]:size-4',
+        md: 'h-9 w-9 [&>svg]:size-5',
+        lg: 'h-10 w-10 [&>svg]:size-5',
+      },
+    },
+    defaultVariants: { tone: 'glass', size: 'md' },
+  }
+)
+
+export type MetricCardTone =
+  | 'amber'
+  | 'cyan'
+  | 'emerald'
+  | 'violet'
+  | 'rose'
+  | 'orange'
+  | 'glass'
+
+export interface DashboardMetricCardProps extends HTMLAttributes<HTMLDivElement> {
+  icon?: ReactNode
+  label: string
+  value: string | number
+  detail?: string
+  trend?: ReactNode
+  tone?: MetricCardTone
+  iconSize?: 'sm' | 'md' | 'lg'
+}
+
+const DashboardMetricCard = forwardRef<HTMLDivElement, DashboardMetricCardProps>(
+  (
+    { icon, label, value, detail, trend, tone = 'glass', iconSize = 'md', className, ...props },
+    ref
+  ) => (
+    <div
+      ref={ref}
+      className={cn(
+        'flex flex-col gap-3 rounded-xl border border-border-glass bg-glass p-4',
+        className
+      )}
+      {...props}
+    >
+      <div className="flex items-start justify-between">
+        <p className="text-foreground-tertiary text-[10px] font-semibold tracking-wider uppercase">
+          {label}
+        </p>
+        {icon && <div className={iconVariants({ tone, size: iconSize })}>{icon}</div>}
+      </div>
+      <p className="text-foreground text-2xl font-bold tabular-nums">{value}</p>
+      {(detail || trend) && (
+        <div className="flex items-center gap-2">
+          {detail && <span className="text-foreground-secondary text-sm">{detail}</span>}
+          {trend && <span className="text-xs font-semibold">{trend}</span>}
+        </div>
+      )}
+    </div>
+  )
+)
+DashboardMetricCard.displayName = 'DashboardMetricCard'
+
+export { DashboardMetricCard, iconVariants as metricIconVariants }

package/src/react/primitives/data-field.tsx

@@ -0,0 +1,54 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react'
+import { cn } from './utils'
+
+export interface DataFieldProps extends HTMLAttributes<HTMLDivElement> {
+  label: string
+  children: ReactNode
+}
+
+const DataField = forwardRef<HTMLDivElement, DataFieldProps>(
+  ({ label, className, children, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        'rounded-lg border border-border-glass bg-glass px-3 py-2',
+        className
+      )}
+      {...props}
+    >
+      <p className="text-foreground-tertiary text-[11px] font-semibold tracking-wide uppercase">
+        {label}
+      </p>
+      <div className="mt-1 min-w-0 break-words text-sm text-foreground-secondary">
+        {children}
+      </div>
+    </div>
+  )
+)
+DataField.displayName = 'DataField'
+
+export interface MetadataGridProps extends HTMLAttributes<HTMLDivElement> {
+  columns?: 2 | 3 | 4
+  children: ReactNode
+}
+
+const MetadataGrid = forwardRef<HTMLDivElement, MetadataGridProps>(
+  ({ columns = 3, className, children, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        'grid gap-3',
+        columns === 2 && 'md:grid-cols-2',
+        columns === 3 && 'md:grid-cols-2 xl:grid-cols-3',
+        columns === 4 && 'md:grid-cols-2 xl:grid-cols-4',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+)
+MetadataGrid.displayName = 'MetadataGrid'
+
+export { DataField, MetadataGrid }

package/src/react/primitives/index.ts

@@ -94,6 +94,8 @@ export { RippleContainer, useRipple } from './ripple'
 
 // ── Primitives ──
 export { Field, type FieldProps } from './field'
+export { DataField, MetadataGrid, type DataFieldProps, type MetadataGridProps } from './data-field'
+export { SectionPanel, type SectionPanelProps } from './section-panel'
 export { Kbd, type KbdProps } from './kbd'
 export { RadioGroup, RadioGroupItem } from './radio-group'
 export { ScrollArea, ScrollBar } from './scroll-area'
@@ -121,6 +123,13 @@ export { EmptyState } from './empty-state'
 export { HoverCard, HoverCardTrigger, HoverCardContent } from './hover-card'
 export { MarkdownViewer } from './markdown-viewer'
 export { MetricTile, type MetricTileProps } from './metric-tile'
+export { ScoreRing, type ScoreRingProps } from './score-ring'
+export {
+  DashboardMetricCard,
+  metricIconVariants,
+  type DashboardMetricCardProps,
+  type MetricCardTone,
+} from './dashboard-metric-card'
 export { NotificationCenter, NotificationCenterItem } from './notification-center'
 export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverClose } from './popover'
 export { Progress, CircularProgress } from './progress'
@@ -142,6 +151,8 @@ export {
 } from './uptime-bar'
 
 // ── Components ──
+export { ChatDrawer, type ChatDrawerProps } from './chat-drawer'
+export { ChatInput, type ChatInputProps } from './chat-input'
 export {
   ContextMenu,
   ContextMenuTrigger,
@@ -266,6 +277,7 @@ export { DirectionProvider, useDirection, DirectionContext } from './direction'
 export { TagInput, type TagSuggestion } from './tag-input'
 
 // ── Charts ──
+export { ChartFrame, type ChartFrameProps } from './chart-frame'
 export { AreaChart, type AreaChartProps } from './chart-area'
 export { BarChart, type BarChartProps } from './chart-bar'
 export { CandlestickChart, type CandlestickChartProps } from './chart-candlestick'
@@ -283,6 +295,7 @@ export { WaterfallChart, type WaterfallChartProps } from './chart-waterfall'
 
 // ── Error Handling ──
 export { ErrorBoundary, type ErrorBoundaryProps } from './error-boundary'
+export { QueryBoundary, type QueryBoundaryProps } from './query-boundary'
 
 // ── Visualization ──
 export { FileTree, type FileTreeNode } from './file-tree'

package/src/react/primitives/notification-center.tsx

@@ -74,14 +74,14 @@ function NotificationCenter({
       role="region"
       aria-label="Notification center"
       className={cn(
-        'flex flex-col rounded-xl border border-border-glass bg-glass backdrop-blur-[20px]',
+        'flex flex-col rounded-xl border border-border bg-card shadow-xl',
         'w-full max-w-sm overflow-hidden',
         className
       )}
       {...props}
     >
       {/* Header */}
-      <div className="flex items-center justify-between border-b border-border-glass px-4 py-3">
+      <div className="flex items-center justify-between border-b border-border px-4 py-3">
         <div className="flex items-center gap-2">
           <span className="text-sm font-semibold text-foreground">Notifications</span>
           {unreadCount > 0 && (
@@ -153,7 +153,7 @@ function NotificationCenterItem({ item, onMarkRead, onDismiss }: NotificationCen
         if (item.read !== true) onMarkRead?.(item.id)
       }}
       className={cn(
-        'group flex gap-3 border-b border-border-glass px-4 py-3 transition-colors last:border-b-0',
+        'group flex gap-3 border-b border-border px-4 py-3 transition-colors last:border-b-0',
         item.read !== true && 'bg-primary/5 cursor-pointer',
         item.read === true && 'opacity-70'
       )}

package/src/react/primitives/query-boundary.tsx

@@ -0,0 +1,71 @@
+'use client'
+
+import { type ReactNode } from 'react'
+import { cn } from './utils'
+
+export interface QueryBoundaryProps {
+  isLoading?: boolean
+  isError?: boolean
+  error?: Error | string | null
+  isEmpty?: boolean
+  loadingMessage?: string
+  errorMessage?: string
+  emptyMessage?: string
+  emptyIcon?: ReactNode
+  className?: string
+  children: ReactNode
+}
+
+function Spinner() {
+  return (
+    <svg className="h-5 w-5 animate-spin text-foreground-tertiary" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+      <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="3" strokeDasharray="31.42 31.42" strokeLinecap="round" />
+    </svg>
+  )
+}
+
+export function QueryBoundary({
+  isLoading,
+  isError,
+  error,
+  isEmpty,
+  loadingMessage = 'Loading...',
+  errorMessage,
+  emptyMessage = 'No data available',
+  emptyIcon,
+  className,
+  children,
+}: QueryBoundaryProps) {
+  if (isLoading) {
+    return (
+      <div className={cn('flex min-h-[220px] flex-col items-center justify-center gap-3 text-foreground-tertiary', className)}>
+        <Spinner />
+        <p className="text-sm">{loadingMessage}</p>
+      </div>
+    )
+  }
+
+  if (isError) {
+    const msg = errorMessage ?? (error instanceof Error ? error.message : String(error ?? 'An error occurred'))
+    return (
+      <div
+        role="alert"
+        aria-live="polite"
+        className={cn('rounded-lg border border-accent-rose/25 bg-accent-rose/5 px-4 py-3 text-sm text-accent-rose', className)}
+      >
+        {msg}
+      </div>
+    )
+  }
+
+  if (isEmpty) {
+    return (
+      <div className={cn('flex min-h-[220px] flex-col items-center justify-center gap-2 text-foreground-tertiary', className)}>
+        {emptyIcon && <div className="text-foreground-muted [&>svg]:size-10">{emptyIcon}</div>}
+        <p className="text-sm">{emptyMessage}</p>
+      </div>
+    )
+  }
+
+  return <>{children}</>
+}