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

package/src/components/DebugOverlay/DebugOverlay.tsx

@@ -0,0 +1,96 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { createContext } from '@radix-ui/react-context';
+import React, { type PropsWithChildren, useCallback, useRef } from 'react';
+
+const DEBUG_OVERLAY_NAME = 'DebugOverlay';
+
+//
+// Context
+//
+
+type DebugOverlayContextValue = {
+  /** Log a timestamped message to the on-screen debug overlay. */
+  dbg: (msg: string) => void;
+};
+
+// Default to a no-op so hooks can call useDebugLog() safely outside of a provider.
+const [DebugOverlayProvider, useDebugLog] = createContext<DebugOverlayContextValue>(DEBUG_OVERLAY_NAME, {
+  dbg: () => {},
+});
+
+//
+// Root
+//
+
+type DebugOverlayRootProps = PropsWithChildren<{
+  /**
+   * When true (default), renders the on-screen log panel.
+   * Set to false to suppress the overlay while keeping the context available.
+   */
+  enabled?: boolean;
+  maxLines?: number;
+}>;
+
+/**
+ * Establishes a debug overlay context.
+ *
+ * When enabled, renders an on-screen monospaced log panel anchored just above
+ * the keyboard (via --kb-height CSS variable). Descendants can call
+ * useDebugLog() to obtain the dbg() function for logging.
+ *
+ * Intended for transient mobile debugging in the iOS Simulator where DevTools
+ * console output may not be accessible.
+ */
+const DebugOverlayRoot = ({ children, enabled = true, maxLines = 10 }: DebugOverlayRootProps) => {
+  const overlayRef = useRef<HTMLDivElement>(null);
+
+  const dbg = useCallback((msg: string) => {
+    if (!overlayRef.current) {
+      return;
+    }
+    const line = document.createElement('pre');
+    line.textContent = `${(performance.now() / 1000).toFixed(2).padStart(8, ' ')} ${msg}`;
+    overlayRef.current.prepend(line);
+    while (overlayRef.current.children.length > maxLines) {
+      overlayRef.current.lastChild?.remove();
+    }
+  }, []);
+
+  return (
+    <DebugOverlayProvider dbg={dbg}>
+      {children}
+      {enabled && (
+        <div
+          ref={overlayRef}
+          style={{
+            position: 'fixed',
+            bottom: 'calc(var(--kb-height, 0px) + 8px)',
+            left: 8,
+            right: 8,
+            background: 'rgba(0,0,0,0.8)',
+            color: '#0f0',
+            fontSize: 10,
+            fontFamily: 'monospace',
+            padding: 6,
+            borderRadius: 4,
+            zIndex: 9999,
+            pointerEvents: 'none',
+          }}
+        />
+      )}
+    </DebugOverlayProvider>
+  );
+};
+
+//
+// Exports
+//
+
+export const DebugOverlay = {
+  Root: DebugOverlayRoot,
+};
+
+export { useDebugLog };

package/src/components/DebugOverlay/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export { DebugOverlay, useDebugLog } from './DebugOverlay';

package/src/components/Dialog/Dialog.tsx

@@ -4,11 +4,12 @@
 
 import React from 'react';
 
-import { Surface } from '@dxos/app-framework/react';
+import { Surface } from '@dxos/app-framework/ui';
+import { AppSurface } from '@dxos/app-toolkit/ui';
 import { AlertDialog, Dialog as NaturalDialog } from '@dxos/react-ui';
+import { ErrorFallback } from '@dxos/react-ui';
 
-import { useSimpleLayoutState } from '../../hooks';
-import { ContentError } from '../ContentError';
+import { useSimpleLayoutState } from '#hooks';
 
 export const Dialog = () => {
   const { state, updateState } = useSimpleLayoutState();
@@ -20,17 +21,27 @@ 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
+          type={AppSurface.Dialog}
+          data={state.dialogContent ?? undefined}
+          limit={1}
+          fallback={ErrorFallback}
+        />
       ) : (
         <DialogOverlay
           blockAlign={state.dialogBlockAlign}
           classNames={state.dialogOverlayClasses}
           style={state.dialogOverlayStyle}
         >
-          <Surface role='dialog' data={state.dialogContent} limit={1} fallback={ContentError} />
+          <Surface.Surface
+            type={AppSurface.Dialog}
+            data={state.dialogContent ?? undefined}
+            limit={1}
+            fallback={ErrorFallback}
+          />
         </DialogOverlay>
       )}
     </DialogRoot>

package/src/components/Home/Home.tsx

@@ -4,17 +4,20 @@
 
 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 { 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 = {};
 
@@ -26,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],
@@ -38,44 +41,47 @@ 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>
-            <Mosaic.Viewport padding>
-              <Mosaic.Stack items={results} getId={(node) => node.id} Tile={WorkspaceTile} />
-            </Mosaic.Viewport>
-          </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>
   );
 };
 
-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);
+
+  useExpandPath(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,32 +89,32 @@ 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')}
+      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>
@@ -124,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,
-  decorators: [withTheme],
+  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

@@ -0,0 +1,133 @@
+//
+// 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 { 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';
+
+/**
+ * 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 StoryPanel = ({ children, label }: PropsWithChildren<{ label: string }>) => {
+  return (
+    <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>('top');
+  const [keyboardOpen, setKeyboardOpen] = useState(false);
+
+  useEffect(() => {
+    setSplitterMode(splitterMode === 'split' ? 'bottom' : splitterMode);
+  }, [keyboardOpen]);
+
+  return (
+    <WithKeyboard>
+      <MobileLayout.Root onKeyboardOpenChange={setKeyboardOpen}>
+        <MobileLayout.Panel safe={{ top: true, bottom: splitterMode === 'top' }}>
+          <Splitter.Root mode={splitterMode} ratio={0.5}>
+            <Splitter.Panel position='top'>
+              <StoryPanel label='Main'>
+                {splitterMode === 'top' && (
+                  <Toolbar.IconButton icon='ph--plus--regular' label='Open' onClick={() => setSplitterMode('split')} />
+                )}
+              </StoryPanel>
+            </Splitter.Panel>
+            <Splitter.Panel position='bottom'>
+              <StoryPanel label='Drawer'>
+                <Toolbar.IconButton
+                  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('top')} />
+              </StoryPanel>
+            </Splitter.Panel>
+          </Splitter.Root>
+        </MobileLayout.Panel>
+      </MobileLayout.Root>
+    </WithKeyboard>
+  );
+};
+
+const meta: Meta<MobileLayoutRootProps> = {
+  title: 'plugins/plugin-simple-layout/components/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 = {};