@dxos/plugin-deck 0.7.2 → 0.7.3-staging.0905f03

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";
@@ -32,7 +33,7 @@ import { Sidebar as MenuIcon } from "@phosphor-icons/react";
 import { untracked } from "@preact/signals-core";
 import React14, { useCallback as useCallback2, useEffect as useEffect5, useMemo as useMemo5, useRef as useRef2, Fragment as Fragment2 } from "react";
 import { Surface as Surface9, firstIdInPart, usePlugin } from "@dxos/app-framework";
-import { Button as Button3, Dialog, Main as Main3, Popover as Popover2, useOnTransition, useTranslation as useTranslation5 } from "@dxos/react-ui";
+import { AlertDialog, Button as Button3, Dialog as NaturalDialog, Main as Main3, Popover as Popover2, useOnTransition, useTranslation as useTranslation5 } from "@dxos/react-ui";
 import { Stack, StackContext as StackContext2, DEFAULT_HORIZONTAL_SIZE } from "@dxos/react-ui-stack";
 import { getSize, mainPaddingTransitions as mainPaddingTransitions2 } from "@dxos/react-ui-theme";
 
@@ -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,
@@ -782,7 +786,7 @@ var PlankSeparator = ({ index }) => index > 0 ? /* @__PURE__ */ React14.createEl
 }) : null;
 var DeckLayout = ({ layoutParts, toasts, overscroll, showHints, panels, onDismissToast }) => {
   const context = useLayout();
-  const { layoutMode, sidebarOpen, complementarySidebarOpen, dialogOpen, dialogContent, dialogBlockAlign, popoverOpen, popoverContent, popoverAnchorId } = context;
+  const { layoutMode, sidebarOpen, complementarySidebarOpen, dialogOpen, dialogContent, dialogBlockAlign, dialogType, popoverOpen, popoverContent, popoverAnchorId } = context;
   const { t } = useTranslation5(DECK_PLUGIN);
   const { plankSizing } = useDeckContext();
   const attentionPlugin = usePlugin("dxos.org/plugin/attention");
@@ -832,6 +836,7 @@ var DeckLayout = ({ layoutParts, toasts, overscroll, showHints, panels, onDismis
     overscroll,
     layoutParts.main
   ]);
+  const Dialog = dialogType === "alert" ? AlertDialog : NaturalDialog;
   return /* @__PURE__ */ React14.createElement(Popover2.Root, {
     modal: true,
     open: !!(popoverAnchorId && popoverOpen),
@@ -909,8 +914,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",
@@ -1238,6 +1242,7 @@ var DeckPlugin = ({ observability } = {}) => {
     dialogContent: null,
     dialogOpen: false,
     dialogBlockAlign: void 0,
+    dialogType: void 0,
     popoverContent: null,
     popoverAnchorId: void 0,
     popoverOpen: false,
@@ -1259,7 +1264,7 @@ var DeckPlugin = ({ observability } = {}) => {
   const layoutModeHistory = create({
     values: []
   });
-  const handleSetLayout = ({ element, state, component, subject, anchorId, dialogBlockAlign }) => {
+  const handleSetLayout = ({ element, state, component, subject, anchorId, dialogBlockAlign, dialogType }) => {
     switch (element) {
       case "sidebar": {
         layout.values.sidebarOpen = state ?? !layout.values.sidebarOpen;
@@ -1280,6 +1285,7 @@ var DeckPlugin = ({ observability } = {}) => {
           subject
         } : null;
         layout.values.dialogBlockAlign = dialogBlockAlign ?? "center";
+        layout.values.dialogType = dialogType;
         return {
           data: true
         };
@@ -1309,19 +1315,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 +1457,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 +1524,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: 412,
                     S: void 0,
                     C: (f, a) => f(...a)
                   });
@@ -1531,9 +1574,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 +1620,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 +1661,7 @@ var DeckPlugin = ({ observability } = {}) => {
                 intents: [
                   newlyOpen.length > 0 ? [
                     {
-                      action: LayoutAction2.SCROLL_INTO_VIEW,
+                      action: LayoutAction3.SCROLL_INTO_VIEW,
                       data: {
                         id: newlyOpen[0]
                       }
@@ -1661,7 +1706,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 +1776,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 +1787,12 @@ var DeckPlugin = ({ observability } = {}) => {
                                   ]
                                 }
                               }
+                            },
+                            {
+                              action: LayoutAction3.SET_LAYOUT_MODE,
+                              data: {
+                                layoutMode: "solo"
+                              }
                             }
                           ]
                         ]
@@ -1755,9 +1801,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 +1831,7 @@ var DeckPlugin = ({ observability } = {}) => {
                               }
                             },
                             {
-                              action: LayoutAction2.SCROLL_INTO_VIEW,
+                              action: LayoutAction3.SCROLL_INTO_VIEW,
                               data: {
                                 id: entryId
                               }