@unicitylabs/sphere-ui 0.1.18 → 0.1.19

package/dist/index.d.ts

@@ -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';
@@ -430,6 +441,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 +450,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,
             {
@@ -2020,7 +2080,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 +2127,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.19",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",