@dxos/plugin-simple-layout 0.8.4-main.1068cf700f → 0.8.4-main.1c7ec43d41

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 (242) hide show
  1. package/dist/lib/browser/SimpleLayoutPlugin-Q5BZE6KD.mjs +50 -0
  2. package/dist/lib/browser/SimpleLayoutPlugin-Q5BZE6KD.mjs.map +7 -0
  3. package/dist/lib/browser/index.mjs +21 -97
  4. package/dist/lib/browser/index.mjs.map +4 -4
  5. package/dist/lib/browser/meta.json +1 -1
  6. package/dist/lib/browser/translations.mjs +34 -0
  7. package/dist/lib/browser/translations.mjs.map +7 -0
  8. package/dist/lib/node-esm/SimpleLayoutPlugin-OD45TNPO.mjs +52 -0
  9. package/dist/lib/node-esm/SimpleLayoutPlugin-OD45TNPO.mjs.map +7 -0
  10. package/dist/lib/node-esm/index.mjs +21 -96
  11. package/dist/lib/node-esm/index.mjs.map +4 -4
  12. package/dist/lib/node-esm/meta.json +1 -1
  13. package/dist/lib/node-esm/translations.mjs +36 -0
  14. package/dist/lib/node-esm/translations.mjs.map +7 -0
  15. package/dist/types/src/SimpleLayoutPlugin.d.ts +2 -1
  16. package/dist/types/src/SimpleLayoutPlugin.d.ts.map +1 -1
  17. package/dist/types/src/capabilities/app-graph-builder.d.ts +6 -0
  18. package/dist/types/src/capabilities/app-graph-builder.d.ts.map +1 -0
  19. package/dist/types/src/capabilities/index.d.ts +21 -6
  20. package/dist/types/src/capabilities/index.d.ts.map +1 -1
  21. package/dist/types/src/capabilities/operation-handler.d.ts +6 -0
  22. package/dist/types/src/capabilities/operation-handler.d.ts.map +1 -0
  23. package/dist/types/src/capabilities/{react-root/react-root.d.ts → react-root.d.ts} +1 -1
  24. package/dist/types/src/capabilities/react-root.d.ts.map +1 -0
  25. package/dist/types/src/capabilities/react-surface.d.ts +5 -0
  26. package/dist/types/src/capabilities/react-surface.d.ts.map +1 -0
  27. package/dist/types/src/capabilities/{spotlight-dismiss/spotlight-dismiss.d.ts → spotlight-dismiss.d.ts} +1 -1
  28. package/dist/types/src/capabilities/spotlight-dismiss.d.ts.map +1 -0
  29. package/dist/types/src/capabilities/{state/state.d.ts → state.d.ts} +2 -2
  30. package/dist/types/src/capabilities/state.d.ts.map +1 -0
  31. package/dist/types/src/capabilities/url-handler.d.ts +12 -0
  32. package/dist/types/src/capabilities/url-handler.d.ts.map +1 -0
  33. package/dist/types/src/components/ContentError.stories.d.ts +27 -22
  34. package/dist/types/src/components/ContentError.stories.d.ts.map +1 -1
  35. package/dist/types/src/components/DebugOverlay/DebugOverlay.d.ts +19 -0
  36. package/dist/types/src/components/DebugOverlay/DebugOverlay.d.ts.map +1 -0
  37. package/dist/types/src/components/DebugOverlay/index.d.ts +2 -0
  38. package/dist/types/src/components/DebugOverlay/index.d.ts.map +1 -0
  39. package/dist/types/src/components/Dialog/Dialog.d.ts.map +1 -1
  40. package/dist/types/src/components/Home/Home.d.ts.map +1 -1
  41. package/dist/types/src/components/Loading/Loading.d.ts +3 -0
  42. package/dist/types/src/components/Loading/Loading.d.ts.map +1 -0
  43. package/dist/types/src/components/{ContentLoading.stories.d.ts → Loading/Loading.stories.d.ts} +1 -1
  44. package/dist/types/src/components/Loading/Loading.stories.d.ts.map +1 -0
  45. package/dist/types/src/components/Loading/index.d.ts +2 -0
  46. package/dist/types/src/components/Loading/index.d.ts.map +1 -0
  47. package/dist/types/src/components/MobileLayout/MobileLayout.d.ts +2 -2
  48. package/dist/types/src/components/MobileLayout/MobileLayout.d.ts.map +1 -1
  49. package/dist/types/src/components/MobileLayout/MobileLayout.stories.d.ts.map +1 -1
  50. package/dist/types/src/components/NavBranch/NavBranch.d.ts +11 -0
  51. package/dist/types/src/components/NavBranch/NavBranch.d.ts.map +1 -0
  52. package/dist/types/src/components/NavBranch/index.d.ts +2 -0
  53. package/dist/types/src/components/NavBranch/index.d.ts.map +1 -0
  54. package/dist/types/src/components/Popover/Popover.d.ts.map +1 -1
  55. package/dist/types/src/components/SimpleLayout/AppBar.d.ts +5 -7
  56. package/dist/types/src/components/SimpleLayout/AppBar.d.ts.map +1 -1
  57. package/dist/types/src/components/SimpleLayout/AppBar.stories.d.ts +29 -22
  58. package/dist/types/src/components/SimpleLayout/AppBar.stories.d.ts.map +1 -1
  59. package/dist/types/src/components/SimpleLayout/Drawer.d.ts +4 -7
  60. package/dist/types/src/components/SimpleLayout/Drawer.d.ts.map +1 -1
  61. package/dist/types/src/components/SimpleLayout/Main.d.ts +4 -7
  62. package/dist/types/src/components/SimpleLayout/Main.d.ts.map +1 -1
  63. package/dist/types/src/components/SimpleLayout/NavBar.d.ts +5 -7
  64. package/dist/types/src/components/SimpleLayout/NavBar.d.ts.map +1 -1
  65. package/dist/types/src/components/SimpleLayout/NavBar.stories.d.ts +29 -23
  66. package/dist/types/src/components/SimpleLayout/NavBar.stories.d.ts.map +1 -1
  67. package/dist/types/src/components/SimpleLayout/SimpleLayout.d.ts.map +1 -1
  68. package/dist/types/src/components/SimpleLayout/SimpleLayout.stories.d.ts +26 -25
  69. package/dist/types/src/components/SimpleLayout/SimpleLayout.stories.d.ts.map +1 -1
  70. package/dist/types/src/components/hooks.d.ts +4 -2
  71. package/dist/types/src/components/hooks.d.ts.map +1 -1
  72. package/dist/types/src/components/index.d.ts +3 -2
  73. package/dist/types/src/components/index.d.ts.map +1 -1
  74. package/dist/types/src/hooks/actions.d.ts +5 -6
  75. package/dist/types/src/hooks/actions.d.ts.map +1 -1
  76. package/dist/types/src/hooks/useAppBarProps.d.ts +2 -2
  77. package/dist/types/src/hooks/useAppBarProps.d.ts.map +1 -1
  78. package/dist/types/src/hooks/useCompanions.d.ts.map +1 -1
  79. package/dist/types/src/hooks/useDrawerActions.d.ts.map +1 -1
  80. package/dist/types/src/hooks/useNavbarActions.d.ts.map +1 -1
  81. package/dist/types/src/hooks/useSimpleLayoutState.d.ts +1 -1
  82. package/dist/types/src/hooks/useSimpleLayoutState.d.ts.map +1 -1
  83. package/dist/types/src/index.d.ts +3 -1
  84. package/dist/types/src/index.d.ts.map +1 -1
  85. package/dist/types/src/meta.d.ts.map +1 -1
  86. package/dist/types/src/operations/close.d.ts +5 -0
  87. package/dist/types/src/operations/close.d.ts.map +1 -0
  88. package/dist/types/src/operations/index.d.ts +3 -0
  89. package/dist/types/src/operations/index.d.ts.map +1 -0
  90. package/dist/types/src/operations/open.d.ts +5 -0
  91. package/dist/types/src/operations/open.d.ts.map +1 -0
  92. package/dist/types/src/operations/revert-workspace.d.ts +5 -0
  93. package/dist/types/src/operations/revert-workspace.d.ts.map +1 -0
  94. package/dist/types/src/operations/set-layout-mode.d.ts +5 -0
  95. package/dist/types/src/operations/set-layout-mode.d.ts.map +1 -0
  96. package/dist/types/src/operations/set.d.ts +5 -0
  97. package/dist/types/src/operations/set.d.ts.map +1 -0
  98. package/dist/types/src/operations/state-access.d.ts +8 -0
  99. package/dist/types/src/operations/state-access.d.ts.map +1 -0
  100. package/dist/types/src/operations/switch-workspace.d.ts +5 -0
  101. package/dist/types/src/operations/switch-workspace.d.ts.map +1 -0
  102. package/dist/types/src/operations/update-complementary.d.ts +5 -0
  103. package/dist/types/src/operations/update-complementary.d.ts.map +1 -0
  104. package/dist/types/src/operations/update-dialog.d.ts +5 -0
  105. package/dist/types/src/operations/update-dialog.d.ts.map +1 -0
  106. package/dist/types/src/operations/update-popover.d.ts +5 -0
  107. package/dist/types/src/operations/update-popover.d.ts.map +1 -0
  108. package/dist/types/src/operations/update-sidebar.d.ts +5 -0
  109. package/dist/types/src/operations/update-sidebar.d.ts.map +1 -0
  110. package/dist/types/src/translations.d.ts +26 -20
  111. package/dist/types/src/translations.d.ts.map +1 -1
  112. package/dist/types/src/types/capabilities.d.ts +10 -2
  113. package/dist/types/src/types/capabilities.d.ts.map +1 -1
  114. package/dist/types/src/types/events.d.ts.map +1 -1
  115. package/dist/types/tsconfig.tsbuildinfo +1 -1
  116. package/package.json +49 -30
  117. package/src/SimpleLayoutPlugin.ts +18 -7
  118. package/src/capabilities/app-graph-builder.ts +21 -0
  119. package/src/capabilities/index.ts +13 -6
  120. package/src/capabilities/operation-handler.ts +14 -0
  121. package/src/capabilities/{react-root/react-root.tsx → react-root.tsx} +2 -2
  122. package/src/capabilities/{react-surface/react-surface.tsx → react-surface.tsx} +17 -8
  123. package/src/capabilities/{state/state.tsx → state.tsx} +2 -2
  124. package/src/capabilities/url-handler.ts +161 -0
  125. package/src/components/ContentError.stories.tsx +8 -7
  126. package/src/components/DebugOverlay/DebugOverlay.tsx +96 -0
  127. package/src/components/DebugOverlay/index.ts +5 -0
  128. package/src/components/Dialog/Dialog.tsx +15 -4
  129. package/src/components/Home/Home.tsx +38 -32
  130. package/src/components/{ContentLoading.stories.tsx → Loading/Loading.stories.tsx} +4 -4
  131. package/src/components/{ContentLoading.tsx → Loading/Loading.tsx} +2 -2
  132. package/src/components/Loading/index.ts +5 -0
  133. package/src/components/MobileLayout/MobileLayout.stories.tsx +38 -30
  134. package/src/components/MobileLayout/MobileLayout.tsx +118 -49
  135. package/src/components/{Workspace/Workspace.tsx → NavBranch/NavBranch.tsx} +44 -39
  136. package/src/components/{Workspace → NavBranch}/index.ts +1 -1
  137. package/src/components/Popover/Popover.tsx +12 -8
  138. package/src/components/SimpleLayout/AppBar.stories.tsx +12 -12
  139. package/src/components/SimpleLayout/AppBar.tsx +56 -63
  140. package/src/components/SimpleLayout/Drawer.tsx +38 -36
  141. package/src/components/SimpleLayout/Main.tsx +22 -25
  142. package/src/components/SimpleLayout/NavBar.stories.tsx +9 -9
  143. package/src/components/SimpleLayout/NavBar.tsx +10 -17
  144. package/src/components/SimpleLayout/SimpleLayout.stories.tsx +46 -69
  145. package/src/components/SimpleLayout/SimpleLayout.tsx +33 -34
  146. package/src/components/hooks.ts +8 -8
  147. package/src/components/index.ts +3 -2
  148. package/src/hooks/actions.ts +17 -18
  149. package/src/hooks/useAppBarProps.ts +14 -31
  150. package/src/hooks/useCompanions.ts +1 -1
  151. package/src/hooks/useDrawerActions.ts +15 -13
  152. package/src/hooks/useNavbarActions.ts +13 -12
  153. package/src/hooks/useSimpleLayoutState.ts +1 -1
  154. package/src/index.ts +7 -1
  155. package/src/meta.ts +2 -1
  156. package/src/operations/close.ts +34 -0
  157. package/src/operations/index.ts +16 -0
  158. package/src/operations/open.ts +63 -0
  159. package/src/operations/revert-workspace.ts +22 -0
  160. package/src/operations/set-layout-mode.ts +12 -0
  161. package/src/operations/set.ts +23 -0
  162. package/src/operations/state-access.ts +19 -0
  163. package/src/operations/switch-workspace.ts +26 -0
  164. package/src/operations/update-complementary.ts +35 -0
  165. package/src/operations/update-dialog.ts +28 -0
  166. package/src/operations/update-popover.ts +35 -0
  167. package/src/operations/update-sidebar.ts +12 -0
  168. package/src/translations.ts +21 -19
  169. package/src/types/capabilities.ts +4 -4
  170. package/src/types/events.ts +1 -1
  171. package/dist/lib/browser/chunk-7VLT3S46.mjs +0 -29
  172. package/dist/lib/browser/chunk-7VLT3S46.mjs.map +0 -7
  173. package/dist/lib/browser/chunk-O3BQBYMW.mjs +0 -1165
  174. package/dist/lib/browser/chunk-O3BQBYMW.mjs.map +0 -7
  175. package/dist/lib/browser/operation-resolver-BYRIQOQT.mjs +0 -205
  176. package/dist/lib/browser/operation-resolver-BYRIQOQT.mjs.map +0 -7
  177. package/dist/lib/browser/react-root-GPTKI5H2.mjs +0 -21
  178. package/dist/lib/browser/react-root-GPTKI5H2.mjs.map +0 -7
  179. package/dist/lib/browser/react-surface-LT5JJTPR.mjs +0 -41
  180. package/dist/lib/browser/react-surface-LT5JJTPR.mjs.map +0 -7
  181. package/dist/lib/browser/spotlight-dismiss-67PHYS5B.mjs +0 -66
  182. package/dist/lib/browser/spotlight-dismiss-67PHYS5B.mjs.map +0 -7
  183. package/dist/lib/browser/state-A3PGDWWZ.mjs +0 -48
  184. package/dist/lib/browser/state-A3PGDWWZ.mjs.map +0 -7
  185. package/dist/lib/browser/url-handler-HTIUY6WL.mjs +0 -152
  186. package/dist/lib/browser/url-handler-HTIUY6WL.mjs.map +0 -7
  187. package/dist/lib/node-esm/chunk-UAWM4B2S.mjs +0 -1166
  188. package/dist/lib/node-esm/chunk-UAWM4B2S.mjs.map +0 -7
  189. package/dist/lib/node-esm/chunk-VIDE5UMB.mjs +0 -31
  190. package/dist/lib/node-esm/chunk-VIDE5UMB.mjs.map +0 -7
  191. package/dist/lib/node-esm/operation-resolver-BDTFNCS2.mjs +0 -206
  192. package/dist/lib/node-esm/operation-resolver-BDTFNCS2.mjs.map +0 -7
  193. package/dist/lib/node-esm/react-root-GRG2OAI2.mjs +0 -22
  194. package/dist/lib/node-esm/react-root-GRG2OAI2.mjs.map +0 -7
  195. package/dist/lib/node-esm/react-surface-TCUSDIN2.mjs +0 -42
  196. package/dist/lib/node-esm/react-surface-TCUSDIN2.mjs.map +0 -7
  197. package/dist/lib/node-esm/spotlight-dismiss-RMLRZUVY.mjs +0 -68
  198. package/dist/lib/node-esm/spotlight-dismiss-RMLRZUVY.mjs.map +0 -7
  199. package/dist/lib/node-esm/state-ZCFZTTPL.mjs +0 -49
  200. package/dist/lib/node-esm/state-ZCFZTTPL.mjs.map +0 -7
  201. package/dist/lib/node-esm/url-handler-WBVVKVPC.mjs +0 -153
  202. package/dist/lib/node-esm/url-handler-WBVVKVPC.mjs.map +0 -7
  203. package/dist/types/src/capabilities/operation-resolver/index.d.ts +0 -3
  204. package/dist/types/src/capabilities/operation-resolver/index.d.ts.map +0 -1
  205. package/dist/types/src/capabilities/operation-resolver/operation-resolver.d.ts +0 -5
  206. package/dist/types/src/capabilities/operation-resolver/operation-resolver.d.ts.map +0 -1
  207. package/dist/types/src/capabilities/react-root/index.d.ts +0 -6
  208. package/dist/types/src/capabilities/react-root/index.d.ts.map +0 -1
  209. package/dist/types/src/capabilities/react-root/react-root.d.ts.map +0 -1
  210. package/dist/types/src/capabilities/react-surface/index.d.ts +0 -3
  211. package/dist/types/src/capabilities/react-surface/index.d.ts.map +0 -1
  212. package/dist/types/src/capabilities/react-surface/react-surface.d.ts +0 -5
  213. package/dist/types/src/capabilities/react-surface/react-surface.d.ts.map +0 -1
  214. package/dist/types/src/capabilities/spotlight-dismiss/index.d.ts +0 -3
  215. package/dist/types/src/capabilities/spotlight-dismiss/index.d.ts.map +0 -1
  216. package/dist/types/src/capabilities/spotlight-dismiss/spotlight-dismiss.d.ts.map +0 -1
  217. package/dist/types/src/capabilities/state/index.d.ts +0 -13
  218. package/dist/types/src/capabilities/state/index.d.ts.map +0 -1
  219. package/dist/types/src/capabilities/state/state.d.ts.map +0 -1
  220. package/dist/types/src/capabilities/url-handler/index.d.ts +0 -3
  221. package/dist/types/src/capabilities/url-handler/index.d.ts.map +0 -1
  222. package/dist/types/src/capabilities/url-handler/url-handler.d.ts +0 -12
  223. package/dist/types/src/capabilities/url-handler/url-handler.d.ts.map +0 -1
  224. package/dist/types/src/components/ContentError.d.ts +0 -5
  225. package/dist/types/src/components/ContentError.d.ts.map +0 -1
  226. package/dist/types/src/components/ContentLoading.d.ts +0 -3
  227. package/dist/types/src/components/ContentLoading.d.ts.map +0 -1
  228. package/dist/types/src/components/ContentLoading.stories.d.ts.map +0 -1
  229. package/dist/types/src/components/Workspace/Workspace.d.ts +0 -11
  230. package/dist/types/src/components/Workspace/Workspace.d.ts.map +0 -1
  231. package/dist/types/src/components/Workspace/index.d.ts +0 -2
  232. package/dist/types/src/components/Workspace/index.d.ts.map +0 -1
  233. package/src/capabilities/operation-resolver/index.ts +0 -10
  234. package/src/capabilities/operation-resolver/operation-resolver.ts +0 -217
  235. package/src/capabilities/react-root/index.ts +0 -7
  236. package/src/capabilities/react-surface/index.ts +0 -7
  237. package/src/capabilities/spotlight-dismiss/index.ts +0 -7
  238. package/src/capabilities/state/index.ts +0 -9
  239. package/src/capabilities/url-handler/index.ts +0 -7
  240. package/src/capabilities/url-handler/url-handler.ts +0 -157
  241. package/src/components/ContentError.tsx +0 -23
  242. /package/src/capabilities/{spotlight-dismiss/spotlight-dismiss.ts → spotlight-dismiss.ts} +0 -0
@@ -6,15 +6,15 @@ import { Atom } from '@effect-atom/atom-react';
6
6
  import * as Effect from 'effect/Effect';
7
7
  import { useMemo } from 'react';
8
8
 
9
- import { useCapability, useOperationInvoker } from '@dxos/app-framework/ui';
9
+ import { useCapability } from '@dxos/app-framework/ui';
10
10
  import { useAppGraph } from '@dxos/app-toolkit/ui';
11
11
  import { Node, useActionRunner } from '@dxos/plugin-graph';
12
12
  import { useTranslation } from '@dxos/react-ui';
13
13
  import { type ActionExecutor, type ActionGraphProps, createGapSeparator } from '@dxos/react-ui-menu';
14
14
 
15
- import { useMobileLayout } from '../components';
16
- import { meta } from '../meta';
17
- import { SimpleLayoutState as SimpleLayoutStateCapability } from '../types';
15
+ import { useMobileLayout } from '#components';
16
+ import { meta } from '#meta';
17
+ import { SimpleLayoutState as SimpleLayoutStateCapability } from '#types';
18
18
 
19
19
  import { createCompanionActions } from './actions';
20
20
  import { useSimpleLayoutState } from './useSimpleLayoutState';
@@ -34,7 +34,6 @@ export const useDrawerActions = (consumerName: string): DrawerActions => {
34
34
  const stateAtom = useCapability(SimpleLayoutStateCapability);
35
35
  const { graph } = useAppGraph();
36
36
  const runAction = useActionRunner();
37
- const { invokeSync } = useOperationInvoker();
38
37
  const { updateState } = useSimpleLayoutState();
39
38
  const { keyboardOpen } = useMobileLayout(consumerName);
40
39
 
@@ -48,8 +47,8 @@ export const useDrawerActions = (consumerName: string): DrawerActions => {
48
47
  // Add companion tab actions.
49
48
  const { nodes, edges } = createCompanionActions(graph, stateAtom, get, {
50
49
  idPrefix: 'drawer',
51
- selectedVariant: state.companionVariant,
52
- invokeSync,
50
+ selectedVariant: state.drawerState !== 'closed' ? state.companionVariant : undefined,
51
+ updateState,
53
52
  });
54
53
 
55
54
  // Add gap separator before toolbar buttons.
@@ -65,14 +64,14 @@ export const useDrawerActions = (consumerName: string): DrawerActions => {
65
64
  type: Node.ActionType,
66
65
  properties: {
67
66
  icon: isExpanded ? 'ph--arrow-down--regular' : 'ph--arrow-up--regular',
68
- label: isExpanded ? t('collapse drawer label') : t('expand drawer label'),
67
+ label: isExpanded ? t('collapse-drawer.label') : t('expand-drawer.label'),
69
68
  iconOnly: true,
70
69
  },
71
70
  data: () =>
72
71
  Effect.sync(() => updateState((state) => ({ ...state, drawerState: isExpanded ? 'open' : 'expanded' }))),
73
72
  };
74
73
  nodes.push(toggleExpandAction);
75
- edges.push({ source: 'root', target: toggleExpandAction.id });
74
+ edges.push({ source: 'root', target: toggleExpandAction.id, relation: 'child' });
76
75
  }
77
76
 
78
77
  // Add close button.
@@ -81,17 +80,20 @@ export const useDrawerActions = (consumerName: string): DrawerActions => {
81
80
  type: Node.ActionType,
82
81
  properties: {
83
82
  icon: 'ph--x--regular',
84
- label: t('close drawer label'),
83
+ label: t('close-drawer.label'),
85
84
  iconOnly: true,
86
85
  },
87
- data: () => Effect.sync(() => updateState((state) => ({ ...state, drawerState: 'closed' }))),
86
+ data: () =>
87
+ Effect.sync(() =>
88
+ updateState((state) => ({ ...state, drawerState: 'closed', companionVariant: undefined })),
89
+ ),
88
90
  };
89
91
  nodes.push(closeAction);
90
- edges.push({ source: 'root', target: closeAction.id });
92
+ edges.push({ source: 'root', target: closeAction.id, relation: 'child' });
91
93
 
92
94
  return { nodes, edges };
93
95
  }),
94
- [graph, stateAtom, invokeSync, updateState, keyboardOpen, t],
96
+ [graph, stateAtom, updateState, keyboardOpen, t],
95
97
  );
96
98
 
97
99
  return { actions: actionsAtom, onAction: runAction };
@@ -5,7 +5,7 @@
5
5
  import { Atom } from '@effect-atom/atom-react';
6
6
  import { useMemo } from 'react';
7
7
 
8
- import { useCapability, useOperationInvoker } from '@dxos/app-framework/ui';
8
+ import { useCapability } from '@dxos/app-framework/ui';
9
9
  import { useAppGraph } from '@dxos/app-toolkit/ui';
10
10
  import { Node, useActionRunner } from '@dxos/plugin-graph';
11
11
  import { useTranslation } from '@dxos/react-ui';
@@ -16,10 +16,11 @@ import {
16
16
  createMenuItemGroup,
17
17
  } from '@dxos/react-ui-menu';
18
18
 
19
- import { meta } from '../meta';
20
- import { SimpleLayoutState } from '../types';
19
+ import { meta } from '#meta';
20
+ import { SimpleLayoutState } from '#types';
21
21
 
22
22
  import { createCompanionActions } from './actions';
23
+ import { useSimpleLayoutState } from './useSimpleLayoutState';
23
24
 
24
25
  const MAIN_MENU_GROUP_ID = 'navbar-main-menu';
25
26
 
@@ -38,8 +39,8 @@ export const useNavbarActions = (): NavbarActions => {
38
39
  const { t } = useTranslation(meta.id);
39
40
  const { graph } = useAppGraph();
40
41
  const runAction = useActionRunner();
41
- const { invokeSync } = useOperationInvoker();
42
42
  const stateAtom = useCapability(SimpleLayoutState);
43
+ const { updateState } = useSimpleLayoutState();
43
44
 
44
45
  // Create a computed atom that derives everything from graph connections and state.
45
46
  const actionsAtom = useMemo(
@@ -48,7 +49,7 @@ export const useNavbarActions = (): NavbarActions => {
48
49
  // Add companion actions.
49
50
  const { nodes, edges } = createCompanionActions(graph, stateAtom, get, {
50
51
  idPrefix: 'navbar',
51
- invokeSync,
52
+ updateState,
52
53
  });
53
54
 
54
55
  // Add gap separator.
@@ -61,25 +62,25 @@ export const useNavbarActions = (): NavbarActions => {
61
62
  variant: 'dropdownMenu',
62
63
  icon: 'ph--list--regular',
63
64
  iconOnly: true,
64
- label: t('main menu label'),
65
+ label: t('main-menu.label'),
65
66
  testId: 'simpleLayoutPlugin.addSpace',
66
67
  });
67
68
  nodes.push(mainMenuGroup);
68
- edges.push({ source: 'root', target: mainMenuGroup.id });
69
+ edges.push({ source: 'root', target: mainMenuGroup.id, relation: 'child' });
69
70
 
70
- // Get menu actions from root connections.
71
- const rootConnections = get(graph.connections(Node.RootId));
72
- const menuActions = rootConnections.filter((node) => node.properties.disposition === 'menu');
71
+ // Get menu actions from root actions (on 'action' edge relation).
72
+ const rootActions = get(graph.actions(Node.RootId));
73
+ const menuActions = rootActions.filter((node) => node.properties.disposition === 'menu');
73
74
 
74
75
  // Add menu actions as children of the dropdown group.
75
76
  menuActions.forEach((menuAction) => {
76
77
  nodes.push(menuAction as ActionGraphProps['nodes'][number]);
77
- edges.push({ source: MAIN_MENU_GROUP_ID, target: menuAction.id });
78
+ edges.push({ source: MAIN_MENU_GROUP_ID, target: menuAction.id, relation: 'child' });
78
79
  });
79
80
 
80
81
  return { nodes, edges };
81
82
  }),
82
- [graph, stateAtom, invokeSync, t],
83
+ [graph, stateAtom, updateState, t],
83
84
  );
84
85
 
85
86
  return { actions: actionsAtom, onAction: runAction };
@@ -7,7 +7,7 @@ import { useCallback, useContext } from 'react';
7
7
 
8
8
  import { useCapability } from '@dxos/app-framework/ui';
9
9
 
10
- import { SimpleLayoutState } from '../types';
10
+ import { SimpleLayoutState } from '#types';
11
11
 
12
12
  export type UseSimpleLayoutState = {
13
13
  state: SimpleLayoutState;
package/src/index.ts CHANGED
@@ -2,4 +2,10 @@
2
2
  // Copyright 2025 DXOS.org
3
3
  //
4
4
 
5
- export * from './SimpleLayoutPlugin';
5
+ import { Plugin } from '@dxos/app-framework';
6
+
7
+ import { meta } from './meta';
8
+
9
+ export const SimpleLayoutPlugin = Plugin.lazy(meta, () => import('./SimpleLayoutPlugin'));
10
+
11
+ export * from './meta';
package/src/meta.ts CHANGED
@@ -6,11 +6,12 @@ import { type Plugin } from '@dxos/app-framework';
6
6
  import { trim } from '@dxos/util';
7
7
 
8
8
  export const meta: Plugin.Meta = {
9
- id: 'dxos.org/plugin/simple-layout',
9
+ id: 'org.dxos.plugin.simpleLayout',
10
10
  name: 'Simple Layout',
11
11
  description: trim`
12
12
  Minimal layout plugin for simplified UI contexts like popover windows.
13
13
  Provides basic content rendering without sidebars or complex navigation.
14
14
  `,
15
15
  icon: 'ph--layout--regular',
16
+ tags: ['system'],
16
17
  };
@@ -0,0 +1,34 @@
1
+ // Copyright 2025 DXOS.org
2
+
3
+ import * as Effect from 'effect/Effect';
4
+
5
+ import { LayoutOperation } from '@dxos/app-toolkit';
6
+ import { Operation } from '@dxos/compute';
7
+
8
+ import { layoutStateAccess } from './state-access';
9
+
10
+ const handler: Operation.WithHandler<typeof LayoutOperation.Close> = LayoutOperation.Close.pipe(
11
+ Operation.withHandler(
12
+ Effect.fnUntraced(function* () {
13
+ const { updateState } = yield* layoutStateAccess;
14
+
15
+ updateState((state) => {
16
+ if (state.history.length > 0) {
17
+ const newHistory = [...state.history];
18
+ const previousActive = newHistory.pop();
19
+ return {
20
+ ...state,
21
+ active: previousActive,
22
+ history: newHistory,
23
+ };
24
+ }
25
+ return {
26
+ ...state,
27
+ active: undefined,
28
+ };
29
+ });
30
+ }),
31
+ ),
32
+ );
33
+
34
+ export default handler;
@@ -0,0 +1,16 @@
1
+ // Copyright 2025 DXOS.org
2
+
3
+ import { OperationHandlerSet } from '@dxos/compute';
4
+
5
+ export const SimpleLayoutOperationHandlerSet = OperationHandlerSet.lazy(
6
+ () => import('./close'),
7
+ () => import('./open'),
8
+ () => import('./revert-workspace'),
9
+ () => import('./set'),
10
+ () => import('./set-layout-mode'),
11
+ () => import('./switch-workspace'),
12
+ () => import('./update-complementary'),
13
+ () => import('./update-dialog'),
14
+ () => import('./update-popover'),
15
+ () => import('./update-sidebar'),
16
+ );
@@ -0,0 +1,63 @@
1
+ // Copyright 2025 DXOS.org
2
+
3
+ import * as Effect from 'effect/Effect';
4
+
5
+ import { Capability } from '@dxos/app-framework';
6
+ import {
7
+ AppCapabilities,
8
+ LayoutOperation,
9
+ createEdgeExistenceChecker,
10
+ validateNavigationTarget,
11
+ } from '@dxos/app-toolkit';
12
+ import { Operation } from '@dxos/compute';
13
+ import { Context } from '@dxos/context';
14
+ import { ClientCapabilities } from '@dxos/plugin-client/types';
15
+
16
+ import { layoutStateAccess } from './state-access';
17
+
18
+ const handler: Operation.WithHandler<typeof LayoutOperation.Open> = LayoutOperation.Open.pipe(
19
+ Operation.withHandler(
20
+ Effect.fnUntraced(function* (input) {
21
+ const { graph } = yield* Capability.get(AppCapabilities.AppGraph);
22
+ const { updateState } = yield* layoutStateAccess;
23
+ const id = input.subject[0];
24
+
25
+ // Validate navigation target, redirecting to 404 if not found.
26
+ const capabilities = yield* Capability.Service;
27
+ const pathResolvers = capabilities.getAll(AppCapabilities.NavigationPathResolver);
28
+ const checkRemoteExistence = yield* Capability.get(ClientCapabilities.Client).pipe(
29
+ Effect.map((client) =>
30
+ createEdgeExistenceChecker((spaceId, body) => client.edge.http.execQuery(new Context(), spaceId, body)),
31
+ ),
32
+ Effect.catchAll(() => Effect.succeed(undefined)),
33
+ );
34
+
35
+ const validatedId =
36
+ input.navigation === 'immediate'
37
+ ? id
38
+ : yield* validateNavigationTarget({
39
+ graph,
40
+ subjectId: id,
41
+ pathResolvers,
42
+ checkRemoteExistence,
43
+ });
44
+
45
+ updateState((state) => {
46
+ const newHistory = state.active ? [...state.history, state.active] : state.history;
47
+ const trimmedHistory =
48
+ newHistory.length > MAX_HISTORY_LENGTH ? newHistory.slice(-MAX_HISTORY_LENGTH) : newHistory;
49
+ return {
50
+ ...state,
51
+ active: validatedId,
52
+ history: trimmedHistory,
53
+ };
54
+ });
55
+
56
+ return [validatedId];
57
+ }),
58
+ ),
59
+ );
60
+
61
+ export default handler;
62
+
63
+ const MAX_HISTORY_LENGTH = 50;
@@ -0,0 +1,22 @@
1
+ // Copyright 2025 DXOS.org
2
+
3
+ import * as Effect from 'effect/Effect';
4
+
5
+ import { LayoutOperation } from '@dxos/app-toolkit';
6
+ import { Operation } from '@dxos/compute';
7
+
8
+ import { layoutStateAccess } from './state-access';
9
+
10
+ const handler: Operation.WithHandler<typeof LayoutOperation.RevertWorkspace> = LayoutOperation.RevertWorkspace.pipe(
11
+ Operation.withHandler(
12
+ Effect.fnUntraced(function* () {
13
+ const { getState } = yield* layoutStateAccess;
14
+ const state = getState();
15
+ yield* Operation.invoke(LayoutOperation.SwitchWorkspace, {
16
+ subject: state.previousWorkspace,
17
+ });
18
+ }),
19
+ ),
20
+ );
21
+
22
+ export default handler;
@@ -0,0 +1,12 @@
1
+ // Copyright 2025 DXOS.org
2
+
3
+ import * as Effect from 'effect/Effect';
4
+
5
+ import { LayoutOperation } from '@dxos/app-toolkit';
6
+ import { Operation } from '@dxos/compute';
7
+
8
+ const handler: Operation.WithHandler<typeof LayoutOperation.SetLayoutMode> = LayoutOperation.SetLayoutMode.pipe(
9
+ Operation.withHandler(Effect.fnUntraced(function* () {})),
10
+ );
11
+
12
+ export default handler;
@@ -0,0 +1,23 @@
1
+ // Copyright 2025 DXOS.org
2
+
3
+ import * as Effect from 'effect/Effect';
4
+
5
+ import { LayoutOperation } from '@dxos/app-toolkit';
6
+ import { Operation } from '@dxos/compute';
7
+
8
+ import { layoutStateAccess } from './state-access';
9
+
10
+ const handler: Operation.WithHandler<typeof LayoutOperation.Set> = LayoutOperation.Set.pipe(
11
+ Operation.withHandler(
12
+ Effect.fnUntraced(function* (input) {
13
+ const { updateState } = yield* layoutStateAccess;
14
+
15
+ updateState((state) => ({
16
+ ...state,
17
+ active: input.subject[0],
18
+ }));
19
+ }),
20
+ ),
21
+ );
22
+
23
+ export default handler;
@@ -0,0 +1,19 @@
1
+ // Copyright 2025 DXOS.org
2
+
3
+ import * as Effect from 'effect/Effect';
4
+
5
+ import { Capabilities, Capability } from '@dxos/app-framework';
6
+
7
+ import { type SimpleLayoutState, SimpleLayoutState as SimpleLayoutStateCapability } from '../types';
8
+
9
+ export const layoutStateAccess = Effect.gen(function* () {
10
+ const registry = yield* Capability.get(Capabilities.AtomRegistry);
11
+ const stateAtom = yield* Capability.get(SimpleLayoutStateCapability);
12
+
13
+ return {
14
+ getState: () => registry.get(stateAtom),
15
+ updateState: (fn: (current: SimpleLayoutState) => SimpleLayoutState) => {
16
+ registry.set(stateAtom, fn(registry.get(stateAtom)));
17
+ },
18
+ };
19
+ });
@@ -0,0 +1,26 @@
1
+ // Copyright 2025 DXOS.org
2
+
3
+ import * as Effect from 'effect/Effect';
4
+
5
+ import { isPinnedWorkspace, LayoutOperation } from '@dxos/app-toolkit';
6
+ import { Operation } from '@dxos/compute';
7
+
8
+ import { layoutStateAccess } from './state-access';
9
+
10
+ const handler: Operation.WithHandler<typeof LayoutOperation.SwitchWorkspace> = LayoutOperation.SwitchWorkspace.pipe(
11
+ Operation.withHandler(
12
+ Effect.fnUntraced(function* (input) {
13
+ const { updateState } = yield* layoutStateAccess;
14
+
15
+ updateState((state) => ({
16
+ ...state,
17
+ previousWorkspace: !isPinnedWorkspace(state.workspace) ? state.workspace : state.previousWorkspace,
18
+ workspace: input.subject,
19
+ active: undefined,
20
+ history: [],
21
+ }));
22
+ }),
23
+ ),
24
+ );
25
+
26
+ export default handler;
@@ -0,0 +1,35 @@
1
+ // Copyright 2025 DXOS.org
2
+
3
+ import * as Effect from 'effect/Effect';
4
+
5
+ import { LayoutOperation } from '@dxos/app-toolkit';
6
+ import { Operation } from '@dxos/compute';
7
+ import { getLinkedVariant } from '@dxos/react-ui-attention';
8
+
9
+ import { layoutStateAccess } from './state-access';
10
+
11
+ const handler: Operation.WithHandler<typeof LayoutOperation.UpdateComplementary> =
12
+ LayoutOperation.UpdateComplementary.pipe(
13
+ Operation.withHandler(
14
+ Effect.fnUntraced(function* (input) {
15
+ const { updateState } = yield* layoutStateAccess;
16
+
17
+ if (input.state === 'closed') {
18
+ updateState((state) => ({
19
+ ...state,
20
+ drawerState: 'closed',
21
+ companionVariant: undefined,
22
+ }));
23
+ } else if (input.subject) {
24
+ const variant = getLinkedVariant(input.subject);
25
+ updateState((state) => ({
26
+ ...state,
27
+ companionVariant: variant,
28
+ drawerState: input.state === 'expanded' ? 'expanded' : 'open',
29
+ }));
30
+ }
31
+ }),
32
+ ),
33
+ );
34
+
35
+ export default handler;
@@ -0,0 +1,28 @@
1
+ // Copyright 2025 DXOS.org
2
+
3
+ import * as Effect from 'effect/Effect';
4
+
5
+ import { LayoutOperation } from '@dxos/app-toolkit';
6
+ import { Operation } from '@dxos/compute';
7
+
8
+ import { layoutStateAccess } from './state-access';
9
+
10
+ const handler: Operation.WithHandler<typeof LayoutOperation.UpdateDialog> = LayoutOperation.UpdateDialog.pipe(
11
+ Operation.withHandler(
12
+ Effect.fnUntraced(function* (input) {
13
+ const { updateState } = yield* layoutStateAccess;
14
+
15
+ updateState((state) => ({
16
+ ...state,
17
+ dialogOpen: input.state ?? Boolean(input.subject),
18
+ dialogType: input.type ?? 'default',
19
+ dialogBlockAlign: input.blockAlign ?? 'center',
20
+ dialogOverlayClasses: input.overlayClasses,
21
+ dialogOverlayStyle: input.overlayStyle,
22
+ dialogContent: input.subject ? { component: input.subject, props: input.props } : undefined,
23
+ }));
24
+ }),
25
+ ),
26
+ );
27
+
28
+ export default handler;
@@ -0,0 +1,35 @@
1
+ // Copyright 2025 DXOS.org
2
+
3
+ import * as Effect from 'effect/Effect';
4
+
5
+ import { LayoutOperation } from '@dxos/app-toolkit';
6
+ import { Operation } from '@dxos/compute';
7
+
8
+ import { layoutStateAccess } from './state-access';
9
+
10
+ const handler: Operation.WithHandler<typeof LayoutOperation.UpdatePopover> = LayoutOperation.UpdatePopover.pipe(
11
+ Operation.withHandler(
12
+ Effect.fnUntraced(function* (input) {
13
+ const { updateState } = yield* layoutStateAccess;
14
+
15
+ updateState((state) => ({
16
+ ...state,
17
+ popoverOpen: input.state ?? Boolean(input.subject),
18
+ popoverKind: input.kind ?? 'base',
19
+ popoverTitle: input.kind === 'card' ? input.title : undefined,
20
+ popoverContent:
21
+ typeof input.subject === 'string'
22
+ ? { component: input.subject, props: input.props }
23
+ : input.subject
24
+ ? { subject: input.subject }
25
+ : undefined,
26
+ popoverSide: input.side,
27
+ popoverVariant: input.variant,
28
+ popoverAnchor: input.variant === 'virtual' ? input.anchor : state.popoverAnchor,
29
+ popoverAnchorId: input.variant !== 'virtual' ? input.anchorId : state.popoverAnchorId,
30
+ }));
31
+ }),
32
+ ),
33
+ );
34
+
35
+ export default handler;
@@ -0,0 +1,12 @@
1
+ // Copyright 2025 DXOS.org
2
+
3
+ import * as Effect from 'effect/Effect';
4
+
5
+ import { LayoutOperation } from '@dxos/app-toolkit';
6
+ import { Operation } from '@dxos/compute';
7
+
8
+ const handler: Operation.WithHandler<typeof LayoutOperation.UpdateSidebar> = LayoutOperation.UpdateSidebar.pipe(
9
+ Operation.withHandler(() => Effect.void),
10
+ );
11
+
12
+ export default handler;
@@ -3,31 +3,33 @@
3
3
  //
4
4
 
5
5
  import { type Resource } from '@dxos/react-ui';
6
+ import { translations as searchTranslations } from '@dxos/react-ui-search/translations';
6
7
 
7
- import { meta } from './meta';
8
+ import { meta } from '#meta';
8
9
 
9
10
  export const translations = [
11
+ ...searchTranslations,
10
12
  {
11
13
  'en-US': {
12
14
  [meta.id]: {
13
- 'plugin name': 'Simple layout',
14
- 'settings title': 'Simple layout settings',
15
- 'workspaces heading': 'Workspaces',
16
- 'settings heading': 'Settings',
17
- 'back label': 'Back',
18
- 'browse label': 'Browse',
19
- 'notifications label': 'Notifications',
20
- 'profile label': 'Profile',
21
- 'app menu label': 'App menu',
22
- 'main menu label': 'Main menu',
23
- 'companions menu label': 'Companions',
24
- 'error fallback message': 'An error occurred',
25
- 'search placeholder': 'Search...',
26
- 'drawer label': 'Drawer',
27
- 'close drawer label': 'Close drawer',
28
- 'expand drawer label': 'Expand drawer',
29
- 'collapse drawer label': 'Collapse drawer',
30
- 'actions menu label': 'Actions',
15
+ 'plugin.name': 'Simple layout',
16
+ 'settings.title': 'Simple layout settings',
17
+ 'workspaces.heading': 'Workspaces',
18
+ 'settings.heading': 'Settings',
19
+ 'back.label': 'Back',
20
+ 'browse.label': 'Browse',
21
+ 'notifications.label': 'Notifications',
22
+ 'profile.label': 'Profile',
23
+ 'app-menu.label': 'App menu',
24
+ 'main-menu.label': 'Main menu',
25
+ 'companions-menu.label': 'Companions',
26
+ 'error-fallback.message': 'An error occurred',
27
+ 'drawer.label': 'Drawer',
28
+ 'close-drawer.label': 'Close drawer',
29
+ 'expand-drawer.label': 'Expand drawer',
30
+ 'collapse-drawer.label': 'Collapse drawer',
31
+ 'actions-menu.label': 'Actions',
32
+ 'done.label': 'Done',
31
33
  },
32
34
  },
33
35
  },
@@ -7,7 +7,7 @@ import { type Atom } from '@effect-atom/atom-react';
7
7
  import { Capability } from '@dxos/app-framework';
8
8
  import { type Label } from '@dxos/react-ui';
9
9
 
10
- import { meta } from '../meta';
10
+ import { meta } from '#meta';
11
11
 
12
12
  export type DrawerState = 'closed' | 'open' | 'expanded';
13
13
 
@@ -26,7 +26,7 @@ export type SimpleLayoutState = {
26
26
  dialogOverlayClasses?: string;
27
27
  dialogOverlayStyle?: Record<string, any>;
28
28
  /** Data to be passed to the dialog Surface. */
29
- dialogContent?: any;
29
+ dialogContent?: { component: string; props?: any } | null;
30
30
 
31
31
  popoverOpen?: boolean;
32
32
  popoverSide?: 'top' | 'right' | 'bottom' | 'left';
@@ -35,7 +35,7 @@ export type SimpleLayoutState = {
35
35
  popoverAnchorId?: string;
36
36
  popoverKind?: 'base' | 'card';
37
37
  popoverTitle?: Label;
38
- popoverContent?: any;
38
+ popoverContent?: { component: string; props?: any } | { subject: any } | null;
39
39
 
40
40
  /** Bottom drawer state. */
41
41
  drawerState: DrawerState;
@@ -50,4 +50,4 @@ export type SimpleLayoutState = {
50
50
  companionVariant?: string;
51
51
  };
52
52
 
53
- export const SimpleLayoutState = Capability.make<Atom.Writable<SimpleLayoutState>>(`${meta.id}/state`);
53
+ export const SimpleLayoutState = Capability.make<Atom.Writable<SimpleLayoutState>>(`${meta.id}.state`);
@@ -3,7 +3,7 @@
3
3
  //
4
4
 
5
5
  import { type ActivationEvent } from '@dxos/app-framework';
6
- import { AppActivationEvents } from '@dxos/app-toolkit';
6
+ import { AppActivationEvents } from '@dxos/app-toolkit/events';
7
7
 
8
8
  import { SimpleLayoutState } from './capabilities';
9
9
 
@@ -1,29 +0,0 @@
1
- // src/meta.ts
2
- import { trim } from "@dxos/util";
3
- var meta = {
4
- id: "dxos.org/plugin/simple-layout",
5
- name: "Simple Layout",
6
- description: trim`
7
- Minimal layout plugin for simplified UI contexts like popover windows.
8
- Provides basic content rendering without sidebars or complex navigation.
9
- `,
10
- icon: "ph--layout--regular"
11
- };
12
-
13
- // src/types/capabilities.ts
14
- import { Capability } from "@dxos/app-framework";
15
- var SimpleLayoutState = Capability.make(`${meta.id}/state`);
16
-
17
- // src/types/events.ts
18
- import { AppActivationEvents } from "@dxos/app-toolkit";
19
- (function(SimpleLayoutEvents2) {
20
- SimpleLayoutEvents2.StateReady = AppActivationEvents.createStateEvent(SimpleLayoutState.identifier);
21
- })(SimpleLayoutEvents || (SimpleLayoutEvents = {}));
22
- var SimpleLayoutEvents;
23
-
24
- export {
25
- meta,
26
- SimpleLayoutState,
27
- SimpleLayoutEvents
28
- };
29
- //# sourceMappingURL=chunk-7VLT3S46.mjs.map