@dxos/plugin-navtree 0.8.4-main.406dc2a → 0.8.4-main.548089c
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lib/browser/{app-graph-builder-YAPMENYT.mjs → app-graph-builder-OHSCN3GX.mjs} +4 -4
- package/dist/lib/browser/app-graph-builder-OHSCN3GX.mjs.map +7 -0
- package/dist/lib/browser/{chunk-LPAREX6J.mjs → chunk-5VLWX4PK.mjs} +2 -2
- package/dist/lib/browser/{chunk-IMFXKPSB.mjs → chunk-7D2MPHXV.mjs} +19 -18
- package/dist/lib/browser/chunk-7D2MPHXV.mjs.map +7 -0
- package/dist/lib/browser/chunk-E6MZBCU5.mjs +19 -0
- package/dist/lib/browser/chunk-E6MZBCU5.mjs.map +7 -0
- package/dist/lib/browser/index.mjs +3 -3
- package/dist/lib/browser/{intent-resolver-TCQXGF6U.mjs → intent-resolver-YUVXVPHG.mjs} +3 -3
- package/dist/lib/browser/{keyboard-AHSAWKXA.mjs → keyboard-YYTYJW4M.mjs} +2 -2
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/browser/{react-surface-AH2TP73M.mjs → react-surface-J7MWWAGD.mjs} +4 -4
- package/dist/lib/browser/{state-2Q623V7U.mjs → state-EUSVT6BI.mjs} +3 -3
- package/dist/types/src/capabilities/index.d.ts +3 -3
- package/dist/types/src/components/CommandsDialog/CommandsDialog.d.ts.map +1 -1
- package/dist/types/src/components/CommandsDialog/CommandsTrigger.d.ts.map +1 -1
- package/dist/types/src/components/NavTreeContainer.d.ts.map +1 -1
- package/dist/types/src/experimental/Tree.stories.d.ts +0 -3
- package/dist/types/src/experimental/Tree.stories.d.ts.map +1 -1
- package/dist/types/src/meta.d.ts.map +1 -1
- package/dist/types/src/types.d.ts +1 -1
- package/dist/types/src/types.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +39 -39
- package/src/capabilities/app-graph-builder.ts +2 -2
- package/src/components/CommandsDialog/CommandsDialog.tsx +11 -3
- package/src/components/CommandsDialog/CommandsTrigger.tsx +2 -1
- package/src/components/NavTree/NavTree.stories.tsx +2 -2
- package/src/components/NavTreeContainer.tsx +39 -16
- package/src/components/Sidebar/L0Menu.tsx +4 -4
- package/src/components/Sidebar/L1Panel.tsx +0 -2
- package/src/experimental/Tree.stories.tsx +3 -6
- package/src/experimental/Tree.tsx +1 -1
- package/src/meta.ts +5 -0
- package/src/testing/app-graph-builder.ts +10 -10
- package/src/types.ts +1 -1
- package/dist/lib/browser/app-graph-builder-YAPMENYT.mjs.map +0 -7
- package/dist/lib/browser/chunk-IMFXKPSB.mjs.map +0 -7
- package/dist/lib/browser/chunk-ZENLR72O.mjs +0 -14
- package/dist/lib/browser/chunk-ZENLR72O.mjs.map +0 -7
- /package/dist/lib/browser/{chunk-LPAREX6J.mjs.map → chunk-5VLWX4PK.mjs.map} +0 -0
- /package/dist/lib/browser/{intent-resolver-TCQXGF6U.mjs.map → intent-resolver-YUVXVPHG.mjs.map} +0 -0
- /package/dist/lib/browser/{keyboard-AHSAWKXA.mjs.map → keyboard-YYTYJW4M.mjs.map} +0 -0
- /package/dist/lib/browser/{react-surface-AH2TP73M.mjs.map → react-surface-J7MWWAGD.mjs.map} +0 -0
- /package/dist/lib/browser/{state-2Q623V7U.mjs.map → state-EUSVT6BI.mjs.map} +0 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/plugin-navtree",
|
|
3
|
-
"version": "0.8.4-main.
|
|
3
|
+
"version": "0.8.4-main.548089c",
|
|
4
4
|
"description": "DXOS Surface plugin for a tree view visualization of the graph.",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
@@ -31,58 +31,58 @@
|
|
|
31
31
|
"@radix-ui/react-dismissable-layer": "1.1.5",
|
|
32
32
|
"@radix-ui/react-use-controllable-state": "1.1.0",
|
|
33
33
|
"date-fns": "^3.3.1",
|
|
34
|
-
"@dxos/app-framework": "0.8.4-main.
|
|
35
|
-
"@dxos/
|
|
36
|
-
"@dxos/
|
|
37
|
-
"@dxos/
|
|
38
|
-
"@dxos/
|
|
39
|
-
"@dxos/
|
|
40
|
-
"@dxos/
|
|
41
|
-
"@dxos/
|
|
42
|
-
"@dxos/
|
|
43
|
-
"@dxos/
|
|
44
|
-
"@dxos/
|
|
45
|
-
"@dxos/
|
|
46
|
-
"@dxos/plugin-graph": "0.8.4-main.
|
|
47
|
-
"@dxos/plugin-observability": "0.8.4-main.
|
|
48
|
-
"@dxos/protocols": "0.8.4-main.
|
|
49
|
-
"@dxos/react-ui-attention": "0.8.4-main.
|
|
50
|
-
"@dxos/react-
|
|
51
|
-
"@dxos/react-ui-
|
|
52
|
-
"@dxos/react-ui-
|
|
53
|
-
"@dxos/react-ui-
|
|
54
|
-
"@dxos/react-
|
|
55
|
-
"@dxos/
|
|
56
|
-
"@dxos/
|
|
34
|
+
"@dxos/app-framework": "0.8.4-main.548089c",
|
|
35
|
+
"@dxos/async": "0.8.4-main.548089c",
|
|
36
|
+
"@dxos/debug": "0.8.4-main.548089c",
|
|
37
|
+
"@dxos/app-graph": "0.8.4-main.548089c",
|
|
38
|
+
"@dxos/keyboard": "0.8.4-main.548089c",
|
|
39
|
+
"@dxos/lit-ui": "0.8.4-main.548089c",
|
|
40
|
+
"@dxos/live-object": "0.8.4-main.548089c",
|
|
41
|
+
"@dxos/echo": "0.8.4-main.548089c",
|
|
42
|
+
"@dxos/local-storage": "0.8.4-main.548089c",
|
|
43
|
+
"@dxos/log": "0.8.4-main.548089c",
|
|
44
|
+
"@dxos/plugin-deck": "0.8.4-main.548089c",
|
|
45
|
+
"@dxos/invariant": "0.8.4-main.548089c",
|
|
46
|
+
"@dxos/plugin-graph": "0.8.4-main.548089c",
|
|
47
|
+
"@dxos/plugin-observability": "0.8.4-main.548089c",
|
|
48
|
+
"@dxos/protocols": "0.8.4-main.548089c",
|
|
49
|
+
"@dxos/react-ui-attention": "0.8.4-main.548089c",
|
|
50
|
+
"@dxos/react-ui-list": "0.8.4-main.548089c",
|
|
51
|
+
"@dxos/react-ui-menu": "0.8.4-main.548089c",
|
|
52
|
+
"@dxos/react-ui-searchlist": "0.8.4-main.548089c",
|
|
53
|
+
"@dxos/react-ui-stack": "0.8.4-main.548089c",
|
|
54
|
+
"@dxos/react-client": "0.8.4-main.548089c",
|
|
55
|
+
"@dxos/util": "0.8.4-main.548089c",
|
|
56
|
+
"@dxos/react-ui-tabs": "0.8.4-main.548089c"
|
|
57
57
|
},
|
|
58
58
|
"devDependencies": {
|
|
59
|
-
"@effect-
|
|
59
|
+
"@effect-atom/atom-react": "^0.3.4",
|
|
60
60
|
"@effect/platform": "0.92.1",
|
|
61
61
|
"@types/react": "~19.2.2",
|
|
62
|
-
"@types/react-dom": "~19.2.
|
|
62
|
+
"@types/react-dom": "~19.2.2",
|
|
63
63
|
"effect": "3.18.3",
|
|
64
64
|
"react": "~19.2.0",
|
|
65
65
|
"react-dom": "~19.2.0",
|
|
66
66
|
"vite": "7.1.9",
|
|
67
|
-
"@dxos/
|
|
68
|
-
"@dxos/
|
|
69
|
-
"@dxos/plugin-client": "0.8.4-main.
|
|
70
|
-
"@dxos/plugin-space": "0.8.4-main.
|
|
71
|
-
"@dxos/plugin-storybook-layout": "0.8.4-main.
|
|
72
|
-
"@dxos/
|
|
73
|
-
"@dxos/
|
|
74
|
-
"@dxos/
|
|
75
|
-
"@dxos/
|
|
76
|
-
"@dxos/
|
|
67
|
+
"@dxos/plugin-attention": "0.8.4-main.548089c",
|
|
68
|
+
"@dxos/echo-signals": "0.8.4-main.548089c",
|
|
69
|
+
"@dxos/plugin-client": "0.8.4-main.548089c",
|
|
70
|
+
"@dxos/plugin-space": "0.8.4-main.548089c",
|
|
71
|
+
"@dxos/plugin-storybook-layout": "0.8.4-main.548089c",
|
|
72
|
+
"@dxos/plugin-theme": "0.8.4-main.548089c",
|
|
73
|
+
"@dxos/random": "0.8.4-main.548089c",
|
|
74
|
+
"@dxos/react-ui": "0.8.4-main.548089c",
|
|
75
|
+
"@dxos/react-ui-theme": "0.8.4-main.548089c",
|
|
76
|
+
"@dxos/storybook-utils": "0.8.4-main.548089c"
|
|
77
77
|
},
|
|
78
78
|
"peerDependencies": {
|
|
79
|
-
"@effect-
|
|
79
|
+
"@effect-atom/atom-react": "^0.3.4",
|
|
80
80
|
"@effect/platform": "^0.80.12",
|
|
81
81
|
"effect": "^3.13.3",
|
|
82
82
|
"react": "^19.0.0",
|
|
83
83
|
"react-dom": "^19.0.0",
|
|
84
|
-
"@dxos/react-ui": "0.8.4-main.
|
|
85
|
-
"@dxos/react-ui
|
|
84
|
+
"@dxos/react-ui-theme": "0.8.4-main.548089c",
|
|
85
|
+
"@dxos/react-ui": "0.8.4-main.548089c"
|
|
86
86
|
},
|
|
87
87
|
"publishConfig": {
|
|
88
88
|
"access": "public"
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
// Copyright 2025 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
import {
|
|
5
|
+
import { Atom } from '@effect-atom/atom-react';
|
|
6
6
|
import * as Function from 'effect/Function';
|
|
7
7
|
import * as Option from 'effect/Option';
|
|
8
8
|
|
|
@@ -17,7 +17,7 @@ export default (context: PluginContext) =>
|
|
|
17
17
|
createExtension({
|
|
18
18
|
id: meta.id,
|
|
19
19
|
actions: (node) =>
|
|
20
|
-
|
|
20
|
+
Atom.make((get) =>
|
|
21
21
|
Function.pipe(
|
|
22
22
|
get(node),
|
|
23
23
|
Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),
|
|
@@ -4,7 +4,8 @@
|
|
|
4
4
|
|
|
5
5
|
import React, { useMemo, useState } from 'react';
|
|
6
6
|
|
|
7
|
-
import { LayoutAction, createIntent
|
|
7
|
+
import { LayoutAction, createIntent } from '@dxos/app-framework';
|
|
8
|
+
import { useAppGraph, useIntentDispatcher } from '@dxos/app-framework/react';
|
|
8
9
|
import { type ActionLike, isAction, isActionGroup } from '@dxos/app-graph';
|
|
9
10
|
import { Keyboard, keySymbols } from '@dxos/keyboard';
|
|
10
11
|
import { useActions } from '@dxos/plugin-graph';
|
|
@@ -89,7 +90,12 @@ export const CommandsDialogContent = ({ selected: initial }: { selected?: string
|
|
|
89
90
|
return;
|
|
90
91
|
}
|
|
91
92
|
|
|
92
|
-
void dispatch(
|
|
93
|
+
void dispatch(
|
|
94
|
+
createIntent(LayoutAction.UpdateDialog, {
|
|
95
|
+
part: 'dialog',
|
|
96
|
+
options: { state: false },
|
|
97
|
+
}),
|
|
98
|
+
);
|
|
93
99
|
setTimeout(() => {
|
|
94
100
|
const node = graph.getConnections(group?.id ?? action.id, 'inbound')[0];
|
|
95
101
|
void (node && isAction(action) && action.data({ parent: node, caller: KEY_BINDING }));
|
|
@@ -97,7 +103,9 @@ export const CommandsDialogContent = ({ selected: initial }: { selected?: string
|
|
|
97
103
|
}}
|
|
98
104
|
classNames='flex items-center gap-2'
|
|
99
105
|
disabled={action.properties.disabled}
|
|
100
|
-
{...(action.properties?.testId && {
|
|
106
|
+
{...(action.properties?.testId && {
|
|
107
|
+
'data-testid': action.properties.testId,
|
|
108
|
+
})}
|
|
101
109
|
>
|
|
102
110
|
<Icon icon={action.properties.icon} size={4} />
|
|
103
111
|
<span className='grow truncate'>{label}</span>
|
|
@@ -4,7 +4,8 @@
|
|
|
4
4
|
|
|
5
5
|
import React from 'react';
|
|
6
6
|
|
|
7
|
-
import { LayoutAction, createIntent
|
|
7
|
+
import { LayoutAction, createIntent } from '@dxos/app-framework';
|
|
8
|
+
import { useIntentDispatcher } from '@dxos/app-framework/react';
|
|
8
9
|
import { Button, Icon, useTranslation } from '@dxos/react-ui';
|
|
9
10
|
|
|
10
11
|
import { COMMANDS_DIALOG, meta } from '../../meta';
|
|
@@ -15,8 +15,8 @@ import {
|
|
|
15
15
|
contributes,
|
|
16
16
|
createResolver,
|
|
17
17
|
defineCapability,
|
|
18
|
-
useCapability,
|
|
19
18
|
} from '@dxos/app-framework';
|
|
19
|
+
import { useCapability } from '@dxos/app-framework/react';
|
|
20
20
|
import { withPluginManager } from '@dxos/app-framework/testing';
|
|
21
21
|
import { live } from '@dxos/live-object';
|
|
22
22
|
import { AttentionPlugin } from '@dxos/plugin-attention';
|
|
@@ -86,7 +86,7 @@ const StoryPlank = ({ attendableId }: { attendableId: string }) => {
|
|
|
86
86
|
>
|
|
87
87
|
<StoryPlankHeading attendableId={attendableId} />
|
|
88
88
|
<StackItem.Content toolbar>
|
|
89
|
-
<Toolbar.Root classNames='border-
|
|
89
|
+
<Toolbar.Root classNames='border-be border-subduedSeparator'>
|
|
90
90
|
<Toolbar.Button>Test</Toolbar.Button>
|
|
91
91
|
</Toolbar.Root>
|
|
92
92
|
|
|
@@ -7,15 +7,8 @@ import { type Instruction, extractInstruction } from '@atlaskit/pragmatic-drag-a
|
|
|
7
7
|
import { untracked } from '@preact/signals-core';
|
|
8
8
|
import React, { memo, useCallback, useEffect, useMemo } from 'react';
|
|
9
9
|
|
|
10
|
-
import {
|
|
11
|
-
|
|
12
|
-
Surface,
|
|
13
|
-
createIntent,
|
|
14
|
-
useAppGraph,
|
|
15
|
-
useCapability,
|
|
16
|
-
useIntentDispatcher,
|
|
17
|
-
useLayout,
|
|
18
|
-
} from '@dxos/app-framework';
|
|
10
|
+
import { LayoutAction, createIntent } from '@dxos/app-framework';
|
|
11
|
+
import { Surface, useAppGraph, useCapability, useIntentDispatcher, useLayout } from '@dxos/app-framework/react';
|
|
19
12
|
import { type Node, ROOT_ID, type ReadableGraph, isAction, isActionLike } from '@dxos/app-graph';
|
|
20
13
|
import { PLANK_COMPANION_TYPE } from '@dxos/plugin-deck/types';
|
|
21
14
|
import { useConnections, useActions as useGraphActions } from '@dxos/plugin-graph';
|
|
@@ -118,7 +111,7 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
|
|
|
118
111
|
className: mx(node.properties.className, node.properties.modified && 'italic'), // TODO(burdon): Italic?
|
|
119
112
|
headingClassName: node.properties.headingClassName,
|
|
120
113
|
icon: node.properties.icon,
|
|
121
|
-
|
|
114
|
+
iconHue: node.properties.iconHue,
|
|
122
115
|
testId: node.properties.testId,
|
|
123
116
|
};
|
|
124
117
|
},
|
|
@@ -163,13 +156,23 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
|
|
|
163
156
|
}),
|
|
164
157
|
);
|
|
165
158
|
|
|
166
|
-
await dispatch(
|
|
159
|
+
await dispatch(
|
|
160
|
+
createIntent(LayoutAction.SwitchWorkspace, {
|
|
161
|
+
part: 'workspace',
|
|
162
|
+
subject: node.id,
|
|
163
|
+
}),
|
|
164
|
+
);
|
|
167
165
|
|
|
168
166
|
// Open the first item if the workspace is empty.
|
|
169
167
|
if (layout.active.length === 0) {
|
|
170
168
|
const [item] = getItems(graph, node).filter((node) => !isActionLike(node));
|
|
171
169
|
if (item && item.data) {
|
|
172
|
-
await dispatch(
|
|
170
|
+
await dispatch(
|
|
171
|
+
createIntent(LayoutAction.Open, {
|
|
172
|
+
part: 'main',
|
|
173
|
+
subject: [item.id],
|
|
174
|
+
}),
|
|
175
|
+
);
|
|
173
176
|
}
|
|
174
177
|
}
|
|
175
178
|
},
|
|
@@ -207,10 +210,19 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
|
|
|
207
210
|
);
|
|
208
211
|
} else if (option) {
|
|
209
212
|
void dispatch(
|
|
210
|
-
createIntent(LayoutAction.Close, {
|
|
213
|
+
createIntent(LayoutAction.Close, {
|
|
214
|
+
part: 'main',
|
|
215
|
+
subject: [node.id],
|
|
216
|
+
options: { state: false },
|
|
217
|
+
}),
|
|
211
218
|
);
|
|
212
219
|
} else {
|
|
213
|
-
void dispatch(
|
|
220
|
+
void dispatch(
|
|
221
|
+
createIntent(LayoutAction.ScrollIntoView, {
|
|
222
|
+
part: 'current',
|
|
223
|
+
subject: node.id,
|
|
224
|
+
}),
|
|
225
|
+
);
|
|
214
226
|
}
|
|
215
227
|
|
|
216
228
|
const defaultAction = graph.getActions(node.id).find((action) => action.properties?.disposition === 'default');
|
|
@@ -219,14 +231,25 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
|
|
|
219
231
|
}
|
|
220
232
|
|
|
221
233
|
if (!isLg) {
|
|
222
|
-
void dispatch(
|
|
234
|
+
void dispatch(
|
|
235
|
+
createIntent(LayoutAction.UpdateSidebar, {
|
|
236
|
+
part: 'sidebar',
|
|
237
|
+
options: { state: 'closed' },
|
|
238
|
+
}),
|
|
239
|
+
);
|
|
223
240
|
}
|
|
224
241
|
},
|
|
225
242
|
[graph, dispatch, isCurrent, isLg],
|
|
226
243
|
);
|
|
227
244
|
|
|
228
245
|
const handleBack = useCallback(
|
|
229
|
-
() =>
|
|
246
|
+
() =>
|
|
247
|
+
dispatch(
|
|
248
|
+
createIntent(LayoutAction.RevertWorkspace, {
|
|
249
|
+
part: 'workspace',
|
|
250
|
+
options: { revert: true },
|
|
251
|
+
}),
|
|
252
|
+
),
|
|
230
253
|
[dispatch],
|
|
231
254
|
);
|
|
232
255
|
|
|
@@ -102,7 +102,7 @@ const l0Breakpoints: Record<string, string> = {
|
|
|
102
102
|
};
|
|
103
103
|
|
|
104
104
|
const l0ItemRoot =
|
|
105
|
-
'group/l0item flex
|
|
105
|
+
'group/l0item flex is-full justify-center items-center relative data[type!="collection"]:cursor-pointer app-no-drag dx-focus-ring-group';
|
|
106
106
|
|
|
107
107
|
const l0ItemContent = 'flex justify-center items-center dx-focus-ring-group-indicator transition-colors rounded-sm';
|
|
108
108
|
|
|
@@ -119,9 +119,9 @@ const L0ItemRoot = forwardRef<HTMLElement, PropsWithChildren<L0ItemRootProps>>(
|
|
|
119
119
|
const handleClick = useL0ItemClick({ item, parent, path: itemPath }, type);
|
|
120
120
|
const rootProps =
|
|
121
121
|
type === 'tab'
|
|
122
|
-
? { value: item.id, tabIndex: 0, onClick: handleClick, 'data-testid': testId, 'data-
|
|
122
|
+
? { value: item.id, tabIndex: 0, onClick: handleClick, 'data-testid': testId, 'data-object-id': id }
|
|
123
123
|
: type !== 'collection'
|
|
124
|
-
? { onClick: handleClick, 'data-testid': testId, 'data-
|
|
124
|
+
? { onClick: handleClick, 'data-testid': testId, 'data-object-id': id }
|
|
125
125
|
: { onClick: handleClick, role: 'button' };
|
|
126
126
|
|
|
127
127
|
return (
|
|
@@ -287,7 +287,7 @@ const L0Collection = ({ item, path }: L0ItemProps) => {
|
|
|
287
287
|
role='group'
|
|
288
288
|
className='contents group/l0c'
|
|
289
289
|
aria-labelledby={`${item.id}__label`}
|
|
290
|
-
data-
|
|
290
|
+
data-object-id={id}
|
|
291
291
|
data-testid={testId}
|
|
292
292
|
>
|
|
293
293
|
{collectionItems.map((collectionItem) => (
|
|
@@ -127,7 +127,6 @@ const L1PanelHeader = ({ item, path, onBack }: L1PanelProps) => {
|
|
|
127
127
|
variant='ghost'
|
|
128
128
|
icon='ph--arrow-u-down-left--regular'
|
|
129
129
|
iconOnly
|
|
130
|
-
size={5}
|
|
131
130
|
label={t('button back')}
|
|
132
131
|
classNames={[hoverableControlItem, hoverableOpenControlItem, 'pointer-fine:pli-1']}
|
|
133
132
|
onClick={handleBack}
|
|
@@ -139,7 +138,6 @@ const L1PanelHeader = ({ item, path, onBack }: L1PanelProps) => {
|
|
|
139
138
|
variant='ghost'
|
|
140
139
|
icon={alternateTree.properties.icon ?? 'ph--placeholder--regular'}
|
|
141
140
|
iconOnly
|
|
142
|
-
size={5}
|
|
143
141
|
label={toLocalizedString(alternateTree.properties.label ?? alternateTree.id, t)}
|
|
144
142
|
classNames={[hoverableControlItem, hoverableOpenControlItem, 'pointer-fine:pli-1']}
|
|
145
143
|
onClick={handleOpen}
|
|
@@ -7,7 +7,7 @@ import React, { type JSX, type PropsWithChildren, useEffect, useState } from 're
|
|
|
7
7
|
|
|
8
8
|
import { faker } from '@dxos/random';
|
|
9
9
|
import { Icon, IconButton } from '@dxos/react-ui';
|
|
10
|
-
import { withTheme } from '@dxos/react-ui/testing';
|
|
10
|
+
import { withLayout, withTheme } from '@dxos/react-ui/testing';
|
|
11
11
|
import { mx } from '@dxos/react-ui-theme';
|
|
12
12
|
|
|
13
13
|
import { type ItemMap, Tree, type TreeNodeData, type TreeProps, visitNodes, visitor } from './Tree';
|
|
@@ -189,7 +189,7 @@ const Sidebar = ({ mutate }: { mutate?: boolean }) => {
|
|
|
189
189
|
/>
|
|
190
190
|
</div>
|
|
191
191
|
|
|
192
|
-
<div className='flex items-center my-2
|
|
192
|
+
<div className='flex items-center my-2 pli-2 gap-2'>
|
|
193
193
|
<IconButton icon='ph--plus-circle--regular' iconOnly label='Create space' onClick={handleCreateSpace} />
|
|
194
194
|
<span className='grow text-sm' onClick={handleCreateSpace}>
|
|
195
195
|
New space
|
|
@@ -203,10 +203,7 @@ const Sidebar = ({ mutate }: { mutate?: boolean }) => {
|
|
|
203
203
|
const meta = {
|
|
204
204
|
title: 'plugins/plugin-navtree/experimental/Tree',
|
|
205
205
|
component: Tree,
|
|
206
|
-
decorators: [withTheme],
|
|
207
|
-
parameters: {
|
|
208
|
-
layout: 'column',
|
|
209
|
-
},
|
|
206
|
+
decorators: [withTheme, withLayout({ container: 'column' })],
|
|
210
207
|
} satisfies Meta<typeof Tree>;
|
|
211
208
|
|
|
212
209
|
export default meta;
|
|
@@ -193,7 +193,7 @@ export const TreeNodeRow = (props: TreeNodeProps & { className?: string }) => {
|
|
|
193
193
|
<Grid
|
|
194
194
|
style={{ paddingLeft: `${(depth - 1) * 24}px` }}
|
|
195
195
|
className={mx(
|
|
196
|
-
'group
|
|
196
|
+
'group is-full items-center cursor-pointer bg-hoverSurface',
|
|
197
197
|
// TODO(burdon): Use data-active.
|
|
198
198
|
selected?.[id] && 'bg-activeSurface',
|
|
199
199
|
className,
|
package/src/meta.ts
CHANGED
|
@@ -3,10 +3,15 @@
|
|
|
3
3
|
//
|
|
4
4
|
|
|
5
5
|
import { type PluginMeta } from '@dxos/app-framework';
|
|
6
|
+
import { trim } from '@dxos/util';
|
|
6
7
|
|
|
7
8
|
export const meta: PluginMeta = {
|
|
8
9
|
id: 'dxos.org/plugin/navtree',
|
|
9
10
|
name: 'Navtree',
|
|
11
|
+
description: trim`
|
|
12
|
+
Hierarchical navigation tree for browsing spaces, folders, and objects.
|
|
13
|
+
Provides sidebar navigation with collapsible sections and quick access to workspace content.
|
|
14
|
+
`,
|
|
10
15
|
};
|
|
11
16
|
|
|
12
17
|
// TODO(wittjosiah): Factor out.
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
// Copyright 2025 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
import {
|
|
5
|
+
import { Atom } from '@effect-atom/atom-react';
|
|
6
6
|
import * as Function from 'effect/Function';
|
|
7
7
|
import * as Option from 'effect/Option';
|
|
8
8
|
|
|
@@ -28,7 +28,7 @@ export const storybookGraphBuilders = (context: PluginContext): BuilderExtension
|
|
|
28
28
|
createExtension({
|
|
29
29
|
id: 'app-menu',
|
|
30
30
|
actions: (node) =>
|
|
31
|
-
|
|
31
|
+
Atom.make((get) =>
|
|
32
32
|
Function.pipe(
|
|
33
33
|
get(node),
|
|
34
34
|
Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),
|
|
@@ -55,7 +55,7 @@ export const storybookGraphBuilders = (context: PluginContext): BuilderExtension
|
|
|
55
55
|
createExtension({
|
|
56
56
|
id: 'user-account',
|
|
57
57
|
connector: (node) =>
|
|
58
|
-
|
|
58
|
+
Atom.make((get) =>
|
|
59
59
|
Function.pipe(
|
|
60
60
|
get(node),
|
|
61
61
|
Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),
|
|
@@ -112,7 +112,7 @@ export const storybookGraphBuilders = (context: PluginContext): BuilderExtension
|
|
|
112
112
|
id: 'spaces-root',
|
|
113
113
|
position: 'hoist',
|
|
114
114
|
connector: (node) =>
|
|
115
|
-
|
|
115
|
+
Atom.make((get) =>
|
|
116
116
|
Function.pipe(
|
|
117
117
|
get(node),
|
|
118
118
|
Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),
|
|
@@ -138,7 +138,7 @@ export const storybookGraphBuilders = (context: PluginContext): BuilderExtension
|
|
|
138
138
|
createExtension({
|
|
139
139
|
id: 'spaces',
|
|
140
140
|
connector: (node) => {
|
|
141
|
-
const count =
|
|
141
|
+
const count = Atom.make((get) => {
|
|
142
142
|
let value = 3;
|
|
143
143
|
const interval = setInterval(() => {
|
|
144
144
|
if (value >= 10) {
|
|
@@ -153,7 +153,7 @@ export const storybookGraphBuilders = (context: PluginContext): BuilderExtension
|
|
|
153
153
|
return value;
|
|
154
154
|
});
|
|
155
155
|
|
|
156
|
-
return
|
|
156
|
+
return Atom.make((get) =>
|
|
157
157
|
Function.pipe(
|
|
158
158
|
get(node),
|
|
159
159
|
Option.flatMap((node) => (node.id === 'spaces-root' ? Option.some(node) : Option.none())),
|
|
@@ -179,7 +179,7 @@ export const storybookGraphBuilders = (context: PluginContext): BuilderExtension
|
|
|
179
179
|
createExtension({
|
|
180
180
|
id: 'space-actions',
|
|
181
181
|
actions: (node) =>
|
|
182
|
-
|
|
182
|
+
Atom.make((get) =>
|
|
183
183
|
Function.pipe(
|
|
184
184
|
get(node),
|
|
185
185
|
Option.flatMap((node) => (node.type === 'space' ? Option.some(node) : Option.none())),
|
|
@@ -205,7 +205,7 @@ export const storybookGraphBuilders = (context: PluginContext): BuilderExtension
|
|
|
205
205
|
createExtension({
|
|
206
206
|
id: 'objects',
|
|
207
207
|
connector: (node) => {
|
|
208
|
-
const count =
|
|
208
|
+
const count = Atom.make((get) => {
|
|
209
209
|
let value = 3;
|
|
210
210
|
const interval = setInterval(() => {
|
|
211
211
|
if (value >= 20) {
|
|
@@ -220,7 +220,7 @@ export const storybookGraphBuilders = (context: PluginContext): BuilderExtension
|
|
|
220
220
|
return value;
|
|
221
221
|
});
|
|
222
222
|
|
|
223
|
-
return
|
|
223
|
+
return Atom.make((get) =>
|
|
224
224
|
Function.pipe(
|
|
225
225
|
get(node),
|
|
226
226
|
Option.flatMap((node) => (node.type === 'space' ? Option.some(node) : Option.none())),
|
|
@@ -245,7 +245,7 @@ export const storybookGraphBuilders = (context: PluginContext): BuilderExtension
|
|
|
245
245
|
createExtension({
|
|
246
246
|
id: 'object-actions',
|
|
247
247
|
actions: (node) =>
|
|
248
|
-
|
|
248
|
+
Atom.make((get) =>
|
|
249
249
|
Function.pipe(
|
|
250
250
|
get(node),
|
|
251
251
|
Option.flatMap((node) => (node.type === 'object' ? Option.some(node) : Option.none())),
|
package/src/types.ts
CHANGED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/capabilities/app-graph-builder.ts"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport { Rx } from '@effect-rx/rx-react';\nimport * as Function from 'effect/Function';\nimport * as Option from 'effect/Option';\n\nimport { Capabilities, LayoutAction, type PluginContext, contributes, createIntent } from '@dxos/app-framework';\nimport { ROOT_ID, createExtension } from '@dxos/plugin-graph';\n\nimport { COMMANDS_DIALOG, meta } from '../meta';\n\nexport default (context: PluginContext) =>\n contributes(\n Capabilities.AppGraphBuilder,\n createExtension({\n id: meta.id,\n actions: (node) =>\n Rx.make((get) =>\n Function.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: meta.id }],\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"],
|
|
5
|
-
"mappings": ";;;;;;AAIA,SAASA,UAAU;AACnB,YAAYC,cAAc;AAC1B,YAAYC,YAAY;AAExB,SAASC,cAAcC,cAAkCC,aAAaC,oBAAoB;AAC1F,SAASC,SAASC,uBAAuB;AAIzC,IAAA,6BAAe,CAACC,YACdC,YACEC,aAAaC,iBACbC,gBAAgB;EACdC,IAAIC,KAAKD;EACTE,SAAS,CAACC,SACRC,GAAGC,KAAK,CAACC,QACEC,cACPD,IAAIH,IAAAA,GACGK,eAAQ,CAACL,UAAUA,MAAKH,OAAOS,UAAiBC,YAAKP,KAAAA,IAAeQ,YAAI,CAAA,GACxEC,WAAI,MAAM;IACf;MACEZ,IAAIa;MACJC,MAAM,YAAA;AACJ,cAAM,EAAEC,iBAAiBC,SAAQ,IAAKrB,QAAQsB,cAAcpB,aAAaqB,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,IAAI3B,KAAKD;UAAG;;QAC7C6B,MAAM;QACNC,YAAY;UACVC,OAAO;UACPC,SAAS;QACX;MACF;IACF;GACD,GACMC,iBAAU,MAAM,CAAA,CAAE,CAAA,CAAA;AAGjC,CAAA,CAAA;",
|
|
6
|
-
"names": ["Rx", "Function", "Option", "Capabilities", "LayoutAction", "contributes", "createIntent", "ROOT_ID", "createExtension", "context", "contributes", "Capabilities", "AppGraphBuilder", "createExtension", "id", "meta", "actions", "node", "Rx", "make", "get", "pipe", "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"]
|
|
7
|
-
}
|