@dxos/plugin-deck 0.6.12-main.5cc132e → 0.6.12-main.c4a728f

package/dist/lib/browser/index.mjs

@@ -4,11 +4,10 @@ import {
 } from "./chunk-YVHGFQQR.mjs";
 
 // packages/plugins/plugin-deck/src/DeckPlugin.tsx
-import { ArrowsOut } from "@phosphor-icons/react";
 import { batch, effect } from "@preact/signals-core";
 import { setAutoFreeze } from "immer";
 import React15 from "react";
-import { IntentAction, LayoutAction as LayoutAction3, NavigationAction as NavigationAction3, parseGraphPlugin, parseIntentPlugin, resolvePlugin, Toast as ToastSchema, SLUG_PATH_SEPARATOR as SLUG_PATH_SEPARATOR5, isLayoutParts, isLayoutAdjustment, isLayoutMode, openIds as openIds2 } 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 } from "@dxos/app-framework";
 import { create, getTypename, isReactiveObject } from "@dxos/echo-schema";
 import { LocalStorageStore } from "@dxos/local-storage";
 import { log } from "@dxos/log";
@@ -18,7 +17,6 @@ import { createExtension } from "@dxos/plugin-graph";
 import { ObservabilityAction } from "@dxos/plugin-observability/meta";
 import { fullyQualifiedId } from "@dxos/react-client/echo";
 import { translations as deckTranslations } from "@dxos/react-ui-deck";
-import { Mosaic } from "@dxos/react-ui-mosaic";
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/constants.ts
 var NAV_ID = "NavTree";
@@ -26,9 +24,9 @@ var SURFACE_PREFIX = "surface:";
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/DeckLayout.tsx
 import { Sidebar as MenuIcon } from "@phosphor-icons/react";
-import React13, { useCallback as useCallback2, useEffect as useEffect5, useMemo as useMemo2, useRef as useRef2, useState as useState3, useLayoutEffect as useLayoutEffect2 } from "react";
-import { SLUG_PATH_SEPARATOR as SLUG_PATH_SEPARATOR3, Surface as Surface9, 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 React13, { useCallback as useCallback2, useEffect as useEffect5, useMemo as useMemo2, useRef as useRef2 } 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 { Deck } from "@dxos/react-ui-deck";
 import { getSize } from "@dxos/react-ui-theme";
 
@@ -40,8 +38,11 @@ import { useGraph } from "@dxos/plugin-graph";
 // packages/plugins/plugin-deck/src/hooks/useNode.ts
 import { useEffect, useState } from "react";
 var useNode = (graph, id, timeout) => {
-  const [nodeState, setNodeState] = useState(id ? graph.findNode(id) : void 0);
+  const [nodeState, setNodeState] = useState(id ? graph.findNode(id, false) : void 0);
   useEffect(() => {
+    if (!id && nodeState) {
+      setNodeState(void 0);
+    }
     if (nodeState?.id === id || !id) {
       return;
     }
@@ -117,17 +118,16 @@ import React5 from "react";
 import { SLUG_PATH_SEPARATOR as SLUG_PATH_SEPARATOR2, Surface as Surface3 } from "@dxos/app-framework";
 import { useGraph as useGraph3 } from "@dxos/plugin-graph";
 import { Main } from "@dxos/react-ui";
-import { createAttendableAttributes } from "@dxos/react-ui-attention";
+import { createAttendableAttributes, useAttendedIds } from "@dxos/react-ui-attention";
 import { deckGrid } from "@dxos/react-ui-deck";
 import { mx as mx2 } from "@dxos/react-ui-theme";
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/NodePlankHeading.tsx
-import { Placeholder } from "@phosphor-icons/react";
 import React2, { Fragment, useEffect as useEffect3 } from "react";
-import { LayoutAction, NavigationAction, SLUG_COLLECTION_INDICATOR, SLUG_PATH_SEPARATOR, Surface as Surface2, useIntentDispatcher, indexInPart, partLength } from "@dxos/app-framework";
+import { LayoutAction, NavigationAction, SLUG_PATH_SEPARATOR, Surface as Surface2, useIntentDispatcher, indexInPart, partLength } from "@dxos/app-framework";
 import { useGraph as useGraph2 } from "@dxos/plugin-graph";
-import { Popover, toLocalizedString, useMediaQuery, useTranslation } from "@dxos/react-ui";
-import { PlankHeading, plankHeadingIconProps } from "@dxos/react-ui-deck";
+import { Icon, Popover, toLocalizedString, useMediaQuery, useTranslation } from "@dxos/react-ui";
+import { PlankHeading } from "@dxos/react-ui-deck";
 import { TextTooltip } from "@dxos/react-ui-text-tooltip";
 var NodePlankHeading = ({
   node,
@@ -142,7 +142,7 @@ var NodePlankHeading = ({
 }) => {
   const { t } = useTranslation(DECK_PLUGIN);
   const { graph } = useGraph2();
-  const Icon = node?.properties?.icon ?? Placeholder;
+  const icon = node?.properties?.icon ?? "ph--placeholder--regular";
   const label = pending ? t("pending heading") : toLocalizedString(node?.properties?.label ?? [
     "plank heading fallback label",
     {
@@ -172,7 +172,7 @@ var NodePlankHeading = ({
   return /* @__PURE__ */ React2.createElement(PlankHeading.Root, (layoutPart !== "main" || !flatDeck) && {
     classNames: "pie-1 border-b border-separator"
   }, /* @__PURE__ */ React2.createElement(ActionRoot, null, node ? /* @__PURE__ */ React2.createElement(PlankHeading.ActionsMenu, {
-    Icon,
+    icon,
     attendableId,
     triggerLabel: t("actions menu label"),
     actions: graph.actions(node),
@@ -187,7 +187,10 @@ var NodePlankHeading = ({
     }
   })) : /* @__PURE__ */ React2.createElement(PlankHeading.Button, null, /* @__PURE__ */ React2.createElement("span", {
     className: "sr-only"
-  }, label), /* @__PURE__ */ React2.createElement(Icon, plankHeadingIconProps))), /* @__PURE__ */ React2.createElement(TextTooltip, {
+  }, label), /* @__PURE__ */ React2.createElement(Icon, {
+    icon,
+    size: 5
+  }))), /* @__PURE__ */ React2.createElement(TextTooltip, {
     text: label,
     onlyWhenTruncating: true
   }, /* @__PURE__ */ React2.createElement(PlankHeading.Label, {
@@ -237,9 +240,6 @@ var NodePlankHeading = ({
         action: NavigationAction.CLOSE,
         data: {
           activeParts: {
-            complementary: [
-              `${id}${SLUG_PATH_SEPARATOR}comments${SLUG_COLLECTION_INDICATOR}`
-            ],
             [layoutPart]: [
               id
             ]
@@ -253,7 +253,7 @@ var NodePlankHeading = ({
         }
       });
     },
-    close: layoutCoordinate?.part === "complementary" ? "minify-end" : true
+    close: layoutPart === "complementary" ? "minify-end" : true
   }));
 };
 
@@ -314,13 +314,15 @@ var LayoutContext = createContext(null);
 var useLayout = () => useContext(LayoutContext) ?? raise(new Error("Missing LayoutContext"));
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/ComplementarySidebar.tsx
-var ComplementarySidebar = ({ id, layoutParts, flatDeck }) => {
+var ComplementarySidebar = ({ context, layoutParts, flatDeck }) => {
   const { popoverAnchorId } = useLayout();
+  const attended = useAttendedIds();
+  const id = attended[0] ? `${attended[0]}${SLUG_PATH_SEPARATOR2}${context}` : void 0;
   const { graph } = useGraph3();
   const node = useNode(graph, id);
   const complementaryAttrs = createAttendableAttributes(id?.split(SLUG_PATH_SEPARATOR2)[0] ?? "never");
   useNodeActionExpander(node);
-  return /* @__PURE__ */ React5.createElement(Main.ComplementarySidebar, complementaryAttrs, node ? /* @__PURE__ */ React5.createElement("div", {
+  return /* @__PURE__ */ React5.createElement(Main.ComplementarySidebar, complementaryAttrs, /* @__PURE__ */ React5.createElement("div", {
     role: "none",
     className: mx2(deckGrid, "grid-cols-1 bs-full")
   }, /* @__PURE__ */ React5.createElement(NodePlankHeading, {
@@ -330,7 +332,7 @@ var ComplementarySidebar = ({ id, layoutParts, flatDeck }) => {
     layoutPart: "complementary",
     popoverAnchorId,
     flatDeck
-  }), /* @__PURE__ */ React5.createElement(Surface3, {
+  }), node && /* @__PURE__ */ React5.createElement(Surface3, {
     role: "article",
     data: {
       subject: node.data,
@@ -340,7 +342,7 @@ var ComplementarySidebar = ({ id, layoutParts, flatDeck }) => {
     limit: 1,
     fallback: PlankContentError,
     placeholder: /* @__PURE__ */ React5.createElement(PlankLoading, null)
-  })) : null);
+  })));
 };
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/ContentEmpty.tsx
@@ -681,11 +683,16 @@ var DeckLayout = ({ layoutParts, attention, toasts, flatDeck, overscroll, showHi
   const fullScreenSlug = useMemo2(() => firstIdInPart(layoutParts, "fullScreen"), [
     layoutParts
   ]);
-  const [scrollLeft, setScrollLeft] = useState3(null);
+  const scrollLeftRef = useRef2();
   const deckRef = useRef2(null);
-  const restoreScrollRef = useRef2(false);
+  useEffect5(() => {
+    const firstId = layoutMode === "solo" ? firstIdInPart(layoutParts, "solo") : firstIdInPart(layoutParts, "main");
+    if (attention.attended.size === 0 && firstId) {
+      document.querySelector(`article[data-attendable-id="${firstId}"] button`)?.focus();
+    }
+  }, []);
   const handleResize = useCallback2(() => {
-    setScrollLeft(null);
+    scrollLeftRef.current = null;
   }, []);
   useEffect5(() => {
     window.addEventListener("resize", handleResize);
@@ -693,33 +700,19 @@ var DeckLayout = ({ layoutParts, attention, toasts, flatDeck, overscroll, showHi
   }, [
     handleResize
   ]);
-  useLayoutEffect2(() => {
-    if (layoutMode !== "deck") {
-      restoreScrollRef.current = true;
-    } else if (restoreScrollRef.current && deckRef.current && scrollLeft) {
-      deckRef.current.scrollLeft = scrollLeft;
-      restoreScrollRef.current = false;
+  const restoreScroll = useCallback2(() => {
+    if (deckRef.current && scrollLeftRef.current != null) {
+      deckRef.current.scrollLeft = scrollLeftRef.current;
     }
-  }, [
-    layoutMode,
-    deckRef.current,
-    scrollLeft
-  ]);
+  }, []);
+  useOnTransition(layoutMode, (mode) => mode !== "deck", "deck", restoreScroll);
   const handleScroll = useCallback2((event) => {
     if (layoutMode === "deck" && event.currentTarget === event.target) {
-      setScrollLeft(event.target.scrollLeft);
+      scrollLeftRef.current = event.target.scrollLeft;
     }
   }, [
     layoutMode
   ]);
-  const complementarySlug = useMemo2(() => {
-    const entry = layoutParts.complementary?.at(0);
-    if (entry) {
-      return entry.path ? `${entry.id}${SLUG_PATH_SEPARATOR3}${entry.path}` : entry.id;
-    }
-  }, [
-    layoutParts
-  ]);
   const firstAttendedId = useMemo2(() => Array.from(attention.attended ?? [])[0], [
     attention.attended
   ]);
@@ -744,7 +737,19 @@ var DeckLayout = ({ layoutParts, attention, toasts, flatDeck, overscroll, showHi
     layoutParts.main,
     layoutParts.solo
   ]);
-  const padding = layoutMode === "deck" && overscroll === "centering" ? calculateOverscroll(layoutParts.main, plankSizing, sidebarOpen, complementarySidebarOpen) : {};
+  const padding = useMemo2(() => {
+    if (layoutMode === "deck" && overscroll === "centering") {
+      return calculateOverscroll(layoutParts.main, plankSizing, sidebarOpen, complementarySidebarOpen);
+    }
+    return {};
+  }, [
+    layoutMode,
+    overscroll,
+    layoutParts.main,
+    plankSizing,
+    sidebarOpen,
+    complementarySidebarOpen
+  ]);
   if (layoutMode === "fullscreen") {
     return /* @__PURE__ */ React13.createElement(Fullscreen, {
       id: fullScreenSlug
@@ -766,19 +771,13 @@ var DeckLayout = ({ layoutParts, attention, toasts, flatDeck, overscroll, showHi
   }), /* @__PURE__ */ React13.createElement(Main3.Root, {
     navigationSidebarOpen: context.sidebarOpen,
     onNavigationSidebarOpenChange: (next) => context.sidebarOpen = next,
-    ...complementarySidebarOpen !== null && {
-      complementarySidebarOpen: (
-        /* complementaryAvailable && */
-        context.complementarySidebarOpen
-      ),
-      onComplementarySidebarOpenChange: (next) => context.complementarySidebarOpen = next
-    }
+    complementarySidebarOpen: context.complementarySidebarOpen,
+    onComplementarySidebarOpenChange: (next) => context.complementarySidebarOpen = next
   }, /* @__PURE__ */ React13.createElement(Main3.Notch, {
     classNames: "z-[21]"
   }, /* @__PURE__ */ React13.createElement(Surface9, {
     role: "notch-start"
   }), /* @__PURE__ */ React13.createElement(Button3, {
-    // disabled={!sidebarAvailable}
     onClick: () => context.sidebarOpen = !context.sidebarOpen,
     variant: "ghost",
     classNames: "p-1"
@@ -788,7 +787,6 @@ var DeckLayout = ({ layoutParts, attention, toasts, flatDeck, overscroll, showHi
     weight: "light",
     className: getSize(5)
   })), /* @__PURE__ */ React13.createElement(Button3, {
-    // disabled={!complementaryAvailable}
     onClick: () => context.complementarySidebarOpen = !context.complementarySidebarOpen,
     variant: "ghost",
     classNames: "p-1"
@@ -804,7 +802,7 @@ var DeckLayout = ({ layoutParts, attention, toasts, flatDeck, overscroll, showHi
     attention,
     layoutParts
   }), /* @__PURE__ */ React13.createElement(ComplementarySidebar, {
-    id: complementarySlug,
+    context: "comments",
     layoutParts,
     flatDeck
   }), /* @__PURE__ */ React13.createElement(Main3.Overlay, null), parts.length === 0 && /* @__PURE__ */ React13.createElement(Main3.Content, {
@@ -932,7 +930,7 @@ var LayoutSettings = ({ settings }) => {
 
 // packages/plugins/plugin-deck/src/layout.ts
 import { produce } from "immer";
-import { SLUG_ENTRY_SEPARATOR, SLUG_KEY_VALUE_SEPARATOR, SLUG_LIST_SEPARATOR, SLUG_PATH_SEPARATOR as SLUG_PATH_SEPARATOR4 } from "@dxos/app-framework";
+import { SLUG_ENTRY_SEPARATOR, SLUG_KEY_VALUE_SEPARATOR, SLUG_LIST_SEPARATOR, SLUG_PATH_SEPARATOR as SLUG_PATH_SEPARATOR3 } from "@dxos/app-framework";
 var partsThatSupportIncrement = [
   "main"
 ];
@@ -1045,7 +1043,7 @@ var mergeLayoutParts = (...layoutParts) => {
   }), {});
 };
 var parseLayoutEntry = (itemString) => {
-  const [id, path] = itemString.split(SLUG_PATH_SEPARATOR4);
+  const [id, path] = itemString.split(SLUG_PATH_SEPARATOR3);
   const entry = {
     id
   };
@@ -1072,7 +1070,7 @@ var soloPartToUri = (layout) => {
     return "";
   }
   const entry = soloPart[0];
-  return `${entry.id}${entry.path ? SLUG_PATH_SEPARATOR4 + entry.path : ""}`;
+  return `${entry.id}${entry.path ? SLUG_PATH_SEPARATOR3 + entry.path : ""}`;
 };
 
 // packages/plugins/plugin-deck/src/translations.ts
@@ -1227,6 +1225,20 @@ var DeckPlugin = ({ observability } = {}) => {
       }
     }
   };
+  const handleSetLocation = (next) => {
+    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 nextAttended = next.main?.[0]?.id;
+        const article = document.querySelector(`article[data-attendable-id="${nextAttended}"]`);
+        article?.focus();
+      }
+    }
+    location.values.active = next;
+  };
   return {
     meta: meta_default,
     ready: async (plugins) => {
@@ -1301,13 +1313,13 @@ var DeckPlugin = ({ observability } = {}) => {
       handleNavigation = async () => {
         const pathname = window.location.pathname;
         if (pathname === "/reset") {
-          location.values.active = {
+          handleSetLocation({
             sidebar: [
               {
                 id: NAV_ID
               }
             ]
-          };
+          });
           location.values.closed = [];
           layout.values.layoutMode = "solo";
           window.location.pathname = "/";
@@ -1318,7 +1330,7 @@ var DeckPlugin = ({ observability } = {}) => {
           return;
         }
         const startingLayout = removePart(location.values.active, "solo");
-        location.values.active = mergeLayoutParts(layoutFromUri, startingLayout);
+        handleSetLocation(mergeLayoutParts(layoutFromUri, startingLayout));
         layout.values.layoutMode = "solo";
       };
       await handleNavigation();
@@ -1380,8 +1392,7 @@ var DeckPlugin = ({ observability } = {}) => {
                       ns: DECK_PLUGIN
                     }
                   ],
-                  icon: (props) => /* @__PURE__ */ React15.createElement(ArrowsOut, props),
-                  iconSymbol: "ph--arrows-out--regular",
+                  icon: "ph--arrows-out--regular",
                   keyBinding: {
                     macos: "ctrl+meta+f",
                     windows: "shift+ctrl+f"
@@ -1398,7 +1409,7 @@ var DeckPlugin = ({ observability } = {}) => {
         value: deck.values
       }, props.children)),
       root: () => {
-        return /* @__PURE__ */ React15.createElement(Mosaic.Root, null, /* @__PURE__ */ React15.createElement(DeckLayout, {
+        return /* @__PURE__ */ React15.createElement(DeckLayout, {
           attention: attentionPlugin?.provides.attention ?? {
             attended: /* @__PURE__ */ new Set()
           },
@@ -1419,7 +1430,7 @@ var DeckPlugin = ({ observability } = {}) => {
               }, 1e3);
             }
           }
-        }), /* @__PURE__ */ React15.createElement(Mosaic.DragOverlay, null));
+        });
       },
       surface: {
         component: ({ data, role }) => {
@@ -1455,7 +1466,7 @@ var DeckPlugin = ({ observability } = {}) => {
                 } else {
                   log.warn("Invalid layout mode", intent?.data?.layoutMode, {
                     F: __dxlog_file,
-                    L: 390,
+                    L: 411,
                     S: void 0,
                     C: (f, a) => f(...a)
                   });
@@ -1510,7 +1521,7 @@ var DeckPlugin = ({ observability } = {}) => {
                 }
                 const processLayoutEntry = (partName, entryString, currentLayout) => {
                   const toggle = true;
-                  const [id, path] = entryString.split(SLUG_PATH_SEPARATOR5);
+                  const [id, path] = entryString.split(SLUG_PATH_SEPARATOR4);
                   const layoutEntry = {
                     id,
                     ...path ? {
@@ -1539,7 +1550,7 @@ var DeckPlugin = ({ observability } = {}) => {
                     newLayout = processLayoutEntry(partName, layoutEntries, newLayout);
                   }
                 });
-                location.values.active = newLayout;
+                handleSetLocation(newLayout);
               });
               const ids = openIds2(location.values.active);
               const newlyOpen = ids.filter((i) => !previouslyOpenIds.has(i));
@@ -1587,10 +1598,10 @@ var DeckPlugin = ({ observability } = {}) => {
                 id: data.id
               };
               const effectivePart = getEffectivePart(data.part, layout.values.layoutMode);
-              location.values.active = openEntry(location.values.active, effectivePart, layoutEntry, {
+              handleSetLocation(openEntry(location.values.active, effectivePart, layoutEntry, {
                 positioning: data.positioning ?? settings.values.newPlankPositioning,
                 pivotId: data.pivotId
-              });
+              }));
               const intents = [];
               if (data.scrollIntoView && layout.values.layoutMode === "deck") {
                 intents.push([
@@ -1632,7 +1643,7 @@ var DeckPlugin = ({ observability } = {}) => {
                     });
                   }
                 });
-                location.values.active = newLayout;
+                handleSetLocation(newLayout);
                 return {
                   data: true
                 };
@@ -1642,7 +1653,7 @@ var DeckPlugin = ({ observability } = {}) => {
             case NavigationAction3.SET: {
               return batch(() => {
                 if (isLayoutParts(intent.data?.activeParts)) {
-                  location.values.active = intent.data.activeParts;
+                  handleSetLocation(intent.data.activeParts);
                 }
                 return {
                   data: true
@@ -1654,10 +1665,10 @@ var DeckPlugin = ({ observability } = {}) => {
                 if (isLayoutAdjustment(intent.data)) {
                   const adjustment = intent.data;
                   if (adjustment.type === "increment-end" || adjustment.type === "increment-start") {
-                    location.values.active = incrementPlank(location.values.active, {
+                    handleSetLocation(incrementPlank(location.values.active, {
                       type: adjustment.type,
                       layoutCoordinate: adjustment.layoutCoordinate
-                    });
+                    }));
                   }
                   if (adjustment.type === "solo") {
                     const entryId = adjustment.layoutCoordinate.entryId;