@unicitylabs/sphere-ui 0.1.17 → 0.1.18

package/README.md

@@ -140,15 +140,23 @@ Defined in `src/styles/tokens.css` via `@theme {}` block:
 
 Backward-compatible aliases `admin-card`, `admin-input`, etc. are also available.
 
-## Media components (v0.1.16+)
+## Media components
 
-For uploading images (logos, banners, screenshots) and rendering marketplace cards:
+Components for project preview UIs — same look as sphere wallet's marketplace, so dev-portal and backoffice can show creators what their project will look like.
 
+**Upload (v0.1.16+):**
 - `<MediaUploader>` — drag-drop file upload + URL paste with progress, validation, error states. Pass an `uploadFn` prop that performs your presign → PUT → confirm flow against your backend.
 - `<MediaGallery>` — sortable list of screenshots (max 10) via @dnd-kit; uses `<MediaUploader>` inline for adding items.
-- `<MarketplaceProjectCard>` — live preview of how a project card will look in the sphere wallet marketplace. First marketplace-tier component in sphere-ui (rest are admin-tier).
 
-Helper exports: `MEDIA_LIMITS`, `isMimeAllowed`, `isSizeAllowed`, `humanSize`. Types: `MediaKind`, `MediaMime`, `MediaLimit`, `MediaUploadFn`, `MediaUploadResult`, `MediaItem`.
+**Marketplace preview (v0.1.17+):**
+- `<MarketplaceProjectCard>` — 1:1 visual copy of sphere wallet's regular marketplace card. Banner + accentColor gradient, logo overflow ring, category badge, Users/Target/ThumbsUp stats, optional install button overlay. Framer-motion hover lift.
+- `<FeaturedProjectCard>` — 1:1 copy of sphere wallet's "featured" variant. Full-banner background, Star badge, bottom-overlay content.
+- `<InstalledProjectIcon>` — 1:1 copy of sphere wallet's desktop dock icon. Accepts `showLabel` prop for dock vs grid layouts.
+- `<ProjectPagePreview>` — stateless version of sphere wallet's full `/apps/:slug` page. Hero + stats + social + screenshots strip + quests + achievements + reviews placeholder. Accepts all data via props.
+
+All preview components are decorative — they don't fetch data, don't wrap navigation, don't trigger install. Use them in dev-portal/backoffice forms to show the creator what users will see.
+
+Helper exports: `MEDIA_LIMITS`, `isMimeAllowed`, `isSizeAllowed`, `humanSize`. Types: `MediaKind`, `MediaMime`, `MediaLimit`, `MediaUploadFn`, `MediaUploadResult`, `MediaItem`, `QuestPreviewSummary`, `AchievementPreviewSummary`.
 
 ## Development
 

package/dist/index.d.ts

@@ -332,23 +332,116 @@ interface MarketplaceProjectCardProps {
     tagline?: string;
     logoUrl?: string | null;
     bannerUrl?: string | null;
-    rating?: number;
-    userCount?: number;
+    /** Hex like "#FF6F00". Defaults to brand orange. */
+    accentColor?: string;
+    category?: 'game' | 'defi' | 'social' | 'tool' | 'nft' | 'other' | string;
+    users?: number;
+    quests?: number;
+    positivePercent?: number;
+    ratingCount?: number;
+    /** Show install button overlay. Pass `'installed'` or `'available'` to render the right state. Pass `'none'` (default) to hide it (used in preview mode). */
+    installState?: 'none' | 'available' | 'installed';
+    /** Only fires when `installState !== 'none'`. */
+    onInstallClick?: () => void;
+    /** Optional click handler for the whole card (apps wrapping with router Link externally should leave this undefined). */
+    onClick?: () => void;
 }
 /**
- * MarketplaceProjectCard — preview of a project card in sphere wallet marketplace style.
+ * MarketplaceProjectCard — 1:1 visual copy of sphere wallet's ProjectCard.
  *
  * Used by dev-portal & backoffice as a live preview while editing a project,
- * so authors can see roughly how their card will look in the marketplace.
+ * so authors can see exactly how their card will look in the marketplace.
+ *
+ * No `<Link>` dependency — wrap externally if router navigation is needed.
+ */
+declare function MarketplaceProjectCard({ name, tagline, logoUrl, bannerUrl, accentColor, category, users, quests, positivePercent, ratingCount, installState, onInstallClick, onClick, }: MarketplaceProjectCardProps): react_jsx_runtime.JSX.Element;
+
+interface FeaturedProjectCardProps {
+    name: string;
+    tagline?: string;
+    logoUrl?: string | null;
+    bannerUrl?: string | null;
+    /** Hex like "#FF6F00". Defaults to brand orange. */
+    accentColor?: string;
+    users?: number;
+    quests?: number;
+    positivePercent?: number;
+    ratingCount?: number;
+    onClick?: () => void;
+}
+/**
+ * FeaturedProjectCard — 1:1 visual copy of sphere wallet's FeaturedProjectCard.
+ *
+ * Wide hero-style card used in marketplace featured rails.
+ * No `<Link>` dependency — wrap externally if router navigation is needed.
+ */
+declare function FeaturedProjectCard({ name, tagline, logoUrl, bannerUrl, accentColor, users, quests, positivePercent, ratingCount, onClick, }: FeaturedProjectCardProps): react_jsx_runtime.JSX.Element;
+
+interface InstalledProjectIconProps {
+    name: string;
+    logoUrl?: string | null;
+    /** Hex like "#FF6F00". Defaults to brand orange. */
+    accentColor?: string;
+    onClick?: () => void;
+    /** When true, render the name label under the icon (dock vs grid layout). Default true. */
+    showLabel?: boolean;
+}
+/**
+ * InstalledProjectIcon — 1:1 visual copy of sphere wallet's desktop installed-project icon.
+ *
+ * Stripped of context menu / install state / router navigation logic.
+ * Drop-in preview component for design tooling.
+ */
+declare function InstalledProjectIcon({ name, logoUrl, accentColor, onClick, showLabel, }: InstalledProjectIconProps): react_jsx_runtime.JSX.Element;
+
+interface QuestPreviewSummary {
+    slug: string;
+    title: string;
+    description?: string;
+    points?: number;
+    difficulty?: 'easy' | 'medium' | 'hard';
+}
+interface AchievementPreviewSummary {
+    slug: string;
+    title: string;
+    imageUrl?: string | null;
+    points?: number;
+}
+interface ProjectPagePreviewProps {
+    name: string;
+    slug: string;
+    tagline?: string;
+    description?: string;
+    logoUrl?: string | null;
+    bannerUrl?: string | null;
+    accentColor?: string;
+    category?: string;
+    websiteUrl?: string;
+    discordUrl?: string;
+    twitterUrl?: string;
+    /** All media (screenshots + videos) for the strip */
+    media?: MediaItem[];
+    /** Live or static metrics — preview just shows what's passed */
+    users?: number;
+    activeQuests?: number;
+    positivePercent?: number;
+    ratingCount?: number;
+    /** Sample quests to show in the "Quests" section */
+    quests?: QuestPreviewSummary[];
+    /** Sample achievements */
+    achievements?: AchievementPreviewSummary[];
+}
+/**
+ * ProjectPagePreview — stateless 1:1 visual copy of sphere wallet's `/apps/:slug` page.
  *
- * Adapted to sphere-ui design tokens (dark-tier admin palette).
- * Visually adjacent to sphere wallet's ProjectCard but not a 1:1 copy.
+ * Used by dev-portal & backoffice as a live preview while editing a project.
+ * No router / hooks / data fetching — every value comes via props.
  */
-declare function MarketplaceProjectCard({ name, tagline, logoUrl, bannerUrl, rating, userCount, }: MarketplaceProjectCardProps): react_jsx_runtime.JSX.Element;
+declare function ProjectPagePreview({ name, tagline, description, logoUrl, bannerUrl, accentColor, category, websiteUrl, discordUrl, twitterUrl, media, users, activeQuests, positivePercent, ratingCount, quests, achievements, }: ProjectPagePreviewProps): react_jsx_runtime.JSX.Element;
 
 declare const MEDIA_LIMITS: Record<MediaKind, MediaLimit>;
 declare function isMimeAllowed(kind: MediaKind, mime: string): mime is MediaMime;
 declare function isSizeAllowed(kind: MediaKind, size: number): boolean;
 declare function humanSize(bytes: number): string;
 
-export { AddressDisplay, AlertBanner, AppLogo, Button, type ButtonProps, type ButtonVariant, ChainInput, ConfirmDialog, CustomSelect, DashboardLayout, DataTable, EmptyState, Field, FormModal, IconArrowRight, IconBack, IconChain, IconCheck, IconChevronDown, IconChevronUp, IconChevronsDown, IconChevronsRight, IconCircle, IconDiamond, IconEdit, IconPlay, IconPlus, IconQuests, IconSearch, IconSettings, IconStar, IconTracks, IconTrash, IconUndo, IconX, Input, type InputProps, JsonPanel, JsonToggleButton, MEDIA_LIMITS, MarketplaceProjectCard, type MarketplaceProjectCardProps, MediaGallery, type MediaGalleryProps, type MediaItem, type MediaKind, type MediaLimit, type MediaMime, type MediaUploadFn, type MediaUploadResult, MediaUploader, type MediaUploaderProps, type MemoCondition, MemoConditionsEditor, type NavGroup, type NavItem, PageShell, SearchInput, Section, Select, type SelectOption, type SelectProps, SidebarNav, Skeleton, SkeletonCircle, type SkeletonCircleProps, type SkeletonCircleSize, type SkeletonProps, SkeletonText, type SkeletonTextProps, StatusBadge, Textarea, type TextareaProps, humanSize, isMimeAllowed, isSizeAllowed, tagColor };
+export { type AchievementPreviewSummary, AddressDisplay, AlertBanner, AppLogo, Button, type ButtonProps, type ButtonVariant, ChainInput, ConfirmDialog, CustomSelect, DashboardLayout, DataTable, EmptyState, FeaturedProjectCard, type FeaturedProjectCardProps, Field, FormModal, IconArrowRight, IconBack, IconChain, IconCheck, IconChevronDown, IconChevronUp, IconChevronsDown, IconChevronsRight, IconCircle, IconDiamond, IconEdit, IconPlay, IconPlus, IconQuests, IconSearch, IconSettings, IconStar, IconTracks, IconTrash, IconUndo, IconX, Input, type InputProps, InstalledProjectIcon, type InstalledProjectIconProps, JsonPanel, JsonToggleButton, MEDIA_LIMITS, MarketplaceProjectCard, type MarketplaceProjectCardProps, MediaGallery, type MediaGalleryProps, type MediaItem, type MediaKind, type MediaLimit, type MediaMime, type MediaUploadFn, type MediaUploadResult, MediaUploader, type MediaUploaderProps, type MemoCondition, MemoConditionsEditor, type NavGroup, type NavItem, PageShell, ProjectPagePreview, type ProjectPagePreviewProps, type QuestPreviewSummary, SearchInput, Section, Select, type SelectOption, type SelectProps, SidebarNav, Skeleton, SkeletonCircle, type SkeletonCircleProps, type SkeletonCircleSize, type SkeletonProps, SkeletonText, type SkeletonTextProps, StatusBadge, Textarea, type TextareaProps, humanSize, isMimeAllowed, isSizeAllowed, tagColor };

package/dist/index.js

@@ -1700,77 +1700,587 @@ function MediaGallery({ ownerType, ownerId, items, onChange, uploadFn, max = 10
 }
 
 // src/components/media/MarketplaceProjectCard.tsx
-import { jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
-function initials(name) {
-  return name.split(/\s+/).map((w) => w[0]).filter(Boolean).slice(0, 2).join("").toUpperCase();
-}
-function formatUsers(n) {
-  if (n < 1e3) return n.toString();
-  if (n < 1e6) return `${(n / 1e3).toFixed(1)}k`;
-  return `${(n / 1e6).toFixed(1)}M`;
-}
+import { motion } from "framer-motion";
+import { Users, Target, ThumbsUp, Plus, Check } from "lucide-react";
+import { Fragment as Fragment5, jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
+var categoryLabels = {
+  game: "Game",
+  defi: "DeFi",
+  social: "Social",
+  tool: "Tool",
+  nft: "NFT",
+  other: "Other"
+};
 function MarketplaceProjectCard({
   name,
   tagline,
   logoUrl,
   bannerUrl,
-  rating,
-  userCount
+  accentColor = "#FF6F00",
+  category,
+  users = 0,
+  quests = 0,
+  positivePercent = 0,
+  ratingCount = 0,
+  installState = "none",
+  onInstallClick,
+  onClick
 }) {
   const hasBanner = !!bannerUrl;
-  const showStats = rating !== void 0 || userCount !== void 0;
-  return /* @__PURE__ */ jsxs20("div", { className: "w-[280px] rounded-[--radius-lg] overflow-hidden bg-[--bg-elevated] border border-[--border] font-[--font-body] shadow-[--shadow-md]", children: [
-    /* @__PURE__ */ jsx25("div", { className: "relative h-20 bg-[--bg-surface] overflow-hidden", children: hasBanner ? /* @__PURE__ */ jsx25(
-      "img",
-      {
-        src: bannerUrl,
-        alt: `${name} banner`,
-        className: "w-full h-full object-cover"
-      }
-    ) : /* @__PURE__ */ jsx25(
-      "div",
-      {
-        className: "absolute inset-0",
-        style: {
-          background: "linear-gradient(135deg, rgba(255,111,0,0.35) 0%, rgba(255,111,0,0.05) 100%)"
-        }
-      }
-    ) }),
-    /* @__PURE__ */ jsxs20("div", { className: "p-4", children: [
-      /* @__PURE__ */ jsxs20("div", { className: "flex items-start gap-3", children: [
-        logoUrl ? /* @__PURE__ */ jsx25(
-          "img",
-          {
-            src: logoUrl,
-            alt: `${name} logo`,
-            className: `w-12 h-12 rounded-[--radius-md] object-cover bg-[--bg-surface] border border-[--border] shrink-0 ${hasBanner ? "-mt-8 ring-2 ring-[--bg-elevated] relative z-10" : ""}`
-          }
-        ) : /* @__PURE__ */ jsx25(
+  const installed = installState === "installed";
+  const showInstall = installState !== "none";
+  const handleInstall = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    onInstallClick?.();
+  };
+  const placeholderLogo = `https://placehold.co/44x44/${accentColor.slice(1)}/white?text=${name[0] ?? "?"}`;
+  const card = /* @__PURE__ */ jsxs20(
+    motion.div,
+    {
+      whileHover: { y: -4 },
+      className: "no-text-shadow group rounded-2xl border border-neutral-200 dark:border-white/8 hover:border-orange-500/60 dark:hover:border-brand-orange/60 hover:shadow-lg hover:shadow-orange-500/10 dark:hover:shadow-brand-orange/15 transition-all duration-200 cursor-pointer relative overflow-hidden",
+      children: [
+        /* @__PURE__ */ jsxs20("div", { className: "relative h-24 overflow-hidden", "data-testid": "banner", children: [
+          hasBanner ? /* @__PURE__ */ jsxs20(Fragment5, { children: [
+            /* @__PURE__ */ jsx25(
+              "div",
+              {
+                className: "absolute inset-0 bg-cover bg-center transition-transform duration-500 group-hover:scale-105",
+                style: { backgroundImage: `url(${bannerUrl})` }
+              }
+            ),
+            /* @__PURE__ */ jsx25("div", { className: "absolute inset-0", style: {
+              background: `linear-gradient(to bottom, ${accentColor}33 0%, ${accentColor}99 100%)`
+            } })
+          ] }) : /* @__PURE__ */ jsx25("div", { className: "absolute inset-0", style: {
+            background: `linear-gradient(135deg, ${accentColor}cc 0%, ${accentColor}44 100%)`
+          } }),
+          showInstall && /* @__PURE__ */ jsx25(
+            "button",
+            {
+              onClick: handleInstall,
+              title: installed ? "Remove from Desktop" : "Add to Desktop",
+              className: `absolute top-3 right-3 z-10 w-8 h-8 rounded-lg flex items-center justify-center backdrop-blur-sm transition-all ${installed ? "bg-green-500/30 text-white border border-green-400/40" : "bg-black/30 text-white/70 border border-white/15 hover:bg-orange-500/40 hover:text-white hover:border-orange-400/40"}`,
+              children: installed ? /* @__PURE__ */ jsx25(Check, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx25(Plus, { className: "w-4 h-4" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs20("div", { className: "p-4 bg-white dark:bg-white/4 dark:backdrop-blur-2xl", children: [
+          /* @__PURE__ */ jsxs20("div", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ jsx25(
+              "img",
+              {
+                src: logoUrl ?? placeholderLogo,
+                alt: name,
+                className: "w-11 h-11 rounded-xl object-cover border border-neutral-200 dark:border-white/10 shrink-0 -mt-8 ring-2 ring-white dark:ring-[#0a0a0a] shadow-lg relative z-10",
+                onError: (e) => {
+                  e.target.src = placeholderLogo;
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxs20("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx25("h3", { className: "font-semibold text-neutral-900 dark:text-white text-sm truncate", children: name }),
+              /* @__PURE__ */ jsx25("p", { className: "text-neutral-500 dark:text-white/45 text-xs mt-0.5 h-8 line-clamp-2", children: tagline })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs20("div", { className: "flex items-center justify-between mt-3 pt-3 border-t border-neutral-100 dark:border-white/5", children: [
+            category ? /* @__PURE__ */ jsx25("span", { className: "inline-flex px-2 py-0.5 rounded-md text-[10px] font-semibold uppercase tracking-wider border", style: {
+              backgroundColor: `${accentColor}15`,
+              color: accentColor,
+              borderColor: `${accentColor}30`
+            }, children: categoryLabels[category] ?? category }) : /* @__PURE__ */ jsx25("span", {}),
+            /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-3 text-[11px] text-neutral-400 dark:text-white/35", children: [
+              /* @__PURE__ */ jsxs20("span", { className: "flex items-center gap-1", title: "Users", children: [
+                /* @__PURE__ */ jsx25(Users, { className: "w-3 h-3" }),
+                users.toLocaleString()
+              ] }),
+              /* @__PURE__ */ jsxs20("span", { className: "flex items-center gap-1", title: "Active quests", children: [
+                /* @__PURE__ */ jsx25(Target, { className: "w-3 h-3" }),
+                quests.toLocaleString()
+              ] }),
+              ratingCount > 0 && /* @__PURE__ */ jsxs20("span", { className: "flex items-center gap-1", title: `${ratingCount} reviews`, children: [
+                /* @__PURE__ */ jsx25(ThumbsUp, { className: "w-3 h-3" }),
+                positivePercent,
+                "%"
+              ] })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+  if (onClick) {
+    return /* @__PURE__ */ jsx25("button", { type: "button", onClick, className: "block w-full text-left", children: card });
+  }
+  return card;
+}
+
+// src/components/media/FeaturedProjectCard.tsx
+import { motion as motion2 } from "framer-motion";
+import { Star, Users as Users2, Target as Target2, ThumbsUp as ThumbsUp2 } from "lucide-react";
+import { jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
+function FeaturedProjectCard({
+  name,
+  tagline,
+  logoUrl,
+  bannerUrl,
+  accentColor = "#FF6F00",
+  users = 0,
+  quests = 0,
+  positivePercent = 0,
+  ratingCount = 0,
+  onClick
+}) {
+  const placeholderLogo = `https://placehold.co/40x40/${accentColor.slice(1)}/white?text=${name[0] ?? "?"}`;
+  const card = /* @__PURE__ */ jsxs21(
+    motion2.div,
+    {
+      whileHover: { scale: 1.02, y: -2 },
+      whileTap: { scale: 0.98 },
+      className: "relative w-72 sm:w-80 h-44 rounded-2xl overflow-hidden shrink-0 cursor-pointer group",
+      children: [
+        /* @__PURE__ */ jsx26(
           "div",
           {
-            className: `w-12 h-12 rounded-[--radius-md] flex items-center justify-center bg-[--accent-glow] text-[--accent] font-bold text-sm shrink-0 ${hasBanner ? "-mt-8 ring-2 ring-[--bg-elevated] relative z-10" : ""}`,
-            children: initials(name)
+            className: "absolute inset-0 bg-cover bg-center transition-transform duration-500 group-hover:scale-105",
+            "data-testid": "banner",
+            style: {
+              backgroundColor: accentColor,
+              backgroundImage: bannerUrl ? `url(${bannerUrl})` : void 0
+            }
           }
         ),
-        /* @__PURE__ */ jsxs20("div", { className: "flex-1 min-w-0 pt-0.5", children: [
-          /* @__PURE__ */ jsx25("div", { className: "text-[--text-primary] font-medium text-sm truncate", children: name }),
-          tagline && /* @__PURE__ */ jsx25("div", { className: "text-xs text-[--text-muted] mt-0.5 truncate", children: tagline })
-        ] })
-      ] }),
-      showStats && /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-3 mt-3 pt-3 border-t border-[--border-subtle] text-[11px] text-[--text-muted]", children: [
-        rating !== void 0 && /* @__PURE__ */ jsxs20("span", { className: "flex items-center gap-1", children: [
-          /* @__PURE__ */ jsx25("span", { className: "text-[--accent]", children: "\u2605" }),
-          " ",
-          rating.toFixed(1)
+        /* @__PURE__ */ jsx26("div", { className: "absolute inset-0", style: {
+          background: bannerUrl ? `linear-gradient(135deg, ${accentColor}66 0%, transparent 60%)` : `linear-gradient(135deg, ${accentColor}cc 0%, ${accentColor}44 100%)`
+        } }),
+        /* @__PURE__ */ jsx26("div", { className: "absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" }),
+        /* @__PURE__ */ jsxs21("div", { className: "absolute top-3 right-3 flex items-center gap-1 px-2 py-1 rounded-full bg-amber-500/90 text-white text-[10px] font-bold uppercase tracking-wider", children: [
+          /* @__PURE__ */ jsx26(Star, { className: "w-3 h-3", fill: "currentColor" }),
+          "Featured"
         ] }),
-        userCount !== void 0 && /* @__PURE__ */ jsxs20("span", { children: [
-          "\xB7 ",
-          formatUsers(userCount),
-          " users"
+        /* @__PURE__ */ jsxs21("div", { className: "absolute bottom-0 left-0 right-0 p-4", children: [
+          /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx26(
+              "img",
+              {
+                src: logoUrl ?? placeholderLogo,
+                alt: name,
+                className: "w-10 h-10 rounded-xl object-cover border-2 border-white/20 shadow-lg",
+                onError: (e) => {
+                  e.target.src = placeholderLogo;
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxs21("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx26("h3", { className: "font-semibold text-white text-sm truncate", children: name }),
+              /* @__PURE__ */ jsx26("p", { className: "text-white/70 text-xs truncate", children: tagline })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-3 mt-2 text-[11px] text-white/60", children: [
+            /* @__PURE__ */ jsxs21("span", { className: "flex items-center gap-1", title: "Users", children: [
+              /* @__PURE__ */ jsx26(Users2, { className: "w-3 h-3" }),
+              users.toLocaleString()
+            ] }),
+            /* @__PURE__ */ jsxs21("span", { className: "flex items-center gap-1", title: "Active quests", children: [
+              /* @__PURE__ */ jsx26(Target2, { className: "w-3 h-3" }),
+              quests.toLocaleString()
+            ] }),
+            ratingCount > 0 && /* @__PURE__ */ jsxs21("span", { className: "flex items-center gap-1", title: `${ratingCount} reviews`, children: [
+              /* @__PURE__ */ jsx26(ThumbsUp2, { className: "w-3 h-3" }),
+              positivePercent,
+              "%"
+            ] })
+          ] })
         ] })
-      ] })
-    ] })
-  ] });
+      ]
+    }
+  );
+  if (onClick) {
+    return /* @__PURE__ */ jsx26("button", { type: "button", onClick, className: "block text-left", draggable: false, children: card });
+  }
+  return card;
+}
+
+// src/components/media/InstalledProjectIcon.tsx
+import { useState as useState9 } from "react";
+import { motion as motion3 } from "framer-motion";
+import { jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
+function InstalledProjectIcon({
+  name,
+  logoUrl,
+  accentColor = "#FF6F00",
+  onClick,
+  showLabel = true
+}) {
+  const [imgError, setImgError] = useState9(false);
+  return /* @__PURE__ */ jsx27("div", { className: "relative", children: /* @__PURE__ */ jsxs22(
+    motion3.button,
+    {
+      type: "button",
+      onClick,
+      whileHover: { scale: 1.08, y: -4 },
+      whileTap: { scale: 0.92 },
+      transition: { duration: 0.05 },
+      className: "flex flex-col items-center gap-2 p-3 rounded-2xl group cursor-pointer relative",
+      children: [
+        /* @__PURE__ */ jsxs22("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx27(
+            "div",
+            {
+              className: "absolute -inset-1 blur-xl opacity-0 group-hover:opacity-50 transition-all duration-300 rounded-2xl",
+              style: { backgroundColor: accentColor }
+            }
+          ),
+          /* @__PURE__ */ jsxs22(
+            "div",
+            {
+              className: "relative w-14 h-14 sm:w-16 sm:h-16 rounded-2xl flex items-center justify-center shadow-lg group-hover:shadow-xl transition-all duration-200 overflow-hidden",
+              style: { background: `linear-gradient(135deg, ${accentColor}, ${accentColor}cc)` },
+              children: [
+                /* @__PURE__ */ jsx27(
+                  "div",
+                  {
+                    className: "absolute inset-0 opacity-30 group-hover:opacity-50 transition-opacity duration-500",
+                    style: {
+                      backgroundImage: `radial-gradient(at 27% 37%, rgba(255,255,255,0.15) 0px, transparent 50%),
+                                 radial-gradient(at 97% 21%, rgba(255,255,255,0.1) 0px, transparent 50%)`
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx27("div", { className: "absolute top-0 right-0 w-8 h-8 bg-white/10 rounded-bl-full group-hover:w-10 group-hover:h-10 transition-all duration-300" }),
+                logoUrl && !imgError ? /* @__PURE__ */ jsx27(
+                  "img",
+                  {
+                    src: logoUrl,
+                    alt: name,
+                    onError: () => setImgError(true),
+                    className: "w-9 h-9 sm:w-10 sm:h-10 object-contain rounded-lg relative z-10 drop-shadow-lg"
+                  }
+                ) : /* @__PURE__ */ jsx27("span", { className: "text-white font-bold text-lg relative z-10", children: name[0] ?? "?" })
+              ]
+            }
+          )
+        ] }),
+        showLabel && /* @__PURE__ */ jsx27("span", { className: "text-xs sm:text-sm font-medium text-neutral-500 dark:text-[rgba(255,255,255,0.45)] group-hover:text-neutral-900 dark:group-hover:text-white transition-colors truncate max-w-20 sm:max-w-24 text-center leading-tight", children: name })
+      ]
+    }
+  ) });
+}
+
+// src/components/media/ProjectPagePreview.tsx
+import { motion as motion4 } from "framer-motion";
+import {
+  ArrowLeft,
+  ExternalLink,
+  Users as Users3,
+  Target as Target3,
+  ThumbsUp as ThumbsUp3,
+  Globe,
+  Plus as Plus2,
+  Star as Star2,
+  Trophy,
+  MessageCircle,
+  Twitter,
+  Zap
+} from "lucide-react";
+import { jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
+var categoryLabels2 = {
+  game: "Game",
+  defi: "DeFi",
+  social: "Social",
+  tool: "Tool",
+  nft: "NFT",
+  other: "Other"
+};
+var difficultyStyles = {
+  easy: "bg-green-500/10 text-green-600 dark:text-green-400 border-green-500/25",
+  medium: "bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/25",
+  hard: "bg-red-500/10 text-red-600 dark:text-red-400 border-red-500/25"
+};
+function getMediaThumb(m) {
+  if (m.type !== "video") return m.url;
+  const ytMatch = m.url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([^&\s]+)/);
+  return ytMatch ? `https://img.youtube.com/vi/${ytMatch[1]}/hqdefault.jpg` : m.url;
+}
+function ProjectPagePreview({
+  name,
+  tagline,
+  description,
+  logoUrl,
+  bannerUrl,
+  accentColor = "#FF6F00",
+  category,
+  websiteUrl,
+  discordUrl,
+  twitterUrl,
+  media = [],
+  users = 0,
+  activeQuests = 0,
+  positivePercent = 0,
+  ratingCount = 0,
+  quests = [],
+  achievements = []
+}) {
+  const placeholderLogo = `https://placehold.co/80x80/${accentColor.slice(1)}/white?text=${name[0] ?? "?"}`;
+  return /* @__PURE__ */ jsxs23(
+    motion4.div,
+    {
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      className: "text-neutral-900 dark:text-white pb-12",
+      children: [
+        /* @__PURE__ */ jsxs23("div", { className: "relative mx-4 sm:mx-6 mt-2", children: [
+          /* @__PURE__ */ jsxs23("div", { className: "relative h-48 sm:h-64 rounded-2xl overflow-hidden", children: [
+            /* @__PURE__ */ jsx28(
+              "div",
+              {
+                className: "absolute inset-0 bg-cover bg-center",
+                "data-testid": "banner",
+                style: {
+                  backgroundColor: accentColor,
+                  backgroundImage: bannerUrl ? `url(${bannerUrl})` : void 0
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx28("div", { className: "absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" }),
+            /* @__PURE__ */ jsxs23("div", { className: "absolute top-4 left-4 flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-black/40 backdrop-blur-sm text-white/80 text-sm", children: [
+              /* @__PURE__ */ jsx28(ArrowLeft, { className: "w-4 h-4" }),
+              "Explore"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx28("div", { className: "absolute -bottom-6 left-6 sm:left-8 z-10", children: /* @__PURE__ */ jsx28(
+            "img",
+            {
+              src: logoUrl ?? placeholderLogo,
+              alt: name,
+              className: "w-16 h-16 sm:w-20 sm:h-20 rounded-2xl object-cover border-4 border-white dark:border-[#060606] shadow-xl",
+              onError: (e) => {
+                e.target.src = placeholderLogo;
+              }
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx28("section", { className: "px-4 sm:px-6 pt-10 pb-6", children: /* @__PURE__ */ jsxs23("div", { className: "no-text-shadow max-w-5xl mx-auto bg-neutral-50 dark:bg-white/4 dark:backdrop-blur-2xl rounded-2xl border border-neutral-200 dark:border-white/8 p-6 sm:p-8", children: [
+          /* @__PURE__ */ jsxs23("div", { className: "flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4", children: [
+            /* @__PURE__ */ jsxs23("div", { children: [
+              /* @__PURE__ */ jsx28("h1", { className: "text-2xl sm:text-3xl font-bold", children: name }),
+              tagline && /* @__PURE__ */ jsx28("p", { className: "text-neutral-500 dark:text-white/55 mt-1", children: tagline }),
+              category && /* @__PURE__ */ jsx28("div", { className: "flex items-center gap-2 mt-3", children: /* @__PURE__ */ jsx28(
+                "span",
+                {
+                  className: "inline-flex px-2.5 py-0.5 rounded-lg text-xs font-semibold uppercase tracking-wider",
+                  style: {
+                    backgroundColor: `${accentColor}15`,
+                    color: accentColor,
+                    border: `1px solid ${accentColor}30`
+                  },
+                  children: categoryLabels2[category] ?? category
+                }
+              ) })
+            ] }),
+            /* @__PURE__ */ jsxs23("div", { className: "flex gap-2 shrink-0 flex-wrap", children: [
+              /* @__PURE__ */ jsxs23(
+                "button",
+                {
+                  type: "button",
+                  className: "inline-flex items-center gap-2 px-5 py-2.5 rounded-xl font-semibold text-sm transition-all cursor-pointer bg-orange-500 dark:bg-brand-orange hover:bg-orange-600 dark:hover:bg-brand-orange-dark text-white shadow-lg shadow-orange-500/20",
+                  children: [
+                    /* @__PURE__ */ jsx28(Plus2, { className: "w-4 h-4" }),
+                    " Add to Desktop"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs23(
+                "button",
+                {
+                  type: "button",
+                  className: "inline-flex items-center gap-2 px-5 py-2.5 rounded-xl text-sm font-medium border border-neutral-200 dark:border-white/8 text-neutral-600 dark:text-white/55 hover:text-neutral-900 dark:hover:text-white hover:border-neutral-300 dark:hover:border-white/15 transition-colors cursor-pointer",
+                  children: [
+                    "Open ",
+                    /* @__PURE__ */ jsx28(ExternalLink, { className: "w-3.5 h-3.5" })
+                  ]
+                }
+              ),
+              websiteUrl && /* @__PURE__ */ jsxs23(
+                "a",
+                {
+                  href: websiteUrl,
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  className: "inline-flex items-center gap-2 px-5 py-2.5 rounded-xl text-sm font-medium border border-neutral-200 dark:border-white/8 text-neutral-600 dark:text-white/55 hover:text-neutral-900 dark:hover:text-white hover:border-neutral-300 dark:hover:border-white/15 transition-colors",
+                  children: [
+                    "Website ",
+                    /* @__PURE__ */ jsx28(Globe, { className: "w-3.5 h-3.5" })
+                  ]
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs23("div", { className: "flex gap-6 sm:gap-10 border-t border-neutral-200 dark:border-white/8 mt-6 pt-5", children: [
+            /* @__PURE__ */ jsxs23("div", { className: "text-center sm:text-left", children: [
+              /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-1.5 justify-center sm:justify-start", children: [
+                /* @__PURE__ */ jsx28(Users3, { className: "w-4 h-4 text-neutral-400 dark:text-white/30" }),
+                /* @__PURE__ */ jsx28("span", { className: "text-xl sm:text-2xl font-bold font-mono", children: users.toLocaleString() })
+              ] }),
+              /* @__PURE__ */ jsx28("span", { className: "text-xs text-neutral-400 dark:text-white/35 uppercase tracking-wider", children: "Users" })
+            ] }),
+            /* @__PURE__ */ jsxs23("div", { className: "text-center sm:text-left", children: [
+              /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-1.5 justify-center sm:justify-start", children: [
+                /* @__PURE__ */ jsx28(Target3, { className: "w-4 h-4 text-neutral-400 dark:text-white/30" }),
+                /* @__PURE__ */ jsx28("span", { className: "text-xl sm:text-2xl font-bold font-mono", children: activeQuests.toLocaleString() })
+              ] }),
+              /* @__PURE__ */ jsx28("span", { className: "text-xs text-neutral-400 dark:text-white/35 uppercase tracking-wider", children: "Active Quests" })
+            ] }),
+            ratingCount > 0 && /* @__PURE__ */ jsxs23("div", { className: "text-center sm:text-left", children: [
+              /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-1.5 justify-center sm:justify-start", children: [
+                /* @__PURE__ */ jsx28(ThumbsUp3, { className: "w-4 h-4 text-neutral-400 dark:text-white/30" }),
+                /* @__PURE__ */ jsxs23("span", { className: "text-xl sm:text-2xl font-bold font-mono", children: [
+                  positivePercent,
+                  "%"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs23("span", { className: "text-xs text-neutral-400 dark:text-white/35 uppercase tracking-wider", children: [
+                ratingCount.toLocaleString(),
+                " ",
+                ratingCount === 1 ? "review" : "reviews"
+              ] })
+            ] })
+          ] })
+        ] }) }),
+        media.length > 0 && /* @__PURE__ */ jsx28("section", { className: "px-4 sm:px-6 pb-8", children: /* @__PURE__ */ jsxs23("div", { className: "max-w-5xl mx-auto", children: [
+          /* @__PURE__ */ jsx28("h2", { className: "text-lg font-semibold mb-4", children: "Media" }),
+          /* @__PURE__ */ jsx28("div", { className: "flex gap-3 overflow-x-auto scrollbar-hide pb-2", children: media.map((item, i) => {
+            const isVideo = item.type === "video";
+            return /* @__PURE__ */ jsxs23(
+              "div",
+              {
+                className: "shrink-0 rounded-xl overflow-hidden border border-neutral-200 dark:border-white/8 relative",
+                children: [
+                  /* @__PURE__ */ jsx28(
+                    "img",
+                    {
+                      src: getMediaThumb(item),
+                      alt: isVideo ? `Video ${i + 1}` : `Screenshot ${i + 1}`,
+                      draggable: false,
+                      className: "h-44 sm:h-52 w-72 sm:w-80 object-cover"
+                    }
+                  ),
+                  isVideo && /* @__PURE__ */ jsx28("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsx28("div", { className: "w-14 h-14 rounded-full bg-black/60 backdrop-blur-sm flex items-center justify-center", children: /* @__PURE__ */ jsx28("svg", { className: "w-6 h-6 text-white ml-1", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx28("path", { d: "M8 5v14l11-7z" }) }) }) })
+                ]
+              },
+              i
+            );
+          }) })
+        ] }) }),
+        description && /* @__PURE__ */ jsx28("section", { className: "px-4 sm:px-6 pb-8", children: /* @__PURE__ */ jsxs23("div", { className: "max-w-5xl mx-auto", children: [
+          /* @__PURE__ */ jsx28("h2", { className: "text-lg font-semibold mb-4", children: "About" }),
+          /* @__PURE__ */ jsx28("div", { className: "no-text-shadow bg-neutral-50 dark:bg-white/4 dark:backdrop-blur-2xl rounded-2xl border border-neutral-200 dark:border-white/8 p-6", children: /* @__PURE__ */ jsx28("p", { className: "text-neutral-600 dark:text-white/55 text-sm leading-relaxed whitespace-pre-line", children: description }) })
+        ] }) }),
+        quests.length > 0 && /* @__PURE__ */ jsx28("section", { className: "px-4 sm:px-6 pb-8", children: /* @__PURE__ */ jsxs23("div", { className: "max-w-5xl mx-auto", children: [
+          /* @__PURE__ */ jsxs23("h2", { className: "text-lg font-semibold mb-4", children: [
+            "Quests ",
+            /* @__PURE__ */ jsxs23("span", { className: "text-neutral-400 dark:text-white/35 font-normal", children: [
+              "(",
+              quests.length,
+              ")"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx28("div", { className: "grid sm:grid-cols-2 gap-3", children: quests.map((quest) => /* @__PURE__ */ jsxs23(
+            "div",
+            {
+              className: "no-text-shadow bg-white dark:bg-white/4 dark:backdrop-blur-2xl rounded-xl border border-neutral-200 dark:border-white/8 p-4 relative overflow-hidden",
+              children: [
+                /* @__PURE__ */ jsx28("div", { className: "absolute left-0 top-0 bottom-0 w-0.5", style: { backgroundColor: accentColor } }),
+                /* @__PURE__ */ jsxs23("div", { className: "flex items-start gap-3", children: [
+                  /* @__PURE__ */ jsxs23("div", { className: "min-w-0 flex-1", children: [
+                    /* @__PURE__ */ jsx28("h4", { className: "font-medium text-sm text-neutral-900 dark:text-white", children: quest.title }),
+                    quest.description && /* @__PURE__ */ jsx28("p", { className: "text-xs text-neutral-500 dark:text-white/40 mt-0.5 line-clamp-2", children: quest.description }),
+                    quest.difficulty && /* @__PURE__ */ jsx28("span", { className: `inline-flex mt-2 px-2 py-0.5 rounded-md text-[10px] font-semibold uppercase tracking-wider border ${difficultyStyles[quest.difficulty]}`, children: quest.difficulty })
+                  ] }),
+                  typeof quest.points === "number" && /* @__PURE__ */ jsxs23("div", { className: "shrink-0 flex items-center gap-1 px-2 py-1 rounded-lg bg-orange-500/10 dark:bg-brand-orange-dim text-orange-600 dark:text-brand-orange text-xs font-semibold", children: [
+                    /* @__PURE__ */ jsx28(Zap, { className: "w-3 h-3" }),
+                    quest.points
+                  ] })
+                ] })
+              ]
+            },
+            quest.slug
+          )) })
+        ] }) }),
+        achievements.length > 0 && /* @__PURE__ */ jsx28("section", { className: "px-4 sm:px-6 pb-8", children: /* @__PURE__ */ jsxs23("div", { className: "max-w-5xl mx-auto", children: [
+          /* @__PURE__ */ jsxs23("h2", { className: "text-lg font-semibold mb-4", children: [
+            "Achievements ",
+            /* @__PURE__ */ jsxs23("span", { className: "text-neutral-400 dark:text-white/35 font-normal", children: [
+              "(",
+              achievements.length,
+              ")"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx28("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3", children: achievements.map((ach) => /* @__PURE__ */ jsxs23(
+            "div",
+            {
+              className: "no-text-shadow bg-white dark:bg-white/4 dark:backdrop-blur-2xl rounded-xl border border-neutral-200 dark:border-white/8 p-4 flex flex-col items-center text-center",
+              children: [
+                /* @__PURE__ */ jsx28("div", { className: "w-16 h-16 rounded-xl overflow-hidden flex items-center justify-center mb-3", style: {
+                  backgroundColor: `${accentColor}15`,
+                  border: `1px solid ${accentColor}30`
+                }, children: ach.imageUrl ? /* @__PURE__ */ jsx28("img", { src: ach.imageUrl, alt: ach.title, className: "w-full h-full object-cover" }) : /* @__PURE__ */ jsx28(Trophy, { className: "w-8 h-8", style: { color: accentColor } }) }),
+                /* @__PURE__ */ jsx28("h4", { className: "text-sm font-medium text-neutral-900 dark:text-white line-clamp-2", children: ach.title }),
+                typeof ach.points === "number" && /* @__PURE__ */ jsxs23("div", { className: "mt-2 flex items-center gap-1 text-xs font-semibold text-orange-600 dark:text-brand-orange", children: [
+                  /* @__PURE__ */ jsx28(Zap, { className: "w-3 h-3" }),
+                  ach.points
+                ] })
+              ]
+            },
+            ach.slug
+          )) })
+        ] }) }),
+        /* @__PURE__ */ jsx28("section", { className: "px-4 sm:px-6 pb-8", children: /* @__PURE__ */ jsxs23("div", { className: "max-w-5xl mx-auto", children: [
+          /* @__PURE__ */ jsx28("h2", { className: "text-lg font-semibold mb-4", children: "Reviews" }),
+          /* @__PURE__ */ jsxs23("div", { className: "no-text-shadow bg-neutral-50 dark:bg-white/4 dark:backdrop-blur-2xl rounded-2xl border border-neutral-200 dark:border-white/8 p-6 flex flex-col items-center text-center", children: [
+            /* @__PURE__ */ jsx28(Star2, { className: "w-8 h-8 text-neutral-300 dark:text-white/20 mb-2" }),
+            /* @__PURE__ */ jsx28("p", { className: "text-sm text-neutral-500 dark:text-white/40", children: "Reviews coming soon" })
+          ] })
+        ] }) }),
+        (websiteUrl || discordUrl || twitterUrl) && /* @__PURE__ */ jsx28("section", { className: "px-4 sm:px-6 pb-8", children: /* @__PURE__ */ jsxs23("div", { className: "max-w-5xl mx-auto flex items-center gap-4", children: [
+          websiteUrl && /* @__PURE__ */ jsx28(
+            "a",
+            {
+              href: websiteUrl,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              "aria-label": "Website",
+              className: "text-neutral-400 dark:text-white/35 hover:text-orange-500 dark:hover:text-brand-orange transition-colors",
+              children: /* @__PURE__ */ jsx28(Globe, { className: "w-5 h-5" })
+            }
+          ),
+          twitterUrl && /* @__PURE__ */ jsx28(
+            "a",
+            {
+              href: twitterUrl,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              "aria-label": "Twitter / X",
+              className: "text-neutral-400 dark:text-white/35 hover:text-orange-500 dark:hover:text-brand-orange transition-colors",
+              children: /* @__PURE__ */ jsx28(Twitter, { className: "w-5 h-5" })
+            }
+          ),
+          discordUrl && /* @__PURE__ */ jsx28(
+            "a",
+            {
+              href: discordUrl,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              "aria-label": "Discord",
+              className: "text-neutral-400 dark:text-white/35 hover:text-orange-500 dark:hover:text-brand-orange transition-colors",
+              children: /* @__PURE__ */ jsx28(MessageCircle, { className: "w-5 h-5" })
+            }
+          )
+        ] }) })
+      ]
+    }
+  );
 }
 export {
   AddressDisplay,
@@ -1783,6 +2293,7 @@ export {
   DashboardLayout,
   DataTable,
   EmptyState,
+  FeaturedProjectCard,
   Field,
   FormModal,
   IconArrowRight,
@@ -1807,6 +2318,7 @@ export {
   IconUndo,
   IconX,
   Input,
+  InstalledProjectIcon,
   JsonPanel,
   JsonToggleButton,
   MEDIA_LIMITS,
@@ -1815,6 +2327,7 @@ export {
   MediaUploader,
   MemoConditionsEditor,
   PageShell,
+  ProjectPagePreview,
   SearchInput,
   Section,
   Select,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unicitylabs/sphere-ui",
-  "version": "0.1.17",
+  "version": "0.1.18",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -48,6 +48,7 @@
     "@dnd-kit/sortable": "^8.0.0 || ^10.0.0",
     "@tanstack/react-query": "^5.0.0",
     "@tanstack/react-table": "^8.0.0",
+    "framer-motion": "^11.18.2",
     "lucide-react": ">=0.400.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
@@ -71,6 +72,7 @@
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react": "^4.7.0",
+    "framer-motion": "^11.18.2",
     "jsdom": "^25.0.1",
     "lucide-react": "^0.400.0",
     "react": "^19.0.0",