@dxos/plugin-simple-layout 0.8.4-main.d05673bc65 → 0.8.4-main.d9fc60f731

package/dist/lib/browser/chunk-MDPEKLKR.mjs

@@ -1,1163 +0,0 @@
-import {
-  SimpleLayoutState,
-  meta
-} from "./chunk-MRR7PXSM.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"),
-    autoFocus: true
-  }))), /* @__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: 12,
-    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 { 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 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 getPopoverSubject = (content) => content && typeof content === "object" && "subject" in content ? content.subject : content;
-var PopoverContent = () => {
-  const { t } = useTranslation3(meta.id);
-  const { state, updateState } = useSimpleLayoutState();
-  const { setOpen } = useLayoutPopoverContext("PopoverContent");
-  const handleNavigate = useObjectNavigate(getPopoverSubject(state.popoverContent));
-  const handleClose = useCallback3(() => {
-    setOpen(false);
-    updateState((s) => ({
-      ...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, {
-    onClick: handleNavigate
-  }, toLocalizedString3(state.popoverTitle, t)) : /* @__PURE__ */ React4.createElement("span", null), /* @__PURE__ */ React4.createElement(Card2.CloseIconButton, {
-    onClick: handleClose
-  })), /* @__PURE__ */ React4.createElement(Surface.Surface, {
-    role: "card--content",
-    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 mx5 } 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";
-import { mx as mx4 } 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,
-    alwaysActive: true,
-    onAction
-  }, /* @__PURE__ */ React6.createElement(Menu2.Toolbar, {
-    density: "coarse",
-    classNames: mx4(classNames)
-  }));
-};
-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: 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, {
-    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 mx6 } 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"), [
-    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: mx6("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: 12,
-    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.companionVariant,
-      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, {
-    density: "coarse"
-  }))), /* @__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-MDPEKLKR.mjs.map