@dxos/plugin-deck 0.9.1-main.c7dcc2e112 → 0.9.1-staging.ee54ba693a

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 (258) hide show
  1. package/PLUGIN.mdl +3 -1
  2. package/dist/lib/neutral/{DeckLayout-VX2BP4Q2.mjs → DeckLayout-B3RUUV5P.mjs} +4 -3
  3. package/dist/lib/neutral/DeckLayout-B3RUUV5P.mjs.map +7 -0
  4. package/dist/lib/neutral/DeckPlugin.mjs +2 -6
  5. package/dist/lib/neutral/DeckPlugin.mjs.map +3 -3
  6. package/dist/lib/neutral/DeckSettings-Z7GMB7XJ.mjs +32 -0
  7. package/dist/lib/neutral/DeckSettings-Z7GMB7XJ.mjs.map +7 -0
  8. package/dist/lib/neutral/{add-toast-APKTCLIA.mjs → add-toast-BHNEH5UY.mjs} +2 -2
  9. package/dist/lib/neutral/{adjust-7CZI4GK3.mjs → adjust-MJB6UMRQ.mjs} +16 -10
  10. package/dist/lib/neutral/adjust-MJB6UMRQ.mjs.map +7 -0
  11. package/dist/lib/neutral/{app-graph-builder-6HTXRTU2.mjs → app-graph-builder-2F7P4IFQ.mjs} +4 -3
  12. package/dist/lib/neutral/app-graph-builder-2F7P4IFQ.mjs.map +7 -0
  13. package/dist/lib/neutral/capabilities/index.mjs +5 -5
  14. package/dist/lib/neutral/chunk-FKGYHBUB.mjs +8 -0
  15. package/dist/lib/neutral/{chunk-CL7JIOI5.mjs → chunk-ICOJ4GMB.mjs} +10 -6
  16. package/dist/lib/neutral/chunk-ICOJ4GMB.mjs.map +7 -0
  17. package/dist/lib/neutral/{chunk-NGX6RXNV.mjs → chunk-PP32NEVY.mjs} +2 -2
  18. package/dist/lib/neutral/chunk-PP32NEVY.mjs.map +7 -0
  19. package/dist/lib/neutral/chunk-SONATB35.mjs +20 -0
  20. package/dist/lib/neutral/chunk-SONATB35.mjs.map +7 -0
  21. package/dist/lib/neutral/chunk-Z2B5RSVI.mjs +1096 -0
  22. package/dist/lib/neutral/chunk-Z2B5RSVI.mjs.map +7 -0
  23. package/dist/lib/neutral/{close-KJUCFIJ5.mjs → close-2YGB5IIP.mjs} +4 -3
  24. package/dist/lib/neutral/{close-KJUCFIJ5.mjs.map → close-2YGB5IIP.mjs.map} +1 -1
  25. package/dist/lib/neutral/components/index.mjs +201 -16
  26. package/dist/lib/neutral/components/index.mjs.map +4 -4
  27. package/dist/lib/neutral/containers/index.mjs +6 -11
  28. package/dist/lib/neutral/containers/index.mjs.map +3 -3
  29. package/dist/lib/neutral/hooks/index.mjs +101 -17
  30. package/dist/lib/neutral/hooks/index.mjs.map +4 -4
  31. package/dist/lib/neutral/index.mjs +7 -1
  32. package/dist/lib/neutral/meta.json +1 -1
  33. package/dist/lib/neutral/{notification-tracker-CUDFRDCF.mjs → notification-tracker-Y5CRTWJM.mjs} +4 -2
  34. package/dist/lib/neutral/notification-tracker-Y5CRTWJM.mjs.map +7 -0
  35. package/dist/lib/neutral/{open-VU7YS3HB.mjs → open-P6XQ56M7.mjs} +4 -3
  36. package/dist/lib/neutral/{open-VU7YS3HB.mjs.map → open-P6XQ56M7.mjs.map} +1 -1
  37. package/dist/lib/neutral/operations/index.mjs +1 -1
  38. package/dist/lib/neutral/plugin.mjs +1 -1
  39. package/dist/lib/neutral/{react-surface-O4POQWYL.mjs → react-surface-H63FXUK3.mjs} +2 -2
  40. package/dist/lib/neutral/{react-surface-O4POQWYL.mjs.map → react-surface-H63FXUK3.mjs.map} +1 -1
  41. package/dist/lib/neutral/{revert-workspace-24TKG3I7.mjs → revert-workspace-RXWP2TEE.mjs} +2 -2
  42. package/dist/lib/neutral/{scroll-into-view-3VXT6TWC.mjs → scroll-into-view-HFV5EGYZ.mjs} +2 -2
  43. package/dist/lib/neutral/{set-RFOLTI57.mjs → set-HOOVB7E4.mjs} +4 -3
  44. package/dist/lib/neutral/{set-RFOLTI57.mjs.map → set-HOOVB7E4.mjs.map} +1 -1
  45. package/dist/lib/neutral/{set-layout-mode-AZ73W52Z.mjs → set-layout-mode-XAGSZZGB.mjs} +2 -2
  46. package/dist/lib/neutral/{state-D3YXB5NP.mjs → state-F4X5GPGZ.mjs} +3 -2
  47. package/dist/lib/neutral/{state-D3YXB5NP.mjs.map → state-F4X5GPGZ.mjs.map} +1 -1
  48. package/dist/lib/neutral/{switch-workspace-TBPT23CZ.mjs → switch-workspace-PA7N6EUX.mjs} +2 -2
  49. package/dist/lib/neutral/translations.mjs +2 -2
  50. package/dist/lib/neutral/translations.mjs.map +2 -2
  51. package/dist/lib/neutral/types/index.mjs +1 -1
  52. package/dist/lib/neutral/{update-companion-5LCY6QME.mjs → update-companion-6A2SKQAI.mjs} +14 -6
  53. package/dist/lib/neutral/update-companion-6A2SKQAI.mjs.map +7 -0
  54. package/dist/lib/neutral/{update-complementary-HZ7QXZYE.mjs → update-complementary-K55I5EV5.mjs} +2 -2
  55. package/dist/lib/neutral/{update-dialog-A7W3R5EI.mjs → update-dialog-Z3GEXMVV.mjs} +2 -2
  56. package/dist/lib/neutral/{update-plank-size-XHTYBLSD.mjs → update-plank-size-BTESVV7N.mjs} +2 -2
  57. package/dist/lib/neutral/{update-popover-RDIHG73B.mjs → update-popover-QEVDSZSH.mjs} +2 -2
  58. package/dist/lib/neutral/{update-sidebar-GEI7USA5.mjs → update-sidebar-VSRCN47U.mjs} +2 -2
  59. package/dist/lib/neutral/{url-handler-PUS4X33T.mjs → url-handler-ERZXXEYR.mjs} +3 -2
  60. package/dist/lib/neutral/{url-handler-PUS4X33T.mjs.map → url-handler-ERZXXEYR.mjs.map} +1 -1
  61. package/dist/types/src/DeckPlugin.d.ts.map +1 -1
  62. package/dist/types/src/capabilities/app-graph-builder.d.ts +1 -2
  63. package/dist/types/src/capabilities/app-graph-builder.d.ts.map +1 -1
  64. package/dist/types/src/capabilities/notification-tracker.d.ts +1 -1
  65. package/dist/types/src/capabilities/notification-tracker.d.ts.map +1 -1
  66. package/dist/types/src/capabilities/react-root.d.ts +1 -5
  67. package/dist/types/src/capabilities/react-root.d.ts.map +1 -1
  68. package/dist/types/src/capabilities/react-surface.d.ts +1 -1
  69. package/dist/types/src/capabilities/settings.d.ts +1 -3
  70. package/dist/types/src/capabilities/settings.d.ts.map +1 -1
  71. package/dist/types/src/capabilities/state.d.ts +1 -187
  72. package/dist/types/src/capabilities/state.d.ts.map +1 -1
  73. package/dist/types/src/capabilities/tools.d.ts +1 -1
  74. package/dist/types/src/capabilities/url-handler.d.ts +1 -1
  75. package/dist/types/src/components/Companion/Companion.d.ts +17 -0
  76. package/dist/types/src/components/Companion/Companion.d.ts.map +1 -0
  77. package/dist/types/src/components/Companion/index.d.ts +2 -0
  78. package/dist/types/src/components/Companion/index.d.ts.map +1 -0
  79. package/dist/types/src/components/Matrix/Matrix.d.ts +1 -1
  80. package/dist/types/src/components/Matrix/Matrix.d.ts.map +1 -1
  81. package/dist/types/src/components/Matrix/Matrix.stories.d.ts +2 -2
  82. package/dist/types/src/components/Matrix/Matrix.stories.d.ts.map +1 -1
  83. package/dist/types/src/components/Matrix/index.d.ts +1 -1
  84. package/dist/types/src/components/Matrix/index.d.ts.map +1 -1
  85. package/dist/types/src/components/Pane/Pane.d.ts +45 -0
  86. package/dist/types/src/components/Pane/Pane.d.ts.map +1 -0
  87. package/dist/types/src/components/Pane/Pane.stories.d.ts +7 -0
  88. package/dist/types/src/components/Pane/Pane.stories.d.ts.map +1 -0
  89. package/dist/types/src/components/Pane/index.d.ts +2 -0
  90. package/dist/types/src/components/Pane/index.d.ts.map +1 -0
  91. package/dist/types/src/components/Plank/Plank.d.ts +74 -0
  92. package/dist/types/src/components/Plank/Plank.d.ts.map +1 -0
  93. package/dist/types/src/components/Plank/Plank.stories.d.ts +6 -0
  94. package/dist/types/src/components/Plank/Plank.stories.d.ts.map +1 -0
  95. package/dist/types/src/components/Plank/index.d.ts +2 -0
  96. package/dist/types/src/components/Plank/index.d.ts.map +1 -0
  97. package/dist/types/src/components/index.d.ts +3 -2
  98. package/dist/types/src/components/index.d.ts.map +1 -1
  99. package/dist/types/src/containers/Deck/Deck.d.ts +1 -1
  100. package/dist/types/src/containers/Deck/Deck.d.ts.map +1 -1
  101. package/dist/types/src/containers/Deck/Deck.stories.d.ts +2 -2
  102. package/dist/types/src/containers/Deck/DeckPlank.d.ts +21 -0
  103. package/dist/types/src/containers/Deck/DeckPlank.d.ts.map +1 -0
  104. package/dist/types/src/containers/Deck/DeckViewport.d.ts +3 -1
  105. package/dist/types/src/containers/Deck/DeckViewport.d.ts.map +1 -1
  106. package/dist/types/src/containers/{Plank → Deck}/PlankControls.d.ts +3 -10
  107. package/dist/types/src/containers/Deck/PlankControls.d.ts.map +1 -0
  108. package/dist/types/src/containers/Deck/PlankFallback.d.ts +6 -0
  109. package/dist/types/src/containers/Deck/PlankFallback.d.ts.map +1 -0
  110. package/dist/types/src/containers/Deck/useDeckPlank.d.ts +49 -0
  111. package/dist/types/src/containers/Deck/useDeckPlank.d.ts.map +1 -0
  112. package/dist/types/src/containers/DeckLayout/DeckLayout.stories.d.ts +2 -2
  113. package/dist/types/src/containers/DeckLayout/DeckLayout.stories.d.ts.map +1 -1
  114. package/dist/types/src/{components → containers}/DeckSettings/DeckSettings.d.ts +1 -1
  115. package/dist/types/src/containers/DeckSettings/DeckSettings.d.ts.map +1 -0
  116. package/dist/types/src/{components → containers}/DeckSettings/DeckSettings.stories.d.ts +2 -2
  117. package/dist/types/src/{components → containers}/DeckSettings/DeckSettings.stories.d.ts.map +1 -1
  118. package/dist/types/src/containers/DeckSettings/index.d.ts.map +1 -0
  119. package/dist/types/src/containers/index.d.ts +1 -1
  120. package/dist/types/src/containers/index.d.ts.map +1 -1
  121. package/dist/types/src/hooks/index.d.ts +2 -0
  122. package/dist/types/src/hooks/index.d.ts.map +1 -1
  123. package/dist/types/src/hooks/useCompanionSplit.d.ts +28 -0
  124. package/dist/types/src/hooks/useCompanionSplit.d.ts.map +1 -0
  125. package/dist/types/src/hooks/useCompanions.d.ts +11 -7
  126. package/dist/types/src/hooks/useCompanions.d.ts.map +1 -1
  127. package/dist/types/src/hooks/useDeckCompanions.d.ts +2 -2
  128. package/dist/types/src/hooks/useDeckCompanions.d.ts.map +1 -1
  129. package/dist/types/src/hooks/useDeckState.d.ts +1 -1
  130. package/dist/types/src/hooks/useDeckState.d.ts.map +1 -1
  131. package/dist/types/src/hooks/useSelectedCompanionVariant.d.ts +6 -0
  132. package/dist/types/src/hooks/useSelectedCompanionVariant.d.ts.map +1 -0
  133. package/dist/types/src/index.d.ts +1 -0
  134. package/dist/types/src/index.d.ts.map +1 -1
  135. package/dist/types/src/meta.d.ts +4 -0
  136. package/dist/types/src/meta.d.ts.map +1 -1
  137. package/dist/types/src/operations/adjust.d.ts.map +1 -1
  138. package/dist/types/src/operations/update-companion.d.ts.map +1 -1
  139. package/dist/types/src/translations.d.ts +2 -2
  140. package/dist/types/src/translations.d.ts.map +1 -1
  141. package/dist/types/src/types/DeckCapabilities.d.ts +2 -2
  142. package/dist/types/src/types/DeckCapabilities.d.ts.map +1 -1
  143. package/dist/types/src/types/DeckOperation.d.ts +2 -2
  144. package/dist/types/src/types/DeckOperation.d.ts.map +1 -1
  145. package/dist/types/src/types/schema.d.ts +7 -7
  146. package/dist/types/src/types/schema.d.ts.map +1 -1
  147. package/dist/types/src/util/companion-view-state.d.ts +16 -0
  148. package/dist/types/src/util/companion-view-state.d.ts.map +1 -0
  149. package/dist/types/src/util/index.d.ts +1 -0
  150. package/dist/types/src/util/index.d.ts.map +1 -1
  151. package/dist/types/src/util/plank-url-params.d.ts +2 -0
  152. package/dist/types/src/util/plank-url-params.d.ts.map +1 -1
  153. package/dist/types/tsconfig.tsbuildinfo +1 -1
  154. package/package.json +49 -47
  155. package/src/DeckPlugin.ts +1 -2
  156. package/src/capabilities/app-graph-builder.ts +3 -2
  157. package/src/capabilities/notification-tracker.ts +3 -1
  158. package/src/capabilities/react-surface.tsx +1 -1
  159. package/src/components/Companion/Companion.tsx +91 -0
  160. package/src/components/Companion/index.ts +5 -0
  161. package/src/components/Matrix/Matrix.stories.tsx +13 -26
  162. package/src/components/Matrix/Matrix.tsx +3 -3
  163. package/src/components/Matrix/SPEC.md +1 -1
  164. package/src/components/Matrix/index.ts +1 -1
  165. package/src/components/Pane/Pane.stories.tsx +92 -0
  166. package/src/components/Pane/Pane.tsx +178 -0
  167. package/src/components/Pane/index.ts +5 -0
  168. package/src/components/Plank/Plank.stories.tsx +103 -0
  169. package/src/components/Plank/Plank.tsx +149 -0
  170. package/src/components/Plank/index.ts +5 -0
  171. package/src/components/index.ts +3 -4
  172. package/src/containers/Deck/Deck.tsx +3 -3
  173. package/src/containers/Deck/DeckPlank.tsx +187 -0
  174. package/src/containers/Deck/DeckViewport.tsx +116 -243
  175. package/src/containers/{Plank → Deck}/PlankControls.tsx +19 -17
  176. package/src/containers/Deck/PlankFallback.tsx +42 -0
  177. package/src/containers/Deck/useDeckPlank.ts +219 -0
  178. package/src/containers/DeckLayout/DeckLayout.stories.tsx +38 -51
  179. package/src/containers/DeckLayout/Dialog.tsx +1 -1
  180. package/src/{components → containers}/DeckSettings/DeckSettings.stories.tsx +1 -1
  181. package/src/containers/DeckSettings/DeckSettings.tsx +42 -0
  182. package/src/containers/Sidebar/ComplementarySidebar.tsx +2 -2
  183. package/src/containers/index.ts +1 -1
  184. package/src/hooks/index.ts +2 -0
  185. package/src/hooks/useCompanionSplit.ts +78 -0
  186. package/src/hooks/useCompanions.ts +39 -7
  187. package/src/hooks/useDeckCompanions.ts +3 -3
  188. package/src/hooks/useDeckState.ts +1 -1
  189. package/src/hooks/useSelectedCompanionVariant.ts +14 -0
  190. package/src/index.ts +7 -0
  191. package/src/operations/adjust.ts +23 -12
  192. package/src/operations/update-companion.ts +10 -6
  193. package/src/translations.ts +2 -2
  194. package/src/types/DeckCapabilities.ts +1 -1
  195. package/src/types/DeckOperation.ts +2 -1
  196. package/src/types/schema.ts +5 -4
  197. package/src/util/companion-view-state.ts +28 -0
  198. package/src/util/index.ts +1 -0
  199. package/src/util/plank-url-params.test.ts +5 -0
  200. package/src/util/plank-url-params.ts +3 -1
  201. package/src/util/sanitize-persisted-state.test.ts +1 -1
  202. package/src/util/set-active.test.ts +1 -1
  203. package/dist/lib/neutral/DeckLayout-VX2BP4Q2.mjs.map +0 -7
  204. package/dist/lib/neutral/DeckSettings-CQQZJ2YS.mjs +0 -27
  205. package/dist/lib/neutral/DeckSettings-CQQZJ2YS.mjs.map +0 -7
  206. package/dist/lib/neutral/adjust-7CZI4GK3.mjs.map +0 -7
  207. package/dist/lib/neutral/app-graph-builder-6HTXRTU2.mjs.map +0 -7
  208. package/dist/lib/neutral/chunk-CL7JIOI5.mjs.map +0 -7
  209. package/dist/lib/neutral/chunk-DNG3L5QN.mjs +0 -1304
  210. package/dist/lib/neutral/chunk-DNG3L5QN.mjs.map +0 -7
  211. package/dist/lib/neutral/chunk-NGX6RXNV.mjs.map +0 -7
  212. package/dist/lib/neutral/chunk-UZLAR4DR.mjs +0 -8
  213. package/dist/lib/neutral/notification-tracker-CUDFRDCF.mjs.map +0 -7
  214. package/dist/lib/neutral/update-companion-5LCY6QME.mjs.map +0 -7
  215. package/dist/types/src/components/DeckSettings/DeckSettings.d.ts.map +0 -1
  216. package/dist/types/src/components/DeckSettings/index.d.ts.map +0 -1
  217. package/dist/types/src/containers/Plank/Plank.d.ts +0 -17
  218. package/dist/types/src/containers/Plank/Plank.d.ts.map +0 -1
  219. package/dist/types/src/containers/Plank/Plank.stories.d.ts +0 -67
  220. package/dist/types/src/containers/Plank/Plank.stories.d.ts.map +0 -1
  221. package/dist/types/src/containers/Plank/PlankComponent.d.ts +0 -17
  222. package/dist/types/src/containers/Plank/PlankComponent.d.ts.map +0 -1
  223. package/dist/types/src/containers/Plank/PlankContent.d.ts +0 -10
  224. package/dist/types/src/containers/Plank/PlankContent.d.ts.map +0 -1
  225. package/dist/types/src/containers/Plank/PlankControls.d.ts.map +0 -1
  226. package/dist/types/src/containers/Plank/PlankError.d.ts +0 -15
  227. package/dist/types/src/containers/Plank/PlankError.d.ts.map +0 -1
  228. package/dist/types/src/containers/Plank/PlankHeading.d.ts +0 -22
  229. package/dist/types/src/containers/Plank/PlankHeading.d.ts.map +0 -1
  230. package/dist/types/src/containers/Plank/PlankLoading.d.ts +0 -3
  231. package/dist/types/src/containers/Plank/PlankLoading.d.ts.map +0 -1
  232. package/dist/types/src/containers/Plank/PlankRoot.d.ts +0 -37
  233. package/dist/types/src/containers/Plank/PlankRoot.d.ts.map +0 -1
  234. package/dist/types/src/containers/Plank/index.d.ts +0 -4
  235. package/dist/types/src/containers/Plank/index.d.ts.map +0 -1
  236. package/src/components/DeckSettings/DeckSettings.tsx +0 -34
  237. package/src/containers/Plank/Plank.stories.tsx +0 -108
  238. package/src/containers/Plank/Plank.tsx +0 -22
  239. package/src/containers/Plank/PlankComponent.tsx +0 -223
  240. package/src/containers/Plank/PlankContent.tsx +0 -45
  241. package/src/containers/Plank/PlankError.tsx +0 -82
  242. package/src/containers/Plank/PlankHeading.tsx +0 -236
  243. package/src/containers/Plank/PlankLoading.tsx +0 -10
  244. package/src/containers/Plank/PlankRoot.tsx +0 -49
  245. package/src/containers/Plank/index.ts +0 -7
  246. /package/dist/lib/neutral/{add-toast-APKTCLIA.mjs.map → add-toast-BHNEH5UY.mjs.map} +0 -0
  247. /package/dist/lib/neutral/{chunk-UZLAR4DR.mjs.map → chunk-FKGYHBUB.mjs.map} +0 -0
  248. /package/dist/lib/neutral/{revert-workspace-24TKG3I7.mjs.map → revert-workspace-RXWP2TEE.mjs.map} +0 -0
  249. /package/dist/lib/neutral/{scroll-into-view-3VXT6TWC.mjs.map → scroll-into-view-HFV5EGYZ.mjs.map} +0 -0
  250. /package/dist/lib/neutral/{set-layout-mode-AZ73W52Z.mjs.map → set-layout-mode-XAGSZZGB.mjs.map} +0 -0
  251. /package/dist/lib/neutral/{switch-workspace-TBPT23CZ.mjs.map → switch-workspace-PA7N6EUX.mjs.map} +0 -0
  252. /package/dist/lib/neutral/{update-complementary-HZ7QXZYE.mjs.map → update-complementary-K55I5EV5.mjs.map} +0 -0
  253. /package/dist/lib/neutral/{update-dialog-A7W3R5EI.mjs.map → update-dialog-Z3GEXMVV.mjs.map} +0 -0
  254. /package/dist/lib/neutral/{update-plank-size-XHTYBLSD.mjs.map → update-plank-size-BTESVV7N.mjs.map} +0 -0
  255. /package/dist/lib/neutral/{update-popover-RDIHG73B.mjs.map → update-popover-QEVDSZSH.mjs.map} +0 -0
  256. /package/dist/lib/neutral/{update-sidebar-GEI7USA5.mjs.map → update-sidebar-VSRCN47U.mjs.map} +0 -0
  257. /package/dist/types/src/{components → containers}/DeckSettings/index.d.ts +0 -0
  258. /package/src/{components → containers}/DeckSettings/index.ts +0 -0
@@ -1,1304 +0,0 @@
1
- import {
2
- layoutAppliesTopbar
3
- } from "./chunk-NGX6RXNV.mjs";
4
-
5
- // src/containers/Plank/PlankLoading.tsx
6
- import React from "react";
7
- var PlankLoading = () => {
8
- return /* @__PURE__ */ React.createElement("div", {
9
- className: "grid place-items-center dx-attention-surface"
10
- });
11
- };
12
-
13
- // src/containers/Plank/PlankError.tsx
14
- import React5, { useEffect as useEffect2, useMemo as useMemo2, useState } from "react";
15
- import { TimeoutError } from "@dxos/errors";
16
- import { log } from "@dxos/log";
17
- import { ErrorFallback, useTranslation as useTranslation3 } from "@dxos/react-ui";
18
- import { descriptionMessage, mx } from "@dxos/ui-theme";
19
- import { meta as meta3 } from "#meta";
20
-
21
- // src/containers/Plank/PlankHeading.tsx
22
- import React4, { Fragment, memo, useCallback as useCallback2, useEffect, useMemo } from "react";
23
- import { Surface } from "@dxos/app-framework/ui";
24
- import { AppSurface } from "@dxos/app-toolkit/ui";
25
- import { Graph, useActionRunner } from "@dxos/plugin-graph";
26
- import { Icon, IconButton as IconButton2, Popover, TextTooltip, toLocalizedString, useTranslation as useTranslation2 } from "@dxos/react-ui";
27
- import { getLinkedVariant } from "@dxos/react-ui-attention";
28
- import { StackItem } from "@dxos/react-ui-stack";
29
- import { hoverableControls, hoverableFocusedWithinControls, iconSize } from "@dxos/ui-theme";
30
- import { useBreakpoints } from "#hooks";
31
- import { meta as meta2 } from "#meta";
32
- import { PLANK_COMPANION_TYPE } from "#types";
33
-
34
- // src/containers/Plank/PlankControls.tsx
35
- import React2, { forwardRef, useCallback } from "react";
36
- import { useOperationInvoker } from "@dxos/app-framework/ui";
37
- import { LayoutOperation } from "@dxos/app-toolkit";
38
- import { ButtonGroup, IconButton, useTranslation } from "@dxos/react-ui";
39
- import { meta } from "#meta";
40
- var plankControlSpacing = "px-2";
41
- var PlankCompanionControls = /* @__PURE__ */ forwardRef(({ primary }, forwardedRef) => {
42
- const { t } = useTranslation(meta.profile.key);
43
- const { invokePromise } = useOperationInvoker();
44
- const handleCloseCompanion = useCallback(() => {
45
- return invokePromise(LayoutOperation.UpdateCompanion, {
46
- subject: null
47
- });
48
- }, [
49
- invokePromise
50
- ]);
51
- return /* @__PURE__ */ React2.createElement("div", {
52
- ref: forwardedRef,
53
- className: "contents dx-app-no-drag"
54
- }, /* @__PURE__ */ React2.createElement(PlankControl, {
55
- label: t("close-companion.label"),
56
- variant: "ghost",
57
- icon: "ph--x--regular",
58
- onClick: handleCloseCompanion,
59
- classNames: plankControlSpacing
60
- }));
61
- });
62
- var PlankControl = ({ icon, label: label3, ...props }) => {
63
- return /* @__PURE__ */ React2.createElement(IconButton, {
64
- label: label3,
65
- icon,
66
- iconOnly: true,
67
- variant: "ghost",
68
- tooltipSide: "bottom",
69
- ...props
70
- });
71
- };
72
- var PlankControls = /* @__PURE__ */ forwardRef(({ children, classNames, variant = "default", capabilities, layoutMode, pin, close = false, onClick, ...props }, forwardedRef) => {
73
- const { t } = useTranslation(meta.profile.key);
74
- const buttonClassNames = variant === "hide-disabled" ? `disabled:hidden ${plankControlSpacing}` : plankControlSpacing;
75
- const layoutIsAnySolo = !!layoutMode?.startsWith("solo");
76
- return /* @__PURE__ */ React2.createElement(ButtonGroup, {
77
- ...props,
78
- classNames: [
79
- "dx-app-no-drag opacity-100!",
80
- classNames
81
- ],
82
- ref: forwardedRef
83
- }, capabilities.deck ? /* @__PURE__ */ React2.createElement(React2.Fragment, null, capabilities.solo && /* @__PURE__ */ React2.createElement(React2.Fragment, null, layoutMode === "solo" && /* @__PURE__ */ React2.createElement(PlankControl, {
84
- label: t("show-fullscreen-plank.label"),
85
- classNames: buttonClassNames,
86
- icon: "ph--corners-out--regular",
87
- onClick: () => onClick?.("solo--fullscreen")
88
- }), /* @__PURE__ */ React2.createElement(PlankControl, {
89
- label: t(layoutMode === "solo--fullscreen" ? "exit-fullscreen.label" : layoutIsAnySolo ? "show-deck-plank.label" : "show-solo-plank.label"),
90
- classNames: buttonClassNames,
91
- icon: layoutMode === "solo--fullscreen" ? "ph--corners-in--regular" : layoutIsAnySolo ? "ph--arrows-in-line-horizontal--regular" : "ph--arrows-out-line-horizontal--regular",
92
- onClick: () => onClick?.(layoutMode === "solo--fullscreen" ? "solo--fullscreen" : "solo")
93
- })), !layoutIsAnySolo && layoutMode !== "multi" && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(PlankControl, {
94
- label: t("increment-start.label"),
95
- disabled: !capabilities.incrementStart,
96
- classNames: buttonClassNames,
97
- icon: "ph--caret-left--regular",
98
- onClick: () => onClick?.("increment-start")
99
- }), /* @__PURE__ */ React2.createElement(PlankControl, {
100
- label: t("increment-end.label"),
101
- disabled: !capabilities.incrementEnd,
102
- classNames: buttonClassNames,
103
- icon: "ph--caret-right--regular",
104
- onClick: () => onClick?.("increment-end")
105
- }))) : capabilities.fullscreen && /* @__PURE__ */ React2.createElement(PlankControl, {
106
- label: t(layoutMode === "solo--fullscreen" ? "exit-fullscreen.label" : "show-fullscreen-plank.label"),
107
- classNames: buttonClassNames,
108
- icon: layoutMode === "solo--fullscreen" ? "ph--corners-in--regular" : "ph--corners-out--regular",
109
- onClick: () => onClick?.("solo--fullscreen")
110
- }), close && !layoutIsAnySolo && /* @__PURE__ */ React2.createElement(PlankControl, {
111
- label: t(`${typeof close === "string" ? "minify" : "close"}.label`),
112
- classNames: buttonClassNames,
113
- "data-testid": "plankHeading.close",
114
- icon: close === "minify-start" ? "ph--caret-line-left--regular" : close === "minify-end" ? "ph--caret-line-right--regular" : "ph--x--regular",
115
- onClick: () => onClick?.("close")
116
- }), capabilities.companion && /* @__PURE__ */ React2.createElement(PlankControl, {
117
- label: t("open-companion.label"),
118
- classNames: buttonClassNames,
119
- "data-testid": "plankHeading.companion",
120
- icon: "ph--square-split-horizontal--regular",
121
- onClick: () => onClick?.("companion")
122
- }), children);
123
- });
124
-
125
- // src/containers/Plank/PlankRoot.tsx
126
- import { createContext } from "@radix-ui/react-context";
127
- import React3 from "react";
128
- var PLANK_NAME = "Plank";
129
- var [PlankProvider, usePlankContext] = createContext(PLANK_NAME);
130
- var PlankRoot = ({ children, ...context }) => {
131
- return /* @__PURE__ */ React3.createElement(PlankProvider, context, children);
132
- };
133
-
134
- // src/containers/Plank/PlankHeading.tsx
135
- var MAX_COMPANIONS = 5;
136
- var PlankHeading = /* @__PURE__ */ memo(({ id, part, node, deckEnabled, canIncrementStart, canIncrementEnd, popoverAnchorId, primaryId, pending, companioned, companions, layoutMode, actions = [], debug = false }) => {
137
- const { t } = useTranslation2(meta2.profile.key);
138
- const { graph, onAdjust, onUpdateCompanion } = usePlankContext("PlankHeading");
139
- const runAction = useActionRunner();
140
- const breakpoint = useBreakpoints();
141
- const icon = node?.properties?.icon ?? "ph--circle-dashed--regular";
142
- const label3 = pending ? t("pending.heading") : toLocalizedString(node?.properties?.label ?? [
143
- "plank-heading-fallback.label",
144
- {
145
- ns: meta2.profile.key
146
- }
147
- ], t);
148
- const isCompanionNode = node?.type === PLANK_COMPANION_TYPE;
149
- useEffect(() => {
150
- const frame = requestAnimationFrame(() => {
151
- if (node) {
152
- void Graph.expand(graph, node.id, "child");
153
- }
154
- });
155
- return () => cancelAnimationFrame(frame);
156
- }, [
157
- node
158
- ]);
159
- const attendableId = primaryId ?? id;
160
- const capabilities = useMemo(() => ({
161
- deck: deckEnabled ?? true,
162
- solo: breakpoint !== "mobile" && (part === "solo" || part === "multi"),
163
- incrementStart: canIncrementStart,
164
- incrementEnd: canIncrementEnd,
165
- fullscreen: !isCompanionNode,
166
- companion: layoutMode !== "multi" && !isCompanionNode && companions && companions.length > 0
167
- }), [
168
- breakpoint,
169
- part,
170
- companions,
171
- canIncrementStart,
172
- canIncrementEnd,
173
- isCompanionNode,
174
- deckEnabled,
175
- layoutMode
176
- ]);
177
- const variant = isCompanionNode ? getLinkedVariant(id) : void 0;
178
- const sigilActions = useMemo(() => {
179
- if (!node) {
180
- return void 0;
181
- } else if (variant) {
182
- return [];
183
- } else {
184
- return [
185
- actions,
186
- Graph.getActions(graph, node.id).filter((action) => [
187
- "list-item",
188
- "list-item-primary",
189
- "heading-list-item"
190
- ].includes(action.properties.disposition))
191
- ].filter((a) => a.length > 0);
192
- }
193
- }, [
194
- actions,
195
- node,
196
- variant,
197
- graph
198
- ]);
199
- const handleAction = useCallback2((action) => {
200
- if (typeof action.data === "function") {
201
- void runAction(action, {
202
- parent: node,
203
- caller: meta2.profile.key
204
- });
205
- }
206
- }, [
207
- node,
208
- runAction
209
- ]);
210
- const handlePlankAction = useCallback2((eventType) => {
211
- onAdjust?.(id, eventType);
212
- }, [
213
- onAdjust,
214
- id
215
- ]);
216
- const ActionRoot = node && popoverAnchorId === `${meta2.profile.key}:${node.id}` ? Popover.Anchor : Fragment;
217
- const handleTabClick = useCallback2((event) => {
218
- const target = event.target.closest("[data-id]");
219
- const tabId = target?.dataset?.id;
220
- if (tabId) {
221
- onUpdateCompanion?.(tabId);
222
- }
223
- }, [
224
- onUpdateCompanion
225
- ]);
226
- return /* @__PURE__ */ React4.createElement(StackItem.Heading, {
227
- "data-tauri-drag-region": true,
228
- "data-plank-heading": true,
229
- style: iconSize(5),
230
- classNames: [
231
- "py-1 items-stretch gap-1 sticky left-12 dx-app-drag min-w-0 dx-contain-layout dx-density-lg",
232
- part === "solo" ? "ps-[calc(env(safe-area-inset-left)+.25rem)] pe-[calc(env(safe-area-inset-right)+.25rem)]" : "px-1",
233
- ...layoutMode === "solo--fullscreen" ? [
234
- hoverableControls,
235
- hoverableFocusedWithinControls,
236
- "*:transition-opacity *:opacity-(--controls-opacity) bg-transparent",
237
- "border-transparent transition-[background-color,border-color]",
238
- "hover-hover:hover:bg-header-surface focus-within:bg-header-surface",
239
- "hover-hover:hover:border-subdued-separator focus-within:border-subdued-separator"
240
- ] : []
241
- ]
242
- }, companions && isCompanionNode ? (
243
- /* TODO(thure): IMPORTANT: This is a tablist; it should be implemented as such. */
244
- /* @__PURE__ */ React4.createElement("div", {
245
- "data-tauri-drag-region": true,
246
- className: "flex-1 min-w-0 overflow-x-auto scrollbar-none flex gap-1"
247
- }, companions.map(({ id: id2, properties: { icon: icon2, label: label4 } }) => /* @__PURE__ */ React4.createElement(IconButton2, {
248
- key: id2,
249
- "data-id": id2,
250
- icon: icon2,
251
- iconOnly: companions.length > MAX_COMPANIONS && node?.id !== id2,
252
- label: toLocalizedString(label4, t),
253
- variant: node?.id === id2 ? "primary" : "ghost",
254
- onClick: handleTabClick
255
- })))
256
- ) : /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(ActionRoot, null, node && sigilActions ? /* @__PURE__ */ React4.createElement(StackItem.Sigil, {
257
- icon,
258
- related: part === "complementary",
259
- attendableId,
260
- triggerLabel: t("actions-menu.label"),
261
- actions: sigilActions,
262
- onAction: handleAction
263
- }, /* @__PURE__ */ React4.createElement(Surface.Surface, {
264
- type: AppSurface.MenuFooter,
265
- data: {
266
- subject: node.data
267
- }
268
- })) : /* @__PURE__ */ React4.createElement(StackItem.SigilButton, null, /* @__PURE__ */ React4.createElement("span", {
269
- className: "sr-only"
270
- }, label3), /* @__PURE__ */ React4.createElement(Icon, {
271
- icon
272
- }))), /* @__PURE__ */ React4.createElement(TextTooltip, {
273
- text: label3,
274
- onlyWhenTruncating: true
275
- }, /* @__PURE__ */ React4.createElement(StackItem.HeadingLabel, {
276
- "data-tauri-drag-region": true,
277
- attendableId,
278
- related: part === "complementary",
279
- ...pending && {
280
- classNames: "text-description"
281
- }
282
- }, label3))), debug && /* @__PURE__ */ React4.createElement("div", {
283
- className: "flex items-center text-sm text-info-text"
284
- }, layoutMode, ":", part, ":", companioned), node && part !== "complementary" && /* @__PURE__ */ React4.createElement(Surface.Surface, {
285
- type: AppSurface.NavbarEnd,
286
- data: {
287
- subject: node.data
288
- }
289
- }), companioned === "companion" ? /* @__PURE__ */ React4.createElement(PlankCompanionControls, {
290
- primary: primaryId
291
- }) : /* @__PURE__ */ React4.createElement(PlankControls, {
292
- capabilities,
293
- layoutMode,
294
- close: part === "complementary" ? "minify-end" : true,
295
- onClick: handlePlankAction
296
- }));
297
- });
298
-
299
- // src/containers/Plank/PlankError.tsx
300
- var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-deck/src/containers/Plank/PlankError.tsx";
301
- var PlankError = ({ id, part, node, error: errorProp }) => {
302
- const [timedOut, setTimedOut] = useState(false);
303
- useEffect2(() => {
304
- const timer = setTimeout(() => setTimedOut(true), 5e3);
305
- return () => clearTimeout(timer);
306
- }, []);
307
- const error = useMemo2(() => {
308
- if (timedOut) {
309
- return new TimeoutError({
310
- message: "Timeout loading content"
311
- });
312
- }
313
- return errorProp;
314
- }, [
315
- timedOut,
316
- errorProp
317
- ]);
318
- return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(PlankHeading, {
319
- id,
320
- part,
321
- node,
322
- pending: !timedOut
323
- }), timedOut ? /* @__PURE__ */ React5.createElement(PlankErrorFallback, {
324
- error
325
- }) : /* @__PURE__ */ React5.createElement(PlankLoading, null));
326
- };
327
- var PlankErrorFallback = ({ error }) => {
328
- const { t } = useTranslation3(meta3.profile.key);
329
- useEffect2(() => {
330
- if (error) {
331
- log.error("plank error", {
332
- error
333
- }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 44, S: void 0 });
334
- }
335
- }, [
336
- error
337
- ]);
338
- if (process.env.NODE_ENV === "development") {
339
- return /* @__PURE__ */ React5.createElement(ErrorFallback, {
340
- title: "Plank Error",
341
- error
342
- });
343
- } else {
344
- const errorString = error?.toString() ?? "";
345
- return /* @__PURE__ */ React5.createElement("div", {
346
- role: "alert",
347
- "data-testid": "plank-content-error",
348
- className: "dx-attention-surface overflow-y-auto p-8 grid place-items-center"
349
- }, /* @__PURE__ */ React5.createElement("div", {
350
- className: "flex flex-col items-center gap-2"
351
- }, /* @__PURE__ */ React5.createElement("p", {
352
- className: mx(descriptionMessage, "break-all rounded-md p-4")
353
- }, error ? errorString : t("error-fallback.message"))));
354
- }
355
- };
356
-
357
- // src/containers/Plank/PlankComponent.tsx
358
- import { useFocusFinders } from "@fluentui/react-tabster";
359
- import React6, { memo as memo2, useCallback as useCallback3, useLayoutEffect, useMemo as useMemo3, useRef } from "react";
360
- import { Surface as Surface2 } from "@dxos/app-framework/ui";
361
- import { AppSurface as AppSurface2 } from "@dxos/app-toolkit/ui";
362
- import { debounce } from "@dxos/async";
363
- import { mainIntrinsicSize } from "@dxos/react-ui";
364
- import { getLinkedVariant as getLinkedVariant2 } from "@dxos/react-ui-attention";
365
- import { useAttentionAttributes } from "@dxos/react-ui-attention";
366
- import { StackItem as StackItem2, railGridHorizontal } from "@dxos/react-ui-stack";
367
- import { mx as mx2 } from "@dxos/ui-theme";
368
- import { useMainSize } from "#hooks";
369
- import { PLANK_COMPANION_TYPE as PLANK_COMPANION_TYPE2 } from "#types";
370
- var smoothScrollTo = (element, target, duration) => {
371
- const start = element.scrollLeft;
372
- const distance = target - start;
373
- const startTime = performance.now();
374
- const step = (currentTime) => {
375
- const elapsed = currentTime - startTime;
376
- const progress = Math.min(elapsed / duration, 1);
377
- const eased = 1 - Math.pow(1 - progress, 3);
378
- element.scrollLeft = start + distance * eased;
379
- if (progress < 1) {
380
- requestAnimationFrame(step);
381
- }
382
- };
383
- requestAnimationFrame(step);
384
- };
385
- var DEFAULT_SIZE = 48;
386
- var DEFAULT_COMPANION_SIZE = 35;
387
- var PlankComponent = /* @__PURE__ */ memo2(({ part, id, path, order, active, node, primary, companions, companioned }) => {
388
- const { layoutMode, settings, popoverAnchorId, scrollIntoView, plankSizing, onResize, onScrollIntoView } = usePlankContext("PlankComponent");
389
- const canResize = layoutMode === "multi";
390
- const { findFirstFocusable } = useFocusFinders();
391
- const isCompanion = companioned === "companion";
392
- const attentionId = isCompanion ? primary?.id ?? id : id;
393
- const attentionAttrs = useAttentionAttributes(attentionId);
394
- const orderId = isCompanion ? primary?.id : id;
395
- const index = orderId && active ? active.findIndex((entryId) => entryId === orderId) : -1;
396
- const length = active?.length ?? 1;
397
- const isOrdered = !!active && index >= 0;
398
- const canIncrementStart = isOrdered && index > 0;
399
- const canIncrementEnd = isOrdered && index < length - 1;
400
- const rootElement = useRef(null);
401
- const variant = node?.type === PLANK_COMPANION_TYPE2 ? getLinkedVariant2(id) : void 0;
402
- const sizeAttrs = useMainSize();
403
- const sizeKey = id.split("+")[0];
404
- const size = isCompanion ? DEFAULT_COMPANION_SIZE : plankSizing?.[sizeKey] ?? DEFAULT_SIZE;
405
- const handleSizeChange = useCallback3(debounce((nextSize) => {
406
- const size2 = Math.round(nextSize);
407
- onResize?.(sizeKey, size2);
408
- }, 200), [
409
- sizeKey,
410
- onResize
411
- ]);
412
- const handleKeyDown = useCallback3((event) => {
413
- if (event.target === event.currentTarget) {
414
- switch (event.key) {
415
- case "Escape":
416
- rootElement.current?.closest("main")?.focus();
417
- break;
418
- case "Enter":
419
- rootElement.current && findFirstFocusable(rootElement.current)?.focus();
420
- break;
421
- }
422
- }
423
- }, []);
424
- useLayoutEffect(() => {
425
- if (scrollIntoView === id && layoutMode === "multi" && rootElement.current) {
426
- const element = rootElement.current;
427
- const scrollParent = element.closest('[style*="overflow"], .overflow-x-auto');
428
- if (scrollParent) {
429
- const elementRect = element.getBoundingClientRect();
430
- const parentRect = scrollParent.getBoundingClientRect();
431
- const targetScrollLeft = scrollParent.scrollLeft + (elementRect.left - parentRect.left);
432
- smoothScrollTo(scrollParent, targetScrollLeft, 300);
433
- }
434
- onScrollIntoView?.(void 0);
435
- }
436
- }, [
437
- id,
438
- scrollIntoView,
439
- layoutMode,
440
- onScrollIntoView
441
- ]);
442
- const isSolo = layoutMode.startsWith("solo") && part === "solo";
443
- const isAttendable = layoutMode.startsWith("solo") && part.startsWith("solo") || layoutMode === "multi" && part === "multi";
444
- const attendableId = isCompanion ? primary?.id ?? id : id;
445
- const data = useMemo3(() => node && {
446
- attendableId,
447
- subject: node.data,
448
- companionTo: primary?.data,
449
- properties: node.properties,
450
- variant,
451
- path,
452
- popoverAnchorId
453
- }, [
454
- node,
455
- node?.data,
456
- node?.properties,
457
- path,
458
- popoverAnchorId,
459
- primary?.data,
460
- variant,
461
- attendableId
462
- ]);
463
- const placeholder = useMemo3(() => /* @__PURE__ */ React6.createElement(PlankLoading, null), []);
464
- const Root = part.startsWith("solo") ? "article" : StackItem2.Root;
465
- const fullscreen = layoutMode === "solo--fullscreen";
466
- const classNames = [
467
- "dx-attention-surface relative dx-focus-ring-inset-over-all dx-density-lg",
468
- isSolo && "absolute inset-0",
469
- isSolo && mainIntrinsicSize,
470
- railGridHorizontal,
471
- part.startsWith("solo") && "grid",
472
- part.startsWith("solo-") && "grid-rows-subgrid row-span-2 min-w-0",
473
- fullscreen && "grid-rows-1",
474
- part === "multi" && (isCompanion ? "border-separator! border-e" : "border-separator! border-x"),
475
- part === "solo-companion" && "border-separator! border-s",
476
- settings?.encapsulatedPlanks && !part.startsWith("solo") && "mx-(--main-spacing) border-separator! border rounded-sm overflow-hidden"
477
- ];
478
- return /* @__PURE__ */ React6.createElement(Root, {
479
- ref: rootElement,
480
- "data-testid": "deck.plank",
481
- "data-popover-collision-boundary": true,
482
- tabIndex: 0,
483
- ...part.startsWith("solo") ? {
484
- className: mx2(classNames),
485
- ...sizeAttrs
486
- } : {
487
- role: "article",
488
- item: {
489
- id
490
- },
491
- classNames,
492
- order,
493
- size,
494
- onSizeChange: handleSizeChange
495
- },
496
- ...isAttendable ? attentionAttrs : {},
497
- onKeyDown: handleKeyDown
498
- }, node ? /* @__PURE__ */ React6.createElement(React6.Fragment, null, !fullscreen && /* @__PURE__ */ React6.createElement(PlankHeading, {
499
- id,
500
- part: part.startsWith("solo-") ? "solo" : part,
501
- node,
502
- layoutMode,
503
- deckEnabled: settings?.enableDeck,
504
- canIncrementStart,
505
- canIncrementEnd,
506
- popoverAnchorId,
507
- primaryId: primary?.id,
508
- companioned,
509
- companions
510
- }), /* @__PURE__ */ React6.createElement(Surface2.Surface, {
511
- key: node.id,
512
- type: AppSurface2.Article,
513
- data,
514
- limit: 1,
515
- fallback: PlankErrorFallback,
516
- placeholder
517
- })) : /* @__PURE__ */ React6.createElement(PlankError, {
518
- id,
519
- part
520
- }), canResize && /* @__PURE__ */ React6.createElement(StackItem2.ResizeHandle, null));
521
- });
522
-
523
- // src/containers/Plank/PlankContent.tsx
524
- import React7 from "react";
525
- import { composable, composableProps, mainIntrinsicSize as mainIntrinsicSize2 } from "@dxos/react-ui";
526
- import { railGridHorizontal as railGridHorizontal2 } from "@dxos/react-ui-stack";
527
- import { useMainSize as useMainSize2 } from "#hooks";
528
- var PlankContent = composable(({ children, solo, companion, encapsulate, ...props }, forwardedRef) => {
529
- const sizeAttrs = useMainSize2();
530
- if (!solo) {
531
- return children;
532
- }
533
- return /* @__PURE__ */ React7.createElement("div", {
534
- ...sizeAttrs,
535
- ...composableProps(props, {
536
- role: "none",
537
- classNames: [
538
- "absolute inset-(--main-spacing) grid",
539
- railGridHorizontal2,
540
- mainIntrinsicSize2,
541
- companion && "grid-cols-[6fr_4fr]",
542
- encapsulate && "border border-separator rounded-sm overflow-hidden"
543
- ]
544
- }),
545
- "data-popover-collision-boundary": true,
546
- ref: forwardedRef
547
- }, children);
548
- });
549
-
550
- // src/containers/Plank/Plank.tsx
551
- var Plank = {
552
- Root: PlankRoot,
553
- Content: PlankContent,
554
- Component: PlankComponent,
555
- Heading: PlankHeading,
556
- Controls: PlankControls
557
- };
558
-
559
- // src/containers/Sidebar/SidebarButton.tsx
560
- import React8, { useCallback as useCallback4 } from "react";
561
- import { useOperationInvoker as useOperationInvoker2 } from "@dxos/app-framework/ui";
562
- import { LayoutOperation as LayoutOperation2 } from "@dxos/app-toolkit";
563
- import { IconButton as IconButton3, useTranslation as useTranslation4 } from "@dxos/react-ui";
564
- import { getLinkedVariant as getLinkedVariant3 } from "@dxos/react-ui-attention";
565
- import { useDeckCompanions, useDeckState } from "#hooks";
566
- import { meta as meta4 } from "#meta";
567
- var ToggleSidebarButton = ({ classNames, variant = "ghost" }) => {
568
- const { updateState } = useDeckState();
569
- const { t } = useTranslation4(meta4.profile.key);
570
- const handleClick = useCallback4(() => {
571
- updateState((state) => ({
572
- ...state,
573
- sidebarState: state.sidebarState === "expanded" ? "collapsed" : "expanded"
574
- }));
575
- }, [
576
- updateState
577
- ]);
578
- return /* @__PURE__ */ React8.createElement(IconButton3, {
579
- variant,
580
- icon: "ph--sidebar--regular",
581
- iconOnly: true,
582
- size: 4,
583
- label: t("open-navigation-sidebar.label"),
584
- onClick: handleClick,
585
- classNames
586
- });
587
- };
588
- var CloseSidebarButton = () => {
589
- const { updateState } = useDeckState();
590
- const { t } = useTranslation4(meta4.profile.key);
591
- const handleClick = useCallback4(() => {
592
- updateState((state) => ({
593
- ...state,
594
- sidebarState: "collapsed"
595
- }));
596
- }, [
597
- updateState
598
- ]);
599
- return /* @__PURE__ */ React8.createElement(IconButton3, {
600
- variant: "ghost",
601
- icon: "ph--caret-line-left--regular",
602
- iconOnly: true,
603
- size: 4,
604
- label: t("close-navigation-sidebar.button"),
605
- onClick: handleClick,
606
- classNames: "rounded-none px-1 dx-focus-ring-inset pe-[max(.5rem,env(safe-area-inset-left))]"
607
- });
608
- };
609
- var ToggleComplementarySidebarButton = ({ inR0, classNames, current }) => {
610
- const { invokePromise } = useOperationInvoker2();
611
- const { state, updateState } = useDeckState();
612
- const { t } = useTranslation4(meta4.profile.key);
613
- const companions = useDeckCompanions();
614
- const handleClick = useCallback4(() => {
615
- const nextState = state.complementarySidebarState === "expanded" ? "collapsed" : "expanded";
616
- updateState((state2) => ({
617
- ...state2,
618
- complementarySidebarState: nextState
619
- }));
620
- const subject = state.complementarySidebarPanel ?? (companions[0] && getLinkedVariant3(companions[0].id));
621
- if (nextState === "expanded" && !current && subject) {
622
- void invokePromise(LayoutOperation2.UpdateComplementary, {
623
- subject
624
- });
625
- }
626
- }, [
627
- state,
628
- updateState,
629
- current,
630
- companions,
631
- invokePromise
632
- ]);
633
- const label3 = t(state.complementarySidebarState === "expanded" ? "close-complementary-sidebar.label" : "open-complementary-sidebar.label");
634
- return /* @__PURE__ */ React8.createElement(IconButton3, {
635
- variant: "ghost",
636
- classNames: [
637
- "[&>svg]:-scale-x-100",
638
- classNames
639
- ],
640
- icon: "ph--sidebar-simple--regular",
641
- iconOnly: true,
642
- label: label3,
643
- tooltipSide: inR0 ? "left" : void 0,
644
- onClick: handleClick
645
- });
646
- };
647
-
648
- // src/containers/Sidebar/ComplementarySidebar.tsx
649
- import React9, { useCallback as useCallback5, useEffect as useEffect3, useMemo as useMemo4, useState as useState2 } from "react";
650
- import { Surface as Surface3, useOperationInvoker as useOperationInvoker3 } from "@dxos/app-framework/ui";
651
- import { LayoutOperation as LayoutOperation3 } from "@dxos/app-toolkit";
652
- import { AppSurface as AppSurface3 } from "@dxos/app-toolkit/ui";
653
- import { IconButton as IconButton4, Main, Panel, toLocalizedString as toLocalizedString2, Toolbar, useTranslation as useTranslation5 } from "@dxos/react-ui";
654
- import { getLinkedVariant as getLinkedVariant4 } from "@dxos/react-ui-attention";
655
- import { Tabs } from "@dxos/react-ui-tabs";
656
- import { iconSize as iconSize2, mx as mx3 } from "@dxos/ui-theme";
657
- import { useBreakpoints as useBreakpoints2, useDeckCompanions as useDeckCompanions2, useDeckState as useDeckState2 } from "#hooks";
658
- import { meta as meta5 } from "#meta";
659
- import { getMode } from "#types";
660
- var label = [
661
- "complementary-sidebar.title",
662
- {
663
- ns: meta5.profile.key
664
- }
665
- ];
666
- var ComplementarySidebar = ({ current }) => {
667
- const { invokePromise } = useOperationInvoker3();
668
- const { t } = useTranslation5(meta5.profile.key);
669
- const { state, deck, updateState } = useDeckState2();
670
- const layoutMode = getMode(deck);
671
- const breakpoint = useBreakpoints2();
672
- const topbar = layoutAppliesTopbar(breakpoint, layoutMode);
673
- const companions = useDeckCompanions2();
674
- const activeCompanion = companions.find((companion) => getLinkedVariant4(companion.id) === current);
675
- const activeId = activeCompanion && getLinkedVariant4(activeCompanion.id);
676
- const [internalValue, setInternalValue] = useState2(activeId);
677
- useEffect3(() => {
678
- setInternalValue(activeId);
679
- }, [
680
- activeId
681
- ]);
682
- const handleTabClick = useCallback5((event) => {
683
- const nextValue = event.currentTarget.getAttribute("data-value");
684
- if (nextValue === activeId) {
685
- updateState((state2) => ({
686
- ...state2,
687
- complementarySidebarState: state2.complementarySidebarState === "expanded" ? "collapsed" : "expanded"
688
- }));
689
- } else {
690
- setInternalValue(nextValue);
691
- updateState((state2) => ({
692
- ...state2,
693
- complementarySidebarState: "expanded"
694
- }));
695
- void invokePromise(LayoutOperation3.UpdateComplementary, {
696
- subject: nextValue
697
- });
698
- }
699
- }, [
700
- state.complementarySidebarState,
701
- activeId,
702
- invokePromise,
703
- updateState
704
- ]);
705
- const data = useMemo4(() => activeCompanion && {
706
- id: activeCompanion.id,
707
- subject: activeCompanion.data
708
- }, [
709
- activeCompanion?.id,
710
- activeCompanion?.data
711
- ]);
712
- useEffect3(() => {
713
- if (!activeId) {
714
- void invokePromise(LayoutOperation3.UpdateComplementary, {
715
- state: "collapsed"
716
- });
717
- }
718
- }, [
719
- activeId,
720
- invokePromise
721
- ]);
722
- return /* @__PURE__ */ React9.createElement(Main.ComplementarySidebar, {
723
- label,
724
- classNames: [
725
- topbar && "top-[calc(env(safe-area-inset-top)+var(--dx-rail-size))]"
726
- ]
727
- }, /* @__PURE__ */ React9.createElement(Tabs.Root, {
728
- classNames: "contents",
729
- orientation: "vertical",
730
- value: internalValue
731
- }, /* @__PURE__ */ React9.createElement("div", {
732
- "data-tauri-drag-region": true,
733
- style: iconSize2(5),
734
- className: mx3("absolute z-1 inset-y-0 end-0 w-(--dx-r0-size)!", "py-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)] border-s border-subdued-separator", "grid grid-cols-1 grid-rows-[1fr_min-content] bg-r0-surface dx-contain-layout dx-app-drag")
735
- }, /* @__PURE__ */ React9.createElement(Tabs.Tablist, {
736
- classNames: "grid grid-cols-1 auto-rows-(--dx-rail-action) overflow-y-auto scrollbar-none gap-1 p-1"
737
- }, companions.map((companion) => /* @__PURE__ */ React9.createElement(Tabs.Tab, {
738
- key: getLinkedVariant4(companion.id),
739
- value: getLinkedVariant4(companion.id),
740
- asChild: true
741
- }, /* @__PURE__ */ React9.createElement(IconButton4, {
742
- classNames: "w-(--dx-rail-action) h-(--dx-rail-action) min-h-0 px-0",
743
- label: toLocalizedString2(companion.properties.label, t),
744
- icon: companion.properties.icon,
745
- iconOnly: true,
746
- tooltipSide: "left",
747
- "data-value": getLinkedVariant4(companion.id),
748
- ...companion.properties.joyride && {
749
- "data-joyride": companion.properties.joyride
750
- },
751
- variant: activeId === getLinkedVariant4(companion.id) ? state.complementarySidebarState === "expanded" ? "primary" : "ghost" : "ghost",
752
- onClick: handleTabClick
753
- })))), /* @__PURE__ */ React9.createElement("div", {
754
- className: "grid grid-cols-1 auto-rows-(--dx-rail-item) py-0.5 gap-0.5 overflow-y-auto scrollbar-none",
755
- style: iconSize2(4)
756
- }, /* @__PURE__ */ React9.createElement(Surface3.Surface, {
757
- type: AppSurface3.StatusIndicator
758
- })), /* @__PURE__ */ React9.createElement("div", {
759
- className: "hidden lg:grid grid-cols-1 auto-rows-(--dx-rail-action) p-1"
760
- }, /* @__PURE__ */ React9.createElement(ToggleComplementarySidebarButton, null))), activeId && companions.map((companion) => /* @__PURE__ */ React9.createElement(Tabs.Panel, {
761
- key: getLinkedVariant4(companion.id),
762
- value: getLinkedVariant4(companion.id),
763
- classNames: [
764
- 'absolute data-[state="inactive"]:-z-[1] overflow-hidden',
765
- "inset-y-0 start-0 w-full lg:w-(--dx-r1-size)"
766
- ],
767
- ...state.complementarySidebarState !== "expanded" && {
768
- inert: true
769
- }
770
- }, /* @__PURE__ */ React9.createElement(ComplementarySidebarPanel, {
771
- companion,
772
- activeId,
773
- data
774
- })))));
775
- };
776
- var ComplementarySidebarPanel = ({ companion, activeId, data }) => {
777
- const { t } = useTranslation5(meta5.profile.key);
778
- if (getLinkedVariant4(companion.id) !== activeId && !data) {
779
- return null;
780
- }
781
- return /* @__PURE__ */ React9.createElement(Panel.Root, null, /* @__PURE__ */ React9.createElement(Panel.Toolbar, {
782
- asChild: true,
783
- size: "lg"
784
- }, /* @__PURE__ */ React9.createElement(Toolbar.Root, {
785
- style: iconSize2(5),
786
- classNames: "bg-header-surface"
787
- }, /* @__PURE__ */ React9.createElement(IconButton4, {
788
- classNames: "w-(--dx-rail-action) h-(--dx-rail-action) min-h-0 px-0",
789
- label: toLocalizedString2(companion.properties.label, t),
790
- icon: companion.properties.icon,
791
- iconOnly: true,
792
- tooltipSide: "left",
793
- "data-value": getLinkedVariant4(companion.id),
794
- variant: "default"
795
- }), /* @__PURE__ */ React9.createElement("div", {
796
- className: "px-1"
797
- }, toLocalizedString2(companion.properties.label, t)))), /* @__PURE__ */ React9.createElement(Panel.Content, {
798
- classNames: "bg-r1-surface"
799
- }, /* @__PURE__ */ React9.createElement(Surface3.Surface, {
800
- type: AppSurface3.deckCompanion(getLinkedVariant4(companion.id)),
801
- data,
802
- fallback: PlankErrorFallback,
803
- placeholder: /* @__PURE__ */ React9.createElement(PlankLoading, null)
804
- })));
805
- };
806
-
807
- // src/containers/Sidebar/Sidebar.tsx
808
- import React10, { useMemo as useMemo5 } from "react";
809
- import { Surface as Surface4 } from "@dxos/app-framework/ui";
810
- import { AppSurface as AppSurface4 } from "@dxos/app-toolkit/ui";
811
- import { Main as Main2 } from "@dxos/react-ui";
812
- import { useBreakpoints as useBreakpoints3, useDeckState as useDeckState3 } from "#hooks";
813
- import { meta as meta6 } from "#meta";
814
- import { getMode as getMode2 } from "#types";
815
- var label2 = [
816
- "sidebar.title",
817
- {
818
- ns: meta6.profile.key
819
- }
820
- ];
821
- var Sidebar = () => {
822
- const { state, deck } = useDeckState3();
823
- const { popoverAnchorId, activeDeck: current } = state;
824
- const breakpoint = useBreakpoints3();
825
- const layoutMode = getMode2(deck);
826
- const topbar = layoutAppliesTopbar(breakpoint, layoutMode);
827
- const navigationData = useMemo5(() => ({
828
- popoverAnchorId,
829
- topbar,
830
- current
831
- }), [
832
- popoverAnchorId,
833
- topbar,
834
- current
835
- ]);
836
- return /* @__PURE__ */ React10.createElement(Main2.NavigationSidebar, {
837
- label: label2,
838
- classNames: [
839
- "grid",
840
- topbar && "top-[calc(env(safe-area-inset-top)+var(--dx-rail-size))]"
841
- ]
842
- }, /* @__PURE__ */ React10.createElement(Surface4.Surface, {
843
- type: AppSurface4.Navigation,
844
- data: navigationData,
845
- limit: 1
846
- }));
847
- };
848
-
849
- // src/containers/Deck/DeckContent.tsx
850
- import React13, { useCallback as useCallback6, useEffect as useEffect4, useRef as useRef2 } from "react";
851
- import { AttentionCapabilities } from "@dxos/plugin-attention";
852
- import { Main as Main3, useMediaQuery } from "@dxos/react-ui";
853
- import { useBreakpoints as useBreakpoints4 } from "#hooks";
854
-
855
- // src/containers/Deck/Banner.tsx
856
- import React11 from "react";
857
- import { Surface as Surface5 } from "@dxos/app-framework/ui";
858
- import { AppSurface as AppSurface5 } from "@dxos/app-toolkit/ui";
859
- import { useTranslation as useTranslation6 } from "@dxos/react-ui";
860
- import { mx as mx4, osTranslations } from "@dxos/ui-theme";
861
- import { meta as meta7 } from "#meta";
862
- import { VersionInfo } from "#types";
863
- var Banner = ({ variant, classNames }) => {
864
- const { t } = useTranslation6(meta7.profile.key);
865
- return /* @__PURE__ */ React11.createElement("header", {
866
- className: mx4("flex items-stretch relative py-1 ps-1 pe-2", variant === "topbar" && "fixed inset-x-0 top-[env(safe-area-inset-top)] h-(--dx-rail-size) border-b border-separator", classNames)
867
- }, variant === "sidebar" ? /* @__PURE__ */ React11.createElement(CloseSidebarButton, null) : /* @__PURE__ */ React11.createElement(ToggleSidebarButton, null), /* @__PURE__ */ React11.createElement("span", {
868
- className: "self-center grow ms-1"
869
- }, t("current-app.name", {
870
- ns: osTranslations
871
- })), variant === "topbar" && /* @__PURE__ */ React11.createElement("div", {
872
- className: "absolute inset-0 pointer-events-none"
873
- }, /* @__PURE__ */ React11.createElement("div", {
874
- className: "grid h-full pointer-fine:p-1 max-w-md mx-auto pointer-events-auto"
875
- }, /* @__PURE__ */ React11.createElement(Surface5.Surface, {
876
- type: AppSurface5.SearchInput,
877
- limit: 1
878
- }))), /* @__PURE__ */ React11.createElement("span", {
879
- className: "grow"
880
- }), /* @__PURE__ */ React11.createElement(Surface5.Surface, {
881
- type: VersionInfo,
882
- limit: 1
883
- }));
884
- };
885
-
886
- // src/containers/Deck/DeckRoot.tsx
887
- import { createContext as createContext2 } from "@radix-ui/react-context";
888
- import React12 from "react";
889
- var DECK_NAME = "Deck";
890
- var DECK_ROOT_NAME = "DeckRoot";
891
- var [DeckProvider, useDeckContext] = createContext2(DECK_NAME);
892
- var DeckRoot = ({ children, ...context }) => {
893
- return /* @__PURE__ */ React12.createElement(DeckProvider, context, children);
894
- };
895
- DeckRoot.displayName = DECK_ROOT_NAME;
896
-
897
- // src/containers/Deck/DeckContent.tsx
898
- var DECK_CONTENT_NAME = "DeckContent";
899
- var DeckContent = ({ children }) => {
900
- const { state: { sidebarState, complementarySidebarState, complementarySidebarPanel }, deck: { active, fullscreen, solo }, updateState, layoutMode, settings, pluginManager, onLayoutChange } = useDeckContext(DECK_CONTENT_NAME);
901
- const breakpoint = useBreakpoints4();
902
- const topbar = layoutAppliesTopbar(breakpoint, layoutMode);
903
- useEffect4(() => {
904
- const attention = pluginManager.capabilities.get(AttentionCapabilities.Attention);
905
- const attended = attention.getCurrent();
906
- const firstId = solo ?? active[0];
907
- if (attended.length === 0 && firstId) {
908
- document.querySelector(`article[data-attendable-id="${firstId}"] button`)?.focus();
909
- }
910
- }, []);
911
- const [isNotMobile] = useMediaQuery("md");
912
- const shouldRevert = useRef2(false);
913
- useEffect4(() => {
914
- if (!isNotMobile && layoutMode === "multi") {
915
- const attention = pluginManager.capabilities.get(AttentionCapabilities.Attention);
916
- const attended = attention.getCurrent();
917
- shouldRevert.current = true;
918
- onLayoutChange({
919
- subject: attended[0],
920
- mode: "solo"
921
- });
922
- } else if (isNotMobile && layoutMode === "solo" && shouldRevert.current) {
923
- onLayoutChange({
924
- revert: true
925
- });
926
- }
927
- }, [
928
- isNotMobile,
929
- layoutMode,
930
- onLayoutChange
931
- ]);
932
- useEffect4(() => {
933
- if (!settings?.enableDeck && layoutMode === "multi") {
934
- onLayoutChange({
935
- subject: active[0],
936
- mode: "solo"
937
- });
938
- }
939
- }, [
940
- settings?.enableDeck,
941
- onLayoutChange,
942
- active,
943
- layoutMode
944
- ]);
945
- const handleNavigationSidebarStateChange = useCallback6((next) => {
946
- updateState((s) => ({
947
- ...s,
948
- sidebarState: next
949
- }));
950
- }, [
951
- updateState
952
- ]);
953
- const handleComplementarySidebarStateChange = useCallback6((next) => {
954
- updateState((s) => ({
955
- ...s,
956
- complementarySidebarState: next
957
- }));
958
- }, [
959
- updateState
960
- ]);
961
- return /* @__PURE__ */ React13.createElement(Main3.Root, {
962
- navigationSidebarState: fullscreen ? "closed" : sidebarState,
963
- complementarySidebarState: fullscreen ? "closed" : complementarySidebarState,
964
- onNavigationSidebarStateChange: handleNavigationSidebarStateChange,
965
- onComplementarySidebarStateChange: handleComplementarySidebarStateChange
966
- }, /* @__PURE__ */ React13.createElement(Sidebar, null), /* @__PURE__ */ React13.createElement(ComplementarySidebar, {
967
- current: complementarySidebarPanel
968
- }), /* @__PURE__ */ React13.createElement(Main3.Overlay, null), children, topbar && /* @__PURE__ */ React13.createElement(Banner, {
969
- variant: "topbar"
970
- }));
971
- };
972
- DeckContent.displayName = DECK_CONTENT_NAME;
973
-
974
- // src/containers/Deck/DeckViewport.tsx
975
- import React14, { Fragment as Fragment2, memo as memo3, useCallback as useCallback7, useEffect as useEffect5, useMemo as useMemo6, useRef as useRef3 } from "react";
976
- import { Surface as Surface6, useOperationInvoker as useOperationInvoker4 } from "@dxos/app-framework/ui";
977
- import { LayoutOperation as LayoutOperation4 } from "@dxos/app-toolkit";
978
- import { useAppGraph } from "@dxos/app-toolkit/ui";
979
- import { addEventListener } from "@dxos/async";
980
- import { invariant } from "@dxos/invariant";
981
- import { useNode } from "@dxos/plugin-graph";
982
- import { IconButton as IconButton5, Main as Main4, useOnTransition, useTranslation as useTranslation7 } from "@dxos/react-ui";
983
- import { mainPaddingTransitions } from "@dxos/react-ui";
984
- import { DEFAULT_HORIZONTAL_SIZE, Stack, StackContext } from "@dxos/react-ui-stack";
985
- import { hoverableControls as hoverableControls2, hoverableFocusedWithinControls as hoverableFocusedWithinControls2, mx as mx5 } from "@dxos/ui-theme";
986
- import { useBreakpoints as useBreakpoints5, useCompanions, useDeckState as useDeckState4, useSelectedCompanion } from "#hooks";
987
- import { meta as meta8 } from "#meta";
988
- import { DeckOperation, getMode as getMode3, Keyshortcuts } from "#types";
989
- var __dxlog_file2 = "/__w/dxos/dxos/packages/plugins/plugin-deck/src/containers/Deck/DeckViewport.tsx";
990
- var DECK_VIEWPORT_NAME = "DeckViewport";
991
- var DeckViewport = ({ children }) => {
992
- const { deck: { active, plankSizing }, state: { sidebarState, complementarySidebarState }, settings, layoutMode } = useDeckContext(DECK_VIEWPORT_NAME);
993
- const breakpoint = useBreakpoints5();
994
- const topbar = layoutAppliesTopbar(breakpoint, layoutMode);
995
- return /* @__PURE__ */ React14.createElement(Main4.Content, {
996
- bounce: true,
997
- handlesFocus: true,
998
- classNames: [
999
- "grid top-[env(safe-area-inset-top)]!",
1000
- topbar && "top-[calc(env(safe-area-inset-top)+var(--dx-rail-size))]!"
1001
- ],
1002
- style: {
1003
- "--main-spacing": settings?.encapsulatedPlanks ? "0.75rem" : "0",
1004
- "--main-sidebar-width": sidebarState === "expanded" ? "var(--dx-nav-sidebar-size)" : sidebarState === "collapsed" ? "var(--dx-l0-size)" : "0",
1005
- "--main-complementary-width": complementarySidebarState === "expanded" ? "var(--dx-complementary-sidebar-size)" : complementarySidebarState === "collapsed" ? "var(--dx-rail-size)" : "0",
1006
- "--main-content-first-width": `${plankSizing[active[0] ?? "never"] ?? DEFAULT_HORIZONTAL_SIZE}rem`,
1007
- "--main-content-last-width": `${plankSizing[active[(active.length ?? 1) - 1] ?? "never"] ?? DEFAULT_HORIZONTAL_SIZE}rem`
1008
- }
1009
- }, children);
1010
- };
1011
- DeckViewport.displayName = DECK_VIEWPORT_NAME;
1012
- var DeckContentEmpty = () => {
1013
- const breakpoint = useBreakpoints5();
1014
- const { deck } = useDeckState4();
1015
- const layoutMode = getMode3(deck);
1016
- const topbar = layoutAppliesTopbar(breakpoint, layoutMode);
1017
- return /* @__PURE__ */ React14.createElement("div", {
1018
- className: "grid place-items-center p-8 relative bg-deck-surface",
1019
- "data-testid": "layoutPlugin.firstRunMessage"
1020
- }, /* @__PURE__ */ React14.createElement(Surface6.Surface, {
1021
- type: Keyshortcuts
1022
- }), !topbar && /* @__PURE__ */ React14.createElement(ToggleSidebarButton2, null));
1023
- };
1024
- var DeckSoloMode = () => {
1025
- const { deck, settings, layoutMode, onLayoutChange } = useDeckContext("DeckSoloMode");
1026
- const { companionOpen, companionVariant, fullscreen, solo } = deck;
1027
- const effectiveCompanionVariant = fullscreen ? void 0 : companionOpen ? companionVariant : void 0;
1028
- const breakpoint = useBreakpoints5();
1029
- const topbar = layoutAppliesTopbar(breakpoint, layoutMode);
1030
- invariant(solo, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 72, S: void 0, A: ["solo", ""] });
1031
- useEffect5(() => {
1032
- if (!fullscreen) {
1033
- return;
1034
- }
1035
- const handleKeyDown = (event) => {
1036
- if (event.key === "Escape") {
1037
- event.preventDefault();
1038
- event.stopPropagation();
1039
- onLayoutChange({
1040
- mode: "solo--fullscreen"
1041
- });
1042
- }
1043
- };
1044
- document.addEventListener("keydown", handleKeyDown);
1045
- return () => document.removeEventListener("keydown", handleKeyDown);
1046
- }, [
1047
- fullscreen,
1048
- onLayoutChange
1049
- ]);
1050
- return /* @__PURE__ */ React14.createElement("div", {
1051
- className: "relative overflow-hidden bg-deck-surface"
1052
- }, /* @__PURE__ */ React14.createElement(DeckSidebarToggles, {
1053
- topbar,
1054
- fullscreen
1055
- }), fullscreen && /* @__PURE__ */ React14.createElement(ExitFullscreenButton, {
1056
- onExit: () => onLayoutChange({
1057
- mode: "solo--fullscreen"
1058
- })
1059
- }), /* @__PURE__ */ React14.createElement(StackContext.Provider, {
1060
- value: {
1061
- orientation: "horizontal",
1062
- size: "contain",
1063
- rail: true
1064
- }
1065
- }, /* @__PURE__ */ React14.createElement(PlankContainer, {
1066
- id: solo,
1067
- part: "solo",
1068
- layoutMode,
1069
- companionVariant: effectiveCompanionVariant,
1070
- settings
1071
- })));
1072
- };
1073
- var DeckMultiMode = () => {
1074
- const { deck: { active, companionVariant, fullscreen }, settings, layoutMode } = useDeckContext("DeckMultiMode");
1075
- const effectiveCompanionVariant = companionVariant;
1076
- const lastPlankId = active[active.length - 1];
1077
- const lastPlankCompanions = useCompanions(lastPlankId);
1078
- const breakpoint = useBreakpoints5();
1079
- const topbar = layoutAppliesTopbar(breakpoint, layoutMode);
1080
- const deckRef = useRef3(null);
1081
- const scrollLeftRef = useRef3(null);
1082
- useEffect5(() => addEventListener(window, "resize", () => {
1083
- scrollLeftRef.current = null;
1084
- }), []);
1085
- const restoreScroll = useCallback7(() => {
1086
- if (deckRef.current && scrollLeftRef.current != null) {
1087
- deckRef.current.scrollLeft = scrollLeftRef.current;
1088
- }
1089
- }, []);
1090
- useOnTransition(layoutMode, (mode) => mode !== "multi", "multi", restoreScroll);
1091
- const handleScroll = useCallback7((event) => {
1092
- if (event.currentTarget === event.target) {
1093
- scrollLeftRef.current = event.target.scrollLeft;
1094
- }
1095
- }, []);
1096
- const { order, itemsCount } = useMemo6(() => {
1097
- const lastHasCompanions = lastPlankCompanions.length > 0;
1098
- return active.reduce((acc, entryId, index) => {
1099
- const isLastPlank = index === active.length - 1;
1100
- acc.order[entryId] = acc.itemsCount + 1;
1101
- acc.itemsCount += lastHasCompanions && isLastPlank ? 3 : 2;
1102
- return acc;
1103
- }, {
1104
- order: {},
1105
- itemsCount: 0
1106
- });
1107
- }, [
1108
- active,
1109
- lastPlankCompanions.length
1110
- ]);
1111
- return /* @__PURE__ */ React14.createElement("div", {
1112
- className: "relative bg-deck-surface overflow-hidden"
1113
- }, /* @__PURE__ */ React14.createElement(DeckSidebarToggles, {
1114
- topbar,
1115
- fullscreen
1116
- }), /* @__PURE__ */ React14.createElement(Stack, {
1117
- classNames: [
1118
- "absolute h-[calc(100%-2*var(--main-spacing))] w-full inset-y-(--main-spacing) -inset-w-px",
1119
- mainPaddingTransitions
1120
- ],
1121
- orientation: "horizontal",
1122
- size: "contain",
1123
- itemsCount: itemsCount - 1,
1124
- onScroll: handleScroll,
1125
- ref: deckRef
1126
- }, active.map((entryId) => /* @__PURE__ */ React14.createElement(Fragment2, {
1127
- key: entryId
1128
- }, /* @__PURE__ */ React14.createElement(PlankSeparator, {
1129
- hidden: true,
1130
- order: order[entryId] - 1,
1131
- encapsulate: !!settings?.encapsulatedPlanks
1132
- }), /* @__PURE__ */ React14.createElement(PlankContainer, {
1133
- id: entryId,
1134
- part: "multi",
1135
- active,
1136
- order: order[entryId],
1137
- layoutMode,
1138
- companionVariant: effectiveCompanionVariant,
1139
- settings
1140
- })))));
1141
- };
1142
- var sidebarToggleStyles = "h-(--dx-rail-item) w-(--dx-rail-item) absolute bottom-2 z-[1] bg-deck-surface! lg:hidden";
1143
- var ToggleSidebarButton2 = () => /* @__PURE__ */ React14.createElement(ToggleSidebarButton, {
1144
- classNames: mx5(sidebarToggleStyles, "left-2")
1145
- });
1146
- var ToggleComplementarySidebarButton2 = () => /* @__PURE__ */ React14.createElement(ToggleComplementarySidebarButton, {
1147
- classNames: mx5(sidebarToggleStyles, "right-2")
1148
- });
1149
- var ExitFullscreenButton = ({ onExit }) => {
1150
- const { t } = useTranslation7(meta8.profile.key);
1151
- return /* @__PURE__ */ React14.createElement("div", {
1152
- className: mx5("fixed top-2 right-2 z-[1]", hoverableControls2, hoverableFocusedWithinControls2, "transition-opacity opacity-(--controls-opacity)")
1153
- }, /* @__PURE__ */ React14.createElement(IconButton5, {
1154
- label: t("exit-fullscreen.label"),
1155
- icon: "ph--corners-in--regular",
1156
- iconOnly: true,
1157
- variant: "ghost",
1158
- tooltipSide: "bottom",
1159
- onClick: onExit
1160
- }));
1161
- };
1162
- var DeckSidebarToggles = ({ topbar, fullscreen }) => {
1163
- if (topbar || fullscreen) {
1164
- return null;
1165
- }
1166
- return /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(ToggleSidebarButton2, null), /* @__PURE__ */ React14.createElement(ToggleComplementarySidebarButton2, null));
1167
- };
1168
- var PlankSeparator = ({ order, hidden, encapsulate }) => order > 0 && /* @__PURE__ */ React14.createElement("span", {
1169
- role: "separator",
1170
- className: mx5("row-span-2 bg-deck-surface", hidden && "hidden", encapsulate ? "w-0" : "w-4"),
1171
- style: {
1172
- gridColumn: order
1173
- }
1174
- });
1175
- var PlankContainer = /* @__PURE__ */ memo3(({ id, layoutMode, part, order, settings, companionVariant, active, ...props }) => {
1176
- const { graph } = useAppGraph();
1177
- const { invokePromise } = useOperationInvoker4();
1178
- const { state, deck } = useDeckState4();
1179
- const node = useNode(graph, id);
1180
- const companions = useCompanions(id);
1181
- const isLastPlankInMulti = layoutMode === "multi" && active && active.length > 0 && active[active.length - 1] === id;
1182
- const variantForThisPlank = layoutMode === "multi" ? isLastPlankInMulti ? companionVariant : void 0 : companionVariant;
1183
- const { companionId } = useSelectedCompanion(companions, variantForThisPlank);
1184
- const resolvedCompanionId = layoutMode === "multi" && isLastPlankInMulti && companions.length > 0 ? companionId : variantForThisPlank ? companionId : void 0;
1185
- const currentCompanion = companions.find(({ id: id2 }) => id2 === resolvedCompanionId);
1186
- const hasCompanion = !!(resolvedCompanionId && currentCompanion);
1187
- const handleAdjust = useCallback7((plankId, type) => {
1188
- if (type === "close") {
1189
- if (part === "complementary") {
1190
- return invokePromise(LayoutOperation4.UpdateComplementary, {
1191
- state: "collapsed"
1192
- });
1193
- } else if (active) {
1194
- const index = active.indexOf(plankId);
1195
- const toClose = index !== -1 ? active.slice(index) : [
1196
- plankId
1197
- ];
1198
- return invokePromise(LayoutOperation4.Close, {
1199
- subject: toClose
1200
- });
1201
- } else {
1202
- return invokePromise(LayoutOperation4.Close, {
1203
- subject: [
1204
- plankId
1205
- ]
1206
- });
1207
- }
1208
- } else {
1209
- return invokePromise(DeckOperation.Adjust, {
1210
- type,
1211
- id: plankId
1212
- });
1213
- }
1214
- }, [
1215
- invokePromise,
1216
- part,
1217
- active
1218
- ]);
1219
- const handleResize = useCallback7((plankId, size) => invokePromise(DeckOperation.UpdatePlankSize, {
1220
- id: plankId,
1221
- size
1222
- }), [
1223
- invokePromise
1224
- ]);
1225
- const handleScrollIntoView = useCallback7((subject) => invokePromise(LayoutOperation4.ScrollIntoView, {
1226
- subject
1227
- }), [
1228
- invokePromise
1229
- ]);
1230
- const handleUpdateCompanion = useCallback7((companion) => invokePromise(LayoutOperation4.UpdateCompanion, {
1231
- subject: companion
1232
- }), [
1233
- invokePromise
1234
- ]);
1235
- return /* @__PURE__ */ React14.createElement(Plank.Root, {
1236
- graph,
1237
- layoutMode,
1238
- part,
1239
- settings,
1240
- popoverAnchorId: state.popoverAnchorId,
1241
- scrollIntoView: state.scrollIntoView,
1242
- plankSizing: deck.plankSizing,
1243
- onAdjust: handleAdjust,
1244
- onResize: handleResize,
1245
- onScrollIntoView: handleScrollIntoView,
1246
- onUpdateCompanion: handleUpdateCompanion
1247
- }, /* @__PURE__ */ React14.createElement(Plank.Content, {
1248
- solo: part === "solo",
1249
- companion: hasCompanion,
1250
- encapsulate: !!settings?.encapsulatedPlanks
1251
- }, /* @__PURE__ */ React14.createElement(Plank.Component, {
1252
- ...props,
1253
- active,
1254
- id,
1255
- node,
1256
- companioned: hasCompanion ? "primary" : void 0,
1257
- companions: hasCompanion ? [] : companions,
1258
- order,
1259
- ...part === "solo" ? {
1260
- part: "solo-primary"
1261
- } : {
1262
- part
1263
- }
1264
- }), hasCompanion && /* @__PURE__ */ React14.createElement(Plank.Component, {
1265
- ...props,
1266
- active,
1267
- id: resolvedCompanionId,
1268
- node: currentCompanion,
1269
- companions,
1270
- companioned: "companion",
1271
- primary: node,
1272
- ...part === "solo" ? {
1273
- order,
1274
- part: "solo-companion"
1275
- } : {
1276
- order: (order ?? 0) + 1,
1277
- part
1278
- }
1279
- })));
1280
- });
1281
-
1282
- // src/containers/Deck/Deck.tsx
1283
- var Deck = {
1284
- Root: DeckRoot,
1285
- Content: DeckContent,
1286
- Viewport: DeckViewport,
1287
- ContentEmpty: DeckContentEmpty,
1288
- MultiMode: DeckMultiMode,
1289
- SoloMode: DeckSoloMode
1290
- };
1291
-
1292
- export {
1293
- PlankLoading,
1294
- PlankError,
1295
- PlankErrorFallback,
1296
- Plank,
1297
- ToggleSidebarButton,
1298
- CloseSidebarButton,
1299
- ToggleComplementarySidebarButton,
1300
- ComplementarySidebar,
1301
- Sidebar,
1302
- Deck
1303
- };
1304
- //# sourceMappingURL=chunk-DNG3L5QN.mjs.map