@dxos/plugin-deck 0.6.12-staging.e11e696 → 0.6.12
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/index.mjs +103 -103
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/meta.json +1 -1
- package/dist/types/src/DeckPlugin.d.ts.map +1 -1
- package/dist/types/src/components/DeckLayout/ComplementarySidebar.d.ts +2 -2
- package/dist/types/src/components/DeckLayout/ComplementarySidebar.d.ts.map +1 -1
- package/dist/types/src/components/DeckLayout/DeckLayout.d.ts +3 -2
- package/dist/types/src/components/DeckLayout/DeckLayout.d.ts.map +1 -1
- package/dist/types/src/components/DeckLayout/NodePlankHeading.d.ts +3 -2
- package/dist/types/src/components/DeckLayout/NodePlankHeading.d.ts.map +1 -1
- package/dist/types/src/components/DeckLayout/Sidebar.d.ts +3 -2
- package/dist/types/src/components/DeckLayout/Sidebar.d.ts.map +1 -1
- package/dist/types/src/hooks/useNode.d.ts.map +1 -1
- package/dist/types/src/layout.d.ts.map +1 -1
- package/package.json +29 -29
- package/src/DeckPlugin.tsx +51 -79
- package/src/components/DeckLayout/ComplementarySidebar.tsx +19 -20
- package/src/components/DeckLayout/DeckLayout.tsx +49 -38
- package/src/components/DeckLayout/NodePlankHeading.tsx +14 -12
- package/src/components/DeckLayout/Plank.tsx +2 -2
- package/src/components/DeckLayout/Sidebar.tsx +5 -6
- package/src/hooks/useNode.ts +1 -5
- package/src/layout.ts +0 -1
|
@@ -4,10 +4,11 @@ import {
|
|
|
4
4
|
} from "./chunk-YVHGFQQR.mjs";
|
|
5
5
|
|
|
6
6
|
// packages/plugins/plugin-deck/src/DeckPlugin.tsx
|
|
7
|
+
import { ArrowsOut } from "@phosphor-icons/react";
|
|
7
8
|
import { batch, effect } from "@preact/signals-core";
|
|
8
9
|
import { setAutoFreeze } from "immer";
|
|
9
10
|
import React15 from "react";
|
|
10
|
-
import { IntentAction, LayoutAction as LayoutAction3, NavigationAction as NavigationAction3, parseGraphPlugin, parseIntentPlugin, resolvePlugin, Toast as ToastSchema, SLUG_PATH_SEPARATOR as
|
|
11
|
+
import { IntentAction, LayoutAction as LayoutAction3, NavigationAction as NavigationAction3, parseGraphPlugin, parseIntentPlugin, resolvePlugin, Toast as ToastSchema, SLUG_PATH_SEPARATOR as SLUG_PATH_SEPARATOR5, isLayoutParts, isLayoutAdjustment, isLayoutMode, openIds as openIds2 } from "@dxos/app-framework";
|
|
11
12
|
import { create, getTypename, isReactiveObject } from "@dxos/echo-schema";
|
|
12
13
|
import { LocalStorageStore } from "@dxos/local-storage";
|
|
13
14
|
import { log } from "@dxos/log";
|
|
@@ -17,6 +18,7 @@ import { createExtension } from "@dxos/plugin-graph";
|
|
|
17
18
|
import { ObservabilityAction } from "@dxos/plugin-observability/meta";
|
|
18
19
|
import { fullyQualifiedId } from "@dxos/react-client/echo";
|
|
19
20
|
import { translations as deckTranslations } from "@dxos/react-ui-deck";
|
|
21
|
+
import { Mosaic } from "@dxos/react-ui-mosaic";
|
|
20
22
|
|
|
21
23
|
// packages/plugins/plugin-deck/src/components/DeckLayout/constants.ts
|
|
22
24
|
var NAV_ID = "NavTree";
|
|
@@ -24,10 +26,9 @@ var SURFACE_PREFIX = "surface:";
|
|
|
24
26
|
|
|
25
27
|
// packages/plugins/plugin-deck/src/components/DeckLayout/DeckLayout.tsx
|
|
26
28
|
import { Sidebar as MenuIcon } from "@phosphor-icons/react";
|
|
27
|
-
import React13, { useCallback as useCallback2, useEffect as useEffect5, useMemo as useMemo2, useRef as useRef2 } from "react";
|
|
28
|
-
import { Surface as Surface9, firstIdInPart, usePlugin } from "@dxos/app-framework";
|
|
29
|
-
import { Button as Button3, Dialog, Main as Main3, Popover as Popover2,
|
|
30
|
-
import { useAttended as useAttended3 } from "@dxos/react-ui-attention";
|
|
29
|
+
import React13, { useCallback as useCallback2, useEffect as useEffect5, useMemo as useMemo2, useRef as useRef2, useState as useState3, useLayoutEffect as useLayoutEffect2 } from "react";
|
|
30
|
+
import { SLUG_PATH_SEPARATOR as SLUG_PATH_SEPARATOR3, Surface as Surface9, firstIdInPart, usePlugin } from "@dxos/app-framework";
|
|
31
|
+
import { Button as Button3, Dialog, Main as Main3, Popover as Popover2, useTranslation as useTranslation5 } from "@dxos/react-ui";
|
|
31
32
|
import { Deck } from "@dxos/react-ui-deck";
|
|
32
33
|
import { getSize } from "@dxos/react-ui-theme";
|
|
33
34
|
|
|
@@ -39,11 +40,8 @@ import { useGraph } from "@dxos/plugin-graph";
|
|
|
39
40
|
// packages/plugins/plugin-deck/src/hooks/useNode.ts
|
|
40
41
|
import { useEffect, useState } from "react";
|
|
41
42
|
var useNode = (graph, id, timeout) => {
|
|
42
|
-
const [nodeState, setNodeState] = useState(id ? graph.findNode(id
|
|
43
|
+
const [nodeState, setNodeState] = useState(id ? graph.findNode(id) : void 0);
|
|
43
44
|
useEffect(() => {
|
|
44
|
-
if (!id && nodeState) {
|
|
45
|
-
setNodeState(void 0);
|
|
46
|
-
}
|
|
47
45
|
if (nodeState?.id === id || !id) {
|
|
48
46
|
return;
|
|
49
47
|
}
|
|
@@ -119,21 +117,32 @@ import React5 from "react";
|
|
|
119
117
|
import { SLUG_PATH_SEPARATOR as SLUG_PATH_SEPARATOR2, Surface as Surface3 } from "@dxos/app-framework";
|
|
120
118
|
import { useGraph as useGraph3 } from "@dxos/plugin-graph";
|
|
121
119
|
import { Main } from "@dxos/react-ui";
|
|
122
|
-
import {
|
|
120
|
+
import { createAttendableAttributes } from "@dxos/react-ui-attention";
|
|
123
121
|
import { deckGrid } from "@dxos/react-ui-deck";
|
|
124
122
|
import { mx as mx2 } from "@dxos/react-ui-theme";
|
|
125
123
|
|
|
126
124
|
// packages/plugins/plugin-deck/src/components/DeckLayout/NodePlankHeading.tsx
|
|
125
|
+
import { Placeholder } from "@phosphor-icons/react";
|
|
127
126
|
import React2, { Fragment, useEffect as useEffect3 } from "react";
|
|
128
|
-
import { LayoutAction, NavigationAction, SLUG_PATH_SEPARATOR, Surface as Surface2, useIntentDispatcher, indexInPart, partLength } from "@dxos/app-framework";
|
|
127
|
+
import { LayoutAction, NavigationAction, SLUG_COLLECTION_INDICATOR, SLUG_PATH_SEPARATOR, Surface as Surface2, useIntentDispatcher, indexInPart, partLength } from "@dxos/app-framework";
|
|
129
128
|
import { useGraph as useGraph2 } from "@dxos/plugin-graph";
|
|
130
|
-
import {
|
|
131
|
-
import { PlankHeading } from "@dxos/react-ui-deck";
|
|
129
|
+
import { Popover, toLocalizedString, useMediaQuery, useTranslation } from "@dxos/react-ui";
|
|
130
|
+
import { PlankHeading, plankHeadingIconProps } from "@dxos/react-ui-deck";
|
|
132
131
|
import { TextTooltip } from "@dxos/react-ui-text-tooltip";
|
|
133
|
-
var NodePlankHeading = ({
|
|
132
|
+
var NodePlankHeading = ({
|
|
133
|
+
node,
|
|
134
|
+
id,
|
|
135
|
+
layoutParts,
|
|
136
|
+
layoutPart,
|
|
137
|
+
// TODO(wittjosiah): Unused?
|
|
138
|
+
layoutEntry,
|
|
139
|
+
popoverAnchorId,
|
|
140
|
+
pending,
|
|
141
|
+
flatDeck
|
|
142
|
+
}) => {
|
|
134
143
|
const { t } = useTranslation(DECK_PLUGIN);
|
|
135
144
|
const { graph } = useGraph2();
|
|
136
|
-
const
|
|
145
|
+
const Icon = node?.properties?.icon ?? Placeholder;
|
|
137
146
|
const label = pending ? t("pending heading") : toLocalizedString(node?.properties?.label ?? [
|
|
138
147
|
"plank heading fallback label",
|
|
139
148
|
{
|
|
@@ -163,8 +172,7 @@ var NodePlankHeading = ({ node, id, layoutParts, layoutPart, popoverAnchorId, pe
|
|
|
163
172
|
return /* @__PURE__ */ React2.createElement(PlankHeading.Root, (layoutPart !== "main" || !flatDeck) && {
|
|
164
173
|
classNames: "pie-1 border-b border-separator"
|
|
165
174
|
}, /* @__PURE__ */ React2.createElement(ActionRoot, null, node ? /* @__PURE__ */ React2.createElement(PlankHeading.ActionsMenu, {
|
|
166
|
-
|
|
167
|
-
related: layoutPart === "complementary",
|
|
175
|
+
Icon,
|
|
168
176
|
attendableId,
|
|
169
177
|
triggerLabel: t("actions menu label"),
|
|
170
178
|
actions: graph.actions(node),
|
|
@@ -179,15 +187,11 @@ var NodePlankHeading = ({ node, id, layoutParts, layoutPart, popoverAnchorId, pe
|
|
|
179
187
|
}
|
|
180
188
|
})) : /* @__PURE__ */ React2.createElement(PlankHeading.Button, null, /* @__PURE__ */ React2.createElement("span", {
|
|
181
189
|
className: "sr-only"
|
|
182
|
-
}, label), /* @__PURE__ */ React2.createElement(Icon, {
|
|
183
|
-
icon,
|
|
184
|
-
size: 5
|
|
185
|
-
}))), /* @__PURE__ */ React2.createElement(TextTooltip, {
|
|
190
|
+
}, label), /* @__PURE__ */ React2.createElement(Icon, plankHeadingIconProps))), /* @__PURE__ */ React2.createElement(TextTooltip, {
|
|
186
191
|
text: label,
|
|
187
192
|
onlyWhenTruncating: true
|
|
188
193
|
}, /* @__PURE__ */ React2.createElement(PlankHeading.Label, {
|
|
189
|
-
attendableId,
|
|
190
|
-
related: layoutPart === "complementary",
|
|
194
|
+
attendableId: node?.id,
|
|
191
195
|
...pending && {
|
|
192
196
|
classNames: "text-description"
|
|
193
197
|
}
|
|
@@ -233,6 +237,9 @@ var NodePlankHeading = ({ node, id, layoutParts, layoutPart, popoverAnchorId, pe
|
|
|
233
237
|
action: NavigationAction.CLOSE,
|
|
234
238
|
data: {
|
|
235
239
|
activeParts: {
|
|
240
|
+
complementary: [
|
|
241
|
+
`${id}${SLUG_PATH_SEPARATOR}comments${SLUG_COLLECTION_INDICATOR}`
|
|
242
|
+
],
|
|
236
243
|
[layoutPart]: [
|
|
237
244
|
id
|
|
238
245
|
]
|
|
@@ -246,7 +253,7 @@ var NodePlankHeading = ({ node, id, layoutParts, layoutPart, popoverAnchorId, pe
|
|
|
246
253
|
}
|
|
247
254
|
});
|
|
248
255
|
},
|
|
249
|
-
close:
|
|
256
|
+
close: layoutCoordinate?.part === "complementary" ? "minify-end" : true
|
|
250
257
|
}));
|
|
251
258
|
};
|
|
252
259
|
|
|
@@ -307,14 +314,13 @@ var LayoutContext = createContext(null);
|
|
|
307
314
|
var useLayout = () => useContext(LayoutContext) ?? raise(new Error("Missing LayoutContext"));
|
|
308
315
|
|
|
309
316
|
// packages/plugins/plugin-deck/src/components/DeckLayout/ComplementarySidebar.tsx
|
|
310
|
-
var ComplementarySidebar = ({
|
|
317
|
+
var ComplementarySidebar = ({ id, layoutParts, flatDeck }) => {
|
|
311
318
|
const { popoverAnchorId } = useLayout();
|
|
312
|
-
const attended = useAttended();
|
|
313
|
-
const id = attended[0] ? `${attended[0]}${SLUG_PATH_SEPARATOR2}${context}` : void 0;
|
|
314
319
|
const { graph } = useGraph3();
|
|
315
320
|
const node = useNode(graph, id);
|
|
321
|
+
const complementaryAttrs = createAttendableAttributes(id?.split(SLUG_PATH_SEPARATOR2)[0] ?? "never");
|
|
316
322
|
useNodeActionExpander(node);
|
|
317
|
-
return /* @__PURE__ */ React5.createElement(Main.ComplementarySidebar,
|
|
323
|
+
return /* @__PURE__ */ React5.createElement(Main.ComplementarySidebar, complementaryAttrs, node ? /* @__PURE__ */ React5.createElement("div", {
|
|
318
324
|
role: "none",
|
|
319
325
|
className: mx2(deckGrid, "grid-cols-1 bs-full")
|
|
320
326
|
}, /* @__PURE__ */ React5.createElement(NodePlankHeading, {
|
|
@@ -324,17 +330,17 @@ var ComplementarySidebar = ({ context, layoutParts, flatDeck }) => {
|
|
|
324
330
|
layoutPart: "complementary",
|
|
325
331
|
popoverAnchorId,
|
|
326
332
|
flatDeck
|
|
327
|
-
}),
|
|
333
|
+
}), /* @__PURE__ */ React5.createElement(Surface3, {
|
|
328
334
|
role: "article",
|
|
329
335
|
data: {
|
|
330
|
-
subject: node.
|
|
336
|
+
subject: node.data,
|
|
331
337
|
part: "complementary",
|
|
332
338
|
popoverAnchorId
|
|
333
339
|
},
|
|
334
340
|
limit: 1,
|
|
335
341
|
fallback: PlankContentError,
|
|
336
342
|
placeholder: /* @__PURE__ */ React5.createElement(PlankLoading, null)
|
|
337
|
-
})));
|
|
343
|
+
})) : null);
|
|
338
344
|
};
|
|
339
345
|
|
|
340
346
|
// packages/plugins/plugin-deck/src/components/DeckLayout/ContentEmpty.tsx
|
|
@@ -399,7 +405,7 @@ import { LayoutAction as LayoutAction2, NavigationAction as NavigationAction2, S
|
|
|
399
405
|
import { debounce } from "@dxos/async";
|
|
400
406
|
import { useGraph as useGraph5 } from "@dxos/plugin-graph";
|
|
401
407
|
import { Button, Tooltip, useTranslation as useTranslation4 } from "@dxos/react-ui";
|
|
402
|
-
import {
|
|
408
|
+
import { createAttendableAttributes as createAttendableAttributes2 } from "@dxos/react-ui-attention";
|
|
403
409
|
import { Plank as NaturalPlank } from "@dxos/react-ui-deck";
|
|
404
410
|
import { mainIntrinsicSize } from "@dxos/react-ui-theme";
|
|
405
411
|
|
|
@@ -419,7 +425,7 @@ var Plank = ({ entry, layoutParts, part, flatDeck, searchEnabled, layoutMode })
|
|
|
419
425
|
const node = useNode(graph, entry.id);
|
|
420
426
|
const rootElement = useRef(null);
|
|
421
427
|
const resizeable = layoutMode === "deck";
|
|
422
|
-
const attendableAttrs =
|
|
428
|
+
const attendableAttrs = createAttendableAttributes2(entry.id);
|
|
423
429
|
const coordinate = {
|
|
424
430
|
part,
|
|
425
431
|
entryId: entry.id
|
|
@@ -546,10 +552,8 @@ var Plank = ({ entry, layoutParts, part, flatDeck, searchEnabled, layoutMode })
|
|
|
546
552
|
import React10, { useMemo } from "react";
|
|
547
553
|
import { openIds, Surface as Surface7 } from "@dxos/app-framework";
|
|
548
554
|
import { Main as Main2 } from "@dxos/react-ui";
|
|
549
|
-
|
|
550
|
-
var Sidebar = ({ layoutParts }) => {
|
|
555
|
+
var Sidebar = ({ attention, layoutParts }) => {
|
|
551
556
|
const { layoutMode, popoverAnchorId } = useLayout();
|
|
552
|
-
const attended = useAttended2();
|
|
553
557
|
const activeIds = useMemo(() => {
|
|
554
558
|
if (layoutMode === "solo") {
|
|
555
559
|
return new Set(layoutParts?.solo?.map((e) => e.id) ?? []);
|
|
@@ -564,11 +568,11 @@ var Sidebar = ({ layoutParts }) => {
|
|
|
564
568
|
const navigationData = useMemo(() => ({
|
|
565
569
|
popoverAnchorId,
|
|
566
570
|
activeIds,
|
|
567
|
-
attended
|
|
571
|
+
attended: attention.attended
|
|
568
572
|
}), [
|
|
569
573
|
popoverAnchorId,
|
|
570
574
|
activeIds,
|
|
571
|
-
attended
|
|
575
|
+
attention.attended
|
|
572
576
|
]);
|
|
573
577
|
return /* @__PURE__ */ React10.createElement(Main2.NavigationSidebar, null, /* @__PURE__ */ React10.createElement(Surface7, {
|
|
574
578
|
role: "navigation",
|
|
@@ -668,26 +672,20 @@ var calculateOverscroll = (planks, plankSizing, sidebarOpen, complementarySideba
|
|
|
668
672
|
};
|
|
669
673
|
|
|
670
674
|
// packages/plugins/plugin-deck/src/components/DeckLayout/DeckLayout.tsx
|
|
671
|
-
var DeckLayout = ({ layoutParts, toasts, flatDeck, overscroll, showHintsFooter, slots, onDismissToast }) => {
|
|
675
|
+
var DeckLayout = ({ layoutParts, attention, toasts, flatDeck, overscroll, showHintsFooter, slots, onDismissToast }) => {
|
|
672
676
|
const context = useLayout();
|
|
673
677
|
const { layoutMode, sidebarOpen, complementarySidebarOpen, dialogOpen, dialogContent, dialogBlockAlign, popoverOpen, popoverContent, popoverAnchorId } = context;
|
|
674
678
|
const { t } = useTranslation5(DECK_PLUGIN);
|
|
675
679
|
const { plankSizing } = useDeckContext();
|
|
676
|
-
const attended = useAttended3();
|
|
677
680
|
const searchPlugin = usePlugin("dxos.org/plugin/search");
|
|
678
681
|
const fullScreenSlug = useMemo2(() => firstIdInPart(layoutParts, "fullScreen"), [
|
|
679
682
|
layoutParts
|
|
680
683
|
]);
|
|
681
|
-
const
|
|
684
|
+
const [scrollLeft, setScrollLeft] = useState3(null);
|
|
682
685
|
const deckRef = useRef2(null);
|
|
683
|
-
|
|
684
|
-
const firstId = layoutMode === "solo" ? firstIdInPart(layoutParts, "solo") : firstIdInPart(layoutParts, "main");
|
|
685
|
-
if (attended.length === 0 && firstId) {
|
|
686
|
-
document.querySelector(`article[data-attendable-id="${firstId}"] button`)?.focus();
|
|
687
|
-
}
|
|
688
|
-
}, []);
|
|
686
|
+
const restoreScrollRef = useRef2(false);
|
|
689
687
|
const handleResize = useCallback2(() => {
|
|
690
|
-
|
|
688
|
+
setScrollLeft(null);
|
|
691
689
|
}, []);
|
|
692
690
|
useEffect5(() => {
|
|
693
691
|
window.addEventListener("resize", handleResize);
|
|
@@ -695,20 +693,36 @@ var DeckLayout = ({ layoutParts, toasts, flatDeck, overscroll, showHintsFooter,
|
|
|
695
693
|
}, [
|
|
696
694
|
handleResize
|
|
697
695
|
]);
|
|
698
|
-
|
|
699
|
-
if (
|
|
700
|
-
|
|
696
|
+
useLayoutEffect2(() => {
|
|
697
|
+
if (layoutMode !== "deck") {
|
|
698
|
+
restoreScrollRef.current = true;
|
|
699
|
+
} else if (restoreScrollRef.current && deckRef.current && scrollLeft) {
|
|
700
|
+
deckRef.current.scrollLeft = scrollLeft;
|
|
701
|
+
restoreScrollRef.current = false;
|
|
701
702
|
}
|
|
702
|
-
}, [
|
|
703
|
-
|
|
703
|
+
}, [
|
|
704
|
+
layoutMode,
|
|
705
|
+
deckRef.current,
|
|
706
|
+
scrollLeft
|
|
707
|
+
]);
|
|
704
708
|
const handleScroll = useCallback2((event) => {
|
|
705
709
|
if (layoutMode === "deck" && event.currentTarget === event.target) {
|
|
706
|
-
|
|
710
|
+
setScrollLeft(event.target.scrollLeft);
|
|
707
711
|
}
|
|
708
712
|
}, [
|
|
709
713
|
layoutMode
|
|
710
714
|
]);
|
|
711
|
-
const
|
|
715
|
+
const complementarySlug = useMemo2(() => {
|
|
716
|
+
const entry = layoutParts.complementary?.at(0);
|
|
717
|
+
if (entry) {
|
|
718
|
+
return entry.path ? `${entry.id}${SLUG_PATH_SEPARATOR3}${entry.path}` : entry.id;
|
|
719
|
+
}
|
|
720
|
+
}, [
|
|
721
|
+
layoutParts
|
|
722
|
+
]);
|
|
723
|
+
const firstAttendedId = useMemo2(() => Array.from(attention.attended ?? [])[0], [
|
|
724
|
+
attention.attended
|
|
725
|
+
]);
|
|
712
726
|
useEffect5(() => {
|
|
713
727
|
if (layoutMode === "deck" && firstAttendedId) {
|
|
714
728
|
}
|
|
@@ -730,19 +744,7 @@ var DeckLayout = ({ layoutParts, toasts, flatDeck, overscroll, showHintsFooter,
|
|
|
730
744
|
layoutParts.main,
|
|
731
745
|
layoutParts.solo
|
|
732
746
|
]);
|
|
733
|
-
const padding =
|
|
734
|
-
if (layoutMode === "deck" && overscroll === "centering") {
|
|
735
|
-
return calculateOverscroll(layoutParts.main, plankSizing, sidebarOpen, complementarySidebarOpen);
|
|
736
|
-
}
|
|
737
|
-
return {};
|
|
738
|
-
}, [
|
|
739
|
-
layoutMode,
|
|
740
|
-
overscroll,
|
|
741
|
-
layoutParts.main,
|
|
742
|
-
plankSizing,
|
|
743
|
-
sidebarOpen,
|
|
744
|
-
complementarySidebarOpen
|
|
745
|
-
]);
|
|
747
|
+
const padding = layoutMode === "deck" && overscroll === "centering" ? calculateOverscroll(layoutParts.main, plankSizing, sidebarOpen, complementarySidebarOpen) : {};
|
|
746
748
|
if (layoutMode === "fullscreen") {
|
|
747
749
|
return /* @__PURE__ */ React13.createElement(Fullscreen, {
|
|
748
750
|
id: fullScreenSlug
|
|
@@ -764,13 +766,19 @@ var DeckLayout = ({ layoutParts, toasts, flatDeck, overscroll, showHintsFooter,
|
|
|
764
766
|
}), /* @__PURE__ */ React13.createElement(Main3.Root, {
|
|
765
767
|
navigationSidebarOpen: context.sidebarOpen,
|
|
766
768
|
onNavigationSidebarOpenChange: (next) => context.sidebarOpen = next,
|
|
767
|
-
complementarySidebarOpen
|
|
768
|
-
|
|
769
|
+
...complementarySidebarOpen !== null && {
|
|
770
|
+
complementarySidebarOpen: (
|
|
771
|
+
/* complementaryAvailable && */
|
|
772
|
+
context.complementarySidebarOpen
|
|
773
|
+
),
|
|
774
|
+
onComplementarySidebarOpenChange: (next) => context.complementarySidebarOpen = next
|
|
775
|
+
}
|
|
769
776
|
}, /* @__PURE__ */ React13.createElement(Main3.Notch, {
|
|
770
777
|
classNames: "z-[21]"
|
|
771
778
|
}, /* @__PURE__ */ React13.createElement(Surface9, {
|
|
772
779
|
role: "notch-start"
|
|
773
780
|
}), /* @__PURE__ */ React13.createElement(Button3, {
|
|
781
|
+
// disabled={!sidebarAvailable}
|
|
774
782
|
onClick: () => context.sidebarOpen = !context.sidebarOpen,
|
|
775
783
|
variant: "ghost",
|
|
776
784
|
classNames: "p-1"
|
|
@@ -780,6 +788,7 @@ var DeckLayout = ({ layoutParts, toasts, flatDeck, overscroll, showHintsFooter,
|
|
|
780
788
|
weight: "light",
|
|
781
789
|
className: getSize(5)
|
|
782
790
|
})), /* @__PURE__ */ React13.createElement(Button3, {
|
|
791
|
+
// disabled={!complementaryAvailable}
|
|
783
792
|
onClick: () => context.complementarySidebarOpen = !context.complementarySidebarOpen,
|
|
784
793
|
variant: "ghost",
|
|
785
794
|
classNames: "p-1"
|
|
@@ -792,9 +801,10 @@ var DeckLayout = ({ layoutParts, toasts, flatDeck, overscroll, showHintsFooter,
|
|
|
792
801
|
})), /* @__PURE__ */ React13.createElement(Surface9, {
|
|
793
802
|
role: "notch-end"
|
|
794
803
|
})), /* @__PURE__ */ React13.createElement(Sidebar, {
|
|
804
|
+
attention,
|
|
795
805
|
layoutParts
|
|
796
806
|
}), /* @__PURE__ */ React13.createElement(ComplementarySidebar, {
|
|
797
|
-
|
|
807
|
+
id: complementarySlug,
|
|
798
808
|
layoutParts,
|
|
799
809
|
flatDeck
|
|
800
810
|
}), /* @__PURE__ */ React13.createElement(Main3.Overlay, null), parts.length === 0 && /* @__PURE__ */ React13.createElement(Main3.Content, {
|
|
@@ -922,7 +932,7 @@ var LayoutSettings = ({ settings }) => {
|
|
|
922
932
|
|
|
923
933
|
// packages/plugins/plugin-deck/src/layout.ts
|
|
924
934
|
import { produce } from "immer";
|
|
925
|
-
import { SLUG_ENTRY_SEPARATOR, SLUG_KEY_VALUE_SEPARATOR, SLUG_LIST_SEPARATOR, SLUG_PATH_SEPARATOR as
|
|
935
|
+
import { SLUG_ENTRY_SEPARATOR, SLUG_KEY_VALUE_SEPARATOR, SLUG_LIST_SEPARATOR, SLUG_PATH_SEPARATOR as SLUG_PATH_SEPARATOR4 } from "@dxos/app-framework";
|
|
926
936
|
var partsThatSupportIncrement = [
|
|
927
937
|
"main"
|
|
928
938
|
];
|
|
@@ -1035,7 +1045,7 @@ var mergeLayoutParts = (...layoutParts) => {
|
|
|
1035
1045
|
}), {});
|
|
1036
1046
|
};
|
|
1037
1047
|
var parseLayoutEntry = (itemString) => {
|
|
1038
|
-
const [id, path] = itemString.split(
|
|
1048
|
+
const [id, path] = itemString.split(SLUG_PATH_SEPARATOR4);
|
|
1039
1049
|
const entry = {
|
|
1040
1050
|
id
|
|
1041
1051
|
};
|
|
@@ -1062,7 +1072,7 @@ var soloPartToUri = (layout) => {
|
|
|
1062
1072
|
return "";
|
|
1063
1073
|
}
|
|
1064
1074
|
const entry = soloPart[0];
|
|
1065
|
-
return `${entry.id}${entry.path ?
|
|
1075
|
+
return `${entry.id}${entry.path ? SLUG_PATH_SEPARATOR4 + entry.path : ""}`;
|
|
1066
1076
|
};
|
|
1067
1077
|
|
|
1068
1078
|
// packages/plugins/plugin-deck/src/translations.ts
|
|
@@ -1217,20 +1227,6 @@ var DeckPlugin = ({ observability } = {}) => {
|
|
|
1217
1227
|
}
|
|
1218
1228
|
}
|
|
1219
1229
|
};
|
|
1220
|
-
const handleSetLocation = (next) => {
|
|
1221
|
-
if (attentionPlugin) {
|
|
1222
|
-
const attended = attentionPlugin.provides.attention.attended;
|
|
1223
|
-
const [attendedId] = Array.from(attended);
|
|
1224
|
-
const ids = (layout.values.layoutMode === "deck" ? next.main : next.solo)?.map(({ id }) => id) ?? [];
|
|
1225
|
-
const isAttendedAvailable = !!attendedId && ids.includes(attendedId);
|
|
1226
|
-
if (!isAttendedAvailable) {
|
|
1227
|
-
const nextAttended = next.main?.[0]?.id;
|
|
1228
|
-
const article = document.querySelector(`article[data-attendable-id="${nextAttended}"]`);
|
|
1229
|
-
article?.focus();
|
|
1230
|
-
}
|
|
1231
|
-
}
|
|
1232
|
-
location.values.active = next;
|
|
1233
|
-
};
|
|
1234
1230
|
return {
|
|
1235
1231
|
meta: meta_default,
|
|
1236
1232
|
ready: async (plugins) => {
|
|
@@ -1305,13 +1301,13 @@ var DeckPlugin = ({ observability } = {}) => {
|
|
|
1305
1301
|
handleNavigation = async () => {
|
|
1306
1302
|
const pathname = window.location.pathname;
|
|
1307
1303
|
if (pathname === "/reset") {
|
|
1308
|
-
|
|
1304
|
+
location.values.active = {
|
|
1309
1305
|
sidebar: [
|
|
1310
1306
|
{
|
|
1311
1307
|
id: NAV_ID
|
|
1312
1308
|
}
|
|
1313
1309
|
]
|
|
1314
|
-
}
|
|
1310
|
+
};
|
|
1315
1311
|
location.values.closed = [];
|
|
1316
1312
|
layout.values.layoutMode = "solo";
|
|
1317
1313
|
window.location.pathname = "/";
|
|
@@ -1322,7 +1318,7 @@ var DeckPlugin = ({ observability } = {}) => {
|
|
|
1322
1318
|
return;
|
|
1323
1319
|
}
|
|
1324
1320
|
const startingLayout = removePart(location.values.active, "solo");
|
|
1325
|
-
|
|
1321
|
+
location.values.active = mergeLayoutParts(layoutFromUri, startingLayout);
|
|
1326
1322
|
layout.values.layoutMode = "solo";
|
|
1327
1323
|
};
|
|
1328
1324
|
await handleNavigation();
|
|
@@ -1384,7 +1380,8 @@ var DeckPlugin = ({ observability } = {}) => {
|
|
|
1384
1380
|
ns: DECK_PLUGIN
|
|
1385
1381
|
}
|
|
1386
1382
|
],
|
|
1387
|
-
icon:
|
|
1383
|
+
icon: (props) => /* @__PURE__ */ React15.createElement(ArrowsOut, props),
|
|
1384
|
+
iconSymbol: "ph--arrows-out--regular",
|
|
1388
1385
|
keyBinding: {
|
|
1389
1386
|
macos: "ctrl+meta+f",
|
|
1390
1387
|
windows: "shift+ctrl+f"
|
|
@@ -1401,7 +1398,10 @@ var DeckPlugin = ({ observability } = {}) => {
|
|
|
1401
1398
|
value: deck.values
|
|
1402
1399
|
}, props.children)),
|
|
1403
1400
|
root: () => {
|
|
1404
|
-
return /* @__PURE__ */ React15.createElement(DeckLayout, {
|
|
1401
|
+
return /* @__PURE__ */ React15.createElement(Mosaic.Root, null, /* @__PURE__ */ React15.createElement(DeckLayout, {
|
|
1402
|
+
attention: attentionPlugin?.provides.attention ?? {
|
|
1403
|
+
attended: /* @__PURE__ */ new Set()
|
|
1404
|
+
},
|
|
1405
1405
|
layoutParts: location.values.active,
|
|
1406
1406
|
showHintsFooter: settings.values.showFooter,
|
|
1407
1407
|
overscroll: settings.values.overscroll,
|
|
@@ -1419,7 +1419,7 @@ var DeckPlugin = ({ observability } = {}) => {
|
|
|
1419
1419
|
}, 1e3);
|
|
1420
1420
|
}
|
|
1421
1421
|
}
|
|
1422
|
-
});
|
|
1422
|
+
}), /* @__PURE__ */ React15.createElement(Mosaic.DragOverlay, null));
|
|
1423
1423
|
},
|
|
1424
1424
|
surface: {
|
|
1425
1425
|
component: ({ data, role }) => {
|
|
@@ -1455,7 +1455,7 @@ var DeckPlugin = ({ observability } = {}) => {
|
|
|
1455
1455
|
} else {
|
|
1456
1456
|
log.warn("Invalid layout mode", intent?.data?.layoutMode, {
|
|
1457
1457
|
F: __dxlog_file,
|
|
1458
|
-
L:
|
|
1458
|
+
L: 390,
|
|
1459
1459
|
S: void 0,
|
|
1460
1460
|
C: (f, a) => f(...a)
|
|
1461
1461
|
});
|
|
@@ -1510,7 +1510,7 @@ var DeckPlugin = ({ observability } = {}) => {
|
|
|
1510
1510
|
}
|
|
1511
1511
|
const processLayoutEntry = (partName, entryString, currentLayout) => {
|
|
1512
1512
|
const toggle = true;
|
|
1513
|
-
const [id, path] = entryString.split(
|
|
1513
|
+
const [id, path] = entryString.split(SLUG_PATH_SEPARATOR5);
|
|
1514
1514
|
const layoutEntry = {
|
|
1515
1515
|
id,
|
|
1516
1516
|
...path ? {
|
|
@@ -1539,7 +1539,7 @@ var DeckPlugin = ({ observability } = {}) => {
|
|
|
1539
1539
|
newLayout = processLayoutEntry(partName, layoutEntries, newLayout);
|
|
1540
1540
|
}
|
|
1541
1541
|
});
|
|
1542
|
-
|
|
1542
|
+
location.values.active = newLayout;
|
|
1543
1543
|
});
|
|
1544
1544
|
const ids = openIds2(location.values.active);
|
|
1545
1545
|
const newlyOpen = ids.filter((i) => !previouslyOpenIds.has(i));
|
|
@@ -1587,10 +1587,10 @@ var DeckPlugin = ({ observability } = {}) => {
|
|
|
1587
1587
|
id: data.id
|
|
1588
1588
|
};
|
|
1589
1589
|
const effectivePart = getEffectivePart(data.part, layout.values.layoutMode);
|
|
1590
|
-
|
|
1590
|
+
location.values.active = openEntry(location.values.active, effectivePart, layoutEntry, {
|
|
1591
1591
|
positioning: data.positioning ?? settings.values.newPlankPositioning,
|
|
1592
1592
|
pivotId: data.pivotId
|
|
1593
|
-
})
|
|
1593
|
+
});
|
|
1594
1594
|
const intents = [];
|
|
1595
1595
|
if (data.scrollIntoView && layout.values.layoutMode === "deck") {
|
|
1596
1596
|
intents.push([
|
|
@@ -1632,7 +1632,7 @@ var DeckPlugin = ({ observability } = {}) => {
|
|
|
1632
1632
|
});
|
|
1633
1633
|
}
|
|
1634
1634
|
});
|
|
1635
|
-
|
|
1635
|
+
location.values.active = newLayout;
|
|
1636
1636
|
return {
|
|
1637
1637
|
data: true
|
|
1638
1638
|
};
|
|
@@ -1642,7 +1642,7 @@ var DeckPlugin = ({ observability } = {}) => {
|
|
|
1642
1642
|
case NavigationAction3.SET: {
|
|
1643
1643
|
return batch(() => {
|
|
1644
1644
|
if (isLayoutParts(intent.data?.activeParts)) {
|
|
1645
|
-
|
|
1645
|
+
location.values.active = intent.data.activeParts;
|
|
1646
1646
|
}
|
|
1647
1647
|
return {
|
|
1648
1648
|
data: true
|
|
@@ -1654,10 +1654,10 @@ var DeckPlugin = ({ observability } = {}) => {
|
|
|
1654
1654
|
if (isLayoutAdjustment(intent.data)) {
|
|
1655
1655
|
const adjustment = intent.data;
|
|
1656
1656
|
if (adjustment.type === "increment-end" || adjustment.type === "increment-start") {
|
|
1657
|
-
|
|
1657
|
+
location.values.active = incrementPlank(location.values.active, {
|
|
1658
1658
|
type: adjustment.type,
|
|
1659
1659
|
layoutCoordinate: adjustment.layoutCoordinate
|
|
1660
|
-
})
|
|
1660
|
+
});
|
|
1661
1661
|
}
|
|
1662
1662
|
if (adjustment.type === "solo") {
|
|
1663
1663
|
const entryId = adjustment.layoutCoordinate.entryId;
|