@unicitylabs/sphere-ui 0.1.23 → 0.1.25

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

@@ -1411,6 +1411,17 @@ import { Fragment as Fragment4, jsx as jsx23, jsxs as jsxs18 } from "react/jsx-r
 function formatExtensions(mimes) {
   return mimes.map((m) => m.split("/")[1].toUpperCase()).join(", ");
 }
+async function readImageSize(file) {
+  if (typeof createImageBitmap !== "function") return null;
+  try {
+    const bitmap = await createImageBitmap(file);
+    const size = { width: bitmap.width, height: bitmap.height };
+    bitmap.close?.();
+    return size;
+  } catch {
+    return null;
+  }
+}
 function MediaUploader({
   kind,
   ownerType,
@@ -1453,6 +1464,30 @@ function MediaUploader({
         });
         return;
       }
+      if (file.type !== "image/svg+xml") {
+        const size = await readImageSize(file);
+        if (size) {
+          const { width, height } = size;
+          if (limit.maxWidth && width > limit.maxWidth || limit.maxHeight && height > limit.maxHeight) {
+            setState({
+              phase: "error",
+              message: `Image too large (max ${limit.maxWidth}\xD7${limit.maxHeight}px \u2014 this is ${width}\xD7${height})`
+            });
+            return;
+          }
+          if (limit.aspectRatio) {
+            const ratio = width / height;
+            const tolerance = limit.aspectTolerance ?? 0;
+            if (Math.abs(ratio - limit.aspectRatio) > limit.aspectRatio * tolerance) {
+              setState({
+                phase: "error",
+                message: `Wrong aspect ratio (need ~${limit.aspectRatio}:1 \u2014 this is ${ratio.toFixed(2)}:1)`
+              });
+              return;
+            }
+          }
+        }
+      }
       if (deferUpload) {
         if (previewRef.current) URL.revokeObjectURL(previewRef.current);
         previewRef.current = URL.createObjectURL(file);
@@ -1656,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
@@ -1690,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",
     {
@@ -1707,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,
@@ -1721,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",
@@ -1740,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.23",
+  "version": "0.1.25",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",