@dxos/plugin-simple-layout 0.8.4-main.3eb6e50203 → 0.8.4-main.4a85c3132b

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

@@ -9,8 +9,9 @@ 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";
@@ -23,9 +24,9 @@ var useLoadDescendents = (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");
+      Graph.expand(graph, nodeId, "child");
+      Graph.getConnections(graph, nodeId, "child").forEach((child) => {
+        Graph.expand(graph, child.id, "child");
       });
     }
   }, [
@@ -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,9 +76,10 @@ 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();
@@ -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 {
@@ -264,7 +270,7 @@ var createCompanionActions = (graph, stateAtom, get, config) => {
   const { idPrefix, selectedVariant, invokeSync } = 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 = [];
@@ -291,7 +297,8 @@ var createCompanionActions = (graph, stateAtom, get, config) => {
     nodes.push(companionAction);
     edges.push({
       source: "root",
-      target: companionAction.id
+      target: companionAction.id,
+      relation: "child"
     });
   });
   return {
@@ -303,7 +310,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
@@ -317,7 +324,7 @@ import { useMemo as useMemo6 } from "react";
 import { useCapability as useCapability3, useOperationInvoker as useOperationInvoker4 } 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
@@ -325,7 +332,7 @@ 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 +361,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 +377,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 +517,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 +556,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 +608,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 +624,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 +639,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 +653,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 +704,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(() => {
@@ -727,21 +723,21 @@ var Main = () => {
   ]);
   useLoadDescendents(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
   }));
@@ -749,45 +745,49 @@ var Main = () => {
 Main.displayName = MAIN_NAME;
 
 // src/components/Workspace/Workspace.tsx
-import React9, { useCallback as useCallback4, useEffect as useEffect5, useRef as useRef3 } from "react";
+import React8, { useCallback as useCallback4, useEffect as useEffect5, useRef as useRef3 } from "react";
 import { useOperationInvoker as useOperationInvoker3 } from "@dxos/app-framework/ui";
 import { LayoutOperation as LayoutOperation4 } 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";
+import { mx as mx6 } from "@dxos/ui-theme";
 var Workspace = ({ id }) => {
-  const { t } = useTranslation6(meta.id);
+  const { t } = useTranslation5(meta.id);
   const { graph } = useAppGraph6();
   useLoadDescendents(id);
-  const children = useConnections3(graph, id, "outbound");
+  const children = useConnections3(graph, id, "child");
   const { results, handleSearch } = useSearchListResults2({
     items: children,
     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__ */ React8.createElement(SearchList2.Content, null, /* @__PURE__ */ React8.createElement(Mosaic2.Container, {
     asChild: true
-  }, /* @__PURE__ */ React9.createElement(ScrollArea2.Root, {
+  }, /* @__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
-  })))))));
+  }))))))));
 };
-var WorkspaceChildTile = ({ data }) => {
-  const { t } = useTranslation6(meta.id);
+var WorkspaceChildTile = (props) => {
+  const data = props.data;
+  const { t } = useTranslation5(meta.id);
   const { invokeSync } = useOperationInvoker3();
   const ref = useRef3(null);
   const { selectedValue, registerItem, unregisterItem } = useSearchListItem2();
@@ -822,24 +822,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,7 +866,7 @@ 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();
@@ -901,7 +901,8 @@ var useDrawerActions = (consumerName) => {
       nodes.push(toggleExpandAction);
       edges.push({
         source: "root",
-        target: toggleExpandAction.id
+        target: toggleExpandAction.id,
+        relation: "child"
       });
     }
     const closeAction = {
@@ -920,7 +921,8 @@ var useDrawerActions = (consumerName) => {
     nodes.push(closeAction);
     edges.push({
       source: "root",
-      target: closeAction.id
+      target: closeAction.id,
+      relation: "child"
     });
     return {
       nodes,
@@ -946,11 +948,11 @@ import { useMemo as useMemo7 } from "react";
 import { useCapability as useCapability4, useOperationInvoker as useOperationInvoker5 } 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();
@@ -973,15 +975,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 {
@@ -1001,50 +1005,51 @@ 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 useMemo8 } from "react";
 import { Surface as Surface4 } from "@dxos/app-framework/ui";
 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 { ErrorFallback as ErrorFallback3, Panel as Panel3 } 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 { 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 = useMemo8(() => /* @__PURE__ */ React10.createElement(ContentLoading, null), []);
   const activeId = layoutState.active ?? layoutState.workspace;
   const companions = useCompanions(activeId);
   const { companionId, variant } = useSelectedCompanion(companions, layoutState.companionVariant);
@@ -1066,21 +1071,21 @@ 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) => {
@@ -1136,25 +1141,25 @@ 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 {
@@ -1162,4 +1167,4 @@ export {
   SimpleLayout,
   Workspace
 };
-//# sourceMappingURL=chunk-O3BQBYMW.mjs.map
+//# sourceMappingURL=chunk-TMZNLVT2.mjs.map