@unicitylabs/sphere-ui 0.1.26 → 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

@@ -1422,6 +1422,48 @@ async function readImageSize(file) {
     return null;
   }
 }
+async function fitImage(file, limit) {
+  if (file.type === "image/svg+xml") return file;
+  if (typeof createImageBitmap !== "function" || typeof document === "undefined") return file;
+  try {
+    const bitmap = await createImageBitmap(file);
+    const sw = bitmap.width;
+    const sh = bitmap.height;
+    let cropW = sw, cropH = sh, cropX = 0, cropY = 0;
+    if (limit.aspectRatio) {
+      if (sw / sh > limit.aspectRatio) {
+        cropW = Math.round(sh * limit.aspectRatio);
+        cropX = Math.round((sw - cropW) / 2);
+      } else if (sw / sh < limit.aspectRatio) {
+        cropH = Math.round(sw / limit.aspectRatio);
+        cropY = Math.round((sh - cropH) / 2);
+      }
+    }
+    const scale = Math.min(1, (limit.maxWidth ?? cropW) / cropW, (limit.maxHeight ?? cropH) / cropH);
+    const outW = Math.max(1, Math.round(cropW * scale));
+    const outH = Math.max(1, Math.round(cropH * scale));
+    if (cropX === 0 && cropY === 0 && cropW === sw && cropH === sh && scale === 1) {
+      bitmap.close?.();
+      return file;
+    }
+    const canvas = document.createElement("canvas");
+    canvas.width = outW;
+    canvas.height = outH;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      bitmap.close?.();
+      return file;
+    }
+    ctx.drawImage(bitmap, cropX, cropY, cropW, cropH, 0, 0, outW, outH);
+    bitmap.close?.();
+    const mime = file.type === "image/jpeg" || file.type === "image/webp" ? file.type : "image/png";
+    const blob = await new Promise((resolve) => canvas.toBlob(resolve, mime, 0.92));
+    if (!blob) return file;
+    return new File([blob], file.name, { type: mime });
+  } catch {
+    return file;
+  }
+}
 function MediaUploader({
   kind,
   ownerType,
@@ -1436,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;
@@ -1464,8 +1507,10 @@ function MediaUploader({
         });
         return;
       }
-      if (file.type !== "image/svg+xml") {
-        const size = await readImageSize(file);
+      setUrlInput("");
+      const fitted = await fitImage(file, limit);
+      if (fitted.type !== "image/svg+xml") {
+        const size = await readImageSize(fitted);
         if (size) {
           const { width, height } = size;
           if (limit.maxWidth && width > limit.maxWidth || limit.maxHeight && height > limit.maxHeight) {
@@ -1490,18 +1535,18 @@ function MediaUploader({
       }
       if (deferUpload) {
         if (previewRef.current) URL.revokeObjectURL(previewRef.current);
-        previewRef.current = URL.createObjectURL(file);
-        setState({ phase: "pending", file });
-        onFileSelected?.(file);
+        previewRef.current = URL.createObjectURL(fitted);
+        setState({ phase: "pending", file: fitted });
+        onFileSelected?.(fitted);
         onChange(null);
         return;
       }
       const abort = new AbortController();
-      setState({ phase: "uploading", file, progress: 0, abort });
+      setState({ phase: "uploading", file: fitted, progress: 0, abort });
       if (previewRef.current) URL.revokeObjectURL(previewRef.current);
-      previewRef.current = URL.createObjectURL(file);
+      previewRef.current = URL.createObjectURL(fitted);
       try {
-        const result = await uploadFn(file, {
+        const result = await uploadFn(fitted, {
           kind,
           ownerType,
           ownerId,
@@ -1566,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(),
@@ -1674,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
+      }
+    )
   ] });
 }
 
@@ -1741,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",
     {
@@ -1768,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 },
@@ -1778,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",
@@ -1813,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.26",
+  "version": "0.1.28",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",