@dxos/plugin-simple-layout 0.8.4-main.c85a9c8dae → 0.8.4-main.dfabb4ec29

package/dist/lib/neutral/components/index.mjs

@@ -0,0 +1,924 @@
+import "../chunk-J5LGTIGS.mjs";
+
+// src/components/DebugOverlay/DebugOverlay.tsx
+import { createContext } from "@radix-ui/react-context";
+import React, { useCallback, useRef } from "react";
+var DEBUG_OVERLAY_NAME = "DebugOverlay";
+var [DebugOverlayProvider, useDebugLog] = createContext(DEBUG_OVERLAY_NAME, {
+  dbg: () => {
+  }
+});
+var DebugOverlayRoot = ({ children, enabled = true, maxLines = 10 }) => {
+  const overlayRef = useRef(null);
+  const dbg = useCallback((msg) => {
+    if (!overlayRef.current) {
+      return;
+    }
+    const line = document.createElement("pre");
+    line.textContent = `${(performance.now() / 1e3).toFixed(2).padStart(8, " ")} ${msg}`;
+    overlayRef.current.prepend(line);
+    while (overlayRef.current.children.length > maxLines) {
+      overlayRef.current.lastChild?.remove();
+    }
+  }, []);
+  return /* @__PURE__ */ React.createElement(DebugOverlayProvider, {
+    dbg
+  }, children, enabled && /* @__PURE__ */ React.createElement("div", {
+    ref: overlayRef,
+    style: {
+      position: "fixed",
+      bottom: "calc(var(--kb-height, 0px) + 8px)",
+      left: 8,
+      right: 8,
+      background: "rgba(0,0,0,0.8)",
+      color: "#0f0",
+      fontSize: 10,
+      fontFamily: "monospace",
+      padding: 6,
+      borderRadius: 4,
+      zIndex: 9999,
+      pointerEvents: "none"
+    }
+  }));
+};
+var DebugOverlay = {
+  Root: DebugOverlayRoot
+};
+
+// src/components/Home/Home.tsx
+import React2, { useCallback as useCallback2, useEffect as useEffect2, useMemo, useRef as useRef2 } from "react";
+import { useOperationInvoker } from "@dxos/app-framework/ui";
+import { LayoutOperation } from "@dxos/app-toolkit";
+import { useAppGraph as useAppGraph2 } from "@dxos/app-toolkit/ui";
+import { Node, useConnections } from "@dxos/plugin-graph";
+import { Avatar, Icon, ScrollArea, toLocalizedString, useTranslation } from "@dxos/react-ui";
+import { Card } from "@dxos/react-ui";
+import { Mosaic } from "@dxos/react-ui-mosaic";
+import { SearchPanel, useSearchListItem, useSearchListResults } from "@dxos/react-ui-search";
+import { mx } from "@dxos/ui-theme";
+import { byPosition, getHostPlatform, isTauri } from "@dxos/util";
+import { meta } from "#meta";
+
+// src/components/hooks.ts
+import { useEffect } from "react";
+import { useAppGraph } from "@dxos/app-toolkit/ui";
+import { Graph } from "@dxos/plugin-graph";
+import { expandAttendableId } from "@dxos/react-ui-attention";
+var useExpandPath = (nodeId) => {
+  const { graph } = useAppGraph();
+  useEffect(() => {
+    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)
+  });
+  const autoFocus = !isTauri() || getHostPlatform() !== "ios";
+  return /* @__PURE__ */ React2.createElement(SearchPanel, {
+    onSearch: handleSearch
+  }, /* @__PURE__ */ React2.createElement(Mosaic.Container, {
+    asChild: true
+  }, /* @__PURE__ */ React2.createElement(ScrollArea.Root, {
+    centered: true,
+    padding: true,
+    thin: true
+  }, /* @__PURE__ */ React2.createElement(ScrollArea.Viewport, null, /* @__PURE__ */ React2.createElement(Mosaic.Stack, {
+    classNames: "gap-1",
+    draggable: false,
+    items: results,
+    getId: (item) => item.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 = useRef2(null);
+  useExpandPath(data.id);
+  const handleSelect = useCallback2(() => 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__ */ React2.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__ */ React2.createElement(Card.Toolbar, {
+    density: "fine"
+  }, /* @__PURE__ */ React2.createElement(Avatar.Root, null, /* @__PURE__ */ React2.createElement(Avatar.Content, {
+    icon: data.properties.icon,
+    hue: data.properties.hue,
+    hueVariant: "transparent",
+    variant: "square",
+    size: 8,
+    fallback: name
+  }), /* @__PURE__ */ React2.createElement(Avatar.Label, {
+    classNames: "cursor-pointer"
+  }, name), /* @__PURE__ */ React2.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");
+  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/Loading/Loading.tsx
+import React3 from "react";
+var Loading = () => {
+  return /* @__PURE__ */ React3.createElement("div", {
+    className: "grid place-items-center dx-attention-surface"
+  });
+};
+
+// src/components/MobileLayout/MobileLayout.tsx
+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";
+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] = createContext2(MOBILE_LAYOUT_NAME);
+var MobileLayoutRoot = /* @__PURE__ */ forwardRef(({ classNames, children, transition = 500, onKeyboardOpenChange, ...props }, forwardedRef) => {
+  const { open: keyboardOpen } = useIOSKeyboard();
+  useLockBodyScroll(keyboardOpen);
+  useAutoScroll();
+  useLayoutEffect(() => onKeyboardOpenChange?.(keyboardOpen), [
+    keyboardOpen,
+    onKeyboardOpenChange
+  ]);
+  return /* @__PURE__ */ React4.createElement(MobileLayoutProvider, {
+    keyboardOpen
+  }, /* @__PURE__ */ React4.createElement("div", {
+    ...props,
+    style: {
+      height: "calc(100vh - var(--kb-height, 0px))",
+      transition: `height ${keyboardOpen ? 0 : transition}ms ease-out`
+    },
+    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__ */ React4.createElement("div", {
+    ...props,
+    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(classNames),
+    ref: forwardedRef
+  }, children);
+});
+MobileLayoutPanel.displayName = MOBILE_LAYOUT_PANEL_NAME;
+var MobileLayout = {
+  Root: MobileLayoutRoot,
+  Panel: MobileLayoutPanel
+};
+var useAutoScroll = () => {
+  const { dbg } = useDebugLog("useAutoScroll");
+  useEffect3(() => {
+    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) : () => {
+      },
+      // 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(() => {
+    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 { 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, 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`);
+      document.documentElement.style.setProperty("--kb-open", keyboardOpen ? "1" : "0");
+      log.info("viewport size", {
+        initialHeight,
+        vvh,
+        keyboardHeight,
+        keyboardOpen,
+        animationDuration
+      }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 211, S: void 0 });
+    };
+    let rafId;
+    return combine(
+      // Handler for native iOS keyboard events (from KeyboardObserver.swift).
+      addEventListener(window, "keyboard", (event) => {
+        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,
+          duration: duration2
+        }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 228, S: void 0 });
+        updateState(height2, type === "show", durationMs);
+        const end = performance.now() + durationMs + 300;
+        let prevOffsetTop = vp?.offsetTop ?? 0;
+        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,
+    duration
+  };
+};
+
+// src/components/Popover/Popover.tsx
+import { createContext as createContext3 } from "@radix-ui/react-context";
+import React5, { useCallback as useCallback3, useEffect as useEffect4, useMemo as useMemo2, useRef as useRef3, useState as useState2 } from "react";
+import { Surface } from "@dxos/app-framework/ui";
+import { AppSurface } from "@dxos/app-toolkit/ui";
+import { Popover, toLocalizedString as toLocalizedString2, useTranslation as useTranslation2 } from "@dxos/react-ui";
+import { Card as Card2 } from "@dxos/react-ui";
+import { useSimpleLayoutState } from "#hooks";
+import { meta as meta2 } from "#meta";
+var DEBOUNCE_DELAY = 40;
+var [LayoutPopoverProvider, useLayoutPopoverContext] = createContext3("LayoutPopover");
+var PopoverRoot = ({ children }) => {
+  const { state } = useSimpleLayoutState();
+  const [open, setOpen] = useState2(false);
+  const virtualRef = useRef3(null);
+  const [virtualIter, setVirtualIter] = useState2(0);
+  const debounceRef = useRef3(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__ */ React5.createElement(LayoutPopoverProvider, {
+    setOpen
+  }, /* @__PURE__ */ React5.createElement(Popover.Root, {
+    modal: false,
+    open
+  }, state.popoverAnchor && /* @__PURE__ */ React5.createElement(Popover.VirtualTrigger, {
+    key: virtualIter,
+    virtualRef
+  }), children));
+};
+var PopoverContent = () => {
+  const { t } = useTranslation2(meta2.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 = useMemo2(() => {
+    const closest = state.popoverAnchor?.closest("[data-popover-collision-boundary]");
+    return closest ? [
+      closest
+    ] : [];
+  }, [
+    state.popoverAnchor
+  ]);
+  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__ */ React5.createElement(Popover.Viewport, null, state.popoverKind === "base" && state.popoverContent && "component" in state.popoverContent && /* @__PURE__ */ React5.createElement(Surface.Surface, {
+    type: AppSurface.Popover,
+    data: state.popoverContent,
+    limit: 1
+  }), state.popoverKind === "card" && /* @__PURE__ */ React5.createElement(Card2.Root, {
+    border: false,
+    classNames: "dx-card-popover"
+  }, /* @__PURE__ */ React5.createElement(Card2.Toolbar, null, /* @__PURE__ */ React5.createElement("span", null), state.popoverTitle ? /* @__PURE__ */ React5.createElement(Card2.Title, null, toLocalizedString2(state.popoverTitle, t)) : /* @__PURE__ */ React5.createElement("span", null), /* @__PURE__ */ React5.createElement(Card2.CloseIconButton, {
+    onClick: handleClose
+  })), state.popoverContent && "subject" in state.popoverContent && /* @__PURE__ */ React5.createElement(Surface.Surface, {
+    type: AppSurface.Card,
+    data: state.popoverContent,
+    limit: 1
+  }))), /* @__PURE__ */ React5.createElement(Popover.Arrow, null)));
+};
+
+// src/components/SimpleLayout/AppBar.tsx
+import { useAtomValue } from "@effect-atom/atom-react";
+import React6, { Fragment } from "react";
+import { IconButton, Popover as Popover2, Toolbar, useTranslation as useTranslation3 } from "@dxos/react-ui";
+import { Menu, useMenuActions } from "@dxos/react-ui-menu";
+import { composable, composableProps, osTranslations } from "@dxos/ui-theme";
+import { meta as meta3 } from "#meta";
+var APP_BAR_NAME = "SimpleLayout.AppBar";
+var AppBar = composable(({ classNames, title, actions, showBackButton, popoverAnchorId, onAction, onBack, ...props }, forwardedRef) => {
+  const { t } = useTranslation3(meta3.id);
+  const menuActions = useMenuActions(actions);
+  const actionsValue = useAtomValue(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__ */ 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__ */ React6.createElement(IconButton, {
+    variant: "ghost",
+    icon: "ph--caret-left--regular",
+    iconOnly: true,
+    label: t("back.label"),
+    onClick: onBack
+  }) : /* @__PURE__ */ React6.createElement("div", null), /* @__PURE__ */ React6.createElement("h1", {
+    className: "text-center truncate font-thin uppercase"
+  }, displayTitle), hasActions ? /* @__PURE__ */ React6.createElement(AnchorRoot, null, /* @__PURE__ */ React6.createElement(Menu.Root, {
+    ...menuActions,
+    caller: meta3.id,
+    onAction
+  }, /* @__PURE__ */ React6.createElement(Menu.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React6.createElement(IconButton, {
+    variant: "ghost",
+    icon: "ph--dots-three-vertical--regular",
+    iconOnly: true,
+    label: t("actions-menu.label")
+  })), /* @__PURE__ */ React6.createElement(Menu.Content, null))) : /* @__PURE__ */ React6.createElement("span", null));
+});
+AppBar.displayName = APP_BAR_NAME;
+
+// src/components/SimpleLayout/Main.tsx
+import React8, { useMemo as useMemo3 } from "react";
+import { Surface as Surface2 } from "@dxos/app-framework/ui";
+import { AppSurface as AppSurface2, useAppGraph as useAppGraph3 } from "@dxos/app-toolkit/ui";
+import { useNode } from "@dxos/plugin-graph";
+import { ErrorFallback, Panel } from "@dxos/react-ui";
+import { useAttentionAttributes } from "@dxos/react-ui-attention";
+import { useAppBarProps, useNavbarActions, useSimpleLayoutState as useSimpleLayoutState2 } from "#hooks";
+
+// src/components/SimpleLayout/NavBar.tsx
+import React7 from "react";
+import { Menu as Menu2, useMenuActions as useMenuActions2 } from "@dxos/react-ui-menu";
+import { composable as composable2, composableProps as composableProps2 } from "@dxos/ui-theme";
+var NAVBAR_NAME = "SimpleLayout.NavBar";
+var NavBar = composable2(({ actions, onAction, ...props }, forwardedRef) => {
+  const menuActions = useMenuActions2(actions);
+  return /* @__PURE__ */ React7.createElement(Menu2.Root, {
+    ...menuActions,
+    alwaysActive: true,
+    onAction
+  }, /* @__PURE__ */ React7.createElement(Menu2.Toolbar, {
+    ...composableProps2(props),
+    ref: forwardedRef
+  }));
+});
+NavBar.displayName = NAVBAR_NAME;
+
+// src/components/SimpleLayout/Main.tsx
+var MAIN_NAME = "SimpleLayout.Main";
+var Main = () => {
+  const { state } = useSimpleLayoutState2();
+  const id = state.active ?? state.workspace;
+  const attentionAttrs = useAttentionAttributes(id);
+  const { keyboardOpen } = useMobileLayout(MAIN_NAME);
+  const { actions, onAction } = useNavbarActions();
+  const appBarProps = useAppBarProps();
+  const placeholder = useMemo3(() => /* @__PURE__ */ React8.createElement(Loading, null), []);
+  const { graph } = useAppGraph3();
+  const node = useNode(graph, id);
+  const data = useMemo3(() => {
+    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__ */ 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,
+    type: AppSurface2.Article,
+    data,
+    limit: 1,
+    fallback: ErrorFallback,
+    placeholder
+  })), showNavBar && /* @__PURE__ */ React8.createElement(Panel.Statusbar, {
+    asChild: true
+  }, /* @__PURE__ */ React8.createElement(NavBar, {
+    actions,
+    onAction
+  })));
+};
+Main.displayName = MAIN_NAME;
+
+// src/components/SimpleLayout/SimpleLayout.tsx
+import React11, { useLayoutEffect as useLayoutEffect2, useRef as useRef4, useState as useState3 } from "react";
+import { Splitter } from "@dxos/react-ui";
+import { Mosaic as Mosaic2 } from "@dxos/react-ui-mosaic";
+import { useSimpleLayoutState as useSimpleLayoutState5 } from "#hooks";
+
+// src/components/Dialog/Dialog.tsx
+import React9 from "react";
+import { Surface as Surface3 } from "@dxos/app-framework/ui";
+import { AppSurface as AppSurface3 } from "@dxos/app-toolkit/ui";
+import { AlertDialog, Dialog as NaturalDialog } from "@dxos/react-ui";
+import { ErrorFallback as ErrorFallback2 } from "@dxos/react-ui";
+import { useSimpleLayoutState as useSimpleLayoutState3 } from "#hooks";
+var Dialog = () => {
+  const { state, updateState } = useSimpleLayoutState3();
+  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, {
+    type: AppSurface3.Dialog,
+    data: state.dialogContent ?? void 0,
+    limit: 1,
+    fallback: ErrorFallback2
+  }) : /* @__PURE__ */ React9.createElement(DialogOverlay, {
+    blockAlign: state.dialogBlockAlign,
+    classNames: state.dialogOverlayClasses,
+    style: state.dialogOverlayStyle
+  }, /* @__PURE__ */ React9.createElement(Surface3.Surface, {
+    type: AppSurface3.Dialog,
+    data: state.dialogContent ?? void 0,
+    limit: 1,
+    fallback: ErrorFallback2
+  })));
+};
+
+// src/components/SimpleLayout/Drawer.tsx
+import React10, { useMemo as useMemo4 } from "react";
+import { Surface as Surface4 } from "@dxos/app-framework/ui";
+import { AppSurface as AppSurface4, useAppGraph as useAppGraph4 } from "@dxos/app-toolkit/ui";
+import { useNode as useNode2 } from "@dxos/plugin-graph";
+import { ErrorFallback as ErrorFallback3, Panel as Panel2 } from "@dxos/react-ui";
+import { getLinkedVariant } from "@dxos/react-ui-attention";
+import { Menu as Menu3, useMenuActions as useMenuActions3 } from "@dxos/react-ui-menu";
+import { useCompanions, useDrawerActions, useSimpleLayoutState as useSimpleLayoutState4 } from "#hooks";
+var DRAWER_NAME = "SimpleLayout.Drawer";
+var Drawer = () => {
+  const { graph } = useAppGraph4();
+  const { state: layoutState } = useSimpleLayoutState4();
+  const placeholder = useMemo4(() => /* @__PURE__ */ React10.createElement(Loading, null), []);
+  const activeId = layoutState.active ?? layoutState.workspace;
+  const companions = useCompanions(activeId);
+  const { companionId, variant } = useSelectedCompanion(companions, layoutState.companionVariant);
+  const node = useNode2(graph, companionId);
+  const parentNode = useNode2(graph, activeId);
+  const data = useMemo4(() => {
+    if (!node || !companionId) {
+      return void 0;
+    }
+    return {
+      attendableId: companionId,
+      subject: node.data,
+      companionTo: parentNode?.data,
+      properties: node.properties,
+      variant
+    };
+  }, [
+    companionId,
+    node,
+    parentNode,
+    variant
+  ]);
+  const { actions, onAction } = useDrawerActions(DRAWER_NAME);
+  const menuActions = useMenuActions3(actions);
+  return /* @__PURE__ */ React10.createElement(Panel2.Root, null, /* @__PURE__ */ React10.createElement(Panel2.Toolbar, null, /* @__PURE__ */ React10.createElement(Menu3.Root, {
+    ...menuActions,
+    alwaysActive: true,
+    onAction
+  }, /* @__PURE__ */ React10.createElement(Menu3.Toolbar, null))), /* @__PURE__ */ React10.createElement(Panel2.Content, null, /* @__PURE__ */ React10.createElement(Surface4.Surface, {
+    type: AppSurface4.Article,
+    data,
+    limit: 1,
+    fallback: ErrorFallback3,
+    placeholder
+  })));
+};
+Drawer.displayName = DRAWER_NAME;
+var useSelectedCompanion = (companions, preferredVariant) => {
+  const selectedCompanion = useMemo4(() => {
+    if (companions.length === 0) {
+      return void 0;
+    }
+    if (preferredVariant) {
+      const preferred = companions.find((c) => getLinkedVariant(c.id) === preferredVariant);
+      if (preferred) {
+        return preferred;
+      }
+    }
+    return companions[0];
+  }, [
+    companions,
+    preferredVariant
+  ]);
+  const companionId = selectedCompanion?.id;
+  const variant = companionId ? getLinkedVariant(companionId) : void 0;
+  return {
+    selectedCompanion,
+    companionId,
+    variant
+  };
+};
+
+// src/components/SimpleLayout/SimpleLayout.tsx
+var SimpleLayout = () => {
+  const { state } = useSimpleLayoutState5();
+  const [keyboardOpen, setKeyboardOpen] = useState3(false);
+  const [splitterMode, setSplitterMode] = useState3("top");
+  const drawerRef = useRef4(null);
+  useLayoutEffect2(() => {
+    if (!keyboardOpen) {
+      setSplitterMode(state.drawerState === "closed" ? "top" : state.drawerState === "open" ? "split" : "bottom");
+    }
+  }, [
+    state.drawerState,
+    keyboardOpen
+  ]);
+  return /* @__PURE__ */ React11.createElement(DebugOverlay.Root, {
+    enabled: false
+  }, /* @__PURE__ */ React11.createElement(PopoverRoot, null, /* @__PURE__ */ React11.createElement(Mosaic2.Root, null, /* @__PURE__ */ React11.createElement(MobileLayout.Root, {
+    classNames: "dx-container grid relative bg-toolbar-surface",
+    onKeyboardOpenChange: (nextKeyboardOpen) => setKeyboardOpen(nextKeyboardOpen)
+  }, /* @__PURE__ */ React11.createElement(MobileLayout.Panel, {
+    safe: {
+      top: true,
+      bottom: splitterMode === "top"
+    }
+  }, /* @__PURE__ */ React11.createElement(Splitter.Root, {
+    mode: splitterMode,
+    ratio: 0.55
+  }, /* @__PURE__ */ React11.createElement(Splitter.Panel, {
+    position: "top"
+  }, /* @__PURE__ */ React11.createElement(Main, null)), /* @__PURE__ */ React11.createElement(Splitter.Panel, {
+    position: "bottom",
+    ref: drawerRef
+  }, /* @__PURE__ */ React11.createElement(Drawer, null))), /* @__PURE__ */ React11.createElement(Dialog, null), /* @__PURE__ */ React11.createElement(PopoverContent, null))))));
+};
+
+// src/components/NavBranch/NavBranch.tsx
+import React12, { useCallback as useCallback4, useEffect as useEffect5, useMemo as useMemo5, useRef as useRef5 } from "react";
+import { useOperationInvoker as useOperationInvoker2 } from "@dxos/app-framework/ui";
+import { LayoutOperation as LayoutOperation2 } from "@dxos/app-toolkit";
+import { useAppGraph as useAppGraph5 } from "@dxos/app-toolkit/ui";
+import { useConnections as useConnections2 } from "@dxos/plugin-graph";
+import { Avatar as Avatar2, Icon as Icon2, ScrollArea as ScrollArea2, toLocalizedString as toLocalizedString3, useTranslation as useTranslation4 } from "@dxos/react-ui";
+import { Card as Card3 } from "@dxos/react-ui";
+import { Mosaic as Mosaic3 } from "@dxos/react-ui-mosaic";
+import { SearchPanel as SearchPanel2, useSearchListItem as useSearchListItem2, useSearchListResults as useSearchListResults2 } from "@dxos/react-ui-search";
+import { mx as mx3 } from "@dxos/ui-theme";
+import { meta as meta4 } from "#meta";
+var NavBranch = ({ id }) => {
+  const { t } = useTranslation4(meta4.id);
+  const { graph } = useAppGraph5();
+  useExpandPath(id);
+  const children = useConnections2(graph, id, "child");
+  const visibleChildren = useMemo5(() => children.filter((node) => node.properties.disposition !== "hidden"), [
+    children
+  ]);
+  const { results, handleSearch } = useSearchListResults2({
+    items: visibleChildren,
+    extract: (child) => toLocalizedString3(child.properties.label, t)
+  });
+  return /* @__PURE__ */ React12.createElement(SearchPanel2, {
+    onSearch: handleSearch
+  }, /* @__PURE__ */ React12.createElement(Mosaic3.Container, {
+    asChild: true
+  }, /* @__PURE__ */ React12.createElement(ScrollArea2.Root, {
+    centered: true,
+    padding: true,
+    thin: true
+  }, /* @__PURE__ */ React12.createElement(ScrollArea2.Viewport, null, /* @__PURE__ */ React12.createElement(Mosaic3.Stack, {
+    classNames: "gap-1",
+    draggable: false,
+    items: results,
+    getId: (item) => item.id,
+    Tile: NavBranchTile
+  })))));
+};
+var NavBranchTile = (props) => {
+  const data = props.data;
+  const { t } = useTranslation4(meta4.id);
+  const { invokePromise } = useOperationInvoker2();
+  const ref = useRef5(null);
+  const { selectedValue, registerItem, unregisterItem } = useSearchListItem2();
+  const isSelected = selectedValue === data.id;
+  const name = toLocalizedString3(data.properties.label, t);
+  const handleSelect = useCallback4(() => void invokePromise(LayoutOperation2.Open, {
+    subject: [
+      data.id
+    ]
+  }), [
+    invokePromise,
+    data.id
+  ]);
+  useEffect5(() => {
+    if (ref.current) {
+      registerItem(data.id, ref.current, handleSelect);
+    }
+    return () => unregisterItem(data.id);
+  }, [
+    data.id,
+    handleSelect,
+    registerItem,
+    unregisterItem
+  ]);
+  useEffect5(() => {
+    if (isSelected && ref.current) {
+      ref.current.scrollIntoView({
+        block: "nearest",
+        behavior: "smooth"
+      });
+    }
+  }, [
+    isSelected
+  ]);
+  return /* @__PURE__ */ React12.createElement(Card3.Root, {
+    ref,
+    role: "button",
+    fullWidth: true,
+    tabIndex: -1,
+    "data-selected": isSelected,
+    classNames: mx3("dx-focus-ring cursor-pointer", isSelected && "bg-hover-overlay"),
+    onClick: handleSelect
+  }, /* @__PURE__ */ React12.createElement(Card3.Toolbar, null, /* @__PURE__ */ React12.createElement(Avatar2.Root, null, /* @__PURE__ */ React12.createElement(Avatar2.Content, {
+    hue: data.properties.hue,
+    icon: data.properties.icon,
+    hueVariant: "transparent",
+    variant: "square",
+    size: 8,
+    fallback: name
+  }), /* @__PURE__ */ React12.createElement(Avatar2.Label, null, name), /* @__PURE__ */ React12.createElement(Icon2, {
+    icon: "ph--caret-right--regular"
+  }))));
+};
+export {
+  AppBar,
+  DebugOverlay,
+  Home,
+  Loading,
+  Main,
+  MobileLayout,
+  NavBar,
+  NavBranch,
+  PopoverContent,
+  PopoverRoot,
+  SimpleLayout,
+  useDebugLog,
+  useMobileLayout
+};
+//# sourceMappingURL=index.mjs.map