@dxos/plugin-navtree 0.10.0 → 0.11.0

package/dist/lib/neutral/components/index.mjs

@@ -1,814 +0,0 @@
-import {
-  l0ItemType
-} from "../chunk-JOSNCOV4.mjs";
-import "../chunk-J5LGTIGS.mjs";
-
-// src/components/NavTree/NavTree.tsx
-import React7, { forwardRef as forwardRef2, useMemo as useMemo4 } from "react";
-import { useAppGraph as useAppGraph2 } from "@dxos/app-toolkit/ui";
-import { Node, useConnections, useActions as useGraphActions } from "@dxos/plugin-graph";
-import { Tabs as Tabs3 } from "@dxos/react-ui-tabs";
-import { Position } from "@dxos/util";
-import { useLoadDescendents as useLoadDescendents2 } from "#hooks";
-
-// src/components/NavTreeContext/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/Sidebar/L0Menu.tsx
-import { attachClosestEdge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
-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 { useAtomValue } from "@effect-atom/atom-react";
-import React2, { forwardRef, memo, useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { DxAvatar } from "@dxos/lit-ui/react";
-import { useActionRunner } from "@dxos/plugin-graph";
-import { Icon, IconButton, ScrollArea, Tooltip, toLocalizedString, useMediaQuery, useTranslation } from "@dxos/react-ui";
-import { DropIndicator } from "@dxos/react-ui-list";
-import { Menu } from "@dxos/react-ui-menu";
-import { Tabs } from "@dxos/react-ui-tabs";
-import { mx } from "@dxos/ui-theme";
-import { arrayMove } from "@dxos/util";
-import { useNavTreeState } from "#hooks";
-import { meta } from "#meta";
-
-// src/components/UserAccountAvatar/UserAccountAvatar.tsx
-import React from "react";
-import { Avatar } from "@dxos/react-ui";
-import { hexToFallback } from "@dxos/util";
-var UserAccountAvatar = ({ size, userId, hue, emoji, status }) => {
-  const fallbackValue = hexToFallback(userId ?? "0");
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(L0ItemActiveTabIndicator, {
-    classNames: "inset-y-6"
-  }), /* @__PURE__ */ React.createElement("div", {
-    className: "grid place-items-center dx-focus-ring-group-indicator rounded-full",
-    "data-joyride": "welcome/account"
-  }, /* @__PURE__ */ React.createElement(Avatar.Root, null, /* @__PURE__ */ React.createElement(Avatar.Content, {
-    variant: "circle",
-    size: size ?? 12,
-    status: status ?? "active",
-    hue: hue || fallbackValue.hue,
-    fallback: emoji || fallbackValue.emoji,
-    "data-testid": "treeView.userAccount"
-  }))));
-};
-
-// src/components/Sidebar/L0Menu.tsx
-var useL0ItemClick = ({ item, parent, path }, type) => {
-  const { onSelect, onTabChange } = useNavTreeContext();
-  const { getItem } = useNavTreeState();
-  const [isLg] = useMediaQuery("lg");
-  const runAction = useActionRunner();
-  return useCallback((event) => {
-    switch (type) {
-      case "action": {
-        const { properties: { caller } = {} } = item;
-        return void runAction(item, caller ? {
-          parent,
-          path,
-          caller
-        } : {
-          parent,
-          path
-        });
-      }
-      case "tab":
-        return onTabChange?.(item);
-      case "link":
-        return onSelect?.({
-          item,
-          path,
-          current: !getItem(path).current,
-          option: event.altKey
-        });
-    }
-  }, [
-    item,
-    parent,
-    type,
-    getItem,
-    onSelect,
-    onTabChange,
-    isLg,
-    runAction
-  ]);
-};
-var l0Breakpoints = {
-  lg: "hidden lg:grid"
-};
-var L0ItemRoot = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef(({ item, parent, path, onMouseEnter, children }, forwardedRef) => {
-  const { t } = useTranslation(meta.profile.key);
-  const { model } = useNavTreeContext();
-  const itemPath = useMemo(() => [
-    ...path,
-    item.id
-  ], [
-    item.id,
-    path
-  ]);
-  const { id, testId } = useAtomValue(model.itemProps(itemPath));
-  const localizedString = toLocalizedString(item.properties.label, t);
-  const type = l0ItemType(item);
-  const handleClick = useL0ItemClick({
-    item,
-    parent,
-    path: itemPath
-  }, type);
-  return /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
-    asChild: true,
-    delayDuration: 0,
-    side: "right",
-    content: localizedString
-  }, /* @__PURE__ */ React2.createElement(Tabs.TabPrimitive, {
-    className: mx("group/l0item flex w-full justify-center items-center relative", 'dx-app-no-drag dx-focus-ring-group data[type!="collection"]:cursor-pointer', l0Breakpoints[item.properties.l0Breakpoint]),
-    tabIndex: type === "tab" ? 0 : void 0,
-    "data-type": type,
-    "data-testid": testId,
-    "data-object-id": id,
-    value: item.id,
-    onClick: handleClick,
-    onMouseEnter,
-    ref: forwardedRef
-  }, children));
-}));
-var L0ItemActiveTabIndicator = ({ classNames }) => /* @__PURE__ */ React2.createElement("div", {
-  className: mx("hidden group-aria-selected/l0item:block absolute start-0 h-6 w-1.5 bg-accent-bg rounded-sm", classNames)
-});
-var L0Item = /* @__PURE__ */ memo(({ item, parent, path, pinned, onRearrange, onItemHover }) => {
-  const { t } = useTranslation(meta.profile.key);
-  const itemElement = useRef(null);
-  const [closestEdge, setEdge] = useState(null);
-  const localizedString = toLocalizedString(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
-  ]);
-  const handleMouseEnter = useCallback(() => onItemHover?.({
-    item
-  }), [
-    item,
-    onItemHover
-  ]);
-  return /* @__PURE__ */ React2.createElement(L0ItemRoot, {
-    ref: itemElement,
-    item,
-    parent,
-    path,
-    onMouseEnter: handleMouseEnter
-  }, /* @__PURE__ */ React2.createElement("div", {
-    "data-frame": true,
-    ...hue && {
-      style: {
-        background: `var(--color-${hue}-surface)`
-      }
-    },
-    className: mx("flex justify-center items-center dx-focus-ring-group-indicator transition-colors rounded-sm", pinned ? "p-2 group-hover/l0item:bg-current-surface" : "w-(--dx-l0-avatar-size) h-(--dx-l0-avatar-size) bg-current-surface")
-  }, /* @__PURE__ */ React2.createElement(ItemAvatar, {
-    item
-  })), /* @__PURE__ */ React2.createElement(L0ItemActiveTabIndicator, null), /* @__PURE__ */ React2.createElement("span", {
-    id: `${item.id}__label`,
-    className: "sr-only"
-  }, localizedString), closestEdge && /* @__PURE__ */ React2.createElement(DropIndicator, {
-    edge: closestEdge
-  }));
-});
-var ItemAvatar = ({ item }) => {
-  const { t } = useTranslation(meta.profile.key);
-  if (item.properties.icon) {
-    const hue = item.properties.hue ?? null;
-    const hueFgStyle = hue && {
-      style: {
-        color: `var(--color-${hue}-fg)`
-      }
-    };
-    return /* @__PURE__ */ React2.createElement(Icon, {
-      icon: item.properties.icon,
-      size: 6,
-      ...hueFgStyle
-    });
-  }
-  const type = l0ItemType(item);
-  if (type === "tab" && item.properties.disposition !== "pin-end") {
-    const hue = item.properties.hue ?? null;
-    const localizedString = toLocalizedString(item.properties.label, t);
-    return /* @__PURE__ */ React2.createElement(DxAvatar, {
-      hue,
-      hueVariant: "surface",
-      variant: "square",
-      size: 12,
-      fallback: localizedString
-    });
-  }
-  return null;
-};
-var L0Menu = ({ menuActions, topLevelItems, pinnedItems, userAccountItem, parent, path, onItemHover }) => {
-  const { t } = useTranslation(meta.profile.key);
-  const runAction = useActionRunner();
-  const handleAction = useCallback((action, params) => {
-    void runAction(action, params);
-  }, [
-    runAction
-  ]);
-  const handleRearrange = useCallback((source, target, closestEdge) => {
-    const sourceItem = topLevelItems.find((i) => i.id === source.id);
-    if (!sourceItem?.properties.onRearrange) {
-      return;
-    }
-    const sourceIndex = topLevelItems.findIndex((i) => i.id === source.id);
-    const targetIndex = topLevelItems.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([
-      ...topLevelItems
-    ], sourceIndex, insertIndex);
-    return sourceItem.properties.onRearrange(nextOrder.map((item) => item.data));
-  }, [
-    topLevelItems
-  ]);
-  const hasRearrangeableItems = topLevelItems.some((item) => item.properties.onRearrange);
-  return /* @__PURE__ */ React2.createElement(Tabs.Tablist, {
-    "data-tauri-drag-region": true,
-    classNames: [
-      "group/l0 absolute z-[1] inset-y-0 start-0 rounded-is",
-      "grid grid-cols-[var(--dx-l0-size)] grid-rows-[var(--dx-rail-size)_1fr_min-content_var(--dx-l0-size)] dx-contain-layout",
-      "w-(--dx-l0-size) bg-l0-surface dx-app-drag pb-[env(safe-area-inset-bottom)]",
-      '[body[data-platform="macos"]_&]:pt-[30px]',
-      '[body[data-platform="ios"]_&]:pt-[max(env(safe-area-inset-top),0.25rem)]'
-    ]
-  }, /* @__PURE__ */ React2.createElement(Menu.Root, {
-    onAction: handleAction
-  }, /* @__PURE__ */ React2.createElement(Menu.Trigger, {
-    asChild: true,
-    "data-testid": "spacePlugin.addSpace"
-  }, /* @__PURE__ */ React2.createElement("div", {
-    className: "grid place-items-center"
-  }, /* @__PURE__ */ React2.createElement(IconButton, {
-    density: "lg",
-    variant: "ghost",
-    size: 5,
-    icon: "ph--list--regular",
-    iconOnly: true,
-    square: true,
-    label: t("app-menu.label")
-  }))), /* @__PURE__ */ React2.createElement(Menu.Content, {
-    group: parent,
-    items: menuActions
-  })), /* @__PURE__ */ React2.createElement(ScrollArea.Root, {
-    centered: true,
-    thin: true,
-    orientation: "vertical"
-  }, /* @__PURE__ */ React2.createElement(ScrollArea.Viewport, {
-    classNames: "flex flex-col gap-2 py-1"
-  }, topLevelItems.map((item) => /* @__PURE__ */ React2.createElement(L0Item, {
-    key: item.id,
-    item,
-    parent,
-    path,
-    onItemHover,
-    ...hasRearrangeableItems && {
-      onRearrange: handleRearrange
-    }
-  })))), /* @__PURE__ */ React2.createElement("div", {
-    className: "grid grid-cols-1 auto-rows-(--dx-rail-action) pt-2"
-  }, pinnedItems.map((item) => /* @__PURE__ */ React2.createElement(L0Item, {
-    key: item.id,
-    item,
-    parent,
-    path,
-    pinned: true
-  }))), userAccountItem && /* @__PURE__ */ React2.createElement("div", {
-    className: "grid dx-app-no-drag"
-  }, /* @__PURE__ */ React2.createElement(L0ItemRoot, {
-    key: userAccountItem.id,
-    item: userAccountItem,
-    parent,
-    path
-  }, /* @__PURE__ */ React2.createElement(UserAccountAvatar, {
-    userId: userAccountItem.properties.userId,
-    hue: userAccountItem.properties.hue,
-    emoji: userAccountItem.properties.emoji,
-    status: userAccountItem.properties.status,
-    size: 10
-  }))));
-};
-
-// src/components/Sidebar/L1Panel.tsx
-import * as Option from "effect/Option";
-import React5, { memo as memo3, useCallback as useCallback3, useMemo as useMemo3 } from "react";
-import { Paths } from "@dxos/app-toolkit";
-import { useAppGraph } from "@dxos/app-toolkit/ui";
-import { Graph, useActionRunner as useActionRunner3, useEdges } from "@dxos/plugin-graph";
-import { DensityProvider, IconButton as IconButton3, ScrollArea as ScrollArea2, toLocalizedString as toLocalizedString4, useTranslation as useTranslation4 } from "@dxos/react-ui";
-import { Tree } from "@dxos/react-ui-list";
-import { Menu as Menu3 } from "@dxos/react-ui-menu";
-import { Tabs as Tabs2 } from "@dxos/react-ui-tabs";
-import { hoverableControlItem as hoverableControlItem2, hoverableOpenControlItem as hoverableOpenControlItem2 } from "@dxos/ui-theme";
-import { getListActions as getListActions2, useActions as useActions2, useLoadDescendents } from "#hooks";
-import { meta as meta4 } from "#meta";
-
-// src/components/NavTreeItem/NavTreeItemColumns.tsx
-import React4, { Fragment, memo as memo2, useMemo as useMemo2 } from "react";
-import { Popover, toLocalizedString as toLocalizedString3, useTranslation as useTranslation3 } from "@dxos/react-ui";
-import { Treegrid } from "@dxos/react-ui-list";
-import { getListActions, useActions } from "#hooks";
-import { meta as meta3 } from "#meta";
-
-// src/components/NavTreeItem/NavTreeItemAction.tsx
-import React3, { useCallback as useCallback2 } from "react";
-import { useActionRunner as useActionRunner2 } from "@dxos/plugin-graph";
-import { IconButton as IconButton2, toLocalizedString as toLocalizedString2, useDensityContext, useTranslation as useTranslation2 } from "@dxos/react-ui";
-import { composable, composableProps } from "@dxos/react-ui";
-import { Menu as Menu2 } from "@dxos/react-ui-menu";
-import { hoverableControlItem, hoverableOpenControlItem } from "@dxos/ui-theme";
-import { meta as meta2 } from "#meta";
-var fallbackIcon = "ph--circle-dashed--regular";
-var mdActionButtonProps = {
-  size: 4,
-  density: "md"
-};
-var lgActionButtonProps = {
-  size: 5,
-  density: "lg"
-};
-var NavTreeItemActionDropdownMenu = composable(({ parent, path, label, icon, testId, menuActions, caller, ...props }, forwardedRef) => {
-  const { t } = useTranslation2(meta2.profile.key);
-  const density = useDensityContext();
-  const runAction = useActionRunner2();
-  const handleAction = useCallback2((action, params = {}) => runAction(action, {
-    ...params,
-    path
-  }), [
-    runAction,
-    path
-  ]);
-  return /* @__PURE__ */ React3.createElement(Menu2.Root, {
-    caller,
-    onAction: handleAction
-  }, /* @__PURE__ */ React3.createElement(Menu2.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React3.createElement(IconButton2, {
-    ...density === "lg" ? lgActionButtonProps : mdActionButtonProps,
-    ...composableProps(props),
-    classNames: [
-      "shrink-0 px-2 pointer-fine:px-1",
-      hoverableControlItem,
-      hoverableOpenControlItem
-    ],
-    variant: "ghost",
-    icon: icon ?? fallbackIcon,
-    iconOnly: true,
-    label: toLocalizedString2(label, t),
-    "data-testid": testId,
-    ref: forwardedRef
-  })), /* @__PURE__ */ React3.createElement(Menu2.Content, {
-    group: parent,
-    items: menuActions
-  }));
-});
-NavTreeItemActionDropdownMenu.displayName = "NavTreeItemActionDropdownMenu";
-var NavTreeItemMonolithicAction = (props) => {
-  const { parent, path, properties: { disabled, caller, testId, icon, variant = "ghost", iconOnly = true } = {
-    label: "never"
-  }, baseLabel } = props;
-  const density = useDensityContext();
-  const runAction = useActionRunner2();
-  return /* @__PURE__ */ React3.createElement(IconButton2, {
-    ...density === "lg" ? lgActionButtonProps : mdActionButtonProps,
-    variant,
-    classNames: [
-      "shrink-0",
-      hoverableControlItem,
-      hoverableOpenControlItem,
-      iconOnly ? "px-2 pointer-fine:px-1" : "p-2 pointer-fine:p-2 me-1"
-    ],
-    icon: icon ?? fallbackIcon,
-    iconOnly,
-    label: baseLabel,
-    disabled,
-    onClick: (event) => {
-      event.stopPropagation();
-      if (disabled) {
-        return;
-      }
-      void runAction(props, caller ? {
-        parent,
-        caller,
-        path
-      } : {
-        parent,
-        path
-      });
-    },
-    "data-testid": testId
-  });
-};
-
-// src/components/NavTreeItem/NavTreeItemColumns.tsx
-var NavTreeItemColumns = /* @__PURE__ */ memo2(({ path, item, open }) => {
-  const { t } = useTranslation3(meta3.profile.key);
-  const { renderItemEnd: ItemEnd, popoverAnchorId } = useNavTreeContext();
-  const level = path.length - 2;
-  const flattenedActions = useActions(item);
-  const allActions = useMemo2(() => getListActions(flattenedActions), [
-    flattenedActions
-  ]);
-  const anchored = popoverAnchorId === `${NAV_TREE_ITEM}:${item.id}`;
-  const ActionRoot = anchored ? Popover.Anchor : Fragment;
-  return (
-    // `data-popover-anchor` lets the enclosing row highlight itself while a popover (e.g. rename) is open on it.
-    /* @__PURE__ */ React4.createElement("div", {
-      className: "contents dx-app-no-drag",
-      ...anchored && {
-        "data-popover-anchor": ""
-      }
-    }, /* @__PURE__ */ React4.createElement(ActionRoot, null, allActions.length === 1 ? /* @__PURE__ */ React4.createElement(Treegrid.Cell, {
-      classNames: "contents"
-    }, /* @__PURE__ */ React4.createElement(NavTreeItemMonolithicAction, {
-      baseLabel: toLocalizedString3(allActions[0].properties?.label, t),
-      parent: item,
-      path,
-      ...allActions[0]
-    })) : allActions.length > 1 ? /* @__PURE__ */ React4.createElement(Treegrid.Cell, {
-      classNames: "contents"
-    }, /* @__PURE__ */ React4.createElement(NavTreeItemActionDropdownMenu, {
-      testId: `navtree.treeItem.actionsLevel${level}`,
-      label: t("tree-item-actions.label"),
-      icon: "ph--dots-three-vertical--regular",
-      parent: item,
-      path,
-      menuActions: allActions,
-      caller: NAV_TREE_ITEM
-    })) : /* @__PURE__ */ React4.createElement(Treegrid.Cell, null)), ItemEnd && /* @__PURE__ */ React4.createElement(Treegrid.Cell, {
-      classNames: "contents"
-    }, /* @__PURE__ */ React4.createElement(ItemEnd, {
-      node: item,
-      open
-    })))
-  );
-});
-
-// src/components/Sidebar/L1Panel.tsx
-var L1Panel$ = ({ open, path, item, isCurrent, onBack }) => {
-  const { t } = useTranslation4(meta4.profile.key);
-  const title = toLocalizedString4(item.properties.label, t);
-  const isActivated = useIsActivatedWorkspace(item);
-  const shouldRenderContent = isCurrent || isActivated;
-  return /* @__PURE__ */ React5.createElement(Tabs2.Panel, {
-    key: item.id,
-    value: item.id,
-    classNames: [
-      "absolute inset-y-0 end-0",
-      "w-[calc(100%-var(--dx-l0-size))] lg:w-(--dx-l1-size) grid-cols-1 grid-rows-[var(--dx-rail-size)_1fr]",
-      "py-[env(safe-area-inset-top)]",
-      isCurrent && "grid"
-    ],
-    tabIndex: -1,
-    "aria-label": title,
-    ...isCurrent && {
-      "data-testid": "navtree.workspace.visible"
-    },
-    ...!open && {
-      inert: true
-    }
-  }, shouldRenderContent && /* @__PURE__ */ React5.createElement(L1PanelContent, {
-    open,
-    path,
-    item,
-    onBack
-  }));
-};
-var useIsActivatedWorkspace = (item) => {
-  const { graph } = useAppGraph();
-  const edges = useEdges(graph, item.id);
-  return useMemo3(() => {
-    const childIds = edges[Graph.relationKey("child")] ?? [];
-    return childIds.some((childId) => {
-      const child = Graph.getNode(graph, childId);
-      if (Option.isNone(child)) {
-        return false;
-      }
-      return child.value.properties.disposition === void 0;
-    });
-  }, [
-    edges,
-    graph
-  ]);
-};
-var L1PanelContent = ({ path, item, onBack }) => {
-  const navTreeContext = useNavTreeContext();
-  return /* @__PURE__ */ React5.createElement(DensityProvider, {
-    density: "md"
-  }, /* @__PURE__ */ React5.createElement(L1PanelHeader, {
-    path,
-    item,
-    onBack
-  }), /* @__PURE__ */ React5.createElement(ScrollArea2.Root, {
-    thin: true,
-    orientation: "vertical"
-  }, /* @__PURE__ */ React5.createElement(ScrollArea2.Viewport, null, /* @__PURE__ */ React5.createElement(Tree, {
-    classNames: "pt-[2px]",
-    model: navTreeContext.model,
-    id: item.id,
-    rootId: item.id,
-    path,
-    levelOffset: 5,
-    draggable: true,
-    gridTemplateColumns: "[tree-row-start] minmax(0, 1fr) min-content min-content [tree-row-end]",
-    renderColumns: NavTreeItemColumns,
-    blockInstruction: navTreeContext.blockInstruction,
-    canDrop: navTreeContext.canDrop,
-    canSelect: navTreeContext.canSelect,
-    onOpenChange: navTreeContext.onOpenChange,
-    onSelect: navTreeContext.onSelect,
-    onItemHover: navTreeContext.onItemHover
-  }))));
-};
-var L1PanelHeader = ({ item, path, onBack }) => {
-  const { t } = useTranslation4(meta4.profile.key);
-  const { renderItemEnd: ItemEnd } = useNavTreeContext();
-  const title = toLocalizedString4(item.properties.label, t);
-  const backCapableWorkspace = Paths.isPinnedWorkspace(item.id);
-  const { menuActions, onAction } = useL1MenuActions({
-    item,
-    path
-  });
-  useLoadDescendents(item);
-  return /* @__PURE__ */ React5.createElement("div", {
-    "data-tauri-drag-region": true,
-    className: "grid grid-cols-[28px_1fr_min-content_min-content] w-full items-center dx-app-drag dx-density-lg"
-  }, backCapableWorkspace ? /* @__PURE__ */ React5.createElement(IconButton3, {
-    classNames: [
-      hoverableControlItem2,
-      hoverableOpenControlItem2
-    ],
-    variant: "ghost",
-    icon: "ph--caret-left--regular",
-    iconOnly: true,
-    size: 4,
-    label: t("button-back.button"),
-    "data-testid": "treeView.primaryTreeButton",
-    onClick: () => onBack?.()
-  }) : /* @__PURE__ */ React5.createElement("div", null), /* @__PURE__ */ React5.createElement("h2", {
-    "data-tauri-drag-region": true,
-    className: "flex-1 truncate min-w-0"
-  }, title), /* @__PURE__ */ React5.createElement("div", {
-    className: "contents dx-app-no-drag"
-  }, /* @__PURE__ */ React5.createElement(MenuActions, {
-    item,
-    menuActions,
-    onAction
-  }), ItemEnd && /* @__PURE__ */ React5.createElement(ItemEnd, {
-    node: item,
-    open: true
-  })));
-};
-var MenuActions = ({ item, menuActions, onAction }) => {
-  const { t } = useTranslation4(meta4.profile.key);
-  if (menuActions.length === 0) {
-    return null;
-  }
-  if (menuActions.length === 1) {
-    return /* @__PURE__ */ React5.createElement(IconButton3, {
-      classNames: [
-        "shrink-0 px-2 pointer-fine:px-1",
-        hoverableControlItem2,
-        hoverableOpenControlItem2
-      ],
-      variant: "ghost",
-      icon: menuActions[0].properties?.icon ?? "ph--circle-dashed--regular",
-      iconOnly: true,
-      size: 4,
-      label: toLocalizedString4(menuActions[0].properties?.label, t),
-      "data-testid": menuActions[0].properties?.testId,
-      onClick: () => onAction(menuActions[0])
-    });
-  }
-  return /* @__PURE__ */ React5.createElement(Menu3.Root, {
-    caller: NAV_TREE_ITEM,
-    onAction
-  }, /* @__PURE__ */ React5.createElement(Menu3.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React5.createElement(IconButton3, {
-    classNames: [
-      "shrink-0 px-2 pointer-fine:px-1",
-      hoverableControlItem2,
-      hoverableOpenControlItem2
-    ],
-    variant: "ghost",
-    icon: "ph--dots-three-vertical--regular",
-    iconOnly: true,
-    size: 4,
-    label: t("tree-item-actions.label"),
-    "data-testid": "navtree.treeItem.actionsLevel0"
-  })), /* @__PURE__ */ React5.createElement(Menu3.Content, {
-    group: item,
-    items: menuActions
-  }));
-};
-var useL1MenuActions = ({ item, path }) => {
-  const runAction = useActionRunner3();
-  const menuActions = getListActions2(useActions2(item));
-  const onAction = useCallback3((action, params) => {
-    void runAction(action, {
-      ...params,
-      path
-    });
-  }, [
-    runAction,
-    path
-  ]);
-  return {
-    menuActions,
-    onAction
-  };
-};
-var L1Panel = /* @__PURE__ */ memo3(L1Panel$);
-
-// src/components/Sidebar/L1Tabs.tsx
-import React6 from "react";
-var L1Tabs = ({ topLevelItems, currentItemId, onBack, open, path }) => {
-  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, topLevelItems.map((item) => {
-    const type = l0ItemType(item);
-    if (type === "tab") {
-      return /* @__PURE__ */ React6.createElement(L1Panel, {
-        key: item.id,
-        item,
-        path,
-        open,
-        onBack,
-        isCurrent: item.id === currentItemId
-      });
-    }
-    return null;
-  }));
-};
-
-// src/components/NavTree/NavTree.tsx
-var NAV_TREE_ITEM = "NavTreeItem";
-var NavTree = /* @__PURE__ */ forwardRef2(({ id, root, tab, ...props }, forwardedRef) => {
-  const { onBack, onItemHover } = useNavTreeContext();
-  const { topLevelActions, l0Items, pinnedItems, userAccountItem, topLevelItems } = useTopLevelNavItems(root);
-  useLoadDescendents2(root);
-  const path = useMemo4(() => [
-    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__ */ React7.createElement(Tabs3.Root, {
-      value: tab,
-      orientation: "vertical",
-      classNames: "relative",
-      ref: forwardedRef
-    }, /* @__PURE__ */ React7.createElement(L0Menu, {
-      menuActions: topLevelActions,
-      topLevelItems: l0Items,
-      pinnedItems,
-      userAccountItem,
-      path,
-      parent: root,
-      onItemHover
-    }), /* @__PURE__ */ React7.createElement(L1Tabs, {
-      topLevelItems,
-      path,
-      currentItemId: tab,
-      onBack,
-      ...props
-    }))
-  );
-});
-var useTopLevelNavItems = (root) => {
-  const { graph } = useAppGraph2();
-  const rootId = root?.id ?? Node.RootId;
-  const rootOutboundItems = useConnections(graph, rootId, "child");
-  const rootActions = useGraphActions(graph, rootId);
-  const { topLevelActions, l0Items, pinnedItems, userAccountItem } = useMemo4(() => {
-    const topLevelWorkspaces = [];
-    const outboundPinnedItems = [];
-    let userAccountItem2;
-    for (const node of rootOutboundItems) {
-      switch (node.properties.disposition) {
-        case "workspace":
-          topLevelWorkspaces.push(node);
-          break;
-        case "pin-end":
-          outboundPinnedItems.push(node);
-          break;
-        case "user-account":
-          userAccountItem2 ??= node;
-          break;
-      }
-    }
-    const topLevelActions2 = rootActions.filter((action) => action.properties.disposition === "menu").toSorted((a, b) => Position.compare(a.properties, b.properties));
-    const pinnedItems2 = [
-      ...outboundPinnedItems,
-      ...rootActions.filter((action) => action.properties.disposition === "pin-end")
-    ].toSorted((a, b) => Position.compare(a.properties, b.properties));
-    return {
-      pinnedItems: pinnedItems2,
-      topLevelActions: topLevelActions2,
-      userAccountItem: userAccountItem2,
-      l0Items: topLevelWorkspaces
-    };
-  }, [
-    rootActions,
-    rootOutboundItems
-  ]);
-  const topLevelItems = useMemo4(() => [
-    ...l0Items,
-    ...pinnedItems,
-    ...userAccountItem ? [
-      userAccountItem
-    ] : []
-  ], [
-    l0Items,
-    pinnedItems,
-    userAccountItem
-  ]);
-  return {
-    topLevelActions,
-    l0Items,
-    pinnedItems,
-    userAccountItem,
-    topLevelItems
-  };
-};
-export {
-  NAV_TREE_ITEM,
-  NavTree,
-  NavTreeContext,
-  useNavTreeContext
-};
-//# sourceMappingURL=index.mjs.map