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

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

@@ -0,0 +1,879 @@
+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 as Node3, useConnections, useActions as useGraphActions } from "@dxos/plugin-graph";
+import { Tabs as Tabs3 } from "@dxos/react-ui-tabs";
+import { byPosition } 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, ListItem, ScrollArea, Tooltip, toLocalizedString, useMediaQuery, useTranslation } from "@dxos/react-ui";
+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.id);
+  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-surface rounded-sm", classNames)
+});
+var L0Item = /* @__PURE__ */ memo(({ item, parent, path, pinned, onRearrange, onItemHover }) => {
+  const { t } = useTranslation(meta.id);
+  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(ListItem.DropIndicator, {
+    edge: closestEdge
+  }));
+});
+var ItemAvatar = ({ item }) => {
+  const { t } = useTranslation(meta.id);
+  if (item.properties.icon) {
+    const hue = item.properties.hue ?? null;
+    const hueFgStyle = hue && {
+      style: {
+        color: `var(--color-${hue}-foreground)`
+      }
+    };
+    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.id);
+  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-toolbar-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 { Node as Node2 } from "@dxos/app-graph";
+import { isPinnedWorkspace } 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 { useActions as useActions2, useLoadDescendents } from "#hooks";
+import { meta as meta4 } 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.id);
+  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
+  });
+};
+var NavTreeItemAction = ({ monolithic, menuActions, menuType, parent, path, ...props }) => {
+  const { t } = useTranslation2(meta2.id);
+  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,
+    path,
+    ...menuActions[0]
+  }) : /* @__PURE__ */ React3.createElement(NavTreeItemActionDropdownMenu, {
+    ...props,
+    label: baseLabel,
+    parent,
+    path,
+    menuActions
+  });
+};
+
+// src/components/NavTreeItem/NavTreeItemColumns.tsx
+import React4, { Fragment, memo as memo2, useMemo as useMemo2 } from "react";
+import { Node } from "@dxos/app-graph";
+import { Popover, Treegrid, toLocalizedString as toLocalizedString3, useTranslation as useTranslation3 } from "@dxos/react-ui";
+import { useActions } from "#hooks";
+import { meta as meta3 } from "#meta";
+var NavTreeItemColumns = /* @__PURE__ */ memo2(({ path, item, open }) => {
+  const { t } = useTranslation3(meta3.id);
+  const { renderItemEnd: ItemEnd, popoverAnchorId } = useNavTreeContext();
+  const level = path.length - 2;
+  const { actions: actionsProp, groupedActions } = useActions(item);
+  const sortedActions = useMemo2(() => actionsProp.toSorted((actionA, actionB) => {
+    const primaryA = actionA.properties?.disposition === "list-item-primary";
+    const primaryB = actionB.properties?.disposition === "list-item-primary";
+    if (primaryA && !primaryB) {
+      return -1;
+    }
+    if (primaryB && !primaryA) {
+      return 1;
+    }
+    return 0;
+  }), [
+    actionsProp
+  ]);
+  const [primaryAction, ...secondaryActions] = sortedActions;
+  const actions = useMemo2(() => (primaryAction?.properties?.disposition === "list-item-primary" ? secondaryActions : sortedActions).flatMap((action) => Node.isAction(action) ? [
+    action
+  ] : []).filter((a) => [
+    "list-item",
+    "list-item-primary"
+  ].includes(a.properties?.disposition)), [
+    sortedActions,
+    primaryAction
+  ]);
+  const primaryMenuActions = useMemo2(() => primaryAction ? Node.isAction(primaryAction) ? [
+    primaryAction
+  ] : groupedActions[primaryAction?.id ?? ""] : void 0, [
+    primaryAction,
+    groupedActions
+  ]);
+  const ActionRoot = popoverAnchorId === `${NAV_TREE_ITEM}:${item.id}` ? Popover.Anchor : Fragment;
+  return /* @__PURE__ */ React4.createElement("div", {
+    className: "contents dx-app-no-drag"
+  }, primaryAction?.properties?.disposition === "list-item-primary" && !primaryAction?.properties?.disabled ? /* @__PURE__ */ React4.createElement(Treegrid.Cell, {
+    classNames: "contents"
+  }, /* @__PURE__ */ React4.createElement(NavTreeItemAction, {
+    testId: primaryAction.properties?.testId,
+    label: toLocalizedString3(primaryAction.properties?.label, t),
+    icon: primaryAction.properties?.icon ?? "ph--circle-dashed--regular",
+    parent: item,
+    path,
+    monolithic: Node.isAction(primaryAction),
+    menuActions: primaryMenuActions,
+    menuType: primaryAction.properties?.menuType,
+    caller: NAV_TREE_ITEM
+  })) : /* @__PURE__ */ React4.createElement(Treegrid.Cell, {
+    role: "none"
+  }), /* @__PURE__ */ React4.createElement(ActionRoot, null, actions.length > 0 ? /* @__PURE__ */ React4.createElement(Treegrid.Cell, {
+    classNames: "contents"
+  }, /* @__PURE__ */ React4.createElement(NavTreeItemAction, {
+    testId: `navtree.treeItem.actionsLevel${level}`,
+    label: t("tree-item-actions.label"),
+    icon: "ph--dots-three-vertical--regular",
+    parent: item,
+    path,
+    menuActions: actions,
+    menuType: "dropdown",
+    caller: NAV_TREE_ITEM
+  })) : /* @__PURE__ */ React4.createElement(Treegrid.Cell, {
+    role: "none"
+  })), 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.id);
+  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] 1fr min-content 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.id);
+  const { renderItemEnd: ItemEnd } = useNavTreeContext();
+  const title = toLocalizedString4(item.properties.label, t);
+  const backCapableWorkspace = isPinnedWorkspace(item.id);
+  const { primaryAction, groupedActions, menuActions, onAction } = useL1MenuActions({
+    item,
+    path
+  });
+  useLoadDescendents(item);
+  return /* @__PURE__ */ React5.createElement("div", {
+    "data-tauri-drag-region": true,
+    className: "grid grid-cols-[28px_1fr_28px_28px] w-full items-center border-b border-subdued-separator dx-app-drag dx-density-lg pe-1"
+  }, 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"
+  }, primaryAction?.properties?.disposition === "list-item-primary" && !primaryAction?.properties?.disabled && /* @__PURE__ */ React5.createElement(NavTreeItemAction, {
+    testId: primaryAction.properties?.testId,
+    label: toLocalizedString4(primaryAction.properties?.label, t),
+    icon: primaryAction.properties?.icon ?? "ph--circle-dashed--regular",
+    parent: item,
+    path,
+    monolithic: Node2.isAction(primaryAction),
+    menuActions: Node2.isAction(primaryAction) ? [
+      primaryAction
+    ] : groupedActions[primaryAction?.id ?? ""],
+    menuType: primaryAction.properties?.menuType,
+    caller: NAV_TREE_ITEM
+  }), /* @__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.id);
+  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 { actions: actionsProp, groupedActions } = useActions2(item);
+  const [primaryAction, ...secondaryActions] = actionsProp.toSorted((a, _b) => a.properties?.disposition === "list-item-primary" ? -1 : 1);
+  const menuActions = (primaryAction?.properties?.disposition === "list-item-primary" ? secondaryActions : actionsProp).flatMap((action) => Node2.isAction(action) ? [
+    action
+  ] : []).filter((a) => [
+    "list-item",
+    "list-item-primary"
+  ].includes(a.properties?.disposition));
+  const onAction = useCallback3((action, params) => {
+    void runAction(action, {
+      ...params,
+      path
+    });
+  }, [
+    runAction,
+    path
+  ]);
+  return {
+    primaryAction,
+    groupedActions,
+    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 ?? Node3.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) => byPosition(a.properties, b.properties));
+    const pinnedItems2 = [
+      ...outboundPinnedItems,
+      ...rootActions.filter((action) => action.properties.disposition === "pin-end")
+    ].toSorted((a, b) => byPosition(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