@unicitylabs/sphere-ui 0.1.18 → 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';
 
@@ -310,8 +310,19 @@ interface MediaUploaderProps {
     onChange: (url: string | null) => void;
     uploadFn: MediaUploadFn;
     label?: string;
-}
-declare function MediaUploader({ kind, ownerType, ownerId, value, onChange, uploadFn, label, }: MediaUploaderProps): react_jsx_runtime.JSX.Element;
+    /**
+     * When true, do NOT call uploadFn on file selection. Instead store the file
+     * locally, render a blob-URL preview, and call onFileSelected(file). The
+     * consumer is responsible for uploading later (e.g. after creating the
+     * parent entity to get a real ownerId).
+     *
+     * In this mode the URL paste fallback is hidden — the parent entity does
+     * not yet exist, so an external URL can't be persisted to it anyway.
+     */
+    deferUpload?: boolean;
+    onFileSelected?: (file: File | null) => void;
+}
+declare function MediaUploader({ kind, ownerType, ownerId, value, onChange, uploadFn, label, deferUpload, onFileSelected, }: MediaUploaderProps): react_jsx_runtime.JSX.Element;
 
 interface MediaItem {
     type: 'screenshot' | 'video';
@@ -377,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;
@@ -430,6 +456,8 @@ interface ProjectPagePreviewProps {
     quests?: QuestPreviewSummary[];
     /** Sample achievements */
     achievements?: AchievementPreviewSummary[];
+    /** Project tags — first 3 are rendered as chips next to the category badge */
+    tags?: string[];
 }
 /**
  * ProjectPagePreview — stateless 1:1 visual copy of sphere wallet's `/apps/:slug` page.
@@ -437,7 +465,7 @@ interface ProjectPagePreviewProps {
  * 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 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 function ProjectPagePreview({ name, tagline, description, logoUrl, bannerUrl, accentColor, category, websiteUrl, discordUrl, twitterUrl, media, users, activeQuests, positivePercent, ratingCount, quests, achievements, tags, }: ProjectPagePreviewProps): react_jsx_runtime.JSX.Element;
 
 declare const MEDIA_LIMITS: Record<MediaKind, MediaLimit>;
 declare function isMimeAllowed(kind: MediaKind, mime: string): mime is MediaMime;

package/dist/index.js

@@ -1418,12 +1418,16 @@ function MediaUploader({
   value,
   onChange,
   uploadFn,
-  label
+  label,
+  deferUpload,
+  onFileSelected
 }) {
   const limit = MEDIA_LIMITS[kind];
   const [state, setState] = useState7({ phase: "idle" });
   const [urlInput, setUrlInput] = useState7(value && !value.startsWith("blob:") ? value : "");
   const previewRef = useRef3(null);
+  const fileInputRef = useRef3(null);
+  const isPlaceholder = value?.includes("placehold.co") ?? false;
   useEffect5(
     () => () => {
       if (previewRef.current) {
@@ -1449,6 +1453,14 @@ function MediaUploader({
         });
         return;
       }
+      if (deferUpload) {
+        if (previewRef.current) URL.revokeObjectURL(previewRef.current);
+        previewRef.current = URL.createObjectURL(file);
+        setState({ phase: "pending", file });
+        onFileSelected?.(file);
+        onChange(null);
+        return;
+      }
       const abort = new AbortController();
       setState({ phase: "uploading", file, progress: 0, abort });
       if (previewRef.current) URL.revokeObjectURL(previewRef.current);
@@ -1472,7 +1484,7 @@ function MediaUploader({
         setState({ phase: "error", message });
       }
     },
-    [kind, ownerType, ownerId, uploadFn, onChange, limit]
+    [kind, ownerType, ownerId, uploadFn, onChange, limit, deferUpload, onFileSelected]
   );
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
     accept: Object.fromEntries(limit.mimes.map((m) => [m, []])),
@@ -1498,31 +1510,88 @@ function MediaUploader({
       }
     }
   });
+  const hasUploadedValue = !!value && !isPlaceholder && !value.startsWith("blob:");
+  const hasPendingFile = state.phase === "pending" && !!previewRef.current;
+  const hasDoneUpload = state.phase === "done" && hasUploadedValue;
+  const hasImage = hasPendingFile || hasDoneUpload || state.phase === "idle" && hasUploadedValue;
+  const thumbnailSrc = hasPendingFile ? previewRef.current : hasUploadedValue ? value : "";
+  const isSelected = hasPendingFile;
+  const handleReplace = (e) => {
+    e.stopPropagation();
+    fileInputRef.current?.querySelector("input")?.click();
+  };
+  const handleRemove = (e) => {
+    e.stopPropagation();
+    if (previewRef.current) {
+      URL.revokeObjectURL(previewRef.current);
+      previewRef.current = null;
+    }
+    setState({ phase: "idle" });
+    onChange(null);
+    setUrlInput("");
+    if (deferUpload) onFileSelected?.(null);
+  };
   return /* @__PURE__ */ jsxs18("div", { className: "space-y-2", children: [
-    label && /* @__PURE__ */ jsx23("div", { className: "text-sm text-[--text-secondary]", children: label }),
+    label && /* @__PURE__ */ jsx23("div", { className: "text-sm text-neutral-700 dark:text-white/70", children: label }),
     /* @__PURE__ */ jsxs18(
       "div",
       {
         ...getRootProps(),
-        className: `border-2 border-dashed rounded-[--radius-md] p-6 text-center cursor-pointer transition-colors ${isDragActive ? "border-[--accent] bg-[--accent-glow]" : "border-[--border]"}`,
+        className: `border-2 border-dashed rounded-lg p-6 text-center cursor-pointer transition-colors ${isDragActive ? "border-orange-500 dark:border-brand-orange bg-orange-500/10 dark:bg-brand-orange/15" : "border-neutral-200 dark:border-white/8"}`,
         children: [
-          /* @__PURE__ */ jsx23("input", { ...getInputProps(), "aria-label": "file uploader" }),
-          state.phase === "idle" && /* @__PURE__ */ jsxs18(Fragment4, { children: [
+          /* @__PURE__ */ jsx23("span", { ref: fileInputRef, style: { display: "contents" }, children: /* @__PURE__ */ jsx23("input", { ...getInputProps(), "aria-label": "file uploader" }) }),
+          hasImage ? /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-4", children: [
+            /* @__PURE__ */ jsx23(
+              "img",
+              {
+                src: thumbnailSrc,
+                alt: "uploaded",
+                className: "w-16 h-16 rounded-lg object-cover border border-neutral-200 dark:border-white/8 shrink-0"
+              }
+            ),
+            /* @__PURE__ */ jsxs18("div", { className: "flex-1 text-left min-w-0", children: [
+              /* @__PURE__ */ jsxs18("div", { className: "text-sm text-green-500 dark:text-green-400 flex items-center gap-1", children: [
+                /* @__PURE__ */ jsx23("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx23("polyline", { points: "20 6 9 17 4 12" }) }),
+                isSelected ? "Selected" : "Uploaded"
+              ] }),
+              isSelected && /* @__PURE__ */ jsx23("div", { className: "text-[10px] text-neutral-500 dark:text-white/45 mt-0.5", children: "Uploads when you save" }),
+              hasPendingFile && /* @__PURE__ */ jsx23("div", { className: "text-xs text-neutral-500 dark:text-white/45 mt-0.5 truncate", children: state.file.name }),
+              /* @__PURE__ */ jsxs18("div", { className: "flex gap-2 mt-2 text-xs", children: [
+                /* @__PURE__ */ jsx23(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: handleReplace,
+                    className: "text-neutral-700 dark:text-white/70 hover:text-orange-500 dark:hover:text-brand-orange underline-offset-2 hover:underline",
+                    children: "Replace"
+                  }
+                ),
+                /* @__PURE__ */ jsx23(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: handleRemove,
+                    className: "text-neutral-700 dark:text-white/70 hover:text-red-500 dark:hover:text-red-400 underline-offset-2 hover:underline",
+                    children: "Remove"
+                  }
+                )
+              ] })
+            ] })
+          ] }) : state.phase === "idle" ? /* @__PURE__ */ jsxs18(Fragment4, { children: [
             /* @__PURE__ */ jsx23("div", { className: "text-sm mb-1", children: "Drop image here or click to choose" }),
-            /* @__PURE__ */ jsxs18("div", { className: "text-xs text-[--text-muted]", children: [
+            /* @__PURE__ */ jsxs18("div", { className: "text-xs text-neutral-500 dark:text-white/45", children: [
               formatExtensions(limit.mimes),
               " \xB7 max ",
               humanSize(limit.maxSize),
               limit.maxWidth && limit.maxHeight && ` \xB7 ${limit.maxWidth}\xD7${limit.maxHeight}`
             ] })
-          ] }),
-          state.phase === "uploading" && /* @__PURE__ */ jsxs18(Fragment4, { children: [
+          ] }) : state.phase === "uploading" ? /* @__PURE__ */ jsxs18(Fragment4, { children: [
             previewRef.current && /* @__PURE__ */ jsx23(
               "img",
               {
                 src: previewRef.current,
                 alt: "upload preview",
-                className: "max-w-[64px] max-h-[64px] rounded-[--radius-sm] object-cover border border-[--border] mx-auto mb-2"
+                className: "max-w-[64px] max-h-[64px] rounded object-cover border border-neutral-200 dark:border-white/8 mx-auto mb-2"
               }
             ),
             /* @__PURE__ */ jsxs18("div", { className: "text-sm", children: [
@@ -1552,9 +1621,7 @@ function MediaUploader({
                 children: "Cancel"
               }
             )
-          ] }),
-          state.phase === "done" && /* @__PURE__ */ jsx23("div", { className: "text-sm text-green-500", children: "\u2713 Uploaded" }),
-          state.phase === "error" && /* @__PURE__ */ jsxs18(Fragment4, { children: [
+          ] }) : state.phase === "error" ? /* @__PURE__ */ jsxs18(Fragment4, { children: [
             /* @__PURE__ */ jsx23("div", { className: "text-sm text-red-500", children: state.message }),
             /* @__PURE__ */ jsx23(
               "button",
@@ -1568,30 +1635,23 @@ function MediaUploader({
                 children: "Try again"
               }
             )
-          ] })
+          ] }) : null
         ]
       }
     ),
-    /* @__PURE__ */ jsx23("div", { className: "text-xs text-[--text-muted]", children: "or paste URL:" }),
-    /* @__PURE__ */ jsx23(
-      "input",
-      {
-        type: "url",
-        placeholder: "https://...",
-        value: urlInput,
-        onChange: (e) => setUrlInput(e.target.value),
-        onBlur: () => urlInput && onChange(urlInput),
-        className: "w-full bg-[--bg-surface] border border-[--border] rounded-[--radius-sm] px-3 py-2 text-sm"
-      }
-    ),
-    value && /* @__PURE__ */ jsx23(
-      "img",
-      {
-        src: value,
-        alt: "current value preview",
-        className: "max-w-[64px] max-h-[64px] rounded-[--radius-sm] object-cover border border-[--border] mt-2"
-      }
-    )
+    !deferUpload && /* @__PURE__ */ jsxs18(Fragment4, { children: [
+      /* @__PURE__ */ jsx23("div", { className: "text-xs text-neutral-500 dark:text-white/45", children: "or paste URL:" }),
+      /* @__PURE__ */ jsx23(
+        Input,
+        {
+          type: "url",
+          placeholder: "https://...",
+          value: urlInput,
+          onChange: (e) => setUrlInput(e.target.value),
+          onBlur: () => urlInput && onChange(urlInput)
+        }
+      )
+    ] })
   ] });
 }
 
@@ -1615,7 +1675,7 @@ function SortableTile({ item, onRemove }) {
     transform: CSS.Transform.toString(transform),
     transition
   };
-  return /* @__PURE__ */ jsxs19("div", { ref: setNodeRef, style, className: "relative w-24 h-24 rounded-[--radius-md] border border-[--border] overflow-hidden", children: [
+  return /* @__PURE__ */ jsxs19("div", { ref: setNodeRef, style, className: "relative w-24 h-24 rounded-lg border border-neutral-200 dark:border-white/8 overflow-hidden", children: [
     /* @__PURE__ */ jsx24("button", { ...attributes, ...listeners, "aria-label": "drag handle", className: "absolute top-1 left-1 z-10 text-xs opacity-70 hover:opacity-100", children: "\u283F" }),
     /* @__PURE__ */ jsx24("img", { src: item.url, alt: `${item.type} thumbnail`, className: "w-full h-full object-cover" }),
     /* @__PURE__ */ jsx24(
@@ -1645,7 +1705,7 @@ function MediaGallery({ ownerType, ownerId, items, onChange, uploadFn, max = 10
       onDragOver: (e) => e.preventDefault(),
       onDrop: (e) => e.preventDefault(),
       children: [
-        /* @__PURE__ */ jsxs19("div", { className: "text-sm text-[--text-secondary]", children: [
+        /* @__PURE__ */ jsxs19("div", { className: "text-sm text-neutral-700 dark:text-white/70", children: [
           "Screenshots (",
           items.length,
           "/",
@@ -1667,12 +1727,12 @@ function MediaGallery({ ownerType, ownerId, items, onChange, uploadFn, max = 10
               type: "button",
               "aria-label": "add screenshot",
               onClick: () => setAdding(true),
-              className: "w-24 h-24 rounded-[--radius-md] border-2 border-dashed border-[--border] text-2xl hover:border-[--accent]",
+              className: "w-24 h-24 rounded-lg border-2 border-dashed border-neutral-200 dark:border-white/8 text-2xl hover:border-orange-500 dark:hover:border-brand-orange",
               children: "+"
             }
           )
         ] }) }) }),
-        adding && /* @__PURE__ */ jsxs19("div", { className: "border border-[--border] rounded-[--radius-md] p-3", children: [
+        adding && /* @__PURE__ */ jsxs19("div", { className: "border border-neutral-200 dark:border-white/8 rounded-lg p-3", children: [
           /* @__PURE__ */ jsx24(
             MediaUploader,
             {
@@ -1702,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",
@@ -1742,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",
@@ -1911,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(
@@ -1955,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 })
       ]
@@ -2020,7 +2088,8 @@ function ProjectPagePreview({
   positivePercent = 0,
   ratingCount = 0,
   quests = [],
-  achievements = []
+  achievements = [],
+  tags = []
 }) {
   const placeholderLogo = `https://placehold.co/80x80/${accentColor.slice(1)}/white?text=${name[0] ?? "?"}`;
   return /* @__PURE__ */ jsxs23(
@@ -2066,18 +2135,28 @@ function ProjectPagePreview({
             /* @__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`
+              (category || tags.length > 0) && /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-2 mt-3", children: [
+                category && /* @__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
+                  }
+                ),
+                tags.slice(0, 3).map((tag) => /* @__PURE__ */ jsx28(
+                  "span",
+                  {
+                    className: "px-2 py-0.5 rounded-md bg-neutral-100 dark:bg-white/6 text-neutral-500 dark:text-white/40 text-[10px] font-mono",
+                    children: tag
                   },
-                  children: categoryLabels2[category] ?? category
-                }
-              ) })
+                  tag
+                ))
+              ] })
             ] }),
             /* @__PURE__ */ jsxs23("div", { className: "flex gap-2 shrink-0 flex-wrap", children: [
               /* @__PURE__ */ jsxs23(

package/package.json

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