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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-simple-layout",
-  "version": "0.8.4-main.52d7546f51",
+  "version": "0.8.4-main.6fa680abb7",
   "description": "Simple layout plugin for minimal UI contexts like popover windows.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -14,9 +14,9 @@
   "type": "module",
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs",
-      "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts"
     }
   },
@@ -31,19 +31,20 @@
     "@radix-ui/react-context": "1.1.1",
     "@tauri-apps/plugin-deep-link": "^2.2.0",
     "@tauri-apps/plugin-haptics": "^2.3.2",
-    "@dxos/app-framework": "0.8.4-main.52d7546f51",
-    "@dxos/async": "0.8.4-main.52d7546f51",
-    "@dxos/log": "0.8.4-main.52d7546f51",
-    "@dxos/operation": "0.8.4-main.52d7546f51",
-    "@dxos/plugin-graph": "0.8.4-main.52d7546f51",
-    "@dxos/react-ui-attention": "0.8.4-main.52d7546f51",
-    "@dxos/react-ui-menu": "0.8.4-main.52d7546f51",
-    "@dxos/react-ui-mosaic": "0.8.4-main.52d7546f51",
-    "@dxos/react-ui-searchlist": "0.8.4-main.52d7546f51",
-    "@dxos/schema": "0.8.4-main.52d7546f51",
-    "@dxos/util": "0.8.4-main.52d7546f51",
-    "@dxos/react-ui-stack": "0.8.4-main.52d7546f51",
-    "@dxos/app-toolkit": "0.8.4-main.52d7546f51"
+    "@dxos/app-framework": "0.8.4-main.6fa680abb7",
+    "@dxos/async": "0.8.4-main.6fa680abb7",
+    "@dxos/app-toolkit": "0.8.4-main.6fa680abb7",
+    "@dxos/log": "0.8.4-main.6fa680abb7",
+    "@dxos/echo": "0.8.4-main.6fa680abb7",
+    "@dxos/operation": "0.8.4-main.6fa680abb7",
+    "@dxos/plugin-graph": "0.8.4-main.6fa680abb7",
+    "@dxos/react-ui-menu": "0.8.4-main.6fa680abb7",
+    "@dxos/react-ui-mosaic": "0.8.4-main.6fa680abb7",
+    "@dxos/react-ui-attention": "0.8.4-main.6fa680abb7",
+    "@dxos/react-ui-searchlist": "0.8.4-main.6fa680abb7",
+    "@dxos/react-ui-stack": "0.8.4-main.6fa680abb7",
+    "@dxos/schema": "0.8.4-main.6fa680abb7",
+    "@dxos/util": "0.8.4-main.6fa680abb7"
   },
   "devDependencies": {
     "@types/react": "~19.2.7",
@@ -51,24 +52,24 @@
     "effect": "3.19.16",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "7.1.9",
-    "@dxos/app-graph": "0.8.4-main.52d7546f51",
-    "@dxos/plugin-preview": "0.8.4-main.52d7546f51",
-    "@dxos/plugin-client": "0.8.4-main.52d7546f51",
-    "@dxos/plugin-search": "0.8.4-main.52d7546f51",
-    "@dxos/plugin-space": "0.8.4-main.52d7546f51",
-    "@dxos/plugin-testing": "0.8.4-main.52d7546f51",
-    "@dxos/react-ui": "0.8.4-main.52d7546f51",
-    "@dxos/storybook-utils": "0.8.4-main.52d7546f51",
-    "@dxos/schema": "0.8.4-main.52d7546f51",
-    "@dxos/ui-theme": "0.8.4-main.52d7546f51"
+    "vite": "^7.1.11",
+    "@dxos/app-graph": "0.8.4-main.6fa680abb7",
+    "@dxos/plugin-client": "0.8.4-main.6fa680abb7",
+    "@dxos/plugin-preview": "0.8.4-main.6fa680abb7",
+    "@dxos/plugin-search": "0.8.4-main.6fa680abb7",
+    "@dxos/plugin-testing": "0.8.4-main.6fa680abb7",
+    "@dxos/plugin-space": "0.8.4-main.6fa680abb7",
+    "@dxos/react-ui": "0.8.4-main.6fa680abb7",
+    "@dxos/storybook-utils": "0.8.4-main.6fa680abb7",
+    "@dxos/schema": "0.8.4-main.6fa680abb7",
+    "@dxos/ui-theme": "0.8.4-main.6fa680abb7"
   },
   "peerDependencies": {
     "effect": "3.19.16",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.52d7546f51",
-    "@dxos/ui-theme": "0.8.4-main.52d7546f51"
+    "@dxos/react-ui": "0.8.4-main.6fa680abb7",
+    "@dxos/ui-theme": "0.8.4-main.6fa680abb7"
   },
   "publishConfig": {
     "access": "public"

package/src/capabilities/operation-resolver/operation-resolver.ts

@@ -5,21 +5,14 @@
 import * as Effect from 'effect/Effect';
 
 import { Capabilities, Capability } from '@dxos/app-framework';
-import { LayoutOperation } from '@dxos/app-toolkit';
+import { getCompanionVariant, LayoutOperation, isPinnedWorkspace } from '@dxos/app-toolkit';
 import { Operation, OperationResolver } from '@dxos/operation';
-import { ATTENDABLE_PATH_SEPARATOR } from '@dxos/react-ui-attention';
 
 import { type SimpleLayoutState, SimpleLayoutState as SimpleLayoutStateCapability } from '../../types';
 
 /** Maximum number of items to keep in navigation history. */
 const MAX_HISTORY_LENGTH = 50;
 
-/** Parse entry ID to extract primary ID and variant. */
-const parseEntryId = (entryId: string) => {
-  const [id, variant] = entryId.split(ATTENDABLE_PATH_SEPARATOR);
-  return { id, variant };
-};
-
 export default Capability.makeModule(
   Effect.fnUntraced(function* () {
     const registry = yield* Capability.get(Capabilities.AtomRegistry);
@@ -51,6 +44,7 @@ export default Capability.makeModule(
       //
       // UpdateComplementary - Controls companion drawer.
       //
+      // TODO(wittjosiah): Not sure if we should be using this for the drawer.
       OperationResolver.make({
         operation: LayoutOperation.UpdateComplementary,
         handler: Effect.fnUntraced(function* (input) {
@@ -59,6 +53,13 @@ export default Capability.makeModule(
               ...state,
               drawerState: 'closed',
             }));
+          } else if (input.subject) {
+            const variant = getCompanionVariant(input.subject);
+            updateState((state) => ({
+              ...state,
+              companionVariant: variant,
+              drawerState: input.state === 'expanded' ? 'expanded' : 'open',
+            }));
           }
         }),
       }),
@@ -116,7 +117,7 @@ export default Capability.makeModule(
             ...state,
             // TODO(wittjosiah): This is a hack to prevent the previous deck from being set for pinned items.
             //  Ideally this should be worked into the data model in a generic way.
-            previousWorkspace: !state.workspace.startsWith('!') ? state.workspace : state.previousWorkspace,
+            previousWorkspace: !isPinnedWorkspace(state.workspace) ? state.workspace : state.previousWorkspace,
             workspace: input.subject,
             active: undefined,
             // Clear history when switching workspaces.
@@ -145,32 +146,16 @@ export default Capability.makeModule(
         operation: LayoutOperation.Open,
         handler: Effect.fnUntraced(function* (input) {
           const id = input.subject[0];
-          const { id: primaryId, variant } = parseEntryId(id);
-          const state = getState();
-
-          // Only treat as companion when opening a variant of the current workspace/active (e.g. object~comments).
-          // IDs like settings~spaceId are alternate-tree nodes and should navigate main content, not open the drawer.
-          // TODO(wittjosiah): Factor out the change-companion operation from deck to a common layout operation.
-          const isCompanionOfCurrent = variant && (primaryId === state.workspace || primaryId === state.active);
-          if (isCompanionOfCurrent) {
-            updateState((state) => ({
+          updateState((state) => {
+            const newHistory = state.active ? [...state.history, state.active] : state.history;
+            const trimmedHistory =
+              newHistory.length > MAX_HISTORY_LENGTH ? newHistory.slice(-MAX_HISTORY_LENGTH) : newHistory;
+            return {
               ...state,
-              companionVariant: variant,
-              drawerState: state.drawerState === 'closed' || !state.drawerState ? 'open' : state.drawerState,
-            }));
-          } else {
-            // Regular navigation - update active and history (use full id for alternate-tree nodes).
-            updateState((state) => {
-              const newHistory = state.active ? [...state.history, state.active] : state.history;
-              const trimmedHistory =
-                newHistory.length > MAX_HISTORY_LENGTH ? newHistory.slice(-MAX_HISTORY_LENGTH) : newHistory;
-              return {
-                ...state,
-                active: id,
-                history: trimmedHistory,
-              };
-            });
-          }
+              active: id,
+              history: trimmedHistory,
+            };
+          });
         }),
       }),
 

package/src/capabilities/react-surface/react-surface.tsx

@@ -9,7 +9,7 @@ import { Capabilities, Capability } from '@dxos/app-framework';
 import { Surface } from '@dxos/app-framework/ui';
 import { Node } from '@dxos/plugin-graph';
 
-import { Home, Workspace } from '../../components';
+import { Home, NavBranch } from '../../components';
 import { meta } from '../../meta';
 
 type SurfaceData = {
@@ -23,18 +23,20 @@ export default Capability.makeModule(() =>
   Effect.succeed(
     Capability.contributes(Capabilities.ReactSurface, [
       Surface.create({
-        id: `${meta.id}/home`,
+        id: `${meta.id}.home`,
         role: 'article',
         filter: (data): data is SurfaceData => data.attendableId === Node.RootId,
         component: () => <Home />,
       }),
       Surface.create({
-        id: `${meta.id}/workspace-article`,
+        id: `${meta.id}.nav-branch`,
         role: 'article',
         position: 'fallback',
-        filter: (data): data is SurfaceData =>
-          ALLOWED_DISPOSITIONS.includes((data.properties as Record<string, any>)?.disposition),
-        component: ({ data }) => <Workspace id={data.attendableId} />,
+        filter: (data): data is SurfaceData => {
+          const props = data.properties as Record<string, any>;
+          return ALLOWED_DISPOSITIONS.includes(props?.disposition) || props?.role === 'branch';
+        },
+        component: ({ data }) => <NavBranch id={data.attendableId} />,
       }),
     ]),
   ),

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

@@ -5,17 +5,16 @@
 import * as Effect from 'effect/Effect';
 
 import { Capabilities, Capability } from '@dxos/app-framework';
-import { LayoutOperation } from '@dxos/app-toolkit';
+import { LayoutOperation, fromUrlPath, getWorkspaceFromPath, toUrlPath } 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.
+ * URL paths map directly to qualified graph IDs with the leading `root` segment stripped.
+ * Root is represented as `/`.
  *
  * On mobile Tauri, also listens for deep links via the deep-link plugin.
  */
@@ -25,38 +24,33 @@ export default Capability.makeModule(
 
     /**
      * Handle navigation from a pathname.
-     * Parses path and updates state accordingly.
+     * Restores the qualified graph ID and dispatches layout operations.
      */
     const handlePathNavigation = (pathname: string) => {
       log.info('[UrlHandler] Navigating to path', { pathname });
 
-      // Parse URL segments: /{workspace}/{active}
-      const [_, nextWorkspace, nextActive] = pathname.split('/');
+      const qualifiedId = fromUrlPath(pathname);
+      const workspace = getWorkspaceFromPath(qualifiedId);
 
-      // Determine target workspace (empty or 'root' means Node.RootId).
-      const targetWorkspace = !nextWorkspace || nextWorkspace === 'root' ? Node.RootId : nextWorkspace;
+      invokeSync(LayoutOperation.SwitchWorkspace, { subject: workspace });
 
-      // Navigate via operations (they will update state accordingly).
-      invokeSync(LayoutOperation.SwitchWorkspace, { subject: targetWorkspace });
-      if (nextActive) {
-        invokeSync(LayoutOperation.Open, { subject: [nextActive] });
+      const activeId = qualifiedId !== workspace ? qualifiedId : undefined;
+      if (activeId) {
+        invokeSync(LayoutOperation.Open, { subject: [activeId] });
       }
     };
 
     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 });
@@ -65,7 +59,6 @@ export default Capability.makeModule(
             }
           }
 
-          // Listen for deep links while app is running.
           unlistenDeepLink = await onOpenUrl((urls) => {
             log.info('[UrlHandler] Deep links received', { urls });
             for (const url of urls) {
@@ -82,18 +75,16 @@ export default Capability.makeModule(
       }).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);
+        const path = active ? toUrlPath(active) : toUrlPath(workspace);
         if (window.location.pathname !== path) {
           history.pushState(null, '', `${path}${window.location.search}`);
         }
@@ -110,27 +101,12 @@ export default Capability.makeModule(
   }),
 );
 
-// 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.
  */

package/src/components/ContentError.stories.tsx

@@ -4,28 +4,29 @@
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 
+import { ErrorFallback } from '@dxos/react-ui';
 import { withTheme } from '@dxos/react-ui/testing';
 
 import { translations } from '../translations';
 
-import { ContentError } from './ContentError';
-
 const meta = {
-  title: 'plugins/plugin-simple-layout/ContentError',
-  component: ContentError,
+  title: 'plugins/plugin-simple-layout/components/ErrorFallback',
+  component: ErrorFallback,
   decorators: [withTheme()],
   parameters: {
     layout: 'centered',
     translations,
   },
-} satisfies Meta<typeof ContentError>;
+} satisfies Meta<typeof ErrorFallback>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-  args: {},
+  args: {
+    error: new Error('An unexpected error occurred'),
+  },
 };
 
 export const WithError: Story = {

package/src/components/{ContentLoading.stories.tsx → ContentLoading/ContentLoading.stories.tsx}

@@ -9,7 +9,7 @@ import { withTheme } from '@dxos/react-ui/testing';
 import { ContentLoading } from './ContentLoading';
 
 const meta = {
-  title: 'plugins/plugin-simple-layout/ContentLoading',
+  title: 'plugins/plugin-simple-layout/components/ContentLoading',
   component: ContentLoading,
   decorators: [withTheme()],
   parameters: {

package/src/components/{ContentLoading.tsx → ContentLoading/ContentLoading.tsx}

@@ -6,5 +6,5 @@ import React from 'react';
 
 // TODO(burdon): Show skeleton: https://github.com/dxos/dxos/issues/8259
 export const ContentLoading = () => {
-  return <div role='none' className='grid place-items-center attention-surface' />;
+  return <div role='none' className='grid place-items-center dx-attention-surface' />;
 };

package/src/components/ContentLoading/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './ContentLoading';

package/src/components/Dialog/Dialog.tsx

@@ -6,9 +6,9 @@ import React from 'react';
 
 import { Surface } from '@dxos/app-framework/ui';
 import { AlertDialog, Dialog as NaturalDialog } from '@dxos/react-ui';
+import { ErrorFallback } from '@dxos/react-ui';
 
 import { useSimpleLayoutState } from '../../hooks';
-import { ContentError } from '../ContentError';
 
 export const Dialog = () => {
   const { state, updateState } = useSimpleLayoutState();
@@ -23,14 +23,14 @@ export const Dialog = () => {
       onOpenChange={(nextOpen) => updateState((state) => ({ ...state, dialogOpen: nextOpen }))}
     >
       {state.dialogBlockAlign === 'end' ? (
-        <Surface.Surface role='dialog' data={state.dialogContent} limit={1} fallback={ContentError} />
+        <Surface.Surface role='dialog' data={state.dialogContent} limit={1} fallback={ErrorFallback} />
       ) : (
         <DialogOverlay
           blockAlign={state.dialogBlockAlign}
           classNames={state.dialogOverlayClasses}
           style={state.dialogOverlayStyle}
         >
-          <Surface.Surface role='dialog' data={state.dialogContent} limit={1} fallback={ContentError} />
+          <Surface.Surface role='dialog' data={state.dialogContent} limit={1} fallback={ErrorFallback} />
         </DialogOverlay>
       )}
     </DialogRoot>

package/src/components/Home/Home.tsx

@@ -8,14 +8,15 @@ 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 { Avatar, Icon, Panel, ScrollArea, Toolbar, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Card } from '@dxos/react-ui';
+import { Mosaic, type MosaicStackTileComponent } 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';
+import { useExpandPath } from '../hooks';
 
 export type HomeProps = {};
 
@@ -27,7 +28,7 @@ export const Home = (_: HomeProps) => {
   const userAccountItem = useItemsByDisposition('user-account')[0];
   const pinnedItems = useItemsByDisposition('pin-end', true);
   const workspaceItems = useItemsByDisposition('workspace');
-  useLoadDescendents(Node.RootId);
+  useExpandPath(Node.RootId);
 
   const items = useMemo(
     () => [...(userAccountItem ? [userAccountItem] : []), ...pinnedItems, ...workspaceItems],
@@ -40,26 +41,31 @@ export const Home = (_: HomeProps) => {
   });
 
   return (
-    <Layout.Main toolbar>
-      <SearchList.Root onSearch={handleSearch}>
-        <Toolbar.Root>
-          <SearchList.Input placeholder={t('search placeholder')} autoFocus />
-        </Toolbar.Root>
-        <SearchList.Content>
-          <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>
-    </Layout.Main>
+    <SearchList.Root onSearch={handleSearch}>
+      <Panel.Root>
+        <Panel.Toolbar asChild>
+          <Toolbar.Root>
+            <SearchList.Input placeholder={t('search placeholder')} autoFocus />
+          </Toolbar.Root>
+        </Panel.Toolbar>
+        <Panel.Content asChild>
+          <SearchList.Content>
+            <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>
+        </Panel.Content>
+      </Panel.Root>
+    </SearchList.Root>
   );
 };
 
-const WorkspaceTile: StackTileComponent<Node.Node> = ({ data }) => {
+const WorkspaceTile: MosaicStackTileComponent<Node.Node> = (props) => {
+  const data = props.data;
   const { t } = useTranslation(meta.id);
   const { invokePromise } = useOperationInvoker();
   const { selectedValue, registerItem, unregisterItem } = useSearchListItem();
@@ -67,7 +73,7 @@ const WorkspaceTile: StackTileComponent<Node.Node> = ({ data }) => {
   const isSelected = selectedValue === data.id;
   const cardRef = useRef<HTMLDivElement>(null);
 
-  useLoadDescendents(data.id);
+  useExpandPath(data.id);
 
   const handleSelect = useCallback(
     () => invokePromise(LayoutOperation.SwitchWorkspace, { subject: data.id }),
@@ -96,7 +102,7 @@ const WorkspaceTile: StackTileComponent<Node.Node> = ({ data }) => {
       fullWidth
       tabIndex={-1} // TODO(burdon): Use Mosaic.Focus.
       data-selected={isSelected}
-      classNames={mx('dx-focus-ring', isSelected && 'bg-hoverOverlay')}
+      classNames={mx('dx-focus-ring', isSelected && 'bg-hover-overlay')}
       onClick={handleSelect}
       ref={cardRef}
     >
@@ -126,7 +132,7 @@ const filterItems = (node: Node.Node, disposition: string) => {
 /** Returns root-level items filtered by disposition. */
 const useItemsByDisposition = (disposition: string, sort = false) => {
   const { graph } = useAppGraph();
-  const connections = useConnections(graph, Node.RootId);
+  const connections = useConnections(graph, Node.RootId, 'child');
   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

@@ -6,7 +6,7 @@ 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 { Flex, Input, Panel, Splitter, type SplitterMode, Toolbar } from '@dxos/react-ui';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { MobileLayout, type MobileLayoutRootProps } from './MobileLayout';
@@ -54,20 +54,24 @@ const WithKeyboard = ({ children }: PropsWithChildren) => {
   return <div className='h-screen relative'>{children}</div>;
 };
 
-const Panel = ({ children, label }: PropsWithChildren<{ label: string }>) => {
+const StoryPanel = ({ 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>
+    <Panel.Root>
+      <Panel.Toolbar asChild>
+        <Toolbar.Root>
+          {label}
+          <Toolbar.Separator />
+          {children}
+        </Toolbar.Root>
+      </Panel.Toolbar>
+      <Panel.Content asChild>
+        <Flex column classNames='p-1'>
+          <Input.Root>
+            <Input.TextInput />
+          </Input.Root>
+        </Flex>
+      </Panel.Content>
+    </Panel.Root>
   );
 };
 
@@ -85,21 +89,21 @@ const DefaultStory = () => {
         <MobileLayout.Panel safe={{ top: true, bottom: splitterMode === 'upper' }}>
           <Splitter.Root mode={splitterMode} ratio={0.5}>
             <Splitter.Panel position='upper'>
-              <Panel label='Main'>
+              <StoryPanel label='Main'>
                 {splitterMode === 'upper' && (
                   <Toolbar.IconButton icon='ph--plus--regular' label='Open' onClick={() => setSplitterMode('both')} />
                 )}
-              </Panel>
+              </StoryPanel>
             </Splitter.Panel>
             <Splitter.Panel position='lower'>
-              <Panel label='Drawer'>
+              <StoryPanel 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>
+              </StoryPanel>
             </Splitter.Panel>
           </Splitter.Root>
         </MobileLayout.Panel>
@@ -109,7 +113,7 @@ const DefaultStory = () => {
 };
 
 const meta: Meta<MobileLayoutRootProps> = {
-  title: 'plugins/plugin-simple-layout/MobileLayout',
+  title: 'plugins/plugin-simple-layout/components/MobileLayout',
   component: MobileLayout.Root,
   render: DefaultStory,
   decorators: [withTheme(), withLayout({ layout: 'column', classNames: 'relative' })],

package/src/components/MobileLayout/MobileLayout.tsx

@@ -54,7 +54,7 @@ const MobileLayoutRoot = forwardRef<HTMLDivElement, MobileLayoutRootProps>(
           {...props}
           role='none'
           style={{
-            transition: `block-size ${transition}ms ease-out`,
+            transition: `h-size ${transition}ms ease-out`,
             blockSize: 'calc(100vh - var(--kb-height, 0px))',
           }}
           className={mx('absolute top-0 left-0 right-0 flex flex-col', classNames)}
@@ -95,7 +95,7 @@ const MobileLayoutPanel = forwardRef<HTMLDivElement, MobileLayoutPanelProps>(
           paddingTop: safe?.top ? 'env(safe-area-inset-top)' : undefined,
           paddingBottom: safe?.bottom ? `calc((1 - var(--kb-open, 0)) * env(safe-area-inset-bottom))` : undefined,
         }}
-        className={mx('relative bs-full flex flex-col overflow-hidden', classNames)}
+        className={mx('relative h-full flex flex-col overflow-hidden', classNames)}
         ref={forwardedRef}
       >
         {children}