@dxos/plugin-deck 0.8.2-main.fbd8ed0 → 0.8.2-staging.42af850

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 (62) hide show
  1. package/dist/lib/browser/{app-graph-builder-R7COZ4A6.mjs → app-graph-builder-M5BT34YG.mjs} +2 -2
  2. package/dist/lib/browser/{chunk-OF5RIATN.mjs → chunk-FX44YX3G.mjs} +3 -3
  3. package/dist/lib/browser/chunk-JE2ARGEB.mjs +1487 -0
  4. package/dist/lib/browser/chunk-JE2ARGEB.mjs.map +7 -0
  5. package/dist/lib/browser/{chunk-XMCG42ID.mjs → chunk-KLN73CM3.mjs} +2 -2
  6. package/dist/lib/browser/{chunk-XMCG42ID.mjs.map → chunk-KLN73CM3.mjs.map} +1 -1
  7. package/dist/lib/browser/{chunk-3O2UZVBA.mjs → chunk-SLQNOATN.mjs} +27 -21
  8. package/dist/lib/browser/{chunk-3O2UZVBA.mjs.map → chunk-SLQNOATN.mjs.map} +2 -2
  9. package/dist/lib/browser/{chunk-JAYQ5BTF.mjs → chunk-YN5OZEGS.mjs} +8 -3
  10. package/dist/lib/browser/chunk-YN5OZEGS.mjs.map +7 -0
  11. package/dist/lib/browser/index.mjs +5 -6
  12. package/dist/lib/browser/index.mjs.map +2 -2
  13. package/dist/lib/browser/{intent-resolver-MAKOS57L.mjs → intent-resolver-3GAC57UA.mjs} +10 -8
  14. package/dist/lib/browser/intent-resolver-3GAC57UA.mjs.map +7 -0
  15. package/dist/lib/browser/meta.json +1 -1
  16. package/dist/lib/browser/{react-root-DGQVIHXP.mjs → react-root-ISFFOJZX.mjs} +6 -6
  17. package/dist/lib/browser/{react-surface-PXBXIOPU.mjs → react-surface-A63RQB5N.mjs} +6 -6
  18. package/dist/lib/browser/{settings-UBWJF7J7.mjs → settings-X7GDEXU3.mjs} +2 -2
  19. package/dist/lib/browser/state-VJ6E3ADY.mjs +10 -0
  20. package/dist/lib/browser/{tools-IVPIPTVA.mjs → tools-N57NQ2LH.mjs} +24 -14
  21. package/dist/lib/browser/tools-N57NQ2LH.mjs.map +7 -0
  22. package/dist/lib/browser/types.mjs +1 -1
  23. package/dist/lib/browser/{url-handler-JSYGSVSB.mjs → url-handler-BUGI6XRE.mjs} +3 -3
  24. package/dist/types/src/capabilities/capabilities.d.ts +10 -2
  25. package/dist/types/src/capabilities/capabilities.d.ts.map +1 -1
  26. package/dist/types/src/capabilities/index.d.ts +1 -1
  27. package/dist/types/src/capabilities/index.d.ts.map +1 -1
  28. package/dist/types/src/capabilities/intent-resolver.d.ts.map +1 -1
  29. package/dist/types/src/capabilities/state.d.ts +5 -1
  30. package/dist/types/src/capabilities/state.d.ts.map +1 -1
  31. package/dist/types/src/capabilities/tools.d.ts +1 -1
  32. package/dist/types/src/capabilities/tools.d.ts.map +1 -1
  33. package/dist/types/src/components/Plank/PlankHeading.d.ts.map +1 -1
  34. package/dist/types/src/components/Sidebar/SidebarButton.d.ts.map +1 -1
  35. package/dist/types/src/translations.d.ts +0 -1
  36. package/dist/types/src/translations.d.ts.map +1 -1
  37. package/dist/types/src/types.d.ts +3 -1
  38. package/dist/types/src/types.d.ts.map +1 -1
  39. package/package.json +32 -30
  40. package/src/capabilities/intent-resolver.ts +7 -3
  41. package/src/capabilities/tools.ts +11 -9
  42. package/src/components/DeckLayout/Dialog.tsx +2 -2
  43. package/src/components/Plank/Plank.tsx +1 -1
  44. package/src/components/Plank/PlankHeading.tsx +5 -3
  45. package/src/components/Sidebar/ComplementarySidebar.tsx +3 -3
  46. package/src/components/Sidebar/SidebarButton.tsx +1 -5
  47. package/src/hooks/useNodeActionExpander.ts +1 -1
  48. package/src/translations.ts +0 -1
  49. package/src/types.ts +3 -1
  50. package/dist/lib/browser/chunk-JAYQ5BTF.mjs.map +0 -7
  51. package/dist/lib/browser/chunk-KIGMELV2.mjs +0 -1319
  52. package/dist/lib/browser/chunk-KIGMELV2.mjs.map +0 -7
  53. package/dist/lib/browser/intent-resolver-MAKOS57L.mjs.map +0 -7
  54. package/dist/lib/browser/state-4WFB4SDO.mjs +0 -10
  55. package/dist/lib/browser/tools-IVPIPTVA.mjs.map +0 -7
  56. /package/dist/lib/browser/{app-graph-builder-R7COZ4A6.mjs.map → app-graph-builder-M5BT34YG.mjs.map} +0 -0
  57. /package/dist/lib/browser/{chunk-OF5RIATN.mjs.map → chunk-FX44YX3G.mjs.map} +0 -0
  58. /package/dist/lib/browser/{react-root-DGQVIHXP.mjs.map → react-root-ISFFOJZX.mjs.map} +0 -0
  59. /package/dist/lib/browser/{react-surface-PXBXIOPU.mjs.map → react-surface-A63RQB5N.mjs.map} +0 -0
  60. /package/dist/lib/browser/{settings-UBWJF7J7.mjs.map → settings-X7GDEXU3.mjs.map} +0 -0
  61. /package/dist/lib/browser/{state-4WFB4SDO.mjs.map → state-VJ6E3ADY.mjs.map} +0 -0
  62. /package/dist/lib/browser/{url-handler-JSYGSVSB.mjs.map → url-handler-BUGI6XRE.mjs.map} +0 -0
@@ -1,1319 +0,0 @@
1
- import {
2
- getCompanionId,
3
- useBreakpoints,
4
- useCompanions,
5
- useDeckCompanions,
6
- useHoistStatusbar,
7
- useMainSize,
8
- useNodeActionExpander
9
- } from "./chunk-3O2UZVBA.mjs";
10
- import {
11
- calculateOverscroll,
12
- layoutAppliesTopbar,
13
- parseEntryId
14
- } from "./chunk-TRFYUEBA.mjs";
15
- import {
16
- DeckCapabilities
17
- } from "./chunk-XMCG42ID.mjs";
18
- import {
19
- DeckAction,
20
- NewPlankPositions,
21
- OverscrollOptions,
22
- PLANK_COMPANION_TYPE,
23
- getMode
24
- } from "./chunk-JAYQ5BTF.mjs";
25
- import {
26
- DECK_PLUGIN
27
- } from "./chunk-NSATFAEE.mjs";
28
-
29
- // packages/plugins/plugin-deck/src/components/DeckLayout/Banner.tsx
30
- import React9 from "react";
31
- import { Surface as Surface5 } from "@dxos/app-framework";
32
- import { useTranslation as useTranslation6 } from "@dxos/react-ui";
33
- import { mx as mx4 } from "@dxos/react-ui-theme";
34
-
35
- // packages/plugins/plugin-deck/src/components/Sidebar/ComplementarySidebar.tsx
36
- import React7, { Fragment as Fragment2, useCallback as useCallback5, useEffect as useEffect3, useMemo as useMemo3, useState as useState2 } from "react";
37
- import { LayoutAction as LayoutAction4, Surface as Surface3, createIntent as createIntent5, useCapability as useCapability3, useIntentDispatcher as useIntentDispatcher5 } from "@dxos/app-framework";
38
- import { Main, useTranslation as useTranslation5, toLocalizedString as toLocalizedString2, IconButton as IconButton4 } from "@dxos/react-ui";
39
- import { Tabs } from "@dxos/react-ui-tabs";
40
-
41
- // packages/plugins/plugin-deck/src/components/Sidebar/SidebarButton.tsx
42
- import React, { useCallback } from "react";
43
- import { createIntent, LayoutAction, useCapability, useIntentDispatcher } from "@dxos/app-framework";
44
- import { IconButton, useTranslation } from "@dxos/react-ui";
45
- var ToggleSidebarButton = ({ classNames, variant = "ghost" }) => {
46
- const layoutContext = useCapability(DeckCapabilities.MutableDeckState);
47
- const { t } = useTranslation(DECK_PLUGIN);
48
- return /* @__PURE__ */ React.createElement(IconButton, {
49
- variant,
50
- iconOnly: true,
51
- icon: "ph--sidebar--regular",
52
- size: 4,
53
- label: t("open navigation sidebar label"),
54
- onClick: () => layoutContext.sidebarState = layoutContext.sidebarState === "expanded" ? "collapsed" : "expanded",
55
- classNames
56
- });
57
- };
58
- var CloseSidebarButton = () => {
59
- const layoutContext = useCapability(DeckCapabilities.MutableDeckState);
60
- const { t } = useTranslation(DECK_PLUGIN);
61
- return /* @__PURE__ */ React.createElement(IconButton, {
62
- variant: "ghost",
63
- iconOnly: true,
64
- icon: "ph--caret-line-left--regular",
65
- size: 4,
66
- label: t("close navigation sidebar label"),
67
- onClick: () => layoutContext.sidebarState = "collapsed",
68
- classNames: "rounded-none pli-1 dx-focus-ring-inset pie-[max(.5rem,env(safe-area-inset-left))]"
69
- });
70
- };
71
- var ToggleComplementarySidebarButton = ({ inR0, classNames, current }) => {
72
- const { dispatchPromise: dispatch } = useIntentDispatcher();
73
- const layoutContext = useCapability(DeckCapabilities.MutableDeckState);
74
- const { t } = useTranslation(DECK_PLUGIN);
75
- const companions = useDeckCompanions();
76
- const handleClick = useCallback(async () => {
77
- layoutContext.complementarySidebarState = layoutContext.complementarySidebarState === "expanded" ? "collapsed" : "expanded";
78
- const firstCompanion = companions[0];
79
- if (layoutContext.complementarySidebarState === "expanded" && !current && firstCompanion) {
80
- await dispatch(createIntent(LayoutAction.UpdateComplementary, {
81
- part: "complementary",
82
- subject: getCompanionId(firstCompanion.id)
83
- }));
84
- }
85
- }, [
86
- layoutContext,
87
- current,
88
- companions,
89
- dispatch
90
- ]);
91
- return /* @__PURE__ */ React.createElement(IconButton, {
92
- noTooltip: true,
93
- iconOnly: true,
94
- onClick: handleClick,
95
- variant: "ghost",
96
- label: t("open complementary sidebar label"),
97
- classNames: [
98
- "[&>svg]:-scale-x-100",
99
- classNames
100
- ],
101
- icon: "ph--sidebar-simple--regular",
102
- size: inR0 ? 5 : 4,
103
- tooltipSide: inR0 ? "left" : void 0
104
- });
105
- };
106
-
107
- // packages/plugins/plugin-deck/src/components/Plank/Plank.tsx
108
- import React6, { memo as memo2, useCallback as useCallback4, useLayoutEffect, useMemo as useMemo2, useRef } from "react";
109
- import { LayoutAction as LayoutAction3, Surface as Surface2, createIntent as createIntent4, useCapability as useCapability2, useAppGraph as useAppGraph2, useIntentDispatcher as useIntentDispatcher4 } from "@dxos/app-framework";
110
- import { debounce } from "@dxos/async";
111
- import { useNode } from "@dxos/plugin-graph";
112
- import { ATTENDABLE_PATH_SEPARATOR, useAttendableAttributes } from "@dxos/react-ui-attention";
113
- import { StackItem as StackItem2, railGridHorizontal } from "@dxos/react-ui-stack";
114
- import { mainIntrinsicSize, mx as mx3 } from "@dxos/react-ui-theme";
115
-
116
- // packages/plugins/plugin-deck/src/components/Plank/PlankError.tsx
117
- import React5, { useEffect as useEffect2, useState } from "react";
118
- import { useTranslation as useTranslation4 } from "@dxos/react-ui";
119
- import { descriptionMessage, mx as mx2 } from "@dxos/react-ui-theme";
120
-
121
- // packages/plugins/plugin-deck/src/components/Plank/PlankHeading.tsx
122
- import React3, { Fragment, memo, useCallback as useCallback3, useEffect, useMemo } from "react";
123
- import { createIntent as createIntent3, LayoutAction as LayoutAction2, Surface, useAppGraph, useIntentDispatcher as useIntentDispatcher3 } from "@dxos/app-framework";
124
- import { Icon, IconButton as IconButton3, Popover, toLocalizedString, useTranslation as useTranslation3 } from "@dxos/react-ui";
125
- import { StackItem } from "@dxos/react-ui-stack";
126
- import { TextTooltip } from "@dxos/react-ui-text-tooltip";
127
- import { hoverableControls, hoverableFocusedWithinControls } from "@dxos/react-ui-theme";
128
-
129
- // packages/plugins/plugin-deck/src/components/Plank/PlankControls.tsx
130
- import React2, { forwardRef, useCallback as useCallback2 } from "react";
131
- import { createIntent as createIntent2, useIntentDispatcher as useIntentDispatcher2 } from "@dxos/app-framework";
132
- import { invariant } from "@dxos/invariant";
133
- import { ButtonGroup, IconButton as IconButton2, useTranslation as useTranslation2 } from "@dxos/react-ui";
134
- var __dxlog_file = "/home/runner/work/dxos/dxos/packages/plugins/plugin-deck/src/components/Plank/PlankControls.tsx";
135
- var PlankControl = ({ icon, label: label3, ...props }) => {
136
- return /* @__PURE__ */ React2.createElement(IconButton2, {
137
- iconOnly: true,
138
- label: label3,
139
- icon,
140
- size: 5,
141
- variant: "ghost",
142
- tooltipSide: "bottom",
143
- ...props
144
- });
145
- };
146
- var plankControlSpacing = "pli-2";
147
- var PlankCompanionControls = /* @__PURE__ */ forwardRef(({ primary }, forwardedRef) => {
148
- const { t } = useTranslation2(DECK_PLUGIN);
149
- const { dispatchPromise: dispatch } = useIntentDispatcher2();
150
- const handleCloseCompanion = useCallback2(() => {
151
- invariant(primary, void 0, {
152
- F: __dxlog_file,
153
- L: 49,
154
- S: void 0,
155
- A: [
156
- "primary",
157
- ""
158
- ]
159
- });
160
- return dispatch(createIntent2(DeckAction.ChangeCompanion, {
161
- primary,
162
- companion: null
163
- }));
164
- }, []);
165
- return /* @__PURE__ */ React2.createElement("div", {
166
- ref: forwardedRef,
167
- className: "contents app-no-drag"
168
- }, /* @__PURE__ */ React2.createElement(PlankControl, {
169
- label: t("close companion label"),
170
- variant: "ghost",
171
- icon: "ph--x--regular",
172
- onClick: handleCloseCompanion,
173
- classNames: plankControlSpacing
174
- }));
175
- });
176
- var PlankControls = /* @__PURE__ */ forwardRef(({ children, classNames, variant = "default", capabilities, layoutMode, pin, close = false, onClick, ...props }, forwardedRef) => {
177
- const { t } = useTranslation2(DECK_PLUGIN);
178
- const buttonClassNames = variant === "hide-disabled" ? `disabled:hidden ${plankControlSpacing}` : plankControlSpacing;
179
- const layoutIsAnySolo = !!layoutMode?.startsWith("solo");
180
- return /* @__PURE__ */ React2.createElement(ButtonGroup, {
181
- ...props,
182
- classNames: [
183
- "app-no-drag !opacity-100",
184
- classNames
185
- ],
186
- ref: forwardedRef
187
- }, capabilities.deck ? /* @__PURE__ */ React2.createElement(React2.Fragment, null, capabilities.solo && /* @__PURE__ */ React2.createElement(React2.Fragment, null, layoutMode === "solo" && /* @__PURE__ */ React2.createElement(PlankControl, {
188
- label: t("show fullscreen plank label"),
189
- classNames: buttonClassNames,
190
- icon: "ph--corners-out--regular",
191
- onClick: () => onClick?.("solo--fullscreen")
192
- }), /* @__PURE__ */ React2.createElement(PlankControl, {
193
- label: t(layoutMode === "solo--fullscreen" ? "exit fullscreen label" : layoutIsAnySolo ? "show deck plank label" : "show solo plank label"),
194
- classNames: buttonClassNames,
195
- icon: layoutMode === "solo--fullscreen" ? "ph--corners-in--regular" : layoutIsAnySolo ? "ph--arrows-in-line-horizontal--regular" : "ph--arrows-out-line-horizontal--regular",
196
- onClick: () => onClick?.(layoutMode === "solo--fullscreen" ? "solo--fullscreen" : "solo")
197
- })), !layoutIsAnySolo && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(PlankControl, {
198
- label: t("increment start label"),
199
- disabled: !capabilities.incrementStart,
200
- classNames: buttonClassNames,
201
- icon: "ph--caret-left--regular",
202
- onClick: () => onClick?.("increment-start")
203
- }), /* @__PURE__ */ React2.createElement(PlankControl, {
204
- label: t("increment end label"),
205
- disabled: !capabilities.incrementEnd,
206
- classNames: buttonClassNames,
207
- icon: "ph--caret-right--regular",
208
- onClick: () => onClick?.("increment-end")
209
- }))) : capabilities.fullscreen && /* @__PURE__ */ React2.createElement(PlankControl, {
210
- label: t(layoutMode === "solo--fullscreen" ? "exit fullscreen label" : "show fullscreen plank label"),
211
- classNames: buttonClassNames,
212
- icon: layoutMode === "solo--fullscreen" ? "ph--corners-in--regular" : "ph--corners-out--regular",
213
- onClick: () => onClick?.("solo--fullscreen")
214
- }), close && !layoutIsAnySolo && /* @__PURE__ */ React2.createElement(PlankControl, {
215
- label: t(`${typeof close === "string" ? "minify" : "close"} label`),
216
- classNames: buttonClassNames,
217
- "data-testid": "plankHeading.close",
218
- icon: close === "minify-start" ? "ph--caret-line-left--regular" : close === "minify-end" ? "ph--caret-line-right--regular" : "ph--x--regular",
219
- onClick: () => onClick?.("close")
220
- }), capabilities.companion && /* @__PURE__ */ React2.createElement(PlankControl, {
221
- label: t("open companion label"),
222
- classNames: buttonClassNames,
223
- "data-testid": "plankHeading.companion",
224
- icon: "ph--square-split-horizontal--regular",
225
- onClick: () => onClick?.("companion")
226
- }), children);
227
- });
228
-
229
- // packages/plugins/plugin-deck/src/components/fragments.ts
230
- import { mx } from "@dxos/react-ui-theme";
231
- var soloInlinePadding = "pis-[calc(env(safe-area-inset-left)+.25rem)] pie-[calc(env(safe-area-inset-left)+.25rem)]";
232
- var sidebarToggleStyles = "bs-[--rail-item] is-[--rail-item] absolute block-end-2 z-[1] !bg-deckSurface lg:hidden";
233
- var fixedSidebarToggleStyles = mx(sidebarToggleStyles, "inline-start-2");
234
- var fixedComplementarySidebarToggleStyles = mx(sidebarToggleStyles, "inline-end-2");
235
-
236
- // packages/plugins/plugin-deck/src/components/Plank/PlankHeading.tsx
237
- var MAX_COMPANIONS = 5;
238
- var PlankHeading = /* @__PURE__ */ memo(({ id, part, node, deckEnabled, canIncrementStart, canIncrementEnd, popoverAnchorId, primaryId, pending, companioned, companions, layoutMode, actions = [] }) => {
239
- const { t } = useTranslation3(DECK_PLUGIN);
240
- const { dispatchPromise: dispatch } = useIntentDispatcher3();
241
- const { graph } = useAppGraph();
242
- const breakpoint = useBreakpoints();
243
- const icon = node?.properties?.icon ?? "ph--placeholder--regular";
244
- const label3 = pending ? t("pending heading") : toLocalizedString(node?.properties?.label ?? [
245
- "plank heading fallback label",
246
- {
247
- ns: DECK_PLUGIN
248
- }
249
- ], t);
250
- const isCompanionNode = node?.type === PLANK_COMPANION_TYPE;
251
- useEffect(() => {
252
- const frame = requestAnimationFrame(() => {
253
- node && graph.expand(node.id);
254
- });
255
- return () => cancelAnimationFrame(frame);
256
- }, [
257
- node
258
- ]);
259
- const attendableId = primaryId ?? id;
260
- const capabilities = useMemo(() => ({
261
- deck: deckEnabled ?? true,
262
- solo: breakpoint !== "mobile" && (part === "solo" || part === "deck"),
263
- incrementStart: canIncrementStart,
264
- incrementEnd: canIncrementEnd,
265
- fullscreen: !isCompanionNode,
266
- companion: !isCompanionNode && companions && companions.length > 0
267
- }), [
268
- breakpoint,
269
- part,
270
- companions,
271
- canIncrementStart,
272
- canIncrementEnd,
273
- isCompanionNode,
274
- deckEnabled
275
- ]);
276
- const { variant } = parseEntryId(id);
277
- const sigilActions = useMemo(() => {
278
- if (!node) {
279
- return void 0;
280
- } else if (variant) {
281
- return [];
282
- } else {
283
- return [
284
- actions,
285
- graph.getActions(node.id)
286
- ].filter((a) => a.length > 0);
287
- }
288
- }, [
289
- actions,
290
- node,
291
- variant,
292
- graph
293
- ]);
294
- const handleAction = useCallback3((action) => {
295
- typeof action.data === "function" && action.data?.({
296
- parent: node,
297
- caller: DECK_PLUGIN
298
- });
299
- }, [
300
- node
301
- ]);
302
- const handlePlankAction = useCallback3((eventType) => {
303
- if (eventType.startsWith("solo")) {
304
- return dispatch(createIntent3(DeckAction.Adjust, {
305
- type: eventType,
306
- id
307
- }));
308
- } else if (eventType === "close") {
309
- if (part === "complementary") {
310
- return dispatch(createIntent3(LayoutAction2.UpdateComplementary, {
311
- part: "complementary",
312
- options: {
313
- state: "collapsed"
314
- }
315
- }));
316
- } else {
317
- return dispatch(createIntent3(LayoutAction2.Close, {
318
- part: "main",
319
- subject: [
320
- id
321
- ],
322
- options: {
323
- state: false
324
- }
325
- }));
326
- }
327
- } else {
328
- return dispatch(createIntent3(DeckAction.Adjust, {
329
- type: eventType,
330
- id
331
- }));
332
- }
333
- }, [
334
- dispatch,
335
- id,
336
- part
337
- ]);
338
- const ActionRoot = node && popoverAnchorId === `dxos.org/ui/${DECK_PLUGIN}/${node.id}` ? Popover.Anchor : Fragment;
339
- const handleTabClick = useCallback3((event) => {
340
- const target = event.target.closest("[data-id]");
341
- const tabId = target?.dataset?.id;
342
- if (primaryId && tabId) {
343
- void dispatch(createIntent3(DeckAction.ChangeCompanion, {
344
- primary: primaryId,
345
- companion: tabId
346
- }));
347
- }
348
- }, [
349
- primaryId
350
- ]);
351
- return /* @__PURE__ */ React3.createElement(StackItem.Heading, {
352
- classNames: [
353
- "plb-1 border-be border-separator items-stretch gap-1 sticky inline-start-12 app-drag min-is-0 contain-layout",
354
- part === "solo" ? soloInlinePadding : "pli-1",
355
- ...layoutMode === "solo--fullscreen" ? [
356
- hoverableControls,
357
- hoverableFocusedWithinControls,
358
- "[&>*]:transition-opacity [&>*]:opacity-[--controls-opacity] bg-transparent border-transparent transition-[background-color,border-color] hover-hover:hover:bg-headerSurface focus-within:bg-headerSurface hover-hover:hover:border-separator focus-within:border-separator"
359
- ] : []
360
- ],
361
- "data-plank-heading": true
362
- }, companions && isCompanionNode ? /* @__PURE__ */ React3.createElement("div", {
363
- role: "none",
364
- className: "flex-1 min-is-0 overflow-x-auto scrollbar-thin flex gap-1"
365
- }, companions.map(({ id: id2, properties: { icon: icon2, label: label4 } }) => /* @__PURE__ */ React3.createElement(IconButton3, {
366
- key: id2,
367
- "data-id": id2,
368
- icon: icon2,
369
- iconOnly: companions.length > MAX_COMPANIONS && node?.id !== id2,
370
- label: toLocalizedString(label4, t),
371
- size: 5,
372
- variant: node?.id === id2 ? "primary" : "default",
373
- onClick: handleTabClick
374
- }))) : /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(ActionRoot, null, node && sigilActions ? /* @__PURE__ */ React3.createElement(StackItem.Sigil, {
375
- icon,
376
- related: part === "complementary",
377
- attendableId,
378
- triggerLabel: t("actions menu label"),
379
- actions: sigilActions,
380
- onAction: handleAction
381
- }, /* @__PURE__ */ React3.createElement(Surface, {
382
- role: "menu-footer",
383
- data: {
384
- subject: node.data
385
- }
386
- })) : /* @__PURE__ */ React3.createElement(StackItem.SigilButton, null, /* @__PURE__ */ React3.createElement("span", {
387
- className: "sr-only"
388
- }, label3), /* @__PURE__ */ React3.createElement(Icon, {
389
- icon,
390
- size: 5
391
- }))), /* @__PURE__ */ React3.createElement(TextTooltip, {
392
- text: label3,
393
- onlyWhenTruncating: true
394
- }, /* @__PURE__ */ React3.createElement(StackItem.HeadingLabel, {
395
- attendableId,
396
- related: part === "complementary",
397
- ...pending && {
398
- classNames: "text-description"
399
- }
400
- }, label3))), node && part !== "complementary" && /* @__PURE__ */ React3.createElement(Surface, {
401
- role: "navbar-end",
402
- data: {
403
- subject: node.data
404
- }
405
- }), companioned === "companion" ? /* @__PURE__ */ React3.createElement(PlankCompanionControls, {
406
- primary: primaryId
407
- }) : /* @__PURE__ */ React3.createElement(PlankControls, {
408
- capabilities,
409
- layoutMode,
410
- close: part === "complementary" ? "minify-end" : true,
411
- onClick: handlePlankAction
412
- }));
413
- });
414
-
415
- // packages/plugins/plugin-deck/src/components/Plank/PlankLoading.tsx
416
- import React4 from "react";
417
- var PlankLoading = () => {
418
- return /* @__PURE__ */ React4.createElement("div", {
419
- role: "none",
420
- className: "grid place-items-center attention-surface"
421
- });
422
- };
423
-
424
- // packages/plugins/plugin-deck/src/components/Plank/PlankError.tsx
425
- var PlankContentError = ({ error }) => {
426
- const { t } = useTranslation4(DECK_PLUGIN);
427
- const errorString = error?.toString() ?? "";
428
- return /* @__PURE__ */ React5.createElement("div", {
429
- role: "none",
430
- className: "overflow-auto p-8 attention-surface grid place-items-center"
431
- }, /* @__PURE__ */ React5.createElement("p", {
432
- role: "alert",
433
- className: mx2(descriptionMessage, "break-words rounded-lg p-8", errorString.length < 256 && "text-lg")
434
- }, error ? errorString : t("error fallback message")));
435
- };
436
- var PlankError = ({ id, part, node, error }) => {
437
- const [timedOut, setTimedOut] = useState(false);
438
- useEffect2(() => {
439
- setTimeout(() => setTimedOut(true), 5e3);
440
- }, []);
441
- return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(PlankHeading, {
442
- id,
443
- part,
444
- node,
445
- pending: !timedOut
446
- }), timedOut ? /* @__PURE__ */ React5.createElement(PlankContentError, {
447
- error
448
- }) : /* @__PURE__ */ React5.createElement(PlankLoading, null));
449
- };
450
-
451
- // packages/plugins/plugin-deck/src/components/Plank/Plank.tsx
452
- var UNKNOWN_ID = "unknown_id";
453
- var Plank = /* @__PURE__ */ memo2(({ id = UNKNOWN_ID, companionId, ...props }) => {
454
- const { graph } = useAppGraph2();
455
- const node = useNode(graph, id);
456
- const companions = useCompanions(id);
457
- const currentCompanion = companions.find(({ id: id2 }) => id2 === companionId);
458
- const hasCompanion = !!(companionId && currentCompanion);
459
- return /* @__PURE__ */ React6.createElement(PlankContainer, {
460
- solo: props.part === "solo",
461
- companion: hasCompanion
462
- }, /* @__PURE__ */ React6.createElement(PlankComponent, {
463
- id,
464
- node,
465
- companioned: hasCompanion ? "primary" : void 0,
466
- companions: hasCompanion ? [] : companions,
467
- ...props,
468
- ...props.part === "solo" ? {
469
- part: "solo-primary"
470
- } : {}
471
- }), hasCompanion && /* @__PURE__ */ React6.createElement(PlankComponent, {
472
- id: companionId,
473
- node: currentCompanion,
474
- primary: node,
475
- companions,
476
- companioned: "companion",
477
- ...props,
478
- ...props.part === "solo" ? {
479
- part: "solo-companion"
480
- } : {
481
- order: (props.order ?? 0) + 1
482
- }
483
- }));
484
- });
485
- var PlankContainer = ({ children, solo, companion }) => {
486
- const sizeAttrs = useMainSize();
487
- if (!solo) {
488
- return children;
489
- }
490
- return /* @__PURE__ */ React6.createElement("div", {
491
- role: "none",
492
- className: mx3("absolute inset-0 grid", companion && "grid-cols-[1fr_1fr]", railGridHorizontal, mainIntrinsicSize),
493
- ...sizeAttrs
494
- }, children);
495
- };
496
- var PlankComponent = /* @__PURE__ */ memo2(({ layoutMode, id, part, path, order, active, companioned, node, primary, companions, settings }) => {
497
- const { dispatchPromise: dispatch } = useIntentDispatcher4();
498
- const { deck, popoverAnchorId, scrollIntoView } = useCapability2(DeckCapabilities.DeckState);
499
- const canResize = layoutMode === "deck";
500
- const attendableAttrs = useAttendableAttributes(primary?.id ?? id);
501
- const index = active ? active.findIndex((entryId) => entryId === id) : 0;
502
- const length = active?.length ?? 1;
503
- const canIncrementStart = active && index !== void 0 && index > 0 && length !== void 0 && length > 1;
504
- const canIncrementEnd = active && index !== void 0 && index < length - 1 && length !== void 0;
505
- const rootElement = useRef(null);
506
- const { variant } = parseEntryId(id);
507
- const sizeKey = `${id.split("+")[0]}${variant ? `${ATTENDABLE_PATH_SEPARATOR}${variant}` : ""}`;
508
- const size = deck.plankSizing[sizeKey];
509
- const handleSizeChange = useCallback4(debounce((nextSize) => {
510
- return dispatch(createIntent4(DeckAction.UpdatePlankSize, {
511
- id: sizeKey,
512
- size: nextSize
513
- }));
514
- }, 200), [
515
- dispatch,
516
- sizeKey
517
- ]);
518
- const handleKeyDown = useCallback4((event) => {
519
- if (event.target === event.currentTarget && event.key === "Escape") {
520
- rootElement.current?.closest("main")?.focus();
521
- }
522
- }, []);
523
- useLayoutEffect(() => {
524
- if (scrollIntoView === id) {
525
- const focusable = rootElement.current?.querySelector("button") || rootElement.current;
526
- focusable?.focus({
527
- preventScroll: true
528
- });
529
- layoutMode === "deck" && focusable?.scrollIntoView({
530
- behavior: "smooth",
531
- inline: "center"
532
- });
533
- void dispatch(createIntent4(LayoutAction3.ScrollIntoView, {
534
- part: "current",
535
- subject: void 0
536
- }));
537
- }
538
- }, [
539
- id,
540
- scrollIntoView,
541
- layoutMode
542
- ]);
543
- const isSolo = layoutMode.startsWith("solo") && part === "solo";
544
- const isAttendable = layoutMode.startsWith("solo") && part.startsWith("solo") || layoutMode === "deck" && part === "deck";
545
- const sizeAttrs = useMainSize();
546
- const data = useMemo2(() => node && {
547
- subject: node.data,
548
- companionTo: primary?.data,
549
- variant,
550
- path,
551
- popoverAnchorId
552
- }, [
553
- node,
554
- node?.data,
555
- path,
556
- popoverAnchorId,
557
- primary?.data,
558
- variant
559
- ]);
560
- const placeholder = useMemo2(() => /* @__PURE__ */ React6.createElement(PlankLoading, null), []);
561
- const Root = part.startsWith("solo") ? "article" : StackItem2.Root;
562
- const className = mx3("attention-surface relative", isSolo && mainIntrinsicSize, isSolo && railGridHorizontal, isSolo && "absolute inset-0", part.startsWith("solo") && "grid", part === "deck" && (companioned === "companion" ? "!border-separator border-ie" : "!border-separator border-li"), part.startsWith("solo-") && "row-span-2 grid-rows-subgrid min-is-0", part === "solo-companion" && "!border-separator border-is");
563
- return /* @__PURE__ */ React6.createElement(Root, {
564
- ref: rootElement,
565
- "data-testid": "deck.plank",
566
- tabIndex: 0,
567
- ...part.startsWith("solo") ? {
568
- ...sizeAttrs,
569
- className
570
- } : {
571
- item: {
572
- id
573
- },
574
- size,
575
- onSizeChange: handleSizeChange,
576
- classNames: className,
577
- order,
578
- role: "article"
579
- },
580
- ...isAttendable ? attendableAttrs : {},
581
- onKeyDown: handleKeyDown
582
- }, node ? /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(PlankHeading, {
583
- id,
584
- part: part.startsWith("solo-") ? "solo" : part,
585
- node,
586
- layoutMode,
587
- deckEnabled: settings?.enableDeck,
588
- canIncrementStart,
589
- canIncrementEnd,
590
- popoverAnchorId,
591
- primaryId: primary?.id,
592
- companioned,
593
- companions
594
- }), /* @__PURE__ */ React6.createElement(Surface2, {
595
- key: node.id,
596
- role: "article",
597
- data,
598
- limit: 1,
599
- fallback: PlankContentError,
600
- placeholder
601
- })) : /* @__PURE__ */ React6.createElement(PlankError, {
602
- id,
603
- part
604
- }), canResize && /* @__PURE__ */ React6.createElement(StackItem2.ResizeHandle, null));
605
- });
606
-
607
- // packages/plugins/plugin-deck/src/components/Sidebar/ComplementarySidebar.tsx
608
- var label = [
609
- "complementary sidebar title",
610
- {
611
- ns: DECK_PLUGIN
612
- }
613
- ];
614
- var ComplementarySidebar = ({ current }) => {
615
- const { t } = useTranslation5(DECK_PLUGIN);
616
- const { dispatchPromise: dispatch } = useIntentDispatcher5();
617
- const layout = useCapability3(DeckCapabilities.MutableDeckState);
618
- const layoutMode = getMode(layout.deck);
619
- const breakpoint = useBreakpoints();
620
- const topbar = layoutAppliesTopbar(breakpoint, layoutMode);
621
- const hoistStatusbar = useHoistStatusbar(breakpoint, layoutMode);
622
- const companions = useDeckCompanions();
623
- const activeCompanion = companions.find((companion) => getCompanionId(companion.id) === current);
624
- const activeId = activeCompanion && getCompanionId(activeCompanion.id);
625
- const [internalValue, setInternalValue] = useState2(activeId);
626
- useEffect3(() => {
627
- setInternalValue(activeId);
628
- }, [
629
- activeId
630
- ]);
631
- const handleTabClick = useCallback5((event) => {
632
- const nextValue = event.currentTarget.getAttribute("data-value");
633
- if (nextValue === activeId) {
634
- layout.complementarySidebarState = layout.complementarySidebarState === "expanded" ? "collapsed" : "expanded";
635
- } else {
636
- setInternalValue(nextValue);
637
- layout.complementarySidebarState = "expanded";
638
- void dispatch(createIntent5(LayoutAction4.UpdateComplementary, {
639
- part: "complementary",
640
- subject: nextValue
641
- }));
642
- }
643
- }, [
644
- layout,
645
- activeId,
646
- dispatch
647
- ]);
648
- const data = useMemo3(() => activeCompanion && {
649
- id: activeCompanion.id,
650
- subject: activeCompanion.data
651
- }, [
652
- activeCompanion?.id,
653
- activeCompanion?.data
654
- ]);
655
- useEffect3(() => {
656
- if (!activeId) {
657
- void dispatch(createIntent5(LayoutAction4.UpdateComplementary, {
658
- part: "complementary",
659
- options: {
660
- state: "collapsed"
661
- }
662
- }));
663
- }
664
- }, [
665
- activeId,
666
- dispatch
667
- ]);
668
- return /* @__PURE__ */ React7.createElement(Main.ComplementarySidebar, {
669
- label,
670
- classNames: [
671
- topbar && "block-start-[calc(env(safe-area-inset-top)+var(--rail-size))]",
672
- hoistStatusbar && "block-end-[--statusbar-size]"
673
- ]
674
- }, /* @__PURE__ */ React7.createElement(Tabs.Root, {
675
- orientation: "vertical",
676
- verticalVariant: "stateless",
677
- value: internalValue,
678
- classNames: "contents"
679
- }, /* @__PURE__ */ React7.createElement("div", {
680
- role: "none",
681
- className: "absolute z-[1] inset-block-0 inline-end-0 !is-[--r0-size] pbs-[env(safe-area-inset-top)] pbe-[env(safe-area-inset-bottom)] border-is border-separator grid grid-cols-1 grid-rows-[1fr_min-content] bg-baseSurface contain-layout app-drag"
682
- }, /* @__PURE__ */ React7.createElement(Tabs.Tablist, {
683
- classNames: "grid grid-cols-1 auto-rows-[--rail-action] p-1 gap-1 !overflow-y-auto"
684
- }, companions.map((companion) => /* @__PURE__ */ React7.createElement(Tabs.Tab, {
685
- key: getCompanionId(companion.id),
686
- value: getCompanionId(companion.id),
687
- asChild: true
688
- }, /* @__PURE__ */ React7.createElement(IconButton4, {
689
- label: toLocalizedString2(companion.properties.label, t),
690
- icon: companion.properties.icon,
691
- size: 5,
692
- iconOnly: true,
693
- tooltipSide: "left",
694
- "data-value": getCompanionId(companion.id),
695
- variant: activeId === getCompanionId(companion.id) ? layout.complementarySidebarState === "expanded" ? "primary" : "default" : "ghost",
696
- onClick: handleTabClick
697
- })))), !hoistStatusbar && /* @__PURE__ */ React7.createElement("div", {
698
- role: "none",
699
- className: "grid grid-cols-1 auto-rows-[--rail-item] p-1 overflow-y-auto"
700
- }, /* @__PURE__ */ React7.createElement(Surface3, {
701
- role: "status-bar--r0-footer",
702
- limit: 1
703
- })), /* @__PURE__ */ React7.createElement("div", {
704
- role: "none",
705
- className: "hidden lg:grid grid-cols-1 auto-rows-[--rail-action] p-1"
706
- }, /* @__PURE__ */ React7.createElement(ToggleComplementarySidebarButton, null))), activeId && companions.map((companion) => /* @__PURE__ */ React7.createElement(Tabs.Tabpanel, {
707
- key: getCompanionId(companion.id),
708
- value: getCompanionId(companion.id),
709
- classNames: 'absolute data-[state="inactive"]:-z-[1] inset-block-0 inline-start-0 is-[calc(100%-var(--r0-size))] lg:is-[--r1-size] grid grid-cols-1 grid-rows-[var(--rail-size)_1fr_min-content] pbs-[env(safe-area-inset-top)]',
710
- ...layout.complementarySidebarState !== "expanded" && {
711
- inert: "true"
712
- }
713
- }, /* @__PURE__ */ React7.createElement(ComplementarySidebarPanel, {
714
- companion,
715
- activeId,
716
- data,
717
- hoistStatusbar
718
- })))));
719
- };
720
- var ScrollArea = ({ children }) => {
721
- return /* @__PURE__ */ React7.createElement("div", {
722
- className: "flex flex-col grow overflow-x-hidden overflow-y-auto scrollbar-thin"
723
- }, children);
724
- };
725
- var ComplementarySidebarPanel = ({ companion, activeId, data, hoistStatusbar }) => {
726
- const { t } = useTranslation5(DECK_PLUGIN);
727
- if (getCompanionId(companion.id) !== activeId && !data) {
728
- return null;
729
- }
730
- const Wrapper = companion.properties.fixed ? Fragment2 : ScrollArea;
731
- return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement("h2", {
732
- className: "flex items-center pli-2 border-separator border-be font-medium"
733
- }, toLocalizedString2(companion.properties.label, t)), /* @__PURE__ */ React7.createElement(Wrapper, null, /* @__PURE__ */ React7.createElement(Surface3, {
734
- role: `deck-companion--${getCompanionId(companion.id)}`,
735
- data,
736
- fallback: PlankContentError,
737
- placeholder: /* @__PURE__ */ React7.createElement(PlankLoading, null)
738
- })), !hoistStatusbar && /* @__PURE__ */ React7.createElement("div", {
739
- role: "contentinfo",
740
- className: "flex flex-wrap justify-center items-center border-bs border-separator pbs-1 pbe-[max(env(safe-area-inset-bottom),0.25rem)]"
741
- }, /* @__PURE__ */ React7.createElement(Surface3, {
742
- role: "status-bar--r1-footer",
743
- limit: 1
744
- })));
745
- };
746
-
747
- // packages/plugins/plugin-deck/src/components/Sidebar/Sidebar.tsx
748
- import React8, { useMemo as useMemo4 } from "react";
749
- import { Surface as Surface4, useCapability as useCapability4 } from "@dxos/app-framework";
750
- import { Main as Main2 } from "@dxos/react-ui";
751
- var label2 = [
752
- "sidebar title",
753
- {
754
- ns: DECK_PLUGIN
755
- }
756
- ];
757
- var Sidebar = () => {
758
- const { popoverAnchorId, activeDeck: current, deck } = useCapability4(DeckCapabilities.DeckState);
759
- const breakpoint = useBreakpoints();
760
- const layoutMode = getMode(deck);
761
- const topbar = layoutAppliesTopbar(breakpoint, layoutMode);
762
- const hoistStatusbar = useHoistStatusbar(breakpoint, layoutMode);
763
- const navigationData = useMemo4(() => ({
764
- popoverAnchorId,
765
- topbar,
766
- hoistStatusbar,
767
- current
768
- }), [
769
- popoverAnchorId,
770
- topbar,
771
- hoistStatusbar,
772
- current
773
- ]);
774
- return /* @__PURE__ */ React8.createElement(Main2.NavigationSidebar, {
775
- label: label2,
776
- classNames: [
777
- "grid",
778
- topbar && "block-start-[calc(env(safe-area-inset-top)+var(--rail-size))]",
779
- hoistStatusbar && "block-end-[--statusbar-size]"
780
- ]
781
- }, /* @__PURE__ */ React8.createElement(Surface4, {
782
- role: "navigation",
783
- data: navigationData,
784
- limit: 1
785
- }));
786
- };
787
-
788
- // packages/plugins/plugin-deck/src/components/DeckLayout/Banner.tsx
789
- var Banner = ({ variant, classNames }) => {
790
- const { t } = useTranslation6(DECK_PLUGIN);
791
- return /* @__PURE__ */ React9.createElement("header", {
792
- className: mx4("flex items-stretch relative plb-1 pis-1 pie-2", variant === "topbar" && "fixed inset-inline-0 block-start-[env(safe-area-inset-top)] bs-[--rail-size] border-be border-separator", classNames)
793
- }, variant === "sidebar" ? /* @__PURE__ */ React9.createElement(CloseSidebarButton, null) : /* @__PURE__ */ React9.createElement(ToggleSidebarButton, null), /* @__PURE__ */ React9.createElement("span", {
794
- className: "self-center grow mis-1"
795
- }, t("current app name", {
796
- ns: "appkit"
797
- })), variant === "topbar" && /* @__PURE__ */ React9.createElement("div", {
798
- role: "none",
799
- className: "absolute inset-0 pointer-events-none"
800
- }, /* @__PURE__ */ React9.createElement("div", {
801
- role: "none",
802
- className: "grid bs-full pointer-fine:p-1 max-is-md mli-auto pointer-events-auto"
803
- }, /* @__PURE__ */ React9.createElement(Surface5, {
804
- role: "search-input",
805
- limit: 1
806
- }))), /* @__PURE__ */ React9.createElement("span", {
807
- role: "none",
808
- className: "grow"
809
- }), /* @__PURE__ */ React9.createElement(Surface5, {
810
- role: "header-end",
811
- limit: 1
812
- }), /* @__PURE__ */ React9.createElement(Surface5, {
813
- role: "notch-start",
814
- limit: 1
815
- }));
816
- };
817
-
818
- // packages/plugins/plugin-deck/src/components/DeckLayout/DeckLayout.tsx
819
- import { untracked } from "@preact/signals-core";
820
- import React17, { useCallback as useCallback7, useEffect as useEffect5, useMemo as useMemo6, useRef as useRef3, Fragment as Fragment3 } from "react";
821
- import { Capabilities, LayoutAction as LayoutAction5, createIntent as createIntent6, useCapability as useCapability8, useIntentDispatcher as useIntentDispatcher6, usePluginManager } from "@dxos/app-framework";
822
- import { AttentionCapabilities } from "@dxos/plugin-attention";
823
- import { Main as Main3, useMediaQuery, useOnTransition } from "@dxos/react-ui";
824
- import { Stack, StackContext, DEFAULT_HORIZONTAL_SIZE } from "@dxos/react-ui-stack";
825
- import { mainPaddingTransitions } from "@dxos/react-ui-theme";
826
-
827
- // packages/plugins/plugin-deck/src/components/DeckLayout/ActiveNode.tsx
828
- import React10 from "react";
829
- import { Surface as Surface6, useAppGraph as useAppGraph3 } from "@dxos/app-framework";
830
- import { useNode as useNode2 } from "@dxos/plugin-graph";
831
- import { useAttended } from "@dxos/react-ui-attention";
832
- var ActiveNode = () => {
833
- const [id] = useAttended();
834
- const { graph } = useAppGraph3();
835
- const activeNode = useNode2(graph, id);
836
- useNodeActionExpander(activeNode);
837
- return /* @__PURE__ */ React10.createElement("div", {
838
- role: "none",
839
- className: "sr-only"
840
- }, /* @__PURE__ */ React10.createElement(Surface6, {
841
- role: "document-title",
842
- data: {
843
- subject: activeNode
844
- },
845
- limit: 1
846
- }));
847
- };
848
-
849
- // packages/plugins/plugin-deck/src/components/DeckLayout/ContentEmpty.tsx
850
- import React11 from "react";
851
- import { Surface as Surface7, useCapability as useCapability5 } from "@dxos/app-framework";
852
- var ContentEmpty = () => {
853
- const breakpoint = useBreakpoints();
854
- const { deck } = useCapability5(DeckCapabilities.MutableDeckState);
855
- const layoutMode = getMode(deck);
856
- const topbar = layoutAppliesTopbar(breakpoint, layoutMode);
857
- return /* @__PURE__ */ React11.createElement("div", {
858
- role: "none",
859
- className: "grid place-items-center p-8 relative bg-deckSurface",
860
- "data-testid": "layoutPlugin.firstRunMessage"
861
- }, /* @__PURE__ */ React11.createElement(Surface7, {
862
- role: "keyshortcuts"
863
- }), !topbar && /* @__PURE__ */ React11.createElement(ToggleSidebarButton, {
864
- variant: "default",
865
- classNames: fixedSidebarToggleStyles
866
- }));
867
- };
868
-
869
- // packages/plugins/plugin-deck/src/components/DeckLayout/Dialog.tsx
870
- import React12 from "react";
871
- import { Surface as Surface8, useCapability as useCapability6 } from "@dxos/app-framework";
872
- import { AlertDialog, Dialog as NaturalDialog } from "@dxos/react-ui";
873
- var Dialog = () => {
874
- const context = useCapability6(DeckCapabilities.MutableDeckState);
875
- const { dialogType, dialogBlockAlign, dialogContent, dialogOpen } = context;
876
- const Root = dialogType === "alert" ? AlertDialog.Root : NaturalDialog.Root;
877
- const Overlay = dialogType === "alert" ? AlertDialog.Overlay : NaturalDialog.Overlay;
878
- return /* @__PURE__ */ React12.createElement(Root, {
879
- modal: dialogBlockAlign !== "end",
880
- open: dialogOpen,
881
- onOpenChange: (nextOpen) => context.dialogOpen = nextOpen
882
- }, dialogBlockAlign === "end" ? (
883
- // TODO(burdon): Placeholder creates a suspense boundary; replace with defaults.
884
- /* @__PURE__ */ React12.createElement(Surface8, {
885
- role: "dialog",
886
- data: dialogContent,
887
- limit: 1,
888
- fallback: PlankContentError,
889
- placeholder: /* @__PURE__ */ React12.createElement("div", null)
890
- })
891
- ) : /* @__PURE__ */ React12.createElement(Overlay, {
892
- blockAlign: dialogBlockAlign
893
- }, /* @__PURE__ */ React12.createElement(Surface8, {
894
- role: "dialog",
895
- data: dialogContent,
896
- limit: 1,
897
- fallback: PlankContentError
898
- })));
899
- };
900
-
901
- // packages/plugins/plugin-deck/src/components/DeckLayout/Popover.tsx
902
- import { createContext } from "@radix-ui/react-context";
903
- import React13, { useCallback as useCallback6, useEffect as useEffect4, useMemo as useMemo5, useRef as useRef2, useState as useState3 } from "react";
904
- import { Surface as Surface9, useCapability as useCapability7 } from "@dxos/app-framework";
905
- import { Popover as Popover2 } from "@dxos/react-ui";
906
- var DEBOUNCE_DELAY = 40;
907
- var [DeckPopoverProvider, useDeckPopoverContext] = createContext("DeckPopover");
908
- var PopoverRoot = ({ children }) => {
909
- const layout = useCapability7(DeckCapabilities.MutableDeckState);
910
- const virtualRef = useRef2(null);
911
- const [virtualIter, setVirtualIter] = useState3(0);
912
- const [open, setOpen] = useState3(false);
913
- const debounceRef = useRef2(null);
914
- useEffect4(() => {
915
- setOpen(false);
916
- if (layout.popoverOpen) {
917
- if (debounceRef.current) {
918
- clearTimeout(debounceRef.current);
919
- }
920
- if (layout.popoverAnchor && virtualRef.current !== layout.popoverAnchor) {
921
- virtualRef.current = layout.popoverAnchor ?? null;
922
- setVirtualIter((iter) => iter + 1);
923
- }
924
- debounceRef.current = setTimeout(() => setOpen(true), DEBOUNCE_DELAY);
925
- }
926
- }, [
927
- layout.popoverOpen,
928
- layout.popoverAnchorId,
929
- layout.popoverAnchor,
930
- layout.popoverContent
931
- ]);
932
- return /* @__PURE__ */ React13.createElement(DeckPopoverProvider, {
933
- setOpen
934
- }, /* @__PURE__ */ React13.createElement(Popover2.Root, {
935
- modal: false,
936
- open
937
- }, layout.popoverAnchor && /* @__PURE__ */ React13.createElement(Popover2.VirtualTrigger, {
938
- key: virtualIter,
939
- virtualRef
940
- }), children));
941
- };
942
- var PopoverContent = () => {
943
- const layout = useCapability7(DeckCapabilities.MutableDeckState);
944
- const { setOpen } = useDeckPopoverContext("PopoverContent");
945
- const handleClose = useCallback6((event) => {
946
- if (
947
- // TODO(thure): CodeMirror should not focus itself when it updates.
948
- event.type === "dismissableLayer.focusOutside" && event.currentTarget?.classList.contains("cm-content")
949
- ) {
950
- event.preventDefault();
951
- } else {
952
- setOpen(false);
953
- layout.popoverOpen = false;
954
- layout.popoverAnchor = void 0;
955
- layout.popoverAnchorId = void 0;
956
- layout.popoverSide = void 0;
957
- }
958
- }, [
959
- setOpen
960
- ]);
961
- const collisionBoundaries = useMemo5(() => {
962
- const closest = layout.popoverAnchor?.closest("[data-popover-collision-boundary]");
963
- return closest ? [
964
- closest
965
- ] : [];
966
- }, [
967
- layout.popoverAnchor
968
- ]);
969
- return /* @__PURE__ */ React13.createElement(Popover2.Portal, null, /* @__PURE__ */ React13.createElement(Popover2.Content, {
970
- side: layout.popoverSide,
971
- onInteractOutside: handleClose,
972
- onEscapeKeyDown: handleClose,
973
- collisionBoundary: collisionBoundaries,
974
- sticky: "always",
975
- hideWhenDetached: true
976
- }, /* @__PURE__ */ React13.createElement(Popover2.Viewport, null, /* @__PURE__ */ React13.createElement(Surface9, {
977
- role: "popover",
978
- data: layout.popoverContent,
979
- limit: 1
980
- })), /* @__PURE__ */ React13.createElement(Popover2.Arrow, null)));
981
- };
982
-
983
- // packages/plugins/plugin-deck/src/components/DeckLayout/StatusBar.tsx
984
- import React14 from "react";
985
- import { Surface as Surface10 } from "@dxos/app-framework";
986
- import { useLandmarkMover } from "@dxos/react-ui";
987
- var StatusBar = ({ showHints }) => {
988
- const mover = useLandmarkMover(void 0, "3");
989
- return /* @__PURE__ */ React14.createElement("div", {
990
- role: "contentinfo",
991
- className: "fixed block-end-0 inset-inline-0 bs-[--statusbar-size] border-bs border-separator z-[2] flex text-description",
992
- ...mover
993
- }, showHints && /* @__PURE__ */ React14.createElement(Surface10, {
994
- role: "hints",
995
- limit: 1
996
- }), /* @__PURE__ */ React14.createElement(Surface10, {
997
- role: "status-bar",
998
- limit: 1
999
- }));
1000
- };
1001
-
1002
- // packages/plugins/plugin-deck/src/components/DeckLayout/Toast.tsx
1003
- import React15 from "react";
1004
- import { Button, Icon as Icon2, Toast as NaturalToast, toLocalizedString as toLocalizedString3, useTranslation as useTranslation7 } from "@dxos/react-ui";
1005
- var Toast = ({ id, title, description, icon, duration, actionLabel, actionAlt, closeLabel, onAction, onOpenChange }) => {
1006
- const { t } = useTranslation7(DECK_PLUGIN);
1007
- return /* @__PURE__ */ React15.createElement(NaturalToast.Root, {
1008
- "data-testid": id,
1009
- defaultOpen: true,
1010
- duration,
1011
- onOpenChange
1012
- }, /* @__PURE__ */ React15.createElement(NaturalToast.Body, null, /* @__PURE__ */ React15.createElement(NaturalToast.Title, {
1013
- classNames: "items-center"
1014
- }, icon && /* @__PURE__ */ React15.createElement(Icon2, {
1015
- icon,
1016
- size: 5,
1017
- classNames: "inline mr-1"
1018
- }), title && /* @__PURE__ */ React15.createElement("span", null, toLocalizedString3(title, t))), description && /* @__PURE__ */ React15.createElement(NaturalToast.Description, null, description && toLocalizedString3(description, t))), /* @__PURE__ */ React15.createElement(NaturalToast.Actions, null, onAction && actionAlt && actionLabel && /* @__PURE__ */ React15.createElement(NaturalToast.Action, {
1019
- altText: toLocalizedString3(actionAlt, t),
1020
- asChild: true
1021
- }, /* @__PURE__ */ React15.createElement(Button, {
1022
- "data-testid": "toast.action",
1023
- variant: "primary",
1024
- onClick: () => onAction?.()
1025
- }, toLocalizedString3(actionLabel, t))), closeLabel && /* @__PURE__ */ React15.createElement(NaturalToast.Close, {
1026
- asChild: true
1027
- }, /* @__PURE__ */ React15.createElement(Button, {
1028
- "data-testid": "toast.close"
1029
- }, toLocalizedString3(closeLabel, t)))));
1030
- };
1031
-
1032
- // packages/plugins/plugin-deck/src/components/DeckLayout/Topbar.tsx
1033
- import React16 from "react";
1034
- var Topbar = () => {
1035
- return /* @__PURE__ */ React16.createElement(Banner, {
1036
- variant: "topbar"
1037
- });
1038
- };
1039
-
1040
- // packages/plugins/plugin-deck/src/components/DeckLayout/DeckLayout.tsx
1041
- var PlankSeparator = ({ order }) => order > 0 ? /* @__PURE__ */ React17.createElement("span", {
1042
- role: "separator",
1043
- className: "row-span-2 bg-deckSurface is-4",
1044
- style: {
1045
- gridColumn: order
1046
- }
1047
- }) : null;
1048
- var DeckLayout = ({ onDismissToast }) => {
1049
- const { dispatchPromise: dispatch } = useIntentDispatcher6();
1050
- const settings = useCapability8(Capabilities.SettingsStore).getStore(DECK_PLUGIN).value;
1051
- const context = useCapability8(DeckCapabilities.MutableDeckState);
1052
- const { sidebarState, complementarySidebarState, complementarySidebarPanel, deck, toasts } = context;
1053
- const { active, activeCompanions, fullscreen, solo, plankSizing } = deck;
1054
- const breakpoint = useBreakpoints();
1055
- const layoutMode = getMode(deck);
1056
- const topbar = layoutAppliesTopbar(breakpoint, layoutMode);
1057
- const hoistStatusbar = useHoistStatusbar(breakpoint, layoutMode);
1058
- const pluginManager = usePluginManager();
1059
- const scrollLeftRef = useRef3();
1060
- const deckRef = useRef3(null);
1061
- useEffect5(() => {
1062
- const attended = untracked(() => {
1063
- const attention = pluginManager.context.getCapability(AttentionCapabilities.Attention);
1064
- return attention.current;
1065
- });
1066
- const firstId = solo ?? active[0];
1067
- if (attended.length === 0 && firstId) {
1068
- document.querySelector(`article[data-attendable-id="${firstId}"] button`)?.focus();
1069
- }
1070
- }, []);
1071
- const [isNotMobile] = useMediaQuery("md", {
1072
- ssr: false
1073
- });
1074
- const shouldRevert = useRef3(false);
1075
- useEffect5(() => {
1076
- if (!isNotMobile && getMode(deck) === "deck") {
1077
- const attended = untracked(() => {
1078
- const attention = pluginManager.context.getCapability(AttentionCapabilities.Attention);
1079
- return attention.current;
1080
- });
1081
- shouldRevert.current = true;
1082
- void dispatch(createIntent6(LayoutAction5.SetLayoutMode, {
1083
- part: "mode",
1084
- subject: attended[0],
1085
- options: {
1086
- mode: "solo"
1087
- }
1088
- }));
1089
- } else if (isNotMobile && getMode(deck) === "solo" && shouldRevert.current) {
1090
- void dispatch(createIntent6(LayoutAction5.SetLayoutMode, {
1091
- part: "mode",
1092
- options: {
1093
- revert: true
1094
- }
1095
- }));
1096
- }
1097
- }, [
1098
- isNotMobile,
1099
- deck,
1100
- dispatch
1101
- ]);
1102
- useEffect5(() => {
1103
- if (!settings.enableDeck && layoutMode === "deck") {
1104
- void dispatch(createIntent6(LayoutAction5.SetLayoutMode, {
1105
- part: "mode",
1106
- subject: active[0],
1107
- options: {
1108
- mode: "solo"
1109
- }
1110
- }));
1111
- }
1112
- }, [
1113
- settings.enableDeck,
1114
- dispatch,
1115
- active,
1116
- layoutMode
1117
- ]);
1118
- const handleResize = useCallback7(() => {
1119
- scrollLeftRef.current = null;
1120
- }, []);
1121
- useEffect5(() => {
1122
- window.addEventListener("resize", handleResize);
1123
- return () => window.removeEventListener("resize", handleResize);
1124
- }, [
1125
- handleResize
1126
- ]);
1127
- const restoreScroll = useCallback7(() => {
1128
- if (deckRef.current && scrollLeftRef.current != null) {
1129
- deckRef.current.scrollLeft = scrollLeftRef.current;
1130
- }
1131
- }, []);
1132
- useOnTransition(layoutMode, (mode) => mode !== "deck", "deck", restoreScroll);
1133
- const handleScroll = useCallback7((event) => {
1134
- if (!solo && event.currentTarget === event.target) {
1135
- scrollLeftRef.current = event.target.scrollLeft;
1136
- }
1137
- }, [
1138
- solo
1139
- ]);
1140
- const isEmpty = !solo && active.length === 0;
1141
- const padding = useMemo6(() => {
1142
- if (!solo && settings.overscroll === "centering") {
1143
- return calculateOverscroll(active.length);
1144
- }
1145
- return {};
1146
- }, [
1147
- solo,
1148
- settings.overscroll,
1149
- deck
1150
- ]);
1151
- const mainPosition = useMemo6(() => [
1152
- "grid !block-start-[env(safe-area-inset-top)]",
1153
- topbar && "!block-start-[calc(env(safe-area-inset-top)+var(--rail-size))]",
1154
- hoistStatusbar && "lg:block-end-[--statusbar-size]"
1155
- ], [
1156
- topbar,
1157
- hoistStatusbar
1158
- ]);
1159
- const { order, itemsCount } = useMemo6(() => {
1160
- return active.reduce((acc, entryId) => {
1161
- acc.order[entryId] = acc.itemsCount + 1;
1162
- acc.itemsCount += activeCompanions?.[entryId] ? 3 : 2;
1163
- return acc;
1164
- }, {
1165
- order: {},
1166
- itemsCount: 0
1167
- });
1168
- }, [
1169
- active,
1170
- activeCompanions
1171
- ]);
1172
- return /* @__PURE__ */ React17.createElement(PopoverRoot, null, /* @__PURE__ */ React17.createElement(ActiveNode, null), /* @__PURE__ */ React17.createElement(Main3.Root, {
1173
- navigationSidebarState: fullscreen ? "closed" : context.sidebarState,
1174
- onNavigationSidebarStateChange: (next) => context.sidebarState = next,
1175
- complementarySidebarState: fullscreen ? "closed" : context.complementarySidebarState,
1176
- onComplementarySidebarStateChange: (next) => context.complementarySidebarState = next
1177
- }, /* @__PURE__ */ React17.createElement(Sidebar, null), /* @__PURE__ */ React17.createElement(ComplementarySidebar, {
1178
- current: complementarySidebarPanel
1179
- }), /* @__PURE__ */ React17.createElement(Main3.Overlay, null), isEmpty && /* @__PURE__ */ React17.createElement(Main3.Content, {
1180
- bounce: true,
1181
- handlesFocus: true,
1182
- classNames: mainPosition
1183
- }, /* @__PURE__ */ React17.createElement(ContentEmpty, null)), !isEmpty && /* @__PURE__ */ React17.createElement(Main3.Content, {
1184
- bounce: true,
1185
- handlesFocus: true,
1186
- classNames: mainPosition,
1187
- style: {
1188
- "--dx-main-sidebarWidth": sidebarState === "expanded" ? "var(--nav-sidebar-size)" : sidebarState === "collapsed" ? "var(--l0-size)" : "0",
1189
- "--dx-main-complementaryWidth": complementarySidebarState === "expanded" ? "var(--complementary-sidebar-size)" : complementarySidebarState === "collapsed" ? "var(--rail-size)" : "0",
1190
- "--dx-main-contentFirstWidth": `${plankSizing[active[0] ?? "never"] ?? DEFAULT_HORIZONTAL_SIZE}rem`,
1191
- "--dx-main-contentLastWidth": `${plankSizing[active[(active.length ?? 1) - 1] ?? "never"] ?? DEFAULT_HORIZONTAL_SIZE}rem`
1192
- }
1193
- }, /* @__PURE__ */ React17.createElement("div", {
1194
- role: "none",
1195
- className: !solo ? "relative bg-deckSurface overflow-hidden" : "sr-only",
1196
- ...solo && {
1197
- inert: ""
1198
- }
1199
- }, !topbar && !fullscreen && /* @__PURE__ */ React17.createElement(ToggleSidebarButton, {
1200
- classNames: fixedSidebarToggleStyles
1201
- }), !topbar && !fullscreen && /* @__PURE__ */ React17.createElement(ToggleComplementarySidebarButton, {
1202
- classNames: fixedComplementarySidebarToggleStyles
1203
- }), /* @__PURE__ */ React17.createElement(Stack, {
1204
- ref: deckRef,
1205
- orientation: "horizontal",
1206
- size: "contain",
1207
- classNames: [
1208
- "absolute inset-block-0 -inset-inline-px",
1209
- mainPaddingTransitions
1210
- ],
1211
- itemsCount: itemsCount - 1,
1212
- style: padding,
1213
- onScroll: handleScroll
1214
- }, active.map((entryId) => /* @__PURE__ */ React17.createElement(Fragment3, {
1215
- key: entryId
1216
- }, /* @__PURE__ */ React17.createElement(PlankSeparator, {
1217
- order: order[entryId] - 1
1218
- }), /* @__PURE__ */ React17.createElement(Plank, {
1219
- id: entryId,
1220
- companionId: activeCompanions?.[entryId],
1221
- part: "deck",
1222
- order: order[entryId],
1223
- active,
1224
- layoutMode,
1225
- settings
1226
- }))))), /* @__PURE__ */ React17.createElement("div", {
1227
- role: "none",
1228
- className: solo ? "relative bg-deckSurface overflow-hidden" : "sr-only",
1229
- ...!solo && {
1230
- inert: ""
1231
- }
1232
- }, !topbar && !fullscreen && /* @__PURE__ */ React17.createElement(ToggleSidebarButton, {
1233
- classNames: fixedSidebarToggleStyles
1234
- }), !topbar && !fullscreen && /* @__PURE__ */ React17.createElement(ToggleComplementarySidebarButton, {
1235
- classNames: fixedComplementarySidebarToggleStyles
1236
- }), /* @__PURE__ */ React17.createElement(StackContext.Provider, {
1237
- value: {
1238
- size: "contain",
1239
- orientation: "horizontal",
1240
- rail: true
1241
- }
1242
- }, /* @__PURE__ */ React17.createElement(Plank, {
1243
- id: solo,
1244
- companionId: solo ? activeCompanions?.[solo] : void 0,
1245
- part: "solo",
1246
- layoutMode,
1247
- settings
1248
- })))), topbar && /* @__PURE__ */ React17.createElement(Topbar, null), hoistStatusbar && /* @__PURE__ */ React17.createElement(StatusBar, {
1249
- showHints: settings.showHints
1250
- })), /* @__PURE__ */ React17.createElement(PopoverContent, null), /* @__PURE__ */ React17.createElement(Dialog, null), toasts?.map((toast) => /* @__PURE__ */ React17.createElement(Toast, {
1251
- ...toast,
1252
- key: toast.id,
1253
- onOpenChange: (open) => {
1254
- if (!open) {
1255
- onDismissToast(toast.id);
1256
- }
1257
- return open;
1258
- }
1259
- })));
1260
- };
1261
-
1262
- // packages/plugins/plugin-deck/src/components/DeckSettings/DeckSettings.tsx
1263
- import React18 from "react";
1264
- import { Input, Select, useTranslation as useTranslation8 } from "@dxos/react-ui";
1265
- import { DeprecatedFormContainer, DeprecatedFormInput } from "@dxos/react-ui-form";
1266
- var isSocket = !!globalThis.__args;
1267
- var DeckSettings = ({ settings }) => {
1268
- const { t } = useTranslation8(DECK_PLUGIN);
1269
- return /* @__PURE__ */ React18.createElement(DeprecatedFormContainer, null, /* @__PURE__ */ React18.createElement(DeprecatedFormInput, {
1270
- label: t("settings enable deck label")
1271
- }, /* @__PURE__ */ React18.createElement(Input.Switch, {
1272
- checked: settings.enableDeck,
1273
- onCheckedChange: (checked) => settings.enableDeck = checked
1274
- })), /* @__PURE__ */ React18.createElement(DeprecatedFormInput, {
1275
- label: t("select new plank positioning label")
1276
- }, /* @__PURE__ */ React18.createElement(Select.Root, {
1277
- disabled: !settings.enableDeck,
1278
- value: settings.newPlankPositioning ?? "start",
1279
- onValueChange: (value) => settings.newPlankPositioning = value
1280
- }, /* @__PURE__ */ React18.createElement(Select.TriggerButton, {
1281
- placeholder: t("select new plank positioning placeholder")
1282
- }), /* @__PURE__ */ React18.createElement(Select.Portal, null, /* @__PURE__ */ React18.createElement(Select.Content, null, /* @__PURE__ */ React18.createElement(Select.Viewport, null, NewPlankPositions.map((position) => /* @__PURE__ */ React18.createElement(Select.Option, {
1283
- key: position,
1284
- value: position
1285
- }, t(`settings new plank position ${position} label`)))))))), /* @__PURE__ */ React18.createElement(DeprecatedFormInput, {
1286
- label: t("settings overscroll label")
1287
- }, /* @__PURE__ */ React18.createElement(Select.Root, {
1288
- disabled: !settings.enableDeck,
1289
- value: settings.overscroll ?? "none",
1290
- onValueChange: (value) => settings.overscroll = value
1291
- }, /* @__PURE__ */ React18.createElement(Select.TriggerButton, {
1292
- placeholder: t("select overscroll placeholder")
1293
- }), /* @__PURE__ */ React18.createElement(Select.Portal, null, /* @__PURE__ */ React18.createElement(Select.Content, null, /* @__PURE__ */ React18.createElement(Select.Viewport, null, OverscrollOptions.map((option) => /* @__PURE__ */ React18.createElement(Select.Option, {
1294
- key: option,
1295
- value: option
1296
- }, t(`settings overscroll ${option} label`)))))))), /* @__PURE__ */ React18.createElement(DeprecatedFormInput, {
1297
- label: t("settings enable statusbar label")
1298
- }, /* @__PURE__ */ React18.createElement(Input.Switch, {
1299
- checked: settings.enableStatusbar,
1300
- onCheckedChange: (checked) => settings.enableStatusbar = checked
1301
- })), /* @__PURE__ */ React18.createElement(DeprecatedFormInput, {
1302
- label: t("settings show hints label")
1303
- }, /* @__PURE__ */ React18.createElement(Input.Switch, {
1304
- checked: settings.showHints,
1305
- onCheckedChange: (checked) => settings.showHints = checked
1306
- })), !isSocket && /* @__PURE__ */ React18.createElement(DeprecatedFormInput, {
1307
- label: t("settings native redirect label")
1308
- }, /* @__PURE__ */ React18.createElement(Input.Switch, {
1309
- checked: settings.enableNativeRedirect,
1310
- onCheckedChange: (checked) => settings.enableNativeRedirect = checked
1311
- })));
1312
- };
1313
-
1314
- export {
1315
- Banner,
1316
- DeckLayout,
1317
- DeckSettings
1318
- };
1319
- //# sourceMappingURL=chunk-KIGMELV2.mjs.map