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

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

@@ -0,0 +1,101 @@
+'use client'
+
+// packages/ui/src/components/ds/DoubleBezelCard.tsx
+// High-End Agency / Awwwards-Tier Double-Bezel (Doppelrand) Enclosure Component
+// Outer Shell: Precision machined tray with outer radius & ambient hairline
+// Inner Core: Floating glass plate with concentric inner radius, specular highlight & blur
+
+import React from 'react'
+import { Box, type BoxProps } from '@mui/material'
+import { d3roPalette, d3roShadow, d3roRadius } from '../../theme'
+
+export interface DoubleBezelCardProps extends Omit<BoxProps, 'component'> {
+  /** Outer padding between tray and core (default: 6px) */
+  bezelPadding?: number | string
+  /** Whether the card shows an interactive lift / glow on hover */
+  interactive?: boolean
+  /** Inner core padding (default: 3 / 24px) */
+  innerPadding?: number | string
+  /** Content to render inside the inner core */
+  children?: React.ReactNode
+}
+
+export function DoubleBezelCard({
+  bezelPadding = '6px',
+  interactive = false,
+  innerPadding = 3,
+  children,
+  sx,
+  ...boxProps
+}: DoubleBezelCardProps): React.ReactElement {
+  return (
+    <Box
+      {...boxProps}
+      sx={{
+        position: 'relative',
+        borderRadius: d3roRadius.doubleBezelOuter,
+        p: bezelPadding,
+        bgcolor: d3roPalette.glass.raised,
+        border: `1px solid ${d3roPalette.glass.hairline}`,
+        boxShadow: interactive ? d3roShadow.card : 'none',
+        transition: 'transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease',
+        ...(interactive
+          ? {
+              cursor: 'pointer',
+              '&:hover': {
+                borderColor: d3roPalette.glass.hairlineStrong,
+                boxShadow: d3roShadow.glowCardHover,
+                transform: 'translateY(-2px)',
+                '& .d3-inner-core': {
+                  bgcolor: d3roPalette.bg.cardHover,
+                },
+              },
+              '&:active': {
+                transform: 'translateY(0px) scale(0.99)',
+              },
+            }
+          : {}),
+        ...sx,
+      }}
+    >
+      {/* Inner Core Container */}
+      <Box
+        className="d3-inner-core"
+        sx={{
+          position: 'relative',
+          borderRadius: d3roRadius.doubleBezelInner,
+          bgcolor: d3roPalette.glass.surface,
+          backdropFilter: `blur(${d3roPalette.glass.blur})`,
+          boxShadow: `${d3roShadow.inset}, ${d3roShadow.glowCard}`,
+          p: innerPadding,
+          overflow: 'hidden',
+          transition: 'background-color 0.25s ease',
+          // Top Sheen + Specular highlight
+          '&::before': {
+            content: '""',
+            position: 'absolute',
+            inset: 0,
+            borderRadius: 'inherit',
+            background: d3roPalette.glass.sheen,
+            pointerEvents: 'none',
+          },
+          // 1px Gradient Hairline Rim
+          '&::after': {
+            content: '""',
+            position: 'absolute',
+            inset: 0,
+            borderRadius: 'inherit',
+            padding: '1px',
+            background: d3roPalette.glass.borderGradient,
+            WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
+            WebkitMaskComposite: 'xor',
+            maskComposite: 'exclude',
+            pointerEvents: 'none',
+          },
+        }}
+      >
+        <Box sx={{ position: 'relative', zIndex: 1 }}>{children}</Box>
+      </Box>
+    </Box>
+  )
+}