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

package/dist/types/src/components/types.d.ts

@@ -2,6 +2,7 @@ import type { FC } from 'react';
 import type { Node } from '@dxos/app-graph';
 import type { TreeProps } from '@dxos/react-ui-list';
 import type { MaybePromise } from '@dxos/util';
+import { type L1PanelProps } from './L1Panels';
 import type { FlattenedActions, NavTreeItemGraphNode } from '../types';
 export type NavTreeItemColumnsProps = {
     path: string[];
@@ -9,7 +10,7 @@ export type NavTreeItemColumnsProps = {
     open: boolean;
 };
 export type NavTreeProps = Pick<TreeProps<NavTreeItemGraphNode>, 'id' | 'root'>;
-export type NavTreeContextValue = Pick<TreeProps<NavTreeItemGraphNode>, 'getProps' | 'isCurrent' | 'isOpen' | 'onOpenChange' | 'canDrop' | 'onSelect'> & {
+export type NavTreeContextValue = Pick<TreeProps<NavTreeItemGraphNode>, 'getProps' | 'isCurrent' | 'isOpen' | 'onOpenChange' | 'canDrop' | 'onSelect'> & Pick<L1PanelProps, 'onBack'> & {
     tab: string;
     onTabChange?: (node: NavTreeItemGraphNode) => void;
     getItems: (node?: NavTreeItemGraphNode, disposition?: string) => NavTreeItemGraphNode[];

package/dist/types/src/components/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/types.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE/C,OAAO,KAAK,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAEvE,MAAM,MAAM,uBAAuB,GAAG;IACpC,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,IAAI,EAAE,IAAI,CAAC;IACX,IAAI,EAAE,OAAO,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,oBAAoB,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC,CAAC;AAEhF,MAAM,MAAM,mBAAmB,GAAG,IAAI,CACpC,SAAS,CAAC,oBAAoB,CAAC,EAC/B,UAAU,GAAG,WAAW,GAAG,QAAQ,GAAG,cAAc,GAAG,SAAS,GAAG,UAAU,CAC9E,GAAG;IACF,GAAG,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACnD,QAAQ,EAAE,CAAC,IAAI,CAAC,EAAE,oBAAoB,EAAE,WAAW,CAAC,EAAE,MAAM,KAAK,oBAAoB,EAAE,CAAC;IACxF,UAAU,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,gBAAgB,CAAC;IAC7C,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,YAAY,CAAC,IAAI,CAAC,CAAC;IACrD,aAAa,CAAC,EAAE,EAAE,CAAC;QAAE,IAAI,EAAE,IAAI,CAAC;QAAC,IAAI,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;IAClD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/types.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE/C,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAC/C,OAAO,KAAK,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAEvE,MAAM,MAAM,uBAAuB,GAAG;IACpC,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,IAAI,EAAE,IAAI,CAAC;IACX,IAAI,EAAE,OAAO,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,oBAAoB,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC,CAAC;AAEhF,MAAM,MAAM,mBAAmB,GAAG,IAAI,CACpC,SAAS,CAAC,oBAAoB,CAAC,EAC/B,UAAU,GAAG,WAAW,GAAG,QAAQ,GAAG,cAAc,GAAG,SAAS,GAAG,UAAU,CAC9E,GACC,IAAI,CAAC,YAAY,EAAE,QAAQ,CAAC,GAAG;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACnD,QAAQ,EAAE,CAAC,IAAI,CAAC,EAAE,oBAAoB,EAAE,WAAW,CAAC,EAAE,MAAM,KAAK,oBAAoB,EAAE,CAAC;IACxF,UAAU,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,gBAAgB,CAAC;IAC7C,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,YAAY,CAAC,IAAI,CAAC,CAAC;IACrD,aAAa,CAAC,EAAE,EAAE,CAAC;QAAE,IAAI,EAAE,IAAI,CAAC;QAAC,IAAI,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;IAClD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC"}

package/dist/types/src/experimental/Tree.d.ts

@@ -1,11 +1,11 @@
 import { type Icon, type IconProps } from '@phosphor-icons/react';
-import React, { type HTMLAttributes, type PropsWithChildren } from 'react';
+import { type HTMLAttributes, type PropsWithChildren } from 'react';
 import { type ClassNameValue, type Size } from '@dxos/react-ui';
 export declare const IconButton: ({ Icon, classNames, size, onClick, ...props }: {
     Icon: Icon;
     classNames?: ClassNameValue;
     size?: Size;
-} & Pick<IconProps, "weight"> & Pick<HTMLAttributes<HTMLDivElement>, "onClick">) => React.JSX.Element;
+} & Pick<IconProps, "weight"> & Pick<HTMLAttributes<HTMLDivElement>, "onClick">) => import("react/jsx-runtime").JSX.Element;
 export type TreeNodeData = {
     id: string;
     title: string;
@@ -34,23 +34,23 @@ export type TreeNodeProps = {
     onChangeSelected?: (id: string, select: boolean) => void;
     onMenuAction?: (id: string, action: string) => void;
 };
-export declare const Title: ({ node: { title } }: Pick<TreeNodeProps, "node">) => React.JSX.Element;
+export declare const Title: ({ node: { title } }: Pick<TreeNodeProps, "node">) => import("react/jsx-runtime").JSX.Element;
 export declare const Grid: ({ className, ...props }: PropsWithChildren<{
     className?: string;
-}> & HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
+}> & HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
 export declare const TreeNodeRow: (props: TreeNodeProps & {
     className?: string;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const TreeNode: (props: TreeNodeProps & {
     ancestors?: TreeNodeData[];
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const TreeChildNodes: ({ className, ...props }: TreeNodeProps & {
     ancestors?: TreeNodeData[];
     className?: string;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export type TreeProps = {
     className?: string;
     showRoot?: boolean;
 } & TreeNodeProps;
-export declare const Tree: ({ className, showRoot, ...props }: TreeProps) => React.JSX.Element;
+export declare const Tree: ({ className, showRoot, ...props }: TreeProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Tree.d.ts.map

package/dist/types/src/experimental/Tree.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tree.d.ts","sourceRoot":"","sources":["../../../../src/experimental/Tree.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Tree.d.ts","sourceRoot":"","sources":["../../../../src/experimental/Tree.tsx"],"names":[],"mappings":"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"}

package/dist/types/src/experimental/Tree.stories.d.ts

@@ -1,8 +1,7 @@
 import '@dxos-theme';
 import { type Meta } from '@storybook/react';
-import { type JSX } from 'react';
-export declare const Default: () => JSX.Element;
-export declare const Visitor: () => JSX.Element;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;
+export declare const Visitor: () => import("react/jsx-runtime").JSX.Element;
 declare const meta: Meta;
 export default meta;
 //# sourceMappingURL=Tree.stories.d.ts.map

package/dist/types/src/experimental/Tree.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tree.stories.d.ts","sourceRoot":"","sources":["../../../../src/experimental/Tree.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAGrB,OAAO,EAAE,KAAK,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAc,EAAE,KAAK,GAAG,EAA+C,MAAM,OAAO,CAAC;AAmGrF,eAAO,MAAM,OAAO,mBAEnB,CAAC;AAEF,eAAO,MAAM,OAAO,mBAenB,CAAC;AAmGF,QAAA,MAAM,IAAI,EAAE,IAIX,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Tree.stories.d.ts","sourceRoot":"","sources":["../../../../src/experimental/Tree.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAGrB,OAAO,EAAE,KAAK,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAoG7C,eAAO,MAAM,OAAO,+CAEnB,CAAC;AAEF,eAAO,MAAM,OAAO,+CAenB,CAAC;AAmGF,QAAA,MAAM,IAAI,EAAE,IAIX,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/types/src/stories/StorybookNavTree.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { type NavTreeContextValue, type NavTreeProps } from '../components';
-export declare const StorybookNavTree: ({ getActions, loadDescendents, renderItemEnd, popoverAnchorId, getItems, getProps, isCurrent, canDrop, onSelect, isOpen, onOpenChange, ...props }: NavTreeProps & NavTreeContextValue) => React.JSX.Element;
+export declare const StorybookNavTree: ({ getActions, loadDescendents, renderItemEnd, popoverAnchorId, getItems, getProps, isCurrent, canDrop, onSelect, isOpen, onOpenChange, ...props }: NavTreeProps & NavTreeContextValue) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=StorybookNavTree.d.ts.map

package/dist/types/src/stories/StorybookNavTree.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StorybookNavTree.d.ts","sourceRoot":"","sources":["../../../../src/stories/StorybookNavTree.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAO,EAA2B,KAAK,mBAAmB,EAAE,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAGrG,eAAO,MAAM,gBAAgB,sJAa1B,YAAY,GAAG,mBAAmB,sBAwCpC,CAAC"}
+{"version":3,"file":"StorybookNavTree.d.ts","sourceRoot":"","sources":["../../../../src/stories/StorybookNavTree.tsx"],"names":[],"mappings":"AAMA,OAAO,EAA2B,KAAK,mBAAmB,EAAE,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAGrG,eAAO,MAAM,gBAAgB,sJAa1B,YAAY,GAAG,mBAAmB,4CAwCpC,CAAC"}

package/dist/types/src/util.d.ts

@@ -9,7 +9,7 @@ export declare const getActions: (graph: Graph, node: Node) => FlattenedActions;
 export declare const expandChildrenAndActions: (graph: Graph, node: Node) => Promise<[void, [void, void]]>;
 export declare const expandChildren: (graph: Graph, node: Node) => Promise<void>;
 export declare const expandActions: (graph: Graph, node: Node) => Promise<[void, void]>;
-export declare const l0ItemType: (item: Node<any>) => "collection" | "action" | "link" | "tab";
+export declare const l0ItemType: (item: Node<any>) => "link" | "tab" | "collection" | "action";
 /**
  * Returns the first two renderable characters from a string that are separated by non-word characters.
  * Handles Unicode characters correctly.

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@dxos/plugin-navtree",
-  "version": "0.7.5-labs.c0e040f",
+  "version": "0.7.5-labs.d199c0f",
   "description": "DXOS Surface plugin for a tree view visualization of the graph.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
   "license": "MIT",
   "author": "DXOS.org",
   "sideEffects": true,
+  "type": "module",
   "exports": {
     ".": {
       "types": "./dist/types/src/index.d.ts",
@@ -28,28 +29,28 @@
     "@radix-ui/react-dismissable-layer": "1.1.5",
     "@radix-ui/react-use-controllable-state": "1.1.0",
     "date-fns": "^3.3.1",
-    "@dxos/app-framework": "0.7.5-labs.c0e040f",
-    "@dxos/async": "0.7.5-labs.c0e040f",
-    "@dxos/app-graph": "0.7.5-labs.c0e040f",
-    "@dxos/debug": "0.7.5-labs.c0e040f",
-    "@dxos/invariant": "0.7.5-labs.c0e040f",
-    "@dxos/keyboard": "0.7.5-labs.c0e040f",
-    "@dxos/live-object": "0.7.5-labs.c0e040f",
-    "@dxos/local-storage": "0.7.5-labs.c0e040f",
-    "@dxos/log": "0.7.5-labs.c0e040f",
-    "@dxos/plugin-client": "0.7.5-labs.c0e040f",
-    "@dxos/echo-schema": "0.7.5-labs.c0e040f",
-    "@dxos/plugin-observability": "0.7.5-labs.c0e040f",
-    "@dxos/plugin-graph": "0.7.5-labs.c0e040f",
-    "@dxos/plugin-theme": "0.7.5-labs.c0e040f",
-    "@dxos/protocols": "0.7.5-labs.c0e040f",
-    "@dxos/react-client": "0.7.5-labs.c0e040f",
-    "@dxos/react-ui-list": "0.7.5-labs.c0e040f",
-    "@dxos/react-ui-menu": "0.7.5-labs.c0e040f",
-    "@dxos/react-ui-searchlist": "0.7.5-labs.c0e040f",
-    "@dxos/react-ui-stack": "0.7.5-labs.c0e040f",
-    "@dxos/util": "0.7.5-labs.c0e040f",
-    "@dxos/react-ui-tabs": "0.7.5-labs.c0e040f"
+    "@dxos/app-framework": "0.7.5-labs.d199c0f",
+    "@dxos/app-graph": "0.7.5-labs.d199c0f",
+    "@dxos/echo-schema": "0.7.5-labs.d199c0f",
+    "@dxos/async": "0.7.5-labs.d199c0f",
+    "@dxos/debug": "0.7.5-labs.d199c0f",
+    "@dxos/invariant": "0.7.5-labs.d199c0f",
+    "@dxos/keyboard": "0.7.5-labs.d199c0f",
+    "@dxos/live-object": "0.7.5-labs.d199c0f",
+    "@dxos/local-storage": "0.7.5-labs.d199c0f",
+    "@dxos/log": "0.7.5-labs.d199c0f",
+    "@dxos/plugin-client": "0.7.5-labs.d199c0f",
+    "@dxos/plugin-graph": "0.7.5-labs.d199c0f",
+    "@dxos/plugin-observability": "0.7.5-labs.d199c0f",
+    "@dxos/protocols": "0.7.5-labs.d199c0f",
+    "@dxos/react-client": "0.7.5-labs.d199c0f",
+    "@dxos/react-ui-list": "0.7.5-labs.d199c0f",
+    "@dxos/plugin-theme": "0.7.5-labs.d199c0f",
+    "@dxos/react-ui-menu": "0.7.5-labs.d199c0f",
+    "@dxos/react-ui-searchlist": "0.7.5-labs.d199c0f",
+    "@dxos/react-ui-stack": "0.7.5-labs.d199c0f",
+    "@dxos/react-ui-tabs": "0.7.5-labs.d199c0f",
+    "@dxos/util": "0.7.5-labs.d199c0f"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -58,18 +59,18 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/echo-signals": "0.7.5-labs.c0e040f",
-    "@dxos/random": "0.7.5-labs.c0e040f",
-    "@dxos/react-ui": "0.7.5-labs.c0e040f",
-    "@dxos/react-ui-theme": "0.7.5-labs.c0e040f",
-    "@dxos/storybook-utils": "0.7.5-labs.c0e040f"
+    "@dxos/echo-signals": "0.7.5-labs.d199c0f",
+    "@dxos/random": "0.7.5-labs.d199c0f",
+    "@dxos/react-ui": "0.7.5-labs.d199c0f",
+    "@dxos/storybook-utils": "0.7.5-labs.d199c0f",
+    "@dxos/react-ui-theme": "0.7.5-labs.d199c0f"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.7.5-labs.c0e040f",
-    "@dxos/react-ui-theme": "0.7.5-labs.c0e040f"
+    "@dxos/react-ui-theme": "0.7.5-labs.d199c0f",
+    "@dxos/react-ui": "0.7.5-labs.d199c0f"
   },
   "publishConfig": {
     "access": "public"

package/src/NavTreePlugin.tsx

@@ -74,12 +74,12 @@ export const NavTreePlugin = () =>
     }),
     defineModule({
       id: `${meta.id}/module/react-surface`,
-      activatesOn: Events.SetupSurfaces,
+      activatesOn: Events.SetupReactSurface,
       activate: ReactSurface,
     }),
     defineModule({
       id: `${meta.id}/module/intent-resolver`,
-      activatesOn: Events.SetupIntents,
+      activatesOn: Events.SetupIntentResolver,
       activate: IntentResolver,
     }),
     defineModule({

package/src/components/L0Menu.tsx

@@ -2,13 +2,35 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { type MouseEvent, useCallback, useMemo } 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,
+  type Edge,
+  extractClosestEdge,
+} from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import React, { type MouseEvent, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
 
 import { createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
 import { type Node } from '@dxos/app-graph';
-import { Icon, toLocalizedString, Tooltip, useMediaQuery, useSidebars, useTranslation } from '@dxos/react-ui';
+import { invariant } from '@dxos/invariant';
+import {
+  Popover,
+  ScrollArea,
+  toLocalizedString,
+  Tooltip,
+  useMediaQuery,
+  useSidebars,
+  useTranslation,
+  ListItem,
+  Icon,
+} from '@dxos/react-ui';
+import type { StackItemRearrangeHandler } from '@dxos/react-ui-stack';
 import { Tabs } from '@dxos/react-ui-tabs';
 import { mx } from '@dxos/react-ui-theme';
+import { arrayMove } from '@dxos/util';
 
 import { useNavTreeContext } from './NavTreeContext';
 import { NotchStart } from './NotchStart';
@@ -16,11 +38,14 @@ import { useLoadDescendents } from '../hooks';
 import { NAVTREE_PLUGIN } from '../meta';
 import { getFirstTwoRenderableChars, l0ItemType } from '../util';
 
+type L0ItemData = { id: L0ItemProps['item']['id']; type: 'l0Item' };
+
 type L0ItemProps = {
   item: Node<any>;
   parent?: Node<any>;
   path: string[];
   pinned?: boolean;
+  onRearrange?: StackItemRearrangeHandler<L0ItemData>;
 };
 
 const useL0ItemClick = ({ item, parent, path }: L0ItemProps, type: string) => {
@@ -70,11 +95,13 @@ const l0Breakpoints: Record<string, string> = {
   lg: 'hidden lg:grid',
 };
 
-const L0Item = ({ item, parent, path, pinned }: L0ItemProps) => {
+const L0Item = ({ item, parent, path, pinned, onRearrange }: L0ItemProps) => {
   const { t } = useTranslation(NAVTREE_PLUGIN);
+  const itemElement = useRef<HTMLElement | null>(null);
+  const [closestEdge, setEdge] = useState<Edge | null>(null);
   const type = l0ItemType(item);
   const itemPath = useMemo(() => [...path, item.id], [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({ item, path: itemPath, parent }, type);
@@ -87,56 +114,117 @@ const L0Item = ({ item, parent, path, pinned }: L0ItemProps) => {
   const localizedString = toLocalizedString(item.properties.label, t);
   const hue = item.properties.hue ?? null;
   const avatarValue = useMemo(
-    () => (type === 'tab' ? getFirstTwoRenderableChars(localizedString).join('') : []),
+    () => (type === 'tab' ? getFirstTwoRenderableChars(localizedString).join('').toUpperCase() : []),
     [type, item.properties.label, t],
   );
+  const hueFgStyle = hue && { style: { color: `var(--dx-${hue}SurfaceText)` } };
 
-  return (
-    <Tooltip.Root delayDuration={0}>
-      <Tooltip.Trigger asChild>
-        <Root
-          {...(rootProps as any)}
-          data-type={type}
-          className={mx(
-            'group/l0i dx-focus-ring-group grid overflow-hidden relative data[type!="collection"]:cursor-pointer app-no-drag',
-            l0Breakpoints[item.properties.l0Breakpoint],
-          )}
-        >
-          {type !== 'collection' && (
-            <div
-              role='none'
-              className={mx(
-                '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',
-              )}
-              {...(hue && { style: { background: `var(--dx-${hue}Surface)` } })}
-            />
-          )}
-          <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' ? (
-            <span
-              role='img'
-              className='place-self-center text-3xl font-light'
-              {...(hue && { style: { color: `var(--dx-${hue}SurfaceText)` } })}
-            >
+  useLayoutEffect(() => {
+    // NOTE(thure): This is copied from StackItem, perhaps this should be DRYed out.
+    if (!itemElement.current || !onRearrange) {
+      return;
+    }
+    return combine(
+      draggable({
+        element: itemElement.current,
+        getInitialData: () => ({ id: item.id, type: 'l0Item' }) satisfies L0ItemData,
+        onGenerateDragPreview: ({ nativeSetDragImage, source, location }) => {
+          document.body.setAttribute('data-drag-preview', 'true');
+          const element = source.element.querySelector('[data-frame]') as HTMLElement;
+          scrollJustEnoughIntoView({ element });
+          const { x, y } = preserveOffsetOnSource({ element, input: location.current.input })({
+            container: (element.offsetParent ?? document.body) as HTMLElement,
+          });
+          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 as L0ItemData, self.data as L0ItemData, extractClosestEdge(self.data));
+          }
+        },
+      }),
+    );
+  }, [item, onRearrange]);
+
+  const l0ItemTrigger = (
+    <Root
+      {...(rootProps as any)}
+      data-type={type}
+      className={mx(
+        'group/l0i dx-focus-ring-group grid relative data[type!="collection"]:cursor-pointer app-no-drag',
+        l0Breakpoints[item.properties.l0Breakpoint],
+      )}
+      ref={itemElement}
+    >
+      <div
+        role='none'
+        data-frame={true}
+        className={mx(
+          '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)` } })}
+      >
+        {(item.properties.icon && (
+          <Icon icon={item.properties.icon} size={pinned ? 5 : 7} classNames='place-self-center' {...hueFgStyle} />
+        )) ||
+          (type === 'tab' && item.properties.disposition !== 'pin-end' ? (
+            <span role='img' className='place-self-center text-3xl font-light' {...hueFgStyle}>
               {avatarValue}
             </span>
           ) : (
             item.properties.icon && (
-              <Icon icon={item.properties.icon} size={pinned ? 5 : 7} classNames='place-self-center' />
+              <Icon icon='ph--planet--regular' size={pinned ? 5 : 7} classNames='place-self-center' {...hueFgStyle} />
             )
-          )}
-          <span id={`${item.id}__label`} className='sr-only'>
-            {localizedString}
-          </span>
-        </Root>
-      </Tooltip.Trigger>
+          ))}
+      </div>
+      <div
+        role='none'
+        className='hidden group-aria-selected/l0i:block absolute inline-start-0 inset-block-4 is-1 bg-accentSurface rounded-ie'
+      />
+      <span id={`${item.id}__label`} className='sr-only'>
+        {localizedString}
+      </span>
+      {onRearrange && closestEdge && <ListItem.DropIndicator edge={closestEdge} />}
+    </Root>
+  );
+
+  return popoverAnchorId === id ? (
+    <Popover.Anchor asChild>{l0ItemTrigger}</Popover.Anchor>
+  ) : (
+    <Tooltip.Root delayDuration={0}>
+      <Tooltip.Trigger asChild>{l0ItemTrigger}</Tooltip.Trigger>
       <Tooltip.Portal>
         <Tooltip.Content side='right'>
           {localizedString}
@@ -153,6 +241,21 @@ const L0Collection = ({ item, path, parent }: L0ItemProps) => {
   const collectionItems = navTreeContext.getItems(item);
   const groupPath = useMemo(() => [...path, item.id], [item.id, path]);
   const { id, testId } = navTreeContext.getProps?.(item, path) ?? {};
+  const handleRearrange = useCallback<StackItemRearrangeHandler<L0ItemData>>(
+    (source, target, closestEdge) => {
+      invariant(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 (
     <div
       role='group'
@@ -161,10 +264,14 @@ const L0Collection = ({ item, path, parent }: L0ItemProps) => {
       data-itemid={id}
       data-testid={testId}
     >
-      {/* TODO(burdon): Option. */}
-      {/* <L0Item item={item} parent={parent} path={groupPath} /> */}
       {collectionItems.map((collectionItem) => (
-        <L0Item key={collectionItem.id} item={collectionItem} parent={item} path={groupPath} />
+        <L0Item
+          key={collectionItem.id}
+          item={collectionItem}
+          parent={item}
+          path={groupPath}
+          {...(item.properties.onRearrangeChildren && { onRearrange: handleRearrange })}
+        />
       ))}
     </div>
   );
@@ -182,19 +289,26 @@ export const L0Menu = ({
   path: string[];
 }) => {
   return (
-    <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'>
-      <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)]'
-      >
-        {topLevelItems.map((item) => {
-          if (l0ItemType(item) === 'collection') {
-            return <L0Collection key={item.id} item={item} parent={parent} path={path} />;
-          } else {
-            return <L0Item key={item.id} item={item} parent={parent} path={path} />;
-          }
-        })}
-      </div>
+    <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  pbe-[env(safe-area-inset-bottom)]'>
+      <ScrollArea.Root>
+        <ScrollArea.Viewport>
+          <div
+            role='none'
+            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 <L0Collection key={item.id} item={item} parent={parent} path={path} />;
+              } else {
+                return <L0Item key={item.id} item={item} parent={parent} path={path} />;
+              }
+            })}
+          </div>
+          <ScrollArea.Scrollbar orientation='vertical'>
+            <ScrollArea.Thumb />
+          </ScrollArea.Scrollbar>
+        </ScrollArea.Viewport>
+      </ScrollArea.Root>
       <div role='none' className='grid grid-cols-1 auto-rows-[--rail-action] pbs-2'>
         {pinnedItems
           .filter((item) => l0ItemType(item) !== 'collection')

package/src/components/L1Panels.tsx

@@ -6,9 +6,10 @@ import React, { useMemo } from 'react';
 
 import { useLayout } from '@dxos/app-framework';
 import { type Node } from '@dxos/app-graph';
-import { toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { IconButton, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { Tree } from '@dxos/react-ui-list';
 import { Tabs } from '@dxos/react-ui-tabs';
+import { hoverableControlItem, hoverableOpenControlItem, mx } from '@dxos/react-ui-theme';
 
 import { useNavTreeContext } from './NavTreeContext';
 import { NavTreeItemColumns } from './NavTreeItemColumns';
@@ -16,9 +17,9 @@ import { useLoadDescendents } from '../hooks';
 import { NAVTREE_PLUGIN } from '../meta';
 import { l0ItemType } from '../util';
 
-type L1PanelProps = { item: Node<any>; path: string[]; currentItemId: string };
+export type L1PanelProps = { item: Node<any>; path: string[]; currentItemId: string; onBack?: () => void };
 
-const L1Panel = ({ item, path, currentItemId }: L1PanelProps) => {
+const L1Panel = ({ item, path, currentItemId, onBack }: L1PanelProps) => {
   const layout = useLayout();
   const navTreeContext = useNavTreeContext();
   const { t } = useTranslation(NAVTREE_PLUGIN);
@@ -27,7 +28,7 @@ const L1Panel = ({ item, path, currentItemId }: L1PanelProps) => {
       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}
@@ -36,6 +37,23 @@ const L1Panel = ({ item, path, currentItemId }: L1PanelProps) => {
       {item.id === currentItemId && (
         <>
           <h2 className='flex items-center border-be border-separator pis-4 app-drag'>
+            {item.properties.disposition === 'pin-end' && (
+              <IconButton
+                label={t('back label')}
+                iconOnly
+                icon='ph--caret-left--regular'
+                size={5}
+                density='fine'
+                variant='ghost'
+                classNames={mx(
+                  'shrink-0 mie-2 !p-0',
+                  'pointer-fine:pli-1',
+                  hoverableControlItem,
+                  hoverableOpenControlItem,
+                )}
+                onClick={onBack}
+              />
+            )}
             <span className='flex-1 truncate cursor-default'>{toLocalizedString(item.properties.label, t)}</span>
             <NavTreeItemColumns path={path} item={item} open />
           </h2>
@@ -77,7 +95,8 @@ export const L1Panels = ({
   topLevelItems,
   path,
   currentItemId,
-}: {
+  onBack,
+}: Pick<L1PanelProps, 'onBack'> & {
   topLevelItems: Node<any>[];
   path: string[];
   currentItemId: string;
@@ -90,7 +109,7 @@ export const L1Panels = ({
           case 'collection':
             return <L1PanelCollection key={item.id} item={item} path={path} currentItemId={currentItemId} />;
           case 'tab':
-            return <L1Panel key={item.id} item={item} path={path} currentItemId={currentItemId} />;
+            return <L1Panel key={item.id} item={item} path={path} currentItemId={currentItemId} onBack={onBack} />;
           default:
             return null;
         }

package/src/components/NavTree.tsx

@@ -16,8 +16,8 @@ import { useLoadDescendents } from '../hooks';
 export const NAV_TREE_ITEM = 'NavTreeItem';
 
 export const NavTree = ({ id, root }: NavTreeProps) => {
-  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');
@@ -35,7 +35,7 @@ export const NavTree = ({ id, root }: NavTreeProps) => {
     // NOTE(thure): 74px (rather than rem) is intentional in order to match the size of macOS windowing controls
     <Tabs.Root value={tab} orientation='vertical' verticalVariant='stateless' classNames='relative'>
       <L0Menu topLevelItems={l0Items} pinnedItems={pinnedItems} path={path} parent={root} />
-      <L1Panels topLevelItems={topLevelItems} path={path} currentItemId={tab} />
+      <L1Panels topLevelItems={topLevelItems} path={path} currentItemId={tab} onBack={onBack} />
     </Tabs.Root>
   );
 };