@dxos/plugin-simple-layout 0.8.4-main.937b3ca → 0.8.4-main.9be5663bfe

package/src/types/events.ts

@@ -2,13 +2,14 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type ActivationEvent, Common } from '@dxos/app-framework';
+import { type ActivationEvent } from '@dxos/app-framework';
+import { AppActivationEvents } from '@dxos/app-toolkit';
 
 import { SimpleLayoutState } from './capabilities';
 
 export namespace SimpleLayoutEvents {
   /** Fired when SimpleLayoutState capability is ready. */
-  export const StateReady: ActivationEvent.ActivationEvent = Common.ActivationEvent.createStateEvent(
+  export const StateReady: ActivationEvent.ActivationEvent = AppActivationEvents.createStateEvent(
     SimpleLayoutState.identifier,
   );
 }

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

@@ -1,29 +0,0 @@
-// 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

@@ -1,7 +0,0 @@
-{
-  "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

@@ -1,613 +0,0 @@
-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