@dxos/plugin-deck 0.8.1-staging.5be625a → 0.8.1-staging.9eaf14f
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-K4KVSHNT.mjs → app-graph-builder-VYZ4IWI3.mjs} +3 -3
- package/dist/lib/browser/{check-app-scheme-6SS6I3RN.mjs → check-app-scheme-SEYECDHI.mjs} +2 -2
- package/dist/lib/browser/{chunk-RZLH5F56.mjs → chunk-6ZSOFCPP.mjs} +26 -6
- package/dist/lib/browser/chunk-6ZSOFCPP.mjs.map +7 -0
- package/dist/lib/browser/chunk-B4LOJUWW.mjs +24 -0
- package/dist/lib/browser/{chunk-MWUT66KV.mjs → chunk-FJBMNSUC.mjs} +547 -493
- package/dist/lib/browser/chunk-FJBMNSUC.mjs.map +7 -0
- package/dist/lib/browser/chunk-FLOVGNYB.mjs +81 -0
- package/dist/lib/browser/chunk-FLOVGNYB.mjs.map +7 -0
- package/dist/lib/browser/{chunk-2WTHB3TG.mjs → chunk-NSATFAEE.mjs} +3 -3
- package/dist/lib/browser/{chunk-2WTHB3TG.mjs.map → chunk-NSATFAEE.mjs.map} +1 -1
- package/dist/lib/browser/{chunk-7X43JKZG.mjs → chunk-RJNCG4ND.mjs} +41 -45
- package/dist/lib/browser/chunk-RJNCG4ND.mjs.map +7 -0
- package/dist/lib/browser/{chunk-WCNPMAR4.mjs → chunk-XMCG42ID.mjs} +2 -3
- package/dist/lib/browser/chunk-XMCG42ID.mjs.map +7 -0
- package/dist/lib/browser/index.mjs +12 -8
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/{intent-resolver-MEBOMCYI.mjs → intent-resolver-UDYKO2QW.mjs} +39 -78
- package/dist/lib/browser/intent-resolver-UDYKO2QW.mjs.map +7 -0
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/browser/{react-root-USUAHDML.mjs → react-root-XLXN2VEW.mjs} +8 -10
- package/dist/lib/browser/react-root-XLXN2VEW.mjs.map +7 -0
- package/dist/lib/browser/{react-surface-TQG4YYES.mjs → react-surface-WNGMZL7I.mjs} +11 -10
- package/dist/lib/browser/react-surface-WNGMZL7I.mjs.map +7 -0
- package/dist/lib/browser/{settings-DYS3FFMN.mjs → settings-HMDGSBGO.mjs} +5 -4
- package/dist/lib/browser/settings-HMDGSBGO.mjs.map +7 -0
- package/dist/lib/browser/{state-DRRCGMU2.mjs → state-7TN26M42.mjs} +4 -4
- package/dist/lib/browser/{state-DRRCGMU2.mjs.map → state-7TN26M42.mjs.map} +2 -2
- package/dist/lib/browser/{tools-NDEUSO4R.mjs → tools-SC6QEN7R.mjs} +3 -3
- package/dist/lib/browser/types.mjs +12 -12
- package/dist/lib/browser/{url-handler-4BCN7AYC.mjs → url-handler-ODG4B6NX.mjs} +4 -4
- package/dist/types/src/DeckPlugin.d.ts.map +1 -1
- package/dist/types/src/capabilities/capabilities.d.ts +10 -12
- package/dist/types/src/capabilities/capabilities.d.ts.map +1 -1
- package/dist/types/src/capabilities/intent-resolver.d.ts.map +1 -1
- package/dist/types/src/capabilities/react-root.d.ts.map +1 -1
- package/dist/types/src/capabilities/react-surface.d.ts.map +1 -1
- package/dist/types/src/capabilities/settings.d.ts.map +1 -1
- package/dist/types/src/capabilities/state.d.ts +5 -5
- package/dist/types/src/components/DeckLayout/ActiveNode.d.ts.map +1 -1
- package/dist/types/src/components/DeckLayout/Banner.d.ts.map +1 -1
- package/dist/types/src/components/DeckLayout/DeckLayout.d.ts +1 -4
- package/dist/types/src/components/DeckLayout/DeckLayout.d.ts.map +1 -1
- package/dist/types/src/components/DeckLayout/Toast.d.ts.map +1 -1
- package/dist/types/src/components/DeckLayout/index.d.ts +1 -0
- package/dist/types/src/components/DeckLayout/index.d.ts.map +1 -1
- package/dist/types/src/components/DeckSettings/DeckSettings.d.ts +6 -0
- package/dist/types/src/components/DeckSettings/DeckSettings.d.ts.map +1 -0
- package/dist/types/src/components/DeckSettings/index.d.ts +2 -0
- package/dist/types/src/components/DeckSettings/index.d.ts.map +1 -0
- package/dist/types/src/components/Plank/Plank.d.ts +14 -0
- package/dist/types/src/components/Plank/Plank.d.ts.map +1 -0
- package/dist/types/src/components/Plank/Plank.stories.d.ts +8 -0
- package/dist/types/src/components/Plank/Plank.stories.d.ts.map +1 -0
- package/dist/types/src/components/{DeckLayout → Plank}/PlankControls.d.ts +2 -0
- package/dist/types/src/components/Plank/PlankControls.d.ts.map +1 -0
- package/dist/types/src/components/{DeckLayout → Plank}/PlankError.d.ts +2 -2
- package/dist/types/src/components/Plank/PlankError.d.ts.map +1 -0
- package/dist/types/src/components/{DeckLayout/NodePlankHeading.d.ts → Plank/PlankHeading.d.ts} +7 -6
- package/dist/types/src/components/Plank/PlankHeading.d.ts.map +1 -0
- package/dist/types/src/components/Plank/PlankLoading.d.ts.map +1 -0
- package/dist/types/src/components/Plank/index.d.ts +6 -0
- package/dist/types/src/components/Plank/index.d.ts.map +1 -0
- package/dist/types/src/components/Sidebar/ComplementarySidebar.d.ts.map +1 -0
- package/dist/types/src/components/Sidebar/Sidebar.d.ts.map +1 -0
- package/dist/types/src/components/Sidebar/SidebarButton.d.ts.map +1 -0
- package/dist/types/src/components/Sidebar/index.d.ts +4 -0
- package/dist/types/src/components/Sidebar/index.d.ts.map +1 -0
- package/dist/types/src/components/index.d.ts +1 -1
- package/dist/types/src/components/index.d.ts.map +1 -1
- package/dist/types/src/events.d.ts +0 -1
- package/dist/types/src/events.d.ts.map +1 -1
- package/dist/types/src/hooks/index.d.ts +0 -1
- package/dist/types/src/hooks/index.d.ts.map +1 -1
- package/dist/types/src/index.d.ts +1 -0
- package/dist/types/src/index.d.ts.map +1 -1
- package/dist/types/src/layout.d.ts +7 -1
- package/dist/types/src/layout.d.ts.map +1 -1
- package/dist/types/src/translations.d.ts +3 -0
- package/dist/types/src/translations.d.ts.map +1 -1
- package/dist/types/src/types.d.ts +31 -60
- package/dist/types/src/types.d.ts.map +1 -1
- package/dist/types/src/util/index.d.ts +1 -0
- package/dist/types/src/util/index.d.ts.map +1 -1
- package/dist/types/src/util/set-active.d.ts +2 -2
- package/dist/types/src/util/set-active.d.ts.map +1 -1
- package/dist/types/src/util/useCompanions.d.ts +8 -0
- package/dist/types/src/util/useCompanions.d.ts.map +1 -0
- package/dist/types/src/util/useHoistStatusbar.d.ts.map +1 -1
- package/package.json +28 -29
- package/src/DeckPlugin.ts +0 -1
- package/src/capabilities/capabilities.ts +3 -4
- package/src/capabilities/intent-resolver.ts +35 -7
- package/src/capabilities/react-root.tsx +1 -9
- package/src/capabilities/react-surface.tsx +3 -4
- package/src/capabilities/settings.ts +7 -2
- package/src/capabilities/state.ts +3 -3
- package/src/components/DeckLayout/ActiveNode.tsx +2 -1
- package/src/components/DeckLayout/Banner.tsx +5 -3
- package/src/components/DeckLayout/ContentEmpty.tsx +1 -1
- package/src/components/DeckLayout/DeckLayout.tsx +27 -16
- package/src/components/DeckLayout/Fullscreen.tsx +1 -1
- package/src/components/DeckLayout/Toast.tsx +1 -1
- package/src/components/DeckLayout/index.ts +2 -0
- package/src/components/{LayoutSettings.tsx → DeckSettings/DeckSettings.tsx} +15 -10
- package/src/components/DeckSettings/index.ts +5 -0
- package/src/components/Plank/Plank.stories.tsx +43 -0
- package/src/components/{DeckLayout → Plank}/Plank.tsx +46 -37
- package/src/components/{DeckLayout → Plank}/PlankControls.tsx +40 -25
- package/src/components/{DeckLayout → Plank}/PlankError.tsx +3 -3
- package/src/components/{DeckLayout/NodePlankHeading.tsx → Plank/PlankHeading.tsx} +98 -59
- package/src/components/Plank/index.ts +9 -0
- package/src/components/{DeckLayout → Sidebar}/ComplementarySidebar.tsx +65 -81
- package/src/components/Sidebar/index.ts +7 -0
- package/src/components/index.ts +1 -1
- package/src/events.ts +0 -1
- package/src/hooks/index.ts +0 -1
- package/src/index.ts +1 -0
- package/src/layout.ts +19 -2
- package/src/meta.ts +2 -2
- package/src/translations.ts +3 -0
- package/src/types.ts +59 -86
- package/src/util/index.ts +1 -0
- package/src/util/set-active.ts +2 -2
- package/src/util/useCompanions.ts +18 -0
- package/src/util/useHoistStatusbar.ts +2 -2
- package/dist/lib/browser/chunk-7X43JKZG.mjs.map +0 -7
- package/dist/lib/browser/chunk-MWUT66KV.mjs.map +0 -7
- package/dist/lib/browser/chunk-NSNAYFAX.mjs +0 -24
- package/dist/lib/browser/chunk-RZLH5F56.mjs.map +0 -7
- package/dist/lib/browser/chunk-WCNPMAR4.mjs.map +0 -7
- package/dist/lib/browser/intent-resolver-MEBOMCYI.mjs.map +0 -7
- package/dist/lib/browser/react-root-USUAHDML.mjs.map +0 -7
- package/dist/lib/browser/react-surface-TQG4YYES.mjs.map +0 -7
- package/dist/lib/browser/settings-DYS3FFMN.mjs.map +0 -7
- package/dist/types/src/components/DeckLayout/ComplementarySidebar.d.ts.map +0 -1
- package/dist/types/src/components/DeckLayout/NodePlankHeading.d.ts.map +0 -1
- package/dist/types/src/components/DeckLayout/Plank.d.ts +0 -13
- package/dist/types/src/components/DeckLayout/Plank.d.ts.map +0 -1
- package/dist/types/src/components/DeckLayout/PlankControls.d.ts.map +0 -1
- package/dist/types/src/components/DeckLayout/PlankError.d.ts.map +0 -1
- package/dist/types/src/components/DeckLayout/PlankLoading.d.ts.map +0 -1
- package/dist/types/src/components/DeckLayout/Sidebar.d.ts.map +0 -1
- package/dist/types/src/components/DeckLayout/SidebarButton.d.ts.map +0 -1
- package/dist/types/src/components/LayoutSettings.d.ts +0 -6
- package/dist/types/src/components/LayoutSettings.d.ts.map +0 -1
- package/dist/types/src/hooks/useNode.d.ts +0 -11
- package/dist/types/src/hooks/useNode.d.ts.map +0 -1
- package/src/hooks/useNode.ts +0 -46
- /package/dist/lib/browser/{app-graph-builder-K4KVSHNT.mjs.map → app-graph-builder-VYZ4IWI3.mjs.map} +0 -0
- /package/dist/lib/browser/{check-app-scheme-6SS6I3RN.mjs.map → check-app-scheme-SEYECDHI.mjs.map} +0 -0
- /package/dist/lib/browser/{chunk-NSNAYFAX.mjs.map → chunk-B4LOJUWW.mjs.map} +0 -0
- /package/dist/lib/browser/{tools-NDEUSO4R.mjs.map → tools-SC6QEN7R.mjs.map} +0 -0
- /package/dist/lib/browser/{url-handler-4BCN7AYC.mjs.map → url-handler-ODG4B6NX.mjs.map} +0 -0
- /package/dist/types/src/components/{DeckLayout → Plank}/PlankLoading.d.ts +0 -0
- /package/dist/types/src/components/{DeckLayout → Sidebar}/ComplementarySidebar.d.ts +0 -0
- /package/dist/types/src/components/{DeckLayout → Sidebar}/Sidebar.d.ts +0 -0
- /package/dist/types/src/components/{DeckLayout → Sidebar}/SidebarButton.d.ts +0 -0
- /package/src/components/{DeckLayout → Plank}/PlankLoading.tsx +0 -0
- /package/src/components/{DeckLayout → Sidebar}/Sidebar.tsx +0 -0
- /package/src/components/{DeckLayout → Sidebar}/SidebarButton.tsx +0 -0
|
@@ -1,30 +1,43 @@
|
|
|
1
|
+
import {
|
|
2
|
+
parseEntryId
|
|
3
|
+
} from "./chunk-FLOVGNYB.mjs";
|
|
1
4
|
import {
|
|
2
5
|
calculateOverscroll,
|
|
3
6
|
layoutAppliesTopbar,
|
|
4
7
|
useBreakpoints,
|
|
8
|
+
useCompanions,
|
|
5
9
|
useHoistStatusbar
|
|
6
|
-
} from "./chunk-
|
|
10
|
+
} from "./chunk-6ZSOFCPP.mjs";
|
|
7
11
|
import {
|
|
8
12
|
DeckCapabilities
|
|
9
|
-
} from "./chunk-
|
|
13
|
+
} from "./chunk-XMCG42ID.mjs";
|
|
10
14
|
import {
|
|
15
|
+
ATTENDABLE_PATH_SEPARATOR,
|
|
16
|
+
DECK_COMPANION_TYPE,
|
|
11
17
|
DeckAction,
|
|
12
18
|
NewPlankPositions,
|
|
13
19
|
OverscrollOptions,
|
|
14
|
-
|
|
15
|
-
getMode
|
|
16
|
-
|
|
17
|
-
} from "./chunk-7X43JKZG.mjs";
|
|
20
|
+
PLANK_COMPANION_TYPE,
|
|
21
|
+
getMode
|
|
22
|
+
} from "./chunk-RJNCG4ND.mjs";
|
|
18
23
|
import {
|
|
19
24
|
DECK_PLUGIN
|
|
20
|
-
} from "./chunk-
|
|
25
|
+
} from "./chunk-NSATFAEE.mjs";
|
|
21
26
|
|
|
22
27
|
// packages/plugins/plugin-deck/src/components/DeckLayout/Banner.tsx
|
|
23
|
-
import
|
|
24
|
-
import { Surface } from "@dxos/app-framework";
|
|
25
|
-
import {
|
|
28
|
+
import React9 from "react";
|
|
29
|
+
import { Surface as Surface5 } from "@dxos/app-framework";
|
|
30
|
+
import { useTranslation as useTranslation6 } from "@dxos/react-ui";
|
|
31
|
+
import { mx as mx4 } from "@dxos/react-ui-theme";
|
|
32
|
+
|
|
33
|
+
// packages/plugins/plugin-deck/src/components/Sidebar/ComplementarySidebar.tsx
|
|
34
|
+
import React7, { Fragment as Fragment3, useCallback as useCallback4, useEffect as useEffect4, useMemo as useMemo3, useState as useState2 } from "react";
|
|
35
|
+
import { LayoutAction as LayoutAction3, Surface as Surface3, createIntent as createIntent4, useAppGraph as useAppGraph3, useCapability as useCapability3, useIntentDispatcher as useIntentDispatcher4 } from "@dxos/app-framework";
|
|
36
|
+
import { Main, useTranslation as useTranslation5, toLocalizedString as toLocalizedString2, IconButton as IconButton3 } from "@dxos/react-ui";
|
|
37
|
+
import { Tabs } from "@dxos/react-ui-tabs";
|
|
38
|
+
import { byPosition } from "@dxos/util";
|
|
26
39
|
|
|
27
|
-
// packages/plugins/plugin-deck/src/components/
|
|
40
|
+
// packages/plugins/plugin-deck/src/components/Sidebar/SidebarButton.tsx
|
|
28
41
|
import React from "react";
|
|
29
42
|
import { useCapability } from "@dxos/app-framework";
|
|
30
43
|
import { IconButton, useTranslation } from "@dxos/react-ui";
|
|
@@ -72,164 +85,45 @@ var ToggleComplementarySidebarButton = ({ inR0, classNames }) => {
|
|
|
72
85
|
});
|
|
73
86
|
};
|
|
74
87
|
|
|
75
|
-
// packages/plugins/plugin-deck/src/components/
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
className: "absolute inset-0 pointer-events-none"
|
|
84
|
-
}, /* @__PURE__ */ React2.createElement("div", {
|
|
85
|
-
role: "none",
|
|
86
|
-
className: "grid bs-full pointer-fine:p-1 max-is-md mli-auto pointer-events-auto"
|
|
87
|
-
}, /* @__PURE__ */ React2.createElement(Surface, {
|
|
88
|
-
role: "search-input",
|
|
89
|
-
limit: 1
|
|
90
|
-
}))), /* @__PURE__ */ React2.createElement("span", {
|
|
91
|
-
role: "none",
|
|
92
|
-
className: "grow"
|
|
93
|
-
}), /* @__PURE__ */ React2.createElement(Surface, {
|
|
94
|
-
role: "header-end",
|
|
95
|
-
limit: 1
|
|
96
|
-
}), /* @__PURE__ */ React2.createElement(Surface, {
|
|
97
|
-
role: "notch-start",
|
|
98
|
-
limit: 1
|
|
99
|
-
}));
|
|
100
|
-
};
|
|
101
|
-
|
|
102
|
-
// packages/plugins/plugin-deck/src/components/DeckLayout/DeckLayout.tsx
|
|
103
|
-
import { untracked } from "@preact/signals-core";
|
|
104
|
-
import React17, { useCallback as useCallback5, useEffect as useEffect6, useMemo as useMemo5, useRef as useRef2, Fragment as Fragment4, useState as useState4 } from "react";
|
|
105
|
-
import { LayoutAction as LayoutAction4, createIntent as createIntent5, Surface as Surface10, useCapability as useCapability5, useIntentDispatcher as useIntentDispatcher5, usePluginManager } from "@dxos/app-framework";
|
|
106
|
-
import { AttentionCapabilities } from "@dxos/plugin-attention";
|
|
107
|
-
import { AlertDialog, Dialog as NaturalDialog, Main as Main3, Popover as Popover2, useMediaQuery, useOnTransition } from "@dxos/react-ui";
|
|
108
|
-
import { Stack, StackContext, DEFAULT_HORIZONTAL_SIZE } from "@dxos/react-ui-stack";
|
|
109
|
-
import { mainPaddingTransitions } from "@dxos/react-ui-theme";
|
|
110
|
-
|
|
111
|
-
// packages/plugins/plugin-deck/src/components/DeckLayout/ActiveNode.tsx
|
|
112
|
-
import React3 from "react";
|
|
113
|
-
import { Surface as Surface2, useAppGraph } from "@dxos/app-framework";
|
|
114
|
-
import { useAttended } from "@dxos/react-ui-attention";
|
|
115
|
-
|
|
116
|
-
// packages/plugins/plugin-deck/src/hooks/useNode.ts
|
|
117
|
-
import { useEffect, useState } from "react";
|
|
118
|
-
var useNode = (graph, id, timeout) => {
|
|
119
|
-
const [nodeState, setNodeState] = useState(id ? graph.findNode(id, false) : void 0);
|
|
120
|
-
useEffect(() => {
|
|
121
|
-
if (!id && nodeState) {
|
|
122
|
-
setNodeState(void 0);
|
|
123
|
-
}
|
|
124
|
-
if (nodeState?.id === id || !id) {
|
|
125
|
-
return;
|
|
126
|
-
}
|
|
127
|
-
const frame = requestAnimationFrame(async () => {
|
|
128
|
-
try {
|
|
129
|
-
const node = await graph.waitForNode(id, timeout);
|
|
130
|
-
if (node) {
|
|
131
|
-
setNodeState(node);
|
|
132
|
-
}
|
|
133
|
-
} catch {
|
|
134
|
-
}
|
|
135
|
-
});
|
|
136
|
-
return () => cancelAnimationFrame(frame);
|
|
137
|
-
}, [
|
|
138
|
-
graph,
|
|
139
|
-
id,
|
|
140
|
-
timeout,
|
|
141
|
-
nodeState?.id
|
|
142
|
-
]);
|
|
143
|
-
return nodeState;
|
|
144
|
-
};
|
|
145
|
-
|
|
146
|
-
// packages/plugins/plugin-deck/src/hooks/useNodeActionExpander.ts
|
|
147
|
-
import { useEffect as useEffect2 } from "react";
|
|
148
|
-
import { ACTION_GROUP_TYPE, ACTION_TYPE, getGraph } from "@dxos/plugin-graph";
|
|
149
|
-
var expandNodeActions = async (node) => {
|
|
150
|
-
const graph = getGraph(node);
|
|
151
|
-
await graph.expand(node, "outbound", ACTION_GROUP_TYPE);
|
|
152
|
-
await graph.expand(node, "outbound", ACTION_TYPE);
|
|
153
|
-
};
|
|
154
|
-
var useNodeActionExpander = (node) => {
|
|
155
|
-
useEffect2(() => {
|
|
156
|
-
if (node) {
|
|
157
|
-
const frame = requestAnimationFrame(() => {
|
|
158
|
-
void expandNodeActions(node);
|
|
159
|
-
});
|
|
160
|
-
return () => cancelAnimationFrame(frame);
|
|
161
|
-
}
|
|
162
|
-
}, [
|
|
163
|
-
node
|
|
164
|
-
]);
|
|
165
|
-
};
|
|
166
|
-
|
|
167
|
-
// packages/plugins/plugin-deck/src/hooks/useMainSize.ts
|
|
168
|
-
import { useMainContext } from "@dxos/react-ui";
|
|
169
|
-
var useMainSize = () => {
|
|
170
|
-
const { navigationSidebarState, complementarySidebarState } = useMainContext("DeckPluginPlank");
|
|
171
|
-
return {
|
|
172
|
-
"data-sidebar-inline-start-state": navigationSidebarState,
|
|
173
|
-
"data-sidebar-inline-end-state": complementarySidebarState
|
|
174
|
-
};
|
|
175
|
-
};
|
|
176
|
-
|
|
177
|
-
// packages/plugins/plugin-deck/src/components/DeckLayout/ActiveNode.tsx
|
|
178
|
-
var ActiveNode = () => {
|
|
179
|
-
const [id] = useAttended();
|
|
180
|
-
const { graph } = useAppGraph();
|
|
181
|
-
const activeNode = useNode(graph, id);
|
|
182
|
-
useNodeActionExpander(activeNode);
|
|
183
|
-
return /* @__PURE__ */ React3.createElement("div", {
|
|
184
|
-
role: "none",
|
|
185
|
-
className: "sr-only"
|
|
186
|
-
}, /* @__PURE__ */ React3.createElement(Surface2, {
|
|
187
|
-
role: "document-title",
|
|
188
|
-
data: {
|
|
189
|
-
subject: activeNode
|
|
190
|
-
},
|
|
191
|
-
limit: 1
|
|
192
|
-
}));
|
|
193
|
-
};
|
|
194
|
-
|
|
195
|
-
// packages/plugins/plugin-deck/src/components/DeckLayout/ComplementarySidebar.tsx
|
|
196
|
-
import React8, { useCallback as useCallback3, useEffect as useEffect5, useMemo as useMemo2, useState as useState3, Fragment as Fragment2 } from "react";
|
|
197
|
-
import { createIntent as createIntent3, LayoutAction as LayoutAction2, Surface as Surface4, useAppGraph as useAppGraph3, useCapabilities, useCapability as useCapability2, useIntentDispatcher as useIntentDispatcher3 } from "@dxos/app-framework";
|
|
198
|
-
import { Main, useTranslation as useTranslation5, toLocalizedString as toLocalizedString2, IconButton as IconButton2, ScrollArea as NaturalScrollArea } from "@dxos/react-ui";
|
|
199
|
-
import { useAttended as useAttended2 } from "@dxos/react-ui-attention";
|
|
200
|
-
import { Tabs } from "@dxos/react-ui-tabs";
|
|
201
|
-
import { byPosition } from "@dxos/util";
|
|
88
|
+
// packages/plugins/plugin-deck/src/components/Plank/Plank.tsx
|
|
89
|
+
import React6, { Fragment as Fragment2, memo as memo2, useCallback as useCallback3, useLayoutEffect, useMemo as useMemo2, useRef } from "react";
|
|
90
|
+
import { LayoutAction as LayoutAction2, Surface as Surface2, createIntent as createIntent3, useCapability as useCapability2, useAppGraph as useAppGraph2, useIntentDispatcher as useIntentDispatcher3 } from "@dxos/app-framework";
|
|
91
|
+
import { debounce } from "@dxos/async";
|
|
92
|
+
import { useNode } from "@dxos/plugin-graph";
|
|
93
|
+
import { ATTENDABLE_PATH_SEPARATOR as ATTENDABLE_PATH_SEPARATOR2, useAttendableAttributes } from "@dxos/react-ui-attention";
|
|
94
|
+
import { StackItem as StackItem2, railGridHorizontal } from "@dxos/react-ui-stack";
|
|
95
|
+
import { mainIntrinsicSize, mx as mx3 } from "@dxos/react-ui-theme";
|
|
202
96
|
|
|
203
|
-
// packages/plugins/plugin-deck/src/components/
|
|
204
|
-
import
|
|
97
|
+
// packages/plugins/plugin-deck/src/components/Plank/PlankError.tsx
|
|
98
|
+
import React5, { useEffect as useEffect2, useState } from "react";
|
|
205
99
|
import { useTranslation as useTranslation4 } from "@dxos/react-ui";
|
|
206
|
-
import { descriptionText, mx as
|
|
100
|
+
import { descriptionText, mx as mx2 } from "@dxos/react-ui-theme";
|
|
207
101
|
|
|
208
|
-
// packages/plugins/plugin-deck/src/components/
|
|
209
|
-
import
|
|
210
|
-
import { createIntent as createIntent2, LayoutAction, Surface
|
|
211
|
-
import { Icon as Icon2, Popover, toLocalizedString, useTranslation as useTranslation3 } from "@dxos/react-ui";
|
|
102
|
+
// packages/plugins/plugin-deck/src/components/Plank/PlankHeading.tsx
|
|
103
|
+
import React3, { Fragment, memo, useCallback as useCallback2, useEffect, useMemo } from "react";
|
|
104
|
+
import { createIntent as createIntent2, LayoutAction, Surface, useAppGraph, useIntentDispatcher as useIntentDispatcher2 } from "@dxos/app-framework";
|
|
105
|
+
import { Icon as Icon2, IconButton as IconButton2, Popover, toLocalizedString, useTranslation as useTranslation3 } from "@dxos/react-ui";
|
|
212
106
|
import { StackItem } from "@dxos/react-ui-stack";
|
|
213
107
|
import { TextTooltip } from "@dxos/react-ui-text-tooltip";
|
|
214
108
|
|
|
215
|
-
// packages/plugins/plugin-deck/src/components/
|
|
216
|
-
import
|
|
109
|
+
// packages/plugins/plugin-deck/src/components/Plank/PlankControls.tsx
|
|
110
|
+
import React2, { forwardRef, useCallback } from "react";
|
|
217
111
|
import { createIntent, useIntentDispatcher } from "@dxos/app-framework";
|
|
218
112
|
import { invariant } from "@dxos/invariant";
|
|
219
113
|
import { Button, ButtonGroup, Icon, Tooltip, useTranslation as useTranslation2 } from "@dxos/react-ui";
|
|
220
|
-
var __dxlog_file = "/home/runner/work/dxos/dxos/packages/plugins/plugin-deck/src/components/
|
|
114
|
+
var __dxlog_file = "/home/runner/work/dxos/dxos/packages/plugins/plugin-deck/src/components/Plank/PlankControls.tsx";
|
|
221
115
|
var PlankControl = ({ icon, label: label3, ...props }) => {
|
|
222
|
-
return /* @__PURE__ */
|
|
116
|
+
return /* @__PURE__ */ React2.createElement(Tooltip.Root, null, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
|
|
223
117
|
asChild: true
|
|
224
|
-
}, /* @__PURE__ */
|
|
118
|
+
}, /* @__PURE__ */ React2.createElement(Button, {
|
|
225
119
|
variant: "ghost",
|
|
226
120
|
...props
|
|
227
|
-
}, /* @__PURE__ */
|
|
121
|
+
}, /* @__PURE__ */ React2.createElement("span", {
|
|
228
122
|
className: "sr-only"
|
|
229
|
-
}, label3), /* @__PURE__ */
|
|
123
|
+
}, label3), /* @__PURE__ */ React2.createElement(Icon, {
|
|
230
124
|
icon,
|
|
231
125
|
size: 5
|
|
232
|
-
}))), /* @__PURE__ */
|
|
126
|
+
}))), /* @__PURE__ */ React2.createElement(Tooltip.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip.Content, {
|
|
233
127
|
side: "bottom"
|
|
234
128
|
}, label3)));
|
|
235
129
|
};
|
|
@@ -240,7 +134,7 @@ var PlankCompanionControls = /* @__PURE__ */ forwardRef(({ primary }, forwardedR
|
|
|
240
134
|
const handleCloseCompanion = useCallback(() => {
|
|
241
135
|
invariant(primary, void 0, {
|
|
242
136
|
F: __dxlog_file,
|
|
243
|
-
L:
|
|
137
|
+
L: 68,
|
|
244
138
|
S: void 0,
|
|
245
139
|
A: [
|
|
246
140
|
"primary",
|
|
@@ -252,83 +146,82 @@ var PlankCompanionControls = /* @__PURE__ */ forwardRef(({ primary }, forwardedR
|
|
|
252
146
|
companion: null
|
|
253
147
|
}));
|
|
254
148
|
}, []);
|
|
255
|
-
return /* @__PURE__ */
|
|
149
|
+
return /* @__PURE__ */ React2.createElement("div", {
|
|
256
150
|
ref: forwardedRef,
|
|
257
151
|
className: "contents app-no-drag"
|
|
258
|
-
}, /* @__PURE__ */
|
|
152
|
+
}, /* @__PURE__ */ React2.createElement(PlankControl, {
|
|
259
153
|
label: t("close companion label"),
|
|
260
154
|
variant: "ghost",
|
|
261
|
-
icon
|
|
155
|
+
// icon='ph--minus--regular'
|
|
156
|
+
icon: "ph--caret-left--regular",
|
|
262
157
|
onClick: handleCloseCompanion,
|
|
263
158
|
classNames: plankControlSpacing
|
|
264
159
|
}));
|
|
265
160
|
});
|
|
266
|
-
var PlankControls = /* @__PURE__ */ forwardRef(({
|
|
161
|
+
var PlankControls = /* @__PURE__ */ forwardRef(({ children, classNames, variant = "default", capabilities, isSolo, pin, close = false, onClick, ...props }, forwardedRef) => {
|
|
267
162
|
const { t } = useTranslation2(DECK_PLUGIN);
|
|
268
163
|
const buttonClassNames = variant === "hide-disabled" ? `disabled:hidden ${plankControlSpacing}` : plankControlSpacing;
|
|
269
|
-
return /* @__PURE__ */
|
|
164
|
+
return /* @__PURE__ */ React2.createElement(ButtonGroup, {
|
|
270
165
|
...props,
|
|
271
166
|
classNames: [
|
|
272
167
|
"app-no-drag",
|
|
273
168
|
classNames
|
|
274
169
|
],
|
|
275
170
|
ref: forwardedRef
|
|
276
|
-
},
|
|
171
|
+
}, capabilities.deck && capabilities.solo && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(PlankControl, {
|
|
277
172
|
label: isSolo ? t("show deck plank label") : t("show solo plank label"),
|
|
278
173
|
classNames: buttonClassNames,
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
}), !isSolo &&
|
|
174
|
+
icon: isSolo ? "ph--corners-in--regular" : "ph--corners-out--regular",
|
|
175
|
+
onClick: () => onClick?.("solo")
|
|
176
|
+
}), !isSolo && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(PlankControl, {
|
|
282
177
|
label: t("increment start label"),
|
|
283
|
-
disabled: !
|
|
178
|
+
disabled: !capabilities.incrementStart,
|
|
284
179
|
classNames: buttonClassNames,
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
}), /* @__PURE__ */
|
|
180
|
+
icon: "ph--caret-left--regular",
|
|
181
|
+
onClick: () => onClick?.("increment-start")
|
|
182
|
+
}), /* @__PURE__ */ React2.createElement(PlankControl, {
|
|
288
183
|
label: t("increment end label"),
|
|
289
|
-
disabled: !
|
|
184
|
+
disabled: !capabilities.incrementEnd,
|
|
290
185
|
classNames: buttonClassNames,
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
})), close && !isSolo && /* @__PURE__ */
|
|
186
|
+
icon: "ph--caret-right--regular",
|
|
187
|
+
onClick: () => onClick?.("increment-end")
|
|
188
|
+
}))), close && !isSolo && /* @__PURE__ */ React2.createElement(PlankControl, {
|
|
294
189
|
label: t(`${typeof close === "string" ? "minify" : "close"} label`),
|
|
295
190
|
classNames: buttonClassNames,
|
|
296
|
-
onClick: () => onClick?.("close"),
|
|
297
191
|
"data-testid": "plankHeading.close",
|
|
298
|
-
icon: close === "minify-start" ? "ph--caret-line-left--regular" : close === "minify-end" ? "ph--caret-line-right--regular" : "ph--x--regular"
|
|
192
|
+
icon: close === "minify-start" ? "ph--caret-line-left--regular" : close === "minify-end" ? "ph--caret-line-right--regular" : "ph--x--regular",
|
|
193
|
+
onClick: () => onClick?.("close")
|
|
194
|
+
}), capabilities.companion && /* @__PURE__ */ React2.createElement(PlankControl, {
|
|
195
|
+
label: t("open companion label"),
|
|
196
|
+
classNames: buttonClassNames,
|
|
197
|
+
"data-testid": "plankHeading.companion",
|
|
198
|
+
icon: "ph--square-split-horizontal--regular",
|
|
199
|
+
onClick: () => onClick?.("companion")
|
|
299
200
|
}), children);
|
|
300
201
|
});
|
|
301
202
|
|
|
302
203
|
// packages/plugins/plugin-deck/src/components/fragments.ts
|
|
303
|
-
import { mx
|
|
204
|
+
import { mx } from "@dxos/react-ui-theme";
|
|
304
205
|
var soloInlinePadding = "pis-[calc(env(safe-area-inset-left)+.25rem)] pie-[calc(env(safe-area-inset-left)+.25rem)]";
|
|
305
206
|
var sidebarToggleStyles = "bs-[--rail-item] is-[--rail-item] absolute block-end-2 z-[1] !bg-deck lg:hidden";
|
|
306
|
-
var fixedSidebarToggleStyles =
|
|
307
|
-
var fixedComplementarySidebarToggleStyles =
|
|
207
|
+
var fixedSidebarToggleStyles = mx(sidebarToggleStyles, "inline-start-2");
|
|
208
|
+
var fixedComplementarySidebarToggleStyles = mx(sidebarToggleStyles, "inline-end-2");
|
|
308
209
|
|
|
309
|
-
// packages/plugins/plugin-deck/src/components/
|
|
310
|
-
var
|
|
210
|
+
// packages/plugins/plugin-deck/src/components/Plank/PlankHeading.tsx
|
|
211
|
+
var PlankHeading = /* @__PURE__ */ memo(({ id, part, node, deckEnabled, canIncrementStart, canIncrementEnd, popoverAnchorId, primaryId, pending, companioned, companions, actions = [] }) => {
|
|
311
212
|
const { t } = useTranslation3(DECK_PLUGIN);
|
|
312
|
-
const {
|
|
213
|
+
const { dispatchPromise: dispatch } = useIntentDispatcher2();
|
|
214
|
+
const { graph } = useAppGraph();
|
|
313
215
|
const breakpoint = useBreakpoints();
|
|
314
216
|
const icon = node?.properties?.icon ?? "ph--placeholder--regular";
|
|
315
|
-
const label3 = pending ? t("pending heading") : toLocalizedString(
|
|
316
|
-
`${surfaceVariant} plank heading`,
|
|
317
|
-
node.properties.label[1]
|
|
318
|
-
] : [
|
|
319
|
-
"companion plank heading fallback label",
|
|
320
|
-
{
|
|
321
|
-
ns: DECK_PLUGIN
|
|
322
|
-
}
|
|
323
|
-
] : node?.properties?.label) ?? [
|
|
217
|
+
const label3 = pending ? t("pending heading") : toLocalizedString(node?.properties?.label ?? [
|
|
324
218
|
"plank heading fallback label",
|
|
325
219
|
{
|
|
326
220
|
ns: DECK_PLUGIN
|
|
327
221
|
}
|
|
328
222
|
], t);
|
|
329
|
-
const
|
|
330
|
-
|
|
331
|
-
useEffect3(() => {
|
|
223
|
+
const isCompanionNode = node?.type === PLANK_COMPANION_TYPE;
|
|
224
|
+
useEffect(() => {
|
|
332
225
|
const frame = requestAnimationFrame(() => {
|
|
333
226
|
node && graph.actions(node);
|
|
334
227
|
});
|
|
@@ -336,23 +229,38 @@ var NodePlankHeading = /* @__PURE__ */ memo(({ id, part, node, canIncrementStart
|
|
|
336
229
|
}, [
|
|
337
230
|
node
|
|
338
231
|
]);
|
|
339
|
-
const attendableId = id
|
|
232
|
+
const attendableId = primaryId ?? id;
|
|
340
233
|
const capabilities = useMemo(() => ({
|
|
234
|
+
deck: deckEnabled ?? true,
|
|
341
235
|
solo: breakpoint !== "mobile" && (part === "solo" || part === "deck"),
|
|
342
236
|
incrementStart: canIncrementStart,
|
|
343
|
-
incrementEnd: canIncrementEnd
|
|
237
|
+
incrementEnd: canIncrementEnd,
|
|
238
|
+
companion: !isCompanionNode && companions && companions.length > 0
|
|
344
239
|
}), [
|
|
345
240
|
breakpoint,
|
|
346
241
|
part,
|
|
242
|
+
companions,
|
|
347
243
|
canIncrementStart,
|
|
348
|
-
canIncrementEnd
|
|
244
|
+
canIncrementEnd,
|
|
245
|
+
isCompanionNode,
|
|
246
|
+
deckEnabled
|
|
349
247
|
]);
|
|
350
|
-
const
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
248
|
+
const { variant } = parseEntryId(id);
|
|
249
|
+
const sigilActions = useMemo(() => {
|
|
250
|
+
if (!node) {
|
|
251
|
+
return void 0;
|
|
252
|
+
} else if (variant) {
|
|
253
|
+
return [];
|
|
254
|
+
} else {
|
|
255
|
+
return [
|
|
256
|
+
actions,
|
|
257
|
+
graph.actions(node)
|
|
258
|
+
].filter((a) => a.length > 0);
|
|
259
|
+
}
|
|
260
|
+
}, [
|
|
354
261
|
actions,
|
|
355
262
|
node,
|
|
263
|
+
variant,
|
|
356
264
|
graph
|
|
357
265
|
]);
|
|
358
266
|
const handleAction = useCallback2((action) => {
|
|
@@ -397,310 +305,162 @@ var NodePlankHeading = /* @__PURE__ */ memo(({ id, part, node, canIncrementStart
|
|
|
397
305
|
id,
|
|
398
306
|
part
|
|
399
307
|
]);
|
|
400
|
-
|
|
308
|
+
const ActionRoot = node && popoverAnchorId === `dxos.org/ui/${DECK_PLUGIN}/${node.id}` ? Popover.Anchor : Fragment;
|
|
309
|
+
const handleTabClick = useCallback2((event) => {
|
|
310
|
+
const target = event.target.closest("[data-id]");
|
|
311
|
+
const tabId = target?.dataset?.id;
|
|
312
|
+
if (primaryId && tabId) {
|
|
313
|
+
void dispatch(createIntent2(DeckAction.ChangeCompanion, {
|
|
314
|
+
primary: primaryId,
|
|
315
|
+
companion: tabId
|
|
316
|
+
}));
|
|
317
|
+
}
|
|
318
|
+
}, [
|
|
319
|
+
primaryId
|
|
320
|
+
]);
|
|
321
|
+
return /* @__PURE__ */ React3.createElement(StackItem.Heading, {
|
|
401
322
|
classNames: [
|
|
402
|
-
"plb-1 border-be border-separator items-stretch gap-1 sticky inline-start-12 app-drag",
|
|
403
|
-
part === "solo" ? soloInlinePadding : "pli-1"
|
|
404
|
-
surfaceVariant && "pis-3"
|
|
323
|
+
"plb-1 border-be border-separator items-stretch gap-1 sticky inline-start-12 app-drag min-is-0 layout-contain",
|
|
324
|
+
part === "solo" ? soloInlinePadding : "pli-1"
|
|
405
325
|
]
|
|
406
|
-
},
|
|
326
|
+
}, companions && isCompanionNode ? /* @__PURE__ */ React3.createElement("div", {
|
|
327
|
+
role: "none",
|
|
328
|
+
className: "flex-1 min-is-0 overflow-x-auto scrollbar-thin flex gap-1"
|
|
329
|
+
}, companions.map(({ id: id2, properties: { icon: icon2, label: label4 } }) => /* @__PURE__ */ React3.createElement(IconButton2, {
|
|
330
|
+
key: id2,
|
|
331
|
+
"data-id": id2,
|
|
332
|
+
icon: icon2,
|
|
333
|
+
iconOnly: node?.id !== id2,
|
|
334
|
+
label: toLocalizedString(label4, t),
|
|
335
|
+
size: 5,
|
|
336
|
+
variant: node?.id === id2 ? "primary" : "default",
|
|
337
|
+
onClick: handleTabClick
|
|
338
|
+
}))) : /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(ActionRoot, null, node && sigilActions ? /* @__PURE__ */ React3.createElement(StackItem.Sigil, {
|
|
407
339
|
icon,
|
|
408
340
|
related: part === "complementary",
|
|
409
341
|
attendableId,
|
|
410
342
|
triggerLabel: t("actions menu label"),
|
|
411
343
|
actions: sigilActions,
|
|
412
344
|
onAction: handleAction
|
|
413
|
-
}, /* @__PURE__ */
|
|
345
|
+
}, /* @__PURE__ */ React3.createElement(Surface, {
|
|
414
346
|
role: "menu-footer",
|
|
415
347
|
data: {
|
|
416
348
|
subject: node.data
|
|
417
349
|
}
|
|
418
|
-
})) : /* @__PURE__ */
|
|
350
|
+
})) : /* @__PURE__ */ React3.createElement(StackItem.SigilButton, null, /* @__PURE__ */ React3.createElement("span", {
|
|
419
351
|
className: "sr-only"
|
|
420
|
-
}, label3), /* @__PURE__ */
|
|
352
|
+
}, label3), /* @__PURE__ */ React3.createElement(Icon2, {
|
|
421
353
|
icon,
|
|
422
354
|
size: 5
|
|
423
|
-
}))), /* @__PURE__ */
|
|
355
|
+
}))), /* @__PURE__ */ React3.createElement(TextTooltip, {
|
|
424
356
|
text: label3,
|
|
425
357
|
onlyWhenTruncating: true
|
|
426
|
-
}, /* @__PURE__ */
|
|
358
|
+
}, /* @__PURE__ */ React3.createElement(StackItem.HeadingLabel, {
|
|
427
359
|
attendableId,
|
|
428
360
|
related: part === "complementary",
|
|
429
361
|
...pending && {
|
|
430
362
|
classNames: "text-description"
|
|
431
363
|
}
|
|
432
|
-
}, label3)), node && part !== "complementary" && /* @__PURE__ */
|
|
364
|
+
}, label3))), node && part !== "complementary" && /* @__PURE__ */ React3.createElement(Surface, {
|
|
433
365
|
role: "navbar-end",
|
|
434
366
|
data: {
|
|
435
367
|
subject: node.data
|
|
436
368
|
}
|
|
437
|
-
}), companioned === "companion" ? /* @__PURE__ */
|
|
438
|
-
primary:
|
|
439
|
-
}) : /* @__PURE__ */
|
|
369
|
+
}), companioned === "companion" ? /* @__PURE__ */ React3.createElement(PlankCompanionControls, {
|
|
370
|
+
primary: primaryId
|
|
371
|
+
}) : /* @__PURE__ */ React3.createElement(PlankControls, {
|
|
440
372
|
capabilities,
|
|
441
373
|
isSolo: part === "solo",
|
|
442
|
-
|
|
443
|
-
|
|
374
|
+
close: part === "complementary" ? "minify-end" : true,
|
|
375
|
+
onClick: handlePlankAction
|
|
444
376
|
}));
|
|
445
377
|
});
|
|
446
378
|
|
|
447
|
-
// packages/plugins/plugin-deck/src/components/
|
|
448
|
-
import
|
|
379
|
+
// packages/plugins/plugin-deck/src/components/Plank/PlankLoading.tsx
|
|
380
|
+
import React4 from "react";
|
|
449
381
|
var PlankLoading = () => {
|
|
450
|
-
return /* @__PURE__ */
|
|
382
|
+
return /* @__PURE__ */ React4.createElement("div", {
|
|
451
383
|
role: "none",
|
|
452
384
|
className: "grid place-items-center attention-surface"
|
|
453
385
|
});
|
|
454
386
|
};
|
|
455
387
|
|
|
456
|
-
// packages/plugins/plugin-deck/src/components/
|
|
388
|
+
// packages/plugins/plugin-deck/src/components/Plank/PlankError.tsx
|
|
457
389
|
var PlankContentError = ({ error }) => {
|
|
458
390
|
const { t } = useTranslation4(DECK_PLUGIN);
|
|
459
391
|
const errorString = error?.toString() ?? "";
|
|
460
|
-
return /* @__PURE__ */
|
|
392
|
+
return /* @__PURE__ */ React5.createElement("div", {
|
|
461
393
|
role: "none",
|
|
462
394
|
className: "overflow-auto p-8 attention-surface grid place-items-center"
|
|
463
|
-
}, /* @__PURE__ */
|
|
395
|
+
}, /* @__PURE__ */ React5.createElement("p", {
|
|
464
396
|
role: "alert",
|
|
465
|
-
className:
|
|
397
|
+
className: mx2(descriptionText, "break-words border border-dashed border-separator rounded-lg p-8", errorString.length < 256 && "text-lg")
|
|
466
398
|
}, error ? errorString : t("error fallback message")));
|
|
467
399
|
};
|
|
468
400
|
var PlankError = ({ id, part, node, error }) => {
|
|
469
|
-
const [timedOut, setTimedOut] =
|
|
470
|
-
|
|
401
|
+
const [timedOut, setTimedOut] = useState(false);
|
|
402
|
+
useEffect2(() => {
|
|
471
403
|
setTimeout(() => setTimedOut(true), 5e3);
|
|
472
404
|
}, []);
|
|
473
|
-
return /* @__PURE__ */
|
|
405
|
+
return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(PlankHeading, {
|
|
474
406
|
id,
|
|
475
407
|
part,
|
|
476
408
|
node,
|
|
477
409
|
pending: !timedOut
|
|
478
|
-
}), timedOut ? /* @__PURE__ */
|
|
410
|
+
}), timedOut ? /* @__PURE__ */ React5.createElement(PlankContentError, {
|
|
479
411
|
error
|
|
480
|
-
}) : /* @__PURE__ */
|
|
412
|
+
}) : /* @__PURE__ */ React5.createElement(PlankLoading, null));
|
|
481
413
|
};
|
|
482
414
|
|
|
483
|
-
// packages/plugins/plugin-deck/src/
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
const topbar = layoutAppliesTopbar(breakpoint);
|
|
499
|
-
const hoistStatusbar = useHoistStatusbar(breakpoint);
|
|
500
|
-
const panels = useCapabilities(DeckCapabilities.ComplementaryPanel);
|
|
501
|
-
const availablePanels = panels.filter((panel) => {
|
|
502
|
-
if (!node || !panel.filter) {
|
|
503
|
-
return true;
|
|
504
|
-
}
|
|
505
|
-
return panel.filter(node);
|
|
506
|
-
}).toSorted(byPosition);
|
|
507
|
-
const activePanelId = availablePanels.find((panel) => panel.id === current)?.id ?? availablePanels[0]?.id;
|
|
508
|
-
const [internalValue, setInternalValue] = useState3(activePanelId);
|
|
509
|
-
useEffect5(() => {
|
|
510
|
-
setInternalValue(activePanelId);
|
|
511
|
-
}, [
|
|
512
|
-
activePanelId
|
|
513
|
-
]);
|
|
514
|
-
const handleTabClick = useCallback3((event) => {
|
|
515
|
-
const nextValue = event.currentTarget.getAttribute("data-value");
|
|
516
|
-
if (nextValue === activePanelId) {
|
|
517
|
-
layout.complementarySidebarState = layout.complementarySidebarState === "expanded" ? "collapsed" : "expanded";
|
|
518
|
-
} else {
|
|
519
|
-
setInternalValue(nextValue);
|
|
520
|
-
layout.complementarySidebarState = "expanded";
|
|
521
|
-
void dispatch(createIntent3(LayoutAction2.UpdateComplementary, {
|
|
522
|
-
part: "complementary",
|
|
523
|
-
subject: nextValue
|
|
524
|
-
}));
|
|
415
|
+
// packages/plugins/plugin-deck/src/hooks/useNodeActionExpander.ts
|
|
416
|
+
import { useEffect as useEffect3 } from "react";
|
|
417
|
+
import { ACTION_GROUP_TYPE, ACTION_TYPE, getGraph } from "@dxos/plugin-graph";
|
|
418
|
+
var expandNodeActions = async (node) => {
|
|
419
|
+
const graph = getGraph(node);
|
|
420
|
+
await graph.expand(node, "outbound", ACTION_GROUP_TYPE);
|
|
421
|
+
await graph.expand(node, "outbound", ACTION_TYPE);
|
|
422
|
+
};
|
|
423
|
+
var useNodeActionExpander = (node) => {
|
|
424
|
+
useEffect3(() => {
|
|
425
|
+
if (node) {
|
|
426
|
+
const frame = requestAnimationFrame(() => {
|
|
427
|
+
void expandNodeActions(node);
|
|
428
|
+
});
|
|
429
|
+
return () => cancelAnimationFrame(frame);
|
|
525
430
|
}
|
|
526
431
|
}, [
|
|
527
|
-
|
|
528
|
-
activePanelId,
|
|
529
|
-
dispatch
|
|
530
|
-
]);
|
|
531
|
-
const data = useMemo2(() => node && {
|
|
532
|
-
id: node.id,
|
|
533
|
-
subject: node.data,
|
|
534
|
-
workspace: layout.activeDeck,
|
|
535
|
-
popoverAnchorId: layout.popoverAnchorId
|
|
536
|
-
}, [
|
|
537
|
-
node,
|
|
538
|
-
layout.popoverAnchorId
|
|
432
|
+
node
|
|
539
433
|
]);
|
|
540
|
-
return /* @__PURE__ */ React8.createElement(Main.ComplementarySidebar, {
|
|
541
|
-
label,
|
|
542
|
-
classNames: [
|
|
543
|
-
topbar && "block-start-[calc(env(safe-area-inset-top)+var(--rail-size))]",
|
|
544
|
-
hoistStatusbar && "block-end-[--statusbar-size]"
|
|
545
|
-
]
|
|
546
|
-
}, /* @__PURE__ */ React8.createElement(Tabs.Root, {
|
|
547
|
-
orientation: "vertical",
|
|
548
|
-
verticalVariant: "stateless",
|
|
549
|
-
value: internalValue,
|
|
550
|
-
attendableId: attended[0],
|
|
551
|
-
classNames: "contents"
|
|
552
|
-
}, /* @__PURE__ */ React8.createElement("div", {
|
|
553
|
-
role: "none",
|
|
554
|
-
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"
|
|
555
|
-
}, /* @__PURE__ */ React8.createElement(Tabs.Tablist, {
|
|
556
|
-
classNames: "grid grid-cols-1 auto-rows-[--rail-action] p-1 gap-1 !overflow-y-auto"
|
|
557
|
-
}, availablePanels.map((panel) => /* @__PURE__ */ React8.createElement(Tabs.Tab, {
|
|
558
|
-
key: panel.id,
|
|
559
|
-
value: panel.id,
|
|
560
|
-
asChild: true
|
|
561
|
-
}, /* @__PURE__ */ React8.createElement(IconButton2, {
|
|
562
|
-
label: toLocalizedString2(panel.label, t),
|
|
563
|
-
icon: panel.icon,
|
|
564
|
-
size: 5,
|
|
565
|
-
iconOnly: true,
|
|
566
|
-
tooltipSide: "left",
|
|
567
|
-
"data-value": panel.id,
|
|
568
|
-
variant: activePanelId === panel.id ? layout.complementarySidebarState === "expanded" ? "primary" : "default" : "ghost",
|
|
569
|
-
onClick: handleTabClick
|
|
570
|
-
})))), !hoistStatusbar && /* @__PURE__ */ React8.createElement("div", {
|
|
571
|
-
role: "none",
|
|
572
|
-
className: "grid grid-cols-1 auto-rows-[--rail-item] p-1 overflow-y-auto"
|
|
573
|
-
}, /* @__PURE__ */ React8.createElement(Surface4, {
|
|
574
|
-
role: "status-bar--r0-footer",
|
|
575
|
-
limit: 1
|
|
576
|
-
})), /* @__PURE__ */ React8.createElement("div", {
|
|
577
|
-
role: "none",
|
|
578
|
-
className: "hidden lg:grid grid-cols-1 auto-rows-[--rail-action] p-1"
|
|
579
|
-
}, /* @__PURE__ */ React8.createElement(ToggleComplementarySidebarButton, null))), availablePanels.map((panel) => /* @__PURE__ */ React8.createElement(Tabs.Tabpanel, {
|
|
580
|
-
key: panel.id,
|
|
581
|
-
value: panel.id,
|
|
582
|
-
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)]',
|
|
583
|
-
...layout.complementarySidebarState !== "expanded" && {
|
|
584
|
-
inert: "true"
|
|
585
|
-
}
|
|
586
|
-
}, /* @__PURE__ */ React8.createElement(ComplementarySidebarPanel, {
|
|
587
|
-
panel,
|
|
588
|
-
activePanelId,
|
|
589
|
-
data,
|
|
590
|
-
hoistStatusbar
|
|
591
|
-
})))));
|
|
592
|
-
};
|
|
593
|
-
var ScrollArea = ({ children }) => {
|
|
594
|
-
return /* @__PURE__ */ React8.createElement(NaturalScrollArea.Root, null, /* @__PURE__ */ React8.createElement(NaturalScrollArea.Viewport, null, children), /* @__PURE__ */ React8.createElement(NaturalScrollArea.Scrollbar, {
|
|
595
|
-
orientation: "vertical"
|
|
596
|
-
}, /* @__PURE__ */ React8.createElement(NaturalScrollArea.Thumb, null)));
|
|
597
|
-
};
|
|
598
|
-
var ComplementarySidebarPanel = ({ panel, activePanelId, data, hoistStatusbar }) => {
|
|
599
|
-
const { t } = useTranslation5(DECK_PLUGIN);
|
|
600
|
-
if (panel.id !== activePanelId || !data) {
|
|
601
|
-
return null;
|
|
602
|
-
}
|
|
603
|
-
const Wrapper = panel.fixed ? Fragment2 : ScrollArea;
|
|
604
|
-
return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement("h2", {
|
|
605
|
-
className: "flex items-center pli-2 border-separator border-be font-medium"
|
|
606
|
-
}, toLocalizedString2(panel.label, t)), /* @__PURE__ */ React8.createElement(Wrapper, null, /* @__PURE__ */ React8.createElement(Surface4, {
|
|
607
|
-
role: `complementary--${activePanelId}`,
|
|
608
|
-
data,
|
|
609
|
-
fallback: PlankContentError,
|
|
610
|
-
placeholder: /* @__PURE__ */ React8.createElement(PlankLoading, null)
|
|
611
|
-
})), !hoistStatusbar && /* @__PURE__ */ React8.createElement("div", {
|
|
612
|
-
role: "contentinfo",
|
|
613
|
-
className: "flex flex-wrap justify-center items-center border-bs border-separator pbs-1 pbe-[max(env(safe-area-inset-bottom),0.25rem)]"
|
|
614
|
-
}, /* @__PURE__ */ React8.createElement(Surface4, {
|
|
615
|
-
role: "status-bar--r1-footer",
|
|
616
|
-
limit: 1
|
|
617
|
-
})));
|
|
618
|
-
};
|
|
619
|
-
|
|
620
|
-
// packages/plugins/plugin-deck/src/components/DeckLayout/ContentEmpty.tsx
|
|
621
|
-
import React9 from "react";
|
|
622
|
-
import { Surface as Surface5 } from "@dxos/app-framework";
|
|
623
|
-
var ContentEmpty = () => {
|
|
624
|
-
const breakpoint = useBreakpoints();
|
|
625
|
-
const topbar = layoutAppliesTopbar(breakpoint);
|
|
626
|
-
return /* @__PURE__ */ React9.createElement("div", {
|
|
627
|
-
role: "none",
|
|
628
|
-
className: "grid place-items-center p-8 relative bg-deck",
|
|
629
|
-
"data-testid": "layoutPlugin.firstRunMessage"
|
|
630
|
-
}, /* @__PURE__ */ React9.createElement(Surface5, {
|
|
631
|
-
role: "keyshortcuts"
|
|
632
|
-
}), !topbar && /* @__PURE__ */ React9.createElement(ToggleSidebarButton, {
|
|
633
|
-
variant: "default",
|
|
634
|
-
classNames: fixedSidebarToggleStyles
|
|
635
|
-
}));
|
|
636
|
-
};
|
|
637
|
-
|
|
638
|
-
// packages/plugins/plugin-deck/src/components/DeckLayout/Fullscreen.tsx
|
|
639
|
-
import React11 from "react";
|
|
640
|
-
import { Surface as Surface6, useAppGraph as useAppGraph4 } from "@dxos/app-framework";
|
|
641
|
-
import { fixedInsetFlexLayout } from "@dxos/react-ui-theme";
|
|
642
|
-
|
|
643
|
-
// packages/plugins/plugin-deck/src/components/DeckLayout/Fallback.tsx
|
|
644
|
-
import React10 from "react";
|
|
645
|
-
import { useTranslation as useTranslation6 } from "@dxos/react-ui";
|
|
646
|
-
import { errorText, mx as mx4 } from "@dxos/react-ui-theme";
|
|
647
|
-
var Fallback = () => {
|
|
648
|
-
const { t } = useTranslation6(DECK_PLUGIN);
|
|
649
|
-
return /* @__PURE__ */ React10.createElement("div", {
|
|
650
|
-
role: "none",
|
|
651
|
-
className: "min-bs-screen is-full flex items-center justify-center p-8"
|
|
652
|
-
}, /* @__PURE__ */ React10.createElement("p", {
|
|
653
|
-
role: "alert",
|
|
654
|
-
className: mx4(errorText, "border border-error-400/50 rounded-lg flex items-center justify-center p-8 font-normal text-lg")
|
|
655
|
-
}, t("plugin error message")));
|
|
656
434
|
};
|
|
657
435
|
|
|
658
|
-
// packages/plugins/plugin-deck/src/
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
role: "none",
|
|
667
|
-
className: fixedInsetFlexLayout
|
|
668
|
-
}, /* @__PURE__ */ React11.createElement(Surface6, {
|
|
669
|
-
role: "main",
|
|
670
|
-
limit: 1,
|
|
671
|
-
fallback: Fallback,
|
|
672
|
-
data: {
|
|
673
|
-
subject: fullScreenNode?.data,
|
|
674
|
-
component: id?.startsWith(SURFACE_PREFIX) ? id.slice(SURFACE_PREFIX.length) : void 0
|
|
675
|
-
}
|
|
676
|
-
}));
|
|
436
|
+
// packages/plugins/plugin-deck/src/hooks/useMainSize.ts
|
|
437
|
+
import { useMainContext } from "@dxos/react-ui";
|
|
438
|
+
var useMainSize = () => {
|
|
439
|
+
const { navigationSidebarState, complementarySidebarState } = useMainContext("DeckPluginPlank");
|
|
440
|
+
return {
|
|
441
|
+
"data-sidebar-inline-start-state": navigationSidebarState,
|
|
442
|
+
"data-sidebar-inline-end-state": complementarySidebarState
|
|
443
|
+
};
|
|
677
444
|
};
|
|
678
445
|
|
|
679
|
-
// packages/plugins/plugin-deck/src/components/
|
|
680
|
-
import React12, { Fragment as Fragment3, memo as memo2, useCallback as useCallback4, useLayoutEffect, useMemo as useMemo3, useRef } from "react";
|
|
681
|
-
import { createIntent as createIntent4, LayoutAction as LayoutAction3, Surface as Surface7, useCapability as useCapability3, useAppGraph as useAppGraph5, useIntentDispatcher as useIntentDispatcher4 } from "@dxos/app-framework";
|
|
682
|
-
import { debounce } from "@dxos/async";
|
|
683
|
-
import { useAttendableAttributes } from "@dxos/react-ui-attention";
|
|
684
|
-
import { StackItem as StackItem2, railGridHorizontal } from "@dxos/react-ui-stack";
|
|
685
|
-
import { mainIntrinsicSize, mx as mx5 } from "@dxos/react-ui-theme";
|
|
446
|
+
// packages/plugins/plugin-deck/src/components/Plank/Plank.tsx
|
|
686
447
|
var UNKNOWN_ID = "unknown_id";
|
|
687
|
-
var PlankImpl = /* @__PURE__ */ memo2(({ id
|
|
688
|
-
const { dispatchPromise: dispatch } =
|
|
689
|
-
const { deck, popoverAnchorId, scrollIntoView } =
|
|
690
|
-
const { graph } = useAppGraph5();
|
|
691
|
-
const node = useNode(graph, id);
|
|
448
|
+
var PlankImpl = /* @__PURE__ */ memo2(({ id, node, part, path, order, active, layoutMode, companioned, primary, companions, settings }) => {
|
|
449
|
+
const { dispatchPromise: dispatch } = useIntentDispatcher3();
|
|
450
|
+
const { deck, popoverAnchorId, scrollIntoView } = useCapability2(DeckCapabilities.DeckState);
|
|
692
451
|
const rootElement = useRef(null);
|
|
693
452
|
const canResize = layoutMode === "deck";
|
|
694
453
|
const Root = part.startsWith("solo") ? "article" : StackItem2.Root;
|
|
695
|
-
const attendableAttrs = useAttendableAttributes(id);
|
|
454
|
+
const attendableAttrs = useAttendableAttributes(primary?.id ?? id);
|
|
696
455
|
const index = active ? active.findIndex((entryId) => entryId === id) : 0;
|
|
697
456
|
const length = active?.length ?? 1;
|
|
698
457
|
const canIncrementStart = active && index !== void 0 && index > 0 && length !== void 0 && length > 1;
|
|
699
458
|
const canIncrementEnd = active && index !== void 0 && index < length - 1 && length !== void 0;
|
|
700
|
-
const
|
|
459
|
+
const { variant } = parseEntryId(id);
|
|
460
|
+
const sizeKey = `${id.split("+")[0]}${variant ? `${ATTENDABLE_PATH_SEPARATOR2}${variant}` : ""}`;
|
|
701
461
|
const size = deck.plankSizing[sizeKey];
|
|
702
|
-
const setSize =
|
|
703
|
-
return dispatch(
|
|
462
|
+
const setSize = useCallback3(debounce((nextSize) => {
|
|
463
|
+
return dispatch(createIntent3(DeckAction.UpdatePlankSize, {
|
|
704
464
|
id: sizeKey,
|
|
705
465
|
size: nextSize
|
|
706
466
|
}));
|
|
@@ -708,7 +468,7 @@ var PlankImpl = /* @__PURE__ */ memo2(({ id = UNKNOWN_ID, part, path, order, act
|
|
|
708
468
|
dispatch,
|
|
709
469
|
sizeKey
|
|
710
470
|
]);
|
|
711
|
-
const handleKeyDown =
|
|
471
|
+
const handleKeyDown = useCallback3((event) => {
|
|
712
472
|
if (event.target === event.currentTarget && event.key === "Escape") {
|
|
713
473
|
rootElement.current?.closest("main")?.focus();
|
|
714
474
|
}
|
|
@@ -723,7 +483,7 @@ var PlankImpl = /* @__PURE__ */ memo2(({ id = UNKNOWN_ID, part, path, order, act
|
|
|
723
483
|
behavior: "smooth",
|
|
724
484
|
inline: "center"
|
|
725
485
|
});
|
|
726
|
-
void dispatch(
|
|
486
|
+
void dispatch(createIntent3(LayoutAction2.ScrollIntoView, {
|
|
727
487
|
part: "current",
|
|
728
488
|
subject: void 0
|
|
729
489
|
}));
|
|
@@ -736,9 +496,10 @@ var PlankImpl = /* @__PURE__ */ memo2(({ id = UNKNOWN_ID, part, path, order, act
|
|
|
736
496
|
const isSolo = layoutMode === "solo" && part === "solo";
|
|
737
497
|
const isAttendable = layoutMode === "solo" && part.startsWith("solo") || layoutMode === "deck" && part === "deck";
|
|
738
498
|
const sizeAttrs = useMainSize();
|
|
739
|
-
const data =
|
|
499
|
+
const data = useMemo2(() => node && {
|
|
740
500
|
subject: node.data,
|
|
741
|
-
|
|
501
|
+
companionTo: primary?.data,
|
|
502
|
+
variant,
|
|
742
503
|
path,
|
|
743
504
|
popoverAnchorId
|
|
744
505
|
}, [
|
|
@@ -746,11 +507,11 @@ var PlankImpl = /* @__PURE__ */ memo2(({ id = UNKNOWN_ID, part, path, order, act
|
|
|
746
507
|
node?.data,
|
|
747
508
|
path,
|
|
748
509
|
popoverAnchorId,
|
|
749
|
-
|
|
510
|
+
primary?.data
|
|
750
511
|
]);
|
|
751
|
-
const placeholder =
|
|
752
|
-
const className =
|
|
753
|
-
return /* @__PURE__ */
|
|
512
|
+
const placeholder = useMemo2(() => /* @__PURE__ */ React6.createElement(PlankLoading, null), []);
|
|
513
|
+
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");
|
|
514
|
+
return /* @__PURE__ */ React6.createElement(Root, {
|
|
754
515
|
ref: rootElement,
|
|
755
516
|
"data-testid": "deck.plank",
|
|
756
517
|
tabIndex: 0,
|
|
@@ -769,68 +530,215 @@ var PlankImpl = /* @__PURE__ */ memo2(({ id = UNKNOWN_ID, part, path, order, act
|
|
|
769
530
|
},
|
|
770
531
|
...isAttendable ? attendableAttrs : {},
|
|
771
532
|
onKeyDown: handleKeyDown
|
|
772
|
-
}, node ? /* @__PURE__ */
|
|
533
|
+
}, node ? /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(PlankHeading, {
|
|
773
534
|
id,
|
|
774
535
|
part: part.startsWith("solo-") ? "solo" : part,
|
|
775
536
|
node,
|
|
537
|
+
deckEnabled: settings?.enableDeck,
|
|
776
538
|
canIncrementStart,
|
|
777
539
|
canIncrementEnd,
|
|
778
540
|
popoverAnchorId,
|
|
541
|
+
primaryId: primary?.id,
|
|
779
542
|
companioned,
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
}), /* @__PURE__ */ React12.createElement(Surface7, {
|
|
543
|
+
companions
|
|
544
|
+
}), /* @__PURE__ */ React6.createElement(Surface2, {
|
|
783
545
|
key: node.id,
|
|
784
546
|
role: "article",
|
|
785
547
|
data,
|
|
786
548
|
limit: 1,
|
|
787
549
|
fallback: PlankContentError,
|
|
788
550
|
placeholder
|
|
789
|
-
})) : /* @__PURE__ */
|
|
551
|
+
})) : /* @__PURE__ */ React6.createElement(PlankError, {
|
|
790
552
|
id,
|
|
791
553
|
part
|
|
792
|
-
}), canResize && /* @__PURE__ */
|
|
554
|
+
}), canResize && /* @__PURE__ */ React6.createElement(StackItem2.ResizeHandle, null));
|
|
793
555
|
});
|
|
794
556
|
var SplitFrame = ({ children }) => {
|
|
795
557
|
const sizeAttrs = useMainSize();
|
|
796
|
-
return /* @__PURE__ */
|
|
558
|
+
return /* @__PURE__ */ React6.createElement("div", {
|
|
797
559
|
role: "none",
|
|
798
|
-
className:
|
|
560
|
+
className: mx3("grid grid-cols-[1fr_1fr] absolute inset-0", railGridHorizontal, mainIntrinsicSize),
|
|
799
561
|
...sizeAttrs
|
|
800
562
|
}, children);
|
|
801
563
|
};
|
|
802
|
-
var Plank = (props) => {
|
|
564
|
+
var Plank = ({ id = UNKNOWN_ID, ...props }) => {
|
|
565
|
+
const { graph } = useAppGraph2();
|
|
566
|
+
const node = useNode(graph, id);
|
|
567
|
+
const companions = useCompanions(id);
|
|
568
|
+
const currentCompanion = companions.find(({ id: id2 }) => id2 === props.companionId);
|
|
803
569
|
if (props.companionId) {
|
|
804
|
-
const Root = props.part === "solo" ? SplitFrame :
|
|
805
|
-
return /* @__PURE__ */
|
|
570
|
+
const Root = props.part === "solo" ? SplitFrame : Fragment2;
|
|
571
|
+
return /* @__PURE__ */ React6.createElement(Root, null, /* @__PURE__ */ React6.createElement(PlankImpl, {
|
|
572
|
+
id,
|
|
573
|
+
node,
|
|
574
|
+
companioned: "primary",
|
|
806
575
|
...props,
|
|
807
576
|
...props.part === "solo" ? {
|
|
808
577
|
part: "solo-primary"
|
|
809
|
-
} : {}
|
|
810
|
-
|
|
811
|
-
|
|
578
|
+
} : {}
|
|
579
|
+
}), /* @__PURE__ */ React6.createElement(PlankImpl, {
|
|
580
|
+
id: props.companionId,
|
|
581
|
+
node: currentCompanion,
|
|
582
|
+
companioned: "companion",
|
|
583
|
+
primary: node,
|
|
584
|
+
companions,
|
|
812
585
|
...props,
|
|
813
|
-
...props.companionId.startsWith(surfaceVariantSeparator) ? {
|
|
814
|
-
surfaceVariant: props.companionId.substring(2)
|
|
815
|
-
} : {
|
|
816
|
-
id: props.companionId,
|
|
817
|
-
primaryId: props.id
|
|
818
|
-
},
|
|
819
586
|
...props.part === "solo" ? {
|
|
820
587
|
part: "solo-companion"
|
|
821
588
|
} : {
|
|
822
589
|
order: props.order + 1
|
|
823
|
-
}
|
|
824
|
-
companioned: "companion"
|
|
590
|
+
}
|
|
825
591
|
}));
|
|
826
592
|
} else {
|
|
827
|
-
return /* @__PURE__ */
|
|
593
|
+
return /* @__PURE__ */ React6.createElement(PlankImpl, {
|
|
594
|
+
id,
|
|
595
|
+
node,
|
|
596
|
+
companions,
|
|
597
|
+
...props
|
|
598
|
+
});
|
|
828
599
|
}
|
|
829
600
|
};
|
|
830
601
|
|
|
831
|
-
// packages/plugins/plugin-deck/src/components/
|
|
832
|
-
|
|
833
|
-
|
|
602
|
+
// packages/plugins/plugin-deck/src/components/Sidebar/ComplementarySidebar.tsx
|
|
603
|
+
var label = [
|
|
604
|
+
"complementary sidebar title",
|
|
605
|
+
{
|
|
606
|
+
ns: DECK_PLUGIN
|
|
607
|
+
}
|
|
608
|
+
];
|
|
609
|
+
var getCompanionId = (id) => {
|
|
610
|
+
const [_, companionId] = id.split(ATTENDABLE_PATH_SEPARATOR);
|
|
611
|
+
return companionId ?? "never";
|
|
612
|
+
};
|
|
613
|
+
var useDeckCompanions = () => {
|
|
614
|
+
const { graph } = useAppGraph3();
|
|
615
|
+
const companions = graph.nodes(graph.root, {
|
|
616
|
+
type: DECK_COMPANION_TYPE
|
|
617
|
+
});
|
|
618
|
+
return companions.toSorted((a, b) => byPosition(a.properties, b.properties));
|
|
619
|
+
};
|
|
620
|
+
var ComplementarySidebar = ({ current }) => {
|
|
621
|
+
const { t } = useTranslation5(DECK_PLUGIN);
|
|
622
|
+
const { dispatchPromise: dispatch } = useIntentDispatcher4();
|
|
623
|
+
const layout = useCapability3(DeckCapabilities.MutableDeckState);
|
|
624
|
+
const breakpoint = useBreakpoints();
|
|
625
|
+
const topbar = layoutAppliesTopbar(breakpoint);
|
|
626
|
+
const hoistStatusbar = useHoistStatusbar(breakpoint);
|
|
627
|
+
const companions = useDeckCompanions();
|
|
628
|
+
const activeCompanion = companions.find((companion) => getCompanionId(companion.id) === current) ?? companions.at(0);
|
|
629
|
+
const activeId = getCompanionId(activeCompanion?.id ?? "never");
|
|
630
|
+
const [internalValue, setInternalValue] = useState2(activeId);
|
|
631
|
+
useEffect4(() => {
|
|
632
|
+
setInternalValue(activeId);
|
|
633
|
+
}, [
|
|
634
|
+
activeId
|
|
635
|
+
]);
|
|
636
|
+
const handleTabClick = useCallback4((event) => {
|
|
637
|
+
const nextValue = event.currentTarget.getAttribute("data-value");
|
|
638
|
+
if (nextValue === activeId) {
|
|
639
|
+
layout.complementarySidebarState = layout.complementarySidebarState === "expanded" ? "collapsed" : "expanded";
|
|
640
|
+
} else {
|
|
641
|
+
setInternalValue(nextValue);
|
|
642
|
+
layout.complementarySidebarState = "expanded";
|
|
643
|
+
void dispatch(createIntent4(LayoutAction3.UpdateComplementary, {
|
|
644
|
+
part: "complementary",
|
|
645
|
+
subject: nextValue
|
|
646
|
+
}));
|
|
647
|
+
}
|
|
648
|
+
}, [
|
|
649
|
+
layout,
|
|
650
|
+
activeId,
|
|
651
|
+
dispatch
|
|
652
|
+
]);
|
|
653
|
+
const data = useMemo3(() => activeCompanion && {
|
|
654
|
+
id: activeCompanion.id,
|
|
655
|
+
subject: activeCompanion.data
|
|
656
|
+
}, [
|
|
657
|
+
activeCompanion?.id,
|
|
658
|
+
activeCompanion?.data
|
|
659
|
+
]);
|
|
660
|
+
return /* @__PURE__ */ React7.createElement(Main.ComplementarySidebar, {
|
|
661
|
+
label,
|
|
662
|
+
classNames: [
|
|
663
|
+
topbar && "block-start-[calc(env(safe-area-inset-top)+var(--rail-size))]",
|
|
664
|
+
hoistStatusbar && "block-end-[--statusbar-size]"
|
|
665
|
+
]
|
|
666
|
+
}, /* @__PURE__ */ React7.createElement(Tabs.Root, {
|
|
667
|
+
orientation: "vertical",
|
|
668
|
+
verticalVariant: "stateless",
|
|
669
|
+
value: internalValue,
|
|
670
|
+
classNames: "contents"
|
|
671
|
+
}, /* @__PURE__ */ React7.createElement("div", {
|
|
672
|
+
role: "none",
|
|
673
|
+
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"
|
|
674
|
+
}, /* @__PURE__ */ React7.createElement(Tabs.Tablist, {
|
|
675
|
+
classNames: "grid grid-cols-1 auto-rows-[--rail-action] p-1 gap-1 !overflow-y-auto"
|
|
676
|
+
}, companions.map((companion) => /* @__PURE__ */ React7.createElement(Tabs.Tab, {
|
|
677
|
+
key: getCompanionId(companion.id),
|
|
678
|
+
value: getCompanionId(companion.id),
|
|
679
|
+
asChild: true
|
|
680
|
+
}, /* @__PURE__ */ React7.createElement(IconButton3, {
|
|
681
|
+
label: toLocalizedString2(companion.properties.label, t),
|
|
682
|
+
icon: companion.properties.icon,
|
|
683
|
+
size: 5,
|
|
684
|
+
iconOnly: true,
|
|
685
|
+
tooltipSide: "left",
|
|
686
|
+
"data-value": getCompanionId(companion.id),
|
|
687
|
+
variant: activeId === getCompanionId(companion.id) ? layout.complementarySidebarState === "expanded" ? "primary" : "default" : "ghost",
|
|
688
|
+
onClick: handleTabClick
|
|
689
|
+
})))), !hoistStatusbar && /* @__PURE__ */ React7.createElement("div", {
|
|
690
|
+
role: "none",
|
|
691
|
+
className: "grid grid-cols-1 auto-rows-[--rail-item] p-1 overflow-y-auto"
|
|
692
|
+
}, /* @__PURE__ */ React7.createElement(Surface3, {
|
|
693
|
+
role: "status-bar--r0-footer",
|
|
694
|
+
limit: 1
|
|
695
|
+
})), /* @__PURE__ */ React7.createElement("div", {
|
|
696
|
+
role: "none",
|
|
697
|
+
className: "hidden lg:grid grid-cols-1 auto-rows-[--rail-action] p-1"
|
|
698
|
+
}, /* @__PURE__ */ React7.createElement(ToggleComplementarySidebarButton, null))), companions.map((companion) => /* @__PURE__ */ React7.createElement(Tabs.Tabpanel, {
|
|
699
|
+
key: getCompanionId(companion.id),
|
|
700
|
+
value: getCompanionId(companion.id),
|
|
701
|
+
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)]',
|
|
702
|
+
...layout.complementarySidebarState !== "expanded" && {
|
|
703
|
+
inert: "true"
|
|
704
|
+
}
|
|
705
|
+
}, /* @__PURE__ */ React7.createElement(ComplementarySidebarPanel, {
|
|
706
|
+
companion,
|
|
707
|
+
activeId,
|
|
708
|
+
data,
|
|
709
|
+
hoistStatusbar
|
|
710
|
+
})))));
|
|
711
|
+
};
|
|
712
|
+
var ScrollArea = ({ children }) => {
|
|
713
|
+
return /* @__PURE__ */ React7.createElement("div", {
|
|
714
|
+
className: "flex flex-col grow overflow-x-hidden overflow-y-auto scrollbar-thin"
|
|
715
|
+
}, children);
|
|
716
|
+
};
|
|
717
|
+
var ComplementarySidebarPanel = ({ companion, activeId, data, hoistStatusbar }) => {
|
|
718
|
+
const { t } = useTranslation5(DECK_PLUGIN);
|
|
719
|
+
if (getCompanionId(companion.id) !== activeId && !data) {
|
|
720
|
+
return null;
|
|
721
|
+
}
|
|
722
|
+
const Wrapper = companion.properties.fixed ? Fragment3 : ScrollArea;
|
|
723
|
+
return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement("h2", {
|
|
724
|
+
className: "flex items-center pli-2 border-separator border-be font-medium"
|
|
725
|
+
}, toLocalizedString2(companion.properties.label, t)), /* @__PURE__ */ React7.createElement(Wrapper, null, /* @__PURE__ */ React7.createElement(Surface3, {
|
|
726
|
+
role: `deck-companion--${getCompanionId(companion.id)}`,
|
|
727
|
+
data,
|
|
728
|
+
fallback: PlankContentError,
|
|
729
|
+
placeholder: /* @__PURE__ */ React7.createElement(PlankLoading, null)
|
|
730
|
+
})), !hoistStatusbar && /* @__PURE__ */ React7.createElement("div", {
|
|
731
|
+
role: "contentinfo",
|
|
732
|
+
className: "flex flex-wrap justify-center items-center border-bs border-separator pbs-1 pbe-[max(env(safe-area-inset-bottom),0.25rem)]"
|
|
733
|
+
}, /* @__PURE__ */ React7.createElement(Surface3, {
|
|
734
|
+
role: "status-bar--r1-footer",
|
|
735
|
+
limit: 1
|
|
736
|
+
})));
|
|
737
|
+
};
|
|
738
|
+
|
|
739
|
+
// packages/plugins/plugin-deck/src/components/Sidebar/Sidebar.tsx
|
|
740
|
+
import React8, { useMemo as useMemo4 } from "react";
|
|
741
|
+
import { Surface as Surface4, useCapability as useCapability4 } from "@dxos/app-framework";
|
|
834
742
|
import { Main as Main2 } from "@dxos/react-ui";
|
|
835
743
|
var label2 = [
|
|
836
744
|
"sidebar title",
|
|
@@ -854,20 +762,141 @@ var Sidebar = () => {
|
|
|
854
762
|
hoistStatusbar,
|
|
855
763
|
current
|
|
856
764
|
]);
|
|
857
|
-
return /* @__PURE__ */
|
|
765
|
+
return /* @__PURE__ */ React8.createElement(Main2.NavigationSidebar, {
|
|
858
766
|
label: label2,
|
|
859
767
|
classNames: [
|
|
860
768
|
"grid",
|
|
861
769
|
topbar && "block-start-[calc(env(safe-area-inset-top)+var(--rail-size))]",
|
|
862
770
|
hoistStatusbar && "block-end-[--statusbar-size]"
|
|
863
771
|
]
|
|
864
|
-
}, /* @__PURE__ */
|
|
772
|
+
}, /* @__PURE__ */ React8.createElement(Surface4, {
|
|
865
773
|
role: "navigation",
|
|
866
774
|
data: navigationData,
|
|
867
775
|
limit: 1
|
|
868
776
|
}));
|
|
869
777
|
};
|
|
870
778
|
|
|
779
|
+
// packages/plugins/plugin-deck/src/components/DeckLayout/Banner.tsx
|
|
780
|
+
var Banner = ({ variant, classNames }) => {
|
|
781
|
+
const { t } = useTranslation6(DECK_PLUGIN);
|
|
782
|
+
return /* @__PURE__ */ React9.createElement("header", {
|
|
783
|
+
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)
|
|
784
|
+
}, variant === "sidebar" ? /* @__PURE__ */ React9.createElement(CloseSidebarButton, null) : /* @__PURE__ */ React9.createElement(ToggleSidebarButton, null), /* @__PURE__ */ React9.createElement("span", {
|
|
785
|
+
className: "self-center grow mis-1"
|
|
786
|
+
}, t("current app name", {
|
|
787
|
+
ns: "appkit"
|
|
788
|
+
})), variant === "topbar" && /* @__PURE__ */ React9.createElement("div", {
|
|
789
|
+
role: "none",
|
|
790
|
+
className: "absolute inset-0 pointer-events-none"
|
|
791
|
+
}, /* @__PURE__ */ React9.createElement("div", {
|
|
792
|
+
role: "none",
|
|
793
|
+
className: "grid bs-full pointer-fine:p-1 max-is-md mli-auto pointer-events-auto"
|
|
794
|
+
}, /* @__PURE__ */ React9.createElement(Surface5, {
|
|
795
|
+
role: "search-input",
|
|
796
|
+
limit: 1
|
|
797
|
+
}))), /* @__PURE__ */ React9.createElement("span", {
|
|
798
|
+
role: "none",
|
|
799
|
+
className: "grow"
|
|
800
|
+
}), /* @__PURE__ */ React9.createElement(Surface5, {
|
|
801
|
+
role: "header-end",
|
|
802
|
+
limit: 1
|
|
803
|
+
}), /* @__PURE__ */ React9.createElement(Surface5, {
|
|
804
|
+
role: "notch-start",
|
|
805
|
+
limit: 1
|
|
806
|
+
}));
|
|
807
|
+
};
|
|
808
|
+
|
|
809
|
+
// packages/plugins/plugin-deck/src/components/DeckLayout/DeckLayout.tsx
|
|
810
|
+
import { untracked } from "@preact/signals-core";
|
|
811
|
+
import React17, { useCallback as useCallback5, useEffect as useEffect5, useMemo as useMemo5, useRef as useRef2, Fragment as Fragment4, useState as useState3 } from "react";
|
|
812
|
+
import { Capabilities, LayoutAction as LayoutAction4, Surface as Surface10, createIntent as createIntent5, useCapability as useCapability5, useIntentDispatcher as useIntentDispatcher5, usePluginManager } from "@dxos/app-framework";
|
|
813
|
+
import { AttentionCapabilities } from "@dxos/plugin-attention";
|
|
814
|
+
import { AlertDialog, Dialog as NaturalDialog, Main as Main3, Popover as Popover2, useMediaQuery, useOnTransition } from "@dxos/react-ui";
|
|
815
|
+
import { Stack, StackContext, DEFAULT_HORIZONTAL_SIZE } from "@dxos/react-ui-stack";
|
|
816
|
+
import { mainPaddingTransitions } from "@dxos/react-ui-theme";
|
|
817
|
+
|
|
818
|
+
// packages/plugins/plugin-deck/src/components/DeckLayout/ActiveNode.tsx
|
|
819
|
+
import React10 from "react";
|
|
820
|
+
import { Surface as Surface6, useAppGraph as useAppGraph4 } from "@dxos/app-framework";
|
|
821
|
+
import { useNode as useNode2 } from "@dxos/plugin-graph";
|
|
822
|
+
import { useAttended } from "@dxos/react-ui-attention";
|
|
823
|
+
var ActiveNode = () => {
|
|
824
|
+
const [id] = useAttended();
|
|
825
|
+
const { graph } = useAppGraph4();
|
|
826
|
+
const activeNode = useNode2(graph, id);
|
|
827
|
+
useNodeActionExpander(activeNode);
|
|
828
|
+
return /* @__PURE__ */ React10.createElement("div", {
|
|
829
|
+
role: "none",
|
|
830
|
+
className: "sr-only"
|
|
831
|
+
}, /* @__PURE__ */ React10.createElement(Surface6, {
|
|
832
|
+
role: "document-title",
|
|
833
|
+
data: {
|
|
834
|
+
subject: activeNode
|
|
835
|
+
},
|
|
836
|
+
limit: 1
|
|
837
|
+
}));
|
|
838
|
+
};
|
|
839
|
+
|
|
840
|
+
// packages/plugins/plugin-deck/src/components/DeckLayout/ContentEmpty.tsx
|
|
841
|
+
import React11 from "react";
|
|
842
|
+
import { Surface as Surface7 } from "@dxos/app-framework";
|
|
843
|
+
var ContentEmpty = () => {
|
|
844
|
+
const breakpoint = useBreakpoints();
|
|
845
|
+
const topbar = layoutAppliesTopbar(breakpoint);
|
|
846
|
+
return /* @__PURE__ */ React11.createElement("div", {
|
|
847
|
+
role: "none",
|
|
848
|
+
className: "grid place-items-center p-8 relative bg-deck",
|
|
849
|
+
"data-testid": "layoutPlugin.firstRunMessage"
|
|
850
|
+
}, /* @__PURE__ */ React11.createElement(Surface7, {
|
|
851
|
+
role: "keyshortcuts"
|
|
852
|
+
}), !topbar && /* @__PURE__ */ React11.createElement(ToggleSidebarButton, {
|
|
853
|
+
variant: "default",
|
|
854
|
+
classNames: fixedSidebarToggleStyles
|
|
855
|
+
}));
|
|
856
|
+
};
|
|
857
|
+
|
|
858
|
+
// packages/plugins/plugin-deck/src/components/DeckLayout/Fullscreen.tsx
|
|
859
|
+
import React13 from "react";
|
|
860
|
+
import { Surface as Surface8, useAppGraph as useAppGraph5 } from "@dxos/app-framework";
|
|
861
|
+
import { useNode as useNode3 } from "@dxos/plugin-graph";
|
|
862
|
+
import { fixedInsetFlexLayout } from "@dxos/react-ui-theme";
|
|
863
|
+
|
|
864
|
+
// packages/plugins/plugin-deck/src/components/DeckLayout/Fallback.tsx
|
|
865
|
+
import React12 from "react";
|
|
866
|
+
import { useTranslation as useTranslation7 } from "@dxos/react-ui";
|
|
867
|
+
import { errorText, mx as mx5 } from "@dxos/react-ui-theme";
|
|
868
|
+
var Fallback = () => {
|
|
869
|
+
const { t } = useTranslation7(DECK_PLUGIN);
|
|
870
|
+
return /* @__PURE__ */ React12.createElement("div", {
|
|
871
|
+
role: "none",
|
|
872
|
+
className: "min-bs-screen is-full flex items-center justify-center p-8"
|
|
873
|
+
}, /* @__PURE__ */ React12.createElement("p", {
|
|
874
|
+
role: "alert",
|
|
875
|
+
className: mx5(errorText, "border border-error-400/50 rounded-lg flex items-center justify-center p-8 font-normal text-lg")
|
|
876
|
+
}, t("plugin error message")));
|
|
877
|
+
};
|
|
878
|
+
|
|
879
|
+
// packages/plugins/plugin-deck/src/components/DeckLayout/constants.ts
|
|
880
|
+
var SURFACE_PREFIX = "surface:";
|
|
881
|
+
|
|
882
|
+
// packages/plugins/plugin-deck/src/components/DeckLayout/Fullscreen.tsx
|
|
883
|
+
var Fullscreen = ({ id }) => {
|
|
884
|
+
const { graph } = useAppGraph5();
|
|
885
|
+
const fullScreenNode = useNode3(graph, id);
|
|
886
|
+
return /* @__PURE__ */ React13.createElement("div", {
|
|
887
|
+
role: "none",
|
|
888
|
+
className: fixedInsetFlexLayout
|
|
889
|
+
}, /* @__PURE__ */ React13.createElement(Surface8, {
|
|
890
|
+
role: "main",
|
|
891
|
+
limit: 1,
|
|
892
|
+
fallback: Fallback,
|
|
893
|
+
data: {
|
|
894
|
+
subject: fullScreenNode?.data,
|
|
895
|
+
component: id?.startsWith(SURFACE_PREFIX) ? id.slice(SURFACE_PREFIX.length) : void 0
|
|
896
|
+
}
|
|
897
|
+
}));
|
|
898
|
+
};
|
|
899
|
+
|
|
871
900
|
// packages/plugins/plugin-deck/src/components/DeckLayout/StatusBar.tsx
|
|
872
901
|
import React14 from "react";
|
|
873
902
|
import { Surface as Surface9 } from "@dxos/app-framework";
|
|
@@ -889,9 +918,9 @@ var StatusBar = ({ showHints }) => {
|
|
|
889
918
|
|
|
890
919
|
// packages/plugins/plugin-deck/src/components/DeckLayout/Toast.tsx
|
|
891
920
|
import React15 from "react";
|
|
892
|
-
import { Button as Button2, Icon as Icon3, Toast as NaturalToast, toLocalizedString as toLocalizedString3, useTranslation as
|
|
921
|
+
import { Button as Button2, Icon as Icon3, Toast as NaturalToast, toLocalizedString as toLocalizedString3, useTranslation as useTranslation8 } from "@dxos/react-ui";
|
|
893
922
|
var Toast = ({ id, title, description, icon, duration, actionLabel, actionAlt, closeLabel, onAction, onOpenChange }) => {
|
|
894
|
-
const { t } =
|
|
923
|
+
const { t } = useTranslation8(DECK_PLUGIN);
|
|
895
924
|
return /* @__PURE__ */ React15.createElement(NaturalToast.Root, {
|
|
896
925
|
"data-testid": id,
|
|
897
926
|
defaultOpen: true,
|
|
@@ -933,8 +962,9 @@ var PlankSeparator = ({ order }) => order > 0 ? /* @__PURE__ */ React17.createEl
|
|
|
933
962
|
gridColumn: order
|
|
934
963
|
}
|
|
935
964
|
}) : null;
|
|
936
|
-
var DeckLayout = ({
|
|
965
|
+
var DeckLayout = ({ onDismissToast }) => {
|
|
937
966
|
const { dispatchPromise: dispatch } = useIntentDispatcher5();
|
|
967
|
+
const settings = useCapability5(Capabilities.SettingsStore).getStore(DECK_PLUGIN).value;
|
|
938
968
|
const context = useCapability5(DeckCapabilities.MutableDeckState);
|
|
939
969
|
const { sidebarState, complementarySidebarState, complementarySidebarPanel, dialogOpen, dialogContent, dialogBlockAlign, dialogType, popoverOpen, popoverContent, popoverAnchorId, deck, toasts } = context;
|
|
940
970
|
const { active, activeCompanions, fullscreen, solo, plankSizing } = deck;
|
|
@@ -944,13 +974,13 @@ var DeckLayout = ({ overscroll, showHints, onDismissToast }) => {
|
|
|
944
974
|
const pluginManager = usePluginManager();
|
|
945
975
|
const scrollLeftRef = useRef2();
|
|
946
976
|
const deckRef = useRef2(null);
|
|
947
|
-
const [delayedPopoverVisibility, setDelayedPopoverVisibility] =
|
|
948
|
-
|
|
977
|
+
const [delayedPopoverVisibility, setDelayedPopoverVisibility] = useState3(false);
|
|
978
|
+
useEffect5(() => {
|
|
949
979
|
popoverOpen ? setTimeout(() => setDelayedPopoverVisibility(true), 40) : setDelayedPopoverVisibility(false);
|
|
950
980
|
}, [
|
|
951
981
|
popoverOpen
|
|
952
982
|
]);
|
|
953
|
-
|
|
983
|
+
useEffect5(() => {
|
|
954
984
|
const attended = untracked(() => {
|
|
955
985
|
const attention = pluginManager.context.requestCapability(AttentionCapabilities.Attention);
|
|
956
986
|
return attention.current;
|
|
@@ -964,7 +994,7 @@ var DeckLayout = ({ overscroll, showHints, onDismissToast }) => {
|
|
|
964
994
|
ssr: false
|
|
965
995
|
});
|
|
966
996
|
const shouldRevert = useRef2(false);
|
|
967
|
-
|
|
997
|
+
useEffect5(() => {
|
|
968
998
|
if (!isNotMobile && getMode(deck) === "deck") {
|
|
969
999
|
const attended = untracked(() => {
|
|
970
1000
|
const attention = pluginManager.context.requestCapability(AttentionCapabilities.Attention);
|
|
@@ -991,10 +1021,25 @@ var DeckLayout = ({ overscroll, showHints, onDismissToast }) => {
|
|
|
991
1021
|
deck,
|
|
992
1022
|
dispatch
|
|
993
1023
|
]);
|
|
1024
|
+
useEffect5(() => {
|
|
1025
|
+
if (!settings.enableDeck) {
|
|
1026
|
+
void dispatch(createIntent5(LayoutAction4.SetLayoutMode, {
|
|
1027
|
+
part: "mode",
|
|
1028
|
+
subject: active[0],
|
|
1029
|
+
options: {
|
|
1030
|
+
mode: "solo"
|
|
1031
|
+
}
|
|
1032
|
+
}));
|
|
1033
|
+
}
|
|
1034
|
+
}, [
|
|
1035
|
+
settings.enableDeck,
|
|
1036
|
+
dispatch,
|
|
1037
|
+
active
|
|
1038
|
+
]);
|
|
994
1039
|
const handleResize = useCallback5(() => {
|
|
995
1040
|
scrollLeftRef.current = null;
|
|
996
1041
|
}, []);
|
|
997
|
-
|
|
1042
|
+
useEffect5(() => {
|
|
998
1043
|
window.addEventListener("resize", handleResize);
|
|
999
1044
|
return () => window.removeEventListener("resize", handleResize);
|
|
1000
1045
|
}, [
|
|
@@ -1016,13 +1061,13 @@ var DeckLayout = ({ overscroll, showHints, onDismissToast }) => {
|
|
|
1016
1061
|
]);
|
|
1017
1062
|
const isEmpty = !solo && active.length === 0;
|
|
1018
1063
|
const padding = useMemo5(() => {
|
|
1019
|
-
if (!solo && overscroll === "centering") {
|
|
1064
|
+
if (!solo && settings.overscroll === "centering") {
|
|
1020
1065
|
return calculateOverscroll(active.length);
|
|
1021
1066
|
}
|
|
1022
1067
|
return {};
|
|
1023
1068
|
}, [
|
|
1024
1069
|
solo,
|
|
1025
|
-
overscroll,
|
|
1070
|
+
settings.overscroll,
|
|
1026
1071
|
deck
|
|
1027
1072
|
]);
|
|
1028
1073
|
const mainPosition = useMemo5(() => [
|
|
@@ -1099,16 +1144,16 @@ var DeckLayout = ({ overscroll, showHints, onDismissToast }) => {
|
|
|
1099
1144
|
}), !topbar && /* @__PURE__ */ React17.createElement(ToggleComplementarySidebarButton, {
|
|
1100
1145
|
classNames: fixedComplementarySidebarToggleStyles
|
|
1101
1146
|
}), /* @__PURE__ */ React17.createElement(Stack, {
|
|
1147
|
+
ref: deckRef,
|
|
1102
1148
|
orientation: "horizontal",
|
|
1103
1149
|
size: "contain",
|
|
1104
1150
|
classNames: [
|
|
1105
1151
|
"absolute inset-block-0 -inset-inline-px",
|
|
1106
1152
|
mainPaddingTransitions
|
|
1107
1153
|
],
|
|
1108
|
-
onScroll: handleScroll,
|
|
1109
1154
|
itemsCount: itemsCount - 1,
|
|
1110
1155
|
style: padding,
|
|
1111
|
-
|
|
1156
|
+
onScroll: handleScroll
|
|
1112
1157
|
}, active.map((entryId) => /* @__PURE__ */ React17.createElement(Fragment4, {
|
|
1113
1158
|
key: entryId
|
|
1114
1159
|
}, /* @__PURE__ */ React17.createElement(PlankSeparator, {
|
|
@@ -1119,7 +1164,8 @@ var DeckLayout = ({ overscroll, showHints, onDismissToast }) => {
|
|
|
1119
1164
|
part: "deck",
|
|
1120
1165
|
order: order[entryId],
|
|
1121
1166
|
active,
|
|
1122
|
-
layoutMode
|
|
1167
|
+
layoutMode,
|
|
1168
|
+
settings
|
|
1123
1169
|
}))))), /* @__PURE__ */ React17.createElement("div", {
|
|
1124
1170
|
role: "none",
|
|
1125
1171
|
className: solo ? "relative bg-deck overflow-hidden" : "sr-only",
|
|
@@ -1140,9 +1186,10 @@ var DeckLayout = ({ overscroll, showHints, onDismissToast }) => {
|
|
|
1140
1186
|
id: solo,
|
|
1141
1187
|
companionId: solo ? activeCompanions?.[solo] : void 0,
|
|
1142
1188
|
part: "solo",
|
|
1143
|
-
layoutMode
|
|
1189
|
+
layoutMode,
|
|
1190
|
+
settings
|
|
1144
1191
|
})))), topbar && /* @__PURE__ */ React17.createElement(Topbar, null), hoistStatusbar && /* @__PURE__ */ React17.createElement(StatusBar, {
|
|
1145
|
-
showHints
|
|
1192
|
+
showHints: settings.showHints
|
|
1146
1193
|
})), /* @__PURE__ */ React17.createElement(Popover2.Portal, null, /* @__PURE__ */ React17.createElement(Popover2.Content, {
|
|
1147
1194
|
side: context.popoverSide,
|
|
1148
1195
|
onEscapeKeyDown: handlePopoverClose
|
|
@@ -1182,16 +1229,22 @@ var DeckLayout = ({ overscroll, showHints, onDismissToast }) => {
|
|
|
1182
1229
|
})));
|
|
1183
1230
|
};
|
|
1184
1231
|
|
|
1185
|
-
// packages/plugins/plugin-deck/src/components/
|
|
1232
|
+
// packages/plugins/plugin-deck/src/components/DeckSettings/DeckSettings.tsx
|
|
1186
1233
|
import React18 from "react";
|
|
1187
|
-
import { Input, Select, useTranslation as
|
|
1234
|
+
import { Input, Select, useTranslation as useTranslation9 } from "@dxos/react-ui";
|
|
1188
1235
|
import { DeprecatedFormContainer, DeprecatedFormInput } from "@dxos/react-ui-form";
|
|
1189
1236
|
var isSocket = !!globalThis.__args;
|
|
1190
|
-
var
|
|
1191
|
-
const { t } =
|
|
1237
|
+
var DeckSettings = ({ settings }) => {
|
|
1238
|
+
const { t } = useTranslation9(DECK_PLUGIN);
|
|
1192
1239
|
return /* @__PURE__ */ React18.createElement(DeprecatedFormContainer, null, /* @__PURE__ */ React18.createElement(DeprecatedFormInput, {
|
|
1240
|
+
label: t("settings enable deck label")
|
|
1241
|
+
}, /* @__PURE__ */ React18.createElement(Input.Switch, {
|
|
1242
|
+
checked: settings.enableDeck,
|
|
1243
|
+
onCheckedChange: (checked) => settings.enableDeck = checked
|
|
1244
|
+
})), /* @__PURE__ */ React18.createElement(DeprecatedFormInput, {
|
|
1193
1245
|
label: t("select new plank positioning label")
|
|
1194
1246
|
}, /* @__PURE__ */ React18.createElement(Select.Root, {
|
|
1247
|
+
disabled: !settings.enableDeck,
|
|
1195
1248
|
value: settings.newPlankPositioning ?? "start",
|
|
1196
1249
|
onValueChange: (value) => settings.newPlankPositioning = value
|
|
1197
1250
|
}, /* @__PURE__ */ React18.createElement(Select.TriggerButton, {
|
|
@@ -1202,6 +1255,7 @@ var LayoutSettings = ({ settings }) => {
|
|
|
1202
1255
|
}, t(`settings new plank position ${position} label`)))))))), /* @__PURE__ */ React18.createElement(DeprecatedFormInput, {
|
|
1203
1256
|
label: t("settings overscroll label")
|
|
1204
1257
|
}, /* @__PURE__ */ React18.createElement(Select.Root, {
|
|
1258
|
+
disabled: !settings.enableDeck,
|
|
1205
1259
|
value: settings.overscroll ?? "none",
|
|
1206
1260
|
onValueChange: (value) => settings.overscroll = value
|
|
1207
1261
|
}, /* @__PURE__ */ React18.createElement(Select.TriggerButton, {
|
|
@@ -1210,6 +1264,11 @@ var LayoutSettings = ({ settings }) => {
|
|
|
1210
1264
|
key: option,
|
|
1211
1265
|
value: option
|
|
1212
1266
|
}, t(`settings overscroll ${option} label`)))))))), /* @__PURE__ */ React18.createElement(DeprecatedFormInput, {
|
|
1267
|
+
label: t("settings enable statusbar label")
|
|
1268
|
+
}, /* @__PURE__ */ React18.createElement(Input.Switch, {
|
|
1269
|
+
checked: settings.enableStatusbar,
|
|
1270
|
+
onCheckedChange: (checked) => settings.enableStatusbar = checked
|
|
1271
|
+
})), /* @__PURE__ */ React18.createElement(DeprecatedFormInput, {
|
|
1213
1272
|
label: t("settings show hints label")
|
|
1214
1273
|
}, /* @__PURE__ */ React18.createElement(Input.Switch, {
|
|
1215
1274
|
checked: settings.showHints,
|
|
@@ -1219,17 +1278,12 @@ var LayoutSettings = ({ settings }) => {
|
|
|
1219
1278
|
}, /* @__PURE__ */ React18.createElement(Input.Switch, {
|
|
1220
1279
|
checked: settings.enableNativeRedirect,
|
|
1221
1280
|
onCheckedChange: (checked) => settings.enableNativeRedirect = checked
|
|
1222
|
-
})), /* @__PURE__ */ React18.createElement(DeprecatedFormInput, {
|
|
1223
|
-
label: t("settings enable statusbar label")
|
|
1224
|
-
}, /* @__PURE__ */ React18.createElement(Input.Switch, {
|
|
1225
|
-
checked: settings.enableStatusbar,
|
|
1226
|
-
onCheckedChange: (checked) => settings.enableStatusbar = checked
|
|
1227
1281
|
})));
|
|
1228
1282
|
};
|
|
1229
1283
|
|
|
1230
1284
|
export {
|
|
1231
1285
|
Banner,
|
|
1232
1286
|
DeckLayout,
|
|
1233
|
-
|
|
1287
|
+
DeckSettings
|
|
1234
1288
|
};
|
|
1235
|
-
//# sourceMappingURL=chunk-
|
|
1289
|
+
//# sourceMappingURL=chunk-FJBMNSUC.mjs.map
|