feat: add glass component system -- GlassCard, GlassPanel, GlassDivider

services/frontend/src/components/glass/card.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import type { ComponentPropsWithoutRef } from "react";
+
+type GlassVariant = "base" | "elevated" | "interactive" | "danger";
+
+interface GlassCardProps extends ComponentPropsWithoutRef<"div"> {
+  variant?: GlassVariant;
+}
+
+const variantStyles: Record<GlassVariant, string> = {
+  base: "glass rounded-[var(--radius-card)]",
+  elevated:
+    "glass-elevated rounded-[var(--radius-card)]",
+  interactive:
+    "glass rounded-[var(--radius-card)] transition-all duration-150 hover:scale-[1.01] hover:border-[var(--color-border-glow)] cursor-pointer",
+  danger:
+    "glass rounded-[var(--radius-card)] border-red-500/30",
+};
+
+export function GlassCard({
+  variant = "base",
+  className,
+  children,
+  ...props
+}: GlassCardProps) {
+  return (
+    <div
+      className={cn(variantStyles[variant], "p-5", className)}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}

services/frontend/src/components/glass/divider.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+
+export function GlassDivider({ className }: { className?: string }) {
+  return (
+    <div className={cn("h-px bg-gradient-to-r from-transparent via-oklch(1 0 0 / 0.08) to-transparent", className)} />
+  );
+}

services/frontend/src/components/glass/index.ts

@@ -0,0 +1,3 @@
+export { GlassCard } from "./card";
+export { GlassPanel } from "./panel";
+export { GlassDivider } from "./divider";

services/frontend/src/components/glass/panel.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import type { ComponentPropsWithoutRef } from "react";
+
+interface GlassPanelProps extends ComponentPropsWithoutRef<"div"> {
+  dense?: boolean;
+}
+
+export function GlassPanel({
+  dense = false,
+  className,
+  children,
+  ...props
+}: GlassPanelProps) {
+  return (
+    <div
+      className={cn(
+        "glass rounded-[var(--radius-panel)]",
+        dense ? "p-3" : "p-4",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}