@dxos/plugin-simple-layout 0.8.4-main.7996785055 → 0.8.4-main.8baae0fced

package/dist/lib/{browser/chunk-J5FQ32AV.mjs → neutral/components/index.mjs}

@@ -1,10 +1,52 @@
-import {
-  SimpleLayoutState,
-  meta
-} from "./chunk-MRR7PXSM.mjs";
+import "../chunk-J5LGTIGS.mjs";
+
+// src/components/DebugOverlay/DebugOverlay.tsx
+import { createContext } from "@radix-ui/react-context";
+import React, { useCallback, useRef } from "react";
+var DEBUG_OVERLAY_NAME = "DebugOverlay";
+var [DebugOverlayProvider, useDebugLog] = createContext(DEBUG_OVERLAY_NAME, {
+  dbg: () => {
+  }
+});
+var DebugOverlayRoot = ({ children, enabled = true, maxLines = 10 }) => {
+  const overlayRef = useRef(null);
+  const dbg = useCallback((msg) => {
+    if (!overlayRef.current) {
+      return;
+    }
+    const line = document.createElement("pre");
+    line.textContent = `${(performance.now() / 1e3).toFixed(2).padStart(8, " ")} ${msg}`;
+    overlayRef.current.prepend(line);
+    while (overlayRef.current.children.length > maxLines) {
+      overlayRef.current.lastChild?.remove();
+    }
+  }, []);
+  return /* @__PURE__ */ React.createElement(DebugOverlayProvider, {
+    dbg
+  }, children, enabled && /* @__PURE__ */ React.createElement("div", {
+    ref: overlayRef,
+    style: {
+      position: "fixed",
+      bottom: "calc(var(--kb-height, 0px) + 8px)",
+      left: 8,
+      right: 8,
+      background: "rgba(0,0,0,0.8)",
+      color: "#0f0",
+      fontSize: 10,
+      fontFamily: "monospace",
+      padding: 6,
+      borderRadius: 4,
+      zIndex: 9999,
+      pointerEvents: "none"
+    }
+  }));
+};
+var DebugOverlay = {
+  Root: DebugOverlayRoot
+};
 
 // src/components/Home/Home.tsx
-import React, { useCallback, useEffect as useEffect2, useMemo, useRef } from "react";
+import React2, { useCallback as useCallback2, useEffect as useEffect2, useMemo, useRef as useRef2 } from "react";
 import { useOperationInvoker } from "@dxos/app-framework/ui";
 import { LayoutOperation } from "@dxos/app-toolkit";
 import { useAppGraph as useAppGraph2 } from "@dxos/app-toolkit/ui";
@@ -15,12 +57,13 @@ import { Mosaic } from "@dxos/react-ui-mosaic";
 import { SearchPanel, useSearchListItem, useSearchListResults } from "@dxos/react-ui-search";
 import { mx } from "@dxos/ui-theme";
 import { byPosition, getHostPlatform, isTauri } from "@dxos/util";
+import { meta } from "#meta";
 
 // 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";
+import { expandAttendableId } from "@dxos/react-ui-attention";
 var useExpandPath = (nodeId) => {
   const { graph } = useAppGraph();
   useEffect(() => {
@@ -58,15 +101,15 @@ var Home = (_) => {
     extract: (node) => toLocalizedString(node.properties.label, t)
   });
   const autoFocus = !isTauri() || getHostPlatform() !== "ios";
-  return /* @__PURE__ */ React.createElement(SearchPanel, {
+  return /* @__PURE__ */ React2.createElement(SearchPanel, {
     onSearch: handleSearch
-  }, /* @__PURE__ */ React.createElement(Mosaic.Container, {
+  }, /* @__PURE__ */ React2.createElement(Mosaic.Container, {
     asChild: true
-  }, /* @__PURE__ */ React.createElement(ScrollArea.Root, {
+  }, /* @__PURE__ */ React2.createElement(ScrollArea.Root, {
     centered: true,
     padding: true,
     thin: true
-  }, /* @__PURE__ */ React.createElement(ScrollArea.Viewport, null, /* @__PURE__ */ React.createElement(Mosaic.Stack, {
+  }, /* @__PURE__ */ React2.createElement(ScrollArea.Viewport, null, /* @__PURE__ */ React2.createElement(Mosaic.Stack, {
     classNames: "gap-1",
     draggable: false,
     items: results,
@@ -81,9 +124,9 @@ var WorkspaceTile = (props) => {
   const { selectedValue, registerItem, unregisterItem } = useSearchListItem();
   const name = toLocalizedString(data.properties.label, t);
   const isSelected = selectedValue === data.id;
-  const cardRef = useRef(null);
+  const cardRef = useRef2(null);
   useExpandPath(data.id);
-  const handleSelect = useCallback(() => invokePromise(LayoutOperation.SwitchWorkspace, {
+  const handleSelect = useCallback2(() => invokePromise(LayoutOperation.SwitchWorkspace, {
     subject: data.id
   }), [
     invokePromise,
@@ -110,26 +153,26 @@ var WorkspaceTile = (props) => {
   }, [
     isSelected
   ]);
-  return /* @__PURE__ */ React.createElement(Card.Root, {
+  return /* @__PURE__ */ React2.createElement(Card.Root, {
     role: "button",
     fullWidth: true,
     tabIndex: -1,
     "data-selected": isSelected,
-    classNames: mx("dx-focus-ring", isSelected && "bg-hover-overlay"),
+    classNames: mx("dx-focus-ring", isSelected && "bg-selected-surface"),
     onClick: handleSelect,
     ref: cardRef
-  }, /* @__PURE__ */ React.createElement(Card.Toolbar, {
+  }, /* @__PURE__ */ React2.createElement(Card.Toolbar, {
     density: "fine"
-  }, /* @__PURE__ */ React.createElement(Avatar.Root, null, /* @__PURE__ */ React.createElement(Avatar.Content, {
+  }, /* @__PURE__ */ React2.createElement(Avatar.Root, null, /* @__PURE__ */ React2.createElement(Avatar.Content, {
     icon: data.properties.icon,
     hue: data.properties.hue,
     hueVariant: "transparent",
     variant: "square",
     size: 8,
     fallback: name
-  }), /* @__PURE__ */ React.createElement(Avatar.Label, {
+  }), /* @__PURE__ */ React2.createElement(Avatar.Label, {
     classNames: "cursor-pointer"
-  }, name), /* @__PURE__ */ React.createElement(Icon, {
+  }, name), /* @__PURE__ */ React2.createElement(Icon, {
     icon: "ph--caret-right--regular"
   }))));
 };
@@ -149,239 +192,10 @@ var useItemsByDisposition = (disposition, sort = false) => {
   ]);
 };
 
-// src/components/SimpleLayout/SimpleLayout.tsx
-import React12, { useLayoutEffect as useLayoutEffect2, useRef as useRef5, useState as useState3 } from "react";
-import { Splitter } from "@dxos/react-ui";
-import { Mosaic as Mosaic3 } from "@dxos/react-ui-mosaic";
-
-// src/hooks/useAppBarProps.ts
-import { Atom, useAtomValue } from "@effect-atom/atom-react";
-import * as Effect from "effect/Effect";
-import * as Option from "effect/Option";
-import { useCallback as useCallback2, useMemo as useMemo2 } from "react";
-import { useCapability, useOperationInvoker as useOperationInvoker2 } from "@dxos/app-framework/ui";
-import { LayoutOperation as LayoutOperation2 } from "@dxos/app-toolkit";
-import { useAppGraph as useAppGraph3 } from "@dxos/app-toolkit/ui";
-import { Graph as Graph2, Node as Node2, useActionRunner, useNode } from "@dxos/plugin-graph";
-import { toLocalizedString as toLocalizedString2, useTranslation as useTranslation2 } from "@dxos/react-ui";
-var useAppBarProps = () => {
-  const { t } = useTranslation2(meta.id);
-  const stateAtom = useCapability(SimpleLayoutState);
-  const state = useAtomValue(stateAtom);
-  const { graph } = useAppGraph3();
-  const { invokePromise } = useOperationInvoker2();
-  const runAction = useActionRunner();
-  const activeId = state.active ?? state.workspace;
-  const node = useNode(graph, activeId);
-  const title = node ? toLocalizedString2(node.properties.label, t) : void 0;
-  const actionsAtom = useMemo2(() => Atom.make((get) => {
-    const state2 = get(stateAtom);
-    const activeId2 = state2.active ?? state2.workspace;
-    const allActions = activeId2 ? get(graph.actions(activeId2)) : [];
-    const filtered = allActions.filter((action) => [
-      "list-item",
-      "list-item-primary",
-      "heading-list-item"
-    ].includes(action.properties.disposition));
-    const nodes = filtered;
-    const edges = filtered.map((action) => ({
-      source: "root",
-      target: action.id,
-      relation: "child"
-    }));
-    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 = {
-        id: `appbar-settings-${alternateTreeNode.id}`,
-        type: Node2.ActionType,
-        data: () => Effect.promise(() => invokePromise(LayoutOperation2.Open, {
-          subject: [
-            alternateTreeNode.id
-          ]
-        })),
-        properties: {
-          label: alternateTreeNode.properties.label ?? alternateTreeNode.id,
-          icon: alternateTreeNode.properties.icon ?? "ph--placeholder--regular"
-        }
-      };
-      nodes.push(settingsAction);
-      edges.push({
-        source: "root",
-        target: settingsAction.id,
-        relation: "child"
-      });
-    }
-    return {
-      nodes,
-      edges
-    };
-  }), [
-    graph,
-    stateAtom
-  ]);
-  const showBackButton = activeId !== void 0 && activeId !== Node2.RootId;
-  const onBack = useCallback2(() => {
-    if (state.active) {
-      const isWorkspace = Graph2.getNode(graph, state.active).pipe(Option.map((node2) => node2.properties.disposition === "workspace"), Option.getOrElse(() => false));
-      if (state.history.length === 0 && isWorkspace) {
-        void invokePromise(LayoutOperation2.SwitchWorkspace, {
-          subject: Node2.RootId
-        });
-      } else {
-        void invokePromise(LayoutOperation2.Close, {
-          subject: [
-            state.active
-          ]
-        });
-      }
-    } else {
-      void invokePromise(LayoutOperation2.SwitchWorkspace, {
-        subject: Node2.RootId
-      });
-    }
-  }, [
-    graph,
-    invokePromise,
-    state.active,
-    state.history.length
-  ]);
-  const popoverAnchorId = node && state.popoverAnchorId === `${meta.id}:${node.id}` ? state.popoverAnchorId : void 0;
-  return {
-    title,
-    actions: actionsAtom,
-    showBackButton,
-    popoverAnchorId,
-    onBack,
-    onAction: runAction
-  };
-};
-
-// src/hooks/useCompanions.ts
-import { useMemo as useMemo3 } from "react";
-import { useAppGraph as useAppGraph4 } from "@dxos/app-toolkit/ui";
-import { useConnections as useConnections2 } from "@dxos/plugin-graph";
-import { byPosition as byPosition3 } from "@dxos/util";
-
-// src/hooks/actions.ts
-import * as Effect2 from "effect/Effect";
-import { getCompanionVariant } from "@dxos/app-toolkit";
-import { Node as Node3 } from "@dxos/plugin-graph";
-import { byPosition as byPosition2 } from "@dxos/util";
-var PLANK_COMPANION_TYPE = "org.dxos.plugin.deck.plank-companion";
-var createCompanionActions = (graph, stateAtom, get, config) => {
-  const { idPrefix, selectedVariant, updateState } = config;
-  const state = get(stateAtom);
-  const activeId = state.active ?? state.workspace;
-  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 = getCompanionVariant(companion.id);
-    const companionAction = {
-      id: `${idPrefix}-companion-${companion.id}`,
-      type: Node3.ActionType,
-      properties: {
-        icon: companion.properties.icon ?? "ph--placeholder--regular",
-        label: companion.properties.label,
-        iconOnly: true,
-        ...selectedVariant !== void 0 && {
-          variant: selectedVariant === companionVariant ? "primary" : "ghost"
-        }
-      },
-      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,
-      relation: "child"
-    });
-  });
-  return {
-    nodes,
-    edges
-  };
-};
-
-// src/hooks/useCompanions.ts
-var useCompanions = (nodeId) => {
-  const { graph } = useAppGraph4();
-  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
-  ]);
-};
-
-// src/hooks/useDrawerActions.ts
-import { Atom as Atom2 } from "@effect-atom/atom-react";
-import * as Effect3 from "effect/Effect";
-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 useTranslation6 } from "@dxos/react-ui";
-import { createGapSeparator } from "@dxos/react-ui-menu";
-
-// src/components/DebugOverlay/DebugOverlay.tsx
-import { createContext } from "@radix-ui/react-context";
-import React2, { useCallback as useCallback3, useRef as useRef2 } from "react";
-var DEBUG_OVERLAY_NAME = "DebugOverlay";
-var [DebugOverlayProvider, useDebugLog] = createContext(DEBUG_OVERLAY_NAME, {
-  dbg: () => {
-  }
-});
-var DebugOverlayRoot = ({ children, enabled = true, maxLines = 10 }) => {
-  const overlayRef = useRef2(null);
-  const dbg = useCallback3((msg) => {
-    if (!overlayRef.current) {
-      return;
-    }
-    const line = document.createElement("pre");
-    line.textContent = `${(performance.now() / 1e3).toFixed(2).padStart(8, " ")} ${msg}`;
-    overlayRef.current.prepend(line);
-    while (overlayRef.current.children.length > maxLines) {
-      overlayRef.current.lastChild?.remove();
-    }
-  }, []);
-  return /* @__PURE__ */ React2.createElement(DebugOverlayProvider, {
-    dbg
-  }, children, enabled && /* @__PURE__ */ React2.createElement("div", {
-    ref: overlayRef,
-    style: {
-      position: "fixed",
-      bottom: "calc(var(--kb-height, 0px) + 8px)",
-      left: 8,
-      right: 8,
-      background: "rgba(0,0,0,0.8)",
-      color: "#0f0",
-      fontSize: 10,
-      fontFamily: "monospace",
-      padding: 6,
-      borderRadius: 4,
-      zIndex: 9999,
-      pointerEvents: "none"
-    }
-  }));
-};
-var DebugOverlay = {
-  Root: DebugOverlayRoot
-};
-
 // src/components/Loading/Loading.tsx
 import React3 from "react";
 var Loading = () => {
   return /* @__PURE__ */ React3.createElement("div", {
-    role: "none",
     className: "grid place-items-center dx-attention-surface"
   });
 };
@@ -409,7 +223,6 @@ var MobileLayoutRoot = /* @__PURE__ */ forwardRef(({ classNames, children, trans
     keyboardOpen
   }, /* @__PURE__ */ React4.createElement("div", {
     ...props,
-    role: "none",
     style: {
       height: "calc(100vh - var(--kb-height, 0px))",
       transition: `height ${keyboardOpen ? 0 : transition}ms ease-out`
@@ -422,7 +235,6 @@ MobileLayoutRoot.displayName = MOBILE_LAYOUT_ROOT_NAME;
 var MobileLayoutPanel = /* @__PURE__ */ forwardRef(({ classNames, children, safe, ...props }, forwardedRef) => {
   return /* @__PURE__ */ React4.createElement("div", {
     ...props,
-    role: "none",
     style: {
       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
@@ -558,12 +370,7 @@ var useIOSKeyboard = () => {
         keyboardHeight,
         keyboardOpen,
         animationDuration
-      }, {
-        F: __dxlog_file,
-        L: 318,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
+      }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 211, S: void 0 });
     };
     let rafId;
     return combine(
@@ -577,12 +384,7 @@ var useIOSKeyboard = () => {
           type,
           height: height2,
           duration: duration2
-        }, {
-          F: __dxlog_file,
-          L: 338,
-          S: void 0,
-          C: (f, a) => f(...a)
-        });
+        }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 228, S: void 0 });
         updateState(height2, type === "show", durationMs);
         const end = performance.now() + durationMs + 300;
         let prevOffsetTop = vp?.offsetTop ?? 0;
@@ -622,10 +424,13 @@ var useIOSKeyboard = () => {
 
 // src/components/Popover/Popover.tsx
 import { createContext as createContext3 } from "@radix-ui/react-context";
-import React5, { useCallback as useCallback4, useEffect as useEffect4, useMemo as useMemo4, useRef as useRef3, useState as useState2 } from "react";
+import React5, { useCallback as useCallback3, useEffect as useEffect4, useMemo as useMemo2, useRef as useRef3, useState as useState2 } from "react";
 import { Surface } from "@dxos/app-framework/ui";
-import { Popover, toLocalizedString as toLocalizedString3, useTranslation as useTranslation3 } from "@dxos/react-ui";
+import { AppSurface } from "@dxos/app-toolkit/ui";
+import { Popover, toLocalizedString as toLocalizedString2, useTranslation as useTranslation2 } from "@dxos/react-ui";
 import { Card as Card2 } from "@dxos/react-ui";
+import { useSimpleLayoutState } from "#hooks";
+import { meta as meta2 } from "#meta";
 var DEBOUNCE_DELAY = 40;
 var [LayoutPopoverProvider, useLayoutPopoverContext] = createContext3("LayoutPopover");
 var PopoverRoot = ({ children }) => {
@@ -663,10 +468,10 @@ var PopoverRoot = ({ children }) => {
   }), children));
 };
 var PopoverContent = () => {
-  const { t } = useTranslation3(meta.id);
+  const { t } = useTranslation2(meta2.id);
   const { state, updateState } = useSimpleLayoutState();
   const { setOpen } = useLayoutPopoverContext("PopoverContent");
-  const handleClose = useCallback4(() => {
+  const handleClose = useCallback3(() => {
     setOpen(false);
     updateState((s) => ({
       ...s,
@@ -679,7 +484,7 @@ var PopoverContent = () => {
     setOpen,
     updateState
   ]);
-  const handleInteractOutside = useCallback4((event) => {
+  const handleInteractOutside = useCallback3((event) => {
     if (
       // TODO(thure): CodeMirror should not focus itself when it updates.
       event.type === "dismissableLayer.focusOutside" && event.currentTarget?.classList.contains("cm-content")
@@ -691,7 +496,7 @@ var PopoverContent = () => {
   }, [
     handleClose
   ]);
-  const collisionBoundaries = useMemo4(() => {
+  const collisionBoundaries = useMemo2(() => {
     const closest = state.popoverAnchor?.closest("[data-popover-collision-boundary]");
     return closest ? [
       closest
@@ -706,40 +511,43 @@ var PopoverContent = () => {
     collisionBoundary: collisionBoundaries,
     onInteractOutside: handleInteractOutside,
     onEscapeKeyDown: handleInteractOutside
-  }, /* @__PURE__ */ React5.createElement(Popover.Viewport, null, state.popoverKind === "base" && /* @__PURE__ */ React5.createElement(Surface.Surface, {
-    role: "popover",
+  }, /* @__PURE__ */ React5.createElement(Popover.Viewport, null, state.popoverKind === "base" && state.popoverContent && "component" in state.popoverContent && /* @__PURE__ */ React5.createElement(Surface.Surface, {
+    type: AppSurface.Popover,
     data: state.popoverContent,
     limit: 1
   }), state.popoverKind === "card" && /* @__PURE__ */ React5.createElement(Card2.Root, {
     border: false,
     classNames: "dx-card-popover"
-  }, /* @__PURE__ */ React5.createElement(Card2.Toolbar, null, /* @__PURE__ */ React5.createElement("span", null), state.popoverTitle ? /* @__PURE__ */ React5.createElement(Card2.Title, null, toLocalizedString3(state.popoverTitle, t)) : /* @__PURE__ */ React5.createElement("span", null), /* @__PURE__ */ React5.createElement(Card2.CloseIconButton, {
+  }, /* @__PURE__ */ React5.createElement(Card2.Toolbar, null, /* @__PURE__ */ React5.createElement("span", null), state.popoverTitle ? /* @__PURE__ */ React5.createElement(Card2.Title, null, toLocalizedString2(state.popoverTitle, t)) : /* @__PURE__ */ React5.createElement("span", null), /* @__PURE__ */ React5.createElement(Card2.CloseIconButton, {
     onClick: handleClose
-  })), /* @__PURE__ */ React5.createElement(Surface.Surface, {
-    role: "card--content",
+  })), state.popoverContent && "subject" in state.popoverContent && /* @__PURE__ */ React5.createElement(Surface.Surface, {
+    type: AppSurface.Card,
     data: state.popoverContent,
     limit: 1
   }))), /* @__PURE__ */ React5.createElement(Popover.Arrow, null)));
 };
 
 // src/components/SimpleLayout/AppBar.tsx
-import { useAtomValue as useAtomValue2 } from "@effect-atom/atom-react";
+import { useAtomValue } from "@effect-atom/atom-react";
 import React6, { Fragment } from "react";
-import { IconButton, Popover as Popover2, Toolbar, useTranslation as useTranslation4 } from "@dxos/react-ui";
+import { DensityProvider, IconButton, Popover as Popover2, Toolbar, useTranslation as useTranslation3 } from "@dxos/react-ui";
 import { Menu, useMenuActions } from "@dxos/react-ui-menu";
 import { composable, composableProps, osTranslations } from "@dxos/ui-theme";
+import { meta as meta3 } from "#meta";
 var APP_BAR_NAME = "SimpleLayout.AppBar";
 var AppBar = composable(({ classNames, title, actions, showBackButton, popoverAnchorId, onAction, onBack, ...props }, forwardedRef) => {
-  const { t } = useTranslation4(meta.id);
+  const { t } = useTranslation3(meta3.id);
   const menuActions = useMenuActions(actions);
-  const actionsValue = useAtomValue2(actions);
+  const actionsValue = useAtomValue(actions);
   const hasActions = actionsValue.nodes.length > 0;
   const { keyboardOpen } = useMobileLayout(APP_BAR_NAME);
-  const displayTitle = title ?? t("current app name", {
+  const displayTitle = title ?? t("current-app.name", {
     ns: osTranslations
   });
   const AnchorRoot = popoverAnchorId ? Popover2.Anchor : Fragment;
-  return /* @__PURE__ */ React6.createElement(Toolbar.Root, {
+  return /* @__PURE__ */ React6.createElement(DensityProvider, {
+    density: "fine"
+  }, /* @__PURE__ */ React6.createElement(Toolbar.Root, {
     ...composableProps(props, {
       role: "banner",
       classNames: "grid grid-cols-[var(--dx-rail-size)_1fr_var(--dx-rail-size)] items-center dx-density-fine"
@@ -749,18 +557,18 @@ var AppBar = composable(({ classNames, title, actions, showBackButton, popoverAn
     variant: "ghost",
     icon: "ph--x--regular",
     iconOnly: true,
-    label: t("done label")
+    label: t("done.label")
   }) : showBackButton ? /* @__PURE__ */ React6.createElement(IconButton, {
     variant: "ghost",
     icon: "ph--caret-left--regular",
     iconOnly: true,
-    label: t("back label"),
+    label: t("back.label"),
     onClick: onBack
   }) : /* @__PURE__ */ React6.createElement("div", null), /* @__PURE__ */ React6.createElement("h1", {
     className: "text-center truncate font-thin uppercase"
   }, displayTitle), hasActions ? /* @__PURE__ */ React6.createElement(AnchorRoot, null, /* @__PURE__ */ React6.createElement(Menu.Root, {
     ...menuActions,
-    caller: meta.id,
+    caller: meta3.id,
     onAction
   }, /* @__PURE__ */ React6.createElement(Menu.Trigger, {
     asChild: true
@@ -768,18 +576,19 @@ var AppBar = composable(({ classNames, title, actions, showBackButton, popoverAn
     variant: "ghost",
     icon: "ph--dots-three-vertical--regular",
     iconOnly: true,
-    label: t("actions menu label")
-  })), /* @__PURE__ */ React6.createElement(Menu.Content, null))) : /* @__PURE__ */ React6.createElement("span", null));
+    label: t("actions-menu.label")
+  })), /* @__PURE__ */ React6.createElement(Menu.Content, null))) : /* @__PURE__ */ React6.createElement("span", null)));
 });
 AppBar.displayName = APP_BAR_NAME;
 
 // src/components/SimpleLayout/Main.tsx
-import React8, { useMemo as useMemo5 } from "react";
+import React8, { useMemo as useMemo3 } 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 { AppSurface as AppSurface2, useAppGraph as useAppGraph3 } from "@dxos/app-toolkit/ui";
+import { useNode } from "@dxos/plugin-graph";
 import { ErrorFallback, Panel } from "@dxos/react-ui";
 import { useAttentionAttributes } from "@dxos/react-ui-attention";
+import { useAppBarProps, useNavbarActions, useSimpleLayoutState as useSimpleLayoutState2 } from "#hooks";
 
 // src/components/SimpleLayout/NavBar.tsx
 import React7 from "react";
@@ -802,16 +611,16 @@ NavBar.displayName = NAVBAR_NAME;
 // src/components/SimpleLayout/Main.tsx
 var MAIN_NAME = "SimpleLayout.Main";
 var Main = () => {
-  const { state } = useSimpleLayoutState();
+  const { state } = useSimpleLayoutState2();
   const id = state.active ?? state.workspace;
   const attentionAttrs = useAttentionAttributes(id);
   const { keyboardOpen } = useMobileLayout(MAIN_NAME);
   const { actions, onAction } = useNavbarActions();
   const appBarProps = useAppBarProps();
-  const placeholder = useMemo5(() => /* @__PURE__ */ React8.createElement(Loading, null), []);
-  const { graph } = useAppGraph5();
-  const node = useNode2(graph, id);
-  const data = useMemo5(() => {
+  const placeholder = useMemo3(() => /* @__PURE__ */ React8.createElement(Loading, null), []);
+  const { graph } = useAppGraph3();
+  const node = useNode(graph, id);
+  const data = useMemo3(() => {
     return node && {
       attendableId: id,
       subject: node.data,
@@ -837,7 +646,7 @@ var Main = () => {
     className: "bg-base-surface"
   }, /* @__PURE__ */ React8.createElement(Surface2.Surface, {
     key: id,
-    role: "article",
+    type: AppSurface2.Article,
     data,
     limit: 1,
     fallback: ErrorFallback,
@@ -851,314 +660,71 @@ var Main = () => {
 };
 Main.displayName = MAIN_NAME;
 
-// src/components/NavBranch/NavBranch.tsx
-import React9, { useCallback as useCallback5, useEffect as useEffect5, useMemo as useMemo6, useRef as useRef4 } from "react";
-import { useOperationInvoker as useOperationInvoker3 } from "@dxos/app-framework/ui";
-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, ScrollArea as ScrollArea2, toLocalizedString as toLocalizedString4, useTranslation as useTranslation5 } from "@dxos/react-ui";
-import { Card as Card3 } from "@dxos/react-ui";
+// src/components/SimpleLayout/SimpleLayout.tsx
+import React11, { useLayoutEffect as useLayoutEffect2, useRef as useRef4, useState as useState3 } from "react";
+import { Splitter } from "@dxos/react-ui";
 import { Mosaic as Mosaic2 } from "@dxos/react-ui-mosaic";
-import { SearchPanel as SearchPanel2, useSearchListItem as useSearchListItem2, useSearchListResults as useSearchListResults2 } from "@dxos/react-ui-search";
-import { mx as mx3 } from "@dxos/ui-theme";
-var NavBranch = ({ id }) => {
-  const { t } = useTranslation5(meta.id);
-  const { graph } = useAppGraph6();
-  useExpandPath(id);
-  const children = useConnections3(graph, id, "child");
-  const visibleChildren = useMemo6(() => children.filter((node) => node.properties.disposition !== "alternate-tree" && node.properties.disposition !== "hidden"), [
-    children
-  ]);
-  const { results, handleSearch } = useSearchListResults2({
-    items: visibleChildren,
-    extract: (child) => toLocalizedString4(child.properties.label, t)
-  });
-  return /* @__PURE__ */ React9.createElement(SearchPanel2, {
-    onSearch: handleSearch
-  }, /* @__PURE__ */ React9.createElement(Mosaic2.Container, {
-    asChild: true
-  }, /* @__PURE__ */ React9.createElement(ScrollArea2.Root, {
-    centered: true,
-    padding: true,
-    thin: true
-  }, /* @__PURE__ */ React9.createElement(ScrollArea2.Viewport, null, /* @__PURE__ */ React9.createElement(Mosaic2.Stack, {
-    classNames: "gap-1",
-    draggable: false,
-    items: results,
-    getId: (item) => item.id,
-    Tile: NavBranchTile
-  })))));
-};
-var NavBranchTile = (props) => {
-  const data = props.data;
-  const { t } = useTranslation5(meta.id);
-  const { invokePromise } = useOperationInvoker3();
-  const ref = useRef4(null);
-  const { selectedValue, registerItem, unregisterItem } = useSearchListItem2();
-  const isSelected = selectedValue === data.id;
-  const name = toLocalizedString4(data.properties.label, t);
-  const handleSelect = useCallback5(() => void invokePromise(LayoutOperation3.Open, {
-    subject: [
-      data.id
-    ]
-  }), [
-    invokePromise,
-    data.id
-  ]);
-  useEffect5(() => {
-    if (ref.current) {
-      registerItem(data.id, ref.current, handleSelect);
-    }
-    return () => unregisterItem(data.id);
-  }, [
-    data.id,
-    handleSelect,
-    registerItem,
-    unregisterItem
-  ]);
-  useEffect5(() => {
-    if (isSelected && ref.current) {
-      ref.current.scrollIntoView({
-        block: "nearest",
-        behavior: "smooth"
-      });
-    }
-  }, [
-    isSelected
-  ]);
-  return /* @__PURE__ */ React9.createElement(Card3.Root, {
-    ref,
-    role: "button",
-    fullWidth: true,
-    tabIndex: -1,
-    "data-selected": isSelected,
-    classNames: mx3("dx-focus-ring cursor-pointer", isSelected && "bg-hover-overlay"),
-    onClick: handleSelect
-  }, /* @__PURE__ */ React9.createElement(Card3.Toolbar, null, /* @__PURE__ */ React9.createElement(Avatar2.Root, null, /* @__PURE__ */ React9.createElement(Avatar2.Content, {
-    hue: data.properties.hue,
-    icon: data.properties.icon,
-    hueVariant: "transparent",
-    variant: "square",
-    size: 8,
-    fallback: name
-  }), /* @__PURE__ */ React9.createElement(Avatar2.Label, null, name), /* @__PURE__ */ React9.createElement(Icon2, {
-    icon: "ph--caret-right--regular"
-  }))));
-};
-
-// src/hooks/useSimpleLayoutState.ts
-import { RegistryContext, useAtomValue as useAtomValue3 } from "@effect-atom/atom-react";
-import { useCallback as useCallback6, useContext } from "react";
-import { useCapability as useCapability2 } from "@dxos/app-framework/ui";
-var useSimpleLayoutState = () => {
-  const registry = useContext(RegistryContext);
-  const stateAtom = useCapability2(SimpleLayoutState);
-  const state = useAtomValue3(stateAtom);
-  const updateState = useCallback6((fn) => {
-    registry.set(stateAtom, fn(registry.get(stateAtom)));
-  }, [
-    registry,
-    stateAtom
-  ]);
-  return {
-    state,
-    updateState
-  };
-};
-
-// src/hooks/useDrawerActions.ts
-var useDrawerActions = (consumerName) => {
-  const { t } = useTranslation6(meta.id);
-  const stateAtom = useCapability3(SimpleLayoutState);
-  const { graph } = useAppGraph7();
-  const runAction = useActionRunner2();
-  const { updateState } = useSimpleLayoutState();
-  const { keyboardOpen } = useMobileLayout(consumerName);
-  const actionsAtom = useMemo7(() => Atom2.make((get) => {
-    const state = get(stateAtom);
-    const { nodes, edges } = createCompanionActions(graph, stateAtom, get, {
-      idPrefix: "drawer",
-      selectedVariant: state.drawerState !== "closed" ? state.companionVariant : void 0,
-      updateState
-    });
-    const gapSeparator = createGapSeparator("drawer-gap");
-    nodes.push(...gapSeparator.nodes);
-    edges.push(...gapSeparator.edges);
-    if (!keyboardOpen) {
-      const isExpanded = state.drawerState === "expanded";
-      const toggleExpandAction = {
-        id: "drawer-toggle-expand",
-        type: Node4.ActionType,
-        properties: {
-          icon: isExpanded ? "ph--arrow-down--regular" : "ph--arrow-up--regular",
-          label: isExpanded ? t("collapse drawer label") : t("expand drawer label"),
-          iconOnly: true
-        },
-        data: () => Effect3.sync(() => updateState((state2) => ({
-          ...state2,
-          drawerState: isExpanded ? "open" : "expanded"
-        })))
-      };
-      nodes.push(toggleExpandAction);
-      edges.push({
-        source: "root",
-        target: toggleExpandAction.id,
-        relation: "child"
-      });
-    }
-    const closeAction = {
-      id: "drawer-close",
-      type: Node4.ActionType,
-      properties: {
-        icon: "ph--x--regular",
-        label: t("close drawer label"),
-        iconOnly: true
-      },
-      data: () => Effect3.sync(() => updateState((state2) => ({
-        ...state2,
-        drawerState: "closed",
-        companionVariant: void 0
-      })))
-    };
-    nodes.push(closeAction);
-    edges.push({
-      source: "root",
-      target: closeAction.id,
-      relation: "child"
-    });
-    return {
-      nodes,
-      edges
-    };
-  }), [
-    graph,
-    stateAtom,
-    updateState,
-    keyboardOpen,
-    t
-  ]);
-  return {
-    actions: actionsAtom,
-    onAction: runAction
-  };
-};
-
-// src/hooks/useNavbarActions.ts
-import { Atom as Atom3 } from "@effect-atom/atom-react";
-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 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 } = useTranslation7(meta.id);
-  const { graph } = useAppGraph8();
-  const runAction = useActionRunner3();
-  const stateAtom = useCapability4(SimpleLayoutState);
-  const { updateState } = useSimpleLayoutState();
-  const actionsAtom = useMemo8(() => Atom3.make((get) => {
-    const { nodes, edges } = createCompanionActions(graph, stateAtom, get, {
-      idPrefix: "navbar",
-      updateState
-    });
-    const gapSeparator = createGapSeparator2("navbar-gap");
-    nodes.push(...gapSeparator.nodes);
-    edges.push(...gapSeparator.edges);
-    const mainMenuGroup = createMenuItemGroup(MAIN_MENU_GROUP_ID, {
-      variant: "dropdownMenu",
-      icon: "ph--list--regular",
-      iconOnly: true,
-      label: t("main menu label"),
-      testId: "simpleLayoutPlugin.addSpace"
-    });
-    nodes.push(mainMenuGroup);
-    edges.push({
-      source: "root",
-      target: mainMenuGroup.id,
-      relation: "child"
-    });
-    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,
-        relation: "child"
-      });
-    });
-    return {
-      nodes,
-      edges
-    };
-  }), [
-    graph,
-    stateAtom,
-    updateState,
-    t
-  ]);
-  return {
-    actions: actionsAtom,
-    onAction: runAction
-  };
-};
+import { useSimpleLayoutState as useSimpleLayoutState5 } from "#hooks";
 
 // src/components/Dialog/Dialog.tsx
-import React10 from "react";
+import React9 from "react";
 import { Surface as Surface3 } from "@dxos/app-framework/ui";
+import { AppSurface as AppSurface3 } from "@dxos/app-toolkit/ui";
 import { AlertDialog, Dialog as NaturalDialog } from "@dxos/react-ui";
 import { ErrorFallback as ErrorFallback2 } from "@dxos/react-ui";
+import { useSimpleLayoutState as useSimpleLayoutState3 } from "#hooks";
 var Dialog = () => {
-  const { state, updateState } = useSimpleLayoutState();
+  const { state, updateState } = useSimpleLayoutState3();
   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, {
-    role: "dialog",
-    data: state.dialogContent,
+  }, state.dialogBlockAlign === "end" ? /* @__PURE__ */ React9.createElement(Surface3.Surface, {
+    type: AppSurface3.Dialog,
+    data: state.dialogContent ?? void 0,
     limit: 1,
     fallback: ErrorFallback2
-  }) : /* @__PURE__ */ React10.createElement(DialogOverlay, {
+  }) : /* @__PURE__ */ React9.createElement(DialogOverlay, {
     blockAlign: state.dialogBlockAlign,
     classNames: state.dialogOverlayClasses,
     style: state.dialogOverlayStyle
-  }, /* @__PURE__ */ React10.createElement(Surface3.Surface, {
-    role: "dialog",
-    data: state.dialogContent,
+  }, /* @__PURE__ */ React9.createElement(Surface3.Surface, {
+    type: AppSurface3.Dialog,
+    data: state.dialogContent ?? void 0,
     limit: 1,
     fallback: ErrorFallback2
   })));
 };
 
 // src/components/SimpleLayout/Drawer.tsx
-import React11, { useMemo as useMemo9 } from "react";
+import React10, { useMemo as useMemo4 } 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 { AppSurface as AppSurface4, useAppGraph as useAppGraph4 } from "@dxos/app-toolkit/ui";
+import { useNode as useNode2 } from "@dxos/plugin-graph";
 import { ErrorFallback as ErrorFallback3, Panel as Panel2 } from "@dxos/react-ui";
+import { getLinkedVariant } from "@dxos/react-ui-attention";
 import { Menu as Menu3, useMenuActions as useMenuActions3 } from "@dxos/react-ui-menu";
+import { useCompanions, useDrawerActions, useSimpleLayoutState as useSimpleLayoutState4 } from "#hooks";
 var DRAWER_NAME = "SimpleLayout.Drawer";
 var Drawer = () => {
-  const { graph } = useAppGraph9();
-  const { state: layoutState } = useSimpleLayoutState();
-  const placeholder = useMemo9(() => /* @__PURE__ */ React11.createElement(Loading, null), []);
+  const { graph } = useAppGraph4();
+  const { state: layoutState } = useSimpleLayoutState4();
+  const placeholder = useMemo4(() => /* @__PURE__ */ React10.createElement(Loading, 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 = useMemo9(() => {
-    return node && {
+  const node = useNode2(graph, companionId);
+  const parentNode = useNode2(graph, activeId);
+  const data = useMemo4(() => {
+    if (!node || !companionId) {
+      return void 0;
+    }
+    return {
       attendableId: companionId,
       subject: node.data,
       companionTo: parentNode?.data,
@@ -1173,12 +739,12 @@ var Drawer = () => {
   ]);
   const { actions, onAction } = useDrawerActions(DRAWER_NAME);
   const menuActions = useMenuActions3(actions);
-  return /* @__PURE__ */ React11.createElement(Panel2.Root, null, /* @__PURE__ */ React11.createElement(Panel2.Toolbar, null, /* @__PURE__ */ React11.createElement(Menu3.Root, {
+  return /* @__PURE__ */ React10.createElement(Panel2.Root, null, /* @__PURE__ */ React10.createElement(Panel2.Toolbar, null, /* @__PURE__ */ React10.createElement(Menu3.Root, {
     ...menuActions,
     alwaysActive: true,
     onAction
-  }, /* @__PURE__ */ React11.createElement(Menu3.Toolbar, null))), /* @__PURE__ */ React11.createElement(Panel2.Content, null, /* @__PURE__ */ React11.createElement(Surface4.Surface, {
-    role: "article",
+  }, /* @__PURE__ */ React10.createElement(Menu3.Toolbar, null))), /* @__PURE__ */ React10.createElement(Panel2.Content, null, /* @__PURE__ */ React10.createElement(Surface4.Surface, {
+    type: AppSurface4.Article,
     data,
     limit: 1,
     fallback: ErrorFallback3,
@@ -1187,12 +753,12 @@ var Drawer = () => {
 };
 Drawer.displayName = DRAWER_NAME;
 var useSelectedCompanion = (companions, preferredVariant) => {
-  const selectedCompanion = useMemo9(() => {
+  const selectedCompanion = useMemo4(() => {
     if (companions.length === 0) {
       return void 0;
     }
     if (preferredVariant) {
-      const preferred = companions.find((c) => getCompanionVariant2(c.id) === preferredVariant);
+      const preferred = companions.find((c) => getLinkedVariant(c.id) === preferredVariant);
       if (preferred) {
         return preferred;
       }
@@ -1203,7 +769,7 @@ var useSelectedCompanion = (companions, preferredVariant) => {
     preferredVariant
   ]);
   const companionId = selectedCompanion?.id;
-  const variant = companionId ? getCompanionVariant2(companionId) : void 0;
+  const variant = companionId ? getLinkedVariant(companionId) : void 0;
   return {
     selectedCompanion,
     companionId,
@@ -1213,44 +779,148 @@ var useSelectedCompanion = (companions, preferredVariant) => {
 
 // src/components/SimpleLayout/SimpleLayout.tsx
 var SimpleLayout = () => {
-  const { state } = useSimpleLayoutState();
+  const { state } = useSimpleLayoutState5();
   const [keyboardOpen, setKeyboardOpen] = useState3(false);
-  const [splitterMode, setSplitterMode] = useState3("upper");
-  const drawerRef = useRef5(null);
+  const [splitterMode, setSplitterMode] = useState3("top");
+  const drawerRef = useRef4(null);
   useLayoutEffect2(() => {
     if (!keyboardOpen) {
-      setSplitterMode(state.drawerState === "closed" ? "upper" : state.drawerState === "open" ? "both" : "lower");
+      setSplitterMode(state.drawerState === "closed" ? "top" : state.drawerState === "open" ? "split" : "bottom");
     }
   }, [
     state.drawerState,
     keyboardOpen
   ]);
-  return /* @__PURE__ */ React12.createElement(DebugOverlay.Root, {
+  return /* @__PURE__ */ React11.createElement(DebugOverlay.Root, {
     enabled: false
-  }, /* @__PURE__ */ React12.createElement(PopoverRoot, null, /* @__PURE__ */ React12.createElement(Mosaic3.Root, {
-    classNames: "dx-container grid relative"
-  }, /* @__PURE__ */ React12.createElement(MobileLayout.Root, {
-    classNames: "bg-toolbar-surface",
+  }, /* @__PURE__ */ React11.createElement(PopoverRoot, null, /* @__PURE__ */ React11.createElement(Mosaic2.Root, null, /* @__PURE__ */ React11.createElement(MobileLayout.Root, {
+    classNames: "dx-container grid relative bg-toolbar-surface",
     onKeyboardOpenChange: (nextKeyboardOpen) => setKeyboardOpen(nextKeyboardOpen)
-  }, /* @__PURE__ */ React12.createElement(MobileLayout.Panel, {
+  }, /* @__PURE__ */ React11.createElement(MobileLayout.Panel, {
     safe: {
       top: true,
-      bottom: splitterMode === "upper"
+      bottom: splitterMode === "top"
     }
-  }, /* @__PURE__ */ React12.createElement(Splitter.Root, {
+  }, /* @__PURE__ */ React11.createElement(Splitter.Root, {
     mode: splitterMode,
     ratio: 0.55
-  }, /* @__PURE__ */ React12.createElement(Splitter.Panel, {
-    position: "upper"
-  }, /* @__PURE__ */ React12.createElement(Main, null)), /* @__PURE__ */ React12.createElement(Splitter.Panel, {
-    position: "lower",
+  }, /* @__PURE__ */ React11.createElement(Splitter.Panel, {
+    position: "top"
+  }, /* @__PURE__ */ React11.createElement(Main, null)), /* @__PURE__ */ React11.createElement(Splitter.Panel, {
+    position: "bottom",
     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))))));
 };
 
+// src/components/NavBranch/NavBranch.tsx
+import React12, { useCallback as useCallback4, useEffect as useEffect5, useMemo as useMemo5, useRef as useRef5 } from "react";
+import { useOperationInvoker as useOperationInvoker2 } from "@dxos/app-framework/ui";
+import { LayoutOperation as LayoutOperation2 } from "@dxos/app-toolkit";
+import { useAppGraph as useAppGraph5 } from "@dxos/app-toolkit/ui";
+import { useConnections as useConnections2 } from "@dxos/plugin-graph";
+import { Avatar as Avatar2, Icon as Icon2, ScrollArea as ScrollArea2, toLocalizedString as toLocalizedString3, useTranslation as useTranslation4 } from "@dxos/react-ui";
+import { Card as Card3 } from "@dxos/react-ui";
+import { Mosaic as Mosaic3 } from "@dxos/react-ui-mosaic";
+import { SearchPanel as SearchPanel2, useSearchListItem as useSearchListItem2, useSearchListResults as useSearchListResults2 } from "@dxos/react-ui-search";
+import { mx as mx3 } from "@dxos/ui-theme";
+import { meta as meta4 } from "#meta";
+var NavBranch = ({ id }) => {
+  const { t } = useTranslation4(meta4.id);
+  const { graph } = useAppGraph5();
+  useExpandPath(id);
+  const children = useConnections2(graph, id, "child");
+  const visibleChildren = useMemo5(() => children.filter((node) => node.properties.disposition !== "hidden"), [
+    children
+  ]);
+  const { results, handleSearch } = useSearchListResults2({
+    items: visibleChildren,
+    extract: (child) => toLocalizedString3(child.properties.label, t)
+  });
+  return /* @__PURE__ */ React12.createElement(SearchPanel2, {
+    onSearch: handleSearch
+  }, /* @__PURE__ */ React12.createElement(Mosaic3.Container, {
+    asChild: true
+  }, /* @__PURE__ */ React12.createElement(ScrollArea2.Root, {
+    centered: true,
+    padding: true,
+    thin: true
+  }, /* @__PURE__ */ React12.createElement(ScrollArea2.Viewport, null, /* @__PURE__ */ React12.createElement(Mosaic3.Stack, {
+    classNames: "gap-1",
+    draggable: false,
+    items: results,
+    getId: (item) => item.id,
+    Tile: NavBranchTile
+  })))));
+};
+var NavBranchTile = (props) => {
+  const data = props.data;
+  const { t } = useTranslation4(meta4.id);
+  const { invokePromise } = useOperationInvoker2();
+  const ref = useRef5(null);
+  const { selectedValue, registerItem, unregisterItem } = useSearchListItem2();
+  const isSelected = selectedValue === data.id;
+  const name = toLocalizedString3(data.properties.label, t);
+  const handleSelect = useCallback4(() => void invokePromise(LayoutOperation2.Open, {
+    subject: [
+      data.id
+    ]
+  }), [
+    invokePromise,
+    data.id
+  ]);
+  useEffect5(() => {
+    if (ref.current) {
+      registerItem(data.id, ref.current, handleSelect);
+    }
+    return () => unregisterItem(data.id);
+  }, [
+    data.id,
+    handleSelect,
+    registerItem,
+    unregisterItem
+  ]);
+  useEffect5(() => {
+    if (isSelected && ref.current) {
+      ref.current.scrollIntoView({
+        block: "nearest",
+        behavior: "smooth"
+      });
+    }
+  }, [
+    isSelected
+  ]);
+  return /* @__PURE__ */ React12.createElement(Card3.Root, {
+    ref,
+    role: "button",
+    fullWidth: true,
+    tabIndex: -1,
+    "data-selected": isSelected,
+    classNames: mx3("dx-focus-ring cursor-pointer", isSelected && "bg-selected-surface"),
+    onClick: handleSelect
+  }, /* @__PURE__ */ React12.createElement(Card3.Toolbar, null, /* @__PURE__ */ React12.createElement(Avatar2.Root, null, /* @__PURE__ */ React12.createElement(Avatar2.Content, {
+    hue: data.properties.hue,
+    icon: data.properties.icon,
+    hueVariant: "transparent",
+    variant: "square",
+    size: 8,
+    fallback: name
+  }), /* @__PURE__ */ React12.createElement(Avatar2.Label, null, name), /* @__PURE__ */ React12.createElement(Icon2, {
+    icon: "ph--caret-right--regular"
+  }))));
+};
 export {
+  AppBar,
+  DebugOverlay,
   Home,
+  Loading,
+  Main,
+  MobileLayout,
+  NavBar,
+  NavBranch,
+  PopoverContent,
+  PopoverRoot,
   SimpleLayout,
-  NavBranch
+  useDebugLog,
+  useMobileLayout
 };
-//# sourceMappingURL=chunk-J5FQ32AV.mjs.map
+//# sourceMappingURL=index.mjs.map