@dxos/plugin-simple-layout 0.8.4-main.9735255 → 0.8.4-main.9be5663bfe

package/src/components/MobileLayout/MobileLayout.tsx

@@ -0,0 +1,374 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { createContext } from '@radix-ui/react-context';
+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';
+
+import { useDebugLog } from '../DebugOverlay';
+
+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 = 500, onKeyboardOpenChange, ...props }, forwardedRef) => {
+    const { open: keyboardOpen } = useIOSKeyboard();
+    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}>
+        <div
+          {...props}
+          role='none'
+          style={{
+            height: 'calc(100vh - var(--kb-height, 0px))',
+            transition: `height ${keyboardOpen ? 0 : transition}ms ease-out`,
+            // transition: `height ${animationDuration}ms ease-out`,
+          }}
+          className={mx('fixed top-0 left-0 right-0 grid overflow-hidden', 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(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 };
+
+/**
+ * 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(() => {
+    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]);
+};
+
+/**
+ * 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;
+  /** Native keyboard animation duration in ms, from the iOS keyboard event. */
+  duration: number | undefined;
+};
+
+/**
+ * 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 { dbg } = useDebugLog('useIOSKeyboard');
+
+  const [open, setOpen] = useState(false);
+  const [height, setHeight] = useState(0);
+  const [duration, setDuration] = useState<number | undefined>(undefined);
+
+  // Detect keyboard 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, 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, 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, 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, duration };
+};

package/src/components/MobileLayout/index.ts

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

package/src/components/NavBranch/NavBranch.tsx

@@ -0,0 +1,128 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { useAppGraph } from '@dxos/app-toolkit/ui';
+import { type Node, useConnections } from '@dxos/plugin-graph';
+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 { meta } from '#meta';
+
+import { useExpandPath } from '../hooks';
+
+export type NavBranchProps = {
+  id: string;
+};
+
+/**
+ * Renders the children of a graph branch node as a searchable mosaic list.
+ * Used for any node with `role: 'branch'` or a workspace disposition, including
+ * spaces, collection sections, type sections, and schema nodes.
+ */
+export const NavBranch = ({ id }: NavBranchProps) => {
+  const { t } = useTranslation(meta.id);
+  const { graph } = useAppGraph();
+
+  useExpandPath(id);
+
+  const children = useConnections(graph, id, 'child');
+
+  // TODO(wittjosiah): Move alternate-tree nodes to a non-child relation so they don't need filtering.
+  const visibleChildren = useMemo(
+    () =>
+      children.filter(
+        (node) => node.properties.disposition !== 'alternate-tree' && node.properties.disposition !== 'hidden',
+      ),
+    [children],
+  );
+
+  const { results, handleSearch } = useSearchListResults({
+    items: visibleChildren,
+    extract: (child) => toLocalizedString(child.properties.label, t),
+  });
+
+  return (
+    <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={NavBranchTile}
+            />
+          </ScrollArea.Viewport>
+        </ScrollArea.Root>
+      </Mosaic.Container>
+    </SearchPanel>
+  );
+};
+
+const NavBranchTile: MosaicStackTileComponent<Node.Node> = (props) => {
+  const data = props.data;
+  const { t } = useTranslation(meta.id);
+  const { invokePromise } = useOperationInvoker();
+  const ref = useRef<HTMLDivElement>(null);
+  const { selectedValue, registerItem, unregisterItem } = useSearchListItem();
+  const isSelected = selectedValue === data.id;
+
+  const name = toLocalizedString(data.properties.label, t);
+
+  const handleSelect = useCallback(
+    () => void invokePromise(LayoutOperation.Open, { subject: [data.id] }),
+    [invokePromise, data.id],
+  );
+
+  // Register this item with the search context.
+  useEffect(() => {
+    if (ref.current) {
+      registerItem(data.id, ref.current, handleSelect);
+    }
+
+    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' });
+    }
+  }, [isSelected]);
+
+  return (
+    <Card.Root
+      ref={ref}
+      role='button'
+      fullWidth
+      tabIndex={-1} // TODO(burdon): Use Mosaic.Focus.
+      data-selected={isSelected}
+      classNames={mx('dx-focus-ring cursor-pointer', isSelected && 'bg-hover-overlay')}
+      onClick={handleSelect}
+    >
+      <Card.Toolbar>
+        <Avatar.Root>
+          <Avatar.Content
+            hue={data.properties.hue}
+            icon={data.properties.icon}
+            hueVariant='transparent'
+            variant='square'
+            size={8}
+            fallback={name}
+          />
+          <Avatar.Label>{name}</Avatar.Label>
+          <Icon icon='ph--caret-right--regular' />
+        </Avatar.Root>
+      </Card.Toolbar>
+    </Card.Root>
+  );
+};

package/src/components/{Workspace → NavBranch}/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './Workspace';
+export * from './NavBranch';

package/src/components/Popover/Popover.tsx

@@ -5,12 +5,12 @@
 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';
+import { Card } from '@dxos/react-ui';
 
-import { useSimpleLayoutState } from '../../hooks';
-import { meta } from '../../meta';
+import { useSimpleLayoutState } from '#hooks';
+import { meta } from '#meta';
 
 const DEBOUNCE_DELAY = 40;
 
@@ -57,7 +57,6 @@ export const PopoverContent = () => {
   const { t } = useTranslation(meta.id);
   const { state, updateState } = useSimpleLayoutState();
   const { setOpen } = useLayoutPopoverContext('PopoverContent');
-
   const handleClose = useCallback(() => {
     setOpen(false);
     updateState((s) => ({
@@ -100,18 +99,20 @@ export const PopoverContent = () => {
         onEscapeKeyDown={handleInteractOutside}
       >
         <Popover.Viewport>
+          {state.popoverKind === 'base' && (
+            <Surface.Surface role='popover' data={state.popoverContent ?? undefined} limit={1} />
+          )}
           {state.popoverKind === 'card' && (
-            <Card.Root>
+            <Card.Root border={false} classNames='dx-card-popover'>
               <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.CloseIconButton onClick={handleClose} />
               </Card.Toolbar>
-              <Surface role='card--content' data={state.popoverContent} limit={1} />
+              <Surface.Surface role='card--content' data={state.popoverContent ?? undefined} limit={1} />
             </Card.Root>
           )}
-          {state.popoverKind === 'base' && <Surface role='popover' data={state.popoverContent} limit={1} />}
         </Popover.Viewport>
         <Popover.Arrow />
       </Popover.Content>