@dxos/plugin-deck 0.7.5-main.9d2a38b → 0.7.5-main.c41020f

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 (233) hide show
  1. package/dist/lib/browser/{app-graph-builder-67VRUD5K.mjs → app-graph-builder-IYHAGFA3.mjs} +61 -31
  2. package/dist/lib/browser/app-graph-builder-IYHAGFA3.mjs.map +7 -0
  3. package/dist/lib/browser/{check-app-scheme-GEX6W2R5.mjs → check-app-scheme-S3EYUPMF.mjs} +3 -3
  4. package/dist/lib/browser/{check-app-scheme-GEX6W2R5.mjs.map → check-app-scheme-S3EYUPMF.mjs.map} +2 -2
  5. package/dist/lib/browser/{chunk-5VFDMW5M.mjs → chunk-22AQ5IVX.mjs} +2 -2
  6. package/dist/lib/browser/chunk-22AQ5IVX.mjs.map +7 -0
  7. package/dist/lib/browser/chunk-FT33W5CI.mjs +128 -0
  8. package/dist/lib/browser/chunk-FT33W5CI.mjs.map +7 -0
  9. package/dist/lib/browser/chunk-G2X3ZDCE.mjs +24 -0
  10. package/dist/lib/browser/chunk-G2X3ZDCE.mjs.map +7 -0
  11. package/dist/lib/browser/chunk-KANJBSIX.mjs +97 -0
  12. package/dist/lib/browser/chunk-KANJBSIX.mjs.map +7 -0
  13. package/dist/lib/browser/{chunk-JQJ5UWVB.mjs → chunk-N7TEPFVR.mjs} +3 -2
  14. package/dist/lib/browser/{chunk-JQJ5UWVB.mjs.map → chunk-N7TEPFVR.mjs.map} +3 -3
  15. package/dist/lib/browser/chunk-O4RFYYQ6.mjs +1114 -0
  16. package/dist/lib/browser/chunk-O4RFYYQ6.mjs.map +7 -0
  17. package/dist/lib/browser/index.mjs +45 -78
  18. package/dist/lib/browser/index.mjs.map +4 -4
  19. package/dist/lib/browser/intent-resolver-ZD67BRUI.mjs +488 -0
  20. package/dist/lib/browser/intent-resolver-ZD67BRUI.mjs.map +7 -0
  21. package/dist/lib/browser/meta.json +1 -1
  22. package/dist/lib/browser/{react-root-UL7ZDRVZ.mjs → react-root-6ILKHD5J.mjs} +12 -17
  23. package/dist/lib/browser/react-root-6ILKHD5J.mjs.map +7 -0
  24. package/dist/lib/browser/react-surface-O75FKXAI.mjs +39 -0
  25. package/dist/lib/browser/react-surface-O75FKXAI.mjs.map +7 -0
  26. package/dist/lib/browser/{settings-FNWW6WIJ.mjs → settings-H35U6NHE.mjs} +6 -7
  27. package/dist/lib/browser/settings-H35U6NHE.mjs.map +7 -0
  28. package/dist/lib/browser/state-U4SHOPJW.mjs +129 -0
  29. package/dist/lib/browser/state-U4SHOPJW.mjs.map +7 -0
  30. package/dist/lib/browser/tools-64LXGLYR.mjs +59 -0
  31. package/dist/lib/browser/tools-64LXGLYR.mjs.map +7 -0
  32. package/dist/lib/browser/types.mjs +16 -4
  33. package/dist/lib/browser/url-handler-MVHTKUYA.mjs +72 -0
  34. package/dist/lib/browser/url-handler-MVHTKUYA.mjs.map +7 -0
  35. package/dist/types/src/DeckPlugin.d.ts.map +1 -1
  36. package/dist/types/src/capabilities/app-graph-builder.d.ts +181 -0
  37. package/dist/types/src/capabilities/app-graph-builder.d.ts.map +1 -0
  38. package/dist/types/src/capabilities/capabilities.d.ts +137 -8
  39. package/dist/types/src/capabilities/capabilities.d.ts.map +1 -1
  40. package/dist/types/src/capabilities/check-app-scheme.d.ts.map +1 -0
  41. package/dist/types/src/capabilities/index.d.ts +188 -3
  42. package/dist/types/src/capabilities/index.d.ts.map +1 -1
  43. package/dist/types/src/capabilities/intent-resolver.d.ts.map +1 -0
  44. package/dist/types/src/capabilities/react-root.d.ts.map +1 -0
  45. package/dist/types/src/capabilities/react-surface.d.ts.map +1 -0
  46. package/dist/types/src/capabilities/settings.d.ts.map +1 -0
  47. package/dist/types/src/capabilities/state.d.ts +79 -0
  48. package/dist/types/src/capabilities/state.d.ts.map +1 -0
  49. package/dist/types/src/capabilities/tools.d.ts +10 -0
  50. package/dist/types/src/capabilities/tools.d.ts.map +1 -0
  51. package/dist/types/src/capabilities/url-handler.d.ts.map +1 -0
  52. package/dist/types/src/components/DeckLayout/ActiveNode.d.ts +1 -2
  53. package/dist/types/src/components/DeckLayout/ActiveNode.d.ts.map +1 -1
  54. package/dist/types/src/components/DeckLayout/Banner.d.ts +1 -2
  55. package/dist/types/src/components/DeckLayout/Banner.d.ts.map +1 -1
  56. package/dist/types/src/components/DeckLayout/ComplementarySidebar.d.ts +1 -4
  57. package/dist/types/src/components/DeckLayout/ComplementarySidebar.d.ts.map +1 -1
  58. package/dist/types/src/components/DeckLayout/ContentEmpty.d.ts +1 -2
  59. package/dist/types/src/components/DeckLayout/ContentEmpty.d.ts.map +1 -1
  60. package/dist/types/src/components/DeckLayout/DeckLayout.d.ts +2 -7
  61. package/dist/types/src/components/DeckLayout/DeckLayout.d.ts.map +1 -1
  62. package/dist/types/src/components/DeckLayout/Fallback.d.ts +1 -2
  63. package/dist/types/src/components/DeckLayout/Fallback.d.ts.map +1 -1
  64. package/dist/types/src/components/DeckLayout/Fullscreen.d.ts +1 -2
  65. package/dist/types/src/components/DeckLayout/Fullscreen.d.ts.map +1 -1
  66. package/dist/types/src/components/DeckLayout/NodePlankHeading.d.ts +3 -3
  67. package/dist/types/src/components/DeckLayout/NodePlankHeading.d.ts.map +1 -1
  68. package/dist/types/src/components/DeckLayout/Plank.d.ts +8 -6
  69. package/dist/types/src/components/DeckLayout/Plank.d.ts.map +1 -1
  70. package/dist/types/src/components/DeckLayout/PlankControls.d.ts +2 -2
  71. package/dist/types/src/components/DeckLayout/PlankControls.d.ts.map +1 -1
  72. package/dist/types/src/components/DeckLayout/PlankError.d.ts +6 -6
  73. package/dist/types/src/components/DeckLayout/PlankError.d.ts.map +1 -1
  74. package/dist/types/src/components/DeckLayout/PlankLoading.d.ts +1 -2
  75. package/dist/types/src/components/DeckLayout/PlankLoading.d.ts.map +1 -1
  76. package/dist/types/src/components/DeckLayout/Sidebar.d.ts +1 -2
  77. package/dist/types/src/components/DeckLayout/Sidebar.d.ts.map +1 -1
  78. package/dist/types/src/components/DeckLayout/SidebarButton.d.ts +6 -5
  79. package/dist/types/src/components/DeckLayout/SidebarButton.d.ts.map +1 -1
  80. package/dist/types/src/components/DeckLayout/StatusBar.d.ts +1 -2
  81. package/dist/types/src/components/DeckLayout/StatusBar.d.ts.map +1 -1
  82. package/dist/types/src/components/DeckLayout/Toast.d.ts +2 -3
  83. package/dist/types/src/components/DeckLayout/Toast.d.ts.map +1 -1
  84. package/dist/types/src/components/DeckLayout/Topbar.d.ts +1 -2
  85. package/dist/types/src/components/DeckLayout/Topbar.d.ts.map +1 -1
  86. package/dist/types/src/components/LayoutSettings.d.ts +1 -2
  87. package/dist/types/src/components/LayoutSettings.d.ts.map +1 -1
  88. package/dist/types/src/components/fragments.d.ts +2 -0
  89. package/dist/types/src/components/fragments.d.ts.map +1 -1
  90. package/dist/types/src/components/index.d.ts +0 -2
  91. package/dist/types/src/components/index.d.ts.map +1 -1
  92. package/dist/types/src/events.d.ts +1 -0
  93. package/dist/types/src/events.d.ts.map +1 -1
  94. package/dist/types/src/hooks/useMainSize.d.ts +2 -2
  95. package/dist/types/src/hooks/useNode.d.ts.map +1 -1
  96. package/dist/types/src/layout.d.ts +5 -19
  97. package/dist/types/src/layout.d.ts.map +1 -1
  98. package/dist/types/src/meta.d.ts +1 -0
  99. package/dist/types/src/meta.d.ts.map +1 -1
  100. package/dist/types/src/translations.d.ts +3 -3
  101. package/dist/types/src/types.d.ts +117 -2
  102. package/dist/types/src/types.d.ts.map +1 -1
  103. package/dist/types/src/util/index.d.ts +3 -1
  104. package/dist/types/src/util/index.d.ts.map +1 -1
  105. package/dist/types/src/util/layoutAppliesTopbar.d.ts +2 -0
  106. package/dist/types/src/util/layoutAppliesTopbar.d.ts.map +1 -0
  107. package/dist/types/src/util/set-active.d.ts +9 -0
  108. package/dist/types/src/util/set-active.d.ts.map +1 -0
  109. package/dist/types/src/util/useHoistStatusbar.d.ts.map +1 -1
  110. package/package.json +32 -31
  111. package/src/DeckPlugin.ts +23 -59
  112. package/src/capabilities/{layout/app-graph-builder.ts → app-graph-builder.ts} +40 -28
  113. package/src/capabilities/capabilities.ts +5 -7
  114. package/src/capabilities/{navigation/check-app-scheme.ts → check-app-scheme.ts} +2 -2
  115. package/src/capabilities/index.ts +12 -3
  116. package/src/capabilities/intent-resolver.ts +368 -0
  117. package/src/capabilities/{layout/react-root.tsx → react-root.tsx} +8 -14
  118. package/src/capabilities/react-surface.tsx +31 -0
  119. package/src/capabilities/{settings/settings.ts → settings.ts} +4 -5
  120. package/src/capabilities/state.ts +108 -0
  121. package/src/capabilities/tools.ts +66 -0
  122. package/src/capabilities/url-handler.ts +65 -0
  123. package/src/components/DeckLayout/ActiveNode.tsx +2 -3
  124. package/src/components/DeckLayout/ComplementarySidebar.tsx +185 -77
  125. package/src/components/DeckLayout/ContentEmpty.tsx +7 -10
  126. package/src/components/DeckLayout/DeckLayout.tsx +141 -84
  127. package/src/components/DeckLayout/Fullscreen.tsx +2 -3
  128. package/src/components/DeckLayout/NodePlankHeading.tsx +57 -65
  129. package/src/components/DeckLayout/Plank.tsx +33 -41
  130. package/src/components/DeckLayout/PlankControls.tsx +12 -11
  131. package/src/components/DeckLayout/PlankError.tsx +6 -5
  132. package/src/components/DeckLayout/Sidebar.tsx +17 -20
  133. package/src/components/DeckLayout/SidebarButton.tsx +25 -31
  134. package/src/components/DeckLayout/StatusBar.tsx +5 -11
  135. package/src/components/DeckLayout/Toast.tsx +2 -2
  136. package/src/components/LayoutSettings.tsx +8 -8
  137. package/src/components/fragments.ts +8 -0
  138. package/src/components/index.ts +0 -2
  139. package/src/events.ts +1 -0
  140. package/src/hooks/useMainSize.ts +3 -3
  141. package/src/hooks/useNode.ts +3 -1
  142. package/src/layout.ts +43 -212
  143. package/src/meta.ts +1 -0
  144. package/src/translations.ts +8 -8
  145. package/src/types.ts +103 -4
  146. package/src/util/index.ts +3 -1
  147. package/src/util/layoutAppliesTopbar.ts +7 -0
  148. package/src/util/set-active.ts +47 -0
  149. package/src/util/useHoistStatusbar.ts +13 -8
  150. package/dist/lib/browser/app-graph-builder-67VRUD5K.mjs.map +0 -7
  151. package/dist/lib/browser/chunk-2M4PXYNB.mjs +0 -1052
  152. package/dist/lib/browser/chunk-2M4PXYNB.mjs.map +0 -7
  153. package/dist/lib/browser/chunk-2PJNBVCY.mjs +0 -39
  154. package/dist/lib/browser/chunk-2PJNBVCY.mjs.map +0 -7
  155. package/dist/lib/browser/chunk-4C2AFTET.mjs +0 -186
  156. package/dist/lib/browser/chunk-4C2AFTET.mjs.map +0 -7
  157. package/dist/lib/browser/chunk-5VFDMW5M.mjs.map +0 -7
  158. package/dist/lib/browser/chunk-KY5WXIXY.mjs +0 -44
  159. package/dist/lib/browser/chunk-KY5WXIXY.mjs.map +0 -7
  160. package/dist/lib/browser/deck-PLCSKPGL.mjs +0 -26
  161. package/dist/lib/browser/deck-PLCSKPGL.mjs.map +0 -7
  162. package/dist/lib/browser/intent-resolver-FVOQSTBX.mjs +0 -152
  163. package/dist/lib/browser/intent-resolver-FVOQSTBX.mjs.map +0 -7
  164. package/dist/lib/browser/intent-resolver-K7GW4A2I.mjs +0 -249
  165. package/dist/lib/browser/intent-resolver-K7GW4A2I.mjs.map +0 -7
  166. package/dist/lib/browser/location-QHRBQBQN.mjs +0 -35
  167. package/dist/lib/browser/location-QHRBQBQN.mjs.map +0 -7
  168. package/dist/lib/browser/react-context-3BDW7W2N.mjs +0 -32
  169. package/dist/lib/browser/react-context-3BDW7W2N.mjs.map +0 -7
  170. package/dist/lib/browser/react-root-UL7ZDRVZ.mjs.map +0 -7
  171. package/dist/lib/browser/react-surface-VPNOGGNN.mjs +0 -28
  172. package/dist/lib/browser/react-surface-VPNOGGNN.mjs.map +0 -7
  173. package/dist/lib/browser/settings-FNWW6WIJ.mjs.map +0 -7
  174. package/dist/lib/browser/state-7I5BD7SE.mjs +0 -34
  175. package/dist/lib/browser/state-7I5BD7SE.mjs.map +0 -7
  176. package/dist/lib/browser/url-handler-Z5B7LD3N.mjs +0 -76
  177. package/dist/lib/browser/url-handler-Z5B7LD3N.mjs.map +0 -7
  178. package/dist/types/src/capabilities/layout/app-graph-builder.d.ts +0 -181
  179. package/dist/types/src/capabilities/layout/app-graph-builder.d.ts.map +0 -1
  180. package/dist/types/src/capabilities/layout/deck.d.ts +0 -4
  181. package/dist/types/src/capabilities/layout/deck.d.ts.map +0 -1
  182. package/dist/types/src/capabilities/layout/index.d.ts +0 -229
  183. package/dist/types/src/capabilities/layout/index.d.ts.map +0 -1
  184. package/dist/types/src/capabilities/layout/intent-resolver.d.ts.map +0 -1
  185. package/dist/types/src/capabilities/layout/react-context.d.ts +0 -8
  186. package/dist/types/src/capabilities/layout/react-context.d.ts.map +0 -1
  187. package/dist/types/src/capabilities/layout/react-root.d.ts.map +0 -1
  188. package/dist/types/src/capabilities/layout/state.d.ts +0 -42
  189. package/dist/types/src/capabilities/layout/state.d.ts.map +0 -1
  190. package/dist/types/src/capabilities/navigation/check-app-scheme.d.ts.map +0 -1
  191. package/dist/types/src/capabilities/navigation/index.d.ts +0 -5
  192. package/dist/types/src/capabilities/navigation/index.d.ts.map +0 -1
  193. package/dist/types/src/capabilities/navigation/intent-resolver.d.ts +0 -4
  194. package/dist/types/src/capabilities/navigation/intent-resolver.d.ts.map +0 -1
  195. package/dist/types/src/capabilities/navigation/location.d.ts +0 -4
  196. package/dist/types/src/capabilities/navigation/location.d.ts.map +0 -1
  197. package/dist/types/src/capabilities/navigation/set-location.d.ts +0 -10
  198. package/dist/types/src/capabilities/navigation/set-location.d.ts.map +0 -1
  199. package/dist/types/src/capabilities/navigation/url-handler.d.ts.map +0 -1
  200. package/dist/types/src/capabilities/settings/index.d.ts +0 -3
  201. package/dist/types/src/capabilities/settings/index.d.ts.map +0 -1
  202. package/dist/types/src/capabilities/settings/react-surface.d.ts.map +0 -1
  203. package/dist/types/src/capabilities/settings/settings.d.ts.map +0 -1
  204. package/dist/types/src/components/DeckContext.d.ts +0 -11
  205. package/dist/types/src/components/DeckContext.d.ts.map +0 -1
  206. package/dist/types/src/components/LayoutContext.d.ts +0 -5
  207. package/dist/types/src/components/LayoutContext.d.ts.map +0 -1
  208. package/dist/types/src/layout.test.d.ts +0 -2
  209. package/dist/types/src/layout.test.d.ts.map +0 -1
  210. package/dist/types/src/util/layout-parts.d.ts +0 -7
  211. package/dist/types/src/util/layout-parts.d.ts.map +0 -1
  212. package/src/capabilities/layout/deck.ts +0 -25
  213. package/src/capabilities/layout/index.ts +0 -12
  214. package/src/capabilities/layout/intent-resolver.ts +0 -128
  215. package/src/capabilities/layout/react-context.tsx +0 -26
  216. package/src/capabilities/layout/state.ts +0 -32
  217. package/src/capabilities/navigation/index.ts +0 -10
  218. package/src/capabilities/navigation/intent-resolver.ts +0 -216
  219. package/src/capabilities/navigation/location.ts +0 -28
  220. package/src/capabilities/navigation/set-location.ts +0 -38
  221. package/src/capabilities/navigation/url-handler.ts +0 -67
  222. package/src/capabilities/settings/index.ts +0 -8
  223. package/src/capabilities/settings/react-surface.tsx +0 -23
  224. package/src/components/DeckContext.ts +0 -19
  225. package/src/components/LayoutContext.ts +0 -12
  226. package/src/layout.test.ts +0 -380
  227. package/src/util/layout-parts.ts +0 -12
  228. /package/dist/types/src/capabilities/{navigation/check-app-scheme.d.ts → check-app-scheme.d.ts} +0 -0
  229. /package/dist/types/src/capabilities/{layout/intent-resolver.d.ts → intent-resolver.d.ts} +0 -0
  230. /package/dist/types/src/capabilities/{layout/react-root.d.ts → react-root.d.ts} +0 -0
  231. /package/dist/types/src/capabilities/{settings/react-surface.d.ts → react-surface.d.ts} +0 -0
  232. /package/dist/types/src/capabilities/{settings/settings.d.ts → settings.d.ts} +0 -0
  233. /package/dist/types/src/capabilities/{navigation/url-handler.d.ts → url-handler.d.ts} +0 -0
@@ -1,1052 +0,0 @@
1
- import {
2
- calculateOverscroll,
3
- useBreakpoints
4
- } from "./chunk-2PJNBVCY.mjs";
5
- import {
6
- DeckAction,
7
- NewPlankPositions,
8
- OverscrollOptions
9
- } from "./chunk-KY5WXIXY.mjs";
10
- import {
11
- DECK_PLUGIN
12
- } from "./chunk-JQJ5UWVB.mjs";
13
-
14
- // packages/plugins/plugin-deck/src/components/DeckLayout/constants.ts
15
- var NAV_ID = "NavTree";
16
- var SURFACE_PREFIX = "surface:";
17
-
18
- // packages/plugins/plugin-deck/src/components/LayoutContext.ts
19
- import { createContext, useContext } from "react";
20
- import { raise } from "@dxos/debug";
21
- var LayoutContext = createContext(null);
22
- var useLayout = () => useContext(LayoutContext) ?? raise(new Error("Missing LayoutContext"));
23
-
24
- // packages/plugins/plugin-deck/src/components/DeckContext.ts
25
- import { createContext as createContext2, useContext as useContext2 } from "react";
26
- import { raise as raise2 } from "@dxos/debug";
27
- var DeckContext = createContext2(null);
28
- var useDeckContext = () => useContext2(DeckContext) ?? raise2(new Error("Missing DeckContext"));
29
-
30
- // packages/plugins/plugin-deck/src/components/DeckLayout/DeckLayout.tsx
31
- import { untracked } from "@preact/signals-core";
32
- import React17, { useCallback as useCallback3, useEffect as useEffect6, useMemo as useMemo5, useRef as useRef2, Fragment as Fragment2 } from "react";
33
- import { firstIdInPart, Surface as Surface10, usePluginManager } from "@dxos/app-framework";
34
- import { AttentionCapabilities } from "@dxos/plugin-attention";
35
- import { AlertDialog, Dialog as NaturalDialog, Main as Main3, Popover as Popover2, useOnTransition } from "@dxos/react-ui";
36
- import { Stack, StackContext as StackContext2, DEFAULT_HORIZONTAL_SIZE } from "@dxos/react-ui-stack";
37
- import { mainPaddingTransitions as mainPaddingTransitions2 } from "@dxos/react-ui-theme";
38
-
39
- // packages/plugins/plugin-deck/src/components/DeckLayout/ActiveNode.tsx
40
- import React from "react";
41
- import { Surface } from "@dxos/app-framework";
42
- import { useGraph } from "@dxos/plugin-graph";
43
- import { useAttended } from "@dxos/react-ui-attention";
44
-
45
- // packages/plugins/plugin-deck/src/hooks/useNode.ts
46
- import { useEffect, useState } from "react";
47
- var useNode = (graph, id, timeout) => {
48
- const [nodeState, setNodeState] = useState(id ? graph.findNode(id, false) : void 0);
49
- useEffect(() => {
50
- if (!id && nodeState) {
51
- setNodeState(void 0);
52
- }
53
- if (nodeState?.id === id || !id) {
54
- return;
55
- }
56
- const frame = requestAnimationFrame(async () => {
57
- try {
58
- const node = await graph.waitForNode(id, timeout);
59
- if (node) {
60
- setNodeState(node);
61
- }
62
- } catch {
63
- }
64
- });
65
- return () => cancelAnimationFrame(frame);
66
- }, [
67
- graph,
68
- id,
69
- timeout,
70
- nodeState?.id
71
- ]);
72
- return nodeState;
73
- };
74
-
75
- // packages/plugins/plugin-deck/src/hooks/useNodeActionExpander.ts
76
- import { useEffect as useEffect2 } from "react";
77
- import { ACTION_GROUP_TYPE, ACTION_TYPE, getGraph } from "@dxos/plugin-graph";
78
- var expandNodeActions = async (node) => {
79
- const graph = getGraph(node);
80
- await graph.expand(node, "outbound", ACTION_GROUP_TYPE);
81
- await graph.expand(node, "outbound", ACTION_TYPE);
82
- };
83
- var useNodeActionExpander = (node) => {
84
- useEffect2(() => {
85
- if (node) {
86
- const frame = requestAnimationFrame(() => {
87
- void expandNodeActions(node);
88
- });
89
- return () => cancelAnimationFrame(frame);
90
- }
91
- }, [
92
- node
93
- ]);
94
- };
95
-
96
- // packages/plugins/plugin-deck/src/hooks/useMainSize.ts
97
- import { useMainContext } from "@dxos/react-ui";
98
- var useMainSize = () => {
99
- const { navigationSidebarOpen, complementarySidebarOpen } = useMainContext("DeckPluginPlank");
100
- return {
101
- "data-sidebar-inline-start-state": navigationSidebarOpen ? "open" : "closed",
102
- "data-sidebar-inline-end-state": complementarySidebarOpen ? "open" : "closed"
103
- };
104
- };
105
-
106
- // packages/plugins/plugin-deck/src/components/DeckLayout/ActiveNode.tsx
107
- var ActiveNode = () => {
108
- const [id] = useAttended();
109
- const { graph } = useGraph();
110
- const activeNode = useNode(graph, id);
111
- useNodeActionExpander(activeNode);
112
- return /* @__PURE__ */ React.createElement("div", {
113
- role: "none",
114
- className: "sr-only"
115
- }, /* @__PURE__ */ React.createElement(Surface, {
116
- role: "document-title",
117
- data: {
118
- subject: activeNode
119
- },
120
- limit: 1
121
- }));
122
- };
123
-
124
- // packages/plugins/plugin-deck/src/components/DeckLayout/ComplementarySidebar.tsx
125
- import React7, { useCallback, useEffect as useEffect5, useMemo as useMemo2, useState as useState3 } from "react";
126
- import { createIntent as createIntent2, NavigationAction as NavigationAction2, SLUG_PATH_SEPARATOR as SLUG_PATH_SEPARATOR2, Surface as Surface3, useIntentDispatcher as useIntentDispatcher2 } from "@dxos/app-framework";
127
- import { useGraph as useGraph3 } from "@dxos/plugin-graph";
128
- import { Main, ScrollArea, useTranslation as useTranslation5, toLocalizedString as toLocalizedString2 } from "@dxos/react-ui";
129
- import { useAttended as useAttended2 } from "@dxos/react-ui-attention";
130
- import { railGridHorizontal, StackContext, StackItem as StackItem2 } from "@dxos/react-ui-stack";
131
- import { Tabs } from "@dxos/react-ui-tabs";
132
- import { mx as mx2 } from "@dxos/react-ui-theme";
133
-
134
- // packages/plugins/plugin-deck/src/components/DeckLayout/PlankError.tsx
135
- import React6, { useEffect as useEffect4, useState as useState2 } from "react";
136
- import { useTranslation as useTranslation4 } from "@dxos/react-ui";
137
- import { descriptionText, mx } from "@dxos/react-ui-theme";
138
-
139
- // packages/plugins/plugin-deck/src/components/DeckLayout/NodePlankHeading.tsx
140
- import React4, { Fragment, memo, useEffect as useEffect3, useMemo } from "react";
141
- import { createIntent, LayoutAction, NavigationAction, SLUG_PATH_SEPARATOR, Surface as Surface2, useIntentDispatcher } from "@dxos/app-framework";
142
- import { useGraph as useGraph2 } from "@dxos/plugin-graph";
143
- import { Icon as Icon2, Popover, toLocalizedString, useTranslation as useTranslation3 } from "@dxos/react-ui";
144
- import { StackItem } from "@dxos/react-ui-stack";
145
- import { TextTooltip } from "@dxos/react-ui-text-tooltip";
146
-
147
- // packages/plugins/plugin-deck/src/components/DeckLayout/PlankControls.tsx
148
- import React2, { forwardRef } from "react";
149
- import { Button, ButtonGroup, Icon, Tooltip, useTranslation } from "@dxos/react-ui";
150
- var PlankControl = ({ icon, label, ...props }) => {
151
- return /* @__PURE__ */ React2.createElement(Tooltip.Root, null, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
152
- asChild: true
153
- }, /* @__PURE__ */ React2.createElement(Button, {
154
- variant: "ghost",
155
- ...props
156
- }, /* @__PURE__ */ React2.createElement("span", {
157
- className: "sr-only"
158
- }, label), /* @__PURE__ */ React2.createElement(Icon, {
159
- icon,
160
- size: 4
161
- }))), /* @__PURE__ */ React2.createElement(Tooltip.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip.Content, {
162
- side: "bottom"
163
- }, label)));
164
- };
165
- var PlankControls = /* @__PURE__ */ forwardRef(({ onClick, variant = "default", capabilities: can, isSolo, pin, close = false, children, ...props }, forwardedRef) => {
166
- const { t } = useTranslation(DECK_PLUGIN);
167
- const buttonClassNames = variant === "hide-disabled" ? "disabled:hidden !pli-2 !plb-3" : "!pli-2 !plb-3";
168
- return /* @__PURE__ */ React2.createElement(ButtonGroup, {
169
- ...props,
170
- ref: forwardedRef
171
- }, pin && !isSolo && [
172
- "both",
173
- "start"
174
- ].includes(pin) && /* @__PURE__ */ React2.createElement(PlankControl, {
175
- label: t("pin start label"),
176
- variant: "ghost",
177
- classNames: buttonClassNames,
178
- onClick: () => onClick?.("pin-start"),
179
- icon: "ph--caret-line-left--regular"
180
- }), can.solo && /* @__PURE__ */ React2.createElement(PlankControl, {
181
- label: isSolo ? t("show deck plank label") : t("show solo plank label"),
182
- classNames: buttonClassNames,
183
- onClick: () => onClick?.("solo"),
184
- icon: isSolo ? "ph--arrow-u-down-left--regular" : "ph--arrows-out--regular"
185
- }), !isSolo && can.solo && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(PlankControl, {
186
- label: t("increment start label"),
187
- disabled: !can.incrementStart,
188
- classNames: buttonClassNames,
189
- onClick: () => onClick?.("increment-start"),
190
- icon: "ph--caret-left--regular"
191
- }), /* @__PURE__ */ React2.createElement(PlankControl, {
192
- label: t("increment end label"),
193
- disabled: !can.incrementEnd,
194
- classNames: buttonClassNames,
195
- onClick: () => onClick?.("increment-end"),
196
- icon: "ph--caret-right--regular"
197
- })), pin && !isSolo && [
198
- "both",
199
- "end"
200
- ].includes(pin) && /* @__PURE__ */ React2.createElement(PlankControl, {
201
- label: t("pin end label"),
202
- classNames: buttonClassNames,
203
- onClick: () => onClick?.("pin-end"),
204
- icon: "ph--caret-line-right--regular"
205
- }), close && !isSolo && /* @__PURE__ */ React2.createElement(PlankControl, {
206
- label: t(`${typeof close === "string" ? "minify" : "close"} label`),
207
- classNames: buttonClassNames,
208
- onClick: () => onClick?.("close"),
209
- "data-testid": "plankHeading.close",
210
- icon: close === "minify-start" ? "ph--caret-line-left--regular" : close === "minify-end" ? "ph--caret-line-right--regular" : "ph--x--regular"
211
- }), children);
212
- });
213
-
214
- // packages/plugins/plugin-deck/src/components/DeckLayout/SidebarButton.tsx
215
- import React3 from "react";
216
- import { IconButton, useTranslation as useTranslation2 } from "@dxos/react-ui";
217
- var ToggleSidebarButton = () => {
218
- const layoutContext = useLayout();
219
- const { t } = useTranslation2(DECK_PLUGIN);
220
- return /* @__PURE__ */ React3.createElement(IconButton, {
221
- variant: "ghost",
222
- iconOnly: true,
223
- icon: "ph--sidebar--regular",
224
- size: 4,
225
- label: t("open navigation sidebar label"),
226
- onClick: () => layoutContext.sidebarOpen = !layoutContext.sidebarOpen,
227
- classNames: "!pli-2 order-first"
228
- });
229
- };
230
- var CloseSidebarButton = () => {
231
- const layoutContext = useLayout();
232
- const { t } = useTranslation2(DECK_PLUGIN);
233
- return /* @__PURE__ */ React3.createElement(IconButton, {
234
- variant: "ghost",
235
- iconOnly: true,
236
- icon: "ph--caret-line-left--regular",
237
- size: 4,
238
- label: t("close navigation sidebar label"),
239
- onClick: () => layoutContext.sidebarOpen = false,
240
- classNames: "!rounded-none !pli-1 ch-focus-ring-inset pie-[max(.5rem,env(safe-area-inset-left))]"
241
- });
242
- };
243
- var ToggleComplementarySidebarButton = () => {
244
- const layoutContext = useLayout();
245
- const { t } = useTranslation2(DECK_PLUGIN);
246
- return /* @__PURE__ */ React3.createElement(IconButton, {
247
- iconOnly: true,
248
- onClick: () => layoutContext.complementarySidebarOpen = !layoutContext.complementarySidebarOpen,
249
- variant: "ghost",
250
- label: t("open complementary sidebar label"),
251
- classNames: "!pli-2 !plb-3 [&>svg]:-scale-x-100",
252
- icon: "ph--sidebar-simple--regular",
253
- size: 4
254
- });
255
- };
256
- var CloseComplementarySidebarButton = () => {
257
- const layoutContext = useLayout();
258
- const { t } = useTranslation2(DECK_PLUGIN);
259
- return /* @__PURE__ */ React3.createElement(IconButton, {
260
- iconOnly: true,
261
- variant: "ghost",
262
- size: 4,
263
- icon: "ph--caret-line-right--regular",
264
- label: t("close complementary sidebar label"),
265
- classNames: "!rounded-none border-is border-separator ch-focus-ring-inset pie-2 lg:pie-[max(.5rem,env(safe-area-inset-right))]",
266
- onClick: () => layoutContext.complementarySidebarOpen = false
267
- });
268
- };
269
-
270
- // packages/plugins/plugin-deck/src/components/fragments.ts
271
- var soloInlinePadding = "pis-[calc(env(safe-area-inset-left)+.25rem)] pie-[calc(env(safe-area-inset-left)+.25rem)]";
272
-
273
- // packages/plugins/plugin-deck/src/components/DeckLayout/NodePlankHeading.tsx
274
- var NodePlankHeading = /* @__PURE__ */ memo(({ coordinate, node, canIncrementStart, canIncrementEnd, popoverAnchorId, pending, actions = [] }) => {
275
- const { t } = useTranslation3(DECK_PLUGIN);
276
- const { graph } = useGraph2();
277
- const icon = node?.properties?.icon ?? "ph--placeholder--regular";
278
- const label = pending ? t("pending heading") : toLocalizedString(node?.properties?.label ?? [
279
- "plank heading fallback label",
280
- {
281
- ns: DECK_PLUGIN
282
- }
283
- ], t);
284
- const { dispatchPromise: dispatch } = useIntentDispatcher();
285
- const ActionRoot = node && popoverAnchorId === `dxos.org/ui/${DECK_PLUGIN}/${node.id}` ? Popover.Anchor : Fragment;
286
- const breakpoint = useBreakpoints();
287
- useEffect3(() => {
288
- const frame = requestAnimationFrame(() => {
289
- node && graph.actions(node);
290
- });
291
- return () => cancelAnimationFrame(frame);
292
- }, [
293
- node
294
- ]);
295
- const layoutPart = coordinate.part;
296
- const attendableId = coordinate.entryId.split(SLUG_PATH_SEPARATOR).at(0);
297
- const capabilities = useMemo(() => ({
298
- solo: layoutPart === "solo" || layoutPart === "main",
299
- incrementStart: canIncrementStart,
300
- incrementEnd: canIncrementEnd
301
- }), [
302
- breakpoint,
303
- layoutPart,
304
- canIncrementStart,
305
- canIncrementEnd
306
- ]);
307
- return /* @__PURE__ */ React4.createElement(StackItem.Heading, {
308
- classNames: [
309
- "plb-1 border-be border-separator items-stretch gap-1",
310
- layoutPart === "solo" ? soloInlinePadding : "pli-1"
311
- ]
312
- }, /* @__PURE__ */ React4.createElement(ActionRoot, null, node ? /* @__PURE__ */ React4.createElement(StackItem.Sigil, {
313
- icon,
314
- related: layoutPart === "complementary",
315
- attendableId,
316
- triggerLabel: t("actions menu label"),
317
- actions: [
318
- actions,
319
- graph.actions(node)
320
- ].filter((a) => a.length > 0),
321
- onAction: (action) => typeof action.data === "function" && action.data?.({
322
- node: action,
323
- caller: DECK_PLUGIN
324
- })
325
- }, /* @__PURE__ */ React4.createElement(Surface2, {
326
- role: "menu-footer",
327
- data: {
328
- subject: node.data
329
- }
330
- })) : /* @__PURE__ */ React4.createElement(StackItem.SigilButton, null, /* @__PURE__ */ React4.createElement("span", {
331
- className: "sr-only"
332
- }, label), /* @__PURE__ */ React4.createElement(Icon2, {
333
- icon,
334
- size: 5
335
- }))), breakpoint !== "desktop" && /* @__PURE__ */ React4.createElement(ToggleSidebarButton, null), /* @__PURE__ */ React4.createElement(TextTooltip, {
336
- text: label,
337
- onlyWhenTruncating: true
338
- }, /* @__PURE__ */ React4.createElement(StackItem.HeadingLabel, {
339
- attendableId,
340
- related: layoutPart === "complementary",
341
- ...pending && {
342
- classNames: "text-description"
343
- }
344
- }, label)), node && layoutPart !== "complementary" && // TODO(Zan): What are we doing with layout coordinate here?
345
- /* @__PURE__ */ React4.createElement(Surface2, {
346
- role: "navbar-end",
347
- data: {
348
- subject: node.data
349
- }
350
- }), /* @__PURE__ */ React4.createElement(PlankControls, {
351
- capabilities,
352
- isSolo: layoutPart === "solo",
353
- onClick: (eventType) => {
354
- if (!layoutPart) {
355
- return;
356
- }
357
- if (eventType === "solo") {
358
- return dispatch(createIntent(NavigationAction.Adjust, {
359
- type: eventType,
360
- layoutCoordinate: {
361
- part: "main",
362
- entryId: coordinate.entryId
363
- }
364
- }));
365
- } else if (eventType === "close") {
366
- if (layoutPart === "complementary") {
367
- return dispatch(createIntent(LayoutAction.SetLayout, {
368
- element: "complementary",
369
- state: false
370
- }));
371
- } else {
372
- return dispatch(createIntent(NavigationAction.Close, {
373
- activeParts: {
374
- [layoutPart]: [
375
- coordinate.entryId
376
- ]
377
- }
378
- }));
379
- }
380
- } else {
381
- return dispatch(createIntent(NavigationAction.Adjust, {
382
- type: eventType,
383
- layoutCoordinate: coordinate
384
- }));
385
- }
386
- },
387
- close: layoutPart === "complementary" ? "minify-end" : true
388
- }, /* @__PURE__ */ React4.createElement(ToggleComplementarySidebarButton, null)));
389
- });
390
-
391
- // packages/plugins/plugin-deck/src/components/DeckLayout/PlankLoading.tsx
392
- import React5 from "react";
393
- var PlankLoading = () => {
394
- return /* @__PURE__ */ React5.createElement("div", {
395
- role: "none",
396
- className: "grid place-items-center attention-surface"
397
- });
398
- };
399
-
400
- // packages/plugins/plugin-deck/src/components/DeckLayout/PlankError.tsx
401
- var PlankContentError = ({ error }) => {
402
- const { t } = useTranslation4(DECK_PLUGIN);
403
- const errorString = error?.toString() ?? "";
404
- return /* @__PURE__ */ React6.createElement("div", {
405
- role: "none",
406
- className: "overflow-auto p-8 attention-surface grid place-items-center"
407
- }, /* @__PURE__ */ React6.createElement("p", {
408
- role: "alert",
409
- className: mx(descriptionText, "break-words border border-dashed border-separator rounded-lg p-8", errorString.length < 256 && "text-lg")
410
- }, error ? errorString : t("error fallback message")));
411
- };
412
- var PlankError = ({ layoutCoordinate, node, error }) => {
413
- const [timedOut, setTimedOut] = useState2(false);
414
- useEffect4(() => {
415
- setTimeout(() => setTimedOut(true), 5e3);
416
- }, []);
417
- return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(NodePlankHeading, {
418
- coordinate: layoutCoordinate,
419
- node,
420
- pending: !timedOut
421
- }), timedOut ? /* @__PURE__ */ React6.createElement(PlankContentError, {
422
- error
423
- }) : /* @__PURE__ */ React6.createElement(PlankLoading, null));
424
- };
425
-
426
- // packages/plugins/plugin-deck/src/components/DeckLayout/ComplementarySidebar.tsx
427
- var ComplementarySidebar = ({ panels, current }) => {
428
- const { popoverAnchorId } = useLayout();
429
- const attended = useAttended2();
430
- const panelIds = useMemo2(() => panels.map((p) => p.id), [
431
- panels
432
- ]);
433
- const activePanelId = panelIds.find((p) => p === current) ?? panels[0].id;
434
- const activeEntryId = attended[0] ? `${attended[0]}${SLUG_PATH_SEPARATOR2}${activePanelId}` : void 0;
435
- const { graph } = useGraph3();
436
- const node = useNode(graph, activeEntryId);
437
- const { t } = useTranslation5(DECK_PLUGIN);
438
- const { dispatchPromise: dispatch } = useIntentDispatcher2();
439
- useNodeActionExpander(node);
440
- const [internalValue, setInternalValue] = useState3(activePanelId);
441
- useEffect5(() => {
442
- setInternalValue(activePanelId);
443
- }, [
444
- activePanelId
445
- ]);
446
- const handleValueChange = useCallback((nextValue) => {
447
- setInternalValue(nextValue);
448
- void dispatch(createIntent2(NavigationAction2.Open, {
449
- activeParts: {
450
- complementary: nextValue
451
- }
452
- }));
453
- }, [
454
- dispatch
455
- ]);
456
- return /* @__PURE__ */ React7.createElement(Main.ComplementarySidebar, {
457
- classNames: "lg:block-start-[calc(env(safe-area-inset-top)+var(--rail-size))]"
458
- }, /* @__PURE__ */ React7.createElement(StackContext.Provider, {
459
- value: {
460
- size: "contain",
461
- orientation: "horizontal",
462
- rail: true
463
- }
464
- }, /* @__PURE__ */ React7.createElement("div", {
465
- role: "none",
466
- className: mx2(railGridHorizontal, "grid grid-cols-[100%] bs-full")
467
- }, /* @__PURE__ */ React7.createElement(Tabs.Root, {
468
- orientation: "horizontal",
469
- value: internalValue,
470
- onValueChange: handleValueChange,
471
- attendableId: attended[0],
472
- classNames: "contents"
473
- }, /* @__PURE__ */ React7.createElement(StackItem2.Heading, {
474
- classNames: "border-be border-separator grid grid-cols-[1fr_min-content] items-stretch"
475
- }, /* @__PURE__ */ React7.createElement(ScrollArea.Root, {
476
- classNames: "flex-1 min-is-0"
477
- }, /* @__PURE__ */ React7.createElement(ScrollArea.Viewport, null, /* @__PURE__ */ React7.createElement(Tabs.Tablist, {
478
- classNames: "bs-[--rail-content] is-min items-stretch pis-[max(.5rem,env(safe-area-inset-left))] sm:pis-2"
479
- }, panels.map((panel) => /* @__PURE__ */ React7.createElement(Tabs.Tab, {
480
- key: panel.id,
481
- value: panel.id,
482
- classNames: "!min-bs-0"
483
- }, toLocalizedString2(panel.label, t)))), /* @__PURE__ */ React7.createElement(ScrollArea.Scrollbar, {
484
- orientation: "horizontal"
485
- }, /* @__PURE__ */ React7.createElement(ScrollArea.Thumb, null)))), /* @__PURE__ */ React7.createElement(CloseComplementarySidebarButton, null)), /* @__PURE__ */ React7.createElement(ScrollArea.Root, null, /* @__PURE__ */ React7.createElement(ScrollArea.Viewport, null, panels.map((panel) => /* @__PURE__ */ React7.createElement(Tabs.Tabpanel, {
486
- key: panel.id,
487
- value: panel.id,
488
- classNames: "pbe-[env(safe-area-inset-bottom)]"
489
- }, panel.id === activePanelId && node && /* @__PURE__ */ React7.createElement(Surface3, {
490
- key: activeEntryId,
491
- role: `complementary--${activePanelId}`,
492
- data: {
493
- id: activeEntryId,
494
- subject: node.properties.object ?? node.properties.space,
495
- popoverAnchorId
496
- },
497
- fallback: PlankContentError,
498
- placeholder: /* @__PURE__ */ React7.createElement(PlankLoading, null)
499
- }))), /* @__PURE__ */ React7.createElement(ScrollArea.Scrollbar, {
500
- orientation: "vertical"
501
- }, /* @__PURE__ */ React7.createElement(ScrollArea.Thumb, null))))))));
502
- };
503
-
504
- // packages/plugins/plugin-deck/src/components/DeckLayout/ContentEmpty.tsx
505
- import React8 from "react";
506
- import { Surface as Surface4 } from "@dxos/app-framework";
507
- import { mx as mx3 } from "@dxos/react-ui-theme";
508
- var ContentEmpty = () => {
509
- return /* @__PURE__ */ React8.createElement("div", {
510
- role: "none",
511
- className: "min-bs-screen is-dvw sm:is-full p-8 grid grid-rows-[var(--rail-size)_1fr]",
512
- "data-testid": "layoutPlugin.firstRunMessage"
513
- }, /* @__PURE__ */ React8.createElement("div", {
514
- role: "toolbar",
515
- className: mx3(soloInlinePadding, "flex items-stretch")
516
- }, /* @__PURE__ */ React8.createElement(ToggleSidebarButton, null), /* @__PURE__ */ React8.createElement("span", {
517
- role: "none",
518
- className: "grow"
519
- })), /* @__PURE__ */ React8.createElement("div", {
520
- role: "none",
521
- className: "grid place-items-center"
522
- }, /* @__PURE__ */ React8.createElement(Surface4, {
523
- role: "keyshortcuts"
524
- })));
525
- };
526
-
527
- // packages/plugins/plugin-deck/src/components/DeckLayout/Fullscreen.tsx
528
- import React10 from "react";
529
- import { Surface as Surface5 } from "@dxos/app-framework";
530
- import { useGraph as useGraph4 } from "@dxos/plugin-graph";
531
- import { fixedInsetFlexLayout } from "@dxos/react-ui-theme";
532
-
533
- // packages/plugins/plugin-deck/src/components/DeckLayout/Fallback.tsx
534
- import React9 from "react";
535
- import { useTranslation as useTranslation6 } from "@dxos/react-ui";
536
- import { errorText, mx as mx4 } from "@dxos/react-ui-theme";
537
- var Fallback = () => {
538
- const { t } = useTranslation6(DECK_PLUGIN);
539
- return /* @__PURE__ */ React9.createElement("div", {
540
- role: "none",
541
- className: "min-bs-screen is-full flex items-center justify-center p-8"
542
- }, /* @__PURE__ */ React9.createElement("p", {
543
- role: "alert",
544
- className: mx4(errorText, "border border-error-400/50 rounded-lg flex items-center justify-center p-8 font-normal text-lg")
545
- }, t("plugin error message")));
546
- };
547
-
548
- // packages/plugins/plugin-deck/src/components/DeckLayout/Fullscreen.tsx
549
- var Fullscreen = ({ id }) => {
550
- const { graph } = useGraph4();
551
- const fullScreenNode = useNode(graph, id);
552
- return /* @__PURE__ */ React10.createElement("div", {
553
- role: "none",
554
- className: fixedInsetFlexLayout
555
- }, /* @__PURE__ */ React10.createElement(Surface5, {
556
- role: "main",
557
- limit: 1,
558
- fallback: Fallback,
559
- data: {
560
- subject: fullScreenNode?.data,
561
- component: id?.startsWith(SURFACE_PREFIX) ? id.slice(SURFACE_PREFIX.length) : void 0
562
- }
563
- }));
564
- };
565
-
566
- // packages/plugins/plugin-deck/src/components/DeckLayout/Plank.tsx
567
- import React11, { memo as memo2, useCallback as useCallback2, useLayoutEffect, useMemo as useMemo3, useRef } from "react";
568
- import { createIntent as createIntent3, indexInPart, LayoutAction as LayoutAction2, partLength, Surface as Surface6, useIntentDispatcher as useIntentDispatcher3 } from "@dxos/app-framework";
569
- import { debounce } from "@dxos/async";
570
- import { useGraph as useGraph5 } from "@dxos/plugin-graph";
571
- import { useAttendableAttributes } from "@dxos/react-ui-attention";
572
- import { StackItem as StackItem3, railGridHorizontal as railGridHorizontal2 } from "@dxos/react-ui-stack";
573
- import { mainIntrinsicSize, mx as mx5 } from "@dxos/react-ui-theme";
574
- var UNKNOWN_ID = "unknown_id";
575
- var Plank = /* @__PURE__ */ memo2(({ entry, layoutParts, part, layoutMode, order }) => {
576
- const { dispatchPromise: dispatch } = useIntentDispatcher3();
577
- const coordinate = useMemo3(() => ({
578
- part,
579
- entryId: entry?.id ?? UNKNOWN_ID
580
- }), [
581
- entry?.id,
582
- part
583
- ]);
584
- const { popoverAnchorId, scrollIntoView } = useLayout();
585
- const { plankSizing } = useDeckContext();
586
- const { graph } = useGraph5();
587
- const node = useNode(graph, entry?.id);
588
- const rootElement = useRef(null);
589
- const canResize = layoutMode === "deck";
590
- const Root = part === "solo" ? "article" : StackItem3.Root;
591
- const attendableAttrs = useAttendableAttributes(coordinate.entryId);
592
- const index = indexInPart(layoutParts, coordinate);
593
- const length = partLength(layoutParts, part);
594
- const canIncrementStart = part === "main" && index !== void 0 && index > 0 && length !== void 0 && length > 1;
595
- const canIncrementEnd = part === "main" && index !== void 0 && index < length - 1 && length !== void 0;
596
- const size = plankSizing?.[coordinate.entryId];
597
- const setSize = useCallback2(debounce((nextSize) => {
598
- return dispatch(createIntent3(DeckAction.UpdatePlankSize, {
599
- id: coordinate.entryId,
600
- size: nextSize
601
- }));
602
- }, 200), [
603
- dispatch,
604
- coordinate.entryId
605
- ]);
606
- const handleKeyDown = useCallback2((event) => {
607
- if (event.target === event.currentTarget && event.key === "Escape") {
608
- rootElement.current?.closest("main")?.focus();
609
- }
610
- }, []);
611
- useLayoutEffect(() => {
612
- if (scrollIntoView === coordinate.entryId) {
613
- const focusable = rootElement.current?.querySelector("button") || rootElement.current;
614
- focusable?.focus({
615
- preventScroll: true
616
- });
617
- layoutMode === "deck" && focusable?.scrollIntoView({
618
- behavior: "smooth",
619
- inline: "center"
620
- });
621
- void dispatch(createIntent3(LayoutAction2.ScrollIntoView, {
622
- id: void 0
623
- }));
624
- }
625
- }, [
626
- coordinate.entryId,
627
- scrollIntoView,
628
- layoutMode
629
- ]);
630
- const isSolo = layoutMode === "solo" && part === "solo";
631
- const isAttendable = isSolo || layoutMode === "deck" && part === "main";
632
- const sizeAttrs = useMainSize();
633
- const data = useMemo3(() => node && {
634
- subject: node.data,
635
- path: entry?.path,
636
- coordinate,
637
- popoverAnchorId
638
- }, [
639
- node,
640
- node?.data,
641
- entry?.path,
642
- coordinate,
643
- popoverAnchorId
644
- ]);
645
- const placeholder = useMemo3(() => /* @__PURE__ */ React11.createElement(PlankLoading, null), []);
646
- const className = mx5("attention-surface relative", isSolo && mainIntrinsicSize, isSolo && railGridHorizontal2, isSolo ? "grid absolute inset-0" : "!border-separator border-li");
647
- return /* @__PURE__ */ React11.createElement(Root, {
648
- ref: rootElement,
649
- "data-testid": "deck.plank",
650
- tabIndex: 0,
651
- ...part === "solo" ? {
652
- ...sizeAttrs,
653
- className
654
- } : {
655
- item: {
656
- id: entry?.id ?? "never"
657
- },
658
- size,
659
- onSizeChange: setSize,
660
- classNames: className,
661
- order,
662
- role: "article"
663
- },
664
- ...isAttendable ? attendableAttrs : {},
665
- onKeyDown: handleKeyDown
666
- }, node ? /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(NodePlankHeading, {
667
- coordinate,
668
- node,
669
- canIncrementStart,
670
- canIncrementEnd,
671
- popoverAnchorId
672
- }), /* @__PURE__ */ React11.createElement(Surface6, {
673
- key: node.id,
674
- role: "article",
675
- data,
676
- limit: 1,
677
- fallback: PlankContentError,
678
- placeholder
679
- })) : /* @__PURE__ */ React11.createElement(PlankError, {
680
- layoutCoordinate: coordinate
681
- }), canResize && /* @__PURE__ */ React11.createElement(StackItem3.ResizeHandle, null));
682
- });
683
-
684
- // packages/plugins/plugin-deck/src/components/DeckLayout/Sidebar.tsx
685
- import React13, { useMemo as useMemo4 } from "react";
686
- import { Surface as Surface8 } from "@dxos/app-framework";
687
- import { Main as Main2 } from "@dxos/react-ui";
688
- import { mx as mx7 } from "@dxos/react-ui-theme";
689
-
690
- // packages/plugins/plugin-deck/src/components/DeckLayout/Banner.tsx
691
- import React12 from "react";
692
- import { Surface as Surface7 } from "@dxos/app-framework";
693
- import { mx as mx6 } from "@dxos/react-ui-theme";
694
- var Banner = ({ variant, classNames }) => {
695
- return /* @__PURE__ */ React12.createElement("header", {
696
- className: mx6("flex items-stretch relative plb-1 pis-1 pie-2", variant === "topbar" && "fixed inset-inline-0 block-start-[env(safe-area-inset-top)] bs-[--rail-size] border-be border-separator", classNames)
697
- }, variant === "sidebar" ? /* @__PURE__ */ React12.createElement(CloseSidebarButton, null) : /* @__PURE__ */ React12.createElement(ToggleSidebarButton, null), /* @__PURE__ */ React12.createElement("span", {
698
- className: "self-center grow mis-1"
699
- }, "Composer"), variant === "topbar" && /* @__PURE__ */ React12.createElement("div", {
700
- role: "none",
701
- className: "absolute inset-0 pointer-events-none"
702
- }, /* @__PURE__ */ React12.createElement("div", {
703
- role: "none",
704
- className: "grid bs-full pointer-fine:p-1 max-is-md mli-auto pointer-events-auto"
705
- }, /* @__PURE__ */ React12.createElement(Surface7, {
706
- role: "search-input",
707
- limit: 1
708
- }))), /* @__PURE__ */ React12.createElement("span", {
709
- role: "none",
710
- className: "grow"
711
- }), /* @__PURE__ */ React12.createElement(Surface7, {
712
- role: "header-end",
713
- limit: 1
714
- }), /* @__PURE__ */ React12.createElement(Surface7, {
715
- role: "notch-start",
716
- limit: 1
717
- }));
718
- };
719
-
720
- // packages/plugins/plugin-deck/src/util/useHoistStatusbar.ts
721
- import { useLayoutEffect as useLayoutEffect2, useState as useState4 } from "react";
722
- var useHoistStatusbar = (breakpoint) => {
723
- const [safeAreaBottom, setSafeAreaBottom] = useState4(Infinity);
724
- useLayoutEffect2(() => setSafeAreaBottom(parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--safe-area-bottom"))), []);
725
- return Number.isFinite(safeAreaBottom) && safeAreaBottom < 1 && breakpoint === "desktop";
726
- };
727
-
728
- // packages/plugins/plugin-deck/src/components/DeckLayout/Sidebar.tsx
729
- var Sidebar = () => {
730
- const layoutContext = useLayout();
731
- const { popoverAnchorId } = layoutContext;
732
- const breakpoint = useBreakpoints();
733
- const hoistStatusbar = useHoistStatusbar(breakpoint);
734
- const navigationData = useMemo4(() => ({
735
- popoverAnchorId
736
- }), [
737
- popoverAnchorId
738
- ]);
739
- return /* @__PURE__ */ React13.createElement(Main2.NavigationSidebar, {
740
- classNames: "grid grid-cols-1 grid-rows-[var(--rail-size)_var(--rail-action)_1fr_min-content_min-content] md:grid-rows-[var(--rail-size)_var(--rail-action)_1fr_min-content] lg:grid-rows-[1fr_min-content] overflow-hidden lg:block-start-[calc(env(safe-area-inset-top)+var(--rail-size))]"
741
- }, breakpoint !== "desktop" && /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(Banner, {
742
- variant: "sidebar"
743
- }), /* @__PURE__ */ React13.createElement(Surface8, {
744
- role: "search-input",
745
- limit: 1
746
- })), /* @__PURE__ */ React13.createElement("div", {
747
- role: "none",
748
- className: mx7("!overflow-y-auto", breakpoint !== "desktop" && "border-be border-separator")
749
- }, /* @__PURE__ */ React13.createElement(Surface8, {
750
- role: "navigation",
751
- data: navigationData,
752
- limit: 1
753
- })), !hoistStatusbar && /* @__PURE__ */ React13.createElement(Surface8, {
754
- role: "status-bar--sidebar-footer",
755
- limit: 1
756
- }));
757
- };
758
-
759
- // packages/plugins/plugin-deck/src/components/DeckLayout/StatusBar.tsx
760
- import React14 from "react";
761
- import { Surface as Surface9 } from "@dxos/app-framework";
762
- import { mainPadding, mainPaddingTransitions, mx as mx8 } from "@dxos/react-ui-theme";
763
- var StatusBar = ({ showHints }) => {
764
- const sizeAttrs = useMainSize();
765
- return /* @__PURE__ */ React14.createElement("div", {
766
- role: "contentinfo",
767
- ...sizeAttrs,
768
- className: mx8("fixed block-end-0 inset-inline-0 flex justify-between items-center border-bs border-separator z-[2] pbe-[env(safe-area-inset-bottom)]", mainPadding, mainPaddingTransitions)
769
- }, /* @__PURE__ */ React14.createElement("div", {
770
- role: "none"
771
- }, showHints && /* @__PURE__ */ React14.createElement(Surface9, {
772
- role: "hints",
773
- limit: 1
774
- })), /* @__PURE__ */ React14.createElement(Surface9, {
775
- role: "status-bar",
776
- limit: 1
777
- }));
778
- };
779
-
780
- // packages/plugins/plugin-deck/src/components/DeckLayout/Toast.tsx
781
- import React15 from "react";
782
- import { Button as Button2, Icon as Icon3, Toast as NaturalToast, toLocalizedString as toLocalizedString3, useTranslation as useTranslation7 } from "@dxos/react-ui";
783
- var Toast = ({ id, title, description, icon, duration, actionLabel, actionAlt, closeLabel, onAction, onOpenChange }) => {
784
- const { t } = useTranslation7(DECK_PLUGIN);
785
- return /* @__PURE__ */ React15.createElement(NaturalToast.Root, {
786
- "data-testid": id,
787
- defaultOpen: true,
788
- duration,
789
- onOpenChange
790
- }, /* @__PURE__ */ React15.createElement(NaturalToast.Body, null, /* @__PURE__ */ React15.createElement(NaturalToast.Title, {
791
- classNames: "items-center"
792
- }, icon && /* @__PURE__ */ React15.createElement(Icon3, {
793
- icon,
794
- size: 5,
795
- classNames: "inline mr-1"
796
- }), title && /* @__PURE__ */ React15.createElement("span", null, toLocalizedString3(title, t))), description && /* @__PURE__ */ React15.createElement(NaturalToast.Description, null, description && toLocalizedString3(description, t))), /* @__PURE__ */ React15.createElement(NaturalToast.Actions, null, onAction && actionAlt && actionLabel && /* @__PURE__ */ React15.createElement(NaturalToast.Action, {
797
- altText: toLocalizedString3(actionAlt, t),
798
- asChild: true
799
- }, /* @__PURE__ */ React15.createElement(Button2, {
800
- "data-testid": "toast.action",
801
- variant: "primary",
802
- onClick: () => onAction?.()
803
- }, toLocalizedString3(actionLabel, t))), closeLabel && /* @__PURE__ */ React15.createElement(NaturalToast.Close, {
804
- asChild: true
805
- }, /* @__PURE__ */ React15.createElement(Button2, {
806
- "data-testid": "toast.close"
807
- }, toLocalizedString3(closeLabel, t)))));
808
- };
809
-
810
- // packages/plugins/plugin-deck/src/components/DeckLayout/Topbar.tsx
811
- import React16 from "react";
812
- var Topbar = () => {
813
- return /* @__PURE__ */ React16.createElement(Banner, {
814
- variant: "topbar"
815
- });
816
- };
817
-
818
- // packages/plugins/plugin-deck/src/components/DeckLayout/DeckLayout.tsx
819
- var PlankSeparator = ({ index }) => index > 0 ? /* @__PURE__ */ React17.createElement("span", {
820
- role: "separator",
821
- className: "row-span-2 bg-deck is-4",
822
- style: {
823
- gridColumn: index * 2
824
- }
825
- }) : null;
826
- var DeckLayout = ({ layoutParts, toasts, overscroll, showHints, panels, onDismissToast }) => {
827
- const context = useLayout();
828
- const { layoutMode, sidebarOpen, complementarySidebarOpen, dialogOpen, dialogContent, dialogBlockAlign, dialogType, popoverOpen, popoverContent, popoverAnchorId } = context;
829
- const breakpoint = useBreakpoints();
830
- const hoistStatusbar = useHoistStatusbar(breakpoint);
831
- const { plankSizing } = useDeckContext();
832
- const pluginManager = usePluginManager();
833
- const fullScreenSlug = useMemo5(() => firstIdInPart(layoutParts, "fullScreen"), [
834
- layoutParts
835
- ]);
836
- const scrollLeftRef = useRef2();
837
- const deckRef = useRef2(null);
838
- const isSoloModeLoaded = layoutMode === "solo" && Boolean(layoutParts.solo?.[0]);
839
- useEffect6(() => {
840
- const attended = untracked(() => {
841
- const attention = pluginManager.context.requestCapability(AttentionCapabilities.Attention);
842
- return attention.current;
843
- });
844
- const firstId = isSoloModeLoaded ? firstIdInPart(layoutParts, "solo") : firstIdInPart(layoutParts, "main");
845
- if (attended.length === 0 && firstId) {
846
- document.querySelector(`article[data-attendable-id="${firstId}"] button`)?.focus();
847
- }
848
- }, []);
849
- const handleResize = useCallback3(() => {
850
- scrollLeftRef.current = null;
851
- }, []);
852
- useEffect6(() => {
853
- window.addEventListener("resize", handleResize);
854
- return () => window.removeEventListener("resize", handleResize);
855
- }, [
856
- handleResize
857
- ]);
858
- const restoreScroll = useCallback3(() => {
859
- if (deckRef.current && scrollLeftRef.current != null) {
860
- deckRef.current.scrollLeft = scrollLeftRef.current;
861
- }
862
- }, []);
863
- useOnTransition(layoutMode, (mode) => mode !== "deck", "deck", restoreScroll);
864
- const handleScroll = useCallback3((event) => {
865
- if (layoutMode === "deck" && event.currentTarget === event.target) {
866
- scrollLeftRef.current = event.target.scrollLeft;
867
- }
868
- }, [
869
- layoutMode
870
- ]);
871
- const isEmpty = (layoutParts.main?.length ?? 0) === 0 && (layoutParts.solo?.length ?? 0) === 0;
872
- const padding = useMemo5(() => {
873
- if (layoutMode === "deck" && overscroll === "centering") {
874
- return calculateOverscroll(layoutParts.main?.length ?? 0);
875
- }
876
- return {};
877
- }, [
878
- layoutMode,
879
- overscroll,
880
- layoutParts.main
881
- ]);
882
- const Dialog = dialogType === "alert" ? AlertDialog : NaturalDialog;
883
- return /* @__PURE__ */ React17.createElement(Popover2.Root, {
884
- modal: true,
885
- open: !!(popoverAnchorId && popoverOpen),
886
- onOpenChange: (nextOpen) => {
887
- if (nextOpen && popoverAnchorId) {
888
- context.popoverOpen = true;
889
- } else {
890
- context.popoverOpen = false;
891
- context.popoverAnchorId = void 0;
892
- }
893
- }
894
- }, /* @__PURE__ */ React17.createElement(ActiveNode, null), layoutMode === "fullscreen" && /* @__PURE__ */ React17.createElement(Fullscreen, {
895
- id: fullScreenSlug
896
- }), layoutMode !== "fullscreen" && /* @__PURE__ */ React17.createElement(Main3.Root, {
897
- navigationSidebarOpen: context.sidebarOpen,
898
- onNavigationSidebarOpenChange: (next) => context.sidebarOpen = next,
899
- complementarySidebarOpen: context.complementarySidebarOpen,
900
- onComplementarySidebarOpenChange: (next) => context.complementarySidebarOpen = next
901
- }, /* @__PURE__ */ React17.createElement(Sidebar, null), /* @__PURE__ */ React17.createElement(ComplementarySidebar, {
902
- panels,
903
- current: layoutParts.complementary?.[0].id
904
- }), /* @__PURE__ */ React17.createElement(Main3.Overlay, null), isEmpty && /* @__PURE__ */ React17.createElement(Main3.Content, {
905
- handlesFocus: true
906
- }, /* @__PURE__ */ React17.createElement(ContentEmpty, null)), !isEmpty && /* @__PURE__ */ React17.createElement(Main3.Content, {
907
- bounce: true,
908
- classNames: [
909
- "grid !block-start-[env(safe-area-inset-top)] lg:!block-start-[calc(env(safe-area-inset-top)+var(--rail-size))]",
910
- hoistStatusbar && "lg:block-end-[--statusbar-size]"
911
- ],
912
- handlesFocus: true,
913
- style: {
914
- "--dx-main-sidebarWidth": sidebarOpen ? "var(--nav-sidebar-size)" : "0px",
915
- "--dx-main-complementaryWidth": complementarySidebarOpen ? "var(--complementary-sidebar-size)" : "0px",
916
- "--dx-main-contentFirstWidth": `${plankSizing[layoutParts.main?.[0]?.id ?? "never"] ?? DEFAULT_HORIZONTAL_SIZE}rem`,
917
- "--dx-main-contentLastWidth": `${plankSizing[layoutParts.main?.[(layoutParts.main?.length ?? 1) - 1]?.id ?? "never"] ?? DEFAULT_HORIZONTAL_SIZE}rem`
918
- }
919
- }, /* @__PURE__ */ React17.createElement("div", {
920
- role: "none",
921
- className: !isSoloModeLoaded ? "relative bg-deck overflow-hidden" : "sr-only",
922
- ...isSoloModeLoaded && {
923
- inert: ""
924
- }
925
- }, /* @__PURE__ */ React17.createElement(Stack, {
926
- orientation: "horizontal",
927
- size: "contain",
928
- classNames: [
929
- "absolute inset-block-0 -inset-inline-px",
930
- mainPaddingTransitions2
931
- ],
932
- onScroll: handleScroll,
933
- itemsCount: 2 * (layoutParts.main?.length ?? 0) - 1,
934
- style: padding,
935
- ref: deckRef
936
- }, layoutParts.main?.map((layoutEntry, index) => /* @__PURE__ */ React17.createElement(Fragment2, {
937
- key: layoutEntry.id
938
- }, /* @__PURE__ */ React17.createElement(PlankSeparator, {
939
- index
940
- }), /* @__PURE__ */ React17.createElement(Plank, {
941
- entry: layoutEntry,
942
- layoutParts,
943
- part: "main",
944
- layoutMode,
945
- order: index * 2 + 1
946
- }))))), /* @__PURE__ */ React17.createElement("div", {
947
- role: "none",
948
- className: isSoloModeLoaded ? "relative bg-deck overflow-hidden" : "sr-only",
949
- ...!isSoloModeLoaded && {
950
- inert: ""
951
- }
952
- }, /* @__PURE__ */ React17.createElement(StackContext2.Provider, {
953
- value: {
954
- size: "contain",
955
- orientation: "horizontal",
956
- rail: true
957
- }
958
- }, /* @__PURE__ */ React17.createElement(Plank, {
959
- entry: layoutParts.solo?.[0],
960
- layoutParts,
961
- part: "solo",
962
- layoutMode
963
- })))), breakpoint === "desktop" && /* @__PURE__ */ React17.createElement(Topbar, null), hoistStatusbar && /* @__PURE__ */ React17.createElement(StatusBar, {
964
- showHints
965
- })), /* @__PURE__ */ React17.createElement(Popover2.Portal, null, /* @__PURE__ */ React17.createElement(Popover2.Content, {
966
- onEscapeKeyDown: () => {
967
- context.popoverOpen = false;
968
- context.popoverAnchorId = void 0;
969
- }
970
- }, /* @__PURE__ */ React17.createElement(Popover2.Viewport, null, /* @__PURE__ */ React17.createElement(Surface10, {
971
- role: "popover",
972
- data: popoverContent,
973
- limit: 1
974
- })), /* @__PURE__ */ React17.createElement(Popover2.Arrow, null))), /* @__PURE__ */ React17.createElement(Dialog.Root, {
975
- open: dialogOpen,
976
- onOpenChange: (nextOpen) => context.dialogOpen = nextOpen
977
- }, /* @__PURE__ */ React17.createElement(Dialog.Overlay, {
978
- blockAlign: dialogBlockAlign
979
- }, /* @__PURE__ */ React17.createElement(Surface10, {
980
- role: "dialog",
981
- data: dialogContent,
982
- limit: 1
983
- }))), toasts?.map((toast) => /* @__PURE__ */ React17.createElement(Toast, {
984
- ...toast,
985
- key: toast.id,
986
- onOpenChange: (open) => {
987
- if (!open) {
988
- onDismissToast(toast.id);
989
- }
990
- return open;
991
- }
992
- })));
993
- };
994
-
995
- // packages/plugins/plugin-deck/src/components/LayoutSettings.tsx
996
- import React18 from "react";
997
- import { Input, Select, useTranslation as useTranslation8 } from "@dxos/react-ui";
998
- import { DeprecatedFormInput } from "@dxos/react-ui-form";
999
- var isSocket = !!globalThis.__args;
1000
- var LayoutSettings = ({ settings }) => {
1001
- const { t } = useTranslation8(DECK_PLUGIN);
1002
- return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(DeprecatedFormInput, {
1003
- label: t("select new plank positioning label")
1004
- }, /* @__PURE__ */ React18.createElement(Select.Root, {
1005
- value: settings.newPlankPositioning ?? "start",
1006
- onValueChange: (value) => settings.newPlankPositioning = value
1007
- }, /* @__PURE__ */ React18.createElement(Select.TriggerButton, {
1008
- placeholder: t("select new plank positioning placeholder")
1009
- }), /* @__PURE__ */ React18.createElement(Select.Portal, null, /* @__PURE__ */ React18.createElement(Select.Content, null, /* @__PURE__ */ React18.createElement(Select.Viewport, null, NewPlankPositions.map((position) => /* @__PURE__ */ React18.createElement(Select.Option, {
1010
- key: position,
1011
- value: position
1012
- }, t(`settings new plank position ${position} label`)))))))), /* @__PURE__ */ React18.createElement(DeprecatedFormInput, {
1013
- label: t("settings overscroll label")
1014
- }, /* @__PURE__ */ React18.createElement(Select.Root, {
1015
- value: settings.overscroll ?? "none",
1016
- onValueChange: (value) => settings.overscroll = value
1017
- }, /* @__PURE__ */ React18.createElement(Select.TriggerButton, {
1018
- placeholder: t("select overscroll placeholder")
1019
- }), /* @__PURE__ */ React18.createElement(Select.Portal, null, /* @__PURE__ */ React18.createElement(Select.Content, null, /* @__PURE__ */ React18.createElement(Select.Viewport, null, OverscrollOptions.map((option) => /* @__PURE__ */ React18.createElement(Select.Option, {
1020
- key: option,
1021
- value: option
1022
- }, t(`settings overscroll ${option} label`)))))))), /* @__PURE__ */ React18.createElement(DeprecatedFormInput, {
1023
- label: t("settings show hints label")
1024
- }, /* @__PURE__ */ React18.createElement(Input.Switch, {
1025
- checked: settings.showHints,
1026
- onCheckedChange: (checked) => settings.showHints = checked
1027
- })), !isSocket && /* @__PURE__ */ React18.createElement(DeprecatedFormInput, {
1028
- label: t("settings native redirect label")
1029
- }, /* @__PURE__ */ React18.createElement(Input.Switch, {
1030
- checked: settings.enableNativeRedirect,
1031
- onCheckedChange: (checked) => settings.enableNativeRedirect = checked
1032
- })), /* @__PURE__ */ React18.createElement(DeprecatedFormInput, {
1033
- label: t("settings custom slots")
1034
- }, /* @__PURE__ */ React18.createElement(Input.Switch, {
1035
- checked: settings.customSlots,
1036
- onCheckedChange: (checked) => settings.customSlots = checked
1037
- })), /* @__PURE__ */ React18.createElement(DeprecatedFormInput, {
1038
- label: t("settings flat deck")
1039
- }, /* @__PURE__ */ React18.createElement(Input.Switch, {
1040
- checked: settings.flatDeck,
1041
- onCheckedChange: (checked) => settings.flatDeck = checked
1042
- })));
1043
- };
1044
-
1045
- export {
1046
- NAV_ID,
1047
- LayoutContext,
1048
- DeckContext,
1049
- DeckLayout,
1050
- LayoutSettings
1051
- };
1052
- //# sourceMappingURL=chunk-2M4PXYNB.mjs.map