@dxos/plugin-simple-layout 0.8.4-main.21d9917 → 0.8.4-main.2244d791bb

package/src/components/Dialog/Dialog.tsx

@@ -4,7 +4,7 @@
 
 import React from 'react';
 
-import { Surface } from '@dxos/app-framework/react';
+import { Surface } from '@dxos/app-framework/ui';
 import { AlertDialog, Dialog as NaturalDialog } from '@dxos/react-ui';
 
 import { useSimpleLayoutState } from '../../hooks';
@@ -20,17 +20,17 @@ export const Dialog = () => {
     <DialogRoot
       modal={state.dialogBlockAlign !== 'end'}
       open={state.dialogOpen}
-      onOpenChange={(nextOpen) => updateState((s) => ({ ...s, dialogOpen: nextOpen }))}
+      onOpenChange={(nextOpen) => updateState((state) => ({ ...state, dialogOpen: nextOpen }))}
     >
       {state.dialogBlockAlign === 'end' ? (
-        <Surface role='dialog' data={state.dialogContent} limit={1} fallback={ContentError} />
+        <Surface.Surface role='dialog' data={state.dialogContent} limit={1} fallback={ContentError} />
       ) : (
         <DialogOverlay
           blockAlign={state.dialogBlockAlign}
           classNames={state.dialogOverlayClasses}
           style={state.dialogOverlayStyle}
         >
-          <Surface role='dialog' data={state.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,11 +4,12 @@
 
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 
-import { Common } from '@dxos/app-framework';
-import { useAppGraph, useOperationInvoker } from '@dxos/app-framework/react';
+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, Toolbar, toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { Card, Layout, Mosaic, type StackTileComponent } from '@dxos/react-ui-mosaic';
+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 { mx } from '@dxos/ui-theme';
 import { byPosition } from '@dxos/util';
@@ -46,9 +47,11 @@ export const Home = (_: HomeProps) => {
         </Toolbar.Root>
         <SearchList.Content>
           <Mosaic.Container asChild>
-            <Mosaic.Viewport padding>
-              <Mosaic.Stack items={results} getId={(node) => node.id} Tile={WorkspaceTile} />
-            </Mosaic.Viewport>
+            <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>
@@ -56,26 +59,26 @@ export const Home = (_: HomeProps) => {
   );
 };
 
-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();
-  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: data.id }),
+    () => invokePromise(LayoutOperation.SwitchWorkspace, { subject: data.id }),
     [invokePromise, data.id],
   );
 
-  useLoadDescendents(data.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(data.id, ref.current, handleSelect);
+    if (cardRef.current) {
+      registerItem(data.id, cardRef.current, handleSelect);
     }
 
     return () => unregisterItem(data.id);
@@ -83,20 +86,20 @@ const WorkspaceTile: StackTileComponent<Node.Node> = ({ data }) => {
 
   // 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'
       fullWidth
       tabIndex={-1} // TODO(burdon): Use Mosaic.Focus.
       data-selected={isSelected}
       classNames={mx('dx-focus-ring', isSelected && 'bg-hoverOverlay')}
       onClick={handleSelect}
+      ref={cardRef}
     >
       <Card.Toolbar density='coarse'>
         <Avatar.Root>

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 = {};

package/src/components/MobileLayout/MobileLayout.tsx

@@ -0,0 +1,305 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { createContext } from '@radix-ui/react-context';
+import React, { type PropsWithChildren, forwardRef, useEffect, 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?
+
+const MOBILE_LAYOUT_NAME = 'MobileLayout';
+const MOBILE_LAYOUT_ROOT_NAME = 'MobileLayout.Root';
+const MOBILE_LAYOUT_PANEL_NAME = 'MobileLayout.Panel';
+
+//
+// Context
+//
+
+type MobileLayoutContextValue = {
+  keyboardOpen: boolean;
+};
+
+const [MobileLayoutProvider, useMobileLayout] = createContext<MobileLayoutContextValue>(MOBILE_LAYOUT_NAME);
+
+//
+// Root
+//
+
+type MobileLayoutRootProps = ThemedClassName<
+  PropsWithChildren<{
+    transition?: number;
+    onKeyboardOpenChange?: (nextState: boolean) => void;
+  }>
+>;
+
+/**
+ * Mobile layout root container that handles iOS keyboard detection.
+ */
+// TODO(burdon): Should this be ios-only?
+const MobileLayoutRoot = forwardRef<HTMLDivElement, MobileLayoutRootProps>(
+  ({ classNames, children, transition = 250, onKeyboardOpenChange, ...props }, forwardedRef) => {
+    const { open: keyboardOpen } = useIOSKeyboard();
+    useAutoScroll();
+    useEffect(() => onKeyboardOpenChange?.(keyboardOpen), [onKeyboardOpenChange, keyboardOpen]);
+    useLockBodyScroll(keyboardOpen);
+
+    return (
+      <MobileLayoutProvider keyboardOpen={keyboardOpen}>
+        <div
+          {...props}
+          role='none'
+          style={{
+            transition: `block-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)}
+          ref={forwardedRef}
+        >
+          {children}
+        </div>
+      </MobileLayoutProvider>
+    );
+  },
+);
+
+MobileLayoutRoot.displayName = MOBILE_LAYOUT_ROOT_NAME;
+
+//
+// Panel
+//
+
+type MobileLayoutPanelProps = ThemedClassName<
+  PropsWithChildren<{
+    safe?: {
+      top: boolean;
+      bottom: boolean;
+    };
+  }>
+>;
+
+/**
+ * Mobile layout panel that applies safe area insets.
+ */
+const MobileLayoutPanel = forwardRef<HTMLDivElement, MobileLayoutPanelProps>(
+  ({ classNames, children, safe, ...props }, forwardedRef) => {
+    return (
+      <div
+        {...props}
+        role='none'
+        style={{
+          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)}
+        ref={forwardedRef}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+
+MobileLayoutPanel.displayName = MOBILE_LAYOUT_PANEL_NAME;
+
+//
+// Exports
+//
+
+export const MobileLayout = {
+  Root: MobileLayoutRoot,
+  Panel: MobileLayoutPanel,
+};
+
+export { useMobileLayout };
+
+export type { MobileLayoutRootProps, MobileLayoutPanelProps };
+
+/**
+ * Prevent auto-scroll when input is focused.
+ */
+const 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 },
+    );
+  }, []);
+};
+
+/**
+ * Prevent iOS Safari viewport scroll when enabled.
+ * Setting overflow:hidden doesn't work on iOS, so we must preventDefault on touchmove events.
+ * Only allows scrolling if the target is within a scrollable container.
+ */
+const useLockBodyScroll = (enabled: boolean) => {
+  useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+
+    const isScrollable = (el: HTMLElement | null, axis: 'x' | 'y'): boolean => {
+      while (el && el !== document.body) {
+        const style = getComputedStyle(el);
+        if (axis === 'y') {
+          const overflow = style.overflowY;
+          if ((overflow === 'auto' || overflow === 'scroll') && el.scrollHeight > el.clientHeight) {
+            return true;
+          }
+        } else {
+          const overflow = style.overflowX;
+          if ((overflow === 'auto' || overflow === 'scroll') && el.scrollWidth > el.clientWidth) {
+            return true;
+          }
+        }
+
+        el = el.parentElement;
+      }
+
+      return false;
+    };
+
+    let touchStartX = 0;
+    let touchStartY = 0;
+
+    return combine(
+      // Record initial touch position.
+      addEventListener(
+        document,
+        'touchstart',
+        (event: TouchEvent) => {
+          const touch = event.touches[0];
+          touchStartX = touch.clientX;
+          touchStartY = touch.clientY;
+        },
+        { passive: true },
+      ),
+
+      // Prevent scrolling the viewport.
+      addEventListener(
+        document,
+        'touchmove',
+        (event: TouchEvent) => {
+          const touch = event.touches[0];
+          const dx = Math.abs(touch.clientX - touchStartX);
+          const dy = Math.abs(touch.clientY - touchStartY);
+          if (!isScrollable(event.target as HTMLElement, dx > dy ? 'x' : 'y')) {
+            event.preventDefault();
+          }
+        },
+        { passive: false },
+      ),
+    );
+  }, [enabled]);
+};
+
+//
+// Hooks
+//
+
+type IOSKeyboard = {
+  open: boolean;
+  height: number;
+};
+
+/**
+ * Mobile container that handles iOS keyboard layout adjustments.
+ *
+ * Uses two strategies for keyboard detection:
+ * 1. Tauri iOS: Native keyboard plugin for reliable height/animation events.
+ * 2. Web/PWA: visualViewport API as fallback.
+ *
+ * iPhone (portrait, points)
+ * - Without predictive bar:  ~291 pt
+ * - With predictive bar:     ~335 pt
+ * - With accessory view:     ~380–420 pt
+ *
+ * Example:
+ * - Viewport: 874 (entire screen)
+ * - SafeArea: 96 (62+34)
+ * - Main:     778
+ * - Keyboard: 318; 413 (incl. Input Accessory View)
+ *
+ * CSS Variables set on document.documentElement:
+ * --vvh: Visual viewport height (use as container height).
+ * --kb-height: Keyboard height in pixels.
+ * --kb-open: 1 when keyboard is open, 0 when closed.
+ *
+ * NOTE: By default when an input is selected on iOS the Input Accessory View is shown above the keyboard.
+ * This can be disabled by setting the `inputAccessoryView` property to `false`.
+ *
+ * On iOS (Tauri), listens for 'keyboard' CustomEvents dispatched by the native KeyboardObserver.swift.
+ * Falls back to VisualViewport API on other platforms.
+ */
+const useIOSKeyboard = (): IOSKeyboard => {
+  const [open, setOpen] = useState(false);
+  const [height, setHeight] = useState(0);
+
+  // Detect keybaord state.
+  useEffect(() => {
+    const viewport = window.visualViewport;
+    if (!viewport) {
+      return;
+    }
+
+    // Handler for VisualViewport resize (fallback for non-iOS).
+    const initialHeight = viewport.height ?? window.innerHeight;
+
+    const updateState = (keyboardHeight: number, keyboardOpen: boolean) => {
+      setOpen(keyboardOpen);
+      setHeight(keyboardHeight);
+
+      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 });
+    };
+
+    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');
+        },
+      ),
+    );
+  }, []);
+
+  return { open, height };
+};

package/src/components/MobileLayout/index.ts

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

package/src/components/Popover/Popover.tsx

@@ -5,7 +5,7 @@
 import { createContext } from '@radix-ui/react-context';
 import React, { type PropsWithChildren, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import { Surface } from '@dxos/app-framework/react';
+import { Surface } from '@dxos/app-framework/ui';
 import { Popover, type PopoverContentInteractOutsideEvent, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { Card } from '@dxos/react-ui-mosaic';
 
@@ -100,18 +100,18 @@ export const PopoverContent = () => {
         onEscapeKeyDown={handleInteractOutside}
       >
         <Popover.Viewport>
+          {state.popoverKind === 'base' && <Surface.Surface role='popover' data={state.popoverContent} limit={1} />}
           {state.popoverKind === 'card' && (
-            <Card.Root>
+            <Card.Root border={false} classNames='popover-card-max-width'>
               <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} />
+              <Surface.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>