feat: complete release preparation, 10+ ad mediation, CI/CD, and docker deployment

packages/ui/src/components/ds/TactileBadge.tsx

@@ -0,0 +1,113 @@
+'use client'
+
+// packages/ui/src/components/ds/TactileBadge.tsx
+// Hardware-grade telemetry badge / pill chip with optional LED bead and keycap rendering
+
+import React from 'react'
+import { Box, type BoxProps } from '@mui/material'
+import { Led } from './Led'
+import { d3roPalette, d3roFontSans, d3roFontMono, d3roRadius, typoSx } from '../../theme'
+
+export interface TactileBadgeProps extends Omit<BoxProps, 'component'> {
+  /** Optional LED indicator color */
+  ledColor?: 'green' | 'amber' | 'red' | 'blue' | 'orange' | 'purple' | 'off'
+  /** Whether the LED should pulse */
+  ledPulse?: boolean
+  /** Semantic tone for border and background */
+  tone?: 'default' | 'accent' | 'success' | 'warning' | 'error' | 'mono'
+  /** Whether to use monospace font */
+  mono?: boolean
+  /** Interactive clickable chip */
+  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void
+  /** Content to display */
+  children?: React.ReactNode
+}
+
+export function TactileBadge({
+  ledColor,
+  ledPulse = false,
+  tone = 'default',
+  mono = false,
+  onClick,
+  children,
+  sx,
+  ...boxProps
+}: TactileBadgeProps): React.ReactElement {
+  const isClickable = Boolean(onClick)
+
+  let textColor: string = d3roPalette.text.secondary
+  let borderColor: string = d3roPalette.glass.hairlineStrong
+  let bgColor: string = d3roPalette.glass.raised
+
+  switch (tone) {
+    case 'accent':
+      textColor = d3roPalette.accent.light
+      borderColor = d3roPalette.accent.dim
+      bgColor = d3roPalette.accent.dim
+      break
+    case 'success':
+      textColor = d3roPalette.tag.green
+      borderColor = d3roPalette.tag.greenBg
+      bgColor = d3roPalette.tag.greenBg
+      break
+    case 'warning':
+      textColor = d3roPalette.tag.orange
+      borderColor = d3roPalette.tag.orangeBg
+      bgColor = d3roPalette.tag.orangeBg
+      break
+    case 'error':
+      textColor = d3roPalette.tag.red
+      borderColor = d3roPalette.tag.redBg
+      bgColor = d3roPalette.tag.redBg
+      break
+    case 'mono':
+      textColor = d3roPalette.text.primary
+      borderColor = d3roPalette.border.default
+      bgColor = d3roPalette.bg.inset
+      break
+  }
+
+  return (
+    <Box
+      {...boxProps}
+      onClick={onClick}
+      sx={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 0.85,
+        px: 1.25,
+        py: 0.45,
+        borderRadius: d3roRadius.badge,
+        border: `1px solid ${borderColor}`,
+        bgcolor: bgColor,
+        color: textColor,
+        ...typoSx('meta'),
+        fontFamily: mono ? d3roFontMono : d3roFontSans,
+        fontSize: '11px',
+        fontWeight: 600,
+        letterSpacing: '0.04em',
+        textTransform: 'none',
+        whiteSpace: 'nowrap',
+        cursor: isClickable ? 'pointer' : 'default',
+        transition: 'all 0.15s cubic-bezier(0.16, 1, 0.3, 1)',
+        ...(isClickable
+          ? {
+              '&:hover': {
+                borderColor: d3roPalette.accent.main,
+                color: d3roPalette.text.primary,
+                filter: 'brightness(1.15)',
+                transform: 'translateY(-1px)',
+              },
+              '&:active': {
+                transform: 'translateY(0) scale(0.97)',
+              },
+            }
+          : {}),
+        ...sx,
+      }}
+    >
+      {ledColor && <Led color={ledColor} pulse={ledPulse} size={6} />}
+      {children}
+    </Box>
+  )
+}