@dxos/plugin-navtree 0.13.0 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-navtree",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "DXOS Surface plugin for a tree view visualization of the graph.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -126,25 +126,25 @@
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "1.7.7",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.1.0",
-    "@dxos/app-framework": "0.13.0",
-    "@dxos/app-graph": "0.13.0",
-    "@dxos/app-toolkit": "0.13.0",
-    "@dxos/async": "0.13.0",
-    "@dxos/compute": "0.13.0",
-    "@dxos/debug": "0.13.0",
-    "@dxos/graph": "0.13.0",
-    "@dxos/keys": "0.13.0",
-    "@dxos/lit-ui": "0.13.0",
-    "@dxos/log": "0.13.0",
-    "@dxos/plugin-attention": "0.13.0",
-    "@dxos/plugin-deck": "0.13.0",
-    "@dxos/plugin-graph": "0.13.0",
-    "@dxos/react-focus": "0.13.0",
-    "@dxos/react-ui-attention": "0.13.0",
-    "@dxos/react-ui-list": "0.13.0",
-    "@dxos/react-ui-menu": "0.13.0",
-    "@dxos/react-ui-search": "0.13.0",
-    "@dxos/util": "0.13.0"
+    "@dxos/app-framework": "0.14.0",
+    "@dxos/app-graph": "0.14.0",
+    "@dxos/app-toolkit": "0.14.0",
+    "@dxos/async": "0.14.0",
+    "@dxos/compute": "0.14.0",
+    "@dxos/debug": "0.14.0",
+    "@dxos/graph": "0.14.0",
+    "@dxos/keys": "0.14.0",
+    "@dxos/lit-ui": "0.14.0",
+    "@dxos/log": "0.14.0",
+    "@dxos/plugin-attention": "0.14.0",
+    "@dxos/plugin-deck": "0.14.0",
+    "@dxos/plugin-graph": "0.14.0",
+    "@dxos/react-focus": "0.14.0",
+    "@dxos/react-ui-attention": "0.14.0",
+    "@dxos/react-ui-list": "0.14.0",
+    "@dxos/react-ui-menu": "0.14.0",
+    "@dxos/react-ui-search": "0.14.0",
+    "@dxos/util": "0.14.0"
   },
   "devDependencies": {
     "@effect/atom-react": "4.0.0",
@@ -155,20 +155,20 @@
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
     "vite": "^8.2.2",
-    "@dxos/echo": "0.13.0",
-    "@dxos/plugin-testing": "0.13.0",
-    "@dxos/random": "0.13.0",
-    "@dxos/react-ui": "0.13.0",
-    "@dxos/ui-theme": "0.13.0",
-    "@dxos/ui-types": "0.13.0"
+    "@dxos/echo": "0.14.0",
+    "@dxos/plugin-testing": "0.14.0",
+    "@dxos/random": "0.14.0",
+    "@dxos/react-ui": "0.14.0",
+    "@dxos/ui-theme": "0.14.0",
+    "@dxos/ui-types": "0.14.0"
   },
   "peerDependencies": {
     "@effect/atom-react": "4.0.0",
     "effect": "4.0.0",
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
-    "@dxos/react-ui": "^0.13.0",
-    "@dxos/ui-theme": "^0.13.0"
+    "@dxos/react-ui": "^0.14.0",
+    "@dxos/ui-theme": "^0.14.0"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Sidebar/L0Menu.tsx

@@ -32,6 +32,7 @@ import * as Button from '@dxos/react-ui/Button';
 import * as DragHandle from '@dxos/react-ui/DragHandle';
 import * as Hooks from '@dxos/react-ui/Hooks';
 import * as Icon from '@dxos/react-ui/Icon';
+import * as Layout from '@dxos/react-ui/Layout';
 import * as Main from '@dxos/react-ui/Main';
 import * as ScrollArea from '@dxos/react-ui/ScrollArea';
 import * as Tabs from '@dxos/react-ui/Tabs';
@@ -233,19 +234,20 @@ const L0Item = memo(({ item, parent, path, pinned, onRearrange, onItemHover }: L
 
   return (
     <L0ItemRoot ref={itemElement} item={item} parent={parent} path={path} onMouseEnter={handleMouseEnter}>
-      <div
+      <Layout.Flex
         data-frame={true}
         {...(pending && { 'data-pending': true, 'aria-busy': true })}
         {...(hue && { style: { background: `var(--color-${hue}-surface)` } })}
-        className={mx(
-          'flex justify-center items-center dx-focus-ring-group-indicator transition-colors rounded-sm',
+        center
+        classNames={[
+          'dx-focus-ring-group-indicator transition-colors rounded-sm',
           pinned
             ? 'p-2 group-hover/l0item:bg-current-surface'
             : 'w-(--dx-l0-avatar-size) h-(--dx-l0-avatar-size) bg-current-surface',
-        )}
+        ]}
       >
         <ItemAvatar item={item} />
-      </div>
+      </Layout.Flex>
       <L0ItemActiveTabIndicator />
       <span id={`${item.id}__label`} className='sr-only'>
         {localizedString}
@@ -341,7 +343,7 @@ export const L0Menu = ({
       {...landmark}
       data-tauri-drag-region='deep'
       classNames={[
-        'group/l0 absolute z-[1] inset-y-0 start-0 rounded-is',
+        'group/l0 absolute z-[1] inset-y-0 start-0 rounded-s',
         'grid grid-cols-[var(--dx-l0-size)] grid-rows-[var(--dx-rail-size)_1fr_min-content_var(--dx-l0-size)] dx-contain-layout',
         'w-(--dx-l0-size) dx-l0-surface dx-app-drag pb-[env(safe-area-inset-bottom)]',
         '[body[data-platform="macos"]_&]:pt-[30px]',
@@ -380,13 +382,13 @@ export const L0Menu = ({
       </ScrollArea.Root>
 
       {/* Actions. */}
-      <div className='grid grid-cols-1 auto-rows-(--dx-rail-action) pt-2'>
+      <Layout.Grid cols={1} classNames='auto-rows-(--dx-rail-action) pt-2'>
         {pinnedItems.map((item) => (
           <L0Item key={item.id} item={item} parent={parent} path={path} pinned />
         ))}
-      </div>
+      </Layout.Grid>
 
-      <div className='grid dx-app-no-drag'>
+      <Layout.Grid classNames='dx-app-no-drag'>
         {userAccountItem ? (
           <L0ItemRoot key={userAccountItem.id} item={userAccountItem} parent={parent} path={path}>
             <UserAccountAvatar
@@ -399,11 +401,11 @@ export const L0Menu = ({
             />
           </L0ItemRoot>
         ) : (
-          <div className='flex w-full justify-center items-center'>
+          <Layout.Flex center classNames='w-full'>
             <UserAccountAvatar size='lg' />
-          </div>
+          </Layout.Flex>
         )}
-      </div>
+      </Layout.Grid>
     </Tabs.List>
   );
 };

package/src/components/Sidebar/L1Panel.tsx

@@ -15,6 +15,7 @@ import { ActionMenu, type MenuItem } from '@dxos/react-ui-menu';
 import * as Button from '@dxos/react-ui/Button';
 import * as Hooks from '@dxos/react-ui/Hooks';
 import * as Icon from '@dxos/react-ui/Icon';
+import * as Layout from '@dxos/react-ui/Layout';
 import * as Main from '@dxos/react-ui/Main';
 import * as Status from '@dxos/react-ui/Status';
 import * as Tabs from '@dxos/react-ui/Tabs';
@@ -93,14 +94,15 @@ const L1PanelInner = ({ open, path, id, item, unavailable, isCurrent, onBack }:
     >
       {shouldRenderContent &&
         (pending ? (
-          <div
+          <Layout.Flex
             role='status'
             aria-label={t('pending-workspace.label')}
-            className='row-start-2 self-start flex justify-center p-4 animate-fade-in'
+            justify='center'
+            classNames='row-start-2 self-start p-4 animate-fade-in'
             style={{ animationDelay: RENDER_DELAY, animationFillMode: 'backwards' }}
           >
             <Icon.Icon icon='ph--spinner-gap--regular' size='xl' spin />
-          </div>
+          </Layout.Flex>
         ) : item ? (
           <L1PanelContent open={open} path={path} item={item} onBack={onBack} />
         ) : (

package/src/components/UserAccountAvatar/UserAccountAvatar.tsx

@@ -5,6 +5,7 @@
 import React, { type ComponentProps } from 'react';
 
 import * as Avatar from '@dxos/react-ui/Avatar';
+import * as Layout from '@dxos/react-ui/Layout';
 import { hexToFallback } from '@dxos/util';
 
 import { L0ItemActiveTabIndicator } from '../Sidebar/index.ts';
@@ -26,10 +27,7 @@ export const UserAccountAvatar = ({ size, userId, hue, emoji, status, badge }: U
   return (
     <>
       <L0ItemActiveTabIndicator classNames='inset-y-6' />
-      <div
-        className='grid place-items-center dx-focus-ring-group-indicator rounded-full'
-        data-joyride='welcome/account'
-      >
+      <Layout.Grid center classNames='dx-focus-ring-group-indicator rounded-full' data-joyride='welcome/account'>
         {/* Sized by the avatar so the badge sits on its corner, not the cell's. */}
         <span className='relative inline-grid'>
           <Avatar.Root
@@ -47,7 +45,7 @@ export const UserAccountAvatar = ({ size, userId, hue, emoji, status, badge }: U
             />
           )}
         </span>
-      </div>
+      </Layout.Grid>
     </>
   );
 };