@dxos/plugin-deck 0.6.13-staging.1e988a3 → 0.6.14-main.2b6a0f3

package/src/components/DeckLayout/Plank.tsx

@@ -3,7 +3,7 @@
 //
 
 import { Plus } from '@phosphor-icons/react';
-import React, { type KeyboardEvent, useCallback, useLayoutEffect, useRef } from 'react';
+import React, { type KeyboardEvent, memo, useCallback, useLayoutEffect, useMemo, useRef } from 'react';
 
 import {
   LayoutAction,
@@ -15,11 +15,13 @@ import {
   Surface,
   useIntentDispatcher,
   type Layout,
+  indexInPart,
+  partLength,
 } from '@dxos/app-framework';
 import { debounce } from '@dxos/async';
 import { useGraph } from '@dxos/plugin-graph';
 import { Button, Tooltip, useTranslation } from '@dxos/react-ui';
-import { createAttendableAttributes } from '@dxos/react-ui-attention';
+import { useAttendableAttributes } from '@dxos/react-ui-attention';
 import { Plank as NaturalPlank } from '@dxos/react-ui-deck';
 import { mainIntrinsicSize } from '@dxos/react-ui-theme';
 
@@ -42,7 +44,7 @@ export type PlankProps = {
   searchEnabled?: boolean;
 };
 
-export const Plank = ({ entry, layoutParts, part, flatDeck, searchEnabled, layoutMode }: PlankProps) => {
+export const Plank = memo(({ entry, layoutParts, part, flatDeck, searchEnabled, layoutMode }: PlankProps) => {
   const { t } = useTranslation(DECK_PLUGIN);
   const dispatch = useIntentDispatcher();
   const { popoverAnchorId, scrollIntoView } = useLayout();
@@ -52,8 +54,12 @@ export const Plank = ({ entry, layoutParts, part, flatDeck, searchEnabled, layou
   const rootElement = useRef<HTMLDivElement | null>(null);
   const resizeable = layoutMode === 'deck';
 
-  const attendableAttrs = createAttendableAttributes(entry.id);
-  const coordinate: LayoutCoordinate = { part, entryId: entry.id };
+  const attendableAttrs = useAttendableAttributes(entry.id);
+  const coordinate: LayoutCoordinate = useMemo(() => ({ part, entryId: entry.id }), [entry.id, part]);
+  const index = indexInPart(layoutParts, coordinate);
+  const length = partLength(layoutParts, part);
+  const canIncrementStart = part === 'main' && index !== undefined && index > 0 && length !== undefined && length > 1;
+  const canIncrementEnd = part === 'main' && index !== undefined && index < length - 1 && length !== undefined;
 
   const size = plankSizing?.[entry.id] as number | undefined;
   const setSize = useCallback(
@@ -78,10 +84,23 @@ export const Plank = ({ entry, layoutParts, part, flatDeck, searchEnabled, layou
   }, [scrollIntoView, layoutMode]);
 
   const isSolo = layoutMode === 'solo' && part === 'solo';
-  const isSuppressed = layoutMode === 'solo' && part !== 'solo';
+  const isSuppressed = (layoutMode === 'solo' && part !== 'solo') || (layoutMode === 'deck' && part === 'solo');
 
   const sizeAttrs = useMainSize();
 
+  const data = useMemo(
+    () =>
+      node && {
+        ...(entry.path ? { subject: node.data, path: entry.path } : { object: node.data }),
+        coordinate,
+        popoverAnchorId,
+      },
+    [node],
+  );
+
+  // TODO(wittjosiah): Change prop to accept a component.
+  const placeholder = useMemo(() => <PlankLoading />, []);
+
   return (
     <NaturalPlank.Root
       size={size}
@@ -100,27 +119,17 @@ export const Plank = ({ entry, layoutParts, part, flatDeck, searchEnabled, layou
         {node ? (
           <>
             <NodePlankHeading
-              id={entry.id}
+              coordinate={coordinate}
               node={node}
-              layoutPart={coordinate.part}
-              layoutParts={layoutParts}
+              canIncrementStart={canIncrementStart}
+              canIncrementEnd={canIncrementEnd}
               popoverAnchorId={popoverAnchorId}
               flatDeck={flatDeck}
             />
-            <Surface
-              role='article'
-              data={{
-                ...(entry.path ? { subject: node.data, path: entry.path } : { object: node.data }),
-                coordinate,
-                popoverAnchorId,
-              }}
-              limit={1}
-              fallback={PlankContentError}
-              placeholder={<PlankLoading />}
-            />
+            <Surface role='article' data={data} limit={1} fallback={PlankContentError} placeholder={placeholder} />
           </>
         ) : (
-          <PlankError layoutCoordinate={coordinate} id={entry.id} flatDeck={flatDeck} />
+          <PlankError layoutCoordinate={coordinate} flatDeck={flatDeck} />
         )}
       </NaturalPlank.Content>
       {searchEnabled && resizeable ? (
@@ -166,4 +175,4 @@ export const Plank = ({ entry, layoutParts, part, flatDeck, searchEnabled, layou
       ) : null}
     </NaturalPlank.Root>
   );
-};
+});

package/src/components/DeckLayout/PlankError.tsx

@@ -34,13 +34,11 @@ export const PlankContentError = ({ error }: { error?: Error }) => {
 
 export const PlankError = ({
   layoutCoordinate,
-  id,
   node,
   error,
   flatDeck,
 }: {
   layoutCoordinate: LayoutCoordinate;
-  id: string;
   node?: Node;
   error?: Error;
   flatDeck?: boolean;
@@ -51,13 +49,7 @@ export const PlankError = ({
   }, []);
   return (
     <>
-      <NodePlankHeading
-        node={node}
-        id={id}
-        layoutPart={layoutCoordinate.part}
-        pending={!timedOut}
-        flatDeck={flatDeck}
-      />
+      <NodePlankHeading coordinate={layoutCoordinate} node={node} pending={!timedOut} flatDeck={flatDeck} />
       {timedOut ? <PlankContentError error={error} /> : <PlankLoading />}
     </>
   );

package/src/components/DeckLayout/Sidebar.tsx

@@ -4,18 +4,19 @@
 
 import React, { useMemo } from 'react';
 
-import { type Attention, type LayoutParts, openIds, Surface } from '@dxos/app-framework';
+import { type LayoutParts, openIds, Surface } from '@dxos/app-framework';
 import { Main } from '@dxos/react-ui';
+import { useAttended } from '@dxos/react-ui-attention';
 
 import { useLayout } from '../LayoutContext';
 
 export type SidebarProps = {
-  attention: Attention;
   layoutParts: LayoutParts;
 };
 
-export const Sidebar = ({ attention, layoutParts }: SidebarProps) => {
+export const Sidebar = ({ layoutParts }: SidebarProps) => {
   const { layoutMode, popoverAnchorId } = useLayout();
+  const attended = useAttended();
 
   const activeIds = useMemo(() => {
     if (layoutMode === 'solo') {
@@ -31,9 +32,9 @@ export const Sidebar = ({ attention, layoutParts }: SidebarProps) => {
     () => ({
       popoverAnchorId,
       activeIds,
-      attended: attention.attended,
+      attended,
     }),
-    [popoverAnchorId, activeIds, attention.attended],
+    [popoverAnchorId, activeIds, attended],
   );
   return (
     <Main.NavigationSidebar>

package/src/components/DeckLayout/StatusBar.tsx

@@ -5,14 +5,23 @@
 import React from 'react';
 
 import { Surface } from '@dxos/app-framework';
-import { mainPadding, mx } from '@dxos/react-ui-theme';
+import { mainPadding, mainPaddingTransitions, mx } from '@dxos/react-ui-theme';
 
 import { useMainSize } from '../../hooks';
 
-export const StatusBar = () => {
+export const StatusBar = ({ showHints }: { showHints?: boolean }) => {
   const sizeAttrs = useMainSize();
   return (
-    <div role='none' {...sizeAttrs} className={mx('fixed block-end-0 inset-inline-0 z-[2]', mainPadding)}>
+    <div
+      role='none'
+      {...sizeAttrs}
+      className={mx(
+        'fixed flex justify-between block-end-0 inset-inline-0 items-center border-bs border-separator z-[2]',
+        mainPadding,
+        mainPaddingTransitions,
+      )}
+    >
+      <div role='none'>{showHints && <Surface role='hints' limit={1} />}</div>
       <Surface role='status-bar' limit={1} />
     </div>
   );

package/src/components/DeckLayout/Toast.tsx

@@ -5,7 +5,7 @@
 import React from 'react';
 
 import type { Toast as ToastProps } from '@dxos/app-framework';
-import { Button, Toast as NaturalToast, type ToastRootProps } from '@dxos/react-ui';
+import { Button, Icon, Toast as NaturalToast, type ToastRootProps } from '@dxos/react-ui';
 
 // TODO(wittjosiah): Render remaining duration as a progress bar within the toast.
 export const Toast = ({
@@ -23,8 +23,8 @@ export const Toast = ({
   return (
     <NaturalToast.Root data-testid={id} defaultOpen duration={duration} onOpenChange={onOpenChange}>
       <NaturalToast.Body>
-        <NaturalToast.Title>
-          {icon?.({ className: 'inline mr-1' })}
+        <NaturalToast.Title classNames='items-center'>
+          <Icon icon={icon} size={5} classNames='inline mr-1' />
           <span>{title}</span>
         </NaturalToast.Title>
         {description && <NaturalToast.Description>{description}</NaturalToast.Description>}

package/src/components/LayoutSettings.tsx

@@ -61,25 +61,22 @@ export const LayoutSettings = ({ settings }: { settings: DeckSettingsProps }) =>
           </Select.Portal>
         </Select.Root>
       </SettingsValue>
-      <SettingsValue label={t('settings show footer label')}>
-        <Input.Switch checked={settings.showFooter} onCheckedChange={(checked) => (settings.showFooter = !!checked)} />
+      <SettingsValue label={t('settings show hints label')}>
+        <Input.Switch checked={settings.showHints} onCheckedChange={(checked) => (settings.showHints = checked)} />
       </SettingsValue>
       {!isSocket && (
         <SettingsValue label={t('settings native redirect label')}>
           <Input.Switch
             checked={settings.enableNativeRedirect}
-            onCheckedChange={(checked) => (settings.enableNativeRedirect = !!checked)}
+            onCheckedChange={(checked) => (settings.enableNativeRedirect = checked)}
           />
         </SettingsValue>
       )}
       <SettingsValue label={t('settings custom slots')}>
-        <Input.Switch
-          checked={settings.customSlots}
-          onCheckedChange={(checked) => (settings.customSlots = !!checked)}
-        />
+        <Input.Switch checked={settings.customSlots} onCheckedChange={(checked) => (settings.customSlots = checked)} />
       </SettingsValue>
       <SettingsValue label={t('settings flat deck')}>
-        <Input.Switch checked={settings.flatDeck} onCheckedChange={(checked) => (settings.flatDeck = !!checked)} />
+        <Input.Switch checked={settings.flatDeck} onCheckedChange={(checked) => (settings.flatDeck = checked)} />
       </SettingsValue>
     </>
   );

package/src/hooks/useNode.ts

@@ -16,9 +16,13 @@ import { type Graph, type Node } from '@dxos/plugin-graph';
  */
 // TODO(wittjosiah): Factor out.
 export const useNode = <T = any>(graph: Graph, id?: string, timeout?: number): Node<T> | undefined => {
-  const [nodeState, setNodeState] = useState<Node<T> | undefined>(id ? graph.findNode(id) : undefined);
+  const [nodeState, setNodeState] = useState<Node<T> | undefined>(id ? graph.findNode(id, false) : undefined);
 
   useEffect(() => {
+    if (!id && nodeState) {
+      setNodeState(undefined);
+    }
+
     if (nodeState?.id === id || !id) {
       return;
     }

package/src/layout.ts

@@ -1,6 +1,7 @@
 //
 // Copyright 2024 DXOS.org
 //
+
 import { produce } from 'immer';
 
 import {

package/src/meta.ts

@@ -2,9 +2,11 @@
 // Copyright 2023 DXOS.org
 //
 
+import { type PluginMeta } from '@dxos/app-framework';
+
 export const DECK_PLUGIN = 'dxos.org/plugin/deck';
 
 export default {
   id: DECK_PLUGIN,
   name: 'Deck',
-};
+} satisfies PluginMeta;

package/src/translations.ts

@@ -10,13 +10,12 @@ export default [
         'main header label': 'Main header',
         'open navigation sidebar label': 'Open navigation sidebar.',
         'open complementary sidebar label': 'Open complementary sidebar.',
-        'open settings label': 'Show settings',
         'plugin error message': 'Content failed to render.',
         'content fallback message': 'Unsupported',
         'content fallback description':
           'No plugin had a response for the address you navigated to. Double-check the URL, and ensure you’ve enabled a plugin that supports the object.',
         'toggle fullscreen label': 'Toggle fullscreen',
-        'settings show footer label': 'Show footer (experimental)',
+        'settings show hints label': 'Show hints',
         'settings native redirect label': 'Enable native url redirect (experimental)',
         'settings custom slots': 'Theme option (experimental)',
         'settings new plank position start label': 'Start',
@@ -27,7 +26,6 @@ export default [
         'undo action label': 'Undo',
         'undo action alt': 'Undo previous action',
         'undo close label': 'Dismiss',
-        'open comments label': 'Open comments',
         'error fallback message': 'Unable to open this item',
         'plank heading fallback label': 'Untitled',
         'actions menu label': 'Options',
@@ -41,6 +39,12 @@ export default [
         'settings overscroll centering label': 'Centering',
         'settings overscroll none label': 'None',
         'settings flat deck': 'Flatten deck appearance',
+
+        // ComplementarySidebar
+        'open settings label': 'Show settings',
+        'open comments label': 'Show Comments',
+        'open automation label': 'Show Automation',
+        'open debug label': 'Show Debug',
       },
     },
   },

package/src/types.ts

@@ -20,7 +20,7 @@ export const OverscrollOptions = ['none', 'centering'] as const;
 export type Overscroll = (typeof OverscrollOptions)[number];
 
 export type DeckSettingsProps = {
-  showFooter: boolean;
+  showHints: boolean;
   customSlots: boolean;
   flatDeck: boolean;
   enableNativeRedirect: boolean;

package/src/util/overscroll.ts

@@ -56,9 +56,9 @@ export const calculateOverscroll = (
   plankSizing: Record<string, number>,
   sidebarOpen: boolean,
   complementarySidebarOpen: boolean,
-): Pick<CSSProperties, 'paddingLeft' | 'paddingRight'> | undefined => {
+): Pick<CSSProperties, 'paddingInlineStart' | 'paddingInlineEnd'> | undefined => {
   if (!planks?.length) {
-    return;
+    return { paddingInlineStart: 0, paddingInlineEnd: 0 };
   }
 
   // TODO(Zan): Move complementary sidebar size (360px), sidebar size (270px), plank resize handle size (20px) to CSS variables.
@@ -73,7 +73,7 @@ export const calculateOverscroll = (
     const plankSize = getPlankSize(plank.id);
     const overscrollPadding = `max(0px, calc(((100dvw - ${sidebarWidth} - ${complementarySidebarWidth} - (${plankSize} + 20px)) / 2)))`;
 
-    return { paddingLeft: overscrollPadding, paddingRight: overscrollPadding };
+    return { paddingInlineStart: overscrollPadding, paddingInlineEnd: overscrollPadding };
   } else {
     // Center the plank on the screen.
     const first = planks[0];
@@ -83,8 +83,8 @@ export const calculateOverscroll = (
     const lastSize = getPlankSize(last.id);
 
     return {
-      paddingLeft: `max(0px, calc(((100dvw - (${firstSize} + 20px)) / 2) - ${sidebarWidth}))`,
-      paddingRight: `max(0px, calc(((100dvw - (${lastSize} + 20px)) / 2) - ${complementarySidebarWidth}))`,
+      paddingInlineStart: `max(0px, calc(((100dvw - (${firstSize} + 20px)) / 2) - ${sidebarWidth}))`,
+      paddingInlineEnd: `max(0px, calc(((100dvw - (${lastSize} + 20px)) / 2) - ${complementarySidebarWidth}))`,
     };
   }
 };

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/meta.ts"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nexport const DECK_PLUGIN = 'dxos.org/plugin/deck';\n\nexport default {\n  id: DECK_PLUGIN,\n  name: 'Deck',\n};\n"],
-  "mappings": ";AAIO,IAAMA,cAAc;AAE3B,IAAA,eAAe;EACbC,IAAID;EACJE,MAAM;AACR;",
-  "names": ["DECK_PLUGIN", "id", "name"]
-}