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

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

@@ -1,790 +0,0 @@
-import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
-import {
-  SimpleLayoutState,
-  meta
-} from "./chunk-F5TEKVJG.mjs";
-
-// src/components/Home/Home.tsx
-import React, { useCallback, useEffect as useEffect2, useMemo, useRef } from "react";
-import { Common } from "@dxos/app-framework";
-import { useAppGraph as useAppGraph2, useOperationInvoker } from "@dxos/app-framework/react";
-import { Node, useConnections } from "@dxos/plugin-graph";
-import { Avatar, Icon, Toolbar, toLocalizedString, useTranslation } from "@dxos/react-ui";
-import { Card, Layout, 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 { useAppGraph } from "@dxos/app-framework/react";
-import { Graph } from "@dxos/plugin-graph";
-var useLoadDescendents = (nodeId) => {
-  const { graph } = useAppGraph();
-  useEffect(() => {
-    if (nodeId) {
-      Graph.expand(graph, nodeId, "outbound");
-      Graph.getConnections(graph, nodeId, "outbound").forEach((child) => {
-        Graph.expand(graph, child.id, "outbound");
-      });
-    }
-  }, [
-    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");
-  useLoadDescendents(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(Layout.Main, {
-    toolbar: true
-  }, /* @__PURE__ */ React.createElement(SearchList.Root, {
-    onSearch: handleSearch
-  }, /* @__PURE__ */ React.createElement(Toolbar.Root, null, /* @__PURE__ */ React.createElement(SearchList.Input, {
-    placeholder: t("search placeholder"),
-    autoFocus: true
-  })), /* @__PURE__ */ React.createElement(SearchList.Content, null, /* @__PURE__ */ React.createElement(Mosaic.Container, {
-    asChild: true
-  }, /* @__PURE__ */ React.createElement(Mosaic.Viewport, {
-    padding: true
-  }, /* @__PURE__ */ React.createElement(Mosaic.Stack, {
-    items: results,
-    getId: (node) => node.id,
-    Tile: WorkspaceTile
-  }))))));
-};
-var WorkspaceTile = ({ data }) => {
-  const { t } = useTranslation(meta.id);
-  const { invokePromise } = useOperationInvoker();
-  const { selectedValue, registerItem, unregisterItem } = useSearchListItem();
-  const ref = useRef(null);
-  const handleSelect = useCallback(() => invokePromise(Common.LayoutOperation.SwitchWorkspace, {
-    subject: data.id
-  }), [
-    invokePromise,
-    data.id
-  ]);
-  useLoadDescendents(data.id);
-  const name = toLocalizedString(data.properties.label, t);
-  const isSelected = selectedValue === data.id;
-  useEffect2(() => {
-    if (ref.current) {
-      registerItem(data.id, ref.current, handleSelect);
-    }
-    return () => unregisterItem(data.id);
-  }, [
-    data.id,
-    handleSelect,
-    registerItem,
-    unregisterItem
-  ]);
-  useEffect2(() => {
-    if (isSelected && ref.current) {
-      ref.current.scrollIntoView({
-        block: "nearest",
-        behavior: "smooth"
-      });
-    }
-  }, [
-    isSelected
-  ]);
-  return /* @__PURE__ */ React.createElement(Card.Root, {
-    ref,
-    role: "button",
-    fullWidth: true,
-    tabIndex: -1,
-    "data-selected": isSelected,
-    classNames: mx("dx-focus-ring", isSelected && "bg-hoverOverlay"),
-    onClick: handleSelect
-  }, /* @__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);
-  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 React10, { useCallback as useCallback6 } from "react";
-import { Main as NaturalMain3 } from "@dxos/react-ui";
-import { Mosaic as Mosaic2 } from "@dxos/react-ui-mosaic";
-
-// src/hooks/useCompanions.ts
-import { useMemo as useMemo2 } from "react";
-import { useAppGraph as useAppGraph3 } from "@dxos/app-framework/react";
-import { useConnections as useConnections2 } from "@dxos/plugin-graph";
-import { byPosition as byPosition2 } from "@dxos/util";
-var PLANK_COMPANION_TYPE = "dxos.org/plugin/deck/plank-companion";
-var useCompanions = (id) => {
-  const { graph } = useAppGraph3();
-  const nodes = useConnections2(graph, id);
-  const companions = nodes.filter((node) => node.type === PLANK_COMPANION_TYPE);
-  return useMemo2(() => companions.toSorted((a, b) => byPosition2(a.properties, b.properties)), [
-    companions
-  ]);
-};
-
-// src/hooks/useSimpleLayoutState.ts
-import { RegistryContext, useAtomValue } from "@effect-atom/atom-react";
-import { useCallback as useCallback2, useContext } from "react";
-import { useCapability } from "@dxos/app-framework/react";
-var useSimpleLayoutState = () => {
-  const registry = useContext(RegistryContext);
-  const stateAtom = useCapability(SimpleLayoutState);
-  const state = useAtomValue(stateAtom);
-  const updateState = useCallback2((fn) => {
-    registry.set(stateAtom, fn(registry.get(stateAtom)));
-  }, [
-    registry,
-    stateAtom
-  ]);
-  return {
-    state,
-    updateState
-  };
-};
-
-// src/components/Dialog/Dialog.tsx
-import React3 from "react";
-import { Surface } from "@dxos/app-framework/react";
-import { AlertDialog, Dialog as NaturalDialog } from "@dxos/react-ui";
-
-// src/components/ContentError.tsx
-import React2 from "react";
-import { useTranslation as useTranslation2 } from "@dxos/react-ui";
-import { descriptionMessage, mx as mx2 } from "@dxos/ui-theme";
-var ContentError = ({ error }) => {
-  const { t } = useTranslation2(meta.id);
-  const errorString = error?.toString() ?? "";
-  return /* @__PURE__ */ React2.createElement("div", {
-    role: "none",
-    className: "grid place-items-center overflow-y-auto attention-surface"
-  }, /* @__PURE__ */ React2.createElement("p", {
-    role: "alert",
-    className: mx2(descriptionMessage, "p-2 break-all rounded-sm")
-  }, error ? errorString : t("error fallback message")));
-};
-
-// src/components/Dialog/Dialog.tsx
-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__ */ React3.createElement(DialogRoot, {
-    modal: state.dialogBlockAlign !== "end",
-    open: state.dialogOpen,
-    onOpenChange: (nextOpen) => updateState((s) => ({
-      ...s,
-      dialogOpen: nextOpen
-    }))
-  }, state.dialogBlockAlign === "end" ? /* @__PURE__ */ React3.createElement(Surface, {
-    role: "dialog",
-    data: state.dialogContent,
-    limit: 1,
-    fallback: ContentError
-  }) : /* @__PURE__ */ React3.createElement(DialogOverlay, {
-    blockAlign: state.dialogBlockAlign,
-    classNames: state.dialogOverlayClasses,
-    style: state.dialogOverlayStyle
-  }, /* @__PURE__ */ React3.createElement(Surface, {
-    role: "dialog",
-    data: state.dialogContent,
-    limit: 1,
-    fallback: ContentError
-  })));
-};
-
-// src/components/Popover/Popover.tsx
-import { createContext } from "@radix-ui/react-context";
-import React4, { useCallback as useCallback3, useEffect as useEffect3, useMemo as useMemo3, useRef as useRef2, useState } from "react";
-import { Surface as Surface2 } from "@dxos/app-framework/react";
-import { Popover, toLocalizedString as toLocalizedString2, useTranslation as useTranslation3 } from "@dxos/react-ui";
-import { Card as Card2 } from "@dxos/react-ui-mosaic";
-var DEBOUNCE_DELAY = 40;
-var [LayoutPopoverProvider, useLayoutPopoverContext] = createContext("LayoutPopover");
-var PopoverRoot = ({ children }) => {
-  const { state } = useSimpleLayoutState();
-  const [open, setOpen] = useState(false);
-  const virtualRef = useRef2(null);
-  const [virtualIter, setVirtualIter] = useState(0);
-  const debounceRef = useRef2(null);
-  useEffect3(() => {
-    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 = useMemo3(() => {
-    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 === "card" && /* @__PURE__ */ React4.createElement(Card2.Root, null, /* @__PURE__ */ React4.createElement(Card2.Toolbar, null, /* @__PURE__ */ React4.createElement("span", null), state.popoverTitle ? /* @__PURE__ */ React4.createElement(Card2.Title, null, toLocalizedString2(state.popoverTitle, t)) : /* @__PURE__ */ React4.createElement("span", null), /* @__PURE__ */ React4.createElement(Card2.Close, {
-    onClick: handleClose
-  })), /* @__PURE__ */ React4.createElement(Surface2, {
-    role: "card--content",
-    data: state.popoverContent,
-    limit: 1
-  })), state.popoverKind === "base" && /* @__PURE__ */ React4.createElement(Surface2, {
-    role: "popover",
-    data: state.popoverContent,
-    limit: 1
-  })), /* @__PURE__ */ React4.createElement(Popover.Arrow, null)));
-};
-
-// src/components/SimpleLayout/Drawer.tsx
-import React6, { useCallback as useCallback4, useMemo as useMemo4 } from "react";
-import { Surface as Surface3, useAppGraph as useAppGraph4 } from "@dxos/app-framework/react";
-import { useNode } from "@dxos/plugin-graph";
-import { IconButton, Main as NaturalMain, Toolbar as Toolbar2, toLocalizedString as toLocalizedString3, useTranslation as useTranslation4 } from "@dxos/react-ui";
-import { ATTENDABLE_PATH_SEPARATOR } from "@dxos/react-ui-attention";
-
-// src/components/ContentLoading.tsx
-import React5 from "react";
-var ContentLoading = () => {
-  return /* @__PURE__ */ React5.createElement("div", {
-    role: "none",
-    className: "grid place-items-center attention-surface"
-  });
-};
-
-// src/components/SimpleLayout/Drawer.tsx
-var DRAWER_NAME = "SimpleLayout.Drawer";
-var Drawer = () => {
-  const { t } = useTranslation4(meta.id);
-  const { state, updateState } = useSimpleLayoutState();
-  const { graph } = useAppGraph4();
-  const placeholder = useMemo4(() => /* @__PURE__ */ React6.createElement(ContentLoading, null), []);
-  const activeId = state.active ?? state.workspace;
-  const companions = useCompanions(activeId);
-  const { companionId, variant } = useSelectedCompanion(companions, state.companionVariant);
-  const node = useNode(graph, companionId);
-  const parentNode = useNode(graph, activeId);
-  const data = useMemo4(() => {
-    return node && {
-      attendableId: companionId,
-      subject: node.data,
-      companionTo: parentNode?.data,
-      properties: node.properties,
-      variant
-    };
-  }, [
-    companionId,
-    node,
-    parentNode,
-    variant
-  ]);
-  const handleTabClick = useCallback4((companion) => {
-    const [, companionVariant] = companion.id.split(ATTENDABLE_PATH_SEPARATOR);
-    updateState((s) => ({
-      ...s,
-      companionVariant
-    }));
-  }, [
-    updateState
-  ]);
-  const handleToggleExpand = useCallback4(() => {
-    updateState((s) => ({
-      ...s,
-      drawerState: s.drawerState === "full" ? "expanded" : "full"
-    }));
-  }, [
-    updateState
-  ]);
-  const handleClose = useCallback4(() => {
-    updateState((s) => ({
-      ...s,
-      drawerState: "closed"
-    }));
-  }, [
-    updateState
-  ]);
-  const drawerState = state.drawerState ?? "closed";
-  if (drawerState === "closed") {
-    return null;
-  }
-  const isFullyExpanded = drawerState === "full";
-  return /* @__PURE__ */ React6.createElement(NaturalMain.Drawer, {
-    label: t("drawer label")
-  }, /* @__PURE__ */ React6.createElement(Toolbar2.Root, null, /* @__PURE__ */ React6.createElement("div", {
-    role: "tablist",
-    className: "flex-1 min-is-0 overflow-x-auto scrollbar-none flex gap-1"
-  }, companions.map((companion) => /* @__PURE__ */ React6.createElement(IconButton, {
-    key: companion.id,
-    role: "tab",
-    "aria-selected": companionId === companion.id,
-    icon: companion.properties.icon,
-    iconOnly: true,
-    label: toLocalizedString3(companion.properties.label, t),
-    variant: companionId === companion.id ? "primary" : "ghost",
-    onClick: () => handleTabClick(companion)
-  }))), /* @__PURE__ */ React6.createElement(Toolbar2.Separator, {
-    variant: "gap"
-  }), /* @__PURE__ */ React6.createElement(Toolbar2.IconButton, {
-    icon: isFullyExpanded ? "ph--arrow-down--regular" : "ph--arrow-up--regular",
-    iconOnly: true,
-    label: isFullyExpanded ? t("collapse drawer label") : t("expand drawer label"),
-    onClick: handleToggleExpand
-  }), /* @__PURE__ */ React6.createElement(Toolbar2.IconButton, {
-    icon: "ph--x--regular",
-    iconOnly: true,
-    label: t("close drawer label"),
-    onClick: handleClose
-  })), /* @__PURE__ */ React6.createElement(Surface3, {
-    role: "article",
-    data,
-    limit: 1,
-    fallback: ContentError,
-    placeholder
-  }));
-};
-Drawer.displayName = DRAWER_NAME;
-var parseEntryId = (entryId) => {
-  const [id, variant] = entryId.split(ATTENDABLE_PATH_SEPARATOR);
-  return {
-    id,
-    variant
-  };
-};
-var useSelectedCompanion = (companions, preferredVariant) => {
-  const selectedCompanion = useMemo4(() => {
-    if (companions.length === 0) {
-      return void 0;
-    }
-    if (preferredVariant) {
-      const preferred = companions.find((c) => {
-        const { variant: variant2 } = parseEntryId(c.id);
-        return variant2 === preferredVariant;
-      });
-      if (preferred) {
-        return preferred;
-      }
-    }
-    return companions[0];
-  }, [
-    companions,
-    preferredVariant
-  ]);
-  const companionId = selectedCompanion?.id;
-  const { variant } = parseEntryId(companionId ?? "");
-  return {
-    selectedCompanion,
-    companionId,
-    variant
-  };
-};
-
-// src/components/SimpleLayout/Main.tsx
-import React9, { useMemo as useMemo6 } from "react";
-import { Surface as Surface4, useAppGraph as useAppGraph7 } from "@dxos/app-framework/react";
-import { useNode as useNode2 } from "@dxos/plugin-graph";
-import { Main as NaturalMain2, useSidebars } from "@dxos/react-ui";
-import { mx as mx5 } from "@dxos/ui-theme";
-
-// src/components/SimpleLayout/Banner.tsx
-import React7, { Fragment, useCallback as useCallback5, useMemo as useMemo5 } from "react";
-import { Common as Common2 } from "@dxos/app-framework";
-import { useAppGraph as useAppGraph5, useOperationInvoker as useOperationInvoker2 } from "@dxos/app-framework/react";
-import { Graph as Graph2, Node as Node2, useActionRunner, useActions } from "@dxos/plugin-graph";
-import { IconButton as IconButton2, Popover as Popover2, Toolbar as Toolbar3, toLocalizedString as toLocalizedString4, useTranslation as useTranslation5 } from "@dxos/react-ui";
-import { DropdownMenu, MenuProvider } from "@dxos/react-ui-menu";
-import { mx as mx3, osTranslations } from "@dxos/ui-theme";
-var isWorkspaceOrCollectionChild = (graph, itemId) => {
-  const parents = Graph2.getConnections(graph, itemId, "inbound");
-  return parents.some((node) => node.properties.disposition === "workspace" || node.properties.disposition === "collection");
-};
-var Banner = ({ node, classNames }) => {
-  const { t } = useTranslation5(meta.id);
-  const { state } = useSimpleLayoutState();
-  const { invokePromise } = useOperationInvoker2();
-  const { graph } = useAppGraph5();
-  const runAction = useActionRunner();
-  const label = (node && toLocalizedString4(node.properties.label, t)) ?? t("current app name", {
-    ns: osTranslations
-  });
-  const allActions = useActions(graph, node?.id);
-  const actions = useMemo5(() => {
-    return allActions.filter((a) => [
-      "list-item",
-      "list-item-primary",
-      "heading-list-item"
-    ].includes(a.properties.disposition));
-  }, [
-    allActions
-  ]);
-  const isTopLevelItem = useMemo5(() => {
-    if (!state.active) {
-      return false;
-    }
-    return isWorkspaceOrCollectionChild(graph, state.active);
-  }, [
-    graph,
-    state.active
-  ]);
-  const handleClick = useCallback5(async () => {
-    if (state.active) {
-      if (state.history.length === 0 && isTopLevelItem) {
-        await invokePromise(Common2.LayoutOperation.SwitchWorkspace, {
-          subject: Node2.RootId
-        });
-      } else {
-        await invokePromise(Common2.LayoutOperation.Close, {
-          subject: [
-            state.active
-          ]
-        });
-      }
-    } else {
-      await invokePromise(Common2.LayoutOperation.SwitchWorkspace, {
-        subject: Node2.RootId
-      });
-    }
-  }, [
-    invokePromise,
-    state.active,
-    state.history.length,
-    isTopLevelItem
-  ]);
-  const AnchorRoot = node && state.popoverAnchorId === `dxos.org/ui/${meta.id}/${node.id}` ? Popover2.Anchor : Fragment;
-  if (!node) {
-    return null;
-  }
-  return /* @__PURE__ */ React7.createElement(Toolbar3.Root, {
-    role: "banner",
-    classNames: mx3("grid grid-cols-[var(--rail-size)_1fr_var(--rail-size)]", classNames)
-  }, node.id !== Node2.RootId ? /* @__PURE__ */ React7.createElement(IconButton2, {
-    iconOnly: true,
-    variant: "ghost",
-    icon: "ph--caret-left--regular",
-    label: t("back label"),
-    onClick: handleClick
-  }) : /* @__PURE__ */ React7.createElement("div", null), /* @__PURE__ */ React7.createElement("h1", {
-    className: "grow text-center truncate font-medium"
-  }, label), actions.length > 0 ? /* @__PURE__ */ React7.createElement(AnchorRoot, null, /* @__PURE__ */ React7.createElement(MenuProvider, {
-    onAction: runAction
-  }, /* @__PURE__ */ React7.createElement(DropdownMenu.Root, {
-    items: actions,
-    caller: meta.id
-  }, /* @__PURE__ */ React7.createElement(DropdownMenu.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React7.createElement(IconButton2, {
-    iconOnly: true,
-    variant: "ghost",
-    icon: "ph--dots-three-vertical--regular",
-    label: t("actions menu label")
-  }))))) : /* @__PURE__ */ React7.createElement("span", null));
-};
-
-// src/components/SimpleLayout/NavBar.tsx
-import React8 from "react";
-import { Common as Common3 } from "@dxos/app-framework";
-import { useAppGraph as useAppGraph6, useOperationInvoker as useOperationInvoker3 } from "@dxos/app-framework/react";
-import { Node as Node3, useActionRunner as useActionRunner2, useConnections as useConnections3 } from "@dxos/plugin-graph";
-import { IconButton as IconButton3, Toolbar as Toolbar4, Tooltip, toLocalizedString as toLocalizedString5, useTranslation as useTranslation6 } from "@dxos/react-ui";
-import { DropdownMenu as DropdownMenu2, MenuProvider as MenuProvider2 } from "@dxos/react-ui-menu";
-import { mx as mx4 } from "@dxos/ui-theme";
-var NAVBAR_NAME = "SimpleLayout.NavBar";
-var NavBar = ({ classNames, activeId }) => {
-  const { t } = useTranslation6(meta.id);
-  const { graph } = useAppGraph6();
-  const runAction = useActionRunner2();
-  const { invokePromise } = useOperationInvoker3();
-  const connections = useConnections3(graph, Node3.RootId);
-  const menuActions = connections.filter((node) => node.properties.disposition === "menu");
-  const companions = useCompanions(activeId);
-  return /* @__PURE__ */ React8.createElement(Toolbar4.Root, {
-    classNames: mx4("justify-center", classNames)
-  }, companions.map((companion) => /* @__PURE__ */ React8.createElement(Toolbar4.IconButton, {
-    key: companion.id,
-    icon: companion.properties.icon ?? "ph--placeholder--regular",
-    iconOnly: true,
-    label: toLocalizedString5(companion.properties.label, t),
-    onClick: () => {
-      void invokePromise(Common3.LayoutOperation.Open, {
-        subject: [
-          companion.id
-        ]
-      });
-    }
-  })), /* @__PURE__ */ React8.createElement(Toolbar4.Separator, {
-    variant: "gap"
-  }), /* @__PURE__ */ React8.createElement(MenuProvider2, {
-    onAction: runAction
-  }, /* @__PURE__ */ React8.createElement(DropdownMenu2.Root, {
-    items: menuActions
-  }, /* @__PURE__ */ React8.createElement(Tooltip.Trigger, {
-    asChild: true,
-    content: t("app menu label")
-  }, /* @__PURE__ */ React8.createElement(DropdownMenu2.Trigger, {
-    asChild: true,
-    "data-testid": "simpleLayoutPlugin.addSpace"
-  }, /* @__PURE__ */ React8.createElement(IconButton3, {
-    icon: "ph--plus--regular",
-    iconOnly: true,
-    label: t("main menu label")
-  }))))));
-};
-NavBar.displayName = NAVBAR_NAME;
-
-// src/components/SimpleLayout/Main.tsx
-var MAIN_NAME = "SimpleLayout.Main";
-var Main = () => {
-  const { state } = useSimpleLayoutState();
-  const { graph } = useAppGraph7();
-  const id = state.active ?? state.workspace;
-  const node = useNode2(graph, id);
-  useLoadDescendents(id);
-  const placeholder = useMemo6(() => /* @__PURE__ */ React9.createElement(ContentLoading, null), []);
-  const data = useMemo6(() => {
-    return node && {
-      attendableId: id,
-      subject: node.data,
-      properties: node.properties,
-      popoverAnchorId: state.popoverAnchorId
-    };
-  }, [
-    id,
-    node,
-    node?.data,
-    node?.properties,
-    state.popoverAnchorId
-  ]);
-  const { drawerState } = useSidebars(MAIN_NAME);
-  const showNavBar = !state.isPopover && drawerState === "closed";
-  return /* @__PURE__ */ React9.createElement(NaturalMain2.Content, {
-    bounce: true,
-    classNames: mx5("bs-full", "pbs-[env(safe-area-inset-top)] pbe-[env(safe-area-inset-bottom)]")
-  }, /* @__PURE__ */ React9.createElement("div", {
-    role: "none",
-    className: mx5("grid bs-full overflow-hidden", showNavBar ? "grid-rows-[min-content_1fr_min-content]" : "grid-rows-[min-content_1fr]")
-  }, /* @__PURE__ */ React9.createElement(Banner, {
-    classNames: "border-be border-separator",
-    node
-  }), /* @__PURE__ */ React9.createElement("article", {
-    className: "bs-full overflow-hidden"
-  }, /* @__PURE__ */ React9.createElement(Surface4, {
-    key: id,
-    role: "article",
-    data,
-    limit: 1,
-    fallback: ContentError,
-    placeholder
-  })), showNavBar && /* @__PURE__ */ React9.createElement(NavBar, {
-    classNames: "border-bs border-separator",
-    activeId: id
-  })));
-};
-Main.displayName = MAIN_NAME;
-
-// src/components/SimpleLayout/SimpleLayout.tsx
-var SimpleLayout = () => {
-  const { state, updateState } = useSimpleLayoutState();
-  const handleDrawerStateChange = useCallback6((nextState) => {
-    updateState((s) => ({
-      ...s,
-      drawerState: nextState
-    }));
-  }, [
-    updateState
-  ]);
-  return /* @__PURE__ */ React10.createElement(Mosaic2.Root, null, /* @__PURE__ */ React10.createElement(NaturalMain3.Root, {
-    drawerState: state.drawerState ?? "closed",
-    onDrawerStateChange: handleDrawerStateChange
-  }, /* @__PURE__ */ React10.createElement(PopoverRoot, null, /* @__PURE__ */ React10.createElement(Main, null), /* @__PURE__ */ React10.createElement(Drawer, null), /* @__PURE__ */ React10.createElement(Dialog, null), /* @__PURE__ */ React10.createElement(PopoverContent, null))));
-};
-
-// src/components/Workspace/Workspace.tsx
-import React11, { useCallback as useCallback7, useEffect as useEffect4, useRef as useRef3 } from "react";
-import { Common as Common4 } from "@dxos/app-framework";
-import { useAppGraph as useAppGraph8, useOperationInvoker as useOperationInvoker4 } from "@dxos/app-framework/react";
-import { useConnections as useConnections4 } from "@dxos/plugin-graph";
-import { Avatar as Avatar2, Icon as Icon2, Toolbar as Toolbar5, toLocalizedString as toLocalizedString6, useTranslation as useTranslation7 } from "@dxos/react-ui";
-import { Card as Card3, Layout as Layout2, Mosaic as Mosaic3 } 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 Workspace = ({ id }) => {
-  const { t } = useTranslation7(meta.id);
-  const { graph } = useAppGraph8();
-  useLoadDescendents(id);
-  const children = useConnections4(graph, id, "outbound");
-  const { results, handleSearch } = useSearchListResults2({
-    items: children,
-    extract: (child) => toLocalizedString6(child.properties.label, t)
-  });
-  return /* @__PURE__ */ React11.createElement(Layout2.Main, {
-    toolbar: true
-  }, /* @__PURE__ */ React11.createElement(SearchList2.Root, {
-    onSearch: handleSearch
-  }, /* @__PURE__ */ React11.createElement(Toolbar5.Root, null, /* @__PURE__ */ React11.createElement(SearchList2.Input, {
-    placeholder: t("search placeholder"),
-    autoFocus: true
-  })), /* @__PURE__ */ React11.createElement(SearchList2.Content, null, /* @__PURE__ */ React11.createElement(Mosaic3.Container, {
-    asChild: true
-  }, /* @__PURE__ */ React11.createElement(Mosaic3.Viewport, {
-    padding: true
-  }, /* @__PURE__ */ React11.createElement(Mosaic3.Stack, {
-    items: results,
-    getId: (child) => child.id,
-    Tile: WorkspaceChildTile
-  }))))));
-};
-var WorkspaceChildTile = ({ data }) => {
-  const { t } = useTranslation7(meta.id);
-  const { invokeSync } = useOperationInvoker4();
-  const ref = useRef3(null);
-  const { selectedValue, registerItem, unregisterItem } = useSearchListItem2();
-  const isSelected = selectedValue === data.id;
-  const name = toLocalizedString6(data.properties.label, t);
-  const handleSelect = useCallback7(() => invokeSync(Common4.LayoutOperation.Open, {
-    subject: [
-      data.id
-    ]
-  }), [
-    invokeSync,
-    data.id
-  ]);
-  useEffect4(() => {
-    if (ref.current) {
-      registerItem(data.id, ref.current, handleSelect);
-    }
-    return () => unregisterItem(data.id);
-  }, [
-    data.id,
-    handleSelect,
-    registerItem,
-    unregisterItem
-  ]);
-  useEffect4(() => {
-    if (isSelected && ref.current) {
-      ref.current.scrollIntoView({
-        block: "nearest",
-        behavior: "smooth"
-      });
-    }
-  }, [
-    isSelected
-  ]);
-  return /* @__PURE__ */ React11.createElement(Card3.Root, {
-    ref,
-    role: "button",
-    fullWidth: true,
-    tabIndex: -1,
-    "data-selected": isSelected,
-    classNames: mx6("dx-focus-ring", isSelected && "bg-hoverOverlay"),
-    onClick: handleSelect
-  }, /* @__PURE__ */ React11.createElement(Card3.Toolbar, {
-    density: "coarse"
-  }, /* @__PURE__ */ React11.createElement(Avatar2.Root, null, /* @__PURE__ */ React11.createElement(Avatar2.Content, {
-    hue: data.properties.hue,
-    icon: data.properties.icon,
-    hueVariant: "transparent",
-    variant: "square",
-    size: 12,
-    fallback: name
-  }), /* @__PURE__ */ React11.createElement(Avatar2.Label, null, name), /* @__PURE__ */ React11.createElement(Icon2, {
-    icon: "ph--caret-right--regular"
-  }))));
-};
-
-export {
-  Home,
-  SimpleLayout,
-  Workspace
-};
-//# sourceMappingURL=chunk-HB2B3LLG.mjs.map