@unicitylabs/sphere-ui 0.1.27 → 0.1.28

package/dist/index.d.ts

@@ -314,9 +314,6 @@ interface MediaUploaderProps {
      * 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;

package/dist/index.js

@@ -1478,6 +1478,7 @@ function MediaUploader({
   const limit = MEDIA_LIMITS[kind];
   const [state, setState] = useState7({ phase: "idle" });
   const [urlInput, setUrlInput] = useState7(value && !value.startsWith("blob:") ? value : "");
+  const [source, setSource] = useState7("upload");
   const previewRef = useRef3(null);
   const fileInputRef = useRef3(null);
   const isPlaceholder = value?.includes("placehold.co") ?? false;
@@ -1506,6 +1507,7 @@ function MediaUploader({
         });
         return;
       }
+      setUrlInput("");
       const fitted = await fitImage(file, limit);
       if (fitted.type !== "image/svg+xml") {
         const size = await readImageSize(fitted);
@@ -1609,9 +1611,26 @@ function MediaUploader({
     setUrlInput("");
     if (deferUpload) onFileSelected?.(null);
   };
+  const commitUrl = () => {
+    const url = urlInput.trim();
+    onChange(url || null);
+    if (url) {
+      if (previewRef.current) {
+        URL.revokeObjectURL(previewRef.current);
+        previewRef.current = null;
+      }
+      setState({ phase: "idle" });
+      if (deferUpload) onFileSelected?.(null);
+    }
+  };
+  const tabClass = (active) => `px-3 py-1 rounded-md transition-colors ${active ? "bg-white dark:bg-white/10 text-neutral-900 dark:text-white shadow-sm" : "text-neutral-500 dark:text-white/45 hover:text-neutral-700 dark:hover:text-white/70"}`;
   return /* @__PURE__ */ jsxs18("div", { className: "space-y-2", children: [
     label && /* @__PURE__ */ jsx23("div", { className: "text-sm text-neutral-700 dark:text-white/70", children: label }),
-    /* @__PURE__ */ jsxs18(
+    /* @__PURE__ */ jsxs18("div", { className: "inline-flex gap-0.5 rounded-lg p-0.5 bg-neutral-100 dark:bg-white/5 text-xs w-fit", children: [
+      /* @__PURE__ */ jsx23("button", { type: "button", onClick: () => setSource("upload"), className: tabClass(source === "upload"), children: "Upload" }),
+      /* @__PURE__ */ jsx23("button", { type: "button", onClick: () => setSource("url"), className: tabClass(source === "url"), children: "URL" })
+    ] }),
+    source === "upload" && /* @__PURE__ */ jsxs18(
       "div",
       {
         ...getRootProps(),
@@ -1717,19 +1736,16 @@ function MediaUploader({
         ]
       }
     ),
-    !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: () => onChange(urlInput.trim() || null)
-        }
-      )
-    ] })
+    source === "url" && /* @__PURE__ */ jsx23(
+      Input,
+      {
+        type: "url",
+        placeholder: "https://...",
+        value: urlInput,
+        onChange: (e) => setUrlInput(e.target.value),
+        onBlur: commitUrl
+      }
+    )
   ] });
 }
 
@@ -1784,18 +1800,18 @@ function MediaGallery({ ownerType, ownerId, items, onChange, uploadFn, max = 10,
   };
   function handleDragEnd(e) {
     if (!e.over || e.active.id === e.over.id) return;
-    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 {
+    if (items.some((i) => i.url === e.active.id)) {
       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 (newIndex >= 0) onChange(arrayMove(items, oldIndex, newIndex));
+    } else if (deferUpload) {
+      const oldIndex = pending.findIndex((p) => p.preview === e.active.id);
+      const newIndex = pending.findIndex((p) => p.preview === e.over.id);
+      if (newIndex >= 0) emitPending(arrayMove(pending, oldIndex, newIndex));
     }
   }
-  const count = deferUpload ? pending.length : items.length;
-  const tileIds = deferUpload ? pending.map((p) => p.preview) : items.map((i) => i.url);
+  const count = items.length + (deferUpload ? pending.length : 0);
+  const tileIds = [...items.map((i) => i.url), ...deferUpload ? pending.map((p) => p.preview) : []];
   return /* @__PURE__ */ jsxs19(
     "div",
     {
@@ -1811,7 +1827,15 @@ function MediaGallery({ ownerType, ownerId, items, onChange, uploadFn, max = 10,
           ")"
         ] }),
         /* @__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(
+          items.map((item, i) => /* @__PURE__ */ jsx24(
+            SortableTile,
+            {
+              item,
+              onRemove: () => onChange(items.filter((_, j) => j !== i))
+            },
+            item.url
+          )),
+          deferUpload && pending.map((p, i) => /* @__PURE__ */ jsx24(
             SortableTile,
             {
               item: { type: "screenshot", url: p.preview },
@@ -1821,13 +1845,6 @@ function MediaGallery({ ownerType, ownerId, items, onChange, uploadFn, max = 10,
               }
             },
             p.preview
-          )) : items.map((item, i) => /* @__PURE__ */ jsx24(
-            SortableTile,
-            {
-              item,
-              onRemove: () => onChange(items.filter((_, j) => j !== i))
-            },
-            item.url
           )),
           count < max && !adding && /* @__PURE__ */ jsx24(
             "button",
@@ -1856,13 +1873,9 @@ function MediaGallery({ ownerType, ownerId, items, onChange, uploadFn, max = 10,
                 }
                 setAdding(false);
               } : void 0,
-              onChange: deferUpload ? () => {
-              } : (url) => {
-                if (url) {
-                  const isDuplicate = items.some((i) => i.url === url);
-                  if (!isDuplicate) {
-                    onChange([...items, { type: "screenshot", url }]);
-                  }
+              onChange: (url) => {
+                if (url && !items.some((i) => i.url === url)) {
+                  onChange([...items, { type: "screenshot", url }]);
                 }
                 setAdding(false);
               },

package/package.json

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