@dxos/plugin-simple-layout 0.8.4-main.69d29f4 → 0.8.4-main.8360d9e660

package/dist/lib/node-esm/chunk-RCQE6FR2.mjs

@@ -0,0 +1,1154 @@
+import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
+import {
+  SimpleLayoutState,
+  meta
+} from "./chunk-WMNTJ2MK.mjs";
+
+// src/components/Home/Home.tsx
+import React, { useCallback, useEffect as useEffect2, useMemo, useRef } from "react";
+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 { Card } from "@dxos/react-ui";
+import { Mosaic } from "@dxos/react-ui-mosaic";
+import { SearchList, useSearchListItem, useSearchListResults } from "@dxos/react-ui-searchlist";
+import { mx } from "@dxos/ui-theme";
+import { byPosition } from "@dxos/util";
+
+// src/components/hooks.ts
+import { useEffect } from "react";
+import { expandAttendableId } from "@dxos/react-ui-attention";
+import { useAppGraph } from "@dxos/app-toolkit/ui";
+import { Graph } from "@dxos/plugin-graph";
+var useExpandPath = (nodeId) => {
+  const { graph } = useAppGraph();
+  useEffect(() => {
+    if (nodeId) {
+      for (const prefix of expandAttendableId(nodeId)) {
+        Graph.expand(graph, prefix, "child");
+      }
+    }
+  }, [
+    nodeId,
+    graph
+  ]);
+};
+
+// src/components/Home/Home.tsx
+var Home = (_) => {
+  const { t } = useTranslation(meta.id);
+  const userAccountItem = useItemsByDisposition("user-account")[0];
+  const pinnedItems = useItemsByDisposition("pin-end", true);
+  const workspaceItems = useItemsByDisposition("workspace");
+  useExpandPath(Node.RootId);
+  const items = useMemo(() => [
+    ...userAccountItem ? [
+      userAccountItem
+    ] : [],
+    ...pinnedItems,
+    ...workspaceItems
+  ], [
+    userAccountItem,
+    pinnedItems,
+    workspaceItems
+  ]);
+  const { results, handleSearch } = useSearchListResults({
+    items,
+    extract: (node) => toLocalizedString(node.properties.label, t)
+  });
+  return /* @__PURE__ */ React.createElement(SearchList.Root, {
+    onSearch: handleSearch
+  }, /* @__PURE__ */ React.createElement(Panel.Root, null, /* @__PURE__ */ React.createElement(Panel.Toolbar, {
+    asChild: true
+  }, /* @__PURE__ */ React.createElement(Toolbar.Root, null, /* @__PURE__ */ React.createElement(SearchList.Input, {
+    placeholder: t("search placeholder")
+  }))), /* @__PURE__ */ React.createElement(Panel.Content, {
+    asChild: true
+  }, /* @__PURE__ */ React.createElement(SearchList.Content, null, /* @__PURE__ */ React.createElement(Mosaic.Container, {
+    asChild: true
+  }, /* @__PURE__ */ React.createElement(ScrollArea.Root, {
+    orientation: "vertical"
+  }, /* @__PURE__ */ React.createElement(ScrollArea.Viewport, {
+    classNames: "p-2"
+  }, /* @__PURE__ */ React.createElement(Mosaic.Stack, {
+    items: results,
+    getId: (node) => node.id,
+    Tile: WorkspaceTile
+  }))))))));
+};
+var WorkspaceTile = (props) => {
+  const data = props.data;
+  const { t } = useTranslation(meta.id);
+  const { invokePromise } = useOperationInvoker();
+  const { selectedValue, registerItem, unregisterItem } = useSearchListItem();
+  const name = toLocalizedString(data.properties.label, t);
+  const isSelected = selectedValue === data.id;
+  const cardRef = useRef(null);
+  useExpandPath(data.id);
+  const handleSelect = useCallback(() => invokePromise(LayoutOperation.SwitchWorkspace, {
+    subject: data.id
+  }), [
+    invokePromise,
+    data.id
+  ]);
+  useEffect2(() => {
+    if (cardRef.current) {
+      registerItem(data.id, cardRef.current, handleSelect);
+    }
+    return () => unregisterItem(data.id);
+  }, [
+    data.id,
+    handleSelect,
+    registerItem,
+    unregisterItem
+  ]);
+  useEffect2(() => {
+    if (isSelected && cardRef.current) {
+      cardRef.current.scrollIntoView({
+        block: "nearest",
+        behavior: "smooth"
+      });
+    }
+  }, [
+    isSelected
+  ]);
+  return /* @__PURE__ */ React.createElement(Card.Root, {
+    role: "button",
+    fullWidth: true,
+    tabIndex: -1,
+    "data-selected": isSelected,
+    classNames: mx("dx-focus-ring", isSelected && "bg-hover-overlay"),
+    onClick: handleSelect,
+    ref: cardRef
+  }, /* @__PURE__ */ React.createElement(Card.Toolbar, {
+    density: "coarse"
+  }, /* @__PURE__ */ React.createElement(Avatar.Root, null, /* @__PURE__ */ React.createElement(Avatar.Content, {
+    icon: data.properties.icon,
+    hue: data.properties.hue,
+    hueVariant: "transparent",
+    variant: "square",
+    size: 8,
+    fallback: name
+  }), /* @__PURE__ */ React.createElement(Avatar.Label, null, name), /* @__PURE__ */ React.createElement(Icon, {
+    icon: "ph--caret-right--regular"
+  }))));
+};
+var filterItems = (node, disposition) => {
+  return node.properties.disposition === 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;
+};
+
+// src/components/SimpleLayout/SimpleLayout.tsx
+import React11, { useEffect as useEffect6, useRef as useRef4, useState as useState3 } from "react";
+import { Splitter } from "@dxos/react-ui";
+import { Mosaic as Mosaic3 } from "@dxos/react-ui-mosaic";
+
+// 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 { invokeSync } = 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.sync(() => invokeSync(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) {
+        invokeSync(LayoutOperation2.SwitchWorkspace, {
+          subject: Node2.RootId
+        });
+      } else {
+        invokeSync(LayoutOperation2.Close, {
+          subject: [
+            state.active
+          ]
+        });
+      }
+    } else {
+      invokeSync(LayoutOperation2.SwitchWorkspace, {
+        subject: Node2.RootId
+      });
+    }
+  }, [
+    graph,
+    invokeSync,
+    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/ContentLoading/ContentLoading.tsx
+import React2 from "react";
+var ContentLoading = () => {
+  return /* @__PURE__ */ React2.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 { addEventListener, combine } from "@dxos/async";
+import { log } from "@dxos/log";
+import { mx as mx2 } from "@dxos/ui-theme";
+var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-simple-layout/src/components/MobileLayout/MobileLayout.tsx";
+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) => {
+  const { open: keyboardOpen } = useIOSKeyboard();
+  useAutoScroll();
+  useEffect3(() => onKeyboardOpenChange?.(keyboardOpen), [
+    onKeyboardOpenChange,
+    keyboardOpen
+  ]);
+  useLockBodyScroll(keyboardOpen);
+  return /* @__PURE__ */ React3.createElement(MobileLayoutProvider, {
+    keyboardOpen
+  }, /* @__PURE__ */ React3.createElement("div", {
+    ...props,
+    role: "none",
+    style: {
+      transition: `h-size ${transition}ms ease-out`,
+      blockSize: "calc(100vh - var(--kb-height, 0px))"
+    },
+    className: mx2("absolute top-0 left-0 right-0 flex flex-col", classNames),
+    ref: forwardedRef
+  }, children));
+});
+MobileLayoutRoot.displayName = MOBILE_LAYOUT_ROOT_NAME;
+var MobileLayoutPanel = /* @__PURE__ */ forwardRef(({ classNames, children, safe, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React3.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),
+    ref: forwardedRef
+  }, children);
+});
+MobileLayoutPanel.displayName = MOBILE_LAYOUT_PANEL_NAME;
+var MobileLayout = {
+  Root: MobileLayoutRoot,
+  Panel: MobileLayoutPanel
+};
+var 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);
+          });
+        }
+      },
+      // Important: focus events don't bubble, so capture phase is required.
+      {
+        capture: true
+      }
+    );
+  }, []);
+};
+var useLockBodyScroll = (enabled) => {
+  useEffect3(() => {
+    if (!enabled) {
+      return;
+    }
+    const isScrollable = (el, axis) => {
+      while (el && el !== document.body) {
+        const style = getComputedStyle(el);
+        if (axis === "y") {
+          const overflow = style.overflowY;
+          if ((overflow === "auto" || overflow === "scroll") && el.scrollHeight > el.clientHeight) {
+            return true;
+          }
+        } else {
+          const overflow = style.overflowX;
+          if ((overflow === "auto" || overflow === "scroll") && el.scrollWidth > el.clientWidth) {
+            return true;
+          }
+        }
+        el = el.parentElement;
+      }
+      return false;
+    };
+    let touchStartX = 0;
+    let touchStartY = 0;
+    return combine(
+      // Record initial touch position.
+      addEventListener(document, "touchstart", (event) => {
+        const touch = event.touches[0];
+        touchStartX = touch.clientX;
+        touchStartY = touch.clientY;
+      }, {
+        passive: true
+      }),
+      // Prevent scrolling the viewport.
+      addEventListener(document, "touchmove", (event) => {
+        const touch = event.touches[0];
+        const dx = Math.abs(touch.clientX - touchStartX);
+        const dy = Math.abs(touch.clientY - touchStartY);
+        if (!isScrollable(event.target, dx > dy ? "x" : "y")) {
+          event.preventDefault();
+        }
+      }, {
+        passive: false
+      })
+    );
+  }, [
+    enabled
+  ]);
+};
+var useIOSKeyboard = () => {
+  const [open, setOpen] = useState(false);
+  const [height, setHeight] = useState(0);
+  useEffect3(() => {
+    const viewport = window.visualViewport;
+    if (!viewport) {
+      return;
+    }
+    const initialHeight = viewport.height ?? window.innerHeight;
+    const updateState = (keyboardHeight, keyboardOpen) => {
+      setOpen(keyboardOpen);
+      setHeight(keyboardHeight);
+      const vvh = initialHeight - keyboardHeight;
+      document.documentElement.style.setProperty("--vvh", `${vvh}px`);
+      document.documentElement.style.setProperty("--kb-height", `${keyboardHeight}px`);
+      document.documentElement.style.setProperty("--kb-open", keyboardOpen ? "1" : "0");
+      log.info("viewport size", {
+        initialHeight,
+        vvh,
+        keyboardHeight,
+        keyboardOpen
+      }, {
+        F: __dxlog_file,
+        L: 287,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+    };
+    return combine(
+      // Handler for native iOS keyboard events (from KeyboardObserver.swift).
+      addEventListener(window, "keyboard", (event) => {
+        const { type, height: height2 } = event.detail;
+        log.info("keyboard event", {
+          type,
+          height: height2
+        }, {
+          F: __dxlog_file,
+          L: 297,
+          S: void 0,
+          C: (f, a) => f(...a)
+        });
+        updateState(height2, type === "show");
+      })
+    );
+  }, []);
+  return {
+    open,
+    height
+  };
+};
+
+// 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 { Surface } from "@dxos/app-framework/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 PopoverRoot = ({ children }) => {
+  const { state } = useSimpleLayoutState();
+  const [open, setOpen] = useState2(false);
+  const virtualRef = useRef2(null);
+  const [virtualIter, setVirtualIter] = useState2(0);
+  const debounceRef = useRef2(null);
+  useEffect4(() => {
+    setOpen(false);
+    if (state.popoverOpen) {
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+      }
+      if (state.popoverAnchor && virtualRef.current !== state.popoverAnchor) {
+        virtualRef.current = state.popoverAnchor ?? null;
+        setVirtualIter((iter) => iter + 1);
+      }
+      debounceRef.current = setTimeout(() => setOpen(true), DEBOUNCE_DELAY);
+    }
+  }, [
+    state.popoverOpen,
+    state.popoverAnchorId,
+    state.popoverAnchor,
+    state.popoverContent
+  ]);
+  return /* @__PURE__ */ React4.createElement(LayoutPopoverProvider, {
+    setOpen
+  }, /* @__PURE__ */ React4.createElement(Popover.Root, {
+    modal: false,
+    open
+  }, state.popoverAnchor && /* @__PURE__ */ React4.createElement(Popover.VirtualTrigger, {
+    key: virtualIter,
+    virtualRef
+  }), children));
+};
+var PopoverContent = () => {
+  const { t } = useTranslation3(meta.id);
+  const { state, updateState } = useSimpleLayoutState();
+  const { setOpen } = useLayoutPopoverContext("PopoverContent");
+  const handleClose = useCallback3(() => {
+    setOpen(false);
+    updateState((s) => ({
+      ...s,
+      popoverOpen: false,
+      popoverAnchor: void 0,
+      popoverAnchorId: void 0,
+      popoverSide: void 0
+    }));
+  }, [
+    setOpen,
+    updateState
+  ]);
+  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")
+    ) {
+      event.preventDefault();
+    } else {
+      handleClose();
+    }
+  }, [
+    handleClose
+  ]);
+  const collisionBoundaries = useMemo4(() => {
+    const closest = state.popoverAnchor?.closest("[data-popover-collision-boundary]");
+    return closest ? [
+      closest
+    ] : [];
+  }, [
+    state.popoverAnchor
+  ]);
+  return /* @__PURE__ */ React4.createElement(Popover.Portal, null, /* @__PURE__ */ React4.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, {
+    role: "popover",
+    data: state.popoverContent,
+    limit: 1
+  }), state.popoverKind === "card" && /* @__PURE__ */ React4.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, null, toLocalizedString3(state.popoverTitle, t)) : /* @__PURE__ */ React4.createElement("span", null), /* @__PURE__ */ React4.createElement(Card2.CloseIconButton, {
+    onClick: handleClose
+  })), /* @__PURE__ */ React4.createElement(Surface.Surface, {
+    role: "card--content",
+    data: state.popoverContent,
+    limit: 1
+  }))), /* @__PURE__ */ React4.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 { Menu, useMenuActions } from "@dxos/react-ui-menu";
+import { mx as mx3, osTranslations } from "@dxos/ui-theme";
+var APP_BAR_NAME = "SimpleLayout.AppBar";
+var AppBar = ({ classNames, title, actions, showBackButton, popoverAnchorId, onAction, onBack }) => {
+  const { t } = useTranslation4(meta.id);
+  const menu = useMenuActions(actions);
+  const actionsValue = useAtomValue2(actions);
+  const hasActions = actionsValue.nodes.length > 0;
+  const { keyboardOpen } = useMobileLayout(APP_BAR_NAME);
+  const displayTitle = title ?? t("current app name", {
+    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, {
+    variant: "ghost",
+    icon: "ph--x--regular",
+    iconOnly: true,
+    label: t("done label")
+  }) : showBackButton ? /* @__PURE__ */ React5.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", {
+    className: "text-center truncate font-thin uppercase"
+  }, displayTitle), hasActions ? /* @__PURE__ */ React5.createElement(AnchorRoot, null, /* @__PURE__ */ React5.createElement(Menu.Root, {
+    ...menu,
+    caller: meta.id,
+    onAction
+  }, /* @__PURE__ */ React5.createElement(Menu.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React5.createElement(IconButton, {
+    variant: "ghost",
+    icon: "ph--dots-three-vertical--regular",
+    iconOnly: true,
+    label: t("actions menu label")
+  })), /* @__PURE__ */ React5.createElement(Menu.Content, null))) : /* @__PURE__ */ React5.createElement("span", null));
+};
+AppBar.displayName = APP_BAR_NAME;
+
+// src/components/SimpleLayout/Main.tsx
+import React7, { useMemo as useMemo5 } from "react";
+import { Surface as Surface2 } from "@dxos/app-framework/ui";
+import { useAppGraph as useAppGraph5 } from "@dxos/app-toolkit/ui";
+import { useNode as useNode2 } from "@dxos/plugin-graph";
+import { ErrorFallback } from "@dxos/react-ui";
+import { useAttentionAttributes } from "@dxos/react-ui-attention";
+import { mx as mx4 } from "@dxos/ui-theme";
+
+// src/components/SimpleLayout/NavBar.tsx
+import React6 from "react";
+import { Menu as Menu2, useMenuActions as useMenuActions2 } from "@dxos/react-ui-menu";
+var NAVBAR_NAME = "SimpleLayout.NavBar";
+var NavBar = ({ classNames, actions, onAction }) => {
+  const menu = useMenuActions2(actions);
+  return /* @__PURE__ */ React6.createElement(Menu2.Root, {
+    ...menu,
+    alwaysActive: true,
+    onAction
+  }, /* @__PURE__ */ React6.createElement(Menu2.Toolbar, {
+    density: "coarse"
+  }));
+};
+NavBar.displayName = NAVBAR_NAME;
+
+// src/components/SimpleLayout/Main.tsx
+var MAIN_NAME = "SimpleLayout.Main";
+var Main = () => {
+  const { state } = useSimpleLayoutState();
+  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__ */ React7.createElement(ContentLoading, null), []);
+  const { graph } = useAppGraph5();
+  const node = useNode2(graph, id);
+  const data = useMemo5(() => {
+    return node && {
+      attendableId: id,
+      subject: node.data,
+      properties: node.properties,
+      popoverAnchorId: state.popoverAnchorId
+    };
+  }, [
+    id,
+    node,
+    node?.data,
+    node?.properties,
+    state.popoverAnchorId
+  ]);
+  useExpandPath(id);
+  const showNavBar = !keyboardOpen && !state.isPopover && state.drawerState === "closed";
+  return /* @__PURE__ */ React7.createElement("div", {
+    role: "none",
+    className: mx4("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, {
+    key: id,
+    role: "article",
+    data,
+    limit: 1,
+    fallback: ErrorFallback,
+    placeholder
+  })), showNavBar && /* @__PURE__ */ React7.createElement(NavBar, {
+    classNames: "border-y border-subdued-separator",
+    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 { 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 { 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 mx5 } 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__ */ React8.createElement(SearchList2.Root, {
+    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, {
+    asChild: true
+  }, /* @__PURE__ */ React8.createElement(ScrollArea2.Root, {
+    orientation: "vertical"
+  }, /* @__PURE__ */ React8.createElement(ScrollArea2.Viewport, {
+    classNames: "p-2"
+  }, /* @__PURE__ */ React8.createElement(Mosaic2.Stack, {
+    items: results,
+    getId: (child) => child.id,
+    Tile: NavBranchTile
+  }))))))));
+};
+var NavBranchTile = (props) => {
+  const data = props.data;
+  const { t } = useTranslation5(meta.id);
+  const { invokeSync } = useOperationInvoker3();
+  const ref = useRef3(null);
+  const { selectedValue, registerItem, unregisterItem } = useSearchListItem2();
+  const isSelected = selectedValue === data.id;
+  const name = toLocalizedString4(data.properties.label, t);
+  const handleSelect = useCallback4(() => invokeSync(LayoutOperation3.Open, {
+    subject: [
+      data.id
+    ]
+  }), [
+    invokeSync,
+    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__ */ React8.createElement(Card3.Root, {
+    ref,
+    role: "button",
+    fullWidth: true,
+    tabIndex: -1,
+    "data-selected": isSelected,
+    classNames: mx5("dx-focus-ring", isSelected && "bg-hover-overlay"),
+    onClick: handleSelect
+  }, /* @__PURE__ */ React8.createElement(Card3.Toolbar, {
+    density: "coarse"
+  }, /* @__PURE__ */ React8.createElement(Avatar2.Root, null, /* @__PURE__ */ React8.createElement(Avatar2.Content, {
+    hue: data.properties.hue,
+    icon: data.properties.icon,
+    hueVariant: "transparent",
+    variant: "square",
+    size: 8,
+    fallback: name
+  }), /* @__PURE__ */ React8.createElement(Avatar2.Label, null, name), /* @__PURE__ */ React8.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 { 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) => {
+    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
+  };
+};
+
+// src/components/Dialog/Dialog.tsx
+import React9 from "react";
+import { Surface as Surface3 } from "@dxos/app-framework/ui";
+import { AlertDialog, Dialog as NaturalDialog } from "@dxos/react-ui";
+import { ErrorFallback as ErrorFallback2 } from "@dxos/react-ui";
+var Dialog = () => {
+  const { state, updateState } = useSimpleLayoutState();
+  const DialogRoot = state.dialogType === "alert" ? AlertDialog.Root : NaturalDialog.Root;
+  const DialogOverlay = state.dialogType === "alert" ? AlertDialog.Overlay : NaturalDialog.Overlay;
+  return /* @__PURE__ */ React9.createElement(DialogRoot, {
+    modal: state.dialogBlockAlign !== "end",
+    open: state.dialogOpen,
+    onOpenChange: (nextOpen) => updateState((state2) => ({
+      ...state2,
+      dialogOpen: nextOpen
+    }))
+  }, state.dialogBlockAlign === "end" ? /* @__PURE__ */ React9.createElement(Surface3.Surface, {
+    role: "dialog",
+    data: state.dialogContent,
+    limit: 1,
+    fallback: ErrorFallback2
+  }) : /* @__PURE__ */ React9.createElement(DialogOverlay, {
+    blockAlign: state.dialogBlockAlign,
+    classNames: state.dialogOverlayClasses,
+    style: state.dialogOverlayStyle
+  }, /* @__PURE__ */ React9.createElement(Surface3.Surface, {
+    role: "dialog",
+    data: state.dialogContent,
+    limit: 1,
+    fallback: ErrorFallback2
+  })));
+};
+
+// src/components/SimpleLayout/Drawer.tsx
+import React10, { useMemo as useMemo9 } from "react";
+import { Surface as Surface4 } from "@dxos/app-framework/ui";
+import { getCompanionVariant as getCompanionVariant2 } from "@dxos/app-toolkit";
+import { useAppGraph as useAppGraph9 } from "@dxos/app-toolkit/ui";
+import { useNode as useNode3 } from "@dxos/plugin-graph";
+import { ErrorFallback as ErrorFallback3, Panel as Panel3 } from "@dxos/react-ui";
+import { Menu as Menu3, useMenuActions as useMenuActions3 } from "@dxos/react-ui-menu";
+var DRAWER_NAME = "SimpleLayout.Drawer";
+var Drawer = () => {
+  const { graph } = useAppGraph9();
+  const { state: layoutState } = useSimpleLayoutState();
+  const placeholder = useMemo9(() => /* @__PURE__ */ React10.createElement(ContentLoading, null), []);
+  const activeId = layoutState.active ?? layoutState.workspace;
+  const companions = useCompanions(activeId);
+  const { companionId, variant } = useSelectedCompanion(companions, layoutState.companionVariant);
+  const node = useNode3(graph, companionId);
+  const parentNode = useNode3(graph, activeId);
+  const data = useMemo9(() => {
+    return node && {
+      attendableId: companionId,
+      subject: node.data,
+      companionTo: parentNode?.data,
+      properties: node.properties,
+      variant
+    };
+  }, [
+    companionId,
+    node,
+    parentNode,
+    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,
+    alwaysActive: true,
+    onAction
+  }, /* @__PURE__ */ React10.createElement(Menu3.Toolbar, null))), /* @__PURE__ */ React10.createElement(Panel3.Content, {
+    asChild: true
+  }, /* @__PURE__ */ React10.createElement(Surface4.Surface, {
+    role: "article",
+    data,
+    limit: 1,
+    fallback: ErrorFallback3,
+    placeholder
+  })));
+};
+Drawer.displayName = DRAWER_NAME;
+var useSelectedCompanion = (companions, preferredVariant) => {
+  const selectedCompanion = useMemo9(() => {
+    if (companions.length === 0) {
+      return void 0;
+    }
+    if (preferredVariant) {
+      const preferred = companions.find((c) => getCompanionVariant2(c.id) === preferredVariant);
+      if (preferred) {
+        return preferred;
+      }
+    }
+    return companions[0];
+  }, [
+    companions,
+    preferredVariant
+  ]);
+  const companionId = selectedCompanion?.id;
+  const variant = companionId ? getCompanionVariant2(companionId) : void 0;
+  return {
+    selectedCompanion,
+    companionId,
+    variant
+  };
+};
+
+// src/components/SimpleLayout/SimpleLayout.tsx
+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 {
+      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, {
+    classNames: "bg-toolbar-surface",
+    onKeyboardOpenChange: (keyboardOpen2) => setKeyboardOpen(keyboardOpen2)
+  }, /* @__PURE__ */ React11.createElement(MobileLayout.Panel, {
+    safe: {
+      top: true,
+      bottom: splitterMode === "upper"
+    }
+  }, /* @__PURE__ */ React11.createElement(PopoverRoot, null, /* @__PURE__ */ React11.createElement(Splitter.Root, {
+    mode: splitterMode,
+    ratio: 0.55
+  }, /* @__PURE__ */ React11.createElement(Splitter.Panel, {
+    position: "upper"
+  }, /* @__PURE__ */ React11.createElement(Main, null)), /* @__PURE__ */ React11.createElement(Splitter.Panel, {
+    position: "lower",
+    ref: drawerRef
+  }, /* @__PURE__ */ React11.createElement(Drawer, null))), /* @__PURE__ */ React11.createElement(Dialog, null), /* @__PURE__ */ React11.createElement(PopoverContent, null)))));
+};
+
+export {
+  Home,
+  SimpleLayout,
+  NavBranch
+};
+//# sourceMappingURL=chunk-RCQE6FR2.mjs.map