@dxos/plugin-navtree 0.8.4-main.e8ec1fe → 0.8.4-main.effb148878

package/dist/lib/browser/chunk-7D2MPHXV.mjs

@@ -1,1483 +0,0 @@
-import {
-  NavTreeCapabilities
-} from "./chunk-5VLWX4PK.mjs";
-import {
-  COMMANDS_DIALOG,
-  KEY_BINDING,
-  meta
-} from "./chunk-E6MZBCU5.mjs";
-
-// src/components/CommandsDialog/CommandsDialog.tsx
-import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
-import React, { useMemo, useState } from "react";
-import { LayoutAction, createIntent } from "@dxos/app-framework";
-import { useAppGraph, useIntentDispatcher } from "@dxos/app-framework/react";
-import { isAction, isActionGroup } from "@dxos/app-graph";
-import { Keyboard, keySymbols } from "@dxos/keyboard";
-import { useActions } from "@dxos/plugin-graph";
-import { Button, Dialog, Icon, toLocalizedString, useTranslation } from "@dxos/react-ui";
-import { SearchList } from "@dxos/react-ui-searchlist";
-import { cardDialogContent, cardDialogHeader, cardDialogPaddedOverflow, cardDialogSearchListRoot } from "@dxos/react-ui-stack";
-import { descriptionText, mx } from "@dxos/react-ui-theme";
-import { getHostPlatform } from "@dxos/util";
-var CommandsDialogContent = ({ selected: initial }) => {
-  var _effect = _useSignals();
-  try {
-    const { t } = useTranslation(meta.id);
-    const [selected, setSelected] = useState(initial);
-    const { dispatchPromise: dispatch } = useIntentDispatcher();
-    const { graph } = useAppGraph();
-    const allActions = useMemo(() => {
-      const current = Keyboard.singleton.getCurrentContext();
-      const actionMap = /* @__PURE__ */ new Set();
-      const actions2 = [];
-      graph.traverse({
-        visitor: (node, path) => {
-          if ((isAction(node) || isActionGroup(node)) && !actionMap.has(node.id) && current.startsWith(path.slice(0, -1).join("/"))) {
-            actionMap.add(node.id);
-            actions2.push(node);
-          }
-        }
-      });
-      actions2.sort((a, b) => {
-        return toLocalizedString(a.properties.label, t)?.toLowerCase().localeCompare(toLocalizedString(b.properties.label, t)?.toLowerCase());
-      });
-      return actions2;
-    }, [
-      graph
-    ]);
-    const group = allActions.find(({ id }) => id === selected);
-    const groupActions = useActions(graph, group?.id);
-    const actions = isActionGroup(group) ? groupActions : allActions;
-    return /* @__PURE__ */ React.createElement(Dialog.Content, {
-      classNames: cardDialogContent
-    }, /* @__PURE__ */ React.createElement(Dialog.Title, {
-      classNames: cardDialogHeader
-    }, t("commands dialog title", {
-      ns: meta.id
-    })), /* @__PURE__ */ React.createElement(SearchList.Root, {
-      label: t("command list input placeholder"),
-      classNames: cardDialogSearchListRoot
-    }, /* @__PURE__ */ React.createElement(SearchList.Input, {
-      placeholder: t("command list input placeholder")
-    }), /* @__PURE__ */ React.createElement(SearchList.Content, {
-      classNames: cardDialogPaddedOverflow
-    }, actions?.map((action) => {
-      const label = toLocalizedString(action.properties.label, t);
-      const shortcut = typeof action.properties.keyBinding === "string" ? action.properties.keyBinding : action.properties.keyBinding?.[getHostPlatform()];
-      return /* @__PURE__ */ React.createElement(SearchList.Item, {
-        value: label,
-        key: action.id,
-        onSelect: () => {
-          if (action.properties.disabled) {
-            return;
-          }
-          if (isActionGroup(action)) {
-            setSelected(action.id);
-            return;
-          }
-          void dispatch(createIntent(LayoutAction.UpdateDialog, {
-            part: "dialog",
-            options: {
-              state: false
-            }
-          }));
-          setTimeout(() => {
-            const node = graph.getConnections(group?.id ?? action.id, "inbound")[0];
-            void (node && isAction(action) && action.data({
-              parent: node,
-              caller: KEY_BINDING
-            }));
-          });
-        },
-        classNames: "flex items-center gap-2",
-        disabled: action.properties.disabled,
-        ...action.properties?.testId && {
-          "data-testid": action.properties.testId
-        }
-      }, /* @__PURE__ */ React.createElement(Icon, {
-        icon: action.properties.icon,
-        size: 4
-      }), /* @__PURE__ */ React.createElement("span", {
-        className: "grow truncate"
-      }, label), shortcut && /* @__PURE__ */ React.createElement("span", {
-        className: mx("shrink-0", descriptionText)
-      }, keySymbols(shortcut).join("")));
-    }))), /* @__PURE__ */ React.createElement("div", {
-      role: "none",
-      className: "pli-cardSpacingInline pbe-cardSpacingBlock"
-    }, /* @__PURE__ */ React.createElement(Dialog.Close, {
-      asChild: true
-    }, /* @__PURE__ */ React.createElement(Button, {
-      classNames: "is-full"
-    }, t("close label", {
-      ns: "os"
-    })))));
-  } finally {
-    _effect.f();
-  }
-};
-
-// src/components/CommandsDialog/CommandsTrigger.tsx
-import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
-import React2 from "react";
-import { LayoutAction as LayoutAction2, createIntent as createIntent2 } from "@dxos/app-framework";
-import { useIntentDispatcher as useIntentDispatcher2 } from "@dxos/app-framework/react";
-import { Button as Button2, Icon as Icon2, useTranslation as useTranslation2 } from "@dxos/react-ui";
-var CommandsTrigger = () => {
-  var _effect = _useSignals2();
-  try {
-    const { dispatchPromise: dispatch } = useIntentDispatcher2();
-    const { t } = useTranslation2(meta.id);
-    return /* @__PURE__ */ React2.createElement(Button2, {
-      classNames: "m-1 pli-1 lg:pli-2",
-      onClick: () => dispatch(createIntent2(LayoutAction2.UpdateDialog, {
-        part: "dialog",
-        subject: COMMANDS_DIALOG,
-        options: {
-          blockAlign: "start"
-        }
-      }))
-    }, /* @__PURE__ */ React2.createElement("span", {
-      className: "text-description font-normal grow text-start"
-    }, t("command list input placeholder")), /* @__PURE__ */ React2.createElement(Icon2, {
-      icon: "ph--magnifying-glass--regular",
-      size: 5
-    }));
-  } finally {
-    _effect.f();
-  }
-};
-
-// src/util.ts
-import { isActionLike } from "@dxos/app-graph";
-import { isNonNullable } from "@dxos/util";
-var getParent = (graph, node, path) => {
-  const parentId = path[path.length - 2];
-  return graph.getConnections(node.id, "inbound").find((n) => n.id === parentId);
-};
-var getPersistenceParent = (graph, node, path, persistenceClass) => {
-  if (node.properties.acceptPersistenceClass?.has(persistenceClass)) {
-    return node;
-  } else {
-    const parent = getParent(graph, node, path);
-    return parent ? getPersistenceParent(graph, parent, path.slice(0, path.length - 1), persistenceClass) : null;
-  }
-};
-var resolveMigrationOperation = (graph, activeNode, destinationPath, destinationRelatedNode) => {
-  const activeClass = activeNode.properties.persistenceClass;
-  if (destinationRelatedNode && activeClass) {
-    const persistenceParent = getPersistenceParent(graph, destinationRelatedNode, destinationPath, activeClass);
-    if (persistenceParent) {
-      const activeKey = activeNode.properties.persistenceKey;
-      if (activeKey && persistenceParent?.properties.acceptPersistenceKey) {
-        return persistenceParent.properties.acceptPersistenceKey.has(activeKey) && persistenceParent.properties.onTransferStart ? "transfer" : persistenceParent.properties.onCopy ? "copy" : "reject";
-      } else {
-        return "reject";
-      }
-    } else {
-      return "reject";
-    }
-  } else {
-    return "reject";
-  }
-};
-var sortActions = (actions) => actions.sort((a, b) => {
-  if (a.properties.disposition === b.properties.disposition) {
-    return 0;
-  }
-  if (a.properties.disposition === "list-item-primary") {
-    return -1;
-  }
-  return 1;
-});
-var getChildren = (graph, node, path = []) => {
-  return graph.getConnections(node.id, "outbound").map((n) => {
-    const nextPath = [
-      ...path,
-      node.id
-    ];
-    return nextPath.includes(n.id) ? void 0 : n;
-  }).filter(isNonNullable);
-};
-var l0ItemType = (item) => {
-  if (item.properties.disposition === "collection") {
-    return "collection";
-  } else if (isActionLike(item)) {
-    return "action";
-  } else if (item.properties.disposition === "navigation") {
-    return "link";
-  } else {
-    return "tab";
-  }
-};
-
-// src/components/NavTreeContainer.tsx
-import { useSignals as _useSignals10 } from "@preact-signals/safe-react/tracking";
-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 useCallback3, useEffect as useEffect3, useMemo as useMemo6 } from "react";
-import { LayoutAction as LayoutAction3, createIntent as createIntent3 } from "@dxos/app-framework";
-import { Surface, useAppGraph as useAppGraph2, useCapability, useIntentDispatcher as useIntentDispatcher3, useLayout } from "@dxos/app-framework/react";
-import { ROOT_ID, isAction as isAction3, isActionLike as isActionLike2 } from "@dxos/app-graph";
-import { PLANK_COMPANION_TYPE } from "@dxos/plugin-deck/types";
-import { useConnections, useActions as useGraphActions } from "@dxos/plugin-graph";
-import { useMediaQuery as useMediaQuery2, useSidebars } from "@dxos/react-ui";
-import { isTreeData } from "@dxos/react-ui-list";
-import { mx as mx3 } from "@dxos/react-ui-theme";
-import { arrayMove as arrayMove2, byPosition } from "@dxos/util";
-
-// src/capabilities/index.ts
-import { lazy } from "@dxos/app-framework";
-var AppGraphBuilder = lazy(() => import("./app-graph-builder-OHSCN3GX.mjs"));
-var IntentResolver = lazy(() => import("./intent-resolver-YUVXVPHG.mjs"));
-var Keyboard2 = lazy(() => import("./keyboard-YYTYJW4M.mjs"));
-var ReactSurface = lazy(() => import("./react-surface-J7MWWAGD.mjs"));
-var State = lazy(() => import("./state-EUSVT6BI.mjs"));
-
-// src/components/NavTree/NavTree.tsx
-import { useSignals as _useSignals9 } from "@preact-signals/safe-react/tracking";
-import React9, { useMemo as useMemo5 } from "react";
-import { Tabs as Tabs3 } from "@dxos/react-ui-tabs";
-
-// src/hooks.ts
-import { useEffect as useEffect2 } from "react";
-
-// src/components/NavTreeContext.tsx
-import { createContext, useContext } from "react";
-import { raise } from "@dxos/debug";
-var NavTreeContext = /* @__PURE__ */ createContext(null);
-var useNavTreeContext = () => useContext(NavTreeContext) ?? raise(new Error("Missing NavTreeContext"));
-
-// 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(meta.id);
-  useEffect(() => {
-    document.title = node ? toLocalizedString2(node.properties.label, t) : t("current app name", {
-      ns: "appkit"
-    });
-  }, [
-    node?.properties?.label
-  ]);
-  return null;
-};
-
-// src/hooks.ts
-var useLoadDescendents = (root) => {
-  const { loadDescendents } = useNavTreeContext();
-  useEffect2(() => {
-    const frame = requestAnimationFrame(() => {
-      if (root) {
-        void loadDescendents?.(root);
-      }
-    });
-    return () => cancelAnimationFrame(frame);
-  }, [
-    root
-  ]);
-};
-
-// src/components/Sidebar/L0Menu.tsx
-import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
-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 React4, { forwardRef, useCallback, useLayoutEffect, useMemo as useMemo2, useRef, useState as useState2 } from "react";
-import { invariant } from "@dxos/invariant";
-import { DxAvatar } from "@dxos/lit-ui/react";
-import { Icon as Icon3, ListItem, ScrollArea, Tooltip, toLocalizedString as toLocalizedString3, useMediaQuery, useTranslation as useTranslation4 } from "@dxos/react-ui";
-import { DropdownMenu, MenuProvider } from "@dxos/react-ui-menu";
-import { Tabs } from "@dxos/react-ui-tabs";
-import { mx as mx2 } from "@dxos/react-ui-theme";
-import { arrayMove } from "@dxos/util";
-
-// src/components/UserAccountAvatar/UserAccountAvatar.tsx
-import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
-import React3 from "react";
-import { Avatar } from "@dxos/react-ui";
-import { hexToFallback } from "@dxos/util";
-var UserAccountAvatar = ({ size, userId, hue, emoji, status }) => {
-  var _effect = _useSignals3();
-  try {
-    const fallbackValue = hexToFallback(userId ?? "0");
-    return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(L0ItemActiveTabIndicator, {
-      classNames: "inset-block-6"
-    }), /* @__PURE__ */ React3.createElement("div", {
-      className: "grid place-items-center dx-focus-ring-group-indicator rounded-full",
-      "data-joyride": "welcome/account"
-    }, /* @__PURE__ */ React3.createElement(Avatar.Root, null, /* @__PURE__ */ React3.createElement(Avatar.Content, {
-      variant: "circle",
-      size: size ?? 12,
-      status: status ?? "active",
-      hue: hue || fallbackValue.hue,
-      fallback: emoji || fallbackValue.emoji,
-      "data-testid": "treeView.userAccount"
-    }))));
-  } finally {
-    _effect.f();
-  }
-};
-
-// src/components/Sidebar/L0Menu.tsx
-var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-navtree/src/components/Sidebar/L0Menu.tsx";
-var useL0ItemClick = ({ item, parent, path }, type) => {
-  const { tab, isCurrent, onSelect, onTabChange } = useNavTreeContext();
-  const [isLg] = useMediaQuery("lg");
-  return useCallback((event) => {
-    switch (type) {
-      case "action": {
-        const { data: invoke, properties: { caller } } = item;
-        return invoke?.(caller ? {
-          node: parent,
-          caller
-        } : {
-          node: parent
-        });
-      }
-      case "tab":
-        return onTabChange?.(item);
-      case "link":
-        return onSelect?.({
-          item,
-          path,
-          current: !isCurrent(path, item),
-          option: event.altKey
-        });
-    }
-  }, [
-    item,
-    parent,
-    type,
-    tab,
-    isCurrent,
-    onSelect,
-    onTabChange,
-    isLg
-  ]);
-};
-var l0Breakpoints = {
-  lg: "hidden lg:grid"
-};
-var l0ItemRoot = 'group/l0item flex is-full justify-center items-center relative data[type!="collection"]:cursor-pointer app-no-drag dx-focus-ring-group';
-var l0ItemContent = "flex justify-center items-center dx-focus-ring-group-indicator transition-colors rounded-sm";
-var L0ItemRoot = /* @__PURE__ */ forwardRef(({ item, parent, path, children }, forwardedRef) => {
-  var _effect = _useSignals4();
-  try {
-    const { getProps } = useNavTreeContext();
-    const { id, testId } = getProps?.(item, path) ?? {};
-    const type = l0ItemType(item);
-    const itemPath = useMemo2(() => [
-      ...path,
-      item.id
-    ], [
-      item.id,
-      path
-    ]);
-    const { t } = useTranslation4(meta.id);
-    const localizedString = toLocalizedString3(item.properties.label, t);
-    const handleClick = useL0ItemClick({
-      item,
-      parent,
-      path: itemPath
-    }, type);
-    const rootProps = type === "tab" ? {
-      value: item.id,
-      tabIndex: 0,
-      onClick: handleClick,
-      "data-testid": testId,
-      "data-object-id": id
-    } : type !== "collection" ? {
-      onClick: handleClick,
-      "data-testid": testId,
-      "data-object-id": id
-    } : {
-      onClick: handleClick,
-      role: "button"
-    };
-    return /* @__PURE__ */ React4.createElement(Tooltip.Trigger, {
-      asChild: true,
-      delayDuration: 0,
-      side: "right",
-      content: localizedString
-    }, /* @__PURE__ */ React4.createElement(Tabs.TabPrimitive, {
-      ...rootProps,
-      "data-type": type,
-      className: mx2(l0ItemRoot, l0Breakpoints[item.properties.l0Breakpoint]),
-      ref: forwardedRef
-    }, children));
-  } finally {
-    _effect.f();
-  }
-});
-var L0ItemActiveTabIndicator = ({ classNames }) => {
-  var _effect = _useSignals4();
-  try {
-    return /* @__PURE__ */ React4.createElement("div", {
-      role: "none",
-      className: mx2("hidden group-aria-selected/l0item:block absolute inline-start-0 inset-block-2 is-1 bg-accentSurface rounded-ie", classNames)
-    });
-  } finally {
-    _effect.f();
-  }
-};
-var L0Item = ({ item, parent, path, pinned, onRearrange }) => {
-  var _effect = _useSignals4();
-  try {
-    const { t } = useTranslation4(meta.id);
-    const itemElement = useRef(null);
-    const [closestEdge, setEdge] = useState2(null);
-    const localizedString = toLocalizedString3(item.properties.label, t);
-    const hue = item.properties.hue ?? null;
-    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
-    ]);
-    return /* @__PURE__ */ React4.createElement(L0ItemRoot, {
-      ref: itemElement,
-      item,
-      parent,
-      path
-    }, /* @__PURE__ */ React4.createElement("div", {
-      role: "none",
-      "data-frame": true,
-      ...hue && {
-        style: {
-          background: `var(--dx-${hue}Surface)`
-        }
-      },
-      className: mx2(l0ItemContent, pinned ? "p-2 group-hover/l0item:bg-activeSurface" : "is-[--l0-avatar-size] bs-[--l0-avatar-size] bg-activeSurface")
-    }, /* @__PURE__ */ React4.createElement(ItemAvatar, {
-      item
-    })), /* @__PURE__ */ React4.createElement(L0ItemActiveTabIndicator, null), /* @__PURE__ */ React4.createElement("span", {
-      id: `${item.id}__label`,
-      className: "sr-only"
-    }, localizedString), closestEdge && /* @__PURE__ */ React4.createElement(ListItem.DropIndicator, {
-      edge: closestEdge
-    }));
-  } finally {
-    _effect.f();
-  }
-};
-var ItemAvatar = ({ item }) => {
-  var _effect = _useSignals4();
-  try {
-    const { t } = useTranslation4(meta.id);
-    const type = l0ItemType(item);
-    if (item.properties.icon) {
-      const hue = item.properties.hue ?? null;
-      const hueFgStyle = hue && {
-        style: {
-          color: `var(--dx-${hue}SurfaceText)`
-        }
-      };
-      return /* @__PURE__ */ React4.createElement(Icon3, {
-        icon: item.properties.icon,
-        size: 6,
-        ...hueFgStyle
-      });
-    }
-    if (type === "tab" && item.properties.disposition !== "pin-end") {
-      const hue = item.properties.hue ?? null;
-      const localizedString = toLocalizedString3(item.properties.label, t);
-      return /* @__PURE__ */ React4.createElement(DxAvatar, {
-        hue,
-        hueVariant: "surface",
-        variant: "square",
-        size: 12,
-        fallback: localizedString
-      });
-    }
-    return null;
-  } finally {
-    _effect.f();
-  }
-};
-var L0Collection = ({ item, path }) => {
-  var _effect = _useSignals4();
-  try {
-    const navTreeContext = useNavTreeContext();
-    useLoadDescendents(item);
-    const collectionItems = navTreeContext.useItems(item);
-    const groupPath = useMemo2(() => [
-      ...path,
-      item.id
-    ], [
-      item.id,
-      path
-    ]);
-    const { id, testId } = navTreeContext.getProps?.(item, path) ?? {};
-    const handleRearrange = useCallback((source, target, closestEdge) => {
-      invariant(item.properties.onRearrangeChildren, void 0, {
-        F: __dxlog_file,
-        L: 271,
-        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__ */ React4.createElement("div", {
-      role: "group",
-      className: "contents group/l0c",
-      "aria-labelledby": `${item.id}__label`,
-      "data-object-id": id,
-      "data-testid": testId
-    }, collectionItems.map((collectionItem) => /* @__PURE__ */ React4.createElement(L0Item, {
-      key: collectionItem.id,
-      item: collectionItem,
-      parent: item,
-      path: groupPath,
-      ...item.properties.onRearrangeChildren && {
-        onRearrange: handleRearrange
-      }
-    })));
-  } finally {
-    _effect.f();
-  }
-};
-var L0Menu = ({ menuActions, topLevelItems, pinnedItems, userAccountItem, parent, path }) => {
-  var _effect = _useSignals4();
-  try {
-    const { t } = useTranslation4(meta.id);
-    return /* @__PURE__ */ React4.createElement(Tabs.Tablist, {
-      classNames: [
-        "group/l0 absolute z-[1] inset-block-0 inline-start-0 rounded-is",
-        "grid grid-cols-[var(--l0-size)] grid-rows-[var(--rail-size)_1fr_min-content_var(--l0-size)] contain-layout",
-        "!is-[--l0-size] bg-baseSurface border-ie border-subduedSeparator app-drag pbe-[env(safe-area-inset-bottom)]"
-      ]
-    }, /* @__PURE__ */ React4.createElement(MenuProvider, null, /* @__PURE__ */ React4.createElement(DropdownMenu.Root, {
-      group: parent,
-      items: menuActions
-    }, /* @__PURE__ */ React4.createElement(Tooltip.Trigger, {
-      content: t("app menu label"),
-      side: "right",
-      asChild: true
-    }, /* @__PURE__ */ React4.createElement(Tabs.TabPrimitive, {
-      value: "options",
-      asChild: true,
-      role: "button"
-    }, /* @__PURE__ */ React4.createElement(DropdownMenu.Trigger, {
-      "data-testid": "spacePlugin.addSpace",
-      className: mx2(l0ItemRoot, "grid place-items-center dx-focus-ring-group")
-    }, /* @__PURE__ */ React4.createElement("div", {
-      role: "none",
-      className: mx2(l0ItemContent, "is-[--rail-action] bs-[--rail-action] group-hover/l0item:bg-hoverSurface")
-    }, /* @__PURE__ */ React4.createElement(Icon3, {
-      icon: "ph--list--regular",
-      size: 5
-    }))))))), /* @__PURE__ */ React4.createElement(ScrollArea.Root, null, /* @__PURE__ */ React4.createElement(ScrollArea.Viewport, null, /* @__PURE__ */ React4.createElement("div", {
-      role: "none",
-      className: mx2([
-        "flex flex-col gap-1 pbs-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__ */ React4.createElement(L0Collection, {
-          key: item.id,
-          item,
-          parent,
-          path
-        });
-      } else {
-        return /* @__PURE__ */ React4.createElement(L0Item, {
-          key: item.id,
-          item,
-          parent,
-          path
-        });
-      }
-    })), /* @__PURE__ */ React4.createElement(ScrollArea.Scrollbar, {
-      orientation: "vertical"
-    }, /* @__PURE__ */ React4.createElement(ScrollArea.Thumb, null)))), /* @__PURE__ */ React4.createElement("div", {
-      role: "none",
-      className: "grid grid-cols-1 auto-rows-[--rail-action] pbs-2"
-    }, pinnedItems.filter((item) => l0ItemType(item) !== "collection").map((item) => /* @__PURE__ */ React4.createElement(L0Item, {
-      key: item.id,
-      item,
-      parent,
-      path,
-      pinned: true
-    }))), userAccountItem && /* @__PURE__ */ React4.createElement("div", {
-      role: "none",
-      className: "grid app-no-drag"
-    }, /* @__PURE__ */ React4.createElement(L0ItemRoot, {
-      key: userAccountItem.id,
-      item: userAccountItem,
-      parent,
-      path
-    }, /* @__PURE__ */ React4.createElement(UserAccountAvatar, {
-      userId: userAccountItem.properties.userId,
-      hue: userAccountItem.properties.hue,
-      emoji: userAccountItem.properties.emoji,
-      status: userAccountItem.properties.status,
-      size: 10
-    }))), /* @__PURE__ */ React4.createElement("div", {
-      role: "none",
-      className: 'hidden [body[data-platform="darwin"]_&]:block absolute block-start-0 is-[calc(var(--l0-size)-1px)] bs-[calc(40px+0.25rem)]',
-      style: {
-        background: "linear-gradient(to bottom, var(--dx-sidebarSurface) 0%, var(--dx-sidebarSurface) 70%, transparent 100%)"
-      }
-    }));
-  } finally {
-    _effect.f();
-  }
-};
-
-// src/components/Sidebar/L1Panel.tsx
-import { useSignals as _useSignals7 } from "@preact-signals/safe-react/tracking";
-import React7, { useCallback as useCallback2, useMemo as useMemo3 } from "react";
-import { DensityProvider, 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 } from "@dxos/react-ui-theme";
-
-// src/components/NavTreeItem/NavTreeItemAction.tsx
-import { useSignals as _useSignals5 } from "@preact-signals/safe-react/tracking";
-import React5 from "react";
-import { IconButton, toLocalizedString as toLocalizedString4, useDensityContext, useTranslation as useTranslation5 } from "@dxos/react-ui";
-import { DropdownMenu as DropdownMenu2, MenuProvider as MenuProvider2 } from "@dxos/react-ui-menu";
-import { hoverableControlItem, hoverableOpenControlItem } from "@dxos/react-ui-theme";
-var fallbackIcon = "ph--placeholder--regular";
-var fineActionButtonProps = {
-  size: 4,
-  density: "fine"
-};
-var coarseActionButtonProps = {
-  size: 5,
-  density: "coarse"
-};
-var NavTreeItemActionDropdownMenu = ({ parent, label, icon, testId, menuActions, caller }) => {
-  var _effect = _useSignals5();
-  try {
-    const { t } = useTranslation5(meta.id);
-    const density = useDensityContext();
-    return /* @__PURE__ */ React5.createElement(MenuProvider2, null, /* @__PURE__ */ React5.createElement(DropdownMenu2.Root, {
-      group: parent,
-      items: menuActions,
-      caller
-    }, /* @__PURE__ */ React5.createElement(DropdownMenu2.Trigger, {
-      asChild: true
-    }, /* @__PURE__ */ React5.createElement(IconButton, {
-      ...density === "coarse" ? coarseActionButtonProps : fineActionButtonProps,
-      classNames: [
-        "shrink-0 pli-2 pointer-fine:pli-1",
-        hoverableControlItem,
-        hoverableOpenControlItem
-      ],
-      variant: "ghost",
-      icon: icon ?? fallbackIcon,
-      iconOnly: true,
-      label: toLocalizedString4(label, t),
-      "data-testid": testId
-    }))));
-  } finally {
-    _effect.f();
-  }
-};
-var NavTreeItemMonolithicAction = ({ parent, properties: { disabled, caller, testId, icon, variant = "ghost", iconOnly = true } = {
-  label: "never"
-}, data: invoke, baseLabel }) => {
-  var _effect = _useSignals5();
-  try {
-    const density = useDensityContext();
-    return /* @__PURE__ */ React5.createElement(IconButton, {
-      ...density === "coarse" ? coarseActionButtonProps : fineActionButtonProps,
-      variant,
-      classNames: [
-        "shrink-0",
-        hoverableControlItem,
-        hoverableOpenControlItem,
-        iconOnly ? "pli-2 pointer-fine:pli-1" : "p-2 pointer-fine:p-2 mie-1"
-      ],
-      icon: icon ?? fallbackIcon,
-      iconOnly,
-      label: baseLabel,
-      disabled,
-      onClick: (event) => {
-        event.stopPropagation();
-        if (disabled) {
-          return;
-        }
-        void invoke?.(caller ? {
-          parent,
-          caller
-        } : {
-          parent
-        });
-      },
-      "data-testid": testId
-    });
-  } finally {
-    _effect.f();
-  }
-};
-var NavTreeItemAction = ({ monolithic, menuActions, parent: node, ...props }) => {
-  var _effect = _useSignals5();
-  try {
-    const { t } = useTranslation5(meta.id);
-    const monolithicAction = menuActions?.length === 1 && menuActions[0];
-    const baseLabel = toLocalizedString4(monolithicAction ? monolithicAction.properties.label : props.label, t);
-    return monolithic && menuActions?.length === 1 ? /* @__PURE__ */ React5.createElement(NavTreeItemMonolithicAction, {
-      baseLabel,
-      parent: node,
-      ...menuActions[0]
-    }) : /* @__PURE__ */ React5.createElement(NavTreeItemActionDropdownMenu, {
-      ...props,
-      label: baseLabel,
-      parent: node,
-      menuActions
-    });
-  } finally {
-    _effect.f();
-  }
-};
-
-// src/components/NavTreeItem/NavTreeItemColumns.tsx
-import { useSignals as _useSignals6 } from "@preact-signals/safe-react/tracking";
-import React6, { Fragment, memo } from "react";
-import { isAction as isAction2 } from "@dxos/app-graph";
-import { Popover, Treegrid, toLocalizedString as toLocalizedString5, useTranslation as useTranslation6 } from "@dxos/react-ui";
-var NavTreeItemColumns = /* @__PURE__ */ memo(({ path, item, open }) => {
-  var _effect = _useSignals6();
-  try {
-    const { t } = useTranslation6(meta.id);
-    const { useActions: useActions3, renderItemEnd: ItemEnd, popoverAnchorId } = useNavTreeContext();
-    const level = path.length - 2;
-    const { actions: _actions, groupedActions } = useActions3(item);
-    const [primaryAction, ...secondaryActions] = _actions.toSorted((a, _b) => a.properties?.disposition === "list-item-primary" ? -1 : 1);
-    const actions = (primaryAction?.properties?.disposition === "list-item-primary" ? secondaryActions : _actions).flatMap((action) => isAction2(action) ? [
-      action
-    ] : []).filter((a) => [
-      "list-item",
-      "list-item-primary"
-    ].includes(a.properties?.disposition));
-    useLoadDescendents(item);
-    useLoadDescendents(primaryAction && !isAction2(primaryAction) ? primaryAction : void 0);
-    const ActionRoot = popoverAnchorId === `dxos.org/ui/${NAV_TREE_ITEM}/${item.id}` ? Popover.Anchor : Fragment;
-    return /* @__PURE__ */ React6.createElement("div", {
-      role: "none",
-      className: "contents app-no-drag"
-    }, primaryAction?.properties?.disposition === "list-item-primary" && !primaryAction?.properties?.disabled ? /* @__PURE__ */ React6.createElement(Treegrid.Cell, {
-      classNames: "contents"
-    }, /* @__PURE__ */ React6.createElement(NavTreeItemAction, {
-      testId: primaryAction.properties?.testId,
-      label: toLocalizedString5(primaryAction.properties?.label, t),
-      icon: primaryAction.properties?.icon ?? "ph--placeholder--regular",
-      parent: item,
-      monolithic: isAction2(primaryAction),
-      menuActions: isAction2(primaryAction) ? [
-        primaryAction
-      ] : groupedActions[primaryAction.id],
-      menuType: primaryAction.properties?.menuType,
-      caller: NAV_TREE_ITEM
-    })) : /* @__PURE__ */ React6.createElement(Treegrid.Cell, {
-      role: "none"
-    }), /* @__PURE__ */ React6.createElement(ActionRoot, null, actions.length > 0 ? /* @__PURE__ */ React6.createElement(Treegrid.Cell, {
-      classNames: "contents"
-    }, /* @__PURE__ */ React6.createElement(NavTreeItemAction, {
-      testId: `navtree.treeItem.actionsLevel${level}`,
-      label: t("tree item actions label"),
-      icon: "ph--dots-three-vertical--regular",
-      parent: item,
-      menuActions: actions,
-      menuType: "dropdown",
-      caller: NAV_TREE_ITEM
-    })) : /* @__PURE__ */ React6.createElement(Treegrid.Cell, {
-      role: "none"
-    })), ItemEnd && /* @__PURE__ */ React6.createElement(Treegrid.Cell, {
-      classNames: "contents"
-    }, /* @__PURE__ */ React6.createElement(ItemEnd, {
-      node: item,
-      open
-    })));
-  } finally {
-    _effect.f();
-  }
-});
-
-// src/components/Sidebar/L1Panel.tsx
-var L1Panel = ({ open, path, item, currentItemId, onBack }) => {
-  var _effect = _useSignals7();
-  try {
-    const { t } = useTranslation7(meta.id);
-    const { isAlternateTree, ...navTreeContext } = useNavTreeContext();
-    const title = toLocalizedString6(item.properties.label, t);
-    const { useItems: useItems2 } = navTreeContext;
-    const alternateTree = useItems2(item, {
-      disposition: "alternate-tree"
-    })[0];
-    const alternatePath = useMemo3(() => [
-      ...path,
-      item.id
-    ], [
-      item.id,
-      path
-    ]);
-    const isAlternate = isAlternateTree?.(alternatePath, item) ?? false;
-    const useAlternateItems = useCallback2((node, { disposition } = {}) => {
-      return useItems2(node, {
-        disposition,
-        sort: node?.id === alternateTree.id
-      });
-    }, [
-      alternateTree,
-      useItems2
-    ]);
-    return /* @__PURE__ */ React7.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]",
-        "pbs-[env(safe-area-inset-top)]",
-        item.id === currentItemId && "grid"
-      ],
-      tabIndex: -1,
-      "aria-label": title,
-      ...!open && {
-        inert: true
-      }
-    }, item.id === currentItemId && /* @__PURE__ */ React7.createElement(DensityProvider, {
-      density: "fine"
-    }, /* @__PURE__ */ React7.createElement(L1PanelHeader, {
-      path,
-      item,
-      currentItemId,
-      onBack
-    }), /* @__PURE__ */ React7.createElement("div", {
-      role: "none",
-      className: "overflow-y-auto"
-    }, isAlternate ? /* @__PURE__ */ React7.createElement(Tree, {
-      ...navTreeContext,
-      id: alternateTree.id,
-      root: alternateTree,
-      path: alternatePath,
-      levelOffset: 5,
-      gridTemplateColumns: "[tree-row-start] 1fr min-content min-content min-content [tree-row-end]",
-      renderColumns: NavTreeItemColumns,
-      useItems: useAlternateItems
-    }) : /* @__PURE__ */ React7.createElement(Tree, {
-      ...navTreeContext,
-      id: item.id,
-      root: item,
-      path,
-      levelOffset: 5,
-      gridTemplateColumns: "[tree-row-start] 1fr min-content min-content min-content [tree-row-end]",
-      renderColumns: NavTreeItemColumns,
-      draggable: true
-    }))));
-  } finally {
-    _effect.f();
-  }
-};
-var L1PanelHeader = ({ item, path, onBack }) => {
-  var _effect = _useSignals7();
-  try {
-    const { t } = useTranslation7(meta.id);
-    const { isAlternateTree, setAlternateTree, ...navTreeContext } = useNavTreeContext();
-    const title = toLocalizedString6(item.properties.label, t);
-    const alternateTree = navTreeContext.useItems(item, {
-      disposition: "alternate-tree"
-    })[0];
-    const alternatePath = useMemo3(() => [
-      ...path,
-      item.id
-    ], [
-      item.id,
-      path
-    ]);
-    const isAlternate = isAlternateTree?.(alternatePath, item) ?? false;
-    const backCapable = item.id.startsWith("!") || isAlternate;
-    const handleOpen = useCallback2(() => {
-      setAlternateTree?.(alternatePath, true);
-    }, [
-      alternatePath,
-      setAlternateTree
-    ]);
-    const handleBack = useCallback2(() => {
-      if (isAlternate) {
-        setAlternateTree?.(alternatePath, false);
-      } else {
-        onBack?.();
-      }
-    }, [
-      isAlternate,
-      alternatePath,
-      setAlternateTree,
-      onBack
-    ]);
-    return /* @__PURE__ */ React7.createElement("div", {
-      className: "flex is-full items-center border-be border-subduedSeparator app-drag density-coarse"
-    }, /* @__PURE__ */ React7.createElement("div", {
-      className: "is-6"
-    }), /* @__PURE__ */ React7.createElement("h2", {
-      className: "flex-1 truncate min-is-0"
-    }, title), backCapable && /* @__PURE__ */ React7.createElement(IconButton2, {
-      variant: "ghost",
-      icon: "ph--arrow-u-down-left--regular",
-      iconOnly: true,
-      label: t("button back"),
-      classNames: [
-        hoverableControlItem2,
-        hoverableOpenControlItem2,
-        "pointer-fine:pli-1"
-      ],
-      onClick: handleBack
-    }) || alternateTree && !isAlternate && /* @__PURE__ */ React7.createElement(IconButton2, {
-      "data-testid": "treeView.alternateTreeButton",
-      variant: "ghost",
-      icon: alternateTree.properties.icon ?? "ph--placeholder--regular",
-      iconOnly: true,
-      label: toLocalizedString6(alternateTree.properties.label ?? alternateTree.id, t),
-      classNames: [
-        hoverableControlItem2,
-        hoverableOpenControlItem2,
-        "pointer-fine:pli-1"
-      ],
-      onClick: handleOpen
-    }), /* @__PURE__ */ React7.createElement(NavTreeItemColumns, {
-      open: true,
-      path,
-      item,
-      density: "coarse"
-    }));
-  } finally {
-    _effect.f();
-  }
-};
-
-// src/components/Sidebar/L1Tabs.tsx
-import { useSignals as _useSignals8 } from "@preact-signals/safe-react/tracking";
-import React8, { useMemo as useMemo4 } from "react";
-var L1Tabs = ({ topLevelItems, onBack, ...props }) => {
-  var _effect = _useSignals8();
-  try {
-    return /* @__PURE__ */ React8.createElement(React8.Fragment, null, topLevelItems.map((item) => {
-      const type = l0ItemType(item);
-      switch (type) {
-        case "tab":
-          return /* @__PURE__ */ React8.createElement(L1Panel, {
-            key: item.id,
-            item,
-            ...props,
-            onBack
-          });
-        case "collection":
-          return /* @__PURE__ */ React8.createElement(L1PanelCollection, {
-            key: item.id,
-            item,
-            ...props
-          });
-        default:
-          return null;
-      }
-    }));
-  } finally {
-    _effect.f();
-  }
-};
-var L1PanelCollection = ({ item, path, ...props }) => {
-  var _effect = _useSignals8();
-  try {
-    const { useItems: useItems2 } = useNavTreeContext();
-    useLoadDescendents(item);
-    const collectionItems = useItems2(item);
-    const groupPath = useMemo4(() => [
-      ...path,
-      item.id
-    ], [
-      item.id,
-      path
-    ]);
-    return /* @__PURE__ */ React8.createElement(React8.Fragment, null, collectionItems.filter((item2) => l0ItemType(item2) === "tab").map((item2) => /* @__PURE__ */ React8.createElement(L1Panel, {
-      key: item2.id,
-      item: item2,
-      path: groupPath,
-      ...props
-    })));
-  } finally {
-    _effect.f();
-  }
-};
-
-// src/components/NavTree/NavTree.tsx
-var NAV_TREE_ITEM = "NavTreeItem";
-var NavTree = ({ id, root, ...props }) => {
-  var _effect = _useSignals9();
-  try {
-    const { tab, useItems: useItems2, onBack } = useNavTreeContext();
-    const topLevelActions = useItems2(root, {
-      disposition: "menu",
-      sort: true
-    });
-    const topLevelCollections = useItems2(root, {
-      disposition: "collection"
-    });
-    const topLevelWorkspaces = useItems2(root, {
-      disposition: "workspace"
-    });
-    const topLevelNavigation = useItems2(root, {
-      disposition: "navigation"
-    });
-    const l0Items = useMemo5(() => [
-      // prettier-ignore
-      ...topLevelCollections,
-      ...topLevelWorkspaces,
-      ...topLevelNavigation
-    ], [
-      topLevelCollections,
-      topLevelWorkspaces,
-      topLevelNavigation
-    ]);
-    const pinnedItems = useItems2(root, {
-      disposition: "pin-end",
-      sort: true
-    });
-    const userAccountItem = useItems2(root, {
-      disposition: "user-account"
-    })[0];
-    const topLevelItems = useMemo5(() => [
-      // prettier-ignore
-      ...l0Items,
-      ...pinnedItems,
-      ...userAccountItem ? [
-        userAccountItem
-      ] : []
-    ], [
-      l0Items,
-      pinnedItems,
-      userAccountItem
-    ]);
-    useLoadDescendents(root);
-    const path = useMemo5(() => [
-      id
-    ], [
-      id
-    ]);
-    return (
-      // TODO(thure): `Tabs.Root` forces all items that should be able to receive focus to use `Tabs.Tab(Primitive)` since
-      //  it uses RovingFocus and doesn’t support moving focus to an item that is not a tab. Assess whether this situation
-      //  should change including whether it should motivate a change in the design/taxonomy, or if this means this should
-      //  not use `react-ui-tabs` at all.
-      /* @__PURE__ */ React9.createElement(Tabs3.Root, {
-        value: tab,
-        orientation: "vertical",
-        verticalVariant: "stateless",
-        classNames: "relative"
-      }, /* @__PURE__ */ React9.createElement(L0Menu, {
-        menuActions: topLevelActions,
-        topLevelItems: l0Items,
-        pinnedItems,
-        userAccountItem,
-        path,
-        parent: root
-      }), /* @__PURE__ */ React9.createElement(L1Tabs, {
-        topLevelItems,
-        path,
-        currentItemId: tab,
-        onBack,
-        ...props
-      }))
-    );
-  } finally {
-    _effect.f();
-  }
-};
-
-// src/components/NavTreeContainer.tsx
-var NODE_TYPE = "dxos/app-graph/node";
-var renderItemEnd = ({ node, open }) => /* @__PURE__ */ React10.createElement(Surface, {
-  role: "navtree-item-end",
-  data: {
-    id: node.id,
-    subject: node.data,
-    open
-  },
-  limit: 1
-});
-var getChildrenFilter = (node) => untracked(() => !isActionLike2(node) && node.type !== PLANK_COMPANION_TYPE && node.properties.disposition !== "hidden");
-var filterItems = (node, disposition) => {
-  if (!disposition && (node.properties.disposition === "hidden" || node.properties.disposition === "alternate-tree")) {
-    return false;
-  } else if (!disposition) {
-    const action = isAction3(node);
-    return !action || node.properties.disposition === "item";
-  } else {
-    return node.properties.disposition === disposition;
-  }
-};
-var getItems = (graph, node, disposition) => {
-  return graph.getConnections(node?.id ?? ROOT_ID, "outbound").filter((node2) => filterItems(node2, disposition));
-};
-var useItems = (node, options) => {
-  const { graph } = useAppGraph2();
-  const connections = useConnections(graph, node?.id ?? ROOT_ID);
-  const filtered = connections.filter((node2) => filterItems(node2, options?.disposition));
-  return options?.sort ? filtered.toSorted((a, b) => byPosition(a.properties, b.properties)) : filtered;
-};
-var useActions2 = (node) => {
-  const { graph } = useAppGraph2();
-  const actions = useGraphActions(graph, node.id);
-  return useMemo6(() => actions.reduce((acc, arg) => {
-    if (arg.properties.disposition === "item") {
-      return acc;
-    }
-    acc.actions.push(arg);
-    if (!isAction3(arg)) {
-      const actionGroup = graph.getActions(arg.id);
-      acc.groupedActions[arg.id] = actionGroup;
-    }
-    return acc;
-  }, {
-    actions: [],
-    groupedActions: {}
-  }), [
-    actions
-  ]);
-};
-var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar }) => {
-  var _effect = _useSignals10();
-  try {
-    const [isLg] = useMediaQuery2("lg");
-    const { dispatchPromise: dispatch } = useIntentDispatcher3();
-    const { graph } = useAppGraph2();
-    const { isOpen, isCurrent, isAlternateTree, setItem } = useCapability(NavTreeCapabilities.State);
-    const layout = useLayout();
-    const { navigationSidebarState } = useSidebars(meta.id);
-    const getProps = useCallback3((node, path) => {
-      const children = getChildren(graph, node, path).filter(getChildrenFilter);
-      const parentOf = children.length > 0 ? children.map(({ id }) => id) : node.properties.role === "branch" ? [] : void 0;
-      return {
-        id: node.id,
-        parentOf,
-        disabled: node.properties.disabled,
-        label: node.properties.label ?? node.id,
-        className: mx3(node.properties.className, node.properties.modified && "italic"),
-        headingClassName: node.properties.headingClassName,
-        icon: node.properties.icon,
-        iconHue: node.properties.iconHue,
-        testId: node.properties.testId
-      };
-    }, [
-      graph
-    ]);
-    const loadDescendents = useCallback3((node) => {
-      graph.expand(node.id, "outbound");
-      graph.getConnections(node.id, "outbound").forEach((child) => {
-        graph.expand(child.id, "outbound");
-      });
-    }, [
-      graph
-    ]);
-    const handleOpenChange = useCallback3(({ item: { id }, path, open }) => {
-      setItem(path, "open", open);
-      graph.expand(id, "outbound");
-    }, [
-      graph
-    ]);
-    const handleTabChange = useCallback3(async (node) => {
-      await dispatch(createIntent3(LayoutAction3.UpdateSidebar, {
-        part: "sidebar",
-        options: {
-          state: node.id === tab ? navigationSidebarState === "expanded" ? isLg ? "collapsed" : "closed" : "expanded" : "expanded"
-        }
-      }));
-      await dispatch(createIntent3(LayoutAction3.SwitchWorkspace, {
-        part: "workspace",
-        subject: node.id
-      }));
-      if (layout.active.length === 0) {
-        const [item] = getItems(graph, node).filter((node2) => !isActionLike2(node2));
-        if (item && item.data) {
-          await dispatch(createIntent3(LayoutAction3.Open, {
-            part: "main",
-            subject: [
-              item.id
-            ]
-          }));
-        }
-      }
-    }, [
-      dispatch,
-      layout.active,
-      tab,
-      navigationSidebarState,
-      isLg
-    ]);
-    const canDrop = useCallback3(({ source, target }) => {
-      return target.item.properties.canDrop?.(source) ?? false;
-    }, []);
-    const canSelect = useCallback3(({ item }) => {
-      return item.properties.selectable ?? true;
-    }, []);
-    const handleSelect = useCallback3(({ item: node, path, option }) => {
-      if (!node.data) {
-        return;
-      }
-      if (isAction3(node)) {
-        const [parent] = graph.getConnections(node.id, "inbound");
-        void (parent && node.data({
-          parent,
-          caller: NAV_TREE_ITEM
-        }));
-        return;
-      }
-      const current = isCurrent(path, node);
-      if (!current) {
-        void dispatch(createIntent3(LayoutAction3.Open, {
-          part: "main",
-          subject: [
-            node.id
-          ],
-          options: {
-            key: node.properties.key
-          }
-        }));
-      } else if (option) {
-        void dispatch(createIntent3(LayoutAction3.Close, {
-          part: "main",
-          subject: [
-            node.id
-          ],
-          options: {
-            state: false
-          }
-        }));
-      } else {
-        void dispatch(createIntent3(LayoutAction3.ScrollIntoView, {
-          part: "current",
-          subject: node.id
-        }));
-      }
-      const defaultAction = graph.getActions(node.id).find((action) => action.properties?.disposition === "default");
-      if (isAction3(defaultAction)) {
-        void defaultAction.data();
-      }
-      if (!isLg) {
-        void dispatch(createIntent3(LayoutAction3.UpdateSidebar, {
-          part: "sidebar",
-          options: {
-            state: "closed"
-          }
-        }));
-      }
-    }, [
-      graph,
-      dispatch,
-      isCurrent,
-      isLg
-    ]);
-    const handleBack = useCallback3(() => dispatch(createIntent3(LayoutAction3.RevertWorkspace, {
-      part: "workspace",
-      options: {
-        revert: true
-      }
-    })), [
-      dispatch
-    ]);
-    useEffect3(() => {
-      return monitorForElements({
-        canMonitor: ({ source }) => isTreeData(source.data),
-        onDrop: ({ location, source }) => {
-          if (!location.current.dropTargets.length) {
-            return;
-          }
-          const target = location.current.dropTargets[0];
-          const instruction = extractInstruction(target.data);
-          if (instruction !== null && instruction.type !== "instruction-blocked") {
-            const sourceNode = source.data.item;
-            const targetNode = target.data.item;
-            const sourcePath = source.data.path;
-            const targetPath = target.data.path;
-            const operation = sourcePath.slice(0, -1).join() === targetPath.slice(0, -1).join() && instruction.type !== "make-child" ? "rearrange" : resolveMigrationOperation(graph, sourceNode, targetPath, targetNode);
-            const sourceParent = getParent(graph, sourceNode, sourcePath);
-            const targetParent = getParent(graph, targetNode, targetPath);
-            const sourceItems = getItems(graph, sourceParent);
-            const targetItems = getItems(graph, targetParent);
-            const sourceIndex = sourceItems.findIndex(({ id }) => id === sourceNode.id);
-            const targetIndex = targetItems.findIndex(({ id }) => id === targetNode.id);
-            const migrationIndex = instruction.type === "make-child" ? void 0 : instruction.type === "reorder-below" ? targetIndex + 1 : targetIndex;
-            switch (operation) {
-              case "rearrange": {
-                const nextItems = sourceItems.map(({ data }) => data);
-                arrayMove2(nextItems, sourceIndex, targetIndex);
-                void sourceParent?.properties.onRearrangeChildren?.(nextItems);
-                break;
-              }
-              case "copy": {
-                const target2 = instruction.type === "make-child" ? targetNode : targetParent;
-                void target2?.properties.onCopy?.(sourceNode, migrationIndex);
-                break;
-              }
-              case "transfer": {
-                const target2 = instruction.type === "make-child" ? targetNode : targetParent;
-                if (!target2?.properties.onTransferStart || !sourceParent?.properties.onTransferEnd) {
-                  break;
-                }
-                void target2?.properties.onTransferStart(sourceNode, migrationIndex);
-                void sourceParent?.properties.onTransferEnd?.(sourceNode, target2);
-                break;
-              }
-            }
-          }
-        }
-      });
-    }, [
-      graph
-    ]);
-    const setAlternateTree = useCallback3((path, open) => {
-      setItem(path, "alternateTree", open);
-    }, [
-      setItem
-    ]);
-    const navTreeContextValue = useMemo6(() => ({
-      useItems,
-      tab,
-      useActions: useActions2,
-      loadDescendents,
-      renderItemEnd,
-      popoverAnchorId,
-      topbar,
-      getProps,
-      isCurrent,
-      isOpen,
-      canDrop,
-      canSelect,
-      isAlternateTree,
-      setAlternateTree,
-      onTabChange: handleTabChange,
-      onOpenChange: handleOpenChange,
-      onSelect: handleSelect,
-      onBack: handleBack
-    }), [
-      tab,
-      useActions2,
-      loadDescendents,
-      renderItemEnd,
-      popoverAnchorId,
-      topbar,
-      getProps,
-      isCurrent,
-      isOpen,
-      canDrop,
-      canSelect,
-      isAlternateTree,
-      setAlternateTree,
-      handleTabChange,
-      handleOpenChange,
-      handleSelect,
-      handleBack
-    ]);
-    return /* @__PURE__ */ React10.createElement(NavTreeContext.Provider, {
-      value: navTreeContextValue
-    }, /* @__PURE__ */ React10.createElement(NavTree, {
-      id: ROOT_ID,
-      root: graph.root,
-      open: layout.sidebarOpen
-    }));
-  } finally {
-    _effect.f();
-  }
-});
-
-export {
-  CommandsDialogContent,
-  CommandsTrigger,
-  getParent,
-  getPersistenceParent,
-  resolveMigrationOperation,
-  sortActions,
-  getChildren,
-  l0ItemType,
-  NODE_TYPE,
-  NavTreeContainer,
-  NavTreeDocumentTitle,
-  AppGraphBuilder,
-  IntentResolver,
-  Keyboard2 as Keyboard,
-  ReactSurface,
-  State
-};
-//# sourceMappingURL=chunk-7D2MPHXV.mjs.map