@dxos/plugin-deck 0.6.13 → 0.6.14-main.1366248

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';
 
@@ -32,35 +34,43 @@ import { DECK_PLUGIN } from '../../meta';
 import { useDeckContext } from '../DeckContext';
 import { useLayout } from '../LayoutContext';
 
+const UNKNOWN_ID = 'unknown_id';
+
 export type PlankProps = {
-  entry: LayoutEntry;
+  entry?: LayoutEntry;
   layoutParts: LayoutParts;
-  // TODO(wittjosiah): Remove.
+  // TODO(wittjosiah): Remove. Pass in LayoutCoordinate instead of LayoutEntry.
   part: LayoutPart;
   layoutMode: Layout['layoutMode'];
   flatDeck?: boolean;
   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 coordinate: LayoutCoordinate = useMemo(() => ({ part, entryId: entry?.id ?? UNKNOWN_ID }), [entry?.id, part]);
   const { popoverAnchorId, scrollIntoView } = useLayout();
   const { plankSizing } = useDeckContext();
   const { graph } = useGraph();
-  const node = useNode(graph, entry.id);
+  const node = useNode(graph, entry?.id);
   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(coordinate.entryId);
+  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 size = plankSizing?.[coordinate.entryId] as number | undefined;
   const setSize = useCallback(
-    debounce((newSize: number) => {
-      void dispatch({ action: DeckAction.UPDATE_PLANK_SIZE, data: { id: entry.id, size: newSize } });
-    }, 200),
-    [dispatch, entry.id],
+    debounce(
+      (newSize: number) =>
+        dispatch({ action: DeckAction.UPDATE_PLANK_SIZE, data: { id: coordinate.entryId, size: newSize } }),
+      200,
+    ),
+    [dispatch, coordinate.entryId],
   );
 
   // TODO(thure): Tabster’s focus group should handle moving focus to Main, but something is blocking it.
@@ -71,17 +81,33 @@ export const Plank = ({ entry, layoutParts, part, flatDeck, searchEnabled, layou
   }, []);
 
   useLayoutEffect(() => {
-    if (scrollIntoView === entry.id) {
+    if (scrollIntoView === coordinate.entryId) {
       rootElement.current?.focus({ preventScroll: true });
       layoutMode === 'deck' && rootElement.current?.scrollIntoView({ behavior: 'smooth', inline: 'center' });
     }
-  }, [scrollIntoView, layoutMode]);
+  }, [coordinate.entryId, scrollIntoView, layoutMode]);
 
   const isSolo = layoutMode === 'solo' && part === 'solo';
-  const isSuppressed = layoutMode === 'solo' && part !== 'solo';
+  const isSuppressed =
+    (layoutMode === 'solo' && part !== 'solo') ||
+    (layoutMode === 'deck' && part === 'solo') ||
+    coordinate.entryId === UNKNOWN_ID;
 
   const sizeAttrs = useMainSize();
 
+  const data = useMemo(
+    () =>
+      node && {
+        ...(entry?.path ? { subject: node.data, path: entry.path } : { object: node.data }),
+        coordinate,
+        popoverAnchorId,
+      },
+    [node, node?.data, entry?.path, coordinate, popoverAnchorId],
+  );
+
+  // TODO(wittjosiah): Change prop to accept a component.
+  const placeholder = useMemo(() => <PlankLoading />, []);
+
   return (
     <NaturalPlank.Root
       size={size}
@@ -100,27 +126,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 +182,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,36 +4,35 @@
 
 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 { 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();
 
+  // TODO(wittjosiah): The activeIds should be path-based to avoid conflicts.
   const activeIds = useMemo(() => {
     if (layoutMode === 'solo') {
-      return new Set<string>(layoutParts?.solo?.map((e) => e.id) ?? []);
+      return Array.from(new Set<string>(layoutParts?.solo?.map((e) => e.id) ?? []));
     } else if (layoutMode === 'deck') {
-      return new Set<string>(layoutParts?.main?.map((e) => e.id) ?? []);
+      return Array.from(new Set<string>(layoutParts?.main?.map((e) => e.id) ?? []));
     }
 
-    return new Set<string>(openIds(layoutParts));
+    return Array.from(new Set<string>(openIds(layoutParts)));
   }, [layoutParts, layoutMode]);
 
   const navigationData = useMemo(
     () => ({
       popoverAnchorId,
       activeIds,
-      attended: attention.attended,
     }),
-    [popoverAnchorId, activeIds, attention.attended],
+    [popoverAnchorId, activeIds],
   );
   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

@@ -4,8 +4,8 @@
 
 import React from 'react';
 
-import { SettingsValue } from '@dxos/plugin-settings';
 import { Input, Select, useTranslation } from '@dxos/react-ui';
+import { DeprecatedFormInput } from '@dxos/react-ui-data';
 
 import { DECK_PLUGIN } from '../meta';
 import {
@@ -23,7 +23,7 @@ export const LayoutSettings = ({ settings }: { settings: DeckSettingsProps }) =>
 
   return (
     <>
-      <SettingsValue label={t('select new plank positioning label')}>
+      <DeprecatedFormInput label={t('select new plank positioning label')}>
         <Select.Root
           value={settings.newPlankPositioning ?? 'start'}
           onValueChange={(value) => (settings.newPlankPositioning = value as NewPlankPositioning)}
@@ -41,8 +41,8 @@ export const LayoutSettings = ({ settings }: { settings: DeckSettingsProps }) =>
             </Select.Content>
           </Select.Portal>
         </Select.Root>
-      </SettingsValue>
-      <SettingsValue label={t('settings overscroll label')}>
+      </DeprecatedFormInput>
+      <DeprecatedFormInput label={t('settings overscroll label')}>
         <Select.Root
           value={settings.overscroll ?? 'none'}
           onValueChange={(value) => (settings.overscroll = value as Overscroll)}
@@ -60,27 +60,24 @@ export const LayoutSettings = ({ settings }: { settings: DeckSettingsProps }) =>
             </Select.Content>
           </Select.Portal>
         </Select.Root>
-      </SettingsValue>
-      <SettingsValue label={t('settings show footer label')}>
-        <Input.Switch checked={settings.showFooter} onCheckedChange={(checked) => (settings.showFooter = !!checked)} />
-      </SettingsValue>
+      </DeprecatedFormInput>
+      <DeprecatedFormInput label={t('settings show hints label')}>
+        <Input.Switch checked={settings.showHints} onCheckedChange={(checked) => (settings.showHints = checked)} />
+      </DeprecatedFormInput>
       {!isSocket && (
-        <SettingsValue label={t('settings native redirect label')}>
+        <DeprecatedFormInput label={t('settings native redirect label')}>
           <Input.Switch
             checked={settings.enableNativeRedirect}
-            onCheckedChange={(checked) => (settings.enableNativeRedirect = !!checked)}
+            onCheckedChange={(checked) => (settings.enableNativeRedirect = checked)}
           />
-        </SettingsValue>
+        </DeprecatedFormInput>
       )}
-      <SettingsValue label={t('settings custom slots')}>
-        <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)} />
-      </SettingsValue>
+      <DeprecatedFormInput label={t('settings custom slots')}>
+        <Input.Switch checked={settings.customSlots} onCheckedChange={(checked) => (settings.customSlots = checked)} />
+      </DeprecatedFormInput>
+      <DeprecatedFormInput label={t('settings flat deck')}>
+        <Input.Switch checked={settings.flatDeck} onCheckedChange={(checked) => (settings.flatDeck = checked)} />
+      </DeprecatedFormInput>
     </>
   );
 };

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',

package/src/types.ts

@@ -3,6 +3,7 @@
 //
 
 import type {
+  Plugin,
   GraphBuilderProvides,
   IntentResolverProvides,
   LayoutProvides,
@@ -11,6 +12,7 @@ import type {
   SurfaceProvides,
   TranslationsProvides,
 } from '@dxos/app-framework';
+import { type Label } from '@dxos/react-ui';
 
 // TODO(Zan): In the future we should consider adding new planks adjacent to the attended plank.
 export const NewPlankPositions = ['start', 'end'] as const;
@@ -19,8 +21,21 @@ export type NewPlankPositioning = (typeof NewPlankPositions)[number];
 export const OverscrollOptions = ['none', 'centering'] as const;
 export type Overscroll = (typeof OverscrollOptions)[number];
 
+// TODO(wittjosiah): Include a predicate for whether the panel is visible for the current subject.
+export type Panel = { id: string; label: Label; icon: string };
+
+// TODO(wittjosiah): Is this generic enough to be in the app framework?
+export type PanelProvides = {
+  complementary: {
+    panels: Panel[];
+  };
+};
+
+export const parsePanelPlugin = (plugin?: Plugin) =>
+  Array.isArray((plugin?.provides as any).complementary?.panels) ? (plugin as Plugin<PanelProvides>) : undefined;
+
 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"]
-}