@dxos/plugin-deck 0.6.8-staging.77f93a3 → 0.6.8-staging.dec6b33

package/dist/lib/browser/index.mjs

@@ -26,7 +26,7 @@ var SURFACE_PREFIX = "surface:";
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/DeckLayout.tsx
 import { Sidebar as MenuIcon } from "@phosphor-icons/react";
-import React12, { useMemo as useMemo2 } from "react";
+import React12, { useEffect as useEffect5, useMemo as useMemo2, useRef as useRef2 } from "react";
 import { SLUG_PATH_SEPARATOR as SLUG_PATH_SEPARATOR3, Surface as Surface8, firstIdInPart, usePlugin } from "@dxos/app-framework";
 import { Button as Button3, Dialog, Main as Main3, Popover as Popover2, useTranslation as useTranslation5 } from "@dxos/react-ui";
 import { Deck } from "@dxos/react-ui-deck";
@@ -412,7 +412,12 @@ var Plank = ({ entry, layoutParts, part, resizeable, flatDeck, searchEnabled, cl
   const { plankSizing } = useDeckContext();
   const { graph } = useGraph5();
   const node = useNode(graph, entry.id);
+  const rootElement = useRef(null);
   const attendableAttrs = createAttendableAttributes2(entry.id);
+  const coordinate = {
+    part,
+    entryId: entry.id
+  };
   const size = plankSizing?.[entry.id];
   const setSize = useCallback(debounce((newSize) => {
     void dispatch({
@@ -426,14 +431,14 @@ var Plank = ({ entry, layoutParts, part, resizeable, flatDeck, searchEnabled, cl
     dispatch,
     entry.id
   ]);
-  const coordinate = {
-    part,
-    entryId: entry.id
-  };
-  const ref = useRef(null);
+  const handleKeyDown = useCallback((event) => {
+    if (event.target === event.currentTarget && event.key === "Escape") {
+      rootElement.current?.closest("main")?.focus();
+    }
+  }, []);
   useLayoutEffect(() => {
     if (scrollIntoView === entry.id) {
-      ref.current?.scrollIntoView({
+      rootElement.current?.scrollIntoView({
         behavior: "smooth",
         inline: "center"
       });
@@ -443,13 +448,14 @@ var Plank = ({ entry, layoutParts, part, resizeable, flatDeck, searchEnabled, cl
   ]);
   return /* @__PURE__ */ React9.createElement(NaturalPlank.Root, {
     size,
-    setSize
-  }, /* @__PURE__ */ React9.createElement(NaturalPlank.Content, {
+    setSize,
+    classNames,
     ...attendableAttrs,
-    ref,
+    onKeyDown: handleKeyDown,
+    ref: rootElement
+  }, /* @__PURE__ */ React9.createElement(NaturalPlank.Content, {
     classNames: [
-      !flatDeck && "surface-base",
-      classNames
+      !flatDeck && "surface-base"
     ]
   }, node ? /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(NodePlankHeading, {
     id: entry.id,
@@ -593,18 +599,15 @@ var getEffectivePart = (partName, layoutMode) => layoutMode === "solo" && partNa
 
 // packages/plugins/plugin-deck/src/util/overscroll.ts
 import { PLANK_DEFAULTS } from "@dxos/react-ui-deck";
-var calculateOverscroll = (layoutMode, layoutParts, plankSizing, sidebarOpen, complementarySidebarOpen, overscroll) => {
-  if (!(layoutMode === "deck" && overscroll === "centering")) {
-    return;
-  }
-  if (!layoutParts.main || layoutParts.main.length === 0) {
+var calculateOverscroll = (planks, plankSizing, sidebarOpen, complementarySidebarOpen) => {
+  if (!planks?.length) {
     return;
   }
   const sidebarWidth = sidebarOpen ? "270px" : "0px";
   const complementarySidebarWidth = complementarySidebarOpen ? "360px" : "0px";
   const getPlankSize = (id) => (plankSizing[id] ?? PLANK_DEFAULTS.size).toFixed(2) + "rem";
-  if (layoutParts.main.length === 1) {
-    const plank = layoutParts.main[0];
+  if (planks.length === 1) {
+    const plank = planks[0];
     const plankSize = getPlankSize(plank.id);
     const overscrollPadding = `max(0px, calc(((100dvw - ${sidebarWidth} - ${complementarySidebarWidth} - (${plankSize} + 20px)) / 2)))`;
     return {
@@ -612,26 +615,24 @@ var calculateOverscroll = (layoutMode, layoutParts, plankSizing, sidebarOpen, co
       paddingRight: overscrollPadding
     };
   } else {
-    const firstPlank = layoutParts.main[0];
-    const firstPlankInlineSize = getPlankSize(firstPlank.id);
-    const paddingLeft = `max(0px, calc(((100dvw - (${firstPlankInlineSize} + 20px)) / 2) - ${sidebarWidth}))`;
-    const lastPlank = layoutParts.main[layoutParts.main.length - 1];
-    const lastPlankInlineSize = getPlankSize(lastPlank.id);
-    const paddingRight = `max(0px, calc(((100dvw - (${lastPlankInlineSize} + 20px)) / 2) - ${complementarySidebarWidth}))`;
+    const first = planks[0];
+    const firstSize = getPlankSize(first.id);
+    const last = planks[planks.length - 1];
+    const lastSize = getPlankSize(last.id);
     return {
-      paddingLeft,
-      paddingRight
+      paddingLeft: `max(0px, calc(((100dvw - (${firstSize} + 20px)) / 2) - ${sidebarWidth}))`,
+      paddingRight: `max(0px, calc(((100dvw - (${lastSize} + 20px)) / 2) - ${complementarySidebarWidth}))`
     };
   }
 };
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/DeckLayout.tsx
-var DeckLayout = ({ showHintsFooter, toasts, onDismissToast, flatDeck, attention, layoutParts, slots, overscroll }) => {
+var DeckLayout = ({ layoutParts, attention, toasts, flatDeck, overscroll, showHintsFooter, slots, onDismissToast }) => {
   const context = useLayout();
   const { layoutMode, sidebarOpen, complementarySidebarOpen, dialogOpen, dialogContent, dialogBlockAlign, popoverOpen, popoverContent, popoverAnchorId } = context;
   const { t } = useTranslation5(DECK_PLUGIN);
   const { plankSizing } = useDeckContext();
-  const searchEnabled = !!usePlugin("dxos.org/plugin/search");
+  const searchPlugin = usePlugin("dxos.org/plugin/search");
   const fullScreenSlug = useMemo2(() => firstIdInPart(layoutParts, "fullScreen"), [
     layoutParts
   ]);
@@ -646,8 +647,32 @@ var DeckLayout = ({ showHintsFooter, toasts, onDismissToast, flatDeck, attention
   const activeId = useMemo2(() => Array.from(attention.attended ?? [])[0], [
     attention.attended
   ]);
-  const overscrollAmount = calculateOverscroll(layoutMode, layoutParts, plankSizing, sidebarOpen, complementarySidebarOpen, overscroll);
-  const isEmpty = layoutMode === "solo" && (!layoutParts.solo || layoutParts.solo.length === 0) || layoutMode === "deck" && (!layoutParts.main || layoutParts.main.length === 0);
+  const deckRef = useRef2(null);
+  useEffect5(() => {
+    if (layoutMode === "deck" && activeId) {
+    }
+  }, [
+    layoutMode,
+    activeId
+  ]);
+  const parts = useMemo2(() => {
+    const parts2 = [
+      ...layoutParts.main ?? []
+    ];
+    for (const part of layoutParts.solo ?? []) {
+      if (!parts2.find((entry) => entry.id === part.id)) {
+        parts2.push(part);
+      }
+    }
+    return parts2;
+  }, [
+    layoutParts.main,
+    layoutParts.solo
+  ]);
+  const showPlank = (part) => {
+    return layoutMode === "deck" || layoutParts.solo?.find((entry) => entry.id === part.id);
+  };
+  const padding = layoutMode === "deck" && overscroll === "centering" ? calculateOverscroll(layoutParts.main, plankSizing, sidebarOpen, complementarySidebarOpen) : {};
   if (layoutMode === "fullscreen") {
     return /* @__PURE__ */ React12.createElement(Fullscreen, {
       id: fullScreenSlug
@@ -710,13 +735,19 @@ var DeckLayout = ({ showHintsFooter, toasts, onDismissToast, flatDeck, attention
     id: complementarySlug,
     layoutParts,
     flatDeck
-  }), /* @__PURE__ */ React12.createElement(Main3.Overlay, null), isEmpty && /* @__PURE__ */ React12.createElement(Main3.Content, null, /* @__PURE__ */ React12.createElement(ContentEmpty, null)), !isEmpty && /* @__PURE__ */ React12.createElement(Main3.Content, {
+  }), /* @__PURE__ */ React12.createElement(Main3.Overlay, null), parts.length === 0 && /* @__PURE__ */ React12.createElement(Main3.Content, {
+    handlesFocus: true
+  }, /* @__PURE__ */ React12.createElement(ContentEmpty, null)), parts.length !== 0 && /* @__PURE__ */ React12.createElement(Main3.Content, {
     bounce: true,
-    classNames: [
-      "grid",
-      "block-end-[--statusbar-size]"
-    ]
+    classNames: "grid block-end-[--statusbar-size]",
+    handlesFocus: true
+  }, /* @__PURE__ */ React12.createElement("div", {
+    role: "none",
+    className: layoutMode === "solo" ? "contents" : "relative"
   }, /* @__PURE__ */ React12.createElement(Deck.Root, {
+    ref: deckRef,
+    solo: layoutMode === "solo",
+    style: padding,
     classNames: [
       !flatDeck && "surface-deck",
       layoutMode === "deck" && [
@@ -724,34 +755,19 @@ var DeckLayout = ({ showHintsFooter, toasts, onDismissToast, flatDeck, attention
         "transition-[padding] duration-200 ease-in-out",
         slots?.wallpaper?.classNames
       ]
-    ],
-    solo: layoutMode === "solo",
-    style: {
-      ...overscrollAmount
-    }
-  }, layoutMode === "solo" && layoutParts.solo?.map((layoutEntry) => {
-    return /* @__PURE__ */ React12.createElement(Plank, {
-      key: layoutEntry.id,
-      entry: layoutEntry,
-      layoutParts,
-      part: "solo",
-      flatDeck
-    });
-  }), layoutMode === "deck" && layoutParts.main?.map((layoutEntry) => {
-    return /* @__PURE__ */ React12.createElement(Plank, {
-      key: layoutEntry.id,
-      entry: layoutEntry,
-      layoutParts,
-      part: "main",
-      resizeable: true,
-      flatDeck,
-      searchEnabled
-    });
-  }))), /* @__PURE__ */ React12.createElement(Main3.Content, {
-    role: "none",
-    classNames: [
-      "fixed inset-inline-0 block-end-0 z-[2]"
     ]
+  }, parts.map((layoutEntry) => /* @__PURE__ */ React12.createElement(Plank, {
+    key: layoutEntry.id,
+    entry: layoutEntry,
+    layoutParts,
+    part: layoutMode === "solo" && layoutEntry.id === activeId ? "solo" : "main",
+    flatDeck,
+    searchEnabled: !!searchPlugin,
+    resizeable: layoutMode === "deck",
+    classNames: showPlank(layoutEntry) ? "" : "hidden"
+  }))))), /* @__PURE__ */ React12.createElement(Main3.Content, {
+    role: "none",
+    classNames: "fixed inset-inline-0 block-end-0 z-[2]"
   }, /* @__PURE__ */ React12.createElement(Surface8, {
     role: "status-bar",
     limit: 1
@@ -1279,7 +1295,9 @@ var DeckPlugin = ({ observability } = {}) => {
         builder: () => {
           return createExtension({
             id: DECK_PLUGIN,
-            filter: (node) => node.id === "root",
+            // NOTE(Zan): This is currently disabled.
+            // TODO(Zan): Fullscreen needs to know the active node and provide that to the layout part.
+            filter: (node) => false,
             actions: () => [
               {
                 id: `${LayoutAction3.SET_LAYOUT_MODE}/fullscreen`,
@@ -1322,9 +1340,9 @@ var DeckPlugin = ({ observability } = {}) => {
             attended: /* @__PURE__ */ new Set()
           },
           layoutParts: location.values.active,
+          showHintsFooter: settings.values.showFooter,
           overscroll: settings.values.overscroll,
           flatDeck: settings.values.flatDeck,
-          showHintsFooter: settings.values.showFooter,
           slots: settings.values.customSlots ? customSlots : void 0,
           toasts: layout.values.toasts,
           onDismissToast: (id) => {
@@ -1374,7 +1392,7 @@ var DeckPlugin = ({ observability } = {}) => {
                 } else {
                   log.warn("Invalid layout mode", intent?.data?.layoutMode, {
                     F: __dxlog_file,
-                    L: 388,
+                    L: 390,
                     S: void 0,
                     C: (f, a) => f(...a)
                   });
@@ -1428,7 +1446,7 @@ var DeckPlugin = ({ observability } = {}) => {
                   return;
                 }
                 const processLayoutEntry = (partName, entryString, currentLayout) => {
-                  const toggle = false;
+                  const toggle = true;
                   const [id, path] = entryString.split(SLUG_PATH_SEPARATOR5);
                   const layoutEntry = {
                     id,