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

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

@@ -0,0 +1,29 @@
+// src/meta.ts
+import { trim } from "@dxos/util";
+var meta = {
+  id: "dxos.org/plugin/simple-layout",
+  name: "Simple Layout",
+  description: trim`
+    Minimal layout plugin for simplified UI contexts like popover windows.
+    Provides basic content rendering without sidebars or complex navigation.
+  `,
+  icon: "ph--layout--regular"
+};
+
+// src/types/capabilities.ts
+import { Capability } from "@dxos/app-framework";
+var SimpleLayoutState = Capability.make(`${meta.id}/state`);
+
+// src/types/events.ts
+import { Common } from "@dxos/app-framework";
+(function(SimpleLayoutEvents2) {
+  SimpleLayoutEvents2.StateReady = Common.ActivationEvent.createStateEvent(SimpleLayoutState.identifier);
+})(SimpleLayoutEvents || (SimpleLayoutEvents = {}));
+var SimpleLayoutEvents;
+
+export {
+  meta,
+  SimpleLayoutState,
+  SimpleLayoutEvents
+};
+//# sourceMappingURL=chunk-CLPGTNWJ.mjs.map

package/dist/lib/browser/chunk-CLPGTNWJ.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/meta.ts", "../../../src/types/capabilities.ts", "../../../src/types/events.ts"],
+  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport { type Plugin } from '@dxos/app-framework';\nimport { trim } from '@dxos/util';\n\nexport const meta: Plugin.Meta = {\n  id: 'dxos.org/plugin/simple-layout',\n  name: 'Simple Layout',\n  description: trim`\n    Minimal layout plugin for simplified UI contexts like popover windows.\n    Provides basic content rendering without sidebars or complex navigation.\n  `,\n  icon: 'ph--layout--regular',\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { type Atom } from '@effect-atom/atom-react';\n\nimport { Capability } from '@dxos/app-framework';\nimport { type Label } from '@dxos/react-ui';\n\nimport { meta } from '../meta';\n\n// TODO(wittjosiah): Handle toasts.\nexport type SimpleLayoutState = {\n  /** Data to be passed to the main content Surface. */\n  content?: any;\n\n  dialogOpen: boolean;\n  dialogType?: 'default' | 'alert';\n  dialogBlockAlign?: 'start' | 'center' | 'end';\n  dialogOverlayClasses?: string;\n  dialogOverlayStyle?: Record<string, any>;\n  /** Data to be passed to the dialog Surface. */\n  dialogContent?: any;\n\n  popoverOpen?: boolean;\n  popoverSide?: 'top' | 'right' | 'bottom' | 'left';\n  popoverVariant?: 'virtual' | 'react';\n  popoverAnchor?: HTMLButtonElement;\n  popoverAnchorId?: string;\n  popoverKind?: 'base' | 'card';\n  popoverTitle?: Label;\n  popoverContent?: any;\n\n  workspace: string;\n  previousWorkspace: string;\n  active?: string;\n  /** Stack of previously active item IDs for back navigation. */\n  history: string[];\n\n  /** Whether running in popover window context (hides mobile-specific UI). */\n  isPopover?: boolean;\n};\n\nexport const SimpleLayoutState = Capability.make<Atom.Writable<SimpleLayoutState>>(`${meta.id}/state`);\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { type ActivationEvent, Common } from '@dxos/app-framework';\n\nimport { SimpleLayoutState } from './capabilities';\n\nexport namespace SimpleLayoutEvents {\n  /** Fired when SimpleLayoutState capability is ready. */\n  export const StateReady: ActivationEvent.ActivationEvent = Common.ActivationEvent.createStateEvent(\n    SimpleLayoutState.identifier,\n  );\n}\n"],
+  "mappings": ";AAKA,SAASA,YAAY;AAEd,IAAMC,OAAoB;EAC/BC,IAAI;EACJC,MAAM;EACNC,aAAaC;;;;EAIbC,MAAM;AACR;;;ACTA,SAASC,kBAAkB;AAqCpB,IAAMC,oBAAoBC,WAAWC,KAAuC,GAAGC,KAAKC,EAAE,QAAQ;;;ACvCrG,SAA+BC,cAAc;UAI5BC,qBAAAA;sBAEFC,aAA8CC,OAAOC,gBAAgBC,iBAChFC,kBAAkBC,UAAU;AAEhC,GALiBN,uBAAAA,qBAAAA,CAAAA,EAAAA;;",
+  "names": ["trim", "meta", "id", "name", "description", "trim", "icon", "Capability", "SimpleLayoutState", "Capability", "make", "meta", "id", "Common", "SimpleLayoutEvents", "StateReady", "Common", "ActivationEvent", "createStateEvent", "SimpleLayoutState", "identifier"]
+}

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

@@ -0,0 +1,613 @@
+import {
+  SimpleLayoutState,
+  meta
+} from "./chunk-CLPGTNWJ.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(() => {
+    const frame = requestAnimationFrame(() => {
+      if (nodeId) {
+        Graph.expand(graph, nodeId, "outbound");
+        Graph.getConnections(graph, nodeId, "outbound").forEach((child) => {
+          Graph.expand(graph, child.id, "outbound");
+        });
+      }
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [
+    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 React9 from "react";
+
+// 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/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/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 useMemo2, 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 = useMemo2(() => {
+    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/Main.tsx
+import React8, { useCallback as useCallback5, useMemo as useMemo4 } from "react";
+import { Surface as Surface3, useAppGraph as useAppGraph5 } from "@dxos/app-framework/react";
+import { log } from "@dxos/log";
+import { useNode } from "@dxos/plugin-graph";
+import { Main as NaturalMain } from "@dxos/react-ui";
+import { ATTENDABLE_PATH_SEPARATOR } from "@dxos/react-ui-attention";
+import { Mosaic as Mosaic2 } from "@dxos/react-ui-mosaic";
+import { mx as mx5 } from "@dxos/ui-theme";
+
+// 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/Banner.tsx
+import React6, { useCallback as useCallback4, useMemo as useMemo3 } from "react";
+import { Common as Common2 } from "@dxos/app-framework";
+import { useAppGraph as useAppGraph3, useOperationInvoker as useOperationInvoker2 } from "@dxos/app-framework/react";
+import { Graph as Graph2, Node as Node2 } from "@dxos/plugin-graph";
+import { IconButton, Toolbar as Toolbar2, toLocalizedString as toLocalizedString3, useTranslation as useTranslation4 } from "@dxos/react-ui";
+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 } = useTranslation4(meta.id);
+  const { state } = useSimpleLayoutState();
+  const { invokePromise } = useOperationInvoker2();
+  const { graph } = useAppGraph3();
+  const label = (node && toLocalizedString3(node.properties.label, t)) ?? t("current app name", {
+    ns: osTranslations
+  });
+  const isTopLevelItem = useMemo3(() => {
+    if (!state.active) {
+      return false;
+    }
+    return isWorkspaceOrCollectionChild(graph, state.active);
+  }, [
+    graph,
+    state.active
+  ]);
+  const handleClick = useCallback4(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
+  ]);
+  if (!node) {
+    return null;
+  }
+  return /* @__PURE__ */ React6.createElement(Toolbar2.Root, {
+    role: "banner",
+    classNames: mx3("grid grid-cols-[var(--rail-size)_1fr_var(--rail-size)]", classNames)
+  }, node.id !== Node2.RootId ? /* @__PURE__ */ React6.createElement(IconButton, {
+    iconOnly: true,
+    variant: "ghost",
+    icon: "ph--caret-left--regular",
+    label: t("back label"),
+    onClick: handleClick
+  }) : /* @__PURE__ */ React6.createElement("div", null), /* @__PURE__ */ React6.createElement("h1", {
+    className: "grow text-center truncate font-medium"
+  }, label), /* @__PURE__ */ React6.createElement(IconButton, {
+    iconOnly: true,
+    variant: "ghost",
+    icon: "ph--dots-three-vertical--regular",
+    label: t("menu label")
+  }));
+};
+
+// src/components/SimpleLayout/NavBar.tsx
+import React7 from "react";
+import { useAppGraph as useAppGraph4 } from "@dxos/app-framework/react";
+import { Node as Node3, useActionRunner, useConnections as useConnections2 } from "@dxos/plugin-graph";
+import { IconButton as IconButton2, Toolbar as Toolbar3, Tooltip, useTranslation as useTranslation5 } from "@dxos/react-ui";
+import { DropdownMenu, MenuProvider } from "@dxos/react-ui-menu";
+import { mx as mx4 } from "@dxos/ui-theme";
+var NavBar = ({ classNames, activeId, onActiveIdChange }) => {
+  const { t } = useTranslation5(meta.id);
+  const { graph } = useAppGraph4();
+  const runAction = useActionRunner();
+  const connections = useConnections2(graph, Node3.RootId);
+  const menuActions = connections.filter((node) => node.properties.disposition === "menu");
+  const isBrowseActive = activeId !== "notifications" && activeId !== "profile";
+  return /* @__PURE__ */ React7.createElement(Toolbar3.Root, {
+    classNames: mx4("justify-center", classNames)
+  }, /* @__PURE__ */ React7.createElement(MenuProvider, {
+    onAction: runAction
+  }, /* @__PURE__ */ React7.createElement(DropdownMenu.Root, {
+    items: menuActions
+  }, /* @__PURE__ */ React7.createElement(Tooltip.Trigger, {
+    asChild: true,
+    content: t("app menu label")
+  }, /* @__PURE__ */ React7.createElement(DropdownMenu.Trigger, {
+    asChild: true,
+    "data-testid": "spacePlugin.addSpace"
+  }, /* @__PURE__ */ React7.createElement(IconButton2, {
+    icon: "ph--plus--regular",
+    iconOnly: true,
+    label: t("main menu label")
+  }))))));
+};
+
+// src/components/SimpleLayout/Main.tsx
+var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-simple-layout/src/components/SimpleLayout/Main.tsx";
+var Main = () => {
+  const { state } = useSimpleLayoutState();
+  const id = state.active ?? state.workspace;
+  const showNavBar = !state.isPopover;
+  const { graph } = useAppGraph5();
+  const node = useNode(graph, id);
+  const placeholder = useMemo4(() => /* @__PURE__ */ React8.createElement(ContentLoading, null), []);
+  const data = useMemo4(() => {
+    const { variant } = parseEntryId(id);
+    return node && {
+      attendableId: id,
+      subject: node.data,
+      properties: node.properties,
+      popoverAnchorId: state.popoverAnchorId,
+      variant
+    };
+  }, [
+    id,
+    node,
+    node?.data,
+    node?.properties,
+    state.popoverAnchorId
+  ]);
+  const handleActiveIdChange = useCallback5((nextActiveId) => {
+    log.info("navigate", {
+      nextActiveId
+    }, {
+      F: __dxlog_file,
+      L: 48,
+      S: void 0,
+      C: (f, a) => f(...a)
+    });
+  }, []);
+  return /* @__PURE__ */ React8.createElement(Mosaic2.Root, null, /* @__PURE__ */ React8.createElement(NaturalMain.Root, {
+    complementarySidebarState: "closed",
+    navigationSidebarState: "closed"
+  }, /* @__PURE__ */ React8.createElement(NaturalMain.Content, {
+    bounce: true,
+    classNames: mx5("dx-mobile-main dx-mobile-main-scroll-area--flush", "grid bs-full overflow-hidden", showNavBar ? "grid-rows-[min-content_1fr_min-content]" : "grid-rows-[min-content_1fr]")
+  }, /* @__PURE__ */ React8.createElement(Banner, {
+    classNames: "border-be border-separator",
+    node
+  }), /* @__PURE__ */ React8.createElement("article", {
+    className: "contents"
+  }, /* @__PURE__ */ React8.createElement(Surface3, {
+    key: id,
+    role: "article",
+    data,
+    limit: 1,
+    fallback: ContentError,
+    placeholder
+  })), showNavBar && /* @__PURE__ */ React8.createElement(NavBar, {
+    classNames: "border-bs border-separator",
+    activeId: id,
+    onActiveIdChange: handleActiveIdChange
+  }))));
+};
+var parseEntryId = (entryId) => {
+  const [id, variant] = entryId.split(ATTENDABLE_PATH_SEPARATOR);
+  return {
+    id,
+    variant
+  };
+};
+Main.displayName = "SimpleLayout.Main";
+
+// src/components/SimpleLayout/SimpleLayout.tsx
+var SimpleLayout = () => {
+  return /* @__PURE__ */ React9.createElement(PopoverRoot, null, /* @__PURE__ */ React9.createElement(Main, null), /* @__PURE__ */ React9.createElement(Dialog, null), /* @__PURE__ */ React9.createElement(PopoverContent, null));
+};
+
+// src/components/Workspace/Workspace.tsx
+import React10, { useCallback as useCallback6, useEffect as useEffect4, useRef as useRef3 } from "react";
+import { Common as Common3 } from "@dxos/app-framework";
+import { useAppGraph as useAppGraph6, useOperationInvoker as useOperationInvoker3 } from "@dxos/app-framework/react";
+import { useConnections as useConnections3 } from "@dxos/plugin-graph";
+import { Avatar as Avatar2, Icon as Icon2, Toolbar as Toolbar4, toLocalizedString as toLocalizedString4, useTranslation as useTranslation6 } 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 } = useTranslation6(meta.id);
+  const { graph } = useAppGraph6();
+  useLoadDescendents(id);
+  const children = useConnections3(graph, id, "outbound");
+  const { results, handleSearch } = useSearchListResults2({
+    items: children,
+    extract: (child) => toLocalizedString4(child.properties.label, t)
+  });
+  return /* @__PURE__ */ React10.createElement(Layout2.Main, {
+    toolbar: true
+  }, /* @__PURE__ */ React10.createElement(SearchList2.Root, {
+    onSearch: handleSearch
+  }, /* @__PURE__ */ React10.createElement(Toolbar4.Root, null, /* @__PURE__ */ React10.createElement(SearchList2.Input, {
+    placeholder: t("search placeholder"),
+    autoFocus: true
+  })), /* @__PURE__ */ React10.createElement(SearchList2.Content, null, /* @__PURE__ */ React10.createElement(Mosaic3.Container, {
+    asChild: true
+  }, /* @__PURE__ */ React10.createElement(Mosaic3.Viewport, {
+    padding: true
+  }, /* @__PURE__ */ React10.createElement(Mosaic3.Stack, {
+    items: results,
+    getId: (child) => child.id,
+    Tile: WorkspaceChildTile
+  }))))));
+};
+var WorkspaceChildTile = ({ data }) => {
+  const { t } = useTranslation6(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 = useCallback6(() => invokeSync(Common3.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__ */ React10.createElement(Card3.Root, {
+    ref,
+    role: "button",
+    fullWidth: true,
+    tabIndex: -1,
+    "data-selected": isSelected,
+    classNames: mx6("dx-focus-ring", isSelected && "bg-hoverOverlay"),
+    onClick: handleSelect
+  }, /* @__PURE__ */ React10.createElement(Card3.Toolbar, {
+    density: "coarse"
+  }, /* @__PURE__ */ React10.createElement(Avatar2.Root, null, /* @__PURE__ */ React10.createElement(Avatar2.Content, {
+    hue: data.properties.hue,
+    icon: data.properties.icon,
+    hueVariant: "transparent",
+    variant: "square",
+    size: 12,
+    fallback: name
+  }), /* @__PURE__ */ React10.createElement(Avatar2.Label, null, name), /* @__PURE__ */ React10.createElement(Icon2, {
+    icon: "ph--caret-right--regular"
+  }))));
+};
+
+export {
+  Home,
+  SimpleLayout,
+  Workspace
+};
+//# sourceMappingURL=chunk-FK4M7GJV.mjs.map