@vryzel/file-next-ui 0.4.2 → 0.4.4

package/README.md

@@ -2,6 +2,8 @@
 
 Ready-made file explorer for Next.js. Import `FileExplorer`, pass server callbacks, done. Or compose the pieces.
 
+[Live demo](https://file-next-test-production.up.railway.app)
+
 ```bash
 pnpm add @vryzel/file-next-ui
 ```

package/dist/index.cjs

@@ -149,6 +149,62 @@ function useExplorerLabels() {
 function formatLabel(template, vars) {
   return template.replace(/\{(\w+)\}/g, (_, key) => String(vars[key] ?? ""));
 }
+function RenameInput({
+  name,
+  kind,
+  ariaLabel,
+  onCommit,
+  onCancel,
+  className
+}) {
+  const ref = react.useRef(null);
+  const done = react.useRef(false);
+  react.useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    el.focus();
+    const dot = name.lastIndexOf(".");
+    if (kind === "file" && dot > 0) el.setSelectionRange(0, dot);
+    else el.select();
+  }, [kind, name]);
+  const finish = (next) => {
+    if (done.current) return;
+    done.current = true;
+    const trimmed = next?.trim() ?? "";
+    if (!trimmed) {
+      onCancel();
+      return;
+    }
+    onCommit(trimmed);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      ref,
+      defaultValue: name,
+      "aria-label": ariaLabel ?? "Rename",
+      className: cn(
+        "h-7 min-w-0 flex-1 rounded-[6px] border border-ring bg-background px-1.5 text-sm outline-none",
+        className
+      ),
+      onClick: (event) => event.stopPropagation(),
+      onDoubleClick: (event) => event.stopPropagation(),
+      onPointerDown: (event) => event.stopPropagation(),
+      onKeyDown: (event) => {
+        event.stopPropagation();
+        if (event.key === "Enter") {
+          event.preventDefault();
+          finish(event.currentTarget.value);
+        }
+        if (event.key === "Escape") {
+          event.preventDefault();
+          finish(null);
+        }
+      },
+      onBlur: (event) => finish(event.currentTarget.value)
+    }
+  );
+}
 var LONG_PRESS_MS = 450;
 var MOVE_CANCEL_PX = 10;
 function useCoarsePointer() {
@@ -246,6 +302,9 @@ function ExplorerListView(props) {
     sortKey,
     sortDirection,
     onSortChange,
+    renamingId,
+    onRenameCommit,
+    onRenameCancel,
     className
   } = props;
   const labels = useExplorerLabels();
@@ -286,7 +345,10 @@ function ExplorerListView(props) {
         onDragStart,
         onDragEnd,
         onDrop,
-        onDragOverRow
+        onDragOverRow,
+        renaming: file.id === renamingId,
+        onRenameCommit,
+        onRenameCancel
       },
       file.id
     )) })
@@ -308,7 +370,10 @@ function ExplorerListRow({
   onDragStart,
   onDragEnd,
   onDrop,
-  onDragOverRow
+  onDragOverRow,
+  renaming,
+  onRenameCommit,
+  onRenameCancel
 }) {
   const labels = useExplorerLabels();
   const isFolder = file.kind === "folder";
@@ -319,17 +384,18 @@ function ExplorerListRow({
       role: "row",
       "data-file-id": file.id,
       "aria-selected": selected,
-      draggable: !coarse,
+      draggable: !coarse && !renaming,
       onDragStart: (e) => {
         e.dataTransfer.setData(DRAG_MIME, file.id);
         e.dataTransfer.effectAllowed = "move";
         onDragStart(file.id);
       },
       onDragEnd,
-      onPointerDown: pointer.onPointerDown,
-      onClick: pointer.onClick,
-      onDoubleClick: pointer.onDoubleClick,
+      onPointerDown: renaming ? void 0 : pointer.onPointerDown,
+      onClick: renaming ? void 0 : pointer.onClick,
+      onDoubleClick: renaming ? void 0 : pointer.onDoubleClick,
       onKeyDown: (e) => {
+        if (renaming) return;
         if (e.key === "Enter") {
           e.preventDefault();
           onActivate(file);
@@ -371,7 +437,16 @@ function ExplorerListRow({
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-[10px] uppercase tracking-[0.12em] text-muted-foreground tabular-nums", children: String(idx + 1).padStart(2, "0") }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: isFolder ? "text-primary" : "text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(FileIcon, { kind: file.kind, mimeType: file.mimeType, className: "size-5 text-current sm:size-4" }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("truncate", isFolder && "text-primary"), children: file.name }),
+          renaming && onRenameCommit && onRenameCancel ? /* @__PURE__ */ jsxRuntime.jsx(
+            RenameInput,
+            {
+              name: file.name,
+              kind: file.kind,
+              ariaLabel: labels.rename,
+              onCommit: onRenameCommit,
+              onCancel: onRenameCancel
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("truncate", isFolder && "text-primary"), children: file.name }),
           isProtected ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex shrink-0 items-center gap-0.5 rounded-[10px] bg-primary/10 px-1.5 text-[10px] text-primary", children: [
             /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Link2, { "aria-hidden": "true", className: "size-2.5" }),
             labels.inUse
@@ -448,6 +523,9 @@ function ExplorerGridView(props) {
     draggingIds,
     dropTargetId,
     onDragOverRow,
+    renamingId,
+    onRenameCommit,
+    onRenameCancel,
     className
   } = props;
   const labels = useExplorerLabels();
@@ -473,7 +551,10 @@ function ExplorerGridView(props) {
       onDragStart,
       onDragEnd,
       onDrop,
-      onDragOverRow
+      onDragOverRow,
+      renaming: file.id === renamingId,
+      onRenameCommit,
+      onRenameCancel
     },
     file.id
   )) });
@@ -497,9 +578,42 @@ function ExplorerGridItem({
   onDragStart,
   onDragEnd,
   onDrop,
-  onDragOverRow
+  onDragOverRow,
+  renaming,
+  onRenameCommit,
+  onRenameCancel
 }) {
+  const labels = useExplorerLabels();
   const pointer = useExplorerItemPointer({ file, coarse, onSelect, onActivate });
+  const bodyClass = cn(
+    "group relative flex w-full flex-col items-stretch gap-1 overflow-hidden rounded-[10px] border border-border bg-background p-2 text-left outline-none",
+    "touch-manipulation select-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring",
+    selected && "border-primary bg-muted",
+    dragging && "opacity-50",
+    dropTarget && "ring-2 ring-primary ring-inset"
+  );
+  const inner = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1 pr-8", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-[9px] uppercase tracking-[0.12em] text-muted-foreground tabular-nums", children: String(idx + 1).padStart(2, "0") }),
+      isProtected ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-0.5 rounded-[10px] bg-primary/10 px-1.5 py-0.5 text-[10px] text-primary", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Link2, { "aria-hidden": "true", className: "size-2.5" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: inUseLabel })
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("flex items-center justify-center py-1", file.kind === "folder" ? "text-primary" : "text-muted-foreground"), children: /* @__PURE__ */ jsxRuntime.jsx(FileIcon, { kind: file.kind, mimeType: file.mimeType, className: "size-12 text-current" }) }),
+    renaming && onRenameCommit && onRenameCancel ? /* @__PURE__ */ jsxRuntime.jsx(
+      RenameInput,
+      {
+        name: file.name,
+        kind: file.kind,
+        ariaLabel: labels.rename,
+        className: "text-[11px]",
+        onCommit: onRenameCommit,
+        onCancel: onRenameCancel
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("truncate text-[11px]", file.kind === "folder" && "text-primary"), children: file.name }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-[9px] uppercase tracking-[0.12em] text-muted-foreground", children: file.kind === "folder" ? folderLabel : formatSizeShort(file.size) })
+  ] });
   return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "relative", children: [
     coarse && onContextMenu ? /* @__PURE__ */ jsxRuntime.jsx(
       "button",
@@ -515,7 +629,7 @@ function ExplorerGridItem({
         children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontal, { "aria-hidden": "true", className: "size-5" })
       }
     ) : null,
-    /* @__PURE__ */ jsxRuntime.jsxs(
+    renaming ? /* @__PURE__ */ jsxRuntime.jsx("div", { "data-file-id": file.id, className: bodyClass, children: inner }) : /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
         type: "button",
@@ -557,25 +671,8 @@ function ExplorerGridItem({
           e.preventDefault();
           onDrop(file.id);
         },
-        className: cn(
-          "group relative flex w-full flex-col items-stretch gap-1 overflow-hidden rounded-[10px] border border-border bg-background p-2 text-left outline-none",
-          "touch-manipulation select-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring",
-          selected && "border-primary bg-muted",
-          dragging && "opacity-50",
-          dropTarget && "ring-2 ring-primary ring-inset"
-        ),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1 pr-8", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-[9px] uppercase tracking-[0.12em] text-muted-foreground tabular-nums", children: String(idx + 1).padStart(2, "0") }),
-            isProtected ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-0.5 rounded-[10px] bg-primary/10 px-1.5 py-0.5 text-[10px] text-primary", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Link2, { "aria-hidden": "true", className: "size-2.5" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: inUseLabel })
-            ] }) : null
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("flex items-center justify-center py-1", file.kind === "folder" ? "text-primary" : "text-muted-foreground"), children: /* @__PURE__ */ jsxRuntime.jsx(FileIcon, { kind: file.kind, mimeType: file.mimeType, className: "size-12 text-current" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("truncate text-[11px]", file.kind === "folder" && "text-primary"), children: file.name }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-[9px] uppercase tracking-[0.12em] text-muted-foreground", children: file.kind === "folder" ? folderLabel : formatSizeShort(file.size) })
-        ]
+        className: bodyClass,
+        children: inner
       }
     )
   ] });
@@ -744,6 +841,13 @@ function swallowClickThrough() {
     window.removeEventListener("pointerup", swallow, true);
   }, 400);
 }
+
+// src/share-url.ts
+function absoluteShareUrl(link) {
+  if (link.startsWith("http://") || link.startsWith("https://")) return link;
+  const origin = typeof window === "undefined" ? "" : window.location.origin;
+  return `${origin}${link.startsWith("/") ? link : `/${link}`}`;
+}
 function ExplorerContextMenu(props) {
   const {
     target,
@@ -896,7 +1000,7 @@ function ExplorerContextMenu(props) {
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { "aria-hidden": "true", className: "size-4" }),
           labels.paste
         ] }) : null,
-        actions.createShare ? /* @__PURE__ */ jsxRuntime.jsxs(
+        target.file.kind === "file" && actions.createShare ? /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
             type: "button",
@@ -905,7 +1009,7 @@ function ExplorerContextMenu(props) {
             onClick: () => {
               close();
               void actions.createShare({ id: target.file.id }).then(
-                (token) => navigator.clipboard.writeText(token)
+                (link) => navigator.clipboard.writeText(absoluteShareUrl(link))
               );
             },
             children: [
@@ -965,92 +1069,6 @@ function Overlay({
     }
   );
 }
-function CreateFolderDialog({
-  open,
-  onOpenChange,
-  onCreate,
-  title,
-  description,
-  confirmLabel,
-  initialName = ""
-}) {
-  const labels = useExplorerLabels();
-  const [name, setName] = react.useState(initialName);
-  const [saving, setSaving] = react.useState(false);
-  const [error, setError] = react.useState(null);
-  const inputRef = react.useRef(null);
-  react.useEffect(() => {
-    if (!open) {
-      setSaving(false);
-      setError(null);
-      return;
-    }
-    setName(initialName);
-    const id = window.setTimeout(() => {
-      inputRef.current?.focus();
-      inputRef.current?.select();
-    }, 0);
-    return () => window.clearTimeout(id);
-  }, [initialName, open]);
-  async function submit() {
-    const trimmed = name.trim();
-    if (!trimmed || saving) return;
-    setSaving(true);
-    setError(null);
-    try {
-      await onCreate(trimmed);
-      onOpenChange(false);
-    } catch (cause) {
-      const code = cause && typeof cause === "object" && "code" in cause ? String(cause.code) : "";
-      setError(code === "Conflict" ? labels.folderExists : labels.folderCreateFailed);
-    } finally {
-      setSaving(false);
-    }
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(Overlay, { open, onClose: () => onOpenChange(false), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-base font-semibold", children: title ?? labels.newFolder }),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: description ?? labels.folderNameHint }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "input",
-      {
-        ref: inputRef,
-        value: name,
-        onChange: (event) => setName(event.target.value),
-        onKeyDown: (event) => {
-          if (event.key === "Enter") {
-            event.preventDefault();
-            void submit();
-          }
-        },
-        placeholder: labels.folderName,
-        "aria-invalid": Boolean(error),
-        className: "mt-3 h-9 w-full rounded-[10px] border border-border bg-background px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
-      }
-    ),
-    error ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-destructive", children: error }) : null,
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex justify-end gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          className: "inline-flex h-8 items-center rounded-[10px] border border-border px-3 text-sm",
-          onClick: () => onOpenChange(false),
-          children: labels.cancel
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          disabled: !name.trim() || saving,
-          className: "inline-flex h-8 items-center rounded-[10px] bg-primary px-3 text-sm text-primary-foreground disabled:opacity-50",
-          onClick: () => void submit(),
-          children: confirmLabel ?? labels.createFolder
-        }
-      )
-    ] })
-  ] });
-}
 function ConfirmDeleteDialog({
   open,
   names,
@@ -1516,6 +1534,32 @@ function UploadQueueProvider({
 }
 var PAGE_SIZE = 50;
 var DEFAULT_PREFS = { view: "list", sortKey: "name", sortDir: "asc" };
+var DRAFT_FOLDER_ID = "__draft-folder__";
+function unusedFolderName(files, base) {
+  const taken = new Set(files.map((file) => file.name.toLowerCase()));
+  if (!taken.has(base.toLowerCase())) return base;
+  let n = 2;
+  while (taken.has(`${base} ${n}`.toLowerCase())) n += 1;
+  return `${base} ${n}`;
+}
+function draftFolder(name, tenantId, parentId) {
+  return {
+    id: DRAFT_FOLDER_ID,
+    tenantId,
+    parentId,
+    name,
+    path: name,
+    kind: "folder",
+    size: 0,
+    mimeType: "",
+    s3Key: "",
+    ownerId: "",
+    metadata: {},
+    createdAt: /* @__PURE__ */ new Date(0),
+    updatedAt: /* @__PURE__ */ new Date(0),
+    deletedAt: null
+  };
+}
 function reviveFile(node) {
   const asDate = (value) => value instanceof Date ? value : new Date(value);
   return {
@@ -1639,7 +1683,7 @@ function FileExplorerInner(props) {
   const [prefsReady, setPrefsReady] = react.useState(!persistViewKey);
   const skipPrefsWrite = react.useRef(!persistViewKey);
   const [menu, setMenu] = react.useState(null);
-  const [folderOpen, setFolderOpen] = react.useState(false);
+  const [draftFolderName, setDraftFolderName] = react.useState(null);
   const [renameTarget, setRenameTarget] = react.useState(null);
   const [deleteTargets, setDeleteTargets] = react.useState([]);
   const [purgeTargets, setPurgeTargets] = react.useState([]);
@@ -1821,6 +1865,7 @@ function FileExplorerInner(props) {
   }, [refreshKey]);
   const handleActivate = react.useCallback(
     (file) => {
+      if (file.id === DRAFT_FOLDER_ID) return;
       if (file.kind === "folder") {
         onOpenFolder?.(file);
         return;
@@ -1832,6 +1877,7 @@ function FileExplorerInner(props) {
     [onActivate, onDownload, onOpenFolder, onPreview]
   );
   const handleContextMenu = react.useCallback((file, event) => {
+    if (file.id === DRAFT_FOLDER_ID) return;
     setMenu({ kind: "item", file, x: event.clientX, y: event.clientY });
   }, []);
   const clearSelection = react.useCallback(() => {
@@ -1843,6 +1889,7 @@ function FileExplorerInner(props) {
   }, [clearSelection, parentId, trashOpen]);
   const handleSelect = react.useCallback(
     (file, event) => {
+      if (file.id === DRAFT_FOLDER_ID) return;
       const id = file.id;
       if (event.shiftKey && anchorId.current) {
         const from = sortedFiles.findIndex((item) => item.id === anchorId.current);
@@ -1981,6 +2028,37 @@ function FileExplorerInner(props) {
       trashOpen
     ]
   );
+  const commitRename = (name) => {
+    if (draftFolderName != null) {
+      setDraftFolderName(null);
+      void actions.createFolder?.({ name, parentId }).then(() => reload());
+      return;
+    }
+    if (!renameTarget) return;
+    const target = renameTarget;
+    setRenameTarget(null);
+    if (name === target.name) return;
+    void actions.renameFile(target.id, name).then(() => reload());
+  };
+  const cancelRename = () => {
+    setDraftFolderName(null);
+    setRenameTarget(null);
+  };
+  const startCreateFolder = () => {
+    if (!actions.createFolder || trashOpen) return;
+    setMenu(null);
+    setRenameTarget(null);
+    setQuery("");
+    setDraftFolderName(unusedFolderName(pageItems, labels.newFolder));
+  };
+  const displayFiles = react.useMemo(() => {
+    if (draftFolderName == null) return sortedFiles;
+    return [
+      draftFolder(draftFolderName, tenantId, parentId),
+      ...sortedFiles
+    ];
+  }, [draftFolderName, parentId, sortedFiles, tenantId]);
+  const renamingId = draftFolderName != null ? DRAFT_FOLDER_ID : renameTarget?.id ?? null;
   const openUpload = () => uploadInputRef.current?.click();
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -2029,7 +2107,7 @@ function FileExplorerInner(props) {
               view: explorer.view,
               onViewChange: explorer.setView,
               onUpload: requestUpload && !trashOpen ? openUpload : void 0,
-              onNewFolder: actions.createFolder && !trashOpen ? () => setFolderOpen(true) : void 0,
+              onNewFolder: actions.createFolder && !trashOpen ? startCreateFolder : void 0,
               query,
               onQueryChange: searchFiles ? setQuery : void 0,
               trashOpen,
@@ -2044,7 +2122,7 @@ function FileExplorerInner(props) {
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 overflow-y-auto", children: (overlayLoading || pageStatus === "loading") && sortedFiles.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-4 py-12 text-center font-mono text-[10px] uppercase tracking-[0.12em] text-muted-foreground", children: labels.loading }) : overlayError || pageStatus === "error" && pageError ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b border-destructive/30 bg-destructive/5 px-4 py-3 text-sm text-destructive", children: (overlayError ?? pageError)?.message ?? labels.folderCreateFailed }) : sortedFiles.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-full flex-col justify-center px-4 py-16 text-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 overflow-y-auto", children: (overlayLoading || pageStatus === "loading") && displayFiles.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-4 py-12 text-center font-mono text-[10px] uppercase tracking-[0.12em] text-muted-foreground", children: labels.loading }) : overlayError || pageStatus === "error" && pageError ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b border-destructive/30 bg-destructive/5 px-4 py-3 text-sm text-destructive", children: (overlayError ?? pageError)?.message ?? labels.folderCreateFailed }) : displayFiles.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-full flex-col justify-center px-4 py-16 text-center", children: [
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-mono text-[10px] uppercase tracking-[0.12em] text-muted-foreground", children: trashOpen ? labels.emptyTrash : query.trim() ? labels.noMatches : labels.emptyFolder }),
           trashOpen ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: labels.trashRetention }) : !query.trim() ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: labels.dropHint }) : null
         ] }) : explorer.view === "list" ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -2057,7 +2135,7 @@ function FileExplorerInner(props) {
             children: /* @__PURE__ */ jsxRuntime.jsx(
               ExplorerListView,
               {
-                files: sortedFiles,
+                files: displayFiles,
                 protectedIds: protectedSet,
                 selectedIds,
                 onSelect: handleSelect,
@@ -2072,7 +2150,10 @@ function FileExplorerInner(props) {
                 onDragOverRow: explorer.setDropTarget,
                 sortKey,
                 sortDirection: sortDir,
-                onSortChange: handleSortChange
+                onSortChange: handleSortChange,
+                renamingId,
+                onRenameCommit: commitRename,
+                onRenameCancel: cancelRename
               }
             )
           }
@@ -2086,7 +2167,7 @@ function FileExplorerInner(props) {
             children: /* @__PURE__ */ jsxRuntime.jsx(
               ExplorerGridView,
               {
-                files: sortedFiles,
+                files: displayFiles,
                 protectedIds: protectedSet,
                 selectedIds,
                 onSelect: handleSelect,
@@ -2098,7 +2179,10 @@ function FileExplorerInner(props) {
                 draggingId: explorer.draggingId,
                 draggingIds,
                 dropTargetId: explorer.dropTargetId,
-                onDragOverRow: explorer.setDropTarget
+                onDragOverRow: explorer.setDropTarget,
+                renamingId,
+                onRenameCommit: commitRename,
+                onRenameCancel: cancelRename
               }
             )
           }
@@ -2162,7 +2246,7 @@ function FileExplorerInner(props) {
             onRequestPurge: actions.purgeNode ? (file) => setPurgeTargets([file]) : void 0,
             onCopy: (file) => copyToClipboard([file]),
             onPaste: clipboard.length > 0 && !trashOpen ? (folder) => void pasteClipboard(folder ? folder.id : parentId) : void 0,
-            onNewFolder: actions.createFolder ? () => setFolderOpen(true) : void 0,
+            onNewFolder: actions.createFolder ? startCreateFolder : void 0,
             onUpload: requestUpload ? openUpload : void 0
           }
         ),
@@ -2180,7 +2264,11 @@ function FileExplorerInner(props) {
                 if (file.kind !== "file") continue;
                 tokens.push(await actions.createShare({ id: file.id }));
               }
-              if (tokens.length > 0) await navigator.clipboard.writeText(tokens.join("\n"));
+              if (tokens.length > 0) {
+                await navigator.clipboard.writeText(
+                  tokens.map(absoluteShareUrl).join("\n")
+                );
+              }
             } : void 0,
             onDelete: () => setDeleteTargets(selectedFiles),
             onRestore: actions.restoreNode ? async () => {
@@ -2200,36 +2288,6 @@ function FileExplorerInner(props) {
             onClear: () => setClipboard([])
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          CreateFolderDialog,
-          {
-            open: folderOpen,
-            onOpenChange: setFolderOpen,
-            onCreate: async (name) => {
-              await actions.createFolder?.({ name, parentId });
-              await reload();
-            }
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          CreateFolderDialog,
-          {
-            open: Boolean(renameTarget),
-            onOpenChange: (open) => {
-              if (!open) setRenameTarget(null);
-            },
-            title: labels.rename,
-            description: labels.renameHint,
-            confirmLabel: labels.rename,
-            initialName: renameTarget?.name ?? "",
-            onCreate: async (name) => {
-              if (!renameTarget) return;
-              await actions.renameFile(renameTarget.id, name);
-              setRenameTarget(null);
-              await reload();
-            }
-          }
-        ),
         /* @__PURE__ */ jsxRuntime.jsx(
           ConfirmDeleteDialog,
           {
@@ -2384,6 +2442,92 @@ function FilePreviewDialog({
     ) })
   ] });
 }
+function CreateFolderDialog({
+  open,
+  onOpenChange,
+  onCreate,
+  title,
+  description,
+  confirmLabel,
+  initialName = ""
+}) {
+  const labels = useExplorerLabels();
+  const [name, setName] = react.useState(initialName);
+  const [saving, setSaving] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const inputRef = react.useRef(null);
+  react.useEffect(() => {
+    if (!open) {
+      setSaving(false);
+      setError(null);
+      return;
+    }
+    setName(initialName);
+    const id = window.setTimeout(() => {
+      inputRef.current?.focus();
+      inputRef.current?.select();
+    }, 0);
+    return () => window.clearTimeout(id);
+  }, [initialName, open]);
+  async function submit() {
+    const trimmed = name.trim();
+    if (!trimmed || saving) return;
+    setSaving(true);
+    setError(null);
+    try {
+      await onCreate(trimmed);
+      onOpenChange(false);
+    } catch (cause) {
+      const code = cause && typeof cause === "object" && "code" in cause ? String(cause.code) : "";
+      setError(code === "Conflict" ? labels.folderExists : labels.folderCreateFailed);
+    } finally {
+      setSaving(false);
+    }
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(Overlay, { open, onClose: () => onOpenChange(false), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-base font-semibold", children: title ?? labels.newFolder }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: description ?? labels.folderNameHint }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        ref: inputRef,
+        value: name,
+        onChange: (event) => setName(event.target.value),
+        onKeyDown: (event) => {
+          if (event.key === "Enter") {
+            event.preventDefault();
+            void submit();
+          }
+        },
+        placeholder: labels.folderName,
+        "aria-invalid": Boolean(error),
+        className: "mt-3 h-9 w-full rounded-[10px] border border-border bg-background px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      }
+    ),
+    error ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-destructive", children: error }) : null,
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex justify-end gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: "inline-flex h-8 items-center rounded-[10px] border border-border px-3 text-sm",
+          onClick: () => onOpenChange(false),
+          children: labels.cancel
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          disabled: !name.trim() || saving,
+          className: "inline-flex h-8 items-center rounded-[10px] bg-primary px-3 text-sm text-primary-foreground disabled:opacity-50",
+          onClick: () => void submit(),
+          children: confirmLabel ?? labels.createFolder
+        }
+      )
+    ] })
+  ] });
+}
 
 exports.Breadcrumbs = Breadcrumbs;
 exports.ConfirmDeleteDialog = ConfirmDeleteDialog;