@powerhousedao/connect 1.0.24-dev.0 → 1.1.0

package/dist/assets/{content-2lJzkjLx.js → content-DrqtiFBt.js}

@@ -1,11 +1,10 @@
 import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
-import { t as twMerge, B as Button, aO as mergeClassNameProps, aP as INITIAL_SYNC, aQ as SYNCING, S as SUCCESS, C as CONFLICT, aR as MISSING, x as ERROR, aS as ConnectDropdownMenu, aT as useOnClickOutside, aU as useEventListener, aV as useCopyToClipboard, aW as Select, aX as Provider, aY as Root3, aZ as Trigger, a_ as Portal, a$ as Content2, b0 as validateInitialState, b1 as validateStateSchemaName, b2 as validateModules, b3 as useDocumentDrives, A as useUiNodesContext, b4 as useDriveContext, b5 as FILE$1, F as useUnwrappedReactor, b6 as useConnectDid, b7 as useConnectCrypto, o as useTranslation, G as useModal, b8 as useAtomValue, b9 as themeAtom, ba as useUser, bb as useUserPermissions$1, p as useUiNodes, bc as exportFile, bd as useGetDocumentModelModule, be as addActionContext$1, bf as signOperation$1, e as useDocumentDriveServer, bg as useHotkeys, bh as DriveLayout, bi as DriveContextProvider, bj as SearchBar, N as useAnalyticsStore, bk as useQueryClient, u as useQuery, a3 as AnalyticsPath, bl as useAnalyticsEngine, a4 as DateTime, bm as AnalyticsGranularity, bn as useGetEditor, bo as isSameDocument, n as useNavigate, s as useAsyncReactor, bp as useFilteredDocumentModels, bq as useDriveEditor, br as useDocumentDriveById, z as useParams, q as useDocumentDrives$1, w as toast } from "./app-B5yYl0zv.js";
+import { t as twMerge, B as Button, m as mergeClassNameProps, E as ERROR, M as MISSING, C as CONFLICT, S as SUCCESS, k as SYNCING, I as INITIAL_SYNC, l as ConnectDropdownMenu, u as useOnClickOutside, n as useEventListener, o as useCopyToClipboard, p as Select, q as ENSAvatar, P as Provider, v as Root3, T as Trigger, w as Portal, x as Content2, y as validateInitialState, z as validateStateSchemaName, A as validateModules, D as useDocumentDrives, F as useUiNodesContext, G as useDriveContext, H as FILE$1, J as useUnwrappedReactor, K as useConnectDid, L as useConnectCrypto, N as useTranslation, O as useModal, Q as useAtomValue, U as themeAtom, V as useUser, W as useUserPermissions$1, X as useUiNodes, Y as exportFile, Z as useGetDocumentModelModule, _ as addActionContext$1, $ as signOperation$1, a0 as useDocumentDriveServer, a1 as useHotkeys, a2 as useGetEditor, a3 as isSameDocument, a4 as useNavigate, a5 as ErrorBoundary, a6 as DriveLayout, a7 as DriveContextProvider, a8 as SearchBar, a9 as useAsyncReactor, aa as useFilteredDocumentModels, ab as useDriveEditor, ac as useDocumentDriveById, ad as useParams, ae as useDocumentDrives$1, af as toast } from "./app-SJyv410V.js";
 import * as React from "react";
 import React__default, { useState, useCallback, useMemo, useEffect, Fragment, useRef, useLayoutEffect, memo as memo$1, createElement, useSyncExternalStore, Suspense } from "react";
-import { $ as Icon, bX as getDimensions, bY as READ, bZ as nodeOptionsMap, b_ as defaultFileOptions, b$ as DUPLICATE, c0 as RENAME, c1 as WRITE, c2 as DELETE, c3 as defaultFolderOptions, c4 as garbageCollect, c5 as sortOperations, c6 as UI_NODE, aQ as DRIVE, aB as FILE, ae as buildSignedOperation, ax as addFolder, at as generateAddNodeAction, ay as isFolderNode, au as isFileNode, az as deleteNode, aA as updateNode, aC as moveNode, aD as generateNodesCopy, aE as copyNode, aq as generateId$1, c7 as undo, c8 as redo, _ as logger, aR as FOLDER, c9 as useDocumentDispatch$1, an as driveDocumentModelModule, ah as connectConfig } from "./app-loader-CmEZOj3m.js";
-import { E as ENSAvatar, a as ErrorBoundary } from "./router-Ch1WZD-6.js";
+import { _ as Icon, aX as getDimensions, aY as READ, aZ as nodeOptionsMap, a_ as defaultFileOptions, a$ as DELETE, b0 as RENAME, b1 as WRITE, b2 as DUPLICATE, b3 as defaultFolderOptions, b4 as garbageCollect, b5 as sortOperations, b6 as UI_NODE, aP as DRIVE, az as FILE, ae as buildSignedOperation, b7 as generateId$1, aw as isFolderNode, aB as generateNodesCopy, aC as copyNode, aA as moveNode, ay as updateNode, ax as deleteNode, ar as generateAddNodeAction, as as isFileNode, av as addFolder, b8 as undo, b9 as redo, ac as logger, ba as useDocumentDispatch$1, aQ as FOLDER, al as driveDocumentModelModule } from "./app-loader-BsJCIY3v.js";
 import { flushSync } from "react-dom";
-import "./main.DA6nl4Ov.js";
+import "./main.BcxEuVs0.js";
 const PaginationButton = ({ active = false, ...props }) => {
   const className = twMerge("h-8 min-w-8 border border-solid border-gray-300 bg-white px-3 py-1 text-xs text-gray-900 hover:bg-gray-100", !active && "border-0");
   return jsx(Button, { color: "light", size: "small", ...mergeClassNameProps(props, className), children: props.children });
@@ -15,7 +14,7 @@ const Pagination = (props) => {
   return jsxs("div", { className: "flex gap-x-1", children: [firstPageLabel ? jsx(PaginationButton, { disabled: !isPreviousPageAvailable, onClick: () => goToFirstPage(), children: firstPageLabel }) : null, previousPageLabel ? jsxs(PaginationButton, { disabled: !isPreviousPageAvailable, onClick: () => goToPreviousPage(), children: [jsx(Icon, { className: "rotate-90", name: "ChevronDown", size: 16 }), previousPageLabel] }) : null, pages.map((page) => jsx(PaginationButton, { active: page.active, onClick: () => goToPage(page.index), children: page.number }, page.index)), hiddenNextPages ? jsx("span", { className: "flex items-center justify-center px-2", children: "..." }) : null, nextPageLabel ? jsxs(PaginationButton, { disabled: !isNextPageAvailable, onClick: () => goToNextPage(), children: [nextPageLabel, jsx(Icon, { className: "-rotate-90", name: "ChevronDown", size: 16 })] }) : null, lastPageLabel ? jsx(PaginationButton, { disabled: !isNextPageAvailable, onClick: () => goToLastPage(), children: lastPageLabel }) : null] });
 };
 function usePagination(items, options) {
-  const { itemsPerPage = 20, initialPage = 0, pageRange = 3 } = options;
+  const { itemsPerPage = 20, initialPage = 0, pageRange = 3 } = options || {};
   const [currentPage, setCurrentPage] = useState(initialPage);
   const pageCount = Math.ceil(items.length / itemsPerPage);
   const isNextPageAvailable = currentPage < pageCount - 1;
@@ -152,12 +151,131 @@ function DefaultEditorLoader(props) {
   const { message: message2 = "Loading editor", ...divProps } = props;
   return jsx("div", { className: "grid h-full place-items-center", ...divProps, children: jsxs("div", { className: "-mt-20 grid place-items-center", children: [jsx("h3", { className: "mb-4 text-xl", children: message2 }), jsx(AnimatedLoader, {})] }) });
 }
+const DocumentToolbar = (props) => {
+  const { undo: undo2, canUndo, redo: redo2, canRedo, title, onClose, onExport, className, onShowRevisionHistory, onSwitchboardLinkClick, onShowTimeline } = props;
+  const isUndoDisabled = !canUndo || !undo2;
+  const isRedoDisabled = !canRedo || !redo2;
+  const isExportDisabled = !onExport;
+  const isSwitchboardLinkDisabled = !onSwitchboardLinkClick;
+  const isRevisionHistoryDisabled = !onShowRevisionHistory;
+  const isTimelineDisabled = !onShowTimeline;
+  return jsxs("div", { className: twMerge("flex h-12 w-full items-center justify-between rounded-xl border border-gray-200 bg-slate-50 px-4", className), children: [jsxs("div", { className: "flex items-center gap-x-2", children: [jsx("button", { className: twMerge("grid size-8 place-items-center rounded-lg border border-gray-200 bg-white", isUndoDisabled ? "cursor-not-allowed" : "cursor-pointer active:opacity-70"), onClick: undo2, disabled: isUndoDisabled, children: jsx(Icon, { name: "ArrowCouterclockwise", size: 16, className: isUndoDisabled ? "text-gray-500" : "text-gray-900" }) }), jsx("button", { className: twMerge("grid size-8 place-items-center rounded-lg border border-gray-200 bg-white", isRedoDisabled ? "cursor-not-allowed" : "cursor-pointer active:opacity-70"), onClick: redo2, disabled: isRedoDisabled, children: jsx("div", { className: "-scale-x-100", children: jsx(Icon, { name: "ArrowCouterclockwise", size: 16, className: isRedoDisabled ? "text-gray-500" : "text-gray-900" }) }) }), jsx("button", { className: twMerge("flex h-8 items-center rounded-lg border border-gray-200 bg-white px-3 text-sm", isExportDisabled ? "cursor-not-allowed" : "cursor-pointer active:opacity-70"), onClick: onExport, disabled: isExportDisabled, children: jsx("span", { className: isExportDisabled ? "text-gray-500" : "text-gray-900", children: "Export" }) })] }), jsx("div", { className: "flex items-center", children: jsx("h1", { className: "text-sm font-medium text-gray-500", children: title }) }), jsxs("div", { className: "flex items-center gap-x-2", children: [jsx("button", { className: twMerge("grid size-8 place-items-center rounded-lg border border-gray-200 bg-white", isSwitchboardLinkDisabled ? "cursor-not-allowed" : "cursor-pointer active:opacity-70"), onClick: onSwitchboardLinkClick, disabled: isSwitchboardLinkDisabled, children: jsx(Icon, { name: "Drive", size: 16, className: isSwitchboardLinkDisabled ? "text-gray-500" : "text-gray-900" }) }), jsx("button", { className: twMerge("grid size-8 place-items-center rounded-lg border border-gray-200 bg-white", isRevisionHistoryDisabled ? "cursor-not-allowed" : "cursor-pointer active:opacity-70"), onClick: onShowRevisionHistory, disabled: isRevisionHistoryDisabled, children: jsx(Icon, { name: "History", size: 16, className: isRevisionHistoryDisabled ? "text-gray-500" : "text-gray-900" }) }), jsx("button", { className: twMerge("grid size-8 place-items-center rounded-lg border border-gray-200 bg-white", isTimelineDisabled ? "cursor-not-allowed" : "cursor-pointer active:opacity-70"), onClick: onShowTimeline, disabled: isTimelineDisabled, children: jsx(Icon, { name: "Timeline", size: 16, className: twMerge("text-gray-900", isTimelineDisabled && "opacity-50") }) }), jsx("button", { className: "grid size-8 cursor-pointer place-items-center rounded-lg border border-gray-200 bg-white active:opacity-70", onClick: onClose, children: jsx(Icon, { name: "XmarkLight", size: 16, className: "text-gray-900" }) })] })] });
+};
+const syncIcons = {
+  SYNCING: "Syncing",
+  SUCCESS: "Synced",
+  CONFLICT: "Error",
+  MISSING: "Circle",
+  ERROR: "Error",
+  INITIAL_SYNC: "Syncing"
+};
+function SyncStatusIcon(props) {
+  const { syncStatus, className, overrideSyncIcons = {}, ...iconProps } = props;
+  const icons = { ...syncIcons, ...overrideSyncIcons };
+  const syncStatusIcons = {
+    [INITIAL_SYNC]: jsx(Icon, { size: 16, ...iconProps, className: twMerge("text-blue-900", className), name: icons[INITIAL_SYNC] }),
+    [SYNCING]: jsx(Icon, { size: 16, ...iconProps, className: twMerge("text-blue-900", className), name: icons[SYNCING] }),
+    [SUCCESS]: jsx(Icon, { size: 16, ...iconProps, className: twMerge("text-green-900", className), name: icons[SUCCESS] }),
+    [CONFLICT]: jsx(Icon, { size: 16, ...iconProps, className: twMerge("text-orange-900", className), name: icons[CONFLICT] }),
+    [MISSING]: jsx(Icon, { size: 16, ...iconProps, className: twMerge("text-red-900", className), name: icons[MISSING] }),
+    [ERROR]: jsx(Icon, { size: 16, ...iconProps, className: twMerge("text-red-900", className), name: icons[ERROR] })
+  };
+  return syncStatusIcons[syncStatus];
+}
+function FileItem(props) {
+  const { uiNode, className, customDocumentIconSrc, onSelectNode, onRenameNode, onDuplicateNode, onDeleteNode, isAllowedToCreateDocuments } = props;
+  const [mode, setMode] = useState(READ);
+  const [isDropdownMenuOpen, setIsDropdownMenuOpen] = useState(false);
+  const { dragProps } = useDrag({ uiNode });
+  const isReadMode = mode === READ;
+  const dropdownMenuHandlers = {
+    [DUPLICATE]: () => onDuplicateNode(uiNode),
+    [RENAME]: () => setMode(WRITE),
+    [DELETE]: () => onDeleteNode(uiNode)
+  };
+  const dropdownMenuOptions = Object.entries(nodeOptionsMap).map(([id, option]) => ({
+    ...option,
+    id
+  })).filter((option) => defaultFileOptions.includes(option.id));
+  function onSubmit(name) {
+    onRenameNode(name, uiNode);
+    setMode(READ);
+  }
+  function onCancel() {
+    setMode(READ);
+  }
+  function onClick() {
+    onSelectNode(uiNode);
+  }
+  function onDropdownMenuOptionClick(itemId) {
+    const handler = dropdownMenuHandlers[itemId];
+    if (!handler) {
+      console.error(`No handler found for dropdown menu item: ${itemId}`);
+      return;
+    }
+    handler();
+    setIsDropdownMenuOpen(false);
+  }
+  const iconSrc = getDocumentIconSrc(uiNode.documentType, customDocumentIconSrc);
+  const iconNode = jsxs("div", { className: "relative", children: [jsx("img", { alt: "file icon", className: "max-w-none", height: 34, src: iconSrc, width: 32 }), isReadMode && uiNode.syncStatus && jsx("div", { className: "absolute bottom-[-2px] right-0 size-3 rounded-full bg-white", children: jsx("div", { className: "absolute left-[-2px] top-[-2px]", children: jsx(SyncStatusIcon, { overrideSyncIcons: { SUCCESS: "CheckCircleFill" }, syncStatus: uiNode.syncStatus }) }) })] });
+  const containerStyles = twMerge("group flex h-12 cursor-pointer select-none items-center rounded-lg bg-gray-200 px-2 text-gray-600 hover:text-gray-800", className);
+  const content = isReadMode ? jsxs("div", { className: "flex w-52 items-center justify-between", children: [jsxs("div", { className: "mr-2 truncate group-hover:mr-0", children: [jsx("div", { className: "max-h-6 truncate text-sm font-medium group-hover:text-gray-800", children: uiNode.name }), jsx("div", { className: "max-h-6 truncate text-xs font-medium text-gray-600 group-hover:text-gray-800", children: uiNode.documentType })] }), isAllowedToCreateDocuments ? jsx(ConnectDropdownMenu, { items: dropdownMenuOptions, onItemClick: onDropdownMenuOptionClick, onOpenChange: setIsDropdownMenuOpen, open: isDropdownMenuOpen, children: jsx("button", { className: twMerge("hidden group-hover:block", isDropdownMenuOpen && "block"), onClick: (e) => {
+    e.stopPropagation();
+    setIsDropdownMenuOpen(true);
+  }, children: jsx(Icon, { className: "text-gray-600", name: "VerticalDots" }) }) }) : null] }) : jsx(NodeInput, { className: "ml-3 flex-1 font-medium", defaultValue: uiNode.name, onCancel, onSubmit });
+  return jsx("div", { className: "relative w-64", onClick, children: jsx("div", { ...dragProps, className: containerStyles, children: jsxs("div", { className: "flex items-center", children: [jsx("div", { className: "mr-1.5", children: iconNode }), content] }) }) });
+}
+function FolderItem(props) {
+  const { uiNode, isAllowedToCreateDocuments, className, onRenameNode, onDuplicateNode, onDeleteNode, onSelectNode, onAddFile, onCopyNode, onMoveNode } = props;
+  const [mode, setMode] = useState(READ);
+  const [isDropdownMenuOpen, setIsDropdownMenuOpen] = useState(false);
+  const { dragProps } = useDrag({ ...props, uiNode });
+  const { isDropTarget, dropProps } = useDrop({
+    uiNode,
+    onAddFile,
+    onCopyNode,
+    onMoveNode
+  });
+  const isReadMode = mode === READ;
+  function onCancel() {
+    setMode(READ);
+  }
+  function onSubmit(name) {
+    onRenameNode(name, uiNode);
+    setMode(READ);
+  }
+  function onClick() {
+    onSelectNode(uiNode);
+  }
+  const dropdownMenuHandlers = {
+    [DUPLICATE]: () => onDuplicateNode(uiNode),
+    [RENAME]: () => setMode(WRITE),
+    [DELETE]: () => onDeleteNode(uiNode)
+  };
+  const dropdownMenuOptions = Object.entries(nodeOptionsMap).map(([id, option]) => ({
+    ...option,
+    id
+  })).filter((option) => defaultFolderOptions.includes(option.id));
+  function onDropdownMenuOptionClick(itemId) {
+    const handler = dropdownMenuHandlers[itemId];
+    if (!handler) {
+      console.error(`No handler found for dropdown menu item: ${itemId}`);
+      return;
+    }
+    handler();
+    setIsDropdownMenuOpen(false);
+  }
+  const content = isReadMode || !isAllowedToCreateDocuments ? jsx("div", { className: "ml-3 max-h-6 truncate font-medium text-gray-600 group-hover:text-gray-800", children: uiNode.name }) : jsx(NodeInput, { className: "ml-3 font-medium", defaultValue: uiNode.name, onCancel, onSubmit });
+  const containerStyles = twMerge("group flex h-12 cursor-pointer select-none items-center rounded-lg bg-gray-200 px-2", className, isDropTarget && "bg-blue-100");
+  return jsx("div", { className: "relative w-64", onClick, children: jsxs("div", { ...dragProps, ...dropProps, className: containerStyles, children: [jsxs("div", { className: "flex items-center overflow-hidden", children: [jsx("div", { className: "p-1", children: jsxs("div", { className: "relative", children: [jsx(Icon, { name: "FolderClose", size: 24 }), isReadMode && uiNode.syncStatus ? jsx("div", { className: "absolute bottom-[-3px] right-[-2px] size-3 rounded-full bg-white", children: jsx("div", { className: "absolute left-[-2px] top-[-2px]", children: jsx(SyncStatusIcon, { overrideSyncIcons: {
+    SUCCESS: "CheckCircleFill"
+  }, syncStatus: uiNode.syncStatus }) }) }) : null] }) }), content] }), isReadMode && isAllowedToCreateDocuments ? jsx(ConnectDropdownMenu, { items: dropdownMenuOptions, onItemClick: onDropdownMenuOptionClick, onOpenChange: setIsDropdownMenuOpen, open: isDropdownMenuOpen, children: jsx("button", { className: twMerge("ml-auto hidden group-hover:block", isDropdownMenuOpen && "block"), onClick: (e) => {
+    e.stopPropagation();
+    setIsDropdownMenuOpen(true);
+  }, children: jsx(Icon, { className: "text-gray-600", name: "VerticalDots" }) }) }) : null] }) });
+}
 const millisecondsInWeek = 6048e5;
 const millisecondsInDay = 864e5;
-const millisecondsInMinute = 6e4;
-const millisecondsInHour = 36e5;
-const minutesInMonth = 43200;
-const minutesInDay = 1440;
 const constructFromSymbol = Symbol.for("constructDateFrom");
 function constructFrom(date, value) {
   if (typeof date === "function") return date(value);
@@ -225,7 +343,7 @@ function getTimezoneOffsetInMilliseconds(date) {
 function normalizeDates(context, ...dates) {
   const normalize = constructFrom.bind(
     null,
-    context || dates.find((date) => typeof date === "object")
+    dates.find((date) => typeof date === "object")
   );
   return dates.map(normalize);
 }
@@ -253,83 +371,12 @@ function startOfISOWeekYear(date, options) {
   fourthOfJanuary.setHours(0, 0, 0, 0);
   return startOfISOWeek(fourthOfJanuary);
 }
-function compareAsc(dateLeft, dateRight) {
-  const diff = +toDate(dateLeft) - +toDate(dateRight);
-  if (diff < 0) return -1;
-  else if (diff > 0) return 1;
-  return diff;
-}
-function constructNow(date) {
-  return constructFrom(date, Date.now());
-}
 function isDate(value) {
   return value instanceof Date || typeof value === "object" && Object.prototype.toString.call(value) === "[object Date]";
 }
 function isValid(date) {
   return !(!isDate(date) && typeof date !== "number" || isNaN(+toDate(date)));
 }
-function differenceInCalendarMonths(laterDate, earlierDate, options) {
-  const [laterDate_, earlierDate_] = normalizeDates(
-    options == null ? void 0 : options.in,
-    laterDate,
-    earlierDate
-  );
-  const yearsDiff = laterDate_.getFullYear() - earlierDate_.getFullYear();
-  const monthsDiff = laterDate_.getMonth() - earlierDate_.getMonth();
-  return yearsDiff * 12 + monthsDiff;
-}
-function getRoundingMethod(method) {
-  return (number) => {
-    const round = method ? Math[method] : Math.trunc;
-    const result = round(number);
-    return result === 0 ? 0 : result;
-  };
-}
-function differenceInMilliseconds(laterDate, earlierDate) {
-  return +toDate(laterDate) - +toDate(earlierDate);
-}
-function endOfDay(date, options) {
-  const _date = toDate(date, options == null ? void 0 : options.in);
-  _date.setHours(23, 59, 59, 999);
-  return _date;
-}
-function endOfMonth(date, options) {
-  const _date = toDate(date, options == null ? void 0 : options.in);
-  const month = _date.getMonth();
-  _date.setFullYear(_date.getFullYear(), month + 1, 0);
-  _date.setHours(23, 59, 59, 999);
-  return _date;
-}
-function isLastDayOfMonth(date, options) {
-  const _date = toDate(date, options == null ? void 0 : options.in);
-  return +endOfDay(_date, options) === +endOfMonth(_date, options);
-}
-function differenceInMonths(laterDate, earlierDate, options) {
-  const [laterDate_, workingLaterDate, earlierDate_] = normalizeDates(
-    options == null ? void 0 : options.in,
-    laterDate,
-    laterDate,
-    earlierDate
-  );
-  const sign = compareAsc(workingLaterDate, earlierDate_);
-  const difference = Math.abs(
-    differenceInCalendarMonths(workingLaterDate, earlierDate_)
-  );
-  if (difference < 1) return 0;
-  if (workingLaterDate.getMonth() === 1 && workingLaterDate.getDate() > 27)
-    workingLaterDate.setDate(30);
-  workingLaterDate.setMonth(workingLaterDate.getMonth() - sign * difference);
-  let isLastMonthNotFull = compareAsc(workingLaterDate, earlierDate_) === -sign;
-  if (isLastDayOfMonth(laterDate_) && difference === 1 && compareAsc(laterDate_, earlierDate_) === 1) {
-    isLastMonthNotFull = false;
-  }
-  const result = sign * (difference - +isLastMonthNotFull);
-  return result === 0 ? 0 : result;
-}
-function differenceInSeconds(laterDate, earlierDate, options) {
-  const diff = differenceInMilliseconds(laterDate, earlierDate) / 1e3;
-  return getRoundingMethod(options == null ? void 0 : options.roundingMethod)(diff);
-}
 function startOfYear(date, options) {
   const date_ = toDate(date, options == null ? void 0 : options.in);
   date_.setFullYear(date_.getFullYear(), 0, 1);
@@ -399,7 +446,7 @@ const formatDistanceLocale = {
     other: "almost {{count}} years"
   }
 };
-const formatDistance$1 = (token, count, options) => {
+const formatDistance = (token, count, options) => {
   let result;
   const tokenValue = formatDistanceLocale[token];
   if (typeof tokenValue === "string") {
@@ -815,7 +862,7 @@ const match = {
 };
 const enUS = {
   code: "en-US",
-  formatDistance: formatDistance$1,
+  formatDistance,
   formatLong,
   formatRelative,
   localize,
@@ -938,8 +985,6 @@ const lightFormatters = {
   }
 };
 const dayPeriodEnum = {
-  am: "am",
-  pm: "pm",
   midnight: "midnight",
   noon: "noon",
   morning: "morning",
@@ -1719,572 +1764,73 @@ function cleanEscapedString(input) {
   }
   return matched[1].replace(doubleQuoteRegExp, "'");
 }
-function formatDistance(laterDate, earlierDate, options) {
-  const defaultOptions2 = getDefaultOptions();
-  const locale = (options == null ? void 0 : options.locale) ?? defaultOptions2.locale ?? enUS;
-  const minutesInAlmostTwoDays = 2520;
-  const comparison = compareAsc(laterDate, earlierDate);
-  if (isNaN(comparison)) throw new RangeError("Invalid time value");
-  const localizeOptions = Object.assign({}, options, {
-    addSuffix: options == null ? void 0 : options.addSuffix,
-    comparison
-  });
-  const [laterDate_, earlierDate_] = normalizeDates(
-    options == null ? void 0 : options.in,
-    ...comparison > 0 ? [earlierDate, laterDate] : [laterDate, earlierDate]
-  );
-  const seconds = differenceInSeconds(earlierDate_, laterDate_);
-  const offsetInSeconds = (getTimezoneOffsetInMilliseconds(earlierDate_) - getTimezoneOffsetInMilliseconds(laterDate_)) / 1e3;
-  const minutes = Math.round((seconds - offsetInSeconds) / 60);
-  let months;
-  if (minutes < 2) {
-    if (options == null ? void 0 : options.includeSeconds) {
-      if (seconds < 5) {
-        return locale.formatDistance("lessThanXSeconds", 5, localizeOptions);
-      } else if (seconds < 10) {
-        return locale.formatDistance("lessThanXSeconds", 10, localizeOptions);
-      } else if (seconds < 20) {
-        return locale.formatDistance("lessThanXSeconds", 20, localizeOptions);
-      } else if (seconds < 40) {
-        return locale.formatDistance("halfAMinute", 0, localizeOptions);
-      } else if (seconds < 60) {
-        return locale.formatDistance("lessThanXMinutes", 1, localizeOptions);
-      } else {
-        return locale.formatDistance("xMinutes", 1, localizeOptions);
-      }
-    } else {
-      if (minutes === 0) {
-        return locale.formatDistance("lessThanXMinutes", 1, localizeOptions);
-      } else {
-        return locale.formatDistance("xMinutes", minutes, localizeOptions);
-      }
-    }
-  } else if (minutes < 45) {
-    return locale.formatDistance("xMinutes", minutes, localizeOptions);
-  } else if (minutes < 90) {
-    return locale.formatDistance("aboutXHours", 1, localizeOptions);
-  } else if (minutes < minutesInDay) {
-    const hours = Math.round(minutes / 60);
-    return locale.formatDistance("aboutXHours", hours, localizeOptions);
-  } else if (minutes < minutesInAlmostTwoDays) {
-    return locale.formatDistance("xDays", 1, localizeOptions);
-  } else if (minutes < minutesInMonth) {
-    const days = Math.round(minutes / minutesInDay);
-    return locale.formatDistance("xDays", days, localizeOptions);
-  } else if (minutes < minutesInMonth * 2) {
-    months = Math.round(minutes / minutesInMonth);
-    return locale.formatDistance("aboutXMonths", months, localizeOptions);
-  }
-  months = differenceInMonths(earlierDate_, laterDate_);
-  if (months < 12) {
-    const nearestMonth = Math.round(minutes / minutesInMonth);
-    return locale.formatDistance("xMonths", nearestMonth, localizeOptions);
-  } else {
-    const monthsSinceStartOfYear = months % 12;
-    const years = Math.trunc(months / 12);
-    if (monthsSinceStartOfYear < 3) {
-      return locale.formatDistance("aboutXYears", years, localizeOptions);
-    } else if (monthsSinceStartOfYear < 9) {
-      return locale.formatDistance("overXYears", years, localizeOptions);
-    } else {
-      return locale.formatDistance("almostXYears", years + 1, localizeOptions);
-    }
-  }
-}
-function formatDistanceToNow(date, options) {
-  return formatDistance(date, constructNow(date), options);
-}
-function parseISO(argument, options) {
-  const invalidDate = () => constructFrom(options == null ? void 0 : options.in, NaN);
-  const additionalDigits = 2;
-  const dateStrings = splitDateString(argument);
-  let date;
-  if (dateStrings.date) {
-    const parseYearResult = parseYear(dateStrings.date, additionalDigits);
-    date = parseDate(parseYearResult.restDateString, parseYearResult.year);
-  }
-  if (!date || isNaN(+date)) return invalidDate();
-  const timestamp = +date;
-  let time = 0;
-  let offset;
-  if (dateStrings.time) {
-    time = parseTime(dateStrings.time);
-    if (isNaN(time)) return invalidDate();
-  }
-  if (dateStrings.timezone) {
-    offset = parseTimezone(dateStrings.timezone);
-    if (isNaN(offset)) return invalidDate();
-  } else {
-    const tmpDate = new Date(timestamp + time);
-    const result = toDate(0, options == null ? void 0 : options.in);
-    result.setFullYear(
-      tmpDate.getUTCFullYear(),
-      tmpDate.getUTCMonth(),
-      tmpDate.getUTCDate()
-    );
-    result.setHours(
-      tmpDate.getUTCHours(),
-      tmpDate.getUTCMinutes(),
-      tmpDate.getUTCSeconds(),
-      tmpDate.getUTCMilliseconds()
-    );
-    return result;
-  }
-  return toDate(timestamp + time + offset, options == null ? void 0 : options.in);
-}
-const patterns = {
-  dateTimeDelimiter: /[T ]/,
-  timeZoneDelimiter: /[Z ]/i,
-  timezone: /([Z+-].*)$/
-};
-const dateRegex = /^-?(?:(\d{3})|(\d{2})(?:-?(\d{2}))?|W(\d{2})(?:-?(\d{1}))?|)$/;
-const timeRegex = /^(\d{2}(?:[.,]\d*)?)(?::?(\d{2}(?:[.,]\d*)?))?(?::?(\d{2}(?:[.,]\d*)?))?$/;
-const timezoneRegex = /^([+-])(\d{2})(?::?(\d{2}))?$/;
-function splitDateString(dateString) {
-  const dateStrings = {};
-  const array = dateString.split(patterns.dateTimeDelimiter);
-  let timeString;
-  if (array.length > 2) {
-    return dateStrings;
-  }
-  if (/:/.test(array[0])) {
-    timeString = array[0];
-  } else {
-    dateStrings.date = array[0];
-    timeString = array[1];
-    if (patterns.timeZoneDelimiter.test(dateStrings.date)) {
-      dateStrings.date = dateString.split(patterns.timeZoneDelimiter)[0];
-      timeString = dateString.substr(
-        dateStrings.date.length,
-        dateString.length
-      );
-    }
-  }
-  if (timeString) {
-    const token = patterns.timezone.exec(timeString);
-    if (token) {
-      dateStrings.time = timeString.replace(token[1], "");
-      dateStrings.timezone = token[1];
-    } else {
-      dateStrings.time = timeString;
+function NodeInput(props) {
+  const { onSubmit, onCancel, defaultValue, className, minLength = 1, ...inputProps } = props;
+  const [value, setValue] = useState(defaultValue ?? "");
+  const ref = useRef(null);
+  useOnClickOutside(ref, handleSubmit);
+  useEventListener("keyup", (e) => {
+    if (e.key === "Enter") {
+      handleSubmit();
     }
-  }
-  return dateStrings;
-}
-function parseYear(dateString, additionalDigits) {
-  const regex = new RegExp(
-    "^(?:(\\d{4}|[+-]\\d{" + (4 + additionalDigits) + "})|(\\d{2}|[+-]\\d{" + (2 + additionalDigits) + "})$)"
-  );
-  const captures = dateString.match(regex);
-  if (!captures) return { year: NaN, restDateString: "" };
-  const year = captures[1] ? parseInt(captures[1]) : null;
-  const century = captures[2] ? parseInt(captures[2]) : null;
-  return {
-    year: century === null ? year : century * 100,
-    restDateString: dateString.slice((captures[1] || captures[2]).length)
-  };
-}
-function parseDate(dateString, year) {
-  if (year === null) return /* @__PURE__ */ new Date(NaN);
-  const captures = dateString.match(dateRegex);
-  if (!captures) return /* @__PURE__ */ new Date(NaN);
-  const isWeekDate = !!captures[4];
-  const dayOfYear = parseDateUnit(captures[1]);
-  const month = parseDateUnit(captures[2]) - 1;
-  const day = parseDateUnit(captures[3]);
-  const week = parseDateUnit(captures[4]);
-  const dayOfWeek = parseDateUnit(captures[5]) - 1;
-  if (isWeekDate) {
-    if (!validateWeekDate(year, week, dayOfWeek)) {
-      return /* @__PURE__ */ new Date(NaN);
+    if (e.key === "Escape") {
+      onCancel();
     }
-    return dayOfISOWeekYear(year, week, dayOfWeek);
-  } else {
-    const date = /* @__PURE__ */ new Date(0);
-    if (!validateDate(year, month, day) || !validateDayOfYearDate(year, dayOfYear)) {
-      return /* @__PURE__ */ new Date(NaN);
+  });
+  useLayoutEffect(() => {
+    setTimeout(() => {
+      var _a, _b, _c;
+      (_a = ref.current) == null ? void 0 : _a.focus();
+      (_b = ref.current) == null ? void 0 : _b.select();
+      (_c = ref.current) == null ? void 0 : _c.scroll({ left: 9999 });
+    }, 100);
+  }, []);
+  function handleSubmit() {
+    if (value.length >= minLength) {
+      onSubmit(value);
     }
-    date.setUTCFullYear(year, month, Math.max(dayOfYear, day));
-    return date;
-  }
-}
-function parseDateUnit(value) {
-  return value ? parseInt(value) : 1;
-}
-function parseTime(timeString) {
-  const captures = timeString.match(timeRegex);
-  if (!captures) return NaN;
-  const hours = parseTimeUnit(captures[1]);
-  const minutes = parseTimeUnit(captures[2]);
-  const seconds = parseTimeUnit(captures[3]);
-  if (!validateTime(hours, minutes, seconds)) {
-    return NaN;
   }
-  return hours * millisecondsInHour + minutes * millisecondsInMinute + seconds * 1e3;
+  return jsx("input", { ...inputProps, autoFocus: true, className: twMerge("bg-inherit text-inherit outline-none", className), minLength, onChange: (e) => setValue(e.target.value), ref, required: true, type: "text", value });
 }
-function parseTimeUnit(value) {
-  return value && parseFloat(value.replace(",", ".")) || 0;
+function Branch(props) {
+  const { branch = "main" } = props;
+  return jsxs("button", { className: "flex h-8 items-center gap-1 rounded-lg bg-slate-50 pl-1 pr-2 text-xs text-slate-100", children: [jsx(Icon, { name: "Branch" }), jsx("span", { children: "BRANCH" }), jsx("span", { className: "text-gray-900", children: branch })] });
 }
-function parseTimezone(timezoneString) {
-  if (timezoneString === "Z") return 0;
-  const captures = timezoneString.match(timezoneRegex);
-  if (!captures) return 0;
-  const sign = captures[1] === "+" ? -1 : 1;
-  const hours = parseInt(captures[2]);
-  const minutes = captures[3] && parseInt(captures[3]) || 0;
-  if (!validateTimezone(hours, minutes)) {
-    return NaN;
+function DocId(props) {
+  const { docId } = props;
+  const [, copy] = useCopyToClipboard();
+  function handleCopy(text) {
+    return () => {
+      copy(text).catch((error) => {
+        console.error("Failed to copy!", error);
+      });
+    };
   }
-  return sign * (hours * millisecondsInHour + minutes * millisecondsInMinute);
-}
-function dayOfISOWeekYear(isoWeekYear, week, day) {
-  const date = /* @__PURE__ */ new Date(0);
-  date.setUTCFullYear(isoWeekYear, 0, 4);
-  const fourthOfJanuaryDay = date.getUTCDay() || 7;
-  const diff = (week - 1) * 7 + day + 1 - fourthOfJanuaryDay;
-  date.setUTCDate(date.getUTCDate() + diff);
-  return date;
-}
-const daysInMonths = [31, null, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
-function isLeapYearIndex(year) {
-  return year % 400 === 0 || year % 4 === 0 && year % 100 !== 0;
-}
-function validateDate(year, month, date) {
-  return month >= 0 && month <= 11 && date >= 1 && date <= (daysInMonths[month] || (isLeapYearIndex(year) ? 29 : 28));
-}
-function validateDayOfYearDate(year, dayOfYear) {
-  return dayOfYear >= 1 && dayOfYear <= (isLeapYearIndex(year) ? 366 : 365);
-}
-function validateWeekDate(_year, week, day) {
-  return week >= 1 && week <= 53 && day >= 0 && day <= 6;
+  return jsxs("button", { className: "flex h-8 items-center gap-1 rounded-lg bg-slate-50 pl-1 pr-2 text-xs text-slate-100", onClick: handleCopy(docId), children: [jsx(Icon, { name: "Link" }), "DOC ID", jsx("span", { className: "text-gray-900", children: docId })] });
 }
-function validateTime(hours, minutes, seconds) {
-  if (hours === 24) {
-    return minutes === 0 && seconds === 0;
-  }
-  return seconds >= 0 && seconds < 60 && minutes >= 0 && minutes < 60 && hours >= 0 && hours < 25;
+function Scope(props) {
+  const { value, onChange } = props;
+  const items = [
+    { displayValue: "Global scope", value: "global" },
+    { displayValue: "Local scope", value: "local" }
+  ];
+  return jsx(Select, { absolutePositionMenu: true, containerClassName: "bg-slate-50 text-gray-500 rounded-lg w-fit text-xs z-10", id: "scope select", itemClassName: "py-2 text-gray-500 grid grid-cols-[auto,auto] gap-1", items, menuClassName: "min-w-0 text-gray-500", onChange, value });
 }
-function validateTimezone(_hours, minutes) {
-  return minutes >= 0 && minutes <= 59;
+function Header(props) {
+  const { title, docId, scope, onChangeScope, onClose, className, ...divProps } = props;
+  return jsxs("header", { className: twMerge("flex items-center justify-between bg-transparent", className), ...divProps, children: [jsxs("div", { className: "flex items-center gap-3", children: [jsx("button", { className: "shadow-button rounded-lg bg-gray-50 p-1 text-slate-100", onClick: onClose, children: jsx(Icon, { name: "VariantArrowLeft" }) }), jsx("h1", { className: "text-xs", children: title })] }), jsxs("div", { className: "flex items-center gap-2", children: [jsx(DocId, { docId }), jsx(Branch, {}), jsx(Scope, { onChange: onChangeScope, value: scope })] })] });
 }
-const HDivider = (props) => {
-  const { className, timestamp, title, subtitle, onClick, isSelected = false } = props;
-  const [open, setOpen] = useState(false);
-  const hasContent = !!title || !!subtitle || !!timestamp;
-  useEffect(() => {
-    if (open) {
-      setOpen(false);
-      setTimeout(() => hasContent && setOpen(true), 50);
-    }
-  }, [title, subtitle, timestamp, hasContent]);
-  const formatTimestamp2 = (isoString) => {
-    if (!isoString)
-      return "";
-    try {
-      return formatDistanceToNow(new Date(isoString), { addSuffix: true });
-    } catch {
-      return isoString;
-    }
-  };
-  const tooltipContent = jsxs("div", { className: "flex flex-col text-xs", children: [!!title && jsx("div", { children: title }), !!subtitle && jsx("div", { className: "text-gray-300", children: subtitle }), !!timestamp && jsx("div", { children: formatTimestamp2(timestamp) })] });
-  const handleMouseEnter = () => {
-    if (hasContent) {
-      setOpen(true);
-    }
-  };
-  const handleMouseLeave = () => {
-    setOpen(false);
-  };
-  return jsxs("div", { className: "relative", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [isSelected && jsx(Icon, { name: "TimelineCaret", color: "#4EA9FF", size: 10, className: "absolute top-[-11px] z-40" }), jsx(Tooltip, { className: "rounded-md bg-gray-900 text-white", content: tooltipContent, open: open && hasContent, onOpenChange: setOpen, delayDuration: 0, side: "bottom", sideOffset: 5, children: jsx("div", { className: twMerge("mx-0.5 flex h-[25px] w-1.5 cursor-pointer flex-col items-center justify-center rounded-[2px] hover:bg-blue-300", isSelected && "bg-blue-300", className), onClick, "data-title": title, "data-subtitle": subtitle, "data-timestamp": timestamp, children: jsx("div", { className: "h-0.5 w-1 rounded-full bg-gray-500" }) }) })] });
-};
-const getBarHeight = (size = 0) => {
-  switch (true) {
-    case size <= 0:
-      return "h-[1px]";
-    case size === 1:
-      return "h-[3px]";
-    case size === 2:
-      return "h-[6px]";
-    case size === 3:
-      return "h-[9px]";
-    case size >= 4:
-      return "h-[12px]";
-    default:
-      return "h-[1px]";
-  }
-};
-const formatTimestamp = (isoString) => {
-  if (!isoString)
-    return "";
-  try {
-    const date = parseISO(isoString);
-    return format(date, "HH:mm, dd, MMMM");
-  } catch {
-    return isoString;
-  }
-};
-const TimelineBar = ({ onClick, className, timestamp, additions, deletions, addSize = 0, delSize = 0, isSelected = false }) => {
-  const [open, setOpen] = useState(false);
-  const noChanges = addSize === 0 && delSize === 0;
-  const addBarHeight = getBarHeight(addSize);
-  const delBarHeight = getBarHeight(delSize);
-  const tooltipContent = jsxs("div", { className: "flex flex-col text-xs", children: [jsx("div", { children: formatTimestamp(timestamp) }), jsx("div", { className: "text-green-900", children: `${additions} additions +` }), jsx("div", { className: "text-red-700", children: `${deletions} deletions -` })] });
-  const handleMouseEnter = () => {
-    if (!noChanges) {
-      setOpen(true);
-    }
-  };
-  const handleMouseLeave = () => {
-    setOpen(false);
-  };
-  return jsxs("div", { className: "relative", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [isSelected && jsx(Icon, { name: "TimelineCaret", color: "#4EA9FF", size: 10, className: "absolute left-[-2px] top-[-11px] z-40" }), noChanges ? jsx("div", { className: twMerge("flex h-[25px] w-1.5 cursor-pointer flex-col items-center justify-center rounded-[2px] hover:bg-blue-300", className), "data-timestamp": timestamp, onClick, children: jsx("div", { className: "size-[3px] rounded-full bg-gray-500" }) }) : jsx(Tooltip, { className: "rounded-md bg-gray-900 text-white", content: tooltipContent, open, onOpenChange: setOpen, delayDuration: 0, side: "bottom", sideOffset: 5, children: jsxs("div", { className: twMerge("flex h-[25px] w-1.5 cursor-pointer flex-col items-center justify-center rounded-[2px] hover:bg-blue-300", className, isSelected && "bg-blue-300"), "data-timestamp": timestamp, onClick, children: [jsx("div", { className: "flex h-3 w-0.5 items-end", children: jsx("div", { className: twMerge("h-3 w-0.5 rounded-t-full bg-green-600", addBarHeight) }) }), jsx("div", { className: "flex h-3 w-0.5 items-start", children: jsx("div", { className: twMerge("h-3 w-0.5 rounded-b-full bg-red-600", delBarHeight) }) })] }) })] });
-};
-const defaultTimeLineItem = {
-  id: "default",
-  type: "bar",
-  addSize: 0,
-  delSize: 0
-};
-const DocumentTimeline = (props) => {
-  const { timeline = [], onItemClick } = props;
-  const [selectedItem, setSelectedItem] = useState(null);
-  const scrollContainerRef = useRef(null);
-  const handleClick = (item) => {
-    if (item.id === selectedItem || item.id === defaultTimeLineItem.id) {
-      onItemClick == null ? void 0 : onItemClick(null);
-      setSelectedItem(null);
-    } else {
-      onItemClick == null ? void 0 : onItemClick(item);
-      setSelectedItem(item.id);
-    }
-  };
-  const mergedTimelineItems = [...timeline, defaultTimeLineItem];
-  const [unselectedItems, selectedItems] = useMemo(() => {
-    const indexSelected = mergedTimelineItems.findIndex((item) => item.id === selectedItem);
-    return indexSelected === -1 ? [mergedTimelineItems, []] : [
-      mergedTimelineItems.slice(0, indexSelected),
-      mergedTimelineItems.slice(indexSelected)
-    ];
-  }, [mergedTimelineItems, selectedItem]);
-  const renderTimelineItems = useCallback((items) => {
-    return items.map((item) => {
-      if (item.type === "divider") {
-        const { timestamp, title, subtitle } = item;
-        return jsx(HDivider, { timestamp, title, subtitle, onClick: () => handleClick(item), isSelected: item.id === selectedItem }, item.id);
-      }
-      return jsx(TimelineBar, { timestamp: item.timestamp, addSize: item.addSize, delSize: item.delSize, additions: item.additions, deletions: item.deletions, isSelected: item.id === selectedItem, onClick: () => handleClick(item) }, item.id);
-    });
-  }, [handleClick, selectedItem]);
-  const unselectedContent = useMemo(() => renderTimelineItems(unselectedItems), [unselectedItems, renderTimelineItems]);
-  const selectedContent = useMemo(() => renderTimelineItems(selectedItems), [selectedItems, renderTimelineItems]);
-  useEffect(() => {
-    if (scrollContainerRef.current) {
-      scrollContainerRef.current.scrollLeft = scrollContainerRef.current.scrollWidth;
-    }
-  }, []);
-  return jsx(TooltipProvider, { delayDuration: 0, skipDelayDuration: 0, children: jsxs("div", { className: "relative h-[36px] w-full", children: [jsx("div", { className: "absolute left-[0px] z-[20] h-[17px] w-[6px] bg-white", children: jsx("div", { className: "mt-[11px] h-[6px] w-[6px] rounded-tl-md bg-slate-50" }) }), jsx("div", { className: "absolute right-[0px] top-[11px] z-[20] h-[6px] w-[6px] bg-white", children: jsx("div", { className: "h-[6px] w-[6px] rounded-tr-md bg-slate-50" }) }), jsx("div", { className: "absolute inset-x-0 bottom-0 h-[25px] rounded-md bg-slate-50" }), jsx("div", { className: "absolute inset-x-0 bottom-0 h-[36px]", children: jsx("div", { ref: scrollContainerRef, className: "h-full overflow-x-auto rounded-md", children: jsxs("div", { className: "ml-auto flex h-[36px] w-max items-end px-2 pb-0", children: [jsx("div", { className: "flex", children: unselectedContent }), jsx("div", { className: "flex rounded-sm bg-blue-200", children: selectedContent })] }) }) }), jsx("div", { className: "pointer-events-none absolute bottom-0 left-0 z-10 h-[25px] w-2 rounded-l-md bg-slate-50" }), jsx("div", { className: "pointer-events-none absolute bottom-0 right-0 z-10 h-[25px] w-2 rounded-r-md bg-slate-50" })] }) });
-};
-const DocumentToolbar = (props) => {
-  const { undo: undo2, canUndo, redo: redo2, canRedo, title, onClose, onExport, className, onShowRevisionHistory, onSwitchboardLinkClick, timelineItems = [], onTimelineItemClick, initialTimelineVisible = false, timelineButtonVisible = false } = props;
-  const [showTimeline, setShowTimeline] = useState(initialTimelineVisible);
-  const isUndoDisabled = !canUndo || !undo2;
-  const isRedoDisabled = !canRedo || !redo2;
-  const isExportDisabled = !onExport;
-  const isSwitchboardLinkDisabled = !onSwitchboardLinkClick;
-  const isRevisionHistoryDisabled = !onShowRevisionHistory;
-  const isTimelineDisabled = timelineItems.length === 0;
-  useEffect(() => {
-    if (initialTimelineVisible) {
-      setShowTimeline(true);
-    }
-  }, [initialTimelineVisible]);
-  const handleTimelineToggle = () => {
-    if (isTimelineDisabled)
-      return;
-    setShowTimeline(!showTimeline);
-  };
-  return jsxs("div", { className: "flex w-full flex-col", children: [jsxs("div", { className: twMerge("flex h-12 w-full items-center justify-between rounded-xl border border-gray-200 bg-slate-50 px-4", className), children: [jsxs("div", { className: "flex items-center gap-x-2", children: [jsx("button", { className: twMerge("grid size-8 place-items-center rounded-lg border border-gray-200 bg-white", isUndoDisabled ? "cursor-not-allowed" : "cursor-pointer active:opacity-70"), onClick: undo2, disabled: isUndoDisabled, children: jsx(Icon, { name: "ArrowCouterclockwise", size: 16, className: isUndoDisabled ? "text-gray-500" : "text-gray-900" }) }), jsx("button", { className: twMerge("grid size-8 place-items-center rounded-lg border border-gray-200 bg-white", isRedoDisabled ? "cursor-not-allowed" : "cursor-pointer active:opacity-70"), onClick: redo2, disabled: isRedoDisabled, children: jsx("div", { className: "-scale-x-100", children: jsx(Icon, { name: "ArrowCouterclockwise", size: 16, className: isRedoDisabled ? "text-gray-500" : "text-gray-900" }) }) }), jsx("button", { className: twMerge("flex h-8 items-center rounded-lg border border-gray-200 bg-white px-3 text-sm", isExportDisabled ? "cursor-not-allowed" : "cursor-pointer active:opacity-70"), onClick: onExport, disabled: isExportDisabled, children: jsx("span", { className: isExportDisabled ? "text-gray-500" : "text-gray-900", children: "Export" }) })] }), jsx("div", { className: "flex items-center", children: jsx("h1", { className: "text-sm font-medium text-gray-500", children: title }) }), jsxs("div", { className: "flex items-center gap-x-2", children: [jsx("button", { className: twMerge("grid size-8 place-items-center rounded-lg border border-gray-200 bg-white", isSwitchboardLinkDisabled ? "cursor-not-allowed" : "cursor-pointer active:opacity-70"), onClick: onSwitchboardLinkClick, disabled: isSwitchboardLinkDisabled, children: jsx(Icon, { name: "Drive", size: 16, className: isSwitchboardLinkDisabled ? "text-gray-500" : "text-gray-900" }) }), jsx("button", { className: twMerge("grid size-8 place-items-center rounded-lg border border-gray-200 bg-white", isRevisionHistoryDisabled ? "cursor-not-allowed" : "cursor-pointer active:opacity-70"), onClick: onShowRevisionHistory, disabled: isRevisionHistoryDisabled, children: jsx(Icon, { name: "History", size: 16, className: isRevisionHistoryDisabled ? "text-gray-500" : "text-gray-900" }) }), timelineButtonVisible && jsx("button", { className: twMerge("grid size-8 place-items-center rounded-lg border border-gray-200 bg-white", isTimelineDisabled ? "cursor-not-allowed" : "cursor-pointer active:opacity-70"), onClick: handleTimelineToggle, disabled: isTimelineDisabled, "aria-pressed": showTimeline, children: jsx(Icon, { name: "Timeline", size: 16, className: twMerge("text-gray-900", isTimelineDisabled && "opacity-50", showTimeline && "text-blue-600") }) }), jsx("button", { className: "grid size-8 cursor-pointer place-items-center rounded-lg border border-gray-200 bg-white active:opacity-70", onClick: onClose, children: jsx(Icon, { name: "XmarkLight", size: 16, className: "text-gray-900" }) })] })] }), showTimeline && jsx("div", { className: "mt-2 w-full", children: jsx(DocumentTimeline, { timeline: timelineItems, onItemClick: onTimelineItemClick }) })] });
-};
-const syncIcons = {
-  SYNCING: "Syncing",
-  SUCCESS: "Synced",
-  CONFLICT: "Error",
-  MISSING: "Circle",
-  ERROR: "Error",
-  INITIAL_SYNC: "Syncing"
-};
-function SyncStatusIcon(props) {
-  const { syncStatus, className, overrideSyncIcons = {}, ...iconProps } = props;
-  const icons = { ...syncIcons, ...overrideSyncIcons };
-  const syncStatusIcons = {
-    [INITIAL_SYNC]: jsx(Icon, { size: 16, ...iconProps, className: twMerge("text-blue-900", className), name: icons[INITIAL_SYNC] }),
-    [SYNCING]: jsx(Icon, { size: 16, ...iconProps, className: twMerge("text-blue-900", className), name: icons[SYNCING] }),
-    [SUCCESS]: jsx(Icon, { size: 16, ...iconProps, className: twMerge("text-green-900", className), name: icons[SUCCESS] }),
-    [CONFLICT]: jsx(Icon, { size: 16, ...iconProps, className: twMerge("text-orange-900", className), name: icons[CONFLICT] }),
-    [MISSING]: jsx(Icon, { size: 16, ...iconProps, className: twMerge("text-red-900", className), name: icons[MISSING] }),
-    [ERROR]: jsx(Icon, { size: 16, ...iconProps, className: twMerge("text-red-900", className), name: icons[ERROR] })
-  };
-  return syncStatusIcons[syncStatus];
-}
-function FileItem(props) {
-  const { uiNode, className, customDocumentIconSrc, onSelectNode, onRenameNode, onDuplicateNode, onDeleteNode, isAllowedToCreateDocuments } = props;
-  const [mode, setMode] = useState(READ);
-  const [isDropdownMenuOpen, setIsDropdownMenuOpen] = useState(false);
-  const { dragProps } = useDrag({ uiNode });
-  const isReadMode = mode === READ;
-  const dropdownMenuHandlers = {
-    [DUPLICATE]: () => onDuplicateNode(uiNode),
-    [RENAME]: () => setMode(WRITE),
-    [DELETE]: () => onDeleteNode(uiNode)
-  };
-  const dropdownMenuOptions = Object.entries(nodeOptionsMap).map(([id, option]) => ({
-    ...option,
-    id
-  })).filter((option) => defaultFileOptions.includes(option.id));
-  function onSubmit(name) {
-    onRenameNode(name, uiNode);
-    setMode(READ);
-  }
-  function onCancel() {
-    setMode(READ);
-  }
-  function onClick() {
-    onSelectNode(uiNode);
-  }
-  function onDropdownMenuOptionClick(itemId) {
-    const handler = dropdownMenuHandlers[itemId];
-    if (!handler) {
-      console.error(`No handler found for dropdown menu item: ${itemId}`);
-      return;
-    }
-    handler();
-    setIsDropdownMenuOpen(false);
-  }
-  const iconSrc = getDocumentIconSrc(uiNode.documentType, customDocumentIconSrc);
-  const iconNode = jsxs("div", { className: "relative", children: [jsx("img", { alt: "file icon", className: "max-w-none", height: 34, src: iconSrc, width: 32 }), isReadMode && uiNode.syncStatus && jsx("div", { className: "absolute bottom-[-2px] right-0 size-3 rounded-full bg-white", children: jsx("div", { className: "absolute left-[-2px] top-[-2px]", children: jsx(SyncStatusIcon, { overrideSyncIcons: { SUCCESS: "CheckCircleFill" }, syncStatus: uiNode.syncStatus }) }) })] });
-  const containerStyles = twMerge("group flex h-12 cursor-pointer select-none items-center rounded-lg bg-gray-200 px-2 text-gray-600 hover:text-gray-800", className);
-  const content = isReadMode ? jsxs("div", { className: "flex w-52 items-center justify-between", children: [jsxs("div", { className: "mr-2 truncate group-hover:mr-0", children: [jsx("div", { className: "max-h-6 truncate text-sm font-medium group-hover:text-gray-800", children: uiNode.name }), jsx("div", { className: "max-h-6 truncate text-xs font-medium text-gray-600 group-hover:text-gray-800", children: uiNode.documentType })] }), isAllowedToCreateDocuments ? jsx(ConnectDropdownMenu, { items: dropdownMenuOptions, onItemClick: onDropdownMenuOptionClick, onOpenChange: setIsDropdownMenuOpen, open: isDropdownMenuOpen, children: jsx("button", { className: twMerge("hidden group-hover:block", isDropdownMenuOpen && "block"), onClick: (e) => {
-    e.stopPropagation();
-    setIsDropdownMenuOpen(true);
-  }, children: jsx(Icon, { className: "text-gray-600", name: "VerticalDots" }) }) }) : null] }) : jsx(NodeInput, { className: "ml-3 flex-1 font-medium", defaultValue: uiNode.name, onCancel, onSubmit });
-  return jsx("div", { className: "relative w-64", onClick, children: jsx("div", { ...dragProps, className: containerStyles, children: jsxs("div", { className: "flex items-center", children: [jsx("div", { className: "mr-1.5", children: iconNode }), content] }) }) });
-}
-function FolderItem(props) {
-  const { uiNode, isAllowedToCreateDocuments, className, onRenameNode, onDuplicateNode, onDeleteNode, onSelectNode, onAddFile, onCopyNode, onMoveNode } = props;
-  const [mode, setMode] = useState(READ);
-  const [isDropdownMenuOpen, setIsDropdownMenuOpen] = useState(false);
-  const { dragProps } = useDrag({ ...props, uiNode });
-  const { isDropTarget, dropProps } = useDrop({
-    uiNode,
-    onAddFile,
-    onCopyNode,
-    onMoveNode
-  });
-  const isReadMode = mode === READ;
-  function onCancel() {
-    setMode(READ);
-  }
-  function onSubmit(name) {
-    onRenameNode(name, uiNode);
-    setMode(READ);
-  }
-  function onClick() {
-    onSelectNode(uiNode);
-  }
-  const dropdownMenuHandlers = {
-    [DUPLICATE]: () => onDuplicateNode(uiNode),
-    [RENAME]: () => setMode(WRITE),
-    [DELETE]: () => onDeleteNode(uiNode)
-  };
-  const dropdownMenuOptions = Object.entries(nodeOptionsMap).map(([id, option]) => ({
-    ...option,
-    id
-  })).filter((option) => defaultFolderOptions.includes(option.id));
-  function onDropdownMenuOptionClick(itemId) {
-    const handler = dropdownMenuHandlers[itemId];
-    if (!handler) {
-      console.error(`No handler found for dropdown menu item: ${itemId}`);
-      return;
-    }
-    handler();
-    setIsDropdownMenuOpen(false);
-  }
-  const content = isReadMode || !isAllowedToCreateDocuments ? jsx("div", { className: "ml-3 max-h-6 truncate font-medium text-gray-600 group-hover:text-gray-800", children: uiNode.name }) : jsx(NodeInput, { className: "ml-3 font-medium", defaultValue: uiNode.name, onCancel, onSubmit });
-  const containerStyles = twMerge("group flex h-12 cursor-pointer select-none items-center rounded-lg bg-gray-200 px-2", className, isDropTarget && "bg-blue-100");
-  return jsx("div", { className: "relative w-64", onClick, children: jsxs("div", { ...dragProps, ...dropProps, className: containerStyles, children: [jsxs("div", { className: "flex items-center overflow-hidden", children: [jsx("div", { className: "p-1", children: jsxs("div", { className: "relative", children: [jsx(Icon, { name: "FolderClose", size: 24 }), isReadMode && uiNode.syncStatus ? jsx("div", { className: "absolute bottom-[-3px] right-[-2px] size-3 rounded-full bg-white", children: jsx("div", { className: "absolute left-[-2px] top-[-2px]", children: jsx(SyncStatusIcon, { overrideSyncIcons: {
-    SUCCESS: "CheckCircleFill"
-  }, syncStatus: uiNode.syncStatus }) }) }) : null] }) }), content] }), isReadMode && isAllowedToCreateDocuments ? jsx(ConnectDropdownMenu, { items: dropdownMenuOptions, onItemClick: onDropdownMenuOptionClick, onOpenChange: setIsDropdownMenuOpen, open: isDropdownMenuOpen, children: jsx("button", { className: twMerge("ml-auto hidden group-hover:block", isDropdownMenuOpen && "block"), onClick: (e) => {
-    e.stopPropagation();
-    setIsDropdownMenuOpen(true);
-  }, children: jsx(Icon, { className: "text-gray-600", name: "VerticalDots" }) }) }) : null] }) });
-}
-function NodeInput(props) {
-  const { onSubmit, onCancel, defaultValue, className, minLength = 1, ...inputProps } = props;
-  const [value, setValue] = useState(defaultValue ?? "");
-  const ref = useRef(null);
-  useOnClickOutside(ref, handleSubmit);
-  useEventListener("keyup", (e) => {
-    if (e.key === "Enter") {
-      handleSubmit();
-    }
-    if (e.key === "Escape") {
-      onCancel();
-    }
-  });
-  useLayoutEffect(() => {
-    setTimeout(() => {
-      var _a, _b, _c;
-      (_a = ref.current) == null ? void 0 : _a.focus();
-      (_b = ref.current) == null ? void 0 : _b.select();
-      (_c = ref.current) == null ? void 0 : _c.scroll({ left: 9999 });
-    }, 100);
-  }, []);
-  function handleSubmit() {
-    if (value.length >= minLength) {
-      onSubmit(value);
-    }
-  }
-  return jsx("input", { ...inputProps, autoFocus: true, className: twMerge("bg-inherit text-inherit outline-none", className), minLength, onChange: (e) => setValue(e.target.value), ref, required: true, type: "text", value });
-}
-function Branch(props) {
-  const { branch = "main" } = props;
-  return jsxs("button", { className: "flex h-8 items-center gap-1 rounded-lg bg-slate-50 pl-1 pr-2 text-xs text-slate-100", children: [jsx(Icon, { name: "Branch" }), jsx("span", { children: "BRANCH" }), jsx("span", { className: "text-gray-900", children: branch })] });
-}
-function DocId(props) {
-  const { docId } = props;
-  const [, copy] = useCopyToClipboard();
-  function handleCopy(text) {
-    return () => {
-      copy(text).catch((error) => {
-        console.error("Failed to copy!", error);
-      });
-    };
-  }
-  return jsxs("button", { className: "flex h-8 items-center gap-1 rounded-lg bg-slate-50 pl-1 pr-2 text-xs text-slate-100", onClick: handleCopy(docId), children: [jsx(Icon, { name: "Link" }), "DOC ID", jsx("span", { className: "text-gray-900", children: docId })] });
-}
-function Scope(props) {
-  const { value, onChange } = props;
-  const items = [
-    { displayValue: "Global scope", value: "global" },
-    { displayValue: "Local scope", value: "local" }
-  ];
-  return jsx(Select, { absolutePositionMenu: true, containerClassName: "bg-slate-50 text-gray-500 rounded-lg w-fit text-xs z-10", id: "scope select", itemClassName: "py-2 text-gray-500 grid grid-cols-[auto,auto] gap-1", items, menuClassName: "min-w-0 text-gray-500", onChange, value });
-}
-function Header(props) {
-  const { title, docId, scope, onChangeScope, onClose, className, ...divProps } = props;
-  return jsxs("header", { className: twMerge("flex items-center justify-between bg-transparent", className), ...divProps, children: [jsxs("div", { className: "flex items-center gap-3", children: [jsx("button", { className: "shadow-button rounded-lg bg-gray-50 p-1 text-slate-100", onClick: onClose, children: jsx(Icon, { name: "VariantArrowLeft" }) }), jsx("h1", { className: "text-xs", children: title })] }), jsxs("div", { className: "flex items-center gap-2", children: [jsx(DocId, { docId }), jsx(Branch, {}), jsx(Scope, { onChange: onChangeScope, value: scope })] })] });
-}
-function memo(getDeps, fn, opts) {
-  let deps = opts.initialDeps ?? [];
-  let result;
-  return () => {
-    var _a, _b, _c, _d;
-    let depTime;
-    if (opts.key && ((_a = opts.debug) == null ? void 0 : _a.call(opts))) depTime = Date.now();
-    const newDeps = getDeps();
-    const depsChanged = newDeps.length !== deps.length || newDeps.some((dep, index) => deps[index] !== dep);
-    if (!depsChanged) {
-      return result;
+function memo(getDeps, fn, opts) {
+  let deps = opts.initialDeps ?? [];
+  let result;
+  function memoizedFunction() {
+    var _a, _b, _c, _d;
+    let depTime;
+    if (opts.key && ((_a = opts.debug) == null ? void 0 : _a.call(opts))) depTime = Date.now();
+    const newDeps = getDeps();
+    const depsChanged = newDeps.length !== deps.length || newDeps.some((dep, index) => deps[index] !== dep);
+    if (!depsChanged) {
+      return result;
     }
     deps = newDeps;
     let resultTime;
@@ -2315,7 +1861,11 @@ function memo(getDeps, fn, opts) {
     }
     (_d = opts == null ? void 0 : opts.onChange) == null ? void 0 : _d.call(opts, result);
     return result;
+  }
+  memoizedFunction.updateDeps = (newDeps) => {
+    deps = newDeps;
   };
+  return memoizedFunction;
 }
 function notUndefined(value, msg) {
   if (value === void 0) {
@@ -2361,15 +1911,18 @@ const observeElementRect = (instance, cb) => {
     };
   }
   const observer = new targetWindow.ResizeObserver((entries) => {
-    const entry = entries[0];
-    if (entry == null ? void 0 : entry.borderBoxSize) {
-      const box = entry.borderBoxSize[0];
-      if (box) {
-        handler({ width: box.inlineSize, height: box.blockSize });
-        return;
+    const run = () => {
+      const entry = entries[0];
+      if (entry == null ? void 0 : entry.borderBoxSize) {
+        const box = entry.borderBoxSize[0];
+        if (box) {
+          handler({ width: box.inlineSize, height: box.blockSize });
+          return;
+        }
       }
-    }
-    handler(element.getBoundingClientRect());
+      handler(element.getBoundingClientRect());
+    };
+    instance.options.useAnimationFrameWithResizeObserver ? requestAnimationFrame(run) : run();
   });
   observer.observe(element, { box: "border-box" });
   return () => {
@@ -2407,10 +1960,15 @@ const observeElementOffset = (instance, cb) => {
   const endHandler = createHandler(false);
   endHandler();
   element.addEventListener("scroll", handler, addEventListenerOptions);
-  element.addEventListener("scrollend", endHandler, addEventListenerOptions);
+  const registerScrollendEvent = instance.options.useScrollendEvent && supportsScrollend;
+  if (registerScrollendEvent) {
+    element.addEventListener("scrollend", endHandler, addEventListenerOptions);
+  }
   return () => {
     element.removeEventListener("scroll", handler);
-    element.removeEventListener("scrollend", endHandler);
+    if (registerScrollendEvent) {
+      element.removeEventListener("scrollend", endHandler);
+    }
   };
 };
 const measureElement = (element, entry, instance) => {
@@ -2464,7 +2022,10 @@ class Virtualizer {
         }
         return _ro = new this.targetWindow.ResizeObserver((entries) => {
           entries.forEach((entry) => {
-            this._measureElement(entry.target, entry);
+            const run = () => {
+              this._measureElement(entry.target, entry);
+            };
+            this.options.useAnimationFrameWithResizeObserver ? requestAnimationFrame(run) : run();
           });
         });
       };
@@ -2512,7 +2073,8 @@ class Virtualizer {
         isScrollingResetDelay: 150,
         enabled: true,
         isRtl: false,
-        useScrollendEvent: true,
+        useScrollendEvent: false,
+        useAnimationFrameWithResizeObserver: false,
         ...opts2
       };
     };
@@ -2701,12 +2263,18 @@ class Virtualizer {
       }
     );
     this.calculateRange = memo(
-      () => [this.getMeasurements(), this.getSize(), this.getScrollOffset()],
-      (measurements, outerSize, scrollOffset) => {
+      () => [
+        this.getMeasurements(),
+        this.getSize(),
+        this.getScrollOffset(),
+        this.options.lanes
+      ],
+      (measurements, outerSize, scrollOffset, lanes) => {
         return this.range = measurements.length > 0 && outerSize > 0 ? calculateRange({
           measurements,
           outerSize,
-          scrollOffset
+          scrollOffset,
+          lanes
         }) : null;
       },
       {
@@ -2714,7 +2282,7 @@ class Virtualizer {
         debug: () => this.options.debug
       }
     );
-    this.getIndexes = memo(
+    this.getVirtualIndexes = memo(
       () => {
         let startIndex = null;
         let endIndex = null;
@@ -2723,6 +2291,7 @@ class Virtualizer {
           startIndex = range.startIndex;
           endIndex = range.endIndex;
         }
+        this.maybeNotify.updateDeps([this.isScrolling, startIndex, endIndex]);
         return [
           this.options.rangeExtractor,
           this.options.overscan,
@@ -2806,7 +2375,7 @@ class Virtualizer {
       this._measureElement(node, void 0);
     };
     this.getVirtualItems = memo(
-      () => [this.getIndexes(), this.getMeasurements()],
+      () => [this.getVirtualIndexes(), this.getMeasurements()],
       (indexes, measurements) => {
         const virtualItems = [];
         for (let k = 0, len = indexes.length; k < len; k++) {
@@ -2835,15 +2404,15 @@ class Virtualizer {
         )]
       );
     };
-    this.getOffsetForAlignment = (toOffset, align) => {
+    this.getOffsetForAlignment = (toOffset, align, itemSize = 0) => {
       const size = this.getSize();
       const scrollOffset = this.getScrollOffset();
       if (align === "auto") {
-        if (toOffset >= scrollOffset + size) {
-          align = "end";
-        }
+        align = toOffset >= scrollOffset + size ? "end" : "start";
       }
-      if (align === "end") {
+      if (align === "center") {
+        toOffset += (itemSize - size) / 2;
+      } else if (align === "end") {
         toOffset -= size;
       }
       const scrollSizeProp = this.options.horizontal ? "scrollWidth" : "scrollHeight";
@@ -2868,27 +2437,11 @@ class Virtualizer {
           return [scrollOffset, align];
         }
       }
-      const centerOffset = item.start - this.options.scrollPaddingStart + (item.size - size) / 2;
-      switch (align) {
-        case "center":
-          return [this.getOffsetForAlignment(centerOffset, align), align];
-        case "end":
-          return [
-            this.getOffsetForAlignment(
-              item.end + this.options.scrollPaddingEnd,
-              align
-            ),
-            align
-          ];
-        default:
-          return [
-            this.getOffsetForAlignment(
-              item.start - this.options.scrollPaddingStart,
-              align
-            ),
-            align
-          ];
-      }
+      const toOffset = align === "end" ? item.end + this.options.scrollPaddingEnd : item.start - this.options.scrollPaddingStart;
+      return [
+        this.getOffsetForAlignment(toOffset, align, item.size),
+        align
+      ];
     };
     this.isDynamicMode = () => this.elementsCache.size > 0;
     this.cancelScrollToIndex = () => {
@@ -2958,10 +2511,19 @@ class Virtualizer {
       let end;
       if (measurements.length === 0) {
         end = this.options.paddingStart;
+      } else if (this.options.lanes === 1) {
+        end = ((_a = measurements[measurements.length - 1]) == null ? void 0 : _a.end) ?? 0;
       } else {
-        end = this.options.lanes === 1 ? ((_a = measurements[measurements.length - 1]) == null ? void 0 : _a.end) ?? 0 : Math.max(
-          ...measurements.slice(-this.options.lanes).map((m) => m.end)
-        );
+        const endByLane = Array(this.options.lanes).fill(null);
+        let endIndex = measurements.length - 1;
+        while (endIndex >= 0 && endByLane.some((val) => val === null)) {
+          const item = measurements[endIndex];
+          if (endByLane[item.lane] === null) {
+            endByLane[item.lane] = item.end;
+          }
+          endIndex--;
+        }
+        end = Math.max(...endByLane.filter((val) => val !== null));
       }
       return Math.max(
         end - this.options.scrollMargin + this.options.paddingEnd,
@@ -3002,14 +2564,43 @@ const findNearestBinarySearch = (low, high, getCurrentValue, value) => {
 function calculateRange({
   measurements,
   outerSize,
-  scrollOffset
+  scrollOffset,
+  lanes
 }) {
-  const count = measurements.length - 1;
+  const lastIndex = measurements.length - 1;
   const getOffset = (index) => measurements[index].start;
-  const startIndex = findNearestBinarySearch(0, count, getOffset, scrollOffset);
+  if (measurements.length <= lanes) {
+    return {
+      startIndex: 0,
+      endIndex: lastIndex
+    };
+  }
+  let startIndex = findNearestBinarySearch(
+    0,
+    lastIndex,
+    getOffset,
+    scrollOffset
+  );
   let endIndex = startIndex;
-  while (endIndex < count && measurements[endIndex].end < scrollOffset + outerSize) {
-    endIndex++;
+  if (lanes === 1) {
+    while (endIndex < lastIndex && measurements[endIndex].end < scrollOffset + outerSize) {
+      endIndex++;
+    }
+  } else if (lanes > 1) {
+    const endPerLane = Array(lanes).fill(0);
+    while (endIndex < lastIndex && endPerLane.some((pos) => pos < scrollOffset + outerSize)) {
+      const item = measurements[endIndex];
+      endPerLane[item.lane] = item.end;
+      endIndex++;
+    }
+    const startPerLane = Array(lanes).fill(scrollOffset + outerSize);
+    while (startIndex >= 0 && startPerLane.some((pos) => pos >= scrollOffset)) {
+      const item = measurements[startIndex];
+      startPerLane[item.lane] = item.start;
+      startIndex--;
+    }
+    startIndex = Math.max(0, startIndex - startIndex % lanes);
+    endIndex = Math.min(lastIndex, endIndex + (lanes - 1 - endIndex % lanes));
   }
   return { startIndex, endIndex };
 }
@@ -3266,8 +2857,8 @@ function RevisionHistory(props) {
   return jsxs(TooltipProvider, { children: [jsx(Header, { docId: documentId, onChangeScope, onClose, scope, title: documentTitle }), PaginationComponent, jsx("div", { className: "mt-4 flex justify-center rounded-md bg-slate-50 p-4", children: visibleOperations.length > 0 ? jsx("div", { className: "grid grid-cols-[minmax(min-content,1018px)]", children: jsx(Timeline, { globalOperations: scope === "global" ? pageItems : [], localOperations: scope === "local" ? pageItems : [], scope }) }) : jsx("h3", { className: "my-40 text-gray-600", children: "This document has no recorded operations yet." }) }), PaginationComponent] });
 }
 function Tooltip(props) {
-  const { children, content, open, defaultOpen, onOpenChange, className, side = "top", sideOffset = 5, ...rest } = props;
-  return jsxs(Root3, { defaultOpen, delayDuration: 0, onOpenChange, open, children: [jsx(Trigger, { asChild: true, children }), jsx(Portal, { children: jsx(Content2, { ...rest, side, sideOffset, className: twMerge("shadow-tooltip rounded-lg border border-gray-200 bg-white p-2 text-xs", className), children: content }) })] });
+  const { children, content, open, defaultOpen, onOpenChange, className, ...rest } = props;
+  return jsxs(Root3, { defaultOpen, delayDuration: 0, onOpenChange, open, children: [jsx(Trigger, { asChild: true, children }), jsx(Portal, { children: jsx(Content2, { ...rest, className: twMerge("shadow-tooltip rounded-lg border border-gray-200 bg-white p-2 text-xs", className), children: content }) })] });
 }
 const TooltipProvider = Provider;
 const BUDGET = "powerhouse/budget-statement";
@@ -3515,7 +3106,9 @@ function useAddDebouncedOperations(reactor, props) {
   const { driveId, documentId } = props;
   const [documentDrives] = useDocumentDrives(reactor);
   const documentDrivesRef = useRef(documentDrives);
-  const { isAllowedToEditDocuments } = useUserPermissions();
+  const { isAllowedToEditDocuments } = useUserPermissions() || {
+    isAllowedToEditDocuments: false
+  };
   useEffect(() => {
     documentDrivesRef.current = documentDrives;
   }, [documentDrives]);
@@ -3526,7 +3119,7 @@ function useAddDebouncedOperations(reactor, props) {
     if (!reactor) {
       throw new Error("Reactor is not loaded");
     }
-    const drive = documentDrivesRef.current.find((drive2) => drive2.id === driveId2);
+    const drive = documentDrivesRef.current.find((drive2) => drive2.state.global.id === driveId2);
     if (!drive) {
       throw new Error(`Drive with id ${driveId2} not found`);
     }
@@ -3605,7 +3198,7 @@ function getNode(id, drive) {
 }
 function createDriveActions(document2, dispatch, context) {
   const drive = document2;
-  const driveId = drive.id;
+  const { id: driveId } = drive.state.global;
   const { selectedNode } = context;
   const handleAddFolder = async (name, parentFolder, id = generateId()) => {
     dispatch(addFolder({
@@ -3895,17 +3488,6 @@ function useEditorProps(document2, node, documentDispatch, onAddOperation) {
     isAllowedToEditDocuments: (userPermissions == null ? void 0 : userPermissions.isAllowedToEditDocuments) ?? false
   };
 }
-function useGetDocument() {
-  const { openFile } = useDocumentDriveServer();
-  const getDocument = useCallback(
-    async (driveId, documentId, options) => {
-      const document2 = await openFile(driveId, documentId, options);
-      return document2;
-    },
-    [openFile]
-  );
-  return getDocument;
-}
 function useSyncStatus(driveId, documentId) {
   const { getSyncStatusSync, onSyncStatus, documentDrives } = useDocumentDriveServer();
   const syncStatus = useSyncExternalStore(
@@ -3915,7 +3497,9 @@ function useSyncStatus(driveId, documentId) {
     },
     () => {
       var _a;
-      const drive = documentDrives.find((_drive) => _drive.id === driveId);
+      const drive = documentDrives.find(
+        (_drive) => _drive.state.global.id === driveId
+      );
       if (!drive) return;
       const isReadDrive = "readContext" in drive;
       const _sharingType = !isReadDrive ? (_a = drive.state.local.sharingType) == null ? void 0 : _a.toUpperCase() : "PUBLIC";
@@ -3974,338 +3558,6 @@ const useUndoRedoShortcuts = (props) => {
     [canRedo, redo2]
   );
 };
-function getDocumentSpec(doc) {
-  if ("documentModelState" in doc) {
-    return doc.documentModelState;
-  }
-  return doc.documentModel;
-}
-const CreateDocument = ({ documentModels, createDocument }) => {
-  return jsxs("div", { className: "px-6", children: [jsx("h3", { className: "mb-3 mt-4 text-xl font-bold text-gray-600", children: "New document" }), jsx("div", { className: "flex w-full flex-wrap gap-4", children: documentModels == null ? void 0 : documentModels.map((doc) => {
-    const spec = getDocumentSpec(doc);
-    return jsx(Button, { color: "light", "aria-details": spec.description, onClick: () => createDocument(doc), children: jsx("span", { className: "text-sm", children: spec.name }) }, spec.id);
-  }) })] });
-};
-function sortUiNodesByName(a, b) {
-  return a.name.localeCompare(b.name);
-}
-const GAP = 8;
-const ITEM_WIDTH = 256;
-const ITEM_HEIGHT = 48;
-const USED_SPACE = 420;
-function FileContentView(props) {
-  const parentRef = useRef(null);
-  const { t } = useTranslation();
-  const windowSize = useWindowSize();
-  const { fileNodes, ...fileProps } = props;
-  const availableWidth = windowSize.innerWidth - USED_SPACE;
-  const columnCount = Math.floor(availableWidth / (ITEM_WIDTH + GAP)) || 1;
-  const rowCount = Math.ceil(fileNodes.length / columnCount);
-  const rowVirtualizer = useVirtualizer({
-    count: rowCount,
-    getScrollElement: () => parentRef.current,
-    estimateSize: (index) => {
-      if (index > 0) {
-        return ITEM_HEIGHT + GAP;
-      }
-      return ITEM_HEIGHT;
-    },
-    overscan: 5
-  });
-  const columnVirtualizer = useVirtualizer({
-    horizontal: true,
-    count: columnCount,
-    getScrollElement: () => parentRef.current,
-    estimateSize: (index) => {
-      if (index > 0) {
-        return ITEM_WIDTH + GAP;
-      }
-      return ITEM_WIDTH;
-    },
-    overscan: 5
-  });
-  const getItemIndex = (rowIndex, columnIndex) => rowIndex * columnCount + columnIndex;
-  const getItem = (rowIndex, columnIndex) => {
-    const index = getItemIndex(rowIndex, columnIndex);
-    return fileNodes[index] || null;
-  };
-  if (fileNodes.length === 0) {
-    return jsx("div", { className: "mb-8 text-sm text-gray-400", children: t("folderView.sections.documents.empty", {
-      defaultValue: "No documents or files 📄"
-    }) });
-  }
-  const renderItem = (rowIndex, columnIndex) => {
-    const fileNode = getItem(rowIndex, columnIndex);
-    if (!fileNode) {
-      return null;
-    }
-    return jsx("div", { style: {
-      marginLeft: columnIndex === 0 ? 0 : GAP
-    }, children: jsx(FileItem, { uiNode: fileNode, ...fileProps }, fileNode.id) });
-  };
-  return jsx("div", { ref: parentRef, style: {
-    height: `400px`,
-    width: `100%`,
-    overflow: "auto"
-  }, children: jsx("div", { style: {
-    height: `${rowVirtualizer.getTotalSize()}px`,
-    width: `${columnVirtualizer.getTotalSize()}px`,
-    position: "relative"
-  }, children: rowVirtualizer.getVirtualItems().map((virtualRow) => jsx(React__default.Fragment, { children: columnVirtualizer.getVirtualItems().map((virtualColumn) => jsx("div", { style: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    marginTop: virtualRow.index === 0 ? 0 : GAP,
-    width: `${virtualColumn.size}px`,
-    height: `${virtualRow.size}px`,
-    transform: `translateX(${virtualColumn.start}px) translateY(${virtualRow.start}px)`
-  }, children: renderItem(virtualRow.index, virtualColumn.index) }, virtualColumn.key)) }, virtualRow.key)) }) });
-}
-function FolderView(props) {
-  const { node, className, isDropTarget, containerProps, ...nodeProps } = props;
-  const { t } = useTranslation();
-  const folderNodes = node.children.filter((node2) => node2.kind === FOLDER).sort(sortUiNodesByName);
-  const fileNodes = node.children.filter((node2) => node2.kind === FILE).sort(sortUiNodesByName);
-  const folderCallbacks = {
-    onSelectNode: (node2) => nodeProps.onSelectNode(node2),
-    onRenameNode: (name, node2) => nodeProps.onRenameNode(name, node2),
-    onDuplicateNode: (node2) => nodeProps.onDuplicateNode(node2),
-    onDeleteNode: (node2) => nodeProps.onDeleteNode(node2)
-  };
-  const fileCallbacks = {
-    onSelectNode: (node2) => nodeProps.onSelectNode(node2),
-    onRenameNode: (name, node2) => nodeProps.onRenameNode(name, node2),
-    onDuplicateNode: (node2) => nodeProps.onDuplicateNode(node2),
-    onDeleteNode: (node2) => nodeProps.onDeleteNode(node2)
-  };
-  const baseNodeCallbacks = {
-    onAddFile: async (file, parentNode) => {
-      await nodeProps.onAddFile(file, parentNode);
-    },
-    onCopyNode: async (uiNode, targetNode) => {
-      await nodeProps.onCopyNode(uiNode, targetNode);
-    },
-    onMoveNode: async (uiNode, targetNode) => {
-      await nodeProps.onMoveNode(uiNode, targetNode);
-    }
-  };
-  return jsxs("div", { className: twMerge("rounded-md border-2 border-transparent p-2", isDropTarget && "border-dashed border-blue-100", className), ...containerProps, children: [jsx(DriveLayout.ContentSection, { title: t("folderView.sections.folders.title", {
-    defaultValue: "Folders"
-  }), className: "mb-4", children: folderNodes.length > 0 ? folderNodes.map((folderNode) => jsx(FolderItem, { uiNode: folderNode, ...baseNodeCallbacks, ...folderCallbacks, isAllowedToCreateDocuments: nodeProps.isAllowedToCreateDocuments }, folderNode.id)) : jsx("div", { className: "mb-8 text-sm text-gray-400", children: t("folderView.sections.folders.empty", {
-    defaultValue: "No documents or files 📄"
-  }) }) }), jsx(DriveLayout.ContentSection, { title: t("folderView.sections.documents.title", {
-    defaultValue: "Documents and files"
-  }), children: jsx("div", { className: twMerge("w-full", fileNodes.length > 0 ? "min-h-[400px]" : "min-h-14"), children: jsx(FileContentView, { fileNodes, ...fileCallbacks, isAllowedToCreateDocuments: nodeProps.isAllowedToCreateDocuments }) }) })] });
-}
-function BaseEditor(props) {
-  const { document: document2, dispatch, className, children } = props;
-  const { id: driveId } = document2;
-  const { showSearchBar, isAllowedToCreateDocuments, documentModels, showCreateDocumentModal } = useDriveContext();
-  const { driveNodes, selectedNode, selectedNodePath, getNodeById, setSelectedNode } = useUiNodesContext();
-  const driveNode = useMemo(() => driveNodes.find((n) => n.id === driveId), [driveNodes, driveId]);
-  const { addDocument, addFile, addFolder: addFolder2, renameNode, deleteNode: deleteNode2, moveNode: moveNode2, copyNode: copyNode2, duplicateNode } = useDriveActionsWithUiNodes(document2, dispatch);
-  const onCreateDocument = useCallback(async (documentModel) => {
-    const { name } = await showCreateDocumentModal(documentModel);
-    const document3 = documentModel.utils.createDocument();
-    await addDocument(name, documentModel.documentModel.name, document3, selectedNode == null ? void 0 : selectedNode.id);
-  }, [addDocument, showCreateDocumentModal, selectedNode == null ? void 0 : selectedNode.id]);
-  const { isDropTarget, dropProps } = useDrop({
-    uiNode: selectedNode,
-    onAddFile: addFile,
-    onCopyNode: copyNode2,
-    onMoveNode: moveNode2
-  });
-  const { breadcrumbs, onBreadcrumbSelected } = useBreadcrumbs({
-    selectedNodePath,
-    getNodeById,
-    setSelectedNode
-  });
-  if (!driveNode) {
-    return jsx("div", { children: "Drive not found" });
-  } else if ((selectedNode == null ? void 0 : selectedNode.kind) === FILE$1) {
-    return jsx(Fragment$1, {});
-  }
-  return jsxs(DriveLayout, { className, children: [children, jsxs(DriveLayout.Header, { children: [jsx(Breadcrumbs, { breadcrumbs, createEnabled: isAllowedToCreateDocuments, onCreate: addFolder2, onBreadcrumbSelected }), showSearchBar && jsx(SearchBar, {})] }), jsx(DriveLayout.Content, { children: jsx(FolderView, { node: selectedNode || driveNode, onSelectNode: setSelectedNode, onRenameNode: renameNode, onDuplicateNode: duplicateNode, onDeleteNode: deleteNode2, onAddFile: addFile, onCopyNode: copyNode2, onMoveNode: moveNode2, isDropTarget, isAllowedToCreateDocuments }) }), jsx(DriveLayout.Footer, { children: isAllowedToCreateDocuments && jsx(CreateDocument, { documentModels, createDocument: onCreateDocument }) })] });
-}
-function Editor(props) {
-  return jsx(DriveContextProvider, { value: props.context, children: jsx(BaseEditor, { ...props }) });
-}
-const GenericDriveExplorer = {
-  Component: Editor,
-  documentTypes: ["powerhouse/document-drive"],
-  config: {
-    id: "GenericDriveExplorer",
-    disableExternalControls: true,
-    documentToolbarEnabled: true,
-    showSwitchboardLink: true
-  }
-};
-function useAnalyticsQueryWrapper(options) {
-  const { queryFn, ...queryOptions } = options;
-  const store = useAnalyticsStore();
-  const engine = useAnalyticsEngine();
-  return useQuery({
-    ...queryOptions,
-    queryFn: () => {
-      if (!store || !engine) {
-        throw new Error("No analytics store available. Use within an AnalyticsProvider.");
-      }
-      return queryFn({ store, engine });
-    }
-  });
-}
-function useAnalyticsQuery(query, options) {
-  const store = useAnalyticsStore();
-  const { data: querySources } = useQuerySources(query);
-  const queryClient = useQueryClient();
-  const subscriptions = useRef([]);
-  const result = useAnalyticsQueryWrapper({
-    queryKey: ["analytics", "query", query],
-    queryFn: ({ engine }) => engine.execute(query),
-    ...options
-  });
-  useEffect(() => {
-    if (!(querySources == null ? void 0 : querySources.length) || !store) {
-      return;
-    }
-    querySources.forEach((source) => {
-      const unsub = store.subscribeToSource(source, () => {
-        return queryClient.invalidateQueries({
-          queryKey: ["analytics", "query", query]
-        });
-      });
-      subscriptions.current.push(unsub);
-    });
-    return () => {
-      subscriptions.current.forEach((unsub) => unsub());
-      subscriptions.current = [];
-    };
-  }, [querySources]);
-  return result;
-}
-function useMatchingSeries(query, options) {
-  const result = useAnalyticsQueryWrapper({
-    queryKey: ["analytics", "matchingSeries", query],
-    queryFn: ({ store }) => store.getMatchingSeries(query),
-    ...options
-  });
-  return result;
-}
-function useQuerySources(query, options) {
-  const { data: matchingSeries } = useMatchingSeries(query);
-  return useQuery({
-    queryKey: ["analytics", "sources", query],
-    queryFn: () => {
-      if (!(matchingSeries == null ? void 0 : matchingSeries.length)) {
-        return [];
-      }
-      const uniqueSources = [
-        ...new Set(matchingSeries.map((s) => s.source.toString()))
-      ];
-      return uniqueSources.map((source) => AnalyticsPath.fromString(source));
-    },
-    enabled: !!matchingSeries,
-    ...options
-  });
-}
-const getBarSize = (value) => {
-  if (value <= 0)
-    return 0;
-  if (value > 0 && value <= 50)
-    return 1;
-  if (value > 50 && value <= 100)
-    return 2;
-  if (value > 100 && value <= 250)
-    return 3;
-  return 4;
-};
-const useTimelineItems = (documentId, startTimestamp) => {
-  const start = startTimestamp ? DateTime.fromISO(startTimestamp) : DateTime.now().startOf("day");
-  const { data: diffResult, isLoading } = useAnalyticsQuery({
-    start,
-    end: DateTime.now().endOf("day"),
-    granularity: AnalyticsGranularity.Hourly,
-    metrics: ["Count"],
-    select: {
-      changes: [AnalyticsPath.fromString(`changes`)],
-      document: [AnalyticsPath.fromString(`document/${documentId}`)]
-    },
-    lod: {
-      changes: 2
-    },
-    currency: AnalyticsPath.fromString("")
-  });
-  const mappedResult = useMemo(() => {
-    if (!diffResult)
-      return [];
-    return diffResult.sort((a, b) => {
-      const aDate = new Date(a.start);
-      const bDate = new Date(b.start);
-      return aDate.getTime() - bDate.getTime();
-    }).filter((result) => {
-      return result.rows.every((row) => row.value > 0);
-    }).map((result) => {
-      const { additions, deletions } = result.rows.reduce((acc, row) => {
-        if (row.dimensions.changes.path === "changes/add") {
-          acc.additions += row.value;
-        } else if (row.dimensions.changes.path === "changes/remove") {
-          acc.deletions += row.value;
-        }
-        return acc;
-      }, { additions: 0, deletions: 0 });
-      const startDate = new Date(result.start);
-      return {
-        id: startDate.toISOString(),
-        type: "bar",
-        addSize: getBarSize(additions),
-        delSize: getBarSize(deletions),
-        additions,
-        deletions,
-        timestamp: startDate.toISOString(),
-        startDate,
-        endDate: new Date(result.end),
-        revision: 0
-      };
-    });
-  }, [diffResult]);
-  const resultWithDividers = useMemo(() => {
-    if (!mappedResult.length)
-      return [];
-    const result = [];
-    mappedResult.forEach((item, index) => {
-      result.push(item);
-      if (index < mappedResult.length - 1) {
-        const currentDate = new Date(item.startDate);
-        const nextDate = new Date(mappedResult[index + 1].startDate);
-        const currentHour = currentDate.getHours();
-        const nextHour = nextDate.getHours();
-        const currentDay = currentDate.toDateString();
-        const nextDay = nextDate.toDateString();
-        if (currentDay !== nextDay || currentDay === nextDay && Math.abs(nextHour - currentHour) > 1) {
-          result.push({
-            id: `divider-${item.id}-${mappedResult[index + 1].id}`,
-            type: "divider",
-            revision: 0
-          });
-        }
-      }
-    });
-    return result;
-  }, [mappedResult]);
-  return {
-    isLoading,
-    data: resultWithDividers
-  };
-};
-const getRevisionFromDate = (startDate, endDate, operations = []) => {
-  if (!startDate || !endDate)
-    return 0;
-  const operation = operations.find((operation2) => {
-    const operationDate = new Date(operation2.timestamp);
-    return operationDate >= startDate && operationDate <= endDate;
-  });
-  return operation ? operation.index : 0;
-};
 function EditorLoader(props) {
   const [showLoading, setShowLoading] = useState(false);
   useEffect(() => {
@@ -4333,11 +3585,9 @@ const DocumentEditor = (props) => {
     onChange,
     onExport,
     onAddOperation,
-    onGetDocumentRevision,
     onOpenSwitchboardLink
   } = props;
   const documentId = fileNodeDocument == null ? void 0 : fileNodeDocument.documentId;
-  const [selectedTimelineItem, setSelectedTimelineItem] = useState(null);
   const [revisionHistoryVisible, setRevisionHistoryVisible] = useState(false);
   const theme = useAtomValue(themeAtom);
   const user = useUser() || void 0;
@@ -4363,10 +3613,6 @@ const DocumentEditor = (props) => {
     [theme, user]
   );
   const userPermissions = useUserPermissions$1();
-  const timelineItems = useTimelineItems(
-    documentId,
-    initialDocument == null ? void 0 : initialDocument.created
-  );
   const currentDocument = useRef({ ...fileNodeDocument, document: document2 });
   useEffect(() => {
     var _a;
@@ -4543,8 +3789,7 @@ const DocumentEditor = (props) => {
   const {
     disableExternalControls,
     documentToolbarEnabled,
-    showSwitchboardLink,
-    timelineEnabled
+    showSwitchboardLink
   } = editor.config || {};
   const handleSwitchboardLinkClick = showSwitchboardLink !== false ? onOpenSwitchboardLink : void 0;
   return /* @__PURE__ */ jsxs("div", { className: "relative h-full", id: "document-editor-context", children: [
@@ -4555,10 +3800,7 @@ const DocumentEditor = (props) => {
         onExport,
         onShowRevisionHistory: showRevisionHistory,
         title: fileNodeDocument.name || document2.name,
-        onSwitchboardLinkClick: handleSwitchboardLinkClick,
-        timelineButtonVisible: timelineEnabled,
-        timelineItems: timelineItems.data,
-        onTimelineItemClick: setSelectedTimelineItem
+        onSwitchboardLinkClick: handleSwitchboardLinkClick
       }
     ),
     !disableExternalControls && /* @__PURE__ */ jsxs("div", { className: "mb-4 flex justify-end gap-10", children: [
@@ -4588,16 +3830,7 @@ const DocumentEditor = (props) => {
           EditorComponent,
           {
             error,
-            context: {
-              ...context,
-              getDocumentRevision: onGetDocumentRevision,
-              readMode: !!selectedTimelineItem,
-              selectedTimelineRevision: getRevisionFromDate(
-                selectedTimelineItem == null ? void 0 : selectedTimelineItem.startDate,
-                selectedTimelineItem == null ? void 0 : selectedTimelineItem.endDate,
-                document2.operations.global
-              )
-            },
+            context,
             document: document2,
             documentNodeName: fileNodeDocument.name,
             dispatch,
@@ -4635,7 +3868,6 @@ function DocumentEditorContainer() {
     renameNode,
     getDocumentModelModule
   } = useUiNodes();
-  const getDocument = useGetDocument();
   const handleAddOperationToSelectedDocument = useCallback(
     async (operation) => {
       if (!selectedDocument) {
@@ -4698,20 +3930,6 @@ function DocumentEditorContainer() {
     },
     [getDocumentModelModule, showModal, t]
   );
-  const onGetDocumentRevision = useCallback(
-    (options) => {
-      if (!selectedNode) {
-        console.error("No selected node");
-        return Promise.reject(new Error("No selected node"));
-      }
-      return getDocument(
-        selectedNode.driveId,
-        selectedNode.id,
-        options
-      );
-    },
-    [getDocument, selectedNode]
-  );
   const onExport = useCallback(() => {
     if (selectedDocument) {
       return exportDocument(selectedDocument);
@@ -4733,7 +3951,6 @@ function DocumentEditorContainer() {
           onChange: onDocumentChangeHandler,
           onClose,
           onExport,
-          onGetDocumentRevision,
           onAddOperation: handleAddOperationToSelectedDocument,
           onOpenSwitchboardLink
         }
@@ -4742,6 +3959,165 @@ function DocumentEditorContainer() {
     fileNodeDocument.documentId
   );
 }
+function getDocumentSpec(doc) {
+  if ("documentModelState" in doc) {
+    return doc.documentModelState;
+  }
+  return doc.documentModel;
+}
+const CreateDocument = ({ documentModels, createDocument }) => {
+  return jsxs("div", { className: "px-6", children: [jsx("h3", { className: "mb-3 mt-4 text-xl font-bold text-gray-600", children: "New document" }), jsx("div", { className: "flex w-full flex-wrap gap-4", children: documentModels == null ? void 0 : documentModels.map((doc) => {
+    const spec = getDocumentSpec(doc);
+    return jsx(Button, { color: "light", "aria-details": spec.description, onClick: () => createDocument(doc), children: jsx("span", { className: "text-sm", children: spec.name }) }, spec.id);
+  }) })] });
+};
+function sortUiNodesByName(a, b) {
+  return a.name.localeCompare(b.name);
+}
+const GAP = 8;
+const ITEM_WIDTH = 256;
+const ITEM_HEIGHT = 48;
+const USED_SPACE = 420;
+function FileContentView(props) {
+  const parentRef = useRef(null);
+  const { t } = useTranslation();
+  const windowSize = useWindowSize();
+  const { fileNodes, ...fileProps } = props;
+  const availableWidth = windowSize.innerWidth - USED_SPACE;
+  const columnCount = Math.floor(availableWidth / (ITEM_WIDTH + GAP)) || 1;
+  const rowCount = Math.ceil(fileNodes.length / columnCount);
+  const rowVirtualizer = useVirtualizer({
+    count: rowCount,
+    getScrollElement: () => parentRef.current,
+    estimateSize: (index) => {
+      if (index > 0) {
+        return ITEM_HEIGHT + GAP;
+      }
+      return ITEM_HEIGHT;
+    },
+    overscan: 5
+  });
+  const columnVirtualizer = useVirtualizer({
+    horizontal: true,
+    count: columnCount,
+    getScrollElement: () => parentRef.current,
+    estimateSize: (index) => {
+      if (index > 0) {
+        return ITEM_WIDTH + GAP;
+      }
+      return ITEM_WIDTH;
+    },
+    overscan: 5
+  });
+  const getItemIndex = (rowIndex, columnIndex) => rowIndex * columnCount + columnIndex;
+  const getItem = (rowIndex, columnIndex) => {
+    const index = getItemIndex(rowIndex, columnIndex);
+    return fileNodes[index] || null;
+  };
+  if (fileNodes.length === 0) {
+    return jsx("div", { className: "mb-8 text-sm text-gray-400", children: t("folderView.sections.documents.empty", {
+      defaultValue: "No documents or files 📄"
+    }) });
+  }
+  const renderItem = (rowIndex, columnIndex) => {
+    const fileNode = getItem(rowIndex, columnIndex);
+    if (!fileNode) {
+      return null;
+    }
+    return jsx("div", { style: {
+      marginLeft: columnIndex === 0 ? 0 : GAP
+    }, children: jsx(FileItem, { uiNode: fileNode, ...fileProps }, fileNode.id) });
+  };
+  return jsx("div", { ref: parentRef, style: {
+    height: `400px`,
+    width: `100%`,
+    overflow: "auto"
+  }, children: jsx("div", { style: {
+    height: `${rowVirtualizer.getTotalSize()}px`,
+    width: `${columnVirtualizer.getTotalSize()}px`,
+    position: "relative"
+  }, children: rowVirtualizer.getVirtualItems().map((virtualRow) => jsx(React__default.Fragment, { children: columnVirtualizer.getVirtualItems().map((virtualColumn) => jsx("div", { style: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    marginTop: virtualRow.index === 0 ? 0 : GAP,
+    width: `${virtualColumn.size}px`,
+    height: `${virtualRow.size}px`,
+    transform: `translateX(${virtualColumn.start}px) translateY(${virtualRow.start}px)`
+  }, children: renderItem(virtualRow.index, virtualColumn.index) }, virtualColumn.key)) }, virtualRow.key)) }) });
+}
+function FolderView(props) {
+  const { node, className, isDropTarget, containerProps, ...nodeProps } = props;
+  const { t } = useTranslation();
+  const folderNodes = node.children.filter((node2) => node2.kind === FOLDER).sort(sortUiNodesByName);
+  const fileNodes = node.children.filter((node2) => node2.kind === FILE).sort(sortUiNodesByName);
+  const folderCallbacks = {
+    onSelectNode: (node2) => nodeProps.onSelectNode(node2),
+    onRenameNode: (name, node2) => nodeProps.onRenameNode(name, node2),
+    onDuplicateNode: (node2) => nodeProps.onDuplicateNode(node2),
+    onDeleteNode: (node2) => nodeProps.onDeleteNode(node2)
+  };
+  const fileCallbacks = {
+    onSelectNode: (node2) => nodeProps.onSelectNode(node2),
+    onRenameNode: (name, node2) => nodeProps.onRenameNode(name, node2),
+    onDuplicateNode: (node2) => nodeProps.onDuplicateNode(node2),
+    onDeleteNode: (node2) => nodeProps.onDeleteNode(node2)
+  };
+  const baseNodeCallbacks = {
+    onAddFile: async (file, parentNode) => {
+      await nodeProps.onAddFile(file, parentNode);
+    },
+    onCopyNode: async (uiNode, targetNode) => {
+      await nodeProps.onCopyNode(uiNode, targetNode);
+    },
+    onMoveNode: async (uiNode, targetNode) => {
+      await nodeProps.onMoveNode(uiNode, targetNode);
+    }
+  };
+  return jsxs("div", { className: twMerge("rounded-md border-2 border-transparent p-2", isDropTarget && "border-dashed border-blue-100", className), ...containerProps, children: [jsx(DriveLayout.ContentSection, { title: t("folderView.sections.folders.title", {
+    defaultValue: "Folders"
+  }), className: "mb-4", children: folderNodes.length > 0 ? folderNodes.map((folderNode) => jsx(FolderItem, { uiNode: folderNode, ...baseNodeCallbacks, ...folderCallbacks, isAllowedToCreateDocuments: nodeProps.isAllowedToCreateDocuments }, folderNode.id)) : jsx("div", { className: "mb-8 text-sm text-gray-400", children: t("folderView.sections.folders.empty", {
+    defaultValue: "No documents or files 📄"
+  }) }) }), jsx(DriveLayout.ContentSection, { title: t("folderView.sections.documents.title", {
+    defaultValue: "Documents and files"
+  }), children: jsx("div", { className: twMerge("w-full", fileNodes.length > 0 ? "min-h-[400px]" : "min-h-14"), children: jsx(FileContentView, { fileNodes, ...fileCallbacks, isAllowedToCreateDocuments: nodeProps.isAllowedToCreateDocuments }) }) })] });
+}
+function BaseEditor(props) {
+  const { document: document2, dispatch, className, children } = props;
+  const { state: { global: { id: driveId } } } = document2;
+  const { showSearchBar, isAllowedToCreateDocuments, documentModels, showCreateDocumentModal } = useDriveContext();
+  const { driveNodes, selectedNode, selectedNodePath, getNodeById, setSelectedNode } = useUiNodesContext();
+  const driveNode = useMemo(() => driveNodes.find((n) => n.id === driveId), [driveNodes, driveId]);
+  const { addDocument, addFile, addFolder: addFolder2, renameNode, deleteNode: deleteNode2, moveNode: moveNode2, copyNode: copyNode2, duplicateNode } = useDriveActionsWithUiNodes(document2, dispatch);
+  const onCreateDocument = useCallback(async (documentModel) => {
+    const { name } = await showCreateDocumentModal(documentModel);
+    const document3 = documentModel.utils.createDocument();
+    await addDocument(name, documentModel.documentModel.name, document3, selectedNode == null ? void 0 : selectedNode.id);
+  }, [addDocument, showCreateDocumentModal, selectedNode == null ? void 0 : selectedNode.id]);
+  const { isDropTarget, dropProps } = useDrop({
+    uiNode: selectedNode,
+    onAddFile: addFile,
+    onCopyNode: copyNode2,
+    onMoveNode: moveNode2
+  });
+  const { breadcrumbs, onBreadcrumbSelected } = useBreadcrumbs({
+    selectedNodePath,
+    getNodeById,
+    setSelectedNode
+  });
+  if (!driveNode) {
+    return jsx("div", { children: "Drive not found" });
+  } else if ((selectedNode == null ? void 0 : selectedNode.kind) === FILE$1) {
+    return jsx(Fragment$1, {});
+  }
+  return jsxs(DriveLayout, { className, children: [children, jsxs(DriveLayout.Header, { children: [jsx(Breadcrumbs, { breadcrumbs, createEnabled: isAllowedToCreateDocuments, onCreate: addFolder2, onBreadcrumbSelected }), showSearchBar && jsx(SearchBar, {})] }), jsx(DriveLayout.Content, { children: jsx(FolderView, { node: selectedNode || driveNode, onSelectNode: setSelectedNode, onRenameNode: renameNode, onDuplicateNode: duplicateNode, onDeleteNode: deleteNode2, onAddFile: addFile, onCopyNode: copyNode2, onMoveNode: moveNode2, isDropTarget, isAllowedToCreateDocuments }) }), jsx(DriveLayout.Footer, { children: isAllowedToCreateDocuments && jsx(CreateDocument, { documentModels, createDocument: onCreateDocument }) })] });
+}
+function Editor(props) {
+  return jsx(DriveContextProvider, { value: props.context, children: jsx(BaseEditor, { ...props }) });
+}
+const GenericDriveExplorer = {
+  Component: Editor
+};
 function useDocumentsState(args) {
   const { reactor, driveId, documentIds, options } = args;
   const [statesByDocumentId, setStatesByDocumentId] = useState({});
@@ -4928,19 +4304,8 @@ function DriveEditorContainer() {
   const { addFile, addDocument } = useDocumentDriveServer();
   const documentModels = useFilteredDocumentModels();
   const useDriveDocumentState = makeDriveDocumentStateHook(reactor);
-  const getDocument = useGetDocument();
   const getDocumentModelModule = useGetDocumentModelModule();
   const getEditor = useGetEditor();
-  const onGetDocumentRevision = useCallback(
-    (documentId, options) => {
-      if (!selectedNode) {
-        console.error("No selected node");
-        return Promise.reject(new Error("No selected node"));
-      }
-      return getDocument(selectedNode.driveId, documentId, options);
-    },
-    [getDocument, selectedNode]
-  );
   const driveContext = useMemo(
     () => ({
       showSearchBar: false,
@@ -4984,8 +4349,6 @@ function DriveEditorContainer() {
           context: {
             ...editorProps.context,
             ...driveContext,
-            analyticsDatabaseName: connectConfig.analyticsDatabaseName,
-            getDocumentRevision: onGetDocumentRevision,
             getDocumentModelModule,
             getEditor
           },
@@ -5021,7 +4384,7 @@ function Content() {
   }, [selectedDriveNode, selectedNode, addFile]);
   useEffect(() => {
     if ((status === "LOADED" || status === "ERROR") && !documentDrives.find(
-      (d) => d.id === driveId || d.slug === driveId || d.state.global.name === driveId
+      (d) => d.state.global.id === driveId || d.state.global.slug === driveId || d.state.global.name === driveId
     )) {
       toast(/* @__PURE__ */ jsxs("p", { children: [
         "Drive ",
@@ -5036,4 +4399,3 @@ function Content() {
 export {
   Content as default
 };
-//# sourceMappingURL=content-2lJzkjLx.js.map