@dxos/plugin-deck 0.8.2-main.12df754 → 0.8.2-main.36232bc

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-deck",
-  "version": "0.8.2-main.12df754",
+  "version": "0.8.2-main.36232bc",
   "description": "DXOS Surface plugin for the main application layout.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -33,30 +33,31 @@
   "dependencies": {
     "@fluentui/react-tabster": "^9.24.2",
     "@preact/signals-core": "^1.6.0",
+    "@radix-ui/react-context": "1.1.1",
     "effect": "3.13.3",
     "immer": "^10.1.1",
-    "@dxos/app-framework": "0.8.2-main.12df754",
-    "@dxos/artifact": "0.8.2-main.12df754",
-    "@dxos/async": "0.8.2-main.12df754",
-    "@dxos/echo-schema": "0.8.2-main.12df754",
-    "@dxos/echo-signals": "0.8.2-main.12df754",
-    "@dxos/debug": "0.8.2-main.12df754",
-    "@dxos/invariant": "0.8.2-main.12df754",
-    "@dxos/keyboard": "0.8.2-main.12df754",
-    "@dxos/live-object": "0.8.2-main.12df754",
-    "@dxos/local-storage": "0.8.2-main.12df754",
-    "@dxos/log": "0.8.2-main.12df754",
-    "@dxos/plugin-observability": "0.8.2-main.12df754",
-    "@dxos/plugin-attention": "0.8.2-main.12df754",
-    "@dxos/plugin-graph": "0.8.2-main.12df754",
-    "@dxos/plugin-theme": "0.8.2-main.12df754",
-    "@dxos/react-ui-form": "0.8.2-main.12df754",
-    "@dxos/react-ui-attention": "0.8.2-main.12df754",
-    "@dxos/react-client": "0.8.2-main.12df754",
-    "@dxos/react-ui-tabs": "0.8.2-main.12df754",
-    "@dxos/react-ui-text-tooltip": "0.8.2-main.12df754",
-    "@dxos/react-ui-stack": "0.8.2-main.12df754",
-    "@dxos/util": "0.8.2-main.12df754"
+    "@dxos/app-framework": "0.8.2-main.36232bc",
+    "@dxos/artifact": "0.8.2-main.36232bc",
+    "@dxos/async": "0.8.2-main.36232bc",
+    "@dxos/echo-schema": "0.8.2-main.36232bc",
+    "@dxos/debug": "0.8.2-main.36232bc",
+    "@dxos/echo-signals": "0.8.2-main.36232bc",
+    "@dxos/invariant": "0.8.2-main.36232bc",
+    "@dxos/keyboard": "0.8.2-main.36232bc",
+    "@dxos/live-object": "0.8.2-main.36232bc",
+    "@dxos/local-storage": "0.8.2-main.36232bc",
+    "@dxos/log": "0.8.2-main.36232bc",
+    "@dxos/plugin-attention": "0.8.2-main.36232bc",
+    "@dxos/plugin-graph": "0.8.2-main.36232bc",
+    "@dxos/plugin-theme": "0.8.2-main.36232bc",
+    "@dxos/plugin-observability": "0.8.2-main.36232bc",
+    "@dxos/react-client": "0.8.2-main.36232bc",
+    "@dxos/react-ui-attention": "0.8.2-main.36232bc",
+    "@dxos/react-ui-form": "0.8.2-main.36232bc",
+    "@dxos/react-ui-stack": "0.8.2-main.36232bc",
+    "@dxos/react-ui-tabs": "0.8.2-main.36232bc",
+    "@dxos/react-ui-text-tooltip": "0.8.2-main.36232bc",
+    "@dxos/util": "0.8.2-main.36232bc"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -65,16 +66,16 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/react-ui": "0.8.2-main.12df754",
-    "@dxos/react-ui-theme": "0.8.2-main.12df754",
-    "@dxos/storybook-utils": "0.8.2-main.12df754"
+    "@dxos/react-ui": "0.8.2-main.36232bc",
+    "@dxos/react-ui-theme": "0.8.2-main.36232bc",
+    "@dxos/storybook-utils": "0.8.2-main.36232bc"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.2-main.12df754",
-    "@dxos/react-ui-theme": "0.8.2-main.12df754"
+    "@dxos/react-ui-theme": "0.8.2-main.36232bc",
+    "@dxos/react-ui": "0.8.2-main.36232bc"
   },
   "publishConfig": {
     "access": "public"

package/src/capabilities/check-app-scheme.ts

@@ -1,9 +1,6 @@
 //
 // Copyright 2025 DXOS.org
 //
-//
-// Copyright 2025 DXOS.org
-//
 
 import { Capabilities, contributes, type PluginsContext } from '@dxos/app-framework';
 
@@ -34,8 +31,9 @@ const checkAppScheme = (url: string) => {
 };
 
 export default async (context: PluginsContext) => {
-  const settingsStore = context.requestCapability(Capabilities.SettingsStore);
-  const settings = settingsStore.getStore<DeckSettingsProps>(DECK_PLUGIN)?.value;
+  const settings = context
+    .requestCapability(Capabilities.SettingsStore)
+    .getStore<DeckSettingsProps>(DECK_PLUGIN)?.value;
   if (!isSocket && settings?.enableNativeRedirect) {
     checkAppScheme(appScheme);
   }

package/src/capabilities/intent-resolver.ts

@@ -3,7 +3,7 @@
 //
 
 import { batch } from '@preact/signals-core';
-import { pipe } from 'effect';
+import { Effect, pipe } from 'effect';
 
 import {
   Capabilities,
@@ -241,55 +241,63 @@ export default (context: PluginsContext) =>
       intent: LayoutAction.UpdateLayout,
       filter: (data): data is S.Schema.Type<typeof LayoutAction.Open.fields.input> =>
         S.is(LayoutAction.Open.fields.input)(data),
-      resolve: ({ subject, options }) => {
-        const { graph } = context.requestCapability(Capabilities.AppGraph);
-        const state = context.requestCapability(DeckCapabilities.MutableDeckState);
-        const attention = context.requestCapability(AttentionCapabilities.Attention);
-        const settings = context
-          .requestCapabilities(Capabilities.SettingsStore)[0]
-          ?.getStore<DeckSettingsProps>(DECK_PLUGIN)?.value;
+      resolve: ({ subject, options }) =>
+        Effect.gen(function* () {
+          const { graph } = context.requestCapability(Capabilities.AppGraph);
+          const state = context.requestCapability(DeckCapabilities.MutableDeckState);
+          const attention = context.requestCapability(AttentionCapabilities.Attention);
+          const settings = context
+            .requestCapabilities(Capabilities.SettingsStore)[0]
+            ?.getStore<DeckSettingsProps>(DECK_PLUGIN)?.value;
 
-        const previouslyOpenIds = new Set<string>(state.deck.solo ? [state.deck.solo] : state.deck.active);
-        batch(() => {
-          const next = state.deck.solo
-            ? (subject as string[]).map((id) => createEntryId(id, options?.variant))
-            : subject.reduce(
-                (acc, entryId) =>
-                  openEntry(acc, entryId, {
-                    key: options?.key,
-                    positioning: options?.positioning ?? settings?.newPlankPositioning,
-                    pivotId: options?.pivotId,
-                    variant: options?.variant,
-                  }),
-                state.deck.active,
-              );
+          if (options?.workspace && state.activeDeck !== options?.workspace) {
+            const { dispatch } = context.requestCapability(Capabilities.IntentDispatcher);
+            yield* dispatch(
+              createIntent(LayoutAction.SwitchWorkspace, { part: 'workspace', subject: options.workspace }),
+            );
+          }
 
-          return setActive({ next, state, attention });
-        });
+          const previouslyOpenIds = new Set<string>(state.deck.solo ? [state.deck.solo] : state.deck.active);
+          batch(() => {
+            const next = state.deck.solo
+              ? (subject as string[]).map((id) => createEntryId(id, options?.variant))
+              : subject.reduce(
+                  (acc, entryId) =>
+                    openEntry(acc, entryId, {
+                      key: options?.key,
+                      positioning: options?.positioning ?? settings?.newPlankPositioning,
+                      pivotId: options?.pivotId,
+                      variant: options?.variant,
+                    }),
+                  state.deck.active,
+                );
 
-        const ids = state.deck.solo ? [state.deck.solo] : state.deck.active;
-        const newlyOpen = ids.filter((i) => !previouslyOpenIds.has(i));
+            return setActive({ next, state, attention });
+          });
 
-        return {
-          intents: [
-            ...(options?.scrollIntoView !== false
-              ? [createIntent(LayoutAction.ScrollIntoView, { part: 'current', subject: newlyOpen[0] ?? subject[0] })]
-              : []),
-            createIntent(LayoutAction.Expose, { part: 'navigation', subject: newlyOpen[0] ?? subject[0] }),
-            ...newlyOpen.map((subjectId) => {
-              const active = graph?.findNode(subjectId)?.data;
-              const typename = isLiveObject(active) ? getTypename(active) : undefined;
-              return createIntent(ObservabilityAction.SendEvent, {
-                name: 'navigation.activate',
-                properties: {
-                  subjectId,
-                  typename,
-                },
-              });
-            }),
-          ],
-        };
-      },
+          const ids = state.deck.solo ? [state.deck.solo] : state.deck.active;
+          const newlyOpen = ids.filter((i) => !previouslyOpenIds.has(i));
+
+          return {
+            intents: [
+              ...(options?.scrollIntoView !== false
+                ? [createIntent(LayoutAction.ScrollIntoView, { part: 'current', subject: newlyOpen[0] ?? subject[0] })]
+                : []),
+              createIntent(LayoutAction.Expose, { part: 'navigation', subject: newlyOpen[0] ?? subject[0] }),
+              ...newlyOpen.map((subjectId) => {
+                const active = graph?.findNode(subjectId)?.data;
+                const typename = isLiveObject(active) ? getTypename(active) : undefined;
+                return createIntent(ObservabilityAction.SendEvent, {
+                  name: 'navigation.activate',
+                  properties: {
+                    subjectId,
+                    typename,
+                  },
+                });
+              }),
+            ],
+          };
+        }),
     }),
     createResolver({
       intent: LayoutAction.UpdateLayout,

package/src/components/DeckLayout/Popover.tsx

@@ -2,72 +2,85 @@
 // Copyright 2025 DXOS.org
 //
 
+import { createContext } from '@radix-ui/react-context';
 import React, { type PropsWithChildren, useCallback, useEffect, useRef, useState } from 'react';
 
 import { Surface, useCapability } from '@dxos/app-framework';
-import { Popover } from '@dxos/react-ui';
+import { Popover, type PopoverContentInteractOutsideEvent } from '@dxos/react-ui';
 
 import { DeckCapabilities } from '../../capabilities';
 
 export type DeckPopoverRootProps = PropsWithChildren<{}>;
 
+const DEBOUNCE_DELAY = 40;
+
+type DeckPopoverContextValue = {
+  setOpen: (open: boolean) => void;
+};
+
+const [DeckPopoverProvider, useDeckPopoverContext] = createContext<DeckPopoverContextValue>('DeckPopover');
+
 export const PopoverRoot = ({ children }: DeckPopoverRootProps) => {
-  const context = useCapability(DeckCapabilities.MutableDeckState);
+  const layout = useCapability(DeckCapabilities.MutableDeckState);
   const virtualRef = useRef<HTMLButtonElement | null>(null);
   const [virtualIter, setVirtualIter] = useState(0);
+  const [open, setOpen] = useState(false);
+  const debounceRef = useRef<NodeJS.Timeout | null>(null);
 
-  // TODO(thure): This is a workaround for the difference in `React`ion time between displaying a Popover and rendering
-  //  the anchor further down the tree. Refactor to use VirtualTrigger or some other approach which does not cause a lag.
-  const [delayedPopoverVisibility, setDelayedPopoverVisibility] = useState(false);
+  // TODO(thure): This is a workaround for the race condition between displaying a Popover and either rendering
+  //  the anchor further down the tree or measuring the virtual trigger’s client rect.
   useEffect(() => {
-    context.popoverOpen ? setTimeout(() => setDelayedPopoverVisibility(true), 40) : setDelayedPopoverVisibility(false);
-  }, [context.popoverOpen]);
-
-  const handlePopoverOpenChange = useCallback(
-    (nextOpen: boolean) => {
-      if (nextOpen && (context.popoverAnchor || context.popoverAnchorId)) {
-        context.popoverOpen = true;
-      } else {
-        context.popoverOpen = false;
-        context.popoverAnchor = undefined;
-        context.popoverAnchorId = undefined;
-        context.popoverSide = undefined;
+    setOpen(false);
+    if (layout.popoverOpen) {
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
       }
-    },
-    [context],
-  );
-
-  useEffect(() => {
-    virtualRef.current = context.popoverAnchor ?? null;
-    setVirtualIter((iter) => iter + 1);
-  }, [context.popoverAnchor]);
+      if (layout.popoverAnchor && virtualRef.current !== layout.popoverAnchor) {
+        virtualRef.current = layout.popoverAnchor ?? null;
+        setVirtualIter((iter) => iter + 1);
+      }
+      debounceRef.current = setTimeout(() => setOpen(true), DEBOUNCE_DELAY);
+    }
+  }, [layout.popoverOpen, layout.popoverAnchorId, layout.popoverAnchor, layout.popoverContent]);
 
   return (
-    <Popover.Root
-      modal
-      open={!!((context.popoverAnchor || context.popoverAnchorId) && delayedPopoverVisibility)}
-      onOpenChange={handlePopoverOpenChange}
-    >
-      {context.popoverAnchor && <Popover.VirtualTrigger key={virtualIter} virtualRef={virtualRef} />}
-      {children}
-    </Popover.Root>
+    <DeckPopoverProvider setOpen={setOpen}>
+      <Popover.Root modal open={open}>
+        {layout.popoverAnchor && <Popover.VirtualTrigger key={virtualIter} virtualRef={virtualRef} />}
+        {children}
+      </Popover.Root>
+    </DeckPopoverProvider>
   );
 };
 
 export const PopoverContent = () => {
-  const context = useCapability(DeckCapabilities.MutableDeckState);
-  const handlePopoverClose = useCallback(() => {
-    context.popoverOpen = false;
-    context.popoverAnchor = undefined;
-    context.popoverAnchorId = undefined;
-    context.popoverSide = undefined;
-  }, [context]);
+  const layout = useCapability(DeckCapabilities.MutableDeckState);
+  const { setOpen } = useDeckPopoverContext('PopoverContent');
+
+  const handleClose = useCallback(
+    (event: KeyboardEvent | PopoverContentInteractOutsideEvent) => {
+      if (
+        // TODO(thure): CodeMirror should not focus itself when it updates.
+        event.type === 'dismissableLayer.focusOutside' &&
+        (event.currentTarget as HTMLElement | undefined)?.classList.contains('cm-content')
+      ) {
+        event.preventDefault();
+      } else {
+        setOpen(false);
+        layout.popoverOpen = false;
+        layout.popoverAnchor = undefined;
+        layout.popoverAnchorId = undefined;
+        layout.popoverSide = undefined;
+      }
+    },
+    [setOpen],
+  );
 
   return (
     <Popover.Portal>
-      <Popover.Content side={context.popoverSide} onEscapeKeyDown={handlePopoverClose}>
+      <Popover.Content side={layout.popoverSide} onInteractOutside={handleClose} onEscapeKeyDown={handleClose}>
         <Popover.Viewport>
-          <Surface role='popover' data={context.popoverContent} limit={1} />
+          <Surface role='popover' data={layout.popoverContent} limit={1} />
         </Popover.Viewport>
         <Popover.Arrow />
       </Popover.Content>

package/src/components/Plank/PlankControls.tsx

@@ -73,7 +73,7 @@ export const PlankCompanionControls = forwardRef<HTMLDivElement, PlankCompliment
         <PlankControl
           label={t('close companion label')}
           variant='ghost'
-          icon='ph--caret-left--regular'
+          icon='ph--x--regular'
           onClick={handleCloseCompanion}
           classNames={plankControlSpacing}
         />
@@ -114,12 +114,18 @@ export const PlankControls = forwardRef<HTMLDivElement, PlankControlsProps>(
                   label={t(
                     layoutMode === 'solo--fullscreen'
                       ? 'exit fullscreen label'
-                      : !layoutIsAnySolo
-                        ? 'show solo plank label'
-                        : 'show deck plank label',
+                      : layoutIsAnySolo
+                        ? 'show deck plank label'
+                        : 'show solo plank label',
                   )}
                   classNames={buttonClassNames}
-                  icon={layoutIsAnySolo ? 'ph--corners-in--regular' : 'ph--corners-out--regular'}
+                  icon={
+                    layoutMode === 'solo--fullscreen'
+                      ? 'ph--corners-in--regular'
+                      : layoutIsAnySolo
+                        ? 'ph--arrows-in-line-horizontal--regular'
+                        : 'ph--arrows-out-line-horizontal--regular'
+                  }
                   onClick={() => onClick?.(layoutMode === 'solo--fullscreen' ? 'solo--fullscreen' : 'solo')}
                 />
               </>

package/src/components/Plank/PlankError.tsx

@@ -6,7 +6,7 @@ import React, { useEffect, useState } from 'react';
 
 import { type Node } from '@dxos/plugin-graph';
 import { useTranslation } from '@dxos/react-ui';
-import { descriptionText, mx } from '@dxos/react-ui-theme';
+import { descriptionMessage, mx } from '@dxos/react-ui-theme';
 
 import { PlankHeading, type PlankHeadingProps } from './PlankHeading';
 import { PlankLoading } from './PlankLoading';
@@ -19,11 +19,7 @@ export const PlankContentError = ({ error }: { error?: Error }) => {
     <div role='none' className='overflow-auto p-8 attention-surface grid place-items-center'>
       <p
         role='alert'
-        className={mx(
-          descriptionText,
-          'break-words border border-dashed border-separator rounded-lg p-8',
-          errorString.length < 256 && 'text-lg',
-        )}
+        className={mx(descriptionMessage, 'break-words rounded-lg p-8', errorString.length < 256 && 'text-lg')}
       >
         {error ? errorString : t('error fallback message')}
       </p>

package/src/components/Plank/PlankHeading.tsx

@@ -17,6 +17,8 @@ import { PLANK_COMPANION_TYPE, DeckAction, type ResolvedPart, type LayoutMode }
 import { useBreakpoints } from '../../util';
 import { soloInlinePadding } from '../fragments';
 
+const MAX_COMPANIONS = 5;
+
 export type PlankHeadingProps = {
   id: string;
   part: ResolvedPart;
@@ -152,7 +154,7 @@ export const PlankHeading = memo(
                 key={id}
                 data-id={id}
                 icon={icon}
-                iconOnly={node?.id !== id}
+                iconOnly={companions.length > MAX_COMPANIONS && node?.id !== id}
                 label={toLocalizedString(label, t)}
                 size={5}
                 variant={node?.id === id ? 'primary' : 'default'}

package/dist/lib/browser/check-app-scheme-SEYECDHI.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/capabilities/check-app-scheme.ts"],
-  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n//\n// Copyright 2025 DXOS.org\n//\n\nimport { Capabilities, contributes, type PluginsContext } from '@dxos/app-framework';\n\nimport { DECK_PLUGIN } from '../meta';\nimport { type DeckSettingsProps } from '../types';\n\nconst isSocket = !!(globalThis as any).__args;\n\n// TODO(mjamesderocher): Can we get this directly from Socket?\nconst appScheme = 'composer://';\n\n// TODO(mjamesderocher): Factor out as part of NavigationPlugin.\nconst checkAppScheme = (url: string) => {\n  const iframe = document.createElement('iframe');\n  iframe.style.display = 'none';\n  document.body.appendChild(iframe);\n\n  iframe.src = url + window.location.pathname.replace(/^\\/+/, '') + window.location.search;\n\n  const timer = setTimeout(() => {\n    document.body.removeChild(iframe);\n  }, 3000);\n\n  window.addEventListener('pagehide', (event) => {\n    clearTimeout(timer);\n    document.body.removeChild(iframe);\n  });\n};\n\nexport default async (context: PluginsContext) => {\n  const settingsStore = context.requestCapability(Capabilities.SettingsStore);\n  const settings = settingsStore.getStore<DeckSettingsProps>(DECK_PLUGIN)?.value;\n  if (!isSocket && settings?.enableNativeRedirect) {\n    checkAppScheme(appScheme);\n  }\n\n  return contributes(Capabilities.Null, null);\n};\n"],
-  "mappings": ";;;;;AAOA,SAASA,cAAcC,mBAAwC;AAK/D,IAAMC,WAAW,CAAC,CAAEC,WAAmBC;AAGvC,IAAMC,YAAY;AAGlB,IAAMC,iBAAiB,CAACC,QAAAA;AACtB,QAAMC,SAASC,SAASC,cAAc,QAAA;AACtCF,SAAOG,MAAMC,UAAU;AACvBH,WAASI,KAAKC,YAAYN,MAAAA;AAE1BA,SAAOO,MAAMR,MAAMS,OAAOC,SAASC,SAASC,QAAQ,QAAQ,EAAA,IAAMH,OAAOC,SAASG;AAElF,QAAMC,QAAQC,WAAW,MAAA;AACvBb,aAASI,KAAKU,YAAYf,MAAAA;EAC5B,GAAG,GAAA;AAEHQ,SAAOQ,iBAAiB,YAAY,CAACC,UAAAA;AACnCC,iBAAaL,KAAAA;AACbZ,aAASI,KAAKU,YAAYf,MAAAA;EAC5B,CAAA;AACF;AAEA,IAAA,2BAAe,OAAOmB,YAAAA;AACpB,QAAMC,gBAAgBD,QAAQE,kBAAkBC,aAAaC,aAAa;AAC1E,QAAMC,WAAWJ,cAAcK,SAA4BC,WAAAA,GAAcC;AACzE,MAAI,CAACjC,YAAY8B,UAAUI,sBAAsB;AAC/C9B,mBAAeD,SAAAA;EACjB;AAEA,SAAOgC,YAAYP,aAAaQ,MAAM,IAAA;AACxC;",
-  "names": ["Capabilities", "contributes", "isSocket", "globalThis", "__args", "appScheme", "checkAppScheme", "url", "iframe", "document", "createElement", "style", "display", "body", "appendChild", "src", "window", "location", "pathname", "replace", "search", "timer", "setTimeout", "removeChild", "addEventListener", "event", "clearTimeout", "context", "settingsStore", "requestCapability", "Capabilities", "SettingsStore", "settings", "getStore", "DECK_PLUGIN", "value", "enableNativeRedirect", "contributes", "Null"]
-}