@powerhousedao/connect 1.1.1 → 2.5.0-test.0

package/dist/assets/{content-fzZoyU8t.js → content-ChtzAUHq.js}

@@ -1,10 +1,11 @@
 import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
-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-CZSKsD-w.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, 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-CyUyHxMC.js";
+import { t as twMerge, B as Button, aU as mergeClassNameProps, I as Icon, aV as getDimensions, aW as useDocumentDrives, h as useUiNodesContext, aX as useDriveContext, aY as FILE, H as ERROR, aZ as MISSING, G as CONFLICT, S as SUCCESS, a_ as SYNCING, a$ as INITIAL_SYNC, b0 as READ, b1 as nodeOptionsMap, b2 as defaultFileOptions, b3 as ConnectDropdownMenu, b4 as DELETE, b5 as RENAME, b6 as WRITE, b7 as DUPLICATE, b8 as defaultFolderOptions, b9 as useOnClickOutside, ba as useEventListener, bb as useCopyToClipboard, bc as Select, bd as Provider, be as Root3, bf as Trigger, bg as Portal, bh as Content2, bi as UI_NODE, D as DRIVE, F as FILE$1, bj as validateInitialState, bk as validateStateSchemaName, bl as validateModules, e as useDocumentDriveServer, k as useUnwrappedReactor, bm as useConnectDid, bn as useConnectCrypto, x as useTranslation, f as useModal, bo as useAtomValue, bp as themeAtom, bq as useUser, br as useUserPermissions$1, bs as useFileNodeDocument, bt as useGetDocumentModelModule, bu as exportFile, bv as addActionContext$1, bw as signOperation$1, bx as useHotkeys, by as FOLDER, bz as DriveLayout, bA as DriveContextProvider, bB as SearchBar, V as useAnalyticsStore, bC as useQueryClient, u as useQuery, a8 as AnalyticsPath, bD as useAnalyticsEngine, a7 as DateTime, bE as AnalyticsGranularity, bF as useGetEditor, bG as isSameDocument, w as useNavigate, A as useAsyncReactor, bH as useFilteredDocumentModels, bI as useDriveEditor, K as useParams, y as useDocumentDrives$1 } from "./app-DnlszXoG.js";
+import { ab as buildSignedOperation, am as generateId$1, aw as isFolderNode, aA as generateNodesCopy, aB as copyNode, az as moveNode, ay as updateNode, ax as deleteNode, ar as generateAddNodeAction, as as isFileNode, av as addFolder, bU as garbageCollect, bV as sortOperations, bW as undo, bX as redo, _ as logger, bY as openUrl, bZ as useDocumentDispatch$1, aj as module, af as connectConfig } from "./app-loader-LF_aPRFS.js";
+import { E as ENSAvatar, u as useSwitchboard, a as ErrorBoundary, t as toast } from "./router-DocwpreM.js";
 import { flushSync } from "react-dom";
-import "./main.8RNzWcZO.js";
+import "./main.B-rBx6n2.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 });
@@ -151,131 +152,12 @@ 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);
@@ -343,7 +225,7 @@ function getTimezoneOffsetInMilliseconds(date) {
 function normalizeDates(context, ...dates) {
   const normalize = constructFrom.bind(
     null,
-    dates.find((date) => typeof date === "object")
+    context || dates.find((date) => typeof date === "object")
   );
   return dates.map(normalize);
 }
@@ -371,12 +253,83 @@ 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);
@@ -446,7 +399,7 @@ const formatDistanceLocale = {
     other: "almost {{count}} years"
   }
 };
-const formatDistance = (token, count, options) => {
+const formatDistance$1 = (token, count, options) => {
   let result;
   const tokenValue = formatDistanceLocale[token];
   if (typeof tokenValue === "string") {
@@ -862,7 +815,7 @@ const match = {
 };
 const enUS = {
   code: "en-US",
-  formatDistance,
+  formatDistance: formatDistance$1,
   formatLong,
   formatRelative,
   localize,
@@ -1764,281 +1717,1123 @@ function cleanEscapedString(input) {
   }
   return matched[1].replace(doubleQuoteRegExp, "'");
 }
-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();
+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);
+      }
     }
-    if (e.key === "Escape") {
-      onCancel();
+  } 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);
     }
-  });
-  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);
+  }
+}
+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
+      );
     }
   }
-  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 });
+  if (timeString) {
+    const token = patterns.timezone.exec(timeString);
+    if (token) {
+      dateStrings.time = timeString.replace(token[1], "");
+      dateStrings.timezone = token[1];
+    } else {
+      dateStrings.time = timeString;
+    }
+  }
+  return dateStrings;
 }
-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 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 DocId(props) {
-  const { docId } = props;
-  const [, copy] = useCopyToClipboard();
-  function handleCopy(text) {
-    return () => {
-      copy(text).catch((error) => {
-        console.error("Failed to copy!", error);
-      });
-    };
+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);
+    }
+    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);
+    }
+    date.setUTCFullYear(year, month, Math.max(dayOfYear, day));
+    return date;
   }
-  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 parseDateUnit(value) {
+  return value ? parseInt(value) : 1;
 }
-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 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;
 }
-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;
+function parseTimeUnit(value) {
+  return value && parseFloat(value.replace(",", ".")) || 0;
+}
+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;
+  }
+  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;
+}
+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 validateTimezone(_hours, minutes) {
+  return minutes >= 0 && minutes <= 59;
+}
+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);
     }
-    deps = newDeps;
-    let resultTime;
-    if (opts.key && ((_b = opts.debug) == null ? void 0 : _b.call(opts))) resultTime = Date.now();
-    result = fn(...newDeps);
-    if (opts.key && ((_c = opts.debug) == null ? void 0 : _c.call(opts))) {
-      const depEndTime = Math.round((Date.now() - depTime) * 100) / 100;
-      const resultEndTime = Math.round((Date.now() - resultTime) * 100) / 100;
-      const resultFpsPercentage = resultEndTime / 16;
-      const pad = (str, num) => {
-        str = String(str);
-        while (str.length < num) {
-          str = " " + str;
-        }
-        return str;
-      };
-      console.info(
-        `%c⏱ ${pad(resultEndTime, 5)} /${pad(depEndTime, 5)} ms`,
-        `
-            font-size: .6rem;
-            font-weight: bold;
-            color: hsl(${Math.max(
-          0,
-          Math.min(120 - 120 * resultFpsPercentage, 120)
-        )}deg 100% 31%);`,
-        opts == null ? void 0 : opts.key
-      );
+  }, [title, subtitle, timestamp, hasContent]);
+  const formatTimestamp2 = (isoString) => {
+    if (!isoString)
+      return "";
+    try {
+      return formatDistanceToNow(new Date(isoString), { addSuffix: true });
+    } catch {
+      return isoString;
     }
-    (_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) {
-    throw new Error(`Unexpected undefined${""}`);
-  } else {
-    return value;
-  }
-}
-const approxEqual = (a, b) => Math.abs(a - b) <= 1;
-const debounce = (targetWindow, fn, ms) => {
-  let timeoutId;
-  return function(...args) {
-    targetWindow.clearTimeout(timeoutId);
-    timeoutId = targetWindow.setTimeout(() => fn.apply(this, args), ms);
+  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 getRect = (element) => {
-  const { offsetWidth, offsetHeight } = element;
-  return { width: offsetWidth, height: offsetHeight };
-};
-const defaultKeyExtractor = (index) => index;
-const defaultRangeExtractor = (range) => {
-  const start = Math.max(range.startIndex - range.overscan, 0);
-  const end = Math.min(range.endIndex + range.overscan, range.count - 1);
-  const arr = [];
-  for (let i = start; i <= end; i++) {
-    arr.push(i);
+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]";
   }
-  return arr;
 };
-const observeElementRect = (instance, cb) => {
-  const element = instance.scrollElement;
-  if (!element) {
-    return;
+const formatTimestamp = (isoString) => {
+  if (!isoString)
+    return "";
+  try {
+    const date = parseISO(isoString);
+    return format(date, "HH:mm, dd, MMMM");
+  } catch {
+    return isoString;
   }
-  const targetWindow = instance.targetWindow;
-  if (!targetWindow) {
-    return;
-  }
-  const handler = (rect) => {
-    const { width, height } = rect;
-    cb({ width: Math.round(width), height: Math.round(height) });
+};
+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);
+    }
   };
-  handler(getRect(element));
-  if (!targetWindow.ResizeObserver) {
-    return () => {
-    };
-  }
-  const observer = new targetWindow.ResizeObserver((entries) => {
-    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(getRect(element));
-    };
-    instance.options.useAnimationFrameWithResizeObserver ? requestAnimationFrame(run) : run();
-  });
-  observer.observe(element, { box: "border-box" });
-  return () => {
-    observer.unobserve(element);
+  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 addEventListenerOptions = {
-  passive: true
+const defaultTimeLineItem = {
+  id: "default",
+  type: "bar",
+  addSize: 0,
+  delSize: 0
 };
-const supportsScrollend = typeof window == "undefined" ? true : "onscrollend" in window;
-const observeElementOffset = (instance, cb) => {
-  const element = instance.scrollElement;
-  if (!element) {
-    return;
-  }
-  const targetWindow = instance.targetWindow;
-  if (!targetWindow) {
-    return;
-  }
-  let offset = 0;
-  const fallback = instance.options.useScrollendEvent && supportsScrollend ? () => void 0 : debounce(
-    targetWindow,
-    () => {
-      cb(offset, false);
-    },
-    instance.options.isScrollingResetDelay
-  );
-  const createHandler = (isScrolling) => () => {
-    const { horizontal, isRtl } = instance.options;
-    offset = horizontal ? element["scrollLeft"] * (isRtl && -1 || 1) : element["scrollTop"];
-    fallback();
-    cb(offset, isScrolling);
+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 handler = createHandler(true);
-  const endHandler = createHandler(false);
-  endHandler();
-  element.addEventListener("scroll", handler, addEventListenerOptions);
-  const registerScrollendEvent = instance.options.useScrollendEvent && supportsScrollend;
-  if (registerScrollendEvent) {
-    element.addEventListener("scrollend", endHandler, addEventListenerOptions);
-  }
-  return () => {
-    element.removeEventListener("scroll", handler);
-    if (registerScrollendEvent) {
-      element.removeEventListener("scrollend", endHandler);
+  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 measureElement = (element, entry, instance) => {
-  if (entry == null ? void 0 : entry.borderBoxSize) {
-    const box = entry.borderBoxSize[0];
-    if (box) {
-      const size = Math.round(
-        box[instance.options.horizontal ? "inlineSize" : "blockSize"]
-      );
-      return size;
+function useUserPermissions() {
+  return {
+    isAllowedToCreateDocuments: true,
+    isAllowedToEditDocuments: true
+  };
+}
+function useDocument(reactor, documentMeta = {}) {
+  const { documentId, documentType, driveId } = documentMeta;
+  const [document2, setDocument] = useState();
+  const onStrandUpdate = useCallback((cb) => {
+    if (!reactor) {
+      throw new Error("Reactor is not loaded");
     }
+    return reactor.on("strandUpdate", cb);
+  }, [reactor]);
+  useEffect(() => {
+    if (!reactor)
+      return;
+    if (!driveId || !documentId || !documentType)
+      return;
+    reactor.getDocument(driveId, documentId).then(setDocument).catch(console.error);
+  }, [driveId, documentId, documentType, reactor]);
+  useEffect(() => {
+    if (!reactor)
+      return;
+    if (!driveId || !documentId || !documentType)
+      return;
+    const removeListener = onStrandUpdate((strand) => {
+      if (strand.driveId === driveId && strand.documentId === documentId) {
+        reactor.getDocument(driveId, documentId).then(setDocument).catch(console.error);
+      }
+    });
+    return removeListener;
+  }, [onStrandUpdate, driveId, documentId, documentType]);
+  return document2;
+}
+async function signOperation(operation, sign, documentId, document2, reducer, user) {
+  if (!user)
+    return operation;
+  if (!operation.context)
+    return operation;
+  if (!operation.context.signer)
+    return operation;
+  if (!reducer) {
+    console.error(`Document model '${document2.documentType}' does not have a reducer`);
+    return operation;
   }
-  return element[instance.options.horizontal ? "offsetWidth" : "offsetHeight"];
-};
-const elementScroll = (offset, {
-  adjustments = 0,
-  behavior
-}, instance) => {
-  var _a, _b;
-  const toOffset = offset + adjustments;
-  (_b = (_a = instance.scrollElement) == null ? void 0 : _a.scrollTo) == null ? void 0 : _b.call(_a, {
-    [instance.options.horizontal ? "left" : "top"]: toOffset,
-    behavior
-  });
-};
-class Virtualizer {
-  constructor(opts) {
-    this.unsubs = [];
-    this.scrollElement = null;
-    this.targetWindow = null;
-    this.isScrolling = false;
-    this.scrollToIndexTimeoutId = null;
-    this.measurementsCache = [];
-    this.itemSizeCache = /* @__PURE__ */ new Map();
-    this.pendingMeasuredCacheIndexes = [];
-    this.scrollRect = null;
-    this.scrollOffset = null;
-    this.scrollDirection = null;
-    this.scrollAdjustments = 0;
-    this.elementsCache = /* @__PURE__ */ new Map();
-    this.observer = /* @__PURE__ */ (() => {
-      let _ro = null;
-      const get = () => {
-        if (_ro) {
-          return _ro;
-        }
-        if (!this.targetWindow || !this.targetWindow.ResizeObserver) {
-          return null;
-        }
-        return _ro = new this.targetWindow.ResizeObserver((entries) => {
-          entries.forEach((entry) => {
-            const run = () => {
-              this._measureElement(entry.target, entry);
-            };
-            this.options.useAnimationFrameWithResizeObserver ? requestAnimationFrame(run) : run();
-          });
-        });
-      };
-      return {
-        disconnect: () => {
-          var _a;
-          (_a = get()) == null ? void 0 : _a.disconnect();
-          _ro = null;
-        },
-        observe: (target) => {
-          var _a;
+  const context = {
+    documentId,
+    signer: operation.context.signer
+  };
+  const signedOperation = await buildSignedOperation(operation, reducer, document2, context, sign);
+  return signedOperation;
+}
+function addActionContext(action, connectDid, user) {
+  if (!user)
+    return action;
+  const signer = {
+    app: {
+      name: "Connect",
+      key: connectDid || ""
+    },
+    user: {
+      address: user.address,
+      networkId: user.networkId,
+      chainId: user.chainId
+    },
+    signatures: []
+  };
+  return {
+    context: { signer },
+    ...action
+  };
+}
+function debounceOperations(callback, timeout = 50) {
+  let timer;
+  const operations = [];
+  return (operation) => {
+    if (timer) {
+      clearTimeout(timer);
+    }
+    const index = operations.findIndex((op) => op.scope === operation.scope && op.index === operation.index);
+    if (index > -1) {
+      const oldOperation = operations[index];
+      if (!(oldOperation.type === operation.type && JSON.stringify(operation.input) === JSON.stringify(oldOperation.input))) {
+        console.warn("Two conflicting operations were dispatched:", oldOperation, operation);
+      }
+      operations[index] = operation;
+    } else {
+      operations.push(operation);
+    }
+    return new Promise((resolve, reject) => {
+      timer = setTimeout(() => {
+        callback(operations).then(resolve).catch(reject);
+      }, timeout);
+    });
+  };
+}
+function useAddDebouncedOperations(reactor, props) {
+  const { driveId, documentId } = props;
+  const [documentDrives] = useDocumentDrives(reactor);
+  const documentDrivesRef = useRef(documentDrives);
+  const { isAllowedToEditDocuments } = useUserPermissions() || {
+    isAllowedToEditDocuments: false
+  };
+  useEffect(() => {
+    documentDrivesRef.current = documentDrives;
+  }, [documentDrives]);
+  const addOperations = useCallback(async (driveId2, id, operations) => {
+    if (!isAllowedToEditDocuments) {
+      throw new Error("User is not allowed to edit documents");
+    }
+    if (!reactor) {
+      throw new Error("Reactor is not loaded");
+    }
+    const drive = documentDrivesRef.current.find((drive2) => drive2.id === driveId2);
+    if (!drive) {
+      throw new Error(`Drive with id ${driveId2} not found`);
+    }
+    const newDocument = await reactor.queueOperations(driveId2, id, operations);
+    return newDocument.document;
+  }, [isAllowedToEditDocuments, reactor]);
+  const addDebouncedOperations = useMemo(() => {
+    return debounceOperations((operations) => addOperations(driveId, documentId, operations));
+  }, [addOperations, driveId, documentId]);
+  return addDebouncedOperations;
+}
+function useDocumentDispatch(documentReducer, initialState, onError = console.error) {
+  const [state, setState] = useState(initialState);
+  const [error, setError] = useState();
+  const onErrorHandler = (error2) => {
+    setError(error2);
+    onError(error2);
+  };
+  useEffect(() => {
+    setState(initialState);
+  }, [initialState]);
+  const dispatch = (action, callback, onErrorCallback) => {
+    setError(void 0);
+    setState((_state) => {
+      if (!documentReducer || !_state)
+        return _state;
+      try {
+        const newState = documentReducer(_state, action);
+        const scope = action.scope ?? "global";
+        const operations = newState.operations[scope];
+        const operation = operations[operations.length - 1];
+        if (operation.error) {
+          const error2 = new Error(operation.error);
+          onErrorHandler(error2);
+          onErrorCallback == null ? void 0 : onErrorCallback(error2);
+        }
+        callback == null ? void 0 : callback(operation, {
+          prevState: { ..._state },
+          newState: { ...newState }
+        });
+        return newState;
+      } catch (error2) {
+        onErrorHandler(error2);
+        onErrorCallback == null ? void 0 : onErrorCallback(error2);
+        return _state;
+      }
+    });
+  };
+  return [state, dispatch, error];
+}
+function useDocumentEditorProps(reactor, props) {
+  const { nodeId, driveId, documentModelModule, document: initialDocument, user, connectDid, sign } = props;
+  const addDebouncedOprations = useAddDebouncedOperations(reactor, {
+    driveId,
+    documentId: nodeId
+  });
+  const [document2, _dispatch, error] = useDocumentDispatch(documentModelModule.reducer, initialDocument);
+  function dispatch(action, onErrorCallback) {
+    const callback = (operation, state) => {
+      const { prevState } = state;
+      signOperation(operation, sign, nodeId, prevState, documentModelModule.reducer, user).then((op) => {
+        return addDebouncedOprations(op);
+      }).catch(console.error);
+    };
+    _dispatch(addActionContext(action, connectDid, user), callback, onErrorCallback);
+  }
+  return {
+    dispatch,
+    document: document2,
+    error
+  };
+}
+const generateId = () => generateId$1().toString();
+function getNode(id, drive) {
+  return drive.state.global.nodes.find((node) => node.id === id);
+}
+function createDriveActions(document2, dispatch, context) {
+  const drive = document2;
+  const driveId = drive.id;
+  const { selectedNode } = context;
+  const handleAddFolder = async (name, parentFolder, id = generateId()) => {
+    dispatch(addFolder({
+      id,
+      name,
+      parentFolder: parentFolder ?? null
+    }));
+  };
+  const addDocument = async (name, documentType, document3, parentFolder, id = generateId()) => {
+    const action = generateAddNodeAction(drive.state.global, {
+      id,
+      name,
+      parentFolder: parentFolder ?? null,
+      documentType,
+      document: document3
+    }, ["global"]);
+    dispatch(action);
+  };
+  const addFile = async (file, parentFolder = selectedNode && isFileNode(selectedNode) ? void 0 : selectedNode == null ? void 0 : selectedNode.id, name = file.name.replace(/\.zip$/gim, "")) => {
+    const folder = parentFolder ? getNode(parentFolder, drive) : void 0;
+    if (parentFolder && !folder) {
+      throw new Error(`Parent folder with id "${parentFolder}" not found`);
+    }
+    if (folder && !isFolderNode(folder)) {
+      throw new Error(`Parent folder with id "${parentFolder}" is not a folder`);
+    }
+    await context.addFile(file, driveId, name, parentFolder);
+  };
+  const handleDeleteNode = async (id) => {
+    dispatch(deleteNode({ id }));
+  };
+  const renameNode = async (id, name) => {
+    dispatch(updateNode({ id, name }));
+  };
+  const handleMoveNode = async (sourceId, targetId) => {
+    dispatch(moveNode({
+      srcFolder: sourceId,
+      targetParentFolder: targetId
+    }));
+  };
+  const handleCopyNode = async (sourceId, targetFolderId) => {
+    const target = targetFolderId ? getNode(targetFolderId, drive) : void 0;
+    if (targetFolderId && !target && targetFolderId !== driveId) {
+      throw new Error(`Target node with id "${targetFolderId}" not found`);
+    }
+    if (target && !isFolderNode(target)) {
+      throw new Error(`Target node with id "${targetFolderId}" is not a folder`);
+    }
+    const source = getNode(sourceId, drive);
+    if (!source) {
+      throw new Error(`Source node with id "${sourceId}" not found`);
+    }
+    const copyNodesInput = generateNodesCopy({
+      srcId: sourceId,
+      targetParentFolder: target == null ? void 0 : target.id,
+      targetName: source.name
+    }, generateId, drive.state.global.nodes);
+    const copyActions = copyNodesInput.map((copyNodeInput) => copyNode(copyNodeInput));
+    for (const copyAction of copyActions) {
+      dispatch(copyAction);
+    }
+  };
+  const duplicateNode = async (sourceId) => {
+    const node = getNode(sourceId, drive);
+    if (!node) {
+      throw new Error(`Node with id "${sourceId}" not found`);
+    }
+    await handleCopyNode(node.id, node.parentFolder || void 0);
+  };
+  return {
+    context,
+    selectNode: context.selectNode,
+    addFolder: handleAddFolder,
+    addFile,
+    addDocument,
+    deleteNode: handleDeleteNode,
+    renameNode,
+    moveNode: handleMoveNode,
+    copyNode: handleCopyNode,
+    duplicateNode
+  };
+}
+function useDriveActions(document2, dispatch, context) {
+  return useMemo(() => createDriveActions(document2, dispatch, context), [document2, dispatch, context]);
+}
+function toNode(uiNode) {
+  if (uiNode.kind === "DRIVE") {
+    throw new Error("Cannot convert drive node to regular node");
+  }
+  const { id, name, parentFolder, kind } = uiNode;
+  if (kind === "FOLDER") {
+    return { id, name, parentFolder, kind: "folder" };
+  } else {
+    const fileNode = uiNode;
+    return {
+      id,
+      name,
+      parentFolder,
+      kind: "file",
+      documentType: fileNode.documentType,
+      synchronizationUnits: fileNode.synchronizationUnits
+    };
+  }
+}
+function createUiNodeAdapter(driveActions) {
+  return {
+    ...driveActions,
+    addFile: (file, parentNode) => driveActions.addFile(file, parentNode == null ? void 0 : parentNode.id),
+    addFolder: (name, parentFolder = void 0) => driveActions.addFolder(name, parentFolder),
+    renameNode: (name, node) => {
+      const converted = toNode(node);
+      return driveActions.renameNode(converted.id, name);
+    },
+    deleteNode: (node) => {
+      const converted = toNode(node);
+      return driveActions.deleteNode(converted.id);
+    },
+    moveNode: async (src, target) => {
+      if (target.kind === FILE || src.parentFolder === target.id)
+        return;
+      const srcNode = toNode(src);
+      const targetNode = toNode(target);
+      return driveActions.moveNode(srcNode.id, targetNode.id);
+    },
+    copyNode: (src, target) => {
+      return driveActions.copyNode(src.id, target.id);
+    },
+    duplicateNode: (node) => {
+      const converted = toNode(node);
+      return driveActions.duplicateNode(converted.id);
+    }
+  };
+}
+function useDriveActionsWithUiNodes(document2, dispatch) {
+  const { selectedNode, selectedDriveNode, setSelectedNode, getNodeById } = useUiNodesContext();
+  const _driveContext = useDriveContext();
+  const driveContext = useMemo(() => ({
+    ..._driveContext,
+    selectedNode,
+    onSelectNode: (node) => {
+      _driveContext.selectNode(node);
+      setSelectedNode(getNodeById(node.id));
+    }
+  }), [selectedNode, selectedDriveNode == null ? void 0 : selectedDriveNode.driveId, setSelectedNode, getNodeById]);
+  const driveActions = useDriveActions(document2, dispatch, driveContext);
+  const uiNodeActions = useMemo(() => createUiNodeAdapter(driveActions), [driveActions]);
+  return uiNodeActions;
+}
+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;
+  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;
+    if (opts.key && ((_b = opts.debug) == null ? void 0 : _b.call(opts))) resultTime = Date.now();
+    result = fn(...newDeps);
+    if (opts.key && ((_c = opts.debug) == null ? void 0 : _c.call(opts))) {
+      const depEndTime = Math.round((Date.now() - depTime) * 100) / 100;
+      const resultEndTime = Math.round((Date.now() - resultTime) * 100) / 100;
+      const resultFpsPercentage = resultEndTime / 16;
+      const pad = (str, num) => {
+        str = String(str);
+        while (str.length < num) {
+          str = " " + str;
+        }
+        return str;
+      };
+      console.info(
+        `%c⏱ ${pad(resultEndTime, 5)} /${pad(depEndTime, 5)} ms`,
+        `
+            font-size: .6rem;
+            font-weight: bold;
+            color: hsl(${Math.max(
+          0,
+          Math.min(120 - 120 * resultFpsPercentage, 120)
+        )}deg 100% 31%);`,
+        opts == null ? void 0 : opts.key
+      );
+    }
+    (_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) {
+    throw new Error(`Unexpected undefined${""}`);
+  } else {
+    return value;
+  }
+}
+const approxEqual = (a, b) => Math.abs(a - b) <= 1;
+const debounce = (targetWindow, fn, ms) => {
+  let timeoutId;
+  return function(...args) {
+    targetWindow.clearTimeout(timeoutId);
+    timeoutId = targetWindow.setTimeout(() => fn.apply(this, args), ms);
+  };
+};
+const getRect = (element) => {
+  const { offsetWidth, offsetHeight } = element;
+  return { width: offsetWidth, height: offsetHeight };
+};
+const defaultKeyExtractor = (index) => index;
+const defaultRangeExtractor = (range) => {
+  const start = Math.max(range.startIndex - range.overscan, 0);
+  const end = Math.min(range.endIndex + range.overscan, range.count - 1);
+  const arr = [];
+  for (let i = start; i <= end; i++) {
+    arr.push(i);
+  }
+  return arr;
+};
+const observeElementRect = (instance, cb) => {
+  const element = instance.scrollElement;
+  if (!element) {
+    return;
+  }
+  const targetWindow = instance.targetWindow;
+  if (!targetWindow) {
+    return;
+  }
+  const handler = (rect) => {
+    const { width, height } = rect;
+    cb({ width: Math.round(width), height: Math.round(height) });
+  };
+  handler(getRect(element));
+  if (!targetWindow.ResizeObserver) {
+    return () => {
+    };
+  }
+  const observer = new targetWindow.ResizeObserver((entries) => {
+    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(getRect(element));
+    };
+    instance.options.useAnimationFrameWithResizeObserver ? requestAnimationFrame(run) : run();
+  });
+  observer.observe(element, { box: "border-box" });
+  return () => {
+    observer.unobserve(element);
+  };
+};
+const addEventListenerOptions = {
+  passive: true
+};
+const supportsScrollend = typeof window == "undefined" ? true : "onscrollend" in window;
+const observeElementOffset = (instance, cb) => {
+  const element = instance.scrollElement;
+  if (!element) {
+    return;
+  }
+  const targetWindow = instance.targetWindow;
+  if (!targetWindow) {
+    return;
+  }
+  let offset = 0;
+  const fallback = instance.options.useScrollendEvent && supportsScrollend ? () => void 0 : debounce(
+    targetWindow,
+    () => {
+      cb(offset, false);
+    },
+    instance.options.isScrollingResetDelay
+  );
+  const createHandler = (isScrolling) => () => {
+    const { horizontal, isRtl } = instance.options;
+    offset = horizontal ? element["scrollLeft"] * (isRtl && -1 || 1) : element["scrollTop"];
+    fallback();
+    cb(offset, isScrolling);
+  };
+  const handler = createHandler(true);
+  const endHandler = createHandler(false);
+  endHandler();
+  element.addEventListener("scroll", handler, addEventListenerOptions);
+  const registerScrollendEvent = instance.options.useScrollendEvent && supportsScrollend;
+  if (registerScrollendEvent) {
+    element.addEventListener("scrollend", endHandler, addEventListenerOptions);
+  }
+  return () => {
+    element.removeEventListener("scroll", handler);
+    if (registerScrollendEvent) {
+      element.removeEventListener("scrollend", endHandler);
+    }
+  };
+};
+const measureElement = (element, entry, instance) => {
+  if (entry == null ? void 0 : entry.borderBoxSize) {
+    const box = entry.borderBoxSize[0];
+    if (box) {
+      const size = Math.round(
+        box[instance.options.horizontal ? "inlineSize" : "blockSize"]
+      );
+      return size;
+    }
+  }
+  return element[instance.options.horizontal ? "offsetWidth" : "offsetHeight"];
+};
+const elementScroll = (offset, {
+  adjustments = 0,
+  behavior
+}, instance) => {
+  var _a, _b;
+  const toOffset = offset + adjustments;
+  (_b = (_a = instance.scrollElement) == null ? void 0 : _a.scrollTo) == null ? void 0 : _b.call(_a, {
+    [instance.options.horizontal ? "left" : "top"]: toOffset,
+    behavior
+  });
+};
+class Virtualizer {
+  constructor(opts) {
+    this.unsubs = [];
+    this.scrollElement = null;
+    this.targetWindow = null;
+    this.isScrolling = false;
+    this.scrollToIndexTimeoutId = null;
+    this.measurementsCache = [];
+    this.itemSizeCache = /* @__PURE__ */ new Map();
+    this.pendingMeasuredCacheIndexes = [];
+    this.scrollRect = null;
+    this.scrollOffset = null;
+    this.scrollDirection = null;
+    this.scrollAdjustments = 0;
+    this.elementsCache = /* @__PURE__ */ new Map();
+    this.observer = /* @__PURE__ */ (() => {
+      let _ro = null;
+      const get = () => {
+        if (_ro) {
+          return _ro;
+        }
+        if (!this.targetWindow || !this.targetWindow.ResizeObserver) {
+          return null;
+        }
+        return _ro = new this.targetWindow.ResizeObserver((entries) => {
+          entries.forEach((entry) => {
+            const run = () => {
+              this._measureElement(entry.target, entry);
+            };
+            this.options.useAnimationFrameWithResizeObserver ? requestAnimationFrame(run) : run();
+          });
+        });
+      };
+      return {
+        disconnect: () => {
+          var _a;
+          (_a = get()) == null ? void 0 : _a.disconnect();
+          _ro = null;
+        },
+        observe: (target) => {
+          var _a;
           return (_a = get()) == null ? void 0 : _a.observe(target, { box: "border-box" });
         },
         unobserve: (target) => {
@@ -2481,9 +3276,9 @@ class Virtualizer {
             this.options.getItemKey(index)
           );
           if (elementInDOM) {
-            const [latestOffset] = notUndefined(
-              this.getOffsetForIndex(index, align)
-            );
+            const result = this.getOffsetForIndex(index, align);
+            if (!result) return;
+            const [latestOffset] = result;
             const currentScrollOffset = this.getScrollOffset();
             if (!approxEqual(latestOffset, currentScrollOffset)) {
               this.scrollToIndex(index, { align, behavior });
@@ -2858,8 +3653,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, ...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 { 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 TooltipProvider = Provider;
 const BUDGET = "powerhouse/budget-statement";
@@ -2883,471 +3678,150 @@ function useDrag(props) {
   const onDragEnd = useCallback(() => {
     setIsDragging(false);
   }, []);
-  const allowedToDragNode = !!uiNode && uiNode.kind !== DRIVE;
-  return useMemo(() => {
-    const dragProps = allowedToDragNode ? {
-      draggable: true,
-      onDragStart,
-      onDragEnd
-    } : {
-      draggable: false,
-      onDragStart: void 0,
-      onDragEnd: void 0
-    };
-    return {
-      isDragging,
-      dragProps
-    };
-  }, [allowedToDragNode, isDragging, onDragEnd, onDragStart]);
-}
-function useDrop(props) {
-  const { uiNode, onAddFile, onCopyNode, onMoveNode } = props;
-  const [isDropTarget, setIsDropTarget] = useState(false);
-  const allowedToBeDropTarget = !!uiNode && uiNode.kind !== FILE;
-  const onDragOver = useCallback((event) => {
-    event.preventDefault();
-    setIsDropTarget(true);
-  }, []);
-  const onDragLeave = useCallback(() => {
-    setIsDropTarget(false);
-  }, []);
-  const onDrop = useCallback(async (event) => {
-    event.preventDefault();
-    event.stopPropagation();
-    if (!uiNode)
-      return;
-    const droppedFiles = getDroppedFiles(event.dataTransfer.items).filter(Boolean);
-    if (droppedFiles.length) {
-      for (const file of droppedFiles) {
-        if (file) {
-          await onAddFile(file, uiNode);
-        }
-      }
-    } else {
-      const altOrOptionKeyPressed = event.getModifierState("Alt");
-      const data = event.dataTransfer.getData(UI_NODE);
-      const droppedNode = JSON.parse(data);
-      if (altOrOptionKeyPressed) {
-        await onCopyNode(droppedNode, uiNode);
-      } else {
-        await onMoveNode(droppedNode, uiNode);
-      }
-    }
-    setIsDropTarget(false);
-  }, [onAddFile, onCopyNode, onMoveNode, uiNode]);
-  return useMemo(() => {
-    const dropProps = allowedToBeDropTarget ? { onDragOver, onDragLeave, onDrop } : {
-      onDragOver: void 0,
-      onDragLeave: void 0,
-      onDrop: void 0
-    };
-    return {
-      isDropTarget,
-      dropProps
-    };
-  }, [allowedToBeDropTarget, isDropTarget, onDragLeave, onDragOver, onDrop]);
-}
-function getDroppedFiles(items) {
-  const droppedFiles = Array.from(items).map((item) => item.kind === "file" ? item.getAsFile() : null).filter(Boolean);
-  return droppedFiles;
-}
-function formatEthAddress(address) {
-  return `${address.slice(0, 7)}...${address.slice(-5)}`;
-}
-function getDocumentIconSrc(documentType, customDocumentIconSrc) {
-  if (customDocumentIconSrc) {
-    return customDocumentIconSrc;
-  }
-  if (documentTypes.includes(documentType)) {
-    return iconMap[documentType];
-  }
-  return iconMap[DEFAULT];
-}
-const validateDocument = (document2) => {
-  const errors = [];
-  if (document2.documentType !== "powerhouse/document-model") {
-    return errors;
-  }
-  const doc = document2;
-  const specs = doc.state.global.specifications[0];
-  const initialStateErrors = Object.keys(specs.state).reduce((acc, scopeKey) => {
-    const scope = scopeKey;
-    return [
-      ...acc,
-      ...validateInitialState(
-        specs.state[scope].initialValue,
-        scope !== "global"
-      ).map((err) => ({
-        ...err,
-        message: `${err.message}. Scope: ${scope}`,
-        details: { ...err.details, scope }
-      }))
-    ];
-  }, []);
-  const schemaStateErrors = Object.keys(specs.state).reduce((acc, scopeKey) => {
-    var _a;
-    const scope = scopeKey;
-    const isGlobalScope = scope === "global";
-    return [
-      ...acc,
-      ...validateStateSchemaName(
-        specs.state[scope].schema,
-        doc.name || ((_a = doc.state.global) == null ? void 0 : _a.name) || "",
-        !isGlobalScope ? scope : "",
-        !isGlobalScope
-      ).map((err) => ({
-        ...err,
-        message: `${err.message}. Scope: ${scope}`,
-        details: { ...err.details, scope }
-      }))
-    ];
-  }, []);
-  const modulesErrors = validateModules(specs.modules);
-  return [...initialStateErrors, ...schemaStateErrors, ...modulesErrors];
-};
-function useUserPermissions() {
-  return {
-    isAllowedToCreateDocuments: true,
-    isAllowedToEditDocuments: true
-  };
-}
-function useDocument(reactor, documentMeta = {}) {
-  const { documentId, documentType, driveId } = documentMeta;
-  const [document2, setDocument] = useState();
-  const onStrandUpdate = useCallback((cb) => {
-    if (!reactor) {
-      throw new Error("Reactor is not loaded");
-    }
-    return reactor.on("strandUpdate", cb);
-  }, [reactor]);
-  useEffect(() => {
-    if (!reactor)
-      return;
-    if (!driveId || !documentId || !documentType)
-      return;
-    reactor.getDocument(driveId, documentId).then(setDocument).catch(console.error);
-  }, [driveId, documentId, documentType, reactor]);
-  useEffect(() => {
-    if (!reactor)
-      return;
-    if (!driveId || !documentId || !documentType)
-      return;
-    const removeListener = onStrandUpdate((strand) => {
-      if (strand.driveId === driveId && strand.documentId === documentId) {
-        reactor.getDocument(driveId, documentId).then(setDocument).catch(console.error);
-      }
-    });
-    return removeListener;
-  }, [onStrandUpdate, driveId, documentId, documentType]);
-  return document2;
-}
-async function signOperation(operation, sign, documentId, document2, reducer, user) {
-  if (!user)
-    return operation;
-  if (!operation.context)
-    return operation;
-  if (!operation.context.signer)
-    return operation;
-  if (!reducer) {
-    console.error(`Document model '${document2.documentType}' does not have a reducer`);
-    return operation;
-  }
-  const context = {
-    documentId,
-    signer: operation.context.signer
-  };
-  const signedOperation = await buildSignedOperation(operation, reducer, document2, context, sign);
-  return signedOperation;
-}
-function addActionContext(action, connectDid, user) {
-  if (!user)
-    return action;
-  const signer = {
-    app: {
-      name: "Connect",
-      key: connectDid || ""
-    },
-    user: {
-      address: user.address,
-      networkId: user.networkId,
-      chainId: user.chainId
-    },
-    signatures: []
-  };
-  return {
-    context: { signer },
-    ...action
-  };
-}
-function debounceOperations(callback, timeout = 50) {
-  let timer;
-  const operations = [];
-  return (operation) => {
-    if (timer) {
-      clearTimeout(timer);
-    }
-    const index = operations.findIndex((op) => op.scope === operation.scope && op.index === operation.index);
-    if (index > -1) {
-      const oldOperation = operations[index];
-      if (!(oldOperation.type === operation.type && JSON.stringify(operation.input) === JSON.stringify(oldOperation.input))) {
-        console.warn("Two conflicting operations were dispatched:", oldOperation, operation);
-      }
-      operations[index] = operation;
-    } else {
-      operations.push(operation);
-    }
-    return new Promise((resolve, reject) => {
-      timer = setTimeout(() => {
-        callback(operations).then(resolve).catch(reject);
-      }, timeout);
-    });
-  };
-}
-function useAddDebouncedOperations(reactor, props) {
-  const { driveId, documentId } = props;
-  const [documentDrives] = useDocumentDrives(reactor);
-  const documentDrivesRef = useRef(documentDrives);
-  const { isAllowedToEditDocuments } = useUserPermissions() || {
-    isAllowedToEditDocuments: false
-  };
-  useEffect(() => {
-    documentDrivesRef.current = documentDrives;
-  }, [documentDrives]);
-  const addOperations = useCallback(async (driveId2, id, operations) => {
-    if (!isAllowedToEditDocuments) {
-      throw new Error("User is not allowed to edit documents");
-    }
-    if (!reactor) {
-      throw new Error("Reactor is not loaded");
-    }
-    const drive = documentDrivesRef.current.find((drive2) => drive2.state.global.id === driveId2);
-    if (!drive) {
-      throw new Error(`Drive with id ${driveId2} not found`);
-    }
-    const newDocument = await reactor.queueOperations(driveId2, id, operations);
-    return newDocument.document;
-  }, [isAllowedToEditDocuments, reactor]);
-  const addDebouncedOperations = useMemo(() => {
-    return debounceOperations((operations) => addOperations(driveId, documentId, operations));
-  }, [addOperations, driveId, documentId]);
-  return addDebouncedOperations;
+  const allowedToDragNode = !!uiNode && uiNode.kind !== DRIVE;
+  return useMemo(() => {
+    const dragProps = allowedToDragNode ? {
+      draggable: true,
+      onDragStart,
+      onDragEnd
+    } : {
+      draggable: false,
+      onDragStart: void 0,
+      onDragEnd: void 0
+    };
+    return {
+      isDragging,
+      dragProps
+    };
+  }, [allowedToDragNode, isDragging, onDragEnd, onDragStart]);
 }
-function useDocumentDispatch(documentReducer, initialState, onError = console.error) {
-  const [state, setState] = useState(initialState);
-  const [error, setError] = useState();
-  const onErrorHandler = (error2) => {
-    setError(error2);
-    onError(error2);
-  };
-  useEffect(() => {
-    setState(initialState);
-  }, [initialState]);
-  const dispatch = (action, callback, onErrorCallback) => {
-    setError(void 0);
-    setState((_state) => {
-      if (!documentReducer || !_state)
-        return _state;
-      try {
-        const newState = documentReducer(_state, action);
-        const scope = action.scope ?? "global";
-        const operations = newState.operations[scope];
-        const operation = operations[operations.length - 1];
-        if (operation.error) {
-          const error2 = new Error(operation.error);
-          onErrorHandler(error2);
-          onErrorCallback == null ? void 0 : onErrorCallback(error2);
+function useDrop(props) {
+  const { uiNode, onAddFile, onCopyNode, onMoveNode } = props;
+  const [isDropTarget, setIsDropTarget] = useState(false);
+  const allowedToBeDropTarget = !!uiNode && uiNode.kind !== FILE$1;
+  const onDragOver = useCallback((event) => {
+    event.preventDefault();
+    setIsDropTarget(true);
+  }, []);
+  const onDragLeave = useCallback(() => {
+    setIsDropTarget(false);
+  }, []);
+  const onDrop = useCallback(async (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (!uiNode)
+      return;
+    const droppedFiles = getDroppedFiles(event.dataTransfer.items).filter(Boolean);
+    if (droppedFiles.length) {
+      for (const file of droppedFiles) {
+        if (file) {
+          await onAddFile(file, uiNode);
         }
-        callback == null ? void 0 : callback(operation, {
-          prevState: { ..._state },
-          newState: { ...newState }
-        });
-        return newState;
-      } catch (error2) {
-        onErrorHandler(error2);
-        onErrorCallback == null ? void 0 : onErrorCallback(error2);
-        return _state;
       }
-    });
-  };
-  return [state, dispatch, error];
-}
-function useDocumentEditorProps(reactor, props) {
-  const { nodeId, driveId, documentModelModule, document: initialDocument, user, connectDid, sign } = props;
-  const addDebouncedOprations = useAddDebouncedOperations(reactor, {
-    driveId,
-    documentId: nodeId
-  });
-  const [document2, _dispatch, error] = useDocumentDispatch(documentModelModule.reducer, initialDocument);
-  function dispatch(action, onErrorCallback) {
-    const callback = (operation, state) => {
-      const { prevState } = state;
-      signOperation(operation, sign, nodeId, prevState, documentModelModule.reducer, user).then((op) => {
-        return addDebouncedOprations(op);
-      }).catch(console.error);
+    } else {
+      const altOrOptionKeyPressed = event.getModifierState("Alt");
+      const data = event.dataTransfer.getData(UI_NODE);
+      const droppedNode = JSON.parse(data);
+      if (altOrOptionKeyPressed) {
+        await onCopyNode(droppedNode, uiNode);
+      } else {
+        await onMoveNode(droppedNode, uiNode);
+      }
+    }
+    setIsDropTarget(false);
+  }, [onAddFile, onCopyNode, onMoveNode, uiNode]);
+  return useMemo(() => {
+    const dropProps = allowedToBeDropTarget ? { onDragOver, onDragLeave, onDrop } : {
+      onDragOver: void 0,
+      onDragLeave: void 0,
+      onDrop: void 0
     };
-    _dispatch(addActionContext(action, connectDid, user), callback, onErrorCallback);
-  }
-  return {
-    dispatch,
-    document: document2,
-    error
-  };
+    return {
+      isDropTarget,
+      dropProps
+    };
+  }, [allowedToBeDropTarget, isDropTarget, onDragLeave, onDragOver, onDrop]);
 }
-const generateId = () => generateId$1().toString();
-function getNode(id, drive) {
-  return drive.state.global.nodes.find((node) => node.id === id);
+function getDroppedFiles(items) {
+  const droppedFiles = Array.from(items).map((item) => item.kind === "file" ? item.getAsFile() : null).filter(Boolean);
+  return droppedFiles;
 }
-function createDriveActions(document2, dispatch, context) {
-  const drive = document2;
-  const { id: driveId } = drive.state.global;
-  const { selectedNode } = context;
-  const handleAddFolder = async (name, parentFolder, id = generateId()) => {
-    dispatch(addFolder({
-      id,
-      name,
-      parentFolder: parentFolder ?? null
-    }));
-  };
-  const addDocument = async (name, documentType, document3, parentFolder, id = generateId()) => {
-    const action = generateAddNodeAction(drive.state.global, {
-      id,
-      name,
-      parentFolder: parentFolder ?? null,
-      documentType,
-      document: document3
-    }, ["global"]);
-    dispatch(action);
-  };
-  const addFile = async (file, parentFolder = selectedNode && isFileNode(selectedNode) ? void 0 : selectedNode == null ? void 0 : selectedNode.id, name = file.name.replace(/\.zip$/gim, "")) => {
-    const folder = parentFolder ? getNode(parentFolder, drive) : void 0;
-    if (parentFolder && !folder) {
-      throw new Error(`Parent folder with id "${parentFolder}" not found`);
-    }
-    if (folder && !isFolderNode(folder)) {
-      throw new Error(`Parent folder with id "${parentFolder}" is not a folder`);
-    }
-    await context.addFile(file, driveId, name, parentFolder);
-  };
-  const handleDeleteNode = async (id) => {
-    dispatch(deleteNode({ id }));
-  };
-  const renameNode = async (id, name) => {
-    dispatch(updateNode({ id, name }));
-  };
-  const handleMoveNode = async (sourceId, targetId) => {
-    dispatch(moveNode({
-      srcFolder: sourceId,
-      targetParentFolder: targetId
-    }));
-  };
-  const handleCopyNode = async (sourceId, targetFolderId) => {
-    const target = targetFolderId ? getNode(targetFolderId, drive) : void 0;
-    if (targetFolderId && !target && targetFolderId !== driveId) {
-      throw new Error(`Target node with id "${targetFolderId}" not found`);
-    }
-    if (target && !isFolderNode(target)) {
-      throw new Error(`Target node with id "${targetFolderId}" is not a folder`);
-    }
-    const source = getNode(sourceId, drive);
-    if (!source) {
-      throw new Error(`Source node with id "${sourceId}" not found`);
-    }
-    const copyNodesInput = generateNodesCopy({
-      srcId: sourceId,
-      targetParentFolder: target == null ? void 0 : target.id,
-      targetName: source.name
-    }, generateId, drive.state.global.nodes);
-    const copyActions = copyNodesInput.map((copyNodeInput) => copyNode(copyNodeInput));
-    for (const copyAction of copyActions) {
-      dispatch(copyAction);
-    }
-  };
-  const duplicateNode = async (sourceId) => {
-    const node = getNode(sourceId, drive);
-    if (!node) {
-      throw new Error(`Node with id "${sourceId}" not found`);
-    }
-    await handleCopyNode(node.id, node.parentFolder || void 0);
-  };
-  return {
-    context,
-    selectNode: context.selectNode,
-    addFolder: handleAddFolder,
-    addFile,
-    addDocument,
-    deleteNode: handleDeleteNode,
-    renameNode,
-    moveNode: handleMoveNode,
-    copyNode: handleCopyNode,
-    duplicateNode
-  };
+function formatEthAddress(address) {
+  return `${address.slice(0, 7)}...${address.slice(-5)}`;
 }
-function useDriveActions(document2, dispatch, context) {
-  return useMemo(() => createDriveActions(document2, dispatch, context), [document2, dispatch, context]);
+function getDocumentIconSrc(documentType, customDocumentIconSrc) {
+  if (customDocumentIconSrc) {
+    return customDocumentIconSrc;
+  }
+  if (documentTypes.includes(documentType)) {
+    return iconMap[documentType];
+  }
+  return iconMap[DEFAULT];
 }
-function toNode(uiNode) {
-  if (uiNode.kind === "DRIVE") {
-    throw new Error("Cannot convert drive node to regular node");
+const validateDocument = (document2) => {
+  const errors = [];
+  if (document2.documentType !== "powerhouse/document-model") {
+    return errors;
   }
-  const { id, name, parentFolder, kind } = uiNode;
-  if (kind === "FOLDER") {
-    return { id, name, parentFolder, kind: "folder" };
-  } else {
-    const fileNode = uiNode;
+  const doc = document2;
+  const specs = doc.state.global.specifications[0];
+  const initialStateErrors = Object.keys(specs.state).reduce((acc, scopeKey) => {
+    const scope = scopeKey;
+    return [
+      ...acc,
+      ...validateInitialState(
+        specs.state[scope].initialValue,
+        scope !== "global"
+      ).map((err) => ({
+        ...err,
+        message: `${err.message}. Scope: ${scope}`,
+        details: { ...err.details, scope }
+      }))
+    ];
+  }, []);
+  const schemaStateErrors = Object.keys(specs.state).reduce((acc, scopeKey) => {
+    var _a;
+    const scope = scopeKey;
+    const isGlobalScope = scope === "global";
+    return [
+      ...acc,
+      ...validateStateSchemaName(
+        specs.state[scope].schema,
+        doc.name || ((_a = doc.state.global) == null ? void 0 : _a.name) || "",
+        !isGlobalScope ? scope : "",
+        !isGlobalScope
+      ).map((err) => ({
+        ...err,
+        message: `${err.message}. Scope: ${scope}`,
+        details: { ...err.details, scope }
+      }))
+    ];
+  }, []);
+  const modulesErrors = validateModules(specs.modules);
+  return [...initialStateErrors, ...schemaStateErrors, ...modulesErrors];
+};
+function useDocumentDriveById(driveId) {
+  var _a;
+  const { documentDrives } = useDocumentDriveServer();
+  if (!driveId)
     return {
-      id,
-      name,
-      parentFolder,
-      kind: "file",
-      documentType: fileNode.documentType,
-      synchronizationUnits: fileNode.synchronizationUnits
+      drive: null,
+      remoteUrl: null,
+      isRemoteDrive: false
     };
-  }
-}
-function createUiNodeAdapter(driveActions) {
+  const drive = documentDrives.find((drive2) => drive2.id === driveId);
+  const pullResponder = drive == null ? void 0 : drive.state.local.triggers.find(
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    (trigger) => trigger.type === "PullResponder"
+  );
+  const { remoteUrl } = (drive == null ? void 0 : drive.state.global) || {};
+  const isRemoteDrive = !!remoteUrl || !!pullResponder;
   return {
-    ...driveActions,
-    addFile: (file, parentNode) => driveActions.addFile(file, parentNode == null ? void 0 : parentNode.id),
-    addFolder: (name, parentFolder = void 0) => driveActions.addFolder(name, parentFolder),
-    renameNode: (name, node) => {
-      const converted = toNode(node);
-      return driveActions.renameNode(converted.id, name);
-    },
-    deleteNode: (node) => {
-      const converted = toNode(node);
-      return driveActions.deleteNode(converted.id);
-    },
-    moveNode: async (src, target) => {
-      if (target.kind === FILE$1 || src.parentFolder === target.id)
-        return;
-      const srcNode = toNode(src);
-      const targetNode = toNode(target);
-      return driveActions.moveNode(srcNode.id, targetNode.id);
-    },
-    copyNode: (src, target) => {
-      return driveActions.copyNode(src.id, target.id);
-    },
-    duplicateNode: (node) => {
-      const converted = toNode(node);
-      return driveActions.duplicateNode(converted.id);
-    }
+    drive,
+    remoteUrl: remoteUrl || ((_a = pullResponder == null ? void 0 : pullResponder.data) == null ? void 0 : _a.url),
+    isRemoteDrive
   };
 }
-function useDriveActionsWithUiNodes(document2, dispatch) {
-  const { selectedNode, selectedDriveNode, setSelectedNode, getNodeById } = useUiNodesContext();
-  const _driveContext = useDriveContext();
-  const driveContext = useMemo(() => ({
-    ..._driveContext,
-    selectedNode,
-    onSelectNode: (node) => {
-      _driveContext.selectNode(node);
-      setSelectedNode(getNodeById(node.id));
-    }
-  }), [selectedNode, selectedDriveNode == null ? void 0 : selectedDriveNode.driveId, setSelectedNode, getNodeById]);
-  const driveActions = useDriveActions(document2, dispatch, driveContext);
-  const uiNodeActions = useMemo(() => createUiNodeAdapter(driveActions), [driveActions]);
-  return uiNodeActions;
-}
 function useDocumentEditor(props) {
   const { driveId, documentId, documentType, documentModelModule, user } = props;
   const reactor = useUnwrappedReactor();
@@ -3420,12 +3894,9 @@ function useEditorProps(document2, node, documentDispatch, onAddOperation) {
   const user = useUser() || void 0;
   const userPermissions = useUserPermissions$1();
   const context = useMemo(() => ({ theme, user }), [theme, user]);
-  const {
-    selectedParentNode,
-    selectedDocument,
-    setSelectedNode,
-    getDocumentModelModule
-  } = useUiNodes();
+  const { selectedDocument } = useFileNodeDocument();
+  const { selectedParentNode, setSelectedNode } = useUiNodesContext();
+  const getDocumentModelModule = useGetDocumentModelModule();
   const canUndo = !!document2 && (document2.revision.global > 0 || document2.revision.local > 0);
   const canRedo = !!(document2 == null ? void 0 : document2.clipboard.length);
   const dispatch = useEditorDispatch(node, documentDispatch, onAddOperation);
@@ -3489,6 +3960,31 @@ 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;
+}
+const useOpenSwitchboardLink = (driveId) => {
+  const { isRemoteDrive, remoteUrl } = useDocumentDriveById(driveId);
+  const reactor = useUnwrappedReactor();
+  const { getDocumentGraphqlQuery, getSwitchboardGatewayUrl } = useSwitchboard(reactor);
+  return async (uiNode) => {
+    if ((uiNode == null ? void 0 : uiNode.kind) !== FILE$1 || !remoteUrl || !isRemoteDrive) return;
+    const url = new URL(remoteUrl);
+    url.origin;
+    const switchboardUrl = getSwitchboardGatewayUrl(remoteUrl);
+    const query = await getDocumentGraphqlQuery(driveId, uiNode.id);
+    const encodedQuery = encodeURIComponent(query);
+    await openUrl(`${switchboardUrl}?query=${encodedQuery}`);
+  };
+};
 function useSyncStatus(driveId, documentId) {
   const { getSyncStatusSync, onSyncStatus, documentDrives } = useDocumentDriveServer();
   const syncStatus = useSyncExternalStore(
@@ -3498,9 +3994,7 @@ function useSyncStatus(driveId, documentId) {
     },
     () => {
       var _a;
-      const drive = documentDrives.find(
-        (_drive) => _drive.state.global.id === driveId
-      );
+      const drive = documentDrives.find((_drive) => _drive.id === driveId);
       if (!drive) return;
       const isReadDrive = "readContext" in drive;
       const _sharingType = !isReadDrive ? (_a = drive.state.local.sharingType) == null ? void 0 : _a.toUpperCase() : "PUBLIC";
@@ -3523,41 +4017,366 @@ function useSyncStatus(driveId, documentId) {
       );
       return status;
     }
-  );
-  return syncStatus;
+  );
+  return syncStatus;
+}
+const useUndoRedoShortcuts = (props) => {
+  var _a;
+  const { undo: undo2, redo: redo2, canRedo, canUndo } = props;
+  const { isMac } = ((_a = window.electronAPI) == null ? void 0 : _a.platformInfo) || {};
+  let undoShortcut = "ctrl+z";
+  let redoShortcut = "ctrl+y";
+  if (isMac) {
+    undoShortcut = "mod+z";
+    redoShortcut = "mod+shift+z";
+  }
+  useHotkeys(
+    undoShortcut,
+    (event) => {
+      event.preventDefault();
+      if (canUndo) {
+        undo2();
+      }
+    },
+    {},
+    [canUndo, undo2]
+  );
+  useHotkeys(
+    redoShortcut,
+    (event) => {
+      event.preventDefault();
+      if (canRedo) {
+        redo2();
+      }
+    },
+    {},
+    [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$1).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) {
+    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 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 });
+    }
+  });
 }
-const useUndoRedoShortcuts = (props) => {
-  var _a;
-  const { undo: undo2, redo: redo2, canRedo, canUndo } = props;
-  const { isMac } = ((_a = window.electronAPI) == null ? void 0 : _a.platformInfo) || {};
-  let undoShortcut = "ctrl+z";
-  let redoShortcut = "ctrl+y";
-  if (isMac) {
-    undoShortcut = "mod+z";
-    redoShortcut = "mod+shift+z";
-  }
-  useHotkeys(
-    undoShortcut,
-    (event) => {
-      event.preventDefault();
-      if (canUndo) {
-        undo2();
+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));
     },
-    {},
-    [canUndo, undo2]
-  );
-  useHotkeys(
-    redoShortcut,
-    (event) => {
-      event.preventDefault();
-      if (canRedo) {
-        redo2();
-      }
+    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}`)]
     },
-    {},
-    [canRedo, redo2]
-  );
+    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);
@@ -3586,9 +4405,11 @@ 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;
@@ -3614,6 +4435,10 @@ 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;
@@ -3790,7 +4615,8 @@ const DocumentEditor = (props) => {
   const {
     disableExternalControls,
     documentToolbarEnabled,
-    showSwitchboardLink
+    showSwitchboardLink,
+    timelineEnabled
   } = editor.config || {};
   const handleSwitchboardLinkClick = showSwitchboardLink !== false ? onOpenSwitchboardLink : void 0;
   return /* @__PURE__ */ jsxs("div", { className: "relative h-full", id: "document-editor-context", children: [
@@ -3801,7 +4627,10 @@ const DocumentEditor = (props) => {
         onExport,
         onShowRevisionHistory: showRevisionHistory,
         title: fileNodeDocument.name || document2.name,
-        onSwitchboardLinkClick: handleSwitchboardLinkClick
+        onSwitchboardLinkClick: handleSwitchboardLinkClick,
+        timelineButtonVisible: timelineEnabled,
+        timelineItems: timelineItems.data,
+        onTimelineItemClick: setSelectedTimelineItem
       }
     ),
     !disableExternalControls && /* @__PURE__ */ jsxs("div", { className: "mb-4 flex justify-end gap-10", children: [
@@ -3831,7 +4660,16 @@ const DocumentEditor = (props) => {
           EditorComponent,
           {
             error,
-            context,
+            context: {
+              ...context,
+              getDocumentRevision: onGetDocumentRevision,
+              readMode: !!selectedTimelineItem,
+              selectedTimelineRevision: getRevisionFromDate(
+                selectedTimelineItem == null ? void 0 : selectedTimelineItem.startDate,
+                selectedTimelineItem == null ? void 0 : selectedTimelineItem.endDate,
+                document2.operations.global
+              )
+            },
             document: document2,
             documentNodeName: fileNodeDocument.name,
             dispatch,
@@ -3857,18 +4695,22 @@ function DocumentEditorContainer() {
   const { t } = useTranslation();
   const { showModal } = useModal();
   const {
-    selectedNode,
-    selectedParentNode,
-    isRemoteDrive,
     selectedDocument,
     fileNodeDocument,
-    setSelectedNode,
     setSelectedDocument,
-    openSwitchboardLink,
-    addOperationToSelectedDocument,
-    renameNode,
-    getDocumentModelModule
-  } = useUiNodes();
+    addOperationToSelectedDocument
+  } = useFileNodeDocument();
+  const { renameNode } = useDocumentDriveServer();
+  const {
+    selectedNode,
+    selectedDriveNode,
+    selectedParentNode,
+    setSelectedNode
+  } = useUiNodesContext();
+  const { isRemoteDrive } = useDocumentDriveById(selectedDriveNode == null ? void 0 : selectedDriveNode.id);
+  const openSwitchboardLink = useOpenSwitchboardLink(selectedDriveNode == null ? void 0 : selectedDriveNode.id);
+  const getDocumentModelModule = useGetDocumentModelModule();
+  const getDocument = useGetDocument();
   const handleAddOperationToSelectedDocument = useCallback(
     async (operation) => {
       if (!selectedDocument) {
@@ -3931,6 +4773,20 @@ 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);
@@ -3952,6 +4808,7 @@ function DocumentEditorContainer() {
           onChange: onDocumentChangeHandler,
           onClose,
           onExport,
+          onGetDocumentRevision,
           onAddOperation: handleAddOperationToSelectedDocument,
           onOpenSwitchboardLink
         }
@@ -3960,165 +4817,6 @@ 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({});
@@ -4268,10 +4966,10 @@ function DriveEditorContainer() {
     selectedNode,
     selectedParentNode
   } = useUiNodesContext();
-  const { addOperationToSelectedDrive } = useUiNodes();
+  const { addOperationToSelectedDrive } = useFileNodeDocument();
   const documentDrive = useSelectedDocumentDrive();
   const [document2, _dispatch, error] = useDocumentDispatch$1(
-    driveDocumentModelModule.reducer,
+    module.reducer,
     documentDrive
   );
   const reactor = useAsyncReactor();
@@ -4305,8 +5003,19 @@ 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,
@@ -4350,6 +5059,8 @@ function DriveEditorContainer() {
           context: {
             ...editorProps.context,
             ...driveContext,
+            analyticsDatabaseName: connectConfig.analyticsDatabaseName,
+            getDocumentRevision: onGetDocumentRevision,
             getDocumentModelModule,
             getEditor
           },
@@ -4367,12 +5078,13 @@ function Content() {
   const navigate = useNavigate();
   const { driveId } = useParams();
   const [documentDrives, , , status] = useDocumentDrives$1();
-  const uiNodes = useUiNodes();
-  const { fileNodeDocument, selectedDriveNode, selectedNode, addFile } = uiNodes;
+  const { selectedDriveNode, selectedNode } = useUiNodesContext();
+  const { addFile } = useDocumentDriveServer();
+  const { fileNodeDocument } = useFileNodeDocument();
   useEffect(() => {
     var _a;
     return (_a = window.electronAPI) == null ? void 0 : _a.handleFileOpen(async (file) => {
-      if (!selectedDriveNode || (selectedNode == null ? void 0 : selectedNode.kind) !== FILE) {
+      if (!selectedDriveNode || (selectedNode == null ? void 0 : selectedNode.kind) !== FILE$1) {
         return;
       }
       await addFile(
@@ -4385,7 +5097,7 @@ function Content() {
   }, [selectedDriveNode, selectedNode, addFile]);
   useEffect(() => {
     if ((status === "LOADED" || status === "ERROR") && !documentDrives.find(
-      (d) => d.state.global.id === driveId || d.state.global.slug === driveId || d.state.global.name === driveId
+      (d) => d.id === driveId || d.slug === driveId || d.state.global.name === driveId
     )) {
       toast(/* @__PURE__ */ jsxs("p", { children: [
         "Drive ",
@@ -4400,3 +5112,4 @@ function Content() {
 export {
   Content as default
 };
+//# sourceMappingURL=content-ChtzAUHq.js.map