@dxos/plugin-navtree 0.7.4 → 0.7.5-feature-compute.4d9d99a

package/dist/lib/browser/chunk-IMGT2LAL.mjs

@@ -0,0 +1,658 @@
+import {
+  COMMANDS_DIALOG,
+  KEY_BINDING,
+  NAVTREE_PLUGIN
+} from "./chunk-KOXMEAOS.mjs";
+
+// packages/plugins/plugin-navtree/src/components/CommandsDialog.tsx
+import React, { useMemo, useState } from "react";
+import { useIntentDispatcher, LayoutAction, createIntent } from "@dxos/app-framework";
+import { isActionGroup, isAction } from "@dxos/app-graph";
+import { Keyboard, keySymbols } from "@dxos/keyboard";
+import { useGraph } from "@dxos/plugin-graph";
+import { Button, Dialog, Icon, useTranslation, toLocalizedString } from "@dxos/react-ui";
+import { SearchList } from "@dxos/react-ui-searchlist";
+import { descriptionText, mx } from "@dxos/react-ui-theme";
+import { getHostPlatform } from "@dxos/util";
+var CommandsDialogContent = ({ selected: initial }) => {
+  const { t } = useTranslation(NAVTREE_PLUGIN);
+  const [selected, setSelected] = useState(initial);
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const { graph } = useGraph();
+  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 actions = isActionGroup(group) ? graph.actions(group) : allActions;
+  return /* @__PURE__ */ React.createElement(Dialog.Content, {
+    classNames: [
+      "md:max-is-[30rem] overflow-hidden mbs-12"
+    ]
+  }, /* @__PURE__ */ React.createElement(Dialog.Title, null, t("commands dialog title", {
+    ns: NAVTREE_PLUGIN
+  })), /* @__PURE__ */ React.createElement(SearchList.Root, {
+    label: t("command list input placeholder"),
+    classNames: "flex flex-col grow overflow-hidden my-2"
+  }, /* @__PURE__ */ React.createElement(SearchList.Input, {
+    placeholder: t("command list input placeholder"),
+    classNames: "px-1 my-2"
+  }), /* @__PURE__ */ React.createElement(SearchList.Content, {
+    classNames: "max-bs-[24rem] overflow-auto"
+  }, 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.SetLayout, {
+          element: "dialog",
+          state: false
+        }));
+        setTimeout(() => {
+          const node = graph.nodes(group ?? action, {
+            relation: "inbound"
+          })[0];
+          void (node && isAction(action) && action.data({
+            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(Dialog.Close, {
+    asChild: true
+  }, /* @__PURE__ */ React.createElement(Button, {
+    variant: "primary",
+    classNames: "mbs-2"
+  }, t("close label", {
+    ns: "os"
+  }))));
+};
+
+// packages/plugins/plugin-navtree/src/components/CommandsTrigger.tsx
+import { MagnifyingGlass } from "@phosphor-icons/react";
+import React2 from "react";
+import { createIntent as createIntent2, LayoutAction as LayoutAction2, useIntentDispatcher as useIntentDispatcher2 } from "@dxos/app-framework";
+import { Button as Button2, useTranslation as useTranslation2 } from "@dxos/react-ui";
+import { getSize } from "@dxos/react-ui-theme";
+var CommandsTrigger = () => {
+  const { dispatchPromise: dispatch } = useIntentDispatcher2();
+  const { t } = useTranslation2(NAVTREE_PLUGIN);
+  return /* @__PURE__ */ React2.createElement(Button2, {
+    classNames: "m-1 !pli-1 lg:!pli-2",
+    onClick: () => dispatch(createIntent2(LayoutAction2.SetLayout, {
+      element: "dialog",
+      component: COMMANDS_DIALOG,
+      dialogBlockAlign: "start"
+    }))
+  }, /* @__PURE__ */ React2.createElement("span", {
+    className: "text-description font-normal grow text-start"
+  }, t("command list input placeholder")), /* @__PURE__ */ React2.createElement(MagnifyingGlass, {
+    className: getSize(5)
+  }));
+};
+
+// packages/plugins/plugin-navtree/src/util.ts
+import { ACTION_TYPE, ACTION_GROUP_TYPE, isAction as isAction2 } from "@dxos/app-graph";
+import { nonNullable } from "@dxos/util";
+var getParent = (graph, node, path) => {
+  const parentId = path[path.length - 2];
+  return graph.nodes(node, {
+    relation: "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 === "toolbar") {
+    return -1;
+  }
+  return 1;
+});
+var getChildren = (graph, node, filter, path = []) => {
+  return graph.nodes(node, {
+    relation: "outbound",
+    filter
+  }).map((n) => {
+    const nextPath = [
+      ...path,
+      node.id
+    ];
+    return nextPath.includes(n.id) ? void 0 : n;
+  }).filter(nonNullable);
+};
+var getActions = (graph, node) => {
+  return graph.actions(node).reduce((acc, arg) => {
+    if (arg.properties.disposition === "item") {
+      return acc;
+    }
+    acc.actions.push(arg);
+    if (!isAction2(arg)) {
+      const actionGroup = graph.actions(arg);
+      acc.groupedActions[arg.id] = actionGroup;
+    }
+    return acc;
+  }, {
+    actions: [],
+    groupedActions: {}
+  });
+};
+var expandChildrenAndActions = (graph, node) => {
+  return Promise.all([
+    expandChildren(graph, node),
+    expandActions(graph, node)
+  ]);
+};
+var expandChildren = (graph, node) => {
+  return graph.expand(node, "outbound");
+};
+var expandActions = (graph, node) => {
+  return Promise.all([
+    graph.expand(node, "outbound", ACTION_TYPE),
+    graph.expand(node, "outbound", ACTION_GROUP_TYPE)
+  ]);
+};
+
+// packages/plugins/plugin-navtree/src/components/NavTreeContainer.tsx
+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 React5, { memo, useCallback as useCallback2, useEffect as useEffect2 } from "react";
+import { createIntent as createIntent3, LayoutAction as LayoutAction3, NavigationAction, useIntentDispatcher as useIntentDispatcher3, Surface } from "@dxos/app-framework";
+import { isAction as isAction4, isActionLike } from "@dxos/app-graph";
+import { useGraph as useGraph2 } from "@dxos/plugin-graph";
+import { isEchoObject, isSpace } from "@dxos/react-client/echo";
+import { useMediaQuery, useSidebars } from "@dxos/react-ui";
+import { isTreeData } from "@dxos/react-ui-list";
+import { mx as mx3 } from "@dxos/react-ui-theme";
+import { arrayMove } from "@dxos/util";
+
+// packages/plugins/plugin-navtree/src/components/NavTree.tsx
+import React4, { Fragment, useCallback, useEffect } from "react";
+import { isAction as isAction3 } from "@dxos/app-graph";
+import { Popover, toLocalizedString as toLocalizedString3, Treegrid, useTranslation as useTranslation4 } from "@dxos/react-ui";
+import { Tree } from "@dxos/react-ui-list";
+
+// packages/plugins/plugin-navtree/src/components/NavTreeItemAction.tsx
+import React3, { useRef } from "react";
+import { useTranslation as useTranslation3, toLocalizedString as toLocalizedString2, IconButton } from "@dxos/react-ui";
+import { DropdownMenu, MenuProvider } from "@dxos/react-ui-menu";
+import { hoverableControlItem, hoverableOpenControlItem, mx as mx2 } from "@dxos/react-ui-theme";
+var fallbackIcon = "ph--placeholder--regular";
+var actionButtonProps = {
+  iconOnly: true,
+  size: 4,
+  variant: "ghost",
+  density: "fine",
+  classNames: mx2("shrink-0 !pli-2 pointer-fine:!pli-1", hoverableControlItem, hoverableOpenControlItem)
+};
+var NavTreeItemActionDropdownMenu = ({ label, icon, testId, menuActions, onAction }) => {
+  const { t } = useTranslation3(NAVTREE_PLUGIN);
+  const suppressNextTooltip = useRef(false);
+  return /* @__PURE__ */ React3.createElement(MenuProvider, {
+    onAction
+  }, /* @__PURE__ */ React3.createElement(DropdownMenu.Root, {
+    items: menuActions,
+    suppressNextTooltip
+  }, /* @__PURE__ */ React3.createElement(DropdownMenu.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React3.createElement(IconButton, {
+    ...actionButtonProps,
+    icon: icon ?? fallbackIcon,
+    label: toLocalizedString2(label, t),
+    "data-testid": testId,
+    suppressNextTooltip
+  }))));
+};
+var NavTreeItemMonolithicAction = ({ parent, properties: { disabled, caller, testId, icon } = {
+  label: "never"
+}, data: invoke, baseLabel }) => {
+  return /* @__PURE__ */ React3.createElement(IconButton, {
+    ...actionButtonProps,
+    icon: icon ?? fallbackIcon,
+    label: baseLabel,
+    disabled,
+    onClick: (event) => {
+      if (disabled) {
+        return;
+      }
+      event.stopPropagation();
+      void invoke?.(caller ? {
+        node: parent,
+        caller
+      } : {
+        node: parent
+      });
+    },
+    "data-testid": testId
+  });
+};
+var NavTreeItemAction = ({ monolithic, menuActions, parent: node, ...props }) => {
+  const { t } = useTranslation3(NAVTREE_PLUGIN);
+  const monolithicAction = menuActions?.length === 1 && menuActions[0];
+  const baseLabel = toLocalizedString2(monolithicAction ? monolithicAction.properties.label : props.label, t);
+  return monolithic && menuActions?.length === 1 ? /* @__PURE__ */ React3.createElement(NavTreeItemMonolithicAction, {
+    baseLabel,
+    parent: node,
+    ...menuActions[0]
+  }) : /* @__PURE__ */ React3.createElement(NavTreeItemActionDropdownMenu, {
+    ...props,
+    label: baseLabel,
+    parent: node,
+    menuActions,
+    onAction: (action) => action.data?.(props.caller ? {
+      node,
+      caller: props.caller
+    } : {
+      node
+    })
+  });
+};
+
+// packages/plugins/plugin-navtree/src/components/NavTree.tsx
+var NAV_TREE_ITEM = "NavTreeItem";
+var NavTree = ({ getActions: getActions2, loadDescendents, renderItemEnd: renderItemEnd2, popoverAnchorId, ...props }) => {
+  const renderColumns = useCallback(({ item, path, open }) => {
+    return /* @__PURE__ */ React4.createElement(NavTreeColumns, {
+      path,
+      node: item,
+      getActions: getActions2,
+      open,
+      loadDescendents,
+      renderItemEnd: renderItemEnd2,
+      popoverAnchorId
+    });
+  }, [
+    renderItemEnd2,
+    popoverAnchorId,
+    loadDescendents
+  ]);
+  return /* @__PURE__ */ React4.createElement(Tree, {
+    ...props,
+    draggable: true,
+    gridTemplateColumns: "[tree-row-start] 1fr min-content min-content min-content [tree-row-end]",
+    renderColumns
+  });
+};
+var NavTreeColumns = ({ path, node, getActions: getActions2, open, loadDescendents, renderItemEnd: ItemEnd, popoverAnchorId }) => {
+  const { t } = useTranslation4(NAVTREE_PLUGIN);
+  const level = path.length - 2;
+  const { actions: _actions, groupedActions } = getActions2(node);
+  const [primaryAction, ...secondaryActions] = _actions.toSorted((a, b) => a.properties?.disposition === "toolbar" ? -1 : 1);
+  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}/${node.id}` ? Popover.Anchor : Fragment;
+  useEffect(() => {
+    const frame = requestAnimationFrame(() => {
+      void loadDescendents?.(node);
+      if (primaryAction && !isAction3(primaryAction)) {
+        void loadDescendents?.(primaryAction);
+      }
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [
+    primaryAction
+  ]);
+  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, primaryAction?.properties?.disposition === "toolbar" ? /* @__PURE__ */ React4.createElement(NavTreeItemAction, {
+    testId: primaryAction.properties?.testId,
+    label: toLocalizedString3(primaryAction.properties?.label, t),
+    icon: primaryAction.properties?.icon ?? "ph--placeholder--regular",
+    parent: node,
+    monolithic: isAction3(primaryAction),
+    menuActions: isAction3(primaryAction) ? [
+      primaryAction
+    ] : groupedActions[primaryAction.id],
+    menuType: primaryAction.properties?.menuType,
+    caller: NAV_TREE_ITEM
+  }) : /* @__PURE__ */ React4.createElement(Treegrid.Cell, null), /* @__PURE__ */ React4.createElement(ActionRoot, null, actions.length > 0 ? /* @__PURE__ */ React4.createElement(NavTreeItemAction, {
+    testId: `navtree.treeItem.actionsLevel${level}`,
+    label: t("tree item actions label"),
+    icon: "ph--dots-three-vertical--regular",
+    parent: node,
+    menuActions: actions,
+    menuType: "dropdown",
+    caller: NAV_TREE_ITEM
+  }) : /* @__PURE__ */ React4.createElement(Treegrid.Cell, null)), ItemEnd && /* @__PURE__ */ React4.createElement(ItemEnd, {
+    node,
+    open
+  }));
+};
+
+// packages/plugins/plugin-navtree/src/components/NavTreeContainer.tsx
+var NODE_TYPE = "dxos/app-graph/node";
+var renderItemEnd = ({ node, open }) => /* @__PURE__ */ React5.createElement(Surface, {
+  role: "navtree-item-end",
+  data: {
+    id: node.id,
+    subject: node.data,
+    open
+  },
+  limit: 1
+});
+var NavTreeContainer = /* @__PURE__ */ memo(({ isCurrent, popoverAnchorId, ...props }) => {
+  const { closeNavigationSidebar } = useSidebars(NAVTREE_PLUGIN);
+  const [isLg] = useMediaQuery("lg", {
+    ssr: false
+  });
+  const { dispatchPromise: dispatch } = useIntentDispatcher3();
+  const { graph } = useGraph2();
+  const getActions2 = useCallback2((node) => getActions(graph, node), [
+    graph
+  ]);
+  const getItems = useCallback2((node) => {
+    return graph.nodes(node ?? graph.root, {
+      filter: (node2) => {
+        return untracked(() => {
+          const action = isActionLike(node2);
+          const disposition = node2.properties.disposition;
+          return !action || action && disposition === "item";
+        });
+      }
+    });
+  }, [
+    graph
+  ]);
+  const getProps = useCallback2((node, path) => {
+    const children = getChildren(graph, node, void 0, path);
+    const parentOf = children.length > 0 ? children.map(({ id }) => id) : node.properties.role === "branch" ? [] : void 0;
+    return {
+      id: node.id,
+      label: node.properties.label ?? node.id,
+      parentOf,
+      icon: node.properties.icon,
+      disabled: node.properties.disabled,
+      className: mx3(node.properties.modified && "italic", node.properties.className),
+      headingClassName: node.properties.headingClassName,
+      testId: node.properties.testId
+    };
+  }, [
+    graph
+  ]);
+  const loadDescendents = useCallback2((node) => {
+    void expandActions(graph, node);
+    if (!isActionLike(node)) {
+      void expandChildren(graph, node).then(() => (
+        // Load one level deeper, which resolves some juddering observed on open/close.
+        Promise.all(getChildren(graph, node).flatMap((child) => [
+          expandActions(graph, child),
+          expandChildren(graph, child)
+        ]))
+      ));
+    }
+  }, [
+    graph
+  ]);
+  const canDrop = useCallback2((source, target) => {
+    const sourceNode = source.item;
+    const targetNode = target.item;
+    if (isSpace(targetNode.data)) {
+      return isEchoObject(sourceNode.data) || isSpace(sourceNode.data);
+    } else if (isEchoObject(targetNode.data)) {
+      return isEchoObject(sourceNode.data);
+    } else {
+      return false;
+    }
+  }, []);
+  const handleSelect = useCallback2(({ item: node, path, option }) => {
+    if (!node.data) {
+      return;
+    }
+    if (isAction4(node)) {
+      const [parent] = graph.nodes(node, {
+        relation: "inbound"
+      });
+      void (parent && node.data({
+        node: parent,
+        caller: NAV_TREE_ITEM
+      }));
+      return;
+    }
+    const current = isCurrent(path, node);
+    if (!current) {
+      void dispatch(createIntent3(NavigationAction.Open, {
+        activeParts: {
+          main: [
+            node.id
+          ]
+        }
+      }));
+    } else if (option) {
+      void dispatch(createIntent3(NavigationAction.Close, {
+        activeParts: {
+          main: [
+            node.id
+          ]
+        }
+      }));
+    } else {
+      void dispatch(createIntent3(LayoutAction3.ScrollIntoView, {
+        id: node.id
+      }));
+    }
+    const defaultAction = graph.actions(node).find((action) => action.properties?.disposition === "default");
+    if (isAction4(defaultAction)) {
+      void defaultAction.data();
+    }
+    if (!isLg) {
+      closeNavigationSidebar();
+    }
+  }, [
+    graph,
+    dispatch,
+    isCurrent,
+    isLg,
+    closeNavigationSidebar
+  ]);
+  useEffect2(() => {
+    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(sourceParent);
+          const targetItems = getItems(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);
+              arrayMove(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
+  ]);
+  return /* @__PURE__ */ React5.createElement(NavTree, {
+    id: graph.root.id,
+    getActions: getActions2,
+    getItems,
+    getProps,
+    isCurrent,
+    loadDescendents,
+    renderItemEnd,
+    popoverAnchorId,
+    canDrop,
+    onSelect: handleSelect,
+    ...props
+  });
+});
+
+// packages/plugins/plugin-navtree/src/components/NavTreeDocumentTitle.tsx
+import { useEffect as useEffect3 } from "react";
+import { toLocalizedString as toLocalizedString4, useTranslation as useTranslation5 } from "@dxos/react-ui";
+var NavTreeDocumentTitle = ({ node }) => {
+  const { t } = useTranslation5(NAVTREE_PLUGIN);
+  useEffect3(() => {
+    document.title = node ? toLocalizedString4(node.properties.label, t) : t("current app name", {
+      ns: "appkit"
+    });
+  }, [
+    node?.properties?.label
+  ]);
+  return null;
+};
+
+// packages/plugins/plugin-navtree/src/components/NotchStart.tsx
+import React7 from "react";
+import { createIntent as createIntent4, useIntentDispatcher as useIntentDispatcher4, useCapabilities } from "@dxos/app-framework";
+import { ClientAction } from "@dxos/plugin-client/types";
+import { ObservabilityCapabilities } from "@dxos/plugin-observability";
+import { useIdentity } from "@dxos/react-client/halo";
+
+// packages/plugins/plugin-navtree/src/components/HaloButton.tsx
+import React6 from "react";
+import { ConnectionState, useNetworkStatus } from "@dxos/react-client/mesh";
+import { Avatar } from "@dxos/react-ui";
+import { focusRing, mx as mx4 } from "@dxos/react-ui-theme";
+import { hexToFallback } from "@dxos/util";
+var INTERNAL = "https://avatars.githubusercontent.com/u/57182821";
+var HaloButton = (props) => {
+  const { onClick, identityKey, internal, size = 8 } = props;
+  const fallbackValue = hexToFallback(identityKey ?? "0");
+  const { swarm: connectionState } = useNetworkStatus();
+  return /* @__PURE__ */ React6.createElement("button", {
+    className: mx4(focusRing, "rounded grid place-items-center"),
+    onClick
+  }, /* @__PURE__ */ React6.createElement(Avatar.Root, {
+    size,
+    variant: "circle",
+    status: connectionState === ConnectionState.OFFLINE ? "error" : internal ? "internal" : "active",
+    hue: props.hue || fallbackValue.hue
+  }, /* @__PURE__ */ React6.createElement(Avatar.Frame, {
+    "data-testid": "treeView.haloButton",
+    "data-joyride": "welcome/halo"
+  }, internal ? /* @__PURE__ */ React6.createElement(Avatar.Image, {
+    href: INTERNAL
+  }) : /* @__PURE__ */ React6.createElement(Avatar.Fallback, {
+    text: props.emoji || fallbackValue.emoji
+  }))));
+};
+
+// packages/plugins/plugin-navtree/src/components/NotchStart.tsx
+var NotchStart = () => {
+  const identity = useIdentity();
+  const [observability] = useCapabilities(ObservabilityCapabilities.Observability);
+  const { dispatchPromise: dispatch } = useIntentDispatcher4();
+  return /* @__PURE__ */ React7.createElement(HaloButton, {
+    size: 8,
+    identityKey: identity?.identityKey.toHex(),
+    hue: identity?.profile?.data?.hue,
+    emoji: identity?.profile?.data?.emoji,
+    internal: observability?.group === "dxos",
+    onClick: () => dispatch(createIntent4(ClientAction.ShareIdentity))
+  });
+};
+
+export {
+  CommandsDialogContent,
+  CommandsTrigger,
+  getParent,
+  getPersistenceParent,
+  resolveMigrationOperation,
+  sortActions,
+  getChildren,
+  getActions,
+  expandChildrenAndActions,
+  expandChildren,
+  expandActions,
+  NODE_TYPE,
+  NavTreeContainer,
+  NavTreeDocumentTitle,
+  NotchStart
+};
+//# sourceMappingURL=chunk-IMGT2LAL.mjs.map