@dxos/plugin-navtree 0.8.3-staging.0fa589b → 0.8.4-main.3a94e84

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-navtree",
-  "version": "0.8.3-staging.0fa589b",
+  "version": "0.8.4-main.3a94e84",
   "description": "DXOS Surface plugin for a tree view visualization of the graph.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -30,60 +30,58 @@
     "@radix-ui/react-dismissable-layer": "1.1.5",
     "@radix-ui/react-use-controllable-state": "1.1.0",
     "date-fns": "^3.3.1",
-    "effect": "^3.13.3",
-    "@dxos/app-framework": "0.8.3-staging.0fa589b",
-    "@dxos/app-graph": "0.8.3-staging.0fa589b",
-    "@dxos/async": "0.8.3-staging.0fa589b",
-    "@dxos/debug": "0.8.3-staging.0fa589b",
-    "@dxos/echo-schema": "0.8.3-staging.0fa589b",
-    "@dxos/invariant": "0.8.3-staging.0fa589b",
-    "@dxos/echo": "0.8.3-staging.0fa589b",
-    "@dxos/keyboard": "0.8.3-staging.0fa589b",
-    "@dxos/live-object": "0.8.3-staging.0fa589b",
-    "@dxos/local-storage": "0.8.3-staging.0fa589b",
-    "@dxos/log": "0.8.3-staging.0fa589b",
-    "@dxos/plugin-graph": "0.8.3-staging.0fa589b",
-    "@dxos/plugin-deck": "0.8.3-staging.0fa589b",
-    "@dxos/plugin-observability": "0.8.3-staging.0fa589b",
-    "@dxos/protocols": "0.8.3-staging.0fa589b",
-    "@dxos/react-client": "0.8.3-staging.0fa589b",
-    "@dxos/react-ui-attention": "0.8.3-staging.0fa589b",
-    "@dxos/react-ui-list": "0.8.3-staging.0fa589b",
-    "@dxos/react-ui-menu": "0.8.3-staging.0fa589b",
-    "@dxos/react-ui-searchlist": "0.8.3-staging.0fa589b",
-    "@dxos/react-ui-stack": "0.8.3-staging.0fa589b",
-    "@dxos/react-ui-tabs": "0.8.3-staging.0fa589b",
-    "@dxos/util": "0.8.3-staging.0fa589b"
+    "effect": "3.17.0",
+    "@dxos/app-framework": "0.8.4-main.3a94e84",
+    "@dxos/app-graph": "0.8.4-main.3a94e84",
+    "@dxos/async": "0.8.4-main.3a94e84",
+    "@dxos/echo": "0.8.4-main.3a94e84",
+    "@dxos/debug": "0.8.4-main.3a94e84",
+    "@dxos/echo-schema": "0.8.4-main.3a94e84",
+    "@dxos/keyboard": "0.8.4-main.3a94e84",
+    "@dxos/live-object": "0.8.4-main.3a94e84",
+    "@dxos/local-storage": "0.8.4-main.3a94e84",
+    "@dxos/invariant": "0.8.4-main.3a94e84",
+    "@dxos/log": "0.8.4-main.3a94e84",
+    "@dxos/plugin-deck": "0.8.4-main.3a94e84",
+    "@dxos/plugin-graph": "0.8.4-main.3a94e84",
+    "@dxos/plugin-observability": "0.8.4-main.3a94e84",
+    "@dxos/protocols": "0.8.4-main.3a94e84",
+    "@dxos/react-client": "0.8.4-main.3a94e84",
+    "@dxos/react-ui-attention": "0.8.4-main.3a94e84",
+    "@dxos/react-ui-list": "0.8.4-main.3a94e84",
+    "@dxos/react-ui-menu": "0.8.4-main.3a94e84",
+    "@dxos/react-ui-stack": "0.8.4-main.3a94e84",
+    "@dxos/react-ui-searchlist": "0.8.4-main.3a94e84",
+    "@dxos/react-ui-tabs": "0.8.4-main.3a94e84",
+    "@dxos/util": "0.8.4-main.3a94e84"
   },
   "devDependencies": {
-    "@effect-rx/rx-react": "^0.34.1",
-    "@effect/platform": "0.80.12",
-    "@phosphor-icons/react": "^2.1.5",
+    "@effect-rx/rx-react": "0.38.0",
+    "@effect/platform": "0.89.0",
     "@types/react": "~18.2.0",
     "@types/react-dom": "~18.2.0",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/echo-signals": "0.8.3-staging.0fa589b",
-    "@dxos/plugin-attention": "0.8.3-staging.0fa589b",
-    "@dxos/plugin-client": "0.8.3-staging.0fa589b",
-    "@dxos/plugin-space": "0.8.3-staging.0fa589b",
-    "@dxos/plugin-storybook-layout": "0.8.3-staging.0fa589b",
-    "@dxos/plugin-theme": "0.8.3-staging.0fa589b",
-    "@dxos/random": "0.8.3-staging.0fa589b",
-    "@dxos/react-ui": "0.8.3-staging.0fa589b",
-    "@dxos/react-ui-theme": "0.8.3-staging.0fa589b",
-    "@dxos/storybook-utils": "0.8.3-staging.0fa589b"
+    "@dxos/echo-signals": "0.8.4-main.3a94e84",
+    "@dxos/plugin-attention": "0.8.4-main.3a94e84",
+    "@dxos/plugin-client": "0.8.4-main.3a94e84",
+    "@dxos/plugin-space": "0.8.4-main.3a94e84",
+    "@dxos/plugin-storybook-layout": "0.8.4-main.3a94e84",
+    "@dxos/plugin-theme": "0.8.4-main.3a94e84",
+    "@dxos/random": "0.8.4-main.3a94e84",
+    "@dxos/react-ui": "0.8.4-main.3a94e84",
+    "@dxos/react-ui-theme": "0.8.4-main.3a94e84",
+    "@dxos/storybook-utils": "0.8.4-main.3a94e84"
   },
   "peerDependencies": {
     "@effect-rx/rx-react": "^0.34.1",
-    "@effect/platform": "0.80.12",
-    "@phosphor-icons/react": "^2.1.5",
+    "@effect/platform": "^0.80.12",
     "effect": "^3.13.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.3-staging.0fa589b",
-    "@dxos/react-ui-theme": "0.8.3-staging.0fa589b"
+    "@dxos/react-ui": "0.8.4-main.3a94e84",
+    "@dxos/react-ui-theme": "0.8.4-main.3a94e84"
   },
   "publishConfig": {
     "access": "public"

package/src/NavTreePlugin.tsx

@@ -18,7 +18,7 @@ import { AppGraphBuilder, IntentResolver, Keyboard, ReactSurface, State } from '
 import { NODE_TYPE } from './components';
 import { NavTreeEvents } from './events';
 import { meta } from './meta';
-import translations from './translations';
+import { translations } from './translations';
 
 export const NavTreePlugin = () =>
   definePlugin(meta, [

package/src/components/CommandsDialog/CommandsTrigger.tsx

@@ -2,12 +2,10 @@
 // Copyright 2024 DXOS.org
 //
 
-import { MagnifyingGlass } from '@phosphor-icons/react';
 import React from 'react';
 
 import { createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
-import { Button, useTranslation } from '@dxos/react-ui';
-import { getSize } from '@dxos/react-ui-theme';
+import { Button, Icon, useTranslation } from '@dxos/react-ui';
 
 import { COMMANDS_DIALOG, NAVTREE_PLUGIN } from '../../meta';
 
@@ -31,7 +29,7 @@ export const CommandsTrigger = () => {
       }
     >
       <span className='text-description font-normal grow text-start'>{t('command list input placeholder')}</span>
-      <MagnifyingGlass className={getSize(5)} />
+      <Icon icon='ph--magnifying-glass--regular' size={5} />
     </Button>
   );
 };

package/src/components/NavTree/NavTree.stories.tsx

@@ -4,7 +4,7 @@
 
 import '@dxos-theme';
 
-import { type StoryObj, type Meta } from '@storybook/react';
+import { type StoryObj, type Meta } from '@storybook/react-vite';
 import { Schema } from 'effect';
 import React from 'react';
 
@@ -35,7 +35,7 @@ import { withLayout } from '@dxos/storybook-utils';
 
 import { NavTreePlugin } from '../../NavTreePlugin';
 import { storybookGraphBuilders } from '../../testing';
-import translations from '../../translations';
+import { translations } from '../../translations';
 import { NavTreeContainer } from '../NavTreeContainer';
 
 faker.seed(1234);

package/src/components/NavTreeContainer.tsx

@@ -59,10 +59,9 @@ const getItems = (graph: ReadableGraph, node?: Node, disposition?: string) => {
 
 const useItems = (node?: Node, options?: { disposition?: string; sort?: boolean }) => {
   const { graph } = useAppGraph();
-  const connections = useConnections(graph, node?.id ?? ROOT_ID).filter((node) =>
-    filterItems(node, options?.disposition),
-  );
-  return options?.sort ? connections.toSorted((a, b) => byPosition(a.properties, b.properties)) : connections;
+  const connections = useConnections(graph, node?.id ?? ROOT_ID);
+  const filtered = connections.filter((node) => filterItems(node, options?.disposition));
+  return options?.sort ? filtered.toSorted((a, b) => byPosition(a.properties, b.properties)) : filtered;
 };
 
 export type NavTreeContainerProps = {

package/src/components/NavTreeItem/NavTreeItemAction.stories.tsx

@@ -4,7 +4,7 @@
 
 import '@dxos-theme';
 
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 
 import { type NodeArg } from '@dxos/app-graph';
 import { faker } from '@dxos/random';

package/src/components/NavTreeItem/NavTreeItemAction.tsx

@@ -7,7 +7,7 @@ import React from 'react';
 import { type Action, type Node } from '@dxos/app-graph';
 import { useTranslation, toLocalizedString, IconButton, useDensityContext } from '@dxos/react-ui';
 import { DropdownMenu, MenuProvider, type MenuItem } from '@dxos/react-ui-menu';
-import { hoverableControlItem, hoverableOpenControlItem, mx } from '@dxos/react-ui-theme';
+import { hoverableControlItem, hoverableOpenControlItem } from '@dxos/react-ui-theme';
 
 import { NAVTREE_PLUGIN } from '../../meta';
 import { type ActionProperties } from '../../types';
@@ -46,7 +46,7 @@ export const NavTreeItemActionDropdownMenu = ({
         <DropdownMenu.Trigger asChild>
           <IconButton
             {...(density === 'coarse' ? coarseActionButtonProps : fineActionButtonProps)}
-            classNames={mx('shrink-0 pli-2 pointer-fine:pli-1', hoverableControlItem, hoverableOpenControlItem)}
+            classNames={['shrink-0 pli-2 pointer-fine:pli-1', hoverableControlItem, hoverableOpenControlItem]}
             variant='ghost'
             icon={icon ?? fallbackIcon}
             iconOnly
@@ -70,12 +70,12 @@ export const NavTreeItemMonolithicAction = ({
     <IconButton
       {...(density === 'coarse' ? coarseActionButtonProps : fineActionButtonProps)}
       variant={variant}
-      classNames={mx(
+      classNames={[
         'shrink-0',
         hoverableControlItem,
         hoverableOpenControlItem,
         iconOnly ? 'pli-2 pointer-fine:pli-1' : 'p-2 pointer-fine:p-2 mie-1',
-      )}
+      ]}
       icon={icon ?? fallbackIcon}
       iconOnly={iconOnly}
       label={baseLabel}

package/src/components/Sidebar/L1Panel.tsx

@@ -83,7 +83,7 @@ const L1Panel = ({ open, item, path, currentItemId, onBack }: L1PanelProps) => {
     >
       {item.id === currentItemId && (
         <>
-          <h2 className='flex items-center border-be border-subduedSeparator app-drag pli-1'>
+          <h2 className='flex items-center border-be border-subduedSeparator app-drag pli-1 density-coarse'>
             {backCapable ? (
               <TitleButton title={title} onClick={handleBack} />
             ) : (
@@ -92,10 +92,9 @@ const L1Panel = ({ open, item, path, currentItemId, onBack }: L1PanelProps) => {
             {alternateTree && !isAlternate && (
               <IconButton
                 variant='ghost'
-                classNames={mx('shrink-0', hoverableControlItem, hoverableOpenControlItem, 'pli-2 pointer-fine:pli-1')}
+                classNames={['shrink-0', hoverableControlItem, hoverableOpenControlItem, 'pli-2 pointer-fine:pli-1']}
                 iconOnly
                 size={5}
-                density='coarse'
                 icon={alternateTree.properties.icon ?? 'ph--placeholder--regular'}
                 label={toLocalizedString(alternateTree.properties.label ?? alternateTree.id, t)}
                 data-testid='treeView.alternateTreeButton'

package/src/components/UserAccountAvatar/UserAccountAvatar.stories.tsx

@@ -4,7 +4,7 @@
 
 import '@dxos-theme';
 
-import { type Meta } from '@storybook/react';
+import { type Meta } from '@storybook/react-vite';
 
 import { withTheme } from '@dxos/storybook-utils';
 

package/src/components/index.ts

@@ -7,4 +7,4 @@ export * from './NavTree';
 export * from './NavTreeContainer';
 export * from './NavTreeContext';
 export * from './NavTreeDocumentTitle';
-export * from './types';
+export type * from './types';

package/src/experimental/Tree.stories.tsx

@@ -4,11 +4,11 @@
 
 import '@dxos-theme';
 
-import { House, List, Planet, PlusCircle, Sailboat } from '@phosphor-icons/react';
-import { type Meta } from '@storybook/react';
+import { type Meta } from '@storybook/react-vite';
 import React, { type JSX, type PropsWithChildren, useEffect, useState } from 'react';
 
 import { faker } from '@dxos/random';
+import { Icon, IconButton } from '@dxos/react-ui';
 import { modalSurface, mx } from '@dxos/react-ui-theme';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
@@ -48,7 +48,7 @@ const data: TreeNodeData[] = [
         id: faker.string.uuid(),
         title: 'plugins/Personal Space',
         color: 'text-green-400',
-        Icon: House,
+        iconName: 'ph--house--regular',
         children: [
           {
             id: faker.string.uuid(),
@@ -83,7 +83,7 @@ const data: TreeNodeData[] = [
       {
         id: faker.string.uuid(),
         title: faker.commerce.productName(),
-        Icon: Planet,
+        iconName: 'ph--planet--regular',
         children: [
           {
             id: faker.string.uuid(),
@@ -94,12 +94,12 @@ const data: TreeNodeData[] = [
       {
         id: faker.string.uuid(),
         title: faker.commerce.productName(),
-        Icon: Sailboat,
+        iconName: 'ph--sailboat--regular',
       },
       {
         id: faker.string.uuid(),
         title: faker.commerce.productName(),
-        Icon: Planet,
+        iconName: 'ph--planet--regular',
       },
     ],
   },
@@ -181,7 +181,7 @@ const Sidebar = ({ mutate }: { mutate?: boolean }) => {
     setItems((items) => {
       items[0].children?.push({
         id: faker.string.uuid(),
-        Icon: Planet,
+        iconName: 'ph--planet--regular',
         title: faker.commerce.productName(),
       });
 
@@ -213,11 +213,11 @@ const Sidebar = ({ mutate }: { mutate?: boolean }) => {
       </div>
 
       <div className='flex items-center my-2 px-2 gap-2'>
-        <PlusCircle onClick={handleCreateSpace} />
+        <IconButton icon='ph--plus-circle--regular' iconOnly label='Create space' onClick={handleCreateSpace} />
         <span className='grow text-sm' onClick={handleCreateSpace}>
           New space
         </span>
-        <List />
+        <Icon icon='ph--list--regular' />
       </div>
     </div>
   );

package/src/experimental/Tree.tsx

@@ -2,11 +2,10 @@
 // Copyright 2024 DXOS.org
 //
 
-import { CaretRight, Circle, File, Folder, type Icon, type IconProps, Plus, UserCircle } from '@phosphor-icons/react';
 import React, { type HTMLAttributes, type PropsWithChildren } from 'react';
 
-import { type ClassNameValue, type Size } from '@dxos/react-ui';
-import { getSize, mx } from '@dxos/react-ui-theme';
+import { type ClassNameValue, Icon, type Size } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
 
 // TODO(burdon): Rounded border if first/last.
 const styles = {
@@ -15,21 +14,21 @@ const styles = {
 };
 
 export const IconButton = ({
-  Icon,
+  iconName,
   classNames,
   size = 4,
   onClick,
-  ...props
+  weight = 'regular',
 }: {
-  Icon: Icon;
+  iconName: string;
   classNames?: ClassNameValue;
   size?: Size;
-} & Pick<IconProps, 'weight'> &
-  Pick<HTMLAttributes<HTMLDivElement>, 'onClick'>) => {
+  weight?: 'regular' | 'duotone' | 'fill';
+} & Pick<HTMLAttributes<HTMLDivElement>, 'onClick'>) => {
   // TODO(burdon): Density aware.
   return (
     <div className={mx('flex w-6 h-6 items-center justify-center select-none', classNames)} onClick={onClick}>
-      <Icon className={mx('cursor-pointer', getSize(size))} {...props} />
+      <Icon icon={iconName} classNames='cursor-pointer' size={size} />
     </div>
   );
 };
@@ -37,7 +36,7 @@ export const IconButton = ({
 export type TreeNodeData = {
   id: string;
   title: string;
-  Icon?: Icon;
+  iconName?: string;
   color?: string;
   children?: TreeNodeData[];
 };
@@ -123,7 +122,7 @@ const StateIcon = ({ node, open, selected, active }: TreeNodeProps) => {
   // TODO(burdon): No animation if opening/closing folder.
   return (
     <IconButton
-      Icon={isActive ? UserCircle : Circle}
+      iconName={isActive ? 'ph--user-circle--regular' : 'ph--circle--regular'}
       size={4}
       weight={selected?.[id] ? 'fill' : 'duotone'}
       classNames={mx(
@@ -143,7 +142,7 @@ const OpenIcon = ({
   return (
     (children?.length && open && (
       <IconButton
-        Icon={CaretRight}
+        iconName='ph--caret-right--regular'
         size={3}
         classNames={mx('transition duration-200', open?.[id] ? 'rotate-90' : 'transform-none')}
         onClick={(ev) => {
@@ -157,12 +156,12 @@ const OpenIcon = ({
 
 // TODO(burdon): Drag handle,
 const ItemIcon = ({
-  node: { children, Icon = children?.length ? Folder : File, color },
+  node: { children, iconName = children?.length ? 'ph--folder--regular' : 'ph--file--regular', color },
 }: Pick<TreeNodeProps, 'node'>) => {
   return (
-    (Icon && (
+    (iconName && (
       <IconButton
-        Icon={Icon}
+        iconName={iconName}
         classNames={color ?? 'text-neutral-700 dark:text-neutral-300'}
         weight={color ? 'duotone' : 'regular'}
       />
@@ -173,7 +172,7 @@ const ItemIcon = ({
 const MenuItem = ({ node: { id }, onMenuAction }: Pick<TreeNodeProps, 'node' | 'onMenuAction'>) => {
   return (
     <IconButton
-      Icon={Plus}
+      iconName='ph--plus--regular'
       classNames='invisible group-hover:visible'
       onClick={(ev) => {
         ev.stopPropagation();

package/src/translations.ts

@@ -2,12 +2,14 @@
 // Copyright 2023 DXOS.org
 //
 
-import { NAVTREE_PLUGIN } from './meta';
+import { type Resource } from '@dxos/react-ui';
 
-export default [
+import { meta } from './meta';
+
+export const translations = [
   {
     'en-US': {
-      [NAVTREE_PLUGIN]: {
+      [meta.id]: {
         'app menu label': 'App menu',
         'open settings label': 'Settings',
         'open commands label': 'Search commands',
@@ -19,4 +21,4 @@ export default [
       },
     },
   },
-];
+] as const satisfies Resource[];