Show on-device HTML UI mocks as firmware card previews.

Prefer media/preview.html over raster covers so catalog cards mirror each LVGL screen.

Co-authored-by: Cursor <cursoragent@cursor.com>

components/ui-preview.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+
+/** Scales an on-device HTML mock (320×240) into the card / detail media slot. */
+export function UiPreview({
+  src,
+  className,
+  title,
+}: {
+  src: string;
+  className?: string;
+  title?: string;
+}) {
+  return (
+    <div className={cn("relative h-full w-full overflow-hidden bg-[#0a0806]", className)}>
+      <iframe
+        src={src}
+        title={title || "Firmware UI preview"}
+        className="pointer-events-none absolute inset-0 h-full w-full border-0"
+        loading="lazy"
+        sandbox="allow-scripts"
+        tabIndex={-1}
+      />
+    </div>
+  );
+}