@dxos/plugin-deck 0.6.14-main.f49f251 → 0.6.14-staging.4b6f9cf

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,6 +21,19 @@ 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 = {
   showHints: boolean;
   customSlots: boolean;

package/src/util/overscroll.ts

@@ -4,9 +4,6 @@
 
 import type { CSSProperties } from 'react';
 
-import { type LayoutEntry } from '@dxos/app-framework';
-import { PLANK_DEFAULTS } from '@dxos/react-ui-deck';
-
 /**
  * ┌────────────────────────────────────────────────────────────────────────────────────────────────────┐
  * | Overscroll Padding Calculation for Centering Planks on Screen.                                     │
@@ -52,39 +49,21 @@ import { PLANK_DEFAULTS } from '@dxos/react-ui-deck';
  * └────────────────────────────────────────────────────────────────────────────────────────────────────┘
  */
 export const calculateOverscroll = (
-  planks: LayoutEntry[] | undefined,
-  plankSizing: Record<string, number>,
-  sidebarOpen: boolean,
-  complementarySidebarOpen: boolean,
+  planksCount: number,
 ): Pick<CSSProperties, 'paddingInlineStart' | 'paddingInlineEnd'> | undefined => {
-  if (!planks?.length) {
+  if (!planksCount) {
     return { paddingInlineStart: 0, paddingInlineEnd: 0 };
   }
-
-  // TODO(Zan): Move complementary sidebar size (360px), sidebar size (270px), plank resize handle size (20px) to CSS variables.
-  const sidebarWidth = sidebarOpen ? '270px' : '0px';
-  const complementarySidebarWidth = complementarySidebarOpen ? '360px' : '0px';
-
-  const getPlankSize = (id: string) => (plankSizing[id] ?? PLANK_DEFAULTS.size).toFixed(2) + 'rem';
-
-  if (planks.length === 1) {
-    // Center the plank in the content area.
-    const plank = planks[0];
-    const plankSize = getPlankSize(plank.id);
-    const overscrollPadding = `max(0px, calc(((100dvw - ${sidebarWidth} - ${complementarySidebarWidth} - (${plankSize} + 20px)) / 2)))`;
-
+  if (planksCount === 1) {
+    const overscrollPadding =
+      'max(0px, calc(((100dvw - var(--dx-main-sidebarWidth) - var(--dx-main-complementaryWidth) - (var(--dx-main-contentFirstWidth) + 1px)) / 2)))';
     return { paddingInlineStart: overscrollPadding, paddingInlineEnd: overscrollPadding };
   } else {
-    // Center the plank on the screen.
-    const first = planks[0];
-    const firstSize = getPlankSize(first.id);
-
-    const last = planks[planks.length - 1];
-    const lastSize = getPlankSize(last.id);
-
     return {
-      paddingInlineStart: `max(0px, calc(((100dvw - (${firstSize} + 20px)) / 2) - ${sidebarWidth}))`,
-      paddingInlineEnd: `max(0px, calc(((100dvw - (${lastSize} + 20px)) / 2) - ${complementarySidebarWidth}))`,
+      paddingInlineStart:
+        'max(0px, calc(((100dvw - (var(--dx-main-contentFirstWidth) + 1px)) / 2) - var(--dx-main-sidebarWidth)))',
+      paddingInlineEnd:
+        'max(0px, calc(((100dvw - (var(--dx-main-contentLastWidth) + 1px)) / 2) - var(--dx-main-complementaryWidth)))',
     };
   }
 };