@dxos/plugin-navtree 0.10.0 → 0.11.1

package/src/components/Sidebar/L1Panel.tsx

@@ -6,11 +6,12 @@ import * as Option from 'effect/Option';
 import React, { memo, useCallback, useMemo } from 'react';
 
 import { Node } from '@dxos/app-graph';
-import { Paths } from '@dxos/app-toolkit';
+import { GraphPath } from '@dxos/app-toolkit';
 import { useAppGraph } from '@dxos/app-toolkit/ui';
-import { Graph, useActionRunner, useEdges } from '@dxos/plugin-graph';
+import { Graph } from '@dxos/plugin-graph';
+import { useActionRunner, useEdges } from '@dxos/plugin-graph/hooks';
 import { DensityProvider, IconButton, ScrollArea, toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { Tree } from '@dxos/react-ui-list';
+import { Empty, Tree } from '@dxos/react-ui-list';
 import { Menu, type MenuItem } from '@dxos/react-ui-menu';
 import { Tabs } from '@dxos/react-ui-tabs';
 import { hoverableControlItem, hoverableOpenControlItem } from '@dxos/ui-theme';
@@ -22,27 +23,38 @@ import { NAV_TREE_ITEM } from '../NavTree';
 import { useNavTreeContext } from '../NavTreeContext';
 import { NavTreeItemColumns } from '../NavTreeItem/NavTreeItemColumns';
 
+/**
+ * Delay before the unavailable-workspace message appears: a workspace whose space is still loading has
+ * no graph node yet and materializes into a real panel on its own, so it must not flash during that window.
+ */
+const RENDER_DELAY = '1s';
+
 export type L1PanelProps = {
   open?: boolean;
   path: string[];
-  item: Node.Node;
+  /** The tab's workspace id, which may name a workspace that has no graph node. */
+  id: string;
+  /** Absent when the workspace is not in the graph; the panel then renders the unavailable message. */
+  item?: Node.Node;
   isCurrent: boolean;
   onBack?: () => void;
 };
 
 /**
- * Space or settings panel.
+ * Space or settings panel. Without an `item` — a link to a workspace this identity never had or which no
+ * longer exists, or persisted deck state pointing at one after a profile switch — the panel body is the
+ * unavailable-workspace message, so the sidebar is never blank.
  */
-const L1Panel$ = ({ open, path, item, isCurrent, onBack }: L1PanelProps) => {
+const L1PanelInner = ({ open, path, id, item, isCurrent, onBack }: L1PanelProps) => {
   const { t } = useTranslation(meta.profile.key);
-  const title = toLocalizedString(item.properties.label, t);
-  const isActivated = useIsActivatedWorkspace(item);
+  const title = item ? toLocalizedString(item.properties.label, t) : t('workspace-unavailable.heading');
+  const isActivated = useIsActivatedWorkspace(id);
   const shouldRenderContent = isCurrent || isActivated;
 
   return (
     <Tabs.Panel
-      key={item.id}
-      value={item.id}
+      key={id}
+      value={id}
       classNames={[
         'absolute inset-y-0 end-0',
         'w-[calc(100%-var(--dx-l0-size))] lg:w-(--dx-l1-size) grid-cols-1 grid-rows-[var(--dx-rail-size)_1fr]',
@@ -51,18 +63,34 @@ const L1Panel$ = ({ open, path, item, isCurrent, onBack }: L1PanelProps) => {
       ]}
       tabIndex={-1}
       aria-label={title}
-      {...(isCurrent && { 'data-testid': 'navtree.workspace.visible' })}
+      // An unavailable workspace has no tab in the rail, so the generated `aria-labelledby` would
+      // reference a missing element.
+      {...(!item && { 'aria-labelledby': undefined })}
+      {...(isCurrent && {
+        'data-testid': item ? 'navtree.workspace.visible' : 'navtree.workspace.unavailable',
+      })}
       {...(!open && { inert: true })}
     >
-      {shouldRenderContent && <L1PanelContent open={open} path={path} item={item} onBack={onBack} />}
+      {shouldRenderContent &&
+        (item ? (
+          <L1PanelContent open={open} path={path} item={item} onBack={onBack} />
+        ) : (
+          <Empty
+            label={t('workspace-unavailable.description')}
+            // Second grid row, so the message clears the rail exactly as the tree does, and hugging its
+            // top rather than stretching to the row's full height.
+            classNames='row-start-2 self-start animate-fade-in'
+            style={{ animationDelay: RENDER_DELAY, animationFillMode: 'backwards' }}
+          />
+        ))}
     </Tabs.Panel>
   );
 };
 
 /** Determines whether a workspace tab has been populated with real child content (i.e. expanded at least once). */
-const useIsActivatedWorkspace = (item: Node.Node): boolean => {
+const useIsActivatedWorkspace = (id: string): boolean => {
   const { graph } = useAppGraph();
-  const edges = useEdges(graph, item.id);
+  const edges = useEdges(graph, id);
 
   return useMemo(() => {
     const childIds = edges[Graph.relationKey('child')] ?? [];
@@ -79,13 +107,17 @@ const useIsActivatedWorkspace = (item: Node.Node): boolean => {
 /**
  * Mounted panel content for active or previously-visited tabs.
  */
-const L1PanelContent = ({ path, item, onBack }: Pick<L1PanelProps, 'open' | 'path' | 'item' | 'onBack'>) => {
+const L1PanelContent = ({
+  path,
+  item,
+  onBack,
+}: Pick<L1PanelProps, 'open' | 'path' | 'onBack'> & { item: Node.Node }) => {
   const navTreeContext = useNavTreeContext();
 
   return (
     <DensityProvider density='md'>
       <L1PanelHeader path={path} item={item} onBack={onBack} />
-      <ScrollArea.Root thin orientation='vertical'>
+      <ScrollArea.Root centered thin orientation='vertical'>
         <ScrollArea.Viewport>
           <Tree
             classNames='pt-[2px]'
@@ -113,11 +145,11 @@ const L1PanelContent = ({ path, item, onBack }: Pick<L1PanelProps, 'open' | 'pat
 /**
  * Header row.
  */
-const L1PanelHeader = ({ item, path, onBack }: Pick<L1PanelProps, 'item' | 'path' | 'onBack'>) => {
+const L1PanelHeader = ({ item, path, onBack }: Pick<L1PanelProps, 'path' | 'onBack'> & { item: Node.Node }) => {
   const { t } = useTranslation(meta.profile.key);
   const { renderItemEnd: ItemEnd } = useNavTreeContext();
   const title = toLocalizedString(item.properties.label, t);
-  const backCapableWorkspace = Paths.isPinnedWorkspace(item.id);
+  const backCapableWorkspace = GraphPath.isPinnedWorkspace(item.id);
 
   const { menuActions, onAction } = useL1MenuActions({ item, path });
   useLoadDescendents(item);
@@ -211,7 +243,7 @@ const MenuActions = ({
 /**
  * Builds the menu actions for the L1 panel header.
  */
-const useL1MenuActions = ({ item, path }: Pick<L1PanelProps, 'item' | 'path'>): L1MenuActions => {
+const useL1MenuActions = ({ item, path }: Pick<L1PanelProps, 'path'> & { item: Node.Node }): L1MenuActions => {
   const runAction = useActionRunner();
 
   const menuActions = getListActions(useActions(item));
@@ -226,4 +258,4 @@ const useL1MenuActions = ({ item, path }: Pick<L1PanelProps, 'item' | 'path'>):
   return { menuActions, onAction };
 };
 
-export const L1Panel = memo(L1Panel$);
+export const L1Panel = memo(L1PanelInner);

package/src/components/Sidebar/L1Tabs.tsx

@@ -19,6 +19,10 @@ export type L1TabsProps = Pick<L1PanelProps, 'open' | 'onBack'> & {
  * Each workspace is an L1 tab.
  */
 export const L1Tabs = ({ topLevelItems, currentItemId, onBack, open, path }: L1TabsProps) => {
+  // The current tab can name a workspace that is not in the graph, in which case it gets an item-less
+  // panel carrying the unavailable message rather than no panel at all (a blank sidebar).
+  const hasCurrentPanel = topLevelItems.some((item) => item.id === currentItemId && l0ItemType(item) === 'tab');
+
   return (
     <>
       {topLevelItems.map((item) => {
@@ -27,6 +31,7 @@ export const L1Tabs = ({ topLevelItems, currentItemId, onBack, open, path }: L1T
           return (
             <L1Panel
               key={item.id}
+              id={item.id}
               item={item}
               path={path}
               open={open}
@@ -37,6 +42,7 @@ export const L1Tabs = ({ topLevelItems, currentItemId, onBack, open, path }: L1T
         }
         return null;
       })}
+      {!hasCurrentPanel && <L1Panel key={currentItemId} id={currentItemId} path={path} open={open} isCurrent />}
     </>
   );
 };

package/src/containers/CommandsDialogContent/CommandsDialogContent.tsx

@@ -8,8 +8,9 @@ import { useOperationInvoker } from '@dxos/app-framework/ui';
 import { LayoutOperation } from '@dxos/app-toolkit';
 import { useAppGraph } from '@dxos/app-toolkit/ui';
 import { Keyboard, keySymbols } from '@dxos/keyboard';
-import { Graph, Node, useActionRunner } from '@dxos/plugin-graph';
-import { useActions } from '@dxos/plugin-graph';
+import { Graph, Node } from '@dxos/plugin-graph';
+import { useActions } from '@dxos/plugin-graph/hooks';
+import { useActionRunner } from '@dxos/plugin-graph/hooks';
 import { Button, Dialog, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { SearchList, useSearchListResults } from '@dxos/react-ui-search';
 import { osTranslations } from '@dxos/ui-theme';
@@ -71,51 +72,53 @@ export const CommandsDialogContent = forwardRef<HTMLDivElement, CommandsDialogCo
     return (
       <Dialog.Content ref={forwardedRef}>
         <Dialog.Title srOnly>{t('commands-dialog.title', { ns: meta.profile.key })}</Dialog.Title>
-        <SearchList.Root onSearch={handleSearch}>
-          <SearchList.Input placeholder={t('command-list-input.placeholder')} />
-          <SearchList.Viewport>
-            {results.map((action) => {
-              const shortcut =
-                typeof action.properties.keyBinding === 'string'
-                  ? action.properties.keyBinding
-                  : action.properties.keyBinding?.[getHostPlatform()];
+        <Dialog.Body>
+          <SearchList.Root onSearch={handleSearch}>
+            <SearchList.Input placeholder={t('command-list-input.placeholder')} />
+            <SearchList.Viewport>
+              {results.map((action) => {
+                const shortcut =
+                  typeof action.properties.keyBinding === 'string'
+                    ? action.properties.keyBinding
+                    : action.properties.keyBinding?.[getHostPlatform()];
 
-              return (
-                <SearchList.Item
-                  value={action.id}
-                  key={action.id}
-                  label={toLocalizedString(action.properties.label, t)}
-                  icon={action.properties.icon}
-                  suffix={shortcut ? keySymbols(shortcut).join('') : undefined}
-                  onSelect={() => {
-                    if (action.properties.disabled) {
-                      return;
-                    }
-
-                    if (Node.isActionGroup(action)) {
-                      setSelected(action.id);
-                      return;
-                    }
+                return (
+                  <SearchList.Item
+                    value={action.id}
+                    key={action.id}
+                    label={toLocalizedString(action.properties.label, t)}
+                    icon={action.properties.icon}
+                    suffix={shortcut ? keySymbols(shortcut).join('') : undefined}
+                    onSelect={() => {
+                      if (action.properties.disabled) {
+                        return;
+                      }
 
-                    void invokePromise(LayoutOperation.UpdateDialog, { state: false });
-                    setTimeout(() => {
-                      const lookupId = group?.id ?? action.id;
-                      const node = Graph.getConnections(graph, lookupId, Node.actionRelation('inbound'))[0];
-                      if (node && Node.isAction(action)) {
-                        void runAction(action, { parent: node, caller: KEY_BINDING });
+                      if (Node.isActionGroup(action)) {
+                        setSelected(action.id);
+                        return;
                       }
-                    });
-                  }}
-                  classNames='flex items-center gap-2'
-                  disabled={action.properties.disabled}
-                  {...(action.properties?.testId && {
-                    'data-testid': action.properties.testId,
-                  })}
-                />
-              );
-            })}
-          </SearchList.Viewport>
-        </SearchList.Root>
+
+                      void invokePromise(LayoutOperation.UpdateDialog, { state: false });
+                      setTimeout(() => {
+                        const lookupId = group?.id ?? action.id;
+                        const node = Graph.getConnections(graph, lookupId, Node.actionRelation('inbound'))[0];
+                        if (node && Node.isAction(action)) {
+                          void runAction(action, { parent: node, caller: KEY_BINDING });
+                        }
+                      });
+                    }}
+                    classNames='flex items-center gap-2'
+                    disabled={action.properties.disabled}
+                    {...(action.properties?.testId && {
+                      'data-testid': action.properties.testId,
+                    })}
+                  />
+                );
+              })}
+            </SearchList.Viewport>
+          </SearchList.Root>
+        </Dialog.Body>
         <Dialog.ActionBar>
           <Dialog.Close asChild>
             <Button classNames='w-full'>{t('close.label', { ns: osTranslations })}</Button>
@@ -125,3 +128,5 @@ export const CommandsDialogContent = forwardRef<HTMLDivElement, CommandsDialogCo
     );
   },
 );
+
+CommandsDialogContent.displayName = 'CommandsDialogContent';

package/src/containers/CommandsTrigger/CommandsTrigger.tsx

@@ -26,3 +26,5 @@ export const CommandsTrigger = () => {
     </Button>
   );
 };
+
+CommandsTrigger.displayName = 'CommandsTrigger';

package/src/containers/NavTreeContainer/NavTreeContainer.tsx

@@ -10,7 +10,8 @@ import React, { forwardRef, memo, useCallback, useEffect, useMemo, useRef } from
 import { Surface, useOperationInvoker } from '@dxos/app-framework/ui';
 import { LayoutOperation } from '@dxos/app-toolkit';
 import { AppSurface, useAppGraph, useLayout } from '@dxos/app-toolkit/ui';
-import { Graph, Node, useActionRunner } from '@dxos/plugin-graph';
+import { Graph, Node } from '@dxos/plugin-graph';
+import { useActionRunner } from '@dxos/plugin-graph/hooks';
 import { useMediaQuery, useSidebars } from '@dxos/react-ui';
 import { type TreeData, isTreeData } from '@dxos/react-ui-list';
 import { arrayMove } from '@dxos/util';
@@ -102,15 +103,11 @@ export const NavTreeContainer$ = forwardRef<HTMLDivElement, NavTreeContainerProp
         if (activeItems.length === 0) {
           const [item] = getItems(graph, node).filter((node) => !Node.isActionLike(node));
           if (item && item.data) {
-            if (layout.mode === 'multi') {
-              void invokePromise(LayoutOperation.Set, { subject: [item.id] });
-            } else {
-              void invokePromise(LayoutOperation.Open, { subject: [item.id] });
-            }
+            void invokePromise(LayoutOperation.Open, { subject: [item.id] });
           }
         }
       },
-      [invokePromise, graph, layout.mode],
+      [invokePromise, graph],
     );
 
     const blockInstruction = useCallback(
@@ -129,7 +126,7 @@ export const NavTreeContainer$ = forwardRef<HTMLDivElement, NavTreeContainerProp
     }, []);
 
     const handleSelect = useCallback(
-      ({ item: node, path, option }: { item: Node.Node; path: string[]; option: boolean }) => {
+      ({ item: node, path, option, shift }: { item: Node.Node; path: string[]; option: boolean; shift: boolean }) => {
         if (!node.data) {
           return;
         }
@@ -144,20 +141,20 @@ export const NavTreeContainer$ = forwardRef<HTMLDivElement, NavTreeContainerProp
 
         const current = getItem(path).current;
         if (!current) {
-          if (layout.mode === 'multi') {
-            void invokePromise(LayoutOperation.Set, { subject: [node.id] });
-          } else {
-            void invokePromise(LayoutOperation.Open, { subject: [node.id], key: node.properties.key });
-          }
+          // Plain click navigates (the deck becomes this item); shift forces a new plank (see the Open
+          // handler, which upgrades any disposition to add when shift is held).
+          void invokePromise(LayoutOperation.Open, {
+            subject: [node.id],
+            disposition: 'solo',
+            modifiers: { shift },
+          });
         } else if (option) {
           void invokePromise(LayoutOperation.Close, { subject: [node.id] });
         } else {
           void invokePromise(LayoutOperation.ScrollIntoView, { subject: node.id });
         }
 
-        const defaultAction = Graph.getActions(graph, node.id).find(
-          (action) => action.properties?.disposition === 'default',
-        );
+        const defaultAction = Graph.getActions(graph, node.id).find((action) => Node.hasDisposition(action, 'default'));
         if (Node.isAction(defaultAction)) {
           void runAction(defaultAction);
         }
@@ -166,7 +163,7 @@ export const NavTreeContainer$ = forwardRef<HTMLDivElement, NavTreeContainerProp
           void invokePromise(LayoutOperation.UpdateSidebar, { state: 'closed' });
         }
       },
-      [graph, invokePromise, getItem, runAction, isLg, layout.mode],
+      [graph, invokePromise, getItem, runAction, isLg],
     );
 
     const handleBack = useCallback(() => void invokePromise(LayoutOperation.RevertWorkspace), [invokePromise]);
@@ -237,7 +234,7 @@ export const NavTreeContainer$ = forwardRef<HTMLDivElement, NavTreeContainerProp
     const workspaceChildren = useAtomValue(graph.connections(tab, 'child'));
     useEffect(() => {
       for (const child of workspaceChildren) {
-        if (child.properties.disposition === 'group') {
+        if (Node.hasDisposition(child, 'group')) {
           setItem([Node.RootId, tab, child.id], 'open', true);
           Graph.expand(graph, child.id, 'child');
         }
@@ -283,3 +280,5 @@ export const NavTreeContainer$ = forwardRef<HTMLDivElement, NavTreeContainerProp
 );
 
 export const NavTreeContainer = memo(NavTreeContainer$);
+
+NavTreeContainer.displayName = 'NavTreeContainer';

package/src/containers/NavTreeDocumentTitle/NavTreeDocumentTitle.tsx

@@ -16,3 +16,5 @@ export const NavTreeDocumentTitle = ({ node }: { node?: Node.Node }) => {
   }, [node?.properties?.label]);
   return null;
 };
+
+NavTreeDocumentTitle.displayName = 'NavTreeDocumentTitle';

package/src/experimental/Tree.stories.tsx

@@ -10,7 +10,8 @@ import { Icon, IconButton, Panel, ScrollArea } from '@dxos/react-ui';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { mx } from '@dxos/ui-theme';
 
-import { type ItemMap, Tree, type TreeNodeData, type TreeProps, visitNodes, visitor } from './Tree';
+import { type ItemMap, Tree, type TreeNodeData, type TreeProps, visitor } from './Tree';
+import { visitNodes } from './visit-nodes';
 
 random.seed(1234);
 

package/src/experimental/Tree.tsx

@@ -7,6 +7,8 @@ import React, { type HTMLAttributes, type PropsWithChildren } from 'react';
 import { type ClassNameValue, Icon, type Size } from '@dxos/react-ui';
 import { mx } from '@dxos/ui-theme';
 
+import { visitNodes } from './visit-nodes';
+
 export const IconButton = ({
   iconName,
   classNames,
@@ -56,24 +58,6 @@ export function* visitor(node: TreeNodeData, open: ItemMap): Generator<TreeItera
   }
 }
 
-export const visitNodes = <T,>(
-  node: TreeNodeData,
-  callback: (node: TreeNodeData, depth: number) => T,
-  depth = 0,
-): T | undefined => {
-  const result = callback(node, depth);
-  if (result) {
-    return result;
-  }
-
-  for (const child of node.children ?? []) {
-    const result = visitNodes(child, callback, depth + 1);
-    if (result) {
-      return result;
-    }
-  }
-};
-
 export type ItemMap<T = boolean> = Record<TreeNodeData['id'], T>;
 
 export type TreeNodeProps = {

package/src/experimental/visit-nodes.ts

@@ -0,0 +1,27 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type TreeNodeData } from './Tree';
+
+// Kept out of `Tree.tsx`: react-refresh only fast-refreshes a module whose
+// exports are all components, so values exported beside them force a full page reload on
+// every edit.
+
+export const visitNodes = <T>(
+  node: TreeNodeData,
+  callback: (node: TreeNodeData, depth: number) => T,
+  depth = 0,
+): T | undefined => {
+  const result = callback(node, depth);
+  if (result) {
+    return result;
+  }
+
+  for (const child of node.children ?? []) {
+    const result = visitNodes(child, callback, depth + 1);
+    if (result) {
+      return result;
+    }
+  }
+};

package/src/hooks/useActions.ts

@@ -5,19 +5,30 @@
 import { useMemo } from 'react';
 
 import { useAppGraph } from '@dxos/app-toolkit/ui';
-import { Graph, Node, useActions as useGraphActions } from '@dxos/plugin-graph';
+import { Graph, Node } from '@dxos/plugin-graph';
+import { useActions as useGraphActions } from '@dxos/plugin-graph/hooks';
+import { applyPresentation } from '@dxos/react-ui-menu';
 
 import { type FlattenedActions } from '#types';
 
+/** Dispositions rendered as navtree item (row/header) actions, most-primary first. */
+const LIST_ITEM_DISPOSITIONS = ['list-item-primary', 'list-item'];
+
 /**
  * Flattens grouped actions and filters to the list-item dispositions rendered as
  * navtree item actions. Shared by row (`NavTreeItemColumns`) and header (`L1Panel`)
- * so both apply the same normalization rule.
+ * so both apply the same normalization rule. Applies each action's `presentation['list-item'
+ * | 'list-item-primary']` chrome override, if any, so an action multi-targeting the toolbar
+ * and the nav-tree can render appropriately in each.
  */
 export const getListActions = ({ actions, groupedActions }: FlattenedActions): Node.Action[] =>
   actions
     .flatMap((action) => (Node.isAction(action) ? [action] : (groupedActions[action.id] ?? [])))
-    .filter((action) => ['list-item', 'list-item-primary'].includes(action.properties?.disposition));
+    .filter((action) => Node.hasDisposition(action, LIST_ITEM_DISPOSITIONS))
+    .map((action) => {
+      const surface = LIST_ITEM_DISPOSITIONS.find((disposition) => Node.hasDisposition(action, disposition));
+      return surface ? applyPresentation(action, surface) : action;
+    });
 
 /** Returns flattened actions and grouped sub-actions for a given graph node. */
 export const useActions = (node: Node.Node): FlattenedActions => {
@@ -27,7 +38,7 @@ export const useActions = (node: Node.Node): FlattenedActions => {
   return useMemo(() => {
     return actions.reduce(
       (acc: FlattenedActions, arg) => {
-        if (arg.properties.disposition === 'item') {
+        if (Node.hasDisposition(arg, 'item')) {
           return acc;
         }
 

package/src/hooks/useNavTreeModel.ts

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Atom } from '@effect-atom/atom-react';
+import { Atom } from '@effect-atom/atom';
 import * as Option from 'effect/Option';
 import { useMemo } from 'react';
 

package/src/operations/expose.ts

@@ -10,7 +10,7 @@ import { AppCapabilities, LayoutOperation } from '@dxos/app-toolkit';
 import { Operation } from '@dxos/compute';
 import { log } from '@dxos/log';
 import { Graph } from '@dxos/plugin-graph';
-import { expandAttendableId } from '@dxos/react-ui-attention';
+import { Attention } from '@dxos/react-ui-attention';
 
 import { NavTreeCapabilities } from '../types';
 
@@ -20,7 +20,7 @@ const handler: Operation.WithHandler<typeof LayoutOperation.Expose> = LayoutOper
       const { graph } = yield* Capability.get(AppCapabilities.AppGraph);
       const { getItem, setItem } = yield* Capability.get(NavTreeCapabilities.State);
 
-      const prefixes = expandAttendableId(subject);
+      const prefixes = Attention.expandAttendableId(subject);
 
       for (const qualifiedId of prefixes) {
         Graph.expand(graph, qualifiedId, 'child');

package/src/testing/app-graph-builder.ts

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Atom } from '@effect-atom/atom-react';
+import { Atom } from '@effect-atom/atom';
 import * as Effect from 'effect/Effect';
 
 import { type BuilderExtensions } from '@dxos/app-graph';

package/src/translations.ts

@@ -17,6 +17,9 @@ export const translations = [
         'node-actions-menu-invoker.label': 'More options',
         'tree-item-actions.label': 'More actions',
         'button-back.button': 'Back to Space',
+        'workspace-unavailable.heading': 'Workspace unavailable',
+        'workspace-unavailable.description':
+          'You don’t have this workspace, or it no longer exists. Select one of your workspaces to continue.',
       },
     },
   },

package/src/types/NavTreeCapabilities.ts

@@ -4,7 +4,7 @@
 
 // @import-as-namespace
 
-import { type Atom } from '@effect-atom/atom-react';
+import { type Atom } from '@effect-atom/atom';
 
 import { Capability } from '@dxos/app-framework';
 

package/src/types/schema.ts

@@ -50,7 +50,7 @@ export type NodeProperties = SharedProperties & {
 };
 
 export type ActionProperties = SharedProperties & {
-  disposition?: string;
+  disposition?: string | string[];
   hidden?: boolean;
   caller?: string;
   menuType?: 'dropdown';

package/src/util.ts

@@ -64,15 +64,13 @@ export const resolveMigrationOperation = (
 // TODO(wittjosiah): Move into node implementation?
 export const sortActions = (actions: Node.Action[]): Node.Action[] =>
   actions.sort((a, b) => {
-    if (a.properties.disposition === b.properties.disposition) {
+    const aPrimary = Node.hasDisposition(a, 'list-item-primary');
+    const bPrimary = Node.hasDisposition(b, 'list-item-primary');
+    if (aPrimary === bPrimary) {
       return 0;
     }
 
-    if (a.properties.disposition === 'list-item-primary') {
-      return -1;
-    }
-
-    return 1;
+    return aPrimary ? -1 : 1;
   });
 
 export const getChildren = (
@@ -93,13 +91,13 @@ export const getChildren = (
  * Determines whether a node should be visible based on its disposition.
  */
 export const filterItems = (node: Node.Node, disposition?: string) => {
-  if (!disposition && node.properties.disposition === 'hidden') {
+  if (!disposition && Node.hasDisposition(node, 'hidden')) {
     return false;
   } else if (!disposition) {
     const action = Node.isAction(node);
-    return !action || node.properties.disposition === 'item';
+    return !action || Node.hasDisposition(node, 'item');
   } else {
-    return node.properties.disposition === disposition;
+    return Node.hasDisposition(node, disposition);
   }
 };