@dxos/plugin-navtree 0.8.4-main.e098934 → 0.8.4-main.e8ec1fe

package/src/components/UserAccountAvatar/UserAccountAvatar.tsx

@@ -7,6 +7,8 @@ import React from 'react';
 import { Avatar, type AvatarStatus, type Size } from '@dxos/react-ui';
 import { hexToFallback } from '@dxos/util';
 
+import { L0ItemActiveTabIndicator } from '../Sidebar';
+
 export type UserAccountAvatarProps = {
   size?: Size;
   userId?: string;
@@ -19,17 +21,23 @@ export const UserAccountAvatar = ({ size, userId, hue, emoji, status }: UserAcco
   const fallbackValue = hexToFallback(userId ?? '0');
 
   return (
-    <div className='grid place-items-center' data-joyride='welcome/account'>
-      <Avatar.Root>
-        <Avatar.Content
-          variant='circle'
-          size={size ?? 12}
-          status={status ?? 'active'}
-          hue={hue || fallbackValue.hue}
-          fallback={emoji || fallbackValue.emoji}
-          data-testid='treeView.userAccount'
-        />
-      </Avatar.Root>
-    </div>
+    <>
+      <L0ItemActiveTabIndicator classNames='inset-block-6' />
+      <div
+        className='grid place-items-center dx-focus-ring-group-indicator rounded-full'
+        data-joyride='welcome/account'
+      >
+        <Avatar.Root>
+          <Avatar.Content
+            variant='circle'
+            size={size ?? 12}
+            status={status ?? 'active'}
+            hue={hue || fallbackValue.hue}
+            fallback={emoji || fallbackValue.emoji}
+            data-testid='treeView.userAccount'
+          />
+        </Avatar.Root>
+      </div>
+    </>
   );
 };

package/src/events.ts

@@ -4,8 +4,8 @@
 
 import { Events } from '@dxos/app-framework';
 
-import { NAVTREE_PLUGIN } from './meta';
+import { meta } from './meta';
 
 export namespace NavTreeEvents {
-  export const StateReady = Events.createStateEvent(NAVTREE_PLUGIN);
+  export const StateReady = Events.createStateEvent(meta.id);
 }

package/src/experimental/Tree.stories.tsx

@@ -2,15 +2,13 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
+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';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { mx } from '@dxos/react-ui-theme';
 
 import { type ItemMap, Tree, type TreeNodeData, type TreeProps, visitNodes, visitor } from './Tree';
 
@@ -32,7 +30,7 @@ const Container = ({ children, sidebar }: PropsWithChildren<{ sidebar: JSX.Eleme
     <div className='flex'>
       {/* TODO(burdon): Custom thin scrollbar. */}
       {/* TODO(burdon): Horizontal scrolling within navtree? */}
-      <div className='flex flex-col overflow-y-auto w-[300px] bg-neutral-100 dark:bg-neutral-950'>{sidebar}</div>
+      <div className='flex flex-col overflow-y-auto is-[300px] bg-neutral-100 dark:bg-neutral-950'>{sidebar}</div>
       <div className='flex flex-col grow overflow-hidden'>{children}</div>
     </div>
   );
@@ -105,27 +103,6 @@ const data: TreeNodeData[] = [
   },
 ];
 
-export const Default = () => {
-  return <Container sidebar={<Sidebar mutate />} />;
-};
-
-export const Visitor = () => {
-  const [items] = useState(data);
-  const root = items[0];
-  const [openItems] = useState<ItemMap>({ [root.children![0].id]: true });
-  return (
-    <div className='flex flex-col'>
-      {Array.from(visitor(root, openItems)).map(({ node: { id, title }, depth }) => (
-        <div key={id} className='grid grid-cols-[40px_400px_400px] font-mono'>
-          <div>{depth}</div>
-          <div>{id}</div>
-          <div>{title}</div>
-        </div>
-      ))}
-    </div>
-  );
-};
-
 const Sidebar = ({ mutate }: { mutate?: boolean }) => {
   const [items, setItems] = useState(data);
   const root = items[0];
@@ -212,7 +189,7 @@ const Sidebar = ({ mutate }: { mutate?: boolean }) => {
         />
       </div>
 
-      <div className='flex items-center my-2 px-2 gap-2'>
+      <div className='flex items-center my-2 pli-2 gap-2'>
         <IconButton icon='ph--plus-circle--regular' iconOnly label='Create space' onClick={handleCreateSpace} />
         <span className='grow text-sm' onClick={handleCreateSpace}>
           New space
@@ -226,9 +203,28 @@ const Sidebar = ({ mutate }: { mutate?: boolean }) => {
 const meta = {
   title: 'plugins/plugin-navtree/experimental/Tree',
   component: Tree,
-  decorators: [withTheme, withLayout({ fullscreen: true, classNames: modalSurface })],
+  decorators: [withTheme, withLayout({ container: 'column' })],
 } satisfies Meta<typeof Tree>;
 
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+export const Default = () => {
+  return <Container sidebar={<Sidebar mutate />} />;
+};
+
+export const Visitor = () => {
+  const [items] = useState(data);
+  const root = items[0];
+  const [openItems] = useState<ItemMap>({ [root.children![0].id]: true });
+  return (
+    <div className='flex flex-col'>
+      {Array.from(visitor(root, openItems)).map(({ node: { id, title }, depth }) => (
+        <div key={id} className='grid grid-cols-[40px_400px_400px] font-mono'>
+          <div>{depth}</div>
+          <div>{id}</div>
+          <div>{title}</div>
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/experimental/Tree.tsx

@@ -7,27 +7,19 @@ import React, { type HTMLAttributes, type PropsWithChildren } from 'react';
 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 = {
-  hover: 'hover:bg-slate-400 dark:hover:bg-slate-800',
-  selected: '!bg-slate-300 dark:!bg-slate-700',
-};
-
 export const IconButton = ({
   iconName,
   classNames,
   size = 4,
   onClick,
-  weight = 'regular',
 }: {
   iconName: string;
   classNames?: ClassNameValue;
   size?: Size;
-  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}>
+    <div className={mx('flex is-6 bs-6 items-center justify-center select-none', classNames)} onClick={onClick}>
       <Icon icon={iconName} classNames='cursor-pointer' size={size} />
     </div>
   );
@@ -124,7 +116,6 @@ const StateIcon = ({ node, open, selected, active }: TreeNodeProps) => {
     <IconButton
       iconName={isActive ? 'ph--user-circle--regular' : 'ph--circle--regular'}
       size={4}
-      weight={selected?.[id] ? 'fill' : 'duotone'}
       classNames={mx(
         'text-slate-500',
         !isChildActive && 'opacity-0 transition duration-500',
@@ -158,15 +149,7 @@ const OpenIcon = ({
 const ItemIcon = ({
   node: { children, iconName = children?.length ? 'ph--folder--regular' : 'ph--file--regular', color },
 }: Pick<TreeNodeProps, 'node'>) => {
-  return (
-    (iconName && (
-      <IconButton
-        iconName={iconName}
-        classNames={color ?? 'text-neutral-700 dark:text-neutral-300'}
-        weight={color ? 'duotone' : 'regular'}
-      />
-    )) || <div />
-  );
+  return (iconName && <IconButton iconName={iconName} classNames={color ?? 'text-subdued'} />) || <div />;
 };
 
 const MenuItem = ({ node: { id }, onMenuAction }: Pick<TreeNodeProps, 'node' | 'onMenuAction'>) => {
@@ -210,9 +193,9 @@ export const TreeNodeRow = (props: TreeNodeProps & { className?: string }) => {
     <Grid
       style={{ paddingLeft: `${(depth - 1) * 24}px` }}
       className={mx(
-        'group w-full items-center cursor-pointer',
-        styles.hover,
-        selected?.[id] && styles.selected,
+        'group is-full items-center cursor-pointer bg-hoverSurface',
+        // TODO(burdon): Use data-active.
+        selected?.[id] && 'bg-activeSurface',
         className,
       )}
       onClick={() => selected && onChangeSelected?.(id, !selected[id])}
@@ -255,7 +238,7 @@ export const TreeChildNodes = ({
   } = props;
   return (
     <div className={mx('flex flex-col mt-0.5 gap-0.5', className)}>
-      {children?.map((child, i) => (
+      {children?.map((child) => (
         <TreeNode key={child.id} {...props} depth={depth + 1} node={child} ancestors={[...ancestors, props.node]} />
       ))}
     </div>

package/src/meta.ts

@@ -3,15 +3,18 @@
 //
 
 import { type PluginMeta } from '@dxos/app-framework';
+import { trim } from '@dxos/util';
 
-export const NAVTREE_PLUGIN = 'dxos.org/plugin/navtree';
+export const meta: PluginMeta = {
+  id: 'dxos.org/plugin/navtree',
+  name: 'Navtree',
+  description: trim`
+    Hierarchical navigation tree for browsing spaces, folders, and objects.
+    Provides sidebar navigation with collapsible sections and quick access to workspace content.
+  `,
+};
 
 // TODO(wittjosiah): Factor out.
 export const KEY_BINDING = 'KeyBinding';
 // TODO(wittjosiah): Factor out.
-export const COMMANDS_DIALOG = `${NAVTREE_PLUGIN}/CommandsDialog`;
-
-export const meta: PluginMeta = {
-  id: NAVTREE_PLUGIN,
-  name: 'Navtree',
-};
+export const COMMANDS_DIALOG = `${meta.id}/CommandsDialog`;

package/src/testing/app-graph-builder.ts

@@ -2,8 +2,9 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Rx } from '@effect-rx/rx-react';
-import { Option, pipe } from 'effect';
+import { Atom } from '@effect-atom/atom-react';
+import * as Function from 'effect/Function';
+import * as Option from 'effect/Option';
 
 import { type PluginContext } from '@dxos/app-framework';
 import { log } from '@dxos/log';
@@ -27,8 +28,8 @@ export const storybookGraphBuilders = (context: PluginContext): BuilderExtension
     createExtension({
       id: 'app-menu',
       actions: (node) =>
-        Rx.make((get) =>
-          pipe(
+        Atom.make((get) =>
+          Function.pipe(
             get(node),
             Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),
             Option.map((node) => {
@@ -54,8 +55,8 @@ export const storybookGraphBuilders = (context: PluginContext): BuilderExtension
     createExtension({
       id: 'user-account',
       connector: (node) =>
-        Rx.make((get) =>
-          pipe(
+        Atom.make((get) =>
+          Function.pipe(
             get(node),
             Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),
             Option.map(() => {
@@ -111,8 +112,8 @@ export const storybookGraphBuilders = (context: PluginContext): BuilderExtension
       id: 'spaces-root',
       position: 'hoist',
       connector: (node) =>
-        Rx.make((get) =>
-          pipe(
+        Atom.make((get) =>
+          Function.pipe(
             get(node),
             Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),
             Option.map(() => {
@@ -137,7 +138,7 @@ export const storybookGraphBuilders = (context: PluginContext): BuilderExtension
     createExtension({
       id: 'spaces',
       connector: (node) => {
-        const count = Rx.make((get) => {
+        const count = Atom.make((get) => {
           let value = 3;
           const interval = setInterval(() => {
             if (value >= 10) {
@@ -152,8 +153,8 @@ export const storybookGraphBuilders = (context: PluginContext): BuilderExtension
           return value;
         });
 
-        return Rx.make((get) =>
-          pipe(
+        return Atom.make((get) =>
+          Function.pipe(
             get(node),
             Option.flatMap((node) => (node.id === 'spaces-root' ? Option.some(node) : Option.none())),
             Option.map(() => {
@@ -178,8 +179,8 @@ export const storybookGraphBuilders = (context: PluginContext): BuilderExtension
     createExtension({
       id: 'space-actions',
       actions: (node) =>
-        Rx.make((get) =>
-          pipe(
+        Atom.make((get) =>
+          Function.pipe(
             get(node),
             Option.flatMap((node) => (node.type === 'space' ? Option.some(node) : Option.none())),
             Option.map((node) => {
@@ -204,7 +205,7 @@ export const storybookGraphBuilders = (context: PluginContext): BuilderExtension
     createExtension({
       id: 'objects',
       connector: (node) => {
-        const count = Rx.make((get) => {
+        const count = Atom.make((get) => {
           let value = 3;
           const interval = setInterval(() => {
             if (value >= 20) {
@@ -219,8 +220,8 @@ export const storybookGraphBuilders = (context: PluginContext): BuilderExtension
           return value;
         });
 
-        return Rx.make((get) =>
-          pipe(
+        return Atom.make((get) =>
+          Function.pipe(
             get(node),
             Option.flatMap((node) => (node.type === 'space' ? Option.some(node) : Option.none())),
             Option.map((node) => {
@@ -244,8 +245,8 @@ export const storybookGraphBuilders = (context: PluginContext): BuilderExtension
     createExtension({
       id: 'object-actions',
       actions: (node) =>
-        Rx.make((get) =>
-          pipe(
+        Atom.make((get) =>
+          Function.pipe(
             get(node),
             Option.flatMap((node) => (node.type === 'object' ? Option.some(node) : Option.none())),
             Option.map((node) => {

package/src/testing/generator.ts

@@ -2,11 +2,11 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 
 import { type NodeArg } from '@dxos/app-graph';
 import { type Live, Obj, Type } from '@dxos/echo';
-import { TypedObject } from '@dxos/echo-schema';
+import { TypedObject } from '@dxos/echo/internal';
 import { faker } from '@dxos/random';
 import { range } from '@dxos/util';
 

package/src/types.ts

@@ -28,13 +28,14 @@ export type FlattenedActions = {
 };
 
 type SharedProperties = {
-  label: Label;
-  icon?: string;
+  testId?: string;
   disabled?: boolean;
   position?: Position;
-  testId?: string;
+  label: Label;
   className?: string;
   headingClassName?: string;
+  icon?: string;
+  iconHue?: string;
 };
 
 export type NodeProperties = SharedProperties & {

package/dist/lib/browser/app-graph-builder-6JDBQ25U.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/capabilities/app-graph-builder.ts"],
-  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport { Rx } from '@effect-rx/rx-react';\nimport { Option, pipe } from 'effect';\n\nimport { Capabilities, LayoutAction, type PluginContext, contributes, createIntent } from '@dxos/app-framework';\nimport { ROOT_ID, createExtension } from '@dxos/plugin-graph';\n\nimport { COMMANDS_DIALOG, NAVTREE_PLUGIN } from '../meta';\n\nexport default (context: PluginContext) =>\n  contributes(\n    Capabilities.AppGraphBuilder,\n    createExtension({\n      id: NAVTREE_PLUGIN,\n      actions: (node) =>\n        Rx.make((get) =>\n          pipe(\n            get(node),\n            Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),\n            Option.map(() => [\n              {\n                id: COMMANDS_DIALOG,\n                data: async () => {\n                  const { dispatchPromise: dispatch } = context.getCapability(Capabilities.IntentDispatcher);\n                  await dispatch(\n                    createIntent(LayoutAction.UpdateDialog, {\n                      part: 'dialog',\n                      subject: COMMANDS_DIALOG,\n                      options: {\n                        blockAlign: 'start',\n                      },\n                    }),\n                  );\n                },\n                properties: {\n                  label: ['open commands label', { ns: NAVTREE_PLUGIN }],\n                  icon: 'ph--magnifying-glass--regular',\n                  keyBinding: {\n                    macos: 'meta+k',\n                    windows: 'ctrl+k',\n                  },\n                },\n              },\n            ]),\n            Option.getOrElse(() => []),\n          ),\n        ),\n    }),\n  );\n"],
-  "mappings": ";;;;;;AAIA,SAASA,UAAU;AACnB,SAASC,QAAQC,YAAY;AAE7B,SAASC,cAAcC,cAAkCC,aAAaC,oBAAoB;AAC1F,SAASC,SAASC,uBAAuB;AAIzC,IAAA,4BAAe,CAACC,YACdC,YACEC,aAAaC,iBACbC,gBAAgB;EACdC,IAAIC;EACJC,SAAS,CAACC,SACRC,GAAGC,KAAK,CAACC,QACPC,KACED,IAAIH,IAAAA,GACJK,OAAOC,QAAQ,CAACN,UAAUA,MAAKH,OAAOU,UAAUF,OAAOG,KAAKR,KAAAA,IAAQK,OAAOI,KAAI,CAAA,GAC/EJ,OAAOK,IAAI,MAAM;IACf;MACEb,IAAIc;MACJC,MAAM,YAAA;AACJ,cAAM,EAAEC,iBAAiBC,SAAQ,IAAKtB,QAAQuB,cAAcrB,aAAasB,gBAAgB;AACzF,cAAMF,SACJG,aAAaC,aAAaC,cAAc;UACtCC,MAAM;UACNC,SAASV;UACTW,SAAS;YACPC,YAAY;UACd;QACF,CAAA,CAAA;MAEJ;MACAC,YAAY;QACVC,OAAO;UAAC;UAAuB;YAAEC,IAAI5B;UAAe;;QACpD6B,MAAM;QACNC,YAAY;UACVC,OAAO;UACPC,SAAS;QACX;MACF;IACF;GACD,GACDzB,OAAO0B,UAAU,MAAM,CAAA,CAAE,CAAA,CAAA;AAGjC,CAAA,CAAA;",
-  "names": ["Rx", "Option", "pipe", "Capabilities", "LayoutAction", "contributes", "createIntent", "ROOT_ID", "createExtension", "context", "contributes", "Capabilities", "AppGraphBuilder", "createExtension", "id", "NAVTREE_PLUGIN", "actions", "node", "Rx", "make", "get", "pipe", "Option", "flatMap", "ROOT_ID", "some", "none", "map", "COMMANDS_DIALOG", "data", "dispatchPromise", "dispatch", "getCapability", "IntentDispatcher", "createIntent", "LayoutAction", "UpdateDialog", "part", "subject", "options", "blockAlign", "properties", "label", "ns", "icon", "keyBinding", "macos", "windows", "getOrElse"]
-}

package/dist/lib/browser/chunk-ERDGQTH5.mjs

@@ -1,16 +0,0 @@
-// src/meta.ts
-var NAVTREE_PLUGIN = "dxos.org/plugin/navtree";
-var KEY_BINDING = "KeyBinding";
-var COMMANDS_DIALOG = `${NAVTREE_PLUGIN}/CommandsDialog`;
-var meta = {
-  id: NAVTREE_PLUGIN,
-  name: "Navtree"
-};
-
-export {
-  NAVTREE_PLUGIN,
-  KEY_BINDING,
-  COMMANDS_DIALOG,
-  meta
-};
-//# sourceMappingURL=chunk-ERDGQTH5.mjs.map

package/dist/lib/browser/chunk-ERDGQTH5.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/meta.ts"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type PluginMeta } from '@dxos/app-framework';\n\nexport const NAVTREE_PLUGIN = 'dxos.org/plugin/navtree';\n\n// TODO(wittjosiah): Factor out.\nexport const KEY_BINDING = 'KeyBinding';\n// TODO(wittjosiah): Factor out.\nexport const COMMANDS_DIALOG = `${NAVTREE_PLUGIN}/CommandsDialog`;\n\nexport const meta: PluginMeta = {\n  id: NAVTREE_PLUGIN,\n  name: 'Navtree',\n};\n"],
-  "mappings": ";AAMO,IAAMA,iBAAiB;AAGvB,IAAMC,cAAc;AAEpB,IAAMC,kBAAkB,GAAGF,cAAAA;AAE3B,IAAMG,OAAmB;EAC9BC,IAAIJ;EACJK,MAAM;AACR;",
-  "names": ["NAVTREE_PLUGIN", "KEY_BINDING", "COMMANDS_DIALOG", "meta", "id", "name"]
-}

package/dist/lib/browser/chunk-WCARAZ7J.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/capabilities/capabilities.ts"],
-  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport { defineCapability } from '@dxos/app-framework';\nimport { type Live } from '@dxos/live-object';\n\nimport { NAVTREE_PLUGIN } from '../meta';\nimport { type NavTreeItemGraphNode } from '../types';\n\nexport namespace NavTreeCapabilities {\n  export const State = defineCapability<{\n    state: Map<string, Live<{ open: boolean; current: boolean; alternateTree?: boolean }>>;\n    getItem: (path: string[]) => Live<{ open: boolean; current: boolean; alternateTree?: boolean }>;\n    setItem: (path: string[], key: 'open' | 'current' | 'alternateTree', next: boolean) => void;\n    isOpen: (path: string[], item: NavTreeItemGraphNode) => boolean;\n    isCurrent: (path: string[], item: NavTreeItemGraphNode) => boolean;\n    isAlternateTree: (path: string[], item: NavTreeItemGraphNode) => boolean;\n  }>(`${NAVTREE_PLUGIN}/capability/state`);\n}\n"],
-  "mappings": ";;;;;AAIA,SAASA,wBAAwB;UAMhBC,sBAAAA;uBACFC,QAAQC,iBAOlB,GAAGC,cAAAA,mBAAiC;AACzC,GATiBH,wBAAAA,sBAAAA,CAAAA,EAAAA;;",
-  "names": ["defineCapability", "NavTreeCapabilities", "State", "defineCapability", "NAVTREE_PLUGIN"]
-}