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

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 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 { 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 { scheduledEffect } from "@dxos/echo-signals/core";
 import { LocalStorageStore } from "@dxos/local-storage";
@@ -360,11 +360,15 @@ 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
@@ -518,7 +522,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, LayoutAction as LayoutAction2 } from "@dxos/app-framework";
+import { Surface as Surface6, useIntentDispatcher as useIntentDispatcher3, indexInPart, partLength } from "@dxos/app-framework";
 import { debounce } from "@dxos/async";
 import { useGraph as useGraph5 } from "@dxos/plugin-graph";
 import { useAttendableAttributes } from "@dxos/react-ui-attention";
@@ -533,7 +537,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 }) => {
+var Plank = /* @__PURE__ */ memo2(({ entry, layoutParts, part, layoutMode, order, last }) => {
   const dispatch = useIntentDispatcher3();
   const coordinate = useMemo3(() => ({
     part,
@@ -574,20 +578,13 @@ var Plank = /* @__PURE__ */ memo2(({ entry, layoutParts, part, layoutMode, order
   }, []);
   useLayoutEffect(() => {
     if (scrollIntoView === coordinate.entryId) {
-      const focusable = rootElement.current?.querySelector("input") || rootElement.current?.querySelector("button") || rootElement.current;
-      focusable?.focus({
+      rootElement.current?.focus({
         preventScroll: true
       });
-      layoutMode === "deck" && focusable?.scrollIntoView({
+      layoutMode === "deck" && rootElement.current?.scrollIntoView({
         behavior: "smooth",
         inline: "center"
       });
-      void dispatch({
-        action: LayoutAction2.SCROLL_INTO_VIEW,
-        data: {
-          id: void 0
-        }
-      });
     }
   }, [
     coordinate.entryId,
@@ -912,7 +909,8 @@ var DeckLayout = ({ layoutParts, toasts, overscroll, showHints, panels, onDismis
     layoutParts,
     part: "main",
     layoutMode,
-    order: index * 2 + 1
+    order: index * 2 + 1,
+    last: index === layoutParts.main.length - 1
   }))))), /* @__PURE__ */ React14.createElement("div", {
     role: "none",
     className: isSoloModeLoaded ? "relative bg-deck overflow-hidden" : "sr-only",
@@ -1311,36 +1309,19 @@ 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) {
-        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
-          }
+        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 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 {
@@ -1453,11 +1434,11 @@ var DeckPlugin = ({ observability } = {}) => {
             filter: (node) => false,
             actions: () => [
               {
-                id: `${LayoutAction3.SET_LAYOUT_MODE}/fullscreen`,
+                id: `${LayoutAction2.SET_LAYOUT_MODE}/fullscreen`,
                 data: async () => {
                   await intentPlugin?.provides.intent.dispatch({
                     plugin: DECK_PLUGIN,
-                    action: LayoutAction3.SET_LAYOUT_MODE,
+                    action: LayoutAction2.SET_LAYOUT_MODE,
                     data: {
                       layoutMode: "fullscreen"
                     }
@@ -1520,46 +1501,27 @@ var DeckPlugin = ({ observability } = {}) => {
       intent: {
         resolver: (intent) => {
           switch (intent.action) {
-            case LayoutAction3.SET_LAYOUT: {
+            case LayoutAction2.SET_LAYOUT: {
               return intent.data && handleSetLayout(intent.data);
             }
-            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;
-              };
+            case LayoutAction2.SET_LAYOUT_MODE: {
               return batch(() => {
                 if (!intent.data) {
                   return;
                 }
                 if (intent.data?.revert) {
-                  setMode(layoutModeHistory.values.pop() ?? "solo");
+                  layout.values.layoutMode = layoutModeHistory.values.pop() ?? "solo";
                   return {
                     data: true
                   };
                 }
                 if (isLayoutMode(intent?.data?.layoutMode)) {
                   layoutModeHistory.values.push(layout.values.layoutMode);
-                  setMode(intent.data.layoutMode);
+                  layout.values.layoutMode = intent.data.layoutMode;
                 } else {
                   log.warn("Invalid layout mode", intent?.data?.layoutMode, {
                     F: __dxlog_file,
-                    L: 408,
+                    L: 379,
                     S: void 0,
                     C: (f, a) => f(...a)
                   });
@@ -1569,11 +1531,9 @@ var DeckPlugin = ({ observability } = {}) => {
                 };
               });
             }
-            case LayoutAction3.SCROLL_INTO_VIEW: {
+            case LayoutAction2.SCROLL_INTO_VIEW: {
               layout.values.scrollIntoView = intent.data?.id ?? void 0;
-              return {
-                data: true
-              };
+              return void 0;
             }
             case DeckAction.UPDATE_PLANK_SIZE: {
               const { id, size } = intent.data;
@@ -1615,7 +1575,7 @@ var DeckPlugin = ({ observability } = {}) => {
                   return;
                 }
                 const processLayoutEntry = (partName, entryString, currentLayout) => {
-                  const toggle = false;
+                  const toggle = true;
                   const [id, path] = entryString.split(SLUG_PATH_SEPARATOR4);
                   const layoutEntry = {
                     id,
@@ -1656,7 +1616,7 @@ var DeckPlugin = ({ observability } = {}) => {
                 intents: [
                   newlyOpen.length > 0 ? [
                     {
-                      action: LayoutAction3.SCROLL_INTO_VIEW,
+                      action: LayoutAction2.SCROLL_INTO_VIEW,
                       data: {
                         id: newlyOpen[0]
                       }
@@ -1701,7 +1661,7 @@ var DeckPlugin = ({ observability } = {}) => {
               if (data.scrollIntoView && layout.values.layoutMode === "deck") {
                 intents.push([
                   {
-                    action: LayoutAction3.SCROLL_INTO_VIEW,
+                    action: LayoutAction2.SCROLL_INTO_VIEW,
                     data: {
                       id: data.id
                     }
@@ -1772,6 +1732,12 @@ var DeckPlugin = ({ observability } = {}) => {
                         data: true,
                         intents: [
                           [
+                            {
+                              action: LayoutAction2.SET_LAYOUT_MODE,
+                              data: {
+                                layoutMode: "solo"
+                              }
+                            },
                             {
                               action: NavigationAction3.OPEN,
                               data: {
@@ -1781,12 +1747,6 @@ var DeckPlugin = ({ observability } = {}) => {
                                   ]
                                 }
                               }
-                            },
-                            {
-                              action: LayoutAction3.SET_LAYOUT_MODE,
-                              data: {
-                                layoutMode: "solo"
-                              }
                             }
                           ]
                         ]
@@ -1797,34 +1757,34 @@ var DeckPlugin = ({ observability } = {}) => {
                         intents: [
                           [
                             {
-                              action: NavigationAction3.OPEN,
+                              action: LayoutAction2.SET_LAYOUT_MODE,
                               data: {
-                                noToggle: true,
-                                activeParts: {
-                                  main: [
-                                    entryId
-                                  ]
-                                }
+                                layoutMode: "deck"
                               }
                             },
                             {
-                              action: LayoutAction3.SET_LAYOUT_MODE,
+                              action: NavigationAction3.CLOSE,
                               data: {
-                                layoutMode: "deck"
+                                activeParts: {
+                                  solo: [
+                                    entryId
+                                  ]
+                                }
                               }
                             },
                             {
-                              action: NavigationAction3.CLOSE,
+                              action: NavigationAction3.OPEN,
                               data: {
+                                noToggle: true,
                                 activeParts: {
-                                  solo: [
+                                  main: [
                                     entryId
                                   ]
                                 }
                               }
                             },
                             {
-                              action: LayoutAction3.SCROLL_INTO_VIEW,
+                              action: LayoutAction2.SCROLL_INTO_VIEW,
                               data: {
                                 id: entryId
                               }