@dxos/plugin-deck 0.6.10-main.e92b5eb → 0.6.10-staging.014d6d3
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 +155 -93
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/types/src/components/DeckLayout/DeckLayout.d.ts.map +1 -1
- package/dist/types/src/components/DeckLayout/Plank.d.ts +3 -5
- package/dist/types/src/components/DeckLayout/Plank.d.ts.map +1 -1
- package/dist/types/src/components/DeckLayout/StatusBar.d.ts +3 -0
- package/dist/types/src/components/DeckLayout/StatusBar.d.ts.map +1 -0
- package/dist/types/src/hooks/index.d.ts +1 -0
- package/dist/types/src/hooks/index.d.ts.map +1 -1
- package/dist/types/src/hooks/useMainSize.d.ts +5 -0
- package/dist/types/src/hooks/useMainSize.d.ts.map +1 -0
- package/package.json +26 -26
- package/src/components/DeckLayout/DeckLayout.tsx +55 -29
- package/src/components/DeckLayout/Plank.tsx +22 -9
- package/src/components/DeckLayout/StatusBar.tsx +19 -0
- package/src/hooks/index.ts +1 -0
- package/src/hooks/useMainSize.ts +13 -0
|
@@ -7,7 +7,7 @@ import {
|
|
|
7
7
|
import { ArrowsOut } from "@phosphor-icons/react";
|
|
8
8
|
import { batch, effect } from "@preact/signals-core";
|
|
9
9
|
import { setAutoFreeze } from "immer";
|
|
10
|
-
import
|
|
10
|
+
import React15 from "react";
|
|
11
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";
|
|
12
12
|
import { create, getTypename, isReactiveObject } from "@dxos/echo-schema";
|
|
13
13
|
import { LocalStorageStore } from "@dxos/local-storage";
|
|
@@ -26,8 +26,8 @@ var SURFACE_PREFIX = "surface:";
|
|
|
26
26
|
|
|
27
27
|
// packages/plugins/plugin-deck/src/components/DeckLayout/DeckLayout.tsx
|
|
28
28
|
import { Sidebar as MenuIcon } from "@phosphor-icons/react";
|
|
29
|
-
import
|
|
30
|
-
import { SLUG_PATH_SEPARATOR as SLUG_PATH_SEPARATOR3, Surface as
|
|
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
31
|
import { Button as Button3, Dialog, Main as Main3, Popover as Popover2, useTranslation as useTranslation5 } from "@dxos/react-ui";
|
|
32
32
|
import { Deck } from "@dxos/react-ui-deck";
|
|
33
33
|
import { getSize } from "@dxos/react-ui-theme";
|
|
@@ -85,6 +85,16 @@ var useNodeActionExpander = (node) => {
|
|
|
85
85
|
]);
|
|
86
86
|
};
|
|
87
87
|
|
|
88
|
+
// packages/plugins/plugin-deck/src/hooks/useMainSize.ts
|
|
89
|
+
import { useMainContext } from "@dxos/react-ui";
|
|
90
|
+
var useMainSize = () => {
|
|
91
|
+
const { navigationSidebarOpen, complementarySidebarOpen } = useMainContext("DeckPluginPlank");
|
|
92
|
+
return {
|
|
93
|
+
"data-sidebar-inline-start-state": navigationSidebarOpen ? "open" : "closed",
|
|
94
|
+
"data-sidebar-inline-end-state": complementarySidebarOpen ? "open" : "closed"
|
|
95
|
+
};
|
|
96
|
+
};
|
|
97
|
+
|
|
88
98
|
// packages/plugins/plugin-deck/src/components/DeckLayout/ActiveNode.tsx
|
|
89
99
|
var ActiveNode = ({ id }) => {
|
|
90
100
|
const { graph } = useGraph();
|
|
@@ -397,6 +407,7 @@ import { useGraph as useGraph5 } from "@dxos/plugin-graph";
|
|
|
397
407
|
import { Button, Tooltip, useTranslation as useTranslation4 } from "@dxos/react-ui";
|
|
398
408
|
import { createAttendableAttributes as createAttendableAttributes2 } from "@dxos/react-ui-attention";
|
|
399
409
|
import { Plank as NaturalPlank } from "@dxos/react-ui-deck";
|
|
410
|
+
import { mainIntrinsicSize } from "@dxos/react-ui-theme";
|
|
400
411
|
|
|
401
412
|
// packages/plugins/plugin-deck/src/components/DeckContext.ts
|
|
402
413
|
import { createContext as createContext2, useContext as useContext2 } from "react";
|
|
@@ -405,7 +416,7 @@ var DeckContext = createContext2(null);
|
|
|
405
416
|
var useDeckContext = () => useContext2(DeckContext) ?? raise2(new Error("Missing DeckContext"));
|
|
406
417
|
|
|
407
418
|
// packages/plugins/plugin-deck/src/components/DeckLayout/Plank.tsx
|
|
408
|
-
var Plank = ({ entry, layoutParts, part,
|
|
419
|
+
var Plank = ({ entry, layoutParts, part, flatDeck, searchEnabled, layoutMode }) => {
|
|
409
420
|
const { t } = useTranslation4(DECK_PLUGIN);
|
|
410
421
|
const dispatch = useIntentDispatcher2();
|
|
411
422
|
const { popoverAnchorId, scrollIntoView } = useLayout();
|
|
@@ -413,6 +424,7 @@ var Plank = ({ entry, layoutParts, part, resizeable, flatDeck, searchEnabled, cl
|
|
|
413
424
|
const { graph } = useGraph5();
|
|
414
425
|
const node = useNode(graph, entry.id);
|
|
415
426
|
const rootElement = useRef(null);
|
|
427
|
+
const resizeable = layoutMode === "deck";
|
|
416
428
|
const attendableAttrs = createAttendableAttributes2(entry.id);
|
|
417
429
|
const coordinate = {
|
|
418
430
|
part,
|
|
@@ -438,25 +450,42 @@ var Plank = ({ entry, layoutParts, part, resizeable, flatDeck, searchEnabled, cl
|
|
|
438
450
|
}, []);
|
|
439
451
|
useLayoutEffect(() => {
|
|
440
452
|
if (scrollIntoView === entry.id) {
|
|
441
|
-
rootElement.current?.
|
|
453
|
+
rootElement.current?.focus({
|
|
454
|
+
preventScroll: true
|
|
455
|
+
});
|
|
456
|
+
layoutMode === "deck" && rootElement.current?.scrollIntoView({
|
|
442
457
|
behavior: "smooth",
|
|
443
458
|
inline: "center"
|
|
444
459
|
});
|
|
445
460
|
}
|
|
446
461
|
}, [
|
|
447
|
-
scrollIntoView
|
|
462
|
+
scrollIntoView,
|
|
463
|
+
layoutMode
|
|
448
464
|
]);
|
|
465
|
+
const isSolo = layoutMode === "solo" && part === "solo";
|
|
466
|
+
const isSuppressed = layoutMode === "solo" && part !== "solo";
|
|
467
|
+
const sizeAttrs = useMainSize();
|
|
449
468
|
return /* @__PURE__ */ React9.createElement(NaturalPlank.Root, {
|
|
450
469
|
size,
|
|
451
470
|
setSize,
|
|
452
|
-
classNames
|
|
471
|
+
classNames: [
|
|
472
|
+
isSuppressed && "!sr-only"
|
|
473
|
+
],
|
|
453
474
|
...attendableAttrs,
|
|
475
|
+
...isSuppressed && {
|
|
476
|
+
inert: ""
|
|
477
|
+
},
|
|
454
478
|
onKeyDown: handleKeyDown,
|
|
455
479
|
ref: rootElement
|
|
456
480
|
}, /* @__PURE__ */ React9.createElement(NaturalPlank.Content, {
|
|
481
|
+
...isSolo && sizeAttrs,
|
|
457
482
|
classNames: [
|
|
483
|
+
isSolo && mainIntrinsicSize,
|
|
458
484
|
!flatDeck && "bg-base"
|
|
459
|
-
]
|
|
485
|
+
],
|
|
486
|
+
style: isSolo ? {
|
|
487
|
+
inlineSize: ""
|
|
488
|
+
} : {}
|
|
460
489
|
}, node ? /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(NodePlankHeading, {
|
|
461
490
|
id: entry.id,
|
|
462
491
|
node,
|
|
@@ -554,27 +583,43 @@ var Sidebar = ({ attention, layoutParts }) => {
|
|
|
554
583
|
}));
|
|
555
584
|
};
|
|
556
585
|
|
|
557
|
-
// packages/plugins/plugin-deck/src/components/DeckLayout/
|
|
586
|
+
// packages/plugins/plugin-deck/src/components/DeckLayout/StatusBar.tsx
|
|
558
587
|
import React11 from "react";
|
|
588
|
+
import { Surface as Surface8 } from "@dxos/app-framework";
|
|
589
|
+
import { mainPadding, mx as mx4 } from "@dxos/react-ui-theme";
|
|
590
|
+
var StatusBar = () => {
|
|
591
|
+
const sizeAttrs = useMainSize();
|
|
592
|
+
return /* @__PURE__ */ React11.createElement("div", {
|
|
593
|
+
role: "none",
|
|
594
|
+
...sizeAttrs,
|
|
595
|
+
className: mx4("fixed block-end-0 inset-inline-0 z-[2]", mainPadding)
|
|
596
|
+
}, /* @__PURE__ */ React11.createElement(Surface8, {
|
|
597
|
+
role: "status-bar",
|
|
598
|
+
limit: 1
|
|
599
|
+
}));
|
|
600
|
+
};
|
|
601
|
+
|
|
602
|
+
// packages/plugins/plugin-deck/src/components/DeckLayout/Toast.tsx
|
|
603
|
+
import React12 from "react";
|
|
559
604
|
import { Button as Button2, Toast as NaturalToast } from "@dxos/react-ui";
|
|
560
605
|
var Toast = ({ id, title, description, icon, duration, actionLabel, actionAlt, closeLabel, onAction, onOpenChange }) => {
|
|
561
|
-
return /* @__PURE__ */
|
|
606
|
+
return /* @__PURE__ */ React12.createElement(NaturalToast.Root, {
|
|
562
607
|
"data-testid": id,
|
|
563
608
|
defaultOpen: true,
|
|
564
609
|
duration,
|
|
565
610
|
onOpenChange
|
|
566
|
-
}, /* @__PURE__ */
|
|
611
|
+
}, /* @__PURE__ */ React12.createElement(NaturalToast.Body, null, /* @__PURE__ */ React12.createElement(NaturalToast.Title, null, icon?.({
|
|
567
612
|
className: "inline mr-1"
|
|
568
|
-
}), /* @__PURE__ */
|
|
613
|
+
}), /* @__PURE__ */ React12.createElement("span", null, title)), description && /* @__PURE__ */ React12.createElement(NaturalToast.Description, null, description)), /* @__PURE__ */ React12.createElement(NaturalToast.Actions, null, onAction && actionAlt && actionLabel && /* @__PURE__ */ React12.createElement(NaturalToast.Action, {
|
|
569
614
|
altText: actionAlt,
|
|
570
615
|
asChild: true
|
|
571
|
-
}, /* @__PURE__ */
|
|
616
|
+
}, /* @__PURE__ */ React12.createElement(Button2, {
|
|
572
617
|
"data-testid": "toast.action",
|
|
573
618
|
variant: "primary",
|
|
574
619
|
onClick: () => onAction?.()
|
|
575
|
-
}, actionLabel)), closeLabel && /* @__PURE__ */
|
|
620
|
+
}, actionLabel)), closeLabel && /* @__PURE__ */ React12.createElement(NaturalToast.Close, {
|
|
576
621
|
asChild: true
|
|
577
|
-
}, /* @__PURE__ */
|
|
622
|
+
}, /* @__PURE__ */ React12.createElement(Button2, {
|
|
578
623
|
"data-testid": "toast.close"
|
|
579
624
|
}, closeLabel))));
|
|
580
625
|
};
|
|
@@ -636,6 +681,37 @@ var DeckLayout = ({ layoutParts, attention, toasts, flatDeck, overscroll, showHi
|
|
|
636
681
|
const fullScreenSlug = useMemo2(() => firstIdInPart(layoutParts, "fullScreen"), [
|
|
637
682
|
layoutParts
|
|
638
683
|
]);
|
|
684
|
+
const [scrollLeft, setScrollLeft] = useState3(null);
|
|
685
|
+
const deckRef = useRef2(null);
|
|
686
|
+
const restoreScrollRef = useRef2(false);
|
|
687
|
+
const handleResize = useCallback2(() => {
|
|
688
|
+
setScrollLeft(null);
|
|
689
|
+
}, []);
|
|
690
|
+
useEffect5(() => {
|
|
691
|
+
window.addEventListener("resize", handleResize);
|
|
692
|
+
return () => window.removeEventListener("resize", handleResize);
|
|
693
|
+
}, [
|
|
694
|
+
handleResize
|
|
695
|
+
]);
|
|
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;
|
|
702
|
+
}
|
|
703
|
+
}, [
|
|
704
|
+
layoutMode,
|
|
705
|
+
deckRef.current,
|
|
706
|
+
scrollLeft
|
|
707
|
+
]);
|
|
708
|
+
const handleScroll = useCallback2((event) => {
|
|
709
|
+
if (layoutMode === "deck" && event.currentTarget === event.target) {
|
|
710
|
+
setScrollLeft(event.target.scrollLeft);
|
|
711
|
+
}
|
|
712
|
+
}, [
|
|
713
|
+
layoutMode
|
|
714
|
+
]);
|
|
639
715
|
const complementarySlug = useMemo2(() => {
|
|
640
716
|
const entry = layoutParts.complementary?.at(0);
|
|
641
717
|
if (entry) {
|
|
@@ -644,16 +720,15 @@ var DeckLayout = ({ layoutParts, attention, toasts, flatDeck, overscroll, showHi
|
|
|
644
720
|
}, [
|
|
645
721
|
layoutParts
|
|
646
722
|
]);
|
|
647
|
-
const
|
|
723
|
+
const firstAttendedId = useMemo2(() => Array.from(attention.attended ?? [])[0], [
|
|
648
724
|
attention.attended
|
|
649
725
|
]);
|
|
650
|
-
const deckRef = useRef2(null);
|
|
651
726
|
useEffect5(() => {
|
|
652
|
-
if (layoutMode === "deck" &&
|
|
727
|
+
if (layoutMode === "deck" && firstAttendedId) {
|
|
653
728
|
}
|
|
654
729
|
}, [
|
|
655
730
|
layoutMode,
|
|
656
|
-
|
|
731
|
+
firstAttendedId
|
|
657
732
|
]);
|
|
658
733
|
const parts = useMemo2(() => {
|
|
659
734
|
const parts2 = [
|
|
@@ -669,16 +744,13 @@ var DeckLayout = ({ layoutParts, attention, toasts, flatDeck, overscroll, showHi
|
|
|
669
744
|
layoutParts.main,
|
|
670
745
|
layoutParts.solo
|
|
671
746
|
]);
|
|
672
|
-
const showPlank = (part) => {
|
|
673
|
-
return layoutMode === "deck" || layoutParts.solo?.find((entry) => entry.id === part.id);
|
|
674
|
-
};
|
|
675
747
|
const padding = layoutMode === "deck" && overscroll === "centering" ? calculateOverscroll(layoutParts.main, plankSizing, sidebarOpen, complementarySidebarOpen) : {};
|
|
676
748
|
if (layoutMode === "fullscreen") {
|
|
677
|
-
return /* @__PURE__ */
|
|
749
|
+
return /* @__PURE__ */ React13.createElement(Fullscreen, {
|
|
678
750
|
id: fullScreenSlug
|
|
679
751
|
});
|
|
680
752
|
}
|
|
681
|
-
return /* @__PURE__ */
|
|
753
|
+
return /* @__PURE__ */ React13.createElement(Popover2.Root, {
|
|
682
754
|
modal: true,
|
|
683
755
|
open: !!(popoverAnchorId && popoverOpen),
|
|
684
756
|
onOpenChange: (nextOpen) => {
|
|
@@ -689,9 +761,9 @@ var DeckLayout = ({ layoutParts, attention, toasts, flatDeck, overscroll, showHi
|
|
|
689
761
|
context.popoverAnchorId = void 0;
|
|
690
762
|
}
|
|
691
763
|
}
|
|
692
|
-
}, /* @__PURE__ */
|
|
693
|
-
id:
|
|
694
|
-
}), /* @__PURE__ */
|
|
764
|
+
}, /* @__PURE__ */ React13.createElement(ActiveNode, {
|
|
765
|
+
id: firstAttendedId
|
|
766
|
+
}), /* @__PURE__ */ React13.createElement(Main3.Root, {
|
|
695
767
|
navigationSidebarOpen: context.sidebarOpen,
|
|
696
768
|
onNavigationSidebarOpenChange: (next) => context.sidebarOpen = next,
|
|
697
769
|
...complementarySidebarOpen !== null && {
|
|
@@ -701,99 +773,89 @@ var DeckLayout = ({ layoutParts, attention, toasts, flatDeck, overscroll, showHi
|
|
|
701
773
|
),
|
|
702
774
|
onComplementarySidebarOpenChange: (next) => context.complementarySidebarOpen = next
|
|
703
775
|
}
|
|
704
|
-
}, /* @__PURE__ */
|
|
776
|
+
}, /* @__PURE__ */ React13.createElement(Main3.Notch, {
|
|
705
777
|
classNames: "z-[21]"
|
|
706
|
-
}, /* @__PURE__ */
|
|
778
|
+
}, /* @__PURE__ */ React13.createElement(Surface9, {
|
|
707
779
|
role: "notch-start"
|
|
708
|
-
}), /* @__PURE__ */
|
|
780
|
+
}), /* @__PURE__ */ React13.createElement(Button3, {
|
|
709
781
|
// disabled={!sidebarAvailable}
|
|
710
782
|
onClick: () => context.sidebarOpen = !context.sidebarOpen,
|
|
711
783
|
variant: "ghost",
|
|
712
784
|
classNames: "p-1"
|
|
713
|
-
}, /* @__PURE__ */
|
|
785
|
+
}, /* @__PURE__ */ React13.createElement("span", {
|
|
714
786
|
className: "sr-only"
|
|
715
|
-
}, t("open navigation sidebar label")), /* @__PURE__ */
|
|
787
|
+
}, t("open navigation sidebar label")), /* @__PURE__ */ React13.createElement(MenuIcon, {
|
|
716
788
|
weight: "light",
|
|
717
789
|
className: getSize(5)
|
|
718
|
-
})), /* @__PURE__ */
|
|
790
|
+
})), /* @__PURE__ */ React13.createElement(Button3, {
|
|
719
791
|
// disabled={!complementaryAvailable}
|
|
720
792
|
onClick: () => context.complementarySidebarOpen = !context.complementarySidebarOpen,
|
|
721
793
|
variant: "ghost",
|
|
722
794
|
classNames: "p-1"
|
|
723
|
-
}, /* @__PURE__ */
|
|
795
|
+
}, /* @__PURE__ */ React13.createElement("span", {
|
|
724
796
|
className: "sr-only"
|
|
725
|
-
}, t("open complementary sidebar label")), /* @__PURE__ */
|
|
797
|
+
}, t("open complementary sidebar label")), /* @__PURE__ */ React13.createElement(MenuIcon, {
|
|
726
798
|
mirrored: true,
|
|
727
799
|
weight: "light",
|
|
728
800
|
className: getSize(5)
|
|
729
|
-
})), /* @__PURE__ */
|
|
801
|
+
})), /* @__PURE__ */ React13.createElement(Surface9, {
|
|
730
802
|
role: "notch-end"
|
|
731
|
-
})), /* @__PURE__ */
|
|
803
|
+
})), /* @__PURE__ */ React13.createElement(Sidebar, {
|
|
732
804
|
attention,
|
|
733
805
|
layoutParts
|
|
734
|
-
}), /* @__PURE__ */
|
|
806
|
+
}), /* @__PURE__ */ React13.createElement(ComplementarySidebar, {
|
|
735
807
|
id: complementarySlug,
|
|
736
808
|
layoutParts,
|
|
737
809
|
flatDeck
|
|
738
|
-
}), /* @__PURE__ */
|
|
810
|
+
}), /* @__PURE__ */ React13.createElement(Main3.Overlay, null), parts.length === 0 && /* @__PURE__ */ React13.createElement(Main3.Content, {
|
|
739
811
|
handlesFocus: true
|
|
740
|
-
}, /* @__PURE__ */
|
|
812
|
+
}, /* @__PURE__ */ React13.createElement(ContentEmpty, null)), parts.length !== 0 && /* @__PURE__ */ React13.createElement(Main3.Content, {
|
|
741
813
|
bounce: true,
|
|
742
814
|
classNames: "grid block-end-[--statusbar-size]",
|
|
743
815
|
handlesFocus: true
|
|
744
|
-
}, /* @__PURE__ */
|
|
816
|
+
}, /* @__PURE__ */ React13.createElement("div", {
|
|
745
817
|
role: "none",
|
|
746
|
-
className:
|
|
747
|
-
}, /* @__PURE__ */
|
|
748
|
-
ref: deckRef,
|
|
749
|
-
solo: layoutMode === "solo",
|
|
818
|
+
className: "relative"
|
|
819
|
+
}, /* @__PURE__ */ React13.createElement(Deck.Root, {
|
|
750
820
|
style: padding,
|
|
751
821
|
classNames: [
|
|
752
822
|
!flatDeck && "bg-deck",
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
}, parts.map((layoutEntry) => /* @__PURE__ */ React12.createElement(Plank, {
|
|
823
|
+
"absolute inset-0",
|
|
824
|
+
slots?.wallpaper?.classNames
|
|
825
|
+
],
|
|
826
|
+
onScroll: handleScroll,
|
|
827
|
+
ref: deckRef
|
|
828
|
+
}, parts.map((layoutEntry) => /* @__PURE__ */ React13.createElement(Plank, {
|
|
760
829
|
key: layoutEntry.id,
|
|
761
830
|
entry: layoutEntry,
|
|
762
831
|
layoutParts,
|
|
763
|
-
part: layoutMode === "solo" && layoutEntry.id ===
|
|
832
|
+
part: layoutMode === "solo" && layoutEntry.id === layoutParts.solo?.[0]?.id ? "solo" : "main",
|
|
833
|
+
layoutMode,
|
|
764
834
|
flatDeck,
|
|
765
|
-
searchEnabled: !!searchPlugin
|
|
766
|
-
|
|
767
|
-
classNames: showPlank(layoutEntry) ? "" : "hidden"
|
|
768
|
-
}))))), /* @__PURE__ */ React12.createElement(Main3.Content, {
|
|
769
|
-
role: "none",
|
|
770
|
-
classNames: "fixed inset-inline-0 block-end-0 z-[2]"
|
|
771
|
-
}, /* @__PURE__ */ React12.createElement(Surface8, {
|
|
772
|
-
role: "status-bar",
|
|
773
|
-
limit: 1
|
|
774
|
-
})), showHintsFooter && /* @__PURE__ */ React12.createElement("div", {
|
|
835
|
+
searchEnabled: !!searchPlugin
|
|
836
|
+
}))))), /* @__PURE__ */ React13.createElement(StatusBar, null), showHintsFooter && /* @__PURE__ */ React13.createElement("div", {
|
|
775
837
|
className: "fixed bottom-0 left-0 right-0 h-[32px] z-[1] flex justify-center"
|
|
776
|
-
}, /* @__PURE__ */
|
|
838
|
+
}, /* @__PURE__ */ React13.createElement(Surface9, {
|
|
777
839
|
role: "hints",
|
|
778
840
|
limit: 1
|
|
779
|
-
})), /* @__PURE__ */
|
|
841
|
+
})), /* @__PURE__ */ React13.createElement(Popover2.Portal, null, /* @__PURE__ */ React13.createElement(Popover2.Content, {
|
|
780
842
|
classNames: "z-[60]",
|
|
781
843
|
onEscapeKeyDown: () => {
|
|
782
844
|
context.popoverOpen = false;
|
|
783
845
|
context.popoverAnchorId = void 0;
|
|
784
846
|
}
|
|
785
|
-
}, /* @__PURE__ */
|
|
847
|
+
}, /* @__PURE__ */ React13.createElement(Popover2.Viewport, null, /* @__PURE__ */ React13.createElement(Surface9, {
|
|
786
848
|
role: "popover",
|
|
787
849
|
data: popoverContent
|
|
788
|
-
})), /* @__PURE__ */
|
|
850
|
+
})), /* @__PURE__ */ React13.createElement(Popover2.Arrow, null))), /* @__PURE__ */ React13.createElement(Dialog.Root, {
|
|
789
851
|
open: dialogOpen,
|
|
790
852
|
onOpenChange: (nextOpen) => context.dialogOpen = nextOpen
|
|
791
|
-
}, /* @__PURE__ */
|
|
853
|
+
}, /* @__PURE__ */ React13.createElement(Dialog.Overlay, {
|
|
792
854
|
blockAlign: dialogBlockAlign
|
|
793
|
-
}, /* @__PURE__ */
|
|
855
|
+
}, /* @__PURE__ */ React13.createElement(Surface9, {
|
|
794
856
|
role: "dialog",
|
|
795
857
|
data: dialogContent
|
|
796
|
-
}))), toasts?.map((toast) => /* @__PURE__ */
|
|
858
|
+
}))), toasts?.map((toast) => /* @__PURE__ */ React13.createElement(Toast, {
|
|
797
859
|
...toast,
|
|
798
860
|
key: toast.id,
|
|
799
861
|
onOpenChange: (open) => {
|
|
@@ -806,7 +868,7 @@ var DeckLayout = ({ layoutParts, attention, toasts, flatDeck, overscroll, showHi
|
|
|
806
868
|
};
|
|
807
869
|
|
|
808
870
|
// packages/plugins/plugin-deck/src/components/LayoutSettings.tsx
|
|
809
|
-
import
|
|
871
|
+
import React14 from "react";
|
|
810
872
|
import { SettingsValue } from "@dxos/plugin-settings";
|
|
811
873
|
import { Input, Select, useTranslation as useTranslation6 } from "@dxos/react-ui";
|
|
812
874
|
|
|
@@ -824,44 +886,44 @@ var OverscrollOptions = [
|
|
|
824
886
|
var isSocket = !!globalThis.__args;
|
|
825
887
|
var LayoutSettings = ({ settings }) => {
|
|
826
888
|
const { t } = useTranslation6(DECK_PLUGIN);
|
|
827
|
-
return /* @__PURE__ */
|
|
889
|
+
return /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(SettingsValue, {
|
|
828
890
|
label: t("select new plank positioning label")
|
|
829
|
-
}, /* @__PURE__ */
|
|
891
|
+
}, /* @__PURE__ */ React14.createElement(Select.Root, {
|
|
830
892
|
value: settings.newPlankPositioning ?? "start",
|
|
831
893
|
onValueChange: (value) => settings.newPlankPositioning = value
|
|
832
|
-
}, /* @__PURE__ */
|
|
894
|
+
}, /* @__PURE__ */ React14.createElement(Select.TriggerButton, {
|
|
833
895
|
placeholder: t("select new plank positioning placeholder")
|
|
834
|
-
}), /* @__PURE__ */
|
|
896
|
+
}), /* @__PURE__ */ React14.createElement(Select.Portal, null, /* @__PURE__ */ React14.createElement(Select.Content, null, /* @__PURE__ */ React14.createElement(Select.Viewport, null, NewPlankPositions.map((position) => /* @__PURE__ */ React14.createElement(Select.Option, {
|
|
835
897
|
key: position,
|
|
836
898
|
value: position
|
|
837
|
-
}, t(`settings new plank position ${position} label`)))))))), /* @__PURE__ */
|
|
899
|
+
}, t(`settings new plank position ${position} label`)))))))), /* @__PURE__ */ React14.createElement(SettingsValue, {
|
|
838
900
|
label: t("settings overscroll label")
|
|
839
|
-
}, /* @__PURE__ */
|
|
901
|
+
}, /* @__PURE__ */ React14.createElement(Select.Root, {
|
|
840
902
|
value: settings.overscroll ?? "none",
|
|
841
903
|
onValueChange: (value) => settings.overscroll = value
|
|
842
|
-
}, /* @__PURE__ */
|
|
904
|
+
}, /* @__PURE__ */ React14.createElement(Select.TriggerButton, {
|
|
843
905
|
placeholder: t("select overscroll placeholder")
|
|
844
|
-
}), /* @__PURE__ */
|
|
906
|
+
}), /* @__PURE__ */ React14.createElement(Select.Portal, null, /* @__PURE__ */ React14.createElement(Select.Content, null, /* @__PURE__ */ React14.createElement(Select.Viewport, null, OverscrollOptions.map((option) => /* @__PURE__ */ React14.createElement(Select.Option, {
|
|
845
907
|
key: option,
|
|
846
908
|
value: option
|
|
847
|
-
}, t(`settings overscroll ${option} label`)))))))), /* @__PURE__ */
|
|
909
|
+
}, t(`settings overscroll ${option} label`)))))))), /* @__PURE__ */ React14.createElement(SettingsValue, {
|
|
848
910
|
label: t("settings show footer label")
|
|
849
|
-
}, /* @__PURE__ */
|
|
911
|
+
}, /* @__PURE__ */ React14.createElement(Input.Switch, {
|
|
850
912
|
checked: settings.showFooter,
|
|
851
913
|
onCheckedChange: (checked) => settings.showFooter = !!checked
|
|
852
|
-
})), !isSocket && /* @__PURE__ */
|
|
914
|
+
})), !isSocket && /* @__PURE__ */ React14.createElement(SettingsValue, {
|
|
853
915
|
label: t("settings native redirect label")
|
|
854
|
-
}, /* @__PURE__ */
|
|
916
|
+
}, /* @__PURE__ */ React14.createElement(Input.Switch, {
|
|
855
917
|
checked: settings.enableNativeRedirect,
|
|
856
918
|
onCheckedChange: (checked) => settings.enableNativeRedirect = !!checked
|
|
857
|
-
})), /* @__PURE__ */
|
|
919
|
+
})), /* @__PURE__ */ React14.createElement(SettingsValue, {
|
|
858
920
|
label: t("settings custom slots")
|
|
859
|
-
}, /* @__PURE__ */
|
|
921
|
+
}, /* @__PURE__ */ React14.createElement(Input.Switch, {
|
|
860
922
|
checked: settings.customSlots,
|
|
861
923
|
onCheckedChange: (checked) => settings.customSlots = !!checked
|
|
862
|
-
})), /* @__PURE__ */
|
|
924
|
+
})), /* @__PURE__ */ React14.createElement(SettingsValue, {
|
|
863
925
|
label: t("settings flat deck")
|
|
864
|
-
}, /* @__PURE__ */
|
|
926
|
+
}, /* @__PURE__ */ React14.createElement(Input.Switch, {
|
|
865
927
|
checked: settings.flatDeck,
|
|
866
928
|
onCheckedChange: (checked) => settings.flatDeck = !!checked
|
|
867
929
|
})));
|
|
@@ -1317,7 +1379,7 @@ var DeckPlugin = ({ observability } = {}) => {
|
|
|
1317
1379
|
ns: DECK_PLUGIN
|
|
1318
1380
|
}
|
|
1319
1381
|
],
|
|
1320
|
-
icon: (props) => /* @__PURE__ */
|
|
1382
|
+
icon: (props) => /* @__PURE__ */ React15.createElement(ArrowsOut, props),
|
|
1321
1383
|
iconSymbol: "ph--arrows-out--regular",
|
|
1322
1384
|
keyBinding: {
|
|
1323
1385
|
macos: "ctrl+meta+f",
|
|
@@ -1329,13 +1391,13 @@ var DeckPlugin = ({ observability } = {}) => {
|
|
|
1329
1391
|
});
|
|
1330
1392
|
}
|
|
1331
1393
|
},
|
|
1332
|
-
context: (props) => /* @__PURE__ */
|
|
1394
|
+
context: (props) => /* @__PURE__ */ React15.createElement(LayoutContext.Provider, {
|
|
1333
1395
|
value: layout.values
|
|
1334
|
-
}, /* @__PURE__ */
|
|
1396
|
+
}, /* @__PURE__ */ React15.createElement(DeckContext.Provider, {
|
|
1335
1397
|
value: deck.values
|
|
1336
1398
|
}, props.children)),
|
|
1337
1399
|
root: () => {
|
|
1338
|
-
return /* @__PURE__ */
|
|
1400
|
+
return /* @__PURE__ */ React15.createElement(Mosaic.Root, null, /* @__PURE__ */ React15.createElement(DeckLayout, {
|
|
1339
1401
|
attention: attentionPlugin?.provides.attention ?? {
|
|
1340
1402
|
attended: /* @__PURE__ */ new Set()
|
|
1341
1403
|
},
|
|
@@ -1356,13 +1418,13 @@ var DeckPlugin = ({ observability } = {}) => {
|
|
|
1356
1418
|
}, 1e3);
|
|
1357
1419
|
}
|
|
1358
1420
|
}
|
|
1359
|
-
}), /* @__PURE__ */
|
|
1421
|
+
}), /* @__PURE__ */ React15.createElement(Mosaic.DragOverlay, null));
|
|
1360
1422
|
},
|
|
1361
1423
|
surface: {
|
|
1362
1424
|
component: ({ data, role }) => {
|
|
1363
1425
|
switch (role) {
|
|
1364
1426
|
case "settings":
|
|
1365
|
-
return data.plugin === meta_default.id ? /* @__PURE__ */
|
|
1427
|
+
return data.plugin === meta_default.id ? /* @__PURE__ */ React15.createElement(LayoutSettings, {
|
|
1366
1428
|
settings: settings.values
|
|
1367
1429
|
}) : null;
|
|
1368
1430
|
}
|