Initial SFERA platform baseline

frontend/sfera-web/src/components/ui/badge.tsx

@@ -0,0 +1,34 @@
+import type React from "react";
+import { cn } from "@/lib/utils";
+
+type BadgeTone = "neutral" | "success" | "warning" | "danger" | "info";
+
+const tones: Record<BadgeTone, string> = {
+  neutral: "border-border bg-muted text-muted-foreground",
+  success: "border-success/25 bg-success/10 text-success",
+  warning: "border-warning/30 bg-warning/10 text-warning",
+  danger: "border-destructive/25 bg-destructive/10 text-destructive",
+  info: "border-info/25 bg-info/10 text-info"
+};
+
+export function Badge({
+  children,
+  tone = "neutral",
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement> & {
+  tone?: BadgeTone;
+}) {
+  return (
+    <span
+      className={cn(
+        "inline-flex h-6 items-center rounded-full border px-2.5 text-xs font-medium leading-none",
+        tones[tone],
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </span>
+  );
+}

frontend/sfera-web/src/components/ui/button.tsx

@@ -0,0 +1,30 @@
+import type React from "react";
+import { cn } from "@/lib/utils";
+
+type ButtonVariant = "primary" | "secondary" | "ghost";
+
+const variants: Record<ButtonVariant, string> = {
+  primary: "bg-primary text-primary-foreground hover:bg-primary/90",
+  secondary: "border border-border bg-card text-foreground hover:bg-muted",
+  ghost: "text-muted-foreground hover:bg-muted hover:text-foreground"
+};
+
+export function Button({
+  children,
+  className,
+  variant = "secondary",
+  ...props
+}: React.ButtonHTMLAttributes<HTMLButtonElement> & { variant?: ButtonVariant }) {
+  return (
+    <button
+      className={cn(
+        "inline-flex h-9 items-center justify-center gap-2 rounded-lg px-3 text-sm font-medium transition disabled:pointer-events-none disabled:opacity-50",
+        variants[variant],
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}

frontend/sfera-web/src/components/ui/card.tsx

@@ -0,0 +1,14 @@
+import type React from "react";
+import { cn } from "@/lib/utils";
+
+export function Card({
+  children,
+  className,
+  ...props
+}: Readonly<React.HTMLAttributes<HTMLElement>>) {
+  return (
+    <section className={cn("rounded-2xl border border-border bg-card p-4 shadow-soft", className)} {...props}>
+      {children}
+    </section>
+  );
+}