@unicitylabs/sphere-ui 0.1.19 → 0.1.20

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ReactNode, ButtonHTMLAttributes, InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes } from 'react';
+import { ReactNode, ButtonHTMLAttributes, InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes, MouseEvent, Ref } from 'react';
 import { ColumnDef } from '@tanstack/react-table';
 export { A as AchievementData, a as AchievementFormApi, Q as QueryKeys, b as QuestData, c as QuestFormApi, T as TrackData, d as TrackFormApi } from './index-DMHfA7fr.js';
 
@@ -388,22 +388,37 @@ interface FeaturedProjectCardProps {
  */
 declare function FeaturedProjectCard({ name, tagline, logoUrl, bannerUrl, accentColor, users, quests, positivePercent, ratingCount, onClick, }: FeaturedProjectCardProps): react_jsx_runtime.JSX.Element;
 
+/** Loose typing — dnd-kit listeners/attributes don't fit React's HTMLButtonAttributes due to motion.button overrides. */
+type ButtonExtraProps = {
+    className?: string;
+    style?: React.CSSProperties;
+} & Record<string, unknown>;
 interface InstalledProjectIconProps {
     name: string;
     logoUrl?: string | null;
     /** Hex like "#FF6F00". Defaults to brand orange. */
     accentColor?: string;
     onClick?: () => void;
+    /** Right-click handler. Wallet uses it to toggle a context menu. */
+    onContextMenu?: (e: MouseEvent<HTMLButtonElement>) => void;
+    /** Slot overlaid on the icon tile (absolute top/right). Wallet uses it for the MoreVertical menu button. */
+    topRightAction?: ReactNode;
     /** When true, render the name label under the icon (dock vs grid layout). Default true. */
     showLabel?: boolean;
+    /** Ref attached to the inner button. Use for dnd-kit `setActivatorNodeRef`. */
+    buttonRef?: Ref<HTMLButtonElement>;
+    /** Extra props spread on the inner button (e.g. dnd-kit `attributes` + `listeners`). */
+    buttonProps?: ButtonExtraProps;
 }
 /**
- * InstalledProjectIcon — 1:1 visual copy of sphere wallet's desktop installed-project icon.
+ * InstalledProjectIcon — desktop tile for an installed app/skill.
  *
- * Stripped of context menu / install state / router navigation logic.
- * Drop-in preview component for design tooling.
+ * Renders the visual (glow + colored tile + logo + label). Behavior is
+ * driven entirely by props: pass `onClick` for the primary action,
+ * `onContextMenu` for right-click, and `topRightAction` to overlay a
+ * small action button (e.g. context-menu trigger) on the tile.
  */
-declare function InstalledProjectIcon({ name, logoUrl, accentColor, onClick, showLabel, }: InstalledProjectIconProps): react_jsx_runtime.JSX.Element;
+declare function InstalledProjectIcon({ name, logoUrl, accentColor, onClick, onContextMenu, topRightAction, showLabel, buttonRef, buttonProps, }: InstalledProjectIconProps): react_jsx_runtime.JSX.Element;
 
 interface QuestPreviewSummary {
     slug: string;

package/dist/index.js

@@ -1762,7 +1762,7 @@ function MediaGallery({ ownerType, ownerId, items, onChange, uploadFn, max = 10
 // src/components/media/MarketplaceProjectCard.tsx
 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";
+import { jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
 var categoryLabels = {
   game: "Game",
   defi: "DeFi",
@@ -1802,19 +1802,18 @@ function MarketplaceProjectCard({
       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 bg-cover bg-center transition-transform duration-500 group-hover:scale-105",
+              style: {
+                backgroundColor: accentColor,
+                backgroundImage: hasBanner ? `url(${bannerUrl})` : void 0
               }
-            ),
-            /* @__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%)`
+            }
+          ),
+          /* @__PURE__ */ jsx25("div", { className: "absolute inset-0", style: {
+            background: hasBanner ? `linear-gradient(to bottom, transparent 0%, ${accentColor}66 100%)` : `linear-gradient(135deg, ${accentColor}cc 0%, ${accentColor}44 100%)`
           } }),
           showInstall && /* @__PURE__ */ jsx25(
             "button",
@@ -1971,18 +1970,26 @@ function InstalledProjectIcon({
   logoUrl,
   accentColor = "#FF6F00",
   onClick,
-  showLabel = true
+  onContextMenu,
+  topRightAction,
+  showLabel = true,
+  buttonRef,
+  buttonProps
 }) {
   const [imgError, setImgError] = useState9(false);
   return /* @__PURE__ */ jsx27("div", { className: "relative", children: /* @__PURE__ */ jsxs22(
     motion3.button,
     {
+      ref: buttonRef,
       type: "button",
       onClick,
+      onContextMenu,
       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",
+      ...buttonProps,
+      className: `flex flex-col items-center gap-2 p-3 rounded-2xl group cursor-pointer relative${buttonProps?.className ? " " + buttonProps.className : ""}`,
+      style: { touchAction: "none", ...buttonProps?.style },
       children: [
         /* @__PURE__ */ jsxs22("div", { className: "relative", children: [
           /* @__PURE__ */ jsx27(
@@ -2015,12 +2022,13 @@ function InstalledProjectIcon({
                     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"
+                    className: "absolute inset-0 w-full h-full object-cover z-10"
                   }
-                ) : /* @__PURE__ */ jsx27("span", { className: "text-white font-bold text-lg relative z-10", children: name[0] ?? "?" })
+                ) : /* @__PURE__ */ jsx27("span", { className: "text-white font-bold text-2xl sm:text-3xl relative z-10", children: name[0] ?? "?" })
               ]
             }
-          )
+          ),
+          topRightAction
         ] }),
         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 })
       ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unicitylabs/sphere-ui",
-  "version": "0.1.19",
+  "version": "0.1.20",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",