@dxos/plugin-deck 0.7.4-staging.f7e8224 → 0.7.5-main.499c70c

package/src/components/DeckLayout/ActiveNode.tsx

@@ -21,7 +21,7 @@ export const ActiveNode = () => {
     <div role='none' className='sr-only'>
       {/* TODO(wittjosiah): Weird that this is a surface, feel like it's not really render logic.
             Probably this lives in React-land currently in order to access translations? */}
-      <Surface role='document-title' data={{ activeNode }} limit={1} />
+      <Surface role='document-title' data={{ subject: activeNode }} limit={1} />
     </div>
   );
 };

package/src/components/DeckLayout/ComplementarySidebar.tsx

@@ -5,6 +5,7 @@
 import React, { useMemo } from 'react';
 
 import {
+  createIntent,
   type LayoutCoordinate,
   NavigationAction,
   SLUG_PATH_SEPARATOR,
@@ -36,7 +37,7 @@ export const ComplementarySidebar = ({ panels, current }: ComplementarySidebarPr
   const id = attended[0] ? `${attended[0]}${SLUG_PATH_SEPARATOR}${panel}` : undefined;
   const { graph } = useGraph();
   const node = useNode(graph, id);
-  const dispatch = useIntentDispatcher();
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
   useNodeActionExpander(node);
 
   const actions = useMemo(
@@ -44,7 +45,7 @@ export const ComplementarySidebar = ({ panels, current }: ComplementarySidebarPr
       panels.map(({ id, label, icon }) => ({
         id: `complementary-${id}`,
         data: () => {
-          void dispatch({ action: NavigationAction.OPEN, data: { activeParts: { complementary: id } } });
+          void dispatch(createIntent(NavigationAction.Open, { activeParts: { complementary: id } }));
         },
         properties: {
           label,
@@ -62,7 +63,7 @@ export const ComplementarySidebar = ({ panels, current }: ComplementarySidebarPr
   // TODO(burdon): Scroll area should be controlled by surface.
   return (
     <Main.ComplementarySidebar>
-      <StackContext.Provider value={{ size: 'contain', orientation: 'horizontal', separators: false, rail: true }}>
+      <StackContext.Provider value={{ size: 'contain', orientation: 'horizontal', rail: true }}>
         <div role='none' className={mx(railGridHorizontal, 'grid grid-cols-[100%] bs-full')}>
           <NodePlankHeading coordinate={coordinate} node={node} popoverAnchorId={popoverAnchorId} actions={actions} />
           <ScrollArea.Root>

package/src/components/DeckLayout/DeckLayout.tsx

@@ -198,7 +198,6 @@ export const DeckLayout = ({ layoutParts, toasts, overscroll, showHints, panels,
                 {...(isSoloModeLoaded && { inert: '' })}
               >
                 <Stack
-                  separators={false}
                   orientation='horizontal'
                   size='contain'
                   classNames={['absolute inset-block-0 -inset-inline-px', mainPaddingTransitions]}
@@ -226,9 +225,7 @@ export const DeckLayout = ({ layoutParts, toasts, overscroll, showHints, panels,
                 className={isSoloModeLoaded ? 'relative bg-deck overflow-hidden' : 'sr-only'}
                 {...(!isSoloModeLoaded && { inert: '' })}
               >
-                <StackContext.Provider
-                  value={{ size: 'contain', orientation: 'horizontal', separators: false, rail: true }}
-                >
+                <StackContext.Provider value={{ size: 'contain', orientation: 'horizontal', rail: true }}>
                   <Plank entry={layoutParts.solo?.[0]} layoutParts={layoutParts} part='solo' layoutMode={layoutMode} />
                 </StackContext.Provider>
               </div>
@@ -243,14 +240,13 @@ export const DeckLayout = ({ layoutParts, toasts, overscroll, showHints, panels,
       {/* Global popovers. */}
       <Popover.Portal>
         <Popover.Content
-          classNames='z-[60]'
           onEscapeKeyDown={() => {
             context.popoverOpen = false;
             context.popoverAnchorId = undefined;
           }}
         >
           <Popover.Viewport>
-            <Surface role='popover' data={popoverContent} />
+            <Surface role='popover' data={popoverContent} limit={1} />
           </Popover.Viewport>
           <Popover.Arrow />
         </Popover.Content>
@@ -259,7 +255,7 @@ export const DeckLayout = ({ layoutParts, toasts, overscroll, showHints, panels,
       {/* Global dialog. */}
       <Dialog.Root open={dialogOpen} onOpenChange={(nextOpen) => (context.dialogOpen = nextOpen)}>
         <Dialog.Overlay blockAlign={dialogBlockAlign}>
-          <Surface role='dialog' data={dialogContent} />
+          <Surface role='dialog' data={dialogContent} limit={1} />
         </Dialog.Overlay>
       </Dialog.Root>
 

package/src/components/DeckLayout/Fullscreen.tsx

@@ -23,7 +23,7 @@ export const Fullscreen = ({ id }: { id?: string }) => {
         limit={1}
         fallback={Fallback}
         data={{
-          active: fullScreenNode?.data,
+          subject: fullScreenNode?.data,
           component: id?.startsWith(SURFACE_PREFIX) ? id.slice(SURFACE_PREFIX.length) : undefined,
         }}
       />

package/src/components/DeckLayout/NodePlankHeading.tsx

@@ -5,6 +5,7 @@
 import React, { Fragment, memo, useEffect, useMemo } from 'react';
 
 import {
+  createIntent,
   LayoutAction,
   NavigationAction,
   SLUG_PATH_SEPARATOR,
@@ -48,7 +49,7 @@ export const NodePlankHeading = memo(
     const label = pending
       ? t('pending heading')
       : toLocalizedString(node?.properties?.label ?? ['plank heading fallback label', { ns: DECK_PLUGIN }], t);
-    const dispatch = useIntentDispatcher();
+    const { dispatchPromise: dispatch } = useIntentDispatcher();
     const ActionRoot = node && popoverAnchorId === `dxos.org/ui/${DECK_PLUGIN}/${node.id}` ? Popover.Anchor : Fragment;
     const [isNotMobile] = useMediaQuery('md');
 
@@ -87,7 +88,7 @@ export const NodePlankHeading = memo(
                 typeof action.data === 'function' && action.data?.({ node: action as Node, caller: DECK_PLUGIN })
               }
             >
-              <Surface role='menu-footer' data={{ object: node.data }} />
+              <Surface role='menu-footer' data={{ subject: node.data }} />
             </StackItem.Sigil>
           ) : (
             <StackItem.SigilButton>
@@ -107,7 +108,7 @@ export const NodePlankHeading = memo(
         </TextTooltip>
         {node && layoutPart !== 'complementary' && (
           // TODO(Zan): What are we doing with layout coordinate here?
-          <Surface role='navbar-end' direction='inline-reverse' data={{ object: node.data }} />
+          <Surface role='navbar-end' data={{ subject: node.data }} />
         )}
         {/* NOTE(thure): Pinning & unpinning are temporarily disabled */}
         <PlankControls
@@ -121,36 +122,22 @@ export const NodePlankHeading = memo(
 
             // TODO(Zan): Update this to use the new layout actions.
             if (eventType === 'solo') {
-              return dispatch([
-                {
-                  action: NavigationAction.ADJUST,
-                  data: { type: eventType, layoutCoordinate: { part: 'main', entryId: coordinate.entryId } },
-                },
-              ]);
+              return dispatch(
+                createIntent(NavigationAction.Adjust, {
+                  type: eventType,
+                  layoutCoordinate: { part: 'main', entryId: coordinate.entryId },
+                }),
+              );
             } else if (eventType === 'close') {
               if (layoutPart === 'complementary') {
-                return dispatch({
-                  action: LayoutAction.SET_LAYOUT,
-                  data: {
-                    element: 'complementary',
-                    state: false,
-                  },
-                });
+                return dispatch(createIntent(LayoutAction.SetLayout, { element: 'complementary', state: false }));
               } else {
-                return dispatch({
-                  action: NavigationAction.CLOSE,
-                  data: {
-                    activeParts: {
-                      [layoutPart]: [coordinate.entryId],
-                    },
-                  },
-                });
+                return dispatch(
+                  createIntent(NavigationAction.Close, { activeParts: { [layoutPart]: [coordinate.entryId] } }),
+                );
               }
             } else {
-              return dispatch({
-                action: NavigationAction.ADJUST,
-                data: { type: eventType, layoutCoordinate: coordinate },
-              });
+              return dispatch(createIntent(NavigationAction.Adjust, { type: eventType, layoutCoordinate: coordinate }));
             }
           }}
           close={layoutPart === 'complementary' ? 'minify-end' : true}
@@ -165,7 +152,6 @@ export const NodePlankHeading = memo(
               classNames='!pli-2 !plb-3 [&>svg]:-scale-x-100'
               icon='ph--sidebar-simple--regular'
               size={4}
-              tooltipZIndex='70'
             />
           )}
         </PlankControls>

package/src/components/DeckLayout/Plank.tsx

@@ -15,6 +15,7 @@ import {
   indexInPart,
   partLength,
   LayoutAction,
+  createIntent,
 } from '@dxos/app-framework';
 import { debounce } from '@dxos/async';
 import { useGraph } from '@dxos/plugin-graph';
@@ -25,8 +26,8 @@ import { mainIntrinsicSize, mx } from '@dxos/react-ui-theme';
 import { NodePlankHeading } from './NodePlankHeading';
 import { PlankContentError, PlankError } from './PlankError';
 import { PlankLoading } from './PlankLoading';
-import { DeckAction } from '../../DeckPlugin';
 import { useNode, useMainSize } from '../../hooks';
+import { DeckAction } from '../../types';
 import { useDeckContext } from '../DeckContext';
 import { useLayout } from '../LayoutContext';
 
@@ -42,7 +43,7 @@ export type PlankProps = {
 };
 
 export const Plank = memo(({ entry, layoutParts, part, layoutMode, order }: PlankProps) => {
-  const dispatch = useIntentDispatcher();
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
   const coordinate: LayoutCoordinate = useMemo(() => ({ part, entryId: entry?.id ?? UNKNOWN_ID }), [entry?.id, part]);
   const { popoverAnchorId, scrollIntoView } = useLayout();
   const { plankSizing } = useDeckContext();
@@ -61,7 +62,7 @@ export const Plank = memo(({ entry, layoutParts, part, layoutMode, order }: Plan
   const size = plankSizing?.[coordinate.entryId] as number | undefined;
   const setSize = useCallback(
     debounce((nextSize: number) => {
-      return dispatch({ action: DeckAction.UPDATE_PLANK_SIZE, data: { id: coordinate.entryId, size: nextSize } });
+      return dispatch(createIntent(DeckAction.UpdatePlankSize, { id: coordinate.entryId, size: nextSize }));
     }, 200),
     [dispatch, coordinate.entryId],
   );
@@ -81,7 +82,7 @@ export const Plank = memo(({ entry, layoutParts, part, layoutMode, order }: Plan
       focusable?.focus({ preventScroll: true });
       layoutMode === 'deck' && focusable?.scrollIntoView({ behavior: 'smooth', inline: 'center' });
       // Clear the scroll into view state once it has been actioned.
-      void dispatch({ action: LayoutAction.SCROLL_INTO_VIEW, data: { id: undefined } });
+      void dispatch(createIntent(LayoutAction.ScrollIntoView, { id: undefined }));
     }
   }, [coordinate.entryId, scrollIntoView, layoutMode]);
 
@@ -93,7 +94,8 @@ export const Plank = memo(({ entry, layoutParts, part, layoutMode, order }: Plan
   const data = useMemo(
     () =>
       node && {
-        ...(entry?.path ? { subject: node.data, path: entry.path } : { object: node.data }),
+        subject: node.data,
+        path: entry?.path,
         coordinate,
         popoverAnchorId,
       },

package/src/components/DeckLayout/PlankControls.tsx

@@ -4,6 +4,7 @@
 
 import React, { forwardRef } from 'react';
 
+import { type PartAdjustment } from '@dxos/app-framework';
 import {
   Button,
   ButtonGroup,
@@ -16,8 +17,7 @@ import {
 
 import { DECK_PLUGIN } from '../../meta';
 
-export type PlankControlEvent = 'solo' | 'close' | `${'pin' | 'increment'}-${'start' | 'end'}`;
-export type PlankControlHandler = (event: PlankControlEvent) => void;
+export type PlankControlHandler = (event: PartAdjustment) => void;
 
 export type PlankCapabilities = {
   incrementStart?: boolean;
@@ -44,9 +44,7 @@ const PlankControl = ({ icon, label, ...props }: Omit<ButtonProps, 'children'> &
         </Button>
       </Tooltip.Trigger>
       <Tooltip.Portal>
-        <Tooltip.Content side='bottom' classNames='z-[70]'>
-          {label}
-        </Tooltip.Content>
+        <Tooltip.Content side='bottom'>{label}</Tooltip.Content>
       </Tooltip.Portal>
     </Tooltip.Root>
   );

package/src/components/DeckLayout/Sidebar.tsx

@@ -4,7 +4,7 @@
 
 import React, { useMemo } from 'react';
 
-import { type LayoutParts, openIds, Surface } from '@dxos/app-framework';
+import { type LayoutParts, Surface } from '@dxos/app-framework';
 import { Main } from '@dxos/react-ui';
 
 import { useLayout } from '../LayoutContext';
@@ -14,29 +14,12 @@ export type SidebarProps = {
 };
 
 export const Sidebar = ({ layoutParts }: SidebarProps) => {
-  const { layoutMode, popoverAnchorId } = useLayout();
+  const { popoverAnchorId } = useLayout();
+  const navigationData = useMemo(() => ({ popoverAnchorId }), [popoverAnchorId]);
 
-  // TODO(wittjosiah): The activeIds should be path-based to avoid conflicts.
-  const activeIds = useMemo(() => {
-    if (layoutMode === 'solo') {
-      return Array.from(new Set<string>(layoutParts?.solo?.map((e) => e.id) ?? []));
-    } else if (layoutMode === 'deck') {
-      return Array.from(new Set<string>(layoutParts?.main?.map((e) => e.id) ?? []));
-    }
-
-    return Array.from(new Set<string>(openIds(layoutParts)));
-  }, [layoutParts, layoutMode]);
-
-  const navigationData = useMemo(
-    () => ({
-      popoverAnchorId,
-      activeIds,
-    }),
-    [popoverAnchorId, activeIds],
-  );
   return (
     <Main.NavigationSidebar>
-      <Surface role='navigation' data={{ ...navigationData }} limit={1} />
+      <Surface role='navigation' data={navigationData} limit={1} />
     </Main.NavigationSidebar>
   );
 };

package/src/components/DeckLayout/Toast.tsx

@@ -5,7 +5,16 @@
 import React from 'react';
 
 import type { Toast as ToastProps } from '@dxos/app-framework';
-import { Button, Icon, Toast as NaturalToast, type ToastRootProps } from '@dxos/react-ui';
+import {
+  Button,
+  Icon,
+  Toast as NaturalToast,
+  toLocalizedString,
+  useTranslation,
+  type ToastRootProps,
+} from '@dxos/react-ui';
+
+import { DECK_PLUGIN } from '../../meta';
 
 // TODO(wittjosiah): Render remaining duration as a progress bar within the toast.
 export const Toast = ({
@@ -20,26 +29,30 @@ export const Toast = ({
   onAction,
   onOpenChange,
 }: ToastProps & Pick<ToastRootProps, 'onOpenChange'>) => {
+  const { t } = useTranslation(DECK_PLUGIN);
+
   return (
     <NaturalToast.Root data-testid={id} defaultOpen duration={duration} onOpenChange={onOpenChange}>
       <NaturalToast.Body>
         <NaturalToast.Title classNames='items-center'>
           {icon && <Icon icon={icon} size={5} classNames='inline mr-1' />}
-          <span>{title}</span>
+          {title && <span>{toLocalizedString(title, t)}</span>}
         </NaturalToast.Title>
-        {description && <NaturalToast.Description>{description}</NaturalToast.Description>}
+        {description && (
+          <NaturalToast.Description>{description && toLocalizedString(description, t)}</NaturalToast.Description>
+        )}
       </NaturalToast.Body>
       <NaturalToast.Actions>
         {onAction && actionAlt && actionLabel && (
-          <NaturalToast.Action altText={actionAlt} asChild>
+          <NaturalToast.Action altText={toLocalizedString(actionAlt, t)} asChild>
             <Button data-testid='toast.action' variant='primary' onClick={() => onAction?.()}>
-              {actionLabel}
+              {toLocalizedString(actionLabel, t)}
             </Button>
           </NaturalToast.Action>
         )}
         {closeLabel && (
           <NaturalToast.Close asChild>
-            <Button data-testid='toast.close'>{closeLabel}</Button>
+            <Button data-testid='toast.close'>{toLocalizedString(closeLabel, t)}</Button>
           </NaturalToast.Close>
         )}
       </NaturalToast.Actions>

package/src/translations.ts

@@ -48,6 +48,9 @@ export default [
         'settings overscroll centering label': 'Centering',
         'settings overscroll none label': 'None',
         'settings flat deck': 'Flatten deck appearance',
+        'close current label': 'Close current plank',
+        'close others label': 'Close other planks',
+        'close all label': 'Close all planks',
       },
     },
   },

package/src/types.ts

@@ -12,8 +12,11 @@ import type {
   SurfaceProvides,
   TranslationsProvides,
 } from '@dxos/app-framework';
+import { S } from '@dxos/echo-schema';
 import { type Label } from '@dxos/react-ui';
 
+import { DECK_PLUGIN } from './meta';
+
 // TODO(Zan): In the future we should consider adding new planks adjacent to the attended plank.
 export const NewPlankPositions = ['start', 'end'] as const;
 export type NewPlankPositioning = (typeof NewPlankPositions)[number];
@@ -51,3 +54,15 @@ export type DeckPluginProvides = SurfaceProvides &
   SettingsProvides<DeckSettingsProps> &
   LayoutProvides &
   LocationProvides;
+
+export const DECK_ACTION = `${DECK_PLUGIN}/action`;
+
+export namespace DeckAction {
+  export class UpdatePlankSize extends S.TaggedClass<UpdatePlankSize>()(`${DECK_ACTION}/update-plank-size`, {
+    input: S.Struct({
+      id: S.String,
+      size: S.Number,
+    }),
+    output: S.Void,
+  }) {}
+}

package/dist/lib/browser/chunk-NIRHDTX4.mjs

@@ -1,17 +0,0 @@
-// packages/plugins/plugin-deck/src/types.ts
-var NewPlankPositions = [
-  "start",
-  "end"
-];
-var OverscrollOptions = [
-  "none",
-  "centering"
-];
-var parsePanelPlugin = (plugin) => Array.isArray(plugin?.provides.complementary?.panels) ? plugin : void 0;
-
-export {
-  NewPlankPositions,
-  OverscrollOptions,
-  parsePanelPlugin
-};
-//# sourceMappingURL=chunk-NIRHDTX4.mjs.map

package/dist/lib/browser/chunk-NIRHDTX4.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/types.ts"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport type {\n  Plugin,\n  GraphBuilderProvides,\n  IntentResolverProvides,\n  LayoutProvides,\n  LocationProvides,\n  SettingsProvides,\n  SurfaceProvides,\n  TranslationsProvides,\n} from '@dxos/app-framework';\nimport { type Label } from '@dxos/react-ui';\n\n// TODO(Zan): In the future we should consider adding new planks adjacent to the attended plank.\nexport const NewPlankPositions = ['start', 'end'] as const;\nexport type NewPlankPositioning = (typeof NewPlankPositions)[number];\n\nexport const OverscrollOptions = ['none', 'centering'] as const;\nexport type Overscroll = (typeof OverscrollOptions)[number];\n\n// TODO(wittjosiah): Include a predicate for whether the panel is visible for the current subject.\nexport type Panel = { id: string; label: Label; icon: string };\n\n// TODO(wittjosiah): Is this generic enough to be in the app framework?\nexport type PanelProvides = {\n  complementary: {\n    panels: Panel[];\n  };\n};\n\nexport const parsePanelPlugin = (plugin?: Plugin) =>\n  Array.isArray((plugin?.provides as any).complementary?.panels) ? (plugin as Plugin<PanelProvides>) : undefined;\n\nexport type DeckSettingsProps = {\n  showHints: boolean;\n  customSlots: boolean;\n  flatDeck: boolean;\n  enableNativeRedirect: boolean;\n  disableDeck: boolean;\n  newPlankPositioning: NewPlankPositioning;\n  overscroll: Overscroll;\n};\n\nexport type DeckPluginProvides = SurfaceProvides &\n  IntentResolverProvides &\n  GraphBuilderProvides &\n  TranslationsProvides &\n  SettingsProvides<DeckSettingsProps> &\n  LayoutProvides &\n  LocationProvides;\n"],
-  "mappings": ";AAiBO,IAAMA,oBAAoB;EAAC;EAAS;;AAGpC,IAAMC,oBAAoB;EAAC;EAAQ;;AAanC,IAAMC,mBAAmB,CAACC,WAC/BC,MAAMC,QAASF,QAAQG,SAAiBC,eAAeC,MAAAA,IAAWL,SAAmCM;",
-  "names": ["NewPlankPositions", "OverscrollOptions", "parsePanelPlugin", "plugin", "Array", "isArray", "provides", "complementary", "panels", "undefined"]
-}