@dxos/plugin-navtree 0.8.4-main.84f28bd → 0.8.4-main.ae835ea

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 (137) hide show
  1. package/dist/lib/browser/{app-graph-builder-5J4LRWDX.mjs → app-graph-builder-D7NLWZLU.mjs} +12 -11
  2. package/dist/lib/browser/app-graph-builder-D7NLWZLU.mjs.map +7 -0
  3. package/dist/lib/browser/{chunk-WCARAZ7J.mjs → chunk-5VLWX4PK.mjs} +4 -4
  4. package/dist/lib/browser/chunk-5VLWX4PK.mjs.map +7 -0
  5. package/dist/lib/browser/{chunk-TZA65AKW.mjs → chunk-BNGPXJB7.mjs} +312 -258
  6. package/dist/lib/browser/chunk-BNGPXJB7.mjs.map +7 -0
  7. package/dist/lib/browser/chunk-E6MZBCU5.mjs +19 -0
  8. package/dist/lib/browser/chunk-E6MZBCU5.mjs.map +7 -0
  9. package/dist/lib/browser/index.mjs +8 -11
  10. package/dist/lib/browser/index.mjs.map +3 -3
  11. package/dist/lib/browser/{intent-resolver-3XYN2CBU.mjs → intent-resolver-YUVXVPHG.mjs} +7 -7
  12. package/dist/lib/browser/intent-resolver-YUVXVPHG.mjs.map +7 -0
  13. package/dist/lib/browser/{keyboard-QRS6WOQH.mjs → keyboard-YYTYJW4M.mjs} +4 -4
  14. package/dist/lib/{node-esm/keyboard-MOZWHFUM.mjs.map → browser/keyboard-YYTYJW4M.mjs.map} +2 -2
  15. package/dist/lib/browser/meta.json +1 -1
  16. package/dist/lib/browser/{react-surface-N2HPMYCU.mjs → react-surface-7OUBD57A.mjs} +10 -10
  17. package/dist/lib/browser/react-surface-7OUBD57A.mjs.map +7 -0
  18. package/dist/lib/browser/{state-54DY3DOY.mjs → state-EUSVT6BI.mjs} +7 -7
  19. package/dist/lib/browser/state-EUSVT6BI.mjs.map +7 -0
  20. package/dist/types/src/NavTreePlugin.d.ts +1 -1
  21. package/dist/types/src/NavTreePlugin.d.ts.map +1 -1
  22. package/dist/types/src/capabilities/app-graph-builder.d.ts +1 -1
  23. package/dist/types/src/capabilities/app-graph-builder.d.ts.map +1 -1
  24. package/dist/types/src/capabilities/capabilities.d.ts.map +1 -1
  25. package/dist/types/src/capabilities/index.d.ts +18 -15
  26. package/dist/types/src/capabilities/index.d.ts.map +1 -1
  27. package/dist/types/src/capabilities/intent-resolver.d.ts +2 -2
  28. package/dist/types/src/capabilities/intent-resolver.d.ts.map +1 -1
  29. package/dist/types/src/capabilities/keyboard.d.ts +1 -1
  30. package/dist/types/src/capabilities/keyboard.d.ts.map +1 -1
  31. package/dist/types/src/capabilities/react-surface.d.ts +1 -1
  32. package/dist/types/src/capabilities/state.d.ts +2 -2
  33. package/dist/types/src/capabilities/state.d.ts.map +1 -1
  34. package/dist/types/src/components/CommandsDialog/CommandsTrigger.d.ts.map +1 -1
  35. package/dist/types/src/components/NavTree/NavTree.d.ts +2 -2
  36. package/dist/types/src/components/NavTree/NavTree.d.ts.map +1 -1
  37. package/dist/types/src/components/NavTree/NavTree.stories.d.ts +26 -4
  38. package/dist/types/src/components/NavTree/NavTree.stories.d.ts.map +1 -1
  39. package/dist/types/src/components/NavTreeContainer.d.ts.map +1 -1
  40. package/dist/types/src/components/NavTreeItem/NavTreeItemAction.d.ts.map +1 -1
  41. package/dist/types/src/components/NavTreeItem/NavTreeItemAction.stories.d.ts +32 -4
  42. package/dist/types/src/components/NavTreeItem/NavTreeItemAction.stories.d.ts.map +1 -1
  43. package/dist/types/src/components/NavTreeItem/NavTreeItemColumns.d.ts +2 -2
  44. package/dist/types/src/components/NavTreeItem/NavTreeItemColumns.d.ts.map +1 -1
  45. package/dist/types/src/components/Sidebar/L0Menu.d.ts +2 -0
  46. package/dist/types/src/components/Sidebar/L0Menu.d.ts.map +1 -1
  47. package/dist/types/src/components/Sidebar/L1Panel.d.ts +5 -6
  48. package/dist/types/src/components/Sidebar/L1Panel.d.ts.map +1 -1
  49. package/dist/types/src/components/Sidebar/L1Tabs.d.ts +12 -0
  50. package/dist/types/src/components/Sidebar/L1Tabs.d.ts.map +1 -0
  51. package/dist/types/src/components/Sidebar/index.d.ts +1 -0
  52. package/dist/types/src/components/Sidebar/index.d.ts.map +1 -1
  53. package/dist/types/src/components/UserAccountAvatar/UserAccountAvatar.d.ts.map +1 -1
  54. package/dist/types/src/components/UserAccountAvatar/UserAccountAvatar.stories.d.ts +8 -5
  55. package/dist/types/src/components/UserAccountAvatar/UserAccountAvatar.stories.d.ts.map +1 -1
  56. package/dist/types/src/components/index.d.ts +1 -1
  57. package/dist/types/src/components/index.d.ts.map +1 -1
  58. package/dist/types/src/components/types.d.ts +2 -2
  59. package/dist/types/src/components/types.d.ts.map +1 -1
  60. package/dist/types/src/events.d.ts.map +1 -1
  61. package/dist/types/src/experimental/Tree.d.ts +4 -5
  62. package/dist/types/src/experimental/Tree.d.ts.map +1 -1
  63. package/dist/types/src/experimental/Tree.stories.d.ts +7 -4
  64. package/dist/types/src/experimental/Tree.stories.d.ts.map +1 -1
  65. package/dist/types/src/meta.d.ts +2 -3
  66. package/dist/types/src/meta.d.ts.map +1 -1
  67. package/dist/types/src/testing/app-graph-builder.d.ts.map +1 -1
  68. package/dist/types/src/testing/generator.d.ts +1 -1
  69. package/dist/types/src/testing/generator.d.ts.map +1 -1
  70. package/dist/types/src/translations.d.ts +1 -0
  71. package/dist/types/src/translations.d.ts.map +1 -1
  72. package/dist/types/src/types.d.ts +4 -3
  73. package/dist/types/src/types.d.ts.map +1 -1
  74. package/dist/types/src/util.d.ts +1 -2
  75. package/dist/types/src/util.d.ts.map +1 -1
  76. package/dist/types/tsconfig.tsbuildinfo +1 -1
  77. package/package.json +48 -49
  78. package/src/NavTreePlugin.tsx +75 -76
  79. package/src/capabilities/app-graph-builder.ts +8 -7
  80. package/src/capabilities/capabilities.ts +2 -2
  81. package/src/capabilities/intent-resolver.ts +2 -2
  82. package/src/capabilities/keyboard.ts +2 -2
  83. package/src/capabilities/react-surface.tsx +5 -5
  84. package/src/capabilities/state.ts +4 -3
  85. package/src/components/CommandsDialog/CommandsDialog.tsx +5 -5
  86. package/src/components/CommandsDialog/CommandsTrigger.tsx +5 -7
  87. package/src/components/NavTree/NavTree.stories.tsx +66 -52
  88. package/src/components/NavTree/NavTree.tsx +7 -3
  89. package/src/components/NavTreeContainer.tsx +54 -22
  90. package/src/components/NavTreeDocumentTitle.tsx +2 -2
  91. package/src/components/NavTreeItem/NavTreeItemAction.stories.tsx +4 -6
  92. package/src/components/NavTreeItem/NavTreeItemAction.tsx +11 -10
  93. package/src/components/NavTreeItem/NavTreeItemColumns.tsx +33 -27
  94. package/src/components/Sidebar/L0Menu.tsx +52 -51
  95. package/src/components/Sidebar/L1Panel.tsx +74 -97
  96. package/src/components/Sidebar/L1Tabs.tsx +58 -0
  97. package/src/components/Sidebar/index.ts +1 -0
  98. package/src/components/UserAccountAvatar/UserAccountAvatar.stories.tsx +9 -8
  99. package/src/components/UserAccountAvatar/UserAccountAvatar.tsx +20 -12
  100. package/src/components/index.ts +1 -1
  101. package/src/components/types.ts +3 -2
  102. package/src/events.ts +2 -2
  103. package/src/experimental/Tree.stories.tsx +34 -36
  104. package/src/experimental/Tree.tsx +16 -34
  105. package/src/meta.ts +10 -7
  106. package/src/testing/app-graph-builder.ts +10 -9
  107. package/src/testing/generator.ts +2 -2
  108. package/src/translations.ts +1 -0
  109. package/src/types.ts +4 -3
  110. package/src/util.ts +2 -20
  111. package/dist/lib/browser/app-graph-builder-5J4LRWDX.mjs.map +0 -7
  112. package/dist/lib/browser/chunk-ERDGQTH5.mjs +0 -16
  113. package/dist/lib/browser/chunk-ERDGQTH5.mjs.map +0 -7
  114. package/dist/lib/browser/chunk-TZA65AKW.mjs.map +0 -7
  115. package/dist/lib/browser/chunk-WCARAZ7J.mjs.map +0 -7
  116. package/dist/lib/browser/intent-resolver-3XYN2CBU.mjs.map +0 -7
  117. package/dist/lib/browser/keyboard-QRS6WOQH.mjs.map +0 -7
  118. package/dist/lib/browser/react-surface-N2HPMYCU.mjs.map +0 -7
  119. package/dist/lib/browser/state-54DY3DOY.mjs.map +0 -7
  120. package/dist/lib/node-esm/app-graph-builder-GY7GCTGU.mjs +0 -46
  121. package/dist/lib/node-esm/app-graph-builder-GY7GCTGU.mjs.map +0 -7
  122. package/dist/lib/node-esm/chunk-CY7QWR4R.mjs +0 -1429
  123. package/dist/lib/node-esm/chunk-CY7QWR4R.mjs.map +0 -7
  124. package/dist/lib/node-esm/chunk-P2JGW3WR.mjs +0 -18
  125. package/dist/lib/node-esm/chunk-P2JGW3WR.mjs.map +0 -7
  126. package/dist/lib/node-esm/chunk-V3QXFDDP.mjs +0 -16
  127. package/dist/lib/node-esm/chunk-V3QXFDDP.mjs.map +0 -7
  128. package/dist/lib/node-esm/index.mjs +0 -150
  129. package/dist/lib/node-esm/index.mjs.map +0 -7
  130. package/dist/lib/node-esm/intent-resolver-R7UNPSZY.mjs +0 -48
  131. package/dist/lib/node-esm/intent-resolver-R7UNPSZY.mjs.map +0 -7
  132. package/dist/lib/node-esm/keyboard-MOZWHFUM.mjs +0 -52
  133. package/dist/lib/node-esm/meta.json +0 -1
  134. package/dist/lib/node-esm/react-surface-EW5FDMW4.mjs +0 -52
  135. package/dist/lib/node-esm/react-surface-EW5FDMW4.mjs.map +0 -7
  136. package/dist/lib/node-esm/state-Z3OTRC2I.mjs +0 -118
  137. package/dist/lib/node-esm/state-Z3OTRC2I.mjs.map +0 -7
@@ -1,20 +1,20 @@
1
1
  import {
2
2
  NavTreeCapabilities
3
- } from "./chunk-WCARAZ7J.mjs";
3
+ } from "./chunk-5VLWX4PK.mjs";
4
4
  import {
5
5
  COMMANDS_DIALOG,
6
6
  KEY_BINDING,
7
- NAVTREE_PLUGIN
8
- } from "./chunk-ERDGQTH5.mjs";
7
+ meta
8
+ } from "./chunk-E6MZBCU5.mjs";
9
9
 
10
10
  // src/components/CommandsDialog/CommandsDialog.tsx
11
11
  import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
12
12
  import React, { useMemo, useState } from "react";
13
- import { createIntent, LayoutAction, useAppGraph, useIntentDispatcher } from "@dxos/app-framework";
13
+ import { LayoutAction, createIntent, useAppGraph, useIntentDispatcher } from "@dxos/app-framework";
14
14
  import { isAction, isActionGroup } from "@dxos/app-graph";
15
15
  import { Keyboard, keySymbols } from "@dxos/keyboard";
16
16
  import { useActions } from "@dxos/plugin-graph";
17
- import { Button, Dialog, Icon, useTranslation, toLocalizedString } from "@dxos/react-ui";
17
+ import { Button, Dialog, Icon, toLocalizedString, useTranslation } from "@dxos/react-ui";
18
18
  import { SearchList } from "@dxos/react-ui-searchlist";
19
19
  import { cardDialogContent, cardDialogHeader, cardDialogPaddedOverflow, cardDialogSearchListRoot } from "@dxos/react-ui-stack";
20
20
  import { descriptionText, mx } from "@dxos/react-ui-theme";
@@ -22,7 +22,7 @@ import { getHostPlatform } from "@dxos/util";
22
22
  var CommandsDialogContent = ({ selected: initial }) => {
23
23
  var _effect = _useSignals();
24
24
  try {
25
- const { t } = useTranslation(NAVTREE_PLUGIN);
25
+ const { t } = useTranslation(meta.id);
26
26
  const [selected, setSelected] = useState(initial);
27
27
  const { dispatchPromise: dispatch } = useIntentDispatcher();
28
28
  const { graph } = useAppGraph();
@@ -53,7 +53,7 @@ var CommandsDialogContent = ({ selected: initial }) => {
53
53
  }, /* @__PURE__ */ React.createElement(Dialog.Title, {
54
54
  classNames: cardDialogHeader
55
55
  }, t("commands dialog title", {
56
- ns: NAVTREE_PLUGIN
56
+ ns: meta.id
57
57
  })), /* @__PURE__ */ React.createElement(SearchList.Root, {
58
58
  label: t("command list input placeholder"),
59
59
  classNames: cardDialogSearchListRoot
@@ -119,16 +119,14 @@ var CommandsDialogContent = ({ selected: initial }) => {
119
119
 
120
120
  // src/components/CommandsDialog/CommandsTrigger.tsx
121
121
  import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
122
- import { MagnifyingGlass } from "@phosphor-icons/react";
123
122
  import React2 from "react";
124
- import { createIntent as createIntent2, LayoutAction as LayoutAction2, useIntentDispatcher as useIntentDispatcher2 } from "@dxos/app-framework";
125
- import { Button as Button2, useTranslation as useTranslation2 } from "@dxos/react-ui";
126
- import { getSize } from "@dxos/react-ui-theme";
123
+ import { LayoutAction as LayoutAction2, createIntent as createIntent2, useIntentDispatcher as useIntentDispatcher2 } from "@dxos/app-framework";
124
+ import { Button as Button2, Icon as Icon2, useTranslation as useTranslation2 } from "@dxos/react-ui";
127
125
  var CommandsTrigger = () => {
128
126
  var _effect = _useSignals2();
129
127
  try {
130
128
  const { dispatchPromise: dispatch } = useIntentDispatcher2();
131
- const { t } = useTranslation2(NAVTREE_PLUGIN);
129
+ const { t } = useTranslation2(meta.id);
132
130
  return /* @__PURE__ */ React2.createElement(Button2, {
133
131
  classNames: "m-1 pli-1 lg:pli-2",
134
132
  onClick: () => dispatch(createIntent2(LayoutAction2.UpdateDialog, {
@@ -140,8 +138,9 @@ var CommandsTrigger = () => {
140
138
  }))
141
139
  }, /* @__PURE__ */ React2.createElement("span", {
142
140
  className: "text-description font-normal grow text-start"
143
- }, t("command list input placeholder")), /* @__PURE__ */ React2.createElement(MagnifyingGlass, {
144
- className: getSize(5)
141
+ }, t("command list input placeholder")), /* @__PURE__ */ React2.createElement(Icon2, {
142
+ icon: "ph--magnifying-glass--regular",
143
+ size: 5
145
144
  }));
146
145
  } finally {
147
146
  _effect.f();
@@ -149,7 +148,7 @@ var CommandsTrigger = () => {
149
148
  };
150
149
 
151
150
  // src/util.ts
152
- import { isAction as isAction2, isActionLike } from "@dxos/app-graph";
151
+ import { isActionLike } from "@dxos/app-graph";
153
152
  import { isNonNullable } from "@dxos/util";
154
153
  var getParent = (graph, node, path) => {
155
154
  const parentId = path[path.length - 2];
@@ -199,22 +198,6 @@ var getChildren = (graph, node, path = []) => {
199
198
  return nextPath.includes(n.id) ? void 0 : n;
200
199
  }).filter(isNonNullable);
201
200
  };
202
- var getActions = (graph, node) => {
203
- return graph.getActions(node.id).reduce((acc, arg) => {
204
- if (arg.properties.disposition === "item") {
205
- return acc;
206
- }
207
- acc.actions.push(arg);
208
- if (!isAction2(arg)) {
209
- const actionGroup = graph.getActions(arg.id);
210
- acc.groupedActions[arg.id] = actionGroup;
211
- }
212
- return acc;
213
- }, {
214
- actions: [],
215
- groupedActions: {}
216
- });
217
- };
218
201
  var l0ItemType = (item) => {
219
202
  if (item.properties.disposition === "collection") {
220
203
  return "collection";
@@ -228,23 +211,31 @@ var l0ItemType = (item) => {
228
211
  };
229
212
 
230
213
  // src/components/NavTreeContainer.tsx
231
- import { useSignals as _useSignals9 } from "@preact-signals/safe-react/tracking";
214
+ import { useSignals as _useSignals10 } from "@preact-signals/safe-react/tracking";
232
215
  import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
233
216
  import { extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
234
217
  import { untracked } from "@preact/signals-core";
235
- import React9, { memo as memo2, useCallback as useCallback3, useEffect as useEffect3, useMemo as useMemo5 } from "react";
236
- import { createIntent as createIntent3, LayoutAction as LayoutAction3, Surface, useAppGraph as useAppGraph2, useCapability, useIntentDispatcher as useIntentDispatcher3, useLayout } from "@dxos/app-framework";
237
- import { isAction as isAction4, isActionLike as isActionLike2, ROOT_ID } from "@dxos/app-graph";
218
+ import React10, { memo as memo2, useCallback as useCallback3, useEffect as useEffect3, useMemo as useMemo6 } from "react";
219
+ import { LayoutAction as LayoutAction3, Surface, createIntent as createIntent3, useAppGraph as useAppGraph2, useCapability, useIntentDispatcher as useIntentDispatcher3, useLayout } from "@dxos/app-framework";
220
+ import { ROOT_ID, isAction as isAction3, isActionLike as isActionLike2 } from "@dxos/app-graph";
238
221
  import { PLANK_COMPANION_TYPE } from "@dxos/plugin-deck/types";
239
- import { useConnections } from "@dxos/plugin-graph";
222
+ import { useConnections, useActions as useGraphActions } from "@dxos/plugin-graph";
240
223
  import { useMediaQuery as useMediaQuery2, useSidebars } from "@dxos/react-ui";
241
224
  import { isTreeData } from "@dxos/react-ui-list";
242
- import { mx as mx5 } from "@dxos/react-ui-theme";
225
+ import { mx as mx3 } from "@dxos/react-ui-theme";
243
226
  import { arrayMove as arrayMove2, byPosition } from "@dxos/util";
244
227
 
228
+ // src/capabilities/index.ts
229
+ import { lazy } from "@dxos/app-framework";
230
+ var AppGraphBuilder = lazy(() => import("./app-graph-builder-D7NLWZLU.mjs"));
231
+ var IntentResolver = lazy(() => import("./intent-resolver-YUVXVPHG.mjs"));
232
+ var Keyboard2 = lazy(() => import("./keyboard-YYTYJW4M.mjs"));
233
+ var ReactSurface = lazy(() => import("./react-surface-7OUBD57A.mjs"));
234
+ var State = lazy(() => import("./state-EUSVT6BI.mjs"));
235
+
245
236
  // src/components/NavTree/NavTree.tsx
246
- import { useSignals as _useSignals8 } from "@preact-signals/safe-react/tracking";
247
- import React8, { useMemo as useMemo4 } from "react";
237
+ import { useSignals as _useSignals9 } from "@preact-signals/safe-react/tracking";
238
+ import React9, { useMemo as useMemo5 } from "react";
248
239
  import { Tabs as Tabs3 } from "@dxos/react-ui-tabs";
249
240
 
250
241
  // src/hooks.ts
@@ -260,7 +251,7 @@ var useNavTreeContext = () => useContext(NavTreeContext) ?? raise(new Error("Mis
260
251
  import { useEffect } from "react";
261
252
  import { toLocalizedString as toLocalizedString2, useTranslation as useTranslation3 } from "@dxos/react-ui";
262
253
  var NavTreeDocumentTitle = ({ node }) => {
263
- const { t } = useTranslation3(NAVTREE_PLUGIN);
254
+ const { t } = useTranslation3(meta.id);
264
255
  useEffect(() => {
265
256
  document.title = node ? toLocalizedString2(node.properties.label, t) : t("current app name", {
266
257
  ns: "appkit"
@@ -295,11 +286,12 @@ import { scrollJustEnoughIntoView } from "@atlaskit/pragmatic-drag-and-drop/elem
295
286
  import { attachClosestEdge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
296
287
  import React4, { forwardRef, useCallback, useLayoutEffect, useMemo as useMemo2, useRef, useState as useState2 } from "react";
297
288
  import { invariant } from "@dxos/invariant";
298
- import { Icon as Icon2, ListItem, ScrollArea, Tooltip, toLocalizedString as toLocalizedString3, useMediaQuery, useTranslation as useTranslation4 } from "@dxos/react-ui";
299
- import { MenuProvider, DropdownMenu } from "@dxos/react-ui-menu";
289
+ import { DxAvatar } from "@dxos/lit-ui/react";
290
+ import { Icon as Icon3, ListItem, ScrollArea, Tooltip, toLocalizedString as toLocalizedString3, useMediaQuery, useTranslation as useTranslation4 } from "@dxos/react-ui";
291
+ import { DropdownMenu, MenuProvider } from "@dxos/react-ui-menu";
300
292
  import { Tabs } from "@dxos/react-ui-tabs";
301
293
  import { mx as mx2 } from "@dxos/react-ui-theme";
302
- import { arrayMove, getFirstTwoRenderableChars } from "@dxos/util";
294
+ import { arrayMove } from "@dxos/util";
303
295
 
304
296
  // src/components/UserAccountAvatar/UserAccountAvatar.tsx
305
297
  import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
@@ -310,8 +302,10 @@ var UserAccountAvatar = ({ size, userId, hue, emoji, status }) => {
310
302
  var _effect = _useSignals3();
311
303
  try {
312
304
  const fallbackValue = hexToFallback(userId ?? "0");
313
- return /* @__PURE__ */ React3.createElement("div", {
314
- className: "grid place-items-center",
305
+ return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(L0ItemActiveTabIndicator, {
306
+ classNames: "inset-block-6"
307
+ }), /* @__PURE__ */ React3.createElement("div", {
308
+ className: "grid place-items-center dx-focus-ring-group-indicator rounded-full",
315
309
  "data-joyride": "welcome/account"
316
310
  }, /* @__PURE__ */ React3.createElement(Avatar.Root, null, /* @__PURE__ */ React3.createElement(Avatar.Content, {
317
311
  variant: "circle",
@@ -320,7 +314,7 @@ var UserAccountAvatar = ({ size, userId, hue, emoji, status }) => {
320
314
  hue: hue || fallbackValue.hue,
321
315
  fallback: emoji || fallbackValue.emoji,
322
316
  "data-testid": "treeView.userAccount"
323
- })));
317
+ }))));
324
318
  } finally {
325
319
  _effect.f();
326
320
  }
@@ -330,9 +324,7 @@ var UserAccountAvatar = ({ size, userId, hue, emoji, status }) => {
330
324
  var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-navtree/src/components/Sidebar/L0Menu.tsx";
331
325
  var useL0ItemClick = ({ item, parent, path }, type) => {
332
326
  const { tab, isCurrent, onSelect, onTabChange } = useNavTreeContext();
333
- const [isLg] = useMediaQuery("lg", {
334
- ssr: false
335
- });
327
+ const [isLg] = useMediaQuery("lg");
336
328
  return useCallback((event) => {
337
329
  switch (type) {
338
330
  case "action": {
@@ -383,7 +375,7 @@ var L0ItemRoot = /* @__PURE__ */ forwardRef(({ item, parent, path, children }, f
383
375
  item.id,
384
376
  path
385
377
  ]);
386
- const { t } = useTranslation4(NAVTREE_PLUGIN);
378
+ const { t } = useTranslation4(meta.id);
387
379
  const localizedString = toLocalizedString3(item.properties.label, t);
388
380
  const handleClick = useL0ItemClick({
389
381
  item,
@@ -401,15 +393,15 @@ var L0ItemRoot = /* @__PURE__ */ forwardRef(({ item, parent, path, children }, f
401
393
  "data-testid": testId,
402
394
  "data-itemid": id
403
395
  } : {
404
- onClick: handleClick
396
+ onClick: handleClick,
397
+ role: "button"
405
398
  };
406
- const Root = type === "collection" ? "h2" : type === "tab" ? Tabs.TabPrimitive : "button";
407
399
  return /* @__PURE__ */ React4.createElement(Tooltip.Trigger, {
408
400
  asChild: true,
409
401
  delayDuration: 0,
410
402
  side: "right",
411
403
  content: localizedString
412
- }, /* @__PURE__ */ React4.createElement(Root, {
404
+ }, /* @__PURE__ */ React4.createElement(Tabs.TabPrimitive, {
413
405
  ...rootProps,
414
406
  "data-type": type,
415
407
  className: mx2(l0ItemRoot, l0Breakpoints[item.properties.l0Breakpoint]),
@@ -419,28 +411,13 @@ var L0ItemRoot = /* @__PURE__ */ forwardRef(({ item, parent, path, children }, f
419
411
  _effect.f();
420
412
  }
421
413
  });
422
- var L0Avatar = ({ item }) => {
414
+ var L0ItemActiveTabIndicator = ({ classNames }) => {
423
415
  var _effect = _useSignals4();
424
416
  try {
425
- const { t } = useTranslation4(NAVTREE_PLUGIN);
426
- const type = l0ItemType(item);
427
- const hue = item.properties.hue ?? null;
428
- const hueFgStyle = hue && {
429
- style: {
430
- color: `var(--dx-${hue}SurfaceText)`
431
- }
432
- };
433
- const localizedString = toLocalizedString3(item.properties.label, t);
434
- const avatarValue = useMemo2(() => type === "tab" ? getFirstTwoRenderableChars(localizedString).join("").toUpperCase() : [], [
435
- type,
436
- item.properties.label,
437
- t
438
- ]);
439
- return /* @__PURE__ */ React4.createElement("span", {
440
- role: "img",
441
- className: "place-self-center text-xl font-light",
442
- ...hueFgStyle
443
- }, avatarValue);
417
+ return /* @__PURE__ */ React4.createElement("div", {
418
+ role: "none",
419
+ className: mx2("hidden group-aria-selected/l0item:block absolute inline-start-0 inset-block-2 is-1 bg-accentSurface rounded-ie", classNames)
420
+ });
444
421
  } finally {
445
422
  _effect.f();
446
423
  }
@@ -448,7 +425,7 @@ var L0Avatar = ({ item }) => {
448
425
  var L0Item = ({ item, parent, path, pinned, onRearrange }) => {
449
426
  var _effect = _useSignals4();
450
427
  try {
451
- const { t } = useTranslation4(NAVTREE_PLUGIN);
428
+ const { t } = useTranslation4(meta.id);
452
429
  const itemElement = useRef(null);
453
430
  const [closestEdge, setEdge] = useState2(null);
454
431
  const localizedString = toLocalizedString3(item.properties.label, t);
@@ -537,10 +514,7 @@ var L0Item = ({ item, parent, path, pinned, onRearrange }) => {
537
514
  className: mx2(l0ItemContent, pinned ? "p-2 group-hover/l0item:bg-activeSurface" : "is-[--l0-avatar-size] bs-[--l0-avatar-size] bg-activeSurface")
538
515
  }, /* @__PURE__ */ React4.createElement(ItemAvatar, {
539
516
  item
540
- })), /* @__PURE__ */ React4.createElement("div", {
541
- role: "none",
542
- className: "hidden group-aria-selected/l0item:block absolute inline-start-0 inset-block-2 is-1 bg-accentSurface rounded-ie"
543
- }), /* @__PURE__ */ React4.createElement("span", {
517
+ })), /* @__PURE__ */ React4.createElement(L0ItemActiveTabIndicator, null), /* @__PURE__ */ React4.createElement("span", {
544
518
  id: `${item.id}__label`,
545
519
  className: "sr-only"
546
520
  }, localizedString), closestEdge && /* @__PURE__ */ React4.createElement(ListItem.DropIndicator, {
@@ -553,6 +527,7 @@ var L0Item = ({ item, parent, path, pinned, onRearrange }) => {
553
527
  var ItemAvatar = ({ item }) => {
554
528
  var _effect = _useSignals4();
555
529
  try {
530
+ const { t } = useTranslation4(meta.id);
556
531
  const type = l0ItemType(item);
557
532
  if (item.properties.icon) {
558
533
  const hue = item.properties.hue ?? null;
@@ -561,15 +536,21 @@ var ItemAvatar = ({ item }) => {
561
536
  color: `var(--dx-${hue}SurfaceText)`
562
537
  }
563
538
  };
564
- return /* @__PURE__ */ React4.createElement(Icon2, {
539
+ return /* @__PURE__ */ React4.createElement(Icon3, {
565
540
  icon: item.properties.icon,
566
- size: 5,
541
+ size: 6,
567
542
  ...hueFgStyle
568
543
  });
569
544
  }
570
545
  if (type === "tab" && item.properties.disposition !== "pin-end") {
571
- return /* @__PURE__ */ React4.createElement(L0Avatar, {
572
- item
546
+ const hue = item.properties.hue ?? null;
547
+ const localizedString = toLocalizedString3(item.properties.label, t);
548
+ return /* @__PURE__ */ React4.createElement(DxAvatar, {
549
+ hue,
550
+ hueVariant: "surface",
551
+ variant: "square",
552
+ size: 12,
553
+ fallback: localizedString
573
554
  });
574
555
  }
575
556
  return null;
@@ -634,7 +615,7 @@ var L0Collection = ({ item, path }) => {
634
615
  var L0Menu = ({ menuActions, topLevelItems, pinnedItems, userAccountItem, parent, path }) => {
635
616
  var _effect = _useSignals4();
636
617
  try {
637
- const { t } = useTranslation4(NAVTREE_PLUGIN);
618
+ const { t } = useTranslation4(meta.id);
638
619
  return /* @__PURE__ */ React4.createElement(Tabs.Tablist, {
639
620
  classNames: [
640
621
  "group/l0 absolute z-[1] inset-block-0 inline-start-0 rounded-is",
@@ -648,16 +629,20 @@ var L0Menu = ({ menuActions, topLevelItems, pinnedItems, userAccountItem, parent
648
629
  content: t("app menu label"),
649
630
  side: "right",
650
631
  asChild: true
632
+ }, /* @__PURE__ */ React4.createElement(Tabs.TabPrimitive, {
633
+ value: "options",
634
+ asChild: true,
635
+ role: "button"
651
636
  }, /* @__PURE__ */ React4.createElement(DropdownMenu.Trigger, {
652
637
  "data-testid": "spacePlugin.addSpace",
653
- className: mx2(l0ItemRoot, "grid place-items-center")
638
+ className: mx2(l0ItemRoot, "grid place-items-center dx-focus-ring-group")
654
639
  }, /* @__PURE__ */ React4.createElement("div", {
655
640
  role: "none",
656
641
  className: mx2(l0ItemContent, "is-[--rail-action] bs-[--rail-action] group-hover/l0item:bg-hoverSurface")
657
- }, /* @__PURE__ */ React4.createElement(Icon2, {
642
+ }, /* @__PURE__ */ React4.createElement(Icon3, {
658
643
  icon: "ph--list--regular",
659
644
  size: 5
660
- })))))), /* @__PURE__ */ React4.createElement(ScrollArea.Root, null, /* @__PURE__ */ React4.createElement(ScrollArea.Viewport, null, /* @__PURE__ */ React4.createElement("div", {
645
+ }))))))), /* @__PURE__ */ React4.createElement(ScrollArea.Root, null, /* @__PURE__ */ React4.createElement(ScrollArea.Viewport, null, /* @__PURE__ */ React4.createElement("div", {
661
646
  role: "none",
662
647
  className: mx2([
663
648
  "flex flex-col gap-1 pbs-1",
@@ -720,17 +705,17 @@ var L0Menu = ({ menuActions, topLevelItems, pinnedItems, userAccountItem, parent
720
705
  // src/components/Sidebar/L1Panel.tsx
721
706
  import { useSignals as _useSignals7 } from "@preact-signals/safe-react/tracking";
722
707
  import React7, { useCallback as useCallback2, useMemo as useMemo3 } from "react";
723
- import { Button as Button3, Icon as Icon3, IconButton as IconButton2, toLocalizedString as toLocalizedString6, useTranslation as useTranslation7 } from "@dxos/react-ui";
708
+ import { DensityProvider, IconButton as IconButton2, toLocalizedString as toLocalizedString6, useTranslation as useTranslation7 } from "@dxos/react-ui";
724
709
  import { Tree } from "@dxos/react-ui-list";
725
710
  import { Tabs as Tabs2 } from "@dxos/react-ui-tabs";
726
- import { hoverableControlItem as hoverableControlItem2, hoverableOpenControlItem as hoverableOpenControlItem2, mx as mx4 } from "@dxos/react-ui-theme";
711
+ import { hoverableControlItem as hoverableControlItem2, hoverableOpenControlItem as hoverableOpenControlItem2 } from "@dxos/react-ui-theme";
727
712
 
728
713
  // src/components/NavTreeItem/NavTreeItemAction.tsx
729
714
  import { useSignals as _useSignals5 } from "@preact-signals/safe-react/tracking";
730
715
  import React5 from "react";
731
- import { useTranslation as useTranslation5, toLocalizedString as toLocalizedString4, IconButton, useDensityContext } from "@dxos/react-ui";
716
+ import { IconButton, toLocalizedString as toLocalizedString4, useDensityContext, useTranslation as useTranslation5 } from "@dxos/react-ui";
732
717
  import { DropdownMenu as DropdownMenu2, MenuProvider as MenuProvider2 } from "@dxos/react-ui-menu";
733
- import { hoverableControlItem, hoverableOpenControlItem, mx as mx3 } from "@dxos/react-ui-theme";
718
+ import { hoverableControlItem, hoverableOpenControlItem } from "@dxos/react-ui-theme";
734
719
  var fallbackIcon = "ph--placeholder--regular";
735
720
  var fineActionButtonProps = {
736
721
  size: 4,
@@ -743,7 +728,7 @@ var coarseActionButtonProps = {
743
728
  var NavTreeItemActionDropdownMenu = ({ parent, label, icon, testId, menuActions, caller }) => {
744
729
  var _effect = _useSignals5();
745
730
  try {
746
- const { t } = useTranslation5(NAVTREE_PLUGIN);
731
+ const { t } = useTranslation5(meta.id);
747
732
  const density = useDensityContext();
748
733
  return /* @__PURE__ */ React5.createElement(MenuProvider2, null, /* @__PURE__ */ React5.createElement(DropdownMenu2.Root, {
749
734
  group: parent,
@@ -753,7 +738,11 @@ var NavTreeItemActionDropdownMenu = ({ parent, label, icon, testId, menuActions,
753
738
  asChild: true
754
739
  }, /* @__PURE__ */ React5.createElement(IconButton, {
755
740
  ...density === "coarse" ? coarseActionButtonProps : fineActionButtonProps,
756
- classNames: mx3("shrink-0 pli-2 pointer-fine:pli-1", hoverableControlItem, hoverableOpenControlItem),
741
+ classNames: [
742
+ "shrink-0 pli-2 pointer-fine:pli-1",
743
+ hoverableControlItem,
744
+ hoverableOpenControlItem
745
+ ],
757
746
  variant: "ghost",
758
747
  icon: icon ?? fallbackIcon,
759
748
  iconOnly: true,
@@ -773,16 +762,21 @@ var NavTreeItemMonolithicAction = ({ parent, properties: { disabled, caller, tes
773
762
  return /* @__PURE__ */ React5.createElement(IconButton, {
774
763
  ...density === "coarse" ? coarseActionButtonProps : fineActionButtonProps,
775
764
  variant,
776
- classNames: mx3("shrink-0", hoverableControlItem, hoverableOpenControlItem, iconOnly ? "pli-2 pointer-fine:pli-1" : "p-2 pointer-fine:p-2 mie-1"),
765
+ classNames: [
766
+ "shrink-0",
767
+ hoverableControlItem,
768
+ hoverableOpenControlItem,
769
+ iconOnly ? "pli-2 pointer-fine:pli-1" : "p-2 pointer-fine:p-2 mie-1"
770
+ ],
777
771
  icon: icon ?? fallbackIcon,
778
772
  iconOnly,
779
773
  label: baseLabel,
780
774
  disabled,
781
775
  onClick: (event) => {
776
+ event.stopPropagation();
782
777
  if (disabled) {
783
778
  return;
784
779
  }
785
- event.stopPropagation();
786
780
  void invoke?.(caller ? {
787
781
  parent,
788
782
  caller
@@ -799,7 +793,7 @@ var NavTreeItemMonolithicAction = ({ parent, properties: { disabled, caller, tes
799
793
  var NavTreeItemAction = ({ monolithic, menuActions, parent: node, ...props }) => {
800
794
  var _effect = _useSignals5();
801
795
  try {
802
- const { t } = useTranslation5(NAVTREE_PLUGIN);
796
+ const { t } = useTranslation5(meta.id);
803
797
  const monolithicAction = menuActions?.length === 1 && menuActions[0];
804
798
  const baseLabel = toLocalizedString4(monolithicAction ? monolithicAction.properties.label : props.label, t);
805
799
  return monolithic && menuActions?.length === 1 ? /* @__PURE__ */ React5.createElement(NavTreeItemMonolithicAction, {
@@ -820,42 +814,46 @@ var NavTreeItemAction = ({ monolithic, menuActions, parent: node, ...props }) =>
820
814
  // src/components/NavTreeItem/NavTreeItemColumns.tsx
821
815
  import { useSignals as _useSignals6 } from "@preact-signals/safe-react/tracking";
822
816
  import React6, { Fragment, memo } from "react";
823
- import { isAction as isAction3 } from "@dxos/app-graph";
824
- import { DensityProvider, Popover, toLocalizedString as toLocalizedString5, Treegrid, useTranslation as useTranslation6 } from "@dxos/react-ui";
825
- var NavTreeItemColumns = /* @__PURE__ */ memo(({ path, item, open, density = "fine" }) => {
817
+ import { isAction as isAction2 } from "@dxos/app-graph";
818
+ import { Popover, Treegrid, toLocalizedString as toLocalizedString5, useTranslation as useTranslation6 } from "@dxos/react-ui";
819
+ var NavTreeItemColumns = /* @__PURE__ */ memo(({ path, item, open }) => {
826
820
  var _effect = _useSignals6();
827
821
  try {
828
- const { t } = useTranslation6(NAVTREE_PLUGIN);
829
- const { getActions: getActions2, renderItemEnd: ItemEnd, popoverAnchorId } = useNavTreeContext();
822
+ const { t } = useTranslation6(meta.id);
823
+ const { useActions: useActions3, renderItemEnd: ItemEnd, popoverAnchorId } = useNavTreeContext();
830
824
  const level = path.length - 2;
831
- const { actions: _actions, groupedActions } = getActions2(item);
832
- const [primaryAction, ...secondaryActions] = _actions.toSorted((a, b) => a.properties?.disposition === "list-item-primary" ? -1 : 1);
833
- const actions = (primaryAction?.properties?.disposition === "list-item-primary" ? secondaryActions : _actions).flatMap((action) => isAction3(action) ? [
825
+ const { actions: _actions, groupedActions } = useActions3(item);
826
+ const [primaryAction, ...secondaryActions] = _actions.toSorted((a, _b) => a.properties?.disposition === "list-item-primary" ? -1 : 1);
827
+ const actions = (primaryAction?.properties?.disposition === "list-item-primary" ? secondaryActions : _actions).flatMap((action) => isAction2(action) ? [
834
828
  action
835
829
  ] : []).filter((a) => [
836
830
  "list-item",
837
831
  "list-item-primary"
838
832
  ].includes(a.properties?.disposition));
839
- const ActionRoot = popoverAnchorId === `dxos.org/ui/${NAV_TREE_ITEM}/${item.id}` ? Popover.Anchor : Fragment;
840
833
  useLoadDescendents(item);
841
- useLoadDescendents(primaryAction && !isAction3(primaryAction) ? primaryAction : void 0);
842
- return /* @__PURE__ */ React6.createElement(DensityProvider, {
843
- density
844
- }, /* @__PURE__ */ React6.createElement("div", {
834
+ useLoadDescendents(primaryAction && !isAction2(primaryAction) ? primaryAction : void 0);
835
+ const ActionRoot = popoverAnchorId === `dxos.org/ui/${NAV_TREE_ITEM}/${item.id}` ? Popover.Anchor : Fragment;
836
+ return /* @__PURE__ */ React6.createElement("div", {
845
837
  role: "none",
846
838
  className: "contents app-no-drag"
847
- }, primaryAction?.properties?.disposition === "list-item-primary" && !primaryAction?.properties?.disabled ? /* @__PURE__ */ React6.createElement(NavTreeItemAction, {
839
+ }, primaryAction?.properties?.disposition === "list-item-primary" && !primaryAction?.properties?.disabled ? /* @__PURE__ */ React6.createElement(Treegrid.Cell, {
840
+ classNames: "contents"
841
+ }, /* @__PURE__ */ React6.createElement(NavTreeItemAction, {
848
842
  testId: primaryAction.properties?.testId,
849
843
  label: toLocalizedString5(primaryAction.properties?.label, t),
850
844
  icon: primaryAction.properties?.icon ?? "ph--placeholder--regular",
851
845
  parent: item,
852
- monolithic: isAction3(primaryAction),
853
- menuActions: isAction3(primaryAction) ? [
846
+ monolithic: isAction2(primaryAction),
847
+ menuActions: isAction2(primaryAction) ? [
854
848
  primaryAction
855
849
  ] : groupedActions[primaryAction.id],
856
850
  menuType: primaryAction.properties?.menuType,
857
851
  caller: NAV_TREE_ITEM
858
- }) : /* @__PURE__ */ React6.createElement(Treegrid.Cell, null), /* @__PURE__ */ React6.createElement(ActionRoot, null, actions.length > 0 ? /* @__PURE__ */ React6.createElement(NavTreeItemAction, {
852
+ })) : /* @__PURE__ */ React6.createElement(Treegrid.Cell, {
853
+ role: "none"
854
+ }), /* @__PURE__ */ React6.createElement(ActionRoot, null, actions.length > 0 ? /* @__PURE__ */ React6.createElement(Treegrid.Cell, {
855
+ classNames: "contents"
856
+ }, /* @__PURE__ */ React6.createElement(NavTreeItemAction, {
859
857
  testId: `navtree.treeItem.actionsLevel${level}`,
860
858
  label: t("tree item actions label"),
861
859
  icon: "ph--dots-three-vertical--regular",
@@ -863,7 +861,11 @@ var NavTreeItemColumns = /* @__PURE__ */ memo(({ path, item, open, density = "fi
863
861
  menuActions: actions,
864
862
  menuType: "dropdown",
865
863
  caller: NAV_TREE_ITEM
866
- }) : /* @__PURE__ */ React6.createElement(Treegrid.Cell, null)), ItemEnd && /* @__PURE__ */ React6.createElement(ItemEnd, {
864
+ })) : /* @__PURE__ */ React6.createElement(Treegrid.Cell, {
865
+ role: "none"
866
+ })), ItemEnd && /* @__PURE__ */ React6.createElement(Treegrid.Cell, {
867
+ classNames: "contents"
868
+ }, /* @__PURE__ */ React6.createElement(ItemEnd, {
867
869
  node: item,
868
870
  open
869
871
  })));
@@ -873,30 +875,14 @@ var NavTreeItemColumns = /* @__PURE__ */ memo(({ path, item, open, density = "fi
873
875
  });
874
876
 
875
877
  // src/components/Sidebar/L1Panel.tsx
876
- var headingBackButtonLabel = "inset-0 min-is-0 truncate flex items-center pis-2";
877
- var TitleButton = ({ title, onClick }) => {
878
- var _effect = _useSignals7();
879
- try {
880
- return /* @__PURE__ */ React7.createElement(Button3, {
881
- variant: "ghost",
882
- classNames: "pli-1 flex-1 group text-start justify-start bs-[--rail-action] font-normal",
883
- onClick
884
- }, /* @__PURE__ */ React7.createElement(Icon3, {
885
- icon: "ph--caret-left--bold",
886
- size: 3
887
- }), /* @__PURE__ */ React7.createElement("span", {
888
- className: mx4(headingBackButtonLabel)
889
- }, title));
890
- } finally {
891
- _effect.f();
892
- }
893
- };
894
- var L1Panel = ({ open, item, path, currentItemId, onBack }) => {
878
+ var L1Panel = ({ open, path, item, currentItemId, onBack }) => {
895
879
  var _effect = _useSignals7();
896
880
  try {
897
- const { isAlternateTree, setAlternateTree, ...navTreeContext } = useNavTreeContext();
898
- const { t } = useTranslation7(NAVTREE_PLUGIN);
899
- const alternateTree = navTreeContext.useItems(item, {
881
+ const { t } = useTranslation7(meta.id);
882
+ const { isAlternateTree, ...navTreeContext } = useNavTreeContext();
883
+ const title = toLocalizedString6(item.properties.label, t);
884
+ const { useItems: useItems2 } = navTreeContext;
885
+ const alternateTree = useItems2(item, {
900
886
  disposition: "alternate-tree"
901
887
  })[0];
902
888
  const alternatePath = useMemo3(() => [
@@ -906,34 +892,16 @@ var L1Panel = ({ open, item, path, currentItemId, onBack }) => {
906
892
  item.id,
907
893
  path
908
894
  ]);
909
- const handleOpen = useCallback2(() => setAlternateTree?.(alternatePath, true), [
910
- alternatePath,
911
- setAlternateTree
912
- ]);
913
895
  const isAlternate = isAlternateTree?.(alternatePath, item) ?? false;
914
896
  const useAlternateItems = useCallback2((node, { disposition } = {}) => {
915
- return navTreeContext.useItems(node, {
897
+ return useItems2(node, {
916
898
  disposition,
917
899
  sort: node?.id === alternateTree.id
918
900
  });
919
901
  }, [
920
- navTreeContext,
921
- alternateTree
922
- ]);
923
- const handleBack = useCallback2(() => {
924
- if (isAlternate) {
925
- setAlternateTree?.(alternatePath, false);
926
- } else {
927
- onBack?.();
928
- }
929
- }, [
930
- isAlternate,
931
- onBack,
932
- alternatePath,
933
- setAlternateTree
902
+ alternateTree,
903
+ useItems2
934
904
  ]);
935
- const title = toLocalizedString6(item.properties.label, t);
936
- const backCapable = item.id.startsWith("!") || isAlternate;
937
905
  return /* @__PURE__ */ React7.createElement(Tabs2.Tabpanel, {
938
906
  key: item.id,
939
907
  value: item.id,
@@ -946,97 +914,141 @@ var L1Panel = ({ open, item, path, currentItemId, onBack }) => {
946
914
  tabIndex: -1,
947
915
  "aria-label": title,
948
916
  ...!open && {
949
- inert: "true"
917
+ inert: true
950
918
  }
951
- }, item.id === currentItemId && /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement("h2", {
952
- className: "flex items-center border-be border-subduedSeparator app-drag pli-1 density-coarse"
953
- }, backCapable ? /* @__PURE__ */ React7.createElement(TitleButton, {
954
- title,
955
- onClick: handleBack
956
- }) : /* @__PURE__ */ React7.createElement("span", {
957
- className: "flex-1 truncate min-is-0 pis-6"
958
- }, title), alternateTree && !isAlternate && /* @__PURE__ */ React7.createElement(IconButton2, {
959
- variant: "ghost",
960
- classNames: mx4("shrink-0", hoverableControlItem2, hoverableOpenControlItem2, "pli-2 pointer-fine:pli-1"),
961
- iconOnly: true,
962
- size: 5,
963
- icon: alternateTree.properties.icon ?? "ph--placeholder--regular",
964
- label: toLocalizedString6(alternateTree.properties.label ?? alternateTree.id, t),
965
- "data-testid": "treeView.alternateTreeButton",
966
- onClick: handleOpen
967
- }), /* @__PURE__ */ React7.createElement(NavTreeItemColumns, {
919
+ }, item.id === currentItemId && /* @__PURE__ */ React7.createElement(DensityProvider, {
920
+ density: "fine"
921
+ }, /* @__PURE__ */ React7.createElement(L1PanelHeader, {
968
922
  path,
969
923
  item,
970
- open: true,
971
- density: "coarse"
972
- })), /* @__PURE__ */ React7.createElement("div", {
924
+ currentItemId,
925
+ onBack
926
+ }), /* @__PURE__ */ React7.createElement("div", {
973
927
  role: "none",
974
928
  className: "overflow-y-auto"
975
929
  }, isAlternate ? /* @__PURE__ */ React7.createElement(Tree, {
976
930
  ...navTreeContext,
977
- useItems: useAlternateItems,
978
931
  id: alternateTree.id,
979
932
  root: alternateTree,
980
933
  path: alternatePath,
981
934
  levelOffset: 5,
982
935
  gridTemplateColumns: "[tree-row-start] 1fr min-content min-content min-content [tree-row-end]",
983
- renderColumns: NavTreeItemColumns
936
+ renderColumns: NavTreeItemColumns,
937
+ useItems: useAlternateItems
984
938
  }) : /* @__PURE__ */ React7.createElement(Tree, {
985
939
  ...navTreeContext,
986
940
  id: item.id,
987
941
  root: item,
988
942
  path,
989
943
  levelOffset: 5,
990
- draggable: true,
991
944
  gridTemplateColumns: "[tree-row-start] 1fr min-content min-content min-content [tree-row-end]",
992
- renderColumns: NavTreeItemColumns
945
+ renderColumns: NavTreeItemColumns,
946
+ draggable: true
993
947
  }))));
994
948
  } finally {
995
949
  _effect.f();
996
950
  }
997
951
  };
998
- var L1PanelCollection = ({ item, path, ...props }) => {
952
+ var L1PanelHeader = ({ item, path, onBack }) => {
999
953
  var _effect = _useSignals7();
1000
954
  try {
1001
- const { useItems: useItems2 } = useNavTreeContext();
1002
- useLoadDescendents(item);
1003
- const collectionItems = useItems2(item);
1004
- const groupPath = useMemo3(() => [
955
+ const { t } = useTranslation7(meta.id);
956
+ const { isAlternateTree, setAlternateTree, ...navTreeContext } = useNavTreeContext();
957
+ const title = toLocalizedString6(item.properties.label, t);
958
+ const alternateTree = navTreeContext.useItems(item, {
959
+ disposition: "alternate-tree"
960
+ })[0];
961
+ const alternatePath = useMemo3(() => [
1005
962
  ...path,
1006
963
  item.id
1007
964
  ], [
1008
965
  item.id,
1009
966
  path
1010
967
  ]);
1011
- return /* @__PURE__ */ React7.createElement(React7.Fragment, null, collectionItems.filter((item2) => l0ItemType(item2) === "tab").map((item2) => /* @__PURE__ */ React7.createElement(L1Panel, {
1012
- key: item2.id,
1013
- item: item2,
1014
- path: groupPath,
1015
- ...props
1016
- })));
968
+ const isAlternate = isAlternateTree?.(alternatePath, item) ?? false;
969
+ const backCapable = item.id.startsWith("!") || isAlternate;
970
+ const handleOpen = useCallback2(() => {
971
+ setAlternateTree?.(alternatePath, true);
972
+ }, [
973
+ alternatePath,
974
+ setAlternateTree
975
+ ]);
976
+ const handleBack = useCallback2(() => {
977
+ if (isAlternate) {
978
+ setAlternateTree?.(alternatePath, false);
979
+ } else {
980
+ onBack?.();
981
+ }
982
+ }, [
983
+ isAlternate,
984
+ alternatePath,
985
+ setAlternateTree,
986
+ onBack
987
+ ]);
988
+ return /* @__PURE__ */ React7.createElement("div", {
989
+ className: "flex is-full items-center border-be border-subduedSeparator app-drag density-coarse"
990
+ }, /* @__PURE__ */ React7.createElement("div", {
991
+ className: "is-6"
992
+ }), /* @__PURE__ */ React7.createElement("h2", {
993
+ className: "flex-1 truncate min-is-0"
994
+ }, title), backCapable && /* @__PURE__ */ React7.createElement(IconButton2, {
995
+ variant: "ghost",
996
+ icon: "ph--arrow-u-down-left--regular",
997
+ iconOnly: true,
998
+ size: 5,
999
+ label: t("button back"),
1000
+ classNames: [
1001
+ hoverableControlItem2,
1002
+ hoverableOpenControlItem2,
1003
+ "pointer-fine:pli-1"
1004
+ ],
1005
+ onClick: handleBack
1006
+ }) || alternateTree && !isAlternate && /* @__PURE__ */ React7.createElement(IconButton2, {
1007
+ "data-testid": "treeView.alternateTreeButton",
1008
+ variant: "ghost",
1009
+ icon: alternateTree.properties.icon ?? "ph--placeholder--regular",
1010
+ iconOnly: true,
1011
+ size: 5,
1012
+ label: toLocalizedString6(alternateTree.properties.label ?? alternateTree.id, t),
1013
+ classNames: [
1014
+ hoverableControlItem2,
1015
+ hoverableOpenControlItem2,
1016
+ "pointer-fine:pli-1"
1017
+ ],
1018
+ onClick: handleOpen
1019
+ }), /* @__PURE__ */ React7.createElement(NavTreeItemColumns, {
1020
+ open: true,
1021
+ path,
1022
+ item,
1023
+ density: "coarse"
1024
+ }));
1017
1025
  } finally {
1018
1026
  _effect.f();
1019
1027
  }
1020
1028
  };
1021
- var L1Panels = ({ topLevelItems, onBack, ...props }) => {
1022
- var _effect = _useSignals7();
1029
+
1030
+ // src/components/Sidebar/L1Tabs.tsx
1031
+ import { useSignals as _useSignals8 } from "@preact-signals/safe-react/tracking";
1032
+ import React8, { useMemo as useMemo4 } from "react";
1033
+ var L1Tabs = ({ topLevelItems, onBack, ...props }) => {
1034
+ var _effect = _useSignals8();
1023
1035
  try {
1024
- return /* @__PURE__ */ React7.createElement(React7.Fragment, null, topLevelItems.map((item) => {
1036
+ return /* @__PURE__ */ React8.createElement(React8.Fragment, null, topLevelItems.map((item) => {
1025
1037
  const type = l0ItemType(item);
1026
1038
  switch (type) {
1027
- case "collection":
1028
- return /* @__PURE__ */ React7.createElement(L1PanelCollection, {
1029
- key: item.id,
1030
- item,
1031
- ...props
1032
- });
1033
1039
  case "tab":
1034
- return /* @__PURE__ */ React7.createElement(L1Panel, {
1040
+ return /* @__PURE__ */ React8.createElement(L1Panel, {
1035
1041
  key: item.id,
1036
1042
  item,
1037
1043
  ...props,
1038
1044
  onBack
1039
1045
  });
1046
+ case "collection":
1047
+ return /* @__PURE__ */ React8.createElement(L1PanelCollection, {
1048
+ key: item.id,
1049
+ item,
1050
+ ...props
1051
+ });
1040
1052
  default:
1041
1053
  return null;
1042
1054
  }
@@ -1045,11 +1057,34 @@ var L1Panels = ({ topLevelItems, onBack, ...props }) => {
1045
1057
  _effect.f();
1046
1058
  }
1047
1059
  };
1060
+ var L1PanelCollection = ({ item, path, ...props }) => {
1061
+ var _effect = _useSignals8();
1062
+ try {
1063
+ const { useItems: useItems2 } = useNavTreeContext();
1064
+ useLoadDescendents(item);
1065
+ const collectionItems = useItems2(item);
1066
+ const groupPath = useMemo4(() => [
1067
+ ...path,
1068
+ item.id
1069
+ ], [
1070
+ item.id,
1071
+ path
1072
+ ]);
1073
+ return /* @__PURE__ */ React8.createElement(React8.Fragment, null, collectionItems.filter((item2) => l0ItemType(item2) === "tab").map((item2) => /* @__PURE__ */ React8.createElement(L1Panel, {
1074
+ key: item2.id,
1075
+ item: item2,
1076
+ path: groupPath,
1077
+ ...props
1078
+ })));
1079
+ } finally {
1080
+ _effect.f();
1081
+ }
1082
+ };
1048
1083
 
1049
1084
  // src/components/NavTree/NavTree.tsx
1050
1085
  var NAV_TREE_ITEM = "NavTreeItem";
1051
1086
  var NavTree = ({ id, root, ...props }) => {
1052
- var _effect = _useSignals8();
1087
+ var _effect = _useSignals9();
1053
1088
  try {
1054
1089
  const { tab, useItems: useItems2, onBack } = useNavTreeContext();
1055
1090
  const topLevelActions = useItems2(root, {
@@ -1065,7 +1100,7 @@ var NavTree = ({ id, root, ...props }) => {
1065
1100
  const topLevelNavigation = useItems2(root, {
1066
1101
  disposition: "navigation"
1067
1102
  });
1068
- const l0Items = useMemo4(() => [
1103
+ const l0Items = useMemo5(() => [
1069
1104
  // prettier-ignore
1070
1105
  ...topLevelCollections,
1071
1106
  ...topLevelWorkspaces,
@@ -1082,7 +1117,7 @@ var NavTree = ({ id, root, ...props }) => {
1082
1117
  const userAccountItem = useItems2(root, {
1083
1118
  disposition: "user-account"
1084
1119
  })[0];
1085
- const topLevelItems = useMemo4(() => [
1120
+ const topLevelItems = useMemo5(() => [
1086
1121
  // prettier-ignore
1087
1122
  ...l0Items,
1088
1123
  ...pinnedItems,
@@ -1095,46 +1130,44 @@ var NavTree = ({ id, root, ...props }) => {
1095
1130
  userAccountItem
1096
1131
  ]);
1097
1132
  useLoadDescendents(root);
1098
- const path = useMemo4(() => [
1133
+ const path = useMemo5(() => [
1099
1134
  id
1100
1135
  ], [
1101
1136
  id
1102
1137
  ]);
1103
- return /* @__PURE__ */ React8.createElement(Tabs3.Root, {
1104
- value: tab,
1105
- orientation: "vertical",
1106
- verticalVariant: "stateless",
1107
- classNames: "relative"
1108
- }, /* @__PURE__ */ React8.createElement(L0Menu, {
1109
- menuActions: topLevelActions,
1110
- topLevelItems: l0Items,
1111
- pinnedItems,
1112
- userAccountItem,
1113
- path,
1114
- parent: root
1115
- }), /* @__PURE__ */ React8.createElement(L1Panels, {
1116
- topLevelItems,
1117
- path,
1118
- currentItemId: tab,
1119
- onBack,
1120
- ...props
1121
- }));
1138
+ return (
1139
+ // TODO(thure): `Tabs.Root` forces all items that should be able to receive focus to use `Tabs.Tab(Primitive)` since
1140
+ // it uses RovingFocus and doesn’t support moving focus to an item that is not a tab. Assess whether this situation
1141
+ // should change including whether it should motivate a change in the design/taxonomy, or if this means this should
1142
+ // not use `react-ui-tabs` at all.
1143
+ /* @__PURE__ */ React9.createElement(Tabs3.Root, {
1144
+ value: tab,
1145
+ orientation: "vertical",
1146
+ verticalVariant: "stateless",
1147
+ classNames: "relative"
1148
+ }, /* @__PURE__ */ React9.createElement(L0Menu, {
1149
+ menuActions: topLevelActions,
1150
+ topLevelItems: l0Items,
1151
+ pinnedItems,
1152
+ userAccountItem,
1153
+ path,
1154
+ parent: root
1155
+ }), /* @__PURE__ */ React9.createElement(L1Tabs, {
1156
+ topLevelItems,
1157
+ path,
1158
+ currentItemId: tab,
1159
+ onBack,
1160
+ ...props
1161
+ }))
1162
+ );
1122
1163
  } finally {
1123
1164
  _effect.f();
1124
1165
  }
1125
1166
  };
1126
1167
 
1127
- // src/capabilities/index.ts
1128
- import { lazy } from "@dxos/app-framework";
1129
- var AppGraphBuilder = lazy(() => import("./app-graph-builder-5J4LRWDX.mjs"));
1130
- var IntentResolver = lazy(() => import("./intent-resolver-3XYN2CBU.mjs"));
1131
- var Keyboard2 = lazy(() => import("./keyboard-QRS6WOQH.mjs"));
1132
- var ReactSurface = lazy(() => import("./react-surface-N2HPMYCU.mjs"));
1133
- var State = lazy(() => import("./state-54DY3DOY.mjs"));
1134
-
1135
1168
  // src/components/NavTreeContainer.tsx
1136
1169
  var NODE_TYPE = "dxos/app-graph/node";
1137
- var renderItemEnd = ({ node, open }) => /* @__PURE__ */ React9.createElement(Surface, {
1170
+ var renderItemEnd = ({ node, open }) => /* @__PURE__ */ React10.createElement(Surface, {
1138
1171
  role: "navtree-item-end",
1139
1172
  data: {
1140
1173
  id: node.id,
@@ -1143,12 +1176,12 @@ var renderItemEnd = ({ node, open }) => /* @__PURE__ */ React9.createElement(Sur
1143
1176
  },
1144
1177
  limit: 1
1145
1178
  });
1146
- var getChildrenFilter = (node) => untracked(() => !isActionLike2(node) && node.type !== PLANK_COMPANION_TYPE);
1179
+ var getChildrenFilter = (node) => untracked(() => !isActionLike2(node) && node.type !== PLANK_COMPANION_TYPE && node.properties.disposition !== "hidden");
1147
1180
  var filterItems = (node, disposition) => {
1148
1181
  if (!disposition && (node.properties.disposition === "hidden" || node.properties.disposition === "alternate-tree")) {
1149
1182
  return false;
1150
1183
  } else if (!disposition) {
1151
- const action = isAction4(node);
1184
+ const action = isAction3(node);
1152
1185
  return !action || node.properties.disposition === "item";
1153
1186
  } else {
1154
1187
  return node.properties.disposition === disposition;
@@ -1159,34 +1192,51 @@ var getItems = (graph, node, disposition) => {
1159
1192
  };
1160
1193
  var useItems = (node, options) => {
1161
1194
  const { graph } = useAppGraph2();
1162
- const connections = useConnections(graph, node?.id ?? ROOT_ID).filter((node2) => filterItems(node2, options?.disposition));
1163
- return options?.sort ? connections.toSorted((a, b) => byPosition(a.properties, b.properties)) : connections;
1195
+ const connections = useConnections(graph, node?.id ?? ROOT_ID);
1196
+ const filtered = connections.filter((node2) => filterItems(node2, options?.disposition));
1197
+ return options?.sort ? filtered.toSorted((a, b) => byPosition(a.properties, b.properties)) : filtered;
1198
+ };
1199
+ var useActions2 = (node) => {
1200
+ const { graph } = useAppGraph2();
1201
+ const actions = useGraphActions(graph, node.id);
1202
+ return useMemo6(() => actions.reduce((acc, arg) => {
1203
+ if (arg.properties.disposition === "item") {
1204
+ return acc;
1205
+ }
1206
+ acc.actions.push(arg);
1207
+ if (!isAction3(arg)) {
1208
+ const actionGroup = graph.getActions(arg.id);
1209
+ acc.groupedActions[arg.id] = actionGroup;
1210
+ }
1211
+ return acc;
1212
+ }, {
1213
+ actions: [],
1214
+ groupedActions: {}
1215
+ }), [
1216
+ actions
1217
+ ]);
1164
1218
  };
1165
1219
  var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar }) => {
1166
- var _effect = _useSignals9();
1220
+ var _effect = _useSignals10();
1167
1221
  try {
1168
- const [isLg] = useMediaQuery2("lg", {
1169
- ssr: false
1170
- });
1222
+ const [isLg] = useMediaQuery2("lg");
1171
1223
  const { dispatchPromise: dispatch } = useIntentDispatcher3();
1172
1224
  const { graph } = useAppGraph2();
1173
1225
  const { isOpen, isCurrent, isAlternateTree, setItem } = useCapability(NavTreeCapabilities.State);
1174
1226
  const layout = useLayout();
1175
- const { navigationSidebarState } = useSidebars(NAVTREE_PLUGIN);
1176
- const getActions2 = useCallback3((node) => getActions(graph, node), [
1177
- graph
1178
- ]);
1227
+ const { navigationSidebarState } = useSidebars(meta.id);
1179
1228
  const getProps = useCallback3((node, path) => {
1180
1229
  const children = getChildren(graph, node, path).filter(getChildrenFilter);
1181
1230
  const parentOf = children.length > 0 ? children.map(({ id }) => id) : node.properties.role === "branch" ? [] : void 0;
1182
1231
  return {
1183
1232
  id: node.id,
1184
- label: node.properties.label ?? node.id,
1185
1233
  parentOf,
1186
- icon: node.properties.icon,
1187
1234
  disabled: node.properties.disabled,
1188
- className: mx5(node.properties.modified && "italic", node.properties.className),
1235
+ label: node.properties.label ?? node.id,
1236
+ className: mx3(node.properties.className, node.properties.modified && "italic"),
1189
1237
  headingClassName: node.properties.headingClassName,
1238
+ icon: node.properties.icon,
1239
+ iconHue: node.properties.iconHue,
1190
1240
  testId: node.properties.testId
1191
1241
  };
1192
1242
  }, [
@@ -1238,11 +1288,14 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
1238
1288
  const canDrop = useCallback3(({ source, target }) => {
1239
1289
  return target.item.properties.canDrop?.(source) ?? false;
1240
1290
  }, []);
1291
+ const canSelect = useCallback3(({ item }) => {
1292
+ return item.properties.selectable ?? true;
1293
+ }, []);
1241
1294
  const handleSelect = useCallback3(({ item: node, path, option }) => {
1242
1295
  if (!node.data) {
1243
1296
  return;
1244
1297
  }
1245
- if (isAction4(node)) {
1298
+ if (isAction3(node)) {
1246
1299
  const [parent] = graph.getConnections(node.id, "inbound");
1247
1300
  void (parent && node.data({
1248
1301
  parent,
@@ -1278,7 +1331,7 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
1278
1331
  }));
1279
1332
  }
1280
1333
  const defaultAction = graph.getActions(node.id).find((action) => action.properties?.disposition === "default");
1281
- if (isAction4(defaultAction)) {
1334
+ if (isAction3(defaultAction)) {
1282
1335
  void defaultAction.data();
1283
1336
  }
1284
1337
  if (!isLg) {
@@ -1358,10 +1411,10 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
1358
1411
  }, [
1359
1412
  setItem
1360
1413
  ]);
1361
- const navTreeContextValue = useMemo5(() => ({
1414
+ const navTreeContextValue = useMemo6(() => ({
1362
1415
  useItems,
1363
1416
  tab,
1364
- getActions: getActions2,
1417
+ useActions: useActions2,
1365
1418
  loadDescendents,
1366
1419
  renderItemEnd,
1367
1420
  popoverAnchorId,
@@ -1370,6 +1423,7 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
1370
1423
  isCurrent,
1371
1424
  isOpen,
1372
1425
  canDrop,
1426
+ canSelect,
1373
1427
  isAlternateTree,
1374
1428
  setAlternateTree,
1375
1429
  onTabChange: handleTabChange,
@@ -1378,7 +1432,7 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
1378
1432
  onBack: handleBack
1379
1433
  }), [
1380
1434
  tab,
1381
- getActions2,
1435
+ useActions2,
1382
1436
  loadDescendents,
1383
1437
  renderItemEnd,
1384
1438
  popoverAnchorId,
@@ -1387,6 +1441,7 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
1387
1441
  isCurrent,
1388
1442
  isOpen,
1389
1443
  canDrop,
1444
+ canSelect,
1390
1445
  isAlternateTree,
1391
1446
  setAlternateTree,
1392
1447
  handleTabChange,
@@ -1394,9 +1449,9 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
1394
1449
  handleSelect,
1395
1450
  handleBack
1396
1451
  ]);
1397
- return /* @__PURE__ */ React9.createElement(NavTreeContext.Provider, {
1452
+ return /* @__PURE__ */ React10.createElement(NavTreeContext.Provider, {
1398
1453
  value: navTreeContextValue
1399
- }, /* @__PURE__ */ React9.createElement(NavTree, {
1454
+ }, /* @__PURE__ */ React10.createElement(NavTree, {
1400
1455
  id: ROOT_ID,
1401
1456
  root: graph.root,
1402
1457
  open: layout.sidebarOpen
@@ -1414,7 +1469,6 @@ export {
1414
1469
  resolveMigrationOperation,
1415
1470
  sortActions,
1416
1471
  getChildren,
1417
- getActions,
1418
1472
  l0ItemType,
1419
1473
  NODE_TYPE,
1420
1474
  NavTreeContainer,
@@ -1425,4 +1479,4 @@ export {
1425
1479
  ReactSurface,
1426
1480
  State
1427
1481
  };
1428
- //# sourceMappingURL=chunk-TZA65AKW.mjs.map
1482
+ //# sourceMappingURL=chunk-BNGPXJB7.mjs.map