@dxos/plugin-deck 0.7.1 → 0.7.2-main.f1adc9f

package/dist/lib/browser/index.mjs

@@ -12,7 +12,7 @@ import {
 import { batch } from "@preact/signals-core";
 import { setAutoFreeze } from "immer";
 import React16 from "react";
-import { IntentAction, LayoutAction as LayoutAction2, NavigationAction as NavigationAction3, parseGraphPlugin, parseIntentPlugin, resolvePlugin, Toast as ToastSchema, SLUG_PATH_SEPARATOR as SLUG_PATH_SEPARATOR4, isLayoutParts, isLayoutAdjustment, isLayoutMode, openIds as openIds2, filterPlugins } from "@dxos/app-framework";
+import { IntentAction, LayoutAction as LayoutAction3, NavigationAction as NavigationAction3, parseGraphPlugin, parseIntentPlugin, resolvePlugin, Toast as ToastSchema, SLUG_PATH_SEPARATOR as SLUG_PATH_SEPARATOR4, isLayoutParts, isLayoutAdjustment, isLayoutMode, openIds as openIds2, filterPlugins } from "@dxos/app-framework";
 import { create, getTypename, isReactiveObject } from "@dxos/echo-schema";
 import { scheduledEffect } from "@dxos/echo-signals/core";
 import { LocalStorageStore } from "@dxos/local-storage";
@@ -125,7 +125,7 @@ var ActiveNode = () => {
 import React6, { useMemo as useMemo2 } from "react";
 import { NavigationAction as NavigationAction2, SLUG_PATH_SEPARATOR as SLUG_PATH_SEPARATOR2, Surface as Surface3, useIntentDispatcher as useIntentDispatcher2 } from "@dxos/app-framework";
 import { useGraph as useGraph3 } from "@dxos/plugin-graph";
-import { Main } from "@dxos/react-ui";
+import { Main, ScrollArea } from "@dxos/react-ui";
 import { useAttended as useAttended2 } from "@dxos/react-ui-attention";
 import { railGridHorizontal, StackContext } from "@dxos/react-ui-stack";
 import { mx as mx2 } from "@dxos/react-ui-theme";
@@ -176,7 +176,7 @@ var PlankControls = /* @__PURE__ */ forwardRef(({ onClick, variant = "default",
     label: isSolo ? t("show deck plank label") : t("show solo plank label"),
     classNames: buttonClassNames,
     onClick: () => onClick?.("solo"),
-    icon: isSolo ? "ph--vibrate--regular" : "ph--arrows-out--regular"
+    icon: isSolo ? "ph--arrow-u-down-left--regular" : "ph--arrows-out--regular"
   }), !isSolo && can.solo && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(PlankControl, {
     label: t("increment start label"),
     disabled: !can.incrementStart,
@@ -360,15 +360,11 @@ import { descriptionText, mx } from "@dxos/react-ui-theme";
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/PlankLoading.tsx
 import React4 from "react";
-import { Status } from "@dxos/react-ui";
 var PlankLoading = () => {
   return /* @__PURE__ */ React4.createElement("div", {
     role: "none",
     className: "grid place-items-center attention-surface"
-  }, /* @__PURE__ */ React4.createElement(Status, {
-    indeterminate: true,
-    "aria-label": "Initializing"
-  }));
+  });
 };
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/PlankError.tsx
@@ -443,15 +439,13 @@ var ComplementarySidebar = ({ panels, current }) => {
     }
   }, /* @__PURE__ */ React6.createElement("div", {
     role: "none",
-    className: mx2(railGridHorizontal, "grid-cols-1 bs-full")
+    className: mx2(railGridHorizontal, "grid grid-cols-[100%] bs-full")
   }, /* @__PURE__ */ React6.createElement(NodePlankHeading, {
     coordinate,
     node,
     popoverAnchorId,
     actions
-  }), /* @__PURE__ */ React6.createElement("div", {
-    className: "divide-y divide-separator overflow-x-hidden overflow-y-scroll"
-  }, node && /* @__PURE__ */ React6.createElement(Surface3, {
+  }), /* @__PURE__ */ React6.createElement(ScrollArea.Root, null, /* @__PURE__ */ React6.createElement(ScrollArea.Viewport, null, node && /* @__PURE__ */ React6.createElement(Surface3, {
     key: id,
     role: `complementary--${panel}`,
     limit: 1,
@@ -462,7 +456,9 @@ var ComplementarySidebar = ({ panels, current }) => {
     },
     fallback: PlankContentError,
     placeholder: /* @__PURE__ */ React6.createElement(PlankLoading, null)
-  })))));
+  }), /* @__PURE__ */ React6.createElement(ScrollArea.Scrollbar, {
+    orientation: "vertical"
+  }, /* @__PURE__ */ React6.createElement(ScrollArea.Thumb, null)))))));
 };
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/ContentEmpty.tsx
@@ -522,7 +518,7 @@ var Fullscreen = ({ id }) => {
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/Plank.tsx
 import React10, { memo as memo2, useCallback, useLayoutEffect, useMemo as useMemo3, useRef } from "react";
-import { Surface as Surface6, useIntentDispatcher as useIntentDispatcher3, indexInPart, partLength } from "@dxos/app-framework";
+import { Surface as Surface6, useIntentDispatcher as useIntentDispatcher3, indexInPart, partLength, LayoutAction as LayoutAction2 } from "@dxos/app-framework";
 import { debounce } from "@dxos/async";
 import { useGraph as useGraph5 } from "@dxos/plugin-graph";
 import { useAttendableAttributes } from "@dxos/react-ui-attention";
@@ -537,7 +533,7 @@ var useDeckContext = () => useContext2(DeckContext) ?? raise2(new Error("Missing
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/Plank.tsx
 var UNKNOWN_ID = "unknown_id";
-var Plank = /* @__PURE__ */ memo2(({ entry, layoutParts, part, layoutMode, order, last }) => {
+var Plank = /* @__PURE__ */ memo2(({ entry, layoutParts, part, layoutMode, order }) => {
   const dispatch = useIntentDispatcher3();
   const coordinate = useMemo3(() => ({
     part,
@@ -578,13 +574,20 @@ var Plank = /* @__PURE__ */ memo2(({ entry, layoutParts, part, layoutMode, order
   }, []);
   useLayoutEffect(() => {
     if (scrollIntoView === coordinate.entryId) {
-      rootElement.current?.focus({
+      const focusable = rootElement.current?.querySelector("input") || rootElement.current?.querySelector("button") || rootElement.current;
+      focusable?.focus({
         preventScroll: true
       });
-      layoutMode === "deck" && rootElement.current?.scrollIntoView({
+      layoutMode === "deck" && focusable?.scrollIntoView({
         behavior: "smooth",
         inline: "center"
       });
+      void dispatch({
+        action: LayoutAction2.SCROLL_INTO_VIEW,
+        data: {
+          id: void 0
+        }
+      });
     }
   }, [
     coordinate.entryId,
@@ -638,6 +641,7 @@ var Plank = /* @__PURE__ */ memo2(({ entry, layoutParts, part, layoutMode, order
     canIncrementEnd,
     popoverAnchorId
   }), /* @__PURE__ */ React10.createElement(Surface6, {
+    key: node.id,
     role: "article",
     data,
     limit: 1,
@@ -908,8 +912,7 @@ var DeckLayout = ({ layoutParts, toasts, overscroll, showHints, panels, onDismis
     layoutParts,
     part: "main",
     layoutMode,
-    order: index * 2 + 1,
-    last: index === layoutParts.main.length - 1
+    order: index * 2 + 1
   }))))), /* @__PURE__ */ React14.createElement("div", {
     role: "none",
     className: isSoloModeLoaded ? "relative bg-deck overflow-hidden" : "sr-only",
@@ -1189,7 +1192,7 @@ var translations_default = [
         "pin end label": "Pin to the right sidebar",
         "increment start label": "Move to the left",
         "increment end label": "Move to the right",
-        "show deck plank label": "Show deck",
+        "show deck plank label": "Return to deck",
         "show solo plank label": "Maximize",
         "close label": "Close",
         "minify label": "Minify",
@@ -1308,19 +1311,36 @@ var DeckPlugin = ({ observability } = {}) => {
     }
   };
   const handleSetLocation = (next) => {
+    const part = layout.values.layoutMode === "solo" ? "solo" : "main";
+    const ids = openIds2(next, [
+      part
+    ]);
     if (attentionPlugin) {
       const attended = attentionPlugin.provides.attention.attended;
       const [attendedId] = Array.from(attended);
-      const ids = (layout.values.layoutMode === "deck" ? next.main : next.solo)?.map(({ id }) => id) ?? [];
       const isAttendedAvailable = !!attendedId && ids.includes(attendedId);
       if (!isAttendedAvailable) {
-        requestAnimationFrame(() => {
-          const nextAttended = layout.values.layoutMode === "solo" ? next.solo?.[0].id : next.main?.[0]?.id;
-          const article = document.querySelector(`article[data-attendable-id="${nextAttended}"]`);
-          article?.focus();
+        const currentIds = location.values.active[part]?.map(({ id }) => id) ?? [];
+        const attendedIndex = currentIds.indexOf(attendedId);
+        const index = attendedIndex === -1 ? 0 : attendedIndex >= ids.length ? ids.length - 1 : attendedIndex;
+        const nextAttended = next[part]?.[index].id;
+        void intentPlugin?.provides.intent.dispatch({
+          action: LayoutAction3.SCROLL_INTO_VIEW,
+          data: {
+            id: nextAttended
+          }
         });
       }
     }
+    const current = openIds2(location.values.active, [
+      part
+    ]);
+    const removed = current.filter((id) => !ids.includes(id));
+    const closed = Array.from(/* @__PURE__ */ new Set([
+      ...location.values.closed.filter((id) => !ids.includes(id)),
+      ...removed
+    ]));
+    location.values.closed = closed;
     location.values.active = next;
   };
   return {
@@ -1433,11 +1453,11 @@ var DeckPlugin = ({ observability } = {}) => {
             filter: (node) => false,
             actions: () => [
               {
-                id: `${LayoutAction2.SET_LAYOUT_MODE}/fullscreen`,
+                id: `${LayoutAction3.SET_LAYOUT_MODE}/fullscreen`,
                 data: async () => {
                   await intentPlugin?.provides.intent.dispatch({
                     plugin: DECK_PLUGIN,
-                    action: LayoutAction2.SET_LAYOUT_MODE,
+                    action: LayoutAction3.SET_LAYOUT_MODE,
                     data: {
                       layoutMode: "fullscreen"
                     }
@@ -1500,27 +1520,46 @@ var DeckPlugin = ({ observability } = {}) => {
       intent: {
         resolver: (intent) => {
           switch (intent.action) {
-            case LayoutAction2.SET_LAYOUT: {
+            case LayoutAction3.SET_LAYOUT: {
               return intent.data && handleSetLayout(intent.data);
             }
-            case LayoutAction2.SET_LAYOUT_MODE: {
+            case LayoutAction3.SET_LAYOUT_MODE: {
+              const setMode = (mode) => {
+                const next = openIds2(location.values.active, mode === "solo" ? [
+                  "solo"
+                ] : [
+                  "main"
+                ]);
+                const current = openIds2(location.values.active, layout.values.layoutMode === "solo" ? [
+                  "solo"
+                ] : [
+                  "main"
+                ]);
+                const removed = current.filter((id) => !next.includes(id));
+                const closed = Array.from(/* @__PURE__ */ new Set([
+                  ...location.values.closed.filter((id) => !next.includes(id)),
+                  ...removed
+                ]));
+                location.values.closed = closed;
+                layout.values.layoutMode = mode;
+              };
               return batch(() => {
                 if (!intent.data) {
                   return;
                 }
                 if (intent.data?.revert) {
-                  layout.values.layoutMode = layoutModeHistory.values.pop() ?? "solo";
+                  setMode(layoutModeHistory.values.pop() ?? "solo");
                   return {
                     data: true
                   };
                 }
                 if (isLayoutMode(intent?.data?.layoutMode)) {
                   layoutModeHistory.values.push(layout.values.layoutMode);
-                  layout.values.layoutMode = intent.data.layoutMode;
+                  setMode(intent.data.layoutMode);
                 } else {
                   log.warn("Invalid layout mode", intent?.data?.layoutMode, {
                     F: __dxlog_file,
-                    L: 379,
+                    L: 408,
                     S: void 0,
                     C: (f, a) => f(...a)
                   });
@@ -1530,9 +1569,11 @@ var DeckPlugin = ({ observability } = {}) => {
                 };
               });
             }
-            case LayoutAction2.SCROLL_INTO_VIEW: {
+            case LayoutAction3.SCROLL_INTO_VIEW: {
               layout.values.scrollIntoView = intent.data?.id ?? void 0;
-              return void 0;
+              return {
+                data: true
+              };
             }
             case DeckAction.UPDATE_PLANK_SIZE: {
               const { id, size } = intent.data;
@@ -1574,7 +1615,7 @@ var DeckPlugin = ({ observability } = {}) => {
                   return;
                 }
                 const processLayoutEntry = (partName, entryString, currentLayout) => {
-                  const toggle = true;
+                  const toggle = false;
                   const [id, path] = entryString.split(SLUG_PATH_SEPARATOR4);
                   const layoutEntry = {
                     id,
@@ -1615,7 +1656,7 @@ var DeckPlugin = ({ observability } = {}) => {
                 intents: [
                   newlyOpen.length > 0 ? [
                     {
-                      action: LayoutAction2.SCROLL_INTO_VIEW,
+                      action: LayoutAction3.SCROLL_INTO_VIEW,
                       data: {
                         id: newlyOpen[0]
                       }
@@ -1660,7 +1701,7 @@ var DeckPlugin = ({ observability } = {}) => {
               if (data.scrollIntoView && layout.values.layoutMode === "deck") {
                 intents.push([
                   {
-                    action: LayoutAction2.SCROLL_INTO_VIEW,
+                    action: LayoutAction3.SCROLL_INTO_VIEW,
                     data: {
                       id: data.id
                     }
@@ -1731,12 +1772,6 @@ var DeckPlugin = ({ observability } = {}) => {
                         data: true,
                         intents: [
                           [
-                            {
-                              action: LayoutAction2.SET_LAYOUT_MODE,
-                              data: {
-                                layoutMode: "solo"
-                              }
-                            },
                             {
                               action: NavigationAction3.OPEN,
                               data: {
@@ -1746,6 +1781,12 @@ var DeckPlugin = ({ observability } = {}) => {
                                   ]
                                 }
                               }
+                            },
+                            {
+                              action: LayoutAction3.SET_LAYOUT_MODE,
+                              data: {
+                                layoutMode: "solo"
+                              }
                             }
                           ]
                         ]
@@ -1756,34 +1797,34 @@ var DeckPlugin = ({ observability } = {}) => {
                         intents: [
                           [
                             {
-                              action: LayoutAction2.SET_LAYOUT_MODE,
-                              data: {
-                                layoutMode: "deck"
-                              }
-                            },
-                            {
-                              action: NavigationAction3.CLOSE,
+                              action: NavigationAction3.OPEN,
                               data: {
+                                noToggle: true,
                                 activeParts: {
-                                  solo: [
+                                  main: [
                                     entryId
                                   ]
                                 }
                               }
                             },
                             {
-                              action: NavigationAction3.OPEN,
+                              action: LayoutAction3.SET_LAYOUT_MODE,
+                              data: {
+                                layoutMode: "deck"
+                              }
+                            },
+                            {
+                              action: NavigationAction3.CLOSE,
                               data: {
-                                noToggle: true,
                                 activeParts: {
-                                  main: [
+                                  solo: [
                                     entryId
                                   ]
                                 }
                               }
                             },
                             {
-                              action: LayoutAction2.SCROLL_INTO_VIEW,
+                              action: LayoutAction3.SCROLL_INTO_VIEW,
                               data: {
                                 id: entryId
                               }