@dxos/plugin-simple-layout 0.8.4-main.937b3ca → 0.8.4-main.bc674ce

package/dist/lib/browser/{chunk-FK4M7GJV.mjs → chunk-LR3EE3VB.mjs}

@@ -1,7 +1,7 @@
 import {
   SimpleLayoutState,
   meta
-} from "./chunk-CLPGTNWJ.mjs";
+} from "./chunk-P77G4YTR.mjs";
 
 // src/components/Home/Home.tsx
 import React, { useCallback, useEffect as useEffect2, useMemo, useRef } from "react";
@@ -21,15 +21,12 @@ import { Graph } from "@dxos/plugin-graph";
 var useLoadDescendents = (nodeId) => {
   const { graph } = useAppGraph();
   useEffect(() => {
-    const frame = requestAnimationFrame(() => {
-      if (nodeId) {
-        Graph.expand(graph, nodeId, "outbound");
-        Graph.getConnections(graph, nodeId, "outbound").forEach((child) => {
-          Graph.expand(graph, child.id, "outbound");
-        });
-      }
-    });
-    return () => cancelAnimationFrame(frame);
+    if (nodeId) {
+      Graph.expand(graph, nodeId, "outbound");
+      Graph.getConnections(graph, nodeId, "outbound").forEach((child) => {
+        Graph.expand(graph, child.id, "outbound");
+      });
+    }
   }, [
     nodeId,
     graph
@@ -142,12 +139,24 @@ var useItemsByDisposition = (disposition, sort = false) => {
 };
 
 // src/components/SimpleLayout/SimpleLayout.tsx
-import React9 from "react";
+import React10, { useCallback as useCallback6 } from "react";
+import { Main as NaturalMain3 } from "@dxos/react-ui";
+import { Mosaic as Mosaic2 } from "@dxos/react-ui-mosaic";
 
-// src/components/Dialog/Dialog.tsx
-import React3 from "react";
-import { Surface } from "@dxos/app-framework/react";
-import { AlertDialog, Dialog as NaturalDialog } from "@dxos/react-ui";
+// src/hooks/useCompanions.ts
+import { useMemo as useMemo2 } from "react";
+import { useAppGraph as useAppGraph3 } from "@dxos/app-framework/react";
+import { useConnections as useConnections2 } from "@dxos/plugin-graph";
+import { byPosition as byPosition2 } from "@dxos/util";
+var PLANK_COMPANION_TYPE = "dxos.org/plugin/deck/plank-companion";
+var useCompanions = (id) => {
+  const { graph } = useAppGraph3();
+  const nodes = useConnections2(graph, id);
+  const companions = nodes.filter((node) => node.type === PLANK_COMPANION_TYPE);
+  return useMemo2(() => companions.toSorted((a, b) => byPosition2(a.properties, b.properties)), [
+    companions
+  ]);
+};
 
 // src/hooks/useSimpleLayoutState.ts
 import { RegistryContext, useAtomValue } from "@effect-atom/atom-react";
@@ -169,6 +178,11 @@ var useSimpleLayoutState = () => {
   };
 };
 
+// src/components/Dialog/Dialog.tsx
+import React3 from "react";
+import { Surface } from "@dxos/app-framework/react";
+import { AlertDialog, Dialog as NaturalDialog } from "@dxos/react-ui";
+
 // src/components/ContentError.tsx
 import React2 from "react";
 import { useTranslation as useTranslation2 } from "@dxos/react-ui";
@@ -216,7 +230,7 @@ var Dialog = () => {
 
 // src/components/Popover/Popover.tsx
 import { createContext } from "@radix-ui/react-context";
-import React4, { useCallback as useCallback3, useEffect as useEffect3, useMemo as useMemo2, useRef as useRef2, useState } from "react";
+import React4, { useCallback as useCallback3, useEffect as useEffect3, useMemo as useMemo3, useRef as useRef2, useState } from "react";
 import { Surface as Surface2 } from "@dxos/app-framework/react";
 import { Popover, toLocalizedString as toLocalizedString2, useTranslation as useTranslation3 } from "@dxos/react-ui";
 import { Card as Card2 } from "@dxos/react-ui-mosaic";
@@ -285,7 +299,7 @@ var PopoverContent = () => {
   }, [
     handleClose
   ]);
-  const collisionBoundaries = useMemo2(() => {
+  const collisionBoundaries = useMemo3(() => {
     const closest = state.popoverAnchor?.closest("[data-popover-collision-boundary]");
     return closest ? [
       closest
@@ -313,15 +327,12 @@ var PopoverContent = () => {
   })), /* @__PURE__ */ React4.createElement(Popover.Arrow, null)));
 };
 
-// src/components/SimpleLayout/Main.tsx
-import React8, { useCallback as useCallback5, useMemo as useMemo4 } from "react";
-import { Surface as Surface3, useAppGraph as useAppGraph5 } from "@dxos/app-framework/react";
-import { log } from "@dxos/log";
+// src/components/SimpleLayout/Drawer.tsx
+import React6, { useCallback as useCallback4, useMemo as useMemo4 } from "react";
+import { Surface as Surface3, useAppGraph as useAppGraph4 } from "@dxos/app-framework/react";
 import { useNode } from "@dxos/plugin-graph";
-import { Main as NaturalMain } from "@dxos/react-ui";
+import { IconButton, Main as NaturalMain, Toolbar as Toolbar2, toLocalizedString as toLocalizedString3, useTranslation as useTranslation4 } from "@dxos/react-ui";
 import { ATTENDABLE_PATH_SEPARATOR } from "@dxos/react-ui-attention";
-import { Mosaic as Mosaic2 } from "@dxos/react-ui-mosaic";
-import { mx as mx5 } from "@dxos/ui-theme";
 
 // src/components/ContentLoading.tsx
 import React5 from "react";
@@ -332,26 +343,171 @@ var ContentLoading = () => {
   });
 };
 
+// src/components/SimpleLayout/Drawer.tsx
+var DRAWER_NAME = "SimpleLayout.Drawer";
+var Drawer = () => {
+  const { t } = useTranslation4(meta.id);
+  const { state, updateState } = useSimpleLayoutState();
+  const { graph } = useAppGraph4();
+  const placeholder = useMemo4(() => /* @__PURE__ */ React6.createElement(ContentLoading, null), []);
+  const activeId = state.active ?? state.workspace;
+  const companions = useCompanions(activeId);
+  const { companionId, variant } = useSelectedCompanion(companions, state.companionVariant);
+  const node = useNode(graph, companionId);
+  const parentNode = useNode(graph, activeId);
+  const data = useMemo4(() => {
+    return node && {
+      attendableId: companionId,
+      subject: node.data,
+      companionTo: parentNode?.data,
+      properties: node.properties,
+      variant
+    };
+  }, [
+    companionId,
+    node,
+    parentNode,
+    variant
+  ]);
+  const handleTabClick = useCallback4((companion) => {
+    const [, companionVariant] = companion.id.split(ATTENDABLE_PATH_SEPARATOR);
+    updateState((s) => ({
+      ...s,
+      companionVariant
+    }));
+  }, [
+    updateState
+  ]);
+  const handleToggleExpand = useCallback4(() => {
+    updateState((s) => ({
+      ...s,
+      drawerState: s.drawerState === "full" ? "expanded" : "full"
+    }));
+  }, [
+    updateState
+  ]);
+  const handleClose = useCallback4(() => {
+    updateState((s) => ({
+      ...s,
+      drawerState: "closed"
+    }));
+  }, [
+    updateState
+  ]);
+  const drawerState = state.drawerState ?? "closed";
+  if (drawerState === "closed") {
+    return null;
+  }
+  const isFullyExpanded = drawerState === "full";
+  return /* @__PURE__ */ React6.createElement(NaturalMain.Drawer, {
+    label: t("drawer label")
+  }, /* @__PURE__ */ React6.createElement(Toolbar2.Root, null, /* @__PURE__ */ React6.createElement("div", {
+    role: "tablist",
+    className: "flex-1 min-is-0 overflow-x-auto scrollbar-none flex gap-1"
+  }, companions.map((companion) => /* @__PURE__ */ React6.createElement(IconButton, {
+    key: companion.id,
+    role: "tab",
+    "aria-selected": companionId === companion.id,
+    icon: companion.properties.icon,
+    iconOnly: true,
+    label: toLocalizedString3(companion.properties.label, t),
+    variant: companionId === companion.id ? "primary" : "ghost",
+    onClick: () => handleTabClick(companion)
+  }))), /* @__PURE__ */ React6.createElement(Toolbar2.Separator, {
+    variant: "gap"
+  }), /* @__PURE__ */ React6.createElement(Toolbar2.IconButton, {
+    icon: isFullyExpanded ? "ph--arrow-down--regular" : "ph--arrow-up--regular",
+    iconOnly: true,
+    label: isFullyExpanded ? t("collapse drawer label") : t("expand drawer label"),
+    onClick: handleToggleExpand
+  }), /* @__PURE__ */ React6.createElement(Toolbar2.IconButton, {
+    icon: "ph--x--regular",
+    iconOnly: true,
+    label: t("close drawer label"),
+    onClick: handleClose
+  })), /* @__PURE__ */ React6.createElement(Surface3, {
+    role: "article",
+    data,
+    limit: 1,
+    fallback: ContentError,
+    placeholder
+  }));
+};
+Drawer.displayName = DRAWER_NAME;
+var parseEntryId = (entryId) => {
+  const [id, variant] = entryId.split(ATTENDABLE_PATH_SEPARATOR);
+  return {
+    id,
+    variant
+  };
+};
+var useSelectedCompanion = (companions, preferredVariant) => {
+  const selectedCompanion = useMemo4(() => {
+    if (companions.length === 0) {
+      return void 0;
+    }
+    if (preferredVariant) {
+      const preferred = companions.find((c) => {
+        const { variant: variant2 } = parseEntryId(c.id);
+        return variant2 === preferredVariant;
+      });
+      if (preferred) {
+        return preferred;
+      }
+    }
+    return companions[0];
+  }, [
+    companions,
+    preferredVariant
+  ]);
+  const companionId = selectedCompanion?.id;
+  const { variant } = parseEntryId(companionId ?? "");
+  return {
+    selectedCompanion,
+    companionId,
+    variant
+  };
+};
+
+// src/components/SimpleLayout/Main.tsx
+import React9, { useMemo as useMemo6 } from "react";
+import { Surface as Surface4, useAppGraph as useAppGraph7 } from "@dxos/app-framework/react";
+import { useNode as useNode2 } from "@dxos/plugin-graph";
+import { Main as NaturalMain2, useSidebars } from "@dxos/react-ui";
+import { mx as mx5 } from "@dxos/ui-theme";
+
 // src/components/SimpleLayout/Banner.tsx
-import React6, { useCallback as useCallback4, useMemo as useMemo3 } from "react";
+import React7, { Fragment, useCallback as useCallback5, useMemo as useMemo5 } from "react";
 import { Common as Common2 } from "@dxos/app-framework";
-import { useAppGraph as useAppGraph3, useOperationInvoker as useOperationInvoker2 } from "@dxos/app-framework/react";
-import { Graph as Graph2, Node as Node2 } from "@dxos/plugin-graph";
-import { IconButton, Toolbar as Toolbar2, toLocalizedString as toLocalizedString3, useTranslation as useTranslation4 } from "@dxos/react-ui";
+import { useAppGraph as useAppGraph5, useOperationInvoker as useOperationInvoker2 } from "@dxos/app-framework/react";
+import { Graph as Graph2, Node as Node2, useActionRunner, useActions } from "@dxos/plugin-graph";
+import { IconButton as IconButton2, Popover as Popover2, Toolbar as Toolbar3, toLocalizedString as toLocalizedString4, useTranslation as useTranslation5 } from "@dxos/react-ui";
+import { DropdownMenu, MenuProvider } from "@dxos/react-ui-menu";
 import { mx as mx3, osTranslations } from "@dxos/ui-theme";
 var isWorkspaceOrCollectionChild = (graph, itemId) => {
   const parents = Graph2.getConnections(graph, itemId, "inbound");
   return parents.some((node) => node.properties.disposition === "workspace" || node.properties.disposition === "collection");
 };
 var Banner = ({ node, classNames }) => {
-  const { t } = useTranslation4(meta.id);
+  const { t } = useTranslation5(meta.id);
   const { state } = useSimpleLayoutState();
   const { invokePromise } = useOperationInvoker2();
-  const { graph } = useAppGraph3();
-  const label = (node && toLocalizedString3(node.properties.label, t)) ?? t("current app name", {
+  const { graph } = useAppGraph5();
+  const runAction = useActionRunner();
+  const label = (node && toLocalizedString4(node.properties.label, t)) ?? t("current app name", {
     ns: osTranslations
   });
-  const isTopLevelItem = useMemo3(() => {
+  const allActions = useActions(graph, node?.id);
+  const actions = useMemo5(() => {
+    return allActions.filter((a) => [
+      "list-item",
+      "list-item-primary",
+      "heading-list-item"
+    ].includes(a.properties.disposition));
+  }, [
+    allActions
+  ]);
+  const isTopLevelItem = useMemo5(() => {
     if (!state.active) {
       return false;
     }
@@ -360,7 +516,7 @@ var Banner = ({ node, classNames }) => {
     graph,
     state.active
   ]);
-  const handleClick = useCallback4(async () => {
+  const handleClick = useCallback5(async () => {
     if (state.active) {
       if (state.history.length === 0 && isTopLevelItem) {
         await invokePromise(Common2.LayoutOperation.SwitchWorkspace, {
@@ -384,78 +540,102 @@ var Banner = ({ node, classNames }) => {
     state.history.length,
     isTopLevelItem
   ]);
+  const AnchorRoot = node && state.popoverAnchorId === `dxos.org/ui/${meta.id}/${node.id}` ? Popover2.Anchor : Fragment;
   if (!node) {
     return null;
   }
-  return /* @__PURE__ */ React6.createElement(Toolbar2.Root, {
+  return /* @__PURE__ */ React7.createElement(Toolbar3.Root, {
     role: "banner",
     classNames: mx3("grid grid-cols-[var(--rail-size)_1fr_var(--rail-size)]", classNames)
-  }, node.id !== Node2.RootId ? /* @__PURE__ */ React6.createElement(IconButton, {
+  }, node.id !== Node2.RootId ? /* @__PURE__ */ React7.createElement(IconButton2, {
     iconOnly: true,
     variant: "ghost",
     icon: "ph--caret-left--regular",
     label: t("back label"),
     onClick: handleClick
-  }) : /* @__PURE__ */ React6.createElement("div", null), /* @__PURE__ */ React6.createElement("h1", {
+  }) : /* @__PURE__ */ React7.createElement("div", null), /* @__PURE__ */ React7.createElement("h1", {
     className: "grow text-center truncate font-medium"
-  }, label), /* @__PURE__ */ React6.createElement(IconButton, {
+  }, label), actions.length > 0 ? /* @__PURE__ */ React7.createElement(AnchorRoot, null, /* @__PURE__ */ React7.createElement(MenuProvider, {
+    onAction: runAction
+  }, /* @__PURE__ */ React7.createElement(DropdownMenu.Root, {
+    items: actions,
+    caller: meta.id
+  }, /* @__PURE__ */ React7.createElement(DropdownMenu.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React7.createElement(IconButton2, {
     iconOnly: true,
     variant: "ghost",
     icon: "ph--dots-three-vertical--regular",
-    label: t("menu label")
-  }));
+    label: t("actions menu label")
+  }))))) : /* @__PURE__ */ React7.createElement("span", null));
 };
 
 // src/components/SimpleLayout/NavBar.tsx
-import React7 from "react";
-import { useAppGraph as useAppGraph4 } from "@dxos/app-framework/react";
-import { Node as Node3, useActionRunner, useConnections as useConnections2 } from "@dxos/plugin-graph";
-import { IconButton as IconButton2, Toolbar as Toolbar3, Tooltip, useTranslation as useTranslation5 } from "@dxos/react-ui";
-import { DropdownMenu, MenuProvider } from "@dxos/react-ui-menu";
+import React8 from "react";
+import { Common as Common3 } from "@dxos/app-framework";
+import { useAppGraph as useAppGraph6, useOperationInvoker as useOperationInvoker3 } from "@dxos/app-framework/react";
+import { Node as Node3, useActionRunner as useActionRunner2, useConnections as useConnections3 } from "@dxos/plugin-graph";
+import { IconButton as IconButton3, Toolbar as Toolbar4, Tooltip, toLocalizedString as toLocalizedString5, useTranslation as useTranslation6 } from "@dxos/react-ui";
+import { DropdownMenu as DropdownMenu2, MenuProvider as MenuProvider2 } from "@dxos/react-ui-menu";
 import { mx as mx4 } from "@dxos/ui-theme";
-var NavBar = ({ classNames, activeId, onActiveIdChange }) => {
-  const { t } = useTranslation5(meta.id);
-  const { graph } = useAppGraph4();
-  const runAction = useActionRunner();
-  const connections = useConnections2(graph, Node3.RootId);
+var NAVBAR_NAME = "SimpleLayout.NavBar";
+var NavBar = ({ classNames, activeId }) => {
+  const { t } = useTranslation6(meta.id);
+  const { graph } = useAppGraph6();
+  const runAction = useActionRunner2();
+  const { invokePromise } = useOperationInvoker3();
+  const connections = useConnections3(graph, Node3.RootId);
   const menuActions = connections.filter((node) => node.properties.disposition === "menu");
-  const isBrowseActive = activeId !== "notifications" && activeId !== "profile";
-  return /* @__PURE__ */ React7.createElement(Toolbar3.Root, {
+  const companions = useCompanions(activeId);
+  return /* @__PURE__ */ React8.createElement(Toolbar4.Root, {
     classNames: mx4("justify-center", classNames)
-  }, /* @__PURE__ */ React7.createElement(MenuProvider, {
+  }, companions.map((companion) => /* @__PURE__ */ React8.createElement(Toolbar4.IconButton, {
+    key: companion.id,
+    icon: companion.properties.icon ?? "ph--placeholder--regular",
+    iconOnly: true,
+    label: toLocalizedString5(companion.properties.label, t),
+    onClick: () => {
+      void invokePromise(Common3.LayoutOperation.Open, {
+        subject: [
+          companion.id
+        ]
+      });
+    }
+  })), /* @__PURE__ */ React8.createElement(Toolbar4.Separator, {
+    variant: "gap"
+  }), /* @__PURE__ */ React8.createElement(MenuProvider2, {
     onAction: runAction
-  }, /* @__PURE__ */ React7.createElement(DropdownMenu.Root, {
+  }, /* @__PURE__ */ React8.createElement(DropdownMenu2.Root, {
     items: menuActions
-  }, /* @__PURE__ */ React7.createElement(Tooltip.Trigger, {
+  }, /* @__PURE__ */ React8.createElement(Tooltip.Trigger, {
     asChild: true,
     content: t("app menu label")
-  }, /* @__PURE__ */ React7.createElement(DropdownMenu.Trigger, {
+  }, /* @__PURE__ */ React8.createElement(DropdownMenu2.Trigger, {
     asChild: true,
-    "data-testid": "spacePlugin.addSpace"
-  }, /* @__PURE__ */ React7.createElement(IconButton2, {
+    "data-testid": "simpleLayoutPlugin.addSpace"
+  }, /* @__PURE__ */ React8.createElement(IconButton3, {
     icon: "ph--plus--regular",
     iconOnly: true,
     label: t("main menu label")
   }))))));
 };
+NavBar.displayName = NAVBAR_NAME;
 
 // src/components/SimpleLayout/Main.tsx
-var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-simple-layout/src/components/SimpleLayout/Main.tsx";
+var MAIN_NAME = "SimpleLayout.Main";
 var Main = () => {
   const { state } = useSimpleLayoutState();
+  const { graph } = useAppGraph7();
   const id = state.active ?? state.workspace;
-  const showNavBar = !state.isPopover;
-  const { graph } = useAppGraph5();
-  const node = useNode(graph, id);
-  const placeholder = useMemo4(() => /* @__PURE__ */ React8.createElement(ContentLoading, null), []);
-  const data = useMemo4(() => {
-    const { variant } = parseEntryId(id);
+  const node = useNode2(graph, id);
+  useLoadDescendents(id);
+  const placeholder = useMemo6(() => /* @__PURE__ */ React9.createElement(ContentLoading, null), []);
+  const data = useMemo6(() => {
     return node && {
       attendableId: id,
       subject: node.data,
       properties: node.properties,
-      popoverAnchorId: state.popoverAnchorId,
-      variant
+      popoverAnchorId: state.popoverAnchorId
     };
   }, [
     id,
@@ -464,97 +644,93 @@ var Main = () => {
     node?.properties,
     state.popoverAnchorId
   ]);
-  const handleActiveIdChange = useCallback5((nextActiveId) => {
-    log.info("navigate", {
-      nextActiveId
-    }, {
-      F: __dxlog_file,
-      L: 48,
-      S: void 0,
-      C: (f, a) => f(...a)
-    });
-  }, []);
-  return /* @__PURE__ */ React8.createElement(Mosaic2.Root, null, /* @__PURE__ */ React8.createElement(NaturalMain.Root, {
-    complementarySidebarState: "closed",
-    navigationSidebarState: "closed"
-  }, /* @__PURE__ */ React8.createElement(NaturalMain.Content, {
+  const { drawerState } = useSidebars(MAIN_NAME);
+  const showNavBar = !state.isPopover && drawerState === "closed";
+  return /* @__PURE__ */ React9.createElement(NaturalMain2.Content, {
     bounce: true,
-    classNames: mx5("dx-mobile-main dx-mobile-main-scroll-area--flush", "grid bs-full overflow-hidden", showNavBar ? "grid-rows-[min-content_1fr_min-content]" : "grid-rows-[min-content_1fr]")
-  }, /* @__PURE__ */ React8.createElement(Banner, {
+    classNames: mx5("bs-full", "pbs-[env(safe-area-inset-top)] pbe-[env(safe-area-inset-bottom)]")
+  }, /* @__PURE__ */ React9.createElement("div", {
+    role: "none",
+    className: mx5("grid bs-full overflow-hidden", showNavBar ? "grid-rows-[min-content_1fr_min-content]" : "grid-rows-[min-content_1fr]")
+  }, /* @__PURE__ */ React9.createElement(Banner, {
     classNames: "border-be border-separator",
     node
-  }), /* @__PURE__ */ React8.createElement("article", {
-    className: "contents"
-  }, /* @__PURE__ */ React8.createElement(Surface3, {
+  }), /* @__PURE__ */ React9.createElement("article", {
+    className: "bs-full overflow-hidden"
+  }, /* @__PURE__ */ React9.createElement(Surface4, {
     key: id,
     role: "article",
     data,
     limit: 1,
     fallback: ContentError,
     placeholder
-  })), showNavBar && /* @__PURE__ */ React8.createElement(NavBar, {
+  })), showNavBar && /* @__PURE__ */ React9.createElement(NavBar, {
     classNames: "border-bs border-separator",
-    activeId: id,
-    onActiveIdChange: handleActiveIdChange
-  }))));
-};
-var parseEntryId = (entryId) => {
-  const [id, variant] = entryId.split(ATTENDABLE_PATH_SEPARATOR);
-  return {
-    id,
-    variant
-  };
+    activeId: id
+  })));
 };
-Main.displayName = "SimpleLayout.Main";
+Main.displayName = MAIN_NAME;
 
 // src/components/SimpleLayout/SimpleLayout.tsx
 var SimpleLayout = () => {
-  return /* @__PURE__ */ React9.createElement(PopoverRoot, null, /* @__PURE__ */ React9.createElement(Main, null), /* @__PURE__ */ React9.createElement(Dialog, null), /* @__PURE__ */ React9.createElement(PopoverContent, null));
+  const { state, updateState } = useSimpleLayoutState();
+  const handleDrawerStateChange = useCallback6((nextState) => {
+    updateState((s) => ({
+      ...s,
+      drawerState: nextState
+    }));
+  }, [
+    updateState
+  ]);
+  return /* @__PURE__ */ React10.createElement(Mosaic2.Root, null, /* @__PURE__ */ React10.createElement(NaturalMain3.Root, {
+    drawerState: state.drawerState ?? "closed",
+    onDrawerStateChange: handleDrawerStateChange
+  }, /* @__PURE__ */ React10.createElement(PopoverRoot, null, /* @__PURE__ */ React10.createElement(Main, null), /* @__PURE__ */ React10.createElement(Drawer, null), /* @__PURE__ */ React10.createElement(Dialog, null), /* @__PURE__ */ React10.createElement(PopoverContent, null))));
 };
 
 // src/components/Workspace/Workspace.tsx
-import React10, { useCallback as useCallback6, useEffect as useEffect4, useRef as useRef3 } from "react";
-import { Common as Common3 } from "@dxos/app-framework";
-import { useAppGraph as useAppGraph6, useOperationInvoker as useOperationInvoker3 } from "@dxos/app-framework/react";
-import { useConnections as useConnections3 } from "@dxos/plugin-graph";
-import { Avatar as Avatar2, Icon as Icon2, Toolbar as Toolbar4, toLocalizedString as toLocalizedString4, useTranslation as useTranslation6 } from "@dxos/react-ui";
+import React11, { useCallback as useCallback7, useEffect as useEffect4, useRef as useRef3 } from "react";
+import { Common as Common4 } from "@dxos/app-framework";
+import { useAppGraph as useAppGraph8, useOperationInvoker as useOperationInvoker4 } from "@dxos/app-framework/react";
+import { useConnections as useConnections4 } from "@dxos/plugin-graph";
+import { Avatar as Avatar2, Icon as Icon2, Toolbar as Toolbar5, toLocalizedString as toLocalizedString6, useTranslation as useTranslation7 } from "@dxos/react-ui";
 import { Card as Card3, Layout as Layout2, Mosaic as Mosaic3 } from "@dxos/react-ui-mosaic";
 import { SearchList as SearchList2, useSearchListItem as useSearchListItem2, useSearchListResults as useSearchListResults2 } from "@dxos/react-ui-searchlist";
 import { mx as mx6 } from "@dxos/ui-theme";
 var Workspace = ({ id }) => {
-  const { t } = useTranslation6(meta.id);
-  const { graph } = useAppGraph6();
+  const { t } = useTranslation7(meta.id);
+  const { graph } = useAppGraph8();
   useLoadDescendents(id);
-  const children = useConnections3(graph, id, "outbound");
+  const children = useConnections4(graph, id, "outbound");
   const { results, handleSearch } = useSearchListResults2({
     items: children,
-    extract: (child) => toLocalizedString4(child.properties.label, t)
+    extract: (child) => toLocalizedString6(child.properties.label, t)
   });
-  return /* @__PURE__ */ React10.createElement(Layout2.Main, {
+  return /* @__PURE__ */ React11.createElement(Layout2.Main, {
     toolbar: true
-  }, /* @__PURE__ */ React10.createElement(SearchList2.Root, {
+  }, /* @__PURE__ */ React11.createElement(SearchList2.Root, {
     onSearch: handleSearch
-  }, /* @__PURE__ */ React10.createElement(Toolbar4.Root, null, /* @__PURE__ */ React10.createElement(SearchList2.Input, {
+  }, /* @__PURE__ */ React11.createElement(Toolbar5.Root, null, /* @__PURE__ */ React11.createElement(SearchList2.Input, {
     placeholder: t("search placeholder"),
     autoFocus: true
-  })), /* @__PURE__ */ React10.createElement(SearchList2.Content, null, /* @__PURE__ */ React10.createElement(Mosaic3.Container, {
+  })), /* @__PURE__ */ React11.createElement(SearchList2.Content, null, /* @__PURE__ */ React11.createElement(Mosaic3.Container, {
     asChild: true
-  }, /* @__PURE__ */ React10.createElement(Mosaic3.Viewport, {
+  }, /* @__PURE__ */ React11.createElement(Mosaic3.Viewport, {
     padding: true
-  }, /* @__PURE__ */ React10.createElement(Mosaic3.Stack, {
+  }, /* @__PURE__ */ React11.createElement(Mosaic3.Stack, {
     items: results,
     getId: (child) => child.id,
     Tile: WorkspaceChildTile
   }))))));
 };
 var WorkspaceChildTile = ({ data }) => {
-  const { t } = useTranslation6(meta.id);
-  const { invokeSync } = useOperationInvoker3();
+  const { t } = useTranslation7(meta.id);
+  const { invokeSync } = useOperationInvoker4();
   const ref = useRef3(null);
   const { selectedValue, registerItem, unregisterItem } = useSearchListItem2();
   const isSelected = selectedValue === data.id;
-  const name = toLocalizedString4(data.properties.label, t);
-  const handleSelect = useCallback6(() => invokeSync(Common3.LayoutOperation.Open, {
+  const name = toLocalizedString6(data.properties.label, t);
+  const handleSelect = useCallback7(() => invokeSync(Common4.LayoutOperation.Open, {
     subject: [
       data.id
     ]
@@ -583,7 +759,7 @@ var WorkspaceChildTile = ({ data }) => {
   }, [
     isSelected
   ]);
-  return /* @__PURE__ */ React10.createElement(Card3.Root, {
+  return /* @__PURE__ */ React11.createElement(Card3.Root, {
     ref,
     role: "button",
     fullWidth: true,
@@ -591,16 +767,16 @@ var WorkspaceChildTile = ({ data }) => {
     "data-selected": isSelected,
     classNames: mx6("dx-focus-ring", isSelected && "bg-hoverOverlay"),
     onClick: handleSelect
-  }, /* @__PURE__ */ React10.createElement(Card3.Toolbar, {
+  }, /* @__PURE__ */ React11.createElement(Card3.Toolbar, {
     density: "coarse"
-  }, /* @__PURE__ */ React10.createElement(Avatar2.Root, null, /* @__PURE__ */ React10.createElement(Avatar2.Content, {
+  }, /* @__PURE__ */ React11.createElement(Avatar2.Root, null, /* @__PURE__ */ React11.createElement(Avatar2.Content, {
     hue: data.properties.hue,
     icon: data.properties.icon,
     hueVariant: "transparent",
     variant: "square",
     size: 12,
     fallback: name
-  }), /* @__PURE__ */ React10.createElement(Avatar2.Label, null, name), /* @__PURE__ */ React10.createElement(Icon2, {
+  }), /* @__PURE__ */ React11.createElement(Avatar2.Label, null, name), /* @__PURE__ */ React11.createElement(Icon2, {
     icon: "ph--caret-right--regular"
   }))));
 };
@@ -610,4 +786,4 @@ export {
   SimpleLayout,
   Workspace
 };
-//# sourceMappingURL=chunk-FK4M7GJV.mjs.map
+//# sourceMappingURL=chunk-LR3EE3VB.mjs.map