@bendyline/docblocks-react 2.2.2 → 2.3.0

package/dist/index.js

@@ -64,7 +64,8 @@ import {
   fsErrorFromUnknown,
   getFileSystemProviderV2,
   moveFileSystemEntry,
-  parseWorkspacePath
+  parseWorkspacePath,
+  workspacePathDirname
 } from "@bendyline/docblocks/filesystem";
 var DIRECTORY_NOT_FOUND_RETRY_DELAYS_MS = Object.freeze([40, 120]);
 function normalisePath(path) {
@@ -97,7 +98,12 @@ async function readProviderDirectory(provider, path) {
     const providerV2 = getFileSystemProviderV2(provider);
     if (!providerV2) return provider.readDirectory(path);
     const entries = await providerV2.readDirectory(canonical);
-    return entries.map((entry) => ({ kind: entry.kind, name: entry.name, path: entry.path }));
+    return entries.map((entry) => ({
+      kind: entry.kind,
+      name: entry.name,
+      path: entry.path,
+      ...entry.kind === "file" ? { lastModified: entry.lastModified } : {}
+    }));
   };
   for (let attempt = 0; ; attempt += 1) {
     try {
@@ -131,7 +137,7 @@ function readIssue(caught, directoryPath) {
     retryable: error.retryable || error.code === "not-found"
   });
 }
-function useFileTree(provider) {
+function useFileTree(provider, metadataRefreshKey, metadataRefreshPath) {
   const [entries, setEntries] = useState([]);
   const [expanded, setExpanded] = useState(/* @__PURE__ */ new Set());
   const [selectedPath, setSelectedPath] = useState(null);
@@ -147,7 +153,7 @@ function useFileTree(provider) {
   const reportRootIssue = useCallback((caught) => {
     setRootIssue(readIssue(caught, ""));
   }, []);
-  const loadRoot = useCallback(async () => {
+  const loadRoot = useCallback(async (showLoading = true) => {
     const sourceProvider = providerRef.current;
     if (!sourceProvider) {
       setEntries([]);
@@ -157,7 +163,7 @@ function useFileTree(provider) {
     const requestId = ++directoryRequestSequenceRef.current;
     directoryRequestsRef.current.set("", requestId);
     const isCurrent = () => providerRef.current === sourceProvider && directoryRequestsRef.current.get("") === requestId;
-    setLoading(true);
+    if (showLoading) setLoading(true);
     try {
       const root = await readProviderDirectory(sourceProvider, "");
       if (!isCurrent()) return;
@@ -263,37 +269,76 @@ function useFileTree(provider) {
   );
   const refreshRef = useRef(refresh);
   refreshRef.current = refresh;
+  const refreshDirectory = useCallback(
+    async (directoryPath) => {
+      if (directoryPath === "") await loadRoot(false);
+      else await loadChildren(directoryPath);
+    },
+    [loadChildren, loadRoot]
+  );
+  const previousMetadataRefreshKeyRef = useRef(metadataRefreshKey);
+  useEffect(() => {
+    if (Object.is(previousMetadataRefreshKeyRef.current, metadataRefreshKey)) return;
+    previousMetadataRefreshKeyRef.current = metadataRefreshKey;
+    if (!provider) return;
+    if (getFileSystemProviderV2(provider)?.capabilities.watch) return;
+    const directoryPath = metadataRefreshPath ? workspacePathDirname(parseWorkspacePath(metadataRefreshPath)) : "";
+    void refreshDirectory(directoryPath).catch(reportRootIssue);
+  }, [metadataRefreshKey, metadataRefreshPath, provider, refreshDirectory, reportRootIssue]);
   useEffect(() => {
     if (!provider) return;
     const providerV2 = getFileSystemProviderV2(provider);
     if (!providerV2?.capabilities.watch) return;
     let disposed = false;
     let refreshing = false;
-    let refreshAgain = false;
-    const requestRefresh = () => {
+    let fullRefreshRequested = false;
+    const directoriesToRefresh = /* @__PURE__ */ new Set();
+    const drainRefreshes = () => {
       if (disposed) return;
-      if (refreshing) {
-        refreshAgain = true;
-        return;
-      }
+      if (refreshing) return;
       refreshing = true;
       void (async () => {
         try {
-          do {
-            refreshAgain = false;
-            await refreshRef.current();
-          } while (refreshAgain && !disposed);
+          while (!disposed && (fullRefreshRequested || directoriesToRefresh.size > 0)) {
+            if (fullRefreshRequested) {
+              fullRefreshRequested = false;
+              directoriesToRefresh.clear();
+              await refreshRef.current();
+              continue;
+            }
+            const pending = [...directoriesToRefresh];
+            directoriesToRefresh.clear();
+            for (const directoryPath of pending) {
+              await refreshDirectory(directoryPath);
+            }
+          }
         } catch (caught) {
           reportRootIssue(caught);
         } finally {
           refreshing = false;
-          if (refreshAgain && !disposed) requestRefresh();
+          if (!disposed && (fullRefreshRequested || directoriesToRefresh.size > 0)) {
+            drainRefreshes();
+          }
         }
       })();
     };
+    const requestRefresh = () => {
+      if (disposed) return;
+      fullRefreshRequested = true;
+      directoriesToRefresh.clear();
+      drainRefreshes();
+    };
+    const requestMetadataRefresh = (path) => {
+      if (disposed || fullRefreshRequested) return;
+      directoriesToRefresh.add(workspacePathDirname(parseWorkspacePath(path)));
+      drainRefreshes();
+    };
     const subscription = providerV2.watch(
       (event) => {
-        if (event.type === "modified") return;
+        if (event.type === "modified") {
+          requestMetadataRefresh(event.path);
+          return;
+        }
         requestRefresh();
       },
       {
@@ -311,7 +356,7 @@ function useFileTree(provider) {
       disposed = true;
       void subscription.dispose();
     };
-  }, [provider, reportRootIssue]);
+  }, [provider, refreshDirectory, reportRootIssue]);
   useEffect(() => {
     if (!provider) return;
     const providerV2 = getFileSystemProviderV2(provider);
@@ -448,6 +493,12 @@ function NewFileIcon() {
 function NewFolderIcon() {
   return /* @__PURE__ */ jsx(FontAwesomeIcon, { icon: "fa-solid fa-folder-plus" });
 }
+function SortByNameIcon() {
+  return /* @__PURE__ */ jsx(FontAwesomeIcon, { icon: "fa-solid fa-arrow-down-a-z" });
+}
+function SortByLastModifiedIcon() {
+  return /* @__PURE__ */ jsx(FontAwesomeIcon, { icon: "fa-solid fa-clock" });
+}
 function FolderIcon() {
   return /* @__PURE__ */ jsx(FontAwesomeIcon, { icon: "fa-solid fa-folder" });
 }
@@ -481,8 +532,116 @@ function SplitViewIcon() {
   );
 }
 
+// src/FileExplorer/LastModifiedTime.tsx
+import { useSyncExternalStore } from "react";
+
+// src/FileExplorer/last-modified.ts
+var MINUTE_MS = 6e4;
+var HOUR_MS = 60 * MINUTE_MS;
+var DAY_MS = 24 * HOUR_MS;
+var shortDateFormatter = new Intl.DateTimeFormat(void 0, {
+  month: "short",
+  day: "numeric"
+});
+var shortDateWithYearFormatter = new Intl.DateTimeFormat(void 0, {
+  year: "numeric",
+  month: "short",
+  day: "numeric"
+});
+var fullDateTimeFormatter = new Intl.DateTimeFormat(void 0, {
+  dateStyle: "medium",
+  timeStyle: "short"
+});
+function plural(value, unit) {
+  return `${value} ${unit}${value === 1 ? "" : "s"} ago`;
+}
+function formatFriendlyLastModified(value, now = Date.now()) {
+  if (!value) return null;
+  const timestamp = Date.parse(value);
+  if (!Number.isFinite(timestamp)) return null;
+  const date = new Date(timestamp);
+  const elapsed = now - timestamp;
+  const title = `Last modified ${fullDateTimeFormatter.format(date)}`;
+  if (elapsed >= -MINUTE_MS && elapsed < MINUTE_MS) {
+    return { shortLabel: "Now", accessibleLabel: "Last modified just now", title };
+  }
+  if (elapsed >= 0 && elapsed < HOUR_MS) {
+    const minutes = Math.max(1, Math.floor(elapsed / MINUTE_MS));
+    return {
+      shortLabel: `${minutes}m ago`,
+      accessibleLabel: `Last modified ${plural(minutes, "minute")}`,
+      title
+    };
+  }
+  if (elapsed >= 0 && elapsed < DAY_MS) {
+    const hours = Math.max(1, Math.floor(elapsed / HOUR_MS));
+    return {
+      shortLabel: `${hours}h ago`,
+      accessibleLabel: `Last modified ${plural(hours, "hour")}`,
+      title
+    };
+  }
+  if (elapsed >= DAY_MS && elapsed < 2 * DAY_MS) {
+    return { shortLabel: "Yesterday", accessibleLabel: "Last modified yesterday", title };
+  }
+  if (elapsed >= 2 * DAY_MS && elapsed < 7 * DAY_MS) {
+    const days = Math.floor(elapsed / DAY_MS);
+    return {
+      shortLabel: `${days}d ago`,
+      accessibleLabel: `Last modified ${plural(days, "day")}`,
+      title
+    };
+  }
+  const currentYear = new Date(now).getFullYear();
+  const shortLabel = date.getFullYear() === currentYear ? shortDateFormatter.format(date) : shortDateWithYearFormatter.format(date);
+  return { shortLabel, accessibleLabel: title, title };
+}
+
+// src/FileExplorer/LastModifiedTime.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var CLOCK_INTERVAL_MS = 6e4;
+var clockNow = Date.now();
+var clockTimer = null;
+var clockListeners = /* @__PURE__ */ new Set();
+function publishClockTick() {
+  clockNow = Date.now();
+  for (const listener of clockListeners) listener();
+}
+function subscribeToClock(listener) {
+  clockListeners.add(listener);
+  if (clockListeners.size === 1) {
+    clockNow = Date.now();
+    clockTimer = globalThis.setInterval(publishClockTick, CLOCK_INTERVAL_MS);
+  }
+  return () => {
+    clockListeners.delete(listener);
+    if (clockListeners.size === 0 && clockTimer !== null) {
+      globalThis.clearInterval(clockTimer);
+      clockTimer = null;
+    }
+  };
+}
+function getClockSnapshot() {
+  return clockNow;
+}
+function LastModifiedTime({ value }) {
+  const now = useSyncExternalStore(subscribeToClock, getClockSnapshot, getClockSnapshot);
+  const lastModified = formatFriendlyLastModified(value, now);
+  if (!lastModified) return null;
+  return /* @__PURE__ */ jsx2(
+    "time",
+    {
+      className: "db-tree-last-modified",
+      dateTime: value,
+      title: lastModified.title,
+      "aria-label": lastModified.accessibleLabel,
+      children: lastModified.shortLabel
+    }
+  );
+}
+
 // src/FileExplorer/FileTreeNode.tsx
-import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function defaultConfirmDelete(message) {
   if (typeof window === "undefined") return false;
   return window.confirm(message);
@@ -769,8 +928,8 @@ function FileTreeNode({
           }
         },
         children: [
-          (isDir || depth === 0) && /* @__PURE__ */ jsx2("span", { className: "db-tree-icon", children: isDir ? icon : null }),
-          renaming ? /* @__PURE__ */ jsx2(
+          (isDir || depth === 0) && /* @__PURE__ */ jsx3("span", { className: "db-tree-icon", children: isDir ? icon : null }),
+          renaming ? /* @__PURE__ */ jsx3(
             "input",
             {
               ref: inputRef,
@@ -788,9 +947,10 @@ function FileTreeNode({
               onClick: (e) => e.stopPropagation()
             }
           ) : /* @__PURE__ */ jsxs2(Fragment, { children: [
-            /* @__PURE__ */ jsx2("span", { className: "db-tree-label", children: entry.name.endsWith(".md") ? entry.name.slice(0, -3) : entry.name }),
-            badge && /* @__PURE__ */ jsx2("span", { className: `db-git-badge db-git-badge--${badge.kind}`, "aria-hidden": "true", children: badge.glyph }),
-            /* @__PURE__ */ jsx2(
+            /* @__PURE__ */ jsx3("span", { className: "db-tree-label", children: entry.name.endsWith(".md") ? entry.name.slice(0, -3) : entry.name }),
+            badge && /* @__PURE__ */ jsx3("span", { className: `db-git-badge db-git-badge--${badge.kind}`, "aria-hidden": "true", children: badge.glyph }),
+            entry.kind === "file" && entry.lastModified && /* @__PURE__ */ jsx3(LastModifiedTime, { value: entry.lastModified }),
+            /* @__PURE__ */ jsx3(
               "button",
               {
                 type: "button",
@@ -803,14 +963,14 @@ function FileTreeNode({
                 "aria-keyshortcuts": "Shift+F10",
                 title: "More actions (Shift+F10)",
                 tabIndex: -1,
-                children: /* @__PURE__ */ jsx2(MoreIcon, {})
+                children: /* @__PURE__ */ jsx3(MoreIcon, {})
               }
             )
           ] })
         ]
       }
     ),
-    actionError && /* @__PURE__ */ jsx2("div", { className: "db-tree-error", role: "alert", children: actionError }),
+    actionError && /* @__PURE__ */ jsx3("div", { className: "db-tree-error", role: "alert", children: actionError }),
     showContext && createPortal(
       /* @__PURE__ */ jsxs2(
         "div",
@@ -822,7 +982,7 @@ function FileTreeNode({
           "aria-label": `Actions for ${entry.name}`,
           onKeyDown: handleMenuKeyDown,
           children: [
-            /* @__PURE__ */ jsx2(
+            /* @__PURE__ */ jsx3(
               "button",
               {
                 type: "button",
@@ -833,7 +993,7 @@ function FileTreeNode({
                 children: "Rename"
               }
             ),
-            !isDir && onTogglePin && /* @__PURE__ */ jsx2(
+            !isDir && onTogglePin && /* @__PURE__ */ jsx3(
               "button",
               {
                 type: "button",
@@ -845,8 +1005,8 @@ function FileTreeNode({
               }
             ),
             gitActions && (gitActions.viewChanges || gitActions.fileHistory) && /* @__PURE__ */ jsxs2(Fragment, { children: [
-              /* @__PURE__ */ jsx2("div", { className: "db-tree-context-divider", role: "separator" }),
-              gitActions.viewChanges && /* @__PURE__ */ jsx2(
+              /* @__PURE__ */ jsx3("div", { className: "db-tree-context-divider", role: "separator" }),
+              gitActions.viewChanges && /* @__PURE__ */ jsx3(
                 "button",
                 {
                   type: "button",
@@ -860,7 +1020,7 @@ function FileTreeNode({
                   children: "View changes"
                 }
               ),
-              gitActions.fileHistory && /* @__PURE__ */ jsx2(
+              gitActions.fileHistory && /* @__PURE__ */ jsx3(
                 "button",
                 {
                   type: "button",
@@ -874,7 +1034,7 @@ function FileTreeNode({
                   children: "File history\u2026"
                 }
               ),
-              gitActions.openOnRemote && /* @__PURE__ */ jsx2(
+              gitActions.openOnRemote && /* @__PURE__ */ jsx3(
                 "button",
                 {
                   type: "button",
@@ -888,9 +1048,9 @@ function FileTreeNode({
                   children: "Open on remote"
                 }
               ),
-              /* @__PURE__ */ jsx2("div", { className: "db-tree-context-divider", role: "separator" })
+              /* @__PURE__ */ jsx3("div", { className: "db-tree-context-divider", role: "separator" })
             ] }),
-            /* @__PURE__ */ jsx2(
+            /* @__PURE__ */ jsx3(
               "button",
               {
                 type: "button",
@@ -906,7 +1066,7 @@ function FileTreeNode({
       ),
       document.body
     ),
-    isDir && expanded && renderChildren && /* @__PURE__ */ jsx2("div", { className: "db-tree-children", role: "group", children: renderChildren(entry.path) }),
+    isDir && expanded && renderChildren && /* @__PURE__ */ jsx3("div", { className: "db-tree-children", role: "group", children: renderChildren(entry.path) }),
     isDir && expanded && childError
   ] });
 }
@@ -1096,7 +1256,7 @@ function movePinnedDocumentsToWorkspace(documents, sourceWorkspaceId, destinatio
 }
 
 // src/FileExplorer/PinnedDocuments.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function displayName(document2) {
   const name = pinnedDocumentName(document2);
   return name.endsWith(".md") ? name.slice(0, -3) : name;
@@ -1240,7 +1400,7 @@ function PinnedDocumentRow({
     }));
   }, [showContext]);
   return /* @__PURE__ */ jsxs3("div", { className: `db-pinned-document-row${selected ? " db-pinned-document-row--selected" : ""}`, children: [
-    /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx4(
       "button",
       {
         ref: selectRef,
@@ -1259,12 +1419,12 @@ function PinnedDocumentRow({
           }
         },
         children: /* @__PURE__ */ jsxs3("span", { className: "db-pinned-document-heading", children: [
-          /* @__PURE__ */ jsx3("span", { className: "db-pinned-document-name", children: displayName(pinnedDocument) }),
-          missing && /* @__PURE__ */ jsx3("span", { className: "db-pinned-document-missing", children: "(missing)" })
+          /* @__PURE__ */ jsx4("span", { className: "db-pinned-document-name", children: displayName(pinnedDocument) }),
+          missing && /* @__PURE__ */ jsx4("span", { className: "db-pinned-document-missing", children: "(missing)" })
         ] })
       }
     ),
-    hasActions && /* @__PURE__ */ jsx3(
+    hasActions && /* @__PURE__ */ jsx4(
       "button",
       {
         type: "button",
@@ -1275,10 +1435,10 @@ function PinnedDocumentRow({
         title: "More actions",
         onClick: handleMoreClick,
         onContextMenu: handleMoreClick,
-        children: /* @__PURE__ */ jsx3(MoreIcon, {})
+        children: /* @__PURE__ */ jsx4(MoreIcon, {})
       }
     ),
-    actionError && /* @__PURE__ */ jsx3("div", { className: "db-tree-error db-pinned-document-error", role: "alert", children: actionError }),
+    actionError && /* @__PURE__ */ jsx4("div", { className: "db-tree-error db-pinned-document-error", role: "alert", children: actionError }),
     showContext && createPortal2(
       /* @__PURE__ */ jsxs3(
         "div",
@@ -1290,7 +1450,7 @@ function PinnedDocumentRow({
           "aria-label": `Actions for ${name}`,
           onKeyDown: handleMenuKeyDown,
           children: [
-            onRename && /* @__PURE__ */ jsx3(
+            onRename && /* @__PURE__ */ jsx4(
               "button",
               {
                 type: "button",
@@ -1301,7 +1461,7 @@ function PinnedDocumentRow({
                 children: "Rename"
               }
             ),
-            onUnpin && /* @__PURE__ */ jsx3(
+            onUnpin && /* @__PURE__ */ jsx4(
               "button",
               {
                 type: "button",
@@ -1312,8 +1472,8 @@ function PinnedDocumentRow({
                 children: "Unpin"
               }
             ),
-            onDelete && (onRename || onUnpin) && /* @__PURE__ */ jsx3("div", { className: "db-tree-context-divider", role: "separator" }),
-            onDelete && /* @__PURE__ */ jsx3(
+            onDelete && (onRename || onUnpin) && /* @__PURE__ */ jsx4("div", { className: "db-tree-context-divider", role: "separator" }),
+            onDelete && /* @__PURE__ */ jsx4(
               "button",
               {
                 type: "button",
@@ -1344,10 +1504,10 @@ function PinnedDocuments({
   if (documents.length === 0) return null;
   return /* @__PURE__ */ jsxs3("section", { className: "db-pinned-documents", "aria-labelledby": titleId, children: [
     /* @__PURE__ */ jsxs3("h2", { id: titleId, className: "db-explorer-title db-pinned-documents-title", children: [
-      /* @__PURE__ */ jsx3(PinIcon, {}),
-      /* @__PURE__ */ jsx3("span", { children: "Pinned" })
+      /* @__PURE__ */ jsx4(PinIcon, {}),
+      /* @__PURE__ */ jsx4("span", { children: "Pinned" })
     ] }),
-    /* @__PURE__ */ jsx3("div", { className: "db-pinned-document-list", children: documents.map((document2) => /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx4("div", { className: "db-pinned-document-list", children: documents.map((document2) => /* @__PURE__ */ jsx4(
       PinnedDocumentRow,
       {
         document: document2,
@@ -1372,8 +1532,34 @@ function filterVisibleFileEntries(entries) {
   return entries.filter((entry) => !isHiddenFileEntry(entry));
 }
 
+// src/FileExplorer/entry-sort.ts
+function compareText(left, right) {
+  return left < right ? -1 : left > right ? 1 : 0;
+}
+function modifiedTime(entry) {
+  if (entry.kind !== "file" || !entry.lastModified) return null;
+  const timestamp = Date.parse(entry.lastModified);
+  return Number.isNaN(timestamp) ? null : timestamp;
+}
+function sortFileEntries(entries, mode) {
+  return [...entries].sort((left, right) => {
+    if (left.kind !== right.kind) return left.kind === "directory" ? -1 : 1;
+    if (left.kind === "directory" || right.kind === "directory" || mode === "name") {
+      return compareText(left.name, right.name);
+    }
+    const leftTime = modifiedTime(left);
+    const rightTime = modifiedTime(right);
+    if (leftTime !== null && rightTime !== null && leftTime !== rightTime) {
+      return rightTime - leftTime;
+    }
+    if (leftTime === null && rightTime !== null) return 1;
+    if (leftTime !== null && rightTime === null) return -1;
+    return compareText(left.name, right.name);
+  });
+}
+
 // src/FileExplorer/FileExplorer.tsx
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var SUPPORTED_EXTENSIONS = /* @__PURE__ */ new Set([".txt", ".md", ".docx", ".pdf", ".dbk", ".zip"]);
 var INTERNAL_DRAG_TYPE = "application/x-docblocks-entry";
 var NEW_ITEM_ERROR_ID = "db-new-item-error";
@@ -1412,7 +1598,10 @@ function isInternalDrag(dataTransfer) {
 }
 function FileExplorer({
   provider,
+  metadataRefreshKey,
   activeFilePath,
+  sortMode,
+  onSortModeChange,
   activeWorkspaceId,
   pinnedDocuments = [],
   pinnedPaths = [],
@@ -1430,7 +1619,7 @@ function FileExplorer({
   onMoveToWorkspace,
   className
 }) {
-  const tree = useFileTree(provider);
+  const tree = useFileTree(provider, metadataRefreshKey, activeFilePath);
   const { childEntries, childIssues } = tree;
   const { reveal } = tree;
   const git = useGitContext();
@@ -1439,6 +1628,15 @@ function FileExplorer({
     [pinnedPaths]
   );
   const [newItemName, setNewItemName] = useState4("");
+  const [uncontrolledSortMode, setUncontrolledSortMode] = useState4("name");
+  const selectedSortMode = sortMode ?? uncontrolledSortMode;
+  const selectSortMode = useCallback4(
+    (mode) => {
+      if (sortMode === void 0) setUncontrolledSortMode(mode);
+      onSortModeChange?.(mode);
+    },
+    [onSortModeChange, sortMode]
+  );
   const [newItemType, setNewItemType] = useState4(null);
   const [newItemCreationPending, setNewItemCreationPending] = useState4(false);
   const newItemCreationPendingRef = useRef4(false);
@@ -1549,6 +1747,7 @@ function FileExplorer({
         const filename = name.endsWith(".md") ? name : `${name}.md`;
         createdPath = `${prefix}${filename}`;
         await tree.createFile(createdPath, "");
+        handleSelect(createdPath);
       } else if (itemType === "directory") {
         await tree.createDirectory(createdPath);
       }
@@ -1562,7 +1761,7 @@ function FileExplorer({
     setNewItemName("");
     setNewItemType(null);
     onTreeChange?.({ type: "create", path: createdPath });
-  }, [newItemName, newItemType, tree, onTreeChange]);
+  }, [newItemName, newItemType, tree, handleSelect, onTreeChange]);
   const handleMoveToWorkspace = useCallback4(async () => {
     if (!onMoveToWorkspace || !moveDestinationId || movingToWorkspace) return;
     setMovingToWorkspace(true);
@@ -1700,14 +1899,18 @@ function FileExplorer({
     },
     [git]
   );
+  const orderedVisibleEntries = useCallback4(
+    (entries) => sortFileEntries(filterVisibleFileEntries(entries), selectedSortMode),
+    [selectedSortMode]
+  );
   const visibleRows = useMemo(
     () => flattenVisibleRows({
-      roots: tree.entries,
-      childrenOf: (dirPath) => getEquivalentPathValue(childEntries, dirPath) ?? [],
+      roots: orderedVisibleEntries(tree.entries),
+      childrenOf: (dirPath) => orderedVisibleEntries(getEquivalentPathValue(childEntries, dirPath) ?? []),
       isExpanded: (dirPath) => hasEquivalentPath2(tree.expanded, dirPath),
-      isVisible: (entry) => !isHiddenFileEntry(entry)
+      isVisible: () => true
     }),
-    [tree.entries, tree.expanded, childEntries]
+    [tree.entries, tree.expanded, childEntries, orderedVisibleEntries]
   );
   const selectedRowPath = useMemo(() => {
     if (!tree.selectedPath) return null;
@@ -1751,10 +1954,10 @@ function FileExplorer({
   );
   const renderEntries = useCallback4(
     (entries, depth) => {
-      const visible = filterVisibleFileEntries(entries);
+      const visible = orderedVisibleEntries(entries);
       return visible.map((entry, index) => {
         const childIssue = entry.kind === "directory" ? getEquivalentPathValue(childIssues, entry.path) : void 0;
-        return /* @__PURE__ */ jsx4(
+        return /* @__PURE__ */ jsx5(
           FileTreeNode,
           {
             entry,
@@ -1792,9 +1995,9 @@ function FileExplorer({
                 role: "alert",
                 "data-directory-path": childIssue.directoryPath,
                 children: [
-                  /* @__PURE__ */ jsx4("span", { children: childIssue.message }),
+                  /* @__PURE__ */ jsx5("span", { children: childIssue.message }),
                   " ",
-                  /* @__PURE__ */ jsx4(
+                  /* @__PURE__ */ jsx5(
                     "button",
                     {
                       type: "button",
@@ -1829,7 +2032,8 @@ function FileExplorer({
       handleEntryDrop,
       activeRowPath,
       pinnedPathSet,
-      onTogglePin
+      onTogglePin,
+      orderedVisibleEntries
     ]
   );
   return /* @__PURE__ */ jsxs4(
@@ -1841,7 +2045,7 @@ function FileExplorer({
       onDragLeave: handleDragLeave,
       onDrop: handleDrop,
       children: [
-        onPinnedDocumentSelect && /* @__PURE__ */ jsx4(
+        onPinnedDocumentSelect && /* @__PURE__ */ jsx5(
           PinnedDocuments,
           {
             documents: pinnedDocuments,
@@ -1854,11 +2058,39 @@ function FileExplorer({
           }
         ),
         /* @__PURE__ */ jsxs4("div", { className: "db-explorer-toolbar", children: [
-          /* @__PURE__ */ jsx4("span", { className: "db-explorer-title", children: "Files" }),
+          /* @__PURE__ */ jsx5("span", { className: "db-explorer-title", children: "Files" }),
           /* @__PURE__ */ jsxs4("div", { className: "db-explorer-actions", children: [
-            /* @__PURE__ */ jsx4(
+            /* @__PURE__ */ jsxs4("div", { className: "db-explorer-sort-actions", role: "group", "aria-label": "File sorting", children: [
+              /* @__PURE__ */ jsx5(
+                "button",
+                {
+                  type: "button",
+                  className: "db-explorer-btn",
+                  onClick: () => selectSortMode("name"),
+                  title: "Sort by name",
+                  "aria-label": "Sort by name",
+                  "aria-pressed": selectedSortMode === "name",
+                  children: /* @__PURE__ */ jsx5(SortByNameIcon, {})
+                }
+              ),
+              /* @__PURE__ */ jsx5(
+                "button",
+                {
+                  type: "button",
+                  className: "db-explorer-btn",
+                  onClick: () => selectSortMode("last-modified"),
+                  title: "Sort by last modified",
+                  "aria-label": "Sort by last modified",
+                  "aria-pressed": selectedSortMode === "last-modified",
+                  children: /* @__PURE__ */ jsx5(SortByLastModifiedIcon, {})
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx5("span", { className: "db-explorer-action-divider", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx5(
               "button",
               {
+                type: "button",
                 className: "db-explorer-btn",
                 disabled: newItemCreationPending,
                 onClick: () => {
@@ -1867,12 +2099,13 @@ function FileExplorer({
                 },
                 title: "New Folder",
                 "aria-label": "New Folder",
-                children: /* @__PURE__ */ jsx4(NewFolderIcon, {})
+                children: /* @__PURE__ */ jsx5(NewFolderIcon, {})
               }
             ),
-            /* @__PURE__ */ jsx4(
+            /* @__PURE__ */ jsx5(
               "button",
               {
+                type: "button",
                 className: "db-explorer-btn",
                 disabled: newItemCreationPending,
                 onClick: () => {
@@ -1881,12 +2114,12 @@ function FileExplorer({
                 },
                 title: "New File",
                 "aria-label": "New File",
-                children: /* @__PURE__ */ jsx4(NewFileIcon, {})
+                children: /* @__PURE__ */ jsx5(NewFileIcon, {})
               }
             )
           ] })
         ] }),
-        onMoveToWorkspace && /* @__PURE__ */ jsx4("div", { className: "db-transient-move", children: !movePanelOpen ? /* @__PURE__ */ jsx4(
+        onMoveToWorkspace && /* @__PURE__ */ jsx5("div", { className: "db-transient-move", children: !movePanelOpen ? /* @__PURE__ */ jsx5(
           "button",
           {
             type: "button",
@@ -1907,8 +2140,8 @@ function FileExplorer({
               void handleMoveToWorkspace();
             },
             children: [
-              /* @__PURE__ */ jsx4("label", { className: "db-transient-move-label", htmlFor: "db-transient-move-destination", children: "Move this document into" }),
-              /* @__PURE__ */ jsx4(
+              /* @__PURE__ */ jsx5("label", { className: "db-transient-move-label", htmlFor: "db-transient-move-destination", children: "Move this document into" }),
+              /* @__PURE__ */ jsx5(
                 "select",
                 {
                   id: "db-transient-move-destination",
@@ -1919,13 +2152,13 @@ function FileExplorer({
                     setMoveDestinationId(event.currentTarget.value);
                     setMoveWorkspaceError(null);
                   },
-                  children: moveDestinations.map((destination) => /* @__PURE__ */ jsx4("option", { value: destination.id, children: destination.name }, destination.id))
+                  children: moveDestinations.map((destination) => /* @__PURE__ */ jsx5("option", { value: destination.id, children: destination.name }, destination.id))
                 }
               ),
-              moveDestinations.length === 0 && /* @__PURE__ */ jsx4("p", { className: "db-transient-move-hint", children: "Open or create another workspace first." }),
-              moveWorkspaceError && /* @__PURE__ */ jsx4("div", { className: "db-transient-move-error", role: "alert", children: moveWorkspaceError }),
+              moveDestinations.length === 0 && /* @__PURE__ */ jsx5("p", { className: "db-transient-move-hint", children: "Open or create another workspace first." }),
+              moveWorkspaceError && /* @__PURE__ */ jsx5("div", { className: "db-transient-move-error", role: "alert", children: moveWorkspaceError }),
               /* @__PURE__ */ jsxs4("div", { className: "db-transient-move-actions", children: [
-                /* @__PURE__ */ jsx4(
+                /* @__PURE__ */ jsx5(
                   "button",
                   {
                     type: "button",
@@ -1938,7 +2171,7 @@ function FileExplorer({
                     children: "Cancel"
                   }
                 ),
-                /* @__PURE__ */ jsx4(
+                /* @__PURE__ */ jsx5(
                   "button",
                   {
                     type: "submit",
@@ -1962,7 +2195,7 @@ function FileExplorer({
                 void handleNewItemSubmit();
               },
               children: [
-                /* @__PURE__ */ jsx4(
+                /* @__PURE__ */ jsx5(
                   "input",
                   {
                     className: "db-new-item-input",
@@ -1986,14 +2219,14 @@ function FileExplorer({
                     autoFocus: true
                   }
                 ),
-                newItemType === "file" && /* @__PURE__ */ jsx4("span", { className: "db-new-item-suffix", children: ".md" }),
-                /* @__PURE__ */ jsx4("button", { type: "submit", className: "db-new-item-add", disabled: newItemCreationPending, children: newItemCreationPending ? "Adding\u2026" : "Add" })
+                newItemType === "file" && /* @__PURE__ */ jsx5("span", { className: "db-new-item-suffix", children: ".md" }),
+                /* @__PURE__ */ jsx5("button", { type: "submit", className: "db-new-item-add", disabled: newItemCreationPending, children: newItemCreationPending ? "Adding\u2026" : "Add" })
               ]
             }
           ),
-          newItemError && /* @__PURE__ */ jsx4("div", { id: NEW_ITEM_ERROR_ID, className: "db-tree-error", role: "alert", children: newItemError })
+          newItemError && /* @__PURE__ */ jsx5("div", { id: NEW_ITEM_ERROR_ID, className: "db-tree-error", role: "alert", children: newItemError })
         ] }),
-        moveError && /* @__PURE__ */ jsx4("div", { className: "db-tree-error", role: "alert", children: moveError }),
+        moveError && /* @__PURE__ */ jsx5("div", { className: "db-tree-error", role: "alert", children: moveError }),
         tree.rootIssue && /* @__PURE__ */ jsxs4(
           "div",
           {
@@ -2001,9 +2234,9 @@ function FileExplorer({
             role: "alert",
             "data-directory-path": tree.rootIssue.directoryPath,
             children: [
-              /* @__PURE__ */ jsx4("span", { children: tree.rootIssue.message }),
+              /* @__PURE__ */ jsx5("span", { children: tree.rootIssue.message }),
               " ",
-              /* @__PURE__ */ jsx4(
+              /* @__PURE__ */ jsx5(
                 "button",
                 {
                   type: "button",
@@ -2015,7 +2248,7 @@ function FileExplorer({
             ]
           }
         ),
-        tree.loading ? /* @__PURE__ */ jsx4("div", { className: "db-tree", role: "status", "aria-live": "polite", children: /* @__PURE__ */ jsx4("div", { className: "db-tree-loading", children: "Loading..." }) }) : filterVisibleFileEntries(tree.entries).length === 0 ? /* @__PURE__ */ jsx4("div", { className: "db-tree", children: /* @__PURE__ */ jsx4("div", { className: "db-tree-empty", children: "No files yet" }) }) : /* @__PURE__ */ jsx4(
+        tree.loading ? /* @__PURE__ */ jsx5("div", { className: "db-tree", role: "status", "aria-live": "polite", children: /* @__PURE__ */ jsx5("div", { className: "db-tree-loading", children: "Loading..." }) }) : filterVisibleFileEntries(tree.entries).length === 0 ? /* @__PURE__ */ jsx5("div", { className: "db-tree", children: /* @__PURE__ */ jsx5("div", { className: "db-tree-empty", children: "No files yet" }) }) : /* @__PURE__ */ jsx5(
           "div",
           {
             ref: treeRef,
@@ -2037,14 +2270,14 @@ function FileExplorer({
 import { Fragment as Fragment2, useState as useState5, useEffect as useEffect5, useCallback as useCallback5, useRef as useRef5 } from "react";
 import { listWorkspaces, saveWorkspace, touchWorkspace } from "@bendyline/docblocks/workspace";
 import { isElectronHost } from "@bendyline/docblocks/host";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function isNativeFileSystemSupported() {
   return typeof globalThis !== "undefined" && typeof globalThis.showDirectoryPicker === "function";
 }
 function WorkspacePath({ path }) {
   return path.split(/([\\/])/).map((segment, index) => /* @__PURE__ */ jsxs5(Fragment2, { children: [
     segment,
-    (segment === "\\" || segment === "/") && /* @__PURE__ */ jsx5("wbr", {})
+    (segment === "\\" || segment === "/") && /* @__PURE__ */ jsx6("wbr", {})
   ] }, index));
 }
 function WorkspacePicker({
@@ -2173,9 +2406,9 @@ function WorkspacePicker({
         "aria-label": `Switch workspace, current: ${activeWorkspaceName}`,
         "aria-expanded": isOpen,
         children: [
-          /* @__PURE__ */ jsx5("span", { className: "db-workspace-picker-label", children: activeWorkspaceName }),
-          /* @__PURE__ */ jsx5("span", { className: "db-workspace-picker-compact-icon", children: /* @__PURE__ */ jsx5(FolderIcon, {}) }),
-          /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx6("span", { className: "db-workspace-picker-label", children: activeWorkspaceName }),
+          /* @__PURE__ */ jsx6("span", { className: "db-workspace-picker-compact-icon", children: /* @__PURE__ */ jsx6(FolderIcon, {}) }),
+          /* @__PURE__ */ jsx6(
             "span",
             {
               className: `db-workspace-picker-caret${isOpen ? " db-workspace-picker-caret--open" : ""}`,
@@ -2186,22 +2419,22 @@ function WorkspacePicker({
       }
     ),
     isOpen && /* @__PURE__ */ jsxs5("div", { className: "db-workspace-dropdown", children: [
-      workspaces.map((ws) => /* @__PURE__ */ jsx5(
+      workspaces.map((ws) => /* @__PURE__ */ jsx6(
         "button",
         {
           className: `db-workspace-dropdown-item ${ws.id === activeWorkspaceId ? "db-workspace-dropdown-item--active" : ""}`,
           onClick: () => handleSelect(ws),
           children: /* @__PURE__ */ jsxs5("span", { className: "db-workspace-details", children: [
             /* @__PURE__ */ jsxs5("span", { className: "db-workspace-heading", children: [
-              /* @__PURE__ */ jsx5("span", { children: ws.name }),
-              (ws.type === "native" || ws.type === "electron-native") && /* @__PURE__ */ jsx5("span", { className: "db-workspace-type", children: "(folder)" })
+              /* @__PURE__ */ jsx6("span", { children: ws.name }),
+              (ws.type === "native" || ws.type === "electron-native") && /* @__PURE__ */ jsx6("span", { className: "db-workspace-type", children: "(folder)" })
             ] }),
-            ws.rootPath && /* @__PURE__ */ jsx5("span", { className: "db-workspace-path", title: ws.rootPath, children: /* @__PURE__ */ jsx5(WorkspacePath, { path: ws.rootPath }) })
+            ws.rootPath && /* @__PURE__ */ jsx6("span", { className: "db-workspace-path", title: ws.rootPath, children: /* @__PURE__ */ jsx6(WorkspacePath, { path: ws.rootPath }) })
           ] })
         },
         ws.id
       )),
-      /* @__PURE__ */ jsx5("div", { className: "db-workspace-dropdown-divider" }),
+      /* @__PURE__ */ jsx6("div", { className: "db-workspace-dropdown-divider" }),
       !electron && (creatingNew ? /* @__PURE__ */ jsxs5(
         "form",
         {
@@ -2212,8 +2445,8 @@ function WorkspacePicker({
             void handleCreateNew();
           },
           children: [
-            /* @__PURE__ */ jsx5("label", { className: "db-workspace-create-label", htmlFor: "db-new-workspace-name", children: "Workspace name" }),
-            /* @__PURE__ */ jsx5(
+            /* @__PURE__ */ jsx6("label", { className: "db-workspace-create-label", htmlFor: "db-new-workspace-name", children: "Workspace name" }),
+            /* @__PURE__ */ jsx6(
               "input",
               {
                 id: "db-new-workspace-name",
@@ -2233,9 +2466,9 @@ function WorkspacePicker({
                 }
               }
             ),
-            newWorkspaceError && /* @__PURE__ */ jsx5("p", { id: "db-new-workspace-error", className: "db-workspace-create-error", role: "alert", children: newWorkspaceError }),
+            newWorkspaceError && /* @__PURE__ */ jsx6("p", { id: "db-new-workspace-error", className: "db-workspace-create-error", role: "alert", children: newWorkspaceError }),
             /* @__PURE__ */ jsxs5("div", { className: "db-workspace-create-actions", children: [
-              /* @__PURE__ */ jsx5(
+              /* @__PURE__ */ jsx6(
                 "button",
                 {
                   type: "button",
@@ -2245,15 +2478,15 @@ function WorkspacePicker({
                   children: "Cancel"
                 }
               ),
-              /* @__PURE__ */ jsx5("button", { type: "submit", disabled: newWorkspacePending, children: newWorkspacePending ? "Creating\xE2\u20AC\xA6" : "Create" })
+              /* @__PURE__ */ jsx6("button", { type: "submit", disabled: newWorkspacePending, children: newWorkspacePending ? "Creating\xE2\u20AC\xA6" : "Create" })
             ] })
           ]
         }
-      ) : /* @__PURE__ */ jsx5("button", { className: "db-workspace-dropdown-item", onClick: handleStartCreateNew, children: /* @__PURE__ */ jsxs5("span", { className: "db-workspace-dropdown-action-label", children: [
-        /* @__PURE__ */ jsx5(NewFolderIcon, {}),
-        /* @__PURE__ */ jsx5("span", { children: "New Workspace" })
+      ) : /* @__PURE__ */ jsx6("button", { className: "db-workspace-dropdown-item", onClick: handleStartCreateNew, children: /* @__PURE__ */ jsxs5("span", { className: "db-workspace-dropdown-action-label", children: [
+        /* @__PURE__ */ jsx6(NewFolderIcon, {}),
+        /* @__PURE__ */ jsx6("span", { children: "New Workspace" })
       ] }) })),
-      (electron || isNativeFileSystemSupported()) && /* @__PURE__ */ jsx5(
+      (electron || isNativeFileSystemSupported()) && /* @__PURE__ */ jsx6(
         "button",
         {
           className: "db-workspace-dropdown-item",
@@ -2264,7 +2497,7 @@ function WorkspacePicker({
           children: "Open Folder..."
         }
       ),
-      onCloneRepository && /* @__PURE__ */ jsx5(
+      onCloneRepository && /* @__PURE__ */ jsx6(
         "button",
         {
           className: "db-workspace-dropdown-item",
@@ -2320,7 +2553,7 @@ import {
 // src/AppMenu/AppMenu.tsx
 import { useState as useState6, useCallback as useCallback6, useRef as useRef6, useEffect as useEffect6 } from "react";
 import { isElectronHost as isElectronHost2 } from "@bendyline/docblocks/host";
-import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function formatBytes(bytes) {
   if (!Number.isFinite(bytes) || bytes < 0) return "\u2014";
   let value = bytes;
@@ -2409,7 +2642,7 @@ function AppMenu({
           "aria-expanded": isOpen,
           "aria-haspopup": "menu",
           children: [
-            logoUrl ? /* @__PURE__ */ jsx6(
+            logoUrl ? /* @__PURE__ */ jsx7(
               "img",
               {
                 src: logoUrl,
@@ -2418,8 +2651,8 @@ function AppMenu({
                 width: 1266,
                 height: 544
               }
-            ) : /* @__PURE__ */ jsx6("span", { className: "db-app-menu-label", children: "docblocks" }),
-            /* @__PURE__ */ jsx6(
+            ) : /* @__PURE__ */ jsx7("span", { className: "db-app-menu-label", children: "docblocks" }),
+            /* @__PURE__ */ jsx7(
               "span",
               {
                 className: `db-app-menu-caret${isOpen ? " db-app-menu-caret--open" : ""}`,
@@ -2437,7 +2670,7 @@ function AppMenu({
           role: "menu",
           onKeyDown: handleMenuKeyDown,
           children: [
-            /* @__PURE__ */ jsx6(
+            /* @__PURE__ */ jsx7(
               "button",
               {
                 className: "db-app-menu-item",
@@ -2447,7 +2680,7 @@ function AppMenu({
                 children: "Settings"
               }
             ),
-            onInstallApp && /* @__PURE__ */ jsx6(
+            onInstallApp && /* @__PURE__ */ jsx7(
               "button",
               {
                 className: "db-app-menu-item",
@@ -2457,7 +2690,7 @@ function AppMenu({
                 children: "Install DocBlocks\u2026"
               }
             ),
-            onKeepBrowserData && /* @__PURE__ */ jsx6(
+            onKeepBrowserData && /* @__PURE__ */ jsx7(
               "button",
               {
                 className: "db-app-menu-item",
@@ -2467,7 +2700,7 @@ function AppMenu({
                 children: "Protect data from browser cleanup"
               }
             ),
-            onDownloadAllWorkspaces && /* @__PURE__ */ jsx6(
+            onDownloadAllWorkspaces && /* @__PURE__ */ jsx7(
               "button",
               {
                 className: "db-app-menu-item",
@@ -2477,8 +2710,8 @@ function AppMenu({
                 children: "Download all workspaces"
               }
             ),
-            /* @__PURE__ */ jsx6("div", { className: "db-app-menu-divider" }),
-            /* @__PURE__ */ jsx6(
+            /* @__PURE__ */ jsx7("div", { className: "db-app-menu-divider" }),
+            /* @__PURE__ */ jsx7(
               "button",
               {
                 className: "db-app-menu-item",
@@ -2493,21 +2726,21 @@ function AppMenu({
       )
     ] }),
     showSettings && /* @__PURE__ */ jsxs6(SettingsDialog, { onClose: () => setShowSettings(false), children: [
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx7(
         ThemeSettings,
         {
           value: themePreference,
           onChange: (preference) => onThemeChange?.(preference)
         }
       ),
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx7(
         AccentColorSettings,
         {
           value: accentColor,
           onChange: (color) => onAccentColorChange?.(color)
         }
       ),
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx7(
         WriteCanvasSettingsControls,
         {
           value: writeCanvasSettings,
@@ -2515,14 +2748,14 @@ function AppMenu({
         }
       ),
       getStorageEstimate && /* @__PURE__ */ jsxs6("fieldset", { className: "db-settings-fieldset", children: [
-        /* @__PURE__ */ jsx6("legend", { className: "db-settings-legend", children: "Storage" }),
-        /* @__PURE__ */ jsx6("p", { className: "db-settings-hint", children: storageEstimate ? `DocBlocks documents and app data are using ${formatBytes(
+        /* @__PURE__ */ jsx7("legend", { className: "db-settings-legend", children: "Storage" }),
+        /* @__PURE__ */ jsx7("p", { className: "db-settings-hint", children: storageEstimate ? `DocBlocks documents and app data are using ${formatBytes(
           storageEstimate.usage
         )} of the ${formatBytes(
           storageEstimate.quota
         )} this browser allows for the site.` : "Storage usage is not available in this browser." }),
-        storagePersistent !== void 0 && /* @__PURE__ */ jsx6("p", { className: "db-settings-hint", children: storagePersistent ? "Protected from routine browser cleanup on this device." : "Browsers may clear site data under storage pressure unless protection is granted." }),
-        onKeepBrowserData && /* @__PURE__ */ jsx6(
+        storagePersistent !== void 0 && /* @__PURE__ */ jsx7("p", { className: "db-settings-hint", children: storagePersistent ? "Protected from routine browser cleanup on this device." : "Browsers may clear site data under storage pressure unless protection is granted." }),
+        onKeepBrowserData && /* @__PURE__ */ jsx7(
           "button",
           {
             type: "button",
@@ -2534,15 +2767,15 @@ function AppMenu({
         )
       ] }),
       onVersioningPreferenceChange && /* @__PURE__ */ jsxs6("fieldset", { className: "db-settings-fieldset", children: [
-        /* @__PURE__ */ jsx6("legend", { className: "db-settings-legend", children: "Version history" }),
+        /* @__PURE__ */ jsx7("legend", { className: "db-settings-legend", children: "Version history" }),
         /* @__PURE__ */ jsxs6("p", { className: "db-settings-hint", children: [
           "When on, DocBlocks keeps prior revisions of each document inside a sibling",
           " ",
-          /* @__PURE__ */ jsx6("code", { children: "<name>_files/.versions/" }),
+          /* @__PURE__ */ jsx7("code", { children: "<name>_files/.versions/" }),
           " folder. Individual workspaces can override this default in their own settings."
         ] }),
         /* @__PURE__ */ jsxs6("label", { className: "db-settings-radio", children: [
-          /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx7(
             "input",
             {
               type: "radio",
@@ -2555,7 +2788,7 @@ function AppMenu({
           "On for all workspaces"
         ] }),
         /* @__PURE__ */ jsxs6("label", { className: "db-settings-radio", children: [
-          /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx7(
             "input",
             {
               type: "radio",
@@ -2568,7 +2801,7 @@ function AppMenu({
           "On in browser workspaces, off for local folders"
         ] }),
         /* @__PURE__ */ jsxs6("label", { className: "db-settings-radio", children: [
-          /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx7(
             "input",
             {
               type: "radio",
@@ -2584,14 +2817,14 @@ function AppMenu({
     ] }),
     showAbout && /* @__PURE__ */ jsxs6(Dialog, { title: "About DocBlocks", onClose: () => setShowAbout(false), children: [
       /* @__PURE__ */ jsxs6("p", { children: [
-        /* @__PURE__ */ jsx6("strong", { children: "DocBlocks" }),
+        /* @__PURE__ */ jsx7("strong", { children: "DocBlocks" }),
         " is a local-first Markdown document editor. Your files stay under your control."
       ] }),
       /* @__PURE__ */ jsxs6("aside", { className: "db-about-beta", children: [
-        /* @__PURE__ */ jsx6("strong", { children: "Beta Software." }),
+        /* @__PURE__ */ jsx7("strong", { children: "Beta Software." }),
         " We're still working through initial hiccups and issues. Please bear with us, make sure you keep backups, and",
         " ",
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7(
           "a",
           {
             href: "https://github.com/bendyline/docblocks/issues/new",
@@ -2604,27 +2837,27 @@ function AppMenu({
         "where you find them. Thanks!"
       ] }),
       appVersion && /* @__PURE__ */ jsxs6("p", { className: "db-about-version", children: [
-        /* @__PURE__ */ jsx6("span", { children: "Version" }),
-        /* @__PURE__ */ jsx6("code", { "aria-label": `DocBlocks version ${appVersion}`, children: appVersion })
+        /* @__PURE__ */ jsx7("span", { children: "Version" }),
+        /* @__PURE__ */ jsx7("code", { "aria-label": `DocBlocks version ${appVersion}`, children: appVersion })
       ] }),
       appBuildDate && /* @__PURE__ */ jsxs6("p", { className: "db-about-version", children: [
-        /* @__PURE__ */ jsx6("span", { children: "Build" }),
-        /* @__PURE__ */ jsx6("time", { dateTime: appBuildDate, children: appBuildDate })
+        /* @__PURE__ */ jsx7("span", { children: "Build" }),
+        /* @__PURE__ */ jsx7("time", { dateTime: appBuildDate, children: appBuildDate })
       ] }),
       /* @__PURE__ */ jsxs6("p", { children: [
         "Built with",
         " ",
-        /* @__PURE__ */ jsx6("a", { href: "https://github.com/bendyline/squisq", target: "_blank", rel: "noopener noreferrer", children: "squisq" }),
+        /* @__PURE__ */ jsx7("a", { href: "https://github.com/bendyline/squisq", target: "_blank", rel: "noopener noreferrer", children: "squisq" }),
         " ",
         "by",
         " ",
-        /* @__PURE__ */ jsx6("a", { href: "https://bendyline.com", target: "_blank", rel: "noopener noreferrer", children: "Bendyline" }),
+        /* @__PURE__ */ jsx7("a", { href: "https://bendyline.com", target: "_blank", rel: "noopener noreferrer", children: "Bendyline" }),
         "."
       ] }),
       /* @__PURE__ */ jsxs6("p", { className: "db-dialog-links", children: [
-        /* @__PURE__ */ jsx6("a", { href: moreInformationUrl, target: "_blank", rel: "noopener noreferrer", children: "More information..." }),
-        /* @__PURE__ */ jsx6("span", { className: "db-dialog-sep", children: "\xB7" }),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7("a", { href: moreInformationUrl, target: "_blank", rel: "noopener noreferrer", children: "More information..." }),
+        /* @__PURE__ */ jsx7("span", { className: "db-dialog-sep", children: "\xB7" }),
+        /* @__PURE__ */ jsx7(
           "a",
           {
             href: "https://github.com/bendyline/docblocks",
@@ -2633,8 +2866,8 @@ function AppMenu({
             children: "GitHub"
           }
         ),
-        /* @__PURE__ */ jsx6("span", { className: "db-dialog-sep", children: "\xB7" }),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7("span", { className: "db-dialog-sep", children: "\xB7" }),
+        /* @__PURE__ */ jsx7(
           "a",
           {
             href: "https://github.com/bendyline/docblocks/releases",
@@ -2643,8 +2876,8 @@ function AppMenu({
             children: "Release notes"
           }
         ),
-        /* @__PURE__ */ jsx6("span", { className: "db-dialog-sep", children: "\xB7" }),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7("span", { className: "db-dialog-sep", children: "\xB7" }),
+        /* @__PURE__ */ jsx7(
           "a",
           {
             href: "https://github.com/bendyline/docblocks/issues",
@@ -2653,8 +2886,8 @@ function AppMenu({
             children: "Support"
           }
         ),
-        /* @__PURE__ */ jsx6("span", { className: "db-dialog-sep", children: "\xB7" }),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7("span", { className: "db-dialog-sep", children: "\xB7" }),
+        /* @__PURE__ */ jsx7(
           "a",
           {
             href: "https://github.com/bendyline/docblocks/blob/main/LICENSE",
@@ -2663,8 +2896,8 @@ function AppMenu({
             children: "License (MIT)"
           }
         ),
-        /* @__PURE__ */ jsx6("span", { className: "db-dialog-sep", children: "\xB7" }),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7("span", { className: "db-dialog-sep", children: "\xB7" }),
+        /* @__PURE__ */ jsx7(
           "a",
           {
             href: "https://github.com/bendyline/docblocks/blob/main/NOTICE.md",
@@ -2680,7 +2913,7 @@ function AppMenu({
 
 // src/WorkspacePicker/WorkspaceSettingsButton.tsx
 import { useState as useState7, useCallback as useCallback7, useRef as useRef7, useEffect as useEffect7 } from "react";
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function WorkspaceSettingsButton({
   onSettings,
   onRename,
@@ -2708,7 +2941,7 @@ function WorkspaceSettingsButton({
     [closeMenu]
   );
   return /* @__PURE__ */ jsxs7("div", { ref: containerRef, className: "db-ws-settings", children: [
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(
       "button",
       {
         ref: triggerRef,
@@ -2719,7 +2952,7 @@ function WorkspaceSettingsButton({
         "aria-haspopup": "menu",
         "aria-label": "Workspace settings",
         title: "Workspace settings",
-        children: /* @__PURE__ */ jsx7(WorkspaceIcon, {})
+        children: /* @__PURE__ */ jsx8(WorkspaceIcon, {})
       }
     ),
     isOpen && /* @__PURE__ */ jsxs7(
@@ -2730,7 +2963,7 @@ function WorkspaceSettingsButton({
         role: "menu",
         onKeyDown: handleMenuKeyDown,
         children: [
-          /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx8(
             "button",
             {
               className: "db-ws-settings-item",
@@ -2740,7 +2973,7 @@ function WorkspaceSettingsButton({
               children: "Workspace settings\u2026"
             }
           ),
-          /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx8(
             "button",
             {
               className: "db-ws-settings-item",
@@ -2750,7 +2983,7 @@ function WorkspaceSettingsButton({
               children: "Rename workspace"
             }
           ),
-          /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx8(
             "button",
             {
               className: "db-ws-settings-item",
@@ -2760,8 +2993,8 @@ function WorkspaceSettingsButton({
               children: "Download workspace"
             }
           ),
-          /* @__PURE__ */ jsx7("div", { className: "db-ws-settings-divider" }),
-          /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx8("div", { className: "db-ws-settings-divider" }),
+          /* @__PURE__ */ jsx8(
             "button",
             {
               className: "db-ws-settings-item db-ws-settings-item--danger",
@@ -2813,7 +3046,7 @@ function resolveVersioningEnabled(workspace, globalPref) {
 }
 
 // src/WorkspacePicker/WorkspaceSettingsDialog.tsx
-import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 var VERSIONING_LABELS = {
   on: "on",
   "browser-only": "on for browser workspaces, off for local folders",
@@ -2834,21 +3067,21 @@ function WorkspaceSettingsDialog({
   const inheritLabel = `Inherit default \u2014 currently ${VERSIONING_LABELS[globalVersioningPreference]} (${inheritedEnabled ? "on" : "off"} for this workspace)`;
   return /* @__PURE__ */ jsxs8(Dialog, { title: "Workspace settings", onClose, children: [
     /* @__PURE__ */ jsxs8("p", { className: "db-settings-hint", children: [
-      /* @__PURE__ */ jsx8("strong", { children: workspace.name }),
+      /* @__PURE__ */ jsx9("strong", { children: workspace.name }),
       " \xB7",
       " ",
       isLocal ? "Local folder workspace" : "Browser workspace"
     ] }),
     /* @__PURE__ */ jsxs8("fieldset", { className: "db-settings-fieldset", children: [
-      /* @__PURE__ */ jsx8("legend", { className: "db-settings-legend", children: "Version history" }),
+      /* @__PURE__ */ jsx9("legend", { className: "db-settings-legend", children: "Version history" }),
       /* @__PURE__ */ jsxs8("p", { className: "db-settings-hint", children: [
         "Controls whether DocBlocks keeps prior revisions in",
         " ",
-        /* @__PURE__ */ jsx8("code", { children: "<name>_files/.versions/" }),
+        /* @__PURE__ */ jsx9("code", { children: "<name>_files/.versions/" }),
         " for documents in this workspace."
       ] }),
       /* @__PURE__ */ jsxs8("label", { className: "db-settings-radio", children: [
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9(
           "input",
           {
             type: "radio",
@@ -2861,7 +3094,7 @@ function WorkspaceSettingsDialog({
         inheritLabel
       ] }),
       /* @__PURE__ */ jsxs8("label", { className: "db-settings-radio", children: [
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9(
           "input",
           {
             type: "radio",
@@ -2874,7 +3107,7 @@ function WorkspaceSettingsDialog({
         "On for this workspace"
       ] }),
       /* @__PURE__ */ jsxs8("label", { className: "db-settings-radio", children: [
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9(
           "input",
           {
             type: "radio",
@@ -2891,7 +3124,7 @@ function WorkspaceSettingsDialog({
 }
 
 // src/hooks/useDocumentSession.ts
-import { useState as useState8, useSyncExternalStore } from "react";
+import { useState as useState8, useSyncExternalStore as useSyncExternalStore2 } from "react";
 import {
   DocumentRecoveryJournal,
   DocumentSession,
@@ -2904,7 +3137,7 @@ function useDocumentSession(autoSaveDelayMs = 500) {
       recoveryJournal: new DocumentRecoveryJournal(getDefaultDocumentRecoveryStorage())
     })
   );
-  const snapshot = useSyncExternalStore(
+  const snapshot = useSyncExternalStore2(
     session.subscribe,
     session.getSnapshot,
     session.getSnapshot
@@ -2914,14 +3147,14 @@ function useDocumentSession(autoSaveDelayMs = 500) {
 
 // src/Export/DeferredExportToolbarControls.tsx
 import { lazy, Suspense } from "react";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var ExportToolbarControlsImplementation = lazy(
-  () => import("./ExportToolbarControls-773QRE4R.js").then((module) => ({
+  () => import("./ExportToolbarControls-6MO4NX6H.js").then((module) => ({
     default: module.ExportToolbarControls
   }))
 );
 function ExportToolbarControls(props) {
-  return /* @__PURE__ */ jsx9(Suspense, { fallback: null, children: /* @__PURE__ */ jsx9(ExportToolbarControlsImplementation, { ...props }) });
+  return /* @__PURE__ */ jsx10(Suspense, { fallback: null, children: /* @__PURE__ */ jsx10(ExportToolbarControlsImplementation, { ...props }) });
 }
 
 // src/Git/useGit.ts
@@ -3586,7 +3819,7 @@ import React2, { useCallback as useCallback11, useEffect as useEffect12, useRef
 
 // src/components/PromptDialog.tsx
 import { useCallback as useCallback10, useEffect as useEffect11, useId as useId2, useRef as useRef10, useState as useState11 } from "react";
-import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 function PromptDialog({ request, onSettle }) {
   const [value, setValue] = useState11(request.initialValue ?? "");
   const inputRef = useRef10(null);
@@ -3599,7 +3832,7 @@ function PromptDialog({ request, onSettle }) {
   useEffect11(() => {
     inputRef.current?.select();
   }, []);
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     Dialog,
     {
       title: request.title,
@@ -3607,8 +3840,8 @@ function PromptDialog({ request, onSettle }) {
       initialFocusRef: inputRef,
       closeOnBackdrop: false,
       footer: /* @__PURE__ */ jsxs9(Fragment4, { children: [
-        /* @__PURE__ */ jsx10("button", { type: "button", className: "db-git-secondary-btn", onClick: cancel, children: "Cancel" }),
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx11("button", { type: "button", className: "db-git-secondary-btn", onClick: cancel, children: "Cancel" }),
+        /* @__PURE__ */ jsx11(
           "button",
           {
             type: "button",
@@ -3620,8 +3853,8 @@ function PromptDialog({ request, onSettle }) {
         )
       ] }),
       children: /* @__PURE__ */ jsxs9("div", { className: "db-git-form-row", children: [
-        /* @__PURE__ */ jsx10("label", { className: "db-git-form-label", htmlFor: inputId, children: request.label }),
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx11("label", { className: "db-git-form-label", htmlFor: inputId, children: request.label }),
+        /* @__PURE__ */ jsx11(
           "input",
           {
             id: inputId,
@@ -3680,7 +3913,7 @@ import React4, { useCallback as useCallback13, useEffect as useEffect13, useRef
 
 // src/components/ConfirmDialog.tsx
 import { useCallback as useCallback12, useRef as useRef12 } from "react";
-import { Fragment as Fragment5, jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 function ConfirmDialog({ request, onSettle }) {
   const acknowledge = request.kind === "acknowledge";
   const destructive = request.kind === "confirm" && request.destructive === true;
@@ -3689,15 +3922,15 @@ function ConfirmDialog({ request, onSettle }) {
   const accept = useCallback12(() => onSettle(true), [onSettle]);
   const reject = useCallback12(() => onSettle(false), [onSettle]);
   const close = acknowledge ? accept : reject;
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     Dialog,
     {
       title: request.title,
       onClose: close,
       initialFocusRef: destructive ? cancelRef : confirmRef,
       footer: /* @__PURE__ */ jsxs10(Fragment5, { children: [
-        !acknowledge && /* @__PURE__ */ jsx11("button", { ref: cancelRef, type: "button", className: "db-git-secondary-btn", onClick: reject, children: request.cancelLabel ?? "Cancel" }),
-        /* @__PURE__ */ jsx11(
+        !acknowledge && /* @__PURE__ */ jsx12("button", { ref: cancelRef, type: "button", className: "db-git-secondary-btn", onClick: reject, children: request.cancelLabel ?? "Cancel" }),
+        /* @__PURE__ */ jsx12(
           "button",
           {
             ref: confirmRef,
@@ -3708,7 +3941,7 @@ function ConfirmDialog({ request, onSettle }) {
           }
         )
       ] }),
-      children: /* @__PURE__ */ jsx11("p", { className: "db-dialog-message", children: request.message })
+      children: /* @__PURE__ */ jsx12("p", { className: "db-dialog-message", children: request.message })
     }
   );
 }
@@ -3853,6 +4086,7 @@ function loadLastState(storage = localStorage) {
 var WELCOME_GATEWAY_KEY = "docblocks:welcomeGatewayDismissed";
 var SIDEBAR_WIDTH_KEY = "docblocks:sidebarWidth";
 var VIEW_PREFERENCES_KEY = "docblocks:viewPreferences";
+var FILE_EXPLORER_SORT_MODE_KEY = "docblocks:fileExplorerSortMode";
 var SIDEBAR_WIDTH_DEFAULT = 320;
 var SIDEBAR_WIDTH_MIN = 320;
 var SIDEBAR_WIDTH_MAX = 600;
@@ -3892,6 +4126,19 @@ function saveSidebarWidth(px) {
   } catch {
   }
 }
+function loadFileExplorerSortMode() {
+  try {
+    return localStorage.getItem(FILE_EXPLORER_SORT_MODE_KEY) === "last-modified" ? "last-modified" : "name";
+  } catch {
+    return "name";
+  }
+}
+function saveFileExplorerSortMode(mode) {
+  try {
+    localStorage.setItem(FILE_EXPLORER_SORT_MODE_KEY, mode);
+  } catch {
+  }
+}
 function loadViewPreferences() {
   try {
     const raw = localStorage.getItem(VIEW_PREFERENCES_KEY);
@@ -3919,7 +4166,7 @@ function saveViewPreferences(preferences) {
 
 // src/DocBlocksShell/UpdateAvailableNotice.tsx
 import { useState as useState14 } from "react";
-import { Fragment as Fragment6, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
 var UPDATE_PROMPT_ID = "db-update-available-prompt";
 function UpdateAvailableNotice({
   available,
@@ -3928,10 +4175,11 @@ function UpdateAvailableNotice({
   statusBarVisible
 }) {
   const [promptOpen, setPromptOpen] = useState14(false);
+  const [applying, setApplying] = useState14(false);
   if (!available || !onApplyUpdate) return null;
   const promptVisible = promptOpen && !blocked;
   return /* @__PURE__ */ jsxs11(Fragment6, { children: [
-    /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx13(
       "button",
       {
         type: "button",
@@ -3952,10 +4200,21 @@ function UpdateAvailableNotice({
         className: `db-update-banner${statusBarVisible ? "" : " db-update-banner--floating"}`,
         role: "alert",
         children: [
-          /* @__PURE__ */ jsx12("span", { children: "A new version of DocBlocks is available. Reload to update the editor and site pages." }),
+          /* @__PURE__ */ jsx13("span", { children: "A new version of DocBlocks is available. Reload to update the editor and site pages." }),
           /* @__PURE__ */ jsxs11("div", { className: "db-update-banner-actions", children: [
-            /* @__PURE__ */ jsx12("button", { type: "button", onClick: onApplyUpdate, disabled: blocked, children: "Reload" }),
-            /* @__PURE__ */ jsx12("button", { type: "button", onClick: () => setPromptOpen(false), children: "Later" })
+            /* @__PURE__ */ jsx13(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  setApplying(true);
+                  onApplyUpdate();
+                },
+                disabled: blocked || applying,
+                children: applying ? "Updating\u2026" : "Reload"
+              }
+            ),
+            /* @__PURE__ */ jsx13("button", { type: "button", onClick: () => setPromptOpen(false), disabled: applying, children: "Later" })
           ] })
         ]
       }
@@ -4338,7 +4597,7 @@ var WELCOME_DOCUMENT_CONTENT = [
   "",
   "## Agents get document tools, not a blank check {[factCard]}",
   "",
-  "The local MCP server can inspect, validate, preview, compare, and convert documents. Results remain temporary session artifacts until they are deliberately saved, and filesystem access begins with explicit roots rather than assumed authority.",
+  "The local MCP server converts plain text or Markdown directly and can optionally inspect, preview, or compare documents. Results remain temporary session artifacts until they are deliberately saved, and filesystem access begins with explicit roots rather than assumed authority.",
   "",
   "## Start with three small moves {[list]}",
   "",
@@ -4356,7 +4615,7 @@ var WELCOME_DOCUMENT_CONTENT = [
 ].join("\n");
 
 // src/DocBlocksShell/DocBlocksShell.tsx
-import { Fragment as Fragment7, jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
 var editorShellModulePromise = null;
 function loadEditorShell() {
   editorShellModulePromise ?? (editorShellModulePromise = (async () => {
@@ -4642,7 +4901,7 @@ function useIsMobile(breakpoint = 768) {
   return isMobile;
 }
 function FolderGlyph() {
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     "svg",
     {
       viewBox: "0 0 24 24",
@@ -4651,7 +4910,7 @@ function FolderGlyph() {
       strokeWidth: "1.5",
       strokeLinejoin: "round",
       "aria-hidden": "true",
-      children: /* @__PURE__ */ jsx13("path", { d: "M3 7a1 1 0 0 1 1-1h5l2 2h9a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7z" })
+      children: /* @__PURE__ */ jsx14("path", { d: "M3 7a1 1 0 0 1 1-1h5l2 2h9a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7z" })
     }
   );
 }
@@ -4666,8 +4925,8 @@ function FileGlyph() {
       strokeLinejoin: "round",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx13("path", { d: "M6 3h8l5 5v12a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z" }),
-        /* @__PURE__ */ jsx13("path", { d: "M14 3v5h5" })
+        /* @__PURE__ */ jsx14("path", { d: "M6 3h8l5 5v12a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z" }),
+        /* @__PURE__ */ jsx14("path", { d: "M14 3v5h5" })
       ]
     }
   );
@@ -5014,6 +5273,11 @@ function DocBlocksShell({
     return pickEmptyDocumentPrompt();
   }, [editorKey]);
   const [explorerKey, setExplorerKey] = useState15(0);
+  const [fileExplorerSortMode, setFileExplorerSortMode] = useState15(loadFileExplorerSortMode);
+  const handleFileExplorerSortModeChange = useCallback15((mode) => {
+    setFileExplorerSortMode(mode);
+    saveFileExplorerSortMode(mode);
+  }, []);
   const [documentLinkEpoch, setDocumentLinkEpoch] = useState15(0);
   const [initialView, setInitialView] = useState15("wysiwyg");
   const [initialSharedMode, setInitialSharedMode] = useState15(null);
@@ -7400,7 +7664,7 @@ function DocBlocksShell({
     setPinnedAvailability,
     transitionAwayFromDocument
   ]);
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     "div",
     {
       className: `db-shell${effectiveCompact ? " db-shell--mobile" : ""}`,
@@ -7410,8 +7674,8 @@ function DocBlocksShell({
       children: /* @__PURE__ */ jsxs12(GitContext.Provider, { value: git, children: [
         promptDialog,
         confirmDialog,
-        workspaceStartupError && /* @__PURE__ */ jsx13("div", { className: "db-save-toast db-save-toast--error", role: "alert", "aria-live": "assertive", children: workspaceStartupError }),
-        saveToast && /* @__PURE__ */ jsx13(
+        workspaceStartupError && /* @__PURE__ */ jsx14("div", { className: "db-save-toast db-save-toast--error", role: "alert", "aria-live": "assertive", children: workspaceStartupError }),
+        saveToast && /* @__PURE__ */ jsx14(
           "div",
           {
             className: "db-save-toast db-save-toast--" + saveToast.kind,
@@ -7420,22 +7684,22 @@ function DocBlocksShell({
             children: saveToast.message
           }
         ),
-        offlineReadyToast && !saveToast && /* @__PURE__ */ jsx13("div", { className: "db-save-toast db-save-toast--success", role: "status", "aria-live": "polite", children: "DocBlocks is ready to work offline." }),
+        offlineReadyToast && !saveToast && /* @__PURE__ */ jsx14("div", { className: "db-save-toast db-save-toast--success", role: "status", "aria-live": "polite", children: "DocBlocks is ready to work offline." }),
         documentSnapshot.conflict && /* @__PURE__ */ jsxs12("div", { className: "db-document-conflict", role: "alert", children: [
-          /* @__PURE__ */ jsx13("span", { children: "This document changed outside DocBlocks. Your unsaved version is still intact." }),
+          /* @__PURE__ */ jsx14("span", { children: "This document changed outside DocBlocks. Your unsaved version is still intact." }),
           /* @__PURE__ */ jsxs12("div", { className: "db-document-conflict-actions", children: [
-            /* @__PURE__ */ jsx13("button", { type: "button", onClick: () => void handleKeepLocalDocument(), children: "Keep mine" }),
-            /* @__PURE__ */ jsx13("button", { type: "button", onClick: () => void handleUseExternalDocument(), children: "Reload external" })
+            /* @__PURE__ */ jsx14("button", { type: "button", onClick: () => void handleKeepLocalDocument(), children: "Keep mine" }),
+            /* @__PURE__ */ jsx14("button", { type: "button", onClick: () => void handleUseExternalDocument(), children: "Reload external" })
           ] })
         ] }),
         storageFull && !documentSnapshot.conflict && /* @__PURE__ */ jsxs12("div", { className: "db-storage-full-banner", role: "alert", children: [
-          /* @__PURE__ */ jsx13("span", { children: "Browser storage is full -- changes can\u2019t be saved. Free up space or back up your work now." }),
+          /* @__PURE__ */ jsx14("span", { children: "Browser storage is full -- changes can\u2019t be saved. Free up space or back up your work now." }),
           /* @__PURE__ */ jsxs12("div", { className: "db-storage-full-banner-actions", children: [
-            /* @__PURE__ */ jsx13("button", { type: "button", onClick: () => void handleDownloadAllWorkspaces(), children: "Download all workspaces" }),
-            /* @__PURE__ */ jsx13("button", { type: "button", onClick: () => setStorageFull(false), children: "Dismiss" })
+            /* @__PURE__ */ jsx14("button", { type: "button", onClick: () => void handleDownloadAllWorkspaces(), children: "Download all workspaces" }),
+            /* @__PURE__ */ jsx14("button", { type: "button", onClick: () => setStorageFull(false), children: "Dismiss" })
           ] })
         ] }),
-        workspaceSettingsOpen && activeWorkspaceDescriptor && /* @__PURE__ */ jsx13(
+        workspaceSettingsOpen && activeWorkspaceDescriptor && /* @__PURE__ */ jsx14(
           WorkspaceSettingsDialog,
           {
             workspace: activeWorkspaceDescriptor,
@@ -7454,7 +7718,7 @@ function DocBlocksShell({
               style: effectiveCompact ? void 0 : { width: `${sidebarWidth}px` },
               children: [
                 /* @__PURE__ */ jsxs12("div", { className: "db-shell-sidebar-header", children: [
-                  /* @__PURE__ */ jsx13(
+                  /* @__PURE__ */ jsx14(
                     AppMenu,
                     {
                       logoUrl,
@@ -7475,7 +7739,7 @@ function DocBlocksShell({
                       appBuildDate
                     }
                   ),
-                  /* @__PURE__ */ jsx13(
+                  /* @__PURE__ */ jsx14(
                     WorkspacePicker,
                     {
                       activeWorkspaceId,
@@ -7485,7 +7749,7 @@ function DocBlocksShell({
                       onCloneRepository: git.available ? () => git.openDialog({ kind: "clone" }) : void 0
                     }
                   ),
-                  /* @__PURE__ */ jsx13(
+                  /* @__PURE__ */ jsx14(
                     WorkspaceSettingsButton,
                     {
                       onSettings: handleOpenWorkspaceSettings,
@@ -7494,31 +7758,34 @@ function DocBlocksShell({
                       onRemove: handleRemoveWorkspace
                     }
                   ),
-                  compactLayout && !isMobile && /* @__PURE__ */ jsx13(
+                  compactLayout && !isMobile && /* @__PURE__ */ jsx14(
                     "button",
                     {
                       className: "db-restore-split",
                       onClick: () => setCompactLayout(false),
                       "aria-label": "Restore split view",
                       title: "Restore split view",
-                      children: /* @__PURE__ */ jsx13(SplitViewIcon, {})
+                      children: /* @__PURE__ */ jsx14(SplitViewIcon, {})
                     }
                   ),
-                  /* @__PURE__ */ jsx13("span", { className: "db-window-drag-grip", "aria-hidden": true })
+                  /* @__PURE__ */ jsx14("span", { className: "db-window-drag-grip", "aria-hidden": true })
                 ] }),
-                git.available && /* @__PURE__ */ jsx13(Suspense2, { fallback: null, children: /* @__PURE__ */ jsx13(
+                git.available && /* @__PURE__ */ jsx14(Suspense2, { fallback: null, children: /* @__PURE__ */ jsx14(
                   GitUI,
                   {
                     onOpenFile: (path) => void handleSelect(path, "file"),
                     onWorkspaceCloned: handleWorkspaceCloned
                   }
                 ) }),
-                /* @__PURE__ */ jsx13(
+                /* @__PURE__ */ jsx14(
                   FileExplorer,
                   {
                     provider,
+                    metadataRefreshKey: `${documentSnapshot.targetKey ?? ""}:${documentSnapshot.persistedRevision}`,
                     activeWorkspaceId,
                     activeFilePath: selectedFile,
+                    sortMode: fileExplorerSortMode,
+                    onSortModeChange: handleFileExplorerSortModeChange,
                     pinnedDocuments: pinnedDocumentItems,
                     pinnedPaths: activeWorkspacePinnedPaths,
                     onPinnedDocumentSelect: (document2) => void handlePinnedDocumentSelect(document2),
@@ -7542,11 +7809,11 @@ function DocBlocksShell({
                     className: "db-mobile-first-run",
                     "aria-labelledby": "db-mobile-first-run-title",
                     children: [
-                      /* @__PURE__ */ jsx13("p", { className: "db-mobile-first-run-eyebrow", children: "Local-first Markdown editor" }),
-                      /* @__PURE__ */ jsx13("h1", { id: "db-mobile-first-run-title", children: "Welcome to DocBlocks" }),
-                      /* @__PURE__ */ jsx13("p", { children: "Write visually, keep plain Markdown underneath, and export the same document in useful formats. Your browser workspace stays on this device." }),
+                      /* @__PURE__ */ jsx14("p", { className: "db-mobile-first-run-eyebrow", children: "Local-first Markdown editor" }),
+                      /* @__PURE__ */ jsx14("h1", { id: "db-mobile-first-run-title", children: "Welcome to DocBlocks" }),
+                      /* @__PURE__ */ jsx14("p", { children: "Write visually, keep plain Markdown underneath, and export the same document in useful formats. Your browser workspace stays on this device." }),
                       /* @__PURE__ */ jsxs12("div", { className: "db-mobile-first-run-actions", children: [
-                        /* @__PURE__ */ jsx13(
+                        /* @__PURE__ */ jsx14(
                           "button",
                           {
                             type: "button",
@@ -7557,7 +7824,7 @@ function DocBlocksShell({
                             children: "Tour the welcome document"
                           }
                         ),
-                        /* @__PURE__ */ jsx13(
+                        /* @__PURE__ */ jsx14(
                           "button",
                           {
                             type: "button",
@@ -7571,14 +7838,14 @@ function DocBlocksShell({
                   }
                 ),
                 /* @__PURE__ */ jsxs12("div", { className: "db-shell-sidebar-footer", children: [
-                  /* @__PURE__ */ jsx13("a", { href: "https://docblocks.com/docs/", target: "_blank", rel: "noopener noreferrer", children: "Docs" }),
-                  /* @__PURE__ */ jsx13("span", { className: "db-shell-sidebar-footer-separator", "aria-hidden": "true", children: "\u2022" }),
-                  /* @__PURE__ */ jsx13("a", { href: "https://docblocks.com/terms/", target: "_blank", rel: "noopener noreferrer", children: "Terms" }),
-                  /* @__PURE__ */ jsx13("span", { className: "db-shell-sidebar-footer-separator", "aria-hidden": "true", children: "\u2022" }),
-                  /* @__PURE__ */ jsx13("a", { href: issueReportUrl, target: "_blank", rel: "noopener noreferrer", children: "Report issue" }),
+                  /* @__PURE__ */ jsx14("a", { href: "https://docblocks.com/docs/", target: "_blank", rel: "noopener noreferrer", children: "Docs" }),
+                  /* @__PURE__ */ jsx14("span", { className: "db-shell-sidebar-footer-separator", "aria-hidden": "true", children: "\u2022" }),
+                  /* @__PURE__ */ jsx14("a", { href: "https://docblocks.com/terms/", target: "_blank", rel: "noopener noreferrer", children: "Terms" }),
+                  /* @__PURE__ */ jsx14("span", { className: "db-shell-sidebar-footer-separator", "aria-hidden": "true", children: "\u2022" }),
+                  /* @__PURE__ */ jsx14("a", { href: issueReportUrl, target: "_blank", rel: "noopener noreferrer", children: "Report issue" }),
                   showBrowserStorageWarning && /* @__PURE__ */ jsxs12(Fragment7, { children: [
-                    /* @__PURE__ */ jsx13("span", { className: "db-shell-sidebar-footer-separator", "aria-hidden": "true", children: "\u2022" }),
-                    /* @__PURE__ */ jsx13(
+                    /* @__PURE__ */ jsx14("span", { className: "db-shell-sidebar-footer-separator", "aria-hidden": "true", children: "\u2022" }),
+                    /* @__PURE__ */ jsx14(
                       "button",
                       {
                         type: "button",
@@ -7593,7 +7860,7 @@ function DocBlocksShell({
               ]
             }
           ),
-          !effectiveCompact && /* @__PURE__ */ jsx13(
+          !effectiveCompact && /* @__PURE__ */ jsx14(
             "div",
             {
               className: "db-shell-sidebar-resizer",
@@ -7617,11 +7884,11 @@ function DocBlocksShell({
               },
               children: [
                 selectedFile && mediaProvider ? /* @__PURE__ */ jsxs12(Fragment7, { children: [
-                  /* @__PURE__ */ jsx13(
+                  /* @__PURE__ */ jsx14(
                     Suspense2,
                     {
-                      fallback: /* @__PURE__ */ jsx13("div", { className: "db-shell-empty", role: "status", children: "Loading your document\u2026" }),
-                      children: /* @__PURE__ */ jsx13(
+                      fallback: /* @__PURE__ */ jsx14("div", { className: "db-shell-empty", role: "status", children: "Loading your document\u2026" }),
+                      children: /* @__PURE__ */ jsx14(
                         EditorShell,
                         {
                           initialMarkdown: editorContent,
@@ -7647,32 +7914,33 @@ function DocBlocksShell({
                           versioningAutoSaveIdleMs,
                           onSaveVersion,
                           statusBarSlotRight,
-                          toolbarSlotLeft: effectiveCompact ? /* @__PURE__ */ jsx13(
+                          toolbarSlotLeft: effectiveCompact ? /* @__PURE__ */ jsx14(
                             "button",
                             {
                               className: "db-mobile-back",
                               onClick: () => setMobileShowEditor(false),
                               "aria-label": "Show file list",
-                              children: /* @__PURE__ */ jsx13("span", { className: "db-mobile-files-icon", children: /* @__PURE__ */ jsx13(FolderGlyph, {}) })
+                              children: /* @__PURE__ */ jsx14("span", { className: "db-mobile-files-icon", children: /* @__PURE__ */ jsx14(FolderGlyph, {}) })
                             }
                           ) : void 0,
                           toolbarSlotRight: /* @__PURE__ */ jsxs12(Fragment7, { children: [
-                            compactLayout && !isMobile && /* @__PURE__ */ jsx13(
+                            compactLayout && !isMobile && /* @__PURE__ */ jsx14(
                               "button",
                               {
                                 className: "db-restore-split",
                                 onClick: () => setCompactLayout(false),
                                 "aria-label": "Restore split view",
                                 title: "Restore split view",
-                                children: /* @__PURE__ */ jsx13(SplitViewIcon, {})
+                                children: /* @__PURE__ */ jsx14(SplitViewIcon, {})
                               }
                             ),
-                            git.repo && /* @__PURE__ */ jsx13(Suspense2, { fallback: null, children: /* @__PURE__ */ jsx13(GitToolbarControl, { selectedFile }) }),
-                            /* @__PURE__ */ jsx13(
+                            git.repo && /* @__PURE__ */ jsx14(Suspense2, { fallback: null, children: /* @__PURE__ */ jsx14(GitToolbarControl, { selectedFile }) }),
+                            /* @__PURE__ */ jsx14(
                               ExportToolbarControls,
                               {
                                 selectedFile,
                                 mediaContainer: mediaContainerRef.current,
+                                mediaProvider,
                                 destinationAdapter: exportDestinationAdapter,
                                 colorScheme: resolvedTheme,
                                 videoExportPalette: DOCBLOCKS_VIDEO_EXPORT_PALETTE,
@@ -7689,12 +7957,12 @@ function DocBlocksShell({
                   showWelcomeGateway && !isMobile && /* @__PURE__ */ jsxs12("div", { className: "db-welcome-gateway", role: "note", "aria-label": "Welcome tip", children: [
                     /* @__PURE__ */ jsxs12("span", { className: "db-welcome-gateway-text", children: [
                       "You\u2019re watching this welcome doc in ",
-                      /* @__PURE__ */ jsx13("strong", { children: "Slideshow" }),
+                      /* @__PURE__ */ jsx14("strong", { children: "Slideshow" }),
                       " ",
                       "view\u2014 it\u2019s a regular markdown file, and so is everything you\u2019ll write."
                     ] }),
-                    /* @__PURE__ */ jsx13("button", { className: "db-welcome-gateway-cta", onClick: handleStartWriting, children: "Start writing" }),
-                    /* @__PURE__ */ jsx13(
+                    /* @__PURE__ */ jsx14("button", { className: "db-welcome-gateway-cta", onClick: handleStartWriting, children: "Start writing" }),
+                    /* @__PURE__ */ jsx14(
                       "button",
                       {
                         className: "db-welcome-gateway-dismiss",
@@ -7707,20 +7975,20 @@ function DocBlocksShell({
                   ] })
                 ] }) : selectedFolder ? /* @__PURE__ */ jsxs12("div", { className: "db-folder-view", children: [
                   effectiveCompact && /* @__PURE__ */ jsxs12("button", { className: "db-mobile-back", onClick: () => setMobileShowEditor(false), children: [
-                    /* @__PURE__ */ jsx13("span", { className: "db-mobile-files-icon", children: /* @__PURE__ */ jsx13(FolderGlyph, {}) }),
+                    /* @__PURE__ */ jsx14("span", { className: "db-mobile-files-icon", children: /* @__PURE__ */ jsx14(FolderGlyph, {}) }),
                     "Back to files"
                   ] }),
                   /* @__PURE__ */ jsxs12("div", { className: "db-folder-view-header", children: [
-                    /* @__PURE__ */ jsx13("span", { className: "db-folder-view-icon", children: /* @__PURE__ */ jsx13(FolderGlyph, {}) }),
-                    /* @__PURE__ */ jsx13("span", { className: "db-folder-view-path", children: selectedFolder })
+                    /* @__PURE__ */ jsx14("span", { className: "db-folder-view-icon", children: /* @__PURE__ */ jsx14(FolderGlyph, {}) }),
+                    /* @__PURE__ */ jsx14("span", { className: "db-folder-view-path", children: selectedFolder })
                   ] }),
-                  visibleFolderEntries.length === 0 ? /* @__PURE__ */ jsx13("p", { className: "db-folder-view-empty", children: "This folder is empty." }) : /* @__PURE__ */ jsx13("ul", { className: "db-folder-view-list", children: visibleFolderEntries.map((entry) => /* @__PURE__ */ jsxs12(
+                  visibleFolderEntries.length === 0 ? /* @__PURE__ */ jsx14("p", { className: "db-folder-view-empty", children: "This folder is empty." }) : /* @__PURE__ */ jsx14("ul", { className: "db-folder-view-list", children: visibleFolderEntries.map((entry) => /* @__PURE__ */ jsxs12(
                     "li",
                     {
                       className: "db-folder-view-item",
                       onClick: () => handleSelect(entry.path, entry.kind),
                       children: [
-                        /* @__PURE__ */ jsx13("span", { className: "db-folder-view-item-icon", children: entry.kind === "directory" ? /* @__PURE__ */ jsx13(FolderGlyph, {}) : /* @__PURE__ */ jsx13(FileGlyph, {}) }),
+                        /* @__PURE__ */ jsx14("span", { className: "db-folder-view-item-icon", children: entry.kind === "directory" ? /* @__PURE__ */ jsx14(FolderGlyph, {}) : /* @__PURE__ */ jsx14(FileGlyph, {}) }),
                         entry.name
                       ]
                     },
@@ -7728,16 +7996,16 @@ function DocBlocksShell({
                   )) })
                 ] }) : /* @__PURE__ */ jsxs12("div", { className: "db-shell-empty db-shell-empty--workspace", children: [
                   effectiveCompact && /* @__PURE__ */ jsxs12("button", { className: "db-mobile-back", onClick: () => setMobileShowEditor(false), children: [
-                    /* @__PURE__ */ jsx13("span", { className: "db-mobile-files-icon", children: /* @__PURE__ */ jsx13(FolderGlyph, {}) }),
+                    /* @__PURE__ */ jsx14("span", { className: "db-mobile-files-icon", children: /* @__PURE__ */ jsx14(FolderGlyph, {}) }),
                     "Back to files"
                   ] }),
                   /* @__PURE__ */ jsxs12("div", { className: "db-workspace-empty-content", children: [
-                    /* @__PURE__ */ jsx13("span", { className: "db-workspace-empty-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx13(FileGlyph, {}) }),
-                    /* @__PURE__ */ jsx13("h1", { children: activeWorkspaceDescriptor?.name ?? "Workspace" }),
-                    /* @__PURE__ */ jsx13("p", { children: "Choose a Markdown document from the sidebar, or create a new one." }),
+                    /* @__PURE__ */ jsx14("span", { className: "db-workspace-empty-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx14(FileGlyph, {}) }),
+                    /* @__PURE__ */ jsx14("h1", { children: activeWorkspaceDescriptor?.name ?? "Workspace" }),
+                    /* @__PURE__ */ jsx14("p", { children: "Choose a Markdown document from the sidebar, or create a new one." }),
                     /* @__PURE__ */ jsxs12("div", { className: "db-workspace-empty-actions", children: [
-                      /* @__PURE__ */ jsx13("button", { type: "button", onClick: () => void handleNewFile(), children: "New document" }),
-                      /* @__PURE__ */ jsx13(
+                      /* @__PURE__ */ jsx14("button", { type: "button", onClick: () => void handleNewFile(), children: "New document" }),
+                      /* @__PURE__ */ jsx14(
                         "button",
                         {
                           type: "button",
@@ -7746,7 +8014,7 @@ function DocBlocksShell({
                           children: "New folder"
                         }
                       ),
-                      (isElectronHost3() || typeof globalThis.showDirectoryPicker === "function") && /* @__PURE__ */ jsx13(
+                      (isElectronHost3() || typeof globalThis.showDirectoryPicker === "function") && /* @__PURE__ */ jsx14(
                         "button",
                         {
                           type: "button",
@@ -7756,10 +8024,10 @@ function DocBlocksShell({
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ jsx13("p", { className: "db-workspace-empty-hint", children: "Browser workspaces stay on this device. Use the sidebar backup action to keep a portable copy." })
+                    /* @__PURE__ */ jsx14("p", { className: "db-workspace-empty-hint", children: "Browser workspaces stay on this device. Use the sidebar backup action to keep a portable copy." })
                   ] })
                 ] }),
-                /* @__PURE__ */ jsx13(
+                /* @__PURE__ */ jsx14(
                   UpdateAvailableNotice,
                   {
                     available: updateAvailable,