@dxos/plugin-navtree 0.8.2-main.fbd8ed0 → 0.8.2-staging.4d6ad0f

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.
Files changed (27) hide show
  1. package/dist/lib/browser/{chunk-TLQLMZXU.mjs → chunk-33VLL4IJ.mjs} +2 -2
  2. package/dist/lib/browser/{chunk-TLQLMZXU.mjs.map → chunk-33VLL4IJ.mjs.map} +1 -1
  3. package/dist/lib/browser/chunk-MFAWMFJC.mjs +1418 -0
  4. package/dist/lib/browser/chunk-MFAWMFJC.mjs.map +7 -0
  5. package/dist/lib/browser/index.mjs +3 -3
  6. package/dist/lib/browser/index.mjs.map +1 -1
  7. package/dist/lib/browser/{intent-resolver-PW7B76HO.mjs → intent-resolver-NAYKKAOP.mjs} +2 -2
  8. package/dist/lib/browser/meta.json +1 -1
  9. package/dist/lib/browser/{react-surface-M3CAS7ZP.mjs → react-surface-HGA3TAQU.mjs} +3 -3
  10. package/dist/lib/browser/{state-3UBYOTQT.mjs → state-R2UMYAHN.mjs} +2 -2
  11. package/dist/types/src/components/NavTreeContainer.d.ts.map +1 -1
  12. package/dist/types/src/components/NavTreeItem/NavTreeItemAction.d.ts +1 -2
  13. package/dist/types/src/components/NavTreeItem/NavTreeItemAction.d.ts.map +1 -1
  14. package/dist/types/src/components/Sidebar/L0Menu.d.ts.map +1 -1
  15. package/dist/types/src/hooks.d.ts.map +1 -1
  16. package/package.json +36 -35
  17. package/src/components/NavTree/NavTree.stories.tsx +1 -1
  18. package/src/components/NavTreeContainer.tsx +13 -15
  19. package/src/components/NavTreeItem/NavTreeItemAction.tsx +2 -10
  20. package/src/components/Sidebar/L0Menu.tsx +3 -5
  21. package/src/components/Sidebar/L1Panel.tsx +1 -1
  22. package/src/hooks.ts +11 -12
  23. package/dist/lib/browser/chunk-UM2C5XK3.mjs +0 -1301
  24. package/dist/lib/browser/chunk-UM2C5XK3.mjs.map +0 -7
  25. /package/dist/lib/browser/{intent-resolver-PW7B76HO.mjs.map → intent-resolver-NAYKKAOP.mjs.map} +0 -0
  26. /package/dist/lib/browser/{react-surface-M3CAS7ZP.mjs.map → react-surface-HGA3TAQU.mjs.map} +0 -0
  27. /package/dist/lib/browser/{state-3UBYOTQT.mjs.map → state-R2UMYAHN.mjs.map} +0 -0
@@ -1,1301 +0,0 @@
1
- import {
2
- NavTreeCapabilities
3
- } from "./chunk-TLQLMZXU.mjs";
4
- import {
5
- COMMANDS_DIALOG,
6
- KEY_BINDING,
7
- NAVTREE_PLUGIN
8
- } from "./chunk-IEW3JD5C.mjs";
9
-
10
- // packages/plugins/plugin-navtree/src/components/CommandsDialog/CommandsDialog.tsx
11
- import React, { useMemo, useState } from "react";
12
- import { createIntent, LayoutAction, useAppGraph, useIntentDispatcher } from "@dxos/app-framework";
13
- import { isAction, isActionGroup } from "@dxos/app-graph";
14
- import { Keyboard, keySymbols } from "@dxos/keyboard";
15
- import { useActions } from "@dxos/plugin-graph";
16
- import { Button, Dialog, Icon, useTranslation, toLocalizedString } from "@dxos/react-ui";
17
- import { SearchList } from "@dxos/react-ui-searchlist";
18
- import { descriptionText, mx } from "@dxos/react-ui-theme";
19
- import { getHostPlatform } from "@dxos/util";
20
- var CommandsDialogContent = ({ selected: initial }) => {
21
- const { t } = useTranslation(NAVTREE_PLUGIN);
22
- const [selected, setSelected] = useState(initial);
23
- const { dispatchPromise: dispatch } = useIntentDispatcher();
24
- const { graph } = useAppGraph();
25
- const allActions = useMemo(() => {
26
- const current = Keyboard.singleton.getCurrentContext();
27
- const actionMap = /* @__PURE__ */ new Set();
28
- const actions2 = [];
29
- graph.traverse({
30
- visitor: (node, path) => {
31
- if ((isAction(node) || isActionGroup(node)) && !actionMap.has(node.id) && current.startsWith(path.slice(0, -1).join("/"))) {
32
- actionMap.add(node.id);
33
- actions2.push(node);
34
- }
35
- }
36
- });
37
- actions2.sort((a, b) => {
38
- return toLocalizedString(a.properties.label, t)?.toLowerCase().localeCompare(toLocalizedString(b.properties.label, t)?.toLowerCase());
39
- });
40
- return actions2;
41
- }, [
42
- graph
43
- ]);
44
- const group = allActions.find(({ id }) => id === selected);
45
- const groupActions = useActions(graph, group?.id);
46
- const actions = isActionGroup(group) ? groupActions : allActions;
47
- return /* @__PURE__ */ React.createElement(Dialog.Content, {
48
- classNames: [
49
- "md:max-is-[30rem] overflow-hidden mbs-12"
50
- ]
51
- }, /* @__PURE__ */ React.createElement(Dialog.Title, null, t("commands dialog title", {
52
- ns: NAVTREE_PLUGIN
53
- })), /* @__PURE__ */ React.createElement(SearchList.Root, {
54
- label: t("command list input placeholder"),
55
- classNames: "flex flex-col grow overflow-hidden my-2"
56
- }, /* @__PURE__ */ React.createElement(SearchList.Input, {
57
- placeholder: t("command list input placeholder"),
58
- classNames: "px-1 my-2"
59
- }), /* @__PURE__ */ React.createElement(SearchList.Content, {
60
- classNames: "max-bs-[24rem] overflow-auto"
61
- }, actions?.map((action) => {
62
- const label = toLocalizedString(action.properties.label, t);
63
- const shortcut = typeof action.properties.keyBinding === "string" ? action.properties.keyBinding : action.properties.keyBinding?.[getHostPlatform()];
64
- return /* @__PURE__ */ React.createElement(SearchList.Item, {
65
- value: label,
66
- key: action.id,
67
- onSelect: () => {
68
- if (action.properties.disabled) {
69
- return;
70
- }
71
- if (isActionGroup(action)) {
72
- setSelected(action.id);
73
- return;
74
- }
75
- void dispatch(createIntent(LayoutAction.UpdateDialog, {
76
- part: "dialog",
77
- options: {
78
- state: false
79
- }
80
- }));
81
- setTimeout(() => {
82
- const node = graph.getConnections(group?.id ?? action.id, "inbound")[0];
83
- void (node && isAction(action) && action.data({
84
- parent: node,
85
- caller: KEY_BINDING
86
- }));
87
- });
88
- },
89
- classNames: "flex items-center gap-2",
90
- disabled: action.properties.disabled,
91
- ...action.properties?.testId && {
92
- "data-testid": action.properties.testId
93
- }
94
- }, /* @__PURE__ */ React.createElement(Icon, {
95
- icon: action.properties.icon,
96
- size: 4
97
- }), /* @__PURE__ */ React.createElement("span", {
98
- className: "grow truncate"
99
- }, label), shortcut && /* @__PURE__ */ React.createElement("span", {
100
- className: mx("shrink-0", descriptionText)
101
- }, keySymbols(shortcut).join("")));
102
- }))), /* @__PURE__ */ React.createElement(Dialog.Close, {
103
- asChild: true
104
- }, /* @__PURE__ */ React.createElement(Button, {
105
- variant: "primary",
106
- classNames: "mbs-2"
107
- }, t("close label", {
108
- ns: "os"
109
- }))));
110
- };
111
-
112
- // packages/plugins/plugin-navtree/src/components/CommandsDialog/CommandsTrigger.tsx
113
- import { MagnifyingGlass } from "@phosphor-icons/react";
114
- import React2 from "react";
115
- import { createIntent as createIntent2, LayoutAction as LayoutAction2, useIntentDispatcher as useIntentDispatcher2 } from "@dxos/app-framework";
116
- import { Button as Button2, useTranslation as useTranslation2 } from "@dxos/react-ui";
117
- import { getSize } from "@dxos/react-ui-theme";
118
- var CommandsTrigger = () => {
119
- const { dispatchPromise: dispatch } = useIntentDispatcher2();
120
- const { t } = useTranslation2(NAVTREE_PLUGIN);
121
- return /* @__PURE__ */ React2.createElement(Button2, {
122
- classNames: "m-1 pli-1 lg:pli-2",
123
- onClick: () => dispatch(createIntent2(LayoutAction2.UpdateDialog, {
124
- part: "dialog",
125
- subject: COMMANDS_DIALOG,
126
- options: {
127
- blockAlign: "start"
128
- }
129
- }))
130
- }, /* @__PURE__ */ React2.createElement("span", {
131
- className: "text-description font-normal grow text-start"
132
- }, t("command list input placeholder")), /* @__PURE__ */ React2.createElement(MagnifyingGlass, {
133
- className: getSize(5)
134
- }));
135
- };
136
-
137
- // packages/plugins/plugin-navtree/src/util.ts
138
- import { isAction as isAction2, isActionLike } from "@dxos/app-graph";
139
- import { isNonNullable } from "@dxos/util";
140
- var getParent = (graph, node, path) => {
141
- const parentId = path[path.length - 2];
142
- return graph.getConnections(node.id, "inbound").find((n) => n.id === parentId);
143
- };
144
- var getPersistenceParent = (graph, node, path, persistenceClass) => {
145
- if (node.properties.acceptPersistenceClass?.has(persistenceClass)) {
146
- return node;
147
- } else {
148
- const parent = getParent(graph, node, path);
149
- return parent ? getPersistenceParent(graph, parent, path.slice(0, path.length - 1), persistenceClass) : null;
150
- }
151
- };
152
- var resolveMigrationOperation = (graph, activeNode, destinationPath, destinationRelatedNode) => {
153
- const activeClass = activeNode.properties.persistenceClass;
154
- if (destinationRelatedNode && activeClass) {
155
- const persistenceParent = getPersistenceParent(graph, destinationRelatedNode, destinationPath, activeClass);
156
- if (persistenceParent) {
157
- const activeKey = activeNode.properties.persistenceKey;
158
- if (activeKey && persistenceParent?.properties.acceptPersistenceKey) {
159
- return persistenceParent.properties.acceptPersistenceKey.has(activeKey) && persistenceParent.properties.onTransferStart ? "transfer" : persistenceParent.properties.onCopy ? "copy" : "reject";
160
- } else {
161
- return "reject";
162
- }
163
- } else {
164
- return "reject";
165
- }
166
- } else {
167
- return "reject";
168
- }
169
- };
170
- var sortActions = (actions) => actions.sort((a, b) => {
171
- if (a.properties.disposition === b.properties.disposition) {
172
- return 0;
173
- }
174
- if (a.properties.disposition === "list-item-primary") {
175
- return -1;
176
- }
177
- return 1;
178
- });
179
- var getChildren = (graph, node, path = []) => {
180
- return graph.getConnections(node.id, "outbound").map((n) => {
181
- const nextPath = [
182
- ...path,
183
- node.id
184
- ];
185
- return nextPath.includes(n.id) ? void 0 : n;
186
- }).filter(isNonNullable);
187
- };
188
- var getActions = (graph, node) => {
189
- return graph.getActions(node.id).reduce((acc, arg) => {
190
- if (arg.properties.disposition === "item") {
191
- return acc;
192
- }
193
- acc.actions.push(arg);
194
- if (!isAction2(arg)) {
195
- const actionGroup = graph.getActions(arg.id);
196
- acc.groupedActions[arg.id] = actionGroup;
197
- }
198
- return acc;
199
- }, {
200
- actions: [],
201
- groupedActions: {}
202
- });
203
- };
204
- var l0ItemType = (item) => {
205
- if (item.properties.disposition === "collection") {
206
- return "collection";
207
- } else if (isActionLike(item)) {
208
- return "action";
209
- } else if (item.properties.disposition === "navigation") {
210
- return "link";
211
- } else {
212
- return "tab";
213
- }
214
- };
215
-
216
- // packages/plugins/plugin-navtree/src/components/NavTreeContainer.tsx
217
- import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
218
- import { extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
219
- import { untracked } from "@preact/signals-core";
220
- import React9, { memo as memo2, useCallback as useCallback3, useEffect, useMemo as useMemo5 } from "react";
221
- import { createIntent as createIntent3, LayoutAction as LayoutAction3, Surface, useAppGraph as useAppGraph2, useCapability, useIntentDispatcher as useIntentDispatcher3, useLayout } from "@dxos/app-framework";
222
- import { isAction as isAction4, isActionLike as isActionLike2, ROOT_ID } from "@dxos/app-graph";
223
- import { PLANK_COMPANION_TYPE } from "@dxos/plugin-deck/types";
224
- import { useConnections } from "@dxos/plugin-graph";
225
- import { isEchoObject, isSpace } from "@dxos/react-client/echo";
226
- import { useMediaQuery as useMediaQuery2, useSidebars } from "@dxos/react-ui";
227
- import { isTreeData } from "@dxos/react-ui-list";
228
- import { mx as mx5 } from "@dxos/react-ui-theme";
229
- import { arrayMove as arrayMove2, byPosition } from "@dxos/util";
230
-
231
- // packages/plugins/plugin-navtree/src/components/NavTree/NavTree.tsx
232
- import React8, { useMemo as useMemo4 } from "react";
233
- import { Tabs as Tabs3 } from "@dxos/react-ui-tabs";
234
-
235
- // packages/plugins/plugin-navtree/src/hooks.ts
236
- var useLoadDescendents = (root) => {
237
- };
238
-
239
- // packages/plugins/plugin-navtree/src/components/NavTreeContext.tsx
240
- import { createContext, useContext } from "react";
241
- import { raise } from "@dxos/debug";
242
- var NavTreeContext = /* @__PURE__ */ createContext(null);
243
- var useNavTreeContext = () => useContext(NavTreeContext) ?? raise(new Error("Missing NavTreeContext"));
244
-
245
- // packages/plugins/plugin-navtree/src/components/Sidebar/L0Menu.tsx
246
- import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
247
- import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
248
- import { preserveOffsetOnSource } from "@atlaskit/pragmatic-drag-and-drop/element/preserve-offset-on-source";
249
- import { scrollJustEnoughIntoView } from "@atlaskit/pragmatic-drag-and-drop/element/scroll-just-enough-into-view";
250
- import { attachClosestEdge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
251
- import React4, { forwardRef, useCallback, useLayoutEffect, useMemo as useMemo2, useRef, useState as useState2 } from "react";
252
- import { invariant } from "@dxos/invariant";
253
- import { Icon as Icon2, IconButton, ListItem, ScrollArea, Tooltip, toLocalizedString as toLocalizedString2, useMediaQuery, useTranslation as useTranslation3 } from "@dxos/react-ui";
254
- import { MenuProvider, DropdownMenu } from "@dxos/react-ui-menu";
255
- import { Tabs } from "@dxos/react-ui-tabs";
256
- import { mx as mx2 } from "@dxos/react-ui-theme";
257
- import { arrayMove, getFirstTwoRenderableChars } from "@dxos/util";
258
-
259
- // packages/plugins/plugin-navtree/src/components/UserAccountAvatar/UserAccountAvatar.tsx
260
- import React3 from "react";
261
- import { Avatar } from "@dxos/react-ui";
262
- import { hexToFallback } from "@dxos/util";
263
- var UserAccountAvatar = ({ size, userId, hue, emoji, status }) => {
264
- const fallbackValue = hexToFallback(userId ?? "0");
265
- return /* @__PURE__ */ React3.createElement("div", {
266
- className: "grid place-items-center",
267
- "data-joyride": "welcome/account"
268
- }, /* @__PURE__ */ React3.createElement(Avatar.Root, null, /* @__PURE__ */ React3.createElement(Avatar.Content, {
269
- variant: "circle",
270
- size: size ?? 12,
271
- status: status ?? "active",
272
- hue: hue || fallbackValue.hue,
273
- fallback: emoji || fallbackValue.emoji,
274
- "data-testid": "treeView.userAccount"
275
- })));
276
- };
277
-
278
- // packages/plugins/plugin-navtree/src/components/Sidebar/L0Menu.tsx
279
- var __dxlog_file = "/home/runner/work/dxos/dxos/packages/plugins/plugin-navtree/src/components/Sidebar/L0Menu.tsx";
280
- var useL0ItemClick = ({ item, parent, path }, type) => {
281
- const { tab, isCurrent, onSelect, onTabChange } = useNavTreeContext();
282
- const [isLg] = useMediaQuery("lg", {
283
- ssr: false
284
- });
285
- return useCallback((event) => {
286
- switch (type) {
287
- case "action": {
288
- const { data: invoke, properties: { caller } } = item;
289
- return invoke?.(caller ? {
290
- node: parent,
291
- caller
292
- } : {
293
- node: parent
294
- });
295
- }
296
- case "tab":
297
- return onTabChange?.(item);
298
- case "link":
299
- return onSelect?.({
300
- item,
301
- path,
302
- current: !isCurrent(path, item),
303
- option: event.altKey
304
- });
305
- }
306
- }, [
307
- item,
308
- parent,
309
- type,
310
- tab,
311
- isCurrent,
312
- onSelect,
313
- onTabChange,
314
- isLg
315
- ]);
316
- };
317
- var l0Breakpoints = {
318
- lg: "hidden lg:grid"
319
- };
320
- var L0ItemRoot = /* @__PURE__ */ forwardRef(({ item, parent, path, children }, forwardedRef) => {
321
- const { getProps } = useNavTreeContext();
322
- const { id, testId } = getProps?.(item, path) ?? {};
323
- const type = l0ItemType(item);
324
- const itemPath = useMemo2(() => [
325
- ...path,
326
- item.id
327
- ], [
328
- item.id,
329
- path
330
- ]);
331
- const { t } = useTranslation3(NAVTREE_PLUGIN);
332
- const localizedString = toLocalizedString2(item.properties.label, t);
333
- const handleClick = useL0ItemClick({
334
- item,
335
- parent,
336
- path: itemPath
337
- }, type);
338
- const rootProps = type === "tab" ? {
339
- value: item.id,
340
- tabIndex: 0,
341
- onClick: handleClick,
342
- "data-testid": testId,
343
- "data-itemid": id
344
- } : type !== "collection" ? {
345
- onClick: handleClick,
346
- "data-testid": testId,
347
- "data-itemid": id
348
- } : {
349
- onClick: handleClick
350
- };
351
- const Root = type === "collection" ? "h2" : type === "tab" ? Tabs.TabPrimitive : "button";
352
- return /* @__PURE__ */ React4.createElement(Tooltip.Trigger, {
353
- asChild: true,
354
- delayDuration: 0,
355
- side: "right",
356
- content: localizedString
357
- }, /* @__PURE__ */ React4.createElement(Root, {
358
- ...rootProps,
359
- "data-type": type,
360
- className: mx2('group/l0item flex w-full justify-center items-center relative data[type!="collection"]:cursor-pointer app-no-drag dx-focus-ring-group', l0Breakpoints[item.properties.l0Breakpoint]),
361
- ref: forwardedRef
362
- }, children));
363
- });
364
- var L0Avator = ({ item }) => {
365
- const { t } = useTranslation3(NAVTREE_PLUGIN);
366
- const type = l0ItemType(item);
367
- const hue = item.properties.hue ?? null;
368
- const hueFgStyle = hue && {
369
- style: {
370
- color: `var(--dx-${hue}SurfaceText)`
371
- }
372
- };
373
- const localizedString = toLocalizedString2(item.properties.label, t);
374
- const avatarValue = useMemo2(() => type === "tab" ? getFirstTwoRenderableChars(localizedString).join("").toUpperCase() : [], [
375
- type,
376
- item.properties.label,
377
- t
378
- ]);
379
- return /* @__PURE__ */ React4.createElement("span", {
380
- role: "img",
381
- className: "place-self-center text-xl font-light",
382
- ...hueFgStyle
383
- }, avatarValue);
384
- };
385
- var L0Item = ({ item, parent, path, pinned, onRearrange }) => {
386
- const { t } = useTranslation3(NAVTREE_PLUGIN);
387
- const itemElement = useRef(null);
388
- const [closestEdge, setEdge] = useState2(null);
389
- const type = l0ItemType(item);
390
- const localizedString = toLocalizedString2(item.properties.label, t);
391
- const hue = item.properties.hue ?? null;
392
- const hueFgStyle = hue && {
393
- style: {
394
- color: `var(--dx-${hue}SurfaceText)`
395
- }
396
- };
397
- useLayoutEffect(() => {
398
- if (!itemElement.current || !onRearrange) {
399
- return;
400
- }
401
- return combine(draggable({
402
- element: itemElement.current,
403
- getInitialData: () => ({
404
- id: item.id,
405
- type: "l0Item"
406
- }),
407
- onGenerateDragPreview: ({ nativeSetDragImage, source, location }) => {
408
- document.body.setAttribute("data-drag-preview", "true");
409
- const element = source.element.querySelector("[data-frame]");
410
- scrollJustEnoughIntoView({
411
- element
412
- });
413
- const { x, y } = preserveOffsetOnSource({
414
- element,
415
- input: location.current.input
416
- })({
417
- container: element.offsetParent ?? document.body
418
- });
419
- nativeSetDragImage?.(element, x, y);
420
- },
421
- onDragStart: () => {
422
- document.body.removeAttribute("data-drag-preview");
423
- itemElement.current.closest("[data-drag-autoscroll]")?.setAttribute("data-drag-autoscroll", "active");
424
- },
425
- onDrop: () => {
426
- itemElement.current.closest("[data-drag-autoscroll]")?.setAttribute("data-drag-autoscroll", "idle");
427
- }
428
- }), dropTargetForElements({
429
- element: itemElement.current,
430
- getData: ({ input, element }) => {
431
- return attachClosestEdge({
432
- id: item.id,
433
- type: "l0Item"
434
- }, {
435
- input,
436
- element,
437
- allowedEdges: [
438
- "top",
439
- "bottom"
440
- ]
441
- });
442
- },
443
- onDragEnter: ({ self, source }) => {
444
- if (source.data.type === self.data.type) {
445
- setEdge(extractClosestEdge(self.data));
446
- }
447
- },
448
- onDrag: ({ self, source }) => {
449
- if (source.data.type === self.data.type) {
450
- setEdge(extractClosestEdge(self.data));
451
- }
452
- },
453
- onDragLeave: () => setEdge(null),
454
- onDrop: ({ self, source }) => {
455
- setEdge(null);
456
- if (source.data.type === self.data.type) {
457
- onRearrange(source.data, self.data, extractClosestEdge(self.data));
458
- }
459
- }
460
- }));
461
- }, [
462
- item,
463
- onRearrange
464
- ]);
465
- return /* @__PURE__ */ React4.createElement(L0ItemRoot, {
466
- ref: itemElement,
467
- item,
468
- parent,
469
- path
470
- }, /* @__PURE__ */ React4.createElement("div", {
471
- role: "none",
472
- "data-frame": true,
473
- className: mx2(
474
- "flex justify-center items-center dx-focus-ring-group-indicator transition-colors rounded",
475
- // TODO(burdon): Create reusable button/component and/or create var for size.
476
- pinned ? "bg-transparent w-[50px] p-2 group-hover/l0item:bg-groupSurface" : "bg-groupSurface w-[50px] h-[50px]"
477
- ),
478
- ...hue && {
479
- style: {
480
- background: `var(--dx-${hue}Surface)`
481
- }
482
- }
483
- }, item.properties.icon && /* @__PURE__ */ React4.createElement(Icon2, {
484
- icon: item.properties.icon,
485
- size: pinned ? 5 : 6,
486
- ...hueFgStyle
487
- }) || type === "tab" && item.properties.disposition !== "pin-end" && /* @__PURE__ */ React4.createElement(L0Avator, {
488
- item
489
- })), /* @__PURE__ */ React4.createElement("div", {
490
- role: "none",
491
- className: "hidden group-aria-selected/l0item:block absolute inline-start-0 inset-block-4 is-1 bg-accentSurface rounded-ie"
492
- }), /* @__PURE__ */ React4.createElement("span", {
493
- id: `${item.id}__label`,
494
- className: "sr-only"
495
- }, localizedString), onRearrange && closestEdge && /* @__PURE__ */ React4.createElement(ListItem.DropIndicator, {
496
- edge: closestEdge
497
- }));
498
- };
499
- var L0Collection = ({ item, path }) => {
500
- const navTreeContext = useNavTreeContext();
501
- useLoadDescendents(item);
502
- const collectionItems = navTreeContext.useItems(item);
503
- const groupPath = useMemo2(() => [
504
- ...path,
505
- item.id
506
- ], [
507
- item.id,
508
- path
509
- ]);
510
- const { id, testId } = navTreeContext.getProps?.(item, path) ?? {};
511
- const handleRearrange = useCallback((source, target, closestEdge) => {
512
- invariant(item.properties.onRearrangeChildren, void 0, {
513
- F: __dxlog_file,
514
- L: 266,
515
- S: void 0,
516
- A: [
517
- "item.properties.onRearrangeChildren",
518
- ""
519
- ]
520
- });
521
- const sourceIndex = collectionItems.findIndex((i) => i.id === source.id);
522
- const targetIndex = collectionItems.findIndex((i) => i.id === target.id);
523
- const insertIndex = source.id === target.id ? sourceIndex : targetIndex + (sourceIndex < targetIndex ? closestEdge === "top" ? -1 : 0 : closestEdge === "bottom" ? 1 : 0);
524
- const nextOrder = arrayMove([
525
- ...collectionItems
526
- ], sourceIndex, insertIndex);
527
- return item.properties.onRearrangeChildren(nextOrder);
528
- }, [
529
- collectionItems,
530
- item.properties.onRearrangeChildren
531
- ]);
532
- return /* @__PURE__ */ React4.createElement("div", {
533
- role: "group",
534
- className: "contents group/l0c",
535
- "aria-labelledby": `${item.id}__label`,
536
- "data-itemid": id,
537
- "data-testid": testId
538
- }, collectionItems.map((collectionItem) => /* @__PURE__ */ React4.createElement(L0Item, {
539
- key: collectionItem.id,
540
- item: collectionItem,
541
- parent: item,
542
- path: groupPath,
543
- ...item.properties.onRearrangeChildren && {
544
- onRearrange: handleRearrange
545
- }
546
- })));
547
- };
548
- var L0Menu = ({ menuActions, topLevelItems, pinnedItems, userAccountItem, parent, path }) => {
549
- const { t } = useTranslation3(NAVTREE_PLUGIN);
550
- const suppressNextTooltip = useRef(true);
551
- return /* @__PURE__ */ React4.createElement(Tabs.Tablist, {
552
- classNames: [
553
- "group/l0 absolute z-[1] inset-block-0 inline-start-0 rounded-is-lg",
554
- "grid grid-cols-[var(--l0-size)] grid-rows-[var(--rail-size)_1fr_min-content_var(--l0-size)] gap-1 contain-layout",
555
- "!is-[--l0-size] bg-baseSurface border-ie border-separator app-drag pbe-[env(safe-area-inset-bottom)]"
556
- ]
557
- }, /* @__PURE__ */ React4.createElement("div", {
558
- role: "none",
559
- className: "flex justify-center p-1"
560
- }, /* @__PURE__ */ React4.createElement(MenuProvider, null, /* @__PURE__ */ React4.createElement(DropdownMenu.Root, {
561
- group: parent,
562
- items: menuActions
563
- }, /* @__PURE__ */ React4.createElement(DropdownMenu.Trigger, {
564
- asChild: true
565
- }, /* @__PURE__ */ React4.createElement(IconButton, {
566
- iconOnly: true,
567
- icon: "ph--dots-three--regular",
568
- size: 5,
569
- label: t("app menu label"),
570
- tooltipSide: "right",
571
- classNames: "w-[50px] _bg-primary-500",
572
- suppressNextTooltip,
573
- "data-testid": "spacePlugin.addSpace"
574
- }))))), /* @__PURE__ */ React4.createElement(ScrollArea.Root, null, /* @__PURE__ */ React4.createElement(ScrollArea.Viewport, null, /* @__PURE__ */ React4.createElement("div", {
575
- role: "none",
576
- className: mx2([
577
- "flex flex-col gap-2 pbs-1",
578
- '[body[data-platform="darwin"]_&]:pbs-[calc(30px+0.25rem)]',
579
- '[body[data-platform="ios"]_&]:pbs-[max(env(safe-area-inset-top),0.25rem)]'
580
- ])
581
- }, topLevelItems.map((item) => {
582
- if (l0ItemType(item) === "collection") {
583
- return /* @__PURE__ */ React4.createElement(L0Collection, {
584
- key: item.id,
585
- item,
586
- parent,
587
- path
588
- });
589
- } else {
590
- return /* @__PURE__ */ React4.createElement(L0Item, {
591
- key: item.id,
592
- item,
593
- parent,
594
- path
595
- });
596
- }
597
- })), /* @__PURE__ */ React4.createElement(ScrollArea.Scrollbar, {
598
- orientation: "vertical"
599
- }, /* @__PURE__ */ React4.createElement(ScrollArea.Thumb, null)))), /* @__PURE__ */ React4.createElement("div", {
600
- role: "none",
601
- className: "grid grid-cols-1 auto-rows-[--rail-action] pbs-2"
602
- }, pinnedItems.filter((item) => l0ItemType(item) !== "collection").map((item) => /* @__PURE__ */ React4.createElement(L0Item, {
603
- key: item.id,
604
- item,
605
- parent,
606
- path,
607
- pinned: true
608
- }))), userAccountItem && /* @__PURE__ */ React4.createElement("div", {
609
- role: "none",
610
- className: "grid app-no-drag"
611
- }, /* @__PURE__ */ React4.createElement(L0ItemRoot, {
612
- key: userAccountItem.id,
613
- item: userAccountItem,
614
- parent,
615
- path
616
- }, /* @__PURE__ */ React4.createElement(UserAccountAvatar, {
617
- userId: userAccountItem.properties.userId,
618
- hue: userAccountItem.properties.hue,
619
- emoji: userAccountItem.properties.emoji,
620
- status: userAccountItem.properties.status,
621
- size: 11
622
- }))), /* @__PURE__ */ React4.createElement("div", {
623
- role: "none",
624
- className: 'hidden [body[data-platform="darwin"]_&]:block absolute block-start-0 is-[calc(var(--l0-size)-1px)] bs-[calc(40px+0.25rem)]',
625
- style: {
626
- background: "linear-gradient(to bottom, var(--dx-sidebarSurface) 0%, var(--dx-sidebarSurface) 70%, transparent 100%)"
627
- }
628
- }));
629
- };
630
-
631
- // packages/plugins/plugin-navtree/src/components/Sidebar/L1Panel.tsx
632
- import React7, { useCallback as useCallback2, useMemo as useMemo3 } from "react";
633
- import { Button as Button3, Icon as Icon3, IconButton as IconButton3, toLocalizedString as toLocalizedString5, useTranslation as useTranslation6 } from "@dxos/react-ui";
634
- import { Tree } from "@dxos/react-ui-list";
635
- import { Tabs as Tabs2 } from "@dxos/react-ui-tabs";
636
- import { hoverableControlItem as hoverableControlItem2, hoverableOpenControlItem as hoverableOpenControlItem2, mx as mx4 } from "@dxos/react-ui-theme";
637
-
638
- // packages/plugins/plugin-navtree/src/components/NavTreeItem/NavTreeItemAction.tsx
639
- import React5, { useRef as useRef2 } from "react";
640
- import { useTranslation as useTranslation4, toLocalizedString as toLocalizedString3, IconButton as IconButton2, useDensityContext } from "@dxos/react-ui";
641
- import { DropdownMenu as DropdownMenu2, MenuProvider as MenuProvider2 } from "@dxos/react-ui-menu";
642
- import { hoverableControlItem, hoverableOpenControlItem, mx as mx3 } from "@dxos/react-ui-theme";
643
- var fallbackIcon = "ph--placeholder--regular";
644
- var fineActionButtonProps = {
645
- size: 4,
646
- density: "fine"
647
- };
648
- var coarseActionButtonProps = {
649
- size: 5,
650
- density: "coarse"
651
- };
652
- var NavTreeItemActionDropdownMenu = ({ parent, label, icon, testId, menuActions, caller }) => {
653
- const { t } = useTranslation4(NAVTREE_PLUGIN);
654
- const suppressNextTooltip = useRef2(false);
655
- const density = useDensityContext();
656
- return /* @__PURE__ */ React5.createElement(MenuProvider2, null, /* @__PURE__ */ React5.createElement(DropdownMenu2.Root, {
657
- group: parent,
658
- items: menuActions,
659
- caller,
660
- suppressNextTooltip
661
- }, /* @__PURE__ */ React5.createElement(DropdownMenu2.Trigger, {
662
- asChild: true
663
- }, /* @__PURE__ */ React5.createElement(IconButton2, {
664
- ...density === "coarse" ? coarseActionButtonProps : fineActionButtonProps,
665
- classNames: mx3("shrink-0 pli-2 pointer-fine:pli-1", hoverableControlItem, hoverableOpenControlItem),
666
- variant: "ghost",
667
- icon: icon ?? fallbackIcon,
668
- iconOnly: true,
669
- label: toLocalizedString3(label, t),
670
- "data-testid": testId,
671
- suppressNextTooltip
672
- }))));
673
- };
674
- var NavTreeItemMonolithicAction = ({ parent, properties: { disabled, caller, testId, icon, variant = "ghost", iconOnly = true } = {
675
- label: "never"
676
- }, data: invoke, baseLabel }) => {
677
- const density = useDensityContext();
678
- return /* @__PURE__ */ React5.createElement(IconButton2, {
679
- ...density === "coarse" ? coarseActionButtonProps : fineActionButtonProps,
680
- variant,
681
- classNames: mx3("shrink-0", hoverableControlItem, hoverableOpenControlItem, iconOnly ? "pli-2 pointer-fine:pli-1" : "p-2 pointer-fine:p-2 mie-1"),
682
- icon: icon ?? fallbackIcon,
683
- iconOnly,
684
- label: baseLabel,
685
- disabled,
686
- onClick: (event) => {
687
- if (disabled) {
688
- return;
689
- }
690
- event.stopPropagation();
691
- void invoke?.(caller ? {
692
- parent,
693
- caller
694
- } : {
695
- parent
696
- });
697
- },
698
- "data-testid": testId
699
- });
700
- };
701
- var NavTreeItemAction = ({ monolithic, menuActions, parent: node, ...props }) => {
702
- const { t } = useTranslation4(NAVTREE_PLUGIN);
703
- const monolithicAction = menuActions?.length === 1 && menuActions[0];
704
- const baseLabel = toLocalizedString3(monolithicAction ? monolithicAction.properties.label : props.label, t);
705
- return monolithic && menuActions?.length === 1 ? /* @__PURE__ */ React5.createElement(NavTreeItemMonolithicAction, {
706
- baseLabel,
707
- parent: node,
708
- ...menuActions[0]
709
- }) : /* @__PURE__ */ React5.createElement(NavTreeItemActionDropdownMenu, {
710
- ...props,
711
- label: baseLabel,
712
- parent: node,
713
- menuActions
714
- });
715
- };
716
-
717
- // packages/plugins/plugin-navtree/src/components/NavTreeItem/NavTreeItemColumns.tsx
718
- import React6, { Fragment, memo } from "react";
719
- import { isAction as isAction3 } from "@dxos/app-graph";
720
- import { DensityProvider, Popover, toLocalizedString as toLocalizedString4, Treegrid, useTranslation as useTranslation5 } from "@dxos/react-ui";
721
- var NavTreeItemColumns = /* @__PURE__ */ memo(({ path, item, open, density = "fine" }) => {
722
- const { t } = useTranslation5(NAVTREE_PLUGIN);
723
- const { getActions: getActions2, renderItemEnd: ItemEnd, popoverAnchorId } = useNavTreeContext();
724
- const level = path.length - 2;
725
- const { actions: _actions, groupedActions } = getActions2(item);
726
- const [primaryAction, ...secondaryActions] = _actions.toSorted((a, b) => a.properties?.disposition === "list-item-primary" ? -1 : 1);
727
- const actions = (primaryAction?.properties?.disposition === "list-item-primary" ? secondaryActions : _actions).flatMap((action) => isAction3(action) ? [
728
- action
729
- ] : []).filter((action) => !action.properties?.hidden);
730
- const ActionRoot = popoverAnchorId === `dxos.org/ui/${NAV_TREE_ITEM}/${item.id}` ? Popover.Anchor : Fragment;
731
- useLoadDescendents(item);
732
- useLoadDescendents(primaryAction && !isAction3(primaryAction) ? primaryAction : void 0);
733
- return /* @__PURE__ */ React6.createElement(DensityProvider, {
734
- density
735
- }, /* @__PURE__ */ React6.createElement("div", {
736
- role: "none",
737
- className: "contents app-no-drag"
738
- }, primaryAction?.properties?.disposition === "list-item-primary" && !primaryAction?.properties?.disabled ? /* @__PURE__ */ React6.createElement(NavTreeItemAction, {
739
- testId: primaryAction.properties?.testId,
740
- label: toLocalizedString4(primaryAction.properties?.label, t),
741
- icon: primaryAction.properties?.icon ?? "ph--placeholder--regular",
742
- parent: item,
743
- monolithic: isAction3(primaryAction),
744
- menuActions: isAction3(primaryAction) ? [
745
- primaryAction
746
- ] : groupedActions[primaryAction.id],
747
- menuType: primaryAction.properties?.menuType,
748
- caller: NAV_TREE_ITEM
749
- }) : /* @__PURE__ */ React6.createElement(Treegrid.Cell, null), /* @__PURE__ */ React6.createElement(ActionRoot, null, actions.length > 0 ? /* @__PURE__ */ React6.createElement(NavTreeItemAction, {
750
- testId: `navtree.treeItem.actionsLevel${level}`,
751
- label: t("tree item actions label"),
752
- icon: "ph--dots-three-vertical--regular",
753
- parent: item,
754
- menuActions: actions,
755
- menuType: "dropdown",
756
- caller: NAV_TREE_ITEM
757
- }) : /* @__PURE__ */ React6.createElement(Treegrid.Cell, null)), ItemEnd && /* @__PURE__ */ React6.createElement(ItemEnd, {
758
- node: item,
759
- open
760
- })));
761
- });
762
-
763
- // packages/plugins/plugin-navtree/src/components/Sidebar/L1Panel.tsx
764
- var headingBackButtonLabel = "inset-0 min-is-0 truncate flex items-center pis-2";
765
- var TitleButton = ({ title, onClick }) => {
766
- return /* @__PURE__ */ React7.createElement(Button3, {
767
- variant: "ghost",
768
- classNames: "pli-1 flex-1 group text-start justify-start bs-[--rail-action] font-normal",
769
- onClick
770
- }, /* @__PURE__ */ React7.createElement(Icon3, {
771
- icon: "ph--caret-left--bold",
772
- size: 3
773
- }), /* @__PURE__ */ React7.createElement("span", {
774
- className: mx4(headingBackButtonLabel)
775
- }, title));
776
- };
777
- var L1Panel = ({ open, item, path, currentItemId, onBack }) => {
778
- const { isAlternateTree, setAlternateTree, ...navTreeContext } = useNavTreeContext();
779
- const { t } = useTranslation6(NAVTREE_PLUGIN);
780
- const alternateTree = navTreeContext.useItems(item, {
781
- disposition: "alternate-tree"
782
- })[0];
783
- const alternatePath = useMemo3(() => [
784
- ...path,
785
- item.id
786
- ], [
787
- item.id,
788
- path
789
- ]);
790
- const handleOpen = useCallback2(() => setAlternateTree?.(alternatePath, true), [
791
- alternatePath,
792
- setAlternateTree
793
- ]);
794
- const isAlternate = isAlternateTree?.(alternatePath, item) ?? false;
795
- const useAlternateItems = useCallback2((node, { disposition } = {}) => {
796
- return navTreeContext.useItems(node, {
797
- disposition,
798
- sort: node?.id === alternateTree.id
799
- });
800
- }, [
801
- navTreeContext,
802
- alternateTree
803
- ]);
804
- const handleBack = useCallback2(() => {
805
- if (isAlternate) {
806
- setAlternateTree?.(alternatePath, false);
807
- } else {
808
- onBack?.();
809
- }
810
- }, [
811
- isAlternate,
812
- onBack,
813
- alternatePath,
814
- setAlternateTree
815
- ]);
816
- const title = toLocalizedString5(item.properties.label, t);
817
- const backCapable = item.id.startsWith("!") || isAlternate;
818
- return /* @__PURE__ */ React7.createElement(Tabs2.Tabpanel, {
819
- key: item.id,
820
- value: item.id,
821
- classNames: [
822
- "absolute inset-block-0 inline-end-0",
823
- "is-[calc(100%-var(--l0-size))] lg:is-[--l1-size] grid-cols-1 grid-rows-[var(--rail-size)_1fr]",
824
- "pbs-[env(safe-area-inset-top)]",
825
- item.id === currentItemId && "grid"
826
- ],
827
- tabIndex: -1,
828
- "aria-label": title,
829
- ...!open && {
830
- inert: "true"
831
- }
832
- }, item.id === currentItemId && /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement("h2", {
833
- className: "flex items-center border-be border-separator app-drag pli-1"
834
- }, backCapable ? /* @__PURE__ */ React7.createElement(TitleButton, {
835
- title,
836
- onClick: handleBack
837
- }) : /* @__PURE__ */ React7.createElement("span", {
838
- className: "flex-1 truncate min-is-0 pis-6"
839
- }, title), alternateTree && !isAlternate && /* @__PURE__ */ React7.createElement(IconButton3, {
840
- variant: "ghost",
841
- classNames: mx4("shrink-0", hoverableControlItem2, hoverableOpenControlItem2, "pli-2 pointer-fine:pli-1"),
842
- iconOnly: true,
843
- size: 5,
844
- density: "coarse",
845
- icon: alternateTree.properties.icon ?? "ph--placeholder--regular",
846
- label: toLocalizedString5(alternateTree.properties.label ?? alternateTree.id, t),
847
- "data-testid": "treeView.alternateTreeButton",
848
- onClick: handleOpen
849
- }), /* @__PURE__ */ React7.createElement(NavTreeItemColumns, {
850
- path,
851
- item,
852
- open: true,
853
- density: "coarse"
854
- })), /* @__PURE__ */ React7.createElement("div", {
855
- role: "none",
856
- className: "overflow-y-auto"
857
- }, isAlternate ? /* @__PURE__ */ React7.createElement(Tree, {
858
- ...navTreeContext,
859
- useItems: useAlternateItems,
860
- id: alternateTree.id,
861
- root: alternateTree,
862
- path: alternatePath,
863
- levelOffset: 5,
864
- gridTemplateColumns: "[tree-row-start] 1fr min-content min-content min-content [tree-row-end]",
865
- renderColumns: NavTreeItemColumns
866
- }) : /* @__PURE__ */ React7.createElement(Tree, {
867
- ...navTreeContext,
868
- id: item.id,
869
- root: item,
870
- path,
871
- levelOffset: 5,
872
- draggable: true,
873
- gridTemplateColumns: "[tree-row-start] 1fr min-content min-content min-content [tree-row-end]",
874
- renderColumns: NavTreeItemColumns
875
- }))));
876
- };
877
- var L1PanelCollection = ({ item, path, ...props }) => {
878
- const { useItems: useItems2 } = useNavTreeContext();
879
- useLoadDescendents(item);
880
- const collectionItems = useItems2(item);
881
- const groupPath = useMemo3(() => [
882
- ...path,
883
- item.id
884
- ], [
885
- item.id,
886
- path
887
- ]);
888
- return /* @__PURE__ */ React7.createElement(React7.Fragment, null, collectionItems.filter((item2) => l0ItemType(item2) === "tab").map((item2) => /* @__PURE__ */ React7.createElement(L1Panel, {
889
- key: item2.id,
890
- item: item2,
891
- path: groupPath,
892
- ...props
893
- })));
894
- };
895
- var L1Panels = ({ topLevelItems, onBack, ...props }) => {
896
- return /* @__PURE__ */ React7.createElement(React7.Fragment, null, topLevelItems.map((item) => {
897
- const type = l0ItemType(item);
898
- switch (type) {
899
- case "collection":
900
- return /* @__PURE__ */ React7.createElement(L1PanelCollection, {
901
- key: item.id,
902
- item,
903
- ...props
904
- });
905
- case "tab":
906
- return /* @__PURE__ */ React7.createElement(L1Panel, {
907
- key: item.id,
908
- item,
909
- ...props,
910
- onBack
911
- });
912
- default:
913
- return null;
914
- }
915
- }));
916
- };
917
-
918
- // packages/plugins/plugin-navtree/src/components/NavTree/NavTree.tsx
919
- var NAV_TREE_ITEM = "NavTreeItem";
920
- var NavTree = ({ id, root, ...props }) => {
921
- const { tab, useItems: useItems2, onBack } = useNavTreeContext();
922
- const topLevelActions = useItems2(root, {
923
- disposition: "menu",
924
- sort: true
925
- });
926
- const topLevelCollections = useItems2(root, {
927
- disposition: "collection"
928
- });
929
- const topLevelWorkspaces = useItems2(root, {
930
- disposition: "workspace"
931
- });
932
- const topLevelNavigation = useItems2(root, {
933
- disposition: "navigation"
934
- });
935
- const l0Items = useMemo4(() => [
936
- // prettier-ignore
937
- ...topLevelCollections,
938
- ...topLevelWorkspaces,
939
- ...topLevelNavigation
940
- ], [
941
- topLevelCollections,
942
- topLevelWorkspaces,
943
- topLevelNavigation
944
- ]);
945
- const pinnedItems = useItems2(root, {
946
- disposition: "pin-end",
947
- sort: true
948
- });
949
- const userAccountItem = useItems2(root, {
950
- disposition: "user-account"
951
- })[0];
952
- const topLevelItems = useMemo4(() => [
953
- // prettier-ignore
954
- ...l0Items,
955
- ...pinnedItems,
956
- ...userAccountItem ? [
957
- userAccountItem
958
- ] : []
959
- ], [
960
- l0Items,
961
- pinnedItems,
962
- userAccountItem
963
- ]);
964
- useLoadDescendents(root);
965
- const path = useMemo4(() => [
966
- id
967
- ], [
968
- id
969
- ]);
970
- return /* @__PURE__ */ React8.createElement(Tabs3.Root, {
971
- value: tab,
972
- orientation: "vertical",
973
- verticalVariant: "stateless",
974
- classNames: "relative"
975
- }, /* @__PURE__ */ React8.createElement(L0Menu, {
976
- menuActions: topLevelActions,
977
- topLevelItems: l0Items,
978
- pinnedItems,
979
- userAccountItem,
980
- path,
981
- parent: root
982
- }), /* @__PURE__ */ React8.createElement(L1Panels, {
983
- topLevelItems,
984
- path,
985
- currentItemId: tab,
986
- onBack,
987
- ...props
988
- }));
989
- };
990
-
991
- // packages/plugins/plugin-navtree/src/capabilities/index.ts
992
- import { lazy } from "@dxos/app-framework";
993
- var AppGraphBuilder = lazy(() => import("./app-graph-builder-P7AY3K72.mjs"));
994
- var IntentResolver = lazy(() => import("./intent-resolver-PW7B76HO.mjs"));
995
- var Keyboard2 = lazy(() => import("./keyboard-DDFATRUG.mjs"));
996
- var ReactSurface = lazy(() => import("./react-surface-M3CAS7ZP.mjs"));
997
- var State = lazy(() => import("./state-3UBYOTQT.mjs"));
998
-
999
- // packages/plugins/plugin-navtree/src/components/NavTreeContainer.tsx
1000
- var NODE_TYPE = "dxos/app-graph/node";
1001
- var renderItemEnd = ({ node, open }) => /* @__PURE__ */ React9.createElement(Surface, {
1002
- role: "navtree-item-end",
1003
- data: {
1004
- id: node.id,
1005
- subject: node.data,
1006
- open
1007
- },
1008
- limit: 1
1009
- });
1010
- var getChildrenFilter = (node) => untracked(() => !isActionLike2(node) && node.type !== PLANK_COMPANION_TYPE);
1011
- var filterItems = (node, disposition) => {
1012
- if (!disposition && (node.properties.disposition === "hidden" || node.properties.disposition === "alternate-tree")) {
1013
- return false;
1014
- } else if (!disposition) {
1015
- const action = isAction4(node);
1016
- return !action || node.properties.disposition === "item";
1017
- } else {
1018
- return node.properties.disposition === disposition;
1019
- }
1020
- };
1021
- var getItems = (graph, node, disposition) => {
1022
- return graph.getConnections(node?.id ?? ROOT_ID, "outbound").filter((node2) => filterItems(node2, disposition));
1023
- };
1024
- var useItems = (node, options) => {
1025
- const { graph } = useAppGraph2();
1026
- const connections = useConnections(graph, node?.id ?? ROOT_ID).filter((node2) => filterItems(node2, options?.disposition));
1027
- return options?.sort ? connections.toSorted((a, b) => byPosition(a.properties, b.properties)) : connections;
1028
- };
1029
- var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar }) => {
1030
- const [isLg] = useMediaQuery2("lg", {
1031
- ssr: false
1032
- });
1033
- const { dispatchPromise: dispatch } = useIntentDispatcher3();
1034
- const { graph } = useAppGraph2();
1035
- const { isOpen, isCurrent, isAlternateTree, setItem } = useCapability(NavTreeCapabilities.State);
1036
- const layout = useLayout();
1037
- const { navigationSidebarState } = useSidebars(NAVTREE_PLUGIN);
1038
- const getActions2 = useCallback3((node) => getActions(graph, node), [
1039
- graph
1040
- ]);
1041
- const getProps = useCallback3((node, path) => {
1042
- const children = getChildren(graph, node, path).filter(getChildrenFilter);
1043
- const parentOf = children.length > 0 ? children.map(({ id }) => id) : node.properties.role === "branch" ? [] : void 0;
1044
- return {
1045
- id: node.id,
1046
- label: node.properties.label ?? node.id,
1047
- parentOf,
1048
- icon: node.properties.icon,
1049
- disabled: node.properties.disabled,
1050
- className: mx5(node.properties.modified && "italic", node.properties.className),
1051
- headingClassName: node.properties.headingClassName,
1052
- testId: node.properties.testId
1053
- };
1054
- }, [
1055
- graph
1056
- ]);
1057
- const handleOpenChange = useCallback3(({ item: { id }, path, open }) => {
1058
- setItem(path, "open", open);
1059
- }, [
1060
- graph
1061
- ]);
1062
- const handleTabChange = useCallback3(async (node) => {
1063
- await dispatch(createIntent3(LayoutAction3.UpdateSidebar, {
1064
- part: "sidebar",
1065
- options: {
1066
- state: node.id === tab ? navigationSidebarState === "expanded" ? isLg ? "collapsed" : "closed" : "expanded" : "expanded"
1067
- }
1068
- }));
1069
- await dispatch(createIntent3(LayoutAction3.SwitchWorkspace, {
1070
- part: "workspace",
1071
- subject: node.id
1072
- }));
1073
- if (layout.active.length === 0) {
1074
- const [item] = getItems(graph, node).filter((node2) => !isActionLike2(node2));
1075
- if (item && item.data) {
1076
- await dispatch(createIntent3(LayoutAction3.Open, {
1077
- part: "main",
1078
- subject: [
1079
- item.id
1080
- ]
1081
- }));
1082
- }
1083
- }
1084
- }, [
1085
- dispatch,
1086
- layout.active,
1087
- tab,
1088
- navigationSidebarState,
1089
- isLg
1090
- ]);
1091
- const canDrop = useCallback3((source, target) => {
1092
- const sourceNode = source.item;
1093
- const targetNode = target.item;
1094
- if (isSpace(targetNode.data)) {
1095
- return isEchoObject(sourceNode.data) || isSpace(sourceNode.data);
1096
- } else if (isEchoObject(targetNode.data)) {
1097
- return isEchoObject(sourceNode.data);
1098
- } else {
1099
- return false;
1100
- }
1101
- }, []);
1102
- const handleSelect = useCallback3(({ item: node, path, option }) => {
1103
- if (!node.data) {
1104
- return;
1105
- }
1106
- if (isAction4(node)) {
1107
- const [parent] = graph.getConnections(node.id, "inbound");
1108
- void (parent && node.data({
1109
- parent,
1110
- caller: NAV_TREE_ITEM
1111
- }));
1112
- return;
1113
- }
1114
- const current = isCurrent(path, node);
1115
- if (!current) {
1116
- void dispatch(createIntent3(LayoutAction3.Open, {
1117
- part: "main",
1118
- subject: [
1119
- node.id
1120
- ],
1121
- options: {
1122
- key: node.properties.key
1123
- }
1124
- }));
1125
- } else if (option) {
1126
- void dispatch(createIntent3(LayoutAction3.Close, {
1127
- part: "main",
1128
- subject: [
1129
- node.id
1130
- ],
1131
- options: {
1132
- state: false
1133
- }
1134
- }));
1135
- } else {
1136
- void dispatch(createIntent3(LayoutAction3.ScrollIntoView, {
1137
- part: "current",
1138
- subject: node.id
1139
- }));
1140
- }
1141
- const defaultAction = graph.getActions(node.id).find((action) => action.properties?.disposition === "default");
1142
- if (isAction4(defaultAction)) {
1143
- void defaultAction.data();
1144
- }
1145
- if (!isLg) {
1146
- void dispatch(createIntent3(LayoutAction3.UpdateSidebar, {
1147
- part: "sidebar",
1148
- options: {
1149
- state: "closed"
1150
- }
1151
- }));
1152
- }
1153
- }, [
1154
- graph,
1155
- dispatch,
1156
- isCurrent,
1157
- isLg
1158
- ]);
1159
- const handleBack = useCallback3(() => dispatch(createIntent3(LayoutAction3.RevertWorkspace, {
1160
- part: "workspace",
1161
- options: {
1162
- revert: true
1163
- }
1164
- })), [
1165
- dispatch
1166
- ]);
1167
- useEffect(() => {
1168
- return monitorForElements({
1169
- canMonitor: ({ source }) => isTreeData(source.data),
1170
- onDrop: ({ location, source }) => {
1171
- if (!location.current.dropTargets.length) {
1172
- return;
1173
- }
1174
- const target = location.current.dropTargets[0];
1175
- const instruction = extractInstruction(target.data);
1176
- if (instruction !== null && instruction.type !== "instruction-blocked") {
1177
- const sourceNode = source.data.item;
1178
- const targetNode = target.data.item;
1179
- const sourcePath = source.data.path;
1180
- const targetPath = target.data.path;
1181
- const operation = sourcePath.slice(0, -1).join() === targetPath.slice(0, -1).join() && instruction.type !== "make-child" ? "rearrange" : resolveMigrationOperation(graph, sourceNode, targetPath, targetNode);
1182
- const sourceParent = getParent(graph, sourceNode, sourcePath);
1183
- const targetParent = getParent(graph, targetNode, targetPath);
1184
- const sourceItems = getItems(graph, sourceParent);
1185
- const targetItems = getItems(graph, targetParent);
1186
- const sourceIndex = sourceItems.findIndex(({ id }) => id === sourceNode.id);
1187
- const targetIndex = targetItems.findIndex(({ id }) => id === targetNode.id);
1188
- const migrationIndex = instruction.type === "make-child" ? void 0 : instruction.type === "reorder-below" ? targetIndex + 1 : targetIndex;
1189
- switch (operation) {
1190
- case "rearrange": {
1191
- const nextItems = sourceItems.map(({ data }) => data);
1192
- arrayMove2(nextItems, sourceIndex, targetIndex);
1193
- void sourceParent?.properties.onRearrangeChildren?.(nextItems);
1194
- break;
1195
- }
1196
- case "copy": {
1197
- const target2 = instruction.type === "make-child" ? targetNode : targetParent;
1198
- void target2?.properties.onCopy?.(sourceNode, migrationIndex);
1199
- break;
1200
- }
1201
- case "transfer": {
1202
- const target2 = instruction.type === "make-child" ? targetNode : targetParent;
1203
- if (!target2?.properties.onTransferStart || !sourceParent?.properties.onTransferEnd) {
1204
- break;
1205
- }
1206
- void target2?.properties.onTransferStart(sourceNode, migrationIndex);
1207
- void sourceParent?.properties.onTransferEnd?.(sourceNode, target2);
1208
- break;
1209
- }
1210
- }
1211
- }
1212
- }
1213
- });
1214
- }, [
1215
- graph
1216
- ]);
1217
- const setAlternateTree = useCallback3((path, open) => {
1218
- setItem(path, "alternateTree", open);
1219
- }, [
1220
- setItem
1221
- ]);
1222
- const navTreeContextValue = useMemo5(() => ({
1223
- useItems,
1224
- tab,
1225
- getActions: getActions2,
1226
- // loadDescendents,
1227
- renderItemEnd,
1228
- popoverAnchorId,
1229
- topbar,
1230
- getProps,
1231
- isCurrent,
1232
- isOpen,
1233
- canDrop,
1234
- isAlternateTree,
1235
- setAlternateTree,
1236
- onTabChange: handleTabChange,
1237
- onOpenChange: handleOpenChange,
1238
- onSelect: handleSelect,
1239
- onBack: handleBack
1240
- }), [
1241
- tab,
1242
- getActions2,
1243
- // loadDescendents,
1244
- renderItemEnd,
1245
- popoverAnchorId,
1246
- topbar,
1247
- getProps,
1248
- isCurrent,
1249
- isOpen,
1250
- canDrop,
1251
- isAlternateTree,
1252
- setAlternateTree,
1253
- handleTabChange,
1254
- handleOpenChange,
1255
- handleSelect,
1256
- handleBack
1257
- ]);
1258
- return /* @__PURE__ */ React9.createElement(NavTreeContext.Provider, {
1259
- value: navTreeContextValue
1260
- }, /* @__PURE__ */ React9.createElement(NavTree, {
1261
- id: ROOT_ID,
1262
- root: graph.root,
1263
- open: layout.sidebarOpen
1264
- }));
1265
- });
1266
-
1267
- // packages/plugins/plugin-navtree/src/components/NavTreeDocumentTitle.tsx
1268
- import { useEffect as useEffect2 } from "react";
1269
- import { toLocalizedString as toLocalizedString6, useTranslation as useTranslation7 } from "@dxos/react-ui";
1270
- var NavTreeDocumentTitle = ({ node }) => {
1271
- const { t } = useTranslation7(NAVTREE_PLUGIN);
1272
- useEffect2(() => {
1273
- document.title = node ? toLocalizedString6(node.properties.label, t) : t("current app name", {
1274
- ns: "appkit"
1275
- });
1276
- }, [
1277
- node?.properties?.label
1278
- ]);
1279
- return null;
1280
- };
1281
-
1282
- export {
1283
- CommandsDialogContent,
1284
- CommandsTrigger,
1285
- getParent,
1286
- getPersistenceParent,
1287
- resolveMigrationOperation,
1288
- sortActions,
1289
- getChildren,
1290
- getActions,
1291
- l0ItemType,
1292
- NODE_TYPE,
1293
- NavTreeContainer,
1294
- NavTreeDocumentTitle,
1295
- AppGraphBuilder,
1296
- IntentResolver,
1297
- Keyboard2 as Keyboard,
1298
- ReactSurface,
1299
- State
1300
- };
1301
- //# sourceMappingURL=chunk-UM2C5XK3.mjs.map