feat(web): refresh simulator dashboard UI

WebApp/src/lib/components/ui/alert/alert.svelte

@@ -7,6 +7,7 @@
 			variant: {
 				default: "bg-card text-card-foreground",
 				destructive: "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+				glass: "bg-glass-background border-glass-border backdrop-blur-xl shadow-lg",
 			},
 		},
 		defaultVariants: {

WebApp/src/lib/components/ui/button/button.svelte

@@ -13,6 +13,7 @@
 				ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
 				destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
 				link: "text-primary underline-offset-4 hover:underline",
+				premium: "bg-premium text-premium-foreground shadow-lg shadow-premium/20 transition-all hover:-translate-y-0.5 hover:shadow-xl hover:shadow-premium/30 active:translate-y-0",
 			},
 			size: {
 				default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",

WebApp/src/lib/components/ui/card/card.svelte

@@ -1,21 +1,51 @@
-<script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
+<script lang="ts" module>
 	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { type VariantProps, tv } from "tailwind-variants";
 
+	export const cardVariants = tv({
+		base: "bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col",
+		variants: {
+			variant: {
+				default: "bg-card text-card-foreground",
+				glass: "bg-glass-background border-glass-border border ring-0 backdrop-blur-xl shadow-2xl",
+			},
+			size: {
+				default: "gap-4 py-4 data-[size=sm]:gap-3 data-[size=sm]:py-3",
+				sm: "gap-3 py-3",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	});
+
+	export type CardVariant = VariantProps<typeof cardVariants>["variant"];
+	export type CardSize = VariantProps<typeof cardVariants>["size"];
+
+	export type CardProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		variant?: CardVariant;
+		size?: CardSize;
+	};
+</script>
+
+<script lang="ts">
 	let {
 		ref = $bindable(null),
 		class: className,
 		children,
+		variant = "default",
 		size = "default",
 		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & { size?: "default" | "sm" } = $props();
+	}: CardProps = $props();
 </script>
 
 <div
 	bind:this={ref}
 	data-slot="card"
 	data-size={size}
-	class={cn("ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col", className)}
+	class={cn(cardVariants({ variant, size }), className)}
 	{...restProps}
 >
 	{@render children?.()}

WebApp/src/lib/components/ui/dialog/dialog-content.svelte

@@ -14,12 +14,19 @@
 		portalProps,
 		children,
 		showCloseButton = true,
+		variant = "default",
 		...restProps
 	}: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
 		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DialogPortal>>;
 		children: Snippet;
 		showCloseButton?: boolean;
+		variant?: "default" | "glass";
 	} = $props();
+
+	const variantClasses = {
+		default: "bg-popover text-popover-foreground ring-1 ring-foreground/10",
+		glass: "bg-glass-background border-glass-border border backdrop-blur-xl shadow-2xl text-foreground"
+	};
 </script>
 
 <DialogPortal {...portalProps}>
@@ -28,7 +35,8 @@
 		bind:ref
 		data-slot="dialog-content"
 		class={cn(
-			"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-sm ring-1 duration-100 sm:max-w-sm fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none",
+			"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-sm duration-100 sm:max-w-sm fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none",
+			variantClasses[variant],
 			className
 		)}
 		{...restProps}

WebApp/src/lib/components/ui/skeleton/index.ts

@@ -0,0 +1,7 @@
+import Root from "./skeleton.svelte";
+
+export {
+	Root,
+	//
+	Root as Skeleton,
+};

WebApp/src/lib/components/ui/skeleton/skeleton.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	class={cn("bg-muted animate-pulse rounded-md", className)}
+	{...restProps}
+></div>

WebApp/src/lib/components/ui/switch/index.ts

@@ -0,0 +1,7 @@
+import Root from "./switch.svelte";
+
+export {
+	Root,
+	//
+	Root as Switch,
+};

WebApp/src/lib/components/ui/switch/switch.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Switch as SwitchPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		class: className,
+		checked = $bindable(false),
+		...restProps
+	}: SwitchPrimitive.RootProps = $props();
+</script>
+
+<SwitchPrimitive.Root
+	bind:checked
+	class={cn(
+		"focus-visible:ring-ring focus-visible:ring-offset-background inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+		className
+	)}
+	{...restProps}
+>
+	<SwitchPrimitive.Thumb
+		class={cn(
+			"pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+		)}
+	/>
+</SwitchPrimitive.Root>