@dxos/plugin-navtree 0.7.5-labs.c0e040f → 0.7.5-labs.d199c0f

package/dist/lib/browser/{chunk-SKZPY4LJ.mjs → chunk-GXNOX2XZ.mjs}

@@ -313,14 +313,14 @@ var getFirstTwoRenderableChars = (label) => {
 import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
 import { untracked } from "@preact/signals-core";
-import React10, { memo as memo2, useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo5 } from "react";
+import React10, { memo as memo2, useCallback as useCallback2, useEffect as useEffect3, useMemo as useMemo5 } from "react";
 import { createIntent as createIntent5, LayoutAction as LayoutAction4, Surface, useAppGraph as useAppGraph2, useCapability, useIntentDispatcher as useIntentDispatcher5, useLayout as useLayout2 } from "@dxos/app-framework";
 import { isAction as isAction4, isActionLike as isActionLike2 } from "@dxos/app-graph";
 import { isEchoObject, isSpace } from "@dxos/react-client/echo";
 import { useMediaQuery as useMediaQuery2 } from "@dxos/react-ui";
 import { isTreeData } from "@dxos/react-ui-list";
-import { mx as mx5 } from "@dxos/react-ui-theme";
-import { arrayMove } from "@dxos/util";
+import { mx as mx6 } from "@dxos/react-ui-theme";
+import { arrayMove as arrayMove2 } from "@dxos/util";
 
 // packages/plugins/plugin-navtree/src/components/NavTree.tsx
 import React9, { useMemo as useMemo4 } from "react";
@@ -328,11 +328,18 @@ import { Tabs as Tabs3 } from "@dxos/react-ui-tabs";
 import { byPosition } from "@dxos/util";
 
 // packages/plugins/plugin-navtree/src/components/L0Menu.tsx
-import React5, { useCallback, useMemo as useMemo2 } from "react";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { preserveOffsetOnSource } from "@atlaskit/pragmatic-drag-and-drop/element/preserve-offset-on-source";
+import { scrollJustEnoughIntoView } from "@atlaskit/pragmatic-drag-and-drop/element/scroll-just-enough-into-view";
+import { attachClosestEdge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
+import React5, { useCallback, useLayoutEffect, useMemo as useMemo2, useRef, useState as useState2 } from "react";
 import { createIntent as createIntent4, LayoutAction as LayoutAction3, useIntentDispatcher as useIntentDispatcher4 } from "@dxos/app-framework";
-import { Icon as Icon2, toLocalizedString as toLocalizedString2, Tooltip, useMediaQuery, useSidebars, useTranslation as useTranslation3 } from "@dxos/react-ui";
+import { invariant } from "@dxos/invariant";
+import { Popover, ScrollArea, toLocalizedString as toLocalizedString3, Tooltip, useMediaQuery, useSidebars, useTranslation as useTranslation4, ListItem, Icon as Icon2 } from "@dxos/react-ui";
 import { Tabs } from "@dxos/react-ui-tabs";
 import { mx as mx3 } from "@dxos/react-ui-theme";
+import { arrayMove } from "@dxos/util";
 
 // packages/plugins/plugin-navtree/src/components/NavTreeContext.tsx
 import { createContext, useContext } from "react";
@@ -341,10 +348,27 @@ var NavTreeContext = /* @__PURE__ */ createContext(null);
 var useNavTreeContext = () => useContext(NavTreeContext) ?? raise(new Error("NavTreeContext not found"));
 
 // packages/plugins/plugin-navtree/src/hooks.ts
+import { useEffect as useEffect2 } from "react";
+
+// packages/plugins/plugin-navtree/src/components/NavTreeDocumentTitle.tsx
 import { useEffect } from "react";
+import { toLocalizedString as toLocalizedString2, useTranslation as useTranslation3 } from "@dxos/react-ui";
+var NavTreeDocumentTitle = ({ node }) => {
+  const { t } = useTranslation3(NAVTREE_PLUGIN);
+  useEffect(() => {
+    document.title = node ? toLocalizedString2(node.properties.label, t) : t("current app name", {
+      ns: "appkit"
+    });
+  }, [
+    node?.properties?.label
+  ]);
+  return null;
+};
+
+// packages/plugins/plugin-navtree/src/hooks.ts
 var useLoadDescendents = (root) => {
   const { loadDescendents } = useNavTreeContext();
-  useEffect(() => {
+  useEffect2(() => {
     const frame = requestAnimationFrame(() => {
       if (root) {
         void loadDescendents?.(root);
@@ -357,6 +381,7 @@ var useLoadDescendents = (root) => {
 };
 
 // packages/plugins/plugin-navtree/src/components/L0Menu.tsx
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/plugins/plugin-navtree/src/components/L0Menu.tsx";
 var useL0ItemClick = ({ item, parent, path }, type) => {
   const { tab, onTabChange, onSelect, isCurrent } = useNavTreeContext();
   const { dispatchPromise: dispatch } = useIntentDispatcher4();
@@ -406,8 +431,10 @@ var useL0ItemClick = ({ item, parent, path }, type) => {
 var l0Breakpoints = {
   lg: "hidden lg:grid"
 };
-var L0Item = ({ item, parent, path, pinned }) => {
-  const { t } = useTranslation3(NAVTREE_PLUGIN);
+var L0Item = ({ item, parent, path, pinned, onRearrange }) => {
+  const { t } = useTranslation4(NAVTREE_PLUGIN);
+  const itemElement = useRef(null);
+  const [closestEdge, setEdge] = useState2(null);
   const type = l0ItemType(item);
   const itemPath = useMemo2(() => [
     ...path,
@@ -416,7 +443,7 @@ var L0Item = ({ item, parent, path, pinned }) => {
     item.id,
     path
   ]);
-  const { getProps } = useNavTreeContext();
+  const { getProps, popoverAnchorId } = useNavTreeContext();
   const { id, testId } = getProps?.(item, path) ?? {};
   const Root = type === "collection" ? "h2" : type === "tab" ? Tabs.TabPrimitive : "button";
   const handleClick = useL0ItemClick({
@@ -437,48 +464,130 @@ var L0Item = ({ item, parent, path, pinned }) => {
   } : {
     onClick: handleClick
   };
-  const localizedString = toLocalizedString2(item.properties.label, t);
+  const localizedString = toLocalizedString3(item.properties.label, t);
   const hue = item.properties.hue ?? null;
-  const avatarValue = useMemo2(() => type === "tab" ? getFirstTwoRenderableChars(localizedString).join("") : [], [
+  const avatarValue = useMemo2(() => type === "tab" ? getFirstTwoRenderableChars(localizedString).join("").toUpperCase() : [], [
     type,
     item.properties.label,
     t
   ]);
-  return /* @__PURE__ */ React5.createElement(Tooltip.Root, {
-    delayDuration: 0
-  }, /* @__PURE__ */ React5.createElement(Tooltip.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React5.createElement(Root, {
+  const hueFgStyle = hue && {
+    style: {
+      color: `var(--dx-${hue}SurfaceText)`
+    }
+  };
+  useLayoutEffect(() => {
+    if (!itemElement.current || !onRearrange) {
+      return;
+    }
+    return combine(draggable({
+      element: itemElement.current,
+      getInitialData: () => ({
+        id: item.id,
+        type: "l0Item"
+      }),
+      onGenerateDragPreview: ({ nativeSetDragImage, source, location }) => {
+        document.body.setAttribute("data-drag-preview", "true");
+        const element = source.element.querySelector("[data-frame]");
+        scrollJustEnoughIntoView({
+          element
+        });
+        const { x, y } = preserveOffsetOnSource({
+          element,
+          input: location.current.input
+        })({
+          container: element.offsetParent ?? document.body
+        });
+        nativeSetDragImage?.(element, x, y);
+      },
+      onDragStart: () => {
+        document.body.removeAttribute("data-drag-preview");
+        itemElement.current.closest("[data-drag-autoscroll]")?.setAttribute("data-drag-autoscroll", "active");
+      },
+      onDrop: () => {
+        itemElement.current.closest("[data-drag-autoscroll]")?.setAttribute("data-drag-autoscroll", "idle");
+      }
+    }), dropTargetForElements({
+      element: itemElement.current,
+      getData: ({ input, element }) => {
+        return attachClosestEdge({
+          id: item.id,
+          type: "l0Item"
+        }, {
+          input,
+          element,
+          allowedEdges: [
+            "top",
+            "bottom"
+          ]
+        });
+      },
+      onDragEnter: ({ self, source }) => {
+        if (source.data.type === self.data.type) {
+          setEdge(extractClosestEdge(self.data));
+        }
+      },
+      onDrag: ({ self, source }) => {
+        if (source.data.type === self.data.type) {
+          setEdge(extractClosestEdge(self.data));
+        }
+      },
+      onDragLeave: () => setEdge(null),
+      onDrop: ({ self, source }) => {
+        setEdge(null);
+        if (source.data.type === self.data.type) {
+          onRearrange(source.data, self.data, extractClosestEdge(self.data));
+        }
+      }
+    }));
+  }, [
+    item,
+    onRearrange
+  ]);
+  const l0ItemTrigger = /* @__PURE__ */ React5.createElement(Root, {
     ...rootProps,
     "data-type": type,
-    className: mx3('group/l0i dx-focus-ring-group grid overflow-hidden relative data[type!="collection"]:cursor-pointer app-no-drag', l0Breakpoints[item.properties.l0Breakpoint])
-  }, type !== "collection" && /* @__PURE__ */ React5.createElement("div", {
+    className: mx3('group/l0i dx-focus-ring-group grid relative data[type!="collection"]:cursor-pointer app-no-drag', l0Breakpoints[item.properties.l0Breakpoint]),
+    ref: itemElement
+  }, /* @__PURE__ */ React5.createElement("div", {
     role: "none",
-    className: mx3("absolute -z-[1] dx-focus-ring-group-indicator transition-colors", type === "tab" || pinned ? "rounded" : "rounded-full", pinned ? "bg-transparent group-hover/l0i:bg-groupSurface inset-inline-3 inset-block-0.5" : "bg-groupSurface inset-inline-3 inset-block-2"),
+    "data-frame": true,
+    className: mx3("absolute grid dx-focus-ring-group-indicator transition-colors", type === "tab" || pinned ? "rounded" : "rounded-full", pinned ? "bg-transparent group-hover/l0i:bg-groupSurface inset-inline-3 inset-block-0.5" : "bg-groupSurface inset-inline-3 inset-block-2"),
     ...hue && {
       style: {
         background: `var(--dx-${hue}Surface)`
       }
     }
-  }), /* @__PURE__ */ React5.createElement("div", {
-    role: "none",
-    className: "hidden group-aria-selected/l0i:block absolute inline-start-0 inset-block-4 is-1 bg-accentSurface rounded-ie"
-  }), type === "tab" && item.properties.disposition !== "pin-end" ? /* @__PURE__ */ React5.createElement("span", {
+  }, item.properties.icon && /* @__PURE__ */ React5.createElement(Icon2, {
+    icon: item.properties.icon,
+    size: pinned ? 5 : 7,
+    classNames: "place-self-center",
+    ...hueFgStyle
+  }) || (type === "tab" && item.properties.disposition !== "pin-end" ? /* @__PURE__ */ React5.createElement("span", {
     role: "img",
     className: "place-self-center text-3xl font-light",
-    ...hue && {
-      style: {
-        color: `var(--dx-${hue}SurfaceText)`
-      }
-    }
+    ...hueFgStyle
   }, avatarValue) : item.properties.icon && /* @__PURE__ */ React5.createElement(Icon2, {
-    icon: item.properties.icon,
+    icon: "ph--planet--regular",
     size: pinned ? 5 : 7,
-    classNames: "place-self-center"
+    classNames: "place-self-center",
+    ...hueFgStyle
+  }))), /* @__PURE__ */ React5.createElement("div", {
+    role: "none",
+    className: "hidden group-aria-selected/l0i:block absolute inline-start-0 inset-block-4 is-1 bg-accentSurface rounded-ie"
   }), /* @__PURE__ */ React5.createElement("span", {
     id: `${item.id}__label`,
     className: "sr-only"
-  }, localizedString))), /* @__PURE__ */ React5.createElement(Tooltip.Portal, null, /* @__PURE__ */ React5.createElement(Tooltip.Content, {
+  }, localizedString), onRearrange && closestEdge && /* @__PURE__ */ React5.createElement(ListItem.DropIndicator, {
+    edge: closestEdge
+  }));
+  return popoverAnchorId === id ? /* @__PURE__ */ React5.createElement(Popover.Anchor, {
+    asChild: true
+  }, l0ItemTrigger) : /* @__PURE__ */ React5.createElement(Tooltip.Root, {
+    delayDuration: 0
+  }, /* @__PURE__ */ React5.createElement(Tooltip.Trigger, {
+    asChild: true
+  }, l0ItemTrigger), /* @__PURE__ */ React5.createElement(Tooltip.Portal, null, /* @__PURE__ */ React5.createElement(Tooltip.Content, {
     side: "right"
   }, localizedString, /* @__PURE__ */ React5.createElement(Tooltip.Arrow, null))));
 };
@@ -494,6 +603,27 @@ var L0Collection = ({ item, path, parent }) => {
     path
   ]);
   const { id, testId } = navTreeContext.getProps?.(item, path) ?? {};
+  const handleRearrange = useCallback((source, target, closestEdge) => {
+    invariant(item.properties.onRearrangeChildren, void 0, {
+      F: __dxlog_file,
+      L: 246,
+      S: void 0,
+      A: [
+        "item.properties.onRearrangeChildren",
+        ""
+      ]
+    });
+    const sourceIndex = collectionItems.findIndex((i) => i.id === source.id);
+    const targetIndex = collectionItems.findIndex((i) => i.id === target.id);
+    const insertIndex = source.id === target.id ? sourceIndex : targetIndex + (sourceIndex < targetIndex ? closestEdge === "top" ? -1 : 0 : closestEdge === "bottom" ? 1 : 0);
+    const nextOrder = arrayMove([
+      ...collectionItems
+    ], sourceIndex, insertIndex);
+    return item.properties.onRearrangeChildren(nextOrder);
+  }, [
+    collectionItems,
+    item.properties.onRearrangeChildren
+  ]);
   return /* @__PURE__ */ React5.createElement("div", {
     role: "group",
     className: "contents group/l0c",
@@ -504,15 +634,18 @@ var L0Collection = ({ item, path, parent }) => {
     key: collectionItem.id,
     item: collectionItem,
     parent: item,
-    path: groupPath
+    path: groupPath,
+    ...item.properties.onRearrangeChildren && {
+      onRearrange: handleRearrange
+    }
   })));
 };
 var L0Menu = ({ topLevelItems, pinnedItems, parent, path }) => {
   return /* @__PURE__ */ React5.createElement(Tabs.Tablist, {
-    classNames: "group/l0 absolute z-[1] inset-block-0 inline-start-0 rounded-is-lg grid grid-cols-[var(--l0-size)] grid-rows-[1fr_min-content_var(--l0-size)] contain-layout !is-[--l0-size] bg-baseSurface border-ie border-separator app-drag"
-  }, /* @__PURE__ */ React5.createElement("div", {
+    classNames: "group/l0 absolute z-[1] inset-block-0 inline-start-0 rounded-is-lg grid grid-cols-[var(--l0-size)] grid-rows-[1fr_min-content_var(--l0-size)] contain-layout !is-[--l0-size] bg-baseSurface border-ie border-separator app-drag  pbe-[env(safe-area-inset-bottom)]"
+  }, /* @__PURE__ */ React5.createElement(ScrollArea.Root, null, /* @__PURE__ */ React5.createElement(ScrollArea.Viewport, null, /* @__PURE__ */ React5.createElement("div", {
     role: "none",
-    className: 'grid auto-rows-[calc(var(--l0-size)-.5rem)] min-bs-0 !overflow-y-auto plb-1 [body[data-platform="darwin"]_&]:pbs-[calc(30px+0.25rem)]'
+    className: 'grid auto-rows-[calc(var(--l0-size)-.5rem)] plb-1 [body[data-platform="darwin"]_&]:pbs-[calc(30px+0.25rem)] [body[data-platform="ios"]_&]:pbs-[max(env(safe-area-inset-top),0.25rem)]'
   }, topLevelItems.map((item) => {
     if (l0ItemType(item) === "collection") {
       return /* @__PURE__ */ React5.createElement(L0Collection, {
@@ -529,7 +662,9 @@ var L0Menu = ({ topLevelItems, pinnedItems, parent, path }) => {
         path
       });
     }
-  })), /* @__PURE__ */ React5.createElement("div", {
+  })), /* @__PURE__ */ React5.createElement(ScrollArea.Scrollbar, {
+    orientation: "vertical"
+  }, /* @__PURE__ */ React5.createElement(ScrollArea.Thumb, null)))), /* @__PURE__ */ React5.createElement("div", {
     role: "none",
     className: "grid grid-cols-1 auto-rows-[--rail-action] pbs-2"
   }, pinnedItems.filter((item) => l0ItemType(item) !== "collection").map((item) => /* @__PURE__ */ React5.createElement(L0Item, {
@@ -553,18 +688,19 @@ var L0Menu = ({ topLevelItems, pinnedItems, parent, path }) => {
 // packages/plugins/plugin-navtree/src/components/L1Panels.tsx
 import React8, { useMemo as useMemo3 } from "react";
 import { useLayout } from "@dxos/app-framework";
-import { toLocalizedString as toLocalizedString5, useTranslation as useTranslation6 } from "@dxos/react-ui";
+import { IconButton as IconButton2, toLocalizedString as toLocalizedString6, useTranslation as useTranslation7 } from "@dxos/react-ui";
 import { Tree } from "@dxos/react-ui-list";
 import { Tabs as Tabs2 } from "@dxos/react-ui-tabs";
+import { hoverableControlItem as hoverableControlItem2, hoverableOpenControlItem as hoverableOpenControlItem2, mx as mx5 } from "@dxos/react-ui-theme";
 
 // packages/plugins/plugin-navtree/src/components/NavTreeItemColumns.tsx
 import React7, { Fragment, memo } from "react";
 import { isAction as isAction3 } from "@dxos/app-graph";
-import { Popover, toLocalizedString as toLocalizedString4, Treegrid, useTranslation as useTranslation5 } from "@dxos/react-ui";
+import { Popover as Popover2, toLocalizedString as toLocalizedString5, Treegrid, useTranslation as useTranslation6 } from "@dxos/react-ui";
 
 // packages/plugins/plugin-navtree/src/components/NavTreeItemAction.tsx
-import React6, { useRef } from "react";
-import { useTranslation as useTranslation4, toLocalizedString as toLocalizedString3, IconButton } from "@dxos/react-ui";
+import React6, { useRef as useRef2 } from "react";
+import { useTranslation as useTranslation5, toLocalizedString as toLocalizedString4, IconButton } from "@dxos/react-ui";
 import { DropdownMenu, MenuProvider } from "@dxos/react-ui-menu";
 import { hoverableControlItem, hoverableOpenControlItem, mx as mx4 } from "@dxos/react-ui-theme";
 var fallbackIcon = "ph--placeholder--regular";
@@ -573,8 +709,8 @@ var actionButtonProps = {
   density: "fine"
 };
 var NavTreeItemActionDropdownMenu = ({ label, icon, testId, menuActions, onAction }) => {
-  const { t } = useTranslation4(NAVTREE_PLUGIN);
-  const suppressNextTooltip = useRef(false);
+  const { t } = useTranslation5(NAVTREE_PLUGIN);
+  const suppressNextTooltip = useRef2(false);
   return /* @__PURE__ */ React6.createElement(MenuProvider, {
     onAction
   }, /* @__PURE__ */ React6.createElement(DropdownMenu.Root, {
@@ -588,7 +724,7 @@ var NavTreeItemActionDropdownMenu = ({ label, icon, testId, menuActions, onActio
     variant: "ghost",
     icon: icon ?? fallbackIcon,
     iconOnly: true,
-    label: toLocalizedString3(label, t),
+    label: toLocalizedString4(label, t),
     "data-testid": testId,
     suppressNextTooltip
   }))));
@@ -620,9 +756,9 @@ var NavTreeItemMonolithicAction = ({ parent, properties: { disabled, caller, tes
   });
 };
 var NavTreeItemAction = ({ monolithic, menuActions, parent: node, ...props }) => {
-  const { t } = useTranslation4(NAVTREE_PLUGIN);
+  const { t } = useTranslation5(NAVTREE_PLUGIN);
   const monolithicAction = menuActions?.length === 1 && menuActions[0];
-  const baseLabel = toLocalizedString3(monolithicAction ? monolithicAction.properties.label : props.label, t);
+  const baseLabel = toLocalizedString4(monolithicAction ? monolithicAction.properties.label : props.label, t);
   return monolithic && menuActions?.length === 1 ? /* @__PURE__ */ React6.createElement(NavTreeItemMonolithicAction, {
     baseLabel,
     parent: node,
@@ -643,7 +779,7 @@ var NavTreeItemAction = ({ monolithic, menuActions, parent: node, ...props }) =>
 
 // packages/plugins/plugin-navtree/src/components/NavTreeItemColumns.tsx
 var NavTreeItemColumns = /* @__PURE__ */ memo(({ path, item, open }) => {
-  const { t } = useTranslation5(NAVTREE_PLUGIN);
+  const { t } = useTranslation6(NAVTREE_PLUGIN);
   const { getActions: getActions2, renderItemEnd: ItemEnd, popoverAnchorId } = useNavTreeContext();
   const level = path.length - 2;
   const { actions: _actions, groupedActions } = getActions2(item);
@@ -651,7 +787,7 @@ var NavTreeItemColumns = /* @__PURE__ */ memo(({ path, item, open }) => {
   const actions = (primaryAction?.properties?.disposition === "toolbar" ? secondaryActions : _actions).flatMap((action) => isAction3(action) ? [
     action
   ] : []).filter((action) => !action.properties?.hidden);
-  const ActionRoot = popoverAnchorId === `dxos.org/ui/${NAV_TREE_ITEM}/${item.id}` ? Popover.Anchor : Fragment;
+  const ActionRoot = popoverAnchorId === `dxos.org/ui/${NAV_TREE_ITEM}/${item.id}` ? Popover2.Anchor : Fragment;
   useLoadDescendents(item);
   useLoadDescendents(primaryAction && !isAction3(primaryAction) ? primaryAction : void 0);
   return /* @__PURE__ */ React7.createElement("div", {
@@ -659,7 +795,7 @@ var NavTreeItemColumns = /* @__PURE__ */ memo(({ path, item, open }) => {
     className: "contents app-no-drag"
   }, primaryAction?.properties?.disposition === "toolbar" && !primaryAction?.properties?.disabled ? /* @__PURE__ */ React7.createElement(NavTreeItemAction, {
     testId: primaryAction.properties?.testId,
-    label: toLocalizedString4(primaryAction.properties?.label, t),
+    label: toLocalizedString5(primaryAction.properties?.label, t),
     icon: primaryAction.properties?.icon ?? "ph--placeholder--regular",
     parent: item,
     monolithic: isAction3(primaryAction),
@@ -683,15 +819,15 @@ var NavTreeItemColumns = /* @__PURE__ */ memo(({ path, item, open }) => {
 });
 
 // packages/plugins/plugin-navtree/src/components/L1Panels.tsx
-var L1Panel = ({ item, path, currentItemId }) => {
+var L1Panel = ({ item, path, currentItemId, onBack }) => {
   const layout = useLayout();
   const navTreeContext = useNavTreeContext();
-  const { t } = useTranslation6(NAVTREE_PLUGIN);
+  const { t } = useTranslation7(NAVTREE_PLUGIN);
   return /* @__PURE__ */ React8.createElement(Tabs2.Tabpanel, {
     key: item.id,
     value: item.id,
     classNames: [
-      "absolute inset-block-0 inline-end-0 is-[calc(100%-var(--l0-size))] lg:is-[--l1-size] grid-cols-1 grid-rows-[var(--rail-size)_1fr]",
+      "absolute inset-block-0 inline-end-0 is-[calc(100%-var(--l0-size))] lg:is-[--l1-size] grid-cols-1 grid-rows-[var(--rail-size)_1fr] pbs-[env(safe-area-inset-top)]",
       item.id === currentItemId && "grid"
     ],
     tabIndex: -1,
@@ -700,9 +836,18 @@ var L1Panel = ({ item, path, currentItemId }) => {
     }
   }, item.id === currentItemId && /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement("h2", {
     className: "flex items-center border-be border-separator pis-4 app-drag"
-  }, /* @__PURE__ */ React8.createElement("span", {
+  }, item.properties.disposition === "pin-end" && /* @__PURE__ */ React8.createElement(IconButton2, {
+    label: t("back label"),
+    iconOnly: true,
+    icon: "ph--caret-left--regular",
+    size: 5,
+    density: "fine",
+    variant: "ghost",
+    classNames: mx5("shrink-0 mie-2 !p-0", "pointer-fine:pli-1", hoverableControlItem2, hoverableOpenControlItem2),
+    onClick: onBack
+  }), /* @__PURE__ */ React8.createElement("span", {
     className: "flex-1 truncate cursor-default"
-  }, toLocalizedString5(item.properties.label, t)), /* @__PURE__ */ React8.createElement(NavTreeItemColumns, {
+  }, toLocalizedString6(item.properties.label, t)), /* @__PURE__ */ React8.createElement(NavTreeItemColumns, {
     path,
     item,
     open: true
@@ -738,7 +883,7 @@ var L1PanelCollection = ({ item, path, currentItemId }) => {
     currentItemId
   })));
 };
-var L1Panels = ({ topLevelItems, path, currentItemId }) => {
+var L1Panels = ({ topLevelItems, path, currentItemId, onBack }) => {
   return /* @__PURE__ */ React8.createElement(React8.Fragment, null, topLevelItems.map((item) => {
     const type = l0ItemType(item);
     switch (type) {
@@ -754,7 +899,8 @@ var L1Panels = ({ topLevelItems, path, currentItemId }) => {
           key: item.id,
           item,
           path,
-          currentItemId
+          currentItemId,
+          onBack
         });
       default:
         return null;
@@ -765,8 +911,8 @@ var L1Panels = ({ topLevelItems, path, currentItemId }) => {
 // packages/plugins/plugin-navtree/src/components/NavTree.tsx
 var NAV_TREE_ITEM = "NavTreeItem";
 var NavTree = ({ id, root }) => {
-  const { getItems, tab } = useNavTreeContext();
-  const topLevelActions = getItems(root, "item");
+  const { tab, getItems, onBack } = useNavTreeContext();
+  const topLevelActions = getItems(root, "item").toSorted((a, b) => byPosition(a.properties, b.properties));
   const topLevelCollections = getItems(root, "collection");
   const topLevelWorkspaces = getItems(root, "workspace");
   const topLevelNavigation = getItems(root, "navigation");
@@ -810,7 +956,8 @@ var NavTree = ({ id, root }) => {
     }), /* @__PURE__ */ React9.createElement(L1Panels, {
       topLevelItems,
       path,
-      currentItemId: tab
+      currentItemId: tab,
+      onBack
     }))
   );
 };
@@ -820,7 +967,7 @@ import { lazy } from "@dxos/app-framework";
 var AppGraphBuilder = lazy(() => import("./app-graph-builder-BL7LRXCM.mjs"));
 var IntentResolver = lazy(() => import("./intent-resolver-U25VBFH3.mjs"));
 var Keyboard2 = lazy(() => import("./keyboard-MUBRTPI5.mjs"));
-var ReactSurface = lazy(() => import("./react-surface-OZDS36WN.mjs"));
+var ReactSurface = lazy(() => import("./react-surface-SG4QBA2U.mjs"));
 var State = lazy(() => import("./state-IEFQTUPG.mjs"));
 
 // packages/plugins/plugin-navtree/src/components/NavTreeContainer.tsx
@@ -849,7 +996,7 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
     return graph.nodes(node ?? graph.root, {
       filter: (node2) => {
         return untracked(() => {
-          const action = isActionLike2(node2);
+          const action = isAction4(node2);
           if (!disposition) {
             return !action || node2.properties.disposition === "item";
           }
@@ -869,7 +1016,7 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
       parentOf,
       icon: node.properties.icon,
       disabled: node.properties.disabled,
-      className: mx5(node.properties.modified && "italic", node.properties.className),
+      className: mx6(node.properties.modified && "italic", node.properties.className),
       headingClassName: node.properties.headingClassName,
       testId: node.properties.testId
     };
@@ -906,7 +1053,7 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
     }));
     if (layout.active.length === 0) {
       const [item] = getItems(node).filter((node2) => !isActionLike2(node2));
-      if (item) {
+      if (item && item.data) {
         await dispatch(createIntent5(LayoutAction4.Open, {
           part: "main",
           subject: [
@@ -989,7 +1136,15 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
     isCurrent,
     isLg
   ]);
-  useEffect2(() => {
+  const onBack = useCallback2(() => dispatch(createIntent5(LayoutAction4.RevertWorkspace, {
+    part: "workspace",
+    options: {
+      revert: true
+    }
+  })), [
+    dispatch
+  ]);
+  useEffect3(() => {
     return monitorForElements({
       canMonitor: ({ source }) => isTreeData(source.data),
       onDrop: ({ location, source }) => {
@@ -1014,7 +1169,7 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
           switch (operation) {
             case "rearrange": {
               const nextItems = sourceItems.map(({ data }) => data);
-              arrayMove(nextItems, sourceIndex, targetIndex);
+              arrayMove2(nextItems, sourceIndex, targetIndex);
               void sourceParent?.properties.onRearrangeChildren?.(nextItems);
               break;
             }
@@ -1042,6 +1197,7 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
   const navTreeContextValue = useMemo5(() => ({
     tab,
     onTabChange,
+    onBack,
     getActions: getActions2,
     loadDescendents,
     renderItemEnd,
@@ -1057,6 +1213,7 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
   }), [
     tab,
     onTabChange,
+    onBack,
     getActions2,
     loadDescendents,
     renderItemEnd,
@@ -1078,21 +1235,6 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
   }));
 });
 
-// packages/plugins/plugin-navtree/src/components/NavTreeDocumentTitle.tsx
-import { useEffect as useEffect3 } from "react";
-import { toLocalizedString as toLocalizedString6, useTranslation as useTranslation7 } from "@dxos/react-ui";
-var NavTreeDocumentTitle = ({ node }) => {
-  const { t } = useTranslation7(NAVTREE_PLUGIN);
-  useEffect3(() => {
-    document.title = node ? toLocalizedString6(node.properties.label, t) : t("current app name", {
-      ns: "appkit"
-    });
-  }, [
-    node?.properties?.label
-  ]);
-  return null;
-};
-
 export {
   CommandsDialogContent,
   CommandsTrigger,
@@ -1117,4 +1259,4 @@ export {
   ReactSurface,
   State
 };
-//# sourceMappingURL=chunk-SKZPY4LJ.mjs.map
+//# sourceMappingURL=chunk-GXNOX2XZ.mjs.map