@dxos/plugin-simple-layout 0.0.0 → 0.8.4-main.52d7546f51

package/src/capabilities/state/state.tsx

@@ -2,19 +2,24 @@
 // Copyright 2025 DXOS.org
 //
 
+import { Atom } from '@effect-atom/atom-react';
 import * as Effect from 'effect/Effect';
 
-import { Capability, Common } from '@dxos/app-framework';
-import { live } from '@dxos/live-object';
+import { Capability } from '@dxos/app-framework';
+import { AppCapabilities } from '@dxos/app-toolkit';
+import { Node } from '@dxos/plugin-graph';
 
 import { type SimpleLayoutState } from '../../types';
 import { SimpleLayoutState as SimpleLayoutStateCapability } from '../../types';
 
 const defaultState: SimpleLayoutState = {
   dialogOpen: false,
-  workspace: 'default',
-  previousWorkspace: 'default',
+  workspace: Node.RootId,
+  previousWorkspace: Node.RootId,
+  history: [],
   isPopover: false,
+  companionVariant: undefined,
+  drawerState: 'closed',
 };
 
 export type SimpleLayoutStateOptions = {
@@ -23,38 +28,25 @@ export type SimpleLayoutStateOptions = {
 
 export default Capability.makeModule(({ initialState }: SimpleLayoutStateOptions = {}) =>
   Effect.sync(() => {
-    const state = live<SimpleLayoutState>({ ...defaultState, ...initialState });
-
-    const layout = live<Common.Capability.Layout>({
-      get mode() {
-        return 'simple';
-      },
-      get dialogOpen() {
-        return state.dialogOpen;
-      },
-      get sidebarOpen() {
-        return false;
-      },
-      get complementarySidebarOpen() {
-        return false;
-      },
-      get workspace() {
-        return state.workspace;
-      },
-      get active() {
-        return state.active ? [state.active] : [];
-      },
-      get inactive() {
-        return [];
-      },
-      get scrollIntoView() {
-        return undefined;
-      },
+    const stateAtom = Atom.make<SimpleLayoutState>({ ...defaultState, ...initialState });
+
+    const layoutAtom = Atom.make((get): AppCapabilities.Layout => {
+      const state = get(stateAtom);
+      return {
+        mode: 'simple',
+        dialogOpen: state.dialogOpen,
+        sidebarOpen: false,
+        complementarySidebarOpen: false,
+        workspace: state.workspace,
+        active: state.active ? [state.active] : [],
+        inactive: [],
+        scrollIntoView: undefined,
+      };
     });
 
     return [
-      Capability.contributes(SimpleLayoutStateCapability, state),
-      Capability.contributes(Common.Capability.Layout, layout),
+      Capability.contributes(SimpleLayoutStateCapability, stateAtom),
+      Capability.contributes(AppCapabilities.Layout, layoutAtom),
     ];
   }),
 );

package/src/capabilities/url-handler/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capability } from '@dxos/app-framework';
+
+export const UrlHandler = Capability.lazy('UrlHandler', () => import('./url-handler'));

package/src/capabilities/url-handler/url-handler.ts

@@ -0,0 +1,157 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { log } from '@dxos/log';
+import { Node } from '@dxos/plugin-graph';
+import { isTauri } from '@dxos/util';
+
+import { type SimpleLayoutState, SimpleLayoutState as SimpleLayoutStateCapability } from '../../types';
+
+/**
+ * URL handler for simple layout that syncs browser URL with layout state.
+ * URL format: /{workspace} or /{workspace}/{active}
+ * Root is represented as / or /root.
+ *
+ * On mobile Tauri, also listens for deep links via the deep-link plugin.
+ */
+export default Capability.makeModule(
+  Effect.fnUntraced(function* () {
+    const { invokeSync } = yield* Capability.get(Capabilities.OperationInvoker);
+
+    /**
+     * Handle navigation from a pathname.
+     * Parses path and updates state accordingly.
+     */
+    const handlePathNavigation = (pathname: string) => {
+      log.info('[UrlHandler] Navigating to path', { pathname });
+
+      // Parse URL segments: /{workspace}/{active}
+      const [_, nextWorkspace, nextActive] = pathname.split('/');
+
+      // Determine target workspace (empty or 'root' means Node.RootId).
+      const targetWorkspace = !nextWorkspace || nextWorkspace === 'root' ? Node.RootId : nextWorkspace;
+
+      // Navigate via operations (they will update state accordingly).
+      invokeSync(LayoutOperation.SwitchWorkspace, { subject: targetWorkspace });
+      if (nextActive) {
+        invokeSync(LayoutOperation.Open, { subject: [nextActive] });
+      }
+    };
+
+    const onNavigation = handleNavigation(handlePathNavigation);
+
+    // Handle initial URL and listen for browser navigation.
+    yield* Effect.sync(() => onNavigation());
+    window.addEventListener('popstate', onNavigation);
+
+    // Set up deep link listener for mobile Tauri.
+    let unlistenDeepLink: (() => void) | undefined;
+    if (isTauri()) {
+      yield* Effect.tryPromise({
+        try: async () => {
+          const { getCurrent, onOpenUrl } = await import('@tauri-apps/plugin-deep-link');
+
+          // Check if app was launched via deep link (cold start).
+          const launchUrls = await getCurrent();
+          if (launchUrls && launchUrls.length > 0) {
+            log.info('[UrlHandler] App launched with deep links', { urls: launchUrls });
+            for (const url of launchUrls) {
+              handleDeepLink(url, handlePathNavigation);
+            }
+          }
+
+          // Listen for deep links while app is running.
+          unlistenDeepLink = await onOpenUrl((urls) => {
+            log.info('[UrlHandler] Deep links received', { urls });
+            for (const url of urls) {
+              handleDeepLink(url, handlePathNavigation);
+            }
+          });
+
+          log.info('[UrlHandler] Deep link listener initialized');
+        },
+        catch: (error) => {
+          log.warn('[UrlHandler] Failed to initialize deep link listener', { error });
+          return error;
+        },
+      }).pipe(Effect.catchAll(() => Effect.void));
+    }
+
+    // Subscribe to state changes to update the URL.
+    let lastWorkspace: string | undefined;
+    let lastActive: string | undefined;
+    const unsubscribe = yield* Capabilities.subscribeAtom(SimpleLayoutStateCapability, (state: SimpleLayoutState) => {
+      const { workspace, active } = state;
+
+      // Only update URL if relevant state changed.
+      if (workspace !== lastWorkspace || active !== lastActive) {
+        lastWorkspace = workspace;
+        lastActive = active;
+
+        const path = pathFromState(workspace, active);
+        if (window.location.pathname !== path) {
+          history.pushState(null, '', `${path}${window.location.search}`);
+        }
+      }
+    });
+
+    return Capability.contributes(Capabilities.Null, null, () =>
+      Effect.sync(() => {
+        window.removeEventListener('popstate', onNavigation);
+        unsubscribe();
+        unlistenDeepLink?.();
+      }),
+    );
+  }),
+);
+
+// TODO(wittjosiah): Instead of hardcoding redirect paths, we should either:
+//   1. Validate that the workspace exists in the graph before navigating.
+//   2. Implement more structured routing with explicit route definitions.
+/**
+ * Check if a path is a special redirect path that shouldn't be navigated to.
+ * These paths are handled by other systems (e.g., OAuth).
+ */
+const isRedirectPath = (pathname: string): boolean => pathname.startsWith('/redirect/');
+
+/**
+ * Build pathname from layout state. Root workspace is / or /root/{active}.
+ */
+const pathFromState = (workspace: string, active: string | undefined): string =>
+  workspace === Node.RootId
+    ? active
+      ? `/${Node.RootId}/${active}`
+      : '/'
+    : active
+      ? `/${workspace}/${active}`
+      : `/${workspace}`;
+
+/**
+ * Returns a handler for navigation events (initial load and popstate) that navigates to current pathname.
+ */
+const handleNavigation =
+  (navigate: (pathname: string) => void): (() => void) =>
+  () =>
+    navigate(window.location.pathname);
+
+/**
+ * Handle deep link URL from Tauri. Parses the URL and calls navigate unless it's a redirect path.
+ */
+const handleDeepLink = (urlString: string, navigate: (pathname: string) => void): void => {
+  log.info('[UrlHandler] Deep link received', { url: urlString });
+  try {
+    const url = new URL(urlString);
+    if (isRedirectPath(url.pathname)) {
+      log.info('[UrlHandler] Skipping redirect path (handled elsewhere)', { pathname: url.pathname });
+      return;
+    }
+    navigate(url.pathname);
+  } catch (error) {
+    log.warn('[UrlHandler] Failed to parse deep link URL', { urlString, error });
+  }
+};

package/src/components/ContentError.stories.tsx

@@ -13,7 +13,7 @@ import { ContentError } from './ContentError';
 const meta = {
   title: 'plugins/plugin-simple-layout/ContentError',
   component: ContentError,
-  decorators: [withTheme],
+  decorators: [withTheme()],
   parameters: {
     layout: 'centered',
     translations,

package/src/components/ContentLoading.stories.tsx

@@ -11,7 +11,7 @@ import { ContentLoading } from './ContentLoading';
 const meta = {
   title: 'plugins/plugin-simple-layout/ContentLoading',
   component: ContentLoading,
-  decorators: [withTheme],
+  decorators: [withTheme()],
   parameters: {
     layout: 'centered',
   },

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/ui';
 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((state) => ({ ...state, dialogOpen: nextOpen }))}
     >
-      {layout.dialogBlockAlign === 'end' ? (
-        <Surface role='dialog' data={layout.dialogContent} limit={1} fallback={ContentError} placeholder={<div />} />
+      {state.dialogBlockAlign === 'end' ? (
+        <Surface.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.Surface role='dialog' data={state.dialogContent} limit={1} fallback={ContentError} />
         </DialogOverlay>
       )}
     </DialogRoot>

package/src/components/Home/Home.tsx

@@ -4,94 +4,108 @@
 
 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 { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { useAppGraph } from '@dxos/app-toolkit/ui';
+import { Node, useConnections } from '@dxos/plugin-graph';
+import { Avatar, Icon, Layout, ScrollArea, Toolbar, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Card, 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>
+            <ScrollArea.Root orientation='vertical'>
+              <ScrollArea.Viewport classNames='p-2'>
+                <Mosaic.Stack items={results} getId={(node) => node.id} Tile={WorkspaceTile} />
+              </ScrollArea.Viewport>
+            </ScrollArea.Root>
+          </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 name = toLocalizedString(data.properties.label, t);
+  const isSelected = selectedValue === data.id;
+  const cardRef = useRef<HTMLDivElement>(null);
+
+  useLoadDescendents(data.id);
 
   const handleSelect = useCallback(
-    () => invokePromise(Common.LayoutOperation.SwitchWorkspace, { subject: node.id }),
-    [invokePromise, node.id],
+    () => invokePromise(LayoutOperation.SwitchWorkspace, { subject: data.id }),
+    [invokePromise, data.id],
   );
 
-  useLoadDescendents(node.id);
-
-  const name = toLocalizedString(node.properties.label, t);
-  const isSelected = selectedValue === node.id;
-
   // Register this workspace with the search context.
   useEffect(() => {
-    if (ref.current) {
-      registerItem(node.id, ref.current, handleSelect);
+    if (cardRef.current) {
+      registerItem(data.id, cardRef.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(() => {
-    if (isSelected && ref.current) {
-      ref.current.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+    if (isSelected && cardRef.current) {
+      cardRef.current.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
     }
   }, [isSelected]);
 
   return (
     <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}
+      ref={cardRef}
     >
-      <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 +113,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/MobileLayout/MobileLayout.stories.tsx

@@ -0,0 +1,125 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { type PropsWithChildren, useEffect, useState } from 'react';
+
+import { addEventListener, combine } from '@dxos/async';
+import { Flex, Input, Layout, Splitter, type SplitterMode, Toolbar } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { MobileLayout, type MobileLayoutRootProps } from './MobileLayout';
+
+/**
+ * Simulate ios keyboard.
+ */
+const WithKeyboard = ({ children }: PropsWithChildren) => {
+  const [keyboardOpen, setKeyboardOpen] = useState(false);
+
+  useEffect(() => {
+    return combine(
+      addEventListener(document, 'focusin', (event: FocusEvent) => {
+        const target = event.target as HTMLElement;
+        if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
+          setKeyboardOpen(true);
+        }
+      }),
+      addEventListener(document, 'focusout', (event: FocusEvent) => {
+        const target = event.target as HTMLElement;
+        if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
+          setKeyboardOpen(false);
+        }
+      }),
+    );
+  }, []);
+
+  useEffect(() => {
+    const keyboardHeight = keyboardOpen ? 300 : 0;
+    document.documentElement.style.setProperty('--kb-height', `${keyboardHeight}px`);
+    document.documentElement.style.setProperty('--kb-open', keyboardOpen ? '1' : '0');
+
+    // Dispatch custom keyboard event that useIOSKeyboard listens for.
+    window.dispatchEvent(
+      new CustomEvent('keyboard', {
+        detail: {
+          type: keyboardOpen ? 'show' : 'hide',
+          height: keyboardHeight,
+          duration: 300,
+        },
+      }),
+    );
+  }, [keyboardOpen]);
+
+  return <div className='h-screen relative'>{children}</div>;
+};
+
+const Panel = ({ children, label }: PropsWithChildren<{ label: string }>) => {
+  return (
+    <Layout.Main toolbar>
+      <Toolbar.Root>
+        {label}
+        <Toolbar.Separator variant='gap' />
+        {children}
+      </Toolbar.Root>
+      <Flex column classNames='p-1'>
+        <Input.Root>
+          <Input.TextInput />
+        </Input.Root>
+      </Flex>
+    </Layout.Main>
+  );
+};
+
+const DefaultStory = () => {
+  const [splitterMode, setSplitterMode] = useState<SplitterMode>('upper');
+  const [keyboardOpen, setKeyboardOpen] = useState(false);
+
+  useEffect(() => {
+    setSplitterMode(splitterMode === 'both' ? 'lower' : splitterMode);
+  }, [keyboardOpen]);
+
+  return (
+    <WithKeyboard>
+      <MobileLayout.Root onKeyboardOpenChange={setKeyboardOpen}>
+        <MobileLayout.Panel safe={{ top: true, bottom: splitterMode === 'upper' }}>
+          <Splitter.Root mode={splitterMode} ratio={0.5}>
+            <Splitter.Panel position='upper'>
+              <Panel label='Main'>
+                {splitterMode === 'upper' && (
+                  <Toolbar.IconButton icon='ph--plus--regular' label='Open' onClick={() => setSplitterMode('both')} />
+                )}
+              </Panel>
+            </Splitter.Panel>
+            <Splitter.Panel position='lower'>
+              <Panel label='Drawer'>
+                <Toolbar.IconButton
+                  icon={splitterMode === 'lower' ? 'ph--arrow-down--regular' : 'ph--arrow-up--regular'}
+                  label={splitterMode === 'lower' ? 'Collapse' : 'Expand'}
+                  onClick={() => setSplitterMode((splitterMode) => (splitterMode === 'both' ? 'lower' : 'both'))}
+                />
+                <Toolbar.IconButton icon='ph--x--regular' label='Close' onClick={() => setSplitterMode('upper')} />
+              </Panel>
+            </Splitter.Panel>
+          </Splitter.Root>
+        </MobileLayout.Panel>
+      </MobileLayout.Root>
+    </WithKeyboard>
+  );
+};
+
+const meta: Meta<MobileLayoutRootProps> = {
+  title: 'plugins/plugin-simple-layout/MobileLayout',
+  component: MobileLayout.Root,
+  render: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'column', classNames: 'relative' })],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<MobileLayoutRootProps>;
+
+export const Default: Story = {};