@muhgholy/next-drive 4.23.23 → 4.23.25

package/dist/client/index.cjs

@@ -4,6 +4,7 @@ var chunkHQTC3554_cjs = require('../chunk-HQTC3554.cjs');
 var chunkA65ZAA2Z_cjs = require('../chunk-A65ZAA2Z.cjs');
 var React3 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
+var tus = require('tus-js-client');
 var reactSlot = require('@radix-ui/react-slot');
 var classVarianceAuthority = require('class-variance-authority');
 var ProgressPrimitive = require('@radix-ui/react-progress');
@@ -37,6 +38,7 @@ function _interopNamespace(e) {
 }
 
 var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
+var tus__namespace = /*#__PURE__*/_interopNamespace(tus);
 var ProgressPrimitive__namespace = /*#__PURE__*/_interopNamespace(ProgressPrimitive);
 var SheetPrimitive__namespace = /*#__PURE__*/_interopNamespace(SheetPrimitive);
 var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(DropdownMenuPrimitive);
@@ -332,8 +334,6 @@ var useDrive = () => {
   if (!context) throw new Error("useDrive must be used within a DriveProvider");
   return context;
 };
-
-// src/client/upload.ts
 var MAX_CONCURRENT_UPLOADS = 2;
 var getChunkSize = (fileSize) => {
   if (fileSize < 50 * 1024 * 1024) return 2 * 1024 * 1024;
@@ -367,161 +367,92 @@ var uploadFile = (options) => {
     onComplete
   } = options;
   const id = options.id ?? generateId();
-  const endpoint = apiEndpoint.replace(/\/$/, "");
-  const uploadUrl = `${endpoint}?action=upload`;
-  const controller = new AbortController();
-  let activeXhr = null;
-  let driveId;
-  let completedItem;
-  let cancelled = false;
-  const totalBytes = file.size;
+  const endpoint = `${apiEndpoint.replace(/\/$/, "")}?action=upload`;
   const chunkSize = getChunkSize(file.size);
-  const totalChunks = Math.ceil(file.size / chunkSize);
+  const totalChunks = Math.max(1, Math.ceil(file.size / chunkSize));
   const log = (type, message) => onLog?.({ id, type, message, timestamp: Date.now() });
-  const emitProgress = (currentChunk, uploadedBytes) => {
-    const percent = totalBytes === 0 ? 100 : Math.min(100, Math.round(uploadedBytes / totalBytes * 100));
-    onProgress?.({ id, percent, uploadedBytes, totalBytes, currentChunk, totalChunks });
+  let settle = () => {
   };
-  const sendChunk = (chunkIndex, formData, chunkStart) => new Promise((resolve) => {
-    const xhr = new XMLHttpRequest();
-    activeXhr = xhr;
-    log("info", `Sending chunk to ${uploadUrl}`);
-    xhr.upload.onprogress = (e) => {
-      if (e.lengthComputable) emitProgress(chunkIndex, chunkStart + e.loaded);
-    };
-    xhr.onload = () => {
-      activeXhr = null;
-      const status = xhr.status;
-      const text = xhr.responseText;
-      if (status < 200 || status >= 300) {
-        log("error", `HTTP ${status}: ${xhr.statusText}`);
-        try {
-          const json = JSON.parse(text);
-          const msg = json.message || json.error?.message || `Status ${status}`;
-          log("error", `Server response: ${msg}`);
-          const canRetry = [408, 429, 502, 503, 504].includes(status);
-          if (canRetry) log("warning", `Error is retryable (status ${status})`);
-          resolve([false, msg, canRetry]);
-        } catch {
-          log("error", `Failed to parse error response: ${text.slice(0, 100)}`);
-          const isRetryable = status >= 500 || status === 429;
-          resolve([false, `Server error ${status}: ${text.slice(0, 100)}`, isRetryable]);
-        }
-        return;
+  const promise = new Promise((resolve) => {
+    settle = resolve;
+  });
+  let completedItem;
+  let cancelled = false;
+  const metadata = {
+    filename: file.name,
+    filetype: file.type || "application/octet-stream",
+    folderId: folderId || "root"
+  };
+  if (conflictAction) metadata.conflictAction = conflictAction;
+  const upload = new tus__namespace.Upload(file, {
+    endpoint,
+    chunkSize,
+    // ** Retry with backoff. On a dropped connection tus first re-checks the server offset (HEAD)
+    // ** and resumes from there — this is what prevents the "session expired" failures at ~100%.
+    retryDelays: [0, 1e3, 3e3, 5e3, 1e4],
+    removeFingerprintOnSuccess: true,
+    metadata,
+    headers: accountId ? { "x-drive-account": accountId } : {},
+    onBeforeRequest(req) {
+      if (withCredentials) {
+        const xhr = req.getUnderlyingObject();
+        if (xhr && "withCredentials" in xhr) xhr.withCredentials = true;
       }
-      try {
-        const data = JSON.parse(text);
-        if (data.status !== 200) {
-          log("error", `Upload API error: ${data.message || "Unknown error"}`);
-          resolve([false, data.message || "Upload failed", false]);
-          return;
-        }
-        log("success", `Chunk uploaded successfully`);
-        resolve([true, data.data, false]);
-      } catch {
-        log("error", `Failed to parse response: ${text.slice(0, 100)}`);
-        resolve([false, "Invalid server response", true]);
+    },
+    onShouldRetry(err) {
+      const status = err?.originalResponse?.getStatus?.() ?? 0;
+      if ([400, 401, 403, 413].includes(status)) {
+        log("error", `Non-retryable error (status ${status})`);
+        return false;
       }
-    };
-    xhr.onerror = () => {
-      activeXhr = null;
-      log("error", `Network/Fetch error: request failed`);
-      resolve([false, `Upload connection failed`, true]);
-    };
-    xhr.onabort = () => {
-      activeXhr = null;
-      resolve([false, "Cancelled", false]);
-    };
-    xhr.open("POST", uploadUrl);
-    if (accountId) xhr.setRequestHeader("x-drive-account", accountId);
-    xhr.withCredentials = withCredentials;
-    xhr.send(formData);
-  });
-  const run = async () => {
-    log("info", `Starting upload: ${file.name} (${file.size} bytes)`);
-    log("info", `File split into ${totalChunks} chunks of ${chunkSize} bytes each`);
-    emitProgress(0, 0);
-    try {
-      for (let i = 0; i < totalChunks; i++) {
-        if (controller.signal.aborted) throw new Error("Cancelled");
-        log("info", `Processing chunk ${i + 1}/${totalChunks}`);
-        const start = i * chunkSize;
-        const end = Math.min(start + chunkSize, file.size);
-        const chunk = file.slice(start, end);
-        const formData = new FormData();
-        formData.append("chunk", chunk);
-        formData.append("chunkIndex", String(i));
-        formData.append("totalChunks", String(totalChunks));
-        formData.append("fileName", file.name);
-        formData.append("fileSize", String(file.size));
-        formData.append("fileType", file.type);
-        formData.append("folderId", folderId || "root");
-        if (conflictAction) formData.append("conflictAction", conflictAction);
-        if (driveId) formData.append("driveId", driveId);
-        let attempts = 0;
-        let success = false;
-        while (!success && attempts < 3 && !controller.signal.aborted) {
-          const [ok, result, canRetry] = await sendChunk(i, formData, start);
-          if (ok) {
-            success = true;
-            emitProgress(i + 1, end);
-            if (result.type === "UPLOAD_STARTED" && result.driveId) {
-              driveId = result.driveId;
-              log("success", `Upload session started with ID: ${driveId}`);
-            } else if (result.type === "UPLOAD_COMPLETE") {
-              if (result.driveId) driveId = result.driveId;
-              log("success", `Upload completed successfully`);
-              completedItem = result.item;
-            }
-          } else {
-            if (result === "Cancelled") throw new Error("Cancelled");
-            if (!canRetry) {
-              log("error", `Non-retryable error: ${result}`);
-              throw new Error(result);
-            }
-            attempts++;
-            log("warning", `Retry attempt ${attempts}/3 after error`);
-            if (attempts === 3) {
-              log("error", `Max retry attempts reached: ${result}`);
-              throw new Error(result);
-            }
-            await new Promise((r) => setTimeout(r, 1e3 * attempts));
-          }
+      log("warning", `Upload interrupted (status ${status}), retrying`);
+      return true;
+    },
+    onProgress(bytesUploaded, bytesTotal) {
+      const percent = bytesTotal === 0 ? 100 : Math.min(100, Math.round(bytesUploaded / bytesTotal * 100));
+      onProgress?.({
+        id,
+        percent,
+        uploadedBytes: bytesUploaded,
+        totalBytes: bytesTotal,
+        currentChunk: Math.min(totalChunks, Math.floor(bytesUploaded / chunkSize)),
+        totalChunks
+      });
+    },
+    onAfterResponse(_req, res) {
+      const header = res.getHeader("X-Drive-Item");
+      if (header) {
+        try {
+          completedItem = JSON.parse(decodeURIComponent(header));
+        } catch {
         }
-        if (!success && controller.signal.aborted) throw new Error("Cancelled");
       }
-      log("success", `All ${totalChunks} chunks uploaded successfully`);
-      emitProgress(totalChunks, totalBytes);
+    },
+    onSuccess() {
+      log("success", "Upload completed successfully");
       if (completedItem !== void 0) onComplete?.(completedItem);
-      return { id, status: "complete", driveId: driveId ?? "", file: toDriveFile(completedItem), item: completedItem };
-    } catch (error) {
-      const errorMessage = error instanceof Error ? error.message : "Unknown error";
-      if (errorMessage === "Cancelled") {
-        log("warning", "Upload cancelled by user");
-        return { id, status: "cancelled", driveId: driveId ?? null };
-      }
-      log("error", `Upload failed: ${errorMessage}`);
-      return { id, status: "error", driveId: driveId ?? null, error: errorMessage };
+      settle({ id, status: "complete", driveId: completedItem?.id ?? "", file: toDriveFile(completedItem), item: completedItem });
+    },
+    onError(error) {
+      const message = error instanceof Error ? error.message : "Upload failed";
+      log("error", `Upload failed: ${message}`);
+      settle({ id, status: "error", driveId: null, error: message });
     }
-  };
+  });
   const cancel = () => {
     if (cancelled) return;
     cancelled = true;
-    controller.abort();
-    activeXhr?.abort();
-    if (driveId) {
-      fetch(`${endpoint}?action=cancel&id=${driveId}`, {
-        method: "POST",
-        credentials: withCredentials ? "include" : "same-origin"
-      }).catch(() => {
-      });
-    }
+    upload.abort(true).catch(() => {
+    });
+    settle({ id, status: "cancelled", driveId: null });
   };
   if (signal) {
     if (signal.aborted) cancel();
     else signal.addEventListener("abort", cancel, { once: true });
   }
-  return { id, promise: run(), cancel };
+  log("info", `Starting upload: ${file.name} (${file.size} bytes)`);
+  upload.start();
+  return { id, promise, cancel };
 };
 var uploadFiles = (files, options) => {
   const { concurrency = MAX_CONCURRENT_UPLOADS, onFileComplete, ...base } = options;
@@ -1556,9 +1487,16 @@ var DriveDndContext = React3.createContext({
 var useDriveDnd = () => React3.useContext(DriveDndContext);
 var DriveDndProvider = (props) => {
   const { children } = props;
-  const { items, setItems, sortBy, setSortBy, moveItem, callAPI, currentView } = useDrive();
+  const { items, setItems, sortBy, setSortBy, moveItem, callAPI, currentView, selectedFileIds, setSelectedFiles } = useDrive();
   const [dragOverFolderId, setDragOverFolderId] = React3.useState(null);
   const [draggingItemId, setDraggingItemId] = React3.useState(null);
+  const moveSelection = React3.useCallback(async (activeId, targetFolderId) => {
+    const ids = selectedFileIds.includes(activeId) && selectedFileIds.length > 1 ? selectedFileIds : [activeId];
+    if (ids.length === 1) return moveItem(ids[0], targetFolderId);
+    setItems((prev) => prev.filter((i) => !ids.includes(i.id)));
+    setSelectedFiles([]);
+    await callAPI("move", { method: "POST", body: JSON.stringify({ ids, targetFolderId }) });
+  }, [selectedFileIds, moveItem, setItems, setSelectedFiles, callAPI]);
   const sensors = core.useSensors(
     core.useSensor(core.PointerSensor, { activationConstraint: { distance: 8 } }),
     core.useSensor(core.KeyboardSensor, { coordinateGetter: sortable.sortableKeyboardCoordinates })
@@ -1593,12 +1531,12 @@ var DriveDndProvider = (props) => {
     if (overId.startsWith("path-")) {
       const pathId = overId.slice(5);
       const targetFolderId = pathId === "root" || pathId === "null" ? "root" : pathId;
-      await moveItem(active.id, targetFolderId);
+      await moveSelection(active.id, targetFolderId);
       return;
     }
     const overItem = items.find((i) => i.id === over.id);
     if (overItem?.information.type === "FOLDER") {
-      await moveItem(active.id, over.id);
+      await moveSelection(active.id, over.id);
       return;
     }
     const oldIndex = items.findIndex((i) => i.id === active.id);
@@ -1608,7 +1546,7 @@ var DriveDndProvider = (props) => {
     setItems(reordered);
     if (sortBy.field !== "order") setSortBy({ field: "order", order: 1 });
     await callAPI("reorder", { method: "POST", body: JSON.stringify({ ids: reordered.map((i) => i.id) }) });
-  }, [items, setItems, sortBy, setSortBy, moveItem, callAPI]);
+  }, [items, setItems, sortBy, setSortBy, moveSelection, callAPI]);
   const enableDnd = currentView === "BROWSE";
   return /* @__PURE__ */ jsxRuntime.jsx(DriveDndContext.Provider, { value: { dragOverFolderId, draggingItemId }, children: enableDnd ? /* @__PURE__ */ jsxRuntime.jsx(
     core.DndContext,
@@ -1974,6 +1912,49 @@ var DriveItemRename = (props) => {
     }
   ) });
 };
+var useMarquee = (onSelectIds) => {
+  const [box, setBox] = React3.useState(null);
+  const onMouseDown = (e) => {
+    if (e.button !== 0 || e.target.closest("[data-marquee-id]")) return;
+    const container = e.currentTarget;
+    const start = { x: e.clientX, y: e.clientY };
+    let moved = false;
+    const handleMove = (ev) => {
+      if (!moved && Math.abs(ev.clientX - start.x) < 4 && Math.abs(ev.clientY - start.y) < 4) return;
+      moved = true;
+      const left = Math.min(start.x, ev.clientX);
+      const top = Math.min(start.y, ev.clientY);
+      const right = Math.max(start.x, ev.clientX);
+      const bottom = Math.max(start.y, ev.clientY);
+      const cRect = container.getBoundingClientRect();
+      setBox({
+        left: left - cRect.left + container.scrollLeft,
+        top: top - cRect.top + container.scrollTop,
+        width: right - left,
+        height: bottom - top
+      });
+      const ids = [];
+      container.querySelectorAll("[data-marquee-id]").forEach((el) => {
+        const r = el.getBoundingClientRect();
+        if (r.left < right && r.right > left && r.top < bottom && r.bottom > top) ids.push(el.dataset.marqueeId);
+      });
+      onSelectIds(ids);
+    };
+    const handleUp = () => {
+      window.removeEventListener("mousemove", handleMove);
+      window.removeEventListener("mouseup", handleUp);
+      if (!moved) onSelectIds([]);
+      setBox(null);
+    };
+    window.addEventListener("mousemove", handleMove);
+    window.addEventListener("mouseup", handleUp);
+  };
+  const overlay = box ? React3__namespace.default.createElement("div", {
+    className: "nd:absolute nd:z-50 nd:rounded-sm nd:border nd:border-primary nd:bg-primary/10 nd:pointer-events-none",
+    style: { left: box.left, top: box.top, width: box.width, height: box.height }
+  }) : null;
+  return { onMouseDown, overlay };
+};
 var SortableItem = (props) => {
   const { id, children, disabled, isDragOverTarget } = props;
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = sortable.useSortable({ id, disabled });
@@ -1984,7 +1965,7 @@ var SortableItem = (props) => {
     zIndex: isDragging ? 50 : "auto",
     position: "relative"
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: setNodeRef, style, ...attributes, ...listeners, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: setNodeRef, "data-marquee-id": id, style, ...attributes, ...listeners, children });
 };
 var FileItem = (props) => {
   const { item, isSelected, isDragOver, onSelect, onDoubleClick, onRename, onDelete, onRestore } = props;
@@ -2071,6 +2052,8 @@ var DriveFileGrid = (props) => {
     sortBy,
     selectedFileIds,
     toggleSelected,
+    setSelectedFiles,
+    selectionMode,
     navigateToFolder,
     hasMore,
     loadMore,
@@ -2082,6 +2065,19 @@ var DriveFileGrid = (props) => {
     restoreItem
   } = useDrive();
   const { dragOverFolderId } = useDriveDnd();
+  const { onMouseDown: marqueeMouseDown, overlay: marqueeOverlay } = useMarquee((ids) => {
+    let files = items.filter((i) => ids.includes(i.id)).map((i) => ({
+      id: i.id,
+      file: {
+        name: i.name,
+        mime: i.information.type === "FILE" ? i.information.mime : "",
+        size: i.information.type === "FILE" ? i.information.sizeInBytes : 0
+      }
+    }));
+    if (selectionMode.type === "SINGLE") files = files.slice(0, 1);
+    else if (selectionMode.maxFile) files = files.slice(0, selectionMode.maxFile);
+    setSelectedFiles(files);
+  });
   const [dialogs, setDialogs] = React3__namespace.default.useState({ newFolder: false, rename: false, delete: false });
   const [itemToDelete, setItemToDelete] = React3__namespace.default.useState(null);
   const [itemToRename, setItemToRename] = React3__namespace.default.useState(null);
@@ -2204,7 +2200,8 @@ var DriveFileGrid = (props) => {
         indicatorClassName: "nd:bg-primary"
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkHQTC3554_cjs.cn("nd:flex-1 nd:overflow-y-auto nd:min-h-0 nd:p-2 nd:sm:p-3 nd:md:p-4", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkHQTC3554_cjs.cn("nd:flex-1 nd:overflow-y-auto nd:min-h-0 nd:relative nd:p-2 nd:sm:p-3 nd:md:p-4", className), onMouseDown: marqueeMouseDown, children: [
+      marqueeOverlay,
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nd:space-y-4 nd:sm:space-y-6", children: Object.entries(groupedItems).map(([groupName, groupItems]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         groupBy !== "NONE" && /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "nd:text-xs nd:font-semibold nd:text-muted-foreground nd:uppercase nd:tracking-wide nd:mb-2 nd:sm:mb-3 nd:px-1", children: [
           groupName,
@@ -3855,7 +3852,7 @@ var SortableItem2 = (props) => {
     zIndex: isDragging ? 50 : "auto",
     position: "relative"
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: setNodeRef, style, ...attributes, ...listeners, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: setNodeRef, "data-marquee-id": id, style, ...attributes, ...listeners, children });
 };
 var DriveExplorer = (props) => {
   const { onItemClick, onItemDoubleClick, mimeFilter, className, selectableFolders = false } = props;
@@ -3872,6 +3869,8 @@ var DriveExplorer = (props) => {
     setSortBy,
     selectedFileIds,
     toggleSelected,
+    setSelectedFiles,
+    selectionMode,
     navigateToFolder,
     hasMore,
     loadMore,
@@ -3901,6 +3900,13 @@ var DriveExplorer = (props) => {
   const handleDragStart = (event) => {
     setDraggingItemId(event.active.id);
   };
+  const moveSelection = async (activeId, targetFolderId) => {
+    const ids = selectedFileIds.includes(activeId) && selectedFileIds.length > 1 ? selectedFileIds : [activeId];
+    if (ids.length === 1) return moveItem(ids[0], targetFolderId);
+    setItems((prev) => prev.filter((i) => !ids.includes(i.id)));
+    setSelectedFiles([]);
+    await callAPI("move", { method: "POST", body: JSON.stringify({ ids, targetFolderId }) });
+  };
   const handleDragOver = (event) => {
     const { over } = event;
     if (!over) {
@@ -3924,13 +3930,13 @@ var DriveExplorer = (props) => {
     const overId = over.id;
     if (overId.startsWith("path-")) {
       const targetFolderId = overId.replace("path-", "");
-      await moveItem(active.id, targetFolderId === "root" ? "root" : targetFolderId);
+      await moveSelection(active.id, targetFolderId === "root" ? "root" : targetFolderId);
       return;
     }
     const overItem = items.find((i) => i.id === over.id);
     const activeItem = items.find((i) => i.id === active.id);
     if (overItem?.information.type === "FOLDER" && activeItem) {
-      await moveItem(active.id, over.id);
+      await moveSelection(active.id, over.id);
       return;
     }
     setItems((prevItems) => {
@@ -4034,6 +4040,19 @@ var DriveExplorer = (props) => {
     } else onItemDoubleClick?.(item);
   };
   const enableDrag = currentView === "BROWSE";
+  const { onMouseDown: marqueeMouseDown, overlay: marqueeOverlay } = useMarquee((ids) => {
+    let files = items.filter((i) => ids.includes(i.id)).map((i) => ({
+      id: i.id,
+      file: {
+        name: i.name,
+        mime: i.information.type === "FILE" ? i.information.mime : "",
+        size: i.information.type === "FILE" ? i.information.sizeInBytes : 0
+      }
+    }));
+    if (selectionMode.type === "SINGLE") files = files.slice(0, 1);
+    else if (selectionMode.maxFile) files = files.slice(0, selectionMode.maxFile);
+    setSelectedFiles(files);
+  });
   const stateContent = (() => {
     if (isLoading && items.length === 0) {
       return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nd:flex nd:items-center nd:justify-center nd:py-12 nd:flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "nd:size-6 nd:animate-spin nd:text-muted-foreground" }) });
@@ -4064,7 +4083,8 @@ var DriveExplorer = (props) => {
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nd:lg:hidden nd:px-3 nd:py-2 nd:border-b nd:bg-background/95 nd:dark:bg-background/80 nd:backdrop-blur-sm", children: /* @__PURE__ */ jsxRuntime.jsx(DrivePathBar, {}) }),
     stateContent || /* @__PURE__ */ jsxRuntime.jsxs(ContextMenu, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ContextMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkHQTC3554_cjs.cn("nd:flex-1 nd:overflow-y-auto nd:min-h-0 nd:container nd:mx-auto nd:p-2 nd:sm:p-3 nd:md:p-4", className), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ContextMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkHQTC3554_cjs.cn("nd:flex-1 nd:overflow-y-auto nd:min-h-0 nd:relative nd:container nd:mx-auto nd:p-2 nd:sm:p-3 nd:md:p-4", className), onMouseDown: marqueeMouseDown, children: [
+        marqueeOverlay,
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nd:space-y-4 nd:sm:space-y-6 nd:pb-8 nd:sm:pb-12", children: Object.entries(groupedItems).map(([groupName, groupItems]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nd:space-y-3", children: [
           groupBy !== "NONE" && /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "nd:text-sm nd:font-medium nd:text-muted-foreground nd:flex nd:items-center nd:gap-2", children: [
             groupName,