@dxos/plugin-deck 0.7.2 → 0.7.3-staging.971cd8d

package/dist/lib/browser/index.mjs

@@ -12,9 +12,10 @@ 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 { create, getTypename, isReactiveObject } from "@dxos/echo-schema";
+import { filterPlugins, IntentAction, isLayoutAdjustment, isLayoutMode, isLayoutParts, LayoutAction as LayoutAction3, NavigationAction as NavigationAction3, openIds as openIds2, parseGraphPlugin, parseIntentPlugin, resolvePlugin, SLUG_PATH_SEPARATOR as SLUG_PATH_SEPARATOR4, Toast as ToastSchema } from "@dxos/app-framework";
+import { getTypename } from "@dxos/echo-schema";
 import { scheduledEffect } from "@dxos/echo-signals/core";
+import { create, isReactiveObject } from "@dxos/live-object";
 import { LocalStorageStore } from "@dxos/local-storage";
 import { log } from "@dxos/log";
 import { parseAttentionPlugin } from "@dxos/plugin-attention";
@@ -360,15 +361,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
@@ -522,7 +519,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 +534,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 +575,20 @@ var Plank = /* @__PURE__ */ memo2(({ entry, layoutParts, part, layoutMode, order
   }, []);
   useLayoutEffect(() => {
     if (scrollIntoView === coordinate.entryId) {
-      rootElement.current?.focus({
+      const focusable = 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,
@@ -909,8 +913,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",
@@ -1309,19 +1312,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 {
@@ -1434,11 +1454,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"
                     }
@@ -1501,27 +1521,47 @@ 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 main = openIds2(location.values.active, [
+                  "main"
+                ]);
+                const solo = openIds2(location.values.active, [
+                  "solo"
+                ]);
+                const current = layout.values.layoutMode === "solo" ? solo : main;
+                const next = mode === "solo" ? solo : [
+                  ...main,
+                  ...solo
+                ];
+                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: 409,
                     S: void 0,
                     C: (f, a) => f(...a)
                   });
@@ -1531,9 +1571,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;
@@ -1575,7 +1617,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,
@@ -1616,7 +1658,7 @@ var DeckPlugin = ({ observability } = {}) => {
                 intents: [
                   newlyOpen.length > 0 ? [
                     {
-                      action: LayoutAction2.SCROLL_INTO_VIEW,
+                      action: LayoutAction3.SCROLL_INTO_VIEW,
                       data: {
                         id: newlyOpen[0]
                       }
@@ -1661,7 +1703,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,13 +1773,8 @@ var DeckPlugin = ({ observability } = {}) => {
                       return {
                         data: true,
                         intents: [
+                          // NOTE: The order of these is important.
                           [
-                            {
-                              action: LayoutAction2.SET_LAYOUT_MODE,
-                              data: {
-                                layoutMode: "solo"
-                              }
-                            },
                             {
                               action: NavigationAction3.OPEN,
                               data: {
@@ -1747,6 +1784,12 @@ var DeckPlugin = ({ observability } = {}) => {
                                   ]
                                 }
                               }
+                            },
+                            {
+                              action: LayoutAction3.SET_LAYOUT_MODE,
+                              data: {
+                                layoutMode: "solo"
+                              }
                             }
                           ]
                         ]
@@ -1755,9 +1798,10 @@ var DeckPlugin = ({ observability } = {}) => {
                       return {
                         data: true,
                         intents: [
+                          // NOTE: The order of these is important.
                           [
                             {
-                              action: LayoutAction2.SET_LAYOUT_MODE,
+                              action: LayoutAction3.SET_LAYOUT_MODE,
                               data: {
                                 layoutMode: "deck"
                               }
@@ -1784,7 +1828,7 @@ var DeckPlugin = ({ observability } = {}) => {
                               }
                             },
                             {
-                              action: LayoutAction2.SCROLL_INTO_VIEW,
+                              action: LayoutAction3.SCROLL_INTO_VIEW,
                               data: {
                                 id: entryId
                               }