@unicitylabs/sphere-ui 0.1.14 → 0.1.16

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/analytics/index.d.ts

@@ -118,4 +118,25 @@ interface TopEntitiesTableProps {
  */
 declare function TopEntitiesTable({ entities, title, valueLabel, secondaryLabel, hideBars, emptyState, accentColor, className, }: TopEntitiesTableProps): react_jsx_runtime.JSX.Element;
 
-export { type DateRangeLabel, DateRangePicker, type DateRangePickerProps, type DateRangePreset, type DateRangeValue, KPICard, type KPICardProps, TimeseriesChart, type TimeseriesChartProps, type TimeseriesSeries, TopEntitiesTable, type TopEntitiesTableProps, type TopEntity, PRESET_LABELS as dateRangePresetLabels };
+interface AnalyticsSkeletonProps {
+    /** Rendered above the grid — usually the existing page header (title + DateRangePicker). */
+    header?: React.ReactNode;
+    /** Hide KPI rows — useful if the consumer already renders its own. */
+    showKpiRows?: boolean;
+    /** Hide chart blocks. */
+    showCharts?: boolean;
+    /** Hide the split bottom row (top quests + platform breakdown). */
+    showBottomTables?: boolean;
+    className?: string;
+}
+/**
+ * Skeleton state for the shared Analytics page layout. Mirrors the
+ * structure AdminProjectAnalyticsPage / ProjectAnalyticsPage render
+ * after data arrives: two rows of four KPI cards, two chart blocks,
+ * and a split row of two table cards. Consumers pass the same
+ * `header` they render in the real state so the date-range picker
+ * stays interactive while data loads.
+ */
+declare function AnalyticsSkeleton({ header, showKpiRows, showCharts, showBottomTables, className, }: AnalyticsSkeletonProps): react_jsx_runtime.JSX.Element;
+
+export { AnalyticsSkeleton, type AnalyticsSkeletonProps, type DateRangeLabel, DateRangePicker, type DateRangePickerProps, type DateRangePreset, type DateRangeValue, KPICard, type KPICardProps, TimeseriesChart, type TimeseriesChartProps, type TimeseriesSeries, TopEntitiesTable, type TopEntitiesTableProps, type TopEntity, PRESET_LABELS as dateRangePresetLabels };

package/dist/analytics/index.js

@@ -414,7 +414,132 @@ function TopEntitiesTable({
     }) })
   ] });
 }
+
+// src/components/Skeleton.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function Skeleton({
+  width = "100%",
+  height = "1rem",
+  radius = "var(--radius-md)",
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      className: `animate-skeleton-pulse ${className}`.trim(),
+      "aria-busy": "true",
+      style: {
+        width,
+        height,
+        borderRadius: radius,
+        background: "var(--bg-hover)",
+        border: "1px solid var(--border)"
+      }
+    }
+  );
+}
+
+// src/components/SkeletonText.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function SkeletonText({
+  lines = 1,
+  lineHeight = "0.875rem",
+  gap = "0.5rem",
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      className,
+      role: "status",
+      "aria-busy": "true",
+      style: { display: "flex", flexDirection: "column", gap },
+      children: Array.from({ length: lines }).map((_, i) => {
+        const isLast = i === lines - 1 && lines > 1;
+        return /* @__PURE__ */ jsx6(
+          Skeleton,
+          {
+            width: isLast ? "70%" : "100%",
+            height: lineHeight,
+            radius: "var(--radius-sm)"
+          },
+          i
+        );
+      })
+    }
+  );
+}
+
+// src/components/SkeletonCircle.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var NAMED_SIZES = {
+  sm: "1.5rem",
+  md: "2.5rem",
+  lg: "4rem"
+};
+function resolveSize(size) {
+  if (size === "sm" || size === "md" || size === "lg") return NAMED_SIZES[size];
+  return size;
+}
+function SkeletonCircle({ size = "md", className = "" }) {
+  const dim = resolveSize(size);
+  return /* @__PURE__ */ jsx7(Skeleton, { width: dim, height: dim, radius: "50%", className });
+}
+
+// src/analytics/AnalyticsSkeleton.tsx
+import { Fragment, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+function AnalyticsSkeleton({
+  header,
+  showKpiRows = true,
+  showCharts = true,
+  showBottomTables = true,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxs5("div", { className: `space-y-6 ${className}`, "aria-busy": "true", "aria-label": "Loading analytics", children: [
+    header,
+    showKpiRows && /* @__PURE__ */ jsxs5(Fragment, { children: [
+      /* @__PURE__ */ jsx8("div", { className: "grid grid-cols-2 lg:grid-cols-4 gap-4", children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsx8(KpiCardSkeleton, {}, i)) }),
+      /* @__PURE__ */ jsx8("div", { className: "grid grid-cols-2 lg:grid-cols-4 gap-4", children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsx8(KpiCardSkeleton, {}, i)) })
+    ] }),
+    showCharts && /* @__PURE__ */ jsxs5(Fragment, { children: [
+      /* @__PURE__ */ jsx8(ChartBlockSkeleton, {}),
+      /* @__PURE__ */ jsx8(ChartBlockSkeleton, {})
+    ] }),
+    showBottomTables && /* @__PURE__ */ jsxs5("div", { className: "grid lg:grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ jsx8(TableBlockSkeleton, { rows: 5 }),
+      /* @__PURE__ */ jsx8(TableBlockSkeleton, { rows: 5 })
+    ] })
+  ] });
+}
+function KpiCardSkeleton() {
+  return /* @__PURE__ */ jsxs5("div", { className: "rounded-xl border border-(--border,rgba(255,255,255,0.08)) bg-(--surface,rgba(255,255,255,0.02)) p-5", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2 mb-3", children: [
+      /* @__PURE__ */ jsx8(SkeletonCircle, { size: "sm" }),
+      /* @__PURE__ */ jsx8(Skeleton, { width: "60%", height: "10px" })
+    ] }),
+    /* @__PURE__ */ jsx8(Skeleton, { width: "40%", height: "28px" })
+  ] });
+}
+function ChartBlockSkeleton() {
+  return /* @__PURE__ */ jsxs5("div", { className: "rounded-xl border border-(--border,rgba(255,255,255,0.08)) bg-(--surface,rgba(255,255,255,0.02)) p-5", children: [
+    /* @__PURE__ */ jsx8(Skeleton, { width: "30%", height: "14px", className: "mb-4" }),
+    /* @__PURE__ */ jsx8(Skeleton, { width: "100%", height: "240px", radius: "8px" })
+  ] });
+}
+function TableBlockSkeleton({ rows }) {
+  return /* @__PURE__ */ jsxs5("div", { className: "rounded-xl border border-(--border,rgba(255,255,255,0.08)) bg-(--surface,rgba(255,255,255,0.02)) p-5", children: [
+    /* @__PURE__ */ jsx8(Skeleton, { width: "40%", height: "14px", className: "mb-4" }),
+    /* @__PURE__ */ jsx8("div", { className: "space-y-3", children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsxs5("div", { children: [
+      /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between mb-1.5", children: [
+        /* @__PURE__ */ jsx8("div", { style: { width: "55%" }, children: /* @__PURE__ */ jsx8(SkeletonText, { lines: 1 }) }),
+        /* @__PURE__ */ jsx8(Skeleton, { width: "40px", height: "12px" })
+      ] }),
+      /* @__PURE__ */ jsx8(Skeleton, { width: "100%", height: "6px", radius: "3px" })
+    ] }, i)) })
+  ] });
+}
 export {
+  AnalyticsSkeleton,
   DateRangePicker,
   KPICard,
   TimeseriesChart,

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.14",
+  "version": "0.1.16",
   "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",