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

package/src/components/Dialog/Dialog.tsx

@@ -4,33 +4,33 @@
 
 import React from 'react';
 
-import { Surface, useCapability } from '@dxos/app-framework/react';
+import { Surface } from '@dxos/app-framework/react';
 import { AlertDialog, Dialog as NaturalDialog } from '@dxos/react-ui';
 
-import { SimpleLayoutState } from '../../types';
+import { useSimpleLayoutState } from '../../hooks';
 import { ContentError } from '../ContentError';
 
 export const Dialog = () => {
-  const layout = useCapability(SimpleLayoutState);
+  const { state, updateState } = useSimpleLayoutState();
 
-  const DialogRoot = layout.dialogType === 'alert' ? AlertDialog.Root : NaturalDialog.Root;
-  const DialogOverlay = layout.dialogType === 'alert' ? AlertDialog.Overlay : NaturalDialog.Overlay;
+  const DialogRoot = state.dialogType === 'alert' ? AlertDialog.Root : NaturalDialog.Root;
+  const DialogOverlay = state.dialogType === 'alert' ? AlertDialog.Overlay : NaturalDialog.Overlay;
 
   return (
     <DialogRoot
-      modal={layout.dialogBlockAlign !== 'end'}
-      open={layout.dialogOpen}
-      onOpenChange={(nextOpen) => (layout.dialogOpen = nextOpen)}
+      modal={state.dialogBlockAlign !== 'end'}
+      open={state.dialogOpen}
+      onOpenChange={(nextOpen) => updateState((s) => ({ ...s, dialogOpen: nextOpen }))}
     >
-      {layout.dialogBlockAlign === 'end' ? (
-        <Surface role='dialog' data={layout.dialogContent} limit={1} fallback={ContentError} placeholder={<div />} />
+      {state.dialogBlockAlign === 'end' ? (
+        <Surface role='dialog' data={state.dialogContent} limit={1} fallback={ContentError} />
       ) : (
         <DialogOverlay
-          blockAlign={layout.dialogBlockAlign}
-          classNames={layout.dialogOverlayClasses}
-          style={layout.dialogOverlayStyle}
+          blockAlign={state.dialogBlockAlign}
+          classNames={state.dialogOverlayClasses}
+          style={state.dialogOverlayStyle}
         >
-          <Surface role='dialog' data={layout.dialogContent} limit={1} fallback={ContentError} />
+          <Surface role='dialog' data={state.dialogContent} limit={1} fallback={ContentError} />
         </DialogOverlay>
       )}
     </DialogRoot>

package/src/components/Home/Home.tsx

@@ -6,69 +6,80 @@ import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 
 import { Common } from '@dxos/app-framework';
 import { useAppGraph, useOperationInvoker } from '@dxos/app-framework/react';
-import { Graph, Node, useConnections } from '@dxos/plugin-graph';
-import { Avatar, Icon, type ThemedClassName, toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { Card } from '@dxos/react-ui-mosaic';
+import { Node, useConnections } from '@dxos/plugin-graph';
+import { Avatar, Icon, Toolbar, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Card, Layout, Mosaic, type StackTileComponent } 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';
 
 import { meta } from '../../meta';
+import { useLoadDescendents } from '../hooks';
 
-type HomeProps = ThemedClassName;
+export type HomeProps = {};
 
-export const Home = ({ classNames }: HomeProps) => {
+/**
+ * Home screen.
+ */
+export const Home = (_: HomeProps) => {
   const { t } = useTranslation(meta.id);
-  const workspaces = useWorkspaces();
+  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: workspaces,
+    items,
     extract: (node) => toLocalizedString(node.properties.label, t),
   });
 
   return (
-    <div className={mx('flex flex-col pli-3', classNames)}>
-      {/* <div className='container-max-width'>{t('workspaces heading')}</div> */}
-      <SearchList.Root onSearch={handleSearch} classNames='container-max-width'>
-        <div className='plb-3'>
+    <Layout.Main toolbar>
+      <SearchList.Root onSearch={handleSearch}>
+        <Toolbar.Root>
           <SearchList.Input placeholder={t('search placeholder')} autoFocus />
-        </div>
+        </Toolbar.Root>
         <SearchList.Content>
-          <SearchList.Viewport classNames='flex flex-col gap-1'>
-            {results.map((node) => (
-              <Workspace key={node.id} node={node} />
-            ))}
-          </SearchList.Viewport>
+          <Mosaic.Container asChild>
+            <Mosaic.Viewport padding>
+              <Mosaic.Stack items={results} getId={(node) => node.id} Tile={WorkspaceTile} />
+            </Mosaic.Viewport>
+          </Mosaic.Container>
         </SearchList.Content>
       </SearchList.Root>
-    </div>
+    </Layout.Main>
   );
 };
 
-const Workspace = ({ node }: { node: Node.Node }) => {
+const WorkspaceTile: StackTileComponent<Node.Node> = ({ data }) => {
   const { t } = useTranslation(meta.id);
   const { invokePromise } = useOperationInvoker();
   const { selectedValue, registerItem, unregisterItem } = useSearchListItem();
   const ref = useRef<HTMLDivElement>(null);
 
   const handleSelect = useCallback(
-    () => invokePromise(Common.LayoutOperation.SwitchWorkspace, { subject: node.id }),
-    [invokePromise, node.id],
+    () => invokePromise(Common.LayoutOperation.SwitchWorkspace, { subject: data.id }),
+    [invokePromise, data.id],
   );
 
-  useLoadDescendents(node.id);
+  useLoadDescendents(data.id);
 
-  const name = toLocalizedString(node.properties.label, t);
-  const isSelected = selectedValue === node.id;
+  const name = toLocalizedString(data.properties.label, t);
+  const isSelected = selectedValue === data.id;
 
   // Register this workspace with the search context.
   useEffect(() => {
     if (ref.current) {
-      registerItem(node.id, ref.current, handleSelect);
+      registerItem(data.id, ref.current, handleSelect);
     }
 
-    return () => unregisterItem(node.id);
-  }, [node.id, handleSelect, registerItem, unregisterItem]);
+    return () => unregisterItem(data.id);
+  }, [data.id, handleSelect, registerItem, unregisterItem]);
 
   // Scroll into view when selected.
   useEffect(() => {
@@ -81,17 +92,18 @@ const Workspace = ({ node }: { node: Node.Node }) => {
     <Card.Root
       ref={ref}
       role='button'
-      tabIndex={-1}
+      fullWidth
+      tabIndex={-1} // TODO(burdon): Use Mosaic.Focus.
       data-selected={isSelected}
       classNames={mx('dx-focus-ring', isSelected && 'bg-hoverOverlay')}
       onClick={handleSelect}
     >
-      <Card.Chrome classNames='grid grid-cols-[min-content_1fr_min-content] items-center gap-cardSpacingInline pie-cardSpacingInline'>
+      <Card.Toolbar density='coarse'>
         <Avatar.Root>
           <Avatar.Content
-            hue={node.properties.hue}
-            icon={node.properties.icon}
-            hueVariant='surface'
+            icon={data.properties.icon}
+            hue={data.properties.hue}
+            hueVariant='transparent'
             variant='square'
             size={12}
             fallback={name}
@@ -99,40 +111,20 @@ const Workspace = ({ node }: { node: Node.Node }) => {
           <Avatar.Label>{name}</Avatar.Label>
           <Icon icon='ph--caret-right--regular' />
         </Avatar.Root>
-      </Card.Chrome>
+      </Card.Toolbar>
     </Card.Root>
   );
 };
 
-const useLoadDescendents = (nodeId?: string) => {
-  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]);
+/** Filters nodes by disposition. */
+const filterItems = (node: Node.Node, disposition: string) => {
+  return node.properties.disposition === disposition;
 };
 
-const useWorkspaces = () => {
+/** Returns root-level items filtered by disposition. */
+const useItemsByDisposition = (disposition: string, sort = false) => {
   const { graph } = useAppGraph();
-
-  // Get root connections to find collections.
-  const rootConnections = useConnections(graph, Node.RootId);
-  const collections = useMemo(
-    () => rootConnections.filter((node) => node.properties.disposition === 'collection'),
-    [rootConnections],
-  );
-
-  // Get first collection's children as workspaces.
-  // TODO(wittjosiah): Support multiple collections or nested workspaces if needed.
-  const firstCollection = collections[0];
-  return useConnections(graph, firstCollection?.id);
+  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;
 };

package/src/components/Popover/Popover.tsx

@@ -5,10 +5,12 @@
 import { createContext } from '@radix-ui/react-context';
 import React, { type PropsWithChildren, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import { Surface, useCapability } from '@dxos/app-framework/react';
-import { Popover, type PopoverContentInteractOutsideEvent } from '@dxos/react-ui';
+import { Surface } from '@dxos/app-framework/react';
+import { Popover, type PopoverContentInteractOutsideEvent, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Card } from '@dxos/react-ui-mosaic';
 
-import { SimpleLayoutState } from '../../types';
+import { useSimpleLayoutState } from '../../hooks';
+import { meta } from '../../meta';
 
 const DEBOUNCE_DELAY = 40;
 
@@ -19,7 +21,7 @@ type LayoutPopoverContextValue = {
 const [LayoutPopoverProvider, useLayoutPopoverContext] = createContext<LayoutPopoverContextValue>('LayoutPopover');
 
 export const PopoverRoot = ({ children }: PropsWithChildren) => {
-  const layout = useCapability(SimpleLayoutState);
+  const { state } = useSimpleLayoutState();
   const [open, setOpen] = useState(false);
   const virtualRef = useRef<HTMLButtonElement | null>(null);
   const [virtualIter, setVirtualIter] = useState(0);
@@ -29,22 +31,22 @@ export const PopoverRoot = ({ children }: PropsWithChildren) => {
   //  the anchor further down the tree or measuring the virtual trigger's client rect.
   useEffect(() => {
     setOpen(false);
-    if (layout.popoverOpen) {
+    if (state.popoverOpen) {
       if (debounceRef.current) {
         clearTimeout(debounceRef.current);
       }
-      if (layout.popoverAnchor && virtualRef.current !== layout.popoverAnchor) {
-        virtualRef.current = layout.popoverAnchor ?? null;
+      if (state.popoverAnchor && virtualRef.current !== state.popoverAnchor) {
+        virtualRef.current = state.popoverAnchor ?? null;
         setVirtualIter((iter) => iter + 1);
       }
       debounceRef.current = setTimeout(() => setOpen(true), DEBOUNCE_DELAY);
     }
-  }, [layout.popoverOpen, layout.popoverAnchorId, layout.popoverAnchor, layout.popoverContent]);
+  }, [state.popoverOpen, state.popoverAnchorId, state.popoverAnchor, state.popoverContent]);
 
   return (
     <LayoutPopoverProvider setOpen={setOpen}>
       <Popover.Root modal={false} open={open}>
-        {layout.popoverAnchor && <Popover.VirtualTrigger key={virtualIter} virtualRef={virtualRef} />}
+        {state.popoverAnchor && <Popover.VirtualTrigger key={virtualIter} virtualRef={virtualRef} />}
         {children}
       </Popover.Root>
     </LayoutPopoverProvider>
@@ -52,10 +54,22 @@ export const PopoverRoot = ({ children }: PropsWithChildren) => {
 };
 
 export const PopoverContent = () => {
-  const layout = useCapability(SimpleLayoutState);
+  const { t } = useTranslation(meta.id);
+  const { state, updateState } = useSimpleLayoutState();
   const { setOpen } = useLayoutPopoverContext('PopoverContent');
 
-  const handleClose = useCallback(
+  const handleClose = useCallback(() => {
+    setOpen(false);
+    updateState((s) => ({
+      ...s,
+      popoverOpen: false,
+      popoverAnchor: undefined,
+      popoverAnchorId: undefined,
+      popoverSide: undefined,
+    }));
+  }, [setOpen, updateState]);
+
+  const handleInteractOutside = useCallback(
     (event: KeyboardEvent | PopoverContentInteractOutsideEvent) => {
       if (
         // TODO(thure): CodeMirror should not focus itself when it updates.
@@ -64,36 +78,40 @@ export const PopoverContent = () => {
       ) {
         event.preventDefault();
       } else {
-        setOpen(false);
-        layout.popoverOpen = false;
-        layout.popoverAnchor = undefined;
-        layout.popoverAnchorId = undefined;
-        layout.popoverSide = undefined;
+        handleClose();
       }
     },
-    [setOpen],
+    [handleClose],
   );
 
   const collisionBoundaries: HTMLElement[] = useMemo(() => {
-    const closest = layout.popoverAnchor?.closest('[data-popover-collision-boundary]') as
-      | HTMLElement
-      | null
-      | undefined;
+    const closest = state.popoverAnchor?.closest('[data-popover-collision-boundary]') as HTMLElement | null | undefined;
     return closest ? [closest] : [];
-  }, [layout.popoverAnchor]);
+  }, [state.popoverAnchor]);
 
   return (
     <Popover.Portal>
       <Popover.Content
-        side={layout.popoverSide}
-        onInteractOutside={handleClose}
-        onEscapeKeyDown={handleClose}
-        collisionBoundary={collisionBoundaries}
+        side={state.popoverSide}
         sticky='always'
         hideWhenDetached
+        collisionBoundary={collisionBoundaries}
+        onInteractOutside={handleInteractOutside}
+        onEscapeKeyDown={handleInteractOutside}
       >
         <Popover.Viewport>
-          <Surface role='card--popover' data={layout.popoverContent} limit={1} />
+          {state.popoverKind === 'card' && (
+            <Card.Root>
+              <Card.Toolbar>
+                {/* TODO(wittjosiah): Cleaner way to handle no drag handle in toolbar? */}
+                <span />
+                {state.popoverTitle ? <Card.Title>{toLocalizedString(state.popoverTitle, t)}</Card.Title> : <span />}
+                <Card.Close onClick={handleClose} />
+              </Card.Toolbar>
+              <Surface role='card--content' data={state.popoverContent} limit={1} />
+            </Card.Root>
+          )}
+          {state.popoverKind === 'base' && <Surface role='popover' data={state.popoverContent} limit={1} />}
         </Popover.Viewport>
         <Popover.Arrow />
       </Popover.Content>

package/src/components/SimpleLayout/Banner.tsx

@@ -2,47 +2,69 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 
 import { Common } from '@dxos/app-framework';
-import { useCapability, useOperationInvoker } from '@dxos/app-framework/react';
-import { type Node } from '@dxos/plugin-graph';
-import { IconButton, toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { mx, osTranslations, surfaceZIndex } from '@dxos/ui-theme';
+import { useAppGraph, useOperationInvoker } from '@dxos/app-framework/react';
+import { Graph, Node } from '@dxos/plugin-graph';
+import { IconButton, type ThemedClassName, Toolbar, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { mx, osTranslations } from '@dxos/ui-theme';
 
+import { useSimpleLayoutState } from '../../hooks';
 import { meta } from '../../meta';
-import { SimpleLayoutState } from '../../types';
 
-export type BannerProps = {
-  node?: Node.Node;
+/**
+ * Check if an item is a direct child of a workspace or collection.
+ * Returns true if any parent node has disposition 'workspace' or 'collection'.
+ */
+const isWorkspaceOrCollectionChild = (graph: Graph.ReadableGraph, itemId: string): boolean => {
+  const parents = Graph.getConnections(graph, itemId, 'inbound');
+  return parents.some(
+    (node) => node.properties.disposition === 'workspace' || node.properties.disposition === 'collection',
+  );
 };
 
-export const Banner = ({ node }: BannerProps) => {
+export type BannerProps = ThemedClassName<{
+  node?: Node.Node;
+}>;
+
+export const Banner = ({ node, classNames }: BannerProps) => {
   const { t } = useTranslation(meta.id);
-  const layout = useCapability(SimpleLayoutState);
+  const { state } = useSimpleLayoutState();
   const { invokePromise } = useOperationInvoker();
-  const label = node ? toLocalizedString(node.properties.label, t) : t('current app name', { ns: osTranslations });
+  const { graph } = useAppGraph();
+
+  const label = (node && toLocalizedString(node.properties.label, t)) ?? t('current app name', { ns: osTranslations });
+
+  // Check if current active item is a top-level workspace/collection child.
+  const isTopLevelItem = useMemo(() => {
+    if (!state.active) {
+      return false;
+    }
+    return isWorkspaceOrCollectionChild(graph, state.active);
+  }, [graph, state.active]);
 
   const handleClick = useCallback(async () => {
-    if (layout.active) {
-      await invokePromise(Common.LayoutOperation.Close, { subject: [layout.active] });
+    if (state.active) {
+      // If history is empty and this is a top-level item, go to home.
+      if (state.history.length === 0 && isTopLevelItem) {
+        await invokePromise(Common.LayoutOperation.SwitchWorkspace, { subject: Node.RootId });
+      } else {
+        // Otherwise, close (which will pop from history or clear active).
+        await invokePromise(Common.LayoutOperation.Close, { subject: [state.active] });
+      }
     } else {
-      await invokePromise(Common.LayoutOperation.SwitchWorkspace, { subject: 'default' });
+      await invokePromise(Common.LayoutOperation.SwitchWorkspace, { subject: Node.RootId });
     }
-  }, [invokePromise, layout.active]);
+  }, [invokePromise, state.active, state.history.length, isTopLevelItem]);
+
+  if (!node) {
+    return null;
+  }
 
   return (
-    // Note that the HTML5 element `header` has a default role of `banner`, hence the name of this component.
-    // It should not be confused with the `heading` role (elements h1-6).
-    // TODO(burdon): Fixed or not?
-    <header
-      className={mx(
-        '_fixed flex items-center gap-2 pli-2 block-start-0 inset-inline-0 bs-[--dx-mobile-topbar-content-height,48px] bg-baseSurface border-be border-separator',
-        'grid grid-cols-[min-content_1fr_min-content]',
-        surfaceZIndex({ level: 'menu' }),
-      )}
-    >
-      {node ? (
+    <Toolbar.Root role='banner' classNames={mx('grid grid-cols-[var(--rail-size)_1fr_var(--rail-size)]', classNames)}>
+      {node.id !== Node.RootId ? (
         <IconButton
           iconOnly
           variant='ghost'
@@ -54,7 +76,7 @@ export const Banner = ({ node }: BannerProps) => {
         <div />
       )}
       <h1 className={'grow text-center truncate font-medium'}>{label}</h1>
-      {/* TODO(burdon): Menu. */}
-    </header>
+      <IconButton iconOnly variant='ghost' icon='ph--dots-three-vertical--regular' label={t('menu label')} />
+    </Toolbar.Root>
   );
 };

package/src/components/SimpleLayout/Main.tsx

@@ -2,79 +2,73 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { Activity, useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 
-import { Surface, useAppGraph, useCapability } from '@dxos/app-framework/react';
+import { Surface, useAppGraph } 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 } from '@dxos/react-ui-mosaic';
 import { mx } from '@dxos/ui-theme';
 
-import { SimpleLayoutState } from '../../types';
+import { useSimpleLayoutState } from '../../hooks';
 import { ContentError } from '../ContentError';
 import { ContentLoading } from '../ContentLoading';
-import { Home } from '../Home';
 
 import { Banner } from './Banner';
 import { NavBar } from './NavBar';
 
+/**
+ * Main root component.
+ */
 export const Main = () => {
-  const layout = useCapability(SimpleLayoutState);
-  const id = layout.active ?? layout.workspace;
+  const { state } = useSimpleLayoutState();
+  const id = state.active ?? state.workspace;
+  const showNavBar = !state.isPopover;
   const { graph } = useAppGraph();
   const node = useNode(graph, id);
 
   const placeholder = useMemo(() => <ContentLoading />, []);
 
-  const { variant } = parseEntryId(id);
-  const data = useMemo(
-    () =>
+  const data = useMemo(() => {
+    const { variant } = parseEntryId(id);
+    return (
       node && {
         attendableId: id,
         subject: node.data,
         properties: node.properties,
+        popoverAnchorId: state.popoverAnchorId,
         variant,
-        popoverAnchorId: layout.popoverAnchorId,
-      },
-    [node, node?.data, node?.properties, layout.popoverAnchorId, variant, id],
-  );
-
-  const handleActiveIdChange = (nextActiveId: string | null) => {
-    // eslint-disable-next-line no-console
-    console.log('[navigate]', nextActiveId);
-  };
+      }
+    );
+  }, [id, node, node?.data, node?.properties, state.popoverAnchorId]);
 
-  const showNavBar = !layout.isPopover;
+  const handleActiveIdChange = useCallback((nextActiveId: string | null) => {
+    log.info('navigate', { nextActiveId });
+  }, []);
 
   return (
-    <NaturalMain.Root complementarySidebarState='closed' navigationSidebarState='closed'>
-      <NaturalMain.Content bounce classNames='dx-mobile-main dx-mobile-main-scroll-area--flush !overflow-y-auto'>
-        <div
-          className={mx(
-            'bs-full overflow-hidden grid',
+    <Mosaic.Root>
+      <NaturalMain.Root complementarySidebarState='closed' navigationSidebarState='closed'>
+        <NaturalMain.Content
+          bounce
+          classNames={mx(
+            '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]',
           )}
         >
-          <Banner node={node} />
-          <Activity mode={id === 'default' ? 'visible' : 'hidden'}>
-            <Home />
-          </Activity>
-          <Activity mode={id !== 'default' ? 'visible' : 'hidden'}>
-            <section>
-              <Surface
-                key={id}
-                role='article'
-                data={data}
-                limit={1}
-                fallback={ContentError}
-                placeholder={placeholder}
-              />
-            </section>
-          </Activity>
-          {showNavBar && <NavBar activeId={id} onActiveIdChange={handleActiveIdChange} />}
-        </div>
-      </NaturalMain.Content>
-    </NaturalMain.Root>
+          <Banner classNames='border-be border-separator' node={node} />
+          <article className='contents'>
+            <Surface key={id} role='article' data={data} limit={1} fallback={ContentError} placeholder={placeholder} />
+          </article>
+          {showNavBar && (
+            <NavBar classNames='border-bs border-separator' activeId={id} onActiveIdChange={handleActiveIdChange} />
+          )}
+        </NaturalMain.Content>
+      </NaturalMain.Root>
+    </Mosaic.Root>
   );
 };
 
@@ -83,3 +77,5 @@ const parseEntryId = (entryId: string) => {
   const [id, variant] = entryId.split(ATTENDABLE_PATH_SEPARATOR);
   return { id, variant };
 };
+
+Main.displayName = 'SimpleLayout.Main';