@unicitylabs/sphere-ui 0.1.15 → 0.1.17

package/README.md

@@ -6,11 +6,12 @@ Shared UI library for the Sphere ecosystem. Provides a unified design system, co
 
 | App | Description |
 |-----|-------------|
-| [sphere](https://github.com/unicity-sphere/sphere) | Wallet & marketplace |
 | [sphere-dev-portal](https://github.com/unicity-sphere/sphere-dev-portal) | Developer Portal |
 | [sphere-backoffice](https://github.com/unicity-sphere/sphere-backoffice) | Admin panel |
 | [sphere-quest](https://github.com/unicity-sphere/sphere-quest) | Quest frontend (iframe) |
 
+> **Planned migration: sphere wallet** — the sphere wallet currently does not consume sphere-ui; migration is a separate multi-PR project tracked outside this repo.
+
 ## Installation
 
 ```bash
@@ -139,6 +140,16 @@ 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+)
+
+For uploading images (logos, banners, screenshots) and rendering marketplace cards:
+
+- `<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`.
+
 ## Development
 
 ```bash

package/dist/index.d.ts

@@ -278,4 +278,77 @@ declare const IconStar: (p: IconProps) => react_jsx_runtime.JSX.Element;
 declare const IconDiamond: (p: IconProps) => react_jsx_runtime.JSX.Element;
 declare const IconCircle: (p: IconProps) => react_jsx_runtime.JSX.Element;
 
-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, 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, tagColor };
+type MediaKind = 'logo' | 'banner' | 'screenshot' | 'image' | 'background';
+type MediaMime = 'image/png' | 'image/jpeg' | 'image/webp' | 'image/svg+xml';
+interface MediaLimit {
+    mimes: readonly MediaMime[];
+    maxSize: number;
+    maxWidth?: number;
+    maxHeight?: number;
+    aspectRatio?: number;
+    aspectTolerance?: number;
+}
+interface MediaUploadResult {
+    publicUrl: string;
+    assetId: string;
+}
+interface MediaUploadFn {
+    (file: File, opts: {
+        kind: MediaKind;
+        ownerType: 'project' | 'organization' | 'quest' | 'achievement' | 'track';
+        ownerId: string;
+        onProgress?: (pct: number) => void;
+        signal?: AbortSignal;
+    }): Promise<MediaUploadResult>;
+}
+
+interface MediaUploaderProps {
+    kind: MediaKind;
+    ownerType: 'project' | 'organization' | 'quest' | 'achievement' | 'track';
+    ownerId: string;
+    value?: string | null;
+    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;
+
+interface MediaItem {
+    type: 'screenshot' | 'video';
+    url: string;
+}
+interface MediaGalleryProps {
+    ownerType: 'project';
+    ownerId: string;
+    items: MediaItem[];
+    onChange: (items: MediaItem[]) => void;
+    uploadFn: MediaUploadFn;
+    max?: number;
+}
+declare function MediaGallery({ ownerType, ownerId, items, onChange, uploadFn, max }: MediaGalleryProps): react_jsx_runtime.JSX.Element;
+
+interface MarketplaceProjectCardProps {
+    name: string;
+    tagline?: string;
+    logoUrl?: string | null;
+    bannerUrl?: string | null;
+    rating?: number;
+    userCount?: number;
+}
+/**
+ * MarketplaceProjectCard — preview of a project card in sphere wallet marketplace style.
+ *
+ * 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.
+ *
+ * Adapted to sphere-ui design tokens (dark-tier admin palette).
+ * Visually adjacent to sphere wallet's ProjectCard but not a 1:1 copy.
+ */
+declare function MarketplaceProjectCard({ name, tagline, logoUrl, bannerUrl, rating, userCount, }: MarketplaceProjectCardProps): 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 };

package/dist/index.js

@@ -1379,6 +1379,399 @@ var IconPlay = (p) => /* @__PURE__ */ jsx22(I, { d: P.play, ...p });
 var IconStar = (p) => /* @__PURE__ */ jsx22(I, { d: P.star, ...p });
 var IconDiamond = (p) => /* @__PURE__ */ jsx22(I, { d: P.diamond, ...p });
 var IconCircle = (p) => /* @__PURE__ */ jsx22(I, { d: P.circle, ...p });
+
+// src/components/media/MediaUploader.tsx
+import { useCallback as useCallback4, useEffect as useEffect5, useRef as useRef3, useState as useState7 } from "react";
+import { useDropzone } from "react-dropzone";
+
+// src/components/media/media-limits.ts
+var MB = 1024 * 1024;
+var MEDIA_LIMITS = {
+  logo: { mimes: ["image/png", "image/jpeg", "image/webp", "image/svg+xml"], maxSize: 1 * MB, maxWidth: 1024, maxHeight: 1024, aspectRatio: 1, aspectTolerance: 0.05 },
+  banner: { mimes: ["image/png", "image/jpeg", "image/webp"], maxSize: 3 * MB, maxWidth: 1920, maxHeight: 640, aspectRatio: 3, aspectTolerance: 0.15 },
+  screenshot: { mimes: ["image/png", "image/jpeg", "image/webp"], maxSize: 5 * MB, maxWidth: 2560, maxHeight: 1440 },
+  image: { mimes: ["image/png", "image/jpeg", "image/webp", "image/svg+xml"], maxSize: 1 * MB, maxWidth: 1024, maxHeight: 1024, aspectRatio: 1, aspectTolerance: 0.05 },
+  background: { mimes: ["image/png", "image/jpeg", "image/webp"], maxSize: 3 * MB, maxWidth: 1920, maxHeight: 1080 }
+};
+function isMimeAllowed(kind, mime) {
+  return MEDIA_LIMITS[kind].mimes.includes(mime);
+}
+function isSizeAllowed(kind, size) {
+  return size > 0 && size <= MEDIA_LIMITS[kind].maxSize;
+}
+function humanSize(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < MB) return `${(bytes / 1024).toFixed(0)} KB`;
+  const mb = bytes / MB;
+  return Number.isInteger(mb) ? `${mb} MB` : `${mb.toFixed(1)} MB`;
+}
+
+// src/components/media/MediaUploader.tsx
+import { Fragment as Fragment4, jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
+function formatExtensions(mimes) {
+  return mimes.map((m) => m.split("/")[1].toUpperCase()).join(", ");
+}
+function MediaUploader({
+  kind,
+  ownerType,
+  ownerId,
+  value,
+  onChange,
+  uploadFn,
+  label
+}) {
+  const limit = MEDIA_LIMITS[kind];
+  const [state, setState] = useState7({ phase: "idle" });
+  const [urlInput, setUrlInput] = useState7(value && !value.startsWith("blob:") ? value : "");
+  const previewRef = useRef3(null);
+  useEffect5(
+    () => () => {
+      if (previewRef.current) {
+        URL.revokeObjectURL(previewRef.current);
+        previewRef.current = null;
+      }
+    },
+    []
+  );
+  const handleFile = useCallback4(
+    async (file) => {
+      if (!isMimeAllowed(kind, file.type)) {
+        setState({
+          phase: "error",
+          message: `Format not supported (${formatExtensions(limit.mimes)} only)`
+        });
+        return;
+      }
+      if (!isSizeAllowed(kind, file.size)) {
+        setState({
+          phase: "error",
+          message: `File too large (max ${humanSize(limit.maxSize)})`
+        });
+        return;
+      }
+      const abort = new AbortController();
+      setState({ phase: "uploading", file, progress: 0, abort });
+      if (previewRef.current) URL.revokeObjectURL(previewRef.current);
+      previewRef.current = URL.createObjectURL(file);
+      try {
+        const result = await uploadFn(file, {
+          kind,
+          ownerType,
+          ownerId,
+          signal: abort.signal,
+          onProgress: (pct) => setState((s) => s.phase === "uploading" ? { ...s, progress: pct } : s)
+        });
+        onChange(result.publicUrl);
+        setState({ phase: "done" });
+      } catch (e) {
+        if (abort.signal.aborted) {
+          setState({ phase: "idle" });
+          return;
+        }
+        const message = e instanceof Error ? e.message : "Upload failed, please retry";
+        setState({ phase: "error", message });
+      }
+    },
+    [kind, ownerType, ownerId, uploadFn, onChange, limit]
+  );
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    accept: Object.fromEntries(limit.mimes.map((m) => [m, []])),
+    maxSize: limit.maxSize,
+    multiple: false,
+    onDropAccepted: (files) => {
+      if (files[0]) void handleFile(files[0]);
+    },
+    onDropRejected: (rejections) => {
+      const firstError = rejections[0]?.errors[0];
+      if (firstError?.code === "file-too-large") {
+        setState({
+          phase: "error",
+          message: `File too large (max ${humanSize(limit.maxSize)})`
+        });
+      } else if (firstError?.code === "file-invalid-type") {
+        setState({
+          phase: "error",
+          message: `Format not supported (${formatExtensions(limit.mimes)} only)`
+        });
+      } else {
+        setState({ phase: "error", message: firstError?.message ?? "File rejected" });
+      }
+    }
+  });
+  return /* @__PURE__ */ jsxs18("div", { className: "space-y-2", children: [
+    label && /* @__PURE__ */ jsx23("div", { className: "text-sm text-[--text-secondary]", 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]"}`,
+        children: [
+          /* @__PURE__ */ jsx23("input", { ...getInputProps(), "aria-label": "file uploader" }),
+          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: [
+              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: [
+            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"
+              }
+            ),
+            /* @__PURE__ */ jsxs18("div", { className: "text-sm", children: [
+              "Uploading ",
+              state.file.name,
+              "\u2026"
+            ] }),
+            /* @__PURE__ */ jsx23(
+              "progress",
+              {
+                className: "w-full",
+                value: state.progress,
+                max: 100,
+                "aria-label": "upload progress",
+                "aria-valuetext": `${state.progress}%`
+              }
+            ),
+            /* @__PURE__ */ jsx23(
+              "button",
+              {
+                type: "button",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  state.abort.abort();
+                },
+                className: "text-xs mt-1 underline",
+                children: "Cancel"
+              }
+            )
+          ] }),
+          state.phase === "done" && /* @__PURE__ */ jsx23("div", { className: "text-sm text-green-500", children: "\u2713 Uploaded" }),
+          state.phase === "error" && /* @__PURE__ */ jsxs18(Fragment4, { children: [
+            /* @__PURE__ */ jsx23("div", { className: "text-sm text-red-500", children: state.message }),
+            /* @__PURE__ */ jsx23(
+              "button",
+              {
+                type: "button",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  setState({ phase: "idle" });
+                },
+                className: "text-xs mt-1 underline",
+                children: "Try again"
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    /* @__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"
+      }
+    )
+  ] });
+}
+
+// src/components/media/MediaGallery.tsx
+import { useState as useState8 } from "react";
+import {
+  DndContext,
+  closestCenter
+} from "@dnd-kit/core";
+import {
+  arrayMove,
+  SortableContext,
+  useSortable,
+  horizontalListSortingStrategy
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
+function SortableTile({ item, onRemove }) {
+  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: item.url });
+  const style = {
+    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: [
+    /* @__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(
+      "button",
+      {
+        type: "button",
+        "aria-label": "remove screenshot",
+        onClick: onRemove,
+        className: "absolute top-1 right-1 z-10 text-xs bg-black/50 rounded-full w-5 h-5 flex items-center justify-center text-white",
+        children: "\u2715"
+      }
+    )
+  ] });
+}
+function MediaGallery({ ownerType, ownerId, items, onChange, uploadFn, max = 10 }) {
+  const [adding, setAdding] = useState8(false);
+  function handleDragEnd(e) {
+    if (!e.over || e.active.id === e.over.id) return;
+    const oldIndex = items.findIndex((i) => i.url === e.active.id);
+    const newIndex = items.findIndex((i) => i.url === e.over.id);
+    onChange(arrayMove(items, oldIndex, newIndex));
+  }
+  return /* @__PURE__ */ jsxs19(
+    "div",
+    {
+      className: "space-y-2",
+      onDragOver: (e) => e.preventDefault(),
+      onDrop: (e) => e.preventDefault(),
+      children: [
+        /* @__PURE__ */ jsxs19("div", { className: "text-sm text-[--text-secondary]", children: [
+          "Screenshots (",
+          items.length,
+          "/",
+          max,
+          ")"
+        ] }),
+        /* @__PURE__ */ jsx24(DndContext, { collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsx24(SortableContext, { items: items.map((i) => i.url), strategy: horizontalListSortingStrategy, children: /* @__PURE__ */ jsxs19("div", { className: "flex flex-wrap gap-2", children: [
+          items.map((item, i) => /* @__PURE__ */ jsx24(
+            SortableTile,
+            {
+              item,
+              onRemove: () => onChange(items.filter((_, j) => j !== i))
+            },
+            item.url
+          )),
+          items.length < max && !adding && /* @__PURE__ */ jsx24(
+            "button",
+            {
+              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]",
+              children: "+"
+            }
+          )
+        ] }) }) }),
+        adding && /* @__PURE__ */ jsxs19("div", { className: "border border-[--border] rounded-[--radius-md] p-3", children: [
+          /* @__PURE__ */ jsx24(
+            MediaUploader,
+            {
+              kind: "screenshot",
+              ownerType,
+              ownerId,
+              uploadFn,
+              onChange: (url) => {
+                if (url) {
+                  const isDuplicate = items.some((i) => i.url === url);
+                  if (!isDuplicate) {
+                    onChange([...items, { type: "screenshot", url }]);
+                  }
+                }
+                setAdding(false);
+              },
+              label: "Add screenshot"
+            }
+          ),
+          /* @__PURE__ */ jsx24("button", { type: "button", onClick: () => setAdding(false), className: "text-xs mt-2 underline", children: "Cancel" })
+        ] })
+      ]
+    }
+  );
+}
+
+// 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`;
+}
+function MarketplaceProjectCard({
+  name,
+  tagline,
+  logoUrl,
+  bannerUrl,
+  rating,
+  userCount
+}) {
+  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(
+          "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)
+          }
+        ),
+        /* @__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)
+        ] }),
+        userCount !== void 0 && /* @__PURE__ */ jsxs20("span", { children: [
+          "\xB7 ",
+          formatUsers(userCount),
+          " users"
+        ] })
+      ] })
+    ] })
+  ] });
+}
 export {
   AddressDisplay,
   AlertBanner,
@@ -1416,6 +1809,10 @@ export {
   Input,
   JsonPanel,
   JsonToggleButton,
+  MEDIA_LIMITS,
+  MarketplaceProjectCard,
+  MediaGallery,
+  MediaUploader,
   MemoConditionsEditor,
   PageShell,
   SearchInput,
@@ -1427,5 +1824,8 @@ export {
   SkeletonText,
   StatusBadge,
   Textarea,
+  humanSize,
+  isMimeAllowed,
+  isSizeAllowed,
   tagColor
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unicitylabs/sphere-ui",
-  "version": "0.1.15",
+  "version": "0.1.17",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -51,6 +51,7 @@
     "lucide-react": ">=0.400.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-dropzone": "^14.4.1",
     "recharts": "^3.0.0"
   },
   "peerDependenciesMeta": {
@@ -74,6 +75,7 @@
     "lucide-react": "^0.400.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-dropzone": "^14.4.1",
     "recharts": "^3.8.1",
     "tsup": "^8.0.0",
     "typescript": "~5.9.0",