@dxos/plugin-navtree 0.10.0 → 0.11.1

package/dist/lib/components.mjs

@@ -0,0 +1,723 @@
+import { a as l0ItemType } from "./chunk-util.mjs";
+import { Position, arrayMove, hexToFallback } from "@dxos/util";
+import { meta } from "#meta";
+import { GraphPath } from "@dxos/app-toolkit";
+import { Graph, Node } from "@dxos/plugin-graph";
+import { Fragment, createContext, forwardRef, memo, useCallback, useContext, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { useAppGraph } from "@dxos/app-toolkit/ui";
+import { useActionRunner, useActions, useConnections, useEdges } from "@dxos/plugin-graph/hooks";
+import { Tabs } from "@dxos/react-ui-tabs";
+import { getListActions, useActions as useActions$1, useLoadDescendents, useNavTreeState } from "#hooks";
+import { raise } from "@dxos/debug";
+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 { DxAvatar } from "@dxos/lit-ui/react";
+import { Avatar, DensityProvider, Icon, IconButton, Popover, ScrollArea, Tooltip, composable, composableProps, toLocalizedString, useDensityContext, useMediaQuery, useTranslation } from "@dxos/react-ui";
+import { DropIndicator, Empty, Tree, Treegrid } from "@dxos/react-ui-list";
+import { Menu } from "@dxos/react-ui-menu";
+import { hoverableControlItem, hoverableOpenControlItem, mx } from "@dxos/ui-theme";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import * as Option from "effect/Option";
+//#region src/components/NavTreeContext/NavTreeContext.ts
+var NavTreeContext = createContext(null);
+var useNavTreeContext = () => useContext(NavTreeContext) ?? raise(/* @__PURE__ */ new Error("Missing NavTreeContext"));
+//#endregion
+//#region src/components/UserAccountAvatar/UserAccountAvatar.tsx
+var UserAccountAvatar = ({ size, userId, hue, emoji, status }) => {
+	const fallbackValue = hexToFallback(userId ?? "0");
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(L0ItemActiveTabIndicator, { classNames: "inset-y-6" }), /* @__PURE__ */ jsx("div", {
+		className: "grid place-items-center dx-focus-ring-group-indicator rounded-full",
+		"data-joyride": "welcome/account",
+		children: /* @__PURE__ */ jsx(Avatar.Root, { children: /* @__PURE__ */ jsx(Avatar.Content, {
+			variant: "circle",
+			size: size ?? 12,
+			status: status ?? "active",
+			hue: hue || fallbackValue.hue,
+			fallback: emoji || fallbackValue.emoji,
+			"data-testid": "treeView.userAccount"
+		}) })
+	})] });
+};
+//#endregion
+//#region 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;
+				runAction(item, caller ? {
+					parent,
+					path,
+					caller
+				} : {
+					parent,
+					path
+				});
+				return;
+			}
+			case "tab": return onTabChange?.(item);
+			case "link": return onSelect?.({
+				item,
+				path,
+				current: !getItem(path).current,
+				option: event.altKey,
+				shift: event.shiftKey
+			});
+		}
+	}, [
+		item,
+		parent,
+		type,
+		getItem,
+		onSelect,
+		onTabChange,
+		isLg,
+		runAction
+	]);
+};
+var l0Breakpoints = { lg: "hidden lg:grid" };
+var L0ItemRoot = memo(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__ */ jsx(Tooltip.Trigger, {
+		asChild: true,
+		delayDuration: 0,
+		side: "right",
+		content: localizedString,
+		children: /* @__PURE__ */ jsx(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__ */ jsx("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 = 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]);
+	return /* @__PURE__ */ jsxs(L0ItemRoot, {
+		ref: itemElement,
+		item,
+		parent,
+		path,
+		onMouseEnter: useCallback(() => onItemHover?.({ item }), [item, onItemHover]),
+		children: [
+			/* @__PURE__ */ jsx("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"),
+				children: /* @__PURE__ */ jsx(ItemAvatar, { item })
+			}),
+			/* @__PURE__ */ jsx(L0ItemActiveTabIndicator, {}),
+			/* @__PURE__ */ jsx("span", {
+				id: `${item.id}__label`,
+				className: "sr-only",
+				children: localizedString
+			}),
+			closestEdge && /* @__PURE__ */ jsx(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__ */ jsx(Icon, {
+			icon: item.properties.icon,
+			size: 6,
+			...hueFgStyle
+		});
+	}
+	if (l0ItemType(item) === "tab" && item.properties.disposition !== "pin-end") return /* @__PURE__ */ jsx(DxAvatar, {
+		hue: item.properties.hue ?? null,
+		hueVariant: "surface",
+		variant: "square",
+		size: 12,
+		fallback: toLocalizedString(item.properties.label, t)
+	});
+	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) => {
+		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__ */ jsxs(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) dx-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)]"
+		],
+		children: [
+			/* @__PURE__ */ jsxs(Menu.Root, {
+				onAction: handleAction,
+				children: [/* @__PURE__ */ jsx(Menu.Trigger, {
+					asChild: true,
+					"data-testid": "spacePlugin.addSpace",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "grid place-items-center",
+						children: /* @__PURE__ */ jsx(IconButton, {
+							density: "lg",
+							variant: "ghost",
+							size: 5,
+							icon: "ph--list--regular",
+							iconOnly: true,
+							square: true,
+							label: t("app-menu.label")
+						})
+					})
+				}), /* @__PURE__ */ jsx(Menu.Content, {
+					group: parent,
+					items: menuActions
+				})]
+			}),
+			/* @__PURE__ */ jsx(ScrollArea.Root, {
+				centered: true,
+				thin: true,
+				orientation: "vertical",
+				children: /* @__PURE__ */ jsx(ScrollArea.Viewport, {
+					classNames: "flex flex-col gap-2 py-1",
+					children: topLevelItems.map((item) => /* @__PURE__ */ jsx(L0Item, {
+						item,
+						parent,
+						path,
+						onItemHover,
+						...hasRearrangeableItems && { onRearrange: handleRearrange }
+					}, item.id))
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "grid grid-cols-1 auto-rows-(--dx-rail-action) pt-2",
+				children: pinnedItems.map((item) => /* @__PURE__ */ jsx(L0Item, {
+					item,
+					parent,
+					path,
+					pinned: true
+				}, item.id))
+			}),
+			userAccountItem && /* @__PURE__ */ jsx("div", {
+				className: "grid dx-app-no-drag",
+				children: /* @__PURE__ */ jsx(L0ItemRoot, {
+					item: userAccountItem,
+					parent,
+					path,
+					children: /* @__PURE__ */ jsx(UserAccountAvatar, {
+						userId: userAccountItem.properties.userId,
+						hue: userAccountItem.properties.hue,
+						emoji: userAccountItem.properties.emoji,
+						status: userAccountItem.properties.status,
+						size: 10
+					})
+				}, userAccountItem.id)
+			})
+		]
+	});
+};
+//#endregion
+//#region src/components/NavTreeItem/NavTreeItemAction.tsx
+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 } = useTranslation(meta.profile.key);
+	const density = useDensityContext();
+	const runAction = useActionRunner();
+	const handleAction = useCallback((action, params = {}) => runAction(action, {
+		...params,
+		path
+	}), [runAction, path]);
+	return /* @__PURE__ */ jsxs(Menu.Root, {
+		caller,
+		onAction: handleAction,
+		children: [/* @__PURE__ */ jsx(Menu.Trigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(IconButton, {
+				...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: toLocalizedString(label, t),
+				"data-testid": testId,
+				ref: forwardedRef
+			})
+		}), /* @__PURE__ */ jsx(Menu.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 = useActionRunner();
+	return /* @__PURE__ */ jsx(IconButton, {
+		...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;
+			runAction(props, caller ? {
+				parent,
+				caller,
+				path
+			} : {
+				parent,
+				path
+			});
+		},
+		"data-testid": testId
+	});
+};
+//#endregion
+//#region src/components/NavTreeItem/NavTreeItemColumns.tsx
+var NavTreeItemColumns = memo(({ path, item, open }) => {
+	const { t } = useTranslation(meta.profile.key);
+	const { renderItemEnd: ItemEnd, popoverAnchorId } = useNavTreeContext();
+	const level = path.length - 2;
+	const flattenedActions = useActions$1(item);
+	const allActions = useMemo(() => getListActions(flattenedActions), [flattenedActions]);
+	const anchored = popoverAnchorId === `${NAV_TREE_ITEM}:${item.id}`;
+	const ActionRoot = anchored ? Popover.Anchor : Fragment;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "contents dx-app-no-drag",
+		...anchored && { "data-popover-anchor": "" },
+		children: [/* @__PURE__ */ jsx(ActionRoot, { children: allActions.length === 1 ? /* @__PURE__ */ jsx(Treegrid.Cell, {
+			classNames: "contents",
+			children: /* @__PURE__ */ jsx(NavTreeItemMonolithicAction, {
+				baseLabel: toLocalizedString(allActions[0].properties?.label, t),
+				parent: item,
+				path,
+				...allActions[0]
+			})
+		}) : allActions.length > 1 ? /* @__PURE__ */ jsx(Treegrid.Cell, {
+			classNames: "contents",
+			children: /* @__PURE__ */ jsx(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__ */ jsx(Treegrid.Cell, {}) }), ItemEnd && /* @__PURE__ */ jsx(Treegrid.Cell, {
+			classNames: "contents",
+			children: /* @__PURE__ */ jsx(ItemEnd, {
+				node: item,
+				open
+			})
+		})]
+	});
+});
+//#endregion
+//#region src/components/Sidebar/L1Panel.tsx
+/**
+* Delay before the unavailable-workspace message appears: a workspace whose space is still loading has
+* no graph node yet and materializes into a real panel on its own, so it must not flash during that window.
+*/
+var RENDER_DELAY = "1s";
+/**
+* Space or settings panel. Without an `item` — a link to a workspace this identity never had or which no
+* longer exists, or persisted deck state pointing at one after a profile switch — the panel body is the
+* unavailable-workspace message, so the sidebar is never blank.
+*/
+var L1PanelInner = ({ open, path, id, item, isCurrent, onBack }) => {
+	const { t } = useTranslation(meta.profile.key);
+	const title = item ? toLocalizedString(item.properties.label, t) : t("workspace-unavailable.heading");
+	const isActivated = useIsActivatedWorkspace(id);
+	const shouldRenderContent = isCurrent || isActivated;
+	return /* @__PURE__ */ jsx(Tabs.Panel, {
+		value: 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,
+		...!item && { "aria-labelledby": void 0 },
+		...isCurrent && { "data-testid": item ? "navtree.workspace.visible" : "navtree.workspace.unavailable" },
+		...!open && { inert: true },
+		children: shouldRenderContent && (item ? /* @__PURE__ */ jsx(L1PanelContent, {
+			open,
+			path,
+			item,
+			onBack
+		}) : /* @__PURE__ */ jsx(Empty, {
+			label: t("workspace-unavailable.description"),
+			classNames: "row-start-2 self-start animate-fade-in",
+			style: {
+				animationDelay: RENDER_DELAY,
+				animationFillMode: "backwards"
+			}
+		}))
+	}, id);
+};
+/** Determines whether a workspace tab has been populated with real child content (i.e. expanded at least once). */
+var useIsActivatedWorkspace = (id) => {
+	const { graph } = useAppGraph();
+	const edges = useEdges(graph, id);
+	return useMemo(() => {
+		return (edges[Graph.relationKey("child")] ?? []).some((childId) => {
+			const child = Graph.getNode(graph, childId);
+			if (Option.isNone(child)) return false;
+			return child.value.properties.disposition === void 0;
+		});
+	}, [edges, graph]);
+};
+/**
+* Mounted panel content for active or previously-visited tabs.
+*/
+var L1PanelContent = ({ path, item, onBack }) => {
+	const navTreeContext = useNavTreeContext();
+	return /* @__PURE__ */ jsxs(DensityProvider, {
+		density: "md",
+		children: [/* @__PURE__ */ jsx(L1PanelHeader, {
+			path,
+			item,
+			onBack
+		}), /* @__PURE__ */ jsx(ScrollArea.Root, {
+			centered: true,
+			thin: true,
+			orientation: "vertical",
+			children: /* @__PURE__ */ jsx(ScrollArea.Viewport, { children: /* @__PURE__ */ jsx(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
+			}) })
+		})]
+	});
+};
+/**
+* Header row.
+*/
+var L1PanelHeader = ({ item, path, onBack }) => {
+	const { t } = useTranslation(meta.profile.key);
+	const { renderItemEnd: ItemEnd } = useNavTreeContext();
+	const title = toLocalizedString(item.properties.label, t);
+	const backCapableWorkspace = GraphPath.isPinnedWorkspace(item.id);
+	const { menuActions, onAction } = useL1MenuActions({
+		item,
+		path
+	});
+	useLoadDescendents(item);
+	return /* @__PURE__ */ jsxs("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",
+		children: [
+			backCapableWorkspace ? /* @__PURE__ */ jsx(IconButton, {
+				classNames: [hoverableControlItem, hoverableOpenControlItem],
+				variant: "ghost",
+				icon: "ph--caret-left--regular",
+				iconOnly: true,
+				size: 4,
+				label: t("button-back.button"),
+				"data-testid": "treeView.primaryTreeButton",
+				onClick: () => onBack?.()
+			}) : /* @__PURE__ */ jsx("div", {}),
+			/* @__PURE__ */ jsx("h2", {
+				"data-tauri-drag-region": true,
+				className: "flex-1 truncate min-w-0",
+				children: title
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "contents dx-app-no-drag",
+				children: [/* @__PURE__ */ jsx(MenuActions, {
+					item,
+					menuActions,
+					onAction
+				}), ItemEnd && /* @__PURE__ */ jsx(ItemEnd, {
+					node: item,
+					open: true
+				})]
+			})
+		]
+	});
+};
+/**
+* Header menu actions for an L1 workspace tab. Renders nothing for an empty
+* `menuActions`, a single inline icon button for one action, and a
+* `…`-menu trigger for multiple.
+*/
+var MenuActions = ({ item, menuActions, onAction }) => {
+	const { t } = useTranslation(meta.profile.key);
+	if (menuActions.length === 0) return null;
+	if (menuActions.length === 1) return /* @__PURE__ */ jsx(IconButton, {
+		classNames: [
+			"shrink-0 px-2 pointer-fine:px-1",
+			hoverableControlItem,
+			hoverableOpenControlItem
+		],
+		variant: "ghost",
+		icon: menuActions[0].properties?.icon ?? "ph--circle-dashed--regular",
+		iconOnly: true,
+		size: 4,
+		label: toLocalizedString(menuActions[0].properties?.label, t),
+		"data-testid": menuActions[0].properties?.testId,
+		onClick: () => onAction(menuActions[0])
+	});
+	return /* @__PURE__ */ jsxs(Menu.Root, {
+		caller: NAV_TREE_ITEM,
+		onAction,
+		children: [/* @__PURE__ */ jsx(Menu.Trigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(IconButton, {
+				classNames: [
+					"shrink-0 px-2 pointer-fine:px-1",
+					hoverableControlItem,
+					hoverableOpenControlItem
+				],
+				variant: "ghost",
+				icon: "ph--dots-three-vertical--regular",
+				iconOnly: true,
+				size: 4,
+				label: t("tree-item-actions.label"),
+				"data-testid": "navtree.treeItem.actionsLevel0"
+			})
+		}), /* @__PURE__ */ jsx(Menu.Content, {
+			group: item,
+			items: menuActions
+		})]
+	});
+};
+/**
+* Builds the menu actions for the L1 panel header.
+*/
+var useL1MenuActions = ({ item, path }) => {
+	const runAction = useActionRunner();
+	return {
+		menuActions: getListActions(useActions$1(item)),
+		onAction: useCallback((action, params) => {
+			runAction(action, {
+				...params,
+				path
+			});
+		}, [runAction, path])
+	};
+};
+var L1Panel = memo(L1PanelInner);
+//#endregion
+//#region src/components/Sidebar/L1Tabs.tsx
+/**
+* Each workspace is an L1 tab.
+*/
+var L1Tabs = ({ topLevelItems, currentItemId, onBack, open, path }) => {
+	const hasCurrentPanel = topLevelItems.some((item) => item.id === currentItemId && l0ItemType(item) === "tab");
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [topLevelItems.map((item) => {
+		if (l0ItemType(item) === "tab") return /* @__PURE__ */ jsx(L1Panel, {
+			id: item.id,
+			item,
+			path,
+			open,
+			onBack,
+			isCurrent: item.id === currentItemId
+		}, item.id);
+		return null;
+	}), !hasCurrentPanel && /* @__PURE__ */ jsx(L1Panel, {
+		id: currentItemId,
+		path,
+		open,
+		isCurrent: true
+	}, currentItemId)] });
+};
+//#endregion
+//#region src/components/NavTree/NavTree.tsx
+var NAV_TREE_ITEM = "NavTreeItem";
+var NavTree = forwardRef(({ id, root, tab, ...props }, forwardedRef) => {
+	const { onBack, onItemHover } = useNavTreeContext();
+	const { topLevelActions, l0Items, pinnedItems, userAccountItem, topLevelItems } = useTopLevelNavItems(root);
+	useLoadDescendents(root);
+	const path = useMemo(() => [id], [id]);
+	return /* @__PURE__ */ jsxs(Tabs.Root, {
+		value: tab,
+		orientation: "vertical",
+		classNames: "relative",
+		ref: forwardedRef,
+		children: [/* @__PURE__ */ jsx(L0Menu, {
+			menuActions: topLevelActions,
+			topLevelItems: l0Items,
+			pinnedItems,
+			userAccountItem,
+			path,
+			parent: root,
+			onItemHover
+		}), /* @__PURE__ */ jsx(L1Tabs, {
+			topLevelItems,
+			path,
+			currentItemId: tab,
+			onBack,
+			...props
+		})]
+	});
+});
+/**
+* Partitions root children into workspaces, pinned items, user-account, and top-level actions.
+*/
+var useTopLevelNavItems = (root) => {
+	const { graph } = useAppGraph();
+	const rootId = root?.id ?? Node.RootId;
+	const rootOutboundItems = useConnections(graph, rootId, "child");
+	const rootActions = useActions(graph, rootId);
+	const { topLevelActions, l0Items, pinnedItems, userAccountItem } = useMemo(() => {
+		const topLevelWorkspaces = [];
+		const outboundPinnedItems = [];
+		let userAccountItem;
+		for (const node of rootOutboundItems) if (Node.hasDisposition(node, "workspace")) topLevelWorkspaces.push(node);
+		else if (Node.hasDisposition(node, "pin-end")) outboundPinnedItems.push(node);
+		else if (Node.hasDisposition(node, "user-account")) userAccountItem ??= node;
+		const topLevelActions = rootActions.filter((action) => Node.hasDisposition(action, "menu")).toSorted((a, b) => Position.compare(a.properties, b.properties));
+		return {
+			pinnedItems: [...outboundPinnedItems, ...rootActions.filter((action) => Node.hasDisposition(action, "pin-end"))].toSorted((a, b) => Position.compare(a.properties, b.properties)),
+			topLevelActions,
+			userAccountItem,
+			l0Items: topLevelWorkspaces
+		};
+	}, [rootActions, rootOutboundItems]);
+	return {
+		topLevelActions,
+		l0Items,
+		pinnedItems,
+		userAccountItem,
+		topLevelItems: useMemo(() => [
+			...l0Items,
+			...pinnedItems,
+			...userAccountItem ? [userAccountItem] : []
+		], [
+			l0Items,
+			pinnedItems,
+			userAccountItem
+		])
+	};
+};
+//#endregion
+export { NAV_TREE_ITEM, NavTree, NavTreeContext, useNavTreeContext };
+
+//# sourceMappingURL=components.mjs.map