@powerhousedao/connect 1.0.19-staging.0 → 1.0.20-dev.1

package/dist/assets/{content-DhAAoiTj.js → content-B1Gquii9.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-B0t4z_0j.js";
+import { t as twMerge, B as Button, aQ as mergeClassNameProps, x as ERROR, aR as MISSING, C as CONFLICT, S as SUCCESS, aS as SYNCING, aT as INITIAL_SYNC, aU as ConnectDropdownMenu, aV as useOnClickOutside, aW as useEventListener, aX as useCopyToClipboard, aY as Select, aZ as Provider, a_ as Root3, a$ as Trigger, b0 as Portal, b1 as Content2, b2 as validateInitialState, b3 as validateStateSchemaName, b4 as validateModules, b5 as useDocumentDrives, A as useUiNodesContext, b6 as useDriveContext, b7 as FILE$1, F as useUnwrappedReactor, b8 as useConnectDid, b9 as useConnectCrypto, o as useTranslation, G as useModal, ba as useAtomValue, bb as themeAtom, bc as useUser, bd as useUserPermissions$1, p as useUiNodes, be as exportFile, bf as useGetDocumentModelModule, bg as addActionContext$1, bh as signOperation$1, e as useDocumentDriveServer, bi as useHotkeys, bj as DriveLayout, bk as DriveContextProvider, bl as SearchBar, N as useAnalyticsStore, bm as useQueryClient, u as useQuery, a6 as AnalyticsPath, bn as useAnalyticsEngine, a5 as DateTime, bo as AnalyticsGranularity, bp as useGetEditor, bq as isSameDocument, n as useNavigate, s as useAsyncReactor, br as useFilteredDocumentModels, bs as useDriveEditor, bt as useDocumentDriveById, z as useParams, q as useDocumentDrives$1, w as toast } from "./app-BRmEr17M.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-C-1MIlBU.js";
+import { $ as Icon, bY as getDimensions, bZ as READ, b_ as nodeOptionsMap, b$ as defaultFileOptions, c0 as DELETE, c1 as RENAME, c2 as WRITE, c3 as DUPLICATE, c4 as defaultFolderOptions, c5 as garbageCollect, c6 as sortOperations, c7 as UI_NODE, aR as DRIVE, aB as FILE, ae as buildSignedOperation, ap as generateId$1, ay as isFolderNode, aD as generateNodesCopy, aE as copyNode, aC as moveNode, aA as updateNode, az as deleteNode, at as generateAddNodeAction, au as isFileNode, ax as addFolder, c8 as undo, c9 as redo, _ as logger, aS as FOLDER, ca as useDocumentDispatch$1, am as driveDocumentModelModule } from "./app-loader-_6yU4PFI.js";
+import { E as ENSAvatar, a as ErrorBoundary } from "./router-B-9X40Vx.js";
 import { flushSync } from "react-dom";
-import "./main.DTarSVWp.js";
+import "./main.CUjcRUhx.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,75 +1717,574 @@ 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;
+  }, [title, subtitle, timestamp, hasContent]);
+  const formatTimestamp2 = (isoString) => {
+    if (!isoString)
+      return "";
+    try {
+      return formatDistanceToNow(new Date(isoString), { addSuffix: true });
+    } catch {
+      return isoString;
+    }
+  };
+  const tooltipContent = jsxs("div", { className: "flex flex-col text-xs", children: [!!title && jsx("div", { children: title }), !!subtitle && jsx("div", { className: "text-gray-300", children: subtitle }), !!timestamp && jsx("div", { children: formatTimestamp2(timestamp) })] });
+  const handleMouseEnter = () => {
+    if (hasContent) {
+      setOpen(true);
+    }
+  };
+  const handleMouseLeave = () => {
+    setOpen(false);
+  };
+  return jsxs("div", { className: "relative", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [isSelected && jsx(Icon, { name: "TimelineCaret", color: "#4EA9FF", size: 10, className: "absolute top-[-11px] z-40" }), jsx(Tooltip, { className: "rounded-md bg-gray-900 text-white", content: tooltipContent, open: open && hasContent, onOpenChange: setOpen, delayDuration: 0, side: "bottom", sideOffset: 5, children: jsx("div", { className: twMerge("mx-0.5 flex h-[25px] w-1.5 cursor-pointer flex-col items-center justify-center rounded-[2px] hover:bg-blue-300", isSelected && "bg-blue-300", className), onClick, "data-title": title, "data-subtitle": subtitle, "data-timestamp": timestamp, children: jsx("div", { className: "h-0.5 w-1 rounded-full bg-gray-500" }) }) })] });
+};
+const getBarHeight = (size = 0) => {
+  switch (true) {
+    case size <= 0:
+      return "h-[1px]";
+    case size === 1:
+      return "h-[3px]";
+    case size === 2:
+      return "h-[6px]";
+    case size === 3:
+      return "h-[9px]";
+    case size >= 4:
+      return "h-[12px]";
+    default:
+      return "h-[1px]";
+  }
+};
+const formatTimestamp = (isoString) => {
+  if (!isoString)
+    return "";
+  try {
+    const date = parseISO(isoString);
+    return format(date, "HH:mm, dd, MMMM");
+  } catch {
+    return isoString;
+  }
+};
+const TimelineBar = ({ onClick, className, timestamp, additions, deletions, addSize = 0, delSize = 0, isSelected = false }) => {
+  const [open, setOpen] = useState(false);
+  const noChanges = addSize === 0 && delSize === 0;
+  const addBarHeight = getBarHeight(addSize);
+  const delBarHeight = getBarHeight(delSize);
+  const tooltipContent = jsxs("div", { className: "flex flex-col text-xs", children: [jsx("div", { children: formatTimestamp(timestamp) }), jsx("div", { className: "text-green-900", children: `${additions} additions +` }), jsx("div", { className: "text-red-700", children: `${deletions} deletions -` })] });
+  const handleMouseEnter = () => {
+    if (!noChanges) {
+      setOpen(true);
+    }
+  };
+  const handleMouseLeave = () => {
+    setOpen(false);
+  };
+  return jsxs("div", { className: "relative", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [isSelected && jsx(Icon, { name: "TimelineCaret", color: "#4EA9FF", size: 10, className: "absolute left-[-2px] top-[-11px] z-40" }), noChanges ? jsx("div", { className: twMerge("flex h-[25px] w-1.5 cursor-pointer flex-col items-center justify-center rounded-[2px] hover:bg-blue-300", className), "data-timestamp": timestamp, onClick, children: jsx("div", { className: "size-[3px] rounded-full bg-gray-500" }) }) : jsx(Tooltip, { className: "rounded-md bg-gray-900 text-white", content: tooltipContent, open, onOpenChange: setOpen, delayDuration: 0, side: "bottom", sideOffset: 5, children: jsxs("div", { className: twMerge("flex h-[25px] w-1.5 cursor-pointer flex-col items-center justify-center rounded-[2px] hover:bg-blue-300", className, isSelected && "bg-blue-300"), "data-timestamp": timestamp, onClick, children: [jsx("div", { className: "flex h-3 w-0.5 items-end", children: jsx("div", { className: twMerge("h-3 w-0.5 rounded-t-full bg-green-600", addBarHeight) }) }), jsx("div", { className: "flex h-3 w-0.5 items-start", children: jsx("div", { className: twMerge("h-3 w-0.5 rounded-b-full bg-red-600", delBarHeight) }) })] }) })] });
+};
+const defaultTimeLineItem = {
+  id: "default",
+  type: "bar",
+  addSize: 0,
+  delSize: 0
+};
+const DocumentTimeline = (props) => {
+  const { timeline = [], onItemClick } = props;
+  const [selectedItem, setSelectedItem] = useState(null);
+  const scrollContainerRef = useRef(null);
+  const handleClick = (item) => {
+    if (item.id === selectedItem || item.id === defaultTimeLineItem.id) {
+      onItemClick == null ? void 0 : onItemClick(null);
+      setSelectedItem(null);
+    } else {
+      onItemClick == null ? void 0 : onItemClick(item);
+      setSelectedItem(item.id);
+    }
+  };
+  const mergedTimelineItems = [...timeline, defaultTimeLineItem];
+  const [unselectedItems, selectedItems] = useMemo(() => {
+    const indexSelected = mergedTimelineItems.findIndex((item) => item.id === selectedItem);
+    return indexSelected === -1 ? [mergedTimelineItems, []] : [
+      mergedTimelineItems.slice(0, indexSelected),
+      mergedTimelineItems.slice(indexSelected)
+    ];
+  }, [mergedTimelineItems, selectedItem]);
+  const renderTimelineItems = useCallback((items) => {
+    return items.map((item) => {
+      if (item.type === "divider") {
+        const { timestamp, title, subtitle } = item;
+        return jsx(HDivider, { timestamp, title, subtitle, onClick: () => handleClick(item), isSelected: item.id === selectedItem }, item.id);
+      }
+      return jsx(TimelineBar, { timestamp: item.timestamp, addSize: item.addSize, delSize: item.delSize, additions: item.additions, deletions: item.deletions, isSelected: item.id === selectedItem, onClick: () => handleClick(item) }, item.id);
+    });
+  }, [handleClick, selectedItem]);
+  const unselectedContent = useMemo(() => renderTimelineItems(unselectedItems), [unselectedItems, renderTimelineItems]);
+  const selectedContent = useMemo(() => renderTimelineItems(selectedItems), [selectedItems, renderTimelineItems]);
+  useEffect(() => {
+    if (scrollContainerRef.current) {
+      scrollContainerRef.current.scrollLeft = scrollContainerRef.current.scrollWidth;
+    }
+  }, []);
+  return jsx(TooltipProvider, { delayDuration: 0, skipDelayDuration: 0, children: jsxs("div", { className: "relative h-[36px] w-full", children: [jsx("div", { className: "absolute left-[0px] z-[20] h-[17px] w-[6px] bg-white", children: jsx("div", { className: "mt-[11px] h-[6px] w-[6px] rounded-tl-md bg-slate-50" }) }), jsx("div", { className: "absolute right-[0px] top-[11px] z-[20] h-[6px] w-[6px] bg-white", children: jsx("div", { className: "h-[6px] w-[6px] rounded-tr-md bg-slate-50" }) }), jsx("div", { className: "absolute inset-x-0 bottom-0 h-[25px] rounded-md bg-slate-50" }), jsx("div", { className: "absolute inset-x-0 bottom-0 h-[36px]", children: jsx("div", { ref: scrollContainerRef, className: "h-full overflow-x-auto rounded-md", children: jsxs("div", { className: "ml-auto flex h-[36px] w-max items-end px-2 pb-0", children: [jsx("div", { className: "flex", children: unselectedContent }), jsx("div", { className: "flex rounded-sm bg-blue-200", children: selectedContent })] }) }) }), jsx("div", { className: "pointer-events-none absolute bottom-0 left-0 z-10 h-[25px] w-2 rounded-l-md bg-slate-50" }), jsx("div", { className: "pointer-events-none absolute bottom-0 right-0 z-10 h-[25px] w-2 rounded-r-md bg-slate-50" })] }) });
+};
+const DocumentToolbar = (props) => {
+  const { undo: undo2, canUndo, redo: redo2, canRedo, title, onClose, onExport, className, onShowRevisionHistory, onSwitchboardLinkClick, timelineItems = [], onTimelineItemClick, initialTimelineVisible = false, timelineButtonVisible = false } = props;
+  const [showTimeline, setShowTimeline] = useState(initialTimelineVisible);
+  const isUndoDisabled = !canUndo || !undo2;
+  const isRedoDisabled = !canRedo || !redo2;
+  const isExportDisabled = !onExport;
+  const isSwitchboardLinkDisabled = !onSwitchboardLinkClick;
+  const isRevisionHistoryDisabled = !onShowRevisionHistory;
+  const isTimelineDisabled = timelineItems.length === 0;
+  useEffect(() => {
+    if (initialTimelineVisible) {
+      setShowTimeline(true);
+    }
+  }, [initialTimelineVisible]);
+  const handleTimelineToggle = () => {
+    if (isTimelineDisabled)
+      return;
+    setShowTimeline(!showTimeline);
+  };
+  return jsxs("div", { className: "flex w-full flex-col", children: [jsxs("div", { className: twMerge("flex h-12 w-full items-center justify-between rounded-xl border border-gray-200 bg-slate-50 px-4", className), children: [jsxs("div", { className: "flex items-center gap-x-2", children: [jsx("button", { className: twMerge("grid size-8 place-items-center rounded-lg border border-gray-200 bg-white", isUndoDisabled ? "cursor-not-allowed" : "cursor-pointer active:opacity-70"), onClick: undo2, disabled: isUndoDisabled, children: jsx(Icon, { name: "ArrowCouterclockwise", size: 16, className: isUndoDisabled ? "text-gray-500" : "text-gray-900" }) }), jsx("button", { className: twMerge("grid size-8 place-items-center rounded-lg border border-gray-200 bg-white", isRedoDisabled ? "cursor-not-allowed" : "cursor-pointer active:opacity-70"), onClick: redo2, disabled: isRedoDisabled, children: jsx("div", { className: "-scale-x-100", children: jsx(Icon, { name: "ArrowCouterclockwise", size: 16, className: isRedoDisabled ? "text-gray-500" : "text-gray-900" }) }) }), jsx("button", { className: twMerge("flex h-8 items-center rounded-lg border border-gray-200 bg-white px-3 text-sm", isExportDisabled ? "cursor-not-allowed" : "cursor-pointer active:opacity-70"), onClick: onExport, disabled: isExportDisabled, children: jsx("span", { className: isExportDisabled ? "text-gray-500" : "text-gray-900", children: "Export" }) })] }), jsx("div", { className: "flex items-center", children: jsx("h1", { className: "text-sm font-medium text-gray-500", children: title }) }), jsxs("div", { className: "flex items-center gap-x-2", children: [jsx("button", { className: twMerge("grid size-8 place-items-center rounded-lg border border-gray-200 bg-white", isSwitchboardLinkDisabled ? "cursor-not-allowed" : "cursor-pointer active:opacity-70"), onClick: onSwitchboardLinkClick, disabled: isSwitchboardLinkDisabled, children: jsx(Icon, { name: "Drive", size: 16, className: isSwitchboardLinkDisabled ? "text-gray-500" : "text-gray-900" }) }), jsx("button", { className: twMerge("grid size-8 place-items-center rounded-lg border border-gray-200 bg-white", isRevisionHistoryDisabled ? "cursor-not-allowed" : "cursor-pointer active:opacity-70"), onClick: onShowRevisionHistory, disabled: isRevisionHistoryDisabled, children: jsx(Icon, { name: "History", size: 16, className: isRevisionHistoryDisabled ? "text-gray-500" : "text-gray-900" }) }), timelineButtonVisible && jsx("button", { className: twMerge("grid size-8 place-items-center rounded-lg border border-gray-200 bg-white", isTimelineDisabled ? "cursor-not-allowed" : "cursor-pointer active:opacity-70"), onClick: handleTimelineToggle, disabled: isTimelineDisabled, "aria-pressed": showTimeline, children: jsx(Icon, { name: "Timeline", size: 16, className: twMerge("text-gray-900", isTimelineDisabled && "opacity-50", showTimeline && "text-blue-600") }) }), jsx("button", { className: "grid size-8 cursor-pointer place-items-center rounded-lg border border-gray-200 bg-white active:opacity-70", onClick: onClose, children: jsx(Icon, { name: "XmarkLight", size: 16, className: "text-gray-900" }) })] })] }), showTimeline && jsx("div", { className: "mt-2 w-full", children: jsx(DocumentTimeline, { timeline: timelineItems, onItemClick: onTimelineItemClick }) })] });
+};
+const syncIcons = {
+  SYNCING: "Syncing",
+  SUCCESS: "Synced",
+  CONFLICT: "Error",
+  MISSING: "Circle",
+  ERROR: "Error",
+  INITIAL_SYNC: "Syncing"
+};
+function SyncStatusIcon(props) {
+  const { syncStatus, className, overrideSyncIcons = {}, ...iconProps } = props;
+  const icons = { ...syncIcons, ...overrideSyncIcons };
+  const syncStatusIcons = {
+    [INITIAL_SYNC]: jsx(Icon, { size: 16, ...iconProps, className: twMerge("text-blue-900", className), name: icons[INITIAL_SYNC] }),
+    [SYNCING]: jsx(Icon, { size: 16, ...iconProps, className: twMerge("text-blue-900", className), name: icons[SYNCING] }),
+    [SUCCESS]: jsx(Icon, { size: 16, ...iconProps, className: twMerge("text-green-900", className), name: icons[SUCCESS] }),
+    [CONFLICT]: jsx(Icon, { size: 16, ...iconProps, className: twMerge("text-orange-900", className), name: icons[CONFLICT] }),
+    [MISSING]: jsx(Icon, { size: 16, ...iconProps, className: twMerge("text-red-900", className), name: icons[MISSING] }),
+    [ERROR]: jsx(Icon, { size: 16, ...iconProps, className: twMerge("text-red-900", className), name: icons[ERROR] })
+  };
+  return syncStatusIcons[syncStatus];
+}
+function FileItem(props) {
+  const { uiNode, className, customDocumentIconSrc, onSelectNode, onRenameNode, onDuplicateNode, onDeleteNode, isAllowedToCreateDocuments } = props;
+  const [mode, setMode] = useState(READ);
+  const [isDropdownMenuOpen, setIsDropdownMenuOpen] = useState(false);
+  const { dragProps } = useDrag({ uiNode });
+  const isReadMode = mode === READ;
+  const dropdownMenuHandlers = {
+    [DUPLICATE]: () => onDuplicateNode(uiNode),
+    [RENAME]: () => setMode(WRITE),
+    [DELETE]: () => onDeleteNode(uiNode)
+  };
+  const dropdownMenuOptions = Object.entries(nodeOptionsMap).map(([id, option]) => ({
+    ...option,
+    id
+  })).filter((option) => defaultFileOptions.includes(option.id));
+  function onSubmit(name) {
+    onRenameNode(name, uiNode);
+    setMode(READ);
+  }
+  function onCancel() {
+    setMode(READ);
+  }
+  function onClick() {
+    onSelectNode(uiNode);
+  }
+  function onDropdownMenuOptionClick(itemId) {
+    const handler = dropdownMenuHandlers[itemId];
+    if (!handler) {
+      console.error(`No handler found for dropdown menu item: ${itemId}`);
+      return;
+    }
+    handler();
+    setIsDropdownMenuOpen(false);
+  }
+  const iconSrc = getDocumentIconSrc(uiNode.documentType, customDocumentIconSrc);
+  const iconNode = jsxs("div", { className: "relative", children: [jsx("img", { alt: "file icon", className: "max-w-none", height: 34, src: iconSrc, width: 32 }), isReadMode && uiNode.syncStatus && jsx("div", { className: "absolute bottom-[-2px] right-0 size-3 rounded-full bg-white", children: jsx("div", { className: "absolute left-[-2px] top-[-2px]", children: jsx(SyncStatusIcon, { overrideSyncIcons: { SUCCESS: "CheckCircleFill" }, syncStatus: uiNode.syncStatus }) }) })] });
+  const containerStyles = twMerge("group flex h-12 cursor-pointer select-none items-center rounded-lg bg-gray-200 px-2 text-gray-600 hover:text-gray-800", className);
+  const content = isReadMode ? jsxs("div", { className: "flex w-52 items-center justify-between", children: [jsxs("div", { className: "mr-2 truncate group-hover:mr-0", children: [jsx("div", { className: "max-h-6 truncate text-sm font-medium group-hover:text-gray-800", children: uiNode.name }), jsx("div", { className: "max-h-6 truncate text-xs font-medium text-gray-600 group-hover:text-gray-800", children: uiNode.documentType })] }), isAllowedToCreateDocuments ? jsx(ConnectDropdownMenu, { items: dropdownMenuOptions, onItemClick: onDropdownMenuOptionClick, onOpenChange: setIsDropdownMenuOpen, open: isDropdownMenuOpen, children: jsx("button", { className: twMerge("hidden group-hover:block", isDropdownMenuOpen && "block"), onClick: (e) => {
+    e.stopPropagation();
+    setIsDropdownMenuOpen(true);
+  }, children: jsx(Icon, { className: "text-gray-600", name: "VerticalDots" }) }) }) : null] }) : jsx(NodeInput, { className: "ml-3 flex-1 font-medium", defaultValue: uiNode.name, onCancel, onSubmit });
+  return jsx("div", { className: "relative w-64", onClick, children: jsx("div", { ...dragProps, className: containerStyles, children: jsxs("div", { className: "flex items-center", children: [jsx("div", { className: "mr-1.5", children: iconNode }), content] }) }) });
+}
+function FolderItem(props) {
+  const { uiNode, isAllowedToCreateDocuments, className, onRenameNode, onDuplicateNode, onDeleteNode, onSelectNode, onAddFile, onCopyNode, onMoveNode } = props;
+  const [mode, setMode] = useState(READ);
+  const [isDropdownMenuOpen, setIsDropdownMenuOpen] = useState(false);
+  const { dragProps } = useDrag({ ...props, uiNode });
+  const { isDropTarget, dropProps } = useDrop({
+    uiNode,
+    onAddFile,
+    onCopyNode,
+    onMoveNode
+  });
+  const isReadMode = mode === READ;
+  function onCancel() {
+    setMode(READ);
+  }
+  function onSubmit(name) {
+    onRenameNode(name, uiNode);
+    setMode(READ);
+  }
+  function onClick() {
+    onSelectNode(uiNode);
+  }
+  const dropdownMenuHandlers = {
+    [DUPLICATE]: () => onDuplicateNode(uiNode),
+    [RENAME]: () => setMode(WRITE),
+    [DELETE]: () => onDeleteNode(uiNode)
+  };
+  const dropdownMenuOptions = Object.entries(nodeOptionsMap).map(([id, option]) => ({
+    ...option,
+    id
+  })).filter((option) => defaultFolderOptions.includes(option.id));
+  function onDropdownMenuOptionClick(itemId) {
+    const handler = dropdownMenuHandlers[itemId];
+    if (!handler) {
+      console.error(`No handler found for dropdown menu item: ${itemId}`);
+      return;
+    }
+    handler();
+    setIsDropdownMenuOpen(false);
+  }
+  const content = isReadMode || !isAllowedToCreateDocuments ? jsx("div", { className: "ml-3 max-h-6 truncate font-medium text-gray-600 group-hover:text-gray-800", children: uiNode.name }) : jsx(NodeInput, { className: "ml-3 font-medium", defaultValue: uiNode.name, onCancel, onSubmit });
+  const containerStyles = twMerge("group flex h-12 cursor-pointer select-none items-center rounded-lg bg-gray-200 px-2", className, isDropTarget && "bg-blue-100");
+  return jsx("div", { className: "relative w-64", onClick, children: jsxs("div", { ...dragProps, ...dropProps, className: containerStyles, children: [jsxs("div", { className: "flex items-center overflow-hidden", children: [jsx("div", { className: "p-1", children: jsxs("div", { className: "relative", children: [jsx(Icon, { name: "FolderClose", size: 24 }), isReadMode && uiNode.syncStatus ? jsx("div", { className: "absolute bottom-[-3px] right-[-2px] size-3 rounded-full bg-white", children: jsx("div", { className: "absolute left-[-2px] top-[-2px]", children: jsx(SyncStatusIcon, { overrideSyncIcons: {
+    SUCCESS: "CheckCircleFill"
+  }, syncStatus: uiNode.syncStatus }) }) }) : null] }) }), content] }), isReadMode && isAllowedToCreateDocuments ? jsx(ConnectDropdownMenu, { items: dropdownMenuOptions, onItemClick: onDropdownMenuOptionClick, onOpenChange: setIsDropdownMenuOpen, open: isDropdownMenuOpen, children: jsx("button", { className: twMerge("ml-auto hidden group-hover:block", isDropdownMenuOpen && "block"), onClick: (e) => {
+    e.stopPropagation();
+    setIsDropdownMenuOpen(true);
+  }, children: jsx(Icon, { className: "text-gray-600", name: "VerticalDots" }) }) }) : null] }) });
+}
+function NodeInput(props) {
+  const { onSubmit, onCancel, defaultValue, className, minLength = 1, ...inputProps } = props;
+  const [value, setValue] = useState(defaultValue ?? "");
+  const ref = useRef(null);
+  useOnClickOutside(ref, handleSubmit);
+  useEventListener("keyup", (e) => {
+    if (e.key === "Enter") {
+      handleSubmit();
+    }
+    if (e.key === "Escape") {
+      onCancel();
+    }
+  });
+  useLayoutEffect(() => {
+    setTimeout(() => {
+      var _a, _b, _c;
+      (_a = ref.current) == null ? void 0 : _a.focus();
+      (_b = ref.current) == null ? void 0 : _b.select();
+      (_c = ref.current) == null ? void 0 : _c.scroll({ left: 9999 });
+    }, 100);
+  }, []);
+  function handleSubmit() {
+    if (value.length >= minLength) {
+      onSubmit(value);
+    }
+  }
+  return jsx("input", { ...inputProps, autoFocus: true, className: twMerge("bg-inherit text-inherit outline-none", className), minLength, onChange: (e) => setValue(e.target.value), ref, required: true, type: "text", value });
+}
+function Branch(props) {
+  const { branch = "main" } = props;
+  return jsxs("button", { className: "flex h-8 items-center gap-1 rounded-lg bg-slate-50 pl-1 pr-2 text-xs text-slate-100", children: [jsx(Icon, { name: "Branch" }), jsx("span", { children: "BRANCH" }), jsx("span", { className: "text-gray-900", children: branch })] });
+}
+function DocId(props) {
+  const { docId } = props;
+  const [, copy] = useCopyToClipboard();
+  function handleCopy(text) {
+    return () => {
+      copy(text).catch((error) => {
+        console.error("Failed to copy!", error);
+      });
+    };
+  }
+  return jsxs("button", { className: "flex h-8 items-center gap-1 rounded-lg bg-slate-50 pl-1 pr-2 text-xs text-slate-100", onClick: handleCopy(docId), children: [jsx(Icon, { name: "Link" }), "DOC ID", jsx("span", { className: "text-gray-900", children: docId })] });
+}
+function Scope(props) {
+  const { value, onChange } = props;
+  const items = [
+    { displayValue: "Global scope", value: "global" },
+    { displayValue: "Local scope", value: "local" }
+  ];
+  return jsx(Select, { absolutePositionMenu: true, containerClassName: "bg-slate-50 text-gray-500 rounded-lg w-fit text-xs z-10", id: "scope select", itemClassName: "py-2 text-gray-500 grid grid-cols-[auto,auto] gap-1", items, menuClassName: "min-w-0 text-gray-500", onChange, value });
+}
+function Header(props) {
+  const { title, docId, scope, onChangeScope, onClose, className, ...divProps } = props;
+  return jsxs("header", { className: twMerge("flex items-center justify-between bg-transparent", className), ...divProps, children: [jsxs("div", { className: "flex items-center gap-3", children: [jsx("button", { className: "shadow-button rounded-lg bg-gray-50 p-1 text-slate-100", onClick: onClose, children: jsx(Icon, { name: "VariantArrowLeft" }) }), jsx("h1", { className: "text-xs", children: title })] }), jsxs("div", { className: "flex items-center gap-2", children: [jsx(DocId, { docId }), jsx(Branch, {}), jsx(Scope, { onChange: onChangeScope, value: scope })] })] });
+}
+function memo(getDeps, fn, opts) {
+  let deps = opts.initialDeps ?? [];
+  let result;
+  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);
@@ -2857,8 +3309,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";
@@ -3488,6 +3940,17 @@ function useEditorProps(document2, node, documentDispatch, onAddOperation) {
     isAllowedToEditDocuments: (userPermissions == null ? void 0 : userPermissions.isAllowedToEditDocuments) ?? false
   };
 }
+function useGetDocument() {
+  const { openFile } = useDocumentDriveServer();
+  const getDocument = useCallback(
+    async (driveId, documentId, options) => {
+      const document2 = await openFile(driveId, documentId, options);
+      return document2;
+    },
+    [openFile]
+  );
+  return getDocument;
+}
 function useSyncStatus(driveId, documentId) {
   const { getSyncStatusSync, onSyncStatus, documentDrives } = useDocumentDriveServer();
   const syncStatus = useSyncExternalStore(
@@ -3558,36 +4021,363 @@ const useUndoRedoShortcuts = (props) => {
     [canRedo, redo2]
   );
 };
-function EditorLoader(props) {
-  const [showLoading, setShowLoading] = useState(false);
-  useEffect(() => {
-    setTimeout(() => {
-      setShowLoading(true);
-    }, props.loadingTimeout ?? 200);
-  }, [props]);
-  if (!showLoading) return null;
-  const { customEditorLoader, ...defaultProps } = props;
-  if (customEditorLoader) return /* @__PURE__ */ jsx(Fragment$1, { children: customEditorLoader });
-  return /* @__PURE__ */ jsx(DefaultEditorLoader, { ...defaultProps });
-}
-function EditorError({ message: message2 }) {
-  return /* @__PURE__ */ jsx("div", { className: "flex size-full items-center justify-center", children: /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: message2 }) });
+function getDocumentSpec(doc) {
+  if ("documentModelState" in doc) {
+    return doc.documentModelState;
+  }
+  return doc.documentModel;
 }
-function FallbackEditorError(props) {
-  const message2 = props.error instanceof Error ? props.error.message : props.error;
-  return /* @__PURE__ */ jsx(EditorError, { message: message2 });
+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 DocumentEditor = (props) => {
-  const {
-    fileNodeDocument,
-    document: initialDocument,
+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 useAnalyticsQueryWrapper(options) {
+  const { queryFn, ...queryOptions } = options;
+  const store = useAnalyticsStore();
+  const engine = useAnalyticsEngine();
+  return useQuery({
+    ...queryOptions,
+    queryFn: () => {
+      if (!store || !engine) {
+        throw new Error("No analytics store available. Use within an AnalyticsProvider.");
+      }
+      return queryFn({ store, engine });
+    }
+  });
+}
+function useAnalyticsQuery(query, options) {
+  const store = useAnalyticsStore();
+  const { data: querySources } = useQuerySources(query);
+  const queryClient = useQueryClient();
+  const subscriptions = useRef([]);
+  const result = useAnalyticsQueryWrapper({
+    queryKey: ["analytics", "query", query],
+    queryFn: ({ engine }) => engine.execute(query),
+    ...options
+  });
+  useEffect(() => {
+    if (!(querySources == null ? void 0 : querySources.length) || !store) {
+      return;
+    }
+    querySources.forEach((source) => {
+      const unsub = store.subscribeToSource(source, () => {
+        return queryClient.invalidateQueries({
+          queryKey: ["analytics", "query", query]
+        });
+      });
+      subscriptions.current.push(unsub);
+    });
+    return () => {
+      subscriptions.current.forEach((unsub) => unsub());
+      subscriptions.current = [];
+    };
+  }, [querySources]);
+  return result;
+}
+function useMatchingSeries(query, options) {
+  const result = useAnalyticsQueryWrapper({
+    queryKey: ["analytics", "matchingSeries", query],
+    queryFn: ({ store }) => store.getMatchingSeries(query),
+    ...options
+  });
+  return result;
+}
+function useQuerySources(query, options) {
+  const { data: matchingSeries } = useMatchingSeries(query);
+  return useQuery({
+    queryKey: ["analytics", "sources", query],
+    queryFn: () => {
+      if (!(matchingSeries == null ? void 0 : matchingSeries.length)) {
+        return [];
+      }
+      const uniqueSources = [
+        ...new Set(matchingSeries.map((s) => s.source.toString()))
+      ];
+      return uniqueSources.map((source) => AnalyticsPath.fromString(source));
+    },
+    enabled: !!matchingSeries,
+    ...options
+  });
+}
+const getBarSize = (value) => {
+  if (value <= 0)
+    return 0;
+  if (value > 0 && value <= 50)
+    return 1;
+  if (value > 50 && value <= 100)
+    return 2;
+  if (value > 100 && value <= 250)
+    return 3;
+  return 4;
+};
+const useTimelineItems = (documentId, startTimestamp) => {
+  const start = startTimestamp ? DateTime.fromISO(startTimestamp) : DateTime.now().startOf("day");
+  const { data: diffResult, isLoading } = useAnalyticsQuery({
+    start,
+    end: DateTime.now().endOf("day"),
+    granularity: AnalyticsGranularity.Hourly,
+    metrics: ["Count"],
+    select: {
+      changes: [AnalyticsPath.fromString(`changes`)],
+      document: [AnalyticsPath.fromString(`document/${documentId}`)]
+    },
+    lod: {
+      changes: 2
+    },
+    currency: AnalyticsPath.fromString("")
+  });
+  const mappedResult = useMemo(() => {
+    if (!diffResult)
+      return [];
+    return diffResult.sort((a, b) => {
+      const aDate = new Date(a.start);
+      const bDate = new Date(b.start);
+      return aDate.getTime() - bDate.getTime();
+    }).filter((result) => {
+      return result.rows.every((row) => row.value > 0);
+    }).map((result) => {
+      const { additions, deletions } = result.rows.reduce((acc, row) => {
+        if (row.dimensions.changes.path === "changes/add") {
+          acc.additions += row.value;
+        } else if (row.dimensions.changes.path === "changes/remove") {
+          acc.deletions += row.value;
+        }
+        return acc;
+      }, { additions: 0, deletions: 0 });
+      const startDate = new Date(result.start);
+      return {
+        id: startDate.toISOString(),
+        type: "bar",
+        addSize: getBarSize(additions),
+        delSize: getBarSize(deletions),
+        additions,
+        deletions,
+        timestamp: startDate.toISOString(),
+        startDate,
+        endDate: new Date(result.end),
+        revision: 0
+      };
+    });
+  }, [diffResult]);
+  const resultWithDividers = useMemo(() => {
+    if (!mappedResult.length)
+      return [];
+    const result = [];
+    mappedResult.forEach((item, index) => {
+      result.push(item);
+      if (index < mappedResult.length - 1) {
+        const currentDate = new Date(item.startDate);
+        const nextDate = new Date(mappedResult[index + 1].startDate);
+        const currentHour = currentDate.getHours();
+        const nextHour = nextDate.getHours();
+        const currentDay = currentDate.toDateString();
+        const nextDay = nextDate.toDateString();
+        if (currentDay !== nextDay || currentDay === nextDay && Math.abs(nextHour - currentHour) > 1) {
+          result.push({
+            id: `divider-${item.id}-${mappedResult[index + 1].id}`,
+            type: "divider",
+            revision: 0
+          });
+        }
+      }
+    });
+    return result;
+  }, [mappedResult]);
+  return {
+    isLoading,
+    data: resultWithDividers
+  };
+};
+const getRevisionFromDate = (startDate, endDate, operations = []) => {
+  if (!startDate || !endDate)
+    return 0;
+  const operation = operations.find((operation2) => {
+    const operationDate = new Date(operation2.timestamp);
+    return operationDate >= startDate && operationDate <= endDate;
+  });
+  return operation ? operation.index : 0;
+};
+function EditorLoader(props) {
+  const [showLoading, setShowLoading] = useState(false);
+  useEffect(() => {
+    setTimeout(() => {
+      setShowLoading(true);
+    }, props.loadingTimeout ?? 200);
+  }, [props]);
+  if (!showLoading) return null;
+  const { customEditorLoader, ...defaultProps } = props;
+  if (customEditorLoader) return /* @__PURE__ */ jsx(Fragment$1, { children: customEditorLoader });
+  return /* @__PURE__ */ jsx(DefaultEditorLoader, { ...defaultProps });
+}
+function EditorError({ message: message2 }) {
+  return /* @__PURE__ */ jsx("div", { className: "flex size-full items-center justify-center", children: /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: message2 }) });
+}
+function FallbackEditorError(props) {
+  const message2 = props.error instanceof Error ? props.error.message : props.error;
+  return /* @__PURE__ */ jsx(EditorError, { message: message2 });
+}
+const DocumentEditor = (props) => {
+  const {
+    fileNodeDocument,
+    document: initialDocument,
     onClose,
     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;
@@ -3613,6 +4403,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;
@@ -3789,7 +4583,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: [
@@ -3800,7 +4595,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: [
@@ -3830,7 +4628,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,
@@ -3868,6 +4675,7 @@ function DocumentEditorContainer() {
     renameNode,
     getDocumentModelModule
   } = useUiNodes();
+  const getDocument = useGetDocument();
   const handleAddOperationToSelectedDocument = useCallback(
     async (operation) => {
       if (!selectedDocument) {
@@ -3930,6 +4738,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);
@@ -3951,6 +4773,7 @@ function DocumentEditorContainer() {
           onChange: onDocumentChangeHandler,
           onClose,
           onExport,
+          onGetDocumentRevision,
           onAddOperation: handleAddOperationToSelectedDocument,
           onOpenSwitchboardLink
         }
@@ -3959,165 +4782,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({});
@@ -4304,6 +4968,17 @@ function DriveEditorContainer() {
   const { addFile, addDocument } = useDocumentDriveServer();
   const documentModels = useFilteredDocumentModels();
   const useDriveDocumentState = makeDriveDocumentStateHook(reactor);
+  const getDocument = useGetDocument();
+  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,
@@ -4346,7 +5021,8 @@ function DriveEditorContainer() {
           ...editorProps,
           context: {
             ...editorProps.context,
-            ...driveContext
+            ...driveContext,
+            getDocumentRevision: onGetDocumentRevision
           },
           onSwitchboardLinkClick: void 0,
           document: document2,
@@ -4380,7 +5056,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.state.global.id === driveId || d.slug === driveId || d.state.global.name === driveId
     )) {
       toast(/* @__PURE__ */ jsxs("p", { children: [
         "Drive ",
@@ -4395,3 +5071,4 @@ function Content() {
 export {
   Content as default
 };
+//# sourceMappingURL=content-B1Gquii9.js.map