@dxos/plugin-navtree 0.8.2-staging.7ac8446 → 0.8.2

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