@unicitylabs/sphere-ui 0.1.24 → 0.1.26

package/dist/index.d.ts

@@ -334,8 +334,18 @@ interface MediaGalleryProps {
     onChange: (items: MediaItem[]) => void;
     uploadFn: MediaUploadFn;
     max?: number;
+    /**
+     * Defer mode: do NOT upload on select. Each chosen screenshot is kept locally
+     * (a File + blob preview) and the current File list is emitted via
+     * onFilesChange, so the parent can upload them AFTER the owner entity exists
+     * (e.g. project create, before there is an ownerId — mirrors MediaUploader's
+     * deferUpload for logo/banner). In this mode `items`/`onChange` are unused for
+     * screenshots; the parent owns the upload + persistence.
+     */
+    deferUpload?: boolean;
+    onFilesChange?: (files: File[]) => void;
 }
-declare function MediaGallery({ ownerType, ownerId, items, onChange, uploadFn, max }: MediaGalleryProps): react.JSX.Element;
+declare function MediaGallery({ ownerType, ownerId, items, onChange, uploadFn, max, deferUpload, onFilesChange }: MediaGalleryProps): react.JSX.Element;
 
 interface MarketplaceProjectCardProps {
     name: string;

package/dist/index.js

@@ -1691,7 +1691,7 @@ function MediaUploader({
 }
 
 // src/components/media/MediaGallery.tsx
-import { useState as useState8 } from "react";
+import { useEffect as useEffect6, useState as useState8 } from "react";
 import {
   DndContext,
   closestCenter
@@ -1725,14 +1725,34 @@ function SortableTile({ item, onRemove }) {
     )
   ] });
 }
-function MediaGallery({ ownerType, ownerId, items, onChange, uploadFn, max = 10 }) {
+function MediaGallery({ ownerType, ownerId, items, onChange, uploadFn, max = 10, deferUpload, onFilesChange }) {
   const [adding, setAdding] = useState8(false);
+  const [pending, setPending] = useState8([]);
+  useEffect6(
+    () => () => {
+      pending.forEach((p) => URL.revokeObjectURL(p.preview));
+    },
+    []
+    // eslint-disable-line react-hooks/exhaustive-deps
+  );
+  const emitPending = (next) => {
+    setPending(next);
+    onFilesChange?.(next.map((p) => p.file));
+  };
   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));
+    if (deferUpload) {
+      const oldIndex = pending.findIndex((p) => p.preview === e.active.id);
+      const newIndex = pending.findIndex((p) => p.preview === e.over.id);
+      emitPending(arrayMove(pending, oldIndex, newIndex));
+    } else {
+      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));
+    }
   }
+  const count = deferUpload ? pending.length : items.length;
+  const tileIds = deferUpload ? pending.map((p) => p.preview) : items.map((i) => i.url);
   return /* @__PURE__ */ jsxs19(
     "div",
     {
@@ -1742,13 +1762,23 @@ function MediaGallery({ ownerType, ownerId, items, onChange, uploadFn, max = 10
       children: [
         /* @__PURE__ */ jsxs19("div", { className: "text-sm text-neutral-700 dark:text-white/70", children: [
           "Screenshots (",
-          items.length,
+          count,
           "/",
           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(
+        /* @__PURE__ */ jsx24(DndContext, { collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsx24(SortableContext, { items: tileIds, strategy: horizontalListSortingStrategy, children: /* @__PURE__ */ jsxs19("div", { className: "flex flex-wrap gap-2", children: [
+          deferUpload ? pending.map((p, i) => /* @__PURE__ */ jsx24(
+            SortableTile,
+            {
+              item: { type: "screenshot", url: p.preview },
+              onRemove: () => {
+                URL.revokeObjectURL(p.preview);
+                emitPending(pending.filter((_, j) => j !== i));
+              }
+            },
+            p.preview
+          )) : items.map((item, i) => /* @__PURE__ */ jsx24(
             SortableTile,
             {
               item,
@@ -1756,7 +1786,7 @@ function MediaGallery({ ownerType, ownerId, items, onChange, uploadFn, max = 10
             },
             item.url
           )),
-          items.length < max && !adding && /* @__PURE__ */ jsx24(
+          count < max && !adding && /* @__PURE__ */ jsx24(
             "button",
             {
               type: "button",
@@ -1775,7 +1805,16 @@ function MediaGallery({ ownerType, ownerId, items, onChange, uploadFn, max = 10
               ownerType,
               ownerId,
               uploadFn,
-              onChange: (url) => {
+              deferUpload,
+              onFileSelected: deferUpload ? (file) => {
+                if (file) {
+                  const preview = URL.createObjectURL(file);
+                  emitPending([...pending, { file, preview }]);
+                }
+                setAdding(false);
+              } : void 0,
+              onChange: deferUpload ? () => {
+              } : (url) => {
                 if (url) {
                   const isDuplicate = items.some((i) => i.url === url);
                   if (!isDuplicate) {

package/package.json

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