@dxos/plugin-navtree 0.8.4-main.b97322e → 0.8.4-main.c4373fc

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