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

package/dist/lib/node-esm/{chunk-DCKASLMP.mjs → chunk-EXNDYZTP.mjs}

@@ -10,12 +10,12 @@ 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, Panel, ScrollArea, Toolbar, toLocalizedString, useTranslation } from "@dxos/react-ui";
+import { Avatar, Icon, ScrollArea, 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 { SearchPanel, useSearchListItem, useSearchListResults } from "@dxos/react-ui-search";
 import { mx } from "@dxos/ui-theme";
-import { byPosition } from "@dxos/util";
+import { byPosition, getHostPlatform, isTauri } from "@dxos/util";
 
 // src/components/hooks.ts
 import { useEffect } from "react";
@@ -58,26 +58,22 @@ var Home = (_) => {
     items,
     extract: (node) => toLocalizedString(node.properties.label, t)
   });
-  return /* @__PURE__ */ React.createElement(SearchList.Root, {
+  const autoFocus = !isTauri() || getHostPlatform() !== "ios";
+  return /* @__PURE__ */ React.createElement(SearchPanel, {
     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(Panel.Content, {
-    asChild: true
-  }, /* @__PURE__ */ React.createElement(SearchList.Content, null, /* @__PURE__ */ React.createElement(Mosaic.Container, {
+  }, /* @__PURE__ */ React.createElement(Mosaic.Container, {
     asChild: true
   }, /* @__PURE__ */ React.createElement(ScrollArea.Root, {
-    orientation: "vertical"
-  }, /* @__PURE__ */ React.createElement(ScrollArea.Viewport, {
-    classNames: "p-2"
-  }, /* @__PURE__ */ React.createElement(Mosaic.Stack, {
+    centered: true,
+    padding: true,
+    thin: true
+  }, /* @__PURE__ */ React.createElement(ScrollArea.Viewport, null, /* @__PURE__ */ React.createElement(Mosaic.Stack, {
+    classNames: "gap-1",
+    draggable: false,
     items: results,
-    getId: (node) => node.id,
+    getId: (item) => item.id,
     Tile: WorkspaceTile
-  }))))))));
+  })))));
 };
 var WorkspaceTile = (props) => {
   const data = props.data;
@@ -124,15 +120,17 @@ var WorkspaceTile = (props) => {
     onClick: handleSelect,
     ref: cardRef
   }, /* @__PURE__ */ React.createElement(Card.Toolbar, {
-    density: "coarse"
+    density: "fine"
   }, /* @__PURE__ */ React.createElement(Avatar.Root, null, /* @__PURE__ */ React.createElement(Avatar.Content, {
     icon: data.properties.icon,
     hue: data.properties.hue,
     hueVariant: "transparent",
     variant: "square",
-    size: 12,
+    size: 8,
     fallback: name
-  }), /* @__PURE__ */ React.createElement(Avatar.Label, null, name), /* @__PURE__ */ React.createElement(Icon, {
+  }), /* @__PURE__ */ React.createElement(Avatar.Label, {
+    classNames: "cursor-pointer"
+  }, name), /* @__PURE__ */ React.createElement(Icon, {
     icon: "ph--caret-right--regular"
   }))));
 };
@@ -142,12 +140,18 @@ var filterItems = (node, disposition) => {
 var useItemsByDisposition = (disposition, sort = false) => {
   const { graph } = useAppGraph2();
   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;
+  return useMemo(() => {
+    const filtered = connections.filter((node) => filterItems(node, disposition));
+    return sort ? filtered.toSorted((a, b) => byPosition(a.properties, b.properties)) : filtered;
+  }, [
+    connections,
+    disposition,
+    sort
+  ]);
 };
 
 // src/components/SimpleLayout/SimpleLayout.tsx
-import React11, { useEffect as useEffect6, useRef as useRef4, useState as useState3 } from "react";
+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";
 
@@ -166,7 +170,7 @@ var useAppBarProps = () => {
   const stateAtom = useCapability(SimpleLayoutState);
   const state = useAtomValue(stateAtom);
   const { graph } = useAppGraph3();
-  const { invokeSync } = useOperationInvoker2();
+  const { invokePromise } = useOperationInvoker2();
   const runAction = useActionRunner();
   const activeId = state.active ?? state.workspace;
   const node = useNode(graph, activeId);
@@ -192,7 +196,7 @@ var useAppBarProps = () => {
       const settingsAction = {
         id: `appbar-settings-${alternateTreeNode.id}`,
         type: Node2.ActionType,
-        data: () => Effect.sync(() => invokeSync(LayoutOperation2.Open, {
+        data: () => Effect.promise(() => invokePromise(LayoutOperation2.Open, {
           subject: [
             alternateTreeNode.id
           ]
@@ -222,24 +226,24 @@ var useAppBarProps = () => {
     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) {
-        invokeSync(LayoutOperation2.SwitchWorkspace, {
+        void invokePromise(LayoutOperation2.SwitchWorkspace, {
           subject: Node2.RootId
         });
       } else {
-        invokeSync(LayoutOperation2.Close, {
+        void invokePromise(LayoutOperation2.Close, {
           subject: [
             state.active
           ]
         });
       }
     } else {
-      invokeSync(LayoutOperation2.SwitchWorkspace, {
+      void invokePromise(LayoutOperation2.SwitchWorkspace, {
         subject: Node2.RootId
       });
     }
   }, [
     graph,
-    invokeSync,
+    invokePromise,
     state.active,
     state.history.length
   ]);
@@ -329,18 +333,63 @@ import { Node as Node4, useActionRunner as useActionRunner2 } from "@dxos/plugin
 import { useTranslation as useTranslation6 } from "@dxos/react-ui";
 import { createGapSeparator } from "@dxos/react-ui-menu";
 
-// src/components/ContentLoading/ContentLoading.tsx
-import React2 from "react";
-var ContentLoading = () => {
-  return /* @__PURE__ */ React2.createElement("div", {
+// 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"
   });
 };
 
 // src/components/MobileLayout/MobileLayout.tsx
-import { createContext } from "@radix-ui/react-context";
-import React3, { forwardRef, useEffect as useEffect3, useState } from "react";
+import { createContext as createContext2 } from "@radix-ui/react-context";
+import React4, { forwardRef, useEffect as useEffect3, useLayoutEffect, useState } from "react";
 import { addEventListener, combine } from "@dxos/async";
 import { log } from "@dxos/log";
 import { mx as mx2 } from "@dxos/ui-theme";
@@ -348,38 +397,38 @@ var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-simple-layout/src/com
 var MOBILE_LAYOUT_NAME = "MobileLayout";
 var MOBILE_LAYOUT_ROOT_NAME = "MobileLayout.Root";
 var MOBILE_LAYOUT_PANEL_NAME = "MobileLayout.Panel";
-var [MobileLayoutProvider, useMobileLayout] = createContext(MOBILE_LAYOUT_NAME);
-var MobileLayoutRoot = /* @__PURE__ */ forwardRef(({ classNames, children, transition = 250, onKeyboardOpenChange, ...props }, forwardedRef) => {
+var [MobileLayoutProvider, useMobileLayout] = createContext2(MOBILE_LAYOUT_NAME);
+var MobileLayoutRoot = /* @__PURE__ */ forwardRef(({ classNames, children, transition = 500, onKeyboardOpenChange, ...props }, forwardedRef) => {
   const { open: keyboardOpen } = useIOSKeyboard();
+  useLockBodyScroll(keyboardOpen);
   useAutoScroll();
-  useEffect3(() => onKeyboardOpenChange?.(keyboardOpen), [
-    onKeyboardOpenChange,
-    keyboardOpen
+  useLayoutEffect(() => onKeyboardOpenChange?.(keyboardOpen), [
+    keyboardOpen,
+    onKeyboardOpenChange
   ]);
-  useLockBodyScroll(keyboardOpen);
-  return /* @__PURE__ */ React3.createElement(MobileLayoutProvider, {
+  return /* @__PURE__ */ React4.createElement(MobileLayoutProvider, {
     keyboardOpen
-  }, /* @__PURE__ */ React3.createElement("div", {
+  }, /* @__PURE__ */ React4.createElement("div", {
     ...props,
     role: "none",
     style: {
-      transition: `h-size ${transition}ms ease-out`,
-      blockSize: "calc(100vh - var(--kb-height, 0px))"
+      height: "calc(100vh - var(--kb-height, 0px))",
+      transition: `height ${keyboardOpen ? 0 : transition}ms ease-out`
     },
-    className: mx2("absolute top-0 left-0 right-0 flex flex-col", classNames),
+    className: mx2("fixed top-0 left-0 right-0 grid overflow-hidden", classNames),
     ref: forwardedRef
   }, children));
 });
 MobileLayoutRoot.displayName = MOBILE_LAYOUT_ROOT_NAME;
 var MobileLayoutPanel = /* @__PURE__ */ forwardRef(({ classNames, children, safe, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React3.createElement("div", {
+  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
     },
-    className: mx2("relative h-full flex flex-col overflow-hidden", classNames),
+    className: mx2(classNames),
     ref: forwardedRef
   }, children);
 });
@@ -389,30 +438,51 @@ var MobileLayout = {
   Panel: MobileLayoutPanel
 };
 var useAutoScroll = () => {
+  const { dbg } = useDebugLog("useAutoScroll");
   useEffect3(() => {
-    return addEventListener(
-      document,
-      "focus",
-      (event) => {
-        const target = event.target;
-        if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.tagName === "DIV" && target.isContentEditable) {
-          event.preventDefault();
-          target.focus({
-            preventScroll: true
-          });
-          const scrollX = window.scrollX;
-          const scrollY = window.scrollY;
-          requestAnimationFrame(() => {
-            window.scrollTo(scrollX, scrollY);
-          });
-        }
+    const resetScroll = () => {
+      if (window.scrollX !== 0 || window.scrollY !== 0) {
+        window.scrollTo(0, 0);
+      }
+    };
+    const detectContainerScroll = (event) => {
+      const el = event.target;
+      if (el === document.documentElement || el === document.body) {
+        return;
+      }
+      dbg(`scroll: ${el.tagName}.${Array.from(el.classList).slice(0, 2).join(".")} top=${el.scrollTop.toFixed(0)}`);
+    };
+    return combine(
+      addEventListener(window, "scroll", resetScroll),
+      window.visualViewport ? addEventListener(window.visualViewport, "scroll", resetScroll) : () => {
       },
-      // Important: focus events don't bubble, so capture phase is required.
-      {
+      // TODO(burdon): Remove debug logging.
+      addEventListener(document, "scroll", detectContainerScroll, {
         capture: true
-      }
+      }),
+      // Prevent focus-triggered scroll-into-view on inputs.
+      (() => {
+        let focusingWithPreventScroll = false;
+        return addEventListener(document, "focus", (event) => {
+          if (focusingWithPreventScroll) {
+            return;
+          }
+          const target = event.target;
+          if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable) {
+            focusingWithPreventScroll = true;
+            target.focus({
+              preventScroll: true
+            });
+            focusingWithPreventScroll = false;
+          }
+        }, {
+          capture: true
+        });
+      })()
     );
-  }, []);
+  }, [
+    dbg
+  ]);
 };
 var useLockBodyScroll = (enabled) => {
   useEffect3(() => {
@@ -465,17 +535,20 @@ var useLockBodyScroll = (enabled) => {
   ]);
 };
 var useIOSKeyboard = () => {
+  const { dbg } = useDebugLog("useIOSKeyboard");
   const [open, setOpen] = useState(false);
   const [height, setHeight] = useState(0);
+  const [duration, setDuration] = useState(void 0);
   useEffect3(() => {
     const viewport = window.visualViewport;
     if (!viewport) {
       return;
     }
     const initialHeight = viewport.height ?? window.innerHeight;
-    const updateState = (keyboardHeight, keyboardOpen) => {
+    const updateState = (keyboardHeight, keyboardOpen, animationDuration) => {
       setOpen(keyboardOpen);
       setHeight(keyboardHeight);
+      setDuration(animationDuration);
       const vvh = initialHeight - keyboardHeight;
       document.documentElement.style.setProperty("--vvh", `${vvh}px`);
       document.documentElement.style.setProperty("--kb-height", `${keyboardHeight}px`);
@@ -484,52 +557,84 @@ var useIOSKeyboard = () => {
         initialHeight,
         vvh,
         keyboardHeight,
-        keyboardOpen
+        keyboardOpen,
+        animationDuration
       }, {
         F: __dxlog_file,
-        L: 287,
+        L: 318,
         S: void 0,
         C: (f, a) => f(...a)
       });
     };
+    let rafId;
     return combine(
       // Handler for native iOS keyboard events (from KeyboardObserver.swift).
       addEventListener(window, "keyboard", (event) => {
-        const { type, height: height2 } = event.detail;
+        const { type, height: height2, duration: duration2 } = event.detail;
+        const durationMs = duration2 < 1 ? duration2 * 1e3 : duration2;
+        const vp = window.visualViewport;
+        dbg(`kb:${type} h=${height2} dur=${duration2} scrollY=${window.scrollY} vpOffset=${vp?.offsetTop?.toFixed(0) ?? "?"}`);
         log.info("keyboard event", {
           type,
-          height: height2
+          height: height2,
+          duration: duration2
         }, {
           F: __dxlog_file,
-          L: 297,
+          L: 338,
           S: void 0,
           C: (f, a) => f(...a)
         });
-        updateState(height2, type === "show");
-      })
+        updateState(height2, type === "show", durationMs);
+        const end = performance.now() + durationMs + 300;
+        let prevOffsetTop = vp?.offsetTop ?? 0;
+        let prevScrollY = window.scrollY;
+        const monitorFrame = () => {
+          const offsetTop = vp?.offsetTop ?? 0;
+          const scrollY = window.scrollY;
+          if (offsetTop !== prevOffsetTop || scrollY !== prevScrollY) {
+            dbg(`\u0394 vpOffset=${offsetTop.toFixed(0)} scrollY=${scrollY.toFixed(0)}`);
+            prevOffsetTop = offsetTop;
+            prevScrollY = scrollY;
+          }
+          if (scrollY !== 0) {
+            window.scrollTo(0, 0);
+          }
+          if (performance.now() < end) {
+            rafId = requestAnimationFrame(monitorFrame);
+          }
+        };
+        rafId = requestAnimationFrame(monitorFrame);
+      }),
+      () => {
+        if (rafId !== void 0) {
+          cancelAnimationFrame(rafId);
+        }
+      }
     );
-  }, []);
+  }, [
+    dbg
+  ]);
   return {
     open,
-    height
+    height,
+    duration
   };
 };
 
 // src/components/Popover/Popover.tsx
-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 { 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 { 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";
 var DEBOUNCE_DELAY = 40;
-var [LayoutPopoverProvider, useLayoutPopoverContext] = createContext2("LayoutPopover");
+var [LayoutPopoverProvider, useLayoutPopoverContext] = createContext3("LayoutPopover");
 var PopoverRoot = ({ children }) => {
   const { state } = useSimpleLayoutState();
   const [open, setOpen] = useState2(false);
-  const virtualRef = useRef2(null);
+  const virtualRef = useRef3(null);
   const [virtualIter, setVirtualIter] = useState2(0);
-  const debounceRef = useRef2(null);
+  const debounceRef = useRef3(null);
   useEffect4(() => {
     setOpen(false);
     if (state.popoverOpen) {
@@ -548,23 +653,21 @@ var PopoverRoot = ({ children }) => {
     state.popoverAnchor,
     state.popoverContent
   ]);
-  return /* @__PURE__ */ React4.createElement(LayoutPopoverProvider, {
+  return /* @__PURE__ */ React5.createElement(LayoutPopoverProvider, {
     setOpen
-  }, /* @__PURE__ */ React4.createElement(Popover.Root, {
+  }, /* @__PURE__ */ React5.createElement(Popover.Root, {
     modal: false,
     open
-  }, state.popoverAnchor && /* @__PURE__ */ React4.createElement(Popover.VirtualTrigger, {
+  }, state.popoverAnchor && /* @__PURE__ */ React5.createElement(Popover.VirtualTrigger, {
     key: virtualIter,
     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(() => {
+  const handleClose = useCallback4(() => {
     setOpen(false);
     updateState((s) => ({
       ...s,
@@ -577,7 +680,7 @@ var PopoverContent = () => {
     setOpen,
     updateState
   ]);
-  const handleInteractOutside = useCallback3((event) => {
+  const handleInteractOutside = useCallback4((event) => {
     if (
       // TODO(thure): CodeMirror should not focus itself when it updates.
       event.type === "dismissableLayer.focusOutside" && event.currentTarget?.classList.contains("cm-content")
@@ -597,41 +700,39 @@ var PopoverContent = () => {
   }, [
     state.popoverAnchor
   ]);
-  return /* @__PURE__ */ React4.createElement(Popover.Portal, null, /* @__PURE__ */ React4.createElement(Popover.Content, {
+  return /* @__PURE__ */ React5.createElement(Popover.Portal, null, /* @__PURE__ */ React5.createElement(Popover.Content, {
     side: state.popoverSide,
     sticky: "always",
     hideWhenDetached: true,
     collisionBoundary: collisionBoundaries,
     onInteractOutside: handleInteractOutside,
     onEscapeKeyDown: handleInteractOutside
-  }, /* @__PURE__ */ React4.createElement(Popover.Viewport, null, state.popoverKind === "base" && /* @__PURE__ */ React4.createElement(Surface.Surface, {
+  }, /* @__PURE__ */ React5.createElement(Popover.Viewport, null, state.popoverKind === "base" && /* @__PURE__ */ React5.createElement(Surface.Surface, {
     role: "popover",
     data: state.popoverContent,
     limit: 1
-  }), state.popoverKind === "card" && /* @__PURE__ */ React4.createElement(Card2.Root, {
+  }), state.popoverKind === "card" && /* @__PURE__ */ React5.createElement(Card2.Root, {
     border: false,
     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, {
+  }, /* @__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, {
     onClick: handleClose
-  })), /* @__PURE__ */ React4.createElement(Surface.Surface, {
+  })), /* @__PURE__ */ React5.createElement(Surface.Surface, {
     role: "card--content",
     data: state.popoverContent,
     limit: 1
-  }))), /* @__PURE__ */ React4.createElement(Popover.Arrow, null)));
+  }))), /* @__PURE__ */ React5.createElement(Popover.Arrow, null)));
 };
 
 // src/components/SimpleLayout/AppBar.tsx
 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 React6, { Fragment } from "react";
+import { IconButton, Popover as Popover2, Toolbar, useTranslation as useTranslation4 } from "@dxos/react-ui";
 import { Menu, useMenuActions } from "@dxos/react-ui-menu";
-import { mx as mx3, osTranslations } from "@dxos/ui-theme";
+import { composable, composableProps, osTranslations } from "@dxos/ui-theme";
 var APP_BAR_NAME = "SimpleLayout.AppBar";
-var AppBar = ({ classNames, title, actions, showBackButton, popoverAnchorId, onAction, onBack }) => {
+var AppBar = composable(({ classNames, title, actions, showBackButton, popoverAnchorId, onAction, onBack, ...props }, forwardedRef) => {
   const { t } = useTranslation4(meta.id);
-  const menu = useMenuActions(actions);
+  const menuActions = useMenuActions(actions);
   const actionsValue = useAtomValue2(actions);
   const hasActions = actionsValue.nodes.length > 0;
   const { keyboardOpen } = useMobileLayout(APP_BAR_NAME);
@@ -639,62 +740,64 @@ var AppBar = ({ classNames, title, actions, showBackButton, popoverAnchorId, onA
     ns: osTranslations
   });
   const AnchorRoot = popoverAnchorId ? Popover2.Anchor : Fragment;
-  return /* @__PURE__ */ React5.createElement(Toolbar2.Root, {
-    role: "banner",
-    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, {
+  return /* @__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"
+    }),
+    ref: forwardedRef
+  }, keyboardOpen ? /* @__PURE__ */ React6.createElement(IconButton, {
     variant: "ghost",
     icon: "ph--x--regular",
     iconOnly: true,
     label: t("done label")
-  }) : showBackButton ? /* @__PURE__ */ React5.createElement(IconButton, {
+  }) : showBackButton ? /* @__PURE__ */ React6.createElement(IconButton, {
     variant: "ghost",
     icon: "ph--caret-left--regular",
     iconOnly: true,
     label: t("back label"),
     onClick: onBack
-  }) : /* @__PURE__ */ React5.createElement("div", null), /* @__PURE__ */ React5.createElement("h1", {
+  }) : /* @__PURE__ */ React6.createElement("div", null), /* @__PURE__ */ React6.createElement("h1", {
     className: "text-center truncate font-thin uppercase"
-  }, displayTitle), hasActions ? /* @__PURE__ */ React5.createElement(AnchorRoot, null, /* @__PURE__ */ React5.createElement(Menu.Root, {
-    ...menu,
+  }, displayTitle), hasActions ? /* @__PURE__ */ React6.createElement(AnchorRoot, null, /* @__PURE__ */ React6.createElement(Menu.Root, {
+    ...menuActions,
     caller: meta.id,
     onAction
-  }, /* @__PURE__ */ React5.createElement(Menu.Trigger, {
+  }, /* @__PURE__ */ React6.createElement(Menu.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React5.createElement(IconButton, {
+  }, /* @__PURE__ */ React6.createElement(IconButton, {
     variant: "ghost",
     icon: "ph--dots-three-vertical--regular",
     iconOnly: true,
     label: t("actions menu label")
-  })), /* @__PURE__ */ React5.createElement(Menu.Content, null))) : /* @__PURE__ */ React5.createElement("span", null));
-};
+  })), /* @__PURE__ */ React6.createElement(Menu.Content, null))) : /* @__PURE__ */ React6.createElement("span", null));
+});
 AppBar.displayName = APP_BAR_NAME;
 
 // src/components/SimpleLayout/Main.tsx
-import React7, { useMemo as useMemo5 } from "react";
+import React8, { 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 { ErrorFallback, Panel } from "@dxos/react-ui";
 import { useAttentionAttributes } from "@dxos/react-ui-attention";
-import { mx as mx5 } from "@dxos/ui-theme";
 
 // src/components/SimpleLayout/NavBar.tsx
-import React6 from "react";
+import React7 from "react";
 import { Menu as Menu2, useMenuActions as useMenuActions2 } from "@dxos/react-ui-menu";
-import { mx as mx4 } from "@dxos/ui-theme";
+import { composable as composable2, composableProps as composableProps2 } from "@dxos/ui-theme";
 var NAVBAR_NAME = "SimpleLayout.NavBar";
-var NavBar = ({ classNames, actions, onAction }) => {
-  const menu = useMenuActions2(actions);
-  return /* @__PURE__ */ React6.createElement(Menu2.Root, {
-    ...menu,
+var NavBar = composable2(({ actions, onAction, ...props }, forwardedRef) => {
+  const menuActions = useMenuActions2(actions);
+  return /* @__PURE__ */ React7.createElement(Menu2.Root, {
+    ...menuActions,
     alwaysActive: true,
     onAction
-  }, /* @__PURE__ */ React6.createElement(Menu2.Toolbar, {
-    density: "coarse",
-    classNames: mx4(classNames)
+  }, /* @__PURE__ */ React7.createElement(Menu2.Toolbar, {
+    ...composableProps2(props),
+    ref: forwardedRef
   }));
-};
+});
 NavBar.displayName = NAVBAR_NAME;
 
 // src/components/SimpleLayout/Main.tsx
@@ -706,7 +809,7 @@ var Main = () => {
   const { keyboardOpen } = useMobileLayout(MAIN_NAME);
   const { actions, onAction } = useNavbarActions();
   const appBarProps = useAppBarProps();
-  const placeholder = useMemo5(() => /* @__PURE__ */ React7.createElement(ContentLoading, null), []);
+  const placeholder = useMemo5(() => /* @__PURE__ */ React8.createElement(Loading, null), []);
   const { graph } = useAppGraph5();
   const node = useNode2(graph, id);
   const data = useMemo5(() => {
@@ -725,85 +828,83 @@ var Main = () => {
   ]);
   useExpandPath(id);
   const showNavBar = !keyboardOpen && !state.isPopover && state.drawerState === "closed";
-  return /* @__PURE__ */ React7.createElement("div", {
-    role: "none",
-    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__ */ React7.createElement(AppBar, appBarProps), /* @__PURE__ */ React7.createElement("article", {
-    className: "h-full overflow-hidden bg-base-surface"
-  }, /* @__PURE__ */ React7.createElement(Surface2.Surface, {
+  return /* @__PURE__ */ React8.createElement(Panel.Root, {
+    ...attentionAttrs,
+    className: "dx-document"
+  }, /* @__PURE__ */ React8.createElement(Panel.Toolbar, {
+    asChild: true
+  }, /* @__PURE__ */ React8.createElement(AppBar, appBarProps)), /* @__PURE__ */ React8.createElement(Panel.Content, {
+    role: "article",
+    className: "bg-base-surface"
+  }, /* @__PURE__ */ React8.createElement(Surface2.Surface, {
     key: id,
     role: "article",
     data,
     limit: 1,
     fallback: ErrorFallback,
     placeholder
-  })), showNavBar && /* @__PURE__ */ React7.createElement(NavBar, {
-    classNames: "border-y border-subdued-separator",
+  })), showNavBar && /* @__PURE__ */ React8.createElement(Panel.Statusbar, {
+    asChild: true
+  }, /* @__PURE__ */ React8.createElement(NavBar, {
     actions,
     onAction
-  }));
+  })));
 };
 Main.displayName = MAIN_NAME;
 
 // src/components/NavBranch/NavBranch.tsx
-import React8, { useCallback as useCallback4, useEffect as useEffect5, useMemo as useMemo6, useRef as useRef3 } from "react";
+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, Panel as Panel2, ScrollArea as ScrollArea2, Toolbar as Toolbar3, toLocalizedString as toLocalizedString4, useTranslation as useTranslation5 } from "@dxos/react-ui";
+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";
 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 mx6 } from "@dxos/ui-theme";
+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"), [
+  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__ */ React8.createElement(SearchList2.Root, {
+  return /* @__PURE__ */ React9.createElement(SearchPanel2, {
     onSearch: handleSearch
-  }, /* @__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__ */ React8.createElement(Panel2.Content, {
-    asChild: true
-  }, /* @__PURE__ */ React8.createElement(SearchList2.Content, null, /* @__PURE__ */ React8.createElement(Mosaic2.Container, {
+  }, /* @__PURE__ */ React9.createElement(Mosaic2.Container, {
     asChild: true
-  }, /* @__PURE__ */ React8.createElement(ScrollArea2.Root, {
-    orientation: "vertical"
-  }, /* @__PURE__ */ React8.createElement(ScrollArea2.Viewport, {
-    classNames: "p-2"
-  }, /* @__PURE__ */ React8.createElement(Mosaic2.Stack, {
+  }, /* @__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: (child) => child.id,
+    getId: (item) => item.id,
     Tile: NavBranchTile
-  }))))))));
+  })))));
 };
 var NavBranchTile = (props) => {
   const data = props.data;
   const { t } = useTranslation5(meta.id);
-  const { invokeSync } = useOperationInvoker3();
-  const ref = useRef3(null);
+  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 = useCallback4(() => invokeSync(LayoutOperation3.Open, {
+  const handleSelect = useCallback5(() => void invokePromise(LayoutOperation3.Open, {
     subject: [
       data.id
     ]
   }), [
-    invokeSync,
+    invokePromise,
     data.id
   ]);
   useEffect5(() => {
@@ -827,37 +928,35 @@ var NavBranchTile = (props) => {
   }, [
     isSelected
   ]);
-  return /* @__PURE__ */ React8.createElement(Card3.Root, {
+  return /* @__PURE__ */ React9.createElement(Card3.Root, {
     ref,
     role: "button",
     fullWidth: true,
     tabIndex: -1,
     "data-selected": isSelected,
-    classNames: mx6("dx-focus-ring", isSelected && "bg-hover-overlay"),
+    classNames: mx3("dx-focus-ring cursor-pointer", isSelected && "bg-hover-overlay"),
     onClick: handleSelect
-  }, /* @__PURE__ */ React8.createElement(Card3.Toolbar, {
-    density: "coarse"
-  }, /* @__PURE__ */ React8.createElement(Avatar2.Root, null, /* @__PURE__ */ React8.createElement(Avatar2.Content, {
+  }, /* @__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: 12,
+    size: 8,
     fallback: name
-  }), /* @__PURE__ */ React8.createElement(Avatar2.Label, null, name), /* @__PURE__ */ React8.createElement(Icon2, {
+  }), /* @__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 useCallback5, useContext } from "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 = useCallback5((fn) => {
+  const updateState = useCallback6((fn) => {
     registry.set(stateAtom, fn(registry.get(stateAtom)));
   }, [
     registry,
@@ -881,7 +980,7 @@ var useDrawerActions = (consumerName) => {
     const state = get(stateAtom);
     const { nodes, edges } = createCompanionActions(graph, stateAtom, get, {
       idPrefix: "drawer",
-      selectedVariant: state.companionVariant,
+      selectedVariant: state.drawerState !== "closed" ? state.companionVariant : void 0,
       updateState
     });
     const gapSeparator = createGapSeparator("drawer-gap");
@@ -1009,7 +1108,7 @@ var useNavbarActions = () => {
 };
 
 // src/components/Dialog/Dialog.tsx
-import React9 from "react";
+import React10 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";
@@ -1017,23 +1116,23 @@ 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__ */ React9.createElement(DialogRoot, {
+  return /* @__PURE__ */ React10.createElement(DialogRoot, {
     modal: state.dialogBlockAlign !== "end",
     open: state.dialogOpen,
     onOpenChange: (nextOpen) => updateState((state2) => ({
       ...state2,
       dialogOpen: nextOpen
     }))
-  }, state.dialogBlockAlign === "end" ? /* @__PURE__ */ React9.createElement(Surface3.Surface, {
+  }, state.dialogBlockAlign === "end" ? /* @__PURE__ */ React10.createElement(Surface3.Surface, {
     role: "dialog",
     data: state.dialogContent,
     limit: 1,
     fallback: ErrorFallback2
-  }) : /* @__PURE__ */ React9.createElement(DialogOverlay, {
+  }) : /* @__PURE__ */ React10.createElement(DialogOverlay, {
     blockAlign: state.dialogBlockAlign,
     classNames: state.dialogOverlayClasses,
     style: state.dialogOverlayStyle
-  }, /* @__PURE__ */ React9.createElement(Surface3.Surface, {
+  }, /* @__PURE__ */ React10.createElement(Surface3.Surface, {
     role: "dialog",
     data: state.dialogContent,
     limit: 1,
@@ -1042,18 +1141,18 @@ var Dialog = () => {
 };
 
 // src/components/SimpleLayout/Drawer.tsx
-import React10, { useMemo as useMemo9 } from "react";
+import React11, { useMemo as useMemo9 } from "react";
 import { Surface as Surface4 } from "@dxos/app-framework/ui";
 import { getCompanionVariant as getCompanionVariant2 } from "@dxos/app-toolkit";
 import { useAppGraph as useAppGraph9 } from "@dxos/app-toolkit/ui";
 import { useNode as useNode3 } from "@dxos/plugin-graph";
-import { ErrorFallback as ErrorFallback3, Panel as Panel3 } from "@dxos/react-ui";
+import { ErrorFallback as ErrorFallback3, Panel as Panel2 } from "@dxos/react-ui";
 import { Menu as Menu3, useMenuActions as useMenuActions3 } from "@dxos/react-ui-menu";
 var DRAWER_NAME = "SimpleLayout.Drawer";
 var Drawer = () => {
   const { graph } = useAppGraph9();
   const { state: layoutState } = useSimpleLayoutState();
-  const placeholder = useMemo9(() => /* @__PURE__ */ React10.createElement(ContentLoading, null), []);
+  const placeholder = useMemo9(() => /* @__PURE__ */ React11.createElement(Loading, null), []);
   const activeId = layoutState.active ?? layoutState.workspace;
   const companions = useCompanions(activeId);
   const { companionId, variant } = useSelectedCompanion(companions, layoutState.companionVariant);
@@ -1074,16 +1173,12 @@ var Drawer = () => {
     variant
   ]);
   const { actions, onAction } = useDrawerActions(DRAWER_NAME);
-  const menu = useMenuActions3(actions);
-  return /* @__PURE__ */ React10.createElement(Panel3.Root, null, /* @__PURE__ */ React10.createElement(Panel3.Toolbar, null, /* @__PURE__ */ React10.createElement(Menu3.Root, {
-    ...menu,
+  const menuActions = useMenuActions3(actions);
+  return /* @__PURE__ */ React11.createElement(Panel2.Root, null, /* @__PURE__ */ React11.createElement(Panel2.Toolbar, null, /* @__PURE__ */ React11.createElement(Menu3.Root, {
+    ...menuActions,
     alwaysActive: true,
     onAction
-  }, /* @__PURE__ */ React10.createElement(Menu3.Toolbar, {
-    density: "coarse"
-  }))), /* @__PURE__ */ React10.createElement(Panel3.Content, {
-    asChild: true
-  }, /* @__PURE__ */ React10.createElement(Surface4.Surface, {
+  }, /* @__PURE__ */ React11.createElement(Menu3.Toolbar, null))), /* @__PURE__ */ React11.createElement(Panel2.Content, null, /* @__PURE__ */ React11.createElement(Surface4.Surface, {
     role: "article",
     data,
     limit: 1,
@@ -1122,38 +1217,36 @@ var SimpleLayout = () => {
   const { state } = useSimpleLayoutState();
   const [keyboardOpen, setKeyboardOpen] = useState3(false);
   const [splitterMode, setSplitterMode] = useState3("upper");
-  const drawerRef = useRef4(null);
-  useEffect6(() => {
-    if (keyboardOpen) {
-      const activeElement = document.activeElement;
-      const drawerHasFocus = drawerRef.current?.contains(activeElement);
-      setSplitterMode(drawerHasFocus ? "lower" : "upper");
-    } else {
+  const drawerRef = useRef5(null);
+  useLayoutEffect2(() => {
+    if (!keyboardOpen) {
       setSplitterMode(state.drawerState === "closed" ? "upper" : state.drawerState === "open" ? "both" : "lower");
     }
   }, [
     state.drawerState,
     keyboardOpen
   ]);
-  return /* @__PURE__ */ React11.createElement(Mosaic3.Root, {
-    classNames: "contents"
-  }, /* @__PURE__ */ React11.createElement(MobileLayout.Root, {
+  return /* @__PURE__ */ React12.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",
-    onKeyboardOpenChange: (keyboardOpen2) => setKeyboardOpen(keyboardOpen2)
-  }, /* @__PURE__ */ React11.createElement(MobileLayout.Panel, {
+    onKeyboardOpenChange: (nextKeyboardOpen) => setKeyboardOpen(nextKeyboardOpen)
+  }, /* @__PURE__ */ React12.createElement(MobileLayout.Panel, {
     safe: {
       top: true,
       bottom: splitterMode === "upper"
     }
-  }, /* @__PURE__ */ React11.createElement(PopoverRoot, null, /* @__PURE__ */ React11.createElement(Splitter.Root, {
+  }, /* @__PURE__ */ React12.createElement(Splitter.Root, {
     mode: splitterMode,
     ratio: 0.55
-  }, /* @__PURE__ */ React11.createElement(Splitter.Panel, {
+  }, /* @__PURE__ */ React12.createElement(Splitter.Panel, {
     position: "upper"
-  }, /* @__PURE__ */ React11.createElement(Main, null)), /* @__PURE__ */ React11.createElement(Splitter.Panel, {
+  }, /* @__PURE__ */ React12.createElement(Main, null)), /* @__PURE__ */ React12.createElement(Splitter.Panel, {
     position: "lower",
     ref: drawerRef
-  }, /* @__PURE__ */ React11.createElement(Drawer, null))), /* @__PURE__ */ React11.createElement(Dialog, null), /* @__PURE__ */ React11.createElement(PopoverContent, null)))));
+  }, /* @__PURE__ */ React12.createElement(Drawer, null))), /* @__PURE__ */ React12.createElement(Dialog, null), /* @__PURE__ */ React12.createElement(PopoverContent, null))))));
 };
 
 export {
@@ -1161,4 +1254,4 @@ export {
   SimpleLayout,
   NavBranch
 };
-//# sourceMappingURL=chunk-DCKASLMP.mjs.map
+//# sourceMappingURL=chunk-EXNDYZTP.mjs.map