@dxos/plugin-navtree 0.8.4-main.3f58842 → 0.8.4-main.548089c

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