@dxos/plugin-deck 0.6.13-main.ed424a1 → 0.6.13-staging.1e988a3

package/src/components/DeckLayout/DeckLayout.tsx

@@ -3,13 +3,21 @@
 //
 
 import { Sidebar as MenuIcon } from '@phosphor-icons/react';
-import React, { useCallback, useEffect, useMemo, useRef, type UIEvent } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState, useLayoutEffect, type UIEvent } from 'react';
 
-import { type LayoutParts, Surface, type Toast as ToastSchema, firstIdInPart, usePlugin } from '@dxos/app-framework';
-import { Button, Dialog, Main, Popover, useOnTransition, useTranslation } from '@dxos/react-ui';
-import { useAttended } from '@dxos/react-ui-attention';
+import {
+  SLUG_PATH_SEPARATOR,
+  type Attention,
+  type LayoutEntry,
+  type LayoutParts,
+  Surface,
+  type Toast as ToastSchema,
+  firstIdInPart,
+  usePlugin,
+} from '@dxos/app-framework';
+import { Button, Dialog, Main, Popover, useTranslation } from '@dxos/react-ui';
 import { Deck } from '@dxos/react-ui-deck';
-import { getSize, mainPaddingTransitions } from '@dxos/react-ui-theme';
+import { getSize } from '@dxos/react-ui-theme';
 
 import { ActiveNode } from './ActiveNode';
 import { ComplementarySidebar } from './ComplementarySidebar';
@@ -27,10 +35,11 @@ import { useLayout } from '../LayoutContext';
 
 export type DeckLayoutProps = {
   layoutParts: LayoutParts;
+  attention: Attention;
   toasts: ToastSchema[];
   flatDeck?: boolean;
   overscroll: Overscroll;
-  showHints: boolean;
+  showHintsFooter: boolean;
   slots?: {
     wallpaper?: { classNames?: string };
   };
@@ -39,10 +48,11 @@ export type DeckLayoutProps = {
 
 export const DeckLayout = ({
   layoutParts,
+  attention,
   toasts,
   flatDeck,
   overscroll,
-  showHints,
+  showHintsFooter,
   slots,
   onDismissToast,
 }: DeckLayoutProps) => {
@@ -60,42 +70,36 @@ export const DeckLayout = ({
   } = context;
   const { t } = useTranslation(DECK_PLUGIN);
   const { plankSizing } = useDeckContext();
-  const attended = useAttended();
   const searchPlugin = usePlugin('dxos.org/plugin/search');
   const fullScreenSlug = useMemo(() => firstIdInPart(layoutParts, 'fullScreen'), [layoutParts]);
 
-  const scrollLeftRef = useRef<number | null>();
-  const deckRef = useRef<HTMLDivElement>(null);
-
-  // Ensure the first plank is attended when the deck is first rendered.
-  useEffect(() => {
-    const firstId = layoutMode === 'solo' ? firstIdInPart(layoutParts, 'solo') : firstIdInPart(layoutParts, 'main');
-    if (attended.length === 0 && firstId) {
-      // TODO(wittjosiah): Focusing the type button is a workaround.
-      //   If the plank is directly focused on first load the focus ring appears.
-      document.querySelector<HTMLElement>(`article[data-attendable-id="${firstId}"] button`)?.focus();
-    }
-  }, []);
+  const [scrollLeft, setScrollLeft] = useState<number | null>(null);
+  const deckRef = useRef<HTMLDivElement | null>(null);
+  const restoreScrollRef = useRef<boolean>(false);
 
   /**
    * Clear scroll restoration state if the window is resized
    */
   const handleResize = useCallback(() => {
-    scrollLeftRef.current = null;
+    setScrollLeft(null);
   }, []);
-
   useEffect(() => {
     window.addEventListener('resize', handleResize);
     return () => window.removeEventListener('resize', handleResize);
   }, [handleResize]);
 
-  const restoreScroll = useCallback(() => {
-    if (deckRef.current && scrollLeftRef.current != null) {
-      deckRef.current.scrollLeft = scrollLeftRef.current;
+  /**
+   * Restore scroll when returning to deck mode
+   */
+  useLayoutEffect(() => {
+    if (layoutMode !== 'deck') {
+      restoreScrollRef.current = true;
+    } else if (restoreScrollRef.current && deckRef.current && scrollLeft) {
+      // console.log('[restoring scrollLeft]', scrollLeft);
+      deckRef.current.scrollLeft = scrollLeft;
+      restoreScrollRef.current = false;
     }
-  }, []);
-
-  useOnTransition(layoutMode, (mode) => mode !== 'deck', 'deck', restoreScroll);
+  }, [layoutMode, deckRef.current, scrollLeft]);
 
   /**
    * Save scroll position as the user scrolls
@@ -103,13 +107,22 @@ export const DeckLayout = ({
   const handleScroll = useCallback(
     (event: UIEvent) => {
       if (layoutMode === 'deck' && event.currentTarget === event.target) {
-        scrollLeftRef.current = (event.target as HTMLDivElement).scrollLeft;
+        // console.log('[save scroll left]', (event.target as HTMLDivElement).scrollLeft);
+        setScrollLeft((event.target as HTMLDivElement).scrollLeft);
       }
     },
     [layoutMode],
   );
 
-  const firstAttendedId = attended[0];
+  const complementarySlug = useMemo(() => {
+    const entry = layoutParts.complementary?.at(0);
+    if (entry) {
+      return entry.path ? `${entry.id}${SLUG_PATH_SEPARATOR}${entry.path}` : entry.id;
+    }
+  }, [layoutParts]);
+
+  const firstAttendedId = useMemo(() => Array.from(attention.attended ?? [])[0], [attention.attended]);
+
   useEffect(() => {
     // TODO(burdon): Can we prevent the need to re-scroll since the planks are preserved?
     //  E.g., hide the deck and just move the solo article?
@@ -121,14 +134,21 @@ export const DeckLayout = ({
     }
   }, [layoutMode, firstAttendedId]);
 
-  const isEmpty = layoutParts.main?.length === 0 && layoutParts.solo?.length === 0;
-
-  const padding = useMemo(() => {
-    if (layoutMode === 'deck' && overscroll === 'centering') {
-      return calculateOverscroll(layoutParts.main, plankSizing, sidebarOpen, complementarySidebarOpen);
+  // TODO(burdon): Needs cleaning up.
+  const parts: LayoutEntry[] = useMemo(() => {
+    const parts = [...(layoutParts.main ?? [])];
+    for (const part of layoutParts.solo ?? []) {
+      if (!parts.find((entry) => entry.id === part.id)) {
+        parts.push(part);
+      }
     }
-    return {};
-  }, [layoutMode, overscroll, layoutParts.main, plankSizing, sidebarOpen, complementarySidebarOpen]);
+    return parts;
+  }, [layoutParts.main, layoutParts.solo]);
+
+  const padding =
+    layoutMode === 'deck' && overscroll === 'centering'
+      ? calculateOverscroll(layoutParts.main, plankSizing, sidebarOpen, complementarySidebarOpen)
+      : {};
 
   if (layoutMode === 'fullscreen') {
     return <Fullscreen id={fullScreenSlug} />;
@@ -153,17 +173,25 @@ export const DeckLayout = ({
       <Main.Root
         navigationSidebarOpen={context.sidebarOpen}
         onNavigationSidebarOpenChange={(next) => (context.sidebarOpen = next)}
-        complementarySidebarOpen={context.complementarySidebarOpen}
-        onComplementarySidebarOpenChange={(next) => (context.complementarySidebarOpen = next)}
+        {...(complementarySidebarOpen !== null && {
+          complementarySidebarOpen: /* complementaryAvailable && */ context.complementarySidebarOpen as boolean,
+          onComplementarySidebarOpenChange: (next) => (context.complementarySidebarOpen = next),
+        })}
       >
         {/* Notch */}
         <Main.Notch classNames='z-[21]'>
           <Surface role='notch-start' />
-          <Button onClick={() => (context.sidebarOpen = !context.sidebarOpen)} variant='ghost' classNames='p-1'>
+          <Button
+            // disabled={!sidebarAvailable}
+            onClick={() => (context.sidebarOpen = !context.sidebarOpen)}
+            variant='ghost'
+            classNames='p-1'
+          >
             <span className='sr-only'>{t('open navigation sidebar label')}</span>
             <MenuIcon weight='light' className={getSize(5)} />
           </Button>
           <Button
+            // disabled={!complementaryAvailable}
             onClick={() => (context.complementarySidebarOpen = !context.complementarySidebarOpen)}
             variant='ghost'
             classNames='p-1'
@@ -175,52 +203,38 @@ export const DeckLayout = ({
         </Main.Notch>
 
         {/* Left sidebar. */}
-        <Sidebar layoutParts={layoutParts} />
+        <Sidebar attention={attention} layoutParts={layoutParts} />
 
         {/* Right sidebar. */}
-        {/* TODO(wittjosiah): Get context from layout parts. */}
-        <ComplementarySidebar context='comments' layoutParts={layoutParts} flatDeck={flatDeck} />
+        <ComplementarySidebar id={complementarySlug} layoutParts={layoutParts} flatDeck={flatDeck} />
 
         {/* Dialog overlay to dismiss dialogs. */}
         <Main.Overlay />
 
         {/* No content. */}
-        {isEmpty && (
+        {parts.length === 0 && (
           <Main.Content handlesFocus>
             <ContentEmpty />
           </Main.Content>
         )}
 
         {/* Solo/deck mode. */}
-        {!isEmpty && (
+        {parts.length !== 0 && (
           <Main.Content bounce classNames='grid block-end-[--statusbar-size]' handlesFocus>
             <div role='none' className='relative'>
               <Deck.Root
                 style={padding}
-                classNames={[
-                  !flatDeck && 'bg-deck',
-                  mainPaddingTransitions,
-                  'absolute inset-0',
-                  slots?.wallpaper?.classNames,
-                ]}
+                classNames={[!flatDeck && 'bg-deck', 'absolute inset-0', slots?.wallpaper?.classNames]}
                 solo={layoutMode === 'solo'}
                 onScroll={handleScroll}
                 ref={deckRef}
               >
-                <Plank
-                  entry={layoutParts.solo?.[0] ?? { id: 'unknown-solo' }}
-                  layoutParts={layoutParts}
-                  part='solo'
-                  layoutMode={layoutMode}
-                  flatDeck={flatDeck}
-                  searchEnabled={!!searchPlugin}
-                />
-                {layoutParts.main?.map((layoutEntry) => (
+                {parts.map((layoutEntry) => (
                   <Plank
                     key={layoutEntry.id}
                     entry={layoutEntry}
                     layoutParts={layoutParts}
-                    part='main'
+                    part={layoutMode === 'solo' && layoutEntry.id === layoutParts.solo?.[0]?.id ? 'solo' : 'main'}
                     layoutMode={layoutMode}
                     flatDeck={flatDeck}
                     searchEnabled={!!searchPlugin}
@@ -231,8 +245,15 @@ export const DeckLayout = ({
           </Main.Content>
         )}
 
-        {/* Footer status. */}
-        <StatusBar showHints={showHints} />
+        <StatusBar />
+
+        {/* Help hints. */}
+        {/* TODO(burdon): Need to make room for this in status bar. */}
+        {showHintsFooter && (
+          <div className='fixed bottom-0 left-0 right-0 h-[32px] z-[1] flex justify-center'>
+            <Surface role='hints' limit={1} />
+          </div>
+        )}
 
         {/* Global popovers. */}
         <Popover.Portal>

package/src/components/DeckLayout/NodePlankHeading.tsx

@@ -2,11 +2,13 @@
 // Copyright 2024 DXOS.org
 //
 
+import { Placeholder } from '@phosphor-icons/react';
 import React, { Fragment, useEffect } from 'react';
 
 import {
   LayoutAction,
   NavigationAction,
+  SLUG_COLLECTION_INDICATOR,
   SLUG_PATH_SEPARATOR,
   Surface,
   useIntentDispatcher,
@@ -14,10 +16,11 @@ import {
   partLength,
   type LayoutParts,
   type LayoutPart,
+  type LayoutEntry,
 } from '@dxos/app-framework';
 import { type Node, useGraph } from '@dxos/plugin-graph';
-import { Icon, Popover, toLocalizedString, useMediaQuery, useTranslation } from '@dxos/react-ui';
-import { PlankHeading, type PlankHeadingAction } from '@dxos/react-ui-deck';
+import { Popover, toLocalizedString, useMediaQuery, useTranslation } from '@dxos/react-ui';
+import { PlankHeading, plankHeadingIconProps } from '@dxos/react-ui-deck';
 import { TextTooltip } from '@dxos/react-ui-text-tooltip';
 
 import { DECK_PLUGIN } from '../../meta';
@@ -27,23 +30,24 @@ export const NodePlankHeading = ({
   id,
   layoutParts,
   layoutPart,
+  // TODO(wittjosiah): Unused?
+  layoutEntry,
   popoverAnchorId,
   pending,
   flatDeck,
-  actions = [],
 }: {
   node?: Node;
   id?: string;
   layoutParts?: LayoutParts;
   layoutPart?: LayoutPart;
+  layoutEntry?: LayoutEntry;
   popoverAnchorId?: string;
   pending?: boolean;
   flatDeck?: boolean;
-  actions?: PlankHeadingAction[];
 }) => {
   const { t } = useTranslation(DECK_PLUGIN);
   const { graph } = useGraph();
-  const icon = node?.properties?.icon ?? 'ph--placeholder--regular';
+  const Icon = node?.properties?.icon ?? Placeholder;
   const label = pending
     ? t('pending heading')
     : toLocalizedString(node?.properties?.label ?? ['plank heading fallback label', { ns: DECK_PLUGIN }], t);
@@ -76,11 +80,10 @@ export const NodePlankHeading = ({
       <ActionRoot>
         {node ? (
           <PlankHeading.ActionsMenu
-            icon={icon}
-            related={layoutPart === 'complementary'}
+            Icon={Icon}
             attendableId={attendableId}
             triggerLabel={t('actions menu label')}
-            actions={[actions, graph.actions(node)].filter((a) => a.length > 0)}
+            actions={graph.actions(node)}
             onAction={(action) =>
               typeof action.data === 'function' && action.data?.({ node: action as Node, caller: DECK_PLUGIN })
             }
@@ -90,16 +93,12 @@ export const NodePlankHeading = ({
         ) : (
           <PlankHeading.Button>
             <span className='sr-only'>{label}</span>
-            <Icon icon={icon} size={5} />
+            <Icon {...plankHeadingIconProps} />
           </PlankHeading.Button>
         )}
       </ActionRoot>
       <TextTooltip text={label} onlyWhenTruncating>
-        <PlankHeading.Label
-          attendableId={attendableId}
-          related={layoutPart === 'complementary'}
-          {...(pending && { classNames: 'text-description' })}
-        >
+        <PlankHeading.Label attendableId={node?.id} {...(pending && { classNames: 'text-description' })}>
           {label}
         </PlankHeading.Label>
       </TextTooltip>
@@ -144,6 +143,7 @@ export const NodePlankHeading = ({
                     action: NavigationAction.CLOSE,
                     data: {
                       activeParts: {
+                        complementary: [`${id}${SLUG_PATH_SEPARATOR}comments${SLUG_COLLECTION_INDICATOR}`],
                         [layoutPart]: [id],
                       },
                     },
@@ -151,7 +151,7 @@ export const NodePlankHeading = ({
               : { action: NavigationAction.ADJUST, data: { type: eventType, layoutCoordinate } },
           );
         }}
-        close={layoutPart === 'complementary' ? 'minify-end' : true}
+        close={layoutCoordinate?.part === 'complementary' ? 'minify-end' : true}
       />
     </PlankHeading.Root>
   );

package/src/components/DeckLayout/Plank.tsx

@@ -19,7 +19,7 @@ import {
 import { debounce } from '@dxos/async';
 import { useGraph } from '@dxos/plugin-graph';
 import { Button, Tooltip, useTranslation } from '@dxos/react-ui';
-import { useAttendableAttributes } from '@dxos/react-ui-attention';
+import { createAttendableAttributes } from '@dxos/react-ui-attention';
 import { Plank as NaturalPlank } from '@dxos/react-ui-deck';
 import { mainIntrinsicSize } from '@dxos/react-ui-theme';
 
@@ -52,7 +52,7 @@ export const Plank = ({ entry, layoutParts, part, flatDeck, searchEnabled, layou
   const rootElement = useRef<HTMLDivElement | null>(null);
   const resizeable = layoutMode === 'deck';
 
-  const attendableAttrs = useAttendableAttributes(entry.id);
+  const attendableAttrs = createAttendableAttributes(entry.id);
   const coordinate: LayoutCoordinate = { part, entryId: entry.id };
 
   const size = plankSizing?.[entry.id] as number | undefined;
@@ -78,7 +78,7 @@ export const Plank = ({ entry, layoutParts, part, flatDeck, searchEnabled, layou
   }, [scrollIntoView, layoutMode]);
 
   const isSolo = layoutMode === 'solo' && part === 'solo';
-  const isSuppressed = (layoutMode === 'solo' && part !== 'solo') || (layoutMode === 'deck' && part === 'solo');
+  const isSuppressed = layoutMode === 'solo' && part !== 'solo';
 
   const sizeAttrs = useMainSize();
 

package/src/components/DeckLayout/Sidebar.tsx

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

package/src/components/DeckLayout/StatusBar.tsx

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

package/src/components/LayoutSettings.tsx

@@ -61,22 +61,25 @@ export const LayoutSettings = ({ settings }: { settings: DeckSettingsProps }) =>
           </Select.Portal>
         </Select.Root>
       </SettingsValue>
-      <SettingsValue label={t('settings show hints label')}>
-        <Input.Switch checked={settings.showHints} onCheckedChange={(checked) => (settings.showHints = checked)} />
+      <SettingsValue label={t('settings show footer label')}>
+        <Input.Switch checked={settings.showFooter} onCheckedChange={(checked) => (settings.showFooter = !!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,13 +16,9 @@ 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, false) : undefined);
+  const [nodeState, setNodeState] = useState<Node<T> | undefined>(id ? graph.findNode(id) : undefined);
 
   useEffect(() => {
-    if (!id && nodeState) {
-      setNodeState(undefined);
-    }
-
     if (nodeState?.id === id || !id) {
       return;
     }

package/src/layout.ts

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

package/src/meta.ts

@@ -2,11 +2,9 @@
 // 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

@@ -16,7 +16,7 @@ export default [
         '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 hints label': 'Show hints',
+        'settings show footer label': 'Show footer (experimental)',
         'settings native redirect label': 'Enable native url redirect (experimental)',
         'settings custom slots': 'Theme option (experimental)',
         'settings new plank position start label': 'Start',
@@ -41,8 +41,6 @@ export default [
         'settings overscroll centering label': 'Centering',
         'settings overscroll none label': 'None',
         'settings flat deck': 'Flatten deck appearance',
-        'comments label': 'Show Comments',
-        'settings label': 'Show Settings',
       },
     },
   },

package/src/types.ts

@@ -20,7 +20,7 @@ export const OverscrollOptions = ['none', 'centering'] as const;
 export type Overscroll = (typeof OverscrollOptions)[number];
 
 export type DeckSettingsProps = {
-  showHints: boolean;
+  showFooter: 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, 'paddingInlineStart' | 'paddingInlineEnd'> | undefined => {
+): Pick<CSSProperties, 'paddingLeft' | 'paddingRight'> | undefined => {
   if (!planks?.length) {
-    return { paddingInlineStart: 0, paddingInlineEnd: 0 };
+    return;
   }
 
   // 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 { paddingInlineStart: overscrollPadding, paddingInlineEnd: overscrollPadding };
+    return { paddingLeft: overscrollPadding, paddingRight: 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 {
-      paddingInlineStart: `max(0px, calc(((100dvw - (${firstSize} + 20px)) / 2) - ${sidebarWidth}))`,
-      paddingInlineEnd: `max(0px, calc(((100dvw - (${lastSize} + 20px)) / 2) - ${complementarySidebarWidth}))`,
+      paddingLeft: `max(0px, calc(((100dvw - (${firstSize} + 20px)) / 2) - ${sidebarWidth}))`,
+      paddingRight: `max(0px, calc(((100dvw - (${lastSize} + 20px)) / 2) - ${complementarySidebarWidth}))`,
     };
   }
 };

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

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