@dxos/plugin-simple-layout 0.8.4-main.52d7546f51 → 0.8.4-main.6fa680abb7

package/dist/lib/browser/{chunk-O3BQBYMW.mjs → chunk-MDPEKLKR.mjs}

@@ -1,7 +1,7 @@
 import {
   SimpleLayoutState,
   meta
-} from "./chunk-7VLT3S46.mjs";
+} from "./chunk-MRR7PXSM.mjs";
 
 // src/components/Home/Home.tsx
 import React, { useCallback, useEffect as useEffect2, useMemo, useRef } from "react";
@@ -9,24 +9,25 @@ import { useOperationInvoker } from "@dxos/app-framework/ui";
 import { LayoutOperation } from "@dxos/app-toolkit";
 import { useAppGraph as useAppGraph2 } from "@dxos/app-toolkit/ui";
 import { Node, useConnections } from "@dxos/plugin-graph";
-import { Avatar, Icon, Layout, ScrollArea, Toolbar, toLocalizedString, useTranslation } from "@dxos/react-ui";
-import { Card, Mosaic } from "@dxos/react-ui-mosaic";
+import { Avatar, Icon, Panel, ScrollArea, Toolbar, toLocalizedString, useTranslation } from "@dxos/react-ui";
+import { Card } from "@dxos/react-ui";
+import { Mosaic } from "@dxos/react-ui-mosaic";
 import { SearchList, useSearchListItem, useSearchListResults } from "@dxos/react-ui-searchlist";
 import { mx } from "@dxos/ui-theme";
 import { byPosition } from "@dxos/util";
 
 // src/components/hooks.ts
 import { useEffect } from "react";
+import { expandAttendableId } from "@dxos/react-ui-attention";
 import { useAppGraph } from "@dxos/app-toolkit/ui";
 import { Graph } from "@dxos/plugin-graph";
-var useLoadDescendents = (nodeId) => {
+var useExpandPath = (nodeId) => {
   const { graph } = useAppGraph();
   useEffect(() => {
     if (nodeId) {
-      Graph.expand(graph, nodeId, "outbound");
-      Graph.getConnections(graph, nodeId, "outbound").forEach((child) => {
-        Graph.expand(graph, child.id, "outbound");
-      });
+      for (const prefix of expandAttendableId(nodeId)) {
+        Graph.expand(graph, prefix, "child");
+      }
     }
   }, [
     nodeId,
@@ -40,7 +41,7 @@ var Home = (_) => {
   const userAccountItem = useItemsByDisposition("user-account")[0];
   const pinnedItems = useItemsByDisposition("pin-end", true);
   const workspaceItems = useItemsByDisposition("workspace");
-  useLoadDescendents(Node.RootId);
+  useExpandPath(Node.RootId);
   const items = useMemo(() => [
     ...userAccountItem ? [
       userAccountItem
@@ -56,14 +57,16 @@ var Home = (_) => {
     items,
     extract: (node) => toLocalizedString(node.properties.label, t)
   });
-  return /* @__PURE__ */ React.createElement(Layout.Main, {
-    toolbar: true
-  }, /* @__PURE__ */ React.createElement(SearchList.Root, {
+  return /* @__PURE__ */ React.createElement(SearchList.Root, {
     onSearch: handleSearch
+  }, /* @__PURE__ */ React.createElement(Panel.Root, null, /* @__PURE__ */ React.createElement(Panel.Toolbar, {
+    asChild: true
   }, /* @__PURE__ */ React.createElement(Toolbar.Root, null, /* @__PURE__ */ React.createElement(SearchList.Input, {
     placeholder: t("search placeholder"),
     autoFocus: true
-  })), /* @__PURE__ */ React.createElement(SearchList.Content, null, /* @__PURE__ */ React.createElement(Mosaic.Container, {
+  }))), /* @__PURE__ */ React.createElement(Panel.Content, {
+    asChild: true
+  }, /* @__PURE__ */ React.createElement(SearchList.Content, null, /* @__PURE__ */ React.createElement(Mosaic.Container, {
     asChild: true
   }, /* @__PURE__ */ React.createElement(ScrollArea.Root, {
     orientation: "vertical"
@@ -73,16 +76,17 @@ var Home = (_) => {
     items: results,
     getId: (node) => node.id,
     Tile: WorkspaceTile
-  })))))));
+  }))))))));
 };
-var WorkspaceTile = ({ data }) => {
+var WorkspaceTile = (props) => {
+  const data = props.data;
   const { t } = useTranslation(meta.id);
   const { invokePromise } = useOperationInvoker();
   const { selectedValue, registerItem, unregisterItem } = useSearchListItem();
   const name = toLocalizedString(data.properties.label, t);
   const isSelected = selectedValue === data.id;
   const cardRef = useRef(null);
-  useLoadDescendents(data.id);
+  useExpandPath(data.id);
   const handleSelect = useCallback(() => invokePromise(LayoutOperation.SwitchWorkspace, {
     subject: data.id
   }), [
@@ -115,7 +119,7 @@ var WorkspaceTile = ({ data }) => {
     fullWidth: true,
     tabIndex: -1,
     "data-selected": isSelected,
-    classNames: mx("dx-focus-ring", isSelected && "bg-hoverOverlay"),
+    classNames: mx("dx-focus-ring", isSelected && "bg-hover-overlay"),
     onClick: handleSelect,
     ref: cardRef
   }, /* @__PURE__ */ React.createElement(Card.Toolbar, {
@@ -136,13 +140,13 @@ var filterItems = (node, disposition) => {
 };
 var useItemsByDisposition = (disposition, sort = false) => {
   const { graph } = useAppGraph2();
-  const connections = useConnections(graph, Node.RootId);
+  const connections = useConnections(graph, Node.RootId, "child");
   const filtered = connections.filter((node) => filterItems(node, disposition));
   return sort ? filtered.toSorted((a, b) => byPosition(a.properties, b.properties)) : filtered;
 };
 
 // src/components/SimpleLayout/SimpleLayout.tsx
-import React12, { useEffect as useEffect6, useRef as useRef4, useState as useState3 } from "react";
+import React11, { useEffect as useEffect6, useRef as useRef4, useState as useState3 } from "react";
 import { Splitter } from "@dxos/react-ui";
 import { Mosaic as Mosaic3 } from "@dxos/react-ui-mosaic";
 
@@ -178,9 +182,10 @@ var useAppBarProps = () => {
     const nodes = filtered;
     const edges = filtered.map((action) => ({
       source: "root",
-      target: action.id
+      target: action.id,
+      relation: "child"
     }));
-    const workspaceConnections = state2.workspace ? get(graph.connections(state2.workspace)) : [];
+    const workspaceConnections = state2.workspace ? get(graph.connections(state2.workspace, "child")) : [];
     const alternateTreeNode = workspaceConnections.find((node2) => node2.properties.disposition === "alternate-tree");
     if (alternateTreeNode && activeId2 !== alternateTreeNode.id) {
       const settingsAction = {
@@ -199,7 +204,8 @@ var useAppBarProps = () => {
       nodes.push(settingsAction);
       edges.push({
         source: "root",
-        target: settingsAction.id
+        target: settingsAction.id,
+        relation: "child"
       });
     }
     return {
@@ -236,7 +242,7 @@ var useAppBarProps = () => {
     state.active,
     state.history.length
   ]);
-  const popoverAnchorId = node && state.popoverAnchorId === `dxos.org/ui/${meta.id}/${node.id}` ? state.popoverAnchorId : void 0;
+  const popoverAnchorId = node && state.popoverAnchorId === `${meta.id}:${node.id}` ? state.popoverAnchorId : void 0;
   return {
     title,
     actions: actionsAtom,
@@ -255,21 +261,20 @@ import { byPosition as byPosition3 } from "@dxos/util";
 
 // src/hooks/actions.ts
 import * as Effect2 from "effect/Effect";
-import { LayoutOperation as LayoutOperation3 } from "@dxos/app-toolkit";
+import { getCompanionVariant } from "@dxos/app-toolkit";
 import { Node as Node3 } from "@dxos/plugin-graph";
-import { ATTENDABLE_PATH_SEPARATOR } from "@dxos/react-ui-attention";
 import { byPosition as byPosition2 } from "@dxos/util";
-var PLANK_COMPANION_TYPE = "dxos.org/plugin/deck/plank-companion";
+var PLANK_COMPANION_TYPE = "org.dxos.plugin.deck.plank-companion";
 var createCompanionActions = (graph, stateAtom, get, config) => {
-  const { idPrefix, selectedVariant, invokeSync } = config;
+  const { idPrefix, selectedVariant, updateState } = config;
   const state = get(stateAtom);
   const activeId = state.active ?? state.workspace;
-  const activeConnections = activeId ? get(graph.connections(activeId)) : [];
+  const activeConnections = activeId ? get(graph.connections(activeId, "child")) : [];
   const companions = activeConnections.filter((node) => node.type === PLANK_COMPANION_TYPE).toSorted((a, b) => byPosition2(a.properties, b.properties));
   const nodes = [];
   const edges = [];
   companions.forEach((companion) => {
-    const [, companionVariant] = companion.id.split(ATTENDABLE_PATH_SEPARATOR);
+    const companionVariant = getCompanionVariant(companion.id);
     const companionAction = {
       id: `${idPrefix}-companion-${companion.id}`,
       type: Node3.ActionType,
@@ -277,21 +282,24 @@ var createCompanionActions = (graph, stateAtom, get, config) => {
         icon: companion.properties.icon ?? "ph--placeholder--regular",
         label: companion.properties.label,
         iconOnly: true,
-        // Conditionally add variant highlighting.
         ...selectedVariant !== void 0 && {
           variant: selectedVariant === companionVariant ? "primary" : "ghost"
         }
       },
-      data: () => Effect2.sync(() => invokeSync(LayoutOperation3.Open, {
-        subject: [
-          companion.id
-        ]
+      data: () => Effect2.sync(() => updateState((current) => {
+        const closing = current.companionVariant === companionVariant && current.drawerState !== "closed";
+        return {
+          ...current,
+          companionVariant: closing ? void 0 : companionVariant,
+          drawerState: closing ? "closed" : "open"
+        };
       }))
     };
     nodes.push(companionAction);
     edges.push({
       source: "root",
-      target: companionAction.id
+      target: companionAction.id,
+      relation: "child"
     });
   });
   return {
@@ -303,7 +311,7 @@ var createCompanionActions = (graph, stateAtom, get, config) => {
 // src/hooks/useCompanions.ts
 var useCompanions = (nodeId) => {
   const { graph } = useAppGraph4();
-  const nodes = useConnections2(graph, nodeId);
+  const nodes = useConnections2(graph, nodeId, "child");
   const companions = nodes.filter((node) => node.type === PLANK_COMPANION_TYPE);
   return useMemo3(() => companions.toSorted((a, b) => byPosition3(a.properties, b.properties)), [
     companions
@@ -313,19 +321,19 @@ var useCompanions = (nodeId) => {
 // src/hooks/useDrawerActions.ts
 import { Atom as Atom2 } from "@effect-atom/atom-react";
 import * as Effect3 from "effect/Effect";
-import { useMemo as useMemo6 } from "react";
-import { useCapability as useCapability3, useOperationInvoker as useOperationInvoker4 } from "@dxos/app-framework/ui";
+import { useMemo as useMemo7 } from "react";
+import { useCapability as useCapability3 } from "@dxos/app-framework/ui";
 import { useAppGraph as useAppGraph7 } from "@dxos/app-toolkit/ui";
 import { Node as Node4, useActionRunner as useActionRunner2 } from "@dxos/plugin-graph";
-import { useTranslation as useTranslation7 } from "@dxos/react-ui";
+import { useTranslation as useTranslation6 } from "@dxos/react-ui";
 import { createGapSeparator } from "@dxos/react-ui-menu";
 
-// src/components/ContentLoading.tsx
+// src/components/ContentLoading/ContentLoading.tsx
 import React2 from "react";
 var ContentLoading = () => {
   return /* @__PURE__ */ React2.createElement("div", {
     role: "none",
-    className: "grid place-items-center attention-surface"
+    className: "grid place-items-center dx-attention-surface"
   });
 };
 
@@ -354,7 +362,7 @@ var MobileLayoutRoot = /* @__PURE__ */ forwardRef(({ classNames, children, trans
     ...props,
     role: "none",
     style: {
-      transition: `block-size ${transition}ms ease-out`,
+      transition: `h-size ${transition}ms ease-out`,
       blockSize: "calc(100vh - var(--kb-height, 0px))"
     },
     className: mx2("absolute top-0 left-0 right-0 flex flex-col", classNames),
@@ -370,7 +378,7 @@ var MobileLayoutPanel = /* @__PURE__ */ forwardRef(({ classNames, children, safe
       paddingTop: safe?.top ? "env(safe-area-inset-top)" : void 0,
       paddingBottom: safe?.bottom ? `calc((1 - var(--kb-open, 0)) * env(safe-area-inset-bottom))` : void 0
     },
-    className: mx2("relative bs-full flex flex-col overflow-hidden", classNames),
+    className: mx2("relative h-full flex flex-col overflow-hidden", classNames),
     ref: forwardedRef
   }, children);
 });
@@ -510,8 +518,9 @@ var useIOSKeyboard = () => {
 import { createContext as createContext2 } from "@radix-ui/react-context";
 import React4, { useCallback as useCallback3, useEffect as useEffect4, useMemo as useMemo4, useRef as useRef2, useState as useState2 } from "react";
 import { Surface } from "@dxos/app-framework/ui";
+import { useObjectNavigate } from "@dxos/app-toolkit/ui";
 import { Popover, toLocalizedString as toLocalizedString3, useTranslation as useTranslation3 } from "@dxos/react-ui";
-import { Card as Card2 } from "@dxos/react-ui-mosaic";
+import { Card as Card2 } from "@dxos/react-ui";
 var DEBOUNCE_DELAY = 40;
 var [LayoutPopoverProvider, useLayoutPopoverContext] = createContext2("LayoutPopover");
 var PopoverRoot = ({ children }) => {
@@ -548,10 +557,12 @@ var PopoverRoot = ({ children }) => {
     virtualRef
   }), children));
 };
+var getPopoverSubject = (content) => content && typeof content === "object" && "subject" in content ? content.subject : content;
 var PopoverContent = () => {
   const { t } = useTranslation3(meta.id);
   const { state, updateState } = useSimpleLayoutState();
   const { setOpen } = useLayoutPopoverContext("PopoverContent");
+  const handleNavigate = useObjectNavigate(getPopoverSubject(state.popoverContent));
   const handleClose = useCallback3(() => {
     setOpen(false);
     updateState((s) => ({
@@ -598,8 +609,10 @@ var PopoverContent = () => {
     limit: 1
   }), state.popoverKind === "card" && /* @__PURE__ */ React4.createElement(Card2.Root, {
     border: false,
-    classNames: "popover-card-max-width"
-  }, /* @__PURE__ */ React4.createElement(Card2.Toolbar, null, /* @__PURE__ */ React4.createElement("span", null), state.popoverTitle ? /* @__PURE__ */ React4.createElement(Card2.Title, null, toLocalizedString3(state.popoverTitle, t)) : /* @__PURE__ */ React4.createElement("span", null), /* @__PURE__ */ React4.createElement(Card2.Close, {
+    classNames: "dx-card-popover"
+  }, /* @__PURE__ */ React4.createElement(Card2.Toolbar, null, /* @__PURE__ */ React4.createElement("span", null), state.popoverTitle ? /* @__PURE__ */ React4.createElement(Card2.Title, {
+    onClick: handleNavigate
+  }, toLocalizedString3(state.popoverTitle, t)) : /* @__PURE__ */ React4.createElement("span", null), /* @__PURE__ */ React4.createElement(Card2.CloseIconButton, {
     onClick: handleClose
   })), /* @__PURE__ */ React4.createElement(Surface.Surface, {
     role: "card--content",
@@ -612,7 +625,7 @@ var PopoverContent = () => {
 import { useAtomValue as useAtomValue2 } from "@effect-atom/atom-react";
 import React5, { Fragment } from "react";
 import { IconButton, Popover as Popover2, Toolbar as Toolbar2, useTranslation as useTranslation4 } from "@dxos/react-ui";
-import { DropdownMenu, MenuProvider, useMenuActions } from "@dxos/react-ui-menu";
+import { Menu, useMenuActions } from "@dxos/react-ui-menu";
 import { mx as mx3, osTranslations } from "@dxos/ui-theme";
 var APP_BAR_NAME = "SimpleLayout.AppBar";
 var AppBar = ({ classNames, title, actions, showBackButton, popoverAnchorId, onAction, onBack }) => {
@@ -627,7 +640,7 @@ var AppBar = ({ classNames, title, actions, showBackButton, popoverAnchorId, onA
   const AnchorRoot = popoverAnchorId ? Popover2.Anchor : Fragment;
   return /* @__PURE__ */ React5.createElement(Toolbar2.Root, {
     role: "banner",
-    classNames: mx3("grid grid-cols-[var(--rail-size)_1fr_var(--rail-size)] bs-[var(--rail-action)] items-center", "density-fine", classNames)
+    classNames: mx3("grid grid-cols-[var(--dx-rail-size)_1fr_var(--dx-rail-size)] items-center", "dx-density-fine", classNames)
   }, keyboardOpen ? /* @__PURE__ */ React5.createElement(IconButton, {
     variant: "ghost",
     icon: "ph--x--regular",
@@ -641,60 +654,44 @@ var AppBar = ({ classNames, title, actions, showBackButton, popoverAnchorId, onA
     onClick: onBack
   }) : /* @__PURE__ */ React5.createElement("div", null), /* @__PURE__ */ React5.createElement("h1", {
     className: "text-center truncate font-thin uppercase"
-  }, displayTitle), hasActions ? /* @__PURE__ */ React5.createElement(AnchorRoot, null, /* @__PURE__ */ React5.createElement(MenuProvider, {
+  }, displayTitle), hasActions ? /* @__PURE__ */ React5.createElement(AnchorRoot, null, /* @__PURE__ */ React5.createElement(Menu.Root, {
     ...menu,
+    caller: meta.id,
     onAction
-  }, /* @__PURE__ */ React5.createElement(DropdownMenu.Root, {
-    caller: meta.id
-  }, /* @__PURE__ */ React5.createElement(DropdownMenu.Trigger, {
+  }, /* @__PURE__ */ React5.createElement(Menu.Trigger, {
     asChild: true
   }, /* @__PURE__ */ React5.createElement(IconButton, {
     variant: "ghost",
     icon: "ph--dots-three-vertical--regular",
     iconOnly: true,
     label: t("actions menu label")
-  }))))) : /* @__PURE__ */ React5.createElement("span", null));
+  })), /* @__PURE__ */ React5.createElement(Menu.Content, null))) : /* @__PURE__ */ React5.createElement("span", null));
 };
 AppBar.displayName = APP_BAR_NAME;
 
 // src/components/SimpleLayout/Main.tsx
-import React8, { useMemo as useMemo5 } from "react";
+import React7, { useMemo as useMemo5 } from "react";
 import { Surface as Surface2 } from "@dxos/app-framework/ui";
 import { useAppGraph as useAppGraph5 } from "@dxos/app-toolkit/ui";
 import { useNode as useNode2 } from "@dxos/plugin-graph";
+import { ErrorFallback } from "@dxos/react-ui";
 import { useAttentionAttributes } from "@dxos/react-ui-attention";
-import { mx as mx6 } from "@dxos/ui-theme";
-
-// src/components/ContentError.tsx
-import React6 from "react";
-import { useTranslation as useTranslation5 } from "@dxos/react-ui";
-import { descriptionMessage, mx as mx4 } from "@dxos/ui-theme";
-var ContentError = ({ error }) => {
-  const { t } = useTranslation5(meta.id);
-  const errorString = error?.toString() ?? "";
-  return /* @__PURE__ */ React6.createElement("div", {
-    role: "none",
-    className: "grid place-items-center overflow-y-auto attention-surface"
-  }, /* @__PURE__ */ React6.createElement("p", {
-    role: "alert",
-    className: mx4(descriptionMessage, "p-2 break-all rounded-sm")
-  }, error ? errorString : t("error fallback message")));
-};
+import { mx as mx5 } from "@dxos/ui-theme";
 
 // src/components/SimpleLayout/NavBar.tsx
-import React7 from "react";
-import { MenuProvider as MenuProvider2, ToolbarMenu, useMenuActions as useMenuActions2 } from "@dxos/react-ui-menu";
-import { mx as mx5 } from "@dxos/ui-theme";
+import React6 from "react";
+import { Menu as Menu2, useMenuActions as useMenuActions2 } from "@dxos/react-ui-menu";
+import { mx as mx4 } from "@dxos/ui-theme";
 var NAVBAR_NAME = "SimpleLayout.NavBar";
 var NavBar = ({ classNames, actions, onAction }) => {
   const menu = useMenuActions2(actions);
-  return /* @__PURE__ */ React7.createElement(MenuProvider2, {
+  return /* @__PURE__ */ React6.createElement(Menu2.Root, {
     ...menu,
-    onAction,
-    alwaysActive: true
-  }, /* @__PURE__ */ React7.createElement(ToolbarMenu, {
+    alwaysActive: true,
+    onAction
+  }, /* @__PURE__ */ React6.createElement(Menu2.Toolbar, {
     density: "coarse",
-    classNames: mx5(classNames)
+    classNames: mx4(classNames)
   }));
 };
 NavBar.displayName = NAVBAR_NAME;
@@ -708,7 +705,7 @@ var Main = () => {
   const { keyboardOpen } = useMobileLayout(MAIN_NAME);
   const { actions, onAction } = useNavbarActions();
   const appBarProps = useAppBarProps();
-  const placeholder = useMemo5(() => /* @__PURE__ */ React8.createElement(ContentLoading, null), []);
+  const placeholder = useMemo5(() => /* @__PURE__ */ React7.createElement(ContentLoading, null), []);
   const { graph } = useAppGraph5();
   const node = useNode2(graph, id);
   const data = useMemo5(() => {
@@ -725,75 +722,82 @@ var Main = () => {
     node?.properties,
     state.popoverAnchorId
   ]);
-  useLoadDescendents(id);
+  useExpandPath(id);
   const showNavBar = !keyboardOpen && !state.isPopover && state.drawerState === "closed";
-  return /* @__PURE__ */ React8.createElement("div", {
+  return /* @__PURE__ */ React7.createElement("div", {
     role: "none",
-    className: mx6("bs-full grid overflow-hidden bg-toolbarSurface", showNavBar ? "grid-rows-[var(--rail-action)_1fr_var(--toolbar-size)]" : "grid-rows-[var(--rail-action)_1fr]"),
+    className: mx5("h-full grid overflow-hidden bg-toolbar-surface", showNavBar ? "grid-rows-[var(--dx-rail-action)_1fr_var(--dx-toolbar-size)]" : "grid-rows-[var(--dx-rail-action)_1fr]"),
     ...attentionAttrs
-  }, /* @__PURE__ */ React8.createElement(AppBar, appBarProps), /* @__PURE__ */ React8.createElement("article", {
-    className: "bs-full overflow-hidden bg-baseSurface"
-  }, /* @__PURE__ */ React8.createElement(Surface2.Surface, {
+  }, /* @__PURE__ */ React7.createElement(AppBar, appBarProps), /* @__PURE__ */ React7.createElement("article", {
+    className: "h-full overflow-hidden bg-base-surface"
+  }, /* @__PURE__ */ React7.createElement(Surface2.Surface, {
     key: id,
     role: "article",
     data,
     limit: 1,
-    fallback: ContentError,
+    fallback: ErrorFallback,
     placeholder
-  })), showNavBar && /* @__PURE__ */ React8.createElement(NavBar, {
-    classNames: "border-bs border-subduedSeparator",
+  })), showNavBar && /* @__PURE__ */ React7.createElement(NavBar, {
+    classNames: "border-y border-subdued-separator",
     actions,
     onAction
   }));
 };
 Main.displayName = MAIN_NAME;
 
-// src/components/Workspace/Workspace.tsx
-import React9, { useCallback as useCallback4, useEffect as useEffect5, useRef as useRef3 } from "react";
+// src/components/NavBranch/NavBranch.tsx
+import React8, { useCallback as useCallback4, useEffect as useEffect5, useMemo as useMemo6, useRef as useRef3 } from "react";
 import { useOperationInvoker as useOperationInvoker3 } from "@dxos/app-framework/ui";
-import { LayoutOperation as LayoutOperation4 } from "@dxos/app-toolkit";
+import { LayoutOperation as LayoutOperation3 } from "@dxos/app-toolkit";
 import { useAppGraph as useAppGraph6 } from "@dxos/app-toolkit/ui";
 import { useConnections as useConnections3 } from "@dxos/plugin-graph";
-import { Avatar as Avatar2, Icon as Icon2, Layout as Layout2, ScrollArea as ScrollArea2, Toolbar as Toolbar3, toLocalizedString as toLocalizedString4, useTranslation as useTranslation6 } from "@dxos/react-ui";
-import { Card as Card3, Mosaic as Mosaic2 } from "@dxos/react-ui-mosaic";
+import { Avatar as Avatar2, Icon as Icon2, Panel as Panel2, ScrollArea as ScrollArea2, Toolbar as Toolbar3, toLocalizedString as toLocalizedString4, useTranslation as useTranslation5 } from "@dxos/react-ui";
+import { Card as Card3 } from "@dxos/react-ui";
+import { Mosaic as Mosaic2 } from "@dxos/react-ui-mosaic";
 import { SearchList as SearchList2, useSearchListItem as useSearchListItem2, useSearchListResults as useSearchListResults2 } from "@dxos/react-ui-searchlist";
-import { mx as mx7 } from "@dxos/ui-theme";
-var Workspace = ({ id }) => {
-  const { t } = useTranslation6(meta.id);
+import { mx as mx6 } from "@dxos/ui-theme";
+var NavBranch = ({ id }) => {
+  const { t } = useTranslation5(meta.id);
   const { graph } = useAppGraph6();
-  useLoadDescendents(id);
-  const children = useConnections3(graph, id, "outbound");
+  useExpandPath(id);
+  const children = useConnections3(graph, id, "child");
+  const visibleChildren = useMemo6(() => children.filter((node) => node.properties.disposition !== "alternate-tree"), [
+    children
+  ]);
   const { results, handleSearch } = useSearchListResults2({
-    items: children,
+    items: visibleChildren,
     extract: (child) => toLocalizedString4(child.properties.label, t)
   });
-  return /* @__PURE__ */ React9.createElement(Layout2.Main, {
-    toolbar: true
-  }, /* @__PURE__ */ React9.createElement(SearchList2.Root, {
+  return /* @__PURE__ */ React8.createElement(SearchList2.Root, {
     onSearch: handleSearch
-  }, /* @__PURE__ */ React9.createElement(Toolbar3.Root, null, /* @__PURE__ */ React9.createElement(SearchList2.Input, {
+  }, /* @__PURE__ */ React8.createElement(Panel2.Root, null, /* @__PURE__ */ React8.createElement(Panel2.Toolbar, {
+    asChild: true
+  }, /* @__PURE__ */ React8.createElement(Toolbar3.Root, null, /* @__PURE__ */ React8.createElement(SearchList2.Input, {
     placeholder: t("search placeholder"),
     autoFocus: true
-  })), /* @__PURE__ */ React9.createElement(SearchList2.Content, null, /* @__PURE__ */ React9.createElement(Mosaic2.Container, {
+  }))), /* @__PURE__ */ React8.createElement(Panel2.Content, {
     asChild: true
-  }, /* @__PURE__ */ React9.createElement(ScrollArea2.Root, {
+  }, /* @__PURE__ */ React8.createElement(SearchList2.Content, null, /* @__PURE__ */ React8.createElement(Mosaic2.Container, {
+    asChild: true
+  }, /* @__PURE__ */ React8.createElement(ScrollArea2.Root, {
     orientation: "vertical"
-  }, /* @__PURE__ */ React9.createElement(ScrollArea2.Viewport, {
+  }, /* @__PURE__ */ React8.createElement(ScrollArea2.Viewport, {
     classNames: "p-2"
-  }, /* @__PURE__ */ React9.createElement(Mosaic2.Stack, {
+  }, /* @__PURE__ */ React8.createElement(Mosaic2.Stack, {
     items: results,
     getId: (child) => child.id,
-    Tile: WorkspaceChildTile
-  })))))));
+    Tile: NavBranchTile
+  }))))))));
 };
-var WorkspaceChildTile = ({ data }) => {
-  const { t } = useTranslation6(meta.id);
+var NavBranchTile = (props) => {
+  const data = props.data;
+  const { t } = useTranslation5(meta.id);
   const { invokeSync } = useOperationInvoker3();
   const ref = useRef3(null);
   const { selectedValue, registerItem, unregisterItem } = useSearchListItem2();
   const isSelected = selectedValue === data.id;
   const name = toLocalizedString4(data.properties.label, t);
-  const handleSelect = useCallback4(() => invokeSync(LayoutOperation4.Open, {
+  const handleSelect = useCallback4(() => invokeSync(LayoutOperation3.Open, {
     subject: [
       data.id
     ]
@@ -822,24 +826,24 @@ var WorkspaceChildTile = ({ data }) => {
   }, [
     isSelected
   ]);
-  return /* @__PURE__ */ React9.createElement(Card3.Root, {
+  return /* @__PURE__ */ React8.createElement(Card3.Root, {
     ref,
     role: "button",
     fullWidth: true,
     tabIndex: -1,
     "data-selected": isSelected,
-    classNames: mx7("dx-focus-ring", isSelected && "bg-hoverOverlay"),
+    classNames: mx6("dx-focus-ring", isSelected && "bg-hover-overlay"),
     onClick: handleSelect
-  }, /* @__PURE__ */ React9.createElement(Card3.Toolbar, {
+  }, /* @__PURE__ */ React8.createElement(Card3.Toolbar, {
     density: "coarse"
-  }, /* @__PURE__ */ React9.createElement(Avatar2.Root, null, /* @__PURE__ */ React9.createElement(Avatar2.Content, {
+  }, /* @__PURE__ */ React8.createElement(Avatar2.Root, null, /* @__PURE__ */ React8.createElement(Avatar2.Content, {
     hue: data.properties.hue,
     icon: data.properties.icon,
     hueVariant: "transparent",
     variant: "square",
     size: 12,
     fallback: name
-  }), /* @__PURE__ */ React9.createElement(Avatar2.Label, null, name), /* @__PURE__ */ React9.createElement(Icon2, {
+  }), /* @__PURE__ */ React8.createElement(Avatar2.Label, null, name), /* @__PURE__ */ React8.createElement(Icon2, {
     icon: "ph--caret-right--regular"
   }))));
 };
@@ -866,19 +870,18 @@ var useSimpleLayoutState = () => {
 
 // src/hooks/useDrawerActions.ts
 var useDrawerActions = (consumerName) => {
-  const { t } = useTranslation7(meta.id);
+  const { t } = useTranslation6(meta.id);
   const stateAtom = useCapability3(SimpleLayoutState);
   const { graph } = useAppGraph7();
   const runAction = useActionRunner2();
-  const { invokeSync } = useOperationInvoker4();
   const { updateState } = useSimpleLayoutState();
   const { keyboardOpen } = useMobileLayout(consumerName);
-  const actionsAtom = useMemo6(() => Atom2.make((get) => {
+  const actionsAtom = useMemo7(() => Atom2.make((get) => {
     const state = get(stateAtom);
     const { nodes, edges } = createCompanionActions(graph, stateAtom, get, {
       idPrefix: "drawer",
       selectedVariant: state.companionVariant,
-      invokeSync
+      updateState
     });
     const gapSeparator = createGapSeparator("drawer-gap");
     nodes.push(...gapSeparator.nodes);
@@ -901,7 +904,8 @@ var useDrawerActions = (consumerName) => {
       nodes.push(toggleExpandAction);
       edges.push({
         source: "root",
-        target: toggleExpandAction.id
+        target: toggleExpandAction.id,
+        relation: "child"
       });
     }
     const closeAction = {
@@ -914,13 +918,15 @@ var useDrawerActions = (consumerName) => {
       },
       data: () => Effect3.sync(() => updateState((state2) => ({
         ...state2,
-        drawerState: "closed"
+        drawerState: "closed",
+        companionVariant: void 0
       })))
     };
     nodes.push(closeAction);
     edges.push({
       source: "root",
-      target: closeAction.id
+      target: closeAction.id,
+      relation: "child"
     });
     return {
       nodes,
@@ -929,7 +935,6 @@ var useDrawerActions = (consumerName) => {
   }), [
     graph,
     stateAtom,
-    invokeSync,
     updateState,
     keyboardOpen,
     t
@@ -942,23 +947,23 @@ var useDrawerActions = (consumerName) => {
 
 // src/hooks/useNavbarActions.ts
 import { Atom as Atom3 } from "@effect-atom/atom-react";
-import { useMemo as useMemo7 } from "react";
-import { useCapability as useCapability4, useOperationInvoker as useOperationInvoker5 } from "@dxos/app-framework/ui";
+import { useMemo as useMemo8 } from "react";
+import { useCapability as useCapability4 } from "@dxos/app-framework/ui";
 import { useAppGraph as useAppGraph8 } from "@dxos/app-toolkit/ui";
 import { Node as Node5, useActionRunner as useActionRunner3 } from "@dxos/plugin-graph";
-import { useTranslation as useTranslation8 } from "@dxos/react-ui";
+import { useTranslation as useTranslation7 } from "@dxos/react-ui";
 import { createGapSeparator as createGapSeparator2, createMenuItemGroup } from "@dxos/react-ui-menu";
 var MAIN_MENU_GROUP_ID = "navbar-main-menu";
 var useNavbarActions = () => {
-  const { t } = useTranslation8(meta.id);
+  const { t } = useTranslation7(meta.id);
   const { graph } = useAppGraph8();
   const runAction = useActionRunner3();
-  const { invokeSync } = useOperationInvoker5();
   const stateAtom = useCapability4(SimpleLayoutState);
-  const actionsAtom = useMemo7(() => Atom3.make((get) => {
+  const { updateState } = useSimpleLayoutState();
+  const actionsAtom = useMemo8(() => Atom3.make((get) => {
     const { nodes, edges } = createCompanionActions(graph, stateAtom, get, {
       idPrefix: "navbar",
-      invokeSync
+      updateState
     });
     const gapSeparator = createGapSeparator2("navbar-gap");
     nodes.push(...gapSeparator.nodes);
@@ -973,15 +978,17 @@ var useNavbarActions = () => {
     nodes.push(mainMenuGroup);
     edges.push({
       source: "root",
-      target: mainMenuGroup.id
+      target: mainMenuGroup.id,
+      relation: "child"
     });
-    const rootConnections = get(graph.connections(Node5.RootId));
-    const menuActions = rootConnections.filter((node) => node.properties.disposition === "menu");
+    const rootActions = get(graph.actions(Node5.RootId));
+    const menuActions = rootActions.filter((node) => node.properties.disposition === "menu");
     menuActions.forEach((menuAction) => {
       nodes.push(menuAction);
       edges.push({
         source: MAIN_MENU_GROUP_ID,
-        target: menuAction.id
+        target: menuAction.id,
+        relation: "child"
       });
     });
     return {
@@ -991,7 +998,7 @@ var useNavbarActions = () => {
   }), [
     graph,
     stateAtom,
-    invokeSync,
+    updateState,
     t
   ]);
   return {
@@ -1001,56 +1008,57 @@ var useNavbarActions = () => {
 };
 
 // src/components/Dialog/Dialog.tsx
-import React10 from "react";
+import React9 from "react";
 import { Surface as Surface3 } from "@dxos/app-framework/ui";
 import { AlertDialog, Dialog as NaturalDialog } from "@dxos/react-ui";
+import { ErrorFallback as ErrorFallback2 } from "@dxos/react-ui";
 var Dialog = () => {
   const { state, updateState } = useSimpleLayoutState();
   const DialogRoot = state.dialogType === "alert" ? AlertDialog.Root : NaturalDialog.Root;
   const DialogOverlay = state.dialogType === "alert" ? AlertDialog.Overlay : NaturalDialog.Overlay;
-  return /* @__PURE__ */ React10.createElement(DialogRoot, {
+  return /* @__PURE__ */ React9.createElement(DialogRoot, {
     modal: state.dialogBlockAlign !== "end",
     open: state.dialogOpen,
     onOpenChange: (nextOpen) => updateState((state2) => ({
       ...state2,
       dialogOpen: nextOpen
     }))
-  }, state.dialogBlockAlign === "end" ? /* @__PURE__ */ React10.createElement(Surface3.Surface, {
+  }, state.dialogBlockAlign === "end" ? /* @__PURE__ */ React9.createElement(Surface3.Surface, {
     role: "dialog",
     data: state.dialogContent,
     limit: 1,
-    fallback: ContentError
-  }) : /* @__PURE__ */ React10.createElement(DialogOverlay, {
+    fallback: ErrorFallback2
+  }) : /* @__PURE__ */ React9.createElement(DialogOverlay, {
     blockAlign: state.dialogBlockAlign,
     classNames: state.dialogOverlayClasses,
     style: state.dialogOverlayStyle
-  }, /* @__PURE__ */ React10.createElement(Surface3.Surface, {
+  }, /* @__PURE__ */ React9.createElement(Surface3.Surface, {
     role: "dialog",
     data: state.dialogContent,
     limit: 1,
-    fallback: ContentError
+    fallback: ErrorFallback2
   })));
 };
 
 // src/components/SimpleLayout/Drawer.tsx
-import React11, { useMemo as useMemo8 } from "react";
+import React10, { useMemo as useMemo9 } from "react";
 import { Surface as Surface4 } from "@dxos/app-framework/ui";
+import { getCompanionVariant as getCompanionVariant2 } from "@dxos/app-toolkit";
 import { useAppGraph as useAppGraph9 } from "@dxos/app-toolkit/ui";
 import { useNode as useNode3 } from "@dxos/plugin-graph";
-import { Layout as Layout3 } from "@dxos/react-ui";
-import { ATTENDABLE_PATH_SEPARATOR as ATTENDABLE_PATH_SEPARATOR2 } from "@dxos/react-ui-attention";
-import { MenuProvider as MenuProvider3, ToolbarMenu as ToolbarMenu2, useMenuActions as useMenuActions3 } from "@dxos/react-ui-menu";
+import { ErrorFallback as ErrorFallback3, Panel as Panel3 } from "@dxos/react-ui";
+import { Menu as Menu3, useMenuActions as useMenuActions3 } from "@dxos/react-ui-menu";
 var DRAWER_NAME = "SimpleLayout.Drawer";
 var Drawer = () => {
   const { graph } = useAppGraph9();
   const { state: layoutState } = useSimpleLayoutState();
-  const placeholder = useMemo8(() => /* @__PURE__ */ React11.createElement(ContentLoading, null), []);
+  const placeholder = useMemo9(() => /* @__PURE__ */ React10.createElement(ContentLoading, null), []);
   const activeId = layoutState.active ?? layoutState.workspace;
   const companions = useCompanions(activeId);
   const { companionId, variant } = useSelectedCompanion(companions, layoutState.companionVariant);
   const node = useNode3(graph, companionId);
   const parentNode = useNode3(graph, activeId);
-  const data = useMemo8(() => {
+  const data = useMemo9(() => {
     return node && {
       attendableId: companionId,
       subject: node.data,
@@ -1066,40 +1074,30 @@ var Drawer = () => {
   ]);
   const { actions, onAction } = useDrawerActions(DRAWER_NAME);
   const menu = useMenuActions3(actions);
-  return /* @__PURE__ */ React11.createElement(Layout3.Main, {
-    toolbar: true
-  }, /* @__PURE__ */ React11.createElement(MenuProvider3, {
+  return /* @__PURE__ */ React10.createElement(Panel3.Root, null, /* @__PURE__ */ React10.createElement(Panel3.Toolbar, null, /* @__PURE__ */ React10.createElement(Menu3.Root, {
     ...menu,
-    onAction,
-    alwaysActive: true
-  }, /* @__PURE__ */ React11.createElement(ToolbarMenu2, {
+    alwaysActive: true,
+    onAction
+  }, /* @__PURE__ */ React10.createElement(Menu3.Toolbar, {
     density: "coarse"
-  })), /* @__PURE__ */ React11.createElement(Surface4.Surface, {
+  }))), /* @__PURE__ */ React10.createElement(Panel3.Content, {
+    asChild: true
+  }, /* @__PURE__ */ React10.createElement(Surface4.Surface, {
     role: "article",
     data,
     limit: 1,
-    fallback: ContentError,
+    fallback: ErrorFallback3,
     placeholder
-  }));
+  })));
 };
 Drawer.displayName = DRAWER_NAME;
-var parseEntryId = (entryId) => {
-  const [id, variant] = entryId.split(ATTENDABLE_PATH_SEPARATOR2);
-  return {
-    id,
-    variant
-  };
-};
 var useSelectedCompanion = (companions, preferredVariant) => {
-  const selectedCompanion = useMemo8(() => {
+  const selectedCompanion = useMemo9(() => {
     if (companions.length === 0) {
       return void 0;
     }
     if (preferredVariant) {
-      const preferred = companions.find((c) => {
-        const { variant: variant2 } = parseEntryId(c.id);
-        return variant2 === preferredVariant;
-      });
+      const preferred = companions.find((c) => getCompanionVariant2(c.id) === preferredVariant);
       if (preferred) {
         return preferred;
       }
@@ -1110,7 +1108,7 @@ var useSelectedCompanion = (companions, preferredVariant) => {
     preferredVariant
   ]);
   const companionId = selectedCompanion?.id;
-  const { variant } = parseEntryId(companionId ?? "");
+  const variant = companionId ? getCompanionVariant2(companionId) : void 0;
   return {
     selectedCompanion,
     companionId,
@@ -1136,30 +1134,30 @@ var SimpleLayout = () => {
     state.drawerState,
     keyboardOpen
   ]);
-  return /* @__PURE__ */ React12.createElement(Mosaic3.Root, {
+  return /* @__PURE__ */ React11.createElement(Mosaic3.Root, {
     classNames: "contents"
-  }, /* @__PURE__ */ React12.createElement(MobileLayout.Root, {
-    classNames: "bg-toolbarSurface",
+  }, /* @__PURE__ */ React11.createElement(MobileLayout.Root, {
+    classNames: "bg-toolbar-surface",
     onKeyboardOpenChange: (keyboardOpen2) => setKeyboardOpen(keyboardOpen2)
-  }, /* @__PURE__ */ React12.createElement(MobileLayout.Panel, {
+  }, /* @__PURE__ */ React11.createElement(MobileLayout.Panel, {
     safe: {
       top: true,
       bottom: splitterMode === "upper"
     }
-  }, /* @__PURE__ */ React12.createElement(PopoverRoot, null, /* @__PURE__ */ React12.createElement(Splitter.Root, {
+  }, /* @__PURE__ */ React11.createElement(PopoverRoot, null, /* @__PURE__ */ React11.createElement(Splitter.Root, {
     mode: splitterMode,
     ratio: 0.55
-  }, /* @__PURE__ */ React12.createElement(Splitter.Panel, {
+  }, /* @__PURE__ */ React11.createElement(Splitter.Panel, {
     position: "upper"
-  }, /* @__PURE__ */ React12.createElement(Main, null)), /* @__PURE__ */ React12.createElement(Splitter.Panel, {
+  }, /* @__PURE__ */ React11.createElement(Main, null)), /* @__PURE__ */ React11.createElement(Splitter.Panel, {
     position: "lower",
     ref: drawerRef
-  }, /* @__PURE__ */ React12.createElement(Drawer, null))), /* @__PURE__ */ React12.createElement(Dialog, null), /* @__PURE__ */ React12.createElement(PopoverContent, null)))));
+  }, /* @__PURE__ */ React11.createElement(Drawer, null))), /* @__PURE__ */ React11.createElement(Dialog, null), /* @__PURE__ */ React11.createElement(PopoverContent, null)))));
 };
 
 export {
   Home,
   SimpleLayout,
-  Workspace
+  NavBranch
 };
-//# sourceMappingURL=chunk-O3BQBYMW.mjs.map
+//# sourceMappingURL=chunk-MDPEKLKR.mjs.map