@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.
- package/dist/lib/browser/{app-graph-builder-R7COZ4A6.mjs → app-graph-builder-M5BT34YG.mjs} +2 -2
- package/dist/lib/browser/{chunk-OF5RIATN.mjs → chunk-FX44YX3G.mjs} +3 -3
- package/dist/lib/browser/chunk-JE2ARGEB.mjs +1487 -0
- package/dist/lib/browser/chunk-JE2ARGEB.mjs.map +7 -0
- package/dist/lib/browser/{chunk-XMCG42ID.mjs → chunk-KLN73CM3.mjs} +2 -2
- package/dist/lib/browser/{chunk-XMCG42ID.mjs.map → chunk-KLN73CM3.mjs.map} +1 -1
- package/dist/lib/browser/{chunk-3O2UZVBA.mjs → chunk-SLQNOATN.mjs} +27 -21
- package/dist/lib/browser/{chunk-3O2UZVBA.mjs.map → chunk-SLQNOATN.mjs.map} +2 -2
- package/dist/lib/browser/{chunk-JAYQ5BTF.mjs → chunk-YN5OZEGS.mjs} +8 -3
- package/dist/lib/browser/chunk-YN5OZEGS.mjs.map +7 -0
- package/dist/lib/browser/index.mjs +5 -6
- package/dist/lib/browser/index.mjs.map +2 -2
- package/dist/lib/browser/{intent-resolver-MAKOS57L.mjs → intent-resolver-3GAC57UA.mjs} +10 -8
- package/dist/lib/browser/intent-resolver-3GAC57UA.mjs.map +7 -0
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/browser/{react-root-DGQVIHXP.mjs → react-root-ISFFOJZX.mjs} +6 -6
- package/dist/lib/browser/{react-surface-PXBXIOPU.mjs → react-surface-A63RQB5N.mjs} +6 -6
- package/dist/lib/browser/{settings-UBWJF7J7.mjs → settings-X7GDEXU3.mjs} +2 -2
- package/dist/lib/browser/state-VJ6E3ADY.mjs +10 -0
- package/dist/lib/browser/{tools-IVPIPTVA.mjs → tools-N57NQ2LH.mjs} +24 -14
- package/dist/lib/browser/tools-N57NQ2LH.mjs.map +7 -0
- package/dist/lib/browser/types.mjs +1 -1
- package/dist/lib/browser/{url-handler-JSYGSVSB.mjs → url-handler-BUGI6XRE.mjs} +3 -3
- package/dist/types/src/capabilities/capabilities.d.ts +10 -2
- package/dist/types/src/capabilities/capabilities.d.ts.map +1 -1
- package/dist/types/src/capabilities/index.d.ts +1 -1
- package/dist/types/src/capabilities/index.d.ts.map +1 -1
- package/dist/types/src/capabilities/intent-resolver.d.ts.map +1 -1
- package/dist/types/src/capabilities/state.d.ts +5 -1
- package/dist/types/src/capabilities/state.d.ts.map +1 -1
- package/dist/types/src/capabilities/tools.d.ts +1 -1
- package/dist/types/src/capabilities/tools.d.ts.map +1 -1
- package/dist/types/src/components/Plank/PlankHeading.d.ts.map +1 -1
- package/dist/types/src/components/Sidebar/SidebarButton.d.ts.map +1 -1
- package/dist/types/src/translations.d.ts +0 -1
- package/dist/types/src/translations.d.ts.map +1 -1
- package/dist/types/src/types.d.ts +3 -1
- package/dist/types/src/types.d.ts.map +1 -1
- package/package.json +32 -30
- package/src/capabilities/intent-resolver.ts +7 -3
- package/src/capabilities/tools.ts +11 -9
- package/src/components/DeckLayout/Dialog.tsx +2 -2
- package/src/components/Plank/Plank.tsx +1 -1
- package/src/components/Plank/PlankHeading.tsx +5 -3
- package/src/components/Sidebar/ComplementarySidebar.tsx +3 -3
- package/src/components/Sidebar/SidebarButton.tsx +1 -5
- package/src/hooks/useNodeActionExpander.ts +1 -1
- package/src/translations.ts +0 -1
- package/src/types.ts +3 -1
- package/dist/lib/browser/chunk-JAYQ5BTF.mjs.map +0 -7
- package/dist/lib/browser/chunk-KIGMELV2.mjs +0 -1319
- package/dist/lib/browser/chunk-KIGMELV2.mjs.map +0 -7
- package/dist/lib/browser/intent-resolver-MAKOS57L.mjs.map +0 -7
- package/dist/lib/browser/state-4WFB4SDO.mjs +0 -10
- package/dist/lib/browser/tools-IVPIPTVA.mjs.map +0 -7
- /package/dist/lib/browser/{app-graph-builder-R7COZ4A6.mjs.map → app-graph-builder-M5BT34YG.mjs.map} +0 -0
- /package/dist/lib/browser/{chunk-OF5RIATN.mjs.map → chunk-FX44YX3G.mjs.map} +0 -0
- /package/dist/lib/browser/{react-root-DGQVIHXP.mjs.map → react-root-ISFFOJZX.mjs.map} +0 -0
- /package/dist/lib/browser/{react-surface-PXBXIOPU.mjs.map → react-surface-A63RQB5N.mjs.map} +0 -0
- /package/dist/lib/browser/{settings-UBWJF7J7.mjs.map → settings-X7GDEXU3.mjs.map} +0 -0
- /package/dist/lib/browser/{state-4WFB4SDO.mjs.map → state-VJ6E3ADY.mjs.map} +0 -0
- /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
|