@dxos/plugin-simple-layout 0.8.4-main.2244d791bb → 0.8.4-main.422d1c7879

package/src/components/Home/Home.tsx

@@ -8,14 +8,16 @@ 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 MosaicStackTileComponent } from '@dxos/react-ui-mosaic';
-import { SearchList, useSearchListItem, useSearchListResults } from '@dxos/react-ui-searchlist';
+import { Avatar, Icon, ScrollArea, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Card } from '@dxos/react-ui';
+import { Mosaic, type MosaicStackTileComponent } from '@dxos/react-ui-mosaic';
+import { SearchPanel, useSearchListItem, useSearchListResults } from '@dxos/react-ui-search';
 import { mx } from '@dxos/ui-theme';
-import { byPosition } from '@dxos/util';
+import { byPosition, getHostPlatform, isTauri } from '@dxos/util';
 
-import { meta } from '../../meta';
-import { useLoadDescendents } from '../hooks';
+import { meta } from '#meta';
+
+import { useExpandPath } from '../hooks';
 
 export type HomeProps = {};
 
@@ -27,7 +29,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],
@@ -39,23 +41,24 @@ export const Home = (_: HomeProps) => {
     extract: (node) => toLocalizedString(node.properties.label, t),
   });
 
+  const autoFocus = !isTauri() || getHostPlatform() !== 'ios';
+
   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>
+    <SearchPanel onSearch={handleSearch}>
+      <Mosaic.Container asChild>
+        <ScrollArea.Root centered padding thin>
+          <ScrollArea.Viewport>
+            <Mosaic.Stack
+              classNames='gap-1'
+              draggable={false}
+              items={results}
+              getId={(item) => item.id}
+              Tile={WorkspaceTile}
+            />
+          </ScrollArea.Viewport>
+        </ScrollArea.Root>
+      </Mosaic.Container>
+    </SearchPanel>
   );
 };
 
@@ -68,7 +71,7 @@ const WorkspaceTile: MosaicStackTileComponent<Node.Node> = (props) => {
   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 }),
@@ -97,21 +100,21 @@ const WorkspaceTile: MosaicStackTileComponent<Node.Node> = (props) => {
       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}
     >
-      <Card.Toolbar density='coarse'>
+      <Card.Toolbar density='fine'>
         <Avatar.Root>
           <Avatar.Content
             icon={data.properties.icon}
             hue={data.properties.hue}
             hueVariant='transparent'
             variant='square'
-            size={12}
+            size={8}
             fallback={name}
           />
-          <Avatar.Label>{name}</Avatar.Label>
+          <Avatar.Label classNames='cursor-pointer'>{name}</Avatar.Label>
           <Icon icon='ph--caret-right--regular' />
         </Avatar.Root>
       </Card.Toolbar>
@@ -127,7 +130,9 @@ 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 filtered = connections.filter((node) => filterItems(node, disposition));
-  return sort ? filtered.toSorted((a, b) => byPosition(a.properties, b.properties)) : filtered;
+  const connections = useConnections(graph, Node.RootId, 'child');
+  return useMemo(() => {
+    const filtered = connections.filter((node) => filterItems(node, disposition));
+    return sort ? filtered.toSorted((a, b) => byPosition(a.properties, b.properties)) : filtered;
+  }, [connections, disposition, sort]);
 };

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

@@ -6,16 +6,16 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 
 import { withTheme } from '@dxos/react-ui/testing';
 
-import { ContentLoading } from './ContentLoading';
+import { Loading } from './Loading';
 
 const meta = {
-  title: 'plugins/plugin-simple-layout/ContentLoading',
-  component: ContentLoading,
+  title: 'plugins/plugin-simple-layout/components/Loading',
+  component: Loading,
   decorators: [withTheme()],
   parameters: {
     layout: 'centered',
   },
-} satisfies Meta<typeof ContentLoading>;
+} satisfies Meta<typeof Loading>;
 
 export default meta;
 

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

@@ -5,6 +5,6 @@
 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' />;
+export const Loading = () => {
+  return <div role='none' className='grid place-items-center dx-attention-surface' />;
 };

package/src/components/Loading/index.ts

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

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 { Column, 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,52 +54,60 @@ 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>
+        <Column.Root gutter='xs' classNames='py-form-chrome'>
+          <Column.Center>
+            <Flex column>
+              <Input.Root>
+                <Input.TextInput placeholder={label} />
+              </Input.Root>
+            </Flex>
+          </Column.Center>
+        </Column.Root>
+      </Panel.Content>
+    </Panel.Root>
   );
 };
 
 const DefaultStory = () => {
-  const [splitterMode, setSplitterMode] = useState<SplitterMode>('upper');
+  const [splitterMode, setSplitterMode] = useState<SplitterMode>('top');
   const [keyboardOpen, setKeyboardOpen] = useState(false);
 
   useEffect(() => {
-    setSplitterMode(splitterMode === 'both' ? 'lower' : splitterMode);
+    setSplitterMode(splitterMode === 'split' ? 'bottom' : splitterMode);
   }, [keyboardOpen]);
 
   return (
     <WithKeyboard>
       <MobileLayout.Root onKeyboardOpenChange={setKeyboardOpen}>
-        <MobileLayout.Panel safe={{ top: true, bottom: splitterMode === 'upper' }}>
+        <MobileLayout.Panel safe={{ top: true, bottom: splitterMode === 'top' }}>
           <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')} />
+            <Splitter.Panel position='top'>
+              <StoryPanel label='Main'>
+                {splitterMode === 'top' && (
+                  <Toolbar.IconButton icon='ph--plus--regular' label='Open' onClick={() => setSplitterMode('split')} />
                 )}
-              </Panel>
+              </StoryPanel>
             </Splitter.Panel>
-            <Splitter.Panel position='lower'>
-              <Panel label='Drawer'>
+            <Splitter.Panel position='bottom'>
+              <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'))}
+                  icon={splitterMode === 'bottom' ? 'ph--arrow-down--regular' : 'ph--arrow-up--regular'}
+                  label={splitterMode === 'bottom' ? 'Collapse' : 'Expand'}
+                  onClick={() => setSplitterMode((splitterMode) => (splitterMode === 'split' ? 'bottom' : 'split'))}
                 />
-                <Toolbar.IconButton icon='ph--x--regular' label='Close' onClick={() => setSplitterMode('upper')} />
-              </Panel>
+                <Toolbar.IconButton icon='ph--x--regular' label='Close' onClick={() => setSplitterMode('top')} />
+              </StoryPanel>
             </Splitter.Panel>
           </Splitter.Root>
         </MobileLayout.Panel>
@@ -109,7 +117,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

@@ -3,14 +3,14 @@
 //
 
 import { createContext } from '@radix-ui/react-context';
-import React, { type PropsWithChildren, forwardRef, useEffect, useState } from 'react';
+import React, { type PropsWithChildren, forwardRef, useEffect, useLayoutEffect, useState } from 'react';
 
 import { addEventListener, combine } from '@dxos/async';
 import { log } from '@dxos/log';
 import { type ThemedClassName } from '@dxos/react-ui';
 import { mx } from '@dxos/ui-theme';
 
-// TODO(burdon): Move into @dxos/react-ui?
+import { useDebugLog } from '../DebugOverlay';
 
 const MOBILE_LAYOUT_NAME = 'MobileLayout';
 const MOBILE_LAYOUT_ROOT_NAME = 'MobileLayout.Root';
@@ -42,11 +42,15 @@ type MobileLayoutRootProps = ThemedClassName<
  */
 // TODO(burdon): Should this be ios-only?
 const MobileLayoutRoot = forwardRef<HTMLDivElement, MobileLayoutRootProps>(
-  ({ classNames, children, transition = 250, onKeyboardOpenChange, ...props }, forwardedRef) => {
+  ({ classNames, children, transition = 500, onKeyboardOpenChange, ...props }, forwardedRef) => {
     const { open: keyboardOpen } = useIOSKeyboard();
-    useAutoScroll();
-    useEffect(() => onKeyboardOpenChange?.(keyboardOpen), [onKeyboardOpenChange, keyboardOpen]);
     useLockBodyScroll(keyboardOpen);
+    useAutoScroll();
+
+    // Fire synchronously after DOM mutation (before paint) so SimpleLayout's Splitter mode
+    // change is batched into the same paint as the keyboard open state change, preventing
+    // intermediate render frames from showing an un-adjusted layout.
+    useLayoutEffect(() => onKeyboardOpenChange?.(keyboardOpen), [keyboardOpen, onKeyboardOpenChange]);
 
     return (
       <MobileLayoutProvider keyboardOpen={keyboardOpen}>
@@ -54,10 +58,11 @@ const MobileLayoutRoot = forwardRef<HTMLDivElement, MobileLayoutRootProps>(
           {...props}
           role='none'
           style={{
-            transition: `block-size ${transition}ms ease-out`,
-            blockSize: 'calc(100vh - var(--kb-height, 0px))',
+            height: 'calc(100vh - var(--kb-height, 0px))',
+            transition: `height ${keyboardOpen ? 0 : transition}ms ease-out`,
+            // transition: `height ${animationDuration}ms ease-out`,
           }}
-          className={mx('absolute top-0 left-0 right-0 flex flex-col', classNames)}
+          className={mx('fixed top-0 left-0 right-0 grid overflow-hidden', classNames)}
           ref={forwardedRef}
         >
           {children}
@@ -95,7 +100,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(classNames)}
         ref={forwardedRef}
       >
         {children}
@@ -120,42 +125,62 @@ export { useMobileLayout };
 export type { MobileLayoutRootProps, MobileLayoutPanelProps };
 
 /**
- * Prevent auto-scroll when input is focused.
+ * Prevents iOS (WKWebView) from shifting the layout when the keyboard appears.
+ *
+ * Scroll events and window.scrollY stay at 0 in this WKWebView setup — the shift is
+ * caused by the browser's scroll-into-view for the focused input. We keep a window
+ * scroll reset as belt-and-suspenders, and also monitor container scroll events.
  */
 const useAutoScroll = () => {
+  // TODO(burdon): Remove debug logging.
+  const { dbg } = useDebugLog('useAutoScroll');
+
   useEffect(() => {
-    // Prevent auto-scroll when input is focused.
-    return addEventListener(
-      document,
-      'focus',
-      (event: FocusEvent) => {
-        const target = event.target as HTMLElement;
-        if (
-          target.tagName === 'INPUT' ||
-          target.tagName === 'TEXTAREA' ||
-          (target.tagName === 'DIV' && target.isContentEditable)
-        ) {
-          // Prevent default focus behavior.
-          event.preventDefault();
-
-          // Manually focus without scroll.
-          target.focus({ preventScroll: true });
-
-          // Lock current scroll position.
-          const scrollX = window.scrollX;
-          const scrollY = window.scrollY;
-          requestAnimationFrame(() => {
-            window.scrollTo(scrollX, scrollY);
-          });
-
-          // TODO(burdon): Scroll to position in parent; this may need to be via an intent,
-          //  since it may be plugin-specific (e.g., codemirror document.)
-        }
-      },
-      // Important: focus events don't bubble, so capture phase is required.
-      { capture: true },
+    const resetScroll = () => {
+      if (window.scrollX !== 0 || window.scrollY !== 0) {
+        window.scrollTo(0, 0);
+      }
+    };
+
+    const detectContainerScroll = (event: Event) => {
+      const el = event.target as HTMLElement;
+      if (el === document.documentElement || el === document.body) {
+        return;
+      }
+
+      dbg(`scroll: ${el.tagName}.${Array.from(el.classList).slice(0, 2).join('.')} top=${el.scrollTop.toFixed(0)}`);
+    };
+
+    return combine(
+      addEventListener(window, 'scroll', resetScroll),
+      window.visualViewport ? addEventListener(window.visualViewport, 'scroll' as any, resetScroll) : () => {},
+
+      // TODO(burdon): Remove debug logging.
+      addEventListener(document, 'scroll', detectContainerScroll as EventListener, { capture: true } as any),
+
+      // Prevent focus-triggered scroll-into-view on inputs.
+      (() => {
+        let focusingWithPreventScroll = false;
+        return addEventListener(
+          document,
+          'focus',
+          (event: FocusEvent) => {
+            if (focusingWithPreventScroll) {
+              return;
+            }
+
+            const target = event.target as HTMLElement;
+            if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
+              focusingWithPreventScroll = true;
+              target.focus({ preventScroll: true });
+              focusingWithPreventScroll = false;
+            }
+          },
+          { capture: true },
+        );
+      })(),
     );
-  }, []);
+  }, [dbg]);
 };
 
 /**
@@ -231,6 +256,8 @@ const useLockBodyScroll = (enabled: boolean) => {
 type IOSKeyboard = {
   open: boolean;
   height: number;
+  /** Native keyboard animation duration in ms, from the iOS keyboard event. */
+  duration: number | undefined;
 };
 
 /**
@@ -263,10 +290,13 @@ type IOSKeyboard = {
  * Falls back to VisualViewport API on other platforms.
  */
 const useIOSKeyboard = (): IOSKeyboard => {
+  const { dbg } = useDebugLog('useIOSKeyboard');
+
   const [open, setOpen] = useState(false);
   const [height, setHeight] = useState(0);
+  const [duration, setDuration] = useState<number | undefined>(undefined);
 
-  // Detect keybaord state.
+  // Detect keyboard state.
   useEffect(() => {
     const viewport = window.visualViewport;
     if (!viewport) {
@@ -276,30 +306,69 @@ const useIOSKeyboard = (): IOSKeyboard => {
     // Handler for VisualViewport resize (fallback for non-iOS).
     const initialHeight = viewport.height ?? window.innerHeight;
 
-    const updateState = (keyboardHeight: number, keyboardOpen: boolean) => {
+    const updateState = (keyboardHeight: number, keyboardOpen: boolean, animationDuration?: number) => {
       setOpen(keyboardOpen);
       setHeight(keyboardHeight);
+      setDuration(animationDuration);
 
       const vvh = initialHeight - keyboardHeight;
       document.documentElement.style.setProperty('--vvh', `${vvh}px`);
       document.documentElement.style.setProperty('--kb-height', `${keyboardHeight}px`);
       document.documentElement.style.setProperty('--kb-open', keyboardOpen ? '1' : '0');
-      log.info('viewport size', { initialHeight, vvh, keyboardHeight, keyboardOpen });
+      log.info('viewport size', { initialHeight, vvh, keyboardHeight, keyboardOpen, animationDuration });
     };
 
+    let rafId: number | undefined;
+
     return combine(
       // Handler for native iOS keyboard events (from KeyboardObserver.swift).
       addEventListener(
         window,
         'keyboard' as any,
         (event: CustomEvent<{ type: 'show' | 'hide'; height: number; duration: number }>) => {
-          const { type, height } = event.detail;
-          log.info('keyboard event', { type, height });
-          updateState(height, type === 'show');
+          const { type, height, duration } = event.detail;
+          // iOS KeyboardObserver.swift sends duration in seconds (e.g., 0.25). Convert to ms.
+          const durationMs = duration < 1 ? duration * 1000 : duration;
+
+          // TODO(burdon): Remove debug logging.
+          const vp = window.visualViewport;
+          dbg(
+            `kb:${type} h=${height} dur=${duration} scrollY=${window.scrollY} vpOffset=${vp?.offsetTop?.toFixed(0) ?? '?'}`,
+          );
+          log.info('keyboard event', { type, height, duration });
+
+          updateState(height, type === 'show', durationMs);
+
+          // RAF loop: monitor visualViewport.offsetTop and window.scrollY every frame.
+          // TODO(burdon): Remove debug logging.
+          const end = performance.now() + durationMs + 300;
+          let prevOffsetTop = vp?.offsetTop ?? 0;
+          let prevScrollY = window.scrollY;
+          const monitorFrame = () => {
+            const offsetTop = vp?.offsetTop ?? 0;
+            const scrollY = window.scrollY;
+            if (offsetTop !== prevOffsetTop || scrollY !== prevScrollY) {
+              dbg(`Δ vpOffset=${offsetTop.toFixed(0)} scrollY=${scrollY.toFixed(0)}`);
+              prevOffsetTop = offsetTop;
+              prevScrollY = scrollY;
+            }
+            if (scrollY !== 0) {
+              window.scrollTo(0, 0);
+            }
+            if (performance.now() < end) {
+              rafId = requestAnimationFrame(monitorFrame);
+            }
+          };
+          rafId = requestAnimationFrame(monitorFrame);
         },
       ),
+      () => {
+        if (rafId !== undefined) {
+          cancelAnimationFrame(rafId);
+        }
+      },
     );
-  }, []);
+  }, [dbg]);
 
-  return { open, height };
+  return { open, height, duration };
 };