@dxos/plugin-deck 0.6.8-main.3be982f → 0.6.8-staging.63bcb81

package/dist/lib/browser/index.mjs

@@ -26,11 +26,11 @@ 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";
-import { getSize, mx as mx4 } from "@dxos/react-ui-theme";
+import { getSize } from "@dxos/react-ui-theme";
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/ActiveNode.tsx
 import React from "react";
@@ -390,7 +390,7 @@ var Fullscreen = ({ id }) => {
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/Plank.tsx
 import { Plus } from "@phosphor-icons/react";
-import React9, { useCallback } from "react";
+import React9, { useCallback, useLayoutEffect, useRef } from "react";
 import { LayoutAction as LayoutAction2, NavigationAction as NavigationAction2, Surface as Surface6, useIntentDispatcher as useIntentDispatcher2 } from "@dxos/app-framework";
 import { debounce } from "@dxos/async";
 import { useGraph as useGraph5 } from "@dxos/plugin-graph";
@@ -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,26 +431,37 @@ var Plank = ({ entry, layoutParts, part, resizeable, flatDeck, searchEnabled, cl
     dispatch,
     entry.id
   ]);
-  const coordinate = {
-    part,
-    entryId: entry.id
-  };
+  const handleKeyDown = useCallback((event) => {
+    if (event.target === event.currentTarget && event.key === "Escape") {
+      rootElement.current?.closest("main")?.focus();
+    }
+  }, []);
+  useLayoutEffect(() => {
+    if (scrollIntoView === entry.id) {
+      rootElement.current?.scrollIntoView({
+        behavior: "smooth",
+        inline: "center"
+      });
+    }
+  }, [
+    scrollIntoView
+  ]);
   return /* @__PURE__ */ React9.createElement(NaturalPlank.Root, {
     size,
-    setSize
-  }, /* @__PURE__ */ React9.createElement(NaturalPlank.Content, {
+    setSize,
+    classNames,
     ...attendableAttrs,
+    onKeyDown: handleKeyDown,
+    ref: rootElement
+  }, /* @__PURE__ */ React9.createElement(NaturalPlank.Content, {
     classNames: [
-      !flatDeck && "surface-base",
-      classNames
-    ],
-    scrollIntoViewOnMount: entry.id === scrollIntoView,
-    suppressAutofocus: entry.id === NAV_ID || !!node?.properties?.managesAutofocus
+      !flatDeck && "surface-base"
+    ]
   }, node ? /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(NodePlankHeading, {
+    id: entry.id,
+    node,
     layoutPart: coordinate.part,
     layoutParts,
-    node,
-    id: entry.id,
     popoverAnchorId,
     flatDeck
   }), /* @__PURE__ */ React9.createElement(Surface6, {
@@ -583,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, sidebarOpen, complementarySidebarOpen, layoutParts, plankSizing, 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 {
@@ -602,25 +615,24 @@ var calculateOverscroll = (layoutMode, sidebarOpen, complementarySidebarOpen, la
       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 searchPlugin = usePlugin("dxos.org/plugin/search");
   const fullScreenSlug = useMemo2(() => firstIdInPart(layoutParts, "fullScreen"), [
     layoutParts
   ]);
@@ -632,11 +644,35 @@ var DeckLayout = ({ showHintsFooter, toasts, onDismissToast, flatDeck, attention
   }, [
     layoutParts
   ]);
-  const searchEnabled = !!usePlugin("dxos.org/plugin/search");
   const activeId = useMemo2(() => Array.from(attention.attended ?? [])[0], [
     attention.attended
   ]);
-  const overscrollAmount = calculateOverscroll(layoutMode, sidebarOpen, complementarySidebarOpen, layoutParts, plankSizing, overscroll);
+  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
@@ -699,57 +735,39 @@ var DeckLayout = ({ showHintsFooter, toasts, onDismissToast, flatDeck, attention
     id: complementarySlug,
     layoutParts,
     flatDeck
-  }), /* @__PURE__ */ React12.createElement(Main3.Overlay, null), layoutMode === "deck" && layoutParts.main && layoutParts.main.length > 0 && /* @__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: "relative"
-  }, /* @__PURE__ */ React12.createElement(Deck.Root, {
-    classNames: mx4("absolute inset-0", !flatDeck && "surface-deck", slots?.wallpaper?.classNames, slots?.deck?.classNames, "transition-[padding] duration-200 ease-in-out"),
-    style: {
-      ...overscrollAmount
-    }
-  }, layoutParts.main.map((layoutEntry) => {
-    return /* @__PURE__ */ React12.createElement(Plank, {
-      key: layoutEntry.id,
-      entry: layoutEntry,
-      layoutParts,
-      part: "main",
-      resizeable: true,
-      flatDeck,
-      searchEnabled
-    });
-  })))), layoutMode === "solo" && layoutParts.solo && layoutParts.solo.length > 0 && /* @__PURE__ */ React12.createElement(Main3.Content, {
-    bounce: true,
-    classNames: [
-      "grid",
-      "block-end-[--statusbar-size]"
-    ]
+    className: layoutMode === "solo" ? "contents" : "relative"
   }, /* @__PURE__ */ React12.createElement(Deck.Root, {
+    ref: deckRef,
+    solo: layoutMode === "solo",
+    style: padding,
     classNames: [
       !flatDeck && "surface-deck",
-      slots?.wallpaper?.classNames,
-      slots?.deck?.classNames
-    ],
-    solo: true
-  }, layoutParts.solo.map((layoutEntry) => {
-    return /* @__PURE__ */ React12.createElement(Plank, {
-      key: layoutEntry.id,
-      entry: layoutEntry,
-      layoutParts,
-      part: "solo",
-      flatDeck,
-      classNames: slots?.plank?.classNames
-    });
-  }))), (layoutMode === "solo" && (!layoutParts.solo || layoutParts.solo.length === 0) || layoutMode === "deck" && (!layoutParts.main || layoutParts.main.length === 0)) && /* @__PURE__ */ React12.createElement(Main3.Content, null, /* @__PURE__ */ React12.createElement(ContentEmpty, null)), /* @__PURE__ */ React12.createElement(Main3.Content, {
-    role: "none",
-    classNames: [
-      "fixed inset-inline-0 block-end-0 z-[2]"
+      layoutMode === "deck" && [
+        "absolute inset-0",
+        "transition-[padding] duration-200 ease-in-out",
+        slots?.wallpaper?.classNames
+      ]
     ]
+  }, 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
@@ -1044,12 +1062,6 @@ var appScheme = "composer://";
 var customSlots = {
   wallpaper: {
     classNames: "bg-cover bg-no-repeat dark:bg-[url(https://cdn.midjourney.com/3865ba61-f98a-4d94-b91a-1763ead01f4f/0_0.jpeg)]"
-  },
-  deck: {
-    classNames: "px-96 bg-neutral-50 __dark:bg-neutral-950 dark:bg-transparent dark:opacity-95"
-  },
-  plank: {
-    classNames: "mx-1 bg-neutral-25 dark:bg-neutral-900"
   }
 };
 setAutoFreeze(false);
@@ -1224,7 +1236,21 @@ var DeckPlugin = ({ observability } = {}) => {
         checkAppScheme(appScheme);
       }
       handleNavigation = async () => {
-        const layoutFromUri = uriToSoloPart(window.location.pathname);
+        const pathname = window.location.pathname;
+        if (pathname === "/reset") {
+          location.values.active = {
+            sidebar: [
+              {
+                id: NAV_ID
+              }
+            ]
+          };
+          location.values.closed = [];
+          layout.values.layoutMode = "solo";
+          window.location.pathname = "/";
+          return;
+        }
+        const layoutFromUri = uriToSoloPart(pathname);
         if (!layoutFromUri) {
           return;
         }
@@ -1269,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`,
@@ -1312,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) => {
@@ -1364,7 +1392,7 @@ var DeckPlugin = ({ observability } = {}) => {
                 } else {
                   log.warn("Invalid layout mode", intent?.data?.layoutMode, {
                     F: __dxlog_file,
-                    L: 384,
+                    L: 390,
                     S: void 0,
                     C: (f, a) => f(...a)
                   });
@@ -1417,8 +1445,8 @@ var DeckPlugin = ({ observability } = {}) => {
                 if (!intent.data || !intent.data?.activeParts) {
                   return;
                 }
-                const newPlankPositioning = settings.values.newPlankPositioning;
                 const processLayoutEntry = (partName, entryString, currentLayout) => {
+                  const toggle = true;
                   const [id, path] = entryString.split(SLUG_PATH_SEPARATOR5);
                   const layoutEntry = {
                     id,
@@ -1427,14 +1455,14 @@ var DeckPlugin = ({ observability } = {}) => {
                     } : {}
                   };
                   const effectivePart = getEffectivePart(partName, layoutMode);
-                  if (layoutMode === "deck" && effectivePart === "main" && currentLayout[effectivePart]?.some((entry) => entry.id === id) && !intent.data?.noToggle) {
+                  if (toggle && layoutMode === "deck" && effectivePart === "main" && currentLayout[effectivePart]?.some((entry) => entry.id === id) && !intent.data?.noToggle) {
                     return closeEntry(currentLayout, {
                       part: effectivePart,
                       entryId: id
                     });
                   } else {
                     return openEntry(currentLayout, effectivePart, layoutEntry, {
-                      positioning: newPlankPositioning
+                      positioning: settings.values.newPlankPositioning
                     });
                   }
                 };
@@ -1562,11 +1590,10 @@ var DeckPlugin = ({ observability } = {}) => {
                 if (isLayoutAdjustment(intent.data)) {
                   const adjustment = intent.data;
                   if (adjustment.type === "increment-end" || adjustment.type === "increment-start") {
-                    const nextActive = incrementPlank(location.values.active, {
+                    location.values.active = incrementPlank(location.values.active, {
                       type: adjustment.type,
                       layoutCoordinate: adjustment.layoutCoordinate
                     });
-                    location.values.active = nextActive;
                   }
                   if (adjustment.type === "solo") {
                     const entryId = adjustment.layoutCoordinate.entryId;