@dxos/plugin-navtree 0.8.4-main.72ec0f3 → 0.8.4-main.8360d9e660

package/src/containers/CommandsDialogContent/CommandsDialogContent.tsx

@@ -0,0 +1,135 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { forwardRef, useMemo, useState } from 'react';
+
+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 { Button, Dialog, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { SearchList, useSearchListResults } from '@dxos/react-ui-searchlist';
+import { osTranslations } from '@dxos/ui-theme';
+import { getHostPlatform } from '@dxos/util';
+
+import { KEY_BINDING, meta } from '../../meta';
+
+export type CommandsDialogContentProps = {
+  selected?: string;
+};
+
+// TODO(wittjosiah): This probably deserves its own plugin but for now it lives here w/ other navigation UI.
+export const CommandsDialogContent = forwardRef<HTMLDivElement, CommandsDialogContentProps>(
+  ({ selected: initial }, forwardedRef) => {
+    const { t } = useTranslation(meta.id);
+    const { invokeSync } = useOperationInvoker();
+    const runAction = useActionRunner();
+    const { graph } = useAppGraph();
+    const [selected, setSelected] = useState<string | undefined>(initial);
+
+    // Traverse graph.
+    // TODO(burdon): Factor out commonality with shortcut dialog.
+    const allActions = useMemo(() => {
+      // TODO(burdon): Get from navtree (not keyboard).
+      const current = Keyboard.singleton.getCurrentContext();
+      const actionMap = new Set<string>();
+      const actions: Node.ActionLike[] = [];
+      Graph.traverse(graph, {
+        relation: ['child', 'action'],
+        visitor: (node, path) => {
+          if (
+            (Node.isAction(node) || Node.isActionGroup(node)) &&
+            !actionMap.has(node.id) &&
+            current.startsWith(path.slice(0, -1).join('/'))
+          ) {
+            actionMap.add(node.id);
+            actions.push(node);
+          }
+        },
+      });
+
+      actions.sort((a, b) => {
+        return toLocalizedString(a.properties.label, t)
+          ?.toLowerCase()
+          .localeCompare(toLocalizedString(b.properties.label, t)?.toLowerCase());
+      });
+
+      return actions;
+    }, [graph]);
+
+    const group = allActions.find(({ id }) => id === selected);
+    const groupActions = useActions(graph, group?.id);
+    const actions = Node.isActionGroup(group) ? groupActions : allActions;
+
+    const { results, handleSearch } = useSearchListResults({
+      items: actions,
+      extract: (action) => toLocalizedString(action.properties.label, t),
+    });
+
+    return (
+      <Dialog.Content ref={forwardedRef}>
+        <Dialog.Title srOnly>{t('commands dialog title', { ns: meta.id })}</Dialog.Title>
+        <Dialog.Body>
+          <SearchList.Root onSearch={handleSearch}>
+            <SearchList.Content>
+              <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;
+                        }
+
+                        invokeSync(LayoutOperation.UpdateDialog, { state: false });
+                        setTimeout(() => {
+                          const node = Graph.getConnections(
+                            graph,
+                            group?.id ?? action.id,
+                            Node.childRelation('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.Content>
+          </SearchList.Root>
+        </Dialog.Body>
+        <Dialog.ActionBar>
+          <Dialog.Close asChild>
+            <Button classNames='w-full'>{t('close label', { ns: osTranslations })}</Button>
+          </Dialog.Close>
+        </Dialog.ActionBar>
+      </Dialog.Content>
+    );
+  },
+);

package/src/containers/CommandsDialogContent/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { CommandsDialogContent } from './CommandsDialogContent';
+
+export default CommandsDialogContent;

package/src/{components/CommandsDialog → containers/CommandsTrigger}/CommandsTrigger.tsx

@@ -4,30 +4,20 @@
 
 import React from 'react';
 
-import { LayoutAction, createIntent } from '@dxos/app-framework';
-import { useIntentDispatcher } from '@dxos/app-framework/react';
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
 import { Button, Icon, useTranslation } from '@dxos/react-ui';
 
 import { COMMANDS_DIALOG, meta } from '../../meta';
 
 // TODO(thure): Refactor to be handled by a more appropriate plugin.
 export const CommandsTrigger = () => {
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const { invokeSync } = useOperationInvoker();
   const { t } = useTranslation(meta.id);
   return (
     <Button
-      classNames='m-1 pli-1 lg:pli-2'
-      onClick={() =>
-        dispatch(
-          createIntent(LayoutAction.UpdateDialog, {
-            part: 'dialog',
-            subject: COMMANDS_DIALOG,
-            options: {
-              blockAlign: 'start',
-            },
-          }),
-        )
-      }
+      classNames='m-1 px-1 lg:px-2'
+      onClick={() => invokeSync(LayoutOperation.UpdateDialog, { subject: COMMANDS_DIALOG, blockAlign: 'start' })}
     >
       <span className='text-description font-normal grow text-start'>{t('command list input placeholder')}</span>
       <Icon icon='ph--magnifying-glass--regular' size={5} />

package/src/containers/CommandsTrigger/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { CommandsTrigger } from './CommandsTrigger';
+
+export default CommandsTrigger;

package/src/containers/NavTreeContainer/NavTreeContainer.tsx

@@ -0,0 +1,271 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { type Instruction, extractInstruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
+import React, { forwardRef, memo, useCallback, useEffect, useMemo, useRef } from 'react';
+
+import { Surface, useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { useAppGraph, useLayout } from '@dxos/app-toolkit/ui';
+import { Graph, Node, useActionRunner } from '@dxos/plugin-graph';
+import { useMediaQuery, useSidebars } from '@dxos/react-ui';
+import { type TreeData, isTreeData } from '@dxos/react-ui-list';
+import { arrayMove } from '@dxos/util';
+
+import { NAV_TREE_ITEM, NavTree, NavTreeContext } from '../../components';
+import { useNavTreeModel, useNavTreeState } from '../../hooks';
+import { meta } from '../../meta';
+import { type NavTreeItemGraphNode } from '../../types';
+import { filterItems, getParent, resolveMigrationOperation } from '../../util';
+
+// TODO(thure): Is NavTree truly authoritative in this regard?
+export const NODE_TYPE = 'dxos/app-graph/node';
+
+// TODO(wittjosiah): Avoid using Surface within the navtree, prefer declarative data flow.
+const NavTreeItemEnd = ({ node, open }: { node: Node.Node; open: boolean }) => {
+  const data = useMemo(() => ({ id: node.id, subject: node.data, open }), [node.id, node.data, open]);
+  return <Surface.Surface role='navtree-item-end' data={data} limit={1} />;
+};
+
+const getItems = (graph: Graph.ReadableGraph, node?: Node.Node, disposition?: string) => {
+  return Graph.getConnections(graph, node?.id ?? Node.RootId, 'child').filter((node) => filterItems(node, disposition));
+};
+
+export type NavTreeContainerProps = {
+  popoverAnchorId?: string;
+  tab: string;
+};
+
+export const NavTreeContainer$ = forwardRef<HTMLDivElement, NavTreeContainerProps>(
+  ({ tab, popoverAnchorId }, forwardedRef) => {
+    const [isLg] = useMediaQuery('lg');
+    const { invokeSync, invokePromise } = useOperationInvoker();
+    const runAction = useActionRunner();
+    const { graph } = useAppGraph();
+    const { getItem, setItem } = useNavTreeState();
+    const layout = useLayout();
+    const model = useNavTreeModel(Node.RootId);
+    const { navigationSidebarState } = useSidebars(meta.id);
+    const latestRef = useRef({
+      tab,
+      activeItems: layout.active,
+      navigationSidebarState,
+      isLg,
+    });
+
+    useEffect(() => {
+      latestRef.current = {
+        tab,
+        activeItems: layout.active,
+        navigationSidebarState,
+        isLg,
+      };
+    }, [tab, layout.active, navigationSidebarState, isLg]);
+
+    const handleOpenChange = useCallback(
+      ({ item: { id }, path, open }: { item: Node.Node; path: string[]; open: boolean }) => {
+        // TODO(thure): This might become a localstorage leak; openItemIds that no longer exist should be removed from this map.
+        setItem(path, 'open', open);
+        Graph.expand(graph, id, 'child');
+      },
+      [graph, setItem],
+    );
+
+    const handleTabChange = useCallback(
+      (node: NavTreeItemGraphNode) => {
+        Graph.expand(graph, node.id, 'child');
+
+        const {
+          tab: activeTab,
+          activeItems,
+          navigationSidebarState: currentSidebarState,
+          isLg: latestIsLg,
+        } = latestRef.current;
+        invokeSync(LayoutOperation.UpdateSidebar, {
+          state:
+            node.id === activeTab
+              ? currentSidebarState === 'expanded'
+                ? latestIsLg
+                  ? 'collapsed'
+                  : 'closed'
+                : 'expanded'
+              : 'expanded',
+        });
+
+        invokeSync(LayoutOperation.SwitchWorkspace, { subject: node.id });
+
+        // Open the first item if the workspace is empty.
+        if (activeItems.length === 0) {
+          const [item] = getItems(graph, node).filter((node) => !Node.isActionLike(node));
+          if (item && item.data) {
+            invokeSync(LayoutOperation.Open, { subject: [item.id] });
+          }
+        }
+      },
+      [invokeSync, graph],
+    );
+
+    const blockInstruction = useCallback(
+      ({ instruction, source, target }: { instruction: Instruction; source: TreeData; target: TreeData }) => {
+        return target.item.properties.blockInstruction?.(source, instruction) ?? false;
+      },
+      [],
+    );
+
+    const canDrop = useCallback(({ source, target }: { source: TreeData; target: TreeData }) => {
+      return target.item.properties.canDrop?.(source) ?? false;
+    }, []);
+
+    const canSelect = useCallback(({ item }: { item: Node.Node }) => {
+      return item.properties.selectable ?? true;
+    }, []);
+
+    const handleSelect = useCallback(
+      ({ item: node, path, option }: { item: Node.Node; path: string[]; option: boolean }) => {
+        if (!node.data) {
+          return;
+        }
+
+        if (Node.isAction(node)) {
+          const [parent] = Graph.getConnections(graph, node.id, Node.childRelation('inbound'));
+          if (parent) {
+            void runAction(node, { parent, path, caller: NAV_TREE_ITEM });
+          }
+          return;
+        }
+
+        const current = getItem(path).current;
+        if (!current) {
+          invokeSync(LayoutOperation.Open, { subject: [node.id], key: node.properties.key });
+        } else if (option) {
+          invokeSync(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',
+        );
+        if (Node.isAction(defaultAction)) {
+          void runAction(defaultAction);
+        }
+
+        if (!isLg) {
+          invokeSync(LayoutOperation.UpdateSidebar, { state: 'closed' });
+        }
+      },
+      [graph, invokeSync, invokePromise, getItem, runAction, isLg],
+    );
+
+    const handleBack = useCallback(() => invokeSync(LayoutOperation.RevertWorkspace), [invokeSync]);
+
+    // TODO(wittjosiah): Factor out hook.
+    useEffect(() => {
+      return monitorForElements({
+        canMonitor: ({ source }) => isTreeData(source.data),
+        onDrop: ({ location, source }) => {
+          // Didn't drop on anything.
+          if (!location.current.dropTargets.length) {
+            return;
+          }
+          const target = location.current.dropTargets[0];
+          const instruction: Instruction | null = extractInstruction(target.data);
+          if (instruction !== null && instruction.type !== 'instruction-blocked') {
+            const sourceNode = source.data.item as NavTreeItemGraphNode;
+            const targetNode = target.data.item as NavTreeItemGraphNode;
+            const sourcePath = source.data.path as string[];
+            const targetPath = target.data.path as string[];
+            const sameParent = sourcePath.slice(0, -1).join() === targetPath.slice(0, -1).join();
+            const operation =
+              sameParent && instruction.type !== 'make-child'
+                ? 'rearrange'
+                : resolveMigrationOperation(graph, sourceNode, targetPath, targetNode);
+            const sourceParent = getParent(graph, sourceNode, sourcePath);
+            const targetParent = getParent(graph, targetNode, targetPath);
+            const sourceItems = getItems(graph, sourceParent);
+            const targetItems = getItems(graph, targetParent);
+            const sourceIndex = sourceItems.findIndex(({ id }) => id === sourceNode.id);
+            const targetIndex = targetItems.findIndex(({ id }) => id === targetNode.id);
+            const migrationIndex =
+              instruction.type === 'make-child'
+                ? undefined
+                : instruction.type === 'reorder-below'
+                  ? targetIndex + 1
+                  : targetIndex;
+            switch (operation) {
+              case 'rearrange': {
+                const nextItems = sourceItems.map(({ data }) => data);
+                arrayMove(nextItems, sourceIndex, targetIndex);
+                void sourceNode.properties.onRearrange?.(nextItems);
+                break;
+              }
+              case 'copy': {
+                const target = instruction.type === 'make-child' ? targetNode : targetParent;
+                void target?.properties.onCopy?.(sourceNode, migrationIndex);
+                break;
+              }
+              case 'transfer': {
+                const target = instruction.type === 'make-child' ? targetNode : targetParent;
+                if (!target?.properties.onTransferStart || target?.id === sourceParent?.id) {
+                  break;
+                }
+                void target?.properties.onTransferStart(sourceNode, migrationIndex);
+                void sourceParent?.properties.onTransferEnd?.(sourceNode, target);
+                break;
+              }
+            }
+          }
+        },
+      });
+    }, [graph]);
+
+    const setAlternateTree = useCallback(
+      (path: string[], open: boolean) => {
+        setItem(path, 'alternateTree', open);
+      },
+      [setItem],
+    );
+
+    const onItemHover = useCallback(({ item }: { item: Node.Node }) => Graph.expand(graph, item.id, 'child'), [graph]);
+
+    const navTreeContextValue = useMemo(
+      () => ({
+        model,
+        popoverAnchorId,
+        renderItemEnd: NavTreeItemEnd,
+        blockInstruction,
+        canDrop,
+        canSelect,
+        setAlternateTree,
+        onBack: handleBack,
+        onOpenChange: handleOpenChange,
+        onSelect: handleSelect,
+        onTabChange: handleTabChange,
+        onItemHover,
+      }),
+      [
+        model,
+        popoverAnchorId,
+        blockInstruction,
+        canDrop,
+        canSelect,
+        setAlternateTree,
+        handleBack,
+        handleOpenChange,
+        handleSelect,
+        handleTabChange,
+        onItemHover,
+      ],
+    );
+
+    return (
+      <NavTreeContext.Provider value={navTreeContextValue}>
+        <NavTree id={Node.RootId} root={Graph.getRoot(graph)} tab={tab} open={layout.sidebarOpen} ref={forwardedRef} />
+      </NavTreeContext.Provider>
+    );
+  },
+);
+
+export const NavTreeContainer = memo(NavTreeContainer$);

package/src/containers/NavTreeContainer/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export { NavTreeContainer, NODE_TYPE } from './NavTreeContainer';
+export { NavTreeContainer as default } from './NavTreeContainer';

package/src/{components → containers/NavTreeDocumentTitle}/NavTreeDocumentTitle.tsx

@@ -5,13 +5,14 @@ import { useEffect } from 'react';
 
 import { type Node } from '@dxos/app-graph';
 import { toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { osTranslations } from '@dxos/ui-theme';
 
-import { meta } from '../meta';
+import { meta } from '../../meta';
 
-export const NavTreeDocumentTitle = ({ node }: { node?: Node }) => {
+export const NavTreeDocumentTitle = ({ node }: { node?: Node.Node }) => {
   const { t } = useTranslation(meta.id);
   useEffect(() => {
-    document.title = node ? toLocalizedString(node.properties.label, t) : t('current app name', { ns: 'appkit' });
+    document.title = node ? toLocalizedString(node.properties.label, t) : t('current app name', { ns: osTranslations });
   }, [node?.properties?.label]);
   return null;
 };

package/src/containers/NavTreeDocumentTitle/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { NavTreeDocumentTitle } from './NavTreeDocumentTitle';
+
+export default NavTreeDocumentTitle;

package/src/containers/index.ts

@@ -0,0 +1,12 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type ComponentType, lazy } from 'react';
+
+export { NODE_TYPE } from './NavTreeContainer';
+
+export const CommandsDialogContent: ComponentType<any> = lazy(() => import('./CommandsDialogContent'));
+export const CommandsTrigger: ComponentType<any> = lazy(() => import('./CommandsTrigger'));
+export const NavTreeContainer: ComponentType<any> = lazy(() => import('./NavTreeContainer'));
+export const NavTreeDocumentTitle: ComponentType<any> = lazy(() => import('./NavTreeDocumentTitle'));

package/src/experimental/Tree.stories.tsx

@@ -3,39 +3,17 @@
 //
 
 import { type Meta } from '@storybook/react-vite';
-import React, { type JSX, type PropsWithChildren, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { faker } from '@dxos/random';
-import { Icon, IconButton } from '@dxos/react-ui';
+import { Icon, IconButton, Panel, ScrollArea } from '@dxos/react-ui';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 
 import { type ItemMap, Tree, type TreeNodeData, type TreeProps, visitNodes, visitor } from './Tree';
 
 faker.seed(1234);
 
-/**
- * Space:
- * - Space panels are separated from each other to give them more weight than folders.
- * - Private space isn't different (just first, different icon).
- * - Edit titles in place.
- *
- * Navigation:
- *  - up/down across spaces/folder peers
- *  - right to enter space/folder children
- *  - left to parent
- */
-const Container = ({ children, sidebar }: PropsWithChildren<{ sidebar: JSX.Element }>) => {
-  return (
-    <div className='flex'>
-      {/* TODO(burdon): Custom thin scrollbar. */}
-      {/* TODO(burdon): Horizontal scrolling within navtree? */}
-      <div className='flex flex-col overflow-y-auto is-[300px] bg-neutral-100 dark:bg-neutral-950'>{sidebar}</div>
-      <div className='flex flex-col grow overflow-hidden'>{children}</div>
-    </div>
-  );
-};
-
 // TODO(burdon): Generate.
 const data: TreeNodeData[] = [
   {
@@ -134,7 +112,7 @@ const Sidebar = ({ mutate }: { mutate?: boolean }) => {
     }
   }, []);
 
-  const handleCreateItem: TreeProps['onMenuAction'] = (id, action) => {
+  const handleCreateItem: TreeProps['onMenuAction'] = (id) => {
     setItems((items) => {
       let parent: TreeNodeData | undefined;
       visitNodes(root, (node) => {
@@ -167,49 +145,68 @@ const Sidebar = ({ mutate }: { mutate?: boolean }) => {
   };
 
   return (
-    <div className='flex flex-col overflow-hidden'>
-      <div className='flex flex-col overflow-y-auto'>
-        <Tree
-          className='p-0.5 gap-1'
-          node={root}
-          open={openItems}
-          selected={selectedItems}
-          active={activeItems}
-          onChangeOpen={(id, open) => setOpenItems((items) => ({ ...items, [id]: open }))}
-          onChangeSelected={(id, open) => setSelectedItems((items) => ({ ...items, [id]: open }))}
-          onMenuAction={handleCreateItem}
-          getSlots={(node, open, depth, ancestors) => {
-            if (depth === 1) {
-              return {
-                root: 'rounded bg-white dark:bg-neutral-850',
-                header: mx('rounded-t bg-neutral-50 dark:bg-neutral-900', !open && 'rounded-b'),
-              };
-            }
-          }}
-        />
-      </div>
-
-      <div className='flex items-center my-2 pli-2 gap-2'>
-        <IconButton icon='ph--plus-circle--regular' iconOnly label='Create space' onClick={handleCreateSpace} />
-        <span className='grow text-sm' onClick={handleCreateSpace}>
-          New space
-        </span>
-        <Icon icon='ph--list--regular' />
-      </div>
-    </div>
+    <Panel.Root>
+      <Panel.Content asChild>
+        <ScrollArea.Root orientation='vertical' thin>
+          <ScrollArea.Viewport>
+            <Tree
+              className='p-0.5 gap-1'
+              node={root}
+              open={openItems}
+              selected={selectedItems}
+              active={activeItems}
+              onChangeOpen={(id, open) => setOpenItems((items) => ({ ...items, [id]: open }))}
+              onChangeSelected={(id, open) => setSelectedItems((items) => ({ ...items, [id]: open }))}
+              onMenuAction={handleCreateItem}
+              getSlots={(node, open, depth) => {
+                if (depth === 1) {
+                  return {
+                    root: 'rounded-sm bg-white dark:bg-neutral-850',
+                    header: mx('rounded-t bg-neutral-50 dark:bg-neutral-900', !open && 'rounded-b'),
+                  };
+                }
+              }}
+            />
+          </ScrollArea.Viewport>
+        </ScrollArea.Root>
+      </Panel.Content>
+      <Panel.Statusbar>
+        <div className='flex items-center my-2 px-2 gap-2'>
+          <IconButton icon='ph--plus-circle--regular' iconOnly label='Create space' onClick={handleCreateSpace} />
+          <span className='grow text-sm' onClick={handleCreateSpace}>
+            New space
+          </span>
+          <Icon icon='ph--list--regular' />
+        </div>
+      </Panel.Statusbar>
+    </Panel.Root>
   );
 };
 
 const meta = {
   title: 'plugins/plugin-navtree/experimental/Tree',
   component: Tree,
-  decorators: [withTheme, withLayout({ container: 'column' })],
+  decorators: [withTheme(), withLayout({ layout: 'column', classNames: 'w-[20rem]' })],
+  parameters: {
+    layout: 'fullscreen',
+  },
 } satisfies Meta<typeof Tree>;
 
 export default meta;
 
+/**
+ * Space:
+ * - Space panels are separated from each other to give them more weight than folders.
+ * - Private space isn't different (just first, different icon).
+ * - Edit titles in place.
+ *
+ * Navigation:
+ *  - up/down across spaces/folder peers
+ *  - right to enter space/folder children
+ *  - left to parent
+ */
 export const Default = () => {
-  return <Container sidebar={<Sidebar mutate />} />;
+  return <Sidebar mutate />;
 };
 
 export const Visitor = () => {